/* Vrille, école de fleuristes : le cahier de la formatrice.
   Direction : dossier-de-creation.md, parties 2 à 4 et 12. Moteur : scrub-pipeline.md. */

:root{
  --canvas:#F5E2A0;        /* jaune beurre : le mur de l'atelier, la feuille du cahier */
  --panel:#FBF1CC;         /* papier clair : fiches, cartes, feuilles posées */
  --canvas-deep:#EFD58A;   /* bandes alternées */
  --grid:#E2D19A;          /* petits carreaux, décor seulement */
  --text-primary:#1F2A5C;  /* encre indigo */
  --text-secondary:#48527F;/* encre diluée ; bordures des champs */
  --accent:#C93A26;        /* rouge tomate : bouton, stylo de la formatrice */
  --accent-hover:#A82E1D;  /* survol ; petites annotations rouges */
  --on-accent:#FFF6DC;     /* texte des boutons */
  --accent-muted:#F2A68C;  /* surligneur, ruban adhésif, marge */
  --cover:#1F2A5C;         /* couverture du cahier : bloc final, pied de page */
  --cover-accent:#F07C66;  /* notes manuscrites sur la couverture */

  --ease-pen:cubic-bezier(.45,.05,.25,1);
  --ease-sheet:cubic-bezier(.2,.8,.3,1);
  --ease-marker:cubic-bezier(.6,0,.2,1);

  --f-titre:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-texte:'Lexend','Segoe UI',system-ui,sans-serif;
  --f-main:'Caveat','Segoe Print','Bradley Hand',cursive;

  --bandeau:36px;
  --bar:64px;
  --ruler:8px;
  --top:calc(var(--bandeau) + var(--bar) + var(--ruler));
  --gut:24px;
  --marge:108px;           /* colonne des annotations ; le trait rouge passe à 120 px */
  --mline:120px;
  --shadow:0 14px 28px -14px rgba(31,42,92,.35);
  --shadow-s:0 8px 18px -10px rgba(31,42,92,.35);
  --tape:rgba(242,166,140,.7);
  --halo:0 0 6px #FBF1CC,0 0 14px #FBF1CC,0 0 3px #FBF1CC;
  --grid-bg:linear-gradient(rgba(226,209,154,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(226,209,154,.4) 1px,transparent 1px);
}
@media (max-width:1023px){:root{--marge:60px;--mline:72px}}
@media (max-width:759px){:root{--bar:56px;--gut:16px;--marge:0px;--mline:-4px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;overflow-anchor:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 24px);background:var(--canvas)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:transparent;color:var(--text-primary);font:400 17px/28px var(--f-texte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:800;margin:0;line-height:1.04;letter-spacing:-.012em}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-family:var(--f-titre);font-weight:600}
::selection{background:var(--accent-muted);color:var(--text-primary)}
:focus-visible{outline:3px solid var(--text-primary);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nobr{white-space:nowrap}
main{display:block;outline:none}
.skip{position:fixed;left:16px;top:calc(var(--bandeau) + 10px);z-index:1100;transform:translateY(-240%);background:var(--text-primary);color:var(--canvas);padding:13px 18px;border-radius:6px;font:600 16px/1 var(--f-titre);text-decoration:none;transition:transform .3s var(--ease-sheet)}
.skip:focus{transform:none}

/* ---------- Le fond d'ambiance : petits carreaux, grain, soleil de verrière, marge, pétales ---------- */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background-color:var(--canvas);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.amb-sun{position:absolute;top:-30vh;left:50%;width:120vmax;height:120vmax;margin-left:-60vmax;background:radial-gradient(closest-side,rgba(255,243,196,.55),rgba(255,243,196,.28) 55%,rgba(255,243,196,0));animation:soleil 90s linear infinite;animation-delay:-34s;will-change:transform}
@keyframes soleil{from{transform:translateX(calc(50vw + 60vmax))}to{transform:translateX(calc(-50vw - 60vmax))}}
.amb-grain{position:absolute;inset:0;opacity:.09;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .36 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.amb-marge{position:absolute;top:0;bottom:0;left:calc(50% - min(600px,50% - var(--gut)) + var(--mline));width:2px;background:var(--accent-muted)}
.petales{position:absolute;inset:0}
.pt{position:absolute;top:-40px;left:var(--x);width:13px;height:9px;opacity:.25;animation:tombe var(--d) linear infinite;animation-delay:var(--dl);will-change:transform}
.pt b{display:block;width:100%;height:100%;background:var(--c);border-radius:85% 12% 85% 12%;animation:tourne var(--t,9s) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes tombe{from{transform:translate3d(0,0,0)}to{transform:translate3d(-30vw,calc(100vh + 80px),0)}}
@keyframes tourne{from{transform:rotate(-40deg) scaleX(1)}to{transform:rotate(230deg) scaleX(.55)}}
@media (max-width:759px){.pt:nth-child(n+5){display:none}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Le menu ---------- */
.nav{position:fixed;top:var(--bandeau);left:0;right:0;z-index:900}
.nav-bar{height:var(--bar);background:rgba(245,226,160,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav-in{width:min(1200px,100% - 2*var(--gut));height:100%;margin:0 auto;display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--text-primary);font:800 27px/1 var(--f-titre);letter-spacing:-.03em;flex:none}
.logo svg{width:32px;height:32px;flex:none;overflow:visible}
.logo .sp{fill:none;stroke:var(--accent);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;animation:trace .9s var(--ease-pen) .1s forwards}
.logo .sp.pr{opacity:.6}
.logo-w{display:inline-block;padding:0 .06em .08em 0;clip-path:inset(-20% 100% -30% -5%);animation:ecrit .55s var(--ease-pen) .95s forwards;transform:translateY(-1px)}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes ecrit{to{clip-path:inset(-20% -6% -30% -5%)}}
.nav-links{margin-left:12px}
.nav-links ul{display:flex;gap:28px}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:400 16px/1 var(--f-texte);color:var(--text-primary)}
.nav-links a::after{content:"";position:absolute;left:-2px;right:-2px;bottom:6px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8' viewBox='0 0 18 8'%3E%3Cpath d='M0 4.5C3 1 6 1 9 4S15 7.5 18 4.5' fill='none' stroke='%23C93A26' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/18px 8px;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease-pen)}
.nav-links a:hover::after{clip-path:inset(0 0 0 0)}
.nav-links a[aria-current="page"]::after{display:none}
.nav-links .main-u{position:absolute;left:-4px;right:-4px;bottom:3px;height:10px;width:calc(100% + 8px);overflow:visible;color:var(--accent)}
.main-u path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 2;stroke-dashoffset:1;animation:trace .7s var(--ease-pen) 1.2s forwards}
.nav-cta{margin-left:auto}
.nav .nav-prog,.nav .nav-som{display:none}
.ruler{position:relative;height:var(--ruler);background:var(--panel);box-shadow:0 1px 0 rgba(31,42,92,.14)}
.ruler-fill{position:absolute;left:0;top:1px;bottom:1px;width:100%;transform-origin:0 50%;transform:scaleX(var(--read,0));background:linear-gradient(90deg,rgba(242,166,140,.55),rgba(242,166,140,.85));border-radius:1px 4px 2px 1px}
.ruler::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,42,92,.35) 1px,transparent 1px) 0 0/30px 7px repeat-x,linear-gradient(90deg,rgba(31,42,92,.35) 1px,transparent 1px) 0 0/6px 3px repeat-x}

@media (max-width:1023px){
  .nav .nav-links,.nav .nav-cta{display:none}
  .nav-in{gap:10px}
  .nav .nav-prog{display:inline-flex;margin-left:auto}
  .nav .nav-som{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;background:none;border:0;cursor:pointer;font:600 16px/1 var(--f-titre);color:var(--text-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(31,42,92,.4)}
  .logo{font-size:25px}
  .logo svg{width:28px;height:28px}
}
.btn--s{min-height:40px!important;padding:10px 14px!important;font-size:15px!important}
@media (pointer:coarse){.btn--s{min-height:44px!important}}

/* Le sommaire (téléphone) : une feuille à petits carreaux qui descend */
.sommaire{position:fixed;left:0;right:0;top:var(--top);bottom:0;z-index:880;overflow:auto;overscroll-behavior:contain;background:var(--panel);background-image:var(--grid-bg);background-size:24px 24px;box-shadow:0 18px 30px -18px rgba(31,42,92,.45);transform:translateY(-104%);transition:transform .5s var(--ease-sheet);padding:24px var(--gut) 40px}
.sommaire.open{transform:none}
.sommaire[hidden]{display:none}
.som-close{position:absolute;top:12px;right:var(--gut);min-height:44px;min-width:44px;padding:0 8px;background:none;border:0;cursor:pointer;font:600 16px/1 var(--f-titre);color:var(--text-primary);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.som-list{margin-top:48px;display:grid;gap:10px}
.som-list a{display:flex;align-items:center;gap:18px;min-height:56px;text-decoration:none;font:800 28px/1.1 var(--f-titre);letter-spacing:-.02em}
.som-n{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;font:700 26px/1 var(--f-main);color:var(--accent)}
.som-n svg{position:absolute;inset:-4px;width:52px;height:52px;overflow:visible}
.som-n path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1}
.sommaire.open .som-n path{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease-pen) calc(.25s + var(--i,0)*.12s)}
.som-list a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:8px}
.som-tel{margin-top:40px;padding-top:24px;border-top:2px solid var(--accent-muted);font:400 17px/28px var(--f-texte)}
.som-tel a{display:inline-flex;align-items:center;min-height:44px;font:600 22px/1 var(--f-titre)}
.som-tel .note{display:block}

/* ---------- Boutons ---------- */
.cta{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:14px 22px;border:0;border-radius:8px;background:var(--accent);color:var(--on-accent);font:600 17px/1.12 var(--f-titre);letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background-color .2s ease,transform .12s ease}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--text-primary);outline-offset:3px}
.arr{width:56px;height:30px;flex:none;overflow:visible;color:var(--text-primary);transition:transform .3s var(--ease-sheet)}
.arr path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1}
.arr .pr{opacity:.6}
.arr.on .s{stroke-dashoffset:0;transition:stroke-dashoffset .56s var(--ease-pen)}
.arr.on .h{stroke-dashoffset:0;transition:stroke-dashoffset .16s var(--ease-pen) .54s}
html:not(.js) .arr path{stroke-dashoffset:0}
.btn:hover+.arr,.btn:focus-visible+.arr{transform:translateX(-4px)}
.cover .arr,.foot .arr{color:var(--cover-accent)}
.nav .arr{width:44px;height:24px}
/* Lien secondaire : encre, puis une ligne ondulée tomate qui se trace au survol */
.lien{display:inline-flex;align-items:center;min-height:44px;color:var(--text-primary);text-decoration:none;font:400 17px/1.3 var(--f-texte)}
.lien>span{position:relative;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(31,42,92,.45);transition:text-decoration-color .3s ease}
.lien>span::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8' viewBox='0 0 18 8'%3E%3Cpath d='M0 4.5C3 1 6 1 9 4S15 7.5 18 4.5' fill='none' stroke='%23C93A26' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/18px 8px;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease-pen)}
.lien:hover>span,.lien:focus-visible>span{text-decoration-color:transparent}
.lien:hover>span::after,.lien:focus-visible>span::after{clip-path:inset(0 0 0 0)}
.cover .lien,.foot .lien{color:var(--canvas)}
.cover .lien>span,.foot .lien>span{text-decoration-color:rgba(245,226,160,.5)}

