/* =========================================================
   Garage Payet Auto — page de conversion
   Réalisée par Adamkom by JJP

   Page de vente, pas un site : aucune navigation, un seul
   chemin, un seul geste attendu — écrire sur WhatsApp.
   ========================================================= */

/* ---------- Fontes auto-hébergées ---------- */
@font-face {
  font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Poppins'; src: url('../fonts/poppins-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ---------- Jetons ---------- */
:root {
  --rouge:       #E4002B;
  --rouge-vif:   #FF1F3D;
  --rouge-fonce: #A80020;
  --noir:        #14161A;
  --encre:       #22262E;
  --gris:        #6C737F;
  --gris-2:      #9AA1AB;
  --bord:        #E4E8ED;
  --creme:       #F6F7F9;
  --blanc:       #FFFFFF;
  --vert:        #25D366;
  --vert-fonce:  #128C7E;
  --ambre:       #FFB020;

  /* signature agence */
  --adam-rose:   #E6007E;
  --adam-orange: #F68B21;

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

  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1180px;
  --r: 18px;
  --r-lg: 28px;

  --ombre:    0 4px 16px rgba(20, 22, 26, .06);
  --ombre-md: 0 14px 38px -12px rgba(20, 22, 26, .16);
  --ombre-lg: 0 30px 70px -24px rgba(20, 22, 26, .28);

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

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
h3 { font-size: 1.28rem; letter-spacing: -.02em; line-height: 1.2; }

p { margin: 0; }

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

.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;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
section { position: relative; }

.rouge { color: var(--rouge); }

/* =========================================================
   REVEAL — filet de sécurité
   L'état masqué n'existe que si le JS a posé .js-anim.
   Sans JS, ou si le désarmement de secours se déclenche,
   tout le contenu reste visible.
   ========================================================= */
.reveal { opacity: 1; transform: none; }
html.js-anim .reveal:not(.is-in) { opacity: 0; transform: translateY(24px); }
html.js-anim .reveal {
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* =========================================================
   ÉLÉMENTS RÉCURRENTS
   ========================================================= */

/* pastille façon « KEY SERVICES » de la référence */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  background: var(--noir);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}
.pill--rouge { background: var(--rouge); }
.pill--blanc { background: #fff; color: var(--noir); }

.btn {
  --bg: var(--rouge);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.1rem 1.9rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--bg) 80%, transparent);
}
.btn::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.3) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px color-mix(in srgb, var(--bg) 85%, transparent); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 1.25em; height: 1.25em; flex: none; }

.btn--wa    { --bg: var(--vert); --fg: #04140A; }
.btn--noir  { --bg: var(--noir); }
/* Fond blanc plein, pas transparent : ce bouton passe par-dessus la photo
   du hero, et son libellé doit rester lisible quoi qu'il y ait derrière. */
.btn--ligne {
  --bg: #fff; --fg: var(--encre);
  border: 2px solid var(--bord);
  box-shadow: none;
}
.btn--ligne:hover { border-color: var(--noir); box-shadow: none; }
.btn--lg    { padding: 1.25rem 2.3rem; font-size: 1.06rem; }
.btn--block { width: 100%; }

/* rythme des sections */
.sec { padding-block: clamp(3.6rem, 7vw, 6rem); }
.sec--creme { background: var(--creme); }

.sec-head { max-width: 620px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head .pill { margin-bottom: 1.2rem; }
.sec-head h2 { margin-bottom: .9rem; text-wrap: balance; }
.sec-head p { color: var(--gris); font-size: 1.05rem; max-width: 52ch; }
.sec-head--c { margin-inline: auto; text-align: center; }
.sec-head--c p { margin-inline: auto; }

/* =========================================================
   1 — ACCROCHE
   Deux colonnes : le discours à gauche, le panneau rouge
   « services + adresse » à droite, comme sur la référence.
   ========================================================= */
.hero {
  position: relative;
  padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 78% 8%, rgba(228, 0, 43, .07), transparent 60%),
    linear-gradient(180deg, #FBFCFD 0%, var(--blanc) 55%);
}
/* courbe rouge décorative en fond, à droite */
.hero::before {
  content: '';
  position: absolute;
  top: -18%; right: -22%;
  width: 58vw; height: 58vw;
  max-width: 760px; max-height: 760px;
  border-radius: 46% 54% 40% 60% / 55% 42% 58% 45%;
  background: linear-gradient(150deg, rgba(228,0,43,.09), rgba(255,31,61,.03));
  animation: morph 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes morph {
  to { border-radius: 58% 42% 55% 45% / 42% 56% 44% 58%; transform: rotate(14deg) scale(1.07); }
}

.hero__marque {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.hero__marque svg { width: 46px; height: 46px; flex: none; }
.hero__marque b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; display: block; line-height: 1.1; }
.hero__marque span { font-size: .72rem; font-weight: 600; color: var(--gris); letter-spacing: .1em; text-transform: uppercase; }

/* illustrations d'atelier en filigrane */
.deco {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 4vw, 3rem); }

/* La photo détourée : sous le texte à partir de 940 px, elle glisse vers la
   droite pour passer derrière le panneau rouge — comme sur la référence. */
.hero__photo { margin-bottom: -1rem; }
.hero__photo img { width: 100%; height: auto; margin-inline: auto; }

@media (min-width: 940px) {
  .hero__grid {
    grid-template-columns: 1fr minmax(300px, 355px);
    align-items: start;
    row-gap: 0;
  }
  .hero__texte { grid-column: 1; grid-row: 1; }
  .panneau     { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  /* La photo remonte dans l'espace laissé libre à droite du bloc de texte,
     et déborde sous le panneau rouge — comme sur l'affiche de référence.
     z-index négatif : elle reste derrière les boutons en toute circonstance. */
  /* Pas de remontée sous le bloc de texte : les boutons et la ligne de
     réassurance n'ont pas de fond plein, la photo passerait derrière leurs
     lettres. Elle démarre donc sous le texte et ne déborde que vers la
     droite, sous le panneau rouge — l'effet de la référence est conservé. */
  .hero__photo {
    grid-column: 1;
    grid-row: 2;
    margin: 1rem -28% -2rem 0;
    z-index: -1;
    display: flex;
    justify-content: flex-end;
  }
  .hero__photo img { max-width: 470px; margin-inline: 0; }
}
@media (max-width: 939px) {
  .hero__photo img { max-width: 440px; }
}

/* Le H1 est le LCP : aucune animation d'opacité dessus. */
.hero h1 { margin-bottom: 1.15rem; }
.hero h1 .rouge { position: relative; white-space: nowrap; }

/* l'engrenage qui remplace le O de « forme » */
.rouage {
  display: inline-block;
  width: .82em; height: .82em;
  vertical-align: -.07em;
  margin-inline: -.02em;
  fill: var(--rouge);
  animation: tourne 9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
/* Trait tracé sous le mot clé. Il reste dans l'interligne du titre :
   au-delà de .04em il déborde et barre la ligne suivante. */
.hero h1 .rouge::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .07em;
  border-radius: 99px;
  background: var(--rouge);
  transform: scaleX(0);
  transform-origin: left;
  animation: trace .9s var(--ease) .35s forwards;
}
@keyframes trace { to { transform: scaleX(1); } }

.hero__lead {
  font-size: clamp(1.03rem, 2vw, 1.18rem);
  color: var(--gris);
  max-width: 42ch;
  margin-bottom: 1.3rem;
}

.hero__fade { animation: monte .8s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes monte { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* bloc remise encadré, repris de la référence */
.remise {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.6rem;
  border: 2.5px solid var(--noir);
  border-radius: 14px;
  margin-bottom: 1.4rem;
  background: #fff;
  box-shadow: 5px 5px 0 0 var(--noir);
}
.remise__n {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--rouge);
}
.remise__t { font-size: .84rem; font-weight: 600; color: var(--gris); line-height: 1.3; }
.remise__t b { display: block; color: var(--encre); font-size: .95rem; font-weight: 700; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }

/* note Google */
.gnote {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem 1.1rem .65rem .75rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--ombre);
}
.gnote__g { width: 22px; height: 22px; flex: none; }
.gnote__score { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.gnote__stars { display: flex; gap: 1px; }
.gnote__stars svg { width: 13px; height: 13px; fill: var(--ambre); }
.gnote__meta { font-size: .76rem; color: var(--gris); line-height: 1.3; }

/* --- panneau rouge : services + adresse --- */
.panneau {
  background: linear-gradient(160deg, var(--rouge) 0%, var(--rouge-fonce) 100%);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.6rem;
  color: #fff;
  box-shadow: var(--ombre-lg);
  position: relative;
  overflow: hidden;
}
.panneau::after {
  content: '';
  position: absolute;
  right: -30%; bottom: -40%;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.panneau > * { position: relative; z-index: 1; }
.panneau .pill { margin-bottom: 1.1rem; }
.panneau__liste { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.panneau__liste li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .42rem 0;
  font-size: 1.02rem;
  font-weight: 600;
}
.panneau__liste li::before { content: '•'; color: #fff; font-size: 1.3rem; line-height: 1; }
.panneau__liste li span { margin-left: auto; font-size: .8rem; font-weight: 600; opacity: .82; }
.panneau__sep { height: 1px; background: rgba(255, 255, 255, .22); margin-bottom: 1.3rem; }
.panneau__adr { display: flex; gap: .7rem; font-size: .93rem; line-height: 1.5; font-weight: 500; }
.panneau__adr svg { width: 19px; height: 19px; flex: none; margin-top: 2px; fill: #fff; }
.panneau__adr b { display: block; font-weight: 700; }

/* pastille « ouvert / fermé » calculée en direct */
.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.2rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .2);
  font-size: .8rem;
  font-weight: 600;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); flex: none; }
.status.is-open .status__dot {
  background: #6EF7A0;
  box-shadow: 0 0 0 0 rgba(110, 247, 160, .7);
  animation: battement 2.4s var(--ease) infinite;
}
@keyframes battement {
  70%  { box-shadow: 0 0 0 8px rgba(110, 247, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 247, 160, 0); }
}

/* réassurance sous l'accroche */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  list-style: none;
  margin: 0; padding: 0;
  font-size: .87rem;
  color: var(--gris);
  font-weight: 500;
}
.trust li { display: flex; align-items: center; gap: .45rem; }
.trust svg { width: 17px; height: 17px; stroke: var(--rouge); fill: none; stroke-width: 2.6; flex: none; }

/* =========================================================
   2 — PREUVE : vidéo + chiffres
   ========================================================= */
.proof__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .proof__grid { grid-template-columns: minmax(0, 290px) 1fr; } }

.short {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--noir);
  box-shadow: var(--ombre-lg);
  max-width: 290px;
  width: 100%;
  margin-inline: auto;
}
.short video, .short img { width: 100%; height: 100%; object-fit: cover; }
.short__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to top, rgba(20,22,26,.65), rgba(20,22,26,.05) 55%);
  transition: opacity .3s var(--ease);
}
.short.is-playing .short__play { opacity: 0; pointer-events: none; }
.short__btn {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);
  animation: onde 2.6s var(--ease) infinite;
  transition: transform .25s var(--ease);
}
.short__btn svg { width: 22px; height: 22px; fill: var(--rouge); margin-left: 3px; }
.short__play:hover .short__btn { transform: scale(1.09); }
@keyframes onde {
  70%  { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0  rgba(255, 255, 255, 0); }
}
.short__label {
  position: absolute; left: 0; right: 0; bottom: 1rem;
  text-align: center;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.stat {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--ombre);
}
.stat__n {
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  display: flex; align-items: baseline; gap: .12em;
}
.stat__n small { font-size: .42em; color: var(--rouge); font-weight: 700; }
.stat__l { font-size: .82rem; color: var(--gris); margin-top: .5rem; line-height: 1.4; }

