/* =========================================================
   Coach Ton Cab — Design system (d'après la maquette Claude)
   Polices : Londrina Solid (display) · Archivo Narrow (texte) · Bad Script (manuscrit)
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Bad+Script&family=Special+Elite&display=swap");

:root{
  /* Bleu-vert canard */
  --canard-900:#04222a; --canard-800:#073641; --canard-700:#0b4a59;
  --canard-500:#1c6d80; --canard-300:#7fa9b4; --canard-200:#b9d0d6;
  --canard-100:#dfeaed; --canard-050:#f0f6f7;
  /* Jaune-citron */
  --citron-600:#9a9d15; --citron-500:#c2c61b; --citron-300:#e0e37a;
  --citron-100:#f0f1c4; --citron-050:#f8f9e6;
  /* Orange */
  --orange-600:#c85503; --orange-500:#fa6d04; --orange-300:#fdae72;
  --orange-100:#fedcc2; --orange-050:#fff2e8;
  /* Rose */
  --rose-600:#d67ad6; --rose-500:#fdbdfd; --rose-300:#fed4fe;
  --rose-100:#feeafe; --rose-050:#fff6ff;
  /* Papier & neutres */
  --paper-000:#ffffff; --paper-100:#fffdf8; --paper-200:#f7f3ea;
  --paper-300:#ece5d8; --paper-400:#d9cfbd; --ink-500:#6b7a7f;
  /* Papiers de l'appli Boost tes finances */
  --paper-cream:#f7f1de; --paper-aged:#f1ead2; --kraft:#d9c19a;
  --shadow-card:0 1px 0 rgba(7,54,65,.02), 0 4px 14px rgba(7,54,65,.06);
  --shadow-card-hover:0 8px 24px rgba(7,54,65,.12), 0 2px 6px rgba(7,54,65,.06);

  --font-display:"Londrina Solid","Marker Felt",system-ui,sans-serif;
  --font-text:"Archivo Narrow","Helvetica Neue",system-ui,sans-serif;
  --font-script:"Bad Script","Bradley Hand",cursive;
  --font-tampon:"Special Elite",ui-monospace,monospace;

  --maxw:1360px;
  /* Espacements uniques du site : ne pas en inventer d'autres */
  --section:clamp(48px,6vw,80px);
  --bloc:clamp(24px,2.6vw,32px);
  --gutter:clamp(16px,3vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--paper-100); color:var(--canard-700);
  font-family:var(--font-text); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{font-family:var(--font-display); font-weight:400; color:var(--canard-800);
  line-height:1.02; letter-spacing:0; margin:0; text-transform:lowercase; text-wrap:balance}
h4,h5,h6{font-family:var(--font-text); font-weight:700; color:var(--canard-800); margin:0}
p{margin:0 0 1em}
/* Textes justifiés, avec césure pour éviter les grands blancs entre les mots */
main p, main li{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
main .post p, main .carte-offre p, main .carte-offre li, main .bg-dark .grid p, main .center p, main p.center, main [data-msg], .avis .who *, .post .meta, .stats *{text-align:inherit; hyphens:manual}
a{color:var(--canard-700); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; transition:color .18s var(--ease)}
a:hover{color:var(--orange-500)}
strong{font-weight:700; color:var(--canard-800)}
::selection{background:var(--citron-300); color:var(--canard-900)}
/* Accessibilité : anneau de focus visible au clavier */
:focus-visible{outline:none; box-shadow:0 0 0 3px var(--orange-100), 0 0 0 4px var(--orange-500); border-radius:6px}
.btn:focus-visible,.header-cart:focus-visible{outline:none; box-shadow:0 0 0 3px var(--paper-100), 0 0 0 6px var(--orange-500)}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.section{padding:var(--section) 0}
.section--sm{padding:var(--section) 0}
.bg-paper{background:var(--paper-100)} .bg-sunken{background:var(--paper-cream)}
.bg-dark{background:var(--canard-800)} .bg-dark h1,.bg-dark h2{color:var(--paper-100)}
.bg-citron{background:var(--citron-050)} .bg-orange{background:var(--orange-050)}
.dots{background-image:radial-gradient(rgba(7,54,65,.08) 1.5px,transparent 1.6px); background-size:26px 26px}

/* Sur-titre façon en-tête de page BTF : petit trait orange + capitales */
.eyebrow{display:flex; align-items:center; gap:10px; font-family:var(--font-text); text-transform:uppercase;
  letter-spacing:.12em; font-weight:700; font-size:12.5px; color:var(--orange-600); margin:0 0 12px}
.eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor; flex:0 0 auto}
.center .eyebrow{justify-content:center}
.eyebrow.citron{color:var(--citron-500)}
.tampon-txt{font-family:var(--font-tampon)}
.script{font-family:var(--font-script)}
/* Le texte d'intro prend toute la largeur de sa colonne */
.lead{max-width:none!important;}
/* Mot surligné au feutre (même trait que le calendrier) */
.surligne{background:linear-gradient(transparent 55%, var(--citron-300) 55%, var(--citron-300) 92%, transparent 92%); padding:0 .12em; font-weight:600; color:var(--canard-900)}
a.surligne{text-decoration:none}
a.surligne:hover{color:var(--orange-600)}
.surligne.orange{background:linear-gradient(transparent 55%, var(--orange-300) 55%, var(--orange-300) 92%, transparent 92%)}
.surligne.rose{background:linear-gradient(transparent 55%, var(--rose-300) 55%, var(--rose-300) 92%, transparent 92%)}
.lead{font-size:19px; line-height:1.5; color:var(--canard-700)}
.muted{color:#56676c}
h1.hero-title{font-size:clamp(38px,4.6vw,62px)}
/* Titre de l'accueil : une phrase par ligne sur ordinateur */
h1.hero-2l{font-size:clamp(34px,3.3vw,50px)}
@media (min-width:861px){ h1.hero-2l span{display:block; white-space:nowrap} }
h2.big{font-size:clamp(30px,3.2vw,44px)}
h2.mid{font-size:clamp(28px,2.8vw,38px)}

.grid{display:grid; gap:var(--bloc)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .grid-2{grid-template-columns:1fr} }
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.center{text-align:center}

/* ---------- Boutons (repris de l'appli Boost tes finances) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-text); font-weight:600; text-transform:none; letter-spacing:0;
  font-size:15px; line-height:1.2; padding:10px 20px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn--s{font-size:14px; padding:7px 15px}
.btn--l{font-size:15.5px; padding:12px 24px}
.btn--full{width:100%}
.btn--primary{background:var(--canard-800); border-color:var(--canard-800); color:#fff; box-shadow:0 2px 5px rgba(7,54,65,.22)}
.btn--primary:hover{background:var(--canard-700); border-color:var(--canard-700); color:#fff; box-shadow:0 4px 10px rgba(7,54,65,.30)}
.btn--accent{background:var(--orange-500); border-color:var(--orange-500); color:#fff; box-shadow:0 2px 5px rgba(250,109,4,.22)}
.btn--accent:hover{background:var(--orange-600); border-color:var(--orange-600); color:#fff; box-shadow:0 4px 10px rgba(250,109,4,.32)}
.btn--sur-fonce{background:var(--citron-500); border-color:var(--citron-500); color:var(--canard-900)}
.btn--sur-fonce:hover{background:var(--paper-100); border-color:var(--paper-100); color:var(--canard-900)}
.btn--rose{background:var(--rose-500); border-color:var(--rose-500); color:var(--canard-900); box-shadow:0 2px 5px rgba(214,122,214,.28)}
.btn--rose:hover{background:var(--rose-600); border-color:var(--rose-600); color:#fff; box-shadow:0 4px 10px rgba(214,122,214,.36)}
.btn--secondary{background:var(--paper-cream); color:var(--canard-800); border-color:rgba(7,54,65,.18)}
.btn--secondary:hover{background:#fff; border-color:var(--canard-800); color:var(--canard-800); box-shadow:0 2px 8px rgba(7,54,65,.10)}

/* ---------- Stickers (recréés en CSS ; remplaçables par des <img>) ---------- */
/* Washi tape : étiquette adhésive inclinée */
.washi{display:inline-block; font-family:var(--font-display); font-size:22px; text-transform:lowercase;
  color:var(--canard-900); background:var(--citron-300); padding:6px 20px; transform:rotate(-2.5deg);
  box-shadow:0 2px 6px rgba(7,54,65,.12); position:relative}
.washi::before,.washi::after{content:""; position:absolute; top:0; bottom:0; width:10px; background:rgba(255,255,255,.35)}
.washi::before{left:0} .washi::after{right:0}
.washi.orange{background:var(--orange-300)} .washi.rose{background:var(--rose-300)}
/* Tampon : cachet encreur incliné */
.tampon{display:inline-grid; place-items:center; text-align:center; font-family:var(--font-tampon);
  text-transform:uppercase; color:var(--orange-600); border:3px solid var(--orange-500); border-radius:8px;
  padding:10px 16px; font-size:20px; line-height:1; transform:rotate(-6deg); opacity:.92;
  letter-spacing:.02em; box-shadow:inset 0 0 0 2px rgba(250,109,4,.25)}
/* Pastille numérotée */
.pastille{display:inline-grid; place-items:center; width:56px; height:56px; border-radius:999px;
  background:var(--orange-500); color:#fff; font-family:var(--font-display); font-size:30px; line-height:1;
  box-shadow:0 6px 14px rgba(250,109,4,.35)}
/* Post-it / note */
.note-it{background:var(--citron-100); box-shadow:0 6px 18px rgba(7,54,65,.12); padding:18px 20px;
  transform:rotate(-1.5deg); font-family:var(--font-script); font-size:18px; color:var(--canard-800)}
/* floating helper */
.floaty{animation:ctcFloat 6s ease-in-out infinite}
@keyframes ctcFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-7px) rotate(-6deg)}}

