@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:200 700;font-display:swap;src:url("./hanken-latin.woff2") format("woff2")}

html{font-size:clamp(16px,min(1.0417vw,1.7778vh),23px)}
/* ═══ JETONS : noir par défaut, trois thèmes clairs au choix ═══ */
html{
  color-scheme:dark;
  --stage:#050607; --stage-2:#0a0c0f; --panel:#0d1013; --panel-2:#12161a;
  --stage-text:#f3f5f7; --stage-muted:#9ba2ab; --stage-line:rgba(255,255,255,.10); --stage-line-2:rgba(255,255,255,.16);
  --stage-accent:#8fb3dc; --logo-os:#477fc0; --lumiere:rgba(71,127,192,.24);
  --nav-glass:rgb(var(--glass-nav-dark-tint) / var(--glass-nav-dark-alpha)); --nav-border:var(--glass-nav-dark-border); --nav-text:#f3f5f7; --nav-reflet:var(--glass-nav-dark-specular);
  --menu-fond:#111418; --menu-survol:rgba(255,255,255,.07); --bouton-bord:rgba(255,255,255,.24);
  --plateau:rgba(255,255,255,.035); --plateau-bord:rgba(255,255,255,.09); --coeur-reflet:rgba(255,255,255,.07);
  --pilule-fond:rgba(255,255,255,.045); --pilule-bord:rgba(255,255,255,.10); --pilule-actif:rgba(255,255,255,.08);
  --btn-fond:#f3f5f7; --btn-texte:#050607; --btn-puits:#050607; --btn-puits-texte:#f3f5f7;
  --grain:.055;
  --ecran-ombre:0 0 0 1px rgba(255,255,255,.07),0 4.375rem 8.75rem -1.875rem rgba(0,0,0,.95);
  /* l'app de démonstration : thème glacier de MotorOS */
  --bg:#eef2f7; --card:#ffffff; --border:rgba(0,0,0,.12); --border-strong:rgba(0,0,0,.28);
  --text:#1d1d1f; --text-2:#5b6066; --accent:#477fc0; --accent-solid:#4175b2; --accent-text:#285482; --accent-bg:rgba(71,127,192,.075);
  --success:#429b75; --success-text:#246444; --success-bg:rgba(66,155,117,.1);
  --danger:#d96158; --danger-text:#963d36; --danger-bg:rgba(217,97,88,.1);
  --warning:#eba944; --warning-text:#855916; --warning-bg:rgba(235,169,68,.12);
  --violet:#9474bc; --violet-text:#5a3f7c; --violet-bg:rgba(148,116,188,.12);
  --atelier:#5856d6;
  --shadow-carte:0 1px 0.1875rem rgba(0,0,0,.05),0 0.375rem 1.125rem rgba(0,0,0,.08);
  --glass-tint:255 255 255; --glass-alpha:.62; --glass-border:rgba(0,0,0,.10); --glass-specular:rgba(255,255,255,.55);
  --papier:#ffffff; --papier-text:#1d1d1f; --papier-muted:#5b6066;
  --font:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(1rem,4.4vw,4rem);
  --section:clamp(7.5rem,13vw,12.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
html[data-palette="glacier"],html[data-palette="blanc"],html[data-palette="creme"]{
  color-scheme:light;
  --stage:#dfe6ef; --stage-2:#e7edf4; --panel:#eef2f7; --panel-2:#f5f8fb;
  --stage-text:#1d1d1f; --stage-muted:#5b6066; --stage-line:rgba(0,0,0,.10); --stage-line-2:rgba(0,0,0,.16);
  --stage-accent:#285482; --lumiere:rgba(71,127,192,.16);
  --nav-glass:rgb(var(--glass-nav-light-tint) / var(--glass-nav-light-alpha)); --nav-border:var(--glass-nav-light-border); --nav-text:#1d1d1f; --nav-reflet:var(--glass-nav-light-specular);
  --menu-fond:#ffffff; --menu-survol:rgba(0,0,0,.045); --bouton-bord:rgba(0,0,0,.18);
  --plateau:rgba(0,0,0,.03); --plateau-bord:rgba(0,0,0,.08); --coeur-reflet:rgba(255,255,255,.7);
  --pilule-fond:rgba(255,255,255,.62); --pilule-bord:rgba(0,0,0,.08); --pilule-actif:#ffffff;
  --btn-fond:#0c0e11; --btn-texte:#ffffff; --btn-puits:#ffffff; --btn-puits-texte:#0c0e11;
  --grain:.035;
  --ecran-ombre:0 0 0 1px rgba(0,0,0,.06),0 3.125rem 6.25rem -2.5rem rgba(21,32,48,.45),0 1.25rem 2.5rem -1.5rem rgba(21,32,48,.25);
}
html[data-palette="blanc"]{--stage:#f0f0f3;--stage-2:#f7f7f9;--panel:#ffffff;--panel-2:#f5f5f7;--bg:#ffffff;--card:#f5f5f7}
html[data-palette="creme"]{--stage:#ece5d9;--stage-2:#f2ece2;--panel:#faf7f2;--panel-2:#fffdf9;--bg:#faf7f2;--card:#ffffff}

/* ═══ BASE ═══ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--stage-line-2) var(--stage);overflow-x:clip}
body{margin:0;background:var(--stage);color:var(--stage-text);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;line-height:1.5;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
::selection{background:rgba(71,127,192,.45);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:0.1875rem}
.wrap{max-width:85rem;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icone{width:1em;height:1em;fill:currentColor;flex:0 0 auto}

/* ═══ BOUTONS : plein avec son puits carré, ou lien ═══ */
.btn{display:inline-flex;align-items:center;gap:1rem;height:3.375rem;padding:0 0.5rem 0 1.375rem;font-size:1rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;border:0;cursor:pointer;background:var(--btn-fond);color:var(--btn-texte);transition:transform .45s var(--ease),filter .3s}
.btn .puits{width:2.375rem;height:2.375rem;display:grid;place-items:center;font-size:1rem;background:var(--btn-puits);color:var(--btn-puits-texte);transition:transform .55s var(--ease)}
.btn:hover .puits{transform:translateX(0.1875rem)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.98)}
.btn-photo{background:#f3f5f7;color:#050607}
.btn-photo .puits{background:#050607;color:#f3f5f7}
.btn-accent{background:var(--accent-solid);color:#fff}
.btn-accent .puits{background:rgba(0,0,0,.24);color:#fff}
.btn-ligne{background:transparent;color:var(--stage-text);box-shadow:inset 0 0 0 1px var(--stage-line-2)}
.btn-ligne .puits{background:var(--plateau);color:var(--stage-text)}
.lien{display:inline-flex;align-items:center;gap:0.625rem;height:3.375rem;padding:0 0.25rem;font-size:1rem;font-weight:600;white-space:nowrap}
.lien .icone{transition:transform .5s var(--ease)}
.lien:hover .icone{transform:translateX(0.25rem)}
.lien-trait{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}

/* ═══ NAVIGATION : une île en verre, le prix et l'essai toujours là ═══ */
.nav{position:fixed;z-index:70;top:calc(0.75rem + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(77.5rem,calc(100% - 1.5rem));height:3.625rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;padding:0 0.5625rem 0 1.375rem;color:var(--nav-text);background:var(--nav-glass);-webkit-backdrop-filter:saturate(170%) blur(1.0625rem);backdrop-filter:saturate(170%) blur(1.0625rem);border:1px solid var(--nav-border);box-shadow:inset 0 1px 0 var(--nav-reflet),0 0.625rem 1.5rem -1rem rgba(0,0,0,.6)}
.marque{font-weight:700;font-size:1.1875rem;letter-spacing:-.02em;white-space:nowrap}
.marque b{font-weight:700;color:var(--logo-os)}
.nav-links{display:flex;justify-content:center;gap:1.625rem;font-size:0.875rem}
.nav-links a{opacity:.72;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-droite{display:flex;justify-content:flex-end;justify-self:end;align-items:center;gap:0.875rem}
.nav-connexion{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.875rem;font-weight:600;white-space:nowrap}
.palette-menu{position:relative}
.palette-menu summary{display:flex;align-items:center;justify-content:center;gap:.375rem;min-width:2.75rem;min-height:2.75rem;font-size:.8125rem;cursor:pointer;list-style:none}
.palette-menu summary::-webkit-details-marker{display:none}
.palette-choix{position:absolute;top:calc(100% + .75rem);right:0;width:14rem;padding:.75rem;color:var(--nav-text);background:var(--nav-glass);border:1px solid var(--nav-border);backdrop-filter:blur(1rem);box-shadow:var(--ecran-ombre)}
.palette-choix p{margin:0 0 .75rem;font-size:.875rem}
.palette-choix .themes{display:flex;justify-content:space-between;gap:.25rem}
.palette-choix .themes button{flex:0 0 2.75rem;width:2.75rem;height:2.75rem}
.nav-prix,.nav-prix-court{font-size:0.8125rem;opacity:.78;white-space:nowrap;color:inherit;text-decoration:none}
.nav-prix:hover,.nav-prix-court:hover{opacity:1}
.nav-prix-court{display:none}
.nav .btn{height:2.5rem;padding:0 0.3125rem 0 1rem;gap:0.75rem;font-size:0.875rem}
.nav .btn .puits{width:1.875rem;height:1.875rem;font-size:0.875rem}
.themes{display:flex;gap:0.4375rem;align-items:center}
.themes button{width:1.5rem;height:1.5rem;padding:0;border:1px solid rgba(127,127,127,.55);cursor:pointer}
.themes button[aria-pressed="true"]{outline:1.5px solid currentColor;outline-offset:2px}
.menu-btn{display:none;width:2.5rem;height:2.5rem;place-items:center;border:0;background:none;cursor:pointer;font-size:1.375rem}
.menu-mobile{position:fixed;z-index:69;top:calc(4.75rem + env(safe-area-inset-top,0px));left:0.75rem;right:0.75rem;display:flex;flex-direction:column;padding:0.375rem 1.25rem 1.125rem;color:var(--nav-text);background:var(--nav-glass);-webkit-backdrop-filter:saturate(170%) blur(1.0625rem);backdrop-filter:saturate(170%) blur(1.0625rem);border:1px solid var(--nav-border)}
.menu-mobile[hidden]{display:none}
.menu-mobile{max-height:calc(100dvh - 5.5rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
.menu-mobile a{padding:0.875rem 0;font-size:1.125rem;border-bottom:1px solid var(--stage-line)}
.menu-mobile .themes{padding-top:1.125rem;gap:0.875rem}
.menu-mobile .themes button{width:1.625rem;height:1.625rem}

.barre-bas{position:fixed;z-index:70;left:0.625rem;right:0.625rem;bottom:calc(0.625rem + env(safe-area-inset-bottom,0px));display:none;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;color:var(--nav-text);background:var(--nav-glass);-webkit-backdrop-filter:saturate(170%) blur(1.0625rem);backdrop-filter:saturate(170%) blur(1.0625rem);border:1px solid var(--nav-border);box-shadow:inset 0 1px 0 var(--nav-reflet);font-size:0.8125rem;line-height:1.3;transition:transform .5s var(--ease),opacity .4s}
.barre-bas>span{text-wrap:balance}
.barre-bas b{display:block;font-size:0.9375rem;font-weight:600}
.barre-bas .btn{height:2.75rem;padding:0 0.3125rem 0 0.875rem;gap:0.625rem;font-size:0.875rem}
.barre-bas .btn .puits{width:2.125rem;height:2.125rem}
.barre-bas.cachee{transform:translateY(140%);opacity:0}

/* ═══ OUVERTURE ET « VOICI MOTOROS » : une seule scène épinglée ═══ */
.ouverture{position:relative;background:var(--stage)}
.scene-pin{position:relative;height:100vh;height:100svh;min-height:35rem;overflow:hidden}
.photo-cadre{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;overflow:hidden;background:#000;transform-origin:50% 50%}
.photo-cadre img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.photo-voile{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.1) 16%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 48%,rgba(0,0,0,.72) 100%)}
.hero-txt{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);bottom:clamp(2.5rem,8vh,6rem);display:flex;flex-direction:column;gap:0.875rem;max-width:45rem;color:#fff}
.hero-txt h1{margin:0;font-size:clamp(3.5rem,7vw,6rem);font-weight:700;letter-spacing:-.045em;line-height:.95}
.hero-txt h1 b,.logo-mot b{font-weight:700;color:var(--logo-os)}
.logo-mot{font-weight:700;letter-spacing:-.04em;white-space:nowrap}
.titre-logo{display:block}
.hero-txt h1 .sous{display:block;margin-top:1rem;letter-spacing:-.005em;line-height:1.35}
.hero-txt .sous{margin:0;font-size:clamp(1.1875rem,1.7vw,1.5rem);font-weight:400;color:#eceef1}
.hero-txt .prix{margin:0;font-size:0.9375rem;font-weight:300;color:#d3d7dc}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem 1.375rem;margin-top:0.875rem}
.mq{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.mq > span{display:inline-block}
.intro{position:absolute;z-index:4;left:0;right:0;top:clamp(5.75rem,13vh,9.375rem);padding-inline:var(--gutter);text-align:center}
.intro h2{margin:0;font-size:clamp(2.5rem,5.2vw,4.75rem);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.intro p{margin:0.875rem auto 0;max-width:34em;font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;color:var(--stage-muted);text-wrap:balance}
.legendes{position:absolute;z-index:4}
.legende{opacity:0}
.legende h3{margin:0;font-size:clamp(1.5rem,2.3vw,2.125rem);font-weight:500;letter-spacing:-.02em;line-height:1.14;text-wrap:balance}
.legende p{margin:0.875rem 0 0;font-size:1.0625rem;font-weight:300;line-height:1.6;color:var(--stage-muted)}
.scene{position:absolute;z-index:3;left:50%;top:0;width:75rem;height:46.875rem;margin-left:-37.5rem;perspective:112.5rem}
.ecran{position:relative;width:75rem;height:46.875rem;transform-origin:50% 60%;will-change:transform}
.ecran-cadre{position:absolute;inset:0;z-index:1;border-radius:0.875rem;overflow:hidden;background:var(--bg)}
.cam{position:absolute;inset:0;transform-origin:0 0}
.ecran-plateau{position:absolute;inset:-0.875rem;z-index:0;border:0.8125rem solid var(--plateau);border-radius:1.625rem;outline:1px solid var(--plateau-bord);box-shadow:var(--ecran-ombre);pointer-events:none}
.tel .ecran-plateau{border-radius:3.25rem}
.balayage{position:absolute;left:-3%;right:-3%;top:0;height:0.1875rem;margin-top:-1.5px;z-index:9;pointer-events:none;visibility:hidden;opacity:0;background:linear-gradient(90deg,rgba(143,179,220,0),rgba(214,230,255,.95) 18%,#fff 50%,rgba(214,230,255,.95) 82%,rgba(143,179,220,0));box-shadow:0 0 1.375rem 0.375rem rgba(143,179,220,.75),0 0 5.625rem 1.5rem rgba(71,127,192,.5)}
.mode-large .legendes{left:var(--gutter);top:50%;transform:translateY(-50%);width:min(20rem,26vw)}
.mode-large .legende{position:absolute;left:0;top:0;transform:translateY(-50%)}
.mode-moyen .legendes,.mode-tel .legendes,.mode-moyen .intro,.mode-tel .intro{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(max(1.375rem,3vh) + var(--cta-reserve,0px));max-width:42.5rem;margin-inline:auto;padding:0}
.mode-moyen .legende,.mode-tel .legende{position:absolute;left:0;right:0;bottom:0}
.mode-moyen .legendes,.mode-moyen .intro{bottom:auto}
.mode-moyen .legende{top:0;bottom:auto}
.mode-moyen .legende,.mode-moyen .intro{text-align:center}
.mode-tel .intro,.mode-tel .legende{text-align:left}
.mode-moyen .intro h2,.mode-tel .intro h2{font-size:clamp(2.125rem,5vw,3rem)}
.mode-tel .scene{width:22.5rem;height:47.5rem;margin-left:-11.25rem;perspective:87.5rem}
.mode-tel .legende h3{font-size:1.3125rem}
.mode-tel .legende p{margin-top:0.5rem;font-size:0.9375rem}

/* ═══ L'APP DE DÉMONSTRATION (jetons @motoros/ds) ═══ */
.app{position:absolute;inset:0;color:var(--text);font-family:var(--font);font-size:0.875rem;background:var(--bg)}
.vue{position:absolute;left:0;right:0;top:0;bottom:4rem;padding:1.75rem 2rem 0}
.vue-alt{opacity:0}
#cam > .vue[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.app-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem}
.surtitre{font-size:0.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0 0 0.375rem}
.titre-page{margin:0;font-size:1.875rem;font-weight:300;letter-spacing:-.02em}
.titre-fiche{margin:0;font-size:2.25rem;font-weight:200;letter-spacing:-.02em}
.recherche{display:flex;align-items:center;gap:0.625rem;height:2.5rem;width:18.75rem;padding:0 0.875rem;background:var(--card);border:1px solid var(--border);color:var(--text-2);font-size:0.8438rem}
.btn-app{display:inline-flex;align-items:center;height:2.25rem;padding:0 0.875rem;font-size:0.8125rem;font-weight:600;background:var(--accent-solid);color:#fff;border:0;white-space:nowrap}
.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.875rem;margin-bottom:0.875rem}
.tuile{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-carte);padding:1rem 1.125rem}
.l{font-size:0.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);margin:0}
.tuile .v{font-size:1.875rem;font-weight:600;letter-spacing:-.02em;margin:0.5rem 0 2px}
.tuile .s{font-size:0.7812rem;color:var(--text-2);margin:0}
.colonnes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0.875rem}
.carte{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-carte)}
.carte-tete{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;border-bottom:1px solid var(--border)}
.puce{display:inline-block;font-size:0.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:0.25rem 0.5rem;white-space:nowrap}
.p-danger{color:var(--danger-text);background:var(--danger-bg)}
.p-succes{color:var(--success-text);background:var(--success-bg)}
.p-attente{color:var(--warning-text);background:var(--warning-bg)}
.p-accent{color:var(--accent-text);background:var(--accent-bg)}
.p-violet{color:var(--violet-text);background:var(--violet-bg)}
.p-neutre{color:var(--text-2);background:rgba(127,127,127,.12)}
.ligne{display:grid;grid-template-columns:0.625rem minmax(0,1fr) auto;gap:0.875rem;align-items:start;padding:0.875rem 1.125rem;border-bottom:1px solid var(--border);transition:opacity .3s}
.ligne:last-child{border-bottom:0}
.ligne i{width:0.5rem;height:0.5rem;margin-top:0.375rem;display:block}
.ligne b{display:block;font-size:0.9062rem;font-weight:600}
.ligne span{display:block;font-size:0.7812rem;color:var(--text-2);margin-top:2px}
.ligne em{font-style:normal;font-size:0.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:0.1875rem}
.activite .ligne{grid-template-columns:minmax(0,1fr)}
.fil{font-size:0.7812rem;color:var(--text-2);margin:0 0 0.625rem}
.dossier-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.125rem}
.ident{margin:0.25rem 0 0;font-size:0.8438rem;color:var(--text-2)}
.statut{position:relative;height:1.875rem;min-width:10.625rem}
.statut .puce{position:absolute;right:0;top:0;font-size:0.6875rem;padding:0.4375rem 0.625rem}
.dossier-grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0.875rem}
.champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.champ{padding:0.75rem 1.125rem;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.champ:nth-child(2n){border-right:0}
.champ.large{grid-column:span 2;border-right:0}
.champ .n{font-size:0.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.champ .n b{color:var(--accent);font-weight:700;margin-right:0.375rem}
.champ .val{display:block;font-size:1rem;font-weight:500;margin-top:0.25rem}
.contrat{position:relative;min-height:14.75rem}
.contrat .etat{position:absolute;inset:3rem 0 0 0;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:0.75rem}
.contrat .signe{opacity:0}
.motif{display:flex;gap:0.625rem;align-items:flex-start;font-size:0.9062rem}
.motif i{width:0.5rem;height:0.5rem;margin-top:0.375rem;flex:0 0 auto}
.rangs{display:grid;margin:0}
.rangs div{display:flex;justify-content:space-between;gap:1rem;padding:0.5625rem 0;border-bottom:1px solid var(--border);font-size:0.875rem}
.rangs div:last-child{border-bottom:0}
.rangs dd{margin:0;font-weight:600;white-space:nowrap}
.rangs .fort dd{color:var(--accent-text);font-size:1rem}
.couts{margin-top:0.875rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.couts div{padding:0.875rem 1.125rem;border-right:1px solid var(--border)}
.couts div:last-child{border-right:0}
.couts .v{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin:0.375rem 0 0}
/* v6 : états qui se remplacent sur place (statuts, réponses des partenaires) */
.bascule{display:inline-grid;justify-items:end;align-items:center}
.bascule > *{grid-area:1/1}
.bascule > :not(:first-child){opacity:0}
.statut-b .puce{font-size:0.6875rem;padding:0.4375rem 0.625rem}
.col-g,.col-d{display:grid;gap:0.875rem;align-content:start}
.note-ocr{font-size:0.75rem;color:var(--text-2);white-space:nowrap}
.rangs-carte{padding:0.25rem 1.125rem 0.5rem}
.doc-sous{margin:0 0 0.75rem;font-size:0.8125rem;color:var(--papier-muted)}
#v-depot .sig{width:9rem;height:2.5rem;margin-top:0.25rem}
.ok-b{position:relative}
.ok-v{position:absolute;inset:-1.5px;display:flex;align-items:center;justify-content:center;background:var(--success);color:#fff;opacity:0}
#vue-leasing .dossier-tete .btn-app{align-self:center}
.annonce-corps{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:0.875rem 1.125rem}
.annonce-photos{position:relative;display:grid;grid-template-columns:3.25rem 1.625rem;grid-template-rows:1.5rem 1.5rem;gap:0.1875rem}
.annonce-photos i{display:block;background:linear-gradient(135deg,#5d6b7a,#2b333c)}
.annonce-photos i:first-child{grid-row:span 2;background:linear-gradient(160deg,#8a97a6 0%,#3a4450 55%,#1e242b 100%)}
.annonce-photos span{position:absolute;left:0;bottom:-1.25rem;font-size:0.6875rem;color:var(--text-2);white-space:nowrap}
.annonce-txt b{display:block;font-size:0.9375rem;font-weight:600}
.annonce-txt span{display:block;font-size:0.7812rem;color:var(--text-2);margin-top:2px}
.annonce-txt strong{display:block;font-size:1.0625rem;font-weight:600;margin-top:0.375rem}
.vente-prix{font-size:0.875rem;font-weight:600}
.vente-contrat{padding:0.875rem 1.125rem;border-bottom:1px solid var(--border)}
.vente-l{display:flex;justify-content:space-between;align-items:flex-start;gap:0.75rem}
.vente-l b{display:block;font-size:0.9375rem;font-weight:600}
.vente-l small,.vente-sig small{display:block;font-size:0.7812rem;color:var(--text-2);margin-top:2px}
.vente-sig{margin-top:0.625rem}
.vente-sig .sig{width:10rem;height:2.875rem}
.vente-sig small{opacity:0}
.vente-titre{margin:0;padding:0.75rem 1.125rem 0.25rem;font-size:0.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.vente .canal{padding:0.625rem 1.125rem}
.vente .canal b{font-size:0.9062rem;font-weight:600}
/* v6 : la carte racontée reste nette, les autres s'effacent */
#vue-fiche .carte,#vue-contrat .carte,#vue-contrat .doc,#vue-leasing .carte{transition:opacity .45s var(--ease),box-shadow .45s var(--ease)}
.app[data-foc="1"] #vue-fiche .carte:not(#f-permis),.app[data-foc="2"] #vue-fiche .carte:not(#f-annonce){opacity:.32}
.app[data-foc="1"] #f-permis,.app[data-foc="2"] #f-annonce,.app[data-foc="3"] #f-partenaires,.app[data-foc="4"] #f-vente{box-shadow:0 0 0 2px var(--accent),var(--shadow-carte)}
.barre{position:absolute;left:0;right:0;bottom:0;height:4rem;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;padding:0 1.25rem;background-color:rgb(var(--glass-nav-light-tint) / var(--glass-nav-light-alpha));background-image:var(--glass-light-reflection);-webkit-backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-material-saturate));backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-material-saturate));border-top:1px solid var(--glass-nav-light-border);box-shadow:var(--glass-nav-light-shadow)}
.barre-g{display:flex;align-items:center;gap:0.75rem;font-size:0.8125rem;color:var(--text-2)}
.barre-g strong{color:var(--text);font-size:0.9375rem;font-weight:700;letter-spacing:-.01em}
.barre-g strong b{color:var(--logo-os);font-weight:700}
.barre-c{display:flex}
.barre-c > *{position:relative;display:flex;align-items:center;padding:0 0.9375rem;font-size:0.875rem;font-weight:500;color:var(--text-2);background:none;border:0;cursor:default}
.barre-c > .actif{color:var(--text)}
.barre-c > .actif::before{content:"";position:absolute;left:50%;top:0;width:1.5rem;height:2px;margin-left:-0.75rem;background:var(--accent)}
.barre-d{display:flex;justify-content:flex-end;align-items:center;gap:0.625rem}
.barre-d .ia{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:none;padding:0}
.barre-d .ia.actif{border-color:var(--accent);background:var(--accent-bg)}
.barre-d .creer{height:2.25rem;display:flex;align-items:center;padding:0 0.875rem;background:var(--accent-solid);color:#fff;font-size:0.8125rem;font-weight:600;border:0}
.ecran-modules .barre-c > button,.ecran-modules .barre-d .ia,.ecran-modules .creer,.ecran-modules .btn-app,.lien-app{cursor:pointer}
.ecran-modules .barre-c > button:hover{color:var(--text)}
.ecran-modules .btn-app:hover,.ecran-modules .creer:hover{filter:brightness(.92)}
.lien-app{background:none;border:0;padding:0}
.statusbar{display:none}
.g2{display:grid;gap:1.125rem}
.r13{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.r12{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.r115{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.r1115{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.r14{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.t-app{width:100%;border-collapse:collapse;font-size:0.875rem}
.t-app th{font-size:0.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);text-align:left;padding:0.625rem 0.875rem;border-bottom:1px solid var(--border)}
.t-app td{padding:0.75rem 0.875rem;border-bottom:1px solid var(--border);transition:background-color .25s}
.t-app tr:last-child td{border-bottom:0}
.t-app .num{text-align:right}
.t-app .sub{display:block;font-size:0.75rem;color:var(--text-2)}
.ecran-modules .t-app tbody tr:hover td{background:var(--accent-bg)}
.filtres{display:flex;gap:0.5rem;margin-bottom:0.875rem}
.filtres span{font-size:0.8125rem;padding:0.4375rem 0.75rem;border:1px solid var(--border);background:var(--card)}
.filtres span.on{border-color:var(--accent);color:var(--accent-text);background:var(--accent-bg)}
.doc{background:var(--papier);color:var(--papier-text);border:1px solid var(--border);box-shadow:var(--shadow-carte);padding:1.375rem 1.5rem}
.doc .doc-titre{margin:0 0 0.25rem;font-size:1.125rem;font-weight:600}
.doc .rangs div{border-bottom-color:rgba(0,0,0,.1)}
.sig{display:block;width:13.125rem;height:3.75rem;color:#2f5f9a}
.etapes{list-style:none;margin:0;padding:0 1.125rem}
.etapes li{display:grid;grid-template-columns:1.375rem minmax(0,1fr);gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid var(--border);font-size:0.875rem}
.etapes li:last-child{border-bottom:0}
.etapes .ok{width:1.125rem;height:1.125rem;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:0.6875rem;color:transparent;transition:background-color .3s,border-color .3s,color .3s}
.etapes .fait .ok{background:var(--success);border-color:var(--success);color:#fff}
.etapes small{display:block;color:var(--text-2);font-size:0.7812rem}
.planning{display:grid;grid-template-columns:5.625rem repeat(9,minmax(0,1fr));font-size:0.75rem}
.planning .h{color:var(--text-2);padding:0 0 0.375rem;border-bottom:1px solid var(--border)}
.planning .m{padding:0.75rem 0;border-bottom:1px solid var(--border);font-weight:600}
.planning .piste{position:relative;grid-column:2 / -1;border-bottom:1px solid var(--border);height:2.75rem}
.bloc{position:absolute;top:0.5rem;height:1.75rem;padding:0.3125rem 0.5rem;font-size:0.7188rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.barres{display:flex;align-items:flex-end;gap:0.625rem;height:10.625rem;padding:1rem 1.125rem 0}
.barres i{flex:1;background:var(--accent);transform-origin:bottom}
.barres i.cur{background:var(--accent-solid)}
.mois{display:flex;gap:0.625rem;padding:0.375rem 1.125rem 0.875rem;font-size:0.6875rem;color:var(--text-2)}
.mois span{flex:1;text-align:center}
.bulle{max-width:78%;padding:0.75rem 1rem;font-size:0.9062rem;line-height:1.5}
.bulle-q{margin-left:auto;background:var(--accent-solid);color:#fff}
.bulle-r{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-carte)}
.bulle-r p{margin:0 0 0.375rem}.bulle-r p:last-child{margin:0}
.canal{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;border-bottom:1px solid var(--border)}
.canal:last-child{border-bottom:0}
.canal small{display:block;font-size:0.7812rem;color:var(--text-2)}
.suggestions{display:flex;gap:0.5rem;flex-wrap:wrap}
.sugg{border:1px solid var(--border);background:var(--card);color:var(--text);font-size:0.8438rem;padding:0.5rem 0.75rem;cursor:pointer}
.sugg:hover{border-color:var(--accent)}
.app-toast{position:absolute;left:50%;bottom:5rem;z-index:5;transform:translate(-50%,0.625rem);max-width:40rem;width:max-content;padding:0.75rem 1.125rem;background:#1d1d1f;color:#fff;font-size:0.875rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.app-toast.visible{opacity:1;transform:translate(-50%,0)}
/* format téléphone */
.ecran.tel,.mod-ecran.tel{width:22.5rem;height:47.5rem}
.tel .ecran-cadre{border-radius:2.5rem}
.mod-ecran.tel .ecran-cadre{box-shadow:0 0 0 0.5rem #0d0f12,0 0 0 0.5625rem rgba(255,255,255,.1),0 3.125rem 5.625rem -1.875rem rgba(0,0,0,.8)}
.mod-ecran .ecran-cadre{box-shadow:var(--ecran-ombre)}
.tel .statusbar{position:absolute;left:0;right:0;top:0;height:2.125rem;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0.25rem 1.875rem 0;font-size:0.8125rem;font-weight:600;background:var(--bg);color:var(--text)}
.tel .statusbar i{position:relative;width:1.5rem;height:0.6875rem;border:1.5px solid currentColor;border-radius:0.1875rem;opacity:.85}
.tel .statusbar i::after{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:62%;background:currentColor;border-radius:1px}
.tel .vue,.tel .mvue{top:2.125rem;bottom:4.625rem;padding:0.875rem 1rem 0}
.tel .vue{overflow:hidden}
/* Sur le téléphone, une étape se lit seule ; la fiche complète reste visible sur ordinateur. */
.tel .app[data-foc="1"] #vue-fiche .carte:not(#f-permis),.tel .app[data-foc="2"] #vue-fiche .carte:not(#f-annonce){opacity:0;visibility:hidden}
.tel .app-tete{flex-direction:column;align-items:flex-start;gap:0.75rem;margin-bottom:0.875rem}
.tel .titre-page{font-size:1.5625rem}
.tel .titre-fiche{font-size:1.6875rem}
.tel .recherche{width:100%;height:2.375rem}
.tel .tuiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;margin-bottom:0.75rem}
.tel .tuile{padding:0.75rem 0.8125rem}
.tel .tuile .v{font-size:1.3125rem;margin:0.375rem 0 0}
.tel .tuile .s{display:none}
.tel .colonnes,.tel .dossier-grille,.tel .g2{grid-template-columns:minmax(0,1fr);gap:0.75rem}
.tel .activite,.tel .fil,.tel .planning-carte,.tel .ligne em,.tel .t-app .opt,.tel .suggestions{display:none}
.tel .ligne{padding:0.75rem 0.875rem;gap:0.625rem}
.tel .dossier-tete{flex-direction:column;align-items:flex-start;gap:0.625rem;margin-bottom:0.875rem}
.tel .statut{width:100%;min-width:0}
.tel .statut .puce{left:0;right:auto}
.tel .champ{padding:0.625rem 0.875rem}
.tel .champ .val{font-size:0.9375rem}
.tel .couts{grid-template-columns:repeat(2,minmax(0,1fr))}
.tel .statut-b{justify-items:start}
.tel .annonce-corps{grid-template-columns:auto minmax(0,1fr);row-gap:1.5rem}
.tel .annonce-corps .btn-app{grid-column:1 / -1;justify-self:start}
.tel .vente-sig .sig{width:8.5rem}
.tel .couts div{border-bottom:1px solid var(--border)}
.tel .couts div:nth-child(2n){border-right:0}
.tel .t-app td,.tel .t-app th{padding:0.625rem}
.tel .filtres{flex-wrap:wrap;gap:0.375rem}
.tel .filtres span{font-size:0.75rem;padding:0.375rem 0.5625rem}
.tel .doc{padding:1.125rem}
.tel .bulle{max-width:92%}
.tel .barre{display:flex;align-items:center;justify-content:space-around;height:4.625rem;padding:0 0.5rem 0.875rem;background-color:var(--bg)}
.tel .barre-g,.tel .barre-d .ia,.tel .barre-c > :nth-child(n+5){display:none}
.tel .barre-c,.tel .barre-d{display:contents}
.tel .barre-c > *{flex:1 1 0;justify-content:center;height:100%;padding:0;font-size:0.7188rem}
.tel .barre-c > :nth-child(3),.tel .barre-c > :nth-child(4){order:4}
.tel .barre-d .creer{order:3;flex:0 0 auto;position:relative;width:2.875rem;height:2.875rem;margin:0 0.375rem;padding:0;font-size:0;justify-content:center}
.tel .barre-d .creer::before,.tel .barre-d .creer::after{content:"";position:absolute;left:50%;top:50%;width:1rem;height:2px;background:#fff;transform:translate(-50%,-50%)}
.tel .barre-d .creer::after{transform:translate(-50%,-50%) rotate(90deg)}
.tel .app-toast{bottom:5.75rem;max-width:18.75rem;width:auto;font-size:0.8125rem}

/* ═══ CHAPITRES ═══ */
.sec-titre{margin:0;font-size:clamp(2.5rem,5.4vw,5rem);font-weight:600;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.sec-chapeau{margin:1.375rem 0 0;max-width:36em;font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;color:var(--stage-muted);text-wrap:pretty}


/* modules : pilules en verre et écran vivant */
.modules{background:var(--stage);padding-block:var(--section)}
.modules-tete{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:61.25rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.explo-plateau{padding:0.5rem;background:var(--plateau);border:1px solid var(--plateau-bord)}
.explo{position:relative;display:grid;grid-template-columns:minmax(16.25rem,20rem) minmax(0,1fr);gap:clamp(1.5rem,3.2vw,3.5rem);align-items:start;padding:clamp(1rem,3vw,2.75rem);background:var(--panel);box-shadow:inset 0 1px 0 var(--coeur-reflet)}
.explo-gauche{display:flex;flex-direction:column;gap:0.875rem;min-width:0}
.pilules{position:relative;display:flex;flex-direction:column;gap:0.625rem}
.pilule{position:relative;background:var(--pilule-fond);border:1px solid var(--pilule-bord);box-shadow:inset 0 1px 0 var(--coeur-reflet);transition:background-color .35s,border-color .35s}
.pilule:hover{background:var(--pilule-actif)}
.pilule.active{background:var(--pilule-actif);border-color:var(--stage-line-2)}
.pl-tete{display:flex;align-items:center;gap:0.875rem;width:100%;min-height:3.375rem;padding:0 1.125rem;border:0;background:none;cursor:pointer;text-align:left;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--stage-text);white-space:nowrap}
.pl-icone{position:relative;flex:0 0 auto;width:1.5rem;height:1.5rem;border:1.5px solid currentColor;transition:transform .55s var(--ease),background-color .35s,border-color .35s}
.pl-icone::before,.pl-icone::after{content:"";position:absolute;left:50%;top:50%;width:0.625rem;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:background-color .35s}
.pl-icone::after{transform:translate(-50%,-50%) rotate(90deg)}
.pilule.active .pl-icone{transform:rotate(135deg);background:var(--stage-text);border-color:var(--stage-text)}
.pilule.active .pl-icone::before,.pilule.active .pl-icone::after{background:var(--panel)}
.pl-plan{margin-left:auto;font-size:0.75rem;font-weight:600;color:var(--stage-accent)}
.pl-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.pilule.active .pl-corps{grid-template-rows:1fr}
.pl-in{overflow:hidden;min-height:0}
.pl-in > div{padding:0 1.125rem 1.125rem 3.5rem;opacity:0;transform:translateY(-0.375rem);transition:opacity .3s,transform .5s var(--ease)}
.pilule.active .pl-in > div{opacity:1;transform:none;transition-delay:.14s}
.pl-une{margin:0;font-size:1rem;color:var(--stage-text)}
.pl-quota{margin:0.375rem 0 0;font-size:0.875rem;color:var(--stage-muted)}
.pl-f{list-style:none;margin:0.75rem 0 0;padding:0;display:grid;gap:0.5rem;font-size:0.9062rem;color:var(--stage-muted)}
.pl-f li{display:flex;justify-content:space-between;gap:0.75rem}
.pl-f li small{font-size:0.7812rem;font-weight:600;color:var(--stage-accent);white-space:nowrap}
.pl-progres{position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .3s}
.pilule.active .pl-progres{opacity:1}
.pl-progres i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.lecture{flex:0 0 auto;align-self:flex-start;width:2.875rem;height:2.875rem;display:grid;place-items:center;font-size:0.875rem;border:1px solid var(--pilule-bord);background:var(--pilule-fond);cursor:pointer;color:var(--stage-text)}
.lecture .i-lire,.lecture.en-pause .i-pause{display:none}
.lecture.en-pause .i-lire{display:block}
.explo-scene{position:relative;perspective:100rem;min-width:0}
.mod-tilt{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.mod-ecran{position:absolute;top:0;left:0;width:75rem;height:46.875rem;transform-origin:0 0}
.mvue{position:absolute;left:0;right:0;top:0;bottom:4rem;padding:1.75rem 2rem 0;visibility:hidden}
.mvue.active{visibility:visible}
.explo-desc{display:none}
.explo-desc h3{margin:0;font-size:1.625rem;font-weight:600;letter-spacing:-.02em}
.explo-desc h3 small{margin-left:0.5rem;font-size:0.8125rem;font-weight:600;color:var(--stage-accent)}
.explo-desc .pl-une{margin-top:0.375rem;font-size:1.125rem}
.explo-desc .pl-f{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;font-size:0.9375rem}
.mod-note{margin:1.125rem 0 0;font-size:0.875rem;color:var(--stage-muted)}

/* photo : le cadre s'ouvre jusqu'au plein écran */
.photo{position:relative;background:var(--stage)}
.photo-pin{position:relative;height:100vh;height:100svh;min-height:32.5rem;overflow:hidden}
.photo-large{position:absolute;inset:0;overflow:hidden;background:#000}
.photo-large img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%;transform-origin:50% 60%}
.photo-large-voile{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.7) 100%)}
.photo-txt{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(2.5rem,9vh,6.25rem);max-width:50rem;color:#fff}
.photo-txt h2{margin:0;font-size:clamp(2.125rem,4.6vw,4.25rem);font-weight:600;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.photo-txt p{margin:0.875rem 0 0;font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;color:#e3e6ea}

/* règles suisses : des cartes qui s'empilent */
.regles{background:var(--stage);padding-block:var(--section) 0}
.regles-tete{margin-bottom:clamp(2.5rem,5vw,4rem)}
.pile{position:relative;padding-inline:var(--gutter);padding-bottom:12vh}
.carte-regle{position:sticky;top:calc(5.25rem + env(safe-area-inset-top,0px));max-width:77.5rem;margin:0 auto 6vh;transform-origin:50% 0}
.carte-regle::after{content:"";position:absolute;inset:0;background:var(--stage);opacity:var(--voile,0);pointer-events:none}
.carte-regle .plateau{padding:0.5rem;background:var(--plateau);border:1px solid var(--plateau-bord);background-color:var(--stage)}
.carte-regle .coeur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1.75rem,4.4vw,4rem);box-shadow:inset 0 1px 0 var(--coeur-reflet);background:var(--panel)}
.carte-regle:nth-child(even) .coeur{background:var(--panel-2)}
.gros{display:flex;align-items:flex-start;gap:.14em;margin:0;font-size:clamp(3.25rem,8.4vw,8.25rem);font-weight:600;letter-spacing:-.05em;line-height:.95;white-space:nowrap}
.gros .unite{margin-top:.34em;font-size:.3em;font-weight:500;letter-spacing:-.01em;color:var(--stage-muted)}
.gros .unite.apres{margin-top:0;align-self:flex-end;margin-bottom:.1em}
.carte-regle h3{margin:1.625rem 0 0;font-size:clamp(1.375rem,2vw,1.75rem);font-weight:500;letter-spacing:-.02em}
.carte-regle p.expl{margin:0.75rem 0 0;max-width:32em;font-size:1.0625rem;font-weight:300;line-height:1.6;color:var(--stage-muted)}
.carte-regle .ref{margin:1.125rem 0 0;font-size:0.875rem;font-weight:600;color:var(--stage-accent)}
.vignette{justify-self:stretch;width:100%;padding:0.5rem;background:var(--plateau);border:1px solid var(--plateau-bord)}
.vignette-in{background:var(--bg);color:var(--text);box-shadow:0 1.875rem 3.75rem -1.875rem rgba(0,0,0,.6);font-size:0.875rem}
.vignette-in .carte-tete{background:var(--card)}
.vignette-in .rangs{padding:0.25rem 1.125rem 0.75rem;background:var(--card)}
.qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:center;padding:1.25rem;background:var(--card)}
.qr-code{position:relative;width:9.375rem;height:9.375rem;background:#fff;padding:0.375rem}
.qr-code img,.qr-code canvas{display:block;width:100%!important;height:100%!important}
.qr-code::after{content:"";position:absolute;left:50%;top:50%;width:1.625rem;height:1.625rem;margin:-0.8125rem 0 0 -0.8125rem;background:#000 linear-gradient(#fff,#fff) 50% 50%/0.875rem 0.25rem no-repeat;box-shadow:0 0 0 0.1875rem #fff}
.qr-code::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:0.25rem;height:0.875rem;margin:-0.4375rem 0 0 -2px;background:#fff}
.qr small{display:block;font-size:0.7812rem;color:var(--text-2)}
.qr b{display:block;margin-top:0.375rem;font-size:1.375rem;font-weight:600;letter-spacing:-.01em}

/* terrain */
.preuve{background:var(--stage);padding-block:var(--section)}
.citation{margin:0;max-width:17em;font-size:clamp(2.25rem,4.8vw,4.625rem);font-weight:600;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.qui{margin:1.625rem 0 0;font-size:1rem;color:var(--stage-muted)}
.qui b{color:var(--stage-text);font-weight:600}
.preuve-bas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:clamp(1.25rem,3vw,3rem);align-items:end;margin-top:clamp(3.5rem,7vw,6rem)}
.preuve-bas b{display:block;font-size:clamp(2.875rem,5.4vw,5.25rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.preuve-bas span{display:block;margin-top:0.625rem;font-size:0.9375rem;color:var(--stage-muted)}
.preuve-bas p{margin:0;font-size:1rem;font-weight:300;line-height:1.6;color:var(--stage-muted)}

/* tarifs */
.tarifs{background:var(--stage-2);padding-block:var(--section)}
.tarifs-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.75rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.segment{position:relative;display:inline-flex;padding:0.25rem;background:var(--plateau);border:1px solid var(--plateau-bord)}
.segment button{position:relative;z-index:1;height:2.5rem;padding:0 1.25rem;border:0;background:none;cursor:pointer;font-size:0.9062rem;font-weight:600;color:var(--stage-muted);transition:color .35s}
.segment button[aria-pressed="true"]{color:var(--btn-texte)}
.segment-indic{position:absolute;top:0.25rem;bottom:0.25rem;left:0.25rem;width:0;background:var(--btn-fond);transition:transform .5s var(--ease),width .5s var(--ease)}
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem;align-items:stretch}
.formule{display:flex;flex-direction:column;gap:1rem;padding:2rem clamp(1.125rem,2.4vw,2.125rem) 2.125rem;background:var(--panel);box-shadow:inset 0 1px 0 var(--coeur-reflet);border:1px solid var(--stage-line)}
.formule-pro{background:var(--panel-2);border-color:#477fc0;box-shadow:inset 0 2px 0 #477fc0}
.f-haut{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem}
.formule h3{margin:0;font-size:clamp(1.75rem,2.6vw,2.375rem);font-weight:600;letter-spacing:-.035em;line-height:1}
.f-badge{font-size:0.8125rem;font-weight:600;color:var(--stage-accent);white-space:nowrap}
.f-pour{margin:0;min-height:3.1em;font-size:0.9688rem;color:var(--stage-muted);text-wrap:balance}
.f-prix{display:flex;align-items:baseline;gap:0.5rem;margin:0;min-height:5.25rem}
.f-prix .lien{font-size:1.0625rem;font-weight:600}
.f-prix .chf{font-size:1.125rem;font-weight:600;color:var(--stage-muted)}
.roule{display:inline-block;overflow:hidden;font-size:clamp(3.5rem,5.2vw,5.125rem);font-weight:600;letter-spacing:-.05em;line-height:1.02}
.roule b{display:block;font-weight:600}
.f-prix .mois{font-size:0.9375rem;color:var(--stage-muted)}
.f-prix .tiret{margin-left:-0.5rem;font-size:clamp(3.5rem,5.2vw,5.125rem);font-weight:600;letter-spacing:-.05em;line-height:1.02}
.f-facture{margin:-0.375rem 0 0;min-height:1.5em;font-size:0.8438rem;color:var(--stage-muted)}
.f-quotas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem 0.75rem;padding:1.25rem 0;border-top:1px solid var(--stage-line);border-bottom:1px solid var(--stage-line)}
.f-quotas b{display:block;font-size:1.75rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.f-quotas b.mot{font-size:1.375rem;line-height:1.27;letter-spacing:-.02em}
.f-quotas span{display:block;margin-top:0.3125rem;font-size:0.8125rem;color:var(--stage-muted)}
.f-points{list-style:none;margin:0;padding:0;display:grid;gap:0.625rem;font-size:0.9375rem}
.f-points li{display:flex;gap:0.625rem}
.f-points li::before{content:"";flex:0 0 auto;width:0.75rem;height:0.4375rem;margin-top:0.375rem;border-left:1.6px solid var(--stage-accent);border-bottom:1.6px solid var(--stage-accent);transform:rotate(-45deg)}
.f-points li.plus{font-weight:600}
.f-points li.plus::before{visibility:hidden}
.formule .btn{align-self:flex-start}
.comparer{margin-top:1.75rem}
.comparer-btn{display:inline-flex;align-items:center;gap:0.875rem;padding:0.75rem 0;border:0;background:none;cursor:pointer;font-size:1.0625rem;font-weight:600}
.table-scroll{overflow-x:auto;margin-top:1rem}
table.comp{width:100%;min-width:40rem;border-collapse:collapse;font-size:0.9375rem}
.comp th,.comp td{padding:0.8125rem 0.75rem 0.8125rem 0;border-bottom:1px solid var(--stage-line);text-align:left}
.comp thead th{font-size:0.875rem;font-weight:600}
.comp td:not(:first-child),.comp th:not(:first-child){text-align:center;width:17%}
.comp .grp td{padding-top:1.875rem;font-size:1.0625rem;font-weight:600;border-bottom-color:var(--stage-line-2)}
.oui{display:inline-block;width:0.75rem;height:0.4375rem;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.non{display:inline-block;width:0.625rem;height:1.5px;background:var(--stage-muted);vertical-align:middle;opacity:.6}
.q-icone{position:relative;flex:0 0 auto;width:1.125rem;height:1.125rem}
.q-icone::before,.q-icone::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .5s var(--ease)}
.q-icone::after{transform:rotate(90deg)}
.ouvert .q-icone::after{transform:rotate(0deg)}
.q-rep{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.ouvert > .q-rep{grid-template-rows:1fr}
.q-rep > div{overflow:hidden;min-height:0}

/* questions : titre épinglé à gauche, réponses lisibles d'un coup */
.faq{background:var(--stage);padding-block:var(--section)}
.faq-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,6.875rem);align-items:start}
.faq-gauche{position:sticky;top:7.5rem}
.faq-gauche p{margin:1.25rem 0 0;max-width:24em;font-size:1.0625rem;font-weight:300;color:var(--stage-muted)}
.faq-liste{display:grid;gap:0;border-top:1px solid var(--stage-line)}
.faq-liste details{border-bottom:1px solid var(--stage-line)}
.faq-liste summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.375rem 0;cursor:pointer;list-style:none}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary:hover h3{color:var(--stage-text)}
.faq-liste details[open] .q-icone::after{transform:rotate(0deg)}
.faq-liste details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq-liste details[open]::details-content{block-size:auto}
.faq-liste details p{margin:0 0 1.5rem}
.faq-liste h3{margin:0;color:var(--stage-text);font-size:clamp(1.1875rem,1.6vw,1.375rem);font-weight:600;letter-spacing:-.015em;line-height:1.3}
.faq-liste p{max-width:44em;font-size:1.0312rem;font-weight:300;line-height:1.65;color:var(--stage-muted)}

/* fin */
.fin{position:relative;min-height:94vh;overflow:hidden;background:#000;color:#fff;display:flex;align-items:flex-end}
.fin-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.fin::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.65) 100%)}
.fin-txt{position:relative;z-index:2;width:100%;max-width:85rem;margin:0 auto;padding:0 var(--gutter) clamp(3.5rem,11vh,7.5rem)}
.fin h2{margin:0;max-width:11em;font-size:clamp(2.625rem,6vw,5.75rem);font-weight:600;letter-spacing:-.045em;line-height:1;text-wrap:balance}
.fin p{margin:1.25rem 0 0;max-width:30em;font-size:clamp(1.0625rem,1.5vw,1.3125rem);font-weight:300;color:#dfe3e7}
.fin .actions{margin-top:2rem}

/* pied */
.pied{background:var(--stage);color:var(--stage-muted);font-size:0.875rem;padding-block:4.5rem 2.25rem;border-top:1px solid var(--stage-line)}
.pied-haut{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:2rem}
.pied .marque{color:var(--stage-text)}
.pied-haut p{margin:0.875rem 0 0;max-width:26em;line-height:1.6}
.pied nav{display:flex;flex-wrap:wrap;gap:0.75rem 1.625rem;font-size:0.9375rem;color:var(--stage-text)}
.pied nav a{opacity:.78}.pied nav a:hover{opacity:1}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.75rem 1.5rem;margin-top:3.5rem;padding-top:1.375rem;border-top:1px solid var(--stage-line);font-size:0.8125rem}
.pied-bas .legal{display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem}
.pied-themes{display:flex;align-items:center;gap:0.75rem;margin-top:1.375rem;font-size:0.8125rem}

/* ═══ APRÈS LA VENTE : quatre écrans en défilement horizontal ═══ */
.apres{position:relative;background:var(--stage)}
.apres-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.apres-tete{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:calc(6rem + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.apres-titre{margin:0;font-size:clamp(1.75rem,2.8vw,3rem);font-weight:600;letter-spacing:-.035em;line-height:1}
.apres-etapes{display:flex;gap:0.25rem;margin:0;padding:0;list-style:none}
.apres-etapes button{position:relative;padding:0.625rem 0.875rem;font:inherit;font-size:0.9375rem;color:var(--stage-muted);background:none;border:0;cursor:pointer;transition:color .3s}
.apres-etapes button::after{content:"";position:absolute;left:0.875rem;right:0.875rem;bottom:0.25rem;height:2px;background:var(--logo-os);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.apres-etapes button:hover{color:var(--stage-text)}
.apres-etapes .actif button{color:var(--stage-text)}
.apres-etapes .actif button::after{transform:scaleX(1)}
.apres-piste{display:flex;height:100%;width:400%;will-change:transform}
.apres-panneau{flex:0 0 25%;height:100%;display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,4.5rem);align-items:center;padding:calc(10rem + env(safe-area-inset-top,0px)) var(--gutter) 3.5rem}
.apres-txt h3{margin:0;font-size:clamp(1.75rem,2.6vw,2.75rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.apres-txt p{margin:1.125rem 0 0;max-width:28em;font-size:1.0625rem;font-weight:300;line-height:1.62;color:var(--stage-muted)}
.apres-txt .apres-plan{margin-top:1.25rem;font-size:0.875rem;font-weight:600;color:var(--stage-accent)}
.apres-scene{position:relative;height:100%;min-height:0}
.apres-ecran{position:absolute;left:0;top:50%;width:60rem;height:37.5rem;transform-origin:0 50%;transform:translateY(-50%)}
.apres-ecran .ecran-cadre{box-shadow:var(--ecran-ombre)}
.apres-ecran.tel{width:22.5rem;height:40rem}
.apres-ecran.tel .ecran-cadre{border-radius:2.5rem;box-shadow:0 0 0 0.5rem #0d0f12,0 0 0 calc(0.5rem + 1px) rgba(255,255,255,.1),0 3.125rem 5.625rem -1.875rem rgba(0,0,0,.8)}
.app-apres .vue{bottom:0;padding:1.5rem 1.75rem 0}
.tel .masque-tel{display:none}
.tuiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tva-rangs .case{display:inline-block;min-width:2.25rem;margin-right:0.5rem;font-size:0.75rem;font-weight:700;color:var(--accent-text)}
.tva-rangs .dont{font-size:0.8125rem;color:var(--text-2)}
.tva-rangs .dont dd{font-weight:500}
.ligne em{white-space:nowrap}
.ligne-neuve{position:relative}
.ligne-neuve::after{content:"";position:absolute;inset:0;background:var(--accent-bg);opacity:0;pointer-events:none}
.ligne-neuve.eclaire::after{animation:eclat 1.6s var(--ease) forwards}
@keyframes eclat{0%{opacity:0}25%{opacity:1}100%{opacity:.45}}
.btn-app-ligne{background:none;color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--border-strong)}
.analyse-bas{margin-top:0}
.barres-apres{height:8.5rem}
.bulle-ia{margin:0.875rem 1.125rem 1rem;padding:0.75rem 0.875rem;background:var(--accent-bg);font-size:0.8125rem;line-height:1.5}
.bulle-ia .q{margin:0;font-weight:600;min-height:1.25em}
.bulle-ia .r{margin:0.375rem 0 0;color:var(--text-2)}
.dictee-txt{margin:0;padding:1rem 1.125rem 1.25rem;font-size:1.0625rem;line-height:1.55;min-height:6.5rem}
.micro{display:inline-flex;align-items:center;gap:3px;height:1rem}
.micro i{display:block;width:3px;height:30%;background:var(--accent)}
.ecoute .micro i{animation:onde .9s ease-in-out infinite}
.ecoute .micro i:nth-child(2){animation-delay:.12s}.ecoute .micro i:nth-child(3){animation-delay:.24s}.ecoute .micro i:nth-child(4){animation-delay:.36s}.ecoute .micro i:nth-child(5){animation-delay:.48s}
@keyframes onde{0%,100%{height:30%}50%{height:100%}}
.devis td{padding:0.625rem 0.875rem}
.devis .total td{border-top:1px solid var(--border-strong)}
.planning-grand{position:relative;padding:0.75rem 1.125rem 1rem}
.pg-heures,.pg-ligne{display:grid;grid-template-columns:4.5rem minmax(0,1fr)}
.pg-heures{grid-template-columns:4.5rem repeat(10,minmax(0,1fr));font-size:0.6875rem;color:var(--text-2);padding-bottom:0.375rem;border-bottom:1px solid var(--border)}
.pg-ligne{align-items:center;border-bottom:1px solid var(--border);height:3.75rem}
.pg-ligne:last-of-type{border-bottom:0}
.pg-nom{font-size:0.875rem;font-weight:600}
.pg-piste{position:relative;height:2.625rem;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),var(--border) calc(10% - 1px),var(--border) 10%)}
.pg-bloc{position:absolute;top:0.25rem;bottom:0.25rem;display:flex;align-items:center;padding:0 0.625rem;overflow:hidden;white-space:nowrap;font-size:0.75rem;font-weight:600;color:#fff;background:var(--atelier)}
.pg-bloc.b-interne{background:var(--accent-solid)}
.pg-bouge{z-index:2;background:#9e5816}
.pg-cible{position:absolute;top:0.25rem;bottom:0.25rem;box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-bg);opacity:0}
.pg-curseur{position:absolute;z-index:3;left:0;top:0;width:1.375rem;height:1.375rem;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* ═══ SANS MOUVEMENT ═══ */
.statique .scene-pin{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column}
.statique .photo-cadre{position:relative;height:100vh;height:100svh;min-height:35rem}
.statique .photo-voile{height:100vh;height:100svh;min-height:35rem;bottom:auto}
.statique .intro{position:relative;top:0;padding-block:6rem 2rem}
.statique .scene{position:relative;left:auto;top:auto;margin:0 auto;width:100%;max-width:75rem;height:auto;perspective:none;padding-inline:var(--gutter);overflow:hidden}
.statique .ecran{transform-origin:0 0}
.statique .legendes{position:relative;display:grid;gap:2.25rem;max-width:40rem;margin:3rem auto 6rem;padding-inline:var(--gutter)}
.statique .legende{position:relative;opacity:1}
.statique .hero-txt{top:0;bottom:auto;height:100vh;height:100svh;min-height:35rem;justify-content:flex-end;padding-bottom:clamp(2.5rem,8vh,6rem)}
.statique .photo-cadre{order:0}.statique .intro{order:1}.statique .scene{order:2}.statique .legendes{order:3}
.statique .carte-regle{position:relative;top:0}
.statique .apres-pin{height:auto;overflow:visible}
.statique .apres-tete{position:relative;left:auto;right:auto;top:auto;margin-inline:var(--gutter);padding-top:4rem}
.statique .apres-piste{display:block;width:100%;height:auto;will-change:auto}
.statique .apres-panneau{height:auto;grid-template-columns:minmax(0,1fr);padding:3rem var(--gutter);scroll-margin-top:5rem}
.apres-compact .apres-piste{display:grid;width:100%;height:auto;will-change:auto}
.apres-compact .apres-panneau{grid-area:1 / 1;height:auto;grid-template-columns:minmax(0,1fr);padding:2rem var(--gutter) 3rem;align-content:start}
.apres-compact .apres-panneau[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.apres-compact .apres-etapes button{min-height:2.75rem}

@media (max-width:1099.98px){
  .apres-pin{height:auto;overflow:visible}
  .apres-tete{position:relative;left:auto;right:auto;top:auto;margin-inline:var(--gutter);padding-top:4rem}
  .apres-piste{display:block;width:100%;height:auto;will-change:auto}
  .apres-panneau{height:auto;grid-template-columns:minmax(0,1fr);padding:3rem var(--gutter);scroll-margin-top:5rem}
  .apres-etapes{width:100%;flex-wrap:wrap}
}

/* ═══ LARGEURS ═══ */
@media (max-width:1439.98px){.nav-prix,.nav-prix-court{display:none}.palette-menu summary>span{display:none}}
/* explorateur : les onglets en ligne au-dessus d'un grand écran, à toutes les largeurs */
.explo{grid-template-columns:minmax(0,1fr);align-items:stretch}
.explo-gauche{flex-direction:row;align-items:center}
.pilules{flex:1 1 auto;min-width:0;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:2px}
.pilules::-webkit-scrollbar{display:none}
.pilule{flex:0 0 auto}
.pl-tete{min-height:2.875rem;padding:0 0.875rem;gap:0.625rem;font-size:0.9688rem}
.pl-icone{width:1.25rem;height:1.25rem}
.pl-plan,.pl-corps{display:none}
.lecture{align-self:center}
.explo-desc{display:block}
@media (min-width:1100px){
  .explo-desc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);column-gap:3.5rem;align-items:start}
  .explo-desc h3,.explo-desc .pl-une,.explo-desc .pl-quota{grid-column:1}
  .explo-desc .pl-f{grid-column:2;grid-row:1 / span 3;margin-top:0.375rem}
}
@media (max-width:1099.98px){
  .nav{grid-template-columns:auto 1fr;gap:0.75rem}
  .nav-links{display:none}
  .menu-btn{display:grid}
  .preuve-bas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .preuve-bas p{grid-column:1 / -1}
}
@media (min-width:1100px){.menu-mobile{display:none}}
@media (max-width:899.98px){
  .formules{grid-template-columns:minmax(0,1fr)}
  .faq-grille{grid-template-columns:minmax(0,1fr)}
  .faq-gauche{position:relative;top:0}
  .carte-regle .coeur{grid-template-columns:minmax(0,1fr);min-height:0}
}
@media (max-width:600px){
  .nav{padding-left:.875rem;gap:.5rem}
  .nav-droite{gap:.375rem}
  .nav .btn{padding-right:0.3125rem}
  .nav .btn,.nav-prix-court{display:none}
  .barre-bas{display:flex}
  .hero-txt{bottom:2rem}
  .photo-voile{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 32%,rgba(0,0,0,.8) 62%,rgba(0,0,0,.92) 100%)}
  .btn{height:3.125rem;font-size:0.9375rem}
  .explo-desc .pl-f{grid-template-columns:minmax(0,1fr)}
  .preuve-bas{grid-template-columns:minmax(0,1fr)}
  .carte-regle{position:relative;top:auto;margin-bottom:1.125rem}
  .gros{font-size:clamp(2.75rem,13vw,4rem)}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* Le QR est volontairement non scannable dans la maquette. */
#qr-code{display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--border),var(--border) 2px,transparent 2px,transparent 8px);font-size:14px;color:var(--text)}
#qr-code::after{content:"DÉMONSTRATION — NON PAYABLE";background:var(--card);padding:10px;text-align:center}

/* tarifs : au téléphone, une formule à la fois */
.formule-choix{display:none}
.formule-choix button[aria-pressed="true"]{background:var(--btn-fond);color:var(--btn-texte)}
@media (max-width:899.98px){.formule-choix{display:flex;max-width:34rem;margin:0 0 1rem}.formule-choix button{flex:1}.formules .formule:not(.choisie){display:none}}
:root{interpolate-size:allow-keywords}

/* modules v7 : huit écrans qui ne répètent pas l'histoire */
.actions-app{display:flex;gap:0.5rem;align-items:center}
.p-indigo{color:#4745a8;background:rgba(88,86,214,.12)}
.canal-point{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.6875rem;font-weight:600;color:var(--text-2);white-space:nowrap}
.canal-point::before{content:"";width:0.5rem;height:0.5rem;background:var(--border-strong);transition:background-color .4s}
.canal-point.en-ligne{color:var(--success-text)}
.canal-point.en-ligne::before{background:var(--success)}
.rouge{color:var(--danger-text)}
.onglets{display:flex;gap:1.25rem;margin:0 0 0.875rem;border-bottom:1px solid var(--border);font-size:0.8125rem;color:var(--text-2);white-space:nowrap;overflow:hidden}
.onglets span{padding:0.5rem 0}
.onglets .on{color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.puces-rel{display:flex;gap:0.375rem;flex-wrap:wrap;justify-content:flex-end}
.apercu-mail{margin:0.5rem 1.125rem 1rem;padding:0.875rem 1rem;border:1px solid var(--border);background:var(--bg);font-size:0.8125rem;line-height:1.5}
.apercu-tete{margin:0 0 0.5rem;font-size:0.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.apercu-mail p{margin:0 0 0.625rem}
.lien-app{padding:0;border:0;background:none;font:inherit;font-size:0.75rem;font-weight:600;color:var(--accent-text);cursor:pointer;white-space:nowrap}
.lien-app:hover{text-decoration:underline}
.seg-app{display:inline-flex;border:1px solid var(--border-strong)}
.seg-app button{height:2.125rem;padding:0 0.875rem;border:0;background:none;font:inherit;font-size:0.75rem;font-weight:600;color:var(--text-2);cursor:pointer}
.seg-app button[aria-pressed="true"]{background:var(--accent-solid);color:#fff}
.mandat-crit{margin:0;padding:0.75rem 1.125rem;font-size:0.8125rem;color:var(--text-2);border-bottom:1px solid var(--border)}
.match{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.125rem 0.75rem;padding:0.75rem 1.125rem;border-bottom:1px solid var(--border)}
.match b{font-size:0.875rem}
.match span{grid-column:1;font-size:0.75rem;color:var(--text-2)}
.match em{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal}
#mandat .btn-app{margin:0.875rem 1.125rem 1rem}
.btn-app:disabled{opacity:.55;cursor:default}
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem}
.kb-col{display:flex;flex-direction:column;gap:0.5rem;min-height:13rem;padding:0.625rem;background:var(--card);border:1px solid var(--border)}
.kb-tete{display:flex;justify-content:space-between;margin:0 0 0.125rem;font-size:0.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.kb-carte{display:grid;gap:0.125rem;padding:0.625rem 0.75rem;background:var(--bg);border:1px solid var(--border)}
.kb-carte b{font-size:0.8125rem}
.kb-carte span{font-size:0.7188rem;color:var(--text-2)}
.kb-carte em{justify-self:start;margin-top:0.25rem;font-style:normal}
.kb-interne{border-style:dashed}
.qr-facture{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;margin-top:0.875rem;padding:0.875rem 1.125rem;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-carte)}
.qr-facture .qr-svg{display:block;width:5.25rem;height:5.25rem}
.qr-facture b{display:block;font-size:0.875rem}
.qr-facture span{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--text-2)}
.qr-facture strong{font-size:1.25rem;font-weight:600}
.releve td{vertical-align:middle}
.releve b{font-size:0.875rem}
.releve-pied{display:flex;justify-content:flex-end;padding:0.75rem 1.125rem;border-top:1px solid var(--border)}
.roles{display:flex;flex-wrap:wrap;gap:0.375rem;padding:0.875rem 1.125rem}
.roles button{height:2.125rem;padding:0 0.75rem;border:1px solid var(--border-strong);background:var(--bg);font:inherit;font-size:0.75rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:background-color .25s,color .25s}
.roles button[aria-pressed="true"]{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
.role-note{margin:0;padding:0 1.125rem 1rem;min-height:2.6em;font-size:0.8125rem;line-height:1.45;color:var(--text-2)}
.acces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.375rem;padding:0.875rem 1.125rem}
.acces span{display:flex;justify-content:space-between;gap:0.5rem;padding:0.5rem 0.625rem;font-size:0.75rem;font-weight:600;color:var(--text-2);border:1px solid var(--border);opacity:.42;transition:opacity .3s,background-color .3s,color .3s}
.acces span::after{content:"non";font-weight:400}
.acces span[data-n="1"]{opacity:1}
.acces span[data-n="1"]::after{content:"lecture"}
.acces span[data-n="2"]{opacity:1;color:var(--text);background:var(--accent-bg)}
.acces span[data-n="2"]::after{content:"écriture"}
.tel .kanban{grid-template-columns:minmax(0,1fr)}
.tel .kb-col{min-height:0}
.tel .kb-col:first-child{display:none}
.tel .qr-facture{grid-template-columns:auto minmax(0,1fr)}
.tel .qr-facture strong{grid-column:1 / -1}
.tel .onglets span:nth-child(n+4){display:none}
.tel .acces{grid-template-columns:minmax(0,1fr)}
.tel .actions-app .btn-app-ligne,.tel .puces-rel{display:none}

/* repère des quatre étapes de l'histoire */
.histoire-pas{position:absolute;z-index:5;display:flex;gap:0.25rem;margin:0;padding:0;list-style:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.histoire-pas.visible{opacity:1;visibility:visible}
.histoire-pas button{position:relative;padding:0.5rem 0.75rem;border:0;background:none;font:inherit;font-size:0.875rem;color:var(--stage-muted);cursor:pointer;transition:color .3s}
.histoire-pas button::after{content:"";position:absolute;left:0.75rem;right:0.75rem;bottom:0.1875rem;height:2px;background:var(--logo-os);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.histoire-pas button:hover,.histoire-pas button[aria-current="step"]{color:var(--stage-text)}
.histoire-pas button[aria-current="step"]::after{transform:scaleX(1)}
.mode-large .histoire-pas{left:calc(var(--gutter) - 0.75rem);top:calc(5.75rem + env(safe-area-inset-top,0px))}
.mode-moyen .histoire-pas,.mode-tel .histoire-pas{left:0;right:0;justify-content:center;top:calc(4.75rem + env(safe-area-inset-top,0px))}
.mode-tel .histoire-pas button{padding:0.5rem 0.5rem;font-size:0.8125rem}
.statique .histoire-pas{display:none}
.tel .annonce .carte-tete{flex-wrap:wrap;row-gap:0.375rem}


/* ═══ BARRE : liens sans cadre, comme les autres liens de la barre ; menus sur fond plein ═══ */
.nav-connexion{position:relative;font-weight:500;opacity:.88;transition:opacity .2s}
.nav-connexion:hover{opacity:1}
.nav-connexion::after{content:"";position:absolute;left:0;right:0;bottom:.75rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-connexion:hover::after{transform:scaleX(1)}
.palette-menu summary{gap:.5rem;font-size:.875rem;font-weight:500;opacity:.88;transition:opacity .2s}
.palette-menu summary:hover,.palette-menu[open] summary{opacity:1}
.icone-apparence{width:1.125rem;height:1.125rem;flex:0 0 auto}
.nav-connexion:focus-visible,.palette-menu summary:focus-visible,.menu-btn:focus-visible,.themes-ronds button:focus-visible{outline:2px solid var(--logo-os);outline-offset:3px}
.palette-choix{top:calc(100% + .75rem);right:-.5rem;width:auto;padding:1.125rem 1.25rem 1.25rem;background:var(--menu-fond);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--nav-border);box-shadow:0 1.5rem 3rem -1.25rem rgba(0,0,0,.6)}
.palette-choix p,.menu-bas .menu-titre{margin:0 0 1rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6;white-space:nowrap}
.themes.themes-ronds{display:grid;grid-template-columns:repeat(4,3.75rem);gap:.25rem;padding:0}
.themes.themes-ronds button{display:grid;justify-items:center;gap:.5rem;width:auto;height:auto;flex:none;padding:.25rem 0;border:0;outline:0;background:none;color:var(--nav-text);font:inherit;font-size:.75rem;cursor:pointer}
.themes.themes-ronds i{display:block;width:2.25rem;height:2.25rem;border-radius:50%;box-shadow:inset 0 0 0 1px var(--bouton-bord);transition:box-shadow .2s}
.themes.themes-ronds button:hover i{box-shadow:inset 0 0 0 1px var(--bouton-bord),0 0 0 3px var(--menu-fond),0 0 0 4px var(--bouton-bord)}
.themes.themes-ronds button[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px var(--bouton-bord),0 0 0 3px var(--menu-fond),0 0 0 5px var(--logo-os)}
.themes.themes-ronds button span{opacity:.72}
.themes.themes-ronds button[aria-pressed="true"] span{opacity:1;font-weight:600}
/* menu du téléphone : tout l'écran, les liens en grand, l'essai en bas ; la barre reste au-dessus avec sa croix */
.menu-mobile{top:0;left:0;right:0;bottom:0;width:auto;max-height:none;padding:calc(5.75rem + env(safe-area-inset-top,0px)) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom,0px));background:var(--stage);border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.menu-mobile>a{padding:.5rem 0;font-size:1.75rem;font-weight:600;letter-spacing:-.025em;border-bottom:0}
.menu-bas{margin-top:auto;display:grid;gap:1.25rem;padding-top:2rem}
.menu-bas .btn{height:3.25rem;justify-content:space-between;padding:0 .375rem 0 1.25rem;font-size:1rem}
.menu-bas .btn .puits{width:2.5rem;height:2.5rem}
.menu-connexion{justify-self:start;font-size:1.0625rem;font-weight:500}
.menu-bas .menu-titre{margin:.75rem 0 0}
.menu-bas .themes.themes-ronds{grid-template-columns:repeat(4,1fr);justify-items:start}
.menu-btn{color:var(--nav-text)}
.menu-btn .icone{width:1.25rem;height:1.25rem;fill:currentColor}
.menu-mobile .menu-bas a{border-bottom:0}
.menu-mobile .menu-connexion{padding:.25rem 0}

/* ═══ BARRE SUR LA PHOTO : transparente, texte blanc, sans le prix (l'accueil l'affiche déjà) ; le fond revient en quittant l'accueil ═══ */
.nav{transition:background-color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),-webkit-backdrop-filter .45s,backdrop-filter .45s}
.nav.sur-photo{color:#fff;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav.sur-photo .nav-links a{opacity:.86}
.nav.sur-photo .nav-links a:hover,.nav.sur-photo .nav-connexion,.nav.sur-photo .palette-menu summary{opacity:1}
.nav .nav-prix,.nav .nav-prix-court{max-width:17rem;overflow:hidden;transition:opacity .35s,max-width .45s var(--ease)}
.nav.sur-photo .nav-prix,.nav.sur-photo .nav-prix-court{max-width:0;opacity:0;pointer-events:none}
.nav.sur-photo .marque,.nav.sur-photo .nav-links a,.nav.sur-photo .nav-connexion,.nav.sur-photo .palette-menu summary,.nav.sur-photo .menu-btn{text-shadow:0 1px 12px rgba(0,0,0,.35)}
/* Couleurs : l'icône seule, le mot vit dans le menu */
.palette-menu summary>span{display:none}
.palette-menu summary{min-width:2.75rem;padding:0}
.icone-apparence{width:1.25rem;height:1.25rem}
/* le menu des couleurs s'ouvre en glissant d'un rien */
.palette-menu[open] .palette-choix{animation:choix-ouvre .22s var(--ease)}
@keyframes choix-ouvre{from{opacity:0;transform:translateY(-.375rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.palette-menu[open] .palette-choix{animation:none}}
/* un voile court derrière la barre, seulement quand elle est transparente : le texte se lit sur le ciel clair, la photo reste intacte */
.nav::before{content:"";position:absolute;z-index:-1;left:50%;top:calc(-0.75rem - env(safe-area-inset-top,0px));width:100vw;margin-left:-50vw;height:8.5rem;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.3) 45%,rgba(0,0,0,0));opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.nav.sur-photo::before{opacity:1}

/* ═══ LIQUID GLASS : capsules de verre, reflet qui suit le pointeur, ressort au survol et à l'appui ═══
   Approximation web du matériau d'Apple : flou et saturation de ce qui est derrière, reflet en haut,
   bord lumineux, ombre douce. Les boutons des écrans de démonstration (.btn-app) imitent l'app : ils ne changent pas. */
html{--ressort:cubic-bezier(.34,1.56,.64,1);--verre-flou:blur(16px) saturate(180%)}
.btn,.nav-connexion,.palette-menu summary,.menu-btn{position:relative;isolation:isolate;border-radius:999px;transition:transform .6s var(--ressort),box-shadow .3s,background-color .3s,filter .3s}
.btn::after,.nav-connexion::after,.palette-menu summary::after,.menu-btn::after{content:"";position:absolute;inset:0;left:0;right:0;top:0;bottom:0;height:auto;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(7rem circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.4),rgba(255,255,255,0) 62%);transform:none;opacity:.6;transition:opacity .3s}
.btn:hover,.nav-connexion:hover,.palette-menu summary:hover,.menu-btn:hover{transform:scale(1.035);filter:none}
.btn:hover::after,.nav-connexion:hover::after,.palette-menu summary:hover::after,.menu-btn:hover::after{opacity:1}
.btn:active,.nav-connexion:active,.palette-menu summary:active,.menu-btn:active{transform:scale(.96);transition-duration:.18s}
.btn .puits{border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:transform .6s var(--ressort)}
.btn:hover .puits{transform:translateX(.1875rem)}
.btn{padding-left:1.5rem}
/* bleu : EXACTEMENT le bleu du « OS » du logo (--logo-os), demande du propriétaire (29.09). Le verre tient dans les bords
   et un reflet léger en haut ; le corps du bouton reste #477fc0. Le reflet qui suit le pointeur n'apparaît qu'au survol. */
.btn-accent{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%),var(--logo-os);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.16),0 .75rem 1.75rem -.875rem rgba(71,127,192,.95)}
.btn-accent .puits{background:rgba(255,255,255,.2);color:#fff}
.btn-accent::after{opacity:0}
/* sur les photos : verre blanc dépoli, texte noir */
.btn-photo{color:#050607;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.8));-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.08),0 .875rem 2rem -1rem rgba(0,0,0,.7)}
.btn-photo .puits{background:#050607;color:#fff}
/* secondaire : verre clair */
.btn-ligne{color:var(--stage-text);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14)}
.btn-ligne .puits{background:rgba(255,255,255,.1);color:var(--stage-text)}
html[data-palette="glacier"] .btn-ligne,html[data-palette="blanc"] .btn-ligne,html[data-palette="creme"] .btn-ligne{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.09),0 .5rem 1.25rem -.875rem rgba(21,32,48,.4)}
html[data-palette="glacier"] .btn-ligne .puits,html[data-palette="blanc"] .btn-ligne .puits,html[data-palette="creme"] .btn-ligne .puits{background:#0c0e11;color:#fff}

/* barre : pastilles de verre pour Connexion, Couleurs et le menu */
.nav-connexion,.palette-menu summary,.menu-btn{height:2.5rem;min-height:0;color:inherit;opacity:1;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.14),0 .5rem 1.25rem -.625rem rgba(0,0,0,.5)}
.nav-connexion{padding:0 1.125rem;font-weight:600}
.palette-menu summary,.menu-btn{width:2.5rem;min-width:0;padding:0;place-items:center}
.palette-menu summary{display:grid}
.nav .btn{height:2.5rem;padding:0 .3125rem 0 1.125rem}
.nav .btn .puits{width:1.875rem;height:1.875rem}
html[data-palette="glacier"] .nav:not(.sur-photo) :is(.nav-connexion,.palette-menu summary,.menu-btn),
html[data-palette="blanc"] .nav:not(.sur-photo) :is(.nav-connexion,.palette-menu summary,.menu-btn),
html[data-palette="creme"] .nav:not(.sur-photo) :is(.nav-connexion,.palette-menu summary,.menu-btn){background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.08),0 .5rem 1.25rem -.75rem rgba(21,32,48,.35)}
/* la barre elle-même : une capsule de verre dès qu'on quitte la photo */
.nav{border-radius:999px;padding:0 .5625rem 0 1.625rem;border:0;background:rgb(var(--glass-nav-dark-tint) / var(--glass-nav-dark-alpha));-webkit-backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-material-saturate));backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-material-saturate));box-shadow:inset 0 1px 0 var(--glass-nav-dark-specular),inset 0 0 0 1px var(--glass-nav-dark-border),0 1rem 2.5rem -1.25rem var(--glass-dark-shadow-color)}
html[data-palette="glacier"] .nav,html[data-palette="blanc"] .nav,html[data-palette="creme"] .nav{background:rgb(var(--glass-nav-light-tint) / var(--glass-nav-light-alpha));background-image:var(--glass-light-reflection);box-shadow:var(--glass-nav-light-shadow)}
.nav.sur-photo,html[data-palette] .nav.sur-photo{background:transparent;background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* menu des couleurs : panneau de verre qui s'ouvre avec un ressort, depuis son bouton */
.palette-choix{border:0;border-radius:1.5rem;padding:1.125rem 1.25rem 1.25rem;background:rgb(var(--glass-panel-dark-tint) / var(--glass-panel-dark-alpha));-webkit-backdrop-filter:blur(var(--glass-panel-blur)) saturate(var(--glass-material-saturate));backdrop-filter:blur(var(--glass-panel-blur)) saturate(var(--glass-material-saturate));box-shadow:inset 0 1px 0 var(--glass-panel-dark-specular),inset 0 0 0 1px var(--glass-panel-dark-border),0 1.5rem 3rem -1rem var(--glass-panel-dark-shadow-color);transform-origin:calc(100% - 1.25rem) 0}
html[data-palette="glacier"] .palette-choix,html[data-palette="blanc"] .palette-choix,html[data-palette="creme"] .palette-choix{background:rgb(var(--glass-panel-light-tint) / var(--glass-panel-light-alpha));background-image:var(--glass-light-reflection);box-shadow:var(--glass-panel-light-shadow)}
.palette-menu[open] .palette-choix{animation:verre-ouvre .5s var(--ressort)}
@keyframes verre-ouvre{from{opacity:0;transform:scale(.88) translateY(-.375rem)}to{opacity:1;transform:none}}
.themes.themes-ronds i{transition:box-shadow .2s,transform .45s var(--ressort)}
.themes.themes-ronds button:hover i{transform:scale(1.08)}

/* menu du téléphone : un verre sur toute la page, qui floute ce qu'il y a derrière */
.menu-mobile{background:rgba(8,10,12,.56);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%)}
html[data-palette="glacier"] .menu-mobile,html[data-palette="blanc"] .menu-mobile,html[data-palette="creme"] .menu-mobile{background:rgba(250,250,252,.62)}
.menu-mobile:not([hidden])>a{animation:lien-entre .5s var(--ease) both}
.menu-mobile:not([hidden])>a:nth-child(2){animation-delay:.03s}.menu-mobile:not([hidden])>a:nth-child(3){animation-delay:.06s}.menu-mobile:not([hidden])>a:nth-child(4){animation-delay:.09s}.menu-mobile:not([hidden])>a:nth-child(5){animation-delay:.12s}
@keyframes lien-entre{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.menu-bas .btn{height:3.25rem}

/* barre du bas (téléphone) : capsule de verre */
.barre-bas{border-radius:999px;border:0;padding:.4375rem .4375rem .4375rem 1.25rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 1rem 2rem -1rem rgba(0,0,0,.7)}
.barre-bas .btn{height:2.75rem}

@media (max-width:639.98px){.nav{padding-left:1.125rem}.nav-connexion{height:2.75rem;padding:0 .875rem}.palette-menu summary,.menu-btn{width:2.75rem;height:2.75rem}}
@media (prefers-reduced-motion:reduce){.palette-menu[open] .palette-choix,.menu-mobile:not([hidden])>a{animation:none}.btn,.nav-connexion,.palette-menu summary,.menu-btn{transition:none}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.menu-mobile{background:var(--stage)}.palette-choix{background:var(--menu-fond)}}

/* ═══ PREMIÈRE IMAGE : l'histoire reste cachée jusqu'à son montage. Le hero, son prix et la photo sont
   lisibles dès le premier rendu ; l'animation améliore l'entrée sans conditionner l'accès au contenu. ═══ */
body:not(.statique) .scene-pin:not(.mode-large):not(.mode-moyen):not(.mode-tel) :is(.scene,.intro,.legendes,.histoire-pas){visibility:hidden}
/* aperçu flou du crépuscule sous la vraie photo : la page garde une image pendant son chargement */
.photo-cadre::before{content:"";position:absolute;inset:-4%;background:url("data:image/webp;base64,UklGRvACAABXRUJQVlA4WAoAAAAgAAAAJwAAFgAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggAgEAAJAGAJ0BKigAFwA+wU6gSqekIyGwGqqo8BgJQBfPbHigZ6sVj+MSXAnKdu7/tGQt0CR6jO7FkhTXM9DY5NAA/udjT6X/Ru8i5dgbZ2ZWYwHYirVLZpbjXGsciJPsFOZgLTvKndZL5kej+0Rz+TqyJB3xz55QyR64vGzmspd45yyCPKjnsS8HSWShCEAjtJ131LgQlObZMRQ9GW/yPx85H5QYDsf4xMy9wjUQIIlHAqdpszyc1nXFqOyX3G4nHDtUr2XdlL//Bpr7VKSCx5b2Gu2Xg6XeTYOHRqrL4p+ScOjxJ/HqRkkOk/lbhu8oJrrzwVgpOvQvm5D+r0uy5SI50xAAAA==") 62% 60%/cover no-repeat;filter:blur(1.5rem) brightness(.45);pointer-events:none}
.photo-cadre img{position:relative}

/* ═══ LIQUID GLASS, suite : les commandes de la page (sélecteurs, onglets, lecture, questions, pastilles) ═══
   Même matériau que les boutons : une piste de verre, un curseur plus lumineux qui glisse avec un ressort. */
html{--piste:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));--piste-bord:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.09);--pouce:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.12));--pouce-ombre:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.14),0 .375rem 1rem -.5rem rgba(0,0,0,.6)}
html:is([data-palette="glacier"],[data-palette="blanc"],[data-palette="creme"]){--piste:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.45));--piste-bord:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.07);--pouce:linear-gradient(180deg,#fff,rgba(255,255,255,.9));--pouce-ombre:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.06),0 .375rem 1rem -.5rem rgba(21,32,48,.45)}

/* sélecteur Annuel / Mensuel : piste de verre, curseur blanc qui glisse */
.segment{border:0;border-radius:999px;padding:.25rem;background:var(--piste);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:var(--piste-bord)}
.segment button{border-radius:999px}
.segment-indic{border-radius:999px;background:linear-gradient(180deg,#fff,#eef1f4);box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgba(0,0,0,.55);transition:transform .6s var(--ressort),width .6s var(--ressort)}
html:is([data-palette="glacier"],[data-palette="blanc"],[data-palette="creme"]) .segment-indic{background:linear-gradient(180deg,#1b1f24,#0c0e11);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 .375rem 1rem -.375rem rgba(0,0,0,.5)}
/* choix de formule (tablette, téléphone) et scènes du bureau : même piste, le choix en capsule claire */
.formule-choix button,.bureau-choix button,.bureau-fenetres-choix button{border-radius:999px;transition:background-color .3s,color .3s,box-shadow .3s,transform .5s var(--ressort)}
.formule-choix button[aria-pressed="true"]{background:linear-gradient(180deg,#fff,#eef1f4);color:#050607;box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgba(0,0,0,.55)}
html:is([data-palette="glacier"],[data-palette="blanc"],[data-palette="creme"]) .formule-choix button[aria-pressed="true"]{background:linear-gradient(180deg,#1b1f24,#0c0e11);color:#fff}

/* onglets des modules : capsules de verre, l'onglet ouvert plus lumineux */
.pilule{border:0;border-radius:999px;background:var(--piste);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:var(--piste-bord);transition:background .35s,box-shadow .35s,transform .5s var(--ressort)}
.pilule:hover{transform:translateY(-1px)}
.pilule.active{background:var(--pouce);box-shadow:var(--pouce-ombre)}
.pl-tete{border-radius:999px}
.lecture{border:0;border-radius:50%;background:var(--piste);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:var(--piste-bord);transition:transform .5s var(--ressort),background .3s}
.lecture:hover{transform:scale(1.06);background:var(--pouce)}

/* étapes de l'histoire et d'« Après la vente » : une piste de verre, l'étape en cours en capsule */
.histoire-pas,.apres-etapes{width:max-content;gap:.125rem;padding:.25rem;border-radius:999px;background:var(--piste);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:var(--piste-bord)}
.histoire-pas button,.apres-etapes button{border-radius:999px;padding:.5rem .95rem;transition:color .3s,background .35s,box-shadow .35s}
.histoire-pas button::after,.apres-etapes button::after{display:none}
.histoire-pas button[aria-current="step"],.apres-etapes .actif button{color:var(--stage-text);background:var(--pouce);box-shadow:var(--pouce-ombre)}
.mode-moyen .histoire-pas,.mode-tel .histoire-pas{left:50%;right:auto;transform:translateX(-50%)}
.mode-large .histoire-pas{left:var(--gutter)}
.mode-tel .histoire-pas button{padding:.4375rem .75rem}

/* « + » des questions et de la comparaison : une pastille ronde de verre */
.q-icone{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--piste);box-shadow:var(--piste-bord);transition:transform .5s var(--ressort),background .3s}
.q-icone::before,.q-icone::after{left:.6875rem;right:.6875rem}
summary:hover .q-icone,.comparer-btn:hover .q-icone{transform:scale(1.08);background:var(--pouce)}

/* pastilles de couleur du pied de page : rondes, comme dans le menu */
.pied .themes button{width:1.5rem;height:1.5rem;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px var(--bouton-bord);outline:0;transition:transform .45s var(--ressort),box-shadow .2s}
.pied .themes button:hover{transform:scale(1.12)}
.pied .themes button[aria-pressed="true"]{outline:0;box-shadow:inset 0 0 0 1px var(--bouton-bord),0 0 0 3px var(--stage),0 0 0 4.5px var(--logo-os)}

/* ═══ LOT 11 : prix entiers, ombres neutres, tablette debout, sélecteur à parts égales ═══ */
/* prix : le chiffre ne rétrécit jamais (un élément overflow:hidden a une largeur minimale de zéro en flex) ; « par mois TTC » passe à la ligne */
.f-prix{flex-wrap:wrap;row-gap:.125rem}
/* verre bleu : l'ombre reste une ombre, sans halo coloré */
.btn-accent{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.16),0 .75rem 1.75rem -.875rem rgba(0,0,0,.6)}
html:is([data-palette="glacier"],[data-palette="blanc"],[data-palette="creme"]) .btn-accent{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.16),0 .75rem 1.5rem -.875rem rgba(21,32,48,.45)}
/* Annuel / Mensuel : deux parts égales, le curseur glisse sans changer de largeur */
.tarifs-tete .segment{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr}
.segment-indic{transition:transform .6s var(--ressort)}
/* barre sur la photo : le prix masqué ne laisse pas un double espace avant « Demander l'essai » */
.nav.sur-photo .nav-prix,.nav.sur-photo .nav-prix-court{margin-right:-.875rem}
/* téléphone : ce qui défile sous l'heure s'efface en fondu au lieu d'être tranché net */
.tel .statusbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:1.25rem;background:linear-gradient(var(--bg),rgba(0,0,0,0));pointer-events:none}
/* tablette debout : le téléphone de l'histoire en plus grand, la légende centrée sous lui */
@media (min-width:640px){
  .mode-tel .scene,.mode-tel .ecran.tel{width:26rem;height:55rem}
  .mode-tel .scene{margin-left:-13rem}
  .mode-tel .intro,.mode-tel .legende{text-align:center}
  .mode-tel .legendes,.mode-tel .intro{max-width:36rem}
}

/* ═══ LOT 12 : les écrans suivent l'app ═══ */
.date-app{display:flex;align-items:center;gap:.625rem;margin:.25rem 0 0;font-size:.8125rem;color:var(--text-2)}
.date-app .ouvert{display:inline-flex;align-items:center;gap:.375rem}
.date-app .ouvert::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--success)}
.num-contrat{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:1.75rem;font-weight:400;letter-spacing:-.01em}
.tel .num-contrat{font-size:1.25rem}
/* au téléphone : la vraie barre du bas, Dashboard · Véhicules · Menu · Clients · Finances */
.barre-m{display:none}
.tel .barre-g,.tel .barre-c,.tel .barre-d{display:none}
.tel .barre-m{display:contents}
.tel .barre-m>span{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;height:100%;font-size:.7188rem;font-weight:500;color:var(--text-2)}
.tel .barre-m>.actif{color:var(--text)}
.tel .barre-m>.actif::before{content:"";position:absolute;left:50%;top:0;width:1.5rem;height:2px;margin-left:-.75rem;background:var(--accent)}
.tel .barre-m .m-menu i{display:grid;place-items:center;width:2.25rem;height:2.25rem;background:var(--accent-solid)}
.tel .barre-m .m-menu svg{width:.875rem;height:.875rem;fill:#fff}
/* planning : la semaine en colonnes, un mécanicien par ligne */
.pg-jours,.planning-grand .pg-ligne{display:grid;grid-template-columns:4.5rem repeat(5,minmax(0,1fr))}
.pg-jours{font-size:.6875rem;color:var(--text-2);padding-bottom:.375rem;border-bottom:1px solid var(--border)}
.pg-jours>span{padding-left:.5rem}
.pg-jours .auj{color:var(--accent-text);font-weight:600}
.planning-grand .pg-ligne{height:3.5rem;align-items:stretch}
.pg-case{position:relative;border-left:1px solid var(--border)}
.pg-case .pg-bloc{top:.3125rem;bottom:.3125rem;left:.3125rem;right:.3125rem;font-style:normal;text-overflow:ellipsis}
.pg-case .pg-cible{top:.3125rem;bottom:.3125rem;left:.3125rem;right:.3125rem}
.planning-grand .pg-nom{align-self:center}
.tel .pg-jours,.tel .planning-grand .pg-ligne{grid-template-columns:3.5rem repeat(3,minmax(0,1fr))}
.tel .pg-jours>:nth-child(2),.tel .pg-jours>:nth-child(3),.tel .planning-grand .pg-ligne>:nth-child(2),.tel .planning-grand .pg-ligne>:nth-child(3){display:none}
/* équipe : le chef d'atelier supprime les ordres de travail, rien d'autre (lib/permissions.ts) */
.acces span[data-n="3"]{opacity:1}
.acces span[data-n="3"]::after{content:"ordres de travail"}

/* ═══ LOT 13 : audit visuel ═══ */
/* petit téléphone : le téléphone de l'histoire moins haut, une légende plus compacte */
@media (max-width:639.98px) and (max-height:740px){
  .mode-tel .scene,.mode-tel .ecran.tel{height:40rem}
  .mode-tel .legende h3{font-size:1.125rem}
  .mode-tel .legende p{font-size:.875rem;line-height:1.5}
}
/* modules : l'onglet ouvert se reconnaît à sa capsule claire ; la progression court à l'intérieur */
.pl-icone{display:none}
.pl-tete{padding:0 1.125rem}
.pl-progres{left:1.125rem;right:1.125rem;bottom:.3125rem;border-radius:1px}
.explo-une{margin:0;min-height:1.6em;font-size:clamp(1rem,1.35vw,1.1875rem);font-weight:300;line-height:1.5;color:var(--stage-muted);text-wrap:balance}
@media (max-width:600px){
  .explo-gauche{flex-wrap:wrap}
  .pilules{flex-wrap:wrap;overflow:visible;gap:.5rem}
  .pl-tete{min-height:2.5rem;padding:0 .875rem;font-size:.875rem}
  .lecture{margin-left:auto}
  .explo-une{min-height:3em}
}
/* le ressort reste aux capsules ; les petites cibles bougent sans rebond */
.pilule{transition:background .35s,box-shadow .35s}
.pilule:hover{transform:none}
.lecture{transition:transform .35s var(--ease),background .3s}
.q-icone{transition:transform .35s var(--ease),background .3s}
.pied .themes button{transition:transform .35s var(--ease),box-shadow .2s}
.themes.themes-ronds i{transition:box-shadow .2s,transform .35s var(--ease)}
/* Living Racing : trois chiffres, la source dessous sur toute la largeur */
.preuve-bas{grid-template-columns:repeat(3,minmax(0,1fr))}
.preuve-bas p{grid-column:1 / -1;margin-top:.5rem}
/* accueil : le sous-titre ne laisse plus un mot seul sur sa ligne */
.hero-txt .sous{text-wrap:balance}
/* très grands écrans : une seule colonne de 85 rem pour tout ce qui est posé sur l'image ou épinglé */
@media (min-width:2000px){
  html{--colonne:calc(50vw - 42.5rem + var(--gutter))}
  .hero-txt,.photo-txt,.apres-tete{left:var(--colonne);right:var(--colonne)}
  .mode-large .legendes,.mode-large .histoire-pas{left:var(--colonne)}
  .apres-panneau{padding-left:var(--colonne);padding-right:var(--colonne)}
}

/* barre du téléphone : aussi dans l'écran des modules (boutons) */
.tel .barre-m>button{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;height:100%;padding:0;border:0;background:none;font:inherit;font-size:.7188rem;font-weight:500;color:var(--text-2);cursor:pointer}
.tel .barre-m>button.actif{color:var(--text)}
.tel .barre-m>button.actif::before{content:"";position:absolute;left:50%;top:0;width:1.5rem;height:2px;margin-left:-.75rem;background:var(--accent)}
.barre-c>span{cursor:default}
/* la phrase du module : au-dessus de l'écran dès la tablette, dans la description au téléphone — jamais deux fois */
@media (min-width:600.02px){.explo-desc .pl-une{display:none}}
@media (max-width:600px){
  .explo-une{display:none}
  .explo-gauche{flex-wrap:nowrap;align-items:flex-start}
  .pilules{flex:1 1 0}
  .lecture{margin-left:0;flex:none}
}

/* planning : un OT par jour, son client dessous ; des lignes assez hautes pour deux lignes de texte */
.planning-grand .pg-ligne{height:4.25rem}
.pg-case .pg-bloc{flex-direction:column;align-items:flex-start;justify-content:center;gap:.125rem;line-height:1.2}
.pg-bloc small{font-size:.6875rem;font-weight:500;opacity:.82}
.pg-bloc,.pg-bloc small{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ═══ LOT 14 : documents — l'écran « Copies chez Microsoft 365 » ═══ */
.note-copie{margin:0;padding:.75rem 1.125rem;border-top:1px solid var(--border);font-size:.75rem;line-height:1.5;color:var(--text-2)}
.copies-cat li small{display:block;margin-top:.125rem;font-size:.75rem;color:var(--text-2)}

/* tablettes aussi : les huit onglets passent à la ligne plutôt que d'être coupés contre le bouton pause */
@media (max-width:1099.98px){
  .explo-gauche{flex-wrap:nowrap;align-items:flex-start}
  .pilules{flex:1 1 0;flex-wrap:wrap;overflow:visible;gap:.5rem}
  .lecture{margin-left:0;flex:none}
}

/* ═══ VERRE : les mêmes replis que le verre de l'app (app/globals.css, .liquid-glass) ═══
   Sans flou, une surface translucide devient du texte posé sur une image : on la rend opaque.
   « Réduire la transparence » : opaque, sans flou. « Augmenter le contraste » : opaque, bord franc.
   Sur la photo de l'accueil, la barre reste transparente : elle a son voile. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav:not(.sur-photo),.barre-bas{background:var(--menu-fond)}
}
@media (prefers-reduced-transparency:reduce){
  .nav:not(.sur-photo),.nav-connexion,.palette-menu summary,.menu-btn,.btn-accent,.btn-photo,.btn-ligne,.palette-choix,.menu-mobile,.barre-bas,.segment,.pilule,.lecture,.histoire-pas,.apres-etapes,.bureau-choix,.bureau-fenetres-choix{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav:not(.sur-photo),.palette-choix,.menu-mobile,.barre-bas{background:var(--menu-fond)}
  .nav-connexion,.palette-menu summary,.menu-btn,.btn-ligne,.segment,.pilule,.lecture,.histoire-pas,.apres-etapes,.bureau-choix,.bureau-fenetres-choix{background:var(--panel-2)}
  .btn-photo{background:#fff}
  .btn-accent{background:var(--logo-os)}
}
@media (prefers-contrast:more){
  .nav:not(.sur-photo),.nav-connexion,.palette-menu summary,.menu-btn,.btn-accent,.btn-photo,.btn-ligne,.palette-choix,.menu-mobile,.barre-bas,.segment,.pilule,.lecture,.histoire-pas,.apres-etapes,.bureau-choix,.bureau-fenetres-choix{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav:not(.sur-photo),.palette-choix,.menu-mobile,.barre-bas{background:var(--menu-fond);box-shadow:inset 0 0 0 1.5px var(--stage-text)}
  .nav-connexion,.palette-menu summary,.menu-btn,.btn-ligne,.segment,.pilule,.lecture,.histoire-pas,.apres-etapes,.bureau-choix,.bureau-fenetres-choix{background:var(--panel-2);box-shadow:inset 0 0 0 1.5px var(--stage-text)}
  .btn-photo{background:#fff;box-shadow:inset 0 0 0 1.5px #050607}
  .btn-accent{background:#2f63a3;box-shadow:inset 0 0 0 1.5px #fff}
}

/* ═══ EXPLORATEUR À LA TAILLE DE LA FENÊTRE (29.09) ═══
   Fenêtre basse et large (portable, navigateur non plein écran) : l'écran prend la hauteur disponible sous la barre,
   le détail du module (nom, quota, fonctions) passe à sa droite. Posé par echelleModules() (classe .cote). */
.explo.cote{grid-template-columns:auto minmax(0,1fr);align-items:start}
.explo.cote>.explo-gauche,.explo.cote>.explo-une{grid-column:1 / -1}
.explo.cote>.explo-scene{grid-column:1}
.explo.cote>.explo-desc{grid-column:2;display:block;align-self:center}
.explo.cote .explo-desc .pl-f{grid-template-columns:minmax(0,1fr);margin-top:1.25rem}
.explo.cote .explo-desc h3{font-size:1.5rem}
.explo{row-gap:clamp(1.25rem,2.2vw,2.25rem)}

/* ═══ LANGUE (29.09) : la page existe en français, allemand, italien et anglais ═══
   Une capsule de verre « FR » à côté des couleurs, la même liste dans le menu du téléphone et au pied. */
.langue-menu summary>.langue-code{display:inline;font-size:.8125rem;font-weight:600;letter-spacing:.02em}
.langues{display:grid;gap:.125rem}
.langues a{display:block;padding:.5rem .75rem;border-radius:.625rem;font-size:.9375rem;white-space:nowrap;opacity:.78;transition:background-color .2s,opacity .2s}
.langues a:hover{opacity:1;background:var(--menu-survol)}
.langues a[aria-current="true"]{opacity:1;font-weight:600;background:var(--menu-survol)}
.langue-menu .palette-choix{min-width:11rem}
.menu-bas .langues{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:.25rem}
.pied-langues{display:flex;gap:.25rem}
.pied-langues .langues,.pied-langues{align-items:center}
.pied-langues a{padding:.25rem .5rem;border-radius:.5rem;font-size:.8125rem;opacity:.7}
.pied-langues a[aria-current="true"]{opacity:1;font-weight:600}
/* La langue reste accessible dans la barre, sans passer par le menu mobile. */
.nav .langue-menu{display:block}
@media (max-width:639.98px){.nav{padding-left:.875rem;gap:.375rem}.nav .marque{font-size:1.0625rem}.nav #palette-menu{display:none}.nav .langue-menu summary{width:2.75rem;min-height:2.75rem;padding:0;justify-content:center}.nav .langue-menu .palette-choix{right:-3.25rem}}

/* barre du bas (téléphone) : le prix en gras, la formule et l'essai dessous en plus petit ; sur un écran étroit, le prix seul
   (en allemand, la phrase entière passait sur quatre lignes à côté du bouton — 29.09) */
.barre-bas small{display:block;font-size:.75rem;line-height:1.3;opacity:.72}
@media (max-width:429.98px){.barre-bas small{display:none}.barre-bas b{font-size:.875rem;line-height:1.25}}

/* ═══ revue du 04.10 : la page sous tous les angles ═══ */
/* téléphone debout : la photo est en paysage ; en « cover », la voiture tombait sous le texte (on ne voyait que le
   ciel) et le navigateur prenait la version 1200 px, étirée ~3,8 fois sur un iPhone. La photo occupe le haut de
   l'écran, voiture entière au-dessus du titre, et se fond dans le noir où le texte se pose (`sizes` suit). */
@media (max-aspect-ratio:3/4){
  .photo-cadre img{height:64%;object-position:72% 50%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .photo-cadre::before{bottom:36%}
}
@media (max-aspect-ratio:3/4) and (max-height:700px){.photo-cadre img{height:52%}.photo-cadre::before{bottom:48%}}
/* téléphone couché, portable très bas : l'accueil tient dans la hauteur, prix et bouton d'essai compris */
@media (max-height:500px) and (orientation:landscape){
  .scene-pin{min-height:0}
  .hero-txt{bottom:1rem;gap:.5rem}
  .hero-txt h1{font-size:clamp(2.25rem,10vh,3rem)}
  .hero-txt h1 .sous{margin-top:.5rem;font-size:1.0625rem}
  .hero-txt .btn{height:2.75rem}
}
/* très grand écran : le titre s'arrête avant le nez de la voiture */
@media (min-width:1921px){.hero-txt h1{font-size:clamp(3.5rem,4.6vw,6rem)}}
/* un lien vers une section (#tarifs…) la pose sous la barre du haut, pas derrière */
html{scroll-padding-top:calc(5rem + env(safe-area-inset-top,0px))}
/* les trois chiffres de Living Racing : alignés par le haut ; sur téléphone, deux par ligne (une règle tardive
   remettait trois colonnes : « 900 m² » sortait de l'écran) */
.preuve-bas{align-items:start}
.preuve-bas sup{font-size:.42em;vertical-align:top;position:relative;top:.12em;margin-left:.04em}
@media (max-width:600px){.preuve-bas{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* « Škoda » : le Š n'est pas dans le sous-ensemble latin de Hanken Grotesk ; le navigateur le prenait dans une autre
   police (un glyphe d'une autre famille au milieu du nom). Sous-ensemble latin-ext de la même version (3.013, Google
   Fonts, licence OFL : HANKEN-OFL.txt), chargé seulement si la page en a besoin. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:200 700;font-display:swap;src:url("./hanken-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
/* le ✓ n'existe dans aucune police de la page : une coche dessinée, la même partout */
.ok svg{width:.625rem;height:.625rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* cadre des modules : un seul filet (le reflet intérieur doublait la bordure du plateau) */
.explo{box-shadow:none}