/* H&C — pages Merci (/merci/{contexte}/ et /confirmation-reservation/). Se charge après fiche.css et apropos.css
   (`.btn--paper`, `.ex`). 2026-10-15 — l'utilisateur a choisi la piste 1 « Le bravo au projecteur » parmi les six
   (planche : captures/merci/planche-merci.jpg).

   Une seule section `.mc` : nuit + projecteur sur rail (penché vers le centre). Dans l'ordre : le rond jaune `.mc__ok`
   (la coche se dessine), le titre `.mc__h` (`.stitle`), une phrase, les trois cases `.mc__facts` (quand, par où, en
   attendant), le bouton jaune de l'action suivante et WhatsApp `.mc__wa`, une ligne facultative `.mc__alt`
   (« le PDF ne s'est pas ouvert », replays), puis, pour la maquette seulement, la note `.mc__ex` et la rangée des
   sept pages `.mc__ctx`. Le pied de page `.coda` suit.

   Sans JS : tout est visible. ≤ 760 px : les trois cases s'empilent, les boutons passent pleine largeur. */

:root { --mc-soft: rgb(255 255 255 / 0.78); --mc-muted: rgb(255 255 255 / 0.72); }

/* ---------- communs ---------- */
.mc :is(a, button):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mc :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.mc [hidden], .mct[hidden] { display: none !important; }
.mc__h:focus { outline: 0; }
:where(.mc button) { font: inherit; color: inherit; cursor: pointer; }

/* ---------- la section ---------- */
.mc {
  --rig-x: 24%;
  --rig-y: 12px;
  --rig-w: 76px;
  --rig-tilt: 32deg;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-bottom: clamp(48px, 5vw, 80px);
}
.mc .cone { --spread: 19deg; --throw: 900px; }

.mc__in {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  width: 100%;
  text-align: center;
}

/* le rond jaune : apparaît, puis la coche se dessine */
.mc__ok {
  display: grid;
  place-items: center;
  width: clamp(84px, 7.4vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 calc(clamp(84px, 7.4vw, 104px) * 0.11) rgb(226 174 12 / 0.22);
  animation: mc-pop 0.7s var(--ease-out) backwards;
}
.mc__ok svg { width: 62%; height: 62%; overflow: visible; stroke-width: 5; }
.mc__ok .d { stroke-dasharray: 1; animation: mc-draw 0.6s 0.4s var(--ease-out) backwards; }
@keyframes mc-pop { from { scale: 0.6; opacity: 0; } }
@keyframes mc-draw { from { stroke-dashoffset: 1; } }

.mc__h { margin: -0.24em 0; max-width: 26ch; font-size: clamp(2.2rem, 5vw, 3.5rem); text-align: center; }
.mc .fb__lead { margin: 0; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--mc-soft); }

/* les trois cases */
.mc__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 1000px;
  margin-top: clamp(10px, 1.8vw, 24px);
}
.mc__fact {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  padding: 18px 22px 20px;
  border-radius: 22px;
  background: rgb(255 255 255 / 0.08);
  text-align: left;
}
.mc__fact small { margin-bottom: 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.mc__fact b { font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.mc__fact span { font-size: 0.9375rem; line-height: 1.38; color: var(--mc-muted); }

/* le bouton jaune de l'action suivante et WhatsApp */
.mc__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(6px, 1.4vw, 18px); }
.mc__btns .btn { min-height: 54px; font-size: 1rem; }
.mc__btns .btn__icon { width: 40px; height: 40px; }
.mc__btns .btn__icon svg { width: 20px; height: 20px; }
.mc__btns .btn__label { padding-right: 6px; }
.mc__wa { padding-left: 7px; background: rgb(255 255 255 / 0.14); color: #fff; }
.mc__wa:hover { background: rgb(255 255 255 / 0.22); }
.mc__wa .btn__icon { background: #25d366; color: #fff; }
.mc__wa:hover .btn__icon { background: #25d366; transform: rotate(-10deg); }

.mc__alt { margin: 2px 0 0; font-size: 0.9375rem; color: var(--mc-soft); }
.mc__alt a { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.mc__alt a:hover { color: var(--gold); }

/* maquette : la note et la rangée des sept pages */
.mc__ex { max-width: 74ch; margin-top: clamp(10px, 1.6vw, 22px); }
.mc__ex b { font-weight: 500; color: rgb(255 255 255 / 0.74); }
.mc__ctx { display: grid; justify-items: center; gap: 8px; }
.mc__ctx > span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.46); }
.mc__ctx ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mc__ctx a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.76);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.mc__ctx a:hover { background: rgb(255 255 255 / 0.16); color: #fff; }
.mc__ctx a[aria-current="page"] { background: var(--gold); color: var(--ink); }

/* bulle d'information (PDF à fournir) */
.mct {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: min(92vw, 460px);
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 40px rgb(5 10 20 / 0.35);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  translate: -50% 0;
  animation: mc-toast 0.35s var(--ease-out) backwards;
}
@keyframes mc-toast { from { opacity: 0; translate: -50% 10px; } }

/* ---------- tablette et mobile ---------- */
@media (max-width: 1000px) {
  /* la barre n'a plus que le logo à gauche et le menu à droite : le projecteur prend le milieu, d'aplomb */
  .mc { --rig-x: 50%; --rig-tilt: 0deg; }
  .mc .cone { --spread: 24deg; --throw: 760px; }
}
@media (max-width: 760px) {
  .mc { --rig-w: 60px; }
  .mc .cone { --spread: 26deg; --throw: 640px; }
  /* les trois cases deviennent une seule feuille : légende à gauche, texte à droite */
  .mc__facts { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 20px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
  .mc__fact { grid-template-columns: 108px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px 18px; border-radius: 0; background: none; }
  .mc__fact + .mc__fact { border-top: 1px solid rgb(255 255 255 / 0.1); }
  .mc__fact small { grid-row: 1 / span 2; margin: 5px 0 0; font-size: 0.72rem; }
  .mc__fact b, .mc__fact span { grid-column: 2; }
  .mc__fact b { font-size: 1.2rem; }
  .mc__btns { width: 100%; flex-direction: column; }
  .mc__btns .btn { width: 100%; justify-content: flex-start; white-space: normal; }
  .mc__btns .btn__label { flex: 1; text-align: left; line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  .mc__ok, .mc__ok .d, .mct { animation: none; }
}