/* Tailor Tech — « Carnet de coupe » (refonte premium, 23/09/2026)
   Remplace styles.css et refonte.css sur les pages de la refonte.
   Direction : éditorial d'atelier, précis et calme · papier beige, trait de patron violet, interface montrée en vrai.
   Réglages : les variables --t-*, --s-*, --w-* sont celles du panneau de retouche (mêmes noms, mêmes valeurs par défaut).
   Charte « 2025-Tailor-colors-v1b » : violet #2C0F6D, violet très foncé #140928, orange #F2AC6D, beige pâle #E6DDD4 ;
   polices Roboto (texte et titres) et Roboto Mono (étiquettes, légendes, repères). */

/* ==========================================================================
   1. Réglages (panneau de retouche) — ne pas renommer
   ========================================================================== */
:root{
  --t-h1-min:37; --t-h1-max:58;
  --t-h2-min:28; --t-h2-max:37;
  --t-h3:17;
  --t-lead:17;
  --t-body:15;
  --t-kpi:32;
  --s-section:48;   /* 40 → 48 le 25/09/2026 : +20 % de marge haute et basse sur chaque section */
  --s-gap:13;
  --s-card:20;
  --s-steps:44;
  --w-page:1760;
  --w-text:200;
  --w-hero-shot:1000;
  --t-h1i-min:30; --t-h1i-max:46;
  --w-inner-shot:1080;
  --s-gutter:100;
  --s-gutter-m:16;
  --s-hero-top:38;
  --s-hero-bottom:46;
  --s-shot-top:24;
  --s-head:10;
  --s-content:38;
  --s-col:108;
  --s-para:50;
  --s-cta:74;   /* 62 → 74 le 25/09/2026 (+20 %) */
  --w-h1:60;
  --w-h1i:60;
  --w-h2:80;
  --w-hero-lead:880;
  --w-feat:42;
  --w-card-min:280;
  --w-read:106;
  --w-legal:160;

  /* ------------------------------------------------------------------------
     2. Charte et rôles
     ------------------------------------------------------------------------ */
  --violet:#2C0F6D; --nuit:#140928; --violet-2:#6141A5;
  --orange:#F2AC6D; --orange-vif:#F29657; --brun:#BE8456;
  --beige:#E6DDD4; --papier:#F4F0EC; --toile:#EDE6E0; --lin:#FAF8F5;
  --menthe:#35C09F; --ciel:#4CA9D9; --corail:#F26849;
  --encre:#1E1535; --graphite:#575E68; --gris:#68707A;

  --fg:var(--encre); --fg-2:var(--graphite); --title:var(--violet);
  --rule:rgba(44,15,109,.13); --rule-2:rgba(44,15,109,.26);
  --grid-1:rgba(44,15,109,.045); --grid-2:rgba(44,15,109,.08);
  --focus:var(--violet);

  --sans:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* mouvement : deux durées, un seul easing par durée */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-s:180ms; --dur-l:440ms;

  --r-s:6px; --r:10px; --r-l:14px;
  --gutter:clamp(calc(var(--s-gutter-m)*1px),6.9vw,calc(var(--s-gutter)*1px));
  --maxw:calc(var(--w-page)*1px);
  --hdr:64px; --hdr-top:12px;
  --fluid:((100vw - 390px) / 1050);
  --shadow-plate:0 1px 2px rgba(20,9,40,.06),0 18px 40px -22px rgba(20,9,40,.30),0 50px 90px -50px rgba(44,15,109,.30);
}
@media(max-width:767px){:root{--hdr:56px;--hdr-top:8px}}

/* ==========================================================================
   3. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + var(--hdr-top) + 20px)}
html:has(.subnav){scroll-padding-top:calc(var(--hdr) + var(--hdr-top) + 76px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--fg);font-family:var(--sans);font-size:calc(var(--t-body)*1px);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
html.menu-open{overflow:hidden}
[hidden]{display:none!important}
main{display:block;counter-reset:chap}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--title);text-wrap:pretty}
p,li,dd{text-wrap:pretty;overflow-wrap:break-word}
button{font:inherit;color:inherit;cursor:pointer}
strong,b{font-weight:500}
::selection{background:var(--orange);color:var(--nuit)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.section--dark,.site-footer,.stance{--focus:var(--orange)}
.skip{position:absolute;left:12px;top:12px;z-index:100;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;border-radius:var(--r);background:var(--violet);color:#fff;font-weight:500}
.skip:focus{width:auto;height:auto;clip-path:none;padding:10px 16px}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   4. Typographie
   ========================================================================== */
h1{font-size:clamp(calc(var(--t-h1-min)*1px), calc(var(--t-h1-min)*1px + (var(--t-h1-max) - var(--t-h1-min)) * var(--fluid)), calc(var(--t-h1-max)*1px));
  font-weight:300;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(calc(var(--t-h2-min)*1px), calc(var(--t-h2-min)*1px + (var(--t-h2-max) - var(--t-h2-min)) * var(--fluid)), calc(var(--t-h2-max)*1px));
  font-weight:300;line-height:1.08;letter-spacing:-.028em}
h3{font-size:calc(var(--t-h3)*1px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--fg)}
@media(min-width:1800px){
  h1{font-size:calc(var(--t-h1-max)*1.15px)}
  h2{font-size:calc(var(--t-h2-max)*1.08px)}
}
.lead{font-size:calc(var(--t-lead)*1px);line-height:1.55;color:var(--fg);max-width:calc(var(--w-text)*1ch)}
.lead .l2{color:var(--fg-2)}
.lead .l2--em{color:var(--violet);font-weight:500}
p + p{margin-top:calc(var(--s-para)*.01em)}

/* étiquette (sur-titre) : carré orange du logo, numéro de chapitre, libellé en capitales espacées */
.eyebrow,.feat-tag,.kicker{display:inline-flex;align-items:center;gap:.75em;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet);line-height:1.35;margin:0 0 calc(var(--s-head)*1px)}
.eyebrow::before,.feat-tag::before,.kicker::before{content:"";flex:none;width:7px;height:7px;background:var(--orange)}
main .section .eyebrow{counter-increment:chap}
main .section .eyebrow::before{content:counter(chap,decimal-leading-zero);width:auto;height:auto;background:
  linear-gradient(var(--orange),var(--orange)) left center/7px 7px no-repeat;padding-left:17px;color:var(--fg-2);font-weight:400;letter-spacing:.06em}
.section--dark .eyebrow,.stance .eyebrow{color:#fff}
.section--dark .eyebrow::before,.stance .eyebrow::before{color:rgba(255,255,255,.6)}

/* ==========================================================================
   5. Mise en page
   ========================================================================== */
.wrap,.wrap-wide{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:calc(var(--w-read)*1ch + 2*var(--gutter))}
.section{position:relative;padding:calc(var(--s-section)*1px) 0}
.section--tint{background:var(--toile)}
.section--tint + .section--tint{border-top:1px solid var(--rule)}
.section--dark{background:var(--nuit);color:rgba(255,255,255,.86);--grid-1:rgba(255,255,255,.035);--grid-2:rgba(255,255,255,.065);--rule:rgba(255,255,255,.14);--rule-2:rgba(255,255,255,.26)}
.section--tint,.section--dark{padding:calc(var(--s-section)*1.7px) 0}
.grid{display:grid;gap:calc(var(--s-gap)*1px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* papier patron : quadrillage fin + grand carreau, estompé */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-2) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-1) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-1) 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 30%,transparent 78%)}
/* premier écran de toutes les pages : le quadrillage reste plein et ne s'efface qu'à la fin du premier écran (25/09/2026) */
.hero.grid-bg::before{-webkit-mask-image:linear-gradient(to bottom,#000 max(60%,calc(100% - 220px)),transparent);mask-image:linear-gradient(to bottom,#000 max(60%,calc(100% - 220px)),transparent)}

/* ==========================================================================
   6. En-tête de chapitre : filet, étiquette numérotée, puis titre, texte et bouton l'un sous l'autre
   ========================================================================== */
.chap-head,.center-head,.qa-stack-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;
  column-gap:calc(var(--s-col)*.5px);row-gap:0;border-top:1px solid var(--rule);padding-top:calc(var(--s-head)*1.6px);
  margin:0 0 calc(var(--s-content)*1px);text-align:left;max-width:none}
.chap-head .eyebrow,.center-head .eyebrow,.qa-stack-head .eyebrow{grid-column:1/-1}
.chap-head h2,.center-head h2,.qa-stack-head h2{margin:0;max-width:calc(var(--w-h2)*1ch)}
.chap-head .lead,.center-head .lead,.qa-stack-head .lead{margin-top:calc(var(--s-head)*1.4px);max-width:none}
/* 25/09/2026 : plus de titre à gauche et de texte à droite ; le titre prend toute la largeur, le texte et le bouton suivent
   (demande de Sébastien sur l'accueil, appliquée à toutes les pages). Seule exception : « L'enjeu » de l'accueil,
   dont Sébastien a lui-même réglé les deux colonnes (section 29). */
@media(min-width:1100px){
  .accueil #enjeu .chap-head{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
  .accueil #enjeu .chap-head .lead{grid-column:2;grid-row:2;margin-top:0;padding-bottom:.3em}
  .accueil #enjeu .chap-head h2{grid-column:1;grid-row:2}
}
.chap-head--solo{grid-template-columns:minmax(0,1fr)!important}
.chap-head .lead-answer{font-size:calc(var(--t-lead)*1.2px);font-weight:300;line-height:1.4;color:var(--violet);max-width:none}
.chap-side{margin-top:calc(var(--s-head)*1.4px)}
.chap-side .btn-row{margin-top:calc(var(--s-head)*1.8px)}
h2 + .lead,h2 + p.lead,.pilot-copy h2 + .lead{margin-top:calc(var(--s-head)*1.4px)}
.proof + .brief .wrap{background:none}
.proof + .section > .wrap > .chap-head:first-child{border-top:0}
.section--dark .chap-head{border-top-color:rgba(255,255,255,.16)}
.section--dark h2{color:#fff}
.section--dark .lead{color:rgba(255,255,255,.82)}

/* ==========================================================================
   7. Boutons (deux variantes : principal, secondaire)
   ========================================================================== */
.btn{--bh:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--bh);padding:0 22px;border-radius:var(--r);
  font-family:var(--sans);font-size:15.5px;font-weight:500;letter-spacing:.005em;line-height:1.2;text-align:center;border:1px solid transparent;
  transition:background var(--dur-s) var(--ease),color var(--dur-s),border-color var(--dur-s),box-shadow var(--dur-s),translate var(--dur-s) var(--ease);white-space:nowrap}
.btn--lg{--bh:56px;padding:0 28px;font-size:16.5px}
.btn--sm{--bh:44px;padding:0 16px;font-size:14.5px}
.btn--primary{background:var(--violet);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px -12px rgba(44,15,109,.6)}
.btn--primary:hover{background:var(--nuit);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -12px rgba(20,9,40,.7)}
.btn--primary:active{translate:0 1px}
.btn--outline,.btn--outline-accent{background:transparent;color:var(--violet);border-color:rgba(44,15,109,.3)}
.btn--outline:hover,.btn--outline-accent:hover{border-color:var(--violet);background:rgba(44,15,109,.05)}
.section--dark .btn--primary,.stance .btn--primary,.site-footer .btn--primary,.cta--dark .btn--primary{background:var(--orange);color:var(--nuit);box-shadow:0 10px 26px -12px rgba(242,172,109,.7)}
.section--dark .btn--primary:hover,.site-footer .btn--primary:hover,.cta--dark .btn--primary:hover{background:var(--orange-vif)}
.section--dark .btn--outline{color:#fff;border-color:rgba(255,255,255,.35)}
.arr{display:inline-block;transition:translate var(--dur-s) var(--ease)}
.btn:hover .arr,a:hover > .arr{translate:3px 0}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:calc(var(--s-content)*.7px)}
.btn-stack{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.btn-stack .btn{width:100%}
.more-link{margin-top:22px}
.more-link a,.hero-link,.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--violet);font-weight:500;min-height:44px;
  text-decoration:underline;text-decoration-color:rgba(44,15,109,.3);text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color var(--dur-s)}
.more-link a:hover,.hero-link:hover,.text-link:hover{text-decoration-color:var(--violet)}

/* ==========================================================================
   8. En-tête du site : îlot qui se rétracte au défilement
   ========================================================================== */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:90;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--prog,0));
  background:var(--orange) repeating-linear-gradient(90deg,rgba(20,9,40,.45) 0 1px,transparent 1px 9px)}
.site-header{position:fixed;inset:0 0 auto 0;z-index:70;padding-top:var(--hdr-top);transition:transform var(--dur-l) var(--ease);pointer-events:none}
.site-header .wrap{pointer-events:none}
/* 28/09/2026 : le logo a la même marge à gauche que le bouton « Réserver un entretien » à droite (8 px de marge intérieure des deux côtés ;
   avant : 16 px à gauche) */
.header-bar{pointer-events:auto;height:var(--hdr);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;
  padding:0 8px;margin-inline:-16px;border-radius:var(--r-l);border:1px solid transparent;background:transparent;
  transition:background var(--dur-l) var(--ease),border-color var(--dur-l),box-shadow var(--dur-l),backdrop-filter var(--dur-l)}
