/* ============================================================
   DESIGN SYSTEM — Club Saint Barth Jujitsu
   Palette : Caraïbes sobres
   Version : 1.0 — 29/04/2026
   Mobile-first : 380px → 768px → 1200px
   ============================================================ */

:root {
  --couleur-primaire:        #1E3A5F;
  --couleur-primaire-hover:  #162d4a;
  --couleur-accent:          #2EC4B6;
  --couleur-accent-hover:    #25a99d;
  --couleur-secondaire:      #F4E8D0;
  --couleur-fond-page:       #F9FAFB;
  --couleur-fond-card:       #FFFFFF;
  --couleur-fond-header:     #1E3A5F;
  --couleur-rouge:           #DC2626;
  --couleur-bleu:            #2563EB;
  --couleur-vert:            #16A34A;
  --couleur-noir-statut:     #1F2937;
  --couleur-succes:          #16A34A;
  --couleur-erreur:          #DC2626;
  --couleur-warning-fond:    #FFF3CD;
  --couleur-warning-bord:    #FFC107;
  --couleur-info-fond:       #E8F4F8;
  --couleur-info-bord:       #3498DB;
  --texte-principal:         #111827;
  --texte-secondaire:        #4B5563;
  --texte-discret:           #9CA3AF;
  --texte-sur-primaire:      #FFFFFF;
  --texte-sur-sable:         #633806;
  --bord-couleur:            #E5E7EB;
  --bord-couleur-forte:      #D1D5DB;
  --rayon-sm:   4px;
  --rayon-md:   6px;
  --rayon-lg:   8px;
  --espace-xs:  4px;
  --espace-sm:  8px;
  --espace-md:  16px;
  --espace-lg:  24px;
  --espace-xl:  40px;
  --font-famille:  Arial, sans-serif;
  --font-taille:   15px;
  --font-ligne:    1.5;
  --largeur-etroite:   600px;
  --largeur-normale:   1100px;
  --largeur-large:    1400px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-taille); -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-famille); font-size: var(--font-taille); line-height: var(--font-ligne); color: var(--texte-principal); background-color: var(--couleur-fond-page); padding: var(--espace-md); }

h1 { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: bold; color: var(--couleur-primaire); margin-bottom: var(--espace-md); }
h2 { font-size: clamp(1.1rem, 3vw, 1.3rem); font-weight: bold; color: var(--couleur-primaire); border-bottom: 2px solid var(--couleur-primaire); padding-bottom: var(--espace-xs); margin-top: var(--espace-xl); margin-bottom: var(--espace-md); }
h3 { font-size: 0.9rem; font-weight: bold; color: var(--texte-secondaire); margin-bottom: var(--espace-sm); }
p { margin-bottom: var(--espace-sm); color: var(--texte-secondaire); }
hr { border: none; border-top: 1px solid var(--bord-couleur); margin: var(--espace-lg) 0; }
a { color: var(--couleur-primaire); text-decoration: none; }
a:hover { text-decoration: underline; }

.container       { width: 100%; max-width: var(--largeur-normale); margin: 0 auto; padding: var(--espace-md); }
.container-large { width: 100%; max-width: var(--largeur-large);   margin: 0 auto; padding: var(--espace-md); }
.container-etroit{ width: 100%; max-width: var(--largeur-etroite); margin: 0 auto; padding: var(--espace-md); }

.sbj-header { background-color: var(--couleur-fond-header); padding: var(--espace-sm) var(--espace-md); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--espace-sm); margin-bottom: var(--espace-lg); }
.sbj-header .titre-site { color: var(--texte-sur-primaire); font-weight: bold; font-size: 1.1rem; }
.sbj-header .badge-saison { color: var(--couleur-secondaire); font-size: 0.85rem; }

.bouton, a.bouton, button.bouton { display: inline-block; padding: var(--espace-sm) var(--espace-md); background-color: var(--couleur-primaire); color: var(--texte-sur-primaire) !important; border: none; border-radius: var(--rayon-md); cursor: pointer; font-size: 0.9rem; font-family: var(--font-famille); text-decoration: none !important; margin: var(--espace-xs); transition: background-color 0.15s ease; white-space: nowrap; }
.bouton:hover, a.bouton:hover, button.bouton:hover { background-color: var(--couleur-primaire-hover); text-decoration: none !important; }
.bouton-accent, a.bouton-accent { background-color: var(--couleur-accent); color: #04342C !important; }
.bouton-accent:hover, a.bouton-accent:hover { background-color: var(--couleur-accent-hover); }
.bouton-vert, a.bouton-vert { background-color: var(--couleur-vert); color: var(--texte-sur-primaire) !important; }
.bouton-vert:hover { background-color: #15803D; }
.bouton-rouge, a.bouton-rouge, a.deconnexion { background-color: var(--couleur-erreur); color: var(--texte-sur-primaire) !important; }
.bouton-rouge:hover, a.bouton-rouge:hover, a.deconnexion:hover { background-color: #B91C1C; }
.bouton-gris, a.bouton-gris, a.parametres { background-color: #6B7280; color: var(--texte-sur-primaire) !important; }
.bouton-gris:hover, a.bouton-gris:hover, a.parametres:hover { background-color: #4B5563; }
.bouton-sm { padding: 3px 10px; font-size: 0.8rem; }
.boutons-groupe { display: flex; flex-wrap: wrap; gap: var(--espace-xs); margin: var(--espace-md) 0; }

.sbj-table { width: 100%; border-collapse: collapse; margin-bottom: var(--espace-lg); background: var(--couleur-fond-card); font-size: 0.9rem; }
.sbj-table th { background-color: var(--couleur-primaire); color: var(--texte-sur-primaire); padding: var(--espace-sm) var(--espace-md); text-align: left; font-weight: bold; white-space: nowrap; }
.sbj-table td { padding: var(--espace-sm) var(--espace-md); border-bottom: 1px solid var(--bord-couleur); vertical-align: middle; }
.sbj-table tr:hover { background-color: #F8FAFC; }
.sbj-table tr:last-child td { border-bottom: none; }
.sbj-table tr.total td { font-weight: bold; background-color: var(--couleur-secondaire); }
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bord-couleur); border-radius: var(--rayon-lg); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--espace-md); margin: var(--espace-md) 0; }
.card { background-color: var(--couleur-fond-card); border: 1px solid var(--bord-couleur); border-radius: var(--rayon-lg); padding: var(--espace-md); }
.card h3 { font-size: 0.8rem; color: var(--texte-discret); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--espace-xs); }
.card .chiffre { font-size: 1.8rem; font-weight: bold; color: var(--couleur-primaire); }
.card .sous { font-size: 0.8rem; color: var(--texte-discret); margin-top: var(--espace-xs); }
.section-card { background-color: var(--couleur-fond-card); border: 1px solid var(--bord-couleur); border-radius: var(--rayon-lg); padding: var(--espace-lg); margin-bottom: var(--espace-lg); }

.form-groupe { margin-bottom: var(--espace-md); }
.form-groupe label { display: block; font-weight: bold; font-size: 0.85rem; color: var(--texte-secondaire); margin-bottom: var(--espace-xs); }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], input[type="tel"], select, textarea { width: 100%; padding: var(--espace-sm); border: 1px solid var(--bord-couleur-forte); border-radius: var(--rayon-md); font-family: var(--font-famille); font-size: 0.9rem; color: var(--texte-principal); background-color: var(--couleur-fond-card); transition: border-color 0.15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--couleur-accent); box-shadow: 0 0 0 2px rgba(46,196,182,0.2); }
textarea { min-height: 100px; resize: vertical; }
input[type="checkbox"] { width: auto; margin-right: var(--espace-xs); accent-color: var(--couleur-primaire); }

