/* ============================================================
   ALL.CSS — Styles communs aux deux sites (admin + confirmation)
   Palette "dress code" mariage : émeraude profond / or bronze /
   ivoire / terracotta, complétée d'un vert sauge en accent
   secondaire discret (séparateurs, activité, halos).

   Toutes les classes existantes sont conservées à l'identique
   (le JS et le PHP s'y raccrochent) — seuls les tokens et le
   rendu visuel évoluent, et quelques primitives partagées sont
   ajoutées pour la refonte du tableau de bord (surface-card,
   glass-panel, flourish divider, ombres teintées).
   ============================================================ */

:root{
  /* ---- Couleurs dress code (version premium, tons profonds) ---- */
  --emeraude:         #0A4735;
  --emeraude-dark:    #062E22;
  --emeraude-mid:     #146B4F;
  --emeraude-light:   #E4EFE8;

  --or:               #A9822E;
  --or-dark:          #7C5F1F;
  --or-light:         #F3E9D2;
  --or-shine:         #E7C976;

  --terracotta:       #9C4A2A;
  --terracotta-dark:  #7A3A20;
  --terracotta-light: #F5E6DC;

  /* Vert sauge — accent secondaire "botanique", jamais utilisé pour
     une action primaire (ça reste le rôle de l'émeraude). Sert aux
     séparateurs floraux, aux puces d'activité, aux halos discrets. */
  --sauge:            #7C9473;
  --sauge-dark:       #4F6B4B;
  --sauge-light:      #EDF2EA;

  --ivoire:           #FBF8F1;
  --blanc:             #FFFFFF;

  /* ---- Rôles sémantiques ---- */
  --color-primary:      var(--emeraude);
  --color-primary-dark: var(--emeraude-dark);
  --color-accent:       var(--or);
  --color-secondary:    var(--sauge-dark);
  --color-warn:         var(--terracotta);
  --color-success:      var(--emeraude);
  --color-danger:       #A8362A;
  --color-danger-light: #F5E1DD;

  --bg-page:      var(--ivoire);
  --bg-surface:   var(--blanc);
  --bg-muted:     #F2EEE3;
  --bg-sunken:    #F6F3EA;

  --text-main:    #1C1A14;
  --text-muted:   #7A7669;
  --text-soft:    #9A968A;
  --text-inverse: #FFFFFF;

  --border-soft:    #E9E3D3;
  --border-strong:  #D9D0B8;
  --border-emerald: #C9DED2;
  --border-sauge:   #DCE5D8;

  /* Dégradé signature — le fil conducteur de toute la refonte.
     Réutilisé (avec parcimonie) sur les modales, la sidebar active,
     le soulignement du hero : un seul motif, reconnu partout. */
  --gradient-signature: linear-gradient(90deg, var(--emeraude) 0%, var(--or-shine) 55%, var(--sauge) 100%);
  --gradient-gold:      linear-gradient(160deg, var(--or-shine), var(--or));
  --gradient-emerald:   linear-gradient(160deg, var(--emeraude-mid), var(--emeraude-dark));

  /* ---- Espacements / rayons ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(28,26,20,.06);
  --shadow-sm: 0 2px 10px rgba(28,26,20,.07);
  --shadow-md: 0 10px 30px rgba(20,18,12,.10);
  --shadow-lg: 0 26px 60px rgba(16,14,10,.20);
  --shadow-emerald: 0 14px 32px rgba(10,71,53,.22);
  --shadow-gold:    0 14px 34px rgba(169,130,46,.24);
  --shadow-sauge:   0 12px 28px rgba(79,107,75,.16);
  --shadow-glass:   0 8px 40px rgba(6,46,34,.12);

  --transition: 200ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 420ms cubic-bezier(.16,1,.3,1);
  --transition-spring: 520ms cubic-bezier(.22,1.4,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4{
  font-family: var(--font-heading);
  margin: 0 0 .4em;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
}

p{ margin: 0 0 1em; line-height: 1.6; }

a{ color: var(--color-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width:100%; display:block; }

button, input, select, textarea{ font-family: inherit; font-size: inherit; }

ul{ list-style:none; margin:0; padding:0; }

.mio, .mi, .mir, .mit{ vertical-align: middle; }

/* Sélection de texte et ascenseur, aux couleurs de la maison plutôt
   que les valeurs par défaut du navigateur — petit détail, grand effet
   de cohérence sur un produit qu'on présente comme premium. */
::selection{ background: var(--emeraude-light); color: var(--emeraude-dark); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover{ background: var(--emeraude-mid); }

/* Focus clavier visible partout (accessibilité) — règle générique qui
   couvre aussi les nouveaux éléments interactifs de la sidebar et des
   cartes, sans avoir à lister chaque sélecteur à la main. */
:where(a, button, input, select, textarea, [tabindex],
  .guest-card, .letter-btn, .tab-btn, .sidebar-link, .stat-card):focus-visible{
  outline: 2.5px solid var(--emeraude-mid);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Utilitaires ---- */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.container{
  width:100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Carte de surface premium — la brique de base réutilisée par les
   stats, le graphique, l'activité, les cartes invité. Un seul rayon,
   une seule ombre au repos : la hiérarchie se fait par le contenu et
   la couleur d'accent (--tile-color), pas par des ombres différentes
   sur chaque carte. */
.surface-card{
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.surface-card.is-interactive:hover{
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

/* Panneau "verre dépoli" — réservé aux zones d'identité (sidebar,
   hero) pour ne pas le banaliser en l'utilisant partout. */
.glass-panel{
  background: rgba(251,248,241,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.5);
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius: var(--radius-pill);
  padding: 12px 30px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -.005em;
  cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition), border-color var(--transition), filter var(--transition);
  white-space:nowrap;
}
.btn:active{ transform: scale(.97); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* Reflet lumineux au survol — un seul effet de mouvement non déclenché
   par l'utilisateur (le "wow" ponctuel), réservé aux boutons d'action
   pleins ; pas appliqué aux boutons fantômes/outline pour ne pas en
   mettre partout. */
.btn-primary, .btn-accent, .btn-danger{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after, .btn-accent::after, .btn-danger::after{
  content:'';
  position:absolute; top:0; left:-70%;
  width:45%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.btn-primary:hover::after, .btn-accent:hover::after, .btn-danger:hover::after{ left:130%; }

.btn-primary{
  background: var(--gradient-emerald);
  color: var(--text-inverse);
  box-shadow: var(--shadow-emerald);
}
.btn-primary:hover:not(:disabled){ background: linear-gradient(160deg, var(--emeraude), var(--emeraude-dark)); box-shadow: 0 16px 36px rgba(10,71,53,.30); }

.btn-accent{ background: var(--gradient-gold); color:#3A2E05; box-shadow: var(--shadow-gold); }
.btn-accent:hover:not(:disabled){ filter:brightness(.97); box-shadow: 0 18px 38px rgba(169,130,46,.30); }

.btn-outline{
  background: var(--bg-surface);
  color: var(--emeraude);
  border: 1.5px solid var(--border-emerald);
}
.btn-outline:hover:not(:disabled){ background: var(--emeraude-light); border-color: var(--emeraude-mid); }

.btn-danger{ background: var(--color-danger); color: var(--text-inverse); box-shadow: 0 12px 26px rgba(168,54,42,.22); }
.btn-danger:hover:not(:disabled){ filter:brightness(.93); }

.btn-ghost{
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled){ background: var(--bg-muted); color: var(--text-main); }

.btn-icon{
  width:40px; height:40px; padding:0; border-radius:50%; border: 0;
  background: var(--bg-muted); color: var(--text-main);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn-icon:hover:not(:disabled){ background: var(--border-soft); transform: scale(1.06); }
.btn-icon:active:not(:disabled){ transform: scale(.94); }

.btn-sm{ padding: 8px 14px; font-size:13px; }
.btn-block{ width:100%; }

/* ============================================================
   CHAMPS DE FORMULAIRE
   ============================================================ */
.field{ margin-bottom: 18px; text-align:left; }
.field label{
  display:block;
  font-size: 13px;
  font-weight:700;
  color: var(--text-main);
  margin-bottom:6px;
  letter-spacing: -.005em;
}
.field .optional-tag{ font-weight:400; font-style:italic; color: var(--text-soft); }

.field input[type=text],
.field input[type=tel],
.field input[type=password],
.field input[type=date],
.field input[type=time],
.field input[type=number],
.field input[type=search]{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  background: var(--bg-surface);
  color: var(--text-main);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input::placeholder{ color: var(--text-soft); }
.field input:focus{
  outline:none;
  border-color: var(--emeraude-mid);
  box-shadow: 0 0 0 4px var(--emeraude-light);
}
.field .hint{ font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.5; }
.field .error-msg{ font-size:12px; color: var(--color-danger); margin-top:6px; display:none; font-weight:600; }
.field.has-error input{ border-color: var(--color-danger); }
.field.has-error .error-msg{ display:block; }

/* ============================================================
   TOASTS
   ============================================================ */
#toast-container{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  width: min(92vw, 420px);
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:11px;
  background: #211F19;
  color:#fff;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  font-weight: 500;
  animation: toast-in .32s cubic-bezier(.22,1.4,.36,1);
  border-left: 3px solid var(--emeraude-mid);
}
.toast.toast-success{ border-left-color: var(--emeraude-mid); }
.toast.toast-error{ border-left-color: var(--color-danger); }
.toast.toast-warn{ border-left-color: var(--or-shine); }
.toast .mio{ font-size:19px; flex-shrink:0; }
.toast.hide{ animation: toast-out .18s ease-in forwards; }

@keyframes toast-in{ from{opacity:0; transform:translateY(-10px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes toast-out{ to{opacity:0; transform:translateY(-10px);} }

/* ============================================================
   MODALES
   ============================================================ */
.modal-overlay{
  position: fixed; inset:0;
  background: rgba(20,17,10,.55);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  z-index: 1000;
  opacity:0;
  visibility:hidden;
  transition: opacity var(--transition);
  backdrop-filter: blur(6px);
}
.modal-overlay.open{ opacity:1; visibility:visible; }

.modal{
  position: relative;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y:auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-lg);
  padding: 30px 28px 24px;
  transform: translateY(16px) scale(.98);
  transition: transform var(--transition-spring), opacity var(--transition-slow);
}
.modal-overlay.open .modal{ transform: translateY(0) scale(1); }

/* Liseré signature en tête de modale, au lieu d'une simple bordure de
   couleur : le même dégradé émeraude → or → sauge que la sidebar et le
   hero, pour que chaque fenêtre rappelle discrètement l'identité. */
/* .modal::before{
  content:'';
  position: absolute; top:0; left:0; right:0; height:4px;
  background: var(--gradient-signature);
} */

.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 18px;
}
.modal-header h3{
  font-size: 19px;
  display:flex;
  align-items:center;
  gap:10px;
}
.modal-close{
  background: var(--bg-muted); border:none; cursor:pointer;
  color: var(--text-muted);
  width: 30px; height:30px; border-radius:50%;
  font-size: 19px;
  line-height:1;
  flex-shrink:0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.modal-close:hover{ color: var(--text-main); background: var(--border-soft); transform: rotate(90deg); }

.modal-actions{
  display:flex;
  gap:10px;
  margin-top: 22px;
}
.modal-actions .btn{ flex:1; }

/* Icône de modale portée par un badge circulaire teinté plutôt
   qu'une couleur brute inline (voir index.php : on garde le mio
   inline existant, ce badge habille visuellement l'ensemble h3). */
.modal-header h3 .mio{
  width: 34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--bg-muted);
  font-size:19px !important;
  vertical-align: middle !important;
}

/* ============================================================
   LOADER (spinner pour actions ponctuelles)
   ============================================================ */
.spinner{
  width:18px; height:18px;
  border-radius:50%;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
  display:inline-block;
}
.spinner.spinner-dark{
  border-color: rgba(10,71,53,.18);
  border-top-color: var(--color-primary);
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.page-loader{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-page);
  z-index: 2000;
}
.page-loader .spinner{ width:34px; height:34px; border-width:3.5px; }

/* ============================================================
   SKELETON (chargement de listes/pages)
   ============================================================ */
.skeleton{
  background: linear-gradient(100deg, var(--bg-muted) 30%, #EFE9D8 50%, var(--bg-muted) 70%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shine{
  from{ background-position: 150% 0; }
  to{ background-position: -50% 0; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state{
  text-align:center;
  padding: 52px 20px;
  color: var(--text-muted);
}
.empty-state .mio{
  font-size:26px;
  color: var(--emeraude);
  margin-bottom:14px;
  width: 56px; height:56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: var(--emeraude-light);
}
.empty-state p{ margin:0; font-size:14px; max-width: 320px; margin-inline:auto; }

/* ============================================================
   BADGES / PUCES DE STATUT
   ============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight:700;
}
.badge-pending{ background:var(--or-light); color:#6B5116; }
.badge-confirmed{ background:var(--emeraude-light); color:var(--emeraude-dark); }
.badge-declined{ background:var(--terracotta-light); color:var(--terracotta-dark); }
.badge-definitive{ background: var(--emeraude-dark); color: var(--or-light); }

/* ============================================================
   ORNEMENTS PARTAGÉS (dividers floraux, effet or)
   ============================================================ */
.elegant-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin: 18px auto;
  max-width: 260px;
}
.elegant-divider::before, .elegant-divider::after{
  content:'';
  height:1px;
  flex:1;
  background: linear-gradient(to right, transparent, rgba(169,130,46,.5), transparent);
}
.elegant-divider svg{ flex-shrink:0; }

/* Variante "brin discret" : une petite icône végétale (sauge) plutôt
   qu'un simple losange, posée entre deux grandes sections. À utiliser
   avec parcimonie — un seul par transition de section, jamais en
   répétition décorative. */
.elegant-divider .flourish{
  flex-shrink:0;
  width:15px; height:15px;
  color: var(--sauge-dark);
  opacity:.6;
  display:flex;
}
.elegant-divider .flourish svg{ width:100%; height:100%; display:block; }

.gold-text{
  background: linear-gradient(135deg, var(--or-dark), var(--or-shine), var(--or-dark));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sauge-text{ color: var(--sauge-dark); }