.site-header.scrolled .header-bar,html.menu-open .header-bar{background:rgba(250,248,245,.80);border-color:var(--rule);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 12px 32px -20px rgba(20,9,40,.35)}
.site-header.is-hidden{transform:translateY(calc(-100% - 6px))}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo svg,.tt-logo{height:48px;width:auto}   /* 34 → 48 px le 25/09/2026 (logo agrandi) */
@media(max-width:767px){.logo svg,.tt-logo{height:40px}}
.logo .cls-1{fill:var(--violet)}
.logo .cls-2{fill:var(--orange)}
.nav{justify-self:center;display:flex;align-items:center;gap:2px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:15px;color:var(--fg);border-radius:var(--r-s);transition:color var(--dur-s)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:9px;height:1px;background:currentColor;scale:0 1;transform-origin:left;transition:scale var(--dur-l) var(--ease)}
.nav a:hover{color:var(--violet)}
.nav a:hover::after,.nav a.active::after{scale:1 1}
.nav a.active{color:var(--violet)}
.header-actions{display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;position:relative;width:44px;height:44px;border:0;border-radius:var(--r);background:transparent}
.nav-toggle span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--violet);transition:translate var(--dur-l) var(--ease),rotate var(--dur-l) var(--ease)}
.nav-toggle span:first-child{top:17px}
.nav-toggle span:last-child{top:25px}
.nav-toggle[aria-expanded="true"] span:first-child{translate:0 4px;rotate:45deg}
.nav-toggle[aria-expanded="true"] span:last-child{translate:0 -4px;rotate:-45deg}
@media(max-width:1180px){
  .nav{display:none}
  .nav-toggle{display:inline-block}
  .header-bar{grid-template-columns:auto minmax(0,1fr) auto}
  .header-actions{grid-column:3}   /* 28/09/2026 : sans menu, les actions restaient collées au logo au lieu d'aller à droite */
}
@media(max-width:560px){.header-cta{display:none}}

/* sélecteur de langue */
.lang-switch{position:relative}
.lang{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border:0;border-radius:var(--r);background:transparent;font-size:14px;color:var(--fg-2);transition:background var(--dur-s),color var(--dur-s)}
.lang:hover{background:rgba(44,15,109,.06);color:var(--violet)}
.lang .lang-name{display:none}
.lang .lang-code{font-family:var(--mono);font-size:13px;letter-spacing:.08em}
.lang-globe{opacity:.7}
.lang-chevron{opacity:.55;transition:rotate var(--dur-s)}
.lang-switch.open .lang-chevron{rotate:180deg}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:6px;border-radius:var(--r-l);background:var(--lin);border:1px solid var(--rule);
  box-shadow:0 20px 40px -20px rgba(20,9,40,.4);opacity:0;visibility:hidden;translate:0 -6px;transition:opacity var(--dur-s),translate var(--dur-s) var(--ease),visibility 0s linear var(--dur-s);z-index:5}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--dur-s),translate var(--dur-s) var(--ease)}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r);font-size:15px;color:var(--fg)}
.lang-opt:hover,.lang-opt:focus-visible{background:rgba(44,15,109,.06)}
.lang-opt.is-active{color:var(--violet);font-weight:500}
.lang-opt-code{font-family:var(--mono);font-size:13px;color:var(--fg-2)}
.lang-check{color:var(--violet)}

/* menu plein écran (mobile et tablette) */
.menu{position:fixed;inset:0;z-index:65;background:var(--papier);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--hdr) + var(--hdr-top) + 28px) var(--gutter) max(24px,env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity var(--dur-l) var(--ease),visibility 0s linear var(--dur-l)}
.menu.is-open{opacity:1;visibility:visible;transition:opacity var(--dur-l) var(--ease)}
.menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:
  linear-gradient(to right,var(--grid-1) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-1) 1px,transparent 1px);background-size:12px 12px;
  -webkit-mask-image:linear-gradient(#000,transparent 60%);mask-image:linear-gradient(#000,transparent 60%)}
.menu-list{display:grid;border-top:1px solid var(--rule)}
.menu-list a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);
  opacity:0;translate:0 12px;transition:opacity var(--dur-l) var(--ease),translate var(--dur-l) var(--ease);transition-delay:calc(var(--i,0) * 50ms + 60ms)}
.menu.is-open .menu-list a{opacity:1;translate:0 0}
.menu-n{font-family:var(--mono);font-size:13px;color:var(--fg-2);letter-spacing:.06em}
.menu-l{font-size:clamp(26px,7vw,34px);font-weight:300;letter-spacing:-.025em;color:var(--violet);line-height:1.1}
.menu-d{grid-column:2;font-size:15px;color:var(--fg-2)}
.menu-list a.active .menu-l{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.menu-foot{margin-top:auto;padding-top:28px;display:grid;gap:14px}
.menu-foot .btn{width:100%}
.menu-mail{justify-self:center;display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:15px;color:var(--fg-2)}
@media(min-width:1181px){.menu{display:none}}

/* barre d'ancres des pages longues */
.subnav{position:sticky;top:0;z-index:40;background:rgba(244,240,236,.88);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-block:1px solid var(--rule);transition:top var(--dur-l) var(--ease)}
html.hdr-on .subnav{top:calc(var(--hdr) + var(--hdr-top) + 8px)}
.subnav .wrap{display:flex;align-items:center;gap:16px;min-height:56px}
.subnav-title{flex:none;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);display:inline-flex;align-items:center;gap:10px}
.subnav-title::before{content:"";width:7px;height:7px;background:var(--orange)}
.subnav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0;padding-block:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent)}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;font-size:14.5px;color:var(--fg-2);white-space:nowrap;transition:color var(--dur-s),background var(--dur-s)}
.subnav-links a:hover{color:var(--violet)}
.subnav-links a.is-active{color:var(--violet);background:rgba(44,15,109,.08)}
.subnav .btn{flex:none}
@media(max-width:900px){.subnav-title{display:none}}
@media(max-width:767px){.subnav .btn{display:none}.subnav .wrap{min-height:52px}}

/* barre d'appel mobile */
.mcta{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:55;display:none}
.mcta .btn{width:100%;box-shadow:0 18px 38px -14px rgba(20,9,40,.55)}
@media(max-width:767px){
  .mcta{display:block;translate:0 150%;transition:translate var(--dur-l) var(--ease)}
  .mcta.is-shown{translate:0 0}
}

/* ==========================================================================
   9. Premier écran
   ========================================================================== */
.hero{position:relative;isolation:isolate;padding:calc(var(--hdr) + var(--hdr-top) + var(--s-hero-top)*1px) 0 calc(var(--s-hero-bottom)*1px);overflow:clip}
.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-8%;top:10%;width:62%;height:78%;
  background:radial-gradient(closest-side,rgba(242,172,109,.20),rgba(242,172,109,0));filter:blur(8px)}
/* Premier écran de l'accueil (25/09/2026, reprise de 14 h 35) : photo d'une prise de mesure (le tailleur mesure le poignet de son client),
   sans retouche, en fond de tout le premier écran. Plus de capture de l'interface par-dessus.
   Ordinateur (1 100 px et plus) : photo pleine largeur assombrie côté texte par un voile « nuit » ; textes clairs ;
   titre sur une ligne aux trois quarts de la largeur de l'écran, chapô sur la moitié ; bouton orange comme sur les fonds nuit.
   Tablette et téléphone : la photo reste un bandeau en tête, texte dessous sur le papier (couleurs habituelles). */
.hero--photo::after{content:none}
.hero-photo{position:absolute;z-index:-1;pointer-events:none;top:0;right:0}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.accueil .header-bar{background:rgba(250,248,245,.9);border-color:var(--rule);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 12px 32px -20px rgba(20,9,40,.35)}
@media(min-width:1100px){
  .hero--photo{--focus:var(--orange);min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);background:var(--nuit);color:rgba(255,255,255,.86)}
  .hero-photo{bottom:0;left:0}
  .hero-photo img{object-position:50% 58%}
  /* voile : plein côté texte, léger côté client, pour garder le geste lisible */
  .hero-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(20,9,40,.80) 0%,rgba(20,9,40,.66) 38%,rgba(20,9,40,.40) 62%,rgba(20,9,40,.16) 86%,rgba(20,9,40,.10) 100%),
               linear-gradient(to bottom,rgba(20,9,40,.30),rgba(20,9,40,0) 34%)}
  .hero--photo .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "text";grid-template-rows:auto auto}
  /* 28/09/2026, 11 h 27 : titre sur deux lignes, au plus 40 % de la largeur de l'écran (ligne la plus longue en Roboto Light :
     7,61 em pour « l’atelier sur-mesure », 7,68 em pour « bespoke workshop », diviseurs portés à 7,74 et 7,80 pour rester sous 40 % à toutes les tailles) ; jamais plus grand que l'ancien titre sur une ligne
     (plafond : largeur du contenu ÷ 12,975 em, ÷ 14,365 em en anglais). Chapô dessous, puis les deux boutons.
     28/09/2026 (Solène) : « Le logiciel du sur-mesure » ; la taille validée à 11 h 27 est gardée : la ligne la plus longue (« Le logiciel du »,
     5,19 em) occupe 27 % de l'écran ; en anglais, « bespoke tailoring » (6,87 em), 35 %. Diviseurs inchangés. */
  .hero.hero--photo h1{font-size:min(calc(40vw / 7.74), calc((var(--maxw) - 2 * var(--gutter)) / 12.975));max-width:40vw;color:#fff}
  /* 21/10/2026 : titres plus longs en anglais (« made-to-measure tailoring », 10,68 em) et en portugais
     (« confeção por medida », 8,62 em) : même règle, la ligne la plus longue tient dans 40 % de l'écran. */
  html[lang="en"] .hero.hero--photo:not(.hero--page) h1{font-size:min(calc(40vw / 10.75), calc((var(--maxw) - 2 * var(--gutter)) / 19.8))}
  html[lang^="pt"] .hero.hero--photo:not(.hero--page) h1{font-size:min(calc(40vw / 8.70), calc((var(--maxw) - 2 * var(--gutter)) / 14.58))}
  .hero.hero--photo h1 .accent{color:#fff}
  .hero.hero--photo .lead{max-width:50vw;color:rgba(255,255,255,.88)}
  .hero.hero--photo .lead .l2--em{color:var(--orange)}
  .hero--photo .hero-chip{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(20,9,40,.42);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .hero--photo a.hero-chip:hover{border-color:var(--orange);background:rgba(20,9,40,.62)}
  .hero--photo .btn--primary{background:var(--orange);color:var(--nuit);box-shadow:0 10px 26px -12px rgba(242,172,109,.7)}
  .hero--photo .btn--primary:hover{background:var(--orange-vif)}
  .hero--photo .btn--outline{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(20,9,40,.28);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .hero--photo .btn--outline:hover{border-color:var(--orange);background:rgba(20,9,40,.5)}
}
@media(max-width:1099px){
  .hero-photo{left:0;height:clamp(240px,60vw,400px);
    -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent);mask-image:linear-gradient(to bottom,#000 76%,transparent)}
  .hero-photo img{object-position:50% 60%}
  .hero.hero--photo{padding-top:calc(clamp(240px,60vw,400px) + 4px)}
}

/* Filigrane de l'accueil : le motif de courbes des Réels Instagram. Déplacé le 25/09/2026 du premier écran vers
   « Le parcours d'une commande » (section 02), même descente lente. Motif étiré en hauteur (motif-courbes-long, 600 × 3000,
   courbes posées sur le papier ; AVIF net, WebP en secours pour les anciens navigateurs) et plus haut que la section : ses extrémités restent hors champ, les bords de la section sont fondus. */
.accueil #parcours{position:relative;isolation:isolate;overflow:clip}
.accueil #parcours::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;bottom:0;
  right:max(-70px,calc(var(--gutter) - 150px));width:clamp(300px,38vw,620px);opacity:.62;
  background:url(img/motif-courbes-long.webp) center/100% 118% no-repeat;
  background-image:image-set(url(img/motif-courbes-long.avif) type("image/avif"),url(img/motif-courbes-long.webp) type("image/webp"));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 220px),transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 220px,#000 calc(100% - 220px),transparent);
  animation:filigrane 26s var(--ease-io) infinite alternate}
@keyframes filigrane{from{translate:0 -34px}to{translate:0 46px}}
@media(prefers-reduced-motion:reduce){.accueil #parcours::before{animation:none}}
html.no-anim .accueil #parcours::before{animation:none}
@media(max-width:767px){.accueil #parcours::before{right:-34%;width:88vw;opacity:.34}}
.hero-chip,.badge{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:6px 14px 6px 12px;border:1px solid var(--rule-2);border-radius:999px;
  background:rgba(250,248,245,.72);font-size:14px;font-weight:500;letter-spacing:.005em;color:var(--violet);line-height:1.3}
.hero-chip::before,.badge::before{content:"";flex:none;width:7px;height:7px;background:var(--orange)}
a.hero-chip{transition:border-color var(--dur-s),background var(--dur-s)}
a.hero-chip:hover{border-color:var(--violet);background:var(--lin)}
.hero h1{margin-top:calc(var(--s-head)*2px);max-width:calc(var(--w-h1)*1.3ch)}
.hero h1 .accent{color:var(--violet);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.06em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 70 4, 140 3, 210 7 S 330 13, 397 5' fill='none' stroke='%23F2AC6D' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .22em}
@media(min-width:768px){.hero h1 .accent{white-space:nowrap}}
.hero .lead{font-size:calc(var(--t-lead)*1.08px);max-width:calc(var(--w-hero-lead)*1px)}
.hero-note{margin-top:12px;font-size:14px;color:var(--fg-2)}

/* grille du premier écran (accueil) : titre en tête, texte à gauche, planche à droite */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-gap)*1.6px)}
.hero-grid .hero-title{min-width:0}
.hero-grid .hero-text{min-width:0}
.hero-grid .plate--hero{margin-top:calc(var(--s-shot-top)*1px)}
@media(min-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,min(calc(var(--w-hero-shot)*1px),62%));column-gap:calc(var(--s-col)*.5px);row-gap:0;
    grid-template-areas:"title title" "text plate";grid-template-rows:auto 1fr}
  .hero-grid .hero-title{grid-area:title;margin-bottom:calc(var(--s-content)*1px)}
  .hero-grid .hero-text{grid-area:text}
  .hero-grid .plate--hero{grid-area:plate;margin-top:0}
}

/* premier écran des pages intérieures */
.hero--inner{padding-top:calc(var(--hdr) + var(--hdr-top) + var(--s-hero-top)*.82px)}
.hero--inner h1{font-size:clamp(calc(var(--t-h1i-min)*1px), calc(var(--t-h1i-min)*1px + (var(--t-h1i-max) - var(--t-h1i-min)) * var(--fluid)), calc(var(--t-h1i-max)*1px));
  max-width:calc(var(--w-h1i)*1ch);margin-top:calc(var(--s-head)*1.6px)}
@media(min-width:1800px){.hero--inner h1{font-size:calc(var(--t-h1i-max)*1.12px)}}
.hero--inner .lead{margin-top:calc(var(--s-head)*1.8px);max-width:calc(var(--w-hero-lead)*1.07px)}
.hero--inner .badge{margin-top:calc(var(--s-head)*1.4px)}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-shot-top)*1.4px)}
@media(min-width:1100px){
  .hero-split{grid-template-columns:minmax(0,1fr) minmax(0,min(calc(var(--w-inner-shot)*1px),56%));column-gap:calc(var(--s-col)*.5px);align-items:center}
}
.hero--solo{padding-bottom:calc(var(--s-hero-bottom)*.8px)}
/* 25/09/2026 : titre puis chapô, l'un sous l'autre, comme les en-têtes de chapitre ; le chapô prend toute la largeur */
.hero--solo .hero-copy{max-width:none}
.hero--solo .lead{max-width:none}
.hero--solo .lead a{color:var(--violet);text-decoration:underline;text-underline-offset:4px}
/* 25/09/2026 : les premiers écrans des pages intérieures prennent environ 40 % de hauteur en plus.
   Avec capture (Ateliers, Façonniers, Programme pilote), sur ordinateur : texte et capture alignés en haut ; la capture,
   40 % plus haute, reste dans la largeur de sa colonne : son cadre prend le format --plate-ar posé par le générateur.
   28/09/2026 : la capture est composée à ce format (portion de l'écran), --plate-ar est le format de l'image, rien n'est coupé.
   Sans capture : plus d'air au-dessus et au-dessous du texte. */
@media(min-width:1100px){
  .hero--inner:has(.hero-split){padding-top:calc(var(--hdr) + var(--hdr-top) + var(--s-hero-top)*.82px + 40px);padding-bottom:calc(var(--s-hero-bottom)*1.75px)}
  .hero-split{align-items:start}
  .hero-split .plate--hero .app-frame{aspect-ratio:var(--plate-ar,auto)}
  .hero-split .plate--hero .app-frame img{height:100%;object-fit:cover;object-position:left top}
}
@media(min-width:768px){
  .hero--solo{padding-top:calc(var(--hdr) + var(--hdr-top) + var(--s-hero-top)*.82px + 40px);padding-bottom:calc(var(--s-hero-bottom)*.8px + 80px)}
}

/* fil d'Ariane */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--fg-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--fg-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color var(--dur-s),text-decoration-color var(--dur-s)}
.crumbs a:hover{color:var(--violet);text-decoration-color:currentColor}
.crumbs .sep{opacity:.5}
.crumbs-cur{color:var(--violet)}

/* ==========================================================================
   10. Planches (captures de l'application) : filet, traits de coupe, sans légende ni numéro (24/09/2026)
   ========================================================================== */
.app-shot,.plate{position:relative;margin:0;min-width:0}
.app-frame{position:relative;border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow-plate)}
.app-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(44,15,109,.14);pointer-events:none}
.app-frame img{width:100%;border-radius:inherit}
.app-frame::before{content:"";position:absolute;inset:-13px;pointer-events:none;
  --m:rgba(44,15,109,.30);
  background:
    linear-gradient(var(--m),var(--m)) left top/9px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left top/1px 9px no-repeat,
    linear-gradient(var(--m),var(--m)) right top/9px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right top/1px 9px no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/9px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/1px 9px no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/9px 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/1px 9px no-repeat}
.app-bar{display:none}
.plate--hero .app-frame{transform-origin:50% 100%}

/* repères numérotés sur la planche du premier écran */

/* ==========================================================================
   11. Preuve (distinction et partenaires)
   ========================================================================== */
.proof{padding:calc(var(--s-section)*.55px) 0;border-block:1px solid var(--rule)}
.proof-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px}
.award{display:inline-flex;align-items:center;gap:12px;margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.award::before{content:"";width:18px;height:18px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F29657' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14 7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E") center/contain no-repeat}
.proof-sep{display:none}
.proof-label{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin-left:auto}
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.partner{display:inline-flex;align-items:center;min-height:44px;opacity:.9;transition:opacity var(--dur-s)}
.partner:hover{opacity:1}
.partner img{height:30px;width:auto}
.partner img[alt="Inizia"]{height:34px}
.partner img[alt="ADEC"]{height:22px}
.partner img[alt="Banque Populaire Méditerranée"]{height:36px}
/* 28/09/2026 (Solène) : jusqu'à 1 319 px, le libellé passe sur sa ligne, au-dessus des logos (entre 901 et 1 280 px il restait seul à droite,
   les logos passant dessous à gauche) ; sur téléphone, logos un peu plus petits et plus serrés pour tenir en 3 + 2 (ils tombaient en 3 + 1 + 1 à 360 px) */
@media(max-width:1319px){.proof-label{margin-left:0;width:100%}.proof-bar{justify-content:flex-start}}
@media(max-width:420px){.partners{gap:14px 22px}.partner img{height:27px}.partner img[alt="Inizia"]{height:31px}.partner img[alt="ADEC"]{height:20px}
  .partner img[alt="Banque Populaire Méditerranée"]{height:32px}}

/* ==========================================================================
   12. En bref (définition) : titre à gauche, réponse et notes à droite
   ========================================================================== */
.brief .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-head)*1.6px);padding-top:calc(var(--s-head)*1.6px);
  background:linear-gradient(var(--rule),var(--rule)) center top/calc(100% - 2*var(--gutter)) 1px no-repeat}
.brief h2{max-width:calc(var(--w-h2)*1ch)}
.brief-answer{font-size:calc(var(--t-lead)*1.34px);font-weight:300;line-height:1.38;letter-spacing:-.012em;color:var(--violet);max-width:none}
.brief-more{display:grid;gap:0;margin-top:calc(var(--s-head)*1.6px);border-top:1px solid var(--rule);counter-reset:note}
.brief-more p{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;margin:0;padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:calc(var(--t-body)*1.06px);line-height:1.62;color:var(--fg-2);counter-increment:note}
.brief-more p::before{content:counter(note,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--violet);padding-top:.25em}
@media(min-width:1100px){
  .brief .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:calc(var(--s-col)*.5px);align-items:start}
  .brief h2{position:sticky;top:calc(var(--hdr) + var(--hdr-top) + 32px)}
  .brief-body{grid-column:2}
}

/* ==========================================================================
   13. Chiffres clés : filet, chiffre, visuel explicatif, source
   ========================================================================== */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--s-gap)*2px) calc(var(--s-col)*.34px)}
.kpi{display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding-top:calc(var(--s-card)*.9px);border-top:1px solid var(--rule-2);background:none}
.kpi-v{font-size:calc(var(--t-kpi)*1px);font-weight:300;line-height:1;letter-spacing:-.03em;color:var(--violet)}
.kpi p{margin:0;color:var(--fg);font-size:calc(var(--t-body)*1.03px);max-width:none}
.kpi-src{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--fg-2);padding-top:10px;border-top:1px dashed var(--rule)}
.viz{height:34px;display:flex;align-items:center;gap:6px}
.viz-h{gap:4px}
.viz-h .seg{position:relative;flex:1;height:10px;border-radius:2px;background:rgba(44,15,109,.12)}
.viz-h .seg i{border-radius:inherit}
.viz-h .seg i{position:absolute;inset:0;background:var(--violet);transform-origin:0 50%;scale:0 1;transition:scale 900ms var(--ease)}
.viz-h .seg--rec i{background:repeating-linear-gradient(135deg,var(--orange) 0 5px,rgba(242,172,109,.45) 5px 10px);transition-delay:450ms}
.viz-h .seg b{position:absolute;left:0;top:14px;font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--fg-2);white-space:nowrap}
.viz-h{height:40px;align-items:flex-start;padding-top:6px}
.viz-w{gap:4px}
.viz-w i:nth-child(7n):not(:last-child){margin-right:6px}
.viz-w i{flex:1;height:18px;border-radius:2px;background:rgba(44,15,109,.10);position:relative;overflow:hidden}
.viz-w i::after{content:"";position:absolute;inset:0;background:var(--violet);scale:1 0;transform-origin:50% 100%;transition:scale 500ms var(--ease);transition-delay:calc(var(--k,0) * 55ms)}
.viz-0{gap:0}
.viz-0 .doc{flex:none;width:26px;height:32px;border:1.5px solid var(--violet);border-radius:4px;position:relative;background:var(--lin)}
.viz-0 .doc::before{content:"";position:absolute;left:5px;right:5px;top:8px;height:1.5px;background:rgba(44,15,109,.4);box-shadow:0 5px 0 rgba(44,15,109,.4),0 10px 0 rgba(44,15,109,.4)}
.viz-0 .doc--out{border-color:var(--orange-vif)}
.viz-0 .seam{flex:1;height:0;border-top:1.5px dashed rgba(44,15,109,.4);margin:0 8px;position:relative}
.viz-0 .seam::after{content:"";position:absolute;right:-2px;top:-5.5px;width:8px;height:8px;border-top:1.5px solid rgba(44,15,109,.55);border-right:1.5px solid rgba(44,15,109,.55);rotate:45deg}
.in .viz-h .seg i,.in.viz-h .seg i{scale:1 1}
.in .viz-w i::after{scale:1 1}
@media(max-width:1100px){.kpis{grid-template-columns:1fr;gap:calc(var(--s-gap)*1.4px)}
  .kpi{grid-template-columns:minmax(120px,.5fr) minmax(0,1fr);grid-template-rows:auto;column-gap:28px;align-items:start}
  .kpi-v{grid-row:1/4}
  .kpi .viz,.kpi p,.kpi-src{grid-column:2}}
@media(max-width:560px){.kpi{grid-template-columns:1fr}.kpi-v,.kpi .viz,.kpi p,.kpi-src{grid-column:1;grid-row:auto}}

/* ==========================================================================
   14. Parcours d'une commande et blocs de fonctions (texte / planche)
   ========================================================================== */
.steps{display:grid;gap:calc(var(--s-steps)*1px)}
.step{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-gap)*2px);align-items:center;scroll-margin-top:140px}
@media(min-width:1181px){
  .step{grid-template-columns:calc((100% - var(--s-col)*1px) * var(--w-feat) / 100) minmax(0,1fr);column-gap:calc(var(--s-col)*1px)}
  .step--rev{grid-template-columns:minmax(0,1fr) calc((100% - var(--s-col)*1px) * var(--w-feat) / 100)}
  .step--rev .step-copy{order:2}
}
.step-copy{min-width:0}
.step-copy h3{font-size:calc(var(--t-h3)*1.45px);font-weight:300;line-height:1.15;letter-spacing:-.02em;color:var(--violet);margin:0 0 calc(var(--s-head)*1.6px)}
.step-copy p{position:relative;padding:12px 0 12px 22px;margin:0;border-top:1px solid var(--rule);font-size:calc(var(--t-lead)*.94px);line-height:1.6;color:var(--fg)}
.step-copy p::before{content:"";position:absolute;left:0;top:calc(12px + .72em);width:9px;height:1.5px;background:var(--orange-vif)}
.step-copy p:last-of-type{border-bottom:1px solid var(--rule)}
.step-copy .status{margin-top:16px}
.step-n{display:inline-grid;place-items:center;min-width:44px;height:28px;padding:0 10px;margin-bottom:14px;border:1px solid var(--rule-2);border-radius:999px;
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--violet);letter-spacing:.06em}

/* parcours en défilement fixe (enrichi par le script à partir de 1 100 px) */
.story{position:relative}
.story-rail{display:none}
@media(min-width:1100px){
  .story.is-enhanced{display:grid;grid-template-columns:minmax(0,calc(var(--w-feat)*1%)) minmax(0,1fr);column-gap:calc(var(--s-col)*1px);align-items:start}
  .story.is-enhanced .steps{gap:0;position:relative;padding-left:34px}
  .story.is-enhanced .story-rail{display:block;position:absolute;left:5px;top:18px;bottom:18px;width:0;border-left:1.5px dashed var(--rule-2)}
  .story.is-enhanced .story-rail::after{content:"";position:absolute;left:-1.5px;top:0;width:1.5px;height:calc(var(--sp,0) * 100%);background:var(--violet)}
  .story.is-enhanced .step{display:block;min-height:min(64vh,620px);padding:calc(var(--s-steps)*.5px) 0;opacity:1;transition:opacity var(--dur-l) var(--ease)}
  .story.is-enhanced .step.is-past{opacity:.34}
  .story.is-enhanced .step::before{content:"";position:absolute;left:0;width:11px;height:11px;margin-top:8px;border-radius:50%;background:var(--papier);border:1.5px solid var(--rule-2);transition:background var(--dur-s),border-color var(--dur-s)}
  .story.is-enhanced .step.is-active::before{background:var(--orange);border-color:var(--orange)}
  .story.is-enhanced .step-copy p{font-size:calc(var(--t-lead)*1px)}
  .story-stage{position:sticky;top:calc(var(--hdr) + var(--hdr-top) + max(24px,(100vh - var(--hdr) - var(--hdr-top) - 640px) / 2));display:grid;align-items:center}
  .story-stage > .app-shot{grid-area:1/1;opacity:0;translate:0 18px;scale:.985;transition:opacity var(--dur-l) var(--ease),translate var(--dur-l) var(--ease),scale var(--dur-l) var(--ease);pointer-events:none}
  .story-stage > .app-shot.is-active{opacity:1;translate:0 0;scale:1;pointer-events:auto}
}

/* ==========================================================================
   15. Indépendance : deux portes (raccordé en couture pleine, non raccordé en pointillé)
   ========================================================================== */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--s-gap)*1px)}
