/* ============================================================
   L'ECRAN MAQUILLAGE, confine sous #r-maquillage.

   POURQUOI. Ces regles viennent de essai-levres.html, qui etait une PAGE
   separee. Fusionnees telles quelles, 14 d'entre elles s'appliquaient au
   reste de l'application : body, canvas, video, .topbar, .toast, .zonebtn,
   .dotbtn. Elles cassaient d'autres ecrans sans aucune erreur visible.

   Chaque regle est donc prefixee. « html,body » et « :root » deviennent
   #r-maquillage lui-meme, qui est le conteneur de l'ecran.
   Genere le 2026-09-04 pour la v67.
   ============================================================ */

/* ============================================================
     NUIT PRUNE · ROSE POUDRÉ (direction A validée par Nathie le 04/08).
     Grammaire de VoiceCoach : fond profond animé de halos larges, cartes
     ton sur ton à peine plus claires, bordures très fines, et UN SEUL
     élément vif (le dégradé rose poudré). Tout le reste se tait.
     ============================================================ */
#r-maquillage {
    --fond:#17101C;
    --texte:#F6F1F4; --texte-2:rgba(246,241,244,.52); --texte-3:rgba(246,241,244,.32);
    --carte:rgba(255,255,255,.045);
    --carte-2:rgba(255,255,255,.06);
    --carte-bord:rgba(255,255,255,.13);
    --accent:#A85F7C; --accent-clair:#E9A8BE;
    --degrade-accent:linear-gradient(135deg, #E9A8BE, #A85F7C);
    --sur-accent:#1B0F16;                              /* texte posé sur l'accent */
    --or:#A85F7C; --or-clair:#E9A8BE;                  /* alias utilisés par le moteur JS */
    --terra:#B85C38; --terra-deep:#9E4A2B;
    --blur:blur(22px) saturate(130%);
    --ombre:0 18px 44px rgba(0,0,0,.45);
    --ombre-douce:0 8px 24px rgba(0,0,0,.28);
    --halo-accent:0 0 22px rgba(233,168,190,.32);
    --ease:cubic-bezier(.4,0,.2,1);
  }
#r-maquillage * {box-sizing:border-box;}
#r-maquillage {height:100%;}
#r-maquillage {margin:0; font-family:'Inter',-apple-system,Segoe UI,system-ui,sans-serif;
    background:var(--fond); color:var(--texte); -webkit-font-smoothing:antialiased; overflow:hidden; letter-spacing:-.01em;}
#r-maquillage .screen {position:absolute; inset:0; overflow:hidden;}
/* ---- Caméra plein écran. Éteinte : le LOGO sur les halos, jamais du noir plat. ---- */
#r-maquillage .stage {position:absolute; inset:0;
    background:url('../icons/logo.png') center 40%/min(46vw,300px) no-repeat,
      radial-gradient(circle at 18% 12%, rgba(233,168,190,.20) 0%, transparent 44%),
      radial-gradient(circle at 86% 8%, rgba(168,95,124,.18) 0%, transparent 42%),
      radial-gradient(circle at 74% 92%, rgba(233,168,190,.12) 0%, transparent 46%),
      var(--fond);}
#r-maquillage video {display:none;}
#r-maquillage canvas {width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:none;}
#r-maquillage .screen.live canvas {display:block;}
/* voile doux haut + bas pour la lisibilité des contrôles */
#r-maquillage .stage::after {content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.22));}
/* démarrage manuel (secours si l'auto-start est bloqué) */
#r-maquillage .tapstart {position:absolute; inset:0; display:none; place-items:center; z-index:4; background:rgba(12,8,16,.5);}
#r-maquillage .tapstart button {appearance:none; cursor:pointer; font-family:inherit;
    background:var(--carte-2); border:1px solid var(--carte-bord); color:var(--texte);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    font-size:15px; font-weight:600; padding:15px 24px; border-radius:16px;
    box-shadow:var(--ombre-douce); display:inline-flex; align-items:center; gap:10px;}
