/* ==========================================================================
   Midea PortaSplit — Design system
   Premium épuré (type Dyson) : blanc dominant, accent bleu glacier.
   ========================================================================== */

:root {
  /* Palette */
  --ink:        #0B1220;
  --ink-2:      #2C3646;
  --ink-3:      #5B6779;
  --ink-4:      #8A94A3;
  --line:       #E4E8EE;
  --line-2:     #F0F3F7;
  --bg:         #FFFFFF;
  --bg-soft:    #F7F9FC;
  --bg-night:   #0C1526;

  /* Bleu glacier */
  --ice-50:     #F1F7FE;
  --ice-100:    #E1EFFD;
  --ice-200:    #BFDCFA;
  --ice-400:    #4FA3F0;
  --ice-500:    #1A7FE8;
  --ice-600:    #0C63C4;
  --ice-700:    #0A4E9B;

  /* Sémantique */
  --gold:       #C9962B;
  --green:      #0E8A5F;
  --green-soft: #E9F6F1;
  --red:        #C4362B;
  --red-soft:   #FDF0EF;

  /* Typo */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Rayons / ombres */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --sh-1: 0 1px 2px rgba(11,18,32,.05), 0 2px 8px rgba(11,18,32,.04);
  --sh-2: 0 4px 12px rgba(11,18,32,.06), 0 12px 32px rgba(11,18,32,.07);
  --sh-3: 0 8px 24px rgba(11,18,32,.08), 0 24px 60px rgba(11,18,32,.10);
  --sh-cta: 0 6px 18px rgba(12,99,196,.28);

  /* Layout */
  --wrap: 1140px;
  --wrap-narrow: 780px;
  --sticky-h: 76px;
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Les chaînes insécables (emails, URLs, IBAN) doivent se couper au lieu de
     déborder l'écran — ex. philippe.fabre@… sur mobile étroit. */
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.05rem, 5.2vw, 3.55rem); letter-spacing: -.033em; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.55rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1.1em; }
a  { color: var(--ice-600); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { color: var(--ink); font-weight: 650; }
/* Sur fond sombre, le gras doit rester clair (sinon il devient illisible :
   la règle ci-dessus le peindrait en bleu nuit sur du bleu nuit).
   Le hero est désormais clair : il n'est plus concerné. */
.final strong, .final b,
.footer strong, .footer b { color: #fff; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .45em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--ice-400); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ Utilitaires */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: clamp(56px, 8vw, 110px) 0; }
.section--soft { background: var(--bg-soft); }
.section--ice  { background: linear-gradient(180deg, var(--ice-50), #fff); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-3); }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ice-600); margin-bottom: 1rem;
}
.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
.xsmall { font-size: .8rem; line-height: 1.55; }
.nowrap { white-space: nowrap; }
.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;
}
.stack > * + * { margin-top: 1rem; }

/* ------------------------------------------------------------------- CTA */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: 1.03rem; font-weight: 650; line-height: 1.2;
  padding: 1.05rem 1.9rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  /* Label + prix restent solidaires : évite que le « — » saute à la ligne
     et que le prix parte à droite. Les boutons pleine largeur ou à sous-ligne
     (règles ci-dessous) réautorisent le retour à la ligne. */
  white-space: nowrap;
}
/* Boutons à sous-ligne (label + btn__sub) : empilés verticalement, pas côte à côte. */
.btn:has(.btn__sub) { flex-direction: column; gap: 2px; white-space: normal; }
/* Boutons pleine largeur : les libellés longs peuvent revenir à la ligne. */
.btn--block { white-space: normal; }
.btn:hover { text-decoration: none; }
.btn--primary {
  background: linear-gradient(180deg, var(--ice-500), var(--ice-600));
  color: #fff; box-shadow: var(--sh-cta);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(12,99,196,.34); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: #fff; color: var(--ink); border-color: var(--line);
  box-shadow: var(--sh-1);
  /* Boutons secondaires à libellé long (« Gérer mes préférences de cookies ») :
     ils reviennent à la ligne au lieu de déborder, contrairement aux CTA à prix
     qui restent insécables. */
  white-space: normal;
}
.btn--ghost:hover { border-color: var(--ink-4); }
.btn--lg { font-size: 1.12rem; padding: 1.2rem 2.4rem; }
.btn--block { display: flex; width: 100%; }
/* Boutons multi-lignes (pleine largeur ou avec sous-ligne) : le rayon « pilule »
   (999px) les transforme en ellipse difforme dès qu'ils passent sur 2+ lignes sur
   mobile. On leur donne un rayon rectangulaire ; les boutons d'une seule ligne
   (hero, galerie…) gardent la pilule. */
.btn--block, .btn:has(.btn__sub) { border-radius: var(--r-lg); }
.btn__sub { display: block; font-size: .78rem; font-weight: 500; opacity: .82; margin-top: 2px; }
/* Ligne principale d'un bouton mixte (prix inline + sous-ligne) : reste solidaire. */
.btn__line { white-space: nowrap; }
/* Le montant et son tiret restent insécables : quand un CTA pleine largeur passe
   à la ligne sur mobile, le prix bascule proprement en bloc (« — 449,00 € ») au
   lieu de laisser le tiret orphelin en bout de ligne. */
.btn__amt { white-space: nowrap; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Note sous les CTA : texte inline centré (l'icône ne doit pas devenir un
   item flex qui écrase le texte en colonne étroite sur petit écran). */
.cta-note {
  display: block; text-align: center; line-height: 1.5;
  font-size: .875rem; color: var(--ink-3); margin-top: .9rem;
}
.cta-note svg { display: inline; vertical-align: -.15em; margin-right: .35rem; }

/* ----------------------------------------------------------------- Stars */
.stars { color: var(--gold); letter-spacing: .06em; font-size: 1rem; }
.rating-inline {
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .93rem; color: var(--ink-2);
}

/* ------------------------------------------------------------------ Hero
   Fiche produit : fond clair. Produit à GAUCHE + offre à DROITE sur desktop,
   empilé (produit en haut) sur mobile. Plus de fond illustré sombre. */
.hero { position: relative; overflow: hidden; background: #fff; color: var(--ink-2); }
.hero__inner { padding: clamp(28px, 5vw, 72px) 0; }

.hero__layout { display: grid; gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; }

.hero__shot { margin: 0; }
.hero__shot img {
  display: block; width: 100%; height: auto; max-width: 420px; margin-inline: auto;
}

/* --- Carousel produit (hero) ------------------------------------------ */
.carousel {
  position: relative; max-width: 460px; margin-inline: auto;
}
.carousel__viewport { overflow: hidden; border-radius: var(--r-lg); background: #fff; }
.carousel__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.carousel__slide { flex: 0 0 100%; min-width: 100%; }
.carousel__slide img {
  display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1 / 1;
  object-fit: cover; margin: 0;
}
.carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink); cursor: pointer;
  box-shadow: var(--sh-1); transition: background .15s ease, transform .15s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.carousel__arrow:hover { background: #fff; }
.carousel__arrow:active { transform: translateY(-50%) scale(.94); }
.carousel__arrow:focus-visible { outline: 2px solid var(--ice-600); outline-offset: 2px; }
.carousel__arrow--prev { left: 8px; }
.carousel__arrow--next { right: 8px; }
.carousel__dots {
  display: flex; justify-content: center; gap: .5rem; margin-top: .9rem;
}
.carousel__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line-2); cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.carousel__dots button:hover { background: var(--ink-4); }
.carousel__dots button[aria-current="true"] {
  background: var(--ice-600); transform: scale(1.35);
}
.carousel__dots button:focus-visible { outline: 2px solid var(--ice-600); outline-offset: 2px; }
.carousel__slide img { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* --- Lightbox (agrandissement au clic) -------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 3.5rem);
  background: rgba(13, 20, 28, .84);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: min(92vw, 760px); }
.lightbox__img {
  display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain;
  border-radius: var(--r-lg); background: #fff; box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.lightbox__cap { margin: .85rem 0 0; text-align: center; color: #e8eef2; font-size: .9rem; }
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; cursor: pointer; transition: background .15s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.3); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__close { top: 16px; right: 16px; width: 44px; height: 44px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
body.lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

.hero__col { max-width: 640px; }
.hero h1 { color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--ice-600); }
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--ink-3); max-width: 34em; }
.hero__sub strong { color: var(--ink); }
.hero .rating-inline {
  color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: color .15s ease;
}
.hero .rating-inline strong { color: var(--ink); }
.hero .rating-inline:hover strong,
.hero .rating-inline:hover .stars { color: var(--ice-600); }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ice-50); border: 1px solid var(--ice-100);
  color: var(--ice-700); border-radius: 999px; padding: .45rem 1rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.hero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #38D39F;
  box-shadow: 0 0 0 0 rgba(56,211,159,.6); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(56,211,159,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,211,159,0); }
}

