/* =========================================================
   Ö WATER — Version 2 « Clair »
   Design system clair, inspiré des codes premium de la
   filtration d'eau nord-américaine.
   ========================================================= */

@font-face{font-family:"Neue Einstellung";src:url("/assets/fonts/NeueEinstellung-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Neue Einstellung";src:url("/assets/fonts/NeueEinstellung-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Neue Einstellung";src:url("/assets/fonts/NeueEinstellung-SemiBold.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Neue Einstellung";src:url("/assets/fonts/NeueEinstellung-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Neue Einstellung";src:url("/assets/fonts/NeueEinstellung-ExtraBold.otf") format("opentype");font-weight:800;font-display:swap}
@font-face{font-family:"Noto Kufi Arabic";src:url("/assets/fonts/NotoKufiArabic-VariableFont_wght.ttf") format("truetype-variations");font-weight:100 900;font-display:swap}

:root{
  /* --- Surfaces --- */
  --ink:#FFFFFF;            /* fond de page */
  --ink-2:#FFFFFF;          /* cartes */
  --navy:#EDF4FB;           /* bandeaux bleutés */
  --navy-2:#E3EEF8;         /* dégradé bleuté */
  --paper:#F4F7FA;          /* bandeaux gris */
  --paper-2:#FFFFFF;

  /* --- Marque --- */
  --brand:#1B7AC9;          /* bleu Ö */
  --brand-deep:#075695;     /* bleu Ö d'origine */
  --cyan:#0E9BC9;           /* accent */
  --green:#1DA46A;          /* validations */
  --amber:#F0B429;          /* étoiles */

  /* --- Texte --- */
  --txt:#0A1420;
  --txt-dim:#5A6B7C;
  --txt-ink:#0A1420;        /* texte sur fond clair */
  --txt-ink-dim:#5A6B7C;

  --line:rgba(10,20,32,.12);
  --line-2:rgba(10,20,32,.07);
  --line-ink:#E2E9F0;

  /* --- Typo --- */
  --sans:"Neue Einstellung",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  /* Échelle modulaire — ratio 1,25 (quarte majeure adoucie), fluide 375 → 1440 px */
  --d-xl:clamp(2.5rem,1.35rem + 4.6vw,4.4rem);   /* affichage hero      40 → 70 px */
  --d-lg:clamp(2rem,1.25rem + 3vw,3.4rem);       /* titre de page       32 → 54 px */
  --d-md:clamp(1.65rem,1.15rem + 2vw,2.6rem);    /* titre de section    26 → 42 px */
  --d-sm:clamp(1.3rem,1.1rem + 1vw,1.7rem);      /* sous-titre          21 → 27 px */
  --t-lg:1.125rem;                               /* corps large            18 px */
  --t-md:1rem;                                   /* corps                  16 px */
  --t-sm:.875rem;                                /* secondaire             14 px */
  --t-xs:.75rem;                                 /* légende                12 px */
  --lead:clamp(1.0625rem,1rem + .35vw,1.1875rem);/* chapô               17 → 19 px */

  /* Interlignes */
  --lh-tight:1.14;   /* affichage */
  --lh-title:1.24;   /* titres */
  --lh-body:1.6;     /* corps */
  --lh-loose:1.7;    /* petits textes et arabe */

  /* Graisses */
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* Mesure de lecture */
  --measure:62ch;

  /* --- Espace --- */
  --s3xs:4px; --s2xs:8px; --sxs:12px; --ssm:16px; --smd:24px;
  --slg:32px; --sxl:48px; --s2xl:64px; --s3xl:88px;
  --section:clamp(64px,8vw,112px);

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px;background:var(--ink)}
body{
  font-family:var(--sans);background:var(--ink);color:var(--txt);
  font-size:var(--t-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;width:auto;height:auto;clip:auto;clip-path:none;inset-inline-start:16px;top:16px;z-index:999;background:var(--txt-ink);color:#fff;padding:10px 16px;border-radius:8px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--smd)}
.section{padding:var(--section) 0;position:relative}
.section.tight{padding:calc(var(--section)*.55) 0}
.band-navy{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-2) 100%)}
.band-paper{background:var(--paper);color:var(--txt-ink)}
.band-paper h2,.band-paper h3,.band-paper h4{color:var(--txt-ink)}
.band-paper p{color:var(--txt-ink-dim)}

/* ---------- Typo ---------- */
h1,h2,h3,h4,h5{letter-spacing:-.018em;font-weight:var(--w-medium);line-height:var(--lh-title);color:var(--txt);text-wrap:balance}
h1{font-size:var(--d-lg);line-height:var(--lh-tight);letter-spacing:-.022em}
h2{font-size:var(--d-md)}
h3{font-size:var(--d-sm);font-weight:var(--w-semibold);letter-spacing:-.01em}
h4{font-size:var(--t-lg);font-weight:var(--w-bold);letter-spacing:0;line-height:1.4}
h5{font-size:var(--t-md);font-weight:var(--w-semibold);letter-spacing:0;line-height:1.45}
.serif{font-family:var(--serif);font-weight:var(--w-regular);letter-spacing:-.005em;line-height:1.16}
.lead{font-size:var(--lead);color:var(--txt-dim);line-height:var(--lh-body);max-width:var(--measure);text-wrap:pretty}
p{text-wrap:pretty}
.band-paper .lead{color:var(--txt-ink-dim)}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:var(--sxl)}
.head .lead{margin:var(--sxs) auto 0;text-align:center}
.head-left{max-width:720px;margin-bottom:var(--sxl)}
.head-left .lead{margin-top:var(--sxs)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2xs);
  font-size:.92rem;font-weight:600;padding:13px 24px;border-radius:999px;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:15px;height:15px}
.btn-primary{background:#0B2A4A;color:#fff}
.btn-primary:hover{background:#123A63}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:#1E7ACC}
.btn-ghost{background:#fff;color:var(--txt);border:1px solid var(--line)}
.btn-ghost:hover{background:#EEF3F9}
.band-paper .btn-ghost{background:#fff;color:var(--txt-ink);border-color:var(--line-ink)}
.btn-outline{background:transparent;color:var(--txt);border:1px solid rgba(10,20,32,.24)}
.btn-outline:hover{border-color:var(--txt-ink)}
.band-paper .btn-outline{color:var(--txt-ink);border-color:#C9D6E2}
.btn-lg{padding:16px 30px;font-size:1rem}
.btn-block{width:100%}

/* ---------- Étoiles ---------- */
.stars{display:inline-flex;gap:2px;color:var(--amber)}
.stars svg{width:14px;height:14px;fill:currentColor}
.rating{display:flex;align-items:center;gap:var(--s2xs);font-size:.85rem;color:var(--txt-dim)}
.band-paper .rating{color:var(--txt-ink-dim)}

/* ---------- Navigation ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:200;padding:var(--ssm) var(--smd);
  transition:padding .3s var(--ease)}
.nav{max-width:1080px;margin-inline:auto;display:flex;align-items:center;gap:var(--smd);
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line);border-radius:999px;padding:8px 10px 8px 22px;
  transition:background .3s,border-color .3s}
.header.scrolled .nav{background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(10,20,32,.08)}
.nav .brand img{height:26px;width:auto;filter:brightness(0)}
.nav-links{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav-links a{font-size:.86rem;font-weight:500;color:var(--txt-dim);padding:9px 14px;border-radius:999px;
  transition:color .2s,background .2s}
.nav-links a:hover{color:var(--txt);background:rgba(10,20,32,.05)}
.nav-cta{display:flex;align-items:center;gap:var(--s2xs)}
.burger{display:none;width:42px;height:42px;border-radius:50%;place-items:center;background:rgba(10,20,32,.06)}
.burger svg{width:20px;height:20px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92svh,860px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;border-radius:0 0 var(--r-xl) var(--r-xl)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,12,21,.78) 0%,rgba(5,12,21,.25) 30%,rgba(5,12,21,.55) 62%,rgba(5,12,21,.94) 100%),
    linear-gradient(90deg,rgba(5,12,21,.82) 0%,rgba(5,12,21,.35) 55%,rgba(5,12,21,.1) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-block:calc(var(--s3xl) + 48px) var(--sxl)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--sxl);align-items:end}
.hero h1{font-size:var(--d-xl);max-width:14ch;margin-bottom:var(--sxs)}
.hero .lead{max-width:46ch;margin-bottom:var(--slg)}
.hero-actions{display:flex;gap:var(--sxs);flex-wrap:wrap}
.hero .rating{margin-bottom:var(--ssm)}

/* Carte « rapport d'eau » du hero */
.report{background:rgba(8,20,33,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--smd)}
.report-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ssm)}
.report-top .kicker{color:var(--txt-dim);letter-spacing:.16em}
.live{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;color:var(--green);
  letter-spacing:.1em;text-transform:uppercase}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(62,205,138,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(62,205,138,0)}100%{box-shadow:0 0 0 0 rgba(62,205,138,0)}}
.report-score{display:flex;align-items:center;justify-content:space-between;gap:var(--ssm);
  padding-bottom:var(--ssm);border-bottom:1px solid var(--line-2);margin-bottom:var(--ssm)}
.report-score b{display:block;font-size:.95rem;font-weight:600}
.report-score span{font-size:.78rem;color:var(--txt-dim)}
.gauge{position:relative;width:62px;height:62px;flex:none}
.gauge svg{width:62px;height:62px;transform:rotate(-90deg)}
.gauge .val{position:absolute;inset:0;display:grid;place-items:center;font-size:1.15rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.bar-row{margin-bottom:var(--sxs)}
.bar-row .l{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:5px}
.bar-row .l span:last-child{color:var(--txt-dim);font-variant-numeric:tabular-nums}
.bar{height:5px;border-radius:99px;background:rgba(10,20,32,.10);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}
.bar .g1{background:linear-gradient(90deg,#3ECD8A,#F0B429)}
.bar .g2{background:linear-gradient(90deg,#3ECD8A,#5CD2F5)}
.bar .g3{background:linear-gradient(90deg,#F0B429,#E8604C)}

/* ---------- Bandeau de confiance ---------- */
.trust{display:flex;align-items:center;justify-content:space-between;gap:var(--smd) var(--slg);flex-wrap:wrap;
  padding-top:var(--slg);margin-top:var(--slg);border-top:1px solid var(--line-2)}
.trust p{font-size:.82rem;color:var(--txt-dim)}
.trust p b{color:var(--txt);font-weight:700}
.trust-marks{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.trust-marks .tm-group{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.trust-marks .tm-group + .tm-group{display:none}
.trust-marks span{font-weight:800;font-size:.86rem;letter-spacing:.06em;color:rgba(10,20,32,.42)}

/* ---------- Cartes d'entrée rapide ---------- */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ssm)}
.qcard{display:flex;align-items:center;gap:var(--ssm);background:var(--paper-2);border:1px solid var(--line-ink);
  border-radius:var(--r);padding:10px 18px 10px 10px;transition:transform .3s var(--ease),box-shadow .3s}
.qcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,20,32,.10)}
.qcard img{width:64px;height:52px;object-fit:cover;border-radius:10px;flex:none;background:#E8EEF4}
.qcard b{font-size:.9rem;font-weight:520;color:var(--txt-ink);line-height:1.25}
.qcard .arrow{margin-left:auto;color:var(--brand-deep)}
.qcard .arrow svg{width:17px;height:17px}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2xl);align-items:center}
.split.rev .split-media{order:2}
.split-media img{width:100%;border-radius:var(--r-lg)}
.split-media.frame{background:linear-gradient(160deg,rgba(46,143,224,.10),rgba(255,255,255,0));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--slg)}
.split-media.frame img{border-radius:var(--r-sm)}
.split-body .kicker{display:block;margin-bottom:var(--sxs)}
.split-body h2{margin-bottom:var(--ssm)}
.split-body .btn{margin-top:var(--smd)}

/* ---------- Statistiques ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sxl);text-align:center}
.stats .st{padding-inline:var(--ssm);border-left:1px solid var(--line-2)}
.stats .st:first-child{border-left:0}
.stats b{display:block;font-size:clamp(2.6rem,6vw,4rem);font-weight:300;letter-spacing:-.04em;
  line-height:1;color:var(--txt-ink);font-variant-numeric:tabular-nums}
.stats b em{font-style:normal;font-size:.34em;font-weight:500;letter-spacing:0;margin-left:.25em;
  color:var(--txt-dim);vertical-align:.2em}
.stats p{font-size:.85rem;color:var(--txt-dim);margin-top:var(--sxs);max-width:24ch;margin-inline:auto}

/* ---------- Contaminants ---------- */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ssm)}
.ccard{background:var(--paper-2);border:1px solid var(--line-ink);border-radius:var(--r);padding:var(--smd);
  transition:transform .3s var(--ease),box-shadow .3s}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,20,32,.09)}
.ccard .sym{display:flex;align-items:center;gap:var(--s2xs);margin-bottom:var(--ssm)}
.ccard .el{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;background:#EEF3F9;color:var(--brand-deep)}
.ccard .nm{font-size:.86rem;font-weight:700}
.ccard p{font-size:.85rem;color:var(--txt-ink-dim);line-height:1.55}
.ccard.c1 .nm{color:#2E8FE0}.ccard.c1 .el{background:#E6F1FB}
.ccard.c2 .nm{color:#8B6DD6}.ccard.c2 .el{background:#EFEAFB;color:#8B6DD6}
.ccard.c3 .nm{color:#D9873B}.ccard.c3 .el{background:#FBF1E6;color:#D9873B}
.ccard.c4 .nm{color:#3EA37D}.ccard.c4 .el{background:#E7F6F0;color:#3EA37D}

/* ---------- Cartes produit ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--smd)}
.pcard{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.pcard:hover{transform:translateY(-5px);border-color:rgba(27,122,201,.45);box-shadow:0 18px 40px rgba(10,20,32,.08)}
.pcard .shot{aspect-ratio:1/1;display:grid;place-items:center;padding:var(--smd);
  background:radial-gradient(120% 90% at 50% 0%,rgba(46,143,224,.10),rgba(255,255,255,0) 70%)}
.pcard .shot img{max-width:82%;max-height:82%;width:auto;height:auto;object-fit:contain}
.pcard .body{padding:var(--smd);display:flex;flex-direction:column;gap:var(--s2xs);flex:1}
.pcard h3{font-size:1.08rem}
.pcard p{font-size:.88rem;color:var(--txt-dim);flex:1;line-height:1.55}
.pcard .acts{display:flex;gap:var(--s2xs);margin-top:var(--sxs)}
.pcard .acts .btn{flex:1;padding:11px 14px;font-size:.84rem}
.band-paper .pcard{background:#fff;border-color:var(--line-ink)}
.band-paper .pcard h3{color:var(--txt-ink)}
.band-paper .pcard p{color:var(--txt-ink-dim)}
.band-paper .pcard .shot{background:radial-gradient(120% 90% at 50% 0%,rgba(46,143,224,.10),rgba(255,255,255,0) 70%)}

/* ---------- Tableau comparatif ---------- */
.ctable{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#FBFCFE}
.ctable table{width:100%;border-collapse:collapse}
.ctable th,.ctable td{padding:16px 18px;font-size:.9rem;text-align:left;border-bottom:1px solid var(--line-2)}
.ctable thead th{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.ctable thead th.own{color:var(--cyan)}
.ctable tbody td:first-child{color:var(--txt-dim)}
.ctable tr:last-child td{border-bottom:0}
.ctable .own{background:rgba(27,122,201,.07)}
.ctable .ok,.ctable .ko{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.ctable .ok svg{width:16px;height:16px;color:var(--green)}
.ctable .ko svg{width:16px;height:16px;color:#A3B0BD}
.ctable .ko{color:var(--txt-dim);font-weight:400}
.fineprint{font-size:.76rem;color:var(--txt-dim);margin-top:var(--ssm);max-width:70ch}

/* ---------- Avis ---------- */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ssm)}
.tcard{background:var(--paper-2);border:1px solid var(--line-ink);border-radius:var(--r);padding:var(--smd)}
.tcard .stars{margin-bottom:var(--sxs)}
.tcard p{font-size:.88rem;color:var(--txt-ink);line-height:1.6}
.tcard .who{display:flex;align-items:center;gap:10px;margin-top:var(--ssm);
  padding-top:var(--sxs);border-top:1px solid var(--line-ink)}
.tcard .av{width:32px;height:32px;border-radius:50%;background:#E6EEF6;color:var(--brand-deep);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:none}
.tcard .who b{display:block;font-size:.82rem;color:var(--txt-ink)}
.tcard .who span{font-size:.72rem;color:var(--txt-ink-dim)}
.score-row{display:flex;align-items:center;justify-content:center;gap:var(--sxs);margin-bottom:var(--smd)}
.score-row b{font-size:.88rem;color:var(--txt-ink)}
.score-row span{font-size:.82rem;color:var(--txt-ink-dim)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s2xs);
  background:#FBFCFE;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:var(--ssm);font-weight:600;font-size:.96rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--cyan);line-height:1;
  transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px;color:var(--txt-dim);font-size:.92rem;line-height:1.65;max-width:70ch}

/* ---------- CTA finale ---------- */
.cta{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line)}
.cta-media{position:relative;min-height:380px}
.cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-body{background:linear-gradient(160deg,var(--navy),var(--navy-2));padding:var(--s2xl) var(--sxl)}
.cta-body .kicker{display:block;margin-bottom:var(--sxs)}
.cta-body h2{margin-bottom:var(--ssm)}
.cta-list{margin:var(--smd) 0 var(--smd);display:grid;gap:var(--sxs)}
.cta-list li{padding-top:var(--sxs);border-top:1px solid var(--line-2)}
.cta-list b{display:block;font-size:.92rem}
.cta-list span{font-size:.84rem;color:var(--txt-dim)}

/* ---------- Formulaire ---------- */
.form{max-width:640px;margin-inline:auto;display:grid;gap:var(--sxs)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sxs)}
.form label{display:grid;gap:6px;font-size:.8rem;font-weight:600;color:var(--txt-dim)}
.form input,.form textarea{font:inherit;font-size:.95rem;color:var(--txt);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;width:100%;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--brand);background:#fff}
.form input::placeholder,.form textarea::placeholder{color:#93A3B3}
.form .btn{justify-self:start;margin-top:var(--s2xs)}
.form .legal{font-size:.76rem;color:var(--txt-dim)}
.form-status{font-size:.86rem;color:var(--green);min-height:1.2em}

/* ---------- Pied de page ---------- */
.footer{background:#F4F7FA;padding:var(--s3xl) 0 0;border-top:1px solid var(--line-2)}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s2xl);padding-bottom:var(--s2xl);
  border-bottom:1px solid var(--line-2)}
.foot-top img{height:34px;width:auto;filter:brightness(0);margin-bottom:var(--ssm)}
.news{display:flex;gap:var(--s2xs);margin-top:var(--ssm);max-width:400px}
.news input{flex:1;font:inherit;font-size:.9rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:12px 18px;color:var(--txt)}
.news input:focus{outline:none;border-color:var(--brand)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--slg);padding-block:var(--s2xl)}
.foot-cols h5{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim);
  font-weight:700;margin-bottom:var(--ssm)}
.foot-cols li{margin-bottom:10px}
.foot-cols a{font-size:.88rem;color:var(--txt);opacity:.75;transition:opacity .2s}
.foot-cols a:hover{opacity:1}
.disclaimer{font-size:.74rem;color:var(--txt-dim);line-height:1.65;border:1px solid var(--line-2);
  border-radius:var(--r);padding:var(--ssm) var(--smd);max-width:90ch}
.wordmark{margin-top:var(--s2xl);opacity:.07;pointer-events:none;user-select:none}
.wordmark img{width:100%;filter:brightness(0)}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--sxs);flex-wrap:wrap;
  padding:var(--smd) 0;font-size:.78rem;color:var(--txt-dim);border-top:1px solid var(--line-2);margin-top:var(--smd)}

/* ---------- PDP ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2xl);align-items:start;padding-top:120px}
.pdp-gallery{position:sticky;top:110px}
.pdp-main{background:radial-gradient(120% 80% at 50% 10%,rgba(46,143,224,.12),rgba(255,255,255,0) 70%),#F7FAFD;
  border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:1/1;display:grid;place-items:center;
  padding:var(--sxl);overflow:hidden}
.pdp-main img{max-height:100%;width:auto;object-fit:contain}
.pdp-thumbs{display:flex;gap:var(--s2xs);margin-top:var(--s2xs)}
.pdp-thumbs button{flex:1;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#F7FAFD;padding:8px;display:grid;place-items:center;transition:border-color .2s}
.pdp-thumbs button[aria-current="true"],.pdp-thumbs button:hover{border-color:var(--cyan)}
.pdp-thumbs img{max-height:100%;width:auto;object-fit:contain}
.pdp-info h1{font-size:clamp(2rem,3.6vw,2.9rem);margin:var(--s2xs) 0}
.opt-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim);
  margin:var(--smd) 0 var(--sxs)}
.opts{display:grid;gap:var(--s2xs)}
.opt{display:flex;gap:var(--sxs);align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;transition:border-color .2s,background .2s}
.opt:hover{border-color:rgba(27,122,201,.45)}
.opt.sel{border-color:var(--brand);background:rgba(27,122,201,.06)}
.opt .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid #9AA9B8;flex:none;margin-top:2px;
  display:grid;place-items:center}
.opt.sel .dot{border-color:var(--brand)}
.opt.sel .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand)}
.opt .t{flex:1}
.opt b{font-size:.95rem;font-weight:600}
.opt ul{margin-top:6px}
.opt li{font-size:.8rem;color:var(--txt-dim);line-height:1.5}
.benefits{display:grid;gap:var(--s2xs);margin-top:var(--smd)}
.benefit{display:flex;gap:var(--sxs);align-items:flex-start;border:1px solid var(--line-2);
  border-radius:var(--r);padding:14px 16px}
.benefit .ic{width:34px;height:34px;border-radius:10px;background:rgba(27,122,201,.10);color:var(--brand);
  display:grid;place-items:center;flex:none}
.benefit .ic svg{width:17px;height:17px}
.benefit b{display:block;font-size:.9rem;font-weight:600}
.benefit p{font-size:.82rem;color:var(--txt-dim);line-height:1.5}
.reassure{display:flex;gap:var(--smd);flex-wrap:wrap;border:1px solid var(--line-2);border-radius:var(--r);
  padding:14px 18px;margin-top:var(--smd);font-size:.8rem;color:var(--txt-dim)}
.reassure span{display:inline-flex;align-items:center;gap:7px}
.reassure svg{width:15px;height:15px;color:var(--green)}
.summary{border:1px solid var(--line);border-radius:var(--r);padding:var(--smd);margin-top:var(--smd);
  background:#FBFCFE}
.summary .kicker{color:var(--txt-dim);letter-spacing:.16em;display:block;margin-bottom:var(--sxs)}
.summary .r{display:flex;justify-content:space-between;font-size:.9rem;padding:7px 0}
.summary .r.total{border-top:1px solid var(--line-2);margin-top:var(--s2xs);padding-top:var(--sxs);
  font-size:1.05rem;font-weight:600}
.summary .r b{font-variant-numeric:tabular-nums}
.summary .note{font-size:.76rem;color:var(--txt-dim);margin-top:var(--sxs)}
.specs{width:100%;border-collapse:collapse}
.specs th,.specs td{text-align:left;padding:13px 16px;font-size:.89rem;border-bottom:1px solid var(--line-2)}
.specs th{color:var(--txt-dim);font-weight:500;width:44%}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

/* ---------- Techniques ---------- */
.tech-list{display:grid;gap:var(--s2xl)}
.tech{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2xl);align-items:center}
.tech:nth-child(even) .tech-media{order:2}
.tech-media img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line)}
.tech-badges{display:flex;gap:var(--s2xs);flex-wrap:wrap;margin-top:var(--ssm)}
.tech-badges b{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;font-size:.82rem;
  font-weight:600}
.tech-badges b span{display:block;font-size:.7rem;color:var(--txt-dim);font-weight:400}

/* ---------- Fil d'Ariane ---------- */
.crumb{font-size:.8rem;color:var(--txt-dim);padding-top:110px}
.crumb a:hover{color:var(--txt)}

/* ---------- Bouton flottant ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:150;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.35);
  transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;color:#fff}

/* ---------- Menu mobile ---------- */
.mmenu{position:fixed;inset:0;z-index:300;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
  transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;
  padding:22px 24px 40px}
.mmenu.open{transform:none}
.mmenu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s2xl)}
.mmenu-top img{height:28px;filter:brightness(0)}
.mmenu-close{font-size:30px;line-height:1;width:44px;height:44px}
.mmenu a.ml{font-size:1.6rem;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line-2)}
.mmenu .btn{margin-top:auto}

/* ---------- Révélation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
html.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .burger{display:grid}
  .nav{padding:8px 8px 8px 18px}
  .hero-grid{grid-template-columns:1fr;gap:var(--slg)}
  .report{max-width:420px}
  .split,.tech,.cta{grid-template-columns:1fr;gap:var(--slg)}
  .split.rev .split-media,.tech:nth-child(even) .tech-media{order:0}
  .cta-media{min-height:260px}
  .cta-body{padding:var(--sxl) var(--smd)}
  .pdp{grid-template-columns:1fr;gap:var(--slg)}
  .pdp-gallery{position:static}
  .cgrid,.tgrid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .trust-marks{margin-left:0;gap:var(--slg)}
}
@media (max-width:620px){
  .stats{grid-template-columns:1fr;gap:var(--slg)}
  .stats .st{border-left:0;border-top:1px solid var(--line-2);padding-top:var(--smd)}
  .stats .st:first-child{border-top:0;padding-top:0}
  .cgrid,.tgrid,.pgrid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .hero{min-height:88svh}
  .ctable{overflow-x:auto}
  .ctable table{min-width:560px}
}


/* =========================================================
   Îlots sombres — barre de navigation, hero, bandeaux marine,
   pied de page et menu mobile gardent le traitement nocturne.
   ========================================================= */
.hero,.band-navy,.footer,.mmenu,.header .nav{
  --ink:#050C15; --ink-2:#08121E;
  --txt:#EAF1F8; --txt-dim:#94A8BC;
  --brand:#2E8FE0; --cyan:#5CD2F5; --green:#3ECD8A;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  color:var(--txt);
}
.hero h1,.hero h2,.band-navy h1,.band-navy h2,.band-navy h3,.band-navy h4,
.footer h1,.footer h2,.footer h3,.footer h4,.mmenu a{color:var(--txt)}
.band-navy{background:linear-gradient(170deg,#06213E 0%,#04182F 100%)}
.section.band-navy .ccard,.section.band-navy .tcard,.section.band-navy .qcard{
  background:rgba(255,255,255,.03);border-color:var(--line)}
.section.band-navy .ccard p,.section.band-navy .tcard p{color:var(--txt-dim)}
.section.band-navy .ccard .nm,.section.band-navy .tcard .who b{color:var(--txt)}
.band-navy .stats b,.hero .stats b{color:#fff}
.band-navy .ctable,.band-navy .faq details,.band-navy .summary{background:rgba(255,255,255,.02)}

/* Barre de navigation */
.header .nav{background:rgba(8,18,30,.55)}
.header.scrolled .nav{background:rgba(5,12,21,.9);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.header .nav .brand img{filter:brightness(0) invert(1)}
.header .nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.header .burger{background:rgba(255,255,255,.07)}

/* Boutons sur fond sombre */
.hero .btn-primary,.band-navy .btn-primary,.footer .btn-primary,.mmenu .btn-primary{background:#fff;color:#0A1420}
.hero .btn-primary:hover,.band-navy .btn-primary:hover,.footer .btn-primary:hover{background:#DDEAF6}
.header .nav .btn-primary{background:#fff;color:#0A1420}
.header .nav .btn-primary:hover{background:#DDEAF6}
.hero .btn-ghost,.band-navy .btn-ghost,.footer .btn-ghost,.mmenu .btn-ghost{
  background:rgba(255,255,255,.07);color:var(--txt);border-color:var(--line)}
.hero .btn-ghost:hover,.band-navy .btn-ghost:hover,.footer .btn-ghost:hover{background:rgba(255,255,255,.14)}
.hero .btn-outline,.band-navy .btn-outline,.footer .btn-outline{border-color:rgba(255,255,255,.28);color:var(--txt)}
.hero .btn-outline:hover,.band-navy .btn-outline:hover{border-color:#fff}

/* Hero : carte rapport et bandeau de confiance */
.hero .bar{background:rgba(255,255,255,.09)}
.hero .trust-marks span{color:rgba(234,241,248,.55)}

/* Pied de page */
.footer{background:#030910}
.footer .foot-top img,.footer .wordmark img{filter:brightness(0) invert(1)}
.footer .news input{background:rgba(255,255,255,.05);color:var(--txt)}
.footer .disclaimer,.footer .foot-bottom{color:#5E7186}
.footer .wordmark{opacity:.09}

/* Menu mobile */
.mmenu{background:rgba(5,12,21,.98)}
.mmenu-top img{filter:brightness(0) invert(1)}

/* Formulaire sur fond sombre */
.band-navy .form input,.band-navy .form textarea{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--txt)}
.band-navy .form input:focus,.band-navy .form textarea:focus{background:rgba(255,255,255,.07);border-color:var(--brand)}
.band-navy .form input::placeholder,.band-navy .form textarea::placeholder{color:#5E7186}

/* Bloc CTA sans visuel : une seule colonne */
.cta:not(:has(.cta-media)){grid-template-columns:1fr}

/* Hero clair (variante) */
.hero.hero-light{
  --txt:#0A1420; --txt-dim:#5A6B7C;
  --brand:#1B7AC9; --cyan:#0E9BC9;
  --line:rgba(10,20,32,.12); --line-2:rgba(10,20,32,.07);
  border-radius:0;color:var(--txt);
}
.hero.hero-light h1,.hero.hero-light h2{color:var(--txt)}
.hero.hero-light::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.62) 34%,rgba(255,255,255,.82) 66%,#fff 100%),
    linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.62) 58%,rgba(255,255,255,.2) 100%)}
.hero.hero-light .btn-primary{background:#0B2A4A;color:#fff}
.hero.hero-light .btn-primary:hover{background:#123A63}
.hero.hero-light .btn-outline{border-color:rgba(10,20,32,.24);color:var(--txt)}
.hero.hero-light .btn-outline:hover{border-color:var(--txt-ink)}
.hero.hero-light .trust-marks span{color:rgba(10,20,32,.42)}
.hero.hero-light .report{background:rgba(255,255,255,.9);border-color:var(--line)}

/* ---------- En-tête incrusté ---------- */
.header{padding:0}
.header .nav{
  max-width:none;border-radius:0;border:0;border-bottom:1px solid rgba(255,255,255,.18);
  background:rgba(5,12,21,.30);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  padding:10px clamp(16px,4vw,44px);
}
.header.scrolled .nav{background:rgba(5,12,21,.72);box-shadow:none}
.header .nav .brand img{height:46px}
.hero.hero-light + *,.hero.hero-light{--header-on-light:1}
.header .nav .btn-primary{padding:11px 22px}
@media (max-width:1000px){.header .nav{padding:8px clamp(12px,4vw,20px)}.header .nav .brand img{height:38px}}

/* En-tête au-dessus d'un hero clair */
body:has(.hero.hero-light) .header .nav,body.pdp-page .header .nav{
  background:rgba(255,255,255,.30);border-bottom-color:rgba(10,20,32,.14);
  --txt:#0A1420; --txt-dim:#41525F;
}
body:has(.hero.hero-light) .header.scrolled .nav,body.pdp-page .header.scrolled .nav{background:rgba(255,255,255,.80)}
body:has(.hero.hero-light) .header .nav .brand img,body.pdp-page .header .nav .brand img{filter:brightness(0)}
body:has(.hero.hero-light) .header .nav-links a,body.pdp-page .header .nav-links a{color:#41525F}
body:has(.hero.hero-light) .header .nav-links a:hover,body.pdp-page .header .nav-links a:hover{color:#0A1420;background:rgba(10,20,32,.06)}
body:has(.hero.hero-light) .header .nav .btn-primary,body.pdp-page .header .nav .btn-primary{background:#0B2A4A;color:#fff}
body:has(.hero.hero-light) .header .burger,body.pdp-page .header .burger{background:rgba(10,20,32,.06);color:#0A1420}

/* CTA : le paragraphe occupe toute la largeur du bloc */
.cta-body .lead{max-width:none}

/* CTA : liste sur trois colonnes en desktop */
@media (min-width:1001px){
  .cta-list{grid-template-columns:repeat(3,1fr);gap:var(--smd)}
}

/* Liens de navigation en blanc sur l'en-tête sombre */
.header .nav-links a{color:#fff}
body:has(.hero.hero-light) .header .nav-links a,body.pdp-page .header .nav-links a{color:#0A1420}

/* CTA : bouton centré */
.cta-body>.btn{display:flex;width:fit-content;margin-inline:auto}

/* CTA : contenu centré */
.cta-body{text-align:center}
.cta-body .cta-list li{text-align:left}

/* Formulaire : bouton centré */
.form .btn{justify-self:center}

/* Pied de page : mention légale sur toute la largeur en desktop */
@media (min-width:1001px){
  .footer .disclaimer{max-width:none;width:100%}
}

/* Titres : même typographie sérif partout */
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;line-height:1.16}
h3{font-weight:500}
h4,h5{font-weight:600;letter-spacing:0}

/* ---------- Avis : carrousel ---------- */
.tslider{display:flex;align-items:center;gap:var(--sxs)}
.ttrack{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--ssm)*2)/3);
  gap:var(--ssm);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px;scrollbar-width:none}
.ttrack::-webkit-scrollbar{display:none}
.ttrack .tcard{scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--sxs)}
.tcard-top{display:flex;align-items:center;gap:var(--sxs)}
.tshot{width:56px;height:56px;flex:none;border-radius:12px;background:#EEF3F9;border:1px solid var(--line-ink);
  display:grid;place-items:center;padding:6px;overflow:hidden}
.tshot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tprod{display:block;font-size:.92rem;font-weight:600;color:var(--txt-ink)}
.pbadge{display:inline-block;margin-top:4px;font-size:.64rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-deep);background:#E6F1FB;border-radius:99px;padding:4px 9px}
.tmeta{margin-top:auto;padding-top:var(--sxs);border-top:1px solid var(--line-ink)}
.tmeta b{display:block;font-size:.82rem;color:var(--txt-ink)}
.tmeta span{font-size:.72rem;color:var(--txt-ink-dim)}
.tnav{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line-ink);background:#fff;
  display:grid;place-items:center;color:var(--txt-ink);transition:background .2s,transform .2s}
.tnav:hover{background:#EEF3F9;transform:translateY(-2px)}
.tnav svg{width:18px;height:18px}
.tdots{display:flex;justify-content:center;gap:7px;margin-top:var(--smd)}
.tdots button{width:7px;height:7px;border-radius:50%;background:rgba(10,20,32,.20);transition:background .2s,width .2s}
.tdots button[aria-current="true"]{width:22px;border-radius:99px;background:var(--brand-deep)}
@media (max-width:1000px){.ttrack{grid-auto-columns:calc((100% - var(--ssm))/2)}}
@media (max-width:620px){.ttrack{grid-auto-columns:88%}.tnav{display:none}}

/* Badges de certification à côté du titre produit */
.ptitle{display:flex;align-items:center;justify-content:space-between;gap:var(--s2xs)}
.ptitle h3{margin:0}
.certs{display:flex;gap:5px;flex:none}
.certs b{font-size:.6rem;font-weight:700;letter-spacing:.08em;line-height:1;padding:5px 8px;border-radius:99px;
  border:1px solid var(--line);color:var(--txt-dim);white-space:nowrap}
.band-paper .certs b,.pcard .certs b{border-color:var(--line-ink);color:var(--txt-ink-dim)}
.band-navy .certs b{border-color:var(--line);color:var(--txt-dim)}

/* Cartes produit : titre plus grand et bouton principal en bleu navy */
.pcard h3{font-size:calc(1.08rem + 8px)}
.btn-brand{background:#0B2A4A;color:#fff}
.btn-brand:hover{background:#123A63}

/* Cartes produit : cadre visuel de taille identique partout */
.pcard .shot{aspect-ratio:auto;height:260px;padding:var(--ssm)}
.pcard .shot img{max-width:78%;max-height:78%;width:auto;height:auto;object-fit:contain}
@media (max-width:620px){.pcard .shot{height:220px}}
.pcard .shot{overflow:hidden}
.pcard .shot img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;padding:6%}

/* Hero : visuel centré, couvrant, sans déformation */
.hero-media{overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center center}

/* CTA sans visuel : plus de cadre, seul le texte reste */
.cta:not(:has(.cta-media)){border:0;border-radius:0;overflow:visible}
.cta:not(:has(.cta-media)) .cta-body{background:none;padding:0}

/* Cartes d'accès rapide : visuels et libellés agrandis */
.qcard img{width:77px;height:62px}
.qcard b{font-size:calc(.9rem + 5px)}

/* Cartes produit : visuel entier, centré, jamais rogné */
.pcard .shot{position:relative;display:block;height:260px;padding:0}
.pcard .shot img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;max-height:none;object-fit:contain;padding:8%}
@media (max-width:620px){.pcard .shot{height:220px}}

/* En-tête de la gamme : pleine largeur, texte sur une seule colonne */
#gamme .head-left,#gamme .head-left .lead{max-width:none}

/* Hero clair : halos radiaux en bas et en haut à gauche, l'image se révèle vers la droite */
.hero.hero-light::after{
  background:
    radial-gradient(105% 90% at 2% 6%,
      rgba(255,255,255,.87) 0%,
      rgba(255,255,255,.75) 28%,
      rgba(255,255,255,.47) 48%,
      rgba(255,255,255,.17) 66%,
      rgba(255,255,255,0) 86%),
    radial-gradient(120% 105% at 2% 88%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.87) 26%,
      rgba(255,255,255,.67) 46%,
      rgba(255,255,255,.31) 64%,
      rgba(255,255,255,.05) 80%,
      rgba(255,255,255,0) 92%),
    linear-gradient(90deg,rgba(255,255,255,.29) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 70%)}

/* Hero sans arrondi bas */
.hero.hero-flat{border-radius:0}

/* Bandeau de chiffres sous un hero sombre : continuité avec le voile du hero */
.hero:not(.hero-light) + .section.band-navy{
  background:linear-gradient(180deg,#050C15 0%,#06213E 58%,#04182F 100%)}

/* Mobile : bouton de menu calé à droite */
@media (max-width:1000px){
  .header .nav-cta{margin-left:auto}
}

/* Mobile : les deux boutons du hero restent sur une ligne */
@media (max-width:620px){
  .hero-actions{flex-wrap:nowrap;gap:var(--s2xs)}
  .hero-actions .btn-lg{padding:13px 16px;font-size:.86rem;flex:1 1 auto;min-width:0}
  .hero-actions .btn-lg svg{flex:none}
}

/* Logo agrandi de 20 % */
.header .nav .brand img{height:55px}
@media (max-width:1000px){.header .nav .brand img{height:46px}}

/* Thème clair : en-tête bleu navy */
body:has(.hero.hero-light) .header .nav,body.pdp-page .header .nav{
  background:rgba(11,42,74,.88);border-bottom-color:rgba(255,255,255,.16);
  --txt:#EAF1F8; --txt-dim:#B9CBDD;
}
body:has(.hero.hero-light) .header.scrolled .nav,body.pdp-page .header.scrolled .nav{background:rgba(11,42,74,.97)}
body:has(.hero.hero-light) .header .nav .brand img,body.pdp-page .header .nav .brand img{filter:brightness(0) invert(1)}
body:has(.hero.hero-light) .header .nav-links a,body.pdp-page .header .nav-links a{color:#fff}
body:has(.hero.hero-light) .header .nav-links a:hover,body.pdp-page .header .nav-links a:hover{color:#fff;background:rgba(255,255,255,.10)}
body:has(.hero.hero-light) .header .nav .btn-primary,body.pdp-page .header .nav .btn-primary{background:#fff;color:#0B2A4A}
body:has(.hero.hero-light) .header .nav .btn-primary:hover,body.pdp-page .header .nav .btn-primary:hover{background:#DDEAF6}
body:has(.hero.hero-light) .header .burger,body.pdp-page .header .burger{background:rgba(255,255,255,.12);color:#fff}

/* Bandeau de chiffres sous le hero : marges verticales réduites de 35 % */
.hero + .section.tight{padding-block:calc(var(--section)*.3575)}

/* Thème clair : en-tête transparent en haut, bleu navy au défilement */
body:has(.hero.hero-light) .header .nav,body.pdp-page .header .nav{
  background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  --txt:#0A1420; --txt-dim:#41525F;
}
body:has(.hero.hero-light) .header .nav .brand img,body.pdp-page .header .nav .brand img{filter:brightness(0)}
body:has(.hero.hero-light) .header .nav-links a,body.pdp-page .header .nav-links a{color:#0A1420}
body:has(.hero.hero-light) .header .nav-links a:hover,body.pdp-page .header .nav-links a:hover{color:#0A1420;background:rgba(10,20,32,.06)}
body:has(.hero.hero-light) .header .nav .btn-primary,body.pdp-page .header .nav .btn-primary{background:#0B2A4A;color:#fff}
body:has(.hero.hero-light) .header .nav .btn-primary:hover,body.pdp-page .header .nav .btn-primary:hover{background:#123A63}
body:has(.hero.hero-light) .header .burger,body.pdp-page .header .burger{background:rgba(10,20,32,.06);color:#0A1420}

body:has(.hero.hero-light) .header.scrolled .nav,body.pdp-page .header.scrolled .nav{
  background:rgba(11,42,74,.97);border-bottom-color:rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  --txt:#EAF1F8; --txt-dim:#B9CBDD;
}
body:has(.hero.hero-light) .header.scrolled .nav .brand img,body.pdp-page .header.scrolled .nav .brand img{filter:brightness(0) invert(1)}
body:has(.hero.hero-light) .header.scrolled .nav-links a,body.pdp-page .header.scrolled .nav-links a{color:#fff}
body:has(.hero.hero-light) .header.scrolled .nav-links a:hover,body.pdp-page .header.scrolled .nav-links a:hover{background:rgba(255,255,255,.10)}
body:has(.hero.hero-light) .header.scrolled .nav .btn-primary,body.pdp-page .header.scrolled .nav .btn-primary{background:#fff;color:#0B2A4A}
body:has(.hero.hero-light) .header.scrolled .nav .btn-primary:hover,body.pdp-page .header.scrolled .nav .btn-primary:hover{background:#DDEAF6}
body:has(.hero.hero-light) .header.scrolled .burger,body.pdp-page .header.scrolled .burger{background:rgba(255,255,255,.12);color:#fff}

/* ---------- Assistant de conseil ---------- */
.wa{background:#0B2A4A;box-shadow:0 10px 24px rgba(10,20,32,.18)}
.wa:hover{background:#123A63}
.wa svg{width:26px;height:26px;color:#fff}

.cb-panel{position:fixed;right:20px;bottom:86px;z-index:160;width:min(370px,calc(100vw - 40px));
  max-height:min(560px,calc(100vh - 130px));display:flex;flex-direction:column;overflow:hidden;
  background:#fff;color:var(--txt-ink);border:1px solid var(--line-ink);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(10,20,32,.22);
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cb-panel.open{opacity:1;transform:none}
.cb-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sxs);
  padding:14px 16px;background:#0B2A4A;color:#fff}
.cb-top b{display:block;font-size:.95rem;font-family:var(--sans);font-weight:600}
.cb-top span{font-size:.74rem;color:#B9CBDD}
.cb-close{font-size:26px;line-height:1;width:32px;height:32px;color:#fff;opacity:.8}
.cb-close:hover{opacity:1}
.cb-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#F7FAFD}
.cb-msg{max-width:88%;font-size:.86rem;line-height:1.55;padding:11px 14px;border-radius:14px}
.cb-bot{align-self:flex-start;background:#fff;border:1px solid var(--line-ink);color:var(--txt-ink)}
.cb-user{align-self:flex-end;background:#0B2A4A;color:#fff}
.cb-msg a{color:var(--brand-deep);text-decoration:underline}
.cb-msg hr{border:0;border-top:1px solid var(--line-ink);margin:9px 0}
.cb-tag{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:#E6F1FB;color:var(--brand-deep);border-radius:99px;padding:3px 8px;margin-left:4px}
.cb-chips{display:flex;flex-wrap:wrap;gap:6px}
.cb-chips button{font-size:.76rem;padding:7px 12px;border-radius:99px;background:#fff;
  border:1px solid var(--line-ink);color:var(--txt-ink);transition:background .2s,border-color .2s}
.cb-chips button:hover{background:#EEF3F9;border-color:#C9D6E2}
.cb-cta{display:flex}
.cb-cta .btn{font-size:.84rem;padding:11px 18px}
.cb-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-ink);background:#fff}
.cb-form input{flex:1;font:inherit;font-size:.86rem;color:var(--txt-ink);background:#F7FAFD;
  border:1px solid var(--line-ink);border-radius:99px;padding:10px 14px}
.cb-form input:focus{outline:none;border-color:var(--brand)}
.cb-form button{width:38px;height:38px;flex:none;border-radius:50%;background:#0B2A4A;color:#fff;
  display:grid;place-items:center}
.cb-form button:hover{background:#123A63}
.cb-form svg{width:16px;height:16px}
@media (max-width:620px){
  .cb-panel{right:12px;left:12px;width:auto;bottom:80px;max-height:calc(100vh - 110px)}
}

/* ---------- Sélecteur de langue ---------- */
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  border:1px solid var(--line);margin-inline-end:var(--s2xs)}
.lang-switch button{font-size:.76rem;font-weight:700;letter-spacing:.04em;line-height:1;
  padding:9px 12px;border-radius:999px;color:var(--txt-dim);transition:background .2s,color .2s}
.lang-switch button[aria-current="true"]{background:#fff;color:#0A1420}
.lang-switch button:hover{color:var(--txt)}
body:has(.hero.hero-light) .header:not(.scrolled) .lang-switch button[aria-current="true"],body.pdp-page .header:not(.scrolled) .lang-switch button[aria-current="true"]{background:#0B2A4A;color:#fff}
@media (max-width:1000px){.lang-switch button{padding:8px 10px}}

/* ---------- Version arabe (RTL) ---------- */
html.ar body{font-family:"Noto Kufi Arabic","Geeza Pro",Tahoma,sans-serif}
html.ar h1,html.ar h2,html.ar h3,html.ar h4,html.ar h5,html.ar .serif{
  font-family:"Noto Kufi Arabic","Geeza Pro",Tahoma,sans-serif;font-weight:700;letter-spacing:0;line-height:1.4}
html.ar .kicker,html.ar .certs b,html.ar .pbadge,html.ar .trust-marks span{letter-spacing:0}
html.ar .lead,html.ar p,html.ar li{line-height:1.85}
html.ar .head-left,html.ar .hero .lead,html.ar .split-body,html.ar .pcard .body{text-align:right}
html.ar .hero h1{max-width:20ch}
html.ar .hero .lead{max-width:none;width:100%}
html.ar .cta-body,html.ar .head{text-align:center}
html.ar .cta-body .cta-list li{text-align:right}
html.ar .specs th,html.ar .specs td,html.ar .ctable th,html.ar .ctable td{text-align:right}
html.ar .btn svg,html.ar .qcard .arrow svg,html.ar .tnav svg{transform:scaleX(-1)}
html.ar .lang-switch button{letter-spacing:0}
html.ar .foot-bottom,html.ar .trust{direction:rtl}
.lang-switch button{color:var(--txt);opacity:.6}
.lang-switch button[aria-current="true"]{opacity:1}
.header .nav .lang-switch{border-color:rgba(255,255,255,.28)}
body:has(.hero.hero-light) .header:not(.scrolled) .nav .lang-switch,body.pdp-page .header:not(.scrolled) .nav .lang-switch{border-color:rgba(10,20,32,.22)}

/* ---------- Finitions mobile ---------- */
@media (max-width:620px){
  /* Respiration verticale resserrée */
  :root{--section:clamp(48px,11vw,72px)}
  .section.tight,.hero + .section.tight{padding-block:calc(var(--section)*.6)}
  .head,.head-left{margin-bottom:var(--slg)}

  /* Lecture */
  .lead{font-size:1rem;line-height:1.6}
  .hero .lead{max-width:34ch}
  h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  h2{font-size:clamp(1.7rem,7vw,2.2rem)}

  /* Tableau comparatif : critère toujours visible */
  .ctable table{min-width:520px}
  .ctable th:first-child,.ctable td:first-child{position:sticky;left:0;z-index:2;
    background:#08192C;min-width:132px}
  .band-paper .ctable th:first-child,.band-paper .ctable td:first-child{background:#fff}
  .ctable th,.ctable td{padding:13px 14px;font-size:.85rem}

  /* Pied de page sur deux colonnes */
  .foot-cols{grid-template-columns:1fr 1fr;gap:var(--smd) var(--sxs)}
  .foot-bottom{gap:var(--s2xs)}
  .footer{padding-bottom:76px}

  /* Le bouton flottant ne masque plus les actions */
  .pcard .acts .btn,.form .btn{min-height:46px}
  .wa{right:14px;bottom:14px;width:50px;height:50px}

  /* Cartes d'accès rapide et grilles */
  .quick{gap:var(--s2xs)}
  .qcard{padding:10px 14px 10px 10px}
  .cta-list{gap:var(--sxs)}
  .split-media.frame{padding:var(--ssm)}
  .report{padding:var(--ssm)}
}
@media (max-width:1000px){
  /* Les grilles forcées en ligne restent responsives */
  .cgrid[style*="repeat(3"]{grid-template-columns:1fr 1fr!important}
}
@media (max-width:620px){
  .cgrid[style*="repeat(3"]{grid-template-columns:1fr!important}
  .pdp{padding-top:96px}
  .crumb{padding-top:92px}
}

/* RTL : bouton flottant et panneau du chat côté gauche */
html.ar .wa{right:auto;left:20px}
html.ar .cb-panel{right:auto;left:20px}
@media (max-width:620px){
  html.ar .wa{left:14px}
  html.ar .cb-panel{left:12px;right:12px}
}

/* =========================================================
   Système typographique — styles secondaires et accessibilité
   ========================================================= */

/* Textes secondaires : tailles et interlignes normalisés */
.kicker{font-size:var(--t-xs);font-weight:var(--w-bold);letter-spacing:.18em;line-height:1.4}
.pcard p,.ccard p,.tcard p,.benefit p,.cta-list span,.trust p{font-size:var(--t-sm);line-height:var(--lh-loose)}
.fineprint,.disclaimer,.form .legal,.summary .note{font-size:var(--t-xs);line-height:var(--lh-loose)}
.foot-cols a,.foot-bottom{font-size:var(--t-sm)}
.specs th,.specs td,.ctable th,.ctable td{font-size:var(--t-sm);line-height:1.5}

/* Liens de contenu : soulignement lisible */
.cb-msg a,.form .legal a,.disclaimer a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
a:not(.btn):not(.qcard):not(.pcard a):focus-visible{text-decoration:underline}

/* Chiffres alignés partout où ils se comparent */
.stats b,.spec b,.summary .r b,.bar-row .l span:last-child,.gauge .val{font-variant-numeric:tabular-nums}

/* Mesure de lecture : jamais plus de ~68 caractères */
.faq .ans,.split-body p,.tech p.lead,.cta-body .lead{max-width:var(--measure)}

/* Césure des mots longs sur petits écrans */
@media (max-width:620px){
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}
  body{font-size:var(--t-md)}
  .kicker{letter-spacing:.14em}
}

/* Arabe : pas de césure, interligne plus généreux, chiffres latins */
html.ar h1,html.ar h2,html.ar h3{hyphens:none;-webkit-hyphens:none;text-wrap:normal;letter-spacing:0}
html.ar .lead,html.ar p,html.ar li,html.ar .faq .ans{line-height:1.85}
html.ar .kicker{letter-spacing:.08em;font-size:var(--t-sm)}

/* Respect des réglages système : jamais de texte figé sous 14 px */
.certs b,.pbadge,.tmeta span,.tcard .who span{font-size:var(--t-xs)}

/* Contrastes portés au niveau AA (4.5:1) pour les petits textes */
.kicker{color:var(--brand-deep)}
.band-navy .kicker,.hero .kicker,.footer .kicker,.mmenu .kicker{color:#5CD2F5}
.footer .disclaimer,.footer .foot-bottom{color:#8FA6BC}

/* Fiche produit : visuels toujours contenus (même correctif que les cartes) */
.pdp-main{position:relative}
.pdp-main img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;padding:9%}
.pdp-thumbs button{position:relative;overflow:hidden}
.pdp-thumbs img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;padding:12%}

/* Fiche produit : contenu du pack sur une colonne */
.pdp-info .summary .cta-list{grid-template-columns:1fr;gap:var(--sxs)}
.pdp-info .summary .cta-list li{border-top:1px solid var(--line-2);padding-top:var(--sxs);font-size:var(--t-sm)}

/* ---------- Bandeau d'informations (fiches produit) ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:190;background:#0B2A4A;color:#EAF1F8}
.topbar-inner{max-width:var(--maxw);margin-inline:auto;padding:9px clamp(16px,4vw,44px);
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,38px);
  font-size:var(--t-xs);letter-spacing:.02em;line-height:1.4;white-space:nowrap}
.topbar-inner span{position:relative;color:#C8D8E8}
.topbar-inner span+span::before{content:"";position:absolute;inset-inline-start:calc(clamp(14px,3vw,38px)/-2);
  top:50%;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.35);transform:translateY(-50%)}
body.pdp-page .header{top:38px;transition:top .28s var(--ease),padding .3s var(--ease)}
body.pdp-page .header.scrolled{top:0}
body.pdp-page .pdp{padding-top:150px}
body.pdp-page .crumb{padding-top:140px}
@media (max-width:1000px){
  .topbar-inner{gap:18px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .topbar-inner::-webkit-scrollbar{display:none}
}
@media (max-width:620px){
  body.pdp-page .pdp{padding-top:120px}
  body.pdp-page .crumb{padding-top:112px}
}

/* ---------- Mobile arabe : menu + langue calés à gauche ---------- */
@media (max-width:1000px){
  html.ar .header .nav-cta{margin-left:0;margin-right:auto}
}

/* ---------- Mobile : bandeau de labels en défilement lent (droite -> gauche) ---------- */
@media (max-width:620px){
  .trust-marks{--tm-gap:34px;
    width:100%;flex-wrap:nowrap;overflow:hidden;gap:var(--tm-gap);direction:ltr;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .trust-marks .tm-group{flex:0 0 auto;flex-wrap:nowrap;gap:var(--tm-gap);
    animation:tm-scroll 26s linear infinite;will-change:transform}
  .trust-marks .tm-group + .tm-group{display:flex}
  .trust-marks .tm-group span{white-space:nowrap}
}
@keyframes tm-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% - var(--tm-gap)))}
}
@media (prefers-reduced-motion:reduce){
  .trust-marks{overflow:visible;flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}
  .trust-marks .tm-group{animation:none;flex-wrap:wrap}
  .trust-marks .tm-group + .tm-group{display:none}
}

/* ---------- Cartes d'accès rapide : libellé sur une seule ligne ---------- */
.qcard{container-type:inline-size;gap:10px}
.qcard b{white-space:nowrap;font-size:clamp(11px,4.5cqi,18px);line-height:1.2;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.qcard .arrow{flex:none;margin-inline-start:auto}
html.ar .qcard b{font-size:clamp(12px,5cqi,19px)}
@media (max-width:400px){.qcard img{width:64px;height:54px}}

/* ---------- Mobile : hero entier, marge haute réduite, bas en dégradé ---------- */
@media (max-width:620px){
  .hero-inner{padding-block:96px var(--slg)}
  .hero h1{font-size:calc(var(--d-xl) - 4px);max-width:none}
  .hero .lead{max-width:none}

  /* La photo se montre en entier, calée en haut, et se fond dans le dégradé */
  .hero-media{background:linear-gradient(180deg,#0C1E31 0%,#08182B 34%,#050C15 100%)}
  .hero-media img{position:absolute;top:20px;left:-8%;right:auto;transform:none;
    width:140%;max-width:none;height:auto;object-fit:contain;object-position:top center;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 8%,#000 84%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 8%,#000 84%,rgba(0,0,0,0) 100%)}
  /* Lisibilité du texte posé sur la bande photo */
  .hero:not(.hero-light) .rating span:not(.stars){color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(5,12,21,.9)}

  .hero:not(.hero-light) .rating .stars svg{filter:drop-shadow(0 1px 3px rgba(5,12,21,.45))}
  .hero:not(.hero-light) h1{text-shadow:0 2px 20px rgba(5,12,21,.5)}
  /* Voile allégé sur la bande photo, puis fondu vers le dégradé */
  .hero:not(.hero-light)::after{
    background:linear-gradient(180deg,
      rgba(5,12,21,.40) 0px,
      rgba(5,12,21,.26) 130px,
      rgba(5,12,21,.42) 250px,
      rgba(5,12,21,.72) 320px,
      rgba(5,12,21,.93) 385px,
      rgba(5,12,21,.96) 100%)}
}

/* ---------- Mobile : dégradé haut derrière l'en-tête ---------- */
@media (max-width:620px){
  .header::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;
    background:linear-gradient(180deg,rgba(5,12,21,.92) 0%,rgba(5,12,21,.62) 42%,rgba(5,12,21,.28) 72%,rgba(5,12,21,0) 100%)}
  .header .nav{position:relative;z-index:1}
  .header:not(.scrolled) .nav{background:transparent;border-bottom-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  /* En-tête sombre sur hero clair : le dégradé doit être clair, sinon logo et menu disparaissent */
  body:has(.hero.hero-light) .header::before,body.pdp-page .header::before{
    background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.34) 72%,rgba(255,255,255,0) 100%)}
}

/* Étoiles du hero sombre : or plus clair pour ressortir sur la photo */
.hero:not(.hero-light) .rating .stars{color:#FFD470}

/* Mobile : photo à droite du texte en français, à gauche en arabe */
@media (max-width:620px){
  html.ar .hero-media img{left:-42%}
  /* Titre arabe du hero : un cran plus petit et moins gras */
  html.ar .hero h1{font-size:calc(var(--d-xl) - 10px);font-weight:650}
}

/* Sélecteur de langue : la lettre arabe était trop petite pour être lisible */
.lang-switch button{display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding-top:0;padding-bottom:0}
.lang-switch button[data-lang="ar"]{font-size:1.05rem;line-height:1;
  font-family:"Noto Kufi Arabic","Geeza Pro",Tahoma,sans-serif}

/* Kicker sur hero clair : bleu navy plutôt que bleu ciel */
.hero.hero-light .kicker{color:#0B2A4A}

/* ---------- Hero clair : texte d'accroche en navy ---------- */
.hero.hero-light .lead{color:#0B2A4A}

/* ---------- Mobile : hero clair, photo entière + dégradé clair ---------- */
@media (max-width:620px){
  .hero.hero-light .hero-media{
    background:linear-gradient(180deg,#FFFFFF 0%,#F2F6FA 52%,#E8EFF7 100%)}
  .hero.hero-light .hero-media img{left:50%;right:auto;transform:translateX(-50%);width:100%}
  .hero.hero-light::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.52) 0px,
      rgba(255,255,255,.38) 140px,
      rgba(255,255,255,.60) 235px,
      rgba(255,255,255,.88) 300px,
      rgba(255,255,255,1) 380px)}
}

/* ---------- Mobile FR : le texte démarre sous la photo, qui reste visible ---------- */
@media (max-width:620px){
  html:not(.ar) .hero:not(.hero-light) .hero-inner{padding-top:240px}
}

/* ---------- Sommaire des catégories ---------- */
.cat-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sxs)}
.cat-link{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:#fff;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.cat-link:hover{border-color:rgba(11,42,74,.35);transform:translateY(-3px);box-shadow:0 14px 32px rgba(10,20,32,.08)}
.cat-link b{font-size:1.05rem;font-weight:600;color:var(--txt-ink)}
.cat-link span{font-size:var(--t-xs);color:var(--txt-ink-dim)}
.band-navy .cat-link{background:rgba(255,255,255,.04);border-color:var(--line)}
.band-navy .cat-link b{color:var(--txt)}
.band-navy .cat-link span{color:var(--txt-dim)}
@media (max-width:1000px){.cat-nav{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cat-nav{grid-template-columns:1fr}.cat-link{padding:14px 16px}}

/* Kicker en bleu navy */
.kicker{color:#0B2A4A}
.band-navy .kicker,.hero .kicker,.footer .kicker,.mmenu .kicker{color:#5CD2F5}

/* En-têtes des sections « Solutions par problème » : texte sur toute la largeur */
[id^="cat-"] .head-left,[id^="cat-"] .head-left .lead{max-width:none}

/* Les attributs width/height des <img> réservent la place pour éviter le
   décalage de mise en page ; ils ne doivent jamais imposer la hauteur là où
   le CSS pilote déjà la largeur. */
.tech-media img,.split-media img,.wordmark img{height:auto}

/* ---------- Revendeurs : carte et liste ---------- */
.rev-wrap{display:grid;grid-template-columns:400px 1fr;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;min-height:620px;background:#fff}
.rev-panneau{display:flex;flex-direction:column;border-inline-end:1px solid var(--line);
  background:var(--bg-soft,#F5F7FA);max-height:78vh}
.rev-filtre{padding:var(--smd);border-bottom:1px solid var(--line);background:#fff}
.rev-filtre label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-dim);margin-bottom:8px}
.rev-filtre select{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;font-family:inherit;font-size:.95rem;color:var(--txt);background:#fff;cursor:pointer}
.rev-compteur{padding:10px var(--smd);font-size:.82rem;color:var(--txt-dim);
  border-bottom:1px solid var(--line)}
.rev-scroll{overflow-y:auto;flex:1}
.rev-groupe>summary{list-style:none;cursor:pointer;padding:12px var(--smd);font-weight:700;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#0B2A4A;
  background:#EDF3FA;display:flex;justify-content:space-between;align-items:center}
.rev-groupe>summary::-webkit-details-marker{display:none}
.rev-item{border-bottom:1px solid var(--line)}
.rev-item>summary{list-style:none;cursor:pointer;padding:12px var(--smd);display:flex;
  align-items:center;gap:12px;transition:background .15s}
.rev-item>summary::-webkit-details-marker{display:none}
.rev-item>summary:hover,.rev-item.actif>summary{background:#E8F0FE}
.rev-pin{flex:0 0 26px;height:26px;border-radius:50%;background:#0B2A4A;color:#fff;
  display:grid;place-items:center;font-size:.7rem;font-weight:800}
.rev-nom{display:block;font-weight:700;font-size:.92rem;line-height:1.25}
.rev-ville{display:block;font-size:.74rem;color:var(--txt-dim)}
.rev-corps{padding:0 var(--smd) var(--smd) calc(var(--smd) + 38px);font-size:.86rem;color:var(--txt-dim)}
html[dir="rtl"] .rev-corps{padding:0 calc(var(--smd) + 38px) var(--smd) var(--smd)}
.rev-addr{display:block;margin-bottom:10px}
.rev-tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#0B2A4A;
  text-decoration:none;padding:7px 14px;border:1px solid #CFE0F2;border-radius:999px;
  background:#fff;font-size:.9rem}
.rev-tel:hover{background:#0B2A4A;color:#fff;border-color:#0B2A4A}
.rev-tel svg{width:15px;height:15px}
#carteRevendeurs{width:100%;height:100%;min-height:620px;z-index:0}
.rev-pin-map{background:#0B2A4A;color:#fff;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.35);border:3px solid #fff;font-weight:800;font-size:1rem}
.rev-pop-ville{font-weight:800;font-size:1.02rem}
.rev-pop-nb{font-size:.76rem;color:#6B7280;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.rev-pop-item{margin-top:6px;font-size:.88rem}
.leaflet-popup-content{font-family:inherit;min-width:190px}
@media (max-width:860px){
  .rev-wrap{grid-template-columns:1fr}
  .rev-panneau{border-inline-end:0;border-bottom:1px solid var(--line);max-height:none}
  #carteRevendeurs{min-height:400px;height:400px;order:-1}
}