:root{--ink:#191722;--paper:#f5f3ed;--white:#fff;--sage:#c8ddcd;--berry:#d84d70;--ice:#d8e1e7;--muted:#6c6873;--line:rgba(25,23,34,.18);--pad:max(22px,5vw);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}::selection{background:var(--berry);color:#fff}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.05;background-image:radial-gradient(circle,rgba(25,23,34,.48) 0 1px,transparent 1.2px);background-size:14px 14px}.site-header{position:fixed;z-index:80;inset:0 0 auto;height:72px;background:rgba(245,243,237,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--ink)}.nav{height:100%;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.logo{font:800 22px "Manrope",sans-serif;letter-spacing:-.07em;display:flex;align-items:center;gap:10px}.logo-mark{width:29px;height:13px;border:2px solid;border-radius:99px;position:relative}.logo-mark:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--berry);right:1px;top:1px}.nav-links{display:flex;gap:28px;font-size:12px;font-weight:750}.nav-links a{opacity:.55;transition:.25s}.nav-links a:hover,.nav-links a.active{opacity:1}.nav-action{justify-self:end;border-left:1px solid;height:72px;padding-left:25px;display:flex;align-items:center;font-size:12px;font-weight:800}.nav-action span{background:var(--ink);color:#fff;padding:12px 17px;border-radius:99px;transition:.25s}.nav-action:hover span{background:var(--berry)}.burger{display:none;justify-self:end;border:0;background:none;font-size:25px}.mobile-menu{position:fixed;z-index:75;inset:72px 0 0;background:var(--ink);color:#fff;padding:55px 25px;display:flex;flex-direction:column;clip-path:inset(0 0 100%);transition:clip-path .5s var(--ease)}.mobile-menu.open{clip-path:inset(0)}.mobile-menu a{font:700 clamp(38px,12vw,66px)/1 "Manrope",sans-serif;letter-spacing:-.05em;padding:13px 0;border-bottom:1px solid #ffffff30}
.page-head{padding:150px var(--pad) 70px;min-height:72vh;display:flex;align-items:end;border-bottom:1px solid}.head-inner{width:min(1300px,100%);margin:auto}.eyebrow{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.14em}.page-head h1{font:750 clamp(62px,8.4vw,128px)/.88 "Manrope",sans-serif;letter-spacing:-.078em;margin:22px 0;max-width:1150px}.page-head h1 em{font-style:normal;color:var(--berry)}
/* ⚠️ SUR FOND FRAMBOISE, LE MOT ACCENTUÉ DEVENAIT INVISIBLE (2026-08-13).
   La page clients titre « Une seule manière de <em>décider.</em> » sur un
   aplat framboise, et l'emphase est framboise : le mot le plus important
   de la page ne s'affichait pas. Le titre se lisait « Une seule manière
   de », et il fallait ouvrir le HTML pour comprendre qu'il manquait un
   mot. Sur cet aplat, l'emphase passe donc en porcelaine. */
.case-hero h1 em,.closing h1 em,.closing h2 em{color:var(--paper)}.head-bottom{display:grid;grid-template-columns:1fr .55fr;gap:70px;align-items:end}.head-bottom p{font-size:18px;line-height:1.55;max-width:540px;margin:0}.button{border:1px solid;border-radius:99px;padding:13px 18px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:12px;transition:.25s;background:transparent}.button.primary{background:var(--ink);color:#fff}.button:hover{background:var(--sage);color:var(--ink);transform:translateY(-2px)}
.ticker{border-bottom:1px solid;overflow:hidden;background:var(--sage)}.ticker-track{width:max-content;display:flex;animation:ticker 24s linear infinite}.ticker span{padding:16px 30px;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.ticker span:after{content:"●";color:var(--berry);margin-left:60px}@keyframes ticker{to{transform:translateX(-50%)}}
.reveal{opacity:0;filter:blur(5px);transition:opacity .7s var(--ease),filter .7s var(--ease)}.reveal.seen{opacity:1;filter:none}.handoff-dot{position:fixed;z-index:90;width:13px;height:13px;border-radius:50%;background:var(--berry);opacity:0;box-shadow:0 0 0 7px rgba(216,77,112,.13);pointer-events:none;left:var(--x,50%);top:var(--y,50%);opacity:0;transition:opacity .2s}.motion-on .handoff-dot{opacity:1}
.relay-lab{background:var(--ink);color:#fff;padding:90px var(--pad)}.lab-inner{max-width:1300px;margin:auto}.lab-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:end;margin-bottom:50px}.lab-intro h2,.section-title{font:720 clamp(48px,6vw,88px)/.92 "Manrope",sans-serif;letter-spacing:-.06em;margin:0}.lab-intro p{color:#bbb;max-width:510px;line-height:1.6}.lab-stage{border:1px solid #ffffff55;border-radius:25px;min-height:520px;display:grid;grid-template-columns:260px 1fr;overflow:hidden}.lab-controls{border-right:1px solid #ffffff55;display:flex;flex-direction:column}.lab-control{flex:1;border:0;border-bottom:1px solid #ffffff30;background:transparent;color:#aaa;text-align:left;padding:24px;transition:.3s}.lab-control:last-child{border-bottom:0}.lab-control b{display:block;color:#fff;font-size:15px;margin-top:7px}.lab-control.active{background:var(--sage);color:var(--ink)}.lab-control.active b{color:var(--ink)}.lab-view{position:relative;overflow:hidden;background:var(--paper);color:var(--ink)}.lab-panorama{position:absolute;inset:0;transition:object-position .8s var(--ease),transform .8s var(--ease)}.lab-caption{position:absolute;left:25px;right:25px;bottom:25px;background:#f5f3ede8;backdrop-filter:blur(9px);border:1px solid;border-radius:16px;padding:18px;display:grid;grid-template-columns:1fr auto;gap:20px}.lab-caption b{font:700 21px "Manrope",sans-serif}.lab-caption span{font-size:12px;color:var(--muted)}.relay-object{position:absolute;z-index:3;top:46%;left:18%;width:80px;height:35px;border:2px solid var(--berry);border-radius:99px;background:#ffffff77;backdrop-filter:blur(5px);box-shadow:inset 0 0 0 9px #f5f3ed66,0 8px 28px #19172235;transition:left .8s var(--ease),transform .8s var(--ease)}.relay-object:after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:var(--berry);right:8px;top:7px;box-shadow:0 0 18px var(--berry)}
.principles{padding:95px var(--pad);background:var(--paper)}.principles-inner{max-width:1300px;margin:auto}.principle{display:grid;grid-template-columns:90px .8fr 1.2fr;gap:35px;padding:32px 0;border-top:1px solid;align-items:start}.principle:last-child{border-bottom:1px solid}.principle>span{font-size:11px;color:var(--berry);font-weight:850}.principle h3{font:700 28px "Manrope",sans-serif;letter-spacing:-.04em;margin:0}.principle p{margin:0;line-height:1.6;color:var(--muted);max-width:580px}
.story-stack{background:var(--paper)}.story{min-height:82vh;border-bottom:1px solid;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.story:nth-child(even){background:var(--sage)}.story-copy{padding:90px var(--pad);display:flex;flex-direction:column;justify-content:center}.story-no{font-size:11px;color:var(--berry);font-weight:850}.story h2{font:720 clamp(48px,6vw,88px)/.93 "Manrope",sans-serif;letter-spacing:-.065em;margin:22px 0}.story p{font-size:16px;line-height:1.65;max-width:520px}.story-meta{display:flex;gap:35px;margin-top:28px;padding-top:20px;border-top:1px solid;font-size:11px}.story-meta b{display:block;font-size:18px;margin-bottom:4px}.story-image{position:relative;min-height:560px;overflow:hidden}.story:nth-child(2) .story-image{order:-1}.story-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#19172218)}.signal-tag{position:absolute;z-index:2;left:25px;bottom:25px;background:var(--paper);border:1px solid;border-radius:14px;padding:14px 17px;font-size:11px;animation:float 4s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px)}}
.case-hero{background:var(--berry);color:var(--ink)}.case-study{background:var(--ink);color:#fff;padding:95px var(--pad)}.case-inner{max-width:1300px;margin:auto}.case-quote{font:680 clamp(50px,7vw,105px)/.93 "Manrope",sans-serif;letter-spacing:-.065em;margin:0 0 70px}.case-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px}.case-picture{height:530px;border-radius:24px;overflow:hidden;border:1px solid #ffffff60;position:relative}.case-copy{display:flex;flex-direction:column;justify-content:center}.case-copy p{color:#bbb;line-height:1.65}.results{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-block:1px solid #ffffff40}.result{padding:28px;border-right:1px solid #ffffff40}.result:last-child{border:0}.result strong{font:750 clamp(45px,5vw,72px) "Manrope",sans-serif;letter-spacing:-.06em;display:block;color:var(--sage)}.result span{font-size:11px;color:#bbb}.voices{padding:90px var(--pad);background:var(--ice)}.voices-inner{max-width:1300px;margin:auto}.voice{font:650 clamp(32px,4vw,57px)/1.08 "Manrope",sans-serif;letter-spacing:-.04em;max-width:1000px;padding:40px 0;border-top:1px solid}.voice:last-child{border-bottom:1px solid}.voice small{display:block;font:800 10px "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--berry);margin-top:20px}
.pricing-wrap{padding:90px var(--pad);background:var(--sage)}.pricing-inner{max-width:1200px;margin:auto}.billing{display:flex;justify-content:center;margin-bottom:35px}.billing-switch{display:flex;border:1px solid;border-radius:99px;padding:4px;background:var(--paper)}.billing-switch button{border:0;background:transparent;border-radius:99px;padding:10px 16px;font-size:11px;font-weight:800}.billing-switch button.active{background:var(--ink);color:#fff}.price-panel{display:grid;grid-template-columns:1.08fr .92fr;border:1px solid;border-radius:26px;overflow:hidden;background:var(--paper)}.price-main,.price-details{padding:55px}.price-main h2{font:720 clamp(55px,7vw,95px) "Manrope",sans-serif;letter-spacing:-.07em;margin:10px 0}.amount{font:760 clamp(78px,10vw,145px) "Manrope",sans-serif;letter-spacing:-.09em;line-height:1}.amount small{font:700 13px "DM Sans",sans-serif;letter-spacing:0}.price-details{background:var(--ink);color:#fff}.price-details h3{font:700 28px "Manrope",sans-serif;margin:0 0 25px}.price-details ul{list-style:none;padding:0;margin:0;border-top:1px solid #ffffff40}.price-details li{padding:16px 0;border-bottom:1px solid #ffffff30;font-size:13px}.price-details .button{margin-top:35px;border-color:#fff;width:100%;justify-content:center}.faq{padding:90px var(--pad)}.faq-inner{max-width:1000px;margin:auto}.faq details{border-top:1px solid;padding:22px 0}.faq details:last-child{border-bottom:1px solid}.faq summary{font:700 20px "Manrope",sans-serif;cursor:pointer}.faq p{color:var(--muted);line-height:1.6;max-width:760px}
.contact-page{min-height:100vh;padding:140px var(--pad) 70px;background:var(--ink);color:#fff}.contact-inner{max-width:1300px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:75px}.contact-copy{position:sticky;top:140px;align-self:start}.contact-copy h1{font:740 clamp(60px,7vw,105px)/.9 "Manrope",sans-serif;letter-spacing:-.075em;margin:20px 0}.contact-copy p{color:#bbb;line-height:1.65;max-width:430px}.contact-route{margin-top:45px;display:flex;align-items:center;gap:13px;font-size:11px;color:var(--sage)}.contact-route i{width:65px;height:2px;background:var(--berry);position:relative}.contact-route i:after{content:"";position:absolute;right:0;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--berry);animation:routePulse 2s infinite}@keyframes routePulse{50%{transform:translateX(-52px)}}.contact-form{background:var(--paper);color:var(--ink);border-radius:25px;padding:48px}.contact-form h2{font:700 37px "Manrope",sans-serif;letter-spacing:-.045em;margin:0 0 35px}.field{margin-bottom:24px}.field label{display:block;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}.field input,.field textarea,.field select{width:100%;border:0;border-bottom:1px solid;background:transparent;padding:12px 0;outline:none;border-radius:0}.field textarea{min-height:110px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--berry)}.contact-form .button{width:100%;justify-content:center;margin-top:15px}.form-note{font-size:10px;color:var(--muted);margin-top:15px;line-height:1.5}.form-success{display:none;margin-top:20px;padding:16px;background:var(--sage);border:1px solid;border-radius:13px;font-size:13px}.form-success.show{display:block}
.about-head{background:var(--sage)}.origin{padding:95px var(--pad);background:var(--paper)}.origin-inner{max-width:1300px;margin:auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:80px}.origin-copy{position:sticky;top:135px;align-self:start}.origin-copy h2{font:720 clamp(48px,5.5vw,80px)/.94 "Manrope",sans-serif;letter-spacing:-.06em;margin:18px 0}.origin-copy p{line-height:1.65;color:var(--muted)}.origin-story{position:relative;padding-left:65px}.origin-story:before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--ink)}.origin-story:after{content:"";position:absolute;left:0;top:10px;width:24px;height:24px;border-radius:50%;background:var(--berry);box-shadow:0 0 0 9px rgba(216,77,112,.14);animation:originTravel 7s var(--ease) infinite}@keyframes originTravel{0%,8%{top:10px}42%{top:46%}78%,100%{top:calc(100% - 34px)}}.origin-step{min-height:245px;padding:0 0 55px}.origin-step time{font-size:10px;font-weight:850;color:var(--berry);letter-spacing:.12em}.origin-step h3{font:700 clamp(30px,3.3vw,47px)/1 "Manrope",sans-serif;letter-spacing:-.045em;margin:14px 0}.origin-step p{line-height:1.65;max-width:660px}.manifesto{background:var(--berry);padding:95px var(--pad)}.manifesto-inner{max-width:1300px;margin:auto}.manifesto-line{font:680 clamp(42px,5.8vw,84px)/.98 "Manrope",sans-serif;letter-spacing:-.055em;padding:28px 0;border-bottom:1px solid;display:grid;grid-template-columns:90px 1fr;gap:20px}.manifesto-line span{font:850 11px "DM Sans",sans-serif;letter-spacing:.1em;padding-top:12px}.team{padding:95px var(--pad);background:var(--ice)}.team-inner{max-width:1300px;margin:auto}.team-head{display:grid;grid-template-columns:1fr .7fr;gap:70px;align-items:end;margin-bottom:55px}.team-head p{line-height:1.65;color:var(--muted)}.team-list{border-top:1px solid}.person{display:grid;grid-template-columns:.65fr .55fr 1fr;gap:35px;align-items:center;padding:26px 0;border-bottom:1px solid;position:relative;overflow:hidden}.person:before{content:"";position:absolute;left:-60px;width:42px;height:18px;border:2px solid var(--berry);border-radius:99px;transition:left .65s var(--ease)}.person:hover:before{left:calc(100% - 55px)}.person h3{font:700 clamp(27px,3vw,42px) "Manrope",sans-serif;letter-spacing:-.045em;margin:0}.person strong{font-size:11px;text-transform:uppercase;letter-spacing:.1em}.person p{margin:0;color:var(--muted);line-height:1.55}.company-facts{background:var(--ink);color:#fff;padding:75px var(--pad)}.facts-inner{max-width:1300px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #ffffff35}.fact{padding:28px;border-right:1px solid #ffffff35}.fact:last-child{border:0}.fact strong{display:block;font:740 clamp(38px,4.5vw,68px) "Manrope",sans-serif;letter-spacing:-.06em;color:var(--sage)}.fact span{font-size:11px;color:#aaa}
.closing{padding:85px var(--pad);background:var(--berry)}.closing-inner{max-width:1300px;margin:auto;display:flex;justify-content:space-between;align-items:end;gap:50px}.closing h2{font:720 clamp(48px,6vw,88px)/.92 "Manrope",sans-serif;letter-spacing:-.06em;margin:0;max-width:850px}footer{background:var(--ink);color:#fff;padding:60px var(--pad) 25px}.footer-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.5fr .5fr .5fr;gap:55px;padding-bottom:55px}.footer-brand strong{font:800 clamp(65px,10vw,135px)/.7 "Manrope",sans-serif;letter-spacing:-.085em}.footer-brand p{color:#aaa;max-width:420px;line-height:1.55;margin-top:40px}.footer-col{font-size:13px;line-height:2}.footer-col b{color:var(--sage);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}.footer-bottom{max-width:1300px;margin:auto;border-top:1px solid #ffffff30;padding-top:20px;display:flex;justify-content:space-between;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:900px){.nav-links,.nav-action{display:none}.nav{grid-template-columns:1fr auto}.burger{display:block}.head-bottom,.lab-intro,.case-grid,.price-panel,.contact-inner,.origin-inner,.team-head{grid-template-columns:1fr}.origin-copy{position:static}.lab-stage{grid-template-columns:1fr}.lab-controls{border:0;border-bottom:1px solid #ffffff55;display:grid;grid-template-columns:repeat(4,1fr)}.lab-control{padding:15px;border:0;border-right:1px solid #ffffff30}.lab-view{min-height:480px}.story{grid-template-columns:1fr}.story-image,.story:nth-child(2) .story-image{order:0}.case-copy{padding-bottom:20px}.contact-copy{position:static}.principle{grid-template-columns:55px 1fr}.principle p{grid-column:2}.person{grid-template-columns:1fr 1fr}.person p{grid-column:1/-1}.facts-inner{grid-template-columns:1fr 1fr}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid #ffffff35}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:620px){:root{--pad:20px}.site-header{height:62px}.mobile-menu{inset:62px 0 0}.page-head{padding-top:110px;min-height:680px}.page-head h1{font-size:55px}.head-bottom{gap:25px}.head-bottom p{font-size:15px}.lab-stage{min-height:550px}.lab-controls{grid-template-columns:1fr 1fr}.lab-control:nth-child(2){border-right:0}.lab-control b{font-size:12px}.lab-view{min-height:390px}.relay-object{width:61px;height:29px}.lab-caption{left:12px;right:12px;bottom:12px;grid-template-columns:1fr}.story{min-height:0}.story-copy{padding:65px 20px}.story h2{font-size:49px}.story-image{min-height:440px}.results{grid-template-columns:1fr}.result{border-right:0;border-bottom:1px solid #ffffff40}.price-main,.price-details,.contact-form{padding:35px 20px}.contact-page{padding-top:105px}.origin-story{padding-left:45px}.origin-step{min-height:210px}.manifesto-line{grid-template-columns:38px 1fr;font-size:40px}.person{grid-template-columns:1fr}.person p{grid-column:auto}.facts-inner{grid-template-columns:1fr}.fact{border-right:0;border-bottom:1px solid #ffffff35}.fact:nth-child(2){border-right:0}.closing-inner{display:block}.closing .button{margin-top:30px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-brand strong{font-size:75px}.footer-bottom{flex-direction:column;gap:12px}.handoff-dot{display:none}}
@media(pointer:fine){body{cursor:default}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;filter:none}.handoff-dot{display:none}}

/* ── UN CHOIX COURT SE FAIT EN BOUTONS (2026-08-13) ────────────────────────
   Le formulaire proposait un `<select>` pour l'équipe du demandeur. Règle de
   Jonas, sans exception : choix court = boutons, liste longue = pop-up
   filtrée, jamais de menu déroulant. Un `select` demande deux gestes au
   doigt, cache ses options tant qu'on n'a pas ouvert, et sur téléphone il
   déclenche un tiroir système qui sort de la page.

   Cinq équipes tiennent sur deux lignes : on les montre.

   Le bouton radio reste dans le flux, transparent mais FOCALISABLE : le
   parcours au clavier et les lecteurs d'écran continuent de fonctionner,
   ce qu'un `display:none` aurait cassé. */
.field-label{display:block;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin-bottom:11px}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* ⚠️ Ces trois annulations ne sont pas décoratives. Une pastille est un
   `<label>` posé dans un `.field`, et `.field label` impose 10 px, graisse
   850, MAJUSCULES et interlettrage — le style des intitulés de champ. Sans
   ça, le choix se lisait « OPÉRATIONS · FINANCE OU ACHATS », en petit et
   tout en capitales : illisible, et rien à voir avec un bouton. */
.choix-pastille{
  display:inline-block;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:0;padding:9px 15px;border:1px solid var(--line,#c9c6bd);border-radius:100px;
  font-size:13px;line-height:1;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.choix-pastille:hover{border-color:var(--ink)}
.choix-radio:checked + .choix-pastille{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Le liseré ne se montre qu'au clavier : à la souris il ferait doublon avec
   l'état coché. */
.choix-radio:focus-visible + .choix-pastille{outline:2px solid var(--berry);outline-offset:2px}

/* ── LE POINT QUI SUIT LA SOURIS : UN `opacity:0` OUBLIÉ ───────────────────
   `.handoff-dot` naît maintenant invisible (ajouté à sa règle de base,
   plus haut). Ce n'est pas une invention : Codex avait DÉJÀ écrit
   `.motion-on .handoff-dot{opacity:1}` et le JavaScript pose bien
   `motion-on` sur le corps quand le pointeur est fin. Il manquait juste
   l'état de départ, donc la règle ne servait à rien et le point était
   visible tout le temps.

   Sans ce correctif : un point framboise garé au centre de l'écran tant
   que personne n'a bougé la souris, et pour TOUJOURS sur un écran
   tactile, où `pointer:fine` ne matche jamais. */

/* ══════════════════════════════════════════════════════════════════════════
   LES PAGES DÉROULÉES — sécurité, légales, écrans système
   ══════════════════════════════════════════════════════════════════════════
   Codex livre sept pages. Un pack en demande seize : il manque celles qu'on
   ne dessine jamais parce qu'on ne les regarde jamais — l'erreur, l'attente,
   les mentions. Ce sont pourtant les seules que TOUS les visiteurs finissent
   par voir.

   Rien n'est réinventé ici : on reprend la charpente de Codex, et les rares
   règles nouvelles suivent ses mesures (max-width 1300, `--pad`, `--line`). */

/* La liste numérotée des engagements existait DANS l'accueil, en style en
   ligne. La page sécurité s'en sert aussi : elle remonte donc dans la
   feuille partagée, sinon la même grille serait écrite deux fois et les
   deux finiraient par diverger. */
.essentials{background:var(--paper);padding:80px var(--pad)}
.essentials-inner{max-width:1300px;margin:auto}
.essentials-title{margin-bottom:38px;color:var(--berry)}
.essential-row{display:grid;grid-template-columns:70px .85fr 1.15fr;gap:30px;padding:26px 0;border-top:1px solid var(--ink);align-items:center}
.essential-row:last-child{border-bottom:1px solid var(--ink)}
.essential-num{font-size:11px;font-weight:850;letter-spacing:.12em;color:var(--berry)}
.essential-row h3{font:700 26px "Manrope",sans-serif;letter-spacing:-.035em;margin:0}
.essential-row p{margin:0;line-height:1.55;color:var(--muted,#5d5a68)}

/* Le chapô d'une tête de page. Codex n'en avait pas besoin : ses sept pages
   posent leur phrase dans une colonne à part. Les pages déroulées, elles,
   ont une phrase et rien d'autre — sans largeur maximale, elle traverserait
   l'écran sur 1300 px et deviendrait illisible. */
.head-lead{max-width:620px;margin:26px 0 0;line-height:1.6;color:var(--muted,#5d5a68);font-size:17px}

/* ── CE QU'ON NE FAIT PAS ─────────────────────────────────────────────────
   Le pendant de la liste des engagements. Sur fond encre : la page bascule
   au moment où elle change de registre, et on ne relit pas deux fois la
   même mise en page. */
.refus{background:var(--ink);color:var(--paper);padding:80px var(--pad)}
.refus-inner{max-width:1300px;margin:auto}
.refus .section-title{color:var(--paper);margin:0 0 32px}
.refus-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-width:900px}
.refus-liste li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid rgba(245,243,237,.16);line-height:1.55}
.refus-liste li:before{content:"×";position:absolute;left:0;top:14px;color:var(--berry);font-size:20px;font-weight:800}
.refus-mot{margin:28px 0 0;color:rgba(245,243,237,.62);font-size:14px}

/* ── LES PAGES LÉGALES ────────────────────────────────────────────────────
   ⚠️ LES CLASSES `s-legal-*` SONT CELLES DE LA PRISE DU KIT, pas les
   miennes. Sur un vrai site, c'est le module `legal` qui produit ce
   balisage : en l'écrivant dès la maquette, le CSS d'aujourd'hui continuera
   de s'appliquer après branchement, sans une ligne à reprendre. */
.legal{background:var(--paper);padding:80px var(--pad) 110px}
.legal-inner{max-width:820px;margin:auto}
.s-legal-section{padding:34px 0;border-top:1px solid var(--line)}
.s-legal-section:first-child{border-top:0;padding-top:0}
.s-legal-heading{font:700 clamp(24px,2.6vw,32px)/1.15 "Manrope",sans-serif;letter-spacing:-.035em;margin:0 0 14px}
.s-legal-body p{margin:0;line-height:1.7;color:var(--muted,#5d5a68)}
.legal-note{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--muted,#5d5a68)}
.legal-note a{color:var(--ink)}

/* ── LES TROIS ÉCRANS SYSTÈME ─────────────────────────────────────────────
   Ni en-tête ni pied : un menu complet au-dessus d'une erreur invite à
   repartir dans dix directions quand le visiteur en cherche une seule. Et
   `noindex` sur les trois — une erreur ne représente pas le site.

   ⚠️ REPRIS LE 2026-08-14. La première version était un titre centré, une
   phrase, deux boutons : correct, et rien de plus. Jonas : « tu as fait le
   minimum ». Chacun raconte maintenant quelque chose dans le vocabulaire du
   produit, et porte une image — l'objet en transit, le chemin encore vide,
   l'objet posé. Enrichir, mais sans ajouter de portes. */
.sys{min-height:100svh;background:var(--ink);color:var(--paper);position:relative;display:flex}
.sys-grille{display:grid;grid-template-columns:1.05fr .95fr;width:100%;align-items:stretch}
.sys-mots{align-self:center;padding:clamp(40px,7vw,110px) clamp(28px,6vw,90px)}
.sys-code{font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:var(--berry);margin:0 0 20px}
.sys-titre{font:750 clamp(36px,4.6vw,68px)/1.02 "Manrope",sans-serif;letter-spacing:-.05em;margin:0;max-width:15ch}
.sys-titre em{font-style:normal;color:var(--berry)}
.sys-mot{margin:24px 0 0;max-width:44ch;line-height:1.65;color:rgba(245,243,237,.68)}

/* Deux repères, sur le patron de la légende du panorama : un écran d'attente
   qui ne dit ni combien de temps ni ce que deviennent les données laisse
   inventer le pire. */
.sys-fiche{display:flex;gap:44px;margin:34px 0 0;padding-top:22px;border-top:1px solid rgba(245,243,237,.18)}
.sys-fiche dt{font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,237,.5);margin:0}
.sys-fiche dd{margin:6px 0 0;font:700 17px "Manrope",sans-serif}

.sys-actions{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 0}
.sys .button{border-color:rgba(245,243,237,.35);color:var(--paper)}
.sys .button.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* L'image occupe toute la colonne de droite, sous un voile encre : elle
   appuie le propos sans devenir le sujet. */
.sys-vue{position:relative;min-height:320px;overflow:hidden}
.sys-vue:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(25,23,34,.55) 35%,rgba(25,23,34,.22) 100%)}

.sys-marque{position:absolute;left:clamp(28px,6vw,90px);bottom:34px;font:800 15px "Manrope",sans-serif;letter-spacing:-.02em;color:rgba(245,243,237,.32);text-decoration:none}
.sys-marque:hover{color:var(--paper)}

@media (max-width:860px){
  .sys-grille{grid-template-columns:1fr;grid-template-rows:auto 240px}
  .sys-mots{padding-top:90px}
  .sys-vue:after{background:linear-gradient(0deg,var(--ink) 0%,rgba(25,23,34,.2) 100%)}
  .sys-marque{position:static;display:block;padding:0 28px 30px}
}

@media (max-width:760px){
  .essential-row{grid-template-columns:46px 1fr;gap:14px}
  .essential-row p{grid-column:2}
}

/* Une tête de page déroulée n'a qu'un bouton, pas deux colonnes.
   `.head-bottom` est une grille `1fr .55fr` chez Codex — utile quand la
   tête porte un texte à gauche et une action à droite. Sur les pages
   déroulées elle ne porte que l'action : sans cette annulation, le bouton
   s'étirait sur toute la première colonne, soit plus de cinq cents pixels
   de pastille vide. */
.head-bottom:has(> .button:only-child){display:flex;gap:10px}

/* ══════════════════════════════════════════════════════════════════════════
   LES PAGES QUI SERONT REMPLIES PAR UN MODULE
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ Le balisage `s-*` de ces cinq pages n'est pas le mien : c'est celui que
   les PRISES du kit émettront une fois le pack branché. Il est écrit dès la
   maquette pour une raison précise — sans ça, le CSS de ce soir viserait des
   classes maison, ne s'appliquerait plus après branchement, et il faudrait
   redessiner ces pages une seconde fois.

     journal   ← articles/views/liste.php
     note      ← articles/views/article.php
     faq       ← faq/views/faq.php
     recherche ← search/views/search-form.php + search-results.php */

/* ── LE JOURNAL ──────────────────────────────────────────────────────────── */
.journal{background:var(--paper);padding:80px var(--pad) 100px}
.journal-inner{max-width:1300px;margin:auto}

/* La note à la une est DÉTACHÉE de la liste : une ligne de liste en plus
   gras n'est pas une mise en avant, c'est une ligne de liste en plus gras. */
.note-vedette{display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--ink);border-radius:26px;overflow:hidden;margin-bottom:70px;min-height:420px}
.note-vedette-visuel{background:var(--berry);position:relative}
.note-vedette-visuel img{position:absolute;inset:0;mix-blend-mode:luminosity;opacity:.55}
.note-vedette-copie{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.note-vedette-copie h2{font:700 clamp(28px,3.4vw,44px)/1.05 "Manrope",sans-serif;letter-spacing:-.045em;margin:16px 0 14px}
.note-vedette-copie .muted{line-height:1.6;margin:0}
.note-vedette-copie .button{align-self:flex-start}

/* La liste : une note par ligne, date à gauche, rubrique à droite. */
.s-articles{border-top:1px solid var(--line)}
.s-article{display:grid;grid-template-columns:1fr 190px;gap:24px 40px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding .3s var(--ease)}
.s-article:hover{padding-left:12px}
.s-article-title{grid-column:1;font:700 clamp(21px,2.4vw,31px)/1.15 "Manrope",sans-serif;letter-spacing:-.035em;margin:0}
.s-article-link{color:inherit;text-decoration:none}
.s-article-link:hover{color:var(--berry)}
.s-article-excerpt{grid-column:1;margin:8px 0 0;line-height:1.55;color:var(--muted,#5d5a68);font-size:15px}
.s-article-cat{grid-column:2;grid-row:1;justify-self:end;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--berry)}
.s-article-date{grid-column:2;grid-row:2;justify-self:end;font-size:12px;color:var(--muted,#5d5a68)}

/* ── UNE NOTE OUVERTE ─────────────────────────────────────────────────────
   Colonne de lecture à 720 px : au-delà, l'œil perd la ligne suivante. Le
   pack n'a pas de barre latérale — décision de Jonas, valable partout. */
.note-page{background:var(--paper);display:block}
.note-inner{max-width:720px;margin:auto;padding-inline:var(--pad)}
.note-tete{padding:150px 0 0}
.note-tete .fil{font-size:12px;color:var(--muted,#5d5a68);display:flex;gap:8px;margin-bottom:26px}
.note-tete .fil a{color:inherit}
.note-tete .s-article-cat{display:inline-block;grid-column:auto;justify-self:auto}
.note-tete .s-article-title{font:750 clamp(34px,4.6vw,58px)/1.03 "Manrope",sans-serif;letter-spacing:-.05em;margin:14px 0 22px}
.s-article-meta{display:flex;flex-wrap:wrap;gap:18px;padding-bottom:26px;border-bottom:1px solid var(--ink);font-size:13px;color:var(--muted,#5d5a68)}
.s-article-meta .s-article-date{grid-column:auto;grid-row:auto;justify-self:auto}
.s-article-body{padding:46px 0 20px}
.s-article-body p{line-height:1.75;margin:0 0 22px}
.s-article-body h2{font:700 clamp(23px,2.6vw,30px)/1.2 "Manrope",sans-serif;letter-spacing:-.035em;margin:42px 0 16px}
.note-pied{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding:32px 0 70px;border-top:1px solid var(--line)}
.note-signature b{display:block;font:800 17px "Manrope",sans-serif}
.note-signature span{font-size:13px;color:var(--muted,#5d5a68)}
.journal.suite{background:var(--ice);padding-top:70px}

/* ── LA FOIRE AUX QUESTIONS ───────────────────────────────────────────────
   Des `<details>` : ils s'ouvrent sans une ligne de JavaScript, et une page
   imprimée ou un moteur voit toutes les réponses. */
.faq-page{background:var(--paper);padding:80px var(--pad) 100px}
.faq-page-inner{max-width:880px;margin:auto}
.s-faq-item{border-top:1px solid var(--ink);padding:6px 0}
.s-faq-item:last-child{border-bottom:1px solid var(--ink)}
.s-faq-question{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;font:700 clamp(18px,2vw,24px)/1.3 "Manrope",sans-serif;letter-spacing:-.03em}
.s-faq-question::-webkit-details-marker{display:none}
.s-faq-question:after{content:"+";position:absolute;right:4px;top:22px;font-size:26px;font-weight:400;color:var(--berry);transition:transform .25s var(--ease)}
.s-faq-item[open] .s-faq-question:after{transform:rotate(45deg)}
.s-faq-answer{padding:0 40px 26px 0}
.s-faq-answer p{margin:0;line-height:1.7;color:var(--muted,#5d5a68)}

/* ── LA RECHERCHE ────────────────────────────────────────────────────────── */
.recherche{background:var(--paper);padding:80px var(--pad) 110px}
.recherche-inner{max-width:880px;margin:auto}
.recherche-ligne{display:flex;gap:10px;align-items:stretch;margin-top:4px}
.s-search-input{flex:1;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:14px 0;font-size:19px;outline:none;border-radius:0}
.s-search-input:focus-visible{border-bottom-width:2px}
.recherche-compte{margin:34px 0 4px;font-size:14px;color:var(--muted,#5d5a68)}
.s-search-results{border-top:1px solid var(--line);margin-top:14px}
.s-search-result{padding:26px 0;border-bottom:1px solid var(--line)}
.s-search-result-type{margin:0;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--berry)}
.s-search-result-title{font:700 clamp(19px,2.2vw,26px)/1.2 "Manrope",sans-serif;letter-spacing:-.03em;margin:8px 0 8px}
.s-search-result-title a{color:inherit;text-decoration:none}
.s-search-result-title a:hover{color:var(--berry)}
.s-search-result-excerpt{margin:0;line-height:1.6;color:var(--muted,#5d5a68)}
.s-search-result-excerpt mark{background:rgba(216,77,112,.18);color:inherit;padding:1px 2px}

/* ── LE SOMMAIRE ─────────────────────────────────────────────────────────── */
.sommaire{background:var(--paper);padding:80px var(--pad) 110px}
.sommaire-inner{max-width:1300px;margin:auto;display:grid;gap:64px}
.somm-titre{font:700 clamp(20px,2.2vw,26px)/1.2 "Manrope",sans-serif;letter-spacing:-.03em;margin:0 0 4px;color:var(--berry)}
.somm-liste{border-top:1px solid var(--ink)}
.somm-ligne{display:grid;grid-template-columns:250px 1fr 30px;gap:30px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;transition:padding .3s var(--ease)}
.somm-ligne:hover{padding-left:12px;background:rgba(25,23,34,.03)}
.somm-ligne b{font:700 19px "Manrope",sans-serif;letter-spacing:-.025em}
.somm-ligne span{color:var(--muted,#5d5a68);font-size:15px;line-height:1.5}
.somm-ligne i{font-style:normal;color:var(--berry);justify-self:end}

@media (max-width:860px){
  .note-vedette{grid-template-columns:1fr}
  .note-vedette-visuel{min-height:220px}
  .s-article{grid-template-columns:1fr}
  .s-article-cat,.s-article-date{grid-column:1;grid-row:auto;justify-self:start}
  .somm-ligne{grid-template-columns:1fr 26px}
  .somm-ligne span{grid-column:1}
}

/* ⚠️ LE BLOC DE FIN D'UNE NOTE EST UN `<footer>`, ET LE PACK EN STYLE UN.
   `footer{background:var(--ink);color:#fff;padding:60px var(--pad)}` vise la
   BALISE, pas une classe : le bloc de signature d'un article héritait donc du
   fond encre du pied de site, et se retrouvait en rectangle noir planté au
   milieu de la colonne de lecture.

   La balise reste `<footer>` — c'est bien le pied de l'article, et un lecteur
   d'écran doit le savoir. C'est le style qu'on annule, pas la sémantique. */
.note-pied{background:transparent;color:inherit;padding:32px 0 70px}

/* La vignette de la note à la une passe en gris glacé plutôt qu'en framboise.
   La page en avait DEUX aplats framboise — la vignette et l'appel du bas —
   et l'accent perd son rôle dès qu'il se répète : ce qui devait attirer l'œil
   se contentait de crier deux fois. */
.note-vedette-visuel{background:var(--ice)}
.note-vedette-visuel img{opacity:.85;mix-blend-mode:multiply}

/* ── CHAQUE SITUATION MÉTIER A SA SCÈNE ────────────────────────────────────
   Les trois blocs de `cas d'usage` recadraient le MÊME panorama à trois
   endroits (7 %, 53 %, 94 %). Le procédé est élégant — un objet qui voyage —
   mais sur une page qui promet trois situations différentes, il montre trois
   fois le même couloir.

   Les trois ont maintenant leur scène. Les deux premières sortent de Mystic ;
   la troisième vient de CODEX, qui l'a produite à la demande le 2026-08-14
   après QUATRE échecs de mon côté — le modèle refermait l'objet en flacon dès
   qu'on lui demandait un « tube de verre ». Sa formulation est dans CREDITS.md.

   `background-size` passe en `cover` : ces images sont cadrées, elles n'ont
   pas à glisser latéralement comme le panorama. Le survol qui recentre est
   donc neutralisé pour elles, sinon il ferait un saut sans raison. */

/* `n+3` et non `3` : la liste des situations est ajoutable depuis l'admin. Une
   quatrième serait retombée sur le panorama de secours, sans rapport avec
   elle. Elle reprend la troisième scène — c'est moins bien que sa propre
   image, c'est infiniment mieux qu'un décor étranger. */



/* La page entreprise reçoit l'objet au repos : c'est le lieu, pas le geste. */
.entreprise-lieu{min-height:520px;position:relative;overflow:hidden}

/* ══ LES DEUX PRISES DU PACK ══════════════════════════════════════════════
   L'équipe et les témoignages étaient écrits en dur dans les gabarits de
   Codex : quatre personnes et trois citations que personne n'aurait pu
   changer sans ouvrir le thème. Ils passent maintenant par les prises du kit,
   et le pack ne fait plus que les habiller — c'est tout son travail.

   Le markup n'est donc plus le nôtre : au lieu de .person et .voice, on
   habille les classes stables s-team-* et s-temoignage-*. Les mesures
   ci-dessous sont EXACTEMENT celles de Codex, reportées une à une : c'est le
   même dessin, avec une donnée qui vient enfin de l'admin. */

/* ── L'ÉQUIPE (page entreprise) ──────────────────────────────────────────
   Une ligne par personne : nom, rôle, présentation. */
.team .s-team{border-top:1px solid}
.team .s-team-member{display:grid;grid-template-columns:.65fr .55fr 1fr;gap:35px;align-items:center;padding:26px 0;border-bottom:1px solid;position:relative;overflow:hidden}
.team .s-team-name{font:700 clamp(27px,3vw,42px) "Manrope",sans-serif;letter-spacing:-.045em;line-height:1}
.team .s-team-role{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.team .s-team-bio{margin:0;color:var(--muted);line-height:1.55}

/* La photo est facultative dans le module. Quand elle est là, elle prend la
   place du nom en tête de ligne plutôt que de casser la grille en trois. */
.team .s-team-member:has(.s-team-photo){grid-template-columns:78px .55fr .5fr 1fr}
.team .s-team-photo{width:78px;height:78px;border-radius:50%;object-fit:cover;border:1px solid var(--ink)}

/* Les liens sociaux : le module les fournit, la ligne les pose à sa droite.
   Pas d'icône de marque ici — la page est écrite, pas pictographique. */
.team .s-team-links{grid-column:1/-1;list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.team .s-team-link{display:inline-block;border:1px solid;border-radius:99px;padding:6px 13px;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;transition:.25s}
.team .s-team-link:hover{background:var(--ink);color:var(--paper)}

/* Le titre portait un style en attribut chez Codex. Un gabarit ne décide pas
   d'une marge : elle revient à la feuille. */
.team-head .section-title{margin-top:18px}

/* ── LES TÉMOIGNAGES (page clients) ──────────────────────────────────────
   De grandes phrases empilées, séparées d'un filet. */
.voices .s-temoignage{max-width:1000px;margin:0;padding:40px 0;border-top:1px solid}
.voices .s-temoignage:last-child{border-bottom:1px solid}
.voices .s-temoignage-quote{font:650 clamp(32px,4vw,57px)/1.08 "Manrope",sans-serif;letter-spacing:-.04em;margin:0}

/* Les guillemets sont posés par la feuille, comme dans Le Fournil : la phrase
   saisie dans l'admin n'a pas à porter sa ponctuation d'affichage, et personne
   n'a à se demander s'il doit les taper. */
.voices .s-temoignage-quote::before{content:"«\00a0"}
.voices .s-temoignage-quote::after{content:"\00a0»"}

.voices .s-temoignage-author{display:flex;align-items:center;gap:0;font:800 10px "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--berry);margin-top:20px}
.voices .s-temoignage-photo{margin-right:12px;width:34px;height:34px;border-radius:50%;object-fit:cover}
.voices .s-temoignage-context::before{content:"\00a0·\00a0"}

/* La note est facultative et rare sur ce registre. Discrète plutôt que
   masquée : un contenu saisi s'affiche toujours. */
.voices .s-temoignage-rating{font-size:11px;font-weight:800;color:var(--muted);margin-top:12px}

/* ══ TROIS AJUSTEMENTS DE GRILLE ══════════════════════════════════════════
   Codex avait figé ses colonnes sur le nombre d'éléments qu'il avait écrits.
   Ces listes sont devenues ajoutables : une cinquième entrée aurait laissé
   une ligne à un seul élément. `auto-fit` garde le rendu à l'identique pour
   le nombre d'origine et tient le coup au-delà — c'est la différence entre
   une maquette et un thème. */
.facts-inner{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* L'image de l'étude de cas avait le panorama recadré, comme cinq autres
   endroits. Elle reçoit sa propre scène : c'est un passage de dossier, pas le
   même couloir vu de biais. */


/* ══ L'IMAGE DES TROIS PAGES SYSTÈME ══════════════════════════════════════
   Elle était posée en style dans le gabarit, par `sg_asset()`. L'adresse
   produite est ABSOLUE — « /layouts/le-signal/… » — et la fabrique de la
   démonstration statique ne réécrit que les attributs `href` et `src` : elle
   ne va pas relire l'intérieur d'un attribut `style`. Les trois pages système
   de la démonstration s'affichaient donc sans leur image, sur fond noir.

   ⚠️ ET C'EST LA SECONDE FOIS SUR CE MÊME PIXEL. Le premier essai passait par
   une propriété personnalisée CSS, dont le `url()` se résout par rapport à la
   FEUILLE et non au document : image absente aussi. La règle qui marche
   partout est celle-ci — un `url()` ordinaire, écrit dans la feuille, résolu
   par rapport à la feuille, à un endroit où c'est justement ce qu'on veut.

   Le pack ne gagne pas de cache-buster sur ces trois images. C'est le prix, et
   il est juste : ce sont trois décors, ils ne changent pas. */




/* ══ LES HAUTEURS D'ÉCRAN, PLAFONNÉES ═════════════════════════════════════
   Cinq blocs du pack se dimensionnaient en pourcentage de la FENÊTRE :
   `100svh` pour le premier écran et les pages système, `72vh` pour les hauts
   de page, `82vh` pour les situations, `100vh` pour le contact.

   Sur un portable de 900 px c'est le dessin voulu. Sur un écran de bureau de
   1440 px de haut, le même haut de page fait 1037 px, dont 600 de vide ; sur
   un 4K, 1555. Le texte reste en bas, la promesse sort du champ, et plus
   l'écran est grand plus la page paraît creuse — l'inverse de ce qu'on veut.

   ⚠️ ET C'EST CE QUI M'A FAIT ACCUSER CODEX À TORT. Ses maquettes photographiées
   dans une fenêtre haute paraissaient pleines de vide ; le défaut n'était pas
   dans sa mise en page, il était dans l'unité. Les captures officielles du
   pack (1440 × 1800) tombaient dans le même piège et montraient au catalogue
   une page deux fois plus aérée que celle qu'on sert.

   `min()` garde le comportement d'origine tant que la fenêtre est basse et
   arrête la croissance ensuite. Les plafonds sont ceux que ces règles
   produisent sur un portable : rien ne change là où le dessin a été validé. */
.page-head{min-height:min(72vh,640px)}
.story{min-height:min(82vh,740px)}
.contact-page{min-height:min(100vh,900px)}
.sys{min-height:min(100svh,900px)}

/* ══ LE FORMULAIRE DE CONTACT ═════════════════════════════════════════════
   La prise `formulaire` du module composé. Le gabarit d'origine dessinait un
   faux formulaire, qui affichait sa propre confirmation en JavaScript sans
   rien envoyer ; celui-ci part vraiment, avec son jeton anti-rejeu et son pot
   de miel.

   ⚠️ ET IL EST RESTÉ INVISIBLE UN MOMENT. La page incluait la prise à ÉTAPES,
   sur la seule condition que son fichier existe — or celle-ci exigeait ses
   étapes et sortait en silence quand elles manquaient. Le panneau s'affichait
   avec son titre et rien dessous. Ce n'est pas la prise qui avait tort :
   `is_file()` n'est pas une vérification.

   ── DEUX COLONNES, MAIS PILOTÉES PAR LA PRISE ───────────────────────────
   Qui vous êtes sur une ligne, comment vous joindre sur la suivante, ce que
   vous avez à dire en pleine largeur. Depuis la bascule du 2026-09-04, ce
   n'est plus le thème qui décide où tombe chaque champ : c'est le CLIENT qui
   compose son formulaire dans Admin → Formulaires, et chaque champ arrive avec
   sa largeur naturelle (`--demi` / `--plein`). Un thème qui impose ses paires
   se casse dès qu'on lui ajoute un champ. */
.contact-form .s-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}

/* Les champs pleine largeur, le bouton et les avis de retour occupent la
   ligne entière — la prise le dit avec `--plein`, on ne le devine pas. */
.contact-form .s-form-champ--plein,
.contact-form .s-form-actions,
.contact-form .s-form-succes,
.contact-form .s-form-erreur{grid-column:1/-1}

.contact-form .s-form-champ{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.contact-form .s-form-label{font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.contact-form .s-form-obligatoire{color:var(--berry);margin-left:2px}
.contact-form .s-form-aide{font-weight:650;letter-spacing:.04em;text-transform:none;color:var(--muted);font-size:12px;line-height:1.5}

.contact-form .s-form-input,
.contact-form .s-form-textarea{width:100%;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.contact-form .s-form-textarea{resize:vertical;min-height:150px;line-height:1.55}

/* Le contour de mise au point est celui du clavier : il doit être VISIBLE.
   Une bordure qui change de teinte ne suffit pas à quelqu'un qui navigue à la
   tabulation, d'où l'anneau. */
.contact-form .s-form-input:focus-visible,
.contact-form .s-form-textarea:focus-visible{outline:none;border-color:var(--berry);box-shadow:0 0 0 3px rgba(216,77,112,.18)}

/* ── LES CHOIX EN PASTILLES ──
   Un choix court se montre, il ne se déplie pas. La radio reste dans le
   document, invisible mais focalisable ; le dessin vit sur son libellé. */
.contact-form .s-form-groupe{border:0;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:10px}
.contact-form .s-form-groupe>.s-form-label{flex:1 0 100%}
.contact-form .s-form-groupe>.s-form-aide{flex:1 0 100%}
.contact-form .s-form-option{display:inline-flex;cursor:pointer}
.contact-form .s-form-option .s-form-coche{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.contact-form .s-form-option-texte{display:inline-block;padding:11px 16px;border:1px solid var(--line);border-radius:99px;background:var(--white);font-size:13px;font-weight:650;transition:border-color .2s,background .2s,color .2s}
.contact-form .s-form-option:hover .s-form-option-texte{border-color:var(--berry)}
.contact-form .s-form-coche:checked + .s-form-option-texte{background:var(--ink);border-color:var(--ink);color:var(--white)}
.contact-form .s-form-coche:focus-visible + .s-form-option-texte{outline:2px solid var(--berry);outline-offset:3px}

/* ── LE CONSENTEMENT ──
   Une VRAIE case : ce n'est pas un choix parmi d'autres, c'est un accord. */
.contact-form .s-form-champ--consentement .s-form-consentement{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.contact-form .s-form-champ--consentement .s-form-coche{position:static;opacity:1;pointer-events:auto;width:1.1em;height:1.1em;margin-top:.15em;flex:none;accent-color:var(--berry)}
.contact-form .s-form-champ--consentement .s-form-option-texte{padding:0;border:0;background:none;font-size:13px;font-weight:500;line-height:1.55}
.contact-form .s-form-consentement-lien{text-decoration:underline;text-underline-offset:2px}

/* Le pot de miel reste hors de vue quoi qu'il arrive. */
.contact-form .s-form-hp{display:none !important}

/* Le bouton reprend celui du pack, sans avoir à ajouter une classe dans la
   prise : c'est le rôle d'une feuille de style de faire ce raccord. */
.contact-form .s-form-actions{margin:6px 0 0}
.contact-form .s-form-submit{width:100%;border:1px solid;border-radius:99px;padding:16px 18px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;background:var(--ink);color:var(--white);cursor:pointer;transition:.25s}
.contact-form .s-form-submit:hover{background:var(--berry);transform:translateY(-2px)}

/* Retour d'envoi. Le succès en vert de la marque, l'échec en framboise :
   deux états qu'on distingue sans lire. */
.contact-form .s-form-succes,
.contact-form .s-form-erreur{margin:0;padding:14px 16px;border-radius:14px;font-size:14px;line-height:1.5}
.contact-form .s-form-succes{background:var(--sage);border:1px solid var(--ink)}
.contact-form .s-form-erreur{background:rgba(216,77,112,.12);border:1px solid var(--berry);color:var(--berry)}

/* Sur téléphone, deux colonnes de 160 px ne sont plus deux colonnes. */
@media(max-width:640px){
  .contact-form .s-form{grid-template-columns:1fr}
  .contact-form .s-form-champ{grid-column:1/-1}
}

/* ══ LE LABORATOIRE, POUR UN NOMBRE LIBRE D'ÉTAPES ════════════════════════
   Quatre règles écrites à la main plaçaient le panorama et l'objet, une par
   étape. Une cinquième étape ajoutée depuis l'admin se serait affichée sans
   cadrage et sans mouvement — la mise en page interdisait la liste.

   Les trois positions sont maintenant CALCULÉES depuis le rang de l'étape et
   posées par le gabarit. La feuille ne connaît plus le nombre d'étapes, elle
   ne connaît que le mouvement. Les valeurs de repli sont celles de la
   première étape : même sans elles, la scène reste juste. */
.lab-panorama{object-position:var(--pan,0) center}
.relay-object{left:var(--obj,18%);transform:rotate(var(--rot,0deg))}
/* Le glissement reste porté par `background-position` et `left`, qui ont déjà
   leur transition plus haut : changer la variable change la valeur calculée,
   et c'est elle qui s'anime. Rien à ajouter ici. */

/* ══ LES IMAGES DES AUTRES PAGES ══════════════════════════════════════════
   Même raison qu'en fin d'`accueil.css` : une image de fond n'est pas
   modifiable, et sur un thème vendu ces images-là sont des contenus.

   Un cas mérite d'être signalé, celui des SITUATIONS (/cas-usage) : leur
   image était choisie par la FEUILLE, au rang de la situation
   (`nth-child`). Un client qui réordonnait ses situations voyait les
   photos rester en place pendant que les textes bougeaient. L'image se
   saisit maintenant AVEC la situation, dans la même fiche — elle la suit. */
.story-image img,.case-picture img,.entreprise-lieu img,.sys-vue img{position:absolute;inset:0}
.case-picture img{object-position:80% center}

/* ── LE BANDEAU D'APERÇU ──
   En tête d'un brouillon ouvert par un jeton signé. Il doit se voir : sans lui
   on relit un brouillon en croyant relire la page publiée. */
.sg-apercu{margin:0;padding:12px 20px;background:var(--berry);color:var(--white);font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;text-align:center}

/* ══ LA SECTION « CODE » ═══════════════════════════════════════════════════
   Prise `core/Sections.php` (kit 1.5.44) :
   <section class="s-code" data-langage="php"><pre><code class="language-php">

   ⚠️ SANS STYLE, LE BLOC SORT BRUT. Il reste lisible — c'est un `<pre>` — mais
   à la police du navigateur, sans fond, et il DÉBORDE : une ligne longue
   pousse toute la page vers la droite sur téléphone. Trois choses à poser, et
   pas une de plus : une police à chasse fixe, un fond qui le détache du texte,
   et un débordement qui reste DANS le bloc.

   ⚠️ ON NE REFORMATE PAS. Le socle échappe le contenu et ne le retouche pas :
   ce qui est tapé est ce qui se copie. Pas de `white-space: normal`, pas de
   coloration syntaxique inventée ici — `data-langage` est là pour qui veut en
   brancher une, plus tard, sans toucher au thème.
   ══════════════════════════════════════════════════════════════════════════ */
.s-code{margin:0 0 22px;background:var(--white);border:1px solid var(--line);border-radius:14px}
.s-code pre{margin:0;padding:20px;overflow-x:auto}
.s-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;line-height:1.65;white-space:pre}