/* ---------- Une couleur par accompagnement ---------- */
[data-offre="citron"]{--offre:var(--citron-500); --offre-fonce:var(--citron-600); --offre-300:var(--citron-300); --offre-clair:var(--citron-050); --offre-txt:var(--canard-900)}
[data-offre="orange"]{--offre:var(--orange-500); --offre-fonce:var(--orange-600); --offre-300:var(--orange-300); --offre-clair:var(--orange-050); --offre-txt:#fff}
[data-offre="rose"]{--offre:var(--rose-500); --offre-fonce:var(--rose-600); --offre-300:var(--rose-300); --offre-clair:var(--rose-050); --offre-txt:var(--canard-900)}
.bg-offre{background:var(--offre-clair)}
/* Fond de FAQ : la couleur de l'offre, nettement visible mais douce */
.bg-faq{background:color-mix(in srgb, var(--offre) 22%, var(--paper-100))}
.bg-faq .faq-q:not([aria-expanded=true]){background:var(--paper-000)}
.badge.badge--offre{background:var(--offre); color:var(--offre-txt)}
.bg-offre .info-chip .dot{background:var(--offre-fonce)}
.washi.offre{background:var(--offre-300)}
.btn--offre{background:var(--offre); border-color:var(--offre); color:var(--offre-txt); box-shadow:0 2px 5px rgba(7,54,65,.16)}
.btn--offre:hover{background:var(--offre-fonce); border-color:var(--offre-fonce); color:#fff; box-shadow:0 4px 10px rgba(7,54,65,.22)}
.fl-offre{color:var(--offre-fonce)}

/* ---------- Stickers de la bibliothèque, posés sur les pages ---------- */
.has-stk{position:relative}
.stk{position:absolute; z-index:3; pointer-events:none; height:auto; filter:drop-shadow(0 6px 10px rgba(7,54,65,.14))}
@media (max-width:700px){ .stk--hide-m{display:none} }

/* ---------- Bulles de conversation (« tu te reconnais ? ») ---------- */
.chat{display:flex; flex-direction:column; gap:12px; max-width:520px; justify-self:end; width:100%}
.chat .bulle{margin:0; max-width:82%; padding:13px 18px; border-radius:20px 20px 20px 6px; background:var(--paper-100);
  color:var(--canard-800); font-family:var(--font-display); font-size:clamp(19px,1.7vw,23px); line-height:1.15;
  text-transform:lowercase; text-align:left; hyphens:manual; box-shadow:0 6px 16px rgba(0,0,0,.18);
  opacity:0; transform:translateY(12px) scale(.96); transform-origin:left bottom;
  transition:opacity .35s var(--ease), transform .35s var(--ease)}
.chat .bulle:nth-child(2){margin-left:18px} .chat .bulle:nth-child(4){margin-left:10px}
.chat .bulle.vu{opacity:1; transform:none}
.bulle-emma{display:flex; align-items:flex-end; gap:10px; justify-content:flex-end; margin-top:8px}
.bulle-emma img{order:2; width:40px; height:40px; border-radius:999px; object-fit:cover; border:2px solid var(--rose-500);
  opacity:0; transition:opacity .3s var(--ease)}
.bulle-emma.vu img{opacity:1}
.chat .bulle--emma{background:var(--rose-500); color:var(--canard-900); border-radius:20px 20px 6px 20px; transform-origin:right bottom}
.ecrit{display:none; gap:4px; padding:14px 16px; border-radius:20px 20px 6px 20px; background:var(--rose-300)}
.ecrit.on{display:inline-flex}
.ecrit i{width:7px; height:7px; border-radius:999px; background:var(--canard-800); opacity:.5; animation:ctcDots 1s infinite}
.ecrit i:nth-child(2){animation-delay:.15s} .ecrit i:nth-child(3){animation-delay:.3s}
@keyframes ctcDots{0%,60%,100%{transform:none; opacity:.35}30%{transform:translateY(-4px); opacity:.9}}
@media (prefers-reduced-motion:reduce){ .chat .bulle,.bulle-emma img{opacity:1; transform:none} }

/* ---------- Fenêtre « appels découverte fermés » ---------- */
.pop-fond{position:fixed; inset:0; z-index:400; background:rgba(4,34,42,.45); display:grid; place-items:center; padding:16px}
.pop{position:relative; background:var(--paper-100); border-radius:14px; padding:30px 28px 24px; max-width:420px; width:100%;
  text-align:center; box-shadow:0 20px 50px rgba(4,34,42,.3)}
.pop::before{content:""; position:absolute; top:-7px; left:50%; width:70px; height:14px; margin-left:-35px;
  background:var(--citron-500); opacity:.85; border-radius:2px; transform:rotate(-2deg)}
.pop h3{font-size:26px; margin:0 0 10px}
.pop p{text-align:center; margin:0 0 20px; color:var(--canard-700)}

/* ---------- Bandeau cookies ---------- */
.bandeau-cookies{position:fixed; left:16px; right:16px; bottom:16px; z-index:350; max-width:560px; margin:0 auto;
  background:var(--paper-100); border:1px solid rgba(7,54,65,.12); border-radius:12px; padding:16px 18px;
  box-shadow:0 14px 34px rgba(7,54,65,.18); display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center}
.bandeau-cookies__cookie{flex:0 0 auto; width:54px; height:54px; animation:ctcCroque 2.6s ease-in-out infinite}
@keyframes ctcCroque{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.bandeau-cookies strong{display:block; font-family:var(--font-display); font-weight:400; font-size:20px; text-transform:lowercase; margin-bottom:2px}
.bandeau-cookies p{flex:1 1 260px; margin:0; font-size:14.5px; text-align:left; hyphens:manual; color:var(--canard-800)}
.bandeau-cookies__btns{display:flex; gap:8px}

/* ---------- Mini liste qui se coche toute seule (accueil) ---------- */
.coche-liste{position:absolute; z-index:3; left:-96px; bottom:40px; width:250px; padding:14px 16px 10px;
  background:var(--paper-000); border-radius:8px; transform:rotate(-4deg);
  box-shadow:0 10px 24px rgba(7,54,65,.16); font-family:var(--font-script); font-size:16px; line-height:1.2; color:var(--canard-800)}
.coche-liste::before{content:""; position:absolute; top:-7px; left:50%; width:54px; height:14px; margin-left:-27px;
  background:var(--citron-500); opacity:.85; border-radius:2px; transform:rotate(3deg)}
.coche-liste p{display:flex; align-items:flex-start; gap:10px; margin:0 0 8px; text-align:left; hyphens:manual}
.coche-liste .coche-liste__titre{font-family:var(--font-text); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange-600); margin-bottom:8px}
.coche-liste svg{width:20px; height:20px; flex:0 0 auto; fill:none; stroke-linecap:round; stroke-linejoin:round}
.coche-liste rect{stroke:var(--canard-300); stroke-width:1.8}
.coche-liste path{stroke:var(--orange-500); stroke-width:3; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .45s var(--ease)}
.coche-liste p.fait path{stroke-dashoffset:0}
.coche-liste p.fait{animation:ctcRebond .35s var(--ease)}
@keyframes ctcRebond{50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){ .coche-liste path{stroke-dashoffset:0} }
@media (max-width:700px){ .coche-liste{display:none} }

/* Bulle « en train d'écrire » posée sur le polaroïd du contact */
.bulle-ecrit{position:absolute; right:-58px; top:34%; z-index:3; display:flex; gap:8px; padding:20px 26px;
  background:var(--rose-500); border-radius:26px 26px 26px 6px; box-shadow:0 10px 22px rgba(7,54,65,.18);
  animation:ctcFlotte 4s ease-in-out infinite}
.bulle-ecrit i{width:9px; height:9px; border-radius:999px; background:var(--canard-800); opacity:.5; animation:ctcDots 1.1s infinite}
.bulle-ecrit i:nth-child(2){animation-delay:.15s} .bulle-ecrit i:nth-child(3){animation-delay:.3s}
@keyframes ctcFlotte{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,253,248,.93);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--paper-300)}
.site-header .container{display:flex; align-items:center; gap:20px; min-height:70px}
.brand img{height:46px; width:auto; display:block}
.nav{margin-left:auto; display:flex; align-items:center; gap:26px}
.nav a{font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; color:var(--canard-800); padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover,.nav a.active{color:var(--orange-500); border-bottom-color:var(--orange-500)}
/* Le bouton du menu garde son style de bouton, pas celui des liens */
.nav a.btn{padding:8px 16px; font-size:14px; font-weight:600; text-transform:none; letter-spacing:0;
  color:#fff; border:1px solid var(--orange-500)}
.nav a.btn:hover{color:#fff; border-color:var(--orange-600)}
.has-sub{position:relative; padding:22px 0; display:flex; align-items:center}
.has-sub>.submenu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--paper-000); border:1px solid var(--paper-300); border-radius:16px;
  box-shadow:0 14px 34px rgba(7,54,65,.12); padding:10px; min-width:260px; opacity:0; visibility:hidden;
  transition:all .18s var(--ease)}
.has-sub:hover>.submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px)}
.submenu a{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px;
  text-decoration:none; color:var(--canard-800); font-size:15px; font-weight:600; text-transform:none; letter-spacing:0; border:0}
.submenu a:hover{background:var(--citron-050); color:var(--canard-800)}
.submenu__sep{display:block; height:1px; margin:6px 12px; background:var(--paper-300)}
.submenu .dot{width:8px; height:8px; border-radius:999px; flex:0 0 auto}
.header-cart{background:var(--canard-800); border:0; border-radius:999px; width:38px; height:38px;
  display:grid; place-items:center; cursor:pointer; color:var(--paper-100); text-decoration:none}
.header-cart:hover{background:var(--canard-700); color:var(--paper-100)}
.burger{display:none; background:transparent; border:2px solid var(--canard-800); border-radius:999px;
  width:46px; height:46px; place-items:center; cursor:pointer; color:var(--canard-800)}
.mobile-nav{display:none}

/* ---------- Bandeau défilant (marquee) ---------- */
.marquee{background:var(--citron-500); padding:16px 0; overflow:hidden}
.marquee-track{display:flex; width:max-content; animation:ctcMarquee 38s linear infinite}
.marquee-track span{display:flex; align-items:center; gap:18px; padding:0 22px; font-size:16px;
  font-weight:700; color:var(--canard-900); white-space:nowrap}
.marquee-track .dot{width:6px; height:6px; border-radius:999px; background:var(--canard-900); opacity:.45}
@keyframes ctcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Cartes ---------- */
/* Carte papier (comme les .papier-card de BTF) */
.card{background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:12px;
  box-shadow:var(--shadow-card); transition:box-shadow .22s var(--ease), transform .22s var(--ease)}
.card:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px)}
/* Scotch washi orange en haut à gauche : la signature de l'appli */
.scotch{position:relative}
.scotch::before{content:""; position:absolute; top:-7px; left:28px; width:60px; height:14px; z-index:2;
  background:var(--orange-500); opacity:.82; border-radius:2px; transform:rotate(-2deg);
  box-shadow:0 1px 3px rgba(7,54,65,.12)}