.hero__price {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin: 1.8rem 0 .55rem;
}
.hero__price-note {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 1.1rem; font-size: .92rem; font-weight: 600; color: var(--green);
}
.hero__price-note svg { flex: none; }
.hero__price .now { font-size: 2.35rem; font-weight: 750; color: var(--ink); letter-spacing: -.03em; }
.hero__price .was { font-size: 1.1rem; color: var(--ink-4); text-decoration: line-through; }
.hero__price .save {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--green-soft); color: var(--green); border: 1px solid #CBE8DC;
  border-radius: 999px; padding: .3rem .7rem;
}
.hero__actions { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.hero__ticks { list-style: none; padding: 0; margin: 1.7rem 0 0; display: grid; gap: .55rem; }
.hero__ticks li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-2); font-size: .96rem; margin: 0; }
.hero__ticks svg { flex: none; margin-top: 4px; }

/* Desktop : deux colonnes côte à côte — produit à gauche, offre à droite. */
@media (min-width: 860px) {
  .hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .hero__shot img { max-width: 500px; }
}

/* --------------------------------------------------------- Barre réassur. */
.trustbar { background: #fff; border-bottom: 1px solid var(--line); }
.trustbar__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line-2);
}
.trustbar__item {
  background: #fff; display: flex; align-items: center; gap: .7rem;
  padding: 1.05rem .9rem; font-size: .87rem; font-weight: 600; color: var(--ink);
}
.trustbar__item svg { flex: none; color: var(--ice-500); }
.trustbar__item span small { display: block; font-weight: 400; color: var(--ink-3); font-size: .78rem; }

/* -------------------------------------------------------------- Agitation */
.pain-grid { display: grid; gap: 1.25rem; margin-top: 3rem; }
.pain {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.9rem 1.7rem; box-shadow: var(--sh-1);
}
.pain__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--red-soft); color: var(--red);
  font-weight: 750; font-size: 1rem; margin-bottom: 1rem;
}
.pain h3 { margin-bottom: .5rem; }
.pain p:last-child { margin-bottom: 0; }

