/* ============================================================
   BeautySkIn — feuille de style
   Source de vérité visuelle : design.md (thème par défaut Terracotta crème)
   + amendement THÈMES (6 thèmes via variables CSS) + support RTL.
   Le cadre iPhone de la maquette est un élément de présentation : non repris ici.
   ============================================================ */

/* L'attribut hidden est ECRASE par tout display: explicite (grid, flex...).
   Sans cette regle, un bloc masque en JS reste affiche pour toujours et aucun
   bouton ne peut le fermer. Piege paye le 27/08, puis reutilise le 28/08. */
[hidden]{display:none !important;}

/* ---------- Thème par défaut : NUIT PRUNE · ROSE POUDRÉ (validé par Nathie le 04/08) ----------
   Les noms de variables sont HISTORIQUES (--cream, --brown, --surface…) : ils sont utilisés
   partout, y compris dans les styles en ligne de js/app.js, donc on ne les renomme pas.
   Seules leurs VALEURS changent, ce qui habille toute l'app d'un coup.
   --cream* = fonds sombres · --brown* = textes clairs · --terracotta = accent rose poudré. */
:root{
  /* --surface est un VOILE translucide, pas une couleur pleine : les cartes laissent
     passer les halos roses du fond, exactement comme au miroir. Avec une couleur pleine,
     les pages Moi/Trousse tiraient vers le bleu froid (écart relevé au test du 04/08). */
  --cream:#17101C; --cream-2:#221826; --cream-3:#2C2131; --surface:rgba(255,255,255,.05);
  --terracotta:#E9A8BE; --terracotta-deep:#A85F7C;
  --gold:#E9A8BE; --gold-soft:#2A1C27; --gold-deep:#F2C2D2;
  --brown:#F6F1F4; --brown-soft:rgba(246,241,244,.62); --brown-faint:rgba(246,241,244,.42);
  /* --sage* = la teinte « c'est bon, c'est validé » (badges OK, bouton sauver, interrupteurs
     allumés, toasts, mention idéal). Le nom reste HISTORIQUE comme les autres, il est utilisé
     tel quel dans le CSS et dans js/app.js. Seule la VALEUR change.
     Était un vert sauge #8FB98A, resté de l'ancienne charte : il trouait le prune à 7 endroits.
     Passé au rose de la charte le 06/08, en version CLAIRE pour rester distinct de l'accent. */
  --sage:#F2C2D2; --sage-soft:#2A1C27; --sage-deep:#F2C2D2;
  --border:rgba(255,255,255,.13); --border-soft:rgba(255,255,255,.08);

  --shadow-sm:0 1px 3px rgba(0,0,0,.35);
  --shadow:0 14px 34px -16px rgba(0,0,0,.6);
  --shadow-lg:0 36px 80px -26px rgba(0,0,0,.75);

  --r-lg:26px; --r-md:18px; --r-sm:12px;

  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);
  --btn-on-accent:#1B0F16;         /* l'accent est clair : le texte posé dessus doit être sombre */
}

/* ---------- Les 5 variantes : MÊME grammaire nocturne, seule la teinte d'accent change.
     Avant, elles étaient claires : en choisir une dans Moi rendait l'app incohérente
     (le prune disparaissait partout). Corrigé le 04/08. ---------- */

/* ---------- Variante : Bleu nuit ---------- */
body.theme-bleu-nuit{
  --cream:#101623; --cream-2:#161E2E; --cream-3:#1E2739; --surface:rgba(255,255,255,.05);
  --terracotta:#A8C6E9; --terracotta-deep:#5F7CA8;
  --gold:#A8C6E9; --gold-soft:#1A2434; --gold-deep:#C2D8F2;
  --sage:#C2D8F2; --sage-soft:#1A2434; --sage-deep:#C2D8F2;
  --brown:#F1F3F6; --brown-soft:rgba(241,243,246,.62); --brown-faint:rgba(241,243,246,.42);
  --border:rgba(255,255,255,.13); --border-soft:rgba(255,255,255,.08);
  --btn-on-accent:#0F1620;
}

/* ---------- Variante : Jaune solaire ---------- */
body.theme-jaune-solaire{
  --cream:#1A1509; --cream-2:#221C0E; --cream-3:#2C2414; --surface:rgba(255,255,255,.05);
  --terracotta:#E9CE8A; --terracotta-deep:#A88B3E;
  --gold:#E9CE8A; --gold-soft:#2A2312; --gold-deep:#F2DFAE;
  --sage:#F2DFAE; --sage-soft:#2A2312; --sage-deep:#F2DFAE;
  --brown:#F6F3EA; --brown-soft:rgba(246,243,234,.62); --brown-faint:rgba(246,243,234,.42);
  --border:rgba(255,255,255,.13); --border-soft:rgba(255,255,255,.08);
  --btn-on-accent:#1B1606;
}

/* ---------- Variante : Améthyste ----------
   Était un « Rose poudré » à 0° de teinte, soit 20° du prune par défaut : les deux thèmes
   étaient indistinguables côte à côte (mesuré le 06/08). Passé au violet 270°, la seule
   famille absente de la palette. L'identifiant reste `rose-poudre` : il est utilisé dans
   js/app.js, dans THEME_KEY et dans les préférences déjà enregistrées sur les téléphones. */
body.theme-rose-poudre{
  --cream:#151024; --cream-2:#1C1630; --cream-3:#251E3B; --surface:rgba(255,255,255,.05);
  --terracotta:#C6A8E9; --terracotta-deep:#7C5FA8;
  --gold:#C6A8E9; --gold-soft:#241C33; --gold-deep:#DCC8F2;
  --sage:#DCC8F2; --sage-soft:#241C33; --sage-deep:#DCC8F2;
  --brown:#F3F1F6; --brown-soft:rgba(243,241,246,.62); --brown-faint:rgba(243,241,246,.42);
  --border:rgba(255,255,255,.13); --border-soft:rgba(255,255,255,.08);
  --btn-on-accent:#160F20;
}

/* ---------- Variante : Vert sauge ---------- */
body.theme-vert-sauge{
  --cream:#111811; --cream-2:#172017; --cream-3:#1F2A1E; --surface:rgba(255,255,255,.05);
  --terracotta:#A8D0A0; --terracotta-deep:#5F8A57;
  --gold:#A8D0A0; --gold-soft:#1A2419; --gold-deep:#C2E2BB;
  --sage:#C2E2BB; --sage-soft:#1A2419; --sage-deep:#C2E2BB;
  --brown:#F1F5F0; --brown-soft:rgba(241,245,240,.62); --brown-faint:rgba(241,245,240,.42);
  --border:rgba(255,255,255,.13); --border-soft:rgba(255,255,255,.08);
  --btn-on-accent:#0F160E;
}

/* ---------- Variante : Sombre argent ----------
   L'accent bronze était à 36° de teinte, soit 7° du Jaune solaire : les deux se confondaient.
   Passé à un neutre argenté, ce qui correspond enfin au nom du thème : c'est le seul choix
   vraiment sobre de la liste, sans teinte dominante. */