.scotch.citron::before{background:var(--citron-500)} .scotch.rose::before{background:var(--rose-500)}
/* Polaroïds détourés : ils ont déjà leur cadre, on ajoute seulement une ombre qui suit leur forme */
img.vignette{border-radius:0; box-shadow:none; filter:drop-shadow(0 10px 16px rgba(7,54,65,.16))}
/* Carte-pochette (accompagnements) */
.pochette{position:relative; margin-top:30px; display:flex; flex-direction:column}
.pochette .corps{flex:1 1 auto}
.pochette .note{margin:0 0 12px; text-align:center; font-size:13.5px}
.pochette .onglet{position:absolute; top:-28px; left:22px; border-radius:10px 10px 0 0;
  padding:7px 20px 12px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.pochette .corps{position:relative; background:var(--paper-000); border:1px solid var(--paper-300);
  border-top:3px solid; border-radius:0 12px 12px 12px; padding:28px;
  box-shadow:var(--shadow-card); transition:box-shadow .22s var(--ease); display:flex; flex-direction:column; height:100%}
.pochette:hover .corps{box-shadow:var(--shadow-card-hover)}
.pochette h3{font-size:30px; margin:0 0 12px; padding-bottom:12px; border-bottom:1px dashed rgba(7,54,65,.14)}
.pochette ul{list-style:none; margin:0 0 24px; padding:0; flex:1 1 auto; display:flex; flex-direction:column; gap:9px}
.pochette li{display:flex; gap:10px; font-size:15.5px; color:var(--canard-700)}
.pochette li .fl{font-weight:700}
.c-citron{border-color:var(--citron-500)!important} .c-orange{border-color:var(--orange-500)!important} .c-rose{border-color:var(--rose-500)!important}
.on-citron{background:var(--citron-500); color:var(--canard-900)} .on-orange{background:var(--orange-500); color:#fff} .on-rose{background:var(--rose-500); color:var(--canard-900)}

/* Renvoi d'astérisque : le signe reste collé au mot, la note s'aligne sur le texte de la liste */
.etoile{font-size:.8em; vertical-align:.3em; line-height:0; margin-left:2px; letter-spacing:0; color:var(--orange-500); font-weight:700}
.note-etoile{margin:16px 0 0; padding-left:calc(1em + 12px); font-size:13px; line-height:1.55; color:var(--ink-500);
  max-width:66ch; text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.note-etoile em{font-style:italic}

/* Panier : le motif du refus, écrit noir sur blanc au-dessus du total */
.panier-avis{margin:0 0 14px; padding:14px 16px; border-radius:12px; background:var(--orange-050);
  border:1.5px dashed var(--orange-300)}
.panier-avis strong{display:block; margin-bottom:4px; font-family:var(--font-display); font-size:20px;
  text-transform:lowercase; color:var(--canard-800)}
.panier-avis p{margin:0 0 10px; font-size:14px; line-height:1.5; color:var(--canard-700); text-align:justify; hyphens:auto}
.panier-avis .btn{width:100%; justify-content:center}
.btn--bloque{opacity:.45; cursor:not-allowed; box-shadow:none}

/* Étiquette de prix : un bristol percé, accroché de travers */
.etiquette-prix{position:relative; display:inline-block; margin:0 0 26px; padding:14px 26px 14px 34px;
  background:var(--paper-000); border:1.5px solid var(--paper-300); border-radius:4px 14px 14px 4px;
  box-shadow:0 8px 18px rgba(7,54,65,.10); transform:rotate(-1.6deg)}
.etiquette-prix__trou{position:absolute; left:12px; top:50%; width:10px; height:10px; margin-top:-5px;
  border-radius:999px; background:var(--paper-200); box-shadow:inset 0 1px 2px rgba(7,54,65,.25)}
.etiquette-prix__montant{margin:0; font-family:var(--font-display); font-size:38px; line-height:1; color:var(--canard-800)}
.etiquette-prix__note{margin:4px 0 0; font-family:var(--font-script); font-size:18px; color:var(--canard-700); text-align:left!important}

/* Choix de session : ce qu'il reste, par session */
.sessions-pick label{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.sess-reste{font-style:normal; font-size:12.5px; font-weight:700; color:var(--citron-600); white-space:nowrap}
.sess-reste--peu{color:var(--orange-600)}
.sess-complet{font-style:normal; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-500)}
.sessions-pick label.sess--complet{opacity:.55; cursor:not-allowed}
.sessions-pick label.sess--complet span{text-decoration:line-through}

/* Sous le bouton d'achat : de petites puces plutôt que des phrases */
.achat__puces{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:12px 0 0; padding:0}
.achat__puces{gap:6px}
.achat__puces .puce{display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px;
  background:var(--paper-000); border:1px solid rgba(7,54,65,.10); font-size:11px; font-weight:600;
  color:var(--canard-700); text-align:left; hyphens:manual; white-space:nowrap}
@media (max-width:640px){ .achat__puces .puce{font-size:10.5px; padding:4px 8px} }
.achat__puces svg{width:13px; height:13px; flex:0 0 auto; fill:none; stroke:var(--citron-600); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

/* Carte article blog */
.post{cursor:pointer; overflow:hidden; border-radius:12px; display:block; text-decoration:none; color:inherit}
.post .bar{height:8px; background:var(--citron-500)}
.post-img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px 12px 0 0}
.post:hover .post-img{filter:saturate(1.1)}
.post .in{padding:26px}
.post .theme{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:12px; padding:5px 11px; border-radius:6px; transform:rotate(-1.5deg);
  background:var(--theme-fond, var(--paper-200)); color:var(--theme-txt, var(--canard-800))}
.post .theme[data-t="organisation"]{--theme-fond:var(--canard-100); --theme-txt:var(--canard-800)}
.post .theme[data-t="comptabilité"]{--theme-fond:var(--orange-100); --theme-txt:var(--orange-600)}
.post .theme[data-t="rentabilité"]{--theme-fond:var(--citron-100); --theme-txt:var(--citron-600)}
.post .theme[data-t="investissement"]{--theme-fond:var(--canard-800); --theme-txt:#fff}
.post .theme[data-t="rédaction"]{--theme-fond:var(--rose-100); --theme-txt:var(--rose-600)}
.post h3{font-size:24px; line-height:1.05; margin:0 0 10px}
.post p{font-size:15.5px; color:var(--canard-700); margin:0 0 16px}
.post .meta{font-size:13px; color:var(--ink-500)}

/* Avis */
.avis{position:relative; background:var(--paper-100); border-radius:12px; padding:28px; box-shadow:var(--shadow-card-hover)}
.avis::before{content:""; position:absolute; top:-7px; left:28px; width:60px; height:14px; background:var(--citron-500); opacity:.85; border-radius:2px; transform:rotate(-2deg)}
.avis .stars{color:var(--orange-500); font-size:17px; letter-spacing:2px; margin-bottom:12px}
.avis p{font-size:16px; color:var(--canard-700); margin:0 0 20px}
.avis .who{display:flex; align-items:center; gap:12px}
.avis .who img{width:44px; height:44px; border-radius:999px; object-fit:cover}
.avis .who .ini{width:44px; height:44px; border-radius:999px; background:var(--orange-100); color:var(--orange-600);
  display:grid; place-items:center; font-family:var(--font-display); font-size:24px; flex:0 0 auto}
.avis .who strong{display:block; font-size:15px; color:var(--canard-800)}
.avis .who span{font-size:13px; color:var(--ink-500)}

/* Mur d'avis */
.avis-mur{columns:3 300px; column-gap:24px}
.avis-mur .avis{break-inside:avoid; margin:0 0 24px}
.avis .titre{display:block; font-weight:700; color:var(--canard-800); margin:0 0 6px}
.avis .date{font-size:13px; color:var(--ink-500)}
/* Étoiles cliquables (ordre inversé pour colorer aussi celles d'avant) */
.etoiles{display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px}
.etoiles input{position:absolute; opacity:0; pointer-events:none}
.field .etoiles label{font-size:30px; line-height:1; color:var(--paper-400); cursor:pointer; text-transform:none; margin:0; letter-spacing:0}
.etoiles input:checked ~ label, .etoiles label:hover, .etoiles label:hover ~ label{color:var(--orange-500)!important}
.etoiles input:focus-visible + label{outline:2px solid var(--orange-500); border-radius:4px}

/* Calendrier des sessions : chaque session surlignée au feutre */
.calendrier{position:relative; background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:12px;
  box-shadow:var(--shadow-card); padding:22px 24px 16px; max-width:980px}
.cal-mois{display:grid; margin-left:170px; border-bottom:1px dashed rgba(7,54,65,.18); padding-bottom:8px; margin-bottom:6px}
.cal-mois span{font-family:var(--font-display); font-size:17px; color:var(--canard-800); text-transform:lowercase;
  text-align:center; padding:0 4px; white-space:nowrap; overflow:hidden}
.cal-ligne{display:grid; grid-template-columns:170px 1fr; align-items:center; min-height:64px; border-bottom:1px dashed rgba(7,54,65,.10)}
.cal-nom{font-family:var(--font-display); font-size:22px; line-height:1; color:var(--canard-800); text-decoration:none; text-transform:lowercase}
.cal-nom:hover{color:var(--offre-fonce)}
.cal-piste{position:relative; height:64px;
  background-image:repeating-linear-gradient(90deg, transparent 0 calc(100%/var(--n) - 1px), rgba(7,54,65,.08) calc(100%/var(--n) - 1px) calc(100%/var(--n)))}
.cal-feutre{position:absolute; top:14px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--offre-300); border-radius:3px 12px 4px 10px / 10px 4px 12px 3px; transform:rotate(-.8deg); white-space:nowrap; overflow:visible}
.cal-feutre::before{content:""; position:absolute; inset:5px -4px 3px -3px; background:var(--offre); opacity:.35; border-radius:40% 8px 50% 6px; z-index:-0}
.cal-feutre b{position:relative; font-size:14px; font-weight:700; color:var(--canard-900)}
.cal-annee{margin:10px 0 0; text-align:right; font-family:var(--font-script); font-size:20px; color:var(--canard-700)}
@media (max-width:760px){
  .calendrier{overflow-x:auto; position:relative; scroll-snap-type:x proximity}
  .cal-mois,.cal-ligne{min-width:760px}
  /* le bord droit s'estompe : on comprend qu'il y a une suite */
  .cal-cadre{position:relative}
  .cal-cadre::after{content:""; position:absolute; top:0; bottom:0; right:0; width:46px; pointer-events:none;
    background:linear-gradient(to left, var(--paper-100), transparent); border-radius:0 12px 12px 0}
  .cal-glisse{display:flex; align-items:center; gap:6px; margin:6px 2px 0; font-size:12px; color:var(--ink-500)}
  .cal-glisse b{font-size:14px; animation:ctcGlisse 1.6s ease-in-out infinite}
  @keyframes ctcGlisse{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  .cal-cadre--vu::after{opacity:0; transition:opacity .3s}
  .cal-cadre--vu .cal-glisse{opacity:0; transition:opacity .3s}
  .cal-mois{margin-left:120px} .cal-ligne{grid-template-columns:120px 1fr} .cal-nom{font-size:18px}
}

/* Événements */
.evts{display:flex; flex-direction:column; gap:18px; max-width:900px}
.evt{display:grid; grid-template-columns:96px 1fr auto; gap:22px; align-items:center; padding:22px 24px}
.evt .jour{text-align:center; border-right:1px dashed rgba(7,54,65,.18); padding-right:18px}
.evt .jour b{display:block; font-family:var(--font-display); font-size:44px; line-height:1; color:var(--orange-500)}
.evt .jour span{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--canard-700)}
.evt h3{font-size:26px; margin:0 0 6px}
.evt .meta{font-size:14px; color:var(--ink-500); margin:0 0 8px}
.evt p{margin:0}
.evt-vide{padding:28px; max-width:620px}
@media (max-width:700px){ .evt{grid-template-columns:1fr} .evt .jour{border:0; padding:0; text-align:left} }

/* Compteurs de l'accueil : fiches papier, chiffres qui montent */
.compteurs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:6px 0 18px}
.compteur{position:relative; background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:12px;
  padding:18px 16px 14px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:6px}
.compteur::before{content:""; position:absolute; top:-6px; left:18px; width:44px; height:12px; background:var(--offre); opacity:.85; border-radius:2px; transform:rotate(-3deg)}
.compteur__num{font-family:var(--font-display); font-size:clamp(36px,3.4vw,48px); line-height:1; color:var(--canard-800)}
.compteur__num b{font-weight:inherit; font-variant-numeric:tabular-nums}
.compteur__lab{font-size:14px; line-height:1.3; color:var(--canard-700)}
.metiers{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.metiers li{font-size:13px; font-weight:600; color:var(--canard-700); background:var(--canard-050); border-radius:999px; padding:4px 11px}
@media (max-width:560px){ .compteurs{grid-template-columns:1fr} }

/* Page des avis : bulles de message, couleur qui tourne, apparition en cascade */
.avis--bulle{background:var(--paper-000); border-radius:22px 22px 22px 6px; box-shadow:var(--shadow-card); padding:24px 24px 20px;
  border-top:4px solid var(--offre); animation:ctcBulle .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(var(--i) * 70ms)}
.avis--bulle::before{display:none}
.avis--bulle:nth-child(3n+2){transform:rotate(.6deg)} .avis--bulle:nth-child(3n){transform:rotate(-.5deg)}
.avis--bulle .titre{font-family:var(--font-display); font-weight:400; font-size:21px; line-height:1.1; text-transform:lowercase; margin-bottom:8px}
.avis--bulle p{text-align:left; hyphens:manual; font-size:15.5px}
.avis--bulle .who .ini{background:var(--offre-clair); color:var(--offre-fonce)}

/* Stats */
.stats{display:flex; flex-wrap:wrap; gap:26px}
.stats .num{display:block; font-family:var(--font-display); font-size:38px; line-height:1; color:var(--orange-500)}
.stats span.lab{font-size:14px; color:var(--canard-700)}

/* Étiquettes "chantiers" */
.chantier{font-size:15px; font-weight:700; color:var(--canard-800); background:var(--paper-000);
  border:1px solid var(--paper-300); border-radius:999px; padding:11px 20px; display:inline-block}

/* Fiche produit */
.produit-media{position:relative; background:var(--paper-cream); border-radius:12px;
  padding:clamp(28px,4vw,52px); display:grid; place-items:center}
.produit-media img{max-width:88%}
.badge{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 15px; border-radius:999px; white-space:nowrap; color:#fff}
.badge.orange{background:var(--orange-500)} .badge.rose{background:var(--rose-500); color:var(--canard-900)}
.prix{font-family:var(--font-display); font-size:52px; line-height:1; color:var(--canard-800); white-space:nowrap}
.qty{display:inline-flex; align-items:center; border:1px solid var(--canard-200); border-radius:999px; overflow:hidden; background:var(--paper-000)}
.qty button{width:46px; height:48px; background:transparent; border:0; cursor:pointer; font-size:20px; color:var(--canard-800)}
.qty span{min-width:32px; text-align:center; font-size:17px; font-weight:700}
.encart{background:var(--citron-050); border-radius:16px; padding:20px; box-shadow:inset 0 0 0 1px rgba(7,54,65,.06)}

/* Boutique : photos contenues dans la zone image, choix de session */
.card > a img.vignette, .card > div img.vignette{max-height:180px; width:auto; max-width:90%}
.session-pick{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--orange-600)}
.session-pick select{flex:1; font-family:var(--font-text); font-size:14.5px; font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--canard-800); background-color:var(--paper-100); border:1px solid var(--canard-200); border-radius:10px; padding:8px 12px; cursor:pointer}

/* Cartes d'offre (boutique) : même gabarit pour les trois, couleur de l'offre */
.carte-offre{display:flex; flex-direction:column; overflow:visible; position:relative}
.carte-offre::before{content:""; position:absolute; top:-7px; left:50%; width:64px; height:14px; margin-left:-32px; z-index:2;
  background:var(--offre); opacity:.85; border-radius:2px; transform:rotate(-2deg)}
.carte-offre__media{position:relative; display:grid; place-items:center; height:220px; padding:18px;
  background:var(--offre-clair); border-radius:12px 12px 0 0; text-decoration:none}
.carte-offre__media .badge{position:absolute; top:14px; left:14px; z-index:1}
.carte-offre__media--photo{display:block; padding:0; overflow:hidden}
.carte-offre__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; max-width:none}
.carte-offre__corps{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.carte-offre__corps h3{font-size:28px; margin:0 0 10px}
.carte-offre__texte{font-size:15.5px; margin:0 0 16px; flex:1}
.carte-offre__intro{font-size:15.5px; margin:0 0 14px}
.carte-offre__points{gap:9px; margin:0 0 20px; flex:1 1 auto}
.carte-offre__points li{font-size:15px}
.carte-offre__achat{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px}
.carte-offre__achat .prix{font-size:34px}
.sessions-ferme{margin:0 0 12px; font-size:14px; font-weight:700; color:var(--canard-700); min-height:74px; display:flex; align-items:flex-end}
/* Choix de session en pastilles */
.sessions-pick{display:flex; flex-direction:column; gap:8px; margin:0 0 14px}
.sessions-pick input{position:absolute; opacity:0; pointer-events:none}
.sessions-pick label{display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:10px; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--canard-800); background:var(--paper-100); border:1px dashed rgba(7,54,65,.22);
  transition:background .15s var(--ease), border-color .15s var(--ease)}
.sessions-pick label::before{content:""; width:14px; height:14px; border-radius:999px; border:2px solid var(--canard-300); flex:0 0 auto}
.sessions-pick label:hover{border-color:var(--canard-800)}
.sessions-pick input:checked + label{background:var(--offre-clair); border:1px solid var(--offre-fonce)}
.sessions-pick input:checked + label::before{border-color:var(--offre-fonce); background:var(--offre); box-shadow:inset 0 0 0 2px #fff}
.sessions-pick input:focus-visible + label{box-shadow:0 0 0 3px var(--orange-100), 0 0 0 4px var(--orange-500)}
.sessions-pick--centre{max-width:420px; margin:0 auto 16px}

/* Pack deux accompagnements */
[data-offre="pack"]{--offre:var(--canard-800); --offre-fonce:var(--canard-900); --offre-300:var(--canard-200); --offre-clair:var(--canard-050); --offre-txt:#fff}
.carte-pack{margin-top:var(--bloc)}
.carte-pack .carte-offre__corps{display:grid; grid-template-columns:1.1fr 1fr 1fr auto; gap:18px 26px; align-items:start; padding:26px}
.carte-pack h3{font-size:30px; margin:0 0 8px}
.carte-pack .sous{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; color:var(--canard-700)}
.carte-pack .prix-barre{font-size:16px; color:var(--ink-500); text-decoration:line-through; margin-right:8px}
.carte-pack .fin{display:flex; flex-direction:column; align-items:flex-end; gap:10px; align-self:center}
@media (max-width:980px){ .carte-pack .carte-offre__corps{grid-template-columns:1fr} .carte-pack .fin{align-items:flex-start} }

/* Vignettes du panier : la photo de l'offre, recadrée */
.panier-vignette{width:66px; height:66px; flex:0 0 auto; border-radius:10px; overflow:hidden; display:flex; box-shadow:0 1px 3px rgba(7,54,65,.12)}
.panier-vignette img{width:100%; height:100%; object-fit:cover; display:block; max-width:none}
.panier-vignette--duo img{width:50%}

/* Tableau comparatif des accompagnements */
.cmp-cadre{overflow-x:auto; background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:14px; box-shadow:var(--shadow-card)}
.cmp{width:100%; min-width:680px; border-collapse:collapse; font-size:15px}
.cmp th,.cmp td{padding:8px 16px; text-align:center; border-bottom:1px dashed rgba(7,54,65,.10)}
.cmp tbody th[scope=row],.cmp tfoot th{text-align:left; font-weight:500; color:var(--canard-700); padding-left:28px}
.cmp thead th{padding:18px 12px 14px; background:var(--offre-clair); border-bottom:3px solid var(--offre); vertical-align:bottom; width:19%}
.cmp thead th span{display:block; font-family:var(--font-display); font-size:22px; line-height:1; color:var(--canard-800); text-transform:lowercase}
.cmp thead th small{display:block; margin-top:4px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--canard-700)}
.cmp .cmp-theme th{text-align:left; padding:16px 16px 8px; font-family:var(--font-display); font-size:19px; font-weight:400;
  color:var(--canard-800); text-transform:lowercase; background:var(--paper-100); border-bottom:1px solid rgba(7,54,65,.12)}
.cmp tbody tr:not(.cmp-theme):hover{background:var(--paper-100)}
.cmp-coche{width:22px; height:22px; fill:none; stroke:var(--offre-fonce); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
.cmp-vide{display:inline-block; width:10px; height:2px; background:rgba(7,54,65,.15); border-radius:2px; vertical-align:middle}
.cmp tfoot th,.cmp tfoot td{border-bottom:0; padding-top:16px; padding-bottom:16px; background:var(--paper-100)}
.cmp tfoot .btn{white-space:nowrap}

/* Parcours des phases : un trait se dessine, les étapes arrivent une à une */
.etapes{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--bloc); padding-top:8px}
.etapes__trait{position:absolute; left:4%; right:4%; top:44px; width:92%; height:20px; z-index:0; overflow:visible}
.etapes__trait path{fill:none; stroke:var(--offre, var(--orange-500)); stroke-width:3; stroke-dasharray:1 9; stroke-linecap:round; opacity:.6}
.etapes .etape{position:relative; z-index:1; padding:26px; opacity:0; transform:translateY(22px) rotate(-1deg);
  transition:opacity .5s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1), box-shadow .22s var(--ease)}
.etapes .etape.vue{opacity:1; transform:none}
.etapes .etape p{text-align:left; hyphens:manual}
.etapes .pastille{margin-bottom:14px; transform:scale(0); transition:transform .45s cubic-bezier(.34,1.8,.64,1) .15s; position:relative}
.etapes .etape.vue .pastille{transform:scale(1)}
.etapes .etape.vue .pastille::after{content:""; position:absolute; inset:0; border-radius:inherit; border:3px solid var(--orange-500);
  animation:ctcOnde .9s ease-out .35s both}
@keyframes ctcOnde{from{transform:scale(1); opacity:.7}to{transform:scale(1.7); opacity:0}}
.etapes .etape:hover{transform:translateY(-4px) rotate(.4deg)}
@media (max-width:760px){ .etapes__trait{display:none} }

/* Sujets abordés : étiquettes qui arrivent en cascade */
.sujets{margin:var(--bloc) 0 0}
.sujets__titre{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-600); margin:0 0 10px}
.sujets ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.sujets li{font-size:14.5px; font-weight:600; color:var(--canard-800); background:var(--paper-000); border:1px solid rgba(7,54,65,.12);
  border-radius:999px; padding:6px 13px; opacity:0; transform:translateY(8px) scale(.92);
  transition:opacity .35s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1), background .15s, color .15s}
