/* ============================================================
   LE REPAIRE ALCHIMIA — Le tableau de bord de la cliente

   Sa maison à elle : où elle est rendue, ce qui vient ensuite,
   ses guides, ses affaires, et de quoi joindre Anna.
   Même typo et même marque que le studio d'Anna et Sabrina : Sora
   pour les titres, Poppins pour le texte, le filet lilas sur le IA.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap');

:root{
  --turquoise:#3fc9bd; --turquoise-clair:#79e0d8; --turquoise-voile:#e4f8f5;
  --lilas:#9d7bf5;     --lilas-clair:#c3a6ff;     --lilas-voile:#efe8ff;
  --peche:#f2814f;     --peche-clair:#ffc0a3;     --peche-voile:#ffeee5;
  --creme:#fdf9fc; --blanc:#fff; --encre:#3a2e5c; --encre-doux:#6b5f8a; --bordure:#ece4f2;
  /* Anciens noms, gardés parce que le moteur des guides s'en sert (les puces ✦). */
  --lilas-fonce:#9d7bf5; --turquoise-fonce:#3fc9bd; --peche-fonce:#f2814f;
  --rayon:18px; --rayon-sm:13px; --pilule:999px;
  --ombre:0 10px 30px rgba(157,123,245,.10);
  --ombre-forte:0 18px 44px rgba(157,123,245,.20);
}
*{ box-sizing:border-box; margin:0; padding:0; }
/* ⚠️ À garder. Plusieurs blocs se cachent avec l'attribut « hidden », mais leur
   mise en page (grille, ligne) reprenait le dessus et ils restaient visibles. */
[hidden]{ display:none !important; }

body{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--encre); background:var(--creme);
  line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased;
}
body.verrouille{ overflow:hidden; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 5% -12%, var(--lilas-voile), transparent 60%),
    radial-gradient(760px 440px at 100% 0%, var(--turquoise-voile), transparent 58%);
}
h1,h2,h3{ font-family:"Sora",-apple-system,sans-serif; letter-spacing:-.6px; line-height:1.25; font-weight:600; }

/* La marque, exactement celle du studio : un filet lilas devant le IA. */
.marque{
  font-family:"Sora",sans-serif; font-weight:500; font-size:1.16rem;
  letter-spacing:-.5px; white-space:nowrap;
}
.marque .ia{ position:relative; display:inline-block; font-weight:700; margin-left:.52em; }
.marque .ia::before{
  content:""; position:absolute; left:-.30em; top:50%; transform:translateY(-50%);
  width:2px; height:.94em; border-radius:var(--pilule); background:var(--lilas);
}
.marque.grand{ font-size:1.6rem; }

/* ------------------------------------------------------------
   LA PORTE
   ------------------------------------------------------------ */
.porte{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 12% -10%, var(--lilas-voile), transparent 60%),
    radial-gradient(800px 460px at 100% 0%, var(--peche-voile), transparent 56%),
    radial-gradient(700px 460px at 50% 118%, var(--turquoise-voile), transparent 56%),
    var(--creme);
}
.porte-carte{
  background:var(--blanc); border:1px solid var(--bordure); border-radius:26px;
  box-shadow:var(--ombre-forte); padding:38px 34px; max-width:400px; width:100%;
  text-align:center;
}
.porte-logo{ width:86px; height:86px; margin-bottom:10px; }
.porte-mot{ color:var(--encre-doux); font-size:.93rem; margin:14px 0 20px; }
.porte-carte input{
  width:100%; padding:14px 16px; border-radius:var(--rayon-sm);
  border:2px solid var(--bordure); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.02rem; text-align:center; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--encre); outline:none; margin-bottom:14px; background:var(--blanc);
}
.porte-carte input:focus{ border-color:var(--lilas); }
.porte-err{ color:#b5179e; font-size:.86rem; font-weight:600; min-height:20px; margin-top:10px; }
.porte-aide{ color:var(--encre-doux); font-size:.8rem; margin-top:14px; }
.secousse{ animation:secousse .42s; border-color:var(--peche) !important; }
@keyframes secousse{
  0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-7px); } 75%{ transform:translateX(7px); }
}

