/* =====================================================================
   SEVEN CLIM — feuille de style
   Jetons issus du CLAUDE.md, chapitre 5. Ne pas modifier sans mettre
   le CLAUDE.md à jour. Aucun framework, aucune bibliothèque d'icônes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   POLICES AUTO-HÉBERGÉES
   Aucun appel à Google Fonts : pas de tiers, pas de journal d'IP externe,
   une requête réseau de moins. Archivo et Inter sont variables (un seul
   fichier couvre tous les graisses), IBM Plex Mono n'existe qu'en statique.
   --------------------------------------------------------------------- */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Bleus — la dominante */
  --i950:#06121F; --i900:#0A1B2E; --i800:#102842; --i700:#16375A;
  --blue:#2258C4; --blue-b:#2E6BE6; --blue-l:#7FB2F5; --blue-p:#D3E4FB;
  /* Accents sémantiques */
  --mint:#3DD9A4; --mint-d:#0B7B57;
  --copper:#C98A45; --copper-d:#93602A;
  /* Neutres chauds — la différenciation */
  --bone:#FAF8F3; --sand:#F1ECE2; --sline:#E3DBCC;
  --fline:#978F80;   /* contour des champs de saisie — 3,2:1 sur blanc, seuil WCAG 1.4.11 */
  --ink:#0A1622; --ink60:#56646E; --ink40:#6B767E;
  --dline:rgba(143,190,245,.15);
  /* Rayons et élévations */
  --r-s:8px; --r-m:14px; --r-l:22px;
  --e1:0 1px 2px rgba(7,21,42,.06), 0 2px 6px rgba(7,21,42,.05);
  --e2:0 4px 10px rgba(7,21,42,.07), 0 12px 28px rgba(7,21,42,.08);
  --e3:0 10px 24px rgba(7,21,42,.10), 0 28px 60px rgba(7,21,42,.14);
  /* Typographie */
  --D:"Archivo",system-ui,-apple-system,sans-serif;
  --T:"Inter",system-ui,-apple-system,sans-serif;
  --M:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  /* --- ÉCHELLE TYPOGRAPHIQUE — SOURCE UNIQUE ---
     Six degrés déclarés une fois, utilisés partout par les classes
     .h-d / .h-p / .h2 / .h3 / .h4 / .h5. Aucune taille de titre ne doit
     plus être écrite dans un attribut style : le site en portait 29,
     toutes différentes, et la hiérarchie ne se lisait plus.
     Le rapport entre deux degrés est d'environ 1,17 au maximum de
     l'échelle — assez pour se distinguer, assez peu pour rester une
     famille. Le contraste d'échelle fait l'autorité (CLAUDE.md § 5). */
  --t-d :clamp(33px,4.4vw,56px);   /* titre d'accueil, page 404 */
  --t-p :clamp(30px,4.4vw,52px);   /* titre de page intérieure */
  --t-h2:clamp(26px,4vw,  46px);   /* titre de section principal */
  --t-h3:clamp(24px,3.2vw,38px);   /* titre de section secondaire */
  --t-h4:clamp(22px,2.8vw,32px);   /* sous-section */
  --t-h5:clamp(19px,2.2vw,26px);   /* titre de bloc, valeur sur deux lignes */
  --t-tag:13.5px;                  /* intitulé de section .tagn et ligne de cote */
  /* Grain */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--T);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--D);letter-spacing:-.03em;margin:0;line-height:1.1}
p{margin:0 0 15px}
:focus-visible{outline:3px solid var(--blue-b);outline-offset:3px;border-radius:4px}

/* --- utilitaires --- */
.w{max-width:1180px;margin:0 auto;padding:0 32px}
.wn{max-width:820px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.w,.wn{padding:0 20px}}
.mono{font-family:var(--M);font-weight:500;letter-spacing:.15em;text-transform:uppercase;font-size:10.5px}
.lead{color:var(--ink60);font-size:17px;max-width:min(60ch,100%);margin-top:18px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.sr:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  padding:12px 20px;background:var(--blue);color:#fff;border-radius:10px;z-index:200;
  font-family:var(--D);font-weight:700;font-size:14px;text-decoration:none;box-shadow:var(--e3)}
main:focus{outline:none}
/* I8 — les ancres ne doivent pas se placer sous la barre collante */
[id]{scroll-margin-top:84px}

section{padding:104px 0;position:relative}
@media(max-width:760px){section{padding:68px 0}}
.sand{background:var(--sand)}
.dark{background:var(--i950);color:#CFE0F0;position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.28;pointer-events:none;mix-blend-mode:overlay}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lead{color:#8FA6BC}
.dark .mono{color:var(--blue-l)}
.rel{position:relative;z-index:3}
.lightsrc::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% -10%,rgba(59,130,246,.20),transparent 62%)}
.grid-l{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--dline) 1px,transparent 1px),linear-gradient(90deg,var(--dline) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(110% 80% at 50% 0%,#000,transparent 72%);opacity:.6}

/* Les intitulés de section portent le fil de lecture : ils doivent se voir
   sans être cherchés. 10,5 px en 500 disparaissaient — 13,5 px en 600, avec
   un filet d'ancrage, se lisent au premier coup d'œil. */
.tagn{font-family:var(--M);font-weight:600;font-size:var(--t-tag);letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin-bottom:16px;
  display:flex;align-items:center;gap:11px;line-height:1.2}
.tagn::before{content:"";width:22px;height:2.5px;background:currentColor;flex:none;border-radius:2px}
/* Les sur-titres de carte souffraient du même mal que .tagn : trop discrets. */
.card>.mono,.cas>div .mono{font-size:12px;font-weight:600;letter-spacing:.12em}
.dark .tagn::before{opacity:.85}
@media(max-width:560px){.tagn{font-size:12.5px;letter-spacing:.09em}.tagn::before{width:16px}}
/* Les cinq degrés de titre. Le degré porte la taille, la graisse,
   l'interlettrage et la longueur de ligne : un titre de section n'a plus
   jamais besoin d'un attribut style. */
.h2{font-weight:800;font-size:var(--t-h2);line-height:1.06;letter-spacing:-.035em;max-width:17ch}
.h3{font-family:var(--D);font-weight:800;font-size:var(--t-h3);line-height:1.07;letter-spacing:-.034em;max-width:20ch}
.h4{font-family:var(--D);font-weight:800;font-size:var(--t-h4);line-height:1.1;letter-spacing:-.032em;max-width:24ch}
.h5{font-family:var(--D);font-weight:700;font-size:var(--t-h5);line-height:1.15;letter-spacing:-.028em}
/* Titre d'appel à l'action de fin de page : centré, jamais aligné à gauche. */
.h-cta{font-family:var(--D);font-weight:800;font-size:var(--t-h2);line-height:1.05;
  letter-spacing:-.035em;max-width:20ch;margin:0 auto 18px}
/* Degré d'affichage — n'existe que sur la 404 et sur le premier écran. */
.h-d{font-family:var(--D);font-weight:900;font-size:var(--t-d);letter-spacing:-.042em;line-height:1}

/* --- SIGNATURE : la ligne de cote --- */
.cote{display:flex;align-items:center;gap:14px;color:var(--blue);opacity:1}
.cote .cap{width:1.5px;height:13px;background:currentColor;flex:none}
.cote .ln{flex:1;height:1.5px;background:currentColor;position:relative}
.cote .ln::before,.cote .ln::after{content:"";position:absolute;top:50%;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.cote .ln::before{left:0;transform:translateY(-50%) rotate(-135deg)}
.cote .ln::after{right:0;transform:translateY(-50%) rotate(45deg)}
.cote .vl{font-family:var(--M);font-size:var(--t-tag);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;font-weight:600}
@media(max-width:560px){.cote .vl{font-size:12px;white-space:normal;text-align:center}}
.dark .cote{color:var(--blue-l);opacity:.92}

/* --- LOGO --- */
.lock{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.vii{border:2.2px solid var(--blue-l);border-radius:8px;padding:4px 10px;
  font-family:var(--D);font-weight:800;font-size:17px;letter-spacing:.06em;color:var(--blue-l);line-height:1}
.vii.d{border-color:var(--blue);color:var(--blue)}
.wmk{font-family:var(--D);font-weight:800;font-size:20px;color:#fff;line-height:1}
.wmk.d{color:var(--ink)}
.wmk em{font-style:normal;color:var(--blue-l)}
.wmk.d em{color:var(--blue)}
.wmk small{display:block;font-family:var(--M);font-size:8px;font-weight:500;letter-spacing:.22em;color:#8199B0;margin-top:4px}
.wmk.d small{color:var(--ink40)}

/* --- BOUTONS --- */
.btn{font-family:var(--D);font-weight:700;font-size:15px;border-radius:12px;padding:15px 26px;
  border:1.8px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  line-height:1;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .2s,border-color .2s}
.b1{background:var(--blue);color:#fff;box-shadow:0 3px 12px rgba(34,88,196,.34)}
.b1:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(34,88,196,.44)}
.b1::after{content:"";position:absolute;top:0;left:-55%;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transition:left .6s ease}
.b1:hover::after{left:125%}
.b2{background:transparent;color:#fff;border-color:rgba(255,255,255,.26)}
.b2:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5)}
.b2l{background:transparent;color:var(--blue);border-color:rgba(34,88,196,.35)}
.b2l:hover{background:rgba(34,88,196,.06);border-color:var(--blue)}
.btn.sm{padding:11px 18px;font-size:13.5px;border-radius:10px}

/* --- NAVIGATION --- */
.nav{position:sticky;top:0;z-index:60;background:rgba(6,18,31,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--dline)}
.navin{display:flex;align-items:center;gap:24px;padding:14px 0}
.nlk{font-family:var(--D);font-weight:600;font-size:14px;color:#B9CDE0;text-decoration:none;transition:color .18s}
.nlk:hover,.nlk:focus-visible{color:#fff}
.sp{flex:1}
.pricepill{font-family:var(--M);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);
  border:1px solid rgba(61,217,164,.32);background:rgba(61,217,164,.08);padding:7px 13px;border-radius:99px;white-space:nowrap}
@media(max-width:1000px){.nlk{display:none}}
@media(max-width:640px){.pricepill{display:none}}
/* Sous 760 px la barre du bas porte les actions : le bouton de nav disparaît */
@media(max-width:760px){.navin>.btn{display:none}.navin{gap:12px}}
/* Filet de sécurité : rien ne dépasse jamais de la largeur d'écran */
html,body{max-width:100%;overflow-x:clip}
.w>*,.wn>*{min-width:0}
/* Les éléments de grille ne doivent jamais élargir leur conteneur */
.heroG>*,.g2>*,.g3>*,.measG>*,.leg>*,.preuveG>*,.calcG>*,.faqG>*,.fgrid>*{min-width:0}
.leg .lg span,.leg .lg i{overflow-wrap:anywhere}

/* --- BARRE MOBILE COLLÉE EN BAS --- */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,18,31,.94);backdrop-filter:blur(12px);border-top:1px solid var(--dline)}
.mobar .btn{flex:1;justify-content:center;padding:14px 12px;font-size:14px}
@media(max-width:760px){.mobar{display:flex} body{padding-bottom:76px}}

/* --- HERO --- */
.hero{position:relative;overflow:hidden;padding:64px 0 76px}
.hero .ph{position:absolute;inset:0;background-size:cover;background-position:center;overflow:hidden}
.hero .ph img{width:100%;height:100%;object-fit:cover;object-position:38% 34%}
/* Deux calques, pas un.
   1) Horizontal : très opaque sous la colonne de texte, il s'éclaircit à
      partir de 52 % pour laisser LIRE l'appareil — c'est le sujet de la
      photo, et le voile d'origine (.92 jusqu'à 46 %) l'effaçait.
   2) Vertical : assombrit le haut, sous la barre de navigation, et le bas,
      pour raccorder au bandeau de mesure sans couture visible.
   Le texte blanc ne dépasse jamais 48 % de la largeur : au-delà, la photo
   peut monter en clarté sans coûter de contraste. */
.hero .vl2{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,18,31,.965) 0%,rgba(6,18,31,.93) 38%,
      rgba(6,18,31,.60) 53%,rgba(6,18,31,.30) 72%,rgba(6,18,31,.26) 100%),
    linear-gradient(180deg,rgba(6,18,31,.62) 0%,rgba(6,18,31,0) 22%,
      rgba(6,18,31,0) 66%,rgba(6,18,31,.72) 100%)}
/* Sur une colonne, le texte occupe toute la largeur : le voile redevient
   plein, sinon le sous-titre gris clair passe sous le seuil de contraste. */
@media(max-width:980px){
  .hero .ph img{object-position:52% 16%}
  .hero .vl2{background:
    linear-gradient(180deg,rgba(6,18,31,.74) 0%,rgba(6,18,31,.92) 24%,
      rgba(6,18,31,.94) 68%,rgba(6,18,31,.82) 100%)}
}
.heroG{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center}
@media(max-width:980px){.heroG{grid-template-columns:minmax(0,1fr);gap:38px}}
.hero h1{font-weight:900;font-size:var(--t-d);line-height:.98;color:#fff;letter-spacing:-.042em;margin:20px 0 22px}
.hero h1 em{font-style:normal;color:var(--blue-l)}
.hero .sub{color:#9DB6CC;font-size:17px;max-width:min(44ch,100%)}
.priceline{display:flex;align-items:baseline;gap:11px;margin:26px 0 4px;flex-wrap:wrap}
.priceline .n{font-family:var(--D);font-weight:800;font-size:38px;color:#fff;letter-spacing:-.03em;line-height:1}
.priceline .u{font-family:var(--M);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mint)}
.proofrow{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.stars{color:#F2B23E;font-size:14px;letter-spacing:2px}

/* --- BANDEAU DE MESURE --- */
.meas{border-top:1px solid var(--dline);border-bottom:1px solid var(--dline)}
.dark.meas{background:var(--i950)}
.meas::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.02);pointer-events:none}
.measG{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.measG{grid-template-columns:minmax(0,1fr)}}
.mi{padding:30px 26px;border-left:1px solid var(--dline)}
.mi:first-child{border-left:none}
@media(max-width:760px){.mi{border-left:none;border-top:1px solid var(--dline)}.mi:first-child{border-top:none}}
.mi .v{font-family:var(--D);font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1;letter-spacing:-.04em;color:#fff;display:flex;align-items:baseline;gap:5px}
.mi .v u{text-decoration:none;font-family:var(--M);font-size:.42em;font-weight:500;color:var(--blue-l);letter-spacing:.02em}
.mi .k{font-family:var(--M);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#93AAC1;margin-top:11px}
.mi .s{font-size:12.5px;color:#8199B0;margin-top:4px}

/* --- MÉTHODE : trois actes --- */
.act{display:grid;grid-template-columns:96px 1fr;gap:32px;padding:38px 0;border-top:1px solid var(--sline);align-items:start}
@media(max-width:760px){.act{grid-template-columns:minmax(0,1fr);gap:14px}}
.act .no{font-family:var(--D);font-weight:900;font-size:52px;line-height:.9;letter-spacing:-.05em;color:#968D7C}
.act h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
.act .vb{font-family:var(--M);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.act p{color:var(--ink60);font-size:15.5px;max-width:56ch;margin:10px 0 0}
.act .pv{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--M);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:7px 13px;border-radius:99px}

/* --- COMPARATEUR AVANT/APRÈS --- */
.ba{position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;cursor:ew-resize;
  user-select:none;-webkit-user-select:none;box-shadow:var(--e3);touch-action:pan-y}
.ba .ly{position:absolute;inset:0;background-size:cover;background-position:center}
.ba .af{clip-path:inset(0 0 0 var(--x,52%))}
.ba .br{position:absolute;top:0;bottom:0;left:var(--x,52%);width:2px;background:#fff;z-index:5;pointer-events:none}
.ba .kn{position:absolute;top:50%;left:var(--x,52%);transform:translate(-50%,-50%);width:44px;height:44px;
  border-radius:50%;background:#fff;z-index:6;display:flex;align-items:center;justify-content:center;
  font-family:var(--D);font-weight:800;color:var(--blue);box-shadow:0 6px 18px rgba(0,0,0,.32);pointer-events:none}
.bg{position:absolute;top:16px;font-family:var(--M);font-weight:600;font-size:10px;letter-spacing:.16em;
  color:#fff;padding:6px 11px;border-radius:7px;z-index:4}
.bg.a{left:16px;background:var(--copper-d)}
.bg.b{right:16px;background:var(--blue)}

/* --- CARTES ET GRILLES --- */
.card{background:#fff;border:1px solid var(--sline);border-radius:var(--r-m);padding:22px 24px;box-shadow:var(--e1);
  transition:box-shadow .25s ease,transform .25s ease}
.card:hover{box-shadow:var(--e2);transform:translateY(-3px)}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}

/* --- AVIS --- */
/* Grille sur grand écran, rail défilant sur mobile : une carte d'avis
   trop étroite coupe le texte au milieu d'une phrase. */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:stretch}
.rev2{background:#fff;border:1px solid var(--sline);border-radius:var(--r-m);padding:20px;box-shadow:var(--e1);
  display:flex;flex-direction:column}
.rev2 .tp{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.rev2 .av{width:36px;height:36px;border-radius:50%;color:#fff;font-family:var(--D);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex:none}
.rev2 b{display:block;font-family:var(--D);font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.25}
.rev2 em{font-style:normal;font-size:11.5px;color:var(--ink40);font-family:var(--M);letter-spacing:.04em}
.rev2 .st{color:#B37A0E;font-size:12px;letter-spacing:2.5px;margin-bottom:9px}
.rev2 p{font-size:14px;color:#38474F;margin:0;line-height:1.55}
/* Variante fond sombre */
.rail-d .rev2{background:rgba(143,190,245,.055);border-color:var(--dline);box-shadow:none}
.rail-d .rev2 b{color:#fff}
.rail-d .rev2 em{color:#8199B0}
.rail-d .rev2 p{color:#A8BDD1}
.rail-d .rev2 .st{color:#F2B23E}
@media(max-width:700px){
  .rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;
    margin-inline:-20px;padding-inline:20px}
  .rev2{flex:0 0 min(84vw,300px);scroll-snap-align:start}
}
/* Lien vers la fiche Google — la note affichée doit être vérifiable */
.gnote{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;
  border:1px solid var(--sline);background:#fff;border-radius:99px;padding:9px 16px;box-shadow:var(--e1);
  transition:box-shadow .2s,transform .2s}
.gnote:hover{box-shadow:var(--e2);transform:translateY(-1px)}
.gnote .n{font-family:var(--D);font-weight:800;font-size:17px;color:var(--ink);line-height:1}
.gnote .s{color:#B37A0E;font-size:13px;letter-spacing:2px}
.gnote .t{font-size:13px;color:var(--ink60)}
.dark .gnote{background:rgba(143,190,245,.07);border-color:var(--dline);box-shadow:none}
.dark .gnote .n{color:#fff}
.dark .gnote .t{color:#A8BDD1}
.dark .gnote .s{color:#F2B23E}


/* --- AVIS VEDETTE --- */
/* Le témoignage le plus circonstancié sort de la grille : sa longueur
   déséquilibrerait les cartes, et sa précision mérite d'être lue. */
.revx{background:#fff;border:1px solid var(--sline);border-radius:var(--r-l);
  padding:34px 38px;box-shadow:var(--e2);margin-bottom:16px;position:relative;overflow:hidden}
.revx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
@media(max-width:640px){.revx{padding:26px 22px}}
.revx .st{color:#B37A0E;font-size:13px;letter-spacing:3px;margin-bottom:14px}
.revx blockquote{margin:0}
.revx blockquote p{font-family:var(--D);font-weight:600;font-size:clamp(17px,2.1vw,21px);
  line-height:1.45;letter-spacing:-.015em;color:var(--ink);margin:0 0 12px;max-width:62ch}
.revx blockquote .su{font-family:var(--T);font-weight:400;font-size:15.5px;line-height:1.6;
  color:var(--ink60);letter-spacing:0;margin:0}
.revx figcaption{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--sline)}
.revx .av{width:38px;height:38px;border-radius:50%;color:#fff;font-family:var(--D);font-weight:800;
  font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.revx figcaption b{display:block;font-family:var(--D);font-weight:700;font-size:15px;letter-spacing:-.01em}
.revx figcaption em{font-style:normal;font-family:var(--M);font-size:11px;letter-spacing:.06em;color:var(--ink40)}
.revx-d{background:rgba(143,190,245,.055);border-color:var(--dline);box-shadow:none}
.revx-d blockquote p{color:#fff}
.revx-d blockquote .su{color:#A8BDD1}
.revx-d figcaption{border-top-color:var(--dline)}
.revx-d figcaption b{color:#fff}
.revx-d figcaption em{color:#8199B0}
.revx-d .st{color:#F2B23E}

/* Variante avec la photo de l'installation concernée — activée seulement
   quand le client a donné son accord (site.medias.heroTemoignage). */
.revx-p{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:34px;align-items:center;padding:26px}
.revx-p .ph-t img{width:100%;border-radius:var(--r-m);box-shadow:var(--e2)}
.revx-p .ph-t span{display:block;font-family:var(--M);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink40);margin-top:11px}
.revx-d.revx-p .ph-t span{color:#8199B0}
@media(max-width:760px){.revx-p{grid-template-columns:minmax(0,1fr);gap:22px}}


/* --- PROCÉDURE ILLUSTRÉE --- */
/* Six vignettes photo numérotées : le guide se lit d'un coup d'œil,
   comme une notice de montage. Photos d'intervention réelles. */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:34px}
.proc>li{list-style:none;background:#fff;border:1px solid var(--sline);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--e1);display:flex;flex-direction:column;
  transition:box-shadow .25s ease,transform .25s ease}
.proc>li:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.proc .im{position:relative;aspect-ratio:4/3;background:var(--sand)}
.proc .im img{width:100%;height:100%;object-fit:cover}
.proc .nu{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:9px;
  background:var(--i950);color:#fff;font-family:var(--D);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--e2)}
.proc .tx{padding:18px 20px 20px}
.proc h3{font-size:16.5px;font-weight:800;letter-spacing:-.015em;margin-bottom:7px}
.proc p{font-size:14.5px;color:var(--ink60);margin:0;line-height:1.55}
.proc .al{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--M);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:99px;
  background:rgba(201,138,69,.13);color:var(--copper-d)}

/* Repère « ce que vous devez voir » — deux états côte à côte */
.etats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:26px}
.etats figure{margin:0}
.etats .fig{aspect-ratio:4/3}
.etats .lb{display:inline-flex;align-items:center;gap:8px;font-family:var(--M);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:99px;margin-bottom:10px}
.etats .ok{background:rgba(11,123,87,.11);color:var(--mint-d)}
.etats .ko{background:rgba(201,138,69,.15);color:var(--copper-d)}

/* --- TARIFS --- */
.tar{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--sline);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--e1)}
.tar th,.tar td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--sline)}
.tar th{font-family:var(--M);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink60);background:var(--sand)}
.tar td:last-child{text-align:right;font-family:var(--D);font-weight:800;white-space:nowrap}
.tar tr:last-child td{border-bottom:none}
.tar .free{color:var(--mint-d)}

/* --- CALCULATEUR --- */
.calc{background:#fff;border:1px solid var(--sline);border-radius:var(--r-l);padding:30px;box-shadow:var(--e2)}
@media(max-width:560px){.calc{padding:22px}}
/* Condition d'intervention, pas alerte : le cuivre du code couleur signale
   « à lire avant de réserver », il ne dramatise pas. */
.warnbox{margin-top:18px;padding:15px 17px;border-radius:var(--r-m);font-size:14.5px;line-height:1.6;
  background:rgba(201,138,69,.09);border:1px solid rgba(147,96,42,.3);color:var(--ink)}
.warnbox strong{color:var(--copper-d);display:block;margin-bottom:3px}
.warnbox[hidden]{display:none}
/* Les groupes du sélecteur de commune : le libellé de secteur doit rester
   lisible, les navigateurs le rendent en italique gris par défaut. */
.sel optgroup{font-family:var(--D);font-weight:700;font-style:normal;color:var(--ink);font-size:13px}
.sel option{font-family:var(--T);font-weight:400;color:var(--ink);font-size:15px}
.q{font-family:var(--D);font-weight:700;font-size:14.5px;margin-bottom:10px}
.qh{font-size:12.5px;color:var(--ink40);margin:-6px 0 10px}
.opts{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.opt{min-width:48px;height:48px;padding:0 14px;border-radius:12px;border:1.8px solid var(--sline);background:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--D);font-weight:700;font-size:15px;
  cursor:pointer;transition:.18s;color:var(--ink)}
.opt:hover{border-color:var(--blue)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue);color:#fff}
.sel{width:100%;border:1.8px solid var(--sline);border-radius:12px;padding:13px 15px;font-family:var(--T);font-size:15px;background:#fff;margin-bottom:20px;color:var(--ink)}
.res{background:var(--i950);border-radius:16px;padding:22px;color:#fff;position:relative;overflow:hidden}
.res::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 85% 0%,rgba(59,130,246,.22),transparent 65%)}
.res>*{position:relative;z-index:2}
.res .amt{font-family:var(--D);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.04em}
.res .sv{display:inline-block;background:rgba(61,217,164,.14);color:var(--mint);font-family:var(--M);font-weight:500;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:99px;margin-top:12px}
.res .fn{font-size:12px;color:#8FA9C0;margin-top:12px}
.opts-fine{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.chk{display:inline-flex;align-items:center;gap:8px;border:1.8px solid var(--sline);border-radius:99px;padding:13px 16px;min-height:44px;
  font-size:13.5px;cursor:pointer;background:#fff;font-family:var(--T)}
.chk[aria-pressed="true"]{border-color:var(--blue);background:rgba(34,88,196,.06);color:var(--blue);font-weight:600}
/* --- Ordre de grandeur B2B : grille + trois cas --- */
.budG{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.cas{display:grid;gap:1px;background:var(--sline);border:1px solid var(--sline);border-radius:var(--r-m);overflow:hidden}
.cas>div{background:#fff;padding:18px 20px}
.cas h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em;margin:0 0 6px}
.cas .n{font-family:var(--D);font-weight:800;font-size:26px;letter-spacing:-.04em;color:var(--blue);margin:0}
.cas .d{font-size:13.5px;color:var(--ink60);margin:6px 0 0;line-height:1.5}

/* --- Formulaire de contact écrit --- */
.frm-w{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:52px;align-items:start}
.frm{background:#fff;border:1px solid var(--sline);border-radius:var(--r-l);box-shadow:var(--e2);padding:30px}
.frm .fld{margin:0 0 16px}
.frm label{display:block;font-family:var(--M);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink60);margin-bottom:7px}
.frm label span{color:var(--blue)}
.frm input,.frm select,.frm textarea{width:100%;border:1.8px solid var(--fline);border-radius:12px;
  padding:12px 14px;font-family:var(--T);font-size:15px;color:var(--ink);background:var(--bone);
  transition:border-color .18s,background .18s}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--blue);background:#fff;outline:none}
.frm textarea{resize:vertical;min-height:112px;line-height:1.55}
.frm select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--ink60) 50%),
  linear-gradient(-45deg,transparent 49%,var(--ink60) 50%);
  background-size:6px 6px,6px 6px;background-position:right 18px center,right 12px center;
  background-repeat:no-repeat;padding-right:34px}
.frm .fg2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.frm .hint{font-size:12.5px;color:var(--ink40);margin:-8px 0 16px;line-height:1.5}
.frm .fend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.frm .fend .hint{margin:0}
.frm .msg{border-radius:var(--r-m);padding:15px 17px;font-size:14.5px;line-height:1.55;margin-bottom:20px}
.frm .msg.ok{background:rgba(11,123,87,.09);border-left:3px solid var(--mint-d);color:#0A3F2E}
.frm .msg.ko{background:rgba(147,96,42,.10);border-left:3px solid var(--copper-d);color:#5A3A14}
.frm[data-envoi="1"] #c-envoi{opacity:.6;pointer-events:none}
@media(max-width:900px){.frm-w{grid-template-columns:minmax(0,1fr);gap:32px}}
@media(max-width:560px){.frm{padding:22px}.frm .fg2{grid-template-columns:1fr}}

.esc{border-top:1px dashed var(--sline);margin-top:22px;padding-top:20px}
.inp{display:flex;gap:8px;flex-wrap:wrap}
.inp input{flex:1;min-width:160px;border:1.8px solid var(--fline);border-radius:12px;padding:13px 15px;font-family:var(--T);font-size:15px}

/* --- FAQ --- */
.fq{border-top:1px solid var(--sline)}
.fq summary{padding:20px 0;display:flex;justify-content:space-between;gap:18px;align-items:center;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary b{font-family:var(--D);font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.fq summary::after{content:"+";color:var(--blue);font-size:24px;font-weight:300;line-height:1;flex:none}
.fq[open] summary::after{content:"–"}
.fq .ans{padding:0 0 22px;color:var(--ink60);max-width:70ch;font-size:15.5px}

/* --- PIED DE PAGE --- */
footer{background:var(--i950);color:#8199B0;padding:56px 0;font-size:13.5px;position:relative}
footer a{color:#8FA6BC;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:760px){.fgrid{grid-template-columns:minmax(0,1fr);gap:26px}}
.fgrid h2{font-family:var(--D);font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:0;line-height:1.2}
.fgrid ul{list-style:none;margin:0;padding:0;line-height:2}

/* --- APPARITION AU DÉFILEMENT --- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* --- COUPE TECHNIQUE --- */
.cut{background:linear-gradient(175deg,#0C2138,#06121F);border:1px solid var(--dline);
  border-radius:26px;padding:30px;position:relative;overflow:hidden}
@media(max-width:560px){.cut{padding:20px;border-radius:20px}}
.cut::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--dline) 1px,transparent 1px),linear-gradient(90deg,var(--dline) 1px,transparent 1px);
  background-size:36px 36px;opacity:.5;pointer-events:none}
.cut::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.22;mix-blend-mode:overlay;pointer-events:none}
.cut-head{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
/* --- La séquence en boucle du premier écran --- */
.heroV{margin:0}
.heroV-c{position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 18px 44px rgba(3,10,20,.55);background:var(--i950);
  max-width:392px;margin-left:auto}
.heroV-c video{width:100%;height:auto;display:block}
.heroV-c .tagimg{position:absolute;left:14px;top:14px;font-family:var(--M);font-weight:600;
  font-size:9.5px;letter-spacing:.16em;color:#fff;background:rgba(6,18,31,.72);
  backdrop-filter:blur(6px);padding:6px 10px;border-radius:7px;pointer-events:none}
.heroV figcaption{font-size:13.5px;line-height:1.6;color:#9DB6CC;margin-top:14px;
  max-width:392px;margin-left:auto}
.heroV figcaption a{color:var(--blue-l);white-space:nowrap}
.heroV-go{position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  background:rgba(6,18,31,.42);display:flex;align-items:center;justify-content:center}
.heroV-go .tri{width:64px;height:64px;border-radius:50%;background:var(--blue);
  box-shadow:0 8px 22px rgba(6,18,31,.5);display:grid;place-items:center}
.heroV-go .tri::after{content:"";width:0;height:0;margin-left:5px;
  border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.heroV-go[hidden]{display:none}
@media(max-width:980px){.heroV-c,.heroV figcaption{margin-left:0;max-width:340px}}

/* La photo et son calque de repères se superposent au pixel près : même
   rapport, même boîte. Les zones ne sont visibles qu'au survol. */
.cutw{position:relative;z-index:3;border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 10px 30px rgba(3,10,20,.45)}
.cutw img{width:100%;height:auto;display:block;transition:filter .3s ease}
.cutw.dim img{filter:brightness(.52) saturate(.85)}
/* Le calque ne reçoit jamais le pointeur : ce sont les boutons de la
   légende qui pilotent l'état, l'image dessous reste sélectionnable. */
.cutsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cutsvg .z{fill:#7FB2F5;fill-opacity:0;stroke:#7FB2F5;stroke-width:0;
  transition:fill-opacity .25s ease,stroke-width .25s ease}
.cutsvg g.part.hot .z{fill:#DCEBFC;fill-opacity:.20;stroke:#9ECBFF;stroke-width:3.5}
.cutsvg .rep path{stroke:#2E6BE6;stroke-width:2.4;fill:none;opacity:.9}
.cutsvg .rep circle{fill:var(--blue);stroke:#06121F;stroke-width:2.5}
.cutsvg .rep text{font-family:var(--M);font-weight:600;font-size:17px;fill:#fff;text-anchor:middle}
@media(prefers-reduced-motion:reduce){.cutw img,.cutsvg .z{transition:none}}
.cut-note{position:relative;z-index:3;font-size:14px;line-height:1.62;color:#8FA9C0;
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--dline);max-width:78ch}
.cut-note strong{color:#CFE0F0}
.leg{list-style:none;margin:22px 0 0;padding:0;position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.lg{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:12px;
  cursor:pointer;transition:background .22s,box-shadow .22s;background:none;border:none;
  text-align:left;width:100%;font-family:inherit;-webkit-tap-highlight-color:transparent}
.lg:hover,.lg.active{background:rgba(143,190,245,.09)}
/* Repère verrouillé par un clic : plus soutenu que le simple survol, sinon
   rien ne distingue « je survole » de « j'ai bloqué ce repère ». */
.lg[aria-pressed="true"]{background:rgba(143,190,245,.16);box-shadow:inset 0 0 0 1px rgba(143,190,245,.4)}
.lg:focus-visible{outline:2px solid var(--blue-b);outline-offset:2px;background:rgba(143,190,245,.09)}
.lg b{flex:0 0 25px;height:25px;border-radius:50%;background:var(--blue);color:#fff;
  font-family:var(--M);font-weight:600;font-size:11.5px;display:flex;align-items:center;justify-content:center}
.lg i{display:block;font-style:normal;color:#fff;font-family:var(--D);font-weight:700;font-size:13.5px}
.lg span{font-size:12.5px;color:#8FA9C0;line-height:1.45}
.cut-hint-t{display:none}
@media(hover:none){.cut-hint{display:none}.cut-hint-t{display:inline}}
@media(max-width:560px){.leg{grid-template-columns:1fr}}

/* =====================================================================
   AJOUTS VAGUE 1 — en-têtes de page, figures, étapes, listes
   ===================================================================== */

/* --- En-tête de page intérieure --- */
.ph-head{padding:70px 0 74px}
.ph-head h1{font-weight:900;font-size:var(--t-p);line-height:1;letter-spacing:-.042em;
  color:#fff;margin:18px 0 0;max-width:19ch}
.ph-head .mono{display:block;margin-bottom:2px}
@media(max-width:760px){.ph-head{padding:48px 0 52px}}

/* --- Figures photo --- */
figure{margin:0}
.fig{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--e3);background:var(--i900);position:relative}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
.fig figcaption,.figc{font-family:var(--M);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink40);margin-top:11px;line-height:1.6}
.dark .figc,.dark .fig figcaption{color:#6B87A2}
.fig .tagimg{position:absolute;left:14px;top:14px;font-family:var(--M);font-weight:600;font-size:9.5px;
  letter-spacing:.16em;color:#fff;background:rgba(6,18,31,.72);backdrop-filter:blur(6px);
  padding:6px 10px;border-radius:7px}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}

/* --- Vidéo auto-hébergée : rien ne se charge avant le clic --- */
.vid-c{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--e3);background:var(--i950)}
.vid-c video{width:100%;height:100%;display:block;object-fit:cover;background:var(--i950)}
.vid-c .tagimg{position:absolute;left:14px;top:14px;font-family:var(--M);font-weight:600;font-size:9.5px;
  letter-spacing:.16em;color:#fff;background:rgba(6,18,31,.72);backdrop-filter:blur(6px);
  padding:6px 10px;border-radius:7px;pointer-events:none;z-index:2}
.vid figcaption{font-size:14px;line-height:1.62;color:var(--ink60);margin-top:13px;max-width:46ch}
.vid figcaption .d{font-family:var(--M);font-size:11.5px;letter-spacing:.06em;color:#5A656E;white-space:nowrap}
.vid-s figcaption{color:#9FB4C8}
.vid-s figcaption .d{color:#7C97B2}
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 44px;align-items:start}
.vids>div{display:grid;grid-template-columns:minmax(0,258px) minmax(0,1fr);gap:26px;align-items:center}
.vids .vtx h3{font-size:12px;font-family:var(--M);font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue-l);margin-bottom:4px}
.vids .vt{margin:10px 0 0}
.vids .vt li{color:#A9BDCF;font-size:14.5px}
.vids .vt li::before{border-color:var(--blue-l);background:rgba(127,178,245,.16)}
.vids .vp{font-size:14px;line-height:1.6;color:#7C97B2;margin:16px 0 0;
  padding-top:15px;border-top:1px solid var(--dline)}
@media(max-width:1040px){.vids{grid-template-columns:minmax(0,1fr);gap:44px}
  .vids>div{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:32px}}
@media(max-width:600px){.vids>div{grid-template-columns:minmax(0,1fr);gap:20px}}
.no-js .vid-go{display:none}
.vid-go{position:absolute;inset:0;width:100%;border:0;background:
  radial-gradient(52% 30% at 50% 50%,rgba(6,18,31,.62),rgba(6,18,31,0) 72%),
  linear-gradient(180deg,rgba(6,18,31,.06) 0%,rgba(6,18,31,.12) 46%,rgba(6,18,31,.58) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  cursor:pointer;color:#fff;z-index:3;transition:background .2s cubic-bezier(.2,.7,.3,1)}
.vid-go:hover{background:
  radial-gradient(56% 33% at 50% 50%,rgba(6,18,31,.68),rgba(6,18,31,0) 74%),
  linear-gradient(180deg,rgba(6,18,31,.12) 0%,rgba(6,18,31,.20) 46%,rgba(6,18,31,.64) 100%)}
.vid-go .tri{width:66px;height:66px;border-radius:50%;background:var(--blue);
  box-shadow:0 8px 22px rgba(6,18,31,.42);display:grid;place-items:center;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s cubic-bezier(.2,.7,.3,1)}
.vid-go .tri::after{content:"";width:0;height:0;margin-left:5px;
  border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.vid-go:hover .tri{transform:scale(1.07);background:var(--blue-b)}
.vid-go .txt{font-family:var(--M);font-weight:600;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  text-align:center;text-shadow:0 1px 10px rgba(6,18,31,.7)}
.vid-go .txt u{display:block;text-decoration:none;font-weight:400;font-size:10px;letter-spacing:.13em;
  color:#D7E5F4;margin-top:5px}
@media(max-width:600px){.vid-c{max-width:282px}.vid-go .tri{width:58px;height:58px}
  .vid-go .tri::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px}}
.vid-go[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.vid-go,.vid-go .tri{transition:none}.vid-go:hover .tri{transform:none}}

/* --- Étapes numérotées à filet --- */
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps>li{counter-increment:st;display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;
  padding:26px 0;border-top:1px solid var(--sline)}
.steps>li::before{content:counter(st,decimal-leading-zero);font-family:var(--D);font-weight:900;
  font-size:30px;line-height:1;letter-spacing:-.05em;color:#3E68B8}
.steps h2,.steps h3{font-size:19px;font-weight:800;letter-spacing:-.018em;margin-bottom:6px;max-width:none}
.steps p{color:var(--ink60);font-size:15.5px;margin:0;max-width:62ch}
@media(max-width:640px){.steps>li{grid-template-columns:44px minmax(0,1fr);gap:14px}.steps>li::before{font-size:22px}}

/* --- Listes à puce technique --- */
.tick{list-style:none;margin:14px 0 0;padding:0}
.tick li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--ink60);font-size:15.5px}
.tick li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:2px;
  border:1.6px solid var(--blue);background:rgba(34,88,196,.14)}
.tick.no li::before{border-color:var(--copper-d);background:rgba(201,138,69,.16);border-radius:50%}
.dark .tick li{color:#8FA6BC}

/* --- Encadré source / rappel réglementaire --- */
.src{border-left:2px solid var(--blue);background:rgba(34,88,196,.045);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:16px 20px;font-size:14.5px;color:var(--ink60);margin:22px 0}
.src strong{color:var(--ink)}
.src .ref{font-family:var(--M);font-size:11px;letter-spacing:.06em;color:#5E676E;display:block;margin-top:8px}
.dark .src{background:rgba(143,190,245,.06);border-left-color:var(--blue-l);color:#8FA6BC}
.dark .src strong{color:#fff}

/* --- Avertissement (ne pas faire) --- */
.warn{border-left:2px solid var(--copper-d);background:rgba(201,138,69,.07);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:16px 20px;font-size:14.5px;color:var(--ink60);margin:22px 0}
.warn strong{color:var(--copper-d)}

/* --- Bloc contenu rédactionnel --- */
.prose h2{font-family:var(--D);font-weight:800;font-size:clamp(21px,2.7vw,30px);letter-spacing:-.03em;
  margin:52px 0 14px;max-width:24ch}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--D);font-weight:700;font-size:18px;margin:30px 0 8px}
.prose p{color:var(--ink60);font-size:16px;max-width:68ch}
.prose ul,.prose ol{color:var(--ink60);font-size:16px;max-width:66ch;padding-left:22px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink)}

/* --- Chiffre-clé --- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--sline);
  border:1px solid var(--sline);border-radius:var(--r-m);overflow:hidden}
.kpi>div{background:#fff;padding:22px 20px}
/* Un nombre impair de tuiles laissait une case vide : la dernière prend la largeur. */
.kpi>div:last-child:nth-child(odd){grid-column:1/-1}
.kpi .n{font-family:var(--D);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.kpi .n u{text-decoration:none;font-family:var(--M);font-size:.44em;font-weight:500;color:var(--blue);margin-left:4px}
.kpi .k{font-family:var(--M);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink40);margin-top:9px}

/* --- Tableau tarifs : ligne mise en avant --- */
.tar tr.hi td{background:rgba(34,88,196,.045)}
.tar td .prov{font-family:var(--M);font-size:9.5px;letter-spacing:.1em;color:var(--ink40);display:block;font-weight:400}
.tar caption{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--ink40);padding-top:12px}

/* --- Bloc contact --- */
.ct{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.ct a{text-decoration:none}
.ct .card{display:block}
.ct .lab{font-family:var(--M);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink40)}
.ct .val{font-family:var(--D);font-weight:800;font-size:19px;color:var(--ink);margin-top:7px;letter-spacing:-.02em;word-break:break-word}
.ct .sub{font-size:13px;color:var(--ink60);margin-top:5px}

/* --- Ancres de sommaire --- */
.toc{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.toc a{font-family:var(--M);font-size:11px;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  color:#B9CDE0;border:1px solid var(--dline);border-radius:99px;padding:8px 14px;transition:.18s}
.toc a:hover{color:#fff;border-color:var(--blue-l);background:rgba(143,190,245,.08)}

/* --- Pages légales --- */
.legal h2{font-family:var(--D);font-weight:800;font-size:20px;margin:38px 0 10px;letter-spacing:-.02em}
.legal h3{font-family:var(--D);font-weight:700;font-size:16px;margin:22px 0 6px}
.legal p,.legal li{color:var(--ink60);font-size:15px;max-width:76ch}
.legal ul{padding-left:20px}
.legal .todo{background:rgba(201,138,69,.1);border:1px dashed var(--copper-d);border-radius:var(--r-s);
  padding:3px 8px;font-family:var(--M);font-size:11.5px;color:var(--copper-d)}

/* =====================================================================
   ZONE D'INTERVENTION — hub et pages communales
   ===================================================================== */
.secG{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:26px}
.cml{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cml li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:14.5px;padding:6px 0;border-top:1px solid var(--sline)}
.cml li:first-child{border-top:0}
.cml a{text-decoration:none}
.cml a:hover strong{text-decoration:underline}
.cml-cp{font-family:var(--M);font-size:11px;color:var(--ink40);letter-spacing:.04em}
.cml-z{margin-left:auto;font-family:var(--M);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--copper-d);white-space:nowrap}
.cml-z.cml-inc{color:var(--mint-d)}

/* Bloc tarifaire d'une page communale */
.cmt{background:#fff;border:1px solid var(--sline);border-radius:var(--r-l);padding:26px 28px;box-shadow:var(--e2)}
@media(max-width:560px){.cmt{padding:20px}}
.cmt-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cmt-h .mono{color:var(--blue);font-size:12px;font-weight:600;letter-spacing:.12em}
.cmt-band{font-family:var(--M);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink60);background:var(--sand);border-radius:20px;padding:5px 12px}
.cmt-tar{margin:0}
.cmt-devis{font-size:15px;line-height:1.6;margin:0}
.cmt-devis strong{color:var(--copper-d)}
.cmt-p{font-size:13px;line-height:1.6;color:var(--ink40);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--sline)}

/* Les trois angles d'une page communale : repères numérotés, pas d'icônes. */
.loc{display:grid;gap:26px;margin-top:34px}
.loc>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}
.loc .n{font-family:var(--M);font-weight:600;font-size:13px;color:var(--blue);
  border-top:2.5px solid var(--blue);padding-top:9px}
.loc h3{font-family:var(--D);font-weight:800;font-size:19px;letter-spacing:-.028em;margin:0 0 7px}
.loc p{font-size:15.5px;line-height:1.68;color:var(--ink60);margin:0 0 11px;max-width:70ch}
.loc p:last-child{margin-bottom:0}
@media(max-width:560px){.loc>div{grid-template-columns:minmax(0,1fr);gap:8px}
  .loc .n{border-top:0;padding-top:0}}
@media(max-width:860px){.cmG{grid-template-columns:minmax(0,1fr)!important;gap:30px!important}}

/* =====================================================================
   ACCUEIL — § 02 démontage/rinçage et § 03 amorce « vérifier ma clim »
   ===================================================================== */
/* Le plan vidéo tient la colonne de gauche, les trois photos la droite. */
.preuve2{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:34px;align-items:start}
/* Deux colonnes à droite : les deux plans paysage empilés à gauche, le
   plan vertical de la carrosserie déposée sur toute la hauteur à droite.
   Les trois photos pèsent alors autant que la vidéo — c'est voulu. */
.preuve2-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.preuve2-g figure:last-child{grid-column:2;grid-row:1/3}
.preuve2-g figure:last-child .fig{aspect-ratio:auto;height:calc(100% - 30px);min-height:280px}
.preuve2 figcaption{font-family:var(--M);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink40);margin-top:9px}
@media(max-width:820px){.preuve2{grid-template-columns:minmax(0,1fr);gap:26px}
  .preuve2 .vid-c{max-width:280px}
  .preuve2-g figure:last-child{grid-column:auto;grid-row:auto}
  .preuve2-g figure:last-child .fig{aspect-ratio:3/4;height:auto;min-height:0}}
@media(max-width:560px){.preuve2-g{grid-template-columns:minmax(0,1fr)}}

/* Trois vignettes numérotées, aucun texte courant : l'amorce gagne une
   fonction, pas du texte. */
.amorce{list-style:none;margin:34px 0 0;padding:0;counter-reset:am;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.amorce li{position:relative;margin:0}
.amorce .fig{aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--e2)}
.amorce .fig img{width:100%;height:100%;object-fit:cover}
.amorce .nu{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--M);font-weight:600;font-size:13px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(6,18,31,.35)}
.amorce h3{font-family:var(--D);font-weight:700;font-size:16.5px;letter-spacing:-.022em;margin:12px 0 0}