.sujets li.vue{opacity:1; transform:none}
.sujets li:hover{background:var(--canard-800); color:#fff}
@media (prefers-reduced-motion:reduce){ .etapes .etape,.sujets li{opacity:1; transform:none} .etapes .pastille{transform:none} }

/* Bloc d'achat des pages d'offre : ce qu'on reçoit à gauche, la session et le paiement à droite */
.achat{position:relative; display:grid; grid-template-columns:1.1fr 1fr; background:var(--paper-000);
  border:1px solid rgba(7,54,65,.10); border-radius:16px; box-shadow:var(--shadow-card-hover); overflow:hidden}
.achat::before{content:""; position:absolute; top:-7px; left:40px; width:70px; height:14px; z-index:2;
  background:var(--offre); opacity:.85; border-radius:2px; transform:rotate(-2deg)}
.achat__gauche{padding:clamp(26px,3.4vw,44px)}
.achat__points{gap:12px}
.achat__points li{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.achat__droite{padding:clamp(26px,3.4vw,44px); background:var(--offre-clair); display:flex; flex-direction:column; gap:10px}
.achat__etape{margin:0; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--canard-700)}
.achat__droite .sessions-pick{margin:0 0 10px}
.achat__prix{display:flex; align-items:baseline; gap:10px; margin:0 0 4px}
.achat__prix .prix{font-size:48px}
.achat__prix .muted{font-size:14px}
.achat__appli{margin:0 0 12px; padding:10px 12px; border-radius:10px; background:var(--paper-000); font-size:13.5px; line-height:1.45; color:var(--canard-700); text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.achat__appli strong{color:var(--canard-800)}
.achat__rassure{margin:4px 0 0; font-size:13px; color:var(--ink-500); text-align:center}
@media (max-width:820px){ .achat{grid-template-columns:1fr} }

.entete{margin:0 0 var(--bloc)}
.entete > :last-child{margin-bottom:0!important}

/* Visuel des en-têtes d'offre : même hauteur sur les trois pages, quel que soit le format de la photo */
.hero-visuel{justify-self:center; height:clamp(300px,32vw,440px); display:flex; align-items:center; justify-content:center}
.hero-visuel img{height:100%; width:auto; max-width:100%; object-fit:contain}

/* Six chantiers : tuiles numérotées qui arrivent en cascade, icône qui se dessine */
.chantiers{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bloc); counter-reset:ch}
.chantier-tuile{position:relative; background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:14px;
  padding:26px 24px 22px; box-shadow:var(--shadow-card); overflow:hidden;
  opacity:0; transform:translateY(26px) scale(.96);
  transition:opacity .5s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1), box-shadow .25s var(--ease)}
.chantiers.vu .chantier-tuile{opacity:1; transform:none; transition-delay:calc(var(--i) * 110ms)}
.chantier-tuile::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:100%; background:var(--citron-500);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.chantier-tuile:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-6px) rotate(-.6deg)}
.chantier-tuile:hover::after{transform:scaleX(1)}
.chantier-tuile__num{position:absolute; top:10px; right:16px; font-family:var(--font-display); font-size:64px; line-height:1;
  color:var(--citron-100); transition:color .25s var(--ease), transform .35s var(--ease)}
.chantier-tuile:hover .chantier-tuile__num{color:var(--citron-300); transform:scale(1.08) rotate(4deg)}
.chantier-tuile__ic{position:relative; width:34px; height:34px; fill:none; stroke:var(--canard-800); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; stroke-dasharray:120; stroke-dashoffset:120}
.chantiers.vu .chantier-tuile__ic{stroke-dashoffset:0; transition:stroke-dashoffset 1.1s ease-out calc(var(--i) * 110ms + .25s)}
.chantier-tuile:hover .chantier-tuile__ic{stroke:var(--orange-500)}
.chantier-tuile h3{position:relative; font-size:26px; margin:0 0 6px}
.chantier-tuile p{position:relative; margin:0; font-size:15px; text-align:left; hyphens:manual; color:var(--canard-700)}
@media (max-width:900px){ .chantiers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .chantiers{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .chantier-tuile{opacity:1; transform:none} .chantier-tuile__ic{stroke-dashoffset:0} }

/* Boost Ton Cab : les modules se réordonnent, on clique pour choisir sa priorité */
.ordre{background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:16px; box-shadow:var(--shadow-card-hover); padding:22px; position:relative}
.ordre::before{content:""; position:absolute; top:-7px; left:36px; width:64px; height:14px; background:var(--citron-500); opacity:.85; border-radius:2px; transform:rotate(-2deg)}
.ordre__liste{list-style:none; margin:0; padding:0; position:relative; height:calc(6 * 56px)}
.ordre__item{position:absolute; left:0; right:0; height:48px; display:flex; align-items:center; gap:14px; padding:0 16px;
  background:var(--paper-100); border:1px solid rgba(7,54,65,.12); border-radius:12px; cursor:pointer;
  transition:transform .6s cubic-bezier(.34,1.3,.64,1), background .2s, box-shadow .2s, border-color .2s}
.ordre__item:hover{border-color:var(--canard-800); box-shadow:0 6px 16px rgba(7,54,65,.12)}
.ordre__item.premier{background:var(--citron-050); border-color:var(--citron-500)}
.ordre__rang{width:28px; height:28px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--canard-800); color:#fff; font-family:var(--font-display); font-size:16px}
.ordre__item.premier .ordre__rang{background:var(--citron-500); color:var(--canard-900)}
.ordre__nom{font-family:var(--font-display); font-size:21px; color:var(--canard-800); text-transform:lowercase; flex:1}
.ordre__nom em{margin-left:12px; font-family:var(--font-text); font-style:italic; font-size:14.5px; text-transform:none; color:var(--ink-500)}
.ordre__poignee{width:16px; height:10px; background:repeating-linear-gradient(var(--canard-300) 0 2px, transparent 2px 4px); opacity:.7}
.ordre__bilan{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:14px; padding-top:16px;
  border-top:1px dashed rgba(7,54,65,.15); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--canard-700)}
.ordre__bilan strong{color:var(--canard-800)}
.ordre__barre{height:10px; background:var(--paper-200); border-radius:999px; overflow:hidden}
.ordre__barre i{display:block; height:100%; width:0; background:var(--citron-500); border-radius:999px; transition:width 2.4s ease-out}
.ordre.vu .ordre__barre i{width:100%}
@media (prefers-reduced-motion:reduce){ .ordre__item{transition:none} }

/* « Comment ça se passe » : tuiles qui arrivent en basculant, icône qui bouge au survol */
.format{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--bloc); perspective:900px}
.format-tuile{position:relative; background:var(--offre-clair, var(--paper-000)); border-radius:16px; padding:24px 22px;
  border:1px solid rgba(7,54,65,.08); opacity:0; transform:rotateX(-35deg) translateY(20px); transform-origin:top;
  transition:opacity .5s var(--ease), transform .7s cubic-bezier(.34,1.56,.64,1), box-shadow .25s}