/* ---------- Grille : 12 colonnes dans 1 200 px, marge de cahier à gauche ---------- */
.wrap{width:min(1200px,100% - 2*var(--gut));margin-inline:auto}
.g{display:grid;grid-template-columns:var(--marge) repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.g>*{grid-column:2/-1;min-width:0}
.sec{position:relative;padding:144px 0}
.sec--deep{background:rgba(239,213,138,.62)}
.sec+.sec--deep,.sec--deep+.sec{border-top:0}
@media (max-width:759px){
  .g{grid-template-columns:minmax(0,1fr);column-gap:0}
  .g>*{grid-column:1}
  .sec{padding:96px 0}
}

/* Têtes de section */
.sec-head{grid-column:2/span 9;margin-bottom:72px}
.label{font:600 13px/1.4 var(--f-titre);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 12px}
.sec-t{font-size:clamp(34px,4.3vw,58px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.chapeau{font:300 20px/36px var(--f-texte);max-width:46ch;margin-top:24px;text-wrap:pretty}
.hl{position:relative;z-index:0;background:none;color:inherit;white-space:nowrap}
.hl::before{content:"";position:absolute;z-index:-1;left:-.1em;right:-.12em;bottom:.04em;height:.46em;background:var(--accent-muted);border-radius:.08em .32em .12em .26em;transform:scaleX(1) rotate(-.6deg);transform-origin:0 50%}
.cover .hl::before{height:.1em;bottom:-.06em;background:var(--cover-accent);opacity:.95}
p a:not(.btn):not(.lien){text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--accent)}
.prose p+p{margin-top:16px}
.prose{max-width:62ch}

/* Notes manuscrites : l'indigo de l'élève, le tomate de la formatrice */
.note{font:500 26px/1.1 var(--f-main);color:var(--accent);letter-spacing:.005em}
.note--s{font-size:22px;color:var(--accent-hover)}
.note--i{color:var(--text-primary)}
.note--c{color:var(--cover-accent)}
.marge{grid-column:1!important;justify-self:end;text-align:right;transform:rotate(-3deg);position:relative;z-index:2}
@media (max-width:759px){.marge{grid-column:1!important;justify-self:start;text-align:left;transform:rotate(-1.5deg);margin:4px 0 20px}}
.respire{animation:respire 6s ease-in-out infinite alternate;animation-delay:-2.4s}
@keyframes respire{from{opacity:.85}to{opacity:1}}

/* ---------- Le stylo de la formatrice : tracés SVG ---------- */
.ink{position:absolute;pointer-events:none;color:var(--accent);display:block}
.ink svg{position:absolute;left:0;top:0;overflow:visible}
.ink path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1}
.ink .pr{opacity:.6}
.ink--i{color:var(--text-primary)}
.ink--c{color:var(--cover-accent)}
.ink--h{color:var(--accent-hover)}
.ink--circle{inset:-.28em -.42em -.2em -.4em}
.ink--under{left:-4px;right:-4px;bottom:-.32em;height:.5em}
.ink--strike{left:-6px;right:-8px;top:18%;height:64%}
.sep{position:relative;height:0}
.sep .ink{width:48px;height:48px;left:calc(var(--mline) - 60px);top:-24px}
@media (max-width:759px){.sep .ink{left:0}}
.retrace path{animation:rt-trace 12s var(--ease-pen) infinite;animation-delay:-1s}
.retrace svg{animation:rt-fade 12s linear infinite;animation-delay:-1s}
@keyframes rt-trace{0%,87%{stroke-dashoffset:0}87.5%{stroke-dashoffset:1}97%,100%{stroke-dashoffset:0}}
@keyframes rt-fade{0%,83%{opacity:1}87%{opacity:0}87.5%,100%{opacity:1}}

/* ---------- Fiches, tirages, rubans, épingles ---------- */
.fiche{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:24px 28px;transform:rotate(var(--tilt,0deg))}
.fiche::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.fiche>*{position:relative}
.ruban{position:absolute!important;z-index:2;top:-11px;left:18px;width:76px;height:24px;background:rgba(201,58,38,.78);transform:rotate(-8deg);clip-path:polygon(0 12%,5% 0,10% 10%,95% 4%,100% 14%,97% 50%,100% 88%,93% 100%,5% 96%,0 88%,3% 50%)}
.ruban--r{left:auto;right:18px;transform:rotate(8deg)}
.tirage{position:relative;background:var(--panel);padding:10px 10px 12px;border-radius:2px;box-shadow:var(--shadow);transform:rotate(var(--tilt,.4deg))}
.tirage img{width:100%;border-radius:2px;background:var(--canvas-deep)}
.tirage figcaption{padding:10px 4px 0;font:500 23px/1.15 var(--f-main);color:var(--text-primary)}
.tape{position:absolute;z-index:2;top:-12px;width:84px;height:26px;background:var(--tape);box-shadow:0 1px 2px rgba(31,42,92,.08);clip-path:polygon(0 10%,6% 0,12% 9%,94% 3%,100% 12%,96% 52%,100% 90%,92% 100%,6% 95%,0 86%,4% 50%)}
.tape--l{left:14px;transform:rotate(-8deg)}
.tape--r{right:14px;transform:rotate(8deg)}
.fremit{animation:fremit 7s ease-in-out infinite;animation-delay:-1.5s}
@keyframes fremit{0%,86%,100%{transform:rotate(8deg)}89%{transform:rotate(7deg) translateY(-1px)}92%{transform:rotate(8.8deg)}95%{transform:rotate(7.6deg)}}
.pin{position:absolute;z-index:3;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#F4957F 0 18%,#C93A26 45%,#8F2617 100%);box-shadow:0 5px 5px -2px rgba(31,42,92,.4)}
.spirale{position:absolute;left:24px;right:24px;top:-17px;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='34' viewBox='0 0 24 34'%3E%3Cellipse cx='12' cy='25' rx='3.1' ry='2.8' fill='%231F2A5C' fill-opacity='.72'/%3E%3Cpath d='M12.6 25C12.2 14 17.5 6.5 20.3 9.2 21.8 10.7 20.6 14.5 19.5 16' fill='none' stroke='%2348527F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0/24px 34px;pointer-events:none}
.spirale--v{left:-17px;right:auto;top:24px;bottom:24px;width:34px;height:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' viewBox='0 0 34 24'%3E%3Cellipse cx='25' cy='12' rx='2.8' ry='3.1' fill='%231F2A5C' fill-opacity='.72'/%3E%3Cpath d='M25 11.4C14 11.8 6.5 6.5 9.2 3.7 10.7 2.2 14.5 3.4 16 4.5' fill='none' stroke='%2348527F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y 0 0/34px 24px}

/* Chiffres entourés */
.cnum{position:relative;display:inline-grid;place-items:center;min-width:1.6em;font:700 1em/1 var(--f-main);color:var(--accent)}
.cnum .ink{inset:-.3em -.42em -.24em -.4em}
.chiffre{position:relative;display:inline-block;font:800 clamp(56px,6vw,84px)/1 var(--f-titre);letter-spacing:-.03em;color:var(--text-primary);padding:.12em .28em .08em}
.chiffre .ink{inset:-.06em -.1em -.08em -.12em}

/* Listes à cocher */
.checks li{position:relative;padding-left:48px;min-height:32px}
.checks li+li{margin-top:18px}
.ck{position:absolute;left:0;top:-2px;width:32px;height:32px;overflow:visible}
.ck path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck .bx{stroke:var(--text-secondary);stroke-width:1.8}
.ck .v{stroke:var(--accent);stroke-width:2.6;stroke-dasharray:1 2;stroke-dashoffset:0}
.ck .v.pr{opacity:.55;stroke-width:2.2}

/* Accordéon */
.faq{grid-column:2/span 10!important;border-top:2px solid rgba(31,42,92,.18)}
.faq-item{border-bottom:2px solid rgba(31,42,92,.18)}
.faq-q{margin:0;font-size:inherit}
.faq-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:16px 0;background:none;border:0;cursor:pointer;text-align:left;font:600 20px/1.3 var(--f-titre);color:var(--text-primary)}
.faq-btn svg{flex:none;width:28px;height:28px;overflow:visible;transition:transform .45s var(--ease-sheet)}
.faq-btn svg path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.faq-btn[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-sheet)}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 0 24px;max-width:62ch}
.faq-item.open .faq-a{grid-template-rows:1fr}
html:not(.js) .faq-a{grid-template-rows:1fr}

