/* Opsor — landing (maquette). Styles communs à la landing et aux pages annexes.
   Tokens : ceux du produit (frontend/src/index.css) + les matières du sprite clay. */
/* ═══ Tokens : ceux du produit + les matières du sprite clay ═══════════════ */
:root {
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  --bg: #FAFAFA; --paper: #FFFFFF; --soft: #F5F5F5;
  --text: #0A0A0A; --text-2: #525252; --text-3: #606060;
  --bdr: #EEEEEE; --bdr-strong: #E2E2E2;
  --v: #6841F2; --v-deep: #4E2EE0; --v-soft: rgba(109, 74, 255, .08); --v-lilas: #C5B7FF;
  --or-clair: #FFE39A;
  --success: #166534; --success-soft: rgba(22, 163, 74, .12); --warning: #B45309;
  --dpe-a: #16A34A; --dpe-b: #4D9E2A; --dpe-c: #A3B814; --dpe-d: #EAB308;
  --dpe-e: #F08C00; --dpe-f: #E8590C; --dpe-g: #DC2626;

  /* Une matière du sprite par étape : violet = Dire, or = Trier, corail = Appeler */
  --dire: #EEE9FF;    --dire-ink: #4E2EE0;    --dire-pill: #6841F2;
  --trier: #FFF3D6;   --trier-ink: #8A560C;   --trier-pill: #B87414;
  --appeler: #FFEAE2; --appeler-ink: #A8361A; --appeler-pill: #D2502B;
  --lilas: #F3F0FB;

  /* La scène : collines des Pierres Dorées (Rhône), champ violet au premier plan */
  --ciel-haut: #ECE6FF; --ciel-bas: #FFF2DA;
  --loin-a: #FCEBC4; --loin-b: #F2D08F;
  --mi-a: #FFDF98;   --mi-b: #EBB14E;
  --pres-a: #F8C86C; --pres-b: #D6882A;
  --champ-a: #6D4DF2; --champ-b: #3B20B2;
  --sol: #2B168C;
  --rang: rgba(203, 184, 255, .42);
  --brume: #F3EAEC; --voile-a: rgba(30, 15, 92, .5); --voile-b: rgba(22, 10, 70, .95);
  --crete: rgba(255, 255, 255, .6);
  --ombre-colline: #6B3F0A;

  --verre: rgba(255, 255, 255, .9);
  --ombre-carte: 0 30px 80px -40px rgba(40, 20, 120, .38), 0 2px 6px rgba(20, 16, 40, .05);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

/* ═══ Base ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 17px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .3s; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--v); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(1280px, 100% - 32px); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(1280px, 100% - 64px); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow { margin: 0 0 18px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.h-xl { margin: 0; font-weight: 700; font-size: clamp(42px, 5.8vw, 86px); line-height: .95; letter-spacing: -.05em; }
.h-l  { margin: 0; font-weight: 700; font-size: clamp(36px, 5vw, 72px); line-height: .98; letter-spacing: -.045em; }
.h-m  { margin: 0; font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.035em; }
.lead { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--text-2); }
.gris { color: var(--text-3); }

/* Le grain de la pâte : un bruit fractal très léger, en lumière douce */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ═══ Boutons ════════════════════════════════════════════════════════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border: 0; border-radius: 14px;
  font-weight: 700; font-size: 17px; letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease-spring), background .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn .fl { transition: transform .25s var(--ease-soft); }
.btn:hover .fl { transform: translateX(3px); }
.btn-or { background: var(--or-clair); color: #2A1A00; box-shadow: inset 0 -3px 0 rgba(160, 100, 10, .35); }
.btn-blanc { background: #fff; color: #0A0A0A; }
.btn-fantome { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38); }
.btn-encre { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; background: var(--text); color: var(--bg); }

/* ═══ Navigation : une carte blanche qui flotte sur le ciel ═══════════════ */
.nav { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(1320px, 100% - 24px);
  display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 10px 0 18px;
  background: var(--paper);
  border: 1px solid var(--bdr); border-radius: 20px; box-shadow: 0 12px 40px -24px rgba(40, 20, 120, .35); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 22px; letter-spacing: -.045em; }
.brand img { width: 28px; height: 28px; }
.nav-menu { display: flex; gap: 2px; }
.nav-menu a { padding: 8px 12px; border-radius: 10px; font-size: 15.5px; color: var(--text-2); transition: color .15s, background .15s; }
.nav-menu a:hover { color: var(--text); background: var(--soft); }
.nav-cta { margin-left: 6px; }
/* « Se connecter » : un lien discret juste avant le bouton, qui pousse le groupe à droite */
.nav-connexion { margin-left: auto; padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 15.5px; color: var(--text); white-space: nowrap; transition: background .15s; }
.nav-connexion:hover { background: var(--soft); }
.nav-mobile .nav-mobile-connexion { margin-top: 4px; border-top: 1px solid var(--bdr); border-radius: 0 0 12px 12px; padding-top: 16px; }
.nav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--soft); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
/* Le burger devient une croix à l'ouverture : les traits du haut et du bas pivotent, celui du milieu s'efface */
.nav-burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .4s var(--ease-soft), opacity .2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Le menu mobile : il descend en fondu avec un léger rebond, puis ses liens arrivent l'un après l'autre ;
   à la fermeture, il remonte et s'efface (visibility attend la fin, pour que l'animation se voie) */
.nav-mobile { position: fixed; top: 84px; left: 12px; right: 12px; z-index: 59; display: flex; flex-direction: column; gap: 4px; padding: 12px;
  background: var(--paper); border: 1px solid var(--bdr); border-radius: 20px; box-shadow: var(--ombre-carte);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px) scale(.96); transform-origin: 50% 0;
  transition: opacity .22s ease, transform .3s var(--ease-soft), visibility 0s linear .3s; }
.nav-mobile.ouvert { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .28s ease, transform .5s var(--ease-spring), visibility 0s; }
.nav-mobile > * { opacity: 0; transform: translateY(-8px); transition: opacity .15s, transform .2s; }
.nav-mobile.ouvert > * { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s var(--ease-soft); }
.nav-mobile.ouvert > :nth-child(1) { transition-delay: .06s; }
.nav-mobile.ouvert > :nth-child(2) { transition-delay: .1s; }
.nav-mobile.ouvert > :nth-child(3) { transition-delay: .14s; }
.nav-mobile.ouvert > :nth-child(4) { transition-delay: .18s; }
.nav-mobile.ouvert > :nth-child(5) { transition-delay: .22s; }
.nav-mobile.ouvert > :nth-child(6) { transition-delay: .26s; }
.nav-mobile.ouvert > :nth-child(7) { transition-delay: .3s; }
.nav-mobile a { padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.nav-mobile .btn { margin-top: 6px; }
@media (min-width: 961px) { .nav-mobile { display: none; } }
@media (max-width: 960px) { .nav-menu, .nav-cta, .nav-connexion { display: none; } .nav-burger { display: flex; } }

/* ═══ Héros : une image en fond, le texte au centre, une entrée animée (heros.js) ═══
   L'image passe en bichrome dans les couleurs de la marque : les ombres en violet profond, les lumières
   en lavande, et le soleil dans l'or du titre ; un voile garde le texte lisible. Plus de vidéo. */
.heros { position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center; background: #1B0C5A;
  min-height: clamp(760px, 100svh, 980px); display: flex; flex-direction: column; justify-content: center;
  padding: calc(76px + clamp(28px, 4vh, 56px)) 0 clamp(150px, 15vh, 190px); }
.heros-fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.heros-fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; transform-origin: 70% 40%;
  filter: grayscale(1) contrast(1.2) brightness(1.04); }
.heros-fond::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #22106E; mix-blend-mode: lighten; }
.heros-teinte { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #D2C4FF 0%, #A58CFF 50%, #6E50F2 100%); mix-blend-mode: multiply; }
.heros-fond::after { content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(58% 42% at 50% 46%, rgba(22, 9, 74, .42) 0%, rgba(22, 9, 74, .14) 60%, rgba(22, 9, 74, 0) 100%),
    linear-gradient(180deg, rgba(22, 9, 74, .5) 0%, rgba(22, 9, 74, .06) 32%, rgba(22, 9, 74, .12) 62%, rgba(22, 9, 74, .78) 100%); }
.heros-soleil { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(26% 30% at 76% 38%, rgba(255, 214, 120, .5) 0%, rgba(255, 190, 90, .16) 45%, rgba(255, 190, 90, 0) 75%); }
.heros-texte { position: relative; }
.heros h1 { max-width: 1120px; margin-inline: auto; font-size: clamp(44px, 5.6vw, 88px); line-height: .98; }
.heros h1 span { display: block; text-wrap: balance; }
.heros h1 .l2 { color: var(--or-clair); }
.heros .lead { max-width: 54ch; margin: clamp(20px, 2vw, 28px) auto 0; color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.heros .hero-cta { justify-content: center; margin-top: clamp(28px, 3vw, 38px); }
.heros .btn-fantome { background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* En bas : les logos du dispositif, puis la crête qui rend la main à la page claire */
.heros-bas { position: absolute; left: 0; right: 0; bottom: clamp(58px, 5.6vw, 86px); z-index: 2; }
.heros-bas .certs { justify-content: center; margin: 0; padding: 0; border: 0; }
.heros-crete { position: absolute; left: 0; bottom: -1px; z-index: 2; display: block; width: 100%; height: clamp(44px, 5vw, 80px); }
.heros-crete path { fill: var(--bg); }
.certs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.certs .lbl { font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.certs img { height: 24px; width: auto; opacity: .88; }
/* Avant l'entrée animée, rien ne s'affiche ; si le script ne tourne pas, tout apparaît au bout de 2,5 s */
.js .heros [data-entree] { visibility: hidden; animation: heros-montrer 0s 2.5s forwards; }
@keyframes heros-montrer { to { visibility: visible; } }

/* ═══ Une phrase : le film, posé sur une plaque d'argile violette ═══ */
.live { padding: clamp(64px, 8vw, 120px) 0 clamp(72px, 9vw, 130px); overflow: hidden; }
.live-tete { text-align: center; max-width: 860px; margin: 0 auto clamp(36px, 4vw, 60px); }
.live-tete .lead { margin-top: 18px; }
.film { position: relative; max-width: 1120px; margin: 0 auto; }
.plaque { position: absolute; z-index: 0; inset: 22% -5% -7%; border-radius: 48px;
  background: radial-gradient(120% 100% at 28% 12%, #CBB8FF 0%, #8A6FFF 42%, #4E2EE0 100%); overflow: hidden; will-change: transform; }
@media (max-width: 1180px) { .plaque { inset: 30% -10px -12px; border-radius: 30px; } }
.film-cadre { position: relative; z-index: 1; margin: 0; overflow: hidden; border-radius: 26px; background: #0B0820; aspect-ratio: 16 / 9;
  box-shadow: 0 50px 110px -46px rgba(30, 12, 90, .7), 0 2px 8px rgba(20, 16, 40, .12); transform-origin: 50% 100%; will-change: transform; }
.film-cadre video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-son { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(12, 8, 32, .55); color: #fff; font-weight: 700; font-size: 13.5px;
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s; }
.film-son:hover { background: rgba(12, 8, 32, .78); }
.film-son .actif, .film-son[aria-pressed="true"] .coupe { display: none; }
.film-son[aria-pressed="true"] .actif { display: block; }
.film-cadre video[controls] ~ .film-son { display: none; }
@media (max-width: 760px) { .film-cadre { border-radius: 18px; } .film-son { right: 10px; bottom: 10px; height: 36px; padding: 0 11px; } .film-son span { display: none; } }

/* Partagés avec le reste de la page */
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--v); animation: clig 1s steps(1) infinite; }
@keyframes clig { 50% { opacity: 0; } }
.pastille { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--c); color: #fff; font-weight: 900; font-size: 15px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.rejouer { border: 0; background: var(--soft); border-radius: 10px; padding: 7px 12px; font-weight: 700; font-size: 13.5px; cursor: pointer; }

/* ═══ Le constat ═════════════════════════════════════════════════════════ */
.constat { padding: clamp(40px, 6vw, 90px) 0 clamp(72px, 9vw, 130px); text-align: center; }
.constat .h-l { max-width: 16em; margin-inline: auto; }
.fronts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 72px); text-align: left; }
.front { display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 32px; border-radius: 30px; background: var(--lilas); }
.front svg { width: 76px; height: 76px; margin: -6px 0 6px -8px; }
.front .tag { font: 500 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--v); }
.front h3 { margin: 0; font-weight: 700; font-size: 25px; line-height: 1.15; letter-spacing: -.025em; }
.front p { margin: 0; color: var(--text-2); font-size: 16px; }
.constat .clot { margin: clamp(32px, 4vw, 52px) auto 0; max-width: 40em; font-size: clamp(18px, 1.6vw, 22px); color: var(--text-2); }
.constat .clot b { color: var(--text); }
@media (max-width: 900px) { .fronts { grid-template-columns: 1fr; } }

/* ═══ Ce qu'il fait : trois cartes de couleur qui s'empilent ═════════════ */
.solution { padding-bottom: clamp(72px, 9vw, 130px); }
.sol-intro { text-align: center; max-width: 900px; margin: 0 auto; }
.sol-intro .lead { margin: 20px auto 0; max-width: 60ch; }
.etapes { display: flex; justify-content: center; gap: 8px; margin: clamp(32px, 4vw, 48px) auto 22px; }
.etapes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 14px; background: var(--paper); border: 1px solid var(--bdr);
  font-weight: 700; font-size: 16px; color: var(--text-2); box-shadow: 0 8px 24px -18px rgba(40, 20, 120, .4); transition: color .15s, border-color .15s; }
.etapes a svg { width: 28px; height: 28px; }
.etapes a:hover, .etapes a.ici { color: var(--text); border-color: var(--bdr-strong); }
.feats { display: grid; gap: 28px; }
.feat:not(:last-child) { margin-bottom: 38vh; }
.feat { --m: var(--dire); --m-ink: var(--dire-ink); --m-pill: var(--dire-pill);
  position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 60px); align-items: center;
  min-height: min(560px, calc(100vh - 150px)); padding: clamp(22px, 3vw, 42px); border-radius: 40px; background: var(--m);
  box-shadow: 0 -24px 60px -44px rgba(40, 20, 120, .45); transition: background .3s; }
.feat[data-m="trier"] { --m: var(--trier); --m-ink: var(--trier-ink); --m-pill: var(--trier-pill); top: 112px; }
.feat[data-m="appeler"] { --m: var(--appeler); --m-ink: var(--appeler-ink); --m-pill: var(--appeler-pill); top: 124px; }
.pill-m { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 6px; border-radius: 999px; background: var(--m-pill); color: #fff;
  font: 600 13px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pill-m svg { width: 28px; height: 28px; }
.feat h3 { margin: 22px 0 18px; }
.feat h3 .acc { color: var(--m-ink); }
.feat .texte p { margin: 0; max-width: 44ch; font-size: 18px; color: var(--text-2); }
.feat .texte p b { color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips span { padding: 7px 12px; border-radius: 10px; background: var(--paper); color: var(--m-ink); font-weight: 700; font-size: 14px; }
.objet { width: clamp(92px, 9vw, 132px); height: auto; aspect-ratio: 1; margin-top: clamp(20px, 3vw, 40px); }
@media (max-width: 980px) {
  .feat, .feat[data-m] { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; border-radius: 30px; }
  .feat:not(:last-child) { margin-bottom: 0; }
  .etapes { position: static; flex-wrap: wrap; }
  .objet { display: none; }
}
.ecran { position: relative; min-height: 440px; border-radius: 22px; background: var(--paper); border: 1px solid var(--bdr); box-shadow: var(--ombre-carte); overflow: hidden; }
.ecran-barre { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px; line-height: 1.45; border-bottom: 1px solid var(--bdr); font: 500 12.5px var(--font-mono); color: var(--text-3); }
.ecran-barre .ico { color: var(--v); font-size: 16px; }
.ecran-barre .compo { color: var(--text); }

/* Dire : la phrase, la carte et ses pointeurs numérotés, la bande de prospects — comme dans le produit */
.carte-zone { position: absolute; inset: 46px 0 0; overflow: hidden; }
#carte { position: absolute; inset: 0; }
.pointeur { cursor: pointer; }
.pointeur i { position: relative; display: block; width: 28px; height: 36px; opacity: 0; transform: translateY(-16px) scale(.6); transform-origin: 50% 100%;
  transition: opacity .3s, transform .5s var(--ease-spring); }
.pointeur.in i { opacity: 1; transform: none; }
.pointeur.actif i { transform: scale(1.25); }
.pointeur i::before { content: ""; position: absolute; left: 2px; top: 0; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--c); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(20, 16, 40, .35); }
.pointeur b { position: absolute; left: 0; top: 5px; width: 28px; text-align: center; color: #fff; font: 700 11px var(--font-mono); }
.bande { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 12px 12px; background: linear-gradient(180deg, transparent, rgba(250, 250, 250, .92) 34%); }
.bande-tete { display: inline-flex; align-items: baseline; gap: 7px; margin: 0 0 8px 2px; padding: 5px 11px; border-radius: 9px; background: var(--paper); border: 1px solid var(--bdr);
  font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.bande-tete b { font-size: 13px; letter-spacing: 0; color: var(--text); }
.bande-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 3px 2px; }
.prospect { position: relative; flex: 0 0 214px; scroll-snap-align: start; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--bdr); border-left: 4px solid var(--c);
  border-radius: 14px; background: var(--paper); text-align: left; cursor: pointer; box-shadow: 0 10px 24px -16px rgba(30, 15, 90, .45);
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s var(--ease-soft), box-shadow .2s; }
.prospect.in { opacity: 1; transform: none; }
.prospect.actif { box-shadow: 0 0 0 2px var(--v), 0 12px 26px -14px rgba(30, 15, 90, .5); }
.prospect .num { position: absolute; right: 10px; top: 8px; font: 500 11px var(--font-mono); color: var(--text-3); }
.prospect .t { padding-right: 18px; font-weight: 700; font-size: 14px; filter: blur(3px); user-select: none; white-space: nowrap; overflow: hidden; }
.prospect .s { font: 500 10.5px var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prospect .bas { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; }
.prospect .f { font: 700 15px var(--font-mono); color: var(--v); }
.prospect .pastille { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
@media (max-width: 560px) { .prospect { flex-basis: 168px; } }

/* Trier : ce que je cherche → le tri, compteur vivant → ma liste */
.tri-etapes { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 0; }
.tri-etape { padding: 6px 11px; border-radius: 10px; background: var(--soft); color: var(--text-3); font-weight: 700; font-size: 13px; transition: background .3s, color .3s; }
.tri-etape.on { background: var(--trier); color: var(--trier-ink); }
.tri-scene { position: relative; min-height: 452px; }
.tri-ecran { position: absolute; inset: 0; padding: 16px 20px 20px; opacity: 0; transform: translateX(16px); pointer-events: none; transition: opacity .45s var(--ease-soft), transform .5s var(--ease-soft); }
.tri-ecran.on { opacity: 1; transform: none; pointer-events: auto; }
.tri-titre { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.tri-titre span { color: var(--trier-ink); }
.tri-barre { margin: 12px 0 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--trier-pill); box-shadow: 0 0 0 4px var(--trier); font-size: 15px; }
.tri-compris { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.tri-compris .k { margin-right: 4px; font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tri-compris span:not(.k) { padding: 5px 9px; border-radius: 9px; background: var(--trier); color: var(--trier-ink); font-weight: 700; font-size: 13px; }
.tri-zone { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--text-3); }
.tri-zone button { padding: 6px 11px; border: 1px solid var(--bdr-strong); border-radius: 10px; background: none; font-weight: 700; font-size: 13px; cursor: pointer; }
.tri-zone button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.tri-compte { margin-top: 16px; font-weight: 700; }
.tri-compte span { display: block; font-weight: 500; font-size: 13.5px; color: var(--text-3); }
.tri-reste { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.tri-reste b { font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -.04em; color: var(--trier-ink); font-variant-numeric: tabular-nums; }
.tri-reste span { font-size: 14px; color: var(--text-2); }
.tri-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.tri-point { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: var(--soft); font-size: 14px; }
.tri-point .droite { display: flex; align-items: center; gap: 10px; }
.tri-point .ecart { font: 600 12.5px var(--font-mono); color: var(--appeler-ink); opacity: 0; transform: translateX(4px); transition: opacity .3s, transform .3s; }
.tri-point .ecart.bon { color: var(--success); }
.tri-point.ok .ecart { opacity: 1; transform: none; }
.tri-point .etat { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bdr-strong); display: grid; place-items: center; color: transparent; transition: all .3s var(--ease-spring); }
.tri-point.ok .etat { border-color: transparent; background: var(--trier-pill); color: #fff; transform: scale(1.08); }
.tri-verdict .grand { margin: 4px 0 2px; font-weight: 900; font-size: clamp(52px, 6vw, 76px); letter-spacing: -.05em; line-height: 1; color: var(--trier-ink); font-variant-numeric: tabular-nums; }
.tri-verdict .grand small { font-size: .3em; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.garde-liste { display: grid; gap: 6px; margin-top: 12px; }
.garde-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--soft);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease-soft); }
.garde-ligne.in { opacity: 1; transform: none; }
.garde-ligne b { display: block; font-size: 14.5px; }
.garde-ligne small { font-size: 12.5px; color: var(--text-3); }
.garde-ligne .dec { padding: 3px 8px; border-radius: 8px; background: var(--success-soft); color: var(--success); font-weight: 700; font-size: 12px; white-space: nowrap; }
.tri-note { margin-top: 10px; font-size: 13px; color: var(--text-3); }
.rejouer-ecran { position: absolute; right: 12px; top: 8px; z-index: 3; }

/* Appeler : le tableur de la liste et la fiche d'appel, comme dans le produit */
.ecran-barre .traitees { margin-left: auto; font-weight: 600; color: var(--text-2); }
.appel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 440px; }
.tableur { border-right: 1px solid var(--bdr); font-size: 13.5px; }
.tb-tete, .tb-ligne { display: grid; grid-template-columns: 1.15fr 1fr .95fr; gap: 8px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--bdr); }
.tb-tete { font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tb-ligne { transition: background .3s; }
.tb-ligne.sel { background: var(--v-soft); box-shadow: inset 3px 0 0 var(--v); }
.tb-ligne .site { font-weight: 700; }
.tb-ligne .site small { display: block; font-weight: 500; font-size: 12px; color: var(--text-3); }
.tb-ligne .dec { font-size: 13px; color: var(--text-2); }
.flou { filter: blur(3px); user-select: none; }
.issue { justify-self: start; padding: 3px 8px; border-radius: 8px; background: var(--soft); color: var(--text-2); font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .3s, color .3s; }
.issue.ok { background: var(--success-soft); color: var(--success); }
.issue.att { background: var(--trier); color: var(--trier-ink); }
.fiche-appel { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.fa-k { font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.fa-nom { margin-top: -6px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.fa-s { margin-top: -8px; font-size: 13px; color: var(--text-2); }
.fa-demander { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bdr); font-size: 14px; }
.fa-demander .avant { color: var(--text-2); }
.fa-demander .apres { display: none; font-weight: 700; }
.trouve .fa-demander .avant { display: none; }
.trouve .fa-demander .apres { display: block; animation: surgit .45s var(--ease-spring); }
@keyframes surgit { from { opacity: 0; transform: translateY(4px); } }
.fa-tel { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft); color: var(--text-3); transition: background .45s, color .45s, box-shadow .45s; }
.fa-tel .num { font: 700 17px var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.fa-tel .dir { margin-left: auto; white-space: nowrap; font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.fa-tel .dir.apres { display: none; }
.trouve .fa-tel { background: #1E7A45; color: #fff; box-shadow: 0 12px 26px -14px rgba(30, 122, 69, .7); }
.trouve .fa-tel .dir.avant { display: none; }
.trouve .fa-tel .dir.apres { display: inline; }
.fa-mail { display: none; align-items: center; gap: 9px; padding: 0 6px; font-size: 13.5px; color: var(--text-2); }
.fa-mail .dir { margin-left: auto; font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.trouve .fa-mail { display: flex; animation: surgit .45s var(--ease-spring); }
.fa-issues { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fa-issues span { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--bdr); font-size: 12.5px; font-weight: 700; color: var(--text-2); transition: all .3s; }
.fa-issues b { font: 600 11px var(--font-mono); color: var(--text-3); }
.rdv .fa-issues .rdv { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.fa-suivant { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: auto; border: 0; border-radius: 12px; background: var(--text); color: var(--bg);
  font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .15s; }
.fa-suivant kbd { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); font: 600 11px var(--font-mono); }
.fa-suivant.appui { transform: scale(.96); }
@media (max-width: 1180px) { .appel { grid-template-columns: 1fr; } .tableur { display: none; } }

/* ═══ Ce que ça change : le bento lilas ══════════════════════════════════ */
.benef { padding-bottom: clamp(72px, 9vw, 130px); }
.bento { padding: clamp(28px, 4.5vw, 64px); border-radius: 44px; background: var(--lilas); }
.bento .h-l { max-width: 13em; }
.bento .h-l .acc { color: var(--v); }
.bento-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 52px); }
.tuile { display: flex; flex-direction: column; padding: 12px 12px 24px; border-radius: 26px; background: var(--paper); border: 1px solid var(--bdr); }
.tuile > div:last-child { padding: 20px 14px 0; }
/* Le visuel de chaque tuile : un morceau du produit, posé sur un fond pastel, qui s'anime quand la section arrive */
.visuel { display: grid; place-items: center; height: 218px; padding: 16px; border-radius: 18px; overflow: hidden; }
.v-liste { background: var(--dire); } .v-tri { background: var(--trier); } .v-fiche { background: var(--appeler); } .v-contact { background: #E6F4EA; }
.mini { width: min(100%, 340px); padding: 12px 14px; border-radius: 14px; background: var(--paper); box-shadow: 0 16px 34px -18px rgba(40, 20, 120, .35), 0 1px 2px rgba(20, 16, 40, .06); }
.mini-k { font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mini-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mini-tete b { font-size: 13px; white-space: nowrap; }
.mr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 28px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--bdr);
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-soft); transition-delay: calc(var(--i) * 140ms); }
.vu .mr { opacity: 1; transform: none; }
.mr .pastille { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.mr .c { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr .f { font: 700 13.5px var(--font-mono); color: var(--v); }
.appel-btn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #1E7A45; color: #fff; }
.j-ligne { display: flex; justify-content: space-between; align-items: baseline; }
.j-ligne b { font-weight: 900; font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.j-ligne b small { font-size: 13px; font-weight: 700; color: var(--text-3); letter-spacing: 0; }
.j-barre { display: flex; gap: 3px; height: 14px; margin: 10px 0 12px; }
.j-barre i { width: 0; border-radius: 5px; transition: width 1s var(--ease-soft); }
.vu .j-barre i { width: var(--w); }
.j-barre .garde { background: var(--trier-pill); }
.j-barre .e1 { background: #E7C98F; transition-delay: .15s; }
.j-barre .e2 { background: #F0DDB6; transition-delay: .3s; }
.j-legende { display: grid; gap: 5px; font-size: 13px; color: var(--text-2); }
.j-legende span { display: flex; align-items: center; gap: 8px; }
.j-legende i { width: 10px; height: 10px; border-radius: 3px; }
.j-legende b { color: var(--text); }
.fm-type { font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fm-chiffre { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.fm-chiffre b { font-weight: 900; font-size: 30px; letter-spacing: -.04em; }
.fm-chiffre span { font-size: 13px; color: var(--text-2); }
.mini-echelle { display: flex; gap: 3px; margin-bottom: 9px; }
.mini-echelle i { flex: 1; display: grid; place-items: center; height: 20px; border-radius: 5px; background: var(--c); opacity: .22; color: #fff; font: 900 11px var(--font-sans); font-style: normal; transition: opacity .5s, flex .6s var(--ease-spring); }
.vu .mini-echelle i.ici { flex: 1.9; opacity: 1; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fm-chips span { padding: 4px 8px; border-radius: 8px; background: var(--appeler); color: var(--appeler-ink); font-size: 12px; font-weight: 700; }
.cm-nom { margin: 2px 0 9px; font-weight: 700; font-size: 15px; }
.cm-tel { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: #1E7A45; color: #fff; box-shadow: 0 12px 24px -14px rgba(30, 122, 69, .7);
  transform: scale(.94); opacity: .6; transition: transform .6s var(--ease-spring), opacity .4s; }
.vu .cm-tel { transform: none; opacity: 1; }
.cm-tel .num { font: 700 15px var(--font-mono); white-space: nowrap; }
.cm-tel small { margin-left: auto; font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cm-autres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; font-size: 12.5px; color: var(--text-2); }
.cm-autres span { padding: 4px 8px; border-radius: 8px; background: var(--soft); }
.tuile h3 { margin: 4px 0 8px; font-weight: 700; font-size: 22px; line-height: 1.18; letter-spacing: -.02em; }
.tuile h3 .fl { color: var(--v); }
.tuile p { margin: 0; color: var(--text-2); font-size: 16px; }
@media (max-width: 860px) { .bento-grille { grid-template-columns: minmax(0, 1fr); } .visuel { height: 206px; } }

/* ── Et après la liste : une ligne par outil, le texte d'un côté, la vraie capture de l'autre ── */
.suite { padding-bottom: clamp(72px, 9vw, 130px); }
.suite-tete { text-align: center; margin-bottom: clamp(32px, 4.5vw, 56px); }
.suite-tete .h-l { max-width: 15em; margin: 0 auto; }
.suite-ligne { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border-radius: 36px; background: var(--fond, var(--lilas)); }
.suite-ligne + .suite-ligne { margin-top: 16px; }
.suite-ligne.inverse .suite-t { order: 2; }
/* Les écrans en largeur prennent plus de place que le texte, pour rester lisibles */
.suite-ligne:not(.etroite) { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.suite-ligne.inverse:not(.etroite) { grid-template-columns: minmax(0, 1.38fr) minmax(0, .62fr); }
.suite-t h3 .acc { color: var(--v); }
.suite-t h3 { margin: 0; font-weight: 800; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -.03em; }
.suite-t p { margin: 14px 0 0; max-width: 44ch; color: var(--text-2); font-size: 17px; line-height: 1.55; }
.suite-prix { display: inline-block; margin-top: 18px; padding: 7px 12px; border-radius: 10px; background: var(--paper); font: 500 12.5px var(--font-mono); color: var(--text-2); }
.suite figure { margin: 0; }
.suite img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid rgba(20, 16, 40, .08);
  box-shadow: 0 34px 80px -40px rgba(40, 20, 120, .5), 0 2px 6px rgba(20, 16, 40, .06); }
/* La fiche est un panneau en hauteur : on la garde à sa largeur naturelle, centrée */
.suite-ligne.etroite figure { justify-self: center; width: min(100%, 360px); }
@media (max-width: 860px) {
  .suite-ligne, .suite-ligne:not(.etroite), .suite-ligne.inverse:not(.etroite) { grid-template-columns: minmax(0, 1fr); }
  .suite-ligne.inverse .suite-t { order: 0; }
}

/* ═══ Fiches CEE : vous dites la fiche, Opsor entend les bâtiments ══════ */
.cee { padding-bottom: clamp(72px, 9vw, 130px); }
.cee-bloc { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 72px) 0 clamp(26px, 3vw, 40px); border-radius: 44px; color: #fff;
  background: radial-gradient(110% 80% at 90% 0%, #6D4DF2 0%, #3B20B2 48%, #2B168C 100%); }
.cee-bloc > .cee-dedans { padding: 0 clamp(24px, 5vw, 72px); }
.cee-bloc .eyebrow { color: rgba(255, 255, 255, .62); }
.cee-bloc .h-l .acc { color: var(--or-clair); }
.cee-bloc .lead { margin-top: 18px; max-width: 58ch; color: rgba(255, 255, 255, .8); }
.traducteur { display: grid; grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.25fr); gap: clamp(20px, 3vw, 44px); align-items: start;
  margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid rgba(255, 255, 255, .16); }
.tr-k { display: block; margin-bottom: 14px; font: 500 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.tr-code { display: block; min-height: 1.05em; font: 600 clamp(34px, 4.1vw, 62px)/1.05 var(--font-mono); letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.tr-code .curseur { display: inline-block; width: .08em; height: .9em; margin-left: .04em; vertical-align: -.08em; background: var(--or-clair); animation: clig 1s steps(1) infinite; }
.tr-nom { display: block; margin-top: 12px; font-size: 17px; color: rgba(255, 255, 255, .72); }
.tr-fleche { display: grid; place-items: center; width: 56px; height: 56px; margin-top: 30px; border-radius: 50%; background: var(--or-clair); color: #2A1A00; }
.tr-phrase { min-height: 3.3em; margin: 0; font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.025em; }
.tr-phrase span { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease-soft); transition-delay: calc(var(--i) * 40ms); }
.tr-phrase.on span { opacity: 1; transform: none; }
.tr-trouve { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 22px; }
.tr-trouve b { font-weight: 900; font-size: clamp(48px, 5.8vw, 88px); line-height: 1; letter-spacing: -.05em; color: var(--or-clair); font-variant-numeric: tabular-nums; }
.tr-trouve span { font-size: 17px; color: rgba(255, 255, 255, .8); }
.tr-note { flex-basis: 100%; margin: 6px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
/* Le ruban des quinze codes : il défile, on peut en cliquer un */
.ruban { position: relative; margin-top: clamp(36px, 4.5vw, 56px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ruban-piste { display: flex; gap: 10px; width: max-content; animation: defile 60s linear infinite; }
.ruban:hover .ruban-piste, .ruban:focus-within .ruban-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
.ruban button { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .78);
  font: 600 14px var(--font-mono); letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ruban button:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.ruban button.ici { background: var(--or-clair); border-color: var(--or-clair); color: #2A1A00; }
.cee-note { margin: 18px clamp(24px, 5vw, 72px) 0; font: 500 12px/1.6 var(--font-mono); color: rgba(255, 255, 255, .5); }
@media (max-width: 900px) { .traducteur { grid-template-columns: 1fr; } .tr-fleche { margin: 0; transform: rotate(90deg); width: 44px; height: 44px; } .cee-bloc { border-radius: 30px; } }
@media (prefers-reduced-motion: reduce) { .ruban { -webkit-mask-image: none; mask-image: none; } .ruban-piste { flex-wrap: wrap; width: auto; } .ruban-piste button[aria-hidden="true"] { display: none; } }

/* ═══ La preuve : la vidéo au centre, l'autre qui dépasse ═══════════════ */
.preuve { padding-bottom: clamp(72px, 9vw, 130px); text-align: center; }
.preuve .lead { max-width: 58ch; margin: 18px auto 0; }
/* Le carrousel : la vidéo active au centre, l'autre qui dépasse ; ça glisse, rien ne se recharge */
.carrousel { margin-top: clamp(32px, 4vw, 52px); text-align: left; }
.car-vue { overflow: hidden; }
.car-piste { display: flex; gap: 18px; transition: transform .8s var(--ease-soft); will-change: transform; }
.car-slide { position: relative; flex: 0 0 70%; margin: 0; cursor: pointer; opacity: .42; transform: scale(.93); transition: opacity .6s, transform .8s var(--ease-soft); }
.car-slide.ici { opacity: 1; transform: none; cursor: default; }
.car-slide .cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; background: #0E0C15; }
.car-slide video { display: block; width: 100%; height: 100%; object-fit: cover; }
.car-legende { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 70px 20px 18px 24px;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 24, .72)); color: #fff; opacity: 0; transition: opacity .5s .25s; }
.car-slide.ici .car-legende { opacity: 1; }
.car-legende b { display: block; margin-bottom: 2px; font: 700 clamp(17px, 1.6vw, 22px)/1.2 var(--font-sans); letter-spacing: -.02em; }
.car-legende span { font: 500 12px var(--font-mono); color: rgba(255, 255, 255, .75); }
.agrandir { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #0A0A0A; cursor: pointer; }
.car-commandes { display: flex; align-items: stretch; justify-content: center; gap: 10px; margin-top: 18px; }
.car-onglet { position: relative; min-width: 240px; padding: 12px 16px 16px; border: 1px solid var(--bdr); border-radius: 14px; background: var(--paper); text-align: left; cursor: pointer; overflow: hidden; transition: border-color .2s; }
.car-onglet[aria-selected="true"] { border-color: var(--text); }
.car-onglet .t { display: block; font-weight: 700; font-size: 15px; }
.car-onglet .s { display: block; font: 500 11.5px var(--font-mono); color: var(--text-3); }
.car-onglet .car-progres { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bdr); }
.car-onglet .car-progres i { display: block; width: 0; height: 100%; background: var(--v); transition: width .3s linear; }
.car-fleche { display: grid; place-items: center; width: 52px; border: 1px solid var(--bdr); border-radius: 14px; background: var(--paper); color: var(--text); cursor: pointer; }
.car-fleche:hover, .car-onglet:hover { border-color: var(--bdr-strong); }
@media (max-width: 760px) { .car-slide { flex-basis: 88%; } .car-slide .cadre { border-radius: 22px; } .car-onglet { flex: 1; min-width: 0; } .car-fleche { display: none; } }
/* Deux écrans réels d'Opsor sous les vidéos : la carte, et la fiche d'un bien */
.galerie { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .62fr); gap: 18px; align-items: start; margin-top: clamp(36px, 4.5vw, 60px); text-align: left; }
.galerie figure { margin: 0; }
.galerie img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--bdr); box-shadow: 0 40px 90px -42px rgba(40, 20, 120, .5), 0 2px 6px rgba(20, 16, 40, .06); }
.galerie figcaption { margin-top: 12px; font-size: 14.5px; color: var(--text-2); }
.galerie figcaption b { color: var(--text); }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr; } .galerie-fiche { display: none; } }
.sources { margin-top: clamp(36px, 4vw, 56px); }
.sources .lbl { font: 500 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sources .rang-s { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.sources .rang-s span { padding: 8px 14px; border-radius: 12px; background: var(--lilas); font-weight: 700; font-size: 15px; }

/* ═══ Tarif : un seul plan, le prix suit l'équipe ═══════════════════════════ */
.tarifs { padding-bottom: clamp(72px, 9vw, 130px); }
.tarif-tete { margin-bottom: clamp(28px, 3.5vw, 44px); }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 40px; background: var(--paper); border: 1px solid var(--bdr); box-shadow: var(--ombre-carte); overflow: hidden; }
.plan-g { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 4vw, 52px); background: var(--trier); }
.plan-nom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 22px; }
.plan-badge { padding: 5px 10px; border-radius: 10px; background: var(--paper); font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--trier-ink); }
.plan-prix { display: flex; align-items: flex-end; gap: 12px; margin: 8px 0 12px; }
.plan-prix b { font-weight: 900; font-size: clamp(76px, 9vw, 128px); line-height: .82; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.plan-par { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.plan-par .eur { font-weight: 900; font-size: 36px; line-height: 1; color: var(--text); }
.plan-k { font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sieges-ligne { display: flex; align-items: center; gap: 18px; }
.sieges-ligne output { min-width: 100px; font-weight: 700; font-size: 18px; text-align: right; }
.sieges-ligne input { --p: 0%; flex: 1; height: 8px; margin: 0; border-radius: 99px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: linear-gradient(90deg, var(--trier-pill) var(--p), rgba(10, 10, 10, .1) var(--p)); }
.sieges-ligne input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 2px solid var(--trier-pill); box-shadow: 0 4px 12px rgba(120, 70, 0, .3); }
.sieges-ligne input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2px solid var(--trier-pill); box-shadow: 0 4px 12px rgba(120, 70, 0, .3); }
.sieges-detail { margin: 0; font-size: 14.5px; color: var(--text-2); }
.sieges-detail b { color: var(--text); }
.achat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; }
.achat input { flex: 1 1 220px; height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid rgba(10, 10, 10, .12); background: var(--paper); color: var(--text); font: inherit; }
.achat input:focus { outline: none; border-color: var(--v); box-shadow: 0 0 0 4px var(--v-soft); }
.achat .btn { background: var(--text); color: var(--bg); }
.achat-msg { margin: 0; font-size: 14px; color: var(--v); }
.fin-texte { margin: 0; font: 500 11px/1.6 var(--font-mono); letter-spacing: .04em; color: var(--text-3); }
.plan-d { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 4vw, 52px); }
.inclus { list-style: none; display: grid; gap: 12px; margin: 0 0 14px; padding: 0; }
.inclus li { position: relative; padding-left: 34px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.inclus li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--v-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236841F2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.credits { display: grid; margin: 0; border-top: 1px solid var(--bdr); }
.credits div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bdr); font-size: 15px; }
.credits dt { color: var(--text-2); }
.credits dd { margin: 0; font-weight: 700; text-align: right; }
@media (max-width: 900px) { .plan { grid-template-columns: 1fr; border-radius: 30px; } }

/* ═══ Dernier appel : on revient au champ violet ════════════════════════ */
.fin { position: relative; color: #fff; text-align: center; background: linear-gradient(180deg, var(--champ-b) 0%, var(--sol) 70%); padding: 0 0 clamp(72px, 9vw, 120px); }
.fin-crete { display: block; width: 100%; height: clamp(48px, 6vw, 90px); background: var(--bg); }
.fin-crete path { fill: var(--champ-b); }
.fin-orbe { position: relative; width: clamp(150px, 16vw, 230px); aspect-ratio: 1; margin: clamp(8px, 2vw, 24px) auto 8px; }
.fin h2 { max-width: 13em; margin-inline: auto; }
.fin h2 .l2 { color: var(--or-clair); }
.fin .lead { color: rgba(255, 255, 255, .8); max-width: 50ch; margin: 18px auto 0; }
.fin .hero-cta { justify-content: center; margin-top: 30px; }

/* ═══ Pied ═══════════════════════════════════════════════════════════════ */
.pied { padding: clamp(48px, 6vw, 80px) 0 32px; background: var(--bg); }
.pied-grille { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.pied p { margin: 12px 0 0; color: var(--text-2); font-size: 15px; max-width: 30ch; }
.pied .adr { font: 500 12px/1.6 var(--font-mono); color: var(--text-3); }
.pied h5 { margin: 4px 0 12px; font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.pied nav { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.pied nav a { color: var(--text-2); }
.pied nav a:hover { color: var(--text); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--bdr); font: 500 12px var(--font-mono); color: var(--text-3); }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-grille > :first-child { grid-column: 1 / -1; } }

/* ═══ Bandeau de l'offre (offre.js) : tout en haut, jusqu'à la vraie fin de l'offre ═══ */
html.offre body { padding-top: 40px; }
html.offre .nav { top: 52px; }
html.offre .nav-mobile { top: 124px; }
.offre-bandeau { position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px 18px;
  padding: 0 12px; background: linear-gradient(90deg, #2B168C 0%, #4E2EE0 50%, #2B168C 100%); color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; }
.offre-texte b { font-weight: 700; }
.offre-large { color: rgba(255, 255, 255, .78); }
.offre-fin { color: rgba(255, 255, 255, .86); }
.offre-court { display: none; }
.offre-compte { font: 600 13.5px var(--font-mono); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.offre-lien { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9px; background: var(--or-clair); color: #2A1A00;
  font-weight: 700; font-size: 13.5px; transition: transform .2s var(--ease-soft); }
.offre-lien:hover { transform: translateY(-1px); }
@media (max-width: 640px) {
  .offre-bandeau { gap: 10px; font-size: 12.5px; }
  .offre-large { display: none; }
  .offre-court { display: inline; }
  .offre-compte { font-size: 12.5px; }
  .offre-lien { height: 26px; padding: 0 10px; font-size: 12.5px; }
}

/* ═══ Bandeau de consentement (mesure.js) : en bas, deux boutons de même poids ═══ */
.consentement { position: fixed; left: 50%; bottom: 16px; z-index: 80; width: min(760px, calc(100% - 24px)); display: flex; align-items: center; gap: 14px 22px;
  padding: 16px 16px 16px 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--bdr); color: var(--text);
  box-shadow: 0 24px 60px -24px rgba(40, 20, 120, .45), 0 2px 6px rgba(20, 16, 40, .06);
  opacity: 0; transform: translate(-50%, 16px); transition: opacity .3s ease, transform .45s var(--ease-soft); }
.consentement.ouvert { opacity: 1; transform: translate(-50%, 0); }
.consentement p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.consentement p b { color: var(--text); }
.consentement a { color: var(--v); font-weight: 700; white-space: nowrap; }
.consentement-choix { display: flex; gap: 8px; flex: none; }
.consentement .btn { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; }
.btn-contour-clair { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--bdr-strong); }
.btn-contour-clair:hover { background: var(--soft); }
@media (max-width: 640px) { .consentement { flex-direction: column; align-items: stretch; bottom: 10px; padding: 16px; } .consentement-choix .btn { flex: 1; } }

/* ═══ Barre de commandes de la maquette (hors produit) ══════════════════ */
  font: 500 10.5px var(--font-mono); background: var(--paper); border: 1px solid var(--bdr); border-radius: 999px;
  box-shadow: 0 10px 30px -16px rgba(20, 16, 40, .35); color: var(--text); }
@media (max-width: 640px) { .mq .lb { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ════════════════ QUESTIONS FRÉQUENTES ════════════════ */
.faq { padding-bottom: clamp(72px, 9vw, 130px); }
.faq-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-liste { border-top: 1px solid var(--bdr); }
.faq-q { border-bottom: 1px solid var(--bdr); }
.faq-q summary { position: relative; display: block; padding: 20px 44px 20px 0; font-weight: 700; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--v-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236841F2' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s var(--ease-soft); }
.faq-q[open] summary::after { transform: rotate(45deg); }
.faq-r p { margin: 0 0 22px; max-width: 64ch; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.faq-r a { color: var(--v); font-weight: 700; }
.cee-note a { color: var(--or-clair); font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 900px) { .faq-grille { grid-template-columns: 1fr; } }

/* ════════════════ TÉLÉPHONE : moins de texte, des maquettes allégées ════════════════
   Seulement sous 760 px : l'ordinateur et la tablette gardent tout. Les titres portent le
   propos ; les paragraphes, les puces, les notes et les morceaux d'écran secondaires
   s'effacent. La carte et les orbes ne sont même pas montées (MOBILE, dans le script). */
@media (max-width: 760px) {
  /* Le héros : le titre, le sous-titre et un seul bouton, en pleine largeur ; le soleil reste dans le cadre */
  .hero-cta .btn-fantome, .certs .lbl { display: none; }
  .heros { min-height: 100svh; padding: calc(76px + 24px) 0 132px; }
  .heros-fond img { object-position: 74% 50%; }
  .heros-soleil { background: radial-gradient(60% 30% at 70% 36%, rgba(255, 214, 120, .45) 0%, rgba(255, 190, 90, 0) 70%); }
  .heros h1 { font-size: clamp(38px, 11vw, 50px); }
  .heros .lead { margin-top: 16px; font-size: 16px; }
  .heros .hero-cta { margin-top: 26px; }
  .heros .btn-or { width: 100%; }
  .heros-bas { bottom: 52px; }
  .heros-bas .certs { gap: 10px 22px; }
  .heros-bas .certs img { height: 20px; }
  .heros-crete { height: 38px; }
  /* Le film : le titre et le film, sans le paragraphe */
  .live-tete .lead { display: none; }
  /* Le constat : les trois phrases, sans leur paragraphe */
  .front p, .clot, #constat-titre .gris { display: none; }
  .front { gap: 8px; padding: 20px 22px; border-radius: 24px; }
  /* Ce qu'il fait : le titre de chaque carte, et un écran réduit à l'essentiel */
  .sol-intro .lead, .etapes, .feat .texte p, .feat .chips { display: none; }
  .feat .ecran { min-height: 0; }
  .tri-scene { min-height: 330px; }
  #f-dire .carte-zone { position: static; }
  #carte { display: none; }
  #f-dire .bande { position: static; padding: 14px 12px 12px; background: none; }
  .tri-etapes, #tri-rejouer, .tri-zone, .tri-compris, .tri-note, .tri-point:nth-child(n+5), .garde-ligne:nth-child(n+2), .garde-ligne small, .ecran-barre .traitees { display: none; }
  .fa-mail, .trouve .fa-mail, .fa-issues, .fa-k:has(+ .fa-issues), .fa-suivant { display: none; }
  .appel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fa-tel .dir { font-size: 9.5px; }
  .fa-tel svg { flex: none; }
  .v-liste .mini-tete, .j-ligne .mini-k { display: none; }
  .visuel .mini { width: 100%; max-width: 100%; }
  .j-ligne b { white-space: nowrap; }
  .visuel { height: auto; min-height: 150px; padding: 22px 14px; }
  .visuel .mini > * { max-width: 100%; }
  .cm-tel { min-width: 0; }
  .fm-chiffre b { white-space: nowrap; }
  .cm-tel small { display: none; }
  /* Ce que ça change : l'image et le titre */
  .tuile p, .fm-chips, .cm-autres, .j-legende span:nth-child(n+2) { display: none; }
  .v-liste .mr:nth-child(n+4) { display: none; }
  /* Et après la liste : le titre, le prix et la capture */
  .suite-t p { display: none; }
  .suite-ligne { gap: 18px; padding: 22px 16px 16px; border-radius: 26px; }
  .suite-prix { margin-top: 10px; }
  .suite img { border-radius: 12px; }
  .suite-ligne.etroite img { max-height: 460px; object-fit: cover; object-position: top; }
  /* Fiches CEE, preuve, tarif, fin, pied */
  .tr-fleche, .tr-note, .tr-k { display: none !important; }
  .traducteur { gap: 14px; }
  .tr-phrase { font-size: 20px; }
  .cee-bloc .lead, .cee-note, .preuve .lead, .sources, .fin .lead, .fin-orbe { display: none; }
  .credits div:nth-child(n+4) { display: none; }
  .pied-grille > :first-child p:not(.adr) { display: none; }
}