/* =========================================================
   Shine Me Up Garage — design system
   Direction : nuit / chrome / violet dominant, bleu en secondaire,
   calquée sur les couleurs du logo de la marque.
   Palette échantillonnée depuis img/logo.jpg :
     fond #030207 → #1a182c · violet #a855f7 / #8b3fe0 (dominant)
     bleu #7fa5ff / #4b6dff (secondaire) · chrome #d7dce6
   ========================================================= */

:root {
  /* Fonds */
  --night: #05060d;
  --surface: #0a0c16;
  --surface-2: #11142a;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.055);

  /* Traits */
  --line: rgba(170, 190, 255, 0.11);
  --line-strong: rgba(170, 190, 255, 0.22);

  /* Textes */
  --chrome: #e8ecf7;
  --text: #a7b0c7;
  --text-dim: #7b84a0; /* 5,4:1 sur le fond nuit — conforme AA */

  /* Accents de marque — dominante VIOLET, le bleu en secondaire.
     Repris du lettrage et du blason du logo, où le violet domine ;
     le bleu ne sert plus que de rappel (les éclaboussures d'eau). */
  --violet-soft: #a855f7;   /* accent principal, clair — 5,1:1 sur le fond nuit */
  --violet: #8b3fe0;        /* accent principal, profond */
  --blue-soft: #7fa5ff;     /* secondaire clair */
  --blue: #4b6dff;          /* secondaire profond */
  --mint: #3ddc97;

  /* Le dégradé part du violet et ne finit que sur une pointe de bleu */
  --grad: linear-gradient(100deg, #a855f7 0%, #8b3fe0 52%, #5b6dff 100%);
  /* Variante assombrie pour les surfaces pleines portant du texte blanc :
     garantit un contraste ≥ 5:1 sur toute la longueur du dégradé. */
  --grad-btn: linear-gradient(100deg, #9333ea 0%, #7c2fd6 55%, #4a5fe0 100%);
  --grad-soft: linear-gradient(100deg, rgba(168, 85, 247, .18), rgba(91, 109, 255, .12));

  /* Alias hérités : les styles inline des pages continuent de fonctionner */
  --paper: var(--night);
  --paper-2: var(--surface);
  --paper-3: var(--surface-2);
  --ink: var(--chrome);
  --ink-2: var(--text);
  --ink-3: var(--text-dim);
  --copper: var(--violet-soft);
  --copper-2: var(--violet);
  --copper-soft: rgba(139, 63, 224, .16);
  --forest: var(--mint);

  /* Typographie */
  --display: "Sora", "Archivo", system-ui, sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Mesures */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1280px;
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 76px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--night);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
/* Pas d'overflow-x:hidden sur html/body : cela casserait les éléments
   position:sticky (header, barre de résumé). Les décors qui dépassent
   sont découpés par leur propre section. */

/* Grain léger + halos de marque, très discrets, fixés au fond */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(980px 660px at 80% -8%, rgba(168, 85, 247, .22), transparent 62%),
    radial-gradient(720px 520px at 6% 14%, rgba(75, 109, 255, .10), transparent 60%);
}

/* Spotlight violet qui suit le curseur sur toute la page.
   Position alimentée par js/main.js (--sx / --sy, en pixels du viewport).
   Posé en couche 0, comme body::before : il éclaire le fond nuit DERRIÈRE
   le contenu (body > * est en z-index 1), donc il ne voile jamais le texte
   et n'intercepte aucun clic. Les cartes gardent en plus leur propre halo
   local (.card::after, .plan::after…), qui prend le relais au survol. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 35%),
              rgba(168, 85, 247, .20), rgba(91, 109, 255, .08) 46%, transparent 72%);
}
body.a-le-curseur::after { opacity: 1; }

body > * { position: relative; z-index: 1; }

img, video { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: rgba(168, 85, 247, .34); color: #fff; }

/* ---------- Typographie ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--chrome);
}

/* Effet chrome : dégradé blanc → acier sur les grands titres */
.display, .h2 {
  background: linear-gradient(178deg, #ffffff 6%, #dfe5f4 42%, #97a1bd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.display {
  font-size: clamp(2.7rem, 6.6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.display em, .h2 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }

.h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.68;
  color: var(--text);
  max-width: 58ch;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.label {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--panel-2);
  padding: .1em .35em;
  border-radius: 4px;
  color: var(--violet-soft);
}

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section + .section::before {
  content: "";
  position: absolute;
  top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

.section-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

@media (min-width: 900px) {
  .section-head { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, .85fr); gap: 2.5rem; align-items: start; }
}

.section-head__index {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 0.7rem;
  align-self: start;
  position: relative;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head__index::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.section-head__aside {
  color: var(--text);
  font-size: 0.95rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}
@media (max-width: 899px) { .section-head__aside { border-left: 0; padding-left: 0; } }

/* ---------- Spotlight au curseur ---------- */
/* Appliqué par js/main.js : --mx / --my suivent la souris */

.spot, .card, .plan, .review, .social__item { position: relative; isolation: isolate; }
.spot::after, .card::after, .plan::after, .review::after, .social__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
              rgba(168, 85, 247, .17), rgba(91, 109, 255, .08) 42%, transparent 70%);
}
.spot:hover::after, .spot:focus-within::after,
.card:hover::after, .card:focus-within::after,
.plan:hover::after, .review:hover::after,
.social__item:hover::after { opacity: 1; }

.spot > *, .card > *, .plan > *, .review > *, .social__item > * { position: relative; z-index: 1; }

/* Bordure qui s'illumine sous le curseur */
.spot-edge { position: relative; }
.spot-edge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%),
              rgba(196, 150, 255, .78), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.spot-edge:hover::before, .spot-edge:focus-within::before { opacity: 1; }

