/* ==========================================================================
   DashCar — feuille de style unique du site public.
   Refonte « Instrument » — 29/08/2026.

   Un seul fichier pour toutes les pages : elles partagent le meme gabarit.
   Aucune dependance, aucun framework, aucun build CSS.

   PRINCIPE DE COULEUR — a lire avant de toucher un token.
   L'ambre existe en DEUX valeurs, et elles ne sont pas interchangeables :
     --accent      #AD4B00  fonds CLAIRS. Texte 4.71:1 sur --paper-2,
                            et blanc-sur-ambre 5.55:1 quand il sert de fond.
     --accent-lift #F5A83C  fonds SOMBRES. 9.45:1 sur --night.
   L'ancienne valeur unique (#D97400) echouait AA partout sur fond clair :
   surtitres 2.97:1, liens de carte 3.26:1, bouton principal 3.26:1.
   Ne jamais eclaircir --accent ni assombrir --accent-lift sans remesurer.
   ========================================================================== */

:root{
  /* --- surfaces sombres --- */
  --night:#0D1218;
  --night-2:#131A22;
  --night-3:#1B242E;
  --line-dark:#25303C;

  /* --- surfaces claires --- */
  --paper:#F7F5F2;
  --paper-2:#EFECE7;
  --white:#FFFFFF;
  --line:#E3DFD8;
  --line-strong:#D2CCC2;

  /* --- encres --- */
  --ink:#11161C;
  --ink-2:#39424D;
  --muted:#5E6773;
  --steel:#A6B7C9;
  --muted-dark:#93A1B0;

  /* --- accent de marque --- */
  --accent:#AD4B00;
  --accent-lift:#F5A83C;
  --accent-wash:rgba(173,75,0,.08);

  /* --- familles --- */
  --disp:"Archivo",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* --- rythme --- */
  --pad:clamp(20px,5vw,56px);
  --max:1200px;
  --sec:clamp(64px,8.5vw,124px);

  /* --- rayons et ombres : discrets, jamais decoratifs --- */
  --r-xs:3px;
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --sh-1:0 1px 2px rgba(13,18,24,.04);
  --sh-2:0 1px 2px rgba(13,18,24,.05), 0 12px 28px -18px rgba(13,18,24,.30);
  --sh-3:0 24px 60px -24px rgba(13,18,24,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Le seul garde-fou fiable contre un debordement lateral : aucune section
     ne peut elargir la page, quel que soit son contenu. */
  overflow-x:hidden;
}
/* height:auto est indispensable des lors qu'on declare width/height sur le
   <img> (on les declare partout, pour reserver la place et eviter les sauts
   de mise en page). Sans lui, l'attribut height du HTML l'emporte sur la
   largeur fluide et l'image est ECRASEE. Les rares images qui doivent avoir
   une hauteur imposee la redefinissent avec une specificite superieure. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
figure{margin:0}
button{font:inherit;color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap--narrow{max-width:940px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:12px 18px;z-index:200;font-family:var(--disp);font-weight:600;
  border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* ANNEAU DE FOCUS — meme piege que le texte : l'ambre se dedouble.
   L'anneau doit atteindre 3:1 contre la couleur ADJACENTE (WCAG 2.2, 1.4.11).
   --accent-lift #F5A83C mesure 9,45:1 sur --night mais seulement 1,83:1 sur
   --paper et 1,69:1 sur --paper-2 : sur toute la partie claire du site,
   l'anneau etait quasi invisible au clavier. La valeur par defaut est donc
   --accent (5,10 / 4,71 / 5,55 sur clair, 3,27 sur un bouton encre), et
   --accent-lift n'est repris que dans les blocs sombres.
   .pagehead, .hero-shot et .endcta sont sombres SANS porter la classe .dark :
   les oublier laissait un anneau sombre sur fond sombre. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.dark :focus-visible,
.topbar :focus-visible,
footer :focus-visible,
.pagehead :focus-visible,
.hero-shot :focus-visible,
.facts :focus-visible,
.endcta :focus-visible{outline-color:var(--accent-lift)}
/* Le lien d'evitement a lui-meme un fond --accent : son anneau doit trancher
   dessus, pas se confondre avec. */
.skip:focus-visible{outline-color:var(--paper)}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
h1,h2,h3,h4,.disp{
  font-family:var(--disp);font-weight:700;
  font-variation-settings:"wdth" 110;
  letter-spacing:-.022em;text-wrap:balance;margin:0;color:var(--ink);
}
h1{
  font-size:clamp(36px,5vw,62px);line-height:1.02;font-weight:800;
  font-variation-settings:"wdth" 116;letter-spacing:-.032em;
}
h2{
  font-size:clamp(27px,3.4vw,44px);line-height:1.08;
  font-variation-settings:"wdth" 112;letter-spacing:-.028em;
}
h3{font-size:20px;line-height:1.28;font-variation-settings:"wdth" 106;letter-spacing:-.016em}

p{margin:0 0 16px;max-width:66ch}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--ink)}