.format.vu .format-tuile{opacity:1; transform:none; transition-delay:calc(var(--i) * 120ms)}
.format-tuile svg{width:42px; height:42px; padding:9px; border-radius:12px; background:var(--offre, var(--orange-500)); stroke:var(--offre-txt, #fff);
  fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-bottom:16px; transition:transform .4s cubic-bezier(.34,1.8,.64,1)}
.format-tuile:hover{box-shadow:var(--shadow-card-hover)}
.format-tuile:hover svg{transform:rotate(-10deg) scale(1.12)}
.format-tuile h3{font-size:26px; margin:0 0 6px}
.format-tuile p{margin:0; font-size:15px; text-align:left; hyphens:manual; color:var(--canard-700)}
.format-pourqui{margin:var(--bloc) 0 0; font-size:15.5px; color:var(--canard-700); text-align:left}
@media (prefers-reduced-motion:reduce){ .format-tuile{opacity:1; transform:none} }

/* FAQ en conversation : la question à gauche, la réponse d'Emma à droite */
.faq-chat{display:flex; flex-direction:column; gap:10px}
.faq-fil{display:flex; flex-direction:column; gap:8px}
.bg-offre .faq-q:not([aria-expanded=true]){background:var(--paper-000)}
.faq-q{align-self:flex-start; max-width:62%; text-align:left; cursor:pointer; border:0; font-family:var(--font-display);
  font-size:clamp(18px,1.6vw,21px); line-height:1.2; text-transform:lowercase; color:var(--canard-800); background:var(--paper-000);
  padding:12px 18px; border-radius:20px 20px 20px 6px; box-shadow:var(--shadow-card); transition:transform .2s var(--ease), background .2s}
.faq-q:hover{transform:translateX(4px)}
.faq-q[aria-expanded=true]{background:var(--canard-800); color:#fff}
.faq-r{display:none; align-self:flex-end; max-width:62%; align-items:flex-end; gap:10px; flex-direction:row-reverse}
.faq-fil.ouvert .faq-r{display:flex}
.faq-r img{width:34px; height:34px; border-radius:999px; object-fit:cover; border:2px solid var(--rose-500); flex:0 0 auto}
.faq-r p{margin:0; background:var(--rose-300); color:var(--canard-900); padding:12px 16px; border-radius:20px 20px 6px 20px;
  font-size:15.5px; line-height:1.5; text-align:justify; hyphens:auto; -webkit-hyphens:auto; animation:ctcBulle .35s cubic-bezier(.34,1.56,.64,1)}
.faq-r .ecrit{background:var(--rose-300)}
.faq-r.tape p{display:none}
.faq-r:not(.tape) .ecrit{display:none!important}
.faq-r.tape .ecrit{display:inline-flex}
@keyframes ctcBulle{from{opacity:0; transform:translateY(8px) scale(.95)}to{opacity:1; transform:none}}

/* Agenda de l'appel découverte : les créneaux se remplissent, puis un tampon « complet » tombe */
.agenda{position:relative; justify-self:center; width:min(280px,100%); background:var(--paper-000); border-radius:16px;
  box-shadow:var(--shadow-card-hover); padding:20px 20px 24px; transform:rotate(2deg)}
.agenda::before{content:""; position:absolute; top:-7px; left:50%; width:64px; height:14px; margin-left:-32px; background:var(--citron-500); opacity:.9; border-radius:2px; transform:rotate(-3deg)}
.agenda__tete{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:12px; margin-bottom:14px; border-bottom:1px dashed rgba(7,54,65,.18)}
.agenda__tete span{font-family:var(--font-display); font-size:19px; color:var(--canard-800); text-transform:lowercase}
.agenda__tete b{font-family:var(--font-display); font-weight:400; font-size:23px; color:var(--citron-600)}
.agenda__grille{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.agenda__grille i{aspect-ratio:1; border-radius:6px; background:var(--paper-200); transition:background .3s var(--ease), transform .3s cubic-bezier(.34,1.8,.64,1)}
/* Les créneaux se ferment un à un : la case se barre */
.agenda__grille i{position:relative}
.agenda__grille i::after{content:""; position:absolute; left:18%; right:18%; top:50%; height:2px; background:var(--canard-300); transform:rotate(-40deg) scaleX(0); transition:transform .25s var(--ease)}
.agenda__grille i.pris{background:var(--paper-300)}
.agenda__grille i.pris::after{transform:rotate(-40deg) scaleX(1)}
.agenda__tampon{position:absolute; left:50%; top:56%; padding:8px 16px; border:3px solid var(--orange-500); border-radius:8px;
  font-family:var(--font-tampon); font-size:15px; text-transform:uppercase; color:var(--orange-600); background:rgba(255,253,248,.88);
  white-space:nowrap; opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(2.2); transition:opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1)}
.agenda.fini .agenda__tampon{opacity:1; transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
@media (prefers-reduced-motion:reduce){ .agenda__tampon{opacity:1; transform:translate(-50%,-50%) rotate(-12deg)} }

/* Instagram : un téléphone avec un post, des cœurs qui s'envolent */
.tel{position:relative; justify-self:center; display:block; width:min(300px,100%); padding:12px; border-radius:40px; background:var(--canard-900);
  box-shadow:0 24px 50px rgba(7,54,65,.28); transform:rotate(3deg); transition:transform .4s cubic-bezier(.34,1.56,.64,1); text-decoration:none}
.tel:hover{transform:rotate(0) translateY(-6px)}
.tel__ecran{display:block; background:#fff; border-radius:30px; overflow:hidden; color:#111}
.tel__entete{display:flex; align-items:center; gap:8px; padding:14px 14px 10px; font-size:13px}
.tel__entete img{width:30px; height:30px; border-radius:999px; object-fit:cover; border:2px solid var(--orange-500)}
.tel__entete b{flex:1; font-weight:700}
.tel__entete i{font-style:normal; font-weight:700; color:#fff; background:var(--orange-500); padding:4px 10px; border-radius:8px}
.tel__photo{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--paper-200)}
.tel__actions{display:flex; gap:14px; padding:10px 14px 4px}
.tel__actions svg{width:24px; height:24px; fill:none; stroke:#111; stroke-width:2; stroke-linejoin:round}
.tel__coeur{animation:ctcBat 1.6s ease-in-out infinite; transform-origin:center}
.tel:hover .tel__coeur{fill:#e8385a; stroke:#e8385a}
.tel__legende{display:block; padding:4px 14px 16px; font-size:13px}
@keyframes ctcBat{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.2)}}
.tel__coeurs{position:absolute; inset:0; pointer-events:none}
.tel__coeurs i{position:absolute; bottom:22%; width:22px; height:22px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%23fa6d04'/%3E%3C/svg%3E");
  animation:ctcEnvol 2.4s ease-out forwards}
@keyframes ctcEnvol{0%{opacity:0; transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0; transform:translate(var(--dx),-220px) scale(1.2) rotate(var(--r))}}

/* Newsletter : une enveloppe à remplir ; la carte −10 % dépasse, et l'enveloppe part au bureau de poste à l'envoi */
.lettre{position:relative; justify-self:center; width:min(500px,100%); padding-top:104px; perspective:900px}
.lettre__carte{position:absolute; top:0; left:12%; width:64%; min-height:96px; padding:14px 18px 16px; background:var(--paper-000); border-radius:6px;
  box-shadow:0 6px 14px rgba(7,54,65,.12); transform:rotate(-4deg); transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.lettre:hover .lettre__carte{transform:rotate(-2deg) translateY(-14px)}
.lettre__code{display:block; font-family:var(--font-display); font-size:36px; line-height:1; color:var(--orange-500)}
.lettre__mot{display:block; margin-top:4px; font-family:var(--font-script); font-size:16px; color:var(--canard-700)}
.lettre__enveloppe{position:relative; z-index:1; padding:26px 26px 20px; background:#f4e3c4; border-radius:6px;
  background-image:linear-gradient(135deg, rgba(255,255,255,.25), transparent 40%);
  box-shadow:0 18px 36px rgba(7,54,65,.18); transform:rotate(1deg); transition:transform .5s var(--ease)}
.lettre__enveloppe::before{content:""; position:absolute; left:0; right:0; top:0; height:14px;
  background:repeating-linear-gradient(90deg, var(--orange-500) 0 18px, transparent 18px 26px, var(--canard-800) 26px 44px, transparent 44px 52px);
  opacity:.8; border-radius:6px 6px 0 0}
.lettre__timbre{position:absolute; top:26px; right:22px; width:78px; padding:8px 6px; text-align:center; background:var(--paper-000);
  outline:2px dashed var(--citron-500); outline-offset:-5px; transform:rotate(4deg); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--canard-700)}
.lettre__timbre b{display:block; font-family:var(--font-display); font-weight:400; font-size:24px; letter-spacing:0; color:var(--orange-600)}
.lettre__cachet{position:absolute; top:38px; right:78px; padding:4px 10px; border:2px solid var(--canard-700); border-radius:999px;
  font-family:var(--font-tampon); font-size:13px; text-transform:uppercase; color:var(--canard-700); opacity:0; transform:rotate(-14deg) scale(2)}
.lettre__de{margin:14px 0 18px; font-family:var(--font-script); font-size:19px; color:var(--canard-700)}
.lettre__ligne{display:flex; align-items:baseline; gap:8px; width:72%; margin:0 0 0 20%; padding:4px 0; border-bottom:1.5px solid rgba(7,54,65,.35)}
.lettre__ligne span{font-family:var(--font-script); font-size:18px; color:var(--canard-700)}
.lettre__ligne input{flex:1; min-width:0; border:0; outline:none; background:transparent; font-family:var(--font-script); font-size:20px; color:var(--canard-900)}
.lettre__ligne input::placeholder{color:rgba(7,54,65,.4)}
.lettre__ligne--vide{height:30px}
.lettre__pied{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px}
.lettre__pied [data-msg]{margin:0; font-size:13px}
/* envoi : le cachet tombe, la carte rentre, l'enveloppe s'envole */
.lettre.envoye .lettre__cachet{animation:ctcCachet .4s cubic-bezier(.3,1.6,.5,1) forwards}
.lettre__msg{margin:6px 0 0; font-size:13px; font-weight:600; color:var(--orange-600)}
/* après le départ de l'enveloppe, la carte descend à sa place avec le message de confirmation */
.lettre.envoye .lettre__carte{transform:translateY(120px) rotate(-2deg); transition:transform .7s cubic-bezier(.34,1.56,.64,1) 1.6s; z-index:2}
.lettre.envoye .lettre__enveloppe{animation:ctcPoste 1.1s ease-in .7s forwards}
@keyframes ctcCachet{to{opacity:.9; transform:rotate(-14deg) scale(1)}}
@keyframes ctcPoste{to{transform:translate(120px,-60px) rotate(12deg) scale(.6); opacity:0}}
@media (max-width:760px){ .lettre__ligne{width:100%; margin-left:0} .lettre__timbre{width:64px} }

/* ===== Blocs restaurés (19 sept., 23h) ===== */

/* Comparatif replié par thème, un seul ouvert à la fois */
.cmp-groupe tr:not(.cmp-theme){display:none}
.cmp-groupe.ouvert tr:not(.cmp-theme){display:table-row; animation:ctcBulle .3s var(--ease)}
.cmp .cmp-theme{cursor:pointer}
.cmp .cmp-theme th{white-space:nowrap}
.cmp .cmp-theme th,.cmp .cmp-theme td{vertical-align:middle; height:58px; border-bottom:1px solid rgba(7,54,65,.12)}
.cmp .cmp-theme th em{float:right; margin-top:5px; font-style:normal; font-family:var(--font-text); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500)}
.cmp .cmp-theme td{background:var(--paper-100)}
.cmp .cmp-theme td small{position:absolute; margin:22px 0 0 -22px; font-size:11px; color:var(--ink-500)}
.cmp .cmp-theme:hover th,.cmp .cmp-theme:hover td{background:var(--paper-200)}
.cmp-chevron{display:inline-block; vertical-align:middle; margin:0 12px 3px 2px; width:9px; height:9px; border-right:2.5px solid var(--orange-500); border-bottom:2.5px solid var(--orange-500); transform:rotate(-45deg); transition:transform .25s var(--ease)}
.cmp-groupe.ouvert .cmp-chevron{transform:rotate(45deg)}
.cmp-groupe.ouvert .cmp-theme td{opacity:.35}
.bg-offre .info-chip{background:var(--paper-000); box-shadow:0 2px 8px rgba(7,54,65,.08)}

/* Avant / après */
.avant-apres{position:relative; background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:16px; box-shadow:var(--shadow-card-hover); padding:22px 24px}
.avant-apres::before{content:""; position:absolute; top:-7px; left:36px; width:64px; height:14px; background:var(--offre); opacity:.85; border-radius:2px; transform:rotate(-2deg)}
.avant-apres__titre{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500)}
.avant-apres__titre span:last-child{color:var(--offre-fonce)}
.avant-apres ul{list-style:none; margin:0; padding:0}
.avant-apres li{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:center; padding:14px 0; border-top:1px dashed rgba(7,54,65,.12)}
.avant-apres li,.avant-apres li *{text-align:left; hyphens:manual; -webkit-hyphens:manual}
.avant-apres s{justify-self:start; text-decoration:none; font-size:15px; line-height:1.45; color:var(--ink-500)}
.avant-apres .barre{background:linear-gradient(var(--offre-fonce),var(--offre-fonce)) no-repeat 0 60% / 0% 2.5px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .6s var(--ease) calc(var(--i) * .7s + .2s)}
.avant-apres li > span{font-family:var(--font-display); font-size:19px; line-height:1.1; color:var(--canard-800); text-transform:lowercase;
  opacity:0; transform:translateX(-10px); transition:opacity .4s var(--ease) calc(var(--i) * .7s + .6s), transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .7s + .6s)}
.avant-apres.vu .barre{background-size:100% 2.5px}
.avant-apres.vu li > span{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .avant-apres .barre{background-size:100% 2.5px} .avant-apres li > span{opacity:1; transform:none} }

/* Programme en phases */
.phases{background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:18px; box-shadow:var(--shadow-card-hover); overflow:hidden}
.phases__onglets{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border-bottom:1px solid rgba(7,54,65,.10)}
.phases__onglet{position:relative; display:flex; align-items:center; gap:12px; padding:18px 20px 22px; border:0; background:transparent; cursor:pointer; text-align:left; font:inherit; color:var(--ink-500); transition:background .2s, color .2s}
.phases__onglet + .phases__onglet{border-left:1px dashed rgba(7,54,65,.12)}
.phases__onglet:hover{background:var(--paper-100)}
.phases__onglet[aria-selected=true]{color:var(--canard-800); background:var(--offre-clair)}
.phases__num{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; font-family:var(--font-display); font-size:18px; background:var(--paper-200); color:var(--canard-700); transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.phases__onglet[aria-selected=true] .phases__num{background:var(--offre); color:var(--offre-txt); transform:scale(1.12)}
.phases__nom{font-family:var(--font-display); font-size:18px; line-height:1.1; text-transform:lowercase}
.phases__jauge{position:absolute; left:0; right:0; bottom:0; height:4px}
.phases__jauge i{display:block; height:100%; width:0; background:var(--offre)}
.phases__onglet[aria-selected=true] .phases__jauge i{animation:ctcJauge var(--duree, 5s) linear forwards}
.phases.pause .phases__onglet[aria-selected=true] .phases__jauge i{animation:none; width:100%}
@keyframes ctcJauge{to{width:100%}}
.phases__scene{position:relative; min-height:190px}
.phases__panneau{position:absolute; inset:0; display:flex; align-items:center; gap:clamp(20px,4vw,48px); padding:28px clamp(24px,4vw,48px); opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .4s var(--ease), transform .5s var(--ease)}
.phases__panneau.actif{opacity:1; transform:none; pointer-events:auto}
.phases__grand{font-family:var(--font-display); font-size:clamp(90px,10vw,140px); line-height:.8; color:var(--offre-300)}
.phases__panneau h3{font-size:clamp(26px,2.6vw,34px); margin:0 0 8px}
.phases__panneau p{margin:0; font-size:17px; max-width:56ch; text-align:left; hyphens:manual; color:var(--canard-700)}
@media (max-width:700px){ .phases__scene{min-height:260px} .phases__grand{font-size:72px} }

/* « Ta semaine » */
.sem{display:grid; grid-template-columns:1.6fr 1fr; gap:var(--bloc); align-items:start}
.sem__grille{display:grid; grid-template-columns:repeat(7,1fr); background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:16px; box-shadow:var(--shadow-card); overflow:hidden;
  background-image:repeating-linear-gradient(transparent 0 31px, rgba(7,54,65,.06) 31px 32px)}
.sem__jour{position:relative; min-height:250px; padding:12px 8px; border-left:1px dashed rgba(7,54,65,.10); display:flex; flex-direction:column; gap:8px}
.sem__jour:first-child{border-left:0}
.sem__jour--we{background:rgba(7,54,65,.025)}
.sem__nom{font-family:var(--font-display); font-size:18px; text-transform:lowercase; color:var(--canard-800); text-align:center}
.sem__visio{display:block; margin-top:24px; padding:10px 8px; border-radius:6px 12px 8px 10px; background:var(--offre-300); color:var(--canard-900); font-family:var(--font-script); font-size:16px; line-height:1.15; text-align:center;
  transform:rotate(-2deg) scale(.6); opacity:0; transition:transform .6s cubic-bezier(.34,1.8,.64,1) .3s, opacity .3s .3s; box-shadow:0 4px 10px rgba(7,54,65,.12)}
.sem__visio b{display:block; font-family:var(--font-display); font-weight:400; font-size:18px; margin-top:4px}
.sem__visio em{display:block; font-style:normal; font-family:var(--font-text); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:4px; opacity:.8}
.sem.vu .sem__visio{transform:rotate(-2deg); opacity:1}
.sem__chat{margin-top:auto; align-self:center; width:30px; height:22px; border-radius:12px 12px 12px 4px; background:var(--canard-100); position:relative; opacity:0; transform:translateY(8px) scale(.7); transition:opacity .3s, transform .45s cubic-bezier(.34,1.8,.64,1)}
.sem__chat::after{content:"• • •"; position:absolute; inset:0; display:grid; place-items:center; font-size:9px; letter-spacing:-1px; color:var(--canard-700)}
.sem.vu .sem__jour .sem__chat{opacity:1; transform:none}
.sem.vu .sem__jour:nth-child(1) .sem__chat{transition-delay:.9s} .sem.vu .sem__jour:nth-child(2) .sem__chat{transition-delay:1s}
.sem.vu .sem__jour:nth-child(3) .sem__chat{transition-delay:1.1s} .sem.vu .sem__jour:nth-child(4) .sem__chat{transition-delay:1.2s}
.sem.vu .sem__jour:nth-child(5) .sem__chat{transition-delay:1.3s} .sem.vu .sem__jour:nth-child(6) .sem__chat{transition-delay:1.4s}
.sem.vu .sem__jour:nth-child(7) .sem__chat{transition-delay:1.5s}
.sem__notes{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:18px; padding-top:8px}
.sem__postit{margin:0; padding:14px 18px; background:var(--paper-000); border-radius:4px; box-shadow:0 8px 18px rgba(7,54,65,.12); font-family:var(--font-script); font-size:18px; line-height:1.25; color:var(--canard-700); text-align:left; hyphens:manual;
  opacity:0; transform:translateX(24px) rotate(3deg); transition:opacity .4s, transform .6s cubic-bezier(.34,1.56,.64,1)}
.sem__postit b{display:block; font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1.05; color:var(--canard-800); margin-bottom:4px; text-transform:lowercase}
.sem__postit--1{border-left:6px solid var(--offre)} .sem__postit--2{border-left:6px solid var(--citron-500); margin-left:18px}
.sem__postit--3{border-left:6px solid var(--canard-300)}
[data-offre="citron"] .sem__postit--2{border-left-color:var(--orange-500)}
.sem.vu .sem__postit{opacity:1; transform:rotate(-1deg)}
.sem.vu .sem__postit--2{transform:rotate(1.2deg); transition-delay:.15s} .sem.vu .sem__postit--3{transition-delay:.3s}
.sem > .avis-epingle{grid-column:1; grid-row:2; margin:0 0 0 24px; max-width:620px}
@media (max-width:900px){ .sem{grid-template-columns:1fr} .sem__grille{overflow-x:auto} .sem__jour{min-height:200px; min-width:70px}
  .sem > .avis-epingle,.sem__notes{grid-column:auto; grid-row:auto; margin-left:0} }
@media (prefers-reduced-motion:reduce){ .sem__visio,.sem__chat,.sem__postit{opacity:1; transform:none} }

/* Avis épinglés avec un scotch */
.grid > .avis-epingle{grid-column:1 / -1}
.avis-epingle{position:relative; max-width:560px; margin:var(--bloc) 0 0; padding:24px 22px 16px; background:var(--paper-000); border-radius:20px 20px 20px 6px; box-shadow:var(--shadow-card-hover);
  transform:rotate(-1.2deg); opacity:0; translate:-30px 0; transition:opacity .5s var(--ease), translate .7s cubic-bezier(.34,1.56,.64,1)}
.avis-epingle--droite{margin-left:auto; border-radius:20px 20px 6px 20px; transform:rotate(1.2deg); translate:30px 0}
.avis-epingle.vu{opacity:1; translate:0 0}
.avis-epingle::before{content:""; position:absolute; top:-8px; left:50%; width:74px; height:16px; margin-left:-37px; background:var(--offre); opacity:.85; border-radius:2px; transform:rotate(-3deg); box-shadow:0 1px 3px rgba(7,54,65,.12)}
.avis-epingle--droite::before{transform:rotate(4deg)}
.avis-epingle blockquote{margin:0 0 12px; font-size:16px; line-height:1.5; color:var(--canard-800); text-align:left; hyphens:manual}
.avis-epingle figcaption{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-500)}
.avis-epingle figcaption strong{display:block; font-size:14.5px; color:var(--canard-800)}
.avis-epingle .ini{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; background:var(--offre-clair); color:var(--offre-fonce); font-family:var(--font-display); font-size:18px}
@media (prefers-reduced-motion:reduce){ .avis-epingle{opacity:1; translate:0 0} }

/* FAQ + avis : deux colonnes */
.faq-zone{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--bloc); align-items:start}
.faq-zone .faq-chat{grid-column:1; grid-row:1}
.faq-zone .faq-q,.faq-zone .faq-r{max-width:85%}
.avis-epingle--faq{grid-column:2; grid-row:1; margin:0; max-width:none; position:sticky; top:110px}
@media (max-width:900px){ .faq-zone{grid-template-columns:1fr} .avis-epingle--faq{grid-column:1; grid-row:2; position:relative; top:0} }

