/* ==========================================================================
   OCD Live — site public : accueil, tunnel de réservation, confirmation.
   S'appuie sur le système de design commun (ocd.css) : ne redéfinit pas ses
   composants, ajoute seulement ce qui est propre à ces pages.
   Mobile d'abord : tout fonctionne dès 360 px de large.
   ========================================================================== */

/* ---------- Éléments partagés ---------- */
.section-entete { max-width: 720px; margin-bottom: 32px; }
.section-entete .lead { margin-bottom: 0; }

.pastille-icone {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--orange-50); color: var(--orange-700);
}
.pastille-icone svg { width: 24px; height: 24px; }

.liste-coches { list-style: none; padding: 0; margin: 0 0 20px; }
.liste-coches li { position: relative; padding-left: 28px; }
.liste-coches li + li { margin-top: 8px; }
.liste-coches li::before,
.choix-liste-ligne::before {
  content: ""; position: absolute; left: 0; top: 0.28em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b84d00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ==========================================================================
   ACCUEIL
   ========================================================================== */

/* ---------- Hero : le studio en live, devant l'Afrique lumineuse ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 44px 0 64px;
  background:
    radial-gradient(60% 70% at 78% 45%, rgba(255, 138, 30, 0.16), transparent 70%),
    radial-gradient(40% 50% at 10% 0%, rgba(238, 104, 6, 0.10), transparent 70%),
    #0b0806;
}
@media (min-width: 960px) { .hero { padding: 72px 0 96px; } }
.hero::after { /* fondu vers la section suivante */
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 120, 0.35), transparent);
}
.hero-grille { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px; } }

