@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* ══════════════════════════════════════
   PROPULSEUR — charte de marque
   Source UNIQUE des tokens partagés par tous les sites de la marque
   (site.propulseur.io, livre.propulseur.io...).

   Le build (_systeme/build.sh) concatène ce fichier AVANT le CSS de
   chaque site, donc les var() sont définies avant d'être utilisées.
   Ne jamais redéclarer ces valeurs dans un site : les lire.
   ══════════════════════════════════════ */

:root {
  --dark-teal: #08272A;
  --dark-teal-haut: #0A3538;   /* haut du dégradé de la carte sombre */
  --teal: #528C8D;
  --corail: #EA7276;
  --or: #B29F32;
  --or-light: #C4B44A;
  --ink: #1a1a1a;
  --rouge-groupe: #e93d3d;
  --bleu-groupe: #188bf6;
  --soft-border: #e0e0e0;
}
/* ══════════════════════════════════════
   PROPULSEUR — Design System (site.propulseur.io)
   Servi par toutes les pages : /assets/base.css

   Les tokens de couleur et la police Roboto viennent de la charte de
   marque (propulseur/_charte/tokens.css), concaténée AVANT ce fichier
   par le build. Les valeurs de rendu ci-dessous ont été relevées sur
   la page GHL (go.propulseur.io/ws-lp) le 2026-07-17 : relever, pas réinventer.
   ══════════════════════════════════════ */

/* ── Fondation ─────────────────────────
   Hors du thème il n'y a plus rien : la page doit poser
   son propre corps, son conteneur et son rythme. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 20px;      /* GHL : corps Roboto 20px. Mesure sur go.propulseur.io/ws-lp. */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* GHL lit dans une colonne de 604px. 604 + 2x24 de marge = 652. */
.wrap {
  max-width: 652px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 64px 0; }
section > .wrap > *:first-child { margin-top: 0; }

p { margin: 0 0 1.25em; }

h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 0.6em; }
h2 { font-size: clamp(1.45rem, 3.6vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }

img { max-width: 100%; height: auto; display: block; }
section img { margin: 32px auto; border-radius: 8px; }

a { color: var(--teal); }

h1, h2, h3, .display {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.4;
  color: var(--dark-teal);
}

/* Titre de section : GHL = Georgia 30px, centré, 750px.
   Pas de barre sous le titre : la respiration vient de .sep
   et l'emphase du .stabilo posé sur un mot. */
.section-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--dark-teal);
  line-height: 1.4;
  text-align: center;
  max-width: 750px;
  margin: 0 auto 2rem;
}
@media (max-width: 640px) { .section-heading { font-size: 26px; } }

/* Les gros titres de GHL (hero, "Sur n'importe quel marché") : 42px. */
.section-heading.big { font-size: 42px; }
@media (max-width: 640px) { .section-heading.big { font-size: 30px; } }

/* "Je vous dévoile..." : titre sur bande dorée pleine (GHL). */
.section-heading.bande-or {
  background: var(--or); color: #fff;
  padding: 28px 40px; border-radius: 12px; max-width: none;
}
@media (max-width: 640px) { .section-heading.bande-or { padding: 22px 24px; } }

/* Sections grises (histoire 2014, FAQ, bio) : chez GHL le gris n'est PAS
   pleine largeur, c'est un encadré arrondi CONTENU dans la colonne (~594px).
   On habille donc le .wrap, pas la section. */
.band > .wrap {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 48px;
  max-width: 680px;   /* 680 - 2x48 = 584px de contenu, la largeur GHL */
}
@media (max-width: 640px) { .band > .wrap { padding: 28px 22px; } }

.lead { font-size: 1.15rem; line-height: 1.75; }
.text-muted { color: #8a8279; }
.text-accent { color: var(--corail); }

/* Couleurs de texte de la charte (appliquées sur un mot par l'éditeur). */
.t-corail { color: var(--corail); }
.t-or { color: var(--or); }
.t-teal { color: var(--teal); }
.t-dark { color: var(--dark-teal); }

.pull-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  margin: 12px 0 8px;
}

/* GHL : ces lignes d'accent sont a la taille du corps (20px), pas un gros titre. */
.punch {
  font-size: 20px;
  font-weight: 400;
  color: var(--corail);
  margin: 0 0 48px;
}

/* ── Les trois cartes ──────────────────
   Même géométrie, l'ombre reprend la teinte du fond.
   Chacune a un rôle repéré dans la page GHL. */

.card-or, .card-corail, .loi {
  border-radius: 20px;
  padding: 48px;
  margin: 24px 0;
  font-size: 20px;
  line-height: 1.75;
}
@media (max-width: 640px) {
  .card-or, .card-corail, .loi { padding: 28px 22px; font-size: 17px; }
}

.card-or > *:last-child,
.card-corail > *:last-child { margin-bottom: 0; }