body.theme-sombre{
  --cream:#121316; --cream-2:#191B1F; --cream-3:#22252A; --surface:rgba(255,255,255,.05);
  --terracotta:#C8CED6; --terracotta-deep:#7E868F;
  --gold:#C8CED6; --gold-soft:#1D2024; --gold-deep:#DDE2E8;
  --sage:#DDE2E8; --sage-soft:#1D2024; --sage-deep:#DDE2E8;
  --brown:#F2F4F6; --brown-soft:rgba(242,244,246,.62); --brown-faint:rgba(242,244,246,.42);
  --border:rgba(255,255,255,.13); --border-soft:rgba(255,255,255,.08);
  --btn-on-accent:#101216;
}

/* ---------- Les 3 thèmes CLAIRS (26/10/2026, décision de Nathie) ----------
   Retour d'Olivier, son testeur : « on n'a que des modes sombres ». Valeurs validées par
   Nathie en démo, reprises telles quelles. MÊMES jetons que les 6 sombres (noms historiques :
   --cream = fond, --brown = texte, --terracotta = accent). Ici, --gold-deep et --terracotta-deep
   sont PLUS FONCÉS que l'accent (dans les sombres, --gold-deep est plus clair) : le texte posé
   sur l'accent est donc blanc. js/app.js ajoute aussi la classe body.theme-clair, qui porte
   les retouches communes aux 3 (en fin de fichier) : les 6 sombres n'en reçoivent aucune. */

/* ---------- Thème clair : Porcelaine rosée (la charte prune et rose, en version jour) ---------- */
body.theme-porcelaine{
  --cream:#FBF4F7; --cream-2:#F4E8EE; --cream-3:#EBDCE4; --surface:rgba(255,255,255,.72);
  --terracotta:#A2486F; --terracotta-deep:#7C3556;
  --gold:#A2486F; --gold-soft:#F3E2EA; --gold-deep:#7C3556;
  --sage:#8E3E62; --sage-soft:#F3E2EA; --sage-deep:#7C3556;
  --brown:#2B1621; --brown-soft:rgba(43,22,33,.70); --brown-faint:rgba(43,22,33,.50);
  --border:rgba(43,22,33,.14); --border-soft:rgba(43,22,33,.08);
  --shadow-sm:0 1px 3px rgba(80,30,55,.10); --shadow:0 14px 34px -18px rgba(80,30,55,.28); --shadow-lg:0 36px 80px -30px rgba(80,30,55,.32);
  --btn-on-accent:#FFFFFF;
}

/* ---------- Thème clair : Ivoire doré (crème et or, lumineux) ---------- */
body.theme-ivoire{
  --cream:#FAF6EE; --cream-2:#F2EADC; --cream-3:#E8DDC9; --surface:rgba(255,255,255,.72);
  --terracotta:#8C6420; --terracotta-deep:#6B4A14;
  --gold:#8C6420; --gold-soft:#F1E6CF; --gold-deep:#6B4A14;
  --sage:#7A5719; --sage-soft:#F1E6CF; --sage-deep:#6B4A14;
  --brown:#2A2014; --brown-soft:rgba(42,32,20,.70); --brown-faint:rgba(42,32,20,.50);
  --border:rgba(42,32,20,.14); --border-soft:rgba(42,32,20,.08);
  --shadow-sm:0 1px 3px rgba(70,50,20,.10); --shadow:0 14px 34px -18px rgba(70,50,20,.26); --shadow-lg:0 36px 80px -30px rgba(70,50,20,.30);
  --btn-on-accent:#FFFFFF;
}

/* ---------- Thème clair : Lin sauge (vert doux et lin, apaisant) ---------- */
body.theme-lin{
  --cream:#F4F6F1; --cream-2:#E9EEE5; --cream-3:#DDE5D8; --surface:rgba(255,255,255,.72);
  --terracotta:#4E7748; --terracotta-deep:#3A5B35;
  --gold:#4E7748; --gold-soft:#E2ECDD; --gold-deep:#3A5B35;
  --sage:#446A3F; --sage-soft:#E2ECDD; --sage-deep:#3A5B35;
  --brown:#1D261B; --brown-soft:rgba(29,38,27,.70); --brown-faint:rgba(29,38,27,.50);
  --border:rgba(29,38,27,.14); --border-soft:rgba(29,38,27,.08);
  --shadow-sm:0 1px 3px rgba(30,50,30,.10); --shadow:0 14px 34px -18px rgba(30,50,30,.24); --shadow-lg:0 36px 80px -30px rgba(30,50,30,.28);
  --btn-on-accent:#FFFFFF;
}

/* ---------- Bandeau de consentement (module commun css/nd-mesure.css, 19/10/2026) ----------
   Habillé à la charte Nuit prune · rose poudré en REPRENANT les variables ci-dessus.
   Posées sur le bandeau lui-même (et pas sur :root) : ainsi, quand une variante body.theme-*
   est choisie dans Moi, le bandeau prend aussi sa teinte. Une valeur var() posée sur :root
   serait figée sur le prune, même dans un autre thème. */
.nd-consentement{
  --nd-fond:var(--cream-2);
  --nd-texte:var(--brown);
  --nd-doux:var(--brown-soft);
  --nd-accent:var(--terracotta);
  --nd-sur-accent:var(--btn-on-accent);
  --nd-trait:var(--border);
  --nd-police:var(--font-body);
  --nd-police-titre:var(--font-display);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font-body); color:var(--brown);
  background:var(--cream);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background .25s var(--ease), color .25s var(--ease);
}
button{font-family:inherit; color:inherit;}
img,svg{display:block;}
:focus-visible{outline:3px solid color-mix(in srgb, var(--terracotta) 60%, white); outline-offset:2px; border-radius:10px;}
.field:focus-visible{outline-offset:0; border-color:var(--terracotta);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;}
}

/* ============================================================
   Coque application (plein écran mobile, colonne centrée sur grand écran)
   ============================================================ */
.app{
  position:relative;
  width:100%; max-width:480px; margin:0 auto;
  height:100dvh; min-height:0;
  display:flex; flex-direction:column;
  /* Les halos larges : c'est ce qui empêche le fond d'être plat (grammaire VoiceCoach).
     Ils étaient codés en ROSE EN DUR : en thème Bleu nuit ou Vert sauge, on avait donc des
     halos roses sur un fond bleu ou vert. Ils suivent maintenant l'accent du thème.
     Intensités : 14/13/9 % à l'origine, montées à 22/20/14 % le 06/08 (« éclat doux »),
     puis à 58/48/34 % sans que ce commentaire suive. À ce niveau le fond n'était plus
     prune mais rose clair dans les coins, et plus aucun rose ne pouvait ressortir dessus :
     c'est ce que Nathie appelait « délavé ». Ramenées à 16/13/9 % le 14/09/2026, à sa
     demande, sans toucher à aucune couleur. VoiceCoach, pour comparaison, plafonne à 22 %. */
  background:
    radial-gradient(circle at -10% -14%, color-mix(in srgb, var(--gold-deep) 16%, transparent) 0%, transparent 66%),
    radial-gradient(circle at 106% -8%, color-mix(in srgb, var(--terracotta-deep) 13%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 76% 106%, color-mix(in srgb, var(--terracotta) 9%, transparent) 0%, transparent 56%),
    var(--cream);
  overflow:hidden;
}
.scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 20px 26px; scroll-behavior:smooth;
}
/* Après la règle .scroll, sinon elle l'emporte et la page glisse même en mouvement réduit (30/10/2026) */
@media (prefers-reduced-motion: reduce){ .scroll{scroll-behavior:auto;} }
.scroll::-webkit-scrollbar{width:0;}
.safe-bottom{height:8px;}