.lede{font-size:clamp(17.5px,1.6vw,20px);line-height:1.55;color:var(--ink-2);max-width:60ch}

/* Surtitre : filet court + mono espacee. C'est la signature typographique
   du site — elle remplace les pastilles colorees des gabarits tout faits. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 20px;max-width:none;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}

/* En-tete de section : surtitre + titre + chapeau, avec une respiration
   constante partout. Aucune page ne redefinit ces marges a la main. */
.sec-head{margin-bottom:clamp(34px,4.5vw,54px);max-width:760px}
.sec-head .lede{margin-top:18px}
.sec-head h2 + .lede{margin-top:18px}

/* ==========================================================================
   SECTIONS ET SURFACES
   ========================================================================== */
section{padding:var(--sec) 0}
section.tint{background:var(--paper-2);border-block:1px solid var(--line)}
section.dark{background:var(--night);color:var(--paper)}
section.dark h1,section.dark h2,section.dark h3,section.dark h4{color:#fff}
section.dark p{color:var(--steel)}
section.dark .lede{color:var(--steel)}
section.dark .eyebrow{color:var(--accent-lift)}
section.dark strong{color:#fff}

/* ==========================================================================
   EN-TETE
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(13,18,24,.92);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line-dark);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
/* Etat par defaut = OPAQUE. Le script n'ajoute `at-top` que lorsqu'il a la
   certitude d'etre en haut de page : sans JS, l'en-tete reste lisible.

   INVARIANT : `at-top` rend l'en-tete TRANSPARENT, et son texte est blanc.
   Toute page doit donc commencer par un bloc SOMBRE — aujourd'hui `.hero-shot`
   (accueil) ou `.pagehead` (les six autres). Une page qui debuterait par une
   section claire aurait une navigation blanche sur fond clair, illisible.
   Si un tel gabarit apparait, lui retirer `at-top` plutot que d'eclaircir le
   texte : c'est l'en-tete opaque qui est l'etat sur. */
.topbar.at-top{background:transparent;border-bottom-color:transparent}
.topbar > .wrap{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);height:74px}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;flex:0 0 auto}
.logo .mark{
  font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 120;
  font-size:20px;letter-spacing:-.035em;color:#fff;white-space:nowrap;
}
.logo .mark em{color:var(--accent-lift);font-style:normal}
/* LOGO OFFICIEL — hauteur imposee, largeur libre. Jamais l'inverse : c'est
   ainsi qu'un logo se retrouve ecrase. Les valeurs doivent rester egales a
   celles passees a logo_html() dans tools/build.py, sinon la place reservee
   par les attributs width/height ne correspond pas au rendu.
   34 px et non 24 : le logo est un bloc EMPILE (calandre au-dessus du mot),
   le mot « DashCar » n'occupe donc que la moitie basse de la hauteur. */
