/* =============================================================================
   THÈME MYSTERIA — détective privé & Cthulhu, dans la continuité du site vitrine
   Noir profond, sépia, laiton patiné, encre verte des abysses.
   Polices : Cinzel (titres, comme le site) et Special Elite (machine à écrire,
   pour les boutons et les étapes). Fichiers .woff2 à déposer dans assets/fonts/ ;
   en leur absence, Georgia et Courier New prennent le relais sans rien casser.
   ============================================================================= */
@font-face { font-family: "Cinzel"; font-weight: 400 700; font-display: swap; src: url("../../fonts/cinzel.woff2") format("woff2"); }
@font-face { font-family: "Special Elite"; font-weight: 400; font-display: swap; src: url("../../fonts/special-elite.woff2") format("woff2"); }

:root {
  --theme-nom:       "Thème Mysteria";

  /* Couleurs de fond — noir de bureau, sépia de vieux papier */
  --fond:            #0c0a09;
  --fond-2:          #17130f;   /* cartes, encarts */
  --fond-3:          #241d17;   /* survol, bordures fortes */
  --bordure:         #3b3027;

  /* Texte — parchemin */
  --texte:           #ece3d2;
  --texte-2:         #a99b85;
  --texte-inverse:   #0c0a09;

  /* Accent — laiton patiné (boutons du site vitrine) */
  --accent:          #b0905e;
  --accent-hover:    #cdae74;
  --accent-texte:    #120e0b;

  /* Sémantique — vert des abysses, ambre de lampe, rouge sang séché, brume */
  --succes:          #5f9e84;
  --alerte:          #d4a04a;
  --erreur:          #b33d3d;
  --info:            #5f8f96;

  --ombre:           0 12px 32px rgba(0, 0, 0, .55);
  --voile:           rgba(4, 3, 3, .78);

  /* Typographie propre au thème */
  --police-titres:   "Cinzel", "Trajan Pro", "Georgia", serif;
  --police-machine:  "Special Elite", "Courier New", Courier, monospace;
  --rayon:           4px;
  --rayon-petit:     3px;
  color-scheme: dark;
}

/* --- Ambiance : lampe de bureau + grain de papier ----------------------------- */
html[data-theme="mysteria"] body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -12%, rgba(176, 144, 94, .16), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(47, 95, 87, .12), transparent 60%),
    var(--fond);
  background-repeat: no-repeat;
}

/* --- Titres : capitales espacées, tirets cadratins comme sur le site --------- */
html[data-theme="mysteria"] h1,
html[data-theme="mysteria"] h2 {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}
html[data-theme="mysteria"] h1 { font-size: 1.55rem; }
html[data-theme="mysteria"] h1::before { content: "— "; color: var(--accent); }
html[data-theme="mysteria"] h1::after  { content: " —"; color: var(--accent); }
html[data-theme="mysteria"] h3 { letter-spacing: .03em; }

/* --- En-tête et pied : bandeau noir, filet laiton --------------------------- */
html[data-theme="mysteria"] .entete {
  background: linear-gradient(180deg, #050404, #0f0c0a);
  border-bottom: 1px solid var(--accent);
  box-shadow: 0 1px 0 rgba(176, 144, 94, .25), 0 8px 24px rgba(0, 0, 0, .5);
}
html[data-theme="mysteria"] .entete .logo { font-family: var(--police-titres); letter-spacing: .12em; text-transform: uppercase; color: var(--texte); }
html[data-theme="mysteria"] .entete .retour { font-family: var(--police-machine); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); white-space: nowrap; }
html[data-theme="mysteria"] .entete .retour:hover { color: var(--accent-hover); }
html[data-theme="mysteria"] .pied { border-top: 1px double var(--bordure); border-top-width: 3px; }
html[data-theme="mysteria"] .pied nav a { font-family: var(--police-machine); letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }

/* --- Cartes : coins asymétriques du site, liseré intérieur ------------------- */
html[data-theme="mysteria"] .carte {
  border-radius: 26px 6px 26px 6px;
  border-color: var(--bordure);
  background: linear-gradient(160deg, #1a1511, #15110e);
  box-shadow: var(--ombre), inset 0 1px 0 rgba(236, 227, 210, .05);
}

/* --- Boutons : plaque de laiton gravée, police machine à écrire ------------- */
html[data-theme="mysteria"] .btn {
  font-family: var(--police-machine);
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 3px;
}
html[data-theme="mysteria"] .btn-primaire {
  background: linear-gradient(180deg, #c3a26b, #9d7f52);
  color: #14100c;
  border-color: #6d5537;
  box-shadow: inset 0 1px 0 rgba(255, 244, 220, .35), 0 3px 0 #55412a, 0 6px 14px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 244, 220, .25);
}
html[data-theme="mysteria"] .btn-primaire:hover,
html[data-theme="mysteria"] .btn-primaire:focus-visible { background: linear-gradient(180deg, #d4b47b, #ab8b5b); color: #14100c; }
html[data-theme="mysteria"] .btn-primaire:active { box-shadow: inset 0 1px 0 rgba(255, 244, 220, .2), 0 1px 0 #55412a; transform: translateY(2px); }
html[data-theme="mysteria"] .btn-secondaire { border-color: var(--accent); color: var(--accent); background: transparent; }
html[data-theme="mysteria"] .btn-secondaire:hover { background: rgba(176, 144, 94, .12); color: var(--accent-hover); }

/* --- Étapes du tunnel : tampons de dossier ---------------------------------- */
html[data-theme="mysteria"] .etapes span { font-family: var(--police-machine); letter-spacing: .08em; text-transform: uppercase; }

/* --- Calendrier et séances --------------------------------------------------- */
html[data-theme="mysteria"] .cal-mois h2 { font-size: 1.05rem; }
html[data-theme="mysteria"] .cal-jour { background: #120e0c; }
html[data-theme="mysteria"] .cal-jour.dispo { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(176, 144, 94, .25); }
html[data-theme="mysteria"] .cal-jour.dispo:hover,
html[data-theme="mysteria"] .cal-jour.selectionne { background: var(--accent); box-shadow: 0 0 18px rgba(176, 144, 94, .35); }
html[data-theme="mysteria"] .seance-ligne .heure { letter-spacing: .04em; }
html[data-theme="mysteria"] .grille-prix span { font-family: var(--police-machine); letter-spacing: .04em; border-radius: 3px; }

/* --- Formulaires : encre sur papier sombre ---------------------------------- */
html[data-theme="mysteria"] input[type="text"],
html[data-theme="mysteria"] input[type="email"],
html[data-theme="mysteria"] input[type="tel"],
html[data-theme="mysteria"] input[type="number"],
html[data-theme="mysteria"] select,
html[data-theme="mysteria"] textarea { background: #0e0b0a; }
html[data-theme="mysteria"] .compteur output { color: var(--accent-hover); }
html[data-theme="mysteria"] .compteur button { background: #120e0c; border-color: var(--accent); color: var(--accent); }

/* --- Badges et récapitulatif ------------------------------------------------- */
html[data-theme="mysteria"] .badge { border-radius: 3px; font-family: var(--police-machine); font-weight: 400; letter-spacing: .1em; }
html[data-theme="mysteria"] .recap-prix .total { letter-spacing: .04em; }
html[data-theme="mysteria"] .confirmation-icone { color: var(--accent); }

/* --- Lien de focus visible, couleur laiton ----------------------------------- */
html[data-theme="mysteria"] :focus-visible { outline-color: var(--accent-hover); }

/* --- Petits écrans : on resserre la police machine pour éviter les retours à la ligne */
html[data-theme="mysteria"] .entete .logo { font-size: .95rem; letter-spacing: .08em; }
html[data-theme="mysteria"] .grille-prix span { font-size: .74rem; letter-spacing: 0; }
@media (max-width: 559px) {
  html[data-theme="mysteria"] .btn { letter-spacing: .06em; font-size: .85rem; }
  html[data-theme="mysteria"] .etapes span { letter-spacing: .02em; font-size: .72rem; }
  html[data-theme="mysteria"] h1 { font-size: 1.3rem; letter-spacing: .05em; }
  html[data-theme="mysteria"] .entete .retour { font-size: .72rem; letter-spacing: .04em; }
}