.door{position:relative;display:flex;flex-direction:column;gap:10px;padding:calc(var(--s-card)*1.3px);border-radius:var(--r-l);background:var(--lin);border:1px solid var(--rule)}
.door--ok{border:1.5px solid var(--violet);box-shadow:0 20px 44px -30px rgba(44,15,109,.45)}
.door--alt{border:1.5px dashed rgba(44,15,109,.38);background:transparent}
.door-viz{width:100%;height:auto;margin-bottom:10px;overflow:visible}
.door-viz .node{fill:var(--lin);stroke:var(--violet);stroke-width:1.5}
.door-viz .node--end{fill:var(--violet)}
.door-viz .seam{fill:none;stroke:var(--violet);stroke-width:1.5}
/* 28/09/2026 (Solène) : la ligne de l'usine non raccordée n'est plus en pointillés, comme celle de l'usine raccordée */
.door-viz .doc{fill:var(--lin);stroke:var(--orange-vif);stroke-width:1.5}
.door-viz .doc-line{stroke:rgba(44,15,109,.4);stroke-width:1.2}
.door-viz .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;fill:var(--fg-2);text-transform:uppercase}
.door-viz .run{fill:var(--orange);offset-rotate:0deg;animation:tt-run 3.4s var(--ease-io) infinite}
.branch-kicker{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.door--alt .branch-kicker{color:var(--fg-2)}
.branch-title{font-size:calc(var(--t-h3)*1.2px);font-weight:400;line-height:1.25;letter-spacing:-.012em;color:var(--fg)}
.branch-desc{margin:0;font-size:calc(var(--t-lead)*1.06px);line-height:1.5;color:var(--fg)}
.door--plain .branch-kicker::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;background:var(--orange);vertical-align:.1em}
@keyframes tt-run{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@media(max-width:900px){.doors{grid-template-columns:1fr}}

/* ==========================================================================
   16. Notre position : bandeau nuit pleine largeur
   ========================================================================== */
.stance{background:var(--nuit);color:#fff;padding:calc(var(--s-section)*2.1px) 0;--grid-1:rgba(255,255,255,.03);--grid-2:rgba(255,255,255,.06)}
.stance.grid-bg::before{-webkit-mask-image:radial-gradient(ellipse 70% 90% at 20% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 70% 90% at 20% 50%,#000 20%,transparent 80%)}
.stance .wrap{position:relative}
.stance-line{font-size:clamp(28px, calc(28px + 20 * var(--fluid)), 50px);font-weight:300;line-height:1.14;letter-spacing:-.028em;color:#fff;max-width:none;margin-top:calc(var(--s-head)*1.4px)}
.stance-line strong{display:block;font-weight:300;color:var(--orange)}
.stance-note{margin-top:calc(var(--s-content)*.8px);padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:calc(var(--t-lead)*1px);color:rgba(255,255,255,.78);max-width:none}

/* ==========================================================================
   17. Registre livré / prévu
   ========================================================================== */
.feat-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--s-gap)*1px) calc(var(--s-col)*.5px)}
.feat-col{display:flex;flex-direction:column;gap:16px;padding:0;background:none;border:0}
.feat-col h3{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);padding-bottom:12px;border-bottom:1px solid var(--rule-2)}
.feat-list{list-style:none;display:grid}
.feat-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:52px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:calc(var(--t-body)*1.06px);color:var(--fg)}
.feat-col .btn{align-self:flex-start;margin-top:auto}
@media(max-width:360px){.feat-col .btn{white-space:normal}}
.status{display:inline-flex;align-items:center;gap:8px;flex:none;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--fg-2);white-space:nowrap}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--menthe);box-shadow:0 0 0 3px rgba(53,192,159,.16)}
.status--dev::before{background:transparent;border:1.5px solid var(--orange-vif);box-shadow:none}
/* colonnes au prorata des formats des deux captures (2000 × 806 et 2000 × 1083) : même hauteur (25/09/2026) */
.shot-pair{display:grid;grid-template-columns:minmax(0,2.4814fr) minmax(0,1.8467fr);gap:calc(var(--s-col)*.4px);margin-top:calc(var(--s-content)*1.2px);align-items:start}
@media(max-width:900px){.feat-cols,.shot-pair{grid-template-columns:minmax(0,1fr)}.shot-pair{gap:40px}}

/* ==========================================================================
   18. Programme pilote : jalons reliés par une couture
   ========================================================================== */
.pilot{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-gap)*2px);background:none;border:0;padding:0;box-shadow:none}
.pilot .lead{max-width:none}
@media(min-width:1100px){.pilot{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:calc(var(--s-col)*.6px);align-items:start}}
.pilot-copy h2{max-width:calc(var(--w-h2)*1ch)}
.pilot-copy{border-top:1px solid var(--rule);padding-top:calc(var(--s-head)*1.6px)}
.pilot-steps{--when:96px;list-style:none;position:relative;display:grid;margin:0;padding:0}
.pilot-steps::before{content:"";position:absolute;left:calc(var(--when) + 12px);top:26px;bottom:26px;border-left:1.5px dashed rgba(44,15,109,.32);transform-origin:top;scale:1 0;transition:scale 1.1s var(--ease)}
.pilot-steps.in::before{scale:1 1}
.pilot-steps li{position:relative;display:grid;grid-template-columns:var(--when) 24px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--rule)}
.pilot-steps li:first-child{border-top:1px solid var(--rule)}
.pilot-steps li::before{content:"";grid-column:2;grid-row:1;justify-self:center;width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--toile);border:1.5px solid var(--violet);position:relative;z-index:1}
.pilot-steps li:last-child::before{background:var(--orange);border-color:var(--orange)}
.pilot-when{grid-column:1;grid-row:1;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);padding-top:3px}
.pilot-steps li > div{grid-column:3;grid-row:1}
.pilot-steps strong{display:block;font-weight:500;font-size:calc(var(--t-body)*1.1px);color:var(--fg)}
.pilot-steps span:not(.pilot-when){display:block;margin-top:2px;color:var(--fg-2)}
.pilot-steps li > div p{margin:6px 0 0;color:var(--fg-2);max-width:none}
.pilot--page .pilot-steps{--when:96px}
/* Notre histoire (À propos, 25/09/2026) : la frise des jalons du programme pilote, colonne des dates élargie pour « Septembre 2026 » */
@media(min-width:561px){.pilot--histoire .pilot-steps{--when:128px}}
.ambition-more{margin-top:0}
/* Programme pilote, déroulé en quatre étapes (24/09/2026) : numéro et durée sur le filet, titre, trois ou quatre points */
.plan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--s-card)*.65px);counter-reset:none}
@media(max-width:900px){.plan{grid-template-columns:minmax(0,1fr)}}
/* 28/09/2026 : le déroulé du pilote passe à trois étapes ; trois de front à partir de 1 180 px, et entre 901 et 1 179 px
   la troisième prend toute la largeur au lieu de rester seule sur une demi-ligne */
@media(min-width:1180px){.plan{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:901px) and (max-width:1179px){.plan-step:nth-child(3):last-child{grid-column:1/-1}}
.plan-step{position:relative;display:flex;flex-direction:column;padding:calc(var(--s-card)*1px) calc(var(--s-card)*1.2px) calc(var(--s-card)*1.1px);
  background:var(--lin);border:1px solid var(--rule-2);border-top:1.5px solid var(--violet);border-radius:var(--r)}
.plan-step:last-child{border-top-color:var(--orange-vif)}
.plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.plan-n{flex:none;white-space:nowrap;color:var(--violet);font-weight:500}
@media(max-width:560px){.plan-top{flex-direction:column;gap:4px}.plan-when{text-align:left}}
.plan-when{text-align:right}
.plan-step h3{margin:14px 0 10px;font-size:calc(var(--t-h3)*1.3px);font-weight:300;line-height:1.2;letter-spacing:-.012em;color:var(--violet)}
.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.plan-list li{position:relative;padding-left:20px;font-size:calc(var(--t-body)*1.03px);line-height:1.55;color:var(--fg)}
.plan-list li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--orange-vif)}
@media(max-width:560px){
  .pilot-steps{--when:0px}
  .pilot-steps::before{left:12px}
  .pilot-steps li{grid-template-columns:24px minmax(0,1fr);row-gap:2px}
  .pilot-steps li::before{grid-column:1}
  .pilot-when{grid-column:2;grid-row:1}
  .pilot-steps li > div{grid-column:2;grid-row:2}
}

/* ==========================================================================
   19. Questions / réponse (question à gauche, réponse et pièces à droite)
   ========================================================================== */
.qa-stack .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-gap)*1.6px)}
.qa-stack-head{margin:0}
.qa-stack-head .lead-answer{font-size:calc(var(--t-lead)*1.2px);font-weight:300;line-height:1.4;color:var(--violet);margin-top:calc(var(--s-head)*1.4px);max-width:none}
@media(min-width:1100px){
  .qa-stack .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:calc(var(--s-col)*.5px);align-items:start;padding-top:calc(var(--s-head)*1.6px);
    background:linear-gradient(var(--rule),var(--rule)) center top/calc(100% - 2*var(--gutter)) 1px no-repeat}
  .qa-stack .qa-stack-head{border-top:0;padding-top:0;grid-column:1}
  .qa-stack .wrap > :not(.qa-stack-head){grid-column:2}
  .qa-stack .wrap > .doors{grid-column:1/-1;margin-top:calc(var(--s-gap)*1px)}
  /* question sans fiche à droite : une seule colonne, la note passe dessous (24/09/2026) */
  .qa-stack .wrap:not(:has(> .idcard, > .doors)){grid-template-columns:minmax(0,1fr)}
  .qa-stack .wrap:not(:has(> .idcard, > .doors)) > :not(.qa-stack-head){grid-column:1}
}
.idcard-note{font-size:calc(var(--t-body)*1.06px);color:var(--fg-2);max-width:none}
.idcard + .idcard-note{margin-top:calc(var(--s-gap)*1.4px)}

/* étiquette cousue (données, société) */
.idcard{position:relative;max-width:none;margin:0;padding:calc(var(--s-card)*.8px) calc(var(--s-card)*1.3px);border-radius:var(--r);background:var(--lin);
  border:1px solid var(--rule-2);box-shadow:0 22px 44px -30px rgba(20,9,40,.4)}
.idcard::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(44,15,109,.28);border-radius:6px;pointer-events:none}
.idcard-row{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--rule)}
.idcard-row:first-child{border-top:0}
.idcard dt{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.idcard dd{margin:0;font-size:calc(var(--t-body)*1.06px);color:var(--fg)}
.idcard-sub{display:block;margin-top:2px;font-size:14px;color:var(--fg-2)}
.idcard-dot{display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:var(--menthe);box-shadow:0 0 0 3px rgba(53,192,159,.16)}
@media(max-width:480px){.idcard-row{grid-template-columns:1fr;gap:4px}}

/* ==========================================================================
   20. Fiches (petites cartes) et modules à venir
   ========================================================================== */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--w-card-min)*1px)),1fr));gap:calc(var(--s-gap)*1.6px) calc(var(--s-col)*.3px);counter-reset:fiche}
.grid-3.mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.grid-3.mini-grid{grid-template-columns:1fr}}
.mini-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1400px){.mini-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){.mini-grid:has(> :nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
/* 28/09/2026 : « À venir » d'Usines passe à trois fiches (Patronage retiré) ; trois de front, ou une par ligne sous 980 px, jamais deux plus une seule */
.mini-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.mini-grid:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}}
.mini-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:calc(var(--s-card)*.8px) 0 0;border-top:1.5px solid var(--violet);background:none;counter-increment:fiche}
.mini-card::before{content:counter(fiche,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--fg-2);letter-spacing:.06em}
.mini-card h3{font-size:calc(var(--t-h3)*1px);font-weight:500;color:var(--fg);margin:0}
.mini-card p{font-size:calc(var(--t-body)*1px);color:var(--fg-2);margin:0}
.mini-grid--futur .mini-card{border-top:1.5px dashed rgba(44,15,109,.4)}
.mini-grid--futur .mini-card::before{content:"Prévu";color:var(--brun)}
html[lang="en"] .mini-grid--futur .mini-card::before{content:"Planned"}
.mini-grid--futur .mini-card:last-child{border-top-color:var(--orange-vif);border-top-style:solid}
.mini-grid--futur .mini-card:last-child::before{content:counter(fiche,decimal-leading-zero);color:var(--fg-2)}
.mini-grid--plain .mini-card::before{content:none}
.mini-grid--plain .mini-card{padding-top:calc(var(--s-card)*.7px)}

/* ==========================================================================
   21. Questions fréquentes
   ========================================================================== */
.faq-block{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-gap)*1.6px)}
@media(min-width:1100px){
  .faq-block{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:calc(var(--s-col)*.5px);align-items:start;border-top:1px solid var(--rule);padding-top:calc(var(--s-head)*1.6px)}
  .faq-block .chap-head{border-top:0;padding-top:0;position:sticky;top:calc(var(--hdr) + var(--hdr-top) + 32px)}
}
.faq-list{border-top:1px solid var(--rule-2)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-h{margin:0;font:inherit;color:inherit}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:16px 0;border:0;background:none;text-align:left;
  font-size:calc(var(--t-body)*1.12px);font-weight:400;line-height:1.4;color:var(--fg);transition:color var(--dur-s)}
.faq-q:hover{color:var(--violet)}
.ic{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule-2);transition:background var(--dur-s),border-color var(--dur-s)}
.ic::before,.ic::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--violet);transition:rotate var(--dur-l) var(--ease)}
.ic::after{rotate:90deg}
.faq-item.open .ic{background:var(--violet);border-color:var(--violet)}
.faq-item.open .ic::before,.faq-item.open .ic::after{background:#fff}
.faq-item.open .ic::after{rotate:0deg}
.faq-a{color:var(--fg-2)}
.faq-item:not(.open) .faq-a{display:none}
html.js .faq-a{display:grid!important;grid-template-rows:0fr;transition:grid-template-rows var(--dur-l) var(--ease)}
html.js .faq-item.open .faq-a{grid-template-rows:1fr}
.faq-in{overflow:hidden;min-height:0}
.faq-a p{font-size:calc(var(--t-body)*1.03px);line-height:1.65;max-width:none}
.faq-in > :first-child{padding-top:0}
.faq-in > :last-child{padding-bottom:22px}
.faq-a p + p{margin-top:.7em}
.faq-a a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.faq-group{scroll-margin-top:150px}
.faq-group + .faq-group{margin-top:calc(var(--s-section)*1px)}
.faq-group > h2{font-size:calc(var(--t-h3)*1.3px);font-weight:300;margin:0 0 calc(var(--s-head)*1.4px)}

/* ==========================================================================
   22. Appel final : planche cadrée
   ========================================================================== */
.cta{padding:calc(var(--s-section)*1px) 0 calc(var(--s-cta)*1px)}
.cta-panel{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--s-card)*3px) calc(var(--s-card)*1.6px);border-radius:var(--r-l);background:var(--lin);border:1px solid var(--rule-2);text-align:center}
.cta-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:
    linear-gradient(to right,var(--grid-2) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-2) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-1) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-1) 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 20%,transparent 85%);mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 20%,transparent 85%)}