.rouge  { color: var(--couleur-rouge);       font-weight: bold; }
.bleu   { color: var(--couleur-bleu);        font-weight: bold; }
.vert   { color: var(--couleur-vert); }
.noir   { color: var(--couleur-noir-statut); opacity: 0.6; }
.badge-rouge { background: #FCEBEB; color: #501313; padding: 2px 8px; border-radius: var(--rayon-sm); font-size: 0.8rem; font-weight: bold; white-space: nowrap; }
.badge-bleu  { background: #E6F1FB; color: #042C53; padding: 2px 8px; border-radius: var(--rayon-sm); font-size: 0.8rem; font-weight: bold; white-space: nowrap; }
.badge-vert  { background: #DCFCE7; color: #14532D; padding: 2px 8px; border-radius: var(--rayon-sm); font-size: 0.8rem; white-space: nowrap; }
.badge-noir  { background: #E5E7EB; color: #1F2937; padding: 2px 8px; border-radius: var(--rayon-sm); font-size: 0.8rem; white-space: nowrap; }
.paye    { color: var(--couleur-vert);  font-weight: bold; }
.impaye  { color: var(--couleur-rouge); font-weight: bold; }
.non_du  { color: var(--texte-discret); font-style: italic; }
.ok         { color: var(--couleur-vert);  font-weight: bold; }
.en_attente { color: #D97706; font-weight: bold; }

.message-succes { color: var(--couleur-succes); font-weight: bold; padding: var(--espace-sm) var(--espace-md); background: #DCFCE7; border-left: 4px solid var(--couleur-succes); border-radius: var(--rayon-md); margin: var(--espace-md) 0; }
.message-erreur { color: var(--couleur-erreur); font-weight: bold; padding: var(--espace-sm) var(--espace-md); background: #FCEBEB; border-left: 4px solid var(--couleur-erreur); border-radius: var(--rayon-md); margin: var(--espace-md) 0; }
.succes { color: var(--couleur-succes); font-weight: bold; }
.erreur { color: var(--couleur-erreur); font-weight: bold; }
.info-box { background: var(--couleur-info-fond); border-left: 4px solid var(--couleur-info-bord); padding: var(--espace-sm) var(--espace-md); border-radius: var(--rayon-md); margin: var(--espace-md) 0; font-size: 0.9rem; }
.warning-box { background: var(--couleur-warning-fond); border-left: 4px solid var(--couleur-warning-bord); padding: var(--espace-sm) var(--espace-md); border-radius: var(--rayon-md); margin: var(--espace-md) 0; font-size: 0.9rem; }
.destinataires { background: var(--couleur-secondaire); padding: var(--espace-sm) var(--espace-md); border-radius: var(--rayon-md); margin-bottom: var(--espace-md); font-size: 0.85rem; color: var(--texte-sur-sable); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--texte-discret); }
.text-small  { font-size: 0.85rem; }
.text-bold   { font-weight: bold; }
.mt-sm { margin-top: var(--espace-sm); } .mt-md { margin-top: var(--espace-md); } .mt-lg { margin-top: var(--espace-lg); }
.mb-sm { margin-bottom: var(--espace-sm); } .mb-md { margin-bottom: var(--espace-md); } .mb-lg { margin-bottom: var(--espace-lg); }
.actif  { color: var(--couleur-vert); font-weight: bold; }
.inactif { color: var(--couleur-erreur); }
.filtre-section { display: flex; align-items: center; gap: var(--espace-sm); flex-wrap: wrap; margin-bottom: var(--espace-md); }
.filtre-section label { font-weight: bold; font-size: 0.85rem; color: var(--texte-secondaire); }
.filtre-section select { width: auto; padding: 4px 8px; }

@media (max-width: 480px) {
  body { padding: var(--espace-sm); }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; margin-top: var(--espace-lg); }
  .sbj-header { flex-direction: column; align-items: flex-start; gap: var(--espace-xs); }
  .bouton, a.bouton, button.bouton { display: block; width: 100%; text-align: center; margin: var(--espace-xs) 0; }
  .sbj-table .bouton, .sbj-table a.bouton { display: inline-block; width: auto; padding: 3px 8px; font-size: 0.75rem; }
  .boutons-groupe { flex-direction: column; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: var(--espace-sm); }
  .card .chiffre { font-size: 1.4rem; }
  input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="password"], input[type="tel"], select, textarea { font-size: 16px; }
  .section-card { padding: var(--espace-md); }
  .filtre-section { flex-direction: column; align-items: flex-start; }
  .filtre-section select { width: 100%; }
}
@media (min-width: 481px) and (max-width: 768px) {
  body { padding: var(--espace-md); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .bouton, a.bouton, button.bouton { display: inline-block; width: auto; }
}
@media (min-width: 769px) {
  body { padding: var(--espace-lg) var(--espace-xl); }
  .container { padding: var(--espace-lg); }
  .container-large { padding: var(--espace-lg); }
  .cards { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}