.logo__img{height:34px;width:auto;display:block;align-self:center}
footer .logo__img{height:30px}
@media (max-width:1080px){ .logo__img{height:30px} }
.topbar > .wrap > nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,26px);flex:0 1 auto;min-width:0}
.topbar > .wrap > nav a{
  position:relative;color:var(--steel);text-decoration:none;
  font-size:14.5px;font-weight:500;padding:6px 0;white-space:nowrap;
  transition:color .18s var(--ease);
}
.topbar > .wrap > nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--accent-lift);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.topbar > .wrap > nav a:hover,.topbar > .wrap > nav a:focus-visible{color:#fff}
.topbar > .wrap > nav a:hover::after{transform:scaleX(1)}
.topbar > .wrap > nav a[aria-current="page"]{color:#fff}
.topbar > .wrap > nav a[aria-current="page"]::after{transform:scaleX(1)}

.topbar__cta{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--disp);font-weight:600;font-size:14px;
  font-variation-settings:"wdth" 104;letter-spacing:-.005em;
  padding:10px 18px;border-radius:var(--r-sm);text-decoration:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.topbar__cta:hover{background:var(--accent-lift);border-color:var(--accent-lift);color:var(--night)}

/* --- bouton et panneau mobiles --- */
.navtoggle{
  display:none;align-items:center;gap:9px;flex:none;
  background:transparent;border:1px solid var(--line-dark);border-radius:var(--r-sm);
  color:var(--paper);padding:9px 13px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.navtoggle:hover{border-color:var(--muted-dark)}
.navtoggle .bars{position:relative;width:16px;height:10px;flex:none}
.navtoggle .bars i{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .25s var(--ease),opacity .18s var(--ease);
}
.navtoggle .bars i:nth-child(1){top:0}
.navtoggle .bars i:nth-child(2){top:4.25px}
.navtoggle .bars i:nth-child(3){top:8.5px}
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-4.25px) rotate(-45deg)}

.navpanel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--night);border-bottom:1px solid var(--line-dark);
  box-shadow:var(--sh-3);
}
.navpanel[hidden]{display:none}
.navpanel .wrap{display:block;padding-top:8px;padding-bottom:24px}
.navpanel nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 2px;color:var(--steel);text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:18px;
  font-variation-settings:"wdth" 106;letter-spacing:-.015em;
  border-bottom:1px solid var(--line-dark);
}
.navpanel nav a::after{content:"→";color:var(--muted-dark);font-family:var(--mono);font-size:14px}
.navpanel nav a[aria-current="page"]{color:#fff}
.navpanel nav a[aria-current="page"]::after{color:var(--accent-lift)}
.navpanel .btn{margin-top:22px;width:100%;justify-content:center}

/* Bascule desktop -> mobile. 1080px et non 940 : a 1024 la nav a six entrees
   et le bouton d'action se chevauchaient. */
@media (max-width:1080px){
  .topbar > .wrap > nav,.topbar__cta{display:none}
  .navtoggle{display:inline-flex}
  .topbar > .wrap{height:64px}
}
@media (min-width:1081px){
  .navpanel{display:none}
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-variation-settings:"wdth" 104;
  font-size:15px;letter-spacing:-.008em;line-height:1.2;
  padding:14px 24px;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease);
  /* 44px de haut minimum : cible tactile confortable sur telephone. */
  min-height:46px;
}
.btn:active{transform:translateY(1px)}

/* Principal sur fond CLAIR : encre pleine. Le blanc sur ambre ne passait pas
   AA (3.26:1) ; l'encre pleine passe a 18:1 et fait plus « marque ». */
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:#000;border-color:#000}

/* Accent : reserve a UN bouton par ecran, celui qui mene a la boutique. */
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:#8D3D00;border-color:#8D3D00}

/* Secondaire sur fond clair */
.btn-line{background:var(--white);border-color:var(--line-strong);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--white)}