/* Barres système Android : avec Capacitor 8 + viewport-fit=cover (WebView 140 et plus), la page doit
   réserver elle-même la place des barres, sinon le menu passe sous les boutons de navigation
   et l'en-tête sous la barre d'état. env() vaut 0 dans un navigateur classique. 12/09/2026 */
/* ---------- tabbar ---------- */
.tabbar{
  flex:none; display:flex; gap:2px; padding:8px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border-soft);
}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:52px; padding:7px 0 4px; border:0; background:none; color:var(--brown-faint); cursor:pointer; border-radius:16px; transition:color .2s var(--ease), transform .12s var(--ease);}
.tab svg{width:25px; height:25px;}
.tab span{font-size:11px; font-weight:600; letter-spacing:.02em;}
.tab.active{color:var(--terracotta);}
/* Option A (12/09/2026) : la caméra au centre, en gros bouton rond à l'accent, surélevé
   au-dessus de la barre. Sans libellé : l'icône suffit, le nom reste en aria-label. */
.tab.tab-camera{flex:0 0 auto; min-height:0; width:64px; height:64px; margin:-30px 10px 0; padding:0; border-radius:50%; justify-content:center; background:linear-gradient(135deg, var(--gold-deep), var(--terracotta)); color:var(--btn-on-accent); box-shadow:0 12px 28px -10px color-mix(in srgb, var(--terracotta) 80%, transparent), 0 0 0 5px var(--cream);}
.tab.tab-camera svg{width:30px; height:30px;}
.tab.tab-camera span{display:none;}
.tab.tab-camera.active{color:var(--btn-on-accent);}
.tab:active{transform:scale(.96);}
.app.onboarding .tabbar{display:none;}
.app.onboarding .scroll{padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px));}

/* ---------- avatar (profil) ---------- */
.avatar{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none;}
.avatar-ini{display:grid; place-items:center; background:var(--terracotta); color:var(--btn-on-accent); font-family:var(--font-display); font-size:22px;}
.avatar-big{width:96px; height:96px; font-size:40px;}
.avatar-sm{width:34px; height:34px; font-size:15px;}

/* ---------- galerie Mes looks (photos) ---------- */
.lookgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.lookph{position:relative; margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--cream); border:1px solid var(--border-soft); cursor:pointer;}
.lookph img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:var(--cream);}
.lookph-empty{aspect-ratio:3/4; display:grid; place-items:center; color:var(--brown-faint);}
.lookph-empty svg{width:34px; height:34px;}
.lookph figcaption{display:flex; justify-content:space-between; align-items:center; gap:6px; padding:7px 9px; font-size:11.5px; color:var(--brown-soft);}
.lookph.selected{outline:3px solid var(--terracotta); outline-offset:-3px;}
.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.compare-grid .lookph{cursor:default;}

/* ---------- views ---------- */
.view{display:none;}
.view.active{display:block; animation:viewIn .28s var(--ease);}
@keyframes viewIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ============================================================
   Typographie
   ============================================================ */
.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep);}
.h1{font-family:var(--font-display); font-weight:600; font-size:27px; line-height:1.16; letter-spacing:-.01em; color:var(--brown); text-wrap:balance;}
.h1 em{font-style:italic; color:var(--terracotta);}
.h2{font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.2; color:var(--brown);}
.lead{font-size:14.5px; line-height:1.58; color:var(--brown-soft); max-width:36ch;}
.muted{color:var(--brown-soft);}
.italic{font-style:italic;}

/* ============================================================
   Boutons
   ============================================================ */
.btn{appearance:none; border:0; width:100%; padding:16px 22px; border-radius:16px; font-size:16px; font-weight:600; letter-spacing:.01em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);}
.btn svg{width:19px; height:19px;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn[disabled]{opacity:.4; pointer-events:none;}
/* éclat doux : dégradé du clair vers l'accent, et halo lumineux au lieu d'une ombre sourde */
.btn-primary{background:linear-gradient(135deg, var(--gold-deep), var(--terracotta)); color:var(--btn-on-accent); box-shadow:0 12px 30px -10px color-mix(in srgb, var(--terracotta) 62%, transparent);}
.btn-primary:hover{background:var(--terracotta-deep);}
.btn-soft{background:var(--surface); color:var(--brown); border:1px solid var(--border);}
.btn-ghost{background:transparent; color:var(--brown-soft); padding:12px;}
.btn-gold{background:transparent; color:var(--gold-deep); border:1.5px solid var(--gold);}
.btn-gold:hover{background:var(--gold-soft);}
.btn-row{display:flex; gap:10px;}
.btn-row .btn{width:auto; flex:1;}

/* ============================================================
   Choix sélectionnables
   ============================================================ */
.stack{display:flex; flex-direction:column; gap:10px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.choice{position:relative; width:100%; text-align:start; background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:15px 16px; cursor:pointer; color:var(--brown); transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); display:flex; align-items:center; gap:13px;}
.choice:hover{border-color:color-mix(in srgb, var(--terracotta) 38%, var(--border));}
.choice.selected{border-color:var(--terracotta); background:color-mix(in srgb, var(--terracotta) 7%, var(--surface)); box-shadow:0 10px 22px -14px color-mix(in srgb, var(--terracotta) 50%, transparent);}
.choice .ic{width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--cream-2); color:var(--terracotta); transition:all .2s var(--ease);}
.choice .ic svg{width:22px; height:22px;}
.choice.selected .ic{background:var(--terracotta); color:var(--btn-on-accent);}
.choice .t{font-weight:600; font-size:15px;}
/* display:block ajoute le 14/09/2026. Sans lui, le nom et sa description sont deux
   elements EN LIGNE : ils se collent (« NaturelleL'effet bonne mine ») et le
   margin-top ci-dessous est ignore. Visible sur 7 choix, dont l'ecran « Ton style »
   que toutes les testeuses traversent. */
.choice .d{display:block; font-size:12.5px; color:var(--brown-soft); margin-top:2px; line-height:1.35;}
.choice.col{flex-direction:column; align-items:flex-start; gap:10px; padding:16px;}
.choice .chk{position:absolute; top:13px; inset-inline-end:14px; width:22px; height:22px; border-radius:50%; background:var(--terracotta); color:var(--btn-on-accent); display:none; place-items:center;}
.choice .chk svg{width:14px; height:14px;}
.choice.selected .chk{display:grid;}

/* ============================================================
   Swatches couleur
   ============================================================ */
.swatches{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
.swatches.six{grid-template-columns:repeat(6,1fr);}
/* contour clair : il était brun à 8 %, donc invisible depuis le passage au fond sombre */
.swatch{aspect-ratio:1; border-radius:14px; border:2px solid var(--border); cursor:pointer; position:relative; transition:transform .18s var(--ease), outline-color .18s;}
.swatch:hover{transform:translateY(-2px);}
.swatch.selected{outline:2.5px solid var(--terracotta); outline-offset:2px; transform:scale(1.05);}
.swatch .sc{position:absolute; inset:0; display:none; place-items:center; color:#fff;}
.swatch.selected .sc{display:grid;}
.swatch .sc svg{width:16px; height:16px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}

/* ============================================================
   Cartes
   ============================================================ */
/* éclat doux : un dégradé très léger au lieu d'un voile plat, la carte capte la lumière du haut */
.card{background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); border:1px solid var(--border); border-radius:var(--r-md); padding:18px; box-shadow:var(--shadow-sm);}
.card-sage{background:var(--sage-soft); border:1px solid color-mix(in srgb, var(--sage) 22%, transparent);}
.card-gold{background:var(--gold-soft); border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);}
.card + .card{margin-top:12px;}

/* ---------- progression / topbar ---------- */
.prog{display:flex; gap:6px; margin:14px 0 2px;}
.prog i{height:4px; flex:1; border-radius:2px; background:var(--border); transition:background .3s var(--ease);}
.prog i.on{background:var(--terracotta);}
.topbar{display:flex; align-items:center; gap:10px; padding:4px 0 6px; min-height:40px;}
.iconbtn{width:44px; height:44px; flex:none; border-radius:13px; border:1px solid var(--border); background:var(--surface); color:var(--brown); display:grid; place-items:center; cursor:pointer; transition:background .2s;}
.iconbtn:hover{background:var(--cream-2);}
.iconbtn svg{width:20px; height:20px;}
.iconbtn.accent{background:var(--terracotta); border-color:var(--terracotta); color:var(--btn-on-accent); width:42px; height:42px;}
[dir="rtl"] .iconbtn.back svg{transform:scaleX(-1);}

/* ============================================================
   Lignes produit
   ============================================================ */
.prow{display:flex; align-items:flex-start; gap:13px; padding:13px 2px; border-bottom:1px solid var(--border-soft);}
.prow:last-child{border-bottom:0;}
.prow .pic{width:46px; height:46px; border-radius:14px; flex:none; background:var(--cream-2); display:grid; place-items:center; color:var(--brown-soft); margin-top:1px;}
.prow .pic svg{width:24px; height:24px;}
.prow .pbody{flex:1; min-width:0;}
.prow .pname{font-weight:600; font-size:14.5px; color:var(--brown);}
.prow .pmeta{font-size:12.5px; color:var(--brown-soft); margin-top:2px; display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.pdot{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--border); display:inline-block; flex:none;}
.prow .pright{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none;}
.badge{font-size:11px; font-weight:600; letter-spacing:.02em; padding:5px 10px; border-radius:999px; white-space:nowrap;}
.badge.ok{background:var(--sage-soft); color:var(--sage-deep);}
.badge.soon{background:var(--gold-soft); color:var(--gold-deep);}
.badge.new{background:color-mix(in srgb, var(--terracotta) 14%, var(--surface)); color:var(--terracotta-deep);}
.linkbtn{background:none; border:0; color:var(--brown-faint); font-size:12px; font-weight:600; cursor:pointer; padding:4px 2px; text-decoration:underline; text-underline-offset:2px;}
.linkbtn:hover{color:var(--terracotta);}
/* 30/09/2026 : « Je l'ai fini » se coupait sur deux lignes alors que la place existait. */
.prow .linkbtn{white-space:nowrap;}
.savebtn{margin-top:9px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; min-height:40px; border-radius:999px; border:1.5px solid var(--sage); background:transparent; color:var(--sage-deep); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .2s var(--ease);}
.savebtn svg{width:15px; height:15px;}
.savebtn:hover{background:var(--sage-soft);}
/* l'onde de sauvegarde suit l'accent du thème, elle était figée sur l'ancien vert */
@keyframes savedPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--sage) 45%, transparent);}100%{box-shadow:0 0 0 16px transparent;}}
.saved-anim{animation:savedPulse .6s var(--ease);}

/* ============================================================
   Look du jour
   ============================================================ */
.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{font-size:12px; font-weight:500; padding:6px 11px; border-radius:999px; background:var(--cream-2); color:var(--brown-soft); display:inline-flex; align-items:center; gap:6px;}
.lstep{display:flex; gap:13px; padding:16px 0; border-bottom:1px solid var(--border-soft);}
.lstep:last-child{border-bottom:0;}
.lnum{width:29px; height:29px; flex:none; border-radius:50%; background:var(--brown); color:var(--cream); font-size:13px; font-weight:600; display:grid; place-items:center;}
.lbody{flex:1; min-width:0;}
.lprod{font-weight:600; font-size:15px; color:var(--brown); display:flex; align-items:center; gap:9px;}
.lpast{width:15px; height:15px; border-radius:50%; border:1.5px solid var(--border); flex:none;}
.ltip{font-size:13.5px; color:var(--brown-soft); margin-top:5px; line-height:1.45;}
.lwhy{font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--brown-soft); margin-top:6px; line-height:1.45;}
.lideal{display:flex; align-items:center; gap:8px; margin-top:7px; font-size:12.5px; font-weight:600; color:var(--sage-deep);}
.lpast-ideal{border-style:dashed; border-color:color-mix(in srgb, var(--brown) 34%, transparent);}
.lideal-ok{display:inline-flex; color:var(--sage);}
.lideal-text{font-size:13px; color:var(--brown-soft); margin-top:4px; line-height:1.45; font-style:italic;}
/* Conseil pro dépliable */
.lpro{margin-top:8px;}
.lpro>summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--gold-deep); padding:4px 0;}
.lpro>summary::-webkit-details-marker{display:none;}
.lpro>summary svg{width:15px; height:15px; transition:transform .2s var(--ease);}
.lpro[open]>summary svg{transform:rotate(90deg);}
[dir="rtl"] .lpro>summary svg{transform:scaleX(-1);}
[dir="rtl"] .lpro[open]>summary svg{transform:rotate(90deg) scaleX(-1);}
.lpro .procontent{font-size:13px; line-height:1.5; color:var(--brown-soft); margin-top:6px; padding:12px 14px; background:var(--gold-soft); border-radius:12px; border:1px solid color-mix(in srgb, var(--gold) 26%, transparent);}

/* ============================================================
   Stats / réglages
   ============================================================ */
.stats3{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat{background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; padding:15px 12px; text-align:center;}
.statnum{font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:30px; line-height:1; letter-spacing:-.01em; transition:transform .25s var(--ease);}
.statlab{font-size:11.5px; color:var(--brown-soft); margin-top:7px; line-height:1.3;}
@keyframes pop{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}}
.pop{animation:pop .4s var(--ease);}