/* Page événements : calendrier mural du mois, les événements y sont collés comme des post-its */
.evt-page{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--bloc); align-items:start}
@media (max-width:900px){ .evt-page{grid-template-columns:1fr} }
.mur{position:relative; background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:16px; box-shadow:var(--shadow-card-hover); padding:18px 20px 22px}
.mur::before{content:""; position:absolute; top:-7px; left:50%; width:80px; height:14px; margin-left:-40px; background:var(--citron-500); opacity:.85; border-radius:2px; transform:rotate(-2deg)}
.mur__tete{display:flex; align-items:center; justify-content:center; gap:18px; margin:0 0 12px}
.mur__tete b{font-family:var(--font-display); font-weight:400; font-size:22px; text-transform:lowercase; color:var(--canard-800); min-width:210px; text-align:center}
.mur__tete button{width:32px; height:32px; border-radius:999px; border:1px solid rgba(7,54,65,.15); background:var(--paper-100); font-size:18px; line-height:1; color:var(--canard-800); cursor:pointer}
.mur__tete button:hover{background:var(--canard-800); color:#fff}
.mur__jours,.mur__grille{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.mur__jours span{text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); padding:0 0 8px}
.mur__grille{border-top:1px solid var(--paper-300); border-left:1px solid var(--paper-300)}
.mur__case{position:relative; min-height:62px; padding:4px 6px; border-right:1px solid var(--paper-300); border-bottom:1px solid var(--paper-300); background:var(--paper-000)}
.mur__case--hors{background:var(--paper-100)}
.mur__case--passe .mur__num{opacity:.35}
.mur__case--passe .duree span{opacity:1; color:var(--canard-900)}
.mur__num{position:relative; z-index:4; font-family:var(--font-display); font-size:14px; color:var(--canard-700)}
.mur__case--auj .mur__num{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; background:var(--canard-800); color:#fff}
/* le post-it */
.postit-evt{position:absolute; z-index:2; left:24px; width:130%; top:4px; padding:6px 8px 8px; border:0; text-align:left; cursor:pointer;
  background:var(--citron-300); color:var(--canard-900); box-shadow:0 8px 16px rgba(7,54,65,.18); transform:rotate(-3deg);
  font-family:var(--font-script); font-size:13px; line-height:1.15; transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.postit-evt::before{content:""; position:absolute; top:-6px; left:50%; width:34px; height:10px; margin-left:-17px; background:rgba(255,255,255,.6); transform:rotate(4deg)}
.postit-evt b{display:inline-block; margin:0 0 2px; padding:1px 6px; border-radius:5px; background:#2d8cff; color:#fff; font-family:var(--font-text); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.postit-evt em{display:block; font-style:normal; font-family:var(--font-text); font-size:11.5px; font-weight:700; margin-top:4px}
.postit-evt--rappel{background:var(--orange-100); transform:rotate(2deg)}
.postit-evt--rappel b{background:var(--orange-500)}
.postit-evt__ligne{display:block; margin-top:2px}
.postit-evt__ligne + .postit-evt__ligne{margin-top:5px; padding-top:5px; border-top:1px dashed rgba(7,54,65,.25)}
.pop__evt + .pop__evt{margin-top:14px; padding-top:14px; border-top:1px dashed rgba(7,54,65,.18)}
.pop__evt h3{font-size:22px}
.postit-evt:hover{transform:rotate(0) scale(1.06); z-index:3}
.mur__vide{margin:14px 0 0; text-align:center; font-family:var(--font-script); font-size:19px; color:var(--canard-700)}
@media (max-width:760px){ .mur__case{min-height:64px; padding:4px} .postit-evt{right:-4px; font-size:11px; padding:6px} .postit-evt em{display:none} .mur__tete b{font-size:20px; min-width:0} }

/* Panneau des webinaires Zoom : un écran « hors antenne » tant que rien n'est programmé */
.zoom-panneau{position:relative; background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:16px; box-shadow:var(--shadow-card); padding:20px 22px 22px}
.zoom-panneau__ecran{position:relative; display:grid; place-items:center; aspect-ratio:16/8; margin:0 0 16px; border-radius:12px;
  background:radial-gradient(circle at 50% 45%, var(--canard-700), var(--canard-900)); overflow:hidden}
.zoom-panneau__ecran img{width:84px; height:84px; border-radius:999px; object-fit:cover; border:3px solid var(--paper-100);
  filter:grayscale(.4); animation:ctcRespire 3.4s ease-in-out infinite}
@keyframes ctcRespire{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.zoom-panneau__rec{position:absolute; top:10px; left:12px; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--canard-200)}
.zoom-panneau__rec i{width:8px; height:8px; border-radius:999px; background:var(--citron-500)}
.zoom-panneau.en-direct .zoom-panneau__rec i{background:#e8385a; animation:ctcPulse 1.4s infinite}
.zoom-panneau__nom{position:absolute; left:10px; bottom:10px; padding:3px 9px; border-radius:6px; background:rgba(0,0,0,.35); color:#fff; font-size:12px}
.zoom-panneau__note{position:absolute; right:12px; bottom:10px; padding:6px 10px; background:var(--citron-300); color:var(--canard-900);
  font-family:var(--font-script); font-size:14px; line-height:1.1; transform:rotate(-4deg); box-shadow:0 4px 10px rgba(0,0,0,.2)}
.zoom-panneau h3{font-size:24px; margin:0 0 6px}
.zoom-panneau p{text-align:left; hyphens:manual}
.zoom-item{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px dashed rgba(7,54,65,.12); cursor:pointer; background:none; border-left:0; border-right:0; border-bottom:0; width:100%; text-align:left; font:inherit}
.zoom-item__date{flex:0 0 auto; width:46px; text-align:center; font-family:var(--font-display); font-size:24px; line-height:1; color:#2d8cff}
.zoom-item__date small{display:block; font-family:var(--font-text); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--ink-500)}
.zoom-item b{display:block; font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--canard-800); text-transform:lowercase}

/* Calendrier : bouton aujourd'hui, post-its colorés, flèche sur les événements longs */
.evt-page > *{min-width:0}
@media (max-width:1100px){ .evt-page{grid-template-columns:1fr} }
.mur__tete{flex-wrap:wrap}
.mur__auj{width:auto!important; padding:0 14px; border-radius:999px!important; font-family:var(--font-text)!important; font-size:13px!important; font-weight:700}
.mur__case{min-height:78px}
.postit-evt{top:calc(4px + var(--n, 0) * 34px)}
.postit-evt--2{left:12px; transform:rotate(3deg)}
.postit-evt--orange{background:var(--orange-100)} .postit-evt--orange b{background:var(--orange-500)}
.postit-evt--rose{background:var(--rose-300)} .postit-evt--rose b{background:var(--rose-600)}
.postit-evt--citron{background:var(--citron-300)} .postit-evt--citron b{background:var(--citron-600)}
.postit-evt--canard{background:var(--canard-100)} .postit-evt--canard b{background:var(--canard-700)}
/* Événement long : un trait de surligneur posé à la main, avec une flèche au bout */
.duree{position:absolute; z-index:1; left:-1px; right:-1px; height:20px; border:0; padding:0; cursor:pointer; background:transparent}
.duree::before{content:""; position:absolute; inset:2px 0; background:var(--trait); opacity:.55;
  border-radius:2px 8px 3px 6px / 6px 3px 8px 2px; transform:rotate(-.6deg)}
.duree--orange{--trait:var(--orange-300)} .duree--rose{--trait:var(--rose-500)} .duree--citron{--trait:var(--citron-500)}
.duree--debut{left:6px; z-index:4} .duree--debut::before{border-top-left-radius:10px; border-bottom-left-radius:12px}
/* le nom déborde sur la case suivante : il doit passer AU-DESSUS de sa bande,
   sinon la moitié du mot est lavée par le fond translucide du jour d'après */
.duree span{position:relative; z-index:5}
.duree--fin{right:16px}
.duree--fin::after{content:""; position:absolute; right:-12px; top:1px; width:0; height:0; border-left:13px solid var(--trait); opacity:.7;
  border-top:9px solid transparent; border-bottom:9px solid transparent; transform:rotate(-4deg)}
.duree span{position:relative; z-index:1; display:block; padding:0 6px; font-family:var(--font-script); font-size:14px; line-height:20px;
  color:var(--canard-900); white-space:nowrap; text-align:left; pointer-events:none}
.duree:hover::before{opacity:.8}

.postit-evt b{font-size:9px!important; padding:0 5px!important; letter-spacing:.04em!important; margin-bottom:1px!important}
.postit-evt{font-size:12px!important; padding:5px 7px 6px!important}

/* Post-its collés sur le calendrier : la case garde sa taille, le post-it déborde et se lit en entier */
.mur__case{height:64px; min-height:64px}
.postits-case{position:absolute; z-index:3; top:20px; left:12px; width:175%; display:flex; flex-direction:column; pointer-events:none}
.mur__case:nth-child(7n) .postits-case, .mur__case:nth-child(7n-1) .postits-case{left:auto; right:12px}
.postit-evt{position:relative!important; top:auto!important; left:auto!important; right:auto!important; width:100%!important;
  pointer-events:auto; padding:6px 9px 7px!important; font-size:13.5px!important; line-height:1.2; text-align:left;
  transform:rotate(-2deg); margin-left:calc(var(--n) * 16px); margin-top:calc(var(--n) * -4px)}
.postit-evt[style*="--n:1"]{transform:rotate(2deg)}
.postit-evt::before{width:28px; height:8px; margin-left:-14px; top:-4px}
.postit-evt b{display:inline-block; vertical-align:1px; margin-right:5px; font-size:9px!important; padding:0 5px!important}
.postit-evt:hover{z-index:5; transform:rotate(0) scale(1.04)}
.postit-evt--orange{background:var(--orange-100)} .postit-evt--rose{background:var(--rose-300)}
.postit-evt--citron{background:var(--citron-300)} .postit-evt--canard{background:var(--canard-100)} .postit-evt--zoom{background:#cfe3ff}
@media (max-width:760px){ .postits-case{width:190%} .postit-evt{font-size:10.5px!important; padding:4px 5px!important} }

/* Traits de session plus fins, qui restent dans leur case */
.duree{height:14px!important}
.duree::before{inset:1px 0!important}
.duree span{font-size:12.5px!important; line-height:14px!important}
.duree--fin::after{top:-2px!important; border-top-width:9px!important; border-bottom-width:9px!important}
/* Post-its de la dernière ligne : ils montent au-dessus de la case */
/* Post-its : collés à droite du numéro du jour, ils descendent ; le calendrier s'agrandit si besoin */
/* sous la ligne des numéros : aucun numéro de jour n'est caché, ni le sien ni ceux des voisins */
.postits-case{top:26px!important; left:8px!important; right:auto!important; width:165%!important}
.mur__num{position:relative; z-index:6}
.mur__case:nth-child(7n) .postits-case, .mur__case:nth-child(7n-1) .postits-case{left:auto!important; right:6px!important}
.mur--marge{padding-bottom:96px}

/* Photo en polaroïd : cadre blanc, scotch washi, légende manuscrite, comme les visuels des autres pages */
.polaroid{position:relative; margin:0; padding:12px 12px 8px; background:var(--paper-000); border-radius:2px;
  box-shadow:0 16px 34px rgba(7,54,65,.22); transform:rotate(-2.5deg); max-width:100%; width:max-content}
.polaroid img{display:block; width:100%; height:auto; border-radius:1px}
.polaroid figcaption{padding:10px 4px 6px; font-family:var(--font-script); font-size:20px; color:var(--canard-700); text-align:center}
.polaroid__scotch{position:absolute; top:-10px; left:50%; width:96px; height:22px; margin-left:-48px; z-index:2;
  background:var(--offre, var(--citron-500)); opacity:.75; transform:rotate(-3deg); box-shadow:0 2px 5px rgba(7,54,65,.14)}
.polaroid__scotch::before,.polaroid__scotch::after{content:""; position:absolute; top:0; bottom:0; width:10px; background:rgba(255,255,255,.35)}
.polaroid__scotch::before{left:0} .polaroid__scotch::after{right:0}
/* Dans un en-tête : la photo garde ses proportions, cadrée en portrait comme un vrai polaroïd */
.hero-visuel{height:auto!important; justify-self:center; display:flex; align-items:center; justify-content:center}
.hero-visuel > img{max-height:clamp(300px,32vw,440px); width:auto; max-width:100%}
.hero-visuel .polaroid{width:min(320px,100%)}
.hero-visuel .polaroid img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%}

/* rangés : une pile nette, légèrement décalée */
@media (prefers-reduced-motion:reduce){ .papier{transition:none} }

/* Filtres blog */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--font-text); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; padding:7px 15px; border-radius:999px; cursor:pointer; border:1px solid var(--paper-300);
  background:var(--paper-000); color:var(--canard-700); transition:background .12s var(--ease)}
.chip:hover{border-color:var(--canard-800)}

/* Créneaux contact */
.slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}
.slot{font-family:var(--font-text); padding:12px 10px; border-radius:12px; cursor:pointer; text-align:center;
  border:1px solid var(--canard-200); background:var(--paper-100); color:var(--canard-800)}
.slot .j{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.75}
.slot .h{display:block; font-size:19px; font-weight:700; margin-top:3px}

/* Prose (articles + légal) */
.prose{max-width:720px}
.prose h2{font-size:clamp(26px,3vw,38px); margin:1.4em 0 .5em; text-transform:lowercase}
.prose p{font-size:17px; line-height:1.65; color:var(--canard-700); margin:0 0 20px}
.prose ul{padding-left:1.2em} .prose li{margin-bottom:.5em; color:var(--canard-700)}
.prose .encart p:last-child{margin:0}

/* ===== Articles : rythme de lecture (20/09/2026) ===== */
.article-suite{flex:1 1 100%; margin:0; font-size:16.5px; line-height:1.6; color:var(--canard-700); text-align:left!important}
.article-suite a{font-weight:700; text-decoration:none}

/* Titre d'article : aligné à gauche et équilibré. Justifié, les espaces entre
   les mots s'écartaient trop dans une police d'affichage. Taille réduite pour
   que les titres longs tiennent en quatre lignes. */
.prose h1{text-align:left; text-wrap:balance; hyphens:none;
  font-size:clamp(30px,4.2vw,50px)!important; line-height:.98!important}
.prose h2{position:relative; padding-bottom:10px; margin:1.8em 0 .6em}
.prose h2::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:2px; background:var(--orange-500)}
/* La hiérarchie se lit à l'œil, sans avoir à inspecter le code :
   H1 police d'affichage géante · H2 police d'affichage + trait orange ·
   H3 gras en police de texte · H4 plus petit, en petites capitales. */
.prose h3{font-family:var(--font-text); font-weight:700; font-size:19px; line-height:1.3; color:var(--canard-800); margin:1.6em 0 .4em; text-transform:none}
.prose h4{font-family:var(--font-text); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--canard-700); margin:1.4em 0 .3em; text-transform:uppercase}
.prose p{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.prose p strong{color:var(--canard-900)}
.prose > ul{list-style:none; padding-left:0; margin:0 0 22px}
.prose > ul > li{position:relative; padding-left:26px; margin-bottom:10px; font-size:17px; line-height:1.6; text-align:justify; hyphens:auto}
.prose > ul > li::before{content:"→"; position:absolute; left:0; top:0; color:var(--citron-600); font-weight:700}
.prose a{color:var(--canard-800); text-decoration-color:var(--citron-500); text-decoration-thickness:2px}
.prose a:hover{color:var(--orange-600)}

/* La FAQ d'article : plusieurs paragraphes = plusieurs bulles, empilées */
.prose .faq-chat{margin:26px 0}
.prose .faq-q{max-width:76%}
.prose .faq-r{max-width:80%}
.prose .faq-bulles{display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0}
.prose .faq-bulles p{margin:0; background:var(--rose-300); color:var(--canard-900); padding:12px 16px;
  border-radius:20px 20px 6px 20px; font-size:16px; line-height:1.55; text-align:left; hyphens:manual}
@media (max-width:700px){ .prose .faq-q{max-width:92%} .prose .faq-r{max-width:94%} }

/* ===== Blocs d'article ===== */
/* Le résumé : une fiche encadrée, les lignes se cochent en arrivant à l'écran */
.prose .resume{margin:30px 0; padding:22px 24px; border:1.5px solid var(--paper-300); border-radius:16px; background:var(--paper-000)}
.prose .avert, .prose .astuce{margin:30px 0; padding:0; background:none; border:0; box-shadow:none}
.bloc-lab{margin:0 0 12px!important; font-family:var(--font-text); font-size:16px; font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--canard-800); text-align:left; line-height:1.35}
.prose .resume .bloc-lab{display:flex; align-items:center; gap:9px}
.prose .resume .bloc-lab::before{content:""; flex:0 0 auto; width:9px; height:9px; border-radius:999px; background:var(--citron-500)}
/* « Attention » et « Astuce » deviennent des pastilles : on ne les confond plus
   avec un titre de section, et le bloc se lit comme une remarque. */