/* ---------- Pied de page : la couverture du cahier ---------- */
.foot{position:relative;background:var(--cover);color:var(--canvas);padding:72px 0 48px}
.foot-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
.foot .logo{color:var(--canvas)}
.foot .logo .sp{stroke:var(--cover-accent)}
.foot-marque{grid-column:1/span 4}
.foot-marque .note{margin-top:14px;max-width:16ch}
.foot nav{grid-column:5/span 3}
.foot nav li+li{margin-top:2px}
.foot nav a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;font:400 16px/1.2 var(--f-texte)}
.foot nav a:hover{text-decoration:underline;text-decoration-color:var(--cover-accent);text-underline-offset:5px}
.foot address{grid-column:8/span 5;font-style:normal;font:400 16px/28px var(--f-texte)}
.foot address a{display:inline-flex;align-items:center;min-height:40px;font:600 20px/1 var(--f-titre);text-decoration:none}
.foot-legal{grid-column:1/-1;padding-top:28px;border-top:1px solid rgba(245,226,160,.25);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font:300 14px/24px var(--f-texte)}
.foot-legal p{max-width:70ch}
@media (pointer:coarse){.foot nav a,.foot address a{min-height:44px}}
@media (max-width:759px){
  .foot{padding:56px 0 40px}
  .foot-g{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .foot-marque,.foot nav,.foot address,.foot-legal{grid-column:1}
}

/* =====================================================================
   ACCUEIL : la vidéo d'ouverture
   ===================================================================== */
.hero{position:relative}
.stage{display:none}
/* Hauteurs stables pendant le défilement sur téléphone : 100lvh (100vh en repli), et --hv = 100lvh mesurée en pixels
   par accueil.js, remesurée seulement quand la largeur ou l'orientation change (la barre d'adresse ne change rien) */
html.scrub .hero{height:1100vh;height:1100lvh;height:calc(var(--hv,100lvh)*11)}
html.scrub .stage{display:block;position:sticky;top:0;height:100vh;height:100lvh;height:var(--hv,100lvh);overflow:hidden;background:var(--canvas-deep)}
html.scrub .hero-static{display:none}
.stage-media{position:absolute;inset:0}
.poster,.poster-fin{position:absolute;inset:0;background:var(--canvas-deep) center/cover no-repeat}
.poster-fin{opacity:0;background-color:transparent}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;will-change:transform;transform:translateZ(0)}
.stage.video-ready .hero-video{opacity:1}
.stage.video-failed .hero-video{display:none}
.ring{position:absolute;left:50%;bottom:26px;width:60px;height:60px;margin-left:-30px;display:grid;place-items:center;background:var(--panel);border-radius:4px;box-shadow:var(--shadow-s);transform:rotate(-2deg);transition:opacity .6s ease;color:var(--text-primary)}
.ring svg{width:48px;height:48px;overflow:visible}
.ring path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:var(--ld,1);transition:stroke-dashoffset .15s linear}
.ring .pr{opacity:.6}
.ring--down path{stroke-dashoffset:0}
.stage.video-ready .ring:not(.ring--down){opacity:0}
@media (max-height:560px){.ring{display:none}}

.bands{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;pointer-events:none}
.band{position:absolute;opacity:0;--k:0}
.band .fiche{box-shadow:0 18px 34px -16px rgba(31,42,92,.45)}
.b-title{font-size:clamp(28px,2.5vw,42px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.b-sub{font:400 17px/28px var(--f-texte);margin-top:14px;max-width:34ch}
.band .label{margin-bottom:10px}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.b-note{position:absolute;font:500 28px/1 var(--f-main);color:var(--accent);text-shadow:var(--halo);isolation:isolate;white-space:nowrap}
.b-note::before{content:"";position:absolute;z-index:-1;inset:-95% -36%;background:radial-gradient(closest-side,rgba(251,241,204,.97),rgba(251,241,204,.96) 74%,rgba(251,241,204,.5) 88%,rgba(251,241,204,0))}
.mega{display:block;font:800 clamp(56px,5.4vw,88px)/.98 var(--f-titre);letter-spacing:-.035em;white-space:nowrap}

/* Placement 16:9 : 1 à droite en haut, 2 à 5 à gauche, 6 en diagonale de cahier */
.b1{top:max(13svh,132px);right:6vw;width:min(440px,34vw,27vw + 30px)}
.b1 .b-note{left:30px;bottom:-54px}
.b2,.b3,.b4{--w:min(480px,36vw,calc(33vw - 24px));width:var(--w);left:clamp(16px,calc(33vw - 24px - var(--w)),8vw)}
.b3{top:max(13svh,132px)}
.b2,.b4{bottom:max(10svh,24px)}
.b5{top:max(13svh,132px);left:8vw;width:min(var(--f6w,440px),25vw + 40px)}
.b5 .b-title{font-size:clamp(26px,2.3vw,40px)}
.b6{inset:0}

/* Entrées nommées, pilotées par --k (0 à 1), réversibles */
.b1{--kc:clamp(0,var(--k)*2.4,1)}
.b1 .fiche{opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px)) rotate(calc(-3deg + 2deg*var(--kc)))}
.b1 .w{--kw:clamp(0,(var(--k) - var(--th,0))*3.2,1);opacity:var(--kw);transform:translateY(calc((1 - var(--kw))*-22px)) rotate(calc((1 - var(--kw))*var(--jr,0deg)))}
.b1 .b-sub{opacity:clamp(0,(var(--k) - .72)*5,1)}
.b1 .b-note{--kn:clamp(0,(var(--k) - .8)*6,1);clip-path:inset(-110% calc((1 - var(--kn))*100% - var(--kn)*60%) -120% -45%)}
.b1 .b-note .ink{--kd:clamp(0,(var(--k) - .88)*8.4,1)}

