:root{
  --vert:#4c8577; --vert-fonce:#3a6a5e; --vert-pale:#e3ede9;
  --rose:#b77b7d; --rose-pale:#f3e6e6;
  --corail:#ed7778; --corail-pale:#fcebea; --corail-fonce:#a8484a;
  --creme:#f6f4f0; --carte:#fffdf9;
  --encre:#2e3a35; --encre-douce:#6b7a74;
  --or:#c9a86a; --bleu:#7b93a8; --trait:#e8e2d8;
  --ombre:0 2px 14px rgba(46,58,53,.07);
  --ombre-forte:0 12px 40px rgba(46,58,53,.16);
  --radius:16px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',-apple-system,Calibri,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--encre);background:linear-gradient(165deg,#ece8e0 0%,var(--creme) 55%);min-height:100vh}
.ic{width:20px;height:20px;flex-shrink:0}
.app{display:flex;min-height:100vh}
.spinner{width:22px;height:22px;border:2.5px solid #d8d0c1;border-top-color:var(--vert);border-radius:50%;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ===== Welcome ===== */
.welcome{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,#e7efec 0%,var(--creme) 60%);display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .35s,visibility .35s}
.welcome.parti{opacity:0;visibility:hidden}
.welcome-carte{max-width:440px;text-align:center}
.welcome .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--vert);font-weight:700;margin-bottom:16px}
.welcome h1{font-family:var(--serif);font-size:30px;color:var(--vert-fonce);font-weight:normal;line-height:1.2;margin-bottom:12px}
.welcome p{font-size:14.5px;color:var(--encre-douce);line-height:1.6}
.welcome .apercu{font-size:12.5px;color:var(--vert-fonce);background:var(--vert-pale);border-radius:12px;padding:12px 16px;margin:18px 0 24px;line-height:1.6}
.welcome .btn-start{background:var(--vert);color:#fff;border:none;border-radius:12px;padding:15px 30px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(76,133,119,.3);transition:.15s}
.welcome .btn-start:hover{background:var(--vert-fonce)}
.welcome .btn-start:focus-visible{outline:2px solid var(--corail);outline-offset:3px}
.welcome .skip{display:block;margin-top:16px;background:none;border:none;color:var(--encre-douce);font-size:12px;font-family:var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ===== Rail ===== */
.rail{width:266px;flex-shrink:0;position:sticky;top:0;height:100vh;padding:26px 16px 18px;background:var(--carte);border-right:1px solid var(--trait);display:flex;flex-direction:column;gap:22px}
.marque{padding:0 10px}
.marque .nom{font-family:var(--serif);font-size:18px;color:var(--vert-fonce);line-height:1.15}
.compte{padding:0 10px;font-size:12px;color:var(--encre-douce);line-height:1.45}
.compte b{color:var(--encre);font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;border:none;background:none;font-family:var(--sans);font-size:14px;color:var(--encre);cursor:pointer;text-align:left;width:100%;transition:background .14s,color .14s}
.nav-item .ic{color:var(--encre-douce);transition:color .14s}
.nav-item:hover{background:var(--vert-pale)}
.nav-item:hover .ic{color:var(--vert-fonce)}
.nav-item.actif{background:var(--vert);color:#fff;font-weight:600}
.nav-item.actif .ic{color:#fff}
.nav-item:focus-visible{outline:2px solid var(--corail);outline-offset:2px}
.rail-bas{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.mois-ctx{border-top:1px dashed var(--trait);padding:15px 10px 2px;display:flex;flex-direction:column;gap:8px}
.mois-ctx .mois{font-family:var(--serif);font-size:15px;color:var(--vert-fonce)}
.mois-ctx .puce{font-size:12px;color:var(--encre-douce)}
.mois-ctx .puce b{color:var(--encre);font-weight:600}

.stage{flex:1;min-width:0;padding:38px 46px 60px;display:flex;justify-content:center}
.colonne{width:100%;max-width:760px}
.topbar{display:none}
.screen{display:none}
.screen.on{display:block;animation:apparait .28s ease}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.entete{margin-bottom:18px}
.eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-douce);font-weight:700}
.titre{font-family:var(--serif);font-size:32px;color:var(--vert-fonce);font-weight:normal;margin:5px 0 8px}
.chapo{font-size:14.5px;color:var(--encre-douce);line-height:1.5;max-width:60ch}
.rassure{border-left:3px solid var(--vert);background:var(--vert-pale);border-radius:0 10px 10px 0;padding:11px 15px;margin-bottom:18px;font-size:13px;line-height:1.5;color:var(--vert-fonce)}
.carte{background:var(--carte);border:1px solid #f0ebe1;border-radius:var(--radius);box-shadow:var(--ombre);padding:17px 19px;margin-bottom:14px}

/* Fil de progression semaine */
.progress{background:var(--carte);border:1px solid #f0ebe1;border-radius:12px;box-shadow:var(--ombre);padding:13px 16px;margin-bottom:18px}
.progress .txt{font-size:13px;color:var(--encre);margin-bottom:8px}
.progress .txt b{color:var(--vert-fonce)}
.progress .barre{height:7px;background:#ece5d8;border-radius:4px;overflow:hidden}
.progress .barre span{display:block;height:100%;background:var(--vert);border-radius:4px;transition:width .35s ease;width:0}

.semnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.semnav .fleche{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--vert);background:var(--carte);color:var(--vert-fonce);font-size:17px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.14s}
.semnav .fleche:hover{background:var(--vert-pale)}
.semnav .fleche:disabled{opacity:.3;cursor:default}
.semnav .centre{text-align:center;line-height:1.3}
.semnav .centre .s{font-family:var(--serif);font-size:16px;color:var(--vert-fonce)}
.semnav .centre .d{font-size:11.5px;color:var(--encre-douce);margin-top:1px}

/* Fiche */
.fiche{background:var(--carte);border-radius:var(--radius);box-shadow:var(--ombre);display:flex;border:1px solid #f0ebe1;margin-bottom:16px}
.fiche .bande{width:6px;flex-shrink:0;border-radius:var(--radius) 0 0 var(--radius);background:var(--rose)}
.fiche .bande.p-vert{background:var(--vert)}
.fiche .bande.p-cor{background:var(--corail)}
.fiche .bande.p-or{background:var(--or)}
.fiche .bande.p-bleu{background:var(--bleu)}
.fiche .corps{padding:17px 20px 19px;flex:1;min-width:0}
.fiche .haut{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:3px}
.fiche .format{font-size:13px;font-weight:700;color:var(--vert-fonce)}
.fiche .format .quand{color:var(--encre-douce);font-weight:400}
.badge{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:4px 9px;border-radius:6px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;background:var(--vert-pale);color:var(--vert-fonce)}
.badge.mid{background:#f0e9db;color:#8a6d2f}
.fiche .pilier{font-size:12px;color:var(--encre-douce);margin-bottom:11px}
.fiche .hook{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.4;color:var(--encre);margin-bottom:14px}
.fiche .meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
/* « Plus d'info » : les mêmes infos que la fiche du calendrier (angle, place dans le mois,
   mood), repliées par défaut pour ne pas surcharger la carte de production. */
.fiche-plus{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--vert-fonce);font-family:inherit;font-size:12px;padding:0;margin:-6px 0 14px;cursor:pointer;opacity:.85;transition:.14s}
.fiche-plus:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.fiche-infos{border-left:3px solid var(--vert-pale);padding:2px 0 2px 13px;margin:-4px 0 16px;display:flex;flex-direction:column;gap:10px}
.fiche-infos[hidden]{display:none}
.fiche-infos .co-angle{margin-bottom:0}
.fiche-infos .co-angle.sourdine{font-size:12.5px;color:var(--encre-douce)}
.fiche-infos .co-mood{margin-bottom:0}
.diff{display:inline-flex;align-items:center;gap:4px}
.diff .pt{width:8px;height:8px;border-radius:50%;background:#ddd6cc}
.diff .pt.on{background:var(--rose)}
.diff .lbl{font-size:11.5px;color:var(--encre-douce);margin-left:4px}
.action{font-size:12px;color:var(--encre-douce)}
.action b{color:var(--encre);font-weight:600}
.apres{display:none}
.fiche.est-pret .avant{display:none}
.fiche.est-pret .apres{display:block}
.btn-preparer{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--vert);color:#fff;border:none;border-radius:11px;padding:14px 20px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;transition:.15s;box-shadow:0 4px 14px rgba(76,133,119,.28);width:100%}
.btn-preparer:hover{background:var(--vert-fonce)}
.btn-preparer:disabled{opacity:.85;cursor:default;box-shadow:none}
.btn-preparer .ic{width:18px;height:18px}
.preparer-argu{font-size:12px;color:var(--encre-douce);text-align:center;line-height:1.45;margin-top:8px}
.pret-line{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--vert-fonce);margin-bottom:3px}
.pret-line .ic{width:19px;height:19px;color:var(--vert)}
.pret-sous{font-size:12.5px;color:var(--encre-douce);margin-bottom:14px}
.etapes-titre{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce);font-weight:700;margin-bottom:9px}
.etapes{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.etape{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:8px 14px;border-radius:8px;border:1.5px solid #e2dbcd;background:#f7f3ec;color:#7f7767;cursor:pointer;font-family:var(--sans);transition:.12s}
.etape:hover{border-color:var(--vert);color:var(--vert-fonce);background:#fff}
.etape.fait{background:var(--vert-pale);border-color:var(--vert-pale);color:var(--vert-fonce);border-style:solid}
.etape:not(.fait) .coche{display:none}
.etape[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--encre);color:#fff;font-size:11px;font-weight:500;line-height:1.35;padding:7px 11px;border-radius:8px;width:max-content;max-width:200px;text-align:center;opacity:0;pointer-events:none;transition:.16s;z-index:30;box-shadow:var(--ombre-forte)}
.etape[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.statut-pill{font-size:11px;font-weight:700;background:var(--vert);color:#fff;padding:8px 13px;border-radius:8px;margin-left:4px}
.lien-prompt{background:none;border:none;padding:0;margin-top:14px;font-family:var(--sans);font-size:12px;color:var(--encre-douce);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#cfc7b7;transition:.12s;display:inline-flex;align-items:center;gap:6px}
.lien-prompt:hover{color:var(--vert-fonce)}
.kiff{margin-top:16px;padding-top:15px;border-top:1px dashed #e5ded1}
.kiff .q{font-size:13.5px;margin-bottom:10px}
.kiff .q b{color:var(--encre)}
.kiff .q .sub{color:var(--encre-douce);font-weight:400}
.kiff .choix{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.mood{border:1.5px solid var(--trait);background:var(--carte);border-radius:999px;padding:8px 15px;font-size:13px;cursor:pointer;font-family:var(--sans);transition:.13s}
.mood:hover{border-color:var(--rose)}
.mood.sel{background:var(--rose);border-color:var(--rose);color:#fff}
.kiff .rem{font-size:12px;color:var(--encre-douce)}
.kiff .rem b{color:var(--vert-fonce);cursor:pointer}

/* Perf star (Résultats) */
.perf{position:relative;background:linear-gradient(135deg,#fff5ee 0%,var(--carte) 60%);border:1px solid #f2ddc8;border-left:4px solid var(--corail);border-radius:var(--radius);box-shadow:var(--ombre);padding:17px 44px 17px 19px;margin-bottom:16px}
.perf h3{font-size:15px;color:var(--encre);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.perf .plus{font-family:var(--serif);color:var(--corail);font-weight:normal}
.perf p{font-size:13px;color:var(--encre-douce);line-height:1.5;margin-bottom:10px}
.perf .boost-msg{font-size:12.5px;color:var(--vert-fonce);background:var(--vert-pale);border-radius:9px;padding:9px 12px;line-height:1.5;margin-bottom:10px}
.perf a.ouvre-post{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--vert-fonce);text-decoration:none}
.perf a.ouvre-post:hover{text-decoration:underline}
.perf .fermer{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;background:none;color:var(--encre-douce);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.perf .fermer:hover{background:#00000008}

/* Profil */
.etat-fond{display:flex;align-items:center;gap:10px;background:var(--vert-pale);border-radius:12px;padding:12px 15px;margin-bottom:24px;font-size:13px;line-height:1.5;color:var(--vert-fonce)}
.etat-fond .ic{width:19px;height:19px;color:var(--vert)}
.etat-fond b{font-weight:700}
.section{margin-bottom:24px}
.sec-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.sec-num{font-family:var(--serif);font-size:15px;color:var(--rose)}
.sec-titre{font-family:var(--serif);font-size:19px;color:var(--vert-fonce)}
.sec-sous{font-size:12.5px;color:var(--encre-douce);margin:0 0 12px 26px;line-height:1.45}
.bloc{background:var(--carte);border:1px solid #f0ebe1;border-radius:var(--radius);box-shadow:var(--ombre);padding:17px 19px}
.champ-lbl{display:block;font-size:12px;color:var(--encre-douce);font-weight:600;margin:14px 0 6px}
.champ-lbl:first-child{margin-top:0}
.champ{width:100%;border:1.5px solid #ddd5c8;border-radius:11px;padding:11px 13px;font-size:14px;background:#fff;font-family:var(--sans);color:var(--encre)}
.champ:focus{outline:2px solid var(--vert);border-color:var(--vert)}
.deduit{font-size:11.5px;color:var(--vert-fonce);background:var(--vert-pale);border-radius:8px;padding:7px 11px;margin-bottom:10px;display:inline-block;line-height:1.4}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;border:1.5px solid var(--rose);color:var(--rose);font-size:13px;cursor:pointer;background:transparent;font-family:var(--sans);transition:.12s}
.chip:hover{background:var(--rose-pale)}
.chip.sel{background:var(--rose);border-color:var(--rose);color:#fff}
.chip.ajout{border-style:dashed;border-color:#cbb0b1;color:var(--encre-douce)}
.format-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed #ece5d8}
.format-ligne:last-child{border:none}
.format-nom{font-size:13.5px;font-weight:600;color:var(--encre)}
.echelle{display:inline-flex;gap:6px;align-items:center}
.echelle .pt{width:12px;height:12px;border-radius:50%;background:#e4ddce;border:none;cursor:pointer;transition:.12s;padding:0}
.echelle .pt:hover{transform:scale(1.15)}
.echelle .pt.on{background:var(--rose)}
.echelle .lbl{font-size:11px;color:var(--encre-douce);margin-left:6px;width:56px;text-align:right}
.cadence-note{font-size:12px;color:var(--encre-douce);margin-top:12px;line-height:1.5}
.cadence-note b{color:var(--vert-fonce)}
.interdits{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.interdit{font-size:12px;background:var(--corail-pale);color:#c04a4b;padding:6px 12px;border-radius:999px;font-weight:600}
.valider-zone{margin-top:8px}
.btn-valider{width:100%;background:var(--vert);color:#fff;border:none;border-radius:12px;padding:15px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(76,133,119,.28);transition:.15s}
.btn-valider:hover{background:var(--vert-fonce)}
.outil-card{display:flex;align-items:center;gap:16px;background:var(--carte);border:1px solid #f0ebe1;border-radius:var(--radius);box-shadow:var(--ombre);padding:16px 18px;cursor:pointer;transition:.14s;width:100%;text-align:left;font-family:var(--sans);margin-bottom:12px}
.outil-card:hover{border-color:var(--vert);box-shadow:var(--ombre-forte)}
.outil-ic{width:46px;height:46px;border-radius:12px;background:var(--vert-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.outil-ic .ic{width:24px;height:24px;color:var(--vert-fonce)}
.outil-txt h4{font-size:14.5px;color:var(--encre);margin-bottom:3px}
.outil-txt p{font-size:12.5px;color:var(--encre-douce);line-height:1.45}
.outil-fleche{margin-left:auto;color:var(--encre-douce);flex-shrink:0}

/* Idées */
.idee-capture{display:flex;gap:8px;margin-bottom:18px}
.idee-capture .champ{flex:1}
.btn-capture{background:var(--vert);color:#fff;border:none;border-radius:11px;padding:11px 18px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.14s}
.btn-capture:hover{background:var(--vert-fonce)}
.idee{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px dashed #ece5d8}
.idee:last-child{border:none}
.idee-txt{font-size:13.5px;line-height:1.4}
.idee-txt small{display:block;font-size:11.5px;color:var(--encre-douce);margin-top:3px}
.statut-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.statut-tag.nouvelle{background:#efe9df;color:var(--encre-douce)}
.statut-tag.autiliser{background:var(--vert-pale);color:var(--vert-fonce)}
.statut-tag.programmee{background:var(--rose-pale);color:var(--rose)}

/* Résultats */
.ens{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.ens .num{font-family:var(--serif);font-size:24px;color:var(--corail);line-height:1;flex-shrink:0;width:26px}
.ens p{font-size:13.5px;line-height:1.5}
.ens p b{color:var(--vert-fonce)}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed #e5ded1}
.stat:last-of-type{border:none}
.stat .val{font-family:var(--serif);font-size:20px;color:var(--vert-fonce)}
.klt{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:12px 0 8px}
.klt span{height:100%}
.klt-leg{display:flex;gap:14px;font-size:11px;color:var(--encre-douce);flex-wrap:wrap}
.klt-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.histo{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed #eee7db;font-size:12.5px;gap:8px}
.histo:last-child{border:none}
.histo .q b{color:var(--vert-fonce)}
.histo .q small{display:block;font-size:10.5px;color:var(--encre-douce)}
.histo .p{font-family:var(--serif);color:var(--vert-fonce);white-space:nowrap}
.histo[data-post]{cursor:pointer;transition:background .12s;border-radius:8px}
.histo[data-post]:hover{background:var(--vert-pale)}
.histo[data-post]:focus-visible{outline:2px solid var(--corail);outline-offset:-2px}
.histo-droite{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.histo .analyser{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--corail)}
.micro-stats{display:flex;flex-direction:column;margin:2px 0 6px}
.ms-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;padding:8px 0;border-bottom:1px dashed #ece5d8}
.ms-row:last-child{border:none}
.ms-row .lab{color:var(--encre-douce)}
.ms-val{font-weight:700;color:var(--encre)}
.ms-val em{font-style:normal;font-family:var(--serif);font-weight:normal;margin-left:8px;color:var(--corail)}
.ms-val em.moins{color:var(--encre-douce)}

/* Placeholder */
.placeholder{border:1.5px dashed #d8d0c1;border-radius:var(--radius);padding:44px 32px;text-align:center;color:var(--encre-douce);background:rgba(255,253,249,.5)}
.placeholder h3{font-family:var(--serif);font-weight:normal;font-size:20px;color:var(--vert-fonce);margin-bottom:8px}
.placeholder p{font-size:13.5px;line-height:1.55;max-width:46ch;margin:0 auto}

/* Panneau */
.voile{position:fixed;inset:0;background:rgba(46,58,53,.32);opacity:0;pointer-events:none;transition:.2s;z-index:80}
.voile.ouvert{opacity:1;pointer-events:auto}
.panneau{position:fixed;top:0;right:0;height:100vh;width:min(470px,94vw);background:var(--creme);box-shadow:-14px 0 40px rgba(46,58,53,.18);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:90;display:flex;flex-direction:column}
.panneau.ouvert{transform:none}
.pan-tete{padding:20px 22px 15px;border-bottom:1px solid var(--trait);position:relative}
.pan-poignee{display:none}
.pan-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);font-weight:700}
.pan-titre{font-family:var(--serif);font-size:22px;color:var(--vert-fonce);margin:4px 0 0}
.pan-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:none;background:#efe9df;color:var(--encre);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.13s}
.pan-close:hover{background:#e5ddce}
.pan-corps{padding:18px 22px 28px;overflow-y:auto;flex:1;scrollbar-width:thin}
.pan-corps h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce);font-weight:700;margin:16px 0 7px}
.pan-corps h4:first-child{margin-top:0}
.pan-corps p{font-size:13.5px;line-height:1.6;margin-bottom:10px}
.pan-corps ul{margin:0 0 12px 2px;padding-left:16px}
.pan-corps li{font-size:13.5px;line-height:1.55;margin-bottom:5px}
.pan-corps b{color:var(--encre)}
.bloc-copiable{background:var(--carte);border:1px solid var(--trait);border-radius:11px;padding:14px 15px;font-size:13px;line-height:1.55;color:var(--encre);white-space:pre-wrap;margin:4px 0 8px}
.bloc-prompt{background:#2e3a35;color:#e8efe9;border-radius:11px;padding:15px;font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;margin:4px 0 10px}
.btn-copie{display:inline-flex;align-items:center;gap:8px;background:var(--vert);color:#fff;border:none;border-radius:9px;padding:10px 16px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:.14s}
.btn-copie:hover{background:var(--vert-fonce)}
.btn-copie.ghost{background:transparent;color:var(--vert-fonce);border:1.5px solid var(--vert)}
.btn-fait{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--vert-fonce);border:1.5px solid var(--vert);border-radius:9px;padding:10px 16px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:.14s}
.btn-fait:hover{background:var(--vert-pale)}
.btn-fait.on{background:var(--vert);color:#fff;border-color:var(--vert)}
.pan-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pan-sep{border:none;border-top:1px dashed var(--trait);margin:16px 0}
.pan-note{font-size:11.5px;color:var(--encre-douce);font-style:italic;margin-top:10px}
.gen-lbl{display:block;font-size:12px;color:var(--encre-douce);font-weight:600;margin:15px 0 6px}
.gen-lbl:first-child{margin-top:0}
.gen-crans{display:flex;gap:0;background:#efe9df;border-radius:10px;padding:3px}
.gen-crans button{flex:1;border:none;background:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--encre-douce);padding:8px 6px;border-radius:8px;cursor:pointer;transition:.13s}
.gen-crans button.on{background:var(--carte);color:var(--vert-fonce);box-shadow:var(--ombre)}
.cran-desc{font-size:11.5px;color:var(--encre-douce);font-style:italic;margin-top:7px;line-height:1.45}
.gen-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn-gen{flex:1;min-width:140px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--vert);color:#fff;border:none;border-radius:10px;padding:12px 16px;font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer;transition:.14s}
.btn-gen:hover{background:var(--vert-fonce)}
.btn-gen.ghost{background:transparent;color:var(--vert-fonce);border:1.5px solid var(--vert)}
.gen-out{margin-top:20px;border-top:1px dashed var(--trait);padding-top:16px}
.bio-carte{background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:14px 15px;margin-bottom:10px}
.bio-txt{font-size:14px;line-height:1.5;color:var(--encre);margin-bottom:10px}
.bio-pied{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bio-compteur{font-size:11.5px;color:var(--encre-douce)}
.bio-compteur.ok{color:var(--vert-fonce)}
.seo-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.seo-badge.bon{background:var(--vert-pale);color:var(--vert-fonce)}
.seo-badge.moyen{background:#f5ecd6;color:#8a6d2f}
.mini-copie{background:none;border:none;color:var(--corail);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--sans);padding:0}
.seo-check{font-size:12.5px;color:var(--encre-douce);line-height:1.6;margin-top:4px}
.seo-check b{color:var(--vert-fonce)}
.chargement{display:flex;align-items:center;gap:12px;padding:26px 4px;color:var(--encre-douce);font-size:13px}

/* Calendrier */
.bandeau{background:var(--rose-pale);border-radius:12px;padding:12px 15px;margin-bottom:16px;font-size:12.5px;line-height:1.5;color:var(--encre)}
.synthese{background:linear-gradient(120deg,var(--vert) 0%,var(--vert-fonce) 100%);color:#fff;border-radius:var(--radius);padding:17px 19px;margin-bottom:16px}
.synthese h3{font-family:var(--serif);font-weight:normal;font-size:16px;margin-bottom:8px}
.synthese p{font-size:12.5px;line-height:1.55;opacity:.96}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:10px}
.cal-lbl{font-size:10px;text-align:center;color:var(--encre-douce);text-transform:uppercase;letter-spacing:.05em;padding:2px 0;font-weight:700}
.cal-j{aspect-ratio:1;background:var(--carte);border:1px solid #eee7db;border-radius:10px;font-size:12.5px;padding:6px;position:relative;color:var(--encre)}
.cal-j.vide{background:transparent;border:none}
.cal-j.dim{background:#f1ede5;color:#b3a993}
.cal-j.post{cursor:pointer;transition:.12s}
.cal-j.post:hover{border-color:var(--vert);box-shadow:var(--ombre)}
.cal-j.post:focus-visible{outline:2px solid var(--corail);outline-offset:1px}
.cal-dots{position:absolute;bottom:6px;left:0;right:0;display:flex;gap:3px;justify-content:center}
.cal-dot{width:7px;height:7px;border-radius:50%}
.dot-ca{background:var(--vert)}.dot-br{background:var(--or)}.dot-tv{background:var(--corail)}.dot-ps{background:var(--rose)}
.cal-serie{position:absolute;top:3px;right:5px;font-size:10px}
.callegende{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--encre-douce);margin-bottom:16px}
.callegende span{display:flex;align-items:center;gap:5px}
.callegende i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cal-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btn-ghost{border:1.5px solid var(--vert);background:var(--carte);color:var(--vert-fonce);border-radius:11px;padding:12px 18px;font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer;transition:.14s}
.btn-ghost:hover{background:var(--vert-pale)}
.btn-suite{margin-left:auto;border:none;background:var(--vert);color:#fff;border-radius:11px;padding:12px 18px;font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer;transition:.14s}
.btn-suite:hover{background:var(--vert-fonce)}
.mois-cible{font-family:var(--serif);font-size:20px;color:var(--vert-fonce);margin-bottom:2px}
.cta-cle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--corail-pale);border-radius:9px;padding:8px 12px;font-size:12.5px;color:#b5484a;margin:2px 0 16px}
.cta-cle b{font-weight:800;letter-spacing:.04em}
.cta-cle .hint{color:var(--encre-douce);font-weight:400;font-size:11.5px}
.cta-note{background:var(--corail-pale);border-radius:9px;padding:9px 12px;font-size:12px;color:#b5484a;line-height:1.45;margin-top:8px}
.cta-note b{font-weight:800;letter-spacing:.04em}
.mc-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#eef3ff,#fffdf9);border:1px solid #dbe4f5;border-radius:var(--radius);box-shadow:var(--ombre);padding:15px 17px;text-decoration:none;color:var(--encre);transition:.14s}
.mc-card:hover{border-color:var(--bleu);box-shadow:var(--ombre-forte)}
.mc-ic{width:44px;height:44px;border-radius:11px;background:#eaf0ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.mc-txt h4{font-size:14.5px;margin-bottom:3px}
.mc-txt p{font-size:12.5px;color:var(--encre-douce);line-height:1.45;margin-bottom:4px}
.mc-txt .aff{color:var(--bleu);font-weight:700;font-size:12px}
.mc-lien{color:var(--bleu);font-weight:700;text-decoration:none;white-space:nowrap;font-size:11.5px}
.mc-lien:hover{text-decoration:underline}
.cad-plus{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:7px 14px;border-radius:999px;border:1.5px dashed #cbb0b1;color:var(--encre-douce);font-size:15px;line-height:1;cursor:pointer;background:transparent;font-family:var(--sans);transition:.12s}
.cad-plus:hover{border-color:var(--rose);color:var(--rose)}
.cad-warn{background:#fff4e6;border:1px solid #f0d8b0;border-radius:9px;padding:10px 13px;font-size:12px;color:#8a6d2f;line-height:1.5;margin-top:10px}
.chip[hidden],.cad-plus[hidden]{display:none}
.cad-reco{background:var(--vert-pale);border-radius:9px;padding:9px 12px;font-size:12px;color:var(--vert-fonce);line-height:1.5;margin-top:10px}
.badge.bot{background:var(--corail-pale);color:#c04a4b}
.co-badge{margin-bottom:8px}
.co-pilier{font-size:12px;color:var(--encre-douce);margin-bottom:10px}
.co-hook{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;margin-bottom:12px;color:var(--encre)}
.co-angle{font-size:13.5px;line-height:1.55;margin-bottom:12px;color:var(--encre)}
.co-angle b{color:var(--encre)}
.co-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.co-meta .diff{display:inline-flex;align-items:center;gap:4px}
.co-meta .diff .pt{width:8px;height:8px;border-radius:50%;background:#ddd6cc}
.co-meta .diff .pt.on{background:var(--rose)}
.co-meta .diff .lbl{font-size:11.5px;color:var(--encre-douce);margin-left:4px}
.co-mood{font-size:12.5px;line-height:1.5;color:var(--vert-fonce);background:var(--vert-pale);border-radius:10px;padding:10px 13px;margin-bottom:4px}
.tript{display:flex;gap:8px;margin-top:4px}
.tript button{flex:1;border:1.5px solid var(--vert);background:var(--carte);color:var(--vert-fonce);border-radius:10px;padding:11px 6px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:.13s}
.tript button:hover{background:var(--vert-pale)}
.tript button.actif{background:var(--vert);color:#fff;border-color:var(--vert)}
.tript button:focus-visible{outline:2px solid var(--corail);outline-offset:2px}
.tri-zone{margin-top:14px}
.tri-zone p.intro{font-size:13px;color:var(--encre-douce);line-height:1.5;margin-bottom:10px}
.idee-pick{width:100%;text-align:left;background:var(--carte);border:1.5px solid #e8e1d4;border-radius:11px;padding:11px 13px;font-size:13.5px;cursor:pointer;font-family:var(--sans);margin-bottom:8px;transition:.12s;display:flex;justify-content:space-between;align-items:center;gap:10px}
.idee-pick:hover{border-color:var(--vert);background:var(--vert-pale)}
.idee-pick .tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.tag.au{background:var(--vert-pale);color:var(--vert-fonce)}.tag.nv{background:#efe9df;color:var(--encre-douce)}
.motif-err{color:#c04a4b;font-size:12px;margin-top:6px;display:none}
.motif-err.on{display:block}
textarea.champ{resize:vertical;min-height:74px}
.tabbar{display:none}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--encre);color:#fff;font-size:12.5px;padding:11px 20px;border-radius:999px;opacity:0;transition:.25s;pointer-events:none;z-index:120;max-width:90vw;text-align:center;box-shadow:var(--ombre-forte)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:900px){
  .rail{display:none}
  .stage{padding:0 0 90px}
  .colonne{max-width:640px;padding:0 18px}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:30;background:rgba(246,244,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait);padding:14px 18px;margin-bottom:20px}
  .topbar .t{font-family:var(--serif);font-size:19px;color:var(--vert-fonce)}
  .topbar .c{font-size:11px;color:var(--encre-douce)}
  .titre{font-size:26px}
  .panneau{top:auto;bottom:0;right:0;left:0;width:100%;height:auto;max-height:92vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .panneau.ouvert{transform:none}
  .pan-poignee{display:block;width:40px;height:4px;background:#d8d0c1;border-radius:2px;margin:10px auto 2px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;height:64px;z-index:40;background:var(--carte);border-top:1px solid var(--trait);padding-bottom:env(safe-area-inset-bottom)}
  .tab{flex:1;border:none;background:none;cursor:pointer;font-family:var(--sans);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--encre-douce)}
  .tab .ic{color:var(--encre-douce);width:22px;height:22px}
  .tab.actif{color:var(--vert-fonce);font-weight:700}.tab.actif .ic{color:var(--vert-fonce)}
}
@media(min-width:1400px){.stage{padding-top:52px}.colonne{max-width:800px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;animation:none!important}}

/* ── Finalisation de fiche (mettre en ligne / porte discrète) ── */
.final{margin-top:12px;padding-top:12px;border-top:1px dashed #e5ded1}
.finalisation{margin-top:6px}
.btn-final{width:100%;background:var(--vert);color:#fff;border:none;border-radius:999px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.btn-final:hover{background:var(--vert-fonce)}
.btn-final.on{background:var(--vert-pale);color:var(--vert-fonce)}
.lien-souci{display:block;margin:10px auto 0;background:none;border:none;color:var(--encre-douce);font-size:12px;text-decoration:underline;cursor:pointer;font-family:inherit}
.lien-souci:hover{color:var(--vert-fonce)}
.rem-aff{font-size:11.5px;color:var(--encre-douce);text-align:center;margin-top:10px}

/* ── Marqueurs reporté / annulé ── */
.cal-dots{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.cal-dot.annule{background:#b4b2a9!important;opacity:.55}
.cal-dot.reporte{outline:2px solid var(--or);outline-offset:1px}
.fiche.annule .haut,.fiche.annule .pilier,.fiche.annule .hook,.fiche.annule .meta,.fiche.annule .avant,.fiche.annule .apres{opacity:.5}
.fiche.annule .hook{text-decoration:line-through;text-decoration-color:#c9bdbd}
.fiche.annule .avant,.fiche.annule .apres{pointer-events:none}
.fiche.annule .kiff,.fiche.annule .finalisation{display:none}
.reactiver-zone{display:none;margin-top:6px}
.fiche.annule .reactiver-zone{display:block}
.badge-statut{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:6px;margin-left:6px;vertical-align:middle}
.badge-statut.annule{background:var(--rose-pale);color:#8a4a4a}
.badge-statut.reporte{background:#f6ecd6;color:#8a6d2f}

/* ── Item 1 : bouton "Produire dans l'Atelier" depuis une fiche du calendrier ── */
.btn-atelier{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;
  background:var(--vert-pale);color:var(--vert-fonce);border:1px solid rgba(76,133,119,.35);
  border-radius:999px;padding:12px 14px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.btn-atelier:hover{background:var(--vert);color:#fff;border-color:var(--vert)}
.btn-atelier .fl-at{transition:transform .15s}
.btn-atelier:hover .fl-at{transform:translateX(3px)}
.btn-atelier .ic-at{opacity:.85}

/* Fiche mise en avant à l'arrivée depuis le calendrier */
@keyframes calcm-halo{0%{box-shadow:0 0 0 0 rgba(76,133,119,.55)}100%{box-shadow:0 0 0 10px rgba(76,133,119,0)}}
.fiche.surligne{animation:calcm-halo 1.6s ease-out;border-color:var(--vert)!important}

/* ── Item 4 : topbar mobile, accès au changement de compte ── */
.topbar .c.cliquable{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.topbar .c.cliquable:active{opacity:.7}
.tc-chev{font-size:10px;color:var(--vert-fonce);transform:translateY(-1px)}

/* ── Générateur de bio : variantes multiples + kit mots-clés + audit ── */
.bio-txt{white-space:pre-wrap}
.bio-lbl{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--vert-fonce);margin-bottom:6px}
.bio-nom{font-size:12.5px;color:var(--encre-douce);margin-bottom:8px}
.bio-why{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--encre-douce);line-height:1.5}
.bio-why li{margin-bottom:2px}
.kw-kit{margin-top:12px;padding-top:12px;border-top:1px dashed var(--trait)}
.kw-wrap{display:flex;flex-wrap:wrap;gap:6px}
.kw-chip{display:inline-block;background:var(--vert-pale);color:var(--vert-fonce);font-size:12px;padding:4px 10px;border-radius:999px}
.gen-audit{margin-top:12px;border-top:1px solid var(--trait);padding-top:10px}
.gen-audit summary{font-size:12.5px;color:var(--vert-fonce);cursor:pointer;font-weight:600}
.gen-audit[open] summary{margin-bottom:8px}

/* ── Stories à la une : détail story par story (script + tournage) ── */
.hi-stories{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.hi-story{display:flex;gap:10px;background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:11px 13px}
.hi-num{flex:0 0 22px;height:22px;border-radius:50%;background:var(--vert-pale);color:var(--vert-fonce);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.hi-body{flex:1;min-width:0}
.hi-idee{font-size:13.5px;color:var(--encre);line-height:1.45;margin-bottom:5px}
.hi-tourn{font-size:12px;color:var(--encre-douce);line-height:1.5}
.hi-tourn b{color:var(--vert-fonce)}

/* Bouton copier discret dans le détail d'une story à la une */
.hi-copie{margin-top:8px;background:none;border:1px solid var(--trait);color:var(--vert-fonce);font-family:inherit;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;transition:.15s}
.hi-copie:hover{background:var(--vert-pale);border-color:var(--vert)}

/* Propositions éditables sur place (même esprit que les idées éditables). L'affordance
   (fond, contour, placeholder) n'apparaît QUE quand le verrou est ouvert (contenteditable). */
.champ-edit{outline:none;border-radius:6px;transition:background .12s,box-shadow .12s}
.champ-edit[contenteditable="true"]{cursor:text}
.champ-edit[contenteditable="true"]:hover{background:rgba(76,133,119,.05)}
.champ-edit[contenteditable="true"]:focus{background:rgba(76,133,119,.07);box-shadow:0 0 0 2px var(--vert-pale)}
.champ-edit[contenteditable="true"]:empty:before{content:attr(data-ph);color:var(--encre-douce);opacity:.7;font-style:italic}
.hi-titre{font-family:var(--serif);font-size:17px;color:var(--vert-fonce);line-height:1.3;padding:4px 7px;margin:-4px -7px 2px}
.hi-role{font-size:13.5px;color:var(--encre-douce);line-height:1.5;padding:4px 7px;margin:-4px -7px 4px}
.hi-conseil{font-size:13px;color:var(--vert-fonce);line-height:1.5;background:var(--vert-pale);border-radius:10px;padding:9px 12px;margin:2px 0 4px}
/* Dans une story : l'idée et le tournage restent lisibles, éditables au clic. */
.hi-idee.champ-edit{padding:3px 6px;margin:-3px -6px 5px}
.hi-tourn .champ-edit{padding:1px 5px;margin:-1px -5px}
.bio-txt.champ-edit{padding:4px 7px;margin:-4px -7px 10px}
.bio-nom-edit{display:inline-block;min-width:70px;padding:1px 5px;margin:-1px -3px;vertical-align:baseline}
.bio-nudge{font-size:12.5px;line-height:1.45;color:#8a5a2b;background:#fbf3e7;border:1px solid #e6d3b3;border-radius:10px;padding:8px 11px;margin:0 0 12px}
/* Champs texte « coulants » (profil, brief) : lisibles d'un coup d'œil, hauteur auto,
   pas de scroll interne — même esprit que les textes des stories à la une. */
.champ-flow{font-size:14px;line-height:1.6;color:var(--encre);white-space:pre-wrap;word-break:break-word;padding:5px 8px;margin:2px -8px 4px;border-radius:8px;min-height:1.6em}
.champ-flow.champ-titre{font-family:var(--serif);font-size:16px;color:var(--vert-fonce);line-height:1.35}
.champ-flow[contenteditable="false"]{cursor:default}

/* ═══ VERROU D'ÉDITION (partagé) ═══ */
.verrou-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.verrou-tete.verrou-ecran{margin-bottom:18px}
.verrou-tete.verrou-bas{margin:20px 0 22px;padding-top:14px;border-top:1px dashed var(--trait)}
.verrou-hint{font-size:12px;color:var(--encre-douce);font-style:italic;line-height:1.4}
.btn-verrou{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:999px;cursor:pointer;border:1px solid var(--vert);background:var(--carte);color:var(--vert-fonce);transition:.15s;white-space:nowrap}
.btn-verrou:hover{background:var(--vert-pale)}
.btn-verrou.on{background:var(--vert);color:#fff;border-color:var(--vert)}
.verrou-bloque{pointer-events:none}
/* Champs input/textarea verrouillés : au repos (plats) tant qu'on n'édite pas. */
.champ.verrouillable:read-only,.champ.verrouillable:disabled{background:var(--creme);color:var(--encre);cursor:default;opacity:1;-webkit-text-fill-color:var(--encre)}
.edition-active .champ.verrouillable{background:#fff}
/* Cases/chips verrouillés : légèrement en retrait quand c'est fermé. */
.chip.verrouillable.verrou-bloque{opacity:.72}
.edition-active .chip.verrouillable{opacity:1}
/* Idées : le bloc-note s'édite au clic quand le verrou est ouvert. */
.idee-edit{outline:none;border-radius:6px;padding:3px 6px;margin:-3px -6px;transition:background .12s,box-shadow .12s}
.idee-edit[contenteditable="true"]{cursor:text}
.edition-active .idee-edit[contenteditable="true"]:hover{background:rgba(76,133,119,.05)}
.edition-active .idee-edit[contenteditable="true"]:focus{background:rgba(76,133,119,.07);box-shadow:0 0 0 2px var(--vert-pale)}

/* ═══ EN DIRECT ═══ */
/* Point "rec" qui pulse doucement sur l'onglet */
[data-scr="direct"]{position:relative}
.rec-dot{position:absolute;top:9px;right:11px;width:7px;height:7px;border-radius:50%;background:var(--corail);animation:rec-pulse 2.4s ease-in-out infinite}
@keyframes rec-pulse{0%,100%{opacity:.4;box-shadow:0 0 0 0 rgba(237,119,120,.45)}50%{opacity:1;box-shadow:0 0 0 5px rgba(237,119,120,0)}}
@media(prefers-reduced-motion:reduce){.rec-dot{animation:none;opacity:.8}}

.d-barre{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.d-refresh{display:inline-flex;align-items:center;gap:8px;background:var(--vert);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.d-refresh:hover{background:var(--vert-fonce)}
.d-refresh:disabled{opacity:.7;cursor:default}
.rf-ico{display:inline-block;font-size:16px;line-height:1}
.rf-ico.spin{animation:rf-spin 1s linear infinite}
@keyframes rf-spin{to{transform:rotate(360deg)}}

.d-bandeau{display:flex;align-items:center;gap:12px;background:var(--vert-pale);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.d-b-ico{font-size:22px}
.d-b-lbl{font-size:12px;color:var(--vert-fonce);opacity:.85}
.d-b-val{font-size:15px;color:var(--vert-fonce);line-height:1.3}
.d-b-val .d-num{font-size:22px;font-weight:700}

.d-liste{display:flex;flex-direction:column;gap:12px}
.d-carte{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:15px 16px}
.d-carte.hot{border:2px solid var(--vert);box-shadow:0 1px 10px rgba(76,133,119,.1)}
.d-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.d-meta{font-size:11.5px;color:var(--encre-douce);text-transform:uppercase;letter-spacing:.03em}
.d-hot{display:inline-flex;align-items:center;gap:4px;background:var(--rose-pale);color:#a24034;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.d-trend{margin-left:auto;font-size:12.5px;font-weight:600}
.d-trend.up{color:var(--vert-fonce)}.d-trend.down{color:#a24034}.d-trend.flat{color:var(--encre-douce)}
.d-titre{font-family:var(--serif);font-size:16px;color:var(--vert-fonce);line-height:1.35;margin-bottom:12px}
.d-metrics{display:flex;flex-direction:column;gap:8px}
.d-row{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--encre)}
.d-ico{font-size:16px;flex:0 0 auto}
.d-num{font-weight:700;color:var(--vert-fonce)}
.d-mot{color:var(--encre-douce);font-size:13.5px}
.d-nomes{font-size:13px;color:var(--encre-douce);font-style:italic}
.d-boost{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--trait);flex-wrap:wrap}
.d-boost>span{font-size:12.5px;color:var(--encre-douce);flex:1;min-width:150px}
.d-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.d-act{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--trait);color:var(--vert-fonce);text-decoration:none;font-family:inherit;font-size:12.5px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s}
.d-act:hover{background:var(--vert-pale);border-color:var(--vert)}
.d-act.boost{background:var(--vert);color:#fff;border-color:var(--vert)}
.d-act.boost:hover{background:var(--vert-fonce)}
.d-act:disabled{opacity:.7;cursor:default}
.d-boost-list{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--encre);line-height:1.55}
.d-boost-list li{margin-bottom:6px}

/* ==========================================================================
   « Les chiffres en détail » (session 21) — préfixe .ch- pour ne rien
   percuter de l'existant. Jetons repris de :root, aucune couleur en dur.
   ========================================================================== */
.ch-commut{display:inline-flex;background:var(--vert-pale);border-radius:999px;padding:4px;margin:0 0 18px}
.ch-commut button{border:0;background:transparent;border-radius:999px;padding:8px 18px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--encre-douce);cursor:pointer}
.ch-commut button.actif{background:var(--carte);color:var(--encre);box-shadow:0 1px 4px rgba(46,58,53,.14)}
.ch-commut button:focus-visible{outline:2px solid var(--corail);outline-offset:2px}

.ch-grammaire{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ch-grammaire span{font-size:12.5px;color:var(--encre-douce);background:var(--carte);border:1px solid var(--trait);border-radius:999px;padding:4px 12px}
.ch-grammaire b{color:var(--encre)}

/* 190px et non 146 : depuis que les cartes portent des bouts de phrase
   (« total de 1 924 sur la période », « contre 212 précédemment »), une colonne
   étroite les coupait en trois lignes illisibles. */
.ch-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:10px}
.ch-kpi{background:var(--carte);border:1px solid var(--trait);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--ombre)}
.ch-kpi .ch-lib{font-size:12.5px;color:var(--encre-douce);font-weight:500}
.ch-kpi .ch-val{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:1px 0 3px;font-family:var(--serif)}
.ch-delta{font-size:12px;font-weight:600;border-radius:7px;padding:1px 7px;display:inline-block}
.ch-delta.plus{color:var(--vert-fonce);background:var(--vert-pale)}
.ch-delta.moins{color:var(--corail-fonce);background:var(--corail-pale)}
.ch-spark{margin-top:8px}
.ch-spark svg{display:block;width:100%;height:26px}
.ch-spark-lib{font-size:10.5px;color:var(--encre-douce);margin-top:3px}
.ch-attente{margin-top:9px}

.ch-bloc{background:var(--carte);border:1px solid var(--trait);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--ombre)}
.ch-bloc h2{font-family:var(--serif);font-size:17px;font-weight:700;margin:0 0 2px}
.ch-bloc h3{font-size:12.5px;font-weight:600;color:var(--encre-douce);margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em}
.ch-note{font-size:13px;color:var(--encre-douce);margin:0 0 12px}
.ch-note-gran{font-size:12.5px;color:var(--encre-douce);margin:10px 0 0;line-height:1.5}

.ch-vide{display:flex;gap:12px;align-items:flex-start;background:var(--creme);border:1px dashed var(--trait);border-radius:12px;padding:14px 16px}
.ch-vide .ch-rond{font-size:18px;color:var(--encre-douce);line-height:1.2}
.ch-vide b{font-size:14px}
.ch-vide p{font-size:13px;color:var(--encre-douce);margin:3px 0 0;line-height:1.5}

.ch-hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:6px 0 10px}
.ch-gros{font-family:var(--serif);font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ch-gain{font-size:16px;font-weight:700;color:var(--vert)}
.ch-det{font-size:13px;color:var(--encre-douce)}
.ch-aire{display:block;width:100%;height:78px}
.ch-barres{display:flex;align-items:flex-end;gap:2px;height:30px;margin-top:6px}
.ch-barre{flex:1;background:var(--vert-pale);border-radius:2px 2px 0 0;min-height:1px;transition:background .15s}
.ch-barre:hover{background:var(--vert)}
/* Un jour non consolidé : un pointillé au ras du sol, pas une barre à zéro.
   L'absence se voit, et elle ne se lit pas comme un effondrement. */
.ch-barre-vide{background:none;border-bottom:2px dotted var(--trait);height:0;align-self:flex-end}
.ch-barre-vide:hover{background:none}
/* Une journée de solde négatif. Rose et non rouge : c'est une information, pas
   une alerte — il en tombe une ou deux par mois sur n'importe quel compte. */
.ch-barre-moins{background:var(--rose);opacity:.45}
.ch-barre-moins:hover{background:var(--rose);opacity:1}
/* La décomposition arrivées/départs. Volontairement en corps de texte et non en
   carte : elle complète le grand chiffre, elle ne le concurrence pas. */
.ch-barres-hautes{height:64px}
/* --- Explorateur (s23) ---------------------------------------------------- */
.ch-exp>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ch-exp>summary::-webkit-details-marker{display:none}
.ch-exp>summary h2{margin:0}
.ch-exp-hint{font-size:12.5px;color:var(--encre-douce)}
.ch-exp[open] .ch-exp-hint{display:none}
#chExpCorps{margin-top:12px}
.ch-exp-ligne{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.ch-exp-lib{font-size:12px;color:var(--encre-douce);margin-right:2px}
.ch-pill{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--trait);background:var(--carte);color:var(--encre);cursor:pointer}
.ch-pill.actif{background:var(--vert);border-color:var(--vert);color:#fff}
.ch-pill-off{opacity:.4;cursor:not-allowed}
.ch-exp-svg{display:block;width:100%;height:120px;margin-top:4px}
/* Échelle de la courbe d'abonné·es : repères HTML par-dessus le SVG. */
.ch-aire-wrap{position:relative}
.ch-ymax,.ch-ymin{position:absolute;right:0;font-size:11px;font-weight:600;color:var(--encre-douce);background:var(--carte);padding:0 2px 0 6px;pointer-events:none;font-variant-numeric:tabular-nums;line-height:1}
.ch-ymax{top:-2px}.ch-ymin{bottom:-2px}
/* En-tête du bloc KPI : ce qu'on regarde, et comparé à quoi. */
/* La ligne de comparaison : « contre 3 756 · ↗ +9,7 % ». La valeur d'avant en
   discret, le pourcentage en pastille — l'œil lit le sens avant le détail. */
.ch-vs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.ch-avant{font-size:11.5px;color:var(--encre-douce);font-variant-numeric:tabular-nums;line-height:1.35}
.ch-entete{margin:0 0 12px}
.ch-periode{font-size:14px;line-height:1.5;margin:0}
.ch-entete .ch-contexte{margin:2px 0 0}
.ch-entete .ch-note-gran{margin-top:6px}
/* « Ce qui paie » */
.ch-pill-paye{border-style:dashed}
.ch-pill-paye.actif{border-style:solid}
.ch-cat{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--trait)}
.ch-cat:first-of-type{border-top:none}
.ch-cat-nom{flex:0 0 38%;font-size:12.5px;line-height:1.3}
.ch-cat-nom i{font-style:normal;color:var(--encre-douce);font-size:11px;display:block}
.ch-cat-rail{flex:1;height:10px;background:var(--creme);border-radius:999px;overflow:hidden}
.ch-cat-rail i{display:block;height:100%;background:var(--vert);border-radius:999px}
.ch-cat-val{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.ch-cat-off{opacity:.55}
.ch-cat-note{font-size:12px;color:var(--encre-douce)}
.ch-deco{font-size:14px;color:var(--encre);margin:-4px 0 10px;line-height:1.55}
.ch-deco b{font-variant-numeric:tabular-nums}
.ch-deco .ch-etiq{font-size:12px;color:var(--encre-douce)}
.ch-axe{display:flex;justify-content:space-between;font-size:11.5px;color:var(--encre-douce);margin-top:5px}

.ch-story{padding:11px 0;border-top:1px solid var(--trait)}
.ch-story:first-of-type{border-top:0}
.ch-story-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;margin-bottom:6px}
.ch-pastille{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px}
.ch-pastille.photo{background:var(--vert-pale);color:var(--vert-fonce)}
.ch-pastille.video{background:var(--corail-pale);color:var(--corail-fonce)}
.ch-story-d{color:var(--encre-douce)}
.ch-story-v{font-weight:600;font-variant-numeric:tabular-nums}
.ch-tag{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px}
.ch-tag-clic{background:var(--rose-pale);color:var(--rose)}
.ch-rail{position:relative;height:9px;background:var(--creme);border-radius:5px;overflow:hidden}
.ch-rail-p{position:absolute;inset:0 auto 0 0;background:var(--vert-pale)}
.ch-rail-r{position:absolute;inset:0 auto 0 0;background:var(--vert)}
.ch-story-f{font-size:12.5px;color:var(--encre-douce);margin-top:5px}
.ch-story-f b{color:var(--encre)}

.ch-genres{display:flex;height:18px;border-radius:9px;overflow:hidden;margin:10px 0 8px}
.ch-genres span{display:block}
.ch-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--encre-douce);margin-bottom:14px}
.ch-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
.ch-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.ch-2col{grid-template-columns:1fr}}
.ch-age{display:grid;grid-template-columns:52px 1fr 52px;gap:8px;align-items:center;font-size:12.5px;margin:5px 0}
.ch-age-l{color:var(--encre-douce)}
.ch-age-b{background:var(--creme);border-radius:5px;height:9px;overflow:hidden}
.ch-age-b i{display:block;height:100%;background:var(--vert);border-radius:5px}
.ch-age-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--encre-douce)}
.ch-liste{list-style:none;margin:0;padding:0}
.ch-liste li{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-bottom:1px solid var(--trait)}
.ch-liste li:last-child{border-bottom:0}
.ch-liste b{font-variant-numeric:tabular-nums}
.ch-contexte{font-size:13.5px;color:var(--encre-douce);margin:2px 0 0}
.ch-contexte b{color:var(--encre)}
.ch-kpi .ch-petit{font-size:11.5px;color:var(--encre-douce);font-variant-numeric:tabular-nums;margin:-1px 0 5px;line-height:1.35}
.ch-kpi .ch-unite{display:block;font-size:11px;font-weight:500;color:var(--encre-douce);letter-spacing:.02em;font-family:var(--sans);margin-top:-2px}
.ch-kpi .ch-etiq{color:var(--encre-douce)}
.ch-aide{margin-top:12px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--radius);box-shadow:var(--ombre)}
.ch-aide summary{cursor:pointer;list-style:none;padding:13px 16px;font-size:14px;font-weight:600;color:var(--vert-fonce)}
.ch-aide summary::-webkit-details-marker{display:none}
.ch-aide summary:focus-visible{outline:2px solid var(--corail);outline-offset:2px;border-radius:var(--radius)}
.ch-aide[open] summary{border-bottom:1px solid var(--trait)}
.ch-aide-corps{padding:12px 16px 16px}
.ch-aide-corps p{font-size:13.5px;color:var(--encre-douce);line-height:1.55;margin:0 0 10px}
.ch-aide-corps p:last-child{margin-bottom:0}
.ch-aide-corps b{color:var(--encre)}
.ch-defs{margin-top:14px;padding-top:12px;border-top:1px solid var(--trait)}
.ch-defs h4{font-size:12.5px;font-weight:600;color:var(--encre-douce);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.ch-defs p{font-size:13px;color:var(--encre-douce);line-height:1.5;margin:0 0 7px}
.ch-defs p:last-child{margin-bottom:0}
.ch-def-t{color:var(--vert-fonce)}

/* Consentements facultatifs (session 30) — zone de clic généreuse : sur mobile,
   une case de 13 px se rate une fois sur trois, et rater un RETRAIT de
   consentement est plus grave que rater un réglage ordinaire. */
.cons-l{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:13px;line-height:1.5;cursor:pointer}
.cons-l input{width:19px;height:19px;margin:1px 0 0;flex-shrink:0;accent-color:var(--vert);cursor:pointer}

/* Recours de relance d'ingestion — un lien, pas un bouton d'action principale :
   c'est une porte de secours, elle ne doit pas concurrencer le geste normal. */
.lien-relance{background:none;border:none;font:inherit;font-size:12.5px;color:var(--vert-fonce);
  text-decoration:underline;cursor:pointer;padding:0}
.lien-relance:disabled{color:var(--encre-douce);text-decoration:none;cursor:default}

/* Onboarding immersif plein écran ------------------------------------------
   Tout est ICI, plus en style inline : les styles inline se faisaient écraser
   et la mise en page partait en colonnes (18/08). Une colonne centrée, le
   T-rex en haut, les actes dessous. */
.ob-overlay{position:fixed;inset:0;z-index:200;overflow-y:auto;
  background:linear-gradient(160deg,#e7efec 0%,var(--creme) 60%);
  padding:40px 20px 56px;display:block}
.ob-fermer{position:absolute;top:16px;right:18px;background:none;border:none;
  font-size:24px;line-height:1;color:var(--encre-douce);cursor:pointer;padding:6px}
.ob-colonne{max-width:520px;margin:0 auto;display:block;text-align:center}
.ob-trex{display:block;margin-bottom:6px}
.ob-trex svg{display:inline-block;width:104px;height:auto}
.ob-titre{font-family:var(--serif);font-style:italic;font-size:25px;line-height:1.25;
  color:var(--vert-fonce);margin:0 0 6px}
.ob-sous{font-size:13.5px;line-height:1.55;color:var(--encre-douce);margin:0 auto 22px;max-width:400px}

.ob-prelude{text-align:left}
.ob-prelude .champ{margin-bottom:12px}

/* Les actes : une ligne = un moment du travail. L'acte courant est net, les
   suivants estompés — elle voit où elle va, sans qu'on la noie. */
.ob-actes{text-align:left;margin-top:4px}
.ob-acte{display:flex;gap:13px;padding:13px 2px;border-bottom:.5px solid var(--trait);
  opacity:.34;transition:opacity .45s}
.ob-acte.vif{opacity:1}
.ob-acte.fait{opacity:.62}
.ob-ico{width:18px;height:18px;flex-shrink:0;margin-top:2px;border:1.5px solid #b4b2a9;border-radius:50%}
.ob-acte.vif .ob-ico{border:2px solid var(--vert);border-top-color:transparent;animation:obSpin .9s linear infinite}
.ob-acte.fait .ob-ico{border:none;color:var(--vert);font-weight:700;font-size:15px;line-height:1;text-align:center}
.ob-corps{flex:1;min-width:0}
.ob-acte h4{margin:0;font-size:14.5px;font-weight:700;color:var(--vert-fonce);font-family:var(--sans)}
.ob-det{margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--encre-douce)}
.ob-cite{display:block;font-style:italic;background:var(--vert-pale);border-radius:7px;
  padding:8px 10px;color:var(--encre);animation:obFondu .5s ease-out}
.ob-barres{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;margin-top:2px}
.ob-barre-l{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--vert-fonce)}
.ob-barre{height:7px;background:var(--vert);border-radius:3px;display:inline-block}
.ob-jauge-fond{height:3px;background:#ece5d8;border-radius:2px;overflow:hidden;margin-top:20px}
.ob-jauge{height:100%;width:4%;background:var(--vert);border-radius:2px;transition:width .8s linear}
.ob-note{font-size:12.5px;color:var(--encre-douce);margin-top:10px;text-align:center}

@keyframes obSpin{to{transform:rotate(360deg)}}
@keyframes obFondu{from{opacity:0}to{opacity:1}}

/* Le socle se pose section par section — le rythme raconte, pas l'effet. */
.socle-revele .bloc{animation:obPose .5s ease-out both}
.socle-revele .bloc:nth-of-type(1){animation-delay:.05s}
.socle-revele .bloc:nth-of-type(2){animation-delay:.5s}
.socle-revele .bloc:nth-of-type(3){animation-delay:.95s}
.socle-revele .bloc:nth-of-type(4){animation-delay:1.4s}
.socle-revele .bloc:nth-of-type(n+5){animation-delay:1.8s}
@keyframes obPose{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:640px){ .ob-titre{font-size:21px} .ob-trex svg{width:88px} }
@media (prefers-reduced-motion:reduce){
  .ob-acte.vif .ob-ico{animation:none}
  .socle-revele .bloc{animation:none!important}
  .ob-cite{animation:none}
}

/* Bandeaux d'onboarding du Profil (18/08) : le mot d'accueil de la première
   arrivée, et les tutos de prise en main. Fermables, et une fois fermés ils ne
   reviennent plus — une mise en route, pas un rappel permanent. */
.bienvenue,.tutos-bandeau{position:relative;background:var(--vert-pale);border:1px solid var(--vert);
  border-radius:var(--radius);padding:16px 40px 16px 18px;margin-bottom:14px}
.bvn-x{position:absolute;top:8px;right:10px;background:none;border:none;font-size:20px;line-height:1;
  color:var(--vert-fonce);cursor:pointer;padding:4px 6px;opacity:.6}
.bvn-x:hover{opacity:1}
.bvn-t{margin:0 0 5px;font-weight:700;font-size:14.5px;color:var(--vert-fonce)}
.bvn-c{margin:0;font-size:13.5px;line-height:1.6;color:var(--encre)}
.tutos-bandeau .tb-fiche{background:#fff;border:1px solid #ddd4c2;border-radius:9px;margin-top:7px}
.tutos-bandeau .tb-fiche>summary{cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:600;
  color:var(--vert-fonce);list-style:none}
.tutos-bandeau .tb-fiche>summary::-webkit-details-marker{display:none}
.tutos-bandeau .tb-fiche>summary::before{content:'+ ';font-weight:700}
.tutos-bandeau .tb-fiche[open]>summary::before{content:'\2013 '}
.tutos-bandeau .tb-corps{padding:0 12px 11px;font-size:12.5px;line-height:1.55}
.tutos-bandeau .tb-pourquoi{color:var(--encre-douce);margin-bottom:7px}
.tutos-bandeau ol{margin:0;padding-left:17px}
.tutos-bandeau li{margin-bottom:5px}
.tutos-bandeau .tb-plus a{color:var(--vert-fonce);font-weight:600}

/* Parcours guidé de la première prise en main (18/08) ------------------------
   Une carte par écran. Le fil en segments plutôt qu'un « 3/6 » sec : elle voit
   d'un coup d'œil où elle en est et ce qu'il reste, sans compter. Pas de
   médaille, pas de confetti — charte de juillet. */
.guide-carte{background:var(--carte);border:1px solid var(--vert);border-radius:var(--radius);
  padding:15px 18px;margin:0 0 18px;animation:guidePose .45s ease-out}
@keyframes guidePose{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.guide-tete{display:flex;align-items:center;gap:9px;margin-bottom:11px}
/* align-items:center et line-height:1 : sans eux les segments se calent en haut
   de la ligne pendant que « étape 2 sur 6 » garde sa hauteur de ligne — les
   deux paraissent décalés d'un ou deux pixels. */
.guide-fil{display:flex;gap:4px;align-items:center;line-height:1}
.guide-seg{width:18px;height:3px;border-radius:2px;background:#ddd4c2}
.guide-seg.fait{background:var(--vert)}
.guide-num{font-size:12px;color:var(--encre-douce);line-height:1}
.guide-x{margin-left:auto;background:none;border:none;font-size:19px;line-height:1;
  color:var(--encre-douce);cursor:pointer;padding:2px 4px;opacity:.55}
.guide-x:hover{opacity:1}
/* Le titre en serif italique : c'est la voix de sa CM qui parle, pas une
   infobulle système. Le corps reste en sans, comme le reste de l'app. */
.guide-titre{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.35;
  color:var(--vert-fonce);margin:0 0 6px}
.guide-corps{font-size:13.5px;line-height:1.65;color:var(--encre);margin:0 0 13px}
.guide-corps b{color:var(--vert-fonce)}
.guide-pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.guide-cta{background:var(--vert);color:#fff;border:none;border-radius:10px;
  padding:9px 16px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer}
.guide-cta:hover{background:var(--vert-fonce)}
.guide-plus{background:none;border:none;font-family:var(--sans);font-size:13px;
  color:var(--encre-douce);cursor:pointer;padding:0;text-decoration:underline}
@media (prefers-reduced-motion:reduce){ .guide-carte{animation:none} }