/* Sur fond SOMBRE */
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:#fff;border-color:#fff}
.btn-ghost{border-color:rgba(166,183,201,.42);color:var(--paper);background:transparent}
.btn-ghost:hover{border-color:var(--accent-lift);color:var(--accent-lift)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sec-head .btn-row{margin-top:28px}
@media (max-width:460px){
  .btn-row{gap:10px}
  .btn-row .btn{width:100%}
}

/* Lien flechhe, discret */
.go{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--disp);font-weight:600;font-size:14.5px;
  font-variation-settings:"wdth" 104;color:var(--accent);text-decoration:none;
  border-bottom:1.5px solid rgba(173,75,0,.28);padding-bottom:2px;
  transition:border-color .18s var(--ease),gap .18s var(--ease);
}
.go:hover{border-bottom-color:var(--accent);gap:11px}
section.dark .go{color:var(--accent-lift);border-bottom-color:rgba(245,168,60,.35)}
section.dark .go:hover{border-bottom-color:var(--accent-lift)}

/* ==========================================================================
   HEROS D'ACCUEIL
   ========================================================================== */
.hero-shot{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(520px,80vh,780px);
  background:var(--night);overflow:hidden;
  /* L'en-tete est transparent au chargement : le heros commence donc sous
     lui et remonte de sa hauteur. */
  margin-top:-74px;padding-top:74px;
}
.hero-shot__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
}
/* Le voile garantit la lisibilite du texte quelle que soit la photo : on ne
   depend jamais de la luminosite d'une image qu'on ne maitrise pas. */
.hero-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(8,12,17,.96) 0%, rgba(8,12,17,.78) 34%, rgba(8,12,17,.30) 68%, rgba(8,12,17,.55) 100%),
    linear-gradient(to right, rgba(8,12,17,.86) 0%, rgba(8,12,17,.34) 54%, transparent 80%);
}
.hero-shot .wrap{
  position:relative;z-index:1;width:100%;
  padding-top:clamp(96px,13vw,150px);padding-bottom:clamp(52px,7vw,86px);
}
.hero-shot h1{
  color:#fff;max-width:16ch;
  font-size:clamp(38px,6.4vw,74px);line-height:.98;
  font-variation-settings:"wdth" 118;font-weight:800;letter-spacing:-.036em;
}
.hero-shot h1 em{font-style:normal;color:var(--accent-lift)}
.hero-shot .lede{color:#D9E1EA;max-width:48ch;margin-top:24px;font-size:clamp(17px,1.7vw,19.5px)}
.hero-shot .btn-row{margin-top:36px}
@media (max-width:700px){
  .hero-shot__img{object-position:66% 50%}
  .hero-shot{min-height:auto;margin-top:-64px;padding-top:64px}
}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(245,168,60,.42);background:rgba(245,168,60,.10);
  color:var(--accent-lift);font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;padding:8px 15px;border-radius:var(--r-xs);
}
.hero-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-lift);flex:none}

/* ==========================================================================
   EN-TETE DES PAGES INTERIEURES
   ========================================================================== */
.pagehead{
  position:relative;background:var(--night);color:var(--paper);
  margin-top:-74px;
  padding:calc(74px + clamp(52px,7vw,92px)) 0 clamp(46px,6vw,74px);
  overflow:hidden;
}
.pagehead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 84% -25%, rgba(245,168,60,.13), transparent 62%);
}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{color:#fff;max-width:20ch}
.pagehead .lede{margin-top:20px;color:var(--steel);max-width:58ch}
.pagehead .eyebrow{color:var(--accent-lift)}
@media (max-width:1080px){
  .pagehead{margin-top:-64px;padding-top:calc(64px + clamp(44px,7vw,80px))}
}

.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dark);margin:0 0 20px;max-width:none;
}
.crumb a{color:var(--muted-dark);text-decoration:none;border-bottom:1px solid rgba(166,183,201,.28)}
.crumb a:hover{color:var(--accent-lift);border-bottom-color:var(--accent-lift)}

/* ==========================================================================
   BANDE DE CHIFFRES
   ========================================================================== */