.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid var(--border-soft);}
.set-row:last-child{border-bottom:0;}
/* Ces deux-la sont des <span>, donc INLINE par defaut : le libelle et sa description se
   collaient bout a bout (« Sous-tonA decouvrir », « Mon humeur habituellePre-remplit ton
   rituel chaque matin. ») et le margin-top n'avait aucun effet. Constate sur le telephone
   de Nathie le 29/08. */
.set-row .srlab{display:block; font-size:14.5px; font-weight:500;}
.set-row .srsub{display:block; font-size:12px; color:var(--brown-soft); margin-top:2px;}
/* Sur telephone, une ligne qui contient une liste deroulante passe sur deux lignes :
   le libelle au-dessus, la liste en dessous sur toute la largeur. Mesure a 375 px :
   « Me demander chaque matin » reclame 215 px et n'en avait que 163, le texte etait coupe.
   Si :has() n'est pas reconnu, toute la regle est ignoree et on retombe sur l'ancien
   comportement : aucun risque de casse. */
/* 230 px : l'option la plus longue (« Me demander chaque matin ») demande 215 px de texte,
   plus le padding de 16 px de chaque cote. En dessous, la derniere lettre etait rognee. */
.set-row select.field{width:auto; min-width:230px; max-width:100%;}
@media (max-width: 480px) {
  .set-row:has(select.field){flex-direction:column; align-items:stretch; gap:8px;}
  .set-row:has(select.field) select.field{width:100%; min-width:0;}
}
.switch{width:46px; height:27px; border-radius:999px; background:var(--cream-3); border:0; cursor:pointer; position:relative; transition:background .25s var(--ease); flex:none;}
.switch::after{content:""; position:absolute; top:3px; inset-inline-start:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .25s var(--ease);}
.switch.on{background:var(--sage);}
.switch.on::after{transform:translateX(19px);}
[dir="rtl"] .switch.on::after{transform:translateX(-19px);}

.divider{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--brown-faint); font-size:12px; letter-spacing:.04em;}
.divider::before,.divider::after{content:""; height:1px; flex:1; background:var(--border);}

/* mini-quiz / segmented */
.segrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.seg{padding:9px 14px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); color:var(--brown-soft); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s var(--ease);}
.seg.selected{border-color:var(--terracotta); background:color-mix(in srgb, var(--terracotta) 8%, var(--surface)); color:var(--terracotta-deep);}

/* palette révélée (sous-ton) */
.palette-grid{display:flex; flex-wrap:wrap; gap:14px; margin-top:14px;}
.pal{display:flex; flex-direction:column; align-items:center; gap:7px; width:60px;}
.pal i{width:46px; height:46px; border-radius:50%; box-shadow:var(--shadow-sm); border:2px solid color-mix(in srgb, var(--surface) 70%, transparent);}
.pal span{font-size:11.5px; color:var(--brown-soft); text-align:center; line-height:1.2;}

/* grille de thèmes */
.themegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px;}
.themeswatch{border:1.5px solid var(--border); border-radius:14px; padding:10px 8px 9px; background:var(--surface); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:var(--brown-soft); transition:all .2s var(--ease);}
.themeswatch .dots{display:flex; gap:4px;}
.themeswatch .dots i{width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.08);}
.themeswatch.selected{border-color:var(--terracotta); color:var(--terracotta-deep); box-shadow:0 8px 18px -12px color-mix(in srgb, var(--terracotta) 50%, transparent);}

/* liste de langues */
.langlist{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
.langrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; border-radius:14px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; color:var(--brown); font-size:14.5px; font-weight:500; transition:all .2s var(--ease);}
.langrow:hover{border-color:color-mix(in srgb, var(--terracotta) 38%, var(--border));}
.langrow.selected{border-color:var(--terracotta); background:color-mix(in srgb, var(--terracotta) 7%, var(--surface));}
/* Zones du look (👁️ / 🌸 / 💄) repliables : seule la zone demandée est ouverte */
.lzone{border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--surface); margin-top:10px; overflow:hidden;}
.lzone summary{display:flex; align-items:center; gap:10px; padding:13px 15px; cursor:pointer; list-style:none; font-weight:600; color:var(--brown); font-size:14.5px;}
.lzone summary::-webkit-details-marker{display:none;}
.lzemoji{font-size:20px; line-height:1; flex:none;}
.lztitle{flex:1; min-width:0;}
.lzcount{font-size:12px; font-weight:700; color:var(--terracotta-deep); background:color-mix(in srgb, var(--terracotta) 9%, var(--surface)); border:1px solid var(--border); border-radius:999px; padding:2px 9px; flex:none;}
.lzchev{transition:transform .2s var(--ease); color:var(--brown-faint); flex:none;}
.lzone[open] .lzchev{transform:rotate(90deg);}
.lzbody{padding:2px 15px 12px;}
.iconbtn:disabled{opacity:.35; pointer-events:none;}
.langrow .langmain{display:flex; align-items:center; gap:11px; min-width:0;}
.langrow .lflag{width:27px; height:20px; border-radius:4px; object-fit:cover; flex:none; box-shadow:0 0 0 1px var(--border-soft);}
.langrow .lflag-emoji{width:auto; height:auto; font-size:21px; line-height:1; box-shadow:none;}
.langrow .lnative{color:var(--brown-faint); font-size:13px;}
.langrow .lcheck{color:var(--terracotta); display:none;}
.langrow.selected .lcheck{display:block;}

/* bandeau testeuses */
.tester{margin-top:14px; padding:13px 15px; border-radius:14px; background:var(--gold-soft); border:1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size:13px; line-height:1.5; color:var(--brown); display:flex; gap:10px; align-items:flex-start;}
.tester svg{width:18px; height:18px; color:var(--gold-deep); flex:none; margin-top:1px;}

/* bloc météo */
.weather{margin-top:14px; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border-soft); box-shadow:var(--shadow-sm);}
.weather .wic{width:40px; height:40px; flex:none; border-radius:12px; background:var(--cream-2); display:grid; place-items:center; color:var(--gold-deep);}
.weather .wic svg{width:24px; height:24px;}
.weather .wbody{flex:1; min-width:0;}
.weather .wtemp{font-weight:600; font-size:15px; color:var(--brown);}
.weather .wnote{font-size:12.5px; color:var(--brown-soft); margin-top:2px; line-height:1.4;}

/* ============================================================
   Soleil onboarding
   ============================================================ */
.sun{position:relative; height:128px; margin:8px 0 18px; display:grid; place-items:end center; overflow:hidden;}
/* le dégradé montait vers un doré en dur : depuis que l'accent est rose, il virait au sale.
   Il monte maintenant vers la version claire de l'accent, quel que soit le thème. */