.hero-surtitre {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 22px; padding: 5px 14px 5px 5px;
  border: 1px solid rgba(255, 213, 143, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.04);
  color: #f3dcc0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
}
.hero-surtitre b { color: #fff; font-weight: 800; }
/* Avatar House of Challenge avec l'anneau « en direct » de TikTok */
.hero-surtitre-avatar { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; padding: 2px; background: #ff2d55; }
.hero-surtitre-avatar img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #0b0806; background: #fff; }
.hero-surtitre-avatar::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #ff2d55;
  animation: onde 1.8s ease-out infinite;
}
.hero-certifie { flex-shrink: 0; width: 15px; height: 15px; margin-left: -4px; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 22px; }
.hero-dehors {
  background: linear-gradient(92deg, #ee6806 0%, #ff8f2e 45%, #ffc977 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(238, 104, 6, 0.35));
}
.hero .lead { max-width: 52ch; color: #d9d2cb; }
.hero-actions { margin: 30px 0 38px; }
.hero-cta { box-shadow: 0 10px 40px rgba(238, 104, 6, 0.45); }
.hero-cta svg { transition: transform .15s ease; }
.hero-cta:hover svg { transform: translateX(3px); }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }

.hero-chiffres { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; max-width: 560px; }
@media (min-width: 560px) { .hero-chiffres { grid-template-columns: repeat(3, auto); gap: 0; justify-content: start; } }
.hero-chiffres > div { padding: 0; }
@media (min-width: 560px) {
  .hero-chiffres > div { padding: 2px 22px; border-left: 1px solid rgba(255, 213, 143, 0.2); }
  .hero-chiffres > div:first-child { padding-left: 0; border-left: 0; }
}
.hero-chiffres dt { color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
.hero-chiffres dd { margin: 2px 0 0; color: #a79e95; font-size: 0.85rem; }

/* Scène (décor) */
.hero-scene { position: relative; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 580 / 640; }
@media (max-width: 959px) { .hero-scene { max-width: 460px; } }
.hero-lueur {
  position: absolute; left: 6%; top: 8%; width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 70, 0.28), transparent);
  filter: blur(20px); animation: respire 6s ease-in-out infinite;
}
.hero-afrique { position: absolute; left: -10%; top: 2%; width: 92%; height: auto; overflow: visible; }
.afrique-halo { animation: respire 6s ease-in-out infinite; transform-origin: center; }
.afrique-lome .lome-point { fill: #ee6806; stroke: #fff2df; stroke-width: 3; }
.afrique-lome .lome-onde { fill: none; stroke: #ff9d2e; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: onde-svg 2.2s ease-out infinite; }

/* iPhone : toutes les tailles internes en cqw → le téléphone se met à l'échelle d'un bloc. */
.iphone {
  position: absolute; right: 3%; top: 50%; z-index: 2; width: 51%; aspect-ratio: 9 / 19.4;
  transform: translateY(-50%) rotate(2.5deg);
  container-type: inline-size;
  padding: 3.6%; border-radius: 15% / 7%;
  background: linear-gradient(140deg, #4a4a4e 0%, #1a1a1c 22%, #0d0d0f 60%, #3a3a3e 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 5px #0a0a0b,
    0 60px 110px -30px rgba(0, 0, 0, 0.9),
    0 0 90px -10px rgba(255, 140, 30, 0.35);
}
@media (max-width: 959px) { .iphone { width: 54%; right: 4%; } }
.iphone-bouton { position: absolute; width: 1.2%; border-radius: 2px; background: linear-gradient(90deg, #2a2a2d, #4b4b50); }
.iphone-bouton-action { left: -1%; top: 17%; height: 4%; }
.iphone-bouton-volume { left: -1%; top: 24%; height: 7.5%; }
.iphone-bouton-volume-2 { left: -1%; top: 33%; height: 7.5%; }
.iphone-bouton-veille { right: -1%; top: 26%; height: 11%; background: linear-gradient(270deg, #2a2a2d, #4b4b50); }
.iphone-ecran {
  position: relative; height: 100%; overflow: hidden; border-radius: 12% / 5.6%; background: #000;
  color: #fff; font-size: 3.7cqw; line-height: 1.3;
}
.iphone-ilot { position: absolute; top: 2.4%; left: 50%; z-index: 5; width: 31%; height: 3.3%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.tt-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  animation: tournage 18s ease-in-out infinite alternate;
}
.tt-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 32%, rgba(0, 0, 0, 0) 52%);
}
.tt-statut {
  position: absolute; top: 2.6%; left: 9%; right: 7%; z-index: 4; display: flex; justify-content: space-between; align-items: center;
  font-size: 4.2cqw; font-weight: 700; letter-spacing: 0.01em;
}
.tt-statut-icones { display: flex; align-items: center; gap: 1.6cqw; }
.tt-statut-icones svg { height: 3.6cqw; width: auto; fill: currentColor; }

.tt-entete { position: absolute; top: 9.5%; left: 3.5%; right: 3.5%; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.tt-hote { display: flex; align-items: center; gap: 2cqw; min-width: 0; padding: 1cqw 1.2cqw 1cqw 1cqw; border-radius: 999px; background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(6px); }
.tt-avatar { flex-shrink: 0; width: 10cqw; height: 10cqw; border-radius: 50%; padding: 1cqw; background: #fff; box-shadow: 0 0 0 0.7cqw #ff2d55; display: grid; place-items: center; }
.tt-avatar img { width: 100%; height: auto; }
.tt-hote-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tt-hote-texte b { font-size: 3.6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30cqw; }
.tt-hote-texte small { display: flex; align-items: center; gap: 0.8cqw; font-size: 2.9cqw; opacity: 0.85; }
.tt-hote-texte small svg { width: 2.8cqw; height: 2.8cqw; fill: #ff2d55; }
.tt-avatar { overflow: hidden; padding: 0; }
.tt-avatar img { border-radius: 50%; }
.tt-coeur { /* bouton cœur (fan club) à côté du nom, comme dans l'appli */
  position: relative; flex-shrink: 0; display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw;
  border-radius: 50%; background: rgba(255, 255, 255, 0.22);
}
.tt-coeur svg { width: 5cqw; height: 5cqw; fill: rgba(255, 255, 255, 0.85); }
.tt-coeur i { position: absolute; bottom: 1.4cqw; font-style: normal; font-size: 2.2cqw; font-weight: 800; color: #555; }
.tt-rang-1 { box-shadow: 0 0 0 0.6cqw #f6c343; }
.tt-rang-2 { box-shadow: 0 0 0 0.6cqw #c9d1d9; }
.tt-diamant { color: #ffd34d; font-size: 3cqw; }
.tt-mini-logo { background: #fff; overflow: hidden; padding: 0; }
.tt-mini-logo img { width: 100%; height: 100%; border-radius: 50%; }
.tt-hote-badge { display: inline-block; margin-left: 1cqw; padding: 0.2cqw 1.6cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.85); color: #161616; font-style: normal; font-size: 2.5cqw; font-weight: 800; text-shadow: none; vertical-align: 0.2cqw; }
.tt-public { display: flex; align-items: center; flex-shrink: 0; }
.tt-mini {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 7cqw; height: 7cqw; border-radius: 50%;
  background: var(--c, #555); color: #fff; font-size: 3.2cqw; font-weight: 800; box-shadow: 0 0 0 0.5cqw rgba(0, 0, 0, 0.35);
}
.tt-public .tt-mini + .tt-mini { margin-left: -2cqw; }
.tt-compte { margin-left: 1.6cqw; padding: 1cqw 2.2cqw; border-radius: 999px; background: rgba(0, 0, 0, 0.32); font-size: 3.2cqw; font-weight: 700; }
.tt-fermer { margin-left: 2cqw; font-size: 4.2cqw; opacity: 0.9; }
.tt-puces { position: absolute; top: 17%; left: 3.5%; z-index: 3; display: flex; gap: 1.6cqw; }
.tt-puce { display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2.4cqw; border-radius: 999px; background: rgba(0, 0, 0, 0.32); font-size: 2.9cqw; font-weight: 700; }
.tt-puce svg { width: 3.2cqw; height: 3.2cqw; }

.tt-bas { position: absolute; left: 3.5%; right: 3.5%; bottom: 3.2%; z-index: 3; display: flex; flex-direction: column; gap: 2.6cqw; }
.tt-commentaires { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2cqw; max-width: 78%; }
.tt-commentaires li {
  display: flex; align-items: flex-start; gap: 2cqw; font-size: 3.5cqw; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0; animation: commentaire 0.6s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) forwards;
}
.tt-commentaires li > span:last-child { display: flex; flex-direction: column; }
.tt-commentaires b { font-size: 3cqw; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.tt-arrivee { align-items: center !important; padding: 1cqw 2.6cqw 1cqw 1cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.14); width: fit-content; }
.tt-arrivee > span:last-child { flex-direction: row !important; gap: 1.2cqw; }
.tt-arrivee b { color: #fff; }
.tt-main { display: inline-grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-size: 3.4cqw; }
.tt-produit {
  display: flex; align-items: center; gap: 2.6cqw; padding: 2.2cqw; border-radius: 3.6cqw; background: #fff; color: #161616;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.35);
  opacity: 0; animation: commentaire 0.7s cubic-bezier(.2, .8, .2, 1) 1.3s forwards;
}
.tt-produit-image { position: relative; flex-shrink: 0; width: 12cqw; height: 12cqw; border-radius: 2.4cqw; background: linear-gradient(150deg, #fff1dd, #f6c98e); overflow: hidden; }
.tt-produit-image span { /* pot de beurre de karité */
  position: absolute; left: 22%; right: 22%; bottom: 14%; height: 52%; border-radius: 1.4cqw 1.4cqw 2cqw 2cqw;
  background: linear-gradient(180deg, #fffaf2, #f3e2c4);
  box-shadow: 0 -2.2cqw 0 -0.6cqw #ee6806, inset 0 -1cqw 0 rgba(0, 0, 0, 0.06);
}
.tt-produit-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tt-produit-texte small { font-size: 2.6cqw; color: #8a8a8a; font-weight: 600; }
.tt-produit-texte b { font-size: 3.6cqw; }
.tt-produit-texte em { font-style: normal; font-size: 3.4cqw; font-weight: 800; color: #d35a00; }
.tt-acheter { flex-shrink: 0; padding: 2cqw 3.6cqw; border-radius: 999px; background: linear-gradient(90deg, #ff2d55, #ff5e3a); color: #fff; font-size: 3.2cqw; font-weight: 800; }
.tt-barre { display: flex; align-items: center; gap: 2cqw; }
.tt-saisie { flex: 1; min-width: 0; padding: 2.4cqw 3.6cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.75); font-size: 3.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-rond { flex-shrink: 0; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.tt-rond svg { width: 5.2cqw; height: 5.2cqw; fill: #fff; }
.tt-rond-cadeau { background: linear-gradient(135deg, #ff2d55, #ff7a45); }
.tt-rond-emoji { font-size: 4.6cqw; line-height: 1; }
.tt-saisie { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.tt-smiley { flex-shrink: 0; font-size: 4.6cqw; line-height: 1; color: rgba(255, 255, 255, 0.85); }

.tt-coeurs { position: absolute; right: 5%; bottom: 17%; z-index: 4; width: 12cqw; height: 55%; pointer-events: none; }
.tt-coeurs svg { position: absolute; left: 0; bottom: 0; width: 8cqw; height: 8cqw; opacity: 0; fill: #ff2d55; animation: coeur-monte 4.2s ease-in infinite; }
.tt-coeurs svg:nth-child(2) { fill: #ffb547; left: 2cqw; animation-delay: .7s; }
.tt-coeurs svg:nth-child(3) { fill: #fff; animation-delay: 1.4s; }
.tt-coeurs svg:nth-child(4) { fill: #ff7a45; left: 3cqw; animation-delay: 2.1s; }
.tt-coeurs svg:nth-child(5) { fill: #ff5c8a; animation-delay: 2.8s; }
.tt-coeurs svg:nth-child(6) { fill: #ffd58f; left: 1cqw; animation-delay: 3.5s; }

/* Cartes flottantes */
.hero-flottant {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
  border-radius: 16px; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.hero-flottant b { display: block; font-size: 0.85rem; }
.hero-flottant small { display: block; font-size: 0.75rem; }
.hero-lome { left: 13%; top: 46.5%; background: rgba(20, 14, 9, 0.72); border: 1px solid rgba(255, 213, 143, 0.25); color: #fff; backdrop-filter: blur(10px); }
.hero-lome::before { /* trait qui relie la carte au point « Lomé » de l'Afrique */
  content: ""; position: absolute; left: 16px; bottom: 100%; width: 2px; height: 22px;
  background: linear-gradient(to top, rgba(255, 213, 143, 0.7), rgba(255, 213, 143, 0));
}
.hero-lome small { color: #d8c3a5; }
.hero-lome-point { width: 10px; height: 10px; border-radius: 50%; background: #ee6806; box-shadow: 0 0 0 4px rgba(238, 104, 6, 0.25), 0 0 14px #ff9d2e; }
.hero-resa { left: 8%; bottom: 7%; background: #fff; color: var(--ink); animation: flotte 5s ease-in-out infinite; }
.hero-resa small { color: var(--muted); }
.hero-resa-icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--success-bg); color: var(--success); }
.hero-resa-icone svg { width: 18px; height: 18px; }
@media (max-width: 959px) { .hero-resa { left: -4%; bottom: 9%; } }
@media (max-width: 559px) {
  .hero-flottant { padding: 7px 11px 7px 9px; gap: 8px; border-radius: 12px; }
  .hero-flottant b { font-size: 0.72rem; }
  .hero-flottant small { font-size: 0.66rem; }
  .hero-resa { left: -2%; top: 3%; bottom: auto; max-width: 44%; white-space: normal; }
  .hero-resa-icone { width: 24px; height: 24px; border-radius: 8px; }
  .hero-lome::before { left: 13px; height: 16px; }
}

@keyframes onde { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2); opacity: 0; } }
@keyframes onde-svg { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes respire { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes tournage { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(-1.5%); } }
@keyframes commentaire { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes coeur-monte {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-14px, -260%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-surtitre-avatar::after, .afrique-lome .lome-onde, .afrique-halo, .hero-lueur, .tt-video, .hero-resa, .tt-coeurs svg { animation: none; }
  .tt-commentaires li, .tt-produit { animation: none; opacity: 1; }
  .tt-coeurs svg:first-child { opacity: 1; }
}

/* ---------- Modes ---------- */
.mode-carte { display: flex; flex-direction: column; padding: 26px; }
.mode-carte .pastille-icone { margin-bottom: 16px; }
.mode-carte h3 { margin-bottom: 2px; }
.mode-sous-titre { color: var(--orange-700); font-weight: 700; margin-bottom: 12px; }
.mode-carte .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 479px) { .mode-carte .btn { align-self: stretch; } }

/* ---------- Prestations ---------- */
/* 5 prestations, jamais une carte seule sur sa ligne : 1 colonne, 2 (la 5e prend toute la ligne),
   3 (3 + 2), puis les 5 sur une seule ligne. */
.prestations-grille {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) {
  .prestations-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prestations-grille > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
  .prestations-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prestations-grille > li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1100px) { .prestations-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.prestation .pastille-icone { margin-bottom: 14px; }
.prestation h3 { font-size: 1.05rem; margin-bottom: 6px; }
.prestation p { margin: 0; font-size: 0.925rem; }

/* ---------- Forfaits ---------- */
.forfaits-grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.forfait { position: relative; display: flex; flex-direction: column; padding: 26px; }
.forfait h3 { margin-bottom: 4px; }
.forfait-populaire { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange), var(--shadow); }
.forfait-populaire h3 { padding-right: 96px; }
.forfait-badge { position: absolute; top: 24px; right: 22px; }
.forfait-duree { margin-bottom: 6px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.forfait-prix { margin-bottom: 12px; color: var(--ink); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.forfait-prix-demande { color: var(--orange-700); font-size: 1.25rem; }
.forfait .liste-coches { font-size: 0.925rem; }
.forfait-action { margin-top: auto; }

/* ---------- Comment ça marche ---------- */
.etapes-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.etapes-liste h3 { font-size: 1.05rem; margin-bottom: 6px; }
.etapes-liste p { margin: 0; font-size: 0.925rem; }
.etape-numero {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 50%; background: var(--orange); color: #160b03; font-weight: 800;
}

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 0.15s ease; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  position: relative; min-height: 44px; padding: 16px 52px 16px 18px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px;
  border-right: 2.5px solid var(--orange-700); border-bottom: 2.5px solid var(--orange-700);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:focus-visible { border-radius: var(--radius); }
.faq-reponse { padding: 0 18px 4px; color: var(--ink-2); }

/* ---------- Appel à l'action final ---------- */
.cta-final { padding: 48px 0; background: var(--orange); color: #160b03; }
.cta-final h2 { color: #160b03; margin-bottom: 6px; }
.cta-final p { margin: 0; font-weight: 500; }
.cta-final-contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
@media (max-width: 479px) { .cta-final .btn { width: 100%; } }

/* ==========================================================================
   TUNNEL DE RÉSERVATION
   ========================================================================== */
/* Dans le tunnel, le bouton orange « Réserver » de l'en-tête (lien vers /reserver/, qui repart à zéro)
   se confondrait avec l'action finale : on le retire. */
.page-reserver .site-header .btn-primary { display: none; }
.tunnel-section { padding-top: 32px; }
.tunnel-conteneur { max-width: 940px; }
.tunnel-entete { margin-bottom: 20px; }
.tunnel-entete h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin-bottom: 6px; }
.tunnel-entete p { margin: 0; }

/* ---------- Progression ---------- */
.tunnel-progression { margin-bottom: 24px; }
.progression-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.progression-bouton {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 4px 0;
  border: 0; background: none; color: var(--muted); font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.progression-bouton:disabled { cursor: default; }
.progression-bouton:not(:disabled):hover .progression-numero { border-color: var(--ink); }
.progression-numero {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1.5px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink-2);
  font-size: 0.85rem; font-weight: 800; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.est-faite .progression-numero { border-color: var(--ink); background: var(--ink); color: #fff; }
.est-active .progression-numero { border-color: var(--orange); background: var(--orange); color: #160b03; box-shadow: 0 0 0 4px var(--orange-100); }
.est-active .progression-bouton, .est-faite .progression-bouton { color: var(--ink); }
.progression-libelle { text-align: center; line-height: 1.25; }
@media (max-width: 719px) {
  .progression-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.progression-barre { height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.progression-barre span { display: block; height: 100%; border-radius: inherit; background: var(--orange); transition: width 0.3s ease; }

/* ---------- Étapes ---------- */
.etape-titre { font-size: clamp(1.3rem, 3.4vw, 1.75rem); margin-bottom: 8px; }
.etape-titre:focus { outline: none; box-shadow: none; }
.etape-compteur { display: block; margin-bottom: 6px; color: var(--orange-700); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.etape > .muted { margin-bottom: 18px; }
.etape > .etape-titre + .groupe-choix { margin-top: 18px; }
.groupe-choix { min-width: 0; margin: 0; padding: 0; border: 0; }
.groupe-choix .field-error { margin-top: 12px; }
.erreurs-formulaire p { margin: 0; }
.erreurs-formulaire p + p { margin-top: 6px; }
.erreurs-formulaire:focus { outline: none; box-shadow: var(--focus); }

/* Pot de miel : hors écran (et non display:none, que certains robots repèrent). */
.champ-piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Cartes de choix ---------- */
.choix-carte { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 52px 18px 18px; }
.choix-carte .pastille-icone { width: 44px; height: 44px; margin-bottom: 8px; }
.choix-titre { color: var(--ink); font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.choix-sous-titre { color: var(--orange-700); font-size: 0.92rem; font-weight: 700; }
.choix-texte { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.choix-detail { margin-top: 4px; color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }
/* Sans :has() (voir .choice dans ocd.css) : la case native, visible, prend la place de l'indicateur. */
.choix-carte input { position: absolute; top: 20px; right: 20px; margin: 0; }
.choix-indicateur {
  display: none; position: absolute; top: 18px; right: 18px; width: 22px; height: 22px;
  border: 2px solid var(--line-strong); background: #fff; transition: all 0.15s ease;
}
@supports selector(:has(a)) { .choix-indicateur { display: block; } }
.choix-indicateur-radio { border-radius: 50%; }
.choix-indicateur-case { border-radius: 6px; }
.choice:has(input:checked) .choix-indicateur-radio { border-color: var(--orange); box-shadow: inset 0 0 0 5px var(--orange); }
.choice:has(input:checked) .choix-indicateur-case {
  border-color: var(--orange);
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160b03' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.choice:has(input:checked) .pastille-icone { background: var(--orange); color: #160b03; }

.choix-compact { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 2px; }
.choix-compact .pastille-icone { grid-row: span 2; margin: 0; }

.choix-forfait-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.choix-forfait-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 6px; }
.choix-forfait-prix { color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.choix-liste { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.choix-liste-ligne { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.choix-liste-ligne::before { top: 0.1em; }

/* ---------- Calendrier et horaires ---------- */
.planning { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 820px) { .planning { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.calendrier, .horaires { padding: 14px; }
@media (min-width: 480px) { .calendrier, .horaires { padding: 20px; } }
.calendrier-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.calendrier-titre { margin: 0; font-size: 1.1rem; text-align: center; }
.calendrier-nav {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px;
  border: 1.5px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer;
}
.calendrier-nav:not([aria-disabled="true"]):hover { border-color: var(--ink); }
.calendrier-nav[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.calendrier-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.calendrier-table th { padding: 4px 0; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-align: center; }
.calendrier-table td { padding: 0; text-align: center; }
.cal-jour {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 100%; min-height: 46px; padding: 2px 0; border: 1.5px solid transparent; border-radius: 10px;
  background: transparent; color: var(--ink); font-size: 0.95rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.cal-jour:disabled { cursor: not-allowed; }
.cal-dispo { border-color: var(--orange-100); background: var(--orange-50); }
.cal-dispo:hover { border-color: var(--orange); }
.cal-jour[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: #160b03; }
.cal-complet { border-color: #f5c9cb; background: #fff; color: var(--muted); }
.cal-ferme { background: #f6f6f6; color: #a3a3a3; font-weight: 500; }
.cal-mention { font-size: 0.6rem; font-weight: 700; line-height: 1; }
.cal-complet .cal-mention { color: var(--danger); }
.calendrier-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.8rem; }
.calendrier-legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.legende-dispo { border: 1.5px solid var(--orange); background: var(--orange-50); }
.legende-complet { border: 1.5px solid var(--danger); background: #fff; }
.legende-ferme { border: 1.5px solid #d0d0d0; background: #f0f0f0; }
.calendrier-statut { min-height: 1.4em; margin: 10px 0 0; color: var(--muted); font-size: 0.875rem; }

.horaires-titre { margin-bottom: 4px; font-size: 1.05rem; }
.fuseau { margin-bottom: 12px; color: var(--muted); font-size: 0.85rem; }
.fuseau strong { color: var(--ink-2); }
.fuseau-local { display: block; }
.horaires-statut { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }
.horaires-grille { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.creneau {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 48px; padding: 6px 8px; border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: #fff; color: var(--ink); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.creneau:hover { border-color: var(--orange); }
.creneau[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: #160b03; }
.creneau-local { margin-top: 2px; color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.creneau[aria-pressed="true"] .creneau-local { color: #3a1d07; }
.creneau-choisi {
  margin: 16px 0 0; padding: 12px 14px; border: 1px solid #c4e6d0; border-radius: var(--radius-sm);
  background: var(--success-bg); color: #0f5c2b; font-weight: 600;
}
#etape-4 > .field-error { margin-top: 12px; }

.chargement { display: inline-flex; align-items: center; gap: 8px; }
.chargement::before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--line-strong); border-top-color: var(--orange);
  border-radius: 50%; animation: tourne 0.8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargement::before { animation: none; } }

/* ---------- Vos informations ---------- */
.infos { padding: 18px; }
@media (min-width: 480px) { .infos { padding: 24px; } }
.infos .field:last-child { margin-bottom: 0; }
.facultatif { color: var(--muted); font-size: 0.85rem; font-weight: 500; }

/* ---------- Récapitulatif ---------- */
.recap-carte { padding: 18px; }
@media (min-width: 480px) { .recap-carte { padding: 24px; } }
.recap { margin: 0; }
.recap-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.recap-ligne:first-child { padding-top: 0; }
.recap-ligne:last-child { padding-bottom: 0; border-bottom: 0; }
.recap dt { grid-column: 1; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.recap dd { grid-column: 1; margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.recap dd.recap-action { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.recap-detail { display: block; color: var(--muted); font-size: 0.9rem; font-weight: 400; }
.recap-liste { margin: 0; padding-left: 18px; }
@media (min-width: 640px) {
  .recap-ligne { grid-template-columns: 170px minmax(0, 1fr) auto; }
  .recap dt { padding-top: 3px; }
  .recap dd { grid-column: 2; }
  .recap dd.recap-action { grid-column: 3; grid-row: 1; }
}
.recap-statique .recap-ligne { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .recap-statique .recap-ligne { grid-template-columns: 170px minmax(0, 1fr); } }
.recap-note { margin-top: 16px; }

/* ---------- Barre d'actions (collante en bas sur mobile) ---------- */
.tunnel-actions {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  margin: 28px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tunnel-actions #btn-continuer, .tunnel-actions #btn-valider { margin-left: auto; }
.tunnel-resume {
  flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 0.85rem;
  text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
#btn-valider { white-space: normal; text-align: center; }
@media (max-width: 559px) {
  .tunnel-resume { display: none; }
  .tunnel-actions .btn { flex: 1 1 auto; padding-inline: 14px; }
  .tunnel-actions #btn-retour { flex: 0 0 auto; }
}
@media (min-width: 768px) {
  .tunnel-actions { position: static; margin: 32px 0 0; padding: 20px 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.tunnel.est-en-envoi { cursor: progress; }

/* ==========================================================================
   CONFIRMATION
   ========================================================================== */
.confirmation { background: linear-gradient(180deg, var(--bg-soft) 0, #fff 360px); }
.confirmation-pile { --stack-gap: 20px; }
/* Adresse e-mail longue : elle se coupe au lieu d'élargir la page sur mobile. */
.confirmation .alert strong { overflow-wrap: anywhere; word-break: break-word; }
.confirmation-entete { text-align: center; }
.confirmation-entete .eyebrow { display: block; }
.confirmation-entete h1 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
.confirmation-entete .lead { margin-bottom: 0; }
.confirmation-icone {
  display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--success-bg); color: var(--success); box-shadow: 0 0 0 8px rgba(23, 128, 61, 0.08);
}
.reference-carte { border: 2px dashed var(--orange); background: var(--orange-50); text-align: center; }
.reference-libelle { margin: 0 0 4px; color: var(--orange-700); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.reference {
  margin: 0 0 12px; color: var(--ink); font-size: clamp(1.9rem, 8vw, 2.8rem); font-weight: 800; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all;
}
.copie-statut { min-height: 1.4em; margin: 8px 0 4px; color: var(--success); font-size: 0.875rem; font-weight: 600; }
.reference-carte .small { margin: 0; }
.confirmation-sous-titre { margin-bottom: 14px; font-size: 1.15rem; }
.lieu-carte p:last-child { margin-bottom: 0; }
.prochaines-etapes { margin: 0; padding-left: 20px; }
.prochaines-etapes li + li { margin-top: 8px; }
.heure-locale { display: block; color: var(--muted); font-size: 0.9rem; }
.confirmation-actions { justify-content: center; }
@media (max-width: 559px) { .confirmation-actions .btn { width: 100%; } }