#r-maquillage .tapstart svg {color:var(--accent-clair);}
/* ---- Barre du haut flottante ---- */
#r-maquillage .topbar {position:absolute; top:0; left:0; right:0; z-index:5;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;}
#r-maquillage .round {appearance:none; cursor:pointer; width:46px; height:46px; border-radius:50%;
    display:grid; place-items:center; color:var(--accent-clair);
    background:var(--carte-2); border:1px solid var(--carte-bord);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    box-shadow:var(--ombre-douce); transition:transform .18s var(--ease);}
#r-maquillage .round:active {transform:scale(.94);}
#r-maquillage .round[disabled] {opacity:.45; pointer-events:none;}
/* Option A (12/09/2026) : deux petits boutons ronds (Mes looks, Apprendre) encadrent le
   bouton Avant/Apres. Groupes pour que la pilule reste centree. */
#r-maquillage .topgrp {display:flex; align-items:center; gap:8px;}
#r-maquillage .round.petit {width:40px; height:40px;}
#r-maquillage .round.petit svg {width:19px; height:19px;}
/* le médaillon porte le seul halo permanent, comme le logo VoiceCoach */
#r-maquillage .medaillon {box-shadow:var(--halo-accent), var(--ombre-douce);}
#r-maquillage .medaillon img {width:30px; height:30px; object-fit:contain; border-radius:50%;}
#r-maquillage .pill {appearance:none; cursor:pointer; font-family:inherit; color:var(--texte);
    font-size:14px; font-weight:600; letter-spacing:.02em; padding:11px 22px; border-radius:16px;
    background:var(--carte-2); border:1px solid var(--carte-bord);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    box-shadow:var(--ombre-douce); transition:transform .18s var(--ease);}
#r-maquillage .pill:active {transform:scale(.97);}
#r-maquillage .pill[disabled] {opacity:.45; pointer-events:none;}
/* ---- Petit message discret ---- */
#r-maquillage .toast {position:absolute; left:50%; bottom:38%; transform:translateX(-50%); z-index:5;
    max-width:82%; text-align:center; background:rgba(12,8,16,.85); color:var(--texte);
    border:1px solid var(--carte-bord);
    font-size:12.5px; font-weight:500; padding:9px 15px; border-radius:999px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    opacity:1; transition:opacity .25s var(--ease); pointer-events:none;}
#r-maquillage .toast:empty {opacity:0;}
/* ---- Les icônes FLOTTANTES sur la caméra (aucune barre permanente) ---- */
#r-maquillage .zonerail {position:absolute; left:0; right:0; bottom:18px;
    z-index:6; display:flex; justify-content:center; gap:14px; pointer-events:none;}
#r-maquillage .zonebtn {pointer-events:auto; position:relative; appearance:none; cursor:pointer;
    width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:var(--accent-clair);
    background:var(--carte-2); border:1px solid var(--carte-bord);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    box-shadow:var(--ombre-douce); transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);}
#r-maquillage .zonebtn:active {transform:scale(.94);}
#r-maquillage .zonebtn svg {width:26px; height:26px;}
#r-maquillage .zonebtn.on {color:var(--accent-clair); border-color:rgba(233,168,190,.55);
    box-shadow:var(--halo-accent), var(--ombre-douce);}
/* petite pastille = teinte en cours sur la zone */
#r-maquillage .zonebtn .zdot {position:absolute; right:1px; bottom:1px; width:15px; height:15px; border-radius:50%;
    border:2px solid rgba(246,241,244,.75); box-shadow:0 1px 3px rgba(0,0,0,.45);}
#r-maquillage .zonebtn .zdot.none {background:transparent; border-style:dashed; border-color:var(--texte-3);}
/* ---- Palette en SURIMPRESSION : carte ton sur ton, tout visible, RIEN ne défile ---- */
#r-maquillage .palette {position:absolute; left:10px; right:10px; bottom:88px;
    z-index:6; background:rgba(23,16,28,.84); border:1px solid var(--carte-bord);
    -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    border-radius:24px; padding:14px 12px;
    box-shadow:var(--ombre);
    transform-origin:bottom center; transition:opacity .18s var(--ease), transform .18s var(--ease);}
