/* ==========================================================================
   « Les Voix du Lundi » : feuille de style unique (exemple fictif)
   Base : modèle « J'hallucine… ! » (jh.css), jetons et composants adaptés.
   Discipline CSS JBC : jetons en tête, une définition par composant,
   media queries regroupées en fin de feuille.
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */
:root {
  --nuit: #141B3A;
  --nuit-2: #1F2A55;
  --nuit-soft: #3A4270;
  --creme: #FBF3E4;
  --creme-2: #F6E9D3;
  --creme-3: #EEDDC0;
  --white: #FFFFFF;
  --soleil: #F6B93B;
  --soleil-deep: #D9951A;
  --corail: #EF6F5A;
  --corail-deep: #C94E3A;
  --on-nuit: #E6DFCF;
  --on-nuit-soft: #ABA9C0;

  --tint-corail: rgba(239, 111, 90, .11);
  --tint-soleil: rgba(246, 185, 59, .18);
  --tint-nuit: rgba(20, 27, 58, .09);
  --tint-creme: rgba(251, 243, 228, .08);
  --line-creme: rgba(251, 243, 228, .16);

  --r-sm: 10px;
  --r: 18px;
  --r-lg: 30px;
  --r-pill: 999px;

  --sh-soft: 0 10px 30px -18px rgba(20, 27, 58, .45);
  --sh-lift: 0 26px 60px -32px rgba(20, 27, 58, .6);

  --transition: 220ms cubic-bezier(.2, .7, .3, 1);

  --wrap: 1180px;
  --wrap-text: 760px;
  --head-h: 76px;

  --f-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- 2. Socle ------------------------------------------------------------ */
* { box-sizing: border-box; }

html {
  overscroll-behavior: none;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--head-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--creme);
  color: var(--nuit);
  font-family: var(--f-body);
  font-size: 18.5px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; display: block; }

a { color: var(--corail-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0 0 18px;
}

h1 { font-size: clamp(3rem, 9vw, 5.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.8rem, 4.6vw, 3.05rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); }

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

/* --- 3. Structure et fonds ---------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.section { padding: 96px 0; position: relative; z-index: 1; overflow: hidden; }

/* Fond clair : crème uni, sans dégradé. */
.fond-creme { background: var(--creme); }

/* Fond miel : part du crème et y revient, halos corail et soleil très fondus. */
.fond-miel {
  background:
    radial-gradient(85% 80% at 0% 18%, rgba(239, 111, 90, .13) 0%, rgba(239, 111, 90, .06) 40%, rgba(239, 111, 90, .02) 70%, transparent 90%),
    radial-gradient(80% 80% at 100% 85%, rgba(246, 185, 59, .22) 0%, rgba(246, 185, 59, .09) 40%, rgba(246, 185, 59, .02) 70%, transparent 90%),
    linear-gradient(180deg, var(--creme) 0%, var(--creme-2) 22%, var(--creme-3) 50%, var(--creme-2) 78%, var(--creme) 100%);
}

.section--nuit {
  color: var(--creme);
  background:
    radial-gradient(90% 90% at 92% 0%, rgba(246, 185, 59, .22) 0%, rgba(246, 185, 59, .09) 38%, rgba(246, 185, 59, .03) 68%, transparent 92%),
    radial-gradient(85% 90% at 0% 100%, rgba(239, 111, 90, .24) 0%, rgba(239, 111, 90, .10) 40%, rgba(239, 111, 90, .03) 70%, transparent 92%),
    linear-gradient(170deg, var(--nuit) 0%, #18214A 50%, var(--nuit-2) 100%);
}

/* Vraie texture papier (banque-textures, coton crème), sur certains blocs seulement. */
.papier::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background: url("../img/papier-clair.webp") repeat;
  background-size: 640px 640px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.section--nuit.papier::before,
.pied.papier::before {
  mix-blend-mode: screen;
  background-image: url("../img/papier-sombre.webp");
}

.section--nuit h2,
.section--nuit h3 { color: var(--creme); }
.section--nuit .lead { color: var(--on-nuit); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--corail-deep);
  background: var(--tint-corail);
  border-radius: var(--r-pill);
  padding: 8px 18px 8px 12px;
  margin: 0 0 22px;
  line-height: 1.5;
}
.kicker img { width: 20px; height: 20px; flex: 0 0 auto; }
.section--nuit .kicker,
.hero .kicker { color: var(--soleil); background: rgba(246, 185, 59, .15); }

.lead {
  font-size: clamp(1.12rem, 2.2vw, 1.3rem);
  line-height: 1.64;
  color: var(--nuit-soft);
  max-width: 34em;
}

.texte { max-width: var(--wrap-text); }
.texte--centre { text-align: center; margin-left: auto; margin-right: auto; }
.texte--centre .lead { margin: 0 auto; }

.note {
  margin-top: 26px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--nuit-soft);
}