.b2 .fiche,.b3 .fiche,.b4 .fiche{--kc:clamp(0,var(--k)*3,1);transform:translateY(calc((1 - var(--kc))*16px)) rotate(calc(var(--tilt) + (1 - var(--kc))*1.5deg))}
.b2 .label,.b3 .label,.b4 .label,.b5 .label{opacity:clamp(0,var(--k)*3,1)}
.b2 .b-sub,.b3 .b-sub,.b4 .b-sub,.b5 .b-sub{opacity:clamp(0,(var(--k) - .5)*3.4,1)}
.b2 .mask{position:relative;display:block;overflow:hidden;padding:.06em .12em .22em;margin:-.06em -.12em -.22em}
.b2 .mw{display:block;--kw:clamp(0,(var(--k) - .04)*2.5,1);transform:translateY(calc((1 - var(--kw))*112%))}
.b2 .under-host{position:relative;display:inline-block}
.b2 .ink--under{--kd:clamp(0,(var(--k) - .38)*2.6,1);bottom:-.06em;height:.3em;color:var(--accent)}
.b2 .ink--under path{stroke-width:3.6}
.b3 .c{--kc:clamp(0,(var(--k) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--dx,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.b4 .c{--kc:clamp(0,(var(--k) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.b5 .fiche{opacity:clamp(0,var(--k)*3,1)}
.b5 .w{transform-origin:0 100%;--kw:clamp(0,(var(--k) - var(--th,0))*2.6,1);opacity:var(--kw);transform:rotate(calc((1 - var(--kw))*-90deg))}

/* Inks pilotés par --kd (tracés liés au défilement dans la vidéo et sur l'image fixe) */
.band .ip,.fin .ip{stroke-dashoffset:calc(1 - var(--kd,1));opacity:clamp(0,var(--kd,1)*80,1)}
.band .ip.pr,.fin .ip.pr{opacity:calc(clamp(0,var(--kd,1)*80,1)*.6)}
.band .ip.s,.fin .ip.s{stroke-dashoffset:calc(1 - clamp(0,var(--kd,1)/.82,1))}
.band .ip.h,.fin .ip.h{stroke-dashoffset:calc(1 - clamp(0,(var(--kd,1) - .82)/.18,1));opacity:clamp(0,(var(--kd,1) - .82)*300,1)}
.band .ip.h.pr,.fin .ip.h.pr{opacity:calc(clamp(0,(var(--kd,1) - .82)*300,1)*.6)}
.band .arr path,.fin .arr path{transition:none}
.band .arr .s,.fin .arr .s{stroke-dashoffset:calc(1 - clamp(0,var(--kd,1)/.8,1))}
.band .arr .h,.fin .arr .h{stroke-dashoffset:calc(1 - clamp(0,(var(--kd,1) - .8)/.2,1))}

/* La fin : phrase 6 et image fixe, même composition (fiche du titre, note, flèche, fiche du bouton) */
.fin{--k:1}
.f6-t{position:absolute;left:8vw;top:max(13svh,132px);width:var(--f6w,min(27vw,640px))}
.f6-card{padding:24px 28px 28px}
.f6-title{font-size:var(--f6fs,clamp(28px,2.4vw,46px));line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.f6-note{position:absolute;left:26px;top:calc(100% - 14px);font:500 30px/1 var(--f-main);color:var(--accent);text-shadow:var(--halo);white-space:nowrap;isolation:isolate}
.f6-note::before{content:"";position:absolute;z-index:-1;inset:0 -40% -105% -40%;background:radial-gradient(closest-side,rgba(251,241,204,.97),rgba(251,241,204,.96) 74%,rgba(251,241,204,.5) 88%,rgba(251,241,204,0))}
.f6-arrow{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--accent)}
.f6-arrow path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2}
.f6-b{position:absolute;left:var(--f6bl,62vw);right:8vw;bottom:max(10svh,24px)}
.f6-b .fiche{padding:22px 24px 22px;--tilt:1deg}
.f6-sub{font:400 17px/27px var(--f-texte);max-width:44ch}
.f6-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.f6-b.narrow .f6-row{flex-direction:column;align-items:flex-start;gap:4px}
.f6-row .btn{white-space:nowrap}
.sub-short{display:none}
@media (orientation:landscape) and (max-height:759px){.fin-l .sub-long{display:none}.fin-l .sub-short{display:inline}.f6-b .fiche{padding:18px 22px}.f6-sub{font-size:16px;line-height:24px}.f6-row{margin-top:12px}}
/* Écran couché presque carré (tablette 4:3) : la seconde fiche prend le sous-titre court, pour rester sur l'établi */
@media (orientation:landscape) and (max-aspect-ratio:3/2){.fin-l .sub-long{display:none}.fin-l .sub-short{display:inline}.f6-b{right:5vw}}
/* Téléphone couché : la fiche du bouton gagne de la place sur le bord droit, sa flèche s'efface */
@media (orientation:landscape) and (max-height:560px){.f6-b{right:3vw}.f6-b .fiche{padding:14px 16px}.f6-sub{font-size:15px;line-height:22px}.f6-row .arr{display:none}.f6-b .btn{padding:10px 14px;font-size:15px;white-space:normal;max-width:100%;text-align:center}}
/* Téléphone très étroit (moins de 360 px) : la flèche du bouton de fin sortirait de l'écran, elle s'efface */
@media (orientation:portrait) and (max-width:359px){.f6-row .arr{display:none}}
.b6{--kt:clamp(0,var(--k)*4,1)}
.b6 .f6-card{opacity:var(--kt);transform:translateY(calc((1 - var(--kt))*-24px)) rotate(calc(-3deg + 2deg*var(--kt)))}
.b6 .f6-title .w{--kw:clamp(0,(var(--k) - var(--th,0))*4,1);opacity:var(--kw);transform:translateY(calc((1 - var(--kw))*.45em))}
.b6 .f6-note{--kn:clamp(0,(var(--k) - .42)*6,1);clip-path:inset(-30% calc((1 - var(--kn))*100% - var(--kn)*50%) -150% -50%)}
.b6 .f6-arrow{--kd:clamp(0,(var(--k) - .55)/.35,1)}
.b6 .f6-b{--kb:clamp(0,(var(--k) - .62)*6,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*24px)) rotate(calc((1 - var(--kb))*2deg))}
.b6 .f6-sub{opacity:clamp(0,(var(--k) - .7)*6,1)}
.b6 .f6-row{--kbt:clamp(0,(var(--k) - .82)*6,1);opacity:var(--kbt);transform:translateY(calc((1 - var(--kbt))*8px))}
.b6 .f6-row .arr{--kd:clamp(0,(var(--k) - .88)*8.4,1)}
.b6 .f6-cta{pointer-events:auto}
.b6 .f6-row a{pointer-events:auto}
.f6-t .fiche{--tilt:-1deg}
.fin .f6-card{transform:rotate(-1deg)}
.fin .f6-b .fiche{transform:rotate(1deg)}

/* L'image fixe du haut de page (réduire les animations, économie de données, téléphone couché) */
.hero-static{position:relative;height:100vh;height:100svh;min-height:360px;overflow:hidden;background:var(--canvas-deep) url("/demos/formation/assets/video/hero-16x9-ending.jpg") center/cover no-repeat;background-image:image-set(url("/demos/formation/assets/video/hero-16x9-ending.webp") type("image/webp"),url("/demos/formation/assets/video/hero-16x9-ending.jpg") type("image/jpeg"))}
@media (orientation:portrait){.hero-static{background-image:url("/demos/formation/assets/video/hero-9x16-ending.jpg");background-image:image-set(url("/demos/formation/assets/video/hero-9x16-ending.webp") type("image/webp"),url("/demos/formation/assets/video/hero-9x16-ending.jpg") type("image/jpeg"))}}
.hero-static .f6-b{bottom:max(10svh,24px)}

/* Téléphone et tablette en portrait : fiches en haut et en bas, pleine largeur moins 32 px */
@media (orientation:portrait){
  .b1,.b3,.b5{top:calc(var(--top) + 12px);left:16px;right:auto;width:min(560px,calc(100vw - 32px))}
  .b2,.b4{bottom:calc(16px + env(safe-area-inset-bottom));top:auto;left:16px;right:auto;width:min(560px,calc(100vw - 32px))}
  .b1 .b-note{left:22px;bottom:-50px}
  .b-title{font-size:clamp(25px,6.6vw,34px)}
  .b5 .b-title{font-size:clamp(24px,6.2vw,32px)}
  .band .fiche{padding:18px 20px 20px}
  .b-sub{font-size:16px;line-height:25px;margin-top:10px}
  .mega{font-size:clamp(52px,15vw,88px)}
  .f6-t{left:16px;right:auto;top:calc(var(--top) + 12px);width:min(560px,calc(100vw - 32px))}
  .f6-card{padding:16px 20px 22px}
  .f6-title{font-size:var(--f6fs,clamp(24px,6.4vw,34px))}
  .f6-note{font-size:27px;left:20px}
  .f6-b{left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .f6-b .fiche{padding:16px 18px 16px;max-width:560px}
  .fin-l .sub-long{display:none}.fin-l .sub-short{display:inline}
  .f6-sub{font-size:16px;line-height:24px}
  .f6-link{display:none}
  .f6-row{margin-top:12px}
  .hero-static .f6-b{bottom:16px}
}
@media (max-width:370px){.band .fiche{padding:14px 16px 16px}.b-sub{font-size:15px;line-height:23px}}
html.scrub .hero::after{content:"";position:absolute;left:0;right:0;top:100%;height:96px;background:linear-gradient(to bottom,rgba(239,213,138,.9),rgba(239,213,138,0));pointer-events:none}

/* =====================================================================
   ACCUEIL : les sections
   ===================================================================== */
/* 2. Dialogue de marge */
.qa{grid-column:1/-1!important;display:grid;gap:56px}
.qa-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:160px;align-items:center}
.qa-q{font:500 32px/1.12 var(--f-main);color:var(--text-primary);transform:rotate(var(--tilt,-1deg));justify-self:end;text-align:right;max-width:17ch}
.qa-a{position:relative;max-width:48ch}
.qa-a .ink{left:-146px;top:calc(50% - 30px);width:124px;height:48px}
@media (max-width:1023px){.qa-row{column-gap:110px}.qa-a .ink{left:-100px;width:84px}}
@media (max-width:759px){
  .qa{gap:44px}
  .qa-row{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .qa-q{justify-self:start;text-align:left;font-size:28px;max-width:none}
  .qa-a{padding-left:56px}
  .qa-a .ink{left:4px;top:-18px;width:40px;height:44px}
}

/* 3. Faire, défaire, refaire : trois feuilles qui se chevauchent */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;padding-top:12px}
.feuille{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:28px 28px 32px;transform:rotate(var(--tilt,0deg))}
.feuille::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.feuille>*{position:relative}
.feuille+.feuille{margin-left:-28px}
.feuille:nth-child(1){z-index:1;margin-top:24px}
.feuille:nth-child(2){z-index:2;margin-top:0}
.feuille:nth-child(3){z-index:3;margin-top:48px}
.feuille .tirage{margin:6px 6px 22px}
.feuille .tirage img{aspect-ratio:4/5;object-fit:cover}
.feuille-num{position:absolute!important;top:18px;right:22px;z-index:3;font-size:34px}
.feuille-t{font-size:clamp(40px,3.6vw,54px);letter-spacing:-.03em;margin-bottom:14px;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 16px}
.barre{position:relative;display:inline-block}
.reecrit{font:700 .82em/1 var(--f-main);color:var(--accent);letter-spacing:0;transform:rotate(-3deg);display:inline-block}
.feuille p+p{margin-top:16px}
.feuille .note{margin-top:18px}
@media (max-width:1023px){.trio{grid-template-columns:minmax(0,1fr);max-width:560px}.feuille+.feuille{margin-left:0;margin-top:-18px}.feuille:nth-child(n){margin-top:0}.feuille+.feuille{margin-top:-16px}}
@media (max-width:759px){.feuille{padding:22px 20px 26px}}

/* 4. Composez votre parcours : la grande feuille */
.sec-cp .sec-head{margin-bottom:56px}
.composer{grid-column:1/-1!important;position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:48px 32px 48px 0;display:grid;grid-template-columns:var(--marge) minmax(0,5fr) minmax(0,7fr);column-gap:24px;row-gap:40px}
.composer::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.composer::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--mline) - 1px);width:2px;background:var(--accent-muted);pointer-events:none}
.composer>*{position:relative;z-index:1}
.cp-reglages{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:24px 56px;align-items:flex-start}
.cp-reglages fieldset,.cp-liste{border:0;margin:0;padding:0;min-width:0}
.cp-reglages legend{padding:0;margin-bottom:10px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{position:relative;display:inline-flex}
.tab input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tab span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1.5px solid var(--text-secondary);border-radius:6px;background:var(--panel);font:600 16px/1.1 var(--f-titre);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.tab input:checked+span{background:var(--text-primary);border-color:var(--text-primary);color:var(--canvas)}
.tab input:focus-visible+span{outline:3px solid var(--text-primary);outline-offset:3px}
.tab:hover input:not(:checked)+span{background:rgba(242,166,140,.35)}
.opts{display:grid;gap:4px}
.opt{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font:400 16px/1.3 var(--f-texte)}
.opt input{position:absolute;opacity:0;width:28px;height:28px;margin:0;left:0;cursor:pointer}
.opt .rond{position:relative;flex:none;width:26px;height:26px}
.opt .rond svg{width:26px;height:26px;overflow:visible}
.opt .rond path{fill:none;stroke-linecap:round}
.opt .rond .o{stroke:var(--text-secondary);stroke-width:1.8}
.opt .rond .o{vector-effect:non-scaling-stroke}
.opt .rond .d{fill:var(--accent);stroke:none;opacity:0;transform:scale(.4);transform-origin:24px 24px;transition:opacity .25s ease,transform .32s var(--ease-sheet)}
.opt input:checked+.rond .d{opacity:1;transform:none}
.opt input:focus-visible+.rond{outline:3px solid var(--text-primary);outline-offset:2px;border-radius:4px}
.opt input:disabled~span{opacity:.5}
.opt:has(input:disabled){cursor:not-allowed}
.cp-avril{margin-top:2px;transform:rotate(-1.5deg);transform-origin:0 50%}
.cp-liste{grid-column:2}
.mods{display:grid;gap:2px}
.mod{position:relative;display:grid;grid-template-columns:32px 16px minmax(0,1fr) auto auto;align-items:center;column-gap:12px;min-height:52px;padding:6px 8px 6px 4px;border-radius:6px;cursor:pointer;transition:background-color .2s ease}
.mod:hover{background:rgba(242,166,140,.22)}
.mod input{position:absolute;left:4px;top:50%;width:32px;height:32px;margin:-16px 0 0;opacity:0;cursor:pointer}
.mod-box{width:32px;height:32px}
.mod-box svg{width:32px;height:32px;overflow:visible}
.mod-box path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mod-box .bx{stroke:var(--text-secondary);stroke-width:1.8}
.mod-box .v{stroke:var(--accent);stroke-width:2.8;stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset .32s var(--ease-pen)}
.mod-box .v.pr{stroke-width:2.2;opacity:.55}
.mod input:checked+.mod-box .v{stroke-dashoffset:0}
.mod input:focus-visible+.mod-box{outline:3px solid var(--text-primary);outline-offset:2px;border-radius:4px}
.mod-motif{width:16px;height:16px;border:1px solid rgba(31,42,92,.35);border-radius:2px;background:var(--pat)}
.mod-nom{font:600 16px/1.25 var(--f-titre)}
.mod-duree{font:500 22px/1 var(--f-main);color:var(--text-secondary);white-space:nowrap}
.mod-prix{font:400 15px/1.2 var(--f-texte);color:var(--text-secondary);white-space:nowrap;min-width:5.2em;text-align:right}
.mod.off{cursor:not-allowed}
.mod.off .mod-nom,.mod.off .mod-duree,.mod.off .mod-prix,.mod.off .mod-motif,.mod.off .mod-box{opacity:.5}
.mod.lock{cursor:default}
.mod.lock:hover,.mod.off:hover{background:none}
.mod-note{margin:-4px 0 6px 64px;transform:rotate(-1deg);transform-origin:0 50%;max-width:36ch}
.mod-note[hidden]{display:none}
.cp-droite{grid-column:3;display:grid;gap:28px;align-content:start}
.cal{display:grid;gap:6px}
.cal-row{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:10px}
.cal-m{font:500 22px/1 var(--f-main);color:var(--text-primary);white-space:nowrap}
.cal-d{display:grid;grid-template-columns:repeat(23,minmax(0,1fr));gap:2px;max-width:506px}
.cal.alt .cal-d{grid-template-columns:repeat(10,minmax(0,1fr));max-width:230px}
.dd{position:relative;aspect-ratio:1;border:1px solid rgba(72,82,127,.38);border-radius:1px;background:rgba(251,241,204,.6)}
.dd::after{content:"";position:absolute;inset:1px;background:var(--pat,var(--accent));opacity:0;transform:scale(.35) rotate(-8deg);transition:opacity .16s ease,transform .24s var(--ease-sheet)}
.dd.f::after{opacity:1;transform:none}
.dd.f{border-color:rgba(31,42,92,.55)}
[data-m="1"]{--pat:var(--accent)}
[data-m="2"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 5.2 5.1-.8M3 9.1 9.2 2.9' stroke='%231F2A5C' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/8px 8px}
[data-m="3"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.4' cy='3.6' r='1.45' fill='%231F2A5C'/%3E%3C/svg%3E") 0 0/7px 7px}
[data-m="4"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 5.2 5.1-.8M3 9.1 9.2 2.9M-.8 3 5.2 9M2.9-1 9 5.1' stroke='%231F2A5C' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/8px 8px}
[data-m="5"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-.8 3 5.2 9M2.9-1 9 5.1' stroke='%23A82E1D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/8px 8px}
[data-m="6"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 2.4H8M0 6.3H8' stroke='%231F2A5C' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/8px 8px}
[data-m="7"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.4 0V8M6.3 0V8' stroke='%23A82E1D' stroke-width='1.3'/%3E%3C/svg%3E") 0 0/8px 8px}
[data-m="8"]{--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 6 2 2.2 4 6 6 2.2 8 6' fill='none' stroke='%231F2A5C' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/8px 8px}
.resume{display:grid;gap:6px;padding:20px 22px;border-radius:4px;background:rgba(242,166,140,.28);box-shadow:inset 0 0 0 1.5px rgba(201,58,38,.35)}
.res-1{font:800 26px/1.15 var(--f-titre);letter-spacing:-.015em}
.res-2{font:400 17px/1.4 var(--f-texte)}
.res-3{font:600 22px/1.2 var(--f-titre)}
.cp-inclus{font:300 16px/26px var(--f-texte);color:var(--text-secondary)}
.cp-reac{position:absolute;left:0;width:calc(var(--marge) + 8px);top:var(--ry,200px);text-align:right;transform:rotate(-3deg);transition:top .45s var(--ease-sheet)}
.cp-reac .note{font-size:23px;line-height:1.05;color:var(--accent-hover)}
.cp-reac-t{display:inline-block;clip-path:inset(-20% 100% -30% -10%)}
.cp-reac.ecrit .cp-reac-t{clip-path:inset(-20% -10% -30% -10%);transition:clip-path 1s var(--ease-pen)}
@media (max-width:1023px){
  .composer{grid-template-columns:var(--marge) minmax(0,1fr);padding-right:24px}
  .cp-reglages,.cp-liste,.cp-droite{grid-column:2}
  .cp-reac{position:relative;left:auto;top:auto!important;width:auto;text-align:left;transform:rotate(-1.5deg);grid-column:2;order:3;min-height:0;margin:-8px 0 -4px}
  .cp-reac .note{font-size:23px}
  .cp-droite{order:4}
}
@media (max-width:759px){
  .composer{grid-template-columns:minmax(0,1fr);padding:32px 16px 28px 26px;row-gap:28px}
  .composer::after{left:12px}
  .cp-reglages,.cp-liste,.cp-droite{grid-column:1}
  .cp-reglages{gap:20px}
  .mod{grid-template-columns:32px 14px minmax(0,1fr) auto;row-gap:0}
  .mod-prix{grid-column:3;grid-row:2;text-align:left}
  .mod-duree{grid-column:4;grid-row:1/span 2}
  .mod-note{margin-left:8px}
  .cp-reac{grid-column:1}
  .cal-row{grid-template-columns:74px minmax(0,1fr);column-gap:6px}
  .cal-m{font-size:19px}
  .cal-d{gap:1.5px}
}

/* 5. 140 m² sous une verrière : le grand tirage annoté */
.atelier-g{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:48px;align-items:start}
.annot{margin:12px 0 0}
.annot .pic{position:relative}
.an{position:absolute;left:var(--x);top:var(--y);z-index:3;padding:4px 10px 6px;background:var(--panel);border-radius:2px;box-shadow:var(--shadow-s);font:500 24px/1 var(--f-main);color:var(--accent);white-space:nowrap;transform:rotate(var(--r,-2deg))}
.an .ink{inset:auto;left:var(--ax,50%);top:var(--ay,100%);width:var(--aw,60px);height:var(--ah,60px);color:var(--accent)}
.an-mk{display:none}
.an-legende{display:none}
.at-texte p{max-width:36ch}
.chiffres{display:grid;gap:36px;margin-top:40px}
.chiffres li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px}
.chiffres .chiffre{font-size:clamp(46px,4.4vw,64px);min-width:1.9em;text-align:center}
.chiffres span.lbl{font:600 18px/1.3 var(--f-titre);max-width:16ch}
@media (max-width:1023px){.atelier-g{grid-template-columns:minmax(0,1fr);row-gap:48px}.chiffres{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.chiffres li{grid-template-columns:minmax(0,1fr);row-gap:10px;justify-items:start}}
@media (max-width:759px){
  .an{display:none}
  .an-mk{display:grid;position:absolute;left:var(--mx);top:var(--my);z-index:3;width:30px;height:30px;margin:-15px 0 0 -15px;place-items:center;background:var(--panel);border-radius:50%;box-shadow:var(--shadow-s);font:700 20px/1 var(--f-main);color:var(--accent-hover)}
  .an-legende{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:18px}
  .an-legende li{display:flex;align-items:center;gap:8px;font:500 22px/1.1 var(--f-main);color:var(--accent-hover)}
  .an-legende b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--panel);box-shadow:var(--shadow-s);font:700 18px/1 var(--f-main)}
  .chiffres{grid-template-columns:minmax(0,1fr);gap:28px}
  .chiffres li{grid-template-columns:auto minmax(0,1fr)}
}

/* 6. Ils ont changé de métier : trois fiches épinglées en ligne libre */
.pins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;align-items:start;padding-top:16px}
.pin-card{position:relative;margin-top:var(--dy,0px)}
.pin-card .fiche{padding:34px 28px 26px}
.pin-card blockquote p{font:400 18px/30px var(--f-texte)}
.pin-card figcaption{margin-top:18px;font:300 15px/22px var(--f-texte);color:var(--text-secondary)}
.pin-card figcaption strong{display:block;font:600 17px/1.3 var(--f-titre);color:var(--text-primary)}
.pin-card .note{margin:16px 0 0 18px;transform:rotate(-2deg);transform-origin:0 50%}
@media (max-width:1023px){.pins{grid-template-columns:minmax(0,1fr);row-gap:48px;max-width:620px}.pin-card{margin-top:0}.pin-card:nth-child(2){margin-left:32px}}
@media (max-width:759px){.pin-card:nth-child(2){margin-left:0}}

/* 7. Qui paie la formation ? Feuille à reliure spirale */
.feuille-spirale{grid-column:2/span 9!important;position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:64px 56px 48px;transform:rotate(-.5deg)}
.feuille-spirale::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.feuille-spirale>*:not(.spirale){position:relative}
.feuille-spirale .sec-t{margin-bottom:40px}
.feuille-spirale .checks li{font:400 18px/30px var(--f-texte);max-width:58ch}
.feuille-spirale .checks li+li{margin-top:22px}
.feuille-spirale .lien{margin-top:32px}
@media (max-width:1023px){.feuille-spirale{grid-column:2/-1!important}}
@media (max-width:759px){.feuille-spirale{grid-column:1!important;padding:52px 20px 32px}.feuille-spirale .checks li{padding-left:44px}}

/* 8. La couverture du cahier */
.sec-cover{background:var(--cover);color:var(--canvas);padding:144px 0 120px;overflow:hidden}
.sec-cover .cover{position:relative}
.cover .sec-t{color:var(--canvas);max-width:16ch}
.cover .chapeau{color:var(--canvas)}
.cover .cta{margin-top:40px}
.cover-tel{margin-top:32px;font:400 17px/28px var(--f-texte)}
.cover-tel a{font-family:var(--f-titre);font-weight:600;text-decoration:underline;text-decoration-color:var(--cover-accent);text-underline-offset:5px;display:inline-block;padding:8px 0}
.cover-note{margin-top:28px;transform:rotate(-2deg);transform-origin:0 50%;max-width:26ch}
.elastique{position:absolute;top:0;bottom:0;right:max(6vw,24px);width:18px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(201,58,38,.9) 30%,rgba(201,58,38,.9) 70%,rgba(0,0,0,.22));pointer-events:none}
.sec-cover::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:759px){.sec-cover{padding:96px 0 88px}.elastique{right:10px;width:12px}.cover{padding-right:20px}}

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */
.phead{padding:calc(var(--top) + 72px) 0 72px}
.fil{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:28px;font:400 15px/1.4 var(--f-texte);color:var(--text-secondary)}
.fil a{display:inline-flex;align-items:center;min-height:32px;text-decoration:underline;text-decoration-color:rgba(72,82,127,.45);text-underline-offset:4px}
.fil li+li::before{content:"/";margin-right:10px;color:rgba(72,82,127,.6)}
@media (pointer:coarse){.fil a{min-height:44px}}
.p-t{font-size:clamp(48px,7vw,104px);line-height:.98;letter-spacing:-.035em}
.phead .chapeau{font-size:22px;line-height:36px;max-width:40ch;margin-top:28px}
.phead .marge{margin-top:12px}
.fin-page{padding:120px 0 144px}
.fin-page .fin-in{display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px}
.fin-page .fin-txt{font:800 clamp(28px,3vw,40px)/1.1 var(--f-titre);letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
@media (max-width:759px){.phead{padding:calc(var(--top) + 48px) 0 48px}.phead .chapeau{font-size:20px;line-height:32px}.fin-page{padding:88px 0 104px}}

/* Nos formations */
.offres{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:48px 40px;align-items:start}
.offre{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:22px 26px 28px;transform:rotate(var(--tilt,0deg))}
.offre::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.offre>*{position:relative}
.offre--large{grid-row:1/span 2}
.offre .tirage{margin:4px 0 22px;--tilt:.4deg}
.offre .tirage img{aspect-ratio:4/3;object-fit:cover}
.offre h3{font-size:clamp(28px,2.6vw,36px);letter-spacing:-.02em}
.offre-meta{margin:10px 0 14px;font:600 16px/1.5 var(--f-titre);color:var(--text-secondary)}
.offre-dates{margin-top:12px;font:500 23px/1.15 var(--f-main);color:var(--accent-hover)}
.offre .lien{margin-top:10px}
.offre .note-conseil{position:absolute;left:calc(-1*var(--marge) - 40px);top:64px;width:calc(var(--marge) + 10px);text-align:right;transform:rotate(-5deg);z-index:4}
.offre .note-conseil .ink{left:30%;top:calc(100% + 6px);width:62px;height:70px}
@media (max-width:1023px){.offres{grid-template-columns:minmax(0,1fr)}.offre--large{grid-row:auto}.offre .note-conseil{position:relative;left:auto;top:auto;width:auto;text-align:left;display:block;margin:0 0 12px;transform:rotate(-2deg)}.offre .note-conseil .ink{display:none}}
.modules{grid-column:1/-1!important;border-top:2px solid rgba(31,42,92,.2)}
.module{position:relative;display:grid;grid-template-columns:var(--marge) 72px minmax(0,4fr) minmax(0,6fr);column-gap:24px;padding:28px 0;border-bottom:2px dotted rgba(72,82,127,.4);align-items:start}
.module-duree{grid-column:1;justify-self:end;text-align:right;font:500 25px/1 var(--f-main);color:var(--accent-hover);transform:rotate(-3deg);padding-top:10px}
.module-num{grid-column:2;display:flex;align-items:flex-start;gap:8px}
.module-num .n{font:800 40px/1 var(--f-titre);letter-spacing:-.03em}
.module-dessin{width:56px;height:56px;margin-top:-4px;color:var(--text-primary)}
.module-dessin path,.module-dessin circle,.module-dessin ellipse{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.module-tete{grid-column:3}
.module-tete h3{font-size:24px;line-height:1.15;letter-spacing:-.015em}
.module-meta{margin-top:8px;font:400 15px/1.5 var(--f-texte);color:var(--text-secondary)}
.module-txt{grid-column:4}
.module-txt .note{margin-top:8px;font-size:23px}
.module-pre{margin-top:8px;font:400 15px/1.5 var(--f-texte);color:var(--text-secondary)}
.module-pre strong{color:var(--text-primary)}
@media (max-width:1023px){.module{grid-template-columns:var(--marge) 64px minmax(0,1fr)}.module-txt{grid-column:3;margin-top:12px}.module-num{flex-direction:column}}
@media (max-width:759px){.module{grid-template-columns:56px minmax(0,1fr);column-gap:14px}.module-duree{grid-column:2;grid-row:3;justify-self:start;text-align:left;padding-top:10px;transform:rotate(-2deg)}.module-num{grid-column:1;grid-row:1/span 2}.module-tete,.module-txt{grid-column:2}.module-dessin{width:44px;height:44px}.module-num .n{font-size:32px}}
.grande-note{grid-column:2/span 10!important;position:relative;padding:40px 0 0}
.grande-note h2{font:700 clamp(40px,4.6vw,64px)/1 var(--f-main);color:var(--accent);letter-spacing:0;transform:rotate(-2deg);transform-origin:0 50%}
.grande-note p.gn{margin-top:18px;font:500 clamp(28px,3vw,40px)/1.15 var(--f-main);color:var(--text-primary);max-width:30ch;transform:rotate(-1deg);transform-origin:0 50%}
.grande-note .actions{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
@media (max-width:759px){.grande-note{grid-column:1!important}}

/* Fiche formation */
.bristol{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:48px 48px 44px 64px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:40px;transform:rotate(-.3deg)}
.bristol::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(transparent 0 27px,rgba(72,82,127,.14) 27px 28px);pointer-events:none}
.bristol>*:not(.spirale){position:relative}
.bristol .p-t{font-size:clamp(40px,5vw,72px)}
.bristol .chapeau{max-width:36ch}
.donnees{margin-top:32px;display:grid;gap:0}
.donnees div{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;padding:10px 0;border-top:1px solid rgba(72,82,127,.25)}
.donnees dt{font:600 13px/1.9 var(--f-titre);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.donnees dd{font:400 16px/26px var(--f-texte)}
.bristol .cta{margin-top:32px}
.bristol-photo{align-self:start;margin-top:8px}
.bristol-photo .tirage{--tilt:1.2deg}
.bristol-photo .tirage img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:1023px){.bristol{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:40px 28px 36px 48px}}
@media (max-width:759px){.bristol{padding:32px 18px 30px 36px}.bristol .spirale--v{left:-12px}.donnees div{grid-template-columns:minmax(0,1fr);row-gap:2px}}
.savoir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 48px}
.savoir li{font:400 18px/28px var(--f-texte)}
.savoir li+li{margin-top:0}
@media (max-width:759px){.savoir{grid-template-columns:minmax(0,1fr)}}
.semaines{position:relative}
.semaines{grid-column:1/-1!important}
.semaine{position:relative;display:grid;grid-template-columns:var(--marge) 64px minmax(0,6fr) minmax(0,5fr);column-gap:24px;align-items:center;min-height:56px;border-bottom:1.5px solid rgba(72,82,127,.28)}
.semaine .cnum{grid-column:2;font-size:28px;justify-self:center}
.semaine .sm-l{grid-column:3;font:400 17px/1.4 var(--f-texte)}
.semaine .sm-l b{font:600 13px/1 var(--f-titre);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-right:12px}
.semaine .note{grid-column:4;justify-self:start;font-size:24px;transform:rotate(-3deg);line-height:1}
@media (max-width:759px){.semaine{grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding:6px 0}.semaine .cnum{grid-column:1}.semaine .sm-l{grid-column:2}.semaine .note{grid-column:2;justify-self:start;text-align:left;padding-bottom:6px}}
.journee{position:relative;display:grid;gap:0}
.journee::before{content:"";position:absolute;left:calc(var(--marge) + 11px);top:16px;bottom:16px;width:2px;background:repeating-linear-gradient(var(--text-secondary) 0 6px,transparent 6px 11px);opacity:.55}
.heure{display:grid;grid-template-columns:var(--marge) 24px minmax(0,1fr);column-gap:24px;align-items:baseline;padding:14px 0}
.heure .h{grid-column:1;justify-self:end;font:700 28px/1 var(--f-main);color:var(--accent)}
.heure .pt-h{grid-column:2;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--canvas-deep);align-self:center}
.heure p{grid-column:3;font:400 18px/28px var(--f-texte)}
@media (max-width:759px){.journee::before{left:83px}.heure{grid-template-columns:66px 12px minmax(0,1fr);column-gap:12px}.heure .h{font-size:24px}}
.cadre{position:relative;padding:48px 56px}
.cadre .ink{inset:0}
.cadre p{font:300 clamp(22px,2.2vw,30px)/1.5 var(--f-texte);max-width:40ch}
@media (max-width:759px){.cadre{padding:36px 22px}}
.eval{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start}
.eval .sec-t{margin:0}
.eval p{font:400 18px/30px var(--f-texte);max-width:52ch}
.grille-gestes{margin-top:24px;width:220px;height:auto;color:var(--text-secondary)}
.grille-gestes path,.grille-gestes rect{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.grille-gestes .ok{stroke:var(--accent);stroke-width:2.4}
@media (max-width:759px){.eval{grid-template-columns:minmax(0,1fr);row-gap:24px}}
.apres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.apres li{position:relative;padding:22px 22px 24px;background:var(--panel);border-radius:4px;box-shadow:var(--shadow-s);transform:rotate(var(--tilt,0deg))}
.apres svg{width:64px;height:64px;margin-bottom:14px;color:var(--text-primary)}
.apres svg path,.apres svg rect,.apres svg circle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.apres h3{font-size:21px;line-height:1.25;letter-spacing:-.01em}
.apres-p{margin-top:32px;max-width:60ch;font:300 20px/34px var(--f-texte)}
@media (max-width:759px){.apres{grid-template-columns:minmax(0,1fr);gap:22px}}

/* Financement */
.tarifs{width:100%;max-width:720px;border-collapse:collapse;font:400 18px/1.4 var(--f-texte)}
.tarifs caption{text-align:left}
.tarifs th,.tarifs td{padding:16px 8px;border-bottom:1.5px solid rgba(72,82,127,.3);text-align:left;vertical-align:baseline}
.tarifs th{font-weight:400}
.tarifs td{text-align:right;font:600 22px/1.2 var(--f-titre);white-space:nowrap}
.tarifs tr:first-child th,.tarifs tr:first-child td{border-top:1.5px solid rgba(72,82,127,.3)}
.tarifs-g{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:40px;align-items:start}
.tarifs-note{padding-top:8px}
.tarifs-note .note{position:relative;display:block;transform:rotate(-3deg);max-width:17ch}
.tarifs-note .ink{left:-36px;top:0;width:32px;height:40px}
.tarifs-inclus{margin-top:22px;font:300 18px/30px var(--f-texte)}
@media (max-width:759px){.tarifs-g{grid-template-columns:minmax(0,1fr);row-gap:24px}.tarifs td{font-size:19px}.tarifs th,.tarifs td{padding:14px 4px}.tarifs-note .ink{display:none}}
.situations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
.situation h3{font-size:clamp(24px,2.3vw,30px);letter-spacing:-.015em;margin-bottom:22px}
.etapes li{position:relative;padding-left:64px;font:400 17px/28px var(--f-texte);min-height:40px}
.etapes li+li{margin-top:16px}
.etapes .cnum{position:absolute;left:10px;top:-2px;font-size:26px}
@media (max-width:759px){.situations{grid-template-columns:minmax(0,1fr);gap:36px}}
.cpf{grid-column:2/span 9!important}
.cpf h2{font:700 clamp(40px,4.4vw,60px)/1 var(--f-main);color:var(--accent);letter-spacing:0;transform:rotate(-2deg);transform-origin:0 50%}
.cpf p{margin-top:18px;font:500 clamp(26px,2.6vw,34px)/1.2 var(--f-main);color:var(--text-primary);max-width:34ch;transform:rotate(-1deg);transform-origin:0 50%}
@media (max-width:759px){.cpf{grid-column:1!important}}
.calendrier{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:32px 32px 28px}
.calendrier::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.calendrier>*{position:relative}
.cal-mois{display:grid;grid-template-columns:120px repeat(16,minmax(0,1fr));align-items:end;border-bottom:1.5px solid rgba(72,82,127,.35);padding-bottom:8px}
.cal-mois span{font:500 20px/1 var(--f-main);color:var(--text-secondary);text-align:left;padding-left:2px}
.cal-mois .y b{display:block;margin-top:2px;font:600 11px/1 var(--f-titre);letter-spacing:.1em;color:var(--text-primary)}
.cal-mois span.cal-an{font:600 13px/1 var(--f-titre);letter-spacing:.1em;color:var(--text-primary)}
.cal-ligne{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;min-height:64px;border-bottom:1px dashed rgba(72,82,127,.3)}
.cal-lab{font:600 13px/1.3 var(--f-titre);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.cal-piste{position:relative;height:64px}
.cal-barre{position:absolute;top:14px;height:22px;left:calc(var(--s)/16*100%);width:calc((var(--e) - var(--s))/16*100%);background:rgba(242,166,140,.85);border-radius:3px 9px 4px 8px;transform:rotate(-.4deg)}
.cal-barre.alt{background:rgba(31,42,92,.2);box-shadow:inset 0 0 0 1.5px rgba(31,42,92,.45)}
.cal-barre span{position:absolute;left:0;top:26px;white-space:nowrap;font:400 13px/1.2 var(--f-texte);color:var(--text-primary)}
.cal-ferme{position:absolute;top:0;bottom:0;left:calc(var(--s)/16*100%);width:calc((var(--e) - var(--s))/16*100%);background:repeating-linear-gradient(-45deg,rgba(168,46,29,.5) 0 1.5px,transparent 1.5px 6px)}
.cal-note{margin-top:22px;display:flex;align-items:center;gap:14px}
.cal-note .ech{flex:none;width:30px;height:20px;background:repeating-linear-gradient(-45deg,rgba(168,46,29,.5) 0 1.5px,transparent 1.5px 6px);border:1px solid rgba(168,46,29,.4)}
.cal-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:36px}
@media (max-width:959px){.cal-visuel{display:none}.cal-liste{grid-template-columns:minmax(0,1fr);margin-top:0}.calendrier{padding:28px 20px 24px}}
.cal-liste h3{font:600 13px/1.3 var(--f-titre);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:10px}
.cal-liste li{position:relative;padding:8px 0 8px 22px;font:400 17px/1.45 var(--f-texte)}
.cal-liste li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:12px;border-radius:2px 5px 3px 4px;background:rgba(242,166,140,.9)}
.cal-liste .alt li::before{background:rgba(31,42,92,.25);box-shadow:inset 0 0 0 1.5px rgba(31,42,92,.5)}
.defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px}
.defs div{padding-top:14px;border-top:2px solid rgba(72,82,127,.25)}
.defs dt{font:800 22px/1.2 var(--f-titre);letter-spacing:-.01em;margin-bottom:8px}
.defs dd{font:400 17px/28px var(--f-texte);max-width:46ch}
@media (max-width:759px){.defs{grid-template-columns:minmax(0,1fr);gap:28px}}

/* L'école */
.grande-phrase{font:800 clamp(44px,6.4vw,96px)/1 var(--f-titre);letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.histoire{display:grid;grid-template-columns:var(--marge) minmax(0,6fr) minmax(0,6fr);column-gap:24px;margin-top:72px;align-items:start}
.histoire .h-marge{grid-column:1;display:grid;gap:96px;padding-top:6px}
.histoire .h-marge .note{text-align:right;transform:rotate(-4deg)}
.histoire .h-txt{grid-column:2}
.histoire .h-txt p{font:400 18px/31px var(--f-texte)}
.histoire .h-txt p+p{margin-top:24px}
.histoire .h-img{grid-column:3}
@media (max-width:759px){.histoire{grid-template-columns:minmax(0,1fr);row-gap:24px;margin-top:48px}.histoire .h-marge,.histoire .h-txt,.histoire .h-img{grid-column:1}.histoire .h-marge{display:flex;flex-wrap:wrap;gap:8px 24px;order:2}.histoire .h-marge .note{text-align:left;transform:rotate(-2deg)}.histoire .h-img{order:3}}
.equipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:start}
.membre:nth-child(2){margin-top:96px}
.membre:nth-child(3){margin-top:192px}
.membre .tirage img{aspect-ratio:4/5;object-fit:cover}
.membre h3{margin-top:22px;font-size:28px;letter-spacing:-.02em}
.membre .role{margin-top:4px;font:600 15px/1.45 var(--f-titre);color:var(--text-secondary)}
.membre p.txt{margin-top:12px}
.membre .note{margin-top:12px;transform:rotate(-2deg);transform-origin:0 50%}
@media (max-width:1023px){.equipe{grid-template-columns:repeat(2,minmax(0,1fr))}.membre:nth-child(2){margin-top:72px}.membre:nth-child(3){margin-top:0}}
@media (max-width:759px){.equipe{grid-template-columns:minmax(0,1fr);gap:56px}.membre:nth-child(n){margin-top:0}.membre{max-width:420px}.membre:nth-child(2){margin-left:24px}}
.resultats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:start}
.resultats li{display:grid;justify-items:start;row-gap:16px}
.resultats .chiffre{font-size:clamp(64px,7vw,104px)}
.resultats p{font:400 18px/28px var(--f-texte);max-width:26ch}
.source{margin-top:40px;font:300 15px/24px var(--f-texte);color:var(--text-secondary);max-width:70ch}
@media (max-width:759px){.resultats{grid-template-columns:minmax(0,1fr);gap:32px}}
.carte-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:center}
.carte{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:16px;transform:rotate(-.6deg)}
.carte::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.carte svg{position:relative;width:100%;height:auto;overflow:visible}
.carte .trait{fill:none;stroke:var(--text-secondary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.carte .eau{fill:none;stroke:var(--text-primary);stroke-width:3;stroke-linecap:round;opacity:.75}
.carte .route{fill:none;stroke:var(--text-secondary);stroke-width:1.2;stroke-dasharray:3 5;stroke-linecap:round}
.carte .pt-b{fill:var(--accent)}
.carte .pt-b-o{fill:none;stroke:var(--accent);stroke-width:1.4}
.carte .ecole{fill:var(--text-primary)}
.carte text{font:500 22px var(--f-main);fill:var(--text-primary)}
.carte text.t-a{fill:var(--accent-hover)}
.carte-txt p{font:400 18px/30px var(--f-texte)}
@media (max-width:1023px){.carte-g{grid-template-columns:minmax(0,1fr);row-gap:32px}}
.paroles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
.parole:nth-child(1){grid-column:1/span 6}
.parole:nth-child(2){grid-column:6/span 6;margin-top:120px}
.parole .fiche{padding:30px 30px 26px}
.parole blockquote p{font:300 clamp(22px,2vw,26px)/1.45 var(--f-texte)}
.parole figcaption{margin-top:18px;font:300 15px/22px var(--f-texte);color:var(--text-secondary)}
.parole figcaption strong{display:block;font:600 17px/1.3 var(--f-titre);color:var(--text-primary)}
.parole .note{margin-top:12px;transform:rotate(-2deg);transform-origin:0 50%}
@media (max-width:759px){.paroles{grid-template-columns:minmax(0,1fr)}.parole:nth-child(n){grid-column:1;margin-top:0}.parole:nth-child(2){margin-left:20px}}

/* Recevoir le programme */
.prog-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:start}
.formulaire{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:40px 40px 36px;transition:padding .5s var(--ease-sheet)}
.formulaire::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grid-bg);background-size:24px 24px;pointer-events:none}
.formulaire>*{position:relative}
.champ{margin-bottom:22px}
.champ>label,.champ legend{display:block;margin-bottom:8px;font:600 16px/1.3 var(--f-titre)}
.champ fieldset{border:0;padding:0;margin:0;min-width:0}
.champ input[type=text],.champ input[type=email],.champ input[type=tel],.champ textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--text-secondary);border-radius:6px;background:#FFFAE6;font:400 17px/1.4 var(--f-texte);color:var(--text-primary);transition:border-color .2s ease,box-shadow .2s ease}
.champ textarea{min-height:128px;resize:vertical}
.champ input::placeholder,.champ textarea::placeholder{color:#6A7196;opacity:1}
.champ input:focus-visible,.champ textarea:focus-visible{outline:3px solid var(--text-primary);outline-offset:2px}
.champ [aria-invalid="true"]{border-color:var(--accent-hover);box-shadow:0 0 0 1px var(--accent-hover)}
.erreur{margin-top:6px;font:400 15px/1.4 var(--f-texte);color:var(--accent-hover)}
.erreur[hidden]{display:none}
.choix{display:flex;flex-wrap:wrap;gap:6px 18px}
.choix .opt{font-size:16px}
.rappel{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;margin:4px 0 22px;font:400 17px/1.3 var(--f-texte);position:relative}
.rappel input{position:absolute;opacity:0;width:32px;height:32px;margin:0;left:0;cursor:pointer}
.rappel .mod-box{flex:none}
.rappel input:checked+.mod-box .v{stroke-dashoffset:0}
.rappel input:focus-visible+.mod-box{outline:3px solid var(--text-primary);outline-offset:2px;border-radius:4px}
.formulaire .cta{margin-top:8px}
.succes{display:none;text-align:left}
.formulaire.fait .form-corps{display:none}
.formulaire.fait{padding:48px 40px}
.formulaire.fait .succes{display:block}
.succes svg{width:120px;height:120px;overflow:visible;margin-bottom:24px}
.succes svg path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1}
.succes svg .pr{opacity:.55;stroke-width:4}
.formulaire.fait .succes svg path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-pen) .25s}
.succes p{font:800 clamp(24px,2.4vw,32px)/1.2 var(--f-titre);letter-spacing:-.015em;max-width:26ch}
.succes p.demo{margin-top:14px;font:300 18px/30px var(--f-texte);letter-spacing:0;max-width:44ch}
.formulaire.pli{animation:pli .55s var(--ease-sheet)}
@keyframes pli{0%{transform:scaleY(1)}40%{transform:scaleY(.94) rotate(-.6deg)}100%{transform:none}}
.prog-notes{display:grid;gap:28px;padding-top:12px}
.prog-notes .fiche{padding:20px 22px}
.prog-notes .note{font-size:25px;line-height:1.15;color:var(--text-primary)}
.prog-notes .note a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.parcours-bloc{position:relative;background:var(--panel);border-radius:4px;box-shadow:var(--shadow);padding:26px 26px 22px;transform:rotate(.6deg);border-top:6px solid var(--accent-muted)}
.parcours-bloc[hidden]{display:none}
.parcours-bloc h2{font-size:28px;letter-spacing:-.02em;margin-bottom:14px}
.parcours-bloc ul{display:grid;gap:4px;margin-bottom:14px}
.parcours-bloc li{display:flex;align-items:center;gap:10px;font:400 16px/1.4 var(--f-texte)}
.parcours-bloc li i{flex:none;width:14px;height:14px;border:1px solid rgba(31,42,92,.35);border-radius:2px;background:var(--pat)}
.parcours-bloc .pb-l{font:400 16px/1.5 var(--f-texte)}
.parcours-bloc .pb-l strong{font-family:var(--f-titre)}
@media (max-width:1023px){.prog-g{grid-template-columns:minmax(0,1fr);row-gap:48px}}
@media (max-width:759px){.formulaire{padding:28px 18px 26px}}