#r-maquillage .palette[hidden] {display:none;}
/* le conseil de pro, discret mais VISIBLE, en tête de chaque palette */
#r-maquillage .conseil-note {margin:0 0 9px; text-align:center; font-size:12px; color:var(--texte-2); letter-spacing:.01em;}
#r-maquillage .conseil-note b {color:var(--accent-clair); font-weight:600;}
#r-maquillage .zone-titre {margin:0 0 4px; text-align:center; font-size:13px; font-weight:600; color:var(--texte); letter-spacing:.01em;}
/* pastilles de teinte : GRILLE qui va à la ligne, jamais de défilement */
#r-maquillage .dots {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:2px;}
#r-maquillage .dotbtn {appearance:none; border:0; background:none; cursor:pointer; padding:2px; flex:0 0 auto; border-radius:50%;
    transition:transform .18s var(--ease);}
/* PIGMENT MAT (demande Nathie 04/08) : plus aucun reflet blanc, une teinte doit ressembler
     à du vrai maquillage et non à un bouton verni. Seul un léger creux en bas donne la
     profondeur d'un godet de poudre. */
#r-maquillage .dotbtn .d {display:block; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.10);
    position:relative; overflow:hidden;
    box-shadow:inset 0 -3px 7px rgba(0,0,0,.22), 0 2px 8px -3px rgba(0,0,0,.55);}
#r-maquillage .dotbtn.on {transform:scale(1.06);}
#r-maquillage .dotbtn.on .d {outline:2px solid var(--accent-clair); outline-offset:2px;}
#r-maquillage .dotbtn.none .d {background:var(--carte); position:relative; border:1.5px dashed var(--texte-3); box-shadow:none;}
#r-maquillage .dotbtn.none .d::after {content:""; position:absolute; left:50%; top:50%; width:70%; height:1.5px;
    background:var(--texte-3); transform:translate(-50%,-50%) rotate(-45deg); border-radius:2px;}
/* segments (placement eyeliner) : vont à la ligne, jamais de défilement */
#r-maquillage .segrow {display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
#r-maquillage .seg {appearance:none; cursor:pointer; font-family:inherit; padding:9px 16px; border-radius:999px;
    border:1px solid var(--carte-bord); background:var(--carte); color:var(--texte-2);
    font-size:12.5px; font-weight:600; transition:all .2s var(--ease);}
#r-maquillage .seg.on {border-color:rgba(233,168,190,.55); background:rgba(233,168,190,.12); color:var(--accent-clair);}
/* ---- Tiroir : carte ton sur ton + UN accent dégradé champagne ---- */
#r-maquillage .conseil-carte {position:absolute; inset:0; z-index:8; display:grid; place-items:center;
    background:rgba(10,6,13,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
#r-maquillage .conseil-carte[hidden] {display:none;}
#r-maquillage .conseil-panneau {width:min(88vw,380px); background:rgba(23,16,28,.88); border:1px solid var(--carte-bord); border-radius:26px;
    padding:20px 18px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    box-shadow:var(--ombre);}
#r-maquillage .conseil-titre {text-align:center; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--texte-2); font-weight:600; margin:0 0 14px;}
#r-maquillage .tuiles {display:grid; grid-template-columns:1fr 1fr; gap:12px;}
#r-maquillage .tuile {appearance:none; cursor:pointer; font-family:inherit; border:1px solid var(--carte-bord); border-radius:18px;
    background:var(--carte); color:var(--texte); padding:16px 8px 13px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    box-shadow:var(--ombre-douce); transition:transform .16s var(--ease), border-color .16s var(--ease);}
#r-maquillage .tuile:active {transform:scale(.96); border-color:rgba(233,168,190,.45);}
#r-maquillage .tuile svg {width:26px; height:26px; color:var(--accent-clair);}
#r-maquillage .tuile span {font-size:12.5px; font-weight:600;}
/* LE seul élément vif de l'écran : le dégradé champagne, comme le bouton turquoise de VoiceCoach */
#r-maquillage .tuile.etoile {grid-column:1 / -1; flex-direction:row; justify-content:center; padding:14px 8px;
    background:var(--degrade-accent); border:0; color:var(--sur-accent);
    box-shadow:var(--halo-accent), var(--ombre-douce);}
#r-maquillage .tuile.etoile svg {color:var(--sur-accent);}
#r-maquillage .tuile.etoile span {font-size:13.5px; font-weight:700;}

/* ============================================================
   LA PLACE DE L'ECRAN MAQUILLAGE DANS L'APPLICATION (v67)

   Avant, c'etait une page a lui tout seul. Maintenant c'est une vue parmi les
   autres, et il lui faut deux choses que les autres n'ont pas : toute la
   hauteur libre, et aucune marge, parce que la camera va bord a bord.

   La zone qui defile est mise de cote pendant ce temps : sinon elle garderait
   sa hauteur, vide, et ecraserait la camera. Les onglets, eux, restent visibles.
   ============================================================ */
#r-maquillage.view {flex:1; min-height:0; position:relative; padding:0;}
#r-maquillage.view.active {display:block;}
#app.plein-ecran > .scroll {display:none;}
/* Le gros bouton rond de la barre est surélevé de 30 px : sur l'écran caméra il mordait
   de 9 px sur l'icône Joues, qui flotte à 18 px au-dessus de la barre. Ici il REDESCEND
   dans la barre. Sa place horizontale ne change pas (52 + 2x16 = 84, comme 64 + 2x10
   avant), donc Trousse et Moi ne bougent pas d'un pixel, et sa hauteur de 52 px est celle
   des autres onglets, donc la barre garde exactement la même hauteur. 18/09/2026 */
#app.plein-ecran .tab.tab-camera{
  width:52px; height:52px; margin:0 16px; align-self:center;
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--terracotta) 70%, transparent);}

/* L'animation d'entree des vues fait glisser la carte de 10 px vers le haut.
   Sur une carte, c'est joli. Sur une camera plein cadre, ca decouvre une bande
   de fond pendant la transition, et le moindre grain de sable dans l'animation
   la laisse coincee en biais. Cet ecran entre sans glisser. */
#r-maquillage.view.active {animation:none;}

/* Le lien vers la technique, en bas de chaque palette. Discret : elle regarde
   des couleurs, on ne lui coupe pas la parole avec un gros bouton. */
#r-maquillage .lien-technique {display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin:12px 0 2px; padding:9px 12px; border-radius:14px;
  background:rgba(255,255,255,.055); border:1px solid var(--carte-bord);
  color:var(--accent-clair); font:600 12.5px/1 inherit; letter-spacing:.02em; cursor:pointer;}
#r-maquillage .lien-technique:active {transform:scale(.98);}

/* L'envie en cours : on la MARQUE, on ne la deforme pas. Le liseré et la
   couleur suffisent ; changer sa taille casserait la grille a deux colonnes. */
#r-maquillage .tuile.choisie {border-color:var(--accent); color:var(--accent-clair);
  background:rgba(233,168,190,.14);}
#r-maquillage .tuile.choisie svg {color:var(--accent);}

/* ============================================================
   LE BANDEAU DE LA TECHNIQUE
   Le texte court qui accompagne le trace sur son visage. Il se pose en bas,
   au-dessus des icones de zones, et laisse le visage degage : c'est LUI
   qu'elle regarde pendant qu'elle se maquille.
   ============================================================ */
#r-maquillage .technique-mot {position:absolute; left:10px; right:10px;
  bottom:calc(88px); z-index:7;
  background:rgba(23,16,28,.88); border:1px solid var(--carte-bord);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-radius:22px; padding:14px 16px 12px;
  box-shadow:0 14px 34px rgba(0,0,0,.42);}
#r-maquillage .technique-mot[hidden] {display:none;}
#r-maquillage .tq-titre {margin:0 0 6px; text-align:center; font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-clair); font-weight:700;}
#r-maquillage .tq-mot {margin:0; font-size:13.5px; line-height:1.5; color:var(--texte); text-align:center;}
#r-maquillage .tq-actions {display:flex; gap:9px; margin-top:12px;}
#r-maquillage .tq-actions button {flex:1; appearance:none; cursor:pointer; font-family:inherit;
  padding:10px 8px; border-radius:13px; font-size:12.5px; font-weight:600;
  border:1px solid var(--carte-bord); background:rgba(255,255,255,.06); color:var(--texte);}
