/* =================================================================================
   KAPSUL — COMPOSANTS
   Dépend de tokens.css. Composants réutilisables sur toutes les pages.
   ================================================================================= */

/* --- Polices auto-hébergées (fichiers à déposer dans assets/fonts/ — voir le README) ---
   Si les .woff2 ne sont pas encore présents, le rendu retombe proprement sur la
   police système (system-ui), donc rien ne casse. */
@font-face{ font-family:"Outfit"; src:url("../fonts/outfit-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Outfit"; src:url("../fonts/outfit-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Outfit"; src:url("../fonts/outfit-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Outfit"; src:url("../fonts/outfit-800.woff2") format("woff2"); font-weight:800; font-display:swap; }
@font-face{ font-family:"Manrope"; src:url("../fonts/manrope-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Manrope"; src:url("../fonts/manrope-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Manrope"; src:url("../fonts/manrope-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

/* --- Reset / bases --- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body); color:var(--c-text); background:var(--c-bg);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;   /* la page remplit toujours l'écran : pas de blanc en bas */
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--c-navy); line-height:1.1; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:32px; }

/* --- Header : barre blanche pleine largeur, contenu centré --- */
.site-header{ background:#fff; position:sticky; top:0; z-index:10; }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin-inline:auto; padding:20px 32px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo-mark{ width:38px; height:38px; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--c-navy); letter-spacing:-.01em; }

.main-nav{ display:flex; gap:42px; }
.main-nav a{ font-weight:600; font-size:16px; color:var(--c-navy); padding-bottom:6px; position:relative; }
.main-nav a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c-orange); border-radius:2px; }
.main-nav a:not(.is-active):hover{ color:var(--c-orange); }

.header-right{ display:flex; align-items:center; gap:20px; }
.lang{ font-weight:700; color:var(--c-navy); font-size:15px; cursor:pointer; }
.btn-login{
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--c-navy);
  font-weight:600; font-size:15px; padding:11px 22px; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-soft); border:1px solid rgba(20,37,61,.06);
}
.btn-login:hover{ background:var(--c-surface-2); }

/* --- Héro : barre blanche en haut, dégradé qui s'assombrit pour le titre blanc --- */
.hero{
  position:relative; flex:1 0 auto; min-height:600px; margin-top:-1px;   /* -1px : masque le liseré gris à la jonction avec le header */
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.60) 12%, rgba(20,37,61,.38) 46%, rgba(20,37,61,.50) 70%, rgba(20,37,61,.28) 100%),
    var(--hero-image);
  background-size:cover; background-position:center 40%;
}
.hero-inner{ padding-top:40px; }
.hero h1{ font-size:clamp(40px,5.4vw,76px); font-weight:800; letter-spacing:-.02em; color:#fff; }
.hero-rule{ width:46px; height:5px; background:var(--c-orange); border-radius:3px; margin:26px auto 30px; }

/* --- Boutons réutilisables --- */
.btn{
  display:inline-flex; align-items:center; gap:14px; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:18px; border:none;
  border-radius:var(--radius-pill); padding:18px 38px;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn--sm{ font-size:15px; padding:11px 22px; }
.btn--primary{ background:var(--c-orange); color:#fff; box-shadow:0 16px 30px -14px rgba(241,90,36,.7); }
.btn--primary:hover{ background:var(--c-orange-dark); transform:translateY(-2px); }
.btn--secondary{ background:#fff; color:var(--c-navy); border:1.5px solid var(--c-border); box-shadow:var(--shadow-soft); }
.btn--secondary:hover{ border-color:var(--c-orange); color:var(--c-orange); }

/* --- Champs de formulaire (inscription, réservation, profil) --- */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:600; color:var(--c-navy); font-size:15px; }
.field label .req{ color:var(--c-orange); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:16px; color:var(--c-text); background:#fff;
  border:1px solid var(--c-border); border-radius:var(--radius-sm); padding:13px 15px; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--c-orange); box-shadow:0 0 0 3px rgba(241,90,36,.15);
}
.field textarea{ resize:vertical; min-height:96px; }

/* --- Carte de session --- */
.session-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:20px 22px; display:flex; align-items:center; gap:18px;
}
.session-card .time{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--c-navy); }
.session-card .time .ico{ color:var(--c-orange); }
.session-card .places{ font-size:14px; color:var(--c-muted); line-height:1.3; }
.session-card .places b{ color:var(--c-orange); font-size:17px; }
.session-card .btn{ margin-left:auto; }

