/* Cockpit : feuille de style unique. Valeurs tirées de la charte graphique v1.0.
   Concept : le cadran. Tout le site repose sur le fond bleu nuit et ses grandes courbes. Seuls les écrans de l'application restent clairs. */

@font-face { font-family: "Inter"; src: url("/fonts/landing/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/fonts/landing/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  /* Écrits sur la charte */
  --bleu: #3B82F6;
  --nuit: #0F1B3D;
  --clair: #DBEAFE;
  --fond: #F8FAFC;
  --bordure: #E2E8F0;
  --sec: #64748B;
  --ok: #22C55E;
  --att: #F59E0B;
  --err: #EF4444;
  --info: #6366F1;
  /* Relevés sur les planches : boutons et grands aplats */
  --plein: #0154FE;
  --plein-h: #0147DB;
  --ciel: #19C2FF;
  --nuit-p: #081B4E;
  --nuit-f: #060F2B;
  /* Dérivés */
  --blanc: #FFFFFF;
  --sur-nuit: #D6E1F5;
  --verre: rgba(9, 28, 80, .62);
  --verre-bord: rgba(150, 195, 255, .18);
  --ok-t: #15803D; --ok-f: #DCFCE7;
  --att-t: #B45309; --att-f: #FEF3C7;
  --err-t: #B91C1C; --err-f: #FEE2E2;
  --info-t: #4338CA;
  --cours-t: #0147DB;
  --ombre: 0 1px 2px rgba(15, 27, 61, .05), 0 12px 32px -12px rgba(15, 27, 61, .16);
  --r: 16px;
  --police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
html { background: var(--nuit-f); }
body { margin: 0; isolation: isolate; background: var(--nuit-f); color: var(--blanc); font: 400 17px/1.6 var(--police); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--nuit-f); }
h1, h2, h3, h4, p, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.022em; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ciel); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
/* Sur ordinateur, le contenu occupe davantage la largeur de l'écran */
@media (min-width: 1121px) {
  .wrap { max-width: 1760px; padding-left: max(clamp(32px, 4vw, 72px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(32px, 4vw, 72px), env(safe-area-inset-right, 0px)); }
}
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--blanc); color: var(--nuit); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 12px; font: 600 16px/1.2 var(--police); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
.btn .ic { transition: transform .2s; }
.btn:hover .ic { transform: translateX(3px); }
.btn--plein { background: var(--plein); color: var(--blanc); box-shadow: 0 8px 28px -8px rgba(1, 84, 254, .8); }
.btn--plein:hover { background: var(--plein-h); }
.btn--verre { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .24); color: var(--blanc); }
.btn--verre:hover { background: rgba(255, 255, 255, .14); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; border-radius: 10px; box-shadow: none; white-space: nowrap; }
.btn--large { width: 100%; grid-column: 1 / -1; }

/* En-tête */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: transparent; color: var(--blanc); }
.top--scroll { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Fond transparent : au-dessus d'un écran blanc, chaque élément passe en bleu nuit (posé par main.js) */
.logo img, .logo__g, .nav a, .burger { transition: color .2s, filter .2s, background-color .2s, border-color .2s; }
.logo.sur-clair img { filter: brightness(0); }
.logo.sur-clair .logo__g--blanc { color: var(--nuit); }
.nav a.sur-clair, .nav a.sur-clair:hover { color: var(--nuit); background: transparent; }
.burger.sur-clair { color: var(--nuit); border-color: rgba(15, 27, 61, .35); background: rgba(15, 27, 61, .06); }
.top__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.logo__g { width: 38px; height: 32px; }
.logo__g--blanc { color: var(--blanc); }
.logo img { width: auto; height: 30px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 12px; border-radius: 8px; color: var(--sur-nuit); font-size: 15px; font-weight: 500; text-decoration: none; transition: color .2s, background-color .2s; }
.nav a:hover { color: var(--blanc); background: rgba(255, 255, 255, .07); }
.nav .nav__login { color: var(--blanc); margin-left: 8px; }
.top__cta { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; color: var(--blanc); cursor: pointer; }

/* Surtitres */
.surtitre { display: flex; align-items: center; gap: 12px; color: var(--sur-nuit); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.surtitre--bleu { color: #8CCBFF; }

/* Courbes de la charte */
.courbe { position: absolute; display: block; border-radius: 50%; }
.ciel { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(118deg, var(--nuit-f) 0, var(--nuit-p) 55%, #0A2A78 100%); }
/* Comme la couverture de la charte : l'arc brille sur son bord et s'efface vers l'intérieur */
.courbe { background: radial-gradient(closest-side, rgba(1, 84, 254, 0) 72%, rgba(1, 84, 254, .34) 90%, rgba(1, 84, 254, .85) 98%, #2A84FF 100%); box-shadow: 0 0 150px -20px rgba(40, 130, 255, .6); }
.courbe--1 { width: 160vmax; height: 160vmax; left: 60vw; top: -8vh; }
.courbe--2 { width: 112vmax; height: 112vmax; left: 84vw; top: 42vh; }

/* Hero */
.hero { position: relative; }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); align-items: center; gap: 56px; padding-block: 72px 88px; }
.hero__txt { min-width: 0; }
.hero h1 { margin-top: 22px; font-size: clamp(42px, 5.1vw, 88px); line-height: 1.04; font-weight: 700; letter-spacing: -.034em; }
.hero__lead { margin-top: 24px; max-width: 34em; color: #C9D5EC; font-size: 19px; line-height: 1.55; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__faits { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--sur-nuit); font-size: 14px; }
.hero__faits li { display: flex; align-items: center; gap: 7px; }
.hero__faits .ic { color: var(--ciel); }

/* Écran du hero */
.ecran-zone { position: relative; min-width: 0; }
.ecran { position: relative; min-width: 0; border-radius: 16px; background: var(--fond); color: var(--nuit); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 40px 90px -24px rgba(1, 8, 40, .9), 0 0 110px -30px rgba(25, 150, 255, .75); overflow: hidden; font-size: 13px; line-height: 1.35; }
.ecran__barre { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--blanc); }
.ecran__barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--bordure); }
.ecran__barre i:nth-child(1) { background: #FB7185; } .ecran__barre i:nth-child(2) { background: #FBBF24; } .ecran__barre i:nth-child(3) { background: #34D399; }
.ecran__barre span { margin-left: 8px; color: var(--sec); font-size: 12px; }
.app { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.app__nav { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; background: var(--nuit); color: var(--sur-nuit); }
.app__g { width: 34px; height: 29px; margin: 2px 6px 12px; color: var(--blanc); }
.app__nav b { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 500; }
.app__nav b.on { background: var(--plein); color: var(--blanc); }
.app__nav .ic { width: 15px; height: 15px; }
.app__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }
.app__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app__tete strong { font-size: 18px; letter-spacing: -.01em; }
.etiq-ex { flex: none; padding: 3px 8px; border-radius: 99px; background: var(--clair); color: var(--cours-t); font-size: 11px; font-weight: 600; white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpis div { display: flex; flex-direction: column; min-width: 0; padding: 10px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 12px; }
.kpis span { color: var(--sec); font-size: 11px; }
.kpis strong { margin-top: 3px; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpis em { margin-top: 2px; color: var(--ok-t); font-size: 11px; font-style: normal; }
.kpis em.neutre { color: var(--sec); }
.app__bas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
.panneau { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 12px; }
.panneau h4 { font-size: 13px; font-weight: 600; }
.ligne { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ligne b { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.p-err { background: var(--err); } .p-att { background: var(--att); } .p-ok { background: var(--ok); } .p-info { background: var(--info); }
.creneau { display: flex; gap: 8px; align-items: stretch; font-size: 12px; }
.creneau time { color: var(--sec); font-variant-numeric: tabular-nums; padding-top: 5px; }
.creneau span { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 7px; background: var(--plein); color: var(--blanc); font-weight: 600; }
.creneau small { display: block; font-size: 11px; font-weight: 400; opacity: .85; }
.creneau--b span { background: var(--clair); color: var(--nuit); }
.creneau--c span { background: #E0E7FF; color: var(--nuit); }

/* En-têtes de section */
.tete { max-width: 980px; }
.tete h2, .cadran__tete h2, .demo__txt h2 { margin-top: 16px; font-size: clamp(32px, 3.7vw, 60px); line-height: 1.1; font-weight: 700; letter-spacing: -.028em; }
.tete > p:not(.surtitre) { margin-top: 18px; max-width: 46em; color: var(--sur-nuit); font-size: 18px; }

/* Voyants */
.voyants { padding-block: 104px; }
.grille-voyants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-radius: 20px; background: var(--verre); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(1, 8, 40, .9); }
.voyant { display: flex; gap: 18px; align-items: flex-start; min-width: 0; padding: 30px 28px; background: radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px), rgba(90, 160, 255, .18), transparent 70%); color: var(--blanc); }
.voyant h3 { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; }
.voyant p { margin-top: 8px; color: var(--sur-nuit); font-size: 15px; line-height: 1.5; }
.voyant > div { min-width: 0; }
.voyant__led { --c: var(--bleu); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex: none; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 26px -2px color-mix(in srgb, var(--c) 65%, transparent); transition: box-shadow .5s, background-color .5s, opacity .5s; }
.voyant__led .ic { width: 24px; height: 24px; }
.v-err .voyant__led { --c: #F87171; } .v-att .voyant__led { --c: #FBBF24; } .v-ok .voyant__led { --c: #4ADE80; } .v-info .voyant__led { --c: #A5B4FC; }
.grille-voyants.eteint .voyant__led { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); background: transparent; opacity: .55; }

/* Modules */
.quotidien { padding-block: 104px; }
.module { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 72px; margin-top: 72px; }
.module--inv .module__txt { order: 2; }
.module__txt { min-width: 0; }
.puce { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(120, 180, 255, .16); box-shadow: inset 0 0 0 1px rgba(140, 200, 255, .35); color: #9BD3FF; }
.puce .ic { width: 23px; height: 23px; }
.module h3 { margin-top: 18px; font-size: clamp(25px, 2.5vw, 32px); line-height: 1.16; font-weight: 700; }
.module__txt > p { margin-top: 14px; max-width: 38em; color: var(--sur-nuit); }
.points { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; font-size: 16px; line-height: 1.45; }
.points li { position: relative; padding-left: 28px; }
.points li::before { content: ""; position: absolute; left: 2px; top: .33em; width: 15px; height: 15px; border-radius: 50%; background: rgba(120, 180, 255, .24); }
.points li::after { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 4px; border-left: 2px solid #9BD3FF; border-bottom: 2px solid #9BD3FF; transform: rotate(-45deg); }

/* Interfaces d'exemple */
.ui { min-width: 0; padding: 22px; color: var(--nuit); background: var(--blanc); border: 1px solid var(--bordure); border-radius: 18px; box-shadow: 0 36px 70px -30px rgba(1, 8, 40, .95), 0 0 0 1px rgba(255, 255, 255, .1); font-size: 14px; line-height: 1.4; }
.ui__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; font-size: 16px; }
.etiq-ex--clair { background: var(--fond); color: var(--sec); border: 1px solid var(--bordure); }
.tag { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; }
.tag .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.tag--ok { background: var(--ok-f); color: var(--ok-t); }
.tag--cours { background: var(--clair); color: var(--cours-t); }
.tag--att { background: var(--att-f); color: var(--att-t); }
.tag--err { background: var(--err-f); color: var(--err-t); }
.tag--non { background: var(--fond); color: var(--sec); border: 1px solid var(--bordure); }

.plan { position: relative; display: grid; grid-template-columns: 46px repeat(3, minmax(0, 1fr)); grid-template-rows: 26px repeat(5, 54px); column-gap: 8px; }
.plan__m { grid-row: 1; color: var(--sec); font-size: 13px; font-weight: 600; text-align: center; }
.plan time { grid-column: 1; color: var(--sec); font-size: 12px; font-variant-numeric: tabular-nums; transform: translateY(-1px); }
.lc { z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; margin: 2px 0; padding: 7px 9px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1.2; overflow: hidden; overflow-wrap: anywhere; }
.lc small { font-size: 11.5px; font-weight: 500; margin-top: 2px; }
.lc--prevue { background: var(--plein); color: var(--blanc); }
.lc--faite { background: var(--ok-f); color: var(--ok-t); }
.lc--absent { background: var(--err-f); color: var(--err-t); }

.prog__h { display: flex; justify-content: space-between; gap: 12px; color: var(--sec); }
.prog__h b { color: var(--nuit); white-space: nowrap; }
.barre { height: 10px; margin-top: 8px; border-radius: 99px; background: var(--clair); overflow: hidden; }
.barre i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0047FF, #00A3FF); }
.comp { margin-top: 14px; }
.comp li { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.comp b { color: var(--plein); }
.comp span { flex: 1; min-width: 0; }
.ui blockquote { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--fond); font-size: 14px; }
.ui cite { display: block; margin-top: 6px; color: var(--sec); font-size: 12.5px; font-style: normal; }

.doss li { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.doss li:first-child { padding-top: 2px; }
.doss > li > .ic { color: var(--sec); }
.doss span { flex: 1; min-width: 0; font-weight: 500; }
.doss small { display: block; color: var(--err-t); font-size: 12.5px; font-weight: 400; }

.pay__tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pay__tot div { min-width: 0; padding: 12px; border-radius: 12px; background: var(--fond); }
.pay__tot span { display: block; color: var(--sec); font-size: 12.5px; }
.pay__tot strong { display: block; margin-top: 3px; font-size: clamp(18px, 2vw, 22px); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay__reste { background: var(--att-f) !important; }
.pay__reste strong { color: var(--att-t); }
.pay { margin-top: 12px; }
.pay li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pay time { width: 56px; flex: none; color: var(--sec); font-size: 13px; }
.pay span { flex: 1; min-width: 0; font-weight: 500; }
.pay small { display: block; color: var(--sec); font-size: 12.5px; font-weight: 400; }
.pay b { font-variant-numeric: tabular-nums; }

/* Parcours : le cadran suit les étapes */
.parcours__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; padding-block: 104px; }
.cadran { position: sticky; top: 100px; align-self: start; min-width: 0; }
.cadran__svg { position: relative; max-width: 520px; margin-top: 36px; }
.cadran__svg svg { width: 100%; height: auto; overflow: visible; }
.cadran__fond, .cadran__val { fill: none; stroke-width: 36; stroke-linecap: round; }
.cadran__fond { stroke: rgba(255, 255, 255, .1); }
.cadran__val { stroke-dasharray: 16 100; transition: stroke-dasharray .8s cubic-bezier(.3, .8, .3, 1); filter: drop-shadow(0 0 14px rgba(25, 150, 255, .55)); }
.cadran__aiguille { transform-origin: 200px 156px; transform: rotate(-84deg); transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.cadran__etape { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; color: var(--sur-nuit); font-size: 15px; font-weight: 500; }
.cadran__etape span { color: var(--blanc); font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-right: 2px; font-variant-numeric: tabular-nums; }
.route-zone { position: relative; min-width: 0; padding-left: 58px; }
.route { position: absolute; left: 6px; top: 40px; bottom: 40px; width: 34px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.route__voiture { position: absolute; left: 50%; top: 0; width: 22px; margin-left: -11px; will-change: transform; filter: drop-shadow(0 4px 10px rgba(25, 150, 255, .7)); transition: transform .35s ease-out; }
.etapes { display: flex; flex-direction: column; gap: 22px; padding-block: 40px; min-width: 0; }
.etape { position: relative; padding: 30px 30px 32px; border: 1px solid var(--verre-bord); border-radius: 18px; background: var(--verre); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .4s, border-color .4s; }
.etape.on { background: rgba(14, 44, 120, .78); border-color: rgba(120, 180, 255, .6); }
.etape__n { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-weight: 700; font-size: 15px; transition: background-color .4s; }
.etape.on .etape__n { background: var(--plein); }
.etape h3 { margin-top: 16px; font-size: 24px; font-weight: 600; line-height: 1.2; }
.etape p { margin-top: 10px; color: #C9D5EC; font-size: 16.5px; }

/* Rôles */
.roles { padding-block: 104px; }
.grille-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 48px; }
.role { min-width: 0; }
.role h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; }
.role h3 .ic { color: #9BD3FF; }
.role > p { margin-top: 10px; color: var(--sur-nuit); font-size: 16px; }
.garanties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; padding: 28px; border-radius: var(--r); background: var(--verre); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.garanties li { display: flex; gap: 12px; min-width: 0; font-size: 14.5px; line-height: 1.4; }
.garanties .ic { color: #9BD3FF; margin-top: 1px; }
.garanties b { display: block; font-weight: 600; }
.garanties span { display: block; margin-top: 3px; color: var(--sur-nuit); }

/* FAQ */
.faq { padding-block: 104px; }
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
.faq__liste { min-width: 0; }
.faq summary { position: relative; padding: 20px 40px 20px 0; font-size: 18px; font-weight: 600; line-height: 1.3; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details p { padding: 0 40px 22px 0; color: var(--sur-nuit); }

/* Démo */
.demo { position: relative; }
.demo__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding-block: 104px; }
.demo__txt { min-width: 0; }
.demo__g { width: 74px; height: 63px; color: var(--blanc); }
.demo__txt > p { margin-top: 18px; color: #C9D5EC; font-size: 18px; max-width: 30em; }
.demo__txt .demo__mail { color: var(--sur-nuit); font-size: 15px; }
.demo__mail a { color: var(--blanc); font-weight: 500; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; padding: 30px; color-scheme: dark; border-radius: 20px; background: var(--verre); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 36px 80px -30px rgba(1, 8, 40, .9); }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-size: 14px; font-weight: 500; }
.champ small { color: var(--sur-nuit); font-weight: 400; font-size: 13px; }
.champ input, .champ select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--blanc); font: 400 16px var(--police); transition: border-color .2s, box-shadow .2s; }
.champ select option { background: var(--nuit); color: var(--blanc); }
.champ input:focus, .champ select:focus { outline: 0; border-color: #6FB6FF; box-shadow: 0 0 0 3px rgba(80, 160, 255, .3), 0 0 26px -4px rgba(80, 160, 255, .7); }
.champ.erreur input, .champ.erreur select { border-color: #F87171; }
.champ__err { color: #FCA5A5; font-size: 13px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { grid-column: 1 / -1; font-size: 14.5px; }
.form__msg:empty { display: none; }
.form__msg.ok { padding: 12px 14px; border-radius: 10px; background: var(--ok-f); color: var(--ok-t); }
.form__msg.ko { padding: 12px 14px; border-radius: 10px; background: var(--err-f); color: var(--err-t); }
.form__msg.mail { padding: 12px 14px; border-radius: 10px; background: var(--clair); color: var(--nuit); }
.form__msg a { font-weight: 600; }
.form__rgpd { grid-column: 1 / -1; color: var(--sur-nuit); font-size: 13px; line-height: 1.45; }

/* Pied */
.pied { color: var(--sur-nuit); font-size: 14px; }
.pied__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: 40px; }
.pied__logo p { margin-top: 6px; font-size: 13px; }
.logo--pied img { height: 26px; } .logo--pied .logo__g { width: 32px; height: 27px; }
.pied__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied__nav a { text-decoration: none; }
.pied__nav a:hover { color: var(--blanc); text-decoration: underline; }
.pied__c { flex-basis: 100%; font-size: 13px; }

/* Mentions légales */
.legal { max-width: 800px; padding-block: 64px 96px; }
.legal h1 { font-size: 40px; font-weight: 700; }
.legal h2 { margin-top: 40px; font-size: 24px; font-weight: 600; }
.legal h3 { margin-top: 22px; font-size: 18px; font-weight: 600; }
.legal p { margin-top: 8px; color: var(--sur-nuit); font-size: 16px; }
.legal a { color: #9BD3FF; }
.todo { padding: 1px 6px; border-radius: 5px; background: var(--att-f); color: var(--att-t); font-weight: 600; }

/* Animations. Rien n'est masqué sans JavaScript : .r-cache n'est posé que par main.js.
   Le mode « réduire les animations » coupe tout en bas de ce fichier. */
.courbe--1 { animation: derive-a 26s ease-in-out infinite alternate; }
.courbe--2 { animation: derive-b 34s ease-in-out infinite alternate; }
@keyframes derive-a { to { translate: -4vmax 3vmax; scale: 1.04; } }
@keyframes derive-b { to { translate: -5vmax -3vmax; scale: .97; } }

/* Arrivée du hero */
.hero__txt > .surtitre, .hero__lead, .hero__cta, .hero__faits { animation: monte .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero__lead { animation-delay: .55s; } .hero__cta { animation-delay: .7s; } .hero__faits { animation-delay: .85s; }
.mot { display: inline-block; animation: mot .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.1s + var(--i) * .1s); }
.mot--degrade { background: linear-gradient(100deg, #fff 0, #fff 30%, #7CC8FF 45%, #19C2FF 52%, #fff 70%, #fff 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mot .9s cubic-bezier(.2, .8, .2, 1) both, reflet 7s ease-in-out infinite; animation-delay: calc(.1s + var(--i) * .1s), calc(1.4s + var(--i) * .12s); padding-bottom: .08em; margin-bottom: -.08em; }
@keyframes monte { from { opacity: 0; translate: 0 22px; } }
@keyframes mot { from { opacity: 0; translate: 0 .5em; filter: blur(8px); } }
@keyframes reflet { 0% { background-position: 110% 0; } 60%, 100% { background-position: -40% 0; } }
.ecran { animation: ecran 1.2s .25s cubic-bezier(.2, .8, .2, 1) both; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
@keyframes ecran { from { opacity: 0; translate: 0 44px; scale: .96; } }
.ecran-zone { animation: flotte 7s 1.5s ease-in-out infinite alternate; }
@keyframes flotte { to { transform: translateY(-10px); } }
.kpis div, .panneau { animation: monte .7s cubic-bezier(.2, .8, .2, 1) both; }
.kpis div:nth-child(1) { animation-delay: .7s; } .kpis div:nth-child(2) { animation-delay: .8s; } .kpis div:nth-child(3) { animation-delay: .9s; }
.panneau { animation-delay: 1.05s; } .panneau--jour { animation-delay: 1.15s; }
.ligne, .creneau { animation: monte .55s cubic-bezier(.2, .8, .2, 1) both; }
.ligne:nth-of-type(1) { animation-delay: 1.2s; } .ligne:nth-of-type(2) { animation-delay: 1.3s; } .ligne:nth-of-type(3) { animation-delay: 1.4s; } .ligne:nth-of-type(4) { animation-delay: 1.5s; }
.creneau:nth-of-type(1) { animation-delay: 1.3s; } .creneau:nth-of-type(2) { animation-delay: 1.4s; } .creneau:nth-of-type(3) { animation-delay: 1.5s; }
.pastille { animation: battre 2.6s ease-in-out infinite; }
@keyframes battre { 50% { opacity: .65; scale: 1.25; } }

/* Jauge du logo : l'arc se trace et l'aiguille monte */
.jauge-vive__arc { stroke-dasharray: 100 100; animation: arc 1.2s .1s cubic-bezier(.3, .8, .3, 1) both; }
.jauge-vive__aig { transform-box: view-box; transform-origin: 605px 765px; animation: aiguille 1.4s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes arc { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes aiguille { from { transform: rotate(-125deg); } to { transform: rotate(0); } }
.logo:hover .jauge-vive__aig { animation: coup 1s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes coup { 35% { transform: rotate(-70deg); } }
.demo__g.attend .jauge-vive__arc { animation: none; stroke-dashoffset: 100; }
.demo__g.attend .jauge-vive__aig { animation: none; transform: rotate(-125deg); }

/* Notification du hero */
.toast { position: absolute; left: -22px; bottom: -22px; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px); padding: 10px 16px 10px 10px; border-radius: 14px; background: var(--blanc); color: var(--nuit); font-size: 14px; font-weight: 600; line-height: 1.25; box-shadow: 0 18px 40px -12px rgba(1, 8, 40, .85); animation: monte .7s 1.7s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .35s, translate .35s; }
.toast.sort { opacity: 0; translate: 0 10px; }
.toast__ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--plein); color: var(--blanc); }
.toast__ic .ic { width: 17px; height: 17px; }

/* Apparition au défilement */
.r-cache { opacity: 0; translate: var(--rx0, 0) var(--ry0, 34px); }
.r-vu { opacity: 1; translate: 0 0; transition: opacity .85s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), translate .85s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }

/* Écrans d'exemple : inclinaison à la souris, puis contenu qui se joue à l'arrivée */
.ui { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.joue .lc { animation: pop .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.joue .lc:nth-of-type(1) { animation-delay: .25s; } .joue .lc:nth-of-type(2) { animation-delay: .4s; } .joue .lc:nth-of-type(3) { animation-delay: .55s; } .joue .lc:nth-of-type(4) { animation-delay: .7s; } .joue .lc:nth-of-type(5) { animation-delay: .85s; } .joue .lc:nth-of-type(6) { animation-delay: 1s; }
@keyframes pop { from { opacity: 0; scale: .82; } }
.plan__now { position: absolute; left: 46px; right: 0; top: 26px; z-index: 2; height: 2px; background: var(--err); animation: maintenant 16s ease-in-out infinite alternate; }
.plan__now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--err); }
@keyframes maintenant { to { top: calc(100% - 4px); } }
.joue .barre i { animation: remplir 1.5s .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes remplir { from { width: 0; } }
.joue li:nth-child(1) { --j: .3s; } .joue li:nth-child(2) { --j: .45s; } .joue li:nth-child(3) { --j: .6s; } .joue li:nth-child(4) { --j: .75s; } .joue li:nth-child(5) { --j: .9s; }
.joue .comp li, .joue .doss li, .joue .pay li { animation: glisse .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--j, .3s); }
.joue .tag { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--j, .3s) + .35s); }
@keyframes glisse { from { opacity: 0; translate: 18px 0; } }
.joue blockquote { animation: monte .7s 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.nb { font-style: normal; }
.insec { white-space: nowrap; }

/* Voyants : clignotement au repos */
.voyant__led.clignote { animation: voyant 1.3s ease-in-out; }
@keyframes voyant { 40% { scale: 1.12; box-shadow: inset 0 0 0 1px var(--c), 0 0 42px 6px color-mix(in srgb, var(--c) 75%, transparent); } }
.voyant:hover .voyant__led { scale: 1.1; }
.voyant__led { transition: box-shadow .5s, background-color .5s, opacity .5s, scale .25s; }

/* Jauge du parcours */
.cadran__val { animation: lueur 3.2s ease-in-out infinite; }
@keyframes lueur { 50% { filter: drop-shadow(0 0 24px rgba(25, 170, 255, .95)); } }
.etape { transition: background-color .4s, border-color .4s, scale .4s, box-shadow .4s; }
.etape.on { scale: 1.015; box-shadow: 0 20px 50px -24px rgba(25, 150, 255, .75); }

/* Petits gestes */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; }
.btn:hover::after { left: 120%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.hero__cta .btn--plein, .form .btn--plein { animation: appel 3.4s ease-in-out infinite; }
@keyframes appel { 50% { box-shadow: 0 10px 40px -4px rgba(40, 130, 255, .95); } }
.nav a:not(.nav__login) { position: relative; }
.nav a:not(.nav__login)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ciel); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:not(.nav__login):hover::after { transform: scaleX(1); }
.puce { transition: rotate .3s, scale .3s; }
.module:hover .puce { rotate: -6deg; scale: 1.08; }
.garanties li .ic { transition: scale .25s; }
.garanties li:hover .ic { scale: 1.2; }
.faq summary { transition: color .2s, padding-left .25s; }
.faq summary:hover { color: #9BD3FF; padding-left: 6px; }
:root { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height .35s ease, content-visibility .35s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.champ__err { animation: secoue .35s; }
@keyframes secoue { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* Responsive */
@media (max-width: 1280px) { .kpis strong { font-size: 18px; } }
@media (max-width: 1120px) {
  .nav a:not(.nav__login) { padding-inline: 8px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 56px 72px; }
  .hero h1 { font-size: clamp(40px, 7vw, 64px); max-width: 15em; }
  .grille-voyants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module { gap: 44px; }
  .parcours__in, .demo__in { gap: 48px; }
  .garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .burger { display: inline-flex; }
  .top__cta { margin-left: auto; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 12px max(24px, env(safe-area-inset-right, 0px)) 18px max(24px, env(safe-area-inset-left, 0px)); background: var(--nuit-f); }
  .nav.ouvert { display: flex; }
  .nav a, .nav a:not(.nav__login) { padding: 13px 10px; font-size: 16px; }
  .nav .nav__login { margin: 0; }
  .module, .module--inv { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 60px; }
  .module--inv .module__txt { order: 0; }
  .parcours__in { grid-template-columns: minmax(0, 1fr); padding-block: 76px 80px; gap: 16px; }
  /* Sur mobile, seule la jauge reste collée : le titre défile, et il reste de la place pour lire les étapes */
  .cadran { display: contents; }
  .cadran__svg { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 2; max-width: none; margin: 16px 0 8px; padding: 10px 16px 12px; border: 1px solid var(--verre-bord); border-radius: 16px; background: rgba(9, 28, 80, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .cadran__svg svg { width: 150px; margin-inline: auto; }
  .cadran__etape span { font-size: 20px; }
  .cadran__etape { font-size: 13px; bottom: 10px; }
  .etapes { padding-block: 8px 0; }
  .grille-roles { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq__in, .demo__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .voyants, .quotidien, .roles, .faq { padding-block: 76px; }
  .route-zone { padding-left: 42px; }
  .route { left: 0; width: 28px; top: 8px; bottom: 0; }
  .route__voiture { width: 18px; margin-left: -9px; }
  .demo__in { padding-block: 76px; }
}
@media (max-width: 680px) {
  .toast { left: 10px; bottom: -18px; font-size: 13px; }
  .plan__now { left: 38px; }
  body { font-size: 16px; }
  .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .hero__lead { font-size: 17px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__nav { display: none; }
  .grille-voyants { grid-template-columns: minmax(0, 1fr); }
  .voyant { padding: 22px 20px; }
  .ui { padding: 16px; }
  .garanties { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .etape { padding: 22px; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-right: 0; }
}
@media (max-width: 430px) {
  .top__in { gap: 10px; }
  .logo { gap: 7px; }
  .logo__g { width: 30px; height: 26px; }
  .logo img { height: 24px; }
  .btn--sm { padding: 0 11px; font-size: 13px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis div:last-child { grid-column: 1 / -1; }
  .app__bas { grid-template-columns: minmax(0, 1fr); }
  .plan { grid-template-columns: 38px repeat(3, minmax(0, 1fr)); column-gap: 4px; }
  .lc { padding: 6px; font-size: 12px; }
  .comp li { flex-wrap: wrap; }
  .comp span { flex-basis: calc(100% - 110px); }
  .pay__tot { grid-template-columns: minmax(0, 1fr); }
  .pay__tot div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
}
@media (max-width: 345px) {
  .top .btn--sm { display: none; }
}
@media print { .r-cache { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::details-content { animation: none !important; transition: none !important; }
  .plan__now { display: none; }
}