#r-maquillage .tq-actions #tq-fin {background:var(--accent); border-color:var(--accent); color:#1B0F16;}
#r-maquillage .tq-actions button:active {transform:scale(.97);}
/* ---- La fiche « Tout lire », PAR-DESSUS la caméra (18/09/2026) ----
   Avant, ce bouton envoyait vers la page Apprendre : elle quittait son visage,
   et le retour du téléphone la sortait de l'application. Retour d'Olivier du 16/09.
   La carte s'arrête AU-DESSUS de la rangée des icônes : elle peut changer de zone
   sans la fermer, et le pouce ne la masque pas. */
#r-maquillage .fiche-carte {position:absolute; left:0; right:0; top:0; bottom:84px; z-index:9;
    display:flex; align-items:flex-end; justify-content:center; padding:10px;
    background:rgba(10,6,13,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
#r-maquillage .fiche-carte[hidden] {display:none;}
#r-maquillage .fiche-panneau {position:relative; width:min(92vw,420px); max-height:100%; overflow-y:auto;
    background:rgba(23,16,28,.94); border:1px solid var(--carte-bord); border-radius:26px;
    padding:8px 18px 18px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    box-shadow:var(--ombre); -webkit-overflow-scrolling:touch;}
#r-maquillage .fiche-fermer {display:block; margin:0 auto 2px; appearance:none; border:0; cursor:pointer;
    background:none; color:var(--texte-2); padding:7px 20px; line-height:0;}
#r-maquillage .fiche-titre {margin:0 0 8px; text-align:center; font-family:var(--font-display);
    font-size:23px; font-weight:400; color:var(--texte); letter-spacing:.01em;}
#r-maquillage .fiche-resume {margin:0 0 15px; text-align:center; font-size:13px; line-height:1.55; color:var(--texte-2);}
#r-maquillage .fiche-etapes {list-style:none; margin:0; padding:0; display:grid; gap:11px;}
#r-maquillage .fiche-etapes li {display:flex; gap:11px; align-items:flex-start;
    font-size:13.5px; line-height:1.5; color:var(--texte);}
#r-maquillage .fiche-num {flex:0 0 auto; width:23px; height:23px; border-radius:50%; margin-top:1px;
    display:grid; place-items:center; font-size:12px; font-weight:700;
    background:var(--degrade-accent); color:var(--sur-accent);}
#r-maquillage .fiche-piege {margin-top:15px; border-radius:16px; padding:12px 14px;
    background:rgba(255,255,255,.055); border:1px solid var(--carte-bord);}
#r-maquillage .fiche-piege b {display:block; margin-bottom:4px; font-size:11.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--accent-clair);}
#r-maquillage .fiche-piege p {margin:0; font-size:13px; line-height:1.5; color:var(--texte-2);}
#r-maquillage .fiche-lien {display:block; width:100%; margin-top:15px; appearance:none; cursor:pointer;
    font-family:inherit; font-size:12.5px; font-weight:600; padding:10px; border-radius:13px;
    border:1px solid var(--carte-bord); background:rgba(255,255,255,.055); color:var(--texte-2);}

/* ---- La carnation : les huit teintes, et celle que la camera propose ---- */
#r-maquillage .lien-fin {appearance:none; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:12px; color:var(--accent-clair); text-decoration:underline;}
#r-maquillage .teintes-peau {display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px;}
#r-maquillage .teinte-peau {display:flex; align-items:center; gap:9px; appearance:none; cursor:pointer;
  font-family:inherit; text-align:start; padding:9px 10px; border-radius:14px;
  border:1px solid var(--carte-bord); background:rgba(255,255,255,.05);
  color:var(--texte); font-size:12.5px; font-weight:600;}
#r-maquillage .teinte-peau .pastille {width:22px; height:22px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35); flex:0 0 auto;}
#r-maquillage .teinte-peau.choisie {border-color:var(--accent); background:rgba(233,168,190,.14);}
/* Celle que la camera vient de mesurer : un liseré, et le mot « mesurée ». */
#r-maquillage .teinte-peau.proposee {border-color:var(--accent-clair); border-width:2px;}
#r-maquillage .teinte-peau.proposee::after {content:"mesurée"; margin-inline-start:auto;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-clair);}