.callout {
  border-left: 4px solid var(--ice-500); background: var(--ice-50);
  padding: 1.3rem 1.5rem; border-radius: 0 var(--r) var(--r) 0; margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout--warn { border-left-color: var(--red); background: var(--red-soft); }

/* ------------------------------------------------------------- Figure/img */
.figure { margin: 0; }
.figure img, .figure svg {
  width: 100%; border-radius: var(--r-lg); background: var(--bg-soft);
}
.figure figcaption {
  font-size: .85rem; color: var(--ink-3); margin-top: .8rem; text-align: center;
}
.split-2 { display: grid; gap: 2.5rem; align-items: center; }

/* --------------------------------------------------------------- Chiffres */
.stats { display: grid; gap: 1.25rem; margin-top: 3rem; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem 1.7rem; text-align: center; box-shadow: var(--sh-1);
}
.stat__ico { color: var(--ice-500); margin: 0 auto .9rem; }
.stat__big {
  font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 750; color: var(--ink);
  letter-spacing: -.03em; line-height: 1; margin-bottom: .55rem;
}
.stat__big small { font-size: .42em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.stat__label { font-weight: 650; color: var(--ink); margin-bottom: .35rem; }
.stat p { font-size: .92rem; color: var(--ink-3); margin: 0; }

/* --------------------------------------------------------------- Étapes */
.steps { display: grid; gap: 1.25rem; counter-reset: step; margin-top: 3rem; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.8rem 1.6rem; box-shadow: var(--sh-1);
}
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .95rem;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.step p { margin: 0; font-size: .95rem; color: var(--ink-3); }
.step__time {
  position: absolute; top: 1.8rem; right: 1.6rem;
  font-size: .78rem; font-weight: 700; color: var(--ice-600);
  background: var(--ice-50); border-radius: 999px; padding: .25rem .7rem;
}

/* --------------------------------------------------------------- Tableau */
/* Indice de défilement du tableau comparatif — visible seulement quand le
   tableau ne tient pas dans l'écran (mobile/tablette). */
.compare-hint {
  display: none; align-items: center; justify-content: center; gap: .45rem;
  margin: 2.5rem 0 -.5rem; font-size: .82rem; font-weight: 600; color: var(--ice-600);
}
.compare-hint svg { animation: swipeHint 1.8s ease-in-out infinite; }
@keyframes swipeHint { 0%,100% { transform: translateX(-3px) } 50% { transform: translateX(3px) } }
@media (prefers-reduced-motion: reduce) { .compare-hint svg { animation: none; } }

.compare-wrap { position: relative; }
.compare-scroll { overflow-x: auto; margin-top: 3rem; padding: 8px 4px 20px; -webkit-overflow-scrolling: touch; }

/* Le tableau dépasse 720px : sous cette largeur, on aide l'utilisateur à comprendre
   qu'il peut faire défiler horizontalement. */
@media (max-width: 760px) {
  .compare-hint { display: flex; }
  .compare-scroll { margin-top: 1.5rem; }
  /* Dégradé sur le bord droit : signale visuellement le contenu masqué. */
  #comparatif .wrap { position: relative; }
  #comparatif .wrap::after {
    content: ""; position: absolute; top: 0; right: 0; width: 34px; bottom: 0;
    background: linear-gradient(90deg, rgba(247,249,252,0), var(--bg-soft));
    pointer-events: none; z-index: 2;
  }
}
.compare {
  width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0;
  background: #fff; font-size: .95rem;
}
.compare th, .compare td { padding: 1.05rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { border-bottom: 2px solid var(--line); }
.compare tbody th { font-weight: 650; color: var(--ink); width: 22%; }
.compare td { color: var(--ink-3); }
.compare .col-head { font-size: 1rem; font-weight: 700; color: var(--ink-3); text-align: center; }
.compare .col-head small { display: block; font-weight: 500; font-size: .8rem; margin-top: .2rem; }
.compare td:not(:first-child) { text-align: center; }

/* Colonne mise en avant */
.compare .hi { background: var(--ice-50); position: relative; }
.compare thead .hi {
  background: var(--ink); color: #fff; border-radius: var(--r) var(--r) 0 0;
  border-bottom: 2px solid var(--ink);
}
.compare thead .hi small { color: var(--ice-200); }
.compare tbody tr:last-child .hi { border-radius: 0 0 var(--r) var(--r); }
.compare .hi.cell { color: var(--ink); font-weight: 600; }
.compare .tag-best {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; background: var(--ice-500); color: #fff;
  border-radius: 999px; padding: .2rem .6rem; margin-bottom: .5rem;
}
.i-yes { color: var(--green); font-weight: 700; }
.i-no  { color: var(--red); font-weight: 700; }
.i-mid { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------------------ Avis */
/* minmax(0,1fr) : comme pour le tunnel, la colonne mobile doit pouvoir passer
   sous le min-content des cartes (ligne avatar + nom + badge vérifié), sinon
   elle débordait de ~20px à 320px. Les paliers min-width ci-dessous surchargent. */
.reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 3rem; }
.review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.8rem 1.7rem; box-shadow: var(--sh-1); display: flex; flex-direction: column;
}
.review__stars { margin-bottom: .7rem; }
.review__title { font-weight: 700; color: var(--ink); margin-bottom: .55rem; font-size: 1.05rem; }
.review__body { font-size: .95rem; color: var(--ink-2); margin-bottom: 1.2rem; }
.review__body:last-of-type { flex: 1; }
.review__who { display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--line-2); padding-top: 1rem; }
.review__av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--ice-100); color: var(--ice-700);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
}
.review__name { font-weight: 650; color: var(--ink); font-size: .92rem; line-height: 1.3; }
.review__meta { font-size: .8rem; color: var(--ink-4); }
.badge-verif {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600;
  color: var(--green); background: var(--green-soft); border-radius: 999px; padding: .15rem .55rem;
}

/* ------------------------------------------------------------------- FAQ */
.faq { max-width: var(--wrap-narrow); margin: 3rem auto 0; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  margin-bottom: .85rem; box-shadow: var(--sh-1); overflow: hidden;
}
.faq details[open] { border-color: var(--ice-200); box-shadow: var(--sh-2); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 3.2rem 1.25rem 1.5rem;
  font-weight: 650; color: var(--ink); font-size: 1.05rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.5rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--ice-500); border-bottom: 2px solid var(--ice-500);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__body { padding: 0 1.5rem 1.5rem; color: var(--ink-3); font-size: .97rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Stack de valeur */
.offer {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); overflow: hidden; max-width: 660px; margin: 3rem auto 0;
}
.offer__head { background: var(--ink); color: #fff; padding: 1.6rem 1.9rem; text-align: center; }
.offer__head h3 { color: #fff; margin: 0 0 .25rem; font-size: 1.3rem; }
.offer__head p { margin: 0; color: #9FB0C6; font-size: .9rem; }
.offer__body { padding: 1.9rem; }
.offer__line {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px dashed var(--line);
}
.offer__line:last-of-type { border-bottom: 0; }
.offer__line dt { font-weight: 600; color: var(--ink); font-size: .97rem; }
.offer__line dt small { display: block; font-weight: 400; color: var(--ink-3); font-size: .84rem; margin-top: .15rem; }
.offer__line dd { margin: 0; flex: none; font-weight: 650; color: var(--ink-3); white-space: nowrap; }
.offer__line dd s { color: var(--ink-4); font-weight: 500; }
.free { color: var(--green); font-weight: 700; }
.offer__total {
  margin-top: 1.3rem; padding-top: 1.4rem; border-top: 2px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.offer__total .lbl { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.offer__total .lbl small { display: block; font-weight: 400; color: var(--ink-3); font-size: .84rem; }
.offer__total .amt { font-size: 2.1rem; font-weight: 750; color: var(--ink); letter-spacing: -.03em; }
.offer__total .amt s { display: block; font-size: .95rem; color: var(--ink-4); font-weight: 500; letter-spacing: 0; }
.offer__cta { padding: 0 1.9rem 1.9rem; }

.guarantee {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--green-soft); border: 1px solid #CBE8DC; border-radius: var(--r-lg);
  padding: 1.5rem 1.6rem; margin: 2.5rem auto 0; max-width: 660px;
}
.guarantee svg { flex: none; color: var(--green); }
.guarantee h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.guarantee p { margin: 0; font-size: .93rem; color: #2F5B4C; }

/* ------------------------------------------------------------ CTA final */
.final { background: var(--bg-night); color: #C6D2E2; text-align: center; }
.final h2 { color: #fff; }
.final .lead { color: #9FB0C6; }
.scarcity {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(196,54,43,.12); border: 1px solid rgba(196,54,43,.32);
  color: #FF9A90; border-radius: 999px; padding: .5rem 1.1rem;
  font-size: .85rem; font-weight: 600; margin-bottom: 1.6rem;
}
.stock-bar { max-width: 420px; margin: 2rem auto 0; }
.stock-bar__track { height: 8px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.stock-bar__fill { height: 100%; width: 17%; border-radius: 999px; background: linear-gradient(90deg, #E0674F, #C4362B); }
.stock-bar__txt { font-size: .82rem; color: #8494AA; margin-top: .6rem; }

/* ---------------------------------------------------------------- Footer */
.footer { background: #060C18; color: #7C8AA0; padding: 3.5rem 0 2rem; font-size: .9rem; }
.footer a { color: #B9C6D8; }
.footer__grid { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
.footer__brand { font-weight: 750; color: #fff; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: .6rem; }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; }
.footer__contact a { display: flex; gap: .55rem; align-items: center; color: #fff; font-weight: 600; text-decoration: none; }
.footer__contact a:hover { color: var(--ice-200); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.6rem; font-size: .82rem; line-height: 1.7; }

/* ----------------------------------------------------------- Sticky CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(11,18,32,.08);
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sticky-cta__info { min-width: 0; }
.sticky-cta__name { font-weight: 700; color: var(--ink); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta__sub { font-size: .76rem; color: var(--ink-3); }
.sticky-cta .btn { flex: none; padding: .9rem 1.4rem; font-size: .95rem; }

/* --------------------------------------------------------- Exit-intent */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6,12,24,.65); backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal__card {
  background: #fff; border-radius: var(--r-xl); max-width: 480px; width: 100%;
  padding: 2.4rem 2rem 2rem; text-align: center; box-shadow: var(--sh-3);
  position: relative; animation: rise .28s cubic-bezier(.2,.8,.2,1);
  /* dvh suit la barre d'URL mobile ; vh ne la déduit pas et laisse la carte
     déborder sous l'écran. Le vh reste en repli pour les vieux navigateurs. */
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
}
@keyframes rise { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
.modal__close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border: 0; background: var(--bg-soft); border-radius: 50%; cursor: pointer;
  color: var(--ink-3); font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
}
.modal__close:hover { background: var(--line-2); color: var(--ink); }
.modal__ico { margin: 0 auto 1.1rem; color: var(--ice-500); }
.modal h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.modal p { color: var(--ink-3); font-size: .96rem; }
.modal__code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 1.15rem;
  letter-spacing: .12em; color: var(--ice-700); background: var(--ice-50);
  border: 1px dashed var(--ice-200); border-radius: var(--r); padding: .8rem 1rem; margin: 1rem 0;
}
.modal__form { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.4rem; }

/* ---------------------------------------------------- Cookies (bandeau) */
.cookiebar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 1.5rem; max-width: 560px;
  display: none;
}
.cookiebar.is-open { display: block; }
/* Les deux éléments vivent en bas de l'écran. Tant que la barre CTA est
   rétractée, le bandeau garde sa position basse ; dès qu'elle monte, on
   décale le bandeau pour qu'ils ne se recouvrent pas. */
body:has(.sticky-cta.is-visible) .cookiebar {
  bottom: calc(var(--sticky-h) + 16px + env(safe-area-inset-bottom));
}
.cookiebar h4 { font-size: 1.05rem; margin-bottom: .4rem; color: var(--ink); }
.cookiebar p { font-size: .875rem; color: var(--ink-3); margin-bottom: 1.1rem; }
.cookiebar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cookiebar__actions .btn { padding: .85rem 1rem; font-size: .93rem; }
.cookiebar__link { display: inline-block; margin-top: .9rem; font-size: .8rem; color: var(--ink-4); }

/* -------------------------------------------------------- Pages : header */
.pagehead {
  border-bottom: 1px solid var(--line); background: #fff;
  position: sticky; top: 0; z-index: 50;
}
.pagehead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 84px;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 750; color: var(--ink); letter-spacing: -.02em; text-decoration: none; font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--ice-400), var(--ice-700));
  display: grid; place-items: center; color: #fff;
}
/* Logo verrou (icône + wordmark gravés dans le SVG) affiché dans l'en-tête.
   L'en-tête s'agrandit pour accueillir un logo plus grand sans le rogner. */
.brand__logo { display: block; height: 60px; width: auto; }
.pagehead__secure { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--green); }

/* -------------------------------------------------------- Étapes tunnel */
.progress { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.progress__step { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--ink-4); font-weight: 600; }
.progress__step .n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--line-2); color: var(--ink-4); font-size: .8rem;
}
.progress__step.is-done .n { background: var(--green); color: #fff; }
.progress__step.is-done { color: var(--ink-3); }
.progress__step.is-active .n { background: var(--ice-600); color: #fff; }
.progress__step.is-active { color: var(--ink); }
.progress__bar { width: 34px; height: 2px; background: var(--line); border-radius: 2px; }

/* ---------------------------------------------------------- Checkout */
/* minmax(0, 1fr) et non « 1fr » : une piste 1fr a un minimum implicite de
   min-content, si bien que les <input> (largeur intrinsèque ≈ 20 caractères)
   empêchaient la colonne de rétrécir sous ~388px. La page débordait alors de
   ~48px sur un téléphone de 360px, bord droit rogné par overflow-x:hidden.
   Le minimum 0 laisse la colonne suivre la largeur de l'écran. */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
/* Même raison : ces conteneurs et champs doivent pouvoir passer sous leur
   largeur intrinsèque au lieu de pousser la mise en page. */
.checkout .card, .summary, .summary__item, .grid-2 { min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.8rem; box-shadow: var(--sh-1);
}
.card + .card { margin-top: 1.5rem; }
.card__title { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin-bottom: 1.4rem; }
.card__title .n {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none;
}

.summary { position: sticky; top: 90px; }
.summary__item { display: flex; gap: 1rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.summary__thumb {
  width: 88px; height: 88px; flex: none; border-radius: var(--r); overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.summary__thumb img, .summary__thumb svg { width: 100%; height: 100%; object-fit: cover; }
.summary__name { font-weight: 650; color: var(--ink); font-size: .97rem; line-height: 1.35; margin-bottom: .2rem; }
.summary__desc { font-size: .82rem; color: var(--ink-3); margin-bottom: .6rem; }
.summary__price { font-weight: 700; color: var(--ink); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button {
  width: 42px; height: 42px; border: 0; background: #fff; cursor: pointer;
  color: var(--ink); font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
}
.qty button:hover { background: var(--bg-soft); }
.qty button[disabled] { color: var(--ink-4); cursor: not-allowed; }
.qty input {
  width: 40px; text-align: center; border: 0; font: inherit; font-weight: 650;
  color: var(--ink); font-size: .95rem; -moz-appearance: textfield; padding: 0;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.totals { margin-top: 1.3rem; }
.totals__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .93rem; color: var(--ink-3); }
.totals__row strong { color: var(--ink); }
.totals__grand {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .9rem; padding-top: 1.1rem; border-top: 2px solid var(--ink);
}
.totals__grand .l { font-weight: 700; color: var(--ink); }
.totals__grand .l small { display: block; font-weight: 400; color: var(--ink-3); font-size: .8rem; }
.totals__grand .v { font-size: 1.7rem; font-weight: 750; color: var(--ink); letter-spacing: -.03em; }

/* ------------------------------------------------------------ Formulaire */
.grid-2 { display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  color: var(--ink); transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--ice-500); box-shadow: 0 0 0 4px var(--ice-100);
}
.field input[aria-invalid="true"] { border-color: var(--red); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--red-soft); }
.field__hint { font-size: .8rem; color: var(--ink-4); }
.field__err { font-size: .8rem; color: var(--red); font-weight: 600; display: none; }
.field__err.is-shown { display: block; }

.check { display: flex; gap: .8rem; align-items: flex-start; margin: 1.2rem 0; }
.check input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--ice-600); cursor: pointer;
}
.check label { font-size: .9rem; color: var(--ink-3); line-height: 1.55; cursor: pointer; }
.check label a { text-decoration: underline; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; justify-content: center;
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2);
}
.trust-row__i { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.trust-row__i svg { color: var(--ink-4); flex: none; }

/* ----------------------------------------------------------- Confirmation */
.confirm-hero { text-align: center; padding: 3rem 0 2rem; }
.confirm-hero__ico {
  width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 50%;
  background: var(--green-soft); color: var(--green); display: grid; place-items: center;
}
.order-ref {
  display: inline-flex; flex-direction: column; align-items: center; gap: .2rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: .9rem 1.6rem; box-shadow: var(--sh-1); margin-top: .5rem;
}
.order-ref .lbl { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.order-ref .val { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: .05em; }

.bank {
  border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden;
  background: #fff; box-shadow: var(--sh-2); margin: 0 auto; max-width: 620px;
}
.bank__head {
  background: var(--ink); color: #fff; padding: 1.1rem 1.5rem;
  display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .95rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.bank__body { padding: .5rem 1.5rem 1.5rem; }
.bank__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--line-2);
}
.bank__row:last-child { border-bottom: 0; }
.bank__k { font-size: .82rem; color: var(--ink-3); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; flex: none; }
.bank__v {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 650; color: var(--ink);
  font-size: 1rem; text-align: right; word-break: break-word;
}
.bank__row--hi { background: var(--ice-50); margin-inline: -1.5rem; padding-inline: 1.5rem; border-bottom: 0; }
.bank__row--hi .bank__v { color: var(--ice-700); font-size: 1.1rem; }
.bank__row--total .bank__v { font-size: 1.35rem; font-weight: 750; }
.bank__copy {
  border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm);
  padding: .5rem .8rem; font: inherit; font-size: .8rem; font-weight: 650; color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; margin-left: .8rem;
  transition: all .15s;
}
.bank__copy:hover { border-color: var(--ice-500); color: var(--ice-600); }
.bank__copy.is-copied { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.bank__foot {
  background: var(--red-soft); border-top: 1px solid #F3D9D6; padding: 1rem 1.5rem;
  font-size: .88rem; color: #8A2E26; display: flex; gap: .7rem; align-items: flex-start;
}
.bank__foot svg { flex: none; margin-top: 2px; }

/* --- Confirmation du virement par le client -------------------------- */
.confirm-vir {
  margin-top: 1.6rem; padding: 1.5rem; text-align: center;
  background: var(--ice-50); border: 1px solid var(--ice-100); border-radius: var(--r-lg);
}
.confirm-vir__q { margin: 0 0 1rem; font-weight: 650; color: var(--ink); font-size: 1.05rem; }
.confirm-vir__file {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  max-width: 30rem; margin: 0 auto 1rem; padding: .7rem 1rem; cursor: pointer;
  background: #fff; border: 1px dashed var(--ice-500); border-radius: var(--r);
  font-size: .9rem; color: var(--ice-700); font-weight: 600; text-align: left;
}
.confirm-vir__file:hover { background: var(--ice-50); }
.confirm-vir__file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.confirm-vir__file-ico { flex: none; display: inline-flex; }
.confirm-vir__file-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-vir__file-txt em { font-style: normal; font-weight: 400; color: var(--ink-4); }
.confirm-vir__note { margin: .9rem 0 0; font-size: .85rem; color: var(--ink-3); }
.confirm-vir .btn--primary[disabled] { opacity: .7; }
.confirm-vir--done {
  display: flex; gap: .9rem; align-items: flex-start; text-align: left;
  background: var(--green-soft); border-color: #CBE8DC; color: #2F5B4C;
}
.confirm-vir--done svg { flex: none; color: var(--green); margin-top: 2px; }
.confirm-vir--done strong { color: var(--ink); }

.timeline { display: grid; gap: 0; margin: 3rem auto 0; max-width: 620px; }
.tl {
  display: flex; gap: 1.2rem; padding-bottom: 2rem; position: relative;
}
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px;
  background: var(--line);
}
.tl:last-child::before { display: none; }
.tl__n {
  width: 40px; height: 40px; border-radius: 50%; flex: none; z-index: 1;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  background: #fff; border: 2px solid var(--ice-500); color: var(--ice-600);
}
.tl--done .tl__n { background: var(--green); border-color: var(--green); color: #fff; }
.tl h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.tl p { margin: 0; font-size: .93rem; color: var(--ink-3); }
.tl__when { font-size: .78rem; font-weight: 700; color: var(--ice-600); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }

.reassure-grid { display: grid; gap: 1rem; margin-top: 3rem; }
.reassure {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem; display: flex; gap: .9rem; align-items: flex-start;
}
.reassure svg { flex: none; color: var(--ice-500); margin-top: 2px; }
.reassure b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .2rem; }
.reassure span { font-size: .87rem; color: var(--ink-3); }

/* --------------------------------------------------------- Pages légales */
.legal { padding: 3.5rem 0 5rem; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .5rem; }
.legal .updated { color: var(--ink-4); font-size: .87rem; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.legal h2 {
  font-size: 1.35rem; margin-top: 3rem; margin-bottom: 1rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line-2);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 2rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.8rem; }
.legal p, .legal li { font-size: .97rem; }
.legal table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
/* Tableaux de prose (RGPD, cookies, specs) : sous ~480px de large, trois colonnes
   de texte se réduisent à un mot par ligne. On les fait défiler horizontalement
   plutôt que de les écraser. Indispensable ici : `body` porte overflow-x:hidden,
   qui se propage au viewport — sans ce conteneur, le débordement serait rogné
   et hors d'atteinte. min-width est inerte dès que le conteneur est plus large. */
.table-wrap { position: relative; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 30rem; }

/* Dégradé sur le bord droit : signale le contenu masqué, comme sur le tableau
   comparatif. Il vit sur .table-wrap et non sur le conteneur défilant, dont le
   bloc absolu suivrait le défilement au lieu de rester collé au bord visible.
   Le tableau déborde dès que la colonne de texte passe sous 30rem, soit un
   viewport de 520px (30rem + les 40px de padding du .wrap) : on n'affiche le
   dégradé qu'en dessous, sinon il masquerait un bord déjà entièrement visible. */
@media (max-width: 519px) {
  .table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
    pointer-events: none;
  }
}
.legal th, .legal td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal thead th { background: var(--bg-soft); font-weight: 650; color: var(--ink); font-size: .85rem; }
.legal tbody tr:last-child td { border-bottom: 0; }
.ph {
  background: #FFF6E0; border-bottom: 1px dashed var(--gold); color: #7A5A10;
  font-weight: 600; padding: 0 .15em; border-radius: 2px;
}
.legal-box {
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 4px solid var(--ice-500);
  border-radius: 0 var(--r) var(--r) 0; padding: 1.5rem; margin: 1.8rem 0;
}
.legal-box h3 { margin-top: 0; }
.legal-box p:last-child, .legal-box ul:last-child { margin-bottom: 0; }
.legal-box--law { border-left-color: var(--ink); font-size: .93rem; }
.legal-box--law p { font-style: italic; color: var(--ink-2); }
.toc {
  background: var(--bg-soft); border-radius: var(--r); padding: 1.5rem 1.8rem; margin-bottom: 3rem;
}
.toc h2 { border: 0; margin: 0 0 .8rem; padding: 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { columns: 2; column-gap: 2rem; margin: 0; font-size: .9rem; }
.toc li { break-inside: avoid; }

.retract-form {
  border: 2px dashed var(--line); border-radius: var(--r); padding: 1.8rem;
  font-size: .92rem; background: #fff; margin: 1.8rem 0;
}
.retract-form p { margin-bottom: .9rem; }

/* ------------------------------------------------------------ Responsive */
@media (min-width: 640px) {
  .trustbar__grid { grid-template-columns: repeat(4, 1fr); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .cookiebar__actions { grid-template-columns: 1fr 1fr auto; }
  .reassure-grid { grid-template-columns: 1fr 1fr; }
}
/* Palier tablette. Sans lui, la plage 600-859px (iPad portrait = 768px) héritait
   de la colonne unique mobile : cartes pleine largeur, presque vides, sections
   étirées. On rétablit des grilles multi-colonnes bien avant le palier 860px,
   qui ne visait que le desktop. Les 3-cartes (agitation, chiffres, étapes)
   attendent 760px pour ne pas s'écraser à trois de front sur une petite tablette. */
@media (min-width: 600px) {
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .pain-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .split-2 { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (min-width: 860px) {
  .pain-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .split-2 { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .hero__actions { flex-direction: row; align-items: center; }
  .checkout { grid-template-columns: 1.35fr 1fr; gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .reviews .review:nth-child(4) { grid-column: 1 / 2; }
}

/* Mobile : les grands CTA autonomes portent un libellé long (« Commander le
   12000 BTU — 449,00 € » ≈ 400px) et .btn impose white-space:nowrap. Sur un
   écran étroit ils débordent du viewport ; overflow-x:hidden masque le
   débordement mais la page « saute ». On les passe pleine largeur pour que le
   texte revienne à la ligne. Ne touche ni la barre collante ni le bouton d'en-
   tête (ce sont des .btn--primary sans .btn--lg), qui doivent rester compacts. */
@media (max-width: 520px) {
  /* display:block (et non flex) : le libellé + le prix s'écoulent comme du texte
     CENTRÉ et reviennent à la ligne ensemble, au lieu d'être écartés à gauche/
     droite par la disposition flex. On exclut le bouton à sous-ligne (Total…) du
     tunnel, qui a besoin de son empilement flex en colonne. */
  .btn--lg:not(:has(.btn__sub)) {
    display: block; width: 100%; white-space: normal; text-align: center;
  }
  /* Le padding horizontal généreux (2.4rem) rétrécit trop la zone de texte sur
     petit écran et multiplie les retours à la ligne des libellés longs. On le
     resserre pour que le libellé respire sur moins de lignes. */
  .btn--lg { padding-left: 1.3rem; padding-right: 1.3rem; }
}

/* La sticky CTA recouvre le bas de page : on compense en rallongeant le footer,
   et non par un padding sur `body` — le fond sombre du footer passe ainsi sous
   la barre, là où un padding de body laisserait une bande blanche dès que la
   barre se rétracte. main.js pose `has-sticky` à toutes les largeurs, d'où
   l'absence de media query. La safe-area iOS entre dans le calcul parce que la
   barre l'ajoute à son propre padding : sans elle, la barre d'accueil d'un
   iPhone mange la dernière ligne du footer. */
body.has-sticky .footer {
  padding-bottom: calc(2rem + var(--sticky-h) + env(safe-area-inset-bottom));
}

@media (max-width: 859px) {
  .summary { position: static; }
  .toc ol { columns: 1; }
}

/* Très petits écrans : le bouton (« Commander — 449 € », insécable) et le nom du
   produit se disputent la largeur. On sacrifie la sous-ligne, pas le prix. */
@media (max-width: 400px) {
  .sticky-cta__sub { display: none; }
  .sticky-cta .btn { padding: .9rem 1.1rem; }
}

/* ---------------------------------------------------------- Motion / a11y */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- Print */
@media print {
  .sticky-cta, .cookiebar, .modal, .pagehead__secure { display: none !important; }
  body { padding: 0; }
  .bank { border-color: #000; }
}

/* --------------------------------------------------------- Livraison */
.ship__dispatch {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--ink-2); background: var(--bg-soft);
  border-radius: var(--r-sm); padding: .8rem 1rem; margin: 0 0 1.1rem;
}
.ship__dispatch svg { color: var(--ice-500); flex: none; }

.ship {
  display: block; position: relative; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem 1rem 3rem;
  margin-bottom: .8rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ship:hover { border-color: var(--ink-4); }
.ship input[type="radio"] {
  position: absolute; left: 1rem; top: 1.15rem; width: 20px; height: 20px;
  accent-color: var(--ice-600); cursor: pointer; margin: 0;
}
.ship:has(input:checked) { border-color: var(--ice-500); box-shadow: 0 0 0 3px var(--ice-100); background: var(--ice-50); }
.ship__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ship__label { font-weight: 650; color: var(--ink); font-size: .98rem; }
.ship__price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ship__price.free { color: var(--green); text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.ship__delay { display: block; font-size: .87rem; color: var(--ink-2); margin-top: .25rem; }
.ship__note  { display: block; font-size: .82rem; color: var(--ink-4); margin-top: .3rem; line-height: 1.5; }

/* Sélecteur de point relais */
.ship__relay { display: block; margin-top: 1rem; }
.relay { border-top: 1px dashed var(--line); padding-top: 1rem; }
.relay__search { display: flex; gap: .5rem; }
.relay__search input {
  flex: 1; font: inherit; font-size: .95rem; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.relay__search input:focus { outline: 0; border-color: var(--ice-500); box-shadow: 0 0 0 3px var(--ice-100); }
.relay__search .btn { padding: .7rem 1.1rem; font-size: .9rem; flex: none; }
.relay__status { font-size: .84rem; color: var(--ink-3); margin: .7rem 0 .3rem; }
.relay__status.is-ok { color: var(--green); font-weight: 600; }
.relay__status.is-err { color: var(--red); font-weight: 600; }
.relay__list { display: grid; gap: .5rem; }
.relay__pt {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem .9rem;
  transition: border-color .15s, background .15s;
}
.relay__pt:hover { border-color: var(--ink-4); }
.relay__pt:has(input:checked) { border-color: var(--ice-500); background: var(--ice-50); box-shadow: 0 0 0 2px var(--ice-100); }
.relay__pt input { margin-top: 3px; accent-color: var(--ice-600); flex: none; }
.relay__pt > span { display: flex; flex-direction: column; gap: .12rem; }
.relay__pt strong { color: var(--ink); font-size: .92rem; }
.relay__addr { font-size: .82rem; color: var(--ink-3); }
.relay__dist { font-size: .78rem; color: var(--ice-600); font-weight: 600; }

/* --------------------------------------------------------- Galerie photos */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }
.gallery figure {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-1);
}
.gallery__img {
  aspect-ratio: 1 / 1; background: var(--bg-soft); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gallery__img img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
  padding: .85rem 1rem; font-size: .85rem; color: var(--ink-2); font-weight: 550;
  border-top: 1px solid var(--line-2);
}
.gallery figure.gallery--wide { grid-column: span 2; }
.gallery--wide .gallery__img { aspect-ratio: 16 / 9; }
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery figure.gallery--wide { grid-column: span 1; }
}

/* CTA sous la galerie */
.gallery-cta { text-align: center; margin-top: 2.5rem; }
.gallery-cta__specs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem;
  margin-bottom: 1.4rem;
}
.gallery-cta__specs span {
  font-size: .82rem; font-weight: 650; color: var(--ink); background: var(--ice-50);
  border: 1px solid var(--ice-100); border-radius: 999px; padding: .35rem .9rem;
}

/* ------------------------------------------------------- Sélecteur de modèle */
.models { display: grid; gap: 1rem; }
.model {
  display: block; position: relative; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  padding: 1.4rem 1.5rem 1.4rem 3.2rem; box-shadow: var(--sh-1);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.model > input[type="radio"] {
  position: absolute; left: 1.2rem; top: 1.6rem; width: 20px; height: 20px;
  accent-color: var(--ice-600); cursor: pointer; margin: 0;
}
.model:has(input:checked) { border-color: var(--ice-500); box-shadow: 0 0 0 3px var(--ice-100); }
.model:has(input:not(:disabled)):hover { border-color: var(--ink-4); }
.model__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.model__name { font-weight: 700; color: var(--ink); font-size: 1.12rem; letter-spacing: -.01em; }
.model__reco {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--green-soft); color: var(--green); border-radius: 999px; padding: .18rem .55rem;
  vertical-align: middle;
}
.model__price { font-size: 1.35rem; font-weight: 750; color: var(--ink); letter-spacing: -.02em; }
.model__specs {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .8rem 0 .5rem;
  font-size: .92rem; color: var(--ink-3);
}
.model__specs strong { color: var(--ink); font-weight: 700; }
.model__tag { display: block; font-size: .88rem; color: var(--ink-3); }

/* Rupture de stock */
.model--off { cursor: not-allowed; background: var(--bg-soft); border-style: dashed; padding-left: 3.2rem; }
.model--off .model__name { color: var(--ink-3); }
.model--off .model__specs { opacity: .65; }
.model--off .model__price { color: var(--ink-4); }
.model__soon {
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--red); background: var(--red-soft); border: 1px solid #F3D9D6;
  border-radius: 999px; padding: .3rem .8rem; white-space: nowrap; flex: none;
}
.model__oosnote { display: block; font-size: .82rem; color: var(--ink-4); margin-top: .6rem; font-style: italic; }

/* Sur la landing (cartes non sélectionnables), pas de retrait à gauche */
.models--display .model { padding-left: 1.5rem; }
.models--display .model--off { padding-left: 1.5rem; }

/* --------------------------------------------------- Bannière promo (haut) */
.promobar {
  position: relative; z-index: 40;
  background: linear-gradient(90deg, #0A4E9B 0%, #0C63C4 45%, #1A7FE8 100%);
  color: #EAF3FF;
}
.promobar__inner {
  display: flex; align-items: center; justify-content: center; gap: .5rem .9rem;
  flex-wrap: wrap; padding: .6rem 20px; text-align: center;
  font-size: .88rem; line-height: 1.4;
}
.promobar__tag {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  font-weight: 750; letter-spacing: .02em; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: .22rem .8rem;
  text-transform: uppercase; font-size: .76rem;
}
.promobar__sun {
  color: #FFD79A;
  animation: promoSun 5s linear infinite; transform-origin: center;
}
@keyframes promoSun { to { transform: rotate(360deg); } }
.promobar__txt { color: #DCEAFB; }
.promobar__txt strong { color: #fff; }

/* Mobile : la bannière prenait 3 lignes (tag empilé au-dessus d'un texte long)
   et pesait lourd avant le hero. On la resserre — texte plus petit, marges
   réduites, tag et texte alignés — pour un bandeau compact d'une à deux lignes. */
@media (max-width: 560px) {
  .promobar__inner {
    gap: .3rem .55rem; padding: .5rem 14px;
    font-size: .78rem; line-height: 1.3;
  }
  .promobar__tag { font-size: .66rem; padding: .16rem .55rem; gap: .3rem; }
  .promobar__sun { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) { .promobar__sun { animation: none; } }

/* --------------------------------------------------------- Moyens de paiement */
/* minmax(0,1fr) : la piste doit pouvoir rétrécir sous le min-content des lignes
   (logos de cartes en largeur fixe + badge « Bientôt disponible » insécable),
   sinon elle bloquait le tunnel à ~328px et débordait sur téléphone étroit. */
.pay { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; margin-bottom: 1.4rem; }
.paym {
  display: flex; align-items: center; gap: .9rem; position: relative; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.paym input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--ice-600); cursor: pointer; margin: 0; }
.paym:has(input:checked) { border-color: var(--ice-500); box-shadow: 0 0 0 3px var(--ice-100); background: var(--ice-50); }
.paym:has(input:not(:disabled)):hover { border-color: var(--ink-4); }
.paym__main { flex: 1; min-width: 0; }
.paym__name { font-weight: 650; color: var(--ink); font-size: .98rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.paym__desc { font-size: .82rem; color: var(--ink-3); margin-top: .2rem; }
.paym__logos { display: inline-flex; gap: .3rem; align-items: center; }
.paym__logos svg { display: block; border-radius: 3px; }
.paym__reco {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--green-soft); color: var(--green); border-radius: 999px; padding: .18rem .55rem;
}

/* Option désactivée : « bientôt disponible » */
.paym--off { cursor: not-allowed; background: var(--bg-soft); border-style: dashed; }
.paym--off .paym__name, .paym--off .paym__desc { color: var(--ink-4); }
.paym--off .paym__logos svg { opacity: .45; filter: grayscale(1); }
.paym__soon {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-4); background: var(--line-2); border-radius: 999px; padding: .25rem .7rem; white-space: nowrap; flex: none;
}

/* Mobile : sans plancher de largeur, la colonne texte (min-width:0) se fait
   écraser par les logos + le badge « Bientôt disponible » (tous deux insécables)
   et finit par s'afficher lettre par lettre. On lui garantit une largeur mini :
   le moteur flex renvoie alors proprement logos et badge à la ligne en dessous,
   au lieu de guillotiner le texte. Le badge, compact, se pose sur sa propre ligne. */
@media (max-width: 560px) {
  .paym { row-gap: .55rem; }
  .paym__main { min-width: 60%; }
  .paym__soon { margin-left: 2.9rem; }
}

/* --------------------------------------------------------- Jauge de stock */
.stockmeter {
  border: 1px solid var(--line); background: #fff; border-radius: var(--r);
  padding: 1.1rem 1.3rem; box-shadow: var(--sh-1); max-width: 440px; margin: 2rem auto 0;
}
.stockmeter__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.stockmeter__label { font-size: .88rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: .5rem; }
.stockmeter__label .live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201,150,43,.5); animation: pulse 2.2s infinite;
}
.stockmeter__count { font-size: .95rem; font-weight: 700; color: var(--ink); }
.stockmeter__count strong { color: var(--gold); }
.stockmeter__track { height: 9px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.stockmeter__fill {
  height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ice-400), var(--ice-600));
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.stockmeter__fill.is-low { background: linear-gradient(90deg, #E0674F, var(--red)); }
.stockmeter.is-low .stockmeter__count strong { color: var(--red); }
.stockmeter__note { font-size: .78rem; color: var(--ink-4); margin: .6rem 0 0; }

/* Version sombre pour le bloc CTA final */
.final .stockmeter { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.final .stockmeter__label { color: #B9C6D8; }
.final .stockmeter__count { color: #fff; }
.final .stockmeter__track { background: rgba(255,255,255,.1); }
.final .stockmeter__note { color: #8494AA; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }