/* ==========================================================================
   LABORATOIRE — CLEAN-ROOM MASTER REFERENCE
   Réplique très haute fidélité de la MÉCANIQUE visuelle de la homepage de
   référence, relevée au navigateur le 07/09/2026 (desktop 1440×900, mobile
   390×844) : géométrie, rythme, compositions, mouvement. Aucun fichier, texte,
   police, image ni code de la référence. Voir docs/redesign (anatomie du mouvement).

   Police : Schibsted Grotesk (Google Fonts) — la métrique la plus proche de la
   police propriétaire relevée (hauteur d'x 1,006 · capitales 0,999 · largeur
   1,026), compensée par l'interlettrage.

   Ce laboratoire n'est PAS la homepage IMPRA : c'est le MASTER DE COMPOSITION.
   ========================================================================== */

.lab {
  /* grille relevée : 12 col · gouttière 24 · contenu 1344 · marges 48 · max 1600 */
  --marge: 48px; --contenu: 1344px; --gout: 24px; --max: 1600px;
  --r-carte: 24px; --r-petit: 16px; --r-bouton: 8px;

  --h1: 68px; --h1-lh: 75px;
  --h2: 56px; --h2-lh: 64px;
  --h2s: 40px; --h2s-lh: 48px;
  --h3: 24px; --h3-lh: 32px;
  --corps: 18px; --corps-lh: 28px;
  --petit: 16px; --petit-lh: 26px;
  --legal: 13px; --legal-lh: 20px;
  /* la référence est un peu plus étroite : on resserre */
  --ls-titre: -0.022em; --ls-corps: -0.008em;

  --n0: #000; --n1: #050505; --n2: #0f0f0f; --n3: #141414; --n4: #1a1a1a; --n5: #2a2a2a;
  --n6: #616161; --n7: #9a9a9a; --n8: #e0e0e0; --n9: #f5f5f5; --n10: #fff;
  --accent: #2f6fe0;                              /* dans les maquettes uniquement */
  --ok: #1d9a5b;
  --police: "Schibsted Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-grow: cubic-bezier(0.4, 0, 0.6, 1);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
.lab, .lab * { box-sizing: border-box; }
html.lab-html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
.lab { margin: 0; font-family: var(--police); font-size: var(--corps); line-height: var(--corps-lh); letter-spacing: var(--ls-corps); color: var(--n1); background: var(--n10); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.lab img, .lab svg { display: block; }
:where(.lab) a { color: inherit; text-decoration: none; }
:where(.lab) ul { list-style: none; margin: 0; padding: 0; }
:where(.lab) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
.lab h1, .lab h2, .lab h3, .lab p { margin: 0; }
.lab [hidden] { display: none !important; }
.lab :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lab h1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: 700; letter-spacing: var(--ls-titre); }
.lab h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 600; letter-spacing: var(--ls-titre); }
.lab h2.h2-petit { font-size: var(--h2s); line-height: var(--h2s-lh); }
.lab h3 { font-size: var(--h3); line-height: var(--h3-lh); font-weight: 600; letter-spacing: -0.012em; }
.petit { font-size: var(--petit); line-height: var(--petit-lh); }
.lab-avert { position: fixed; left: 12px; bottom: 12px; z-index: 60; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: #b5541c; padding: 6px 10px; border-radius: 6px; opacity: 0.92; pointer-events: none; }

.conteneur { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--marge); }
.section { position: relative; }
.section--encre { background: var(--n0); color: var(--n10); }
.section--papier { background: var(--n10); color: var(--n1); }
.section > .conteneur { padding-top: 80px; padding-bottom: 80px; }
.tete-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tete-section h2 { max-width: 1200px; }
.tete-section .bouton { flex: none; margin-top: 6px; }
.tete-section + * { margin-top: 56px; }

/* ── Boutons : 52 px, rayon 8, texte 18/28, padding 12 16 ───────────────── */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 12px 16px; border-radius: var(--r-bouton); font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: -0.005em; white-space: nowrap; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.bouton--plein { background: var(--n10); color: var(--n1); }
.bouton--plein:hover { background: var(--n8); }
.section--papier .bouton--plein, .clair .bouton--plein { background: var(--n1); color: var(--n10); }
.section--papier .bouton--plein:hover { background: var(--n5); }
.bouton--contour { border: 1px solid currentColor; padding: 11px 16px; }
.bouton--contour:hover { background: rgba(255, 255, 255, 0.12); }
.section--papier .bouton--contour:hover { background: rgba(5, 5, 5, 0.06); }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 28px; }
.lien-fleche svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.lien-fleche:hover svg { transform: translate(2px, -2px); }

/* ── En-tête fixe : barre 48 + nav 80 ; la barre se replie au défilement ─── */

.barre-onglets { height: 48px; background: var(--n0); display: flex; align-items: center; padding: 0 20px; gap: 8px; }
.onglet { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-bouton); font-size: 16px; color: var(--n7); transition: background-color 0.2s; }
.onglet svg { width: 16px; height: 16px; }
.onglet[aria-current="true"] { background: var(--n5); color: var(--n10); }
.onglet:hover { color: var(--n10); }

 

