:root{
  --bg:#0B0F14; --bg-soft:#0E141B; --surface:#131B24; --surface-2:#18222D;
  --line:#243040; --line-strong:#33415380;
  --text:#EDF1F6; --text-2:#B4C0CE; --text-3:#93A1B2;
  --blue:#2F6FEB; --blue-lift:#7CBBFF; --gold:#F0B429; --gold-soft:#F6D07A;
  --teal:#2AB3A6; --ok:#3FCB84; --warn:#F0B429; --alert:#FF6B6E;
  --measure:68ch; --max:1160px; --radius:14px; --radius-sm:9px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter var","Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.025em;text-wrap:balance;margin:0}
p{margin:0 0 1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Focus : un seul style, visible partout, jamais supprimé sans remplacement. */
:focus-visible{outline:3px solid var(--blue-lift);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:14px 20px;
  background:var(--blue);color:#fff;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}

.site-header{position:sticky;top:0;z-index:60;background:rgba(11,15,20,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-shell{max-width:var(--max);margin:auto;padding:0 24px;min-height:72px;
  display:flex;align-items:center;gap:28px}
:root{--header-h:72px}
/* Logo officiel Duck-E — image, pas de texte reconstitué. */
.brand{display:inline-flex;align-items:center;padding:6px 0;flex:none}
.brand-word{display:block;line-height:0}
.brand-word img{display:block;width:168px;height:auto}
.brand-word-footer img{width:200px}
@media (max-width:640px){ .brand-word img{width:138px} }
.desktop-nav{display:flex;align-items:center;gap:4px;flex:1;font-size:15px}
.desktop-nav>a,.nav-group>button{display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:8px;color:var(--text-2);background:none;border:0;
  cursor:pointer;transition:color .15s var(--ease),background .15s var(--ease)}
.desktop-nav>a:hover,.nav-group>button:hover,.nav-group>button[aria-expanded=true]{
  color:var(--text);background:var(--surface)}
.nav-group{position:relative}
.chev{font-size:11px;color:var(--text-3);transition:transform .18s var(--ease)}
.nav-group>button[aria-expanded=true] .chev{transform:rotate(180deg)}
/* HISTORIQUE — le panneau « Solutions » (11 entrees en une colonne) descendait
   sous le bas du viewport en 1600x900 : les dernieres entrees etaient hors
   ecran, donc inatteignables a la souris comme au clavier.
   Les listes longues passent sur deux colonnes ; les deux entrees de tete
   restent pleine largeur pour preserver l'ordre de lecture. Le `max-height`
   n'est qu'un filet de securite pour les ecrans desktop les plus courts : en
   fonctionnement normal il ne se declenche pas. */
.mega{position:absolute;top:calc(100% + 10px);left:0;width:330px;padding:8px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);display:none;
  max-height:calc(100vh - var(--header-h) - 28px);overflow-y:auto;
  overscroll-behavior:contain}
.mega-large{width:min(660px,calc(100vw - 48px))}
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:6px}
.nav-group>button[aria-expanded=true]+.mega{display:block}
.mega a{display:block;padding:11px 12px;border-radius:8px}
.mega a:hover{background:var(--surface)}
.mega strong{display:block;font-size:14.5px}
.mega span{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.header-phone{font-size:14px;color:var(--text-2);white-space:nowrap}
.header-phone:hover{color:var(--text)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;cursor:pointer}
.menu-toggle span:not(.sr-only){display:block;width:20px;height:2px;
  background:var(--text);margin:4px 0;border-radius:2px}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg-soft)}
.mobile-nav.open{display:block;padding:10px 24px 20px}
.mobile-nav a{display:block;padding:13px 0;color:var(--text-2);
  border-bottom:1px solid var(--line);font-size:15.5px}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav .mn-head{color:var(--text-3);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.14em;font-weight:800;padding:16px 0 4px;border:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:9px;
  background:linear-gradient(180deg,#3A7BF2,#2559D4);color:#fff;font-weight:700;
  font-size:15px;cursor:pointer;text-align:center;
  box-shadow:0 10px 26px rgba(47,111,235,.26);
  transition:transform .16s var(--ease),filter .16s var(--ease)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-ghost{background:none;box-shadow:none;border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:var(--surface);filter:none}
.btn-gold{background:linear-gradient(180deg,#F3BE45,#DFA113);color:#1B1405;
  box-shadow:0 10px 26px rgba(240,180,41,.22)}
.btn-sm{min-height:42px;padding:0 16px;font-size:14px}
.btn-block{width:100%}

.hero{max-width:var(--max);margin-inline:auto;padding:72px 24px 64px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:64px;align-items:center}
.hero-copy{min-width:0}
.eyebrow,.section-kicker{margin:0 0 14px;color:var(--blue-lift);
  text-transform:uppercase;letter-spacing:.15em;font-weight:800;font-size:11.5px}
.hero-gold .eyebrow{color:var(--gold-soft)}
.hero-teal .eyebrow{color:#5FD6C9}
.hero h1{font-size:clamp(38px,4.6vw,60px);line-height:1.04;font-weight:800;
  letter-spacing:-.035em;max-width:16ch}
.hero-lead{color:var(--text-2);font-size:19px;line-height:1.55;
  max-width:52ch;margin:22px 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-note{flex-basis:100%;margin:4px 0 0;color:var(--text-3);font-size:13.5px;
  line-height:1.5;max-width:46ch}
.trust-row{list-style:none;padding:0;margin:30px 0 0;display:flex;
  flex-wrap:wrap;gap:10px 22px;color:var(--text-3);font-size:13.5px}
.trust-row li{display:flex;align-items:center;gap:8px}
.trust-row li::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ok);flex:none}
.hero-visual{min-width:0}

/* Le hero accueille une capture RÉELLE du produit, pas une maquette.
   Aucun faux tableau de bord n'est dessiné : un mockup CSS, même stylisé,
   peut être pris pour le produit. Tant que l'asset manque, le cadre le dit. */
.hero-visual .media{margin:0}
.hero-visual .media-frame{aspect-ratio:4/3;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.hero-visual .media img{border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.hero-visual figcaption{font-size:12.5px}
.hero-nomedia{grid-template-columns:minmax(0,1fr)}
.hero-nomedia .hero-copy{max-width:760px}
.chart .bar.h0{height:0%}.chart .bar.h4{height:4%}.chart .bar.h8{height:8%}.chart .bar.h12{height:12%}.chart .bar.h16{height:16%}.chart .bar.h20{height:20%}.chart .bar.h24{height:24%}.chart .bar.h28{height:28%}.chart .bar.h32{height:32%}.chart .bar.h36{height:36%}.chart .bar.h40{height:40%}.chart .bar.h44{height:44%}.chart .bar.h48{height:48%}.chart .bar.h52{height:52%}.chart .bar.h56{height:56%}.chart .bar.h60{height:60%}.chart .bar.h64{height:64%}.chart .bar.h68{height:68%}.chart .bar.h72{height:72%}.chart .bar.h76{height:76%}.chart .bar.h80{height:80%}.chart .bar.h84{height:84%}.chart .bar.h88{height:88%}.chart .bar.h92{height:92%}.chart .bar.h96{height:96%}.chart .bar.h100{height:100%}
main{display:block}
.page-content{max-width:var(--max);margin-inline:auto;padding:0 24px}
.content-section{padding:64px 0;border-top:1px solid var(--line)}
.content-section:first-child{border-top:0}
.content-section h2,.section-heading h2{font-size:clamp(27px,3.1vw,40px);
  line-height:1.12;font-weight:800;max-width:22ch}
.section-intro{color:var(--text-2);font-size:17.5px;margin:16px 0 0;max-width:var(--measure)}
.content-section h3{font-size:18px;font-weight:700}
.section-emphasis{background:var(--bg-soft);border-radius:var(--radius);
  padding:48px 32px;border-top:0;margin:48px 0}

.feature-grid{display:grid;gap:14px;margin-top:32px}
.feature-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.feature-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.feature-card{padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
.feature-card h3{font-size:16.5px;margin-bottom:8px}
.feature-card p{color:var(--text-2);font-size:14.5px;margin:0}

.list-check,.list-plain{list-style:none;padding:0;margin:26px 0;display:grid;gap:10px;
  max-width:var(--measure)}
.list-check.two,.list-plain.two{grid-template-columns:repeat(2,1fr);max-width:900px}
.list-check li{position:relative;padding-left:30px;color:var(--text-2)}
.list-check li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;
  border-radius:2px;background:var(--ok)}
.list-plain li{position:relative;padding-left:22px;color:var(--text-2)}
.list-plain li::before{content:"—";position:absolute;left:0;color:var(--text-3)}

.process{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:12px;
  grid-template-columns:repeat(4,1fr);counter-reset:none}
.process li{border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  background:var(--surface)}
.process-num{font-size:12px;font-weight:800;color:var(--blue-lift);
  letter-spacing:.12em;font-variant-numeric:tabular-nums}
.process h3{font-size:16px;margin:16px 0 7px}
.process p{color:var(--text-2);font-size:14px;margin:0}

.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.ba-col{border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.ba-before{background:var(--surface)}
.ba-after{background:linear-gradient(160deg,#132029,#101820);border-color:#2A4A47}
.ba-col h3{font-size:16px;margin-bottom:14px}
.ba-before h3{color:var(--text-3)}
.ba-after h3{color:var(--teal)}
.ba-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ba-col li{position:relative;padding-left:24px;color:var(--text-2);font-size:14.5px}
.ba-before li::before{content:"×";position:absolute;left:4px;color:var(--text-3);font-weight:700}
.ba-after li::before{content:"✓";position:absolute;left:2px;color:var(--ok);font-weight:700}

.objections{display:grid;gap:12px;margin-top:30px}
.objection{border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);padding:20px 22px;background:var(--surface)}
.objection h3{font-size:15.5px;margin-bottom:7px;color:var(--gold-soft)}
.objection p{color:var(--text-2);font-size:14.5px;margin:0}

.faq{margin-top:28px;max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 40px 20px 0;cursor:pointer;font-weight:650;
  font-size:16.5px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:18px;
  font-size:22px;color:var(--text-3);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq-answer{color:var(--text-2);padding-bottom:20px;font-size:15.5px}

.callout{border-radius:var(--radius-sm);padding:16px 18px;font-size:14.5px;
  max-width:var(--measure);border:1px solid var(--line);background:var(--surface);
  color:var(--text-2)}
.callout-warn{border-left:3px solid var(--warn)}
.callout-info{border-left:3px solid var(--blue)}

.text-link{display:inline-block;color:var(--blue-lift);font-weight:650;margin-top:8px}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}

.link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
.link-grid a{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 20px;background:var(--surface);transition:border-color .15s var(--ease)}
.link-grid a:hover{border-color:var(--line-strong)}
.link-grid strong{display:block;font-size:15.5px}
.link-grid span{display:block;color:var(--text-3);font-size:13px;margin-top:3px}

/* --- Schémas de fonctionnement -------------------------------------------
   Chaîne horizontale sur desktop, verticale sur mobile. Les connecteurs sont
   purement décoratifs : l'ordre est porté par <ol>. */
/* Le composant decide selon SA largeur, pas celle du viewport : dans la
   colonne etroite du hero il n'y a pas la place de mettre quatre etapes de
   front, meme sur un ecran de 1600 px. Sans cela les cartes tombaient a 93 px
   de large — sans debordement, mais illisibles. */
.flow-fig{margin:36px 0 0;container-type:inline-size}
/* HISTORIQUE — ce composant debordait horizontalement dans la colonne etroite
   du hero : `min-width:158px` empechait les noeuds de se reduire, la marge de
   26px entre eux s'ajoutait a la largeur, et `overflow-x:auto` transformait le
   depassement en barre de defilement interne avec la 3e carte coupee.
   Grille a colonnes egales et reductibles : `minmax(0,1fr)` autorise la
   reduction jusqu'a zero, le `gap` remplace la marge, et les connecteurs sont
   en position absolue dans ce gap — ils n'ajoutent aucune largeur. */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:26px;overflow:visible}
.flow-node{min-width:0;position:relative;padding:22px 18px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  display:flex;flex-direction:column;gap:7px;overflow-wrap:anywhere}
/* connecteur : flèche entre deux nœuds */
.flow-node:not(:last-child)::after{content:"";position:absolute;top:50%;
  right:-26px;width:26px;height:2px;background:linear-gradient(90deg,
  var(--line-strong),var(--blue));transform:translateY(-50%)}
.flow-node:not(:last-child)::before{content:"";position:absolute;top:50%;right:-8px;
  width:7px;height:7px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);
  transform:translateY(-50%) rotate(45deg);z-index:1}
.flow-ic{color:var(--blue-lift);display:block;height:22px}
.flow-node strong{font-size:15px;line-height:1.3}
.flow-node span{color:var(--text-2);font-size:13px;line-height:1.45}
.flow-node-end{background:linear-gradient(160deg,#152234,#101821);
  border-color:#2F5C8F}
.flow-node-end .flow-ic{color:var(--gold)}
.flow-cap{color:var(--text-3);font-size:13.5px;margin-top:16px;max-width:var(--measure);
  line-height:1.55}
.hero-gold .flow-ic,.pv-gold .flow-ic{color:var(--gold-soft)}
/* Parcours vertical des que la colonne est trop etroite pour aligner les
   etapes. Meme rendu que sur mobile, declenche par le conteneur. */
@container (max-width:640px){
  .flow{grid-auto-flow:row;grid-auto-columns:auto;gap:24px}
  .flow-node:not(:last-child)::after{top:auto;bottom:-24px;right:auto;left:32px;
    width:2px;height:24px;
    background:linear-gradient(180deg,var(--line-strong),var(--blue));
    transform:none}
  .flow-node:not(:last-child)::before{top:auto;bottom:-8px;right:auto;left:29px;
    transform:rotate(135deg)}
}

/* --- Architecture d'ensemble --------------------------------------------- */
.arch-fig{margin:36px 0 0}
.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  background:linear-gradient(150deg,var(--surface),var(--bg-soft))}
.arch-col{display:flex;flex-direction:column;gap:9px;position:relative}
.arch-col:not(:last-child)::after{content:"";position:absolute;top:42px;right:-11px;
  bottom:8px;width:1px;background:var(--line)}
.arch-lab{margin:0 0 5px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.14em;font-weight:800;color:var(--text-3)}
.arch-chip{display:flex;align-items:center;gap:9px;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-soft);
  color:var(--blue-lift);font-size:13px}
.arch-chip span{color:var(--text);line-height:1.3}
.arch-chip svg{flex:none}
.arch-chip-hi{border-color:#2F5C8F;background:linear-gradient(160deg,#152234,#101821)}
.arch-chip-hi{color:var(--gold)}
.arch-note{margin:4px 0 0;font-size:11.5px;color:var(--text-3);line-height:1.4}

@media (max-width:900px){
  .flow{grid-auto-flow:row;grid-auto-columns:auto;gap:24px;overflow:visible}
  .flow-node:not(:last-child)::after{top:auto;bottom:-24px;right:auto;left:32px;
    width:2px;height:24px;background:linear-gradient(180deg,var(--line-strong),var(--blue));
    transform:none}
  .flow-node:not(:last-child)::before{top:auto;bottom:-8px;right:auto;left:29px;
    transform:rotate(135deg)}
  .arch-grid{grid-template-columns:1fr;gap:20px}
  .arch-col:not(:last-child)::after{top:auto;left:0;right:0;bottom:-10px;
    width:auto;height:1px}
}

/* --- Illustration du hero Monitor ----------------------------------------
   Volontairement schématique : rien ne doit évoquer une capture d'écran. */
.hero-monitor{margin:0}
.hm-box{border:1px solid var(--line);border-radius:18px;padding:26px 22px;
  background:linear-gradient(160deg,var(--surface),var(--bg-soft));
  box-shadow:0 40px 90px rgba(0,0,0,.4)}
.hm-tag{margin:0 0 20px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.16em;font-weight:800;color:var(--text-3)}
.hm-step{margin:0 0 12px;font-size:12.5px;font-weight:700;color:var(--blue-lift);
  letter-spacing:.02em}
.hm-caps{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:1fr 1fr;gap:10px}
.hm-chip{display:flex;align-items:center;gap:10px;padding:13px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.hm-ic{color:var(--blue-lift);display:grid;place-items:center;flex:none}
.hm-lab{color:var(--text-2);font-size:13px;flex:1;min-width:0}
.hm-val{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-arrow{height:26px;display:grid;place-items:center;margin:6px 0}
.hm-arrow span{width:2px;height:100%;
  background:linear-gradient(180deg,var(--line-strong),var(--blue));
  position:relative}
.hm-arrow span::after{content:"";position:absolute;bottom:0;left:50%;
  width:7px;height:7px;border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);transform:translate(-50%,2px) rotate(45deg)}
.hm-core,.hm-alert{display:flex;align-items:center;gap:14px;padding:16px 16px;
  border-radius:12px;border:1px solid var(--line)}
.hm-core{background:linear-gradient(150deg,#152234,#101821);border-color:#2F5C8F}
.hm-core .hm-ic{color:var(--blue-lift)}
.hm-alert{background:linear-gradient(150deg,#2A1F16,#171310);border-color:#7A5A22}
.hm-alert .hm-ic{color:var(--gold)}
.hm-core strong,.hm-alert strong{display:block;font-size:15.5px}
.hm-core span,.hm-alert span{display:block;color:var(--text-2);font-size:13px;
  margin-top:2px;line-height:1.4}
.hero-monitor figcaption{color:var(--text-3);font-size:12.5px;margin-top:14px;
  line-height:1.5}

/* --- Événements d'alerte -------------------------------------------------- */
.alrt-list{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:11px;
  max-width:760px}
.alrt{display:flex;align-items:center;gap:15px;padding:17px 18px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);
  border-left-width:3px}
.alrt-alert{border-left-color:var(--alert)}
.alrt-warn{border-left-color:var(--warn)}
.alrt-ic{display:grid;place-items:center;flex:none}
.alrt-alert .alrt-ic{color:var(--alert)}
.alrt-warn .alrt-ic{color:var(--warn)}
.alrt strong{display:block;font-size:15.5px}
.alrt span{display:block;color:var(--text-2);font-size:14px;margin-top:2px;
  line-height:1.45}
.alrt-note{margin-top:16px;color:var(--text-3);font-size:13px;font-style:italic}
.alrt-punch{margin-top:30px;font-size:clamp(20px,2.4vw,27px);font-weight:800;
  letter-spacing:-.02em;line-height:1.25;max-width:22ch}
.alrt-punch em{font-style:normal;color:var(--gold)}

/* --- Chaîne de valeur ----------------------------------------------------- */
.chaine{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;
  gap:8px;counter-reset:c}
.chaine li{counter-increment:c;display:flex;align-items:center;gap:8px;
  padding:10px 15px;border:1px solid var(--line);border-radius:99px;
  background:var(--surface);font-size:14px;font-weight:600}
.chaine li::before{content:counter(c);font-size:10.5px;font-weight:800;
  color:var(--blue-lift);font-variant-numeric:tabular-nums}

/* --- Récit du parcours ---------------------------------------------------- */
.recit{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:0}
.recit li{display:grid;grid-template-columns:112px 1fr;gap:22px;
  padding:22px 0;border-top:1px solid var(--line)}
.recit li:first-child{border-top:0;padding-top:0}
.recit b{font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--blue-lift);font-weight:800;padding-top:3px}
.recit strong{display:block;font-size:17.5px;margin-bottom:6px}
.recit span{color:var(--text-2);font-size:15px;line-height:1.55;display:block;
  max-width:60ch}

@media (max-width:640px){
  .hm-caps{grid-template-columns:1fr}
  .hm-box{padding:20px 16px}
  .recit li{grid-template-columns:1fr;gap:8px;padding:20px 0}
  /* Aucun texte sous 12px sur mobile : les libellés d'étape et la mention
     d'illustration doivent rester lisibles à bout de bras. */
  .recit b{padding-top:0;font-size:12.5px;letter-spacing:.1em}
  .hm-tag{font-size:12px;letter-spacing:.12em}
  .chaine li{font-size:13px;padding:9px 13px}
  .chaine li::before{font-size:12px}
}

/* --- Hero fuite d'eau : chaîne en 4 temps -------------------------------- */
.hero-fuite{margin:0}
.fu-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.fu-step{display:grid;grid-template-columns:30px 26px 1fr;gap:13px;
  align-items:start;padding:15px 0;border-top:1px solid var(--line)}
.fu-step:first-child{border-top:0;padding-top:0}
.fu-step:last-child{padding-bottom:0}
.fu-num{font-size:12.5px;font-weight:800;color:var(--blue-lift);
  font-variant-numeric:tabular-nums;padding-top:2px}
.fu-ic{color:var(--blue-lift);display:grid;place-items:center}
.fu-step strong{display:block;font-size:15px;line-height:1.35}
.fu-step span{display:block;color:var(--text-2);font-size:13px;margin-top:3px;
  line-height:1.45}
.fu-step:last-child .fu-ic{color:var(--gold)}
.hero-fuite figcaption{color:var(--text-3);font-size:12.5px;margin-top:14px}

/* --- Événement d'alerte illustré ----------------------------------------- */
.evt-fig{margin:30px 0 0;max-width:620px}
.evt-card{border:1px solid var(--line);border-left:3px solid var(--alert);
  border-radius:var(--radius);padding:20px 22px;background:var(--surface)}
.evt-head{display:flex;align-items:center;gap:14px;margin-top:12px}
.evt-ic{color:var(--alert);display:grid;place-items:center;flex:none}
.evt-head strong{display:block;font-size:17px}
.evt-head span{display:block;color:var(--text-2);font-size:14px;margin-top:2px}
.evt-time{margin-left:auto;color:var(--text-3);font-size:13px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.evt-flow{list-style:none;padding:0;margin:18px 0 0;display:flex;
  flex-wrap:wrap;gap:8px;align-items:center}
.evt-flow li{padding:7px 14px;border:1px solid var(--line);border-radius:99px;
  background:var(--bg-soft);font-size:13.5px;font-weight:600}
.evt-flow li+li::before{content:"→";margin-right:10px;color:var(--text-3);
  font-weight:400}
.evt-fig figcaption{color:var(--text-3);font-size:12.5px;margin-top:12px}

/* --- Points de placement -------------------------------------------------- */
.plc-list{list-style:none;padding:0;margin:30px 0 0;display:grid;
  grid-template-columns:1fr 1fr;gap:12px}
.plc-item{display:flex;gap:14px;padding:18px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface)}
.plc-ic{color:var(--blue-lift);flex:none;display:grid;place-items:center;
  height:22px}
.plc-item strong{display:block;font-size:15.5px;margin-bottom:5px}
.plc-item span{display:block;color:var(--text-2);font-size:14px;line-height:1.5}

@media (max-width:640px){
  .plc-list{grid-template-columns:1fr}
  .fu-step{grid-template-columns:26px 24px 1fr;gap:11px}
  .evt-head{flex-wrap:wrap}
  .evt-time{margin-left:0;flex-basis:100%}
}

/* --- Courbe de dérive thermique ------------------------------------------
   Identité propre à la chaîne du froid : bande de normalité, ligne de seuil,
   zone de dépassement. Aucun élément d'interface n'est imité. */
.froid-fig{margin:0}
.froid-chart svg{width:100%;height:190px;display:block;overflow:visible}
.fz-ok{fill:rgba(63,203,132,.09)}
.fz-depass{fill:rgba(255,107,110,.10)}
.fz-seuil{stroke:var(--alert);stroke-width:1.5;stroke-dasharray:6 5;opacity:.85}
.fz-courbe{fill:none;stroke:var(--blue-lift);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.fz-point{fill:var(--alert);stroke:var(--bg);stroke-width:2.5}
.fz-legende{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px}
.fz-legende li{display:flex;align-items:center;gap:10px;color:var(--text-2);
  font-size:13.5px;line-height:1.4}
.fz-k{width:14px;height:14px;border-radius:4px;flex:none}
.fz-k-ok{background:rgba(63,203,132,.35);border:1px solid var(--ok)}
.fz-k-seuil{background:transparent;border:1.5px dashed var(--alert);height:0;
  border-radius:0;margin-block:6px}
.fz-k-alert{background:rgba(255,107,110,.35);border:1px solid var(--alert)}
.froid-fig figcaption{color:var(--text-3);font-size:12.5px;margin-top:14px;
  line-height:1.5}

/* --- Chronologie corrélée -------------------------------------------------- */
.chr-list{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:0;
  max-width:680px}
.chr-item{display:grid;grid-template-columns:64px 26px 1fr;gap:14px;
  align-items:start;padding:17px 0;border-top:1px solid var(--line);
  position:relative}
.chr-item:first-child{border-top:0;padding-top:0}
.chr-h{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text-2);padding-top:1px}
.chr-ic{color:var(--blue-lift);display:grid;place-items:center}
.chr-alert .chr-ic{color:var(--alert)}
.chr-ok .chr-ic{color:var(--ok)}
.chr-item strong{display:block;font-size:15.5px;line-height:1.35}
.chr-item span{display:block;color:var(--text-2);font-size:13.5px;margin-top:3px}
.chr-alert strong{color:var(--alert)}
.chr-note{margin-top:18px;color:var(--text-3);font-size:13px;font-style:italic}

/* --- États côte à côte ----------------------------------------------------- */
.etat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;
  max-width:640px}
.etat{border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  background:var(--surface)}
.etat-ok{border-left:3px solid var(--ok)}
.etat-alert{border-left:3px solid var(--alert);
  background:linear-gradient(150deg,#241a1b,#161113)}
.etat-val{display:block;font-size:34px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-top:10px}
.etat-ok .etat-val{color:var(--ok)}
.etat-alert .etat-val{color:var(--alert)}
.etat-lab{display:block;color:var(--text-2);font-size:13.5px;margin-top:7px;
  line-height:1.4}

@media (max-width:640px){
  .froid-chart svg{height:160px}
  .chr-item{grid-template-columns:56px 22px 1fr;gap:11px}
  .etat-grid{grid-template-columns:1fr}
  .etat-val{font-size:30px}
}

/* --- Coupe de cuve ---------------------------------------------------------
   Le SVG porte la géométrie, la liste porte les libellés. Aucun texte
   descriptif n'est enfermé dans le viewBox : il resterait illisible à 390 px
   et invisible pour un lecteur d'écran. */
.cuve-fig{margin:0}
.cuve-wrap{display:grid;gap:28px;align-items:center;
  grid-template-columns:minmax(0,270px) minmax(0,1fr)}
.cv-svg{width:100%;height:auto;max-height:330px;display:block}
.cv-body{fill:rgba(19,27,36,.9);stroke:var(--line-strong);stroke-width:2.5}
.cv-capt{fill:var(--surface-2);stroke:var(--blue-lift);stroke-width:2}
.cv-fil{stroke:var(--blue-lift);stroke-width:2;stroke-linecap:round}
.cv-liq{fill:rgba(47,111,235,.30)}
.cv-surf{fill:none;stroke:var(--blue-lift);stroke-width:2.5;
  stroke-linecap:round}
.cv-cote{stroke:var(--text-3);stroke-width:1.4;stroke-dasharray:5 4}
.cv-fle{fill:none;stroke:var(--text-3);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round}
.cv-tick{stroke:var(--text-3);stroke-width:1.4;stroke-linecap:round}
.cv-val{fill:var(--text);font-size:34px;font-weight:800;letter-spacing:-.02em}
.cv-marq circle{fill:var(--bg);stroke:var(--blue-lift);stroke-width:1.8}
.cv-marq text{fill:var(--blue-lift);font-size:17px;font-weight:700}
.cv-leg{list-style:none;padding:0;margin:0;display:grid;gap:14px;
  counter-reset:none}
.cv-leg li{display:grid;grid-template-columns:26px 1fr;gap:12px;
  align-items:start}
.cv-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(124,187,255,.12);border:1.5px solid var(--blue-lift);
  color:var(--blue-lift);font-size:13px;font-weight:700;line-height:1}
.cv-leg strong{display:block;font-size:15px;line-height:1.35}
.cv-leg span:not(.cv-n){display:block;color:var(--text-2);font-size:13.5px;
  line-height:1.5;margin-top:2px}
.cuve-fig figcaption{color:var(--text-3);font-size:12.5px;margin-top:16px;
  line-height:1.55}

/* --- Critères de choix de la technologie ---------------------------------- */
.crt-grid{display:grid;gap:18px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.crt-col{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
.crt-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-weight:700;font-size:15.5px;line-height:1.3;max-width:none}
.crt-ic{color:var(--blue-lift);display:flex;flex:none}
.crt-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.crt-list li{position:relative;padding-left:18px;color:var(--text-2);
  font-size:14.5px;line-height:1.45}
.crt-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;
  height:7px;border-radius:50%;background:var(--blue-lift);opacity:.65}
.crt-note{color:var(--text-3);font-size:13.5px;margin-top:18px;line-height:1.55}

/* --- Descente du niveau vers le seuil bas --------------------------------- */
.niv-fig{margin:0}
.nv-vals{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.nv-vals li{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 15px}
.nv-vals b{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;
  line-height:1.1}
.nv-vals span{display:block;color:var(--text-3);font-size:12.5px;
  line-height:1.4;margin-top:4px}
.nv-seuil{border-color:rgba(255,107,110,.45)}
.nv-seuil b{color:var(--alert)}
.niv-chart svg{width:100%;height:170px;display:block;overflow:visible}
.nv-zone{fill:rgba(255,107,110,.10)}
.nv-lseuil{stroke:var(--alert);stroke-width:1.5;stroke-dasharray:6 5;opacity:.85}
.nv-courbe{fill:none;stroke:var(--blue-lift);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.nv-pt{fill:var(--blue-lift);stroke:var(--bg);stroke-width:2.5}
.nv-cap{color:var(--text-2);font-size:13.5px;margin:16px 0 0;line-height:1.5}
.niv-fig figcaption{color:var(--text-3);font-size:12.5px;margin-top:14px;
  line-height:1.55}

@media (max-width:760px){
  .cuve-wrap{grid-template-columns:1fr;gap:22px;justify-items:center}
  .cv-svg{max-width:320px}
  .cv-leg{width:100%}
}

/* --- Duck-E Protect — registre grand public --------------------------------
   Cette landing n'est pas une page d'intégrateur : cartes plus grandes,
   respirations plus larges, moins de texte par écran. Les tokens restent ceux
   du site — c'est le rythme qui change, pas la marque. */
.pv-fig{margin:0}
.pv-card{background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:22px;position:relative;overflow:hidden}
.pv-tag{position:absolute;top:14px;right:16px;margin:0;z-index:2;
  color:var(--text-3);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.13em;font-weight:800;max-width:none}
.pv-fig figcaption{color:var(--text-3);font-size:12.5px;margin-top:14px;
  line-height:1.55}

/* Plan schématique du hero */
.pv-map{width:100%;height:auto;max-height:320px;display:block;
  border-radius:12px;background:var(--bg-soft)}
.pv-rues path{stroke:var(--line);stroke-width:9;stroke-linecap:round}
.pv-bloc{fill:var(--surface-2)}
.pv-route{fill:none;stroke:var(--gold);stroke-width:4.5;stroke-linecap:round;
  stroke-linejoin:round}
.pv-depart{fill:var(--bg);stroke:var(--gold);stroke-width:3.5}
.pv-arrivee{fill:var(--gold);stroke:var(--bg);stroke-width:3}
.pv-pin path{fill:var(--gold);stroke:var(--bg);stroke-width:2.5}
.pv-pin-eye{fill:var(--bg)}
.pv-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:16px 0 0;color:var(--text-2);font-size:13px;line-height:1.4;
  max-width:none}
.pv-dot{width:11px;height:11px;border-radius:50%;flex:none}
.pv-dot-a{background:var(--bg);border:2.5px solid var(--gold)}
.pv-dot-b{background:var(--gold)}
.pv-sep{width:1px;height:14px;background:var(--line);margin:0 6px}

/* Les trois briques du service */
.pv-briques{display:grid;gap:20px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.pv-brique{background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:30px 26px}
.pv-brique-ic{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:15px;color:var(--gold-soft);
  background:rgba(240,180,41,.10);border:1px solid rgba(240,180,41,.22)}
.pv-brique h3{margin:20px 0 10px;font-size:19px;line-height:1.25;font-weight:800}
.pv-brique p{margin:0;color:var(--text-2);font-size:15.5px;line-height:1.6}

/* Trajet enregistré */
.pv-trajet-grid{display:grid;gap:24px;align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.pv-trace{width:100%;height:auto;display:block;border-radius:12px;
  background:var(--bg-soft)}
.pv-stats{margin:0;display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.pv-stats div{min-width:0}
.pv-stats dt{color:var(--text-3);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:800}
.pv-stats dd{margin:5px 0 0;font-size:24px;font-weight:800;letter-spacing:-.02em;
  line-height:1.1}

/* Couches de protection */
.pv-couches{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.pv-couches li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px}
.pv-couches strong{display:block;font-size:15.5px;line-height:1.3}
.pv-couches span{display:block;color:var(--text-2);font-size:14px;
  line-height:1.5;margin-top:6px}
.pv-couche-plus{display:flex;gap:18px;align-items:flex-start;margin-top:16px;
  padding:24px;border-radius:var(--radius);background:var(--surface-2);
  border:1px solid rgba(240,180,41,.30)}
.pv-couche-plus strong{display:block;font-size:17px;line-height:1.3;
  color:var(--gold-soft)}
.pv-couche-plus span{display:block;color:var(--text-2);font-size:15px;
  line-height:1.6;margin-top:7px}

/* Respiration propre à cette landing : sections plus courtes, plus espacées.
   Le crochet est le `tone` déjà prévu par blocks.section() — aucune nouvelle
   mécanique de gabarit n'est introduite pour une seule page. */
.content-section.section-pv{padding-block:clamp(52px,7vw,84px)}
.content-section.section-pv>h2{font-size:clamp(27px,3.4vw,40px);
  line-height:1.12;max-width:19ch}
.content-section.section-pv>.section-intro{font-size:18px;line-height:1.6;
  max-width:56ch}

/* La scène d'ouverture : peu de mots, beaucoup de place. */
.pv-scene{max-width:23ch}
.pv-reponse{margin-top:26px;padding:26px 28px;border-radius:20px;
  background:var(--surface);border:1px solid rgba(240,180,41,.30);
  font-size:19px;line-height:1.55;color:var(--text);max-width:52ch}

/* Emplacement réservé au bloc tarifaire : la grille l'accueille sans que la
   page soit refaite le jour où le modèle commercial est arrêté. */
.pv-offre{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}

/* Lien « déjà client » — présent, jamais concurrent du CTA principal. */
.pv-deja{margin-top:20px;color:var(--text-3);font-size:14.5px}
/* inline-block + padding : en pur inline le lien tombait a 20px de haut,
   sous le seuil de cible tactile. */
.pv-deja a{display:inline-block;padding:4px 2px;color:var(--gold-soft);
  text-decoration:underline;text-underline-offset:3px}

/* --- Hub Protect : deux univers, la landing principale mise en avant ------ */
.pt-univers{margin:34px 0 16px;font-size:15px;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold-soft)}
.pt-univers:first-of-type{margin-top:8px}
/* --- Hub Protect : cartes ---------------- */
/* 2x2 plutot que 4 colonnes : a 4 de front, la quatrieme carte tombait seule
   sur une deuxieme rangee avec trois colonnes vides a cote. */
.pt-portes{display:grid;gap:18px;margin-top:8px;grid-template-columns:1fr}
@media (min-width:720px){ .pt-portes{grid-template-columns:repeat(2,1fr)} }
.pt-porte{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:28px 26px;
  transition:transform .16s var(--ease),border-color .16s var(--ease)}
.pt-porte:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.pt-porte h3{margin:18px 0 10px;font-size:21px;line-height:1.2;font-weight:800}
.pt-porte p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6}
.pt-go{display:block;margin-top:16px;color:var(--gold-soft);font-size:14.5px;
  font-weight:700}
/* Fleche : caractere Unicode direct. En echappement CSS (\2192) la chaine
   traverse d'abord Python, qui lit \21 comme un octal et laisse « 92 »
   visible dans la page. Le caractere litteral ne peut pas subir ca. */
.pt-go::after{content:" →"}
/* La voiture est la landing d'acquisition principale : elle se distingue par
   le traitement, pas par un span qui desequilibrerait la grille. */
.pt-porte-hi{border-color:rgba(240,180,41,.34);background:var(--surface-2)}
.pt-porte-hi h3{color:var(--gold-soft)}
/* --- Landing moto : la place de stationnement, pas le plan de ville ------- */
.mt-sol path{stroke:var(--line);stroke-width:4;stroke-linecap:round}
.mt-vide rect{fill:none;stroke:var(--text-3);stroke-width:2.5;
  stroke-dasharray:8 7}
.mt-vide path{stroke:var(--text-3);stroke-width:2.5;stroke-dasharray:8 7}
.mt-occupee rect{fill:var(--surface-2);stroke:var(--line-strong);
  stroke-width:2.5}
.mt-occupee path{stroke:var(--line-strong);stroke-width:2.5}
.mt-fuite{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:2 10}
.mt-dot-vide{background:transparent;border:2.5px dashed var(--text-3)}

/* Suite d'états d'un déplacement — chronologie, pas carte + statistiques. */
.mt-suite{list-style:none;padding:0;margin:0;display:grid;gap:0}
.mt-etape{position:relative;padding:16px 0 16px 30px;
  border-top:1px solid var(--line)}
.mt-etape:first-child{border-top:0;padding-top:4px}
.mt-etape::before{content:"";position:absolute;left:4px;top:24px;width:11px;
  height:11px;border-radius:50%;background:var(--bg);
  border:2.5px solid var(--line-strong)}
.mt-etape:first-child::before{top:12px}
.mt-etape::after{content:"";position:absolute;left:9px;top:35px;bottom:-16px;
  width:1px;background:var(--line)}
.mt-etape:last-child::after{display:none}
.mt-etape strong{display:block;font-size:16px;line-height:1.3}
.mt-etape span{display:block;color:var(--text-2);font-size:14.5px;
  line-height:1.5;margin-top:5px}
.mt-etape-hi::before{background:var(--gold);border-color:var(--gold)}
.mt-etape-hi strong{color:var(--gold-soft)}
.mt-etape-end::before{background:var(--bg);border-color:var(--gold)}

/* --- Landing vélo : l'arceau et l'antivol qui reste ---------------------- */
.vl-sol{stroke:var(--line);stroke-width:4;stroke-linecap:round}
.vl-arceau{fill:none;stroke:var(--line-strong);stroke-width:9;
  stroke-linecap:round}
.vl-antivol path,.vl-antivol rect{fill:none;stroke:var(--gold);
  stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.vl-antivol rect{fill:rgba(240,180,41,.12)}
.vl-absent circle,.vl-absent path{fill:none;stroke:var(--text-3);
  stroke-width:3;stroke-dasharray:9 8;stroke-linecap:round;
  stroke-linejoin:round}

/* Fil court : trois repères, pas un tableau. */
.vl-fil{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.vl-fil li{position:relative;padding-left:26px}
.vl-fil li::before{content:"";position:absolute;left:0;top:7px;width:10px;
  height:10px;border-radius:50%;background:var(--gold)}
.vl-fil li+li::before{background:var(--bg);
  box-shadow:inset 0 0 0 2.5px var(--line-strong)}
.vl-fil strong{display:block;font-size:16px;line-height:1.3}
.vl-fil span{display:block;color:var(--text-2);font-size:14.5px;
  line-height:1.5;margin-top:3px}
@media (min-width:720px){
  .vl-fil{grid-template-columns:repeat(3,1fr);gap:20px}
}

/* --- Landing camping-car : distance et durée, pas mise en scène du vol --- */
.cc-vous circle,.cc-vous path{fill:none;stroke:var(--text-2);stroke-width:3;
  stroke-linecap:round}
.cc-dist{stroke:var(--text-3);stroke-width:2;stroke-dasharray:3 9;
  stroke-linecap:round}
.cc-duree rect{fill:var(--surface-2);stroke:var(--line-strong);
  stroke-width:1.5}
.cc-duree path{stroke:var(--text-3);stroke-width:2.5;stroke-linecap:round}
.cc-vehicule rect{fill:var(--surface-2);stroke:var(--gold);stroke-width:3}
.cc-vehicule path{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.cc-vehicule circle{fill:var(--bg);stroke:var(--gold);stroke-width:3}
.cc-emplacement{stroke:var(--line);stroke-width:3;stroke-dasharray:10 8;
  stroke-linecap:round;fill:none}
.cc-dot-vous{background:transparent;border:2.5px solid var(--text-2)}
.cc-dot-veh{background:transparent;border:2.5px solid var(--gold)}

/* Itinéraire : étapes successives, distinct du fil vélo et de la suite moto. */
.cc-voyage{list-style:none;padding:0;margin:0;display:grid;gap:0}
.cc-etape{position:relative;padding:15px 0 15px 32px}
.cc-etape::before{content:"";position:absolute;left:5px;top:22px;width:10px;
  height:10px;border-radius:50%;background:var(--bg);
  box-shadow:inset 0 0 0 2.5px var(--gold)}
.cc-etape::after{content:"";position:absolute;left:9.5px;top:34px;bottom:-3px;
  width:1.5px;background:linear-gradient(var(--gold),var(--line))}
.cc-etape:last-child::after{display:none}
.cc-etape-end::before{background:var(--gold);box-shadow:none;width:14px;
  height:14px;left:3px;top:20px}
.cc-etape strong{display:block;font-size:16.5px;line-height:1.3}
.cc-etape-end strong{color:var(--gold-soft)}
.cc-etape span{display:block;color:var(--text-2);font-size:14.5px;
  line-height:1.5;margin-top:3px}

/* --- Protect « lieux » : le bien ET l'endroit où il dort ------------------ */
.lx-combi{display:grid;gap:16px;align-items:stretch;
  grid-template-columns:1fr;margin-top:8px}
.lx-col{background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:26px 24px}
.lx-head{display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font-weight:800;font-size:18px;line-height:1.25;max-width:none}
.lx-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.lx-list li{position:relative;padding-left:18px;color:var(--text-2);
  font-size:15px;line-height:1.45}
.lx-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;
  height:7px;border-radius:50%;background:var(--gold);opacity:.75}
.lx-somme{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:26px 24px;
  border-radius:20px;background:var(--surface-2);
  border:1px solid rgba(240,180,41,.32)}
.lx-somme strong{font-size:19px;font-weight:800;color:var(--gold-soft)}
.lx-somme span:not(.pv-brique-ic){color:var(--text-2);font-size:14.5px}
@media (min-width:860px){
  .lx-combi{grid-template-columns:1fr 1fr .82fr}
}

/* Vue agrégée d'un lieu */
.lx-titre{margin:0 0 16px;font-size:19px;font-weight:800;max-width:none}
.lx-vue{list-style:none;padding:0;margin:0;display:grid;gap:0}
.lx-item{display:grid;grid-template-columns:34px 1fr auto;gap:12px;
  align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.lx-item:first-child{border-top:0;padding-top:0}
.lx-ic{display:flex;color:var(--text-3)}
.lx-item strong{font-size:15.5px;line-height:1.3;font-weight:600}
.lx-val{color:var(--text-2);font-size:15px;text-align:right;font-weight:700}
.lx-item-ok .lx-val{color:var(--ok)}
.lx-item-hi .lx-ic{color:var(--gold-soft)}
.lx-item-hi .lx-val{color:var(--gold-soft)}

/* Température du local */
.lx-temp{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:22px}
.lx-temp-val{font-size:clamp(38px,6vw,54px);font-weight:800;
  letter-spacing:-.03em;line-height:1}
.lx-temp-lab{color:var(--text-3);font-size:14.5px}

.gx-mur{fill:var(--surface);stroke:var(--line-strong);stroke-width:3;
  stroke-linejoin:round}
.gx-porte{fill:var(--surface-2);stroke:var(--gold);stroke-width:3}
.gx-lames{stroke:var(--gold);stroke-width:2;opacity:.55}
.gx-capteur rect{fill:var(--bg);stroke:var(--gold);stroke-width:2.5}
.gx-capteur path{fill:none;stroke:var(--gold);stroke-width:2.5;
  stroke-linecap:round}
.gx-dedans circle,.gx-dedans path{fill:none;stroke:var(--blue-lift);
  stroke-width:2.5;opacity:.75;stroke-linecap:round;stroke-linejoin:round}
.gx-dot-porte{background:transparent;border:2.5px solid var(--gold)}

/* --- Qualité de l'air : la journée, les locaux, l'échelle ---------------- */
.air-fig{margin:0}
.air-chart svg{width:100%;height:170px;display:block;overflow:visible}
.air-courbe{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.air-pt{fill:var(--teal);stroke:var(--bg);stroke-width:2.5}
.air-etapes{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:0;
  max-width:680px}
.air-etapes li{display:grid;grid-template-columns:58px 1fr;gap:14px;
  align-items:start;padding:15px 0;border-top:1px solid var(--line)}
.air-etapes li:first-child{border-top:0;padding-top:0}
.air-h{color:var(--teal);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.air-etapes strong{display:block;font-size:15.5px;line-height:1.3}
.air-etapes span{display:block;color:var(--text-2);font-size:14px;
  line-height:1.5;margin-top:3px}
.air-fig figcaption{color:var(--text-3);font-size:12.5px;margin-top:14px;
  line-height:1.55}

/* Comparaison de locaux */
.air-salles{list-style:none;padding:0;margin:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.air-salle{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 18px}
.air-salle strong{display:block;font-size:14px;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.air-val{display:block;font-size:25px;font-weight:800;letter-spacing:-.02em;
  line-height:1.1;margin-top:7px}
.air-note{display:block;color:var(--text-2);font-size:12.5px;line-height:1.4;
  margin-top:6px}
.air-salle-haut{border-color:rgba(240,180,41,.45)}
.air-salle-haut .air-val{color:var(--gold-soft)}
.air-salle-muet{border-style:dashed}
.air-salle-muet .air-val{color:var(--text-3)}
.air-salle-muet .air-note{color:var(--alert)}
.air-cap{color:var(--text-2);font-size:14px;margin:18px 0 0;line-height:1.55}

/* Cloud ou on-premise */
.air-archi{display:grid;gap:18px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.air-opt{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.air-opt h3{margin:16px 0 10px;font-size:18px;line-height:1.25;font-weight:800}
.air-opt p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6}

/* --- Télérelève : la tournée, les chemins, l'index, le parc -------------- */
.tr-compare{display:grid;gap:16px;margin-top:8px;grid-template-columns:1fr}
@media (min-width:800px){ .tr-compare{grid-template-columns:1fr 1fr} }
.tr-col{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.tr-col-apres{border-color:rgba(47,111,235,.38);background:var(--surface-2)}
.tr-head{margin:0 0 16px;font-size:16px;font-weight:800;text-transform:uppercase;
  letter-spacing:.11em;color:var(--text-3);max-width:none}
.tr-col-apres .tr-head{color:var(--blue-lift)}
.tr-steps{list-style:none;counter-reset:tr;padding:0;margin:0;display:grid;gap:11px}
.tr-steps li{counter-increment:tr;position:relative;padding-left:32px;
  color:var(--text-2);font-size:15px;line-height:1.45}
.tr-steps li::before{content:counter(tr);position:absolute;left:0;top:0;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1.5px solid var(--line-strong);
  color:var(--text-3);font-size:12px;font-weight:800}
.tr-col-apres .tr-steps li::before{border-color:var(--blue-lift);
  color:var(--blue-lift)}

/* Les trois chemins d'acquisition */
.tr-chemins{display:grid;gap:18px;margin-top:8px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tr-chemin{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px}
.tr-chemin .pv-brique-ic{color:var(--blue-lift);
  background:rgba(124,187,255,.10);border-color:rgba(124,187,255,.22)}
.tr-chemin h3{margin:18px 0 10px;font-size:18.5px;line-height:1.25;font-weight:800}
.tr-chemin p{margin:0;color:var(--text-2);font-size:15px;line-height:1.55}
.tr-quand{margin-top:12px !important;padding-top:12px;
  border-top:1px solid var(--line);color:var(--text-3) !important;
  font-size:13.5px !important}

/* Index successifs */
.tr-releves{list-style:none;padding:0;margin:0;display:grid;gap:0}
.tr-releves li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;
  align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.tr-releves li:first-child{border-top:0;padding-top:0}
.tr-date{color:var(--text-3);font-size:13.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.tr-index{font-size:21px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tr-delta{color:var(--blue-lift);font-size:14.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.tr-delta-vide{color:var(--text-3);font-weight:400}

/* Parc de compteurs */
.tr-parc{list-style:none;padding:0;margin:0;display:grid;gap:0}
.tr-ligne{display:grid;grid-template-columns:1fr auto;gap:6px 14px;
  align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.tr-ligne:first-child{border-top:0;padding-top:0}
.tr-ligne strong{font-size:15.5px;font-weight:600}
.tr-type{color:var(--text-3);font-size:13px;grid-column:1;grid-row:2}
.tr-val{grid-column:2;grid-row:1/3;align-self:center;font-size:17px;
  font-weight:800;font-variant-numeric:tabular-nums}
.tr-ligne-muet .tr-val{color:var(--alert);font-size:14px;font-weight:600}
.tr-ligne-muet strong{color:var(--text-3)}

/* --- Suivi de consommation : la facture, la courbe, la comparaison ------- */
.en-vs{display:grid;gap:16px;margin-top:8px;grid-template-columns:1fr}
@media (min-width:800px){ .en-vs{grid-template-columns:.85fr 1.15fr} }
.en-bloc{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.en-bloc-apres{border-color:rgba(47,111,235,.38);background:var(--surface-2)}
.en-total{display:block;font-size:clamp(32px,5vw,44px);font-weight:800;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.en-sous{display:block;color:var(--text-3);font-size:13.5px;line-height:1.5;
  margin-top:12px}
.en-postes{list-style:none;padding:0;margin:0;display:grid;gap:0}
.en-postes li{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.en-postes li:first-child{border-top:0;padding-top:0}
.en-postes span{color:var(--text-2);font-size:14.5px;line-height:1.4}
.en-postes b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* Courbe de charge — la zone basse matérialise le talon. */
.en-courbe{fill:none;stroke:var(--blue-lift);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.en-talon{fill:rgba(124,187,255,.10)}

/* Avant / après */
.en-ab{display:grid;gap:14px;align-items:center;margin-top:8px;
  grid-template-columns:1fr auto 1fr}
.en-periode{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;text-align:center}
.en-periode-apres{border-color:rgba(63,203,132,.40);background:var(--surface-2)}
.en-periode .tr-head{margin-bottom:12px}
.en-fleche{color:var(--text-3);font-size:24px;line-height:1}
@media (max-width:620px){
  .en-ab{grid-template-columns:1fr}
  .en-fleche{transform:rotate(90deg);justify-self:center}
}

/* --- Remplissage de conteneurs : le parc d'abord ------------------------- */
.ct-parc,.ct-semaine{list-style:none;padding:0;margin:0;display:grid;gap:0}
.ct-parc li,.ct-semaine li{display:grid;
  grid-template-columns:minmax(96px,auto) 1fr auto;gap:14px;
  align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.ct-parc li:first-child,.ct-semaine li:first-child{border-top:0;padding-top:0}
.ct-parc strong{font-size:15.5px;font-weight:600}
.ct-jour{color:var(--text-2);font-size:14.5px}
.ct-jauge{display:block;height:10px;border-radius:5px;background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden;min-width:60px}
.ct-fill{display:block;height:100%;border-radius:5px;background:var(--blue-lift)}
.ct-val{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ct-bac-haut .ct-fill{background:var(--gold)}
.ct-bac-haut .ct-val{color:var(--gold-soft)}
.ct-bac-muet .ct-jauge{border-style:dashed;background:transparent}
.ct-bac-muet .ct-val{color:var(--alert);font-size:13.5px;font-weight:600}
.ct-bac-muet strong{color:var(--text-3)}
@media (max-width:520px){
  .ct-parc li,.ct-semaine li{grid-template-columns:1fr auto;gap:6px 12px}
  .ct-jauge{grid-column:1/-1;order:3}
}
.ct-fill-0{width:0%}.ct-fill-1{width:1%}.ct-fill-2{width:2%}.ct-fill-3{width:3%}.ct-fill-4{width:4%}.ct-fill-5{width:5%}.ct-fill-6{width:6%}.ct-fill-7{width:7%}.ct-fill-8{width:8%}.ct-fill-9{width:9%}.ct-fill-10{width:10%}.ct-fill-11{width:11%}.ct-fill-12{width:12%}.ct-fill-13{width:13%}.ct-fill-14{width:14%}.ct-fill-15{width:15%}.ct-fill-16{width:16%}.ct-fill-17{width:17%}.ct-fill-18{width:18%}.ct-fill-19{width:19%}.ct-fill-20{width:20%}.ct-fill-21{width:21%}.ct-fill-22{width:22%}.ct-fill-23{width:23%}.ct-fill-24{width:24%}.ct-fill-25{width:25%}.ct-fill-26{width:26%}.ct-fill-27{width:27%}.ct-fill-28{width:28%}.ct-fill-29{width:29%}.ct-fill-30{width:30%}.ct-fill-31{width:31%}.ct-fill-32{width:32%}.ct-fill-33{width:33%}.ct-fill-34{width:34%}.ct-fill-35{width:35%}.ct-fill-36{width:36%}.ct-fill-37{width:37%}.ct-fill-38{width:38%}.ct-fill-39{width:39%}.ct-fill-40{width:40%}.ct-fill-41{width:41%}.ct-fill-42{width:42%}.ct-fill-43{width:43%}.ct-fill-44{width:44%}.ct-fill-45{width:45%}.ct-fill-46{width:46%}.ct-fill-47{width:47%}.ct-fill-48{width:48%}.ct-fill-49{width:49%}.ct-fill-50{width:50%}.ct-fill-51{width:51%}.ct-fill-52{width:52%}.ct-fill-53{width:53%}.ct-fill-54{width:54%}.ct-fill-55{width:55%}.ct-fill-56{width:56%}.ct-fill-57{width:57%}.ct-fill-58{width:58%}.ct-fill-59{width:59%}.ct-fill-60{width:60%}.ct-fill-61{width:61%}.ct-fill-62{width:62%}.ct-fill-63{width:63%}.ct-fill-64{width:64%}.ct-fill-65{width:65%}.ct-fill-66{width:66%}.ct-fill-67{width:67%}.ct-fill-68{width:68%}.ct-fill-69{width:69%}.ct-fill-70{width:70%}.ct-fill-71{width:71%}.ct-fill-72{width:72%}.ct-fill-73{width:73%}.ct-fill-74{width:74%}.ct-fill-75{width:75%}.ct-fill-76{width:76%}.ct-fill-77{width:77%}.ct-fill-78{width:78%}.ct-fill-79{width:79%}.ct-fill-80{width:80%}.ct-fill-81{width:81%}.ct-fill-82{width:82%}.ct-fill-83{width:83%}.ct-fill-84{width:84%}.ct-fill-85{width:85%}.ct-fill-86{width:86%}.ct-fill-87{width:87%}.ct-fill-88{width:88%}.ct-fill-89{width:89%}.ct-fill-90{width:90%}.ct-fill-91{width:91%}.ct-fill-92{width:92%}.ct-fill-93{width:93%}.ct-fill-94{width:94%}.ct-fill-95{width:95%}.ct-fill-96{width:96%}.ct-fill-97{width:97%}.ct-fill-98{width:98%}.ct-fill-99{width:99%}.ct-fill-100{width:100%}

/* --- Surveillance de température : l'épisode et son seuil de projet ------ */
.tp-courbe{fill:none;stroke:var(--blue-lift);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tp-pt{fill:var(--blue-lift);stroke:var(--bg);stroke-width:2.5}
.tp-seuil{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:6 5;opacity:.9}
.tp-legende{display:flex;align-items:center;gap:10px;margin:16px 0 0;
  color:var(--text-2);font-size:13px;line-height:1.45;max-width:none}
.tp-k{width:16px;height:0;border-top:2px dashed var(--gold);flex:none}

/* --- Ouverture de porte : bande d'états successifs ----------------------- */
.ov-bande{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ov-etat{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:13px 16px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
  border-left-width:4px}
.ov-etat strong{font-size:15.5px;font-weight:700}
.ov-etat span{color:var(--text-3);font-size:13.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ov-etat-ferme{border-left-color:var(--line-strong)}
.ov-etat-ouvert{border-left-color:var(--blue-lift)}
.ov-etat-ouvert strong{color:var(--blue-lift)}
.ov-etat-long{border-left-color:var(--gold)}
.ov-etat-long strong{color:var(--gold-soft)}
@media (min-width:720px){ .ov-bande{grid-template-columns:repeat(5,1fr);gap:8px}
  .ov-etat{flex-direction:column;align-items:flex-start;gap:6px;
    border-left-width:1px;border-top-width:4px}
  .ov-etat span{white-space:normal}
  .ov-etat-ferme{border-top-color:var(--line-strong)}
  .ov-etat-ouvert{border-top-color:var(--blue-lift)}
  .ov-etat-long{border-top-color:var(--gold)} }

/* Hub solutions : la question client d'abord, l'exemple ensuite. */
.sol-ex{margin:0;color:var(--text-3);font-size:14px;line-height:1.5}
.air-salle-alerte{border-color:rgba(255,107,110,.45)}
.air-salle-alerte .air-val{color:var(--alert)}
.air-salle-attention{border-color:rgba(240,180,41,.45)}
.air-salle-attention .air-val{color:var(--gold-soft)}

/* Contact : sous-titre contextuel et suite du parcours. */
.contact-contexte{margin:0 0 22px;font-size:19px;line-height:1.5;
  color:var(--blue-lift);font-weight:700;max-width:52ch}
.form-apres{margin:14px 0 0;color:var(--text-3);font-size:13.5px;
  line-height:1.55}

/* /a-propos/ — identité du fondateur, sobre. */
.apropos-identite{margin:0 0 1em}
.apropos-identite strong{display:block;font-size:16.5px;line-height:1.3}
.apropos-identite span{display:block;color:var(--text-3);font-size:14px;
  margin-top:2px}

@media (max-width:760px){
  .pv-trajet-grid{grid-template-columns:1fr;gap:20px}
  .pv-stats{grid-template-columns:repeat(2,1fr)}
  .pv-card{padding:18px;border-radius:16px}
  .pv-brique{padding:26px 22px}
  .pv-reponse{padding:22px;font-size:17.5px}
}

/* --- Cartes capteur : matériel réel, pas icône abstraite ------------------
   La photo fabricant n'est publiée qu'une fois les droits établis ;
   l'emplacement est explicite en attendant. */
.sensor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
.sensor-card{display:grid;grid-template-columns:52px 1fr;gap:16px;
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  background:var(--surface);align-items:start}
/* Pastille de marque en l'absence de photo — sobre, sans effet « à venir ». */
.sensor-badge-brand{width:52px;height:52px;border-radius:12px;display:grid;
  place-items:center;background:linear-gradient(150deg,var(--surface-2),var(--bg-soft));
  border:1px solid var(--line);color:var(--blue-lift);font-weight:800;
  font-size:21px;line-height:1}
.sensor-card img{width:52px;height:52px;border-radius:12px;object-fit:contain;
  border:1px solid var(--line);background:var(--bg-soft)}
.sensor-body{min-width:0}
.sensor-ref{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.sensor-ref strong{font-size:16px;letter-spacing:-.01em}
.sensor-ref span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-3);font-weight:800}
.sensor-measure{margin:0 0 9px;color:var(--blue-lift);font-size:14px;font-weight:600}
.sensor-why{margin:0;color:var(--text-2);font-size:14px;line-height:1.55}
.sensor-note{margin:9px 0 0;color:var(--text-3);font-size:13px;
  border-left:2px solid var(--line-strong);padding-left:11px}
.sensor-disclaimer{margin-top:18px;color:var(--text-3);font-size:13px;
  max-width:var(--measure);font-style:italic}
@media (max-width:900px){
  .sensor-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .sensor-card{grid-template-columns:1fr;gap:14px}
  .sensor-shot,.sensor-card img{width:100%;height:150px}
}

.media{margin:32px 0 0}
.media img{border:1px solid var(--line);border-radius:var(--radius);width:100%}
.media figcaption{color:var(--text-3);font-size:13px;margin-top:12px;max-width:var(--measure)}
/* Emplacement de capture RÉELLE en attente d'asset. Volontairement identifié
   comme tel : jamais une fausse interface qui pourrait passer pour le produit. */
.media-frame{aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(150deg,var(--surface),var(--bg-soft));
  display:grid;place-content:center;gap:12px;text-align:center;padding:30px;
  position:relative;overflow:hidden}
.media-frame::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent,transparent 14px,
  rgba(255,255,255,.014) 14px,rgba(255,255,255,.014) 28px)}
.media-badge{color:var(--text-2);font-size:14px;font-weight:700;position:relative}
.media-badge::before{content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--gold);margin-right:9px;vertical-align:middle}
.media-slot{color:var(--text-3);font-size:11.5px;font-family:ui-monospace,SFMono-Regular,
  Menlo,monospace;letter-spacing:.06em;position:relative}
/* Grande capture : sort de la colonne de texte pour donner de l'ampleur. */
.media-wide{margin-inline:calc(-1 * clamp(0px,4vw,80px))}
.media-wide .media-frame{aspect-ratio:16/9}

.demo-band{background:linear-gradient(150deg,#111C27,#0C1218);border:1px solid var(--line);
  border-radius:var(--radius);padding:38px 32px;margin:52px 0}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.demo-block{border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  background:var(--surface);display:flex;flex-direction:column;gap:12px}
.demo-block h3{font-size:17px}
.demo-block p{color:var(--text-2);font-size:14.5px;margin:0;flex:1}
.demo-actions{display:flex;flex-direction:column;gap:8px}
.demo-soon{opacity:.72}
.demo-note{color:var(--text-3);font-size:13px;font-style:italic}

.home-section{padding:80px 0;border-top:1px solid var(--line)}
.section-heading{max-width:var(--measure);margin-bottom:8px}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.promise{border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  background:var(--surface);display:flex;flex-direction:column;gap:12px;
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
.promise:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.promise .tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;
  font-weight:800;color:var(--text-3)}
.promise h3{font-size:25px;letter-spacing:-.03em}
.promise p{color:var(--text-2);font-size:15px;margin:0;flex:1}
.promise .go{font-weight:700;font-size:14.5px;color:var(--blue-lift)}
.promise-monitor{border-top:3px solid var(--blue)}
.promise-protect{border-top:3px solid var(--gold)}
.promise-protect .go{color:var(--gold-soft)}
.promise-occupancy{border-top:3px solid var(--teal)}
.promise-occupancy .go{color:#5FD6C9}

.chain{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-top:36px}
.chain-node{flex:1 1 170px;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;background:var(--surface)}
.chain-node b{display:block;font-size:11px;color:var(--text-3);letter-spacing:.12em;
  font-variant-numeric:tabular-nums}
.chain-node strong{display:block;margin-top:12px;font-size:16px}
.chain-node span{display:block;color:var(--text-2);font-size:13.5px;margin-top:4px}
.chain-node.is-end{border-color:#2F5C8F;background:linear-gradient(160deg,#132234,#101821)}

.final-cta{max-width:var(--max);margin:0 auto 84px;padding:48px;
  border:1px solid #2C4462;border-radius:18px;
  background:linear-gradient(150deg,#152337,#0E141C);
  display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.final-cta h2{font-size:clamp(24px,2.6vw,33px);max-width:20ch;font-weight:800}
.final-cta p{color:var(--text-2);margin:12px 0 0;max-width:56ch}
.final-actions{display:flex;gap:10px;flex-wrap:wrap}

.breadcrumbs{max-width:var(--max);margin-inline:auto;padding:20px 24px 0;
  color:var(--text-3);font-size:12.5px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.breadcrumbs li{display:flex;gap:8px;align-items:center}
.breadcrumbs li+li::before{content:"/";color:var(--line-strong)}
.breadcrumbs a,.breadcrumbs span{padding:4px 0;display:inline-block}
.breadcrumbs a:hover{color:var(--text-2);text-decoration:underline}

.site-footer{border-top:1px solid var(--line);background:#080C11;padding:64px 24px 28px;
  margin-top:40px}
.footer-grid{max-width:var(--max);margin:auto;display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);gap:44px}
.footer-grid p{color:var(--text-2);font-size:14px;max-width:36ch}
.footer-col h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--text);margin:4px 0 16px}
.footer-col{display:flex;flex-direction:column;gap:4px}
/* padding vertical : porte la cible tactile au-delà du seuil de 24px (WCAG 2.5.8) */
.footer-col a{font-size:14px;color:var(--text-2);padding:5px 0}
.footer-col a:hover{color:var(--text);text-decoration:underline}
.footer-addr{color:var(--text-3);font-size:13.5px;font-style:normal;margin-top:14px}
.footer-bottom{max-width:var(--max);margin:44px auto 0;padding-top:22px;
  border-top:1px solid var(--line);color:var(--text-3);font-size:12.5px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom nav{display:flex;gap:20px}
.footer-bottom nav a{padding:4px 0;display:inline-block}
.footer-bottom nav a:hover{color:var(--text);text-decoration:underline}

.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;
  align-items:start;padding:8px 0 40px}
.contact-copy h2{font-size:clamp(25px,2.8vw,34px);font-weight:800}
.contact-copy p{color:var(--text-2);margin-top:14px}
.contact-direct{display:grid;gap:10px;margin-top:26px}
.contact-direct a{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;background:var(--surface)}
.contact-direct a:hover{border-color:var(--line-strong)}
.contact-direct span{display:block;color:var(--text-3);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.12em}
.contact-direct strong{font-size:16px;display:block;margin-top:3px}

.lead-form{border:1px solid var(--line);background:var(--surface);padding:30px;
  border-radius:var(--radius)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:13px;font-weight:650;margin-bottom:7px;color:var(--text-2)}
.field .req{color:var(--gold-soft)}
.lead-form input,.lead-form select,.lead-form textarea{display:block;width:100%;
  background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:13px 14px;font-size:15.5px}
.lead-form textarea{resize:vertical;min-height:120px}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
  border-color:var(--blue-lift)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden}
.form-note{font-size:13px;color:var(--text-3);margin:4px 0 18px;max-width:none}
.form-status{margin-top:16px;font-size:14.5px;border-radius:var(--radius-sm);padding:14px 16px}
.form-status[data-state=error]{border:1px solid var(--alert);color:#FFC2C4}
.form-status[data-state=ok]{border:1px solid var(--ok);color:#B6F0D2}
.form-status[hidden]{display:none}

@media (max-width:1040px){
  .desktop-nav,.header-phone{display:none}
  .menu-toggle{display:block}
  .hero{grid-template-columns:1fr;gap:44px;padding-top:52px}
  .feature-grid.cols-3,.feature-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .promise-grid,.demo-grid{grid-template-columns:1fr}
  .contact-layout,.ba-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.page-content,.hero,.breadcrumbs{padding-inline:18px}
  .nav-shell{padding:0 18px;min-height:64px;gap:12px}
  .brand{font-size:19px}
  /* Le CTA header reste visible sur mobile — régression V1 corrigée. */
  .header-actions .btn{min-height:40px;padding:0 13px;font-size:13.5px}
  .hero{padding:38px 18px 46px;gap:34px}
  .hero h1{font-size:32px;max-width:none}
  .hero-lead{font-size:17px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .content-section,.home-section{padding:48px 0}
  .section-emphasis{padding:34px 20px}
  .feature-grid.cols-2,.feature-grid.cols-3,.feature-grid.cols-4,
  .process,.list-check.two,.list-plain.two,.link-grid{grid-template-columns:1fr}
  .final-cta{padding:30px 22px;margin-inline:18px;margin-bottom:56px}
  .final-actions,.final-actions .btn{width:100%}
  .form-row{grid-template-columns:1fr}
  .lead-form{padding:22px}
  .footer-grid{grid-template-columns:1fr}
  .demo-band{padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}
@media print{.site-header,.site-footer,.final-cta,.demo-band{display:none}}

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;
  font-display:swap;src:url('/assets/fonts/instrument-400.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;
  font-display:swap;src:url('/assets/fonts/playfair-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('/assets/fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;
  font-display:swap;src:url('/assets/fonts/plexmono-500.woff2') format('woff2')}

.v2{
  --v-bg:#FAF7F0;          /* fond clair chaud */
  --v-bg-2:#F2EDE2;        /* sections alternées */
  --v-card:#FFFDF9;        /* surfaces claires */
  --v-ink:#0B1017;         /* bleu nuit, fonds sombres */
  --v-ink-2:#101A26;       /* bleu nuit légèrement relevé */
  --v-text:#14202E;        /* texte principal sur clair */
  --v-text-2:#42505F;      /* texte secondaire — assombri vs maquette
                              (#4C5A69) pour tenir 7:1 sur #FAF7F0 */
  --v-text-3:#5C6875;      /* micro-labels sur clair — 4.5:1 minimum */
  --v-cream:#FDFBF6;       /* texte sur fond sombre */
  --v-cream-2:rgba(253,251,246,.82);
  --v-cream-3:rgba(253,251,246,.62);
  --v-gold:#D9A32B;        /* or Duck-E */
  --v-gold-soft:#E8BC55;
  --v-gold-ink:#7A5D14;    /* or lisible sur fond clair */
  --v-blue:#0B4FA8;        /* bleu Monitor */
  --v-blue-lift:#7FC3EE;   /* bleu Monitor sur fond sombre */
  --v-green:#3F6E5E;       /* vert Occupancy */
  --v-green-deep:#2E5346;
  --v-green-lift:#9BC7A8;
  --v-line:rgba(20,32,46,.12);
  --v-line-soft:rgba(20,32,46,.07);
  --v-line-dark:rgba(250,247,240,.14);
  --v-max:1440px;
  --v-pad:clamp(20px,3.4vw,44px);
  --v-r:20px;              /* rayon des cartes */
  --v-r-s:13px;
  --v-ease:cubic-bezier(.2,.7,.3,1);
  --v-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --v-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --v-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}

.v2{background:var(--v-bg);color:var(--v-text);font-family:var(--v-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.v2 ::selection{background:var(--v-gold);color:var(--v-ink)}
.v2 :focus-visible{outline:2px solid var(--v-gold);outline-offset:3px;
  border-radius:6px}
.v2 a{color:var(--v-blue);text-decoration:none}
.v2 a:hover{color:#093F86}
.v2 img{max-width:100%}
/* Le style par défaut du navigateur donne `margin:1em 40px` à <figure> : sans
   cette remise à zéro, le média du hero perdait 80 px de large sur mobile. */
.v2 figure,.v2 figcaption{margin:0}
.v2 .v-wrap{max-width:var(--v-max);margin:0 auto}
.v2 .v-sec{padding:clamp(64px,7.4vw,124px) var(--v-pad)}
/* Variante compacte : mêmes marges latérales, environ 18 % de hauteur
   en moins. Pour la section des trois étapes, dont les blocs sont
   courts et n'appellent pas autant d'air. */
.v2 .v-sec-tight{padding:clamp(42px,4.8vw,80px) var(--v-pad)}
.v2 .v-sec-2{background:var(--v-bg-2)}
.v2 .v-sec-dark{background:var(--v-ink);color:var(--v-cream);
  position:relative;overflow:hidden}
/* Titre de section + phrase d'accroche, alignés en pied. */
.v2 .v-head{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:22px}
.v2 .v-h2{margin:0;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(28px,3.4vw,48px);line-height:1.12;letter-spacing:-.018em;
  color:var(--v-text);max-width:19ch;text-wrap:balance}
.v2 .v-sec-dark .v-h2{color:var(--v-cream)}
.v2 .v-lede{margin:0;max-width:32ch;font-size:16px;line-height:1.62;
  color:var(--v-text-2)}
.v2 .v-sec-dark .v-lede{color:var(--v-cream-2)}
.v2 .v-kicker{font-family:var(--v-mono);font-weight:500;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--v-text-3)}
.v2 .v-sec-dark .v-kicker{color:var(--v-cream-3)}
.v2 .v-mono{font-family:var(--v-mono)}
.v2 .v-illus{font-family:var(--v-mono);font-size:11px;color:var(--v-text-3)}
.v2 .v-sec-dark .v-illus{color:var(--v-cream-3)}
/* Halos décoratifs des sections sombres. */
.v2 .v-halo{position:absolute;border-radius:50%;pointer-events:none}
.v2 .v-halo-blue{background:radial-gradient(circle,rgba(11,79,168,.30),
  rgba(11,79,168,0) 62%)}
.v2 .v-halo-gold{background:radial-gradient(circle,rgba(217,163,43,.15),
  rgba(217,163,43,0) 64%)}
.v2 .v-halo-a{top:-280px;right:-140px;width:860px;height:860px}
.v2 .v-halo-b{bottom:-340px;left:-200px;width:760px;height:760px}
.v2 .v-halo-c{bottom:-420px;left:50%;transform:translateX(-50%);
  width:1050px;height:820px}

.v2 .v-btn{display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  padding:16px 28px;border-radius:999px;border:1px solid transparent;
  transition:background .25s var(--v-ease),transform .25s var(--v-ease),
             color .25s var(--v-ease)}
.v2 .v-btn:hover{transform:translateY(-2px)}
.v2 .v-btn-gold{background:var(--v-gold);color:var(--v-ink);
  box-shadow:0 14px 34px -18px rgba(217,163,43,.95)}
.v2 .v-btn-gold:hover{background:var(--v-gold-soft);color:var(--v-ink)}
.v2 .v-btn-ink{background:var(--v-ink-2);color:var(--v-bg)}
.v2 .v-btn-ink:hover{background:var(--v-blue);color:var(--v-bg)}
.v2 .v-btn-ghost{color:var(--v-cream);border-color:var(--v-line-dark)}
.v2 .v-btn-ghost:hover{background:rgba(250,247,240,.09);color:var(--v-cream)}
.v2 .v-btn-line{color:var(--v-text);border-color:var(--v-line)}
.v2 .v-btn-line:hover{background:rgba(20,32,46,.05);color:var(--v-text)}
.v2 .v-btn-blue{background:var(--v-blue-lift);color:var(--v-ink)}
.v2 .v-btn-blue:hover{background:#A8D8F5;color:var(--v-ink)}
.v2 .v-btn-green{background:var(--v-green);color:var(--v-cream)}
.v2 .v-btn-green:hover{background:var(--v-green-deep);color:var(--v-cream)}
.v2 .v-btn-s{font-size:15px;padding:13px 22px}
.v2 .v-arrow{font-size:15px;line-height:1}

.v2 .vh{position:sticky;top:0;z-index:60;background:rgba(250,247,240,.93);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--v-line-soft)}
.v2 .vh-bar{max-width:var(--v-max);margin:0 auto;
  padding:0 clamp(18px,3.4vw,44px);min-height:70px;display:flex;
  align-items:center;gap:clamp(10px,2vw,26px)}
.v2 .vh-brand{display:flex;align-items:center;gap:11px;flex:none;
  color:var(--v-text)}
.v2 .vh-brand:hover{color:var(--v-text)}
.v2 .vh-brand img{height:38px;width:38px;border-radius:11px;display:block}
.v2 .vh-name{display:flex;flex-direction:column;line-height:1.05}
.v2 .vh-name b{font-family:var(--v-serif);font-weight:500;font-size:19px;
  letter-spacing:-.01em}
.v2 .vh-name span{font-family:var(--v-mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--v-text-3)}
.v2 .vh-sep{width:1px;height:26px;background:var(--v-line);margin-left:6px}
.v2 .vh-nav{display:flex;align-items:center;gap:1px}
.v2 .vh-nav>a,.v2 .vh-group>button{font-family:var(--v-sans);font-weight:500;
  font-size:14.5px;letter-spacing:-.01em;color:var(--v-text);background:none;
  border:0;padding:9px 13px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.v2 .vh-nav>a:hover,.v2 .vh-group>button:hover,
.v2 .vh-group>button[aria-expanded=true]{background:rgba(20,32,46,.05);
  color:var(--v-text)}
.v2 .vh-group{position:static}
.v2 .vh-chev{font-size:9px;color:var(--v-text-3)}
.v2 .vh-group>button[aria-expanded=true] .vh-chev{transform:rotate(180deg)}
.v2 .vh-fill{flex:1}
.v2 .vh-tel{display:flex;align-items:center;gap:7px;font-family:var(--v-mono);
  font-size:13.5px;color:var(--v-text-2);white-space:nowrap}
.v2 .vh-tel:hover{color:var(--v-text)}
.v2 .vh-dot{width:5px;height:5px;border-radius:50%;background:var(--v-gold)}
.v2 .vh-cta{font-size:14.5px;padding:11px 20px}
/* --- Méga-menus -----------------------------------------------------------
   Le panneau est ancré au header, pas au bouton : il occupe toute la largeur
   utile et se répartit en colonnes, ce qui évite la liste verticale
   interminable qui sortait du viewport dans l'ancien système. Le `max-height`
   reste un filet de sécurité pour les écrans desktop courts. */
.v2 .vh-mega{position:absolute;left:0;right:0;top:100%;
  padding:0 clamp(18px,3.4vw,44px) 20px;display:none}
.v2 .vh-group>button[aria-expanded=true]+.vh-mega{display:block}
.v2 .vh-panel{margin:0 auto;background:var(--v-card);
  border:1px solid var(--v-line-soft);border-radius:18px;
  box-shadow:0 30px 70px -34px rgba(11,16,23,.5);padding:24px 26px;
  max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
.v2 .vh-panel-sol{max-width:1180px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px 30px}
.v2 .vh-panel-prod{max-width:900px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;padding:22px}
.v2 .vh-panel-sect{max-width:720px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px;padding:18px}
.v2 .vh-col-t{font-family:var(--v-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v-text-3);
  margin-bottom:10px}
.v2 .vh-link{display:block;padding:7px 9px;margin:0 -9px;border-radius:9px;
  color:var(--v-text);font-weight:500;font-size:14.5px}
.v2 .vh-link:hover{background:rgba(11,79,168,.07);color:var(--v-blue)}
.v2 .vh-link-g:hover{background:rgba(63,110,94,.09);color:var(--v-green-deep)}
.v2 .vh-link-o:hover{background:rgba(217,163,43,.14);color:var(--v-gold-ink)}
.v2 .vh-link-n:hover{background:rgba(20,32,46,.06);color:var(--v-text)}
.v2 .vh-aside{background:var(--v-ink-2);border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  min-width:0}
.v2 .vh-aside p{margin:0;font-size:14.5px;line-height:1.5;
  color:var(--v-cream-2)}
.v2 .vh-aside a{font-weight:600;font-size:13.5px;color:var(--v-ink);
  background:var(--v-gold);padding:10px 16px;border-radius:999px;
  text-align:center}
.v2 .vh-aside a:hover{background:var(--v-gold-soft);color:var(--v-ink)}
.v2 .vh-prod{display:block;padding:16px;border-radius:var(--v-r-s);
  color:var(--v-text)}
.v2 .vh-prod:hover{color:var(--v-text)}
.v2 .vh-prod b{display:block;font-weight:600;font-size:15.5px}
.v2 .vh-prod span{display:block;font-size:13px;line-height:1.45;
  color:var(--v-text-2);margin-top:4px}
.v2 .vh-prod i{display:block;width:24px;height:3px;border-radius:2px;
  margin-bottom:12px}
.v2 .vh-prod-m{background:rgba(11,79,168,.055)}
.v2 .vh-prod-m:hover{background:rgba(11,79,168,.12)}
.v2 .vh-prod-m i{background:var(--v-blue)}
.v2 .vh-prod-p{background:rgba(217,163,43,.10)}
.v2 .vh-prod-p:hover{background:rgba(217,163,43,.2)}
.v2 .vh-prod-p i{background:var(--v-gold)}
.v2 .vh-prod-o{background:rgba(63,110,94,.09)}
.v2 .vh-prod-o:hover{background:rgba(63,110,94,.17)}
.v2 .vh-prod-o i{background:var(--v-green)}
.v2 .vh-edge{grid-column:1/-1;border-top:1px solid var(--v-line-soft);
  padding-top:12px;display:flex;flex-wrap:wrap;gap:8px 18px;
  align-items:baseline;font-size:13px;color:var(--v-text-2)}
.v2 .vh-sect{padding:12px 13px;border-radius:10px;color:var(--v-text);
  font-weight:500;font-size:14.5px}
.v2 .vh-sect:hover{background:rgba(20,32,46,.05);color:var(--v-text)}
/* --- Bascule mobile ------------------------------------------------------ */
.v2 .vh-mob-tel,.v2 .vh-burger{display:none}
.v2 .vh-burger{width:44px;height:44px;flex-direction:column;
  justify-content:center;align-items:center;gap:5px;background:var(--v-ink-2);
  border:0;border-radius:12px;cursor:pointer;flex:none}
.v2 .vh-burger span:not(.sr-only){display:block;width:16px;height:1.5px;
  background:var(--v-bg)}
.v2 .vh-mob-tel{width:44px;height:44px;align-items:center;
  justify-content:center;border-radius:12px;border:1px solid var(--v-line);
  color:var(--v-text);flex:none}
.v2 .vm{position:fixed;inset:70px 0 0 0;z-index:55;background:var(--v-bg);
  overflow-y:auto;padding:26px clamp(20px,6vw,32px) 44px;display:none}
.v2 .vm.open{display:block}
.v2 .vm-h{font-family:var(--v-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v-text-3);
  margin:28px 0 10px}
.v2 .vm-h:first-child{margin-top:0}
.v2 .vm-prod{display:block;padding:16px 0;
  border-bottom:1px solid var(--v-line-soft);color:var(--v-text)}
.v2 .vm-prod b{display:flex;align-items:center;justify-content:space-between;
  font-weight:500;font-size:21px}
.v2 .vm-prod i{width:8px;height:8px;border-radius:50%;flex:none}
.v2 .vm-prod span{display:block;font-size:13.5px;color:var(--v-text-2);
  margin-top:4px}
.v2 .vm-chips{display:flex;flex-wrap:wrap;gap:9px}
.v2 .vm-chips a{padding:11px 16px;border-radius:999px;
  background:rgba(20,32,46,.06);font-weight:500;font-size:14.5px;
  color:var(--v-text)}
.v2 .vm-cta{display:block;margin-top:30px;text-align:center;padding:18px;
  border-radius:999px;background:var(--v-ink-2);color:var(--v-bg);
  font-weight:600;font-size:17px}
.v2 .vm-tel{display:block;margin-top:14px;text-align:center;
  font-family:var(--v-mono);font-size:15px;color:var(--v-text-2)}

.v2 .vhero{position:relative;background:var(--v-ink);color:var(--v-cream);
  overflow:hidden}
.v2 .vhero-in{position:relative;max-width:var(--v-max);margin:0 auto;
  padding:clamp(48px,5.4vw,84px) var(--v-pad) clamp(48px,5vw,80px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(36px,4.4vw,72px);align-items:center}
.v2 .vhero-txt{max-width:580px;min-width:0}
.v2 .vhero-eyebrow{display:flex;align-items:center;gap:10px;
  font-family:var(--v-mono);font-weight:500;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#E0B34A;margin-bottom:clamp(18px,2.4vw,28px)}
.v2 .vhero-eyebrow i{width:22px;height:1px;background:rgba(224,179,74,.5)}
.v2 .vhero h1{margin:0;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(33px,3.9vw,54px);line-height:1.08;letter-spacing:-.018em;
  color:var(--v-cream);max-width:15ch}
.v2 .vhero h1 span{display:block;color:#C9D3DE;margin-top:.18em}
.v2 .vhero-lede{margin:clamp(20px,2.4vw,28px) 0 0;max-width:48ch;
  font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:var(--v-cream-2);
  text-wrap:pretty}
.v2 .vhero-cta{display:flex;flex-wrap:wrap;gap:11px;
  margin-top:clamp(24px,3vw,34px)}
.v2 .vhero-trust{display:flex;flex-wrap:wrap;gap:7px 22px;
  margin-top:clamp(28px,3.4vw,42px);font-size:13px;color:var(--v-cream-3);
  list-style:none;padding:0}
.v2 .vhero-trust li+li::before{content:"· ";color:rgba(250,247,240,.3)}
/* --- Média du hero ------------------------------------------------------- */
.v2 .vhero-media{position:relative;border-radius:24px;overflow:hidden;
  min-width:0;aspect-ratio:4/3;max-height:540px;
  box-shadow:0 50px 100px -46px rgba(0,0,0,.9)}
.v2 .vhero-media img{width:100%;height:100%;object-fit:cover;display:block}
.v2 .vhero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(11,16,23,.16),rgba(11,16,23,.55))}
/* Pastilles de mesure : illustratives, jamais présentées comme des données
   client. Le repère « Valeurs illustratives » est dans le même cadre. */
/* Ancrage des pastilles sur les éléments réels de l'image.
   Repères mesurés sur le fichier source (1122x841, cadrage 4/3 sans recadrage
   supplémentaire) : le hall éclairé occupe x 0-12 % / y 20-95 %, la porte
   sectionnelle x 16-44 % / y 26-93 %, la cuve extérieure x 61-75 % / y 45-92 %.
   `translateY(-50%)` place le CENTRE de la pastille — donc le point — sur la
   coordonnée demandée, indépendamment de la hauteur de l'étiquette.
   Les trois hauteurs sont espacées pour qu'aucune étiquette n'en recouvre une
   autre, à toutes les largeurs. */
.v2 .vpin{position:absolute;display:flex;align-items:center;
  pointer-events:none;max-width:64%;transform:translateY(-50%)}
.v2 .vpin-a{left:5%;top:35%}                       /* hall éclairé */
/* Cuve : l'étiquette est à DROITE du point, donc dans la zone de la cuve.
   Posée à gauche, elle recouvrait la porte sectionnelle et semblait s'y
   rattacher. `left:66.6%` place le centre du point au même endroit qu'avant
   (67,3 % du cadre), le rappel est raccourci pour que l'étiquette tienne
   entre la cuve et le bord droit, et `max-width` interdit toute sortie de
   cadre si le libellé venait à s'allonger. */
.v2 .vpin-b{left:66.6%;top:56%;max-width:34%}      /* cuve */
.v2 .vpin-b .vpin-line{width:clamp(12px,1.6vw,26px)}
.v2 .vpin-c{left:28%;top:85%}                      /* porte sectionnelle */
.v2 .vpin-dot{position:relative;width:9px;height:9px;border-radius:50%;
  flex:none}
.v2 .vpin-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid currentColor;animation:vRing 3.4s ease-out infinite}
.v2 .vpin-a .vpin-dot{background:var(--v-blue-lift);color:rgba(127,195,238,.6);
  box-shadow:0 0 0 4px rgba(127,195,238,.18)}
.v2 .vpin-b .vpin-dot{background:#E0B34A;color:rgba(224,179,74,.6);
  box-shadow:0 0 0 4px rgba(224,179,74,.18)}
.v2 .vpin-c .vpin-dot{background:#8FD3B4;color:rgba(143,211,180,.55);
  box-shadow:0 0 0 4px rgba(143,211,180,.18)}
.v2 .vpin-line{width:clamp(18px,3.4vw,52px);height:1px;flex:none;
  background:linear-gradient(90deg,rgba(250,247,240,.7),rgba(250,247,240,.15))}
/* Le dégradé part du point (opaque) vers l'étiquette (estompé) : sens 90deg
   maintenant que le rappel va de la cuve vers la droite. */
.v2 .vpin-b .vpin-line{background:linear-gradient(90deg,
  rgba(224,179,74,.75),rgba(224,179,74,.2))}
.v2 .vpin-card{background:rgba(11,16,23,.66);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(250,247,240,.16);border-radius:var(--v-r-s);
  padding:9px 13px;min-width:0}
.v2 .vpin-light{background:rgba(250,247,240,.94);border-color:transparent}
.v2 .vpin-card b{display:block;font-family:var(--v-mono);font-weight:500;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-cream-3)}
.v2 .vpin-card em{display:block;font-family:var(--v-serif);font-style:normal;
  font-size:clamp(18px,1.6vw,24px);color:var(--v-cream);margin-top:2px}
.v2 .vpin-light b{color:var(--v-text-3)}
.v2 .vpin-light em{font-family:var(--v-sans);font-weight:600;font-size:15px;
  color:var(--v-text)}
.v2 .vhero-note{position:absolute;right:12px;bottom:11px;
  font-family:var(--v-mono);font-size:10px;color:rgba(250,247,240,.6);
  background:rgba(11,16,23,.45);padding:4px 8px;border-radius:6px;
  pointer-events:none}
@keyframes vRing{0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
@keyframes vFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.v2 .vpin-float{animation:vFloat 9s ease-in-out infinite}
.v2 .vpin-b .vpin-float{animation-duration:10.4s;animation-delay:.6s}
.v2 .vpin-c .vpin-float{animation-duration:11.6s;animation-delay:.3s}

.v2 .vpb{display:flex;flex-wrap:wrap;gap:clamp(14px,1.4vw,20px);
  margin-top:clamp(34px,4vw,58px)}
.v2 .vpb-card{position:relative;min-width:0;border-radius:var(--v-r);
  overflow:hidden;padding:28px;display:flex;flex-direction:column;
  justify-content:space-between;gap:22px;color:var(--v-cream);
  background:var(--v-ink);border:1px solid transparent;
  transition:transform .45s var(--v-ease),border-color .45s var(--v-ease)}
.v2 a.vpb-card:hover{transform:translateY(-5px);color:var(--v-cream);
  border-color:rgba(250,247,240,.22)}
/* Texture de fond : une trame diagonale discrète, pas une fausse photo. */
.v2 .vpb-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px)}
/* Carte porteuse d'une image. L'image est en fond, un voile la couvre pour que
   le texte reste lisible quel que soit le cadrage, et le contenu passe
   au-dessus des deux. La trame diagonale n'a plus lieu d'être ici. */
.v2 .vpb-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0}
/* CONTRASTE — le voile était calé pour un texte en pied de carte, alors
   que le micro-libellé et la question vivent en HAUT. Mesuré sur les
   images réellement servies, le texte y tombait entre 1,2:1 et 3,7:1,
   très en dessous du minimum AA. Le voile couvre maintenant toute la
   carte ; il reste plus dense en pied, où se lisent les valeurs. */
.v2 .vpb-media::before{z-index:1;background:linear-gradient(to top,
  rgba(11,16,23,.94) 6%,rgba(11,16,23,.62) 50%,rgba(11,16,23,.68))}
.v2 .vpb-media>div{position:relative;z-index:2}
/* Les micro-libellés sont en or, en vert ou en bleu clair : sur une zone
   de photo lumineuse, aucun voile d'ensemble raisonnable ne les amène à
   4,5:1 — il faudrait noircir l'image à 80 %. Une plaque discrète sous
   ces quelques mots suffit, et ne touche pas au reste de la
   photographie. Le retrait de marge garde l'alignement d'origine. */
.v2 .vpb-media .vpb-t,.v2 .vsect-media .vsect-k{display:inline-block;
  background:rgba(11,16,23,.4);padding:3px 8px;margin-left:-8px;
  border-radius:5px}
.v2 .vpb-photo{object-position:center}
/* Hauteurs calées sur le contenu réel. Tant qu'aucune photographie n'occupe
   ces cartes, une grande surface vide se lit comme une image qui n'a pas
   chargé. Elles retrouveront de l'ampleur le jour où elles porteront une
   image de fond. */
.v2 .vpb-lg{flex:1 1 540px;min-height:230px}
.v2 .vpb-md{flex:1 1 320px;min-height:230px}
.v2 .vpb-sm{flex:1 1 300px;min-height:220px}
/* Une carte illustrée porte plus de hauteur sans paraître vide — c'est la
   règle posée pour cette section : hauteur réduite tant qu'il n'y a pas
   d'image, ampleur rendue dès qu'il y en a une. On reste mesuré (300 px) tant
   que sa voisine de rangée n'est pas illustrée à son tour, sinon c'est elle
   qui reprendrait de la surface vide. Déclaré après les tailles ci-dessus
   pour l'emporter à spécificité égale. */
.v2 .vpb-media{min-height:300px}
.v2 .vpb-t{position:relative;font-family:var(--v-mono);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.v2 .vpb-q{position:relative;margin:8px 0 0;font-family:var(--v-serif);
  font-size:clamp(21px,1.9vw,28px);line-height:1.24;color:var(--v-cream);
  max-width:18ch}
.v2 .vpb-foot{position:relative;display:flex;flex-wrap:wrap;
  align-items:flex-end;justify-content:space-between;gap:14px}
.v2 .vpb-val{font-family:var(--v-serif);font-size:26px;line-height:1.1}
.v2 .vpb-mono{font-family:var(--v-mono);font-size:12.5px;
  color:var(--v-cream-3)}
.v2 .vpb-tag{display:inline-flex;align-items:center;gap:7px;
  background:rgba(250,247,240,.12);border-radius:999px;padding:6px 12px;
  font-weight:500;font-size:12.5px;color:var(--v-cream)}
.v2 .vpb-tag i{width:6px;height:6px;border-radius:50%;background:#8FD3B4;
  flex:none}
/* Variante « quelque chose s'est produit ». L'ambre est la couleur d'attention
   du système, jamais le rouge : la page décrit une information à interpréter,
   pas une alarme. */
.v2 .vpb-tag-alerte{background:rgba(224,179,74,.18)}
.v2 .vpb-tag-alerte i{background:#E0B34A}
.v2 .vpb-bar{display:flex;align-items:center;gap:12px}
.v2 .vpb-bar span{flex:1;height:4px;border-radius:2px;
  background:rgba(250,247,240,.2);overflow:hidden}
.v2 .vpb-bar span i{display:block;height:100%;background:#E0B34A}
.v2 .vpb-blue{background:var(--v-blue)}
.v2 .vpb-blue .vpb-t{color:rgba(253,251,246,.8)}
.v2 .vpb-gold .vpb-t{color:#E0B34A}
.v2 .vpb-lift .vpb-t{color:var(--v-blue-lift)}
.v2 .vpb-green .vpb-t{color:var(--v-green-lift)}
.v2 .vpb-val-blue{color:var(--v-blue-lift)}
.v2 .vpb-val-gold{color:#E0B34A}
/* Mini-histogramme d'énergie — valeurs illustratives, aucune donnée client. */
.v2 .vbars{display:flex;align-items:flex-end;gap:5px;height:56px;
  margin-top:20px}
.v2 .vbars i{flex:1;background:rgba(253,251,246,.32);border-radius:3px 3px 0 0}
.v2 .vbars i.hi{background:#E0B34A}
.v2 .vb38{height:38%}.v2 .vb58{height:58%}.v2 .vb86{height:86%}
.v2 .vb100{height:100%}.v2 .vb62{height:62%}.v2 .vb44{height:44%}
.v2 .vb29{height:29%}
.v2 .vw64{width:64%}
/* Bandeau des neuf besoins : maillage réel vers les landings. */
.v2 .vneeds{margin-top:clamp(44px,4.6vw,72px);border-top:1px solid var(--v-line);
  padding-top:clamp(26px,2.8vw,38px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(22px,2.6vw,48px)}
.v2 .vneeds-txt p{margin:12px 0 0;max-width:28ch;font-size:16px;line-height:1.6;
  color:var(--v-text-2)}
.v2 .vneeds-list{grid-column:span 2;min-width:0;display:flex;flex-wrap:wrap;
  gap:9px 10px;align-content:flex-start}
.v2 .vneed{display:inline-flex;align-items:baseline;gap:9px;padding:11px 18px;
  border-radius:999px;background:var(--v-bg-2);color:var(--v-text);
  font-weight:500;font-size:clamp(15px,1.2vw,17px);letter-spacing:-.012em;
  transition:background .25s var(--v-ease),color .25s var(--v-ease),
             transform .25s var(--v-ease)}
.v2 .vneed:hover{background:var(--v-ink-2);color:var(--v-cream);
  transform:translateY(-2px)}
.v2 .vneed span{font-family:var(--v-mono);font-size:12px;opacity:.62}

.v2 .vun{display:flex;flex-wrap:wrap;gap:clamp(14px,1.4vw,20px);
  margin-top:clamp(34px,4vw,58px)}
.v2 .vun-card{min-width:0;border-radius:22px;display:flex;flex-direction:column;
  min-height:360px;position:relative;overflow:hidden;
  padding:clamp(22px,2vw,28px);
  transition:transform .45s var(--v-ease)}
.v2 .vun-card:hover{transform:translateY(-6px)}
.v2 .vun-m{flex:1 1 430px;background:var(--v-ink);color:var(--v-cream)}
.v2 .vun-p{flex:1 1 300px;background:var(--v-card);
  box-shadow:0 1px 2px rgba(20,32,46,.06)}
.v2 .vun-o{flex:1 1 300px;background:#EDF1EC}
.v2 .vun-k{font-family:var(--v-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase}
.v2 .vun-m .vun-k{color:var(--v-blue-lift)}
.v2 .vun-p .vun-k{color:var(--v-gold-ink)}
.v2 .vun-o .vun-k{color:var(--v-green-deep)}
.v2 .vun-card h3{margin:10px 0 0;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(26px,2.3vw,34px);letter-spacing:-.015em;color:var(--v-text)}
.v2 .vun-m h3{color:var(--v-cream)}
.v2 .vun-sub{margin:6px 0 0;font-weight:500;font-size:15px;
  color:var(--v-green-deep)}
.v2 .vun-card>p{margin:10px 0 0;font-size:16.5px;line-height:1.6;
  color:var(--v-text-2);max-width:30ch}
.v2 .vun-m>p{color:var(--v-cream-2)}
.v2 .vun-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.v2 .vun-chips span{font-size:12.5px;color:var(--v-cream-2);
  border:1px solid rgba(250,247,240,.22);border-radius:999px;padding:6px 12px}
.v2 .vun-rows{margin-top:14px;display:flex;flex-direction:column}
.v2 .vun-rows div{display:flex;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--v-line-soft);font-size:15px;
  color:var(--v-text)}
.v2 .vun-rows div:last-child{border-bottom:0}
.v2 .vun-rows em{font-style:normal;font-family:var(--v-mono);font-size:12.5px;
  color:var(--v-gold-ink)}
.v2 .vun-graph{margin-top:16px;display:flex;align-items:flex-end;gap:6px;
  height:72px}
.v2 .vun-graph i{flex:1;background:rgba(63,110,94,.3);border-radius:4px 4px 0 0}
.v2 .vun-graph i.hi{background:var(--v-green)}
.v2 .vun-scale{display:flex;justify-content:space-between;
  font-family:var(--v-mono);font-size:11px;color:var(--v-text-3);margin-top:6px}
.v2 .vun-fill{flex:1}
.v2 .vun-card .v-btn{align-self:flex-start;margin-top:16px}

.v2 .vter{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(22px,2.6vw,44px);align-items:start;margin-top:clamp(34px,4vw,58px)}
.v2 .vter-flow{border-radius:var(--v-r);background:rgba(250,247,240,.05);
  border:1px solid var(--v-line-dark);padding:22px;display:flex;
  flex-direction:column;gap:2px;min-width:0}
.v2 .vter-step{display:flex;gap:16px;padding:14px 0;min-width:0}
.v2 .vter-step i{width:26px;flex:none;font-family:var(--v-serif);
  font-style:normal;font-size:20px;color:var(--v-gold);line-height:1.3}
.v2 .vter-step b{display:block;font-weight:600;font-size:15.5px;
  color:var(--v-cream)}
.v2 .vter-step span{display:block;font-size:14.5px;line-height:1.55;
  color:var(--v-cream-2);margin-top:4px}
.v2 .vter-step+.vter-step{border-top:1px solid rgba(250,247,240,.09)}
/* Représentation conceptuelle de la supervision. Elle est explicitement
   étiquetée : ce n'est pas une capture de Duck-E Monitor, et le composant est
   remplaçable par une vraie capture sans toucher au reste de la page. */
.v2 .vsup{border-radius:var(--v-r);background:rgba(250,247,240,.05);
  border:1px solid var(--v-line-dark);padding:20px 22px;min-width:0}
.v2 .vsup-h{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(250,247,240,.1);
  flex-wrap:wrap}
.v2 .vsup-h b{display:flex;align-items:center;gap:9px;font-weight:600;
  font-size:15px;color:var(--v-cream)}
.v2 .vsup-h b i{width:7px;height:7px;border-radius:50%;
  background:var(--v-blue-lift);flex:none}
.v2 .vsup-h span{font-family:var(--v-mono);font-size:10.5px;
  color:var(--v-cream-3);border:1px solid rgba(250,247,240,.2);
  border-radius:999px;padding:4px 9px}
.v2 .vsup-row{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 0;border-bottom:1px solid rgba(250,247,240,.07);
  min-width:0}
.v2 .vsup-row:last-child{border-bottom:0;padding-bottom:4px}
.v2 .vsup-row b{display:block;font-weight:500;font-size:15px;
  color:var(--v-cream)}
.v2 .vsup-row small{display:block;font-family:var(--v-mono);font-size:12px;
  color:var(--v-cream-3);margin-top:3px}
.v2 .vsup-v{font-family:var(--v-serif);font-size:22px;flex:none}
.v2 .vsup-s{font-weight:500;font-size:14px;flex:none}
.v2 .vsup-blue{color:var(--v-blue-lift)}
.v2 .vsup-gold{color:#E0B34A}
.v2 .vsup-green{color:#8FD3B4}
.v2 .vsup-neutral{color:var(--v-cream-2)}
.v2 .vsup-foot{display:flex;align-items:center;gap:9px;margin-top:14px}
.v2 .vsup-foot i{width:6px;height:6px;border-radius:50%;background:var(--v-gold);
  flex:none}

.v2 .vsect{display:flex;flex-wrap:wrap;gap:clamp(14px,1.4vw,20px);
  margin-top:clamp(34px,4vw,58px)}
/* Six grands rectangles sombres et quasi identiques se lisaient comme des
   emplacements d'images vides. Sans inventer de photographie : hauteur réduite
   au contenu, et un motif propre à chaque secteur — bandes de parcelles,
   trame urbaine, rythme de façade, hachures d'atelier, grille de froid,
   cadence de passage. Le motif est en `::after`, le dégradé de couleur en
   `::before` ; ajouter plus tard une vraie image se fera en posant un
   `background-image` sur la carte, sans toucher à cette structure. */
.v2 .vsect-c{position:relative;min-width:0;border-radius:var(--v-r);
  overflow:hidden;padding:24px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:7px;min-height:196px;color:var(--v-cream);
  background:var(--v-ink);border:1px solid transparent;
  transition:transform .45s var(--v-ease),border-color .45s var(--v-ease)}
.v2 .vsect-c:hover{transform:translateY(-5px);color:var(--v-cream);
  border-color:rgba(250,247,240,.22)}
.v2 .vsect-c::before,.v2 .vsect-c::after{content:"";position:absolute;
  inset:0;pointer-events:none}
/* Le motif s'efface vers le bas pour laisser le texte parfaitement lisible. */
.v2 .vsect-c::after{opacity:.5;
  -webkit-mask-image:linear-gradient(to top,transparent 30%,#000 78%);
  mask-image:linear-gradient(to top,transparent 30%,#000 78%)}
/* Carte de secteur portant une image. Le motif cède la place à la photo, le
   dégradé de couleur devient un simple voile de lisibilité, et le texte passe
   au-dessus des deux. Les cartes sans image gardent leur motif : les deux
   traitements cohabitent le temps que la série soit complète. */
.v2 .vsect-media::after{display:none}
.v2 .vsect-media::before{z-index:1;background:linear-gradient(to top,
  rgba(11,16,23,.92) 6%,rgba(11,16,23,.58) 50%,rgba(11,16,23,.64))}
.v2 .vsect-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;z-index:0}
.v2 .vsect-media>:not(picture){position:relative;z-index:2}
/* Variante a voile renforce, pour une carte illustree PLUS ETROITE que
   celles de la homepage : le texte y passe sur trois lignes au lieu de
   deux, donc plus haut dans la carte, la ou le voile est plus faible.
   Mesure : la description tombait entre 4,24 et 4,41:1 pour un minimum
   de 4,5. Classe distincte, pour ne rien changer a la homepage gelee. */
/* --------------------------------------------------------------------------
   Carte « publics » : photographie en haut, contenu sur fond uni en bas.

   POURQUOI CE COMPOSANT PLUTOT QU'UNE VARIANTE DE `.vsect-c`
   Poser le texte sur la photographie tenait les ratios WCAG, mais pas le
   confort de lecture : la texture et les variations locales d'une photo font
   danser les lettres, quel que soit le voile. Assombrir davantage aurait tue
   l'image sans regler le probleme. Les deux zones sont donc separees — la
   photo respire, le texte se lit sur un fond uni dont le contraste ne depend
   plus d'un pixel.

   Composant distinct : les cartes Secteurs de la page d'accueil, gelees, ne
   partagent aucune regle avec celui-ci.
   -------------------------------------------------------------------------- */
.v2 .vpq{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:clamp(14px,1.4vw,20px);margin-top:clamp(34px,4vw,58px)}
.v2 .vpq-c{display:flex;flex-direction:column;min-width:0;
  border-radius:var(--v-r);overflow:hidden;background:var(--v-ink);
  color:var(--v-cream);border:1px solid transparent;
  transition:transform .45s var(--v-ease),border-color .45s var(--v-ease)}
.v2 .vpq-c:hover{transform:translateY(-5px);color:var(--v-cream);
  border-color:rgba(250,247,240,.22)}
/* Zone photographique : hauteur fixe et fluide, pour tenir 40-45 % de la carte
   quelle que soit la longueur du texte. */
.v2 .vpq-img{position:relative;flex:none;height:clamp(122px,10.5vw,150px);
  overflow:hidden}
.v2 .vpq-img img{width:100%;height:100%;object-fit:cover;
  object-position:center;display:block}
/* Traitement leger : uniquement de quoi lier la photo au fond sombre de la
   carte. Aucun texte ne repose dessus. */
.v2 .vpq-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,16,23,.10) 0,
    rgba(11,16,23,.06) 55%,rgba(11,16,23,.46) 100%)}
.v2 .vpq-txt{flex:1;display:flex;flex-direction:column;gap:9px;
  padding:20px clamp(18px,1.5vw,22px) clamp(22px,1.8vw,26px)}
.v2 .vpq-c b{font-family:var(--v-serif);font-weight:500;
  font-size:clamp(20px,1.6vw,24px);line-height:1.18;color:var(--v-cream);
  letter-spacing:-.01em}
.v2 .vpq-c span{font-size:14.5px;line-height:1.56;color:var(--v-cream-2)}
/* Teinte sectorielle : un souffle de couleur dans le fond, pas un aplat. */
.v2 .vpq-n1 .vpq-txt{background:linear-gradient(165deg,
  rgba(11,79,168,.20),rgba(11,16,23,0) 68%)}
.v2 .vpq-n2 .vpq-txt{background:linear-gradient(165deg,
  rgba(127,195,238,.14),rgba(11,16,23,0) 68%)}
.v2 .vpq-n3 .vpq-txt{background:linear-gradient(165deg,
  rgba(217,163,43,.14),rgba(11,16,23,0) 68%)}
.v2 .vpq-n4 .vpq-txt{background:linear-gradient(165deg,
  rgba(63,110,94,.18),rgba(11,16,23,0) 68%)}
/* --------------------------------------------------------------------------
   Ajouts du hub /solutions/. Tous pensés pour resservir aux neuf landings.
   -------------------------------------------------------------------------- */
/* Hero sans media : une seule colonne large, pour les pages qui n'ont pas
   d'illustration ni de panneau a montrer. */
/* Hero une colonne : conserve pour les pages qui n'ont vraiment rien a
   montrer a droite. Le hub /solutions/ ne l'utilise plus. */
.v2 .vhero-in-large{grid-template-columns:1fr}
.v2 .vhero-txt-large{max-width:46ch}
.v2 .vhero-txt-large .vhero-lede{max-width:60ch}

/* Zone haute d'une carte sans illustration validee : l'unite mesuree, en
   Playfair, sur un fond teinte. Un signe, pas un emplacement en attente. */
.v2 .vpq-unite{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;position:relative}
.v2 .vpq-unite em{font-family:var(--v-serif);font-style:normal;
  font-weight:500;font-size:clamp(46px,4.6vw,64px);line-height:1;
  color:var(--v-cream);letter-spacing:-.02em}
/* La legende nomme la plaque : un objet nomme ne se lit jamais comme
   une image qui aurait echoue a charger. */
.v2 .vpq-unite i{position:relative;font-style:normal;
  font-family:var(--v-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--v-cream-2)}
.v2 .vpq-unite::after{display:none}
.v2 .vpq-n1 .vpq-unite{background:linear-gradient(150deg,#123354,#0B1017 74%)}
.v2 .vpq-n2 .vpq-unite{background:linear-gradient(150deg,#16303F,#0B1017 74%)}
.v2 .vpq-n3 .vpq-unite{background:linear-gradient(150deg,#2E2717,#0B1017 74%)}
.v2 .vpq-n4 .vpq-unite{background:linear-gradient(150deg,#15291F,#0B1017 74%)}

/* Repere de navigation d'une carte. La carte entiere reste le lien : ceci est
   un simple signe, pose en bas de la zone opaque, jamais un bouton ni un lien
   imbrique. Il reagit au survol ET au focus clavier, pour que la carte se
   signale de la meme facon dans les deux parcours. */
.v2 .vpq-go{margin-top:auto;padding-top:14px;display:inline-flex;
  align-items:center;gap:7px;font-family:var(--v-mono);font-weight:500;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--v-cream-2);transition:color .25s var(--v-ease)}
.v2 .vpq-go i{font-style:normal;font-size:13px;line-height:1;
  transition:transform .25s var(--v-ease)}
.v2 .vpq-c:hover .vpq-go,.v2 .vpq-c:focus-visible .vpq-go{color:var(--v-cream)}
.v2 .vpq-c:hover .vpq-go i,
.v2 .vpq-c:focus-visible .vpq-go i{transform:translateX(4px)}

/* Index des familles, colonne droite du hero. Le H1 pose une question ; cette
   colonne y repond en quatre lignes et sert d'entree dans la page. Composant
   sobre, reutilisable par toute page-hub a venir. */
.v2 .vidx-wrap{min-width:0;display:flex;align-items:center}
.v2 .vidx{width:100%;border-radius:var(--v-r);
  background:rgba(250,247,240,.05);border:1px solid var(--v-line-dark);
  padding:22px clamp(18px,1.6vw,24px)}
.v2 .vidx-h{margin:0 0 6px;font-family:var(--v-mono);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-cream-3)}
.v2 .vidx-l{display:block;padding:14px 0;color:var(--v-cream);
  border-bottom:1px solid rgba(250,247,240,.09);
  transition:color .25s var(--v-ease)}
.v2 .vidx-l:hover{color:var(--v-blue-lift)}
.v2 .vidx-l b{display:block;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(17px,1.35vw,20px);line-height:1.24;letter-spacing:-.01em}
.v2 .vidx-l span{display:block;margin-top:4px;font-size:13px;line-height:1.5;
  color:var(--v-cream-2)}
.v2 .vidx-f{margin:14px 0 0;font-family:var(--v-mono);font-size:11.5px;
  color:var(--v-cream-3)}

/* Zone haute d'une carte sans photographie : elle doit se lire comme une
   plaque de mesure dessinee, jamais comme une image qui n'a pas charge. Trois
   signes l'y aident : une trame reguliere, l'unite dans la couleur d'accent de
   la famille, et un filet sous le glyphe. */
.v2 .vpq-unite::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(250,247,240,.07) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,rgba(250,247,240,.07) 0 1px,transparent 1px 22px)}
.v2 .vpq-unite em{position:relative;padding-bottom:12px}
.v2 .vpq-unite em::after{content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:34px;height:2px;border-radius:1px;
  background:currentColor;opacity:.55}
.v2 .vpq-n1 .vpq-unite em{color:var(--v-blue-lift)}
.v2 .vpq-n2 .vpq-unite em{color:#A8D8F5}
.v2 .vpq-n3 .vpq-unite em{color:var(--v-gold-soft)}
.v2 .vpq-n4 .vpq-unite em{color:var(--v-green-lift)}

/* Famille a une seule solution : titre a gauche, carte a droite. */
.v2 .vsol-duo{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,3vw,56px);align-items:center}
.v2 .vsol-lede{margin-top:16px;max-width:44ch}
.v2 .vpq-solo{margin-top:0;grid-template-columns:1fr;max-width:420px}

/* Liste a puces editoriale, sur fond clair. */
.v2 .vsol-liste{margin:14px 0 0;padding:0;list-style:none;display:grid;
  gap:10px}
.v2 .vsol-liste li{position:relative;padding-left:22px;font-size:16px;
  line-height:1.6;color:var(--v-text-2)}
.v2 .vsol-liste li::before{content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--v-gold)}

/* Bloc « autre besoin » : court, centre, sans carte. */
.v2 .vsol-autre{max-width:60ch}
.v2 .vsol-autre p{margin:14px 0 0;font-size:16.5px;line-height:1.62;
  color:var(--v-text-2)}

/* Paragraphe editorial sur fond sombre. Regle de contexte plutot qu'une
   classe a poser : la couleur d'un paragraphe depend de la section qui le
   porte, pas d'un rappel dans le HTML. Une classe supplementaire aurait
   dependu de l'ordre des declarations — c'est exactement ce qui a rate
   ici, le texte restant a 2,31:1 sur le fond sombre. */
.v2 .v-sec-dark .vwhy-p{color:var(--v-cream-2)}
.v2 .v-sec-dark .v-kicker{color:var(--v-cream-3)}

@media (max-width:760px){
  .v2 .vpq-solo{max-width:none}
  .v2 .vpq{grid-template-columns:1fr}
  .v2 .vpq-img{height:clamp(118px,32vw,150px)}
}
/* Rangée du haut : ses deux cartes portent une image, elles peuvent donc
   reprendre de la hauteur sans qu'aucune ne paraisse vide. */
.v2 .vsect-agri{flex:2 1 520px;min-height:280px}
.v2 .vsect-agri::before{background:linear-gradient(115deg,
  rgba(63,110,94,.6),rgba(11,16,23,.1) 64%)}
.v2 .vsect-agri::after{background:repeating-linear-gradient(172deg,
  rgba(155,199,168,.16) 0 2px,transparent 2px 26px)}
.v2 .vsect-tall{flex:1 1 300px;min-height:280px}
.v2 .vsect-tall::before{background:linear-gradient(150deg,
  rgba(11,79,168,.46),rgba(11,16,23,.05) 66%)}
.v2 .vsect-tall::after{background:
  repeating-linear-gradient(90deg,rgba(127,195,238,.14) 0 1px,transparent 1px 32px),
  repeating-linear-gradient(0deg,rgba(127,195,238,.14) 0 1px,transparent 1px 32px)}
/* Les quatre cartes de cette rangée portent désormais une image : elle
   peut reprendre de la hauteur sans qu'aucune ne paraisse vide. */
.v2 .vsect-n{flex:1 1 300px;min-height:240px}
.v2 .vsect-n1::before{background:linear-gradient(150deg,
  rgba(11,79,168,.36),rgba(11,16,23,.04) 62%)}
.v2 .vsect-n1::after{background:repeating-linear-gradient(90deg,
  rgba(250,247,240,.11) 0 3px,transparent 3px 21px)}
.v2 .vsect-n2::before{background:linear-gradient(150deg,
  rgba(217,163,43,.3),rgba(11,16,23,.04) 62%)}
.v2 .vsect-n2::after{background:repeating-linear-gradient(45deg,
  rgba(224,179,74,.14) 0 2px,transparent 2px 14px)}
.v2 .vsect-n3::before{background:linear-gradient(150deg,
  rgba(127,195,238,.28),rgba(11,16,23,.04) 62%)}
.v2 .vsect-n3::after{background:radial-gradient(circle,
  rgba(168,216,245,.22) 1.2px,transparent 1.4px);background-size:17px 17px}
.v2 .vsect-n4::before{background:linear-gradient(150deg,
  rgba(63,110,94,.36),rgba(11,16,23,.04) 62%)}
.v2 .vsect-n4::after{background:repeating-linear-gradient(90deg,
  rgba(155,199,168,.2) 0 1px,transparent 1px 9px,
  rgba(155,199,168,.1) 9px 10px,transparent 10px 26px)}
.v2 .vsect-k{position:relative;font-family:var(--v-mono);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-green-lift)}
.v2 .vsect-c b{position:relative;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(23px,2.1vw,30px);line-height:1.16;max-width:18ch}
.v2 .vsect-c span{position:relative;font-size:14px;line-height:1.5;
  color:var(--v-cream-2);max-width:34ch}

.v2 .vagri{position:relative;color:var(--v-cream);overflow:hidden;
  background:linear-gradient(100deg,#0B1017 18%,#101A26 52%,#16241D)}
.v2 .vagri-in{position:relative;max-width:var(--v-max);margin:0 auto;
  padding:clamp(70px,8vw,124px) var(--v-pad);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(32px,3.6vw,60px);align-items:center}
.v2 .vagri-k{display:flex;align-items:center;gap:10px;font-family:var(--v-mono);
  font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--v-green-lift)}
.v2 .vagri-k i{width:22px;height:1px;background:rgba(155,199,168,.5)}
.v2 .vagri h2{margin:16px 0 0;max-width:15ch;font-family:var(--v-serif);
  font-weight:500;font-size:clamp(30px,3.8vw,52px);line-height:1.08;
  letter-spacing:-.018em;color:var(--v-cream)}
.v2 .vagri-p{margin:20px 0 0;max-width:44ch;
  font-size:clamp(16px,1.2vw,18px);line-height:1.62;color:var(--v-cream-2)}
.v2 .vagri-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.v2 .vagri-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:11px;
  min-width:0}
.v2 .vagri-tile{background:rgba(250,247,240,.06);
  border:1px solid var(--v-line-dark);border-radius:16px;padding:18px;
  min-width:0;display:flex;flex-direction:column;justify-content:space-between;
  gap:8px}
.v2 .vagri-wide{grid-column:span 2}
.v2 .vagri-tile b{font-family:var(--v-mono);font-weight:500;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--v-cream-3)}
.v2 .vagri-tile em{font-style:normal;font-family:var(--v-serif);
  font-size:clamp(23px,2.2vw,30px)}
.v2 .vagri-tile .st{font-weight:500;font-size:17px;color:var(--v-cream)}
.v2 .vagri-gold{color:#E0B34A}
.v2 .vagri-blue{color:var(--v-blue-lift)}
.v2 .vagri-bar{height:4px;border-radius:2px;background:rgba(250,247,240,.16);
  overflow:hidden}
.v2 .vagri-bar i{display:block;height:100%;background:#E0B34A}
.v2 .vagri-live{display:flex;align-items:center;gap:9px}
.v2 .vagri-live i{position:relative;width:8px;height:8px;border-radius:50%;
  background:#8FD3B4;color:rgba(143,211,180,.6);flex:none}
.v2 .vagri-live i::after{content:"";position:absolute;inset:-3px;
  border-radius:50%;border:1px solid currentColor;
  animation:vRing 3.6s ease-out infinite}
.v2 .vagri-note{grid-column:1/-1}

.v2 .vet{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(20px,2.4vw,36px);margin-top:clamp(26px,3vw,44px)}
.v2 .vet-n{display:flex;align-items:center;gap:12px}
.v2 .vet-n b{font-family:var(--v-serif);font-weight:500;font-size:26px;
  color:var(--v-gold);line-height:1}
.v2 .vet-n i{flex:1;height:1px;background:var(--v-line)}
.v2 .vet h3{margin:14px 0 0;font-weight:600;font-size:19.5px;
  color:var(--v-text);letter-spacing:-.01em}
.v2 .vet p{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--v-text-2);
  max-width:32ch}
.v2 .vwhy{max-width:var(--v-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(28px,3.4vw,60px)}
.v2 .vwhy h2{margin:0;max-width:17ch;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(27px,3.1vw,44px);line-height:1.14;letter-spacing:-.018em;
  color:var(--v-text)}
.v2 .vwhy-p{margin:20px 0 0;max-width:36ch;font-size:16px;line-height:1.62;
  color:var(--v-text-2)}
.v2 .vwhy-list div{padding:24px 0;border-bottom:1px solid var(--v-line)}
.v2 .vwhy-list div:last-child{border-bottom:0}
.v2 .vwhy-list h3{margin:0;font-weight:600;font-size:19.5px;
  color:var(--v-text)}
.v2 .vwhy-list p{margin:8px 0 0;font-size:16px;line-height:1.6;
  color:var(--v-text-2);max-width:48ch}

.v2 .vconv{padding:clamp(80px,10vw,150px) var(--v-pad);background:var(--v-ink);
  color:var(--v-cream);text-align:center;position:relative;overflow:hidden}
.v2 .vconv-in{position:relative;max-width:880px;margin:0 auto}
.v2 .vconv h2{margin:0;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(29px,4vw,54px);line-height:1.1;letter-spacing:-.02em;
  text-wrap:balance;color:var(--v-cream)}
.v2 .vconv p{margin:20px auto 0;max-width:52ch;font-size:17px;line-height:1.62;
  color:var(--v-cream-2)}
.v2 .vconv-cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;
  margin-top:clamp(28px,3.4vw,44px)}
.v2 .vconv-cta .v-btn{font-size:16.5px;padding:18px 34px}
/* Cette phrase s'adresse au visiteur, ce n'est pas une valeur mesurée :
   le mono la faisait lire comme une étiquette technique. */
.v2 .vconv p.vconv-note{margin:22px auto 0;max-width:46ch;font-size:15px;
  line-height:1.55;color:var(--v-cream-3)}

.v2 .vf{background:var(--v-ink);color:var(--v-cream-2);
  border-top:1px solid rgba(250,247,240,.09);
  padding:clamp(40px,4.4vw,64px) var(--v-pad)}
.v2 .vf-grid{max-width:var(--v-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px 40px}
.v2 .vf-brand a{display:inline-flex;align-items:center;gap:11px;
  color:var(--v-cream)}
.v2 .vf-brand img{width:38px;height:38px;border-radius:11px;
  display:block}
.v2 .vf-name{display:flex;flex-direction:column;line-height:1.05}
.v2 .vf-name b{font-family:var(--v-serif);font-weight:500;font-size:19px;
  letter-spacing:-.01em;color:var(--v-cream)}
.v2 .vf-name span{font-family:var(--v-mono);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--v-cream-3)}
.v2 .vf-brand p{margin:16px 0 0;max-width:30ch;font-size:14.5px;line-height:1.6;
  color:var(--v-cream-3)}
.v2 .vf-h{font-family:var(--v-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v-cream-3);
  margin-bottom:12px}
.v2 .vf-col a{display:block;padding:5px 0;font-size:14.5px;
  color:var(--v-cream-2)}
.v2 .vf-col a:hover{color:var(--v-cream)}
.v2 .vf-bot{max-width:var(--v-max);margin:32px auto 0;padding-top:20px;
  border-top:1px solid rgba(250,247,240,.09);display:flex;flex-wrap:wrap;
  gap:12px 24px;justify-content:space-between;font-family:var(--v-mono);
  font-size:12.5px;color:var(--v-cream-3)}
/* Cibles tactiles : les liens de pied de page tombaient à 16-20 px de haut.
   Un peu de padding vertical les remonte au-dessus de 24 px sans changer la
   composition. */
.v2 .vf-bot a{color:var(--v-cream-3);display:inline-block;padding:4px 0}
.v2 .vf-bot a:hover{color:var(--v-cream)}
.v2 .vf-legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.v2 .vwhy-p a,.v2 .vh-edge a{display:inline-block;padding:4px 0}

/* --------------------------------------------------------------------------
   Ajouts de la migration /monitor/. Aucun n'est propre à cette page : ce sont
   des composants partagés que les prochaines migrations réutiliseront.
   -------------------------------------------------------------------------- */

/* Fil d'Ariane — la homepage n'en a pas, les pages intérieures si. Le
   BreadcrumbList du JSON-LD décrit desormais un fil reellement visible. */
.v2 .breadcrumbs{max-width:var(--v-max);margin:0 auto;
  padding:18px var(--v-pad) 0}
.v2 .breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;
  flex-wrap:wrap;gap:6px 10px;font-family:var(--v-mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase}
.v2 .breadcrumbs li{color:var(--v-text-3)}
.v2 .breadcrumbs li+li::before{content:"/ ";color:var(--v-line)}
.v2 .breadcrumbs a{color:var(--v-text-3)}
.v2 .breadcrumbs a:hover{color:var(--v-text)}
.v2 .vhero .breadcrumbs li,.v2 .vhero .breadcrumbs a{color:var(--v-cream-3)}

/* Le hero d'une page produit porte un panneau conceptuel a la place d'une
   photographie : meme colonne, meme rythme, remplacable par une vraie capture
   sans toucher a la structure. */
.v2 .vhero-panneau{min-width:0}
.v2 .vhero-eyebrow-blue{color:var(--v-blue-lift)}
.v2 .vhero-eyebrow-blue i{background:rgba(127,195,238,.5)}

/* Liste editoriale sur fond sombre — meme composant que `.vwhy-list`, valeurs
   de couleur inversees. */
.v2 .vwhy-list-sombre div{border-bottom-color:rgba(250,247,240,.14)}
.v2 .vwhy-list-sombre h3{color:var(--v-cream)}
.v2 .vwhy-list-sombre p{color:var(--v-cream-2)}
.v2 .vmon-voit{min-width:0}
.v2 .vmon-voit .v-kicker{display:block;margin-bottom:6px}

/* Variante d'accent produit pour les cartes generiques. */
.v2 .vun-bleu .vun-k{color:var(--v-blue)}
.v2 .vun-bleu .vun-rows em{color:var(--v-blue)}
.v2 .vun-note{margin:16px 0 0;font-size:13.5px;line-height:1.55;
  color:var(--v-text-3)}

/* Deux colonnes editoriales : titre a gauche, developpement a droite. */
.v2 .vwhy-mon{gap:clamp(28px,3.4vw,60px)}
.v2 .v-h2-s{font-size:clamp(24px,2.4vw,34px);max-width:22ch}

/* Revelation progressive, sans JavaScript : <details> natif. Le contenu reste
   dans le HTML, donc indexable, mais ne pese pas sur la lecture. */
.v2 .vdets{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--v-line)}
.v2 .vdet{border-bottom:1px solid var(--v-line)}
.v2 .vdet summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;
  position:relative;font-weight:600;font-size:17.5px;line-height:1.4;
  color:var(--v-text)}
.v2 .vdet summary::-webkit-details-marker{display:none}
.v2 .vdet summary::after{content:"";position:absolute;right:8px;top:27px;
  width:9px;height:9px;border-right:2px solid var(--v-text-3);
  border-bottom:2px solid var(--v-text-3);transform:rotate(45deg);
  transition:transform .2s var(--v-ease)}
.v2 .vdet[open] summary::after{transform:rotate(-135deg);top:31px}
.v2 .vdet summary:hover{color:var(--v-blue)}
.v2 .vdet p{margin:0 0 22px;max-width:68ch;font-size:16px;line-height:1.62;
  color:var(--v-text-2)}

/* Sujets lies — cartes de maillage sobres. */
.v2 .vlies{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;margin-top:clamp(22px,2.6vw,34px)}
.v2 .vlie{display:block;padding:20px 22px;border-radius:var(--v-r-s);
  background:var(--v-bg-2);color:var(--v-text);
  transition:background .25s var(--v-ease),transform .25s var(--v-ease)}
.v2 .vlie:hover{background:var(--v-ink-2);color:var(--v-cream);
  transform:translateY(-2px)}
.v2 .vlie b{display:block;font-weight:600;font-size:16px}
.v2 .vlie span{display:block;font-size:13.5px;line-height:1.45;
  color:var(--v-text-2);margin-top:4px}
.v2 .vlie:hover span{color:var(--v-cream-2)}

.v2 .vet-cta{margin:clamp(26px,3vw,38px) 0 0}
.v2 .v-lien{font-weight:600}

/* Le cadrage du probleme : deux paragraphes de respiration avant la liste des
   besoins. Mesure de lecture limitee, comme le reste du systeme. */
.v2 .vmon-probleme{margin-top:clamp(22px,2.4vw,32px);max-width:70ch;
  columns:2;column-gap:44px}
.v2 .vmon-probleme p{margin:0 0 14px;font-size:16.5px;line-height:1.62;
  color:var(--v-text-2);break-inside:avoid}

/* Revelation progressive sur fond sombre — meme composant, valeurs inversees. */
.v2 .vdet-sombre{border-bottom-color:rgba(250,247,240,.14)}
.v2 .vdet-sombre summary{color:var(--v-cream)}
.v2 .vdet-sombre summary:hover{color:var(--v-blue-lift)}
.v2 .vdet-sombre summary::after{border-color:var(--v-cream-3)}
/* Le corps du repli heritait de la couleur de texte claire : 2,1:1 sur
   le fond sombre. */
.v2 .vdet-sombre p{color:var(--v-cream-2)}
/* `.v-illus` n'etait recolore que dans `.v-sec-dark` ; le hero est
   sombre sans porter cette classe, la legende y tombait a 3,35:1. */
.v2 .vhero .v-illus,.v2 .vagri .v-illus{color:var(--v-cream-3)}
.v2 .vdet-large{border-top:1px solid rgba(250,247,240,.14);
  margin-top:clamp(24px,2.8vw,36px)}
/* La grille de capteurs vient du systeme precedent : elle a ete dessinee pour
   un fond sombre, on la laisse donc sur son terrain. */
.v2 .vdet-sombre .sensor-grid{margin-top:6px;margin-bottom:26px}
.v2 .vdet-sombre .sensor-disclaimer{margin-bottom:24px}

@media (max-width:760px){
  .v2 .vdet summary{font-size:16.5px;padding:18px 40px 18px 0}
  .v2 .vmon-probleme{columns:1}
}

/* --------------------------------------------------------------------------
   Ajouts de la migration /solutions/surveillance-temperature/.
   Comme pour /monitor/, aucun composant n'est propre a cette page : le panneau
   de mesure, les trois cartes claires et la variante claire du flux sont
   reutilisables par les prochaines landings.
   -------------------------------------------------------------------------- */

/* Panneau de mesure du hero. Il tient la place d'une photographie qui n'existe
   pas pour la temperature generique : valeur du moment, plage attendue,
   historique minimal, dernier releve, etat. Les valeurs sont illustratives et
   le pied du panneau le dit. Remplacable par une capture anonymisee sans
   toucher a la structure du hero. */
.v2 .vtmp{border-radius:var(--v-r);background:rgba(250,247,240,.05);
  border:1px solid var(--v-line-dark);padding:20px 22px;min-width:0}
.v2 .vtmp-now{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 0 2px}
.v2 .vtmp-now-t{min-width:0}
.v2 .vtmp-lieu{margin:0;font-family:var(--v-mono);font-weight:500;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-cream-3)}
.v2 .vtmp-now em{display:block;margin-top:8px;font-family:var(--v-serif);
  font-style:normal;font-weight:500;font-size:clamp(44px,4.8vw,66px);
  line-height:1;letter-spacing:-.022em;color:var(--v-cream)}
.v2 .vtmp-meta{margin:10px 0 0;font-family:var(--v-mono);font-size:12px;
  color:var(--v-cream-3)}
.v2 .vtmp-etat{display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:7px 13px;border-radius:999px;background:rgba(143,211,180,.16);
  color:#8FD3B4;font-weight:500;font-size:13px}
.v2 .vtmp-etat::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#8FD3B4;flex:none}
.v2 .vtmp-bloc{margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(250,247,240,.09)}
.v2 .vtmp-lab{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:13.5px;
  color:var(--v-cream-2)}
.v2 .vtmp-lab b{font-family:var(--v-mono);font-weight:500;font-size:12px;
  color:var(--v-cream)}
.v2 .vtmp-ax{display:flex;justify-content:space-between;gap:12px;
  margin:8px 0 0;font-family:var(--v-mono);font-size:10.5px;
  color:var(--v-cream-3)}
/* Plage attendue : la piste couvre 14 a 30 degres, la zone bleue 18 a 24, le
   repere clair la valeur du moment (22,4). Positions calculees sur cet axe,
   elles ne varient pas. */
.v2 .vtmp-track{position:relative;display:block;height:8px;border-radius:4px;
  background:rgba(250,247,240,.10)}
.v2 .vtmp-track i{position:absolute;top:0;bottom:0;display:block}
.v2 .vtmp-zone{left:25%;width:37.5%;border-radius:4px;
  background:rgba(127,195,238,.34)}
.v2 .vtmp-cur{left:52.5%;width:3px;margin-left:-1.5px;border-radius:2px;
  background:var(--v-cream);box-shadow:0 0 0 3px rgba(11,16,23,.6)}
/* Historique minimal : 24 releves horaires, la bande de plage attendue en
   fond, le maximum de la nuit en ambre, la valeur du moment en vert. */
.v2 .vtmp-svg{display:block;width:100%;height:auto}
.v2 .vtmp-band{fill:rgba(127,195,238,.15)}
.v2 .vtmp-line{fill:none;stroke:var(--v-cream);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.v2 .vtmp-pic{fill:#E0B34A;stroke:#0B1017;stroke-width:1.6}
.v2 .vtmp-dot{fill:#8FD3B4;stroke:#0B1017;stroke-width:1.6}
.v2 .vtmp-ev{display:flex;gap:10px;margin:18px 0 0;padding-top:16px;
  border-top:1px solid rgba(250,247,240,.09);font-size:13.5px;line-height:1.55;
  color:var(--v-cream-2)}
.v2 .vtmp-ev i{width:7px;height:7px;border-radius:50%;background:#E0B34A;
  flex:none;margin-top:6px}

/* Phrase de bascule d'une section claire — la conclusion du raisonnement, pas
   un encadre decoratif. */
.v2 .vtmp-punch{margin:22px 0 0;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(19px,1.7vw,23px);line-height:1.38;color:var(--v-text)}
.v2 .vtmp-punch em{font-style:normal;color:var(--v-blue)}
/* Reserve editoriale : ce que Duck-E ne promet pas. Elle doit se lire, donc
   elle est posee sur une surface, pas en gris pale. */
.v2 .vtmp-note{margin:20px 0 0;padding:16px 18px;border-radius:var(--v-r-s);
  background:var(--v-bg-2);border-left:3px solid var(--v-gold);
  font-size:14.5px;line-height:1.6;color:var(--v-text-2)}
.v2 .v-sec-2 .vtmp-note{background:var(--v-card)}
.v2 .vtmp-dark-note{margin:clamp(20px,2.4vw,28px) 0 0;max-width:70ch;
  font-size:14.5px;line-height:1.6;color:var(--v-cream-2)}

/* Trois cartes claires : un micro-libelle, un titre, une explication, et la
   question a laquelle la variante repond. */
.v2 .vtri{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(14px,1.4vw,20px);margin-top:clamp(34px,4vw,58px)}
.v2 .vtri-c{display:flex;flex-direction:column;min-width:0;
  padding:clamp(22px,2vw,28px);border-radius:var(--v-r);
  background:var(--v-card);border:1px solid var(--v-line-soft);
  box-shadow:0 1px 2px rgba(20,32,46,.06)}
.v2 .vtri-c p{margin:10px 0 0;font-size:16px;line-height:1.6;
  color:var(--v-text-2)}
.v2 .vtri-c p.vtri-k{margin:0;font-family:var(--v-mono);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-gold-ink)}
.v2 .vtri-c h3{margin:12px 0 0;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(21px,1.8vw,26px);letter-spacing:-.015em;color:var(--v-text)}
.v2 .vtri-c p.vtri-q{margin-top:auto;padding-top:16px;
  border-top:1px solid var(--v-line-soft);font-size:14.5px;line-height:1.55;
  color:var(--v-text-3)}

/* Variante claire du flux d'etapes — meme composant que `.vter-flow`, valeurs
   de couleur inversees. La colonne de gauche porte ici une heure, donc plus
   large que le chiffre d'etape. */
.v2 .vter-flow-clair{background:var(--v-card);border-color:var(--v-line)}
.v2 .vter-flow-clair .vter-step i{width:46px;font-family:var(--v-mono);
  font-size:12.5px;color:var(--v-gold-ink);padding-top:3px}
.v2 .vter-flow-clair .vter-step b{color:var(--v-text)}
.v2 .vter-flow-clair .vter-step span{color:var(--v-text-2)}
.v2 .vter-flow-clair .vter-step+.vter-step{border-top-color:var(--v-line-soft)}
.v2 .vter-note{margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--v-line-soft);font-size:13.5px;line-height:1.55;
  color:var(--v-text-3)}

/* Carte `.vpq` non cliquable : meme composition en deux zones, sans
   l'affordance de survol qui promettrait un lien inexistant. */
.v2 .vpq-stat:hover{transform:none;border-color:transparent}

/* --------------------------------------------------------------------------
   Passe finale /solutions/surveillance-temperature/ — rythme visuel.
   Ces cinq composants sont generiques : ils repondent a des situations que
   toutes les landings rencontrent (rappel compact, passerelle vers une page
   specialisee, liste de controle, resume d'options, ancre sous header
   collant).
   -------------------------------------------------------------------------- */

/* Ancre visee par un lien interne. Le header est colle en haut sur 70 px :
   sans compensation, le titre de la section arrive DERRIERE lui. */
.v2 .vanchor{scroll-margin-top:92px}

/* Rappel compact sur fond sombre. Trois reperes separes par un filet, pas
   trois cartes : c'est un aide-memoire, il ne doit pas peser autant que la
   section qui a introduit ces notions. */
/* Deux etats seulement, jamais d'etat intermediaire a deux colonnes : avec
   `auto-fit`, le troisieme repere retombait seul en deuxieme ligne en gardant
   son filet vertical, qui pendait alors dans le vide. En dessous de 900 px la
   pile est verticale et les filets sont horizontaux ; au-dessus, trois
   colonnes et des filets verticaux. */
.v2 .vcmp{display:grid;grid-template-columns:1fr;
  margin-top:clamp(28px,3.2vw,44px);
  border-top:1px solid rgba(250,247,240,.14)}
.v2 .vcmp-c{padding:18px 0;border-bottom:1px solid rgba(250,247,240,.09);
  min-width:0}
.v2 .vcmp-c b{display:block;font-weight:600;font-size:16px;
  color:var(--v-cream)}
.v2 .vcmp-c span{display:block;margin-top:5px;font-size:14.5px;line-height:1.55;
  color:var(--v-cream-2)}
@media (min-width:900px){
  .v2 .vcmp{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 clamp(24px,2.6vw,44px)}
  .v2 .vcmp-c{border-bottom:0;padding:20px 0 6px}
  .v2 .vcmp-c+.vcmp-c{border-left:1px solid rgba(250,247,240,.09);
    padding-left:clamp(24px,2.6vw,44px)}
}

/* Passerelle vers une page specialisee : image d'un cote, contenu opaque de
   l'autre. Meme regle que `.vpq` — aucun texte long sur une photographie. */
.v2 .vcase{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  border-radius:var(--v-r);overflow:hidden;background:var(--v-card);
  border:1px solid var(--v-line-soft);box-shadow:0 1px 2px rgba(20,32,46,.06)}
.v2 .vcase-img{position:relative;min-width:0;min-height:100%;
  background:var(--v-ink)}
.v2 .vcase-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
.v2 .vcase-txt{min-width:0;padding:clamp(24px,2.6vw,40px)}
.v2 .vcase-txt .v-kicker{display:block;margin-bottom:10px}
.v2 .vcase-txt p{margin:14px 0 0;font-size:16.5px;line-height:1.62;
  color:var(--v-text-2);max-width:56ch}
.v2 .vcase-cta{margin-top:clamp(20px,2.2vw,28px)}
.v2 .vcase-cta i{font-style:normal;margin-left:6px}

/* Liste de controle : des intitules courts qui se balaient, pas six phrases
   longues empilees. Une seule surface, pas six cartes. */
.v2 .vchk{margin-top:clamp(28px,3.2vw,44px);border-radius:var(--v-r);
  background:var(--v-card);border:1px solid var(--v-line-soft);
  padding:clamp(22px,2.2vw,32px);box-shadow:0 1px 2px rgba(20,32,46,.06)}
.v2 .vchk-h{margin:0 0 6px;font-family:var(--v-mono);font-weight:500;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--v-gold-ink)}
/* Paliers explicites plutot qu'`auto-fit` : a 1440 px la piste de 252 px
   laissait entrer QUATRE colonnes, et les six verifications se rangeaient en
   4 + 2, avec une deuxieme ligne a moitie vide. Trois paliers francs donnent
   1 / 2 / 3 colonnes, donc 3 x 2 sur desktop. */
.v2 .vchk-g{display:grid;grid-template-columns:1fr;
  gap:2px clamp(24px,2.6vw,44px)}
@media (min-width:640px){
  .v2 .vchk-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .v2 .vchk-g{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Nombre impair de verifications : au stade deux colonnes, la derniere se
   retrouverait seule dans la colonne de gauche. Elle prend alors toute la
   largeur, ce qui se lit comme une fin de liste et non comme un trou.
   `:nth-child(odd)` ne matche que si le compte est impair — la grille de six
   de la landing temperature n'est donc pas concernee. */
@media (min-width:640px) and (max-width:1023px){
  .v2 .vchk-i:last-child:nth-child(odd){grid-column:1/-1}
}
.v2 .vchk-i{position:relative;padding:16px 0 16px 24px;
  border-bottom:1px solid var(--v-line-soft);min-width:0}
.v2 .vchk-i::before{content:"";position:absolute;left:0;top:23px;width:9px;
  height:9px;border-radius:50%;border:2px solid var(--v-gold)}
.v2 .vchk-i b{display:block;font-weight:600;font-size:16px;color:var(--v-text)}
.v2 .vchk-i span{display:block;margin-top:4px;font-size:14.5px;line-height:1.55;
  color:var(--v-text-2)}
.v2 .vchk-n{margin:20px 0 0;padding-top:18px;
  border-top:1px solid var(--v-line);font-size:14.5px;line-height:1.6;
  color:var(--v-text-2)}

/* Carte d'option resumee : meme composant `.vun-card`, sans la hauteur
   minimale ni le titre de tete de section. */
.v2 .vun-slim{min-height:0}
.v2 .vun-slim h3{font-size:clamp(21px,1.8vw,26px);margin-top:8px}
.v2 .vsol-liste-s{gap:9px;margin-top:16px}
.v2 .vsol-liste-s li{font-size:15.5px;line-height:1.5}

/* Repli sur fond clair, hors bandeau de FAQ : il porte donc lui-meme son
   filet superieur et sa respiration. */
.v2 .vdet-plat{border-top:1px solid var(--v-line);
  margin-top:clamp(22px,2.4vw,32px)}
.v2 .vdet-plat p{margin-top:0}

/* Grille de capteurs a TROIS references. `.sensor-grid` vient du systeme
   precedent et vaut `repeat(2,1fr)` au-dela de 900 px : trois cartes s'y
   rangeaient en 2 + 1. La correction est portee par une classe posee sur le
   repli concerne, donc sans effet sur `/monitor/`, dont la grille en compte
   quatre et reste en deux colonnes. Specificite (0,3,0) : l'emporte sur la
   regle `max-width:900px` du systeme precedent sans dependre de l'ordre. */
.v2 .vdet-trois .sensor-grid{grid-template-columns:1fr}
@media (min-width:620px){
  .v2 .vdet-trois .sensor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1180px){
  .v2 .vdet-trois .sensor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Lien de texte en pied de section : meme compensation que dans `.vwhy-p`,
   sinon la cible tombe a 20 px de haut. Le selecteur exige les deux classes,
   il ne peut donc pas atteindre le bouton de `/monitor/`, qui est un
   `.v-btn`. */
.v2 .vet-cta .v-lien{display:inline-block;padding:4px 0}

@media (max-width:760px){
  .v2 .vcase{grid-template-columns:1fr}
  .v2 .vcase-img{min-height:0;aspect-ratio:16/9}
  .v2 .vcase-img img{position:static;height:100%}
  .v2 .vanchor{scroll-margin-top:78px}
}

/* --------------------------------------------------------------------------
   Migration /solutions/surveillance-chambre-froide/.
   Le panneau du hero reutilise `.vtmp` : meme cadre, meme typographie. Ce qui
   change est ce qu'il montre — deux episodes annotes au lieu d'un seul, et une
   legende a la place de la piste de plage.
   -------------------------------------------------------------------------- */

/* Marqueur des remontees breves de degivrage sur la courbe. La derive garde
   l'ambre, qui est la couleur d'attention du systeme. */
.v2 .vtmp-deg{fill:#7FC3EE;stroke:#0B1017;stroke-width:1.4}

/* Legende des deux episodes, sous la courbe. */
.v2 .vfr-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0}
.v2 .vfr-l{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  line-height:1.45;color:var(--v-cream-2)}
.v2 .vfr-l::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.v2 .vfr-l-deg::before{background:#7FC3EE}
.v2 .vfr-l-der::before{background:#E0B34A}

/* Comparatif en deux colonnes : attendu / inhabituel. Chaque carte porte trois
   criteres de lecture, pas un pave de texte. */
.v2 .vfrc{display:grid;grid-template-columns:1fr;
  gap:clamp(14px,1.4vw,20px);margin-top:clamp(30px,3.4vw,48px)}
@media (min-width:860px){
  .v2 .vfrc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.v2 .vfrc-c{min-width:0;border-radius:var(--v-r);background:var(--v-card);
  border:1px solid var(--v-line-soft);padding:clamp(22px,2vw,30px);
  box-shadow:0 1px 2px rgba(20,32,46,.06)}
.v2 .vfrc-k{display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--v-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase}
.v2 .vfrc-k i{width:8px;height:8px;border-radius:50%;flex:none}
.v2 .vfrc-c h3{margin:12px 0 4px;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(22px,1.9vw,28px);letter-spacing:-.015em;color:var(--v-text)}
.v2 .vfrc-r{display:flex;flex-wrap:wrap;gap:2px 16px;padding:13px 0;
  border-bottom:1px solid var(--v-line-soft)}
.v2 .vfrc-r:last-child{border-bottom:0;padding-bottom:0}
.v2 .vfrc-r span{flex:none;width:104px;font-family:var(--v-mono);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v-text-3);padding-top:2px}
.v2 .vfrc-r b{flex:1;min-width:0;font-weight:500;font-size:15.5px;
  line-height:1.5;color:var(--v-text)}
.v2 .vfrc-ok .vfrc-k{color:#1E6B52}
.v2 .vfrc-ok .vfrc-k i{background:#1E6B52}
.v2 .vfrc-warn .vfrc-k{color:var(--v-gold-ink)}
.v2 .vfrc-warn .vfrc-k i{background:var(--v-gold)}

/* Reserve reglementaire : elle doit se voir, sans crier. Meme role que
   `.vtmp-note`, avec un filet ambre plus marque parce qu'elle porte ce que
   Duck-E n'est PAS. */
.v2 .vfr-warn{margin:0;padding:20px 22px;border-radius:var(--v-r-s);
  background:var(--v-bg-2);border-left:3px solid var(--v-gold);
  font-size:15.5px;line-height:1.62;color:var(--v-text-2)}
.v2 .vfr-warn b{color:var(--v-text)}

/* --------------------------------------------------------------------------
   Migration /solutions/capteur-fuite-eau/.
   Une landing evenementielle, pas une landing de mesure : il n'y a ni valeur
   ni courbe. Le panneau du hero porte un ETAT et l'heure a laquelle il a
   bascule, la geometrie de detection remplace le type de mesure, et la limite
   de ce que le produit fait est un composant a part entiere.
   -------------------------------------------------------------------------- */

/* Panneau d'evenement du hero. Meme cadre que `.vtmp`, contenu different :
   pas de chiffre, un etat en Playfair et une petite chronologie. */
.v2 .veau{border-radius:var(--v-r);background:rgba(250,247,240,.05);
  border:1px solid var(--v-line-dark);padding:20px 22px;min-width:0}
.v2 .veau-lieu{margin:18px 0 0;font-family:var(--v-mono);font-weight:500;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-cream-3)}
.v2 .veau-etat{display:flex;align-items:center;gap:14px;margin:8px 0 0;
  font-family:var(--v-serif);font-weight:500;
  font-size:clamp(30px,3.2vw,44px);line-height:1.1;letter-spacing:-.02em;
  color:var(--v-cream)}
.v2 .veau-etat i{width:12px;height:12px;border-radius:50%;flex:none;
  background:#E0B34A;box-shadow:0 0 0 5px rgba(224,179,74,.2)}
.v2 .veau-rows{margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(250,247,240,.09)}
.v2 .veau-r{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px 16px;padding:9px 0}
.v2 .veau-r span{font-size:13.5px;color:var(--v-cream-2)}
.v2 .veau-r b{font-family:var(--v-mono);font-weight:500;font-size:13px;
  color:var(--v-cream)}
/* Chronologie : trois etats successifs relies par un filet vertical. */
.v2 .veau-tl{margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(250,247,240,.09)}
.v2 .veau-s{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 14px;padding:10px 0 10px 26px}
.v2 .veau-s i{position:absolute;left:0;top:16px;width:9px;height:9px;
  border-radius:50%;background:var(--v-cream-3)}
.v2 .veau-s+.veau-s i::before{content:"";position:absolute;left:4px;top:-19px;
  width:1px;height:19px;background:rgba(250,247,240,.18)}
.v2 .veau-s time{flex:none;width:88px;font-family:var(--v-mono);font-size:12px;
  color:var(--v-cream-3)}
.v2 .veau-s b{font-weight:500;font-size:14.5px;color:var(--v-cream-2)}
.v2 .veau-p-ok i{background:#8FD3B4}
.v2 .veau-p-ok b{color:#8FD3B4}
.v2 .veau-p-al i{background:#E0B34A}
.v2 .veau-p-al b{color:#E0B34A}

/* Geometrie de la detection : une figure minuscule, un titre, une phrase.
   Deux etats francs, comme `.vcmp` — jamais d'etat intermediaire a deux
   colonnes qui laisserait un item orphelin. */
.v2 .vgeo{display:grid;grid-template-columns:1fr;
  margin-top:clamp(30px,3.4vw,48px);border-top:1px solid var(--v-line)}
.v2 .vgeo-i{display:flex;gap:18px;padding:22px 0;min-width:0;
  border-bottom:1px solid var(--v-line-soft)}
.v2 .vgeo-fig{flex:none;width:72px}
.v2 .vgeo-fig svg{display:block;width:100%;height:auto}
.v2 .vgeo-l{stroke:var(--v-line);stroke-width:2;stroke-linecap:round}
.v2 .vgeo-d{fill:var(--v-blue)}
.v2 .vgeo-c{fill:none;stroke:var(--v-blue);stroke-width:2.6;
  stroke-linecap:round}
.v2 .vgeo-i b{display:block;font-weight:600;font-size:17px;
  color:var(--v-text)}
.v2 .vgeo-i span{display:block;margin-top:5px;font-size:15.5px;
  line-height:1.55;color:var(--v-text-2)}
@media (min-width:900px){
  .v2 .vgeo{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 clamp(24px,2.6vw,44px)}
  .v2 .vgeo-i{flex-direction:column;gap:14px;border-bottom:0;padding:26px 0 6px}
  .v2 .vgeo-i+.vgeo-i{border-left:1px solid var(--v-line-soft);
    padding-left:clamp(24px,2.6vw,44px)}
}

/* Ce que le produit fait / ne fait pas. La colonne de droite n'est pas une
   precaution juridique en petits caracteres : elle se lit comme la premiere,
   parce que c'est elle qui tient la frontiere avec le metier de plomberie. */
.v2 .vlim{display:grid;grid-template-columns:1fr;
  gap:clamp(14px,1.4vw,20px);margin-top:clamp(30px,3.4vw,48px)}
@media (min-width:860px){
  .v2 .vlim{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.v2 .vlim-c{min-width:0;border-radius:var(--v-r);background:var(--v-card);
  border:1px solid var(--v-line-soft);padding:clamp(22px,2vw,30px);
  box-shadow:0 1px 2px rgba(20,32,46,.06)}
.v2 .vlim-k{display:flex;align-items:center;gap:10px;margin:0 0 4px;
  font-family:var(--v-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase}
.v2 .vlim-k i{width:18px;height:18px;border-radius:50%;flex:none;
  position:relative}
.v2 .vlim-k i::before,.v2 .vlim-k i::after{content:"";position:absolute;
  background:currentColor;border-radius:1px}
.v2 .vlim-ok .vlim-k{color:#1E6B52}
.v2 .vlim-ok .vlim-k i{background:rgba(30,107,82,.14)}
.v2 .vlim-ok .vlim-k i::before{left:5px;top:9px;width:4px;height:1.8px;
  transform:rotate(45deg)}
.v2 .vlim-ok .vlim-k i::after{left:7px;top:7px;width:7px;height:1.8px;
  transform:rotate(-50deg)}
.v2 .vlim-no .vlim-k{color:var(--v-gold-ink)}
.v2 .vlim-no .vlim-k i{background:rgba(217,163,43,.2)}
.v2 .vlim-no .vlim-k i::before{left:4px;top:8.2px;width:10px;height:1.8px}
.v2 .vlim-c ul{margin:0;padding:0;list-style:none}
.v2 .vlim-c li{position:relative;padding:14px 0 14px 20px;
  border-bottom:1px solid var(--v-line-soft);font-size:16px;line-height:1.55;
  color:var(--v-text)}
.v2 .vlim-c li:last-child{border-bottom:0;padding-bottom:0}
.v2 .vlim-c li::before{content:"";position:absolute;left:0;top:22px;width:8px;
  height:1.8px;border-radius:1px;background:var(--v-line)}
.v2 .vlim-no li{color:var(--v-text-2)}

/* Grille de capteurs a UNE reference : `.sensor-grid` vaut `repeat(2,1fr)`
   au-dela de 900 px, la carte seule occupait donc une demi-colonne avec un
   vide a cote. Meme mecanique que `.vdet-trois`. */
.v2 .vdet-un .sensor-grid{grid-template-columns:minmax(0,1fr);max-width:660px}

/* --------------------------------------------------------------------------
   Protection active — /solutions/capteur-fuite-eau/.
   Une chaine d'action en quatre temps, sur fond sombre. Ce n'est pas la
   chronologie du hero (ce qui s'est passe) mais une architecture (ce qui se
   declenche), donc une lecture horizontale avec des fleches.
   -------------------------------------------------------------------------- */
.v2 .vact{margin-top:clamp(30px,3.4vw,48px);border-radius:var(--v-r);
  background:rgba(250,247,240,.05);border:1px solid var(--v-line-dark);
  padding:clamp(22px,2.2vw,32px)}
.v2 .vact-flow{display:grid;grid-template-columns:1fr;gap:0}
.v2 .vact-s{position:relative;min-width:0;padding:18px 0 18px 28px;
  border-bottom:1px solid rgba(250,247,240,.09)}
.v2 .vact-s i{position:absolute;left:0;top:25px;width:10px;height:10px;
  border-radius:50%;background:var(--v-cream-3)}
.v2 .vact-s b{display:block;font-weight:600;font-size:16.5px;
  color:var(--v-cream)}
.v2 .vact-s span{display:block;margin-top:5px;font-size:14.5px;line-height:1.55;
  color:var(--v-cream-2)}
.v2 .vact-s-al i{background:#E0B34A;box-shadow:0 0 0 4px rgba(224,179,74,.18)}
.v2 .vact-s-ok i{background:#8FD3B4;box-shadow:0 0 0 4px rgba(143,211,180,.18)}
/* Sur mobile, un filet vertical relie les etapes ; au-dessus de 980 px, une
   fleche horizontale les separe. Deux etats francs, aucun etat intermediaire
   qui laisserait une etape orpheline. */
.v2 .vact-s+.vact-s i::before{content:"";position:absolute;left:4.5px;
  top:-27px;width:1px;height:27px;background:rgba(250,247,240,.18)}
@media (min-width:980px){
  .v2 .vact-flow{grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 clamp(26px,2.6vw,44px)}
  .v2 .vact-s{padding:0 0 0 0;border-bottom:0}
  .v2 .vact-s i{position:relative;left:auto;top:auto;display:block;
    margin-bottom:14px}
  .v2 .vact-s+.vact-s i::before{content:"";position:absolute;
    left:calc(-1 * clamp(26px,2.6vw,44px) / 2 - 5px);top:4px;
    width:9px;height:1px;background:rgba(250,247,240,.3)}
  .v2 .vact-s+.vact-s i::after{content:"";position:absolute;
    left:calc(-1 * clamp(26px,2.6vw,44px) / 2 - 1px);top:1px;
    width:5px;height:5px;border-top:1px solid rgba(250,247,240,.3);
    border-right:1px solid rgba(250,247,240,.3);transform:rotate(45deg)}
}
.v2 .vact-mon{display:flex;gap:10px;margin:clamp(20px,2.2vw,28px) 0 0;
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid rgba(250,247,240,.09);font-size:15px;line-height:1.55;
  color:var(--v-cream)}
.v2 .vact-mon i{width:8px;height:8px;border-radius:50%;flex:none;
  margin-top:7px;background:var(--v-blue-lift)}
.v2 .vact-txt{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,44px);margin-top:clamp(26px,3vw,40px)}
.v2 .vact-txt .vwhy-p{margin:0;max-width:52ch;color:var(--v-cream-2)}
.v2 .vact-txt strong{color:var(--v-cream)}
/* Le cas consommation : volontairement plus discret que la chaine d'action. */
.v2 .vact-conso{margin-top:clamp(26px,3vw,40px);
  padding-top:clamp(22px,2.4vw,32px);
  border-top:1px solid rgba(250,247,240,.14);max-width:76ch}
.v2 .vact-conso h3{margin:0;font-weight:600;font-size:18.5px;
  color:var(--v-cream)}
.v2 .vact-conso p{margin:12px 0 0;font-size:15.5px;line-height:1.62;
  color:var(--v-cream-2)}

/* Familles de materiel : deux registres cote a cote sur fond sombre. */
.v2 .vfam{display:grid;grid-template-columns:1fr;
  gap:clamp(14px,1.4vw,20px);margin-top:clamp(28px,3.2vw,44px)}
@media (min-width:860px){
  .v2 .vfam{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.v2 .vfam-c{min-width:0;border-radius:var(--v-r-s);
  background:rgba(250,247,240,.05);border:1px solid var(--v-line-dark);
  padding:clamp(20px,1.9vw,26px)}
.v2 .vfam-k{margin:0 0 10px;font-family:var(--v-mono);font-weight:500;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-blue-lift)}
.v2 .vfam-c p{margin:0;font-size:15.5px;line-height:1.6;
  color:var(--v-cream-2)}
.v2 .vfam-c strong{color:var(--v-cream)}

/* Liste de reperes a CINQ entrees (hero fuite d'eau). Mesure sur la page
   servie : les items font 209, 142, 195, 180 et 273 px. Avec la gouttiere de
   22 px, trois reperes demandent 590 px alors que `.vhero-txt` en fait 580 :
   la premiere ligne n'en prend que deux, et le cinquieme reste seul sur une
   troisieme ligne.
   La colonne de grille du hero fait 601 px a 1366 et 637 px a 1440 : elle a
   donc de la place inutilisee. On leve le plafond de la colonne a 620 px pour
   cette page — un element de grille ne peut de toute facon pas depasser sa
   cellule — et on resserre la gouttiere a 16 px. Ligne 1 : 578 px, trois
   reperes, 23 px de reserve au pire (1366). Ligne 2 : 469 px, deux reperes.
   Un quatrieme demanderait 774 px, il ne peut pas remonter.
   Sous 1300 px la colonne est trop etroite pour trois : rien n'est touche, la
   liste garde son enroulement naturel. Les deux classes ne sont portees que
   par ce hero, aucune autre page n'est concernee. */
@media (min-width:1300px){
  .v2 .vhero-txt-5{max-width:620px}
  .v2 .vhero-trust-5{column-gap:16px}
}

/* --------------------------------------------------------------------------
   Homepage — « Du capteur LoRaWAN a la supervision ».
   Trois stations reliees par une fleche, sur fond clair. Les glyphes sont des
   SVG abstraits — un boitier, des ondes, un panneau — dessines au trait dans
   le bleu du systeme. Ce ne sont ni des captures, ni des schemas reseau : ils
   ne portent aucune valeur, aucun libelle et aucune marque.

   Le glyphe est pose sur une plaque de 60 px : sans elle il flottait dans le
   blanc et la section se lisait plus legere que ses voisines (681 px de haut
   contre 869 a 918). La plaque donne aussi au connecteur une cible franche :
   la fleche part d'une plaque et arrive sur la suivante, a la meme hauteur.
   Aucune carte, aucun numero d'etape, aucun aplat de couleur — un filet, une
   plaque discrete et une fleche. */
.v2 .vchn{--vchn-g:clamp(36px,3.6vw,68px);
  display:grid;grid-template-columns:1fr;row-gap:38px;
  margin-top:clamp(32px,3.6vw,52px)}
.v2 .vchn-s{position:relative;min-width:0}
/* Plaque du glyphe. Le centre est a 30 px du haut de la plaque : c'est l'axe
   sur lequel tous les connecteurs sont cales. */
.v2 .vchn-fig{display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:18px;background:var(--v-bg-2);
  border:1px solid var(--v-line-soft);margin-bottom:20px}
.v2 .vchn-fig svg{display:block;width:38px;height:auto}
.v2 .vchn-o{fill:none;stroke:var(--v-blue);stroke-width:1.8;
  stroke-linecap:round}
.v2 .vchn-f{fill:var(--v-gold)}
.v2 .vchn-b{stroke:var(--v-gold);stroke-width:2.4;stroke-linecap:round}
.v2 .vchn-s h3{margin:0;font-family:var(--v-serif);font-weight:500;
  font-size:clamp(21px,1.9vw,27px);letter-spacing:-.015em;color:var(--v-text)}
.v2 .vchn-s p{margin:10px 0 0;font-size:16px;line-height:1.6;
  color:var(--v-text-2);max-width:42ch}
/* En pile, la chaine se lit de haut en bas : un filet vertical et une fleche
   descendante dans la gouttiere, alignes sur l'axe des plaques (30 px). */
.v2 .vchn-s+.vchn-s::before{content:"";position:absolute;left:29.5px;
  top:-30px;width:1px;height:17px;background:var(--v-line)}
.v2 .vchn-s+.vchn-s::after{content:"";position:absolute;left:26.5px;
  top:-17px;width:7px;height:7px;border-right:1px solid var(--v-text-3);
  border-bottom:1px solid var(--v-text-3);transform:rotate(45deg)}
/* Deux etats francs, jamais d'etat intermediaire a deux colonnes qui
   laisserait la troisieme station orpheline avec sa fleche dans le vide. */
@media (min-width:920px){
  .v2 .vchn{grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:var(--vchn-g);row-gap:0}
  /* Filet de tete : les trois colonnes se lisent comme un bandeau structure,
     a la maniere d'un chapitrage, sans devenir des cartes. */
  .v2 .vchn-s{padding-top:26px;border-top:1px solid var(--v-line)}
  /* La fleche traverse reellement la gouttiere, d'une plaque a l'autre :
     26 px de padding + 30 px de demi-plaque = axe a 56 px. */
  .v2 .vchn-s+.vchn-s::before{top:56px;left:calc(-1 * var(--vchn-g) + 10px);
    width:calc(var(--vchn-g) - 26px);height:1px;background:var(--v-line)}
  .v2 .vchn-s+.vchn-s::after{top:52.5px;left:-16px;width:7px;height:7px;
    border-top:1px solid var(--v-text-3);
    border-right:1px solid var(--v-text-3);
    border-bottom:0;transform:rotate(45deg)}
}
/* Reperes du hero de la HOMEPAGE : quatre entrees, 554,8 px de texte.
   Avec la gouttiere de 22 px et la mesure de 580 px, la quatrieme retombe
   seule sur une deuxieme ligne. La colonne de grille fait 601 px a 1366, 620
   a 1440 et 702 en pile a 768 : on leve le plafond a 620 px et on resserre la
   gouttiere a 12 px, ce qui demande 590,8 px — les quatre tiennent alors sur
   une seule ligne de 768 a 1920. Classes distinctes de `.vhero-txt-5` et
   `.vhero-trust-5`, qui servent la liste de CINQ reperes de la landing fuite
   d'eau : celle-ci n'est pas touchee. */
@media (min-width:760px){
  .v2 .vhero-txt-4{max-width:620px}
  .v2 .vhero-trust-4{column-gap:12px}
}
.v2 .vchn-cta{margin:clamp(28px,3vw,40px) 0 0}
.v2 .vchn-cta .v-lien{display:inline-block;padding:4px 0}

@media (max-width:760px){
  .v2 .vtmp{padding:18px}
  .v2 .vtmp-now em{font-size:clamp(42px,13vw,58px)}
}

@media (max-width:940px){
  .v2 .vh-sep,.v2 .vh-nav,.v2 .vh-tel,.v2 .vh-cta,.v2 .vh-fill{display:none}
  .v2 .vh-mob-tel{display:flex;margin-left:auto}
  .v2 .vh-burger{display:flex}
  .v2 .vhero-media{aspect-ratio:16/11}
}
@media (max-width:760px){
  .v2 .vpb-lg,.v2 .vpb-md{min-height:320px}
  .v2 .vpb-card{padding:24px}
  .v2 .vun-card{min-height:0}
  .v2 .vneeds-list{grid-column:auto}
  .v2 .vagri-wide{grid-column:1/-1}
  .v2 .vpin-line{display:none}
  .v2 .vpin{max-width:78%}
  .v2 .vhero-media{aspect-ratio:4/3}
}
@media (max-width:520px){
  /* Sous cette largeur, trois étiquettes ne tiennent plus sans se recouvrir :
     on garde celles du hall et de la porte, dont les points restent à leur
     place. Le repère « valeurs illustratives » reste affiché. */
  .v2 .vpin-b{display:none}
}
@media print{.v2 .vh,.v2 .vf,.v2 .vconv{display:none}}