/* Site public de Mytik (mytikapp.com) : accueil et liste d'attente, pages juridiques, aide, invitation et suivi. */

/* Polices servies par le site lui-même (Barlow, licence OFL : fonts/OFL.txt).
   Aucune requête vers un autre service : les liens vers Google Fonts des autres pages peuvent partir. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-400.woff') format('woff'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('/fonts/barlow-600.woff') format('woff'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('/fonts/barlow-700.woff') format('woff'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('/fonts/barlow-condensed-800.woff') format('woff'); }

:root {
  --bg: #121014;
  --card: #1c1a20;
  --line: #2c2931;
  --text: #f4efe9;
  --muted: #b3aca5;
  --accent: #ff6a2b;
  --gold: #e6b450;
  /* Les couleurs de l'appli (src/theme/index.ts, thème Braise), pour l'accueil. */
  --surface: #1e1a1f;
  --raised: #2a242b;
  --bord: #2e2830;
  --bord-fort: #3a333b;
  --doux: #cfc6cb;
  --gris: #a79fa4;
  --or: #f5c542;
  --ivoire: #e9dfc9;
  --vert: #3ddc84;
  --rouge: #ff5a5f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--accent); }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 22px/1 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.lang { color: var(--muted); font-size: 15px; }
/* Le haut des pages d'aide et juridiques : Mes stats, la langue et le téléchargement (comme la vitrine). */
.haut-liens { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; justify-content: flex-end; font-size: 15px; }
.haut-liens a:not(.button) { color: var(--muted); text-decoration: none; }
.haut-liens a:not(.button):hover { color: var(--text); }
.haut-liens .button { padding: 9px 16px; font-size: 15px; }
@media (max-width: 520px) { .haut-liens .button { display: none; } }
h1 { font: 700 34px/1.15 'Barlow Condensed', 'Barlow', sans-serif; margin: 24px 0 8px; }
h2 { font: 700 22px/1.25 'Barlow Condensed', 'Barlow', sans-serif; margin: 32px 0 6px; }
p, li { color: var(--text); }
.muted, .updated { color: var(--muted); font-size: 15px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 16px 0; }
.todo { color: var(--gold); }
.button { display: inline-block; background: var(--accent); color: #1a0f08; font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 999px; white-space: nowrap; }
.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
nav.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0; }
footer { color: var(--muted); font-size: 14px; padding-top: 32px; padding-bottom: 40px; border-top: 1px solid var(--line); margin-top: 48px; }
footer a { color: var(--muted); }
details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; }

/* ------------------------------------------------------------------------------------------
   L'interrupteur de la sortie (site-config.js) : avant, le formulaire ; après, les stores.
   ------------------------------------------------------------------------------------------ */
html:not(.sortie) .si-sortie { display: none !important; }
html.sortie .si-avant { display: none !important; }

/* ------------------------------------------------------------------------------------------
   Page d'accueil (body.accueil), mobile d'abord.
   ------------------------------------------------------------------------------------------ */
.accueil {
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(110% 560px at 50% -140px, rgba(255, 106, 43, 0.34), rgba(18, 16, 20, 0) 72%),
    var(--bg);
  background-repeat: no-repeat;
  overflow-x: clip;
}
.accueil header, .accueil main, .accueil footer { max-width: 1120px; padding-left: 0; padding-right: 0; }
.accueil header.haut { padding-top: 14px; padding-bottom: 4px; }
.accueil .brand { font-size: 24px; }
.accueil .lang { color: var(--doux); text-decoration: none; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 999px; font-size: 14px; font-weight: 600; }
.accueil :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.accueil img { max-width: 100%; }
.visuel-cache { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.surtitre { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 0; color: var(--doux); font: 700 12px/1.2 'Barlow', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 106, 43, 0.2); flex-shrink: 0; }
.accueil h1 {
  margin: 8px 0 10px;
  font: 800 clamp(42px, 11.6vw, 84px)/0.92 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
}
.accueil h1 em { font-style: normal; color: var(--accent); }
.chapeau { margin: 0 0 16px; max-width: 34em; color: var(--doux); font-size: 16.5px; line-height: 1.45; }

/* Le formulaire de la liste d'attente */
.liste {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--bord);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.champs { display: grid; gap: 10px; }
.champ {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 58px;
  padding: 8px 14px;
  border: 1px solid var(--bord-fort);
  border-radius: 14px;
  background: var(--raised);
  cursor: text;
}
.champ:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 106, 43, 0.25); }
.etiquette { color: var(--gris); font: 700 11px/1.2 'Barlow', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.facultatif { font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.champ input, .champ select {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: 400 17px/1.35 'Barlow', sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
.champ input::placeholder { color: #7d7479; opacity: 1; }
.champ select {
  cursor: pointer;
  padding-right: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23A79FA4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 20px 20px;
}
.champ select option { background: var(--raised); color: var(--text); }
.champ-choix { cursor: pointer; }

.case { position: relative; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 11px; padding: 4px 2px; font-size: 15.5px; line-height: 1.35; cursor: pointer; }
.case input { position: absolute; left: 2px; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.boite { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--gris); border-radius: 7px; transition: background-color 0.15s, border-color 0.15s; }
.boite svg { width: 16px; height: 16px; fill: none; stroke: #121014; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.case input:checked + .boite { border-color: var(--accent); background: var(--accent); }
.case input:checked + .boite svg { opacity: 1; }
.case input:focus-visible + .boite { outline: 3px solid var(--accent); outline-offset: 3px; }

.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #121014;
  font: 700 17px/1.1 'Barlow', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
.bouton:hover { background: #ff8a57; }
.bouton:active { transform: scale(0.98); }
.bouton:disabled { opacity: 0.6; cursor: progress; }
.mention { margin: 0; padding: 0 2px; color: var(--gris); font-size: 12.5px; line-height: 1.45; }
.mention a { color: var(--doux); }
.retour, .cible { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 90, 95, 0.12); color: #ffb3b5; font-size: 15.5px; line-height: 1.4; }
.retour.ok, .cible.ok { background: rgba(61, 220, 132, 0.12); color: #9af2c2; font-weight: 600; }
.retour:focus, .cible:focus { outline: none; }
.liste.fait .champs, .liste.fait .case, .liste.fait .bouton { display: none; }
/* Sans JavaScript, la fonction renvoie vers #merci ou #oups. */
.cible { display: none; }
.cible:target { display: block; }
.piege { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* Les boutons des stores, après la sortie (badges officiels, sans retouche) */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 8px; }
.store { display: block; }
.store img { display: block; width: auto; height: 48px; }

/* Les téléphones : les écrans dessinés pour les stores (rangée AJ-Store) */
.tel {
  position: relative;
  width: min(272px, 74vw);
  margin: 0;
  padding: 7px;
  aspect-ratio: 390 / 844;
  border-radius: 46px;
  background: #050405;
  box-shadow: 0 0 0 1.5px var(--bord-fort), 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 110px rgba(255, 106, 43, 0.14);
}
.tel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 39px; }

.hero { display: grid; gap: 26px; padding: 4px 0 8px; }
.hero-visuel { position: relative; display: flex; justify-content: center; max-height: 430px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.tel-arriere { display: none; }

/* Le méandre grec, en séparation */
.meandre {
  height: 14px;
  margin: 8px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cpath d='M0 13H20M17 13V1H5V9H13V5H9' fill='none' stroke='%23FF6A2B' stroke-opacity='.36' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") repeat-x left center / 20px 14px;
}

/* Les trois boucles du jeu */
.accueil h2 {
  margin: 8px 0 12px;
  font: 800 clamp(34px, 9vw, 56px)/0.95 'Barlow Condensed', 'Barlow', sans-serif;
  text-transform: uppercase;
  text-wrap: balance;
}
.numero { margin: 0; color: var(--accent); font: 700 12px/1.2 'Barlow', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.texte-doux { color: var(--doux); font-size: 17px; line-height: 1.5; margin: 0; max-width: 32em; }
.atouts { display: grid; gap: 56px; padding: 36px 0 44px; }
.atout { display: grid; gap: 24px; align-items: center; }
.atout .tel { width: min(262px, 72vw); margin: 0 auto; }

.sports { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sports li { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bord); border-radius: 14px; background: var(--surface); }
.sports svg { width: 24px; height: 24px; }
.sports .encore { width: auto; padding: 0 12px; color: var(--doux); font: 700 15px/1 'Barlow', sans-serif; }
.c-endurance { color: #38bdf8; }
.c-force { color: #f5a524; }
.c-eau { color: #818cf8; }
.c-collectifs { color: #f97316; }
.c-raquettes { color: #a3e635; }
.c-combat { color: #f0435f; }

.rangs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 470px; margin: 18px 0 0; padding: 0; list-style: none; }
.rangs li { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--gris); font: 700 11.5px/1 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; }
.rangs img { display: block; width: 100%; max-width: 62px; height: auto; aspect-ratio: 1; }
.rangs li:last-child { color: var(--accent); }

.aussi { display: grid; gap: 12px; padding: 0 0 8px; }
.carte { padding: 18px 18px 20px; border: 1px solid var(--bord); border-radius: 22px; background: var(--surface); }
.carte > svg { width: 30px; height: 30px; color: var(--accent); }
.carte h3 { margin: 12px 0 6px; font: 800 24px/1 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; }
.carte p { margin: 0; color: var(--doux); font-size: 16px; line-height: 1.45; }

/* Les formules, sans prix */
.formules { padding: 44px 0 8px; }
.cartes-formules { display: grid; gap: 12px; margin-top: 22px; }
.formule { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--bord); border-radius: 22px; background: var(--surface); }
.formule h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 30px/1 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.formule h3 svg { width: 26px; height: 26px; }
.formule-sous { margin: 6px 0 14px; color: var(--gris); font-size: 15px; }
.formule ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.formule li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; color: var(--doux); font-size: 16px; line-height: 1.35; }
.formule li svg { width: 20px; height: 20px; margin-top: 0; }
.formule-gratuit h3 { color: var(--accent); }
.formule-gratuit li svg { color: var(--accent); }
.formule-plus { border: 1.5px solid var(--or); background: linear-gradient(180deg, rgba(245, 197, 66, 0.1), rgba(245, 197, 66, 0) 55%), var(--surface); }
.formule-plus h3 { color: var(--text); }
.formule-plus h3 svg, .formule-plus .signe, .formule-plus li svg { color: var(--or); }
.formule-pantheon { opacity: 0.6; }
.formule-pantheon h3, .formule-pantheon h3 svg, .formule-pantheon li svg { color: var(--ivoire); }
.pastille { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: rgba(233, 223, 201, 0.14); color: var(--ivoire); font: 700 11px/1 'Barlow', sans-serif; letter-spacing: 0.1em; }
.regle-or { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 12px 0 0; padding: 16px 18px; border: 1px solid var(--bord); border-radius: 18px; background: var(--surface); color: var(--doux); font-size: 16px; line-height: 1.45; }
.regle-or svg { width: 28px; height: 28px; color: var(--or); }
.regle-or strong { color: var(--text); }

/* Les questions */
.questions { padding: 44px 0 8px; max-width: 760px; }
.accueil details { margin: 10px 0; padding: 0; border: 1px solid var(--bord); border-radius: 16px; background: var(--surface); }
.accueil summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font-size: 17px; font-weight: 600; list-style: none; }
.accueil summary::-webkit-details-marker { display: none; }
.accueil summary::after { content: '+'; color: var(--accent); font: 700 24px/1 'Barlow', sans-serif; flex-shrink: 0; }
.accueil details[open] summary::after { content: '–'; }
.accueil details p { margin: 0; padding: 0 18px 16px; color: var(--doux); font-size: 16px; line-height: 1.5; }

/* Le dernier appel */
.appel {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 40px 0 0;
  padding: 36px 20px 32px;
  border: 1px solid var(--bord);
  border-radius: 28px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(255, 106, 43, 0.22), rgba(30, 26, 31, 0) 70%), var(--surface);
  text-align: center;
}
.appel img { width: 56px; height: 56px; border-radius: 14px; }
.appel h2 { margin: 12px 0 4px; }
.appel p { margin: 0 0 18px; color: var(--doux); }
.appel .bouton { width: auto; min-width: 240px; }

.accueil footer { margin-top: 40px; border-top-color: var(--bord); }
.accueil footer p { color: var(--gris); }
.accueil footer a { color: var(--gris); }

@media (min-width: 560px) {
  .champs { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .liste { padding: 14px; }
}
@media (min-width: 720px) {
  .aussi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .accueil header.haut { padding-top: 22px; }
}
@media (min-width: 880px) {
  .atout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .atout:nth-child(even) .atout-texte { order: 2; }
  .cartes-formules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Deux formules tant que Panthéon n'est pas sorti (décision du 31 octobre 2026). */
  .cartes-formules.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .accueil { background: radial-gradient(70% 720px at 72% -120px, rgba(255, 106, 43, 0.3), rgba(18, 16, 20, 0) 72%), var(--bg); background-repeat: no-repeat; }
  .hero { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); align-items: center; gap: 56px; padding: 12px 0 28px; }
  .chapeau { font-size: 19px; }
  .hero-visuel { max-height: none; height: 680px; align-items: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .tel-avant { z-index: 2; width: 306px; }
  .hero-texte { position: relative; z-index: 3; }
  .tel-arriere { position: absolute; top: 112px; display: block; width: 228px; opacity: 0.5; }
  .tel-gauche { right: calc(50% + 40px); transform: rotate(-7deg); }
  .tel-droite { left: calc(50% + 40px); transform: rotate(7deg); }
  .atouts { gap: 72px; padding-top: 56px; }
  .atout .tel { width: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  .bouton, .boite { transition: none; }
}

/* ------------------------------------------------------------------------------------------
   Pages de la liste d'attente : confirmer, se désinscrire (body.liste-page)
   ------------------------------------------------------------------------------------------ */
.liste-page main { min-height: 50vh; }
.etat { display: none; margin: 24px 0; padding: 24px 22px; border: 1px solid var(--bord); border-radius: 22px; background: var(--surface); }
.etat h1 { margin: 0 0 8px; font: 800 34px/1 'Barlow Condensed', 'Barlow', sans-serif; text-transform: uppercase; }
.etat h1:focus { outline: none; }
.etat p { margin: 0 0 16px; color: var(--doux); }
.etat .bouton { width: auto; display: inline-flex; }
.etat-ok h1 { color: var(--vert); }
[data-etat="attente"] .etat-attente,
[data-etat="question"] .etat-question,
[data-etat="ok"] .etat-ok,
[data-etat="perime"] .etat-perime,
[data-etat="erreur"] .etat-erreur { display: block; }
/* Sans JavaScript, la fonction renvoie vers #ok ou #perime. */
.etats:has(.etat:target) .etat { display: none; }
.etats:has(.etat:target) .etat:target { display: block; }

/* Rangée DC · la page d’un cadeau (/i/<code>, invitation/index.html). */
.gift-message { font-size: 20px; line-height: 1.4; font-style: italic; margin: 12px 0; }
.steps { padding-left: 22px; margin: 16px 0; }
.steps li { margin: 6px 0; }