.facts{background:var(--night-2);border-bottom:1px solid var(--line-dark)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding:clamp(24px,3vw,34px) clamp(16px,2.4vw,30px) clamp(24px,3vw,34px) 0}
.fact + .fact{padding-left:clamp(20px,3vw,38px);border-left:1px solid var(--line-dark)}
.fact b{
  display:block;font-family:var(--disp);font-weight:700;font-variation-settings:"wdth" 116;
  font-size:clamp(30px,3.6vw,42px);color:#fff;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.fact span{display:block;font-size:13.5px;color:var(--muted-dark);margin-top:10px;line-height:1.4;max-width:26ch}
@media (max-width:760px){
  .facts .wrap{grid-template-columns:1fr}
  .fact{padding:20px 0}
  .fact + .fact{padding-left:0;border-left:0;border-top:1px solid var(--line-dark)}
  .fact b{font-size:28px}
}

/* ==========================================================================
   GRILLES GENERIQUES
   ========================================================================== */
/* Un enfant de grille vaut min-width:auto par defaut : un tableau large
   elargit alors sa colonne et fait deborder la page entiere. On l'autorise
   a retrecir, le conteneur .tbl gere le defilement lateral. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.split > *{min-width:0}
.split--wide{grid-template-columns:1.05fr .95fr}
.split--sticky > :first-child{position:sticky;top:110px}
@media (max-width:900px){
  .split,.split--wide{grid-template-columns:1fr}
  .split--sticky > :first-child{position:static}
}

.split-shot{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,64px);align-items:center}
.split-shot > *{min-width:0}
.split-shot figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-dark);background:var(--night-2)}
.split-shot figure img{width:100%;display:block}
@media (max-width:900px){.split-shot{grid-template-columns:1fr}}

/* ==========================================================================
   CARTES PRODUIT
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 20px 22px;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--sh-2)}
.card .shot{
  background:
    radial-gradient(120% 90% at 50% 8%, #fff 0%, var(--paper-2) 78%);
  border-radius:var(--r-sm);margin:-2px -6px 18px;overflow:hidden;
}
/* Pas de mix-blend-mode ici : il grisait les visuels produit sur fond blanc
   et les rendait plus ternes que le fichier d'origine. */
.card .shot img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:10px}
.card h3{margin-bottom:8px}
.card .spec{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  color:var(--muted);text-transform:uppercase;margin-bottom:14px;line-height:1.5;
}
.card p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-bottom:18px;flex:1}
.card .go{align-self:flex-start}

