/*
 ╔═══════════════════════════════════════════════════════════════════════════╗
 ║ FICHIER : amc-typography-override.css
 ║ ZONE    : OVERRIDES TYPOGRAPHIE dashboard expert
 ╠═══════════════════════════════════════════════════════════════════════════╣
 ║ SCOPE       : .aex-shell descendants (font-family Poppins + tailles + couleurs turquoise par route)
 ║ SELECTEURS  : .aex-shell, .aex-shell .aex-pane[data-route=...], .aex-shell .aex-card-availability (177 selecteurs aex-*)
 ║ URL(s)      : Dashboard EXPERT uniquement
 ║ ENQUEUE     : class-amc-shortcodes.php case amc_expert_dashboard
 ╠═══════════════════════════════════════════════════════════════════════════╣
 ║ ⚠️  REGLE D'OR :
 ║    CSS COMPLEMENT de amc-expert-dashboard.css avec spec PLUS HAUTE pour override route-specific. NE PAS supprimer sans tester toutes les routes expert.
 ║
 ║ 📋 Voir docs/CSS-ARCHITECTURE.md pour la cartographie complete
 ║ 🧪 Voir docs/CSS-CHECKLIST.md pour les tests post-modif
 ╚═══════════════════════════════════════════════════════════════════════════╝
 */
/* ═══════════════════════════════════════════════════════════════════════════
   AMC Typography Override - v8.10.384
   2 variables CSS distinctes pour zone expert et zone client :
   - .aex-shell        → var(--amc-font-expert)
   - .amc-dashboard,
     .amc-catalog,
     .amc-room,
     .vpx-wrap         → var(--amc-font-client)
   
   Les variables sont injectees dynamiquement par AMC_Theme::generate_css_vars_string()
   Le fichier est charge sur tous les shortcodes AMC frontend
   ═══════════════════════════════════════════════════════════════════════════ */

/* ZONE EXPERT (Dashboard) */
.aex-shell,
.aex-shell *,
.aex-shell input,
.aex-shell button,
.aex-shell textarea,
.aex-shell select,
.aex-shell option,
.aex-shell h1, .aex-shell h2, .aex-shell h3,
.aex-shell h4, .aex-shell h5, .aex-shell h6,
.aex-shell p, .aex-shell a, .aex-shell span,
.aex-shell div, .aex-shell li, .aex-shell td,
.aex-shell th, .aex-shell label {
    font-family: var(--amc-font-expert, 'Poppins', sans-serif) !important;
}

/* ZONE CLIENT (Catalogue, Fiche expert, Wallet, Salle, Dashboard client) */
.amc-dashboard, .amc-dashboard *,
.amc-catalog, .amc-catalog *,
.amc-room, .amc-room *,
.vpx-wrap, .vpx-wrap *,
.amc-box, .amc-box *,
.amc-card, .amc-card * {
    font-family: var(--amc-font-client, 'Poppins', sans-serif) !important;
}

