@charset "UTF-8";
/* SOCLE — palette & typographie
   Registre visé : la tech contemporaine (Mistral, Apple Business, Meta) et non le corporate
   des années 2010. Ce qui change concrètement par rapport à une charte « sérieuse » classique :
   le blanc domine au lieu du sombre, la couleur arrive en DÉGRADÉ et en aplats larges au lieu
   d'un filet d'accent, les bordures disparaissent au profit de fonds teintés, les arrondis
   passent de 3 px à 20 px, et la typographie devient beaucoup plus grande et plus serrée.
   Aucune police téléchargée : la pile système donne exactement le rendu recherché (SF Pro sur
   Apple, Segoe sur Windows, Roboto sur Android) et ne coûte pas un octet — sur un site dont
   l'argument est le référencement, c'est non négociable.
---------------------------------------------------------- */
:root{
--encre:#0b0b14;--encre-2:#16161f;--txt:#1d1d1f;--txt-soft:#5b5b66;--txt-faible:#6e6e73;
--paper:#f5f5f7;--paper-2:#fafafc;--ligne:#e8e8ed;
--indigo:#4f46e5;--violet:#7c3aed;--corail:#ff6b4a;
--lavande:#eef0ff;--peche:#fff2ed;
--grad:linear-gradient(115deg,#4f46e5 0%,#7c3aed 48%,#ff6b4a 100%);
--grad-doux:linear-gradient(115deg,rgba(79,70,229,.10) 0%,rgba(124,58,237,.09) 48%,rgba(255,107,74,.10) 100%);
--wrap:1200px;--r:22px;--r-s:14px;--r-xl:34px;--pill:999px;
--ombre:0 1px 2px rgba(10,10,11,.04),0 12px 32px -12px rgba(10,10,11,.14);
--ombre-f:0 2px 4px rgba(10,10,11,.05),0 24px 56px -16px rgba(10,10,11,.22)}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--txt);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--indigo);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--encre);font-weight:600;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(38px,5.4vw,74px);letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(28px,3.5vw,46px)}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.3}
h4{font-size:17px;letter-spacing:-.015em}
p{margin:0 0 16px}p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--encre)}
ul,ol{margin:0 0 16px 20px}li{margin-bottom:8px}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}
::selection{background:rgba(79,70,229,.16)}

/* GABARIT
---------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
main{display:block;overflow:clip}
section{padding:88px 0}
.sect-paper{background:var(--paper)}
.sect-dark{background:var(--encre);color:#b9b9c2;position:relative;overflow:hidden}
.sect-dark h2,.sect-dark h3,.sect-dark h4,.sect-dark strong{color:#fff}
/* Le halo est ce qui empêche un aplat sombre de faire « bloc noir de 2012 » : une nappe de
   couleur très diffuse, jamais un motif. Décoratif, donc masqué aux lecteurs d'écran. */
.sect-dark::before{content:"";position:absolute;top:-30%;right:-10%;width:70vw;height:70vw;max-width:900px;max-height:900px;background:var(--grad);opacity:.16;filter:blur(90px);border-radius:50%;pointer-events:none}
.sect-dark .wrap{position:relative;z-index:1}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.02em;font-weight:600;color:var(--indigo);background:var(--lavande);padding:6px 14px;border-radius:var(--pill);margin-bottom:20px}
.sect-dark .eyebrow{color:#c9c3ff;background:rgba(124,58,237,.18)}
.sect-head{max-width:760px;margin-bottom:44px}
.sect-head p{color:var(--txt-soft);font-size:19px;line-height:1.55;margin-top:16px}
.sect-dark .sect-head p{color:#a3a3b0}
h2.titre{margin:0}
.lede{font-size:20px;color:var(--txt-soft)}
.center{text-align:center}
.center.sect-head{margin-left:auto;margin-right:auto}
.mt{margin-top:32px}
.mt-s{margin-top:14px}
/* Le dégradé sur du texte : réservé aux chiffres et aux mots qu'on veut faire ressortir.
   `color:transparent` seul supprimerait le texte si le fond n'est pas peint — d'où le repli. */
.grad-txt{color:var(--indigo);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* NAVIGATION
---------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:66px}
.brand{display:flex;align-items:center;gap:12px;color:var(--encre);flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:15px;letter-spacing:-.01em;font-weight:600}
.brand-txt i{font-style:normal;font-size:11.5px;letter-spacing:.02em;color:var(--txt-faible);font-weight:500}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0 0 0 auto;flex-wrap:wrap}
.nav-links li{margin:0}
.nav-links a{display:block;padding:8px 13px;font-size:15px;color:var(--txt);font-weight:450;border-radius:var(--pill)}
.nav-links a:hover{color:var(--indigo);background:var(--lavande);text-decoration:none}
.nav-links a[aria-current=page]{color:var(--indigo);font-weight:550}
.nav-cta{flex:0 0 auto;background:var(--encre);color:#fff;padding:10px 20px;border-radius:var(--pill);font-size:15px;font-weight:550}
.nav-cta:hover{background:var(--indigo);color:#fff;text-decoration:none}
.nav-sub{position:relative}
.nav-sub summary{list-style:none;cursor:pointer;padding:8px 13px;font-size:15px;font-weight:450;color:var(--txt);border-radius:var(--pill)}
.nav-sub summary::-webkit-details-marker{display:none}
.nav-sub summary::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 2px 7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);opacity:.5}
.nav-sub summary:hover{background:var(--lavande);color:var(--indigo)}
.nav-sub[data-actif] summary{color:var(--indigo);font-weight:550}
.nav-sub-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:#fff;border-radius:var(--r-s);padding:10px;box-shadow:var(--ombre-f)}
.nav-sub-panel a{display:block;padding:10px 12px;font-size:15px;color:var(--txt);border-radius:10px}
.nav-sub-panel a:hover{background:var(--paper);color:var(--indigo)}
.nav-sub-titre{display:block;padding:6px 12px 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-faible);font-weight:600}

/* HÉROS
---------------------------------------------------------- */
.hero{position:relative;padding:96px 0 84px;overflow:hidden;background:#fff}
/* Deux nappes de couleur au lieu d'un fond plein : c'est ce qui donne la lumière et
   l'optimisme sans jamais nuire à la lisibilité du texte, qui reste noir sur blanc. */
.hero::before{content:"";position:absolute;top:-320px;left:-160px;width:900px;height:900px;background:var(--grad);opacity:.13;filter:blur(110px);border-radius:50%;pointer-events:none}
.hero::after{content:"";position:absolute;top:-180px;right:-220px;width:700px;height:700px;background:radial-gradient(circle,rgba(255,107,74,.20),transparent 65%);filter:blur(70px);border-radius:50%;pointer-events:none}
.hero .wrap{position:relative;z-index:1;max-width:1000px}
.hero h1{margin-bottom:24px}
.hero .rec-lede{font-size:clamp(18px,2vw,22px);line-height:1.5;max-width:720px;color:var(--txt-soft)}
.hero .rec-lede strong{color:var(--encre)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chip{display:inline-block;padding:8px 16px;background:var(--paper);border-radius:var(--pill);font-size:14.5px;color:var(--txt-soft);font-weight:450}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-block;padding:14px 28px;border-radius:var(--pill);font-size:16px;font-weight:550;letter-spacing:-.01em;border:0;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-or{background:var(--encre);color:#fff}
.btn-or:hover{background:var(--indigo);box-shadow:0 10px 28px -8px rgba(79,70,229,.6)}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.hero .btn-ghost{background:var(--paper);color:var(--encre);box-shadow:none}
.hero .btn-ghost:hover{background:#ececf1}
.btn-ink{background:var(--encre);color:#fff}.btn-ink:hover{background:var(--indigo)}
.btn-line{background:var(--paper);color:var(--encre)}.btn-line:hover{background:#ececf1}
.fil{font-size:14px;color:var(--txt-faible);padding:16px 0 0}
.fil a{color:var(--txt-faible)}.fil a:last-child{color:var(--txt)}

/* CHIFFRES CLÉS
---------------------------------------------------------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.chiffre{background:var(--paper);border-radius:var(--r);padding:34px 24px;text-align:center}
.sect-dark .chiffre{background:rgba(255,255,255,.06)}
.chiffre b{display:block;font-size:clamp(36px,4.4vw,52px);line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--indigo);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chiffre span{display:block;margin-top:12px;font-size:15px;color:var(--txt-soft);letter-spacing:-.01em}
.sect-dark .chiffre span{color:#a3a3b0}

/* CARTES
---------------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.carte{background:var(--paper);border-radius:var(--r);padding:32px 28px;display:block;color:inherit;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.carte h3{margin-bottom:10px}
.carte p{font-size:16px;color:var(--txt-soft);line-height:1.55}
a.carte:hover{text-decoration:none;transform:translateY(-3px);background:#fff;box-shadow:var(--ombre-f)}
.sect-paper .carte{background:#fff}
.sect-paper a.carte:hover{box-shadow:var(--ombre-f)}
.sect-dark .carte{background:rgba(255,255,255,.06)}
.sect-dark .carte p{color:#a3a3b0}
.sect-dark a.carte:hover{background:rgba(255,255,255,.11)}
.carte-num{display:inline-block;font-size:12.5px;letter-spacing:.02em;font-weight:600;color:var(--indigo);background:var(--lavande);padding:4px 11px;border-radius:var(--pill);margin-bottom:16px}
.sect-dark .carte-num{color:#c9c3ff;background:rgba(124,58,237,.2)}
.carte .suite{display:inline-block;margin-top:16px;font-size:15.5px;font-weight:550;color:var(--indigo)}
a.carte:hover .suite{text-decoration:underline}

/* LISTES DE LIVRABLES
---------------------------------------------------------- */
.coches{list-style:none;margin:0}
.coches li{position:relative;padding-left:30px;margin-bottom:12px;font-size:16.5px;line-height:1.55}
.coches li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;background:var(--grad);opacity:.16}
.coches li::after{content:"";position:absolute;left:5px;top:12.5px;width:6px;height:3px;border-left:1.8px solid var(--indigo);border-bottom:1.8px solid var(--indigo);transform:rotate(-45deg)}
.sect-dark .coches li::after{border-color:#c9c3ff}
.coches strong{color:var(--encre)}
.sect-dark .coches strong{color:#fff}

/* TABLEAUX (tarifs, comparatifs)
---------------------------------------------------------- */
.tbl{background:var(--paper);border-radius:var(--r);overflow:hidden}
.sect-paper .tbl{background:#fff}
.tbl table{font-size:16px}
.tbl th,.tbl td{padding:20px 24px;text-align:left;vertical-align:top}
.tbl thead th{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-faible);font-weight:600;padding-bottom:8px}
.tbl thead th.droite{text-align:right}
.tbl tbody tr+tr td{border-top:1px solid var(--ligne)}
.sect-paper .tbl tbody tr+tr td{border-top-color:var(--paper)}
.tbl td.prix{white-space:nowrap;font-weight:600;color:var(--encre);text-align:right;font-size:19px;letter-spacing:-.02em}
.tbl td.prix.libre{font-weight:450;white-space:normal;font-size:16px}
.tbl .sous{display:block;color:var(--txt-soft);font-size:15px;font-weight:400;margin-top:4px}
.tbl-note{font-size:15px;color:var(--txt-soft);margin-top:16px}
.scroll-x{overflow-x:auto}

/* LES ESPACES (argument d'autorité)
---------------------------------------------------------- */
.espaces{background:var(--paper);border-radius:var(--r);overflow:hidden}
.sect-dark .espaces{background:rgba(255,255,255,.06)}
.espace{display:grid;grid-template-columns:160px 96px 1fr 220px;gap:20px;align-items:baseline;padding:20px 26px;transition:background .2s ease}
.espace:hover{background:rgba(79,70,229,.05)}
.sect-dark .espace:hover{background:rgba(255,255,255,.05)}
.espace+.espace{box-shadow:inset 0 1px 0 var(--ligne)}
.sect-dark .espace+.espace{box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.espace b{font-size:18px;color:var(--encre);letter-spacing:-.02em;font-weight:600}
.sect-dark .espace b{color:#fff}
.espace .m2{font-variant-numeric:tabular-nums;font-weight:600;font-size:17px;color:var(--indigo);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.espace .usage{font-size:16px;color:var(--txt-soft)}
.sect-dark .espace .usage{color:#a3a3b0}
.espace .adr{font-size:14.5px;color:var(--txt-faible);text-align:right}
/* Sur fond sombre, le gris des adresses tombe à 3,9:1 — sous le seuil AA. Il s'éclaircit. */
.sect-dark .espace .adr{color:#9a9aad}

/* RÉFÉRENCES
---------------------------------------------------------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:30px 52px}
/* Les logos fournis ont des rapports très différents (carré pour Perrier, 5:1 pour France 3) :
   une hauteur fixe rendait les uns minuscules et les autres énormes. On borne les DEUX côtés.
   Et `brightness` n'est pas cosmétique : sans elle, un logo clair (M6) devient invisible une
   fois passé en niveaux de gris — il disparaissait purement et simplement du mur. */
.logos img{max-height:32px;max-width:110px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(.55) contrast(1.12);opacity:.55;transition:opacity .22s,filter .22s}
.logos img:hover{filter:none;opacity:1}
.sect-dark .logos img{filter:grayscale(1) invert(1) brightness(1.6) contrast(1.1);opacity:.7}
.sect-dark .logos img:hover{opacity:1}
.marques-txt{margin-top:30px;text-align:center;font-size:15px;color:var(--txt-faible)}
.sect-dark .marques-txt{color:#86868b}

/* RÉALISATIONS & GALERIE
---------------------------------------------------------- */
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.demo{border-radius:var(--r);overflow:hidden;background:var(--paper)}
.sect-paper .demo{background:#fff}
.demo video,.demo img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.demo figcaption{padding:20px 22px;font-size:15.5px}
.demo figcaption b{display:block;color:var(--encre);font-weight:600;letter-spacing:-.015em;margin-bottom:3px}
.demo figcaption span{color:var(--txt-soft);font-size:15px}

/* ENCART D'AUTORITÉ
---------------------------------------------------------- */
.encart{background:var(--lavande);border-radius:var(--r);padding:30px 32px}
.encart p{font-size:16.5px;line-height:1.6;color:var(--txt-soft)}
.encart strong{color:var(--encre)}
.sect-paper .encart{background:var(--peche)}
.sect-dark .encart{background:rgba(255,255,255,.06)}
.sect-dark .encart p{color:#a3a3b0}
/* `.encart strong` est déclaré plus bas que `.sect-dark strong` et gagne à égalité de
   spécificité : sans cette ligne, le gras d'un encart posé sur fond sombre s'affiche en
   ENCRE sur du presque noir — illisible. Vu à la capture, pas à la lecture du code. */
.sect-dark .encart strong{color:#fff}

/* MÉTHODE (étapes numérotées)
---------------------------------------------------------- */
.etapes{counter-reset:e;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.etape{position:relative;padding-top:16px}
.etape::before{counter-increment:e;content:counter(e,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:0;margin-bottom:18px}
.etape h3{font-size:19px;margin-bottom:8px}
.etape p{font-size:16px;color:var(--txt-soft);line-height:1.55}
.sect-dark .etape p{color:#a3a3b0}

/* FAQ
---------------------------------------------------------- */
.faq details{border-radius:var(--r-s);transition:background .2s ease}
.faq details[open]{background:var(--paper)}
.sect-paper .faq details[open]{background:#fff}
.faq details+details{margin-top:4px}
.faq summary{cursor:pointer;list-style:none;padding:22px 56px 22px 22px;font-weight:550;color:var(--encre);position:relative;font-size:18px;letter-spacing:-.02em;border-radius:var(--r-s)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--paper)}
.sect-paper .faq summary:hover{background:#fff}
.faq details[open] summary:hover{background:transparent}
.faq summary::after{content:"";position:absolute;right:24px;top:29px;width:9px;height:9px;border-right:2px solid var(--indigo);border-bottom:2px solid var(--indigo);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .rep{padding:0 22px 24px;color:var(--txt-soft);font-size:16.5px;line-height:1.6;max-width:880px}
.faq .rep ul{margin-left:18px}

/* APPEL À L'ACTION FINAL
---------------------------------------------------------- */
/* La section est encartée et arrondie plutôt que pleine largeur : le bloc sombre devient un
   objet posé sur la page, pas un pied de page qui commence trop tôt. */
.cta{padding:0 0 88px;background:#fff}
.cta-boite{position:relative;overflow:hidden;background:var(--encre);border-radius:var(--r-xl);padding:72px 60px;color:#b9b9c2}
.cta-boite::before{content:"";position:absolute;bottom:-40%;left:-8%;width:60%;padding-top:60%;background:var(--grad);opacity:.22;filter:blur(80px);border-radius:50%;pointer-events:none}
.cta-boite>*{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:16px;max-width:700px}
.cta p{max-width:680px;color:#a3a3b0;font-size:18px;line-height:1.55}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta .btn-or{background:#fff;color:var(--encre)}
.cta .btn-or:hover{background:var(--indigo);color:#fff}
.cta-nap{margin-top:28px;font-size:15px;color:#86868b}
.cta-nap a{color:#c9c3ff}

/* FORMULAIRE
---------------------------------------------------------- */
.form{display:grid;gap:18px;max-width:660px}
.form label{font-size:14.5px;color:var(--txt-soft);font-weight:500;display:block;margin-bottom:7px}
.form .sous-label{color:var(--txt-faible);font-weight:400}
.form input,.form select,.form textarea{width:100%;padding:14px 16px;border:0;box-shadow:inset 0 0 0 1px var(--ligne);border-radius:var(--r-s);font:inherit;font-size:16px;background:#fff;color:var(--txt)}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:inset 0 0 0 2px var(--indigo);outline:none}
.form textarea{min-height:150px;resize:vertical}
.form .duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* PIED DE PAGE
---------------------------------------------------------- */
.foot-bar{background:var(--paper);color:var(--txt-soft);text-align:center;padding:26px 0;font-size:15.5px}
.foot-bar a{color:var(--encre);font-weight:550}
.foot-bar span{display:inline-block;margin:0 14px}
footer.site{background:#fff;color:var(--txt-soft);padding:64px 0 34px;font-size:15.5px}
footer.site h3{color:var(--encre);font-size:13px;letter-spacing:.02em;font-weight:600;margin-bottom:16px}
footer.site a{color:var(--txt-soft);display:block;padding:6px 0}
footer.site a:hover{color:var(--indigo);text-decoration:none}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.foot-nap{margin-top:48px;padding-top:26px;border-top:1px solid var(--ligne);font-size:14.5px;line-height:1.8;color:var(--txt-faible)}
.foot-nap strong{color:var(--txt)}
.foot-legal{margin-top:16px;font-size:14.5px}
.foot-legal a{display:inline;padding:0}
.foot-social{margin-top:22px;display:flex;gap:16px}
.foot-social a{padding:0}
.foot-social svg{fill:var(--txt-faible);width:21px;height:21px}
.foot-social a:hover svg{fill:var(--indigo)}
#haut{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--encre);display:none;align-items:center;justify-content:center;z-index:800;box-shadow:var(--ombre-f)}
#haut.show{display:flex}
#haut:hover{background:var(--indigo)}
#haut svg{fill:#fff;width:20px;height:20px}

/* APPARITION AU DÉFILEMENT
   Volontairement minuscule : 10 px et 500 ms. Un site B2B qui fait valser ses blocs a l'air
   d'une démo, pas d'un prestataire. `.vu` est posée par le JS ; sans JS, tout reste visible. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.btn:hover,a.carte:hover{transform:none}
html{scroll-behavior:auto}}

/* RESPONSIVE
---------------------------------------------------------- */
@media (max-width:1040px){
.g4{grid-template-columns:repeat(2,1fr)}.etapes{grid-template-columns:repeat(2,1fr)}
.chiffres{grid-template-columns:repeat(2,1fr)}
.espace{grid-template-columns:150px 84px 1fr;gap:14px}
.espace .adr{grid-column:1/-1;text-align:left;margin-top:-8px}
.demos{grid-template-columns:repeat(2,1fr)}
.foot-cols{grid-template-columns:repeat(2,1fr)}
.cta-boite{padding:56px 40px}}
@media (max-width:800px){
.nav .wrap{flex-wrap:wrap;min-height:0;padding-top:12px;padding-bottom:10px;gap:10px}
.nav-links{order:3;margin:0;width:100%;justify-content:flex-start;gap:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;
/* Un dégradé sur le bord droit signale qu'il reste des entrées à faire défiler : sans lui,
   la dernière entrée coupée passe pour un défaut d'affichage. */
-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
.nav-links::-webkit-scrollbar{display:none}
.nav-cta{margin-left:auto}
.nav-links li{flex:0 0 auto}
.nav-links a,.nav-sub summary{padding:7px 12px;font-size:14.5px;white-space:nowrap}
.nav-sub-panel{position:fixed;left:12px;right:12px;top:auto;min-width:0;margin-top:10px}
.g2,.g3,.g4,.demos,.etapes{grid-template-columns:1fr}
section{padding:60px 0}
.hero{padding:56px 0 52px}
.sect-head{margin-bottom:32px}
.form .duo{grid-template-columns:1fr}
.cta{padding-bottom:60px}
.cta-boite{padding:44px 26px;border-radius:26px}
.espace{grid-template-columns:1fr auto;gap:8px;padding:18px 20px}
.espace .usage{grid-column:1/-1}
/* Un tableau de 3 colonnes dans 390 px donne trois colonnes d'un mot de large, illisibles.
   Sur mobile chaque ligne devient un BLOC : intitulé, ce qui est compris, puis le prix
   détaché. L'en-tête passe en lecture d'écran seule — ça reste un vrai tableau. */
.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tbl tr{display:block;padding:20px 22px}
.tbl tbody tr+tr{box-shadow:inset 0 1px 0 var(--ligne)}
.tbl tbody tr+tr td{border-top:0}
.tbl td{display:block;padding:0}
.tbl td+td{margin-top:8px;color:var(--txt-soft);font-size:16px}
.tbl td.prix{text-align:left;margin-top:14px;font-size:22px}
.tbl td.prix.libre{font-size:16px}
.logos{gap:24px 34px}
.logos img{max-height:28px;max-width:92px}}