/* --- États des jours de calendrier --- */
.cal-day{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:18px; }
.cal-day.is-available{ background:var(--c-orange-soft); color:var(--c-orange-dark); cursor:pointer; }
.cal-day.is-active{ background:var(--c-orange); color:#fff; }
.cal-day.is-disabled{ background:transparent; color:#C2C7D0; }

/* --- Footer --- */
.site-footer{ background:var(--c-navy); color:#fff; text-align:center; padding:30px 16px; font-size:14px; }
.site-footer a{ color:rgba(255,255,255,.78); }
.site-footer a:hover{ color:#fff; }

/* --- Responsive (base ; prévoir un menu burger mobile) --- */
@media (max-width:860px){
  .main-nav{ display:none; }
  .hero{ min-height:560px; }
}

/* --- Fond flouté + voile blanc, partagé par les pages Réservation et Formulaire --- */
.reservation-section, .form-section{
  position:relative; flex:1 0 auto; padding:48px 0; margin-top:-1px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;   /* contenu centré au milieu de la hauteur */
}
.reservation-section::before, .form-section::before{
  content:""; position:absolute; inset:-24px; z-index:0;
  background:var(--hero-image); background-size:cover; background-position:center;
  filter:blur(14px);
}
.reservation-section::after, .form-section::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.58) 16%, rgba(255,255,255,.42) 100%);
}
.reservation-section .reservation-grid,
.form-section .form-card,
.form-section .confirm-card{ position:relative; z-index:1; }

/* --- Carte du formulaire de réservation --- */
.form-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:34px 38px; max-width:860px; width:100%; margin-inline:auto;
}
.form-card h1{ font-size:30px; margin-bottom:22px; }

.recap{
  background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--radius-md);
  padding:18px 22px; display:flex; gap:34px; flex-wrap:wrap; align-items:center; margin-bottom:26px;
}
.recap .lbl{ font-size:13px; color:var(--c-muted); display:block; margin-bottom:4px; }
.recap .val{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--c-navy); }
.recap .val .ico{ color:var(--c-orange); }

.form-section-title{ font-weight:600; color:var(--c-navy); margin:24px 0 14px; padding-top:22px; border-top:1px solid var(--c-border); }
.participants{ display:flex; flex-direction:column; gap:20px; }
.participant .pname{ font-weight:600; color:var(--c-navy); margin-bottom:10px; }
.participant .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-actions{ margin-top:28px; }
.btn--block{ width:100%; justify-content:center; }
@media (max-width:600px){ .participant .row{ grid-template-columns:1fr; } }
.reservation-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; }
.card{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:26px 28px; }

