/* ==========================================================================
   HVAC PROCESS — feuille de style
   Couleurs relevées au pixel dans le logo :
     rouge #E63140 · bleu #10519F · gris #333335
   Titres Poppins (capitales) · texte IBM Plex Sans · chiffres IBM Plex Mono
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- couleurs du logo, à l'identique --- */
  --rouge:      #E63140;
  --bleu:       #10519F;
  --encre:      #333335;

  /* --- déclinaisons --- */
  --rouge-fonce:#C21F2C;
  --rouge-pale: #FDECEE;
  --bleu-fonce: #0A3872;
  --bleu-pale:  #E9F0FA;
  --bleu-vif:   #1B6BC9;

  --blanc:      #FFFFFF;
  --nuage:      #F4F7FC;
  --gris:       #6A7586;
  --gris-clair: #9AA5B6;
  --ligne:      #DEE6F1;

  --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(16px, 5vw, 60px);
  --pill: 999px;
  --r: 16px;
  --r-s: 10px;

  --grid-bleu:
    repeating-linear-gradient(0deg, rgba(16,81,159,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(16,81,159,.05) 0 1px, transparent 1px 46px);
  --grid-blanc:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 46px);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--blanc); color:var(--encre);
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img, video, svg{ max-width:100%; display:block; }
/* garde-fou : sans ça, l'attribut height du HTML étire l'image quand la largeur est fluide */
:where(img[width][height]){ height:auto; }
a{ color:inherit; }
p{ margin:0; }

h1,h2,h3,h4{ font-family:var(--display); margin:0; text-wrap:balance; }
h1,h2{
  text-transform:uppercase; font-weight:800; line-height:1.02; letter-spacing:-.015em;
}
h1{ font-size:clamp(2.35rem, 5.8vw, 4.6rem); }
h2{ font-size:clamp(1.85rem, 4.2vw, 3.15rem); }
h3{ font-size:clamp(1.08rem, 1.8vw, 1.3rem); font-weight:700; line-height:1.2; letter-spacing:-.01em; }
.rouge{ color:var(--rouge); }
.bleu{ color:var(--bleu); }

::selection{ background:var(--rouge); color:#fff; }
:focus-visible{ outline:3px solid var(--rouge); outline-offset:3px; border-radius:4px; }

/* ---------- structure ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.band{ position:relative; padding-block:clamp(62px, 8.5vw, 118px); background:var(--blanc); }
.band--nuage{ background:var(--nuage); }
.band--pale{ background:var(--bleu-pale); }
.band--nuage::before, .band--pale::before{
  content:""; position:absolute; inset:0; background-image:var(--grid-bleu); pointer-events:none;
}
.band--bleu{
  color:#fff;
  background:linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 62%, #06264F 100%);
}
.band--bleu::before{ content:""; position:absolute; inset:0; background-image:var(--grid-blanc); pointer-events:none; }
.band > .wrap{ position:relative; }
.band--tight{ padding-block:clamp(44px, 5.5vw, 76px); }

.band--bleu h2, .band--bleu h3{ color:#fff; }
.band--bleu .rouge{ color:#FF8A93; }

.lead{ font-size:clamp(1.04rem, 1.5vw, 1.2rem); color:var(--gris); max-width:64ch; }
.band--bleu .lead{ color:rgba(255,255,255,.84); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rouge);
  background:var(--rouge-pale); padding:.44rem .95rem; border-radius:var(--pill);
  margin-bottom:1.3rem;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rouge); }
.band--bleu .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.band--bleu .eyebrow::before{ background:#FF8A93; }

.sec-head{ max-width:74ch; margin-bottom:clamp(30px, 4vw, 54px); }
.sec-head p{ margin-top:1.1rem; }

/* ---------- boutons en pilule ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--display); font-weight:700; font-size:.92rem;
  letter-spacing:.02em; text-transform:uppercase;
  padding:1rem 2rem; border-radius:var(--pill);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn--rouge{ background:var(--rouge); color:#fff; border-color:var(--rouge); box-shadow:0 10px 26px rgba(230,49,64,.3); }
.btn--rouge:hover{ background:var(--rouge-fonce); border-color:var(--rouge-fonce); transform:translateY(-2px); box-shadow:0 14px 32px rgba(230,49,64,.4); }
.btn--bleu{ background:var(--bleu); color:#fff; border-color:var(--bleu); box-shadow:0 10px 26px rgba(16,81,159,.26); }
.btn--bleu:hover{ background:var(--bleu-fonce); border-color:var(--bleu-fonce); transform:translateY(-2px); }
.btn--ligne{ background:transparent; color:var(--bleu); border-color:var(--ligne); }
.btn--ligne:hover{ border-color:var(--bleu); transform:translateY(-2px); }
.btn--blanc{ background:#fff; color:var(--bleu); border-color:#fff; }
.btn--blanc:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.btn--fantome{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--fantome:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn--wide{ width:100%; }
.btn--sm{ padding:.62rem 1.25rem; font-size:.78rem; }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* ---------- en-tête ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ligne);
}
.topbar__in{ display:flex; align-items:center; gap:1.3rem; min-height:82px; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
/* emplacement réservé au logo : remplace assets/img/logo.png par ton fichier.
   Hauteur fixée à 52 px, largeur libre jusqu'à 280 px. */
.brand__logo{ height:52px; width:auto; max-width:280px; object-fit:contain; }
.foot .brand__logo{ height:58px; }
@media (max-width: 520px){ .brand__logo{ height:42px; max-width:190px; } }
.brand__txt{ font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em; color:var(--encre); line-height:1.1; }
.brand__txt small{
  display:block; font-family:var(--body); font-size:.62rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bleu); margin-top:3px;
}
.nav{ display:flex; align-items:center; gap:1.75rem; }
.nav a{
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  color:var(--encre); text-decoration:none; font-size:.82rem; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:.42rem; transition:color .15s;
}
.nav a::before{
  content:""; width:6px; height:6px; border-radius:50%; background:transparent; transition:background .15s;
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--bleu); }
.nav a:hover::before, .nav a[aria-current="page"]::before{ background:var(--rouge); }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--ligne); background:#fff;
  border-radius:var(--pill); cursor:pointer; padding:0; position:relative;
}
.burger span{ position:absolute; left:12px; right:12px; height:2px; background:var(--encre); transition:.2s; }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px){
  .burger{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--ligne);
    padding:.5rem var(--gut) 1.4rem; box-shadow:0 18px 40px rgba(16,81,159,.10);
  }
  .nav a{ padding:.95rem 0; border-bottom:1px solid var(--ligne); font-size:.9rem; }
  .topbar .btn{ display:none; }
}

/* ---------- héros ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--blanc);
  padding-block:clamp(48px, 7vw, 92px);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 90% at 88% 22%, rgba(16,81,159,.10) 0%, transparent 62%),
    radial-gradient(48% 70% at 6% 88%, rgba(230,49,64,.07) 0%, transparent 60%),
    var(--grid-bleu);
}
.hero__in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.5vw,62px); align-items:center;
}
.hero h1{ color:var(--encre); }
/* titre long : on descend d'un cran pour que le prix et les boutons restent visibles */
.hero h1.h1--long{ font-size:clamp(1.95rem, 3.5vw, 2.9rem); line-height:1.08; }
.hero .lead{ margin-top:1.5rem; }
.hero .btn-row{ margin-top:2rem; }

.hero__visuel{ position:relative; }
.hero__visuel--cover{ max-width:430px; margin-inline:auto; }
.hero__visuel--cover > img{ box-shadow:0 34px 70px rgba(16,81,159,.30); }
.hero__media{
  width:100%; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden;
  background:var(--bleu-pale); box-shadow:0 30px 70px rgba(16,81,159,.24);
  display:block;
}
.hero__media > video, .hero__media > img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero__visuel > img:not(.hero__cover){
  width:100%; height:auto; border-radius:var(--r);
  box-shadow:0 30px 70px rgba(16,81,159,.24);
}
.hero__cover{
  position:absolute; left:-18px; bottom:-30px; width:152px; height:auto;
  border-radius:var(--r-s); box-shadow:0 22px 44px rgba(16,81,159,.34); border:4px solid #fff;
}
.hero__tag{
  position:absolute; left:-10px; top:-14px;
  background:var(--rouge); color:#fff; padding:.55rem 1.05rem; border-radius:var(--pill);
  font-family:var(--display); font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 12px 26px rgba(230,49,64,.34);
}
@media (max-width: 920px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__cover{ width:112px; bottom:-20px; left:-8px; }
}

/* ---------- prix ---------- */
.price{ display:flex; align-items:baseline; gap:.8rem; font-family:var(--display); }
.price__now{ font-size:clamp(2.4rem,4.4vw,3.3rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--bleu); }
.price__was{ font-family:var(--mono); font-size:1.1rem; color:var(--gris-clair); text-decoration:line-through; }
.price__note{ font-family:var(--body); font-size:.87rem; color:var(--gris); }
.band--bleu .price__now{ color:#fff; }
.band--bleu .price__note{ color:rgba(255,255,255,.66); }

.promo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--rouge); color:#fff; padding:.46rem 1rem; border-radius:var(--pill);
  margin-bottom:1.3rem; box-shadow:0 8px 20px rgba(230,49,64,.3);
}

/* ---------- bandeau de chiffres ---------- */
.stats{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,2vw,26px);
}
.stat__n{
  font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.9rem);
  letter-spacing:-.03em; line-height:1; color:var(--bleu); font-variant-numeric:tabular-nums;
}
.stat__l{
  margin-top:.6rem; font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gris); line-height:1.45;
}
.band--bleu .stat__n{ color:#fff; }
.band--bleu .stat__l{ color:rgba(255,255,255,.70); }
@media (max-width: 900px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; } }

/* ---------- grilles ---------- */
.grid{ display:grid; gap:clamp(16px,2.2vw,28px); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 1000px){ .grid--3, .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px){ .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r);
  padding:clamp(24px,2.8vw,34px); display:flex; flex-direction:column; gap:.9rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 46px rgba(16,81,159,.13); border-color:#C5D5EA; }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } }
.card h3{ color:var(--encre); }
.card p{ color:var(--gris); font-size:.96rem; }
.card__ico{
  width:52px; height:52px; display:grid; place-items:center; border-radius:var(--pill);
  background:var(--bleu-pale); color:var(--bleu);
}
.card__ico svg{ width:24px; height:24px; }
.card--bleu{ background:linear-gradient(140deg, var(--bleu), var(--bleu-fonce)); border-color:transparent; }
.card--bleu h3{ color:#fff; } .card--bleu p{ color:rgba(255,255,255,.78); }

/* offres */
.offer{ position:relative; overflow:hidden; }
.offer--hot{ border-color:var(--rouge); box-shadow:0 22px 50px rgba(230,49,64,.14); }
.offer--hot::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--rouge); }
.offer__tag{
  font-family:var(--display); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bleu); font-weight:700;
}
.offer--hot .offer__tag{ color:var(--rouge); }
.card--bleu .offer__tag{ color:#FF8A93; }
.offer__list{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.62rem; }
.offer__list li{ position:relative; padding-left:1.75rem; font-size:.94rem; color:var(--gris); }
.offer__list li::before{
  content:""; position:absolute; left:0; top:.36em; width:16px; height:16px; border-radius:50%;
  background:var(--bleu-pale);
}
.offer__list li::after{
  content:""; position:absolute; left:5px; top:.62em; width:5px; height:8px;
  border-right:2px solid var(--bleu); border-bottom:2px solid var(--bleu); transform:rotate(45deg);
}
.offer--hot .offer__list li::before{ background:var(--rouge-pale); }
.offer--hot .offer__list li::after{ border-color:var(--rouge); }
.offer .btn{ margin-top:auto; }

/* ---------- listes techniques ---------- */
.speclist{ list-style:none; margin:0; padding:0; }
.speclist li{
  display:grid; grid-template-columns:2.8rem 1fr; gap:1rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid var(--ligne);
}
.band--bleu .speclist li{ border-color:rgba(255,255,255,.18); }
.speclist b{ font-family:var(--display); font-size:.88rem; font-weight:800; color:var(--rouge); }
.speclist span{ font-size:.98rem; }
.band--bleu .speclist span{ color:rgba(255,255,255,.86); }

/* ---------- schéma ---------- */
.schema{
  border:1px solid var(--ligne); border-radius:var(--r); background:#fff;
  padding:clamp(18px,2.4vw,32px); overflow-x:auto; box-shadow:0 22px 50px rgba(16,81,159,.10);
}
.schema img{ min-width:900px; width:100%; }
.schema__legend{
  margin-top:1.1rem; font-family:var(--mono); font-size:.76rem; color:var(--gris); letter-spacing:.02em;
}

/* ---------- vidéos ---------- */
.media{
  width:100%; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden;
  background:var(--bleu-pale); box-shadow:0 30px 70px rgba(16,81,159,.24); display:block;
}
.media > video, .media > img{ width:100%; height:100%; object-fit:cover; display:block; }
.film{ margin:0 auto; max-width:900px; }
.film__legend{
  margin-top:1.05rem; font-family:var(--mono); font-size:.76rem; color:var(--gris);
  letter-spacing:.02em; text-align:center;
}

.vid{
  position:relative; display:block; border-radius:var(--r); overflow:hidden;
  background:var(--bleu-fonce); border:1px solid var(--ligne); text-decoration:none; color:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
.vid:hover{ transform:translateY(-5px); box-shadow:0 24px 50px rgba(16,81,159,.24); }
@media (prefers-reduced-motion: reduce){ .vid:hover{ transform:none; } }
.vid__thumb{ display:block; position:relative; aspect-ratio:16/9; background:linear-gradient(140deg,var(--bleu),var(--bleu-fonce)); overflow:hidden; }
.vid__grid, .vid__body, .vid__kicker, .vid__title{ display:block; }
.vid__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.vid:hover .vid__thumb img{ transform:scale(1.05); }
.vid__grid{ position:absolute; inset:0; background-image:var(--grid-blanc); }
.vid__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:var(--rouge);
  display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.vid__play::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:17px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.vid__body{ padding:1.1rem 1.3rem 1.35rem; background:#fff; }
.vid__kicker{ font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--bleu); }
.vid__title{ font-family:var(--display); font-weight:700; font-size:1.02rem; margin-top:.4rem; line-height:1.28; color:var(--encre); }

/* ---------- extraits de pages ---------- */
.pages{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,26px); }
.pages--duo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pages figure{ margin:0; }
.pages img{
  width:100%; border-radius:var(--r-s); border:1px solid var(--ligne);
  box-shadow:0 20px 42px rgba(16,81,159,.14);
}
.pages figcaption{
  margin-top:.85rem; font-family:var(--display); font-size:.74rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gris);
}
@media (max-width: 780px){ .pages{ grid-template-columns:1fr 1fr; } .pages figure:nth-child(3){ display:none; } }

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,5vw,68px); align-items:center; }
@media (max-width: 880px){ .split{ grid-template-columns:1fr; } }
.split img{ border-radius:var(--r); border:1px solid var(--ligne); box-shadow:0 22px 48px rgba(16,81,159,.14); }
.band--bleu .split img{ border-color:rgba(255,255,255,.2); box-shadow:0 26px 54px rgba(0,0,0,.3); }

/* ---------- FAQ ---------- */
.faq details{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r-s);
  margin-bottom:.8rem; transition:border-color .15s, box-shadow .15s;
}
.faq details[open]{ border-color:#C5D5EA; box-shadow:0 14px 34px rgba(16,81,159,.10); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.25rem 3.2rem 1.25rem 1.5rem; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--encre);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; background:var(--rouge-pale); color:var(--rouge);
  font-family:var(--display); font-size:1.15rem; font-weight:700;
  display:grid; place-items:center; line-height:1;
}
.faq details[open] summary::after{ content:"\2013"; background:var(--rouge); color:#fff; }
.faq p{ padding:0 1.5rem 1.4rem; color:var(--gris); max-width:78ch; }

/* ---------- appel ---------- */
.cta{ display:grid; grid-template-columns:1fr auto; gap:clamp(22px,4vw,52px); align-items:center; }
@media (max-width: 860px){ .cta{ grid-template-columns:1fr; } }

/* ---------- pied de page ---------- */
.foot{ background:var(--encre); color:rgba(255,255,255,.66); padding-block:clamp(48px,6vw,80px); }
.foot__in{ display:grid; grid-template-columns:1.6fr 1fr 1.15fr 1fr; gap:clamp(24px,3vw,46px); }
@media (max-width: 1040px){ .foot__in{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .foot__in{ grid-template-columns:1fr; } }
.foot .brand__txt{ color:#fff; }
.foot .brand__txt small{ color:#7FB0EC; }
.foot h4{
  font-family:var(--display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:1.1rem; font-weight:700;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.foot a{ color:rgba(255,255,255,.66); text-decoration:none; font-size:.93rem; }
.foot a:hover{ color:#fff; }
.foot__legal{
  margin-top:clamp(30px,4vw,54px); padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.83rem; color:rgba(255,255,255,.44);
}
.copyable{ font-family:var(--mono); font-size:.92rem; color:rgba(255,255,255,.86); word-break:break-all; }
.band--bleu .copyable{ color:#fff; }
.band .copyable{ color:var(--encre); }
.band--bleu .copyable{ color:#fff; }

/* ---------- utilitaires ---------- */
.mt-s{ margin-top:.9rem; } .mt-m{ margin-top:1.8rem; } .mt-l{ margin-top:2.8rem; }
.center{ text-align:center; } .center .eyebrow{ justify-content:center; }
.muted{ color:var(--gris); }
.mono{ font-family:var(--mono); }
.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; }

/* ---------- tableau comparatif ---------- */
.compare-wrap{ overflow-x:auto; }
.compare{
  width:100%; min-width:680px; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r); overflow:hidden;
  box-shadow:0 20px 46px rgba(16,81,159,.10);
}
.compare th, .compare td{ padding:1rem 1.15rem; text-align:left; vertical-align:middle; }
.compare thead th{
  font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gris); border-bottom:1px solid var(--ligne);
  background:var(--nuage);
}
.compare thead th.col-livre{ color:var(--rouge); background:var(--rouge-pale); }
.compare thead th.col-form{ color:#fff; background:var(--bleu); }
.compare th small{
  display:block; font-family:var(--mono); font-size:.86rem; font-weight:500;
  letter-spacing:0; text-transform:none; margin-top:.25rem; opacity:.85;
}
.compare tbody tr + tr td{ border-top:1px solid var(--ligne); }
.compare tbody td:first-child{ font-size:.95rem; color:var(--encre); font-weight:500; }
.compare td.col-livre, .compare td.col-form{ text-align:center; width:20%; font-size:.9rem; }
.compare td.col-form{ background:rgba(16,81,159,.045); color:var(--encre); }
.compare td.col-livre{ background:rgba(230,49,64,.035); }
.compare tbody tr:last-child td{ font-family:var(--display); font-weight:700; }
.oui{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
      background:var(--bleu); color:#fff; font-size:.82rem; line-height:1; }
.oui--rouge{ background:var(--rouge); }
.non{ color:var(--gris-clair); font-family:var(--mono); font-size:1.1rem; }

/* ---------- collection ---------- */
.collection{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); }
@media (max-width: 1000px){ .collection{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 620px){ .collection{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tome{
  display:flex; flex-direction:column; gap:.75rem; text-decoration:none;
  border:1px solid var(--ligne); border-radius:var(--r-s); background:#fff; padding:1rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tome:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(16,81,159,.13); border-color:#C5D5EA; }
@media (prefers-reduced-motion: reduce){ .tome:hover{ transform:none; } }
.tome__vis{
  aspect-ratio:900/1272; border-radius:6px; overflow:hidden; position:relative;
  background:linear-gradient(150deg, var(--bleu), var(--bleu-fonce));
  display:grid; place-items:center; padding:1rem;
}
.tome__vis img{ width:100%; height:100%; object-fit:cover; }
.tome__titre{
  font-family:var(--display); font-weight:800; font-size:1rem; text-transform:uppercase;
  color:#fff; text-align:center; line-height:1.15; letter-spacing:-.01em;
}
.tome__etat{
  font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gris);
}
.tome__etat--dispo{ color:var(--rouge); }
.tome__nom{ font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--encre); line-height:1.25;
  text-decoration:none; }
.tome__nom:hover{ color:var(--bleu); }
.tome > a{ text-decoration:none; }


/* ---------- formulaire de contact ---------- */
.form{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r);
  padding:clamp(24px,3vw,38px); box-shadow:0 22px 50px rgba(16,81,159,.10);
  display:grid; gap:1.05rem;
}
.field{ display:grid; gap:.42rem; }
.field label{
  font-family:var(--display); font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gris);
}
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--encre);
  padding:.85rem 1rem; border:1.5px solid var(--ligne); border-radius:var(--r-s);
  background:#fff; width:100%; transition:border-color .15s, box-shadow .15s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--bleu); box-shadow:0 0 0 4px rgba(16,81,159,.13);
}
.field--duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width: 620px){ .field--duo{ grid-template-columns:1fr; } }
.form__note{ font-size:.85rem; color:var(--gris); }
.form__msg{
  padding:.95rem 1.1rem; border-radius:var(--r-s); font-size:.95rem;
  border:1.5px solid transparent;
}
.form__msg--ok{ background:rgba(16,81,159,.07); border-color:var(--bleu); color:var(--bleu); }
.form__msg--ko{ background:var(--rouge-pale); border-color:var(--rouge); color:var(--rouge-fonce); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- témoignages ---------- */
.avis{ display:grid; gap:clamp(16px,2.2vw,26px); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 1000px){ .avis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px){ .avis{ grid-template-columns:1fr; } }
.avis figure{
  margin:0; background:#fff; border:1px solid var(--ligne); border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:1rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.avis figure:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(16,81,159,.12); }
@media (prefers-reduced-motion: reduce){ .avis figure:hover{ transform:none; } }
.avis blockquote{ margin:0; font-size:.96rem; color:var(--encre); line-height:1.6; }
.avis blockquote::before{
  content:"\201C"; display:block; font-family:var(--display); font-size:2.6rem; font-weight:800;
  color:var(--rouge); line-height:.7; margin-bottom:.4rem;
}
.avis figcaption{ margin-top:auto; border-top:1px solid var(--ligne); padding-top:.9rem; }
.avis figcaption b{ display:block; font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--encre); }
.avis figcaption span{ display:block; font-size:.83rem; color:var(--gris); line-height:1.4; margin-top:.2rem; }
.avis__src{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem;
  font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--bleu);
}

/* ---------- arguments du secteur ---------- */
.enjeu{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,.18); }
.enjeu:last-child{ border-bottom:0; }
.enjeu__n{
  font-family:var(--display); font-weight:800; font-size:1.85rem; line-height:1.05;
  color:#fff; min-width:5.4rem; letter-spacing:-.03em;
}
.enjeu__t{ display:block; font-family:var(--display); font-weight:700; font-size:1.02rem; color:#fff; }
.enjeu__d{ display:block; font-size:.95rem; color:rgba(255,255,255,.78); margin-top:.35rem; }

/* ---------- salaires ---------- */
.paie{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.paie__c{
  display:flex; flex-direction:column; gap:.45rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:clamp(20px,2.2vw,28px);
}
.paie__c--fort{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.34); box-shadow:inset 0 3px 0 var(--rouge); }
.paie__r{
  font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.paie__n{
  font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,2.6vw,2.2rem);
  line-height:1.05; letter-spacing:-.03em; color:#fff;
}
.paie__c--fort .paie__r{ color:#FF8A93; }
.paie__d{ font-size:.93rem; line-height:1.55; color:rgba(255,255,255,.78); }
@media (max-width:860px){ .paie{ grid-template-columns:1fr; } }

/* ==========================================================================
   PAGES LÉGALES
   ========================================================================== */
.miette{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--gris);
  margin-bottom:1.4rem;
}
.miette a{ color:var(--bleu); text-decoration:none; }
.miette a:hover{ text-decoration:underline; }
.miette span[aria-hidden]{ margin:0 .45rem; color:var(--ligne); }

.legal{ max-width:78ch; }
.legal h2{
  font-size:clamp(1.12rem,1.6vw,1.34rem); line-height:1.25; color:var(--bleu);
  margin:2.4rem 0 .7rem; padding-top:1.4rem; border-top:1px solid var(--ligne);
}
.legal h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal p{ font-size:.97rem; line-height:1.72; color:var(--encre); margin:0 0 .85rem; }
.legal p strong{ color:var(--bleu); font-weight:600; }
.legal a{ color:var(--rouge); text-decoration:underline; text-underline-offset:2px; }
.legal ul{ margin:.2rem 0 1rem; padding-left:1.15rem; }
.legal li{ font-size:.97rem; line-height:1.72; color:var(--encre); margin-bottom:.55rem; }

.legal__dl{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.15rem 1.6rem; margin:.4rem 0 1.2rem;
  border-left:3px solid var(--bleu-pale); padding:.2rem 0 .2rem 1.2rem;
}
.legal__dl dt{
  font-family:var(--mono); font-size:.79rem; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gris); padding:.5rem 0 0;
}
.legal__dl dd{ margin:0; padding:.45rem 0 .5rem; font-size:.96rem; line-height:1.6; color:var(--encre); }
@media (max-width:720px){
  .legal__dl{ grid-template-columns:1fr; gap:0 0; }
  .legal__dl dt{ padding-top:.9rem; }
  .legal__dl dd{ padding-top:.15rem; }
}

.legal__maj{
  font-family:var(--mono); font-size:.8rem; color:var(--gris);
  margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--ligne); max-width:78ch;
}

/* --- ajustements pied de page et en-tête des pages légales --- */
.foot__in{ grid-template-columns:1.55fr 1fr 1.15fr 1.15fr; }
@media (max-width: 1040px){ .foot__in{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .foot__in{ grid-template-columns:1fr; } }
.foot .copyable{ font-size:.86rem; overflow-wrap:anywhere; }
.foot .brand__logo{
  background:#fff; border-radius:12px; padding:8px 12px; box-sizing:content-box;
}
.band--tight .sec-head{ margin-bottom:0; }

/* --- décalage des ancres sous la barre collante --- */
html{ scroll-padding-top:calc(88px + env(safe-area-inset-top, 0px)); }
section[id], .legal h2{ scroll-margin-top:calc(96px + env(safe-area-inset-top, 0px)); }

/* ---------- page de remerciement ---------- */
.merci{ max-width:66ch; }
.merci__coche{
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%; margin-bottom:1.3rem;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.4); color:#fff;
}
.merci__coche svg{ width:30px; height:30px; }
.merci h1{ margin-bottom:.4rem; }
.dl__etat{
  font-size:.9rem; line-height:1.55; margin:.75rem 0 0; max-width:54ch;
  color:rgba(255,255,255,.72);
}
.dl__etat--ok{ color:#BFE3C4; }
.dl__etat--ko{ color:#FFC2C7; }
#telecharger[aria-disabled="true"]{ opacity:.6; pointer-events:none; }
.merci__aide{
  margin-top:clamp(28px,3.4vw,44px); padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:14px;
  max-width:62ch;
}
.merci__aide p{ font-size:.93rem; line-height:1.6; color:rgba(255,255,255,.78); margin:0 0 .5rem; }
.merci__aide p:last-child{ margin-bottom:0; }
.merci__aide strong{ color:#fff; }

/* l'attribut hidden doit l'emporter sur les display: des composants */
[hidden]{ display:none !important; }

/* ---------- les deux parcours d'achat ---------- */
.voie{
  margin:.9rem 0 0; padding-top:.85rem; border-top:1px solid var(--ligne);
  font-size:.86rem; line-height:1.55; color:var(--gris);
}
.voie b{
  display:block; font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:.3rem;
}
.voie--direct b{ color:var(--rouge); }
.card--bleu .voie{ border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.72); }
.card--bleu .voie b{ color:#FF8A93; }
.tome__lien{
  display:inline-block; margin-top:.5rem; font-family:var(--mono); font-size:.78rem;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rouge); text-decoration:none; border-bottom:2px solid var(--rouge);
  padding-bottom:1px;
}
.tome__lien:hover{ color:var(--bleu); border-color:var(--bleu); }