/* ==========================================================
   Thème commun — Mariage Fidèle & Bienvenue
   Utilisé par toutes les pages (invités et organisateurs).
   Cartes, champs, boutons, pastilles, statistiques, tableaux,
   navigation et notifications : un seul style partout.
   ========================================================== */

:root {
    --teal-950: #00262B; --teal-900: #00434B; --teal-800: #005F6A; --teal-700: #007A87;
    --gold-300: #F3E5AB; --gold-400: #E6C875; --gold-500: #D4AF37; --gold-600: #AA820A;
    --texte: #f1f5f9; --texte-doux: #cbd5e1; --texte-pale: #94a3b8;
    --bord: rgba(212, 175, 55, .3);
    --rayon: 1rem;
}

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ---------- Fond et cartes ---------- */
.bg-pattern {
    background-color: var(--teal-950);
    background-image: radial-gradient(#d4af3715 1px, transparent 1px);
    background-size: 24px 24px;
}
.glass-card {
    background: rgba(0, 50, 57, .78);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bord);
}
/* Carte standard : même arrondi et mêmes marges sur toutes les pages */
.carte { border-radius: var(--rayon); padding: 1rem; }
@media (min-width: 640px) { .carte { padding: 1.25rem; } }

.titre-section {
    font-family: Cinzel, serif; font-weight: 700; font-size: 1rem; line-height: 1.4;
    color: var(--gold-300); display: flex; align-items: center; gap: .5rem;
}
.titre-section > i { color: var(--gold-400); }
.aide { font-size: .6875rem; line-height: 1.5; color: var(--texte-pale); }

/* ---------- Champs de saisie ----------
   16 px sur téléphone : évite le zoom automatique d'iPhone au toucher */
.field {
    width: 100%; min-height: 2.75rem; padding: .6rem .9rem;
    background: rgba(0, 38, 43, .9); border: 1px solid var(--bord); border-radius: .75rem;
    color: var(--texte); font-size: 16px; line-height: 1.4;
}
@media (min-width: 640px) { .field { font-size: .875rem; } }
.field::placeholder { color: #64748b; }
.field:focus { outline: none; border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(212, 175, 55, .15); }
.field[readonly] { opacity: .7; cursor: not-allowed; }
.field::-webkit-calendar-picker-indicator { filter: invert(.8); }
.field-sm { min-height: 2.25rem; padding: .35rem .6rem; border-radius: .6rem; }
@media (min-width: 640px) { .field-sm { font-size: .8125rem; } }
.etiquette { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-300); margin-bottom: .3rem; }

/* ---------- Boutons ----------
   .btn + une couleur : .btn-or (action principale), .btn-doux (secondaire),
   .btn-vert (valider / WhatsApp), .btn-rouge (supprimer), .btn-bleu, .btn-ambre.
   Tailles : .btn-sm, .btn-icone (carré). Hauteur mini 44 px (doigt). */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 2.75rem; padding: .55rem 1.1rem; border-radius: .75rem;
    font-size: .875rem; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: filter .15s, background-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.btn-sm { min-height: 2.25rem; padding: .35rem .75rem; border-radius: .6rem; font-size: .75rem; }
.btn-icone { padding: 0; width: 2.75rem; }
.btn-sm.btn-icone { width: 2.25rem; }
.btn-bloc { width: 100%; }
.btn-rond { border-radius: 999px; }

