:root {
  --fond: #FBF6FA;
  --fond-admin: #F4ECF2;
  --encre: #2B0A1E;
  --texte: #4D3445;
  --discret: #6E5566;
  --bordure: #EBDCE6;
  --champ: #D8C2D2;
  --rose: #B5176F;
  --rose-fonce: #9C1460;
  --prune: #6B0F45;
  --teinte: #F8E3F0;
  --nuit: #3E0027;
  --ok-fond: #EAF3DE;
  --ok: #27500A;
  --alerte-fond: #FCEBEB;
  --alerte: #791F1F;
  --rayon: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body.admin { background: var(--fond-admin); }

a { color: var(--rose-fonce); }
a:hover { color: var(--prune); }

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
}

.page.large { max-width: 760px; }

.marque { display: flex; align-items: center; gap: 10px; }
.marque img { width: 40px; height: 40px; border-radius: 10px; }
.marque span { font-size: 13px; font-weight: 600; color: var(--rose-fonce); letter-spacing: 0.04em; }

h1 { margin: 0; font-size: 26px; line-height: 1.2; }
h2 { margin: 0; font-size: 18px; }

.slogan { margin: 0; color: var(--prune); font-style: italic; }

.bloc {
  background: #FFFFFF;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloc.prive { background: var(--teinte); border-color: transparent; }

.titre-bloc {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--texte);
}
.bloc.prive .titre-bloc { color: var(--prune); }

label.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
label.champ small { font-weight: 400; color: var(--discret); }

input[type="text"], input[type="tel"], input[type="number"], input[type="url"],
input[type="email"], input[type="password"], input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--champ);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--encre);
  background: #FFFFFF;
}

textarea { min-height: 84px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--rose);
  outline-offset: 1px;
}

.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.choix-genre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choix-genre label {
  min-height: 48px; border: 1px solid var(--champ); border-radius: 12px; background: #FFFFFF;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; font-weight: 600; cursor: pointer;
}
.choix-genre input { accent-color: var(--rose); width: 18px; height: 18px; margin: 0; }
.choix-genre label:has(input:checked) { border: 2px solid var(--rose); background: var(--teinte); color: var(--prune); }

.case {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: var(--prune);
}
.case input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--rose); }

.bouton {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--rose);
  color: #FFFFFF;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 18px;
}
.bouton:disabled { opacity: 0.6; cursor: wait; }
.bouton.secondaire { background: #FFFFFF; color: var(--encre); border: 1px solid var(--champ); font-weight: 600; }
.bouton.petit { min-height: 44px; font-size: 14px; border-radius: 12px; }

.etape { font-size: 13px; font-weight: 600; color: var(--rose-fonce); }

.note { font-size: 12px; color: var(--discret); text-align: center; margin: 0; }

.erreur {
  background: var(--alerte-fond); color: var(--alerte);
  border-radius: 10px; padding: 10px 12px; font-size: 14px;
}

.succes { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; padding-top: 30px; }
.succes .pastille {
  width: 72px; height: 72px; border-radius: 50%; background: var(--ok-fond); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}

.cache { display: none !important; }

/* ---------- Espace admin ---------- */
.onglets { display: flex; gap: 8px; flex-wrap: wrap; }
.onglets button {
  min-height: 40px; border-radius: 20px; border: 1px solid var(--champ); background: #FFFFFF;
  padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--encre); cursor: pointer;
}
.onglets button[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }

.entete-admin { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.carte { background: #FFFFFF; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.carte-haut { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.carte-nom { font-size: 17px; font-weight: 700; }
.carte-sous { font-size: 13px; color: var(--discret); }
.badge { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--teinte); color: var(--prune); white-space: nowrap; }
.badge.ok { background: var(--ok-fond); color: var(--ok); }
.badge.non { background: var(--alerte-fond); color: var(--alerte); }

.lignes { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ligne { display: flex; justify-content: space-between; gap: 12px; }
.ligne span:first-child { color: var(--discret); }
.ligne span:last-child { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.citation { background: var(--fond-admin); border-radius: 10px; padding: 10px 12px; color: var(--texte); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.actions .bouton { min-height: 46px; font-size: 14px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

.rubriques { display: flex; gap: 4px; background: #FFFFFF; border: 1px solid var(--bordure); border-radius: 14px; padding: 4px; }
.rubriques button {
  min-height: 44px; border: 0; border-radius: 10px; background: transparent; padding: 0 18px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--texte); cursor: pointer;
}
.rubriques button[aria-pressed="true"] { background: var(--rose); color: #FFFFFF; }

.grille-session { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.grille-session .tete { text-align: center; color: var(--discret); font-weight: 600; }
.grille-session input { text-align: center; min-height: 42px; padding: 6px; }

.bloc-lien { border-top: 1px solid var(--bordure); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.bloc-lien .titre-bloc { color: var(--prune); }
input.code { font-size: 24px; letter-spacing: 0.6em; text-align: center; font-weight: 700; }
a.bouton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.bouton:not(.secondaire):hover { color: #FFFFFF; }

.resa { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.resa:last-child { border-bottom: 0; }

.choix-personne { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--champ); border-radius: 12px; cursor: pointer; font-size: 15px; }
.choix-personne input { width: 20px; height: 20px; margin: 0; accent-color: var(--rose); flex: none; }
.choix-personne:has(input:checked) { border: 2px solid var(--rose); background: var(--teinte); }
.match { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--teinte); }
.match-titre { font-weight: 700; font-size: 16px; color: var(--prune); }
.match-message { font-style: italic; color: var(--prune); }

.vide { text-align: center; color: var(--discret); padding: 30px 0; }

@media (max-width: 380px) {
  .actions { grid-template-columns: 1fr; }
}