/* ============================================================
   V3 OVERRIDES — couche finale, applique tous les retours
   ============================================================ */

/* ════════════════════════════════════════════════════
   HERO V3 — fond noir + visuel full-bleed à droite
   Calé sur la hero Extension de Garantie Atlantic
   ════════════════════════════════════════════════════ */
.hero-v3 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #0a0a0b;
  color: var(--c-white);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-h) + 2rem) 0 4rem;
}

/* ────── Visuel installateur en bleed droite ────── */
.hero-v3__visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 900px) {
  .hero-v3__visual {
    width: 100%;
    opacity: 0.28;
  }
}
.hero-v3__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center; /* recentre sur le sujet (smartphone + visage) */
  display: block;
}
/* Dégradé sombre — clean : noir solide à gauche, transition rapide, image nette à droite */
.hero-v3__visual-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      #0a0a0b 0%,
      #0a0a0b 12%,
      rgba(10, 10, 11, 0.65) 28%,
      rgba(10, 10, 11, 0.15) 50%,
      transparent 72%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero-v3__visual-fade {
    background:
      linear-gradient(180deg,
        rgba(10, 10, 11, 0.5) 0%,
        rgba(10, 10, 11, 0.82) 65%,
        #0a0a0b 100%);
  }
}

/* Fallback si l'image est absente */
.hero-v3__visual--fallback {
  background:
    radial-gradient(ellipse at right center, rgba(227, 6, 19, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at right top, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
}

/* ────── Contenu à gauche ────── */
.hero-v3__content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.hero-v3__content > * { max-width: 540px; }

.hero-v3__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(227, 6, 19, 0.12);
  border: 1px solid rgba(227, 6, 19, 0.45);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-white);
  align-self: flex-start;
  max-width: max-content;
}
.hero-v3__pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-red);
  animation: hero-v3-pulse 2s var(--ease-out) infinite;
}
@keyframes hero-v3-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.55); }
  70%      { box-shadow: 0 0 0 10px rgba(227, 6, 19, 0); }
}

.hero-v3__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-white);
  text-wrap: balance;
}
.hero-v3__title-em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: rgba(249, 250, 250, 0.55);
  margin-top: 0.2em;
}

.hero-v3__lede {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  color: rgba(249, 250, 250, 0.7);
  max-width: 48ch;
}

.hero-v3__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.hero-v3__actions .btn--ghost {
  background: transparent;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.hero-v3__actions .btn--ghost:hover {
  border-color: var(--c-white);
  background: rgba(255, 255, 255, 0.08);
}

/* ────── Scroll indicator (bottom-right) ────── */
.hero-v3__scroll {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: .7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease-out);
}
.hero-v3__scroll:hover { color: var(--c-white); }
.hero-v3__scroll svg {
  width: 28px;
  height: 28px;
  animation: hero-v3-bob 2.4s var(--ease-in-out) infinite;
}
@keyframes hero-v3-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (max-width: 720px) {
  .hero-v3__scroll {
    right: 50%;
    transform: translateX(50%);
    bottom: 24px;
  }
  .hero-v3__brand { margin-bottom: 1rem; }
  .hero-v3__logo { height: 32px; }
}

/* ════════════════════════════════════════════════════
   BÉNÉFICES — grille simple (remplace constellation)
   ════════════════════════════════════════════════════ */
.benefices {
  background: var(--c-white);
  color: var(--c-anthracite);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.benefices .section-title { color: var(--c-anthracite); margin-inline: auto; text-align: center; }
.benefices .section-lede { color: var(--c-gray); text-align: center; margin-inline: auto; }
.benefices .eyebrow {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

.benefices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 720px) {
  .benefices__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .benefices__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .benefice         { grid-column: span 2; }
  .benefice--accent { grid-column: span 3; }
  .benefice:first-child { grid-column: span 3; }
  .benefice:nth-child(2) { grid-column: span 3; }
  .benefice:nth-child(3) { grid-column: span 2; }
  .benefice:nth-child(4) { grid-column: span 2; }
  .benefice:nth-child(5) { grid-column: span 2; }
}

.benefice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--c-gray-soft);
  border: 1px solid var(--c-gray-light);
  border-radius: 10px;
  transition: border-color 300ms var(--ease-out),
              transform 300ms var(--ease-out),
              box-shadow 300ms var(--ease-out);
}
.benefice:hover {
  border-color: rgba(227, 6, 19, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

.benefice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  color: var(--c-anthracite);
  margin-bottom: .5rem;
  transition: background 300ms var(--ease-out),
              color 300ms var(--ease-out);
}
.benefice__icon svg { width: 24px; height: 24px; }
.benefice:hover .benefice__icon {
  background: var(--c-red);
  color: #fff;
  border-color: var(--c-red);
}

.benefice h3 {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--c-anthracite);
  line-height: 1.2;
}
.benefice p {
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.7);
}

.benefice--accent {
  background: linear-gradient(135deg, var(--c-anthracite) 0%, var(--c-black) 100%);
  border-color: rgba(227, 6, 19, 0.4);
  color: #fff;
}
.benefice--accent h3 { color: #fff; }
.benefice--accent p { color: rgba(255, 255, 255, 0.72); }
.benefice--accent .benefice__icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.benefice--accent:hover .benefice__icon {
  background: var(--c-red);
  border-color: var(--c-red);
}

.benefices__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.5rem;
  background: rgba(227, 6, 19, 0.04);
  border: 1px solid rgba(227, 6, 19, 0.15);
  border-radius: 8px;
  font-size: .9375rem;
  text-align: center;
  color: rgba(26, 26, 26, 0.78);
  max-width: 900px;
  margin-inline: auto;
}
.benefices__note strong { color: var(--c-red); }

/* ════════════════════════════════════════════════════
   PARCOURS V3 — 4 étapes statiques empilées, écran par écran
   Plus de sticky scroll-driven
   ════════════════════════════════════════════════════ */
.parcours-v3 {
  background: var(--c-white);
  color: var(--c-anthracite);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.parcours-v3 .section-title { color: var(--c-anthracite); margin-inline: auto; text-align: center; }
.parcours-v3 .section-lede { color: var(--c-gray); text-align: center; margin-inline: auto; }
.parcours-v3 .eyebrow {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

.parcours-v3__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding: 0;
}

.parcours-v3__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 720px) {
  .parcours-v3__step {
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 5vw, 4rem);
  }
  /* Alternance : 2e et 4e étape en reverse layout */
  .parcours-v3__step:nth-child(even) {
    direction: rtl;
  }
  .parcours-v3__step:nth-child(even) > * {
    direction: ltr;
  }
}

.parcours-v3__screen {
  display: flex;
  justify-content: center;
  align-items: center;
}
.parcours-v3__screen .phone--mini {
  width: clamp(200px, 22vw, 280px);
  aspect-ratio: 9/19;
  position: relative;
}

.parcours-v3__text {
  text-align: left;
}
@media (max-width: 719px) {
  .parcours-v3__text { text-align: center; }
}
.parcours-v3__num {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(227, 6, 19, 0.08);
  color: var(--c-red);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-sm);
}
.parcours-v3__text h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
  color: var(--c-anthracite);
  line-height: 1.15;
}
.parcours-v3__text p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.72);
  max-width: 50ch;
}
.parcours-v3__text strong { color: var(--c-red); font-weight: 700; }

/* Écran 4 : Mon parc */
.phone-parc {
  flex: 1;
  background: #fff;
  padding: 30px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
}
.phone-parc__header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--c-anthracite);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-gray-light);
}
.phone-parc__menu {
  color: var(--c-red);
  font-size: 1rem;
}
.phone-parc__brand {
  font-weight: 700;
  font-size: .9rem;
}
.phone-parc__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-red);
  margin-top: 4px;
}
.phone-parc__count {
  font-size: .7rem;
  color: rgba(26, 26, 26, 0.6);
}
.phone-parc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 0;
}
.phone-parc__list li {
  padding: 8px 10px;
  background: var(--c-gray-soft);
  border-radius: 6px;
  font-size: .7rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.phone-parc__list strong {
  color: var(--c-anthracite);
  font-weight: 600;
}
.phone-parc__list span {
  color: rgba(26, 26, 26, 0.5);
  font-size: .65rem;
}

/* On supprime le focus rouge sur les boutons ghost dans les écrans phone mini */
.parcours-v3 .phone-profile__btn,
.parcours-v3 .phone-dash__action {
  cursor: default;
}

/* ════════════════════════════════════════════════════
   LOC-TILE — ajout des dates par famille produit
   ════════════════════════════════════════════════════ */
.loc-tile__date {
  display: inline-block !important;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  align-self: flex-start;
}
.loc-tile__date--avail {
  background: rgba(46, 184, 100, 0.12);
  color: #1F7A3E;
}
.loc-tile__date--soon {
  background: rgba(26, 26, 26, 0.08);
  color: rgba(26, 26, 26, 0.65);
}

.loc-tile__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Mobile : encore plus compact */
@media (max-width: 720px) {
  .hero-v3 {
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 3rem;
  }
  .hero-v3__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .hero-v3__visual-wrap { max-width: 320px; }
  .parcours-v3__screen .phone--mini { width: 200px; }
}

/* ════════════════════════════════════════════════════
   NAV v3 — header blanc sur fond hero noir
   ════════════════════════════════════════════════════ */
.header { color: var(--c-white); }
.header__brand { color: var(--c-white); }
.header__link { color: rgba(255, 255, 255, 0.72); }
.header__link:hover { color: var(--c-white); }

/* Sur les sections claires (bénéfices, parcours, etc.), le header devient transparent flouté */
.header.is-scrolled {
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Comme on a déjà le logo "atlantic pour les pros" dans le hero v3,
   on peut éventuellement masquer celui du header tout en haut du hero.
   Mais on laisse pour navigation cohérente sur le reste du site. */

/* ════════════════════════════════════════════════════
   CLAIM IMAGE — remplace le texte par la typo FLASH
   ════════════════════════════════════════════════════ */
.hero-v3__title {
  /* le H1 devient un container pour l'image */
  margin-block: 0 var(--space-md);
}
.hero-v3__claim-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  /* La typo est blanche sur fond clair → on inverse pour fond sombre */
  filter: brightness(0) invert(1);
}
/* La partie "FLASH" est rouge dans le PNG, on le préserve avec un mix-blend ?
   En fait l'image originale est déjà multi-couleur (blanc + rouge éclair).
   On retire le filter pour garder les couleurs natives */
.hero-v3__claim-img { filter: none; }

@media (max-width: 720px) {
  .hero-v3__claim-img { max-width: 90%; margin-inline: auto; }
}

/* ════════════════════════════════════════════════════
   GAME BANNER — bandeau jeu concours en haut du site
   ════════════════════════════════════════════════════ */
.game-banner {
  position: relative;
  z-index: 200;
  background: linear-gradient(90deg, #E30613 0%, #B30410 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  transition: max-height 360ms var(--ease-out),
              opacity 240ms var(--ease-out),
              padding 240ms var(--ease-out);
  max-height: 200px;
}
.game-banner.is-closed {
  max-height: 0;
  opacity: 0;
  padding: 0;
}
.game-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(0, 0, 0, 0.15) 0%, transparent 40%);
  pointer-events: none;
}
.game-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px clamp(1rem, 3vw, 2rem);
  max-width: 1400px;
  margin: 0 auto;
}
.game-banner__mascot {
  width: 38px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: mascot-wave 3.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes mascot-wave {
  0%, 90%, 100% { transform: rotate(0deg); }
  93%           { transform: rotate(-8deg); }
  96%           { transform: rotate(6deg); }
}
.game-banner__text {
  flex: 1;
  font-size: clamp(.85rem, 1.1vw, .95rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
}
.game-banner__text strong { color: #fff; font-weight: 700; }
.game-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.game-banner__cta:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: translateX(2px);
}
.game-banner__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out);
}
.game-banner__close:hover { background: rgba(0, 0, 0, 0.35); }
.game-banner__close svg { width: 16px; height: 16px; }

/* (ancien offset 56px retiré — géré par --banner-h dynamique en bas de fichier) */

@media (max-width: 720px) {
  .game-banner__inner { gap: 8px; padding: 8px 12px; }
  .game-banner__mascot { width: 32px; }
  .game-banner__text { font-size: .78rem; }
  .game-banner__cta { padding: 6px 10px; font-size: .78rem; }
  .game-banner__cta span:not([aria-hidden]) { display: none; }
  .game-banner__close { width: 28px; height: 28px; }
}

/* ════════════════════════════════════════════════════
   SECTION JEU CONCOURS — rubrique dédiée
   ════════════════════════════════════════════════════ */
.jeu {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #fef5f6 100%);
  padding: clamp(4rem, 8vw, 7rem) var(--container-pad);
  overflow: hidden;
  isolation: isolate;
}
.jeu__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 80%, rgba(227, 6, 19, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(227, 6, 19, 0.04) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.jeu__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .jeu__inner {
    grid-template-columns: 5fr 7fr;
  }
}

.jeu__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jeu__mascot {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(227, 6, 19, 0.25));
  animation: mascot-bounce 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes mascot-bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
.jeu__glow {
  position: absolute;
  inset: 20%;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.25) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 1;
  animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50%      { opacity: 1; transform: scale(1.05); }
}

.jeu__content { color: var(--c-anthracite); }
.jeu__content .section-title { color: var(--c-anthracite); margin-bottom: var(--space-md); }

.jeu__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.78);
  margin-bottom: var(--space-md);
  max-width: 56ch;
}
.jeu__lede strong { color: var(--c-anthracite); }

.jeu__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: var(--space-md) 0;
}
.jeu__steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--c-gray-light);
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--c-anthracite);
  transition: border-color var(--t) var(--ease-out),
              transform var(--t) var(--ease-out);
}
.jeu__steps li:hover {
  border-color: rgba(227, 6, 19, 0.4);
  transform: translateX(4px);
}
.jeu__steps li span {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-red);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}

.jeu__period {
  font-size: .85rem;
  color: var(--c-gray);
  margin-bottom: var(--space-md);
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  border-left: 3px solid var(--c-red);
}

.jeu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.jeu__rules {
  font-size: .9rem;
  color: var(--c-anthracite);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
.jeu__rules:hover { color: var(--c-red); }

/* CTA placeholder : style discret pour signaler que l'URL est à définir */
[data-placeholder-cta] {
  position: relative;
}
[data-placeholder-cta]::after {
  content: '⚠ URL à définir';
  position: absolute;
  top: -8px;
  right: -8px;
  background: #FF9500;
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  pointer-events: none;
}
[data-placeholder-cta]:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════
   MASCOTTE QR FLOTTANTE — dans certaines sections
   ════════════════════════════════════════════════════ */
.mascot-float {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
}
.mascot-float--demo {
  top: 30px;
  right: 30px;
  width: clamp(60px, 8vw, 100px);
  animation: mascot-peek 4s ease-in-out infinite;
}
@keyframes mascot-peek {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-5deg) translateY(-4px); }
  75%      { transform: rotate(5deg) translateY(2px); }
}
@media (max-width: 720px) {
  .mascot-float--demo { top: 12px; right: 12px; width: 56px; }
}

/* Lien jeu concours dans la nav : accent visuel */
.header__link--accent {
  background: rgba(227, 6, 19, 0.08);
  color: var(--c-red) !important;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(227, 6, 19, 0.2);
}
.header__link--accent::after { display: none; }
.header__link--accent:hover {
  background: rgba(227, 6, 19, 0.16);
  border-color: var(--c-red);
}

/* ════════════════════════════════════════════════════
   FIX HEADER MOBILE — fond clair translucide, texte sombre
   Force la spécificité au-dessus du v1 enhancements
   ════════════════════════════════════════════════════ */
body .header,
body .header.is-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--c-anthracite) !important;
}
body .header__brand,
body .header__brand svg {
  color: var(--c-anthracite) !important;
}
body .header__link {
  color: rgba(26, 26, 26, 0.72) !important;
}
body .header__link:hover {
  color: var(--c-anthracite) !important;
}
body .header__cta {
  background: var(--c-red) !important;
  color: #fff !important;
}

@media (max-width: 720px) {
  body .header {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  }
}

/* ════════════════════════════════════════════════════
   FIX HERO MOBILE — image bandeau visible + texte centré
   ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-v3 {
    display: block !important;
    padding: calc(var(--header-h) + 0px) 0 3rem !important;
    min-height: auto !important;
  }

  /* Image devient un bandeau en haut, pleinement visible */
  .hero-v3__visual {
    position: relative !important;
    width: 100% !important;
    height: clamp(280px, 45vh, 380px) !important;
    opacity: 1 !important;
    inset: auto !important;
  }
  .hero-v3__img {
    object-position: 60% 30% !important; /* recadré sur le visage + smartphone */
  }
  /* Le fade : juste un léger dégradé en bas pour aller au fond noir */
  .hero-v3__visual-fade {
    background:
      linear-gradient(180deg,
        rgba(10, 10, 11, 0) 0%,
        rgba(10, 10, 11, 0) 60%,
        rgba(10, 10, 11, 0.8) 92%,
        #0a0a0b 100%) !important;
  }

  /* Contenu centré sous le bandeau */
  .hero-v3__content {
    text-align: center;
    padding-top: clamp(1.5rem, 4vh, 2.5rem);
    padding-inline: 1.5rem;
    align-items: center;
  }
  .hero-v3__content > * {
    max-width: 100% !important;
    text-align: center;
  }
  .hero-v3__pill {
    align-self: center !important;
  }
  .hero-v3__claim-img {
    max-width: 320px;
    margin-inline: auto !important;
  }
  .hero-v3__lede {
    max-width: 38ch;
    margin-inline: auto;
  }
  .hero-v3__actions {
    justify-content: center;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-v3__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Le scroll indicator centré en bas */
  .hero-v3__scroll {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 2rem auto 0 !important;
  }
}

/* ════════════════════════════════════════════════════
   FIX HEADER MOBILE — pas de gap, sticky comme attendu
   ════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body .header {
    /* Header en sticky : suit le scroll, colle au top */
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;

    /* Fond sombre comme demandé */
    background: rgba(15, 15, 16, 0.92) !important;
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--c-white) !important;
    box-shadow: none !important;
  }
  body .header__brand,
  body .header__brand svg { color: var(--c-white) !important; }
  body .header__link { color: rgba(249, 250, 250, 0.75) !important; }

  /* (offset géré par --banner-h dynamique, plus de top:0 forcé ici) */

  /* La bannière jeu est aussi en sticky au-dessus du header */
  body .game-banner {
    position: sticky;
    top: 0;
    z-index: 250;
  }

  /* Plus de padding-top sur le hero (sticky gère naturellement) */
  .hero-v3 {
    padding-top: 0 !important;
  }
}

/* ════════════════════════════════════════════════════
   FIX MOBILE — centrer le "DÉFILER" sous le hero
   ════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body .hero-v3 .hero-v3__scroll,
  body section.hero-v3 a.hero-v3__scroll {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 2rem auto 0 !important;
    width: max-content !important;
    display: flex !important;
  }
}

/* ════════════════════════════════════════════════════
   FIX FINAL — Header sombre toujours + sous la bannière
   Banner closed → header remonte à top:0
   ════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Variable hauteur bannière (par défaut 56px, 0 quand fermée) */
  body {
    --banner-h: 56px;
  }
  body.banner-closed {
    --banner-h: 0px;
  }

  /* Header : sticky, sous la bannière, animé */
  body .header,
  body .header.is-scrolled,
  body section .header,
  body .header[data-header] {
    position: sticky !important;
    top: var(--banner-h) !important;
    inset: auto !important;
    z-index: 100 !important;
    background: rgba(15, 15, 16, 0.95) !important;
    backdrop-filter: blur(12px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--c-white) !important;
    transition: top 360ms var(--ease-out),
                background 240ms var(--ease-out) !important;
    box-shadow: none !important;
  }
  body .header__brand,
  body .header__brand svg {
    color: var(--c-white) !important;
  }
  body .header__link {
    color: rgba(249, 250, 250, 0.78) !important;
  }
  body .header__link:hover {
    color: var(--c-white) !important;
  }

  /* Bannière : sticky au-dessus du header */
  body .game-banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }
}

/* ════════════════════════════════════════════════════
   FIX FINAL — supprime tous les traits avant les eyebrows
   + centre toutes les sections sur mobile
   ════════════════════════════════════════════════════ */

/* On vire tous les "cadratins" / petits traits avant les eyebrows */
.eyebrow::before,
.eyebrow::after {
  display: none !important;
  content: none !important;
}
.eyebrow {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
}

/* Mobile : tout centré dans toutes les sections */
@media (max-width: 720px) {
  /* Sections génériques */
  .jeu,
  .jeu__content,
  .video-demo,
  .video-demo .container,
  .demo-live,
  .demo-live .container,
  .roadmap,
  .roadmap .container,
  .faq,
  .faq .container,
  .cta-final {
    text-align: center;
  }

  /* Titres, lede, eyebrows : centrés et margin auto */
  .jeu .eyebrow,
  .video-demo .eyebrow,
  .demo-live .eyebrow,
  .roadmap .eyebrow,
  .faq .eyebrow,
  .cta-final .eyebrow {
    margin-inline: auto !important;
    text-align: center;
    justify-content: center;
  }

  .section-title,
  .section-lede,
  .jeu__lede {
    text-align: center !important;
    margin-inline: auto !important;
  }

  /* Jeu concours : la mascotte centrée au-dessus + contenu centré */
  .jeu__inner {
    text-align: center;
  }
  .jeu__content {
    text-align: center;
    align-items: center;
  }
  .jeu__steps {
    align-items: stretch;
    text-align: left;
    max-width: 360px;
    margin-inline: auto;
  }
  .jeu__actions {
    justify-content: center;
    align-items: center;
  }
  .jeu__period {
    max-width: 360px;
    margin-inline: auto;
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════
   FIX DESKTOP — header noir comme v1, même au scroll
   ════════════════════════════════════════════════════ */
@media (min-width: 721px) {
  body .header,
  body .header.is-scrolled,
  body .header[data-header] {
    background: rgba(15, 15, 16, 0.92) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--c-white) !important;
    box-shadow: none !important;
  }
  body .header__brand,
  body .header__brand svg { color: var(--c-white) !important; }
  body .header__link { color: rgba(249, 250, 250, 0.78) !important; }
  body .header__link:hover { color: var(--c-white) !important; }
}

/* ════════════════════════════════════════════════════
   FIX HEADER — CTA "Jeu concours" stylé en accent
   ════════════════════════════════════════════════════ */
body .header__cta.header__cta--game {
  background: linear-gradient(135deg, #E30613 0%, #B30410 100%) !important;
  box-shadow: 0 6px 24px rgba(227, 6, 19, 0.32) !important;
  padding: .65rem 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
body .header__cta.header__cta--game::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
  pointer-events: none;
}
body .header__cta.header__cta--game:hover {
  background: linear-gradient(135deg, #B30410 0%, #8a0309 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(227, 6, 19, 0.45) !important;
}

/* Mobile : le CTA jeu reste visible (au lieu d'être caché comme l'ancien CTA Tester) */
@media (max-width: 720px) {
  body .header__cta.header__cta--game {
    display: inline-flex !important;
    padding: .5rem .85rem !important;
    font-size: .82rem !important;
  }
}

/* ════════════════════════════════════════════════════
   FIX DESKTOP — bandeau jeu sticky + header sous le bandeau
   (même logique que mobile : --banner-h pilote le top du header)
   ════════════════════════════════════════════════════ */
@media (min-width: 721px) {
  body {
    --banner-h: 56px;
  }
  body.banner-closed {
    --banner-h: 0px;
  }

  /* Bandeau sticky tout en haut */
  body .game-banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 250 !important;
  }

  /* Header sticky, collé sous le bandeau, descend à 0 quand bandeau fermé */
  body .header,
  body .header.is-scrolled,
  body .header[data-header] {
    position: sticky !important;
    top: var(--banner-h) !important;
    inset: auto !important;
    z-index: 100 !important;
    transition: top 360ms var(--ease-out),
                background 240ms var(--ease-out) !important;
  }
}

/* ════════════════════════════════════════════════════
   FIX — inset:auto écrasait le top du header → sticky cassé
   On définit l'inset complet en une fois (top piloté par --banner-h)
   ════════════════════════════════════════════════════ */
body .header,
body .header.is-scrolled,
body .header[data-header] {
  position: sticky !important;
  inset: var(--banner-h, 0px) 0 auto 0 !important;
  z-index: 100 !important;
}
body .game-banner {
  position: sticky !important;
  inset: 0 0 auto 0 !important;
  z-index: 250 !important;
}

/* ════════════════════════════════════════════════════
   OÙ CHERCHER — grille adaptée à 5 tiles
   ════════════════════════════════════════════════════ */
.loc-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .loc-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1100px) {
  .loc-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ════════════════════════════════════════════════════
   RÈGLE FINALE AUTORITAIRE — header sticky sous le bandeau
   Spécificité forte pour battre tous les blocs précédents
   ════════════════════════════════════════════════════ */
html body header.header,
html body header.header.is-scrolled,
html body header.header[data-header] {
  position: sticky !important;
  top: var(--banner-h, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 100 !important;
  transition: top 320ms var(--ease-out), background 240ms var(--ease-out) !important;
}
html body aside.game-banner {
  position: sticky !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 250 !important;
}

/* ════════════════════════════════════════════════════
   LOC-TILE B1 — badge centré + étiquette réduite en coin
   + silhouette produit agrandie (ne plus masquer le schéma)
   ════════════════════════════════════════════════════ */

/* A. Badge date centré (au lieu de collé à gauche) */
.loc-tile__date {
  align-self: center !important;
}

/* B. Silhouette produit plus grande et bien visible */
.loc-tile__product {
  width: 64% !important;
  height: 92% !important;
  opacity: 1 !important;
}

/* C. Mini-étiquette réduite, calée dans le coin bas-droite,
      sans recouvrir le produit */
.loc-tile__label {
  width: 58px !important;
  bottom: 7px !important;
  right: 7px !important;
  padding: 3px 4px !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
}
.loc-tile__label-head {
  padding-bottom: 1px !important;
  margin-bottom: 2px !important;
}
.loc-tile__label-brand {
  font-size: .42rem !important;
}
.loc-tile__label-body {
  gap: 3px !important;
}
.loc-tile__label-qr {
  width: 16px !important;
  height: 16px !important;
}
.loc-tile__label-text {
  font-size: .34rem !important;
  line-height: 1.25 !important;
}
.loc-tile__label-text p:first-child {
  font-size: .38rem !important;
}

/* D. On masque les traits de liaison (superflus à cette taille) */
.loc-tile__line,
.loc-tile__line--up,
.loc-tile__line--down {
  display: none !important;
}

/* Mobile : étiquette encore un peu plus petite */
@media (max-width: 720px) {
  .loc-tile__label { width: 52px !important; }
  .loc-tile__label-qr { width: 14px !important; height: 14px !important; }
}

/* ════════════════════════════════════════════════════
   RETOURS DACIL V3 — hero image + mascotte + pop-up
   ════════════════════════════════════════════════════ */

/* A. On voit mieux l'installateur : image plus large + dégradé adouci */
.hero-v3__visual {
  width: 66% !important;
}
.hero-v3__visual-fade {
  background:
    linear-gradient(90deg,
      #0a0a0b 0%,
      #0a0a0b 6%,
      rgba(10, 10, 11, 0.55) 22%,
      rgba(10, 10, 11, 0.12) 42%,
      transparent 62%) !important;
}
@media (max-width: 900px) {
  .hero-v3__visual { width: 100% !important; opacity: 0.32 !important; }
}

/* B. Mascotte QR dans le hero (coin bas-droite, salue) */
.hero-v3__mascot {
  position: absolute;
  bottom: 24px;
  left: clamp(2rem, 6vw, 5rem);
  width: clamp(90px, 11vw, 150px);
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
  animation: hero-mascot-bob 4s ease-in-out infinite;
}
@keyframes hero-mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}
@media (max-width: 900px) {
  .hero-v3__mascot {
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    width: 78px;
    animation: none;
  }
}

/* ════════════════════════════════════════════════════
   POP-UP JEU CONCOURS "INSTANT GAGNANT"
   ════════════════════════════════════════════════════ */
.popgame {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: var(--container-pad);
}
.popgame[hidden] { display: none; }

.popgame__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.popgame.is-open .popgame__overlay { opacity: 1; }

.popgame__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.popgame.is-open .popgame__card {
  opacity: 1;
  transform: scale(1) translateY(0);
}
@media (min-width: 640px) {
  .popgame__card { grid-template-columns: 5fr 7fr; }
}

.popgame__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--c-anthracite);
  transition: background var(--t-fast) var(--ease-out);
}
.popgame__close:hover { background: rgba(0, 0, 0, 0.14); }
.popgame__close svg { width: 18px; height: 18px; }

.popgame__visual {
  position: relative;
  background: linear-gradient(135deg, #E30613 0%, #B30410 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  min-height: 180px;
  overflow: hidden;
}
.popgame__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.popgame__mascot {
  width: clamp(120px, 40vw, 190px);
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.3));
  animation: popgame-mascot 3.5s ease-in-out infinite;
}
@keyframes popgame-mascot {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
.popgame__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 6px 12px;
  background: #fff;
  color: var(--c-red);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.popgame__body {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.popgame__kicker {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red);
}
.popgame__title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-anthracite);
}
.popgame__title span { color: var(--c-red); }
.popgame__text {
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.7);
}
.popgame__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: .5rem;
}
.popgame__later {
  font-size: .9rem;
  color: var(--c-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
.popgame__later:hover { color: var(--c-anthracite); }
.popgame__legal {
  font-size: .75rem;
  color: var(--c-gray);
  margin-top: .25rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-v3__mascot, .popgame__mascot { animation: none !important; }
}

/* ════════════════════════════════════════════════════
   ACCORDÉON SCHÉMAS — schémas détaillés par famille
   (style aligné FAQ, DA actuelle)
   ════════════════════════════════════════════════════ */
.schema-acc {
  max-width: 900px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schema-acc__intro {
  text-align: center;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--c-gray);
  margin-bottom: .5rem;
}

.schema-item {
  border: 1px solid var(--c-gray-light);
  border-radius: 8px;
  background: var(--c-white);
  overflow: hidden;
  transition: border-color var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease-out);
}
.schema-item:hover { border-color: rgba(227, 6, 19, 0.3); }
.schema-item[open] {
  border-color: var(--c-red);
  box-shadow: 0 8px 28px rgba(15, 15, 16, 0.06);
}

.schema-item__sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  user-select: none;
  transition: background var(--t-fast) var(--ease-out);
}
.schema-item__sum::-webkit-details-marker { display: none; }
.schema-item__sum:hover { background: rgba(227, 6, 19, 0.03); }
.schema-item__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-anthracite);
  letter-spacing: -0.01em;
}

/* Icône +/× (réutilise le pattern FAQ) */
.schema-item__icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 15, 16, 0.06);
  flex-shrink: 0;
  transition: background var(--t) var(--ease-out);
}
.schema-item__icon::before,
.schema-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-anthracite);
  border-radius: 1px;
  transition: transform var(--t) var(--ease-out), background var(--t) var(--ease-out);
}
.schema-item__icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.schema-item__icon::after  { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.schema-item[open] .schema-item__icon { background: var(--c-red); }
.schema-item[open] .schema-item__icon::before,
.schema-item[open] .schema-item__icon::after { background: #fff; }
.schema-item[open] .schema-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.schema-item__body {
  padding: 0 1rem 1.2rem;
}
.schema-item[open] .schema-item__body {
  animation: schema-in 360ms var(--ease-out);
}
@keyframes schema-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Conteneur scrollable horizontal pour les schémas larges */
.schema-item__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--c-gray-light);
  border-radius: 6px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.schema-item__img {
  display: block;
  height: auto;
  /* Largeur mini pour rester lisible : scroll horizontal si écran étroit */
  width: 100%;
  min-width: 760px;
}
.schema-item__hint {
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--c-gray);
  text-align: center;
  line-height: 1.4;
}

/* Indication scroll sur mobile */
@media (max-width: 720px) {
  .schema-item__scroll {
    position: relative;
  }
  .schema-item__scroll::after {
    content: '← faites défiler →';
    display: block;
    text-align: center;
    font-size: .7rem;
    color: var(--c-gray);
    padding: 6px 0;
    background: var(--c-gray-soft);
  }
  .schema-item__label { font-size: .9rem; }
  .schema-item__sum { padding: 1rem 1.1rem; }
}

/* ════════════════════════════════════════════════════
   SCHÉMA — fix overflow mobile + bouton zoom + lightbox
   ════════════════════════════════════════════════════ */

/* L'image rentre TOUJOURS dans son conteneur (plus de min-width qui déborde) */
.schema-item__scroll { display: none; } /* ancien conteneur scroll retiré */

.schema-item__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--c-gray-light);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
  transition: border-color var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease-out);
}
.schema-item__zoom:hover,
.schema-item__zoom:focus-visible {
  border-color: rgba(227, 6, 19, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.schema-item__zoom .schema-item__img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0; /* annule le min-width 760 qui faisait déborder */
}
.schema-item__zoom-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 6px 12px;
  background: rgba(15, 15, 16, 0.82);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: background var(--t) var(--ease-out);
}
.schema-item__zoom:hover .schema-item__zoom-badge {
  background: var(--c-red);
}

/* ────────── LIGHTBOX ────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.92);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
}
.lightbox.is-open .lightbox__overlay { opacity: 1; }

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background var(--t-fast) var(--ease-out);
}
.lightbox__close:hover { background: var(--c-red); }
.lightbox__close svg { width: 22px; height: 22px; }

.lightbox__hint {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: .8rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.lightbox__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
  -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom pan-x pan-y; /* pincer-zoomer natif sur mobile */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.lightbox.is-open .lightbox__stage { opacity: 1; transform: scale(1); }
.lightbox__stage.is-zoomed { cursor: grab; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 200ms var(--ease-out);
  background: #fff;
  border-radius: 6px;
  /* large déf : on autorise à dépasser pour le zoom */
}
.lightbox__stage.is-zoomed .lightbox__img {
  max-width: none;
  max-height: none;
}

@media (max-width: 720px) {
  .lightbox__stage { padding: 56px 8px; }
  .lightbox__hint { font-size: .72rem; top: 14px; }
}

/* ════════════════════════════════════════════════════
   ROADMAP — tag "déploiement en cours" (ventilation)
   ════════════════════════════════════════════════════ */
.roadmap__item--soon {
  flex-wrap: wrap;
}
.roadmap__tag {
  font-style: normal;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-gray);
  background: rgba(26, 26, 26, 0.07);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════
   JEU — ligne "aucune inscription" (pas de CTA participer)
   ════════════════════════════════════════════════════ */
.jeu__noinscription {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: var(--space-md);
  padding: 10px 14px;
  background: rgba(46, 184, 100, 0.08);
  border: 1px solid rgba(46, 184, 100, 0.25);
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--c-anthracite);
  max-width: 56ch;
}
.jeu__noinscription span {
  color: #1F7A3E;
  font-weight: 800;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .jeu__noinscription { text-align: left; }
}

/* ════════════════════════════════════════════════════
   FALLBACK NO-JS — si les modules ne tournent pas (file://
   ou erreur), on garde tout le contenu visible.
   Le JS ajoute .has-js sur <html> dès qu'il démarre.
   ════════════════════════════════════════════════════ */
html:not(.has-js) [data-reveal],
html:not(.has-js) [data-reveal] * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ════════════════════════════════════════════════════
   FLASH PIN — picto flash dans la légende des schémas ⚡
   ════════════════════════════════════════════════════ */
.schema-flash {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; margin-right: .15em;
  border-radius: 50%; background: #E30613; color: #fff;
  font-size: .92em; line-height: 1; vertical-align: -.32em;
  box-shadow: 0 0 0 0 rgba(227, 6, 19, .55);
  animation: schema-flash-pulse 1.8s ease-out infinite;
}
@keyframes schema-flash-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(227, 6, 19, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(227, 6, 19, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
}
@media (prefers-reduced-motion: reduce) { .schema-flash { animation: none; } }

/* ════════════════════════════════════════════════════
   FIX lisibilité — QR géant en fond de la section finale
   doit rester ultra discret, même sans JS (fallback no-js).
   ════════════════════════════════════════════════════ */
html .cta-final[data-reveal] .cta-final__qr-bg,
html .cta-final .cta-final__qr-bg { opacity: 0.05 !important; }

/* ════════════════════════════════════════════════════
   PARCOURS — vraies captures dans les cadres téléphone
   (retour Julite : mettre les vrais visuels du parcours)
   ════════════════════════════════════════════════════ */
.phone__shot {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #fff;
}
.phone__shot--photo { object-position: center; }

/* ════════════════════════════════════════════════════
   FIX mobile — alignement des produits roadmap
   (le centrage mobile décalait icône vs texte)
   ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .roadmap .roadmap__list li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .6em;
    text-align: left;
  }
}

/* ════════════════════════════════════════════════════
   FIX — photo de campagne (installateur) plus visible
   mobile + desktop (retour : quasi invisible)
   ════════════════════════════════════════════════════ */
.hero-v3__img { filter: brightness(1.1) contrast(1.04) saturate(1.03); }
@media (max-width: 900px) {
  .hero-v3__visual { opacity: 0.55 !important; }
}

/* ════════════════════════════════════════════════════
   FIX — la mascotte QR ne doit PAS couvrir les CTA du hero
   (retour : à 100%, le QR sur jambes passe sur les boutons)
   → le contenu (dont les CTA) repasse au-dessus de la mascotte
   ════════════════════════════════════════════════════ */
.hero-v3__content { position: relative; z-index: 3; }
.hero-v3__mascot { z-index: 1 !important; }