/* Cartes sur fond sombre */
section.dark .card{background:var(--night-2);border-color:var(--line-dark)}
section.dark .card:hover{border-color:#35424F}
section.dark .card .shot{background:radial-gradient(120% 90% at 50% 8%, #222C36 0%, var(--night-3) 80%)}
section.dark .card p{color:var(--steel)}
section.dark .card .spec{color:var(--muted-dark)}

/* --- familles de produits : trois raccourcis en tete de gamme --- */
/* FILETS HORIZONTAUX UNIQUEMENT — et c'est deliberé.
   Un filet vertical pose avec `.fam + .fam` se retrouve sur la PREMIERE
   cellule de la deuxieme rangee des que la grille passe a la ligne : la
   colonne de gauche se decale alors de la largeur du filet et de son
   remplissage, et l'alignement vertical est rompu. Aucun selecteur CSS ne
   sait « premiere cellule de rangee » quand le nombre de colonnes vient de
   `auto-fit`. On ne pose donc que des filets horizontaux, insensibles au
   nombre de colonnes, et l'ecart entre colonnes fait la separation. */
.famrow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  column-gap:clamp(20px,2.6vw,34px);row-gap:0;
  border-top:1px solid var(--line);margin-bottom:clamp(36px,4.5vw,56px);
}
.fam{
  padding:22px 0 24px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;text-decoration:none;
}
.fam .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.fam b{font-family:var(--disp);font-weight:700;font-size:19px;font-variation-settings:"wdth" 108;letter-spacing:-.02em}
.fam span{font-size:14px;color:var(--muted);line-height:1.45}
@media (max-width:640px){
  .famrow{grid-template-columns:1fr}
  .fam{padding:18px 0 20px}
}

/* ==========================================================================
   CITATION DE L'ATTESTATION
   ========================================================================== */
.attest{
  margin:0;padding:26px 28px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);position:relative;overflow:hidden;
}
.attest::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.attest.on-dark{background:var(--night-3);border-color:var(--line-dark);box-shadow:none}
.attest.on-dark::before{background:var(--accent-lift)}
.attest blockquote{
  margin:0 0 16px;font-family:var(--disp);font-weight:600;
  font-variation-settings:"wdth" 104;font-size:clamp(17px,1.7vw,19.5px);line-height:1.4;
  letter-spacing:-.018em;color:var(--ink);text-wrap:balance;
}
.attest.on-dark blockquote{color:#fff}
.attest figcaption{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:52ch}
.attest figcaption span{color:var(--ink-2)}
.attest.on-dark figcaption{color:var(--muted-dark)}
.attest.on-dark figcaption span{color:var(--steel)}

/* ==========================================================================
   GRILLES DE RAISONS — filets fins, jamais de « mosaique » a fond colore
   ========================================================================== */
/* Meme regle que .famrow : filets horizontaux seulement. */
.reasons{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  column-gap:clamp(24px,3vw,44px);row-gap:0;
  border-top:1px solid var(--line-dark);
}
.reason{padding:28px 0 30px;border-bottom:1px solid var(--line-dark)}
.reason .ic{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  color:var(--accent-lift);text-transform:uppercase;margin-bottom:14px;
}
.reason h3{font-size:18px;margin-bottom:9px;color:#fff}
.reason p{font-size:14.5px;line-height:1.58;margin:0;color:var(--steel);max-width:38ch}

.reasons-light{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  column-gap:clamp(24px,3vw,44px);row-gap:0;
  border-top:1px solid var(--line);
}
.reasons-light .reason{border-bottom-color:var(--line)}
.reasons-light .reason .ic{color:var(--accent)}
.reasons-light .reason h3{color:var(--ink)}
.reasons-light .reason p{color:var(--ink-2)}

@media (max-width:640px){
  .reason{padding:24px 0 26px}
}

/* ==========================================================================
   ETAPES NUMEROTEES
   ========================================================================== */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:52px 1fr;gap:0 24px;padding:24px 0;border-bottom:1px solid var(--line)}
.step .n{
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;
  color:var(--accent);font-variant-numeric:tabular-nums;padding-top:5px;
}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0}
section.dark .steps,section.dark .step{border-color:var(--line-dark)}
section.dark .step .n{color:var(--accent-lift)}
section.dark .step p{color:var(--steel)}
@media (max-width:560px){.step{grid-template-columns:1fr;gap:8px}}

/* ==========================================================================
   RESEAU D'INSTALLATEURS
   ========================================================================== */
.net{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.spot{
  background:var(--night-2);border:1px solid var(--line-dark);border-radius:var(--r);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:5px;
  transition:border-color .2s var(--ease);
}
.spot:hover{border-color:#33404E}
.spot.flag{background:var(--night-3);border-color:rgba(245,168,60,.30)}
.spot .city{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lift)}
.spot h3{font-size:17.5px;margin:3px 0 2px;color:#fff}
.spot .hours{font-size:13.5px;color:var(--muted-dark);font-family:var(--mono);line-height:1.55}
.spot .links{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.spot .links a{
  display:inline-block;font-size:13.5px;color:var(--steel);text-decoration:none;
  border-bottom:1px solid rgba(166,183,201,.28);padding:6px 0 5px;
}
.spot .links a:hover{color:var(--accent-lift);border-bottom-color:var(--accent-lift)}
.spot .tag{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--night);background:var(--accent-lift);padding:3px 8px;border-radius:var(--r-xs);
  align-self:flex-start;margin-bottom:8px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:840px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--disp);font-weight:600;font-size:17.5px;font-variation-settings:"wdth" 104;
  letter-spacing:-.015em;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:20px 0;transition:color .18s var(--ease);
}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--mono);font-size:19px;flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 22px;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:70ch}
.faq a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(173,75,0,.3)}
.faq a:hover{border-bottom-color:var(--accent)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.cbox{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 26px;display:flex;flex-direction:column;
}
.cbox .k{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.cbox .v{
  font-family:var(--disp);font-weight:700;font-size:20px;
  font-variation-settings:"wdth" 106;letter-spacing:-.022em;line-height:1.25;
}
.cbox .v a{display:inline-block;padding:3px 0;text-decoration:none;
  border-bottom:1.5px solid rgba(173,75,0,.3);transition:border-color .18s var(--ease)}
.cbox .v a:hover{border-bottom-color:var(--accent)}
.cbox .note{font-size:14px;line-height:1.55;color:var(--muted);margin-top:10px}
.cbox .note a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(173,75,0,.3)}
.cbox .note a:hover{border-bottom-color:var(--accent)}

/* Trois contacts sur fond sombre (accueil) */
.contact-dark{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.cdark{
  background:var(--night-2);border:1px solid var(--line-dark);border-radius:var(--r);
  padding:22px 22px 24px;
}
.cdark .k{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-lift);margin-bottom:12px;
}
.cdark .v{
  font-family:var(--disp);font-weight:700;font-size:21px;font-variation-settings:"wdth" 108;
  letter-spacing:-.025em;line-height:1.2;
}
.cdark .v a{color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(245,168,60,.4)}
.cdark .v a:hover{border-bottom-color:var(--accent-lift)}
.cdark p{font-size:14px;line-height:1.55;color:var(--steel);margin:10px 0 0}
.cdark p a{color:var(--accent-lift);text-decoration:none;border-bottom:1px solid rgba(245,168,60,.35)}

/* ==========================================================================
   TABLEAU
   ========================================================================== */
.tbl{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.tbl table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
.tbl th{
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 18px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper-2);
}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.5}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}

/* ==========================================================================
   BANDE VISUELLE PLEINE LARGEUR
   ========================================================================== */
.band{position:relative;background:var(--night);overflow:hidden;border-block:1px solid var(--line-dark)}
.band img{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;object-position:center 42%;display:block}
.band figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px var(--pad);
  background:linear-gradient(transparent,rgba(8,12,17,.92));
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}

/* ==========================================================================
   SECTION 70MAI GLOBAL
   ========================================================================== */
section.global{background:var(--night-2);border-block:1px solid var(--line-dark)}
.globalcard{border:1px solid var(--line-dark);border-radius:var(--r);background:var(--night);overflow:hidden}
.globalcard__head{
  padding:15px 24px;border-bottom:1px solid var(--line-dark);background:var(--night-3);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-dark);
}
.globalcard__row{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:30px 24px}
.globalcard .zone{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-lift)}
.globalcard .country{
  font-family:var(--disp);font-weight:700;font-variation-settings:"wdth" 114;
  font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em;color:#fff;margin-top:5px;line-height:1;
}
.globalcard .who{font-size:15px;color:var(--steel);margin-top:10px;max-width:46ch}
.globalcard .who b{color:#fff;font-weight:600}
.globalcard__foot{
  padding:15px 24px;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:11.5px;color:var(--muted-dark);line-height:1.65;
}
.globalcard__foot strong{color:var(--steel)}
.globe{font-size:clamp(28px,4vw,36px);line-height:1}
@media (max-width:760px){.globalcard__row{grid-template-columns:1fr;gap:18px}}

/* ==========================================================================
   PHOTOS REELLES DU MAGASIN
   ========================================================================== */
/* Le nombre de colonnes vient du nombre de cadres, pas de la place libre :
   `auto-fit` ouvrait une 4e colonne vide quand la fenetre etait large. */
.slotgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.slotgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.slotgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.slotgrid--2,.slotgrid--3{grid-template-columns:minmax(0,1fr)}}