/* Exception : icones webfonts gardent leur police specifique */
.aex-shell .fa, .aex-shell .fas, .aex-shell .far, .aex-shell .fab, .aex-shell .fal,
.aex-shell [class^="material-icons"], .aex-shell [class*=" material-icons"],
.aex-shell .wd-icon, .aex-shell i.fa, .aex-shell i.fas,
.amc-dashboard .fa, .amc-catalog .fa, .amc-room .fa, .vpx-wrap .fa,
.amc-dashboard [class^="material-icons"], .amc-catalog [class^="material-icons"],
.amc-room [class^="material-icons"], .vpx-wrap [class^="material-icons"] {
    font-family: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.386 - Menu sidebar expert : 13px + 1 seule ligne avec ellipsis "..."
   Force font-size 13px (override !important existant) et truncate les
   labels trop longs (ex: "Mes consultations par email" -> "Mes consultations par...")
   ═══════════════════════════════════════════════════════════════════════════ */

/* Permet au .aex-nav-label (enfant flex) de retrecir sous sa taille naturelle */
.aex-shell .aex-nav-link,
.aex-shell .aex-nav-section {
    min-width: 0 !important;
}

/* Label des items principaux : 13px + ellipsis sur 1 seule ligne */
.aex-shell .aex-nav-label {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

/* Sous-menus : 13px + ellipsis sur 1 seule ligne */
.aex-shell .aex-nav-sublink {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.389 - Restaurer padding .aex-main sur 4 pages specifiques
   La regle v8.10.359 (ligne 11958 amc-dashboard.css) reduit .aex-main padding
   a 1rem 1rem 2rem (=14px 14px 28px) sur TOUTES les pages. Mais l'utilisateur
   veut ce padding reduit UNIQUEMENT sur Mes Messages / Mes Clients.
   Sur Mes Avis, Promo, Ma Disponibilite, Mon tableau de bord : restaurer le
   padding normal 1.5rem 2rem 3rem (=21px 28px 42px en root 14px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* v8.10.398 - v389 entierement supprimee : user veut TOUTES les routes au padding default 14px (Mes Messages style)
   La regle v389 forcait 1.5rem 2rem 3rem sur 4 routes (Dashboard, Disponibilite, Avis, Promo).
   v396 avait retire Avis+Promo. v398 retire les 2 dernieres (Dashboard + Disponibilite).
   Resultat : toutes les routes utilisent le default .aex-main padding 14px 14px 28px de la v359. */

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.390 - Restaurer padding interne sur la card principale de Mes Avis
   La regle v8.10.378 (ligne 13140 amc-dashboard.css) force .aex-card-body
   padding 0 GLOBAL, ce qui ecrase v8.10.271 qui definissait
   .aex-avis-main-card padding 20px 26px.
   Spec v378 : .aex-shell .aex-card .aex-card-body = (0,0,3,0) avec !important
   Spec ici  : .aex-shell .aex-pane[data-route=...] .aex-card .aex-card-body
               = (0,0,4,0) avec !important (1 attribut + 3 classes)
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="fidelisation/avis"] .aex-card .aex-avis-main-card,
.aex-shell .aex-pane[data-route="fidelisation/avis"] .aex-card-body.aex-avis-main-card {
    padding: 20px 26px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.391 - Mes Avis : enlever la bordure 1px sur les .aex-card pour
   matcher le rendu sans bordure de Mes Clients (.aex-clients-card)
   Comparaison computed styles :
   - Mes Clients : border: 0px none, shadow: rgba(142,139,133,.32)
   - Mes Avis    : border: 1px solid #e5e7eb, shadow: rgba(0,0,0,.06)
   La bordure visible cree un contour distinct qu'on retire ici.
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="fidelisation/avis"] > .aex-card {
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.394 - Mes Avis : restaurer padding interne sur la card 2 (tableau)
   pour matcher visuellement Mes Messages (bord blanc en haut/bas/cotes)
   Feedback user : "tableau Mes Avis colle aux bords, mettre comme Mes messages"

   Probleme : la card 2 du tableau Mes Avis utilise .aex-card sans padding
   interne. La regle v362 (data-route^="fidelisation/" .aex-card padding 0)
   force padding 0 sur la card -> tableau colle aux bords.

   Solution : ajouter .aex-card-pad au HTML (sémantique correct, comme Mes
   Messages) + cette regle CSS avec spec (0,5,0) > v362 (0,4,0) pour battre
   v362 et restaurer padding 1rem 1rem comme sur les cards aex-card-pad
   d'origine (regle ligne 12311 amc-dashboard.css).

   Cible : strictement la card 2 (tableau) via la class aex-card-pad.
   La card 1 (intro + score + filtres) n'a PAS aex-card-pad, donc elle
   garde son padding 0 sur la .aex-card et le padding 20px 26px geré par
   le .aex-card-body.aex-avis-main-card via la regle v390 ci-dessus.

   Specificite : .aex-shell + .aex-pane + [data-route] + .aex-card + .aex-card-pad
                 = (0,5,0) avec !important
   v362        : .aex-shell + .aex-pane + [data-route^] + .aex-card
                 = (0,4,0) avec !important
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route] .aex-card.aex-card-pad {
    padding: 1rem 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.395 - GENERALISATION du pattern aex-card-pad a tous les modules
   User a demande coherence visuelle sur Mes Avis + Mes Clients + Mes
   consultations + Fiche consultation + Fiche client + Prevoir promo et que
   ce soit le standard pour toutes les futures pages.

   Cette regle ci-dessus (v395 generalisee de v394 qui ne ciblait que
   fidelisation/avis) couvre maintenant TOUTES les routes avec data-route
   defini, donc tous les modules du dashboard. Spec (0,5,0) avec !important
   bat v362 (0,4,0) sur fidelisation/* et est compatible avec activite/*
   ou autres routes (qui n'ont pas la regle padding 0 forcee).

   Pattern d'usage : sur toute nouvelle page/module, mettre simplement
   <div class="aex-card aex-card-pad"> sur la card principale et le
   padding 1rem 1rem sera applique automatiquement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.397 - Mes Clients : aligner padding interne sur Mes Messages (14px)
   au lieu des 21px definis par la regle v281 (Wengo design)
   Feedback user : veut Mes Clients strictement identique a Mes Messages

   Probleme : la regle v281 ligne 8522 amc-dashboard.css force
   .aex-shell .aex-card.aex-clients-card > .aex-card-body { padding: 21px !important }
   avec spec (0,4,0) → contenu a 21px du bord card au lieu de 14px sur Messages

   Solution : surcharger v281 via une regle dans le fichier override avec
   spec (0,5,0) grace a l'attribut [data-route="fidelisation/clients"]
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="fidelisation/clients"] .aex-card.aex-clients-card > .aex-card-body {
    padding: 14px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.398 - Reset fonts a 13px sur Dashboard (widget Ma Dispo) + page Ma Disponibilite
   User : "retablir les fonts et taille par default de la zone expert" = 13px shell amc
   = identique a Mes Messages

   Strategie : forcer 13px sur tout sauf les titres principaux (.aex-disp-hero-title H1
   et .aex-pane-title H2 qui restent grands comme sur Mes Messages).
   Spec generique (0,3,0) avec !important pour battre les regles ciblees (15-16px)
   du module disponibilite (.aex-avail-state, .aex-card-title, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability *,
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-card,
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-card * {
    font-size: 13px !important;
}

/* Exceptions : titres principaux gardent leur taille originale */
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-hero-title,
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-pane-title,
.aex-shell .aex-pane[data-route="dashboard"] .aex-pane-title {
    font-size: 1.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.399 - Page Ma Disponibilite : liens Prevoir une periode d'absence
   et Decouvrez nos conseils en vert par defaut (cohérence avec boutons verts v399)
   Spec (0,4,0) bat la regle generique .aex-shell .aex-link (0,2,0)
   Exclusion .aex-link-danger pour preserver le rouge du lien Annuler absence
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-link:not(.aex-link-danger) {
    color: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-link:not(.aex-link-danger):hover {
    color: var(--amc-primary-dark, #0a8a8a) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.399 (suite) - FIX : forcer aex-btn-green sur Ma Disponibilite
   La regle .aex-disp-main .aex-btn (ligne ~12440 amc-dashboard.css) force
   var(--aex-btn-confirm) bleu sur TOUS les boutons dans .aex-disp-main,
   ce qui ecrasait nos .aex-btn-green appliques en HTML.

   Spec (0,5,0) avec .aex-disp-main + .aex-btn-green bat la spec (0,3,0) de
   la regle existante .aex-disp-main .aex-btn (spec : 1 attribut + 2 classes)
   Note : double selecteur pour couvrir cas dans/hors .aex-disp-main
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-main .aex-btn-green,
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-btn.aex-btn-green {
    background: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-main .aex-btn-green:hover,
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-btn.aex-btn-green:hover {
    background: var(--amc-primary-dark, #0a8a8a) !important;
    filter: brightness(.95) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.401 - Boutons groupe Tous les jours / Jours de la semaine / Week-end
   Sur page Ma Disponibilite
   User : "gris par defaut, gris clair au hover, turquoise actif"

   Override des regles existantes amc-dashboard.css ligne ~12414 qui forcaient
   hover et active en bleu (var(--aex-btn-confirm))
   Spec (0,3,0) avec attribut data-route bat (0,1,0) de .aex-disp-grp-btn de base
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-grp-btn {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
}
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-grp-btn:hover {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-grp-btn.is-active {
    background: var(--amc-primary, #0aa1a1) !important;
    border-color: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.402 - Mon profil + Mes services + Mes coordonnees : boutons et liens en turquoise
   User : "dans la page Mon profil mais aussi Mes services, changer les couleur de tous
   les boutons pour le vert turquoise, et aussi les lien de texte, Ainsi que les bouton
   Remplacer de la page Mes coordonnees"

   Cible : routes "profil", "mes-services", "coordonnees"
   Spec (0,4,0) avec data-route bat (0,2,0) des regles existantes .aex-card .aex-btn-blue
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- BOUTONS aex-btn-blue (filled) en turquoise (bg + hover) --- */
.aex-shell .aex-pane[data-route="profil"] .aex-btn-blue,
.aex-shell .aex-pane[data-route="profil"] button.aex-btn-blue,
.aex-shell .aex-pane[data-route="profil"] a.aex-btn-blue,
.aex-shell .aex-pane[data-route="mes-services"] .aex-btn-blue,
.aex-shell .aex-pane[data-route="mes-services"] button.aex-btn-blue,
.aex-shell .aex-pane[data-route="mes-services"] a.aex-btn-blue,
.aex-shell .aex-pane[data-route="coordonnees"] .aex-btn-blue,
.aex-shell .aex-pane[data-route="coordonnees"] button.aex-btn-blue,
.aex-shell .aex-pane[data-route="coordonnees"] a.aex-btn-blue {
    background: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}
.aex-shell .aex-pane[data-route="profil"] .aex-btn-blue:hover,
.aex-shell .aex-pane[data-route="mes-services"] .aex-btn-blue:hover,
.aex-shell .aex-pane[data-route="coordonnees"] .aex-btn-blue:hover {
    background: var(--amc-primary-dark, #0a8a8a) !important;
    filter: none !important;
}

/* --- BOUTONS aex-btn-default-outline (border + texte turquoise, bg reste blanc) --- */
.aex-shell .aex-pane[data-route="profil"] .aex-btn-default-outline,
.aex-shell .aex-pane[data-route="mes-services"] .aex-btn-default-outline,
.aex-shell .aex-pane[data-route="coordonnees"] .aex-btn-default-outline {
    border-color: var(--amc-primary, #0aa1a1) !important;
    color: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="profil"] .aex-btn-default-outline:hover,
.aex-shell .aex-pane[data-route="mes-services"] .aex-btn-default-outline:hover,
.aex-shell .aex-pane[data-route="coordonnees"] .aex-btn-default-outline:hover {
    background: var(--amc-primary-light, #e6f4f4) !important;
    border-color: var(--amc-primary-dark, #0a8a8a) !important;
    color: var(--amc-primary-dark, #0a8a8a) !important;
}

/* --- LIENS texte en turquoise (exclure aex-link-danger qui reste rouge) --- */
.aex-shell .aex-pane[data-route="profil"] .aex-link:not(.aex-link-danger),
.aex-shell .aex-pane[data-route="mes-services"] .aex-link:not(.aex-link-danger),
.aex-shell .aex-pane[data-route="coordonnees"] .aex-link:not(.aex-link-danger) {
    color: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="profil"] .aex-link:not(.aex-link-danger):hover,
.aex-shell .aex-pane[data-route="mes-services"] .aex-link:not(.aex-link-danger):hover,
.aex-shell .aex-pane[data-route="coordonnees"] .aex-link:not(.aex-link-danger):hover {
    color: var(--amc-primary-dark, #0a8a8a) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.404 - Turquoise sur 3 zones supplementaires :
   (1) Modal absence "Marquer une periode d'absence" bouton Valider
   (2) Tous les liens texte dans les fiches Mes Consultation (detail view)
   (3) Widget Ma disponibilite Dashboard : liens + boutons aex-btn-blue
       (sauf bouton "Me deconnecter de tous mes services" coral qui reste rouge,
       et bouton REPRENDRE orange qui reste)
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Modal absence : bouton Valider en turquoise
   Spec (1,0,0) avec ID bat .aex-modal .aex-btn-blue (0,2,0) avec !important */
#aex-absence-save {
    background: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}
#aex-absence-save:hover {
    background: var(--amc-primary-dark, #0a8a8a) !important;
    filter: none !important;
}

/* (2) Liens texte dans la fiche detail de Mes Consultation
   Spec (0,4,0) avec attr + id + classe bat .aex-shell .aex-link (0,2,0) */
.aex-shell .aex-pane[data-route="activite/consultations"] #aex-consult-detail-view .aex-link:not(.aex-link-danger),
.aex-shell .aex-pane[data-route="activite/consultations"] #aex-consult-detail-view a.aex-link:not(.aex-link-danger) {
    color: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="activite/consultations"] #aex-consult-detail-view .aex-link:not(.aex-link-danger):hover {
    color: var(--amc-primary-dark, #0a8a8a) !important;
}

/* (3a) Widget Dashboard Ma Dispo : liens texte en turquoise (sauf danger) */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-link:not(.aex-link-danger),
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability a.aex-link:not(.aex-link-danger) {
    color: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-link:not(.aex-link-danger):hover {
    color: var(--amc-primary-dark, #0a8a8a) !important;
}

/* (3b) Widget Dashboard Ma Dispo : boutons aex-btn-blue en turquoise
   Selecteurs multiples pour battre les regles existantes spec (0,2,0) avec !important
   IMPORTANT : ne cible PAS .aex-btn-coral (Me deconnecter, Annuler) ni .aex-btn-orange (REPRENDRE) */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-btn-blue,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability button.aex-btn-blue {
    background: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-btn-blue:hover,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability button.aex-btn-blue:hover {
    background: var(--amc-primary-dark, #0a8a8a) !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.405 - Widget Dashboard Ma Dispo : finitions couleurs
   (1) Cells planning actives (les "dots" du planning Aujourd'hui/Demain) en turquoise
   (2) Bouton croix close (.aex-period-remove qui supprime une periode horaire) en turquoise
   (3) Boutons Annuler coral en orange standard (var(--aex-btn-pause))
       SAUF #aex-btn-logout-all-services qui reste coral (Me deconnecter)
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Cells planning actives en turquoise */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-day-bar .aex-cell.is-active {
    background: var(--amc-primary, #0aa1a1) !important;
}

/* (2) Bouton croix close (period remove) en turquoise */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-period-remove {
    background: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-period-remove:hover {
    background: var(--amc-primary-dark, #0a8a8a) !important;
    filter: none !important;
}

/* (3) Boutons Annuler coral en orange standard (sauf bouton deconnexion services) */
/* v8.10.410 - Cette regle initialement v405 mettait les boutons Annuler en orange
   modifiee pour mettre TOUS les boutons coral en #E67566 (Annuler + Me deconnecter)
   user requested 2026-05-13 : "tous les bouton anuler en #E67566 comme Me deconnecter" */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-btn-coral {
    background: #E67566 !important;
    color: #fff !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-btn-coral:hover {
    background: #d96456 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.406 - Ma fiche expert + Mes modes de consultation : boutons en turquoise
   User : "Dans ma fiche le bouton expert +ajouter un elemenet changer en vert turquoise
   Tout les bouttons qui sont en bleut dans la page Mes Modes de consultations
   les changer en vert turquoise"

   Note : sur Ma fiche expert, le bouton "+ Ajouter un element" utilise la classe
   amc-cs-add-pack-btn (prefixe amc-cs, pas aex-btn-blue) - cible specifiquement
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Ma fiche expert : bouton "+ Ajouter un element" (classe amc-cs-add-pack-btn) en turquoise */
.aex-shell .aex-pane[data-route="service/fiche-expert"] .amc-cs-add-pack-btn,
.aex-shell .aex-pane[data-route="service/fiche-expert"] button.amc-cs-add-pack-btn {
    background: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}
.aex-shell .aex-pane[data-route="service/fiche-expert"] .amc-cs-add-pack-btn:hover,
.aex-shell .aex-pane[data-route="service/fiche-expert"] button.amc-cs-add-pack-btn:hover {
    background: var(--amc-primary-dark, #0a8a8a) !important;
    filter: none !important;
}

/* (2) Mes modes de consultation : TOUS les boutons aex-btn-blue (Valider x4 + Ajouter forfait) en turquoise
   Spec (0,4,0) avec data-route bat (0,2,0) des regles existantes */
.aex-shell .aex-pane[data-route="service/modes-consultation"] .aex-btn-blue,
.aex-shell .aex-pane[data-route="service/modes-consultation"] button.aex-btn-blue,
.aex-shell .aex-pane[data-route="service/modes-consultation"] a.aex-btn-blue {
    background: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}
.aex-shell .aex-pane[data-route="service/modes-consultation"] .aex-btn-blue:hover,
.aex-shell .aex-pane[data-route="service/modes-consultation"] button.aex-btn-blue:hover {
    background: var(--amc-primary-dark, #0a8a8a) !important;
    filter: none !important;
}

/* (3) Mes modes de consultation : boutons MODIFIER outline border + texte turquoise (au cas ou) */
.aex-shell .aex-pane[data-route="service/modes-consultation"] .aex-btn-default-outline {
    border-color: var(--amc-primary, #0aa1a1) !important;
    color: var(--amc-primary, #0aa1a1) !important;
}
.aex-shell .aex-pane[data-route="service/modes-consultation"] .aex-btn-default-outline:hover {
    background: var(--amc-primary-light, #e6f4f4) !important;
    border-color: var(--amc-primary-dark, #0a8a8a) !important;
    color: var(--amc-primary-dark, #0a8a8a) !important;
}

/* (4) Au cas ou amc-cs-add-pack-btn aussi sur modes-consultation */
.aex-shell .aex-pane[data-route="service/modes-consultation"] .amc-cs-add-pack-btn {
    background: var(--amc-primary, #0aa1a1) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.407 - Ma Disponibilite : tous les boutons en font-weight normal (sans bold)
   User : "tous les bouttons dans Ma disponibilite doivent etre sans bold"
   Diagnostic : Modifier fuseau / Modifier jour / Appliquer groupe rendaient 700 bold,
   alors que Appliquer le planning / Tous les jours rendaient 400 normal
   → Uniformisation a font-weight normal pour TOUS les boutons sur la route
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-btn,
.aex-shell .aex-pane[data-route="activite/disponibilite"] button.aex-btn,
.aex-shell .aex-pane[data-route="activite/disponibilite"] a.aex-btn,
.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-grp-btn,
.aex-shell .aex-pane[data-route="activite/disponibilite"] button.aex-disp-grp-btn {
    font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.408 - Ma Disponibilite : titre hero "Ma disponibilite - Organisez..." sans bold
   User : "Le titre Ma disponibilite - Organisez votre activite sans bold"
   ═══════════════════════════════════════════════════════════════════════════ */

.aex-shell .aex-pane[data-route="activite/disponibilite"] .aex-disp-hero-title,
.aex-shell .aex-pane[data-route="activite/disponibilite"] h1.aex-disp-hero-title {
    font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.409 - Widget Dashboard Ma Disponibilite :
   (1) TOUS les elements en font-weight 400 (sans bold)
   (2) Boutons Annuler + Me deconnecter tous a #E67566 (cohérence visuelle)
   User : "dans le widget Ma disponbilite tous les sans bold et les bouton anuler
   doivent etre en #E67566 qui est la couleur comme le boutton Me deconecter
   de tous mes services"

   Diagnostic v409 : Me deconnecter actuellement a #FF7F6E (rgb 255,127,110), pas #E67566
   → on harmonise les 4 boutons (Me deconnecter + 3 Annuler) tous a #E67566 exact
   → 19 elements detectes en fw 700 dans le widget : titre help "?", PAUSE/ME DECO/REPRENDRE,
     labels d'heures "20:00", spans "pas connecté" etc → tous force a 400
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Tous les elements du widget en font-weight 400 */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability * {
    font-weight: 400 !important;
}

/* v409 regle deja consolidee dans la regle modifiee plus haut */

/* v8.10.411 - Force #aex-btn-logout-all-services en #E67566
   La regle .aex-card-availability #aex-btn-logout-all-services (spec 1,1,0 !important)
   dans amc-dashboard.css force var(--aex-btn-cancel,#ff7f6e). Pour la battre, on cible
   le meme ID avec une spec plus elevee (1,4,0) */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability #aex-btn-logout-all-services,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability button#aex-btn-logout-all-services {
    background: #E67566 !important;
    color: #fff !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability #aex-btn-logout-all-services:hover,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability button#aex-btn-logout-all-services:hover {
    background: #d96456 !important;
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.414 - Dashboard : elements specifiques en semi-bold (600)
   User : "Suivi de votre service 'Alejandro Sanchez' semibold + dans widget
   Ma disponibilite Titre Ma disponibilite, Rendre le service disponible/indisponible/disponible,
   aussi +33189167169, Telephone visio tchat Tous en semi-bold"

   Ces regles doivent battre v409 qui forcait tout le widget a fw 400 (spec 0,4,0)
   Nouvelles regles utilisent spec ≥ (0,5,0) pour gagner
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Titre "Suivi de votre service 'Alejandro Sanchez'" - h2.aex-tdb-title */
.aex-shell .aex-pane[data-route="dashboard"] .aex-tdb-title,
.aex-shell .aex-pane[data-route="dashboard"] h2.aex-tdb-title {
    font-weight: 600 !important;
}

/* (2a) Titre "Ma disponibilite" du widget - h3.aex-card-title */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-card-title,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability h3.aex-card-title {
    font-weight: 600 !important;
}

/* (2b) Labels radio "Rendre le service disponible/indisponible/..." - .aex-radio dans aex-editor-today */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-radio,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability label.aex-radio {
    font-weight: 600 !important;
}

/* (2c) Modes "Telephone / Par visio / Chat" - les .aex-mode (text node direct) */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-mode {
    font-weight: 600 !important;
}

/* (2d) Mais .aex-mode-val (Oui/Non) reste a 400 normal */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-mode .aex-mode-val,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability span.aex-mode-val {
    font-weight: 400 !important;
}

/* (2e) Numero de telephone "+33189167169" - element <strong> dans le widget */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability strong,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-avail-phone strong {
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.10.415 - Dashboard widget : layout planning + ajustements semibold
   User : "barre des heures planning Aujourdhui/Demain doivent debuter completement
   a droite et titre Demain/Aujourdhui en semibold au dessus de chaque planning
   Suivi de votre service les deux SANS semibold + Oui/Non en semibold
   FR remplace par drapeau icon SVG dynamique"
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Layout planning : label Aujourdhui/Demain au-DESSUS de la barre (vertical)
   Au lieu de cote a cote (horizontal flex), passe en flex-direction column
   Resultat : la barre prend pleine largeur naturellement (debute "completement a droite") */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-day-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 4px !important;
    gap: 0 !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-day-label {
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: 1.3 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-day-ticks {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-day-bar-wrap {
    width: 540px !important;
    max-width: 540px !important;
    height: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-day-bar,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-day-ticks {
    width: 540px !important;
    max-width: 540px !important;
}

/* (2) "Suivi de votre service" + "'Alejandro Sanchez'" SANS semibold (retour 400)
   Annule la regle v414 qui mettait .aex-tdb-title en 600 */
.aex-shell .aex-pane[data-route="dashboard"] .aex-tdb-title,
.aex-shell .aex-pane[data-route="dashboard"] h2.aex-tdb-title,
.aex-shell .aex-pane[data-route="dashboard"] .aex-tdb-title .aex-tdb-expertname,
.aex-shell .aex-pane[data-route="dashboard"] .aex-tdb-title .aex-tdb-subtitle {
    font-weight: 400 !important;
}

/* (3) Oui/Non (.aex-mode-val) en semibold (annule la regle v414 qui les mettait a 400) */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability .aex-mode .aex-mode-val,
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability span.aex-mode-val {
    font-weight: 600 !important;
}

/* v8.10.420 - Espacement entre barre planning Demain et bloc "Ce module..."
   User : "Laisser un peu d'espace en haut avec la barre de planning de demain" */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability #aex-avail-edit-planning-msg {
    margin-top: 16px !important;
}

/* v8.10.421 - Espace 16px entre titre "Ma disponibilite" et "Je ne suis pas disponible"
   User : "laisse un petit espace de 16px entre la ligne en dessous de ma disponibilite et je ne suis pas disponible" */
.aex-shell .aex-pane[data-route="dashboard"] .aex-card-availability #aex-avail-state {
    margin-top: 16px !important;
}

/* v8.10.517 - Harmonisation espacement widgets sidebar entre les 3 fiches (Messages / Client / Consultation)
   Le conteneur Messages utilisait deja flex+gap 16px, mais les conteneurs Client/Consultation etaient en block.
   Apres v516 (margin-bottom:0 sur .aex-messages-sidebar-card), les widgets etaient colles sur Client/Consultation.
   Solution : appliquer flex column + gap 16px sur les 2 types de conteneurs pour cohérence visuelle. */
.aex-shell .aex-messages-sidebar,
.aex-shell .aex-client-sheet-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
/* v8.10.516/517 - margin-bottom 0 sur les widgets sidebar (le gap du conteneur s'occupe de l'espacement) */
.aex-shell .aex-card.aex-messages-sidebar-card {
    margin-bottom: 0 !important;
}