/* ---------- Boutons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  color: var(--chrome);
  background: var(--panel-2);
  border-color: var(--line-strong);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease,
              background .3s ease, border-color .3s ease, color .3s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 3px; }

/* Bouton principal : dégradé bleu → violet avec halo */
.btn--copper {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 22px -8px rgba(139, 63, 224, .7);
}
.btn--copper:hover { box-shadow: 0 12px 34px -10px rgba(168, 85, 247, .85); }

/* Reflet qui balaye le bouton principal au survol */
.btn--copper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  background-size: 250% 100%;
  background-position: 130% 0;
  opacity: 0;
  transition: none;
}
.btn--copper:hover::after {
  opacity: 1;
  animation: sheen .75s cubic-bezier(.4,0,.3,1) forwards;
}
@keyframes sheen {
  from { background-position: 130% 0; }
  to { background-position: -40% 0; }
}

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--chrome); }
.btn--ghost:hover { background: var(--panel-2); border-color: rgba(196, 150, 255, .6); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: .32; pointer-events: none; }
.btn__arrow { font-family: var(--mono); font-size: 1rem; line-height: 1; }

.link-under {
  text-decoration: none;
  color: var(--violet-soft);
  border-bottom: 1px solid rgba(168, 85, 247, .38);
  padding-bottom: 1px;
  transition: border-color .2s ease, color .2s ease;
}
.link-under:hover { border-color: var(--violet-soft); color: #fff; }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 6, 13, .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; }

/* Emblème détouré : aucune bordure ni cadre, sinon il se lit comme une
   vignette photo et non comme un logo. */
.brand__logo {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(139, 63, 224, .45));
  transition: filter .35s ease, transform .35s ease;
}
.brand:hover .brand__logo {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, .65)) drop-shadow(0 4px 12px rgba(139, 63, 224, .6));
}

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }

.brand__mark {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chrome);
  white-space: nowrap;
}
.brand__mark em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__sub {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }

.nav__link {
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text);
  position: relative;
  padding-block: 0.45rem;
  transition: color .25s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--grad);
  transition: right .35s cubic-bezier(.22,.61,.36,1);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }
.nav__link[aria-current="page"] { color: #fff; }

.header__cta { display: none; }
@media (min-width: 1080px) { .header__cta { display: inline-flex; } }

.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--panel);
  cursor: pointer;
  padding: 0;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--chrome); transition: transform .3s ease, opacity .2s ease; }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 900px) { .burger { display: none; } }
@media (max-width: 899px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(6, 8, 18, .97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-strong);
    padding: var(--gutter);
    transform: translateY(-118%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link {
    display: block;
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.5rem; }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden; /* découpe le faisceau décoratif */
}

/* Faisceau de projecteur qui dérive lentement derrière le titre */
.hero::before {
  content: "";
  position: absolute;
  top: -14%; left: 46%;
  width: 78vw; height: 118%;
  transform: translateX(-50%) rotate(-14deg);
  pointer-events: none;
  background: conic-gradient(from 168deg at 50% 0%,
              transparent 0deg, rgba(168, 85, 247, .17) 12deg,
              rgba(91, 109, 255, .09) 22deg, transparent 34deg);
  filter: blur(14px);
  animation: beam 13s ease-in-out infinite alternate;
}
@keyframes beam {
  from { transform: translateX(-50%) rotate(-17deg); opacity: .75; }
  to { transform: translateX(-44%) rotate(-8deg); opacity: 1; }
}

.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: end; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.hero__kicker { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.7rem; }
.hero__kicker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.hero__title { margin-bottom: 1.7rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin-top: 2.3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.hero__meta .label { display: flex; align-items: center; gap: .5rem; }
.hero__meta .label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--violet-soft);
  box-shadow: 0 0 8px 1px rgba(168, 85, 247, .85);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ---------- Média / placeholders ---------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9);
}
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }

.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--9x16 { aspect-ratio: 9 / 16; }

.media__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 15px, rgba(170, 190, 255, .035) 15px 30px),
    linear-gradient(160deg, #131734, #0a0c18 70%);
}
/* Variante « après » : teintée aux couleurs de la marque */
.media__ph--after {
  background:
    repeating-linear-gradient(45deg, transparent 0 15px, rgba(190, 215, 255, .06) 15px 30px),
    linear-gradient(150deg, rgba(168, 85, 247, .30), rgba(91, 109, 255, .18) 68%), #0a0c18;
}

.media__ph span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.media__ph span:last-child { text-align: right; }

.media__tag {
  position: absolute;
  left: 0.9rem; bottom: 0.9rem;
  background: rgba(6, 8, 18, .82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome);
}

/* ---------- Bandeau de garanties ---------- */

.strip { border-block: 1px solid var(--line); background: rgba(255, 255, 255, .022); }
.strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.strip__item {
  padding: 1.7rem var(--gutter);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.strip__item:first-child { border-left: 0; }
.strip__item strong { font-size: 0.94rem; font-weight: 600; color: var(--chrome); }
.strip__item span { font-size: 0.85rem; color: var(--text); }

/* ---------- À propos ---------- */

.about__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 1000px) { .about__grid { grid-template-columns: .9fr 1.1fr; } }

.about__text p { color: var(--text); }
.about__text p:first-child {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--chrome);
  margin-bottom: 1.4rem;
}

.about__quote {
  margin: 2.2rem 0 0;
  padding: 1.5rem 1.7rem;
  border-radius: var(--radius);
  background: var(--grad-soft);
  border: 1px solid var(--line-strong);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--chrome);
}

.about__stack { display: grid; gap: 1rem; }
@media (min-width: 620px) { .about__stack { grid-template-columns: 1fr 1fr; align-items: start; } }
.about__stack > :nth-child(2) { margin-top: 2.5rem; }
@media (max-width: 619px) { .about__stack > :nth-child(2) { margin-top: 0; } }

/* ---------- Formules ---------- */

.plans { display: grid; gap: 1.1rem; }
@media (min-width: 940px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease;
}
.plan:hover { transform: translateY(-4px); }

/* Formule mise en avant : liseré dégradé + halo */
.plan--featured {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(168,85,247,.15), rgba(91,109,255,.07)) padding-box,
    var(--grad) border-box;
  border: 1px solid transparent;
  box-shadow: 0 30px 70px -40px rgba(168, 85, 247, .7);
}

.plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.plan__badge {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-btn);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

.plan__price { display: flex; align-items: baseline; gap: 0.5rem; }
.plan__price b {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(178deg, #fff 10%, #b9c3dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan__price small { font-size: 0.78rem; color: var(--text-dim); }

.plan__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.62rem;
  font-size: 0.92rem;
  color: var(--text);
  flex: 1;
}
/* La puce est positionnée en absolu, PAS en colonne de grille.
   Avec `display:grid`, chaque enfant du <li> devient une cellule — y compris
   les morceaux de texte nus laissés hors des balises. Dans
   « <strong>Aspiration complète</strong> de l'habitacle et du coffre »,
   le texte qui suit le <strong> retombait donc dans la colonne de la puce
   (1.1rem) et se cassait à un mot par ligne : 158 px de haut sur mobile. */
.plan__list li { position: relative; padding-left: 1.7rem; }
.plan__list li strong { color: var(--chrome); font-weight: 600; }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--violet-soft);
  box-shadow: 0 0 8px 1px rgba(168, 85, 247, .6);
}
.plan__list li.is-plus::before {
  border-radius: 2px;
  background: var(--violet-soft);
  box-shadow: 0 0 8px 1px rgba(168, 85, 247, .6);
  transform: rotate(45deg);
}

.plan__table { border-top: 1px solid var(--line); font-size: 0.85rem; }
.plan__table div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(170, 190, 255, .055);
}
.plan__table div:last-child { border-bottom: 0; }
.plan__table span:first-child { color: var(--text-dim); }
.plan__table span:last-child { color: var(--chrome); }

.notice {
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.notice::before {
  content: "i";
  flex-shrink: 0;
  width: 1.25rem; height: 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  margin-top: 0.15rem;
}

/* ---------- Cartes ---------- */

.cards { display: grid; gap: 1.1rem; }
@media (min-width: 800px) { .cards--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 800px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.016));
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 2.3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.card:hover { transform: translateY(-3px); }

.card__index {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.48rem; font-size: 0.9rem; color: var(--text); }
.card ul li { padding-left: 1.2rem; position: relative; }
.card ul li::before {
  content: "→";
  position: absolute; left: 0;
  font-family: var(--mono);
  color: var(--violet-soft);
  font-size: 0.8rem;
}

/* ---------- Tableaux ---------- */

.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th, .tbl td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line); }
.tbl th {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  border-bottom-color: var(--line-strong);
}
.tbl td { color: var(--text); }
.tbl td:first-child { color: var(--chrome); }
.tbl td:last-child, .tbl th:last-child { text-align: right; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .25s ease; }
.tbl tbody tr:hover { background: rgba(170, 190, 255, .04); }
.tbl .is-free { color: var(--mint); font-weight: 600; }

.tbl-wrap {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  overflow-x: auto;
}

/* ---------- Tableaux de tarifs sur téléphone ----------
   Sous 640 px, trois colonnes ne tiennent plus : « Distance autour du garage »
   se retrouvait comprimé dans 97 px et chaque ligne montait à 78 px au lieu de
   46, le texte cassé en escalier.
   On garde l'essentiel sur une seule ligne — intitulé à gauche, prix à droite —
   et on renvoie la colonne du milieu en sous-titre. Les tableaux à deux
   colonnes gardent donc leur compacité, et celui des zones ne s'écrase plus.
   L'en-tête reste dans le DOM, masqué visuellement, pour les lecteurs d'écran. */

@media (max-width: 640px) {
  .tbl thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .tbl, .tbl tbody { display: block; width: 100%; }

  .tbl tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 0.9rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .tbl tbody tr:last-child { border-bottom: 0; }

  .tbl td { display: block; padding: 0; border: 0; }

  /* Intitulé de la ligne */
  .tbl td:first-child {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--chrome);
  }

  /* Valeur, alignée à droite. Pas de couleur imposée : « Offert » doit
     rester vert (.is-free) et les montants garder leur teinte. */
  .tbl td:last-child {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 600;
  }

  /* Colonne du milieu (tableau des zones) : renvoyée en sous-titre */
  .tbl td:nth-child(2):not(:last-child) {
    flex: 1 0 100%;
    order: 3;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--text-dim);
  }
}

/* ---------- Galerie avant / après ---------- */

.ba {
  position: relative;
  /* Carré : les photos du client sont prises au téléphone, donc en portrait.
     Un cadre 3/2 paysage rognait la moitié de l'habitacle. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  box-shadow: 0 24px 50px -32px rgba(0, 0, 0, .9);
}
.ba:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 3px; }
.ba__layer { position: absolute; inset: 0; }
.ba__layer > img { width: 100%; height: 100%; object-fit: cover; }
.ba__layer--after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--violet-soft) 18%, var(--blue-soft) 82%, transparent);
  box-shadow: 0 0 14px 1px rgba(168, 85, 247, .8);
  transform: translateX(-1px);
  pointer-events: none;
}
.ba__handle::after {
  content: "◄ ►";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(6, 8, 18, .92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--chrome);
}

.ba__tag {
  position: absolute;
  top: 0.85rem;
  background: rgba(6, 8, 18, .82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--chrome);
  pointer-events: none;
}
.ba__tag--before { left: 0.85rem; }
.ba__tag--after { right: 0.85rem; }

/* ---------- Catégories de véhicule ----------
   Ce ne sont pas des photos de chantier mais des silhouettes détourées
   illustrant les catégories tarifaires : on les présente « contenues »
   sur un panneau, jamais recadrées. */
.cats { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cat {
  margin: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  border: 1px solid var(--line);
  padding: 1.5rem 1.2rem 1.1rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
  align-content: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease;
}
.cat:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.cat img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.7));
}
.cat figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.gal-grid { display: grid; gap: 1.1rem; }
@media (min-width: 720px) { .gal-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .gal-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Avis ---------- */

.reviews__score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.5rem;
  padding: 1.7rem;
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(168,85,247,.13), rgba(91,109,255,.06));
  border: 1px solid var(--line-strong);
  margin-bottom: 1.6rem;
}
.reviews__note {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(178deg, #fff, #b9c3dc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stars { color: var(--violet-soft); letter-spacing: 0.14em; font-size: 1.05rem; text-shadow: 0 0 12px rgba(168,85,247,.6); }

.review {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.016));
  border: 1px solid var(--line);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.review p { font-size: 0.94rem; color: var(--text); }
.review__who { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--chrome); }
.review__av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* ---------- Réseaux sociaux ---------- */

.social__grid { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .social__grid { grid-template-columns: 1fr 1fr; } }

.social__item {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 2.8vw, 2.4rem);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.social__item:hover { transform: translateY(-3px); }
.social__item strong {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--chrome);
}
.social__item span { display: block; font-size: 0.85rem; color: var(--text); margin-top: 0.15rem; }
.social__item .btn__arrow { font-size: 1.35rem; color: var(--violet-soft); transition: transform .3s ease; }
.social__item:hover .btn__arrow { transform: translateX(5px); }

/* ---------- CTA final ---------- */

.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(820px 320px at 24% 120%, rgba(168,85,247,.24), transparent 65%),
              radial-gradient(680px 270px at 80% -20%, rgba(75,109,255,.14), transparent 62%);
  pointer-events: none;
}
.cta-band__grid { display: grid; gap: 2rem; align-items: center; position: relative; }
@media (min-width: 900px) { .cta-band__grid { grid-template-columns: 1.2fr auto; } }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .018);
  padding-block: clamp(3rem, 5vw, 4.5rem) 1.5rem;
  font-size: 0.9rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h3, .footer h4 {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1rem;
  font-weight: 500;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; color: var(--text); }
.footer a { text-decoration: none; color: var(--text); transition: color .2s ease; }
.footer a:hover { color: var(--violet-soft); }
.footer__bottom {
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* =========================================================
   Parcours de réservation
   ========================================================= */

.booking { padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); }

.steps-bar { display: flex; gap: 0.5rem; list-style: none; margin: 0 0 2.5rem; padding: 0 0 .3rem; overflow-x: auto; }
.steps-bar li {
  flex: 1 0 auto;
  min-width: 96px;
  padding-top: 0.65rem;
  border-top: 2px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .35s ease, border-color .35s ease;
}
.steps-bar li[data-state="current"] { border-top-color: transparent; color: #fff; background-image: var(--grad); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 0; }
.steps-bar li[data-state="done"] { border-top-color: var(--blue); color: var(--text); cursor: pointer; }

.step { display: none; }
.step[data-active="true"] { display: block; animation: stepIn .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.step__title { margin-bottom: 0.7rem; }
.step__intro { margin-bottom: 2rem; }

.opts { display: grid; gap: 1rem; }
@media (min-width: 760px) { .opts--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .opts--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .opts--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .opts--grid { grid-template-columns: repeat(3, 1fr); } }

.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

.opt__box {
  position: relative;
  isolation: isolate;
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), background .28s ease;
}
/* Spotlight sur la case d'option */
.opt__box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
              rgba(168, 85, 247, .18), rgba(91, 109, 255, .08) 45%, transparent 70%);
}
.opt:hover .opt__box { transform: translateY(-3px); border-color: var(--line-strong); }
.opt:hover .opt__box::after { opacity: 1; }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--violet-soft); outline-offset: 2px; }

.opt input:checked + .opt__box {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(168,85,247,.17), rgba(91,109,255,.08)) padding-box,
    var(--grad) border-box;
  box-shadow: 0 18px 44px -26px rgba(168, 85, 247, .9);
}

.opt__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.opt__name { font-family: var(--display); font-weight: 600; font-size: 1.16rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--chrome); }
.opt__price { font-family: var(--mono); font-size: 0.88rem; font-variant-numeric: tabular-nums; color: var(--violet-soft); }
.opt__desc { font-size: 0.88rem; color: var(--text); }
.opt__note {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.opt__check {
  position: absolute;
  top: 1rem; right: 1rem;
  opacity: 0;
  color: var(--violet-soft);
  font-family: var(--mono);
  font-size: 0.8rem;
  text-shadow: 0 0 10px rgba(168,85,247,.95);
  transition: opacity .25s ease;
  z-index: 2;
}
.opt input:checked + .opt__box .opt__check { opacity: 1; }

/* Encadré d'information obligatoire */
.callout {
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(168,85,247,.16), rgba(91,109,255,.06));
  border: 1px solid rgba(168, 85, 247, .32);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-top: 1.5rem;
}
.callout h3, .callout h4 { font-family: var(--display); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--chrome); }
.callout p { font-size: 0.92rem; color: #cfd6ea; }
.callout .tbl-wrap { background: rgba(0, 0, 0, .22); }
.callout ul { color: #cfd6ea !important; }

.check-line {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(168, 85, 247, .28);
  font-size: 0.92rem;
  color: #cfd6ea;
  cursor: pointer;
}
.check-line input {
  width: 20px; height: 20px;
  flex-shrink: 0;
  accent-color: var(--violet-soft);
  margin-top: 0.15rem;
}

.step__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.hint { font-size: 0.85rem; color: var(--violet-soft); margin-top: 1rem; min-height: 1.2rem; }

/* Barre de résumé collante */
.summary-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: rgba(6, 8, 18, .88);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-strong);
}
.summary-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
  min-height: 66px;
}
.summary-bar__items { display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem; font-size: 0.81rem; color: var(--text); }
.summary-bar__items b { color: var(--chrome); font-weight: 600; }
.summary-bar__total { text-align: right; flex-shrink: 0; }
.summary-bar__total b {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  display: block;
  background: linear-gradient(178deg, #fff, #b9c3dc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Récapitulatif */
.recap {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  overflow: hidden;
}
.recap__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
}
.recap__row span:first-child { color: var(--text-dim); }
.recap__row span:last-child { text-align: right; color: var(--chrome); font-weight: 500; }
.recap__row--total {
  background: var(--grad-btn);
  border-bottom: 0;
  align-items: baseline;
  padding-block: 1.3rem;
}
.recap__row--total span:first-child { color: rgba(255, 255, 255, .8); }
.recap__row--total b { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; }

/* =========================================================
   Formulaires
   ========================================================= */

.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

.field { display: grid; gap: 0.45rem; }
.field > label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field > label .req { color: var(--violet-soft); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.97rem;
  color: var(--chrome);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a7b0c7' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
}
.field select option { background: #0d1020; color: var(--chrome); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--violet-soft);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .2);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff6b6b; }
.field__err { font-size: 0.78rem; color: #ff8f8f; min-height: 1rem; }
.field__help { font-size: 0.8rem; color: var(--text-dim); }

fieldset legend.label { color: var(--violet-soft); }

/* Dépôt de photos */
.drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .025);
  padding: 1.8rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.drop:hover, .drop[data-over="true"] { border-color: var(--violet-soft); background: rgba(168, 85, 247, .1); }
.drop input { display: none; }
.drop__icon { font-family: var(--mono); font-size: 1.35rem; color: var(--violet-soft); }
.drop strong { display: block; margin-top: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--chrome); }
.drop span { font-size: 0.82rem; color: var(--text-dim); }

.thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.thumb {
  position: relative;
  width: 78px; height: 78px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: rgba(6, 8, 18, .9);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--chrome);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0;
}
.thumb button:hover { background: #ff6b6b; border-color: #ff6b6b; color: #fff; }

/* Modale */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: clamp(0.5rem, 3vw, 2.5rem);
  overflow-y: auto;
  background: rgba(2, 3, 8, .78);
  backdrop-filter: blur(6px);
}
.modal[data-open="true"] { display: block; animation: fadeIn .28s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  max-width: 760px;
  margin-inline: auto;
  background: linear-gradient(180deg, #0d1020, #080a14);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(168, 85, 247, .07);
  animation: panelIn .4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.modal__body { padding: clamp(1.3rem, 3vw, 2rem); }
.modal__close {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--chrome);
  cursor: pointer;
  font-size: 1rem;
  transition: background .25s ease, border-color .25s ease;
}
.modal__close:hover { background: var(--panel-2); border-color: var(--violet-soft); }

/* Messages de statut */
.alert {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.91rem;
  margin-bottom: 1.2rem;
  display: none;
}
.alert[data-show="true"] { display: block; }
.alert a { color: inherit; text-decoration: underline; }
.alert--ok { background: rgba(61, 220, 151, .12); border: 1px solid rgba(61, 220, 151, .34); color: #9df0c8; }
.alert--err { background: rgba(255, 107, 107, .11); border: 1px solid rgba(255, 107, 107, .32); color: #ffb3b3; }

.success-panel { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1rem; }
.success-panel .mark {
  width: 66px; height: 66px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.6rem;
  box-shadow: 0 0 34px -6px rgba(168, 85, 247, .85);
}

/* ---------- Contact ---------- */

.contact__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .contact__grid { grid-template-columns: .85fr 1.15fr; } }

.info-list { display: grid; border-top: 1px solid var(--line); }
.info-list > div { padding: 1.2rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.3rem; }
.info-list a { text-decoration: none; }
.info-list strong { font-size: 1.02rem; font-weight: 500; color: var(--chrome); }
.info-list a strong { border-bottom: 1px solid var(--line-strong); transition: color .2s ease, border-color .2s ease; }
.info-list a:hover strong { color: var(--violet-soft); border-color: var(--violet-soft); }

.map {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: invert(.92) hue-rotate(185deg) saturate(.75) brightness(.95); }

/* ---------- Utilitaires ---------- */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.6rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Révélation au scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   INTRO CINÉMATOGRAPHIQUE (rejouée à chaque chargement)

   Séquence, en millisecondes :
     000–400  les barres letterbox se referment (format cinéma)
     200–800  amorce : une ligne de lumière s'allume et s'étire
     500–1600 traînées de phares qui traversent la nuit
     900–2100 le logo se matérialise (mise au point : flou → net)
     1900–2700 reflet chromé + éclats sur le logo
     2200–3000 le titre monte, l'interlettrage se resserre
     3100–3600 flare anamorphique + travelling avant
     3450–4150 les volets s'écartent et révèlent le site

   Aucune de ces animations ne conditionne l'affichage du site :
   l'overlay est retiré par js/intro.js sur minuterie, quoi qu'il arrive.

   ORDRE DES COUCHES (z-index) — à respecter impérativement :
     1  volets   (fond de la scène : ils PORTENT le décor, tout joue devant)
     2  halo     3  traînées   4  amorce   5  scène (logo + titre)
     6  flare / éclat de coupure   7  vignette   8  grain
     9  barres letterbox   10  bouton passer
   Le bug historique : les volets étaient à z-5 AU-DESSUS de l'amorce, des
   traînées et du halo — toute la partie cinématographique jouait derrière
   un panneau opaque. Et l'overlay ayant son propre fond, les volets
   s'ouvraient sur du noir au lieu du site.
   ========================================================= */

/* Pendant l'intro, le site est masqué pour éviter tout scintillement */
html.intro-pending body > *:not(#intro) { opacity: 0; }
html.intro-pending, html.intro-playing { overflow: hidden; }

/* L'overlay est TRANSPARENT : le décor est porté par les deux volets.
   Quand ils s'écartent, c'est la vraie page d'accueil qui apparaît. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: transparent;
  overflow: hidden;
  perspective: 1000px;
}
#intro[hidden] { display: none; }

/* ---------- Barres letterbox : le format cinéma ---------- */

.cine__bar {
  position: absolute;
  left: -2%;
  right: -2%;
  height: 12vh;
  background: #000;
  z-index: 9;
  transform: scaleY(0);
  animation: barIn .4s cubic-bezier(.5,0,.2,1) forwards;
}
.cine__bar--top { top: 0; transform-origin: top; }
.cine__bar--bottom { bottom: 0; transform-origin: bottom; }
@keyframes barIn { to { transform: scaleY(1); } }

/* Elles se retirent à la coupure */
#intro[data-phase="out"] .cine__bar {
  animation: barOut .55s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes barOut { to { transform: scaleY(0); } }

/* ---------- Amorce : la ligne de lumière ---------- */

.cine__ignite {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1.5px;
  width: 62vw;
  max-width: 760px;
  z-index: 4;
  transform: translate(-50%, -50%) scaleX(0);
  background: linear-gradient(90deg,
              transparent, rgba(168,85,247,.6) 18%, #ffffff 50%,
              rgba(168,85,247,.55) 82%, transparent);
  box-shadow: 0 0 26px 2px rgba(168,85,247,.7);
  animation: igniteIn .62s cubic-bezier(.16,.84,.3,1) .18s forwards,
             igniteOut .5s ease .95s forwards;
}
@keyframes igniteIn { to { transform: translate(-50%, -50%) scaleX(1); } }
@keyframes igniteOut {
  to { opacity: 0; transform: translate(-50%, -50%) scaleX(1) scaleY(6); }
}

/* ---------- Traînées de phares ---------- */

.cine__streaks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  filter: blur(1px);
}
.cine__streaks i {
  position: absolute;
  left: -35%;
  height: 1.5px;
  width: 34%;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--c, #a855f7), transparent);
  animation: streak 1s cubic-bezier(.3,0,.5,1) forwards;
}
.cine__streaks i:nth-child(1) { top: 22%; --c: #a855f7; width: 40%; animation-delay: .5s; }
.cine__streaks i:nth-child(2) { top: 34%; --c: #a855f7; width: 26%; animation-delay: .66s; }
.cine__streaks i:nth-child(3) { top: 61%; --c: #b06cf9; width: 32%; animation-delay: .58s; }
.cine__streaks i:nth-child(4) { top: 73%; --c: #ffffff; width: 18%; animation-delay: .78s; }
.cine__streaks i:nth-child(5) { top: 46%; --c: #a855f7; width: 45%; animation-delay: .88s; }
.cine__streaks i:nth-child(6) { top: 84%; --c: #7fa5ff; width: 22%; animation-delay: 1s; }

@keyframes streak {
  0% { transform: translateX(0) scaleX(.4); opacity: 0; }
  22% { opacity: .95; }
  100% { transform: translateX(390%) scaleX(1.5); opacity: 0; }
}

/* ---------- Halo qui éclot derrière le logo ---------- */

.cine__bloom {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(78vw, 620px);
  aspect-ratio: 1;
  z-index: 2;
  transform: translate(-50%, -50%) scale(.4);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle,
              rgba(168,85,247,.40) 0%, rgba(91,109,255,.18) 38%, transparent 68%);
  filter: blur(26px);
  animation: bloom 1.5s cubic-bezier(.16,.84,.3,1) .85s forwards;
}
@keyframes bloom {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  55% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: .78; transform: translate(-50%,-50%) scale(1.08); }
}

/* ---------- Scène : logo + titre ---------- */

.cine__stage {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 3vw, 1.9rem);
  padding: 1.5rem;
  text-align: center;
  transform-style: preserve-3d;
  /* Lent recul de caméra sur toute la durée de l'intro */
  animation: stageSettle 3.6s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes stageSettle {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

/* Travelling avant à la sortie */
#intro[data-phase="out"] .cine__stage {
  animation: pushIn .8s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes pushIn {
  to { transform: scale(1.1) translateZ(60px); opacity: 0; }
}

/* Logo : mise au point (flou → net).
   L'emblème est détouré (img/logo-mark.webp) : plus de vignette carrée,
   il flotte dans la nuit comme un vrai logo. */
.cine__logo {
  position: relative;
  width: clamp(200px, 44vw, 340px);
  opacity: 0;
  transform: scale(1.22);
  filter: blur(22px);
  animation: focusPull 1.2s cubic-bezier(.2,.75,.25,1) .9s forwards;
}
.cine__logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .75));
}
@keyframes focusPull {
  0% { opacity: 0; transform: scale(1.22); filter: blur(22px); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Reflet chromé qui balaye le logo en diagonale */
.cine__logo::after {
  content: "";
  position: absolute;
  top: -55%; bottom: -55%;
  left: -45%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent);
  transform: rotate(17deg) translateX(-160%);
  animation: sweep 1.05s cubic-bezier(.45,0,.3,1) 1.95s forwards;
}
@keyframes sweep {
  to { transform: rotate(17deg) translateX(460%); }
}

/* Éclats lumineux ponctuels sur l'emblème */
.cine__glint {
  position: absolute;
  width: 46px; height: 46px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, #fff 50%, transparent 53%);
  filter: blur(.4px) drop-shadow(0 0 8px rgba(205,170,255,.95));
  animation: glint .62s cubic-bezier(.3,0,.4,1) forwards;
}
.cine__glint--1 { top: 14%; left: 62%; animation-delay: 2.05s; }
.cine__glint--2 { top: 55%; left: 14%; animation-delay: 2.28s; width: 34px; height: 34px; }
.cine__glint--3 { top: 30%; left: 26%; animation-delay: 2.46s; width: 26px; height: 26px; }

@keyframes glint {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(35deg); }
  100% { opacity: 0; transform: scale(.5) rotate(70deg); }
}

/* ---------- Titre : l'interlettrage se resserre ---------- */

/* L'interlettrage se resserre — geste de générique de film.
   --ls-debut est réduit sur petit écran : à 0.55em le titre serait plus large
   que le viewport et se ferait couper aux deux bords pendant le plan. */
.cine__title {
  --ls-debut: .55em;
  font-family: var(--mono);
  font-size: clamp(.58rem, 1.75vw, .78rem);
  text-transform: uppercase;
  color: #dfe6f6;
  letter-spacing: var(--ls-debut);
  text-indent: var(--ls-debut);
  opacity: 0;
  white-space: nowrap;
  animation: titleIn 1.05s cubic-bezier(.2,.7,.25,1) 2.2s forwards;
}
@media (max-width: 680px) { .cine__title { --ls-debut: .38em; } }
@media (max-width: 400px) { .cine__title { --ls-debut: .34em; } }

@keyframes titleIn {
  0% { opacity: 0; letter-spacing: var(--ls-debut); text-indent: var(--ls-debut); filter: blur(5px); }
  100% { opacity: 1; letter-spacing: .3em; text-indent: .3em; filter: blur(0); }
}

.cine__sub {
  overflow: hidden;
  font-family: var(--mono);
  font-size: clamp(.54rem, 1.4vw, .64rem);
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: #8b94ad;
}
.cine__sub > span {
  display: block;
  transform: translateY(120%);
  animation: subUp .7s cubic-bezier(.2,.7,.25,1) 2.62s forwards;
}
@keyframes subUp { to { transform: none; } }

/* Filet lumineux sous le titre */
.cine__rule {
  width: clamp(90px, 20vw, 150px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-soft), var(--blue-soft), transparent);
  transform: scaleX(0);
  animation: ruleIn .8s cubic-bezier(.16,.84,.3,1) 2.45s forwards;
}
@keyframes ruleIn { to { transform: scaleX(1); } }

/* ---------- Flare anamorphique à la coupure ---------- */

.cine__flare {
  position: absolute;
  top: 47%;
  left: -60%;
  width: 60%;
  height: 3px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(215,185,255,.9), #fff, rgba(215,185,255,.9), transparent);
  box-shadow: 0 0 40px 10px rgba(180,130,255,.6);
  filter: blur(1px);
}
#intro[data-phase="out"] .cine__flare {
  animation: flare .62s cubic-bezier(.35,0,.4,1) forwards;
}
@keyframes flare {
  0% { opacity: 0; transform: translateX(0) scaleY(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(300%) scaleY(1.6); }
}

/* Éclat doux (jamais un flash blanc violent) */
.cine__bloomout {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 47%, rgba(205,175,255,.36), transparent 62%);
}
#intro[data-phase="out"] .cine__bloomout {
  animation: bloomOut .5s ease-out .1s forwards;
}
@keyframes bloomOut { 40% { opacity: 1; } 100% { opacity: 0; } }

/* À la coupure, la texture et le halo s'effacent pour ne pas
   assombrir la page qui apparaît entre les volets. */
#intro[data-phase="out"] .cine__vignette,
#intro[data-phase="out"] .cine__grain,
#intro[data-phase="out"] .cine__bloom {
  animation: cineFade .45s ease forwards;
}
@keyframes cineFade { to { opacity: 0; } }