.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-head h2{ font-size:22px; }
.cal-nav{ width:40px; height:40px; border-radius:50%; border:1px solid var(--c-border); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--c-navy); }
.cal-nav:hover{ border-color:var(--c-orange); color:var(--c-orange); }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal-weekdays span{ text-align:center; font-size:12px; letter-spacing:.06em; color:var(--c-muted); padding:6px 0 12px; text-transform:uppercase; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px 0; }
.cal-cell{ display:flex; align-items:center; justify-content:center; padding:4px 0; }
.cal-cell .num{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--c-navy); }
.cal-cell.is-muted .num{ color:#C2C7D0; }                         /* hors mois / passé */
.cal-cell.is-available .num{ background:var(--c-orange-soft); color:var(--c-orange-dark); cursor:pointer; }
.cal-cell.is-active .num{ background:var(--c-orange); color:#fff; cursor:pointer; }

.sessions-panel h2{ font-size:22px; margin-bottom:4px; }
.sessions-panel h2 .accent{ color:var(--c-orange); }
.sessions-panel .empty{ color:var(--c-muted); padding:24px 0; }
.session-row{ display:flex; align-items:center; gap:18px; padding:16px 2px; border-bottom:1px solid var(--c-border); }
.session-row:last-child{ border-bottom:none; }
.session-row .time{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--c-navy); min-width:118px; }
.session-row .time .ico{ color:var(--c-orange); }
.session-row .places{ font-size:14px; color:var(--c-muted); line-height:1.3; }
.session-row .places b{ color:var(--c-orange); font-size:16px; }
.session-row .btn{ margin-left:auto; }

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

/* --- Page de confirmation de réservation --- */
.confirm-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:42px 40px; max-width:620px; width:100%;
  margin-inline:auto; text-align:center;
}
.confirm-icon{
  width:84px; height:84px; border-radius:50%; background:var(--c-orange-soft); color:var(--c-orange);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px;
}
.confirm-card h1{ font-size:28px; margin-bottom:10px; }
.confirm-card .lead{ color:var(--c-muted); margin-bottom:26px; }
.confirm-details{
  background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--radius-md);
  padding:18px 22px; text-align:left; display:flex; flex-direction:column; gap:12px; margin-bottom:26px;
}
.confirm-details .line{ display:flex; align-items:center; gap:10px; color:var(--c-navy); font-weight:600; }
.confirm-details .line .ico{ color:var(--c-orange); display:inline-flex; }
.confirm-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.confirm-mail{ font-size:14px; color:var(--c-muted); margin-top:18px; }

/* --- Authentification : connexion, inscription, mot de passe oublié --- */
.auth-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:36px 38px; max-width:440px; width:100%; margin-inline:auto;
  position:relative; z-index:1;
}
.auth-card.wide{ max-width:880px; }                 /* inscription (formulaire long) */
.auth-card h1{ font-size:26px; text-align:center; margin-bottom:6px; }
.auth-card.wide h1{ text-align:left; }
.auth-sub{ color:var(--c-muted); text-align:center; margin-bottom:24px; }
.auth-card > .field + .field{ margin-top:16px; }   /* espacement vertical UNIQUEMENT pour les champs empilés (connexion), pas dans la grille */
.field-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 22px; align-items:start; }
@media (max-width:820px){ .field-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .field-grid{ grid-template-columns:1fr; } }
.checkbox-row{ display:flex; align-items:center; gap:9px; margin:18px 0; font-size:14px; color:var(--c-text); }
.checkbox-row input{ width:18px; height:18px; accent-color:var(--c-orange); }
.auth-links{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:20px; font-size:14px; }
.auth-links a{ color:var(--c-orange); font-weight:600; }

/* --- Espace personnel : menu latéral + contenu --- */
.account-section{ flex:1 0 auto; background:var(--c-surface-2); padding:48px 0; }
.account-layout{ display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:start; }
.account-nav{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); padding:14px; display:flex; flex-direction:column; gap:4px;
}
.account-nav a{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:var(--radius-sm); color:var(--c-navy); font-weight:600; font-size:15px; }
.account-nav a .ico{ color:var(--c-muted); display:inline-flex; }
.account-nav a:hover{ background:var(--c-surface-2); }
.account-nav a.is-active{ background:var(--c-orange-soft); color:var(--c-orange-dark); }
.account-nav a.is-active .ico{ color:var(--c-orange); }
.account-nav a.logout{ color:var(--c-muted); margin-top:6px; border-top:1px solid var(--c-border); border-radius:0; padding-top:14px; }
.account-content > h1{ font-size:26px; margin-bottom:18px; }
.resa-list{ display:flex; flex-direction:column; gap:14px; }
.resa-item{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); padding:18px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.resa-item .when{ font-family:var(--font-display); font-weight:700; color:var(--c-navy); font-size:18px; min-width:170px; }
.resa-item .meta{ color:var(--c-muted); font-size:14px; }
.resa-item .pdf{ margin-left:auto; }
@media (max-width:760px){ .account-layout{ grid-template-columns:1fr; } }

/* =================================================================================
   BACK-OFFICE (administration)
   ================================================================================= */
.admin-shell{ flex:1; display:grid; grid-template-columns:252px 1fr; }

/* Menu latéral */
.admin-side{ background:var(--c-navy); color:#fff; padding:20px 14px; display:flex; flex-direction:column; gap:5px; }
.admin-brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 18px; }
.admin-brand .brand-name{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:22px; }
.admin-side a{ display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:var(--radius-sm); color:rgba(255,255,255,.82); font-weight:600; font-size:15px; }
.admin-side a .ico{ display:inline-flex; opacity:.9; }
.admin-side a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-side a.is-active{ background:var(--c-orange); color:#fff; }
.admin-side a.is-active .ico{ opacity:1; }
.admin-side .spacer{ flex:1; }
.admin-side .logout{ color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.12); border-radius:0; margin-top:6px; padding-top:16px; }

/* Zone principale */
.admin-main{ background:var(--c-surface-2); display:flex; flex-direction:column; min-width:0; }
.admin-topbar{ background:#fff; border-bottom:1px solid var(--c-border); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
.admin-topbar h1{ font-size:22px; }
.admin-topbar .who{ color:var(--c-muted); font-size:14px; display:flex; align-items:center; gap:8px; }
.admin-body{ padding:28px 32px; }

/* Cartes statistiques */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:26px; }
.stat{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); padding:18px 20px; }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--c-navy); line-height:1.1; }
.stat .lbl{ color:var(--c-muted); font-size:14px; margin-top:4px; }

/* Panneaux + tableaux */
.panel{ background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); overflow:hidden; }
.panel + .panel{ margin-top:22px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--c-border); flex-wrap:wrap; }
.panel-head h2{ font-size:17px; }
.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th{ text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-muted); padding:12px 20px; border-bottom:1px solid var(--c-border); white-space:nowrap; }
.table td{ padding:13px 20px; border-bottom:1px solid var(--c-border); font-size:14px; color:var(--c-text); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table tbody tr:hover td{ background:var(--c-surface-2); }
.table .num-strong{ font-family:var(--font-display); font-weight:700; color:var(--c-navy); }

/* Badges d'état */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; }
.badge--ok{ background:#E4F6EC; color:#1E7D45; }
.badge--off{ background:#FDE7E7; color:#B42318; }
.badge--soft{ background:var(--c-orange-soft); color:var(--c-orange-dark); }
.badge--muted{ background:var(--c-surface-2); color:var(--c-muted); }

/* Interrupteur (présence / paiement / blocage) */
.toggle{ position:relative; display:inline-block; width:42px; height:24px; vertical-align:middle; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle .slider{ position:absolute; inset:0; background:#CBD2DB; border-radius:999px; transition:.2s; cursor:pointer; }
.toggle .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .slider{ background:var(--c-orange); }
.toggle input:checked + .slider::before{ transform:translateX(18px); }

/* Barre d'outils / filtres */
.toolbar{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px; }
.toolbar .field{ min-width:180px; margin:0; }

/* Sélecteur de jours (récurrence hebdo) */
.weekdays{ display:flex; gap:8px; flex-wrap:wrap; }
.weekdays label{ cursor:pointer; }
.weekdays input{ position:absolute; opacity:0; }
.weekdays span{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:38px; border:1px solid var(--c-border); border-radius:var(--radius-sm); font-weight:600; color:var(--c-navy); font-size:14px; }
.weekdays input:checked + span{ background:var(--c-orange); border-color:var(--c-orange); color:#fff; }

@media (max-width:900px){
  .admin-shell{ grid-template-columns:1fr; }
  .admin-side{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .admin-side .admin-brand{ width:100%; padding-bottom:8px; }
  .admin-side .spacer{ display:none; }
  .admin-side .logout{ border-top:none; margin:0; padding-top:11px; }
}