/**
 * ADEL SkinAI — styles du parcours de scan (front-end visiteur).
 *
 * Migré depuis le prototype adel-skinai-scan-flow.html.
 * Chargé via public/class-adel-skinai-public.php -> enqueue_styles().
 * Toutes les classes sont préfixées "as-" et namespacées sous
 * .adel-skinai-app pour ne jamais entrer en conflit avec le thème
 * WordPress actif sur adelcosmetic.com.
 */

/* CORRIGÉ (31/07) — signalé le 31/07 : la page se décale légèrement
   vers la droite à chaque changement d'écran. Cause réelle :
   .adel-skinai-app utilise width:100vw pour sortir du conteneur
   WordPress (voir plus bas, "Full-bleed breakout") — mais 100vw
   inclut la largeur de la barre de défilement verticale du
   navigateur. Tant qu'un écran est assez haut pour avoir cette barre
   et qu'un autre ne l'a pas (chaque écran du Follow-up Module a une
   hauteur différente), la largeur RÉELLEMENT visible change de
   quelques pixels d'un écran à l'autre, décalant tout le contenu
   centré. scrollbar-gutter réserve TOUJOURS cet espace, que la barre
   soit affichée ou non — la largeur visible reste alors identique en
   permanence, sur tous les écrans. Propriété standard, sans risque,
   ne change rien d'autre. */
html{ scrollbar-gutter:stable; }

  /* =====================================================
     ADEL SkinAI — design tokens
     Namespaced under .adel-skinai-app so nothing here can
     leak onto adelcosmetic.com if the two are ever mounted
     on the same page. No shared classnames, no global tag
     selectors outside the reset below.
  ===================================================== */
  :root{
    --ink:#17140f;
    --ink-soft:#2a241c;
    --cream:#efe6d4;
    --cream-soft:#f6f0e3;
    /* CORRIGÉ (07/09) — refonte UI/UX globale : consolidation autour de
       la teinte or exacte demandée (#D1B479), jamais la précédente
       (#c9a24b) qui coexistait avec elle dans l'interface -- un
       changement de valeur ICI corrige automatiquement les 38 usages
       existants de var(--gold) dans ce fichier, jamais besoin de les
       remplacer un à un. --gold-deep ajustée proportionnellement
       (teinte identique, luminosité réduite), cohérente avec l'accent
       déjà utilisé pour les icônes Dermoconseiller ailleurs dans ce
       même fichier. */
    --gold:#D1B479;
    --gold-deep:#B4914F;
    --gold-light:#E8D9B8;
    --line:rgba(255,255,255,0.28);
    --white-90:rgba(255,255,255,0.94);
    --white-70:rgba(255,255,255,0.8);
    --white-50:rgba(255,255,255,0.6);
    --white-35:rgba(255,255,255,0.4);
    --nav-glass:rgba(17,15,11,0.42);
    --panel:#15120d;
    --panel-line:rgba(255,255,255,0.1);
    --green:#7bd8a3;
    --green-deep:#2f9e63;
    --red:#e5686c;
    --red-bg:rgba(197,73,78,0.16);
    --red-line:rgba(229,104,108,0.55);
    /* AJOUTÉ (07/09) — refonte UI/UX globale, section 4 : seule
       couleur sémantique manquante à l'appel (success=--green,
       danger=--red existaient déjà) -- jamais une teinte vive
       agressive, cohérente avec le reste de la palette. */
    --warning:#D19A4A;
    --warning-bg:rgba(209,154,74,0.16);
    --radius-pill:999px;
    /* Échelle de rayons introduite pour une direction "soft" (grands
       rayons cohérents plutôt que des valeurs isolées 3/4/6/14/20/26/32px
       disséminées dans le fichier — voir composants ci-dessous, migrés
       un à un vers ces tokens). Inspirée des rayons "continus" iOS :
       généreux, progressifs, jamais un angle dur sur une surface
       interactive ou une carte. */
    --radius-xs:10px;
    --radius-sm:16px;
    --radius-md:22px;
    --radius-lg:28px;
    --radius-xl:36px;
    /* AJOUTÉ (31/07) — signalé le 31/07 : "pas juste avoir l'air d'un
       travail bâclé" — échelle d'espacement formelle, sur le même
       principe que --radius-* juste au-dessus (déjà posé le 30/07
       pour les rayons). Un audit direct du fichier a montré que
       PRESQUE CHAQUE valeur entière entre 2px et 60px était utilisée
       quelque part, sans échelle délibérée — signature d'un travail
       fait au cas par cas plutôt que par un système.
       MISE À JOUR (10/08) — signalé le 10/08 : "continue avec la mise
       en forme des autres écrans". 127 valeurs codées en dur migrées
       (toutes les correspondances EXACTES avec l'échelle, valeur
       unique et raccourcis à plusieurs valeurs) — chacune vérifiée
       par comparaison de styles calculés ET par différence de pixels
       stricte entre une capture d'écran avant/après (zéro différence
       détectée) avant d'être appliquée, jamais une substitution à
       l'aveugle. Les valeurs HORS échelle (14px, 10px, 6px, 18px...,
       environ 250 restantes) ne sont PAS touchées — les arrondir au
       jeton le plus proche sans revue visuelle changerait réellement
       l'espacement, un choix de conception qui appartient à une vraie
       revue écran par écran, jamais un script.
       Base 4px, avec une vraie progression plutôt qu'arbitraire.
       Utilisées: espace-1 = état pressé/hover, espace-2 = intérieur
       d'un petit composant, espace-3 = entre éléments proches,
       espace-4 = padding standard, espace-5/6 = entre blocs,
       espace-7/8 = entre sections, espace-9 = marge de page. */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:48px;
    --space-9:64px;
    /* AJOUTÉ (10/08) — signalé le 10/08 : "continue aussi" (revue
       écran par écran des valeurs hors échelle). Découverte avant de
       toucher au moindre pixel : 66% des 243 valeurs hors échelle
       tombent EXACTEMENT sur un point à mi-chemin entre deux jetons
       existants (6=entre 4 et 8, 10=entre 8 et 12, 14=entre 12 et 16,
       18=entre 16 et 20, 22=entre 20 et 24, 28=entre 24 et 32) —
       jamais un hasard à cette fréquence. Ce n'est pas du bruit à
       arrondir : c'est un vrai système de granularité fine déjà en
       usage dans ce projet, jamais formalisé jusqu'ici. Le
       reconnaître en jetons nommés atteint le même but que la
       migration (une référence systématique plutôt qu'une valeur
       codée en dur) SANS changer un seul pixel — jamais un arrondi
       qui aurait modifié le design réel. */
    --space-1-5:6px;
    --space-2-5:10px;
    --space-3-5:14px;
    --space-4-5:18px;
    --space-5-5:22px;
    --space-6-5:28px;
    /* CORRIGÉ (31/07) — signalé le 31/07 : identité typographique
       réelle d'ADEL, remplace Fraunces/Inter (polices génériques du
       prototype). Trois rôles distincts, jamais interchangeables :
       --font-display (Valeor) pour les grands titres et moments forts,
       --font-secondary (Tangier) pour les accents éditoriaux et
       sur-titres, --font-sans (Serotiva) pour tout le texte courant —
       avec repli sur les anciennes polices système en toute dernière
       intention, jamais un écran vide si un fichier de police tardait
       à charger. */
    --font-display:'Valeor', 'Fraunces', serif;
    --font-secondary:'Tangier', 'Fraunces', serif;
    --font-sans:'Serotiva', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    /* Easing "spring" doux (léger dépassement puis stabilisation) pour
       les interactions qui doivent se sentir physiques plutôt que
       mécaniques — boutons, cartes, apparitions d'overlay. --ease reste
       le easing "calme" (fondus, apparitions d'état) ; --ease-spring est
       réservé aux interactions tactiles (hover/press/apparition de carte). */
    --ease:cubic-bezier(0.16,1,0.3,1);
    --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

    /* ---- Tokens sémantiques contextuels ----
       Les composants partagés (cartes de règle, listes de familles,
       cartes de score, boutons…) sont utilisés À LA FOIS sur les écrans
       sombres (Accueil/Capture/IQM/Analyse) ET sur les écrans clairs
       (Questionnaire/Triage/Rapport — voir capture d'écran de référence :
       fond clair, cartes crème à bordure dorée). Plutôt que dupliquer
       chaque composant en 2 versions, on définit ici des tokens
       "sémantiques" avec une valeur par défaut (sombre), redéfinis une
       seule fois par écran clair plus bas (voir ".as-questionnaire,
       .as-triage, .as-rapport{ ... }"). Chaque composant partagé lit
       UNIQUEMENT ces tokens, jamais --ink/--white-90/etc. directement. */
    --surface-page:var(--ink);
    --surface-card:rgba(255,255,255,0.045);
    --surface-card-hover:rgba(255,255,255,0.075);
    --border-card:rgba(201,162,75,0.4);
    --border-card-soft:rgba(255,255,255,0.12);
    --text-primary:#fff;
    --text-secondary:var(--white-70);
    --text-tertiary:var(--white-50);
    /* Ombres "soft" : plus diffuses (rayon de flou plus large), moins
       opaques, et légèrement teintées plutôt que noir pur — c'est ce qui
       donne l'impression d'un objet qui flotte doucement au-dessus du
       fond plutôt que d'un rectangle avec une ombre portée mécanique.
       Comparer --shadow-card à l'ancienne valeur (0 24px 60px
       rgba(0,0,0,0.35)) : flou augmenté, opacité réduite de moitié. */
    --shadow-soft-sm:0 8px 24px rgba(23,20,15,0.14);
    --shadow-soft-md:0 20px 48px rgba(23,20,15,0.16);
    --shadow-card:0 28px 70px rgba(23,20,15,0.18);
    --shadow-btn:0 10px 26px rgba(23,20,15,0.16);
  }

  .adel-skinai-app, .adel-skinai-app *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }

  .adel-skinai-app{
    font-family:var(--font-sans);
    color:var(--white-90);
    background:var(--ink);
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    /* Full-bleed breakout: the shortcode is rendered inside WordPress's
       content wrapper (theme .entry-content or an Elementor boxed
       section), which has its own max-width. Without this, the app
       renders at that wrapper's width instead of the full viewport —
       this is the "doesn't take the full screen" bug. */
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }

  /* WordPress adds a 32px admin bar (visible to logged-in users only)
     and pushes <html> down by that amount. 100vh sections then overrun
     the viewport by 32px for logged-in visitors like Joel previewing
     the site. Not visible to real (logged-out) visitors, but worth
     compensating so the preview matches production. */
  body.admin-bar .as-hero,
  body.admin-bar .as-capture,
  body.admin-bar .as-iqm,
  body.admin-bar .as-screen{
    min-height:calc(100vh - 32px);
  }
  @media screen and (max-width:782px){
    body.admin-bar .as-hero,
    body.admin-bar .as-capture,
    body.admin-bar .as-iqm,
    body.admin-bar .as-screen{
      min-height:calc(100vh - 46px);
    }
  }

  .adel-skinai-app a{ color:inherit; text-decoration:none; }
  .adel-skinai-app button{ font-family:inherit; cursor:pointer; }

  /* Inline SVGs default to display:inline with baseline alignment,
     which reserves a few px of "descender" space below the icon.
     Inside a flex circle this reads as the icon sitting slightly
     low/left instead of dead-center — this is what was happening on
     the Start scan arrow. display:block removes that reserved space. */
  .adel-skinai-app svg{
    display:block;
  }
  /* AJOUTÉ (31/07) — signalé le 31/07 : "pas juste avoir l'air d'un
     travail bâclé" — vocabulaire d'icône ADEL, unifié en un seul
     endroit plutôt que 36 fois séparément dans chaque écran. Trait
     plus fin (1.5 au lieu de 2) pour un rendu plus soigné, plus
     éditorial — le trait par défaut à 2px est celui de n'importe
     quelle bibliothèque d'icônes gratuite, jamais une signature.
     Extrémités et jonctions arrondies, systématiquement — cohérent
     avec le langage du reste de la marque (boutons en pilule, coins
     toujours arrondis, jamais un angle vif). Ciblé précisément sur la
     convention 24x24 utilisée par CHAQUE icône du projet — jamais les
     anneaux de progression (120x120, 300x300...) ni les autres
     graphiques, qui ont leurs propres règles et ne doivent jamais
     hériter de celle-ci. */
  .adel-skinai-app svg[viewBox="0 0 24 24"]{
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  /* AJOUTÉ (31/07) — signalé le 31/07, avec capture annotée à l'appui :
     "les boutons ne sont pas bien alignés avec le texte". Cause réelle,
     trouvée en inspectant directement les métriques internes du fichier
     de police Serotiva (ascender=999, descender=400 sur une échelle de
     1000 — très asymétrique, contrairement à une police équilibrée) :
     le texte, même correctement centré par flexbox au niveau de sa
     boîte CSS (vérifié), peint ses lettres 6px trop haut À L'INTÉRIEUR
     de cette boîte, à 13.5px. Mesuré et confirmé par Playwright, avec
     le vrai fichier de police chargé via un serveur HTTP local (jamais
     via file://, qui bloque silencieusement les polices et masquait ce
     défaut lors d'une première vérification insuffisante) : plusieurs
     valeurs de correction testées empiriquement, 0.44em ramène l'écart
     à zéro. Un défaut de la police elle-même, jamais un bug d'align-
     items — appliqué ici au texte des boutons icône+texte (voir
     class="as-icon-label" sur chaque libellé concerné). */
  .as-icon-label{
    display:inline-block;
    transform:translateY(0.44em);
  }
  .as-home-link,
  .as-cta__icon,
  .as-back,
  .as-iqm__back,
  .as-metric__check,
  .as-view__state-icon{
    line-height:0;
  }

  .adel-skinai-app :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    border-radius:4px;
  }

  @media (prefers-reduced-motion: reduce){
    .adel-skinai-app *{
      animation-duration:0.01ms !important;
      transition-duration:0.01ms !important;
    }
  }

  /* ---------- Top bar (shared across screens) ---------- */
  .as-topbar{
    position:absolute;
    top:0; left:0; right:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    /* CORRIGÉ (26/08) — signalé en conditions réelles (capture d'écran
       à l'appui) : à certaines largeurs intermédiaires (environ
       500-700px), le groupe sélecteur de langue + bouton compte
       manquait de place et passait sur une seconde ligne, rendant la
       barre bien plus haute que prévu -- masquant le contenu juste en
       dessous (ex. "Revenir au rapport"), peu importe la marge de
       sécurité fixée sur .as-dash. Corrigé à la racine plutôt que de
       deviner une marge toujours plus grande : cette barre ne passe
       plus jamais à deux lignes, quelle que soit la largeur -- voir
       le rétrécissement progressif des éléments internes ci-dessous
       à la place. */
    flex-wrap:nowrap;
    padding:var(--space-5-5) 40px;
    background:rgba(24,21,17,0.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  /* AJOUTÉ (26/08) — signalé le 26/08 : sélecteur de langue FR/EN dans
     la barre de navigation. .as-topbar utilise déjà
     justify-content:space-between avec 2 enfants (identité, compte) ;
     ajouté comme un 3ᵉ élément flexible neutre entre les deux (voir
     l'ordre d'insertion, buildSwitcherInto() dans scan-i18n.js),
     jamais besoin de restructurer la mise en page existante pour
     l'accueillir. */
  .as-lang-switcher{
    display:flex;
    gap:2px;
    background:rgba(255,255,255,0.08);
    border-radius:var(--radius-sm);
    padding:2px;
  }
  .as-lang-switcher__btn{
    border:none;
    background:transparent;
    color:var(--white-70, rgba(255,255,255,0.7));
    font-size:11px;
    font-weight:700;
    letter-spacing:0.03em;
    padding:5px 10px;
    border-radius:calc(var(--radius-sm) - 2px);
    cursor:pointer;
  }
  .as-lang-switcher__btn.is-active{
    background:var(--gold, #d1b479);
    color:var(--ink, #1a1a1a);
  }
  /* AJOUTÉ (26/08) — voir le docblock complet de buildSwitcherInto()
     dans scan-i18n.js : regroupe "Mon compte"/"Sign up" et le
     sélecteur de langue au même endroit, à droite de la barre. */
  .as-topbar__right-group{
    display:flex;
    align-items:center;
    gap:var(--space-4);
  }

  .as-brand{
    display:flex;
    align-items:center;
    gap:var(--space-3-5);
  }

  .as-home-link{
    width:38px;
    height:38px;
    border:1px solid var(--gold);
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    background:rgba(201,162,75,0.08);
    transition:background 0.2s ease, transform 0.2s ease;
    flex-shrink:0;
    /* AJOUTÉ (17/08) — signalé le 17/08 : basculé de <a> vers <button>
       (voir partial-topbar.php, même jour) -- un <button> n'a jamais
       le curseur "pointer" par défaut contrairement à un lien, jamais
       supposé hérité automatiquement. */
    cursor:pointer;
  }
  .as-home-link:hover{ background:rgba(201,162,75,0.2); transform:translateY(-1px); }
  .as-home-link svg{ width:18px; height:18px; }

  /* CORRIGÉ (13/08) — remplace .as-wordmark (texte stylé "ADEL |
     SkinAi") par le vrai logo graphique. Hauteur cohérente avec
     .as-home-link (38px) juste au-dessus, légèrement réduite pour
     tenir compte de la marge visuelle propre au logo. filter:invert()
     transforme le noir quasi-pur du fichier fourni en blanc — le fond
     de .as-topbar est très sombre (rgba(24,21,17,0.78)), un logo noir
     y resterait quasiment invisible. brightness(1.1) compense le
     fait qu'un simple invert() du noir mesuré (20,21,25) donne un
     blanc légèrement gris (235,234,230), pas un blanc franc.
     CORRIGÉ (14/08) — largeur figée à 70px alors que le fichier réel
     (adel-skinai-wordmark.png) fait 1068×605px, ratio 1,765:1 — 70px
     pour 32px de haut donnait un ratio de 2,19:1, le logo était donc
     étiré horizontalement.
     CORRIGÉ DE NOUVEAU (14/08) — signalé le 14/08 : passer en
     width:auto a fait prendre au logo toute la largeur de la page
     sur le vrai site. Cause probable : le thème WordPress applique
     très souvent un reset générique du type `img{ max-width:100%;
     height:auto; }`, parfois en !important — combiné à width:auto
     ici, plus rien ne bornait la largeur réelle affichée si ce reset
     du thème l'emportait sur height:32px. Repasse sur une largeur
     FIXE, comme avant, mais avec le VRAI ratio du fichier cette
     fois (56px pour 32px de haut, 46px pour 26px de haut en mobile
     ci-dessous — calculé depuis 1068×605, jamais un chiffre
     approximatif) : corrige la distorsion ET reste robuste face à un
     éventuel reset CSS du thème, contrairement à auto.
     AGRANDI (14/08) — signalé le 14/08 : logo légèrement plus grand
     demandé, sur cet écran et sur le follow-up (voir aussi
     .as-shell__logo-img plus bas dans ce fichier) — 40px de haut
     (était 32px), largeur recalculée depuis le même vrai ratio pour
     ne jamais réintroduire de distorsion. */
  .as-wordmark-img{
    height:40px;
    width:71px;
    filter:invert(1) brightness(1.1);
  }

  .as-signup{
    padding:11px var(--space-6);
    border:1px solid var(--white-70);
    border-radius:var(--radius-pill);
    background:transparent;
    color:var(--white-90);
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .as-signup:hover{ background:var(--cream-soft); color:var(--ink); }

  /* AJOUTÉ (01/09) — menu "Mon compte" (Voir mon profil / Se
     déconnecter), voir le docblock complet de wireAccountMenu() dans
     scan-app-shell.js. Un seul menu partagé, repositionné en JS à
     chaque ouverture -- jamais un style qui dépendrait d'un
     positionnement relatif à un parent précis. */
  .as-account-menu{
    z-index:10000;
    min-width:180px;
    background:var(--white-90, #fff);
    border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,0.28);
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  /* CORRIGÉ (02/09) — signalé le 02/09 en conditions réelles : "le
     menu doit disparaître après avoir validé son choix" -- même bug
     déjà rencontré une fois cette session (voir
     .adel-review__zoom-overlay[hidden] dans admin/css/admin.css) :
     display:flex ci-dessus, posé sur un sélecteur de classe, l'emporte
     sur la règle par défaut du navigateur [hidden]{display:none} (un
     simple sélecteur d'attribut, moins spécifique) -- menu.hidden=true
     posait bien l'attribut HTML, mais restait visuellement affiché
     malgré tout. Cette règle rétablit explicitement le masquage,
     jamais un correctif dans le JS qui n'aurait rien changé au vrai
     problème (purement une question de spécificité CSS). */
  .as-account-menu[hidden]{ display:none; }

  /* AJOUTÉ (02/09) — module Care, Phase 4. Réutilise volontairement
     .as-dash, .as-identity-form__input, .as-account-gate__field,
     .as-btn-pill déjà stylés ailleurs -- seules les classes VRAIMENT
     nouvelles de cet écran sont définies ici. */
  .as-rapport__care-cta{
    margin:20px 0;
    padding:20px;
    border-radius:16px;
    background:var(--cream-soft, #f2ede1);
    text-align:center;
  }
  .as-rapport__care-cta-title{ font-weight:700; font-size:16px; margin-bottom:6px; }
  .as-rapport__care-cta-text{ font-size:14px; color:var(--ink-70, #4a4740); margin-bottom:14px; }
  .as-rapport__care-cta-disclaimer{ font-size:12px; font-style:italic; color:var(--ink-50, #7a7568); margin-top:10px; }

  .as-care__step-intro{ font-size:14px; color:var(--ink-70, #4a4740); margin-bottom:16px; }
  .as-care__loading{ text-align:center; padding:24px; color:var(--ink-50, #7a7568); }

  .as-care__dermatologist-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .as-care__dermatologist-card{
    padding:16px;
    border-radius:12px;
    border:1px solid rgba(23,20,15,0.10);
    background:var(--white-90, #fff);
  }
  .as-care__dermatologist-name{ font-weight:700; font-size:15px; margin-bottom:2px; }
  .as-care__dermatologist-location{ font-size:13px; color:var(--ink-50, #7a7568); margin-bottom:6px; }
  .as-care__dermatologist-specialties{ font-size:13px; color:var(--ink-70, #4a4740); margin-bottom:10px; }
  .as-care__dermatologist-choose{ width:100%; }

  .as-care__empty{ text-align:center; padding:32px 16px; }
  .as-care__empty-title{ font-weight:700; margin-bottom:6px; }
  .as-care__empty-text{ font-size:14px; color:var(--ink-50, #7a7568); }

  .as-care__section-title{ font-size:15px; font-weight:700; margin:24px 0 10px; }
  .as-care__selected-dermatologist{ font-weight:600; margin-bottom:16px; }

  .as-care__scope-list, .as-care__motif-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
  .as-care__scope-item, .as-care__motif-item{ font-size:14px; }

  /* AJOUTÉ (05/09) — mission de consolidation ADEL Care, Problème 1 :
     étape motif dédiée, cartes sélectionnables plutôt qu'un simple
     tableau -- lisibles et tactiles sur mobile sans ouvrir de
     sous-menu, conforme à la spécification d'origine (section 17). */
  .as-care__step-subtitle{ font-size:13px; color:var(--ink-50, #7a7568); margin:-8px 0 16px; }
  .as-care__motif-select-item{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border:1px solid var(--ink-15, #e4ded0);
    border-radius:12px; cursor:pointer; font-size:14px;
    min-height:44px; /* zone tactile suffisante, section 17. */
    transition:border-color .15s, background .15s;
  }
  .as-care__motif-select-item:has(input:checked), .as-care__motif-select-item--selected{
    border-color:var(--gold, #d1b479); background:var(--cream-soft, #f2ede1);
  }
  /* AJOUTÉ (05/09) — état "préoccupation principale" : jamais
     uniquement une différence de couleur (section 18, accessibilité),
     un repère textuel visible s'ajoute via ::after. */
  .as-care__motif-select-item--primary{ border-width:2px; border-color:var(--gold, #d1b479); }
  .as-care__motif-select-item--primary::after{
    content:"\u2605 Principal"; margin-left:auto; font-size:11px;
    font-weight:700; color:var(--gold, #d1b479); white-space:nowrap;
  }
  .as-care__motif-count{ font-size:12px; color:var(--ink-50, #7a7568); margin:0 0 14px; }
  .as-care__motif-other{ margin-bottom:12px; }

  .as-care__duration-options{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
  .as-care__radio{ display:flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; }
  .as-care__duration-note{ font-size:12px; color:var(--ink-50, #7a7568); margin-bottom:10px; }

  .as-care__consent-text{ font-size:15px; margin-bottom:8px; }
  .as-care__consent-note{ font-size:12px; color:var(--ink-50, #7a7568); margin-bottom:16px; }

  .as-care__confirmation-title{ font-size:18px; font-weight:700; text-align:center; margin:32px 0 8px; }
  .as-care__confirmation-text{ font-size:14px; color:var(--ink-70, #4a4740); text-align:center; margin-bottom:24px; }

  #as-care-manage-link{ display:block; margin-bottom:20px; }
  .as-care__share-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:12px; }
  .as-care__share-card{
    padding:16px;
    border-radius:12px;
    border:1px solid rgba(23,20,15,0.10);
    background:var(--white-90, #fff);
  }
  .as-care__share-dermatologist{ font-weight:700; font-size:15px; margin-bottom:4px; }
  .as-care__share-status{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    padding:2px 10px;
    border-radius:999px;
    background:var(--cream-soft, #f2ede1);
    margin-bottom:6px;
  }
  .as-care__share-expiry{ font-size:13px; color:var(--ink-50, #7a7568); margin-bottom:10px; }
  .as-care__share-revoke{ color:#b3432b; }

  /* AJOUTÉ (02/09) — Phase 6 : l'écran "avis reçu" et le bandeau du
     tableau de bord. */
  .as-care__response-content{ margin-bottom:16px; }
  .as-care__response-dermatologist{ font-weight:700; font-size:15px; margin-bottom:12px; }
  .as-care__response-followup{
    margin-top:16px;
    padding:10px 14px;
    border-radius:10px;
    background:var(--cream-soft, #f2ede1);
    font-weight:600;
    font-size:14px;
  }
  .as-care__share-view-response{ margin-right:12px; }
  /* Couleur distincte de la bannière de calibrage déjà existante
     (voir #as-dash-retest-banner) -- jamais confondues visuellement. */
  #as-dash-followup-banner{ border-color:var(--shell-purple, #6b5b95); color:var(--shell-purple, #6b5b95); }

  /* AJOUTÉ (02/09) — étape de sélection du rapport, voir le docblock
     complet dans partial-screen-care.php. Même motif exact que
     .as-care__dermatologist-* déjà stylé plus haut -- jamais une
     seconde convention inventée pour une liste de cartes similaire. */
  .as-care__report-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .as-care__report-card{
    padding:16px;
    border-radius:12px;
    border:1px solid rgba(23,20,15,0.10);
    background:var(--white-90, #fff);
  }
  .as-care__report-date{ font-weight:700; font-size:15px; margin-bottom:2px; }
  .as-care__report-gshs{ font-size:13px; color:var(--ink-50, #7a7568); margin-bottom:10px; }
  .as-care__report-choose{ width:100%; }

  /* AJOUTÉ (02/09) — Step 1 de la refonte du parcours Care : les
     deux cartes de choix de type d'expert. */
  /* CORRIGÉ (05/09) — refonte UI/UX ADEL Care Experts : vraie grille à
     deux colonnes sur desktop/tablette large (jamais empilées comme
     avant), identité Gold ADEL (#D1B479) au lieu du violet générique
     précédent -- structure HTML/JS entièrement inchangée, uniquement
     le CSS. Hauteur égale garantie par la grille elle-même (les
     enfants d'une grille CSS s'étirent par défaut sur toute la
     hauteur de leur rangée), jamais besoin de min-height codé en dur
     qui casserait sur un contenu plus long demain. */
  .as-care__type-cards{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-top:20px;
  }
  @media (max-width:767px){
    .as-care__type-cards{ grid-template-columns:1fr; }
  }
  .as-care__type-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    height:100%;
    padding:28px 24px;
    border-radius:18px;
    border:1.5px solid rgba(23,20,15,0.10);
    background:var(--white-90, #fff);
    cursor:pointer;
    transition:border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }
  .as-care__type-card:hover{
    border-color:#D1B479;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(17,15,10,0.08);
  }
  /* AJOUTÉ (05/09) — signalé en conditions réelles : vraies photos en
     arrière-plan avec fondu, comme sur le mockup fourni.
     background-image lui-même posé en style inline depuis le PHP
     (deux fichiers différents par carte) -- ce bloc ne configure que
     la TAILLE/POSITION, jamais l'image elle-même, pour rester
     réutilisable si les noms de fichiers changent un jour sans toucher
     à ce CSS. */
  .as-care__type-card--photo{
    background-size:cover;
    background-position:center right;
    border-color:transparent;
  }
  /* AJOUTÉ (05/09) — carte Dermatologue : fondu sombre -- texte clair
     nécessaire pour rester lisible sur ce fond, jamais le texte sombre
     par défaut hérité du fond blanc d'origine. */
  .as-care__type-card--photo:not(.as-care__type-card--conseiller) .as-care__type-card-title,
  .as-care__type-card--photo:not(.as-care__type-card--conseiller) .as-care__type-card-list li{
    color:#F4F1EA;
  }
  .as-care__type-card--photo:not(.as-care__type-card--conseiller) .as-care__type-card-subtitle,
  .as-care__type-card--photo:not(.as-care__type-card--conseiller) .as-care__type-card-note{
    color:rgba(244,241,234,0.75);
  }
  .as-care__type-card--photo:not(.as-care__type-card--conseiller) .as-care__type-card-icon{
    background:rgba(255,255,255,0.12); color:#D1B479;
  }
  /* AJOUTÉ (05/09) — carte Dermoconseiller : fondu clair/crème -- le
     texte sombre déjà par défaut reste lisible, aucun changement de
     couleur nécessaire ici, seulement l'icône assortie au fondu clair. */
  .as-care__type-card--conseiller .as-care__type-card-icon{
    background:rgba(18,19,20,0.06); color:#B4914F;
  }
  /* AJOUTÉ (05/09) — état "sélectionné" réel, jamais uniquement le
     hover -- une personne qui vient de cliquer doit voir clairement
     laquelle des deux cartes est retenue avant de continuer, même
     sans survoler la carte avec la souris (section 7 de la mission :
     "indicateur de sélection"). Bascule via JS existant (voir
     scan-care.js, aucune modification de logique) sur la classe
     --selected déjà posée pour la préoccupation principale ailleurs
     dans ce même fichier -- même convention réutilisée, jamais une
     seconde inventée ici.
  */
  .as-care__type-card.as-care__type-card--selected{
    border-color:#D1B479;
    border-width:2px;
    background:#FBF7EE;
    box-shadow:0 8px 24px rgba(209,180,121,0.25);
  }
  /* CORRIGÉ (05/09) — les deux ambiances par type sont désormais gérées
     par les règles --photo/--conseiller plus bas (icônes assorties au
     fondu de chaque photo) -- ces deux règles par data-attribute
     seraient devenues du code mort, jamais gagnantes face aux
     nouvelles, retirées plutôt que laissées comme fausse piste pour
     une prochaine lecture de ce fichier. */
  .as-care__type-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:14px;
    margin-bottom:16px;
  }
  .as-care__type-card-icon svg{ width:24px; height:24px; }
  .as-care__type-card-title{ font-size:19px; font-weight:700; margin-bottom:6px; letter-spacing:-0.01em; }
  .as-care__type-card-subtitle{ font-size:13px; color:var(--ink-50, #7a7568); margin-bottom:16px; line-height:1.5; }
  .as-care__type-card-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
  .as-care__type-card-list li{
    font-size:13.5px;
    line-height:1.4;

    padding-left:18px;
    position:relative;
  }
  .as-care__type-card-list li::before{
    content:'';
    position:absolute;
    left:0;
    top:7px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#D1B479;
  }
  .as-care__type-card-note{ font-size:11px; font-style:italic; color:var(--ink-50, #7a7568); }

  .as-account-menu__item{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 12px;
    border-radius:8px;
    border:none;
    background:transparent;
    color:var(--ink, #1a1a1a);
    font-size:14px;
    cursor:pointer;
    transition:background 0.15s ease;
  }
  .as-account-menu__item:hover{ background:var(--cream-soft, #f2ede1); }
  .as-account-menu__item--danger{ color:#b3432b; }
  .as-account-menu__item--danger:hover{ background:rgba(179,67,43,0.08); }

  /* ---------- Screen shell / transitions ---------- */
  .as-screen{
    display:none;
    position:relative;
    min-height:100vh;
    width:100%;
    overflow:hidden;
  }
  .as-screen.is-active{
    display:block;
    animation:asFade 0.45s ease;
    /* CORRIGÉ (19/09), 2e passage — la première correction
       (opacity:1 statique) n'a pas suffi : prouvé en conditions
       réelles (clic normal, outils de développement fermés, même
       résultat) que ce n'est pas un artefact de mesure. Une
       animation CSS l'emporte TOUJOURS sur une valeur statique tant
       qu'elle est considérée active dans la cascade -- peu importe
       la raison exacte pour laquelle elle reste bloquée à sa
       première image (piste non tranchée avec certitude : possible
       lien avec un réglage d'accessibilité "mouvement réduit" du
       système, jamais géré explicitement dans ce fichier, ou autre
       chose). !important est le seul niveau de la cascade CSS qui
       l'emporte sur une animation, quoi qu'il arrive -- garantit que
       l'écran reste visible même si l'animation continue de mal se
       comporter, sans avoir besoin d'en connaître la cause exacte.
       L'animation cosmétique reste en place pour les écrans où elle
       fonctionne déjà normalement, jamais retirée globalement. */
    opacity:1 !important;
  }
  @keyframes asFade{
    from{ opacity:0; }
    to{ opacity:1; }
  }

  /* ================= SCREEN 1 — HOME / HERO ================= */
  .as-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    background-image:url('../images/hero-model.jpg');
    background-size:cover;
    background-position:center 18%;
    background-color:#4a382c;
  }

  /* left-to-right vignette so the headline stays legible over the "photo" */
  .as-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, rgba(15,13,10,0.62) 0%, rgba(15,13,10,0.28) 38%, rgba(15,13,10,0) 62%);
    z-index:1;
  }

  /* rule-of-thirds scan grid, purely decorative framing cue */
  .as-scan-grid{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .as-scan-grid span{
    position:absolute;
    background:var(--line);
  }
  .as-scan-grid .v1{ left:33.33%; top:0; bottom:0; width:1px; }
  .as-scan-grid .v2{ left:66.66%; top:0; bottom:0; width:1px; }
  .as-scan-grid .h1{ top:33.33%; left:0; right:0; height:1px; }
  .as-scan-grid .h2{ top:66.66%; left:0; right:0; height:1px; }

  .as-scan-dot{
    position:absolute;
    z-index:3;
    width:11px;
    height:11px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.85);
    background:rgba(255,255,255,0.15);
    box-shadow:0 0 0 6px rgba(255,255,255,0.06);
  }
  .as-scan-dot--1{ top:16%; left:63%; }
  .as-scan-dot--2{ top:37%; left:71%; }
  .as-scan-dot--3{ top:56%; left:58%; }

  .as-photo-note{
    position:absolute;
    z-index:2;
    bottom:16px;
    left:16px;
    font-size:10px;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.4);
    border:1px dashed rgba(255,255,255,0.25);
    padding:var(--space-1) var(--space-2);
    border-radius:6px;
  }

  .as-hero__content{
    position:relative;
    z-index:5;
    max-width:520px;
    padding:0 40px 88px;
  }

  .as-eyebrow{
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:var(--space-4-5);
  }

  .as-headline{
    font-family:var(--font-sans);
    font-weight:800;
    font-size:44px;
    line-height:1.08;
    letter-spacing:-0.01em;
    color:#fff;
    margin-bottom:var(--space-5-5);
  }
  .as-headline em{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:500;
  }

  .as-subtext{
    font-size:15px;
    line-height:1.6;
    color:var(--white-70);
    max-width:400px;
    margin-bottom:34px;
  }

  .as-cta{
    display:inline-flex;
    align-items:center;
    gap:var(--space-3-5);
    padding:var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-6-5);
    background:var(--ink);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:var(--radius-pill);
    color:#fff;
    font-size:14px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    box-shadow:var(--shadow-btn);
    transition:transform 0.35s var(--ease-spring), background 0.25s var(--ease), box-shadow 0.35s var(--ease-spring);
  }
  .as-cta:hover{ transform:translateY(-2px) scale(1.015); background:#000; box-shadow:0 16px 34px rgba(23,20,15,0.28); }
  .as-cta:active{ transform:translateY(0) scale(0.98); box-shadow:0 6px 16px rgba(23,20,15,0.22); }
  .as-cta__icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:transform 0.3s var(--ease), background 0.3s var(--ease);
  }
  .as-cta:hover .as-cta__icon{ background:#dab55f; transform:translateX(2px); }
  .as-cta__icon svg{ width:15px; height:15px; }
  .as-cta:disabled{
    opacity:0.45;
    cursor:not-allowed;
    transform:none !important;
    box-shadow:none !important;
    background:var(--ink) !important;
  }
  .as-cta:disabled .as-cta__icon{ transform:none !important; background:rgba(255,255,255,0.25) !important; }

  /* ---------- Popup d'identité (téléphone + consentement) ---------- */
  .as-identity-dialog{
    /* Un <dialog> natif se centre par défaut via les styles UA du
       navigateur (position:fixed + inset:0 + margin:auto), mais un
       reset CSS global (thème WordPress, Elementor) peut écraser ce
       margin:auto implicite. On le redéclare donc explicitement ici. */
    position:fixed;
    inset:0;
    margin:auto;
    border:none;
    border-radius:var(--radius-xl);
    padding:0;
    max-width:420px;
    width:calc(100% - 48px);
    /* Sans plafond de hauteur, un contenu plus haut que le viewport
       VISIBLE (barre d'adresse + clavier mobile ouvert pour saisir le
       téléphone) ne peut pas être vraiment centré : le navigateur le
       plaque en haut faute de place. */
    max-height:min(600px, 88dvh);
    overflow-y:auto;
    background:#fff;
    color:var(--ink);
    box-shadow:var(--shadow-card);
    /* CORRIGÉ (17/08) — signalé le 17/08 : "les écritures sont en
       blanc, pas visibles" sur la popup "Retrouver ton historique".
       TROISIÈME occurrence exacte du même bug déjà documenté deux fois
       dans ce fichier (28/07 pour .as-shell, 31/07 pour
       #as-screen-account-gate) : cette popup est incluse AVANT
       .as-shell dans le DOM (voir partial-scan-app.php, jamais
       imbriquée dedans), donc jamais couverte par les redéfinitions
       claires existantes -- elle hérite silencieusement des jetons
       sombres de :root (--text-primary:#fff) sur son propre fond
       blanc juste au-dessus. Corrigé ICI, sur la classe PARTAGÉE
       .as-identity-dialog (jamais un identifiant isolé) : protège à la
       fois cette popup ET la popup d'identité principale, et
       n'importe quelle future réutilisation de cette même classe --
       jamais un correctif à refaire une quatrième fois. */
    --surface-page:#ffffff;
    --surface-card:#fff;
    --surface-card-hover:#fff;
    --border-card:rgba(164,128,47,0.35);
    --border-card-soft:rgba(23,20,15,0.14);
    --text-primary:var(--ink);
    --text-secondary:rgba(23,20,15,0.72);
    --text-tertiary:rgba(23,20,15,0.52);
  }
  .as-identity-dialog::backdrop{
    background:rgba(12,10,8,0.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .as-identity-dialog__inner{
    position:relative;
    padding:40px var(--space-7) var(--space-7);
  }
  .as-identity-dialog__eyebrow{
    font-family:var(--font-secondary);
    font-style:italic;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gold-deep);
    font-weight:400;
    margin-bottom:var(--space-2-5);
  }
  .as-identity-dialog__title{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:var(--space-2);
  }
  .as-identity-dialog__subtitle{
    font-size:13.5px;
    line-height:1.55;
    color:rgba(23,20,15,0.62);
    margin-bottom:26px;
  }

  /* ---------- Formulaire d'identité (à l'intérieur du popup) ---------- */
  .as-identity-form__label{
    display:block;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    color:rgba(23,20,15,0.6);
    margin-bottom:var(--space-2);
  }
  /* AJOUTÉ (27/07) — texte d'aide dynamique (formulaire Objectif). */
  .as-identity-form__hint{
    font-size:11.5px;
    color:rgba(23,20,15,0.55);
    margin:-6px 0 var(--space-3);
    line-height:1.4;
  }
  .as-identity-form__input{
    width:100%;
    /* CORRIGÉ (28/08) — signalé de nouveau : "ça ne marche pas
       toujours", persistant malgré les correctifs précédents.
       Reconstruite ici de façon exhaustive et explicite -- chaque
       propriété nommée dans les retours reçus posée sans rien
       laisser implicite, jamais un correctif partiel de plus :
       height ET min-height fixées ensemble (jamais l'une sans
       l'autre), line-height explicitement 'normal' (jamais une
       valeur fixe en pixels qui a pu couper le texte sur certains
       navigateurs), box-sizing:border-box explicite (jamais supposé
       hérité), overflow:visible explicite. */
    height:52px;
    min-height:52px;
    padding:0 var(--space-4-5);
    line-height:normal;
    box-sizing:border-box;
    overflow:visible;
    border-radius:var(--radius-md);
    border:1px solid rgba(23,20,15,0.55);
    background:#fff;
    color:var(--ink);
    /* CORRIGÉ (31/07) — signalé le 31/07 : "l'affichage n'est pas très
       correct" sur mobile pour plusieurs formulaires. Cause réelle,
       connue et systématique : Safari sur iPhone zoome automatiquement
       toute la page dès qu'un champ de saisie a une taille de police
       inférieure à 16px au moment où il reçoit le focus — ce n'est pas
       un bug de mise en page, c'est ce zoom intempestif qui casse
       l'affichage. 16px est le seuil minimal, jamais en-dessous sur un
       champ de saisie. */
    font-size:16px;
    font-family:var(--font-sans);
    transition:border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .as-identity-form__input::placeholder{ color:rgba(23,20,15,0.42); }
  /* CORRIGÉ (17/08) — signalé le 17/08 : "le inline space des box ne
     permettent pas de visualiser clairement". CAUSE RÉELLE, plus
     sérieuse ici que sur le formulaire de compte : ce champ n'avait
     tout simplement AUCUNE marge inférieure -- seuls les 8px du
     libellé du champ SUIVANT séparaient un champ du prochain,
     quasiment aucun espace réel entre deux champs consécutifs. */
  .as-identity-form__input{ margin-bottom:22px; }
  .as-identity-form__input:focus{
    outline:none;
    border-color:var(--gold);
    background:#fff;
    box-shadow:0 0 0 3px rgba(201,162,75,0.16);
  }
  /* AJOUTÉ (17/08) — signalé le 17/08 : voir le correctif de contraste
     juste au-dessus. Une <select> de ce dialogue (sexe, tranche d'âge)
     n'avait jusqu'ici aucune flèche personnalisée, retombant sur
     l'apparence par défaut du navigateur -- visuellement incohérente
     avec la bordure nette maintenant appliquée. Même flèche SVG déjà
     utilisée sur le formulaire de compte complet
     (.as-account-gate__field select), jamais une seconde icône
     inventée ici. */
  select.as-identity-form__input{
    /* CORRIGÉ (28/08) — signalé plusieurs fois en conditions réelles
       ("je n'arrive pas à cliquer" sur Sexe/Tranche d'âge, capture
       d'écran à l'appui à chaque fois) : après avoir écarté une
       couche invisible géante par un vrai test dans la console
       (elementFromPoint + recherche d'éléments position:fixed/absolute
       de grande taille -- tableau vide, confirmé), appearance:none
       combiné à une image de fond personnalisée pour la flèche reste
       la dernière piste sérieuse -- une combinaison connue pour
       interagir différemment avec le clic/l'ouverture du menu selon
       le navigateur et l'appareil. Retiré ici : le <select> retombe
       sur l'apparence native du navigateur (sa propre flèche, jamais
       celle personnalisée en SVG) -- une vraie perte de finition
       visuelle, assumée en échange d'un comportement de clic
       garanti fiable partout, plutôt que de continuer à empiler des
       correctifs autour d'un style resté suspect sans certitude.
       Bordure, fond et couleur restent inchangés. */
    border:1px solid rgba(23,20,15,0.55);
    background-color:#fff;
  }
  .as-identity-form__error{
    font-size:12.5px;
    color:#c4523c;
    margin-top:var(--space-2);
  }
  .as-identity-form__consent{
    display:flex;
    align-items:flex-start;
    gap:var(--space-2-5);
    margin:var(--space-4-5) 0 26px;
    cursor:pointer;
  }
  .as-identity-form__consent input[type="checkbox"]{
    flex-shrink:0;
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--gold);
    border-radius:var(--radius-xs);
    cursor:pointer;
  }
  .as-identity-form__consent span{
    font-size:13px;
    line-height:1.5;
    color:rgba(23,20,15,0.62);
  }
  .as-identity-form__privacy-link{
    background:none;
    border:none;
    padding:0;
    color:var(--gold-deep);
    font-size:inherit;
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
    cursor:pointer;
  }
  .as-identity-form__privacy-link:hover{ color:var(--ink); }

  /* AJOUTÉ (27/07) — flèche de retour vers le choix connexion/anonyme. */
  .as-identity-form__back{
    display:inline-flex;
    align-items:center;
    gap:var(--space-1-5);
    background:none;
    border:none;
    padding:0;
    margin-bottom:var(--space-3-5);
    /* CORRIGÉ (26/08) — signalé en conditions réelles (capture d'écran
       annotée, "mettre couleur or") : la couleur or n'apparaissait
       qu'au survol (:hover), jamais par défaut -- un lien discret,
       presque invisible tant qu'on ne le survole pas. Doré en
       permanence désormais, jamais seulement une transition. */
    color:var(--gold-deep);
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
  }
  .as-identity-form__back svg{ width:14px; height:14px; }
  .as-identity-form__back:hover{ color:var(--gold); }

  /* AJOUTÉ (27/07) — icône de chargement animée sur les boutons. */
  .as-btn-spinner{
    display:inline-block;
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:as-spin 0.7s linear infinite;
    vertical-align:middle;
    margin-right:2px;
  }
  @keyframes as-spin{
    to{ transform:rotate(360deg); }
  }

  /* AJOUTÉ (17/08) — signalé le 17/08 : "aucun loader... pour indiquer
     que la page charge". Barre fine en haut de l'écran, TOUJOURS
     présente dans le DOM (jamais injectée/retirée à chaque
     navigation, plus simple et plus fiable) -- invisible par défaut
     (scaleX(0)), rendue visible + animée en ajoutant .is-active (voir
     scan-navigation.js:goTo()). z-index élevé : doit rester au-dessus
     de la barre latérale ET de la topbar, jamais masquée par elles. */
  .as-shell__nav-loader{
    position:fixed;
    top:0; left:0; right:0;
    height:3px;
    z-index:9999;
    background:var(--shell-purple, #d1b479);
    transform-origin:left center;
    transform:scaleX(0);
    opacity:0;
    pointer-events:none;
  }
  .as-shell__nav-loader.is-active{
    opacity:1;
    animation:as-shell-nav-loader-slide 0.9s cubic-bezier(0.4,0,0.2,1) infinite;
  }
  @keyframes as-shell-nav-loader-slide{
    0%{ transform:scaleX(0); transform-origin:left center; }
    50%{ transform:scaleX(0.6); transform-origin:left center; }
    50.001%{ transform-origin:right center; }
    100%{ transform:scaleX(0); transform-origin:right center; }
  }

  /* AJOUTÉ (23/07) — cartes de choix explicite du parcours de
     récupération (email vs manuel), voir partial-screen-home.php. */
  .as-recovery-choice__option{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-1);
    width:100%;
    text-align:left;
    padding:var(--space-4) var(--space-4-5);
    margin-top:var(--space-3);
    border-radius:var(--radius-md);
    border:1.5px solid var(--border-card-soft);
    background:var(--surface-card);
    cursor:pointer;
    transition:border-color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .as-recovery-choice__option:hover{
    border-color:var(--gold-deep);
    background:rgba(201,162,75,0.06);
  }
  .as-recovery-choice__title{
    font-size:14px;
    font-weight:700;
    color:var(--text-primary);
  }
  .as-recovery-choice__desc{
    font-size:12.5px;
    color:var(--text-tertiary);
    line-height:1.4;
  }

  /* AJOUTÉ (23/07) — Phase D (suite) : statut de connexion / choix de
     compte sur l'écran d'identité. */
  .as-identity-account-status{
    margin-bottom:var(--space-4);
  }
  .as-identity-account-status.is-connected{
    background:rgba(47,158,99,0.08);
    border-radius:var(--radius-sm, 8px);
    padding:var(--space-2-5) var(--space-3-5);
  }
  .as-identity-account-status.is-connected p{
    font-size:13px;
    font-weight:600;
    color:var(--green-deep, #1f7a48);
    margin:0;
  }
  .as-identity-form__submit{
    width:100%;
    text-align:center;
  }

  /* ---------- Popup politique de confidentialité ---------- */
  .as-privacy-dialog{
    border:none;
    border-radius:var(--radius-xl);
    padding:0;
    max-width:560px;
    width:calc(100% - 48px);
    max-height:min(640px, 84vh);
    background:#fff;
    color:var(--ink);
    box-shadow:var(--shadow-card);
  }
  .as-privacy-dialog::backdrop{
    background:rgba(12,10,8,0.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .as-privacy-dialog__inner{
    position:relative;
    padding:36px var(--space-7) var(--space-7);
    max-height:min(640px, 84vh);
    overflow-y:auto;
  }
  .as-privacy-dialog__close{
    position:absolute;
    top:16px;
    right:16px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(23,20,15,0.12);
    background:rgba(23,20,15,0.04);
    color:var(--ink);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    transition:background 0.25s var(--ease), transform 0.35s var(--ease-spring);
  }
  .as-privacy-dialog__close:hover{ background:rgba(23,20,15,0.08); transform:scale(1.06); }
  .as-privacy-dialog__body h3{
    font-size:14px;
    font-weight:700;
    margin:var(--space-5-5) 0 var(--space-2);
    color:var(--gold-deep);
  }
  .as-privacy-dialog__body h3:first-child{ margin-top:0; }
  .as-privacy-dialog__body p{
    font-size:13.5px;
    line-height:1.6;
    color:rgba(23,20,15,0.75);
    margin-bottom:var(--space-1);
  }

  .as-badge{
    /* CORRIGÉ (25/08) — position:absolute retiré : le badge vit
       maintenant dans le flux normal de .as-hero__cta-row juste
       au-dessus, jamais positionné indépendamment par-dessus le
       reste de l'écran. La règle mobile qui remettait ceci à static
       devient inutile, retirée du point de rupture plus bas. */
    z-index:5;
    display:flex;
    align-items:center;
    gap:var(--space-3-5);
  }
  /* AJOUTÉ (25/08) — voir le docblock complet dans
     partial-screen-home.php : conteneur commun au bouton et au badge,
     sur mobile uniquement (voir la règle dans le point de rupture
     @media plus bas) -- sur bureau, aucun effet, le badge garde son
     positionnement absolu déjà existant, jamais modifié ici. */
  /* CORRIGÉ (25/08) — devenu le comportement PAR DÉFAUT, jamais
     limité au point de rupture mobile : la capture d'écran signalée
     montrait ce défaut sur une largeur qui n'était pas étroite,
     jamais garanti que la personne teste sous 720px. flex-wrap gère
     déjà correctement le repli sur deux lignes si la largeur
     réelle est trop étroite pour les deux textes côte à côte,
     jamais besoin d'un second comportement conditionnel séparé. */
  .as-hero__cta-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-3-5);
  }
  /* AJOUTÉ (26/08) — signalé le 26/08 (capture d'écran à l'appui) : le
     badge doit rejoindre la zone de la photo, sur la même ligne que
     "Start scan", jamais collé juste à côté du bouton. Sur mobile
     (≤720px), .as-hero__content est déjà pleine largeur (voir
     l'autre correctif du 25/08 plus bas) -- le comportement par
     défaut ci-dessus (paquet compact, repli sur 2 lignes si trop
     étroit) reste le bon choix là, jamais changé ici. À partir de
     721px (tablette ET bureau, .as-hero__content limité à 520px par
     défaut, jamais assez large pour atteindre la photo) -- élargit
     spécifiquement cette rangée, jamais le reste du contenu
     (accroche, sous-texte, qui restent volontairement étroits pour
     la lisibilité), et sépare bouton/badge aux deux extrémités de
     cette largeur élargie. Largeur vérifiée visuellement
     (Playwright) avant de considérer ce correctif terminé. */
  @media (min-width:721px){
    .as-hero__cta-row{
      justify-content:space-between;
      width:min(96vw, 1260px);
    }
  }
  .as-badge__rank{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600;
    font-size:40px;
    color:#fff;
    line-height:1;
  }
  .as-badge__pill{
    display:flex;
    align-items:center;
    gap:var(--space-2-5);
    background:rgba(15,13,10,0.55);
    border:1px solid rgba(255,255,255,0.18);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:var(--space-2-5) var(--space-4);
    border-radius:var(--radius-md);
    font-size:11.5px;
    line-height:1.35;
    max-width:150px;
    color:var(--white-90);
  }

  /* ================= SCREEN 2 — CAPTURE GUIDE ================= */
  .as-capture{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:url('../images/capture-model.jpg');
    background-size:cover;
    background-position:center 22%;
    background-color:#2c2823;
  }

  .as-capture::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(90% 70% at 50% 8%, rgba(0,0,0,0.25), transparent 55%),
      linear-gradient(180deg, rgba(20,17,14,0.35) 0%, rgba(16,14,11,0.55) 45%, rgba(10,9,7,0.82) 100%);
  }

  .as-back{
    position:absolute;
    z-index:40;
    top:88px;
    left:32px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--white-50);
    background:rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .as-back:hover{ background:rgba(255,255,255,0.16); transform:translateX(-2px); }
  .as-back svg{ width:16px; height:16px; }

  .as-capture__photo-note{
    position:absolute;
    z-index:1;
    bottom:16px;
    left:16px;
    font-size:10px;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.35);
    border:1px dashed rgba(255,255,255,0.2);
    padding:var(--space-1) var(--space-2);
    border-radius:6px;
  }

  .as-frame-ring{
    position:absolute;
    z-index:2;
    top:44%;
    left:50%;
    width:300px;
    height:360px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,255,255,0.05), transparent 72%);
    filter:blur(2px);
    pointer-events:none;
  }

  .as-capture__body{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 var(--space-6);
    max-width:420px;
  }

  .as-capture__eyebrow{
    font-family:var(--font-secondary);
    font-style:italic;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--white-50);
    margin-bottom:var(--space-4-5);
  }

  .as-capture__title{
    font-family:var(--font-sans);
    font-weight:700;
    font-size:30px;
    color:#fff;
    margin-bottom:26px;
  }

  .as-capture__checklist{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:var(--space-2-5);
    margin-bottom:56px;
  }
  .as-capture__checklist li{
    font-size:16px;
    font-weight:400;
  }
  .as-capture__checklist li:nth-child(1){ color:var(--white-70); }
  .as-capture__checklist li:nth-child(2){ color:var(--white-50); }
  .as-capture__checklist li:nth-child(3){ color:var(--white-35); }
  .as-capture__checklist li:nth-child(4){ color:rgba(255,255,255,0.22); }

  .as-capture__actions{
    display:flex;
    align-items:center;
    gap:var(--space-3-5);
    margin-bottom:var(--space-5-5);
  }

  .as-btn-outline{
    padding:13px var(--space-6-5);
    border:1px solid var(--white-70);
    border-radius:var(--radius-pill);
    background:transparent;
    color:#fff;
    font-size:14px;
    font-weight:600;
    line-height:1;
    transition:background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
    white-space:nowrap;
  }
  .as-btn-outline:hover{
    background:#fff;
    color:var(--ink);
    border-color:#fff;
    transform:translateY(-2px);
  }
  .as-btn-outline:active{ transform:translateY(0); }

  .as-capture__legal{
    font-size:12px;
    color:var(--white-50);
  }
  .as-capture__legal a{
    color:var(--gold);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .as-capture__legal a:hover{ color:#fff; }

  /* ================= SCREEN 3 — IQM LIVE CAPTURE ================= */
  .as-iqm{
    position:relative;
    min-height:100vh;
    background:linear-gradient(180deg, #221d17 0%, #14110d 100%);
    padding-bottom:var(--space-9);
  }

  .as-stepper{
    /* CORRIGÉ (17/07) — .as-stepper est un <ol> (voir partial-stepper.php)
       sans list-style:none : le navigateur affichait donc ses puces
       numérotées par défaut ("1. 2. 3. 4. 5.") en plus des barres
       colorées personnalisées ci-dessous — c'était ÇA, le mystère des
       "numéros" signalés sur plusieurs captures, pas un composant que
       j'avais mal identifié. */
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
    top:26px;
    left:50%;
    transform:translateX(-50%);
    z-index:41;
    display:flex;
    align-items:center;
    gap:var(--space-2);
  }
  .as-stepper__seg{
    height:6px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.18);
  }
  .as-stepper__seg{ transition:width 0.4s var(--ease), background 0.4s var(--ease); }
  .as-stepper__seg.is-current{
    width:34px;
    background:var(--gold);
  }
  .as-stepper__seg.is-done{
    width:14px;
    background:var(--gold-deep);
  }
  .as-stepper__seg:not(.is-current):not(.is-done){
    width:6px;
  }

  .as-iqm__back{
    position:absolute;
    z-index:40;
    top:88px;
    left:32px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--white-50);
    background:rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .as-iqm__back:hover{ background:rgba(255,255,255,0.16); transform:translateX(-2px); }
  .as-iqm__back svg{ width:16px; height:16px; }

  .as-iqm__layout{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:var(--space-8);
    justify-content:center;
    align-items:start;
    padding:150px 40px 0;
    max-width:1080px;
    width:100%;
    margin:0 auto;
    box-sizing:border-box;
  }

  /* Grid items default to min-width:auto, which lets their content's
     intrinsic size (here, the aspect-ratio viewfinder) refuse to
     shrink and push the layout around unpredictably. min-width:0
     lets the grid tracks actually control the width, which is what
     keeps the score panel beside the viewfinder instead of the
     layout falling back to stacked content. */
  .as-view,
  .as-score{
    min-width:0;
  }

  /* WordPress's wpautop (and Elementor's Shortcode widget, which often
     re-applies it) can inject a stray <p> into shortcode HTML wherever
     there's a blank line in the source template. If that ever happens
     here, this stray element would land as a 3rd grid item and push
     .as-score out of place. This rule makes the grid immune to that,
     regardless of where the extra markup comes from. */
  /* Garde anti-<p>-fantôme (wpautop / Elementor Shortcode) : WordPress
     insère un <p></p> partout où il y a une ligne vide dans le HTML
     source du shortcode. Sur un conteneur en grid/flex, cet élément
     devient un item à part entière et décale tout le reste (c'est ce qui
     cassait l'écran IQM). On neutralise ce risque sur TOUS les
     conteneurs en grid/flex du parcours, pas seulement ceux où le bug a
     été vu — WordPress peut l'injecter n'importe où selon la mise en
     forme du template PHP au moment du rendu. */
  .as-iqm__layout > p,
  .as-analyse__layout > p,
  .as-questionnaire__layout > p,
  .as-questionnaire__sidebar > p,
  .as-triage__layout > p,
  .as-triage__sidebar > p,
  .as-rapport__summary > p,
  .as-rapport__actions > p,
  .as-hero__content > p:empty,
  .as-capture__body > p:empty{
    display:none;
  }

  .as-view{
    position:relative;
    border-radius:var(--radius-xl);
    overflow:hidden;
    aspect-ratio:4/4.6;
    background:
      linear-gradient(180deg, rgba(10,9,7,0.15) 0%, rgba(10,9,7,0.55) 100%),
      radial-gradient(120% 90% at 50% 15%, #6b625a, #2c2925 65%);
  }

  .as-view__note{
    position:absolute;
    z-index:1;
    top:14px;
    left:14px;
    font-size:10px;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.4);
    border:1px dashed rgba(255,255,255,0.25);
    padding:var(--space-1) var(--space-2);
    border-radius:6px;
  }

  .as-view__video,
  .as-view__still{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    background:#1c1915;
  }
  .as-view__video{ transform:scaleX(-1); }

  /* AJOUTÉ (16/09) — repositionnement par glisser-déposer d'une image
     importée (voir le docblock complet dans scan-capture.js,
     onStillPointerDown() et alentours). touch-action:none empêche le
     navigateur de faire défiler la page pendant le geste sur mobile ;
     -webkit-user-drag/user-select:none désactivent le "fantôme" de
     glisser-déposer natif du navigateur sur une <img>, qui sinon
     entrerait en conflit avec ce geste personnalisé. */
  .as-view__still{
    touch-action:none;
    -webkit-user-drag:none;
    user-select:none;
  }
  .as-view__still.is-pannable{
    cursor:grab;
  }
  .as-view__still.is-panning{
    cursor:grabbing;
  }

  .as-view__state{
    position:absolute;
    inset:0;
    z-index:6;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-4);
    text-align:center;
    padding:var(--space-7);
    background:rgba(12,10,8,0.78);
  }
  .as-view__state.is-visible{ display:flex; }
  .as-view__state-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--white-50);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .as-view__state-icon svg{ width:20px; height:20px; }
  .as-view__state-title{
    font-size:15px;
    font-weight:700;
    color:#fff;
  }
  .as-view__state-text{
    font-size:13px;
    line-height:1.5;
    color:var(--white-70);
    max-width:320px;
  }
  .as-view__state-actions{
    display:flex;
    gap:var(--space-2-5);
    margin-top:var(--space-1-5);
  }

  .as-view__countdown{
    position:absolute;
    inset:0;
    z-index:5;
    display:none;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    font-size:120px;
    font-weight:800;
    color:#fff;
    text-shadow:0 2px 24px rgba(0,0,0,0.55);
    background:rgba(12,10,8,0.22);
  }
  .as-view__countdown.is-visible{ display:flex; }
  .as-view__countdown.is-tick{
    animation:as-countdown-tick 1s ease-out;
  }
  @keyframes as-countdown-tick{
    0%{ transform:scale(1.35); opacity:0; }
    30%{ transform:scale(1); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }

  .as-view__corner{
    position:absolute;
    z-index:3;
    width:34px;
    height:34px;
    border:3px solid #fff;
    opacity:0.85;
  }
  .as-view__corner--tl{ top:20px; left:20px; border-right:none; border-bottom:none; border-top-left-radius:14px; }
  .as-view__corner--tr{ top:20px; right:20px; border-left:none; border-bottom:none; border-top-right-radius:14px; }
  .as-view__corner--bl{ bottom:20px; left:20px; border-right:none; border-top:none; border-bottom-left-radius:14px; }
  .as-view__corner--br{ bottom:20px; right:20px; border-left:none; border-top:none; border-bottom-right-radius:14px; }

  .as-view__guide{
    position:absolute;
    z-index:2;
    top:42%;
    left:50%;
    width:56%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:2px dashed rgba(255,255,255,0.75);
  }

  .as-view__feedback{
    position:absolute;
    z-index:4;
    left:16px;
    right:16px;
    bottom:16px;
    background:rgba(12,10,8,0.62);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-radius:var(--radius-md);
    padding:var(--space-3-5) var(--space-4-5);
    text-align:center;
    font-size:13px;
    line-height:1.5;
    color:var(--white-90);
  }

  /* AJOUTÉ (10/08) — signalé le 10/08 : "il lance juste sans rien dire
     clairement" — instruction de rotation entre les 3 prises (voir
     docblock complet dans scan-capture.js, à l'endroit où ce texte est
     posé). Positionnée en HAUT du cadre (jamais en conflit avec
     .as-view__feedback en bas, ni avec le compte à rebours qui couvre
     tout l'écran brièvement) — dorée et en gras, délibérément PLUS
     visible que le retour qualité habituel, puisque c'est désormais
     l'instruction la plus importante à ne jamais manquer. */
  .as-view__step-indicator{
    position:absolute;
    z-index:4;
    left:16px;
    right:16px;
    top:16px;
    background:rgba(201,162,75,0.94);
    border-radius:var(--radius-md);
    padding:var(--space-3-5) var(--space-4-5);
    text-align:center;
    font-size:15px;
    font-weight:700;
    line-height:1.4;
    color:#1a1611;
    box-shadow:0 4px 20px rgba(0,0,0,0.35);
  }
  .as-view__step-indicator[hidden]{ display:none; }

  /* AJOUTÉ (22/07) — Phase 8 : avertissement pilosité faciale, NON
     bloquant — empilé au-dessus du message principal, delibérément
     plus discret (fond moins opaque, texte plus petit) pour signaler
     "à savoir" plutôt que "à corriger maintenant". */
  .as-view__feedback--secondary{
    position:absolute;
    z-index:4;
    left:16px;
    right:16px;
    bottom:76px;
    background:rgba(12,10,8,0.45);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border-radius:var(--radius-md);
    padding:var(--space-2-5) var(--space-4);
    text-align:center;
    font-size:12px;
    line-height:1.4;
    color:var(--white-90);
  }

  .as-score{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:var(--space-1-5);
  }

  .as-score__eyebrow{
    font-family:var(--font-secondary);
    font-style:italic;
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:400;
    margin-bottom:var(--space-4-5);
  }

  .as-score__ring{
    position:relative;
    width:150px;
    height:150px;
    margin-bottom:30px;
  }
  .as-score__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .as-score__ring-value{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-sans);
    font-weight:800;
    font-size:32px;
    color:var(--green);
  }

  .as-metrics{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--space-2-5);
    margin-bottom:34px;
  }

  .as-metric{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--space-3) var(--space-4-5);
    border-radius:var(--radius-pill);
    border:1px solid rgba(201,162,75,0.4);
    background:rgba(201,162,75,0.06);
    font-size:13.5px;
    font-weight:500;
    color:var(--white-90);
  }
  .as-metric__value{
    font-weight:700;
    color:var(--gold);
  }
  .as-metric.is-warning{
    border-color:var(--red-line);
    background:var(--red-bg);
  }
  .as-metric.is-warning .as-metric__value{ color:var(--red); }
  .as-metric.is-warning .as-metric__label{ color:var(--red); }

  .as-metric__check{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--green-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .as-metric__check svg{ width:11px; height:11px; }

  .as-btn-primary{
    /* CORRIGÉ (31/07) — même cause et même correctif que .as-btn-pill
       ci-dessus, appliqué ici aussi par cohérence — cette classe sert
       aussi à des boutons combinant icône et texte. */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    align-self:flex-end;
    padding:13px 30px;
    border:none;
    border-radius:var(--radius-pill);
    background:var(--gold);
    color:var(--ink);
    font-size:14px;
    font-weight:700;
    line-height:1;
    box-shadow:var(--shadow-btn);
    transition:background 0.25s var(--ease), transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring);
  }
  .as-btn-primary:hover{ background:#dab55f; transform:translateY(-2px) scale(1.015); box-shadow:0 14px 30px rgba(201,162,75,0.32); }
  .as-btn-primary:active{ transform:translateY(0) scale(0.98); }
  .as-btn-primary:disabled{
    background:rgba(201,162,75,0.25);
    color:rgba(255,255,255,0.4);
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
  }
  .as-btn-primary:disabled:hover{ background:rgba(201,162,75,0.25); transform:none; box-shadow:none; }

  .as-btn-small{
    padding:9px var(--space-4-5);
    border-radius:var(--radius-pill);
    font-size:12.5px;
    font-weight:600;
  }
  .as-btn-small.as-btn-outline{ border-color:var(--white-50); }
  .as-btn-small.as-btn-primary{ background:var(--gold); color:var(--ink); }

  /* =====================================================
     CONTEXTE CLAIR — Questionnaire, Triage, Rapport
     Ces 3 écrans forment la moitié "résultats" du parcours (fond clair,
     texte encre) — voir référence : capture d'écran "Quelques
     précisions". On redéfinit ICI, une seule fois, les tokens
     sémantiques déclarés dans :root ; tous les composants partagés plus
     bas (cartes de règle, listes de familles, cartes de score…) héritent
     automatiquement du bon thème selon l'écran qui les contient — aucune
     règle dupliquée nécessaire.
  ===================================================== */
  .as-questionnaire,
  .as-triage,
  .as-rapport,
  /* AJOUTÉ (31/07) — signalé le 31/07 : l'écran "Compte" n'était dans
     AUCUN contexte de thème (ni .as-shell, ni ce bloc-ci) — il
     héritait donc du thème SOMBRE par défaut (:root), avec un texte
     clair sur des champs de formulaire blancs : labels et lien
     "Connecte-toi" invisibles, pas un bug d'absence mais de contraste.
     Ajouté ici plutôt que dupliqué : mêmes jetons de couleur déjà
     corrects, un seul endroit à maintenir. */
  #as-screen-account-gate{
    --surface-page:#ffffff;
    --surface-card:#fff;
    --surface-card-hover:#fff;
    --border-card:rgba(164,128,47,0.35);
    --border-card-soft:rgba(23,20,15,0.14);
    --text-primary:var(--ink);
    --text-secondary:rgba(23,20,15,0.72);
    --text-tertiary:rgba(23,20,15,0.52);
    /* --shell-* : famille de jetons SÉPARÉE de --text-primary
       ci-dessus, utilisée directement par .as-account-gate__* — sans
       cette redéfinition ici aussi, le même bug de contraste
       reviendrait sur ces règles précises. */
    --shell-text:var(--ink);
    --shell-text-soft:rgba(23,20,15,0.72);
    /* CORRIGÉ (25/08) — signalé en conditions réelles (capture d'écran
       à l'appui) : cette redéfinition visait explicitement à éviter
       que le bug de contraste du 17/08 ne revienne sur les champs
       .as-account-gate__* -- mais reprenait par erreur l'ANCIENNE
       valeur déjà identifiée comme trop pâle (14%) plutôt que la
       valeur corrigée ce même jour (28%). Le commentaire d'origine
       avait la bonne intention, la mauvaise valeur -- corrigé pour
       correspondre enfin à ce qu'il décrivait vouloir éviter. */
    --shell-border:rgba(23,20,15,0.28);
    --shell-purple-deep:#a4802f;
    --comp-accent:#d1b479;
    --comp-accent-deep:#a4802f;
    --shadow-card:0 20px 44px rgba(70,55,20,0.1);
    --shadow-btn:0 10px 24px rgba(70,55,20,0.14);

    position:relative;
    min-height:100vh;
    background:var(--surface-page);
    color:var(--text-primary);
  }

  /* Le stepper (dans le bandeau sombre du topbar) reste inchangé — mais
     ses segments "restants" (gris translucide blanc) doivent rester
     lisibles même si un jour le topbar devient transparent ; on ne
     touche donc pas .as-stepper ici, il vit toujours sur fond sombre. */

  /* ---------- Composants partagés : cartes de règle (Questionnaire + IQM) ---------- */
  .as-rule-cards{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    margin-top:var(--space-5-5);
  }

  /* CORRIGÉ (12/08) — signalé le 12/08 : "le bouton continuer et la
     grille du ICC actif se touchent" — .as-score (le conteneur flex
     parent, voir plus haut) n'a aucun gap défini entre ses enfants ;
     .as-rule-card elle-même (classe générique, réutilisée ailleurs
     dans ce projet, jamais touchée ici pour ne pas affecter ses
     autres usages) n'a pas non plus de marge externe. Ciblé
     uniquement sur .as-icc-slot, la classe spécifique à cette carte
     précise sur l'écran IQM. */
  .as-icc-slot{ margin-bottom:var(--space-4); }
  .as-rule-card{
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:var(--space-2) var(--space-2-5);
    padding:var(--space-3-5) var(--space-4);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    border:1px solid var(--border-card-soft);
    transition:background 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .as-rule-card--positive{
    border-color:var(--green-deep);
    background:color-mix(in srgb, var(--green-deep) 10%, var(--surface-card));
  }

  .as-rule-card__dot{
    width:8px;
    height:8px;
    margin-top:5px;
    border-radius:50%;
    background:var(--gold);
    flex-shrink:0;
  }
  .as-rule-card--positive .as-rule-card__dot{ background:var(--green-deep); }

  .as-rule-card__label{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-primary);
    flex:1;
    min-width:0;
  }

  .as-rule-card__metric{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
    color:var(--text-secondary);
    padding-left:var(--space-4-5);
  }
  .as-rule-card__metric strong{ color:var(--gold-deep); font-weight:700; }

  .as-rule-card__bar{
    width:100%;
    height:5px;
    margin-left:var(--space-4-5);
    margin-top:-2px;
    width:calc(100% - 18px);
    border-radius:var(--radius-pill);
    background:var(--border-card-soft);
    overflow:hidden;
  }
  .as-rule-card__bar span{
    display:block;
    height:100%;
    border-radius:var(--radius-pill);
    background:linear-gradient(90deg, var(--gold-deep), var(--gold));
    transition:width 0.5s var(--ease);
  }

  /* ---------- Carte ICC (climat) — un cas particulier de .as-rule-card ---------- */
  .as-icc-card__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:var(--space-2-5);
  }
  .as-icc-card__toggle{
    width:20px;
    height:20px;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid var(--green-deep);
    background:transparent;
    color:var(--green-deep);
    font-size:14px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s var(--ease), color 0.2s var(--ease);
  }
  .as-icc-card__toggle:hover{ background:var(--green-deep); color:#fff; }

  .as-icc-card__body{
    width:100%;
    padding-left:var(--space-4-5);
    margin-top:var(--space-1);
    font-size:12px;
    line-height:1.55;
    color:var(--text-secondary);
  }
  .as-icc-card__summary{ color:var(--text-secondary); }

  .as-icc-card__link{
    background:none;
    border:none;
    padding:0;
    margin-top:var(--space-1-5);
    margin-left:var(--space-4-5);
    font-size:12.5px;
    font-weight:600;
    color:var(--gold-deep);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .as-icc-card__link:hover{ color:var(--gold); }

  .as-icc-card__form{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    margin-top:var(--space-2);
    padding-left:var(--space-4-5);
  }
  .as-icc-card__input{
    width:100%;
    padding:9px var(--space-3);
    border-radius:var(--radius-sm);
    border:1px solid var(--border-card-soft);
    background:var(--surface-page);
    color:var(--text-primary);
    font-size:12.5px;
    font-family:inherit;
  }
  .as-icc-card__input:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
  .as-icc-card__error{
    font-size:11.5px;
    color:var(--red);
  }
  /* AJOUTÉ (25/08) — signalé le 25/08 : voir le docblock complet
     d'attachCityAutocomplete() dans scan-climate.js. Positionnée en
     absolu par rapport au PARENT du champ (jamais le champ lui-même,
     voir la logique JS qui pose position:relative dessus) -- s'affiche
     juste en dessous, jamais superposée au texte déjà saisi. */
  .as-city-suggestions{
    position:absolute;
    z-index:20;
    top:100%;
    left:0;
    right:0;
    margin-top:4px;
    background:#fff;
    border:1px solid rgba(23,20,15,0.14);
    border-radius:var(--radius-sm);
    box-shadow:0 8px 24px rgba(23,20,15,0.12);
    list-style:none;
    max-height:220px;
    overflow-y:auto;
  }
  .as-city-suggestions__item{
    padding:var(--space-3) var(--space-4);
    font-size:14px;
    color:var(--ink);
    cursor:pointer;
    border-bottom:1px solid rgba(23,20,15,0.06);
  }
  .as-city-suggestions__item:last-child{ border-bottom:none; }
  .as-city-suggestions__item:hover{ background:rgba(201,162,75,0.1); }
  .as-icc-card__form-actions{
    display:flex;
    gap:var(--space-2);
  }

  /* ---------- Options radio (Questionnaire) ---------- */
  .as-radio-option{
    position:relative;
    display:flex;
    align-items:center;
    gap:var(--space-3-5);
    padding:var(--space-4) var(--space-5);
    margin-bottom:var(--space-3);
    border-radius:var(--radius-md);
    border:1.5px solid var(--border-card-soft);
    background:var(--surface-card);
    font-size:14.5px;
    font-weight:500;
    color:var(--text-primary);
    cursor:pointer;
    transition:border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .as-radio-option:hover{ border-color:var(--gold); transform:translateX(2px); }
  .as-radio-option input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
  }
  .as-radio-option__dot{
    width:20px;
    height:20px;
    flex-shrink:0;
    border-radius:50%;
    border:1.5px solid var(--text-tertiary);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color 0.25s var(--ease);
  }
  .as-radio-option__dot::after{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--gold);
    transform:scale(0);
    transition:transform 0.2s var(--ease);
  }
  .as-radio-option input:checked ~ .as-radio-option__dot{ border-color:var(--gold); }
  .as-radio-option input:checked ~ .as-radio-option__dot::after{ transform:scale(1); }
  .as-radio-option:has(input:checked){
    border-color:var(--gold);
    background:color-mix(in srgb, var(--gold) 8%, var(--surface-card));
  }
  .as-radio-option input:focus-visible ~ .as-radio-option__dot{ outline:2px solid var(--gold); outline-offset:2px; }

  /* ---------- Liste de familles biologiques (Triage + Rapport) ---------- */
  .as-family-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:var(--space-2-5);
  }
  .as-family-list__item{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:2px var(--space-3);
    padding:var(--space-3-5) var(--space-5);
    border-radius:var(--radius-md);
    background:transparent;
    border:1.5px solid var(--border-card-soft);
    opacity:0.68;
    transition:border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .as-triage__sidebar .as-family-list__item{ cursor:pointer; }
  .as-triage__sidebar .as-family-list__item:hover{ transform:translateX(2px); border-color:var(--gold); opacity:1; }
  .as-family-list__item.is-selected,
  .as-family-list__item.is-active-family{
    opacity:1;
    border-color:var(--gold);
    border-left-width:4px;
    background:var(--surface-card);
    box-shadow:0 8px 20px rgba(201,162,75,0.16);
  }
  .as-family-list__name{
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
  }
  .as-family-list__item.is-selected .as-family-list__name,
  .as-family-list__item.is-active-family .as-family-list__name{ font-weight:700; }
  .as-family-list__score{
    font-size:13px;
    font-weight:700;
    color:var(--text-tertiary);
  }
  .as-family-list__item.is-selected .as-family-list__score,
  .as-family-list__item.is-active-family .as-family-list__score{ color:var(--gold-deep); font-size:14px; }
  .as-family-list__bar{
    grid-column:1 / -1;
    display:block;
    height:5px;
    border-radius:var(--radius-pill);
    background:var(--border-card-soft);
    overflow:hidden;
  }
  .as-family-list__bar span{
    display:block;
    height:100%;
    border-radius:var(--radius-pill);
    background:linear-gradient(90deg, var(--gold-deep), var(--gold));
    transition:width 0.6s var(--ease);
  }
  /* Variante Rapport : synthèse non-cliquable, un peu plus compacte */
  .as-family-list--summary .as-family-list__item{ padding:var(--space-3) var(--space-4); cursor:default; }
  .as-family-list--summary .as-family-list__item:hover{ transform:none; }

  /* ---------- Boutons additionnels ---------- */
  .as-back-inline{
    width:40px;
    height:40px;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid var(--border-card-soft);
    background:var(--surface-card);
    color:var(--text-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:26px;
    transition:background 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  .as-back-inline:hover{ border-color:var(--gold); transform:translateX(-2px); }
  .as-back-inline svg{ width:16px; height:16px; }

  .as-btn-round{
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid var(--border-card-soft);
    background:var(--surface-card);
    color:var(--text-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  .as-btn-round svg{ width:17px; height:17px; }
  .as-btn-round:not(:disabled):hover{ border-color:var(--gold); transform:translateX(-2px); }
  .as-btn-round:disabled{ opacity:0.35; cursor:not-allowed; }

  .as-btn-pill{
    /* CORRIGÉ (31/07) — signalé le 31/07 : "les icônes ne sont pas
       vraiment alignées avec le texte... et c'est ainsi partout sur
       les différents boutons" — cause réelle et confirmée : cette
       classe, la plus largement utilisée du projet pour les boutons,
       n'avait jamais display:flex ni align-items:center. Un bouton
       contenant une icône (svg) suivie de texte s'aligne alors par
       défaut sur la LIGNE DE BASE du texte (comportement standard des
       éléments en ligne), jamais leur centre — d'où le texte
       visuellement plus bas que l'icône, sur absolument tous les
       boutons utilisant cette classe. Corrigé une seule fois, ici,
       plutôt que sur chaque bouton individuellement. */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    padding:var(--space-3) var(--space-6);
    border-radius:var(--radius-pill);
    border:1px solid var(--border-card-soft);
    background:var(--surface-card);
    color:var(--text-primary);
    font-size:12.5px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 4px 14px rgba(70,55,20,0.06);
    transition:border-color 0.25s var(--ease), transform 0.35s var(--ease-spring), background 0.25s var(--ease), box-shadow 0.35s var(--ease-spring);
  }
  .as-btn-pill:hover{ border-color:var(--gold); transform:translateY(-2px) scale(1.02); box-shadow:0 10px 22px rgba(70,55,20,0.12); }
  .as-btn-pill--gold{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--ink);
  }
  .as-btn-pill--gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }

  /* ---------- Cartes de score (Rapport) ---------- */
  .as-scores-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:var(--space-4);
  }
  .as-score-card{
    padding:var(--space-5);
    border-radius:var(--radius-lg);
    background:var(--surface-card);
    border:1.5px solid var(--border-card-soft);
    box-shadow:var(--shadow-card);
    transition:transform 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .as-score-card:hover{ transform:translateY(-3px); }
  .as-score-card__label{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:var(--space-2-5);
  }
  .as-score-card__value{
    font-family:var(--font-sans);
    font-size:32px;
    font-weight:800;
    line-height:1;
    margin-bottom:var(--space-3-5);
  }
  .as-score-card__value.is-good{ color:var(--green-deep); }
  .as-score-card__value.is-concerning{ color:var(--red); }
  .as-score-card__bar{
    height:6px;
    border-radius:var(--radius-pill);
    background:var(--border-card-soft);
    overflow:hidden;
    margin-bottom:var(--space-3-5);
  }
  .as-score-card__bar span{ display:block; height:100%; border-radius:var(--radius-pill); }
  .as-score-card__bar span.is-good{ background:var(--green-deep); }
  .as-score-card__bar span.is-concerning{ background:var(--red); }
  .as-score-card__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .as-score-card__badge{
    padding:5px 11px;
    border-radius:var(--radius-pill);
    font-size:11.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .as-score-card__badge.is-good{ background:rgba(47,158,99,0.14); color:var(--green-deep); }
  .as-score-card__badge.is-concerning{ background:var(--red-bg); color:var(--red); }
  .as-score-card__trust{ font-size:12px; color:var(--text-tertiary); }

  /* ---------- Rapport narratif (findings) ---------- */
  /* ---------- Rapport narratif (17/07) : intro mise en valeur + liste
     de priorités numérotée, à la place des anciennes pastilles
     "Priority N" peu lisibles. ---------- */
  .as-narrative-intro{
    /* CORRIGÉ (12/08) — signalé le 12/08 : "le texte de l'analyse ne
       doit pas être en gras et doit avoir la même police que ceux de
       résultats score" — retiré font-family:var(--font-display), qui
       n'a pas d'équivalent ailleurs dans le texte de lecture de cette
       page (hérite maintenant de --font-sans via .adel-skinai-app,
       comme .as-priority-item__text juste plus bas). font-weight
       ramené à 400 (normal), jamais 500.
    */
    font-size:19px;
    font-weight:400;
    line-height:1.55;
    color:var(--text-primary);
    margin:0 0 var(--space-6-5);
    max-width:65ch;
  }

  /* AJOUTÉ (22/07) — graphique en barres des 4 états clés, voir
     renderRapportStateBars() dans scan-diagnostic.js. Couleurs
     reprises EXACTEMENT des bandes vigilance/ICD déjà en place
     (vert/orange/rouge), pour une cohérence visuelle avec le reste
     du rapport plutôt qu'une nouvelle palette isolée. */
  /* CORRIGÉ (22/07) — histogramme VERTICAL des 4 indicateurs clés,
     positionné comme 3e colonne de .as-rapport__summary (à droite,
     à la place exacte de l'ancien affichage en pastilles) — remplace
     .as-state-bars (barres horizontales, dans sa propre boîte séparée,
     signalé comme redondant avec l'ancien affichage). Couleurs reprises
     des bandes vigilance/ICD déjà en place. */
  /* AJOUTÉ (22/07) — colonne de droite commune (indicateurs clés +
     familles biologiques empilés), occupe la 3e colonne de la grille
     .as-rapport__summary (1.1fr) — voir docblock dans
     partial-screen-rapport.php. */
  .as-rapport__right-col{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
    min-width:0; /* évite un débordement de grille avec du texte long dans les enfants */
  }
  .as-key-indicators{
    width:100%;
    padding:var(--space-5) var(--space-4-5);
    border-radius:var(--radius-md);
    background:var(--bg-subtle, #f8f6f2);
    border:1px solid var(--border-card-soft);
  }
  .as-key-indicators__title{
    font-size:13px;
    font-weight:700;
    color:var(--text-primary);
    margin:0 0 var(--space-4-5);
  }
  .as-key-indicators__legend{
    font-size:10.5px;
    color:var(--text-tertiary);
    line-height:1.4;
    margin:-12px 0 var(--space-4);
  }
  .as-key-indicators__chart{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--space-2-5);
    height:170px;
  }
  .as-key-indicator{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    height:100%;
  }
  .as-key-indicator__value{
    font-size:13px;
    font-weight:700;
    color:var(--text-primary);
    font-variant-numeric:tabular-nums;
    margin-bottom:var(--space-1-5);
  }
  .as-key-indicator__track{
    width:26px;
    flex:1;
    display:flex;
    align-items:flex-end;
    border-radius:100px;
    background:rgba(0,0,0,0.06);
    overflow:hidden;
  }
  .as-key-indicator__fill{
    width:100%;
    border-radius:100px;
    transition:height 0.4s ease;
  }
  .as-key-indicator__fill.is-faible{ background:var(--green, #2f9e63); }
  .as-key-indicator__fill.is-moyen{ background:var(--gold-deep, #b8863b); }
  .as-key-indicator__fill.is-eleve{ background:var(--red, #c5494e); }
  .as-key-indicator__fill.is-unknown{ background:var(--border-card-soft); }
  .as-key-indicator__label{
    font-size:11px;
    font-weight:700;
    color:var(--text-primary);
    text-align:center;
    margin-top:var(--space-2-5);
    line-height:1.3;
  }
  .as-key-indicator__famille{
    font-size:9.5px;
    color:var(--text-tertiary);
    text-align:center;
    margin-top:2px;
    line-height:1.3;
  }

  /* AJOUTÉ (22/07) — familles biologiques F1-F7, section propre en
     pleine largeur (voir docblock dans partial-screen-rapport.php sur
     pourquoi elle a été sortie de .as-rapport__summary). */
  .as-rapport__families{
    margin:0;
  }
  .as-rapport__families-title{
    font-size:14px;
    font-weight:700;
    color:var(--text-primary);
    margin:0 0 var(--space-3-5);
  }

  /* AJOUTÉ (22/07) — section états de peau (9, multi-label), pleine
     largeur, sous le résumé principal — voir docblock JS
     renderRapportSkinStates(). Puces qui s'enroulent naturellement
     (flex-wrap) : responsive par construction, jamais de dépassement
     horizontal quel que soit le nombre de puces qui tiennent par ligne. */
  .as-rapport__skin-states{
    max-width:1160px;
    margin:var(--space-6) auto 0;
    padding:0 40px;
  }
  .as-rapport__skin-states-title{
    font-size:15px;
    font-weight:700;
    color:var(--text-primary);
    margin:0 0 var(--space-1-5);
  }
  .as-rapport__skin-states-legend{
    font-size:12px;
    color:var(--text-tertiary);
    margin:0 0 var(--space-3-5);
  }
  .as-skin-state-chips{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2-5);
  }
  .as-skin-state-chip{
    display:inline-flex;
    align-items:center;
    gap:var(--space-1-5);
    padding:var(--space-2) var(--space-3-5);
    border-radius:100px;
    font-size:12.5px;
    font-weight:600;
    border:1.5px solid transparent;
    white-space:nowrap;
  }
  .as-skin-state-chip.is-absent{
    background:var(--bg-subtle, #f8f6f2);
    color:var(--text-tertiary);
    border-color:var(--border-card-soft);
  }
  .as-skin-state-chip.is-present.is-faible{
    background:rgba(47,158,99,0.10);
    color:var(--green-deep, #1f7a48);
    border-color:rgba(47,158,99,0.35);
  }
  .as-skin-state-chip.is-present.is-moyen{
    background:rgba(201,162,75,0.14);
    color:var(--gold-deep);
    border-color:rgba(201,162,75,0.4);
  }
  .as-skin-state-chip.is-present.is-eleve{
    background:var(--red-bg, rgba(197,73,78,0.16));
    color:var(--red, #c5494e);
    border-color:rgba(197,73,78,0.4);
  }
  .as-skin-state-chip__value{
    font-variant-numeric:tabular-nums;
    font-weight:700;
  }

  /* AJOUTÉ (22/07) — analyse par zone (Claude, jamais affichée avant
     aujourd'hui) — grille de 4 cartes, une par zone du visage. */
  .as-zone-analysis{
    margin:var(--space-6-5) 0;
  }
  .as-zone-analysis__title{
    font-size:14px;
    font-weight:700;
    color:var(--text-primary);
    margin:0 0 var(--space-3-5);
  }
  .as-zone-analysis__grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-3);
  }
  @media (max-width:520px){
    .as-zone-analysis__grid{ grid-template-columns:1fr; }
  }
  .as-zone-card{
    padding:var(--space-3-5) var(--space-4);
    border-radius:var(--radius-md);
    background:var(--bg-subtle, #f8f6f2);
    border:1px solid var(--border-card-soft);
  }
  .as-zone-card__title{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--gold-deep);
    margin:0 0 var(--space-1-5);
  }
  .as-zone-card__text{
    font-size:13px;
    line-height:1.55;
    color:var(--text-secondary);
    margin:0;
  }

  /* CORRIGÉ (22/07) — priorités transformées en vraies cartes (fond +
     bordure + coin arrondi) plutôt qu'une simple liste séparée par des
     traits — plus lisible, plus "visually appealing" comme demandé,
     tout en gardant le badge numéroté déjà existant. */
  .as-priority-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-2-5);
  }
  .as-priority-item{
    display:flex;
    align-items:flex-start;
    gap:var(--space-4);
    padding:var(--space-4-5) var(--space-5);
    border-radius:var(--radius-md);
    background:var(--bg-subtle, #f8f6f2);
    border:1px solid var(--border-card-soft);
    border-left:3px solid var(--gold-deep);
  }
  .as-priority-item__badge{
    flex:0 0 26px;
    height:26px;
    border-radius:50%;
    background:rgba(201,162,75,0.14);
    color:var(--gold-deep);
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
  }
  .as-priority-item__text{
    font-size:14px;
    line-height:1.6;
    color:var(--text-secondary);
    max-width:65ch;
  }
  .as-priority-item__text strong{ color:var(--text-primary); font-weight:700; }
  .as-priority-item__why{
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-tertiary);
    max-width:65ch;
    margin-top:var(--space-1);
    font-style:italic;
  }
  .as-narrative-footnote{
    font-size:12px;
    line-height:1.6;
    color:var(--text-tertiary);
    margin:var(--space-5-5) 0 0;
    padding-top:var(--space-4-5);
    border-top:1px solid var(--border-card-soft);
    max-width:65ch;
  }

  /* ---------- Produits de routine (Rapport) ---------- */
  .as-routine-products{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:var(--space-4-5);
  }
  .as-routine-product{
    display:flex;
    flex-direction:column;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--surface-card);
    border:1.5px solid var(--border-card-soft);
    box-shadow:var(--shadow-card);
    transition:transform 0.3s var(--ease);
  }
  .as-routine-product:hover{ transform:translateY(-4px); }
  /* CORRIGÉ (22/07) — fond sombre + disque de texture, plus proche du
     design fourni qu'un simple dégradé beige. */
  .as-routine-product__visual{
    position:relative;
    width:100%;
    aspect-ratio:1;
    background:radial-gradient(circle at 50% 40%, #2a2a2a, #0c0c0c 75%);
    background-size:cover;
    background-position:center;
  }
  /* AJOUTÉ (22/07) — anneau des 4 ingrédients actifs clés (actifs_cles),
     disposés en croix (haut/droite/bas/gauche) autour du centre, reliés
     par un cercle pointillé discret — reproduit le design demandé sans
     dépendre d'une librairie de graphique, en CSS pur. */
  .as-routine-product__ring{
    position:absolute;
    inset:14%;
    border:1px dashed rgba(201,162,75,0.45);
    border-radius:50%;
  }
  .as-routine-product__ingredient{
    position:absolute;
    max-width:74px;
    font-size:9.5px;
    font-weight:600;
    line-height:1.25;
    color:var(--gold, #c9a24b);
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,0.6);
  }
  .as-routine-product__ingredient--0{ top:-10px; left:50%; transform:translateX(-50%); } /* haut */
  .as-routine-product__ingredient--1{ top:50%; right:-8px; transform:translateY(-50%); text-align:left; } /* droite */
  .as-routine-product__ingredient--2{ bottom:-10px; left:50%; transform:translateX(-50%); } /* bas */
  .as-routine-product__ingredient--3{ top:50%; left:-8px; transform:translateY(-50%); text-align:right; } /* gauche */
  .as-routine-product__name{
    font-size:13.5px;
    font-weight:700;
    color:var(--text-primary);
    padding:var(--space-3-5) var(--space-3-5) var(--space-1);
  }
  .as-routine-product__why{
    display:block;
    padding:0 var(--space-3-5) var(--space-4);
    font-size:12.5px;
    font-weight:600;
    color:var(--gold-deep);
  }
  .as-routine-product__why:hover{ color:var(--gold); text-decoration:underline; }

  .as-routine-steps{
    padding:var(--space-5);
    border-radius:var(--radius-lg);
    background:var(--surface-card);
    border:1.5px solid var(--border-card-soft);
  }
  /* REVU (14/08) — signalé le 14/08 avec une maquette de référence :
     titre statique restauré, avec une ligne de séparation juste en
     dessous (voir border-bottom ci-dessous) — la liste elle-même suit
     désormais les onglets Matin/Soir au lieu d'afficher les deux
     périodes empilées (voir renderRapportRoutineSteps() dans
     scan-diagnostic.js pour le filtrage). */
  .as-routine-steps__title{
    font-size:14px;
    font-weight:700;
    color:var(--text-primary);
    padding-bottom:var(--space-3);
    margin-bottom:var(--space-3);
    border-bottom:1px solid var(--border-card-soft);
  }
  .as-routine-steps ol{
    list-style:none;
    padding:0;
    margin:0;
    font-size:13px;
    line-height:1.6;
    color:var(--text-secondary);
  }
  .as-routine-steps ol li{
    position:relative;
    padding-left:var(--space-4);
  }
  .as-routine-steps ol li + li{ margin-top:var(--space-3); }
  /* Puce dorée plutôt qu'une numérotation : cohérent avec la maquette
     de référence, et évite un chiffre qui recommencerait à 1 à chaque
     bascule Matin/Soir (troublant si on vient de voir "4. ..." côté
     Matin puis "1. ..." côté Soir pour une liste par ailleurs plus
     courte). */
  .as-routine-steps ol li::before{
    content:'';
    position:absolute;
    left:2px;
    top:7px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold);
  }
  .as-routine-steps ol li strong{ color:var(--text-primary); }

  /* ================= SCREEN 4 — ANALYSE (sombre, continuité de l'IQM) ================= */
  .as-analyse{
    position:relative;
    min-height:100vh;
    background:linear-gradient(180deg, #221d17 0%, #14110d 100%);
    padding-bottom:var(--space-9);
  }

  .as-analyse__layout{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:var(--space-8);
    justify-content:center;
    align-items:start;
    padding:150px 40px 0;
    max-width:1080px;
    width:100%;
    margin:0 auto;
    box-sizing:border-box;
  }

  .as-analyse__photo{
    position:relative;
    min-width:0;
    border-radius:var(--radius-xl);
    overflow:hidden;
    aspect-ratio:4/4.6;
    background:radial-gradient(120% 90% at 50% 15%, #6b625a, #2c2925 65%);
  }
  .as-analyse__photo-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .as-analyse__photo::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(10,9,7,0) 72%, rgba(10,9,7,0.28) 100%);
  }

  .as-analyse__panel{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:var(--space-1-5);
  }

  .as-analyse__ring{
    position:relative;
    width:150px;
    height:150px;
    margin-bottom:var(--space-2);
  }
  .as-analyse__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .as-analyse__ring-value{
    position:absolute;
    top:38%;
    left:0; right:0;
    transform:translateY(-50%);
    font-family:var(--font-sans);
    font-weight:800;
    font-size:32px;
    color:var(--green);
  }
  .as-analyse__ring-label{
    position:absolute;
    top:60%;
    left:0; right:0;
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--white-50);
  }

  .as-analyse__caption{
    font-size:12.5px;
    color:var(--white-50);
    margin:var(--space-5-5) 0 var(--space-4);
  }

  .as-analyse__badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-2);
    margin-bottom:30px;
  }
  .as-analyse__badge{
    padding:7px var(--space-3-5);
    border-radius:var(--radius-pill);
    font-size:11.5px;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.04);
    color:var(--white-70);
    transition:opacity 0.4s var(--ease), transform 0.4s var(--ease);
    animation:asBadgeIn 0.4s var(--ease) both;
  }
  @keyframes asBadgeIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .as-analyse__badge.is-confidence-high{ border-color:rgba(123,216,163,0.5); color:var(--green); background:rgba(123,216,163,0.08); }
  .as-analyse__badge.is-confidence-medium{ border-color:rgba(201,162,75,0.5); color:var(--gold); background:rgba(201,162,75,0.08); }
  .as-analyse__badge.is-confidence-low{ border-color:var(--red-line); color:var(--red); background:var(--red-bg); }
  .as-analyse__badge.is-confidence-pending{ opacity:0.5; }

  .as-analyse__error{
    font-size:12.5px;
    color:var(--red);
    background:var(--red-bg);
    border:1px solid var(--red-line);
    border-radius:var(--radius-sm);
    padding:var(--space-3) var(--space-4);
    margin-bottom:var(--space-5);
  }

  /* ================= SCREEN 5 — QUESTIONNAIRE (clair) ================= */
  .as-questionnaire__layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:0;
    max-width:1080px;
    margin:0 auto;
    padding:150px 40px 80px;
    align-items:start;
  }

  .as-questionnaire__sidebar{
    padding-right:44px;
    border-right:1px solid var(--border-card-soft);
  }

  .as-questionnaire__title{
    font-family:var(--font-sans);
    font-size:24px;
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:var(--space-5);
  }

  .as-questionnaire__progress{
    height:6px;
    border-radius:var(--radius-pill);
    background:var(--border-card-soft);
    overflow:hidden;
    margin-bottom:var(--space-1-5);
  }
  .as-questionnaire__progress span{
    display:block;
    height:100%;
    border-radius:var(--radius-pill);
    background:linear-gradient(90deg, var(--green-deep), var(--gold));
    transition:width 0.5s var(--ease);
  }

  .as-questionnaire__main{
    padding-left:56px;
  }

  .as-questionnaire__meta{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    color:var(--text-tertiary);
    margin-bottom:var(--space-3-5);
  }

  .as-questionnaire__question{
    font-family:var(--font-sans);
    font-size:26px;
    font-weight:700;
    line-height:1.3;
    color:var(--text-primary);
    margin-bottom:34px;
    max-width:22ch;
  }

  .as-questionnaire__options{ margin-bottom:36px; }

  .as-questionnaire__nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--space-3-5);
  }
  .as-questionnaire__nav .as-btn-round{ margin-right:auto; }

  /* ================= SCREEN 6 — TRIAGE (clair) ================= */
  .as-triage__layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:0;
    max-width:1080px;
    margin:0 auto;
    padding:150px 40px 80px;
    align-items:start;
  }

  .as-triage__sidebar{
    padding-right:44px;
    border-right:1px solid var(--border-card-soft);
  }

  .as-triage__sidebar-eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.12em;
    color:var(--text-tertiary);
    margin-bottom:var(--space-4);
  }

  .as-triage__main{ padding-left:56px; }

  .as-triage__level-badge{
    display:inline-block;
    padding:var(--space-1-5) var(--space-4);
    border-radius:var(--radius-pill);
    background:rgba(201,162,75,0.14);
    border:1px solid rgba(201,162,75,0.4);
    color:var(--gold-deep);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.02em;
    margin-bottom:var(--space-4-5);
  }

  .as-triage__family-title{
    font-family:var(--font-sans);
    font-size:28px;
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:var(--space-2);
  }
  .as-triage__family-subtitle{
    font-size:13.5px;
    color:var(--text-secondary);
    margin-bottom:var(--space-7);
  }

  .as-triage__metrics{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:var(--space-3-5);
    margin-bottom:var(--space-6-5);
  }
  .as-triage__metric-card{
    padding:var(--space-4);
    border-radius:var(--radius-md);
    background:var(--surface-card);
    border:1.5px solid var(--border-card-soft);
  }
  .as-triage__metric-label{
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:var(--space-2);
  }
  .as-triage__metric-value{
    font-family:var(--font-sans);
    font-size:24px;
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:var(--space-1-5);
  }
  .as-triage__metric-confidence{
    font-size:12px;
    color:var(--text-tertiary);
  }

  .as-triage__anticontradiction{
    padding:var(--space-4) var(--space-5);
    border-radius:var(--radius-md);
    background:var(--red-bg);
    border:1px solid var(--red-line);
    margin-bottom:var(--space-6-5);
  }
  .as-triage__anticontradiction-title{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.06em;
    color:var(--red);
    margin-bottom:var(--space-1-5);
  }
  .as-triage__anticontradiction-text{
    font-size:12.5px;
    line-height:1.55;
    color:var(--text-secondary);
  }

  .as-triage__nav{
    display:flex;
    justify-content:flex-end;
  }

  /* ================= SCREEN 7 — RAPPORT (clair) ================= */
  .as-rapport__actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1160px;
    margin:0 auto;
    padding:150px 40px 0;
  }
  .as-rapport__actions-right{
    display:flex;
    gap:var(--space-2-5);
    flex-wrap:wrap;
  }

  .as-rapport__summary{
    display:grid;
    grid-template-columns:280px 1fr 1.1fr;
    gap:var(--space-7);
    align-items:start;
    max-width:1160px;
    margin:0 auto;
    padding:40px 40px 0;
  }

  .as-rapport__photo-col{
    /* CORRIGÉ (18/07) — photo + points de pagination regroupés dans ce
       conteneur commun, qui occupe la 1ère colonne de la grille à 3
       colonnes de .as-rapport__summary (280px 1fr 1.1fr). Un signalement
       terrain a montré ce qui se passait AVANT ce correctif : les points
       ajoutés comme 4e enfant direct de la grille devenaient un élément
       de grille imprévu, placé n'importe où par le positionnement
       automatique plutôt que sous la photo. */
    display:flex;
    flex-direction:column;
  }

  .as-rapport__photo{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:4/4.8;
    box-shadow:var(--shadow-card);
    background:radial-gradient(120% 90% at 50% 15%, #6b625a, #2c2925 65%);
  }
  .as-rapport__photo-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---------- Carte thermique (Phase 5, 18/07) ---------- */
  .as-heatmap-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    transition:opacity 0.3s var(--ease);
  }
  .as-heatmap-enlarge{
    position:absolute;
    top:14px;
    right:14px;
    z-index:6;
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:rgba(12,10,8,0.55);
    backdrop-filter:blur(4px);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.25s var(--ease), transform 0.25s var(--ease-spring);
  }
  .as-heatmap-enlarge:hover{ background:rgba(12,10,8,0.75); transform:scale(1.08); }

  /* Flèches carrousel — même style que .as-back (bouton retour), pour
     rester cohérent avec le reste de l'interface plutôt que réinventer
     un style de bouton circulaire. */
  .as-heatmap-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:6;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--white-50);
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(3px);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.2s var(--ease), transform 0.2s var(--ease-spring);
  }
  .as-heatmap-arrow:hover{ background:rgba(255,255,255,0.2); }
  .as-heatmap-arrow--prev{ left:14px; }
  .as-heatmap-arrow--prev:hover{ transform:translateY(-50%) translateX(-2px); }
  .as-heatmap-arrow--next{ right:14px; }
  .as-heatmap-arrow--next:hover{ transform:translateY(-50%) translateX(2px); }

  /* Étiquette (dot coloré + nom du paramètre) — bas de la photo,
     centrée, fond sombre semi-transparent. */
  .as-heatmap-label{
    --as-heatmap-color: #999;
    position:absolute;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    z-index:6;
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-4-5) var(--space-2) var(--space-3-5);
    border-radius:var(--radius-pill);
    background:rgba(12,10,8,0.6);
    backdrop-filter:blur(4px);
    color:#fff;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
  }
  .as-heatmap-label__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--as-heatmap-color);
    flex-shrink:0;
    box-shadow:0 0 0 3px rgba(255,255,255,0.15);
  }
  /* AJOUTÉ (22/07) — vue composite (plusieurs points colorés au lieu
     d'un seul) : légèrement plus compact pour ne pas déborder sur
     mobile avec 4 points + texte. */
  .as-heatmap-label--composite{ gap:5px; padding-left:var(--space-3); }
  .as-heatmap-label--composite .as-heatmap-label__dot{ width:8px; height:8px; box-shadow:0 0 0 2px rgba(255,255,255,0.15); }

  /* Points de pagination — SOUS la photo (pas dessus), même logique
     visuelle que le stepper (voir .as-stepper__seg) : un point plein doré
     pour le paramètre actif, des points neutres pour les autres. */
  .as-heatmap-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    margin-top:var(--space-3-5);
  }
  /* AJOUTÉ (22/07) — légende du proxy déshydratation, voir docblock
     dans scan-heatmap.js. */
  .as-heatmap-caveat{
    font-size:11px;
    line-height:1.4;
    color:var(--text-tertiary);
    text-align:center;
    margin:var(--space-2-5) 0 0;
    padding:0 var(--space-2);
  }
  .as-heatmap-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:none;
    padding:0;
    background:var(--border-card-soft);
    cursor:pointer;
    transition:background 0.25s var(--ease), transform 0.25s var(--ease-spring);
  }
  .as-heatmap-dot:hover{ background:var(--gold-deep); }
  .as-heatmap-dot.is-active{
    background:var(--gold);
    transform:scale(1.3);
  }

  /* ---------- Modal d'agrandissement / zoom ---------- */
  .as-heatmap-lightbox{
    position:fixed;
    inset:0;
    margin:auto;
    width:100vw;
    height:100vh;
    max-width:100vw;
    max-height:100vh;
    border:none;
    padding:0;
    background:#0c0a08;
  }
  .as-heatmap-lightbox::backdrop{ background:#0c0a08; }
  .as-heatmap-lightbox__stage{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:grab;
    transform-origin:center center;
    touch-action:none;
  }
  .as-heatmap-lightbox__stage:active{ cursor:grabbing; }
  .as-heatmap-lightbox__img{
    max-width:100%;
    max-height:100%;
    -webkit-user-drag:none;
    user-select:none;
    position:relative;
  }
  .as-heatmap-lightbox__stage .as-heatmap-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
  }
  .as-heatmap-lightbox__close{
    position:absolute;
    top:20px;
    right:20px;
    z-index:2;
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:26px;
    line-height:1;
    cursor:pointer;
  }
  .as-heatmap-lightbox__close:hover{ background:rgba(255,255,255,0.22); }

  .as-heatmap-lightbox__arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.1);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.2s var(--ease);
  }
  .as-heatmap-lightbox__arrow:hover{ background:rgba(255,255,255,0.2); }
  .as-heatmap-lightbox__arrow--prev{ left:20px; }
  .as-heatmap-lightbox__arrow--next{ right:20px; }

  .as-heatmap-lightbox__label{
    position:absolute;
    left:50%;
    bottom:80px;
    transform:translateX(-50%);
    z-index:2;
  }

  .as-heatmap-lightbox__dots{
    position:absolute;
    bottom:24px;
    left:0;
    right:0;
    z-index:2;
  }

  .as-heatmap-lightbox__hint{
    position:absolute;
    top:20px;
    left:20px;
    z-index:2;
    font-size:12px;
    color:rgba(255,255,255,0.6);
    max-width:220px;
  }
  @media (max-width:640px){
    .as-heatmap-lightbox__hint{ display:none; }
    .as-heatmap-lightbox__arrow{ width:40px; height:40px; }
  }

  .as-rapport__global{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:var(--space-6-5) var(--space-5);
    border-radius:var(--radius-lg);
    background:var(--surface-card);
    border:1.5px solid var(--border-card-soft);
    box-shadow:var(--shadow-card);
  }
  .as-score__ring--lg{ width:130px; height:130px; margin-bottom:var(--space-2); }
  .as-score__ring-value--dark{ color:var(--green-deep) !important; }
  .as-rapport__global-label{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold-deep);
    margin-bottom:var(--space-1);
  }
  .as-rapport__global-confidence{
    font-size:12px;
    color:var(--text-tertiary);
    margin-bottom:var(--space-4-5);
    min-height:16px;
  }
  .as-rapport__meta{
    width:100%;
    padding-top:var(--space-4-5);
    border-top:1px solid var(--border-card-soft);
  }
  .as-rapport__meta-label{
    font-size:11px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--text-tertiary);
    margin-bottom:var(--space-1-5);
  }
  .as-rapport__meta-value{
    font-size:15px;
    font-weight:700;
    color:var(--text-primary);
  }

  /* AJOUTÉ (22/07) — Phase 11 : comparaison avec l'analyse précédente +
     progression vers l'objectif — cartes discrètes, jamais aussi
     proéminentes que le GSHS/triage principal, cohérent avec leur rôle
     de complément informatif plutôt que de résultat central. */
  .as-rapport__comparison{
    margin:var(--space-3-5) 0;
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-md, 12px);
    background:var(--bg-subtle, #f7f5f2);
    border:1px solid var(--border-subtle, #e8e3db);
  }
  /* AJOUTÉ (27/07) — signalé le 27/07 : un grand espace vide inutile
     apparaissait à cet endroit — protection défensive, même principe
     que .as-shell[hidden] plus haut, au cas où un style d'auteur
     écraserait l'attribut hidden ici aussi. */
  .as-rapport__comparison[hidden]{ display:none; }
  .as-rapport__comparison p:last-child{
    font-size:14px;
    color:var(--text-primary);
    margin-top:var(--space-1);
  }

  /* AJOUTÉ (27/07) — carte comparaison reconstruite : icône, delta,
     mini-diagramme. */
  .as-comparison-card{
    display:flex;
    align-items:center;
    gap:var(--space-4);
  }
  .as-comparison-card__icon{
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .as-comparison-card__icon svg{ width:22px; height:22px; }
  .as-comparison-card__body{ flex:1; min-width:0; }
  .as-comparison-card__label{
    font-size:11.5px;
    color:var(--text-tertiary);
    margin:0 0 2px;
  }
  .as-comparison-card__delta{
    font-size:20px;
    font-weight:800;
    margin:0 0 2px;
  }
  .as-comparison-card__text{
    font-size:12.5px;
    color:var(--text-secondary);
    margin:0;
  }
  .as-comparison-card__sparkline{
    width:90px;
    height:36px;
    flex-shrink:0;
  }
  @media (max-width:520px){
    .as-comparison-card__sparkline{ display:none; }
  }
  /* AJOUTÉ (23/07) — Phase C : tendance sur toute la chronologie. */
  .as-rapport__comparison-trend{
    font-size:13px;
    color:var(--text-secondary);
    margin-top:var(--space-2);
    padding-top:var(--space-2);
    border-top:1px solid var(--border-card-soft);
  }

  /* Niveau de triage : élevé au rang de badge plein, plus visible qu'un
     simple texte — le Rapport n'étant accessible qu'en N1, c'est
     toujours une bonne nouvelle à mettre en avant visuellement. */
  .as-rapport__meta--triage .as-rapport__meta-label{ margin-bottom:var(--space-2); }
  .as-rapport__triage-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-4-5);
    border-radius:var(--radius-pill);
    background:rgba(47,158,99,0.12);
    border:1.5px solid rgba(47,158,99,0.35);
    color:var(--green-deep);
    font-size:14.5px;
    font-weight:800;
  }
  .as-rapport__triage-badge::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green-deep);
  }

  /* AJOUTÉ (22/07) — indice de vigilance dermatologique, indépendant du
     triage ci-dessus (voir docblock JS renderRapportScreen()) : 3 états
     seulement (Faible/Moyen/Élevé), volontairement plus simple que les
     badges de sévérité par métrique. */
  .as-rapport__vigilance-badge{
    display:inline-flex;
    align-items:center;
    padding:var(--space-1-5) var(--space-4);
    border-radius:var(--radius-pill);
    font-size:13.5px;
    font-weight:700;
  }
  .as-rapport__vigilance-badge.is-faible{ background:rgba(47,158,99,0.12); color:var(--green-deep); }
  .as-rapport__vigilance-badge.is-moyen{ background:rgba(201,162,75,0.16); color:var(--gold-deep); }
  .as-rapport__vigilance-badge.is-eleve{ background:var(--red-bg); color:var(--red); }

  /* Skin type / Phototype, côte à côte sous le badge de triage */
  .as-rapport__meta-row{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4);
    margin-top:var(--space-4-5);
    padding-top:var(--space-4-5);
    border-top:1px solid var(--border-card-soft);
  }
  .as-rapport__meta-row .as-rapport__meta{
    padding-top:0;
    border-top:none;
    text-align:left;
  }

  /* AJOUTÉ (30/07) — signalé le 30/07 : ce bloc n'avait jamais reçu de
     style depuis son ajout le 27/07 (boutons bruts non stylés). Deux
     cercles avec icône (pouce haut/bas déjà dans le SVG du HTML),
     accent violet cohérent avec le reste de l'application. */
  .as-rapport__feedback{
    max-width:1160px;
    margin:var(--space-7) auto 0;
    padding:var(--space-6) 40px 0;
    text-align:center;
  }
  .as-rapport__feedback-question{
    font-size:14px;
    font-weight:600;
    color:var(--text-primary);
    margin:0 0 var(--space-3-5);
  }
  .as-rapport__feedback-buttons{ display:flex; justify-content:center; gap:var(--space-3-5); }
  .as-rapport__feedback-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--border-card-soft);
    background:var(--surface-card);
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .as-rapport__feedback-btn svg{ width:20px; height:20px; }
  .as-rapport__feedback-btn:hover{ background:#F3EEFF; border-color:#6B46FF; color:#6B46FF; }
  .as-rapport__feedback-btn:disabled{ opacity:0.5; cursor:not-allowed; }
  .as-rapport__feedback-thanks{
    font-size:13px;
    font-weight:600;
    color:#2f9e63;
    margin:var(--space-3-5) 0 0;
  }

  .as-rapport__scores,
  .as-rapport__narrative,
  .as-rapport__routine{
    max-width:1160px;
    margin:0 auto;
    padding:56px 40px 0;
  }

  .as-rapport__section-title{
    font-family:var(--font-sans);
    font-size:22px;
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:var(--space-6);
  }
  .as-rapport__section-title-pill{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--gold-deep);
    background:rgba(201,162,75,0.12);
    border:1px solid rgba(201,162,75,0.3);
    border-radius:var(--radius-pill);
    padding:var(--space-2) var(--space-4-5);
    margin-bottom:var(--space-6);
  }

  .as-rapport__narrative{ padding-bottom:var(--space-2); }
  /* AJOUTÉ (14/08) — signalé le 14/08 : le texte de l'Analyse
     détaillée doit être justifié (bord droit aligné, pas seulement
     le bord gauche) — s'applique à tous les paragraphes générés
     dynamiquement par generateNarrative() dans scan-diagnostic.js
     (intro, description de chaque priorité, analyse par zone), sans
     avoir à cibler leurs classes une par une : un <p> court (ex. un
     titre) n'est de toute façon jamais visuellement affecté par
     text-align:justify, seul le texte qui va à la ligne l'est
     réellement. */
  #as-rapport-narrative p{ text-align:justify; }

  .as-rapport__routine-header{ margin-bottom:var(--space-6); display:flex; flex-direction:column; align-items:stretch; gap:var(--space-4); }
  /* CORRIGÉ (14/08) — signalé le 14/08 : "Ajouter la routine au
     panier" et "Ajouter produit corps" doivent être sur la même
     ligne, l'un à gauche l'autre à droite, même alignement
     horizontal — jamais empilés verticalement comme avant. Nouveau
     conteneur .as-rapport__routine-actions (voir partial-screen-rapport.php),
     distinct du titre qui garde sa propre ligne au-dessus.
     justify-content:space-between pousse chaque bouton vers son
     bord — jamais l'un collé à l'autre au centre. En dessous de
     560px (un seul bouton ne tiendrait plus proprement à côté de
     l'autre sur un petit écran), repli en colonne — voir la media
     query plus bas dans ce fichier. */
  .as-rapport__routine-actions{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-3);
    flex-wrap:wrap;
  }
  #as-rapport-add-to-cart-btn{ margin-bottom:0; }
  .as-rapport__routine-header .as-rapport__section-title{ margin-bottom:0; }
  /* AJOUTÉ (31/07) — message de confirmation après "Ajouter au panier". */
  .as-rapport__cart-message{
    font-size:13px; color:var(--text-secondary); background:var(--surface-card);
    border:1px solid var(--border-card-soft); border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4); margin:-8px 0 var(--space-5);
  }
  .as-rapport__cart-message a{ color:var(--comp-accent-deep, #a4802f); font-weight:700; text-decoration:underline; }

  /* CORRIGÉ (31/07) — signalé le 31/07 : "c'est tellement moche, pas
     soft ni subtile" — remplace l'ancienne grande bannière pleine
     largeur par un petit badge discret, entièrement cliquable, dans
     l'esprit d'une notification légère plutôt qu'une alerte lourde. */
  .as-rapport__quota-badge{
    /* CORRIGÉ (11/08) — signalé le 11/08 : "les boutons sont empilés
       les uns sur les autres" — deux badges de ce type (quota +
       calibration) vivent l'un après l'autre dans le HTML, sans
       élément de séparation entre eux. En inline-flex, deux éléments
       consécutifs peuvent tenter de se placer côte à côte ou se
       chevaucher visuellement selon la largeur disponible et la
       longueur du texte (la bannière de calibration a un texte bien
       plus long que le badge quota). display:flex (jamais inline)
       force chaque badge à démarrer sur sa propre ligne comme un vrai
       bloc — width:fit-content conserve l'apparence "pilule ajustée
       au contenu" d'avant, jamais une pleine largeur inattendue. */
    display:flex; width:fit-content; align-items:center; gap:var(--space-2);
    background:#fff; border:1px solid var(--border-card-soft); border-radius:999px;
    padding:var(--space-2) var(--space-3-5) var(--space-2) var(--space-3); margin:0 0 var(--space-5); cursor:pointer;
    font-size:12.5px; font-weight:600; color:var(--text-secondary);
    box-shadow:0 2px 8px rgba(23,20,15,0.05);
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .as-rapport__quota-badge:hover{ border-color:var(--gold, #d1b479); box-shadow:0 4px 12px rgba(23,20,15,0.08); }
  .as-rapport__quota-badge svg{ width:15px; height:15px; color:var(--gold-deep, #a4802f); flex-shrink:0; }
  .as-rapport__quota-badge__cta{
    color:var(--gold-deep, #a4802f); font-weight:700; padding-left:var(--space-2); border-left:1px solid var(--border-card-soft);
  }

  .as-rapport__routine-layout{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:var(--space-6);
    align-items:start;
  }
  .as-rapport__routine-layout:has(.as-routine-steps[style*="display: none"]){
    grid-template-columns:1fr;
  }

  .as-rapport__empty-state{
    font-size:13.5px;
    color:var(--text-secondary);
    padding:40px;
    text-align:center;
    border:1.5px dashed var(--border-card-soft);
    border-radius:var(--radius-lg);
  }

  .as-rapport{ padding-bottom:80px; }

  /* ---------- Responsive ---------- */
  /* AJOUTÉ (22/07) — signalé le 22/07 : point de rupture TABLETTE
     dédié, zone (721-1024px) jusque-là non couverte spécifiquement —
     la grille 3 colonnes fixes (280px + 1fr + 1.1fr) du résumé
     principal y était trop à l'étroit (280px fixe prend une part
     disproportionnée d'une largeur tablette), avant de basculer en une
     seule colonne à 720px. Passage à 2 colonnes : photo+score à gauche
     (partagent la même colonne, empilés), indicateurs+familles à
     droite — plus confortable qu'une 3e colonne écrasée. */
  @media (min-width:721px) and (max-width:1024px){
    .as-rapport__summary{
      grid-template-columns:1fr 1fr;
      gap:var(--space-6);
      padding:var(--space-7) var(--space-6-5) 0;
    }
    .as-rapport__photo-col{ grid-column:1; grid-row:1; }
    .as-rapport__global{ grid-column:1; grid-row:2; }
    .as-rapport__right-col{ grid-column:2; grid-row:1 / span 2; }
    .as-rapport__scores,
    .as-rapport__narrative,
    .as-rapport__routine,
    .as-rapport__families,
    .as-rapport__skin-states{ padding-left:var(--space-6-5); padding-right:var(--space-6-5); }
    .as-rapport__routine-layout{ grid-template-columns:1fr; }
  }

  @media (max-width:720px){
    .as-topbar{ padding:var(--space-4-5) var(--space-5); }
    .as-wordmark-img{ height:32px; width:56px; }
    .as-hero__content{ padding:0 var(--space-5-5) var(--space-9); max-width:100%; }
    .as-headline{ font-size:32px; }
    .as-subtext{ max-width:100%; }
    /* CORRIGÉ (25/08) — signalé en conditions réelles : le badge
       s'empilait sous le bouton "Start scan" plutôt que sur la même
       ligne. Bascule le conteneur commun (display:contents par défaut,
       voir plus haut) en vraie rangée flexible SEULEMENT ici, sur
       mobile -- .as-badge repasse en position statique pour participer
       au flux de cette rangée, plutôt que de rester positionné en
       absolu par-dessus le reste de l'écran. */
    .as-hero__cta-row{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:var(--space-3-5);
    }
    .as-badge__pill{ max-width:none; }
    .as-back{ left:20px; top:82px; }
    .as-capture__title{ font-size:26px; }
    .as-capture__actions{ flex-direction:column; width:100%; }
    .as-btn-outline{ width:100%; text-align:center; }
    .as-iqm__layout{ grid-template-columns:1fr; padding:140px var(--space-5) 0; gap:var(--space-7); }
    .as-iqm__back{ left:20px; top:82px; }
    .as-score{ align-items:stretch; }
    .as-score__ring{ align-self:center; }
    .as-btn-primary{ align-self:stretch; text-align:center; }

    .as-analyse__layout{ grid-template-columns:1fr; padding:140px var(--space-5) 0; gap:var(--space-7); }
    .as-analyse__panel .as-btn-primary{ align-self:stretch; text-align:center; }

    .as-questionnaire__layout,
    .as-triage__layout{ grid-template-columns:1fr; padding:140px var(--space-5) 60px; }
    .as-questionnaire__sidebar,
    .as-triage__sidebar{ padding-right:0; padding-bottom:var(--space-7); border-right:none; border-bottom:1px solid var(--border-card-soft); margin-bottom:var(--space-7); }
    .as-questionnaire__main,
    .as-triage__main{ padding-left:0; }
    .as-questionnaire__question{ font-size:22px; max-width:100%; }
    .as-questionnaire__nav{ flex-wrap:wrap; }
    .as-btn-primary.as-questionnaire__nav,
    .as-questionnaire__nav .as-btn-primary,
    .as-triage__nav .as-btn-primary{ flex:1; text-align:center; }

    /* CORRIGÉ (11/08) — signalé le 11/08 : "commencer mon suivi et
       créer un compte sur mobile se collent" — .as-rapport__actions
       n'avait AUCUNE marge en bas (padding se terminant par 0), et le
       badge qui suit juste après (quota ou calibration) n'a lui-même
       qu'une marge du bas, jamais du haut — combinés, un écart de
       zéro pixel entre "Commencer mon suivi" et le premier badge. */
    .as-rapport__actions{ padding:130px var(--space-5) 0; flex-direction:column; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-5); }
    .as-rapport__actions-right{ width:100%; }
    .as-rapport__actions-right .as-btn-pill{ flex:1; text-align:center; }
    .as-rapport__summary{ grid-template-columns:1fr; padding:var(--space-7) var(--space-5) 0; }
    .as-rapport__photo{ aspect-ratio:16/10; }
    .as-rapport__scores,
    .as-rapport__narrative,
    .as-rapport__routine{ padding:40px var(--space-5) 0; }
    .as-rapport__routine-layout{ grid-template-columns:1fr; }
    /* AJOUTÉ (22/07) — nouveaux éléments (indicateurs clés, familles,
       comparaison/progression) pas encore couverts par ce point de
       rupture au moment où ils ont été construits. */
    .as-rapport__families{ padding:0 var(--space-5); }
    .as-rapport__skin-states{ padding:0 var(--space-5); }
    .as-rapport__comparison,
    .as-rapport__progression{ margin-left:var(--space-5); margin-right:var(--space-5); }
    /* AJOUTÉ (14/08) — sous 720px, les deux pilules ("Ajouter la
       routine au panier" / "Ajouter produit corps") ne tiennent plus
       proprement côte à côte sans se chevaucher ou déborder — repli
       en colonne, chacune sur toute la largeur pour rester lisible. */
    .as-rapport__routine-actions{ flex-direction:column; align-items:stretch; }
  }

  /* AJOUTÉ (22/07) — au-delà de 720px, l'histogramme des 4 indicateurs
     reste en une seule rangée (voir .as-key-indicators__chart) ; en
     dessous, sur les téléphones les plus étroits, la place manque pour
     4 colonnes avec libellés lisibles — passage en grille 2x2, plus
     confortable à lire qu'un histogramme écrasé. */
  @media (max-width:400px){
    .as-key-indicators__chart{
      flex-wrap:wrap;
      height:auto;
      row-gap:var(--space-6);
    }
    .as-key-indicator{
      flex:0 0 calc(50% - 6px);
      height:140px;
    }
  }

/* ==========================================================================
   AJOUTÉ (23/07) — Phase D du Follow-up Module : "Mon espace peau"
   (Dashboard Engine). Réutilise les variables et le langage visuel déjà
   établis (as-btn-pill, as-score__ring, cartes dorées) plutôt que
   d'inventer une nouvelle palette.
   ========================================================================== */

.as-dashboard{
  max-width:900px;
  margin:0 auto;
  padding:110px 40px 80px;
}
.as-dashboard__top{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  margin-bottom:var(--space-7);
}
.as-dashboard__title{
  font-size:26px;
  font-weight:700;
  color:var(--text-primary);
  margin:0;
}
.as-dashboard__loading,
.as-dashboard__error{
  color:var(--text-tertiary);
  font-size:14px;
}
.as-dashboard__error{ color:var(--red, #c5494e); }

.as-dashboard__header-card{
  display:flex;
  align-items:center;
  gap:var(--space-6-5);
  background:var(--surface-card);
  border:1px solid var(--border-card-soft);
  border-radius:var(--radius-lg);
  padding:var(--space-6-5) var(--space-7);
  margin-bottom:var(--space-7);
}
.as-dashboard__last-date{
  font-size:15px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 var(--space-1-5);
}
.as-dashboard__trend{
  font-size:13.5px;
  color:var(--text-secondary);
  margin:0;
}

.as-dashboard__section{
  margin-bottom:36px;
}
.as-dashboard__section h2{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 var(--space-3);
}
.as-dashboard__section-hint{
  font-size:13px;
  color:var(--text-tertiary);
  margin:0 0 var(--space-2-5);
}

.as-evolution-chart{
  width:100%;
  height:220px;
  background:var(--surface-card);
  border:1px solid var(--border-card-soft);
  border-radius:var(--radius-md);
}

.as-comparator__selects{
  display:flex;
  align-items:flex-end;
  gap:var(--space-4);
  margin-bottom:var(--space-4);
}
.as-comparator__selects > div{ flex:1; }
.as-comparator__selects label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-tertiary);
  margin-bottom:var(--space-1-5);
}
.as-comparator__select{
  width:100%;
  padding:var(--space-2-5) var(--space-3);
  border-radius:var(--radius-sm, 8px);
  border:1.5px solid var(--border-card-soft);
  background:var(--surface-card);
  /* CORRIGÉ (31/07) — même cause que .as-identity-form__input : zoom
     automatique intempestif de Safari iPhone sous 16px. */
  font-size:16px;
  color:var(--text-primary);
}
/* CORRIGÉ (28/07) — signalé le 28/07 : --text-primary vaut BLANC au
   niveau racine (:root, pensé pour le fond sombre de l'accueil) et
   n'est redéfini en sombre QUE pour .as-questionnaire/.as-triage/
   .as-rapport — jamais pour la coquille de suivi (.as-shell), où ce
   composant est aussi utilisé (Routine, Comparaison). Sans cette
   règle, le texte du menu déroulant restait blanc sur fond clair.
   Cible précisément le contexte .as-shell, sans toucher au comportement
   déjà correct dans le parcours de scan d'origine. */
.as-shell .as-comparator__select{
  background:#fff;
  color:var(--shell-text);
  border-color:var(--shell-border);
}
.as-shell .as-comparator__select option{
  color:var(--shell-text);
  background:#fff;
}
.as-comparator__arrow{
  padding-bottom:var(--space-2-5);
  font-size:18px;
  color:var(--text-tertiary);
}
.as-comparator__result{
  background:var(--surface-card);
  border:1px solid var(--border-card-soft);
  border-radius:var(--radius-md);
  padding:var(--space-4-5) var(--space-5);
}
.as-comparator__delta{
  font-size:22px;
  font-weight:700;
  margin:0 0 var(--space-1);
  color:var(--text-primary);
}
.as-comparator__delta.is-positive{ color:var(--green-deep, #1f7a48); }
.as-comparator__delta.is-negative{ color:var(--red, #c5494e); }
.as-comparator__days{
  font-size:13px;
  color:var(--text-tertiary);
  margin:0;
}
.as-comparator__hint{
  font-size:13px;
  color:var(--text-tertiary);
}

@media (max-width:720px){
  .as-dashboard{ padding:100px var(--space-5) 60px; }
  .as-dashboard__header-card{ flex-direction:column; align-items:flex-start; gap:var(--space-4); }
  .as-comparator__selects{ flex-direction:column; align-items:stretch; }
  .as-comparator__arrow{ display:none; }
}

/* ==========================================================================
   AJOUTÉ (23/07) — "Mes analyses" (History Engine). Réutilise le
   langage visuel déjà établi (as-comparator__select, as-dashboard__*).
   ========================================================================== */

.as-analyses__filters{
  display:flex;
  gap:var(--space-3);
  margin-bottom:var(--space-5);
}
.as-analyses__filters input[type="search"]{ flex:1; }

.as-analyses__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2-5);
}
.as-analyses__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--surface-card);
  border:1px solid var(--border-card-soft);
  border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);
  cursor:pointer;
  transition:border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.as-analyses__item:hover,
.as-analyses__item:focus-visible{
  border-color:var(--gold-deep);
  background:rgba(201,162,75,0.05);
  outline:none;
}
.as-analyses__item-date{
  font-size:14.5px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 2px;
}
.as-analyses__item-type{
  font-size:12.5px;
  color:var(--text-tertiary);
  margin:0;
}
.as-analyses__item-right{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.as-analyses__badge{
  display:inline-flex;
  padding:3px var(--space-2-5);
  border-radius:100px;
  font-size:11.5px;
  font-weight:700;
}
.as-analyses__badge.is-n1{ background:#edf7ed; color:#1a7a1a; }
.as-analyses__badge.is-n2{ background:#fdf3e2; color:#996800; }
.as-analyses__badge.is-n3{ background:#fbeaea; color:#b32d2e; }
.as-analyses__gshs{
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.as-analyses__no-match{
  color:var(--text-tertiary);
  font-size:13.5px;
  padding:var(--space-5);
  text-align:center;
}

@media (max-width:720px){
  .as-analyses__filters{ flex-direction:column; }
}

/* ==========================================================================
   AJOUTÉ (23/07) — Comparaison détaillée (item 3). Réutilise
   .as-heatmap-svg déjà stylée pour la heatmap du rapport principal.
   ========================================================================== */

.as-comparison__photos{
  display:flex;
  gap:var(--space-5);
  margin-bottom:var(--space-6);
}
.as-comparison__side{
  flex:1;
  text-align:center;
}
.as-comparison__side-date{
  font-size:13.5px;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 var(--space-2);
}
.as-comparison__photo-wrap{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:1;
  background:#f0f0f0;
}
.as-comparison__photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.as-comparison__photo-wrap svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.as-comparison__gshs{
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
  margin:var(--space-2-5) 0 0;
}

.as-comparison__conclusion{
  background:rgba(201,162,75,0.08);
  border-left:3px solid var(--gold-deep);
  border-radius:var(--radius-sm, 8px);
  padding:var(--space-4) var(--space-5);
  margin-bottom:var(--space-6-5);
}
.as-comparison__conclusion p{
  margin:0;
  font-size:14px;
  color:var(--text-primary);
  line-height:1.5;
}

.as-comparison__families,
.as-comparison__scores{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.as-comparison-family{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--surface-card);
  border:1px solid var(--border-card-soft);
  border-radius:var(--radius-sm, 8px);
  padding:var(--space-2-5) var(--space-4);
}
.as-comparison-family__label{
  font-size:13.5px;
  color:var(--text-primary);
}
.as-comparison-family__delta{
  font-size:13.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text-tertiary);
}
.as-comparison-family__delta.is-positive{ color:var(--green-deep, #1f7a48); }
.as-comparison-family__delta.is-negative{ color:var(--red, #c5494e); }

@media (max-width:720px){
  .as-comparison__photos{ flex-direction:column; }
}

/* ==========================================================================
   AJOUTÉ (23/07) — "Routine et produits" (Routine Engine, item 4).
   ========================================================================== */

.as-routine__entry{
  font-size:13.5px;
  color:var(--shell-text-soft);
  line-height:1.5;
  margin:0 0 var(--space-2-5);
}
.as-routine__entry strong{ color:var(--shell-text); }

/* CORRIGÉ (31/07) — signalé lors d'une vérification avant refonte :
   --text-primary/--surface-card/etc n'ont un repli clair QUE dans
   #as-screen-account-gate — ailleurs (dont cet écran), ils héritent du
   thème SOMBRE de :root (texte blanc), invisible sur le fond blanc
   de .as-dash. --shell-* est correctement scopé à .as-shell, qui
   enveloppe cet écran (voir FOLLOW_UP_SCREEN_IDS) — même jetons déjà
   corrects sur Dashboard/Évolution/Comparaison/Paramètres. */
.as-routine__product-list,
.as-routine__history{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2-5);
}
.as-routine__product,
.as-routine__history-item{
  display:flex;
  align-items:center;
  gap:var(--space-3-5);
  background:var(--shell-bg);
  border:1px solid var(--shell-border);
  border-radius:12px;
  padding:var(--space-3-5) var(--space-4-5);
}
.as-routine__product-img{
  width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0;
  background:#fff; border:1px solid var(--shell-border);
}
.as-routine__product-info{ flex:1; min-width:0; }
.as-routine__product-name{
  font-size:14px;
  font-weight:600;
  color:var(--shell-text);
  margin:0 0 2px;
}
.as-routine__product-date,
.as-routine__history-count{
  font-size:12px;
  color:var(--shell-text-soft);
  margin:0;
}
.as-routine__history-date{
  font-size:14px;
  font-weight:600;
  color:var(--shell-text);
  margin:0;
}
.as-routine__product-actions{ display:flex; align-items:center; gap:var(--space-3-5); flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.as-routine__usage-toggle{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:13px;
  color:var(--shell-text-soft);
  cursor:pointer;
  white-space:nowrap;
}
.as-routine-quick-add{
  font-size:11.5px; font-weight:700; color:var(--gold-deep, #a4802f); background:none;
  border:1px solid var(--gold, #d1b479); border-radius:999px; padding:var(--space-1-5) var(--space-3); cursor:pointer; white-space:nowrap;
}
.as-routine-quick-add:disabled{ opacity:0.5; cursor:default; }

/* AJOUTÉ (31/07) — bouton panier + message de confirmation, routine personnelle. */
.as-routine-cart-message{
  font-size:12.5px; color:var(--shell-text-soft); background:var(--shell-bg);
  border:1px solid var(--shell-border); border-radius:10px; padding:var(--space-2-5) var(--space-3-5); margin:-8px 0 var(--space-3-5);
}
.as-routine-cart-message a{ color:var(--gold-deep, #a4802f); font-weight:700; text-decoration:underline; }

/* AJOUTÉ (31/07) — barre "scans restants ce mois-ci", écran Dashboard. */
.as-dash-quota-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
  background:var(--shell-bg); border:1px solid var(--shell-border); border-radius:12px;
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4);
}
/* CORRIGÉ (22/08) — même bug que .as-dash-decision-banner juste plus
   bas, trouvé le même jour en le corrigeant : display:flex posé
   directement sur la classe l'emporte toujours sur [hidden]{display:none}
   du navigateur, quelle que soit la spécificité (une règle d'auteur
   bat toujours une règle du navigateur). Repéré ici par recherche
   systématique sur tout le fichier, jamais en attendant un second
   signalement séparé. */
.as-dash-quota-bar[hidden]{ display:none; }
.as-dash-quota-bar span{ font-size:13px; font-weight:600; color:var(--shell-text); }

/* AJOUTÉ (21/08) — signalé le 21/08 : "il devrait voir le statut si
   c'est accordée ou refusée". Couleur distincte de .as-dash-quota-bar
   juste au-dessus (dorée, ton neutre) -- celle-ci est une vraie
   notification ponctuelle, jamais un état permanent de l'écran, elle
   doit se distinguer visuellement au premier coup d'œil. */
.as-dash-decision-banner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
  background:var(--gold-soft, #f7f1e4); border:1px solid var(--gold, #d1b479); border-radius:12px;
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4);
}
/* CORRIGÉ (22/08) — signalé en conditions réelles : "quand je clique
   sur compris, rien ne se passe... à quoi il sert ?" -- la boîte
   s'affichait TOUJOURS, vide, même quand JS avait correctement posé
   l'attribut hidden. CAUSE RÉELLE : display:flex posé directement sur
   la classe, sans jamais prévoir l'attribut hidden -- en CSS, une
   règle d'auteur l'emporte toujours sur le style par défaut du
   navigateur ([hidden]{display:none}), peu importe la spécificité.
   Résultat : hidden n'avait plus aucun effet visuel, la boîte restait
   visible en permanence, vide dans l'immense majorité des cas
   (aucune vraie décision à afficher) -- et le bouton "Compris"
   n'avait jamais reçu son gestionnaire de clic (voir
   checkScanQuotaDecision() dans scan-dashboard.js, qui ne l'attache
   QUE lorsqu'une vraie décision est trouvée), d'où l'impression
   qu'il "ne servait à rien". */
.as-dash-decision-banner[hidden]{ display:none; }
.as-dash-decision-banner p{ font-size:13.5px; font-weight:600; color:var(--shell-text); margin:0; }

/* AJOUTÉ (31/07) — écran "Objectifs" (Objective Intelligence Engine). */
.as-objective-gate__card{ text-align:center; padding:var(--space-8) var(--space-7); max-width:480px; margin:60px auto; }
.as-objective-gate__card h2{ font-family:var(--font-display); font-size:20px; margin-bottom:var(--space-3); color:var(--shell-text); }
.as-objective-gate__card p{ font-size:14px; color:var(--shell-text-soft); margin-bottom:var(--space-6); line-height:1.6; }

.as-objective-progress{ font-size:12px; font-weight:700; color:var(--shell-text-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:var(--space-4-5); }
.as-objective-step h2{ font-family:var(--font-display); font-size:19px; color:var(--shell-text); margin-bottom:var(--space-5); }
.as-objective-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:var(--space-3); margin-bottom:var(--space-6); }
.as-objective-card{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2); text-align:center;
  background:#fff; border:2px solid var(--shell-border); border-radius:14px; padding:var(--space-5) var(--space-3); cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--shell-text);
}
.as-objective-card:hover{ border-color:var(--gold, #d1b479); }
.as-objective-card.is-selected{ border-color:var(--gold-deep, #a4802f); background:var(--gold-soft, #f7f1e4); }
.as-objective-card__icon{ font-size:26px; }
.as-objective-wizard__nav{ display:flex; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-2); }
#as-objective-next-btn:disabled{ opacity:0.45; cursor:default; }

.as-objective-result__card{ max-width:520px; margin:40px auto; text-align:center; padding:40px var(--space-7); }
.as-objective-result__status{ display:block; font-size:18px; font-weight:800; margin-bottom:var(--space-3-5); }
.as-objective-result__message{ font-size:14.5px; color:var(--shell-text); line-height:1.6; margin-bottom:var(--space-6); }
.as-objective-result__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-6); margin-bottom:var(--space-6); }
.as-objective-result__stat{ display:flex; flex-direction:column; }
.as-objective-result__stat strong{ font-size:24px; color:var(--gold-deep, #a4802f); }
.as-objective-result__stat span{ font-size:11.5px; color:var(--shell-text-soft); }
.as-objective-result__reason{ font-size:12px; color:var(--shell-text-soft); font-style:italic; width:100%; margin:0 0 var(--space-5); }

/* CORRIGÉ (31/07) — signalé le 31/07 : "utilise le thème clair de tous
   les autres écrans" — le thème sombre d'origine (respectait la
   spécification initiale à la lettre) a été entièrement remplacé ici
   par les mêmes jetons --shell-* déjà éprouvés sur Dashboard,
   Évolution, Comparaison, Routine et Paramètres — jamais une nouvelle
   palette isolée, pour que cet écran soit visuellement cohérent avec
   le reste du module de suivi et parfaitement lisible. */
.as-objdash{
  background:var(--shell-page-bg, #fff); border-radius:18px; padding:var(--space-7); color:var(--shell-text);
  font-family:var(--font-sans, inherit);
}
.as-objdash__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6-5); flex-wrap:wrap; }
.as-objdash__eyebrow{ font-family:var(--font-secondary); font-style:italic; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--shell-text-soft); margin:0 0 var(--space-1); }
.as-objdash__title{ font-size:22px; font-weight:800; color:var(--shell-text); margin:0; }
.as-objdash__btn{
  background:var(--shell-bg); color:var(--shell-text); border:1px solid var(--shell-border); border-radius:999px;
  padding:var(--space-2-5) var(--space-5); font-size:13px; font-weight:700; cursor:pointer;
}
.as-objdash__btn--gold{ background:var(--gold, #d1b479); color:#1A1A1A; border-color:var(--gold, #d1b479); }
.as-objdash__btn:disabled{ opacity:0.5; cursor:default; }

.as-objdash__grid{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--space-4-5); margin-bottom:var(--space-6);
}
.as-objdash__card{
  grid-column:span 4; background:#fff; border:1px solid var(--shell-border); border-radius:18px; padding:var(--space-6);
  box-shadow:0 2px 10px rgba(23,20,15,0.04);
}
.as-objdash__card--rings{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3-5); }
.as-objdash__card--wide{ grid-column:span 8; }
.as-objdash__card-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--shell-text-soft); margin:0 0 var(--space-3-5); }

.as-objdash__ring-block{ position:relative; width:110px; height:110px; }
.as-objdash__ring{ width:110px; height:110px; }
.as-objdash__ring-label{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.as-objdash__ring-label span{ font-size:20px; font-weight:800; color:var(--shell-text); }
.as-objdash__ring-label small{ font-size:9.5px; color:var(--shell-text-soft); text-align:center; max-width:70px; }
.as-objdash__chip{ font-size:11.5px; font-weight:700; padding:5px var(--space-3-5); border-radius:999px; }

.as-objdash__big-number{ font-size:30px; font-weight:800; color:var(--gold-deep, #a4802f); margin:0 0 var(--space-4); }
.as-objdash__timeline{ display:flex; align-items:center; gap:var(--space-2); }
.as-objdash__timeline-dot{ width:10px; height:10px; border-radius:50%; background:var(--shell-border); flex-shrink:0; }
.as-objdash__timeline-dot--end{ background:var(--gold, #d1b479); }
.as-objdash__timeline-track{ flex:1; height:6px; border-radius:999px; background:var(--shell-bg); overflow:hidden; }
.as-objdash__timeline-fill{ display:block; height:100%; background:var(--gold, #d1b479); border-radius:999px; }
.as-objdash__timeline-labels{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--shell-text-soft); margin-top:var(--space-2); }

.as-objdash-priority-row{
  display:flex; align-items:center; justify-content:space-between; padding:9px 0;
  border-bottom:1px solid var(--shell-border); font-size:13px; color:var(--shell-text);
}
.as-objdash-priority-row:last-child{ border-bottom:none; }
.as-objdash__severity-chip{ font-size:11px; font-weight:700; padding:3px var(--space-2-5); border-radius:999px; }

#as-objdash-radar{ width:100%; max-width:300px; display:block; margin:0 auto; }

.as-objdash__prediction-text{ font-size:14px; line-height:1.6; color:var(--shell-text); margin:0 0 var(--space-2-5); }
.as-objdash__prediction-reason{ font-size:12px; color:var(--shell-text-soft); font-style:italic; margin:0; }

.as-objdash__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* CORRIGÉ (31/07) — en-tête de carte cliquable (voir Objectifs sur le Dashboard). */
.as-dash-card__header--clickable{ cursor:pointer; border-radius:10px; transition:background 0.15s ease; margin:-6px -8px var(--space-2); padding:var(--space-1-5) var(--space-2); }
.as-dash-card__header--clickable:hover, .as-dash-card__header--clickable:focus-visible{ background:var(--shell-bg); outline:none; }

/* AJOUTÉ (31/07) — cartes de reporting (raisonnement clinique, dépendances, contre-indications). */
.as-objdash__reasoning-primary{ font-size:15px; font-weight:700; color:var(--gold-deep, #a4802f); margin:0 0 var(--space-2); }
.as-objdash__reasoning-secondary-item{ font-size:12.5px; color:var(--shell-text-soft); margin:0 0 var(--space-3); }
.as-objdash__reasoning-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-3-5); }
.as-objdash__reasoning-subtitle{ font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--shell-text-soft); margin:0 0 var(--space-2); }
.as-objdash__reasoning-cols ul{ margin:0; padding-left:var(--space-4-5); font-size:13px; color:var(--shell-text); line-height:1.6; }
.as-objdash__reasoning-cols li{ margin-bottom:var(--space-1); }
@media (max-width:640px){ .as-objdash__reasoning-cols{ grid-template-columns:1fr; } }

.as-objdash-dependency-item{
  display:flex; align-items:flex-start; gap:var(--space-2-5); padding:var(--space-3) 0; border-bottom:1px solid var(--shell-border); font-size:13px; color:var(--shell-text);
}
.as-objdash-dependency-item:last-child{ border-bottom:none; }
.as-objdash-dependency-item__icon{ color:var(--gold-deep, #a4802f); flex-shrink:0; }

.as-objdash-contra-item{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2-5) 0; border-bottom:1px solid var(--shell-border); }
.as-objdash-contra-item:last-child{ border-bottom:none; }
.as-objdash-contra-item__name{ font-size:13px; font-weight:600; color:var(--shell-text); }
.as-objdash-contra-item__reason{ font-size:11.5px; color:var(--shell-text-soft); margin-top:2px; }

/* AJOUTÉ (31/07) — plans possibles (Candidate Generator). */
.as-objdash__candidates{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-3-5); }
.as-objdash-candidate{ border:1.5px solid var(--shell-border); border-radius:14px; padding:var(--space-4); }
.as-objdash-candidate__name{ font-size:13.5px; font-weight:800; color:var(--shell-text); margin:0 0 var(--space-1-5); }
.as-objdash-candidate__desc{ font-size:11.5px; color:var(--shell-text-soft); margin:0 0 var(--space-2-5); line-height:1.5; }
.as-objdash-candidate__count{ font-size:11px; font-weight:700; color:var(--gold-deep, #a4802f); }
@media (max-width:768px){ .as-objdash__candidates{ grid-template-columns:1fr; } }

/* AJOUTÉ (31/07) — calendrier progressif (Routine Builder). */
.as-objdash-week{ display:flex; gap:var(--space-3-5); padding:var(--space-3-5) 0; border-bottom:1px solid var(--shell-border); }
.as-objdash-week:last-child{ border-bottom:none; }
.as-objdash-week__num{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--gold, #d1b479);
  color:#1A1A1A; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.as-objdash-week__phase{ font-size:13.5px; font-weight:700; color:var(--shell-text); margin:0 0 var(--space-1); }
.as-objdash-week__desc{ font-size:12px; color:var(--shell-text-soft); margin:0; line-height:1.5; }

/* AJOUTÉ (31/07) — vérifications de compatibilité (Recommendation Validator). */
.as-objdash-validator-product{ margin-bottom:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--shell-border); }
.as-objdash-validator-product:last-child{ border-bottom:none; margin-bottom:0; }
.as-objdash-validator-product__name{ font-size:13.5px; font-weight:700; color:var(--shell-text); margin:0 0 var(--space-2); }
.as-objdash-validator-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:var(--space-1-5); }
.as-objdash-validator-chip{
  font-size:10.5px; font-weight:600; padding:5px 9px; border-radius:8px; display:flex; align-items:center; gap:5px;
}
.as-objdash-validator-chip.is-pass{ background:rgba(47,158,99,0.12); color:#2f9e63; }
.as-objdash-validator-chip.is-fail{ background:rgba(197,73,78,0.12); color:#c5494e; }
.as-objdash-validator-chip.is-na{ background:var(--shell-bg); color:var(--shell-text-soft); }

/* AJOUTÉ (31/07, refonte UX) — liste des objectifs actifs + menu "...". */
.as-objdash__max-notice{
  font-size:12.5px; color:var(--gold-deep, #a4802f); background:rgba(209,180,121,0.12);
  border:1px solid var(--gold, #d1b479); border-radius:10px; padding:var(--space-2-5) var(--space-3-5); margin:0 0 var(--space-4);
}
.as-objdash__list{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-6-5); }
.as-objdash-list-item{
  position:relative; background:#fff; border:1.5px solid var(--shell-border); border-radius:14px;
  padding:var(--space-3-5) var(--space-4); cursor:pointer; transition:border-color 0.15s ease;
}
.as-objdash-list-item:hover{ border-color:var(--gold, #d1b479); }
.as-objdash-list-item.is-selected{ border-color:var(--gold-deep, #a4802f); background:rgba(209,180,121,0.06); }
.as-objdash-list-item__bar{ height:5px; border-radius:999px; background:var(--shell-bg); overflow:hidden; margin-bottom:var(--space-2-5); }
.as-objdash-list-item__bar span{ display:block; height:100%; background:var(--gold, #d1b479); border-radius:999px; }
.as-objdash-list-item__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2-5); }
.as-objdash-list-item__label{ font-size:14px; font-weight:700; color:var(--shell-text); margin:0 0 2px; }
.as-objdash-list-item__status{ font-size:11.5px; font-weight:600; }
.as-objdash-list-item__dates{ font-size:11px; color:var(--shell-text-soft); margin:var(--space-1) 0 0; }
.as-objdash-list-item__reason{ font-size:12px; color:var(--shell-text-soft); margin:var(--space-1-5) 0 0; line-height:1.5; max-width:520px; }
.as-objdash-list-item__menu-btn{
  background:none; border:none; font-size:20px; color:var(--shell-text-soft); cursor:pointer;
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
}
.as-objdash-list-item__menu-btn:hover{ background:var(--shell-bg); }
.as-objdash-list-item__menu{
  position:absolute; top:44px; right:14px; z-index:5; background:#fff; border:1px solid var(--shell-border);
  border-radius:10px; box-shadow:0 8px 24px rgba(23,20,15,0.14); overflow:hidden; min-width:140px;
}
.as-objdash-list-item__menu button{
  display:block; width:100%; text-align:left; padding:var(--space-2-5) var(--space-3-5); font-size:13px; font-weight:600;
  color:var(--shell-text); background:none; border:none; cursor:pointer;
}
.as-objdash-list-item__menu button:hover{ background:var(--shell-bg); }
.as-objdash-list-item__menu button[data-action="delete"]{ color:#c5494e; }

.as-objdash__detail{ padding-top:var(--space-2); border-top:1px solid var(--shell-border); }

/* AJOUTÉ (31/07) — "essayer un autre objectif" sur l'écran de résultat. */
.as-objective-result__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-2); }

/* AJOUTÉ (31/07) — panneau "Voir le raisonnement d'ADEL" (Explanation Engine). */
.as-objdash__explanation-panel{
  position:relative; background:#fff; border:1.5px solid var(--gold, #d1b479); border-radius:16px;
  padding:var(--space-6-5); margin-bottom:var(--space-5);
}
.as-objdash__explanation-panel h3{ font-size:16px; color:var(--shell-text); margin:0 0 var(--space-4); }
.as-objdash__explanation-close{
  position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--shell-border); background:#fff; cursor:pointer; font-size:16px; color:var(--shell-text-soft);
}
.as-objdash-explanation-block{ margin-bottom:var(--space-4); }
.as-objdash-explanation-block__title{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold-deep, #a4802f); margin:0 0 var(--space-1-5); }
.as-objdash-explanation-block__text{ font-size:13px; color:var(--shell-text); line-height:1.6; margin:0; }

@media (max-width:900px){
  .as-objdash__card{ grid-column:span 12; }
  .as-objdash__card--wide{ grid-column:span 12; }
}
@media (max-width:640px){
  .as-objdash{ padding:var(--space-5); }
  .as-objdash__card--rings{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
}

/* AJOUTÉ (31/07) — formulaire "produit hors catalogue ADEL". */
.as-routine-external-form{ display:flex; gap:var(--space-2-5); margin-top:var(--space-4); flex-wrap:wrap; }
.as-routine-external-form .as-identity-form__input{ flex:1; min-width:200px; margin-bottom:0; }
.as-routine__product-tag{
  display:inline-block; font-size:10px; font-weight:700; color:var(--shell-text-soft);
  background:var(--shell-bg); border-radius:999px; padding:2px var(--space-2); margin-left:var(--space-1-5); vertical-align:middle;
}

/* AJOUTÉ (31/07) — refonte complète de l'écran "Routine et produits". */
.as-routine-card{ min-width:0; }
.as-routine-badge{ font-size:11.5px; color:var(--shell-text-soft); font-weight:600; }
.as-routine-period{ margin-top:var(--space-4-5); }
.as-routine-period:first-of-type{ margin-top:0; }
.as-routine-period__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-2-5); }
.as-routine-period h3{ font-size:14px; font-weight:700; color:var(--shell-text); margin:0 0 var(--space-2-5); }
.as-routine-period__header h3{ margin:0; }
.as-routine-add-btn{
  font-size:12px; font-weight:700; color:var(--gold-deep, #a4802f); background:var(--gold-soft, #f7f1e4);
  border:none; border-radius:999px; padding:var(--space-1-5) var(--space-3-5); cursor:pointer;
}
.as-routine-steps{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.as-routine-empty{ font-size:12.5px; color:var(--shell-text-soft); margin:0; }

.as-routine-step-card{
  display:flex; align-items:center; gap:var(--space-2-5); width:100%; max-width:280px;
  background:var(--shell-bg); border-radius:12px; padding:var(--space-2-5); text-decoration:none; color:inherit;
  position:relative;
}
.as-routine-step-card__img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#fff; border:1px solid var(--shell-border); }
.as-routine-step-card__img--placeholder{ background:var(--shell-border); }
.as-routine-step-card__body{ flex:1; min-width:0; }
.as-routine-step-card__name{ font-size:12.5px; font-weight:700; color:var(--shell-text); margin:0 0 2px; }
.as-routine-step-card__usage{ font-size:11px; color:var(--shell-text-soft); margin:0; line-height:1.4; }
.as-routine-step-card--editable{ padding-right:30px; }
.as-routine-step-card__remove{
  position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:1px solid var(--shell-border); color:var(--shell-text-soft);
  font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* CORRIGÉ (31/07) — signalé le 31/07 : le popup doit montrer TOUT le
   catalogue en grille défilable avec image, sélection multiple par
   surlignage (jamais un ajout immédiat au clic) — remplace l'ancienne
   liste à une seule sélection. */
.as-routine-picker{ max-width:600px; }
#as-routine-search-results{
  max-height:400px; overflow-y:auto; display:grid;
  grid-template-columns:repeat(3, 1fr); gap:var(--space-3); padding:var(--space-1) var(--space-1) var(--space-1) 0;
}
.as-routine-picker-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--space-1-5);
  background:none; border:2px solid transparent; border-radius:12px; padding:var(--space-2); cursor:pointer;
  text-align:center;
}
.as-routine-picker-card:hover{ background:var(--shell-bg); }
.as-routine-picker-card.is-selected{ border-color:var(--gold, #d1b479); background:var(--gold-soft, #f7f1e4); }
.as-routine-picker-card__img{ width:100%; aspect-ratio:1; border-radius:10px; object-fit:cover; background:var(--shell-bg); }
.as-routine-picker-card__check{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:var(--gold, #d1b479); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.6); transition:opacity 120ms, transform 120ms;
}
.as-routine-picker-card.is-selected .as-routine-picker-card__check{ opacity:1; transform:scale(1); }
.as-routine-picker-card__name{ font-size:11.5px; font-weight:600; color:var(--shell-text); line-height:1.3; }
.as-routine-picker__footer{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  margin-top:var(--space-3-5); padding-top:var(--space-3-5); border-top:1px solid var(--shell-border);
}
.as-routine-picker__count{ font-size:12.5px; color:var(--shell-text-soft); font-weight:600; }
#as-routine-picker-confirm:disabled{ opacity:0.4; cursor:default; }
.as-routine-search-row__oos{ font-size:10.5px; color:var(--red, #c5494e); font-weight:700; }

@media (max-width:520px){
  #as-routine-search-results{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:640px){
  .as-routine-step-card{ max-width:100%; }
  .as-routine__product{ flex-wrap:wrap; }
  .as-routine__product-actions{ width:100%; justify-content:space-between; }
}

/* ==========================================================================
   AJOUTÉ (23/07) — Progress Engine enrichi (évolution par famille +
   états de peau au fil du temps).
   ========================================================================== */

.as-families-evolution__legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.as-families-evolution__legend-item{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1-5);
  font-size:12px;
  color:var(--text-secondary);
}
.as-families-evolution__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}

.as-states-evolution__row{
  display:flex;
  align-items:center;
  gap:var(--space-3-5);
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--border-card-soft);
}
.as-states-evolution__row:last-child{ border-bottom:none; }
.as-states-evolution__label{
  flex:0 0 160px;
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
}
.as-states-evolution__dots{
  display:flex;
  gap:var(--space-1-5);
  flex-wrap:wrap;
}
.as-states-evolution__point{
  width:12px;
  height:12px;
  border-radius:50%;
  flex-shrink:0;
}
.as-states-evolution__point.is-present{ background:var(--gold-deep); }
.as-states-evolution__point.is-absent{ background:var(--border-card-soft); }

@media (max-width:720px){
  .as-states-evolution__label{ flex-basis:120px; font-size:12px; }
}

/* ==========================================================================
   AJOUTÉ (27/07) — Coquille d'application du Follow-up Module (barre
   latérale + en-tête), calquée sur la maquette fournie. Palette VIOLETTE
   dédiée à cette coquille, distincte du doré utilisé dans le parcours de
   scan initial — choix delibéré du brief fourni, pas une incohérence.
   ========================================================================== */

.as-shell{
  /* CORRIGÉ (30/07, nuit) — signalé le 30/07 : retour explicite à
     #d1b479 (la couleur de marque déjà en place avant le passage au
     violet plus tôt le 30/07) — un seul changement de variable ici
     suffit, comme pour le passage inverse. */
  --shell-purple: #d1b479;
  --shell-purple-deep: #a4802f;
  --shell-purple-soft: #f7f1e4;
  --shell-bg: #ffffff;
  --shell-border: #e8e6e1;
  --shell-text: #121314;
  --shell-text-soft: #5E6472;

  /* CORRIGÉ (28/07) — signalé le 28/07 : plusieurs variables globales
     (--text-primary, --text-tertiary, --surface-card...) valent BLANC
     par défaut au niveau :root (pensées pour le fond sombre de
     l'accueil) et n'étaient redéfinies en clair QUE pour
     .as-questionnaire/.as-triage/.as-rapport — jamais pour cette
     coquille, où plusieurs composants réutilisés (menus déroulants,
     messages "aucune donnée"...) s'appuient dessus. Même redéfinition
     que ce bloc existant, appliquée ici aussi, pour que TOUT composant
     réutilisé hérite automatiquement des bonnes couleurs sans devoir
     corriger chaque classe une par une. */
  --surface-page:#ffffff;
  --surface-card:#fff;
  --surface-card-hover:#fff;
  --border-card:rgba(164,128,47,0.35);
  --border-card-soft:rgba(23,20,15,0.14);
  --text-primary:#121314;
  --text-secondary:rgba(23,20,15,0.72);
  --text-tertiary:rgba(23,20,15,0.52);
  --shadow-card:0 20px 44px rgba(70,55,20,0.1);
  --shadow-btn:0 10px 24px rgba(70,55,20,0.14);

  /* CORRIGÉ (27/07) — cause RÉELLE du texte invisible signalé : .adel-skinai-app
     (le conteneur racine du plugin) définit color:var(--white-90) par
     défaut, pensé pour le fond sombre du parcours de scan original —
     jamais redéfini ici jusqu'à maintenant. Tout élément SANS couleur
     explicite héritait donc du blanc, invisible sur des cartes
     blanches. Cette ligne redevient le nouveau texte par défaut pour
     TOUT ce qui est dans la coquille, sans devoir colorer chaque
     élément un par un. */
  color:var(--shell-text);
  display:flex;
  min-height:100vh;
  background:var(--shell-bg);
  font-family:var(--font-sans, 'Serotiva', sans-serif);
}
/* CORRIGÉ (28/07) — signalé le 28/07 : texte illisible (blanc sur
   fond clair) persistait sur la page Comparaison malgré la couleur
   héritée définie ci-dessus sur .as-shell. Cause probable : l'HÉRITAGE
   CSS a la priorité la PLUS BASSE de toute la cascade — n'importe
   quelle autre règle, même de spécificité plus faible qu'une classe,
   mais qui CIBLE directement l'élément (balise, sélecteur générique
   d'un autre plugin/thème WordPress partageant la page) l'emporte sur
   une couleur seulement héritée. Cette règle FORCE explicitement la
   couleur sur CHAQUE descendant, pas seulement par héritage — les
   règles plus spécifiques ajoutées plus loin (badges verts/rouges,
   liens dorés, etc.) continuent de s'appliquer normalement par-dessus. */
.as-shell, .as-shell *{
  color:var(--shell-text);
}
/* CORRIGÉ (27/07) — signalé le 27/07 : la coquille s'affichait sur
   TOUTES les pages, y compris l'accueil, alors que le PHP et le JS la
   masquent bien via l'attribut hidden. La cause réelle : cette règle
   d'auteur (display:flex ci-dessus) l'emporte sur la règle par défaut
   du navigateur ([hidden]{display:none}), qui est une feuille de style
   UTILISATEUR de priorité plus faible — l'attribut hidden n'a donc
   jamais eu d'effet réel tant que cette règle explicite manquait. */
.as-shell[hidden]{ display:none; }

.as-shell__sidebar{
  /* CORRIGÉ (30/07) — 260px du document (250px approximé avant). */
  width:260px;
  flex-shrink:0;
  background:#fff;
  border-right:1px solid var(--shell-border);
  padding:var(--space-6) var(--space-4);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  /* CORRIGÉ (02/09) — signalé le 02/09 avec capture à l'appui : le
     bouton "Contacter un expert" (en pied de barre latérale, voir
     .as-shell__help plus bas) restait invisible sur tablette. Cause
     réelle : le correctif du 30/07 juste en dessous (jamais retiré,
     seulement corrigé) forçait overflow:visible pour éviter une barre
     de défilement -- mais avec une hauteur fixe de 100vh et huit
     éléments de navigation désormais dans cette barre (Dashboard,
     Mes analyses, Évolution, Comparaison, Routine, Objectifs,
     Notifications, Paramètres) PLUS le bloc d'aide, le contenu dépasse
     largement 100vh sur tout écran de hauteur réduite -- une tablette
     en mode paysage en particulier -- rendant les derniers éléments
     purement inatteignables, jamais un simple défaut visuel. Remis à
     overflow-y:auto : une vraie barre de défilement n'apparaît que
     lorsque le contenu dépasse RÉELLEMENT le conteneur (comportement
     natif du navigateur) -- sur un écran assez haut pour tout
     contenir, rien ne change, jamais de barre visible pour rien.
     L'inquiétude d'origine ("la sidebar ne doit jamais scroller")
     semble reposer sur une confusion avec overflow-y:scroll (qui, lui,
     affiche toujours une barre) -- overflow-y:auto n'a pas ce défaut.
  */
  overflow-y:auto;
}
/* CORRIGÉ (14/08) — .as-shell__logo (texte stylé) remplacé par une
   vraie image (voir partial-app-shell.php) : taille FIXE précise,
   jamais width:auto (voir docblock de .as-wordmark-img plus haut —
   même risque qu'un reset CSS du thème fasse déborder l'image sans
   borne explicite). 49px calculé depuis le vrai ratio du fichier
   (1068×605px) pour 28px de haut, jamais un chiffre approximatif —
   légèrement plus compact que .as-wordmark-img (56×32) pour rester
   visuellement proportionné au reste, plus dense, de cette barre
   latérale. Aucun filter:invert() ici : le fichier est noir
   quasi-pur et .as-shell__sidebar est blanc (#fff) -- une inversion
   le rendrait blanc sur blanc, invisible. */
.as-shell__logo-img{
  display:block;
  height:36px;
  width:64px;
  margin:var(--space-1) var(--space-3) var(--space-5);
}

.as-shell__nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}
.as-shell__nav-item{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  /* CORRIGÉ (28/07, ajusté 30/07) — hauteur 52px, padding 16px,
     coins 14px du document. */
  min-height:52px;
  padding:var(--space-4);
  border-radius:14px;
  border:none;
  background:none;
  font-size:13.5px;
  font-weight:600;
  color:var(--shell-text-soft);
  text-align:left;
  cursor:pointer;
  position:relative;
}
/* CORRIGÉ (07/09) — bug confirmé par capture d'écran réelle, jamais
   détecté avant faute d'avoir vérifié le rendu visuel (seul
   el.hidden -- la valeur de l'attribut -- avait été vérifié
   jusqu'ici, jamais le rendu réel) : display:flex ci-dessus
   l'emportait sur le comportement natif de [hidden], rendant TOUS
   les data-workspace de la sidebar visuellement inefficaces depuis
   la construction du sélecteur d'espace de travail -- un patient
   voyait "Accueil"/"Disponibilités" (propres à Expert) et
   inversement, malgré un attribut hidden techniquement correct. */
.as-shell__nav-item[hidden]{ display:none; }
.as-shell__nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.as-shell__nav-item:hover{ background:var(--shell-purple-soft); color:var(--shell-purple-deep); }
/* CORRIGÉ (27/07) — teinte foncée pour un texte blanc lisible dessus
   (le doré clair #d1b479 seul n'offre pas assez de contraste). */
.as-shell__nav-item.is-active{ background:var(--shell-purple-deep); color:#fff; }
.as-shell__nav-badge{
  margin-left:auto;
  background:var(--red, #e5484d);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  border-radius:100px;
  padding:1px var(--space-1-5);
}

.as-shell__help{
  background:var(--shell-purple-soft);
  border-radius:14px;
  padding:var(--space-4);
  margin-top:var(--space-4);
}
.as-shell__help-title{ font-size:13px; font-weight:700; color:var(--shell-text); margin:0 0 var(--space-1); }
.as-shell__help-text{ font-size:12px; color:var(--shell-text-soft); margin:0 0 var(--space-2-5); }
.as-shell__help-btn{
  display:block;
  text-align:center;
  background:#fff;
  border-radius:8px;
  padding:var(--space-2);
  font-size:12.5px;
  font-weight:600;
  color:var(--shell-purple-deep);
  text-decoration:none;
}

.as-shell__main{ flex:1; min-width:0; position:relative; }

.as-shell__topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* CORRIGÉ (28/07) — hauteur 88px du document (padding vertical
     ajusté pour l'atteindre avec le contenu actuel). */
  min-height:88px;
  padding:0 var(--space-7);
  background:#fff;
  border-bottom:1px solid var(--shell-border);
}
.as-shell__greeting{ font-size:32px; font-weight:700; color:var(--shell-text); margin:0; }
.as-shell__subgreeting{ font-size:18px; color:var(--shell-text-soft); margin:2px 0 0; }
.as-shell__topbar-actions{ display:flex; align-items:center; gap:var(--space-3-5); }
.as-shell__new-scan-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  /* CORRIGÉ (28/07) — dimensions 150×46 du document — couleur DORÉE
     conservée (pas le violet #6B46FF du document, voir échange du
     28/07 : les vraies couleurs ADEL restent #d1b479/#121314). */
  min-width:150px;
  height:46px;
  background:var(--shell-purple-deep);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:var(--space-2-5) var(--space-4-5);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
}
/* CORRIGÉ (07/09) — audit complet demandé : même piège que
   .as-shell__nav-item et .as-shell__bottom-nav-item déjà corrigés --
   display:inline-flex ci-dessus écrasait [hidden] avant même que
   data-workspace ne soit ajouté sur ce bouton précis. */
.as-shell__new-scan-btn[hidden]{ display:none; }
.as-shell__new-scan-btn svg{ width:16px; height:16px; }
/* CORRIGÉ (27/07) — l'état normal utilise désormais la même teinte
   foncée que l'ancien survol (voir plus haut, pour la lisibilité du
   texte blanc) — le survol doit rester visiblement différent. */
.as-shell__new-scan-btn:hover{ background:#8a6a26; }
.as-shell__bell{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--shell-border);
  background:#fff;
  color:var(--shell-text-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}
.as-shell__bell svg{ width:18px; height:18px; }
.as-shell__bell-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  background:var(--red, #e5484d);
  color:#fff;
  font-size:10px;
  font-weight:700;
  border-radius:100px;
  min-width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
}
.as-shell__bell-badge[hidden]{ display:none; }

/* AJOUTÉ (27/07) — profil (photo + nom), tout à droite de l'en-tête. */
.as-shell__profile{
  display:flex;
  align-items:center;
  gap:var(--space-2-5);
  padding:var(--space-1-5) var(--space-3) var(--space-1-5) var(--space-1-5);
  border-radius:100px;
  border:1px solid var(--shell-border);
  background:#fff;
}
.as-shell__profile[hidden]{ display:none; }
.as-shell__profile-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  background:var(--shell-bg);
}
.as-shell__profile-name{
  font-size:13px;
  font-weight:600;
  color:var(--shell-text);
}

/* AJOUTÉ (27/07) — panneau de notifications. */
.as-shell__notif-panel{
  position:absolute;
  top:74px;
  right:32px;
  width:300px;
  /* CORRIGÉ (31/07) — signalé le 31/07 : sur les téléphones les plus
     étroits (320px de large), 300px + 32px de décalage à droite
     dépassait légèrement du bord de l'écran. max-width en
     pourcentage de la fenêtre garantit que ça ne peut plus jamais
     arriver, quelle que soit la taille de l'écran. */
  max-width:calc(100vw - 48px);
  background:#fff;
  border:1px solid var(--shell-border);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(32,28,51,0.12);
  padding:var(--space-4);
  z-index:20;
}
.as-shell__notif-panel-title{ font-size:13px; font-weight:700; color:var(--shell-text); margin:0 0 var(--space-2-5); }
.as-shell__notif-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.as-shell__notif-item{
  font-size:12.5px;
  color:var(--shell-text);
  background:var(--shell-purple-soft);
  border-radius:8px;
  padding:var(--space-2-5) var(--space-3);
  line-height:1.4;
}
.as-shell__notif-empty{ font-size:12.5px; color:var(--shell-text-soft); }

.as-shell__screens{ padding:0; }

/* CORRIGÉ (28/07) — signalé le 28/07 : le document prévoit une vraie
   barre de navigation BASSE sur mobile (Dashboard, Mes analyses,
   Comparaison, Routine, Objectifs), pas une barre latérale devenue
   horizontale en haut — bien plus adapté au tactile et à l'espace
   d'un téléphone. Coquille en colonne : en-tête, contenu, puis barre
   basse fixe. */
@media (max-width:900px){
  .as-shell{ flex-direction:column; padding-bottom:var(--space-9); }
  .as-shell__sidebar{ display:none; }
  .as-shell__topbar{ flex-wrap:wrap; gap:var(--space-3); padding:var(--space-4-5) var(--space-5); }
}

/* AJOUTÉ (28/07) — barre de navigation basse mobile. */
.as-shell__bottom-nav{
  display:none;
  /* CORRIGÉ (31/07) — signalé le 31/07 : rendu en grille qui passe à
     la ligne au lieu d'une barre défilante horizontale, sur un
     appareil où ceci s'affichait pourtant bien avant — renforcé ici de
     façon explicite (jamais dépendre de la valeur par défaut) pour
     garantir un défilement horizontal quel que soit le nombre
     d'éléments, cause la plus probable étant un fichier CSS servi en
     cache périmé sur le site (même classe de problème déjà rencontrée
     et confirmée une fois sur ce projet avec un fichier JavaScript). */
  flex-wrap:nowrap;
  position:fixed;
  bottom:0; left:0; right:0;
  background:#fff;
  border-top:1px solid var(--shell-border);
  z-index:30;
  padding:var(--space-1-5) var(--space-1);
}
.as-shell__bottom-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  flex:1;
  background:none;
  border:none;
  padding:var(--space-1-5) 2px;
  font-size:10px;
  font-weight:600;
  color:var(--shell-text-soft);
  cursor:pointer;
}
.as-shell__bottom-nav-item svg{ width:20px; height:20px; }
/* CORRIGÉ (07/09) — même bug que .as-shell__nav-item ci-dessus
   (display:flex écrasait [hidden]) -- ENCORE PLUS critique ici : cette
   barre contient désormais 12 boutons au total (7 patient + 5
   expert), tous devraient normalement tenir à 6-7 visibles selon
   l'espace actif -- sans cette règle, les douze s'entassaient
   toujours ensemble, illisibles, quel que soit le rôle du compte. */
.as-shell__bottom-nav-item[hidden]{ display:none; }
.as-shell__bottom-nav-item.is-active{
  color:var(--shell-purple-deep);
  /* CORRIGÉ (31/07) — signalé le 31/07 : "il ne met pas de couleur
     pour montrer qu'on est sur X menu" — la règle existait déjà
     (changement de couleur du texte/icône), mais confirmée trop
     discrète pour être remarquée sur un petit bouton mobile,
     contrairement à la barre latérale qui remplit tout le fond du
     bouton actif. Ajout d'un fond doré léger, en pilule — même esprit
     que le reste du site, jamais un simple changement de couleur de
     texte qui passe inaperçu. */
  background:rgba(209,180,121,0.14);
  border-radius:12px;
}
@media (max-width:900px){
  /* CORRIGÉ (31/07) — signalé le 31/07 : 7 entrées (Évolution et
     Paramètres ajoutés) ne tiennent pas toutes confortablement sur un
     petit téléphone en largeur fixe — plutôt que d'en cacher, cette
     barre défile horizontalement UNIQUEMENT sur mobile (elle n'existe
     déjà que là, jamais sur desktop où la barre latérale reste
     entièrement visible sans le moindre défilement). */
  .as-shell__bottom-nav{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .as-shell__bottom-nav-item{ flex:0 0 auto; min-width:64px; }
}

/* AJOUTÉ (31/07) — filet de sécurité, voir le docblock complet dans
   scan-app-shell.js. Priorité renforcée (!important) volontaire et
   assumée ICI SEULEMENT : cette classe n'est posée par JavaScript que
   lorsque l'appareil est confirmé tactile, jamais par défaut — donc
   jamais un risque de casser l'affichage desktop normal, qui ne reçoit
   jamais cette classe. */
.as-shell--force-mobile{ flex-direction:column !important; padding-bottom:var(--space-9) !important; }
.as-shell--force-mobile .as-shell__sidebar{ display:none !important; }
.as-shell--force-mobile .as-shell__bottom-nav{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
.as-shell--force-mobile .as-shell__bottom-nav-item{ flex:0 0 auto !important; min-width:64px !important; }

/* ==========================================================================
   AJOUTÉ (27/07) — refonte du Dashboard en grille de cartes, calquée
   précisément sur la maquette fournie (couleurs, espacements).
   ========================================================================== */

/* CORRIGÉ (26/08) — signalé en conditions réelles (capture d'écran à
   l'appui, écran "Créer mon compte de suivi") : le titre disparaissait
   entièrement sous la barre de navigation. Cause réelle, mesurée avec
   Playwright plutôt que supposée : .as-topbar (position:absolute)
   mesure 84px de hauteur réelle, contre seulement 28px de remplissage
   supérieur ici -- un écart de 56px qui expliquait exactement le
   recouvrement. .as-dash est partagé par plusieurs écrans du module
   Follow-up (Dashboard, Objectifs, Paramètres...) -- corrigé à la
   source pour prévenir la même erreur ailleurs, jamais un correctif
   isolé au seul écran signalé. Marge de sécurité incluse pour le cas
   où la barre passe sur deux lignes (sélecteur de langue + bouton
   compte, voir scan-i18n.js) sur un écran de largeur intermédiaire. */
.as-dash{ padding:150px var(--space-7) 60px; }
/* AJOUTÉ (28/08) — signalé en creusant le chevauchement du bouton
   "Revenir au rapport" une seconde fois : ce correctif de 110px (voir
   son propre docblock plus haut) protège contre .as-topbar
   (position:absolute), mais l'écran Dashboard n'inclut JAMAIS cette
   barre -- il vit dans .as-shell, dont son propre en-tête
   (.as-shell__topbar, ~88px) est déjà dans le flux normal du
   document, jamais en superposition. Sans ce correctif ciblé, ce
   même 110px s'ajoutait EN PLUS de ces 88px déjà comptés
   normalement -- un espace excessif au-dessus du bouton retour,
   jamais un chevauchement ici, mais un vrai défaut visuel tout de
   même. Revenu à une valeur normale, spécifique à cet écran. */
#as-screen-dashboard .as-dash{ padding-top:var(--space-6-5); }
.as-dash__back-link{ width:auto; display:inline-flex; align-items:center; gap:var(--space-1-5); margin-bottom:var(--space-4); }

/* AJOUTÉ (31/07) — signalé le 31/07 : message bref quand "Revenir au
   rapport" n'a rien à montrer — jamais une page vide silencieuse. */
.as-back-link-empty-msg{
  display:inline-block; margin-left:var(--space-2-5); font-size:12px; color:var(--shell-text-soft, #5E6472);
  font-style:italic;
}
.as-dash__loading, .as-dash__error{ color:var(--shell-text-soft); font-size:14px; }
.as-dash__error{ color:var(--red, #c5494e); }

/* AJOUTÉ (31/07) — écran "Compte" (connexion/inscription). */
/* CORRIGÉ (17/08) — signalé le 17/08 : "le inline space des box ne
   permettent pas de visualiser clairement" -- capture d'écran montrant
   le menu déroulant d'un champ presque collé au libellé du champ
   suivant. 14px entre deux champs, 6px entre un libellé et sa propre
   boîte : techniquement présent, mais visuellement trop serré en
   pratique, en particulier entre deux <select> qui se suivent (rendu
   navigateur plus compact qu'un champ texte). Espacement nettement
   renforcé -- jamais une simple retouche marginale. */
.as-account-gate__field{ margin-bottom:26px; }
.as-account-gate__field label{ display:block; font-size:12px; font-weight:600; color:var(--shell-text-soft); margin-bottom:10px; }
.as-account-gate__field input,
.as-account-gate__field select{
  width:100%; padding:11px var(--space-3-5); border-radius:12px; border:1px solid var(--shell-border);
  /* CORRIGÉ (31/07) — même cause que .as-identity-form__input plus
     haut : sous 16px, Safari iPhone zoome automatiquement la page au
     focus — c'était ça, "l'affichage n'est pas très correct" sur ce
     formulaire précis. */
  font-size:16px; color:var(--shell-text); background:#fff;
  font-family:inherit;
  box-sizing:border-box;
}
/* AJOUTÉ (28/08) — signalé de nouveau, "ça ne marche pas toujours" :
   même reconstruction exhaustive que .as-identity-form__input --
   height/min-height fixées ensemble, line-height explicite, overflow
   explicite. Séparé du bloc input+select ci-dessus (jamais fusionné) :
   le champ input fonctionnait déjà bien, seul le select avait besoin
   de ces propriétés supplémentaires. */
.as-account-gate__field select{
  height:52px;
  min-height:52px;
  padding-top:0;
  padding-bottom:0;
  line-height:normal;
  overflow:visible;
}
.as-account-gate__field input:focus,
.as-account-gate__field select:focus{ outline:none; border-color:var(--shell-purple-deep); }
.as-account-gate__switch{ text-align:center; font-size:13px; color:var(--shell-text-soft); margin:var(--space-4) 0 0; }
/* AJOUTÉ (17/08) — signalé le 17/08 : "se connecter devrait plutôt
   être vers le haut". Positionné maintenant juste sous le sous-titre,
   avant le formulaire -- marge inversée par rapport à la version du
   bas (l'espace sépare maintenant CE qui suit, jamais ce qui précède,
   déjà géré par la marge du sous-titre juste au-dessus). */
.as-account-gate__switch--top{ margin:0 0 var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--shell-border); }
.as-account-gate__switch button{
  background:none; border:none; color:var(--shell-purple-deep); font-weight:700; cursor:pointer;
  text-decoration:underline; font-size:13px; margin-left:var(--space-1);
}

.as-dash__grid{
  display:grid;
  /* CORRIGÉ (28/07) — signalé le 28/07 : suit maintenant la structure
     précise du document (colonne centrale ~820px pour les cartes
     larges de 420px, colonne droite ~360px pour les cartes étroites)
     — plus une simple grille à 3 colonnes égales. Zones nommées
     explicitement, une par carte, pour un placement prévisible plutôt
     que de compter sur le flux automatique. */
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,0.82fr);
  /* CORRIGÉ (11/08) — signalé le 11/08 : "produit que vous utilisez et
     recommandations personnalisées doivent venir avant activité
     récente". "activity" repoussée après products/recommendation ici
     aussi, pour rester cohérent avec le correctif mobile (voir plus
     bas) — jamais un ordre qui ne serait juste que sur une seule
     largeur d'écran. */
  grid-template-areas:
    "scan scan goals"
    "insight insight insight"
    "routine routine routine"
    "products products products"
    "recommendation recommendation recommendation"
    "activity activity activity";
  gap:var(--space-5);
  align-items:start;
}
.as-dash-card--insight{ grid-area: insight; }
.as-dash-card--insight{
  background:#fff;
  border-color:var(--gold, #d1b479);
}
.as-dash-insight__top{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.as-dash-insight__ring{
  flex-shrink:0; width:76px; height:76px; border-radius:50%;
  border:3px solid var(--gold, #d1b479); display:flex; align-items:center; justify-content:center;
  background:var(--gold-soft, #f7f1e4);
}
.as-dash-insight__ring span{ font-size:26px; color:var(--gold-deep, #a4802f); }
.as-dash-insight__top-text{ flex:1; min-width:200px; }
.as-dash-insight__headline{ font-size:19px; font-weight:800; color:var(--shell-text, #121314); margin:0 0 var(--space-1); }
.as-dash-insight__detail{ font-size:13.5px; color:var(--shell-text-soft, #5E6472); margin:0; }

.as-dash-insight__score{
  text-align:center; flex-shrink:0;
  /* CORRIGÉ (31/07) — signalé le 31/07 : "score actuel et vs dernier
     scan — ces deux textes ne sont pas alignés du tout". Cause réelle :
     le bloc voisin ".as-dash-insight__delta" contient un élément de
     plus (le petit cercle avec la flèche), le rendant plus haut —
     centrer chaque bloc sur SA PROPRE hauteur (align-items:center du
     parent) alignait donc leurs milieux, jamais leurs étiquettes du
     bas. Corrigé ICI, uniquement sur ces deux blocs précis (jamais sur
     tout le conteneur parent, qui affecterait aussi l'icône ronde
     voisine) — alignés sur leur bas commun, où les étiquettes se
     trouvent toujours. */
  align-self:flex-end;
}
.as-dash-insight__score-value{ display:block; font-size:34px; font-weight:800; color:var(--gold-deep, #a4802f); line-height:1; }
.as-dash-insight__score-label{ display:block; font-size:11.5px; color:var(--shell-text-soft); margin-top:var(--space-1); white-space:nowrap; }

.as-dash-insight__delta{ text-align:center; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:var(--space-1); align-self:flex-end; }
/* CORRIGÉ (22/08) — même bug que .as-dash-decision-banner et
   .as-dash-quota-bar, trouvé le même jour par recherche systématique
   sur tout le fichier. */
.as-dash-insight__delta[hidden]{ display:none; }
.as-dash-insight__delta-value{ font-size:26px; font-weight:800; line-height:1; }
.as-dash-insight__delta.is-positive .as-dash-insight__delta-value{ color:#2f9e63; }
.as-dash-insight__delta.is-negative .as-dash-insight__delta-value{ color:#c5494e; }
.as-dash-insight__delta-circle{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; border:1.5px solid currentColor;
}
.as-dash-insight__delta.is-positive .as-dash-insight__delta-circle{ color:#2f9e63; }
.as-dash-insight__delta.is-negative .as-dash-insight__delta-circle{ color:#c5494e; }
.as-dash-insight__delta-label{ font-size:11px; color:var(--shell-text-soft); white-space:nowrap; }

.as-dash-insight__divider{ height:1px; background:var(--shell-border); margin:var(--space-5) 0; }
.as-dash-insight__synthesis-label{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gold-deep, #a4802f); margin:0 0 var(--space-3-5);
}

/* AJOUTÉ (31/07) — barres "Évolution par rapport au début", réelles,
   remplacent le texte de synthèse — voir INSIGHT_BARS dans
   scan-dashboard.js pour la correspondance métrique. */
#as-dash-insight-bars{ display:flex; flex-direction:column; gap:var(--space-3-5); }
.as-dash-insight-bar{ display:grid; grid-template-columns:24px 190px 1fr 90px; align-items:center; gap:var(--space-3); }
.as-dash-insight-bar__icon{ font-size:15px; text-align:center; }
/* CORRIGÉ (31/07) — signalé le 31/07 : le pourcentage pourrait se
   mettre à droite du libellé, alignés. Le libellé et son pourcentage
   sont désormais deux éléments séparés (voir buildInsightBar() dans
   scan-dashboard.js) — cette ligne les espace, le pourcentage
   toujours poussé au bord droit de la colonne "label" de la grille,
   jamais collé au texte comme avant. */
.as-dash-insight-bar__label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); min-width:0; }
.as-dash-insight-bar__label{ font-size:13.5px; font-weight:600; color:var(--shell-text); white-space:nowrap; }
.as-dash-insight-bar__pct{ font-size:13.5px; white-space:nowrap; }
.as-dash-insight-bar__pct.is-positive{ color:#2f9e63; font-weight:800; }
.as-dash-insight-bar__pct.is-negative{ color:#c5494e; font-weight:800; }
.as-dash-insight-bar__track{ height:8px; border-radius:999px; background:var(--shell-bg); overflow:hidden; display:block; }
.as-dash-insight-bar__fill{ display:block; height:100%; border-radius:999px; }
.as-dash-insight-bar__values{ display:flex; align-items:center; justify-content:flex-end; gap:var(--space-1-5); white-space:nowrap; }
.as-dash-insight-bar__value{ font-size:14px; font-weight:800; }
.as-dash-insight-bar__value-before{ font-size:12px; color:var(--shell-text-soft); }
.as-dash-insight-bar__value-before::before{ content:"(avant "; }
.as-dash-insight-bar__value-before::after{ content:")"; }

.as-dash-insight__footer{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  margin-top:var(--space-5); padding:var(--space-4) var(--space-4-5); border:1px solid var(--shell-border); border-radius:12px;
}
.as-dash-insight__footer p{ font-size:13px; color:var(--shell-text-soft); margin:0; }
.as-dash-insight__footer strong{ color:var(--gold-deep, #a4802f); }

@media (max-width:640px){
  /* CORRIGÉ (31/07) — signalé le 31/07 : "vs dernier scan" pourrait se
     mettre à droite de "Score actuel" et parfaitement alignés". Reste
     en ligne flexible (comme sur bureau) plutôt que forcé en colonne —
     l'icône+texte occupe naturellement toute la largeur disponible et
     passe à la ligne, entraînant score+delta ensemble sur leur propre
     ligne, côte à côte, sans jamais les empiler individuellement. */
  .as-dash-insight__top{ align-items:flex-start; }
  .as-dash-insight__top-text{ flex-basis:100%; }
  .as-dash-insight__score, .as-dash-insight__delta{ align-self:flex-start; }
  /* AJOUTÉ (31/07) — signalé le 31/07 : "bien centralisé afin d'être
     visibles pour prendre la taille de l'écran" — score et delta
     grandissent maintenant chacun pour occuper la moitié de la
     largeur disponible (au lieu de rester collés l'un à l'autre au
     centre), leur contenu déjà centré (text-align:center hérité)
     profitant enfin de tout l'espace de l'écran. */
  .as-dash-insight__score, .as-dash-insight__delta{ flex:1; }
  .as-dash-insight-bar{ grid-template-columns:20px 1fr; grid-template-areas:"icon label" "icon track" "icon values"; row-gap:var(--space-1); }
  .as-dash-insight-bar__icon{ grid-area:icon; }
  .as-dash-insight-bar__label-row{ grid-area:label; }
  .as-dash-insight-bar__track{ grid-area:track; margin-bottom:2px; }
  /* CORRIGÉ (31/07) — signalé le 31/07 : "+310%8621" — les valeurs
     étaient réelles (vérifié : 310% correspond bien à (86-21)/21),
     mais s'affichaient collées l'une à l'autre faute d'espace assigné
     sur mobile. Les deux nombres sont maintenant regroupés dans un
     seul élément côté JS (voir buildInsightBar() dans
     scan-dashboard.js) — un seul élément à placer, plus de risque de
     chevauchement. */
  .as-dash-insight-bar__values{ grid-area:values; justify-content:flex-end; }
  .as-dash-insight__footer{ flex-direction:column; align-items:stretch; text-align:center; }
}

/* AJOUTÉ (31/07) — alertes (uniquement affichées si nécessaire). */
.as-dash-alert{
  display:flex; align-items:flex-start; gap:var(--space-2-5); padding:var(--space-3) var(--space-3-5); border-radius:12px;
  background:#fdf3e2; color:#7a5a00; font-size:12.5px; line-height:1.5; margin-bottom:var(--space-3);
}
.as-dash-alert__icon{ flex-shrink:0; }

/* AJOUTÉ (31/07) — récompenses/étapes atteintes. */
.as-dash-rewards{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3-5); padding-top:var(--space-3-5); border-top:1px solid var(--shell-border); }
.as-dash-rewards:empty{ display:none; border-top:none; margin-top:0; padding-top:0; }
.as-dash-reward{
  display:inline-flex; align-items:center; gap:var(--space-1-5); padding:var(--space-1-5) var(--space-3); border-radius:100px;
  background:var(--evo-accent-soft, #f7f1e4); color:var(--evo-accent-deep, #a4802f); font-size:11.5px; font-weight:700;
}
.as-dash-card--last-scan{ grid-area: scan; }
.as-dash-card--goals{ grid-area: goals; }
.as-dash-card--routine{ grid-area: routine; }
.as-dash-card--products-used{ grid-area: products; }
.as-dash-card--recommendation{ grid-area: recommendation; }
.as-dash-card--activity{ grid-area: activity; }
/* AJOUTÉ (28/07) — signalé le 28/07 : hauteurs minimales cohérentes
   par ligne, tirées du document (320px pour la première ligne et la
   colonne Objectifs/Routine, alignées avec leurs voisines) — pour que
   les cartes d'une même ligne s'alignent proprement plutôt que
   d'avoir des hauteurs disparates. Reste un MINIMUM, jamais une
   troncature : une carte au contenu plus long grandit normalement. */
.as-dash-card--last-scan,
.as-dash-card--goals,
.as-dash-card--routine,
.as-dash-card--activity{
  min-height:320px;
}
/* CORRIGÉ (27/07) — même bug que .as-shell ci-dessus (voir son
   commentaire) : sans cette règle, l'attribut hidden n'aurait aucun
   effet une fois les données chargées puis masquées à nouveau. */
.as-dash__grid[hidden]{ display:none; }

.as-dash-card{
  background:#fff;
  min-width:0;
  /* CORRIGÉ (31/07) — migré vers --space-6 (24px, valeur identique)
     lors de la mise en place de l'échelle d'espacement — voir sa
     définition complète dans les jetons racine. */
  border-radius:18px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  /* Transitions du document — 300ms, +3px au survol (voir plus bas). */
  transition:box-shadow 300ms ease, transform 300ms ease;
}
.as-dash-card:hover{
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  transform:translateY(-3px);
}
.as-dash-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* CORRIGÉ (31/07) — signalé le 31/07 : le nouveau bouton "Ajouter au
     panier" sur l'écran Routine a besoin de pouvoir passer à la ligne
     sur petit écran plutôt que de déborder — safe pour les autres
     écrans qui utilisent cette même règle partagée (Dashboard,
     Paramètres...) : ne change rien tant que le contenu tient déjà
     sur une ligne. */
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-bottom:var(--space-3-5);
}
.as-dash-card__header h2{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  color:var(--shell-text);
  margin:0;
}
.as-dash-card__date{ font-size:11.5px; color:var(--shell-text-soft); }
.as-dash-card__cta{
  margin-top:auto;
  padding-top:var(--space-3-5);
  background:none;
  border:1.5px solid var(--shell-purple);
  color:var(--shell-purple);
  border-radius:10px;
  padding:var(--space-2-5) var(--space-3-5);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  display:block;
}
.as-dash-card__cta:hover{ background:var(--shell-purple-soft); }
.as-dash-card__cta--ghost{ border-style:dashed; }
/* AJOUTÉ (02/09) — voir le docblock complet juste au-dessus
   (.as-lib-card__actions) : jamais défini jusqu'ici malgré son usage
   dans scan-my-analyses.js, laissant ce second bouton identique au
   premier -- couleur neutre plutôt que la couleur principale, pour
   distinguer visuellement l'action secondaire ("Partager") de
   l'action principale ("Voir le rapport"). */
.as-dash-card__cta--secondary{ border-color:var(--ink-30, #b8b3a5); color:var(--ink-70, #4a4740); }
.as-dash-card__cta--secondary:hover{ background:var(--cream-soft, #f2ede1); }

/* Carte Dernier scan */
.as-dash-last-scan__body{ display:flex; gap:var(--space-4); margin-bottom:var(--space-4); }
.as-dash-last-scan__photo{ width:120px; height:120px; border-radius:50%; object-fit:cover; object-position:center; background:var(--shell-bg); flex-shrink:0; }
.as-dash-last-scan__info{ flex:1; min-width:0; }
.as-dash-last-scan__gshs-label{ font-size:11px; color:var(--shell-text-soft); margin:0 0 var(--space-1); }
.as-dash-last-scan__gshs-row{ display:flex; align-items:center; gap:var(--space-1-5); }
/* CORRIGÉ (28/07) — 54px du document (était 32px). */
.as-dash-last-scan__gshs-value{ font-size:54px; font-weight:800; color:var(--shell-text); line-height:1; }
.as-dash-last-scan__gshs-suffix{ font-size:32px; color:var(--shell-text-soft); }
.as-dash-last-scan__ring{ position:relative; width:60px; height:60px; margin-left:auto; }
.as-dash-last-scan__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.as-dash-last-scan__ring-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#4CAF50; }
.as-dash-last-scan__delta{ font-size:12.5px; margin:var(--space-1-5) 0 0; font-weight:600; }
.as-dash-last-scan__delta.is-positive{ color:#2f9e63; }
.as-dash-last-scan__delta.is-negative{ color:var(--red, #c5494e); }
.as-dash-last-scan__meta{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-4); padding-top:var(--space-3-5); border-top:1px solid var(--shell-border); }
.as-dash-last-scan__meta-label{ font-size:10.5px; color:var(--shell-text-soft); margin:0 0 3px; }
.as-dash-last-scan__meta-value{ font-size:13px; font-weight:600; color:var(--shell-text); margin:0; }
/* AJOUTÉ (28/07) — badge type de peau, fond doré exact du document. */
.as-dash-badge--skin-type{
  display:inline-block;
  background:#d1b479;
  color:#3a2f1a;
  padding:3px var(--space-2-5);
  border-radius:100px;
  font-size:12px;
  font-weight:700;
}

/* AJOUTÉ (31/07) — badges colorés pour "États dominants", remplace
   l'ancien texte brut ("hyperpigmentation, rougeurs"). Trois paliers
   de sévérité réelle, mêmes seuils que le badge de vigilance ailleurs
   dans ce projet (jamais un seuillage inventé pour cet endroit précis). */
#as-dash-last-scan-states{ display:flex; flex-wrap:wrap; gap:var(--space-1-5); }
.as-dash-state-badge{
  display:inline-block; padding:var(--space-1) 11px; border-radius:100px; font-size:11.5px; font-weight:700;
}
.as-dash-state-badge.is-good{ background:#edf9f1; color:#1a7a1a; }
.as-dash-state-badge.is-warning{ background:#fdf3e2; color:#996800; }
.as-dash-state-badge.is-bad{ background:#fbeaea; color:#b32d2e; }
.as-dash-state-badge.is-neutral{ background:var(--shell-bg); color:var(--shell-text-soft); }

/* Carte Objectifs */
.as-dash-goal{ margin-bottom:var(--space-4); position:relative; }
.as-dash-goal__row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-1-5); gap:var(--space-2); }
.as-dash-goal__label{ font-size:13px; font-weight:600; color:var(--shell-text); flex:1; }
.as-dash-goal__pct{ font-size:13px; font-weight:700; color:var(--shell-purple); }
.as-dash-goal__bar{ height:10px; background:var(--shell-bg); border-radius:100px; overflow:hidden; }
.as-dash-goal__bar-fill{ height:100%; background:var(--shell-purple); border-radius:100px; }
.as-dash-goal__meta{ font-size:11px; margin-top:5px; }
.as-dash-goal__extra{ font-size:10.5px; color:var(--shell-text-soft); margin:var(--space-1) 0 0; }
.as-dash-goals__empty{ font-size:13px; color:var(--shell-text-soft); }

/* AJOUTÉ (31/07) — signalé le 31/07 : "sur le dashboard on doit
   pouvoir supprimer les objectifs aussi" — même style de menu "..."
   déjà éprouvé sur l'écran Objectifs, jamais une seconde palette. */
.as-dash-goal__menu-btn{
  background:none; border:none; font-size:18px; color:var(--shell-text-soft); cursor:pointer;
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
}
.as-dash-goal__menu-btn:hover{ background:var(--shell-bg); }
.as-dash-goal__menu{
  position:absolute; top:26px; right:0; z-index:5; background:#fff; border:1px solid var(--shell-border);
  border-radius:10px; box-shadow:0 8px 24px rgba(23,20,15,0.14); overflow:hidden; min-width:130px;
}
.as-dash-goal__menu button{
  display:block; width:100%; text-align:left; padding:9px var(--space-3); font-size:12.5px; font-weight:600;
  color:#c5494e; background:none; border:none; cursor:pointer;
}
.as-dash-goal__menu button:hover{ background:var(--shell-bg); }

/* Carte Ma routine actuelle */
.as-dash-routine__tabs{ display:flex; gap:var(--space-1-5); background:var(--shell-bg); border-radius:10px; padding:var(--space-1); margin-bottom:var(--space-4); }
.as-dash-routine__tab{ flex:1; padding:var(--space-2); border:none; background:none; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--shell-text-soft, #5E6472); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.as-dash-routine__tab svg{ width:14px; height:14px; flex-shrink:0; }
/* CORRIGÉ (11/08) — signalé le 11/08 : réutilisées sur le Rapport
   ("voir les deux options matin et soir comme dans le dashboard"), ces
   classes n'étaient jamais scopées qu'à l'intérieur de .as-shell (voir
   sa déclaration de --shell-text/--shell-text-soft plus haut) — le
   Rapport n'en fait pas partie. Sans valeur de repli, --shell-text
   restait indéfini dans ce nouveau contexte, et le NAVIGATEUR
   résolvait silencieusement vers une AUTRE variable en portée plus
   large (--text-primary, #fff dans ce contexte sombre) — texte blanc
   sur fond blanc (l'onglet actif a background:#fff) pour l'onglet
   actif, confirmé quasi invisible par mesure réelle (Playwright)
   avant ce correctif. Valeurs de repli ajoutées directement dans les
   appels var() : aucun changement sur le Dashboard (où la variable
   est déjà définie et prend toujours le dessus), lisible partout
   ailleurs désormais.
   CORRIGÉ (14/08) — signalé le 14/08, maquette de référence à
   l'appui : l'onglet actif ("Matin" par défaut) doit se distinguer
   clairement par la couleur de marque (--gold), pas seulement un
   fond blanc discret sur fond déjà clair — à peine visible en un
   coup d'œil. Blanc remplacé par --gold (texte blanc dessus pour un
   bon contraste, vérifié lisible), cohérent avec le bouton "Ajouter
   la routine au panier" qui utilise déjà cette même couleur ailleurs
   sur cet écran (voir .as-btn-pill--gold). */
.as-dash-routine__tab.is-active{ background:var(--gold); color:#fff; box-shadow:0 1px 4px rgba(201,162,75,0.45); }
.as-dash-routine__steps{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3-5); }
.as-dash-routine__step{ background:var(--shell-bg); border-radius:10px; padding:var(--space-2-5) var(--space-3); flex:1; min-width:140px; text-align:center; }
.as-dash-routine__step-name{ font-size:11px; font-weight:600; color:var(--shell-text); margin:0; }
.as-dash-routine__arrow{ color:var(--shell-text-soft); }
.as-dash-routine__hint{ font-size:11.5px; color:var(--shell-text-soft); margin:0; }

/* Carte Produits utilisés */
.as-dash-products__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2-5); }
.as-dash-product-used{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-2-5) 0; border-bottom:1px solid var(--shell-border); }
.as-dash-product-used:last-child{ border-bottom:none; }
.as-dash-product-used__name{ font-size:12.5px; font-weight:600; color:var(--shell-text); margin:0; }
.as-dash-product-used__days{ font-size:11px; color:var(--shell-text-soft); margin:2px 0 0; }
.as-dash-product-used__badge{ background:#edf9f1; color:#1a7a1a; font-size:10.5px; font-weight:700; border-radius:100px; padding:3px 9px; }

/* Carte Recommandations */
/* CORRIGÉ (14/08) — signalé le 14/08 : cette carte ne montrait qu'un
   seul produit ; voir renderRecommendation() dans scan-dashboard.js,
   reconstruite pour en afficher autant que la routine en recommande
   réellement. .as-dash-recommendation__row absorbe n'importe quel
   nombre de cartes SANS jamais casser la mise en page : défilement
   horizontal (overflow-x:auto) plutôt qu'un empilement qui
   déborderait de la carte du Dashboard, chaque produit gardant une
   largeur fixe et lisible (jamais écrasé pour "faire tenir" tout le
   monde). scroll-snap pour un défilement propre au doigt sur mobile
   comme à la molette sur desktop. */
.as-dash-recommendation__row{
  display:flex;
  gap:var(--space-4);
  overflow-x:auto;
  padding-bottom:var(--space-2);
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.as-dash-recommendation__row::-webkit-scrollbar{ height:6px; }
.as-dash-recommendation__row::-webkit-scrollbar-thumb{ background:var(--border-card-soft, rgba(0,0,0,0.12)); border-radius:100px; }
.as-dash-recommendation__card{
  text-align:center;
  flex:0 0 auto;
  width:150px;
  scroll-snap-align:start;
}
/* AJOUTÉ (28/07) — signalé le 28/07 : carte cliquable + image. */
.as-dash-recommendation__link{ text-decoration:none; color:inherit; display:block; }
.as-dash-recommendation__img{ width:100%; max-width:140px; aspect-ratio:1; object-fit:cover; border-radius:12px; margin:0 auto var(--space-3); display:block; background:var(--shell-bg); }
.as-dash-recommendation__name{ font-size:14px; font-weight:700; color:var(--shell-text); margin:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.as-dash-recommendation__brand{ font-size:11.5px; color:var(--shell-text-soft); margin:2px 0 var(--space-2); }
.as-dash-recommendation__desc{ font-size:12px; color:var(--shell-text-soft); margin:0 0 var(--space-2); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.as-dash-recommendation__price{ font-size:15px; font-weight:700; color:var(--shell-purple); margin:0 0 var(--space-3-5); }

/* Carte Activité récente */
.as-dash-activity__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.as-dash-activity__item{ padding-bottom:var(--space-3); border-bottom:1px solid var(--shell-border); }
.as-dash-activity__item:last-child{ border-bottom:none; padding-bottom:0; }
.as-dash-activity__label{ font-size:12.5px; font-weight:600; color:var(--shell-text); margin:0; }
.as-dash-activity__date{ font-size:11px; color:var(--shell-text-soft); margin:2px 0 0; }
/* AJOUTÉ (28/07) — signalé le 28/07 : activité cliquable + voir plus. */
.as-dash-activity__item.is-clickable{ cursor:pointer; border-radius:8px; margin:0 -8px; padding:var(--space-2) var(--space-2) var(--space-3); }
.as-dash-activity__item.is-clickable:hover{ background:var(--shell-bg); }
.as-dash-activity__more-wrap{ border-bottom:none !important; padding-top:2px; }
.as-dash-activity__more{
  width:100%;
  background:none;
  border:1px dashed var(--shell-border);
  border-radius:8px;
  padding:var(--space-2);
  font-size:12px;
  font-weight:600;
  color:var(--shell-purple-deep);
  cursor:pointer;
}
.as-dash-activity__more:hover{ background:var(--shell-purple-soft); }

/* CORRIGÉ (31/07) — signalé le 31/07 : images de produits trop
   miniaturisées (36px et 32px) partout où elles apparaissent dans le
   Follow-up Module — à peine visibles. Agrandies nettement, avec une
   bordure légère pour bien les détacher du fond, sans changer la
   structure HTML existante (juste les dimensions et la présentation). */
.as-dash-product-used__link{ display:flex; align-items:center; gap:var(--space-4-5); text-decoration:none; color:inherit; flex:1; min-width:0; }
.as-dash-product-used__img{
  width:112px; height:112px; border-radius:18px; object-fit:cover; background:var(--shell-bg); flex-shrink:0;
  border:1px solid var(--shell-border);
}

/* AJOUTÉ (28/07) — image sur les étapes de routine, quand une
   correspondance produit a été trouvée (voir docblock serveur). */
.as-dash-routine__step-img{
  width:96px; height:96px; border-radius:18px; object-fit:cover; margin:0 auto var(--space-2); display:block;
  border:1px solid var(--shell-border);
}
a.as-dash-routine__step{ text-decoration:none; color:inherit; }

/* CORRIGÉ (31/07) — as-dash-routine__done n'avait aucun style : le
   texte "✓ Routine complétée aujourd'hui" s'affichait par défaut, sans
   forme ni couleur. */
.as-dash-routine__done{
  display:inline-block; font-size:12.5px; font-weight:700; color:#1a7a1a;
  background:#edf9f1; border-radius:999px; padding:var(--space-1-5) var(--space-3-5); margin-top:var(--space-2-5);
}

@media (max-width:1200px){
  .as-dash__grid{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    /* CORRIGÉ (11/08) — même correctif que la largeur mobile
       ci-dessous, voir son commentaire complet. */
    grid-template-areas:
      "scan goals"
      "insight insight"
      "routine routine"
      "products products"
      "recommendation recommendation"
      "activity activity";
  }
}
@media (max-width:720px){
  /* CORRIGÉ (26/08) — signalé en conditions réelles : cette règle
     mobile écrasait le correctif appliqué à la règle par défaut de
     .as-dash (110px, voir son propre commentaire plus haut), jamais
     mise à jour en même temps -- exactement la même barre de
     navigation absolue à éviter de recouvrir, jamais une raison
     valable d'avoir une valeur différente ici. */
  .as-dash{ padding:150px var(--space-4) 40px; }
  .as-dash__grid{
    grid-template-columns: minmax(0,1fr);
    /* CORRIGÉ (11/08) — signalé le 11/08 : "produit que vous utilisez
       et recommandations personnalisées doivent venir avant activité
       récente, notamment sur mobile". L'ordre dans le HTML source
       était déjà correct (products/recommendation avant activity) —
       c'est cette grille avec zones nommées qui les repositionnait
       visuellement, "activity" placée avant "products" ici alors que
       le HTML dit l'inverse. Jamais une propriété order isolée qui
       aurait pu se retrouver incohérente avec une future modification
       du HTML — la zone nommée reste la référence unique. */
    grid-template-areas:
      "scan"
      "goals"
      "insight"
      "routine"
      "products"
      "recommendation"
      "activity";
  }
}

/* AJOUTÉ (28/07) — signalé le 27/07 : WordPress (wpautop) insère des
   <p></p> vides entre les balises de bloc quand une ligne vide existe
   dans le HTML source — corrigé à la source (lignes vides retirées de
   tous les templates de suivi). Cette règle est une protection
   défensive supplémentaire : si un <p></p> vide apparaît malgré tout
   (venant d'un autre maillon de la chaîne de rendu WordPress, hors de
   notre contrôle direct), il ne doit jamais devenir une cellule de la
   grille ni pousser les cartes visuellement. */
.as-dash__grid > p:empty,
.as-shell__screens > p:empty{
  display:none;
}

/* ==========================================================================
   AJOUTÉ (28/07) — refonte complète de "Mes analyses", calquée sur le
   document fourni : en-tête, KPI, graphique global + sparklines,
   filtres, chronologie par année avec grandes cartes.
   ========================================================================== */

.as-lib-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-5);
  margin-bottom:var(--space-5);
  flex-wrap:wrap;
}
.as-lib-header__titles h1{ font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--shell-text); margin:0 0 var(--space-1); }
.as-lib-header__titles p{ font-size:13px; color:var(--shell-text-soft); margin:0; }
.as-lib-header__stats{ font-weight:600; margin-top:var(--space-1) !important; color:var(--shell-text) !important; }
.as-lib-header__actions{ display:flex; gap:var(--space-2-5); flex-shrink:0; }

.as-lib-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  margin-bottom:var(--space-5);
  flex-wrap:wrap;
}
.as-lib-toolbar__filters{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.as-lib-filter{
  padding:7px var(--space-3-5);
  border-radius:100px;
  border:1px solid var(--shell-border);
  background:#fff;
  font-size:12.5px;
  font-weight:600;
  color:var(--shell-text-soft);
  cursor:pointer;
}
.as-lib-filter.is-active{ background:var(--shell-purple-deep); border-color:var(--shell-purple-deep); color:#fff; }
.as-lib-filter:hover:not(.is-active){ border-color:var(--shell-purple-deep); }
.as-lib-search{
  flex:1;
  min-width:200px;
  max-width:340px;
  padding:9px var(--space-3-5);
  border-radius:10px;
  border:1px solid var(--shell-border);
  font-size:13px;
  background:#fff;
}

.as-lib-kpis{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-4);
  margin-bottom:var(--space-5);
}
.as-lib-kpi{
  background:#fff;
  border-radius:14px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:var(--space-4-5);
  text-align:center;
}
.as-lib-kpi__value{ font-size:26px; font-weight:800; color:var(--shell-purple-deep); margin:0 0 var(--space-1); }
.as-lib-kpi__label{ font-size:11.5px; color:var(--shell-text-soft); margin:0; }

.as-lib-global-chart{ margin-bottom:var(--space-4); }
.as-lib-global-chart__caption{ font-size:12.5px; color:var(--shell-text-soft); margin:-8px 0 var(--space-3); }
.as-lib-sparklines{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:var(--space-3-5);
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--shell-border);
}
.as-lib-sparkline svg{ width:100%; height:44px; display:block; }
.as-lib-sparkline__delta{ font-size:13px; font-weight:800; text-align:center; margin:var(--space-1-5) 0 0; }
.as-lib-sparkline__delta.is-positive{ color:#2f9e63; }
.as-lib-sparkline__delta.is-negative{ color:#c5494e; }
.as-lib-sparkline__delta.is-neutral{ color:var(--shell-text-soft); }
.as-lib-sparkline__label{ font-size:11px; color:var(--shell-text-soft); text-align:center; margin:var(--space-1) 0 0; }

.as-lib-condition-filter{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-5); }

.as-lib-year-header{
  font-size:15px;
  font-weight:700;
  color:var(--shell-text-soft);
  margin:var(--space-6) 0 var(--space-3);
  padding-bottom:var(--space-1-5);
  border-bottom:2px solid var(--shell-border);
}
.as-lib-year-header:first-child{ margin-top:0; }

.as-lib-card{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:var(--space-4) var(--space-5);
  margin-bottom:var(--space-3-5);
  cursor:pointer;
  transition:box-shadow 300ms ease, transform 300ms ease;
}
.as-lib-card:hover{ box-shadow:0 8px 28px rgba(0,0,0,.08); transform:translateY(-2px); }
.as-lib-card__photo{ width:90px; height:90px; border-radius:12px; object-fit:cover; background:var(--shell-bg); flex-shrink:0; }
.as-lib-card__info{ flex:1; min-width:0; }
.as-lib-card__date{ font-size:14px; font-weight:700; color:var(--shell-text); margin:0; }
.as-lib-card__time{ font-size:11.5px; color:var(--shell-text-soft); margin:2px 0 var(--space-2); }
.as-lib-badge{
  display:inline-block;
  background:#d1b479;
  color:#3a2f1a;
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:100px;
  margin:0 var(--space-1-5) var(--space-1) 0;
}
.as-lib-badge--etat{ background:var(--shell-bg); color:var(--shell-text-soft); }
.as-lib-card__etats{ display:inline; }
.as-lib-card__score{ text-align:center; flex-shrink:0; padding:0 var(--space-5); }
.as-lib-card__gshs{ display:block; font-size:32px; font-weight:800; color:var(--shell-text); }
.as-lib-card__trust{ display:block; font-size:10.5px; color:var(--shell-text-soft); margin-top:2px; }
.as-lib-card__actions{ flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
/* CORRIGÉ (02/09) — signalé le 02/09 avec capture à l'appui : "le css
   des deux boutons... ils sont collés les uns aux autres". Ce
   conteneur n'avait jamais reçu de disposition/espacement explicite,
   pensé à l'origine pour un seul bouton -- l'ajout du bouton
   "Partager avec un dermatologue" (voir scan-my-analyses.js) les
   laissait collés par défaut, sans le moindre espace entre eux. */

@media (max-width:1024px){
  .as-lib-kpis{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px){
  .as-lib-header{ flex-direction:column; }
  .as-lib-kpis{ grid-template-columns:1fr; }
  /* CORRIGÉ (31/07) — signalé le 31/07, avec capture à l'appui (texte
     illisible, caractère par caractère) : la photo (90px, flex-shrink:0)
     ET le bloc score (flex-shrink:0) refusaient tous deux de rétrécir,
     ne laissant que le texte central pour absorber toute la contrainte
     de largeur — résultat imprévisible selon la répartition des lignes
     par le navigateur. Même correctif déjà appliqué à la carte
     équivalente du Dashboard le 28/07 (.as-dash-last-scan__body), mais
     jamais fait ici : empilement vertical propre plutôt qu'un
     flex-wrap qui ne suffit pas avec deux éléments à largeur fixe.
     flex-wrap conservé ci-dessous par sécurité (n'a plus d'effet une
     fois en colonne, mais retiré uniquement si un jour cette carte
     redevient une rangée horizontale sur un palier intermédiaire). */
  .as-lib-card{ flex-direction:column; align-items:stretch; flex-wrap:wrap; }
  .as-lib-card__photo{ width:100%; height:140px; }
  .as-lib-card__score{ padding:0; margin-top:var(--space-2); text-align:left; display:flex; align-items:center; gap:var(--space-3); }
  .as-lib-toolbar{ flex-direction:column; align-items:stretch; }
  .as-lib-search{ max-width:none; }
}

/* AJOUTÉ (28/07) — signalé le 28/07 : ajustements pour très petits
   écrans de téléphone (< 480px), sur le Dashboard et l'en-tête. */
@media (max-width:480px){
  .as-dash-last-scan__body{ flex-direction:column; }
  /* CORRIGÉ (14/08) — border-radius explicite ajouté : sans lui,
     cette règle héritait du border-radius:50% de la règle de base
     (voir plus haut, corrigée le même jour pour un vrai cercle sur
     desktop où la photo est carrée 120x120) -- appliqué ici à une
     boîte 100%×140px non carrée, 50% aurait donné une ellipse plutôt
     qu'un arrondi propre. Valeur reprise de l'ancien border-radius
     desktop (12px), cohérente avec le style "bannière" de cette
     mise en page mobile en colonne. */
  .as-dash-last-scan__photo{ width:100%; height:140px; border-radius:12px; }
  .as-dash-last-scan__gshs-row{ justify-content:space-between; }
  .as-shell__topbar{ padding:var(--space-3-5) var(--space-4); }
  .as-shell__greeting{ font-size:22px; }
  .as-shell__subgreeting{ font-size:14px; }
  .as-shell__new-scan-btn{ min-width:0; padding:var(--space-2) var(--space-3); font-size:12px; }
  .as-shell__profile-name{ display:none; }
  .as-lib-sparklines{ grid-template-columns:repeat(2, 1fr); }
}

/* AJOUTÉ (28/07) — message d'erreur visible sur l'écran questionnaire. */
.as-questionnaire__error{
  font-size:13px;
  color:#c4523c;
  text-align:center;
  margin-top:var(--space-3-5);
}

/* ==========================================================================
   AJOUTÉ (28/07) — refonte complète de la page Comparaison, calquée
   sur le document fourni.
   ========================================================================== */

.as-lib-header__titles-sub{ font-size:13px; color:var(--shell-text-soft); margin:var(--space-1) 0 var(--space-5); }

/* ==========================================================================
   RÉÉCRIT (29/07) — page Comparaison alignée sur le document de
   conception fourni (13 sections). Accent VIOLET scopé à cette page
   uniquement (--comp-accent*, jamais --shell-purple-*) — voir docblock
   du partial PHP pour ce qui est volontairement omis (gain GSHS et
   confiance IA par produit, contribution GSHS par famille, grille de
   6 heatmaps individuelles, "Signal d'alerte").
   ========================================================================== */

/* ==========================================================================
   RÉÉCRIT (29/07, nuit) — grille CSS à 12 colonnes exacte fournie par
   l'utilisateur (marges 32px, gutter 20px, colonnes ≈81px à 1440px).
   Chaque section ci-dessous reprend précisément les colonnes et
   hauteurs indiquées. Accent VIOLET scopé à cette page uniquement.
   ========================================================================== */

#as-screen-comparison{
  /* CORRIGÉ (30/07, nuit) — unifié avec --shell-purple* (retour à
     #d1b479, même valeur partout). */
  --comp-accent: #d1b479;
  --comp-accent-deep: #a4802f;
  --comp-accent-soft: #f7f1e4;
}

/* Grille principale : 12 colonnes, gouttière 20px. Chaque section est
   pleine largeur (1→12) par défaut ; les répartitions internes
   (5/2/5, 4/4/4, 7/5, 8/4, 3×4...) sont posées par les grilles
   imbriquées de chaque bloc, ci-dessous. */
#as-comparison-content{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--space-5); }
#as-comparison-content > *{ grid-column:1 / -1; }

/* ---------- Sélection des scans (1→12, hauteur 90px) ---------- */
.as-comparator__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  flex-wrap:wrap;
  min-height:90px;
  margin-bottom:var(--space-5);
}
.as-comparator__selects{
  flex:1;
  min-width:280px;
  display:grid;
  grid-template-columns:5fr 2fr 5fr;
  align-items:end;
  gap:var(--space-5);
}
.as-comparator__arrow{ justify-self:center; align-self:center; font-size:20px; color:var(--comp-accent); }
.as-comparator__period{
  display:flex; align-items:center; gap:var(--space-2-5); background:#fff; border:1px solid var(--shell-border);
  border-radius:14px; padding:var(--space-3) var(--space-4-5); box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.as-comparator__period[hidden]{ display:none; }
.as-comparator__period-label{ font-size:11.5px; color:var(--shell-text-soft); display:block; }
.as-comparator__period-value{ font-size:16px; font-weight:800; color:var(--shell-text); }
.as-comparator__period-value strong{ font-weight:800; }
.as-comparator__period-detail{ font-size:12px; font-weight:500; color:var(--shell-text-soft); margin-left:var(--space-1-5); }

/* ---------- Résumé global (1→12, hauteur 180px, 6 KPI × 2 colonnes) ---------- */
.as-comp-kpis{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--space-5);
  min-height:180px;
}
.as-comp-kpi{
  grid-column:span 2;
  background:#fff;
  border-radius:18px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:var(--space-4);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:140px;
}
.as-comp-kpi__label{ font-size:11px; color:var(--shell-text-soft); margin:0 0 var(--space-1-5); }
.as-comp-kpi__value{ font-size:18px; font-weight:800; color:var(--shell-text); margin:0; }
.as-comp-kpi__delta{ font-size:11.5px; font-weight:700; margin:var(--space-1) 0 0; }
.as-comp-kpi__delta.is-positive{ color:#2f9e63; }
.as-comp-kpi__delta.is-negative{ color:#c5494e; }

.as-comp-kpi--ring{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2-5); }
.as-comp-kpi__ring{ width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.as-comp-kpi__ring-inner{ width:58px; height:58px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; text-align:center; line-height:1.2; }
.as-comp-kpi__ring-inner .is-positive{ color:#2f9e63; }
.as-comp-kpi__ring-inner .is-negative{ color:#c5494e; }
.as-comp-kpi__ring-inner span{ display:block; }
.as-comp-kpi__ring-sub{ font-size:9px; font-weight:600; color:var(--shell-text-soft); }

/* AJOUTÉ (30/07, nuit) — carte GSHS : Avant / badge / Après, voir
   docblock JS pour la raison du changement (anneau proportionnel au
   delta illisible pour une petite progression). */
.as-comp-kpi--gshs{ grid-column:span 2; }
.as-comp-kpi__gshs-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.as-comp-kpi__gshs-side{ display:flex; flex-direction:column; align-items:center; }
.as-comp-kpi__gshs-num{ font-size:20px; font-weight:800; color:var(--shell-text); }
.as-comp-kpi__gshs-sub{ font-size:10px; color:var(--shell-text-soft); }
.as-comp-kpi__gshs-badge{
  flex-shrink:0; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; border:3px solid #ECECEC;
}
.as-comp-kpi__gshs-badge.is-positive{ color:#2f9e63; border-color:#2f9e63; background:#edf9f1; }
.as-comp-kpi__gshs-badge.is-negative{ color:#c5494e; border-color:#c5494e; background:#fdecec; }

/* ---------- Face Comparison Studio ---------- */
/* CORRIGÉ (30/07, nuit) — signalé le 30/07 : la grille à 2 colonnes
   s'effondrait en 1 colonne empilée dès que le conteneur passait sous
   1100px (assez courant compte tenu de la largeur réelle de la
   coquille), avec chaque petite photo perdue au milieu d'une rangée
   pleine largeur — beaucoup de vide, une hauteur totale énorme pour
   peu d'utilité. Remplacé par du flexbox qui garde les deux panneaux
   côte à côte tant qu'il y a la place pour les deux (~450px), sans
   jamais les étirer plus large que leur propre taille — et par des
   dimensions nettement plus compactes partout (plus de min-height
   artificiel, viewport 180px au lieu de 280px). */
.as-fcs__modes{ display:flex; gap:var(--space-1-5); flex-shrink:0; flex-wrap:wrap; }
.as-fcs__toolbar{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3-5); }
.as-fcs__toolbar .as-comp-toggle-btn{ width:auto; padding:7px var(--space-3-5); font-size:11.5px; }
.as-fcs__body{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:flex-start; }
.as-fcs__stage{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4); flex:1 1 380px; }
.as-fcs__panel{ text-align:center; flex:0 0 auto; }
.as-fcs__panel-label{ font-size:11px; color:var(--shell-text-soft); margin:0 0 var(--space-1-5); }
.as-fcs__viewport{
  position:relative; width:180px; height:180px; margin:0 auto;
  border-radius:16px; overflow:hidden; background:#121314;
}
.as-fcs__img{
  position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover;
  transform-origin:center; cursor:grab; user-select:none;
  transition:transform 0.05s linear;
}
.as-fcs__img:active{ cursor:grabbing; }
/* Le point d'origine du transform JS est déjà le centre (translate
   négatif de 50% appliqué ici, le pan/zoom/rotate s'ajoute par-dessus
   côté script) — évite un saut visuel au premier zoom/pan. */
.as-fcs__viewport .as-fcs__img{ margin-top:-50%; margin-left:-50%; }

/* CORRIGÉ (31/07) — signalé le 31/07 : remplace l'ancien système de
   curseur de révélation (voir docblock PHP complet dans
   partial-screen-comparison.php pour le raisonnement). Mode
   "Avant/Après" = même stage, même panneaux, disposition différente :
   sans espace entre eux, coins carrés au centre (arrondis seulement
   aux extrémités extérieures), chacun grandit pour occuper la moitié
   du rectangle plutôt qu'une taille fixe — l'effet "un seul rectangle
   divisé en deux" demandé, sans dupliquer la moindre logique de
   zoom/glisser déjà en place. */
.as-fcs__stage--split{ gap:0; flex-wrap:nowrap; position:relative; max-width:480px; margin:0 auto; }
.as-fcs__stage--split .as-fcs__panel{ flex:1 1 0; min-width:0; }
.as-fcs__stage--split .as-fcs__viewport{ width:100%; height:auto; aspect-ratio:1; border-radius:0; }
.as-fcs__stage--split .as-fcs__panel:first-child .as-fcs__viewport{ border-radius:16px 0 0 16px; }
.as-fcs__stage--split .as-fcs__panel:last-child .as-fcs__viewport{ border-radius:0 16px 16px 0; }
/* AJOUTÉ (31/07) — ligne fixe entre les deux moitiés, jamais
   déplaçable (plus de curseur à comprendre — l'utilisateur ajuste
   directement chaque photo par glisser/pincer, comme demandé). */
.as-fcs__split-divider{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,0.25), 0 0 6px rgba(0,0,0,0.4);
  z-index:5; pointer-events:none;
}
/* AJOUTÉ (31/07) — signalé le 31/07 : "si je suis en train de bouger
   une photo, le highlight... les bordures doivent être highlight pour
   illustrer que je fais les manipulations sur cette photo" — classe
   posée par JS pendant le glisser/pincer (voir wireDragZoomRotate()),
   jamais permanente. */
.as-fcs__viewport.is-manipulating{ box-shadow:0 0 0 3px var(--gold, #d1b479); }

.as-fcs__side{ background:var(--shell-bg); border-radius:14px; padding:var(--space-3-5); flex:0 0 200px; }
.as-fcs__side-group{ margin-bottom:var(--space-3-5); }
.as-fcs__side-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--comp-accent-deep); margin:0 0 var(--space-1-5); }
.as-fcs__side-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--shell-text); margin:0 0 var(--space-1); }
.as-fcs__hint{ font-size:11px; line-height:1.5; color:var(--shell-text-soft); margin:var(--space-2-5) 0 0; }
.as-fcs__note{ font-size:11.5px; color:#c5494e; margin:var(--space-2-5) 0 0; }

.as-comp-visual__delta{ font-size:13px; font-weight:800; color:#2f9e63; background:#edf9f1; border-radius:999px; padding:var(--space-1-5) var(--space-3-5); margin:var(--space-4) auto 0; display:table; }
.as-comp-visual__delta.is-negative{ color:#c5494e; background:#fdecec; }

.as-comp-toggle-btn{
  width:100%; padding:9px var(--space-3-5); border-radius:999px; font-size:12px; font-weight:700;
  background:#fff; border:1px solid var(--comp-accent); color:var(--comp-accent-deep); cursor:pointer;
}
.as-comp-toggle-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.as-comp-toggle-btn.is-active{ background:var(--comp-accent); color:#fff; border-color:var(--comp-accent); }

/* ---------- Évolution GSHS (1→12, hauteur 300px) ---------- */
.as-comp-card-gshs{ min-height:300px; }
.as-comp-gshs__intro{ font-size:12.5px; line-height:1.5; color:var(--shell-text-soft); margin:0 0 var(--space-3-5); }
/* CORRIGÉ (11/08) — signalé le 11/08 : "mets le filtre... sur le menu
   déroulant" — .as-comp-gshs__range est maintenant l'élément <select>
   lui-même (avant : un conteneur flex autour de plusieurs boutons).
   Même esthétique en pilule que les boutons qu'il remplace, jamais un
   menu déroulant par défaut du navigateur qui aurait détonné
   visuellement avec le reste de l'écran. */
.as-comp-gshs__range{
  flex-shrink:0;
  padding:7px 30px 7px var(--space-3-5);
  border-radius:100px;
  border:1px solid var(--shell-border);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b6b' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-size:12.5px; font-weight:600; color:var(--shell-text-soft);
  cursor:pointer;
  max-width:100%;
}
@media (max-width:520px){
  .as-comp-gshs__range{ max-width:100%; }
}
/* CORRIGÉ (31/07) — signalé le 31/07 : "le filtre sort un peu du
   cadre" — 5 boutons (dont certains avec un texte long, "5 derniers
   scans", "Tous les scans") ne tiennent pas sur une ligne à largeur
   mobile, et flex-shrink:0 les empêchait de rétrécir, les faisant
   déborder de la carte. Devenu un menu déroulant unique (voir
   correctif du 11/08 plus haut) — plus besoin de défilement
   horizontal, un seul élément ne peut plus déborder de cette façon. */
.as-comp-range-btn{
  padding:var(--space-1-5) var(--space-3); border-radius:999px; font-size:11.5px; font-weight:700; cursor:pointer;
  background:var(--shell-bg); border:1px solid var(--shell-border); color:var(--shell-text-soft);
}
.as-comp-range-btn.is-active{ background:var(--comp-accent-deep); border-color:var(--comp-accent-deep); color:#fff; }
.as-comp-range-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.as-comp-gshs__chart-wrap{ width:100%; position:relative; }
.as-comp-gshs__tooltip{
  position:absolute; z-index:5; background:var(--shell-text); color:#fff; font-size:11.5px;
  padding:var(--space-1-5) var(--space-2-5); border-radius:8px; pointer-events:none; transform:translate(-50%,-115%);
  white-space:nowrap;
}
.as-comp-gshs__legend{ display:flex; flex-wrap:wrap; gap:var(--space-3-5); margin-top:var(--space-2-5); }
.as-comp-gshs__legend-item{ display:flex; align-items:center; gap:var(--space-1-5); font-size:11.5px; color:var(--shell-text-soft); }
.as-comp-gshs__legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.as-comp-gshs__summary{ font-size:13px; line-height:1.55; color:var(--shell-text); background:var(--comp-accent-soft); border-radius:12px; padding:var(--space-3-5) var(--space-4); margin:var(--space-3-5) 0 0; }

/* ---------- Tableau des paramètres (1→12, padding 18px, largeurs figées) ---------- */
.as-comp-table-wrap{ overflow-x:auto; }
.as-comp-table{ width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.as-comp-table th{ text-align:left; padding:var(--space-4-5); font-size:11px; color:var(--shell-text-soft); border-bottom:2px solid var(--shell-border); }
.as-comp-table td{ padding:var(--space-4-5); border-bottom:1px solid var(--shell-border); color:var(--shell-text); overflow:hidden; text-overflow:ellipsis; }
/* AJOUTÉ (31/07) — signalé le 31/07, avec capture à l'appui (texte
   illisible, une lettre par ligne) : table-layout:fixed + width:100%
   forçait les 7 colonnes de ce tableau à se partager la largeur de
   l'écran à parts égales, quel que soit leur contenu — sur mobile,
   bien trop étroit pour des libellés comme "Contribution" ou
   "Évolution". Le défilement horizontal existait déjà
   (.as-comp-table-wrap ci-dessus) mais ne se déclenchait jamais,
   puisque le tableau restait forcé à 100% de la largeur de l'écran
   plutôt que de déborder dedans. Sous 720px : le tableau retrouve sa
   largeur naturelle (auto), chaque colonne garde une largeur minimale
   lisible, le texte reste sur une seule ligne — et le défilement déjà
   prévu prend enfin le relais, comme il aurait toujours dû le faire. */
@media (max-width:720px){
  .as-comp-table{ table-layout:auto; width:auto; min-width:640px; }
  .as-comp-table th, .as-comp-table td{ white-space:nowrap; padding:var(--space-3-5) var(--space-4); }
}
.as-comp-table td.is-positive{ color:#2f9e63; font-weight:700; }
.as-comp-table td.is-negative{ color:#c5494e; font-weight:700; }
/* AJOUTÉ (23/08) — signalé en conditions réelles : un écart de 0
   affichait "🔴 Dégradation" en rouge, faute d'un vrai état neutre --
   voir scan-comparison.js, renderTable(). Ni vert ni rouge, un gris
   neutre, cohérent avec le texte "⚪ Stable" qui l'accompagne. */
.as-comp-table td.is-neutral{ color:var(--shell-text-soft); font-weight:700; }
.as-comp-table tbody tr{ cursor:pointer; }
.as-comp-table tbody tr:hover{ background:var(--comp-accent-soft); }
.as-comp-table__icon{ margin-right:var(--space-2); }
.as-comp-table__detail-row td{ background:var(--shell-bg); font-size:12.5px; color:var(--shell-text-soft); padding:var(--space-3-5) var(--space-4-5); }
.as-comp-table--families{ table-layout:auto; }
.as-comp-table--families th, .as-comp-table--families td{ padding:var(--space-3-5) var(--space-4); }

/* ---------- Familles biologiques (radar 1→7 / tableau 8→12, hauteur 480px) ---------- */
.as-comp-card-families{ min-height:480px; }
.as-comp-families{ display:grid; grid-template-columns:7fr 5fr; gap:var(--space-6-5); align-items:start; height:100%; }
/* CORRIGÉ (11/08) — signalé le 11/08 : "familles biologiques et tout
   le tableau du bas est décalé vers la droite sur mobile" — ce
   conteneur n'avait AUCUNE règle CSS, ni défilement horizontal ni
   contrainte de largeur. Piège classique de CSS Grid : un élément de
   grille garde par défaut min-width:auto, qui le laisse grandir
   jusqu'à la largeur minimale de son CONTENU (ici, le tableau forcé à
   640px sur mobile, voir .as-comp-table plus haut) — étirant toute la
   grille, radar compris, au lieu de rester contenu dans sa propre
   colonne. min-width:0 force cet élément à respecter la largeur de sa
   colonne ; overflow-x:auto prend alors le relais pour permettre de
   faire défiler le tableau À L'INTÉRIEUR de cette colonne, jamais en
   étirant tout le reste. */
.as-comp-families__table-wrap{ min-width:0; overflow-x:auto; }
.as-comp-families__radar{ min-width:0; }
.as-comp-radar{ width:100%; max-width:500px; display:block; margin:0 auto; }
.as-comp-radar__legend{ display:flex; justify-content:center; gap:var(--space-5); margin-top:var(--space-3); }
.as-comp-radar__legend-item{ display:flex; align-items:center; gap:var(--space-1-5); font-size:12px; color:var(--shell-text-soft); }
.as-comp-radar__dot{ width:10px; height:10px; border-radius:50%; }
.as-comp-radar__dot--before{ background:#a7aaad; }
.as-comp-radar__dot--after{ background:var(--comp-accent); }
.as-comp-table--families td:last-child{ min-width:110px; }
.as-comp-family-bar{ position:relative; height:8px; border-radius:999px; background:var(--shell-bg); overflow:hidden; margin-top:var(--space-1); }
.as-comp-family-bar__fill{ position:absolute; inset:0; width:0; background:var(--comp-accent); border-radius:999px; }

/* ---------- Indices physiologiques (5 cartes × 2 colonnes, hauteur 220px) ---------- */
.as-comp-card-indices{ min-height:220px; }
.as-comp-indices-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--space-3-5); }
.as-comp-indice{ grid-column:span 2; border:1px solid var(--shell-border); border-radius:14px; padding:var(--space-3-5); }
.as-comp-indice__head{ display:flex; align-items:baseline; gap:var(--space-2); margin-bottom:var(--space-1); }
.as-comp-indice__code{ font-weight:800; color:var(--comp-accent-deep); font-size:13px; flex-shrink:0; }
.as-comp-indice__title{ font-weight:700; font-size:12.5px; color:var(--shell-text); }
.as-comp-indice__def{ font-size:11.5px; line-height:1.5; color:var(--shell-text-soft); margin:0 0 var(--space-2); }
.as-comp-indice__spark{ width:100%; height:28px; display:block; margin-bottom:var(--space-1-5); }
.as-comp-indice__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2-5); }
.as-comp-indice__values{ font-size:13px; font-weight:600; color:var(--shell-text); }
.as-comp-indice__delta{ font-weight:700; font-size:13px; }
.as-comp-indice__delta.is-positive{ color:#2f9e63; }
.as-comp-indice__delta.is-negative{ color:#c5494e; }
.as-comp-indice__obs{ font-size:11px; color:var(--shell-text-soft); margin:var(--space-1-5) 0 0; }
.as-comp-indices__empty{ font-size:12.5px; line-height:1.55; color:var(--shell-text-soft); background:var(--shell-bg); border-radius:12px; padding:var(--space-3-5) var(--space-4); margin:0; grid-column:1/-1; }
/* AJOUTÉ (29/07, nuit) — synthèse RÉELLE (moyenne des variations),
   occupant les colonnes 9→12 restées "libres" dans le document faute
   d'un 5e indice (IP) qui n'existe pas côté serveur — jamais laissée
   vide sans explication. */
.as-comp-indices__synthesis{ grid-column:span 4; background:var(--comp-accent-soft); border-radius:14px; padding:var(--space-3-5); font-size:12px; line-height:1.5; color:var(--shell-text); }
.as-comp-indices__synthesis strong{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--comp-accent-deep); margin-bottom:var(--space-1-5); }

/* ---------- Résumé (Analyse) (1→12, hauteur 260px, icône 80px) ---------- */
.as-comp-card-summary{ background:var(--comp-accent-soft); min-height:260px; display:flex; flex-direction:column; }
.as-comp-summary__icon{
  width:80px; height:80px; border-radius:50%; background:#fff; color:var(--comp-accent-deep);
  font-size:32px; display:flex; align-items:center; justify-content:center; margin:0 0 var(--space-4);
}
.as-comp-card-summary .as-dash-card__header{ flex-direction:column; align-items:flex-start; }
.as-comp-conclusion p{ font-size:13.5px; line-height:1.6; color:var(--shell-text); margin:0 0 var(--space-2-5); }
.as-comp-conclusion p:last-child{ margin-bottom:0; }

/* ---------- Impact de la routine (timeline 1→8 / résumé 9→12, hauteur 280px) ---------- */
.as-comp-card-routine{ min-height:280px; }
.as-comp-routine-layout{ display:grid; grid-template-columns:8fr 4fr; gap:var(--space-6-5); align-items:start; height:100%; }
.as-comp-routine__intro{ font-size:12.5px; color:var(--shell-text-soft); margin:0 0 var(--space-3-5); }
.as-comp-routine__timeline{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:stretch; }
.as-comp-routine__item{ display:flex; align-items:center; gap:var(--space-2-5); background:var(--comp-accent-soft); border-radius:12px; padding:var(--space-2-5) var(--space-3-5); min-width:180px; }
.as-comp-routine__item--scan{ background:var(--shell-bg); border:1px dashed var(--shell-border); }
.as-comp-routine__dot{ width:8px; height:8px; border-radius:50%; background:var(--comp-accent-deep); flex-shrink:0; }
.as-comp-routine__thumb{ width:36px; height:36px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.as-comp-routine__date{ font-size:11px; color:var(--shell-text-soft); display:block; }
.as-comp-routine__name{ font-size:13px; font-weight:700; color:var(--shell-text); }
.as-comp-routine__empty{ font-size:12.5px; color:var(--shell-text-soft); background:var(--shell-bg); border-radius:12px; padding:var(--space-3-5) var(--space-4); margin:0; }
.as-comp-routine-layout__summary{ background:var(--shell-bg); border-radius:14px; padding:var(--space-4); }
.as-comp-routine__summary-label{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--shell-text-soft); margin:0 0 var(--space-2); }
#as-comp-routine-summary{ font-size:12.5px; line-height:1.55; color:var(--shell-text); margin:0; }

/* ---------- Recommandations (chips + 3 cartes produit, hauteur 300px) ---------- */
.as-comp-card-recommendations{ min-height:300px; }
.as-comp-recommendations{ display:flex; flex-wrap:wrap; gap:var(--space-3-5); margin-bottom:var(--space-4-5); }
.as-comp-reco{ flex:1; min-width:200px; border-radius:14px; padding:var(--space-4); border:1px solid var(--shell-border); }
.as-comp-reco--good{ background:#edf9f1; border-color:rgba(47,158,99,0.25); }
.as-comp-reco--watch{ background:#fdecec; border-color:rgba(197,73,78,0.25); }
.as-comp-reco--neutral{ background:var(--shell-bg); }
.as-comp-reco__tag{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; margin:0 0 var(--space-2); }
.as-comp-reco--good .as-comp-reco__tag{ color:#2f9e63; }
.as-comp-reco--watch .as-comp-reco__tag{ color:#c5494e; }
.as-comp-reco--neutral .as-comp-reco__tag{ color:var(--shell-text-soft); }
.as-comp-reco__title{ font-size:14px; font-weight:700; color:var(--shell-text); margin:0 0 var(--space-1); }
.as-comp-reco__detail{ font-size:12px; color:var(--shell-text-soft); margin:0; }

.as-comp-products{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5); }
.as-comp-product{ border:1px solid var(--shell-border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; min-height:260px; }
.as-comp-product__img{ width:100%; aspect-ratio:1; object-fit:cover; background:var(--shell-bg); }
.as-comp-product__body{ padding:var(--space-3-5); display:flex; flex-direction:column; gap:var(--space-1-5); flex:1; }
.as-comp-product__name{ font-size:13.5px; font-weight:700; color:var(--shell-text); margin:0; }
.as-comp-product__price{ font-size:13px; font-weight:800; color:var(--comp-accent-deep); margin:0; }
.as-comp-product__usage{ font-size:11.5px; line-height:1.5; color:var(--shell-text-soft); margin:0; flex:1; }
.as-comp-product__cta{
  margin-top:var(--space-1-5); text-align:center; background:var(--comp-accent); color:#fff; font-weight:700;
  font-size:12.5px; padding:9px var(--space-3); border-radius:999px; text-decoration:none;
}
.as-comp-products__empty{ font-size:12.5px; color:var(--shell-text-soft); background:var(--shell-bg); border-radius:12px; padding:var(--space-3-5) var(--space-4); margin:0; }

/* ---------- Pied de page (Retour 1→6 / Comparer 7→12, hauteur 80px) ---------- */
.as-comp-footer{ display:grid; grid-template-columns:6fr 6fr; gap:var(--space-5); min-height:80px; align-items:center; margin-top:var(--space-2); }
.as-comp-footer .as-btn-pill{ width:100%; text-align:center; }
.as-comp-footer .as-btn-pill:last-child{ justify-self:end; }
/* CORRIGÉ (07/09) — refonte UI/UX globale : signalé par un vrai test,
   var(--comp-accent) n'est définie que dans le contexte
   #as-screen-account-gate -- invisible partout ailleurs, notamment
   sur le bouton secondaire "Prendre rendez-vous" (Care), qui perdait
   silencieusement son style. --gold/--gold-deep sont définis au
   niveau :root, universellement disponibles -- jamais une variable
   à portée limitée réutilisée hors de son contexte réel. */
.as-btn-pill--outline{ background:#fff; border:1px solid var(--gold); color:var(--gold-deep); }

@media (max-width:1100px){
  .as-comp-families{ grid-template-columns:1fr; }
  .as-comp-routine-layout{ grid-template-columns:1fr; }
  .as-comp-kpi{ grid-column:span 4; }
  .as-comp-indice{ grid-column:span 6; }
  .as-comp-indices__synthesis{ grid-column:1/-1; }
  .as-comp-products{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .as-comparator__row{ flex-direction:column; align-items:stretch; }
  .as-comparator__selects{ grid-template-columns:1fr; }
  .as-comp-footer{ grid-template-columns:1fr; }
  .as-comp-kpi{ grid-column:span 6; }
  .as-comp-indice{ grid-column:span 12; }
  .as-comp-products{ grid-template-columns:1fr; }
}

/* ==========================================================================
   RECONSTRUIT (31/07, nuit) — écran "Évolution de ma peau", nouvelle
   spécification stricte : page de suivi longitudinal uniquement, ne
   duplique jamais "Mes analyses" ni "Comparaison". Palette dorée
   déjà en place (#d1b479/#a4802f), cohérente avec le reste.
   ========================================================================== */

#as-screen-evolution{ --evo-accent: #d1b479; --evo-accent-deep: #a4802f; --evo-accent-soft: #f7f1e4; }

.as-evo{ max-width:1600px; margin:0 auto; }
.as-evo__header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--space-6); flex-wrap:wrap; gap:var(--space-4); }
.as-evo__header-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
#as-evo-content{ display:flex; flex-direction:column; gap:var(--space-6); }

/* Carte 1 — Résumé global : 4 KPI horizontaux. */
.as-evo-kpi4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-6); min-height:120px; }
.as-evo-kpi4__item{ display:flex; align-items:center; gap:var(--space-3-5); }
.as-evo-kpi4__icon{
  flex-shrink:0; width:56px; height:56px; border-radius:50%; background:var(--evo-accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.as-evo-kpi4__title{ font-size:12px; color:var(--shell-text-soft); margin:0 0 var(--space-1); }
.as-evo-kpi4__value{ font-size:22px; font-weight:800; color:var(--shell-text); margin:0; line-height:1.1; }
.as-evo-kpi4__sub{ font-size:11.5px; font-weight:700; margin:2px 0 0; color:var(--shell-text-soft); }
.as-evo-kpi4__sub.is-positive, .as-evo-kpi4__icon.is-positive{ color:#2f9e63; }
.as-evo-kpi4__sub.is-negative, .as-evo-kpi4__icon.is-negative{ color:#c5494e; }

/* Carte 2 — Évolution GSHS + projection. */
.as-evo-card-gshs{ min-height:420px; }
.as-evo-projection-disclaimer{
  font-size:12.5px; line-height:1.55; color:var(--shell-text-soft);
  background:var(--shell-bg); border-radius:12px; padding:var(--space-3-5) var(--space-4); margin:var(--space-4) 0 0;
}

/* Carte 3 — Ce qui évolue. */
/* Carte 3 — Ce qui évolue : anneaux (type "pie chart"), état actuel + variation. */
.as-evo-rings-grid{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:var(--space-6); text-align:center; }
.as-evo-ring-item{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); flex:1; min-width:120px; }
.as-evo-ring{ width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.as-evo-ring__inner{ width:94px; height:94px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.as-evo-ring__icon{ font-size:18px; }
.as-evo-ring__value{ font-size:20px; font-weight:800; color:var(--shell-text); line-height:1; }
.as-evo-ring__label{ font-size:12.5px; font-weight:600; color:var(--shell-text); margin:0; }
.as-evo-ring__delta{ font-size:12px; font-weight:800; margin:0; }
.as-evo-ring__delta.is-positive{ color:#2f9e63; }
.as-evo-ring__delta.is-negative{ color:#c5494e; }
.as-evo-ring__delta.is-neutral{ color:var(--shell-text-soft); }

/* Filtres du graphique GSHS (période + nombre de scans). */
.as-evo-gshs-filters{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.as-evo-count-select{
  /* CORRIGÉ (31/07) — même cause que .as-identity-form__input : zoom
     automatique intempestif de Safari iPhone sous 16px — padding
     réduit en compensation pour garder une apparence compacte malgré
     la police plus grande, jamais redescendre sous 16px pour ça. */
  padding:5px var(--space-2-5); border-radius:999px; font-size:16px; font-weight:700; cursor:pointer;
  background:var(--shell-bg); border:1px solid var(--shell-border); color:var(--shell-text);
}

/* Carte 4 — Points d'attention. */
.as-evo-watch-item{ padding:var(--space-3) 0; border-bottom:1px solid var(--shell-border); }
.as-evo-watch-item:last-child{ border-bottom:none; }
.as-evo-watch-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-1); }
.as-evo-watch-head span:first-child{ font-size:14px; font-weight:700; color:var(--shell-text); }
.as-evo-watch-severity{ font-size:11px; font-weight:700; color:var(--evo-accent-deep); background:var(--evo-accent-soft); border-radius:999px; padding:3px var(--space-2-5); }
.as-evo-watch-explain{ font-size:12.5px; color:var(--shell-text-soft); margin:0; }

/* Carte 5 — Analyse personnalisée. */
.as-evo-card-analysis{ background:var(--evo-accent-soft); }
.as-evo-analysis-icon{
  width:56px; height:56px; border-radius:50%; background:#fff; color:var(--evo-accent-deep);
  font-size:22px; display:flex; align-items:center; justify-content:center; margin-right:var(--space-2-5);
}
.as-evo-card-analysis .as-dash-card__header{ margin-bottom:var(--space-4); }
#as-evo-analysis-text p{ font-size:13.5px; line-height:1.65; color:var(--shell-text); margin:0 0 var(--space-2-5); }
#as-evo-analysis-text p:last-child{ margin-bottom:0; font-weight:700; }

/* Carte 6 — Objectif actuel. */
.as-evo-goal__name{ font-size:15px; font-weight:700; color:var(--shell-text); margin:0 0 var(--space-2-5); }
.as-evo-goal__row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--shell-text-soft); margin:var(--space-2) 0 var(--space-4); }
.as-evo-goal__row span:first-child{ font-weight:800; color:var(--evo-accent-deep); }

.as-evo-footnote{ text-align:center; font-size:11.5px; color:var(--shell-text-soft); margin:var(--space-1) 0 0; }

@media (max-width:1200px){
  .as-evo-kpi4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .as-evo-kpi4{ grid-template-columns:1fr; }
  .as-evo__header{ flex-direction:column; }
  .as-evo-ring{ width:92px; height:92px; }
  .as-evo-ring__inner{ width:72px; height:72px; }
  .as-evo-ring__value{ font-size:16px; }
  .as-evo-ring-item{ min-width:90px; }
  .as-evo-gshs-filters{ flex-direction:column; align-items:stretch; }
}

/* ==========================================================================
   RECONSTRUIT (31/07) — écran "Paramètres", 16 sections. Thème clair,
   cohérent avec le reste du Follow-up Module (palette dorée déjà en
   place, jamais le fond sombre du document d'origine).
   ========================================================================== */

.as-set{ max-width:1600px; margin:0 auto; }
.as-set__header{ margin-bottom:var(--space-6); }
#as-set-content{ display:flex; flex-direction:column; gap:var(--space-6); }
.as-set-card{ min-width:0; }

/* Section Profil */
.as-set-profile{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.as-set-profile__avatar{
  position:relative; flex-shrink:0; width:80px; height:80px; border-radius:50%; background:var(--gold-deep, #a4802f);
  color:#fff; font-size:30px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:none; padding:0; cursor:pointer; overflow:hidden;
}
.as-set-profile__avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.as-set-profile__avatar-edit{
  position:absolute; bottom:-2px; right:-2px; width:26px; height:26px; border-radius:50%;
  background:#fff; color:var(--gold-deep, #a4802f); border:2px solid var(--gold, #d1b479);
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.as-set-profile__info{ flex:1; min-width:200px; }
.as-set-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--shell-border); font-size:13.5px; gap:var(--space-3); }
.as-set-row:last-child{ border-bottom:none; }
.as-set-row span{ color:var(--shell-text-soft); }
.as-set-row strong{ color:var(--shell-text); font-weight:700; text-align:right; }

/* AJOUTÉ (31/07) — bouton "Modifier" réel + champ éditable inline. */
.as-set-row__edit{ display:flex; align-items:center; gap:var(--space-2-5); }
.as-set-row__input{
  padding:var(--space-1-5) var(--space-2-5); border-radius:8px; border:1px solid var(--gold, #d1b479);
  /* CORRIGÉ (31/07) — même cause que .as-identity-form__input : zoom
     automatique intempestif de Safari iPhone sous 16px. */
  font-size:16px;
  color:var(--shell-text); width:160px;
}
.as-set-edit-btn{
  font-size:11.5px; font-weight:700; color:var(--gold-deep, #a4802f); background:none; border:none;
  cursor:pointer; text-decoration:underline; white-space:nowrap;
}
.as-set-row__mono{ font-family:monospace; font-size:11.5px; word-break:break-all; }

/* AJOUTÉ (31/07) — formulaire pays/ville modifiable. */
.as-set-city-form{ display:flex; align-items:flex-end; gap:var(--space-3-5); flex-wrap:wrap; margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--shell-border); }
.as-set-city-field{ display:flex; flex-direction:column; gap:var(--space-1-5); flex:1; min-width:140px; }
.as-set-city-field label{ font-size:11.5px; font-weight:600; color:var(--shell-text-soft); }
.as-set-city-field select, .as-set-city-field input{
  padding:9px var(--space-3); border-radius:10px; border:1px solid var(--shell-border);
  /* CORRIGÉ (31/07) — même cause que .as-identity-form__input. */
  font-size:16px; color:var(--shell-text); background:#fff;
}
#as-set-city-message{ width:100%; }

/* Cartes "Bientôt disponible" — même style premium, contenu honnête. */
.as-set-card--soon{ background:var(--shell-bg); }
.as-set-soon{ font-size:12.5px; color:var(--shell-text-soft); line-height:1.6; margin:0; }
.as-set-card--link .as-btn-pill{ margin-top:var(--space-2); }

/* Intégrations */
.as-set-integration-badge{ font-size:11px; font-weight:700; padding:3px var(--space-2-5); border-radius:999px; }
.as-set-integration-badge.is-linked{ background:#edf9f1; color:#1a7a1a; }
.as-set-integration-badge.is-not-linked{ background:var(--shell-bg); color:var(--shell-text-soft); }

/* Zone Danger */
.as-set-card--danger{ background:#fdecec; border-color:rgba(197,73,73,0.3); }
.as-set-danger-btn{ border-color:var(--red, #c5494e) !important; color:var(--red, #c5494e) !important; }

@media (max-width:640px){
  .as-set-profile{ flex-direction:column; text-align:center; }
  .as-set-row{ flex-direction:column; align-items:flex-start; gap:2px; }
  .as-set-row strong{ text-align:left; }
}

/* AJOUTÉ (06/09) — ADEL Care Appointments : parcours de réservation
   complet, identité ADEL (Gold #D1B479, Dark #121314). */
.as-appt{ padding:20px; max-width:640px; margin:0 auto; }
.as-appt__topbar{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.as-appt__title{ font-size:20px; font-weight:700; margin:0; }
.as-appt__expert-summary{ font-size:14px; color:var(--ink-50,#7a7568); margin-bottom:20px; }
.as-appt__step{ margin-bottom:20px; }

.as-appt__type-list{ display:flex; flex-direction:column; gap:10px; }
.as-appt__type-card{
  text-align:left; padding:16px 18px; border-radius:14px;
  border:1.5px solid rgba(23,20,15,0.10); background:#fff; cursor:pointer;
  font-size:15px; font-weight:600; transition:border-color .15s ease, background .15s ease;
}
.as-appt__type-card:hover{ border-color:#D1B479; }
.as-appt__type-card.is-selected{ border-color:#D1B479; border-width:2px; background:#FBF7EE; }

.as-appt__calendar{ border:1px solid rgba(23,20,15,0.10); border-radius:16px; padding:16px; background:#fff; }
.as-appt__calendar-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.as-appt__calendar-label{ font-size:15px; font-weight:700; }
.as-appt__calendar-nav{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(23,20,15,0.12);
  background:#fff; cursor:pointer; font-size:18px; line-height:1;
}
.as-appt__calendar-nav:hover{ border-color:#D1B479; }
.as-appt__calendar-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:12px; color:var(--ink-50,#7a7568); margin-bottom:6px; }
.as-appt__calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.as-appt__calendar-day{
  aspect-ratio:1; border-radius:10px; border:none; background:transparent;
  cursor:pointer; font-size:13.5px; transition:background .15s ease;
}
.as-appt__calendar-day:hover:not(:disabled){ background:#FBF7EE; }
.as-appt__calendar-day.is-selected{ background:#D1B479; color:#121314; font-weight:700; }
.as-appt__calendar-day.is-past{ opacity:0.25; cursor:default; }

.as-appt__timezone-note{ font-size:12px; color:var(--ink-50,#7a7568); margin:-8px 0 14px; }
.as-appt__time-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
.as-appt__time-slot{
  padding:10px 8px; border-radius:10px; border:1.5px solid rgba(23,20,15,0.10);
  background:#fff; cursor:pointer; font-size:13.5px; font-weight:600;
}
.as-appt__time-slot:hover{ border-color:#D1B479; }
.as-appt__time-slot.is-selected{ border-color:#D1B479; border-width:2px; background:#FBF7EE; }
.as-appt__loading, .as-appt__empty{ font-size:13px; color:var(--ink-50,#7a7568); }

.as-appt__helper{ font-size:12.5px; color:var(--ink-50,#7a7568); margin-bottom:12px; }
.as-appt__document-list{ list-style:none; margin:10px 0 0; padding:0; font-size:13px; }
.as-appt__document-list li{ padding:4px 0; }
/* CORRIGÉ (06/09) — finalisation des documents privés : mise en page
   réelle pour l'état d'upload (en cours/réussi/erreur), jamais un
   simple nom de fichier brut comme avant cette correction. */
.as-appt__document-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid rgba(23,20,15,0.10); border-radius:10px; margin-bottom:8px;
  font-size:13.5px;
}
.as-appt__document-status{ font-size:12px; color:var(--ink-50,#7a7568); margin-left:auto; }
.as-appt__document-status--error{ color:#B94A48; }
.as-appt__document-remove{
  background:none; border:none; color:#B94A48; font-size:12px; cursor:pointer;
  text-decoration:underline; padding:0;
}

.as-appt__summary-card{ border:1px solid rgba(23,20,15,0.10); border-radius:16px; padding:18px; background:#fff; }
.as-appt__summary-list{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0 0 18px; }
.as-appt__summary-list dt{ font-size:12.5px; color:var(--ink-50,#7a7568); font-weight:600; }
.as-appt__summary-list dd{ margin:0; font-size:14px; font-weight:600; }

.as-appt__confirmation{ text-align:center; padding:40px 20px; }
.as-appt__confirmation-title{ font-size:18px; font-weight:700; margin-bottom:10px; }
.as-appt__confirmation-note{ font-size:13.5px; color:var(--ink-50,#7a7568); margin-bottom:24px; }

.as-appt__footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; }

/* AJOUTÉ (06/09) — ADEL Care Appointments, Phase 4 : Mes rendez-vous /
   Mes consultations, identité ADEL (Gold #D1B479, Dark #121314). */
.as-myappt{ padding:20px; max-width:900px; margin:0 auto; }
.as-myappt__topbar{ margin-bottom:16px; }
.as-myappt__title{ font-size:22px; font-weight:700; margin:0 0 4px; }
.as-myappt__subtitle{ font-size:13.5px; color:var(--ink-50,#7a7568); margin:0; }

.as-myappt__summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
@media (max-width:560px){
  .as-myappt__summary{ grid-auto-flow:column; grid-auto-columns:minmax(120px,1fr); overflow-x:auto; grid-template-columns:none; }
}
.as-myappt__summary-card{
  display:flex; flex-direction:column; gap:4px; padding:14px 16px;
  border:1px solid rgba(23,20,15,0.10); border-radius:14px; background:#fff;
}
.as-myappt__summary-value{ font-size:24px; font-weight:700; color:#D1B479; }
.as-myappt__summary-label{ font-size:12px; color:var(--ink-50,#7a7568); }

.as-myappt__tabs{ display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; }
.as-myappt__tab{
  padding:8px 16px; border-radius:999px; border:1.5px solid rgba(23,20,15,0.10);
  background:#fff; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.as-myappt__tab.is-active{ background:#121314; color:#fff; border-color:#121314; }

.as-myappt__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.as-myappt__card{
  display:flex; gap:14px; padding:16px; border:1px solid rgba(23,20,15,0.10);
  border-radius:16px; background:#fff;
}
.as-myappt__card-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:52px; padding:8px; border-radius:10px; background:#FBF7EE; height:fit-content;
}
.as-myappt__card-day{ font-size:20px; font-weight:700; color:#121314; }
.as-myappt__card-month{ font-size:11px; font-weight:700; color:#B4914F; }
.as-myappt__card-body{ flex:1; min-width:0; }
.as-myappt__card-time{ font-size:13px; font-weight:700; margin:0 0 2px; }
.as-myappt__card-expert{ font-size:15px; font-weight:700; margin:0 0 2px; }
.as-myappt__card-meta{ font-size:12.5px; color:var(--ink-50,#7a7568); margin:0 0 10px; }
.as-myappt__card-footer{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.as-myappt__card-price{ font-size:13px; font-weight:700; }
.as-myappt__card-action{ width:100%; font-size:13px; padding:8px; }

.as-myappt__skeletons{ display:flex; flex-direction:column; gap:12px; }
.as-myappt__skeleton{
  height:80px; border-radius:14px;
  background:linear-gradient(90deg, #f2ede1 25%, #fbf7ee 50%, #f2ede1 75%);
  background-size:200% 100%; animation:as-myappt-shimmer 1.4s infinite;
}
@keyframes as-myappt-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

.as-myappt__empty-state{ text-align:center; padding:48px 20px; }
.as-myappt__empty-subtitle{ font-size:13.5px; color:var(--ink-50,#7a7568); margin:8px 0 20px; }
.as-myappt__empty{ font-size:13.5px; color:var(--ink-50,#7a7568); text-align:center; padding:24px; }

.as-myappt__detail-header h2{ font-size:20px; margin:0 0 20px; }
.as-myappt__detail-section{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(23,20,15,0.08); }
.as-myappt__detail-section h3{ font-size:14px; font-weight:700; margin:0 0 10px; }
.as-myappt__detail-price{ font-size:20px; font-weight:700; margin:0 0 4px; }
.as-myappt__doc-list{ list-style:none; margin:0; padding:0; }
.as-myappt__doc-list li{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13.5px; }
.as-myappt__doc-view{ background:none; border:none; color:#D1B479; font-weight:700; cursor:pointer; text-decoration:underline; padding:0; }
.as-myappt__no-docs{ color:var(--ink-50,#7a7568); }

/* CORRIGÉ (07/09) — refonte UI/UX globale, section 46 : signalé par un
   vrai test, les badges adel-cc-badge-status réutilisés dans "Mes
   rendez-vous" (scan-my-appointments.js) n'avaient AUCUN style dans ce
   fichier -- la définition existante ne vit que dans le contexte admin
   (#adel-admin-control-center), jamais visible ici. Système cohérent
   maintenant défini ici aussi, mêmes intentions sémantiques que
   l'admin (success/warning/danger/neutre) mais adapté au thème clair
   de ce fichier -- jamais une troisième palette de statut inventée.
   Couvre aussi --done et --cancelled, utilisées côté patient mais
   absentes même du système admin. */
.adel-cc-badge-status, .adel-cc-badge-type{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700;
}
.adel-cc-badge-status--active, .adel-cc-badge-status--done{
  background:rgba(94,189,130,0.15); color:#2f9e63;
}
.adel-cc-badge-status--pending{
  background:rgba(209,154,74,0.16); color:#B4914F;
}
.adel-cc-badge-status--cancelled, .adel-cc-badge-status--revoked, .adel-cc-badge-status--suspended{
  background:rgba(197,73,78,0.14); color:#B94A48;
}
.adel-cc-badge-status--inactive{
  background:rgba(23,20,15,0.06); color:#7a7568;
}

/* AJOUTÉ (07/09) — refonte UI/UX globale, section 19 : vraie zone
   d'upload premium, jamais un <input type="file"> brut comme avant
   cette correction. Le vrai input reste fonctionnel (jamais
   display:none, qui empêcherait certains lecteurs d'écran de le
   trouver) mais visuellement masqué -- label[for] déclenche le
   sélecteur de fichier au clic n'importe où dans la zone, comportement
   HTML natif, jamais du JS ajouté pour ça. */
.as-appt__dropzone{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; padding:32px 20px; border:1.5px dashed rgba(23,20,15,0.18);
  border-radius:16px; background:#fff; cursor:pointer; transition:border-color .15s ease;
}
.as-appt__dropzone:hover{ border-color:#D1B479; }
.as-appt__dropzone-icon{ width:32px; height:32px; color:#B4914F; margin-bottom:4px; }
.as-appt__dropzone-title{ font-size:15px; font-weight:700; }
.as-appt__dropzone-hint{ font-size:12.5px; color:var(--ink-50,#7a7568); margin-bottom:10px; }
.as-appt__dropzone-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* AJOUTÉ (07/09) — espace professionnel ADEL Care : gestion des
   disponibilités. */
.as-avail{ padding:20px; max-width:640px; margin:0 auto; }
.as-avail__title{ font-size:22px; font-weight:700; margin:16px 0 4px; }
.as-avail__subtitle{ font-size:13.5px; color:var(--ink-50,#7a7568); margin:0 0 24px; }
.as-avail__section{ margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(23,20,15,0.08); }
.as-avail__section h2{ font-size:15px; font-weight:700; margin:0 0 12px; }
.as-avail__slot-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid rgba(23,20,15,0.10); border-radius:10px; margin-bottom:8px; font-size:13.5px;
}
.as-avail__remove{ background:none; border:none; color:#B94A48; font-size:18px; cursor:pointer; line-height:1; padding:0 4px; }
.as-avail__empty{ font-size:13px; color:var(--ink-50,#7a7568); margin-bottom:10px; }
.as-avail__add-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.as-avail__add-row select, .as-avail__add-row input{
  padding:8px 10px; border-radius:8px; border:1px solid rgba(23,20,15,0.15); font-size:13px;
}
#as-avail-timezone-select{ width:100%; padding:10px; border-radius:10px; border:1px solid rgba(23,20,15,0.15); }

/* AJOUTÉ (07/09) — sélecteur d'espace de travail multi-rôle. */
.as-workspace-switcher{ position:relative; margin:14px 20px 6px; }
.as-workspace-switcher__current{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(23,20,15,0.12);
  background:#FBF7EE; font-size:13px; font-weight:700; cursor:pointer;
}
.as-workspace-switcher__menu{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  background:#fff; border:1px solid rgba(23,20,15,0.12); border-radius:10px;
  box-shadow:0 12px 28px rgba(23,20,15,0.14); overflow:hidden;
}
.as-workspace-switcher__item{
  display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px;
  border:none; background:#fff; font-size:13px; text-align:left; cursor:pointer;
}
.as-workspace-switcher__item:hover{ background:#FBF7EE; }
.as-workspace-switcher__item.is-active{ font-weight:700; color:#B4914F; }

/* AJOUTÉ (07/09) — espace professionnel ADEL Care : consultations
   asynchrones, section distincte des rendez-vous planifiés. */
.as-myappt__section{ margin-top:32px; padding-top:24px; border-top:1px solid rgba(23,20,15,0.08); }
.as-myappt__section-title{ font-size:16px; font-weight:700; margin:0 0 16px; }

/* AJOUTÉ (07/09) — vrai tableau de bord professionnel ADEL Care. */
.as-myappt__greeting{ margin-bottom:24px; }
.as-myappt__greeting h1{ font-size:22px; font-weight:700; margin:0 0 4px; }
.as-myappt__greeting-meta{ font-size:13.5px; color:var(--ink-50,#7a7568); margin:0 0 8px; }
#as-myappt-greeting-today{ font-size:13.5px; color:#B4914F; font-weight:600; margin:0; }

.as-myappt__next-consult{ margin-bottom:24px; }
.as-myappt__next-consult-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-50,#7a7568); margin:0 0 8px; }
.as-myappt__next-consult-card{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:18px 20px;
  border-radius:16px; background:linear-gradient(100deg, #FBF7EE, #F3E9D2);
  border:1px solid rgba(180,145,79,0.25);
}
.as-myappt__next-consult-time{ font-size:20px; font-weight:700; color:#121314; }
.as-myappt__next-consult-patient{ font-weight:700; }
.as-myappt__next-consult-type, .as-myappt__next-consult-mode{ font-size:13px; color:var(--ink-50,#7a7568); }
.as-myappt__next-consult-btn{ margin-left:auto; }

/* CORRIGÉ (07/09) — bug confirmé : une erreur d'accès ne doit jamais
   ressembler à "aucune donnée". */
.as-myappt__access-error{
  padding:20px; border-radius:14px; background:rgba(197,73,78,0.08);
  border:1px solid rgba(197,73,78,0.2); font-size:13.5px;
}
.as-myappt__access-error-title{ font-weight:700; margin:0 0 6px; color:#B94A48; }

/* AJOUTÉ (07/09) — ADEL Care Professional : profil professionnel. */
.as-proprofile{ padding:20px; max-width:600px; margin:0 auto; }
.as-proprofile__title{ font-size:22px; font-weight:700; margin:16px 0 4px; }
.as-proprofile__status{ font-size:13px; font-weight:600; margin:0 0 24px; }
.as-proprofile__status.is-active{ color:#2f9e63; }
.as-proprofile__status.is-pending{ color:#B4914F; }
.as-proprofile__section{ margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid rgba(23,20,15,0.08); }
.as-proprofile__section h2{ font-size:14px; font-weight:700; margin:0 0 12px; }
.as-proprofile__section .as-identity-form__input{ margin-bottom:12px; }
.as-identity-form__checkbox-label{ display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:12px; }

/* AJOUTÉ (07/09) — ADEL Care Professional, PHASE 8 : Agenda. */
.as-agenda{ padding:20px; max-width:960px; margin:0 auto; }
.as-agenda__title{ font-size:22px; font-weight:700; margin:16px 0 20px; }
.as-agenda__week-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px; }
.as-agenda__week-label{ font-size:14px; font-weight:700; min-width:180px; text-align:center; }
.as-agenda__days{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.as-agenda__day{ border:1px solid rgba(23,20,15,0.10); border-radius:12px; padding:10px; min-height:120px; }
.as-agenda__day-header{ display:flex; flex-direction:column; align-items:center; margin-bottom:8px; font-size:11px; color:var(--ink-50,#7a7568); }
.as-agenda__day-header.is-today .as-agenda__day-number{ background:#D1B479; color:#121314; }
.as-agenda__day-number{ font-size:16px; font-weight:700; color:#121314; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.as-agenda__day-empty{ font-size:11px; color:var(--ink-50,#7a7568); text-align:center; margin-top:12px; }
.as-agenda__slot{ background:#FBF7EE; border-radius:8px; padding:6px 8px; margin-bottom:6px; font-size:11.5px; }
.as-agenda__slot-time{ display:block; font-weight:700; }
.as-agenda__slot-type{ display:block; color:var(--ink-50,#7a7568); }
@media (max-width:700px){
  .as-agenda__days{ grid-template-columns:1fr; }
}

/* ============================================================
   AJOUTÉ (07/09) — ADEL Care Professional, PHASE 15 de la mission :
   identité visuelle distincte, scopée à #as-app-shell.is-workspace-expert
   (voir scan-workspace-switcher.js). Jamais une recoloration simple --
   ton plus neutre et "logiciel clinique", jamais la même ambiance
   chaleureuse "app beauté grand public" que les écrans patient.
   L'or (#D1B479) reste réservé aux accents (sélection, actions
   principales), jamais généralisé à tout le tableau de bord --
   exigence explicite de la mission.
   ============================================================ */

/* CORRIGÉ (07/09) — refonte demandée explicitement : "ne jamais créer
   une interface majoritairement noire" -- le fond sombre précédent a
   été introduit de ma propre initiative, jamais validé, et
   explicitement rejeté depuis ("ce netait pas en noire... tu as mis
   en noir"). Nouvelle palette exacte de la mission : fond app
   #F8F7F4, surface #FFFFFF, texte principal #1C1C1C, texte
   secondaire #757575, accent #D1B479, noir #121314 réservé au texte
   fort uniquement -- jamais un fond. */
#as-app-shell.is-workspace-expert{
  --pro-surface:#F8F7F4;
  --pro-card:#FFFFFF;
  --pro-border:rgba(28,28,28,0.08);
  --pro-shadow:0 2px 10px rgba(28,28,28,0.04);
  --pro-text:#1C1C1C;
  --pro-text-soft:#757575;
  background:var(--pro-surface);
}
#as-app-shell.is-workspace-expert .as-shell__sidebar{
  background:#FFFFFF; border-right:1px solid rgba(28,28,28,0.08);
}
#as-app-shell.is-workspace-expert .as-shell__nav-item{ color:var(--pro-text-soft); }
#as-app-shell.is-workspace-expert .as-shell__nav-item:hover{ background:#F8F7F4; color:var(--pro-text); }
#as-app-shell.is-workspace-expert .as-shell__nav-item.is-active{ background:rgba(209,180,121,0.14); color:#8a6a26; }
#as-app-shell.is-workspace-expert .as-workspace-switcher__current{
  background:#F8F7F4; border-color:rgba(28,28,28,0.08); color:var(--pro-text);
}

/* AJOUTÉ (07/09) — bandeau d'identité, jamais "ADEL Scan" ou une
   ambiance suivi-personnel pour un professionnel -- section 4.1 de
   la mission : "le professionnel ne doit jamais avoir l'impression
   d'être dans ADEL Scan Patient". Couleur ajustée pour rester lisible
   sur fond clair (jamais le doré clair sur blanc, illisible). */
#as-app-shell.is-workspace-expert .as-shell__sidebar::before{
  content:"ADEL CARE PROFESSIONAL";
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  color:#8a6a26; opacity:.85; text-align:center; padding:10px 12px 0;
}

#as-app-shell.is-workspace-expert .as-myappt__card,
#as-app-shell.is-workspace-expert .as-myappt__summary-card,
#as-app-shell.is-workspace-expert .as-avail__slot-row,
#as-app-shell.is-workspace-expert .as-agenda__day,
#as-app-shell.is-workspace-expert .as-proprofile__section{
  background:var(--pro-card); border-color:var(--pro-border); box-shadow:var(--pro-shadow);
}
#as-app-shell.is-workspace-expert .as-myappt__summary-value{ color:#121314; }
#as-app-shell.is-workspace-expert .as-myappt__next-consult-card{
  background:linear-gradient(100deg, #FFFFFF, #FBF7EE); border-color:var(--pro-border);
}

/* AJOUTÉ (07/09) — PHASE 21 de la mission : "Empty : illustration
   sobre" -- un vrai composant réutilisable icône + titre + sous-titre
   + action, jamais un simple texte gris isolé. */
.as-pro-empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:48px 20px; gap:6px;
}
.as-pro-empty-state__icon{ font-size:32px; margin-bottom:6px; opacity:.85; }
.as-pro-empty-state__title{ font-size:15px; font-weight:700; color:#121314; margin:0; }
.as-pro-empty-state__subtitle{ font-size:13px; color:var(--ink-50,#7a7568); margin:0 0 14px; }

/* AJOUTÉ (07/09) — refonte ADEL Care Professional : libellés de
   groupe dans la navigation ("Vue d'ensemble / Pratique / Gestion"),
   jamais une liste plate comme avant. */
.as-shell__nav-group-label{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--pro-text-soft,#757575); margin:18px 16px 6px; padding:0;
}
.as-shell__nav-group-label:first-of-type{ margin-top:8px; }

/* AJOUTÉ (07/09) — ADEL Care Professional : écran Dossiers reçus,
   avec un vrai soin de mise en page ("les menus et la page actuel
   c'est tellement du brouillon" -- signalé explicitement). */
.as-cases{ padding:28px 32px; max-width:1100px; margin:0 auto; }
.as-cases__header{ margin-bottom:24px; }
.as-cases__title{ font-size:26px; font-weight:700; margin:14px 0 4px; color:#1C1C1C; }
.as-cases__subtitle{ font-size:14px; color:#757575; margin:0; }
.as-cases__toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:24px; }
.as-cases__search{
  flex:1; min-width:220px; padding:10px 14px; border-radius:10px;
  border:1px solid rgba(28,28,28,0.12); font-size:13.5px; background:#fff;
}
.as-cases__tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.as-cases__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;
}
.as-cases__card{
  background:#fff; border:1px solid rgba(28,28,28,0.08); border-radius:14px;
  padding:18px; box-shadow:0 2px 10px rgba(28,28,28,0.04);
  display:flex; flex-direction:column; gap:10px;
}
.as-cases__card-top{ display:flex; align-items:center; justify-content:space-between; }
.as-cases__card-date{ font-size:12px; color:#757575; }
.as-cases__card-motif{ font-size:15px; font-weight:600; color:#1C1C1C; margin:0; }
.as-cases__card-action{ align-self:flex-start; }
@media (max-width:700px){
  .as-cases{ padding:20px 16px; }
  .as-cases__grid{ grid-template-columns:1fr; }
}

/* AJOUTÉ (07/09) — refonte du tableau de bord professionnel. */
.as-myappt__greeting-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.as-myappt__greeting-side{ text-align:right; }
.as-myappt__greeting-date{ font-size:12.5px; color:#757575; margin:0 0 6px; text-transform:capitalize; }
.as-myappt__status-badge{ display:inline-block; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; }
.as-myappt__status-badge.is-active{ background:rgba(47,158,99,0.12); color:#2f9e63; }
.as-myappt__status-badge.is-pending{ background:rgba(117,117,117,0.10); color:#757575; }

.as-myappt__priority-card{
  background:#fff; border:1px solid rgba(28,28,28,0.08); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:6px; box-shadow:0 2px 10px rgba(28,28,28,0.04);
}
.as-myappt__priority-card.is-empty{ background:#FAFAF8; }
.as-myappt__priority-label{ font-size:12.5px; color:#757575; margin:0; }
.as-myappt__priority-value{ font-size:30px; font-weight:700; color:#1C1C1C; margin:0; }
.as-myappt__priority-extra{ font-size:12px; color:#757575; margin:0; }
.as-myappt__priority-empty{ font-size:13px; color:#757575; margin:4px 0 0; }
.as-myappt__priority-card button{ align-self:flex-start; margin-top:6px; }

.as-myappt__today-timeline{ margin:24px 0; }
.as-myappt__timeline-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(28,28,28,0.06); font-size:13.5px; }
.as-myappt__timeline-time{ font-weight:700; min-width:52px; }
.as-myappt__timeline-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.as-myappt__timeline-dot.is-done{ background:#9c9c9c; }
.as-myappt__timeline-dot.is-upcoming{ background:#D1B479; }
.as-myappt__timeline-state{ color:#757575; min-width:80px; }
.as-myappt__timeline-type{ font-weight:600; }

.as-myappt__section-subtitle{ font-size:13px; color:#757575; margin:0 0 14px; }

.as-myappt__bottom-row{ display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:24px; }
.as-myappt__activity, .as-myappt__quick-access{ background:#fff; border:1px solid rgba(28,28,28,0.08); border-radius:14px; padding:18px; }
#as-myappt-activity-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.as-myappt__activity-item{ display:flex; flex-direction:column; }
.as-myappt__activity-value{ font-size:22px; font-weight:700; color:#1C1C1C; }
.as-myappt__activity-label{ font-size:11.5px; color:#757575; }
.as-myappt__quick-access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.as-myappt__quick-access-item{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px;
  background:#F8F7F4; border:none; border-radius:10px; font-size:11.5px; cursor:pointer;
}
.as-myappt__quick-access-item:hover{ background:rgba(209,180,121,0.14); }
@media (max-width:900px){
  .as-myappt__bottom-row{ grid-template-columns:1fr; }
}

/* AJOUTÉ (07/09) — refonte, ZONE 5 : éléments partagés sur chaque
   carte de demande. */
.as-myappt__card-scope, .as-cases__card-scope{
  font-size:11px; color:#2f9e63; margin:2px 0 0; line-height:1.5;
}


/* ===================== ADEL Care — parcours patient (conception validée, Phase E) ===================== */
/* Ajouté (18/09), reconstruit le même jour après un premier essai qui
   a rendu l'écran illisible (texte sombre sur fond sombre hérité de
   .adel-skinai-app, qui vaut background:var(--ink) par défaut --
   pensé pour l'accueil, jamais pour un écran de contenu clair).

   CORRIGÉ -- la première version rejoignait la liste de sélecteurs
   PARTAGÉE (.as-questionnaire, .as-triage, .as-rapport,
   #as-screen-account-gate) pour hériter du thème clair. Cette fois,
   volontairement ISOLÉ : une règle qui ne touche STRICTEMENT qu'à
   ces deux écrans précis, jamais aux écrans déjà en production --
   même si la cause exacte de la panne précédente reste incertaine,
   cette approche élimine le risque qu'elle vienne de là. Valeurs
   littérales (#ffffff, #17140f) plutôt que des variables, pour ne
   dépendre d'aucune redéfinition possible ailleurs dans ce fichier. */
/* CORRIGÉ (19/09), 3e passage — signalé et prouvé en conditions
   réelles par comparaison directe avec un écran fonctionnel : ces
   deux écrans se réduisaient à une boîte de taille RÉELLEMENT NULLE
   (0×0, mesuré par getBoundingClientRect()) malgré un display,
   opacity et visibility parfaitement corrects -- opaque, visible,
   mais occupant zéro espace, donc rien à voir. La règle de base
   .as-screen pose déjà width:100% et min-height:100vh -- pour une
   raison non identifiée avec certitude, ces deux écrans précis n'en
   héritaient pas dans les faits. Même principe que le correctif
   d'opacité qui a déjà fonctionné : forcer explicitement, avec
   !important, plutôt que de continuer à chercher la cause exacte
   indéfiniment. */
#as-screen-care-request,
#as-screen-my-care,
#as-screen-book-appointment{
  width:100% !important;
  min-height:100vh !important;
}

#as-screen-care-request,
#as-screen-my-care,
#as-screen-book-appointment{
  background:#ffffff;
  color:#17140f;
}

.as-care__title{ font-size:22px; font-weight:700; color:#17140f; margin:16px 0 4px; }
.as-care__subtitle{ font-size:14px; color:#5a5346; margin-bottom:20px; }
.as-care__section-title{ font-size:16px; font-weight:700; color:#17140f; margin:20px 0 10px; }
.as-care__field-label{ display:block; font-size:12px; font-weight:600; color:#5a5346; margin-bottom:6px; }
.as-care__select, .as-care__textarea{
  width:100%;
  border:1px solid #ddd;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  font-family:inherit;
  color:#17140f;
  background:#fff;
  margin-bottom:14px;
}
.as-care__textarea{ resize:vertical; }
.as-care__error{ color:#b3432b; font-size:13px; margin:8px 0; }
.as-care__loading{ color:#5a5346; font-size:13px; }
.as-care__empty-inline{ color:#5a5346; font-size:13px; }

.as-care__btn{
  border:1px solid #ddd;
  background:#fff;
  color:#17140f;
  border-radius:10px;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.as-care__btn--primary{ background:#d1b479; border-color:#d1b479; color:#fff; }
.as-care__btn--ghost{ background:transparent; }

/* ===================== "Contacter un expert" V2 — refonte en
   parcours étape par étape, conception validée le 23/09. Charte
   fournie, mêmes valeurs exactes que "Mon suivi" (--my-*) :
   or #D1B479, noir #121314, fond #F8F8F6, surface #FFFFFF, texte
   secondaire #6F6F6A, bordure #E8E6DF. Variables propres (--cf-*)
   pour rester isolées de .as-mysuivi, même si les valeurs sont
   identiques -- jamais une dépendance entre deux écrans différents
   qui devraient pouvoir évoluer séparément. ===================== */
.as-care-flow{
  --cf-gold:#D1B479;
  --cf-ink:#121314;
  --cf-bg:#F8F8F6;
  --cf-surface:#FFFFFF;
  --cf-text-soft:#6F6F6A;
  --cf-border:#E8E6DF;
  max-width:1000px;
  margin:0 auto;
  padding:40px 48px 100px;
}
@media (max-width:767px){
  .as-care-flow{ padding:16px 16px 100px; }
}

/* ----- En-tête ----- */
.as-care-flow__header{ display:flex; align-items:flex-start; gap:14px; }
.as-care-flow__back{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--cf-border); background:var(--cf-surface); color:var(--cf-ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.as-care-flow__back:hover{ border-color:var(--cf-gold); }
.as-care-flow__headtext{ flex:1; min-width:0; }
.as-care-flow__title{ font-size:24px; font-weight:700; color:var(--cf-ink); margin:2px 0 4px; }
.as-care-flow__subtitle{ font-size:14px; color:var(--cf-text-soft); margin:0; }
.as-care-flow__step-count{ font-size:12px; font-weight:600; color:var(--cf-text-soft); white-space:nowrap; margin-top:8px; display:none; }
@media (max-width:767px){ .as-care-flow__step-count{ display:block; } }

/* ----- Timeline de progression (desktop) ----- */
.as-care-flow__progress{
  display:flex; align-items:flex-start; gap:4px; margin-top:25px; padding:0 4px;
}
@media (max-width:767px){ .as-care-flow__progress{ display:none; } }
.as-care-flow__progress-step{ flex:1; text-align:center; position:relative; }
.as-care-flow__progress-dot{
  width:26px; height:26px; border-radius:50%; margin:0 auto 6px; position:relative; z-index:1;
  background:var(--cf-surface); border:2px solid var(--cf-border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--cf-text-soft);
}
.as-care-flow__progress-step--done .as-care-flow__progress-dot{ background:var(--cf-gold); border-color:var(--cf-gold); color:#fff; }
.as-care-flow__progress-step--active .as-care-flow__progress-dot{ border-color:var(--cf-gold); color:var(--cf-ink); box-shadow:0 0 0 4px rgba(209,180,121,.25); }
.as-care-flow__progress-step::after{
  content:''; position:absolute; top:13px; left:50%; width:100%; height:2px; background:var(--cf-border); z-index:0;
}
.as-care-flow__progress-step:first-child::after{ display:none; }
.as-care-flow__progress-step--done::after{ background:var(--cf-gold); }
.as-care-flow__progress-label{ font-size:10px; font-weight:600; color:var(--cf-text-soft); line-height:13px; }
.as-care-flow__progress-step--active .as-care-flow__progress-label{ color:var(--cf-ink); }

/* ----- Barre de progression mobile ----- */
.as-care-flow__progress-bar{ display:none; }
.as-care-flow__progress-bar--mobile{
  display:block; height:4px; border-radius:2px; background:var(--cf-border);
  margin-top:16px; overflow:hidden;
}
@media (min-width:768px){ .as-care-flow__progress-bar--mobile{ display:none; } }
.as-care-flow__progress-bar--mobile span{ display:block; height:100%; background:var(--cf-gold); border-radius:2px; transition:width .25s ease; }

/* ----- Contenu / étapes ----- */
.as-care-flow__content{ margin-top:50px; }
@media (max-width:767px){ .as-care-flow__content{ margin-top:28px; } }
.as-care-step__title{ font-size:20px; font-weight:700; color:var(--cf-ink); margin:0 0 6px; }
.as-care-step__subtitle{ font-size:14px; color:var(--cf-text-soft); margin:0 0 24px; }
.as-care-step__head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ----- Étape 01 — choix du type ----- */
.as-care-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .as-care-type-grid{ grid-template-columns:1fr; } }
.as-care-type-card{
  text-align:left; background:var(--cf-surface); border:1px solid var(--cf-border);
  border-radius:16px; padding:28px 24px; cursor:pointer; font-family:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.as-care-type-card:hover{ border-color:var(--cf-gold); transform:translateY(-2px); }
.as-care-type-card__icon{
  width:48px; height:48px; border-radius:50%; background:rgba(209,180,121,.15); color:var(--cf-gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.as-care-type-card__title{ font-size:17px; font-weight:700; color:var(--cf-ink); margin:0 0 4px; }
.as-care-type-card__kicker{ font-size:12px; font-weight:600; color:var(--cf-gold); margin:0 0 10px; text-transform:uppercase; letter-spacing:.03em; }
.as-care-type-card__desc{ font-size:13px; color:var(--cf-text-soft); line-height:19px; margin:0 0 18px; }
.as-care-type-card__cta{ font-size:13px; font-weight:700; color:var(--cf-ink); display:flex; align-items:center; gap:6px; }
/* AJOUTÉ (23/09) — l'option "Je ne sais pas encore" reste choisissable
   mais volontairement moins mise en avant que les vrais choix. */
.as-care-type-card--muted{ background:var(--cf-bg); }
.as-care-type-card--muted .as-care-type-card__cta{ color:var(--cf-text-soft); }

/* ----- Étape 02 — filtres ----- */
.as-care-filters{
  background:var(--cf-surface); border:1px solid var(--cf-border); border-radius:16px; padding:18px 20px;
}
.as-care-filters__row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
@media (max-width:767px){ .as-care-filters{ display:none; } }
.as-care-filter-field{ position:relative; }
.as-care-filter-field__label{ font-size:11px; font-weight:700; color:var(--cf-text-soft); text-transform:uppercase; letter-spacing:.02em; display:block; margin-bottom:6px; }
.as-care-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.as-care-pill{
  border:1px solid var(--cf-border); background:var(--cf-surface); color:var(--cf-ink);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.as-care-pill.is-active{ background:var(--cf-gold); border-color:var(--cf-gold); color:#fff; }
.as-care-multiselect{
  border:1px solid var(--cf-border); border-radius:10px; padding:8px 12px; background:var(--cf-surface);
  font-size:13px; color:var(--cf-ink); cursor:pointer; display:flex; align-items:center; gap:8px; min-width:160px;
}
.as-care-multiselect__panel{
  position:absolute; top:calc(100% + 4px); left:0; z-index:5; background:var(--cf-surface);
  border:1px solid var(--cf-border); border-radius:12px; padding:10px; min-width:200px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:220px; overflow-y:auto;
}
.as-care-multiselect__option{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--cf-ink); padding:6px 4px; cursor:pointer; }
.as-care-filters__actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ----- Drawer de filtres mobile ----- */
.as-care-mobile-filter-btn{ display:none; }
@media (max-width:767px){ .as-care-mobile-filter-btn{ display:inline-flex; } }
.as-care-filter-drawer{ position:fixed; inset:0; z-index:60; }
.as-care-filter-drawer__panel{
  position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow-y:auto;
  background:var(--cf-surface, #fff); border-radius:20px 20px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -8px 30px rgba(0,0,0,.15);
}
.as-care-filter-drawer::before{ content:''; position:absolute; inset:0; background:rgba(18,19,20,.4); }
.as-care-filter-drawer__panel{ position:relative; z-index:1; }
.as-care-filter-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.as-care-filter-drawer__body .as-care-filters__row{ flex-direction:column; align-items:stretch; }
.as-care-filter-drawer__body .as-care-filters__actions{ margin-top:8px; }
.as-care-filter-drawer__head h2{ font-size:16px; font-weight:700; margin:0; }
.as-care-filter-drawer__close{ background:none; border:none; font-size:22px; cursor:pointer; color:var(--cf-text-soft, #6F6F6A); line-height:1; }

/* ----- Étape 03 — liste des experts ----- */
.as-care-pro-list{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }
.as-care-pro-card{
  display:flex; gap:16px; text-align:left; border:1px solid var(--cf-border); border-radius:16px;
  padding:18px 20px; background:var(--cf-surface); cursor:pointer; font-family:inherit; align-items:flex-start;
  transition:border-color .12s ease;
}
.as-care-pro-card:hover{ border-color:var(--cf-gold); }
.as-care-pro-card__photo{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--cf-gold); }
.as-care-pro-card__avatar-fallback{
  width:72px; height:72px; border-radius:50%; background:var(--cf-gold); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;
}
.as-care-pro-card__body{ flex:1; min-width:0; }
.as-care-pro-card__toprow{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.as-care-pro-card__name{ font-size:16px; font-weight:700; color:var(--cf-ink); margin:0; }
.as-care-pro-card__role{ font-size:13px; color:var(--cf-text-soft); margin:2px 0 8px; }
.as-care-pro-card__badge{ font-size:11px; font-weight:700; white-space:nowrap; padding:4px 10px; border-radius:999px; background:rgba(58,160,107,.12); color:#3aa06b; flex-shrink:0; }
.as-care-pro-card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.as-care-pro-card__tag{ font-size:11px; color:var(--cf-text-soft); background:var(--cf-bg); border-radius:999px; padding:3px 9px; }
.as-care-pro-card__meta{ font-size:12px; color:var(--cf-text-soft); margin:0 0 3px; }
.as-care-pro-card__price{ font-size:13px; font-weight:700; color:var(--cf-ink); margin:8px 0 0; }
.as-care-pro-card__cta{ font-size:13px; font-weight:700; color:var(--cf-gold); margin-top:10px; display:inline-flex; align-items:center; gap:5px; }

/* ----- Étape 04 — profil détaillé ----- */
.as-care-profile__header{ display:flex; gap:18px; align-items:flex-start; margin-bottom:24px; }
.as-care-profile__photo{ width:96px; height:96px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.as-care-profile__avatar-fallback{
  width:96px; height:96px; border-radius:50%; background:var(--cf-gold); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:700;
}
.as-care-profile__name{ font-size:22px; font-weight:700; color:var(--cf-ink); margin:0 0 2px; }
.as-care-profile__role{ font-size:14px; color:var(--cf-text-soft); margin:0 0 8px; }
.as-care-profile__section{ margin-bottom:24px; }
.as-care-profile__section-title{ font-size:15px; font-weight:700; color:var(--cf-ink); margin:0 0 10px; }
.as-care-profile__bio{ font-size:14px; line-height:22px; color:var(--cf-ink); margin:0; }
.as-care-profile__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.as-care-profile__tag{ font-size:12px; color:var(--cf-ink); background:var(--cf-bg); border-radius:999px; padding:6px 12px; }
.as-care-profile__line{ font-size:13px; color:var(--cf-text-soft); display:flex; align-items:center; gap:8px; margin:0 0 6px; }

/* ----- Étape 05 — services ----- */
.as-care-services{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .as-care-services{ grid-template-columns:1fr; } }
.as-care-service-card{
  text-align:left; border:2px solid var(--cf-border); border-radius:14px; padding:18px;
  background:var(--cf-surface); cursor:pointer; font-family:inherit;
}
.as-care-service-card.is-selected{ border-color:var(--cf-gold); background:rgba(209,180,121,.06); }
.as-care-service-card__mode{ font-size:14px; font-weight:700; color:var(--cf-ink); margin:0 0 8px; }
.as-care-service-card__price{ font-size:18px; font-weight:700; color:var(--cf-ink); margin:0 0 2px; }
.as-care-service-card__duration{ font-size:12px; color:var(--cf-text-soft); margin:0; }

/* ----- Résumé du motif / demande ----- */
.as-care-motif-card{
  background:var(--cf-bg); border-radius:12px; padding:14px 16px; margin-bottom:20px;
  font-size:13px; color:var(--cf-ink); display:flex; flex-direction:column; gap:4px;
}
.as-care-motif-card strong{ font-weight:700; }
.as-care-flow__cta{ width:100%; min-height:48px; font-size:15px; }
/* AJOUTÉ (23/09) — étape "Disponibilités". */
.as-care-slots-grid{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.as-care-avail-summary{
  background:rgba(209,180,121,.1); border-radius:12px; padding:14px 16px; margin-bottom:16px;
  font-size:14px; color:var(--cf-ink);
}
.as-care-step__actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media (max-width:480px){ .as-care-step__actions{ flex-direction:column-reverse; } .as-care-step__actions .as-care__btn{ width:100%; } }

/* ----- Boutons / champs partagés, repris ----- */
.as-care__btn--ghost{ background:transparent; }
.as-care__success{ text-align:center; padding:40px 16px; }
.as-care__success-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(58,160,107,.12); color:#3aa06b;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.as-care__success-title{ font-size:18px; font-weight:700; color:var(--cf-ink); margin-bottom:8px; }
.as-care__success-text{ font-size:14px; color:var(--cf-text-soft); margin-bottom:20px; max-width:380px; margin-left:auto; margin-right:auto; }
.as-care__empty{ text-align:center; padding:32px 16px; color:#5a5346; }

/* ----- Squelette de chargement, listé section 49 de la mission ----- */
.as-care-skel-card{ background:var(--cf-surface); border:1px solid var(--cf-border); border-radius:16px; padding:18px 20px; margin-bottom:14px; }
.as-care-skel-line{ height:12px; border-radius:6px; background:var(--cf-border); animation:as-care-skel-pulse 1.4s ease-in-out infinite; }
@keyframes as-care-skel-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

/* ===================== Mon suivi — refonte UX/UI dédiée ===================== */
/* Charte fournie, valeurs exactes : or #D1B479, noir #121314, fond
   #F8F8F6, surface #FFFFFF, texte secondaire #6F6F6A, bordure #E8E6DF.
   L'or sert d'accent (CTA, état actif, progression) -- jamais toute
   la surface de l'écran. */
.as-mysuivi{
  --my-gold:#D1B479;
  --my-ink:#121314;
  --my-bg:#F8F8F6;
  --my-surface:#FFFFFF;
  --my-text-soft:#6F6F6A;
  --my-border:#E8E6DF;
  background:var(--my-bg) !important;
  padding:24px var(--space-7, 32px) 80px;
}
/* CORRIGÉ (19/09) — réplique précise du repère fourni (mesures
   exactes) : Historique et Dernier message forment une paire
   proche de 50/50 (48.4% / 50.1%), PAS un regroupement des tuiles
   d'options à côté du message comme la version précédente le
   faisait -- les tuiles (rendez-vous/recommandations/suivi) et
   Évolution redeviennent des rangées séparées, pleine largeur,
   juste en dessous. Une seule colonne en dessous de 768px. */
.as-mysuivi__msg-row{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
@media (min-width:768px){
  .as-mysuivi__msg-row{ grid-template-columns:48.4% 50.1%; justify-content:space-between; align-items:start; }
}
.as-mysuivi__header{ margin:16px 0 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
/* AJOUTÉ (19/09) — signalé en conditions réelles : le parcours donnait
   l'impression d'être centré sur un seul professionnel, alors que
   rien n'empêche déjà de contacter quelqu'un d'autre (vérifié dans
   handle_care_create_case_request() -- aucune contrainte de dossier
   unique). Le manque était uniquement la visibilité de cette option
   depuis "Mon suivi" lui-même. */
.as-mysuivi__header-cta{
  font-size:13px; font-weight:600; color:var(--my-ink);
  background:var(--my-surface); border:1px solid var(--my-border);
  border-radius:999px; padding:10px 18px; cursor:pointer; font-family:inherit;
  flex-shrink:0; min-height:40px;
}
.as-mysuivi__header-cta:hover{ border-color:var(--my-gold); }
.as-mysuivi__title{ font-size:32px; line-height:40px; font-weight:700; color:var(--my-ink); margin:0 0 4px; }
.as-mysuivi__subtitle{ font-size:15px; line-height:24px; color:var(--my-text-soft); margin:0; }

/* ----- Chargement : squelette calme, jamais un écran vide ----- */
.as-mysuivi__skeleton{ display:flex; flex-direction:column; gap:14px; }
/* CORRIGÉ (19/09) — cause RÉELLE, confirmée avec certitude : cet
   élément se cache via l'attribut HTML "hidden" en JS
   (scan-care-journey.js, load()), mais display:flex ci-dessus a
   exactement la même priorité que la règle native du navigateur
   pour [hidden] (display:none) -- une règle d'auteur l'emporte
   toujours sur celle du navigateur à priorité égale, donc "hidden"
   ne faisait plus rien du tout ici. Le squelette restait visible en
   permanence, superposé au vrai contenu une fois chargé -- jamais un
   problème de cache ou de timing. Forcé explicitement, !important,
   même principe déjà éprouvé pour le bug d'opacité de l'incident
   "Mon suivi" précédent. */
.as-mysuivi__skeleton[hidden]{ display:none !important; }
.as-mysuivi__skel{
  background:linear-gradient(90deg, var(--my-border) 25%, #f2f1ec 37%, var(--my-border) 63%);
  background-size:400% 100%;
  animation:asMysuiviShimmer 1.6s ease infinite;
  border-radius:14px;
}
.as-mysuivi__skel--pro{ height:64px; }
.as-mysuivi__skel--status{ height:32px; width:180px; }
.as-mysuivi__skel--action{ height:110px; }
.as-mysuivi__skel--line{ height:18px; width:70%; }
@keyframes asMysuiviShimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce){ .as-mysuivi__skel{ animation:none; } }

/* ----- Erreur / vide : centrés, humains, jamais techniques ----- */
.as-mysuivi__error, .as-mysuivi__empty{
  background:var(--my-surface);
  border:1px solid var(--my-border);
  border-radius:16px;
  padding:40px 24px;
  text-align:center;
}
.as-mysuivi__empty-title{ font-size:18px; font-weight:700; color:var(--my-ink); margin:0 0 8px; }
.as-mysuivi__empty-text{ font-size:14px; color:var(--my-text-soft); margin:0 0 20px; max-width:420px; margin-left:auto; margin-right:auto; }
#as-mysuivi-error p{ font-size:15px; color:var(--my-ink); margin:0 0 16px; }

/* ----- Disposition générale, réplique précise du repère fourni
   (référence desktop 1214×1295, proportions converties en %,
   jamais des pixels figés) :
   - Le récapitulatif/aide n'accompagne QUE le bloc d'intro
     (professionnel + statut + parcours), jamais toute la page.
   - Tout le reste (prochaine étape, historique/message,
     rendez-vous/recommandations/suivi, évolution) redevient pleine
     largeur du contenu en dessous de ce bloc.
   Trois paliers, comme demandé : <768px une seule colonne partout,
   768–1199px structure adaptée (rapport de colonnes resserré),
   ≥1200px structure exacte du repère (≈67%/29%). ----- */
.as-mysuivi__top-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px; }
@media (min-width:768px) and (max-width:1199px){
  .as-mysuivi__top-grid{ grid-template-columns:1fr 34%; align-items:start; }
}
@media (min-width:1200px){
  .as-mysuivi__top-grid{ grid-template-columns:67% 28.7%; justify-content:space-between; align-items:start; }
}
.as-mysuivi__top-main{ min-width:0; }
.as-mysuivi__top-aside{ display:flex; flex-direction:column; gap:16px; min-width:0; }

/* ----- En-tête professionnel : réassurance, jamais un profil social ----- */
.as-mysuivi__pro{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--my-surface);
  border:1px solid var(--my-border);
  border-radius:16px;
  padding:20px;
  margin-bottom:16px;
  position:relative;
}
.as-mysuivi__pro-avatar{
  width:64px; height:64px; border-radius:50%;
  background:var(--my-gold); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; flex-shrink:0;
  object-fit:cover;
}
/* CORRIGÉ (23/09) — signalé : vérification responsive mobile complète.
   Sans min-width:0, ce conteneur flex ne peut pas rétrécir en dessous
   de la largeur naturelle de son contenu (nom long, nombreux tags) --
   risque réel de débordement horizontal de toute la carte sur un
   écran étroit (375px). */
.as-mysuivi__pro-body{ min-width:0; flex:1; }
.as-mysuivi__pro-name{ font-size:17px; font-weight:700; color:var(--my-ink); margin:0; }
.as-mysuivi__pro-role{ font-size:13px; color:var(--my-text-soft); margin:2px 0 8px; }
.as-mysuivi__pro-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.as-mysuivi__pro-tag{ font-size:12px; color:var(--my-text-soft); }
.as-mysuivi__pro-tag:not(:last-child)::after{ content:'·'; margin-left:6px; color:var(--my-border); }
.as-mysuivi__pro-meta{ display:flex; flex-wrap:wrap; gap:14px; row-gap:6px; }
.as-mysuivi__pro-meta-item{ font-size:12px; color:var(--my-text-soft); display:inline-flex; align-items:center; gap:5px; margin-right:14px; white-space:nowrap; }
.as-mysuivi__pro-meta-item svg{ flex-shrink:0; }
.as-mysuivi__pro-view-btn{
  position:absolute; top:20px; right:20px;
  font-size:12px; font-weight:600; color:var(--my-ink);
  background:transparent; border:1px solid var(--my-border); border-radius:999px;
  padding:7px 14px; cursor:pointer; font-family:inherit;
}
.as-mysuivi__pro-view-btn:hover{ border-color:var(--my-gold); }
/* AJOUTÉ (19/09) — détails du profil dépliés au clic sur "Voir le
   profil", signalé en conditions réelles. */
.as-mysuivi__pro-more{ margin-top:10px; padding-top:10px; border-top:1px solid var(--my-border); }
.as-mysuivi__pro-more-line{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--my-text-soft); margin:0 0 6px; }
.as-mysuivi__pro-more-bio{ font-size:13px; line-height:19px; color:var(--my-ink); margin:0; }

/* ----- Statut : bannière, jamais un statut technique affiché tel quel ----- */
.as-mysuivi__status{
  display:flex; align-items:center; gap:14px;
  background:var(--my-surface); border:1px solid var(--my-border);
  border-radius:16px; padding:16px 20px; margin-bottom:16px;
}
.as-mysuivi__status-icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(58,160,107,.12); color:#3aa06b;
}
.as-mysuivi__status--declined .as-mysuivi__status-icon{ background:rgba(179,67,43,.12); color:#b3432b; }
.as-mysuivi__status--review .as-mysuivi__status-icon{ background:rgba(209,180,121,.18); color:var(--my-gold); }
.as-mysuivi__status-body{ flex:1; min-width:0; }
.as-mysuivi__status-title{ font-size:15px; font-weight:700; color:var(--my-ink); margin:0; }
.as-mysuivi__status-sub{ font-size:13px; color:var(--my-text-soft); margin:2px 0 0; }
.as-mysuivi__status-pill{
  font-size:12px; font-weight:600; color:var(--my-ink);
  background:var(--my-bg); border:1px solid var(--my-border);
  border-radius:999px; padding:6px 14px; flex-shrink:0;
}

/* ----- Prochaine étape : le composant le plus important de l'écran --
   fond clair (pas sombre), pour rester lisible et cohérent avec le
   reste de l'écran, l'or reste réservé à l'accent (icône, bouton). ----- */
.as-mysuivi__next{
  display:flex; gap:16px;
  background:#F6EFDE;
  border-radius:18px;
  padding:22px 24px;
  margin-bottom:20px;
}
.as-mysuivi__next-icon{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--my-gold); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
/* CORRIGÉ (23/09) — même correctif : le texte peut contenir un motif
   de refus en texte libre, sur la carte la plus visible de l'écran. */
.as-mysuivi__next-body{ min-width:0; flex:1; }
.as-mysuivi__next-label{ font-size:12px; line-height:18px; font-weight:700; color:var(--my-text-soft); margin:0 0 4px; }
.as-mysuivi__next-text{ font-size:16px; line-height:23px; font-weight:700; color:var(--my-ink); margin:0 0 4px; }
.as-mysuivi__next-sub{ font-size:13px; line-height:20px; color:var(--my-text-soft); margin:0 0 14px; }
.as-mysuivi__next-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.as-mysuivi__next .as-care__btn--primary{
  background:var(--my-gold); border-color:var(--my-gold); color:#fff;
  font-weight:700; min-height:44px; padding:0 20px;
}
.as-mysuivi__next .as-care__btn--primary:hover{ filter:brightness(1.05); }
.as-mysuivi__next-link{ font-size:13px; font-weight:600; color:var(--my-ink); background:none; border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; }

/* ----- Progression du parcours : discrète, jamais un Gantt ----- */
.as-mysuivi__journey{ display:flex; align-items:flex-start; gap:4px; margin-bottom:20px; padding:16px 20px; background:var(--my-surface); border:1px solid var(--my-border); border-radius:16px; }
.as-mysuivi__journey-step{ flex:1; text-align:center; position:relative; }
.as-mysuivi__journey-dot{
  width:22px; height:22px; border-radius:50%; background:var(--my-surface); border:2px solid var(--my-border);
  margin:0 auto 8px; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.as-mysuivi__journey-step--done .as-mysuivi__journey-dot{ background:var(--my-gold); border-color:var(--my-gold); color:#fff; }
.as-mysuivi__journey-step--current .as-mysuivi__journey-dot{ border-color:var(--my-gold); box-shadow:0 0 0 4px rgba(209,180,121,.25); }
.as-mysuivi__journey-step::after{
  content:''; position:absolute; top:10px; left:50%; width:100%; height:2px; background:var(--my-border); z-index:0;
}
.as-mysuivi__journey-step:first-child::after{ display:none; }
.as-mysuivi__journey-step--done::after{ background:var(--my-gold); }
.as-mysuivi__journey-label{ font-size:11px; font-weight:600; color:var(--my-text-soft); line-height:14px; }
.as-mysuivi__journey-step--current .as-mysuivi__journey-label{ color:var(--my-ink); }
.as-mysuivi__journey-date{ font-size:10px; color:var(--my-text-soft); margin-top:2px; }

/* ----- Sections secondaires : réutilisent le même gabarit de carte ----- */
.as-mysuivi__section{
  background:var(--my-surface); border:1px solid var(--my-border);
  border-radius:16px; padding:18px 20px; margin-bottom:14px;
}
.as-mysuivi__section-title{ font-size:14px; font-weight:700; color:var(--my-ink); margin:0 0 14px; }
.as-mysuivi__section-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.as-mysuivi__badge{ font-size:11px; font-weight:700; color:var(--my-ink); background:#F6EFDE; border-radius:999px; padding:3px 10px; }

/* ----- Fil chronologique : événements réels uniquement ----- */
.as-mysuivi__timeline-item{ display:flex; gap:12px; padding-bottom:16px; position:relative; }
/* CORRIGÉ (23/09) — même correctif que .as-mysuivi__pro-body : la
   sous-ligne peut contenir un motif de refus en texte libre. */
.as-mysuivi__timeline-body{ min-width:0; flex:1; }
.as-mysuivi__timeline-item:not(:last-child)::before{
  content:''; position:absolute; left:9px; top:22px; bottom:0; width:1px; background:var(--my-border);
}
.as-mysuivi__timeline-dot{
  width:20px; height:20px; border-radius:50%; background:rgba(58,160,107,.12); color:#3aa06b;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.as-mysuivi__timeline-date{ font-size:11px; color:var(--my-text-soft); margin:0 0 2px; }
.as-mysuivi__timeline-title{ font-size:13px; font-weight:700; color:var(--my-ink); margin:0; }
.as-mysuivi__timeline-sub{ font-size:12px; color:var(--my-text-soft); margin:2px 0 0; }

/* ----- Aperçu de conversation : jamais tout l'écran ----- */
.as-mysuivi__msg-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.as-mysuivi__msg-avatar{ width:32px; height:32px; border-radius:50%; background:var(--my-gold); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.as-mysuivi__msg-name{ font-size:13px; font-weight:700; color:var(--my-ink); margin:0; }
.as-mysuivi__msg-time{ font-size:11px; color:var(--my-text-soft); margin:0; }
.as-mysuivi__msg-preview-body{ font-size:13px; color:var(--my-text-soft); margin:4px 0 0; max-width:100%; line-height:19px; }
.as-mysuivi__msg-link{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:13px; font-weight:600; color:var(--my-ink); background:none; border:none; padding:0; cursor:pointer; font-family:inherit; width:100%; text-align:left; }

/* ----- Rendez-vous / Recommandations / Suivi -- rangée séparée,
   pleine largeur du contenu, trois colonnes quasi égales (≈31%
   chacune dans le repère fourni). Une seule colonne sous 768px, deux
   entre 768 et 1199px (la troisième tuile redescend), trois à partir
   de 1200px comme dans le repère. ----- */
.as-mysuivi__triple{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
@media (min-width:768px) and (max-width:1199px){
  .as-mysuivi__triple{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1200px){
  .as-mysuivi__triple{ grid-template-columns:1fr 1fr 1fr; }
}

/* ----- Tuiles d'options (rendez-vous / recommandations / suivi),
   dans .as-mysuivi__triple ci-dessus. Évolution réutilise le même
   gabarit visuel mais en pleine largeur (voir .as-mysuivi__evolution
   plus bas). ----- */
.as-mysuivi__tile{ background:var(--my-surface); border:1px solid var(--my-border); border-radius:16px; padding:18px; }
.as-mysuivi__tile-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.as-mysuivi__tile-title{ font-size:13px; font-weight:700; color:var(--my-ink); margin:0; }
.as-mysuivi__tile-sub{ font-size:11px; color:var(--my-text-soft); margin:0; }
.as-mysuivi__appt-when{ font-size:14px; font-weight:700; color:var(--my-ink); margin:0; }
.as-mysuivi__appt-mode{ font-size:12px; color:var(--my-text-soft); margin:2px 0 12px; }
.as-mysuivi__appt-reason{ font-size:12px; color:var(--my-text-soft); background:var(--my-bg); border-radius:8px; padding:8px 10px; margin:0 0 12px; }
/* AJOUTÉ (19/09) — signalé en conditions réelles : statut réel du
   rendez-vous, jamais une promesse de fonctionnalité qui n'existe
   pas (voir aussi nextActionCardHtml() côté JS, même correction). */
.as-mysuivi__appt-status{ font-size:12px; color:var(--my-text-soft); margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.as-mysuivi__appt-status--confirmed{ color:#3aa06b; font-weight:600; }
.as-mysuivi-new-appt{ width:100%; font-size:12px; padding:0 12px; min-height:38px; }
.as-mysuivi__tile-pending{
  background:var(--my-bg); border-radius:12px; padding:20px 12px; text-align:center;
  color:var(--my-text-soft); font-size:12px; margin-bottom:12px;
}
.as-mysuivi__tile-pending:last-child{ margin-bottom:0; }

/* ----- Évolution : bannière pleine largeur, renvoie vers l'écran
   d'évolution du Scan déjà existant -- jamais une nouvelle donnée
   inventée pour cet écran précis. ----- */
.as-mysuivi__evolution{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--my-surface); border:1px solid var(--my-border); border-radius:16px; padding:18px 20px;
}
.as-mysuivi__evolution-left{ display:flex; align-items:center; gap:12px; }

/* ----- Récapitulatif (colonne latérale) ----- */
.as-mysuivi__recap-row{ display:flex; align-items:center; gap:10px; padding:12px 0; cursor:default; }
.as-mysuivi__recap-row:not(:last-child){ border-bottom:1px solid var(--my-border); }
.as-mysuivi__recap-icon{ width:32px; height:32px; border-radius:50%; background:var(--my-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--my-text-soft); }
/* CORRIGÉ (23/09) — même correctif que .as-mysuivi__pro-body : le
   motif (colonne "Motif") est du texte libre potentiellement long,
   risque de débordement réel sur la colonne latérale, plus étroite
   que la carte principale. */
.as-mysuivi__recap-body{ min-width:0; flex:1; overflow-wrap:break-word; }
.as-mysuivi__recap-label{ font-size:11px; color:var(--my-text-soft); margin:0; }
.as-mysuivi__recap-value{ font-size:13px; font-weight:700; color:var(--my-ink); margin:2px 0 0; }
.as-mysuivi__help-btn{
  width:100%; margin-top:12px; background:var(--my-ink); color:#fff; border:none;
  border-radius:10px; padding:12px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}

/* ----- Autres démarches : compact, jamais dominant ----- */
.as-mysuivi__others{ margin-top:28px; }
.as-mysuivi__others-title{ font-size:13px; font-weight:700; color:var(--my-text-soft); text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }
.as-mysuivi__other-card{
  display:block; width:100%; text-align:left; background:var(--my-surface);
  border:1px solid var(--my-border); border-radius:12px; padding:12px 16px;
  margin-bottom:8px; cursor:pointer; font-family:inherit;
}
.as-mysuivi__other-card:hover{ border-color:var(--my-gold); }
.as-mysuivi__other-pro{ font-size:13px; font-weight:600; color:var(--my-ink); }
.as-mysuivi__other-status{ font-size:12px; color:var(--my-text-soft); margin-top:2px; }

.as-my-care-thread{ margin-top:12px; background:var(--my-bg, #F8F8F6); border-radius:12px; padding:12px; }
.as-my-care-thread__messages{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; margin-bottom:10px; }
.as-thread-bubble{ max-width:80%; padding:8px 12px; border-radius:10px; font-size:13px; color:#17140f; }
.as-thread-bubble p{ margin:0; white-space:pre-wrap; word-break:break-word; }
.as-thread-bubble--mine{ align-self:flex-end; background:#f0e2bd; }
.as-thread-bubble--theirs{ align-self:flex-start; background:#fff; border:1px solid #eee; }
/* AJOUTÉ (19/09) — signal visuel pour un message arrivé pendant un
   rafraîchissement en arrière-plan, conception validée (option A,
   rafraîchissement périodique) : une légère mise en évidence qui
   s'estompe d'elle-même, jamais de son ni de popup à ce stade. */
.as-thread-bubble--new{ animation:asThreadBubbleNew 2.5s ease; }
@keyframes asThreadBubbleNew{
  0%{ background:rgba(209,180,121,.35); }
  100%{ background:transparent; }
}
.as-my-care-thread__compose{ display:flex; flex-direction:column; gap:8px; }
/* AJOUTÉ (19/09) — signalé en conditions réelles : "le patient doit
   pouvoir partager des scans dans la messagerie". */
.as-thread-scan-card{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(209,180,121,.15); border-radius:8px; padding:8px 10px;
  font-size:12px; font-weight:600;
}
.as-thread-scan-card p{ width:100%; font-weight:400; margin:4px 0 0 !important; }
.as-thread-attach-preview{
  display:flex; flex-wrap:wrap; gap:6px; font-size:12px;
}
.as-thread-attach-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(209,180,121,.15); border-radius:999px; padding:5px 8px 5px 10px;
}
.as-thread-attach-remove{ background:none; border:none; cursor:pointer; font-size:14px; color:#5a5346; line-height:1; padding:0; }
.as-thread-compose-actions{ display:flex; gap:8px; align-items:center; }
.as-thread-attach-toggle{ font-size:12px; padding:0 10px; min-height:34px; }
.as-thread-scan-picker{ display:flex; flex-wrap:wrap; gap:6px; }
.as-thread-scan-option{
  font-size:12px; padding:6px 10px; border:1px solid #ddd; border-radius:8px;
  background:#fff; cursor:pointer; font-family:inherit;
}
.as-thread-scan-option:hover{ border-color:#d1b479; }
/* AJOUTÉ (19/09) — sélection multiple de scans, signalé en
   conditions réelles. */
.as-thread-scan-option--selected{ background:#d1b479; border-color:#d1b479; color:#fff; font-weight:600; }
.as-thread-input{
  width:100%;
  border:1px solid #ddd;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  font-family:inherit;
  color:#17140f;
  background:#fff;
  resize:vertical;
}

/* ----- Mon suivi — responsive (même point de rupture que le reste
   de ce fichier, 767px) ----- */
@media (max-width:767px){
  .as-mysuivi{ padding:16px 16px 90px; }
  .as-mysuivi__header-cta{ width:100%; }
  .as-mysuivi__title{ font-size:26px; line-height:32px; }
  .as-mysuivi__next{ padding:20px; flex-direction:column; }
  .as-mysuivi__next-text{ font-size:16px; line-height:23px; }
  .as-mysuivi__next .as-care__btn--primary{ width:100%; min-height:48px; }
  .as-mysuivi__pro{ padding:14px 16px; flex-wrap:wrap; }
  .as-mysuivi__pro-view-btn{ position:static; margin-top:10px; }
  .as-mysuivi__section{ padding:16px; }
  /* CORRIGÉ (19/09) — six étapes ne tiennent pas sur 375px sans
     déborder ni devenir illisibles : défilement horizontal plutôt
     que d'écraser le texte ou casser la mise en page. */
  .as-mysuivi__journey{ overflow-x:auto; padding:14px 16px; }
  .as-mysuivi__journey-step{ min-width:64px; }
  .as-mysuivi__journey-label{ font-size:10px; }
  .as-mysuivi__status{ flex-wrap:wrap; }
}