/*
 * RGAA audit — feuille de style.
 *
 * Deux contraintes tenues ensemble : le site doit donner envie d'acheter, et il
 * doit passer le scanner que nous vendons. Concrètement : contrastes vérifiés
 * au-dessus de 4.5:1 y compris sur fond sombre, focus clavier visible partout,
 * et toute l'animation neutralisée si le visiteur a demandé moins de mouvement
 * (voir le bloc prefers-reduced-motion en fin de fichier).
 */

:root {
  --nuit: #070b1e;
  --nuit-2: #0d1430;
  --nuit-3: #151d42;
  --clair: #f5f7fd;
  --blanc: #ffffff;

  --encre: #eef1fb;
  --encre-sombre: #0a0f26;
  --gris: #9aa3c4;
  /* Eclairci : #565f80 ne donnait que 3.1:1 sur le fond sombre, sous le seuil de 4.5. */
  --gris-sombre: #7d87ab;
  /* Variante pour fond clair, ou l inverse est vrai. */
  --gris-clair-fond: #555f80;

  --accent: #6c9bff;
  --accent-vif: #8db4ff;
  --alerte: #ff7a7a;
  --alerte-sombre: #c0392f;
  --succes: #4ade9b;

  --bord: rgba(255, 255, 255, 0.1);
  --bord-clair: #dde3f2;

  --rayon: 14px;
  --rayon-l: 22px;
  --transition: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/*
 * `display: flex` sur un élément portant `hidden` l'emporte sur la règle par
 * défaut du navigateur : sans ceci, les deux flux d'annonces de la
 * démonstration s'affichent l'un à la suite de l'autre.
 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--encre);
  font: 400 17px/1.6 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
em { font-style: italic; }

a { color: var(--accent-vif); text-decoration-thickness: 1px; text-underline-offset: 4px; }

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

.conteneur { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.conteneur-etroit { max-width: 780px; }

.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--nuit);
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 0 0 var(--rayon) 0;
}
.evitement:focus { left: 0; }

/* ─────────── En-tête ─────────── */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 11, 30, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}
.entete-barre {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 74px;
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--encre);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.logo-marque {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), #b892ff);
  flex: none;
}
.nav { display: flex; gap: 26px; list-style: none; margin-right: auto; flex-wrap: wrap; }
.nav a { color: var(--gris); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.nav a:hover { color: var(--encre); }

/* ─────────── Boutons ─────────── */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 100px;
  font: 600 1rem/1 Inter, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.bouton-principal {
  background: var(--accent);
  color: #05091c;
  box-shadow: 0 8px 30px rgba(108, 155, 255, 0.28);
}
.bouton-principal:hover {
  background: var(--accent-vif);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(108, 155, 255, 0.4);
}
.bouton-fantome {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--bord);
  color: var(--encre);
}
.bouton-fantome:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); }
.bouton-compact { padding: 11px 20px; font-size: 0.92rem; background: rgba(255,255,255,0.07); border-color: var(--bord); color: var(--encre); }
.bouton-compact:hover { background: rgba(255,255,255,0.14); }
.bouton-large { width: 100%; margin-top: 26px; }
.bouton-grand { padding: 19px 44px; font-size: 1.08rem; margin-top: 12px; }
.bouton[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ─────────── Accroche ─────────── */
.heros {
  position: relative;
  padding: 120px 0 130px;
  overflow: hidden;
}
.aurore { position: absolute; inset: -20% -10% auto; height: 130%; pointer-events: none; }
.aurore-tache {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: derive 22s ease-in-out infinite;
}
.aurore-1 { width: 620px; height: 620px; background: #2d4bc4; top: -140px; left: -120px; }
.aurore-2 { width: 520px; height: 520px; background: #7a3fd4; top: 40px; right: -100px; animation-delay: -7s; }
.aurore-3 { width: 440px; height: 440px; background: #1d6fb8; bottom: -120px; left: 38%; animation-delay: -14s; }

@keyframes derive {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(40px, -30px, 0) scale(1.12); }
  66%      { transform: translate3d(-30px, 26px, 0) scale(0.94); }
}

.heros-contenu { position: relative; z-index: 1; max-width: 900px; }

.pastille-loi {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255, 122, 122, 0.35);
  background: rgba(255, 122, 122, 0.1);
  border-radius: 100px;
  color: #ffb3b3;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 30px;
}
.point {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--alerte);
  animation: pulsation 2.2s ease-in-out infinite;
}
@keyframes pulsation {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 122, 122, 0.55); }
  50%      { opacity: 0.75; box-shadow: 0 0 0 9px rgba(255, 122, 122, 0); }
}