/* --- 4. Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  border: 2px solid var(--corail);
  background: var(--corail);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition);
  box-shadow: var(--sh-soft);
}
.btn:hover { transform: translateY(-2px); }

.btn--ghost {
  background: rgba(255, 255, 255, .6);
  color: var(--corail-deep);
  border-color: var(--corail);
  box-shadow: none;
}
/* Sur fond nuit : contour soleil, texte crème. */
.btn--clair {
  background: transparent;
  color: var(--creme);
  border-color: var(--soleil);
  box-shadow: none;
}

.btn--petit { font-size: .96rem; padding: 12px 22px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- 5. Logo ------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-display);
  font-size: 1.42rem;
  color: var(--nuit);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1;
}
.logo img { width: 46px; height: 46px; flex: 0 0 auto; }
.logo em { font-style: normal; color: var(--corail-deep); }
.logo--pied { font-size: 1.6rem; color: var(--creme); margin-bottom: 20px; }
.logo--pied em { color: var(--soleil); }
/* Dans le pied sombre, le logo pose sur un médaillon crème (sa note bleu nuit reste lisible). */
.logo--pied img {
  width: 58px;
  height: 58px;
  padding: 7px;
  border-radius: 50%;
  background: var(--creme);
}

.pastille-fictif {
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--corail-deep);
  border: 1px dashed var(--corail);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* --- 6. En-tête (clair, le hero est sombre) ----------------------------- */
.head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--creme);
  border-bottom: 1px solid var(--tint-nuit);
  box-shadow: 0 14px 34px -28px rgba(20, 27, 58, .7);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--head-h);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
.nav-marque { display: flex; align-items: center; gap: 14px; min-width: 0; }

.nav-links {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  font-size: .97rem;
  font-weight: 600;
  color: var(--nuit);
  text-decoration: none;
}
/* Trait jaune au survol. */
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--soleil);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }

.nav-mobile-only { display: none; }
.nav-desktop-only { display: inline-flex; }

.nav-cta {
  font-size: .96rem;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--corail);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition);
}
.nav-links .nav-cta,
.nav-cta:hover { color: var(--white); }
.nav-cta:hover { transform: translateY(-1px); }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 11px;
  flex: 0 0 auto;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--nuit);
  border-radius: 2px;
  margin: 5px 0;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 7. Hero sombre : illustration plein cadre ------------------------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: min(calc(100vh - var(--head-h)), 860px);
  display: flex;
  align-items: center;
  background: var(--nuit);
  color: var(--creme);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 27, 58, .76) 0%, rgba(20, 27, 58, .55) 26%, rgba(20, 27, 58, .15) 44%, rgba(20, 27, 58, 0) 56%),
    linear-gradient(0deg, rgba(20, 27, 58, .40) 0%, rgba(20, 27, 58, 0) 26%);   /* allégé le 26/09 (Julien : trop de dégradé à gauche, l'image paraissait coupée) */
}

.hero-visuel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}

.hero-inner { z-index: 2; padding-top: 70px; padding-bottom: 70px; }
.hero-texte { max-width: 560px; text-shadow: 0 2px 18px rgba(20, 27, 58, .55); }   /* le voile de gauche est plus léger : l'ombre garde le texte lisible */

.hero h1 { color: var(--creme); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--soleil); }

.hero-lead {
  font-size: clamp(1.12rem, 2.3vw, 1.32rem);
  line-height: 1.6;
  color: var(--on-nuit);
  margin-bottom: 32px;
}

.hero-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.hero-pastilles li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--creme);
  background: rgba(20, 27, 58, .55);
  border: 1px solid rgba(246, 185, 59, .35);
  border-radius: var(--r-pill);
  padding: 7px 15px 7px 11px;
}
.hero-pastilles img { width: 18px; height: 18px; }

/* --- 8. Cartes ----------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 48px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--tint-nuit);
  border-radius: var(--r);
  padding: 32px 28px;
  box-shadow: var(--sh-soft);
  transition: translate var(--transition);
}
.card:hover { translate: 0 -4px; }

.card-ic {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50%;
  background: var(--tint-soleil);
  margin-bottom: 18px;
}

.card h3 { margin-bottom: 10px; }
.card p { font-size: 1.06rem; line-height: 1.62; color: var(--nuit-soft); margin: 0; }

/* Variante sur fond nuit (répertoire). */
.card--nuit {
  background: var(--tint-creme);
  border-color: rgba(251, 243, 228, .2);
  box-shadow: none;
}
.card--nuit .card-ic { background: rgba(246, 185, 59, .14); }
.card--nuit p { color: var(--on-nuit); }

/* --- 9. Bloc image + texte --------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.duo--flip .duo-media { order: 2; }
.duo--portrait { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

.duo-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lift);
}
.duo-media img { width: 100%; height: auto; }

/* --- 10. Déroulé d'une répétition (horaires + trait fin) --------------- */
.deroule {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.deroule li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--tint-nuit);
}
.deroule li:first-child { padding-top: 0; }
.deroule li:last-child { border-bottom: 0; padding-bottom: 0; }
.deroule-h {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--corail-deep);
  line-height: 1.2;
}
.deroule strong { display: block; font-size: 1.08rem; color: var(--nuit); }
.deroule span.d { display: block; font-size: 1.02rem; line-height: 1.6; color: var(--nuit-soft); }

/* --- 11. Encadré d'Antoine ---------------------------------------------- */
.pro-card {
  background: var(--white);
  border: 1px solid var(--tint-nuit);
  border-radius: var(--r);
  padding: 6px 26px;
  box-shadow: var(--sh-soft);
  margin-top: 28px;
}
.pro-card ul { list-style: none; margin: 0; padding: 0; }
.pro-card li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--nuit);
  border-bottom: 1px solid var(--tint-nuit);
}
.pro-card li:last-child { border-bottom: 0; }
.pro-card img { width: 22px; height: 22px; flex: 0 0 auto; }

/* --- 12. Séance d'essai ------------------------------------------------- */
.essai {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 60px;
  align-items: center;
}

.offre {
  position: relative;
  overflow: hidden;
  color: var(--creme);
  text-align: center;
  border-radius: var(--r-lg);
  padding: 42px 34px 34px;
  box-shadow: var(--sh-lift);
  background:
    radial-gradient(100% 90% at 100% 0%, rgba(246, 185, 59, .34) 0%, rgba(246, 185, 59, .14) 40%, rgba(246, 185, 59, .04) 70%, transparent 95%),
    radial-gradient(95% 90% at 0% 100%, rgba(239, 111, 90, .32) 0%, rgba(239, 111, 90, .13) 40%, rgba(239, 111, 90, .04) 70%, transparent 95%),
    linear-gradient(160deg, var(--nuit) 0%, var(--nuit-2) 100%);
}
.offre-ic { width: 54px; height: 54px; margin: 0 auto 12px; }
.offre-chiffre {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 7vw, 3.9rem);
  color: var(--soleil);
  line-height: 1.05;
}
.offre-label { display: block; font-size: 1.02rem; color: var(--on-nuit); margin-top: 6px; }

.offre-liste {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  text-align: left;
  border-top: 1px solid var(--line-creme);
}
.offre-liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-nuit);
  padding: 13px 0;
  border-bottom: 1px solid var(--line-creme);
}
.offre-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.offre-liste img { width: 22px; height: 22px; flex: 0 0 auto; }

/* --- 13. Questions fréquentes ------------------------------------------ */
.faq { max-width: 820px; margin: 44px auto 0; }
.faq details {
  background: var(--white);
  border: 1px solid var(--tint-nuit);
  border-left: 4px solid transparent;
  border-radius: var(--r);
  margin-bottom: 14px;
  box-shadow: var(--sh-soft);
  transition: border-color var(--transition);
}
.faq details:hover,
.faq details[open] { border-left-color: var(--soleil); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  font-family: var(--f-display);
  font-size: clamp(1.18rem, 2.3vw, 1.38rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--corail-deep);
  border-bottom: 2px solid var(--corail-deep);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-rep {
  padding: 4px 26px 24px;
  color: var(--nuit-soft);
  font-size: 1.05rem;
  line-height: 1.66;
}
.faq details[open] .faq-rep { animation: faq-ouvre 360ms ease; }

/* --- 14. Formulaire en étapes ------------------------------------------- */
.form-carte {
  background: var(--white);
  border: 1px solid var(--tint-nuit);
  border-radius: var(--r-lg);
  padding: 38px 38px 40px;
  box-shadow: var(--sh-lift);
  max-width: 720px;
  margin: 40px auto 0;
  scroll-margin-top: calc(var(--head-h) + 18px);
}

.etapes {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--tint-nuit);
}
.etapes-pas {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--nuit-soft);
  opacity: .55;
  transition: opacity var(--transition);
}
.etapes-pas span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: .95rem;
  background: var(--creme-2);
  color: var(--nuit);
  transition: background var(--transition), color var(--transition);
}
.etapes-pas.active,
.etapes-pas.faite { opacity: 1; }
.etapes-pas.active span { background: var(--corail); color: var(--white); }
.etapes-pas.faite span { background: var(--soleil); color: var(--nuit); }