/* Aperçu depuis le studio : on regarde, on ne touche pas. */
.apercu{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 30px; font-size:.85rem;
  background:var(--encre); color:var(--blanc);
}
.apercu strong{ font-weight:600; }
.apercu a{ margin-left:auto; color:var(--lilas-clair); text-decoration:none; font-weight:600; }
.apercu a:hover{ color:var(--blanc); }

/* ------------------------------------------------------------
   LE BANDEAU
   ------------------------------------------------------------ */
.bandeau{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:16px; padding:12px 30px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bordure);
}
.bandeau img{ width:34px; height:34px; }
/* Revenir à l'écran d'avant. */
.reculer{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px 7px 11px; border-radius:var(--pilule);
  border:1.6px solid var(--bordure); background:var(--blanc);
  font-family:"Sora",sans-serif; font-size:.83rem; font-weight:500;
  color:var(--encre-doux); cursor:pointer;
}
.reculer:hover{ border-color:var(--lilas-clair); color:var(--lilas); }
.reculer .fleche{ font-size:1rem; line-height:1; }
.onglets{ display:flex; gap:4px; margin-left:22px; }
.onglet{
  border:none; background:none; font-family:"Sora",sans-serif; font-size:.88rem;
  font-weight:500; color:var(--encre-doux); padding:7px 15px; border-radius:var(--pilule);
  cursor:pointer;
}
.onglet:hover{ color:var(--encre); background:var(--lilas-voile); }
.onglet.actif{ background:var(--encre); color:var(--blanc); }
.bandeau .moi{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  font-size:.86rem; color:var(--encre-doux);
}
.bandeau .jeton{
  width:31px; height:31px; border-radius:50%;
  background:var(--turquoise); color:var(--blanc);
  display:grid; place-items:center;
  font-family:"Sora",sans-serif; font-weight:600; font-size:.8rem;
}

.page{ max-width:1060px; margin:0 auto; padding:30px 30px 80px; }

/* ------------------------------------------------------------
   CHEZ MOI — l'accueil personnel
   ------------------------------------------------------------ */
.tete{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; margin-bottom:24px; }
.bienvenue{
  background:var(--blanc); border:1px solid var(--bordure);
  border-radius:var(--rayon); padding:26px 28px;
}
.bienvenue .salut{
  font-size:.78rem; letter-spacing:1.2px; text-transform:uppercase;
  color:#a89fc0; margin-bottom:10px;
}
.bienvenue h1{ font-size:1.75rem; }
.mot-formule{ font-size:.92rem; color:var(--encre-doux); margin-top:12px; }
.bienvenue .formule{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:16px; font-size:.85rem; color:var(--encre-doux);
}
.badge{
  display:inline-block; padding:4px 13px; border-radius:var(--pilule);
  font-size:.76rem; font-weight:600; background:var(--peche-voile); color:#a8451c;
}

.avancee{
  background:var(--lilas); color:var(--blanc); border-radius:var(--rayon);
  padding:24px 26px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.avancee::after{
  content:""; position:absolute; right:-40px; top:-50px;
  width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.13);
}
.avancee .n{ font-family:"Sora",sans-serif; font-size:2.7rem; font-weight:600; line-height:1; }
.avancee .q{ font-size:.88rem; opacity:.9; margin-top:4px; }
.avancee .reste{ font-size:.8rem; opacity:.82; margin-top:10px; }
.jauge{
  height:7px; background:rgba(255,255,255,.28); border-radius:var(--pilule);
  margin-top:16px; overflow:hidden;
}
.jauge i{ display:block; height:100%; background:var(--blanc); border-radius:var(--pilule);
  transition:width 500ms ease; }

/* La prochaine étape */
.suite{
  background:var(--blanc); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:20px 24px; display:flex; align-items:center; gap:20px; margin-bottom:26px;
  box-shadow:var(--ombre);
}
.suite .quoi{
  font-size:.72rem; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--lilas); font-weight:700;
}
.suite h2{ font-size:1.15rem; margin-top:3px; }
.suite p{ font-size:.86rem; color:var(--encre-doux); margin-top:3px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 22px; border:none; border-radius:var(--pilule);
  background:var(--lilas); color:var(--blanc);
  font-family:inherit; font-size:.9rem; font-weight:600;
  cursor:pointer; white-space:nowrap; text-decoration:none;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }
.btn.large{ width:100%; padding:14px 22px; font-size:.95rem; }
.btn.petit{ padding:8px 16px; font-size:.82rem; }
.btn.doux{
  background:transparent; color:var(--encre-doux);
  border:1.6px solid var(--bordure); font-weight:500;
}
.btn.doux:hover{ border-color:var(--lilas-clair); color:var(--lilas); filter:none; }

/* Les deux colonnes */
.grille{ display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:start; }
.carte{
  background:var(--blanc); border:1px solid var(--bordure);
  border-radius:var(--rayon); padding:22px 24px; margin-bottom:18px;
}
.carte h2{ font-size:1.08rem; }
.carte .sous-titre{ font-size:.82rem; color:var(--encre-doux); margin:5px 0 14px; }
.carte > h2:only-of-type + div, .carte > h2 + #ma-liste{ margin-top:14px; }
.rang-titre{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.compte{ font-size:.8rem; color:var(--encre-doux); }
.rien{ font-size:.86rem; color:var(--encre-doux); }

/* Les étapes du parcours */
.etape{
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--bordure);
}
.etape:last-child{ border-bottom:none; }
.rond{
  width:22px; height:22px; border-radius:50%; padding:0;
  border:1.8px solid #e0d6ea; flex:none; position:relative;
  background:none; cursor:pointer;
}
.rond:hover{ border-color:var(--lilas-clair); }
.etape.faite .rond{ background:var(--turquoise); border-color:var(--turquoise); }
.etape.faite .rond::after{
  content:""; position:absolute; left:6.4px; top:2.6px; width:5px; height:10px;
  border:2px solid var(--blanc); border-top:0; border-left:0; transform:rotate(42deg);
}
.etape.encours .rond{ border-color:var(--lilas); border-width:2.5px; }
.etape .nom{
  flex:1; display:flex; align-items:center; gap:9px;
  border:none; background:none; font-family:inherit; font-size:.9rem;
  color:var(--encre); text-align:left; cursor:pointer; padding:2px 0;
}
.etape .nom .ico{ font-size:1rem; width:20px; flex:none; }
.etape .nom:hover{ color:var(--lilas); }
.etape.faite .nom{ color:var(--encre-doux); }
.marque-etat{
  font-size:.72rem; padding:3px 10px; border-radius:var(--pilule);
  background:var(--lilas-voile); color:#5b3fbe; flex:none;
}

/* ---------- Le temps, et ce qui est nouveau ----------
   Deux repères discrets. Ils informent, ils ne crient pas : c'est un parcours
   qu'on fait à son rythme, pas une liste qui presse. */
.etape .duree{
  font-size:.75rem; color:var(--encre-doux); flex:none;
  font-variant-numeric:tabular-nums;
}
.etape.faite .duree{ opacity:.5; }

.pastille-neuf{
  font-size:.66rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  padding:2px 8px; border-radius:var(--pilule); flex:none;
  background:var(--peche-voile); color:#b8501f;
}

.temps-guide{
  display:flex; align-items:center; gap:8px;
  font-size:.83rem; color:var(--encre-doux); margin-bottom:18px;
}
.temps-guide svg{ width:16px; height:16px; flex:none; }

/* Dans le sommaire, la durée passe sous le titre pour ne pas serrer la colonne. */
.som-item .texte em{
  display:block; font-style:normal; font-size:.72rem;
  color:var(--encre-doux); margin-top:1px;
}
.som-item.fait .texte em{ opacity:.55; }

/* Ce que sa formule comprend */
.formule-detail ul{ list-style:none; margin-top:12px; }
.formule-detail li{
  position:relative; padding:7px 0 7px 24px; font-size:.88rem; color:var(--encre-doux);
  border-bottom:1px solid var(--bordure);
}
.formule-detail li:last-child{ border-bottom:none; }
.formule-detail li::before{ content:"✦"; position:absolute; left:0; color:var(--lilas); }

/* Sa liste à elle */
.mienne{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid var(--bordure); }
.mienne:last-of-type{ border-bottom:none; }
.case{
  width:19px; height:19px; border-radius:6px; border:1.8px solid #e0d6ea;
  flex:none; margin-top:3px; position:relative; background:none; cursor:pointer; padding:0;
}
.case.ok{ background:var(--peche); border-color:var(--peche); }
.case.ok::after{
  content:""; position:absolute; left:5.2px; top:1.4px; width:5px; height:9.5px;
  border:2px solid var(--blanc); border-top:0; border-left:0; transform:rotate(42deg);
}
.mienne .txt{ flex:1; font-size:.88rem; }
.mienne.ok .txt{ text-decoration:line-through; color:#a89fc0; }
.mienne .retirer{
  background:none; border:none; color:#c9bfda; cursor:pointer;
  font-size:1rem; line-height:1; padding:0 2px;
}
.mienne .retirer:hover{ color:var(--peche); }

input[type=text], textarea{
  width:100%; padding:11px 14px;
  font-family:inherit; font-size:.9rem; color:var(--encre);
  background:var(--blanc); border:2px solid var(--bordure);
  border-radius:var(--rayon); outline:none;
}
input[type=text]:focus, textarea:focus{ border-color:var(--lilas); }
textarea{ resize:vertical; min-height:88px; line-height:1.6; }
.ajout{
  width:100%; text-align:left; font-family:inherit; font-size:.85rem;
  color:var(--encre-doux); background:none; border:1px dashed #ded3ea;
  border-radius:12px; padding:10px 14px; margin-top:12px; cursor:pointer;
}
.ajout:hover{ border-color:var(--lilas-clair); color:var(--lilas); }

/* Le coin d'aide */
.aide{ background:var(--peche-voile); border-color:#ffdcc9; }
.aide h2{ font-size:1rem; color:#a8451c; }
.aide > p{ font-size:.85rem; color:#a8451c; opacity:.85; margin:6px 0 14px; }
.aide .btn{ background:var(--peche); }
.aide textarea{ border-color:#ffdcc9; margin-bottom:12px; }

.info{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--bordure);
  font-size:.85rem; color:var(--encre-doux);
}
.info:last-of-type{ border-bottom:none; }
.info b{ color:var(--encre); font-weight:600; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.4px; font-size:.83rem; }
#btn-sortir{ margin-top:12px; }

.mot{
  padding:12px 15px; border-radius:var(--rayon); font-size:.86rem;
  background:var(--turquoise-voile); color:#12706a; margin-bottom:14px;
}

/* Ses questions et les réponses d'Anna */
#mes-questions{ margin-top:18px; display:grid; gap:12px; }
.echange{ border-top:1px solid #ffdcc9; padding-top:14px; }
.ma-q{ font-size:.9rem; line-height:1.55; white-space:pre-wrap; }
.q-date{ font-size:.75rem; color:var(--encre-doux); margin-top:4px; }
.q-attente{ font-size:.82rem; color:var(--encre-doux); font-style:italic; margin-top:8px; }
.sa-r{ margin-top:10px; padding:12px 14px; background:var(--blanc); border-radius:14px; }
.sa-r .r-qui{
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--lilas); margin-bottom:5px;
}
.sa-r p{ font-size:.9rem; line-height:1.55; white-space:pre-wrap; }


/* ============================================================
   MES GUIDES — la lecture, dans la même page
   Le contenu vient du même fichier que celui qu'Anna relit dans son
   studio. Ici, il porte la typo du Repaire.
   ============================================================ */
.lecture-page{
  display:grid; grid-template-columns:270px 1fr; gap:34px;
  max-width:1120px; align-items:start;
}
.ouvre-sommaire{ display:none; }

.sommaire{
  position:sticky; top:82px;
  background:var(--blanc); border:1px solid var(--bordure);
  border-radius:var(--rayon); padding:14px 12px;
  max-height:calc(100vh - 110px); overflow-y:auto;
}
/* ---------- Chercher dans les guides ----------
   Dix-huit guides et plus de onze mille mots : sans ça, retrouver un passage
   voulait dire les ouvrir un par un. */
.som-recherche{ position:relative; margin-bottom:10px; }
.som-recherche input{
  width:100%; padding:9px 32px 9px 13px;
  border:1px solid var(--bordure); border-radius:var(--pilule);
  font-family:inherit; font-size:.85rem; color:var(--encre);
  background:var(--creme); outline:none;
}
.som-recherche input:focus{ border-color:var(--lilas-clair); background:var(--blanc); }
.som-recherche input::placeholder{ color:#a89fc0; }
.som-recherche input::-webkit-search-cancel-button{ display:none; }
#vider-recherche{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border:none; background:none; cursor:pointer;
  color:var(--encre-doux); font-size:1.1rem; line-height:1; border-radius:50%;
}
#vider-recherche:hover{ background:var(--lilas-voile); color:var(--encre); }

.som-compte{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:#a89fc0; margin:8px 0 6px 12px;
}
.som-rien{
  font-size:.83rem; color:var(--encre-doux); line-height:1.55; padding:10px 12px;
}
.som-trouve{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:10px 12px; margin-bottom:3px; border:none; background:none;
  border-radius:12px; font-family:inherit; color:var(--encre);
}
.som-trouve:hover{ background:var(--lilas-voile); }
.som-trouve .titre{
  display:flex; align-items:center; gap:8px; font-size:.87rem; font-weight:600;
}
.som-trouve .titre svg{ width:17px; height:17px; flex:none; }
.som-trouve .extrait{
  display:block; margin-top:4px; font-size:.78rem; line-height:1.5;
  color:var(--encre-doux);
}
.som-trouve mark{
  background:var(--peche-voile); color:#b8501f; border-radius:4px; padding:0 2px;
}

.som-section{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:#a89fc0; margin:16px 0 6px 12px;
}
.som-section:first-child{ margin-top:4px; }
.som-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border:none; background:none; border-radius:12px;
  font-family:inherit; font-size:.87rem; color:var(--encre);
  text-align:left; cursor:pointer;
}
.som-item:hover{ background:var(--lilas-voile); }
.som-item.actif{ background:var(--encre); color:var(--blanc); }
.som-item .ico{ font-size:1rem; width:20px; flex:none; text-align:center; }
.som-item .texte{ flex:1; }
.som-item .coche{ opacity:0; font-size:.82rem; color:var(--turquoise); }
.som-item.fait .coche{ opacity:1; }
.som-item.actif .coche{ color:var(--turquoise-clair); }
.som-item.fait .texte{ color:var(--encre-doux); }
.som-item.actif.fait .texte{ color:var(--blanc); opacity:.85; }

.lecture{ min-width:0; }

/* --- Le contenu d'un guide --- */
.lecture .entete-page{ margin-bottom:26px; }
.lecture .entete-page .fil{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lilas); margin-bottom:8px;
}
.lecture h1{ font-size:2rem; }
.lecture h2{ font-size:1.3rem; margin:30px 0 12px; }
.lecture h3{ font-size:1.05rem; margin-bottom:10px; }
.lecture p{ margin:10px 0; }
.lecture p.intro{ font-size:1.02rem; color:var(--encre-doux); margin-top:12px; }
.lecture a{ color:var(--lilas); font-weight:500; text-decoration:none; border-bottom:1px solid var(--lilas-clair); }
.lecture a:hover{ color:var(--encre); }
/* Un bouton (ex. « Remplir le formulaire ») garde son style de bouton, pas
   celui d'un lien de texte : sans ça, le fond lilas du bouton avale le texte
   lilas du lien, invisible. Repéré par Anna le 2026-08-11. */
.lecture a.btn, .lecture a.btn:hover{ color:var(--blanc); border-bottom:none; }
.lecture ul{ margin:10px 0 10px 2px; list-style:none; }
.lecture ul li{ position:relative; padding:4px 0 4px 22px; }
.lecture strong{ font-weight:600; }
.lecture .gradient-text{ color:var(--lilas); }
.lecture .pilule{
  display:inline-block; padding:3px 12px; border-radius:var(--pilule);
  font-size:.76rem; font-weight:600; background:var(--lilas-voile); color:#5b3fbe;
}

.lecture .carte{
  background:var(--blanc); border:1px solid var(--bordure);
  border-radius:var(--rayon); padding:24px 26px; margin-bottom:20px;
  box-shadow:var(--ombre);
}
.lecture .carte-accueil{
  background:linear-gradient(120deg, var(--lilas-voile), var(--peche-voile) 52%, var(--turquoise-voile));
  border:none; border-radius:var(--rayon); padding:30px 32px; margin-bottom:24px;
}
.lecture .carte-accueil > p{ font-size:1rem; }

/* Étapes numérotées */
.lecture .etapes{ counter-reset:etape; list-style:none; margin:16px 0; }
.lecture .etapes > li{
  counter-increment:etape; position:relative;
  padding:2px 0 22px 46px; border-left:2px dashed var(--lilas-clair); margin-left:15px;
}
.lecture .etapes > li:last-child{ border-left-color:transparent; padding-bottom:4px; }
.lecture .etapes > li::before{
  content:counter(etape); position:absolute; left:-17px; top:-2px;
  width:32px; height:32px; border-radius:50%;
  background:var(--lilas); color:var(--blanc);
  display:grid; place-items:center;
  font-family:"Sora",sans-serif; font-weight:600; font-size:.88rem;
}
.lecture .etapes > li strong{ color:var(--encre); }
.lecture .etapes > li p{ margin:4px 0; color:var(--encre-doux); }
.lecture .etapes > li ul li{ color:var(--encre-doux); }

/* Encadrés */
.lecture .note{
  border-radius:var(--rayon-sm); padding:15px 18px; margin:18px 0;
  font-size:.92rem; display:flex; gap:12px; align-items:flex-start;
}
.lecture .note .ico{ font-size:1.2rem; flex-shrink:0; line-height:1.4; }
.lecture .note p{ margin:6px 0 0; }
.lecture .note-astuce{ background:var(--turquoise-voile); border-left:4px solid var(--turquoise); }
.lecture .note-attention{ background:var(--peche-voile); border-left:4px solid var(--peche); }
.lecture .note-magie{ background:var(--lilas-voile); border-left:4px solid var(--lilas); }

/* Commandes à copier */
.lecture .code{
  background:#2b2340; color:#eadffb; border-radius:var(--rayon-sm);
  padding:44px 18px 15px; font-family:ui-monospace,SFMono-Regular,"Fira Code",monospace;
  font-size:.85rem; overflow-x:auto; margin:12px 0; position:relative; white-space:pre;
  line-height:1.55;
}
.lecture .code .copier{
  position:absolute; top:8px; right:8px;
  background:#463a63; color:#fff; border:none;
  border-radius:8px; padding:5px 11px; font-family:inherit; font-size:.7rem;
  cursor:pointer; font-weight:600;
}
.lecture .code .copier:hover{ background:rgba(255,255,255,.3); }

/* La case « j'ai terminé » */
.lecture .progression{
  display:flex; align-items:center; gap:12px;
  margin-top:26px; padding:16px 20px; border-radius:var(--rayon-sm);
  background:linear-gradient(120deg, var(--lilas-voile), var(--turquoise-voile));
  font-weight:600; font-size:.92rem;
}
.lecture .progression input{ width:21px; height:21px; accent-color:var(--lilas); cursor:pointer; }
.lecture .progression label{ cursor:pointer; }

/* Ce qui vient après le guide */
.pas-suivant{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--bordure);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.pas-suivant .quoi{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-doux); font-weight:600;
}


/* ------------------------------------------------------------
   TÉLÉPHONE
   ------------------------------------------------------------ */
@media (max-width:900px){
  .bandeau{ padding:10px 16px; gap:10px; flex-wrap:wrap; }
  .bandeau .marque{ font-size:1rem; }
  .onglets{ margin-left:0; order:3; width:100%; }
  .onglet{ flex:1; }
  .bandeau .moi span:not(.jeton){ display:none; }
  .page{ padding:22px 16px 60px; }
  .tete{ grid-template-columns:1fr; }
  .grille{ grid-template-columns:1fr; }
  .suite{ flex-direction:column; align-items:flex-start; }
  .suite .btn{ width:100%; }

  .lecture-page{ display:block; }
  .ouvre-sommaire{
    display:block; width:100%; margin-bottom:16px;
    padding:12px 16px; border:1px solid var(--bordure); border-radius:var(--rayon);
    background:var(--blanc); font-family:"Sora",sans-serif; font-size:.9rem;
    font-weight:500; color:var(--encre); text-align:left; cursor:pointer;
  }
  .sommaire{ display:none; position:static; max-height:none; margin-bottom:18px; }
  .sommaire.ouvert{ display:block; }
  .lecture h1{ font-size:1.6rem; }
  .lecture .carte{ padding:20px; }
  .lecture .carte-accueil{ padding:24px 20px; }
}

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

/* ---------- Images dans les guides ----------
   Une capture d'écran doit être lisible : on l'encadre, on la laisse respirer,
   et un clic l'ouvre en grand parce que sur téléphone elle devient minuscule. */
.lecture .figure{ margin:22px 0; }
.lecture .figure img{
  display:block; width:100%; height:auto; cursor:zoom-in;
  border:1px solid var(--bordure); border-radius:14px;
  background:var(--blanc); box-shadow:0 6px 20px rgba(58,46,92,.08);
}
.lecture .figure figcaption{
  margin-top:9px; font-size:.86rem; color:var(--encre-doux); line-height:1.5;
}
.lecture .figure.large{ margin-left:-30px; margin-right:-30px; }
@media (max-width:900px){
  .lecture .figure.large{ margin-left:-16px; margin-right:-16px; }
}

.voile-image{
  position:fixed; inset:0; z-index:200; cursor:zoom-out;
  background:rgba(30,22,50,.86); backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:24px;
  animation:paraitre .18s ease both;
}
.voile-image img{
  max-width:100%; max-height:100%; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
@keyframes paraitre{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- Icônes dessinées ----------
   Elles remplacent les emojis. La taille vient de l'attribut, jamais de la
   police : un SVG ne grossit pas avec font-size. */
.icone{ flex:none; vertical-align:-.18em; }
.etape .nom .ico, .som-item .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--lilas);
}
.lecture .note .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; line-height:1;
}
.lecture .note-astuce .ico{ color:var(--turquoise); }
.lecture .note-attention .ico{ color:var(--peche); }
.lecture .note-magie .ico{ color:var(--lilas); }
.progression label .icone{ margin-right:6px; color:var(--turquoise); }

/* Une manipulation filmée. Anna, 2026-08-02 : « mets des photos ou vidéo si
   besoin ». C'est elle qui filme, parce qu'elle seule a accès aux écrans
   derrière un mot de passe. */
.figure.video video{
  width:100%; border:1px solid var(--bordure); border-radius:13px;
  background:#000; display:block;
}

/* ============================================================
   OÙ ON EN EST (2026-08-04)
   Le montage vu de chez la cliente : les grandes étapes, rien de plus.
   ⚠️ La jauge du bandeau est blanche sur fond coloré. Ici on est dans
   une carte blanche, alors elle est reprise en entier, sinon elle
   serait invisible.
   ============================================================ */
.carte.avancement{ border-top:3px solid var(--turquoise); }
.avancement .jauge{
  background:var(--turquoise-voile); margin-top:14px; height:8px;
}
.avancement .jauge i{ background:var(--turquoise); }

.avancement-phases{ margin-top:18px; }
.phase-cliente{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--bordure); font-size:.9rem;
}
.phase-cliente:last-child{ border-bottom:none; }
.phase-cliente .rond{
  width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid #e0d6ea; position:relative;
}
.phase-cliente .nom{ flex:1; }
.phase-cliente .etat{
  font-size:.72rem; color:var(--encre-doux); text-transform:lowercase;
  background:var(--creme); border-radius:var(--pilule); padding:3px 11px; white-space:nowrap;
}
.phase-cliente.encours .rond{ border-color:var(--turquoise); background:var(--turquoise-voile); }
.phase-cliente.encours .etat{ background:var(--turquoise-voile); color:#1c6f68; }
.phase-cliente.faite .rond{ background:var(--turquoise); border-color:var(--turquoise); }
.phase-cliente.faite .rond::after{
  content:""; position:absolute; left:4px; top:1px; width:3px; height:7px;
  border:2px solid var(--blanc); border-top:0; border-left:0; transform:rotate(42deg);
}
.phase-cliente.faite .nom{ color:var(--encre-doux); }

/* ⚡ Son soutien 1:1, 2026-08-04. Dans la carte « Tu bloques ? », juste avant
   le bouton de question : c'est là qu'elle regarde quand elle est coincée. */
.delai{ font-size:.82rem; color:var(--encre-doux); margin-top:6px; }
.mes-appels{
  margin:14px 0 4px; padding:14px 16px; border-radius:var(--rayon-sm);
  background:var(--turquoise-voile); border:1px solid var(--turquoise-clair);
}
.mes-appels .ma-n{
  font-family:"Sora",-apple-system,sans-serif; font-size:1.7rem; font-weight:600;
  line-height:1; color:var(--turquoise);
}
.mes-appels .ma-n span{ font-size:.95rem; color:var(--encre-doux); font-weight:400; }
.mes-appels .ma-m{ font-size:.83rem; line-height:1.55; color:var(--encre); margin-top:6px; }
/* ⚡ La proposition d'appel, quand elle n'en a encore aucun. Pointillé exprès,
   ce n'est pas un compte qui lui appartient, c'est une porte ouverte. */
.mes-appels.offre{ border-style:dashed; }
.mes-appels.offre .ma-m{ margin-top:0; }

/* ------------------------------------------------------------
   Les mots d'Anna — 2026-08-13
   Un encadré qui se lit, pas un formulaire : aucun champ, aucun
   bouton. La cliente écrit ailleurs, dans « Tu bloques ? ».
   ------------------------------------------------------------ */
/* ⚡ Une vraie boite pêche, pas un simple liseré : Anna doit repérer ses
   mots du premier coup d'oeil en parcourant le board d'une cliente. */
.carte.mots-anna{
  background:var(--peche-voile);
  border:1px solid var(--peche-clair);
  border-top:4px solid var(--peche);
}
.carte.mots-anna h2{ color:var(--peche-fonce); }
.carte.mots-anna .mot-anna p{ color:var(--encre); }
.mot-anna + .mot-anna{ border-top-color:var(--peche-clair); }
.mots-liste{ display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.mot-anna p{ font-size:.98rem; line-height:1.6; white-space:pre-wrap; }
.mot-anna .signe{
  margin-top:7px; font-size:.83rem; color:var(--encre-doux); font-style:italic;
}
.mot-anna + .mot-anna{ border-top:1px solid var(--bordure); padding-top:14px; }