.sun .disc{width:150px; height:75px; border-radius:150px 150px 0 0; background:linear-gradient(to top, var(--gold), var(--gold-deep)); box-shadow:0 -8px 44px -6px color-mix(in srgb, var(--gold) 55%, transparent);}
.sun .arc{position:absolute; bottom:0; border:1.5px solid color-mix(in srgb, var(--gold) 42%, transparent); border-bottom:0; border-radius:999px 999px 0 0;}
.sun .a1{width:210px; height:105px;}
.sun .a2{width:270px; height:135px; border-color:color-mix(in srgb, var(--gold) 26%, transparent);}
.sun .ray{position:absolute; bottom:6px; width:2px; height:30px; border-radius:2px; background:color-mix(in srgb, var(--gold) 50%, transparent); transform-origin:bottom center;}

/* ============================================================
   Toast
   ============================================================ */
.toast{position:fixed; inset-inline:16px; bottom:calc(100px + env(safe-area-inset-bottom, 0px)); max-width:448px; margin:0 auto; background:var(--brown); color:var(--cream); padding:13px 16px; border-radius:15px; font-size:13.5px; font-weight:500; line-height:1.4; box-shadow:var(--shadow); opacity:0; transform:translateY(12px); transition:opacity .25s var(--ease), transform .25s var(--ease); z-index:70; pointer-events:none; display:flex; align-items:center; gap:10px;}
.toast.show{opacity:1; transform:none;}
/* le texte était en blanc sur un fond désormais clair : illisible. Il suit l'accent. */
.toast.sage{background:var(--sage); color:var(--btn-on-accent);}
.toast svg{width:18px; height:18px; flex:none;}

/* ============================================================
   Feuille modale
   ============================================================ */
/* le voile était brun (ancienne charte crème) : sur un fond prune il salissait au lieu d'assombrir */
.sheet-back{position:fixed; inset:0; background:rgba(10,5,12,.58); opacity:0; pointer-events:none; transition:opacity .28s var(--ease); z-index:80; display:flex; align-items:flex-end; justify-content:center;}
.sheet-back.show{opacity:1; pointer-events:auto;}
.sheet{width:100%; max-width:480px; background:var(--cream); border-radius:28px 28px 44px 44px; padding:14px 20px calc(30px + env(safe-area-inset-bottom, 0px)); transform:translateY(100%); transition:transform .32s var(--ease); max-height:90%; overflow-y:auto;}
.sheet-back.show .sheet{transform:none;}
.grab{width:42px; height:5px; border-radius:3px; background:var(--border); margin:0 auto 16px;}
/* Pipette : la video occupe presque toute la feuille, les deux boutons tombaient donc
   sous le pli sur telephone (retour testeur 28/08). La barre reste collee en bas.
   bottom:-30px compense le padding bas de .sheet, sinon un vide apparait sous la barre
   en fin de defilement. Le degrade evite une coupure nette au-dessus. */
.cam-actions{position:sticky; bottom:calc(-30px - env(safe-area-inset-bottom, 0px)); z-index:2; margin-top:10px; padding:10px 0 calc(30px + env(safe-area-inset-bottom, 0px)); background:var(--cream);}
.cam-actions::before{content:""; position:absolute; left:0; right:0; top:-20px; height:20px; background:linear-gradient(to top, var(--cream), transparent); pointer-events:none;}
.catgrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.catbtn{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:16px; border:1.5px solid var(--border); background:var(--surface); color:var(--brown); cursor:pointer; font-size:12px; font-weight:600; transition:all .2s var(--ease); text-align:center;}
.catbtn svg{width:26px; height:26px; color:var(--brown-soft);}
.catbtn.selected{border-color:var(--terracotta); background:color-mix(in srgb, var(--terracotta) 7%, var(--surface));}
.catbtn.selected svg{color:var(--terracotta);}
.field{width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid var(--border); background:var(--surface); font-size:15px; color:var(--brown); font-family:inherit;}
.field::placeholder{color:var(--brown-faint);}
select.field{appearance:none; cursor:pointer;}
.lbl{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brown-faint); margin:18px 0 9px;}

/* ============================================================
   Divers / utilitaires
   ============================================================ */
.empty{text-align:center; padding:34px 12px;}
.empty .eic{width:64px; height:64px; border-radius:20px; background:var(--cream-2); color:var(--terracotta); display:grid; place-items:center; margin:0 auto 16px;}
.empty .eic svg{width:30px; height:30px;}
.mt8{margin-top:8px;} .mt10{margin-top:10px;} .mt14{margin-top:14px;} .mt16{margin-top:16px;} .mt18{margin-top:18px;} .mt22{margin-top:22px;} .mt6{margin-top:6px;}
.hidden{display:none!important;}
.center{text-align:center;}
.fieldrow{display:flex; gap:10px;} .fieldrow > *{flex:1;}

/* fenêtre try-on (essai maquillage en direct) */
.tryon-modal{position:fixed; inset:0; z-index:90; background:var(--cream); display:none;}
.tryon-modal.show{display:block;}
.tryon-frame{width:100%; height:100%; border:0;}
.tryon-close{position:absolute; top:calc(env(safe-area-inset-top, 0px) + 12px); right:12px; z-index:91; width:44px; height:44px; border-radius:50%; border:0; background:rgba(10,5,12,.78); color:#fff; font-size:18px; cursor:pointer; box-shadow:0 4px 12px -4px rgba(0,0,0,.5);}

/* petit écran : marges resserrées */
@media (max-width:360px){
  .scroll{padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 24px;}
  .h1{font-size:25px;}
}

/* ---- La trousse dans l'accueil (2026-09-23) --------------------------------
   Les familles de couleurs deviennent des galets graves, les tenues des
   echantillons de tissu. Le dessin remplace le fond plat : on neutralise donc
   la bordure et le fond des anciens elements, la forme est dans le SVG. */
.swatch.tissu{aspect-ratio:auto; border:0; background:none; border-radius:10px;
  line-height:0; padding:0; display:block;}
.swatch.tissu svg{display:block; width:100%; height:auto;}
.swatch.tissu.selected{outline-offset:1px;}
.pal.galet svg{display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));}

/* ============================================================
   Emblème Premium (diadème), 15/10/2026
   Option C validée par Nathie, reprise de BeautySkIn_Trousse_Web/maquettes/
   badge-premium/maquette-badge-premium-v2.html : sceau d'or sur l'avatar,
   « Membre Premium » sous le prénom, carte de membre noir et or dans Réglages,
   insigne sur la question du matin. Réservé à l'abonnée Google Play.
   L'OR RESTE DE L'OR : ses couleurs sont écrites en dur ici. Les 6 thèmes ne
   redéfinissent que --cream, --terracotta, --gold... (--gold est l'ACCENT du
   thème, pas de l'or : on ne s'en sert donc jamais ici).
   Le diadème lui-même (symbole #diademe, dégradé #gOr) est en haut de index.html.
   ============================================================ */