/* =========================================================
   3 — PRESTATIONS
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
  gap: 1.1rem;
}
.card {
  position: relative;
  padding: 1.7rem 1.5rem 1.4rem;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(228, 0, 43, .07), transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); border-color: #D7DDE4; }
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card__ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(228, 0, 43, .08);
  margin-bottom: 1.05rem;
}
.card__ico svg { width: 23px; height: 23px; stroke: var(--rouge); fill: none; stroke-width: 1.8; }
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--gris); font-size: .91rem; margin-bottom: 1.2rem; flex: 1; }
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bord);
}
.card__price { font-size: .8rem; color: var(--gris); line-height: 1.25; }
.card__price b { display: block; font-size: 1.45rem; font-weight: 800; color: var(--encre); letter-spacing: -.035em; }
.card__go {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .85rem; font-weight: 700; color: var(--vert-fonce);
  white-space: nowrap;
  transition: gap .25s var(--ease);
}
.card__go:hover { gap: .65rem; }
.card__go svg { width: 15px; height: 15px; }

.note-tarif { margin-top: 1.5rem; font-size: .83rem; color: var(--gris-2); }

/* =========================================================
   4 — OFFRE PROMOTIONNELLE
   Bandeau rouge pleine largeur : le moment fort de la page.
   ========================================================= */
.promo {
  background: linear-gradient(140deg, var(--rouge) 0%, var(--rouge-fonce) 70%, #7E0018 100%);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(3.2rem, 6vw, 5rem);
}
.promo::before,
.promo::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}
.promo::before { width: 46vw; max-width: 560px; aspect-ratio: 1; top: -32%; left: -12%; }
.promo::after  { width: 34vw; max-width: 400px; aspect-ratio: 1; bottom: -38%; right: -6%; }

.promo__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 900px) { .promo__grid { grid-template-columns: 1fr minmax(0, 400px); } }

.promo .pill { background: #fff; color: var(--rouge); margin-bottom: 1.2rem; }
.promo h2 { margin-bottom: 1rem; text-wrap: balance; }
.promo__lead { font-size: 1.06rem; color: rgba(255, 255, 255, .9); max-width: 46ch; margin-bottom: 1.8rem; }

.promo__liste { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .75rem; }
.promo__liste li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1rem; font-weight: 500; }
.promo__liste svg { width: 21px; height: 21px; flex: none; margin-top: 2px; stroke: #fff; fill: none; stroke-width: 2.6; }

.promo__fin {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  font-size: .87rem; font-weight: 600;
  margin-bottom: 1.6rem;
}
.promo__fin b { font-variant-numeric: tabular-nums; }
.promo__fin svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.4; }

/* la grande vignette de remise */
.promo__carte {
  background: #fff;
  color: var(--encre);
  border-radius: var(--r-lg);
  padding: 2.2rem 2rem;
  text-align: center;
  box-shadow: var(--ombre-lg);
  position: relative;
}
.promo__carte::before {
  content: '';
  position: absolute; inset: 10px;
  border: 2px dashed rgba(228, 0, 43, .28);
  border-radius: 20px;
  pointer-events: none;
}
.promo__sur { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.promo__n {
  font-size: clamp(4rem, 13vw, 6.2rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .88;
  color: var(--rouge);
  margin: .4rem 0 .2rem;
}
.promo__n sup { font-size: .42em; vertical-align: super; letter-spacing: -.02em; }
.promo__sous { font-size: 1rem; font-weight: 600; margin-bottom: 1.4rem; }
.promo__carte .btn { width: 100%; }
.promo__cond { font-size: .74rem; color: var(--gris-2); margin-top: .9rem; line-height: 1.45; }

/* =========================================================
   5 — CARTE À GRATTER
   ========================================================= */
.offer__grid { display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .offer__grid { grid-template-columns: 1fr minmax(0, 400px); } }

.offer__liste { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.offer__liste li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; color: var(--gris); }
.offer__liste svg { width: 20px; height: 20px; flex: none; margin-top: 2px; stroke: var(--vert-fonce); fill: none; stroke-width: 2.6; }

.scratch {
  border-radius: var(--r-lg);
  padding: 1.35rem;
  background: #fff;
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-lg);
}
.scratch__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.scratch__tag { font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--rouge); }
.scratch__stock { font-size: .73rem; color: var(--gris-2); }

.scratch__zone {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--creme);
  isolation: isolate;
}
.scratch__prize {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  text-align: center;
  padding: 1.4rem 1.2rem;
  gap: .45rem;
  background: radial-gradient(80% 80% at 50% 0%, rgba(255, 176, 32, .16), transparent 70%), #FFFDF7;
}
.scratch__prize-label { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.scratch__prize-main {
  font-size: clamp(1.4rem, 4.6vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--rouge);
  text-wrap: balance;
}
.scratch__prize-sub { font-size: .83rem; color: var(--gris); }
.scratch__code {
  margin-top: .25rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .9rem; font-weight: 700; letter-spacing: .09em;
  color: var(--encre);
  background: #fff;
  border: 1.5px dashed var(--rouge);
  border-radius: 9px;
  padding: .42rem .8rem;
  display: inline-block;
}
.scratch__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab; touch-action: none;
  transition: opacity .5s var(--ease);
}
.scratch__canvas:active { cursor: grabbing; }
.scratch.is-won .scratch__canvas { opacity: 0; pointer-events: none; }

.scratch__hint {
  position: absolute; left: 50%; bottom: .85rem;
  transform: translateX(-50%);
  z-index: 3;
  font-size: .75rem; font-weight: 600;
  color: rgba(0, 0, 0, .5);
  pointer-events: none;
  display: flex; align-items: center; gap: .4rem;
  animation: pousse 1.9s ease-in-out infinite;
}
.scratch.is-won .scratch__hint, .scratch.is-scratching .scratch__hint { opacity: 0; }
@keyframes pousse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

.scratch__cta { margin-top: 1.05rem; }
.scratch__cta .btn { width: 100%; }
.scratch__legal { margin-top: .8rem; font-size: .71rem; color: var(--gris-2); text-align: center; line-height: 1.45; }

.confetti {
  position: absolute; top: 0; left: 50%;
  width: 8px; height: 14px; z-index: 5; pointer-events: none;
  animation: chute var(--dur, 1.6s) linear forwards;
}
@keyframes chute {
  0%   { transform: translate(0, -10px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx, 0), 320px) rotate(var(--rot, 540deg)); opacity: 0; }
}

/* =========================================================
   6 — AVIS
   ========================================================= */
.reviews { overflow: hidden; }
.marquee {
  display: flex; gap: 1rem;
  width: max-content;
  animation: glisse var(--speed, 46s) linear infinite;
  will-change: transform;
}
.marquee--rev { animation-direction: reverse; }
.marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  padding-block: .6rem;
}
.marquee-mask + .marquee-mask { margin-top: .4rem; }
.marquee-mask:hover .marquee { animation-play-state: paused; }
@keyframes glisse { to { transform: translate3d(-50%, 0, 0); } }

.rev {
  width: 330px; flex: none;
  padding: 1.35rem 1.4rem;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
}
.rev__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.rev__av {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .88rem; color: #fff;
  flex: none;
}
.rev__who { line-height: 1.25; }
.rev__name { font-weight: 700; font-size: .9rem; }
.rev__when { font-size: .73rem; color: var(--gris-2); }
.rev__stars { display: flex; gap: 1px; margin-left: auto; }
.rev__stars svg { width: 13px; height: 13px; fill: var(--ambre); }
.rev p { font-size: .89rem; color: var(--gris); line-height: 1.55; }

/* =========================================================
   7 — ACCÈS
   ========================================================= */
.access__grid { display: grid; gap: 1.1rem; }
@media (min-width: 800px) { .access__grid { grid-template-columns: 1fr 1fr; } }

.panel {
  padding: 1.8rem 1.6rem;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
}
.panel h3 { margin-bottom: 1.05rem; }
.hours { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bord);
  color: var(--gris);
}
.hours li:last-child { border-bottom: 0; }
.hours li.is-today { color: var(--encre); font-weight: 700; }
.hours li.is-today::after { content: 'aujourd’hui'; font-size: .68rem; color: var(--rouge); font-weight: 700; }
.hours b { color: var(--encre); font-weight: 600; }
.hours li.is-closed b { color: var(--gris-2); font-weight: 400; }

.addr { font-style: normal; color: var(--gris); font-size: .95rem; line-height: 1.75; }
.addr strong { color: var(--encre); display: block; font-size: 1.02rem; font-weight: 700; }
.addr a { color: var(--vert-fonce); font-weight: 700; }
.panel .btn { margin-top: 1.25rem; }

/* bande de fermeture */
.closer {
  text-align: center;
  padding-block: clamp(3.4rem, 7vw, 5.5rem);
  background: var(--noir);
  color: #fff;
}
.closer h2 { margin-bottom: 1rem; text-wrap: balance; }
.closer p { color: rgba(255, 255, 255, .68); max-width: 46ch; margin: 0 auto 2rem; }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.foot {
  background: var(--noir);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 2rem 6.5rem;
  font-size: .84rem;
  color: rgba(255, 255, 255, .5);
}
@media (min-width: 700px) { .foot { padding-bottom: 2rem; } }
.foot__in { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; justify-content: space-between; }
.sig {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .79rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.sig:hover { border-color: var(--adam-rose); color: #fff; }
.sig b {
  background: linear-gradient(100deg, var(--adam-rose), var(--adam-orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}

/* =========================================================
   ÉLÉMENTS FLOTTANTS
   ========================================================= */
.wa-float {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 70;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--vert);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, .5);
  animation: onde-v 3.2s var(--ease) infinite 3s;
  transition: transform .25s var(--ease);
}
@keyframes onde-v {
  70%  { box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0  rgba(37, 211, 102, 0); }
}
.wa-float:hover { transform: scale(1.08); }
.wa-float .ico { width: 31px; height: 31px; color: #fff; }
.wa-float__tip {
  position: absolute; right: calc(100% + .7rem);
  white-space: nowrap;
  background: var(--noir);
  color: #fff;
  font-size: .8rem; font-weight: 600;
  padding: .5rem .85rem;
  border-radius: 10px;
  opacity: 0; transform: translateX(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.wa-float:hover .wa-float__tip { opacity: 1; transform: none; }

.mbar {
  position: fixed; inset: auto 0 0 0;
  z-index: 65;
  display: flex; gap: .55rem;
  padding: .65rem .8rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--bord);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.mbar.is-up { transform: none; }
.mbar .btn { flex: 1; padding: .92rem .9rem; font-size: .9rem; }
@media (min-width: 700px) { .mbar { display: none; } }
@media (max-width: 699px) { .wa-float { bottom: 5rem; } }

/* =========================================================
   BANDEAU HAUT + ÉTAPES + RAPPEL « SITE WEB »
   Ambiance sombre à lueur rouge, réservée aux blocs noirs.
   ========================================================= */
.lueur { position: relative; overflow: hidden; }
.lueur::before {
  content: '';
  position: absolute;
  top: -60%; left: 50%;
  width: 120%; height: 200%;
  transform: translateX(-50%);
  background: radial-gradient(50% 40% at 50% 30%, rgba(228, 0, 43, .34), transparent 62%);
  pointer-events: none;
}
.lueur > * { position: relative; z-index: 1; }

.topbar {
  background: #05070A;
  color: #fff;
  padding-block: .75rem;
  border-bottom: 1px solid rgba(228, 0, 43, .38);
}
.topbar__in {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .7rem 1.2rem;
  text-align: center;
}
.topbar__txt { font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .82); }
.topbar__txt b { color: #fff; }
.topbar .btn {
  padding: .62rem 1.25rem; font-size: .88rem;
  box-shadow: 0 0 24px -4px rgba(228, 0, 43, .75);
}

.etapes { background: var(--noir); color: #fff; padding-block: clamp(3.4rem, 7vw, 5.5rem); }
.etapes .sec-head h2 { color: #fff; }
.etapes .sec-head p { color: rgba(255, 255, 255, .62); }
.etapes .pill { background: var(--rouge); }

.pas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.1rem;
}
.pas__item {
  padding: 1.7rem 1.5rem;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.pas__item:hover { border-color: rgba(228, 0, 43, .6); transform: translateY(-3px); }
.pas__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--rouge);
  font-weight: 800; font-size: 1.05rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 22px -4px rgba(228, 0, 43, .9);
}
.pas__item h3 { margin-bottom: .5rem; }
.pas__item p { color: rgba(255, 255, 255, .62); font-size: .93rem; }

/* le bouton « site web » posé sur fond sombre */
.btn--site {
  --bg: transparent; --fg: #fff;
  border: 2px solid rgba(255, 255, 255, .28);
  box-shadow: none;
}
.btn--site:hover { border-color: #fff; box-shadow: none; }

.closer__ou {
  margin-top: 1.8rem;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .9rem;
  font-size: .95rem;
  color: rgba(255, 255, 255, .6);
}

/* =========================================================
   PASSAGE DE TOUTE LA PAGE EN FOND NOIR
   Les jetons clairs sont redéfinis ici, en fin de feuille,
   pour ne pas avoir à reprendre chaque règle une par une.
   ========================================================= */
:root {
  --blanc:  #05060A;   /* fond général */
  --creme:  #0B0D12;   /* sections alternées */
  --encre:  #EDEFF3;   /* texte courant */
  --gris:   #9BA3AF;
  --gris-2: #6E7684;
  --bord:   rgba(255, 255, 255, .10);
  --noir:   #05060A;

  --surface: #101319;  /* cartes et panneaux */
  --surface-2: #161A22;

  --ombre:    0 4px 18px rgba(0, 0, 0, .5);
  --ombre-md: 0 16px 40px -12px rgba(0, 0, 0, .7);
  --ombre-lg: 0 30px 70px -22px rgba(0, 0, 0, .85);
}

body { background: var(--blanc); color: var(--encre); }

/* --- surfaces qui étaient blanches en dur --- */
.card, .stat, .panel, .rev, .scratch, .gnote {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--bord);
  color: var(--encre);
}
.card:hover { border-color: rgba(228, 0, 43, .55); }
.card::before { background: radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(228,0,43,.16), transparent 65%); }
.card__price b, .stat__n, .gnote__score, .panel h3, .card h3, .addr strong { color: var(--encre); }
.card__ico { background: rgba(228, 0, 43, .14); }

.remise { background: var(--surface-2); border-color: var(--rouge); box-shadow: 5px 5px 0 0 var(--rouge-fonce); }
.remise__t b { color: #fff; }

.hours li { border-bottom-color: var(--bord); }
.hours b, .hours li.is-today { color: var(--encre); }

/* la carte à gratter reste chaude pour trancher avec le noir */
.scratch__prize { background: radial-gradient(80% 80% at 50% 0%, rgba(255,176,32,.14), transparent 70%), #14100A; }
.scratch__code { background: rgba(255,255,255,.06); color: #fff; }
.scratch__zone { background: var(--surface); }

.promo__carte { background: var(--surface-2); color: var(--encre); }
.promo__sous strong { color: #fff; }

.short__btn { background: #fff; }

/* boutons secondaires : sombres, plus blancs */
.btn--ligne { --bg: var(--surface-2); --fg: var(--encre); border-color: var(--bord); }
.btn--ligne:hover { border-color: #fff; }

.mbar { background: rgba(5, 6, 10, .92); border-top-color: var(--bord); }

.sec--creme { background: var(--creme); }
.reviews { background: var(--blanc); }
.foot { border-top-color: var(--bord); }

/* le voile des bandeaux d'avis doit fondre vers le noir, pas vers le blanc */
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* =========================================================
   FOND DU HERO — faisceaux rouges animés
   ========================================================= */
.hero__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* trois faisceaux obliques qui balaient le fond */
.hero__fx span {
  position: absolute;
  top: -40%;
  width: 2px; height: 180%;
  background: linear-gradient(180deg, transparent, #E4002B 35%, #FF3B57 50%, #E4002B 65%, transparent);
  box-shadow: 0 0 18px 3px rgba(228, 0, 43, .55);
  transform: rotate(14deg);
  opacity: .5;
  animation: balayage 9s ease-in-out infinite;
}
.hero__fx span:nth-child(1) { left: 18%; animation-delay: 0s; }
.hero__fx span:nth-child(2) { left: 52%; height: 150%; opacity: .32; animation-delay: 2.4s; animation-duration: 11s; }
.hero__fx span:nth-child(3) { left: 79%; height: 200%; opacity: .42; animation-delay: 4.8s; animation-duration: 13s; }

@keyframes balayage {
  0%, 100% { transform: translateX(-14vw) rotate(14deg); opacity: 0; }
  18%      { opacity: .55; }
  50%      { transform: translateX(10vw) rotate(14deg); opacity: .55; }
  82%      { opacity: 0; }
}

/* halo rouge qui respire, derrière le titre */
.hero__fx i {
  position: absolute;
  top: 42%; right: -6%;
  width: 62vw; max-width: 720px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228,0,43,.42) 0%, rgba(228,0,43,.14) 38%, transparent 68%);
  filter: blur(24px);
  transform: translateY(-50%);
  animation: respire 7s ease-in-out infinite;
}
@keyframes respire {
  0%, 100% { transform: translateY(-50%) scale(1);    opacity: .75; }
  50%      { transform: translateY(-50%) scale(1.16); opacity: 1; }
}

/* les illustrations d'atelier dérivent lentement */
.hero .deco { animation: derive 26s ease-in-out infinite alternate; }
@keyframes derive {
  to { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}

/* le trait lumineux du fond glisse (spécificité renforcée pour passer
   après le bloc d'overrides posé dans le <head>) */
.hero.hero::after { animation: glisse-trait 8s ease-in-out infinite; }
@keyframes glisse-trait {
  0%, 100% { opacity: .35; transform: rotate(-7deg) translateX(0); }
  50%      { opacity: .95; transform: rotate(-7deg) translateX(-6%); }
}

/* Le vert foncé de WhatsApp devient illisible sur le noir : on passe au
   vert clair pour les liens, on garde le foncé sur les fonds clairs. */
.card__go, .addr a { color: var(--vert); }
.promo__cond { color: #9AA1AB; }
.scratch__legal, .note-tarif { color: #8A919C; }

/* =========================================================
   UNE COULEUR PAR SECTION
   Le noir reste la base ; chaque section reçoit son halo et
   son liseré, pour qu'aucune ne ressemble à la précédente.
   ========================================================= */
.sec, .etapes, .promo, .closer { position: relative; isolation: isolate; }

/* liseré lumineux en haut de section */
.sec::after, .etapes::after, .closer::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teinte, var(--rouge)), transparent);
  opacity: .55;
  z-index: 2;
}

/* halo de fond, teinté par section */
.sec::before, .etapes::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 46% at 50% 0%, color-mix(in srgb, var(--teinte, var(--rouge)) 16%, transparent), transparent 64%),
    radial-gradient(38% 34% at 92% 88%, color-mix(in srgb, var(--teinte, var(--rouge)) 9%, transparent), transparent 62%);
  pointer-events: none;
}

/* la carte à gratter : or */
#jeu { --teinte: #FFB020; }
#jeu .scratch { box-shadow: 0 30px 70px -22px rgba(0,0,0,.85), 0 0 60px -18px rgba(255,176,32,.35); }

/* l'atelier et la vidéo : bleu acier */
#atelier { --teinte: #2E7DFF; }
#atelier .short { box-shadow: 0 30px 70px -22px rgba(0,0,0,.9), 0 0 70px -20px rgba(46,125,255,.45); }
#atelier .stat:hover { border-color: rgba(46,125,255,.5); }

/* les tarifs : rouge maison */
#prestations { --teinte: var(--rouge); }

/* les étapes : rouge profond, déjà sombre */
.etapes { --teinte: #FF3B57; }

/* les avis : vert WhatsApp */
#avis { --teinte: #25D366; }
#avis .rev:hover { border-color: rgba(37,211,102,.42); }

/* l'accès : indigo */
#acces { --teinte: #7C5CFF; }
#acces .panel:hover { border-color: rgba(124,92,255,.45); }

/* la fermeture : rouge intense */
.closer { --teinte: var(--rouge); }
.closer::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 110%, rgba(228,0,43,.42), transparent 66%),
    radial-gradient(40% 40% at 50% -10%, rgba(228,0,43,.16), transparent 60%);
  pointer-events: none;
}

/* les cartes reprennent la teinte de leur section au survol */
.sec .card:hover, .sec .panel:hover, .sec .stat:hover {
  border-color: color-mix(in srgb, var(--teinte, var(--rouge)) 48%, transparent);
}
.sec .card::before {
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
              color-mix(in srgb, var(--teinte, var(--rouge)) 20%, transparent), transparent 65%);
}
.sec .pill { background: color-mix(in srgb, var(--teinte, var(--rouge)) 88%, #000); color: #fff; }