/* ═══════════════════════════════════════════════════════════════
   MY BEERS : landing page franchise
   Design system + composants
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────── Poppins, hébergée en local ───────────────
   Sous-ensemble latin + latin étendu, converti en woff2.
   Aucun appel à Google Fonts : rien ne sort du navigateur.        */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ─────────────── Tokens ─────────────── */
:root {
  /* Charte My Beers */
  --blue:       #2CB5B5;   /* couleur d'action principale */
  --blue-hover: #38C9C9;
  --blue-dark:  #1E8C8C;
  --red:        #E10917;   /* accent ponctuel, à doser */

  /* Fonds sombres */
  --ink:     #0B0E13;
  --ink-2:   #10141C;
  --ink-3:   #161B25;
  --ink-4:   #1E2432;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.16);

  /* Texte */
  --tx:      #EDF0F5;
  --tx-soft: #98A1B2;
  --tx-dim:  #6E7688;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Échelle fluide */
  --h1:   clamp(2.15rem, 4.1vw, 3.65rem);
  --h2:   clamp(1.75rem, 3.1vw, 2.65rem);
  --h3:   clamp(1.02rem, 1.5vw, 1.2rem);
  --lead: clamp(1rem, 1.35vw, 1.14rem);

  /* Rythme */
  --gap:     clamp(1rem, 2.2vw, 1.65rem);
  --sec-pad: clamp(3.25rem, 6.5vw, 5.75rem);
  --radius:    14px;
  --radius-lg: 20px;

  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ─────────────── Reset ─────────────── */
*, *::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;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--tx);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #04211F; padding: .8rem 1.2rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ─────────────── Layout ─────────────── */
.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.75rem);
}
.wrap--narrow { max-width: 900px; }

.section { padding-block: var(--sec-pad); position: relative; }
.section--alt { background: var(--ink-2); }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; max-width: 58ch; }
.section__head h2 {
  font-size: var(--h2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.section__lead {
  max-width: 52ch;
  margin-top: 1.1rem;
  font-size: var(--lead);
  color: var(--tx-soft);
}
.section__head--center .section__lead { margin-inline: auto; }

.kicker {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .8rem;
}

/* ─────────────── Boutons ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.7rem;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .18s, box-shadow .18s;
}
.btn--primary {
  background: var(--blue);
  color: #05201F;
  box-shadow: 0 2px 0 var(--blue-dark), 0 10px 26px rgba(44,181,181,.26);
}
.btn--primary:hover { background: var(--blue-hover); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--tx-soft);
  border: 1.5px solid var(--line-2);
}
.btn--ghost:hover { color: var(--tx); border-color: var(--tx-soft); background: rgba(255,255,255,.04); }

.btn--lg   { padding: 1.1rem 2rem; font-size: 1.02rem; }
.btn--full { width: 100%; }

/* ═════════════════════════════════════════════════════════════
   HERO : argumentaire à gauche, formulaire à droite
   ═════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Le premier écran occupe toute la hauteur visible. `svh` évite le saut de
     mise en page quand la barre d'adresse mobile se replie ; `vh` sert de repli.
     `min-height` et non `height` : sur mobile, le contenu empilé peut dépasser. */
  min-height: 100vh;
  min-height: 100svh;

  /* Une rangée souple pour le contenu, une rangée fixe pour le lien du bas :
     le bloc texte + formulaire se centre dans l'espace restant. */
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.25rem, 2vw, 1.75rem);
}
.hero__grid { align-self: center; }

/* ─── Invitation à poursuivre, en bas du premier écran ─── */
.hero__scroll {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: .5rem .75rem;
  font-size: .89rem;
  font-weight: 600;
  color: var(--tx);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
  transition: color .18s, gap .18s var(--ease);
}
.hero__scroll:hover { color: var(--blue); gap: .85rem; }
.hero__scroll-arrow {
  display: inline-block;
  font-size: 1.05em;
  animation: nudge 2.1s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow { animation: none; }
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Cadrage ancré en haut : quand le hero est plus large que le 16/9 de la
     vidéo, c'est le bas qui se perd, jamais le haut (enseigne, ciel, éclairages).
     Descendez vers `center 30%` si vous préférez recentrer. */
  object-position: center top;
  opacity: 1;
}
/* La vidéo se superpose à l'image et apparaît en fondu dès qu'elle joue.
   Si elle ne charge pas, ou si le navigateur refuse la lecture automatique,
   l'image reste en place et le hero est identique. */
.hero__video {
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Le voile n'assombrit fortement que la zone du texte, en haut à gauche.
   Ailleurs il reste léger pour que l'image de fond soit vraiment visible ;
   le formulaire, posé sur une carte opaque, n'a besoin d'aucune protection. */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;

  /* Les deux seuls réglages à toucher pour doser la visibilité du fond :
     --veil-text : assombrissement derrière le titre. Le monter si votre vidéo
                   est claire et que le texte devient difficile à lire.
     --veil-base : assombrissement partout ailleurs. Le baisser pour voir
                   davantage la vidéo, le monter pour la rendre discrète. */
  --veil-text: .90;
  --veil-base: .30;

  background:
    radial-gradient(76% 86% at 14% 42%,
      rgba(11,14,19,var(--veil-text)) 0%,
      rgba(11,14,19,calc(var(--veil-text) * .8)) 38%,
      rgba(11,14,19,calc(var(--veil-text) * .38)) 66%,
      transparent 84%),
    linear-gradient(to bottom,
      rgba(11,14,19,calc(var(--veil-base) * 1.13)) 0%,
      rgba(11,14,19,var(--veil-base)) 52%,
      rgba(11,14,19,.70) 88%,
      var(--ink) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero__logo { height: 62px; width: auto; margin-bottom: 1.5rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem .4rem .72rem;
  margin-bottom: 1.35rem;
  background: rgba(11,14,19,.55);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: .79rem;
  font-weight: 500;
  color: #DDE2EB;
  backdrop-filter: blur(6px);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(44,181,181,.24);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(44,181,181,0); } }
@media (prefers-reduced-motion: reduce) { .eyebrow .dot { animation: none; } }

.hero__title {
  font-size: var(--h1);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4);
}
.hero__title em {
  font-style: normal;
  color: var(--blue);
  text-shadow: 0 0 44px rgba(44,181,181,.34);
}

.hero__sub {
  max-width: 56ch;
  margin-top: 1.35rem;
  font-size: var(--lead);
  color: #D2D8E2;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.hero__sub strong { color: #fff; font-weight: 600; }

.hero__proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-top: clamp(1.85rem, 3.5vw, 2.6rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero__proof li {
  padding: .95rem 1.1rem;
  background: rgba(11,14,19,.58);
  backdrop-filter: blur(7px);
}
.hero__proof strong {
  display: block;
  font-size: clamp(1.06rem, 1.7vw, 1.32rem);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -.02em;
}
.hero__proof span {
  display: block;
  margin-top: .1rem;
  font-size: .8rem;
  color: var(--tx-soft);
  line-height: 1.35;
}
/* Sur deux colonnes, le troisième chiffre serait seul avec une case vide */
@media (max-width: 470px) {
  .hero__proof li:last-child:nth-child(3) { grid-column: 1 / -1; }
}

/* ═════════════════════════════════════════════════════════════
   FORMULAIRE (dans le hero)
   ═════════════════════════════════════════════════════════════ */
.formcard {
  /* Fond légèrement translucide pour laisser deviner la vidéo. En rgba et non
     via `opacity`, qui s'appliquerait aussi aux libellés et aux champs. */
  background: rgba(22, 27, 37, .90);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 1.7vw, 1.55rem);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(44,181,181,.06);
  scroll-margin-top: 1.5rem;
}

.formcard__head {
  display: grid;
  /* En fractions et non en pourcentages : 70% + 30% + gap dépasserait la largeur
     disponible, et le logo se retrouverait décalé à droite des champs. */
  grid-template-columns: 7fr 3fr;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.15rem;
}
.formcard__logo {
  justify-self: end;
  width: auto;
  max-height: 76px;
}
.formcard__head h2 {
  font-size: clamp(1.18rem, 1.7vw, 1.42rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.formcard__head p {
  margin: .45rem 0 0;
  font-size: .84rem;
  color: var(--tx-soft);
  line-height: 1.5;
}

/* Champs */
.field { margin-bottom: .7rem; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.lead-form .btn { margin-top: .55rem; }

/* Les intitulés sont dans les champs : les libellés restent lisibles par les
   lecteurs d'écran mais sortent du flux visuel. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: .78rem .95rem;
  font-family: inherit;
  font-size: .96rem;
  color: var(--tx);
  background: var(--ink-4);
  border: 1.5px solid var(--line);
  border-radius: 9px;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--tx-dim); }
/* Non redimensionnable : la hauteur reste maîtrisée, l'utilisateur défile
   dans le champ si son texte est long. */
.field textarea { resize: none; min-height: 76px; overflow-y: auto; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2398A1B2' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
/* Tant que rien n'est sélectionné, l'intitulé du select se comporte
   visuellement comme un placeholder. */
.field select:invalid { color: var(--tx-dim); }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(44,181,181,.18);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--red); }

.field__err {
  display: none;
  margin: .4rem 0 0;
  font-size: .8rem;
  font-weight: 500;
  color: #FF6B72;
}
.field.has-error .field__err { display: block; }



/* Honeypot : invisible pour l'humain, atteignable par les bots */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

#submit-btn.is-loading { pointer-events: none; opacity: .72; }
#submit-btn.is-loading::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(5,32,31,.35);
  border-top-color: #05201F;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-error {
  margin: 1.1rem 0 0;
  padding: .85rem 1.05rem;
  background: rgba(225,9,23,.12);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  font-size: .87rem;
  font-weight: 500;
  color: #FFB3B7;
}

/* Confirmation */
.thanks { text-align: center; padding: 1.5rem 0; }
.thanks__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 1.35rem;
  background: var(--blue);
  color: #05201F;
  border-radius: 50%;
  font-size: 1.7rem;
  font-weight: 700;
  animation: pop .42s var(--ease);
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.thanks h3 {
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.thanks p { color: var(--tx-soft); font-size: .92rem; }
.thanks__next { margin-top: 1rem; font-size: .855rem; }
.thanks a { color: var(--blue); font-weight: 500; }

/* ─────────────── Ticker villes ─────────────── */
.ticker {
  background: var(--blue);
  color: #05201F;
  padding: .68rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  gap: 1.1rem;
  align-items: center;
  animation: scroll-x 46s linear infinite;
  padding-left: 1.1rem;
}
.ticker__track span {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
@keyframes scroll-x { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { text-align: center; white-space: normal; }
  .ticker__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════
   LE CONCEPT : sélecteur et textes à gauche, photos à droite
   ═════════════════════════════════════════════════════════════ */
.concept {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  grid-template-rows: auto auto;
  gap: 0 clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
/* Le titre occupe la colonne de gauche, rangée du haut. */
.concept__head { grid-column: 1; grid-row: 1; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.concept__text { grid-column: 1; grid-row: 2; }
/* Le bandeau de photos couvre les deux rangées : son bord haut s'aligne donc
   exactement sur le haut du titre de section. */
/* Étiré sur les deux rangées : le bandeau épouse exactement la hauteur de la
   colonne de gauche, du haut du titre au bas du sélecteur. */
.concept__gallery { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }

@media (max-width: 900px) {
  .concept { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .concept__head { grid-column: 1; grid-row: 1; }
  .concept__text { grid-column: 1; grid-row: 2; }
  .concept__gallery {
    grid-column: 1; grid-row: 3;
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
    height: clamp(360px, 90vw, 480px);
  }
}

/* ─── Textes de l'activité, au-dessus du sélecteur ─── */
.panel { display: none; }
.panel.is-active { display: block; animation: fade-in .32s var(--ease); }
@media (prefers-reduced-motion: reduce) { .panel.is-active { animation: none; } }

.panel__share {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .9rem;
  /* « du chiffre d'affaires » : lisible et en blanc, pas une mention discrète */
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  color: #fff;
}
.panel__pct {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--blue);
}
.panel__pct i { font-style: normal; font-size: .5em; }

/* Le nom de l'activité, en cartouche rouge de la charte. */
.panel__title {
  display: inline-block;
  padding: .28em .6em .32em;
  background: var(--red);
  color: #fff;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.03em;
  border-radius: 6px;
  margin-bottom: 1.15rem;
}
.panel__text { color: var(--tx-soft); font-size: var(--lead); max-width: 46ch; }

/* ─── Sélecteur, sous le texte, façon navigation de carrousel ─── */
.switcher {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.switcher__arrow {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: var(--ink-3);
  color: var(--tx);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.switcher__arrow span { margin-top: -3px; }
.switcher__arrow:hover { background: var(--blue); border-color: var(--blue); color: #05201F; }

.switcher__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.switcher__item {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .62rem 1.05rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tx-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background-color .18s;
}
.switcher__num { font-size: .82em; font-weight: 600; opacity: .8; }
.switcher__item:hover { color: var(--tx); border-color: var(--line-2); }
.switcher__item[aria-selected="true"] {
  background: rgba(44,181,181,.14);
  border-color: var(--blue);
  color: var(--blue);
}

/* Au doigt, les pastilles suffisent : les flèches seraient redondantes et
   feraient passer le sélecteur sur trois lignes. */
@media (max-width: 620px) {
  .switcher__arrow { display: none; }
  .switcher__list { flex: 1; gap: .4rem; }
  .switcher__item { font-size: .9rem; padding: .55rem .8rem; }
  .switcher__num { font-size: .78em; }
}
@media (max-width: 380px) {
  .switcher__item { font-size: .84rem; padding: .5rem .7rem; }
}

/* ─── Bandeau de photos : défilement vertical continu ─── */
/* Conteneur de référence : les bandeaux y sont positionnés en absolu, si bien
   que leur contenu (six photos empilées) ne dicte pas la hauteur de la grille.
   La colonne de droite épouse donc la hauteur de la colonne de gauche. */
.concept__gallery { position: relative; min-height: 380px; }

.strip {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Fondu haut et bas : les photos entrent et sortent sans bord net */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.strip.is-active { display: block; }

.strip__track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: strip-scroll 26s linear infinite;
}
/* La série est dupliquée par le script : translater de la moitié exacte
   ramène au point de départ, la boucle est donc invisible. */
@keyframes strip-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.strip:hover .strip__track { animation-play-state: paused; }

.strip__item {
  margin: 0;
  flex: 0 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-3);
}
.strip__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}
/* Sans animation, un bandeau figé n'aurait pas de sens : on empile les
   trois photos et on laisse le bloc se dimensionner naturellement. */
@media (prefers-reduced-motion: reduce) {
  .strip { height: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ─────────────── Raisons ─────────────── */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap);
}
.reason { position: relative; padding-top: 3.1rem; }
.reason__idx {
  position: absolute;
  top: 0; left: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--blue);
}
.reason__idx::after {
  content: '';
  display: block;
  width: 28px; height: 3px;
  margin-top: .45rem;
  background: var(--blue);
  border-radius: 2px;
}
.reason h3 {
  font-size: var(--h3);
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: .55rem;
}
.reason p { color: var(--tx-soft); font-size: .92rem; }

/* ─────────────── Chiffres du modèle ─────────────── */
/* ─── Section à fond photo ─── */
.section--photo { isolation: isolate; }
.section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* `contain` et non `cover` : l'enseigne s'affiche en entier, sans gros plan,
   calée sur la gauche là où le dégradé la laisse apparaître. */
.section__bg img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: left center;
}
/* La photo n'est visible que sur la moitié gauche : 50 % d'intensité au bord
   gauche, extinction progressive jusqu'au centre, puis fond noir jusqu'à droite.
   Le voile est donc à 50 % à gauche et totalement opaque dès le milieu. */
.section__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(11,14,19,.50) 0%,
    rgba(11,14,19,.72) 25%,
    rgba(11,14,19,1) 50%,
    var(--ink) 50%,
    var(--ink) 100%);
}
@media (max-width: 760px) {
  /* Sur une colonne, le contenu couvre toute la largeur : un voile uniforme
     garantit la lisibilité. */
  .section__bg::after {
    background: linear-gradient(to bottom, rgba(11,14,19,.88), rgba(11,14,19,.94));
  }
}

/* Chiffres à gauche, projection photo à droite. */
.numbers {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: var(--gap);
  align-items: stretch;
}
@media (max-width: 900px) { .numbers { grid-template-columns: 1fr; } }

.numbers__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-3);
  min-height: 280px;
}
.numbers__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.numbers__photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1.15rem 1.05rem;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(6,8,12,.94), transparent);
}

/* Six chiffres sur une trame de 6 : le premier en bandeau, puis trois cartes,
   puis deux plus larges. Les rangées se remplissent exactement. */
.figures {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
  align-content: start;
}
.figure:nth-child(2),
.figure:nth-child(3),
.figure:nth-child(4) { grid-column: span 2; }
.figure:nth-child(5),
.figure:nth-child(6) { grid-column: span 3; }

@media (max-width: 760px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure:nth-child(n) { grid-column: span 1; }
}
.figure {
  padding: clamp(1.2rem, 2vw, 1.65rem);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Le chiffre décisif occupe un bandeau pleine largeur : il donne le ton,
   et les cinq autres cartes s'alignent proprement sous lui. */
.figure--hero {
  grid-column: 1 / -1 !important;  /* prime sur les spans par position ci-dessus */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem clamp(1.25rem, 3.5vw, 3rem);
  /* Teinte opaque et non rgba : sur le fond photo, une couche translucide
     laisserait apparaître l'enseigne derrière le chiffre. */
  background: linear-gradient(115deg, #1A343C, var(--ink-3) 58%);
  border-color: rgba(44,181,181,.34);
}
.figure--hero .figure__hint { margin-top: 0; max-width: 54ch; }

.figure__label {
  margin: 0 0 .5rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-dim);
}
.figure--hero .figure__label { color: var(--blue); }

.figure__value {
  margin: 0;
  font-size: clamp(1.55rem, 2.9vw, 2.1rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.figure__value--range { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.figure--hero .figure__value { font-size: clamp(2rem, 4vw, 2.85rem); }
.figure__value span { font-size: .55em; }
.figure__plus { font-size: .45em; color: var(--blue); }

.figure__hint {
  margin: .6rem 0 0;
  font-size: .83rem;
  line-height: 1.5;
  color: var(--tx-soft);
}

/* ─────────────── Specs local ─────────────── */
.specs {
  margin-top: var(--gap);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}
.specs__title {
  font-size: var(--h3);
  font-weight: 700;
  margin-bottom: 1rem;
}
.specs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: .6rem 1.5rem;
}
.specs__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .9rem;
  color: var(--tx-soft);
}
.specs__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .52em;
  width: 7px; height: 7px;
  background: var(--blue);
  border-radius: 2px;
  transform: rotate(45deg);
}
.specs__list strong { color: var(--tx); font-weight: 600; }


/* ─────────────── Témoignages ─────────────── */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--gap);
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 0;
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.quote blockquote { margin: 0; }
.quote blockquote::before {
  content: '“';
  display: block;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: .8;
  color: var(--blue);
  margin-bottom: .25rem;
}
.quote blockquote p { font-size: .95rem; line-height: 1.6; color: #D3D9E3; }
.quote figcaption {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.quote__avatar {
  display: grid; place-items: center;
  width: 41px; height: 41px;
  flex-shrink: 0;
  background: var(--ink-4);
  color: var(--blue);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
}
.quote__who strong { display: block; font-size: .92rem; font-weight: 600; }
.quote__who span { font-size: .8rem; color: var(--tx-dim); }

/* ─────────────── Critères (profil) ─────────────── */
.criteria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.criteria__col {
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.criteria__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .98rem;
  font-weight: 700;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.criteria__title::before {
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.criteria__title--yes::before { content: '✓'; background: var(--blue); color: #05201F; }
.criteria__title--no::before  { content: '–'; background: var(--ink-4); color: var(--tx-soft); }

.criteria__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .9rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--tx-soft);
}
.criteria__list li:last-child { margin-bottom: 0; }
.criteria__list strong { color: var(--tx); font-weight: 600; }
.criteria__list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.criteria__list--yes li::before { content: '✓'; color: var(--blue); }
.criteria__list--no  li::before { content: '✗'; color: var(--tx-dim); }

/* ─────────────── Territoires ─────────────── */
.territories {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .territories { grid-template-columns: 1fr; } }

.territories__txt h2 {
  font-size: var(--h2);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.territories__txt p { color: var(--tx-soft); font-size: var(--lead); }

.territories__perks { margin: 1.6rem 0; }
.territories__perks li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .65rem;
  font-weight: 500;
  font-size: .92rem;
}
.territories__perks li::before {
  content: '✓';
  position: absolute; left: 0; top: -.05em;
  display: grid; place-items: center;
  width: 19px; height: 19px;
  background: var(--blue); color: #05201F;
  border-radius: 50%;
  font-size: .68rem; font-weight: 700;
}

/* Carte d'implantation */
.territories__map {
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.territories__map img {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.35rem;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.map-legend__k {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tx-soft);
}
.map-legend i { width: 10px; height: 10px; border-radius: 50%; display: block; flex-shrink: 0; }
.i-open { background: var(--red); }
.i-soon { background: var(--blue); }

/* ─────────────── FAQ ─────────────── */
.faq { display: grid; gap: .6rem; }
.faq__item {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}
.faq__item[open] { border-color: rgba(44,181,181,.3); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  font-size: .96rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 25px; height: 25px;
  background: var(--ink-4);
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
  transition: background-color .2s, color .2s;
}
.faq__item[open] summary::after { content: '−'; background: var(--blue); color: #05201F; }
.faq__item summary:hover { background: rgba(255,255,255,.02); }
.faq__body {
  padding: 0 1.3rem 1.3rem;
  font-size: .91rem;
  line-height: 1.65;
  color: var(--tx-soft);
}

/* ─────────────── Footer ─────────────── */
.footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  color: var(--tx-soft);
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  font-size: .89rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}
@media (max-width: 780px) { .footer__inner { grid-template-columns: 1fr; } }

.footer__brand img { height: 52px; width: auto; margin-bottom: 1.1rem; }
.footer__brand p { line-height: 1.6; }

.footer h4 {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tx);
  margin-bottom: .85rem;
}
.footer a { color: var(--tx-soft); text-decoration: none; }
.footer a:hover { color: var(--blue); }
.footer__addr { margin-top: .8rem; font-size: .84rem; color: var(--tx-dim); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .7rem 1.5rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--tx-dim);
}
.footer__legal p { margin: 0; }

/* ═════════════════════════════════════════════════════════════
   BOUTON FLOTTANT : suit le scroll, ancre vers le formulaire
   ═════════════════════════════════════════════════════════════ */
.floating-cta {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
  transition: transform .34s var(--ease), opacity .28s;
}
.floating-cta.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.floating-cta .btn {
  padding: 1rem 1.85rem;
  font-size: .97rem;
  font-weight: 600;
  border-radius: 100px;
  box-shadow: 0 4px 0 var(--blue-dark), 0 14px 40px rgba(0,0,0,.55), 0 0 0 6px rgba(44,181,181,.10);
}
@media (max-width: 560px) {
  .floating-cta { left: 1rem; right: 1rem; transform: translate(0, calc(100% + 2rem)); }
  .floating-cta.is-visible { transform: translate(0, 0); }
  .floating-cta .btn { width: 100%; }
}

/* ─────────────── Révélation au scroll ─────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ─────────────── Impression ─────────────── */
@media print {
  .floating-cta, .ticker, .hero__bg { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
}