/* ---------- Volets : décor ET mécanisme de révélation ----------
   Ils sont la couche la plus basse (z-1) : tout le spectacle — amorce,
   traînées, halo, logo — joue DEVANT eux. Leurs deux dégradés se
   rejoignent sur la même couleur au centre : le fond paraît continu.
   À la coupure ils s'écartent et découvrent la vraie page d'accueil,
   puisque l'overlay lui-même est transparent. */

.cine__shutter {
  position: absolute;
  left: 0; right: 0;
  height: 50.4%;
  z-index: 1;
  transition: transform .7s cubic-bezier(.76,0,.24,1) .25s;
}
.cine__shutter--top {
  top: 0;
  background: linear-gradient(180deg, #010208 0%, #070a18 62%, #0d1128 100%);
}
.cine__shutter--bottom {
  bottom: 0;
  background: linear-gradient(0deg, #010208 0%, #070a18 62%, #0d1128 100%);
}
#intro[data-phase="out"] .cine__shutter--top { transform: translateY(-101%); }
#intro[data-phase="out"] .cine__shutter--bottom { transform: translateY(101%); }

/* Liseré lumineux sur la ligne de séparation des volets */
.cine__shutter--top::after,
.cine__shutter--bottom::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.8), rgba(168,85,247,.75), transparent);
}
.cine__shutter--top::after { bottom: 0; }
.cine__shutter--bottom::after { top: 0; }
#intro[data-phase="out"] .cine__shutter::after { opacity: 1; transition: opacity .2s ease; }