/* =====================================================================
   Entrées par type (seulement avec JS et sans réduction des animations)
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  html.js .rv-t{opacity:0;transform:translateY(8px)}
  html.js .rv-t.in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s var(--ease-sheet)}
  html.js .rv-t .hl::before{transform:scaleX(0) rotate(-.6deg)}
  html.js .rv-t.in .hl::before{transform:scaleX(1) rotate(-.6deg);transition:transform .55s var(--ease-marker) .4s}
  html.js .rv-p{opacity:0;transform:translateY(8px)}
  html.js .rv-p.in{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0)*90ms),transform .45s var(--ease-sheet) calc(var(--i,0)*90ms)}
  html.js .rv-f{opacity:0;transform:translateY(16px) rotate(calc(var(--tilt,0deg) + 1.5deg))}
  html.js .rv-f.in{opacity:1;transform:rotate(var(--tilt,0deg));transition:opacity .5s ease calc(var(--i,0)*90ms),transform .5s var(--ease-sheet) calc(var(--i,0)*90ms)}
  html.js .rv-ph{opacity:0}
  html.js .rv-ph .tape{opacity:0;transform:rotate(-8deg) translateY(-6px) scale(1.25)}
  html.js .rv-ph .tape--r{transform:rotate(8deg) translateY(-6px) scale(1.25)}
  html.js .rv-ph.in{opacity:1;transition:opacity .45s ease calc(var(--i,0)*90ms)}
  html.js .rv-ph.in .tape{opacity:1;transform:rotate(-8deg);transition:opacity .18s ease calc(.45s + var(--i,0)*90ms),transform .18s var(--ease-sheet) calc(.45s + var(--i,0)*90ms)}
  html.js .rv-ph.in .tape--r{transform:rotate(8deg);transition-delay:calc(.63s + var(--i,0)*90ms)}
  html.js .rv-ph.in .tape.fremit{transition:opacity .18s ease .63s}
  html.js .settled,html.js .settled .tape{transition-delay:0s!important}
  html.js .checks .ck .v{stroke-dashoffset:1}
  html.js .checks.in .ck .v{stroke-dashoffset:0;transition:stroke-dashoffset .32s var(--ease-pen) calc(.2s + var(--i,0)*120ms)}
  html.js .reecrit{clip-path:inset(-20% 100% -30% -10%)}
  html.js .in .reecrit{clip-path:inset(-20% -10% -30% -10%);transition:clip-path .8s var(--ease-pen) 1.3s}
  .respire,.retrace path,.retrace svg,.fremit{animation-play-state:paused}
  .sec.vis .respire,.sec.vis .retrace path,.sec.vis .retrace svg,.sec.vis .fremit{animation-play-state:running}
}

/* Réduire les animations : tout est tracé, pétales retirés, lumière immobile */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pt{display:none}
  .amb-sun{transform:translateX(18vw)}
  .logo .sp,.main-u path,.arr path,.ck .v,.sommaire .som-n path,.succes svg path{stroke-dashoffset:0!important}
  .logo-w{clip-path:none}
  .cp-reac-t{clip-path:none!important}
  .sommaire{transform:none}
}
@media print{.amb,.nav,.sommaire,.stage,.ring{display:none!important}html.scrub .hero{height:auto}}

/* Ajustements des pages intérieures */
.phead .wrap>nav{margin-bottom:0}
.phead--fiche .bristol{grid-column:2/-1}
.cal-ligne .cal-lab{margin:0}
@media (max-width:759px){.faq{grid-column:1!important}.semaine .note{grid-column:2;font-size:22px}}
/* Téléphone : une seule colonne. Cette règle passe après toutes les places de colonnes posées plus haut
   (têtes de section, fiche bristol...), sinon elles créent des colonnes implicites qui écrasent le texte. */
@media (max-width:759px){.g>*{grid-column:1/-1!important}}
/* Très petits téléphones (320 px) : la barre garde logo, « Programme » et « Sommaire » dans l’écran */
@media (max-width:359px){.logo{font-size:22px;gap:6px}.logo svg{width:24px;height:24px}.nav-in{gap:6px}.nav .nav-prog{padding:10px 10px!important;font-size:14px!important}.nav .nav-som{font-size:15px;padding:0 4px}}
/* Petit téléphone debout (375 x 667) : la fiche du bas tient sous le pied du bouquet */
@media (orientation:portrait) and (max-height:700px){.f6-b,.hero-static .f6-b{bottom:calc(8px + env(safe-area-inset-bottom))}.f6-b .fiche,.hero-static .f6-b .fiche{padding:12px 16px}.f6-row{margin-top:8px}}