h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  letter-spacing: -0.035em;
}
h1 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--accent-vif), #c3a0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.accroche {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--gris);
  max-width: 40em;
  margin-top: 28px;
}
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }
.rassurance { margin-top: 26px; font-size: 0.9rem; color: var(--gris-sombre); }

/* Entrée échelonnée */
[data-anime] { opacity: 0; transform: translateY(22px); }
.pret [data-anime] {
  animation: monter 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.pret [data-anime="1"] { animation-delay: 0.05s; }
.pret [data-anime="2"] { animation-delay: 0.16s; }
.pret [data-anime="3"] { animation-delay: 0.3s; }
.pret [data-anime="4"] { animation-delay: 0.42s; }
.pret [data-anime="5"] { animation-delay: 0.54s; }
@keyframes monter { to { opacity: 1; transform: none; } }

/* Révélation au défilement */
[data-reveler] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--transition), transform var(--transition);
}
[data-reveler].visible { opacity: 1; transform: none; }

/* ─────────── Bande de chiffres ─────────── */
.bande-chiffres {
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  background: var(--nuit-2);
  padding: 58px 0;
}
.chiffres-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.chiffre { text-align: center; }
.chiffre-valeur {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0 0 12px;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.chiffre-libelle { color: var(--gris); font-size: 0.97rem; margin: 0; }

/* ─────────── Sections ─────────── */
.section { padding: 110px 0; }
.section-claire { background: var(--clair); color: var(--encre-sombre); }
.section-claire a { color: #2a4fbf; }
.section-intro { max-width: 760px; margin-bottom: 60px; }
.surtitre {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.section-claire .surtitre { color: #3358cc; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.chapeau { color: var(--gris); font-size: 1.08rem; margin-top: 20px; }
.section-claire .chapeau { color: #4a5578; }

/* ─────────── Démonstration ─────────── */
.demo {
  margin: 0;
  background: var(--nuit-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-l);
  overflow: hidden;
}
.demo-commandes {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bord);
  flex-wrap: wrap;
}
.onglet {
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--bord);
  background: transparent;
  color: var(--gris);
  font: 600 0.9rem Inter, sans-serif;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.onglet:hover { color: var(--encre); }
.onglet.est-actif { background: var(--accent); border-color: var(--accent); color: #05091c; }
.bouton-pause {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--bord);
  background: transparent;
  color: var(--gris);
  font: 500 0.85rem Inter, sans-serif;
  cursor: pointer;
}
.bouton-pause:hover { color: var(--encre); }
.pause-icone {
  width: 9px; height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.bouton-pause[aria-pressed="true"] .pause-icone {
  border: none;
  width: 0; height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.demo-scene { display: grid; grid-template-columns: 1fr 1fr; }
.demo-visuel { padding: 34px; border-right: 1px solid var(--bord); }
.demo-audio { padding: 34px; background: rgba(0, 0, 0, 0.22); }
.demo-etiquette {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris-sombre);
  margin-bottom: 26px;
}

/* Fiche produit simulée */
.fiche {
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  color: #1a1f35;
  max-width: 330px;
  transition: filter 0.6s;
}
.fiche-image {
  height: 150px;
  background: linear-gradient(135deg, #e9d8b8, #cdb188);
  display: grid;
  place-items: center;
}
.fiche-image-forme {
  width: 58px; height: 78px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(160deg, #b5751f, #7d4a12);
  box-shadow: inset 0 -12px 18px rgba(0,0,0,0.25);
}
.fiche-corps { padding: 20px; }
.fiche-marque { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: #7b8296; margin: 0 0 6px; }
.fiche-titre { font-size: 1.12rem; margin: 0 0 8px; color: #0e1326; }
.fiche-prix { font-size: 1.3rem; font-weight: 700; margin: 0 0 18px; color: #0e1326; }
.fiche-actions { display: flex; gap: 9px; margin-bottom: 14px; }
.fiche-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px 16px;
}
.fiche-bouton-principal { background: #16204a; color: #fff; flex: 1; }
.fiche-bouton-icone { background: #eef1f8; color: #c0392f; width: 44px; padding: 11px 0; }
.fiche-lien { font-size: 0.88rem; color: #2a4fbf; text-decoration: underline; margin: 0; }

/* Flux d'annonces */
.onde { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.onde i {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: onduler 1.1s ease-in-out infinite;
}
.onde i:nth-child(1) { height: 6px; animation-delay: 0s; }
.onde i:nth-child(2) { height: 13px; animation-delay: 0.15s; }
.onde i:nth-child(3) { height: 9px; animation-delay: 0.3s; }
.onde i:nth-child(4) { height: 14px; animation-delay: 0.45s; }
@keyframes onduler { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.demo-scene.est-en-pause .onde i { animation-play-state: paused; }

.flux { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.flux-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid transparent;
  font-size: 0.94rem;
  color: var(--gris);
  opacity: 0.35;
  transition: opacity 0.35s, background 0.35s, border-color 0.35s, transform 0.35s;
}
.flux-item.est-lu {
  opacity: 1;
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--bord);
  color: var(--encre);
}
.flux-item.est-defaut.est-lu {
  background: rgba(255, 122, 122, 0.14);
  border-color: rgba(255, 122, 122, 0.45);
  color: #ffc4c4;
}
.flux-item.est-ok.est-lu {
  background: rgba(74, 222, 155, 0.12);
  border-color: rgba(74, 222, 155, 0.4);
  color: #a7f3d0;
}
.flux-puce {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
}
.est-defaut .flux-puce { background: var(--alerte); color: #3d0a0a; }
.est-ok .flux-puce { background: var(--succes); color: #053022; }

.demo-legende {
  padding: 26px 34px 30px;
  border-top: 1px solid var(--bord);
  color: var(--gris);
  font-size: 0.97rem;
}
.demo-legende strong { color: var(--encre); }

/* ─────────── Cartes ─────────── */
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; }
.carte {
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-l);
  padding: 34px 30px;
  transition: transform 0.35s, box-shadow 0.35s;
}
.carte:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(15, 25, 65, 0.12); }
.carte-numero {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.1rem;
  color: #b9c4e4;
  margin-bottom: 14px;
}
.carte h3 { font-size: 1.22rem; margin-bottom: 12px; color: var(--encre-sombre); }
.carte p { color: #4a5578; font-size: 0.99rem; }
.carte-mention {
  margin: 18px 0 0;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3358cc;
}

/* ─────────── Méthode ─────────── */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; list-style: none; counter-reset: pas; }
.etapes > li { counter-increment: pas; padding-top: 26px; border-top: 2px solid var(--bord); }
.etapes > li::before {
  content: "0" counter(pas);
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.7rem;
  color: var(--accent);
  margin-bottom: 14px;
}
.etapes h3 { font-size: 1.16rem; margin-bottom: 11px; }
.etapes p { color: var(--gris); margin: 0; }

.franchise {
  margin-top: 70px;
  background: var(--nuit-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-l);
  padding: 38px 40px;
}
.franchise h3 { font-size: 1.3rem; margin-bottom: 16px; }
.franchise p { color: var(--gris); margin-bottom: 14px; }
.franchise strong { color: var(--encre); }
.franchise-note { font-style: italic; color: var(--gris-sombre); margin: 0; }

/* ─────────── Tarifs ─────────── */
.tarifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; }
.tarif {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-l);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
}
.tarif-vedette {
  background: var(--encre-sombre);
  border-color: var(--encre-sombre);
  color: var(--encre);
  box-shadow: 0 26px 60px rgba(10, 15, 38, 0.24);
}
.ruban {
  position: absolute;
  top: -13px; left: 34px;
  background: var(--accent);
  color: #05091c;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 100px;
  margin: 0;
}
.tarif h3 { font-size: 1.3rem; color: inherit; }
.section-claire .tarif h3 { color: var(--encre-sombre); }
.section-claire .tarif-vedette h3 { color: var(--encre); }
.prix { margin: 20px 0 26px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prix-montant { font-family: "Instrument Serif", Georgia, serif; font-size: 3.1rem; line-height: 1; }
.prix-mention { color: var(--gris-clair-fond); font-size: 0.96rem; }
.tarif-vedette .prix-mention { color: var(--gris); }
.liste-points { list-style: none; margin-bottom: auto; display: flex; flex-direction: column; gap: 12px; }
.liste-points li { position: relative; padding-left: 30px; font-size: 0.99rem; color: #4a5578; }
.tarif-vedette .liste-points li { color: var(--gris); }
.liste-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.36em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(51, 88, 204, 0.14);
  box-shadow: inset 0 0 0 2px #3358cc;
}
.tarif-vedette .liste-points li::before {
  background: rgba(108, 155, 255, 0.18);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.note-tva { margin-top: 30px; font-size: 0.91rem; color: var(--gris-clair-fond); }
.erreur-paiement {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--rayon);
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: var(--alerte-sombre);
  font-weight: 600;
}

/* ─────────── Questions ─────────── */
.questions details {
  border-bottom: 1px solid var(--bord);
  padding: 22px 0;
}
.questions summary {
  font-weight: 600;
  font-size: 1.08rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.3s;
  flex: none;
}
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { margin: 16px 0 0; color: var(--gris); max-width: 62ch; }

.lien-secondaire {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--gris-clair-fond);
}
.tarif-vedette .lien-secondaire { color: var(--gris); }

/* ─────────── Formulaire de contact ─────────── */
.contact { background: var(--nuit-2); }
.formulaire { margin-top: 8px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.champ { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.champ-large { grid-column: 1 / -1; }

.champ label { font-weight: 600; font-size: 0.95rem; }
.requis { color: var(--alerte); margin-left: 2px; }
.facultatif { font-weight: 400; color: var(--gris-sombre); font-size: 0.87rem; }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: rgba(255, 255, 255, 0.06);
  color: var(--encre);
  font: 400 1rem Inter, -apple-system, sans-serif;
  transition: border-color 0.2s, background 0.2s;
}
.champ textarea { resize: vertical; min-height: 110px; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-sombre); }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--gris-sombre); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}
/* Le navigateur rend les options d'une liste sur fond clair : sans cela, le
   texte clair hérité du thème sombre devient illisible une fois déroulée. */
.champ select option { color: #111827; background: #ffffff; }

/* Un champ en erreur ne se signale pas par la seule couleur : le message
   explicite juste en dessous porte l'information. */
.champ.est-invalide input,
.champ.est-invalide select,
.champ.est-invalide textarea { border-color: var(--alerte); }
.message-champ {
  font-size: 0.85rem;
  color: #ffb3b3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.aide { font-size: 0.85rem; color: var(--gris); }

.mention-donnees { margin: 22px 0 0; font-size: 0.87rem; color: var(--gris-sombre); }
.erreurs-formulaire {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 122, 122, 0.12);
  border: 1px solid rgba(255, 122, 122, 0.4);
  color: #ffc4c4;
  font-weight: 600;
}
.formulaire .bouton-large { margin-top: 22px; }

.confirmation {
  margin-top: 8px;
  padding: 30px 32px;
  border-radius: var(--rayon-l);
  background: rgba(74, 222, 155, 0.1);
  border: 1px solid rgba(74, 222, 155, 0.35);
  color: #c7f5df;
  font-size: 1.05rem;
}
.confirmation strong { color: var(--blanc); display: block; margin-bottom: 8px; font-size: 1.2rem; }

/* ─────────── Appel final ─────────── */
.appel { text-align: center; padding: 120px 0 130px; background: var(--nuit-2); }
.appel h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.appel .chapeau { margin: 22px auto 10px; }

/* ─────────── Pied ─────────── */
.pied { background: var(--nuit); border-top: 1px solid var(--bord); padding: 52px 0; }
.pied-grille { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.pied-marque { font-weight: 700; margin: 0 0 6px; }
.pied-note { color: var(--gris-sombre); font-size: 0.92rem; margin: 0; }
.pied-liens { display: flex; gap: 26px; list-style: none; flex-wrap: wrap; }
.pied a { color: var(--gris); text-decoration: none; font-size: 0.93rem; }
.pied a:hover { color: var(--encre); text-decoration: underline; }

/* Pages secondaires */
.page-simple { padding: 80px 0 100px; }
.page-simple h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 26px; }
.page-simple h2 { font-size: 1.4rem; margin: 40px 0 14px; }
.page-simple h3 { font-size: 1.1rem; margin: 26px 0 10px; }
.page-simple p, .page-simple li { color: var(--gris); }
.page-simple strong { color: var(--encre); }
.mise-en-garde {
  background: var(--nuit-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 22px 26px;
  margin-bottom: 34px;
}

/* ─────────── Adaptation mobile ─────────── */
@media (max-width: 960px) {
  .chiffres-grille, .cartes, .etapes, .tarifs, .champs { grid-template-columns: 1fr; }
  .demo-scene { grid-template-columns: 1fr; }
  .demo-visuel { border-right: none; border-bottom: 1px solid var(--bord); }
  .heros { padding: 80px 0 90px; }
  .section { padding: 76px 0; }
  .nav { display: none; }
  .fiche { max-width: none; }
}

/* ─────────── Mouvement réduit ───────────
 * Le visiteur a demandé moins d'animation : on la supprime entièrement plutôt
 * que de l'atténuer, et tout s'affiche dans son état final.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-anime], [data-reveler] { opacity: 1 !important; transform: none !important; }
  .aurore { display: none; }
  .flux-item { opacity: 1; }
  .carte:hover, .bouton:hover { transform: none; }
}