.prose .avert, .prose .astuce{padding:16px 18px; border-radius:14px; background:var(--paper-100); border:1.5px solid var(--paper-300)}
.prose .avert .bloc-lab, .prose .astuce .bloc-lab{display:block; color:var(--canard-800); font-size:16px}
.prose .avert .bloc-lab::before, .prose .astuce .bloc-lab::before{
  display:inline-block; margin:0 10px 4px 0; padding:3px 10px; border-radius:999px; vertical-align:2px;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff}
.prose .avert .bloc-lab::before{content:"attention"; background:var(--orange-500)}
.prose .astuce .bloc-lab::before{content:"astuce"; background:var(--rose-600)}

.prose .resume ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.prose .resume li{position:relative; padding-left:34px; margin:0; font-size:16.5px; line-height:1.55;
  color:var(--canard-800); text-align:justify; hyphens:auto; -webkit-hyphens:auto;
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
.prose .resume li::before{content:""; position:absolute; left:0; top:1px; width:20px; height:20px;
  border:2px solid var(--canard-300); border-radius:6px; background:var(--paper-000)}
.prose .resume li::after{content:""; position:absolute; left:5px; top:6px; width:10px; height:5px;
  border-left:2.5px solid var(--citron-600); border-bottom:2.5px solid var(--citron-600);
  transform:rotate(-45deg) scale(.2); opacity:0; transition:opacity .25s var(--ease), transform .3s cubic-bezier(.34,1.8,.64,1)}
.prose .resume.vu li{opacity:1; transform:none}
.prose .resume.vu li::after{opacity:1; transform:rotate(-45deg) scale(1)}
.prose .resume.vu li:nth-child(2){transition-delay:.09s} .prose .resume.vu li:nth-child(2)::after{transition-delay:.17s}
.prose .resume.vu li:nth-child(3){transition-delay:.18s} .prose .resume.vu li:nth-child(3)::after{transition-delay:.26s}
.prose .resume.vu li:nth-child(4){transition-delay:.27s} .prose .resume.vu li:nth-child(4)::after{transition-delay:.35s}
.prose .resume.vu li:nth-child(5){transition-delay:.36s} .prose .resume.vu li:nth-child(5)::after{transition-delay:.44s}
.prose .resume.vu li:nth-child(n+6){transition-delay:.45s} .prose .resume.vu li:nth-child(n+6)::after{transition-delay:.53s}
.prose .avert p, .prose .astuce p{margin:0 0 10px; font-size:16.5px; line-height:1.6; color:var(--canard-700); text-align:justify; hyphens:auto}

/* Étapes numérotées : une pastille par étape */
.prose .pas{display:flex; flex-direction:column; gap:14px; margin:28px 0}
.prose .pas__item{display:grid; grid-template-columns:38px 1fr; gap:4px 14px; align-items:start}
.prose .pas__num{grid-row:span 2; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:999px; background:var(--rose-500); color:var(--canard-900);
  font-family:var(--font-display); font-size:20px; line-height:1}
.prose .pas__titre{margin:0!important; font-family:var(--font-text); font-weight:700; font-size:17px; color:var(--canard-800); text-align:left}
.prose .pas__txt{margin:0!important; font-size:16px; line-height:1.55; color:var(--canard-700); text-align:justify; hyphens:auto}

/* Comparaison : deux colonnes face à face */
.prose .vs{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0}
.prose .vs__col{padding:18px 20px; border-radius:14px; background:var(--paper-100); border:1.5px solid var(--paper-300)}
.prose .vs__col--orange{border-color:var(--orange-100); background:var(--orange-050)}
.prose .vs__col--citron{border-color:var(--citron-100); background:var(--citron-050)}
.prose .vs__lab{margin:0 0 10px!important; font-family:var(--font-display); font-size:21px; line-height:1.05;
  text-transform:lowercase; color:var(--canard-800); text-align:left}
.prose .vs ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.prose .vs li{position:relative; padding-left:18px; margin:0; font-size:15.5px; line-height:1.5; color:var(--canard-700); text-align:left; hyphens:manual}
.prose .vs li::before{content:"·"; position:absolute; left:4px; top:-3px; font-size:20px; color:var(--canard-300)}

/* Chiffres mis en avant */
.prose .chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:28px 0}
.prose .chiffre{padding:18px; border-radius:14px; background:var(--canard-050); text-align:center}
.prose .chiffre__val{margin:0!important; font-family:var(--font-display); font-size:32px; line-height:1; color:var(--canard-800); text-align:center}
.prose .chiffre__lab{margin:6px 0 0!important; font-size:13.5px; line-height:1.4; color:var(--canard-700); text-align:center}

/* Questions fréquentes : un accordéon, comme sur le site */
.prose .qr-liste{display:flex; flex-direction:column; gap:10px; margin:24px 0}
.prose .qr{border:1.5px solid var(--paper-300); border-radius:14px; background:var(--paper-000); overflow:hidden}
.prose .qr summary{list-style:none; cursor:pointer; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-text); font-weight:700; font-size:16.5px; color:var(--canard-800)}
.prose .qr summary::-webkit-details-marker{display:none}
.prose .qr summary::after{content:"+"; font-family:var(--font-display); font-size:24px; line-height:1; color:var(--citron-600); transition:transform .25s var(--ease)}
.prose .qr[open] summary::after{transform:rotate(45deg)}
.prose .qr[open]{border-color:var(--citron-300)}
.prose .qr__txt{padding:0 18px 16px}
.prose .qr__txt p{margin:0 0 10px; font-size:16px; line-height:1.6}
.prose .qr__txt p:last-child{margin:0}

/* Tableaux : une fiche encadrée, en-tête teinté, une ligne sur deux plus claire */
.prose .tablo{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:28px 0; border:1.5px solid var(--paper-300); border-radius:14px; background:var(--paper-000)}
.prose table{width:100%; border-collapse:collapse; font-size:15px; table-layout:auto}
.prose thead th{background:var(--canard-050); color:var(--canard-800); font-family:var(--font-text);
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
  padding:12px 16px; text-align:left; white-space:normal}
.prose thead th:first-child{border-radius:12px 0 0 0} .prose thead th:last-child{border-radius:0 12px 0 0}
.prose tbody td{padding:14px 16px; text-align:left; vertical-align:top; line-height:1.45; color:var(--canard-700); border-top:1px solid var(--paper-200)}

.prose tbody td:first-child{font-weight:600; color:var(--canard-800)}
.prose table caption{caption-side:bottom; padding:10px 16px; font-size:12.5px; color:var(--ink-500); text-align:left}

/* Sur grand écran, tableaux et comparaisons débordent un peu de la colonne de
   texte : le texte reste à sa largeur de lecture, les blocs respirent. */
@media (min-width:1000px){
  .prose .tablo, .prose .vs, .prose .chiffres{width:calc(100% + 120px); margin-left:-60px}
  .prose .tablo{overflow-x:visible}
}
@media (max-width:700px){ .prose .vs{grid-template-columns:1fr} .prose .resume{padding:18px} }
@media (prefers-reduced-motion:reduce){ .prose .resume li{opacity:1; transform:none} .prose .resume li::after{opacity:1; transform:rotate(-45deg) scale(1)} }

@media (max-width:700px){
  .prose h3{font-size:17.5px}
  .prose > ul > li, .prose .encart li{font-size:16px}
  .prose .encart{padding:16px 18px; margin:20px 0}
}

/* Puces "→" */
.arrow-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.arrow-list li{display:flex; gap:12px; font-size:16.5px; line-height:1.5; color:var(--canard-700)}
.arrow-list .fl{color:var(--citron-600); font-weight:700; flex:0 0 auto}

/* ---------- Formulaires ---------- */
/* Motif en pastilles à cliquer */
.motifs{border:0; padding:0; margin:0; min-width:0}
.motifs__liste{display:flex; flex-wrap:wrap; gap:8px}
.motifs legend{display:block; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--canard-700); margin-bottom:7px; padding:0}
.motifs input{position:absolute; opacity:0; pointer-events:none}
.field.motifs label{display:inline-flex; align-items:center; height:36px; line-height:1; margin:0; padding:0 16px; border-radius:999px; cursor:pointer;
  font-size:14.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--canard-800);
  background:var(--paper-100); border:1px solid var(--canard-200); transition:background .15s var(--ease), border-color .15s var(--ease)}
.field.motifs label:hover{border-color:var(--canard-800)}
.motifs input:checked + label{background:var(--canard-800); border-color:var(--canard-800); color:#fff}
.motifs input:focus-visible + label{box-shadow:0 0 0 3px var(--orange-100), 0 0 0 4px var(--orange-500)}
/* Listes déroulantes : même allure que les champs, flèche maison */
select{-webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23073641' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 12px center!important; padding-right:34px!important}
.field label{display:block; font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--canard-700); margin-bottom:5px}
.field input,.field textarea,.field select{width:100%; font-family:var(--font-text); font-size:15px; padding:9px 13px;
  border-radius:10px; border:1px solid var(--canard-200); background:var(--paper-100); color:var(--canard-800); outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--canard-800); box-shadow:0 0 0 3px var(--citron-100)}
.nl-form{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.nl-form input{flex:1 1 260px; max-width:340px; font-family:var(--font-text); font-size:16px; padding:16px 20px;
  border-radius:999px; border:1px solid var(--canard-200); background:var(--paper-000); color:var(--canard-800); outline:none}
.nl-form input:focus{border-color:var(--canard-800); box-shadow:0 0 0 3px var(--citron-100)}

/* Accordéon FAQ */
.faq{display:flex; flex-direction:column; gap:12px}
.faq details{background:var(--paper-000); border:1px solid rgba(7,54,65,.10); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-card)}
.faq summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; cursor:pointer; font-family:var(--font-text); font-size:17px; font-weight:700; color:var(--canard-800)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--orange-500); font-size:22px}
.faq details[open] summary::after{content:"−"}
.faq details>p{margin:0; padding:0 24px 24px; font-size:16px; line-height:1.55; color:var(--canard-700)}

/* ---------- Footer ---------- */
.site-footer{background:var(--canard-900); padding:clamp(48px,6vw,72px) 0 32px}
.site-footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; padding-bottom:36px}
.site-footer .logo{height:56px; width:auto; margin-bottom:18px}
.site-footer p{font-size:15.5px; line-height:1.55; color:var(--canard-200); margin:0 0 18px; max-width:34ch}
.site-footer h4{font-family:var(--font-text); font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--citron-500); margin:0 0 16px}
.site-footer .col a{display:block; font-size:15.5px; color:var(--canard-200); text-decoration:none; margin-bottom:10px}
.site-footer .col a:hover{color:var(--orange-500)}
.site-footer .socials{display:flex; gap:10px}
.site-footer .socials a{width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,253,248,.25);
  display:grid; place-items:center; color:var(--paper-100); text-decoration:none}
.site-footer .socials a:hover{background:rgba(255,253,248,.1)}
.site-footer .bottom{border-top:1px solid rgba(255,253,248,.15); padding-top:24px; font-size:14px; color:var(--canard-300)}

/* Bandeau info */
.info-chip{display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700;
  color:var(--canard-800); background:var(--citron-050); padding:12px 20px; border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(7,54,65,.06)}
.info-chip .dot{width:8px; height:8px; border-radius:999px; background:var(--orange-500); flex:0 0 auto}

/* Révélation au scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav{display:none}
  .burger{display:grid}
  .mobile-nav.open{display:flex; flex-direction:column; gap:2px; position:absolute; top:70px; left:0; right:0;
    background:var(--paper-100); border-bottom:1px solid var(--paper-300); padding:14px var(--gutter) 26px; z-index:59}
  .mobile-nav a{padding:11px 0; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--canard-800); text-decoration:none; border-bottom:1px solid var(--paper-300)}
  /* Le panier : une feuille qui monte du bas, à la hauteur de son contenu */
  .cart-panneau{margin-left:0!important; width:100%!important; height:auto!important; max-height:88vh;
    position:absolute!important; left:0; right:0; bottom:0; border-radius:20px 20px 0 0; overflow:hidden}
  .cart-panneau > div:first-child{padding:18px 20px!important}
  .cart-panneau > div:first-child h2{font-size:26px!important}
  #cart-lines{padding:14px 20px!important; max-height:52vh}
  .cart-panneau > div:last-child{padding:16px 20px 20px!important}
  .panier-ligne{gap:12px!important}
  .panier-vignette{width:56px!important; height:56px!important}

  /* Accompagnements : un dépliant, comme le survol sur ordinateur */
  .mnav-sous{border-bottom:1px solid var(--paper-300)}
  .mnav-tete{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:11px 0; border:0; background:none; cursor:pointer; text-align:left;
    font-family:var(--font-text); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--canard-800)}
  .mnav-tete span{transition:transform .2s var(--ease); font-size:12px}
  .mnav-sous.ouvert .mnav-tete span{transform:rotate(180deg)}
  .mnav-liste{display:none; padding:2px 0 10px 12px; border-left:2px solid var(--citron-300); margin:0 0 10px}
  .mnav-sous.ouvert .mnav-liste{display:block}
  .mnav-liste a{display:flex; align-items:center; gap:8px; padding:8px 0; border:0;
    font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--canard-700)}
  .mnav-liste .dot{width:9px; height:9px; border-radius:999px; flex:0 0 auto}

  /* Le menu tient dans l'écran : il défile si besoin, et le bouton reste sobre */
  .mobile-nav.open{max-height:calc(100vh - 90px); overflow-y:auto; padding:10px var(--gutter) 18px}
  .mobile-nav .btn{width:auto; align-self:flex-start; margin-top:14px; height:40px; padding:0 18px;
    font-size:13px; letter-spacing:.04em; text-transform:none}
}

/* ===== Téléphone : la justification creuse des trous sur 390 px, et la photo
   mange tout l'écran. On aligne à gauche et on borne les visuels. (20/09/2026) ===== */
@media (max-width:700px){
  /* Emma veut le texte justifié aussi sur téléphone. On garde l'alignement à
     gauche uniquement pour les gros textes d'intro, où la justification
     creuserait des trous (trop peu de mots par ligne). */
  main p, main li, main .lead{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
  .lead{font-size:17px; line-height:1.5}
  /* La photo du haut de l'accueil : une vignette, pas un écran entier */
  .hero .has-stk{max-width:210px!important}
  .hero .vignette{max-height:26vh; object-fit:cover; object-position:center 18%; border-radius:10px;
    animation:ctcFlotte 7s ease-in-out infinite}
  /* de petites choses qui bougent, comme sur grand écran */
  .hero .stk--hide-m{display:block!important; transform:scale(.72); transform-origin:left top; margin-bottom:-18px}
  .compteurs{gap:10px}
  /* La photo du haut : une vignette, pas un écran entier */
  .hero-visuel{margin-top:4px}
  .hero-visuel .polaroid{width:min(196px,58%); padding:8px 8px 6px}
  .hero-visuel .polaroid img{aspect-ratio:1/1; max-height:28vh}
  .hero-visuel .polaroid figcaption{font-size:15px; padding:6px 2px 2px}
  .hero-visuel .polaroid__scotch{width:70px; height:16px; margin-left:-35px; top:-8px}
  .hero-visuel > img{max-height:34vh}
  /* Les images des sections : jamais plus hautes qu'une demi-page */
  .section img:not(.post-img):not(.logo):not(.fil-avatar){max-height:58vh; object-fit:cover}
  /* Un peu d'air en moins entre les blocs, on scrolle moins */
  :root{--section:clamp(38px,9vw,56px)}
  /* Les cartes sont l'une sous l'autre : plus besoin de réserver la hauteur
     du choix de session pour aligner les colonnes. */
  .sessions-ferme{min-height:0; margin-bottom:14px}
  .carte-offre__texte{flex:0 1 auto}
  /* Les longues étiquettes ne doivent plus élargir leur carte : elles passent
     à la ligne, et les blocs en grille peuvent rétrécir. */
  .badge{white-space:normal; line-height:1.35; text-align:center}
  .achat, .achat__gauche, .achat__droite, .grid > *, .card{min-width:0}
  .note-etoile{max-width:100%}
  /* Pied de page : deux colonnes au lieu d'une longue liste à dérouler */
  .site-footer{padding-top:26px}
  /* aucune largeur bridée dans le pied de page sur téléphone */
  .site-footer p{max-width:none!important; text-align:justify; hyphens:auto; -webkit-hyphens:auto}
  .site-footer .cols{grid-template-columns:repeat(3,1fr); gap:14px 10px; padding-bottom:16px}
  .site-footer .cols > :first-child{grid-column:1 / -1}
  /* la phrase va jusqu'au bord : plus de largeur bridée ni de retours à la ligne inutiles */
  .site-footer .cols > :first-child p{max-width:none; font-size:13.5px; line-height:1.45; margin-bottom:12px}
  .site-footer .col h4{margin-bottom:5px; font-size:9.5px; letter-spacing:.06em; line-height:1.2}
  .site-footer .col a{margin-bottom:0; padding:3px 0; font-size:12px; line-height:1.3}
  .site-footer .logo{max-width:130px; margin-bottom:12px}
  .site-footer .socials a{width:38px; height:38px}
  .btn{width:100%; justify-content:center}
  .hero .btn{width:auto}
}