/* ---- Mes couleurs captées (bande du panneau Tenue) ------------------------
   Ajoutée le 2026-09-23. Le code JS existait depuis longtemps (4 couleurs
   gardées, doublons refusés, bouton Effacer) mais son hôte n'avait jamais été
   porté dans index.html : rien ne s'affichait. Préfixe #r-maquillage
   OBLIGATOIRE, des règles sans préfixe ont déjà cassé d'autres écrans ici. */
#r-maquillage .captured {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid var(--carte-bord);}
#r-maquillage .caplbl {flex:1 0 100%; text-align:center; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texte-3); margin-bottom:2px;}
#r-maquillage .capchip {appearance:none; border:0; background:none; cursor:pointer; padding:2px;
  flex:0 0 auto; border-radius:50%; transition:transform .12s ease;}
#r-maquillage .capchip .sw {display:block; width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22); box-shadow:0 2px 6px rgba(0,0,0,.35);}
#r-maquillage .capchip.on {transform:scale(1.08);}
#r-maquillage .capchip.on .sw {outline:2px solid var(--or-clair, var(--accent-clair)); outline-offset:2px;}
#r-maquillage .capclear {appearance:none; cursor:pointer; font-family:inherit; margin-inline-start:4px;
  padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:600;
  border:1px solid var(--carte-bord); background:rgba(255,255,255,.05); color:var(--texte-2);}
#r-maquillage .capclear:hover {color:var(--texte); border-color:var(--texte-3);}

/* ---- La trousse : les teintes deviennent des produits (2026-09-23) ---------
   Choisi par Nathie sur maquettes : tube aux levres, coup de pinceau aux yeux,
   eventail aux joues, oeil dessine a l'eyeliner. Les regles de .dotbtn .d ne
   s'appliquent plus ici, il n'y a plus de pastille mais un SVG.
   Prefixe #r-maquillage OBLIGATOIRE : des regles nues ont deja casse d'autres
   ecrans dans ce fichier. */
#r-maquillage .dotbtn.produit {border-radius:10px; padding:3px; line-height:0;
  transition:transform .14s ease, filter .14s ease;}
#r-maquillage .dotbtn.produit svg {display:block;}
#r-maquillage .dotbtn.produit:hover {transform:translateY(-3px);}
#r-maquillage .dotbtn.produit.on {transform:translateY(-2px) scale(1.04);}
#r-maquillage .dotbtn.produit.on svg {filter:drop-shadow(0 0 7px rgba(242,194,210,.62));}
#r-maquillage .dotbtn.produit.none svg {opacity:.85;}
#r-maquillage .dotbtn.produit.none.on svg {opacity:1;}
/* L'oeil de l'eyeliner est plus large que haut : on lui laisse sa place. */
#r-maquillage .dotbtn.produit.oeil {padding:4px 3px;}
/* ---- Ma trousse dans la palette (2026-09-30, maquette validée par Nathie) -----
   Ses produits en tête, une coche pour les distinguer des teintes conseillées. */
#r-maquillage .intertitre-trousse {margin:2px 0 6px; text-align:center; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-clair); font-weight:700;}
#r-maquillage .separateur-trousse {height:1px; background:var(--carte-bord); margin:11px 4px 9px;}
#r-maquillage .dotbtn.produit.mien {position:relative;}
#r-maquillage .dotbtn.produit.mien .jai {position:absolute; right:1px; top:1px; width:14px; height:14px; border-radius:50%;
  background:var(--accent-clair); color:#1B0F16; font-size:9px; font-weight:800; display:grid; place-items:center; line-height:1;}

/* ---- La teinte choisie se voit enfin (2026-09-23) --------------------------
   Avant : une pastille de 15 px dans un coin, que Nathie ne remarquait pas sur
   son telephone. Maintenant la couleur prend tout l'anneau du bouton, un voile
   dans le rond, et le pictogramme lui-meme (eclairci, sinon il disparait sur une
   teinte sombre). Les couleurs sont posees en style inline par renderZonebar :
   ici on ne regle que l'epaisseur, pour ne pas ecraser le halo de la zone ouverte. */
#r-maquillage .zonebtn.teinte {border-width:2.5px;}