.etape { border: 0; margin: 0; padding: 0; min-width: 0; }
.js .etape { display: none; }
.js .etape.active { display: block; animation: etape-entre 320ms ease; }
.etape + .etape { margin-top: 34px; }
.js .etape + .etape { margin-top: 0; }

.etape-titre {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  line-height: 1.25;
  color: var(--nuit);
  padding: 0;
  margin: 0 0 16px;
}

.champ {
  padding: 12px 0;
  border-bottom: 1px solid var(--tint-nuit);
}
.champ:last-of-type { border-bottom: 0; }

.champ-libelle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--nuit);
  margin: 0 0 4px;
  line-height: 1.5;
}
.champ-libelle img { width: 20px; height: 20px; flex: 0 0 auto; }

.champ-erreur {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  color: var(--corail-deep);
  line-height: 1.55;
}
.champ-erreur:not(:empty) { margin-top: 8px; }

/* Libellé réservé aux lecteurs d'écran : le titre du champ est dans le placeholder. */
.lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saisie { position: relative; }
.saisie img {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}
.saisie--zone img { top: 17px; transform: none; }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--nuit);
  background: var(--white);
  border: 1.5px solid var(--creme-3);
  border-radius: var(--r-sm);
  padding: 13px 15px 13px 46px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input::placeholder,
.champ textarea::placeholder { color: var(--nuit-soft); opacity: .8; }
.champ textarea { min-height: 116px; resize: vertical; }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--corail);
  box-shadow: 0 0 0 4px var(--tint-corail);
}

.choix { display: grid; gap: 10px; margin-top: 10px; }
.choix-carte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--nuit);
  background: var(--white);
  border: 1.5px solid var(--creme-3);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 0;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.choix-carte input { position: absolute; opacity: 0; width: 1px; height: 1px; font-size: 16px; }
.choix-carte img { width: 22px; height: 22px; flex: 0 0 auto; }
.choix-carte small { display: block; font-weight: 400; font-size: .92rem; color: var(--nuit-soft); }
.choix-carte:has(input:checked) { border-color: var(--corail); box-shadow: 0 0 0 4px var(--tint-corail); }
.choix-carte:has(input:focus-visible) { outline: 2px solid var(--corail); outline-offset: 2px; }

.case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--nuit-soft);
}
.case input[type="checkbox"] {
  width: 21px;
  height: 21px;
  margin: 3px 0 0;
  font-size: 16px;
  accent-color: var(--corail);
  flex: 0 0 auto;
}
.case label { display: block; font-weight: 400; color: var(--nuit-soft); margin: 0; }

.etape-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.form-pied {
  margin-top: 20px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--nuit-soft);
}

.merci {
  background: var(--tint-soleil);
  border: 1px solid var(--soleil);
  border-radius: var(--r);
  padding: 32px 28px;
  text-align: center;
}
.merci img { width: 52px; height: 52px; margin: 0 auto 14px; }
.merci h3 { margin-bottom: 10px; }
.merci p { color: var(--nuit-soft); margin: 0 0 12px; }
.merci p:last-child { margin: 0; }
.merci[hidden] { display: none; }

/* --- 15. Pied de page ---------------------------------------------------- */
.pied {
  position: relative;
  z-index: 1;
  color: var(--on-nuit);
  padding: 76px 0 34px;
  font-size: .97rem;
  line-height: 1.68;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(246, 185, 59, .17) 0%, rgba(246, 185, 59, .07) 40%, rgba(246, 185, 59, .02) 70%, transparent 92%),
    radial-gradient(75% 90% at 0% 100%, rgba(239, 111, 90, .20) 0%, rgba(239, 111, 90, .08) 40%, rgba(239, 111, 90, .02) 70%, transparent 92%),
    linear-gradient(170deg, var(--nuit) 0%, #0E1330 100%);
}

.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
}
.pied-marque p { margin-bottom: 22px; }

.pied-titre {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soleil);
  margin: 8px 0 16px;
}

.pied-liste { list-style: none; margin: 0; padding: 0; }
.pied-liste li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-creme);
}
.pied-liste li:first-child { padding-top: 0; }
.pied-liste li:last-child { border-bottom: 0; }
.pied-liste a { color: var(--on-nuit); text-decoration: none; transition: color var(--transition); }
.pied-liste a:hover { color: var(--soleil); }
.pied-liste--ic li { display: flex; align-items: center; gap: 10px; }
.pied-liste--ic img { width: 18px; height: 18px; flex: 0 0 auto; }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line-creme);
  font-size: .86rem;
  color: var(--on-nuit-soft);
}
.pied-bas p { margin: 0; }
.pied-bas .fictif {
  color: var(--soleil);
  border: 1px dashed rgba(246, 185, 59, .55);
  border-radius: var(--r-pill);
  padding: 3px 12px;
}

/* --- 16. Apparition ------------------------------------------------------ */
.apparait { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1), translate var(--transition); }
.apparait.vu { opacity: 1; transform: none; }

@keyframes etape-entre {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes faq-ouvre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- 17. Coupes conditionnelles ----------------------------------------- */
.br-mobile { display: none; }
.br-desktop { display: inline; }

/* ==========================================================================
   18. Media queries (regroupées, un bloc par palier)
   ========================================================================== */

@media (max-width: 1024px) {
  .nav-links {
    flex: initial !important;
    justify-content: initial !important;
    position: absolute;
    top: var(--head-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--tint-nuit);
    box-shadow: var(--sh-lift);
    padding: 8px 24px 20px;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--transition);
  }
  .nav-links.ouvert { clip-path: inset(0 0 0 0); }
  .nav-links li { border-bottom: 1px solid var(--tint-nuit); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; padding: 15px 2px; font-size: 1.05rem; }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-mobile-only { display: list-item !important; padding-top: 14px; }
  .nav-mobile-only .nav-cta { display: block; text-align: center; }
  .nav-desktop-only { display: none !important; }
  .burger { display: block; }

  /* Hero : le texte d'abord sur la nuit, l'illustration en grand dessous, fondue en haut. */
  .hero { display: block; min-height: 0; }
  .hero::before { display: none; }
  .hero-inner { padding-top: 54px; padding-bottom: 0; }
  .hero-texte { max-width: 640px; }
  .hero-visuel {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 60% 50%;
    margin-top: -20px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%);
  }

  .duo,
  .duo--portrait { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .duo--flip .duo-media { order: 0; }
  .duo--portrait .duo-media { max-width: 460px; }
  .essai { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  .section { padding: 66px 0; }
  .wrap { padding: 0 20px; }
  .nav { padding: 0 12px 0 16px; }
  .pastille-fictif { display: none; }
  .kicker { letter-spacing: .1em; padding-right: 14px; }
  .logo { font-size: 1.26rem; gap: 9px; }
  .logo img { width: 40px; height: 40px; }
  .logo--pied { font-size: 1.45rem; }
  .logo--pied img { width: 52px; height: 52px; }
  .hero-inner { padding-top: 42px; }
  .hero-visuel { aspect-ratio: 1 / 1; object-position: 58% 50%; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .deroule li { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .deroule-h { font-size: 1.18rem; }
  .form-carte { padding: 26px 18px 30px; border-radius: var(--r); }
  .etapes-pas { flex-direction: column; gap: 6px; font-size: .85rem; text-align: center; }
  .etape-actions .btn { flex: 1 1 auto; }
  .btn { padding: 15px 22px; }
  .offre { padding: 34px 20px 26px; }
  .faq summary { padding: 18px 18px; }
  .faq-rep { padding: 2px 18px 20px; }
  .pro-card { padding: 4px 18px; }
  .pied { padding-top: 58px; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .pied-bas { flex-direction: column; align-items: flex-start; }
  .merci { padding: 26px 16px; }
  .br-mobile { display: inline; }
  .br-desktop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .apparait { opacity: 1 !important; transform: none !important; }
}