/* L'encadré des 3 cases, et l'objectif du workshop */
.card-or {
  background: linear-gradient(160deg, #FDFBF3, #F5EFD8);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(178, 159, 50, 0.1), 0 4px 12px rgba(178, 159, 50, 0.05);
}

/* La section diagnostic */
.card-corail {
  background: linear-gradient(160deg, #FDF5F4, #F8E4E2);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(234, 114, 118, 0.1), 0 4px 12px rgba(234, 114, 118, 0.05);
}

/* La carte sombre : la loi du marché. Un seul bloc dans la page. */
.loi {
  background: linear-gradient(160deg, var(--dark-teal-haut), var(--dark-teal));
  color: #fff;
  max-width: 680px;
  margin: 24px auto;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 12px 40px rgba(8, 39, 42, 0.2), 0 4px 12px rgba(8, 39, 42, 0.1);
}
@media (max-width: 640px) { .loi { font-size: 19px; } }

/* Pastille numérotée : elle prend la couleur de sa carte.
   Défaut (et carte crème) : cercle sombre, chiffre doré. */
.num-item { display: flex; gap: 8px; align-items: flex-start; margin: 24px 0; }
.num-item .num {
  flex-shrink: 0; width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
  background-color: var(--dark-teal); color: var(--or);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700; font-size: 18px; line-height: 1;
  box-shadow: 0 2px 8px rgba(8, 39, 42, 0.25);
}

/* Dans la carte corail : cercle corail, chiffre blanc. */
.card-corail .num-item .num {
  background-color: var(--corail); color: #fff;
  font-family: Montserrat, -apple-system, sans-serif;
  box-shadow: 0 2px 8px rgba(234, 114, 118, 0.3);
}

/* Aparté : une remarque en retrait dans le fil du discours. */
.callout {
  border-left: 3px solid var(--teal);
  padding-left: 20px;
  margin: 24px 0;
  font-style: italic;
  color: #8a8279;
}

/* Le bloc corail plein : la date du workshop. */
.date-block {
  display: block;
  background-color: var(--corail);
  color: #fff;
  padding: 32px 48px;
  border-radius: 12px;
  margin: 32px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  font-style: normal;
}
@media (max-width: 640px) { .date-block { font-size: 24px; padding: 24px 22px; } }

/* Emphases sur un mot (.circled, .stabilo, .underline-pen) :
   elles vivent dans shared/components/hand-drawn-effects.css,
   qui est concaténé après ce fichier. Ne pas les redéfinir ici :
   les deux styles s'empilent sur le même mot au lieu de se remplacer. */

/* Séparateur : trait corail centré. */
.sep { width: 40px; height: 3px; background: var(--corail); margin: 24px auto 20px; border-radius: 2px; }

.btn-primary {
  display: inline-block; background: var(--corail); color: white;
  font-weight: 600; font-size: 1.05rem;
  padding: 1rem 2.5rem; border-radius: 6px; text-decoration: none;
  transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(234,114,118,0.25);
}
.btn-primary:hover {
  background: #d4585c; transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(234,114,118,0.35);
}

.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(8,39,42,0.95); backdrop-filter: blur(10px);
  padding: 0.8rem 1.5rem; display: flex; align-items: center;
  justify-content: center; gap: 1.5rem; z-index: 100;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-cta.visible { transform: translateY(0); }

.reveal { opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Composants de page ──────────────── */

/* Hero : GHL affiche WORKSHOP LIVE en Georgia doré, pas en petites capitales. */
.eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--or); margin: 0 0 .6em;
}
@media (max-width: 640px) { .eyebrow { font-size: 24px; } }
.kicker {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px; color: var(--dark-teal); margin: 0 0 .8em;
  font-style: italic; font-weight: 600;
}
#hero { padding-top: 72px; text-align: center; }
#hero .lead.hero-sub { max-width: 34em; margin: 0 auto 2.2em; font-size: 24px; font-weight: 600; color: var(--dark-teal); }
#hero em { color: var(--corail); font-style: italic; }
/* "plus de visibilite" : italique sombre chez GHL, pas corail, pas de cercle. */
#hero em.tq-dark { color: var(--dark-teal); }
.hero-meta { margin-top: 1.4em; font-size: .92rem; color: #8a8279; }

/* Listes */
ul.dash, ul.cross, ul.bullets, ul.checks { list-style: none; padding-left: 0; margin: 0 0 1.25em; }
ul.dash li, ul.cross li, ul.bullets li, ul.checks li {
  position: relative; padding-left: 1.5em; margin-bottom: .5em;
}
ul.dash li::before    { content: "—"; position: absolute; left: 0; color: var(--teal); }
ul.bullets li::before { content: "•"; position: absolute; left: .3em; color: var(--teal); }
ul.cross li::before   { content: "✕"; position: absolute; left: 0; color: var(--corail); font-weight: 700; }
ul.checks li          { padding-left: 1.9em; margin-bottom: 1em; }
ul.checks li::before  { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; font-size: 1.15em; }

/* Les 2 groupes : badges empilés et centrés, rouge puis bleu. */
.groupes { margin: 28px 0; text-align: center; }
.groupe { margin: 0 0 32px; }
.groupe p:last-child { margin-bottom: 0; }
.groupe-n {
  display: inline-block; color: #fff;
  font-weight: 700; font-size: 1.05rem; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 40px; border-radius: 6px; margin: 0 0 1em;
}
.groupe:nth-of-type(1) .groupe-n { background: var(--rouge-groupe); }
.groupe:nth-of-type(2) .groupe-n { background: var(--bleu-groupe); }

/* Étapes du workshop */
.etape { margin: 0 0 44px; }
.etape h3 { margin: 0 0 .7em; font-size: 28px; }
.etape-n {
  display: inline-block; background: var(--or); color: #fff;
  font-family: -apple-system, sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; margin-right: 10px;
  vertical-align: middle;
}

/* FAQ : entête sur barre sombre, questions sombres centrées (GHL). */
.faq-header {
  background: var(--dark-teal); color: #fff;
  font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 700;
  text-align: center; padding: 22px 28px; border-radius: 10px; margin: 0 0 2rem; font-size: 28px;
}
.qa { margin: 0 0 40px; }
.qa h3 { margin: 0 0 .6em; color: var(--dark-teal); text-align: center; font-size: 30px; }

/* Bio : robin.webp est un montage large (1200x503), pas un portrait.
   Le plafonner le rend illisible. Il s'affiche en pleine largeur. */

/* Paiement */
.paiement-todo {
  background: #fff; border: 2px dashed var(--corail);
  border-radius: 10px; padding: 28px 26px; text-align: center;
}
.paiement-todo .btn-primary { margin-top: 12px; }
.secure { text-align: center; font-size: .82rem; margin-top: 1.5em; }

/* Footer : fond clair, texte sombre, centré (GHL). */
#footer { background: #fff; color: var(--ink); padding: 40px 0; text-align: center; border-top: 1px solid var(--soft-border); }
#footer .brand { font-family: Georgia, serif; color: var(--dark-teal); font-size: 11px; margin: 0 0 1em; }
#footer .legal { list-style: none; padding: 0; margin: 0; display: flex; gap: 24px; justify-content: center; font-size: 11px; }
#footer .legal a { color: #6b6b6b; font-size: 11px; }

/* Page racine : placeholder tant que le site n'existe pas. */
.page-attente {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--dark-teal); color: #fff;
  text-align: center; padding: 24px;
}
.page-attente h1 { font-size: 26px; margin: 0 0 10px; color: #fff; letter-spacing: -.01em; }
.page-attente p  { color: #9fbcbd; margin: 0; font-size: 15px; }
.page-attente a  { color: var(--or-light); }

/* Le sticky CTA masque le bas de page */
body { padding-bottom: 72px; }
.sticky-cta span { color: #fff; font-size: .92rem; }
.sticky-cta .btn-primary { padding: .6rem 1.5rem; font-size: .95rem; }
@media (max-width: 560px) { .sticky-cta span { display: none; } }
/* ══════════════════════════════════════════════════════════════
   BONUS DU LIVRE — la feuille des 4 pages /bonus-livre*
   Genere depuis livre/_bonus.css. Direction « dossier », bandeau or.
   Charte validee par Robin le 2026-07-27.

   TOUT EST SCOPE SOUS .doc-bonus
   Le build concatene cette feuille avec base.css et sert le resultat a
   TOUTES les pages du site. Sans le scope, les bonus ecraseraient la home,
   ws-lp et cadeau (body font-size, h1, p, img, table...).

   L'or des bandeaux de partie est --or-profond #8F7D22, PAS le --or de la
   charte : blanc sur --or donne 2,66:1, illisible. 4,10:1 avec celui-ci.
   Ne jamais ecrire le mot « Partie » devant un titre de partie.

   Les autres couleurs viennent de ../_charte/tokens.css et ne sont pas
   redeclarees ici. Seuls --or-profond, --papier et --gris le sont, parce
   qu'ils n'existent nulle part ailleurs.

   NEUTRALISATION, en tete de feuille
   base.css s'applique maintenant aussi aux bonus, qui n'avaient jamais eu
   que leur propre feuille. Deux de ses regles les cassent sans que le build
   s'en apercoive : h1,h2,h3 en Georgia serif (_bonus.css ne declare
   font-family que sur body), et body{padding-bottom:72px} du CTA collant
   du workshop. Les deux regles ci-dessous les annulent.
   ══════════════════════════════════════════════════════════════ */
body.doc-bonus{padding-bottom:0}
body.doc-bonus h1,body.doc-bonus h2,body.doc-bonus h3{
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

:root{--or-profond:#8F7D22;--papier:#faf9f6;--gris:#f4f7f6}
body.doc-bonus{margin:0;background:var(--papier);color:var(--ink);font-size:17px;line-height:1.65;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.doc-bonus img{max-width:100%}
.doc-bonus .bwrap{max-width:760px;margin:0 auto;padding:0 24px 110px}
.doc-bonus .top{padding:46px 0 30px;border-bottom:1px solid var(--soft-border);margin-bottom:44px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.doc-bonus .top img{height:26px;width:auto}
.doc-bonus .top .kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:700}
.doc-bonus h1{font-size:2.5rem;line-height:1.12;margin:0 0 .3em;font-weight:900;letter-spacing:-.02em;color:var(--dark-teal)}
.doc-bonus .sub{font-size:1.12rem;color:var(--teal);font-weight:500;margin:0 0 34px}
.doc-bonus .chapo p{margin:0 0 1em;font-size:1.03rem;color:#3d3d3d}
.doc-bonus p{margin:0 0 1.05em}
.doc-bonus .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:0;margin:38px 0 8px;
  border-top:2px solid var(--dark-teal);border-bottom:2px solid var(--dark-teal)}
.doc-bonus .fact{padding:16px 14px 15px;border-right:1px solid var(--soft-border)}
.doc-bonus .fact:last-child{border-right:0}
.doc-bonus .fact .v{font-size:1.35rem;font-weight:900;color:var(--dark-teal);line-height:1.1;white-space:nowrap}
.doc-bonus .fact .k{font-size:.7rem;color:#777;text-transform:uppercase;letter-spacing:.05em;margin-top:6px;line-height:1.35}
.doc-bonus .part{margin:130px 0 40px;background:var(--or-profond);padding:34px 40px 38px;border-radius:6px}
.doc-bonus .part:first-of-type{margin-top:80px}
.doc-bonus .part h2{font-size:3rem;line-height:1.04;font-weight:900;margin:0;letter-spacing:-.035em;color:#fff}
.doc-bonus .part .pi{font-size:1.06rem;color:rgba(255,255,255,.82);margin:14px 0 0;max-width:34em}
@media(max-width:640px){
.doc-bonus .part{padding:26px 24px 28px;margin-top:88px}
.doc-bonus .part h2{font-size:2.1rem}}
.doc-bonus h3{font-size:1.05rem;font-weight:700;color:var(--teal);margin:3em 0 .7em;
  text-transform:uppercase;letter-spacing:.06em}
.doc-bonus .cle{font-size:1.3rem;line-height:1.4;font-weight:700;color:var(--dark-teal);
  border-left:4px solid var(--corail);padding:4px 0 4px 20px;margin:28px 0}
.doc-bonus ul.av{list-style:none;padding:0;margin:22px 0}
.doc-bonus ul.av li{padding:13px 0;border-bottom:1px solid var(--soft-border)}
.doc-bonus ul.av li:last-child{border-bottom:0}
.doc-bonus ul.av b{color:var(--dark-teal)}
.doc-bonus ol.q{counter-reset:q;list-style:none;padding:0;margin:20px 0}
.doc-bonus ol.q li{counter-increment:q;padding:15px 0 15px 46px;position:relative;
  border-bottom:1px solid var(--soft-border);font-weight:500}
.doc-bonus ol.q li:last-child{border-bottom:0}
.doc-bonus ol.q li:before{content:counter(q);position:absolute;left:0;top:14px;width:28px;height:28px;border-radius:50%;
  background:var(--dark-teal);color:#fff;font-size:.8rem;font-weight:900;
  display:flex;align-items:center;justify-content:center}
.doc-bonus ol.q .s{display:block;font-weight:400;color:#888;font-size:.86rem;margin-top:4px}
.doc-bonus table{width:100%;border-collapse:collapse;font-size:.87rem;margin:18px 0}
.doc-bonus th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;
  background:var(--dark-teal);padding:9px 11px;font-weight:700}
.doc-bonus td{border-bottom:1px solid var(--soft-border);padding:9px 11px;vertical-align:top}
.doc-bonus .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-bonus tr.hi td{background:#fdf6e3;font-weight:700}
.doc-bonus tr.tot td{border-top:2px solid var(--dark-teal);border-bottom:0;font-weight:900;color:var(--dark-teal)}
.doc-bonus caption{caption-side:top;text-align:left;font-size:.8rem;color:#999;padding-bottom:8px}
.doc-bonus .sc{overflow-x:auto}
.doc-bonus p.lect{margin:0 0 1.1em}
.doc-bonus p.lect b{color:var(--dark-teal)}
.doc-bonus figure{margin:26px 0}
.doc-bonus figure img{border:1px solid var(--soft-border);display:block}
.doc-bonus figure.large img{min-width:660px}
.doc-bonus figcaption{font-size:.78rem;color:#888;margin-top:8px}
.doc-bonus .bloc{margin:64px 0 0}
.doc-bonus .bloc:first-of-type{margin-top:34px}
.doc-bonus .bh{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.doc-bonus .bh .no{font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--or);background:#fdf6e3;padding:4px 9px;border-radius:3px}
.doc-bonus .bh .role{font-size:.8rem;color:#999;font-style:italic}
.doc-bonus .obj{font-size:1.42rem;font-weight:900;color:var(--dark-teal);margin:10px 0 4px;letter-spacing:-.015em}
.doc-bonus .when{font-size:.78rem;color:#999;margin-bottom:20px}
.doc-bonus .corps{font-size:.95rem;line-height:1.75;color:#333;background:#fff;border:1px solid var(--soft-border);
  border-top:3px solid var(--dark-teal);padding:34px 38px;box-shadow:0 2px 16px rgba(8,39,42,.05)}
@media(max-width:640px){
.doc-bonus .corps{padding:24px 22px}}
.doc-bonus .corps > p,.doc-bonus .corps > h4,.doc-bonus .corps > ul,.doc-bonus .corps > ol,.doc-bonus .corps > .ps,.doc-bonus .corps > .c,.doc-bonus .corps > .prices,.doc-bonus .corps > .photo-abs,.doc-bonus .corps > blockquote{max-width:34em;margin-left:auto;margin-right:auto}
.doc-bonus .corps p{margin:0 0 .95em}
.doc-bonus .corps p:last-child{margin-bottom:0}
.doc-bonus .corps .c{text-align:center;font-weight:700;color:var(--dark-teal);margin:1.2em 0}
.doc-bonus .corps .prices{background:var(--gris);padding:13px;text-align:center;font-weight:700;
  color:var(--dark-teal);line-height:1.8;margin:1.2em 0}
.doc-bonus .corps .ps{border-top:1px solid #eee;margin-top:1.2em;padding-top:.9em;font-size:.85rem;color:#888}
.doc-bonus .corps .ps p{margin:0 0 .3em}
.doc-bonus .corps img{display:block;margin:1.4em auto;border:1px solid var(--soft-border)}
.doc-bonus .corps ul,.doc-bonus .corps ol{margin:0 0 .95em;padding-left:1.4em}
.doc-bonus .corps li{margin-bottom:.35em}
.doc-bonus .corps a{color:var(--teal)}
.doc-bonus .corps .quand{display:inline-block;background:#fdf6e3;color:var(--or-profond);
  font-weight:900;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:3px;vertical-align:middle}
.doc-bonus .photo-abs{background:#ececec;border:1px solid #dcdcdc;padding:20px 24px;margin:1.6em auto;
  font-size:.85rem;line-height:1.55;color:#6a6a6a;font-style:italic;text-align:center}
.doc-bonus .photo-abs .lab{display:block;font-style:normal;font-weight:900;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:#a09a86;margin-bottom:8px}
.doc-bonus .an{margin-top:18px;padding:24px 28px;background:var(--gris);border-left:4px solid var(--teal);
  font-size:.89rem;line-height:1.62}
.doc-bonus .an .lab{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);margin-bottom:10px}
.doc-bonus .an p{margin:0 0 .7em}
.doc-bonus .an p:last-child{margin:0}
.doc-bonus .an b{color:var(--dark-teal)}
.doc-bonus .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;margin:0 0 16px;
  background:#fff;border:1px solid var(--soft-border)}
@media(max-width:680px){
.doc-bonus .duo{grid-template-columns:1fr}}
.doc-bonus .duo .q{padding:20px 22px;background:var(--gris);font-size:.92rem;line-height:1.6;
  white-space:pre-line;border-right:1px solid var(--soft-border)}
@media(max-width:680px){
.doc-bonus .duo .q{border-right:0;border-bottom:1px solid var(--soft-border)}}
.doc-bonus .duo .a{padding:20px 22px;font-size:.9rem;line-height:1.6}
.doc-bonus .duo .a b{color:var(--dark-teal)}
.doc-bonus .duo .a p:last-child{margin-bottom:0}
.doc-bonus .duo .tag{display:inline-block;font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:900;color:var(--teal);background:var(--gris);border-radius:4px;padding:3px 8px;margin-bottom:8px}
.doc-bonus .adcard{border:1px solid var(--soft-border);background:#fff;overflow:hidden;margin:26px 0;
  box-shadow:0 2px 16px rgba(8,39,42,.05)}
.doc-bonus .adhead{display:flex;gap:11px;align-items:center;padding:14px 18px;border-bottom:1px solid #f0f0ee}
.doc-bonus .avatar{width:38px;height:38px;border-radius:50%;background:var(--dark-teal);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem}
.doc-bonus .adhead .nm{font-weight:700;font-size:.92rem;line-height:1.25}
.doc-bonus .adhead .sp{font-size:.74rem;color:#999}
.doc-bonus .adbody{padding:20px 22px;font-size:.94rem;white-space:pre-line;line-height:1.65}
.doc-bonus .adcard img{width:100%;height:auto;display:block;border-top:1px solid #f0f0ee;border-bottom:0;border-left:0;border-right:0}
.doc-bonus .adcap{font-size:.78rem;color:#888;padding:13px 18px;background:var(--gris);line-height:1.5}
.doc-bonus .feed{margin:26px 0;display:flex;justify-content:center}
.doc-bonus .feed img{width:100%;max-width:330px;height:auto;border:1px solid var(--soft-border);
  box-shadow:0 10px 30px rgba(8,39,42,.1)}
.doc-bonus .toc{background:#fff;border:1px solid var(--soft-border);padding:22px 26px 24px;margin:34px 0}
.doc-bonus .toc h3{margin:0 0 14px}
.doc-bonus .toc ol{list-style:none;padding:0;margin:0;counter-reset:t}
.doc-bonus .toc li{counter-increment:t;display:flex;gap:12px;align-items:baseline;
  border-bottom:1px solid #f2f1ed;padding:10px 0}
.doc-bonus .toc li:last-child{border-bottom:0}
.doc-bonus .toc a{flex:1;text-decoration:none;color:var(--ink);font-size:.93rem}
.doc-bonus .toc a:hover{color:var(--teal)}
.doc-bonus .toc a .n{display:inline-block;text-align:left;font-weight:900;color:var(--or-profond);
  min-width:24px;font-size:.85rem;white-space:normal}
.doc-bonus .toc .tq{font-size:.66rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  color:var(--or-profond);background:#fdf6e3;padding:3px 8px;border-radius:3px;white-space:nowrap}
.doc-bonus .toc .ph{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:#aaa;white-space:nowrap}
@media(max-width:620px){
.doc-bonus .toc .ph{display:none}}
.doc-bonus .job{font-size:.88rem;color:#777;border-left:3px solid var(--soft-border);
  padding:2px 0 2px 14px;margin:0 0 22px;line-height:1.55}
.doc-bonus .alerte{background:#fdf0ee;border:1px solid #eccfc9;color:#a33224;
  padding:10px 14px;font-size:.83rem;margin:0 0 14px}
.doc-bonus .corps h4{font-size:1.12rem;font-weight:700;line-height:1.35;margin:1.5em 0 .7em;color:var(--dark-teal)}
.doc-bonus .corps figure{margin:1.5em 0;text-align:center}
.doc-bonus .corps figure img{margin:0 auto}
body.doc-bonus.sommaire{background:#f8fafc}
.doc-bonus.sommaire .bwrap{max-width:580px;text-align:center;padding:56px 24px 80px}
.doc-bonus.sommaire .mark{height:30px;width:auto;margin:0 auto 10px;display:block}
.doc-bonus.sommaire .kick{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);font-weight:700;margin-bottom:24px}
.doc-bonus.sommaire h1{font-size:1.45rem;font-weight:900;letter-spacing:-.02em;
  color:var(--dark-teal);margin:0 0 .3em}
.doc-bonus.sommaire .sub{font-size:.88rem;font-weight:400;color:#64748B;line-height:1.5;margin:0 0 30px}
.doc-bonus.sommaire .card{display:flex;align-items:center;gap:15px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:17px 19px;text-align:left;
  box-shadow:0 1px 3px rgba(15,23,42,.04);transition:border-color .15s ease,box-shadow .15s ease}
.doc-bonus.sommaire .card + .card{margin-top:12px}
.doc-bonus.sommaire .card:hover{border-color:var(--or-profond);box-shadow:0 4px 16px rgba(143,125,34,.16)}
.doc-bonus.sommaire .card:hover .arr{transform:translateX(3px)}
.doc-bonus.sommaire .ic{width:124px;height:56px;padding:0 10px;border-radius:11px;flex-shrink:0;
  background:#fdf6e3;border:1px solid #ede2bd;color:var(--or-profond);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.doc-bonus.sommaire .ic b{font-size:1rem;font-weight:900;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.doc-bonus.sommaire .ic span{font-size:.5rem;text-transform:uppercase;letter-spacing:.09em;
  color:#a8974a;margin-top:2px;white-space:nowrap}
.doc-bonus.sommaire .no{font-size:.59rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:#94a3b8;margin-bottom:3px}
.doc-bonus.sommaire .t{font-weight:800;color:var(--dark-teal);font-size:.94rem;line-height:1.3}
.doc-bonus.sommaire .d{color:#64748B;font-size:.78rem;margin-top:3px;line-height:1.45}
.doc-bonus.sommaire .arr{margin-left:auto;color:var(--or-profond);font-size:1.25rem;font-weight:800;
  flex-shrink:0;transition:transform .15s ease}
.doc-bonus.sommaire .foot{font-size:.72rem;color:#94a3b8;margin:24px 0 0;line-height:1.5}
@media(max-width:520px){
.doc-bonus.sommaire .card{flex-wrap:wrap;gap:12px}
.doc-bonus.sommaire .ic{height:48px;min-width:0;width:100%;flex-direction:row;gap:8px}
.doc-bonus.sommaire .ic span{margin-top:0}
.doc-bonus.sommaire .arr{display:none}}
.doc-bonus .note{font-size:.86rem;color:#3a372f;background:#fff;border-left:3px solid var(--teal);
  padding:13px 17px;margin:18px 0}
.doc-bonus .note p:last-child{margin-bottom:0}
.doc-bonus .aside{border:1px dashed #ddd6bd;background:#fdf6e3;padding:18px 22px;margin:26px 0;font-size:.92rem}
.doc-bonus .aside .lab{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;
  color:var(--or-profond);margin-bottom:8px}
.doc-bonus .aside p:last-child{margin-bottom:0}
.doc-bonus .warn{background:var(--dark-teal);color:#fff;padding:28px 32px;margin:34px 0;font-size:1.02rem;line-height:1.55}
.doc-bonus .warn p{margin:0 0 .8em}
.doc-bonus .warn p:last-child{margin:0}
.doc-bonus .warn b{color:var(--or-light)}
.doc-bonus .bbig{font-size:1.22rem;line-height:1.45;color:var(--dark-teal);font-weight:700;margin:28px 0}
.doc-bonus .breveal{background:var(--dark-teal);color:#fff;padding:30px 34px;margin:28px 0;font-size:1.16rem;line-height:1.5}
.doc-bonus .breveal p{margin-bottom:.7em}
.doc-bonus .breveal p:last-child{margin-bottom:0}
.doc-bonus .breveal b{color:var(--or-light)}
.doc-bonus .fin{border:2px solid var(--dark-teal);padding:26px 30px;margin-top:28px;font-size:1rem}
.doc-bonus .fin p:last-child{margin:0;font-weight:700;color:var(--dark-teal)}
@media print{
body.doc-bonus{background:#fff;font-size:11pt}
.doc-bonus .part{background:var(--or-profond)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;
    page-break-after:avoid}
.doc-bonus .bloc,.doc-bonus .duo,.doc-bonus .adcard{page-break-inside:avoid}}
/* ══════════════════════════════════════
   PAGE CADEAU — le bandeau sombre et les cartes cliquables

   Les valeurs viennent de la charte (_charte/tokens.css) et des cartes
   de la page workshop : mêmes dégradés or et corail, mêmes ombres.
   Rien n'est redéclaré ici, tout est lu.

   Ce fichier est concaténé dans le base.css servi à TOUTES les pages
   du site. Il ne doit donc jamais toucher un sélecteur global : chaque
   règle est portée par une classe .cad-* ou par #cadeau, et les rares
   surcharges de <section> et <body> passent par :has() pour ne mordre
   que sur une page qui contient ces blocs.
   ══════════════════════════════════════ */

/* Le sticky CTA n'existe pas ici : pas de réserve en bas de page. */
body:has(#cadeau) { padding-bottom: 0; }

/* ── Le bandeau ────────────────────────
   La <section> porte le fond pleine largeur, le .wrap centre le texte. */

/* La réserve du bas puis la marge négative font remonter le bloc suivant :
   la première carte chevauche le bandeau. C'est porté par le bandeau, pas
   par la carte, pour que le chevauchement survive quel que soit le
   découpage en sections — l'éditeur isole chaque bloc dans la sienne,
   le build groupe ceux qui se suivent. Le rendu doit être le même. */
#cadeau {
  background: linear-gradient(160deg, var(--dark-teal-haut), var(--dark-teal));
  text-align: center;
  padding: 52px 0 72px;
  margin-bottom: -26px;
}
@media (max-width: 640px) { #cadeau { padding: 40px 0 62px; } }

/* Les deux logos sont servis en 520px de large pour rester nets en retina.
   Celui du bandeau (version blanche) coiffe le sur-titre ; celui du pied
   (version sombre) signe la page. */
.cad-logo {
  width: 150px;
  margin: 0 auto 22px;
}
@media (max-width: 640px) { .cad-logo { width: 126px; margin-bottom: 18px; } }

.cad-eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-light);
  margin: 0 0 10px;
}

.cad-titre {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 8px;
}
@media (max-width: 640px) { .cad-titre { font-size: 32px; } }

.cad-sous {
  font-size: 16px;
  line-height: 1.5;
  color: #9fbcbd;
  margin: 0;
}

/* ── Les cartes ────────────────────────
   La section ne pose aucun rythme ici : chaque carte porte le sien. C'est
   ce qui rend le rendu insensible au groupement (voir #cadeau ci-dessus). */

section:has(.cad-carte), section:has(.cad-pied) { padding: 0; }

.cad-carte {
  display: block;
  border-radius: 18px;
  padding: 30px 32px;
  margin: 0 0 18px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.cad-carte:hover { transform: translateY(-3px); }
@media (max-width: 640px) { .cad-carte { padding: 24px 22px; } }

.cad-or {
  background: linear-gradient(160deg, #FDFBF3, #F5EFD8);
  box-shadow: 0 12px 40px rgba(178, 159, 50, .16), 0 3px 10px rgba(178, 159, 50, .08);
}
.cad-or:hover { box-shadow: 0 18px 50px rgba(178, 159, 50, .26), 0 4px 12px rgba(178, 159, 50, .12); }

.cad-corail {
  background: linear-gradient(160deg, #FDF5F4, #F8E4E2);
  box-shadow: 0 12px 40px rgba(234, 114, 118, .16), 0 3px 10px rgba(234, 114, 118, .08);
}
.cad-corail:hover { box-shadow: 0 18px 50px rgba(234, 114, 118, .26), 0 4px 12px rgba(234, 114, 118, .12); }

/* L'étiquette prend la couleur de sa carte. */
.cad-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 5px;
  margin: 0 0 12px;
  color: #fff;
}
.cad-or .cad-tag { background: var(--or); }
.cad-corail .cad-tag { background: var(--corail); }

.cad-quoi {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark-teal);
  margin: 0 0 6px;
}
@media (max-width: 640px) { .cad-quoi { font-size: 20px; } }

.cad-detail {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: #6f6a63;
  margin: 0 0 14px;
}

.cad-action {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-teal);
}
.cad-carte:hover .cad-action { color: var(--corail); }

/* ── Le pied ─────────────────────────
   Le logo signe la page ; discret, plus petit que dans un bandeau. */

.cad-pied-logo {
  width: 118px;
  margin: 30px auto 36px;
  opacity: .85;
}

.cad-pied {
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b4bfbe;
  margin: 26px 0 34px;
}
/* ══════════════════════════════════════════════════════════════
   LE GABARIT DE LA PUBLICITÉ — la feuille de /bonus-livre-gabarit
   Reprise à l'identique du <style> de la page, écrite le 27/07 et jamais
   publiée. Direction « fiche à remplir » : champs éditables, cases à cocher,
   impression. Ce n'est pas la direction « dossier » des trois autres bonus,
   et c'est voulu : on ne lit pas cette page, on la remplit.

   TOUT EST SCOPÉ SOUS body.doc-gabarit
   Le build concatène cette feuille avec base.css et sert le résultat à TOUTES
   les pages du site. Sans le scope, ses règles d'éléments (body, section,
   table, th, td) écraseraient la home, ws-lp, cadeau et les bonus. Même
   raison que pour bonus.css, même solution.

   SES COULEURS NE SONT PAS CELLES DE LA CHARTE
   Vert #1d5b56, or #b07d00 : la page a été dessinée avant que la charte de
   marque existe. Les variables sont donc préfixées --gab-, pour qu'aucune ne
   vienne masquer un token de ../_charte/tokens.css qui porterait le même nom
   (--ink existe des deux côtés, avec deux valeurs différentes). Les aligner
   sur la charte est une décision de design, pas de mise en ligne : elle n'a
   pas été prise.

   QUATRE CLASSES RENOMMÉES, ET SEULEMENT QUATRE
   .wrap, .checks, .eyebrow et .big existent déjà dans base.css, qui n'est
   scopée nulle part et s'applique donc AUSSI à cette page : les deux règles
   s'empileraient pour de vrai. Elles deviennent .gwrap, .gchecks, .geyebrow
   et .gbig. Les neuf autres noms partagés avec bonus.css (.facts, .fact, .v,
   .k, .lab, .q, .d, .t, .aside) sont gardés tels quels : bonus.css est
   scopée sous body.doc-bonus, les deux feuilles ne peuvent pas se rencontrer.

   NEUTRALISATION, en tête de feuille
   base.css s'applique maintenant à cette page, qui n'avait jamais eu que sa
   propre feuille. Cinq de ses règles la déforment sans que rien ne le
   signale : les titres en Georgia dark-teal, le padding-bottom du CTA collant
   du workshop, le padding vertical des <section> (chaque étape en aurait pris
   64 px), et les marges que section img pose sur l'image du décryptage.
   ══════════════════════════════════════════════════════════════ */
body.doc-gabarit{padding-bottom:0}
body.doc-gabarit h1,body.doc-gabarit h2,body.doc-gabarit h3{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--gab-ink);line-height:inherit}
body.doc-gabarit section{padding:0}
body.doc-gabarit section img{margin:0;border-radius:0}
/* base.css supprime la marge HAUTE des paragraphes (0 0 1.25em). Cette page
   n'avait pas de regle p du tout : elle vivait sur les marges par defaut du
   navigateur, 1em en haut comme en bas. Sans cette ligne, chaque paragraphe
   remonte de 16 px et la page se tasse (mesure : 7 040 px de haut avant,
   6 934 apres). */
body.doc-gabarit p{margin:1em 0}

body.doc-gabarit{
  --gab-ink:#1c1b19;--gab-muted:#726c62;--gab-line:#e7e2d8;--gab-accent:#1d5b56;
  --gab-soft:#eaf3f1;--gab-paper:#fdfcfa;--gab-gold:#b07d00;--gab-fill:#fffdf6}

body.doc-gabarit *{box-sizing:border-box}
body.doc-gabarit{margin:0;background:var(--gab-paper);color:var(--gab-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62}
body.doc-gabarit .gwrap{max-width:800px;margin:0 auto;padding:44px 22px 90px}
body.doc-gabarit .cover{border:1px solid var(--gab-line);border-radius:16px;padding:30px;background:#fff;margin-bottom:30px}
body.doc-gabarit .geyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gab-accent);font-weight:800;margin-bottom:12px}
body.doc-gabarit h1{font-size:2rem;line-height:1.14;margin:0 0 .45em;letter-spacing:-.015em}
body.doc-gabarit .lede{color:#4a463f;margin:0 0 8px}
body.doc-gabarit .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
body.doc-gabarit .fact{background:var(--gab-soft);border-radius:10px;padding:12px 14px}
body.doc-gabarit .fact .v{font-size:1.3rem;font-weight:800;color:var(--gab-accent);line-height:1.1}
body.doc-gabarit .fact .k{font-size:.72rem;color:var(--gab-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}

body.doc-gabarit .step{border-top:3px solid var(--gab-accent);padding-top:16px;margin:0 0 48px}
body.doc-gabarit .stepnum{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gab-accent)}
body.doc-gabarit .step h2{font-size:1.5rem;margin:.1em 0 .5em;letter-spacing:-.01em}
body.doc-gabarit .ask{font-size:1.02rem;color:#3a372f;margin-bottom:16px}

body.doc-gabarit .ex{background:var(--gab-soft);border-radius:10px;padding:14px 17px;font-size:.88rem;margin:16px 0}
body.doc-gabarit .ex .lab{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--gab-accent);margin-bottom:5px}
body.doc-gabarit .aside{border:1px dashed #cfc7b4;background:#fffdf6;border-radius:12px;padding:16px 19px;margin:22px 0;font-size:.9rem}
body.doc-gabarit .aside .lab{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--gab-gold);margin-bottom:6px}

body.doc-gabarit table{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:.9rem}
body.doc-gabarit th{text-align:left;background:var(--gab-soft);padding:8px 11px;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:#12433f;border:1px solid #cfe2dd}
body.doc-gabarit td{border:1px solid var(--gab-line);padding:0;vertical-align:top}
body.doc-gabarit .f{display:block;min-height:2.5em;padding:9px 11px;background:var(--gab-fill);outline:none}
body.doc-gabarit .f:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--gab-accent)}
body.doc-gabarit .f:empty:before{content:attr(data-ph);color:#b8b0a0;font-style:italic}
body.doc-gabarit .gbig .f{min-height:8em}
body.doc-gabarit td.pre{background:#f7f5f0;color:var(--gab-muted);font-size:.84rem;padding:9px 11px;font-style:italic}

body.doc-gabarit .gchecks{list-style:none;padding:0;margin:12px 0}
body.doc-gabarit .gchecks li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #f2efe9}
body.doc-gabarit .gchecks li:last-child{border-bottom:0}
body.doc-gabarit .box{flex:none;width:19px;height:19px;border:2px solid var(--gab-accent);border-radius:5px;margin-top:3px;cursor:pointer}
body.doc-gabarit .box.on{background:var(--gab-accent);position:relative}
body.doc-gabarit .box.on:after{content:"✓";color:#fff;position:absolute;left:2.5px;top:-3px;font-size:14px;font-weight:800}
body.doc-gabarit .gchecks .t{flex:1;font-size:.94rem}

body.doc-gabarit .bias{border:1px solid var(--gab-line);border-radius:12px;padding:15px 18px;margin:12px 0;background:#fff}
body.doc-gabarit .bias h4{margin:0 0 3px;font-size:1rem;color:#12433f}
body.doc-gabarit .bias .d{font-size:.86rem;color:var(--gab-muted);margin:0 0 8px}
body.doc-gabarit .bias .q{font-size:.9rem;font-weight:600;margin-bottom:7px}
body.doc-gabarit .bias .how{font-size:.82rem;color:var(--gab-muted);margin-bottom:9px}

body.doc-gabarit .formula{background:#12433f;color:#fff;border-radius:12px;padding:20px 24px;margin:18px 0;font-size:1.1rem;line-height:1.5}
body.doc-gabarit .formula .slot{background:rgba(255,255,255,.16);border-radius:5px;padding:1px 8px;font-weight:700}

body.doc-gabarit .ladder{counter-reset:l;list-style:none;padding:0}
body.doc-gabarit .ladder li{counter-increment:l;position:relative;padding:9px 0 9px 38px;border-bottom:1px solid #f2efe9;font-size:.93rem}
body.doc-gabarit .ladder li:last-child{border-bottom:0}
body.doc-gabarit .ladder li:before{content:counter(l);position:absolute;left:0;top:8px;width:25px;height:25px;border-radius:50%;background:var(--gab-soft);color:var(--gab-accent);font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center}

body.doc-gabarit .decrypt{border:1px solid #bfe0d9;background:#f6fbfa;border-radius:14px;padding:22px 24px;margin:30px 0 0}
body.doc-gabarit .decrypt .dl{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--gab-accent);margin-bottom:8px}
body.doc-gabarit .decrypt .di{font-size:.92rem;color:#3a372f;margin:0 0 18px}
body.doc-gabarit .drow{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:22px;align-items:start}
@media(max-width:620px){body.doc-gabarit .drow{grid-template-columns:1fr}}
body.doc-gabarit .dimg{margin:0}
body.doc-gabarit .dimg img{width:100%;height:auto;border-radius:10px;border:1px solid var(--gab-line)}
body.doc-gabarit .dimg figcaption{font-size:.76rem;color:var(--gab-muted);margin-top:8px;line-height:1.45}
body.doc-gabarit .dtxt{font-size:.9rem;line-height:1.55}
body.doc-gabarit .dtxt p{margin:0 0 .7em}
body.doc-gabarit .dhook{font-weight:800;color:#12433f;font-size:1rem}
body.doc-gabarit .dsig{color:var(--gab-muted);font-style:italic}
body.doc-gabarit .dmap{width:100%;border-collapse:collapse;margin:20px 0 8px;font-size:.86rem}
body.doc-gabarit .dmap th{text-align:left;background:#e4f2ee;color:#12433f;padding:8px 11px;border:1px solid #cfe2dd;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
body.doc-gabarit .dmap td{border:1px solid #d7e7e2;padding:8px 11px;vertical-align:top;background:#fff}
body.doc-gabarit .dmap td:first-child{font-weight:700;color:#12433f;white-space:nowrap}
body.doc-gabarit .dnote{font-size:.86rem;color:#3a372f;background:#fff;border-left:3px solid var(--gab-accent);padding:11px 15px;border-radius:0 8px 8px 0;margin:14px 0 0}
body.doc-gabarit .bar{position:fixed;bottom:16px;right:16px;background:#fff;border:1px solid var(--gab-line);border-radius:12px;padding:8px 10px;display:flex;gap:8px;align-items:center;font-size:.8rem;box-shadow:0 8px 26px rgba(0,0,0,.13);z-index:20}
body.doc-gabarit .bar button{font:inherit;font-weight:700;border:1px solid var(--gab-line);background:#fff;border-radius:8px;padding:6px 11px;cursor:pointer}
body.doc-gabarit .bar .st{color:var(--gab-muted);font-size:.72rem}
@media print{
  body.doc-gabarit .bar{display:none}
  body.doc-gabarit .step{page-break-inside:avoid}
  body.doc-gabarit .f{background:#fff;border-bottom:1px dotted #999}
  body.doc-gabarit{font-size:11pt}
}
/* ══════════════════════════════════════
   EFFETS "TRACE A LA MAIN"
   Ajouter dans GHL Custom CSS (apres base.css)

   Usage :
     <span class="circled">mot</span>           → cercle corail
     <span class="circled teal">mot</span>      → cercle teal
     <span class="stabilo">mot</span>           → surligneur corail
     <span class="stabilo jaune">mot</span>     → surligneur jaune
     <span class="underline-pen">mot</span>     → trait fin corail
     <span class="underline-pen or">mot</span>  → trait fin or

   Variantes de couleur (ajoutables sur les 3 effets) :
     (defaut)  → corail #EA7276
     .teal     → #528C8D
     .or       → #B29F32
     .dark     → #08272A
     .jaune    → #f5c842 (stabilo uniquement)
   ══════════════════════════════════════ */

/* ------- CERCLE ------- */

.circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.circled::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M 22,38 C 18,12 60,3 105,5 C 155,3 190,16 187,42 C 184,65 148,78 100,76 C 48,78 12,63 16,40 C 18,30 32,22 50,20' fill='none' stroke='%23EA7276' stroke-width='2.2' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.circled.teal::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M 22,38 C 18,12 60,3 105,5 C 155,3 190,16 187,42 C 184,65 148,78 100,76 C 48,78 12,63 16,40 C 18,30 32,22 50,20' fill='none' stroke='%23528C8D' stroke-width='2.2' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E"); }
.circled.or::after    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M 22,38 C 18,12 60,3 105,5 C 155,3 190,16 187,42 C 184,65 148,78 100,76 C 48,78 12,63 16,40 C 18,30 32,22 50,20' fill='none' stroke='%23B29F32' stroke-width='2.2' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E"); }
.circled.dark::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M 22,38 C 18,12 60,3 105,5 C 155,3 190,16 187,42 C 184,65 148,78 100,76 C 48,78 12,63 16,40 C 18,30 32,22 50,20' fill='none' stroke='%2308272A' stroke-width='2.2' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E"); }

/* ------- STABILO ------- */

.stabilo {
  position: relative;
  display: inline;
}
.stabilo::after {
  content: '';
  position: absolute;
  bottom: 0; left: -3%;
  width: 106%; height: 40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M 1,10 C 30,6 70,14 110,8 C 145,5 170,12 199,9' fill='none' stroke='%23EA7276' stroke-width='18' stroke-linecap='round' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.stabilo.jaune::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M 1,10 C 30,6 70,14 110,8 C 145,5 170,12 199,9' fill='none' stroke='%23f5c842' stroke-width='18' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E"); }
.stabilo.teal::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M 1,10 C 30,6 70,14 110,8 C 145,5 170,12 199,9' fill='none' stroke='%23528C8D' stroke-width='18' stroke-linecap='round' opacity='0.25'/%3E%3C/svg%3E"); }
.stabilo.or::after    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M 1,10 C 30,6 70,14 110,8 C 145,5 170,12 199,9' fill='none' stroke='%23B29F32' stroke-width='18' stroke-linecap='round' opacity='0.25'/%3E%3C/svg%3E"); }
.stabilo.dark::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M 1,10 C 30,6 70,14 110,8 C 145,5 170,12 199,9' fill='none' stroke='%2308272A' stroke-width='18' stroke-linecap='round' opacity='0.25'/%3E%3C/svg%3E"); }

/* ------- TRAIT FIN ONDULE ------- */

.underline-pen {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.underline-pen::after {
  content: '';
  position: absolute;
  bottom: -2px; left: -2%;
  width: 104%; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M 2,8 C 40,4 80,9 120,5 C 155,3 175,7 198,6' fill='none' stroke='%23EA7276' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.underline-pen.teal::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M 2,8 C 40,4 80,9 120,5 C 155,3 175,7 198,6' fill='none' stroke='%23528C8D' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.underline-pen.or::after    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M 2,8 C 40,4 80,9 120,5 C 155,3 175,7 198,6' fill='none' stroke='%23B29F32' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.underline-pen.dark::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M 2,8 C 40,4 80,9 120,5 C 155,3 175,7 198,6' fill='none' stroke='%2308272A' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }