/* Feed Your Flow — DA 01 Douceur.
   SOURCE UNIQUE de vérité visuelle : ce fichier est chargé À L'IDENTIQUE par la maquette
   statique (public/mockups/feedyourflow/da-douceur.html) et par les sections CMS.
   C'est ce partage qui rend la parité pixel perfect structurelle et non déclarative.
   Toute divergence entre les deux rendus doit être corrigée ICI, jamais en double. */

/* ============================================================
   FEED YOUR FLOW — Douceur
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* accents de marque — INVARIANTS dans les deux thèmes */
  --pink:#FF66C4; --orange:#FA9151; --yellow:#FFDE59;
  --btn-ink:#2A211C;
  --cta:#F0A177;   /* RETOUR NADIA 1.5 : orange des boutons adouci, la palette --orange reste intacte */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --maxw:1180px;
  --gut:clamp(20px, 5vw, 40px);
  --sec:clamp(84px, 11vw, 156px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root,
:root[data-theme="light"]{
  /* Le clair est le DEFAUT : la maquette pose data-theme via son script de
     bascule, mais la page CMS n'a pas cet attribut. Sans ce doublon, toutes
     les variables de couleur y sont indefinies : pictos sans trait, bordures
     eteintes, halos a opacite 1. Le bloc dark, plus specifique, surcharge. */
  --bg:#FFFDF7;
  --bg-2:#FBF0E4;
  --ink:#3F3A37;
  --soft:#6B625C;
  --panel:#FFFFFF;
  --panel-2:#FFF9EF;
  --border:#E8DDCD;
  --border-strong:#D8C8B2;
  --illus-label:#3F3A37;
  --illus-node:#FFFDF7;
  --illus-line:#DCCFBC;
  --accent-ink:#9C4F20;
  --halo-op:.62;
  --photo-filter:saturate(1.02) contrast(1.02);
  --photo-veil:0;
  --shadow:0 24px 60px -34px rgba(63,58,55,.42);
  --shadow-soft:0 14px 40px -28px rgba(63,58,55,.4);
}
:root[data-theme="dark"]{
  --bg:#1B1614;
  --bg-2:#241D1A;
  --ink:#F6EEE3;
  --soft:#C6B9AB;
  --panel:#241D1A;
  --panel-2:#2B221E;
  --border:#3B302A;
  --border-strong:#4E3F37;
  --illus-label:#F6EEE3;
  --illus-node:#241D1A;
  --illus-line:#4C3D35;
  --accent-ink:#F0A972;
  --halo-op:.34;
  --photo-filter:saturate(.86) brightness(.84) contrast(1.05);
  --photo-veil:.3;
  --shadow:0 26px 64px -36px rgba(0,0,0,.85);
  --shadow-soft:0 16px 44px -30px rgba(0,0,0,.8);
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.75 var(--sans);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  transition:background .45s var(--ease), color .45s var(--ease);
}
img,svg{max-width:100%}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:8px}
::selection{background:rgba(255,102,196,.24)}

.wrap{width:min(100% - (2 * var(--gut)), var(--maxw));margin-inline:auto}
section{position:relative}
section[id]{scroll-margin-top:104px}

/* ---- Typo ---- */
/* .h1/.h2/.h3 en plus des elements : sur la page CMS, application.css declare
   `h2,.h2{font-family:Poppins}` et la classe bat l'element, peu importe l'ordre. */
/* .h4 fait partie du groupe : sur la page CMS, Bootstrap definit .h1-.h4 en
   Poppins 700 avec marge basse ; toute classe absente d'ici lui echoit. */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:-.012em;line-height:.96}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400}
.h1{font-size:clamp(44px, 7.4vw, 94px);line-height:.94}
.h2{font-size:clamp(36px, 5.6vw, 70px);line-height:.97}
.h3{font-size:clamp(25px, 2.9vw, 36px);line-height:1.05}
.h4{font-size:clamp(21px, 2.2vw, 27px);line-height:1.12;font-weight:400}
p{margin:0 0 1.1em}
/* ── Contre-poisons pour la page CMS ─────────────────────────────────────────
   application.css (chargee sur toute page publique) style les ELEMENTS NUS :
   p, li, span et a y sont en Poppins graisse 300. Une regle directe bat
   l'heritage du body : toute notre typographie sans classe tombait en Poppins,
   et comme Poppins n'est pas chargee ici, en sans-serif systeme aux chasses
   differentes, ce qui deplacait les retours a la ligne (constat, recit,
   colonnes de resultats). Ces regles-elements, servies en DERNIER, retablissent
   l'heritage a specificite egale sans battre aucune regle de classe.
   Etat de base de la maquette : aucun effet chez elle. */
p,li,span,a{font-family:inherit;font-weight:inherit}
/* .public-site-body (classe du layout CMS, absente de la maquette) impose
   line-height:1.7 au body et bat notre body{...17px/1.75}. Regle morte dans
   la maquette, active uniquement sur la page CMS. */
body.public-site-body{line-height:1.75;background-color:var(--bg);color:var(--ink)} /* le layout CMS pose background/color via --site-* (clair fige) a specificite superieure au body : sans cette reprise, le theme sombre ne teignait que les sections a fond propre */
/* Le layout CMS reserve 70px en haut de main pour sa navbar fixe generique.
   Le header Douceur est sticky et vit dans le flux : ce coussin creerait un
   vide de 70px entre header et hero. Classe absente de la maquette. */
main.public-site-main{padding-top:0}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17.5px,1.55vw,20px);line-height:1.72;color:var(--soft);font-weight:400 /* Bootstrap .lead impose 300 */}
.muted{color:var(--soft)}
.label{
  font:500 11px/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:var(--soft);
  display:inline-flex;align-items:center;gap:14px;margin:0 0 22px;
}
.label::before{content:"";width:44px;height:1px;flex:none;background:linear-gradient(90deg,var(--pink),var(--orange))}
.label.center{justify-content:center}
.label.center::after{content:"";width:44px;height:1px;flex:none;background:linear-gradient(90deg,var(--orange),var(--yellow))}

/* ---- Boutons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:500 14px/1 var(--sans);letter-spacing:.02em;
  padding:17px 30px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
/* public_site.css pose color:white !important et un halo indigo sur .btn-primary,
   et application.css passe le fond en dore au :focus (pas seulement :focus-visible).
   Le !important ici ne sert qu'a battre le leur ; meme valeur, la maquette ne bouge pas. */
.btn-primary{background:var(--cta);color:var(--btn-ink) !important;box-shadow:0 12px 28px -16px rgba(240,161,119,.9)}
/* Les etats repetent fond et couleur A DESSEIN : sur la page CMS, Bootstrap
   (application.css) peint `.btn:hover` avec ses propres variables --bs-btn-* ;
   a specificite egale, notre feuille chargee en dernier ne gagne que si elle
   declare la propriete. Sans ces lignes, le bouton passait au bleu Bootstrap
   au survol. Aucun effet dans la maquette : ces valeurs y sont deja la base. */
.btn-primary:hover,.btn-primary:focus,.btn-primary:focus-visible,.btn-primary:active{background:var(--cta) !important;color:var(--btn-ink) !important;border-color:transparent;transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(250,145,81,.95)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover,.btn-ghost:focus,.btn-ghost:focus-visible,.btn-ghost:active{background:transparent;border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
/* public_site.css frappe plus fort : `.public-site-body .btn-primary` (0,2,0)
   repeint le fond en --site-primary-color et pose l'ombre indigo par-dessus
   nos regles (0,1,0). Surcharge a la MEME specificite, chargee apres : elle
   gagne. La classe .public-site-body n'existe pas dans la maquette, regles
   mortes chez elle, memes valeurs que notre etat de base. */
.public-site-body .btn-primary{background:var(--cta);color:var(--btn-ink) !important;box-shadow:0 12px 28px -16px rgba(240,161,119,.9)}
.public-site-body .btn-primary:hover,.public-site-body .btn-primary:focus,.public-site-body .btn-primary:focus-visible,.public-site-body .btn-primary:active{background:var(--cta) !important;color:var(--btn-ink) !important;border-color:transparent;transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(250,145,81,.95)}
.btn-sm{padding:12px 20px;font-size:13px}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---- Halos ---- */
.halo{position:absolute;border-radius:50%;filter:blur(78px);opacity:var(--halo-op);pointer-events:none;z-index:0}
.halo-pink{background:radial-gradient(circle at 50% 50%, rgba(255,102,196,.55), rgba(255,102,196,0) 68%)}
.halo-orange{background:radial-gradient(circle at 50% 50%, rgba(250,145,81,.5), rgba(250,145,81,0) 68%)}
.halo-yellow{background:radial-gradient(circle at 50% 50%, rgba(255,222,89,.5), rgba(255,222,89,0) 68%)}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .95s var(--ease), transform .95s var(--ease);transition-delay:var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.header.stuck{border-bottom-color:var(--border)}
.hbar{display:flex;align-items:center;gap:22px;height:80px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:60px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{
  position:relative;font:400 13.5px/1 var(--sans);letter-spacing:.015em;color:var(--soft);
  padding:10px 13px;border-radius:999px;transition:color .28s var(--ease)
}
.nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:linear-gradient(90deg,var(--pink),var(--orange));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)
}
.nav a:hover,.nav a.active{color:var(--ink)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.hact{display:flex;align-items:center;gap:10px;flex:none}

.theme-toggle{
  display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:999px;background:var(--panel);border:1px solid var(--border);
  color:var(--ink);cursor:pointer;padding:0;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease)
}
.theme-toggle:hover{border-color:var(--border-strong);transform:rotate(-12deg)}
:root[data-theme="dark"] .ic-moon{display:none}
:root:not([data-theme="dark"]) .ic-sun{display:none} /* sans attribut = clair : au premier chargement, seul l'astre a ALLUMER se montre, sinon lune et soleil apparaissaient ensemble */

.burger{
  display:none;width:40px;height:40px;flex:none;border-radius:999px;
  background:var(--panel);border:1px solid var(--border);cursor:pointer;padding:0;
  place-items:center
}
.burger{position:relative}
.burger span{position:absolute;left:50%;top:50%;display:block;width:16px;height:1.5px;margin:0;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease), opacity .2s}
.burger span:nth-child(1){transform:translate(-50%,-50%) translateY(-5.5px)}
.burger span:nth-child(2){transform:translate(-50%,-50%)}
.burger span:nth-child(3){transform:translate(-50%,-50%) translateY(5.5px)}

.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

.mnav{
  display:none;border-top:1px solid var(--border);
  background:var(--bg);padding:14px var(--gut) 26px;
}
.mnav.open{display:block;animation:mdrop .35s var(--ease)}
@keyframes mdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav a{
  display:block;padding:13px 2px;font:400 16px/1 var(--sans);color:var(--ink);
  border-bottom:1px solid var(--border)
}
.mnav .btn{width:100%;margin-top:20px}

/* ============================================================
   HÉROS
   ============================================================ */
.hero{padding:clamp(44px,5.2vw,64px) 0 clamp(70px,9vw,120px);overflow:hidden}
.hero .halo-1{width:640px;height:640px;top:-260px;left:-220px}
.hero .halo-2{width:560px;height:560px;top:120px;right:-200px}
.hero-fil{position:absolute;inset:auto 0 -60px 0;height:420px;z-index:0;pointer-events:none;opacity:.5}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(30px,5vw,70px);align-items:center
}
.hero-eyebrow{
  font:500 11px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft);margin:0 0 26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap
}
.dot-grad{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--orange));flex:none}
.hero h1{margin:0 0 20px}
.hero .lead{max-width:34em;margin-bottom:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{margin-top:22px;font-size:14px;color:var(--soft);display:flex;align-items:center;gap:9px}
.hero-note svg{flex:none;color:var(--accent-ink)}

/* Portrait en arche */
.figure{position:relative;justify-self:center;width:min(100%,430px)}
.arch{
  position:relative;aspect-ratio:430/548;
  border-radius:36px;   /* RETOUR NADIA 1.6 : plein cintre remplace par un rectangle adouci */
  overflow:hidden;background:var(--bg-2);
  box-shadow:var(--shadow);
  z-index:2
}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:var(--photo-filter);transition:filter .45s var(--ease), transform 1.4s var(--ease);}
.figure:hover .arch img{transform:scale(1.03)}
.arch::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg, rgba(255,102,196,.20), rgba(255,222,89,.10) 45%, rgba(250,145,81,.24));
  mix-blend-mode:soft-light;opacity:calc(.55 + var(--photo-veil))
}
.arch-ring{
  position:absolute;inset:-16px -16px 26px -16px;
  border-radius:48px;
  border:1px solid var(--border-strong);z-index:1;
}
.arch-ring::before{
  content:"";position:absolute;inset:-13px;
  border-radius:60px;
  border:1px solid transparent;
  background:linear-gradient(150deg,var(--pink),var(--yellow),var(--orange)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.5
}

/* Pastilles flottantes */
.pill-float{
  position:absolute;z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:999px;padding:10px 16px;
  font:500 12.5px/1 var(--sans);letter-spacing:.01em;color:var(--ink);
  box-shadow:var(--shadow-soft);
  white-space:nowrap
}
.pill-float i{width:8px;height:8px;border-radius:50%;flex:none}
.pf-1{top:12%;left:-38px;animation:fl 7s ease-in-out infinite}
.pf-1 i{background:var(--pink)}
.pf-2{top:47%;right:-34px;animation:fl 8.4s ease-in-out infinite .9s}
.pf-2 i{background:var(--yellow)}
.pf-3{bottom:8%;left:-26px;animation:fl 9.2s ease-in-out infinite .4s}
.pf-3 i{background:var(--orange)}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ============================================================
   BANDEAU PHRASE-CLÉ + PILIERS
   ============================================================ */
.band-key{background:var(--bg-2);border-block:1px solid var(--border);padding:clamp(48px,6vw,74px) 0;overflow:hidden}
.band-key .inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.band-key blockquote{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.08}
.band-key blockquote em{font-style:italic;font-weight:400;color:var(--accent-ink)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--border-strong);border-radius:999px;
  padding:9px 16px;font:400 13px/1 var(--sans);color:var(--ink);background:var(--panel);
  transition:transform .3s var(--ease), border-color .3s var(--ease)
}
.chip:hover{transform:translateY(-2px);border-color:var(--orange)}
.chip i{width:6px;height:6px;border-radius:50%;flex:none}
/* RETOUR NADIA 2.2 : pictogrammes des 5 piliers, trait fin encre */
.chip svg{width:17px;height:17px;flex:none;display:block;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.72;transition:opacity .3s var(--ease)}
.chip:hover svg{opacity:1;stroke:var(--orange)}

/* ============================================================
   CONSTAT
   ============================================================ */
/* Chapo du constat : la marge etait un style inline dans la maquette ; la CSP
   des pages CMS interdit les styles inline, la regle vit donc ici. */
.constat .stick .lead{margin-top:24px}
.constat{padding:var(--sec) 0;overflow:hidden}
.constat .halo-1{width:520px;height:520px;top:6%;right:-240px}
.split{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(34px,6vw,86px)}
.split.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.stick{position:sticky;top:120px;align-self:start}
.constat h2{margin-bottom:24px}
.checks{list-style:none;margin:0;padding:0}
.checks li{
  position:relative;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--border);
}
.checks li:first-child{border-top:1px solid var(--border)}
.checks .num{
  font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--soft);
  padding-top:8px
}
.checks p{margin:0;font-size:17px;line-height:1.62}
.checks li:hover .num{color:var(--orange)}
.exergue{
  position:relative;z-index:1;margin-top:clamp(48px,6vw,80px);
  display:grid;grid-template-columns:1fr 1fr;gap:22px
}
.exergue .quote{
  position:relative;padding:clamp(30px,4vw,46px);border-radius:26px;
  background:var(--panel);border:1px solid var(--border);overflow:hidden;
  box-shadow:var(--shadow-soft)
}
.exergue .quote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--pink),var(--yellow),var(--orange))
}
.exergue .quote p{
  font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.9vw,36px);line-height:1.12;margin:0
}
.exergue .quote em{font-style:italic;font-weight:400}
.qmark{font-family:var(--serif);font-size:76px;line-height:1;color:var(--orange);opacity:.35;display:block;margin-bottom:-18px}

/* ============================================================
   APPROCHE + RUBAN
   ============================================================ */
.approche{padding:var(--sec) 0;background:var(--bg-2);border-block:1px solid var(--border);overflow:hidden}
.approche .halo-1{width:540px;height:540px;top:-160px;left:-180px}
.appro-head{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center}
.appro-head h2{margin-bottom:26px}
.appro-quote{
  font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.2vw,27px);line-height:1.4;
  color:var(--soft);max-width:44ch;margin:0 auto
}
.appro-quote em{font-style:italic;color:var(--ink)}

.flow{position:relative;z-index:1;margin-top:clamp(56px,7vw,90px);padding:130px 0 150px}
.flow-stage{position:relative;width:100%}
.flow-svg{display:block;width:100%;height:auto;overflow:visible}
.flow-path{
  fill:none;stroke:url(#gradFlow);stroke-width:3.4;stroke-linecap:round;
  filter:drop-shadow(0 6px 16px rgba(250,145,81,.28));
}
.flow-glow{fill:none;stroke:url(#gradFlow);stroke-width:11;stroke-linecap:round;opacity:.16;filter:blur(7px)}
.fnode{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .6s var(--ease), transform .6s var(--ease);transition-delay:var(--d,0ms)}
.flow.drawn .fnode{opacity:1;transform:scale(1)}
.fnode .ring{fill:var(--illus-node);stroke:url(#gradFlow);stroke-width:2.4}
.fnode .core{fill:url(#gradFlow)}
.fnode .aura{fill:url(#gradFlow);opacity:.13}
.flow-tick{stroke:var(--illus-line);stroke-width:1;stroke-dasharray:2 5}

.pillar{position:absolute;left:var(--x);top:var(--y);width:210px;transform:translateX(-50%);text-align:center}
/* Positions des 5 piliers sur la courbe. Elles etaient des styles inline dans
   la maquette ; la CSP des pages CMS les interdit, et ce sont de toute facon
   des coordonnees du DESSIN, pas du contenu : elles vivent donc ici, appariees
   aux 5 noeuds du SVG (cx 130/365/600/835/1070 sur viewBox 1200 = 10.833 %,
   30.417 %, 50 %, 69.583 %, 89.167 %). */
.pillar.pos-1{--x:10.833%;--y:66.667%}
.pillar.pos-2{--x:30.417%;--y:32%}
.pillar.pos-3{--x:50%;--y:66.667%}
.pillar.pos-4{--x:69.583%;--y:32%}
.pillar.pos-5{--x:89.167%;--y:66.667%}
.pillar[data-side="down"]{margin-top:40px}
.pillar[data-side="up"]{top:auto;bottom:calc(100% - var(--y));margin-bottom:40px}
.pillar .pn{font:500 10.5px/1 var(--sans);letter-spacing:.24em;color:var(--soft);display:block;margin-bottom:9px}
.pillar h3{font-size:26px;margin-bottom:9px}
.pillar p{font-size:13.6px;line-height:1.56;color:var(--soft);margin:0}
.pdot{display:none}

/* ============================================================
   HISTOIRE
   ============================================================ */
.histoire{padding:var(--sec) 0;overflow:hidden}
.histoire .halo-1{width:520px;height:520px;bottom:-180px;left:-200px}
.card-me{
  position:relative;border-radius:28px;background:var(--panel);border:1px solid var(--border);
  padding:34px 30px 30px;text-align:center;box-shadow:var(--shadow-soft);overflow:hidden
}
.card-me .mini{
  width:150px;height:180px;margin:0 auto 22px;overflow:hidden;
  border-radius:24px;   /* RETOUR NADIA 5.3 */
  border:1px solid var(--border-strong)
}
.card-me .mini img{object-position:55% 10%;transform:scale(1.85);transform-origin:55% 22%;width:100%;height:100%;object-fit:cover;filter:var(--photo-filter) grayscale(.12);}
.sign{font-family:var(--serif);font-style:italic;font-weight:400;font-size:46px;line-height:1;margin:0 0 10px}
.card-me .role{font:500 11px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:0}
.card-me .rule-g{height:2px;width:56px;margin:20px auto;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--orange));border-radius:2px}
.card-me .loc{font-size:14px;color:var(--soft);margin:0}
.recit p{color:var(--soft);font-size:16.5px}
.recit strong{color:var(--ink);font-weight:500}
.recit .big{
  font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.1vw,38px);line-height:1.14;
  color:var(--ink);margin:34px 0
}
.recit .big em{font-style:italic;font-weight:400;color:var(--accent-ink)}
.recit .sep{display:block;height:1px;background:var(--border);margin:34px 0}

/* ============================================================
   BANDEAUX CTA
   ============================================================ */
.cta-band{position:relative;overflow:hidden;padding:clamp(64px,8vw,104px) 0;background:var(--bg-2);border-block:1px solid var(--border)}
.cta-band.final{background:var(--bg)}
.cta-fil{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6}
.cta-band .halo-1{width:520px;height:520px;top:-220px;right:-160px}
.cta-band .halo-2{width:420px;height:420px;bottom:-240px;left:-140px}
.cta-inner{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto}
.cta-inner h2{margin-bottom:20px}
.cta-inner .lead{margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cta-meta{margin-top:24px;font-size:13.5px;color:var(--soft)}

/* ============================================================
   OFFRES
   ============================================================ */
.offres{padding:var(--sec) 0;overflow:hidden}
.offres .halo-1{width:560px;height:560px;top:10%;right:-260px}
.head-center{position:relative;z-index:1;text-align:center;max-width:740px;margin:0 auto clamp(20px,3vw,32px)}
.badge{
  display:inline-flex;align-items:center;gap:10px;margin:0 auto 30px;
  border-radius:999px;padding:10px 20px;
  font:500 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--btn-ink);
  background:linear-gradient(100deg,var(--yellow),var(--orange));
  box-shadow:0 12px 30px -18px rgba(250,145,81,.9)
}
.badge svg{flex:none}
.badge.in-card{
  margin:0 0 18px;padding:8px 14px;font-size:10.2px;letter-spacing:.09em;
  align-self:flex-start;text-align:left;line-height:1.4;box-shadow:none;
  /* Bootstrap (page CMS) impose white-space:nowrap aux .badge : on le rend
     explicite, sinon le badge long ne se replie plus sur mobile. Sans effet
     dans la maquette, normal est deja l'etat initial. */
  white-space:normal
}
.tag-free{
  display:inline-flex;align-self:flex-start;margin:0 0 18px;
  border-radius:999px;padding:8px 14px;
  font:500 10.2px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink);border:1px solid var(--border-strong);background:var(--panel-2)
}
/* Chapo des offres : marge inline dans la maquette, interdite par la CSP
   des pages CMS, portee ici comme pour le constat. */
.offres .head-center .lead{margin-top:22px}
.offer-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(38px,5vw,56px);align-items:stretch}
.offer{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:28px;border:1px solid var(--border);background:var(--panel);
  padding:clamp(26px,2.7vw,36px);box-shadow:var(--shadow-soft);overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease)
}
.offer:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.offer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--orange))}
.offer.b::before{background:linear-gradient(90deg,var(--yellow),var(--orange),var(--pink))}
.offer.c::before{height:5px;background:linear-gradient(90deg,var(--orange),var(--pink),var(--yellow))}
.offer.feature{border-color:var(--border-strong);box-shadow:var(--shadow);background:var(--panel-2)}
.offer .otag{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin:0 0 16px}
.offer h3{margin-bottom:14px;font-size:clamp(24px,2.5vw,31px)}
.offer .hook{font-family:var(--serif);font-size:19.5px;line-height:1.34;font-style:italic;color:var(--accent-ink);margin:0 0 24px}
.olist{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:13px}
.olist li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:14.8px;line-height:1.55;color:var(--soft)}
.olist svg{margin-top:4px;color:var(--orange);flex:none}
.owith{border-top:1px solid var(--border);padding-top:20px;margin-bottom:20px}
.owith .t{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);display:block;margin-bottom:11px}
.owith p{font-family:var(--serif);font-size:19px;line-height:1.36;color:var(--ink);margin:0}
.onote{font-size:13.2px;line-height:1.6;color:var(--soft);background:var(--bg-2);border:1px solid var(--border);border-radius:16px;padding:13px 15px;margin-bottom:22px}
.oprice{border-top:1px solid var(--border);padding-top:19px;margin-bottom:22px;margin-top:auto}
.oprice .tag{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.oprice .now{font-family:var(--serif);font-size:21px;line-height:1.34;color:var(--ink);margin:0}
.oprice .now em{font-style:italic;background:linear-gradient(100deg,var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.oprice .was{font-size:13px;line-height:1.5;color:var(--soft);margin:9px 0 0}
.oprice .was s{text-decoration-color:var(--border-strong)}
.offer .btn{margin-top:0;width:100%}
/* RETOUR MOBILE 27/08 : repli de TOUTE la carte d'offre sur telephone.
   En desktop le <details> reste `open` et son bouton est masque : rendu
   inchange. Le controleur Stimulus ne ferme les cartes que sous 780 px. */
.ofold{display:contents}
.ofold-sum{display:none}
@media (max-width:780px){
  .ofold{display:block;margin-bottom:22px}
  .ofold-sum{
    display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
    list-style:none;font:500 13.5px/1 var(--sans);color:var(--accent-ink);
    border:1px solid var(--border);border-radius:999px;padding:11px 18px
  }
  .ofold-sum::-webkit-details-marker{display:none}
  .ofold-chev{transition:transform .3s var(--ease)}
  .ofold[open] > .ofold-sum{margin-bottom:22px}
  .ofold[open] > .ofold-sum .ofold-chev{transform:rotate(180deg)}
}

/* RETOUR JEROME : repli du surplus d'inclusions, les cartes etaient trop hautes */
.more{margin:-14px 0 24px}
.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--sans);color:var(--accent-ink);padding:9px 0;user-select:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .28s var(--ease)}
.more[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.more>summary:hover{color:var(--orange)}
.more .olist{margin-top:12px;margin-bottom:0}

/* ============================================================
   RÉSULTATS
   ============================================================ */
.resultats{padding:var(--sec) 0;background:var(--bg-2);border-block:1px solid var(--border);overflow:hidden}
.resultats .halo-1{width:480px;height:480px;bottom:-200px;right:-160px}
.res-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(38px,5vw,56px);align-items:start}
.res-col{border-radius:28px;border:1px solid var(--border);background:var(--panel);padding:clamp(28px,3.2vw,40px)}
.res-col .rt{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.res-col .rt .k{
  width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--btn-ink);
  background:linear-gradient(135deg,var(--yellow),var(--orange))
}
.res-col.b .rt .k{background:linear-gradient(135deg,var(--pink),var(--orange))}
.res-col.c .rt .k{background:linear-gradient(135deg,var(--orange),var(--yellow))}
.res-col h3{font-size:23px}
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rlist li{
  display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;
  padding:12px 0;border-top:1px solid var(--border);
  font-family:var(--serif);font-size:17.5px;line-height:1.36;color:var(--ink)
}
.rlist li svg{margin-top:6px;color:var(--accent-ink)}

/* ============================================================
   PARCOURS
   ============================================================ */
.parcours{padding:var(--sec) 0;overflow:clip}   /* clip et non hidden : hidden cree un conteneur de defilement et neutralise le position:sticky de .dial */
.parcours .halo-1{width:520px;height:520px;top:-140px;left:-220px}
/* Tete du parcours : alignement a gauche, style inline dans la maquette,
   interdit par la CSP des pages CMS, porte ici. */
.parcours .head-center{margin-inline:0;text-align:left}
.parc-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(34px,6vw,78px);align-items:start;margin-top:clamp(34px,4vw,50px)}
.dial{position:sticky;top:120px}
.dial svg{display:block;width:100%;height:auto;max-width:400px;margin-inline:auto}
.dial-arc{stroke-linecap:round;fill:none;stroke-width:5;transition:stroke-width .35s var(--ease), opacity .35s var(--ease);opacity:.55}
.dial-rim{fill:none;stroke:var(--illus-line);stroke-width:1.2}
.dial-plate{fill:var(--panel-2);stroke:var(--illus-line);stroke-width:1}
.dial-dot{stroke:var(--illus-line);stroke-width:1;fill:none;stroke-dasharray:1.5 6}
.dial-hand{stroke:var(--illus-label);stroke-width:2.2;stroke-linecap:round}
.dial-cap{fill:url(#gradDial)}
.dial-cta{font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);text-align:center;margin:22px 0 0}

/* application.css embarque un stepper (.steps flex 90 %, .step rond blanc en
   aspect-ratio 1/1) charge sur TOUTE page publique : sans ces verrous, les
   etapes du deroule se rendaient en rangee d'ovales. Etat de base maquette. */
.steps{list-style:none;margin:0;padding:0;position:relative;display:block;width:auto;z-index:auto}
.steps::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,var(--pink),var(--yellow),var(--orange));opacity:.42}
.step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:22px;padding:0 0 34px;
  width:auto;aspect-ratio:auto;background:transparent;border:0;border-radius:0;flex:none;cursor:auto}
.step:last-child{padding-bottom:0}
.step .sn{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--border-strong);
  font:500 12px/1 var(--sans);letter-spacing:.06em;color:var(--ink);z-index:1;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease)
}
.step:hover .sn{border-color:transparent;background:linear-gradient(135deg,var(--yellow),var(--orange));color:var(--btn-ink)}
.step h3{font-size:25px;margin-bottom:10px;padding-top:9px}
.step p{font-size:15.6px;line-height:1.68;color:var(--soft);margin:0}
.step .when{display:inline-block;margin-top:11px;font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
/* liaison hover étape → arc du cadran */
.parc-grid:has(.step:nth-child(1):hover) .arc-1,
.parc-grid:has(.step:nth-child(2):hover) .arc-2,
.parc-grid:has(.step:nth-child(3):hover) .arc-3,
.parc-grid:has(.step:nth-child(4):hover) .arc-4,
.parc-grid:has(.step:nth-child(5):hover) .arc-5{opacity:1;stroke-width:8}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:var(--sec) 0;background:var(--bg-2);border-block:1px solid var(--border);overflow:hidden}
.faq .halo-1{width:460px;height:460px;top:-160px;right:-150px}
.faq-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(30px,5vw,72px);align-items:start;max-width:none /* cms_sections possede aussi .faq-grid (max-width 900px) : on le neutralise. SURTOUT ne pas toucher au margin ici : .faq-grid vit sur le MEME element que .wrap, un margin:0 ecraserait son centrage margin-inline:auto (bug du 22/08, section collee a gauche) */}
.qa{border-top:1px solid var(--border-strong)}
.qa:last-of-type{border-bottom:1px solid var(--border-strong)}
/* Chapo de la FAQ : marge inline dans la maquette, CSP oblige, portee ici. */
.faq .stick .lead{margin-top:22px}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;
  padding:26px 0;font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.3vw,28px);line-height:1.2
}
.qa summary::-webkit-details-marker{display:none}
.qa .plus{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border-strong);display:grid;place-items:center;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);margin-top:2px
}
.qa[open] .plus{transform:rotate(45deg);background:linear-gradient(135deg,var(--yellow),var(--orange));border-color:transparent;color:var(--btn-ink)}
.qa .qn{font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--soft);padding-top:11px;flex:none}
.qa .ans{padding:0 54px 28px 40px;color:var(--soft);font-size:16px;line-height:1.72;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:clamp(58px,7vw,86px) 0 34px;background:var(--bg);border-top:1px solid var(--border)}
.f-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3, minmax(0,.8fr));gap:clamp(28px,4vw,52px)}
.f-brand img{height:56px;width:auto;margin-bottom:20px}
.f-brand p{font-family:var(--serif);font-size:20px;line-height:1.36;color:var(--soft);max-width:30ch;margin:0}
.f-col h4{font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin:0 0 18px}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.f-col a,.f-col span{font-size:14.6px;color:var(--ink);transition:color .25s var(--ease)}
.f-col a:hover{color:var(--orange)}
.socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.socials a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--soft);background:var(--panel);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease)
}
.socials a:hover{color:var(--orange);border-color:var(--orange);transform:translateY(-2px)}
.f-bot{
  margin-top:clamp(38px,5vw,58px);padding-top:24px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  font-size:13.4px;color:var(--soft)
}
.f-bot .legal{display:flex;gap:20px}
.f-bot a:hover{color:var(--orange)}
.f-grad{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--orange));margin-bottom:clamp(38px,5vw,56px);opacity:.85}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .flow{padding:0}
  .flow-svg{display:none}
  .flow-stage{padding-left:40px}
  .flow-stage::before{
    content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--pink),var(--yellow),var(--orange));
    transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease)
  }
  .flow.drawn .flow-stage::before{transform:scaleY(1)}
  .pillar{position:static;transform:none;width:auto;text-align:left;margin:0 0 30px !important;padding-bottom:0}
  .pillar:last-child{margin-bottom:0 !important}
  .pdot{
    display:block;position:absolute;left:0;width:24px;height:24px;border-radius:50%;
    background:var(--bg-2);border:2px solid var(--orange);margin-top:4px;
    transform:translateX(-40px)
  }
  .pdot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--orange))}
  /* RETOUR NADIA 24/08 : les left/top/bottom du placement desktop (dont le
     bottom des [data-side], plus specifique) s'appliquaient au relatif et
     posaient les piliers en escalier. */
  .pillar{position:relative;left:auto;top:auto;bottom:auto}
  .pillar[data-side="down"],.pillar[data-side="up"]{left:auto;top:auto;bottom:auto}
  .pillar p{max-width:46ch}
  .offer-grid{grid-template-columns:1fr 1fr}
  .offer.c{grid-column:1 / -1}
  .res-grid{grid-template-columns:1fr 1fr}
  .res-col.c{grid-column:1 / -1}
}
@media (max-width:960px){
  .nav{display:none}
  /* RETOUR MOBILE 27/08 : sans la nav (qui portait le margin-left:auto), les
     deux boutons restaient colles au logo. Ils reprennent le bord droit. */
  .hact{margin-left:auto}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .figure{order:-1;width:min(100%,400px)}
  .hero h1{margin-bottom:24px}
  .band-key .inner{grid-template-columns:1fr;gap:30px}
  .split,.split.rev{grid-template-columns:1fr;gap:34px}
  .stick{position:static}
  .exergue{grid-template-columns:1fr}
  .res-grid{grid-template-columns:1fr}
  .parc-grid{grid-template-columns:1fr;gap:44px}
  .dial{position:static}
  .faq-grid{grid-template-columns:1fr;gap:32px}
  .f-top{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1 / -1}
}
@media (max-width:780px){
  .offer-grid{grid-template-columns:1fr}
  .offer.c{grid-column:auto}
}
@media (max-width:620px){
  body{font-size:16px}
  .hbar{height:70px}
  .brand img{height:50px}
  .hact .btn{display:none}
  /* RETOUR MOBILE 27/08 : la photo mangeait tout l'ecran et son anneau
     (inset -16px) mordait la gouttiere. On la ramene a une taille de portrait. */
  .figure{width:min(100%,272px)}
  .pf-1{left:4px;top:8%}
  .pf-2{right:0;top:46%}
  .pf-3{left:8px;bottom:5%}
  .pill-float{font-size:11.5px;padding:8px 13px}
  .btn{padding:15px 24px}
  .hero-cta .btn{width:100%}
  .checks li{grid-template-columns:34px 1fr;gap:12px}
  .qa .ans{padding:0 0 26px 0}
  .qa summary{gap:14px;font-size:20px}
  .qa .qn{display:none}
  .step{grid-template-columns:40px 1fr;gap:16px}
  .step .sn{width:40px;height:40px}
  .steps::before{left:19px}
  /* RETOUR MOBILE 27/08 : deux colonnes plutot qu'une longue liste. */
  .f-top{grid-template-columns:1fr 1fr;gap:26px 18px}
  .f-brand{grid-column:1 / -1}
  .f-col h4{margin-bottom:12px}
  .f-col ul{gap:9px}
  .f-col a,.f-col span{font-size:14px;overflow-wrap:anywhere} /* l'adresse e-mail tient pile dans la colonne : on lui autorise la coupure plutot que le debord */
  .f-bot{flex-direction:column;align-items:flex-start}
  .rlist li{font-size:19px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important
  }
  .reveal{opacity:1;transform:none}
  .pill-float{animation:none !important}
}

/* ============================================================
   PAGES LÉGALES (mentions, CGU, CGV) — transposition de
   public/mockups/feedyourflow/legal.css, scopée .legal-douceur et posée sur
   les tokens communs : le thème sombre du site s'applique donc de lui-même.
   Ces classes n'existent pas dans la maquette da-douceur : règles mortes là-bas.
   ============================================================ */
/* Chaque article est une section : le coussin de fin de page ne vaut que
   pour la derniere, sinon il s'empile entre les articles. */
/* Mention d'attribution du pied de page, discrete et alignee sur .f-bot. */
.f-bot .powered{color:var(--soft)}
.f-bot .powered a{color:var(--accent-ink);text-decoration:none}
.f-bot .powered a:hover{text-decoration:underline}
.legal-douceur{padding:0}
.legal-douceur:last-of-type{padding-bottom:80px}
.legal-douceur .lwrap{width:min(820px,100% - 44px);margin-inline:auto}
.legal-douceur .lhero{padding:64px 0 26px}
.legal-douceur .kicker{display:inline-flex;align-items:center;gap:11px;font:400 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin:0 0 16px}
.legal-douceur .kicker::before{content:"";width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--orange))}
.legal-douceur h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,6vw,3.6rem);line-height:1.04;margin:0 0 16px;letter-spacing:-.012em}
.legal-douceur h1 em{font-style:italic;color:var(--orange)}
.legal-douceur .maj{color:var(--soft);font-size:14px;margin:0}
.legal-douceur h2{font-family:var(--serif);font-weight:400;font-size:1.72rem;line-height:1.2;margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--border);letter-spacing:-.012em}
.legal-douceur .larticle:first-of-type h2{border-top:0;padding-top:0}
.legal-douceur p,.legal-douceur li{color:var(--soft);font-size:16.5px;line-height:1.72}
.legal-douceur p{margin:0 0 14px}
.legal-douceur ul{margin:0 0 14px;padding-left:20px;list-style:disc}
.legal-douceur li{margin-bottom:7px}
.legal-douceur strong{color:var(--ink);font-weight:600}
.legal-douceur a{color:var(--accent-ink)}
.legal-douceur .todo{display:inline-block;background:rgba(250,145,81,.14);border:1px dashed var(--orange);border-radius:7px;padding:1px 8px;color:var(--accent-ink);font-size:.92em;font-weight:600;font-style:normal}
.legal-douceur table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.legal-douceur th,.legal-douceur td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.legal-douceur th{color:var(--ink);font-weight:600;white-space:nowrap;width:38%}
.legal-douceur td{color:var(--soft)}