.slot{
  position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:22px;text-align:center;margin:0;
}
section.dark .slot{border-color:var(--line-dark);background:var(--night-2)}
.slot .ic{font-size:20px;opacity:.4}
.slot b{font-family:var(--disp);font-weight:600;font-size:15px;font-variation-settings:"wdth" 104;color:var(--ink-2)}
section.dark .slot b{color:var(--steel)}
.slot span{font-family:var(--mono);font-size:11px;color:var(--muted);max-width:32ch;line-height:1.5}

/* Une photo reelle occupe EXACTEMENT le cadre en attente : meme 4/3, meme
   rayon, meme place dans la grille. */
.slot--photo{padding:0;border-color:var(--line)}
section.dark .slot--photo{border-color:var(--line-dark)}
.slot--photo picture,.slot--photo img{display:block;width:100%;height:100%}
.slot--photo img{object-fit:cover;transition:transform .6s var(--ease)}
.slot--photo:hover img{transform:scale(1.03)}
.slot--photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 16px 13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#fff;
  background:linear-gradient(to top,rgba(8,12,17,.88),rgba(8,12,17,0));
}

/* ==========================================================================
   APPEL A L'ACTION DE FIN DE PAGE
   ========================================================================== */
.endcta{background:var(--night-2);border-top:1px solid var(--line-dark)}
.endcta .wrap{padding-top:clamp(54px,7vw,88px);padding-bottom:clamp(54px,7vw,88px)}
.endcta h2{color:#fff;max-width:20ch}
.endcta p{color:var(--steel);margin-top:16px;max-width:56ch}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
footer{background:var(--night);color:var(--steel);padding:clamp(56px,7vw,84px) 0 40px;border-top:1px solid var(--line-dark)}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr;gap:34px}}
@media (max-width:560px){footer .cols{grid-template-columns:1fr;gap:30px}}
/* Intitules de colonnes : ce sont des h2 (voir le gabarit) pour ne pas creuser
   de saut de niveau dans le plan du document, mais ils se lisent comme des
   etiquettes. La taille est donc fixee ici, pas heritee de h2. */
footer .foot-h{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-dark);margin:0 0 16px;
  line-height:1.4;font-variation-settings:normal;
}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
footer a{color:var(--steel);text-decoration:none;font-size:14.5px;transition:color .18s var(--ease)}
footer a:hover{color:var(--accent-lift)}
footer p{font-size:14.5px;color:var(--muted-dark);max-width:42ch;line-height:1.6}
footer .logo{margin-right:0;margin-bottom:16px;display:inline-flex}

.legal{
  margin-top:clamp(40px,5vw,58px);padding-top:26px;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:22px;font-size:13px;color:var(--muted-dark);
}
.mentions{display:flex;flex-direction:column;gap:8px}
.mentions p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted-dark);max-width:80ch}
.mentions strong{color:var(--steel);font-weight:600}
.mentions .num{font-family:var(--mono);font-size:12px;color:var(--steel);letter-spacing:.02em}
.legal-end{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:baseline;
  padding-top:18px;border-top:1px solid var(--line-dark);font-size:12.5px;
}

/* ==========================================================================
   REVELATION AU DEFILEMENT
   REGLE DE SURETE : le masquage n'est applique QUE si le script a pose la
   classe `js-reveal` sur <html>. Sans JS, sans IntersectionObserver, ou si le
   script echoue, rien n'est cache — une animation ne doit jamais pouvoir
   faire disparaitre du contenu.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js-reveal .reveal.seen{opacity:1;transform:none}
}

/* ==========================================================================
   IMPRESSION — le site doit rester lisible imprime.
   ========================================================================== */
@media print{
  .topbar,.navpanel,.band,.btn-row,.skip{display:none}
  /* Le logo livre est la declinaison BLANCHE (en-tete et pied de page sombres).
     A l'impression les fonds ne sortent pas : sans cette inversion, le logo du
     pied de page serait blanc sur blanc. */
  .logo__img{filter:invert(1)}
  body{background:#fff;color:#000;font-size:12pt}
  section{padding:18pt 0}
  section.dark{background:#fff;color:#000}
  section.dark h1,section.dark h2,section.dark h3,section.dark p{color:#000}
  a{text-decoration:underline}
}