/* ---------- Texture : grain + vignette ---------- */

.cine__grain {
  position: absolute;
  inset: -50%;
  z-index: 8;
  pointer-events: none;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(4, end) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

.cine__vignette {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 47%, transparent 38%, rgba(0,0,0,.72) 100%);
}

/* ---------- Bouton passer ---------- */

.cine__skip {
  position: absolute;
  bottom: calc(12vh + clamp(1rem, 3vw, 1.8rem));
  right: clamp(1.2rem, 4vw, 2.4rem);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(170,190,255,.26);
  border-radius: 999px;
  padding: .6rem 1.15rem;
  color: #c9d2e6;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: skipIn .5s ease 1.2s forwards;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.cine__skip:hover { color: #fff; border-color: var(--violet-soft); background: rgba(168,85,247,.18); }
.cine__skip:focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 3px; }
@keyframes skipIn { to { opacity: 1; } }

/* Sur les écrans courts, on réduit les barres pour garder la scène lisible */
@media (max-height: 620px) {
  .cine__bar { height: 7vh; }
  .cine__skip { bottom: calc(7vh + .8rem); }
}

/* Volontairement : AUCUNE animation ne conditionne la réapparition du contenu.
   Une animation d'entrée partant de l'opacité 0 laisserait la page entièrement
   noire si le navigateur n'exécutait pas les animations (réglage
   d'accessibilité, extension, onglet gelé). La révélation vient de l'ouverture
   des volets, purement décorative : même immobiles, ils partent avec l'overlay. */


/* ---------- Accessibilité mouvement réduit ---------- */

/* EXCEPTION DEMANDÉE PAR LE CLIENT : l'intro cinématographique doit se jouer
   même quand le système réclame de réduire les animations.
   Le neutralisateur ci-dessous est donc suspendu tant que <html> porte
   « intro-pending » ou « intro-playing » — soit exactement la durée de
   l'intro. Ces classes sont posées par le script du <head> d'index.html
   (donc AVANT le premier rendu, sinon les volets et l'amorce démarreraient
   déjà écrasés) puis retirées par js/intro.js à la fin de la séquence.
   Passé ce point, tout le reste du site respecte de nouveau le réglage. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html:not(.intro-pending):not(.intro-playing) *,
  html:not(.intro-pending):not(.intro-playing) *::before,
  html:not(.intro-pending):not(.intro-playing) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  .hero::before { animation: none; }
}

@media print {
  .header, .footer, .summary-bar, .btn, #intro { display: none; }
  body { background: #fff; color: #000; }
}