/* ── Scènes : la masse visuelle d'une photo, sans photo ─────────────────── */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene::after { content: ""; position: absolute; inset: 0; opacity: 0.12; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.9'/%3E%3C/svg%3E"); }
.scene .forme { position: absolute; border-radius: 50%; }
.scene .plan { position: absolute; left: -10%; right: -10%; height: 55%; bottom: -12%; transform: skewY(-7deg); }
.scene .lumiere { position: absolute; inset: -20%; background: linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.14) 46%, rgba(255,255,255,0) 60%); pointer-events: none; }
/* palettes de scènes */
.scene--comptoir { background: radial-gradient(90% 70% at 70% 20%, #6b5642 0%, #2e241b 45%, #0e0b09 100%); }
.scene--comptoir .plan { background: linear-gradient(180deg, #a07a52, #5a4028); }
.scene--comptoir .forme.f1 { left: -10%; top: 5%; width: 55%; height: 80%; background: radial-gradient(closest-side, rgba(150, 125, 110, 0.7), rgba(150, 125, 110, 0)); }
.scene--comptoir .forme.f2 { right: -8%; top: -20%; width: 50%; height: 70%; background: radial-gradient(closest-side, rgba(220, 190, 150, 0.35), rgba(220, 190, 150, 0)); }
.scene--bois { background: radial-gradient(100% 80% at 60% 90%, #8a6640 0%, #4d3722 45%, #120e0b 100%); }
.scene--bois .plan { background: linear-gradient(180deg, #b58a5c, #6b4c2f); opacity: 0.75; }
.scene--bois .forme.f1 { left: 10%; top: -25%; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(255, 230, 200, 0.28), rgba(255, 230, 200, 0)); }
.scene--salon { background: radial-gradient(110% 70% at 30% 70%, #4d6a92 0%, #2b3d5c 40%, #0d1220 100%); }
.scene--salon .plan { background: linear-gradient(180deg, #b0803f, #6e4a22); height: 32%; bottom: -8%; transform: skewY(-4deg); }
.scene--salon .forme.f1 { left: -10%; top: 30%; width: 80%; height: 50%; background: radial-gradient(closest-side, rgba(120, 160, 210, 0.5), rgba(120, 160, 210, 0)); }
.scene--table { background: radial-gradient(90% 70% at 50% 80%, #9a6f45 0%, #5a3d24 50%, #150f0a 100%); }
.scene--table .forme.f1 { left: 15%; top: 40%; width: 70%; height: 60%; background: radial-gradient(closest-side, rgba(200, 150, 100, 0.5), rgba(200, 150, 100, 0)); }
.scene--table .forme.f2 { right: -10%; top: 30%; width: 35%; height: 35%; background: radial-gradient(closest-side, rgba(30, 60, 120, 0.7), rgba(30, 60, 120, 0)); }
.scene--marbre { background: radial-gradient(90% 70% at 60% 80%, #a6aab0 0%, #5e6268 45%, #131416 100%); }
.scene--marbre .forme.f1 { left: -15%; top: 45%; width: 70%; height: 60%; background: radial-gradient(closest-side, rgba(230, 232, 235, 0.55), rgba(230, 232, 235, 0)); }
.scene--marbre .forme.f2 { right: 0; top: 10%; width: 40%; height: 40%; background: radial-gradient(closest-side, rgba(60, 90, 60, 0.6), rgba(60, 90, 60, 0)); }
.scene--bureau { background: linear-gradient(160deg, #e9e6df 0%, #cfc9bd 40%, #8f8677 75%, #5b5347 100%); }
.scene--bureau .plan { background: linear-gradient(180deg, #d9b07a, #a87d4d); height: 48%; bottom: -14%; transform: skewY(-9deg); }
.scene--bureau .forme.f1 { right: 8%; top: -10%; width: 42%; height: 90%; background: radial-gradient(closest-side, rgba(110, 130, 105, 0.7), rgba(110, 130, 105, 0)); }
.scene--bureau .forme.f2 { left: -5%; top: 10%; width: 40%; height: 80%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); }
.scene--rue { background: radial-gradient(90% 80% at 70% 40%, #d9d2c2 0%, #8f8a7c 45%, #2a2a2a 100%); }
.scene--rue .forme.f1 { left: 5%; top: 10%; width: 40%; height: 100%; background: radial-gradient(closest-side, rgba(90, 100, 120, 0.7), rgba(90, 100, 120, 0)); }
.scene--jaune { background: radial-gradient(100% 80% at 30% 50%, #d9b93a 0%, #8a7320 50%, #2a2510 100%); }
.scene--jaune .forme.f1 { right: 5%; top: 10%; width: 55%; height: 90%; background: radial-gradient(closest-side, rgba(240, 240, 240, 0.55), rgba(240, 240, 240, 0)); }
.scene--atelier { background: radial-gradient(90% 70% at 40% 70%, #d69a56 0%, #6d4a2a 50%, #17120e 100%); }
.scene--chantier { background: radial-gradient(90% 70% at 50% 60%, #9aa3b3 0%, #4a5262 50%, #14161a 100%); }
.scene--commerce { background: radial-gradient(90% 70% at 50% 70%, #b48350 0%, #55402a 50%, #14110f 100%); }
.scene--plante { background: radial-gradient(100% 80% at 70% 60%, #b08a5e 0%, #5f4a33 45%, #1a1a16 100%); }
.scene--plante .forme.f1 { left: -10%; top: -15%; width: 55%; height: 80%; background: radial-gradient(closest-side, rgba(70, 110, 70, 0.75), rgba(70, 110, 70, 0)); }
.scene--plante .forme.f2 { right: -10%; top: -20%; width: 50%; height: 60%; background: radial-gradient(closest-side, rgba(60, 100, 60, 0.6), rgba(60, 100, 60, 0)); }
.scene--plante .plan { background: linear-gradient(180deg, #c9a071, #8a6540); height: 40%; bottom: -10%; transform: skewY(-5deg); opacity: 0.9; }
/* silhouette générique — une masse « personne », jamais un visage */
.silhouette { position: absolute; border-radius: 46% 46% 40% 40% / 60% 60% 30% 30%; background: radial-gradient(ellipse at 50% 25%, rgba(0,0,0,0.55), rgba(0,0,0,0.75) 60%, rgba(0,0,0,0) 72%); }
.silhouette::before { content: ""; position: absolute; left: 50%; top: -22%; width: 36%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: inherit; }

/* ── Objets : carte, terminal, téléphone, tablette, fenêtre ─────────────── */
.objet-carte { position: absolute; border-radius: 28px; background: linear-gradient(115deg, #1c1c1e 0%, #0a0a0b 45%, #222225 70%, #0a0a0b 100%); box-shadow: 0 50px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(255,255,255,0.05); }
.objet-carte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0) 58%); }
.objet-carte .puce { position: absolute; left: 12%; top: 22%; width: 12%; aspect-ratio: 4/3; border-radius: 12%; background: linear-gradient(135deg, #7a7a80, #2e2e33); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.objet-carte .onde { position: absolute; left: 27%; top: 24%; width: 5%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.45) rgba(255,255,255,0.45) transparent transparent; transform: rotate(45deg); }
.objet-carte .sigle { position: absolute; right: 8%; top: 14%; font-weight: 700; font-size: 1.6em; letter-spacing: -0.05em; color: rgba(255,255,255,0.7); }
.objet-carte .pastilles { position: absolute; right: 8%; bottom: 12%; width: 16%; aspect-ratio: 1.6; }
.objet-carte .pastilles::before, .objet-carte .pastilles::after { content: ""; position: absolute; top: 0; width: 62%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.3); }
.objet-carte .pastilles::after { left: 38%; background: rgba(255,255,255,0.18); }
.objet-carte--argent { background: linear-gradient(140deg, #f6f6f8 0%, #cfcfd4 30%, #6a6a71 62%, #202024 100%); box-shadow: 0 40px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.8); }
.objet-carte--argent .sigle { color: rgba(0,0,0,0.35); }
.objet-carte--argent .pastilles::before { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.85) 0 2px, rgba(255,255,255,0.35) 2px 4px); }
.objet-carte--argent .pastilles::after { background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.7) 0 2px, rgba(255,255,255,0.25) 2px 4px); }
.objet-terminal { position: absolute; border-radius: 40px 40px 48px 48px; background: linear-gradient(160deg, #2a2a2e 0%, #0e0e10 55%, #1c1c20 100%); box-shadow: 0 60px 120px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.14); }
.objet-terminal .ecran { position: absolute; left: 12%; right: 12%; top: 10%; height: 42%; border-radius: 12px; background: linear-gradient(160deg, #8a94a3 0%, #c9d1dc 45%, #6d7683 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.5); }
.objet-terminal .ecran::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); border-color: transparent rgba(255,255,255,0.8) rgba(255,255,255,0.8) transparent; transform: translate(-50%, -50%) rotate(45deg); }
.objet-terminal .clavier { position: absolute; left: 14%; right: 14%; bottom: 10%; height: 26%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.objet-terminal .clavier i { border-radius: 6px; background: linear-gradient(180deg, #34343a, #1a1a1e); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }

.mk { font-size: 12px; line-height: 16px; color: var(--n1); letter-spacing: 0; }
.mk-boite { background: var(--n10); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05); }
.mk-boite--sombre { background: var(--n3); color: var(--n10); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); }
.mk-tete { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(127,127,127,0.18); font-weight: 600; font-size: 13px; }
.mk-tete .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--n9); display: inline-grid; place-items: center; margin-right: 10px; font-size: 14px; }
.mk-boite--sombre .mk-tete .ic { background: var(--n5); }
.mk-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.mk-ligne + .mk-ligne { border-top: 1px solid rgba(127,127,127,0.14); }
.mk-ligne small { display: block; color: var(--n7); font-size: 11px; line-height: 14px; }
.mk-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--n9); border: 1px solid var(--n8); white-space: nowrap; }
.mk-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--n7); }
.mk-badge--ok::before { background: var(--ok); } .mk-badge--attente::before { background: var(--accent); }
.mk-bouton { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--n1); color: var(--n10); }
.mk-bouton--contour { background: transparent; color: var(--n1); border: 1px solid var(--n1); }
.mk-champ { height: 32px; border: 1px solid var(--n8); border-radius: 6px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.mk-etiquette { font-size: 10px; color: var(--n7); margin: 10px 0 4px; }
.mk-pilules { display: flex; gap: 6px; }
.mk-pilule { height: 26px; padding: 0 10px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 11px; background: var(--n9); }
.mk-pilule--active { background: var(--accent); color: var(--n10); }
.mk-bascule { width: 30px; height: 18px; border-radius: 9px; background: var(--accent); position: relative; flex: none; }
.mk-bascule::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--n10); }
.mk-montant { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.mk-bulle { display: inline-block; padding: 8px 12px; border-radius: 12px; background: var(--n9); font-size: 12px; }
.mk-graphe { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding: 0 4px; }
.mk-graphe i { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.85; }
.mk-graphe i.neg { background: #d9534f; }
.mk-courbe { height: 60px; border-radius: 6px; background: linear-gradient(180deg, rgba(47,111,224,0.25), rgba(47,111,224,0)); position: relative; overflow: hidden; }
.mk-courbe::after { content: ""; position: absolute; left: -2%; right: -2%; top: 30%; height: 2px; background: var(--accent); transform: rotate(-6deg); }
.mk-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #b9c7ff, #5e7cff); flex: none; }
.mk-progression { height: 4px; border-radius: 2px; background: var(--n8); overflow: hidden; }
.mk-progression i { display: block; height: 100%; width: 22%; background: var(--n1); }
.mk-etapes { padding: 8px 16px 14px; }
.mk-etape { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; }
.mk-etape .rond { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--n6); display: grid; place-items: center; }
.mk-etape .rond--fait { background: var(--accent); border-color: var(--accent); color: var(--n10); }
.mk-etape .rond svg { width: 10px; height: 10px; }
.mk-tel { width: 236px; height: 480px; border-radius: 40px; background: #0d0d0f; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.18); }
.mk-tel .ecran { width: 100%; height: 100%; border-radius: 32px; background: var(--n10); overflow: hidden; position: relative; }
.mk-tel .encoche { position: absolute; left: 50%; top: 10px; width: 70px; height: 20px; border-radius: 10px; background: #0d0d0f; transform: translateX(-50%); }
.mk-tel .ecran--sombre { background: #1a1a1c; color: var(--n10); }
.mk-tel .ecran > .contenu { padding: 44px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.mk-tel .ecran--sombre .mk-boite { background: #262629; color: var(--n10); box-shadow: none; }
.mk-tel .ecran--sombre .mk-etiquette { color: var(--n7); }
.mk-tablette { width: 360px; height: 260px; border-radius: 22px; background: #0d0d0f; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.18); }
.mk-tablette .ecran { width: 100%; height: 100%; border-radius: 14px; background: var(--n10); overflow: hidden; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mk-flottant { transition: transform 0.4s var(--ease); }
.mk-recu { position: absolute; width: 150px; height: 260px; border-radius: 4px; background: #fff; padding: 14px 12px; font-size: 9px; line-height: 13px; color: var(--n6); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.mk-recu b { color: var(--n2); font-size: 10px; }

/* ── S1 · Hero 900 : trois plans en boucle (10,5 s), comme un montage vidéo ── */
.plans-hero { position: absolute; inset: 48px 0 0; z-index: 0; overflow: hidden; }
.plan-hero { position: absolute; inset: 0; opacity: 0; animation: plan-hero 10.5s linear infinite; will-change: opacity; }
.plan-hero:nth-child(2) { animation-delay: -7s; }
.plan-hero:nth-child(3) { animation-delay: -3.5s; }
.plan-hero .scene { animation: travelling 10.5s linear infinite; transform-origin: 60% 50%; will-change: transform; }
.plan-hero:nth-child(2) .scene { animation-delay: -7s; }
.plan-hero:nth-child(3) .scene { animation-delay: -3.5s; }
@keyframes plan-hero { 0% { opacity: 0; } 5% { opacity: 1; } 33% { opacity: 1; } 38% { opacity: 0; } 100% { opacity: 0; } }
@keyframes travelling { 0% { transform: scale(1.04) translate(0, 0); } 38% { transform: scale(1.1) translate(-1.5%, 1%); } 38.01% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.04) translate(0, 0); } }
.hero[data-en-vue="non"] .plan-hero, .hero[data-en-vue="non"] .plan-hero .scene { animation-play-state: paused; }
/* plan A · bureau clair : ordinateur portable, fenêtre produit, notification */
.scene--bureau-clair { background: radial-gradient(90% 70% at 30% 40%, #d8cfc2 0%, #9d9388 45%, #3f3a35 100%); }
.scene--bureau-clair .plan { background: linear-gradient(180deg, #cdb08a, #8c6f4c); height: 40%; bottom: -10%; }
.scene--bureau-clair .forme.f1 { left: -10%; top: -10%; width: 55%; height: 110%; background: radial-gradient(closest-side, rgba(226, 205, 185, 0.85), rgba(226, 205, 185, 0)); }
.scene--bureau-clair .forme.f2 { right: 0; top: -20%; width: 45%; height: 70%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); }
.scene--bureau-clair .portable { position: absolute; left: 720px; top: 180px; width: 640px; height: 420px; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #e6e8ec, #c4c8cf); box-shadow: 0 40px 90px rgba(0,0,0,0.35); transform: perspective(1600px) rotateX(8deg) rotateY(-14deg) rotateZ(2deg); }
.scene--bureau-clair .portable::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -44px; height: 44px; border-radius: 6px 6px 14px 14px; background: linear-gradient(180deg, #d5d8de, #9ea3ab); transform: perspective(900px) rotateX(-60deg); transform-origin: top; }
.scene--bureau-clair .portable .mk { position: absolute; left: 4%; right: 4%; top: 4%; bottom: 6%; border-radius: 8px; background: #f7f8fa; overflow: hidden; padding: 14px 16px; font-size: 10px; line-height: 14px; }
.scene--bureau-clair .notification { position: absolute; left: 1060px; top: 170px; width: 420px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.92); box-shadow: 0 20px 50px rgba(0,0,0,0.25); font-size: 15px; line-height: 20px; color: #1a1a1a; display: flex; align-items: center; gap: 12px; transform: rotate(-3deg); animation: notification 10.5s linear infinite; }
.scene--bureau-clair .notification i { width: 40px; height: 40px; border-radius: 12px; background: #1a1a1a; flex: none; }
.scene--bureau-clair .notification small { display: block; font-weight: 400; color: #616161; }
@keyframes notification { 0%, 8% { opacity: 0; transform: rotate(-3deg) translateY(14px); } 14%, 33% { opacity: 1; transform: rotate(-3deg) translateY(0); } 38%, 100% { opacity: 0; } }
.scene--bureau-clair .personne { position: absolute; left: -40px; top: 120px; width: 520px; height: 720px; border-radius: 50% 50% 30% 30%; background: radial-gradient(ellipse at 50% 30%, rgba(214, 190, 165, 0.95), rgba(190, 165, 140, 0.9) 55%, rgba(190, 165, 140, 0) 72%); }
/* plan C · carte présentée, fond sombre */
.scene--carte { background: radial-gradient(80% 70% at 50% 40%, #2b2b2e 0%, #121213 55%, #050505 100%); }
.hero .scene--carte .objet-carte { left: 300px; top: 190px; width: 760px; height: 470px; transform: rotate(-38deg); font-size: 40px; border-radius: 40px; }
.hero .scene--carte .main-a { position: absolute; left: 700px; top: 380px; width: 520px; height: 460px; border-radius: 45%; transform: rotate(20deg); background: radial-gradient(ellipse at 40% 40%, rgba(200, 160, 130, 0.55), rgba(150, 110, 85, 0.35) 55%, rgba(120, 85, 65, 0) 72%); }
.scene--carte .lumiere { animation: balayage 10.5s linear infinite; }
@keyframes balayage { 0%, 66% { transform: translateX(-30%); } 100% { transform: translateX(30%); } }
/* ── S1 · Hero 900 : scène plein cadre, texte en bas à gauche ───────────── */
.hero { position: relative; height: 948px; padding-top: 48px; overflow: hidden; background: var(--n0); color: var(--n10); }   /* 48 = la barre utilitaire, 900 = la scène */
.hero .scene { z-index: 0; }
.hero .voile { position: absolute; inset: 48px 0 0; z-index: 1; background: linear-gradient(rgba(5,5,5,0) 78.6%, var(--n1) 100%); }
.hero-contenu { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 128px; padding-bottom: 48px; }
.hero-texte { max-width: 870px; display: flex; flex-direction: column; gap: 24px; }
.hero-preuve { display: inline-flex; align-items: center; gap: 6px; height: 36px; font-size: 14px; line-height: 20px; }
.hero-preuve b { font-weight: 700; }
.hero-preuve .etoile { width: 16px; height: 16px; color: var(--ok); }
.hero-actions { margin-top: 48px; display: flex; gap: 16px; }
/* les objets du hero : un terminal tenu en main, une carte présentée */
.hero .objet-terminal { left: 560px; top: 200px; width: 560px; height: 300px; transform: rotate(-24deg); }
.hero .objet-terminal .ecran { left: 8%; right: 30%; top: 12%; height: 76%; }
.hero .objet-terminal .clavier { display: none; }
.hero .objet-carte { left: 900px; top: 130px; width: 400px; height: 250px; transform: rotate(-32deg); font-size: 24px; }
.hero .main-a, .hero .main-b { position: absolute; border-radius: 45%; background: radial-gradient(ellipse at 40% 40%, rgba(200, 160, 130, 0.55), rgba(150, 110, 85, 0.35) 55%, rgba(120, 85, 65, 0) 72%); }
.hero .main-a { left: 240px; top: 120px; width: 560px; height: 520px; transform: rotate(-20deg); }
.hero .main-b { right: -60px; top: 120px; width: 420px; height: 620px; transform: rotate(18deg); }
.hero .manche { position: absolute; left: -80px; top: 60px; width: 620px; height: 560px; border-radius: 48% 52% 40% 60%; transform: rotate(-28deg); background: radial-gradient(ellipse at 45% 45%, rgba(190, 190, 200, 0.42), rgba(150, 150, 160, 0.28) 55%, rgba(120, 120, 130, 0) 72%); }
.hero .reflet-table { position: absolute; left: 30%; bottom: 0; width: 60%; height: 34%; background: linear-gradient(180deg, rgba(255, 220, 180, 0) 0%, rgba(255, 220, 180, 0.16) 60%, rgba(255, 220, 180, 0) 100%); transform: skewY(-6deg); }

/* ── S2 · Preuve 380 : 80 haut / 128 bas ────────────────────────────────── */
.section-preuve > .conteneur { padding-bottom: 128px; }
.preuve { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gout); text-align: center; }
.preuve-item { display: flex; flex-direction: column; align-items: center; }
.preuve-icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--n5), var(--n2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); position: relative; }
.preuve-icone svg { width: 24px; height: 24px; }
.preuve-icone--double::after { content: attr(data-badge); position: absolute; left: 44px; top: 0; height: 56px; padding: 0 12px; border-radius: 28px; display: grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--n3); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); white-space: nowrap; }
.preuve-item h3 { margin-top: 12px; }
.preuve-item p { margin-top: 16px; max-width: 407px; }

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.carte { position: relative; border-radius: var(--r-carte); overflow: hidden; }
.carte-texte { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.carte-texte p { max-width: 384px; }
.carte--bord { border: 1px solid var(--n6); }
.carte--brume { background: linear-gradient(160deg, #1c1c1e 0%, #0e0e10 60%, #151517 100%); }
.carte-visuel { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.carte .voile { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.carte:hover .mk-flottant { transform: translateY(-6px); }
.carte-fleche { position: absolute; right: 24px; top: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(5,5,5,0.08); display: grid; place-items: center; z-index: 4; overflow: hidden; }
.carte-fleche svg { width: 16px; height: 16px; }
.carte:hover .carte-fleche svg { animation: fleche-sortie-entree 0.5s var(--ease); }
@keyframes fleche-sortie-entree { 0% { transform: translate(0, 0); } 45% { transform: translate(120%, -120%); } 50% { transform: translate(-120%, 120%); } 100% { transform: translate(0, 0); } }
.section--encre .carte-fleche, .carte--sombre .carte-fleche{ background: rgba(255,255,255,0.18); color: var(--n10); }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gout); }

/* ── S3 · Bento 1120 : 192/624 · 408/408 · 888×408 ──────────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 192px 192px 408px; gap: var(--gout); }
.bento .b1 { grid-column: 1; grid-row: 1; }
.bento .b2 { grid-column: 2; grid-row: 1 / 3; }
.bento .b3 { grid-column: 3; grid-row: 1 / 3; }
.bento .b4 { grid-column: 1; grid-row: 2 / 4; }
.bento .b5 { grid-column: 2 / 4; grid-row: 3; }
.section--encre .carte { color: var(--n10); }
.bento .b3 .voile { background: linear-gradient(rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.2) 40%, rgba(5,5,5,0) 70%); }
.bento .b5 .scene { background: linear-gradient(160deg, #4d4d52 0%, #2a2a2e 35%, #151517 70%, #0e0e10 100%); }
.bento .b5 .objet-carte { right: -60px; bottom: -150px; width: 760px; height: 470px; transform: rotate(-22deg); font-size: 40px; border-radius: 44px; }
.bento .b3 .objet-carte { right: 40px; top: 170px; width: 190px; height: 118px; transform: rotate(-24deg); font-size: 12px; border-radius: 14px; }
.bento .b3 .mk-tel { position: absolute; left: 40px; bottom: -250px; transform: rotate(-8deg); }
.bento .b3 .silhouette { right: -80px; bottom: -80px; width: 380px; height: 420px; opacity: 0.8; }
.bento .b4 .mk-tel { position: absolute; left: 50%; bottom: -70px; transform: translateX(-50%); }
.bento .b2 .mk { position: absolute; left: 24px; right: 24px; bottom: 40px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.bento-cta { display: none; }

/* ── S4 · Produit 952 : cartes claires 432×672 ──────────────────────────── */
.carte--claire { background: radial-gradient(50% 50% at 50% 50%, var(--n8) 0%, var(--n9) 100%); color: var(--n1); height: 672px; transition: transform 0.25s var(--ease); }
.carte--claire:hover { transform: translateY(-4px); }
.carte--claire .carte-visuel { top: auto; height: 432px; }
.carte--claire .carte-fleche { background: rgba(5,5,5,0.08); color: var(--n1); }

/* ── S5 · Écosystème 664 ────────────────────────────────────────────────── */

.constellation { position: relative; height: 504px; }
.constellation .disque { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.constellation .d1 { width: 760px; height: 760px; background: rgba(255,255,255,0.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7); }
.constellation .d2 { width: 520px; height: 520px; background: rgba(255,255,255,0.6); }
.constellation .d3 { width: 340px; height: 340px; background: var(--n10); }
.constellation .noyau { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; border-radius: 50%; background: var(--n1); color: var(--n10); display: grid; place-items: center; font-weight: 700; font-size: 40px; letter-spacing: -0.04em; transform: translate(-50%, -50%); }
.anneau { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: orbite var(--tour, 40s) linear infinite; }
.anneau--int { animation-direction: reverse; --tour: 28s; }
.satellite { position: absolute; left: 0; top: 0; width: 116px; height: 116px; margin: -58px 0 0 -58px; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); }
.satellite--petit { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.satellite > span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 34px; letter-spacing: -0.03em; box-shadow: 0 10px 30px rgba(0,0,0,0.12); animation: orbite var(--tour, 40s) linear infinite reverse; }
.satellite--petit > span { font-size: 26px; }
.anneau--int .satellite > span { animation-direction: normal; }

@keyframes orbite { to { transform: rotate(360deg); } }

/* ── S6 · Accompagnement 588 ────────────────────────────────────────────── */
.colonnes-centrees { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); column-gap: var(--gout); text-align: center; }
.colonne-centree { display: flex; flex-direction: column; align-items: center; }
.icone-carree { width: 56px; height: 56px; border-radius: 8px; background: var(--n9); display: grid; place-items: center; }
.icone-carree svg { width: 26px; height: 26px; }
.icone-mobile { display: none; }
.colonne-centree h3 { margin-top: 12px; }
.colonne-centree p { margin-top: 16px; }
.actions-centrees { display: flex; justify-content: center; margin-top: 48px; }

/* ── S7 · Bande 504 ─────────────────────────────────────────────────────── */
.bande-section { margin-top: -40px; }   /* relevé : la bande mord de 40 px sur la section précédente */
.bande-section > .conteneur { padding-top: 0; padding-bottom: 56px; }
.bande { position: relative; height: 504px; border-radius: var(--r-carte); overflow: hidden; }
.bande .silhouette { right: 26%; top: 5%; width: 260px; height: 320px; background: radial-gradient(ellipse at 50% 25%, rgba(110,130,105,0.9), rgba(90,110,85,0.95) 60%, rgba(90,110,85,0) 72%); }
.bande .mk-boite { position: absolute; }
.bande .fenetre { left: 150px; top: 108px; width: 368px; }
.bande .chip { left: 306px; top: 328px; width: 284px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px; font-weight: 600; }
.bande .chip small { display: block; font-weight: 400; color: var(--n7); }
.bande .chip .onde { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.bande .chip .onde i { width: 2px; background: var(--n6); border-radius: 1px; }
.bande .mk-tablette { position: absolute; right: 60px; bottom: -70px; width: 300px; height: 210px; transform: rotate(-6deg); }
.bande .portable { position: absolute; right: 120px; bottom: -40px; width: 340px; height: 200px; border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, #d9dbe0, #b9bcc4); box-shadow: 0 30px 60px rgba(0,0,0,0.25); transform: perspective(900px) rotateX(58deg) rotateZ(-8deg); }
.bande .portable::before { content: ""; position: absolute; left: 6%; right: 6%; top: 6%; height: 70%; border-radius: 6px; background: linear-gradient(160deg, #f4f6f9, #cfd6e0); }
.bande .tasse { position: absolute; right: 90px; bottom: 100px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2b4f8a, #142a4a); box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 0 0 4px rgba(255,255,255,0.15); }

/* ── S8 · Outils 936 : cartes sombres 432×592 ───────────────────────────── */
.carte--sombre { height: 592px; color: var(--n10); }
.carte--sombre .voile { background: linear-gradient(rgba(5,5,5,0.67) 0%, rgba(5,5,5,0.67) 18%, rgba(5,5,5,0) 60%); }
.carte--sombre .scene { transition: transform 0.6s var(--ease); }
.carte--sombre:hover .scene { transform: scale(1.03); }

/* ── S9 · Secteurs 608 : texte 318 + cartes qui s'élargissent au survol ──── */

/* ── S10 · Témoignages 916 : diapo active centrée, voisines visibles ─────── */
.temoignages > .conteneur { padding-bottom: 0; }
.carrousel { position: relative; margin-top: 56px; overflow: hidden; }
.carrousel-piste { display: flex; gap: var(--gout); padding: 0 calc(50% - 511px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carrousel-piste::-webkit-scrollbar { display: none; }
.diapo { flex: none; width: 1022px; height: 592px; scroll-snap-align: center; border-radius: var(--r-carte); overflow: hidden; position: relative; color: var(--n10); opacity: 0.6; transition: opacity 0.4s var(--ease); }
.diapo.est-active { opacity: 1; }
.diapo .voile { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(5,5,5,0.67) 0%, rgba(5,5,5,0.4) 40%, rgba(5,5,5,0) 100%); }
.diapo-texte { position: relative; z-index: 2; padding: 24px; display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.diapo-texte > * { opacity: 0; transform: translateY(12px); transition: opacity 0.3s linear, transform 0.3s var(--ease); }
.diapo.est-active .diapo-texte > * { opacity: 1; transform: none; }
.diapo.est-active .diapo-texte > :nth-child(2) { transition-delay: 0.15s; }
.diapo.est-active .diapo-texte > :nth-child(3) { transition-delay: 0.3s; }
/* la personne « respire » : le plan vidéo de la référence n'est jamais figé */
.diapo .silhouette { animation: respiration 6s ease-in-out infinite; }
@keyframes respiration { 0%, 100% { transform: translateX(-30%) scale(1); } 50% { transform: translateX(-31%) scale(1.02); } }
.diapo-logo { height: 48px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 30px; letter-spacing: -0.02em; }
.diapo-logo i { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.9); }
.diapo-citation { font-size: 28px; line-height: 40px; font-weight: 600; letter-spacing: -0.015em; }
.diapo-auteur { font-size: 18px; line-height: 28px; }
.diapo .silhouette { left: 50%; bottom: -40px; width: 380px; height: 460px; transform: translateX(-30%); z-index: 1; }
.carrousel-commandes { height: 100px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.temoignages { padding-bottom: 24px; }
.carrousel-points { display: flex; align-items: center; gap: 20px; }
.point { width: 12px; height: 12px; border-radius: 6px; background: var(--n6); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; }
.point[aria-current="true"] { width: 72px; }
.point[aria-current="true"]::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--n10); border-radius: 6px; }
.carrousel[data-lecture="on"] .point[aria-current="true"]::after { animation: progression var(--duree, 4s) linear forwards; }
@keyframes progression { from { width: 0; } to { width: 100%; } }
.carrousel-pause { width: 44px; height: 44px; border-radius: 50%; margin-left: 20px; background: var(--n5); color: var(--n10); display: grid; place-items: center; }
.carrousel-pause svg { width: 16px; height: 16px; }
.carrousel-pause .lire { display: none; }
.carrousel[data-lecture="off"] .carrousel-pause .lire { display: block; }
.carrousel[data-lecture="off"] .carrousel-pause .pauser { display: none; }

/* ── S11 · Sécurité 474 : carte 774×314 au bord en dégradé tournant ──────── */
.securite > .conteneur { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: 1fr 774px; column-gap: var(--gout); align-items: center; }
.securite-texte { max-width: 480px; }
.securite-texte .lien-fleche { margin-top: 24px; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.carte--nuit { height: 314px; background: var(--n4); padding: 48px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); overflow: visible; }
.carte--nuit::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle), rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 12%, rgba(255,255,255,0) 30%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tourner 3s linear infinite; pointer-events: none; }
@keyframes tourner { to { --angle: 360deg; } }
.garantie { display: flex; flex-direction: column; gap: 24px; }
.garantie svg { width: 64px; height: 64px; color: var(--n8); }

/* ── S12 · Final 664 : carte 1400×600 ───────────────────────────────────── */
.final { padding: 32px 20px; }
.carte--finale { height: 600px; color: var(--n10); display: flex; align-items: center; }
.carte--finale .carte-texte { padding: 0 0 0 92px; max-width: 560px; gap: 0; }
.carte--finale p { margin-top: 24px; max-width: 470px; }
.carte--finale .bouton { margin-top: 48px; align-self: flex-start; }
.carte--finale .mk-tel { position: absolute; right: 300px; top: 180px; transform: rotate(-8deg); z-index: 2; animation: flotter 7s ease-in-out infinite; }
.carte--finale .scene .lumiere { animation: balayage 12s linear infinite; }
@keyframes flotter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.carte--finale .objet-carte { right: 520px; top: 340px; width: 250px; height: 156px; transform: rotate(-24deg); font-size: 14px; border-radius: 16px; z-index: 2; animation: flotter 9s ease-in-out infinite; animation-delay: -3s; }
.carte--finale .main-a { position: absolute; right: 120px; top: 300px; width: 520px; height: 460px; border-radius: 45%; background: radial-gradient(ellipse at 40% 40%, rgba(60, 90, 60, 0.6), rgba(40, 60, 40, 0.5) 55%, rgba(40, 60, 40, 0) 72%); transform: rotate(15deg); }

/* ── Pied de page : 1020 sombre + 543 clair ──────────────────────────────── */
.pied-haut { background: var(--n0); color: var(--n10); }
.pied-haut > .conteneur { padding-top: 80px; padding-bottom: 140px; display: grid; grid-template-columns: 318px repeat(3, 1fr); column-gap: var(--gout); }
.pied-tarifs { width: 212px; padding: 24px; border-radius: var(--r-petit); background: var(--n3); display: flex; flex-direction: column; gap: 24px; }
.pied-tarifs .titre { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 600; }
.pied-tarifs .titre .carte-fleche { position: static; width: 36px; height: 36px; background: var(--n5); color: var(--n10); }
.pied-tarifs p { font-size: 16px; line-height: 22px; color: var(--n8); }
.pied-notes { margin-top: 42px; display: flex; flex-direction: column; gap: 24px; padding-left: 16px; }
.pied-note { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.pied-note svg { width: 20px; height: 20px; }
.pied-note span { font-size: 16px; font-weight: 400; margin-left: 4px; }
.pied-colonne h4 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.pied-colonne ul { margin-top: 12px; margin-bottom: 40px; }
.pied-colonne li a { display: block; font-size: 16px; line-height: 30px; color: var(--n8); transition: color 0.2s; }
.pied-colonne li a:hover { color: var(--n10); }
.pied-bas { background: var(--n10); color: var(--n1); }
.pied-bas > .conteneur { padding-top: 110px; padding-bottom: 80px; }
.pied-identite { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pied-mot { font-weight: 700; font-size: 120px; line-height: 90px; letter-spacing: -0.06em; }
.pied-droite { display: flex; align-items: center; gap: 24px; }
.pied-labels { display: flex; align-items: center; gap: 8px; }
.pied-labels svg { width: 64px; height: 64px; }
.pied-social-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.pied-social { display: flex; gap: 10px; }
.pied-social a { width: 32px; height: 32px; border-radius: 50%; background: var(--n1); color: var(--n10); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.pied-badges { display: flex; gap: 16px; align-items: center; }
.pied-badges img { height: 40px; width: auto; }
.pied-badges .google { height: 52px; margin: -6px 0; }
.pied-separateur { height: 1px; background: var(--n8); margin-top: 48px; }
.pied-legal-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 40px; font-size: var(--legal); line-height: var(--legal-lh); }

.pied-legal { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; font-size: var(--legal); line-height: 18px; color: var(--n6); }

@media (prefers-reduced-motion: reduce) {
  .satellite > span, .anneau, .carte--nuit::before, .plan-hero, .plan-hero .scene, .scene--bureau-clair .notification, .scene--carte .lumiere, .carte--finale .mk-tel, .carte--finale .objet-carte, .carte--finale .scene .lumiere, .diapo .silhouette { animation: none; }
  .plan-hero:first-child { opacity: 1; }
  .scene--bureau-clair .notification { opacity: 1; }
  .carte:hover .carte-fleche svg { animation: none; }
  .carrousel[data-lecture="on"] .point[aria-current="true"]::after { animation: none; width: 100%; }
  .diapo .diapo-texte > * { opacity: 1; transform: none; transition: none; }
  .lab * { transition-duration: 0.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1920 : le contenu plafonne à 1344 (max 1600 − 2 × 48), la scène s'étire
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .hero { height: 100vh; min-height: 900px; }
  .hero .objet-terminal { left: 45%; }
  .hero .objet-carte { left: 66%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLETTE (768 – 1279) — relevé à 1024 : H1 68 conservé, hero 816, bento réagencé
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  .lab { --marge: 32px; --h2: 48px; --h2-lh: 56px; }
  .hero { height: 768px; }
  .hero .objet-terminal { left: 38%; top: 180px; width: 460px; height: 250px; }
  .hero .objet-carte { left: 62%; top: 120px; width: 320px; height: 200px; }
  .hero .main-b { right: -120px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento .b1 { grid-column: 1; grid-row: auto; min-height: 192px; }
  .bento .b2, .bento .b3, .bento .b4 { grid-column: auto; grid-row: auto; height: 408px; }
  .bento .b5 { grid-column: 1 / 3; grid-row: auto; height: 408px; }
  .cartes { grid-template-columns: 1fr 1fr; }
  .carte--claire { height: 600px; }
  
  
  .constellation { height: 420px; }
  .colonnes-centrees { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  
  
  
  
  .carrousel-piste { padding: 0 var(--marge); }
  .diapo { width: min(1022px, calc(100vw - 2 * var(--marge) - 48px)); height: 520px; scroll-snap-align: start; }
  .securite > .conteneur { grid-template-columns: 1fr; row-gap: 32px; }
  .carte--nuit { height: auto; }
  .carte--finale .mk-tel { right: 60px; }
  .carte--finale .objet-carte { right: 260px; }
  .carte--finale .main-a { right: -60px; }
  .pied-haut > .conteneur { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .pied-mot { font-size: 88px; line-height: 70px; }
  .pied-identite { flex-wrap: wrap; row-gap: 32px; }
  .pied-droite { flex-wrap: wrap; }
  .barre-onglets { display: none; }
  
  
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE (< 768) — relevé à 390 : marges 16, rayons 16, H1 28/36, H2 32/40
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .lab { --marge: 16px; --gout: 16px; --r-carte: 16px; --h1: 28px; --h1-lh: 36px; --h2: 32px; --h2-lh: 40px; --h2s: 28px; --h2s-lh: 36px; --h3: 24px; --h3-lh: 32px; --corps: 16px; --corps-lh: 26px; }
  .section > .conteneur { padding-top: 48px; padding-bottom: 48px; }
  .tete-section { flex-direction: column; align-items: flex-start; gap: 24px; }
  .tete-section + * { margin-top: 32px; }
  .bouton { height: 48px; padding: 10px 16px; font-size: 16px; line-height: 26px; }
  .bouton--contour { padding: 9px 16px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  .hero { height: 892px; padding-top: 48px; }
  .hero-contenu { padding-top: 16px; padding-bottom: 48px; }
  .hero-texte { gap: 16px; }
  .hero-actions { margin-top: 40px; }
  .scene--bureau-clair .portable { left: 60px; top: 140px; width: 420px; height: 280px; }
  .scene--bureau-clair .notification { left: 40px; top: 90px; width: 300px; font-size: 13px; }
  .scene--bureau-clair .personne { left: -200px; }
  .hero .scene--carte .objet-carte { left: 20px; top: 160px; width: 420px; height: 260px; font-size: 22px; }
  .hero .scene--carte .main-a { left: 120px; top: 300px; }
  .hero .objet-terminal { left: 20px; top: 140px; width: 320px; height: 180px; transform: rotate(-28deg); }
  .hero .objet-carte { left: 160px; top: 90px; width: 240px; height: 150px; font-size: 16px; transform: rotate(-36deg); }
  .hero .main-a { left: -120px; top: 80px; width: 380px; height: 400px; }
  .hero .main-b { right: -160px; top: 60px; }

  .section-preuve > .conteneur { padding: 32px 16px 40px; }
  .preuve { grid-template-columns: 1fr; row-gap: 16px; }
  .preuve-item p { font-size: 16px; line-height: 26px; }
  .preuve-item p { max-width: 100%; }

  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 16px; }
  .bento .b1 { grid-column: 1 / 3; grid-row: 1; min-height: 130px; }
  .bento .b5 { grid-column: 1 / 3; grid-row: 2; height: 470px; }
  .bento .b2 { grid-column: 1; grid-row: 3; height: 260px; }
  .bento .b4 { grid-column: 2; grid-row: 3; height: 260px; }
  .bento .b3 { grid-column: 1 / 3; grid-row: 4; height: 440px; }
  .bento .b2 .carte-visuel, .bento .b4 .carte-visuel { display: none; }
  .bento .b2 .icone-mobile, .bento .b4 .icone-mobile { display: grid; background: var(--n5); color: var(--n10); width: 40px; height: 40px; }
  .bento .b2 .icone-mobile svg, .bento .b4 .icone-mobile svg { width: 20px; height: 20px; }
  .carte-texte { padding: 16px; }
  .bento .b2 h3, .bento .b4 h3 { font-size: 20px; line-height: 26px; }
  .bento .b2 p, .bento .b4 p { font-size: 15px; line-height: 22px; }
  .bento .b5 .objet-carte { right: -120px; bottom: -110px; width: 520px; height: 320px; font-size: 28px; }
  .bento .b3 .mk-tel { left: 24px; bottom: -280px; width: 200px; }
  .bento-cta { display: block; margin-top: 32px; }
  .section-bento .tete-section .bouton { display: none; }

  .cartes { grid-template-columns: 1fr; gap: 16px; }
  .carte--claire { height: 560px; }
  .carte--claire .carte-visuel { height: 320px; }
  .carte-fleche { right: 16px; top: 16px; }

  
  
  
  
  
  .constellation { height: 360px; margin-top: 40px; overflow: hidden; }
  .constellation .disque, .constellation .noyau, .constellation .anneau { top: 75%; }
  .constellation .d1 { width: 480px; height: 480px; } .constellation .d2 { width: 330px; height: 330px; } .constellation .d3 { width: 220px; height: 220px; }
  .constellation .noyau { width: 130px; height: 130px; font-size: 26px; }
  .anneau--ext .satellite { --r: 240px !important; } .anneau--int .satellite { --r: 165px !important; }
  .satellite { width: 76px; height: 76px; font-size: 22px; }
  .satellite--petit { width: 60px; height: 60px; font-size: 18px; }

  .colonnes-centrees { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 16px; margin-top: 32px !important; }
  .actions-centrees { margin-top: 24px; }
  .bande-section { display: none; }
  .carte--sombre { height: 592px; }

  
  
  
  
  
  
  
  

  .carrousel { margin-top: 24px; }
  .carrousel-piste { padding: 0 16px; gap: 16px; scroll-padding: 0 16px; }
  .diapo { width: 306px; height: 592px; scroll-snap-align: start; }
  .diapo-citation { font-size: 22px; line-height: 30px; }
  .diapo-logo { font-size: 24px; }
  .diapo .silhouette { width: 260px; height: 320px; transform: translateX(-50%); }
  .carrousel-commandes { height: 86px; }
  .carrousel-pause { display: none; }
  .temoignages { padding-bottom: 16px; }
  .section.temoignages > .conteneur { padding-bottom: 0; }

  .securite > .conteneur { padding: 48px 16px; row-gap: 24px; }
  .carte--nuit { grid-template-columns: 1fr; row-gap: 32px; padding: 32px 24px; text-align: center; }
  .garantie { align-items: center; }

  .final { padding: 0 16px 24px; }
  .carte--finale { height: 774px; align-items: flex-start; text-align: center; }
  .carte--finale .carte-texte { padding: 56px 16px 0; max-width: 100%; align-items: center; }
  .carte--finale .bouton { align-self: center; margin-top: 32px; }
  .carte--finale .mk-tel { right: 20px; top: 330px; transform: rotate(-6deg) scale(0.8); transform-origin: top right; }
  .carte--finale .objet-carte { right: auto; left: 10px; top: 470px; width: 180px; height: 110px; }
  .carte--finale .main-a { right: -100px; top: 420px; width: 360px; height: 360px; }

  .pied-haut > .conteneur { grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 24px 16px 40px; }
  .pied-haut .pied-avant { grid-column: 1 / 3; }
  .pied-tarifs { width: 100%; gap: 12px; padding: 20px 16px; }
  .pied-notes { flex-direction: row; justify-content: space-between; padding: 0; margin: 24px 0 32px; gap: 8px; }
  .pied-note { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 22px; }
  .pied-note span { margin-left: 0; font-size: 13px; }
  .pied-colonne h4 { font-size: 15px; }
  .pied-colonne ul { margin-bottom: 32px; }
  .pied-colonne li a { font-size: 15px; line-height: 28px; }
  .pied-bas > .conteneur { padding: 40px 16px 48px; }
  .pied-identite { flex-direction: column; align-items: flex-start; gap: 32px; }
  .pied-mot { font-size: 96px; line-height: 76px; }
  .pied-droite { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pied-social-badges { align-items: flex-start; }
  .pied-legal-liens { gap: 8px 16px; margin-top: 32px; }
  
}

/* ══════════════════════════════════════════════════════════════════════════
   TEST DE TRANSFORMATION IMPRA — couche de contenu et de marque.
   Posée PAR-DESSUS le master de composition : aucune règle de géométrie,
   de grille, de rythme ou de mouvement n'est modifiée. Ce bloc :
     1. remplace les neutres sombres par la famille navy IMPRA (jetons) ;
     2. fait du bleu IMPRA le signal des CTA principaux ;
     3. accueille les captures réelles dans les emplacements existants ;
     4. pose le logo officiel et un pied de page IMPRA compact.
   ══════════════════════════════════════════════════════════════════════════ */
.lab.lab--impra {
  --n0: #0F172E; --n1: #0F172E; --n2: #121A33; --n3: #16203A; --n4: #1B2644; --n5: #2A3656;
  --n6: #5B6478; --n7: #98A2B3; --n8: #DCE3F0; --n9: #F5F7FB; --n10: #fff;
  --accent: #1F74E7;
  --bleu: #1F74E7; --bleu-vif: #4D94F5;
  --logo-encre: #0F172A;
  --impra-navy: #0F172E;    /* LE fond sombre de la page : fin du dégradé de preuve, parcours, mise en route, sécurité, cartes navy, carte finale (26/09/2026) */
  --impra-clair: #F5F7FB;   /* le fond clair bleuté des cinq cartes */
}

/* ── 1. Les noirs codés en dur deviennent navy ─────────────────────────── */

.lab--impra .hero .voile { background: linear-gradient(90deg, rgba(15, 23, 46, 0.78) 0%, rgba(15, 23, 46, 0.5) 40%, rgba(15, 23, 46, 0) 66%), linear-gradient(rgba(15, 23, 46, 0) 58%, var(--n1) 100%); }
.lab--impra .scene--bureau-clair .portable { left: 780px; top: 150px; }
.lab--impra .scene--bureau-clair .notification { left: 1080px; top: 130px; }
.lab--impra .carte--brume { background: linear-gradient(160deg, #1D2848 0%, #121A33 60%, #17213D 100%); }
.lab--impra .bento .b5 .scene { background: linear-gradient(160deg, #2A3A62 0%, #1B2644 40%, #121A33 75%, #0F172E 100%); }
.lab--impra .bento .b3 .voile { background: linear-gradient(rgba(15, 23, 46, 0.62) 0%, rgba(15, 23, 46, 0.2) 45%, rgba(15, 23, 46, 0) 70%); }
.lab--impra .carte--sombre .voile { background: linear-gradient(rgba(15, 23, 46, 0.74) 0%, rgba(15, 23, 46, 0.7) 20%, rgba(15, 23, 46, 0) 62%); }
.lab--impra .scene--carte { background: radial-gradient(80% 70% at 55% 40%, #22335C 0%, #121A33 55%, #0A1022 100%); }
.lab--impra .carte--nuit::before { background: conic-gradient(from var(--angle), rgba(77, 148, 245, 0) 0%, rgba(77, 148, 245, 0.55) 12%, rgba(77, 148, 245, 0) 30%); }
.lab--impra .garantie svg { color: var(--bleu-vif); }

/* ── 2. Le bleu, signal des CTA ─────────────────────────────────────────── */
.bouton--bleu { background: var(--bleu); color: #fff; }
.bouton--bleu:hover { background: #1A66CF; }

/* ── 3. Logo officiel : tracés du fichier de marque, l'encre navy suit le
       fond (règle de l'application mobile), le bleu ne change jamais ──── */

/* ── 4. Hero : sous-titre et deux CTA, dans la même composition ──────── */
.lab--impra .hero-preuve { font-size: 14px; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.78); }
.lab--impra .hero-texte { gap: 20px; }
.hero-sous-titre { max-width: 640px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.86); }
.lab--impra .hero-actions { margin-top: 36px; }
.lab--impra .hero-actions .bouton--contour { color: #fff; }

/* ── 5. Captures réelles dans les emplacements existants ─────────────── */
.capture { margin: 0; display: block; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 46, 0.28), 0 0 0 1px rgba(15, 23, 46, 0.06); }
.capture img { display: block; width: 100%; height: auto; }
.fenetre-produit { position: absolute; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.fenetre-produit img { display: block; width: 100%; height: auto; }
.mk-tel .ecran > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mk-tablette .ecran--capture { padding: 0; }
.mk-tablette .ecran--capture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* hero · plan A : l'écran du portable est le vrai tableau de bord */
.scene--bureau-clair .portable .ecran-produit { position: absolute; left: 4%; right: 4%; top: 4%; bottom: 6%; border-radius: 8px; overflow: hidden; background: #fff; }
.scene--bureau-clair .portable .ecran-produit img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.scene--bureau-clair .notification i { display: grid; place-items: center; background: var(--bleu); color: #fff; }
.scene--bureau-clair .notification i svg { width: 22px; height: 22px; }
/* hero · plan B : le téléphone tenu en main */
.hero .plan-tel .mk-tel { position: absolute; left: 980px; top: 70px; width: 330px; height: 690px; border-radius: 52px; transform: rotate(-14deg); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.hero .plan-tel .mk-tel .ecran { border-radius: 42px; }
/* hero · plan C : la page Stock, en fenêtre inclinée */
.hero .scene--carte .fenetre-produit { left: 780px; top: 90px; width: 860px; transform: perspective(2200px) rotateY(-16deg) rotateX(6deg) rotateZ(-4deg); }
/* S3 · bento */
.lab--impra .bento .b2 .mk { align-items: stretch; }
.lab--impra .bento .b4 .capture--haut { position: absolute; left: 12px; right: 60px; bottom: 214px; transform: rotate(-3deg); }
.lab--impra .bento .b4 .capture--bas { position: absolute; left: 24px; right: 24px; bottom: 56px; }
.lab--impra .bento .b5 .fenetre-produit { right: -48px; bottom: -110px; width: 580px; transform: rotate(-8deg); }
.lab--impra .carte:hover .capture.mk-flottant { transform: translateY(-6px); }
.lab--impra .bento .b4:hover .capture--haut { transform: rotate(-3deg) translateY(-6px); }
/* S4 · parcours : étape + captures superposées */
.etape { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu); margin-bottom: -4px; padding-right: 52px; }
.lab--impra .carte--claire .capture--kpis { position: absolute; left: 24px; width: 380px; bottom: 262px; transform: rotate(-2deg); z-index: 2; }
.lab--impra .carte--claire .capture--liste { position: absolute; left: 24px; width: 720px; bottom: 64px; }
.lab--impra .carte--claire .capture--capital { position: absolute; left: 24px; width: 560px; bottom: 120px; }
.lab--impra .carte--claire .capture--puce { position: absolute; right: 18px; width: 250px; bottom: 44px; z-index: 2; }
.lab--impra .carte--claire:hover .capture--kpis { transform: rotate(-2deg) translateY(-6px); }
/* S5 · les pièces du dossier en orbite */
.note { margin-top: 16px !important; max-width: 497px; font-size: 14px; line-height: 20px; color: var(--n6); }
.lab--impra .constellation .noyau--dossier { font-size: 26px; line-height: 30px; text-align: center; letter-spacing: -0.02em; }
.lab--impra .satellite > .piece { flex-direction: column; gap: 6px; background: #fff; color: var(--n1); font-size: 13px; line-height: 15px; letter-spacing: 0; text-align: center; padding: 8px; box-shadow: 0 10px 30px rgba(15, 23, 46, 0.12), 0 0 0 1px rgba(15, 23, 46, 0.06); display: flex; align-items: center; justify-content: center; }
.lab--impra .satellite > .piece svg { width: 26px; height: 26px; color: var(--bleu); }
.lab--impra .satellite > .piece b { font-weight: 600; }
.lab--impra .satellite > .piece--navy { background: var(--n1); color: #fff; }
.lab--impra .satellite > .piece--navy svg { color: var(--bleu-vif); }
.lab--impra .satellite > .piece--bleu { background: var(--bleu); color: #fff; }
.lab--impra .satellite > .piece--bleu svg { color: #fff; }
.lab--impra .satellite--petit > .piece { font-size: 11px; line-height: 13px; }
.lab--impra .satellite--petit > .piece svg { width: 20px; height: 20px; }
/* l'orbite reste à droite de sa colonne : décalée plutôt que coupée */

/* S7 · bande : le cockpit */
.lab--impra .bande .fenetre { position: absolute; left: 120px; top: 84px; width: 480px; }
.lab--impra .bande .chip { position: absolute; left: 330px; top: 300px; width: 380px; padding: 0; display: block; border-radius: 14px; }
/* S8 · piliers : la feuille de priorités */
.lab--impra .scene--marbre .capture--feuille { position: absolute; left: 28px; right: -40px; bottom: 36px; transform: rotate(-6deg); }
/* S12 · final : CTA principal + lien */
.final-actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.lab--impra .carte--finale .final-actions .bouton { margin-top: 0; }
.lab--impra .carte--finale .carte-texte { max-width: 620px; }
.lab--impra .carte--finale p { max-width: 500px; }

/* ── 6. Pied de page IMPRA compact ──────────────────────────────────────── */
.pied-impra { background: var(--n0); color: #fff; }
.pied-impra > .conteneur { padding-top: 72px; padding-bottom: 36px; }
.pied-impra-haut { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; column-gap: var(--gout); row-gap: 40px; }
.pied-impra-marque .marque { height: 28px; }
.pied-impra-marque p { margin-top: 20px; max-width: 340px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.72); }
.pied-impra-colonne h4 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.56); }
.pied-impra-colonne ul { margin-top: 16px; }
.pied-impra-colonne li a { display: block; font-size: 16px; line-height: 32px; color: rgba(255, 255, 255, 0.88); transition: color 0.2s; }
.pied-impra-colonne li a:hover { color: var(--bleu-vif); }
.pied-impra-bas { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.6); }
.pied-impra-bas nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied-impra-bas a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .lab--impra .carte:hover .capture.mk-flottant { transform: none; }
}

/* ── Tablette ─────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .hero .plan-tel .mk-tel { left: 60%; top: 60px; width: 230px; height: 480px; }
  .hero .scene--carte .fenetre-produit { left: 38%; top: 90px; width: 700px; }
  /* tablette : le titre occupe toute la largeur — l'écran reste en haut, le voile tient la lecture */
  .lab--impra .hero .voile { background: linear-gradient(rgba(15, 23, 46, 0) 30%, rgba(15, 23, 46, 0.8) 52%, var(--n1) 100%); }
  .lab--impra .bento .b5 .fenetre-produit { width: 520px; }
  .pied-impra-haut { grid-template-columns: 1fr 1fr 1fr; }
  .pied-impra-marque { grid-column: 1 / -1; }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  
  
  
  
  .lab--impra .hero-texte { gap: 14px; }
  .hero-sous-titre { font-size: 16px; line-height: 24px; }
  .lab--impra .hero-actions { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 10px; }
  .lab--impra .hero-actions .bouton { width: 100%; }
  .hero .plan-tel .mk-tel { left: 110px; top: 40px; width: 190px; height: 398px; border-radius: 34px; padding: 7px; }
  .hero .plan-tel .mk-tel .ecran { border-radius: 27px; }
  .lab--impra .hero .voile { background: linear-gradient(rgba(15, 23, 46, 0) 42%, rgba(15, 23, 46, 0.72) 60%, var(--n1) 100%); }
  .hero .scene--carte .fenetre-produit { left: 24px; top: 110px; width: 560px; }
  .scene--bureau-clair .notification { font-size: 12px; line-height: 16px; gap: 10px; padding: 10px 12px; }
  .scene--bureau-clair .notification i { width: 32px; height: 32px; }
  .lab--impra .bento .b5 .fenetre-produit { right: -80px; bottom: -40px; width: 380px; }
  .lab--impra .carte--claire .capture--kpis { width: 300px; bottom: 196px; }
  .lab--impra .carte--claire .capture--liste { width: 560px; bottom: 44px; }
  .lab--impra .carte--claire .capture--capital { width: 440px; bottom: 96px; }
  .lab--impra .carte--claire .capture--puce { width: 210px; bottom: 30px; }
  .lab--impra .satellite > .piece b { display: none; }
  .lab--impra .satellite > .piece svg { width: 24px; height: 24px; }
  .lab--impra .constellation .noyau--dossier { font-size: 17px; line-height: 20px; }
  .lab--impra .carte--finale .final-actions { justify-content: center; margin-top: 28px; }
  .lab--impra .carte--finale .mk-tel { right: 50%; transform: translateX(50%) rotate(-6deg) scale(0.8); transform-origin: top center; top: 360px; }
  .pied-impra > .conteneur { padding-top: 48px; }
  .pied-impra-haut { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .pied-impra-bas { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .cta-suite { display: none; }
}
@media (max-width: 767px) {
  .lab--impra .lab-avert { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PASSE STRUCTURE + COPY (15/09/2026) — .lab--v2
   En-tête sans barre, hero allégé, réassurance à l'identité IMPRA, section
   « usages » (choix à gauche, produit à droite), profils, claims marqués,
   badges de store neutralisés, CTA final apaisé. Toujours posé par-dessus le
   master : pas une règle de grille modifiée.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── En-tête : 80 px, rien au-dessus ───────────────────────────────────── */
.lab--v2 .barre-onglets, .lab--v2 .menu-onglets { display: none; }

.lab--v2 .hero { height: 900px; padding-top: 0; }
.lab--v2 .hero .voile, .lab--v2 .plans-hero { inset: 0; }
.lab--v2 .hero-contenu { padding-top: 80px; }

/* ── Hero allégé : scènes claires, voile qui n'assombrit que le bas ─────── */
.lab--v2 .scene--bureau-clair { background: radial-gradient(90% 70% at 30% 35%, #eef0f4 0%, #cfd6e2 45%, #6b7791 100%); }
.lab--v2 .scene--bureau-clair .plan { background: linear-gradient(180deg, #e2cfb2, #b9976a); }
.lab--v2 .scene--bureau-clair .forme.f1 { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); }
.lab--v2 .scene--bureau-clair .personne { background: radial-gradient(ellipse at 50% 30%, rgba(228, 214, 198, 0.95), rgba(205, 190, 172, 0.9) 55%, rgba(205, 190, 172, 0) 72%); }
.lab--v2 .scene--comptoir { background: radial-gradient(90% 70% at 60% 20%, #d9d3c9 0%, #9c9082 45%, #4d4438 100%); }
.lab--v2 .scene--comptoir .plan { background: linear-gradient(180deg, #d8b98f, #a8845a); }
.lab--v2 .scene--comptoir .forme.f1 { background: radial-gradient(closest-side, rgba(255, 245, 235, 0.8), rgba(255, 245, 235, 0)); }
.lab--v2 .scene--comptoir .forme.f2 { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); }
.lab--v2 .scene--carte { background: radial-gradient(85% 70% at 60% 30%, #e6ebf5 0%, #b7c3da 45%, #3f4f78 100%); }
.lab--v2 .hero .voile { background: linear-gradient(90deg, rgba(15, 23, 46, 0.46) 0%, rgba(15, 23, 46, 0.18) 40%, rgba(15, 23, 46, 0) 62%), linear-gradient(rgba(15, 23, 46, 0) 50%, rgba(15, 23, 46, 0.7) 76%, var(--n1) 100%); }
.lab--v2 .hero .plan-tel .mk-tel { top: 40px; }
.lab--v2 .hero .scene--carte .fenetre-produit { top: 60px; }
.lab--v2 .scene--bureau-clair .portable { top: 110px; }
.lab--v2 .scene--bureau-clair .notification { top: 90px; }

/* ── Badges au-dessus du titre : compacts, jamais trois gros boutons ────── */
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hero-badges[hidden] { display: none; }
.store-badge { display: inline-flex; align-items: center; height: 30px; opacity: 0.92; transition: opacity 0.2s; }
.store-badge img { height: 30px; width: auto; display: block; }
.store-badge--google img { height: 39px; margin: -4.5px 0; }          /* × 1,302 : marge de protection du PNG Google */
.store-badge[aria-disabled="true"] { cursor: default; }
a.store-badge:hover { opacity: 1; }
.hero-note { display: inline-flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.28); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.86); }
.hero-note svg { width: 14px; height: 14px; color: #F5B300; }
.hero-note b { font-weight: 700; color: #fff; }
.lab--v2 .hero-texte { gap: 18px; }
.lab--v2 .hero-texte h1 { max-width: 16ch; }

/* ── Claims à vérifier : étiquette en laboratoire, retrait hors laboratoire ── */
[data-claim] { position: relative; }
.a-verifier::after { content: "à vérifier"; position: absolute; top: -12px; right: -6px; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: #b5541c; padding: 2px 6px; border-radius: 4px; pointer-events: none; }
.hero-note.a-verifier::after { top: -16px; right: 0; }

/* ── Réassurance : une bande IMPRA, pas trois pastilles ─────────────────── */
.lab--v2 .section-preuve > .conteneur { padding-top: 0; padding-bottom: 96px; }
.preuve--impra { grid-template-columns: repeat(3, 1fr); column-gap: 0; text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 48px; }
.preuve--impra .preuve-item { align-items: flex-start; padding: 8px 40px 8px 0; border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: 32px; }
.preuve--impra .preuve-item:first-child { border-left: 0; padding-left: 0; }
.preuve-chiffre { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.preuve-chiffre + p { margin-top: 10px; max-width: 320px; color: rgba(255, 255, 255, 0.72); }

/* ── Intro de section sous le H2 ────────────────────────────────────────── */
.intro-section { margin-top: 16px; max-width: 640px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.72); }
.section--papier .intro-section { color: var(--n6); }
.tete-centree .intro-section { margin: 16px auto 0; }
.lab--v2 .tete-section > div { max-width: 820px; }

/* ── S8 · Usages : choix à gauche, produit à droite ─────────────────────── */
.section-usages > .conteneur { padding-top: 80px; padding-bottom: 80px; }
.usages { display: grid; grid-template-columns: 5fr 7fr; column-gap: 48px; align-items: center; }
.usages-texte h2 { max-width: 520px; }
.usages-liste { margin-top: 40px; display: flex; flex-direction: column; border-top: 1px solid var(--n8); }
.usage { display: flex; flex-direction: column; gap: 6px; padding: 20px 0 20px 20px; border-bottom: 1px solid var(--n8); text-align: left; position: relative; color: var(--n6); transition: color 0.25s var(--ease); }
.usage::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 2px; background: transparent; transition: background-color 0.25s var(--ease); }
.usage[aria-selected="true"] { color: var(--n1); }
.usage[aria-selected="true"]::before { background: var(--bleu); }
.usage:hover { color: var(--n1); }
.usage-titre { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.012em; }
.usage-texte { font-size: 17px; line-height: 26px; max-width: 460px; }
.usages-cta { margin-top: 32px; align-self: flex-start; }
.usages-visuel { position: relative; height: 560px; border-radius: var(--r-carte); overflow: hidden; background: var(--n9); }
.usages-ecran { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s var(--ease); }
.usages-ecran.est-actif { opacity: 1; }
.usages-ecran[hidden] { display: block; }
.usages-ecran .mk-tel { position: absolute; left: 50%; top: 56px; width: 300px; height: 610px; border-radius: 48px; transform: translateX(-50%) rotate(-3deg); }
.usages-ecran .mk-tel .ecran { border-radius: 38px; }
.usages-fenetre { position: absolute; left: 48px; right: -160px; top: 64px; }
.usages-fenetre--haut { left: 48px; right: 220px; top: 56px; }
.usages-ecran .mk-tel--petit { left: auto; right: 24px; top: 150px; width: 220px; height: 450px; transform: rotate(6deg); }

/* ── S9 · Profils : les textes toujours visibles, blocs propres ─────────── */

.lab--v2 .scene--atelier { background: radial-gradient(90% 70% at 40% 70%, #2f4f8f 0%, #1b2e57 50%, #0f172e 100%); }
.lab--v2 .scene--chantier { background: radial-gradient(90% 70% at 50% 60%, #4d94f5 0%, #1f4f9c 45%, #0f172e 100%); }
.lab--v2 .scene--commerce { background: radial-gradient(90% 70% at 50% 70%, #6b7fa8 0%, #2b3a63 50%, #0f172e 100%); }

/* ── S11 · Sécurité : une phrase de plus, rien d'autre ──────────────────── */
.securite-intro { margin-top: 16px; max-width: 420px; color: rgba(255, 255, 255, 0.72); }
.lab--v2 .securite-texte .lien-fleche { margin-top: 20px; }

/* ── S12 · CTA final apaisé ─────────────────────────────────────────────── */
.lab--v2 .carte--finale .final-actions .bouton--contour { color: #fff; }
.final-micro { margin-top: 16px !important; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.6) !important; }

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .lab--v2 .hero { height: 768px; }
  .lab--v2 .hero-contenu { padding-top: 64px; }
  .usages { grid-template-columns: 1fr; row-gap: 40px; }
  .usages-visuel { height: 520px; }
  .usages-fenetre { right: -80px; }
  
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .lab--v2 .hero { height: 892px; padding-top: 0; }
  .lab--v2 .hero-contenu { padding-top: 64px; }
  .lab--v2 .hero .voile { background: linear-gradient(rgba(15, 23, 46, 0) 36%, rgba(15, 23, 46, 0.78) 58%, var(--n1) 100%); }
  .hero-badges { gap: 8px 12px; }
  .store-badge { height: 26px; } .store-badge img { height: 26px; } .store-badge--google img { height: 34px; margin: -4px 0; }
  .hero-note { padding-left: 10px; font-size: 13px; }
  .lab--v2 .hero-texte h1 { max-width: none; }
  .lab--v2 .section-preuve > .conteneur { padding: 0 16px 48px; }
  .preuve--impra { grid-template-columns: 1fr; row-gap: 0; padding-top: 32px; }
  .preuve--impra .preuve-item { border-left: 0; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .preuve--impra .preuve-item:last-child { border-bottom: 0; }
  .preuve-chiffre { font-size: 26px; line-height: 32px; }
  .section-usages > .conteneur { padding: 48px 16px; }
  .usages { grid-template-columns: 1fr; row-gap: 24px; }
  .usages-liste { margin-top: 24px; }
  .usage { padding: 16px 0 16px 16px; }
  .usage-titre { font-size: 19px; line-height: 26px; }
  .usage-texte { font-size: 16px; line-height: 24px; }
  .usages-cta { margin-top: 24px; }
  .usages-visuel { height: 420px; border-radius: 16px; }
  .usages-ecran .mk-tel { width: 220px; height: 450px; top: 40px; border-radius: 36px; padding: 8px; }
  .usages-ecran .mk-tel .ecran { border-radius: 28px; }
  .usages-fenetre { left: 16px; right: -120px; top: 48px; }
  .usages-fenetre--haut { right: 40px; }
  .usages-ecran .mk-tel--petit { display: none; }
  
  
}

/* ── Retouches après première capture ───────────────────────────────────── */
.tete-centree { text-align: center; max-width: 960px; margin: 0 auto; }
.lab--v2 .tete-section .intro-section { margin-top: 20px; }
.lab--v2 .securite-texte .securite-intro { margin-top: 20px; }
@media (max-width: 767px) {
  .lab--v2 .carte--finale { height: 840px; }
  .lab--v2 .carte--finale .mk-tel { top: 450px; }
  .lab--v2 .final-micro { margin-top: 12px !important; }
}
@media (max-width: 767px) {
  /* les textes b2/b4 sont plus longs que dans le master : hauteur naturelle */
  .lab--v2 .bento .b2, .lab--v2 .bento .b4 { height: auto; min-height: 260px; }
}
@media (max-width: 767px) {
  /* plan A en mobile : le portable entre dans le cadre au lieu de rester hors champ */
  .lab--v2 .scene--bureau-clair .portable { left: 30px; top: 60px; width: 420px; height: 260px; }
  .lab--v2 .scene--bureau-clair .notification { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PASSE PREMIUM (15/09/2026) — .lab--v3
   Moins de texte, sections plus courtes, système de boutons unique, H2
   maîtrisés, fonds alternés. Toujours posé par-dessus le master et la v2.
   ══════════════════════════════════════════════════════════════════════════ */
.lab--v3 { --h1: 64px; --h1-lh: 70px; --h2: 44px; --h2-lh: 52px; --h2s: 34px; --h2s-lh: 42px; --gris: #F3F5F9; --papier: #FBFBFD; }
.lab--v3 h2 { text-wrap: balance; }
.lab--v3 .section--papier { background: var(--papier); }
.lab--v3 .section--gris { background: var(--gris); color: var(--n1); }
.lab--v3 .intro-section { margin-top: 16px; max-width: 560px; font-size: 18px; line-height: 28px; }
.lab--v3 .tete-section .intro-section { margin-top: 16px; }
.lab--v3 .tete-section + * { margin-top: 48px; }
.lab--v3 .tete-section .tete-lien { flex: none; margin-top: 14px; }

/* ── Système de boutons : primaire / secondaire / tertiaire ─────────────── */
.lab--v3 .bouton { height: 48px; padding: 0 20px; border-radius: 10px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.005em; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.lab--v3 .bouton--bleu { background: var(--bleu); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.lab--v3 .bouton--bleu:hover { background: #1A66CF; }
.lab--v3 .bouton--contour { border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; background: transparent; }
.lab--v3 .bouton--contour:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }
.lab--v3 .section--papier .bouton--contour, .lab--v3 .section--gris .bouton--contour { border-color: rgba(15, 23, 46, 0.18); color: var(--n1); }
.lab--v3 .section--papier .bouton--contour:hover, .lab--v3 .section--gris .bouton--contour:hover { border-color: rgba(15, 23, 46, 0.45); background: rgba(15, 23, 46, 0.03); }
.lab--v3 .carte--finale .bouton--contour { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.lab--v3 .lien-fleche { font-size: 16px; line-height: 24px; font-weight: 500; gap: 6px; }
.lab--v3 .lien-fleche svg { width: 14px; height: 14px; transition: none; }
.lab--v3 .lien-fleche:hover svg { transform: none; }
.lab--v3 .lien-fleche:hover { color: var(--bleu-vif); }
.lab--v3 .section--papier .lien-fleche:hover, .lab--v3 .section--gris .lien-fleche:hover { color: var(--bleu); }

.lab--v3 .carte--claire:hover { transform: none; }
.lab--v3 .bento .b4:hover .capture--haut { transform: rotate(-3deg); }

/* ── Hero : 760 px, respiration ─────────────────────────────────────────── */
.lab--v3 .hero { height: 760px; }
.lab--v3 .hero-contenu { padding-top: 80px; padding-bottom: 56px; }
.lab--v3 .hero-texte { gap: 16px; }
.lab--v3 .hero-texte h1 { max-width: 14ch; }
.lab--v3 .hero-preuve { height: auto; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.78); }
.lab--v3 .hero-sous-titre { max-width: 520px; font-size: 19px; line-height: 30px; }
.lab--v3 .hero-actions { margin-top: 32px; gap: 12px; }
.lab--v3 .hero-badges { margin-bottom: 6px; gap: 8px 12px; }
.lab--v3 .store-badge { height: 24px; opacity: 0.8; }
.lab--v3 .store-badge img { height: 24px; }
.lab--v3 .store-badge--google img { height: 31px; margin: -3.5px 0; }
.lab--v3 .hero-note { padding-left: 12px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.7); }
.lab--v3 .hero-note svg { width: 12px; height: 12px; }
.lab--v3 .hero .voile { background: linear-gradient(90deg, rgba(15, 23, 46, 0.42) 0%, rgba(15, 23, 46, 0.16) 40%, rgba(15, 23, 46, 0) 62%), linear-gradient(rgba(15, 23, 46, 0) 46%, rgba(15, 23, 46, 0.7) 74%, var(--n1) 100%); }
.lab--v3 .scene--bureau-clair .portable { top: 40px; left: 800px; width: 600px; height: 390px; }
.lab--v3 .scene--bureau-clair .notification { top: 30px; }
.lab--v3 .hero .plan-tel .mk-tel { top: 10px; height: 640px; }
.lab--v3 .hero .scene--carte .fenetre-produit { top: 30px; }

/* ── Réassurance : une respiration, pas une section ─────────────────────── */
.lab--v3 .section-preuve > .conteneur { padding-top: 0; padding-bottom: 56px; }
.lab--v3 .preuve--impra { padding-top: 32px; }
.lab--v3 .preuve--impra .preuve-item { padding: 0 32px; }
.lab--v3 .preuve--impra .preuve-item:first-child { padding-left: 0; }
.lab--v3 .preuve-chiffre { font-size: 28px; line-height: 34px; }
.lab--v3 .preuve-chiffre + p { margin-top: 6px; font-size: 16px; line-height: 24px; }

/* ── S3 bento : titres courts, cartes lisibles ──────────────────────────── */
.lab--v3 .section-bento > .conteneur { padding-top: 88px; padding-bottom: 96px; }
.lab--v3 .carte-texte { gap: 10px; }
.lab--v3 .carte-texte p { font-size: 17px; line-height: 26px; }
.lab--v3 .section--encre .carte-texte p { color: rgba(255, 255, 255, 0.78); }
.lab--v3 .carte--claire .carte-texte p { color: var(--n5); }

/* ── S4 parcours : 560 px ───────────────────────────────────────────────── */
.lab--v3 .carte--claire { height: 560px; background: radial-gradient(60% 50% at 50% 60%, #E6EAF2 0%, #F1F3F8 100%); }
.lab--v3 .carte--claire .carte-visuel { height: 360px; }
.lab--v3 .etape { margin-bottom: -2px; }

/* ── S5 documents : respiration plus courte ─────────────────────────────── */

.lab--v3 .constellation { height: 440px; transform: translateX(64px) scale(0.86); }

/* ── S6 gestion : plus serrée ───────────────────────────────────────────── */
.lab--v3 #gestion > .conteneur { padding-top: 88px; padding-bottom: 88px; }
.lab--v3 .tete-centree .intro-section { margin: 14px auto 0; }
.lab--v3 .tete-centree + .colonnes-centrees { margin-top: 48px; }
.lab--v3 .colonnes-centrees { grid-auto-rows: auto; }
.lab--v3 .colonne-centree p { margin-top: 8px; max-width: 300px; color: var(--n5); }
.lab--v3 .actions-centrees { margin-top: 40px; }

/* ── S8 usages ──────────────────────────────────────────────────────────── */
.lab--v3 .section-usages { background: var(--gris); }
.lab--v3 .section-usages > .conteneur { padding-top: 88px; padding-bottom: 88px; }
.lab--v3 .usages-liste { margin-top: 32px; border-top-color: rgba(15, 23, 46, 0.1); }
.lab--v3 .usage { border-bottom-color: rgba(15, 23, 46, 0.1); padding: 18px 0 18px 20px; gap: 4px; }
.lab--v3 .usage-titre { font-size: 20px; line-height: 28px; }
.lab--v3 .usage-texte { font-size: 16px; line-height: 24px; }
.lab--v3 .usages-cta { margin-top: 28px; }
.lab--v3 .usages-visuel { height: 500px; }
.lab--v3 .usages-ecran .mk-tel { top: 40px; }

/* ── S9 profils : 360 px, texte lisible ─────────────────────────────────── */
.lab--v3 #profils > .conteneur { padding-top: 88px; padding-bottom: 88px; }

/* ── S11 sécurité : petite ──────────────────────────────────────────────── */
.lab--v3 .securite > .conteneur { padding-top: 72px; padding-bottom: 72px; grid-template-columns: 1fr 660px; }
.lab--v3 .securite-texte .lien-fleche { margin-top: 16px; }
.lab--v3 .carte--nuit { height: auto; padding: 36px 40px; column-gap: 24px; }
.lab--v3 .garantie { gap: 16px; }
.lab--v3 .garantie svg { width: 40px; height: 40px; color: var(--bleu-vif); }
.lab--v3 .garantie p { font-size: 17px; line-height: 24px; font-weight: 600; }

/* ── S12 CTA final : 480 px ─────────────────────────────────────────────── */
.lab--v3 .final { padding: 24px 20px 40px; }
.lab--v3 .carte--finale { height: 480px; }
.lab--v3 .carte--finale .carte-texte { padding-left: 80px; }
.lab--v3 .carte--finale p { margin-top: 16px; font-size: 19px; line-height: 30px; }
.lab--v3 .final-actions { margin-top: 32px; gap: 12px; }
.lab--v3 .final-micro { margin-top: 14px !important; font-size: 14px !important; line-height: 20px !important; }
.lab--v3 .carte--finale .mk-tel { top: 120px; right: 240px; }
.lab--v3 .carte--finale .main-a { top: 240px; }

/* ── Pied ───────────────────────────────────────────────────────────────── */
.lab--v3 .pied-impra-marque p { max-width: 300px; }

@media (max-width: 1279px) {
  .lab--v3 { --h2: 38px; --h2-lh: 46px; --h2s: 30px; --h2s-lh: 38px; }
  .lab--v3 .hero { height: 680px; }
  .lab--v3 .hero-contenu { padding-top: 64px; }
  .lab--v3 .securite > .conteneur { grid-template-columns: 1fr; row-gap: 32px; }
  .lab--v3 .carte--finale .mk-tel { right: 60px; }
  .lab--v3 .constellation { transform: translateX(0) scale(0.8); }
  
}
@media (max-width: 767px) {
  .lab--v3 { --h1: 34px; --h1-lh: 40px; --h2: 28px; --h2-lh: 36px; --h2s: 26px; --h2s-lh: 34px; }
  .lab--v3 .hero { height: 720px; }
  .lab--v3 .hero-contenu { padding-top: 64px; padding-bottom: 32px; }
  .lab--v3 .hero .voile { background: linear-gradient(rgba(15, 23, 46, 0) 30%, rgba(15, 23, 46, 0.78) 52%, var(--n1) 100%); }
  .lab--v3 .hero-sous-titre { font-size: 17px; line-height: 26px; }
  .lab--v3 .hero-actions { margin-top: 24px; }
  .lab--v3 .scene--bureau-clair .portable { left: 30px; top: 50px; width: 400px; height: 240px; }
  .lab--v3 .store-badge { height: 22px; } .lab--v3 .store-badge img { height: 22px; } .lab--v3 .store-badge--google img { height: 29px; margin: -3.5px 0; }
  .lab--v3 .section-preuve > .conteneur { padding-bottom: 40px; }
  .lab--v3 .preuve--impra { padding-top: 24px; }
  .lab--v3 .preuve--impra .preuve-item { padding: 14px 0; }
  .lab--v3 .preuve-chiffre { font-size: 22px; line-height: 28px; }
  .lab--v3 .section-bento > .conteneur, .lab--v3 #gestion > .conteneur, .lab--v3 .section-usages > .conteneur, .lab--v3 #profils > .conteneur { padding-top: 56px; padding-bottom: 56px; }
  .lab--v3 .tete-section + * { margin-top: 32px; }
  .lab--v3 .tete-section .tete-lien { margin-top: 0; }
  .lab--v3 .carte-texte p { font-size: 16px; line-height: 24px; }
  .lab--v3 .bento .b2, .lab--v3 .bento .b4 { min-height: 200px; }
  .lab--v3 .bento .b3 { height: 400px; }
  .lab--v3 .bento .b5 { height: 420px; }
  .lab--v3 .carte--claire { height: auto; min-height: 420px; }
  
  
  .lab--v3 .constellation { height: 300px; transform: scale(0.7); }
  .lab--v3 .tete-centree + .colonnes-centrees { margin-top: 32px; }
  .lab--v3 .usages-visuel { height: 400px; }
  
  .lab--v3 .securite > .conteneur { padding-top: 56px; padding-bottom: 56px; }
  .lab--v3 .carte--nuit { padding: 28px 24px; grid-template-columns: 1fr; row-gap: 20px; }
  .lab--v3 .garantie { flex-direction: row; align-items: center; gap: 14px; }
  .lab--v3 .garantie svg { width: 32px; height: 32px; }
  .lab--v3 .carte--finale { height: 720px; }
  .lab--v3 .carte--finale .carte-texte { padding: 48px 16px 0; }
  .lab--v3 .carte--finale .mk-tel { top: 340px; }
}

/* ── Retouches après capture (passe premium) ────────────────────────────── */
.lab--v3 .hero-texte h1 { max-width: 16ch; }
.lab--v3 .scene--bureau-clair .portable { top: 96px; left: 830px; width: 560px; height: 360px; }
.lab--v3 .scene--bureau-clair .notification { top: 76px; }
.lab--v3 .bento { grid-template-rows: 176px 176px 360px; }
.lab--v3 .bento .b2 .mk { bottom: -64px; }   /* la capture sort par le bas, comme les autres écrans */
.lab--v3 .bento .b4 .capture--haut { bottom: 236px; }
.lab--v3 .bento .b4 .capture--bas { bottom: 72px; }

@media (max-width: 767px) {
  
  .lab--v3 .scene--bureau-clair .portable { top: 40px; left: 30px; width: 400px; height: 220px; }
  .lab--v3 .constellation { height: 340px; }
}
@media (max-width: 1279px) { .lab--v3 .scene--bureau-clair .portable { left: 620px; width: 520px; height: 340px; } }
@media (max-width: 1023px) { .lab--v3 .scene--bureau-clair .portable { left: 380px; } }
@media (max-width: 1023px) { .lab--v3 { --h1: 52px; --h1-lh: 58px; } .lab--v3 .scene--bureau-clair .portable { left: 460px; top: 70px; width: 460px; height: 300px; } .lab--v3 .hero .voile { background: linear-gradient(90deg, rgba(15, 23, 46, 0.5) 0%, rgba(15, 23, 46, 0.2) 45%, rgba(15, 23, 46, 0) 70%), linear-gradient(rgba(15, 23, 46, 0) 40%, rgba(15, 23, 46, 0.75) 70%, var(--n1) 100%); } }
@media (max-width: 767px) { .lab--v3 { --h1: 34px; --h1-lh: 40px; } .lab--v3 .scene--bureau-clair .portable { left: 30px; top: 40px; width: 400px; height: 220px; } }

/* ══════════════════════════════════════════════════════════════════════════
   REFONTE ÉVOLUTIVE (15/09/2026) — .lab--v4
   Même base visuelle ; ordre, copy, motion utile, badges honnêtes, avis,
   tarifs, FAQ. Les boucles décoratives du master sont arrêtées ici.
   ══════════════════════════════════════════════════════════════════════════ */
.lab--v4 { --bleu-brume: #EAF2FF; --creme: #F7F8FA; }
.lab--v4 .eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu); margin-bottom: 14px; }
.lab--v4 .section--encre .eyebrow, .lab--v4 .eyebrow--clair { color: var(--bleu-vif); }
.lab--v4 .microcopy { font-size: 15px; line-height: 23px; color: var(--n6); }
.lab--v4 .section--encre .microcopy { color: rgba(255, 255, 255, 0.66); }
.lab--v4 .tete-section .tete-lien { margin-top: 44px; }
.lab--v4 .hero-micro { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.62); }

/* ── Aucune boucle décorative : états de repos = états finaux ───────────── */
.lab--v4 .plan-hero, .lab--v4 .plan-hero .scene, .lab--v4 .scene--bureau-clair .notification, .lab--v4 .scene--carte .lumiere,
.lab--v4 .anneau, .lab--v4 .satellite > span, .lab--v4 .carte--nuit::before, .lab--v4 .carte--finale .mk-tel, .lab--v4 .carte--finale .scene .lumiere,
.lab--v4 .diapo .silhouette, .lab--v4 .carte:hover .carte-fleche svg { animation: none; }
.lab--v4 .plan-hero { opacity: 1; }
.lab--v4 .carte--nuit::before { background: linear-gradient(135deg, rgba(77, 148, 245, 0.45), rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.04) 60%, rgba(77, 148, 245, 0.25)); }

/* ── Hero : une scène, web + téléphone, entrée jouée une fois ───────────── */
.lab--v4 .hero { height: 800px; }
.lab--v4 .hero .scene--bureau-clair { background: radial-gradient(90% 70% at 35% 35%, #e9edf4 0%, #c3ccdb 45%, #4e5c78 100%); }
.lab--v4 .hero .voile { background: linear-gradient(90deg, rgba(15, 23, 46, 0.62) 0%, rgba(15, 23, 46, 0.34) 38%, rgba(15, 23, 46, 0.06) 60%), linear-gradient(rgba(15, 23, 46, 0) 42%, rgba(15, 23, 46, 0.72) 72%, var(--n1) 100%); }
.lab--v4 .hero-web { top: 84px; left: 700px; width: 600px; height: 380px; }
.lab--v4 .hero-tel { position: absolute; left: 1210px; top: 250px; width: 220px; height: 456px; border-radius: 36px; padding: 8px; transform: rotate(-8deg); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.lab--v4 .hero-tel .ecran { border-radius: 28px; }
.lab--v4 .hero-contenu { padding-top: 80px; padding-bottom: 64px; }
.lab--v4 .hero-texte h1 { max-width: 14ch; }
.lab--v4 .hero-actions { margin-top: 28px; gap: 12px 20px; align-items: center; }
.lab--v4 .hero-badges { margin-bottom: 2px; }
.lab--v4 .stores-etat { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.62); padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.24); }
.lab--v4 [data-stores-etat="preparation"] .store-badge { opacity: 0.62; }
.lab--v4 [data-stores-etat="preparation"] .store-badge img { filter: saturate(0.6); }
.lab--v4 .stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; }
.lab--v4 .section--papier .stores-etat { color: var(--n6); border-left-color: var(--n8); }
.lab--v4 .section--papier .store-badge { height: 28px; } .lab--v4 .section--papier .store-badge img { height: 28px; } .lab--v4 .section--papier .store-badge--google img { height: 36px; margin: -4px 0; }
@keyframes v4-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v4-entree-web { from { opacity: 0; transform: perspective(1200px) rotateX(6deg) translateY(24px); } to { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); } }
@keyframes v4-entree-tel { from { opacity: 0; transform: rotate(-8deg) translateY(24px); } to { opacity: 1; transform: rotate(-8deg) translateY(0); } }
.lab--v4[data-motion="prete"] .hero-texte > *, .lab--v4[data-motion="prete"] .hero-actions { animation: v4-entree 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.lab--v4[data-motion="prete"] .hero-texte > :nth-child(2) { animation-delay: 0.08s; }
.lab--v4[data-motion="prete"] .hero-texte > :nth-child(3) { animation-delay: 0.16s; }
.lab--v4[data-motion="prete"] .hero-texte > :nth-child(4) { animation-delay: 0.24s; }
.lab--v4[data-motion="prete"] .hero-actions { animation-delay: 0.32s; }
.lab--v4[data-motion="prete"] .hero-web { animation: v4-entree-web 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.lab--v4[data-motion="prete"] .hero-tel { animation: v4-entree-tel 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }

/* ── Révélation au défilement : une fois, 8-16 px, décalage 70 ms ───────── */
.lab--v4[data-motion="prete"] [data-reveal]:not([data-reveal="visible"]) { opacity: 0; transform: translateY(14px); }
.lab--v4[data-motion="prete"] [data-reveal] { transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.lab--v4[data-motion="prete"] .constellation .satellite { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(0.85); transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.15s + var(--i, 0) * 80ms); }
.lab--v4[data-motion="prete"] .constellation[data-reveal="visible"] .satellite { opacity: 1; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(1); }
.lab--v4 .constellation { transform: translateX(64px); }
.lab--v4 .anneau--ext, .lab--v4 .anneau--int { transform: none; }
.lab--v4 .carte--claire:hover, .lab--v4 .bento .b4:hover .capture--haut { transform: none; }

/* ── Réassurance : trois faits ──────────────────────────────────────────── */
.lab--v4 .preuve-chiffre { font-size: 24px; line-height: 30px; }

/* ── Bento à six cartes ─────────────────────────────────────────────────── */
.lab--v4 .bento--six { grid-template-columns: repeat(3, 1fr); grid-template-rows: 192px 192px 380px; }
.lab--v4 .bento--six .b1 { grid-column: 1; grid-row: 1; }
.lab--v4 .bento--six .b4 { grid-column: 1; grid-row: 2 / 4; }
.lab--v4 .bento--six .b2 { grid-column: 2; grid-row: 1 / 3; }
.lab--v4 .bento--six .b3 { grid-column: 3; grid-row: 1 / 3; }
.lab--v4 .bento--six .b6 { grid-column: 2; grid-row: 3; }
.lab--v4 .bento--six .b5 { grid-column: 3; grid-row: 3; }
.lab--v4 .bento .b1 .carte-visuel { position: absolute; left: 24px; right: 24px; bottom: -6px; }
.lab--v4 .bento .b1 .capture--kpi { border-radius: 10px 10px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); }
.lab--v4 .bento .b1 .carte-texte { padding-bottom: 0; }
.lab--v4 .bento .b1 .carte-texte p, .lab--v4 .bento .b5 .carte-texte p { color: rgba(255, 255, 255, 0.78); }
.lab--v4 .bento .b2 .mk { bottom: -80px; }
.lab--v4 .bento .b4 .capture--bas { bottom: 40px; left: 24px; right: 24px; }
.lab--v4 .bento .b6 { background: var(--n2); }
.lab--v4 .bento .b6 .scene { background: linear-gradient(160deg, #2A3A62 0%, #1B2644 40%, #121A33 75%, #0F172E 100%); }
.lab--v4 .bento .b6 .fenetre-produit { position: absolute; left: 24px; right: -80px; bottom: -60px; transform: rotate(-4deg); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); }
.lab--v4 .bento .b6 .fenetre-produit img { width: 100%; height: auto; display: block; }
.lab--v4 .pieces { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.lab--v4 .pieces li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.82); }

/* ── Parcours : téléphone de l'étape 2 ──────────────────────────────────── */
.lab--v4 .tel-etape { position: absolute; left: 50%; bottom: -230px; width: 290px; height: 590px; transform: translateX(-50%); border-radius: 48px; }
.lab--v4 .carte--claire .capture--capital { left: 32px; right: 32px; bottom: -40px; top: auto; }

/* ── Dossier véhicule : statique, lisible ───────────────────────────────── */

/* ── Pilotage : trois repères puis l'interface ──────────────────────────── */
.lab--v4 .cadre-pilotage { margin: 56px auto 0; max-width: 960px; border-radius: 16px; overflow: hidden; border: 1px solid var(--n8); box-shadow: 0 24px 60px -30px rgba(15, 23, 46, 0.35); background: #fff; }
.lab--v4 .cadre-pilotage img { display: block; width: 100%; height: auto; }
.lab--v4 #pilotage .actions-centrees { margin-top: 40px; }

/* ── Usages : le CTA après les badges ───────────────────────────────────── */
.lab--v4 .usages-texte .microcopy { margin-top: 24px; max-width: 460px; }
.lab--v4 .usages-cta { margin-top: 24px; }

/* ── Avis : état éditorial honnête, structure 1 + 2 prête ───────────────── */
.lab--v4 .avis > .conteneur { padding-top: 88px; padding-bottom: 88px; }
.lab--v4 .avis-grille { margin-top: 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.lab--v4 .avis-carte { border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.lab--v4 .avis-carte--principal { grid-row: span 1; }
.lab--v4 .avis-source { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu-vif); margin: 0; }
.lab--v4 .avis-citation { margin: 0; font-size: 20px; line-height: 30px; font-weight: 500; color: #fff; }
.lab--v4 .avis-carte--principal .avis-citation { font-size: 26px; line-height: 36px; }
.lab--v4 .avis-auteur { margin: 0; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.62); }
.lab--v4 .avis-carte--attente { grid-column: 1 / -1; max-width: 760px; }
.lab--v4 .avis-carte--attente .avis-citation { font-size: 20px; line-height: 30px; font-weight: 500; }

/* ── Sécurité : trois preuves titrées ───────────────────────────────────── */
.lab--v4 .securite-texte .lien-fleche { margin-top: 20px; }
.lab--v4 .carte--nuit { height: auto; padding: 36px 40px; }
.lab--v4 .garantie { gap: 14px; }
.lab--v4 .garantie svg { width: 40px; height: 40px; color: var(--bleu-vif); }
.lab--v4 .garantie h3 { font-size: 17px; line-height: 24px; }
.lab--v4 .garantie p { font-size: 15px; line-height: 23px; color: rgba(255, 255, 255, 0.72); }

/* ── Tarifs ─────────────────────────────────────────────────────────────── */
.lab--v4 .tarifs { background: var(--creme); }
.lab--v4 .formules { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gout); }
.lab--v4 .formule { background: #fff; border: 1px solid var(--n8); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; }
.lab--v4 .formule--milieu { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu), 0 24px 48px -28px rgba(31, 116, 231, 0.35); }
.lab--v4 .formule h3 { font-size: 22px; line-height: 30px; }
.lab--v4 .formule-accroche { margin-top: 6px; font-size: 15px; line-height: 23px; color: var(--n6); min-height: 46px; }
.lab--v4 .prix { margin-top: 18px; font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lab--v4 .prix-unite { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--n6); letter-spacing: 0; }
.lab--v4 .prix-annuel { margin-top: 2px; font-size: 14px; line-height: 22px; color: var(--n6); }
.lab--v4 .limites { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--n9); display: grid; row-gap: 8px; font-size: 15px; line-height: 22px; color: var(--n5); flex: 1; }
.lab--v4 .limites b { font-weight: 700; color: var(--n1); }
.lab--v4 .formule .bouton { margin-top: 24px; width: 100%; }
.lab--v4 .tarifs-micro { margin: 24px auto 0; text-align: center; max-width: 640px; }
.lab--v4 .tarifs .actions-centrees { margin-top: 20px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.lab--v4 .faq > .conteneur { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 64px; align-items: start; }
.lab--v4 .faq-tete .lien-fleche { margin-top: 24px; }
.lab--v4 .faq-liste { border-top: 1px solid var(--n8); }
.lab--v4 .question { border-bottom: 1px solid var(--n8); }
.lab--v4 .question summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: 18px; line-height: 26px; font-weight: 600; min-height: 44px; }
.lab--v4 .question summary::-webkit-details-marker { display: none; }
.lab--v4 .question summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--n6); border-bottom: 2px solid var(--n6); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--ease); }
.lab--v4 .question[open] summary::after { transform: rotate(225deg) translate(-3px, -1px); }
.lab--v4 .question summary:hover { color: var(--bleu); }
.lab--v4 .question summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 4px; }
.lab--v4 .reponse { padding: 0 0 22px; max-width: 680px; }
.lab--v4 .reponse p { font-size: 16px; line-height: 26px; color: var(--n5); }

/* ── CTA final : univers navy et bleu, chaleur contenue ─────────────────── */
.lab--v4 .scene--plante { background: radial-gradient(80% 70% at 30% 30%, #2A3A62 0%, #16213D 45%, #0F172E 100%); }
.lab--v4 .scene--plante .plan { background: linear-gradient(180deg, #C9A57A, #8C6C48); opacity: 0.55; }
.lab--v4 .scene--plante .forme.f1 { background: radial-gradient(closest-side, rgba(77, 148, 245, 0.35), rgba(77, 148, 245, 0)); }
.lab--v4 .scene--plante .forme.f2 { background: radial-gradient(closest-side, rgba(255, 220, 180, 0.22), rgba(255, 220, 180, 0)); }
.lab--v4 .carte--finale .main-a { background: radial-gradient(ellipse at 40% 40%, rgba(120, 100, 70, 0.4), rgba(80, 70, 50, 0.3) 55%, rgba(80, 70, 50, 0) 72%); }
.lab--v4 .carte--finale .carte-texte .eyebrow { margin-bottom: 10px; }
.lab--v4 .carte--finale { height: 520px; }
.lab--v4 .carte--finale .mk-tel { top: 100px; right: 260px; }

/* ── Focus visible partout ──────────────────────────────────────────────── */
.lab--v4 :focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }
.lab--v4 .section--papier :focus-visible { outline-color: var(--bleu); }

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .lab--v4 .hero { height: 720px; }
  .lab--v4 .hero-web { left: 560px; top: 90px; width: 520px; height: 330px; }
  .lab--v4 .hero-tel { left: 1000px; top: 230px; width: 190px; height: 394px; }
  .lab--v4 .avis-grille { grid-template-columns: 1fr 1fr; }
  .lab--v4 .avis-carte--principal { grid-column: 1 / -1; }
  .lab--v4 .faq > .conteneur { grid-template-columns: 1fr; row-gap: 32px; }
  .lab--v4 .formules { grid-template-columns: 1fr; }
  .lab--v4 .formule { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  .lab--v4 .formule h3, .lab--v4 .formule-accroche { grid-column: 1 / -1; }
  .lab--v4 .formule-accroche { min-height: 0; }
  .lab--v4 .formule .limites { grid-column: 2; grid-row: 3 / 6; margin-top: 0; padding-top: 0; border-top: 0; }
  .lab--v4 .formule .bouton { grid-column: 1; width: auto; }
}
@media (max-width: 1023px) {
  .lab--v4 .hero-web { left: 400px; }
  .lab--v4 .hero-tel { left: 820px; }
  .lab--v4 .hero .voile { background: linear-gradient(90deg, rgba(15, 23, 46, 0.6) 0%, rgba(15, 23, 46, 0.3) 45%, rgba(15, 23, 46, 0.05) 70%), linear-gradient(rgba(15, 23, 46, 0) 40%, rgba(15, 23, 46, 0.75) 70%, var(--n1) 100%); }
}

/* ── Mobile : un produit à part entière ─────────────────────────────────── */
@media (max-width: 767px) {
  .lab--v4 .hero { height: 760px; }
  .lab--v4 .hero-contenu { padding-top: 64px; padding-bottom: 28px; }
  .lab--v4 .hero .voile { background: linear-gradient(rgba(15, 23, 46, 0.05) 0%, rgba(15, 23, 46, 0.35) 28%, rgba(15, 23, 46, 0.82) 50%, var(--n1) 100%); }
  .lab--v4 .hero-web { display: none; }                       /* pas de capture bureau en miniature : le téléphone porte la scène */
  .lab--v4 .hero-tel { left: auto; right: 24px; top: 48px; width: 170px; height: 352px; transform: rotate(-6deg); border-radius: 30px; padding: 7px; }
  .lab--v4 .hero-tel .ecran { border-radius: 24px; }
  .lab--v4[data-motion="prete"] .hero-tel { animation: v4-entree 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
  .lab--v4 .hero-texte h1 { max-width: none; }
  .lab--v4 .hero-actions .bouton { width: 100%; }
  .lab--v4 .hero-micro { width: 100%; text-align: center; }
  .lab--v4 .stores-etat { padding-left: 0; border-left: 0; width: 100%; }
  .lab--v4 .bento--six { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .lab--v4 .bento--six .b1 { grid-column: 1 / 3; grid-row: 1; min-height: 210px; }
  .lab--v4 .bento--six .b6 { grid-column: 1 / 3; grid-row: 2; height: 400px; }
  .lab--v4 .bento--six .b2 { grid-column: 1; grid-row: 3; height: auto; min-height: 200px; }
  .lab--v4 .bento--six .b4 { grid-column: 2; grid-row: 3; height: auto; min-height: 200px; }
  .lab--v4 .bento--six .b3 { grid-column: 1 / 3; grid-row: 4; height: 400px; }
  .lab--v4 .bento--six .b5 { grid-column: 1 / 3; grid-row: 5; min-height: 220px; }
  .lab--v4 .bento .b1 .carte-visuel { bottom: -2px; }
  .lab--v4 .bento .b6 .fenetre-produit { left: 16px; right: -60px; bottom: -40px; }
  .lab--v4 .pieces { position: static; padding: 0 20px 20px; }
  .lab--v4 .bento .b5 .carte-texte { padding-bottom: 12px; }
  .lab--v4 .cadre-pilotage { margin-top: 32px; border-radius: 12px; }
  .lab--v4 .avis-grille { grid-template-columns: 1fr; margin-top: 32px; }
  .lab--v4 .avis-carte { padding: 24px; }
  .lab--v4 .avis-carte--principal .avis-citation { font-size: 22px; line-height: 32px; }
  .lab--v4 .carte--nuit { padding: 24px; grid-template-columns: 1fr; row-gap: 22px; }
  .lab--v4 .garantie { flex-direction: row; align-items: flex-start; gap: 14px; }
  .lab--v4 .garantie svg { width: 32px; height: 32px; flex: none; }
  .lab--v4 .formules { margin-top: 32px; }
  .lab--v4 .formule { grid-template-columns: 1fr; padding: 22px; }
  .lab--v4 .formule .limites { grid-column: 1; grid-row: auto; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--n9); }
  .lab--v4 .formule .bouton { width: 100%; }
  .lab--v4 .prix { font-size: 30px; line-height: 36px; }
  .lab--v4 .question summary { font-size: 16px; line-height: 24px; padding: 16px 0; }
  .lab--v4 .carte--finale { height: 700px; }
  .lab--v4 .carte--finale .mk-tel { top: 380px; }
  .lab--v4 .carte--finale .carte-texte { padding-top: 40px; }
}
@media (max-width: 359px) {
  .lab--v4 .hero-tel { width: 140px; height: 290px; right: 12px; }
  .lab--v4 .bento--six .b2, .lab--v4 .bento--six .b4 { grid-column: 1 / 3; }
  .lab--v4 .bento--six .b4 { grid-row: 4; } .lab--v4 .bento--six .b3 { grid-row: 5; } .lab--v4 .bento--six .b5 { grid-row: 6; }
}

/* ── Retouches après capture (v4) ───────────────────────────────────────── */
.lab--v4 .bento--six { grid-template-rows: 192px 192px 380px; }
.lab--v4 .bento--six .b4 { grid-column: 1; grid-row: 2; }
.lab--v4 .bento--six .b6 { grid-column: 1; grid-row: 3; }
.lab--v4 .bento--six .b5 { grid-column: 2 / 4; grid-row: 3; }
.lab--v4 .bento .b1 .carte-texte, .lab--v4 .bento .b4 .carte-texte { max-width: 60%; }
.lab--v4 .bento .b1 .carte-visuel { left: auto; right: -16px; bottom: 18px; width: 200px; }
.lab--v4 .bento .b1 .capture--kpi { border-radius: 10px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); }
.lab--v4 .bento .b4 .carte-visuel { position: absolute; right: -24px; bottom: -34px; width: 230px; }
.lab--v4 .bento .b4 .capture--bas { position: static; transform: rotate(-4deg); }
.lab--v4 .bento .b6 .fenetre-produit { left: 24px; right: -60px; bottom: -40px; }
.lab--v4 .bento .b5 .carte-texte { max-width: 480px; }
.lab--v4 .pieces { bottom: 32px; gap: 10px; max-width: 520px; }
.lab--v4 .pieces li { font-size: 14px; line-height: 20px; padding: 8px 14px; }
.lab--v4 .carte--claire .capture--capital { left: 32px; right: 32px; bottom: -150px; }
@media (max-width: 767px) {
  .lab--v4 .hero { height: 880px; }
  .lab--v4 .hero-tel { top: 40px; width: 160px; height: 332px; }
  .lab--v4 .hero .voile { background: linear-gradient(rgba(15, 23, 46, 0.05) 0%, rgba(15, 23, 46, 0.3) 30%, rgba(15, 23, 46, 0.86) 46%, var(--n1) 100%); }
  .lab--v4 .bento--six .b1 { min-height: 0; }
  .lab--v4 .bento .b1 .carte-texte, .lab--v4 .bento .b4 .carte-texte { max-width: none; }
  .lab--v4 .bento .b1 .carte-visuel { position: static; width: auto; padding: 0 20px 20px; }
  .lab--v4 .bento .b4 .carte-visuel { display: none; }
  .lab--v4 .bento--six .b6 { grid-column: 1 / 3; grid-row: 2; }
  .lab--v4 .bento--six .b5 { grid-column: 1 / 3; grid-row: 5; }
  .lab--v4 .carte--finale { height: 780px; }
  .lab--v4 .carte--finale .mk-tel { top: 450px; }
}

/* ── Retouches v4, seconde passe ────────────────────────────────────────── */
.lab--v4 .bento .b1 .carte-visuel, .lab--v4 .bento .b4 .carte-visuel { top: auto; left: auto; inset: auto; }
.lab--v4 .bento .b1 .carte-visuel { right: -16px; bottom: 18px; width: 200px; }
.lab--v4 .bento .b4 .carte-visuel { right: -24px; bottom: -34px; width: 230px; }
.lab--v4 .constellation { transform: translateX(24px); }
@media (max-width: 1023px) {
  .lab--v4 .hero-web { left: 340px; top: 100px; width: 470px; height: 300px; }
  .lab--v4 .hero-tel { left: auto; right: 16px; top: 240px; width: 180px; height: 374px; }
}
@media (max-width: 767px) {
  .lab--v4 .bento--six .b1 { grid-column: 1 / 3; grid-row: 1; }
  .lab--v4 .bento--six .b6 { grid-column: 1 / 3; grid-row: 2; height: 400px; }
  .lab--v4 .bento--six .b2 { grid-column: 1; grid-row: 3; }
  .lab--v4 .bento--six .b4 { grid-column: 2; grid-row: 3; }
  .lab--v4 .bento--six .b3 { grid-column: 1 / 3; grid-row: 4; }
  .lab--v4 .bento--six .b5 { grid-column: 1 / 3; grid-row: 5; }
  .lab--v4 .bento .b1 .carte-visuel { position: static; inset: auto; width: auto; padding: 0 20px 20px; }
  .lab--v4 .hero-web { display: none; }
  .lab--v4 .hero-tel { left: auto; right: 24px; top: 40px; width: 160px; height: 332px; }
}
@media (max-width: 359px) {
  .lab--v4 { --h1: 30px; --h1-lh: 36px; }
  .lab--v4 .bento--six .b2, .lab--v4 .bento--six .b4 { grid-column: 1 / 3; }
  .lab--v4 .bento--six .b4 { grid-row: 4; } .lab--v4 .bento--six .b3 { grid-row: 5; } .lab--v4 .bento--six .b5 { grid-row: 6; }
}
@media (max-width: 767px) { .lab--v4 .bento--six { grid-template-rows: auto; } .lab--v4 .bento--six .b2, .lab--v4 .bento--six .b4 { height: auto; min-height: 200px; } }

/* ══════════════════════════════════════════════════════════════════════════
   PASSE 2 — ÉCHELLE, LARGEURS ET SCÈNE DE HERO (16/09/2026) · .lab--v5
   Passe d'échelle et de composition : elle ne touche ni au contenu, ni aux
   routes, ni aux tarifs, ni aux règles d'honnêteté. Elle corrige ce que le
   relevé dimensionnel a montré :
     · un seul max-width (1600) pour toute la page, quelle que soit la section ;
     · un hero à hauteur fixe (800-900 px) au lieu du premier écran ;
     · un groupe produit posé en pixels absolus, centré, laissant 459 px de
       vide à droite en 1920 (24 % du viewport) et coupé sous 1280 ;
     · à 390 px, les CTA passaient sous la ligne de flottaison.
   Trois niveaux de largeur remplacent le conteneur unique : scène pleine
   largeur (hero), conteneur large (sections visuelles), conteneur de lecture.
   ══════════════════════════════════════════════════════════════════════════ */
.lab--v5 {
  --gouttiere: clamp(20px, 2.2vw, 56px);
  --marge: var(--gouttiere);
  --max: 1400px;            /* lecture : sécurité, tarifs, FAQ, avis          */
  --max-large: 1680px;      /* sections visuelles : bento, parcours, cockpit  */
  --entete-h: 80px;
  --rythme: clamp(72px, 6.2vw, 132px);
}

/* ── Niveau 2 · conteneur large, pour les sections qui portent du produit ── */
.lab--v5 .section-bento > .conteneur,
.lab--v5 #parcours > .conteneur,
.lab--v5 #pilotage > .conteneur,
.lab--v5 .section-usages > .conteneur,
.lab--v5 #profils > .conteneur,
.lab--v5 .bande-section > .conteneur { max-width: var(--max-large); }

/* ── Niveau 3 · conteneur de lecture : le texte ne s'étale jamais ────────── */
.lab--v5 .securite > .conteneur,
.lab--v5 .tarifs > .conteneur,
.lab--v5 .faq > .conteneur,
.lab--v5 .avis > .conteneur,
.lab--v5 .section-preuve > .conteneur { max-width: 1320px; }
.lab--v5 .reponse { max-width: 66ch; }
.lab--v5 .intro-section { max-width: 62ch; }

/* ── Rythme vertical, fluide ─────────────────────────────────────────────── */
.lab--v5 .section:not(.hero) > .conteneur { padding-top: var(--rythme); padding-bottom: var(--rythme); }   /* le hero a son propre rythme */
.lab--v5 .section-preuve > .conteneur { padding-top: 0; padding-bottom: clamp(48px, 4.4vw, 88px); }
.lab--v5 .section-bento > .conteneur { padding-top: 0; }
.lab--v5 .bande-section > .conteneur { padding-top: 0; }

/* ══ 1 · HERO — une scène pleine largeur, pas une section dans un cadre ══ */
.lab--v5 .hero {
  height: auto;
  min-height: clamp(660px, calc(100svh - var(--entete-h)), 940px);
  display: flex; align-items: stretch;
  overflow: clip;
}
/* couche 1-2 : la surface de fond et l'emplacement du futur asset (data-asset="A-hero") */
.lab--v5 .plans-hero { inset: 0; z-index: 0; }
.lab--v5 .plan-hero, .lab--v5 .plan-hero .scene { inset: 0; }
/* couche 4 : le voile de contraste — il tient le texte sur la gauche */
.lab--v5 .hero .voile {
  inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15, 23, 46, 0.93) 0%, rgba(15, 23, 46, 0.78) 26%, rgba(15, 23, 46, 0.34) 50%, rgba(15, 23, 46, 0) 66%),
    linear-gradient(rgba(15, 23, 46, 0.42) 0%, rgba(15, 23, 46, 0.06) 26%, rgba(15, 23, 46, 0.5) 74%, var(--n1) 100%);
}
/* couche 5 : le texte, ancré en bas à gauche, dans la scène */
.lab--v5 .hero-contenu {
  position: relative; z-index: 2;
  max-width: none; width: 100%; height: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--entete-h) + clamp(32px, 4vh, 72px));
  padding-bottom: clamp(48px, 7.5vh, 112px);
  padding-left: clamp(20px, 8.5vw, 200px);
  padding-right: clamp(20px, 5vw, 96px);
}
.lab--v5 .hero-texte { max-width: clamp(560px, 46vw, 860px); gap: 18px; }
.lab--v5 .hero h1 {
  font-size: clamp(34px, 0.9rem + 3.4vw, 78px);
  line-height: 1.03; letter-spacing: -0.032em; max-width: 15ch;
}
.lab--v5 .hero-sous-titre { font-size: clamp(17px, 0.7rem + 0.5vw, 21px); line-height: 1.55; max-width: 46ch; }
.lab--v5 .hero-actions { margin-top: clamp(24px, 2.4vw, 40px); }

/* couche 3 : le groupe produit — masse dominante, ancrée à droite.
   Il est dimensionné par sa largeur et sa grille ; les transforms ne servent
   qu'à la finition locale (inclinaison du téléphone). */
.lab--v5 .hero .hero-web {
  left: auto; top: 50%;
  right: clamp(140px, 12.5vw, 290px);
  width: clamp(600px, 50vw, 1060px);
  height: auto; aspect-ratio: 640 / 420;
  translate: 0 -54%;
}
.lab--v5 .hero .hero-tel {
  left: auto; top: 50%;
  right: clamp(-8px, 1.4vw, 44px);
  width: clamp(188px, 13.4vw, 286px);
  height: auto; aspect-ratio: 220 / 456;
  translate: 0 -34%;
  transform: rotate(-7deg);
  border-radius: clamp(28px, 2.2vw, 42px); padding: 8px;
}
.lab--v5 .hero .hero-tel .ecran { border-radius: clamp(22px, 1.8vw, 34px); }
.lab--v5 .scene--bureau-clair .notification { display: none; }   /* la notification flottait hors de la nouvelle scène */

/* ══ 2 · Sections visuelles : les médias s'approchent des bords ══════════ */
.lab--v5 .bento { gap: clamp(16px, 1.3vw, 24px); }

.lab--v5 .cadre-pilotage { max-width: 1240px; }
.lab--v5 .usages-visuel { height: clamp(460px, 34vw, 620px); }
.lab--v5 .usages { column-gap: clamp(40px, 4vw, 72px); }
.lab--v5 .carte--finale { max-width: var(--max-large); margin: 0 auto; }

/* ══ 1280 → 1439 : composition desktop plus compacte ════════════════════ */
@media (max-width: 1439px) {
  .lab--v5 .hero .hero-web { right: clamp(120px, 11vw, 180px); width: clamp(580px, 49vw, 760px); }
  .lab--v5 .hero .hero-tel { right: clamp(0px, 1vw, 20px); width: clamp(180px, 13vw, 200px); }
  .lab--v5 .hero-contenu { padding-left: clamp(20px, 6.5vw, 112px); }
}

/* ══ 1024 → 1279 : superposition contrôlée, hauteur plus souple ═════════ */
@media (max-width: 1279px) {
  .lab--v5 .hero { min-height: clamp(600px, calc(100svh - var(--entete-h)), 820px); }
  .lab--v5 .hero .hero-web { right: clamp(96px, 9vw, 150px); width: clamp(520px, 52vw, 680px); translate: 0 -58%; }
  .lab--v5 .hero .hero-tel { right: 8px; width: clamp(168px, 14vw, 190px); translate: 0 -36%; }
  .lab--v5 .hero h1 { max-width: none; }   /* la colonne de texte suffit à tenir les deux lignes */
  .lab--v5 .hero-texte { max-width: min(58vw, 620px); }
}

/* ══ 768 → 1023 : vraie composition tablette — texte, puis scène large ══ */
@media (max-width: 1023px) {
  /* le texte d'abord, la scène ensuite : l'ordre visuel, pas l'ordre du DOM */
  .lab--v5 .hero { display: flex; flex-direction: column; min-height: 0; height: auto; padding: 0; }
  .lab--v5 .hero-contenu { order: 1; }
  .lab--v5 .plans-hero { order: 2; }
  .lab--v5 .hero-contenu {
    height: auto; padding-top: calc(var(--entete-h) + clamp(28px, 5vw, 56px));
    padding-bottom: clamp(28px, 4vw, 44px);
    padding-left: var(--gouttiere); padding-right: var(--gouttiere);
    max-width: 920px; margin: 0 auto;
  }
  .lab--v5 .hero-texte { max-width: 560px; }   /* le titre tient deux lignes, la phrase garde sa mesure */
  .lab--v5 .hero h1 { max-width: none; }
  .lab--v5 .hero .voile { display: none; }
  .lab--v5 .plans-hero { position: relative; inset: auto; height: clamp(320px, 50vw, 520px); }
  .lab--v5 .plan-hero, .lab--v5 .plan-hero .scene { position: absolute; inset: 0; }
  .lab--v5 .hero .hero-web { left: 5%; right: auto; top: 9%; translate: none; width: 72%; }
  .lab--v5 .hero .hero-tel { left: auto; right: 4%; top: auto; bottom: 0; translate: none; width: clamp(150px, 21vw, 216px); }
}

/* ══ 390 → 767 : une colonne, le téléphone domine, les CTA d'abord ══════ */
@media (max-width: 767px) {
  .lab--v5 { --gouttiere: clamp(16px, 5vw, 24px); --entete-h: 64px; --rythme: clamp(64px, 12vw, 104px); }
  .lab--v5 .hero-contenu { padding-top: calc(var(--entete-h) + 32px); padding-bottom: 28px; }
  .lab--v5 .hero h1 { font-size: clamp(36px, 10.5vw, 48px); line-height: 1.06; max-width: none; }
  .lab--v5 .hero-sous-titre { font-size: 17px; line-height: 1.6; max-width: 38ch; }
  .lab--v5 .hero-actions { margin-top: 24px; gap: 10px; }
  .lab--v5 .hero-actions .bouton { width: 100%; }
  .lab--v5 .plans-hero { height: clamp(240px, 64vw, 330px); }
  .lab--v5 .hero .hero-web { display: block; left: -8%; top: 6%; width: 88%; }
  .lab--v5 .hero .hero-tel { right: 3%; bottom: -4%; width: 40%; max-width: 168px; }
  .lab--v5 .section-usages .usages-visuel { height: clamp(320px, 88vw, 420px); }
  .lab--v5 .cadre-pilotage { max-width: none; }
}

@media (max-width: 389px) {
  .lab--v5 { --gouttiere: 16px; }
  .lab--v5 .hero h1 { font-size: clamp(34px, 10vw, 40px); }
  .lab--v5 .hero .hero-tel { width: 42%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PASSE 3 — FINITION MARKETING (16/09/2026) · .lab--v6
   Zones autorisées : réassurance, cockpit, pilotage, témoignages et notes,
   sécurité → CTA final, dosage du bleu, frictions. Le reste ne bouge pas.
   ══════════════════════════════════════════════════════════════════════════ */
.lab--v6 { --nuit: #070C17; --graphite-1: #0E1628; --graphite-2: #17233E; --graphite-3: #223257; --acier: #8A97B3; }

/* ── Hero : l'écran produit moins voilé, le H1 toujours tenu ────────────── */
.lab--v6 .hero .voile {
  background:
    linear-gradient(90deg, rgba(15, 23, 46, 0.93) 0%, rgba(15, 23, 46, 0.76) 24%, rgba(15, 23, 46, 0.28) 48%, rgba(15, 23, 46, 0) 62%),
    linear-gradient(rgba(15, 23, 46, 0.26) 0%, rgba(15, 23, 46, 0) 26%, rgba(15, 23, 46, 0.36) 76%, var(--n1) 100%);
}
.lab--v6 .hero-badges { margin-bottom: 4px; }
.lab--v6 .store-badge { opacity: 1; filter: none; height: 26px; }
.lab--v6 .store-badge img { height: 26px; }
.lab--v6 .store-badge--google img { height: 34px; margin: -4px 0; }
.lab--v6 [data-stores-etat] .store-badge { opacity: 1; filter: none; }

/* ── Réassurance : trois preuves illustrées, collées au hero ────────────── */
.lab--v6 .section-preuve { background: linear-gradient(180deg, var(--n0) 0%, var(--nuit) 100%); }
.lab--v6 .section-preuve > .conteneur { padding-top: 0; padding-bottom: clamp(32px, 3.4vw, 56px); max-width: var(--max-large); }
.lab--v6 .preuves-sociales { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(244, 247, 250, 0.1); }
.lab--v6 .preuve-sociale { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 26px 32px 26px 0; border-left: 1px solid rgba(244, 247, 250, 0.1); padding-left: 32px; }
.lab--v6 .preuve-sociale:first-child { border-left: 0; padding-left: 0; }
.lab--v6 .preuve-picto { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--bleu-vif); background: radial-gradient(120% 120% at 30% 20%, rgba(77, 148, 245, 0.22), rgba(77, 148, 245, 0.04)); box-shadow: inset 0 0 0 1px rgba(77, 148, 245, 0.22); }
.lab--v6 .preuve-picto svg { width: 24px; height: 24px; }
.lab--v6 .preuve-chiffre { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: #F4F7FA; margin: 0; }
.lab--v6 .preuve-chiffre + p { margin: 0; font-size: 15px; line-height: 22px; color: rgba(244, 247, 250, 0.62); max-width: none; }

/* ── Cockpit : la démonstration produit principale ──────────────────────── */
.lab--v6 .section-bento { background: var(--nuit); }
.lab--v6 .section-bento > .conteneur { padding-top: clamp(36px, 3.6vw, 64px); padding-bottom: clamp(88px, 7vw, 136px); }
.lab--v6 .section-bento .tete-section { align-items: flex-end; }
.lab--v6 .section-bento .tete-section + * { margin-top: clamp(32px, 3vw, 48px); }
.lab--v6 .cockpit { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 320px 320px; gap: clamp(16px, 1.3vw, 22px); }
.lab--v6 .cockpit-bloc { position: relative; overflow: hidden; border-radius: var(--r-carte); background: var(--graphite-1); color: #F4F7FA; isolation: isolate; }
.lab--v6 .cockpit-bloc::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.07; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.lab--v6 .cockpit-texte { position: relative; z-index: 2; padding: 28px 28px 0; display: flex; flex-direction: column; gap: 8px; }
.lab--v6 .cockpit-texte h3 { font-size: 20px; line-height: 27px; font-weight: 600; letter-spacing: -0.012em; }
.lab--v6 .cockpit-texte p { font-size: 15px; line-height: 23px; color: rgba(244, 247, 250, 0.68); max-width: 36ch; }
/* une lumière interne différente par carte ; une seule carte reçoit le bleu */
.lab--v6 .cockpit-bloc--mobile { grid-column: 1 / 3; grid-row: 1 / 3; background: radial-gradient(90% 60% at 50% 100%, var(--graphite-3) 0%, var(--graphite-2) 40%, var(--graphite-1) 100%); box-shadow: inset 0 0 0 1px rgba(77, 148, 245, 0.18); }
.lab--v6 .cockpit-bloc--mobile::after { content: ""; position: absolute; left: 50%; bottom: -30%; width: 140%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(31, 116, 231, 0.42), rgba(31, 116, 231, 0)); z-index: 0; }
.lab--v6 .cockpit-bloc--flux { grid-column: 3 / 7; grid-row: 1; background: radial-gradient(70% 80% at 100% 0%, var(--graphite-2) 0%, var(--graphite-1) 70%); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.07); }
.lab--v6 .cockpit-bloc--stock { grid-column: 3 / 5; grid-row: 2; background: radial-gradient(80% 70% at 0% 100%, #1B2745 0%, var(--graphite-1) 75%); }
.lab--v6 .cockpit-bloc--dossiers { grid-column: 5 / 7; grid-row: 2; background: radial-gradient(90% 90% at 100% 100%, #15203A 0%, #0B1324 80%); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.06); }
.lab--v6 .cockpit-tel { position: absolute; left: 50%; bottom: -8%; z-index: 1; width: 292px; transform: translateX(-50%); }
.lab--v6 .cockpit-tel .mk-tel { width: 292px; height: 604px; border-radius: 46px; padding: 9px; transform: none; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(244, 247, 250, 0.16); }
.lab--v6 .cockpit-tel .mk-tel .ecran { border-radius: 37px; }
.lab--v6 .cockpit-capture { position: absolute; z-index: 1; margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(15, 23, 46, 0.12); }
.lab--v6 .cockpit-capture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.lab--v6 .cockpit-bloc--flux .cockpit-texte { max-width: 46%; }
.lab--v6 .cockpit-bloc--flux .cockpit-capture { right: 24px; top: 34px; width: 50%; height: calc(100% - 34px); border-radius: 12px 12px 0 0; }
.lab--v6 .cockpit-bloc--stock .cockpit-capture { left: 28px; right: -60px; bottom: -8px; height: 156px; border-radius: 10px 0 0 0; }
.lab--v6 .cockpit-bloc--dossiers .pieces { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.lab--v6 .cockpit-bloc--dossiers .pieces li { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(244, 247, 250, 0.14); background: rgba(244, 247, 250, 0.05); font-size: 13px; line-height: 18px; color: rgba(244, 247, 250, 0.82); }

/* ── Organisation : le bleu redevient un accent, pas une surface ────────── */
.lab--v6 .scene--chantier { background: radial-gradient(90% 70% at 50% 60%, #2C4E8F 0%, #1B2E57 45%, #0F172E 100%); }
.lab--v6 .scene--atelier { background: radial-gradient(90% 70% at 40% 70%, #26406F 0%, #182746 50%, #0F172E 100%); }

/* ── Témoignages : un principal, deux secondaires, état d'aperçu assumé ──── */
.lab--v6 .avis { background: var(--n0); }
.lab--v6 .avis > .conteneur { padding-top: var(--rythme); padding-bottom: var(--rythme); max-width: var(--max-large); }
.lab--v6 .avis .tete-section { align-items: flex-end; }
.lab--v6 .avis-apercu { flex: none; margin-bottom: 6px; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(244, 247, 250, 0.3); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(244, 247, 250, 0.62); }
.lab--v6 .temoignages { margin-top: clamp(32px, 3vw, 48px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.lab--v6 .temoignage { position: relative; border-radius: var(--r-carte); background: radial-gradient(90% 80% at 0% 0%, var(--graphite-2) 0%, var(--graphite-1) 70%); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.lab--v6 .temoignage--principal { grid-row: 1 / 3; padding: 0; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.lab--v6 .temoignage-photo { position: relative; min-height: 360px; display: grid; place-items: end start; padding: 22px; background: radial-gradient(80% 70% at 30% 30%, #223257 0%, #17233E 45%, #0B1324 100%); }
.lab--v6 .temoignage-photo span { font-size: 12px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(244, 247, 250, 0.5); }
.lab--v6 .temoignage-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lab--v6 .temoignage-corps { padding: 36px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.lab--v6 .temoignage-source { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu-vif); }
.lab--v6 .temoignage-citation { margin: 0; font-size: 19px; line-height: 29px; font-weight: 500; color: #F4F7FA; }
.lab--v6 .temoignage--principal .temoignage-citation { font-size: 26px; line-height: 36px; letter-spacing: -0.012em; }
.lab--v6 .temoignage-auteur { margin: auto 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 22px; color: rgba(244, 247, 250, 0.62); }
.lab--v6 .temoignage-auteur b { font-weight: 600; color: #F4F7FA; }
/* état d'aperçu : la structure est là, le contenu manifestement à venir */
.lab--v6 [data-avis-etat="apercu"] .temoignage-citation { color: rgba(244, 247, 250, 0.56); font-style: italic; }
.lab--v6 [data-avis-etat="apercu"] .temoignage-auteur b { color: rgba(244, 247, 250, 0.7); }
.lab--v6 [data-avis-etat="apercu"] .temoignage-source { color: rgba(244, 247, 250, 0.5); }
.lab--v6 .notes { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.lab--v6 .note { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(244, 247, 250, 0.05); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.1); font-size: 14px; line-height: 20px; color: rgba(244, 247, 250, 0.72); transition: background-color 0.2s var(--ease); }
.lab--v6 .note:hover { background: rgba(244, 247, 250, 0.09); }
.lab--v6 .note b { color: #F4F7FA; }

/* ── Sécurité : pleine largeur, plus de présence ────────────────────────── */
.lab--v6 .securite { background: var(--nuit); }
.lab--v6 .securite > .conteneur { padding-top: clamp(80px, 7vw, 128px); padding-bottom: clamp(80px, 7vw, 128px); max-width: var(--max-large); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); }
.lab--v6 .securite h2 { font-size: clamp(32px, 2.8vw, 44px); line-height: 1.12; max-width: 14ch; }
.lab--v6 .securite .carte--nuit { padding: 40px 44px; background: radial-gradient(90% 90% at 0% 0%, var(--graphite-2) 0%, var(--graphite-1) 70%); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); }
.lab--v6 .securite .garantie svg { width: 44px; height: 44px; }
.lab--v6 .securite .garantie h3 { font-size: 18px; line-height: 26px; }

/* ── Sécurité → CTA final : de la scène pleine largeur à la carte contenue ─ */
.lab--v6 .final { padding: clamp(40px, 5vw, 88px) 20px clamp(48px, 5vw, 88px); background: var(--n10); overflow: clip; }   /* la carte agrandie au départ de l'animation ne doit jamais créer de défilement horizontal */
.lab--v6 .carte--finale { border-radius: 28px; box-shadow: 0 40px 90px -40px rgba(15, 23, 46, 0.55); transform-origin: 50% 0; }
/* v6-contenir retiré en passe 5 : cette animation à timeline de scroll
   écrasait le transform piloté par le script et jouait l'effet à l'envers.
   L'agrandissement de la carte finale est désormais dérivé de --progres. */

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .lab--v6 .cockpit { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 300px 300px auto; }
  .lab--v6 .cockpit-bloc--mobile { grid-column: 1; grid-row: 1 / 3; }
  .lab--v6 .cockpit-bloc--flux { grid-column: 2; grid-row: 1; }
  .lab--v6 .cockpit-bloc--stock { grid-column: 2; grid-row: 2; }
  .lab--v6 .cockpit-bloc--dossiers { grid-column: 1 / 3; grid-row: 3; min-height: 200px; }
  .lab--v6 .cockpit-bloc--flux .cockpit-texte { max-width: none; }
  .lab--v6 .cockpit-bloc--flux .cockpit-capture { right: -40px; top: 128px; width: 78%; height: auto; }
  .lab--v6 .cockpit-bloc--flux .cockpit-capture img { height: auto; }
  .lab--v6 .cockpit-tel { width: 250px; } .lab--v6 .cockpit-tel .mk-tel { width: 250px; height: 517px; }
  .lab--v6 .temoignages { grid-template-columns: 1fr; }
  .lab--v6 .temoignage--principal { grid-row: auto; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  .lab--v6 .securite > .conteneur { grid-template-columns: 1fr; row-gap: 32px; }
}
@media (max-width: 1023px) {
  /* trois colonnes ne tiennent plus : les preuves s'empilent dès la tablette */
  .lab--v6 .preuves-sociales { grid-template-columns: 1fr; border-top: 0; }
  .lab--v6 .preuve-sociale { border-left: 0; padding: 16px 0; border-top: 1px solid rgba(244, 247, 250, 0.1); }
  .lab--v6 .preuve-sociale:first-child { padding-left: 0; }
}
@media (max-width: 767px) {
  .lab--v6 .section-preuve > .conteneur { padding-bottom: 24px; }
  .lab--v6 .cockpit { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 14px; }
  .lab--v6 .cockpit-bloc { grid-column: 1 !important; grid-row: auto !important; }
  .lab--v6 .cockpit-bloc--mobile { height: 520px; }
  .lab--v6 .cockpit-bloc--flux { height: 400px; }
  .lab--v6 .cockpit-bloc--stock { height: 300px; }
  .lab--v6 .cockpit-bloc--dossiers { min-height: 0; padding-bottom: 22px; }
  .lab--v6 .cockpit-texte { padding: 22px 22px 0; }
  .lab--v6 .cockpit-tel { width: 230px; bottom: -14%; } .lab--v6 .cockpit-tel .mk-tel { width: 230px; height: 476px; }
  .lab--v6 .cockpit-bloc--flux .cockpit-capture { left: 22px; right: 22px; top: auto; bottom: -24px; width: auto; height: 240px; border-radius: 12px 12px 0 0; }
  .lab--v6 .cockpit-bloc--flux .cockpit-capture img { height: 100%; }
  .lab--v6 .cockpit-bloc--stock .cockpit-capture { left: 22px; height: 150px; }
  .lab--v6 .cockpit-bloc--dossiers .pieces { position: static; padding: 16px 22px 0; }
  .lab--v6 .avis .tete-section { display: block; }
  .lab--v6 .avis-apercu { display: inline-block; margin-top: 14px; }
  .lab--v6 .temoignage--principal { grid-template-columns: 1fr; }
  .lab--v6 .temoignage-photo { min-height: 200px; }
  .lab--v6 .temoignage-corps { padding: 24px; }
  .lab--v6 .temoignage { padding: 24px; }
  .lab--v6 .temoignage--principal .temoignage-citation { font-size: 21px; line-height: 30px; }
  .lab--v6 .securite h2 { max-width: none; }
  .lab--v6 .final { padding: 24px 16px 40px; }
  .lab--v6 .carte--finale { border-radius: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PASSE 4 — FINITION PRODUCT-LED (16/09/2026) · .lab--v7
   Header à menus riches, hero, réassurance centrée, cockpit à la géométrie
   Qonto (24 colonnes · 4 rangées de 192 · 5 cartes), section outils,
   témoignages en rail, environnement sombre continu, CTA final qui s'agrandit.
   ══════════════════════════════════════════════════════════════════════════ */
.lab--v7 {
  --sombre: #0A1120;              /* un seul fond sombre : témoignages ET sécurité */
  --ck-1: #0E1628; --ck-2: #17233E; --ck-3: #223257;
  --acier: #8A97B3;
  --ck-max: 1504px;
  --ease-doux: cubic-bezier(.22, 1, .36, 1);
}

/* ── Boutons : survol, appui, focus ─────────────────────────────────────── */
.lab--v7 .bouton { transition: transform 180ms var(--ease-doux), background-color 180ms var(--ease-doux), border-color 180ms var(--ease-doux), box-shadow 180ms var(--ease-doux); }
.lab--v7 .bouton--bleu:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(31, 116, 231, 0.75); }
.lab--v7 .bouton--contour:hover { transform: translateY(-2px); }
.lab--v7 .bouton:active { transform: scale(0.98); box-shadow: none; }
.lab--v7 .bouton-fleche { display: inline-flex; margin-left: 8px; transition: transform 180ms var(--ease-doux); }
.lab--v7 .bouton-fleche svg { width: 14px; height: 14px; }
.lab--v7 .bouton:hover .bouton-fleche { transform: translateX(3px); }
.lab--v7 :focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }

/* ── En-tête : navigation à panneaux ────────────────────────────────────── */

.lab--v7 .nav-groupe { position: relative; }

.lab--v7 .nav-chevron { width: 12px; height: 12px; opacity: 0.7; transition: transform 240ms var(--ease-doux); }
.lab--v7 [data-nav-bouton][aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
/* le libellé survolé reste net, les autres s'estompent */

.lab--v7 .nav-panneau { position: absolute; left: -12px; top: calc(100% + 10px); z-index: 3; width: max-content; max-width: 920px; padding: 24px; border-radius: 23px; background: rgba(12, 18, 34, 0.97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(244, 247, 250, 0.1); display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease-doux), transform 260ms var(--ease-doux); }
.lab--v7 .nav-panneau[hidden] { display: none; }
.lab--v7 .nav-panneau.est-ouvert { opacity: 1; transform: none; }
.lab--v7 .nav-panneau--etapes { grid-template-columns: repeat(4, minmax(0, 190px)); }
.lab--v7 .nav-panneau a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start; padding: 12px; border-radius: 14px; color: #F4F7FA; transition: background-color 200ms var(--ease-doux); }
.lab--v7 .nav-panneau--etapes a { grid-template-columns: 1fr; }
.lab--v7 .nav-panneau a:hover { background: rgba(244, 247, 250, 0.07); }
.lab--v7 .nav-panneau b { font-size: 15px; line-height: 22px; font-weight: 600; }
.lab--v7 .nav-panneau small { grid-column: 2; font-size: 13px; line-height: 19px; color: rgba(244, 247, 250, 0.6); }
.lab--v7 .nav-panneau--etapes small { grid-column: 1; }
.lab--v7 .nav-picto { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--bleu-vif); background: rgba(77, 148, 245, 0.12); }
.lab--v7 .nav-picto svg { width: 18px; height: 18px; }
.lab--v7 .nav-voile { position: fixed; inset: 0; z-index: -1; background: rgba(8, 12, 23, 0.42); opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-doux); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.lab--v7 .hero .voile { background:
  linear-gradient(90deg, rgba(15, 23, 46, 0.93) 0%, rgba(15, 23, 46, 0.82) 30%, rgba(15, 23, 46, 0.42) 52%, rgba(15, 23, 46, 0) 68%),
  linear-gradient(rgba(15, 23, 46, 0.22) 0%, rgba(15, 23, 46, 0) 28%, rgba(15, 23, 46, 0.3) 78%, var(--n1) 100%); }
.lab--v7 .hero-actions { align-items: center; }
.lab--v7 .hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; width: 100%; margin-top: 4px; }
.lab--v7 .hero-badges[hidden] { display: none; }
.lab--v7 a.store-badge { transition: transform 180ms var(--ease-doux), filter 180ms var(--ease-doux); }
.lab--v7 a.store-badge:hover { transform: translateY(-2px); filter: brightness(1.08); }
.lab--v7 a.store-badge:active { transform: scale(0.98); }

/* ── Réassurance : trois colonnes centrées ──────────────────────────────── */
.lab--v7 .section-preuve { background: linear-gradient(180deg, var(--n0) 0%, var(--sombre) 100%); }
.lab--v7 .preuves-sociales { grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(244, 247, 250, 0.1); }
.lab--v7 .preuve-sociale { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 30px 24px; border-left: 1px solid rgba(244, 247, 250, 0.1); }
.lab--v7 .preuve-sociale:first-child { border-left: 0; padding-left: 24px; }
.lab--v7 .preuve-picto { grid-row: auto; }
.lab--v7 .preuve-chiffre { font-size: 21px; line-height: 28px; }
.lab--v7 a.preuve-chiffre { color: #F4F7FA; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244, 247, 250, 0.35); }
.lab--v7 a.preuve-chiffre:hover { text-decoration-color: var(--bleu-vif); }

/* ── Cockpit : 24 colonnes, 4 rangées de 192, cinq cartes ───────────────── */
.lab--v7 .section-bento { background: var(--sombre); }
.lab--v7 .section-bento > .conteneur { max-width: calc(var(--ck-max) + 2 * 48px); padding-bottom: clamp(80px, 6.5vw, 128px); }
.lab--v7 .cockpit { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(4, 192px); gap: 24px; }
.lab--v7 .ck { position: relative; overflow: hidden; border-radius: var(--r-carte); color: #F4F7FA; background: var(--ck-1); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.07); transition: box-shadow 240ms var(--ease-doux), transform 240ms var(--ease-doux); }
.lab--v7 .ck::after { content: ""; position: absolute; inset: 0; opacity: 0.055; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.lab--v7 .ck:hover { box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.16); transform: translateY(-2px); }
.lab--v7 .ck-texte { position: relative; z-index: 2; padding: 26px 26px 0; display: flex; flex-direction: column; gap: 7px; }
.lab--v7 .ck-texte h3 { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.012em; }
.lab--v7 .ck-texte p { font-size: 14px; line-height: 21px; color: rgba(244, 247, 250, 0.64); max-width: 34ch; }
.lab--v7 .ck-note { position: relative; z-index: 2; width: 100%; font-size: 11px; line-height: 15px; letter-spacing: 0.03em; color: rgba(244, 247, 250, 0.42); }
.lab--v7 .ck--a { grid-column: 1 / 9; grid-row: 1; background: radial-gradient(120% 120% at 100% 0%, var(--ck-2) 0%, var(--ck-1) 72%); }
.lab--v7 .ck--b { grid-column: 1 / 9; grid-row: 2 / 5; background: radial-gradient(95% 60% at 50% 100%, var(--ck-3) 0%, var(--ck-2) 42%, var(--ck-1) 100%); box-shadow: inset 0 0 0 1px rgba(77, 148, 245, 0.2); }
.lab--v7 .ck--c { grid-column: 9 / 17; grid-row: 1 / 3; background: radial-gradient(90% 80% at 20% 100%, #1A2A4C 0%, var(--ck-1) 72%); }
.lab--v7 .ck--d { grid-column: 17 / 25; grid-row: 1 / 3; background: radial-gradient(100% 90% at 100% 100%, #16223C 0%, #0B1324 78%); }
.lab--v7 .ck--e { grid-column: 9 / 25; grid-row: 3 / 5; background: radial-gradient(70% 90% at 0% 0%, var(--ck-2) 0%, var(--ck-1) 68%); }
/* A · plaque */
.lab--v7 .ck-plaque { position: absolute; left: 26px; right: 26px; bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; z-index: 2; }
.lab--v7 .plaque { display: inline-flex; align-items: stretch; align-self: flex-start; border-radius: 5px; overflow: hidden; background: #F4F7FA; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7); }
.lab--v7 .plaque-pays { display: grid; place-items: center; width: 20px; background: #1F3E8C; color: #fff; font-size: 10px; font-weight: 700; }
.lab--v7 .plaque-num { padding: 5px 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: #0B1324; font-variant-numeric: tabular-nums; }
.lab--v7 .plaque-champs { display: flex; flex-wrap: wrap; gap: 6px; }
.lab--v7 .plaque-champs li { padding: 5px 10px; border-radius: 999px; background: rgba(244, 247, 250, 0.07); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); font-size: 12px; line-height: 17px; opacity: 0; animation: v7-champ 420ms var(--ease-doux) forwards; animation-delay: calc(240ms + var(--d) * 160ms); }
.lab--v7 .plaque-champs b { font-weight: 600; }
@keyframes v7-champ { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* B · téléphone */
.lab--v7 .ck-tel { position: absolute; left: 50%; bottom: -6%; width: 264px; transform: translateX(-50%); z-index: 1; }
.lab--v7 .ck-tel .mk-tel { width: 264px; height: 546px; border-radius: 42px; padding: 9px; transform: none; box-shadow: 0 40px 80px -26px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(244, 247, 250, 0.16); }
.lab--v7 .ck-tel .mk-tel .ecran { border-radius: 34px; }
/* C · trajet */
.lab--v7 .ck-carte { position: absolute; left: 26px; right: 26px; top: 128px; bottom: 24px; border-radius: 14px; overflow: hidden; background: linear-gradient(150deg, #101B33 0%, #0A1223 100%); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); z-index: 2; }
.lab--v7 .ck-rayon { position: absolute; left: 12%; top: 50%; width: 132px; height: 132px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(31, 116, 231, 0.2), rgba(31, 116, 231, 0)); box-shadow: inset 0 0 0 1px rgba(77, 148, 245, 0.25); }
.lab--v7 .ck-trajet { position: absolute; inset: 18px 30px; width: calc(100% - 60px); height: calc(100% - 36px); color: rgba(77, 148, 245, 0.75); }
.lab--v7 .ck-point { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--bleu-vif); box-shadow: 0 0 0 4px rgba(77, 148, 245, 0.2); }
.lab--v7 .ck-point--depart { left: 22px; bottom: 26px; }
.lab--v7 .ck-point--arrivee { right: 34px; top: 52px; background: #F4F7FA; box-shadow: 0 0 0 4px rgba(244, 247, 250, 0.16); }
.lab--v7 .ck-mesure { position: absolute; left: 16px; top: 14px; display: flex; flex-direction: column; }
.lab--v7 .ck-mesure b { font-size: 19px; line-height: 24px; font-weight: 700; letter-spacing: -0.02em; }
.lab--v7 .ck-mesure span { font-size: 12px; line-height: 17px; color: rgba(244, 247, 250, 0.6); }
/* D · coût de revient */
.lab--v7 .ck-marge { position: absolute; left: 26px; right: 26px; top: 120px; bottom: 22px; display: flex; flex-direction: column; justify-content: center; gap: 10px; z-index: 2; }
.lab--v7 .ck-empile { display: grid; row-gap: 4px; }
.lab--v7 .ck-empile li { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; line-height: 19px; color: rgba(244, 247, 250, 0.62); padding: 4px 0; }
.lab--v7 .ck-empile b { font-weight: 600; color: rgba(244, 247, 250, 0.9); font-variant-numeric: tabular-nums; }
.lab--v7 .ck-empile-total { border-top: 1px solid rgba(244, 247, 250, 0.14); padding-top: 8px; color: #F4F7FA; }
.lab--v7 .ck-resultat { display: flex; align-items: baseline; gap: 10px; }
.lab--v7 .ck-resultat b { font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--bleu-vif); font-variant-numeric: tabular-nums; }
.lab--v7 .ck-resultat span { font-size: 13px; line-height: 18px; color: rgba(244, 247, 250, 0.62); }
/* E · cockpit web */
.lab--v7 .ck-cockpit { position: absolute; left: 26px; right: -40px; bottom: -14px; top: 118px; z-index: 1; }
.lab--v7 .ck-vue { position: absolute; margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(15, 23, 46, 0.14); }
.lab--v7 .ck-vue img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.lab--v7 .ck-vue--capital { left: 0; right: 32%; top: 0; bottom: 0; }
.lab--v7 .ck-vue--priorites { right: 0; width: 38%; top: 26px; bottom: 26px; }

/* ── Outils : trois grandes cartes ──────────────────────────────────────── */
.lab--v7 .outils { background: var(--n10); }
.lab--v7 .outils > .conteneur { max-width: calc(var(--ck-max) + 2 * 48px); }
.lab--v7 .outils-grille { margin-top: clamp(32px, 3vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lab--v7 .outil { position: relative; overflow: hidden; border-radius: 24px; min-height: 592px; display: flex; flex-direction: column; background: linear-gradient(170deg, var(--ck-2) 0%, var(--ck-1) 55%, #0B1324 100%); color: #F4F7FA; box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); }
.lab--v7 .outil:nth-child(2) { background: linear-gradient(170deg, #1B2A4A 0%, #111C33 58%, #0A1120 100%); }
.lab--v7 .outil:nth-child(3) { background: linear-gradient(170deg, #202D45 0%, #141E31 58%, #0A1120 100%); }
.lab--v7 .outil-texte { position: relative; z-index: 2; padding: 32px 32px 0; display: flex; flex-direction: column; gap: 10px; }
.lab--v7 .outil-texte h3 { font-size: 23px; line-height: 30px; font-weight: 600; letter-spacing: -0.015em; }
.lab--v7 .outil-texte p { font-size: 15px; line-height: 23px; color: rgba(244, 247, 250, 0.68); }
.lab--v7 .outil-micro { font-size: 13px !important; line-height: 19px !important; color: rgba(244, 247, 250, 0.46) !important; }
.lab--v7 .outil-vue { position: absolute; left: 32px; right: -70px; top: 218px; bottom: -18px; margin: 0; border-radius: 12px 0 0 0; overflow: hidden; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(15, 23, 46, 0.2); }
.lab--v7 .outil-vue img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.lab--v7 .outil-chaine { position: absolute; left: 32px; right: 32px; bottom: 0; top: 176px; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.lab--v7 .outil-chaine ul { display: grid; row-gap: 8px; }
.lab--v7 .outil-chaine li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px; background: rgba(244, 247, 250, 0.06); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); font-size: 14px; line-height: 20px; }
.lab--v7 .outil-puce { width: 7px; height: 7px; border-radius: 50%; background: var(--bleu-vif); flex: none; }
.lab--v7 .outil-vue--flux { position: relative; left: auto; right: -70px; top: auto; bottom: auto; flex: 1; min-height: 0; border-radius: 12px 0 0 0; }
.lab--v7 .outil-dossier { position: absolute; left: 32px; right: 32px; top: 232px; bottom: 32px; z-index: 2; border-radius: 14px; padding: 18px; background: rgba(10, 17, 32, 0.6); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.09); }
.lab--v7 .outil-periode { font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 247, 250, 0.5); margin-bottom: 12px; }
.lab--v7 .outil-dossier ul { display: grid; row-gap: 9px; }
.lab--v7 .outil-dossier li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; color: rgba(244, 247, 250, 0.74); }
.lab--v7 .outil-dossier b { font-size: 12px; font-weight: 600; color: var(--bleu-vif); }
.lab--v7 .outil-manquant { padding-top: 9px; border-top: 1px solid rgba(244, 247, 250, 0.12); }
.lab--v7 .outil-manquant b { color: #E8B341; }

/* ── Dossier véhicule : rétrécissement au scroll, bulles vivantes ───────── */

.lab--v7 .piece { will-change: transform; }
.lab--v7[data-motion="prete"] .dossier-anime .piece { animation: v7-derive var(--duree, 8s) ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.7s); }
@keyframes v7-derive { from { translate: 0 0; rotate: -0.6deg; } to { translate: var(--dx, 8px) var(--dy, -10px); rotate: 0.9deg; } }

/* ── Témoignages et sécurité : un seul environnement sombre ─────────────── */
.lab--v7 .avis, .lab--v7 .securite { background: var(--sombre); }
.lab--v7 .avis { padding-bottom: 0; }
.lab--v7 .avis > .conteneur { padding-bottom: clamp(48px, 4vw, 72px); }
.lab--v7 .securite > .conteneur { border-top: 1px solid rgba(244, 247, 250, 0.09); }
.lab--v7 .securite .carte--nuit { background: radial-gradient(90% 90% at 0% 0%, var(--ck-2) 0%, var(--ck-1) 72%); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); }
.lab--v7 .temoignages-rail { margin-top: clamp(28px, 2.6vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lab--v7 .temoignages-rail::-webkit-scrollbar { display: none; }
.lab--v7 .temoignages { display: flex; gap: 24px; padding-bottom: 4px; padding-inline: max(0px, calc((100% - min(956px, 84vw)) / 2)); }
.lab--v7 .temoignage { flex: 0 0 min(956px, 84vw); scroll-snap-align: center; min-height: 512px; border-radius: 24px; padding: 0; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); background: radial-gradient(90% 80% at 0% 0%, var(--ck-2) 0%, var(--ck-1) 70%); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.08); }
.lab--v7 .temoignage-photo { min-height: 0; }
.lab--v7 .temoignage-corps { padding: 40px; }
.lab--v7 .temoignage-citation { font-size: 24px; line-height: 34px; }
.lab--v7 .rail-commandes { margin-top: 20px; display: flex; gap: 10px; }
.lab--v7 .rail-bouton { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #F4F7FA; background: rgba(244, 247, 250, 0.07); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.14); transition: background-color 200ms var(--ease-doux), transform 200ms var(--ease-doux); }
.lab--v7 .rail-bouton:hover { background: rgba(244, 247, 250, 0.14); }
.lab--v7 .rail-bouton:active { transform: scale(0.94); }
.lab--v7 .rail-bouton svg { width: 18px; height: 18px; }
.lab--v7 .rail-bouton[disabled] { opacity: 0.35; cursor: default; }
.lab--v7 .notes { margin-top: 28px; }

/* ── Accès et rôles : transition progressive ────────────────────────────── */

/* ── CTA final : contenu → ample ────────────────────────────────────────── */
.lab--v7 .final { background: #FBFCFE; padding: clamp(56px, 6vw, 96px) 48px clamp(64px, 6vw, 104px); }
.lab--v7 .carte--finale { position: relative; max-width: var(--ck-max); height: clamp(420px, 34vw, 504px); margin: 0 auto; border-radius: var(--r-finale, 24px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); align-items: center; overflow: hidden; background: linear-gradient(120deg, #16233E 0%, #101A2F 46%, #0B1324 100%); transform: scale(var(--agrandir, 1)); transform-origin: 50% 50%; will-change: transform; box-shadow: 0 50px 100px -50px rgba(15, 23, 46, 0.6); }
.lab--v7 .finale-fond { position: absolute; inset: 0; z-index: 0; }
.lab--v7 .finale-halo { position: absolute; right: 6%; top: -30%; width: 62%; height: 150%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 116, 231, 0.32), rgba(31, 116, 231, 0)); }
.lab--v7 .finale-grain { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.lab--v7 .carte--finale .carte-texte { position: relative; z-index: 2; padding: 0 0 0 clamp(32px, 4.5vw, 72px); max-width: 620px; gap: 0; }
.lab--v7 .carte--finale h2 { font-size: clamp(30px, 3vw, 46px); line-height: 1.1; }
.lab--v7 .carte--finale p { margin-top: 16px; font-size: 18px; line-height: 28px; color: rgba(244, 247, 250, 0.72); max-width: 44ch; }
.lab--v7 .finale-visuel { position: relative; z-index: 2; height: 100%; }
.lab--v7 .finale-visuel .mk-tel { position: absolute; right: clamp(24px, 3vw, 56px); top: 50%; width: clamp(200px, 15vw, 252px); height: auto; aspect-ratio: 220 / 456; border-radius: 34px; padding: 8px; transform: translateY(-50%) translateY(var(--parallaxe, 0px)) rotate(-6deg); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(244, 247, 250, 0.16); }
.lab--v7 .finale-visuel .mk-tel .ecran { border-radius: 27px; }

@media (prefers-reduced-motion: reduce) {
  
  .lab--v7 .carte--finale { transform: none; }
  .lab--v7 .plaque-champs li { opacity: 1; animation: none; }
}

/* ══ Tablette ═════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  .lab--v7 .cockpit { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 300px; }
  .lab--v7 .ck--a { grid-column: 1; grid-row: 1; }
  .lab--v7 .ck--b { grid-column: 2; grid-row: 1 / 3; }
  .lab--v7 .ck--c { grid-column: 1; grid-row: 2; }
  .lab--v7 .ck--d { grid-column: 1; grid-row: 3; }
  .lab--v7 .ck--e { grid-column: 1 / 3; grid-row: 4; }
  .lab--v7 .ck-plaque { position: static; width: auto; padding: 16px 26px 0; }
  .lab--v7 .ck-tel { width: 230px; } .lab--v7 .ck-tel .mk-tel { width: 230px; height: 476px; }
  .lab--v7 .ck-cockpit { top: 108px; }
  .lab--v7 .outils-grille { grid-template-columns: 1fr; }
  .lab--v7 .outil { min-height: 0; }
  .lab--v7 .outil-vue { position: relative; left: 32px; right: -40px; bottom: auto; margin-top: 24px; }
  .lab--v7 .outil-chaine, .lab--v7 .outil-dossier { position: relative; inset: auto; top: auto; margin: 22px 32px 32px; }
  .lab--v7 .outil-chaine { flex-direction: row; align-items: stretch; gap: 20px; }
  .lab--v7 .outil-chaine ul { flex: 0 0 46%; align-content: start; }
  .lab--v7 .outil-vue--flux { right: -40px; }
  .lab--v7 .temoignage { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); min-height: 440px; }
  .lab--v7 .nav-panneau { max-width: min(92vw, 720px); }
}
@media (max-width: 1023px) {
  
  .lab--v7 .final { padding-left: 24px; padding-right: 24px; }
  .lab--v7 .carte--finale { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); height: clamp(380px, 46vw, 440px); }
}
/* ══ Mobile ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  
  .lab--v7 .menu-groupe summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--filet-inv, rgba(244,247,250,0.16)); font-size: 20px; line-height: 28px; font-weight: 600; cursor: pointer; list-style: none; }
  .lab--v7 .menu-groupe summary::-webkit-details-marker { display: none; }
  .lab--v7 .menu-groupe summary svg { width: 18px; height: 18px; opacity: 0.6; transition: transform 240ms var(--ease-doux); }
  .lab--v7 .menu-groupe[open] summary svg { transform: rotate(180deg); }
  .lab--v7 .menu-sous { display: flex; align-items: center; min-height: 48px; padding: 10px 0 10px 14px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.76); border-bottom: 1px solid rgba(244, 247, 250, 0.08); }
  .lab--v7 .preuves-sociales { grid-template-columns: 1fr; border-top: 0; }
  .lab--v7 .preuve-sociale { flex-direction: row; justify-content: flex-start; text-align: left; border-left: 0; border-top: 1px solid rgba(244, 247, 250, 0.1); padding: 16px 0; }
  .lab--v7 .preuve-sociale:first-child { padding-left: 0; }
  .lab--v7 .cockpit { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
  .lab--v7 .ck { grid-column: 1 !important; grid-row: auto !important; }
  .lab--v7 .ck--a { min-height: 300px; } .lab--v7 .ck--b { min-height: 480px; }
  .lab--v7 .ck--c { min-height: 320px; } .lab--v7 .ck--d { min-height: 330px; } .lab--v7 .ck--e { min-height: 360px; }
  .lab--v7 .ck-texte { padding: 22px 22px 0; }
  .lab--v7 .ck-plaque { padding: 14px 22px 22px; }
  .lab--v7 .ck-carte, .lab--v7 .ck-marge { left: 22px; right: 22px; }
  .lab--v7 .ck-tel { width: 214px; bottom: -10%; } .lab--v7 .ck-tel .mk-tel { width: 214px; height: 443px; }
  .lab--v7 .ck-cockpit { left: 22px; right: -30px; top: 112px; bottom: -10px; }
  .lab--v7 .ck-vue--capital { right: 26%; } .lab--v7 .ck-vue--priorites { width: 32%; }
  .lab--v7 .outil-texte { padding: 24px 22px 0; }
  .lab--v7 .outil-vue { left: 22px; right: -30px; margin-top: 20px; }
  .lab--v7 .outil-chaine { flex-direction: column; margin: 18px 22px 22px; }
  .lab--v7 .outil-chaine ul { flex: none; }
  .lab--v7 .outil-vue--flux { right: -30px; }
  .lab--v7 .outil-dossier { margin: 18px 22px 22px; }
  .lab--v7 .temoignage { flex-basis: 86vw; grid-template-columns: 1fr; min-height: 0; }
  .lab--v7 .temoignage-photo { min-height: 190px; }
  .lab--v7 .temoignage-corps { padding: 24px; }
  .lab--v7 .temoignage-citation { font-size: 19px; line-height: 28px; }
  .lab--v7 .final { padding: 32px 16px 48px; }
  .lab--v7 .carte--finale { grid-template-columns: 1fr; height: auto; padding: 32px 0 0; }
  .lab--v7 .carte--finale .carte-texte { padding: 0 22px; }
  .lab--v7 .finale-visuel { height: 260px; margin-top: 24px; }
  .lab--v7 .finale-visuel .mk-tel { right: 50%; top: 0; transform: translateX(50%) rotate(-5deg); width: 190px; }
  
  
}

/* ── Ajustements après première capture (passe 4) ───────────────────────── */
@media (max-width: 1279px) {
  .lab--v7 .ck-plaque { position: absolute; left: 26px; right: 26px; bottom: 20px; padding: 0; }
  .lab--v7 .ck-carte { top: 120px; }
  .lab--v7 .ck-marge { top: 112px; }
  .lab--v7 .outil-vue { position: relative; left: 32px; right: -40px; top: auto; bottom: auto; margin-top: 24px; height: 260px; }
  .lab--v7 .outil-vue--flux { height: auto; }
}
@media (max-width: 767px) {
  .lab--v7 .ck-plaque { left: 22px; right: 22px; }
  .lab--v7 .ck-carte { top: 116px; } .lab--v7 .ck-marge { top: 108px; }
  .lab--v7 .outil-vue { left: 22px; right: -30px; height: 220px; }
  .lab--v7 .temoignages { padding-inline: 0; }
}

/* ==========================================================================
   COUCHE v8 — PASSE 5 : densité, confiance et motion.

   Correctifs ciblés sur la base Qonto-like existante. Rien n'est reconstruit :
   cette couche resserre les hauteurs, ouvre les preuves de confiance, rend les
   deux effets de défilement réellement perceptibles et ralentit les
   transitions. Toutes les animations dérivent d'une seule variable, --progres,
   écrite par js/refonte.impra.js.
   ========================================================================== */
.lab--v8 {
  --ease-v8: cubic-bezier(0.22, 1, 0.36, 1);
  --bleu-liaison: #131F3C;          /* nuance médiane du dégradé hero → cockpit */
  --duree-role: 660ms;
  --duree-diapo: 680ms;
}

/* ── Hero : fond nettoyé ─────────────────────────────────────────────────
   La grande tache blanche posée en haut à gauche de la scène traversait le
   voile et lisait comme un blob. Le hero reste propre jusqu'aux futurs fonds. */
.lab--v8 .hero .forme { display: none; }
.lab--v8 .hero { min-height: clamp(600px, calc(100svh - var(--entete-h)), 860px); }
.lab--v8 .hero-preuve { text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; line-height: 18px; font-weight: 600; color: rgba(244, 247, 250, 0.6); }
.lab--v8 .hero-contenu { padding-bottom: clamp(44px, 6vh, 92px); }

/* ── Hero → confiance : une seule descente de couleur, pleine largeur ──── */
/* Plus de voile latéral : il assombrissait le tiers gauche du hero. Il ne
   reste que la descente verticale, qui sert la transition vers la bande de
   confiance. */
.lab--v8 .hero .voile { background:
  linear-gradient(180deg, rgba(15, 23, 46, 0.24) 0%, rgba(15, 23, 46, 0.06) 18%, rgba(15, 23, 46, 0.46) 52%, rgba(15, 23, 46, 0.78) 80%, #0F172E 100%); }
/* Le reflet blanc de la scène ajoutait jusqu'à 14 % de blanc derrière le titre. */
.lab--v8 .hero .lumiere { display: none; }
/* Le voile tenait aussi la lisibilité du titre. Plutôt que de le remettre, on
   déplace la zone claire de la scène sous l'écran produit : la gauche retombe
   sur l'extrémité sombre du même dégradé, sans aucune surcouche. */
.lab--v8 .hero .scene--bureau-clair { background: radial-gradient(74% 66% at 72% 30%, #E9EDF4 0%, #C3CCDB 34%, #46536F 84%, #2E3A55 100%); }
.lab--v8 .hero-preuve { color: rgba(244, 247, 250, 0.78); }
.lab--v8 .section-preuve { background: linear-gradient(180deg, #0F172E 0%, var(--bleu-liaison) 48%, var(--sombre) 100%); }
/* Rythme vertical par section. La couche v5 impose un --rythme uniforme avec
   une spécificité que les couches suivantes n'atteignaient pas ; on reprend
   ici la même forme de sélecteur et on pilote chaque section par un jeton. */
.lab--v8 .section:not(.hero) > .conteneur { padding-top: var(--pad-haut, var(--rythme)); padding-bottom: var(--pad-bas, var(--rythme)); }
.lab--v8 .section-preuve { --pad-haut: clamp(64px, 6vw, 80px); --pad-bas: clamp(56px, 4.6vw, 64px); }
.lab--v8 .section-preuve > .conteneur { max-width: var(--max-large); }
.lab--v8 .section-bento { --pad-haut: clamp(64px, 5vw, 76px); }

/* ── Trois preuves : une rangée éditoriale, aucune case ─────────────────── */
/* Rangée libre : deux ou trois preuves restent centrées, sans case ni filet.
   Le nombre affiché dépend des sources vérifiables, il ne doit pas casser la
   composition. */
.lab--v8 .preuves-sociales { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(32px, 4vw, 88px); border-top: 0; }
.lab--v8 .preuve-sociale { flex: 0 1 340px; }
.lab--v8 .preuve-sociale { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 16px; padding: 0; border: 0; background: none; transition: transform 220ms var(--ease-v8), color 220ms var(--ease-v8); }
.lab--v8 .preuve-sociale:first-child { padding-left: 0; }
.lab--v8 .preuve-sociale:hover { transform: translateY(-2px); }
.lab--v8 .preuve-sociale:hover .preuve-phrase { color: rgba(244, 247, 250, 0.85); }
.lab--v8 .preuve-sociale[hidden] { display: none; }
.lab--v8 .preuve-visuel { display: flex; align-items: center; justify-content: center; height: 72px; }
.lab--v8 .pastille { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #EAF1FC; background: linear-gradient(160deg, #24365E 0%, #16233E 100%); box-shadow: 0 0 0 2px var(--sombre), inset 0 0 0 1px rgba(244, 247, 250, 0.14); }
.lab--v8 .pastille + .pastille { margin-left: -16px; }
.lab--v8 .pastille svg { width: 24px; height: 24px; }
.lab--v8 .pastille img { width: 100%; height: 100%; object-fit: cover; }
.lab--v8 .pastille--outil { background: linear-gradient(160deg, #2E4E8C 0%, #1B2F57 100%); }
.lab--v8 .pastille--compte { background: linear-gradient(160deg, #1F74E7 0%, #1657AE 100%); }
.lab--v8 .pastille--note { color: #F6C445; }
.lab--v8 .pastille--valeur, .lab--v8 .pastille--jours { width: 44px; height: 44px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #0F172E; background: #F4F7FA; box-shadow: 0 0 0 2px var(--sombre); }
.lab--v8 .preuve-chiffre { font-size: clamp(23px, 1.75vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: #F4F7FA; margin: 0; }
.lab--v8 .preuve-phrase { margin: 0; font-size: 16px; line-height: 25px; color: rgba(244, 247, 250, 0.62); max-width: 24ch; transition: color 220ms var(--ease-v8); }

/* ── Dossier véhicule : pleine largeur au départ, carte contenue à l'arrivée
   Le resserrement vient d'une échelle et d'un rayon dérivés de --progres :
   aucune largeur ni hauteur n'est animée, donc aucun saut de gabarit.      */

/* Constellation : composition resserrée pour qu'aucune bulle ne soit rognée,
   centre plus présent, et plus aucune orbite complète — seules les six
   pastilles dérivent, chacune sur sa propre trajectoire. */
.lab--v8 .constellation { height: clamp(440px, 36vw, 560px); }
/* La carte a besoin d'une surface pour que le resserrement se voie : blanche
   sur un fond légèrement plus sourd, avec une ombre qui naît avec --progres. */

.lab--v8 .anneau, .lab--v8 .satellite > span { animation: none; }
.lab--v8 .anneau--ext .satellite { --r: clamp(170px, 14vw, 220px) !important; }
.lab--v8 .anneau--int .satellite { --r: clamp(120px, 10vw, 158px) !important; }
.lab--v8 .satellite { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.lab--v8 .satellite--petit { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
.lab--v8 .satellite > span { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: -0.01em; gap: 4px; box-shadow: 0 16px 34px -14px rgba(15, 23, 46, 0.4); }
.lab--v8 .satellite--petit > span { font-size: 13px; line-height: 17px; }
.lab--v8 .constellation .noyau { width: 176px; height: 176px; font-size: 28px; line-height: 1.15; box-shadow: 0 30px 60px -26px rgba(15, 23, 46, 0.55), 0 0 0 10px rgba(15, 23, 46, 0.05); }
.lab--v8 .constellation .d1 { width: 620px; height: 620px; }
.lab--v8 .constellation .d2 { width: 440px; height: 440px; }
.lab--v8 .constellation .d3 { width: 300px; height: 300px; }
/* Une seule bulle suit le défilement : `translate` sur le satellite, pour ne
   pas entrer en conflit avec le `transform` qui le place sur son anneau, ni
   avec le `translate` que la dérive applique à la pastille elle-même. */
.lab--v8 .dossier-anime .anneau--int .satellite:first-child { translate: 0 var(--parallaxe-bulle, 0px); }

/* ── CTA final : l'effet inverse, même moteur, même easing ──────────────── */
.lab--v8 .carte--finale {
  --p: var(--progres, 1);
  transform: scale(calc(0.91 + 0.09 * var(--p)));
  border-radius: calc(30px - 6px * var(--p));
  transform-origin: 50% 50%; will-change: transform; animation: none;
}
.lab--v8 .final { overflow: clip; }

/* ── Bulles du dossier : lentes, désynchronisées, amplitudes distinctes ─── */
.lab--v8[data-motion="prete"] .dossier-anime .piece { animation: v8-derive var(--duree, 10s) ease-in-out infinite alternate; animation-delay: var(--retard, 0s); }
@keyframes v8-derive { from { translate: 0 0; rotate: -0.5deg; } to { translate: var(--dx, 8px) var(--dy, -10px); rotate: 0.8deg; } }

/* ── Accès et rôles : élargissement lent, contenu qui suit ──────────────── */

/* Carte resserrée : la flèche s'efface pour ne pas chevaucher le titre. */

/* ── Lecture automatique : un seul modèle pour les deux carrousels ──────── */
.lab--v8 .lecture { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.lab--v8 .lecture-bouton { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: rgba(15, 23, 46, 0.06); box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.12); transition: background-color 200ms var(--ease-v8), transform 200ms var(--ease-v8); }
.lab--v8 .lecture-bouton:hover { background: rgba(15, 23, 46, 0.11); }
.lab--v8 .lecture-bouton:active { transform: scale(0.94); }
.lab--v8 .lecture-bouton svg { width: 14px; height: 14px; }
.lab--v8 .lecture-lire { display: none; }
.lab--v8 .lecture[data-lecture="pause"] .lecture-pause { display: none; }
.lab--v8 .lecture[data-lecture="pause"] .lecture-lire { display: block; }
.lab--v8 .lecture-jauge { flex: 0 0 auto; width: 168px; max-width: 42vw; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(15, 23, 46, 0.12); }
.lab--v8 .lecture-barre { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--bleu-vif); transform-origin: left center; transform: scaleX(var(--avancee, 0)); }
.lab--v8 .lecture--avis { flex: 0 0 auto; margin-top: 0; margin-left: 12px; color: #F4F7FA; }
.lab--v8 .lecture--avis .lecture-bouton { background: rgba(244, 247, 250, 0.07); box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.16); }
.lab--v8 .lecture--avis .lecture-bouton:hover { background: rgba(244, 247, 250, 0.14); }
.lab--v8 .lecture--avis .lecture-jauge { background: rgba(244, 247, 250, 0.14); }

/* ── Web et mobile : le changement d'écran se fait en fondu, pas en coupe ── */
.lab--v8 .usages-visuel { position: relative; }
.lab--v8 .usages-ecran { transition: opacity var(--duree-diapo) var(--ease-v8), transform var(--duree-diapo) var(--ease-v8); }
.lab--v8 .usages-ecran:not(.est-actif) { opacity: 0; transform: translateY(14px) scale(0.985); pointer-events: none; }
.lab--v8 .usages-ecran.est-actif { opacity: 1; transform: none; }

/* ── Témoignages : section resserrée, quatre avis, aperçu du suivant ────── */
.lab--v8 .avis { --pad-haut: clamp(56px, 5.4vw, 80px); --pad-bas: clamp(20px, 2vw, 32px); }
.lab--v8 .avis h2 { font-size: clamp(32px, 3.4vw, 52px); }
.lab--v8 .temoignages-rail { margin-top: clamp(24px, 2.2vw, 34px); scroll-behavior: smooth; }
.lab--v8 .temoignages { gap: 22px; padding-inline: max(0px, calc((100% - min(880px, 76vw)) / 2)); }
.lab--v8 .temoignage { flex-basis: min(880px, 76vw); min-height: clamp(480px, 34vw, 540px); transition: opacity 320ms var(--ease-v8); }
.lab--v8 .temoignage[data-visible="non"] { opacity: 0.4; }
.lab--v8 .rail-commandes { margin-top: 18px; align-items: center; }

/* ── Témoignages → sécurité : une seule séquence, pas deux blocs ────────── */
.lab--v8 .securite { --pad-haut: clamp(36px, 3.4vw, 52px); --pad-bas: clamp(64px, 5.4vw, 80px); }
.lab--v8 .securite > .conteneur { border-top: 0; }
.lab--v8 .securite h2 { font-size: clamp(30px, 3.2vw, 48px); }

/* ── Cadre à lumière mobile : une seule zone claire parcourt le contour ─── */

@property --tour { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ── FAQ : composition éditoriale, callout en pied de colonne ───────────── */
.lab--v8 .faq { --pad-haut: clamp(64px, 5.4vw, 88px); --pad-bas: clamp(64px, 5.4vw, 88px); }
.lab--v8 .faq > .conteneur { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); }
.lab--v8 .faq-tete { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.lab--v8 .faq-callout { padding: 22px 24px; border-radius: 16px; background: var(--n9, #F3F5F9); box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.07); }
.lab--v8 .faq-callout-titre { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--n1); }
.lab--v8 .faq-callout-texte { margin-top: 4px; font-size: 15px; line-height: 23px; color: var(--n5); }
.lab--v8 .faq-callout .lien-fleche { margin-top: 14px; }
.lab--v8 .question summary { padding: 22px 0; transition: color 220ms var(--ease-v8); }
.lab--v8 .question summary::after { transition: transform 240ms var(--ease-v8); }
.lab--v8 .reponse { max-width: 62ch; }
.lab--v8[data-motion="prete"] .question[open] .reponse { animation: v8-deplier 360ms var(--ease-v8) both; }
@keyframes v8-deplier { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Tarifs : le prix cesse d'être l'élément le plus lourd de la grille ─── */
.lab--v8 .prix { font-size: clamp(40px, 3.6vw, 52px); line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 20px; display: flex; align-items: baseline; gap: 6px; min-height: calc(clamp(40px, 3.6vw, 52px) * 1.05); }
.lab--v8 .prix-unite { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--n6); letter-spacing: 0; }
.lab--v8 .prix-annuel { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--n6); font-variant-numeric: tabular-nums; }
.lab--v8 .formule-accroche { min-height: 48px; }
.lab--v8 .formule h3 { font-weight: 600; }

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .lab--v8 .preuves-sociales { gap: 40px; }
  .lab--v8 .preuve-sociale { flex: 0 1 260px; }
  
  .lab--v8 .faq > .conteneur { grid-template-columns: 1fr; row-gap: 32px; }
  .lab--v8 .faq-tete { gap: 20px; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .lab--v8 .section-preuve > .conteneur { padding-top: 48px; padding-bottom: 48px; }
  .lab--v8 .section-bento > .conteneur { padding-top: 48px; }
  .lab--v8 .preuves-sociales { flex-direction: column; gap: 24px; }
  /* Sur mobile, le visuel tient la hauteur des deux lignes de texte. */
  .lab--v8 .preuve-sociale { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 3px; align-items: center; justify-items: start; text-align: left; border: 0; padding: 0; }
  .lab--v8 .preuve-visuel { grid-row: 1 / 3; height: auto; }
  .lab--v8 .pastille { width: 46px; height: 46px; }
  .lab--v8 .pastille + .pastille { margin-left: -14px; }
  .lab--v8 .pastille svg { width: 21px; height: 21px; }
  .lab--v8 .pastille--valeur, .lab--v8 .pastille--jours { width: 38px; height: 38px; font-size: 12px; }
  .lab--v8 .preuve-sociale .preuve-chiffre { font-size: 20px; line-height: 26px; }
  .lab--v8 .preuve-phrase { font-size: 15px; line-height: 21px; max-width: none; }
  
  
  .lab--v8 .carte--finale { --p: var(--progres, 1); transform: scale(calc(0.98 + 0.02 * var(--p))); border-radius: calc(22px - 2px * var(--p)); }
  .lab--v8 .temoignages { padding-inline: 0; }
  .lab--v8 .temoignage { flex-basis: 86vw; min-height: 0; }
  .lab--v8 .rail-commandes { flex-wrap: wrap; }
  .lab--v8 .lecture--avis { margin-left: 0; width: 100%; }
  .lab--v8 .faq-callout { width: 100%; }
}

/* ── Mouvement réduit : l'état de repos est l'état final ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lab--v8 .carte--finale{ --p: 1; }
  .lab--v8 .usages-ecran:not(.est-actif) { transform: none; }
  .lab--v8 .preuve-sociale{ transition: none; }
}

/* ==========================================================================
   PASSE 5B — rattrapage : note Google, continuité des deux mises en scène,
   scène orbitale du dossier, rotations plus rapides sans minuterie visible.
   Cette section prolonge la couche v8 ; elle vient après, donc elle gagne
   à spécificité égale sur les réglages de la passe 5.
   ========================================================================== */

/* ── Note Google : cinq étoiles, 4,7 sur 5 = 94 % de la rangée ──────────── */
.lab--v8 .etoiles { position: relative; display: inline-flex; line-height: 0; }
.lab--v8 .etoiles-fond, .lab--v8 .etoiles-pleines { display: inline-flex; gap: 3px; }
.lab--v8 .etoiles svg { width: 15px; height: 15px; display: block; }
.lab--v8 .etoiles-fond { fill: rgba(244, 247, 250, 0.2); }
.lab--v8 .etoiles-pleines { position: absolute; left: 0; top: 0; fill: #E0A23F; clip-path: inset(0 calc(100% - var(--part, 100%)) 0 0); }
.lab--v8 .preuve-sociale .etoiles { margin-top: -2px; }

/* ── Dossier véhicule : une surface continue, puis une carte ────────────
   Au départ la carte occupe toute la largeur, dans le navy de sa section :
   ni rayon, ni ombre, ni gouttière n'annoncent une carte. Tout naît de
   --progres. Le fond de page n'apparaît qu'à mesure que les côtés s'ouvrent. */

/* Une seule colonne par défaut : la scène orbitale a besoin de toute la
   largeur pour rester lisible. Les deux colonnes n'apparaissent qu'au-delà de
   1600 px, là où le texte et la scène tiennent ensemble sans se comprimer. */

/* ── CTA final : un environnement cohérent, pas une carte dans le vide ─── */
.lab--v8 .final { background: linear-gradient(180deg, #FBFCFE 0%, #EDF1F8 46%, #E6ECF6 100%); }
.lab--v8 .final > .carte--finale { position: relative; }
.lab--v8 .carte--finale {
  --p: var(--progres, 1);
  transform: scale(calc(0.92 + 0.08 * var(--p)));
  border-radius: calc(31px - 7px * var(--p));
  box-shadow: 0 50px 100px -50px rgba(15, 23, 46, calc(0.35 + 0.25 * var(--p)));
}

/* ── Mouvement réduit : composition figée, information intacte ──────────── */
@media (prefers-reduced-motion: reduce) {
  
  
  .lab--v8 .carte--finale{ --p: 1; }
}

/* ==========================================================================
   PASSE 5C — la section Dossier, compactée autour du véhicule.

   Le panneau tient désormais dans un regard : texte à gauche, système
   orbital à droite. Au centre, le véhicule — l'objet métier d'IMPRA — et non
   plus une capture d'écran. Les six fonctions gravitent autour de lui sur
   deux ellipses de sens opposés, et passent DERRIÈRE lui, jamais devant.
   ========================================================================== */

/* ── Boîte orbitale : canevas logique de 720 × 470 mis à l'échelle ──────── */

/* ── Le véhicule : aucun cadre, aucune plaque, le ratio d'origine ───────── */

/* ── Les six bulles ─────────────────────────────────────────────────────── */

.lab--v8 .voie-a { offset-path: path("M 74,235 a 286,190 0 1,1 572,0 a 286,190 0 1,1 -572,0"); --duree: 26s; }
/* La voie B n'est plus porteuse : dans une boîte de 720 × 470 avec un
   véhicule de 270 à 340 px, deux trajectoires porteuses ne peuvent éviter à
   la fois le véhicule et leurs propres rencontres. Les six bulles occupent
   donc la trajectoire extérieure, à 60° l'une de l'autre. */

/* ── Paliers ────────────────────────────────────────────────────────────── */

/* ── Sous 640 px : plus d'orbite, le véhicule puis les six fonctions ────── */

/* ── Mouvement réduit : tout est fixe, rien n'est perdu ─────────────────── */

/* ==========================================================================
   PASSE MOBILE — inspirée de la lecture mobile de Qonto.

   Une seule grammaire sous 768 px : gouttière de 20 px, titres de section à
   28 px alignés à gauche, liens de section en pilules contournées, cartes
   pleine largeur dont les visuels restent contenus, cibles tactiles de 44 px,
   et une barre d'action fixe en bas d'écran. Le préfixe `.lab.lab--v8` porte
   la spécificité nécessaire pour passer devant les couches précédentes.
   ========================================================================== */

/* ── Barre d'action fixe (masquée hors mobile par l'attribut hidden) ────── */

@media (max-width: 767px) {
  /* ── Grammaire commune ─────────────────────────────────────────────────── */
  .lab.lab--v8 { --gout-m: 20px; }
  .lab.lab--v8 .section:not(.hero) > .conteneur { padding-left: var(--gout-m); padding-right: var(--gout-m); }
  .lab.lab--v8 .section { --pad-haut: 56px; --pad-bas: 56px; }
  .lab.lab--v8 .section h2 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; text-align: left; text-wrap: balance; }
  .lab.lab--v8 .section .eyebrow { font-size: 12px; line-height: 16px; margin-bottom: 10px; }
  .lab.lab--v8 .section .intro-section { margin-top: 12px; font-size: 16px; line-height: 24px; text-align: left; }
  .lab.lab--v8 .tete-section { flex-direction: column; align-items: flex-start; gap: 20px; }
  .lab.lab--v8 .tete-section + * { margin-top: 28px; }
  .lab.lab--v8 .tete-centree { text-align: left; align-items: flex-start; }
  .lab.lab--v8 .tete-centree > * { margin-left: 0; margin-right: 0; }

  /* Liens de section : pilules contournées, pleine hauteur tactile */
  .lab.lab--v8 .tete-lien, .lab.lab--v8 .section .lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font-size: 15px; line-height: 20px; text-decoration: none; }
  .lab.lab--v8 .section--encre .tete-lien, .lab.lab--v8 .section--encre .lien-fleche { box-shadow: inset 0 0 0 1px rgba(244, 247, 250, 0.5); }
  .lab.lab--v8 .tete-section .tete-lien { display: inline-flex; margin-top: 0; }
  .lab.lab--v8 .bouton { min-height: 48px; }

  /* ── Hero ─────────────────────────────────────────────────────────────── */
  .lab.lab--v8 .hero h1 { font-size: 36px; line-height: 40px; letter-spacing: -0.03em; }
  .lab.lab--v8 .hero-contenu { padding-left: var(--gout-m); padding-right: var(--gout-m); }
  .lab.lab--v8 .hero-sous-titre { font-size: 16px; line-height: 25px; }

  /* ── Confiance : trois preuves centrées, empilées ─────────────────────── */
  .lab.lab--v8 .section-preuve { --pad-haut: 48px; --pad-bas: 48px; }
  .lab.lab--v8 .preuves-sociales { flex-direction: column; align-items: center; gap: 32px; }
  .lab.lab--v8 .preuve-sociale { display: flex; flex: none; flex-direction: column; align-items: center; justify-items: initial; text-align: center; gap: 8px; width: 100%; max-width: 300px; }
  .lab.lab--v8 .preuve-visuel { height: auto; margin-bottom: 4px; }
  .lab.lab--v8 .pastille { width: 44px; height: 44px; }
  .lab.lab--v8 .pastille + .pastille { margin-left: -12px; }
  .lab.lab--v8 .pastille svg { width: 20px; height: 20px; }
  .lab.lab--v8 .pastille--valeur, .lab.lab--v8 .pastille--jours { width: 38px; height: 38px; font-size: 12px; }
  .lab.lab--v8 .preuve-sociale .preuve-chiffre { font-size: 20px; line-height: 26px; }
  .lab.lab--v8 .preuve-phrase { font-size: 15px; line-height: 22px; max-width: 26ch; }

  /* ── Cockpit : cartes empilées, visuels contenus ──────────────────────── */
  .lab.lab--v8 .cockpit { display: flex; flex-direction: column; gap: 12px; }
  .lab.lab--v8 .ck { min-height: 0; height: auto; border-radius: 20px; }
  .lab.lab--v8 .ck-texte { padding: 22px 20px 0; }
  .lab.lab--v8 .ck-texte h3 { font-size: 18px; line-height: 24px; }
  .lab.lab--v8 .ck-texte p { font-size: 15px; line-height: 22px; }
  .lab.lab--v8 .ck--a { padding-bottom: 20px; }
  .lab.lab--v8 .ck--a .ck-plaque { position: static; margin: 16px 20px 0; }
  .lab.lab--v8 .ck--e { padding-bottom: 20px; }
  .lab.lab--v8 .ck--e .ck-cockpit { position: static; inset: auto; width: auto; height: auto; transform: none; }
  .lab.lab--v8 .ck--e .ck-vue { position: static; inset: auto; width: auto; height: auto; margin: 18px 20px 0; opacity: 1; transform: none; }
  .lab.lab--v8 .ck--e .ck-vue img { height: auto; object-fit: contain; }
  .lab.lab--v8 .ck--e .ck-vue--priorites { display: none; }
  /* B, C, D : leurs visuels quittent l'absolu et prennent leur place sous le texte. */
  .lab.lab--v8 .ck--b, .lab.lab--v8 .ck--c, .lab.lab--v8 .ck--d { padding-bottom: 20px; overflow: hidden; }
  .lab.lab--v8 .ck--b { padding-bottom: 0; }
  .lab.lab--v8 .ck-tel { position: relative; left: auto; bottom: auto; width: 100%; height: 300px; margin-top: 20px; transform: none; overflow: hidden; }
  .lab.lab--v8 .ck-tel .mk-tel { position: absolute; left: 50%; top: 0; width: 206px; height: 426px; transform: translateX(-50%); }
  .lab.lab--v8 .ck-carte { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: 176px; margin: 18px 20px 0; }
  .lab.lab--v8 .ck-marge { position: static; margin: 18px 20px 0; gap: 8px; }
  .lab.lab--v8 .ck-empile li { font-size: 14px; }

  /* ── Parcours : texte puis visuel, jamais l'un sur l'autre ────────────── */
  .lab.lab--v8 #parcours .cartes { display: flex; flex-direction: column; gap: 12px; }
  .lab.lab--v8 #parcours .carte { display: flex; flex-direction: column; height: auto; min-height: 0; border-radius: 20px; overflow: hidden; }
  .lab.lab--v8 #parcours .carte-texte { position: static; padding: 22px 20px 0; }
  .lab.lab--v8 #parcours .carte-texte h3 { font-size: 22px; line-height: 28px; }
  .lab.lab--v8 #parcours .carte-texte p:not(.etape) { font-size: 15px; line-height: 22px; }
  .lab.lab--v8 #parcours .etape { padding-right: 0; font-size: 12px; }
  .lab.lab--v8 #parcours .carte-visuel { position: relative; inset: auto; top: auto; height: 236px; margin-top: 20px; overflow: hidden; }
  .lab.lab--v8 #parcours .carte-visuel .capture { position: absolute; left: 20px; right: 20px; width: auto; top: 0; bottom: auto; transform: none; margin: 0; }
  .lab.lab--v8 #parcours .carte-visuel .capture--liste { top: 58px; }
  .lab.lab--v8 #parcours .carte-visuel .capture img { width: 100%; height: auto; }
  .lab.lab--v8 #parcours .carte-visuel .mk-tel { position: absolute; left: 50%; top: 0; bottom: auto; right: auto; width: 176px; height: 360px; transform: translateX(-50%); }

  /* ── Dossier : même alignement que le reste de la page ────────────────── */
  
  

  /* ── Outils : visuels contenus dans leur carte ────────────────────────── */
  .lab.lab--v8 .outils-grille { display: flex; flex-direction: column; gap: 12px; }
  .lab.lab--v8 .outil { min-height: 0; height: auto; border-radius: 20px; padding-bottom: 20px; }
  .lab.lab--v8 .outil-texte { padding: 22px 20px 0; }
  .lab.lab--v8 .outil-texte h3 { font-size: 20px; line-height: 26px; }
  .lab.lab--v8 .outil-texte p { font-size: 15px; line-height: 22px; }
  .lab.lab--v8 .outil-vue, .lab.lab--v8 .outil .capture, .lab.lab--v8 .outil-chaine { position: static; inset: auto; width: auto; height: auto; margin: 18px 20px 0; transform: none; }
  .lab.lab--v8 .outil-vue img, .lab.lab--v8 .outil .capture img { width: 100%; height: auto; object-fit: contain; border-radius: 10px; }

  /* ── Web et mobile : titre, visuel, puis les onglets ──────────────────── */
  .lab.lab--v8 .usages { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .lab.lab--v8 .usages-texte { display: contents; }
  .lab.lab--v8 .usages-texte > .eyebrow { order: 0; }
  .lab.lab--v8 .usages-texte > h2 { order: 1; }
  .lab.lab--v8 .usages-texte > .intro-section { order: 2; }
  .lab.lab--v8 .usages-visuel { order: 3; position: relative; align-self: stretch; width: 100%; height: 380px; margin-top: 24px; border-radius: 20px; }
  /* Le bouton pause se pose sur le coin bas droit du visuel. */
  .lab.lab--v8 [data-lecture-usages] { order: 4; position: relative; z-index: 3; align-self: flex-end; margin: -58px 12px 0 0; }
  .lab.lab--v8 [data-lecture-usages] .lecture-bouton { background: rgba(255, 255, 255, 0.86); box-shadow: 0 6px 16px -6px rgba(15, 23, 46, 0.4); }
  .lab.lab--v8 .usages-liste { order: 5; margin-top: 30px; }
  .lab.lab--v8 .usages-texte > .microcopy { order: 6; margin-top: 16px; }
  .lab.lab--v8 .usages-texte > .stores { order: 7; }
  .lab.lab--v8 .usages-cta { order: 8; align-self: flex-start; margin-top: 20px; }
  .lab.lab--v8 .usage { min-height: 44px; padding: 14px 0 14px 16px; }
  .lab.lab--v8 .usage-titre { font-size: 17px; line-height: 22px; }
  .lab.lab--v8 .usage-texte { font-size: 15px; line-height: 22px; }

  /* ── Accès et rôles : trois cartes lisibles, toutes à égalité ─────────── */
  
  
  
  
  
  
  
  

  /* ── Témoignages : étiquette propre, commandes sur une ligne ──────────── */
  .lab.lab--v8 .avis-apercu { border-radius: 12px; font-size: 12px; line-height: 17px; padding: 8px 12px; }
  .lab.lab--v8 .rail-commandes { flex-wrap: nowrap; gap: 10px; margin-top: 16px; }
  .lab.lab--v8 .lecture--avis { width: auto; margin-left: auto; }
  .lab.lab--v8 .rail-bouton, .lab.lab--v8 .lecture-bouton { width: 44px; height: 44px; }

  /* ── Sécurité : garanties empilées, texte à pleine largeur ────────────── */
  .lab.lab--v8 .securite > .conteneur { display: flex; flex-direction: column; gap: 28px; }
  .lab.lab--v8 .securite .carte--nuit { display: flex; flex-direction: column; gap: 24px; padding: 24px 20px; }
  .lab.lab--v8 .securite .garantie { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; text-align: left; }
  .lab.lab--v8 .securite .garantie svg { grid-row: 1 / 3; width: 36px; height: 36px; }
  .lab.lab--v8 .securite .garantie h3 { font-size: 17px; line-height: 23px; margin: 0; }
  .lab.lab--v8 .securite .garantie p { font-size: 15px; line-height: 22px; margin: 0; }

  /* ── Tarifs ───────────────────────────────────────────────────────────── */
  .lab.lab--v8 .formules { gap: 12px; }
  .lab.lab--v8 .formule { border-radius: 20px; padding: 24px 20px; }
  .lab.lab--v8 .tarifs-micro, .lab.lab--v8 .actions-centrees { text-align: left; justify-content: flex-start; }

  /* ── FAQ : les questions d'abord, le renvoi ensuite ───────────────────── */
  .lab.lab--v8 .faq > .conteneur { display: flex; flex-direction: column; }
  .lab.lab--v8 .faq-tete { display: contents; }
  .lab.lab--v8 .faq-tete > h2 { order: 0; }
  .lab.lab--v8 .faq-liste { order: 1; margin-top: 24px; }
  .lab.lab--v8 .faq-callout { order: 2; margin-top: 28px; }
  .lab.lab--v8 .question summary { min-height: 56px; padding: 16px 0; font-size: 16px; line-height: 23px; }

  /* ── CTA final et pied de page ────────────────────────────────────────── */
  .lab.lab--v8 .carte--finale h2 { text-align: center; }
  .lab.lab--v8 .carte--finale .final-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .lab.lab--v8 .carte--finale .final-actions .bouton { width: 100%; justify-content: center; }
  .lab.lab--v8 .carte--finale .carte-texte { width: 100%; }
  .lab.lab--v8 .pied-impra-colonne a { display: inline-flex; align-items: center; min-height: 36px; }
  .lab.lab--v8 .pied-impra-bas nav a { display: inline-flex; align-items: center; min-height: 32px; }
  .lab.lab--v8 .pied-impra-marque .marque { display: inline-flex; align-items: center; min-height: 32px; }
  /* Logo d'en-tête : la zone tactile grandit, le dessin garde ses 20 px. */
  
  .lab.lab--v8 .pied-impra > .conteneur { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   ASSETS DÉFINITIFS — portrait du support et fond du CTA final.
   Deux images générées pour IMPRA, servies en AVIF avec repli WebP.
   ========================================================================== */

/* ── Support 7j/7 : un visage dans la bulle, un anneau fin, un point bleu ── */
.lab--v8 .pastille--portrait { position: relative; overflow: visible; background: #16233E; box-shadow: 0 0 0 2px var(--sombre), 0 0 0 3px rgba(244, 247, 250, 0.14); }
.lab--v8 .pastille--portrait picture { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.lab--v8 .pastille--portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0.94; transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.lab--v8 .preuve-sociale:hover .pastille--portrait img { opacity: 1; }
/* Le portrait est positionné : il passerait au-dessus de la bulle « 7j/7 »
   qui le chevauche. Les bulles chiffrées reprennent le dessus. */
.lab--v8 .pastille--jours, .lab--v8 .pastille--valeur { position: relative; z-index: 2; }
/* À côté d'un visage, la bulle « 7j/7 » ne mord plus que sur le bord. */
.lab--v8 .pastille--portrait + .pastille { margin-left: -9px; }
@media (max-width: 767px) { .lab.lab--v8 .pastille--portrait + .pastille { margin-left: -7px; } }
.lab--v8 .pastille-dispo { position: absolute; left: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--bleu-vif); box-shadow: 0 0 0 2px var(--sombre); }
@media (max-width: 767px) { .lab.lab--v8 .pastille-dispo { width: 10px; height: 10px; } }

/* ── CTA final : photographie de fond, voile de lecture à gauche ─────────── */
.lab--v8 .carte--finale { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
.lab--v8 .finale-fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: var(--impra-navy); }
.lab--v8 .finale-photo { position: absolute; inset: 0; display: block; }
.lab--v8 .finale-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 74% 52%;
  /* Zoom de 2 % au plus, lié à la progression déjà écrite sur la carte. */
  transform: scale(calc(1.02 - 0.02 * var(--p, 1))); transform-origin: 62% 55%; will-change: transform;
}
.lab--v8 .finale-voile { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(15, 23, 46, 0.95) 0%, rgba(15, 23, 46, 0.86) 30%, rgba(15, 23, 46, 0.42) 58%, rgba(15, 23, 46, 0.1) 78%, rgba(15, 23, 46, 0.04) 100%),
  linear-gradient(180deg, rgba(15, 23, 46, 0) 58%, rgba(15, 23, 46, 0.34) 100%); }
.lab--v8 .finale-grain { opacity: 0.05; }
.lab--v8 .carte--finale .carte-texte { max-width: 560px; }

@media (max-width: 1279px) {
  .lab--v8 .carte--finale { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); }
  .lab--v8 .finale-photo img { object-position: 78% 50%; }
}
@media (max-width: 767px) {
  /* Le texte en haut, la voiture dans le bas de la carte, jamais sous les mots. */
  .lab.lab--v8 .carte--finale { min-height: 600px; padding: 36px 0 220px; }
  .lab.lab--v8 .finale-photo img { object-position: 50% 100%; }
  .lab.lab--v8 .finale-voile { background:
    linear-gradient(180deg, rgba(15, 23, 46, 0.97) 0%, rgba(15, 23, 46, 0.92) 44%, rgba(15, 23, 46, 0.46) 66%, rgba(15, 23, 46, 0.12) 86%, rgba(15, 23, 46, 0.22) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .lab--v8 .finale-photo img { transform: none; will-change: auto; }
  .lab--v8 .pastille--portrait img { transition: none; }
}

/* ── Ancre héritée #explorer : arrive sous l'en-tête fixe, sur le titre du cockpit ── */
#explorer { scroll-margin-top: calc(var(--entete-h, 80px) + 24px); }

/* ── Pas de fiche, pas de badge : « hidden » gagne sur tout display (règle tenue par tests/badges-stores.mjs) ── */
[data-stores][hidden], [data-store-link][hidden] { display: none !important; }

/* ==========================================================================
   PORTAIL « EXPLORER IMPRA » — repris de la V1 (css/cinematic.impra.css)
   Trois temps sur un seul overlay : la carte e-mail, la signature (le logo se
   pose, un filet de progression court dessous, puis tout s'ouvre vers le
   blanc), la confirmation. Piloté par js/cinematic.impra.js, ouvert par tout
   CTA [data-open-demo]. Sans JavaScript, les CTA gardent leur ancre #metier.
   Jetons V2 uniquement ; mêmes durées qu'en V1 (le script les connaît :
   cineOpen / cineFlash à 3.5 s + 1.3 s). Les sélecteurs sont préfixés par
   .cine pour passer devant `.lab h2` et `.lab p` (0,1,1).
   ========================================================================== */
.cine { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px; color: var(--n1); }
/* `display: grid` écraserait le [hidden] du navigateur : fermé, le portail disparaît. */
.cine[hidden] { display: none; }
body.cine-lock { overflow: hidden; }
.cine .accent { font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--bleu); }
.cine .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cine button.bouton { font-family: inherit; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cine a.bouton { text-decoration: none; }

.cine-veil { position: absolute; inset: 0; background: rgba(15, 23, 46, 0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cineVeilIn 320ms var(--ease) both; }
@keyframes cineVeilIn { from { opacity: 0; } to { opacity: 1; } }

/* Les trois temps s'excluent */
.cine-gate, .cine-scene, .cine-end { display: none; }
.cine--mail .cine-gate { display: block; }
.cine--fly .cine-scene { display: grid; }
.cine--end .cine-end { display: grid; }
/* Pendant la séquence et la fin, le voile devient opaque : plus de page derrière. */
.cine--fly .cine-veil, .cine--end .cine-veil { background: var(--n9); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Temps 1 · la carte e-mail ── */
.cine .cine-gate { position: relative; width: min(600px, 100%); border-radius: var(--r-carte); padding: 48px; background: var(--n10); border: 1px solid var(--n8); box-shadow: 0 24px 60px rgba(15, 23, 46, 0.12); animation: cineGateIn 420ms var(--ease) both; }
@keyframes cineGateIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cine .cine-eyebrow { margin: 0; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu); }
.cine .cine-title { margin: 16px 0 0; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--n0); text-wrap: balance; }
.cine .cine-lead { margin: 12px 0 0; font-size: 16px; line-height: 26px; color: var(--n6); max-width: 46ch; }
.cine .cine-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.cine .cine-mail { flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 20px; font: inherit; font-size: 16px; color: var(--n0); background: var(--n9); border: 1px solid var(--n8); border-radius: var(--r-bouton); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.cine .cine-mail::placeholder { color: var(--n7); }
.cine .cine-mail:focus { outline: none; background: var(--n10); border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(31, 116, 231, 0.18); }
.cine .cine-go { flex: 0 0 auto; }
.cine .cine-error { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: #DE3D4C; }
.cine .cine-error[hidden] { display: none; }
.cine .cine-consent { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--n7); }
.cine .cine-reassure { display: flex; gap: 8px 24px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--n8); font-size: 14px; line-height: 20px; color: var(--n6); }
.cine .cine-x { position: absolute; top: 16px; right: 16px; z-index: 1; width: 36px; height: 36px; border: 1px solid var(--n8); border-radius: var(--r-bouton); background: transparent; color: var(--n6); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: color 0.18s var(--ease), border-color 0.18s var(--ease); }
.cine .cine-x:hover { color: var(--n0); border-color: var(--n7); }
.cine .cine-x:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

/* ── Temps 2 · la signature ── (le `display` reste à la règle d'exclusion) */
.cine .cine-scene { position: absolute; inset: 0; overflow: hidden; background: var(--n9); align-content: center; justify-items: center; gap: 32px; }
.cine .cine-mark { width: min(58vw, 460px); transform-origin: 50% 50%; }
.cine .cine-mark__svg { display: block; width: 100%; height: auto; }
.cine .cine-mark__slash, .cine .cine-mark__m, .cine .cine-mark__word { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.cine--fly .cine-mark__slash { animation: cineRise 720ms var(--ease) 0.18s forwards; }
.cine--fly .cine-mark__m, .cine--fly .cine-mark__word { animation: cineRise 720ms var(--ease) 0.36s forwards; }
@keyframes cineRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cine .cine-cap { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n7); opacity: 0; }
.cine--fly .cine-cap { animation: cineFade 600ms var(--ease) 1s forwards; }
@keyframes cineFade { to { opacity: 1; } }
.cine .cine-line { display: block; width: min(58vw, 460px); height: 3px; border-radius: 99px; background: rgba(15, 23, 46, 0.08); overflow: hidden; opacity: 0; }
.cine .cine-line i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bleu); }
.cine--fly .cine-line { animation: cineFade 500ms var(--ease) 0.95s forwards; }
.cine--fly .cine-line i { animation: cineProgress 2.5s cubic-bezier(0.35, 0, 0.2, 1) 1.05s forwards; }
@keyframes cineProgress { from { width: 0; } to { width: 100%; } }
.cine--fly .cine-mark { animation: cineOpen 1.3s cubic-bezier(0.4, 0, 0.2, 1) 3.5s forwards; }
@keyframes cineOpen { from { transform: scale(1); } to { transform: scale(1.12); } }
.cine .cine-flash { position: absolute; inset: 0; background: var(--n10); opacity: 0; pointer-events: none; }
.cine--fly .cine-flash { animation: cineFlash 1.3s var(--ease) 3.5s forwards; }
@keyframes cineFlash { from { opacity: 0; } to { opacity: 1; } }

/* ── Temps 3 · la confirmation ── */
.cine--end .cine-veil { background: var(--n9); animation: none; }
.cine .cine-end { position: relative; justify-items: center; gap: 16px; width: min(560px, 100%); text-align: center; padding: 48px 32px; border-radius: var(--r-carte); background: var(--n10); border: 1px solid var(--n8); box-shadow: 0 4px 24px rgba(12, 23, 84, 0.08); animation: cineGateIn 420ms var(--ease) both; }
.cine .cine-end__badge { width: 52px; height: 52px; border-radius: var(--r-bouton); display: grid; place-items: center; color: #1E9E61; background: rgba(30, 158, 97, 0.12); }
.cine .cine-end__t { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--n0); text-wrap: balance; }
.cine .cine-end__p { margin: 0; font-size: 16px; line-height: 26px; color: var(--n6); max-width: 40ch; }
.cine .cine-end__p b { color: var(--n0); font-weight: 600; overflow-wrap: anywhere; }
.cine .cine-end__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.cine .cine-end__cta { white-space: nowrap; }
.cine .cine-end__retour { background: transparent; color: var(--n6); }
.cine .cine-end__retour:hover { background: rgba(15, 23, 46, 0.06); color: var(--n0); }
.cine .cine-end__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--n6); }
@media (max-width: 560px) {
  /* Au doigt, les deux actions s'empilent, le raccourci en tête ; le retour garde une cible pleine. */
  .cine .cine-end__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .cine .cine-end__actions .bouton { min-height: 44px; height: auto; }
  .cine .cine-end__cta { white-space: normal; }
}

/* ── Mobile ── */
@media (max-width: 620px) {
  .cine { padding: 16px; }
  .cine .cine-gate { padding: 32px 24px; }
  /* En colonne, la base flex de 220px deviendrait une hauteur : on la coupe. */
  .cine .cine-form { flex-direction: column; }
  .cine .cine-mail { flex: 0 0 auto; width: 100%; }
  .cine .cine-go { width: 100%; }
  .cine .cine-mark, .cine .cine-line { width: 72vw; }
  .cine .cine-cap { max-width: 72vw; text-align: center; letter-spacing: 0.08em; }
  .cine .cine-end { padding: 40px 24px; }
}

/* ── Mouvement réduit : le JS saute le vol ; au cas où, tout est neutralisé ── */
@media (prefers-reduced-motion: reduce) {
  .cine .cine-veil, .cine .cine-gate, .cine .cine-end,
  .cine--fly .cine-mark, .cine--fly .cine-mark__slash, .cine--fly .cine-mark__m, .cine--fly .cine-mark__word,
  .cine--fly .cine-line, .cine--fly .cine-line i, .cine--fly .cine-cap, .cine--fly .cine-flash { animation: none; }
}

/* ==========================================================================
   PASSE UX/UI — « très clean » (18/09/2026)
   Audit complet (4 largeurs, écran par écran + contrôles automatiques).
   Chaque bloc ci-dessous corrige un défaut relevé ; sélecteurs préfixés
   .lab.lab--v8 pour passer devant les couches précédentes sans les réécrire.
   ========================================================================== */

/* ── 1 · Boutons bleus : texte blanc à 5,1:1 (4,46:1 avant, sous le seuil AA) ── */
.lab.lab--v8 .bouton--bleu { background: #1D6BD5; }
.lab.lab--v8 .bouton--bleu:hover { background: #185DBE; }

/* ── 2 · Surtitres bleus sur fond clair : 5,2:1 au minimum (4,08:1 avant) ── */
.lab.lab--v8 .section--papier .eyebrow { color: #1A63C4; }

/* ── 3 · En-tête compact sous 1180 px ─────────────────────────────────────
   Entre 1024 et 1279 px, la navigation passait sur deux lignes et le bouton
   menu s'ajoutait à elle ; entre 768 et 1279 px, ce bouton n'ouvrait rien et
   bloquait le défilement. Désormais : navigation complète dès 1180 px, menu
   plein écran en dessous, tablettes comprises. */

@media (min-width: 768px) and (max-width: 1179px) {
  
  
  .lab.lab--v8 .menu-groupe summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid rgba(244, 247, 250, 0.16); font-size: 20px; line-height: 28px; font-weight: 600; cursor: pointer; list-style: none; }
  .lab.lab--v8 .menu-groupe summary::-webkit-details-marker { display: none; }
  .lab.lab--v8 .menu-groupe summary svg { width: 18px; height: 18px; opacity: 0.6; transition: transform 240ms var(--ease-doux); }
  .lab.lab--v8 .menu-groupe[open] summary svg { transform: rotate(180deg); }
  .lab.lab--v8 .menu-sous { display: flex; align-items: center; min-height: 48px; padding: 10px 0 10px 14px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.76); border-bottom: 1px solid rgba(244, 247, 250, 0.08); }
  
  
  
  
  
}
@media (prefers-reduced-motion: reduce) { .lab.lab--v8 .menu-groupe summary svg { transition: none; } }

/* ── 4 · Captures qui débordent des cartes : la coupe devient un fondu ────
   Le débordement à droite est voulu ; ce qui ne l'était pas, c'est la coupe
   en plein mot (« 1 dossier incomp… », boutons « En… » tronqués). */
@media (min-width: 768px) {
  /* Le fondu se cale sur le bord de la carte, pas sur celui de l'image (qui le dépasse). */
  .lab.lab--v8 #parcours .carte-visuel {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent calc(100% - 6px));
            mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent calc(100% - 6px));
  }
  /* Sur les cartes sombres, pas de fondu : une capture blanche fondue vers le
     bleu nuit laisse une traînée grise. Le débordement net y est gardé. */
  /* Le panneau « Priorités du jour » tient entier dans sa carte. */
  .lab.lab--v8 .ck--e .ck-cockpit { right: 26px; }
}
.lab.lab--v8 #ecran-bureau .usages-fenetre {
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 98%);
          mask-image: linear-gradient(90deg, #000 72%, transparent 98%);
}

/* ── 5 · « Web et mobile » : un seul fond pour les trois vues ─────────────
   Bois brun, gris clair, bleu nuit et bois : les trois décors se
   superposaient pendant la transition. Un fond commun, le contenu seul change. */
.lab.lab--v8 .usages-visuel .scene { background: radial-gradient(120% 95% at 72% 16%, #2B4C8E 0%, #172850 46%, #0C1530 100%); }
.lab.lab--v8 .usages-visuel .scene .forme, .lab.lab--v8 .usages-visuel .scene .plan, .lab.lab--v8 .usages-visuel .scene .lumiere { display: none; }

/* ── 6 · « Accès et rôles » : trois cartes égales, une icône, plus de vide ─
   Les fonds dégradés attendaient des photos jamais venues. */

/* ── 7 · Rythme : moins de vide sous la bande de preuves, listes de tarifs régulières ── */
.lab.lab--v8 .section-preuve { --pad-bas: clamp(40px, 3.4vw, 48px); }
.lab.lab--v8 .limites { align-content: start; }

/* ── 8 · Témoignages : masqués tant qu'aucun avis réel n'existe ───────────
   La section affichait « Avis à renseigner », « Prénom Nom »… en production.
   Le script la révèle dès qu'un témoignage autorisé est publié. */
.lab.lab--v8 .avis[hidden] { display: none !important; }
.lab.lab--v8 .avis[hidden] + .securite { --pad-haut: clamp(64px, 5.4vw, 88px); }

/* ── 9 · Petits textes et cibles tactiles ─────────────────────────────── */
.lab.lab--v8 .ck-note { font-size: 12px; line-height: 16px; color: rgba(244, 247, 250, 0.6); }
.lab.lab--v8 .pied-impra-bas nav a { display: inline-flex; align-items: center; min-height: 24px; }

   /* zone de toucher de 44 px, logo inchangé */
@media (max-width: 767px) {
  .lab.lab--v8 .pied-impra-colonne a, .lab.lab--v8 .pied-impra-bas nav a { min-height: 44px; }
  .lab.lab--v8 .pied-impra-bas nav { gap: 0 20px; }
}

/* ── 10 · Mobile : bloc final aligné à gauche, comme le reste de la page ── */
@media (max-width: 767px) {
  /* Une seule colonne : la grille tablette (texte 66 %, vide 34 %) serrait le texte et les boutons. */
  .lab.lab--v8 .carte--finale { text-align: left; grid-template-columns: minmax(0, 1fr); }
  .lab.lab--v8 .carte--finale .carte-texte { width: 100%; max-width: none; padding: 0 24px; }
  .lab.lab--v8 .carte--finale .carte-texte { align-items: flex-start; }
  .lab.lab--v8 .carte--finale h2 { text-align: left; }
}

/* ── 11 · Barre d'essai mobile : un bouton flottant, sans bande blanche ────
   La bande dégradée claire tranchait sur les sections sombres. */

/* ── 12 · Menus déroulants de l'en-tête ────────────────────────────────────
   Ouvert au clic ou au clavier (sans survol), le panneau héritait de
   l'atténuation réservée aux autres entrées (opacité 0,55) : texte délavé,
   photo visible au travers. Et la description suivait la hauteur de la
   rangée au lieu de rester sous son titre. */

/* ── 13 · Arrivée par ancre : la section ne glisse plus sous l'en-tête ──── */
.lab.lab--v8 main > section[id] { scroll-margin-top: calc(var(--nav-h, 78px) + 12px); }   /* sous l'en-tête fixe, quelle que soit l'ancre (25/09/2026) */

/* ==========================================================================
   HERO — composition d'attio.com (19/09/2026)
   Reproduction au plus près de la mécanique visuelle du hero d'attio.com,
   relevée au navigateur (1440×900, 1920×1080, 390×844) ; clean-room : aucun
   texte, logo, image, police propriétaire ni code d'Attio. Contenu IMPRA.

   Relevés (1440 px) : pastille 30 px (filet #EEEFF1, coins 13 px, 13 px/500),
   +36 → titre Inter Display 600 64 px / 0,95 / −0,02em (2vw + 35,2 px, donc
   73,6 px à 1920), +36 → phrase 18 px / 1,3 / 500 / −0,01em sur 486 px,
   +24 → boutons 36 px (coins 10 px, 14 px/500, 0 12 px, 10 px d'écart ;
   secondaire blanc à gauche, principal graphite à droite), +98 → fenêtre
   produit : 75 % de la largeur (1440 px au plus), cadre gris translucide
   coins 16 px, barre de 32 px à trois pastilles de 12 px, écran blanc coins
   12 px, hauteur min(40,35vw, 775 px), ombre à cinq couches ; +124 → fin.
   Entrée : fondu échelonné avec flou 1,5 px → net (textes), fenêtre 0,98 → 1.
   Fond : calque collant (hauteur de l'écran sous l'en-tête) — dégradé radial
   bleu-lavande et rayures verticales à 40 %, masque blanc radial qui se
   resserre au défilement (1 → 0,571 × 0,75). En-tête : celui d'IMPRA.

   Adaptation IMPRA (demande opérateur, 19/09/2026) : boutons aux couleurs
   IMPRA (principal #1D6BD5), fond en bleus IMPRA clairs au lieu du lavande.
   Écarts assumés : textes et capture IMPRA (écran aux proportions de la
   capture, 1,985:1, au lieu de 1,84:1) ; Inter (Google Fonts, axe opsz)
   à la place d'Inter Display ; phrase #667080 au lieu de ~#737B8A pour tenir
   4,5:1 ; masque animé à la souris seulement (tactile : fond posé).
   ========================================================================== */
.lab.lab--v8 { --entete-hero: 78px; }
.lab.lab--v8 .hero {
  --ha-encre: #1A1B1E; --ha-phrase: #667080; --ha-graphite: #232529; --ha-carbone: #2E3238;
  --ha-police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr);
  height: auto; min-height: 0; padding: var(--entete-hero) 0 0;
  background: #fff; color: var(--ha-encre);
  font-family: var(--ha-police); font-feature-settings: "ss03";
}

/* ── Fond collant : dégradé, rayures, masque ───────────────────────────── */
.lab.lab--v8 .hero .ha-fond {
  grid-area: 1 / 1; z-index: 0; pointer-events: none;
  position: sticky; top: var(--entete-hero); align-self: start;
  height: calc(100svh - var(--entete-hero)); overflow: hidden;
}
.lab.lab--v8 .hero .ha-degrade, .lab.lab--v8 .hero .ha-rayures { position: absolute; inset: 0; opacity: .4; }
.lab.lab--v8 .hero .ha-degrade { background: radial-gradient(90% 80% at 50% 100%, #E9F2FE 0%, #BBD6FA 45%, #6FA7F0 100%); }   /* bleus IMPRA clairs (teinte du #1D6BD5), pas le navy */
.lab.lab--v8 .hero .ha-rayures { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .78) 0 1px, rgba(255, 255, 255, 0) 1px 8px); }
.lab.lab--v8 .hero .ha-masque {
  position: absolute; top: 0; left: -150%; width: 400%; height: 150%;
  transform-origin: 50% 0; transform: scale(var(--ha-sx, 1), var(--ha-sy, 1));
  background: radial-gradient(70% 106.667% at 50% 0%, #fff 32%, rgba(255, 255, 255, 0) 64%);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

/* ── Contenu ────────────────────────────────────────────────────────────── */
.lab.lab--v8 .hero .ha-contenu {
  grid-area: 1 / 1; z-index: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 96px 24px 124px;
}
.lab.lab--v8 .hero .ha-pastille {
  display: inline-flex; border: 1px solid #EEEFF1; border-radius: 13px; padding: 0;
  color: #232529; text-decoration: none; position: relative;
}
.lab.lab--v8 .hero .ha-pastille-in {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 13px; padding: 5px 7px 5px 11px;
  font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -.01em;
  transition: background-color .2s ease;
}
.lab.lab--v8 .hero .ha-pastille svg { width: 12px; height: 12px; color: #6F7988; transition: transform .2s ease; }
.lab.lab--v8 .hero .ha-pastille:hover .ha-pastille-in { background: #F7F8F9; }
.lab.lab--v8 .hero .ha-pastille:hover svg { transform: translateX(2px); }
.lab.lab--v8 .hero .ha-titre {
  margin: 36px 0 0; max-width: 14.2em; color: var(--ha-encre);
  font-family: var(--ha-police); font-optical-sizing: auto; font-variation-settings: "opsz" 32;
  font-size: clamp(40px, 2vw + 35.2px, 80px); font-weight: 600; line-height: .95; letter-spacing: -.02em;
  font-feature-settings: "ss03", "calt"; text-wrap: balance;
}
.lab.lab--v8 .hero .ha-phrase {
  margin: 36px 0 0; max-width: 540px; color: var(--ha-phrase);
  font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; text-wrap: balance;
}
.lab.lab--v8 .hero .ha-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.lab.lab--v8 .hero .ha-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--ha-police); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* Couleurs IMPRA : principal bleu IMPRA (#1D6BD5, 5:1 avec le blanc),
   secondaire blanc à texte navy et filet bleuté. */
.lab.lab--v8 .hero .ha-bouton--second { background: #fff; border-color: #D3DCEA; color: #0F172E; box-shadow: 0 1px 2px rgba(15, 23, 46, .05); }
.lab.lab--v8 .hero .ha-bouton--second:hover { background: #F4F8FE; border-color: #B9CBE6; }
.lab.lab--v8 .hero .ha-bouton--premier { background: #1D6BD5; border-color: #1A60C2; color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 46, .12), inset 0 1px 0 rgba(255, 255, 255, .12); }
.lab.lab--v8 .hero .ha-bouton--premier:hover { background: #185DBE; border-color: #1553A9; }
.lab.lab--v8 .hero .ha-bouton:focus-visible, .lab.lab--v8 .hero .ha-pastille:focus-visible { outline: 2px solid #1D6BD5; outline-offset: 2px; }
.lab.lab--v8 .hero .ha-fleche { display: none; width: 16px; height: 16px; }

/* Fenêtre produit. */
.lab.lab--v8 .hero .ha-produit { width: 75%; max-width: 1440px; margin-top: 98px; }
.lab.lab--v8 .hero .ha-fenetre {
  position: relative; overflow: hidden; border-radius: 16px; padding: 0 6px 6px;
  background: rgba(244, 245, 246, .8);
  box-shadow: rgba(11, 13, 24, .06) 0 0 0 1px, rgba(11, 13, 24, .024) 0 1px 2px, rgba(11, 13, 24, .03) 0 3px 6px, rgba(11, 13, 24, .035) 0 8px 14px, rgba(11, 13, 24, .04) 0 16px 28px;
}
.lab.lab--v8 .hero .ha-barre { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; }
.lab.lab--v8 .hero .ha-barre span { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.lab.lab--v8 .hero .ha-barre span:nth-child(2) { background: #FEBC2E; }
.lab.lab--v8 .hero .ha-barre span:nth-child(3) { background: #28C840; }
/* Attio fixe l'écran à min(40,35vw, 775 px) de haut ; la capture IMPRA est
   plus large (1,985:1) : l'écran prend ses proportions, pour ne rien rogner. */
.lab.lab--v8 .hero .ha-ecran {
  aspect-ratio: 2400 / 1209; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .05); background: #fff;
}
.lab.lab--v8 .hero .ha-ecran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* Entrée (relevée sur attio.com : textes d'opacité 0 et flou 1,5 px, fenêtre
   d'opacité 0 à l'échelle 0,98) — échelonnée, jouée une fois au chargement. */
@keyframes ha-entre { from { opacity: 0; filter: blur(1.5px); } }
@keyframes ha-fenetre { from { opacity: 0; transform: scale(.98); } }
.lab.lab--v8 .hero .ha-pastille { animation: ha-entre .7s cubic-bezier(.25, .1, .25, 1) .05s both; }
.lab.lab--v8 .hero .ha-titre { animation: ha-entre .7s cubic-bezier(.25, .1, .25, 1) .13s both; }
.lab.lab--v8 .hero .ha-phrase { animation: ha-entre .7s cubic-bezier(.25, .1, .25, 1) .21s both; }
.lab.lab--v8 .hero .ha-actions { animation: ha-entre .7s cubic-bezier(.25, .1, .25, 1) .29s both; }
.lab.lab--v8 .hero .ha-fenetre { animation: ha-fenetre 1s cubic-bezier(.22, 1, .36, 1) .42s both; }

/* Écran tactile ou mouvement réduit : le fond est posé, rien ne bouge au
   défilement ; en mouvement réduit, pas d'entrée non plus. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .lab.lab--v8 .hero .ha-masque { transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lab.lab--v8 .hero .ha-pastille, .lab.lab--v8 .hero .ha-titre, .lab.lab--v8 .hero .ha-phrase,
  .lab.lab--v8 .hero .ha-actions, .lab.lab--v8 .hero .ha-fenetre { animation: none; }
}

/* ── Tablette ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .lab.lab--v8 .hero .ha-produit { width: 90%; margin-top: 72px; }
}

/* ── Mobile (relevé à 390 px) : pastille, titre sur deux lignes, bouton
   principal pleine largeur, lien « Explorer IMPRA → », fenêtre qui déborde
   à droite ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .lab.lab--v8 { --entete-hero: 64px; }
  .lab.lab--v8 .hero .ha-contenu { padding: 64px 16px 96px; }
  .lab.lab--v8 .hero .ha-titre { margin-top: 28px; max-width: 11em; font-size: clamp(30px, 8.8vw, 40px); line-height: 1; }
  .lab.lab--v8 .hero .ha-phrase { margin-top: 20px; font-size: 16px; line-height: 1.35; max-width: 22em; }
  .lab.lab--v8 .hero .ha-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; gap: 14px; margin-top: 28px; }
  .lab.lab--v8 .hero .ha-bouton--premier { order: -1; height: 40px; font-size: 15px; }
  .lab.lab--v8 .hero .ha-bouton--second { height: auto; padding: 4px 0; border: 0; background: transparent; color: var(--ha-encre); font-size: 15px; }
  .lab.lab--v8 .hero .ha-fleche { display: inline-block; }
  .lab.lab--v8 .hero .ha-produit { width: 130%; align-self: flex-start; margin-top: 48px; }
  .lab.lab--v8 .hero .ha-barre span { background: #D9DBDF; }
  .lab.lab--v8 .hero .ha-barre span:nth-child(2), .lab.lab--v8 .hero .ha-barre span:nth-child(3) { background: #D9DBDF; }

}

/* ==========================================================================
   EN-TÊTE — « Se connecter » devient un vrai bouton (19/09/2026)
   Même gabarit que le bouton bleu voisin (40 px, coins 10 px, 15 px/500),
   encadré d'un filet : il se lit comme une action, sans lui faire concurrence.
   Suit le thème de l'en-tête (clair sur les sections claires, sombre sinon).
   ========================================================================== */

/* ══ HERO — le bleu IMPRA traverse le titre (20/09/2026) ════════════════════
   Une bande de bleu IMPRA passe lentement dans la phrase. C'est de la
   peinture et rien d'autre : le dégradé est découpé sur les lettres
   (background-clip: text), aucune ombre, aucun déplacement, la mise en page
   ne bouge pas d'un pixel.

   Comme toutes les boucles du site, elle est réservée à la souris : sur un
   écran tactile, rien ne tourne pendant qu'on fait défiler. En mouvement
   réduit, et partout où le découpage sur le texte n'est pas supporté, le
   titre reste en encre pleine.

   Contraste : les deux couleurs du dégradé tiennent le seuil sur le fond
   clair du hero — encre 17,2:1, bleu #1D6BD5 5,1:1. ═══════════════════════ */
/* La bande n'est dans le texte qu'entre 0 % et 100 % de la course : elle
   entre par la droite, traverse, sort par la gauche, puis le titre reste
   en encre pleine le temps du repos. */
@keyframes ha-lueur { 0%, 6% { background-position: 0% 0; } 60%, 100% { background-position: 100% 0; } }

@media (hover: hover) and (pointer: fine) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lab.lab--v8 .hero .ha-lueur {
      background-image: linear-gradient(100deg, var(--ha-encre) 0 42%, #1D6BD5 50%, var(--ha-encre) 58% 100%);
      background-size: 260% 100%; background-position: 0% 0;
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
      animation: ha-lueur 7s cubic-bezier(.4, 0, .6, 1) 1.2s infinite;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab.lab--v8 .hero .ha-lueur { background-image: none; color: inherit; animation: none; }
}

/* ══ TRANSITION HERO → PREUVES → COCKPIT (21/09/2026) ═══════════════════════
   Le Hero est clair, le cockpit est navy : la bande de preuves porte la
   descente. Trois couches, aucune coupure :
   1. le Hero se termine sur un blanc bleuté uniforme (fondu de ses 120
      derniers pixels, sous le contenu, au-dessus du fond rayé) ;
   2. la section de preuves part de ce même blanc, descend en paliers vers le
      navy IMPRA sur ~200 px (stops en pixels : même courbe à toute largeur),
      avec un halo bleu très léger au point de bascule — les preuves se
      posent sur la partie sombre, en blanc ;
   3. elle finit sur var(--impra-navy) (#0F172E), exactement le fond du parcours
      véhicule qui suit (26/09/2026 : même jeton, raccord invisible). */
.lab.lab--v8 { --raccord-hero: #E4EDFB; }
@media (max-width: 767px) { .lab.lab--v8 { --raccord-hero: #EEF3FA; } }
.lab.lab--v8 .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(228, 237, 251, 0) 0%, rgba(228, 237, 251, 0.55) 45%, var(--raccord-hero, #E4EDFB) 100%);   /* 28/09/2026 : le voile rejoint le bleu clair du bas du hero au lieu de le blanchir (la bande claire faisait cassure) */
}
.lab.lab--v8 .section-preuve {
  --pad-haut: 214px; --pad-bas: 52px;
  position: relative; isolation: isolate; color: #F4F7FA;
  /* Descente continue depuis le bleu clair du hero (même teinte que le voile ci-dessus), courbe adoucie aux deux bouts */
  background: linear-gradient(180deg, var(--raccord-hero, #E4EDFB) 0px, #DCE6F6 28px, #C3D0E6 72px, #9BAACA 126px, #6D7FA4 178px, #46577F 226px, #2C3B60 270px, #1C2847 312px, #141E3A 352px, var(--impra-navy) 392px, var(--impra-navy) 100%);
}
.lab.lab--v8 .section-preuve::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 46% at 50% 36%, rgba(77, 148, 245, 0.07) 0%, rgba(77, 148, 245, 0.03) 45%, rgba(77, 148, 245, 0) 72%);
}
.lab.lab--v8 .section-preuve > .conteneur { position: relative; z-index: 1; }
.lab.lab--v8 .pastille { box-shadow: 0 0 0 2px #22304F, inset 0 0 0 1px rgba(244, 247, 250, 0.14); }
.lab.lab--v8 .preuve-sociale:hover .preuve-phrase { color: rgba(244, 247, 250, 0.88); }
.lab.lab--v8 .section-bento#metier { --pad-haut: clamp(56px, 4.6vw, 68px); }
@media (max-width: 767px) {
  .lab.lab--v8 .hero::after { height: 90px; }
  .lab.lab--v8 .section-preuve { --pad-haut: 160px; --pad-bas: 48px; background: linear-gradient(180deg, var(--raccord-hero) 0px, #E3EAF6 24px, #C9D3E5 62px, #9AA8C5 102px, #66779B 140px, #3F5078 176px, #27365A 208px, #192543 240px, #121C36 272px, var(--impra-navy) 300px, var(--impra-navy) 100%); }
  .lab.lab--v8 .section-preuve > .conteneur { padding-top: var(--pad-haut); padding-bottom: var(--pad-bas); }
}