.cta-panel::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(44,15,109,.22);border-radius:10px;pointer-events:none}
.cta .eyebrow{justify-content:center}
.cta h2{margin:0 auto;max-width:none}
.cta p{margin:calc(var(--s-head)*1.6px) auto 0;font-size:calc(var(--t-lead)*1px);color:var(--fg-2);max-width:none}
.cta .btn{margin-top:calc(var(--s-content)*.8px)}

/* ==========================================================================
   23. Équipe
   ========================================================================== */
/* 25/09/2026, 15 h 26 : un membre par ligne (demande de Sébastien), photo à largeur fixe, texte sur le reste de la ligne */
.team{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-gap)*1px)}
.member{display:grid;grid-template-columns:clamp(150px,19vw,250px) minmax(0,1fr);gap:calc(var(--s-card)*1.2px) calc(var(--s-card)*2px);align-items:start;padding:calc(var(--s-card)*1px);border-radius:var(--r-l);background:var(--lin);border:1px solid var(--rule)}
.member-photo{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--toile)}
.member-photo picture,.member-photo img{width:100%;height:100%;object-fit:cover}
.member-photo img{transition:scale 700ms var(--ease)}
a.member-photo:hover img{scale:1.04}
.member:nth-child(1) img{object-position:50% 22%}
.member:nth-child(2) img{object-position:50% 26%}
.member:nth-child(3) img{object-position:50% 20%}
.member:nth-child(4) img{object-position:50% 24%}
.member .info{min-width:0;padding-top:4px}   /* texte calé en haut de la carte (Sébastien, 25/09/2026) */
.member h3{font-size:calc(var(--t-h3)*1.1px);font-weight:500;color:var(--fg)}
.member .role{margin:4px 0 14px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--violet)}
.member p{font-size:calc(var(--t-body)*1px);color:var(--fg-2);line-height:1.62}
.member p + p{margin-top:calc(var(--s-para)*.01em)}
@media(max-width:560px){.member{grid-template-columns:1fr}.member-photo{aspect-ratio:1/1;max-width:260px}}

/* ==========================================================================
   24. Contact, entretien, formulaires
   ========================================================================== */
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--s-gap)*1px)}
.contact-card{display:flex;flex-direction:column;gap:14px;padding:calc(var(--s-card)*1.2px);border-radius:var(--r-l);background:var(--lin);border:1px solid var(--rule);text-align:left}
.contact-card--accent{border:1.5px solid var(--violet)}
.contact-card h2{font-size:calc(var(--t-h3)*1.15px);font-weight:500;color:var(--fg);letter-spacing:-.01em}
.contact-card > p{color:var(--fg-2)}
.contact-card ul{list-style:none;display:grid;border-top:1px solid var(--rule)}
.contact-card li{position:relative;padding:10px 0 10px 20px;border-bottom:1px solid var(--rule);font-size:calc(var(--t-body)*1px)}
.contact-card li::before{content:"";position:absolute;left:0;top:calc(10px + .72em);width:8px;height:1.5px;background:var(--orange-vif)}
@media(max-width:980px){.contact-cards{grid-template-columns:1fr}}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--s-gap)*1px)}
.choice{display:flex;flex-direction:column;gap:12px;padding:calc(var(--s-card)*1.3px);border-radius:var(--r-l);background:var(--lin);border:1px solid var(--rule);text-align:left}
.choice--main{border:1.5px solid var(--violet)}
.choice h3{font-size:calc(var(--t-h3)*1.15px);font-weight:500}
.choice p{color:var(--fg-2)}
.choice .btn{margin-top:auto;align-self:flex-start}
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--s-gap)*1.6px) calc(var(--s-col)*.3px);counter-reset:s3;text-align:left}
.steps3 li{padding-top:calc(var(--s-card)*.8px);border-top:1.5px solid var(--violet);counter-increment:s3}
.steps3 li::before{content:counter(s3,decimal-leading-zero);display:block;margin-bottom:10px;font-family:var(--mono);font-size:13px;color:var(--fg-2)}
.steps3 h3{font-size:calc(var(--t-h3)*1px);margin:0 0 6px}
.steps3 p{color:var(--fg-2)}
@media(max-width:900px){.choice-grid,.steps3{grid-template-columns:1fr}}
.form{display:grid;gap:16px;max-width:760px;margin:0;text-align:left}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--rule-2);background:var(--lin);
  font:inherit;font-size:max(16px,calc(var(--t-body)*1px));color:var(--fg);transition:border-color var(--dur-s),box-shadow var(--dur-s)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(44,15,109,.14)}
.form .btn{justify-self:start}
.form-privacy{font-size:14px;color:var(--fg-2);line-height:1.55}
.form-privacy a,.form-alt a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.form-ok{display:none;color:var(--violet);font-weight:500}
.form-err{display:none;color:#B3261E;font-weight:500}
.form-alt{max-width:760px;margin:calc(var(--s-gap)*1.6px) 0 0;color:var(--fg-2);text-align:left}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(var(--s-gap)*1.4px)}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rule-2);color:var(--fg);font-size:14.5px;transition:background var(--dur-s),color var(--dur-s),border-color var(--dur-s)}
.chips a:hover{background:var(--violet);border-color:var(--violet);color:#fff}

/* ==========================================================================
   25. Mentions légales : sommaire collé à gauche, texte à droite
   ========================================================================== */
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-gap)*2px)}
@media(min-width:1100px){.legal-layout{grid-template-columns:minmax(240px,300px) minmax(0,1fr);column-gap:calc(var(--s-col)*.5px);align-items:start}
  .legal-toc{position:sticky;top:calc(var(--hdr) + var(--hdr-top) + 28px);max-height:calc(100vh - 140px);overflow:auto}}
.legal-toc{padding:0;border-top:1px solid var(--rule-2);background:none}
.legal-toc p{margin:14px 0 8px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.legal-toc li{counter-increment:toc;border-bottom:1px solid var(--rule)}
.legal-toc a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:baseline;min-height:40px;padding:9px 0;font-size:14.5px;line-height:1.4;color:var(--fg)}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:12.5px;color:var(--fg-2)}
.legal-toc a:hover,.legal-toc a.is-active{color:var(--violet)}
.legal{max-width:calc(var(--w-legal)*1ch)}
.legal h2{font-size:calc(var(--t-h3)*1.25px);font-weight:400;color:var(--violet);margin:calc(var(--s-section)*1px) 0 calc(var(--s-head)*1.4px);padding-top:calc(var(--s-head)*1.6px);border-top:1px solid var(--rule);scroll-margin-top:120px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:calc(var(--t-h3)*.92px);margin:1.4em 0 .5em}
.legal p,.legal li{font-size:calc(var(--t-body)*1px);line-height:1.68;color:var(--fg)}
.legal p + p,.legal ul + p,.legal p + ul{margin-top:.8em}
.legal ul{padding-left:1.2em}
.legal li + li{margin-top:.4em}
.legal a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.legal-updated{font-family:var(--mono);font-size:13px;color:var(--fg-2);margin-bottom:calc(var(--s-gap)*1.4px)}

/* ==========================================================================
   26. Pied de page
   ========================================================================== */
.site-footer{background:var(--nuit);color:rgba(255,255,255,.76);padding:calc(var(--s-section)*1.5px) 0 22px;position:relative;isolation:isolate;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:
  linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);background-size:60px 60px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px calc(var(--s-col)*.5px);align-items:start}
.footer-brand .logo svg{height:40px}
.site-footer .logo .cls-1{fill:#fff}
.ftxt{margin-top:22px;font-size:clamp(17px, calc(17px + 5 * var(--fluid)), 22px);font-weight:300;line-height:1.4;letter-spacing:-.01em;color:#fff}   /* pied de page resserré (24/09/2026) : une ligne par phrase */
.ftxt .ftxt-2{color:var(--orange)}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.footer-title{margin:0 0 10px;font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.footer-cols a{display:flex;align-items:center;min-height:44px;font-size:17px;color:rgba(255,255,255,.88);transition:color var(--dur-s)}
.footer-cols a:hover{color:var(--orange)}
.footer-cols .social-row{display:flex;gap:10px}
.footer-cols .social{width:44px;height:44px;justify-content:center;border:1px solid rgba(255,255,255,.2);border-radius:50%}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:calc(var(--s-section)*1.1667px);padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.55)}
@media(min-width:1280px){.ftxt{white-space:nowrap}.footer-top{grid-template-columns:auto minmax(0,1fr)}}
@media(max-width:1279px){.footer-top{grid-template-columns:1fr}}
@media(max-width:560px){.footer-cols{grid-template-columns:1fr 1fr}.footer-cols .col--social{grid-column:1/-1}}

/* ==========================================================================
   27. Mouvement : apparitions, premier écran, réduction de mouvement
   ========================================================================== */
html.js .reveal{opacity:0;translate:0 22px;transition:opacity var(--dur-l) var(--ease),translate 700ms var(--ease)}
html.js .reveal.in{opacity:1;translate:0 0}
html.js [data-stagger] > *{opacity:0;translate:0 16px;transition:opacity var(--dur-l) var(--ease),translate 700ms var(--ease);transition-delay:var(--d,0ms)}
html.js [data-stagger].in > *{opacity:1;translate:0 0}
html.js .reveal h2,html.js .chap-head h2{transition:opacity var(--dur-l) var(--ease),filter 700ms var(--ease)}
/* premier écran orchestré au chargement */
html.js .hero .h-in{opacity:0;translate:0 18px;filter:blur(6px);transition:opacity 700ms var(--ease),translate 900ms var(--ease),filter 900ms var(--ease);transition-delay:var(--hd,0ms)}
html.js.is-loaded .hero .h-in{opacity:1;translate:0 0;filter:none}
html.js .hero h1 .accent{background-size:0% .22em;transition:background-size 1100ms var(--ease) 700ms}
html.js.is-loaded .hero h1 .accent{background-size:100% .22em}
html.js .plate--hero .app-frame{opacity:0;transform:perspective(1600px) rotateX(9deg) translateY(36px) scale(.97);transition:opacity 900ms var(--ease) 380ms,transform 1300ms var(--ease) 380ms}
html.js.is-loaded .plate--hero .app-frame{opacity:1;transform:none}
.plate--hero .app-frame{translate:0 calc(var(--hp,0) * -28px)}
html.js .pin{scale:0;transition:scale 500ms var(--ease);transition-delay:calc(1300ms + var(--k,0) * 120ms)}
html.js.is-loaded .pin{scale:1}
html.no-anim .reveal,html.no-anim [data-stagger] > *,html.no-anim .hero .h-in,html.no-anim .plate--hero .app-frame,html.no-anim .pin{opacity:1!important;translate:none!important;filter:none!important;transform:none!important;scale:1!important}
html.no-anim .hero h1 .accent{background-size:100% .22em}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  html.js .reveal,html.js [data-stagger] > *,html.js .hero .h-in,html.js .plate--hero .app-frame,html.js .pin{opacity:1!important;translate:none!important;filter:none!important;transform:none!important;scale:1!important}
  html.js .hero h1 .accent{background-size:100% .22em}
  .door-viz .run{display:none}
  .viz-h .seg i{scale:1 1}.viz-w i::after{scale:1 1}
  .pilot-steps::before{scale:1 1}
}

/* liens dans le texte : zone de toucher agrandie sans changer la mise en page */
.faq-a a,.legal a,.form-privacy a,.form-alt a,.hero--solo .lead a{display:inline-block;padding-block:12px;margin-block:-12px}

/* ==========================================================================
   28. Téléphone
   ========================================================================== */
@media(max-width:767px){
  .hero{padding-top:calc(var(--hdr) + var(--hdr-top) + 22px);padding-bottom:calc(var(--s-hero-bottom)*.7px)}
  .hero .lead{font-size:calc(var(--t-lead)*1px)}
  .btn--lg{--bh:54px;width:100%}
  .hero .btn-row,.hero-actions .btn-row{width:100%}
  .chap-head,.center-head,.qa-stack-head{margin-bottom:calc(var(--s-content)*.8px)}
  .section{padding:calc(var(--s-section)*.9px) 0}
  .section--tint,.section--dark{padding:calc(var(--s-section)*1.3px) 0}
  .stance{padding:calc(var(--s-section)*1.5px) 0}
  .cta-panel{padding:calc(var(--s-card)*2px) calc(var(--s-card)*1px)}
  .app-frame::before{inset:-9px}
  .subnav-links a,.chips a,.footer-cols a,.legal-toc a,.crumbs a,.btn--sm{min-height:44px}
  .subnav-links{scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent;padding-bottom:8px}
  .subnav-links::-webkit-scrollbar{display:block;height:3px}
  .subnav-links::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px}
  .form-privacy,.hero-note{font-size:16px}
}

/* ==========================================================================
   29. Accueil : retouches de Sébastien (outil Zones, 24/09/2026), ordinateur
   ========================================================================== */
@media(min-width:1100px){
  .accueil #enjeu .chap-head{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
  .accueil .stance-line{max-width:none}
  .accueil .stance-note{max-width:1039px}
  .accueil #pilote .pilot-copy{max-width:770px;margin-top:4px}
  .accueil #pilote .pilot-copy h2{max-width:39ch;line-height:1.06}
}