/* Double classe : passe devant la remise à zéro des boutons de Tailwind */
.btn.btn-or { background: linear-gradient(90deg, var(--gold-500), var(--gold-400), var(--gold-600)); color: var(--teal-950); font-weight: 700; box-shadow: 0 4px 14px rgba(212, 175, 55, .22); }
.btn.btn-or:hover { filter: brightness(1.08); }
.btn.btn-doux { background: var(--teal-800); color: var(--gold-300); border-color: var(--bord); }
.btn.btn-doux:hover { background: var(--teal-700); }
.btn.btn-vert { background: #059669; color: #fff; }
.btn.btn-vert:hover { background: #10b981; }
.btn.btn-rouge { background: rgba(244, 63, 94, .14); color: #fda4af; border-color: rgba(244, 63, 94, .4); }
.btn.btn-rouge:hover { background: rgba(244, 63, 94, .25); }
.btn.btn-bleu { background: rgba(14, 165, 233, .15); color: #bae6fd; border-color: rgba(14, 165, 233, .4); }
.btn.btn-bleu:hover { background: rgba(14, 165, 233, .28); }
.btn.btn-ambre { background: rgba(245, 158, 11, .14); color: #fde68a; border-color: rgba(245, 158, 11, .4); }
.btn.btn-ambre:hover { background: rgba(245, 158, 11, .25); }
.btn.btn-fantome { background: transparent; color: var(--texte-pale); }
.btn.btn-fantome:hover { color: var(--gold-300); background: rgba(0, 67, 75, .6); }
.btn.btn-fantome.danger:hover { color: #fda4af; }

/* ---------- Pastilles d'état ---------- */
.pill {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem;
    border-radius: 999px; font-size: .6875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid;
}
.pill.pill-ok   { background: rgba(16, 185, 129, .15); color: #6ee7b7; border-color: rgba(16, 185, 129, .4); }
.pill.pill-wait { background: rgba(100, 116, 139, .18); color: #cbd5e1; border-color: rgba(100, 116, 139, .4); }
.pill.pill-full { background: rgba(244, 63, 94, .15); color: #fda4af; border-color: rgba(244, 63, 94, .4); }
.pill.pill-mid  { background: rgba(245, 158, 11, .15); color: #fcd34d; border-color: rgba(245, 158, 11, .4); }
.pill.pill-info { background: rgba(14, 165, 233, .15); color: #7dd3fc; border-color: rgba(14, 165, 233, .4); }
.pill.pill-or   { background: rgba(212, 175, 55, .15); color: var(--gold-300); border-color: rgba(212, 175, 55, .35); }
button.pill { cursor: pointer; }
button.pill:hover { filter: brightness(1.25); }

/* ---------- Statistiques ---------- */
.stats { display: grid; gap: .5rem; }
.stat { border-radius: .875rem; padding: .75rem .5rem; text-align: center; }
.stat-val { display: block; font-family: Cinzel, serif; font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.stat-lib { display: block; margin-top: .15rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-pale); }
@media (min-width: 640px) { .stat-val { font-size: 1.75rem; } }

/* ---------- Messages ---------- */
.alerte { display: flex; gap: .6rem; align-items: flex-start; border-radius: .875rem; padding: .8rem 1rem; font-size: .875rem; border: 1px solid; }
.alerte-ok   { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .4); color: #a7f3d0; }
.alerte-err  { background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .4); color: #fecdd3; }
.alerte-warn { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); color: #fde68a; }
.alerte-info { background: rgba(14, 165, 233, .1); border-color: rgba(14, 165, 233, .4); color: #bae6fd; }

.toast {
    position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
    max-width: min(92vw, 32rem); padding: .75rem 1rem; border-radius: .875rem; border: 1px solid;
    font-size: .875rem; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
    background: var(--teal-900); border-color: rgba(212, 175, 55, .4); color: var(--gold-300);
}
.toast.erreur { background: #4c0519; border-color: rgba(244, 63, 94, .5); color: #fecdd3; }

/* ---------- En-tête et navigation (pages organisateurs) ---------- */
.barre { position: sticky; top: 0; z-index: 40; background: rgba(0, 38, 43, .96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(212, 175, 55, .22); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.nav-lien {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-width: 2.5rem; height: 2.5rem; padding: 0 .65rem; border-radius: .65rem;
    font-size: .875rem; font-weight: 500; color: var(--texte-doux); border: 1px solid transparent; white-space: nowrap;
    transition: color .15s, background-color .15s;
}
.nav-lien:hover { color: var(--gold-300); background: rgba(0, 67, 75, .7); }
.nav-lien.actif { color: var(--gold-300); background: rgba(212, 175, 55, .14); border-color: rgba(212, 175, 55, .35); }
.nav-lien.danger:hover { color: #fda4af; }

/* Onglets (accueil) */
.onglet {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .5rem .9rem;
    border-radius: .75rem; font-size: .85rem; font-weight: 600; white-space: nowrap;
    background: var(--teal-900); color: var(--texte-doux); border: 1px solid rgba(212, 175, 55, .2); transition: all .15s;
}
.onglet:hover { color: var(--gold-300); }
.onglet.actif { background: linear-gradient(90deg, var(--gold-500), var(--gold-400), var(--gold-600)); color: var(--teal-950); border-color: transparent; box-shadow: 0 4px 14px rgba(212, 175, 55, .25); }
/* Téléphone : onglets en barre, icône au-dessus du libellé */
@media (max-width: 639px) {
    .onglet { flex-direction: column; justify-content: center; gap: .2rem; min-height: 3.1rem; padding: .4rem .3rem; font-size: .6875rem; }
    .onglet i { font-size: 1rem; }
}

/* ---------- Tableaux ----------
   Ordinateur : tableau classique.
   Téléphone  : chaque ligne devient une petite carte « libellé : valeur »
   (le libellé vient de l'attribut data-label de chaque cellule). */
.tableau { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left; }
.tableau th { padding: .7rem 1rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-pale); border-bottom: 1px solid rgba(212, 175, 55, .18); white-space: nowrap; }
.tableau td { padding: .75rem 1rem; vertical-align: middle; }
.tableau tbody tr { border-top: 1px solid rgba(212, 175, 55, .1); }
.tableau tbody tr:first-child { border-top: 0; }
.tableau tbody tr:hover { background: rgba(0, 67, 75, .35); }
.tableau .droite { text-align: right; }
@media (max-width: 639px) {
    .tableau thead { display: none; }
    .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
    .tableau tbody tr { padding: .75rem 1rem; border-top: 1px solid rgba(212, 175, 55, .12); }
    .tableau td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .25rem 0; text-align: right; }
    .tableau td::before { content: attr(data-label); flex-shrink: 0; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-pale); text-align: left; }
    .tableau td.principal { display: block; text-align: left; padding-bottom: .35rem; }
    .tableau td.principal::before, .tableau td[data-label=""]::before { display: none; }
    .tableau td.droite[data-label=""] { justify-content: flex-end; }
    .tableau td.vide { display: block; text-align: center; }
    .tableau td.vide::before { display: none; }
}

/* ---------- Petits champs (placement) ---------- */
.mini { width: 3.75rem; min-height: 2.25rem; padding: .3rem; text-align: center; background: rgba(0, 38, 43, .9); border: 1px solid var(--bord); border-radius: .55rem; color: var(--texte); font-size: 16px; }
@media (min-width: 640px) { .mini { font-size: .8125rem; } }
.mini:focus { outline: none; border-color: var(--gold-400); }

/* Défilement fin dans les listes */
.defile { scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, .35) transparent; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }