/* =====================================================================
   MOBIUSpack · design system du draft site (v0.1 · 16/10/2026)

   Concept de mise en page : un long défilement vertical qui alterne des
   sections claires (#F5F5F5 / blanc) et des sections navy (#0F2C3D).
   Grille asymétrique (7/5, 5/7), titres Monorama alignés à gauche, jamais
   de tout-centré ; les chiffres-clés sont l'élément fort, en très grand.
   Détail de marque : les coins chanfreinés des lettres Monorama reviennent
   sur les petits repères (puces, numéros d'étape, nœuds de frise, marqueur
   de kicker, points de bandeau). C'est la seule "signature" graphique.

   Conventions de nommage (voir COMPONENTS.md) :
   - classes sans préfixe, style bloc__element--modifieur ;
   - préfixe w-* réservé à widgets.css, is-* / has-* réservés aux états JS ;
   - jetons de charte : --c-* (valeurs fixes) ;
   - jetons de rôle : --text, --text-sub, --text-dim, --line, --line-strong,
     --surface, --surface-2, --kick, --num, --link, --focus, --bg-sec.
     Ils changent selon le fond (clair / navy) : un composant posé dans une
     section navy s'adapte seul. Les widgets peuvent les lire aussi.

   Thème unique assumé (charte MOBIUSpack) : pas de mode sombre, toutes les
   couleurs sont explicites et définies ici.
   La police Monorama est chargée depuis assets/fonts/ (voir @font-face
   ci-dessous, font-weight 600). Inter vient de Google Fonts.
   ===================================================================== */

@font-face{font-family:'Monorama';src:url('../assets/fonts/Monorama-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* Correctif temporaire (22/10) : dans ce fichier de police Monorama SemiBold,
   les glyphes K et k contiennent par erreur le dessin du H (bug de fabrication
   de la police source, présent dans l'artefact d'origine, pas introduit ici).
   En attendant un fichier de police corrigé par le fournisseur (Fontstore),
   on substitue ces deux caractères par Space Mono Bold via unicode-range :
   le reste du texte en Monorama n'est pas affecté. À retirer une fois la
   police corrigée reçue — voir NOTES-DECOUPAGE.md. */
@font-face{font-family:'Monorama';src:url('https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+4B,U+6B}

:root{
  /* ---------- Charte ---------- */
  --c-accent:#2EA9C7;        /* liens, chiffres clés sur navy, bordures actives, boutons */
  --c-accent-hover:#57BDD6;  /* survol des boutons primaires */
  --c-accent-ink:#17768F;    /* accent assombri : texte et chiffres sur fond clair (contraste AA) */
  --c-accent-soft:#E3F2F7;   /* fonds de badges, message de confirmation */
  --c-accent-pale:#8FD6E8;   /* texte accent en petit corps sur navy secondaire */
  --c-navy:#0F2C3D;          /* fonds sombres, hero, header, footer */
  --c-navy-2:#12354A;        /* cartes sur fond sombre, carte porte */
  --c-navy-3:#1B4660;        /* survol sur navy, badges sur navy */
  --c-data:#FFBB00;          /* DONNÉES uniquement : graphes, repères, nœud clé. Jamais en texte sur fond clair */
  --c-bg:#F5F5F5;            /* fond clair de la charte */
  --c-paper:#FFFFFF;         /* cartes et sections blanches */
  --c-ink:#1A1A1A;           /* texte */
  --c-sub:#6B6B6B;           /* texte secondaire */
  --c-dim:#6A7176;           /* sources, légendes micro, repères de relecture (AA sur #F5F5F5) */
  --c-line:#E1E4E6;          /* filets fins sur clair */
  --c-line-strong:#C6CDD1;   /* filets marqués sur clair, bordures de champs */
  --c-on-navy:#FFFFFF;
  --c-on-navy-sub:#B9C8D1;   /* texte secondaire sur navy */
  --c-on-navy-dim:#7F98A8;   /* sources sur navy */
  --c-line-navy:#24495F;     /* filets fins sur navy */
  --c-line-navy-strong:#35617A;
  --c-bezel:#0A1820;         /* cadre des captures téléphone */

  /* ---------- Annotations de relecture (draft uniquement) ---------- */
  --c-tbc-bg:#FFF1C7;
  --c-tbc-ink:#5A4300;
  --c-tbc-line:#E8C460;

  /* ---------- Typographie ---------- */
  --f-display:'Monorama','Space Mono',ui-monospace,monospace;
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-num:'Monorama','Space Mono',ui-monospace,monospace; /* grands chiffres : Monorama (Inter testé puis écarté par Victor le 16/10) */

  --fs-display:clamp(2rem,1.1rem + 3.6vw,3.5rem);      /* 32 -> 56 : accroche H0 */
  --fs-h1:clamp(1.875rem,1.15rem + 3vw,3.375rem);      /* 30 -> 54 : H1 des pages Flux */
  --fs-h1-m:clamp(1.125rem,.95rem + .8vw,1.5rem);      /* 18 -> 24 : H1 "taille moyenne" de la Home */
  --fs-h2:clamp(1.625rem,1.1rem + 2.2vw,2.75rem);      /* 26 -> 44 */
  --fs-h3:clamp(1.125rem,1.02rem + .4vw,1.3125rem);    /* 18 -> 21 */
  --fs-title-card:clamp(1.125rem,.98rem + .6vw,1.5rem);/* 18 -> 24 : titres Monorama des cartes porte */
  --fs-stat-xl:clamp(3.25rem,1.7rem + 6.4vw,7rem);     /* 52 -> 112 */
  --fs-stat:clamp(2.5rem,1.7rem + 3.4vw,4.5rem);       /* 40 -> 72 */
  --fs-stat-s:clamp(1.75rem,1.35rem + 1.6vw,2.5rem);   /* 28 -> 40 */
  --fs-punch:clamp(1.25rem,1rem + 1.05vw,1.875rem);    /* 20 -> 30 */
  --fs-lead:clamp(1.0625rem,.99rem + .35vw,1.25rem);   /* 17 -> 20 */
  --fs-body:1rem;                                       /* 16 */
  --fs-small:.875rem;                                   /* 14 */
  --fs-micro:.75rem;                                    /* 12 */
  --fs-kicker:.75rem;                                   /* 12, capitales espacées */

  --lh-tight:1.08;
  --lh-head:1.14;
  --lh-text:1.6;

  /* ---------- Espace et mise en page ---------- */
  --gutter:clamp(16px,4.5vw,48px);
  --maxw:1344px;           /* 1200 → 1344 le 21/10 : marges latérales réduites (retour Victor) */
  --measure:66ch;
  --sec-pad:clamp(72px,9vw,136px);
  --sec-pad-tight:clamp(48px,6vw,88px);
  --gap-block:clamp(36px,4.5vw,64px);
  --gap-grid:clamp(16px,2vw,24px);
  --gap-col:clamp(24px,5vw,72px);
  --r-card:8px;
  --r-btn:8px;
  --r-sm:4px;
  --header-h:64px;

  /* ---------- Mouvement ---------- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.18s;
  --t-med:.35s;

  /* Forme des petits repères (puces, numéros, nœuds de frise). Retour Victor 16/10 : octogone abandonné, cercle comme sur le deck validé */
  --chamfer:circle(50% at 50% 50%);

  /* ---------- Jetons de rôle : valeurs "fond clair" par défaut ---------- */
  --bg-sec:var(--c-bg);
  --text:var(--c-ink);
  --text-sub:var(--c-sub);
  --text-dim:var(--c-dim);
  --line:var(--c-line);
  --line-strong:var(--c-line-strong);
  --surface:var(--c-paper);
  --surface-2:#ECEFF1;
  --kick:var(--c-accent-ink);
  --num:var(--c-accent-ink);
  --link:var(--c-accent-ink);
  --focus:var(--c-navy);
  --btn2-line:#8B9CA6;
  --badge-bg:var(--c-accent-soft);
  --badge-ink:var(--c-accent-ink);

  color-scheme:light;
}

@media (max-width:760px){
  :root{--header-h:100px}
}

/* ---------- Jeux de jetons par contexte ---------- */
/* Contexte navy : sections sombres et composants qui portent leur propre fond sombre. */
.sec--navy,
.sec--navy2,
.theme-navy,
.porte,
.punch--band,
.site-header,
.site-footer{
  --text:var(--c-on-navy);
  --text-sub:var(--c-on-navy-sub);
  --text-dim:var(--c-on-navy-dim);
  --line:var(--c-line-navy);
  --line-strong:var(--c-line-navy-strong);
  --surface:var(--c-navy-2);
  --surface-2:var(--c-navy-2);
  --kick:var(--c-accent);
  --num:var(--c-accent);
  --link:var(--c-accent);
  --focus:var(--c-accent);
  --btn2-line:#6A8494;
  --badge-bg:var(--c-navy-3);
  --badge-ink:var(--c-accent-pale);
}
/* Contexte clair forcé : le formulaire et les tuiles de logos restent clairs partout. */
.theme-light,
.contact-form,
.logo-tile{
  --text:var(--c-ink);
  --text-sub:var(--c-sub);
  --text-dim:var(--c-dim);
  --line:var(--c-line);
  --line-strong:var(--c-line-strong);
  --surface:var(--c-paper);
  --surface-2:#ECEFF1;
  --kick:var(--c-accent-ink);
  --num:var(--c-accent-ink);
  --link:var(--c-accent-ink);
  --focus:var(--c-navy);
  --btn2-line:#8B9CA6;
  --badge-bg:var(--c-accent-soft);
  --badge-ink:var(--c-accent-ink);
}

/* =====================================================================
   1. Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--f-text);
  font-size:var(--fs-body);
  line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video,svg{max-width:100%}
img,video{display:block;height:auto}
p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
strong,b{font-weight:700}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:#BFE6F0;color:var(--c-navy)}

.page{display:block;overflow-x:clip}

/* Masqué visuellement, lu par les lecteurs d'écran */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* =====================================================================
   2. Typographie
   ===================================================================== */
h1,h2,.t-h1,.t-h2,.t-display{
  font-family:var(--f-display);
  font-weight:600;
  font-synthesis:none;
  letter-spacing:0;
  text-wrap:balance;
  margin:0;
  color:var(--text);
}
h1,.t-h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2,.t-h2{font-size:var(--fs-h2);line-height:var(--lh-head)}
.t-display{font-size:var(--fs-display);line-height:1.06}
h3,.t-h3{
  font-family:var(--f-text);
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
  color:var(--text);
}
h4{margin:0;font-size:var(--fs-body);font-weight:700;color:var(--text)}

/* Mot ou chiffre mis en avant dans un titre : <span class="hl"> */
.hl{color:var(--num)}

.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text-sub);max-width:var(--measure);text-wrap:pretty}
.text{max-width:var(--measure);color:var(--text-sub);text-wrap:pretty}
.text--ink{color:var(--text)}
.small{font-size:var(--fs-small);line-height:1.5}
.micro{font-size:var(--fs-micro);line-height:1.45;color:var(--text-dim)}
.num{font-variant-numeric:tabular-nums}
[data-countup]{font-variant-numeric:tabular-nums}

/* Kicker : surtitre Monorama en capitales, sans marqueur */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display);
  font-weight:600;
  font-synthesis:none;
  font-size:var(--fs-kicker);
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kick);
}
/* Retour Victor 16/10 : pas de marqueur devant le surtitre (trait ou octogone), le texte seul suffit */

/* =====================================================================
   3. Conteneurs, sections, rythme vertical
   ===================================================================== */
.wrap{
  width:100%;
  max-width:calc(var(--maxw) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap-block);
}
.wrap > *{min-width:0}
.wrap--narrow{max-width:calc(880px + 2 * var(--gutter))}

[data-sec]{position:relative}
.sec{
  position:relative;
  background:var(--bg-sec);
  color:var(--text);
  padding-block:var(--sec-pad);
  scroll-margin-top:var(--header-h);
}
.sec--paper{--bg-sec:var(--c-paper);--surface:var(--c-bg)}
.sec--navy{--bg-sec:var(--c-navy)}
.sec--navy2{--bg-sec:var(--c-navy-2);--surface:var(--c-navy)}
.sec--tight{padding-block:var(--sec-pad-tight)}
.sec--rule{border-top:1px solid var(--line)}
/* Trame de points discrète (plan technique), à réserver au hero et à une ou deux sections navy */
.sec--grid{
  background-image:radial-gradient(circle,#FFFFFF14 1px,transparent 1.4px);
  background-size:24px 24px;
  background-position:center top;
}

/* Pile verticale à l'intérieur d'une colonne */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start;min-width:0}
.stack--s{gap:12px}
.stack--l{gap:32px}

/* En-tête de section : kicker + H2 + intro */
.sec-head{display:grid;gap:18px;max-width:880px;justify-items:start}
.sec-head--split{
  max-width:none;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:var(--gap-col);
  align-items:end;
}
.sec-head--split > .kicker{grid-column:1 / -1}
@media (max-width:860px){
  .sec-head--split{grid-template-columns:minmax(0,1fr)}
}

/* Repère de relecture : <span class="seccode">H3 · Deux verrous</span> */
.seccode{
  position:absolute;
  top:12px;
  right:var(--gutter);
  z-index:3;
  max-width:calc(100% - 2 * var(--gutter));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 10.5px/1.2 var(--f-text);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  border:1px dashed var(--line-strong);
  border-radius:3px;
  padding:4px 8px;
  -webkit-user-select:all;
  user-select:all;
}

/* Pastille "À confirmer" : <span class="tbc">À confirmer : ...</span> */
.tbc{
  display:inline;
  font:600 .8125rem/1.55 var(--f-text);
  font-style:normal;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
  color:var(--c-tbc-ink);
  background:var(--c-tbc-bg);
  border:1px solid var(--c-tbc-line);
  border-radius:4px;
  padding:1px 7px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  vertical-align:baseline;
}
.tbc--block{display:block;width:fit-content;max-width:100%;padding:6px 10px}

/* Sources en pied de section */
.sources{
  font-size:var(--fs-micro);
  line-height:1.55;
  color:var(--text-dim);
  padding-top:14px;
  border-top:1px solid var(--line);
}
.sources b{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-sub);margin-right:6px}

/* =====================================================================
   4. Grilles
   ===================================================================== */
.grid{display:grid;gap:var(--gap-grid);grid-template-columns:minmax(0,1fr)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--loose{gap:clamp(24px,3.5vw,48px)}
@media (max-width:1020px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .grid--3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .grid--2,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* Deux colonnes asymétriques texte / média */
.split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-grid) var(--gap-col);
  align-items:center;
}
.split--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--top{align-items:start}
.split > *{min-width:0}
@media (max-width:860px){
  .split,.split--7-5,.split--5-7{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   5. Boutons et liens d'action
   ===================================================================== */
.btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:12px 22px;
  border:1.5px solid transparent;
  border-radius:var(--r-btn);
  font:700 .9375rem/1.2 var(--f-text);
  letter-spacing:.005em;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-fast) var(--ease),background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--c-accent);color:var(--c-navy)}
.btn--primary:hover{background:var(--c-accent-hover);color:var(--c-navy)}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--btn2-line)}
.btn--secondary:hover{border-color:var(--c-accent);color:var(--text)}
.btn--sm{min-height:38px;padding:8px 14px;font-size:.8125rem}
.btn__arrow{display:inline-block;transition:transform var(--t-fast) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Lien "Découvrir →" autonome */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:700 .9375rem/1.3 var(--f-text);
  color:var(--link);
  text-decoration:none;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.link-arrow > span[aria-hidden]{transition:transform var(--t-fast) var(--ease)}
.link-arrow:hover > span[aria-hidden]{transform:translateX(4px)}

/* =====================================================================
   6. Header sticky et footer
   ===================================================================== */
/* Petit bandeau au-dessus du menu, façon opopop.co (retour Victor 21/10) : renvoie le consommateur vers l'app de retour ship.mobiuspack.com */
.topbar{background:var(--c-accent);color:var(--c-navy)}
.topbar__inner{max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);min-height:36px;display:flex;align-items:center;justify-content:flex-end}
.topbar__link{display:inline-flex;align-items:center;gap:8px;font:700 .8125rem/1 var(--f-text);color:var(--c-navy);text-decoration:none;padding:6px 0}
.topbar__link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.topbar__link:hover{text-decoration:underline;text-underline-offset:3px}
.topbar__link:focus-visible{outline:2px solid var(--c-navy);outline-offset:3px;border-radius:2px}
@media (max-width:760px){.topbar__inner{justify-content:center;min-height:32px}}
.site-header{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:50;
  background:var(--c-navy);
  color:var(--c-on-navy);
  border-bottom:1px solid var(--c-line-navy);
}
.site-header__inner{
  max-width:none;                 /* pleine largeur, sans marges latérales (retour Victor 22/10) */
  margin-inline:0;
  padding-inline:clamp(16px,2vw,32px);
  min-height:76px;
  display:flex;
  align-items:center;
  gap:clamp(12px,3vw,36px);
}
.site-header__logo{display:block;flex:none;border-radius:2px}
.site-header__logo img{height:30px;width:auto;display:block}
/* Menu calé à gauche, à côté du logo ; Inter plus fin ; page active = tag jaune (retour Victor 18/10) */
.site-nav{display:flex;align-items:center;gap:4px;min-width:0}
.site-nav a{
  font:500 1.0625rem/1 var(--f-text);   /* 600 → 400 le 18/10 (« plus fin ») → 500 le 21/10 (« pas lisible ») ; plus gros le 22/10 */
  color:#E3EBEF;
  text-decoration:none;
  padding:11px 18px;
  border-radius:999px;
  white-space:nowrap;
  transition:color var(--t-fast),background-color var(--t-fast);
}
.site-nav a:hover{color:var(--c-on-navy);background:var(--c-navy-2)}
.site-nav a[aria-current="page"],.site-nav a[aria-current="page"]:hover{color:var(--c-navy);background:var(--c-data)}
.site-header__cta{flex:none}
/* Sélecteur de langue à la place du bouton de contact (retour Victor 18/10) : FR actif, EN et DE à venir */
.site-header__lang{flex:none;margin-left:auto}
.lang{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--c-line-navy)}
.lang__opt{display:inline-block;border:0;background:none;padding:7px 12px;border-radius:999px;font:700 .8125rem/1 var(--f-text);letter-spacing:.04em;color:var(--c-on-navy-sub);text-decoration:none;cursor:pointer}
.lang__opt.is-active{background:var(--c-data);color:var(--c-navy);cursor:default}
.lang__opt:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media (max-width:760px){
  .site-header__inner{flex-wrap:wrap;row-gap:4px;column-gap:12px;padding-top:8px;min-height:0}
  .site-header__logo{order:1}
  .site-header__logo img{height:20px}
  .site-header__cta{order:2;margin-left:auto}
  .site-header__lang{order:2;margin-left:auto}
  .site-nav{
    order:3;
    flex:1 0 100%;
    margin-left:-12px;
    margin-right:calc(-1 * var(--gutter));
    overflow-x:auto;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:8px 12px;font-size:.875rem}
  .site-nav{padding-block:4px 8px}
}

.site-footer{
  background:var(--c-navy);
  color:var(--c-on-navy);
  padding-block:clamp(32px,3.5vw,52px) 28px;
  border-top:1px solid var(--c-line-navy);
}
.site-footer__inner{
  max-width:calc(var(--maxw) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:32px var(--gap-col);
  align-items:start;
}
/* menu à gauche, sous le logo (retour Victor 17/10) */
.site-footer__brand{display:grid;gap:24px;justify-items:start}
.site-footer__brand img{height:44px;width:auto}
.site-footer__logo{display:block;line-height:0;border-radius:2px}
/* menu en deux colonnes de trois lignes, lu colonne par colonne (retour Victor 17/10) */
.site-footer__nav{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:max-content;gap:10px 48px;justify-items:start}
.site-footer__nav a{color:var(--c-on-navy-sub);text-decoration:none;font-size:var(--fs-small);font-weight:600}
.site-footer__nav a:hover{color:var(--c-on-navy);text-decoration:underline}
.site-footer__contact{font-style:normal;font-size:var(--fs-small);line-height:1.6;color:var(--c-on-navy-sub);display:grid;gap:8px}
.site-footer__email{
  color:var(--c-on-navy);
  font-weight:600;
  -webkit-user-select:all;
  user-select:all;
  overflow-wrap:anywhere;
}
.site-footer__legal{
  max-width:calc(var(--maxw) + 2 * var(--gutter));
  margin:clamp(32px,4vw,56px) auto 0;
  padding:18px var(--gutter) 0;
  font-size:var(--fs-micro);
  color:var(--c-on-navy-dim);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  border-top:1px solid var(--c-line-navy);
}
@media (max-width:820px){
  .site-footer__inner{grid-template-columns:minmax(0,1fr)}
}
/* adresse calée à droite du pied de page (retour Victor 17/10) */
@media (min-width:821px){
  /* adresse alignée sur la première ligne du menu (logo 44 px + écart 24 px au-dessus du menu) */
  .site-footer__contact{justify-self:end;align-self:start;margin-top:68px;text-align:right}
}

/* =====================================================================
   7. Hero (texte + média)
   ===================================================================== */
.hero{padding-block:clamp(48px,7vw,104px) clamp(56px,8vw,120px)}
.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gap-col);align-items:center}
.hero__text{display:grid;gap:24px;align-content:start;justify-items:start;min-width:0}
.hero__title{font-size:var(--fs-h1);line-height:var(--lh-tight)}
/* Bouton centré sous le titre du hero (Flux pro, retour Victor 18/10) */
.hero__cta--center{grid-column:1 / -1;justify-self:center;margin:clamp(24px,3vw,40px) 0 0;text-align:center}
.hero__title--m{font-size:var(--fs-h1-m);line-height:1.3;color:var(--num)}
.hero__punch{
  font-family:var(--f-display);
  font-weight:600;
  font-synthesis:none;
  font-size:var(--fs-display);
  line-height:1.06;
  text-wrap:balance;
  color:var(--text);
}
.hero__lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text-sub);max-width:56ch;text-wrap:pretty}
.hero__media{min-width:0}
@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
}

/* Bandeau de mentions (hero, sous-titres) */
.band{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font:600 .8125rem/1.4 var(--f-text);
  color:var(--text-sub);
  justify-self:stretch;
}
.band > li{display:inline-flex;align-items:center;gap:9px}
.band > li::before{content:"";flex:none;width:7px;height:7px;background:var(--c-accent);clip-path:var(--chamfer)}

/* =====================================================================
   8. Médias : vidéo, image, capture téléphone, repères sur image
   ===================================================================== */
.media{margin:0;display:grid;gap:10px;min-width:0;max-width:100%}
.media__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  max-width:100%;
  border-radius:var(--r-card);
  border:1px solid var(--line);
  background:var(--c-navy-2);
}
.media--1x1 .media__frame{aspect-ratio:1 / 1}
.media--4x3 .media__frame{aspect-ratio:4 / 3}
.media--2x1 .media__frame{aspect-ratio:2 / 1}
.media--16x9 .media__frame{aspect-ratio:16 / 9}
.media--4x5 .media__frame{aspect-ratio:4 / 5}
.media__frame > video,
.media__frame > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media--contain .media__frame > img{object-fit:contain;background:var(--c-paper)}
.media__tag{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  font:600 10.5px/1 var(--f-display);
  font-synthesis:none;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--c-accent);
  color:var(--c-navy);
  border-radius:999px;
  padding:6px 11px;
}
.media__cap{font-size:var(--fs-small);line-height:1.45;color:var(--text-sub)}
.media__cap .micro{display:block;margin-top:2px}

/* Poster seul (vidéo non fournie dans le draft) : pictogramme lecture, non cliquable */
.media__play{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:68px;
  height:68px;
  transform:translate(-50%,-50%);
  background:var(--c-navy);
  clip-path:var(--chamfer);
  display:grid;
  place-items:center;
}
.media__play::after{
  content:"";
  width:0;
  height:0;
  margin-left:5px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--c-accent);
}

/* Capture d'application mobile (scan-*.jpg, 400 x 880) */
.media--phone{justify-items:center}
.media--phone .media__frame{
  aspect-ratio:400 / 880;
  width:100%;
  max-width:250px;
  border-radius:26px;
  border:6px solid var(--c-bezel);
  background:var(--c-bezel);
}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,250px));justify-content:start;gap:clamp(10px,2vw,24px);align-items:start}
.phones .media__cap{text-align:center}

/* Repères numérotés posés sur une image (ex. schema-pack.jpg) */
.hotspot{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  z-index:2;
  width:30px;
  height:30px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  font:600 .8125rem/1 var(--f-display);
  font-synthesis:none;
  color:var(--c-navy);
  background:var(--c-accent);
  clip-path:var(--chamfer);
  animation:hotspot-pulse 2.4s var(--ease) infinite;
  animation-delay:calc(var(--i,0) * .3s);
}
@keyframes hotspot-pulse{
  0%,70%,100%{transform:translate(-50%,-50%) scale(1)}
  80%{transform:translate(-50%,-50%) scale(1.18)}
}
.hotspots__legend{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;counter-reset:hs}
.hotspots__legend > li{counter-increment:hs;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:var(--fs-small);line-height:1.45;color:var(--text-sub)}
.hotspots__legend > li::before{
  content:counter(hs);
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  font:600 .75rem/1 var(--f-display);
  font-synthesis:none;
  color:var(--c-navy);
  background:var(--c-accent);
  clip-path:var(--chamfer);
}
@media (max-width:600px){
  .hotspots__legend{grid-template-columns:minmax(0,1fr)}
}

/* Cadre des widgets (data-widget) : légende et source sous le visuel */
.viz{margin:0;display:grid;gap:12px;min-width:0;max-width:100%}
.viz--panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(16px,2.4vw,28px)}
.viz__cap{font-size:var(--fs-small);line-height:1.5;color:var(--text-sub)}
.viz__src{font-size:var(--fs-micro);line-height:1.45;color:var(--text-dim)}
[data-widget]{display:block;min-width:0;max-width:100%}
/* Contenu de repli lisible sans JS, à l'intérieur du conteneur du widget */
.widget-fallback{font-size:var(--fs-small);line-height:1.55;color:var(--text-sub);display:grid;gap:6px}
.widget-fallback ul{list-style:none;display:grid;gap:4px}

/* =====================================================================
   9. Cartes
   ===================================================================== */

/* 9.1 Carte porte : fond navy secondaire, survol -2px + bordure accent, lien "Découvrir →" */
.porte{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  min-width:0;
  padding:clamp(22px,2.6vw,32px);
  background:var(--c-navy-2);
  color:var(--c-on-navy);
  border:1px solid #FFFFFF24;
  border-radius:var(--r-card);
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast),background-color var(--t-fast);
}
.porte:hover{transform:translateY(-2px);border-color:var(--c-accent);background:#143A50;text-decoration:none}
.porte:focus-visible{transform:translateY(-2px);border-color:var(--c-accent);outline:3px solid var(--c-accent);outline-offset:3px}
.porte__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.porte__num{font:600 var(--fs-stat-s)/1 var(--f-num);font-synthesis:none;color:var(--c-accent)}
.porte__kicker{
  font:600 var(--fs-kicker)/1.35 var(--f-display);
  font-synthesis:none;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-accent);
}
.porte__title{
  font-family:var(--f-display);
  font-weight:600;
  font-synthesis:none;
  font-size:var(--fs-title-card);
  line-height:1.2;
  letter-spacing:0;
  color:var(--c-on-navy);
  text-wrap:balance;
}
.porte__text{font-size:.9375rem;line-height:1.55;color:var(--c-on-navy-sub)}
.porte__mark{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  padding-top:14px;
  border-top:1px solid var(--c-line-navy);
  font-size:var(--fs-small);
  line-height:1.45;
  color:var(--c-on-navy-sub);
}
.porte__mark b{font:600 1.5rem/1.1 var(--f-num);font-synthesis:none;color:var(--c-data)}
.porte__mark b.porte__mark-text{font:700 .9375rem/1.4 var(--f-text);color:var(--c-data)}
.porte__go{
  margin-top:auto;
  padding-top:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:700 .9375rem/1.3 var(--f-text);
  color:var(--c-accent);
}
.porte__go > span[aria-hidden]{display:inline-block;transition:transform var(--t-fast) var(--ease)}
.porte:hover .porte__go > span[aria-hidden],
.porte:focus-visible .porte__go > span[aria-hidden]{transform:translateX(5px)}
.porte .blist > li{font-size:.9375rem}
/* Flux ménager M3 : « Découvrir » en bouton centré, sans flèche, jaune au survol de la carte (retour Victor 18/10) */
.porte__go--btn{align-self:center;margin-top:auto;padding:12px 26px;border-radius:var(--r-btn);background:var(--c-accent);color:var(--c-navy);font:700 .9375rem/1.2 var(--f-text);transition:background-color var(--t-fast)}
.porte:hover .porte__go--btn,.porte:focus-visible .porte__go--btn{background:var(--c-data);color:var(--c-navy)}
/* Flux ménager M3 : ligne de titre « 01 Le Pack » en jaune (retour Victor 18/10) */
.piliers .porte__num,.piliers .porte__kicker{color:var(--c-data)}

/* 9.2 Carte pain : le problème du lecteur, sobre, fond clair */
.pain{
  display:grid;
  gap:12px;
  align-content:start;
  min-width:0;
  padding:clamp(22px,2.4vw,30px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.pain__num{
  font:600 .8125rem/1 var(--f-display);
  font-synthesis:none;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.pain__title{font:700 var(--fs-h3)/1.32 var(--f-text);letter-spacing:-.01em;color:var(--text);text-wrap:balance;margin:0}
.pain__text{color:var(--text-sub);line-height:1.6;text-wrap:pretty}

/* 9.3 Carte générique (périmètre, gammes, colonnes) */
.card{
  display:grid;
  gap:12px;
  align-content:start;
  min-width:0;
  padding:clamp(20px,2.2vw,28px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.card__title{font:700 var(--fs-h3)/1.3 var(--f-text);color:var(--text);margin:0}
.card__text{color:var(--text-sub);font-size:.9375rem;line-height:1.55}
.card--hover{transition:transform var(--t-fast) var(--ease),border-color var(--t-fast)}
.card--hover:hover,.card--hover:focus-within{transform:translateY(-2px);border-color:var(--c-accent)}
/* Flux pro P1 : par carte, titre puis pictogramme puis étiquettes, sans le parcours détaillé (retour Victor 18/10) */
.perim__card{display:grid;gap:14px;align-content:start}
/* titres et pictogrammes centrés dans la carte ; sous-grille pour que tous les pictogrammes d'une même rangée
   soient à la même hauteur, même si un titre passe sur deux lignes (retour Victor 18/10) */
.perim{grid-auto-rows:auto}
.perim__card{grid-row:span 2;grid-template-rows:subgrid;justify-items:center;text-align:center;row-gap:16px}
.perim__card .card__title{align-self:center}
.perim__ico{align-self:start}
/* Périmètre en bandeau navy qui défile (retours Victor 18/10) : les six encadrés sur une seule ligne,
   en défilement continu (liste doublée par le script), pause au survol ; fixe et repliée sur plusieurs lignes
   si l'utilisateur a réduit les animations */
.perim-band{padding-block:clamp(40px,4.5vw,64px)}
.perim-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.perim-band .perim{display:flex;flex-wrap:nowrap;gap:16px;width:max-content;animation:logos-scroll 36s linear infinite}
.perim-marquee:hover .perim{animation-play-state:paused}
.perim-band .perim__card{flex:none;width:200px;grid-row:auto;grid-template-rows:auto auto;padding:20px 14px}
.perim-band .perim__card .card__title{font-size:1rem;min-height:2.6em;display:grid;align-items:center}
.perim-band .perim__ico{width:80px;height:60px;stroke:#FFFFFF}
@media (prefers-reduced-motion:reduce){
  .perim-marquee{-webkit-mask-image:none;mask-image:none}
  .perim-band .perim{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
}
.perim__ico{display:block;width:96px;height:72px;fill:none;stroke:var(--c-navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Parcours du contenant dans une carte : s'allume étape par étape au survol de la carte */
.journey{list-style:none;display:flex;flex-wrap:wrap;gap:6px 4px;font:600 .75rem/1.3 var(--f-text);color:var(--text-dim)}
.journey > li{display:inline-flex;align-items:center;gap:4px}
.journey > li + li::before{content:"→";color:var(--line-strong);margin-right:2px}
.card:hover .journey > li,
.card:focus-within .journey > li{animation:journey-on .35s var(--ease) both;animation-delay:calc(var(--i,0) * .28s)}
.journey > li:nth-child(1){--i:0}
.journey > li:nth-child(2){--i:1}
.journey > li:nth-child(3){--i:2}
.journey > li:nth-child(4){--i:3}
.journey > li:nth-child(5){--i:4}
.journey > li:nth-child(6){--i:5}
@keyframes journey-on{from{color:var(--text-dim)}to{color:var(--num)}}

/* Badges "Tracé · Collecté" */
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:700 .6875rem/1 var(--f-text);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 9px;
  border-radius:999px;
  background:var(--badge-bg);
  color:var(--badge-ink);
}
.badge::before{content:"";width:6px;height:6px;background:currentColor;clip-path:var(--chamfer)}

/* Vignette de gamme (fiches/*-thumb.jpg, 452 x 640) */
.gamme{
  display:grid;
  gap:10px;
  align-content:start;
  min-width:0;
  padding:12px 12px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.gamme__img{width:100%;aspect-ratio:452 / 640;object-fit:cover;object-position:top;border-radius:var(--r-sm);border:1px solid var(--line)}
.gamme__title{font:600 1.0625rem/1.2 var(--f-display);font-synthesis:none;color:var(--text);margin:0}
.gamme__sub{font-size:var(--fs-small);line-height:1.45;color:var(--text-sub)}
@media (max-width:640px){
  .gamme{grid-template-columns:88px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:center;padding:10px}
  .gamme__img{grid-row:1 / span 4}
}

/* 9.4 Bloc de texte en encadré (retour Victor 18/10 : le format « filet au-dessus + petites capitales espacées »
   n'est pas conforme à la charte ; toujours un encadré, titre en Inter gras) */
.feature{
  display:grid;
  gap:10px;
  align-content:start;
  min-width:0;
  padding:clamp(20px,2.2vw,28px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.feature__label{margin:0;font:700 1.125rem/1.3 var(--f-text);color:var(--text)}
.feature__title{font:700 var(--fs-h3)/1.3 var(--f-text);color:var(--text);margin:0}
.feature__text{margin:0;color:var(--text-sub);line-height:1.6}
/* Variante numérotée (Flux pro, collecte ; retour Victor 18/10) : grand numéro Monorama accent, titre en Monorama */
.feature__num{margin:0;font:600 clamp(2.25rem,1.7rem + 1.6vw,3.25rem)/1 var(--f-display);font-synthesis:none;color:var(--c-accent)}
.feature--num .feature__label{font:600 clamp(1.25rem,1.05rem + .6vw,1.625rem)/1.15 var(--f-display);font-synthesis:none;letter-spacing:0;text-transform:uppercase}

/* =====================================================================
   10. Chiffres
   ===================================================================== */
.stat{
  display:grid;
  gap:8px;
  align-content:start;
  min-width:0;
  /* Chiffres : toujours dans un encadré (.stat--boxed), ou nus à l'intérieur d'une carte ;
     jamais de filet au-dessus (retour Victor 18/10 : « pas compatible avec la charte ») */
}
.stat__num{
  font-family:var(--f-num);
  font-weight:600;
  font-synthesis:none;
  font-size:var(--fs-stat);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--num);
  font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;
}
.stat__unit{font-family:var(--f-display);font-weight:600;font-synthesis:none;font-size:.48em;letter-spacing:0;margin-left:.12em}
.stat__label{color:var(--text);line-height:1.45;max-width:38ch;text-wrap:pretty}
.stat__src{font-size:var(--fs-micro);line-height:1.4;color:var(--text-dim);letter-spacing:.01em}
.stat--xl .stat__num{font-size:var(--fs-stat-xl)}
.stat--s .stat__num{font-size:var(--fs-stat-s)}
.stat--boxed{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
/* Chiffre de donnée en jaune : uniquement sur fond navy */
.sec--navy .stat--data .stat__num,
.sec--navy2 .stat--data .stat__num,
.theme-navy .stat--data .stat__num{color:var(--c-data)}

/* =====================================================================
   11. Citation, phrase forte
   ===================================================================== */
.quote{margin:0;display:grid;gap:16px;justify-items:start;min-width:0}
.quote__text{
  font:600 clamp(1.25rem,1.02rem + .9vw,1.75rem)/1.4 var(--f-text);
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:pretty;
  max-width:40ch;
}
.quote__cite{
  display:flex;
  align-items:center;
  gap:12px;
  font:600 var(--fs-micro)/1.4 var(--f-display);
  font-synthesis:none;
  font-style:normal;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.quote__cite::before{content:"";flex:none;width:28px;height:2px;background:var(--c-accent)}
.quote--xl .quote__text{font-family:var(--f-display);font-synthesis:none;font-size:var(--fs-h2);line-height:1.15;letter-spacing:0;text-wrap:balance;max-width:26ch}

/* Phrase forte (synthèse, conviction) */
.punch{
  font-family:var(--f-display);
  font-weight:600;
  font-synthesis:none;
  font-size:var(--fs-punch);
  line-height:1.3;
  color:var(--text);
  text-wrap:balance;
  max-width:38ch;
}
.punch--band{
  max-width:none;
  background:var(--c-navy);
  color:var(--c-on-navy);
  padding:clamp(24px,3.2vw,40px);
  border-radius:var(--r-card);
}
.sec--navy .punch--band{background:var(--c-navy-2)}

/* =====================================================================
   12. Listes
   ===================================================================== */
/* Liste à puces de marque : puce octogonale accent */
.blist{list-style:none;display:grid;gap:12px}
.blist > li{position:relative;padding-left:24px;line-height:1.55;color:var(--text-sub);text-wrap:pretty}
.blist > li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.5em;
  width:9px;
  height:9px;
  background:var(--c-accent);
  clip-path:var(--chamfer);
}
.blist b,.blist strong{color:var(--text)}
.blist--ink > li{color:var(--text)}
.blist--lg > li{font-size:var(--fs-lead)}
.blist--lg > li::before{top:.55em;width:10px;height:10px}

/* Liste numérotée (critères, étapes courtes) : numéro dans un octogone */
.nlist{list-style:none;display:grid;gap:16px;counter-reset:nl}
.nlist > li{
  counter-increment:nl;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:14px;
  align-items:start;
  line-height:1.55;
  color:var(--text);
}
.nlist > li::before{
  content:counter(nl);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font:600 .9375rem/1 var(--f-display);
  font-synthesis:none;
  color:var(--c-navy);
  background:var(--c-accent);
  clip-path:var(--chamfer);
}
.nlist > li > span,.nlist > li > p{padding-top:5px;min-width:0}

/* =====================================================================
   13. Stepper horizontal
   ===================================================================== */
.stepper{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-grid);
}
.stepper--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stepper--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stepper__step{position:relative;display:grid;gap:10px;align-content:start;min-width:0}
.stepper__step::after{
  content:"";
  position:absolute;
  top:21px;
  left:56px;
  right:calc(-1 * var(--gap-grid) + 8px);
  height:2px;
  background:var(--line-strong);
}
.stepper__step:last-child::after{display:none}
.stepper__num{
  position:relative;
  z-index:1;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font:600 1rem/1 var(--f-display);
  font-synthesis:none;
  color:var(--c-navy);
  background:var(--c-accent);
  clip-path:var(--chamfer);
}
.stepper__title{font:700 1.0625rem/1.3 var(--f-text);color:var(--text);margin:0}
.stepper__text{font-size:.9375rem;line-height:1.55;color:var(--text-sub);text-wrap:pretty}
.stepper__media{margin-top:6px}
/* Option : un segment accent parcourt les liaisons (flux en mouvement), depuis un état déjà lisible */
.stepper--flow .stepper__step::after{
  background:linear-gradient(90deg,var(--line-strong) 0 35%,var(--c-accent) 35% 65%,var(--line-strong) 65% 100%);
  background-size:300% 100%;
  animation:stepper-flow 2.8s linear infinite;
  animation-delay:calc(var(--i,0) * .7s);
}
.stepper--flow .stepper__step:nth-child(2){--i:1}
.stepper--flow .stepper__step:nth-child(3){--i:2}
.stepper--flow .stepper__step:nth-child(4){--i:3}
@keyframes stepper-flow{from{background-position:100% 0}to{background-position:0 0}}
@media (max-width:820px){
  .stepper,.stepper--3,.stepper--5{grid-template-columns:minmax(0,1fr);gap:0}
  .stepper__step{grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:6px;padding-bottom:28px}
  .stepper__step:last-child{padding-bottom:0}
  .stepper__num{grid-row:1 / span 3}
  .stepper__step > :not(.stepper__num){grid-column:2}
  .stepper__step::after{top:52px;bottom:6px;left:21px;right:auto;width:2px;height:auto}
  .stepper--flow .stepper__step::after{
    background:linear-gradient(180deg,var(--line-strong) 0 35%,var(--c-accent) 35% 65%,var(--line-strong) 65% 100%);
    background-size:100% 300%;
    animation-name:stepper-flow-v;
  }
  .stepper__title{padding-top:10px}
}
@keyframes stepper-flow-v{from{background-position:0 100%}to{background-position:0 0}}

/* =====================================================================
   14. Onglets (comportement géré par l'assembleur)
   ===================================================================== */
.tabs{display:grid;gap:20px;min-width:0}
.tabs__list{
  display:flex;
  gap:4px;
  width:fit-content;
  max-width:100%;
  padding:4px;
  overflow-x:auto;
  scrollbar-width:thin;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.tabs__tab{
  -webkit-appearance:none;
  appearance:none;
  flex:none;
  border:0;
  background:transparent;
  font:600 .875rem/1.2 var(--f-text);
  color:var(--text-sub);
  padding:10px 16px;
  border-radius:7px;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--t-fast),color var(--t-fast);
}
.tabs__tab:hover{color:var(--text)}
.tabs__tab[aria-selected="true"],
.tabs__tab.is-active{background:var(--c-navy);color:var(--c-on-navy)}
.sec--navy .tabs__tab[aria-selected="true"],
.sec--navy .tabs__tab.is-active,
.sec--navy2 .tabs__tab[aria-selected="true"],
.sec--navy2 .tabs__tab.is-active{background:var(--c-accent);color:var(--c-navy)}
.tabs__panel{min-width:0}
.tabs__panel[hidden]{display:none}

/* =====================================================================
   15. Murs de logos
   ===================================================================== */
.logos{display:grid;gap:14px;min-width:0}
.logos__label{
  font:600 var(--fs-kicker)/1.35 var(--f-display);
  font-synthesis:none;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.logos__grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.logo-tile{
  height:80px;
  display:grid;
  place-items:center;
  gap:6px;
  padding:14px 18px;
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:6px;
  transition:border-color var(--t-med);
}
.logo-tile img{
  max-height:36px;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.68;
  transition:filter var(--t-med),opacity var(--t-med);
}
.logo-tile:hover,.logo-tile:focus-within{border-color:var(--c-line-strong)}
.logo-tile:hover img,.logo-tile:focus-within img{filter:none;opacity:1}
.logo-tile--tall img{max-height:52px}          /* logos carrés ou à deux lignes : Logtech, SICAL, DGE */
.logo-tile--solid img{opacity:.42}             /* logos en aplat plein (IKEA) : moins lourd au repos */
.logo-tile--multiply img{mix-blend-mode:multiply} /* logo à fond blanc posé sur un fond non blanc */
.logo-tile--tbc{grid-template-rows:minmax(0,1fr) auto;padding:8px 10px;border:1px dashed var(--c-tbc-line)}
.logo-tile--tbc img{max-height:28px}
.logo-tile--tbc .tbc{font-size:.6875rem;line-height:1.35;text-align:center}
.logo-tile--missing{border:1px dashed var(--c-line-strong);font:600 .875rem/1.3 var(--f-text);color:var(--c-sub);text-align:center}
/* Variante sans tuiles, sur fond clair uniquement */
.logos--bare .logo-tile{background:transparent;border-color:transparent}
.logos--bare .logo-tile img{mix-blend-mode:multiply}

/* =====================================================================
   16. Frise chronologique
   ===================================================================== */
.timeline{
  --node:18px;
  list-style:none;
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:var(--gap-grid);
}
.timeline::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--node) / 2 - 1px);
  height:2px;
  background:var(--line-strong);
}
.timeline__item{position:relative;display:grid;gap:8px;align-content:start;min-width:0;padding-top:calc(var(--node) + 18px)}
.timeline__item::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:var(--node);
  height:var(--node);
  background:var(--c-accent);
  clip-path:var(--chamfer);
}
.timeline__year{font:600 var(--fs-stat-s)/1 var(--f-num);font-synthesis:none;color:var(--num);font-variant-numeric:tabular-nums}
.timeline__text{font-size:.9375rem;line-height:1.5;color:var(--text-sub);text-wrap:pretty}
.timeline__item--key::before{background:var(--c-data);transform:scale(1.35);transform-origin:left center}
.timeline__item--key .timeline__text{color:var(--text);font-weight:600}
.timeline__item--future::before{background:var(--line-strong)}
@media (max-width:760px){
  .timeline{grid-auto-flow:row;grid-auto-columns:auto;gap:22px;padding-left:34px}
  .timeline::before{left:8px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .timeline__item{padding-top:0;gap:4px}
  .timeline__item::before{left:-34px;top:.35em}
  .timeline__item--key::before{transform-origin:center}
}

/* =====================================================================
   17. Tableau sobre
   ===================================================================== */
.table-wrap{overflow-x:auto;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.table{width:100%;border-collapse:collapse;font-size:.9375rem}
.table caption{caption-side:top;text-align:left;padding:16px 18px 0;font-size:var(--fs-small);color:var(--text-sub)}
.table th{
  font:600 .6875rem/1.3 var(--f-display);
  font-synthesis:none;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-align:left;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--line-strong);
}
.table td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;color:var(--text-sub)}
.table tr:last-child td{border-bottom:0}
.table td:first-child{color:var(--text);font-weight:700;width:38%}
.table tbody tr{transition:background-color var(--t-fast)}
.table tbody tr:hover{background:var(--surface-2)}
/* Sur mobile, chaque ligne devient un bloc ; data-label sur chaque td reprend l'en-tête */
@media (max-width:600px){
  .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table--stack tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
  .table--stack tr:last-child{border-bottom:0}
  .table--stack td{display:block;padding:0;border:0;width:auto}
  .table--stack td:first-child{width:auto;margin-bottom:4px}
  .table--stack td[data-label]::before{
    content:attr(data-label);
    display:block;
    font:600 .625rem/1.3 var(--f-display);
    font-synthesis:none;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:2px;
  }
}

/* =====================================================================
   18. Encadré "Ce que dit la loi"
   ===================================================================== */
.law{
  display:grid;
  gap:14px;
  min-width:0;
  padding:clamp(22px,3vw,36px);
  background:var(--c-paper);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-top:4px double var(--c-navy);
  border-radius:0 0 var(--r-sm) var(--r-sm);
}
.law__label{
  display:flex;
  align-items:center;
  gap:10px;
  font:600 var(--fs-kicker)/1.35 var(--f-display);
  font-synthesis:none;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-accent-ink);
}
.law__label::before{content:"\00A7";font-size:1.5rem;line-height:1;letter-spacing:0;color:var(--c-accent-ink)}
.law__text{font-size:var(--fs-lead);line-height:1.6;color:var(--c-ink);text-wrap:pretty}
.law__ref{font-size:var(--fs-micro);line-height:1.45;color:var(--c-sub);letter-spacing:.02em}
.law__note{padding-top:14px;border-top:1px solid var(--c-line);color:var(--c-ink);font-weight:600;line-height:1.55}

/* =====================================================================
   19. FAQ (questions et réponses visibles au repos)
   ===================================================================== */
.faq{display:grid;border-top:1px solid var(--line-strong)}
.faq__item{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:8px var(--gap-col);
  padding-block:22px;
  border-bottom:1px solid var(--line);
}
.faq__q{font:700 1.0625rem/1.4 var(--f-text);color:var(--text);text-wrap:balance}
.faq__a{margin:0;color:var(--text-sub);line-height:1.6;text-wrap:pretty}
@media (max-width:760px){
  .faq__item{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   20. Contact et formulaire
   ===================================================================== */
.contact{align-items:start}
.contact__intro{display:grid;gap:18px;align-content:start;min-width:0}
.contact__email{
  display:inline-block;
  font:600 1rem/1.4 var(--f-text);
  color:var(--text);
  padding:10px 14px;
  border:1px dashed var(--line-strong);
  border-radius:6px;
  -webkit-user-select:all;
  user-select:all;
  overflow-wrap:anywhere;
}

.contact-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 16px;
  min-width:0;
  padding:clamp(20px,3vw,36px);
  background:var(--c-paper);
  color:var(--c-ink);
  border:1px solid var(--c-line);
  border-radius:var(--r-card);
}
.field{display:grid;gap:6px;align-content:start;min-width:0;margin:0;padding:0;border:0}
.field--full{grid-column:1 / -1}
.field__label{font:600 .8125rem/1.3 var(--f-text);color:var(--c-ink);padding:0}
.field__hint{font-size:var(--fs-micro);color:var(--c-sub)}
.field__input{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-height:48px;
  padding:12px 14px;
  font:400 1rem/1.4 var(--f-text);
  color:var(--c-ink);
  background:var(--c-paper);
  border:1px solid var(--c-line-strong);
  border-radius:6px;
  transition:border-color var(--t-fast);
}
.field__input::placeholder{color:#9AA1A6}
.field__input:hover{border-color:#A9B3B9}
.field__input:focus{outline:2px solid var(--c-accent-ink);outline-offset:1px;border-color:var(--c-accent-ink)}
textarea.field__input{min-height:132px;resize:vertical}

/* Choix du flux : boutons radio en pastilles */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:inline-flex}
.choice > input{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.choice > span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 16px;
  font:600 .875rem/1.2 var(--f-text);
  color:var(--c-ink);
  background:var(--c-paper);
  border:1px solid var(--c-line-strong);
  border-radius:999px;
  cursor:pointer;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.choice > span::before{content:"";flex:none;width:9px;height:9px;background:var(--c-line-strong);clip-path:var(--chamfer)}
.choice > input:checked + span{background:var(--c-navy);border-color:var(--c-navy);color:var(--c-on-navy)}
.choice > input:checked + span::before{background:var(--c-accent)}
.choice > input:focus-visible + span{outline:2px solid var(--c-accent-ink);outline-offset:2px}

.contact-form__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.contact-form__note{font-size:var(--fs-micro);line-height:1.45;color:var(--c-sub);max-width:46ch}
.contact-form__status{
  grid-column:1 / -1;
  padding:14px 16px;
  font-weight:600;
  line-height:1.5;
  color:var(--c-navy);
  background:var(--c-accent-soft);
  border:1px solid var(--c-accent);
  border-radius:6px;
}
.contact-form__status[hidden]{display:none}
@media (max-width:600px){
  .contact-form{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   21. Mouvement réduit
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.001ms!important;
  }
  .porte:hover,.porte:focus-visible,.card--hover:hover,.card--hover:focus-within,.btn:hover{transform:none}
  .card:hover .journey > li,.card:focus-within .journey > li{color:var(--num)}
}

/* =====================================================================
   Vue use cases (retour Victor 16/10) : trois cartes porte avec vignette,
   chacune renvoie vers son use case détaillé dans la page Flux.
   ===================================================================== */
.usecases{display:grid;gap:18px;padding-top:clamp(28px,4vw,48px);margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.porte--usecase{gap:10px;padding:14px 14px 18px}
.porte--usecase .media{margin:0}
.porte--usecase .media__frame{border-radius:6px}
.porte--usecase .porte__kicker,.porte--usecase .porte__title,.porte--usecase .porte__text,.porte--usecase .porte__go{padding-inline:4px}

/* =====================================================================
   Définition légale en visuel (remplace l'encadré .law, retour Victor 16/10)
   ===================================================================== */
.lawviz{display:grid;gap:22px;padding:clamp(22px,3vw,36px);background:var(--c-navy);color:var(--c-on-navy);border-radius:var(--r-card);min-width:0}
/* « Ce que dit la loi » : titre de niveau 2, en blanc (retour Victor 17/10) */
.lawviz__label{margin:0;font:600 var(--fs-h2)/var(--lh-head) var(--f-display);font-synthesis:none;letter-spacing:0;text-wrap:balance;color:#FFFFFF}
.lawviz__main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:center}
.lawviz__num{margin:0;display:flex;align-items:flex-end;gap:16px;font:600 var(--fs-stat-xl)/.9 var(--f-display);font-synthesis:none;color:var(--c-accent)}
/* texte à côté du 2, aligné en bas (retour Victor 17/10) */
.lawviz__num .lawviz__unit{padding-bottom:.35rem}
.lawviz__unit{font:600 .9375rem/1.4 var(--f-text);color:var(--c-on-navy);max-width:22ch}
.lawviz__loop{width:100%;height:auto;max-width:520px;justify-self:end}
.lawviz__t1{font:600 18px var(--f-display)}
.lawviz__t2{font:500 12px var(--f-text)}
.lawviz__conds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.lawviz__conds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lawviz__conds li{display:grid;gap:4px;padding-top:12px;border-top:2px solid var(--c-accent);font-size:var(--fs-small);line-height:1.45;color:var(--c-on-navy-sub)}
.lawviz__conds b{font:700 1rem/1.3 var(--f-text);color:var(--c-on-navy)}
.lawviz__src{margin:0;font-size:var(--fs-micro);color:var(--c-on-navy-dim)}
@media (max-width:640px){.lawviz__main{grid-template-columns:1fr}.lawviz__loop{justify-self:start}.lawviz__conds{grid-template-columns:1fr}}

/* =====================================================================
   Critères illustrés (H4, retour Victor 16/10 : des visuels, pas une liste)
   ===================================================================== */
.criteria{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.criterion{position:relative;display:grid;gap:12px;align-content:start;min-width:0}
.criterion .media{margin:0}
.criterion__num{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-accent);color:var(--c-navy);font:600 .875rem/1 var(--f-display);font-synthesis:none}
.criterion__text{margin:0;font-size:.9375rem;line-height:1.5;color:var(--text)}
.criterion__viz{aspect-ratio:1 / 1;border-radius:var(--r-card);background:var(--c-navy);display:grid;align-content:center;gap:14px;padding:18px}
.criterion__viz p{margin:0;display:grid;gap:2px}
.criterion__viz b{font:600 clamp(1.75rem,1.2rem + 1.4vw,2.5rem)/1 var(--f-display);font-synthesis:none;color:var(--c-accent)}
.criterion__viz b span{font-size:.5em;margin-left:.1em}
.criterion__viz em{font:500 .8125rem/1.3 var(--f-text);font-style:normal;color:var(--c-on-navy-sub)}

/* =====================================================================
   FAQ interactive (retour Victor 16/10) : questions empilées à gauche,
   panneau réponse à droite qui suit la question active ; rotation
   automatique, survol ou focus d'une question = mise à jour immédiate.
   Sans JS : chaque réponse est lisible avec sa question.
   ===================================================================== */
.faqx{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,40px);align-items:start}
.faqx__qs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.faqx__q{display:flex;gap:14px;align-items:baseline;width:100%;text-align:left;padding:16px 18px;border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--surface);color:var(--text);font:600 1rem/1.4 var(--f-text);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.faqx__q:hover{border-color:var(--c-accent)}
.faqx__q[aria-selected="true"]{background:var(--c-navy);border-color:var(--c-navy);color:var(--c-on-navy);transform:translateX(4px)}
.faqx__n{flex:none;font:600 .8125rem/1 var(--f-display);font-synthesis:none;color:var(--c-accent-ink)}
.faqx__q[aria-selected="true"] .faqx__n{color:var(--c-accent)}
.faqx__panel{position:relative;display:grid;gap:14px;padding:clamp(22px,3vw,36px);background:var(--c-navy);color:var(--c-on-navy);border-radius:var(--r-card);transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
.faqx__label{margin:0;font:600 var(--fs-kicker)/1.35 var(--f-display);font-synthesis:none;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.faqx__aq{margin:0;font:700 1rem/1.4 var(--f-text);color:var(--c-on-navy)}
.faqx__text{margin:0;font-size:var(--fs-lead);line-height:1.55;color:var(--c-on-navy)}
.faqx__a + .faqx__a{border-top:1px solid var(--c-line-navy);padding-top:14px}
.faqx__progress{height:3px;border-radius:2px;background:var(--c-line-navy);overflow:hidden}
.faqx__progress span{display:block;height:100%;width:0;background:var(--c-accent)}
/* Avec JS : une seule réponse visible, la question n'est plus répétée dans le panneau */
.faqx.is-ready .faqx__a{display:none;border:0;padding:0}
.faqx.is-ready .faqx__a.is-active{display:grid;gap:8px;animation:faqx-in .35s ease}
.faqx.is-ready .faqx__aq{display:none}
.faqx:not(.is-ready) .faqx__progress{display:none}
.faqx.is-running .faqx__progress span{animation:faqx-bar var(--faqx-interval,6000ms) linear forwards}
@keyframes faqx-in{from{transform:translateY(6px)}to{transform:none}}
@keyframes faqx-bar{from{width:0}to{width:100%}}
@media (max-width:760px){.faqx{grid-template-columns:1fr}.faqx__panel{transform:none!important}.faqx__q[aria-selected="true"]{transform:none}}
@media (prefers-reduced-motion:reduce){.faqx__panel{transition:none}.faqx.is-ready .faqx__a.is-active{animation:none}.faqx.is-running .faqx__progress span{animation:none;width:100%}}

/* Titre du bloc contact en Monorama (retour Victor 16/10) */
.contact__intro h2,
.contact__intro h3{font-family:var(--f-display);font-weight:600;font-synthesis:none;font-size:clamp(1.375rem,1rem + 1.2vw,2rem);line-height:var(--lh-head);letter-spacing:.01em;text-wrap:balance}

/* Vidéos lancées au survol (retour Victor 16/10) : à l'arrêt sur leur poster, jouent quand la souris passe sur la carte */
[data-hover-host]{cursor:pointer}
[data-hover-host].is-playing .media__play{opacity:0}
[data-hover-host] .media__play{transition:opacity var(--t-fast)}

/* Hero de la Home (retour Victor 16/10) : le H1 « L'opérateur industriel... » est le grand titre ; l'accroche passe en second, plus petite, en accent */
.hero__punch--s{font-size:clamp(1.125rem,.92rem + .95vw,1.75rem);line-height:1.2;color:var(--c-accent)}

/* Bouton son sur une vidéo (hero Logtech) */
.media__sound{position:absolute;right:12px;bottom:12px;z-index:2;padding:7px 12px;border:0;border-radius:999px;background:rgba(15,44,61,.82);color:#FFFFFF;font:600 .8125rem/1 var(--f-text);cursor:pointer}
.media__sound:hover{background:var(--c-accent);color:var(--c-navy)}
.media__sound[aria-pressed="true"]{background:var(--c-accent);color:var(--c-navy)}

/* Cartes piliers (H1, retour Victor 16/10) : trois cartes nettes, titre plus grand, texte court */
.pillar{display:grid;gap:18px;align-content:start;padding:clamp(22px,2.6vw,32px);background:var(--c-paper);border:1px solid var(--line);border-radius:var(--r-card);min-width:0}
.sec--paper .pillar{background:var(--c-bg)}
.pillar__title{margin:0;font-family:var(--f-display);font-weight:600;font-synthesis:none;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.15;color:var(--c-ink)}
.pillar .blist li{font-size:1rem;color:var(--c-ink)}

/* Lignes de source : italique fin, partout (retour Victor 16/10) */
.w-src,.sources,.stat__src,.viz__src,.lawviz__src{font-style:italic;font-weight:300}
.sources b{font-weight:400}

/* Titre d'un graphique (retour Victor 16/10) */
/* titres de visuels un peu plus gros (retour Victor 18/10) : 20 à 28 px au lieu de 17 à 22 px */
.viz__title{margin:0 0 14px;font-family:var(--f-display);font-weight:600;font-synthesis:none;font-size:clamp(1.25rem,1.05rem + .7vw,1.75rem);line-height:1.2;color:var(--text)}

/* Repères de section (H0, M3, P6...) retirés de l'affichage partout (retour Victor 16/10) */
.seccode{display:none!important}

/* Citation centrée, « si » en bleu et « comment » en jaune (retour Victor 16/10) */
.quote--center{text-align:center;margin-inline:auto;justify-items:center}
.quote--center .quote__text{margin-inline:auto}
.q-si{color:var(--c-accent)}
.q-comment{color:var(--c-data)}

/* Citations en Monorama partout (retour Victor 16/10) */
.quote__text{font-family:var(--f-display);font-weight:600;font-synthesis:none;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.25;letter-spacing:0;text-wrap:balance}
.quote--xl .quote__text{font-size:var(--fs-h2);line-height:1.15}

/* Logos en couleur au repos (retour Victor 16/10) */
.logo-tile img,.logo-tile--solid img{filter:none;opacity:1}

/* Pied de page gris clair (retour Victor 16/10) : logo noir, textes foncés */
.site-footer{background:#E6E9EB;color:var(--c-ink);border-top:0;--text:var(--c-ink);--text-sub:var(--c-sub);--text-dim:var(--c-dim);--line:#D2D7DA;--line-strong:#BFC6CA;--link:var(--c-accent-ink);--focus:var(--c-navy)}
.site-footer__nav a{color:var(--c-sub)}
.site-footer__nav a:hover{color:var(--c-ink)}
.site-footer__contact{color:var(--c-sub)}
.site-footer__legal{color:var(--c-dim);border-top-color:#D2D7DA}
.site-footer__contact b{color:var(--c-ink);font-weight:700}

/* Hero avec grand média (P0, retour Victor 16/10) : la vidéo prend plus de la moitié de la largeur */
.hero__grid--media-xl{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:900px){.hero__grid--media-xl{grid-template-columns:minmax(0,1fr)}}

/* Logos en bannière qui défile, sans encadré (retour Victor 16/10) */
.logos--marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos--marquee .logos__label{padding-left:6%}
.logos--marquee .logos__grid{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(36px,5vw,64px);width:max-content;animation:logos-scroll 45s linear infinite}
.logos--reverse .logos__grid{animation-direction:reverse;animation-duration:38s}
.logos--marquee:hover .logos__grid{animation-play-state:paused}
.logos--marquee .logo-tile,.logos--flat .logo-tile{height:64px;padding:0;background:none;border:0;border-radius:0}
.logos--marquee .logo-tile img,.logos--flat .logo-tile img{max-height:42px}
.logos--marquee .logo-tile--tall img,.logos--flat .logo-tile--tall img{max-height:56px}
.logos--flat .logos__grid{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4vw,56px)}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos--marquee{-webkit-mask-image:none;mask-image:none}.logos--marquee .logos__grid{animation:none;flex-wrap:wrap;width:auto}.logos--marquee .logos__label{padding-left:0}}
/* Libellés des bannières de logos centrés (retour Victor 16/10) */
.logos .logos__label,.logos--marquee .logos__label{text-align:center;padding-left:0;justify-self:center}
.logos--flat .logos__grid{justify-content:center}

/* Page blog */
.blog-filters{display:flex;flex-wrap:wrap;gap:8px}
.blog-chip{padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;font:600 .875rem/1 var(--f-text);color:var(--text-sub);background:var(--c-paper)}
.blog-chip.is-active{background:var(--c-navy);border-color:var(--c-navy);color:#FFFFFF}
.post{display:grid;gap:10px;align-content:start;min-width:0}
.post .media{margin:0}
.post__tag{margin:0;font:600 var(--fs-kicker)/1.35 var(--f-display);font-synthesis:none;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent-ink)}
.post__title{margin:0;font:700 1.125rem/1.35 var(--f-text);color:var(--c-ink);text-wrap:balance}
.post__meta{margin:0;font-size:var(--fs-small);font-style:italic;font-weight:300;color:var(--c-dim)}
/* Bannières de logos : la colonne reste à la largeur de la page, sinon le libellé se centre sur toute la bande qui défile (retour Victor 16/10) */
.logos--marquee{grid-template-columns:minmax(0,1fr)}

/* Définition légale : trois conditions (retour Victor 16/10) */
.lawviz__conds{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.lawviz__conds{grid-template-columns:minmax(0,1fr)}}

/* Critères du réemploi : quatre cartes (retour Victor 16/10) */
/* Vidéos carrées agrandies, réagencées selon la largeur (retour Victor 18/10) :
   1 x 4 empilées sur téléphone, 2 x 2 sur tablette et ordinateur, 4 x 1 sur très grand écran
   (la rangée déborde alors un peu de la colonne de texte, jusqu'à 1 520 px) */
.criteria{grid-template-columns:minmax(0,1fr);gap:28px 24px}
.criterion__text{font-size:1rem}
.criterion__num{width:36px;height:36px;font-size:1rem;top:12px;left:12px}
@media (min-width:640px){.criteria{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1600px){.criteria{grid-template-columns:repeat(4,minmax(0,1fr));margin-inline:calc(50% - min(760px, 50vw - var(--gutter)))}}

/* Structure de coût jetable vs réemployé : deux barres empilées, schéma de principe (retours Victor 16/10 : barres basses, précision en italique fin sous le segment) */
.coststack{display:grid;gap:22px;margin:0}
.coststack .viz__title{margin:0}
.coststack__row{display:grid;gap:10px}
.coststack__name{margin:0;font:600 var(--fs-kicker)/1.35 var(--f-display);font-synthesis:none;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.coststack__bar{display:flex;align-items:flex-start}
.coststack__seg{--seg-c:#6B6B6B;--seg-t:#FFFFFF;flex:var(--w) 1 0;min-width:0;display:grid;gap:6px}
.coststack__blk{min-height:44px;display:flex;align-items:center;padding:6px 10px;background:var(--seg-c);color:var(--seg-t);font:600 .75rem/1.25 var(--f-text)}
.coststack__seg + .coststack__seg .coststack__blk{border-left:2px solid var(--c-paper,#FFFFFF)}
.coststack__seg:first-child .coststack__blk{border-radius:6px 0 0 6px}
.coststack__seg:last-child .coststack__blk{border-radius:0 6px 6px 0}
.coststack__sub{padding:0 10px;font:italic 300 .75rem/1.35 var(--f-text);color:var(--text-sub)}
.coststack__seg--j1{--seg-c:#6B6B6B;--seg-t:#FFFFFF}
.coststack__seg--j2{--seg-c:#9AA3A8;--seg-t:#1A1A1A}
.coststack__seg--j3{--seg-c:#B5BCC0;--seg-t:#1A1A1A}
.coststack__seg--j4{--seg-c:#D5DADC;--seg-t:#1A1A1A}
.coststack__seg--r1{--seg-c:#0F2C3D;--seg-t:#FFFFFF}
.coststack__seg--r2{--seg-c:#2EA9C7;--seg-t:#0F2C3D}
.coststack__seg--r3{--seg-c:#17768F;--seg-t:#FFFFFF}
.coststack__seg--r4{--seg-c:#FFBB00;--seg-t:#0F2C3D}
/* Tablette et mobile : chaque poste devient une ligne (barre proportionnelle, libellé, précision) */
@media (max-width:900px){
  .coststack__bar{display:grid;gap:10px}
  .coststack__seg{gap:3px}
  .coststack__blk{min-height:0;display:grid;gap:4px;padding:0;background:none;color:var(--text);border:0!important;border-radius:0!important;font-size:.8125rem}
  .coststack__blk::before{content:"";display:block;height:12px;width:calc(var(--w) * 1%);min-width:24px;border-radius:3px;background:var(--seg-c)}
  .coststack__sub{padding:0}
}

/* Solution omnicanale : trois cartes, paramètres en barres de chargement (retour Victor 16/10) */
.omni{display:grid;gap:22px}
.omni__title{margin:0;font-family:var(--f-display);font-weight:600;font-synthesis:none;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.15;color:var(--text)}
.omni__name{margin:0;font:700 1.125rem/1.3 var(--f-text);color:var(--c-ink)}
.omni__params{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.omni__param{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline}
.omni__label{font-size:.875rem;color:var(--text-sub)}
.omni__val{font:600 .875rem/1.2 var(--f-text);color:var(--text)}
.omni__track{grid-column:1 / -1;display:block;height:8px;border-radius:999px;background:#E3E7EA;overflow:hidden}
.omni__fill{display:block;height:100%;width:calc(var(--v) * 1%);border-radius:inherit;background:var(--c-accent);transition:width 1.2s var(--ease)}
.omni__param--cout .omni__fill{background:var(--c-navy)}
.omni__param--effort .omni__fill{background:#FFBB00}
.omni__param.is-tbc .omni__val{font-weight:400;font-style:italic;color:var(--text-sub)}
.omni__param.is-tbc .omni__track{background:repeating-linear-gradient(45deg,#E3E7EA 0 6px,transparent 6px 12px)}
.omni--armed:not(.is-in) .omni__fill{width:0}
.omni--armed .omni__card:nth-child(2) .omni__fill{transition-delay:.15s}
.omni--armed .omni__card:nth-child(3) .omni__fill{transition-delay:.3s}

/* Use case avec logo seul : fond blanc, logo centré au format des vignettes vidéo (Home H9, retour Victor 16/10) */
.media--logo .media__frame{aspect-ratio:16 / 9;display:grid;place-items:center;background:#FFFFFF}
.media--logo .media__frame img{position:absolute;inset:0;margin:auto;width:62%;height:62%;max-width:none;object-fit:contain}

/* Logos cliquables vers le site de chaque marque (retour Victor 16/10) */
.logo-tile__link{display:inline-flex;align-items:center;justify-content:center;border-radius:4px}
.logo-tile__link:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px}
/* FAQ à dix questions : encadrés plus compacts (16/10) */
.faqx__qs{gap:8px}
.faqx__q{padding:12px 16px;font-size:.9375rem}

/* Citation sur deux lignes exactement (retour Victor 16/10) : une ligne par phrase, sans retour automatique sur grand écran */
.quote--lines .quote__text{max-width:none}
/* Témoignages en petit, dans un encadré, côte à côte (retour Victor 17/10) */
.quotes{align-items:stretch}
.quote--card{align-content:space-between;background:#FFFFFF;border:1px solid var(--line);border-radius:8px;padding:clamp(20px,2.4vw,28px)}
.quote--card .quote__text{font:500 1rem/1.6 var(--f-text);letter-spacing:0;max-width:none;color:var(--c-ink);text-wrap:pretty}
.quote--card .quote__text--tbc{color:var(--c-dim);font-style:italic}
/* signature sobre en bas à droite : nom + logo de la marque (retour Victor 17/10 : « trop IA ») */
.quote__by{justify-self:stretch;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 14px}
.quote__by .tbc{margin-right:auto}
.quote__sig{display:flex;align-items:center;gap:12px;margin-left:auto}
.quote__name{font:500 var(--fs-small)/1.3 var(--f-text);font-style:normal;color:var(--c-ink)}
.quote__logo{display:block;height:24px;width:auto}
.quote--lines .q-line{display:block}
@media (min-width:900px){.quote--lines .q-line{white-space:nowrap}}
/* « Si vous y passerez ? » allonge la première ligne : sur ordinateur, la taille se cale pour que la ligne tienne dans la largeur ;
   les deux questions entre guillemets ne se coupent jamais (retour Victor 17/10) */
@media (min-width:900px){.quote--lines .quote__text{font-size:min(var(--fs-h2),40px,calc((100vw - 2 * var(--gutter)) / 30))}}
.quote--lines .q-si,.quote--lines .q-comment{white-space:nowrap}

/* Frise : dates plus petites (retour Victor 16/10) */
.timeline__year{font-size:clamp(1.25rem,1rem + .8vw,1.625rem)}

/* Financer la transition : deux cartes éco-organismes, le détail apparaît au survol (retour Victor 16/10) */
.fund{position:relative;min-height:220px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);overflow:hidden;outline:none;cursor:default}
.fund__face{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;padding:24px;transition:opacity var(--t-med) var(--ease)}
.fund__logo{display:block;height:56px;width:auto;max-width:80%;object-fit:contain}
.fund__logo--sq{height:48px}
.fund__mark{display:inline-flex;align-items:center;gap:12px}
.fund__word{font:700 2rem/1 var(--f-text);color:var(--c-ink);letter-spacing:-.01em}
.fund__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fund__debrief{position:absolute;inset:0;display:grid;align-content:center;gap:10px;padding:clamp(20px,2.4vw,30px);background:var(--c-navy);color:var(--c-on-navy);opacity:0;transform:translateY(8px);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.fund__debrief p{margin:0;font-size:.9375rem;line-height:1.55}
.fund__title{font:600 var(--fs-kicker)/1.3 var(--f-display)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.fund:hover .fund__debrief,.fund:focus-visible .fund__debrief,.fund:focus-within .fund__debrief{opacity:1;transform:none}
.fund:hover .fund__face,.fund:focus-visible .fund__face,.fund:focus-within .fund__face{opacity:0}
.fund:focus-visible{box-shadow:0 0 0 3px var(--c-accent)}
@media (hover:none){
  .fund{min-height:0;display:grid}
  .fund__face{position:static;padding:22px 22px 6px}
  .fund__debrief{position:static;opacity:1;transform:none;background:none;color:var(--text);padding:6px 22px 22px}
  .fund__title{display:none}
  .fund:hover .fund__face{opacity:1}
}
@media (prefers-reduced-motion:reduce){.fund__face,.fund__debrief{transition:none}}

/* Bouton « Rejoindre la coalition » dans la carte Citeo (retour Victor 16/10) */
.fund__cta{margin-top:6px!important}
.fund__cta .btn{font-size:.875rem}

/* Carte Citeo : récapitulatif en infographie (retour Victor 16/10) */
.fund{min-height:300px}
/* sur fond blanc (Flux ménager M7b), les encadrés restent blancs comme sur la Home : le logo Citeo a un fond blanc */
.sec--paper .fund{background:#FFFFFF}
.fund--info .fund__debrief{align-content:center;gap:12px}
.fund__rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fund__rate{display:grid;gap:2px}
.fund__rate b{font:600 clamp(2rem,1.5rem + 1.6vw,2.75rem)/1 var(--f-display);font-synthesis:none;color:var(--c-on-navy)}
.fund__rate b span{font-size:.5em;margin-left:.08em}
.fund__rate--max b{color:var(--c-accent)}
.fund__rate em{font:400 .8125rem/1.35 var(--f-text);font-style:normal;color:var(--c-on-navy-sub)}
.fund__bar{position:relative;height:8px;border-radius:999px;background:#FFFFFF24;overflow:hidden}
.fund__bar-a,.fund__bar-b{position:absolute;top:0;bottom:0;left:0;border-radius:999px}
.fund__bar-b{width:70%;background:var(--c-accent)}
.fund__bar-a{width:50%;background:var(--c-on-navy);z-index:1}
.fund__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fund__chips li{font:600 .75rem/1.2 var(--f-text);padding:5px 9px;border-radius:999px;border:1px solid #FFFFFF3D;color:var(--c-on-navy)}
.fund__note{margin-top:14px;font-size:var(--fs-small);color:var(--text-sub)}
@media (hover:none){
  .fund__rate b{color:var(--num)}
  .fund__rate--max b{color:var(--c-accent-ink,var(--c-accent))}
  .fund__rate em{color:var(--text-sub)}
  .fund__bar{background:var(--line)}
  .fund__bar-a{background:var(--c-navy)}
  .fund__chips li{color:var(--text);border-color:var(--line-strong)}
}

/* Page Mentions légales : colonne de lecture (16/10) */
.legal{max-width:820px;display:grid;gap:14px}
.legal h1{margin:0}
.legal h2{margin:22px 0 0;font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
.legal .text{margin:0}
.legal__list{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--text-sub)}
.legal__list b{color:var(--text)}

/* Visuel « Ce que dit la loi » redessiné (retour Victor 16/10) : boîtes isométriques, étape de remise en état tracée */
.lawviz__loop{max-width:560px}
.lawviz__ret{animation:lv-flow 1.6s linear infinite}
@keyframes lv-flow{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:reduce){.lawviz__ret{animation:none}.lawviz__dot{display:none}}
.lawviz__loop .lawviz__t1{font-size:15px}

/* Critère 4 : matière selon le taux de retour, carton sous 80 %, PP alvéolé au-dessus (retour Victor 16/10) */
.criterion__mat{position:relative}
.criterion__tag{position:absolute;bottom:10px;padding:5px 8px;border-radius:4px;font:600 .6875rem/1.25 var(--f-text);background:#0F2C3DE6;color:#FFFFFF}
.criterion__tag--pp{left:10px}
.criterion__tag--carton{right:10px;text-align:right}
/* Conditions de la définition légale en encadrés fond gris (retour Victor 16/10) */
.lawviz__conds li{padding:16px 18px;border-top:0;border-radius:6px;background:#F5F5F5;color:#5E6A70}
.lawviz__conds b{color:#0F2C3D}
.lawviz__conds li{align-content:start}

/* Libellés des segments sur une seule ligne (sinon un libellé qui passe à la ligne paraît décalé vers le haut) */
@media (min-width:901px){.coststack__blk{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:32px}}

/* Contact : titre au-dessus, formulaire dessous ; infos à gauche, message à droite (retour Victor 16/10) */
.contact--stacked{display:grid;gap:22px;justify-items:center;text-align:center}
.contact--stacked .contact__intro{max-width:720px}
.contact--stacked .contact-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;width:100%;max-width:1040px;text-align:left}  /* formulaire élargi (retour Victor 26/10) */
.contact-form__col{display:grid;gap:16px;align-content:start;min-width:0}
.contact-form__col--msg{grid-template-rows:1fr}
.contact-form__col--msg .field--msg{grid-template-rows:auto 1fr;height:100%}
.contact-form__col--msg textarea{height:100%;min-height:180px;resize:vertical}
@media (max-width:760px){.contact--stacked .contact-form{grid-template-columns:minmax(0,1fr)}}
/* Home : bouton de prise de rendez-vous à la place du formulaire (retour Victor 17/10) */
.contact__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px}
/* Bouton plein écran sur les vidéos des use cases */
.porte--usecase .media__frame{position:relative}
.media__fs{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#0F2C3DCC;color:#FFFFFF;cursor:pointer;opacity:0;transition:opacity var(--t-fast) var(--ease),background-color var(--t-fast)}
.porte--usecase:hover .media__fs,.media__fs:focus-visible{opacity:1}
.media__fs:hover{background:var(--c-accent);color:var(--c-navy)}
.media__fs:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media (hover:none){.media__fs{opacity:1}}

/* Onglets du pack : boutons centrés sous la vidéo (retour Victor 16/10) ; ordre visuel seulement, l'ordre du DOM reste accessible */
.tabs--below .tabs__list{order:2;justify-self:center}
.tabs--below .tabs__panel{order:1}

/* Un encadré par verrou (retour Victor 16/10) */
.verrou{background:var(--c-navy-2);border:1px solid #FFFFFF1F;border-radius:var(--r-card);padding:clamp(22px,3vw,40px);align-items:center}
.verrou + .verrou{margin-top:clamp(18px,2vw,28px)}
/* Flux ménager : bouton du hero centré dans la colonne de texte (retour Victor 16/10) */
#m0 .hero__text .btn-row{justify-self:stretch;justify-content:center}

/* Flux ménager M1 : compteur en tête de section, centré sur la page (retour Victor 16/10) */
.m1-counter{display:grid;justify-items:center;text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.m1-counter .viz{width:100%;max-width:760px;margin:0}
.m1-counter .w-cc{justify-items:center;border-top:0;padding-top:0}
.m1-counter .w-cc__label{margin-inline:auto}
.m1-counter{margin-block:clamp(28px,4vw,48px)}

/* Flux ménager M2 : freins en encadrés bleus, verbatim court + grand numéro, détail au survol (retour Victor 16/10) */
.pain--v{position:relative;min-height:230px;padding:0;background:var(--c-accent);border:0;border-radius:var(--r-card);overflow:hidden;color:var(--c-navy);outline:none;cursor:default}
.pain--v .pain__face{display:grid;align-content:space-between;gap:22px;height:100%;padding:clamp(22px,2.6vw,32px);transition:opacity var(--t-med) var(--ease)}
.pain--v .pain__num{margin:0;font:600 clamp(3rem,2rem + 3vw,4.5rem)/1 var(--f-display);font-synthesis:none;color:var(--c-navy);opacity:.9}
.pain__quote{margin:0;font:700 clamp(1.25rem,1.05rem + .7vw,1.625rem)/1.3 var(--f-text);letter-spacing:-.01em;color:var(--c-navy);text-wrap:balance}
.pain--v .pain__detail{position:absolute;inset:0;display:grid;align-content:center;gap:10px;padding:clamp(22px,2.6vw,32px);background:var(--c-navy);color:var(--c-on-navy);opacity:0;transform:translateY(8px);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.pain--v .pain__title{color:#FFFFFF;font-size:1.125rem}
.pain--v .pain__text{color:var(--c-on-navy-sub);margin:0}
.pain--v .pain__tag{margin:0;font:600 clamp(1.125rem,1rem + .4vw,1.375rem)/1.15 var(--f-display);font-synthesis:none;color:var(--c-accent)}
.pain--v:hover .pain__detail,.pain--v:focus-visible .pain__detail{opacity:1;transform:none}
.pain--v:hover .pain__face,.pain--v:focus-visible .pain__face{opacity:0}
.pain--v:focus-visible{box-shadow:0 0 0 3px var(--c-navy)}
@media (hover:none){
  .pain--v{min-height:0;display:grid}
  .pain--v .pain__detail{position:static;opacity:1;transform:none}
  .pain--v:hover .pain__face{opacity:1}
}
@media (prefers-reduced-motion:reduce){.pain--v .pain__face,.pain--v .pain__detail{transition:none}}

/* Étiquette sur l'étape « Au panier » (retour Victor 16/10) */
.step-tag{justify-self:start;display:inline-block;padding:3px 9px;border-radius:999px;background:var(--c-data);color:#1A1A1A;font:600 .75rem/1.3 var(--f-text)}

/* Flux ménager M5 : parcours client en frise simple ; le détail s'affiche dessous en deux colonnes au survol d'une étape (retour Victor 16/10) */
.parcours{display:grid;gap:clamp(22px,3vw,36px)}
.parcours__line{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.parcours__line::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:2px;background:var(--line-strong)}
.parcours__step{position:relative;display:grid;justify-items:center;gap:10px;width:100%;padding:0 4px;border:0;background:none;color:var(--text-sub);font:600 .9375rem/1.3 var(--f-text);cursor:pointer;text-align:center}
.parcours__num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);color:var(--text-sub);font:600 1.125rem/1 var(--f-display);font-synthesis:none;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.parcours__step:hover .parcours__num,.parcours__step.is-active .parcours__num{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-navy)}
.parcours__step.is-active,.parcours__step:hover{color:var(--text)}
.parcours__step:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px;border-radius:8px}
.parcours__panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:center}
.parcours__panels{display:grid}
.parcours__panel{grid-area:1/1}
.parcours__panel[hidden]{display:grid;visibility:hidden;pointer-events:none}
.parcours__text{display:grid;gap:12px;justify-items:start}
.parcours__text h3{margin:0}
.parcours__k{margin:0;font:600 var(--fs-kicker)/1.3 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
@media (max-width:760px){
  .parcours__panel{grid-template-columns:minmax(0,1fr);align-content:start}
  .parcours__name{font-size:.8125rem}
}
@media (max-width:600px){
  /* cinq étapes : sur téléphone, seules les pastilles restent ; le nom de l'étape est repris dans le détail */
  .parcours__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .parcours__num{width:38px;height:38px}
  .parcours__line::before{top:18px}
}

/* Flux ménager M5c : la tech, pilotage + intégration + sécurité (retour Victor 16/10) */
.trust{gap:16px}
.trust h3{margin:0}
.trust .grid{margin-top:8px}
.trust__tile{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.2vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);min-width:0}
.trust__tile h4{margin:0;font:700 1.0625rem/1.3 var(--f-text);color:var(--text)}
.trust__badge{margin:0;font:600 clamp(1.25rem,1rem + .8vw,1.625rem)/1.1 var(--f-display);font-synthesis:none;letter-spacing:.02em;color:var(--num)}

/* Flux ménager M0 : packshot détouré de la gamme à la place de la vidéo (retour Victor 16/10) */
.hero__packshot{margin:0;position:relative;display:grid;place-items:center}
.hero__packshot::before{content:"";position:absolute;inset:6% 4% 10%;background:radial-gradient(closest-side,rgba(46,169,199,.28),rgba(46,169,199,0) 100%);pointer-events:none}
.hero__packshot img{position:relative;display:block;width:100%;height:auto}

/* Home H1 : carte « Réglementaire » en bleu, titre en jaune (retour Victor 16/10) ; fond navy, le jaune n'est pas lisible sur le bleu clair */
.pillar--navy{background:var(--c-navy);border-color:var(--c-navy)}
.pillar--navy .pillar__title{color:var(--c-data)}
.pillar--navy .blist > li,.pillar--navy .blist > li b{color:#FFFFFF}
/* Réglementaire : un rond drapeau à la place de la puce (retour Victor 17/10) ; FR = loi française, UE = règlement européen */
.blist--flags{gap:14px}
.blist--flags > li{padding-left:32px}
.blist--flags > li::before{left:0;top:.14em;width:20px;height:20px;clip-path:none;border-radius:50%;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CclipPath id='c'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Cpath fill='%23000091' d='M0 0h8v24H0z'/%3E%3Cpath fill='%23FFFFFF' d='M8 0h8v24H8z'/%3E%3Cpath fill='%23E1000F' d='M16 0h8v24h-8z'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='11.5' fill='none' stroke='%23FFFFFF' stroke-opacity='.55'/%3E%3C/svg%3E")}
.blist--flags > li.flag-eu::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23003399'/%3E%3Cpath fill='%23FFCC00' d='M19.40,10.45L19.76,11.50L20.87,11.52L19.99,12.19L20.31,13.25L19.40,12.62L18.49,13.25L18.81,12.19L17.93,11.52L19.04,11.50ZM18.41,14.15L18.77,15.20L19.88,15.22L19.00,15.89L19.32,16.95L18.41,16.32L17.50,16.95L17.82,15.89L16.93,15.22L18.04,15.20ZM15.70,16.86L16.06,17.91L17.17,17.93L16.29,18.60L16.61,19.66L15.70,19.03L14.79,19.66L15.11,18.60L14.23,17.93L15.34,17.91ZM12.00,17.85L12.36,18.90L13.47,18.92L12.59,19.59L12.91,20.65L12.00,20.02L11.09,20.65L11.41,19.59L10.53,18.92L11.64,18.90ZM8.30,16.86L8.66,17.91L9.77,17.93L8.89,18.60L9.21,19.66L8.30,19.03L7.39,19.66L7.71,18.60L6.83,17.93L7.94,17.91ZM5.59,14.15L5.96,15.20L7.07,15.22L6.18,15.89L6.50,16.95L5.59,16.32L4.68,16.95L5.00,15.89L4.12,15.22L5.23,15.20ZM4.60,10.45L4.96,11.50L6.07,11.52L5.19,12.19L5.51,13.25L4.60,12.62L3.69,13.25L4.01,12.19L3.13,11.52L4.24,11.50ZM5.59,6.75L5.96,7.80L7.07,7.82L6.18,8.49L6.50,9.55L5.59,8.92L4.68,9.55L5.00,8.49L4.12,7.82L5.23,7.80ZM8.30,4.04L8.66,5.09L9.77,5.11L8.89,5.78L9.21,6.85L8.30,6.21L7.39,6.85L7.71,5.78L6.83,5.11L7.94,5.09ZM12.00,3.05L12.36,4.10L13.47,4.12L12.59,4.79L12.91,5.85L12.00,5.22L11.09,5.85L11.41,4.79L10.53,4.12L11.64,4.10ZM15.70,4.04L16.06,5.09L17.17,5.11L16.29,5.78L16.61,6.85L15.70,6.21L14.79,6.85L15.11,5.78L14.23,5.11L15.34,5.09ZM18.41,6.75L18.77,7.80L19.88,7.82L19.00,8.49L19.32,9.55L18.41,8.92L17.50,9.55L17.82,8.49L16.93,7.82L18.04,7.80Z'/%3E%3Ccircle cx='12' cy='12' r='11.5' fill='none' stroke='%23FFFFFF' stroke-opacity='.55'/%3E%3C/svg%3E")}

/* Home H5 : canaux de collecte, switch E-commerce / Professionnel, cartes bleues (retour Victor 16/10) */
.flows{display:grid;gap:22px}
.flows__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.flows__switch{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.flows__opt{border:0;background:none;padding:9px 20px;border-radius:999px;font:600 .9375rem/1.2 var(--f-text);color:var(--text-sub);cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast)}
.flows__opt:hover{color:var(--text)}
.flows__opt.is-active{background:var(--c-navy);color:#FFFFFF}
.flows__opt:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.flows__panel[hidden]{display:none}
.flow{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.2vw,28px);background:var(--c-accent);border-radius:var(--r-card);color:var(--c-navy);min-width:0}
.flow__ico{display:block;width:80px;height:50px;margin-bottom:4px;fill:none;stroke:var(--c-navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow__name{margin:0;font:700 1.25rem/1.2 var(--f-text);color:var(--c-navy)}
.flow__sub{margin:0;font-size:.9375rem;line-height:1.5;color:var(--c-navy)}
.flow__logos{display:flex;flex-wrap:wrap;gap:8px;min-height:50px;align-items:center;margin-bottom:4px}
.flow__logo{display:inline-flex;align-items:center;height:50px;padding:6px 12px;background:#FFFFFF;border-radius:8px}
.flow__logo img{display:block;height:38px;width:auto}
.flow__logo--txt{font:800 1.0625rem/1 var(--f-text);letter-spacing:-.01em;color:#1A1A1A;outline:1px dashed #9AA7B0;outline-offset:-4px}
.flow__tag{justify-self:start;margin-top:2px;padding:3px 10px;border-radius:999px;border:1px solid rgba(15,44,61,.5);font:500 .75rem/1.3 var(--f-text);color:var(--c-navy)}

/* Flux ménager M0 : packshot agrandi (retour Victor 16/10) */
.hero__grid--packshot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#m0{overflow:hidden}
@media (min-width:901px){
  .hero__grid--packshot .hero__packshot img{width:124%;max-width:none;margin:0 -12%}
}
@media (max-width:900px){.hero__grid--packshot{grid-template-columns:minmax(0,1fr)}}

/* Flux ménager M7 : un encadré par chiffre, compteur animé, détail au survol (retour Victor 16/10) */
.kpi{position:relative;min-height:220px;background:var(--c-accent);border-radius:var(--r-card);overflow:hidden;color:var(--c-navy);outline:none}
.kpi__face{display:grid;align-content:space-between;gap:18px;height:100%;padding:clamp(22px,2.6vw,32px);transition:opacity var(--t-med) var(--ease)}
.kpi__num{margin:0;font:600 clamp(3.25rem,2rem + 3.6vw,5.25rem)/1 var(--f-display);font-synthesis:none;color:var(--c-navy);white-space:nowrap}
.kpi__unit{font-size:.5em;margin-left:.06em}
.kpi__label{margin:0;font:700 clamp(1.0625rem,.98rem + .4vw,1.25rem)/1.3 var(--f-text);color:var(--c-navy);text-wrap:balance}
.kpi--s{min-height:190px}
.kpi--s .kpi__num{font-size:clamp(2.25rem,1.6rem + 1.8vw,3.25rem)}
.kpi--s .kpi__label{font-size:1rem}
/* Petits KPI : chiffre centré en hauteur, texte à droite sur deux lignes (retour Victor 18/10) */
.kpi--s .kpi__face{display:flex;align-items:center;gap:18px}
.kpi--s .kpi__label{text-wrap:wrap}
.kpi__detail{position:absolute;inset:0;display:grid;align-content:center;gap:10px;padding:clamp(22px,2.6vw,32px);background:var(--c-navy);color:var(--c-on-navy);opacity:0;transform:translateY(8px);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.kpi__dtitle{margin:0;font:700 1.125rem/1.3 var(--f-text);color:#FFFFFF}
.kpi__text{margin:0;line-height:1.55;color:var(--c-on-navy-sub)}
.kpi:hover .kpi__detail,.kpi:focus-visible .kpi__detail{opacity:1;transform:none}
.kpi:hover .kpi__face,.kpi:focus-visible .kpi__face{opacity:0}
.kpi:focus-visible{box-shadow:0 0 0 3px var(--c-navy)}
@media (hover:none),(max-width:760px){
  .kpi{min-height:0;display:grid}
  .kpi__detail{position:static;opacity:1;transform:none}
  .kpi:hover .kpi__face{opacity:1}
}
@media (prefers-reduced-motion:reduce){.kpi__face,.kpi__detail{transition:none}}

/* Home H5 : texte d'introduction justifié (retour Victor 17/10) */
.lead--justify{text-align:justify;text-wrap:wrap}
/* H5 : texte d'intro centré sur la page (retour Victor 18/10) */
.lead--center{text-align:center;margin-inline:auto;max-width:64ch;justify-self:center}
.sec-head:has(.lead--center){max-width:none}
/* Règle générale (retour Victor 18/10) : le texte d'intro sous le titre de section est toujours centré sur la page */
.sec-head:has(> .lead){max-width:none}
.sec-head > .lead{justify-self:center;text-align:center;margin-inline:auto;max-width:64ch}
/* Deux phrases côte à côte, chacune précédée d'un rond noir à coche blanche (Flux ménager M5, retour Victor 18/10) */
.sec-head:has(> .checks){max-width:none}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px 40px}
.sec-head > .checks{justify-self:stretch;margin-top:8px}
.checks--2{grid-template-columns:repeat(2,minmax(0,max-content));justify-content:center}
.checks li{display:flex;align-items:center;gap:14px;font:600 1.125rem/1.4 var(--f-text);color:var(--text)}
.checks li::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:#000000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:760px){.checks--2{grid-template-columns:minmax(0,1fr)}}

/* Home : espace réduit entre les use cases et « Questions fréquentes » (retour Victor 17/10) */
#h9{padding-bottom:var(--sec-pad-tight)}
#h8{padding-top:clamp(36px,4vw,56px)}

/* Home H9 : use cases avec le même switch E-commerce / Professionnel (retour Victor 17/10) */
.flows--usecases .flows__head{justify-content:center}
/* bloc omnicanal (retour Victor 18/10) : bouton E-commerce / Professionnel centré entre le titre et les cartes ;
   dans chaque carte, pictogramme, titre et sous-titre centrés */
.flows--omni .flows__head{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;justify-self:stretch;width:100%;gap:22px}
.flows--omni .flows__switch{justify-self:center}
.flows--h2c .flows__head{justify-content:center}  /* switch centré (retour Victor 22/10) */
.flow{text-align:center;justify-items:center}
.flow__tag{justify-self:center}
.flow__logos{justify-content:center}
.flows--usecases .media--contain .media__frame{background:#FFFFFF}
.flows--usecases .media--contain img{object-fit:contain}

/* Toutes les sections : moins d'espace entre le titre et la section du dessus (retour Victor 17/10) */
.sec:not(.hero){padding-top:clamp(40px,4.5vw,64px);padding-bottom:var(--sec-pad-tight)}

/* Verrous : titre en Monorama, grand, sur 3 lignes (retour Victor 17/10) */
.verrou__title{margin:0;font:600 var(--fs-h2)/1.05 var(--f-display);font-synthesis:none;letter-spacing:0;color:#FFFFFF}

/* Home H2 : « Ne rien faire » / « Mal faire » plus gros (retour Victor 17/10) */
#h2 .pain__num{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);line-height:1.1;letter-spacing:.02em;color:var(--text)}

/* Flux ménager M1 : compteur, libellé sur deux lignes justifié sur la largeur du chiffre (retour Victor 17/10) */
.m1-counter .w-cc{display:grid;grid-template-columns:max-content;justify-items:stretch;gap:10px;width:max-content;max-width:100%;margin-inline:auto}
.m1-counter .w-cc__num{text-align:center}
.m1-counter .w-cc__label{max-width:none;margin:0}
.w-cc__line{display:block;text-align:justify;text-align-last:justify}

/* Flux ménager M3 : « 01 Le Pack » sur une ligne, même hauteur que le numéro (retour Victor 17/10) */
.porte__top{justify-content:flex-start}
.porte__top .porte__kicker{margin:0;font-size:clamp(1.125rem,.95rem + .6vw,1.375rem);line-height:1;letter-spacing:.04em}
.porte__top .porte__num{font-size:clamp(1.125rem,.95rem + .6vw,1.375rem)}

/* =====================================================================
   Donnée centralisée (Flux pro P4, retour Victor 18/10) : un cœur de donnée
   relié aux trois métiers ; la donnée monte de chaque métier vers le cœur
   (bleu) et redescend vers tous (jaune) ; chaque métier s'allume à tour de rôle
   ===================================================================== */
.hubx{display:grid;justify-items:stretch;margin-top:8px}
.hubx__core{justify-self:center;display:grid;justify-items:center;text-align:center;gap:6px;max-width:440px}
.hubx__disc{position:relative;width:112px;height:112px;margin-bottom:8px;border-radius:50%;background:var(--c-navy);display:grid;place-items:center}
.hubx__disc svg{width:52px;height:52px;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hubx__disc::before,.hubx__disc::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c-accent);opacity:0;animation:hubx-ring 3.2s ease-out infinite}
.hubx__disc::after{animation-delay:1.6s}
@keyframes hubx-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.hubx__title{margin:0;font:600 clamp(1.25rem,1.05rem + .7vw,1.75rem)/1.15 var(--f-display);font-synthesis:none;color:var(--text)}
.hubx__text{margin:0;color:var(--text-sub);line-height:1.5}
.hubx__links{display:block;width:100%;height:90px;margin-top:18px;overflow:visible}
.hubx__links path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.hubx__base{stroke:var(--line-strong);stroke-width:1.5}
.hubx__up{stroke:var(--c-accent);stroke-width:3;stroke-dasharray:3 13;animation:hubx-up 2.4s linear infinite}
.hubx__down{stroke:var(--c-data);stroke-width:3;stroke-dasharray:3 13;stroke-dashoffset:8;animation:hubx-down 2.4s linear infinite}
.hubx__up--2,.hubx__down--2{animation-delay:-.8s}
.hubx__up--3,.hubx__down--3{animation-delay:-1.6s}
@keyframes hubx-up{to{stroke-dashoffset:-32}}
@keyframes hubx-down{from{stroke-dashoffset:8}to{stroke-dashoffset:40}}
.hubx__stem{display:none}
.hubx__actors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-col,24px)}
.hubx__actor{display:grid;justify-items:center;align-content:start;gap:10px;text-align:center;padding:clamp(20px,2.2vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);animation:hubx-act 7.2s ease-in-out infinite}
.hubx__actor:nth-child(2){animation-delay:2.4s}
.hubx__actor:nth-child(3){animation-delay:4.8s}
@keyframes hubx-act{0%,40%,100%{border-color:var(--line);transform:none}12%,28%{border-color:var(--c-accent);transform:translateY(-3px)}}
.hubx__ico{width:56px;height:56px;fill:none;stroke:var(--c-navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hubx__name{margin:0;font:700 1.125rem/1.25 var(--f-text);color:var(--text)}
.hubx__gain{margin:0;font-size:.9375rem;line-height:1.5;color:var(--text-sub);text-wrap:pretty}
@media (max-width:760px){
  .hubx__links{display:none}
  .hubx__stem{display:block;justify-self:center;width:3px;height:44px;margin:14px 0;border-radius:2px;background:repeating-linear-gradient(to bottom,var(--c-accent) 0 6px,transparent 6px 14px);background-size:3px 14px;animation:hubx-stem 1.2s linear infinite}
  @keyframes hubx-stem{to{background-position:0 14px}}
  .hubx__actors{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .hubx__disc::before,.hubx__disc::after,.hubx__up,.hubx__down,.hubx__actor,.hubx__stem{animation:none}
  .hubx__disc::before{opacity:.35;transform:scale(1.2)}
}

/* Fonctions clés (Flux pro P8, retour Victor 18/10) : texte à gauche, maquette d'écran de terminal Zebra à droite */
.keyfn{align-items:center}
.keyfn__title{margin:0;font:600 clamp(1.25rem,1.05rem + .7vw,1.75rem)/1.15 var(--f-display);font-synthesis:none;color:var(--text)}
.keyfn__device{margin:0;display:grid;justify-items:center;gap:12px}
.zebra{width:min(320px,100%);padding:18px 14px 22px;border-radius:28px;background:#1A1A1A;box-shadow:0 18px 40px rgba(15,44,61,.25);display:grid;gap:10px}
.zebra__bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 12px;border-radius:10px;background:var(--c-navy);color:#FFFFFF;font:500 .8125rem/1.3 var(--f-text)}
.zebra__bar b{font:600 .9375rem/1.2 var(--f-display);font-synthesis:none;color:var(--c-accent)}
.zebra__rows{margin:0;display:grid;gap:2px;border-radius:10px;overflow:hidden}
.zebra__rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:#FFFFFF}
.zebra__rows dt{font:500 .8125rem/1.3 var(--f-text);color:var(--c-sub)}
.zebra__rows dd{margin:0;font:700 .875rem/1.3 var(--f-text);color:var(--c-ink);text-align:right}
.zebra__ok{padding:10px 12px;border-radius:10px;background:var(--c-accent);color:var(--c-navy);font:700 .875rem/1.2 var(--f-text);text-align:center}

/* Suite logicielle (Flux pro P7, retour Victor 18/10) : outil de pilotage (tableau de bord) et outil de tracking (app sur Zebra et iPhone) */
.suite{align-items:start}
.suite__item{display:grid;gap:14px;align-content:start;min-width:0;padding:clamp(20px,2.2vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
/* titres en Inter gras : en Monorama, le K de « tracking » se lit comme un H */
.suite__title{margin:0;font:700 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.2 var(--f-text);color:var(--text)}
.suite__shot{margin:0}
.suite__devices{display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,3vw,32px);flex-wrap:wrap}
.device{margin:0;display:grid;justify-items:center;gap:8px;max-width:190px;text-align:center}
.device__screen{overflow:hidden;background:#1A1A1A}
.device__screen img{display:block;width:100%;height:auto}
.device--phone .device__screen{width:150px;padding:6px;border-radius:26px}
.device--phone .device__screen img{border-radius:20px}
.device--zebra .device__screen{width:170px;padding:12px 10px 34px;border-radius:16px 16px 26px 26px;background:#2A2F33;position:relative}
.device--zebra .device__screen::after{content:"";position:absolute;left:50%;bottom:10px;width:46px;height:12px;margin-left:-23px;border-radius:6px;background:var(--c-data)}
.device--zebra .device__screen img{border-radius:4px}

/* Hero Flux ménager : bouton « 30 min pour échanger » centré sous le visuel (retour Victor 18/10) */
.hero__mediacol{display:grid;justify-items:center;gap:clamp(18px,2vw,28px);min-width:0}
.hero__mediacol .hero__media{justify-self:stretch}

/* Mise en valeur en jaune data (retour Victor 18/10, bandeau « économie circulaire » de la Home) */
.hl-y{color:var(--c-data)}

/* Flux ménager M4 : trois vidéos légendées (retour Victor 18/10) */
.pvids{gap:clamp(16px,2vw,24px)}
.pvid{margin:0;display:grid;gap:12px;min-width:0}
.pvid .media{margin:0}
.pvid__cap{display:flex;align-items:baseline;gap:10px;font:700 1.0625rem/1.3 var(--f-text);color:var(--text)}
.pvid__cap b{font:600 1.375rem/1 var(--f-display);font-synthesis:none;color:var(--c-accent)}

/* Bento (Home H2b et H2c, retour Victor 20/10 : synthèse graphique « ce que nous développons ») */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.bento__tile{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);grid-column:span 4}
.sec--paper .bento__tile{background:#F5F5F5}
.sec--navy .bento__tile{background:var(--c-navy-2);border-color:#FFFFFF24}
.bento__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B2230}
.bento__media img,.bento__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.bento__tile:hover .bento__media img{transform:scale(1.03)}
.bento__media--ui{background:#FFFFFF}
.bento__media--ui img{object-fit:cover;object-position:left top}
.bento__body{display:grid;gap:8px;align-content:start;padding:clamp(20px,2.2vw,28px)}
.bento__num{margin:0;font:600 1.125rem/1 var(--f-num);font-synthesis:none;color:var(--c-accent-ink,#1A7F99)}
.sec--navy .bento__num{color:var(--c-data)}
.bento__title{margin:0;font:700 1.25rem/1.25 var(--f-text);color:var(--text)}
.bento__text{margin:0;font-size:.9375rem;line-height:1.55;color:var(--text-sub)}
.sec--navy .bento__text{color:var(--c-on-navy-sub)}
/* H2b : grande tuile à gauche sur deux rangs, deux tuiles à droite */
.bento--3 .bento__tile--lead{grid-column:span 6;grid-row:span 2}
.bento--3 .bento__tile--lead .bento__media{aspect-ratio:auto;flex:1;min-height:260px}
.bento--3 .bento__tile:not(.bento__tile--lead){grid-column:span 6;flex-direction:row}
.bento--3 .bento__tile:not(.bento__tile--lead) .bento__media{aspect-ratio:auto;flex:0 0 44%}
.bento__strip{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:22px clamp(20px,2.2vw,28px);border-radius:12px;border:1px solid var(--line)}
.sec--navy .bento__strip{border-color:#FFFFFF24}
.bento__strip-title{margin:0;font:700 1rem/1.3 var(--f-text);color:var(--text)}
/* Types d'emballages en bandeau qui défile (retour Victor 20/10) ; liste dupliquée par shell.js */
.bento__marquee{order:3;flex:1 0 100%;min-width:0;overflow:hidden;padding-top:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bento__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:36px;width:max-content;animation:logos-scroll 28s linear infinite}
.bento__marquee:hover .bento__chips{animation-play-state:paused}
.bento__chip{flex:none;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bento__marquee{-webkit-mask-image:none;mask-image:none}.bento__chips{animation:none;flex-wrap:wrap;width:auto;gap:10px 22px}.bento__chips > [aria-hidden]{display:none}}
.bento__chip{display:inline-flex;align-items:center;gap:10px;font:500 .9375rem/1.2 var(--f-text);color:var(--text)}
.sec--navy .bento__chip{color:var(--c-on-navy)}
.bento__chip svg{width:34px;height:26px;flex:none;fill:none;stroke:var(--c-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bento__strip .btn{margin-left:auto}
.bento__strip--end{border:0;padding:0;justify-content:center}
.bento__strip--end .btn{margin-left:0}
/* H2c : colis en grande tuile, puis fermeture, deux chiffres clés encadrés et la collecte */
.bento--ecom .bento__tile--pack{grid-column:span 6;grid-row:span 2}
.bento--ecom .bento__media--pack{aspect-ratio:auto;flex:1;min-height:300px;background:linear-gradient(160deg,#EAF6F9,#FFFFFF)}
.bento--ecom .bento__media--pack img{object-fit:contain;padding:6% 8% 0}
.bento--ecom .bento__tile:not(.bento__tile--pack){grid-column:span 3}
.bento__tile--kpi{justify-content:space-between;gap:18px;padding:clamp(20px,2.2vw,28px);background:var(--c-accent)!important;border-color:var(--c-accent)!important;color:var(--c-navy)}
.bento__kpi{margin:0;font:600 clamp(2.75rem,2rem + 2.4vw,4rem)/1 var(--f-num);font-synthesis:none;color:var(--c-navy);white-space:nowrap}
.bento__unit{font-size:.5em;margin-left:.06em}
.bento__kpi-label{margin:0;font:700 1.0625rem/1.3 var(--f-text);color:var(--c-navy)}
@media (max-width:1080px){
  .bento--3 .bento__tile:not(.bento__tile--lead){flex-direction:column}
  .bento--3 .bento__tile:not(.bento__tile--lead) .bento__media{aspect-ratio:16/10;flex:none}
}
@media (max-width:900px){
  .bento--3 .bento__tile--lead,.bento--ecom .bento__tile--pack{grid-column:1 / -1;grid-row:auto}
  .bento--3 .bento__tile:not(.bento__tile--lead),.bento--ecom .bento__tile:not(.bento__tile--pack){grid-column:span 6}
  .bento__strip{flex-direction:column;align-items:flex-start}
  .bento__marquee{width:100%;flex:none}
  .bento__strip .btn{margin-left:0}
  .bento__strip--end{align-items:center}
  .bento--ecom .bento__tile--kpi{order:5}
}
@media (max-width:600px){
  .bento{gap:14px}
  .bento--3 .bento__tile:not(.bento__tile--lead),.bento--ecom .bento__tile:not(.bento__tile--pack){grid-column:1 / -1}
  .bento--ecom .bento__tile--kpi{grid-column:span 6}
}

/* Home H0 : titre sur deux lignes, sur toute la largeur au-dessus du texte et de la vidéo (retour Victor 20/10) */
.hero__grid:has(> .hero__title--2l){row-gap:0}
.hero__title--2l{grid-column:1 / -1;margin:0 0 clamp(22px,2.6vw,36px);font-size:clamp(1.75rem,.9rem + 3.1vw,3.25rem);line-height:1.12}
@media (min-width:901px){.hero__title--2l .nw{white-space:nowrap}}
.bento__fact{margin:4px 0 0;justify-self:start;padding:6px 12px;border-radius:999px;background:#2EA9C71F;color:var(--c-accent-ink);font:600 .8125rem/1.35 var(--f-text)}
.sec--navy .bento__fact{background:#FFBB001F;color:var(--c-data)}
.bento__phone{position:absolute;right:8%;bottom:-14%;width:24%;aspect-ratio:400/880;border-radius:12px;overflow:hidden;border:3px solid #0F2C3D;box-shadow:0 10px 30px #0F2C3D66;background:#0F2C3D}
.bento__phone img{position:static!important;width:100%;height:100%;object-fit:cover;transform:none!important}
.bento__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto}
.bento__strip--end .bento__ctas{margin-left:0;justify-content:center}
.sec--navy .btn--secondary{color:var(--c-on-navy)}
.bento__steps{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:none}
.bento__steps li{display:grid;gap:4px;align-content:start;padding:18px 20px;border-radius:12px;border:1px solid var(--line);background:#F5F5F5}
.bento__step-num{font:600 1rem/1 var(--f-num);font-synthesis:none;color:var(--c-accent-ink)}
.bento__steps b{font:700 1.0625rem/1.3 var(--f-text);color:var(--text)}
.bento__steps li > span:last-child{font-size:.9375rem;line-height:1.5;color:var(--text-sub)}
@media (max-width:900px){.bento__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.bento__ctas{margin-left:0}}
@media (max-width:600px){.bento__steps{grid-template-columns:minmax(0,1fr)}}
.bento__media--trim img{inset:0 -2% 0 0;width:102%}  /* la photo du composant a un liseré blanc à droite */

/* H2b et H2c en quinconce, version aérée (retour Victor 20/10) : pas de cadre, photos qui débordent jusqu'au bord de la page, apparition animée */
.bento--zz{--bleed:calc((100vw - min(100vw, var(--maxw) + 2 * var(--gutter))) / 2 + var(--gutter));display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(64px,8vw,128px)}
.bento--zz .bento__tile{grid-column:1 / -1;flex-direction:row;align-items:center;gap:clamp(32px,5.5vw,88px);background:none!important;border:0;border-radius:0;overflow:visible;min-height:0}
.bento--zz .bento__tile:nth-of-type(even){flex-direction:row-reverse}
.bento--zz .bento__media{flex:0 0 calc(56% + var(--bleed));margin-left:calc(-1 * var(--bleed));aspect-ratio:16/10;border-radius:0 18px 18px 0;overflow:hidden}
.bento--zz .bento__tile:nth-of-type(even) .bento__media{margin-left:0;margin-right:calc(-1 * var(--bleed));border-radius:18px 0 0 18px}
.bento--zz .bento__media img,.bento--zz .bento__media video{transform:scale(1.08) translateY(var(--py,0px));transition:none}
.bento--zz .bento__tile:hover .bento__media img{transform:scale(1.08) translateY(var(--py,0px))}
.bento--zz .bento__body{flex:1;align-content:center;gap:14px;padding:0}
.bento--zz .bento__title{font-size:clamp(1.5rem,1.15rem + 1vw,2rem);line-height:1.2}
.bento--zz .bento__text{font-size:1.0625rem;line-height:1.6;max-width:44ch}
.bento--zz .bento__phone{width:17%;right:12%;bottom:-10%}
.bento--zz .bento__media--pack{background:linear-gradient(160deg,#EAF6F9,#FFFFFF)}
.bento--zz .bento__media--pack img{object-fit:contain;padding:6% 10% 2%;transform:translateY(var(--py,0px))}
.sec--navy .bento__strip{border:0;padding-inline:0}
.bento--zz > .bento__strip{margin-top:calc(-1 * clamp(36px,5vw,84px))}
.bento--zz > .bento__strip + .bento__strip{margin-top:calc(-1 * clamp(44px,6vw,96px))}
.bento__strip{border:0}
/* chiffres clés : deux encadrés pleins côte à côte, sans contour */
.bento__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bento__kpibox{display:grid;gap:14px;align-content:space-between;padding:clamp(24px,3vw,40px);border-radius:18px;background:var(--c-accent);color:var(--c-navy)}
/* parcours : sans cadre, numéro et texte */
.bento__steps li{border:0;background:none;padding:0}
.bento__steps{gap:clamp(20px,3vw,40px)}
.bento__step-num{font-size:1.5rem}
/* apparition au défilement (classe posée par shell.js) */
.has-reveal .bento--zz .bento__media,.has-reveal .bento--zz .bento__body,.has-reveal .bento__kpibox,.has-reveal .bento__steps li{opacity:0;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.has-reveal .bento--zz .bento__media{transform:translateX(-48px)}
.has-reveal .bento--zz .bento__tile:nth-of-type(even) .bento__media{transform:translateX(48px)}
.has-reveal .bento--zz .bento__body,.has-reveal .bento__kpibox,.has-reveal .bento__steps li{transform:translateY(24px)}
.has-reveal .is-in.bento__media,.has-reveal .is-in.bento__body,.has-reveal .bento__kpibox.is-in,.has-reveal .bento__steps li.is-in{opacity:1;transform:none!important}
.has-reveal .bento--zz .bento__body{transition-delay:.12s}
.has-reveal .bento__steps li:nth-child(2),.has-reveal .bento__kpibox:nth-child(2){transition-delay:.1s}
.has-reveal .bento__steps li:nth-child(3){transition-delay:.2s}
.has-reveal .bento__steps li:nth-child(4){transition-delay:.3s}
@media (max-width:760px){
  .bento--zz .bento__tile,.bento--zz .bento__tile:nth-of-type(even){flex-direction:column;align-items:stretch;gap:22px}
  .bento--zz .bento__media,.bento--zz .bento__tile:nth-of-type(even) .bento__media{flex:none;margin:0 calc(-1 * var(--gutter));border-radius:0}
  .bento__kpis{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .has-reveal .bento--zz .bento__media,.has-reveal .bento--zz .bento__body,.has-reveal .bento__kpibox,.has-reveal .bento__steps li{opacity:1;transform:none;transition:none}
  .bento--zz .bento__media img,.bento--zz .bento__media video{transform:scale(1.02)}
}

/* ===== Home teaser (refonte 21/10, inspiration UX claisy.com) : une idée par écran, peu de texte, un visuel, un bouton ===== */
.hero--teaser{padding-block:clamp(56px,7vw,96px);overflow:hidden}
.teaser-hero{display:grid;justify-items:start;text-align:left;gap:clamp(28px,3.5vw,48px)}
/* hero : texte et chiffres à gauche, la BOX à droite (retour Victor 21/10 : un seul bouton, un visuel d'emballage à droite) */
.teaser-hero__row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.teaser-hero__text{display:grid;gap:clamp(24px,3vw,36px);justify-items:start}
.teaser-hero__text .teaser-stats{width:100%}
.teaser-hero__cta{margin:0}
.teaser-hero__box{margin:0;position:relative}
.teaser-hero__box::before{content:"";position:absolute;inset:8% 4% -6%;background:radial-gradient(closest-side,#2EA9C733,#2EA9C700);z-index:0}
.teaser-hero__box::after{content:"";position:absolute;left:8%;right:8%;bottom:-4%;height:12%;background:radial-gradient(closest-side,#000000a6,#0000);z-index:0;filter:blur(6px)}
.teaser-hero__box img{position:relative;z-index:1;display:block;width:100%;height:auto}
@media (max-width:900px){.teaser-hero__row{grid-template-columns:minmax(0,1fr)}.teaser-hero__box{max-width:520px;justify-self:center}}
.teaser-hero .hero__title--2l{margin:0}
.teaser-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(100%,880px);text-align:left}
.btn-row--center{justify-content:center}
.teaser-hero__visual{margin:clamp(8px,2vw,24px) 0 0;width:min(100%,900px);position:relative}
.teaser-hero__visual::before{content:"";position:absolute;left:10%;right:10%;top:20%;bottom:-10%;background:radial-gradient(closest-side,#2EA9C740,#2EA9C700);z-index:0}
.teaser-hero__visual img{position:relative;z-index:1;display:block;width:100%;height:auto}
@media (max-width:760px){.teaser-stats{grid-template-columns:minmax(0,1fr)}}
/* carte du statu quo */
.band-card{background:var(--c-paper,#fff);border-radius:20px;padding:clamp(24px,4vw,56px);align-items:center;gap:clamp(24px,4vw,56px)}
.band-card h2{margin:0}
.band-card .text{max-width:40ch}
/* image + trois points */
.tsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.tsplit--rev .tsplit__media{order:2}
.tsplit__media{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#0B2230}
.tsplit__media img,.tsplit__media video{width:100%;height:100%;object-fit:cover;display:block}
.tsplit__body{display:grid;gap:24px;justify-items:start}
.tsplit__body h2{margin:0}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.checklist li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;row-gap:2px}
.checklist li::before{content:"";grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;margin-top:-2px;background:#000000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
.checklist b{font:700 1.0625rem/1.35 var(--f-text);color:var(--text)}
.checklist span{font-size:.9375rem;line-height:1.5;color:var(--text-sub);max-width:46ch}
@media (max-width:860px){.tsplit{grid-template-columns:minmax(0,1fr)}.tsplit--rev .tsplit__media{order:0}}
#h6r .btn-row{margin:0}

/* Bandeaux qui défilent : pleine largeur de fenêtre, sans fondu ni marge, éléments plus grands (retour Victor 21/10 :
   « agrandis-les et supprime totalement les marges pour faire disparaître la marque à la frontière du navigateur ») */
.logos--marquee,.perim-marquee{width:100vw;max-width:none;margin-inline:calc(50% - 50vw);-webkit-mask-image:none;mask-image:none;justify-self:start}
.logos--marquee .logos__grid{gap:clamp(56px,7vw,112px)}
.logos--marquee .logo-tile{height:clamp(72px,7vw,104px)}
.logos--marquee .logo-tile img{max-height:clamp(44px,4.4vw,64px);max-width:clamp(150px,15vw,240px)}
.logos--marquee .logo-tile--tall img{max-height:clamp(60px,6vw,88px)}
.perim-band .perim{gap:20px}
.perim-band .perim__card{width:clamp(220px,19vw,280px);padding:26px 18px}
.perim-band .perim__card .card__title{font-size:1.125rem}
.perim-band .perim__ico{width:104px;height:78px}
.logos--marquee .logo-tile img[src*="ademe"]{max-height:clamp(64px,6.4vw,96px)}  /* le fichier ADEME a beaucoup de blanc autour */

/* Home H2b « Ce que nous faisons » : cinq volets en onglets (21/10) ; titres à gauche, contenu à droite */
.pillars{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.pillars__tabs{display:grid;gap:8px}
.pillars__tab{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;text-align:left;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#F5F5F5;color:var(--text);font:600 1rem/1.4 var(--f-text);cursor:pointer;transition:border-color var(--t-fast)}
.pillars__tab:hover{border-color:var(--c-accent)}
.pillars__tab[aria-selected="true"]{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.pillars__tab:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.pillars__num{font:600 1.25rem/1.1 var(--f-num);font-synthesis:none;color:var(--c-accent-ink)}
.pillars__tab[aria-selected="true"] .pillars__num{color:var(--c-data)}
.pillars__panel{display:grid;align-content:start;gap:22px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:16px;background:#F5F5F5;min-height:100%}
.pillars__panel[hidden]{display:none}
.pillars__ptitle{display:none;margin:0;font:700 1.125rem/1.35 var(--f-text);color:var(--text)}
.pillars__panel .checklist b{font-weight:600}
/* tableau des composants */
.ctable{display:grid;gap:8px}
.ctable__row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.ctable__corner{display:block}
.ctable__col{display:flex;align-items:center;gap:10px;padding:4px 6px 8px;font:700 .9375rem/1.3 var(--f-text);color:var(--text)}
.ctable__col svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--c-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ctable__item{display:flex;align-items:center;padding:14px 16px;border-radius:10px;background:var(--c-navy);color:#fff;font:600 .9375rem/1.35 var(--f-text)}
.ctable__cell{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:.9375rem;line-height:1.4;color:var(--text)}
.ctable__cell::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2C3D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.ctable__cell--none{background:transparent;border-style:dashed}
.ctable__cell--none::before{display:none}
@media (max-width:900px){
  .pillars{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .ctable__row--head{display:none}
  .ctable__row{grid-template-columns:minmax(0,1fr)}
  .ctable__cell:not(.ctable__cell--none)::after{content:attr(data-col);order:-1}
  .ctable__cell--none{display:none}
}

/* KPI sans panneau de détail (Home H6, retour Victor 21/10 : « Jusqu'à 71 % sur la livraison en relais avec Decathlon ») */
.kpi--static:hover .kpi__face{opacity:1}
/* petite flèche « en croissance » à côté du taux relais (retour Victor 21/10) */
.kpi__trend{display:inline-block;vertical-align:top;margin-left:.12em;margin-top:.04em}
.kpi__trend svg{display:block;width:.5em;height:.5em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kpi__pre{display:block;font:600 clamp(1rem,.9rem + .5vw,1.375rem)/1.2 var(--f-display);font-synthesis:none;margin-bottom:.15em}
.kpi__label--brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kpi__brand{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#fff}
.kpi__brand img{height:20px;width:auto;display:block}
.kpi__brands{display:inline-flex;flex-wrap:wrap;gap:8px}
.kpi__brand img[alt="Tape à l\0027œil"],.kpi__brand img[alt="Grain de Malice"]{height:24px}

/* Hero Home (21/10) : titre et bouton à gauche, la BOX à droite ; le titre reste sur deux lignes à partir de 1200 px */
.teaser-hero__row{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.teaser-hero .hero__title--2l{font-size:clamp(1.75rem,.9rem + 2.1vw,2.9rem)}
@media (max-width:1199px){.teaser-hero .hero__title--2l .nw{white-space:normal}}
#h0b-home .media--4x5,#c0b-constat .media--4x5{width:100%;max-width:520px;justify-self:end}

/* Hero Home : animation d'un réseau fermé (retour Victor 21/10, remplace le rendu 3D de la box : « ça se voit que c'est de l'IA ») */
.teaser-hero__loop{margin:0;justify-self:center;width:100%;max-width:680px}
.loopnet{display:block;width:100%;height:auto;overflow:visible}
.loopnet__ring{fill:none;stroke:#2EA9C733;stroke-width:14}
.loopnet__flow{fill:none;stroke:var(--c-accent);stroke-width:2.5;stroke-dasharray:4 14;stroke-linecap:round;animation:loop-flow 1.6s linear infinite}
@keyframes loop-flow{to{stroke-dashoffset:-36}}
.loopnet__inner{fill:none;stroke:#FFFFFF1F;stroke-width:1.5;stroke-dasharray:3 7}
.loopnet__center{font:600 40px/1 var(--f-display);font-synthesis:none;letter-spacing:.06em;text-transform:uppercase;fill:#FFFFFFE6}
.loopp rect{fill:#C9A882}
.loopp .loopp__seal{fill:#121315}
.loopn__disc{fill:var(--c-navy-2);stroke:var(--c-accent);stroke-width:2.5}
.loopn__ico{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.loopn__pulse{fill:none;stroke:var(--c-data);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:loop-pulse 12s linear infinite;animation-delay:calc(var(--i) * 3s - 12s)}
@keyframes loop-pulse{0%{opacity:.9;transform:scale(.92)}8%{opacity:0;transform:scale(1.35)}100%{opacity:0;transform:scale(1.35)}}
.loopn__label{font:600 28px/1 var(--f-text);fill:#E3EBEF}
@media (prefers-reduced-motion:reduce){.loopnet__flow,.loopn__pulse{animation:none}}
@media (max-width:900px){.teaser-hero__loop{max-width:560px}}

/* Home H2b : carrousel de cartes verticales (retour Victor 21/10, remplace les onglets) ; défile jusqu'au bord droit de la fenêtre */
#h2b .sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px}
.vcarousel{position:relative;display:grid;gap:18px}
.vcarousel__nav{position:absolute;right:0;top:calc(-1 * (clamp(28px,3.5vw,48px) + 52px));display:flex;gap:10px}
.vcarousel__btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast)}
.vcarousel__btn svg{width:22px;height:22px;fill:none;stroke:var(--c-navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vcarousel__btn:hover{background:var(--c-navy);border-color:var(--c-navy)}
.vcarousel__btn:hover svg{stroke:#fff}
.vcarousel__btn:disabled{opacity:.35;cursor:default;background:#fff;border-color:var(--line-strong)}
.vcarousel__btn:disabled svg{stroke:var(--c-navy)}
.vcarousel__btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.vcarousel__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin-right:calc(50% - 50vw);padding-right:max(var(--gutter),calc(50vw - 50%));padding-bottom:6px}
.vcarousel__track::-webkit-scrollbar{display:none}
.vcarousel__track:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px}
.vcard{flex:0 0 clamp(270px,26vw,340px);min-height:clamp(440px,36vw,520px);scroll-snap-align:start;display:flex;flex-direction:column;gap:18px;
  padding:clamp(24px,2.4vw,32px);border-radius:18px;background:#F5F5F5;border:1px solid var(--line)}
.vcard--wide{flex-basis:clamp(300px,32vw,420px)}
.vcard:nth-child(odd){background:var(--c-navy);border-color:var(--c-navy);--text:#fff;--text-sub:#C9D7DE}
.vcard__num{margin:0;font:600 clamp(2.5rem,1.8rem + 2vw,3.5rem)/1 var(--f-num);font-synthesis:none;color:var(--c-accent-ink)}
.vcard:nth-child(odd) .vcard__num{color:var(--c-data)}
.vcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px}  /* numéro + petit symbole par carte (retour Victor 21/10) */
.vcard__ico svg{display:block;width:40px;height:40px;fill:none;stroke:var(--c-accent-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vcard:nth-child(odd) .vcard__ico svg{stroke:var(--c-accent)}
.vcard__title{margin:0;font:700 1.125rem/1.35 var(--f-text);color:var(--text)}
.vcard__body{margin-block:auto;display:grid;gap:14px}  /* contenu centré dans la hauteur restante de la carte (retour Victor 21/10) */
.vcard .checklist{gap:12px}
.vcard .checklist b{font-weight:500;font-size:.9375rem;line-height:1.45;color:var(--text)}
.vcard:nth-child(odd) .checklist li::before{background-color:var(--c-accent)}
.vcomp{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.vcomp:first-child{border-top:0;padding-top:0}
.vcomp__name{margin:0;font:700 .9375rem/1.35 var(--f-text);color:var(--text)}
.vcomp__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vcomp__list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:.875rem;line-height:1.4;color:var(--text-sub)}
.vcomp__list em{display:block;font-style:normal;font-size:.75rem;font-weight:600;color:var(--c-accent-ink);text-transform:none}
.vcomp__ico svg{width:24px;height:24px;fill:none;stroke:var(--c-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* H2b · carrousel vertical (retour Victor 22/10) : liste de cartes à gauche, une seule ouverte ; illustration de la carte à droite */
.vstack{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);  /* illustration à gauche, cartes à droite (retour Victor 22/10) */gap:clamp(24px,3.5vw,56px);align-items:start}
.vstack__list{display:grid;gap:10px}
.vstack .vcard{flex:none;min-height:0;gap:0;padding:0;border-radius:16px;background:#F5F5F5;border:1px solid var(--line);--text:var(--c-navy);--text-sub:var(--c-sub);transition:background-color var(--t-fast),border-color var(--t-fast)}
.vstack .vcard:nth-child(odd){background:#F5F5F5;border-color:var(--line);--text:var(--c-navy);--text-sub:var(--c-sub)}
.vstack .vcard.is-active{background:var(--c-navy);border-color:var(--c-navy);--text:#fff;--text-sub:#C9D7DE}
.vcard__toggle{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;padding:16px clamp(18px,2vw,26px);cursor:pointer;border-radius:16px}
.vcard__toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.vstack .vcard__head{display:contents}
.vstack .vcard__num,.vstack .vcard:nth-child(odd) .vcard__num{grid-row:1;font-size:1.5rem;color:var(--c-accent-ink)}
.vstack .vcard__ico{display:none}
.vstack .vcard__title{grid-row:1;font-size:1rem;line-height:1.35;font-weight:600}
.vstack .vcard.is-active .vcard__num,.vstack .vcard.is-active:nth-child(odd) .vcard__num{font-size:clamp(2.25rem,1.6rem + 1.6vw,3rem);color:var(--c-data)}
.vstack .vcard.is-active .vcard__title{font-size:1.125rem;font-weight:700}
.vstack .vcard__short{grid-row:1;font:700 1.0625rem/1.3 var(--f-text);color:var(--text)}
.vstack .vcard:not(.is-active) .vcard__title{display:none}
.vstack .vcard.is-active .vcard__short{display:none}
.vstack .vcard__body{display:none;margin:0;padding:0 clamp(18px,2vw,26px) clamp(20px,2vw,28px)}
.vstack .vcard.is-active .vcard__body{display:grid}
.vstack .vcard.is-active .checklist li::before{background-color:var(--c-accent)}
.vstack .vcard.is-active .vcomp{border-top-color:var(--c-line-navy)}
.vstack .vcard.is-active .vcomp__list em{color:var(--c-accent)}
.vstack__nav{display:flex;align-items:center;gap:10px;margin-top:6px}
.vstack__count{margin:0 0 0 6px;font:600 .875rem/1 var(--f-display);font-synthesis:none;color:var(--text-dim)}
.vstack__count b{color:var(--text)}
.vstack__media{position:sticky;top:calc(var(--hdr-h,76px) + 24px);display:grid;order:-1}
.vstack__panel{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.vstack__panel.is-active{opacity:1;visibility:visible;transition:opacity .35s ease}
.vstack__frame{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--c-navy)}
.vstack__frame img,.vstack__frame video{display:block;width:100%;height:100%;object-fit:cover}
.vstack__logos{aspect-ratio:4/3;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;align-content:center;gap:24px;padding:clamp(24px,4vw,48px)}
.vstack__logos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);align-items:center;justify-items:center}
.vstack__logos img{max-width:100%;max-height:56px;object-fit:contain}
.vstack__cap{margin:0;text-align:center;font:600 .8125rem/1.4 var(--f-display);font-synthesis:none;color:var(--text-dim)}
@media (max-width:860px){
  .vstack{grid-template-columns:minmax(0,1fr)}
  .vstack__media{position:static;order:-1}
}
@media (max-width:760px){.vcarousel__nav{position:static;justify-self:end;order:2}}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.site-footer__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Hero Home : réseau fermé animé en arrière-plan, sur toute la largeur, à la place de l'aplat bleu (retour Victor 21/10) */
.hero--teaser{position:relative;isolation:isolate;min-height:min(78vh,760px);display:grid;align-items:center;
  background:radial-gradient(120% 120% at 85% 40%,#174A63 0%,#0F2C3D 55%,#0B2230 100%)}
.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.hero--teaser::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#0F2C3DF2 0%,#0F2C3DCC 34%,#0F2C3D33 62%,#0F2C3D00 80%)}
.hero--teaser .teaser-hero__row{grid-template-columns:minmax(0,1fr)}
.hero--teaser .teaser-hero__text{max-width:880px}
@media (max-width:760px){.hero--teaser::after{background:linear-gradient(180deg,#0F2C3DE6 0%,#0F2C3DB3 60%,#0F2C3D66 100%)}}

/* Hero Home : photo pleine largeur teintée navy, à la manière de re-zip.com (retour Victor 21/10, remplace l'animation de réseau) */
.hero-photo{position:absolute;inset:0;z-index:-2;background:url(../assets/img/hero-box-ouverture.webp) 62% 45%/cover no-repeat}
.hero--teaser::after{background:linear-gradient(90deg,#0F2C3DF0 0%,#0F2C3DD9 30%,#0F2C3D99 58%,#0F2C3D59 100%)}
/* bouton du hero centré en bas de la photo (retour Victor 21/10) */
.hero--teaser{padding-bottom:calc(clamp(28px,5vh,56px) + 48px + clamp(32px,5vh,64px))}
.hero--teaser > .teaser-hero__cta{position:absolute;left:0;right:0;bottom:clamp(28px,5vh,56px);margin:0;display:flex;justify-content:center;z-index:1}
@media (max-width:760px){.hero-photo{background-position:70% 50%}.hero--teaser::after{background:#0F2C3DCC}}

/* Hero Flux pro : ordinateur avec le tableau de bord + PDA avec l'app de scan (retour Victor 21/10).
   Cadres graphiques plats autour de vraies captures, pas de rendu 3D. */
.hero__grid--tech{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.hero__grid--tech .hero__title{font-size:clamp(1.875rem,1rem + 2.3vw,3.25rem)}
.techmock{position:relative;margin:0;padding:0 0 7% 0}
.techmock__laptop{width:86%}
.techmock__screen{background:#1A1D20;border:1px solid #FFFFFF26;border-bottom:0;border-radius:14px 14px 0 0;padding:2.4% 2.4% 2.8%}
.techmock__screen img{display:block;width:100%;height:auto;border-radius:3px}
.techmock__base{position:relative;height:clamp(10px,1.3vw,18px);margin:0 -7%;background:linear-gradient(180deg,#D5DCE0,#8F9AA1);border-radius:2px 2px 16px 16px;box-shadow:0 18px 40px #00000059}
.techmock__base::after{content:"";position:absolute;left:50%;top:0;width:14%;height:45%;transform:translateX(-50%);background:#7A858C;border-radius:0 0 8px 8px}
.techmock__pda{position:absolute;right:0;bottom:0;width:23%;padding:4.2% 3.4% 11%;background:#2A2F33;border:1px solid #FFFFFF1F;border-radius:18px 18px 30px 30px;box-shadow:0 24px 50px #00000080}
.techmock__pda::before{content:"";position:absolute;left:50%;top:1.6%;width:26%;height:1.6%;transform:translateX(-50%);border-radius:4px;background:#14171A}
.techmock__pda::after{content:"";position:absolute;left:50%;bottom:3.6%;width:30%;height:4.2%;transform:translateX(-50%);border-radius:8px;background:var(--c-data)}
.techmock__pdascreen{overflow:hidden;border-radius:4px;background:#000}
.techmock__pdascreen img{display:block;width:100%;height:auto}
@media (max-width:900px){.hero__grid--tech{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,6vw,40px)}.techmock{max-width:640px;justify-self:center;width:100%}}

/* Hero Flux pro (retour Victor 21/10) : photo pleine largeur, opérateur devant le vrai tableau de bord incrusté dans l'écran.
   Titre dans une colonne étroite à gauche pour laisser l'écran lisible ; voile navy limité à la gauche. */
.hero-photo--pro{background-image:url(../assets/img/hero-pro-dashboard.webp);background-position:50% 40%}
.hero--pro::after{background:linear-gradient(90deg,#0F2C3DF5 0%,#0F2C3DE6 24%,#0F2C3DB3 35%,#0F2C3D73 46%,#0F2C3D59 60%,#0F2C3D4D 100%)}  /* voile renforcé (retour Victor 21/10 « opacifie un peu le bleu ») */
.hero--pro .teaser-hero__text{max-width:min(31vw,470px)}
.hero--pro .hero__title{font-size:clamp(1.75rem,.9rem + 1.6vw,2.6rem)}
@media (max-width:900px){.hero--pro .teaser-hero__text{max-width:none}.hero--pro::after{background:linear-gradient(180deg,#0F2C3DF0 0%,#0F2C3DCC 45%,#0F2C3D33 75%,#0F2C3D80 100%)}.hero-photo--pro{background-position:56% 50%}.hero--pro.hero--teaser{align-items:start}.hero--pro::after{background:linear-gradient(180deg,#0F2C3DF5 0%,#0F2C3DE0 22%,#0F2C3D73 42%,#0F2C3D59 70%,#0F2C3D99 100%)}}
/* P8 : la fiche du contenant affichée dans un vrai terminal durci tenu en main (retour Victor 21/10) */
.keyfn__photo{width:min(520px,100%);aspect-ratio:1/1;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(15,44,61,.18)}
.keyfn__photo img{display:block;width:100%;height:100%;object-fit:cover}
/* Hero Comprendre le réemploi (retour Victor 21/10) : photo de la caisse d'emballages revenus du terrain, recadrée sans le grillage rouge.
   Pas de bouton dans ce hero : on retire la réserve de place prévue pour le bouton en bas. */
.hero-photo--comprendre{background-image:url(../assets/img/hero-comprendre-caisse.webp);background-position:50% 50%}
.hero--comprendre.hero--teaser{padding-bottom:clamp(56px,7vw,96px);min-height:min(62vh,600px)}
/* Home : scène de comptoir relais (retour Victor 21/10) : montage sur photo réelle, box kraft MOBIUSpack avec la boucle de fermeture, PLV Mondial Relay sur le comptoir */
.hero-photo--home{background-image:url(../assets/img/hero-relais-mobiuspack.webp);background-position:60% 55%}
.hero--home::after{background:linear-gradient(90deg,#0F2C3DF2 0%,#0F2C3DE0 22%,#0F2C3D99 32%,#0F2C3D40 42%,#0F2C3D33 100%)}
.hero--home.hero--teaser{align-items:start}
@media (max-width:760px){.hero-photo--home{background-position:68% 50%}.hero--home::after{background:linear-gradient(180deg,#0F2C3DF2 0%,#0F2C3DD9 28%,#0F2C3D4D 50%,#0F2C3D33 75%,#0F2C3D99 100%)}}
/* Hero Flux ménager : vraie vidéo tournée au comptoir d'un point relais (retour Victor 22/10), en fond plein cadre sous le voile navy */
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:55% 78%;background:var(--c-navy)}
/* le geste (remise du colis, scellé tiré) se passe en bas à gauche de la vidéo : titre en haut, plus petit, voile léger en bas */
.hero--menager.hero--teaser{align-items:start}
.hero--menager .hero__title{font-size:clamp(1.75rem,1rem + 1.9vw,2.9rem)}
.hero--menager .teaser-hero__text{max-width:min(100%,980px)}
.hero--menager::after{background:linear-gradient(180deg,#0F2C3DF2 0%,#0F2C3DD1 26%,#0F2C3D66 46%,#0F2C3D33 70%,#0F2C3D59 100%)}
@media (max-width:760px){.hero-video{object-position:42% 60%}}
/* Home : vidéo réelle de préparation de commande en fond (retour Victor 22/10, rognée à droite à l'export) ; remplace le montage du comptoir relais */
.hero-video--home{object-position:50% 60%}
.hero--home::after{background:linear-gradient(90deg,#0F2C3DF2 0%,#0F2C3DD9 24%,#0F2C3D8C 36%,#0F2C3D40 50%,#0F2C3D33 100%)}
@media (max-width:760px){.hero-video--home{object-position:55% 50%}.hero--home::after{background:linear-gradient(180deg,#0F2C3DF2 0%,#0F2C3DD9 30%,#0F2C3D59 52%,#0F2C3D33 75%,#0F2C3D80 100%)}}
/* Heros vidéo (Home, Flux ménager) : sur les écrans larges, le hero grandit avec la largeur pour que la vidéo (16:10 environ) ne soit pas trop rognée en haut et en bas, donc pas « zoomée » (retour Victor 22/10) */
@media (min-width:761px){
  .hero--menager.hero--teaser{min-height:min(92vh,max(78vh,52vw))}
}
/* Home sur grand écran : la vidéo n'est plus agrandie au-delà de sa taille d'origine (effet « zoomé » sur navigateur, retour Victor 22/10) :
   hauteur du hero plafonnée, vidéo calée à droite à sa hauteur, fondu vers le navy à gauche sous le titre */
@media (min-width:1200px){
  .hero--home.hero--teaser{min-height:min(92vh,max(78vh,52vw),900px);background:var(--c-navy)}
  .hero-video--home{left:auto;right:0;width:auto;height:100%;aspect-ratio:1440/900;max-width:100%;object-fit:cover;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
}
/* Hero Flux pro : vraie vidéo « Flux BtoB & interne » en fond (retour Victor 23/10, remplace l'image générée) ; même règle grand écran que la Home (vidéo jamais agrandie) */
.hero-video--pro{object-position:50% 50%}
@media (min-width:1200px){
  .hero--pro.hero--teaser{min-height:min(92vh,max(78vh,52vw),900px);background:var(--c-navy)}
  .hero-video--pro{left:auto;right:0;width:auto;height:100%;aspect-ratio:1440/900;max-width:100%;object-fit:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
}
/* H2b carte 05 : photo d'un atelier de la coalition en fond, logos par-dessus dans des pastilles blanches (retour Victor 23/10) */
.vstack__logos--photo{position:relative;isolation:isolate;overflow:hidden;border:0;background:var(--c-navy) url(../assets/img/coalition-atelier.webp) 50% 40%/cover no-repeat;align-content:end}
.vstack__logos--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0F2C3D1A 0%,#0F2C3D59 40%,#0F2C3DE6 100%)}
.vstack__logos--photo ul{gap:clamp(8px,1.2vw,14px)}
.vstack__logos--photo li{width:100%;display:grid;place-items:center;background:#fff;border-radius:12px;padding:clamp(8px,1vw,12px) clamp(10px,1.2vw,16px);box-shadow:0 6px 18px #0F2C3D40}
.vstack__logos--photo img{max-height:clamp(22px,2.4vw,34px)}
.vstack__logos--photo .vstack__cap{color:#fff}
/* H2c onglet E-commerce : vidéo explicative « Flux e-commerce : comment ça fonctionne ? » en entier, au format 16:9 pour ne couper ni titres ni sous-titres (retour Victor 23/10) */
.tsplit__media--16x9{aspect-ratio:16/9;align-self:center}
/* Bouton son sur les vidéos qui ont une voix off (retour Victor 23/10 : « met un bouton mute unmute ») */
.has-mute{position:relative}
.vmute{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border:0;border-radius:999px;background:#0F2C3DD9;color:#fff;font:600 .8125rem/1 var(--f-text);cursor:pointer;backdrop-filter:blur(4px)}
.vmute:hover{background:var(--c-navy)}
.vmute:focus-visible{outline:2px solid var(--c-data);outline-offset:2px}
.vmute svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vmute .vmute__on{display:none}
.vmute[aria-pressed="true"] .vmute__on{display:block}
.vmute[aria-pressed="true"] .vmute__off{display:none}
/* P8 : champs du contenant en tableau façon écran de l'app MOBIUSpack, QR code en fond (retour Victor 23/10) */
.apptable{position:relative;isolation:isolate;overflow:hidden;max-width:560px;border-radius:20px;background:#121416;color:#fff;padding:clamp(18px,2vw,24px);box-shadow:0 18px 40px rgba(15,44,61,.22)}
.apptable::before{content:"";position:absolute;z-index:-1;right:-28px;top:50%;width:min(62%,300px);aspect-ratio:1;transform:translateY(-50%) rotate(-6deg);background:url(../assets/img/qr-fond.svg) center/contain no-repeat;opacity:.3}
.apptable__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.apptable__head span{font:800 .9375rem/1.2 var(--f-text);letter-spacing:.04em;text-transform:uppercase}
.apptable__head b{padding:7px 12px;border-radius:10px;background:var(--c-accent);color:var(--c-navy);font:800 .875rem/1 var(--f-text)}
.apptable__rows{margin:0;border-radius:14px;background:#1F222599;padding:2px 16px;backdrop-filter:blur(1px)}
.apptable__rows > div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #FFFFFF1F}
.apptable__rows > div:last-child{border-bottom:0}
.apptable__rows dt{color:#A9B4BA;font:500 .9375rem/1.3 var(--f-text)}
.apptable__rows dd{margin:0;font:700 .9375rem/1.3 var(--f-text);text-align:right}
.apptable__ok{margin:14px 0 0;padding:12px 16px;border-radius:14px;background:#7ED957;color:#0B1F0A;font:800 .9375rem/1.2 var(--f-text);text-align:center}
/* M5b omnicanal : cartes sobres qui se révèlent au survol (retour Victor 23/10) : au repos pictogramme, canal et taux ; au survol ou au focus, fond navy et barres qui se remplissent */
.omni--reveal .grid{align-items:stretch}
.omni--reveal .omni__card{position:relative;display:grid;align-content:start;gap:10px;min-height:470px;padding:clamp(22px,2.4vw,30px);border-radius:18px;background:#F5F5F5;border:1px solid var(--line);outline:none;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.omni--reveal .omni__ico svg{display:block;width:34px;height:34px;fill:none;stroke:var(--c-accent-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.omni--reveal .omni__name{margin-top:6px;transition:color .35s}
.omni__big{margin:0;font:600 clamp(1.75rem,1.2rem + 1.6vw,2.5rem)/1.05 var(--f-display);font-synthesis:none;color:var(--c-navy);transition:color .35s}
.omni__big span{display:block;margin-top:6px;font:500 .875rem/1.3 var(--f-text);color:var(--text-sub);transition:color .35s}
.omni__more{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;font:600 .8125rem/1 var(--f-text);color:var(--c-accent-ink);transition:opacity .25s}
.omni__more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.omni--reveal .omni__params{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .5s var(--ease),opacity .35s var(--ease),margin-top .35s}
.omni--reveal .omni__fill{width:0;transition:width .9s var(--ease) .1s}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within){background:var(--c-navy);border-color:var(--c-navy);transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,44,61,.22)}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) :is(.omni__name,.omni__big,.omni__val){color:#fff}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) :is(.omni__big span,.omni__label){color:#C9D7DE}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) .omni__ico svg{stroke:var(--c-data)}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) .omni__more{opacity:0}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) .omni__params{max-height:240px;opacity:1;margin-top:8px}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) .omni__track{background:#FFFFFF26}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) .omni__param--cout .omni__fill{background:#9FB3C0}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) .omni__fill{width:calc(var(--v) * 1%)}
@media (hover:none){
  .omni--reveal .omni__card{min-height:0}
  .omni--reveal .omni__params{max-height:none;opacity:1;margin-top:8px}
  .omni--reveal .omni__fill{width:calc(var(--v) * 1%)}
  .omni--reveal .omni__more{display:none}
}
@media (prefers-reduced-motion:reduce){.omni--reveal .omni__card,.omni--reveal .omni__params,.omni--reveal .omni__fill{transition:none}}
/* H0b : grande citation en Monorama sous le constat (retour Victor 23/10) */
.bigquote{margin:clamp(40px,5vw,72px) 0 0;padding:clamp(24px,3vw,40px) 0 0;border-top:1px solid var(--line)}
.bigquote p{margin:0;max-width:30ch;font:600 clamp(1.625rem,1rem + 2.2vw,2.75rem)/1.15 var(--f-display);font-synthesis:none;color:var(--c-navy);text-wrap:balance}
.bigquote sup{font-size:.55em;vertical-align:.6em}
.bigquote__by{margin-top:16px;font:600 .9375rem/1.3 var(--f-text);color:var(--text-sub)}
/* Taux de retour : photo en arrière-plan des encadrés (retour Victor 23/10) : click & collect = préparation chez Kiabi (POC), relais = remise au comptoir ; voile navy pour la lisibilité */
.kpi--photo{background:var(--c-navy) var(--kpi-bg) center/cover no-repeat;color:#fff;isolation:isolate}
.kpi--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0F2C3DCC 0%,#0F2C3D99 45%,#0F2C3DE6 100%)}
.kpi--photo .kpi__num,.kpi--photo .kpi__label,.kpi--photo .kpi__pre,.kpi--photo .kpi__unit{color:#fff}
.kpi--photo .kpi__trend svg{stroke:var(--c-data)}
/* Hero Home : sous-titre centré en bas, au-dessus du bouton (retours Victor 23/10) */
.hero__sub{margin:0;text-align:center;padding-inline:var(--gutter);max-width:46ch;font:500 clamp(1.0625rem,.95rem + .45vw,1.3125rem)/1.45 var(--f-text);color:#E3EBEF;text-wrap:pretty}
/* H0b : titre, chiffres et citation (plus petite, sous les chiffres) justifiés sur la hauteur de la photo (retour Victor 23/10) */
@media (min-width:861px){
  .constat{align-items:stretch}
  .constat > .stack{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
  .constat > .stack .sec-head{margin:0}
  .constat > .media{align-self:stretch}
  .constat > .media .media__frame{height:100%;aspect-ratio:auto}
}
.bigquote--inline{margin:0;padding:clamp(18px,2vw,24px) 0 0}
.bigquote--inline p{max-width:none;font-size:clamp(1.125rem,.9rem + .8vw,1.5rem);line-height:1.2}
.bigquote--inline .bigquote__by{margin-top:10px;font-size:.875rem;text-align:right}  /* signature à droite (retour Victor 23/10) */
/* Comprendre H1 « L'emballage, un enjeu stratégique » : trois cartes au même style (retour à la DA initiale), photo + titre seul ; le texte apparaît au survol ou au focus (retour Victor 23/10) */
.enjeu{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(300px,28vw,380px);padding:clamp(22px,2.4vw,30px);border-radius:var(--r-card);
  background:var(--c-navy) var(--enjeu-bg) center/cover no-repeat;color:#fff;outline:none}
.enjeu::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0F2C3D00 30%,#0F2C3DD9 100%)}
.enjeu::after{content:"";position:absolute;inset:0;z-index:-1;background:#0F2C3DD9;opacity:0;transition:opacity .4s var(--ease)}
.enjeu__title{margin:0;font:600 clamp(1.5rem,1.1rem + 1vw,2rem)/1.1 var(--f-display);font-synthesis:none;color:#fff}
.enjeu__list{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .35s}
.enjeu__list > li{color:#fff}
.enjeu__list > li::before{background-color:var(--c-data)}
.enjeu:is(:hover,:focus-visible,:focus-within)::after{opacity:1}
.enjeu:is(:hover,:focus-visible,:focus-within) .enjeu__list{max-height:220px;opacity:1;margin-top:16px}
.enjeu:focus-visible{outline:2px solid var(--c-data);outline-offset:3px}
@media (hover:none){
  .enjeu::after{opacity:.75}
  .enjeu__list{max-height:none;opacity:1;margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.enjeu::after,.enjeu__list{transition:none}}
.hero--teaser > .teaser-hero__cta--stack{flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,20px)}
.teaser-hero__cta--stack .hero__sub{max-width:58ch;color:#fff;text-shadow:0 1px 2px #0F2C3DCC,0 2px 18px #0F2C3DE6}
.hero--home::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0F2C3D00 0%,#0F2C3D99 100%)}
/* Hero Home : sous-titre en Monorama, mot central en tableau d'affichage à palettes (retour Victor 23/10) */
.teaser-hero__cta--stack .hero__sub--flap{max-width:none;display:grid;justify-items:center;gap:8px;font:600 clamp(1.25rem,.9rem + 1.3vw,2rem)/1.15 var(--f-display);font-synthesis:none;color:#fff;letter-spacing:.01em}
.flap-line{display:block}
.flap{display:inline-flex;gap:3px;vertical-align:middle;margin-left:.2em;color:var(--c-data);text-shadow:none}
.flap__c{position:relative;display:inline-grid;place-items:center;width:.82em;height:1.25em;border-radius:4px;background:#0B1F2AE6;box-shadow:inset 0 0 0 1px #FFFFFF14;perspective:200px}
.flap__c::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#00000080}
.flap__c > span{display:block;line-height:1}
.flap__c.is-flip > span{animation:flapflip .09s linear}
@keyframes flapflip{0%{transform:rotateX(-80deg);opacity:.4}100%{transform:none;opacity:1}}
@media (max-width:760px){.flap{display:flex;justify-content:center;margin:6px 0 2px}}
@media (max-width:560px){.flap__c{width:.74em;height:1.2em}.flap{gap:2px}}
@media (prefers-reduced-motion:reduce){.flap__c.is-flip > span{animation:none}}
.flap__k{display:block;width:.52em;height:.72em;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:square;stroke-linejoin:miter}
/* palettes sans fond bleu (retour Victor 23/10) : lettres jaunes seules, toujours animées */
.flap{gap:0}
.flap__c{width:.74em;height:1.15em;background:none;box-shadow:none;border-radius:0}
.flap__c::after{display:none}
@media (max-width:560px){.flap__c{width:.7em;height:1.1em}}
/* Hero Home : sous-titre à gauche, justifié à gauche, sur quatre lignes, deux mots en palettes (retour Victor 23/10) */
.hero__sub--left{display:grid;justify-items:start;gap:4px;margin:0;padding:0;max-width:none;text-align:left;font:600 clamp(1.25rem,.9rem + 1.3vw,2rem)/1.15 var(--f-display);font-synthesis:none;color:#fff;text-shadow:0 1px 2px #0F2C3D99}
.hero__sub--left .flap{margin-left:0}
.hero__sub--left .flap-line > .flap:not(:first-child){margin-left:.25em}
@media (max-width:760px){.hero__sub--left .flap{display:inline-flex;justify-content:flex-start;margin:0}}
/* Hero Home : le titre principal devient la phrase à palettes, sur quatre lignes ; « L'opérateur industriel… » supprimé (retour Victor 23/10) */
.teaser-hero .hero__title--flap{display:grid;justify-items:start;gap:2px;margin:0;font-size:clamp(2rem,1rem + 2.7vw,3.4rem);line-height:1.08;color:#fff;text-align:left}
.hero__title--flap .flap{margin-left:0}
.hero__title--flap .flap-line > .flap:not(:first-child){margin-left:.25em}
@media (max-width:760px){.hero__title--flap .flap{display:inline-flex;justify-content:flex-start;margin:0}}
/* titre du hero Home un peu plus bas (retour Victor 23/10) */
.hero--home .teaser-hero{padding-top:clamp(32px,7vh,88px)}
/* Bandeau de logos sous le hero : même taille de logos, bandeau plus fin (retour Victor 23/10) */
#h0c-confiance .logo-tile{height:clamp(52px,5vw,72px)}
/* Encadré d'alerte dans une carte omnicanale (Domicile, retour Victor 23/10) */
.omni__alert{display:flex;align-items:center;gap:10px;margin:4px 0 0;padding:10px 12px;border:1px solid var(--c-data);border-radius:10px;background:#FFBB001F;font:600 .8125rem/1.3 var(--f-text);color:var(--c-navy);transition:color .35s,background .35s}
.omni__alert-ico{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c-data);font:800 .875rem/1 var(--f-text);color:var(--c-navy)}
.omni--reveal .omni__card:is(:hover,:focus-visible,:focus-within) .omni__alert{color:#fff;background:#FFBB0026}
/* Carte 02 H2b : tableau composants x acteurs (retour Victor 23/10) */
.vtable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.8125rem;line-height:1.35}
.vtable thead td{width:30%}
.vtable th,.vtable td{padding:10px 8px 10px 0;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.vtable thead :is(th,td){border-top:0;padding-top:0}
.vtable thead th{font:600 .75rem/1.3 var(--f-text);color:var(--c-accent-ink)}
.vtable tbody th{font:700 .875rem/1.3 var(--f-text);color:var(--text)}
.vtable td{color:var(--text-sub)}
.vstack .vcard.is-active .vtable :is(th,td){border-top-color:var(--c-line-navy)}
.vstack .vcard.is-active .vtable thead :is(th,td){border-top:0}
.vstack .vcard.is-active .vtable thead th{color:var(--c-accent)}
@media (max-width:560px){
  .vtable thead{display:none}
  .vtable,.vtable tbody,.vtable tr,.vtable th,.vtable td{display:block}
  .vtable tr{padding:10px 0;border-top:1px solid var(--line)}
  .vtable tr:first-child{border-top:0;padding-top:0}
  .vstack .vcard.is-active .vtable tr{border-top-color:var(--c-line-navy)}
  .vtable th,.vtable td,.vstack .vcard.is-active .vtable :is(th,td){border:0;padding:2px 0}
  .vtable td::before{content:attr(data-col) "\00a0: ";font-weight:600;color:var(--c-accent-ink)}
  :is(:lang(en),:lang(de)) .vtable td::before{content:attr(data-col) ": "}
  .vstack .vcard.is-active .vtable td::before{color:var(--c-accent)}
}
/* P7 outil de tracking : vraie photo du terminal Zebra à la place de la maquette (retour Victor 25/10) */
.device--photo{max-width:none}
.device__photo{width:clamp(220px,24vw,330px);aspect-ratio:1/1;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(15,44,61,.18)}
.device__photo img{display:block;width:100%;height:100%;object-fit:cover}
/* P8 : neuf autres fonctions clés en cartes sobres (retour Victor 25/10) */
.keyfns{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.keyfns__item{display:grid;align-content:start;gap:8px;padding:clamp(20px,2vw,26px);border-radius:16px;background:#F5F5F5;border:1px solid var(--line)}
.keyfns__ico svg{display:block;width:30px;height:30px;fill:none;stroke:var(--c-accent-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.keyfns__title{margin:6px 0 0;font:700 1rem/1.3 var(--f-text);color:var(--c-navy)}
.keyfns__text{margin:0;font-size:.875rem;line-height:1.5;color:var(--text-sub)}
@media (max-width:980px){.keyfns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.keyfns{grid-template-columns:minmax(0,1fr)}}
/* Hero Pro : titre plus gros, au niveau de la Home (retour Victor 25/10 « en plus gros ») */
.hero--pro .teaser-hero__text{max-width:min(44vw,660px)}
.hero--pro .hero__title{font-size:clamp(2rem,1rem + 2.7vw,3.4rem);line-height:1.08}
@media (max-width:900px){.hero--pro .teaser-hero__text{max-width:none}}
/* P8 : fonctions clés en « trieur » (retour Victor 25/10) : carte vue devant, les suivantes derrière en profondeur, la carte passée sort vers le haut ; photo à droite */
.keydeck{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,3.5vw,56px);align-items:center;margin-top:clamp(48px,6vw,80px)}
.keydeck__left{display:grid;gap:18px}
.keydeck__stack{position:relative;height:clamp(270px,22vw,320px);outline:none;touch-action:pan-y;overscroll-behavior:contain}
.keydeck__stack:focus-visible{box-shadow:0 0 0 3px var(--c-accent);border-radius:20px}
.keydeck__card{position:absolute;top:0;left:0;right:0;height:calc(100% - 60px);margin:0;box-sizing:border-box;display:grid;align-content:start;gap:12px;padding:clamp(24px,2.6vw,36px);border-radius:18px;background:var(--c-navy);color:#fff;box-shadow:0 18px 40px rgba(15,44,61,.22);transform-origin:50% 100%;
  transform:translateY(calc(var(--d,0) * 20px)) scale(calc(1 - var(--d,0) * .05));opacity:calc(1 - var(--d,0) * .24);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease,box-shadow .45s ease;cursor:pointer}
.keydeck__card.is-front{cursor:default}
.keydeck__card:not(.is-front){box-shadow:0 8px 20px rgba(15,44,61,.12)}
.keydeck__card:not(.is-front) > *{opacity:0;transition:opacity .2s ease}
.keydeck__card.is-front > *{opacity:1;transition:opacity .35s ease .12s}
.keydeck__card.is-far{opacity:0;pointer-events:none}
.keydeck__card.is-past{transform:translateY(-56px) scale(1.03);opacity:0;pointer-events:none}
.keydeck__num{margin:0;font:600 clamp(2.5rem,1.8rem + 1.8vw,3.4rem)/1 var(--f-display);font-synthesis:none;color:var(--c-data)}
.keydeck__title{margin:6px 0 0;font:700 clamp(1.125rem,1rem + .4vw,1.375rem)/1.25 var(--f-text);color:#fff}
.keydeck__text{margin:0;font-size:.9375rem;line-height:1.55;color:#C9D7DE}
.keydeck__nav{display:flex;align-items:center;gap:10px}
.keydeck__media{display:grid}
.keydeck__media .vstack__frame svg{display:block;width:100%;height:100%}
@media (max-width:860px){
  .keydeck{grid-template-columns:minmax(0,1fr)}
  .keydeck__media{order:-1}
  .keydeck__stack{height:clamp(250px,62vw,300px)}
}
@media (prefers-reduced-motion:reduce){.keydeck__card,.keydeck__card > *{transition:none}}
/* Trieur P8, carte 01 Enrichissement : le tableau façon écran de l'app centré sur fond navy (retour Victor 25/10) */
.keydeck__appframe{display:grid;place-items:center;padding:clamp(18px,3vw,40px)}
.keydeck__appframe .apptable{width:100%;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.keydeck{margin-top:0}
/* M4 et M9 en « trieur » comme P8 (retour Victor 26/10) */
.keydeck__card{--text:#fff;--text-sub:#C9D7DE}
.keydeck__card .checklist{gap:8px;margin-top:4px}
.keydeck__card .checklist b{font-weight:500;font-size:.9375rem;line-height:1.45;color:#fff}
.keydeck__card .checklist li::before{background-color:var(--c-accent)}
.keydeck--tall .keydeck__stack{height:clamp(330px,26vw,380px)}
.keydeck--solo{grid-template-columns:minmax(0,1fr);width:100%;max-width:1040px;margin-inline:auto}  /* FAQ centrée dans la section (retour Victor 26/10) */
.keydeck--solo .keydeck__nav{justify-content:center}
.keydeck--solo .keydeck__stack{height:clamp(300px,24vw,340px)}
@media (max-width:860px){.keydeck--tall .keydeck__stack{height:clamp(340px,96vw,420px)}.keydeck--solo .keydeck__stack{height:clamp(320px,90vw,400px)}}
@media (max-width:640px){.keydeck__appframe{padding:12px}.keydeck__appframe .apptable{zoom:.74}}
@media (max-width:440px){.keydeck__appframe .apptable{zoom:.6}}
/* FAQ en trieur : cartes plus basses (retour Victor 26/10) : hauteur de la carte affichée (--card-h posée par le script), numéro et marges réduits */
.keydeck--solo .keydeck__stack{transition:height .4s ease}
.keydeck--solo .keydeck__card{height:var(--card-h,calc(100% - 60px));overflow:hidden;gap:8px;padding:clamp(20px,2.2vw,30px);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease,box-shadow .45s ease,height .4s ease}
.keydeck--solo .keydeck__num{font-size:clamp(1.75rem,1.3rem + 1vw,2.25rem)}
.keydeck--solo .keydeck__title{margin-top:2px}
@media (prefers-reduced-motion:reduce){.keydeck--solo .keydeck__stack,.keydeck--solo .keydeck__card{transition:none}}
/* H2c onglet E-commerce : liste enrichie (pastilles de canaux + sous-points), retour Victor 27/10 */
.checklist--rich > li > :is(.chips,.subl){grid-column:2}
.checklist .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;max-width:none}
.checklist .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:999px;background:#EAF6F9;border:1px solid #CBE7EF;font:600 .8125rem/1.2 var(--f-text);color:var(--c-navy);max-width:none}
.checklist .chip svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--c-accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.checklist .subl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.checklist .subl li{display:block;position:relative;padding-left:16px;font-size:.9375rem;line-height:1.5;color:var(--text-sub);max-width:52ch}
.checklist .subl li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;margin:0;border-radius:50%;background:var(--c-accent)}
.checklist .subl em{font-style:normal;font-weight:600;color:var(--text)}
/* P5 traçabilité en trieur (27/10) : visuels dans le cadre navy 4:3 */
#p5 .keydeck{margin-bottom:clamp(40px,5vw,64px)}
.keydeck__screen{display:grid;place-items:center;padding:clamp(16px,2.4vw,32px)}
.keydeck__screen img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.keydeck__phones{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.4vw,32px);padding:clamp(16px,2.4vw,32px)}
.vstack__frame.keydeck__phones img{width:auto;height:88%;max-width:42%;object-fit:contain;border-radius:22px;border:6px solid #1A1A1A;background:#1A1A1A;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.keydeck__proof{display:grid;place-content:center;justify-items:center;gap:12px;padding:32px;text-align:center;color:#fff}
.keydeck__proof-num{margin:0;font:600 clamp(4rem,3rem + 4vw,6.5rem)/1 var(--f-display);font-synthesis:none;color:var(--c-data)}
.keydeck__proof-num span{margin-left:.12em;font-size:.4em;color:#fff}
.keydeck__proof-label{margin:0;font:600 1.0625rem/1.4 var(--f-text);color:#C9D7DE}
.keydeck__proof-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 0}
.keydeck__proof-badges span{padding:6px 12px;border-radius:999px;border:1px solid #2EA9C780;background:#2EA9C71F;font:600 .8125rem/1 var(--f-text);color:#fff}
/* H2c : bouton centré sous le bloc texte + vidéo (retour Victor 27/10) */
.h2c-cta{margin:clamp(24px,3vw,40px) 0 0;text-align:center}
/* M5c (retour AS 27/10) : accroche PMS + trieur des cas concrets */
.tech__pms{gap:clamp(18px,2vw,28px)}
.tech__pms > h3{font:600 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.2 var(--f-display);font-synthesis:none;color:var(--text)}
/* Refonte Pro du 27/10 (retours Anne-Sophie) */
.keydeck__todo{display:grid;place-content:center;justify-items:center;gap:14px;padding:32px;border:2px dashed #2EA9C766}
.keydeck__todo-ico{margin:0}
.keydeck__todo-ico svg{width:56px;height:56px;fill:none;stroke:#2EA9C7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cycle{margin-top:clamp(48px,6vw,80px)}
.cycle__title{margin:0 0 18px;font:600 clamp(1.25rem,1.05rem + .7vw,1.625rem)/1.2 var(--f-display);font-synthesis:none;color:var(--text)}
.cycle__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.cycle__item{display:grid;align-content:start;gap:6px;padding:18px;border-radius:14px;background:#F5F5F5;border:1px solid var(--line)}
.cycle__ico svg{display:block;width:26px;height:26px;fill:none;stroke:var(--c-accent-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cycle__name{margin:4px 0 0;font:700 .9375rem/1.3 var(--f-text);color:var(--c-navy)}
.cycle__text{margin:0;font-size:.8125rem;line-height:1.45;color:var(--text-sub)}
@media (max-width:1100px){.cycle__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.cycle__list{grid-template-columns:minmax(0,1fr)}}
.suite__list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px}
.suite__list li{position:relative;padding-left:18px;font-size:.9375rem;line-height:1.5;color:var(--text-sub)}
.suite__list li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--c-accent)}
.suite__list b{color:var(--text)}
.hubx__proof{margin:8px 0 0;font-size:.8125rem;line-height:1.4;color:var(--text-sub)}
.hubx__proof span{display:inline-block;margin:4px 4px 0 0;padding:3px 9px;border-radius:999px;border:1px solid #2EA9C780;background:#2EA9C71A;font-weight:600;color:var(--c-navy)}
#p5 .keydeck{margin-bottom:0}
#p5 .cycle{margin-top:clamp(32px,4vw,56px)}
.grid.suite{align-items:stretch}
.suite .suite__item{height:100%;box-sizing:border-box}


/* P5 étapes sans capture publique : écran flouté + appel à la démo (retour Victor 28/10) */
.keydeck__flou{position:relative}
.keydeck__demo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 12px 30px rgba(15,44,61,.35)}

/* =====================================================================
   MOBIUSpack · widgets de la Home (v0.1 · 16/10/2026)

   Styles des visuels posés par widgets.js dans les conteneurs [data-widget].
   - Toutes les classes sont préfixées w- ; is-on est l'état posé par le JS.
   - Couleurs : jetons de rôle du design system (--text, --text-sub,
     --text-dim, --line, --line-strong, --num, --surface) pour suivre le fond
     clair ou navy ; accent pour les tracés ; jaune --c-data pour les données
     seulement, jamais en texte sur fond clair.
   - .w-dark est posé par le JS quand le fond est sombre (lecture de --text).
   - Petits repères : des ronds. Pas de dégradé.
   - Sections 8 à 10 : widgets des pages Flux (compteur-colis, checkout,
     tournee).
   ===================================================================== */

.w-root{
  position:relative;
  display:grid;
  gap:16px;
  min-width:0;
  max-width:100%;
  color:var(--text);
  font-family:var(--f-text);
  font-size:var(--fs-small);
  line-height:1.5;
}
.w-root > *{min-width:0}
.w-root p{margin:0}
.w-plot{position:relative;width:100%;max-width:100%;min-width:0;overflow:hidden}
.w-svg{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.w-num{font-family:var(--f-display);font-weight:600;font-synthesis:none;letter-spacing:0;font-variant-numeric:tabular-nums}
.w-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.w-src{font-size:var(--fs-micro);line-height:1.45;color:var(--text-dim)}

/* ---------- Textes dans les SVG ---------- */
.w-svg text{font-family:var(--f-text);font-weight:500;fill:var(--text-sub)}
.w-svg .w-fn{font-family:var(--f-display);font-weight:600;font-synthesis:none;letter-spacing:0}
.w-svg .w-fs{font-weight:600}
.w-svg .w-fb{font-weight:700}
.w-svg .w-ct{fill:var(--text)}
.w-svg .w-cs{fill:var(--text-sub)}
.w-svg .w-cd{fill:var(--text-dim)}
.w-svg .w-cn{fill:var(--num)}

/* ---------- Traits communs ---------- */
.w-grid{fill:none;stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.w-ref{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.w-axis{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.w-dash{fill:none;stroke:var(--line-strong);stroke-width:1.25;stroke-dasharray:4 4}

/* ---------- Légendes ---------- */
.w-legend{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-size:var(--fs-small);
  line-height:1.4;
  color:var(--text-sub);
}
.w-legend > li{display:inline-flex;align-items:center;gap:9px;min-width:0}
.w-sw{flex:none;display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--line-strong)}
.w-legend__txt{display:grid;gap:2px;min-width:0}
.w-legend__name{font-weight:600;color:var(--text)}
.w-legend__sub{display:block;font-size:var(--fs-micro);color:var(--text-sub)}
.w-legend__sub b{color:var(--text);font-size:.8125rem}

/* ---------- Commandes : curseur et boutons ---------- */
.w-ctl{display:grid;gap:6px;min-width:0}
.w-ctl__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.w-ctl__label{font:600 .875rem/1.3 var(--f-text);color:var(--text)}
.w-ctl__val{font-size:1.25rem;line-height:1;color:var(--num)}

.w-range{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:32px;
  margin:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  touch-action:pan-y;
}
.w-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line-strong)}
.w-range::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)}
.w-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  width:24px;
  height:24px;
  margin-top:-10px;
  border-radius:50%;
  background:var(--c-accent);
  border:3px solid var(--c-navy);
}
.w-range::-moz-range-thumb{
  box-sizing:border-box;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--c-accent);
  border:3px solid var(--c-navy);
}
.w-dark .w-range::-webkit-slider-thumb{border-color:var(--c-on-navy)}
.w-dark .w-range::-moz-range-thumb{border-color:var(--c-on-navy)}
.w-range:focus{outline:none}
.w-range:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}

/* Échelle sous le curseur : bornes et repère éventuel (centre du curseur = 12 px + (100 % - 24 px) x f) */
.w-range__scale{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:8px;
  min-height:20px;
  font:600 .75rem/1.3 var(--f-display);
  font-synthesis:none;
  color:var(--text-dim);
}
.w-range__scale--2{min-height:40px}
.w-range__wrap{position:relative}
/* Repère jaune posé sur la piste du curseur (point de bascule) */
.w-range__dot{
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--c-data);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.w-calc__spots{position:relative;height:50px;margin-top:2px}
.w-calc__spot{
  position:absolute;
  bottom:calc(6px + var(--lift,0px));
  transform:translateX(calc(-100% * var(--ax,.5)));
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  white-space:nowrap;
  font:600 .75rem/1.3 var(--f-display);
  font-synthesis:none;
  color:var(--text-sub);
}
.w-calc__spot::after{
  content:"";
  position:absolute;
  left:calc(100% * var(--ax,.5));
  top:calc(100% + 1px);
  width:2px;
  height:calc(6px + var(--lift,0px));
  margin-left:-1px;
  background:currentColor;
}
.w-calc__spot:hover,.w-calc__spot:focus-visible{color:var(--text)}
.w-calc__spot:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.w-range__mark{
  position:absolute;
  top:20px;
  white-space:nowrap;
  font:600 .8125rem/1.3 var(--f-text);
  color:var(--text);
}

.w-seg{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  width:fit-content;
  max-width:100%;
  padding:4px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.w-seg button{
  -webkit-appearance:none;
  appearance:none;
  min-height:40px;
  padding:9px 16px;
  border:0;
  border-radius:7px;
  background:transparent;
  font:600 .875rem/1.2 var(--f-text);
  color:var(--text-sub);
  cursor:pointer;
  transition:background-color var(--t-fast),color var(--t-fast);
}
.w-seg button:hover{color:var(--text)}
.w-seg button[aria-pressed="true"]{background:var(--c-navy);color:var(--c-on-navy)}
.w-dark .w-seg button[aria-pressed="true"]{background:var(--c-accent);color:var(--c-navy)}
.w-seg button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* =====================================================================
   1. frise-reemploi
   ===================================================================== */
.w-frise__bar{fill:var(--c-accent)}
.w-frise__bar--now{fill:var(--c-data)}
.w-svg .w-frise__now{fill:var(--text)}
.w-dark .w-svg .w-frise__now{fill:var(--c-data)}
.w-frise__gap{stroke:var(--c-data);stroke-width:2;stroke-dasharray:5 4}
.w-frise__hatch{stroke:var(--c-data);stroke-width:2}
.w-frise__link{stroke:var(--line-strong);stroke-width:1.25;stroke-dasharray:3 4}

/* =====================================================================
   2. courbe-insee
   ===================================================================== */
.w-courbe-insee{
  --w-carton:var(--c-accent);
  --w-plast:var(--c-navy);
  --w-recyc:var(--c-data);
}
.w-courbe-insee.w-dark{--w-plast:var(--c-on-navy-sub)}
.w-ins__line{fill:none;stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.w-ins__line.w-ins--carton{stroke:var(--w-carton)}
.w-ins__line.w-ins--plast{stroke:var(--w-plast)}
.w-ins__line.w-ins--recyc{stroke:var(--w-recyc);stroke-width:2.75}
.w-ins__dot.w-ins--carton{fill:var(--w-carton)}
.w-ins__dot.w-ins--plast{fill:var(--w-plast)}
.w-ins__dot.w-ins--recyc{fill:var(--w-recyc)}
.w-svg .w-ins__end.w-ins--carton{fill:var(--num)}
.w-svg .w-ins__end.w-ins--plast{fill:var(--text)}
.w-svg .w-ins__end.w-ins--recyc{fill:var(--text)}
.w-dark .w-svg .w-ins__end.w-ins--recyc{fill:var(--c-data)}
.w-ins-sw--carton{background:var(--w-carton)}
.w-ins-sw--plast{background:var(--w-plast)}
.w-ins-sw--recyc{background:var(--w-recyc)}
.w-ins__zone{fill:transparent;pointer-events:all;cursor:crosshair}
.w-ins__hl{stroke:var(--text-sub);stroke-width:1;stroke-dasharray:3 3}
.w-ins__box{fill:var(--surface);stroke:var(--line-strong);stroke-width:1}
.w-legend--ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px}
.w-legend--ins > li{align-items:flex-start}
.w-legend--ins .w-sw{margin-top:4px}
@media (max-width:640px){
  .w-legend--ins{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   3. couts-divergents
   ===================================================================== */
.w-cd__up{fill:none;stroke:var(--text);stroke-width:2.5;stroke-linecap:round}
.w-cd__dn{fill:none;stroke:var(--c-accent);stroke-width:3.25;stroke-linecap:round}
.w-cd__jet{fill:none;stroke:#9AA1A6;stroke-width:2.5;stroke-linecap:round}
.w-cd__end-jet{fill:#9AA1A6}
.w-svg .w-cj{fill:var(--text-sub)}
.w-cd__start{fill:var(--text)}
.w-cd__end-up{fill:var(--text)}
.w-cd__end-dn{fill:var(--c-accent)}

/* =====================================================================
   4. parc-points
   ===================================================================== */
.w-parc__dot{fill:var(--line-strong)}
.w-parc__dot.is-on{fill:var(--c-accent)}
.w-parc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.w-parc-sw--off{background:var(--line-strong)}
.w-parc-sw--on{background:var(--c-accent)}
.w-parc__count{font-size:var(--fs-small);color:var(--text-sub)}
.w-parc__count b{font-size:1.25rem;line-height:1;color:var(--num)}
.w-parc__cap{font:600 1rem/1.45 var(--f-text);color:var(--text)}

/* =====================================================================
   5. cycles
   ===================================================================== */
.w-cyc__out{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
  font-size:var(--fs-body);
  color:var(--text-sub);
}
.w-cyc__item{display:inline-flex;align-items:baseline;gap:8px}
.w-cyc__n{font-size:var(--fs-stat-s);line-height:1;color:var(--num)}
.w-cyc__curve{fill:none;stroke:var(--num);stroke-width:2.75;stroke-linejoin:round;stroke-linecap:round}
.w-cyc__rep{fill:var(--c-data)}
.w-cyc__guide{stroke:var(--text-sub);stroke-width:1;stroke-dasharray:3 4}
.w-cyc__halo{fill:var(--c-accent);fill-opacity:.22}
.w-cyc__dot{fill:var(--c-accent);stroke:var(--c-navy);stroke-width:2}
.w-dark .w-cyc__dot{stroke:var(--c-on-navy)}
.w-cyc__formula{font-size:var(--fs-micro);line-height:1.45;color:var(--text-dim)}

/* =====================================================================
   6. calculatrice
   ===================================================================== */
.w-calculatrice{
  --w-s1:var(--c-navy);
  --w-s2:var(--c-accent);
  --w-s3:var(--c-data);
  --w-su:var(--line-strong);
  --w-s1-ink:var(--c-on-navy);
  --w-su-ink:var(--c-ink);
}
.w-calculatrice.w-dark{
  --w-s1:var(--c-accent-pale);
  --w-s1-ink:var(--c-navy);
  --w-su-ink:var(--c-on-navy);
}
.w-calc__ctl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 28px;align-items:center}
@media (max-width:640px){
  .w-calc__ctl{grid-template-columns:minmax(0,1fr)}
}
.w-calc__unit{font-size:var(--fs-micro);line-height:1.4;color:var(--text-dim)}
.w-calc__s1{fill:var(--w-s1)}
.w-calc__s2{fill:var(--w-s2)}
.w-calc__s3{fill:var(--w-s3)}
.w-calc__su{fill:var(--w-su)}
.w-sw.w-calc__s1{background:var(--w-s1)}
.w-sw.w-calc__s2{background:var(--w-s2)}
.w-sw.w-calc__s3{background:var(--w-s3)}
.w-sw.w-calc__su{background:var(--w-su)}
.w-svg .w-calc__s1-t{fill:var(--w-s1-ink)}
.w-svg .w-calc__s2-t,
.w-svg .w-calc__s3-t{fill:var(--c-navy)}
.w-svg .w-calc__su-t{fill:var(--w-su-ink)}
.w-calc__ref{stroke:var(--text);stroke-width:1.25;stroke-dasharray:5 4}
.w-calc__basc{font-size:var(--fs-small);color:var(--text)}
.w-calc__basc b{color:var(--num)}
.w-calc__uses{font-size:var(--fs-small);color:var(--text-sub)}
.w-calc__uses b{color:var(--text)}
.w-calc__note{font:600 .9375rem/1.5 var(--f-text);color:var(--text);max-width:68ch}

/* =====================================================================
   7. boucle
   ===================================================================== */
.w-bcl__ring{fill:none;stroke:var(--line-strong);stroke-width:2}
.w-bcl__trace{fill:none;stroke:var(--c-accent);stroke-width:3.5}
.w-bcl__chev{fill:none;stroke:var(--text-sub);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.w-bcl__disc{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5;transition:fill .35s ease,stroke .35s ease}
.w-bcl__halo{fill:none;stroke:var(--c-accent);stroke-width:1.5}
.w-svg .w-bcl__no{fill:var(--text-sub);transition:fill .35s ease}
.w-bcl__node.is-on .w-bcl__disc{fill:var(--c-accent);stroke:var(--c-accent)}
.w-svg .w-bcl__node.is-on .w-bcl__no{fill:var(--c-navy)}
.w-svg .w-bcl__tag{fill:var(--text-dim);font-weight:600;transition:fill .35s ease}
.w-svg .w-bcl__tag.is-on{fill:var(--num)}
.w-svg .w-bcl__ctr,
.w-svg .w-bcl__ctr-sub{fill:var(--text-dim);transition:fill .35s ease}
.w-svg .w-bcl__ctr.is-on{fill:var(--text)}
.w-svg .w-bcl__ctr-sub.is-on{fill:var(--num)}
.w-bcl__orbit circle{fill:var(--text)}

/* =====================================================================
   8. compteur-colis (Flux ménager, M1)
   ===================================================================== */
.w-cc{
  display:grid;
  gap:12px;
  justify-items:start;
  min-width:0;
  padding-top:18px;
  border-top:1px solid var(--line-strong);
}
/* la taille est réduite par le JS si la colonne est étroite */
.w-cc__num{
  max-width:100%;
  font-family:var(--f-num);
  font-weight:600;
  font-synthesis:none;
  font-size:var(--fs-stat-xl);
  line-height:1;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--num);
}
.w-cc__label{font:600 var(--fs-lead)/1.4 var(--f-text);color:var(--text);max-width:32ch;text-wrap:pretty}

/* =====================================================================
   9. checkout (Flux ménager, M5) : maquette toujours claire
   ===================================================================== */
.w-co{
  display:grid;
  gap:18px;
  width:100%;
  max-width:560px;
  min-width:0;
  padding:clamp(16px,3vw,28px);
  background:var(--c-paper);
  border:1px solid var(--c-line-strong);
  border-radius:var(--r-card);
  color:var(--c-ink);
  font-family:var(--f-text);
}
.w-co__steps{
  list-style:none;
  margin:0;
  padding:0 0 14px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--c-line);
  font:500 .8125rem/1.2 var(--f-text);
  color:var(--c-dim);
}
.w-co__steps > li{display:inline-flex;align-items:center;gap:7px;min-width:0}
.w-co__steps > li + li::before{content:"";flex:none;width:16px;height:1px;margin-right:1px;background:var(--c-line-strong)}
.w-co__sn{
  flex:none;
  display:inline-grid;
  place-items:center;
  box-sizing:border-box;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1.5px solid var(--c-line-strong);
  font:600 .6875rem/1 var(--f-display);
  font-synthesis:none;
  color:var(--c-dim);
}
.w-co__steps > .is-done .w-co__sn{background:var(--c-navy);border-color:var(--c-navy);color:var(--c-on-navy)}
.w-co__steps > .is-cur{font-weight:600;color:var(--c-ink)}
.w-co__steps > .is-cur .w-co__sn{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-navy)}
.w-co__title{font:700 1.125rem/1.3 var(--f-text);color:var(--c-ink)}
.w-co__opts{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:10px}
.w-co__opt{
  position:relative;
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:14px 16px;
  background:var(--c-paper);
  border:1px solid var(--c-line-strong);
  border-radius:var(--r-card);
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.w-co__opt.is-sel{background:var(--c-accent-soft);border-color:var(--c-accent);box-shadow:inset 0 0 0 1px var(--c-accent)}
.w-co__radio{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-top:1px;
  border-radius:50%;
  border:2px solid #8B9CA6; /* = --btn2-line du fond clair : la maquette reste claire partout */
  background:var(--c-paper);
  transition:border-color .2s ease;
}
.w-co__radio::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--c-navy);
  transform:scale(0);
  transition:transform .22s var(--ease);
}
.w-co__opt.is-sel .w-co__radio{border-color:var(--c-navy)}
.w-co__opt.is-sel .w-co__radio::after{transform:scale(1)}
.w-co__body{display:grid;gap:4px;min-width:0}
.w-co__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.w-co__name{font:600 .9375rem/1.35 var(--f-text);color:var(--c-ink)}
.w-co__sub{font-size:.8125rem;line-height:1.5;color:var(--c-sub)}
.w-co__sub b{font-weight:600;color:var(--c-ink)}
.w-co__badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:var(--c-accent);
  color:var(--c-navy);
  font:700 .6875rem/1 var(--f-text);
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* curseur de sélection : visible seulement pendant son déplacement */
.w-co__cursor{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  display:none;
  border:2px solid var(--c-accent);
  border-radius:var(--r-card);
  pointer-events:none;
}
.w-co__foot{display:flex;justify-content:flex-end}
.w-co__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 22px;
  border-radius:var(--r-btn);
  background:var(--c-accent);
  color:var(--c-navy);
  font:600 .9375rem/1.2 var(--f-text);
}
@media (max-width:480px){
  .w-co__btn{width:100%}
}

/* =====================================================================
   10. tournee (Flux professionnel, P6, section navy)
   ===================================================================== */
.w-tr{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"kpi" "map" "leg" "steps";
  gap:20px;
  min-width:0;
}
.w-tr--wide{
  grid-template-columns:minmax(0,1fr) minmax(240px,300px);
  grid-template-areas:"map kpi" "leg .";
  grid-template-rows:auto auto;
  column-gap:clamp(24px,4vw,48px);
  row-gap:16px;
}
/* compteur en encadré, jamais de filet au-dessus (retour Victor 18/10) */
.w-tr__kpi{grid-area:kpi;display:grid;gap:8px;align-content:start;align-self:start;min-width:0;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.w-tr__map{grid-area:map}
.w-tr__leg{grid-area:leg}
.w-tr__steps{grid-area:steps}
.w-tr--wide .w-tr__steps{align-self:start}
.w-tr__klab{font:600 .9375rem/1.35 var(--f-text);color:var(--text)}
.w-tr__kval{font-size:var(--fs-stat);line-height:1;color:var(--num)}
.w-tr__bar{position:relative;height:6px;margin:4px 0 2px;border-radius:3px;background:var(--line);overflow:hidden}
.w-tr__bar > span{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:3px;background:var(--c-accent)}
.w-tr__kn{font-size:var(--fs-small);line-height:1.4;color:var(--text-sub)}
.w-tr__kn b{font-size:1rem;font-weight:700;color:var(--text)}
.w-tr__kleg{font-size:var(--fs-micro);line-height:1.45;color:var(--text-dim)}
.w-tr__tbc{margin-top:4px}

.w-tr__frame{fill:none;stroke:var(--line-strong);stroke-width:1}
.w-tr__grid{fill:none;stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.w-tr__route{fill:none;stroke:var(--c-accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.w-tr__cli{fill:var(--text-dim)}
.w-tr__sig{fill:var(--text-dim);transition:fill .3s ease}
.w-tr__sig.is-on{fill:var(--c-data)}
.w-tr__halo{fill:none;stroke:var(--c-data);stroke-width:1.5}
.w-tr__halo--rec{stroke:var(--c-accent)}
.w-tr__ring{fill:none;stroke:var(--c-accent);stroke-width:2}
.w-tr__rec{fill:var(--c-accent);stroke:var(--text);stroke-width:2.5}
/* étiquette détourée du fond pour masquer les rues qu'elle croise */
.w-svg .w-tr__lab{paint-order:stroke;stroke:var(--bg-sec);stroke-width:4px;stroke-linejoin:round}

.w-tr-sw--cli{background:var(--text-dim)}
.w-tr-sw--sig{background:var(--c-data)}
.w-tr-sw--rec{background:var(--c-accent);box-shadow:0 0 0 2px var(--text)}
.w-sw.w-tr-sw--route{width:18px;height:3px;border-radius:2px;background:var(--c-accent)}

.w-tr__steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;align-content:start;min-width:0}
.w-tr__step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.w-tr__no{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid var(--line-strong);
  font:600 .8125rem/1 var(--f-display);
  font-synthesis:none;
  color:var(--text-dim);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
.w-tr__sbody{display:grid;gap:2px;min-width:0}
.w-tr__st{font:700 1rem/1.35 var(--f-text);color:var(--text-dim);transition:color .3s ease}
.w-tr__sd{font-size:var(--fs-small);line-height:1.5;color:var(--text-dim);transition:color .3s ease}
.w-tr__step.is-on .w-tr__no{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-navy)}
.w-tr__step.is-on .w-tr__st{color:var(--text)}
.w-tr__step.is-on .w-tr__sd{color:var(--text-sub)}

/* ---------- Mouvement réduit : rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  .w-bcl__disc,.w-svg .w-bcl__no,.w-svg .w-bcl__tag,.w-svg .w-bcl__ctr,.w-svg .w-bcl__ctr-sub,.w-seg button{transition:none}
  .w-bcl__orbit{display:none}
  .w-co__opt,.w-co__radio,.w-co__radio::after,.w-tr__sig,.w-tr__no,.w-tr__st,.w-tr__sd{transition:none}
}

/* Légende de la calculatrice : plus petite et centrée (retour Victor 16/10) */
.w-calc__leg{justify-content:center;gap:6px 18px;font-size:.75rem}
.w-calc__leg .w-sw{width:9px;height:9px}

/* flux-boucle (verrou 2) : boucle à cinq étapes, emballages pleins à l'aller, vides au retour (retour Victor 16/10) */
.w-fx__ring{fill:none;stroke:var(--line-strong);stroke-width:2}
.w-fx__out{fill:none;stroke:var(--c-accent);stroke-width:3;stroke-linecap:round}
.w-fx__node{fill:var(--surface);stroke:var(--text-sub);stroke-width:1.5}
.w-fx__dot{fill:var(--surface);stroke:var(--c-accent);stroke-width:1.75}
.w-fx__dot.is-full{fill:var(--c-accent)}
.w-fx__leg{justify-content:center;font-size:.75rem;gap:6px 18px;margin-top:8px}
.w-fx-sw--full{background:var(--c-accent)}
.w-fx-sw--empty{background:transparent;box-shadow:inset 0 0 0 1.75px var(--c-accent)}

/* flux-boucle : interrupteur « Filière industrialisée » et compteur central */
.w-fx__ctl{display:flex;justify-content:center;margin-bottom:6px}
.w-fx__switch{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border:0;background:none;color:var(--text);font:600 .875rem/1.2 var(--f-text);cursor:pointer;border-radius:999px}
.w-fx__switch:focus-visible{outline:2px solid var(--focus,var(--c-accent));outline-offset:2px}
.w-fx__track{position:relative;width:40px;height:22px;border-radius:999px;background:var(--line-strong);transition:background .25s ease;flex:none}
.w-fx__track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;transition:transform .25s ease}
.w-fx__switch[aria-checked="true"] .w-fx__track{background:var(--c-accent)}
.w-fx__switch[aria-checked="true"] .w-fx__track::after{transform:translateX(18px)}
.w-svg .w-fx__count{fill:var(--num)}
.w-svg .w-fx__countlab{fill:var(--text-sub)}
@media (prefers-reduced-motion:reduce){.w-fx__track,.w-fx__track::after{transition:none}}
/* flux-boucle : curseur taux de retour, emballages perdus, indicateurs */
.w-fx__ctl{flex-wrap:wrap;align-items:center;gap:14px 32px}
.w-fx__rate{width:min(300px,100%)}
/* commandes posées sous le texte de gauche : alignées à gauche, empilées */
.w-fx__ext .w-fx__ctl{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:18px;margin:8px 0 0}
.w-fx__ext .w-fx__switch{padding-left:0}
.w-fx__dot.is-lost{fill:none;stroke:var(--c-data);stroke-width:1.75}
.w-fx-sw--lost{background:transparent;box-shadow:inset 0 0 0 1.75px var(--c-data)}
.w-fx__kpis{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;margin-top:10px;font-size:.875rem;color:var(--text-sub)}
.w-fx__kpis p{margin:0}
.w-fx__kpis b{font-size:1.25rem;color:var(--num);margin-right:2px}


/* P7 - la carte use case est un article, pas un lien, donc ni curseur main ni soulèvement au survol. */
#page-flux-professionnels article.porte{cursor:default}
#page-flux-professionnels article.porte:hover{transform:none;border-color:#FFFFFF24;background:var(--c-navy-2)}


/* P7 - la carte use case est un article, pas un lien, donc ni curseur main ni soulèvement au survol. */
#page-flux-professionnels article.porte{cursor:default}
#page-flux-professionnels article.porte:hover{transform:none;border-color:#FFFFFF24;background:var(--c-navy-2)}

/* Articles du blog (pages blog-*.html, générées par outils/blog.py) */
.article-hero .hero__text{max-width:880px}
.article__kicker{margin:0 0 14px;font:600 var(--fs-kicker)/1.35 var(--f-display);font-synthesis:none;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.article__kicker a{color:inherit;text-decoration:none}
.article__kicker a:hover{text-decoration:underline}
.hero__title.article__h1{font-size:clamp(1.625rem,1rem + 2.4vw,2.875rem);line-height:1.15;text-wrap:balance}
.article{max-width:760px;margin:0 auto;font-size:1.0625rem;line-height:1.7;color:var(--c-ink)}
.article > *{margin:0 0 1.1em}
.article h2{margin:2.2em 0 .6em;font:700 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.3 var(--f-text);text-wrap:balance}
.article h3{margin:1.6em 0 .5em;font:700 1.125rem/1.35 var(--f-text)}
.article ul,.article ol{padding-left:1.3em}
.article li{margin:.3em 0}
.article strong{font-weight:600}
.article a{color:var(--c-accent-ink);text-underline-offset:2px}
.article hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.article__table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.article__table table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.article__table th,.article__table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article__table th{font-weight:700;background:#F2F4F5}
.article__related,.article__sources{margin-top:2.4em;padding:20px 22px;border:1px solid var(--line);border-radius:10px}
.article__related h2,.article__sources h2{margin:0 0 .5em;font-size:1.0625rem}
.article__related ul,.article__sources ul{margin:0;padding-left:1.1em}
.article__sources{font-size:.875rem;line-height:1.55;color:var(--text-sub)}
.article__back{margin-top:2em;font-weight:600}
.article__back a{text-decoration:none}
/* Liste du blog : cartes texte, filtre par thème */
button.blog-chip{cursor:pointer}
button.blog-chip:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.blog-list{margin-top:28px}
.post--text{position:relative;padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--c-paper);transition:border-color .15s}
.post--text:hover{border-color:var(--c-accent)}
.post--text .post__title a{color:inherit;text-decoration:none}
.post--text .post__title a::after{content:"";position:absolute;inset:0;border-radius:10px}
.post--text .post__title a:focus-visible{outline:none}
.post--text:focus-within{outline:2px solid var(--c-accent);outline-offset:2px}
.post__lead{margin:0;font-size:.9375rem;line-height:1.55;color:var(--text-sub)}
.post__more{margin:4px 0 0;font-weight:600;font-size:.9375rem;color:var(--c-accent-ink)}
.post[hidden]{display:none}