/* ============== Refonte 10/2026 : accueil ============== */
/* En-tête transparent sur la photo d'ouverture */
html:not(.menu-open) .accueil .site-header.on-hero .header-bar{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html:not(.menu-open) .accueil .site-header.on-hero .nav a,html:not(.menu-open) .accueil .site-header.on-hero .lang{color:#fff}
html:not(.menu-open) .accueil .site-header.on-hero .tt-logo .cls-1,html:not(.menu-open) .accueil .site-header.on-hero .tt-logo .cls-2{fill:#fff}
html:not(.menu-open) .accueil .site-header.on-hero .header-cta{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:none}
html:not(.menu-open) .accueil .site-header.on-hero .header-cta:hover{background:#fff;color:var(--violet);border-color:#fff;box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
html:not(.menu-open) .accueil .site-header.on-hero .nav-toggle span{background:#fff}
/* Bascule « Vous êtes : Tailleur / Fabricant » */
.seg-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:calc(var(--s-gap)*2px)}
.seg-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.app-tabs{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:rgba(44,15,109,.07);border:1px solid var(--rule-2)}
.app-tabs::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--violet);box-shadow:0 8px 18px -10px rgba(44,15,109,.7);transition:transform .28s ease}
.app-tabs[data-on="2"]::before{transform:translateX(100%)}
.app-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;min-width:170px;padding:0 26px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:16px;font-weight:500;color:var(--violet);cursor:pointer;transition:color .2s}
.app-tab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app-tab[aria-selected="true"]{color:#fff}
.app-tab:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media(max-width:480px){.app-tab{min-width:0;padding:0 18px}}
@media(prefers-reduced-motion:reduce){.app-tabs::before{transition:none}}
.app-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:calc(var(--s-col)*.5px);align-items:center}
.app-panel h3{font-size:1.35rem;font-weight:400;color:var(--violet);margin:0 0 10px}
.app-panel p{margin:0;color:var(--fg-2);max-width:30em}
@media(max-width:900px){.app-panel{grid-template-columns:minmax(0,1fr)}}
.principe{list-style:none;margin:22px 0 0;padding:0;counter-reset:pr;display:grid;gap:0;border-top:1px solid var(--rule)}
.principe li{counter-increment:pr;display:grid;grid-template-columns:2.2em minmax(0,7.5em) minmax(0,1fr);gap:8px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule)}
.principe li::before{content:"0" counter(pr);font-family:var(--mono);font-size:12px;color:var(--orange-vif,var(--orange))}
.principe strong{font-weight:500;color:var(--violet)}
.principe span{color:var(--fg-2);font-size:.95em}
@media(max-width:480px){.principe li{grid-template-columns:2.2em minmax(0,1fr)}.principe span{grid-column:2}}
/* Invitation à basculer : la pastille glisse vers l'autre profil et revient, l'autre profil pulse.
   Jouée quand la bascule arrive à l'écran, au plus trois fois, plus jamais après un premier clic. */
.app-tabs.is-hint::before{animation:tt-tab-peek 1500ms var(--ease-io)}
@keyframes tt-tab-peek{0%{transform:translateX(0)}38%{transform:translateX(24%)}62%{transform:translateX(24%)}88%{transform:translateX(-2%)}100%{transform:translateX(0)}}
.app-tab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.app-tabs.is-hint .app-tab[aria-selected="false"]::after{animation:tt-tab-pulse 1500ms var(--ease) 250ms}
@keyframes tt-tab-pulse{0%{box-shadow:0 0 0 0 rgba(242,172,109,.7)}100%{box-shadow:0 0 0 14px rgba(242,172,109,0)}}
@media(prefers-reduced-motion:reduce){.app-tabs.is-hint::before,.app-tabs.is-hint .app-tab::after{animation:none}}
/* Ce qu'on apporte */
.ap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s-gap)*1px)}
@media(max-width:1100px){.ap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ap-grid{grid-template-columns:minmax(0,1fr)}}
.ap-ic{width:44px;height:44px;margin-bottom:14px;fill:none;stroke:var(--violet);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ap-ic .f{fill:var(--orange);stroke:var(--orange)}
/* Deux options : seul ou connecté */
.options{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:calc(var(--s-gap)*1px);align-items:stretch}
.option{display:flex;flex-direction:column;gap:16px}
.option > .doors,.option > .door{flex:1}
.option-head{display:flex;align-items:baseline;gap:12px;margin:0;padding-bottom:12px;border-bottom:1px solid var(--rule);font-size:1.2rem;color:var(--violet)}
.option-n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-vif,var(--orange))}
.door .branch-kicker + .door-viz{margin-top:6px}
.door .btn{align-self:flex-start;margin-top:8px}
@media(max-width:1100px){.options{grid-template-columns:minmax(0,1fr)}}

/* ============== Refonte 10/2026 : Tailleurs et Fabricants (enjeu, avant / après, démo en quatre temps) ============== */
.brief-more p:only-child{display:block}
.brief-more p:only-child::before{content:none}
.hero.hero--photo.hero--page h1{font-size:clamp(38px,4.7vw,78px);max-width:13em}
.ba{position:relative;display:grid;border-top:1px solid var(--rule)}
.ba-row{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) minmax(0,1fr);align-items:stretch;border-bottom:1px solid var(--rule)}
.ba-row>*{margin:0;padding:18px 22px}
.ba-k{padding-left:0!important;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);padding-top:21px!important}
.ba-b{color:var(--fg-2)}
.ba-a{color:var(--fg);background:rgba(44,15,109,.05);border-left:1.5px solid var(--violet);font-weight:500}
.ba-head .ba-b,.ba-head .ba-a{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.ba-head .ba-a{color:var(--violet)}
@media(max-width:760px){.ba-row{grid-template-columns:minmax(0,1fr)}.ba-row>*{padding:10px 14px}.ba-k{padding:16px 0 2px!important}.ba-head{display:none}.ba-b::before{content:"Aujourd’hui : ";font-weight:500}.ba-row{padding-bottom:12px}}
.demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:calc(var(--s-col)*.5px);align-items:center}
@media(max-width:980px){.demo{grid-template-columns:minmax(0,1fr)}}
.demo-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.demo-step{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:4px 6px;width:100%;padding:16px 12px 16px 0;border:0;border-bottom:1px solid var(--rule);background:transparent;font:inherit;text-align:left;cursor:pointer;color:var(--fg-2);transition:color .2s}
.demo-step .n{font-family:var(--mono);font-size:12px;color:var(--fg-2);padding-top:.35em}
.demo-step strong{font-weight:500;font-size:1.12rem;color:var(--fg)}
.demo-step span.d{grid-column:2;font-size:.95em;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s}
.demo-step[aria-selected="true"] .n{color:var(--orange-vif)}
.demo-step[aria-selected="true"] strong{color:var(--violet)}
.demo-step[aria-selected="true"] span.d{max-height:7em;opacity:1}
.demo-step:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.demo-steps{border-top:0!important}
.demo-steps li{position:relative;padding-left:34px}
.demo-step{grid-template-columns:minmax(0,1fr)!important}
.demo-step .n{display:none}
.demo-step span.d{grid-column:1!important}
.demo-steps li .dot{position:absolute;left:0;top:21px;width:13px;height:13px;border-radius:50%;background:var(--papier,#f4f0ec);border:1.5px solid rgba(44,15,109,.3);z-index:1;transition:background .3s,border-color .3s,box-shadow .3s}
.demo-steps li.done .dot,.demo-steps li.cur .dot{background:var(--orange-vif);border-color:var(--orange-vif)}
.demo-steps li.cur .dot{box-shadow:0 0 0 5px rgba(242,150,87,.22)}
.demo-steps li:not(:last-child)::before,.demo-steps li:not(:last-child)::after{content:"";position:absolute;left:5.750px;top:27px;height:100%;width:1.500px}
.demo-steps li:not(:last-child)::before{background:rgba(44,15,109,.16)}
.demo-steps li:not(:last-child)::after{background:var(--orange-vif);transform:scaleY(0);transform-origin:top}
.demo-steps li.done::after{transform:scaleY(1)}
.demo.playing .demo-steps li.cur::after{animation:demoFill 4.200s linear forwards}
@keyframes demoFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.demo.playing .demo-steps li.cur::after{animation:none}}
.demo-win{background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 30px 60px -40px rgba(44,15,109,.5);overflow:hidden}
.demo-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--rule)}
.demo-dots{display:flex;gap:5px}.demo-dots i{width:8px;height:8px;border-radius:50%;background:#e9a39b}.demo-dots i:nth-child(2){background:#eccf8e}.demo-dots i:nth-child(3){background:#a8cf9f}
.demo-url{flex:0 1 240px;margin-inline:auto;padding:4px 14px;border:1px solid var(--rule);border-radius:999px;font-family:var(--mono);font-size:11px;color:var(--fg-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
@media(max-width:560px){.demo-tag{display:none}}
.demo-stage{position:relative;aspect-ratio:520/152}
.demo-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.demo-scene.is-on{opacity:1;visibility:visible}
.demo-scene .s{fill:none;stroke:var(--violet);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.demo-scene .bx{fill:#fff;stroke:var(--violet);stroke-width:1.4}
.demo-scene .l{stroke:rgba(44,15,109,.38);stroke-width:1.4;stroke-linecap:round;fill:none}
.demo-scene .g{stroke:rgba(44,15,109,.4);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.demo-scene .o{stroke:var(--orange-vif);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.demo-scene .of{fill:var(--orange-vif)}.demo-scene .vf{fill:var(--violet)}.demo-scene .cf{fill:rgba(44,15,109,.32)}
.demo-scene .ob{fill:rgba(242,150,87,.18);stroke:var(--orange-vif);stroke-width:1.3}
.demo-scene text{font-family:var(--sans);font-size:8.5px;fill:var(--fg)}
.demo-scene text.to{fill:var(--orange-vif)}.demo-scene text.tm{font-size:7px;fill:var(--violet)}
.demo-scene .a{opacity:0}
.demo-scene.is-on .a{animation:demoIn .5s ease both;animation-delay:calc(var(--i,0)*140ms + 120ms)}
.demo-scene .w{stroke-dasharray:1;stroke-dashoffset:1}
.demo-scene.is-on .w{animation:demoDraw .9s ease both;animation-delay:calc(var(--i,0)*140ms + 200ms)}
@keyframes demoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes demoDraw{to{stroke-dashoffset:0}}
.demo-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:0 9% 18px}
.demo-rail::before,.demo-rail::after{content:"";position:absolute;top:5px;left:12.5%;height:1.5px}
.demo-rail::before{right:12.5%;background:rgba(44,15,109,.18)}
.demo-rail::after{width:calc(var(--p,0)*25%);background:var(--orange-vif);transition:width .5s ease}
.demo-pt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:transparent;font:inherit;font-size:11.5px;color:var(--fg-2);cursor:pointer;padding:0}
.demo-pt::before{content:"";width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid rgba(44,15,109,.3);transition:background .3s,border-color .3s,box-shadow .3s}
.demo-pt.done::before{background:var(--orange-vif);border-color:var(--orange-vif)}
.demo-pt[aria-current="true"]{color:var(--fg)}
.demo-pt[aria-current="true"]::before{box-shadow:0 0 0 5px rgba(242,150,87,.22)}
@media(prefers-reduced-motion:reduce){.demo-scene .a{opacity:1;animation:none!important}.demo-scene .w{stroke-dashoffset:0;animation:none!important}}

/* ============== Refonte 10/2026 : Fabricants (fiche, module sur mesure, mise en place, données) ============== */
.bespoke{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:calc(var(--s-col)*.5px);align-items:center;padding:calc(var(--s-card)*2px);border:1.5px solid var(--violet);border-radius:var(--r-l);background:var(--lin);box-shadow:0 20px 44px -30px rgba(44,15,109,.45)}
.bespoke h2{margin:10px 0 0}
.bespoke .lead{margin:0 0 18px;max-width:40em}
@media(max-width:980px){.bespoke{grid-template-columns:minmax(0,1fr)}}
.spec{border-top:1px solid var(--rule)}
.spec-row{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--rule)}
.spec-row dt{font-weight:500;color:var(--violet);font-size:1.05rem}
.spec-row dd{margin:0;color:var(--fg-2);max-width:46em}
@media(max-width:760px){.spec-row{grid-template-columns:minmax(0,1fr)}}
.two-col{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:calc(var(--s-col)*.5px);align-items:start}
@media(max-width:980px){.two-col{grid-template-columns:minmax(0,1fr)}}
.two-col .chap-head{margin-bottom:0}
.qa{border-top:1px solid var(--rule)}
.qa-item{padding:22px 0;border-bottom:1px solid var(--rule)}
.qa-item h3{margin:0 0 6px;font-size:1.15rem;font-weight:500;color:var(--violet)}
.qa-item p{margin:0;color:var(--fg-2);max-width:44em}
.qa-item p+p{margin-top:6px}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--s-gap)*1px)}
@media(max-width:900px){.trust{grid-template-columns:minmax(0,1fr)}}
.trust-card{padding:calc(var(--s-card)*1.2px);border:1px solid var(--rule);border-radius:var(--r-l);background:var(--lin)}
.trust-card .k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin-bottom:10px}
.trust-card h3{margin:0 0 8px;font-size:1.15rem;font-weight:500;color:var(--violet)}
.trust-card p{margin:0;color:var(--fg-2)}
.demo-scene text.th{font-family:var(--mono);font-size:6.5px;letter-spacing:.06em;text-transform:uppercase;fill:var(--fg-2)}
.demo-scene .card{fill:#fff;stroke:rgba(44,15,109,.4);stroke-width:1.1}
.demo-scene .col{fill:rgba(44,15,109,.045)}

/* 10/2026 : repères « plusieurs écrans » de la démo (créés par carnet.js) */
.demo-ctrl{display:flex;align-items:center;gap:6px;flex:none}
.demo-count{min-width:3.4em;margin-right:4px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--violet);text-align:right;font-variant-numeric:tabular-nums}
.demo-nav{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--rule-2);border-radius:50%;background:#fff;color:var(--violet);cursor:pointer;transition:border-color .2s,background .2s}
.demo-nav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-nav:hover{border-color:var(--violet);background:rgba(44,15,109,.05)}
.demo-nav:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.demo-url{transition:color .3s}
.demo-prog{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:5px;padding:10px 16px 0}
.demo-prog i{position:relative;height:3px;border-radius:2px;background:rgba(44,15,109,.12);overflow:hidden}
.demo-prog i::after{content:"";position:absolute;inset:0;background:var(--orange-vif);transform:scaleX(0);transform-origin:left}
.demo-prog i.done::after,.demo:not(.playing) .demo-prog i.cur::after{transform:none}
.demo.playing .demo-prog i.cur::after{animation:demoFillX 4.2s linear forwards}
@keyframes demoFillX{from{transform:scaleX(0)}to{transform:none}}
.demo-stage{overflow:hidden}
.demo-scene{transform:translateX(36px);transition:opacity .45s var(--ease),transform .75s var(--ease),visibility .45s}
.demo-scene.is-on{transform:none}
.demo-scene.is-out{transform:translateX(-36px)}
.demo.rev .demo-scene:not(.is-on):not(.is-out){transform:translateX(-36px)}
.demo.rev .demo-scene.is-out{transform:translateX(36px)}
@media(max-width:560px){.demo-url{display:none}.demo-ctrl{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.demo-scene,.demo-scene.is-out,.demo.rev .demo-scene{transform:none!important}.demo.playing .demo-prog i.cur::after{animation:none;transform:none}}

/* ============== Refonte 10/2026 : FAQ (recherche, filtre par profil, rubriques) ============== */
.faq-hero{padding-bottom:calc(var(--s-hero-bottom)*.5px)!important}
.faq-hero .hero-copy{max-width:920px;margin-inline:auto;text-align:center}
.faq-tools{display:grid;gap:18px;margin:28px auto 0;max-width:720px}
.faq-tools .seg-row{justify-content:center}
.faq-layout{margin-inline:auto}
.faq-tools .seg-row{margin:0}
.faq-search input{text-align:left}
.faq-search{position:relative}
.faq-search svg{position:absolute;left:20px;top:50%;translate:0 -50%;width:20px;height:20px;fill:none;stroke:var(--violet);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.faq-search input{width:100%;height:60px;padding:0 22px 0 54px;border:1.5px solid var(--rule-2);border-radius:999px;background:#fff;font:inherit;font-size:17px;color:var(--fg);box-shadow:0 18px 40px -30px rgba(44,15,109,.5);transition:border-color .2s,box-shadow .2s}
.faq-search input::placeholder{color:var(--fg-2);opacity:.8}
.faq-search input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(44,15,109,.1)}
.seg3{position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);padding:5px;border-radius:999px;background:rgba(44,15,109,.07);border:1px solid var(--rule-2)}
.seg3::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:999px;background:var(--violet);box-shadow:0 8px 18px -10px rgba(44,15,109,.7);transition:transform .28s ease}
.seg3[data-on="2"]::before{transform:translateX(100%)}
.seg3[data-on="3"]::before{transform:translateX(200%)}
.seg3 button{position:relative;z-index:1;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:15.5px;font-weight:500;color:var(--violet);cursor:pointer;transition:color .2s;white-space:nowrap}
.seg3 button[aria-pressed="true"]{color:#fff}
.seg3 button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media(max-width:480px){.seg3 button{padding:0 14px;font-size:14.5px}}
@media(prefers-reduced-motion:reduce){.seg3::before{transition:none}}
.faq-layout{display:grid;max-width:920px;grid-template-columns:minmax(0,1fr);gap:calc(var(--s-col)*.6px);align-items:start}
@media(max-width:900px){.faq-layout{grid-template-columns:minmax(0,1fr)}}
.faq-groups{display:grid;gap:calc(var(--s-section)*.7px)}
.faq-groups .faq-group+.faq-group{margin-top:0}
.faq-group>h2{display:flex;align-items:center;gap:12px}
.faq-group>h2 svg{width:26px;height:26px;fill:none;stroke:var(--orange-vif);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.faq-groups .faq-q{gap:14px}
.faq-q .aud{margin-left:auto;flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);padding:4px 10px;border-radius:999px;background:rgba(44,15,109,.07)}
.faq-q .aud.f{color:#a2551e;background:rgba(242,150,87,.18)}
.faq-q .aud+.ic{margin-left:0}
@media(max-width:560px){.faq-q .aud{display:none}}
.faq-item[hidden],.faq-group[hidden]{display:none}
.faq-empty{padding:40px 28px;border:1.5px dashed rgba(44,15,109,.3);border-radius:var(--r-l);text-align:center;color:var(--fg-2)}
.faq-empty strong{display:block;font-weight:500;font-size:1.2rem;color:var(--violet);margin-bottom:6px}
mark{background:rgba(242,150,87,.35);color:inherit;border-radius:3px;padding:0 2px}

/* ============== Refonte 10/2026 : À propos (origine, métier, réponse en 2D, équipe) ============== */
.origin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--s-col)*.6px);align-items:start}
@media(max-width:980px){.origin{grid-template-columns:minmax(0,1fr)}}
.origin-h h2{margin:10px 0 0}
.origin-body p{margin:0 0 16px;font-size:1.12rem;line-height:1.65;color:var(--fg);max-width:36em}
.origin-body p.first{font-size:1.45rem;line-height:1.4;font-weight:300;color:var(--violet)}
.origin-body p:last-child{margin-bottom:0}
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--s-gap)*1px);margin-top:calc(var(--s-head)*2.4px)}
@media(max-width:900px){.pains{grid-template-columns:minmax(0,1fr)}}
.pain{padding:calc(var(--s-card)*1.2px);border-top:1.5px solid var(--violet)}
.pain .k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-vif);margin-bottom:8px}
.pain p{margin:0;color:var(--fg-2)}
@media(min-width:1000px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}.team .member{grid-template-columns:150px minmax(0,1fr)}}
.solution{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--s-col)*.6px);align-items:center}
@media(max-width:980px){.solution{grid-template-columns:minmax(0,1fr)}}
.solution-copy h2{margin:10px 0 14px}
.solution-copy .lead{margin:0 0 12px}
.solution-copy p:not(.lead){margin:0;color:var(--fg-2);max-width:34em}

/* ============== Refonte 10/2026 : Contact (réserver un échange ou écrire, formulaire unique) ============== */
.choice-k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-vif)}
.choice-alt{align-self:flex-start;font-size:14.5px;color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.choice-alt:hover{color:var(--violet)}
.field-label{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.seg2{grid-template-columns:repeat(2,1fr);align-self:flex-start}
.seg2::before{width:calc((100% - 10px)/2)}
.seg2[data-on="2"]::before{transform:translateX(100%)}
.field[hidden]{display:none}

/* ============== Entrée de page (refonte 10/2026) ==============
   Déclenchée par html.is-loaded, dès le chargement de la page.
   Ordre : photo qui se pose, en-tête, pastille, titre mot à mot, soulignement, chapô, bouton (reflet), logos, indicateur de défilement. */
html.js .hero h1.is-split{opacity:1;translate:none;filter:none;transition:none}
.hero h1 .wl{display:inline-block;overflow:clip;overflow-clip-margin:.08em;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
.hero h1 .wi{display:inline-block}
html.js .hero h1 .wi{translate:0 108%;transition:translate 1100ms var(--ease);transition-delay:calc(260ms + var(--wi,0) * 85ms)}
html.js.is-loaded .hero h1 .wi{translate:0 0}
/* 10/2026 : le trait sous le mot souligné se dessine de gauche à droite (sans s'étirer).
   Sur grand écran, il passe dans un élément créé par carnet.js ; sur téléphone, où le mot peut passer à la ligne, il reste fixe. */
html.js .hero h1.is-split .accent{background-size:100% .22em;transition:none}
.accent-line{display:none}
@media(min-width:768px){
  html.js .hero h1.is-split .accent{position:relative;background:none}
  .hero h1 .accent-line{display:block;position:absolute;left:0;right:0;bottom:0;height:.22em;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 70 4, 140 3, 210 7 S 330 13, 397 5' fill='none' stroke='%23F2AC6D' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
    clip-path:inset(0 100% 0 0);transition:clip-path 1000ms cubic-bezier(.65,0,.35,1);transition-delay:calc(620ms + var(--wn,3) * 85ms)}
  html.js.is-loaded .hero h1 .accent-line{clip-path:inset(0 0 0 0)}
  html.no-anim .hero h1 .accent-line{clip-path:none}
}
@media(prefers-reduced-motion:reduce){.hero h1 .accent-line{clip-path:none!important;transition:none!important}}
html.js .hero .hero-chip.h-in{--hd:120ms!important}
html.js .hero .lead.h-in{--hd:620ms!important}
html.js .hero .hero-actions.h-in{--hd:760ms!important}
/* photo d'ouverture : se pose et s'éclaire */
html.js .hero-photo img{scale:1.1;opacity:0;transition:scale 2600ms var(--ease),opacity 1400ms var(--ease)}
html.js.is-loaded .hero-photo img{scale:1;opacity:1}
.hero-photo img{will-change:translate}
/* en-tête */
html.js:not(.is-loaded) .site-header .header-bar{opacity:0;translate:0 -14px}
html.js.is-loaded .site-header .header-bar{animation:tt-hdr-in 900ms var(--ease) 180ms both}
@keyframes tt-hdr-in{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
/* reflet sur le bouton principal */
.hero .hero-actions .btn--primary{position:relative;overflow:hidden;isolation:isolate}
.hero .hero-actions .btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);translate:-120% 0}
html.js.is-loaded .hero .hero-actions .btn--primary::after{animation:tt-shine 1200ms var(--ease-io) 1500ms both}
@keyframes tt-shine{to{translate:120% 0}}
/* bandeau partenaires */
html.js .proof .award,html.js .proof .proof-label,html.js .proof .partner{opacity:0;translate:0 10px;transition:opacity 700ms var(--ease),translate 800ms var(--ease)}
html.js .proof .award{transition-delay:1100ms}
html.js .proof .proof-label{transition-delay:1180ms}
html.js .proof .partner{transition-delay:calc(1260ms + var(--k,0) * 70ms)}
html.js.is-loaded .proof .award,html.js.is-loaded .proof .proof-label,html.js.is-loaded .proof .partner{opacity:1;translate:0 0}
html.js.is-loaded .proof .partner{opacity:.9}
html.js.is-loaded .proof .partner:hover{opacity:1}
/* indicateur de défilement (grand écran) */
.scroll-cue{display:none}
@media(min-width:1100px){
  .scroll-cue{display:block;position:absolute;left:50%;bottom:28px;width:1px;height:56px;margin-left:-.5px;overflow:hidden;background:rgba(255,255,255,.22);pointer-events:none}
  .scroll-cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--orange);animation:tt-cue 2.2s var(--ease-io) infinite}
  html.js .scroll-cue{opacity:0;transition:opacity 900ms var(--ease) 1800ms}
  html.js.is-loaded .scroll-cue{opacity:1}
}
@keyframes tt-cue{0%{translate:0 -100%}100%{translate:0 250%}}
html.no-anim .hero h1 .wi,html.no-anim .hero-photo img,html.no-anim .proof .award,html.no-anim .proof .proof-label,html.no-anim .proof .partner,html.no-anim .scroll-cue{opacity:1!important;translate:none!important;scale:1!important}
html.no-anim .site-header .header-bar{opacity:1!important;translate:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
  html.js .hero h1 .wi,html.js .hero-photo img,html.js .proof .award,html.js .proof .proof-label,html.js .proof .partner,html.js .scroll-cue{opacity:1!important;translate:none!important;scale:1!important;transition:none!important}
  html.js .site-header .header-bar{opacity:1!important;translate:none!important;animation:none!important}
  .scroll-cue::after,.hero .hero-actions .btn--primary::after{animation:none!important}
}

/* ============== Premier écran : mesures, étiquettes et cartes en verre (21/10/2026) ==============
   Un seul style « verre » (blanc grisé translucide, flou marqué, texte nuit) pour la pastille du premier écran, les étiquettes
   de mesure et les cartes. Étiquettes et cartes d'après la maquette de Sébastien (nom puis « base +écart → final », repères A et B,
   variantes et fiche de commande reprises de l'application).
   Mesures : traits en SVG, même cadre que l'image (viewBox = taille de l'image, slice calé à droite = object-fit cover calé à droite).
   Étiquettes : HTML placé par calcul sur la photo (unités de conteneur), pour avoir le vrai flou. Grand écran seulement. */
:root{--glass-bg:linear-gradient(140deg,rgba(255,255,255,.6),rgba(236,232,244,.4));--glass-line:rgba(255,255,255,.66);
  --glass-fg:#140928;--glass-mut:rgba(20,9,40,.66);--glass-or:#bf5f1b;--glass-vi:#5a3d9a;
  --glass-shadow:0 20px 44px -24px rgba(20,9,40,.55),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25)}
.hero--photo .hero-chip,.mz-chip,.hc{background:var(--glass-bg);border:1px solid var(--glass-line);color:var(--glass-fg);
  -webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(1.06);backdrop-filter:blur(22px) saturate(1.8) brightness(1.06);box-shadow:var(--glass-shadow)}
.hero--photo a.hero-chip:hover{background:rgba(255,255,255,.85);border-color:var(--orange)}