:root{
  /* plusieurs reflets, comme une feuille d'or sous la lumière */
  --or-metal:linear-gradient(115deg,#7E5E24 0%,#C9A24F 14%,#FFF3C8 28%,#E8C77E 40%,#A67C33 55%,#F7E2A6 72%,#B48A3E 86%,#6F521F 100%);
  --or-anneau:conic-gradient(from 210deg,#7E5E24,#E8C77E,#FFF6D6,#C9A24F,#8A6A2F,#F3D892,#FFF6D6,#B48A3E,#7E5E24);
}
/* Texte en feuille d'or : l'or ondule lentement */
.feuille-or{background:var(--or-metal); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:lumiere 6s ease-in-out infinite;}
@keyframes lumiere{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}

/* Reflet qui balaie l'objet toutes les 4,2 secondes */
.reflet{position:relative; overflow:hidden;}
.reflet::after{content:""; position:absolute; top:-50%; bottom:-50%; width:38%; left:-60%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,250,230,.0) 20%,rgba(255,250,230,.55) 50%,rgba(255,250,230,0) 80%,transparent 100%);
  transform:skewX(-18deg); animation:balayage 4.2s ease-in-out infinite; pointer-events:none;}
@keyframes balayage{0%{left:-60%} 38%{left:130%} 100%{left:130%}}

/* « Membre Premium » sous le prénom (taille de l'option C : 15 px) */
.mention{display:flex; align-items:center; gap:6px; margin-top:3px;}
.mention .mot{font-family:var(--font-display); font-style:italic; font-weight:600; font-size:15px; letter-spacing:.02em;}

/* La carte de membre noir et or : elle remplace le bandeau « Premium actif » */
.carte-membre{margin-top:14px; border-radius:20px; padding:18px 18px 16px; color:#F6E7C1;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255,226,150,.16) 0%, transparent 55%),
    linear-gradient(150deg,#1C1610 0%,#0E0A08 60%,#151009 100%) padding-box,
    var(--or-metal) border-box;
  border:1.5px solid transparent;
  box-shadow:0 18px 40px -22px rgba(232,199,126,.55), inset 0 1px 0 rgba(255,240,200,.08);}
.carte-membre .haut{display:flex; justify-content:space-between; align-items:flex-start;}
.carte-membre .surtitre{font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:#C9A96A; font-weight:600;}
.carte-membre .grand{font-family:var(--font-display); font-style:italic; font-weight:600; font-size:34px; line-height:1.05; margin-top:4px;}
.monogramme{width:50px; height:50px; border-radius:50%; flex:none; padding:1.5px; background:var(--or-anneau);}
.monogramme span{display:flex; width:100%; height:100%; border-radius:50%; background:#0E0A08; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:16px; letter-spacing:.04em;}
.carte-membre .filet{height:1px; margin:14px 0 10px; background:linear-gradient(90deg,transparent,rgba(232,199,126,.7),transparent);}
.carte-membre .avantages{font-size:12.5px; color:#E3D2A8; letter-spacing:.02em;}
.carte-membre .gerer{font-size:11.5px; color:rgba(227,210,168,.6); margin-top:8px;}
/* l'arabe est une écriture liée : espacer ses lettres les détacherait */
[dir="rtl"] .carte-membre .surtitre{letter-spacing:0;}

/* Le sceau d'or posé sur l'avatar. avatarHtml() sert ailleurs et rend parfois une
   <img>, qui ne peut rien contenir : on l'enveloppe donc, sans le modifier. */
.avatar-serti{position:relative; display:block; flex:none;}
.sceau{position:absolute; inset-inline-end:-8px; bottom:-8px; width:28px; height:28px; border-radius:50%;
  background:var(--or-anneau); display:flex; align-items:center; justify-content:center;
  /* l'anneau sombre détache le sceau du portrait : la couleur du fond du thème
     (#17101C dans le thème par défaut, comme sur la maquette) */
  box-shadow:0 0 0 2px var(--cream), 0 0 14px -2px rgba(232,199,126,.8);}
.sceau svg{width:19px; height:12px; margin-top:-1px;}
/* Le diadème, emblème du Premium */
.diad{width:30px; height:19px; flex:none; filter:drop-shadow(0 0 6px rgba(232,199,126,.45));}
.diad-grand{width:34px; height:21px; filter:drop-shadow(0 0 6px rgba(232,199,126,.5));}

/* L'insigne de la question du matin, à droite de « Ce matin » */
#matin-insigne{display:flex; flex:none;}
.insigne{display:inline-flex; align-items:center; gap:6px; padding-block:5px; padding-inline:9px 12px; border-radius:999px;
  background:linear-gradient(#120D08,#120D08) padding-box, var(--or-metal) border-box; border:1px solid transparent;
  box-shadow:0 0 18px -6px rgba(232,199,126,.7);}
.insigne .mot{font-family:var(--font-display); font-style:italic; font-weight:600; font-size:14px; letter-spacing:.03em;}

/* Téléphone réglé pour réduire les animations : tout reste immobile */
@media (prefers-reduced-motion: reduce){ .feuille-or, .reflet::after{animation:none} .reflet::after{display:none} }

/* ===== Choisis tes couleurs (22/10/2026, demande de Nathie) =====
   Le meme ecran qu IdeaCrashTest (module commun css/nd-couleurs.css), habille aux jetons de BeautySkIn.
   Pose sur body (et pas :root) : les themes body.theme-* y redefinissent les jetons, le choix suit donc. */
body {
  --ndc-carte-fond: var(--cream-2);
  --ndc-carte-bord: var(--border);
  --ndc-texte: var(--brown);
  --ndc-doux: var(--brown-soft);
  --ndc-accent: var(--terracotta);
  --ndc-sur-accent: var(--btn-on-accent);
  --ndc-halo: var(--cream);
  --ndc-ombre: rgba(0, 0, 0, .45);
  --ndc-lisere: var(--border);
  --ndc-police: var(--font-body);
  --ndc-police-titre: var(--font-display);
}
.bsk-couleurs { padding: 10px 0 18px; }
.bsk-couleurs .ndc-question { font-weight: 600; }
#moi-themes .ndc-grille { margin-top: 10px; }

/* ===== Thèmes CLAIRS : retouches communes (26/10/2026) =====
   body.theme-clair est posée par applyTheme (js/app.js) avec Porcelaine rosée, Ivoire doré et Lin sauge,
   JAMAIS avec les 6 sombres : rien ici ne les touche. Seules les couleurs écrites en dur pour un fond
   sombre sont reprises, chaque fois sur l écran où elles gênaient. */

/* Écran des couleurs et Moi > Préférences : cartes blanches, ombre teintée au lieu d un noir à 45 %. */
body.theme-clair {
  --ndc-carte-fond: rgba(255, 255, 255, .62);
  --ndc-ombre: color-mix(in srgb, var(--terracotta) 22%, transparent);
}

/* Bandeau des cookies : blanc, détaché de la page par l ombre douce du thème (le noir à 45 % salissait). */
body.theme-clair .nd-consentement {
  --nd-fond: #FFFFFF;
  box-shadow: var(--shadow-lg), 0 2px 10px color-mix(in srgb, var(--brown) 8%, transparent);
}

/* Feuilles (mur Premium, ajout de produit...) : voile teinté du thème au lieu d un gris presque noir. */
body.theme-clair .sheet-back { background: color-mix(in srgb, var(--brown) 42%, transparent); }

/* Rituel > Ta tenue (et la trousse de l accueil) : l échantillon « blanc cassé » se fondait dans le fond
   clair. Un liseré très fin qui suit la forme du tissu, plus une ombre douce. */
body.theme-clair .swatch.tissu svg {
  filter: drop-shadow(0 0 .6px color-mix(in srgb, var(--brown) 55%, transparent)) drop-shadow(0 2px 3px color-mix(in srgb, var(--brown) 14%, transparent));
}

/* Moi > Réglages : un interrupteur ÉTEINT (pastille blanche sur piste pâle) se voyait à peine.
   Piste un peu plus marquée et fin liseré ; l état allumé (.switch.on) ne change pas. */
body.theme-clair .switch:not(.on) {
  background: color-mix(in srgb, var(--brown) 14%, var(--cream-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brown) 22%, transparent);
}

/* « Membre Premium » sous le prénom : la feuille d or claire disparaissait sur fond clair.
   Même mouvement, or plus profond. La carte de membre et l insigne du matin restent noir et or. */
body.theme-clair .mention .feuille-or {
  background-image: linear-gradient(115deg, #5E451A 0%, #8A6A2F 16%, #B8903F 30%, #7E5E24 44%, #A67C33 60%, #6F521F 78%, #9C7430 90%, #5E451A 100%);
}

/* ===== Les 5 effets d'animation (30/10/2026, maquette validée par Nathie) =====
   Repris d'IdeaCrashTest (Pub_et_vente_apps/maquettes_effets_2026-10-30). C'est js/app.js (bloc
   « EFFETS D'ANIMATION ») qui les joue, une seule fois chacun, sans boucle. Toutes les couleurs
   viennent du thème, sauf l'or du sceau (comme l'emblème Premium) et la lumière blanche du reflet.
   Mouvement réduit : js/app.js ne joue rien, chaque écran est déjà dans son état final. */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --fx-arc { syntax: "<angle>"; inherits: false; initial-value: 180deg; }

/* Caché le temps d'attendre son tour (bouton de « Comment ça marche », résultat du sous-ton, look sous le sceau) */
.fx-cache { visibility: hidden; }

/* Le reflet unique qui traverse un bouton (le .reflet de l'emblème Premium, lui, tourne en boucle) */
.fx-hote { position: relative; overflow: hidden; }
.fx-reflet { position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .15) 56%, transparent 68%); }

/* 1. La promesse : les arcs du soleil se dessinent de gauche à droite (délai posé par js/app.js) */
.sun .arc.fx-trace {
  -webkit-mask: conic-gradient(from 270deg at 50% 100%, #000 var(--fx-arc), transparent 0);
  mask: conic-gradient(from 270deg at 50% 100%, #000 var(--fx-arc), transparent 0);
  animation: fx-arc .9s ease-out both;
}
@keyframes fx-arc { from { --fx-arc: 0deg; } to { --fx-arc: 180deg; } }

/* 2. « Comment ça marche » : le cadre des 4 temps. Le HTML porte l'état final (allumee, cochee). */
.comment-cadre { position: relative; border-radius: 20px; padding: 4px 16px; border: 1px solid var(--border); background: var(--surface);
  --fx-c1: color-mix(in srgb, var(--terracotta) 55%, transparent); --fx-c2: var(--gold-deep); }
.comment-etape { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border-soft); opacity: .42; transition: opacity .45s var(--ease); }
.comment-etape:last-of-type { border-bottom: 0; } /* last-of-type : le trait du tour s'ajoute après les étapes */
.comment-etape.allumee { opacity: 1; }
.comment-num { position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 600; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--gold-deep) 50%, transparent); color: var(--gold-deep);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.comment-etape.allumee .comment-num { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--btn-on-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold-deep) 45%, transparent); }
.comment-num .coche { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0; }
.comment-etape.cochee .comment-num .chiffre { opacity: 0; }
.comment-etape.cochee .comment-num .coche { opacity: 1; }
.comment-texte { flex: 1; min-width: 0; }
.comment-texte b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; line-height: 1.3; color: var(--brown); }
.comment-texte small { display: block; font-size: 12.8px; line-height: 1.4; color: var(--brown-soft); margin-top: 2px; }
/* le trait qui fait UNE fois le tour du cadre, aux couleurs du thème (--fx-c1, --fx-c2) */
.fx-tour { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; z-index: 3;
  background: conic-gradient(from var(--fx-angle), transparent 0 68%, var(--fx-c1) 82%, var(--fx-c2) 93%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 5px var(--fx-c2)); }
.fx-tour.joue { animation: fx-tour 2.4s ease-in-out both; }
@keyframes fx-tour { 0% { opacity: 0; --fx-angle: 0deg; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; --fx-angle: 360deg; } }

/* 4. Tes couleurs : les réponses choisies s'allument, le mot du sous-ton se pose */
.seg.selected.fx-lueur, .fx-revele .seg.selected { box-shadow: 0 0 14px color-mix(in srgb, var(--terracotta) 32%, transparent); }
.fx-ton { display: inline-block; font-style: normal; font-weight: 700; color: var(--gold-deep); }

/* 5. Le rituel : la barre avance segment par segment, puis le sceau du look du jour */
.prog i { position: relative; overflow: hidden; }
.fx-remplit { position: absolute; inset: 0; border-radius: inherit; background: var(--terracotta); transform-origin: left center;
  box-shadow: 0 0 8px color-mix(in srgb, var(--terracotta) 70%, transparent); }
[dir="rtl"] .fx-remplit { transform-origin: right center; }
.fx-voile { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px; cursor: pointer;
  background: color-mix(in srgb, var(--cream) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx-sceau { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; transform: rotate(-8deg); border: 2px solid transparent;
  background: linear-gradient(#120D08, #120D08) padding-box, var(--or-anneau) border-box; box-shadow: 0 0 30px -6px rgba(232, 199, 126, .7); }
.fx-sceau svg { width: 58px; height: 36px; filter: drop-shadow(0 0 6px rgba(232, 199, 126, .5)); }
.fx-sceau .anneau { position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed rgba(232, 199, 126, .5); }
.fx-sceau .onde { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255, 236, 190, .8); opacity: 0; }
.fx-legende { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--brown); text-align: center; }

/* v102 (07/11/2026) : les petits coeurs qui montent (js/coeurs.js, repris d'Aurora Bloom 1.5.15). */
.coeurs-calque { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.coeur-vol { position: absolute; display: block; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 6px rgba(23, 16, 28, .45)); will-change: transform, opacity; }
.coeur-vol svg { width: 100%; height: 100%; display: block; }
.coeur-grand { filter: drop-shadow(0 4px 18px rgba(23, 16, 28, .55)); }
/* le double tap sur le titre du look ne doit pas surligner le texte ni zoomer */
.look-tete { -webkit-user-select: none; user-select: none; touch-action: manipulation; }