/* Collexion · site public et pages de compte
   Direction : « Regal Heritage » — bleu nuit, or, ivoire, encre. Titres Fraunces (SIL OFL), texte Source Sans 3.
   Conçu d'abord pour le téléphone (320 px et plus). */
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/SourceSans3-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/SourceSans3-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/SourceSans3-Semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/fonts/SourceSans3-It.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces-Italic-Variable.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --encre:#0A0D15;--nuit:#0B1424;--marine:#13233A;--marine-2:#1C3352;--ardoise:#425B6F;
  --or:#B8394F;--or-clair:#EEF1F4;--or-fonce:#7A1E2E;--champagne:#DCE4EE;--or-doux:#C9D2DD;--froid:#C9D5E2;--froid-2:#93A4B8;
  --ivoire:#EEF1F4;--ivoire-2:#E1E6EC;--fond:#F7F8FA;--surface:#FFFFFF;
  --texte:#121722;--texte-2:#5A6475;--ligne:#E1E5EA;--ligne-2:#C8CFD8;--alerte:#A2412A;
  /* bordeaux : mise en valeur des mots clés (aplat, trait de signature) */
  --bordeaux:#7A1E2E;--bordeaux-vif:#B8394F;
  --titre:"Fraunces",Georgia,"Times New Roman",serif;--police:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --marge:clamp(18px,5vw,80px);--max:1320px;--rayon:4px;--sect:clamp(44px,5.6vw,84px);--doux:cubic-bezier(.22,.61,.36,1);
  /* en-tête : une ligne (menu, logo, connexion), plus le chemin de la page sur les pages de secteur, d'activité et de plans */
  --tete-ligne:54px;--tete-h:54px
}
@media (min-width:960px){:root{--tete-ligne:60px;--tete-h:60px}}
.avec-fil{--tete-h:calc(var(--tete-ligne) + 28px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--tete-h)}
body{margin:0;background:var(--fond);color:var(--texte);font:400 17px/1.6 var(--police);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,figure,blockquote{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--marine-2);outline-offset:3px}
.sombre :focus-visible,.hero :focus-visible,.menu :focus-visible,.tete :focus-visible,.pied :focus-visible,.page-tete :focus-visible{outline-color:var(--froid)}
.evitement{position:absolute;left:12px;top:-60px;z-index:200;background:var(--marine);color:#fff;padding:10px 14px;border-radius:3px}
.evitement:focus{top:12px}
.c{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--marge)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typographie ---------- */
.label{display:inline-flex;align-items:center;gap:12px;font:600 12px/1.2 var(--police);letter-spacing:.2em;text-transform:uppercase;color:var(--ardoise)}
/* sur-titre : trait de signature rouge après le texte */
.label::after{content:"";width:28px;height:1.5px;border-radius:2px;background:var(--bordeaux)}
.sombre .label,.label--clair{color:var(--or-doux)}
.sombre .label::after,.label--clair::after{background:var(--bordeaux-vif)}
/* Titres droits : Fraunces à taille optique automatique (moins de contraste, dessin plus ferme), sans italique */
h1,h2,.titre{font-family:var(--titre);font-weight:420;font-optical-sizing:auto;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(38px,min(6.2vw,8.6svh),86px);line-height:1.03}
h2{font-size:clamp(29px,min(3.9vw,6.4svh),56px);line-height:1.06}
h1 em,h2 em,.titre em{font-style:normal;font-weight:680;color:inherit}
/* Mise en valeur, une fois par titre : mot clé sur aplat bordeaux, ou souligné d'un trait de signature */
/* .cle : surlignage bordeaux sur la moitié basse du mot (un peu plus), en gras ; plus clair sur fond clair pour rester lisible */
.cle{--marqueur:rgba(122,30,46,.3);font-weight:680;padding:0 .08em;margin:0 -.04em;background:linear-gradient(var(--marqueur),var(--marqueur)) no-repeat 0 86%/100% 54%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sombre .cle,.ouverture .cle,.final .cle,.offre-s .cle,.tete-s .cle,.page-tete .cle{--marqueur:var(--bordeaux)}
.trait{font-weight:680;padding-bottom:.06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C70 4 170 3 297 8' fill='none' stroke='%237A1E2E' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M40 14C110 10 190 10 262 12' fill='none' stroke='%237A1E2E' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat 0 100%/100% .26em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sombre .trait,.ouverture .trait,.final .trait{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C70 4 170 3 297 8' fill='none' stroke='%23C2475D' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M40 14C110 10 190 10 262 12' fill='none' stroke='%23C2475D' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E")}
/* à l'apparition : l'aplat se pose et le trait se dessine, de gauche à droite */
.js .rv .cle{background-size:0% 54%;transition:background-size .8s var(--doux) .3s}
.js .rv.vu .cle{background-size:100% 54%}
.js .rv .trait{background-size:0% .26em;transition:background-size 1s var(--doux) .35s}
.js .rv.vu .trait{background-size:100% .26em}
h3{font:600 19px/1.3 var(--police);letter-spacing:-.005em}
.intro{font-size:clamp(17px,1.5vw,20px);color:var(--texte-2);line-height:1.55;max-width:34em;text-wrap:pretty}
.sombre .intro{color:rgba(214,224,236,.76)}
.petit,.mention{font-size:14px;color:var(--texte-2)}
.mention{margin-top:24px}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 26px;border-radius:2px;border:1px solid var(--marine);background:var(--marine);color:#fff;font:600 13.5px/1.2 var(--police);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .2s,border-color .2s,color .2s}
.bouton:hover{background:var(--nuit);border-color:var(--nuit)}
/* Bouton principal : aplat clair sur fond sombre, bleu nuit sur fond clair, sans dégradé */
.bouton--or{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.bouton--or:hover{background:#fff;border-color:#fff;color:var(--nuit)}
.section:not(.sombre) .bouton--or,.total .bouton--or,.formulaire .bouton--or,.page-compte .bouton--or,.legal .bouton--or,.article .bouton--or{background:var(--marine);border-color:var(--marine);color:#fff}
.section:not(.sombre) .bouton--or:hover,.total .bouton--or:hover,.formulaire .bouton--or:hover,.page-compte .bouton--or:hover,.legal .bouton--or:hover,.article .bouton--or:hover{background:var(--nuit);border-color:var(--nuit)}
.bouton--verre{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.bouton--verre:hover{background:rgba(255,255,255,.08);border-color:#fff}
/* Bouton sans forme : texte souligné et flèche, lisible comme une action */
.bouton--texte{background:none;border-color:transparent;padding-inline:2px;color:inherit;position:relative}
.bouton--texte::after{content:"";position:absolute;left:2px;right:2px;bottom:12px;height:1px;background:currentColor;opacity:.5;transition:opacity .2s}
.bouton--texte:hover{background:none;border-color:transparent}
.bouton--texte:hover::after{opacity:1}
.section:not(.sombre) .bouton--texte,.clair .bouton--texte,.ivoire .bouton--texte{color:var(--marine)}
/* écrans clairs : bouton principal bleu nuit */
.clair .bouton--or,.ivoire .bouton--or{background:var(--marine);border-color:var(--marine);color:#fff}
.clair .bouton--or:hover,.ivoire .bouton--or:hover{background:var(--nuit);border-color:var(--nuit)}
.bouton--ligne{background:transparent;color:var(--marine);border-color:var(--ligne-2)}
.bouton--ligne:hover{background:var(--ivoire);box-shadow:none}
.bouton--plein{width:100%}
.bouton[disabled]{opacity:.6;cursor:progress}
.bouton .fl{transition:transform .25s var(--doux)}
.bouton:hover .fl{transform:translateX(3px)}
.lien{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--marine);text-decoration:none;border-bottom:1px solid var(--or);padding-bottom:2px;min-height:auto}
.lien::after{content:"→";transition:transform .25s var(--doux)}
.lien:hover::after{transform:translateX(4px)}
.sombre .lien,.lien--clair{color:var(--champagne)}
.essai-cta{display:inline-grid;justify-items:start;gap:8px}
.essai-mention{padding-left:4px}
.essai-mention{font-size:14px;color:var(--texte-2);display:inline-flex;align-items:center;gap:6px}
.essai-mention::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or-doux)}
.fleche-ronde{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--nuit);flex:none;transition:transform .3s var(--doux)}
.fleche-ronde svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Logo ---------- */
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marque img{width:22px;height:22px}
.marque span{font:500 13px/1 var(--police);letter-spacing:.34em;margin-right:-.34em}

/* ---------- En-tête : menu à gauche, logo centré, connexion à droite ---------- */
.tete{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background-color .35s,box-shadow .35s;padding-top:env(safe-area-inset-top)}
.tete-in{height:var(--tete-ligne);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
.tete.pleine,.sans-hero .tete{background:rgba(11,20,36,.94);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);box-shadow:0 1px 0 rgba(201,213,226,.14)}
.tete-gauche,.tete-droite{display:flex;align-items:center;gap:6px}
.tete-droite{justify-self:end}
.tete-liens{display:none}
.tete-liens a{font:500 13px var(--police);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.82);padding:10px 12px;border-radius:3px}
.tete-liens a:hover,.tete-liens a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.burger{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 6px;border:0;background:none;color:inherit;font:500 13px var(--police);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.burger-trait{position:relative;width:20px;height:1.5px;background:currentColor;border-radius:2px}
.burger-trait::before,.burger-trait::after{content:"";position:absolute;left:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--doux)}
.burger-trait::before{top:-6px;width:20px}.burger-trait::after{top:6px;width:13px}
.burger.ouvert .burger-trait{background:transparent}
.burger.ouvert .burger-trait::before{transform:translateY(6px) rotate(45deg)}
.burger.ouvert .burger-trait::after{width:20px;transform:translateY(-6px) rotate(-45deg)}
.burger-txt{display:none}
.tete-logo{justify-self:center}
.tete-logo span{display:none}
.tete-connexion{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font:500 13px var(--police);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff}
.tete-essai{display:none}
/* chemin de la page : une ligne discrète sous l'en-tête, qui suit la page */
.tete-fil{height:28px;border-top:1px solid rgba(201,213,226,.12);font:500 12px/1 var(--police);letter-spacing:.04em;color:rgba(214,224,236,.7)}
.tete-fil .c{height:100%;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap}
.tete-fil a{color:rgba(255,255,255,.86);text-decoration:none;flex:none}
.tete-fil a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tete-fil [aria-current]{color:#fff;overflow:hidden;text-overflow:ellipsis}
.tete-fil>.c>span[aria-hidden]{opacity:.55;flex:none}
.a-hero .tete:not(.pleine) .tete-fil{text-shadow:0 1px 6px rgba(0,0,0,.45)}
.tete-claire .tete:not(.pleine) .tete-fil{border-top-color:var(--ligne);color:var(--texte-2)}
.tete-claire .tete:not(.pleine) .tete-fil a{color:var(--marine)}
.tete-claire .tete:not(.pleine) .tete-fil [aria-current]{color:var(--texte)}

/* Menu plein écran */
.menu{position:fixed;inset:0;z-index:60;background:var(--nuit);color:#fff;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;animation:apparition .35s var(--doux);padding-bottom:env(safe-area-inset-bottom)}
.menu::after{content:"";position:absolute;inset:auto -20% -30% auto;width:80vmax;height:80vmax;background:radial-gradient(closest-side,rgba(110,140,170,.16),transparent);pointer-events:none}
.menu-tete{min-height:var(--tete-ligne);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:env(safe-area-inset-top) 14px 0}
.menu-tete .tete-connexion{justify-self:end}
.menu-liens{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:24px var(--marge);position:relative;z-index:1}
.menu-liens>a,.menu-univers>a{display:flex;align-items:baseline;gap:16px;font:300 clamp(34px,min(8vw,7svh),64px)/1.15 var(--titre);text-decoration:none;color:rgba(255,255,255,.88);padding:6px 0}
.menu-liens a small{font:600 12px var(--police);letter-spacing:.16em;color:var(--bordeaux-vif)}
.menu-liens a:hover,.menu-liens a[aria-current="page"]{color:#fff}
.menu-liens>a[aria-current="page"],.menu-univers>a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:10px;text-decoration-color:rgba(184,57,79,.6)}
/* pages de chaque univers, sous son nom, alignées sur le titre */
.menu-sous{display:flex;flex-wrap:wrap;gap:0 22px;margin:-4px 0 6px;padding-left:34px}
.menu-sous a{display:inline-flex;align-items:center;min-height:38px;font:500 12.5px var(--police);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:rgba(214,224,236,.66);border-bottom:1px solid transparent}
.menu-sous a[aria-current="page"]{color:#fff;border-bottom-color:rgba(184,57,79,.6)}
.menu-pied{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:20px var(--marge) 30px;border-top:1px solid rgba(201,213,226,.14);color:rgba(255,255,255,.7);font-size:14px}
@keyframes apparition{from{opacity:0}}

/* ---------- Ouverture de l'accueil : film de véhicules de collection en fond (trois quarts droits de la page sur
   ordinateur, plein cadre sur téléphone), fondu vers le texte ; fiche véhicule réelle au premier plan ---------- */
.ouverture{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;background:var(--nuit);color:#fff;padding-top:calc(var(--tete-h) + env(safe-area-inset-top))}
.hero-film{position:absolute;z-index:-1;inset:0;overflow:hidden;background:var(--encre)}
.diapo{position:absolute;inset:0;z-index:0}
.diapo.active{z-index:1}
.diapo.sortante{z-index:2;opacity:0;transition:opacity 1.6s var(--doux)}
.diapo video{width:100%;height:100%;object-fit:cover}
.hero-film::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.92) 36%,rgba(11,20,36,.62) 56%,rgba(11,20,36,.22) 76%,rgba(11,20,36,.6) 100%)}
.ouverture-corps{position:relative;flex:1;display:flex;align-items:flex-end}
.ouverture-texte{max-width:none}
.ouverture h1{margin-top:14px}
/* titre en deux lignes exactement : « Le copilote digital des » / « véhicules d'exception. » ; taille réglée sur la ligne la plus longue */
.titre-2l>span{display:block;width:max-content;max-width:100%;white-space:nowrap}
.ouverture .titre-2l{font-size:clamp(26px,min(8.2vw,8.4svh),78px)}
@media (min-width:1024px){.ouverture .titre-2l{font-size:clamp(40px,min(4.9vw,8.4svh),78px)}}
.ouverture-intro,.ouverture .hero-actions{max-width:640px}
/* type d'activité d'un écran : plus lisible que les autres sur-titres */
.scene-txt .label,.ecran-grille .label{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--marine)}
.sombre .scene-txt .label{color:var(--or-clair)}
.ouverture-intro{margin-top:clamp(12px,2svh,20px);font-size:clamp(17px,1.45vw,21px);line-height:1.45;color:rgba(226,232,240,.88);max-width:30em}
.ouverture-intro b{font-weight:600;color:#fff}
.ouverture .hero-actions{margin-top:clamp(18px,3.4svh,32px)}
.ouverture .essai-mention{color:rgba(255,255,255,.72)}
.ouverture-tel{display:none;margin:0}
.ouverture-tel figcaption{margin-top:10px;font-size:12px;text-align:center;color:rgba(214,224,236,.62)}
/* « Vous êtes » : accès direct à l'écran de chaque métier */
.metiers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:clamp(16px,3svh,28px);padding-bottom:calc(clamp(16px,3svh,28px) + env(safe-area-inset-bottom))}
.metiers>span{margin-right:8px;font:600 11px var(--police);letter-spacing:.18em;text-transform:uppercase;color:var(--or-doux)}
.metier{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.26);border-radius:40px;background:rgba(11,20,36,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:15px;font-weight:500;text-decoration:none;transition:border-color .2s,background-color .2s}
.metier:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* Collexion Estates : même ouverture, une photo au lieu du film */
.hero-film>img,.hero-film>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Signature d'un produit : « COLLEXION » en capitales, le produit en italique (Motors, Estates) ---------- */
.univers-marque{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;font:500 12px/1 var(--police);letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.univers-marque i{font:italic 400 clamp(22px,2vw,26px)/1 var(--titre);letter-spacing:0;text-transform:none;color:#fff}
.univers-marque--clair{color:var(--texte-2)}
.univers-marque--clair i{color:var(--nuit)}

/* ---------- Accueil, sur fond clair : en-tête bleu nuit, ouverture avec le vrai tableau de bord, bénéfices ---------- */
.tete-claire .tete,.tete-claire .tete .tete-connexion{color:var(--nuit)}
.tete-claire .tete.pleine{background:rgba(247,248,250,.94);box-shadow:0 1px 0 var(--ligne)}
.tete-claire .tete .tete-essai{background:var(--nuit);border-color:var(--nuit);color:#fff}
.tete-claire .tete :focus-visible{outline-color:var(--marine-2)}
.acc-ouv{position:relative;isolation:isolate;overflow:hidden;background:var(--fond);padding:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(28px,6svh,72px)) 0 clamp(28px,5svh,56px)}
.acc-ouv::before{content:"";position:absolute;z-index:-1;inset:-20% -10% auto auto;width:70vmax;height:70vmax;background:radial-gradient(closest-side,rgba(201,213,226,.55),transparent 70%)}
.acc-ouv-grille{display:grid;gap:clamp(30px,5svh,56px);align-items:center}
/* titre en trois lignes : « Tout pour piloter » / « votre activité, » / « au quotidien. » */
.acc-ouv h1{margin-top:16px;font-size:clamp(34px,min(4.4vw,7.6svh),66px)}
.acc-ouv h1>span{display:block;width:max-content;max-width:100%}
.acc-ouv .accroche{max-width:30em}
.acc-ouv .hero-actions{margin-top:clamp(20px,3.4svh,32px)}
.acc-ecrans{margin:0}
.acc-ecrans figcaption{margin-top:12px;font-size:12.5px;color:var(--texte-2);text-align:right}
.benefices{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:clamp(30px,6svh,64px);padding-top:clamp(20px,3svh,28px);border-top:1px solid var(--ligne)}
.benefices li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.35;color:var(--texte)}
.benefices svg,.capacites svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--marine);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1024px){
  .acc-ouv-grille{grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:clamp(36px,4vw,72px)}
  .benefices{grid-template-columns:repeat(4,minmax(0,1fr))}
  .benefices li+li{padding-left:20px;border-left:1px solid var(--ligne)}
}
/* titre à gauche, sous-texte à droite (ordinateur) */
.entete-duo{display:grid;gap:14px 56px;align-items:end;margin-bottom:clamp(24px,4svh,44px)}
.entete-duo .accroche{margin-top:0}
@media (min-width:960px){.entete-duo{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
/* trois solutions : photo, signature du métier, texte court, lien */
.solutions{display:grid;gap:clamp(28px,4vw,36px)}
.solution{display:flex;flex-direction:column;gap:12px}
.solution-media{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--marine)}
.solution-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux)}
.solution:hover .solution-media img{transform:scale(1.03)}
.solution .label{margin-top:8px;color:var(--texte)}
.solution-txt{font-size:16px;line-height:1.55;color:var(--texte-2);flex:1}
.solution .lien{align-self:flex-start}
@media (min-width:760px){.solutions{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* capacités de la plateforme : grille légère, séparée par de fins traits */
.capacites{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ligne-2)}
.capacites li{display:flex;gap:14px;padding:20px 14px 20px 0;border-bottom:1px solid var(--ligne)}
.capacites h3{font-size:16.5px}
.capacites p{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--texte-2)}
@media (max-width:599px){.capacites{grid-template-columns:1fr}.capacites li{padding-right:0}}
@media (min-width:960px){.capacites{grid-template-columns:repeat(4,minmax(0,1fr))}.capacites li{padding:24px 22px}.capacites li:nth-child(4n+1){padding-left:0}.capacites li:not(:nth-child(4n)){border-right:1px solid var(--ligne)}}
/* espace client synchronisé : un téléphone, à droite */
.relation .tel-seul{width:min(300px,64vw)}
.sombre .ecran-grille .label{color:var(--or-doux)}
@media (min-width:1024px){.relation{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.relation .tel-seul{width:min(300px,30svh)}}
/* appel final, sur fond clair */
.acc-final{min-height:0;padding-block:clamp(48px,8svh,88px)}
.acc-final-in{display:grid;gap:26px;align-items:end}
.acc-final h2{margin-top:12px;max-width:16em}
.acc-final .hero-actions{margin-top:0;align-items:center}
@media (min-width:960px){.acc-final-in{grid-template-columns:minmax(0,1fr) auto}}

/* ---------- Pages métiers : ouverture claire avec photo, quotidien, réponse, fonctions, relation client ---------- */
.met-ouv{position:relative;isolation:isolate;overflow:hidden;background:var(--fond);padding:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(22px,5svh,60px)) 0 clamp(36px,7svh,80px)}
.met-ouv::before{content:"";position:absolute;z-index:-1;inset:-20% -10% auto auto;width:70vmax;height:70vmax;background:radial-gradient(closest-side,rgba(201,213,226,.5),transparent 70%)}
.met-ouv-grille{display:grid;gap:clamp(28px,5svh,52px);align-items:center}
.met-ouv h1{margin-top:16px;font-size:clamp(34px,min(4.6vw,7.4svh),68px);max-width:12em}
.met-ouv .hero-actions{margin-top:clamp(20px,3.4svh,32px)}
.met-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--marine);box-shadow:0 40px 80px -50px rgba(11,20,36,.55)}
.met-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){.met-ouv-grille{grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr);gap:clamp(36px,4vw,72px)}}
/* fil d'Ariane : où l'on est, comment revenir */
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:18px;font-size:13.5px;color:var(--texte-2)}
.fil a{color:var(--marine);text-decoration:none;border-bottom:1px solid var(--ligne-2)}
.fil a:hover{border-bottom-color:var(--marine)}
.fil [aria-current]{color:var(--texte)}
.fil--clair{color:rgba(214,224,236,.72)}
.fil--clair a{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
.fil--clair [aria-current]{color:#fff}
/* quatre situations du quotidien */
.situations{list-style:none;display:grid;gap:clamp(18px,3vw,28px)}
.situations li{padding-top:18px;border-top:2px solid var(--ligne-2)}
.situations i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(122,30,46,.08);color:var(--bordeaux)}
.situations svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.situations h3{margin-top:14px;font-size:18px}
.situations p{margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--texte-2)}
@media (min-width:700px){.situations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.situations{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scene-lien{margin-top:clamp(16px,2.6svh,24px)}
/* titre en deux temps : la partie soulignée commence sa propre ligne */
.titre-lignes>span:first-child{display:block}
/* ce que le professionnel y gagne : trois lignes, sous les fonctions */
.gains{list-style:none;display:grid;gap:14px 28px;margin-top:clamp(24px,4svh,40px)}
.gains li{display:grid;gap:4px;padding-left:16px;border-left:2px solid var(--bordeaux)}
.gains b{font:420 clamp(19px,1.6vw,22px)/1.2 var(--titre);letter-spacing:-.01em}
.gains span{font-size:14.5px;color:var(--texte-2)}
@media (min-width:760px){.gains{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* plans d'une page métier : cartes empilées sur téléphone (aucun défilement de côté) */
@media (max-width:759px){.offres.offres--pile{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin-inline:0;padding:0}}
.offre-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.offre-points li{position:relative;padding-left:20px;font-size:15px;line-height:1.45;color:var(--texte-2)}
.offre-points li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;border-radius:2px;background:var(--bordeaux)}
.offre-points b{font-weight:600;color:var(--texte)}
.offre--phare .offre-points li{color:rgba(214,224,236,.84)}
.offre--phare .offre-points li::before{background:var(--bordeaux-vif)}
.offre--phare .offre-points b{color:#fff}
.offre-lien{margin-top:auto;padding-top:18px;align-self:flex-start}
.met-capture{margin:0}
.met-capture figcaption{margin-top:10px;font-size:12.5px;color:var(--texte-2);text-align:right}
.met-note{margin-top:22px;padding-left:14px;border-left:2px solid var(--bordeaux);font-size:15px;color:var(--texte-2);max-width:46em}
/* autres activités du secteur, retour à la solution */
.met-autres{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:clamp(28px,5svh,48px);padding-top:18px;border-top:1px solid var(--ligne-2);font-size:15px}
.met-autres>span{font:600 11.5px var(--police);letter-spacing:.18em;text-transform:uppercase;color:var(--texte-2)}
.met-autres>a:not(.lien){color:var(--marine);text-decoration:none;border-bottom:1px solid var(--ligne-2)}
.met-autres>a:not(.lien):hover{border-bottom-color:var(--marine)}
.met-autres .lien{margin-left:auto}

/* ---------- Écrans : chaque section occupe la hauteur comprise entre l'en-tête et le bas de l'écran ---------- */
.plein{position:relative;isolation:isolate;min-height:calc(100svh - var(--tete-h));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(28px,6svh,72px)}
.plein>.c{position:relative}
.clair{background:var(--fond)}
.ivoire{background:var(--ivoire)}
/* passage d'un écran sombre à un écran clair : fondu, sans arête */
.fondu-haut::after{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:clamp(48px,11svh,120px);background:linear-gradient(180deg,var(--nuit) 0%,rgba(11,20,36,.7) 16%,rgba(11,20,36,.36) 38%,rgba(11,20,36,.12) 64%,rgba(11,20,36,0) 100%)}
.plein .entete{margin-bottom:clamp(18px,3.6svh,36px)}
.accroche{margin-top:clamp(12px,2svh,18px);font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--texte-2);max-width:31em;text-wrap:pretty}
.sombre .accroche{color:rgba(214,224,236,.8)}
.points{list-style:none;margin:clamp(16px,3svh,28px) 0 0;padding:0;display:grid;gap:clamp(8px,1.5svh,14px)}
.points li{position:relative;padding-left:28px;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.45;color:var(--texte-2)}
.points li::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:2px;border-radius:2px;background:var(--bordeaux)}
.points b{font-weight:600;color:var(--texte)}
.sombre .points li{color:rgba(214,224,236,.78)}
.sombre .points li::before{background:var(--bordeaux-vif)}
.sombre .points b{color:#fff}

/* Un écran par métier : photo fondue dans le fond d'un côté, texte de l'autre, capture réelle au premier plan.
   Téléphone : la photo en bandeau, fondue vers le texte. */
.scene-s{justify-content:flex-start;padding-top:0}
.fond-photo{position:relative;overflow:hidden;flex:1 1 auto;min-height:clamp(170px,30svh,300px);max-height:44svh;margin-bottom:clamp(8px,2svh,20px)}
.fond-photo>img,.fond-photo>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fond-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.55) 28%,rgba(11,20,36,0) 60%),linear-gradient(180deg,rgba(11,20,36,.45) 0%,rgba(11,20,36,0) 30%)}
.scene-ecran{position:absolute;z-index:2;right:var(--marge);bottom:6px;width:min(26vw,13svh,140px)}
.scene-ecran--bureau{width:min(64vw,330px)}
.scene-txt{max-width:560px}
.scene-txt h2{margin-top:12px}
/* Captures de la plateforme : cadre de navigateur ou de téléphone */
.ecran{margin:0;background:#fff;overflow:hidden;border-radius:8px;box-shadow:0 44px 80px -42px rgba(4,8,16,.8),0 0 0 1px rgba(11,20,36,.08)}
.ecran img{width:100%;height:auto}
.ecran-barre{display:flex;align-items:center;gap:6px;height:24px;padding:0 10px;background:#E8ECF1;border-bottom:1px solid #D9DFE6}
.ecran-barre i{width:7px;height:7px;border-radius:50%;background:#C3CCD7}
.ecran-barre span{flex:0 1 46%;margin-left:12px;height:14px;padding:0 8px;border-radius:3px;background:#fff;font:500 9.5px/14px var(--police);letter-spacing:.02em;color:#8A95A5;white-space:nowrap;overflow:hidden}
.ecran--tel{padding:5px;border-radius:24px;background:var(--encre);box-shadow:0 44px 80px -36px rgba(4,8,16,.85),0 0 0 1px rgba(255,255,255,.08)}
.ecran--tel img{border-radius:19px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 22px;margin-top:28px}
.final .essai-mention{color:rgba(255,255,255,.78)}

/* ---------- Sections ---------- */
.section{padding-block:var(--sect)}
.section--ivoire{background:var(--ivoire)}
.sombre{background:var(--nuit);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.sombre::before{content:"";position:absolute;z-index:-1;inset:-30% auto auto -20%;width:70vmax;height:70vmax;background:radial-gradient(closest-side,rgba(66,91,111,.35),transparent 70%)}
.entete{max-width:46em;margin-bottom:clamp(20px,3vw,36px)}
.entete h2{margin-top:12px}
.entete .intro{margin-top:12px}
.entete--ligne{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;max-width:none}
.entete--ligne>div{max-width:40em}

/* Plateforme : deux téléphones décalés, téléphone seul */
.duo-tel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,22px);width:100%;max-width:520px;margin-inline:auto;padding-bottom:8%}
.duo-tel .ecran:last-child{transform:translateY(16%)}
.tel-seul{width:min(290px,72%);margin-inline:auto}
.mobile-app{display:grid;gap:clamp(32px,5vw,44px);align-items:center}
@media (min-width:960px){.mobile-app{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,6vw,96px)}}
/* Écran en deux colonnes (texte, visuel) : au quotidien, espace propriétaire, règlements, téléphone */
.ecran-grille{display:grid;gap:clamp(22px,4svh,40px);align-items:center}
.ecran-grille h2{margin-top:12px}
.ecran-grille .duo-tel{max-width:min(520px,62svh,78vw);padding-bottom:7%}
.ecran-grille .tel-seul{width:min(290px,40vw,22svh)}
.maquette--facture{max-width:520px;width:100%;justify-self:center}
/* en-tête de la plateforme : photo fondue en haut à droite, accès direct aux domaines */
.tete-s{padding-top:calc(var(--tete-h) + clamp(24px,5svh,56px));min-height:100svh}
.tete-s h1{margin-top:12px;max-width:12em}
.tete-s .metiers{padding-bottom:0}
/* passage d'un écran clair à un écran sombre */
.fondu-clair::after{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:clamp(40px,9svh,100px);background:linear-gradient(180deg,var(--ivoire) 0%,rgba(238,241,244,.55) 14%,rgba(238,241,244,.22) 36%,rgba(238,241,244,.06) 64%,rgba(238,241,244,0) 100%)}
.duo{position:relative;padding:0 16% 8% 0;width:100%;max-width:min(100%,96svh);justify-self:center}
.duo .ecran--tel{position:absolute;right:0;bottom:0;width:27%}
/* Plans en bref : trois cartes ; sur téléphone, elles défilent de côté */
.offres{display:grid;gap:12px}
.offre{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,30px);border-radius:8px;background:var(--surface);border:1px solid var(--ligne)}
.offre--phare{background:linear-gradient(165deg,#1C3352 0%,#101D32 100%);border-color:rgba(184,57,79,.55);color:#fff;box-shadow:0 40px 70px -50px rgba(11,20,36,.8)}
.offre h3{font:500 22px/1.2 var(--titre);letter-spacing:-.01em}
.offre-prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:10px}
.offre-prix b{font:440 clamp(38px,min(3.8vw,6svh),52px)/1 var(--titre);letter-spacing:-.02em;color:var(--marine)}
.offre-prix span{font-size:14.5px;color:var(--texte-2)}
.offre--phare .offre-prix b{color:#fff}
.offre--phare .offre-prix span{color:rgba(255,255,255,.7)}
.offre-txt{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--texte-2)}
.offre-txt b{font-weight:600;color:var(--texte)}
.offre--phare .offre-txt{color:rgba(214,224,236,.84)}
.offre--phare .offre-txt b{color:#fff}
.offre-liste{list-style:none;margin:10px 0 0;padding:0}
.offre-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--ligne);font-size:14.5px;color:var(--texte-2)}
.offre-liste li:first-child{border-top:0;padding-top:4px}
.offre-liste b{flex:none;font-weight:600;color:var(--texte);white-space:nowrap}
@media (max-width:759px){
  .offres{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--marge));padding:4px var(--marge) 8px;scroll-padding-inline:var(--marge)}
  .offres::-webkit-scrollbar{display:none}
  .offre{scroll-snap-align:start}
}
.flottant{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:4px;background:rgba(255,255,255,.94);color:var(--texte);box-shadow:0 18px 40px -20px rgba(0,0,0,.6);font-size:13px;line-height:1.3;animation:flotte 6s ease-in-out infinite}
.flottant b{display:block;font-weight:600}
.flottant small{color:var(--texte-2)}
.flottant i{display:grid;place-items:center;width:30px;height:30px;border-radius:3px;background:var(--marine);color:#fff;flex:none}
.flottant i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes flotte{50%{transform:translateY(-5px)}}

/* Aperçu de la plateforme : maquettes */
.apercu{position:relative;display:grid;gap:20px}
.maquette{background:var(--surface);border-radius:6px;box-shadow:0 40px 80px -50px rgba(11,20,36,.55),0 0 0 1px rgba(11,20,36,.06);overflow:hidden;font-size:13px;color:var(--texte)}
.mq-app{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:360px}
.mq-nav{background:var(--nuit);color:rgba(255,255,255,.7);padding:14px 0 14px 10px;display:grid;align-content:start;gap:2px}
.mq-nav .mq-logo{display:flex;align-items:center;gap:8px;color:#fff;padding:0 6px 14px;font:500 11px var(--police);letter-spacing:.28em}
.mq-nav .mq-logo img{width:18px;height:18px}
.mq-nav span{display:block;padding:7px 10px;border-radius:3px 0 0 3px;font-size:12px}
.mq-nav span.on{background:var(--ivoire);color:var(--marine);font-weight:600;box-shadow:inset 2px 0 0 var(--marine-2)}
.mq-nav small{display:block;padding:10px 10px 2px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.mq-corps{background:var(--ivoire);padding:16px;display:grid;gap:10px;align-content:start}
.mq-hero{border-radius:4px;padding:14px 16px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,rgba(110,140,170,.3),transparent 50%),linear-gradient(135deg,var(--marine),var(--nuit));display:grid;gap:10px}
.mq-hero small{color:var(--or-clair);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.mq-hero strong{font:300 22px var(--titre)}
.mq-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mq-kpis div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:8px 10px}
.mq-kpis b{display:block;font:400 20px var(--titre);color:#fff}
.mq-kpis span{font-size:10px;color:rgba(255,255,255,.7)}
.mq-carte{background:#fff;border-radius:4px;padding:10px 12px;box-shadow:0 1px 0 rgba(11,20,36,.05)}
.mq-carte>b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);margin-bottom:4px}
.mq-l{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #EFEAE1}
.mq-l:first-of-type{border-top:0}
.mq-l img{width:40px;height:30px;border-radius:3px;object-fit:cover}
.mq-l span{flex:1;min-width:0}
.mq-l em{font-style:normal;font-size:11px;color:var(--texte-2);display:block}
@media (max-width:599px){
  .mq-app{grid-template-columns:minmax(0,1fr);min-height:0}
  .mq-nav{display:none}
  .mq-corps{padding:12px}
  .mq-kpis{gap:6px}
  .mq-kpis div{padding:7px 8px;min-width:0}
  .mq-kpis b{font-size:18px}
  .mq-kpis span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.pastille{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:3px;background:#E6EDF4;color:var(--marine);white-space:nowrap}
.pastille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pastille--or{background:#F5ECDD;color:#8A6A33}
.pastille--alerte{background:#F6E4DD;color:var(--alerte)}
.telephone{width:min(300px,100%);margin-inline:auto;border-radius:34px;padding:8px;background:var(--encre);box-shadow:0 40px 80px -40px rgba(11,20,36,.7)}
.telephone .maquette{border-radius:27px;box-shadow:none}
.tel-tete{background:var(--nuit);color:#fff;padding:14px 14px 12px;display:flex;align-items:center;justify-content:space-between}
.tel-tete img{width:18px;height:18px}
.tel-corps{background:var(--ivoire);padding:12px;display:grid;gap:8px}
.tel-v{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/10;color:#fff}
.tel-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tel-v::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,13,21,.85),transparent 60%)}
.tel-v div{position:absolute;z-index:1;inset:auto 10px 8px 10px}
.tel-v b{display:block;font:400 15px var(--titre)}
.tel-v small{font-size:11px;color:rgba(255,255,255,.8)}
.tel-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tel-tuiles div{background:#fff;border-radius:3px;padding:8px 10px}
.tel-tuiles small{display:block;font-size:10px;color:var(--texte-2)}
.tel-tuiles b{font-size:14px}
.tel-barre{margin:4px 18px 10px;background:var(--nuit);border-radius:20px;display:flex;justify-content:space-around;padding:9px}
.tel-barre i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18)}
.tel-barre i.on{background:var(--or)}
.atouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(18px,3.4svh,32px);border-top:1px solid var(--ligne-2)}
.atout{padding:clamp(10px,2svh,18px) 12px clamp(10px,2svh,18px) 0;border-bottom:1px solid var(--ligne-2)}
.atout:nth-child(even){padding-left:16px;border-left:1px solid var(--ligne-2)}
.atout svg{width:22px;height:22px;fill:none;stroke:var(--bordeaux);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.atout h3{margin-top:8px;font-size:15.5px}
.atout p{margin-top:2px;font-size:14px;color:var(--texte-2);line-height:1.4}

/* Options à la carte */
.options-carte{display:grid;gap:12px}
.opt{position:relative;padding:22px;border-radius:6px;background:var(--marine);border:1px solid rgba(201,213,226,.14);color:#fff;transition:transform .3s var(--doux),border-color .3s}
.opt:hover{transform:translateY(-3px);border-color:rgba(201,213,226,.4)}
.opt-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.opt-tete small{font:600 12px var(--police);letter-spacing:.18em;color:var(--or-doux)}
.opt-tete span{font:300 26px var(--titre);color:#fff}
.opt-tete span em{font:400 13px var(--police);font-style:normal;color:rgba(255,255,255,.6)}
.opt h3{margin-top:14px;font:400 26px/1.15 var(--titre)}
.opt p{margin-top:8px;color:rgba(255,255,255,.72);font-size:15px}
.complements{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;color:rgba(255,255,255,.75);font-size:15px}
.complements b{color:#fff;font-weight:600}

.bulle{max-width:82%;padding:9px 12px;border-radius:4px 4px 4px 4px;background:rgba(255,255,255,.95);color:var(--texte);font-size:13.5px;box-shadow:0 12px 30px -16px rgba(0,0,0,.6)}
.bulle.moi{justify-self:end;background:var(--marine);color:#fff;border-radius:4px 4px 4px 4px}
.bulle small{display:block;font-size:11px;opacity:.65;margin-top:2px}
.gains{display:grid;gap:14px;margin-top:22px}
.gain{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px;border-radius:5px;background:var(--surface);border:1px solid var(--ligne)}
.gain i{display:grid;place-items:center;width:40px;height:40px;border-radius:4px;background:var(--ivoire);color:var(--ardoise)}
.gain i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gain p{color:var(--texte-2);font-size:15px;margin-top:2px}

/* Confiance : garanties de sécurité et d'accompagnement */
.garanties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.6svh,16px)}
.garantie{padding:clamp(14px,2.2svh,22px) clamp(14px,1.6vw,22px);border-radius:6px;background:var(--surface);border:1px solid var(--ligne)}
.garantie i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#F6ECEE;color:var(--bordeaux)}
.garantie i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.garantie h3{margin-top:clamp(8px,1.4svh,14px);font:600 16px/1.3 var(--police)}
.garantie p{margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--texte-2)}
@media (min-width:1024px){.garanties{grid-template-columns:repeat(3,minmax(0,1fr))}.garantie{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px}.garantie i{grid-row:span 2}.garantie h3{margin-top:0;font-size:17px}}

/* Conclusion : la photo émerge de l'écran clair qui précède et se fond dans le suivant */
.final{position:relative;isolation:isolate;overflow:hidden;justify-content:flex-end;color:#fff;background:var(--encre)}
.final img,.final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ivoire) 0%,rgba(238,241,244,.55) 2.5%,rgba(238,241,244,.18) 5.5%,rgba(238,241,244,0) 9%),linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.82) 34%,rgba(11,20,36,.3) 66%,rgba(11,20,36,.12) 100%)}
.final h2,.final p{text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 24px rgba(0,0,0,.4)}
.final h2{max-width:13em}
.final p{margin-top:14px;font-size:clamp(17px,1.4vw,20px);color:rgba(255,255,255,.84)}
.final .hero-actions{margin-top:clamp(18px,3svh,28px)}

/* ---------- Pages intérieures ---------- */
.page-tete{position:relative;padding-top:calc(var(--tete-h) + 30px + env(safe-area-inset-top));padding-bottom:clamp(28px,4.5vw,56px);background:var(--nuit);color:#fff;overflow:hidden;isolation:isolate}
.page-tete::before{content:"";position:absolute;z-index:-1;inset:auto -15% -60% auto;width:60vmax;height:60vmax;background:radial-gradient(closest-side,rgba(90,120,150,.3),transparent 70%)}
.page-tete h1{margin-top:12px;font-size:clamp(36px,5.4vw,68px);max-width:14em}
.page-tete h1 em{color:var(--froid)}
.page-tete .intro{margin-top:16px;color:rgba(214,224,236,.78)}
.page-tete .essai-mention,.sombre .essai-mention{color:rgba(255,255,255,.72)}
.page-tete--media{display:grid}
.page-tete-grille{display:grid;gap:28px;align-items:end}
.page-tete-media{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--marine)}
.page-tete-media img,.page-tete-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* téléphone : en-tête de Plans et d'Articles en bandeau, pour garder le contenu proche */
@media (max-width:959px){.page-tete--plans .page-tete-media,.page-tete-media--bande{aspect-ratio:21/9}}

/* Plateforme : domaines */
.domaines-nav{position:sticky;top:66px;z-index:20;background:rgba(250,248,243,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.domaines-nav .c{display:flex;gap:4px;padding-block:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.domaines-nav .c::-webkit-scrollbar{display:none}
.domaines-nav a{flex:none;scroll-snap-align:start;font:600 12px var(--police);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--texte-2);padding:10px 12px;border-radius:3px;min-height:40px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.domaines-nav a b{font:400 13px var(--titre);color:var(--ardoise);letter-spacing:0}
.domaines-nav a:hover{color:var(--marine);background:var(--ivoire)}
.domaines-nav a.on{color:var(--marine);background:var(--ivoire);box-shadow:inset 0 0 0 1px var(--ligne-2)}
.domaine{display:grid;gap:24px;align-items:center;padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--ligne)}
.domaine:first-of-type{border-top:0}
.domaine-num{font:300 italic 56px/1 var(--titre);color:var(--or-doux)}
.domaine h2{font-size:clamp(28px,3.4vw,42px)}
.domaine .intro{margin-top:14px}
.puces{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.puces li{position:relative;padding-left:28px}
.puces li::before{content:"";position:absolute;left:0;top:.48em;width:14px;height:8px;border-left:2px solid var(--ardoise);border-bottom:2px solid var(--ardoise);transform:rotate(-45deg)}
.option-tag{display:inline-block;margin-left:8px;vertical-align:middle;font:600 11px var(--police);letter-spacing:.12em;text-transform:uppercase;color:var(--ardoise);border:1px solid var(--ligne-2);border-radius:3px;padding:3px 10px}
.securite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.securite div{padding:20px;border-radius:5px;border:1px solid rgba(201,213,226,.14);background:rgba(255,255,255,.03)}
.securite svg{width:26px;height:26px;fill:none;stroke:var(--froid);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.securite h3{margin-top:12px;font-size:16px}
.securite p{margin-top:4px;color:rgba(255,255,255,.66);font-size:14px}

/* Tarifs */
.tarifs{display:grid;gap:22px}
.formule{position:relative;overflow:hidden;isolation:isolate;border-radius:6px;padding:clamp(24px,4vw,40px);background:linear-gradient(150deg,var(--marine) 0%,var(--nuit) 70%);color:#fff}
.formule::after{content:"";position:absolute;z-index:-1;inset:-40% -30% auto auto;width:420px;height:420px;background:radial-gradient(closest-side,rgba(110,140,170,.28),transparent)}
.formule .label{color:var(--or-doux)}
.prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:16px}
.prix b{font:300 clamp(64px,10vw,104px)/0.9 var(--titre);color:#fff}
.prix span{color:rgba(255,255,255,.75)}
.formule .resume{font:400 italic 22px var(--titre);margin-top:8px}
.inclus{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}
.inclus li{position:relative;padding-left:30px;color:rgba(255,255,255,.88)}
.inclus li::before{content:"";position:absolute;left:2px;top:.45em;width:13px;height:7px;border-left:2px solid var(--froid);border-bottom:2px solid var(--froid);transform:rotate(-45deg)}
.groupe-titre{margin:10px 0 12px}
.options{display:grid;gap:10px}
.option{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:18px;background:var(--surface);border:1px solid var(--ligne);border-radius:6px;cursor:pointer;transition:border-color .2s,box-shadow .25s,transform .25s var(--doux)}
.option:hover{transform:translateY(-1px);box-shadow:0 18px 40px -30px rgba(11,20,36,.6)}
.option input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--marine);cursor:pointer}
.option:has(input:checked){border-color:var(--marine);box-shadow:inset 0 0 0 1px var(--marine);background:#F6F8FB}
.option:has(input:focus-visible){outline:2px solid var(--marine);outline-offset:2px}
.option .option-metier{font:600 11px/1.2 var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--or-fonce);margin:0 0 4px}
.option-tete{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;align-items:baseline}
.option-tete b{font:400 21px var(--titre)}
.option-tete span{font-weight:600;color:var(--marine);white-space:nowrap}
.option p{color:var(--texte-2);font-size:15px;margin-top:2px}
.option ul{margin:10px 0 0;padding:0;list-style:none;color:var(--texte-2);font-size:14.5px;display:grid;gap:4px}
.option ul li{position:relative;padding-left:16px}
.option ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ligne-2)}
.option .note{font-size:13.5px;color:var(--texte-2);margin-top:10px;font-style:italic}
.total{scroll-margin-top:96px;position:relative;background:var(--surface);border:1px solid var(--ligne);border-radius:6px;padding:20px;box-shadow:0 30px 60px -44px rgba(11,20,36,.6)}
.total-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--ligne)}
.total-l:first-of-type{border-top:0}
.total-l b{font-size:19px;white-space:nowrap}
.total-l.fort span{font-weight:600}
.total-l.fort b{font:400 34px var(--titre);color:var(--marine)}
.total .petit{margin-top:8px}
.total .essai-cta{display:grid;justify-items:stretch;margin-top:16px;text-align:center}
.total .essai-mention{justify-content:center}
.tarif-barre{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;border-radius:3px;background:rgba(11,20,36,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;box-shadow:0 24px 44px -20px rgba(0,0,0,.65),inset 0 0 0 1px rgba(201,213,226,.18);transform:translateY(160%);transition:transform .4s var(--doux)}
.tarif-barre.vue{transform:none}
.tarif-barre small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--froid)}
.tarif-barre b{font:400 24px/1.1 var(--titre)}
.tarif-barre span{font-size:13px;color:rgba(255,255,255,.7)}
.tarif-barre .bouton{min-height:46px;padding-inline:20px}
.section .tarif-barre .bouton--or{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
@media (min-width:960px){.tarif-barre{display:none}}
.bascule{display:inline-flex;border:1px solid var(--ligne-2);border-radius:3px;padding:3px;gap:2px;margin-bottom:12px}
.bascule button{min-height:40px;padding:0 16px;border:0;border-radius:3px;background:none;font:600 14px var(--police);color:var(--texte-2);cursor:pointer}
.bascule button[aria-pressed="true"]{background:var(--marine);color:#fff}
.faq{display:grid;border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font:400 19px var(--titre);list-style:none;padding:14px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px var(--police);color:var(--ardoise);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--texte-2);padding-bottom:18px;max-width:52em}

/* ---------- Formulaires ---------- */
.formulaire{display:grid;gap:16px;background:var(--surface);border:1px solid var(--ligne);border-radius:6px;padding:clamp(20px,3vw,34px);box-shadow:0 30px 60px -48px rgba(11,20,36,.6)}
.champ{display:grid;gap:6px}
.champ label,.champ .lbl{font-size:14px;font-weight:600;letter-spacing:.02em}
.facultatif{font-weight:400;color:var(--texte-2)}
.champ input:not([type=checkbox]):not([type=radio]),.champ textarea,.champ select{width:100%;min-height:52px;font:400 16px/1.4 var(--police);color:var(--texte);background:var(--fond);border:1px solid var(--ligne-2);border-radius:4px;padding:12px 14px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.champ textarea{resize:vertical;min-height:130px}
.champ input:not([type=checkbox]):not([type=radio]):focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--marine-2);background:var(--surface);box-shadow:0 0 0 3px rgba(66,91,111,.16)}
.champ.erreur input,.champ.erreur textarea,.champ.erreur select{border-color:var(--alerte)}
.champ .err{font-size:14px;color:var(--alerte)}
.champ .aide{font-size:14px;color:var(--texte-2)}
.cases{display:grid;gap:8px}
.case{display:flex;gap:12px;align-items:flex-start;min-height:52px;padding:13px 14px;border:1px solid var(--ligne-2);border-radius:4px;background:var(--surface);cursor:pointer;transition:border-color .2s,background-color .2s}
.case input{margin-top:2px;width:20px;height:20px;accent-color:var(--marine);flex:none}
.case:has(input:checked){border-color:var(--marine);background:#F4F7FA}
.case,.champ .case{font-size:15.5px;font-weight:400;letter-spacing:0}
.cases .case{font-weight:600}
.case-metier{display:block;font:600 10.5px/1.3 var(--police);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ardoise);margin-bottom:2px}
.case small{display:block;color:var(--texte-2);font-size:14px;font-weight:400;margin-top:2px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-message{font-size:15px;padding:12px 14px;border-radius:4px;background:#EEF2F6;color:var(--marine)}
.form-message.erreur{background:#F7E7E1;color:var(--alerte)}
.etapes-nav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-bottom:4px}
.etapes-nav span{height:4px;border-radius:4px;background:var(--ligne)}
.etapes-nav span.fait{background:var(--marine)}
.recap{display:grid;gap:6px;padding:16px;border-radius:5px;background:var(--nuit);color:#fff;font-size:15px}
.recap b{color:#fff;font-weight:600}
.actions-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.actions-form .bouton{flex:1 1 160px}

/* Contact */
.contact{display:grid;gap:28px;align-items:start}
.contact-cote{display:grid;gap:14px}
.contact-carte{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/10;background:var(--marine)}
.contact-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact-tel{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:12px 20px 12px 14px;border-radius:3px;background:rgba(255,255,255,.04);border:1px solid rgba(201,213,226,.35);color:#fff;text-decoration:none;transition:background-color .2s,border-color .2s}
.contact-tel:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.contact-tel svg{width:40px;height:40px;padding:10px;flex:none;border-radius:50%;background:#F2F1EE;fill:none;stroke:#0B1424;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-tel small{display:block;font:600 11px var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--or-doux)}
.contact-tel b{display:block;font:400 22px/1.2 var(--titre);letter-spacing:.01em}
.promesses{display:grid;gap:10px}
.promesses div{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid rgba(201,213,226,.14);color:rgba(255,255,255,.85);font-size:15px}
.promesses svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--froid);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Mentions légales */
.legal{padding-top:clamp(8px,2vw,24px);padding-bottom:var(--sect);max-width:880px}
.page-tete--legal h1{font-size:clamp(34px,5vw,60px);max-width:16em}
.page-tete--legal .intro{max-width:46em}
/* Page 404 */
.perdu{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;background:var(--encre);isolation:isolate;overflow:hidden}
.perdu>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.perdu::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,13,21,.95),rgba(10,13,21,.45) 60%,rgba(10,13,21,.6))}
.perdu .marque{position:absolute;top:max(22px,env(safe-area-inset-top));left:var(--marge);color:#fff}
.perdu .c{padding-block:clamp(48px,10vw,110px)}
.perdu-code{font:300 italic clamp(88px,16vw,180px)/.9 var(--titre);color:var(--froid)}
.perdu h1{margin-top:14px;font-size:clamp(30px,4.4vw,52px);max-width:14em}
.perdu h1 em{color:var(--froid)}
.perdu p{margin-top:12px;color:rgba(214,224,236,.78)}
.perdu .hero-actions{margin-top:28px}
.legal h2{font-size:26px;margin-top:40px;padding-top:22px;border-top:1px solid var(--ligne)}
.legal h3{font-size:17px;margin-top:18px}
.legal p,.legal li{color:var(--texte-2);margin-top:10px}
.legal ul{padding-left:20px}
.legal a{color:var(--marine)}
.legal dl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-top:14px}
.legal dt{font-size:13px;font-weight:600;color:var(--texte-2);padding-top:8px}
.legal dd{margin:0}
.a-renseigner,.todo-field{color:var(--or-fonce);background:#F8EFE2;border:1px dashed #D8BE95;border-radius:4px;padding:0 5px}
.todo-field.rempli{color:inherit;background:none;border:0;padding:0}
.simple{max-width:620px;margin:16vh auto;padding:0 20px}
.simple h1{margin:12px 0 16px;font-size:clamp(34px,6vw,48px)}

/* Pied de page */
.pied{background:var(--encre);color:rgba(205,215,228,.72);padding-top:56px;padding-bottom:env(safe-area-inset-bottom)}
.pied a{text-decoration:none;color:rgba(205,215,228,.72);display:inline-flex;align-items:center;min-height:40px}
.pied a:hover{color:#fff}
.pied-in{display:grid;gap:26px;padding-bottom:32px}
.pied .marque{color:#fff}
.pied-marque p{margin-top:14px;font:440 20px/1.3 var(--titre);letter-spacing:-.01em;color:var(--champagne);max-width:16em}
.pied-liens{display:grid;align-content:start}
.pied-liens b{font:600 11px var(--police);letter-spacing:.2em;text-transform:uppercase;color:var(--or-doux);margin-bottom:6px}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding-top:18px;padding-bottom:26px;border-top:1px solid rgba(201,213,226,.12);font-size:13px;color:rgba(205,215,228,.5)}

/* ---------- Pages de compte ---------- */
.page-compte{min-height:100svh;background:var(--fond)}
.cx{min-height:100svh;display:grid}
.cx-photo{position:relative;overflow:hidden;background:var(--nuit);min-height:180px;isolation:isolate}
.cx-photo>img,.cx-photo>picture>img,.cx-photo>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cx-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,13,21,.85),rgba(10,13,21,.2) 60%,rgba(10,13,21,.35))}
.cx-photo-txt{position:absolute;inset:auto 0 0 0;padding:18px var(--marge);color:#fff}
.cx-photo-txt b{display:block;font:440 clamp(20px,2.4vw,30px)/1.25 var(--titre);letter-spacing:-.01em;color:var(--champagne);max-width:18em}
.cx-photo-txt small{display:block;margin-top:8px;font:600 11px var(--police);letter-spacing:.18em;text-transform:uppercase;color:var(--or-doux)}
.cx-photo .marque{position:absolute;top:max(16px,env(safe-area-inset-top));left:var(--marge);color:#fff}
.cx-form{display:flex;flex-direction:column;padding:18px var(--marge) 28px}
.cx-haut{display:flex;justify-content:space-between;align-items:center;min-height:48px}
.lien-retour{display:inline-flex;align-items:center;min-height:44px;color:var(--texte-2);text-decoration:none;font-size:15px}
.lien-retour:hover{color:var(--texte)}
.cx-in{margin:auto 0;width:100%;max-width:440px;display:grid;gap:16px;padding-block:24px}
.cx-logo{display:none}
.cx-logo img{max-height:44px;max-width:180px;object-fit:contain}
.cx-in h1{font-size:clamp(36px,5vw,52px)}
.cx-sous{color:var(--texte-2);margin-top:-6px}
.mdp{position:relative}
.mdp input{padding-right:96px}
.mdp-voir{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:44px;border:0;background:none;color:var(--marine);font:600 14px var(--police);padding:0 12px;cursor:pointer;border-radius:3px}
.cx-liens{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:15px}
.cx-liens a{color:var(--marine);display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.cx-liens button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:600 15px var(--police);color:var(--marine);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cx-liens button[hidden]{display:none}
.cx-demo{margin-top:6px;font-size:15px}
.cx-demo{margin-top:6px;padding:16px;border-radius:6px;background:var(--ivoire)}
.cx-demo summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:600;color:var(--marine);list-style:none}
.cx-demo summary::-webkit-details-marker{display:none}
.cx-demo summary::after{content:"+";font-size:22px;color:var(--ardoise)}
.cx-demo[open] summary::after{content:"−"}
.cx-demo-btns{display:grid;gap:8px;margin-top:10px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font:600 16px/1.6 ui-monospace,Menlo,Consolas,monospace;padding:12px;border:1px dashed var(--ligne-2);border-radius:4px;text-align:center}
.secret{font:600 18px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;padding:12px;border:1px dashed var(--ligne-2);border-radius:4px;text-align:center;word-break:break-all}
.theme-bouton{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ligne);border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.theme-bouton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.payer{max-width:520px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) var(--marge) 40px;display:grid;gap:18px}
.payer-montant{font:300 52px var(--titre)}
.bandeau-info{padding:12px 14px;border-radius:4px;background:#F5ECDD;color:#6E4F22;font-size:15px}

[data-theme="sombre"] .page-compte{--texte:#E8ECF2;--texte-2:#A3ACBA;--fond:#0E131C;--surface:#161D29;--ligne:#263043;--ligne-2:#35425A;--marine:#C9D6E6;--ivoire:#141B27;background:var(--fond);color:var(--texte)}
[data-theme="sombre"] .page-compte .bouton:not(.bouton--or):not(.bouton--ligne){background:var(--or);border-color:var(--or);color:var(--nuit)}
[data-theme="sombre"] .page-compte .form-message{background:#1A2333;color:#C9D6E6}
[data-theme="sombre"] .page-compte .form-message.erreur{background:#3A2722;color:#F0B9A5}
[data-theme="sombre"] .page-compte .case:has(input:checked){background:#1B2230}

/* Apparitions (une seule fois) */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--doux),transform .8s var(--doux)}
.js .rv.vu{opacity:1;transform:none}

/* ---------- Élargissements ---------- */
@media (min-width:600px){
  .burger-txt{display:inline}
  .tete-logo span{display:inline}
  .options-carte{grid-template-columns:repeat(3,minmax(0,1fr))}
  .securite{grid-template-columns:repeat(4,minmax(0,1fr))}
  .legal dl{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:10px 24px}
  .legal dt{padding-top:2px}
  .pied-in{grid-template-columns:1fr 1fr}
  .pied-marque{grid-column:1/-1}
}
@media (min-width:960px){
  .tete-in{grid-template-columns:1fr auto 1fr;padding-inline:clamp(20px,3vw,44px)}
  /* menu « burger » à gauche à toutes les largeurs */

  .tete-essai{display:inline-flex;gap:.4em;min-height:36px;padding:6px 16px;font-size:12.5px}
  .marque img{width:24px;height:24px}
  .marque span{font-size:13.5px}
  .tarifs{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .tarifs-cote{position:sticky;top:100px;display:grid;gap:16px}
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,80px)}
  .page-tete-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px}
  .domaine{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px)}
  .domaine:nth-of-type(even) .domaine-media{order:-1}
  .cx{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .cx-photo{order:2;min-height:100svh}
  .cx-photo-txt{padding:40px 48px}
  .cx-logo{display:inline-flex}
  .pied-in{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
  .pied-marque{grid-column:auto}
}
@media (max-width:959px){
  /* Mobile : visuel en bandeau, formulaire en feuille arrondie posée dessus */
  .cx{grid-template-rows:auto 1fr;align-content:start}
  .cx-photo{order:-1;height:clamp(220px,34svh,320px)}
  .cx-photo .marque span{display:inline}
  .cx-photo-txt{padding-bottom:42px}
  .cx-form{position:relative;z-index:1;margin-top:-26px;border-radius:8px 8px 0 0;background:var(--fond);padding-top:10px;box-shadow:0 -10px 30px -18px rgba(10,13,21,.5)}
  .cx-in{margin:0 auto;padding-top:8px}
}
@media (min-width:760px){.offres{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
/* Ordinateur : le film occupe les trois quarts droits de l'ouverture, fondu vers le texte ; chaque écran métier
   pose sa photo d'un côté (alternativement), fondue vers le texte et vers les écrans voisins */
@media (min-width:1024px){
  .hero-film{left:25%}
  .hero-film::after{background:linear-gradient(90deg,var(--nuit) 0%,rgba(11,20,36,.86) 12%,rgba(11,20,36,.4) 30%,rgba(11,20,36,.06) 50%,rgba(11,20,36,0) 62%),linear-gradient(180deg,rgba(11,20,36,.7) 0%,rgba(11,20,36,0) 18%),linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.35) 16%,rgba(11,20,36,0) 32%)}
  .ouverture-corps{align-items:center}
  .ouverture h1,.ouverture-intro{text-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 26px rgba(0,0,0,.3)}
  .ouverture-tel{display:block;position:absolute;right:var(--marge);bottom:clamp(10px,2.4svh,26px);width:min(12.5vw,25svh,220px)}
  .scene-s{justify-content:center;padding-top:clamp(28px,6svh,72px)}
  .fond-photo{position:absolute;z-index:-1;inset:0 0 0 auto;width:62%;min-height:0;max-height:none;margin:0}
  .fond-photo::after{background:linear-gradient(90deg,var(--nuit) 0%,rgba(11,20,36,.62) 20%,rgba(11,20,36,0) 50%),linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,0) 24%),linear-gradient(180deg,var(--nuit) 0%,rgba(11,20,36,0) 24%)}
  .scene-s--inverse .fond-photo{inset:0 auto 0 0}
  .scene-s--inverse .fond-photo::after{background:linear-gradient(270deg,var(--nuit) 0%,rgba(11,20,36,.62) 20%,rgba(11,20,36,0) 50%),linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,0) 24%),linear-gradient(180deg,var(--nuit) 0%,rgba(11,20,36,0) 24%)}
  .scene-txt{max-width:min(540px,42%)}
  .scene-s--inverse .scene-txt{margin-left:auto}
  .scene-ecran{right:auto;left:18%;bottom:10%;width:min(14vw,26svh,230px)}
  .scene-ecran--bureau{left:12%;bottom:13%;width:min(36vw,84svh,620px)}
  .scene-s--inverse .scene-ecran{left:auto;right:12%}
  .ecran-grille{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px)}
  .ecran-grille .tel-seul{width:min(290px,34svh)}
}
@media (max-width:599px){.duo{padding:0 22% 10% 0}.duo .ecran--tel{width:34%}}
/* écrans peu hauts (téléphone en paysage) : chaque écran garde la hauteur de l'affichage, le contenu se resserre (voir plus bas) */
@media (max-height:520px){.fond-photo{max-height:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .rv .cle{background-size:100% 54%}
  .js .rv .trait{background-size:100% .26em}
}

/* ---------- Articles ---------- */
.art-secteurs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,34px)}
.art-secteurs a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.24);border-radius:999px;font:600 13px var(--police);letter-spacing:.04em;color:#fff;text-decoration:none;transition:background-color .25s,border-color .25s,color .25s}
.art-secteurs a:hover{border-color:rgba(255,255,255,.6)}
.art-secteurs a[aria-current="page"]{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.art-secteurs span{font-weight:500;opacity:.6}
.art-rubriques{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--ligne)}
.art-rubriques a{display:inline-flex;align-items:center;min-height:44px;font:600 12.5px var(--police);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--texte-2);border-bottom:1px solid transparent;margin-bottom:-1px}
.art-rubriques a:hover{color:var(--marine)}
.art-rubriques a[aria-current="page"]{color:var(--marine);border-bottom-color:var(--marine)}
.art-grille{display:grid;gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
.art-carte a{display:grid;gap:14px;text-decoration:none;color:inherit}
.art-carte-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--marine);border-radius:2px}
.art-carte-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux)}
.art-carte a:hover .art-carte-media img{transform:scale(1.03)}
.art-rubrique{font:600 11.5px var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--or-fonce)}
.art-carte h2,.art-carte h3{margin-top:8px;font:400 clamp(22px,2.2vw,26px)/1.2 var(--titre);letter-spacing:-.01em;text-wrap:balance}
.art-carte a:hover h2,.art-carte a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.art-resume{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--texte-2)}
.art-meta{margin-top:10px;font-size:13.5px;color:var(--texte-2)}
.art-tete h1{font-size:clamp(32px,4.6vw,58px);max-width:none}
.art-etroit{max-width:820px}
.art-fil{font:600 12px var(--police);letter-spacing:.14em;text-transform:uppercase;color:var(--or-doux)}
.art-fil a{color:var(--froid);text-decoration:none}
.art-fil a:hover{color:#fff}
.art-meta--clair{margin-top:20px;color:rgba(214,224,236,.7)}
.art-figure{max-width:1180px;margin-top:clamp(24px,4vw,44px)}
.art-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px;background:var(--marine)}
.art-figure figcaption{margin-top:10px;font-size:13.5px;color:var(--texte-2)}
.art-corps{padding-top:clamp(28px,4vw,44px);padding-bottom:var(--sect);font-size:18px;line-height:1.75}
.art-corps>h2{font-size:clamp(26px,2.8vw,34px);line-height:1.15;margin-top:48px}
.art-corps>h2:first-child{margin-top:0}
.art-corps>p{margin-top:16px}
.art-corps>ul{margin:16px 0 0;padding-left:22px}
.art-corps>ul li{margin-top:8px;padding-left:4px}
.art-corps>ul li::marker{color:var(--ardoise)}
.art-corps strong{font-weight:600}
.art-corps a{color:var(--marine)}
.art-sources{margin-top:48px;padding-top:22px;border-top:1px solid var(--ligne)}
.art-sources h2{font:600 12px var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-2)}
.art-sources ul{margin:12px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14.5px;line-height:1.5}
.art-sources a{color:var(--texte-2)}
.art-cta{margin-top:48px;padding:clamp(24px,3vw,36px);background:var(--nuit);color:#fff;border-radius:2px}
.art-cta h2{margin-top:14px;font-size:clamp(26px,2.8vw,34px);line-height:1.15}
.art-cta p:not(.label):not(.essai-mention){margin-top:12px;font-size:16.5px;line-height:1.6;color:rgba(214,224,236,.78)}
.art-cta .essai-cta{margin-top:22px}
.art-cta .essai-mention{color:rgba(255,255,255,.72)}
.article .art-cta .bouton--or{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.article .art-cta .bouton--or:hover{background:#fff;border-color:#fff}
.art-aussi-t{font-size:clamp(28px,3.2vw,40px);margin-bottom:clamp(22px,3vw,32px)}
@media (min-width:700px){
  .art-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-item--une{grid-column:1/-1}
  .art-item--une .art-carte a{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
  .art-item--une .art-carte h2{font-size:clamp(28px,3vw,40px)}
}
@media (min-width:1060px){
  .art-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* accueil, téléphone : les trois articles défilent de côté pour tenir dans l'écran */
@media (max-width:699px){
  .art-defile{grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--marge));padding:0 var(--marge) 6px;scroll-padding-inline:var(--marge)}
  .art-defile::-webkit-scrollbar{display:none}
  .art-defile .art-item{scroll-snap-align:start}
  .art-defile .art-resume{display:none}
}
/* Tarifs : prix annuel */
.prix-an{margin-top:10px;font-size:15px;color:rgba(214,224,236,.8)}
.prix-an b{font-weight:600;color:#fff}
.total .bascule+.bascule{margin-left:6px}

/* ---------- Plans ---------- */
.inclus--ligne{display:flex;flex-wrap:wrap;gap:10px 32px}
/* Paiement annuel et mensuel côte à côte, lignes alignées d'un bloc à l'autre (même sur téléphone) */
.paiements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:10px;row-gap:0}
.paiement{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start;padding:clamp(16px,4vw,40px)}
.paiement--clair{position:relative;border-radius:6px;background:var(--surface);border:1px solid var(--ligne);box-shadow:0 30px 60px -44px rgba(11,20,36,.6)}
.paiement .prix{margin-top:14px}
.paiement .prix b{font-size:clamp(28px,8.4vw,84px);white-space:nowrap}
.paiement--clair .prix b{color:var(--marine)}
.paiement--clair .prix span{color:var(--texte-2)}
.paiement-mention{margin-top:12px;font-weight:600;font-size:clamp(15px,1.5vw,17px);line-height:1.35}
.paiement--clair .paiement-mention{color:var(--marine)}
.paiement-detail{margin-top:16px;padding-top:12px;border-top:1px solid rgba(201,213,226,.18);font-size:15px;line-height:1.45;color:rgba(255,255,255,.8)}
.paiement--clair .paiement-detail{border-top-color:var(--ligne);color:var(--texte-2)}
.paiement-gain{margin-top:16px}
.paiement-gain b{display:block;font:400 italic clamp(18px,2vw,23px)/1.3 var(--titre);color:var(--or-doux)}
.paiement-gain span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:rgba(214,224,236,.72)}
.paiements-cta{display:grid;justify-items:center;margin-top:clamp(26px,3vw,40px);text-align:center}
.paiements-cta .essai-cta{justify-items:center}
@media (max-width:599px){
  .paiement .label{gap:8px;font-size:11px;letter-spacing:.14em}
  .paiement .label::after{width:14px}
}
@media (min-width:600px){.paiements{column-gap:16px}}
/* Fonctionnalités : six groupes */
.atouts--six{margin-top:0}
.atouts--six .atout h3{font-size:17px}
.atouts--six .atout p{font-size:15px}
/* Prestations complémentaires */
.prestations{display:grid;gap:12px}
.prestation{display:flex;flex-direction:column;padding:clamp(22px,3vw,36px);background:var(--surface);border:1px solid var(--ligne);border-radius:6px}
.prestation h3{font:400 clamp(24px,2.4vw,30px)/1.15 var(--titre);letter-spacing:-.01em}
.prestation-prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-top:14px;color:var(--texte-2)}
.prestation-prix b{font:300 clamp(40px,4.4vw,52px)/1 var(--titre);color:var(--marine)}
.prestation-desc{margin-top:14px;color:var(--texte-2)}
.prestation-meta{margin-top:14px;font-weight:600;color:var(--ardoise)}
.prestation .puces{margin-top:18px;font-size:16px}
.prestation-action{margin-top:auto;padding-top:28px}
@media (min-width:760px){.prestations{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.prestations--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:760px) and (max-width:1099px){.prestations--3 .prestation:last-child{grid-column:1/-1}}
@media (min-width:960px){
  .atouts--six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .atouts--six .atout:nth-child(3n+1){border-left:0;padding-left:0}
}

/* ---------- Effets discrets : parallaxe au défilement, transitions de page, survols ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--doux)}
.atout svg,.gain i,.prestation,.paiement--clair{transition:transform .45s var(--doux),box-shadow .45s var(--doux),border-color .3s,stroke .3s}
.atout:hover svg{stroke:var(--marine);transform:translateY(-2px)}
.prestation:hover,.paiement--clair:hover{transform:translateY(-2px);box-shadow:0 26px 50px -36px rgba(11,20,36,.55);border-color:var(--ligne-2)}
.gain:hover i{transform:rotate(-4deg)}
.bouton--ligne:hover{border-color:var(--marine)}
.art-grille .art-item:nth-child(2){transition-delay:.08s}
.art-grille .art-item:nth-child(3){transition-delay:.16s}
/* Captures : arrivée discrète, juste après leur photo */
@keyframes monte{from{opacity:0;transform:translateY(18px)}}
.js .ouverture-tel .ecran{animation:monte .9s var(--doux) .35s both}
.js .scene-ecran.rv{transition-delay:.2s}
/* Parallaxe (ordinateur uniquement, site.js pose la classe .px) : les photos défilent un peu moins vite que la page,
   les captures un peu plus vite. Propriétés translate et scale : les transformations d'apparition restent intactes. */
.px .fond-photo>img,.px .fond-photo>picture>img,.px .final img,.px .page-tete-media img,.px .hero-film>picture>img{translate:0 var(--py,0px);scale:1.1}
.px .scene-ecran .ecran,.px .ouverture-tel .ecran{translate:0 var(--pe,0px)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- Plans : formules (cartes sombres), ce que l'abonnement ajoute, comparaison ---------- */
@media (min-width:960px) and (max-width:1099px){.tete-essai-plus{display:none}}
/* Toute l'offre d'un coup d'œil : titre et garanties, trois cartes (Découverte, accès complet, sur mesure), une note ;
   la photo se fond dans le fond, en haut à droite. Téléphone : les cartes défilent de côté. */
.offre-photo{position:absolute;z-index:-1;inset:0 0 auto auto;width:min(64%,960px);height:66%;overflow:hidden}
.offre-photo img{width:100%;height:100%;object-fit:cover;opacity:.6}
.offre-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nuit) 0%,rgba(11,20,36,.55) 34%,rgba(11,20,36,.15) 70%),linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,0) 62%)}
.offre-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;margin-bottom:clamp(20px,3.6svh,36px)}
.offre-tete h1{margin-top:12px;font-size:clamp(32px,min(4.6vw,6.2svh),64px);max-width:12em}
.confiance{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,auto);gap:6px 22px}
.confiance li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(214,224,236,.82)}
.confiance svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--or-doux);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.plans{display:grid;gap:14px}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(18px,2.6svh,28px) clamp(18px,1.8vw,28px);border-radius:8px;background:rgba(19,35,58,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(201,213,226,.16)}
.plan--phare{background:linear-gradient(165deg,#1C3352 0%,#101D32 100%);border-color:rgba(184,57,79,.6);box-shadow:0 0 0 1px rgba(184,57,79,.22),0 50px 90px -50px rgba(0,0,0,.9)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:20px;background:var(--or-doux);color:var(--nuit);font:600 11px/1.2 var(--police);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.plan-nom{font:500 clamp(21px,1.8vw,25px)/1.1 var(--titre);letter-spacing:-.01em}
.plan-pour{margin-top:4px;font-size:14.5px;color:rgba(214,224,236,.72)}
.plan-prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:clamp(10px,2svh,18px)}
.plan-prix b{font:440 clamp(40px,min(4vw,6.4svh),56px)/1 var(--titre);letter-spacing:-.02em;color:#fff;white-space:nowrap}
.plan-prix span{font-size:14.5px;color:rgba(214,224,236,.75)}
.plan-sous{margin-top:8px;font-size:14px;line-height:1.4;color:rgba(214,224,236,.8)}
.plan-sous b{display:block;font-weight:600;color:#fff}
/* coût indicatif par véhicule et par mois, en petit */
.plan-detail{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:rgba(214,224,236,.6)}
.plan-cta{width:100%;min-height:46px;margin-top:clamp(12px,2.2svh,20px)}
.plan .bouton:not(.bouton--or){background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.plan .bouton:not(.bouton--or):hover{background:rgba(255,255,255,.06);border-color:#fff}
.plan .bouton--or{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.plan .bouton--or:hover{background:#fff;border-color:#fff}
.plan-liste{list-style:none;margin:clamp(12px,2.2svh,20px) 0 0;padding:clamp(12px,2svh,16px) 0 0;display:grid;gap:clamp(6px,1.2svh,10px);border-top:1px solid rgba(201,213,226,.14)}
.plan-liste li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:rgba(214,224,236,.84)}
.plan-liste b{font-weight:600;color:#fff}
.plan-liste svg{flex:none;width:19px;height:19px;margin-top:1px;padding:3px;border-radius:50%;background:rgba(184,57,79,.16);fill:none;stroke:var(--or-doux);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.plans-note{margin:clamp(14px,2.4svh,22px) auto 0;max-width:52em;font-size:13px;text-align:center;color:rgba(214,224,236,.6)}
@media (min-width:960px){.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (max-width:599px){
  /* téléphone : les garanties figurent déjà sur l'accueil et dans les questions ; les cartes gardent la place */
  .offre-s .confiance,.comparer .cmp-cta,.comparer .accroche,.estimer .points,.estimer .accroche{display:none}
  .cmp-tete span{font-size:14px}
  .plan-cta{font-size:12.5px;letter-spacing:.08em;padding-inline:14px}
  .cmp-tete,.cmp-l{grid-template-columns:minmax(0,1fr) 62px 100px;gap:6px}
  .cmp-l{min-height:38px}
  .cmp-l>span:first-child{font-size:14px}
  .cmp-txt{font-size:12.5px}
}
/* téléphone : cartes empilées et resserrées, sans défilement de côté ; nom et accroche à gauche, prix à droite ;
   le détail des fonctions est dans la comparaison (lien « Tout ce qui est inclus ») */
.plan-voir{display:none}
@media (max-width:599px){
  .plans{gap:10px}
  .plan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:14px 16px}
  .plan>*{grid-column:1/-1}
  .plan-nom{grid-column:1;font-size:20px}
  .plan-pour{grid-column:1;margin-top:2px;font-size:13.5px}
  .plan-prix{grid-column:2;grid-row:1/3;margin:0;flex-direction:column;align-items:flex-end;gap:0}
  .plan-prix b{font-size:32px}
  .plan-prix span{font-size:12px}
  .plan--phare .plan-prix{grid-row:2/4}
  .plan-sous{margin-top:6px;font-size:13px}
  .plan-sous b{display:inline}
  .plan-detail{display:inline;margin-left:4px}
  .plan-cta{min-height:42px;margin-top:10px}
  .plan-liste,.plan .opt-l small,.plans-note{display:none}
  .plan-voir{display:inline-block;justify-self:start;margin-top:8px;font-size:13px;font-weight:600;color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
  .plan-badge{position:static;transform:none;justify-self:start;margin-bottom:6px;padding:3px 10px;font-size:10px}
  .opt-groupe{margin-top:6px}
  .opt-l{padding:5px 0;align-items:center}
  .opt-l b{font-size:13.5px}
  .opt-l p b{font-size:16px}
  .opt-l p span{display:inline;margin-left:4px}
  .plan-lien{padding-top:8px;font-size:14px}
}
/* sur mesure : options de l'abonnement et services, prix à droite */
.opt-groupe{margin-top:clamp(10px,2svh,16px);font:600 11px var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--or-doux)}
.opt-l{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:clamp(6px,1.2svh,9px) 0;border-bottom:1px solid rgba(201,213,226,.12)}
.opt-l b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:#fff}
.opt-l small{display:block;margin-top:1px;font-size:12.5px;line-height:1.35;color:rgba(214,224,236,.6)}
.opt-l p{flex:none;text-align:right}
.opt-l p b{font:500 19px/1.1 var(--titre);white-space:nowrap}
.opt-l p span{display:block;margin-top:1px;font-size:11.5px;color:rgba(214,224,236,.62)}
.plan-lien{align-self:flex-start;margin-top:auto;padding-top:14px}
/* estimation de l'abonnement */
.estimer{display:grid;gap:clamp(24px,4svh,48px);align-items:center}
.estimer h2{margin-top:12px}
.estim{padding:clamp(20px,3svh,30px);border-radius:8px;background:linear-gradient(165deg,#1C3352 0%,#101D32 100%);color:#fff;box-shadow:0 40px 70px -50px rgba(11,20,36,.8)}
.estim .bouton--or{margin-top:clamp(14px,2.4svh,22px);background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.estim .bouton--or:hover{background:#fff;border-color:#fff}
.estim-titre{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or-doux)}
.estim-groupe{display:flex;align-items:baseline;gap:8px;margin-top:clamp(10px,1.8svh,16px);padding-top:clamp(8px,1.4svh,12px);border-top:1px solid rgba(201,213,226,.14);font:600 11px var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--or-doux)}
.estim-groupe small{font-size:11px;letter-spacing:.04em;text-transform:none;font-weight:400;color:rgba(214,224,236,.6)}
.estim-titre+.estim-groupe{border-top:0;padding-top:0}
.estim-l{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(6px,1.2svh,10px);font-size:15px;color:rgba(255,255,255,.9)}
.estim-l>span{min-width:0;line-height:1.3}
.estim-l>span small{display:block;font-size:12px;color:rgba(214,224,236,.58)}
.pas{display:inline-flex;align-items:center;border:1px solid rgba(201,213,226,.28);border-radius:22px}
.pas button{width:38px;height:38px;border:0;border-radius:50%;background:none;color:#fff;font:400 20px/1 var(--police);cursor:pointer;touch-action:manipulation}
.pas button:hover{background:rgba(255,255,255,.08)}
.pas button:focus-visible{outline:2px solid var(--or-doux);outline-offset:1px}
.pas button:disabled{opacity:.35;cursor:default;background:none}
.pas output{min-width:34px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.estim-res{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(12px,2svh,18px);padding-top:clamp(12px,2svh,16px);border-top:1px solid rgba(201,213,226,.14)}
.estim-an small{display:block;font-size:12px;color:rgba(214,224,236,.72)}
.estim-an b{font:440 clamp(28px,4.2svh,38px)/1.1 var(--titre);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.estim-an span{margin-left:6px;font-size:13px;color:rgba(214,224,236,.75)}
.estim-an em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--or-clair)}
.estim-an:first-child b{color:var(--or-clair)}
.estim-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(201,213,226,.14)}
.estim-total b{font:440 clamp(34px,5svh,44px)/1 var(--titre);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.estim-total span{font-size:14px;color:rgba(214,224,236,.75)}
.estim-detail{margin-top:6px;font-size:12.5px;line-height:1.45;color:rgba(214,224,236,.62)}
.plan-promo{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:9px 12px;border-radius:4px;background:rgba(184,57,79,.12);border:1px solid rgba(184,57,79,.3);font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.9)}
.plan-promo svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:var(--or-doux);stroke-width:1.8;stroke-linejoin:round}
.plan-promo b{color:var(--or-doux)}
.plan-liste li.plan-sans{color:rgba(214,224,236,.6)}
.plan-liste li.plan-sans svg{background:rgba(255,255,255,.06);stroke:rgba(214,224,236,.6)}
/* ce que l'abonnement ajoute : agenda en vitrine et cartes flottantes */
.ajoute{display:grid;gap:clamp(24px,4svh,56px);align-items:center}
.ajoute-txt h2{margin-top:12px}
.ajoute-liste{list-style:none;padding:0;margin:clamp(16px,3svh,28px) 0 0;display:grid;gap:clamp(10px,2svh,18px)}
.ajoute-liste li{display:flex;gap:14px;align-items:flex-start}
.ajoute-liste i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F6ECEE;color:var(--bordeaux)}
.ajoute-liste i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ajoute-liste b{display:block;font-weight:600;color:var(--texte)}
.ajoute-liste span{display:block;margin-top:1px;font-size:15px;line-height:1.45;color:var(--texte-2)}
.agenda-vitrine{position:relative;padding:clamp(24px,4svh,36px) 0 clamp(28px,4.4svh,40px)}
.av-cadre{border-radius:8px;background:#0F1A2C;border:1px solid rgba(201,213,226,.14);box-shadow:0 50px 90px -50px rgba(0,0,0,.9);overflow:hidden}
.av-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(201,213,226,.1)}
.av-tete b{font:400 18px var(--titre);color:#fff}
.av-tete span{display:flex;gap:4px;padding:3px;border-radius:4px;background:rgba(255,255,255,.06)}
.av-tete i{font-style:normal;font-size:12px;padding:4px 10px;border-radius:3px;color:rgba(214,224,236,.7)}
.av-tete i.on{background:var(--marine-2);color:#fff}
.av-grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.av-col{min-height:clamp(150px,25svh,230px);padding:10px 6px;border-left:1px solid rgba(201,213,226,.08);display:flex;flex-direction:column;gap:6px;min-width:0}
.av-col:first-child{border-left:0}
.av-col small{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(214,224,236,.55)}
.av-col b{font:300 22px/1 var(--titre);color:#fff}
.av-col--auj b{color:var(--or-doux)}
.av-col--we{background:rgba(255,255,255,.02)}
.av-e{display:block;padding:5px 6px;border-radius:3px;border-left:2px solid var(--froid-2);background:rgba(147,164,184,.16);font-size:11px;line-height:1.3;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-e--prep{border-left-color:var(--or-doux);background:rgba(184,57,79,.14)}
.av-e--loc{border-left-color:#7FA7D1;background:rgba(127,167,209,.16)}
.av-e--ent{border-left-color:#C98E6B;background:rgba(201,142,107,.15)}
.av-e--sortie{border-left-color:#9BC7A9;background:rgba(155,199,169,.14)}
.agenda-vitrine .flottant{max-width:calc(100% - 12px)}
.av-f1{top:0;left:0}
.av-f2{top:44%;right:0;animation-delay:-2s}
.av-f3{bottom:0;left:12%;animation-delay:-4s}
@media (max-width:599px){
  .av-grille{grid-template-columns:repeat(4,minmax(0,1fr))}
  .av-col:nth-child(n+5){display:none}
  .av-col{min-height:150px}
  .av-f3{left:0}
  .av-f2{display:none}
  .cmp-l>span:first-child{font-size:14.5px}
}
@media (min-width:960px){.ajoute{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.av-f1{left:-18px}.av-f2{right:-18px}}
/* comparaison des formules, en une dizaine de lignes */
.comparer,.questions{display:grid;gap:clamp(20px,3.6svh,40px);align-items:center}
.comparer h2,.questions h2{margin-top:12px}
.cmp{border-top:1px solid var(--ligne-2)}
.cmp-tete,.cmp-l{display:grid;grid-template-columns:minmax(0,1fr) 76px 112px;align-items:center;gap:8px}
.cmp-tete{padding:clamp(8px,1.6svh,14px) 0;border-bottom:1px solid var(--ligne-2)}
.cmp-tete span{font:500 clamp(15px,1.5vw,19px)/1.2 var(--titre);text-align:center;overflow-wrap:normal}
.cmp-tete small{display:block;margin-top:3px;font:600 11.5px/1.3 var(--police);color:var(--texte-2)}
.cmp-tete span:last-child{color:var(--bordeaux)}
.cmp-l{min-height:clamp(38px,5.2svh,50px);padding:4px 0;border-bottom:1px solid var(--ligne-2)}
.cmp-l>span:first-child{font-size:15px;line-height:1.35}
.cmp-l>span[role=cell]{text-align:center}
.cmp-oui,.cmp-non{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%}
.cmp-oui{background:#F6ECEE}
.cmp-oui svg{width:14px;height:14px;fill:none;stroke:var(--bordeaux);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp-non svg{width:14px;height:14px;fill:none;stroke:var(--ligne-2);stroke-width:2;stroke-linecap:round}
.cmp-txt{font-weight:600;font-size:13.5px;line-height:1.3}
.cmp-l>span:last-child .cmp-txt{color:var(--texte)}
.cmp-cta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 24px;margin-top:clamp(18px,3svh,30px)}
.questions .faq summary{min-height:clamp(46px,6.4svh,60px);padding:clamp(8px,1.4svh,14px) 0}
@media (min-width:760px){.cmp-tete,.cmp-l{grid-template-columns:minmax(0,1fr) 140px 210px}.cmp-l:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 12%,rgba(255,255,255,.7) 88%,transparent)}}
@media (min-width:1024px){
  .estimer{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(48px,7vw,120px)}
  .comparer,.questions{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,5vw,88px)}
}
.plan{transition:transform .45s var(--doux),box-shadow .45s var(--doux),border-color .3s}
.plan:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.plan{transition:none}.plan:hover{transform:none}.agenda-vitrine .flottant{animation:none}}
/* libellé de l'en-tête sur une ligne sur les petits écrans */
@media (max-width:420px){.ouverture .label{font-size:11px;letter-spacing:.12em;gap:8px}.ouverture .label::after,.scene-txt .label::after{width:16px}.scene-txt .label{font-size:12px;letter-spacing:.12em;gap:8px}}

/* ---------- Commande directe : trois blocs (abonnement et services, entreprise, compte) et récapitulatif ---------- */
.page-tete--commande{padding-bottom:clamp(24px,4vw,44px)}
.page-tete--commande h1{font-size:clamp(34px,4.6vw,60px)}
.commande{display:grid;gap:20px;padding-top:clamp(20px,3vw,36px);padding-bottom:var(--sect)}
.cmd-blocs{display:grid;gap:16px;min-width:0}
.cmd-bloc{min-width:0;margin:0;padding:clamp(18px,2.4vw,28px);border:1px solid var(--ligne);border-radius:8px;background:var(--surface);display:grid;gap:14px}
.cmd-bloc legend{display:flex;align-items:center;gap:10px;float:left;width:100%;font:500 21px/1.2 var(--titre);letter-spacing:-.01em}
.cmd-bloc legend span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--bordeaux);color:#fff;font:600 13px var(--police)}
.cmd-bloc legend+*{clear:both}
.cmd-bloc .estim{box-shadow:none}
.cmd-2{display:grid;gap:14px}
@media (min-width:600px){.cmd-2{grid-template-columns:1fr 1fr}.cmd-2--cp{grid-template-columns:160px minmax(0,1fr)}}
.cases--ligne{display:flex;flex-wrap:wrap;gap:8px}
.cases--ligne .case{min-height:44px;padding:10px 14px}
.cmd-resume{padding:clamp(18px,2.4vw,26px);border-radius:8px;background:var(--nuit);color:#fff;display:grid;gap:12px;align-content:start}
.cmd-resume-t{font:600 12px var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--or-doux)}
.cmd-lignes{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.cmd-lignes li{display:flex;justify-content:space-between;gap:12px;color:rgba(214,224,236,.86)}
.cmd-lignes b{flex:none;white-space:nowrap;font-weight:600;color:#fff}
.cmd-une-fois span::after{content:" · une fois";color:rgba(214,224,236,.55)}
.cmd-total{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px;padding-top:12px;border-top:1px solid rgba(201,213,226,.16)}
.cmd-total span{font-size:14px;color:rgba(214,224,236,.8)}
.cmd-total b{font:440 30px/1.1 var(--titre);letter-spacing:-.02em;color:var(--or-clair);white-space:nowrap}
.cmd-total small{grid-column:1/-1;justify-self:end;font-size:12.5px;color:rgba(214,224,236,.62)}
.cmd-total--suite b{font-size:22px;color:#fff}
.cmd-ht{font-size:12px;color:rgba(214,224,236,.55)}
.cmd-cgv{background:rgba(255,255,255,.04);border-color:rgba(201,213,226,.24);color:rgba(255,255,255,.9);font-weight:400;font-size:14px}
.cmd-cgv:has(input:checked){background:rgba(255,255,255,.08);border-color:var(--or-doux)}
.cmd-cgv .lien,.cmd-alt .lien{color:var(--or-clair)}
.cmd-resume .bouton{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.cmd-resume .bouton:hover{background:#fff;border-color:#fff}
.cmd-garanties{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:rgba(214,224,236,.7)}
.cmd-garanties svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:var(--or-doux);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cmd-alt{font-size:13.5px;color:rgba(214,224,236,.7)}
.form-rgpd{font-size:12.5px;line-height:1.5}
/* inscription : choix de l'univers (Motors, Estates) */
.univers-choix{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.univers-carte{position:relative;display:block;cursor:pointer}
.univers-carte input{position:absolute;opacity:0;pointer-events:none}
.univers-carte span{display:grid;gap:2px;height:100%;padding:12px 14px 11px;border:1px solid var(--ligne,rgba(14,27,46,.16));border-radius:6px;background:var(--fond,#fff);transition:border-color .2s,box-shadow .2s}
.univers-carte b{font:600 15px var(--police);letter-spacing:.02em}
.univers-carte small{font-size:12.5px;line-height:1.4;color:var(--texte-2)}
.univers-carte input:checked+span{border-color:var(--bordeaux,#7A1E2E);box-shadow:inset 0 0 0 1px var(--bordeaux,#7A1E2E)}
.univers-carte input:focus-visible+span{outline:2px solid var(--bordeaux,#7A1E2E);outline-offset:2px}
.cmd-resume .form-rgpd{color:rgba(214,224,236,.6)}.cmd-resume .form-rgpd .lien{color:var(--or-clair)}
@media (min-width:1024px){.commande{grid-template-columns:minmax(0,1fr) 380px;align-items:start}.cmd-resume{position:sticky;top:calc(var(--tete-h) + 20px)}}
.estim--commande .estim-res{display:none}
.form-groupe{margin-top:8px;font:600 11.5px var(--police);letter-spacing:.16em;text-transform:uppercase;color:var(--bordeaux)}
.form-groupe:first-child{margin-top:0}
.estim>.estim-groupe:first-child{margin-top:0;padding-top:0;border-top:0}
.cmd-cgv{display:block;line-height:1.5}
.cmd-cgv input{vertical-align:-3px;margin-right:6px}
.cmd-cgv .lien{display:inline;min-height:0;padding:0;border:0;text-decoration:underline;text-underline-offset:3px}
.cmd-cgv .lien::after{content:none}
/* téléphone : total de la première année toujours visible pendant la saisie, accès direct au paiement */
.cmd-barre{display:none}
@media (max-width:1023px){
  .cmd-barre{position:fixed;z-index:40;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-radius:8px;background:rgba(11,20,36,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
  .cmd-barre small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--or-doux)}
  .cmd-barre b{font:440 21px/1.1 var(--titre)}
  .cmd-barre a{min-height:42px;padding:8px 16px;background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
  .commande{padding-bottom:calc(var(--sect) + 70px)}
}
/* ---------- Écrans à la hauteur exacte de l'affichage, cartes, parallaxe (1er novembre 2026) ----------
   Chaque écran remplit la hauteur disponible sans la dépasser : sur téléphone, les groupes de cartes défilent de côté,
   les photos passent en fond et les captures occupent l'espace restant (haut de l'écran visible, fondu vers le bas). */
.clair{--fond-s:var(--fond)}.ivoire,.section--ivoire{--fond-s:var(--ivoire)}.sombre{--fond-s:var(--nuit)}
.acc-ouv,.met-ouv{min-height:100svh;display:flex;flex-direction:column;justify-content:center}

/* Cartes : surface claire, coins arrondis, ombre douce ; au survol, un soulèvement léger, un reflet qui suit le pointeur
   et un pictogramme qui se décale d'un rien (site.js pose --mx, --my, --ix, --iy) */
.atout,.garantie,.capacites li,.situations li,.demo-carte{position:relative;isolation:isolate;border:1px solid rgba(11,20,36,.07);border-radius:14px;background:linear-gradient(180deg,#fff 0%,#FAFBFC 100%);box-shadow:0 1px 2px rgba(11,20,36,.04),0 16px 34px -26px rgba(11,20,36,.38);transition:transform .5s var(--doux),box-shadow .5s var(--doux),border-color .3s}
.atout::before,.garantie::before,.capacites li::before,.situations li::before,.demo-carte::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(201,213,226,.5),rgba(201,213,226,0) 62%);opacity:0;transition:opacity .45s var(--doux)}
.atout:hover,.garantie:hover,.capacites li:hover,.situations li:hover,.demo-carte:hover{transform:translateY(-3px);border-color:rgba(11,20,36,.12);box-shadow:0 1px 2px rgba(11,20,36,.05),0 26px 44px -28px rgba(11,20,36,.48)}
.atout:hover::before,.garantie:hover::before,.capacites li:hover::before,.situations li:hover::before,.demo-carte:hover::before{opacity:1}
/* pictogramme dans une pastille arrondie, bordeaux discret */
.atout>svg,.capacites li>svg{box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:12px;background:linear-gradient(145deg,rgba(122,30,46,.11),rgba(122,30,46,.035));stroke:var(--bordeaux);stroke-width:1.6}
.garantie i,.situations i,.demo-carte>i{border-radius:12px;background:linear-gradient(145deg,rgba(122,30,46,.11),rgba(122,30,46,.035))}
.atout>svg,.capacites li>svg,.garantie i,.situations i,.demo-carte>i{translate:var(--ix,0px) var(--iy,0px);transition:translate .6s var(--doux),transform .45s var(--doux),stroke .3s}
.atout:hover svg{transform:none;stroke:var(--bordeaux)}
/* atouts (une fiche par bien, planning…) : cartes séparées */
.atouts{gap:10px;border-top:0}
.atout,.atout:nth-child(even){padding:14px 14px 15px;border:1px solid rgba(11,20,36,.07);border-left:1px solid rgba(11,20,36,.07)}
.atout h3{margin-top:10px}
/* capacités : grille de cartes */
.capacites{gap:12px;border-top:0}
.capacites li,.capacites li:nth-child(4n+1){flex-direction:column;gap:12px;padding:18px;border:1px solid rgba(11,20,36,.07)}
@media (min-width:960px){.capacites li,.capacites li:nth-child(4n+1){padding:20px 22px}.capacites li:not(:nth-child(4n)){border-right:1px solid rgba(11,20,36,.07)}}
.situations li{padding:20px;border-top:1px solid rgba(11,20,36,.07)}
.garantie i{width:40px;height:40px}
/* sur fond sombre */
.sombre .atout,.sombre .garantie,.sombre .capacites li{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sombre .atout::before,.sombre .garantie::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.08),rgba(255,255,255,0) 62%)}

/* Trois solutions : la photo en fond de carte, le texte posé dessus */
.solution{position:relative;isolation:isolate;overflow:hidden;justify-content:flex-end;gap:10px;min-height:clamp(300px,48svh,540px);padding:clamp(20px,2.2vw,30px);border-radius:16px;background:var(--encre);color:#fff;box-shadow:0 30px 60px -42px rgba(11,20,36,.7)}
.solution-media{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;border-radius:0}
.solution-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,20,36,.95) 0%,rgba(11,20,36,.74) 36%,rgba(11,20,36,.1) 72%,rgba(11,20,36,0) 100%)}
.solution:hover .solution-media img{transform:scale(1.04)}
.solution-nom{font:400 clamp(25px,2.3vw,31px)/1.1 var(--titre);letter-spacing:-.01em;color:#fff}
.solution-nom i{font-style:italic}
.solution-txt{flex:0 0 auto;font-size:15.5px;line-height:1.5;color:rgba(226,232,240,.86)}
.solution .lien{color:#fff;border-bottom-color:var(--bordeaux-vif)}

/* Plans : choix du secteur, sur l'ouverture sombre */
.secteurs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(14px,2.4svh,22px)}
.secteurs a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:1px solid rgba(255,255,255,.24);border-radius:999px;font:600 13px var(--police);letter-spacing:.04em;color:#fff;text-decoration:none;transition:background-color .25s,border-color .25s,color .25s}
.secteurs a:hover{border-color:rgba(255,255,255,.6)}
.secteurs a[aria-current="page"]{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}

/* Démonstration : choix du secteur et de l'espace */
.demo-cartes{display:grid;gap:14px}
.demo-carte{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,30px)}
.demo-carte>i{display:grid;place-items:center;width:46px;height:46px;color:var(--bordeaux)}
.demo-carte>i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.demo-carte h2{margin-top:16px;font:400 clamp(24px,2.2vw,30px)/1.15 var(--titre);letter-spacing:-.01em}
.demo-carte h2 em{font-style:italic}
.demo-carte p{flex:1;margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--texte-2)}
.demo-carte-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.demo-carte-actions .bouton{flex:1 1 auto;justify-content:center}
@media (min-width:860px){.demo-cartes{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}

/* Téléphone : écrans à la hauteur de l'affichage */
@media (max-width:1023px){
  .plein{padding-block:clamp(20px,4.6svh,48px)}
  .plein .entete,.entete-duo{margin-bottom:clamp(14px,2.6svh,28px)}
  .entete-duo{gap:10px}
  /* un élément souple prend la hauteur restante de l'écran */
  .plein--remplir>.c,.plein--remplir .ecran-grille{flex:1 1 auto;display:flex;flex-direction:column}
  .ecran-grille{gap:clamp(14px,2.6svh,28px)}
  /* la capture occupe l'espace laissé par le texte (requête de conteneur) ; trop peu de place : elle s'efface */
  .remplir{position:relative;flex:1 1 0;min-height:0;overflow:hidden;margin:0;container-type:size}
  @container (max-height:150px){.remplir>*{display:none}}
  .remplir::after{content:"";position:absolute;z-index:3;inset:auto 0 0;height:36%;background:linear-gradient(180deg,rgba(247,248,250,0),var(--fond-s) 90%);pointer-events:none}
  .remplir>figcaption{position:absolute;z-index:4;inset:auto 0 0;margin:0;text-align:center}
  .remplir.tel-seul,.relation .remplir.tel-seul{width:100%}
  .remplir.tel-seul>.ecran{width:min(250px,64vw);margin-inline:auto}
  .remplir.duo{max-width:none;padding:0 18% 0 0}
  .remplir.duo .ecran--tel{top:16%;bottom:auto;width:30%}
  .remplir>.met-capture-in,.remplir>.ecran:not(.ecran--tel){width:100%}
  /* groupes de cartes : défilement de côté, une carte et le bord de la suivante */
  .solutions,.situations,.demo-cartes,.offres.offres--pile{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(84%,440px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--marge));padding:2px var(--marge) 10px;scroll-padding-inline:var(--marge);gap:12px}
  .solutions::-webkit-scrollbar,.situations::-webkit-scrollbar,.demo-cartes::-webkit-scrollbar,.capacites::-webkit-scrollbar{display:none}
  .solutions>*,.situations>*,.demo-cartes>*,.offres--pile>*,.capacites>*{scroll-snap-align:start}
  .situations{grid-auto-columns:min(78%,380px)}
  #solutions .solutions{flex:1 1 0;min-height:280px}
  .solution{min-height:0}
  /* capacités : deux rangées qui défilent de côté */
  .capacites{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:min(76%,360px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--marge));padding:2px var(--marge) 10px;scroll-padding-inline:var(--marge);gap:10px}
  .capacites:has(>li:nth-child(5)){grid-template-rows:repeat(3,auto)}
  .capacites:has(>li:nth-child(7)){grid-template-rows:repeat(4,auto)}
  .capacites li,.capacites li:nth-child(4n+1){flex-direction:row;align-items:flex-start;gap:12px;padding:13px 14px 14px}
  .capacites h3{font-size:15.5px}
  .capacites p{font-size:13.5px;line-height:1.38}
  /* atouts et garanties : cartes resserrées, pictogramme à côté du titre */
  .atout,.atout:nth-child(even){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:11px 12px 12px}
  .atout>svg{width:17px;height:17px;padding:8px;border-radius:10px}
  .atout h3{margin-top:0;font-size:14.5px;line-height:1.25}
  .atout p{grid-column:1/-1;margin-top:6px;font-size:13px}
  .garanties{gap:8px}
  .garantie{padding:12px 12px 13px}
  .garantie i{width:34px;height:34px}
  .garantie i svg{width:16px;height:16px}
  .garantie h3{margin-top:8px;font-size:14.5px}
  .garantie p{font-size:13px;line-height:1.4}
  .situations li{padding:18px}
  .gains{gap:8px;margin-top:clamp(12px,2svh,28px)}
  .gains b{font-size:18px}
  .met-note{margin-top:12px;font-size:14px}
  .acc-ouv{padding-top:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(10px,2.2svh,32px));padding-bottom:clamp(12px,2.2svh,28px)}
  .acc-ouv-grille{gap:clamp(12px,2.2svh,30px)}
  .acc-ouv h1{margin-top:10px;font-size:clamp(28px,min(8.4vw,5svh),42px)}
  .acc-ouv .hero-actions{margin-top:clamp(14px,2.4svh,32px);gap:6px 18px}
  .acc-ecrans .duo{width:min(100%,40svh);margin-inline:auto}
  .acc-ecrans figcaption{margin-top:6px}
  .benefices{gap:10px 14px;margin-top:clamp(14px,2.6svh,40px);padding-top:clamp(12px,2svh,20px)}
  .benefices li{font-size:13.5px;gap:10px}
  .benefices svg{width:22px;height:22px}
}
/* Pages métiers, téléphone et tablette : la photo d'ouverture en fond, sous le texte, fondue vers le haut */
@media (max-width:1023px){
  .met-ouv{justify-content:flex-start;padding-bottom:0}
  .met-ouv-grille{flex:1;align-content:start}
  .met-photo{position:absolute;z-index:-1;inset:auto 0 0;height:50%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .met-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--fond) 0%,rgba(247,248,250,.82) 18%,rgba(247,248,250,.2) 46%,rgba(247,248,250,0) 64%)}
}/* parallaxe étendue (site.js) : photos de carte et d'ouverture métier, captures sur téléphone, groupes de cartes */
.px .solution-media img,.px .met-photo img{translate:0 var(--py,0px);scale:1.1}
.px .tel-seul .ecran,.px .duo .ecran--tel{translate:0 var(--pe,0px)}
.px .atouts>.atout,.px .garanties>.garantie,.px .capacites>li,.px .situations>li,.px .solutions>.solution{translate:0 var(--pc,0px)}
@media (prefers-reduced-motion:reduce){.atout:hover,.garantie:hover,.capacites li:hover,.situations li:hover,.demo-carte:hover{transform:none}}/* Téléphone : écrans par métier des pages secteur. La photo couvre tout l'écran, le texte est posé en bas sur un fondu ;
   la capture occupe l'espace libre au-dessus du texte et s'efface s'il n'y en a plus (requête de conteneur) */
@media (max-width:1023px){
  .scene-s{justify-content:flex-start;padding-top:clamp(14px,3svh,28px)}
  .scene-s .fond-photo{display:contents}
  .scene-s .fond-photo>img,.scene-s .fond-photo>picture>img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover}
  .scene-s .fond-photo::after{position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.9) 40%,rgba(11,20,36,.42) 66%,rgba(11,20,36,.18) 100%)}
  .scene-s .scene-ecran,.scene-s .scene-ecran--bureau{position:relative;inset:auto;flex:1 1 0;min-height:0;width:auto;margin:0 var(--marge) clamp(12px,2.4svh,24px);container-type:size;display:flex;justify-content:flex-end;align-items:flex-start}
  .scene-s .scene-ecran>.ecran{height:100cqh;width:auto;max-width:100%}
  .scene-s .scene-ecran>.ecran img{height:calc(100cqh - 10px);width:auto;max-width:none}
  .scene-s .scene-ecran--bureau>.ecran{height:auto;width:min(100%,calc(100cqh * 1.5))}
  .scene-s .scene-ecran--bureau>.ecran img{height:auto;width:100%}
  @container (max-height:170px){.scene-s .scene-ecran>*{display:none}}
  /* accueil : le tableau de bord prend l'espace restant ; les bénéfices cèdent la place sur les écrans peu hauts */
  .acc-ouv-grille{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch}
  .acc-ecrans{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;container-type:size}
  .acc-ecrans .duo{width:min(100%,calc((100cqh - 26px) * 1.5))}
  .acc-ecrans figcaption{align-self:stretch}
  @container (max-height:120px){.acc-ecrans>*{display:none}}
  .remplir{align-self:stretch;width:auto}
}@media (max-width:1023px) and (max-height:760px){
  .benefices{display:none}
  /* groupes de cartes resserrés en deux rangées qui défilent de côté */
  .capacites:has(>li:nth-child(5)),.capacites:has(>li:nth-child(7)){grid-template-rows:repeat(2,auto)}
  .garanties{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-columns:min(64%,340px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--marge));padding:2px var(--marge) 10px;scroll-padding-inline:var(--marge)}
  .garanties::-webkit-scrollbar{display:none}
  .garanties>*{scroll-snap-align:start}
  .gains{grid-auto-flow:column;grid-auto-columns:min(78%,380px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--marge));padding:0 var(--marge) 6px;scroll-padding-inline:var(--marge)}
  .gains::-webkit-scrollbar{display:none}
  .gains>*{scroll-snap-align:start}
  .met-note{display:none}
  .h2-court h2,.plein h2{font-size:clamp(25px,min(7.4vw,4.6svh),34px)}
  .accroche{font-size:16px;line-height:1.45}
  .points li{font-size:15px}
  .offre{padding:16px}
  .offre-points{margin-top:10px;gap:6px}
  .offre-points li{font-size:14px}
  .demo-carte{padding:18px}
  .demo-carte h2{margin-top:10px}
  .demo-carte p{font-size:14.5px}
}
/* ---------- Écran visuel : une photo en fond de section, le texte posé dessus (2 novembre 2026) ----------
   La photo couvre tout l'écran, un voile bleu nuit garde le texte lisible (plus dense côté texte sur ordinateur, vers
   le bas sur téléphone). Sur téléphone, le texte se pose en bas ; une capture éventuelle prend l'espace libre au-dessus. */
.ev{position:relative;isolation:isolate;overflow:hidden;background:var(--nuit);color:#fff}
.ev.sombre::before{display:none}
.ev-fond{position:absolute;z-index:-1;inset:0;overflow:hidden;background:var(--encre)}
.ev-fond img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.88) 38%,rgba(11,20,36,.52) 68%,rgba(11,20,36,.42) 100%)}
.ev--voile .ev-fond::after{background:linear-gradient(0deg,rgba(11,20,36,.95) 0%,rgba(11,20,36,.84) 46%,rgba(11,20,36,.7) 100%)}
@media (min-width:1024px){
  .ev-fond::after{background:linear-gradient(90deg,rgba(11,20,36,.95) 0%,rgba(11,20,36,.8) 32%,rgba(11,20,36,.34) 62%,rgba(11,20,36,.18) 100%),linear-gradient(0deg,rgba(11,20,36,.75) 0%,rgba(11,20,36,0) 32%)}
  .ev--droite .ev-fond::after{background:linear-gradient(270deg,rgba(11,20,36,.95) 0%,rgba(11,20,36,.8) 32%,rgba(11,20,36,.34) 62%,rgba(11,20,36,.18) 100%),linear-gradient(0deg,rgba(11,20,36,.75) 0%,rgba(11,20,36,0) 32%)}
  .ev--voile .ev-fond::after{background:linear-gradient(0deg,rgba(11,20,36,.92) 0%,rgba(11,20,36,.74) 55%,rgba(11,20,36,.6) 100%)}
}
.ev h1,.ev h2{text-shadow:0 2px 26px rgba(0,0,0,.3)}
.ev .accroche{color:rgba(226,232,240,.88)}
.px .ev-fond img{translate:0 var(--py,0px);scale:1.1}
/* ouverture d'une page d'activité : photo plein écran, texte en bas à gauche */
.ouv-photo{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--tete-h) + env(safe-area-inset-top) + 24px) 0 clamp(26px,6svh,64px)}
.ouv-photo h1{margin-top:14px;font-size:clamp(32px,min(5.2vw,7.2svh),72px);max-width:13em}
.ouv-photo .accroche{max-width:34em}
.ouv-photo .hero-actions{margin-top:clamp(18px,3.4svh,32px)}
.ouv-photo .essai-mention{color:rgba(255,255,255,.72)}
/* cartes sur photo : verre dépoli */
.sombre .situations li,.sombre .capacites li,.sombre .garantie,.sombre .atout{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:0 22px 44px -30px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.sombre .situations li:hover,.sombre .capacites li:hover,.sombre .garantie:hover,.sombre .atout:hover{border-color:rgba(255,255,255,.3);box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.sombre .situations li::before,.sombre .capacites li::before,.sombre .garantie::before,.sombre .atout::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.12),rgba(255,255,255,0) 62%)}
.sombre .situations h3,.sombre .capacites h3,.sombre .garantie h3,.sombre .atout h3{color:#fff}
.sombre .situations p,.sombre .capacites p,.sombre .garantie p,.sombre .atout p{color:rgba(214,224,236,.82)}
.sombre .atout>svg,.sombre .capacites li>svg{background:rgba(255,255,255,.1);stroke:#fff}
.sombre .garantie i,.sombre .situations i{background:rgba(255,255,255,.1);color:#fff}

/* Accueil : trois tuiles (Motors, Immobilier, Nautisme) et le vrai tableau de bord posé devant */
.acc-visuel{position:relative;margin:0}
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);height:clamp(260px,46svh,440px)}
.tuile{position:relative;isolation:isolate;display:block;overflow:hidden;border-radius:clamp(12px,1.4vw,18px);background:var(--marine);color:#fff;text-decoration:none;box-shadow:0 30px 60px -42px rgba(11,20,36,.7);transition:box-shadow .5s var(--doux)}
.tuile:nth-child(2){translate:0 calc(-5% + var(--pc,0px))}
.tuile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux)}
.tuile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,20,36,.62) 0%,rgba(11,20,36,0) 38%,rgba(11,20,36,0) 70%,rgba(11,20,36,.35) 100%)}
.tuile-nom{position:absolute;left:clamp(10px,1.2vw,18px);right:10px;top:clamp(10px,1.2vw,16px);font:500 11px/1.2 var(--police);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.tuile-nom i{display:block;margin-top:4px;font:italic 400 clamp(17px,1.7vw,24px)/1.1 var(--titre);letter-spacing:0;text-transform:none;color:#fff}
.tuile-nom i::after{content:" →";font-style:normal;opacity:0;transition:opacity .3s}
.tuile:hover img{transform:scale(1.05)}
.tuile:hover .tuile-nom i::after{opacity:1}
.tuile:hover{box-shadow:0 36px 70px -40px rgba(11,20,36,.85)}
.acc-flottants .ecran--bureau{position:absolute;z-index:2;left:-6%;bottom:-9%;width:60%}
.acc-flottants .ecran--tel{position:absolute;z-index:3;right:-3%;bottom:-12%;width:21%}
.acc-visuel figcaption{position:absolute;right:0;bottom:calc(-12% - 26px);font-size:12px;color:var(--texte-2)}
.acc-ouv .acc-visuel{margin-bottom:clamp(40px,8svh,80px)}
@media (min-width:1024px){.tuiles{height:min(56svh,560px)}}
@media (max-width:1023px){
  .acc-visuel{flex:1 1 0;min-height:0;width:100%;margin:0!important;container-type:size}
  .tuiles{height:calc(100cqh - 20px);gap:8px}
  .tuile:nth-child(2){translate:0 calc(-3% + var(--pc,0px))}
  .acc-flottants .ecran--bureau{display:none}
  .acc-flottants .ecran--tel{right:-4px;bottom:16px;width:auto;height:calc(50cqh)}
  .acc-flottants .ecran--tel img{height:calc(50cqh - 10px);width:auto}
  .acc-visuel figcaption{bottom:0;font-size:11px}
  .tuile-nom{font-size:9.5px;letter-spacing:.18em}
  .tuile-nom i{font-size:16px}
  @container (max-height:150px){.acc-visuel>*{display:none}}
}
@media (min-width:760px) and (max-width:1023px){.acc-visuel{margin-inline:6%}}

/* Plans : choix du secteur, trois panneaux photo */
.plans-hub{min-height:100svh;display:flex;flex-direction:column;padding:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(16px,3svh,36px)) 0 clamp(16px,3svh,36px);background:var(--nuit);color:#fff}
.plans-hub .entete-duo{margin-bottom:clamp(14px,2.6svh,30px)}
.plans-hub h1{margin-top:12px;font-size:clamp(30px,min(4.6vw,6.4svh),62px)}
.plans-hub .accroche{color:rgba(226,232,240,.84)}
.panneaux{flex:1 1 auto;display:grid;gap:clamp(8px,1vw,14px);min-height:0}
.panneau{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(150px,24svh,240px);padding:clamp(16px,2vw,28px);border-radius:clamp(12px,1.4vw,18px);color:#fff;text-decoration:none;background:var(--marine)}
.panneau img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--doux)}
.panneau::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,20,36,.94) 0%,rgba(11,20,36,.6) 42%,rgba(11,20,36,.15) 80%)}
.panneau:hover img{transform:scale(1.05)}
.panneau-nom{font:500 11.5px/1.2 var(--police);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.panneau-nom i{display:block;margin-top:6px;font:italic 400 clamp(26px,2.6vw,38px)/1.05 var(--titre);letter-spacing:0;text-transform:none;color:#fff}
.panneau-prix{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:clamp(8px,1.4svh,14px);font-size:14.5px;color:rgba(226,232,240,.86)}
.panneau-prix b{font-weight:600;color:#fff}
.panneau-txt{margin-top:8px;font-size:15px;line-height:1.5;color:rgba(214,224,236,.82);max-width:30em}
.panneau .lien{margin-top:clamp(10px,1.8svh,18px);align-self:flex-start;color:#fff;border-bottom-color:var(--bordeaux-vif)}
@media (min-width:860px){.panneaux{grid-template-columns:repeat(3,minmax(0,1fr))}.panneau{transition:flex-grow .6s var(--doux)}}
@media (max-width:859px){.panneau-txt{display:none}.panneau{min-height:0}}
.plans-garanties{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(12px,2svh,22px);font-size:13.5px;color:rgba(214,224,236,.8)}
.plans-garanties span{display:inline-flex;align-items:center;gap:8px}
.plans-garanties svg{width:17px;height:17px;fill:none;stroke:var(--or-doux);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* page de plans d'un secteur : la photo du secteur couvre l'ouverture */
@media (max-width:1023px){.offre-photo{inset:0;width:auto;height:auto}.offre-photo img{opacity:.42}.offre-photo::after{background:linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.7) 45%,rgba(11,20,36,.35) 100%)}}.acc-final-v{justify-content:flex-end}
.acc-final-v h2{margin-top:12px;max-width:14em}
.px .tuiles>.tuile:not(:nth-child(2)){translate:0 var(--pc,0px)}
.plans-hub h1{font-size:clamp(30px,min(4.2vw,5.8svh),58px);max-width:none}
.offre-s .offre-tete h1{font-size:clamp(30px,min(4.2vw,5.6svh),58px)}
.offre-s .secteurs{margin-bottom:clamp(10px,1.8svh,18px)}
#articles .art-resume{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* plans d'un secteur : l'ouverture passe sous l'en-tête transparent et occupe tout l'écran */
.offre-s{min-height:100svh;padding-top:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(12px,2.4svh,30px));padding-bottom:clamp(14px,2.6svh,40px)}
.offre-s .plan{padding:clamp(14px,2.1svh,26px) clamp(16px,1.6vw,26px)}
.offre-s .plan-liste{margin-top:clamp(8px,1.6svh,18px);padding-top:clamp(8px,1.4svh,14px);gap:clamp(4px,.9svh,9px)}
@media (min-width:960px){.offre-s .offre-tete{margin-bottom:clamp(12px,2.2svh,30px)}}
/* Téléphone : Plans (choix du secteur, plans d'un secteur) à la hauteur de l'écran */
@media (max-width:859px){
  .plans-hub .entete-duo .accroche{display:none}
  .plans-hub h1{font-size:clamp(26px,min(7.6vw,4.6svh),38px)}
  .panneaux{grid-template-rows:repeat(3,minmax(0,1fr))}
  .panneau{padding:14px 16px}
  .panneau-nom i{font-size:24px}
  .panneau-prix{margin-top:4px;font-size:13.5px}
  .panneau .lien{margin-top:6px;font-size:14px}
}
@media (max-width:1023px){
  .plans-garanties{display:none}
  .offre-photo img{opacity:.58}
  .offre-photo::after{background:linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.8) 50%,rgba(11,20,36,.4) 100%)}
  .offre-s{display:flex;flex-direction:column}
  .offre-s>.c{flex:1 1 auto;display:flex;flex-direction:column}
  .offre-s .plans{flex:1 1 auto;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(86%,420px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--marge));padding:2px var(--marge) 10px;scroll-padding-inline:var(--marge);gap:10px;align-items:stretch}
  .offre-s .plans::-webkit-scrollbar{display:none}
  .offre-s .plans>.plan{scroll-snap-align:start;display:flex;flex-direction:column;padding:16px}
  .offre-s .plans .plan-liste{display:grid}
  .offre-s .plans-note{display:none}
  .offre-s h1{font-size:clamp(26px,min(7.4vw,4.6svh),36px)}
  /* comparaison et questions : la liste défile dans l'écran */
  .defile-v{flex:1 1 0;min-height:140px;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent);padding-bottom:30px}
}@media (max-width:1023px){
  .offre-s .plan-pour,.offre-s .plan-voir,.offre-s .plan-detail{display:none}
  .estimer{gap:clamp(12px,2.2svh,24px)}
  .estimer .estim{padding:14px 16px}
  .estim-l{margin-top:4px;font-size:14.5px}
  .estim-l small{display:none}
  .estim-groupe{margin-top:8px;padding-top:6px}
  .estim-res{margin-top:8px;padding-top:8px}
  .estim-an b{font-size:26px}
  .estim-detail{display:none}
  .estim .bouton--or{margin-top:10px;min-height:46px}
  .demo-choix .accroche{display:none}
  .demo-carte p{font-size:14px;line-height:1.45}
  #articles .art-carte-media{aspect-ratio:16/9}
  #articles .art-resume{display:none}
}
@media (max-width:1023px) and (max-height:780px){.offre-s .plans .plan-liste{display:none}}@media (max-width:1023px){.offre-s .plans{flex:1 1 0;min-height:260px}.offre-s .plans>.plan{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.estim-groupe small{display:none}#articles .art-carte h3{font-size:19px}}
@media (max-width:1023px){#estimer .label{display:none}#estimer h2{margin-top:0;font-size:clamp(24px,6.8vw,30px)}.estim-l{line-height:1.25}.estim-l .pas{transform:scale(.92)}}
/* plans en bref (pages secteur et activité) : les cartes prennent la hauteur restante et défilent à l'intérieur si besoin */
@media (max-width:1023px){
  .plein#plans>.c{flex:1 1 auto;display:flex;flex-direction:column}
  .plein#plans .offres{flex:1 1 0;min-height:200px;align-items:stretch}
  .plein#plans .offre{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
@media (max-width:1023px) and (max-height:700px){
  .panneau .lien{display:none}
  .ajoute-liste li{font-size:14px}
  .estim-res{grid-template-columns:1fr}
  .estim-res .estim-an+.estim-an{display:none}
  .plein .entete,.entete-duo{margin-bottom:12px}
}@media (max-width:1023px) and (max-height:660px){.plein{padding-block:14px 16px}.estim-l{margin-top:2px;font-size:14px}.estim-titre{font-size:11px}#articles .art-carte h3{font-size:18px}.ajoute-txt h2{font-size:24px}}
/* Ordinateur peu haut (portable 1280 × 720, 1366 × 768) : cartes et ouvertures resserrées */
@media (min-width:1024px) and (max-height:820px){
  .plein{padding-block:clamp(20px,4svh,48px)}
  .atouts{gap:8px;margin-top:14px}
  .atout,.atout:nth-child(even){padding:10px 12px 11px}
  .atout>svg{width:17px;height:17px;padding:8px}
  .atout h3{margin-top:6px;font-size:14.5px}
  .atout p{font-size:13px}
  .capacites{gap:10px}
  .capacites li,.capacites li:nth-child(4n+1){padding:14px 16px;gap:8px}
  .capacites p{font-size:13.5px}
  .gains{margin-top:16px}
  .met-note{margin-top:12px}
  #articles .art-carte-media{aspect-ratio:16/8}
  #articles .art-resume{display:none}
  .demo-carte{padding:18px 20px}
  .demo-carte p{font-size:14.5px}
  .offre-s .confiance,.offre-s .plans-note,.offre-s .plan-pour{display:none}
  .offre-s .plan-liste li{font-size:13.5px}
  .offre-s .plan-cta{min-height:44px}
  .estim{padding:16px 20px}
  .estim-l small,.estim-detail{display:none}
  .faq summary{padding-block:10px}
}@media (min-width:700px){#articles .art-grille{grid-template-columns:repeat(3,minmax(0,1fr))}#articles .art-item--une{grid-column:auto}}
@media (max-height:820px){.demo-choix .accroche{display:none}.demo-choix .entete-duo{margin-bottom:16px}.offre-s .offre-tete h1{font-size:clamp(28px,min(4vw,5.2svh),52px)}}
/* Démonstration : chaque secteur sur une image tirée de son film, texte clair sur voile */
.demo-choix{min-height:100svh;padding-top:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(16px,3.4svh,44px))}
.demo-carte{overflow:hidden;color:#fff;background:var(--marine);border-color:rgba(255,255,255,.08);justify-content:flex-end;min-height:clamp(300px,52svh,520px)}
.demo-carte-fond{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--doux)}
.demo-carte::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,20,36,.96) 0%,rgba(11,20,36,.78) 45%,rgba(11,20,36,.2) 100%)}
.demo-carte:hover .demo-carte-fond{transform:scale(1.04)}
.demo-carte>i{background:rgba(255,255,255,.12);color:#fff}
.demo-carte h2{color:#fff}
.demo-carte p{flex:0 0 auto;color:rgba(226,232,240,.86)}
.demo-carte::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),rgba(255,255,255,0) 62%)}
@media (max-width:1023px){.demo-choix .demo-cartes{flex:1 1 0;min-height:300px}.demo-choix>.c{flex:1 1 auto;display:flex;flex-direction:column}.demo-carte{min-height:0}}.plein.demo-choix{padding-top:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(14px,3svh,40px))}
.demo-choix h1{font-size:clamp(28px,min(4.2vw,5.4svh),56px)}
.demo-carte .bouton--or{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.demo-carte .bouton--or:hover{background:#fff;border-color:#fff}
.demo-carte-actions .bouton{min-height:46px}
@media (max-width:1023px){.plein#fonctions{padding-block:clamp(16px,3.6svh,44px)}.plein#fonctions .capacites{gap:8px}}

/* ---------- Retours du 2 novembre : enchaînement des écrans, ouverture de l'accueil, solutions, sélecteur de secteur ---------- */
/* Chaque écran dépasse très légèrement la hauteur d'affichage ; le suivant vient s'y poser, coins arrondis et ombre douce :
   le passage est fondu, le changement d'écran reste net. La bande recouverte est une bordure transparente (le contenu
   garde toute la hauteur de l'écran). */
:root{--recouvre:clamp(16px,2.6svh,30px);--rayon-s:clamp(22px,2.6vw,36px)}
main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub):has(+ section.plein){border-bottom:var(--recouvre) solid transparent}
main>section.plein:has(+ section.plein){min-height:calc(100svh - var(--tete-h) + var(--recouvre))}
main>:is(.ouverture,.acc-ouv,.ouv-photo,.plans-hub):has(+ section.plein),main>section.plein:is(.offre-s,.demo-choix):has(+ section.plein){min-height:calc(100svh + var(--recouvre))}
main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.plein{margin-top:calc(-1 * var(--recouvre));border-radius:var(--rayon-s) var(--rayon-s) 0 0;box-shadow:0 -26px 50px -34px rgba(11,20,36,.55),0 -1px 0 rgba(255,255,255,.06)}
.fondu-haut::after,.fondu-clair::after{display:none}
.final::after{background:linear-gradient(0deg,var(--nuit) 0%,rgba(11,20,36,.82) 34%,rgba(11,20,36,.3) 66%,rgba(11,20,36,.12) 100%)}

/* Accueil : fond animé discret (halos qui dérivent lentement, trame de points), sans répéter les secteurs */
.acc-ouv::before{display:none}
.acc-fond{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}
.acc-fond::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(19,35,58,.13) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 72% 42%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse 62% 58% at 72% 42%,#000 10%,transparent 72%)}
.acc-fond i{position:absolute;border-radius:50%;filter:blur(50px);animation:derive 28s ease-in-out infinite alternate;will-change:transform}
.acc-fond i:nth-child(1){width:48vmax;height:48vmax;right:-14vmax;top:-16vmax;background:radial-gradient(closest-side,rgba(201,213,226,.95),rgba(201,213,226,0))}
.acc-fond i:nth-child(2){width:30vmax;height:30vmax;right:16vw;bottom:-12vmax;background:radial-gradient(closest-side,rgba(184,57,79,.2),rgba(184,57,79,0));animation-duration:34s;animation-delay:-9s}
.acc-fond i:nth-child(3){width:28vmax;height:28vmax;left:-10vmax;top:26%;background:radial-gradient(closest-side,rgba(66,91,111,.2),rgba(66,91,111,0));animation-duration:40s;animation-delay:-16s}
@keyframes derive{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3vw,2.5vh,0) scale(1.06)}100%{transform:translate3d(2.5vw,-2vh,0) scale(.95)}}

/* Solutions : titres alignés d'une carte à l'autre (sous-grille), texte sur un panneau de verre lisible */
.solutions{row-gap:0;grid-template-rows:minmax(clamp(110px,20svh,300px),1fr) auto auto auto}
.solution{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0;min-height:0;padding:clamp(10px,1.1vw,14px)}
.solution-corps{grid-row:2/span 3;display:grid;grid-template-rows:subgrid;row-gap:8px;padding:clamp(16px,1.7vw,22px);border-radius:12px;background:rgba(11,20,36,.62);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.solution-media::after{background:linear-gradient(0deg,rgba(11,20,36,.5) 0%,rgba(11,20,36,0) 52%)}
.solution .solution-nom{align-self:end}
.solution .lien{align-self:end;justify-self:start}

/* Plateforme : fonctions sur cartes blanches, posées sur la photo */
.capacites--claires li,.sombre .capacites--claires li{background:linear-gradient(180deg,#FFFFFF 0%,#F6F4EF 100%);border-color:rgba(255,255,255,.7);box-shadow:0 24px 46px -30px rgba(0,0,0,.7);-webkit-backdrop-filter:none;backdrop-filter:none}
.sombre .capacites--claires li:hover{border-color:#fff;box-shadow:0 30px 54px -30px rgba(0,0,0,.8)}
.sombre .capacites--claires h3{color:var(--texte)}
.sombre .capacites--claires p{color:var(--texte-2)}
.sombre .capacites--claires li>svg{background:linear-gradient(145deg,rgba(122,30,46,.12),rgba(122,30,46,.04));stroke:var(--bordeaux)}
.sombre .capacites--claires li::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(201,213,226,.6),rgba(201,213,226,0) 62%)}

/* Plans : sélecteur de secteur en commande segmentée, bien visible */
.secteurs{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:5px;margin:0 0 clamp(16px,2.6svh,30px);border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -26px rgba(0,0,0,.6)}
.secteurs a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 24px;border:0;border-radius:999px;font:600 14.5px var(--police);letter-spacing:.02em;color:rgba(255,255,255,.84);text-decoration:none;transition:background-color .3s var(--doux),color .3s,box-shadow .3s}
.secteurs a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.secteurs a:hover{color:#fff;background:rgba(255,255,255,.1);border:0}
.secteurs a[aria-current="page"]{background:#F2F1EE;color:var(--nuit);box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
@media (max-width:759px){.secteurs{display:grid;width:100%}.secteurs a{padding:0 6px;gap:7px;font-size:13.5px;min-height:44px}}@media (max-height:820px){.secteurs a{min-height:40px}.secteurs{margin-bottom:12px}}
@media (min-width:1024px) and (max-height:960px){.secteurs a{min-height:40px}.secteurs{margin-bottom:12px}.offre-s .plans-note{display:none}.offre-s .plan-pour{margin-top:2px}.offre-s .offre-tete{margin-bottom:clamp(10px,1.8svh,24px)}}
@media (min-width:1024px) and (max-height:800px){.offre-s .offre-tete h1{font-size:clamp(26px,min(3.6vw,4.5svh),52px)}.offre-s .plan-liste{gap:3px}}

/* ---------- Retours du 3 novembre : vidéo d'accueil, activités visibles, boutons lisibles, transitions en dégradé, cartes sobres ---------- */
/* Accueil : diaporama vidéo des trois activités, fondu dans le fond clair */
.acc-ouv .hero-film{background:var(--fond)}
.acc-ouv .hero-film::after{background:linear-gradient(180deg,var(--fond) 0%,rgba(247,248,250,.9) 44%,rgba(247,248,250,.42) 72%,rgba(247,248,250,.28) 100%)}
@media (min-width:1024px){
  .acc-ouv .hero-film{left:28%}
  .acc-ouv .hero-film::after{background:linear-gradient(90deg,var(--fond) 0%,rgba(247,248,250,.82) 22%,rgba(247,248,250,.32) 52%,rgba(247,248,250,.14) 100%),linear-gradient(0deg,var(--fond) 0%,rgba(247,248,250,0) 24%),linear-gradient(180deg,rgba(247,248,250,.55) 0%,rgba(247,248,250,0) 22%)}
  .acc-ecrans .duo{width:88%;margin-left:auto}
}
/* Solutions : nom du secteur seul, activités en boutons */
.solutions{grid-template-rows:minmax(clamp(90px,16svh,260px),1fr) auto auto auto auto}
.solution{grid-row:span 5;border-radius:4px}
.solution-corps{grid-row:2/span 4;border-radius:2px}
.solution-nom{font-size:clamp(26px,2.4vw,34px)}
.solution-acts{display:flex;flex-wrap:wrap;gap:6px}
.solution-acts a{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border:1px solid rgba(255,255,255,.3);border-radius:2px;background:rgba(255,255,255,.07);font:600 12.5px/1 var(--police);letter-spacing:.02em;color:#fff;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.solution-acts a:hover{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
/* Liens d'action : de vrais boutons, discrets (hors des paragraphes) */
.lien:not(p .lien,li .lien,dd .lien){gap:10px;min-height:42px;padding:0 16px;border:1px solid rgba(19,35,58,.3);border-radius:2px;background:rgba(19,35,58,.04);color:var(--marine);font-size:14.5px;transition:background-color .25s,border-color .25s,color .25s}
.lien:not(p .lien,li .lien,dd .lien):hover{background:var(--marine);border-color:var(--marine);color:#fff}
:is(.sombre,.ev,.final,.panneau,.solution) .lien:not(p .lien,li .lien),.lien--clair:not(p .lien,li .lien){border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.07);color:#fff}
:is(.sombre,.ev,.final,.panneau,.solution) .lien:not(p .lien,li .lien):hover,.lien--clair:not(p .lien,li .lien):hover{background:#F2F1EE;border-color:#F2F1EE;color:var(--nuit)}
.metier{border-radius:2px;min-height:42px;padding:0 16px;background:rgba(11,20,36,.45);font-weight:600}
.metier::after{content:"→";margin-left:10px;opacity:.7;transition:transform .25s var(--doux)}
.metier:hover::after{transform:translateX(3px)}
/* Menu : chaque secteur et ses activités */
.menu{overflow-y:auto}
.menu-secteurs{display:grid;gap:14px 30px;margin:4px 0 12px;padding-left:34px}
@media (min-width:700px){.menu-secteurs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px}}
.menu-secteur{display:grid;align-content:start}
.menu-secteur a{text-decoration:none}
.menu-secteur-nom{display:flex;align-items:center;min-height:36px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.16);font:600 12.5px var(--police);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.menu-secteur a:not(.menu-secteur-nom){display:flex;align-items:center;min-height:32px;font:400 15.5px var(--police);color:rgba(214,224,236,.74)}
.menu-secteur a:not(.menu-secteur-nom)::before{content:"";width:10px;height:1px;margin-right:10px;background:var(--bordeaux-vif);transition:width .25s var(--doux)}
.menu-secteur a:hover,.menu-secteur a[aria-current="page"]{color:#fff}
.menu-secteur a:not(.menu-secteur-nom):hover::before{width:18px}
@media (max-width:699px){.menu-liens{justify-content:flex-start}.menu-liens>a,.menu-univers>a{font-size:clamp(28px,8vw,40px)}}

/* Enchaînement des écrans : plus de bord visible. L'écran suivant commence transparent et se fond dans la bande basse du
   précédent ; la photo d'un écran apparaît en fondu. Le contenu garde toute la hauteur de l'écran, les bandes de fondu
   s'ajoutent au-dessus et en dessous. */
:root{--recouvre:clamp(44px,7svh,96px)}
main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.plein{border-radius:0;box-shadow:none;border-top:var(--recouvre) solid transparent;background-color:transparent;background-image:linear-gradient(180deg,rgba(255,255,255,0) 0,var(--fond-s) var(--recouvre));min-height:calc(100svh - var(--tete-h) + var(--recouvre))}
main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.plein:has(+ section.plein){min-height:calc(100svh - var(--tete-h) + 2 * var(--recouvre))}
.final{--fond-s:var(--nuit)}
main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.plein .ev-fond,main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.final>img,main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.final>picture>img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--recouvre));mask-image:linear-gradient(180deg,transparent 0,#000 var(--recouvre))}
.ev-fond::before{content:"";position:absolute;z-index:1;inset:auto 0 0;height:var(--recouvre);background:linear-gradient(0deg,var(--nuit),rgba(11,20,36,0))}
@media (max-width:1023px){main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+.scene-s .fond-photo>img,main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+.scene-s .fond-photo>picture>img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--recouvre));mask-image:linear-gradient(180deg,transparent 0,#000 var(--recouvre))}}

/* Cartes sobres : numérotées plutôt qu'iconisées, angles nets, filet qui s'allonge au survol */
.capacites,.atouts,.garanties,.situations{counter-reset:n}
.capacites li,.atout,.garantie,.situations li{counter-increment:n;border-radius:2px;box-shadow:none}
.capacites li>svg,.atout>svg,.garantie i,.situations i{display:none}
.capacites h3::before,.atout h3::before,.garantie h3::before,.situations h3::before{content:counter(n,decimal-leading-zero);display:block;margin-bottom:10px;font:600 11.5px var(--police);letter-spacing:.18em;color:var(--bordeaux)}
.sombre :is(.capacites:not(.capacites--claires) h3,.atout h3,.garantie h3,.situations h3)::before{color:#E7A3B0}
.capacites li::before,.atout::before,.garantie::before,.situations li::before{inset:0 auto auto 0;width:28px;height:2px;border-radius:0;background:var(--bordeaux-vif);opacity:1;transition:width .45s var(--doux)}
.capacites li:hover::before,.atout:hover::before,.garantie:hover::before,.situations li:hover::before{width:100%;opacity:1}
.atout:hover,.garantie:hover,.capacites li:hover,.situations li:hover{transform:none}
.atout,.atout:nth-child(even){display:block}
.atout h3{margin-top:0}
.garantie{display:block}
.garantie h3{margin-top:0}
.demo-carte,.panneau,.offre,.plan{border-radius:4px}
.demo-carte>i{border-radius:2px}
.secteurs,.secteurs a{border-radius:4px}
.secteurs a[aria-current="page"]{border-radius:2px}
.art-secteurs a{border-radius:2px}.sombre :is(.capacites li,.atout,.garantie,.situations li)::before,.sombre .capacites--claires li::before{background:var(--bordeaux-vif)}
@media (min-width:1024px){.acc-ouv h1{font-size:clamp(34px,min(3.7vw,6.8svh),60px)}.acc-ouv h1>span{white-space:nowrap}}
/* fondu progressif (courbe douce, sans début ni fin perceptibles) */
:root{--recouvre:clamp(70px,11svh,130px)}
main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.plein{background-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--fond-s) 7%,transparent) calc(var(--recouvre) * .22),color-mix(in srgb,var(--fond-s) 30%,transparent) calc(var(--recouvre) * .46),color-mix(in srgb,var(--fond-s) 70%,transparent) calc(var(--recouvre) * .72),color-mix(in srgb,var(--fond-s) 93%,transparent) calc(var(--recouvre) * .9),var(--fond-s) var(--recouvre))}
main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.plein .ev-fond,main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.final>img,main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.final>picture>img{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.07) calc(var(--recouvre) * .3),rgba(0,0,0,.35) calc(var(--recouvre) * .6),rgba(0,0,0,.78) calc(var(--recouvre) * .9),#000 calc(var(--recouvre) * 1.2));mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.07) calc(var(--recouvre) * .3),rgba(0,0,0,.35) calc(var(--recouvre) * .6),rgba(0,0,0,.78) calc(var(--recouvre) * .9),#000 calc(var(--recouvre) * 1.2))}
.ev-fond::before{height:calc(var(--recouvre) * 1.2);background:linear-gradient(0deg,var(--nuit) 0,rgba(11,20,36,.93) 10%,rgba(11,20,36,.7) 28%,rgba(11,20,36,.3) 54%,rgba(11,20,36,.07) 78%,rgba(11,20,36,0) 100%)}main>:is(section.plein,.ouverture,.acc-ouv,.ouv-photo,.plans-hub)+section.plein{background-origin:border-box;background-repeat:no-repeat}
/* moins d'icônes décoratives : un trait plutôt qu'un pictogramme */
.benefices svg,.demo-carte>i,.plans-garanties svg,.confiance svg{display:none}
.benefices li::before,.plans-garanties span::before,.confiance li::before{content:"";flex:none;width:14px;height:2px;background:var(--bordeaux-vif)}
.plans-garanties span,.confiance li{gap:10px}
.demo-carte h2{margin-top:0}
@media (min-width:1024px) and (max-height:700px){.offre-s .offre-tete h1{font-size:clamp(26px,min(3.4vw,4.4svh),48px)}.secteurs a{min-height:36px}.offre-s .plan-detail{display:none}.offre-s .plan-liste li{font-size:13px}.offre-s .plan-liste{gap:2px;margin-top:8px;padding-top:8px}.offre-s .plan-prix b{font-size:clamp(30px,5.6svh,40px)}.estim{padding:12px 18px}.estim-l{margin-top:2px}.estim-groupe{margin-top:6px;padding-top:4px}.estim-res{margin-top:6px;padding-top:6px}.estim .bouton--or{margin-top:8px}#estimer .points{display:none}.faq summary{padding-block:7px;font-size:15.5px}#articles .art-carte-media{aspect-ratio:16/7}#articles .art-carte h3{font-size:19px}}
.plein.offre-s{padding-top:calc(var(--tete-h) + env(safe-area-inset-top) + clamp(10px,2.2svh,30px))}
@media (min-width:1024px) and (max-height:700px){.offre-s .offre-tete .label{display:none}.offre-s .offre-tete h1{margin-top:0}.offre-s .plan{padding:12px 18px}.offre-s .plan-cta{min-height:40px;margin-top:8px}.questions .faq summary{min-height:38px;padding:5px 0;font-size:16.5px}.questions .entete-duo{margin-bottom:10px}}
@media (min-width:1024px) and (max-height:650px){.offre-s .plan-liste li:nth-child(n+4){display:none}}
@media (min-width:1024px) and (max-height:760px){.offre-s>.c{position:relative}.offre-s .secteurs{position:absolute;right:var(--marge);top:0;margin:0}.offre-s .offre-tete{padding-right:min(440px,36vw)}.offre-s .offre-tete h1{max-width:none}}
@media (max-width:759px){.metier{min-height:36px;padding:0 11px;font-size:14px}.metier::after{margin-left:6px}.metiers{gap:6px}}
@media (max-width:759px) and (max-height:700px){.metiers>span{display:none}.ouverture .ouverture-intro{font-size:15.5px}}
@media (min-width:1024px) and (max-height:800px){.offre-s>.c{position:relative}.offre-s .secteurs{position:absolute;right:var(--marge);top:0;margin:0}.offre-s .secteurs a{min-height:38px;padding:0 16px}.offre-s .offre-tete{padding-right:min(420px,38vw)}.offre-s .offre-tete h1{max-width:none}.offre-s .offre-tete .label{display:none}.offre-s .offre-tete h1{margin-top:0}.offre-s .plan{padding:12px 18px}.offre-s .plan-cta{min-height:40px;margin-top:8px}.offre-s .plan-detail{display:none}}