/* mesures */
.hero-mz{display:none}
@media(min-width:1100px){
  .hero-photo.has-measures img{object-position:100% 50%}
  .hero-mz{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;container-type:size}
  .hero-measures{position:absolute;inset:0;width:100%;height:100%}
}
@media(max-width:1099px){.hero-photo img{object-position:var(--pos-m,50% 60%)}}
.mz-line{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-dasharray:7 7;stroke-linecap:round}
.mz-draw{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round}
.mz-dot{fill:var(--orange);stroke:rgba(20,9,40,.55);stroke-width:2}
.mz-dot--pin{stroke:rgba(255,255,255,.9);stroke-width:2.5}
.mz-ab circle{fill:var(--orange);stroke:rgba(255,255,255,.9);stroke-width:2.5}
.mz-ab text{font-family:var(--mono);font-size:13px;font-weight:600;fill:#140928}
/* étiquette : --x, --y en pixels de l'image, --w, --h taille de l'image ; --s = échelle de l'image à l'écran */
.mz-chip{--s:max(100cqw / var(--w), 100cqh / var(--h));position:absolute;
  left:calc(100cqw - (var(--w) - var(--x)) * var(--s));top:calc(50cqh + (var(--y) - var(--h) / 2) * var(--s));
  translate:-50% -50%;display:flex;flex-direction:column;gap:.18em;padding:.55em .9em;border-radius:.65em;white-space:nowrap;
  font-size:calc(14.5 * var(--s));line-height:1.2;text-align:left}
.mz-chip b{font-weight:500;color:var(--glass-fg)}
.mz-chip span{font-family:var(--mono);font-size:.9em;color:var(--glass-vi)}
.mz-chip--pin{border-left:3px solid var(--orange)}
/* entrée : après le titre, chaque mesure se trace puis son étiquette apparaît */
html.js .hero-mz{scale:1.1;transition:scale 2600ms var(--ease)}
html.js.is-loaded .hero-mz{scale:1}
html.js .hero-mz .mz-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1000ms var(--ease-io);transition-delay:calc(1700ms + var(--i,0) * 380ms)}
html.js.is-loaded .hero-mz .mz-draw{stroke-dashoffset:0}
html.js .hero-mz .mz-dot,html.js .hero-mz .mz-ab{opacity:0;transition:opacity 400ms var(--ease);transition-delay:calc(1700ms + var(--i,0) * 380ms)}
html.js.is-loaded .hero-mz .mz-dot,html.js.is-loaded .hero-mz .mz-ab{opacity:1}
html.js .mz-chip{opacity:0;scale:.92;transition:opacity 600ms var(--ease),scale 700ms var(--ease);transition-delay:calc(2350ms + var(--i,0) * 380ms)}
html.js.is-loaded .mz-chip{opacity:1;scale:1}
html.no-anim .hero-mz,html.no-anim .hero-mz *{opacity:1!important;scale:1!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.hero-mz,.hero-mz *{opacity:1!important;scale:1!important;stroke-dashoffset:0!important;transition:none!important}}

/* cartes : variantes (écran de configuration de l'application), fiche de commande, suivi ; grandissent avec l'écran */
.hero-cards{display:none}
@media(min-width:1100px){
  .hero-cards{display:flex;flex-direction:column;gap:.85em;position:absolute;z-index:2;top:50%;translate:0 -40%;
    width:clamp(300px,19vw,420px);font-size:clamp(12.5px,.85vw,16px);
    right:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));pointer-events:none}
  /* cartes ancrées sur la photo : même calcul que les étiquettes, elles grandissent avec l'image */
  .hero-cards--anchored{--s:max(100cqw / var(--w), 100cqh / var(--h));z-index:2;translate:none;right:auto;
    left:calc(100cqw - (var(--w) - var(--x)) * var(--s));top:calc(50cqh + (var(--y) - var(--h) / 2) * var(--s));
    width:calc(var(--cw) * var(--s));font-size:calc(var(--cf) * var(--s))}
}
.hc{position:relative;padding:1em 1.1em;border-radius:1.1em}
.hc p{margin:0}
.hc--shot{padding:.9em}
.hc--shot img{display:block;width:100%;height:auto;border-radius:.8em;box-shadow:0 6px 18px -10px rgba(20,9,40,.35)}
.hc b{font-weight:500;color:var(--glass-fg)}
.hc-eye{font-family:var(--mono);font-size:.78em;letter-spacing:.12em;text-transform:uppercase;color:var(--glass-vi);margin-bottom:.7em!important}
.hc-sub{display:flex;flex-direction:column;margin-bottom:.7em!important}
.hc-sub span{font-size:.85em;color:var(--glass-mut)}
.hc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5em}
.hc-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.5em .3em .45em;border-radius:.75em;
  background:rgba(255,255,255,.55);border:1px solid rgba(20,9,40,.08)}
.hc-tile.is-on{background:rgba(90,61,154,.12);border:1.5px solid var(--glass-vi)}
.hc-tile svg{width:100%;max-width:4.2em;height:auto}
.hc-tile em{font-style:normal;font-size:.82em;color:var(--glass-fg)}
.hc-jb,.hc-jl{fill:#f4f2f7;stroke:#1b1520;stroke-width:5;stroke-linejoin:round}
.hc-tile.is-on .hc-jb,.hc-tile.is-on .hc-jl{fill:#27304d}
.hc-tile.is-on .hc-jl{stroke:#0e0b14}
.hc-jn{fill:#b9a8de}
.hc-jc{fill:none;stroke:#1b1520;stroke-width:5}
.hc-jd{fill:#1b1520}
.hc-check{position:absolute;top:.3em;right:.3em;display:grid;place-items:center;width:1.2em;height:1.2em;border-radius:50%;background:var(--glass-vi)}
.hc-check svg{width:.85em;height:.85em;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hc-row{display:flex;align-items:center;gap:.8em}
.hc-row p{display:flex;flex-direction:column;line-height:1.3}
.hc-row b{font-size:1.08em}
.hc-row span{font-size:.88em;color:var(--glass-mut)}
.hc-pdf{flex:none;width:2.1em;height:2.6em;overflow:visible;filter:drop-shadow(0 3px 6px rgba(20,9,40,.18))}
.hc-pdf-page{fill:#fff;stroke:rgba(20,9,40,.22);stroke-width:1.2}
.hc-pdf-fold{fill:#ece8f4;stroke:rgba(20,9,40,.22);stroke-width:1.2;stroke-linejoin:round}
.hc-pdf-tag{fill:#d9452b}
.hc-pdf text{fill:#fff;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.04em}
.hc-tab{width:100%;margin-top:.8em;border-collapse:collapse;font-size:.88em}
.hc-tab th{padding:0 0 .35em;font-family:var(--mono);font-size:.8em;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--glass-mut);text-align:right}
.hc-tab td{padding:.3em 0;border-top:1px solid rgba(20,9,40,.08);text-align:right;color:var(--glass-fg)}
.hc-tab td:first-child{text-align:left;padding-right:.6em}
.hc-tab td:nth-child(3){color:var(--glass-vi)}
.hc-tab td b{font-family:var(--mono);font-weight:500}
.hc--track{display:flex;align-items:center;gap:.9em}
.hc--track p{display:flex;flex-direction:column;flex:1;font-size:.95em;line-height:1.4;color:var(--glass-mut)}
.hc--track b{font-size:1.08em}
.hc-ring{flex:none;width:4em;height:4em}
.hc-ring-bg{fill:none;stroke:rgba(20,9,40,.12);stroke-width:4}
.hc-ring-fg{fill:none;stroke:var(--orange-vif);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:28;transform:rotate(-90deg);transform-origin:22px 22px}
.hc-ring text{fill:var(--glass-fg);font-size:11px;font-weight:600}
/* entrée : les cartes glissent depuis la droite après le titre, la variante choisie s'allume, l'anneau se remplit */
html.js .hc{opacity:0;translate:28px 0;transition:opacity 800ms var(--ease),translate 1000ms var(--ease);transition-delay:calc(1400ms + var(--c,0) * 180ms)}
html.js.is-loaded .hc{opacity:1;translate:0 0}
html.js .hc-tile.is-on{transition:background 500ms var(--ease) 2200ms,border-color 500ms var(--ease) 2200ms}
html.js:not(.is-loaded) .hc-tile.is-on{background:rgba(255,255,255,.55);border-color:rgba(20,9,40,.08)}
html.js .hc-check{transition:scale 400ms var(--ease) 2400ms}
html.js:not(.is-loaded) .hc-check{scale:0}
html.js .hc-ring-fg{stroke-dashoffset:100;transition:stroke-dashoffset 1800ms var(--ease) 2300ms}
html.js.is-loaded .hc-ring-fg{stroke-dashoffset:28}
html.js.is-loaded .hc{animation:hc-float 7s ease-in-out calc(3000ms + var(--c,0) * 900ms) infinite alternate}
@keyframes hc-float{from{transform:translateY(0)}to{transform:translateY(-6px)}}
html.no-anim .hc{opacity:1!important;translate:none!important;animation:none!important}
html.no-anim .hc-ring-fg,html.no-anim .hc-tile,html.no-anim .hc-check{transition:none!important}
@media(prefers-reduced-motion:reduce){.hc{opacity:1!important;translate:none!important;animation:none!important;transition:none!important}.hc-ring-fg{stroke-dashoffset:28!important;transition:none!important}.hc-check{scale:1!important}}

/* À propos, « voir le vêtement avant de le commander » : vraie capture du configurateur de l'application (21/10/2026) */
.solution-viz{margin:0;border:1px solid var(--rule);border-radius:18px;background:#fff;box-shadow:0 30px 60px -40px rgba(44,15,109,.5);overflow:hidden}
.solution-viz--shot img{display:block;width:100%;height:auto}

/* ============== Accueil, onglet Fabricant : écran « Commandes en cours » de l'application (21/10/2026) ==============
   Reconstruit d'après le code de l'application (tableau des commandes, vue fabricant) : fond de page lavande et crème,
   carte en verre, police Inter. Tout est en em, la taille de base suit la largeur du cadre (comme une capture).
   Cadre étroit : mêmes colonnes que l'application sur petit écran (client, livraison, statut). */
.app-shot--ui .app-frame{overflow:hidden}
.ui-orders{container-type:inline-size;
  --uo-fg:oklch(.20 .02 265);--uo-mut:oklch(.44 .03 265);--uo-pri:oklch(.52 .19 295);
  background:radial-gradient(60% 70% at 4% 0%,oklch(.82 .14 295 / .55),transparent 70%),
    radial-gradient(55% 65% at 100% 6%,oklch(.88 .13 65 / .6),transparent 70%),
    radial-gradient(60% 60% at 70% 100%,oklch(.86 .11 335 / .45),transparent 70%),oklch(.972 .008 85)}
.uo-card{margin:3.2%;padding:1.75em 1.9em 1.1em;border-radius:2em;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:calc(100cqw / 68);
  line-height:1.4;color:var(--uo-fg);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 8px 32px rgba(84,62,150,.10);
  -webkit-font-smoothing:antialiased}
.uo-card svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uo-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.25em}
.uo-title{margin:0;font-size:1.286em;font-weight:600;letter-spacing:-.01em}
.uo-count{font-size:.857em;color:var(--uo-mut)}
.uo-tools{display:flex;align-items:center;gap:.6em;margin-bottom:1.25em}
.uo-search,.uo-select{display:inline-flex;align-items:center;gap:.6em;height:2.57em;padding:0 1em;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.uo-search{width:20em;color:oklch(.44 .03 265 / .7)}
.uo-search svg{color:var(--uo-mut)}
.uo-select span{color:var(--uo-mut)}
.uo-select svg{opacity:.5;margin-left:.3em}
.uo-filter{display:inline-flex;align-items:center;gap:.6em;margin-left:auto;font-size:.857em}
.uo-filter span{font-weight:500;color:var(--uo-mut)}
.uo-filter em{font-style:normal;font-weight:500;padding:.33em 1em;border-radius:999px;background:var(--uo-fg);color:#fff}
.uo-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1.1fr) 2.85em;
  align-items:center;column-gap:1.14em;padding:1.14em;border-radius:.5em}
.uo-row > span{min-width:0;text-align:center}
.uo-th{padding-top:0;padding-bottom:.85em;border-radius:0;border-bottom:1px solid rgba(0,0,0,.05)}
.uo-th > span{display:inline-flex;align-items:center;justify-content:center;gap:.3em;font-size:.786em;font-weight:500;letter-spacing:.18em;color:var(--uo-mut)}
.uo-th svg{width:1.1em;height:1.1em;opacity:.4}
.uo-th .is-on{color:var(--uo-fg)}
.uo-th .is-on svg{opacity:1}
.uo-th .uo-c0{justify-content:flex-start}
.uo-th .uo-c6{justify-content:flex-end}
.uo-c0{text-align:left!important}
.uo-c0 b{display:flex;align-items:center;gap:.57em;font-weight:500;white-space:nowrap}
.uo-c0 code{display:block;margin-top:.15em;font-family:var(--mono);font-size:.857em;letter-spacing:.05em;color:var(--uo-pri)}
.uo-urgent{font-style:normal;font-size:.714em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.2em .8em;border-radius:999px;background:#ffe4e6;color:#be123c}
.uo-row small{display:block;margin-top:.15em;font-size:.857em;color:var(--uo-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uo-pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:.43em}
.uo-pieces i{display:inline-flex;align-items:center;height:1.43em;padding:0 .6em;border-radius:999px;font-style:normal;font-size:.643em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:#fff;color:oklch(.20 .02 265 / .8);box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.05)}
.uo-c3,.uo-c4{white-space:nowrap}
.uo-c3{display:flex!important;flex-direction:column;align-items:center}
.uo-badge{display:inline-flex;margin-top:.3em;padding:.15em .75em;border-radius:999px;font-style:normal;font-size:.786em;font-weight:600;background:rgba(0,0,0,.05);color:var(--uo-mut)}
.uo-badge.is-soon{background:#fef3c7;color:#92400e}
.uo-pill{display:inline-flex;padding:.33em .85em;border-radius:999px;font-size:.857em;font-weight:500;line-height:1.25;background:#503997;color:#fff;white-space:nowrap}
.uo-pill--red{background:#c2453f}
.uo-c6{display:flex!important;justify-content:flex-end;color:var(--uo-mut)}
.uo-c6 svg{width:1.15em;height:1.15em;margin-right:.6em}
/* petit cadre : client, livraison, statut */
@container (max-width:620px){
  .uo-card{font-size:calc(100cqw / 30);margin:4%;padding:1.3em 1.1em .6em}
  .uo-tools{flex-wrap:wrap}
  .uo-search{flex:1;width:auto}
  .uo-select,.uo-filter,.uo-c1,.uo-c2,.uo-c4,.uo-c6{display:none!important}
  .uo-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;padding:.9em .4em}
  .uo-th > span{letter-spacing:.1em}
}
/* entrée : les lignes montent l'une après l'autre quand l'onglet s'affiche */
@keyframes uo-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ui-orders .uo-row:not(.uo-th){animation:uo-in .5s ease-out both;animation-delay:calc(var(--i,0) * 40ms + 120ms)}
@media(prefers-reduced-motion:reduce){.ui-orders .uo-row{animation:none}}

/* ============== Défilement doux (Lenis 1.3) ============== */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}