/* fonts.css */
/* Polices auto-hébergées (D10). Licence : SIL OFL 1.1, voir src/assets/fonts/LICENCES.md. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-400-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-400-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
/* Jetons de la charte actimat.org (G1) — source : charte/charte.md.
   Formalise la maquette v5. Aucune valeur de couleur, de taille ou de mouvement ailleurs que dans ce fichier. */
:root {
  /* Neutres */
  --noir: #0e0d0b;      --noir-2: #1a1915;   --trait-n: #2c2a24;
  --blanc: #faf8f3;     --blanc-2: #f0ece2;  --trait: #e2dccd;
  --encre: #1b1a17;     --gris: #696558;     --gris-n: #a39e90;
  --papier: #f4f0e6;    --papier-2: #e9e2d0; --ticket: #fbfaf6;
  --pur: #ffffff;       --pur-noir: #000000;

  /* Produits */
  --ac: #1a6fbf;
  --fa: #e0a526;        --fa-texte: #231a02;
  --ka: #16302b;        --menthe: #8ff0a4;   --ka-logo: #1f5a43;
  --kp: #b45309;        --kp-noir: #c75c0a;        --kraft: #c89b62;    --kraft-texte: #3b2610;
  --cl: #6b2d5c;
  --tampon: #2457a6;

  /* Marque « à fournir » */
  --todo-fond: #f6e3c8; --todo-texte: #5a3410;

  /* Voiles et ombres (couleurs à transparence) */
  --voile: rgb(0 0 0 / .45);
  --verre: rgb(250 248 243 / .86);
  --verre-fort: rgb(250 248 243 / .97);
  --survol: rgb(127 127 127 / .14);
  --ombre-capsule: 0 10px 30px -12px rgb(0 0 0 / .35);
  --ombre-menu: 0 20px 40px -16px rgb(0 0 0 / .45);
  --ombre-carte: 0 8px 20px -12px rgb(0 0 0 / .3);
  --ombre-piece: 0 2em 3em -1em rgb(0 0 0 / .55);
  --ombre-piece-haute: 0 3em 6em -1.5em rgb(0 0 0 / .7);

  /* Transparences (G2) : noir, blanc et gris posés sur une image ou un fond de produit */
  --n-90: rgb(0 0 0 / .9);   --n-72: rgb(0 0 0 / .72);  --n-35: rgb(0 0 0 / .35);  --n-25: rgb(0 0 0 / .25);
  --n-15: rgb(0 0 0 / .15);  --n-0: rgb(0 0 0 / 0);      --n-78: rgb(0 0 0 / .78);
  --n-onglet: rgb(20 20 20 / .55);
  --b-86: rgb(255 255 255 / .86);  --b-84: rgb(255 255 255 / .84);  --b-70: rgb(255 255 255 / .7);
  --b-60: rgb(255 255 255 / .6);   --b-10: rgb(255 255 255 / .1);   --b-04: rgb(255 255 255 / .04);
  --gris-12: rgb(127 127 127 / .12);  --gris-16: rgb(127 127 127 / .16);
  --tuile-survol: #57524a;  --point: #c8c1b0;  --trait-piece: #cfc7b3;  --trait-ligne: #ddd5c1;
  --pointille: #b9b19c;  --etiquette-piece: #d8cfb8;
  --kraft-trait: rgb(59 38 16 / .25);  --lampe: rgb(255 214 150 / .22);  --menu-ombre-fine: rgb(0 0 0 / .3);

  /* Fonds de produit : hero, parcours, nouveautés, ambiance */
  --hero-base: #0b1426;
  --hero-ac: radial-gradient(90% 120% at 78% 45%, #2a63a8 0%, #0e2151 55%, #060d1d 100%);
  --hero-fa: radial-gradient(90% 120% at 78% 45%, #c48a12 0%, #5a3c05 55%, #1d1302 100%);
  --hero-ka: radial-gradient(90% 120% at 78% 45%, #2f7a5b 0%, #16302b 55%, #07110f 100%);
  --hero-kp: radial-gradient(90% 120% at 78% 45%, #b8752e 0%, #4a2c10 55%, #170d04 100%);
  --hero-cl: radial-gradient(90% 120% at 78% 45%, #8e3f7b 0%, #3a1632 55%, #12060f 100%);
  --vedette-fond: radial-gradient(120% 90% at 70% 20%, #2a63a8, #0e2151 70%);
  --nouveaute-fond: linear-gradient(135deg, #2b1b0b, #4a2c10 55%, #b45309);
  --ambiance-fond: radial-gradient(70% 90% at 50% 30%, #3a2f1e 0%, #15120d 60%, #0e0d0b 100%);
  --fond-ac: #10284a;  --fond-fa: #3d2c08;  --fond-ka: #0f221e;  --fond-kp: #2b1b0b;  --fond-cl: #2a1224;
  --pale-ac: #dfe8f3;  --pale-fa: #f3ead4;  --pale-cl: #eedfe9;

  /* Polices (auto-hébergées, voir fonts.css) */
  --f-titre: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-texte: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --f-piece: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Échelle de texte (fluide, de 375 à 1280 px) */
  --t-xs: .78rem;  --t-s: .88rem;  --t-base: 1rem;  --t-m: 1.18rem;
  --t-h4: 1.1rem;  --t-h3: clamp(1.9rem, 3.4vw, 3rem);
  --t-h2: clamp(2.1rem, 4.6vw, 3.6rem);
  --t-h1: clamp(2.4rem, 6vw, 5.2rem);
  --interligne: 1.55;  --interligne-titre: .98;
  --largeur-titre: 112%;  --graisse-titre: 850;
  --ligne-max: 58ch;

  /* Espacements */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;  --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px;  --e-9: 96px;
  --gouttiere: 16px;  --largeur-max: 1240px;  --cible-tactile: 44px;

  /* Rayons */
  --r-bouton: 999px;  --r-carte: 12px;  --r-grande: 18px;
  --r-capsule: 16px;  --r-recouvre: 28px;  --r-monogramme: 22%;

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-vif: .2s;  --d-menu: .35s;  --d-apparition: .8s;  --d-slide: .9s;  --d-carrousel: 7s;

  color-scheme: light;
}

/* base.css */
/* Base du site (G2) : remise à zéro, typographie, liens, focus. Valeurs : tokens.css uniquement. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--noir); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noir); color: var(--encre); font-family: var(--f-texte); font-size: var(--t-base); line-height: var(--interligne); overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
.noire :focus-visible, .hero :focus-visible, .temoin :focus-visible, .nouv-grand :focus-visible { outline-color: var(--pur); }
/* Barre transparente posée sur un hero sombre : contour blanc ; redevient bleu sur la capsule claire */
.hdr:not(.claire):not(.colle):not(.ouvert) .barre :focus-visible { outline-color: var(--pur); }
h1, h2, h3, h4 { font-family: var(--f-titre); margin: 0; line-height: var(--interligne-titre); text-wrap: balance; }
p { margin: 0; }

/* Gouttière et largeur : une gouttière par bande, un contenu centré */
.gut { padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px)); padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px)); }
.in { max-width: var(--largeur-max); margin: 0 auto; }

/* Lien d'évitement (clavier) */
.evite { position: absolute; left: var(--e-3); top: -100px; z-index: 100; background: var(--pur); color: var(--encre); padding: var(--e-2) var(--e-4); border-radius: var(--r-bouton); font-weight: 600; }
.evite:focus { top: var(--e-3); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Marque « à fournir » */
.todo { font-family: var(--f-piece); font-size: .76em; background: var(--todo-fond); color: var(--todo-texte); padding: 1px 6px; border-radius: 3px; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Mouvement : coupé si le visiteur le demande, contenu toujours visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv-arme { opacity: 1; transform: none; }
}

/* navigation.css */
/* Boutons, monogrammes, barre du haut, menus en panneaux, lanceur, tiroir mobile (G2). */

/* ===== Boutons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 12px 22px; min-height: var(--cible-tactile); border-radius: var(--r-bouton); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--d-vif), color var(--d-vif), border-color var(--d-vif); }
.btn-blanc { background: var(--pur); color: var(--encre); }
.btn-blanc:hover { background: var(--papier-2); }
.btn-noir { background: var(--encre); color: var(--pur); }
.btn-noir:hover { background: var(--pur-noir); }
.btn-ligne { border-color: currentColor; background: transparent; }
.btn-ligne:hover { background: var(--gris-12); }
.btn-sm { padding: 8px 16px; font-size: var(--t-s); min-height: 36px; }

/* ===== Monogramme ===== */
.tile { display: inline-grid; place-items: center; width: var(--s, 22px); aspect-ratio: 1 / 1; border-radius: var(--r-monogramme); font-family: var(--f-titre); font-weight: 800; font-size: calc(var(--s, 22px) * .44); letter-spacing: -.03em; flex-shrink: 0; }
.t-ac { background: var(--ac); color: var(--pur); }
.t-fa { background: var(--fa); color: var(--fa-texte); }
.t-ka { background: var(--ka); color: var(--menthe); }
.t-kp { background: var(--kp); color: var(--pur); }
.t-cl { background: var(--cl); color: var(--pur); }
.t-neutre { background: var(--encre); color: var(--pur); }
.t-blanc { background: var(--pur); color: var(--encre); }

/* ===== Barre du haut : devient capsule au défilement ===== */
.hdr { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; padding: 0; transition: padding var(--d-menu) var(--ease); }
.hdr .capsule { position: relative; margin: 0 auto; transition: background var(--d-menu) var(--ease), border-radius var(--d-menu) var(--ease), box-shadow var(--d-menu) var(--ease), color var(--d-menu) var(--ease); color: var(--pur); border-radius: 0; }
.hdr .barre { display: flex; align-items: center; gap: 28px; height: 64px; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); transition: height var(--d-menu) var(--ease); }
.hdr.colle, .hdr.ouvert { padding: 8px max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); }
.hdr.colle .capsule, .hdr.ouvert .capsule { background: var(--verre); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); color: var(--encre); border-radius: var(--r-capsule); box-shadow: var(--ombre-capsule); }
.hdr.colle .barre { height: 56px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--f-titre); font-weight: 800; font-stretch: 112%; font-size: 1.28rem; letter-spacing: -.01em; }
.logo i { display: inline-block; width: 20px; height: 20px; border-radius: 3px; background:
  linear-gradient(var(--ac) 0 0) 0 0 / 50% 50% no-repeat, linear-gradient(var(--fa) 0 0) 100% 0 / 50% 50% no-repeat,
  linear-gradient(var(--ka-logo) 0 0) 0 100% / 50% 50% no-repeat, linear-gradient(var(--cl) 0 0) 100% 100% / 50% 50% no-repeat; }
.nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav button, .nav a { background: none; border: 0; cursor: pointer; font-size: .9rem; font-weight: 500; padding: 8px 10px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav button::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; transition: transform var(--d-vif); }
.nav button[aria-expanded="true"] { font-weight: 700; }
.nav button[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-1px); }
.nav button:hover, .nav a:hover { background: var(--survol); }
.droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ico { width: var(--cible-tactile); height: var(--cible-tactile); display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.ico:hover { background: var(--gris-16); }
.hdr .btn-co { border: 1.5px solid currentColor; background: transparent; color: inherit; padding: 7px 16px; font-size: var(--t-s); }
.burger { display: none; }

/* ===== Panneaux de menu ===== */
.panneaux { overflow: hidden; height: 0; transition: height var(--d-menu) var(--ease); }
.panneau { display: none; padding: 4px 12px 14px; }
.panneau.actif { display: block; animation: monte .3s var(--ease); }
@keyframes monte { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.carte-m { background: var(--pur); border-radius: var(--r-carte); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.carte-m h4 { font-size: var(--t-h4); font-weight: 800; font-stretch: 108%; margin-bottom: 8px; }
.carte-m ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--t-s); }
.carte-m a { text-decoration: none; }
.carte-m a:hover { text-decoration: underline; }
.carte-m .pied { margin-top: auto; padding-top: 14px; }
.carte-m .pied .btn { width: 100%; }
.m-produits { display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
.m-tabs { display: grid; gap: 6px; align-content: start; }
.m-tabs button { text-align: left; border: 0; background: var(--b-70); border-radius: var(--r-bouton); padding: 8px 14px; font-size: var(--t-s); font-weight: 600; cursor: pointer; }
.m-tabs button[aria-selected="true"] { background: var(--encre); color: var(--pur); }
.m-tabs a { font-size: var(--t-s); font-weight: 700; padding: 8px 14px; text-decoration: none; }
.m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.m-prod { background: var(--pur); border-radius: var(--r-carte); padding: 16px; text-decoration: none; display: grid; gap: 6px; align-content: start; min-height: 112px; transition: transform var(--d-vif) var(--ease), box-shadow var(--d-vif); }
.m-prod:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.m-prod b { font-family: var(--f-titre); font-weight: 800; font-stretch: 108%; font-size: 1.02rem; margin-top: 6px; }
.m-prod span.d { font-size: .82rem; color: var(--gris); }
.m-prod[hidden] { display: none; }
.cas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cas .carte-m small { font-size: .74rem; color: var(--gris); font-weight: 600; }
.cas .carte-m h4 { font-size: 1.15rem; margin: 4px 0; }
.cas .carte-m p { font-size: .84rem; color: var(--gris); }
.cas .carte-m .voir { font-size: .82rem; font-weight: 700; text-decoration: none; margin-top: 4px; }
.sol { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; }
.vedette { border-radius: var(--r-carte); overflow: hidden; position: relative; min-height: 220px; background: var(--vedette-fond); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px; color: var(--pur); }
.vedette .piece { position: absolute; right: 8%; top: 10%; font-size: 8px; transform: rotate(-6deg); box-shadow: var(--ombre-piece-haute); }
.vedette b { font-family: var(--f-titre); font-stretch: 110%; font-size: 1.2rem; position: relative; }
.vedette .btn { position: relative; }
.quatre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.deux-col { columns: 2; column-gap: 18px; display: block !important; }
.deux-col li { break-inside: avoid; margin-bottom: 7px; }
.note-m { font-size: .78rem; color: var(--gris); padding: 10px 4px 0; }

/* ===== Lanceur d'applications ===== */
.lanceur { position: absolute; right: 12px; top: calc(100% + 8px); width: 300px; max-width: calc(100vw - 24px); background: var(--verre-fort); backdrop-filter: blur(18px); border-radius: 16px; box-shadow: var(--ombre-menu); padding: 14px; color: var(--encre); display: none; }
.lanceur.actif { display: block; animation: monte .25s var(--ease); }
.lanceur h4 { font-size: .8rem; font-family: var(--f-piece); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin: 4px 6px 10px; }
.lanceur .apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.lanceur a { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; text-decoration: none; font-size: .8rem; font-weight: 600; }
.lanceur a:hover { background: var(--pur); }

/* ===== Voile et tiroir mobile ===== */
.voile { position: fixed; inset: 0; z-index: 40; background: var(--voile); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.voile.actif { opacity: 1; pointer-events: auto; }
#tiroir { display: none; }

@media (max-width: 1180px) { .cas { grid-template-columns: repeat(3, 1fr); } .m-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1080px) {
  .nav, .droite .ico.cherche { display: none; }
  .burger { display: inline-grid; }
  #tiroir.actif { display: block; max-height: calc(100vh - 90px); overflow-y: auto; padding: 4px 14px 16px; }
  #tiroir details { border-top: 1px solid var(--trait); }
  #tiroir summary { list-style: none; cursor: pointer; padding: 14px 4px; min-height: var(--cible-tactile); font-weight: 700; display: flex; justify-content: space-between; }
  #tiroir summary::-webkit-details-marker { display: none; }
  #tiroir summary::after { content: "+"; font-weight: 400; }
  #tiroir details[open] summary::after { content: "–"; }
  #tiroir ul { list-style: none; margin: 0 0 12px; padding: 0 4px; display: grid; gap: 10px; font-size: .95rem; }
  #tiroir a { text-decoration: none; }
  #tiroir .bas-t { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid var(--trait); }
}
@media (max-width: 760px) {
  .m-produits, .sol, .quatre { grid-template-columns: 1fr; }
  .m-grid, .cas { grid-template-columns: 1fr; }
  .m-tabs { display: flex; overflow-x: auto; gap: 6px; }
  .m-tabs button, .m-tabs a { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 420px) { .hdr .btn-co { display: none; } }
@media (max-width: 600px) { .btn-bloc { width: 100%; } }

/* pieces.css */
/* Les pièces produites par les logiciels, dessinées en HTML + CSS (G2). Tout est en em : la taille se règle par font-size du parent.
   Données toujours fictives (voir les gabarits de pièces). */
.piece { font-family: var(--f-piece); color: var(--encre); background: var(--papier); text-align: left; line-height: 1.35; position: relative; flex-shrink: 0; }
.piece .muted { color: var(--gris); }
.piece table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.piece th, .piece td { border: 1px solid var(--trait-piece); padding: .32em .45em; font-size: .78em; text-align: left; }
.piece th { background: var(--papier-2); font-weight: 600; }
.piece td.n { text-align: right; }
.piece .pt { font-size: .72em; margin-bottom: .7em; }
.tampon { position: absolute; border: .18em solid var(--tampon); color: var(--tampon); border-radius: 50%; width: 6.4em; height: 6.4em; display: grid; place-items: center; text-align: center; font-weight: 600; font-size: .72em; letter-spacing: .08em; transform: rotate(-14deg); opacity: .78; box-shadow: inset 0 0 0 .3em var(--papier), inset 0 0 0 .42em var(--tampon); }

/* Fiche de stock (Actimat) */
.fiche { width: 23em; padding: 1.3em 1.3em 1.6em; border-top: .45em solid var(--ac); }
.fiche .ent { display: flex; justify-content: space-between; gap: 1em; font-size: .62em; text-transform: uppercase; letter-spacing: .06em; border-bottom: .2em double var(--encre); padding-bottom: .7em; margin-bottom: .9em; }
.fiche .tit { font-family: var(--f-titre); font-stretch: 115%; font-weight: 800; font-size: 1.15em; text-align: center; }
.fiche .tit small { display: block; font-family: var(--f-texte); font-weight: 400; font-style: italic; font-size: .62em; color: var(--gris); margin-bottom: .8em; }
.fiche .tampon { right: 1em; bottom: 1.2em; }

/* Ticket de caisse (Fasika) */
.ticket { width: 15em; padding: 1.4em 1.2em 2em; background: var(--ticket); --dent: .7em;
  -webkit-mask: linear-gradient(var(--pur-noir) 0 0) top / 100% calc(100% - var(--dent)) no-repeat, conic-gradient(from -45deg at bottom, transparent, var(--pur-noir) 1deg 89deg, transparent 90deg) bottom / calc(var(--dent) * 2) var(--dent) repeat-x;
          mask: linear-gradient(var(--pur-noir) 0 0) top / 100% calc(100% - var(--dent)) no-repeat, conic-gradient(from -45deg at bottom, transparent, var(--pur-noir) 1deg 89deg, transparent 90deg) bottom / calc(var(--dent) * 2) var(--dent) repeat-x; }
.ticket .c { text-align: center; font-size: .75em; }
.ticket .nom { font-family: var(--f-titre); font-stretch: 110%; font-weight: 800; font-size: 1.25em; text-align: center; letter-spacing: .02em; }
.ticket .l { display: flex; justify-content: space-between; gap: 1em; font-size: .78em; padding-block: .25em; }
.ticket hr { border: 0; border-top: .12em dashed var(--pointille); margin: .6em 0; }
.ticket .tot { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.05em; }
.ticket .band { height: .4em; background: var(--fa); margin: -1.4em -1.2em 1.1em; }

/* Bulletin de notes (Kalara) */
.bulletin { width: 22em; padding: 0 0 1.3em; }
.bulletin .bandeau { background: var(--ka); color: var(--menthe); padding: .9em 1.2em; display: flex; justify-content: space-between; align-items: baseline; font-size: .7em; text-transform: uppercase; letter-spacing: .08em; }
.bulletin .bandeau b { font-family: var(--f-titre); font-stretch: 112%; font-size: 1.5em; letter-spacing: 0; text-transform: none; }
.bulletin .corps { padding: 1em 1.2em 0; }
.bulletin .moy { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9em; font-size: .8em; }
.bulletin .moy b { font-family: var(--f-titre); font-size: 1.9em; font-stretch: 110%; }

/* Chemise d'archives (KUP) */
.chemise { width: 21em; height: 25em; background: var(--kraft); color: var(--kraft-texte); padding: 3.2em 1.4em 1.4em; margin-top: 2em; background-image: repeating-linear-gradient(115deg, var(--b-04) 0 .2em, transparent .2em .55em); }
.chemise::before { content: ""; position: absolute; top: -1.6em; left: 0; width: 9em; height: 1.7em; background: var(--kraft); border-radius: .4em .4em 0 0; }
.chemise .etiq { background: var(--ticket); color: var(--encre); padding: .8em 1em; border: 1px solid var(--etiquette-piece); transform: rotate(-1.5deg); }
.chemise .etiq b { display: block; font-family: var(--f-titre); font-stretch: 105%; font-size: 1.2em; margin-block: .2em; }
.chemise .lst { margin-top: 1.4em; display: grid; gap: .45em; font-size: .78em; }
.chemise .lst span { display: flex; justify-content: space-between; border-bottom: 1px solid var(--kraft-trait); padding-bottom: .3em; }
.chemise .sceau { position: absolute; right: 1.2em; bottom: 1.2em; font-size: .62em; letter-spacing: .1em; text-transform: uppercase; border: .15em solid var(--kraft-texte); padding: .4em .7em; transform: rotate(6deg); opacity: .7; }

/* Bulletin de paie (Clergo) */
.paie { width: 21em; padding: 1.2em 1.3em 1.4em; border-left: .5em solid var(--cl); }
.paie .tit { font-family: var(--f-titre); font-stretch: 112%; font-weight: 800; font-size: 1.1em; }
.paie .l { display: flex; justify-content: space-between; font-size: .8em; padding-block: .35em; border-bottom: 1px solid var(--trait-ligne); }
.paie .net { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9em; background: var(--cl); color: var(--pur); padding: .6em .8em; }
.paie .net b { font-family: var(--f-titre); font-stretch: 110%; font-size: 1.3em; }

/* sections.css */
/* Sections de page (G2) : hero en carrousel, section claire qui recouvre le hero, parcours, nouveautés,
   témoignages, section noire à grille décalée, équipe, pied de page, apparitions au défilement. */

/* ===== Hero : carrousel plein écran à onglets ===== */
.hero { position: sticky; top: 0; height: max(640px, 100vh); z-index: 0; overflow: hidden; color: var(--pur); background: var(--hero-base); }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-slide) var(--ease); background: var(--bg); }
.slide.actif { opacity: 1; z-index: 1; }
.slide-ac { --bg: var(--hero-ac); } .slide-fa { --bg: var(--hero-fa); } .slide-ka { --bg: var(--hero-ka); } .slide-kp { --bg: var(--hero-kp); } .slide-cl { --bg: var(--hero-cl); }
.slide .scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 7vw; font-size: clamp(9px, 1.35vw, 19px); }
.slide .scene .piece { transform: rotate(var(--r, -6deg)) scale(.96); transition: transform var(--d-carrousel) linear; box-shadow: var(--ombre-piece-haute); }
.slide.actif .scene .piece { transform: rotate(var(--r, -6deg)) scale(1.06); }
.slide .scene .ombre { position: absolute; inset: 0; background: linear-gradient(90deg, var(--n-72) 0%, var(--n-35) 45%, var(--n-0) 70%); }
.slide .txt { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); z-index: 2; }
.slide .txt .in { padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
.eyebrow { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 10px; }
.slide h1, .slide h2.h1 { font-weight: var(--graisse-titre); font-stretch: var(--largeur-titre); font-size: var(--t-h1); letter-spacing: -.035em; max-width: 12ch; margin: 18px 0 20px; }
.slide p { font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 40ch; color: var(--b-86); }
.slide .ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.slide.actif .txt > .in > * { animation: entre var(--d-apparition) var(--ease) both; }
.slide.actif .txt > .in > :nth-child(2) { animation-delay: .08s; }
.slide.actif .txt > .in > :nth-child(3) { animation-delay: .16s; }
.slide.actif .txt > .in > :nth-child(4) { animation-delay: .24s; }
@keyframes entre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.onglets-h { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 3; }
.onglets-h .in { display: flex; gap: 8px; align-items: center; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
.oh { flex: 1 1 0; max-width: 220px; min-width: 0; min-height: var(--cible-tactile); display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; border: 0; border-radius: 10px; background: var(--n-onglet); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--pur); cursor: pointer; text-align: left; font-size: .84rem; font-weight: 600; position: relative; overflow: hidden; }
.oh span.l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.oh::after { content: "›"; font-size: 1.1rem; opacity: .7; }
.oh .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: currentColor; }
.oh[aria-selected="true"] { background: var(--pur); color: var(--encre); }
.oh[aria-selected="true"] .prog { animation: prog var(--d-carrousel) linear forwards; }
.hero.pause .oh[aria-selected="true"] .prog { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
.pause-btn { margin-left: auto; width: var(--cible-tactile); height: var(--cible-tactile); border-radius: 50%; border: 0; background: var(--n-onglet); backdrop-filter: blur(12px); color: var(--pur); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
@media (max-width: 760px) {
  .slide .scene { justify-content: center; align-items: flex-start; padding: 100px 0 0; font-size: 9px; }
  .slide .scene .ombre { background: linear-gradient(0deg, var(--n-90) 38%, var(--n-15) 78%); }
  .slide .txt { top: auto; bottom: 130px; transform: none; }
  .slide h1, .slide h2.h1 { font-size: 2.2rem; margin: 12px 0; }
  .slide p { font-size: .98rem; }
  .onglets-h { bottom: 40px; }
  .onglets-h .in { overflow-x: auto; scrollbar-width: none; }
  .oh { flex: 0 0 auto; max-width: none; }
}

/* ===== Section claire qui recouvre le hero ===== */
.dessus { position: relative; z-index: 2; background: var(--blanc); border-radius: var(--r-recouvre) var(--r-recouvre) 0 0; margin-top: -28px; }
.sec { padding-block: var(--e-9) var(--e-5); }
.titre-sec { text-align: center; display: grid; gap: 14px; justify-items: center; margin-bottom: 44px; }
.titre-sec .sur { font-size: .85rem; font-weight: 600; color: var(--gris); }
.titre-sec h2 { font-size: var(--t-h2); font-weight: var(--graisse-titre); font-stretch: var(--largeur-titre); letter-spacing: -.03em; }
.titre-sec p { max-width: var(--ligne-max); color: var(--gris); font-size: 1.05rem; }

/* Cinq parcours */
.parcours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.parc { background: var(--blanc-2); border-radius: var(--r-grande); overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; text-decoration: none; min-width: 0; transition: transform .35s var(--ease); }
.parc:hover { transform: translateY(-4px); }
.parc .tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: var(--t-s); font-weight: 600; }
.parc .vis { aspect-ratio: 3 / 4; max-width: 100%; background: var(--fond); display: flex; justify-content: center; align-items: center; overflow: hidden; font-size: 8px; }
.parc .vis .piece { transform: rotate(-4deg); transition: transform .5s var(--ease); box-shadow: var(--ombre-piece); }
.parc:hover .vis .piece { transform: rotate(0) scale(1.05); }
.parc .bas-c { padding: 16px; display: grid; gap: 4px; align-content: start; }
.parc .bas-c b { font-size: .95rem; }
.parc .bas-c span { font-size: var(--t-s); color: var(--gris); }
.f-ac { --fond: var(--fond-ac); } .f-fa { --fond: var(--fond-fa); } .f-ka { --fond: var(--fond-ka); } .f-kp { --fond: var(--fond-kp); } .f-cl { --fond: var(--fond-cl); }
.p-ac { --fond: var(--pale-ac); } .p-fa { --fond: var(--pale-fa); } .p-cl { --fond: var(--pale-cl); }
@media (max-width: 1080px) { .parcours { grid-template-columns: repeat(5, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .parc { scroll-snap-align: start; } }
@media (min-width: 620px) and (max-width: 1080px) { .parcours { grid-template-columns: repeat(5, 38%); } }

/* Nouveautés */
.nouv-grand { border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.15fr; min-height: 440px; background: var(--nouveaute-fond); color: var(--pur); }
.nouv-grand .gauche { padding: 48px; display: grid; gap: 18px; align-content: center; }
.nouv-grand h3 { font-size: var(--t-h3); font-weight: var(--graisse-titre); font-stretch: 110%; letter-spacing: -.025em; }
.nouv-grand p { color: var(--b-84); max-width: 44ch; }
.nouv-grand .droite-n { background: var(--n-25); padding: 40px; display: grid; gap: 12px; align-content: center; min-width: 0; }
.recherche { background: var(--ticket); color: var(--encre); font-family: var(--f-piece); font-size: .95rem; padding: 14px 18px; border-radius: var(--r-bouton); display: flex; gap: 10px; align-items: center; min-width: 0; box-shadow: var(--ombre-menu); }
.recherche .tape { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curseur { width: 2px; height: 1.1em; background: var(--kp); animation: clign 1s steps(1) infinite; flex-shrink: 0; }
@keyframes clign { 50% { opacity: 0; } }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes span { font-family: var(--f-piece); font-size: .8rem; background: var(--kraft); color: var(--kraft-texte); padding: 5px 12px; border-radius: var(--r-bouton); }
.resultats { display: grid; gap: 8px; }
.resultats div { display: flex; align-items: center; gap: 12px; background: var(--b-10); border-radius: var(--r-carte); padding: 10px 12px; font-size: .9rem; }
.resultats i { width: 26px; height: 34px; background: var(--ticket); flex-shrink: 0; border-radius: 2px; }
.resultats small { display: block; color: var(--b-60); font-size: var(--t-xs); }
.legende-n { font-size: .82rem; color: var(--gris); display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px 0; }
.legende-n b { color: var(--encre); }
.legende-n a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.trois > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
.trois .vis { border-radius: var(--r-grande); aspect-ratio: 4 / 3; max-width: 100%; background: var(--fond); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 8.5px; }
.trois .vis .piece { box-shadow: var(--ombre-piece); transform: rotate(var(--r, 3deg)); }
.trois b { font-size: 1.02rem; }
.trois p { font-size: .9rem; color: var(--gris); }
.trois a { font-size: .88rem; font-weight: 700; text-decoration: none; }
@media (max-width: 900px) { .nouv-grand { grid-template-columns: 1fr; } .nouv-grand .gauche, .nouv-grand .droite-n { padding: 28px 22px; } .trois { grid-template-columns: 1fr; } }

/* ===== Carrousel de témoignages (vide tant qu'aucun accord écrit) ===== */
.temoins { padding-block: 72px var(--e-9); overflow: hidden; }
.piste { display: flex; gap: 20px; transition: transform .7s var(--ease); }
.temoin { flex: 0 0 min(1100px, 86vw); height: min(520px, 70vh); min-height: 380px; border-radius: 24px; position: relative; overflow: hidden; background: var(--fond); color: var(--pur); display: flex; align-items: center; }
.temoin .scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 6%; font-size: clamp(7px, 1.1vw, 14px); }
.temoin .scene .piece { transform: rotate(5deg); box-shadow: var(--ombre-piece-haute); }
.temoin .ombre { position: absolute; inset: 0; background: linear-gradient(90deg, var(--n-78), var(--n-15) 75%); }
.temoin .cit { position: relative; padding: 48px; max-width: 34em; display: grid; gap: 16px; }
.temoin blockquote { margin: 0; font-family: var(--f-titre); font-weight: 800; font-stretch: 108%; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; }
.temoin .qui { font-size: .9rem; }
.temoin .qui b { display: block; }
.t-ac-f { --fond: var(--hero-ac); } .t-ka-f { --fond: var(--hero-ka); } .t-fa-f { --fond: var(--hero-fa); }
.ctrl-t { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
.ctrl-t button.fl { width: var(--cible-tactile); height: var(--cible-tactile); border-radius: 50%; border: 1.5px solid var(--encre); background: transparent; cursor: pointer; font-size: 1.1rem; }
.points { display: flex; gap: 8px; }
.points button { width: 8px; height: 8px; border-radius: var(--r-bouton); border: 0; padding: 0; background: var(--point); cursor: pointer; transition: width .3s; position: relative; }
.points button::before { content: ""; position: absolute; inset: -18px -6px; }
.points button[aria-current="true"] { width: 24px; background: var(--encre); }
@media (max-width: 620px) { .temoin .cit { padding: 26px; } .temoin .scene { opacity: .45; } }

/* ===== Section noire à grille décalée ===== */
.noire { background: var(--noir); color: var(--pur); padding-block: 110px 120px; position: relative; z-index: 2; overflow: hidden; }
.noire .titre-sec p { color: var(--gris-n); }
.ambiance { margin: 56px auto 0; width: min(var(--largeur-max), calc(100% - 32px)); border-radius: 26px; overflow: hidden; position: relative; aspect-ratio: 16 / 7; background: var(--ambiance-fond); transform: scale(var(--k, .86)); }
.ambiance .table { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 6%; font-size: clamp(5px, .95vw, 12.5px); }
.ambiance .table > * { margin-inline: -2em; box-shadow: 0 2.4em 4em -1.4em var(--n-90); }
.ambiance .table > :nth-child(1) { transform: rotate(-10deg) translateY(2em); }
.ambiance .table > :nth-child(2) { transform: rotate(-4deg); z-index: 2; }
.ambiance .table > :nth-child(3) { transform: rotate(1deg) translateY(-.6em); z-index: 3; }
.ambiance .table > :nth-child(4) { transform: rotate(5deg); z-index: 2; }
.ambiance .table > :nth-child(5) { transform: rotate(10deg) translateY(2em); }
.ambiance .lampe { position: absolute; left: 50%; top: -30%; width: 70%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--lampe), transparent); pointer-events: none; }
.decale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; align-items: start; }
.decale .col { display: grid; gap: 16px; }
.decale .col:nth-child(2) { margin-top: 70px; }
.decale .col:nth-child(3) { margin-top: 140px; }
.tuile { background: var(--noir-2); border: 1px solid var(--trait-n); border-radius: var(--r-grande); padding: 22px; min-height: 230px; display: grid; align-content: space-between; gap: 30px; text-decoration: none; transition: border-color .3s, transform .4s var(--ease); }
.tuile:hover { border-color: var(--tuile-survol); transform: translateY(-4px); }
.tuile b { font-family: var(--f-titre); font-weight: 800; font-stretch: 110%; font-size: 1.35rem; display: block; margin-bottom: 6px; }
.tuile span.d { color: var(--gris-n); font-size: .9rem; }
@media (max-width: 860px) { .decale { grid-template-columns: 1fr; } .decale .col:nth-child(n) { margin-top: 0; } .ambiance { aspect-ratio: 4 / 3; } .tuile { min-height: 0; } }

/* ===== Équipe et pied de page ===== */
.equipe { background: var(--blanc); position: relative; z-index: 2; padding-block: 88px var(--e-8); }
.equipe .in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.equipe h2 { font-size: var(--t-h3); font-weight: var(--graisse-titre); font-stretch: var(--largeur-titre); letter-spacing: -.02em; margin-bottom: 16px; }
.equipe p { color: var(--gris); font-size: 1.08rem; max-width: 46ch; }
.equipe dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 0; align-content: start; }
.equipe dt { color: var(--gris); font-family: var(--f-piece); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
.equipe dd { margin: 0; }
.pied-page { background: var(--blanc-2); position: relative; z-index: 2; padding-block: 56px 40px; font-size: .9rem; }
.cols { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 28px; }
.cols h4 { font-family: var(--f-texte); font-weight: 700; font-size: .9rem; margin: 0 0 14px; }
.cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: var(--gris); }
.cols a { text-decoration: none; }
.cols a:hover { color: var(--encre); text-decoration: underline; }
.langue { display: inline-flex; border: 1.5px solid var(--encre); border-radius: var(--r-bouton); overflow: hidden; font-size: .82rem; font-weight: 600; }
.langue b, .langue a { padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center; text-decoration: none; }
.langue b { background: var(--encre); color: var(--pur); }
.bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--trait); margin-top: 40px; padding-top: 20px; color: var(--gris); font-size: .82rem; }
@media (max-width: 960px) { .cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cols { grid-template-columns: 1fr 1fr; } .equipe .in { grid-template-columns: 1fr; gap: 28px; } }

/* ===== Apparitions au défilement : visibles par défaut, armées seulement par le script ===== */
.rv-arme { opacity: 0; transform: translateY(40px); }
.rv-vu { opacity: 1; transform: none; transition: opacity var(--d-apparition) var(--ease), transform var(--d-apparition) var(--ease); transition-delay: var(--d, 0s); }
.nouv-grand .eyebrow .tile { --s: 26px; }
.recherche svg { flex-shrink: 0; }
.trois > div:nth-child(2) { --d: .1s; } .trois > div:nth-child(3) { --d: .2s; }
.trois > div:nth-child(2) .vis { --r: -3deg; } .trois > div:nth-child(3) .vis { --r: 2deg; }

/* pages.css */
/* Composants des pages intérieures (G2) : en-tête de page, fil d'Ariane, FAQ, tableau comparatif, formulaire. */

/* En-tête de page intérieure : fond papier, la barre reste lisible (classe .hdr.claire posée par le gabarit) */
.hdr.claire .capsule { color: var(--encre); }
.page-tete { background: var(--blanc); padding-block: 120px var(--e-7); }
.page-tete h1 { font-size: var(--t-h2); font-weight: var(--graisse-titre); font-stretch: var(--largeur-titre); letter-spacing: -.03em; max-width: 18ch; margin-top: var(--e-4); }
.page-tete p { color: var(--gris); font-size: var(--t-m); max-width: var(--ligne-max); margin-top: var(--e-4); }
.page-corps { background: var(--blanc); padding-block: 0 var(--e-9); }

/* Fil d'Ariane */
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--t-s); color: var(--gris); }
.ariane li + li::before { content: "›"; margin-right: 10px; }
.ariane a { text-decoration: none; }
.ariane a:hover { text-decoration: underline; }
.ariane [aria-current="page"] { color: var(--encre); font-weight: 600; }

/* FAQ en <details> */
.faq { display: grid; max-width: 760px; }
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 4px; min-height: var(--cible-tactile); font-family: var(--f-titre); font-weight: 800; font-stretch: 108%; font-size: var(--t-h4); display: flex; justify-content: space-between; gap: var(--e-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq .rep { padding: 0 4px 20px; color: var(--gris); max-width: var(--ligne-max); }

/* Tableau comparatif : rendu en cartes sous 600 px (chaque cellule porte data-l = son intitulé de colonne) */
.defile { overflow-x: auto; }
.comparatif { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.comparatif th, .comparatif td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.comparatif thead th { font-family: var(--f-piece); font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.comparatif tbody th { font-weight: 700; }
@media (max-width: 600px) {
  .comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; }
  .comparatif tr { background: var(--blanc-2); border-radius: var(--r-carte); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-3); }
  .comparatif th, .comparatif td { border: 0; padding: 6px 0; }
  .comparatif td[data-l]::before { content: attr(data-l); display: block; font-family: var(--f-piece); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
}

/* Formulaire de contact et de démonstration */
.form { display: grid; gap: var(--e-4); max-width: 560px; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: var(--t-s); }
.champ input, .champ select, .champ textarea { font: inherit; color: var(--encre); background: var(--pur); border: 1.5px solid var(--gris-n); border-radius: var(--r-carte); padding: 12px 14px; min-height: var(--cible-tactile); width: 100%; }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-color: var(--ac); }
.champ [aria-invalid="true"] { border-color: var(--kp); }
.champ .aide { font-size: var(--t-xs); color: var(--gris); }
.champ .erreur { font-size: var(--t-xs); color: var(--kp); font-weight: 600; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-retour { font-size: var(--t-s); min-height: 1.5em; }
.form-retour.ok { color: var(--ka); font-weight: 600; }
.form-retour.erreur { color: var(--kp); font-weight: 600; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 600px) { .form .btn { width: 100%; } }

/* Corps de texte des pages Markdown */
.texte-page { max-width: var(--ligne-max); }
.texte-page > * + * { margin-top: var(--e-4); }
.texte-page h2 { font-size: var(--t-h3); font-weight: var(--graisse-titre); font-stretch: var(--largeur-titre); letter-spacing: -.025em; margin-top: var(--e-7); }
.texte-page h3 { font-size: var(--t-h4); font-weight: 800; font-stretch: 108%; margin-top: var(--e-6); }
.texte-page ul, .texte-page ol { padding-left: 1.2em; display: grid; gap: var(--e-2); }
.texte-page a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Pages au format du guide (T7) : un composant par bloc <!-- bloc: … --> =====
   Hero sombre à la couleur du produit (mêmes fonds que le carrousel) et sa pièce, section claire qui le recouvre. */
.a-ac { --accent: var(--ac); } .a-fa { --accent: var(--fa); } .a-ka { --accent: var(--ka); } .a-kp { --accent: var(--kp); } .a-cl { --accent: var(--cl); }
.p-hero { position: relative; overflow: hidden; color: var(--pur); background: var(--bg, var(--noir)); padding-block: 132px calc(var(--e-9) + var(--r-recouvre)); min-height: min(640px, 88vh); display: flex; align-items: center; }
.p-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--n-72) 0%, var(--n-35) 45%, var(--n-0) 70%); }
.p-hero > .in { position: relative; z-index: 2; width: 100%; }
.p-hero.avec-piece > .in > * { max-width: min(46rem, 58%); }
.p-hero .ariane ol { color: var(--b-86); }
.p-hero .ariane [aria-current="page"] { color: var(--pur); }
.p-hero :focus-visible { outline-color: var(--pur); }
.p-hero .eyebrow { margin-top: var(--e-6); }
.p-hero .eyebrow .tile { --s: 26px; }
.p-hero h1 { font-weight: var(--graisse-titre); font-stretch: var(--largeur-titre); font-size: var(--t-h1); letter-spacing: -.035em; max-width: 14ch; margin: 18px 0 20px; }
.p-sous { font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--b-86); max-width: 44ch; display: grid; gap: var(--e-3); }
.p-hero .ctas, .p-appel .ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.p-hero .ctas { justify-content: flex-start; }
.p-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 7vw; font-size: clamp(9px, 1.2vw, 17px); pointer-events: none; }
.p-scene .piece { box-shadow: var(--ombre-piece-haute); transform: rotate(var(--r, -6deg)); }
.p-scene-ac { --r: -7deg; } .p-scene-fa { --r: 6deg; } .p-scene-ka { --r: -5deg; } .p-scene-kp { --r: 4deg; } .p-scene-cl { --r: -6deg; }
@media (max-width: 860px) {
  .p-hero { min-height: 0; padding-block: 104px calc(var(--e-8) + var(--r-recouvre)); }
  .p-hero.avec-piece > .in > * { max-width: none; }
  .p-scene { display: none; }
  .p-hero::before { background: var(--n-72); } /* le texte couvre toute la largeur : voile plein (AA) */
  .p-hero h1 { font-size: 2.3rem; }
}

.p-corps { padding-block: var(--e-8) 0; }
.p-corps > section { padding-block: var(--e-7); }
.p-corps h2 { font-size: var(--t-h3); font-weight: var(--graisse-titre); font-stretch: var(--largeur-titre); letter-spacing: -.025em; }
.p-corps .texte-page h2 { margin-top: 0; }

/* intro : une phrase d'entrée, grande */
.p-intro p { font-family: var(--f-titre); font-weight: 700; font-stretch: 104%; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -.01em; max-width: 36ch; }

/* points : trois gestes en colonnes, filet à la couleur du produit */
.p-trois { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
.p-trois li { border-top: 3px solid var(--accent, var(--encre)); padding-top: var(--e-4); display: grid; gap: var(--e-2); align-content: start; }
.p-trois li:nth-child(2) { --d: .08s; } .p-trois li:nth-child(3) { --d: .16s; }
.p-trois b { font-family: var(--f-titre); font-weight: 800; font-stretch: 108%; font-size: 1.25rem; }
.p-trois span { color: var(--gris); }
@media (max-width: 760px) { .p-trois { grid-template-columns: 1fr; } }

/* section : titre-geste, texte, rangée de boutons */
.p-section .texte-page { max-width: 760px; }
.p-section .texte-page > h2 + * { margin-top: var(--e-5); }
.liens { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.texte-page .liens a { text-decoration: none; }
.liens .btn, .p-hero .btn, .p-appel .btn { white-space: normal; max-width: 100%; }
.liens .btn { text-align: left; }
@media (min-width: 960px) {
  /* Section en deux colonnes : le titre-geste à gauche, le texte à droite */
  .p-section .texte-page { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--e-8); align-items: start; }
  .p-section .texte-page > h2 { grid-column: 1; grid-row: 1 / span 30; }
  .p-section .texte-page > :not(h2) { grid-column: 2; }
  .p-section .texte-page > h2 + * { margin-top: 0; }
}

/* section sombre : une par page, comme la section noire de l'accueil */
.p-corps > .p-sombre { background: var(--noir); color: var(--pur); padding-block: var(--e-9); margin-block: var(--e-7); }
.p-sombre .texte-page p, .p-sombre .texte-page li { color: var(--gris-n); }
.p-sombre :focus-visible { outline-color: var(--pur); }

/* pièce : le document produit, posé comme une feuille ; données fictives, légende « exemple » */
.p-piece .in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); justify-items: start; }
@media (min-width: 960px) {
  /* La pièce et sa capture côte à côte */
  .p-piece .in:has(.capture-attendue) { grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: var(--e-8); }
  .p-piece .in > * { grid-column: 1; }
  .p-piece .in:has(.capture) { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); column-gap: var(--e-8); }
  .p-piece .in > .capture-attendue, .p-piece .in > .capture { grid-column: 2; grid-row: 1 / span 8; align-self: center; }
}
.p-piece .defile { max-width: 100%; }
.piece-tableau { font-family: var(--f-piece); font-size: .95rem; font-variant-numeric: tabular-nums; border-collapse: collapse; background: var(--papier); color: var(--encre); border-top: 6px solid var(--accent, var(--encre)); box-shadow: var(--ombre-piece); min-width: min(100%, 560px); }
.piece-tableau th, .piece-tableau td { border: 1px solid var(--trait-piece); padding: 10px 14px; text-align: left; white-space: nowrap; }
.piece-tableau th { background: var(--papier-2); font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.p-piece em { font-family: var(--f-piece); font-style: normal; font-size: var(--t-xs); color: var(--gris); }

/* Emplacement d'une capture attendue (lots C1 à C6) : visible, marqué, sans image inventée */
.capture-attendue { margin: 0; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; border: 2px dashed var(--pointille); border-radius: var(--r-grande); background: var(--blanc-2); display: grid; place-content: center; justify-items: center; gap: var(--e-2); color: var(--gris); font-size: var(--t-s); text-align: center; padding: var(--e-4); }
.capture-attendue .todo { white-space: normal; }

/* Capture posée par C6 : vraie image du logiciel, dimensions réservées ; une pièce en portrait reste à taille de lecture */
.capture { margin: 0; width: 100%; max-width: 760px; display: grid; gap: var(--e-2); }
.capture img { display: block; width: 100%; height: auto; border-radius: var(--r-carte); border: 1px solid var(--trait); background: var(--pur); box-shadow: var(--ombre-carte); }
.capture.portrait { max-width: 520px; }
.capture a { display: block; cursor: zoom-in; border-radius: var(--r-carte); }
.capture figcaption { font-family: var(--f-piece); font-size: var(--t-xs); color: var(--gris); }

/* FAQ et appel final */
.p-faq h2 { margin-bottom: var(--e-5); }
.p-corps > .p-appel { background: var(--blanc-2); padding-block: var(--e-9); margin-top: var(--e-7); }
.p-appel .titre-sec { margin-bottom: 0; }
.p-appel .titre-sec p { margin: 0 auto; }
.p-appel .ctas { justify-content: center; }

/* Blog (lot B1) : ligne de métadonnées sous le titre, liste de fin d'article */
.meta-article { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin-top: var(--e-4); font-family: var(--f-piece); font-size: var(--t-xs); color: var(--b-70); }
.p-section.p-suite .texte-page { display: block; max-width: 760px; }
.p-suite h2 { font-size: var(--t-h4); }
.p-suite h2:not(:first-child) { margin-top: var(--e-6); }
.p-suite h2 + * { margin-top: var(--e-3); }
.blog-clusters, .blog-liste { list-style: none; padding: 0; display: grid; gap: var(--e-4); }
.blog-clusters li, .blog-liste li { display: grid; gap: var(--e-1); }
.blog-clusters a, .blog-liste a { font-weight: 700; }
.blog-liste time { font-family: var(--f-piece); font-size: var(--t-xs); color: var(--gris); }