/* ==========================================================================
   Fit & Swim — module de réservation · front
   --------------------------------------------------------------------------
   AUTONOME. La v0.1 supposait que .rescard, .datebox, .bdg, .btn2… existaient
   déjà « dans le design system du site ». Faux : ces classes ne vivaient que
   dans le <style> des maquettes .dc.html. Résultat, les pages sortaient nues.
   Tout est donc redéfini ici.

   Deux règles tenues :
   - TOUT est scopé sous .fsb — ce fichier ne peut rien casser ailleurs.
   - Les tokens passent par var(--x, repli) : on suit le thème s'il est là,
     on reste correct s'il ne l'est pas.
   ========================================================================== */

.fsb {
  --fsb-navy:    var(--navy, #023C4F);
  --fsb-navy-l:  var(--navy-l, #33586A);
  --fsb-cream:   var(--cream, #F1F5E8);
  --fsb-cream-d: var(--cream-d, #DCE4D2);
  --fsb-sand:    var(--sand, #EDCE7A);
  --fsb-sand-d:  var(--sand-d, #E4BF57);
  --fsb-sand-t:  var(--sand-txt, #8A6D1F);
  --fsb-sage:    var(--sage, #A3BCB9);
  --fsb-muted:   var(--muted, #5C7683);
  --fsb-disp:    var(--disp, 'Ideal Gothic', Anton, 'Archivo Black', sans-serif);
  --fsb-body:    var(--body, Arial, Helvetica, system-ui, sans-serif);
  --fsb-danger:  #B14E36;

  font-family: var(--fsb-body);
  color: var(--fsb-navy);
  font-size: 16px;
  line-height: 1.6;
}

/* ── Typo ─────────────────────────────────────────────────────────────── */
.fsb .disp { font-family: var(--fsb-disp); font-weight: 700; text-transform: uppercase; }
.fsb .kick { font-family: var(--fsb-disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; font-size: 12.5px; color: var(--fsb-sand-t); }
.fsb .h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1; margin: 6px 0 8px; }
.fsb .lead { color: var(--fsb-navy-l); margin: 0 0 8px; }
.fsb .seclab { font-size: 20px; letter-spacing: .05em; margin: 40px 0 14px; }
.fsb .meta { font-size: 14px; color: var(--fsb-muted); }
.fsb a { color: var(--fsb-navy); }
.fsb a:hover { color: var(--fsb-sand-t); }

/* ── Utilitaires ──────────────────────────────────────────────────────── */
.fsb .m0 { margin: 0; }
.fsb .mt16 { margin-top: 16px; }
.fsb .w100 { width: 100%; }
.fsb .fx { display: flex; }
.fsb .col { flex-direction: column; }
.fsb .gap16 { gap: 16px; }
.fsb .list { display: flex; flex-direction: column; gap: 14px; }

/* ── Boutons ──────────────────────────────────────────────────────────────
   .fsb .btn (0,2,0) : même poids que le .fs .btn du thème. Si les deux
   matchent, c'est l'ordre de chargement qui tranche — et comme ils décrivent
   le même bouton, le résultat est identique dans les deux cas. */
.fsb .btn {
  font-family: var(--fsb-disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 14px; padding: 13px 24px; border-radius: 10px;
  border: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; text-decoration: none;
  color: var(--fsb-navy); background: var(--fsb-sand);
  transition: transform .18s ease, background .18s ease;
}
.fsb .btn:hover { background: var(--fsb-sand-d); transform: translateY(-2px); color: var(--fsb-navy); }
.fsb .btn:focus-visible { outline: 3px solid var(--fsb-navy); outline-offset: 2px; }

.fsb .btn2 { background: transparent; border: 1.5px solid var(--fsb-navy); color: var(--fsb-navy); }
.fsb .btn2:hover { background: var(--fsb-navy); color: var(--fsb-cream); }

.fsb .btnd { background: transparent; border: 1.5px solid #C8A08F; color: var(--fsb-danger); }
.fsb .btnd:hover { background: var(--fsb-danger); border-color: var(--fsb-danger); color: #fff; }

/* ── Carte de réservation ─────────────────────────────────────────────── */
.fsb .rescard {
  background: #fff; border: 1.5px solid var(--fsb-cream-d); border-radius: 14px;
  padding: 24px 28px; display: grid; grid-template-columns: 86px 1fr auto;
  gap: 22px; align-items: center;
}
.fsb .rescard.past { opacity: .72; }

.fsb .datebox { background: var(--fsb-navy); color: var(--fsb-cream);
  border-radius: 12px; text-align: center; padding: 12px 8px; }
.fsb .datebox.sage { background: #C9D8D2; color: var(--fsb-navy); }
.fsb .dd { font-family: var(--fsb-disp); font-size: 28px; line-height: 1; }
.fsb .dm { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

.fsb .rtitle { font-family: var(--fsb-disp); text-transform: uppercase;
  font-size: 19px; letter-spacing: .03em; }
.fsb .rmeta { font-size: 14px; color: var(--fsb-muted); margin-top: 2px; }

.fsb .badges { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fsb .bdg { display: inline-block; border-radius: 7px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fsb .bdg.ok   { background: #E4EFE9; color: #2F6B58; }
.fsb .bdg.warn { background: #F7EDD2; color: var(--fsb-sand-t); }
.fsb .bdg.mut  { background: #EDF1E6; color: var(--fsb-muted); }
.fsb .bdg.err  { background: #F5E4DE; color: var(--fsb-danger); }

.fsb .acts { display: flex; flex-direction: column; gap: 8px;
  align-items: stretch; min-width: 172px; }
.fsb .acts form { margin: 0; }
.fsb .cancelnote { font-size: 12px; color: var(--fsb-muted); text-align: center; display: block; }

@media (max-width: 760px) {
  .fsb .rescard { grid-template-columns: 64px 1fr; padding: 18px; }
  .fsb .acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .fsb .acts form { flex: 1; }
}

/* ── Formulaires ──────────────────────────────────────────────────────── */
.fsb .card, .fsb-card { background: #fff; border: 1.5px solid var(--fsb-cream-d);
  border-radius: 14px; padding: 28px; }
.fsb-card { max-width: 520px; }

.fsb .tabs { display: flex; gap: 6px; margin-bottom: 22px;
  border-bottom: 1.5px solid var(--fsb-cream-d); }
.fsb .tabs a { padding: 10px 16px; font-family: var(--fsb-disp); text-transform: uppercase;
  letter-spacing: .06em; font-size: 13.5px; color: var(--fsb-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1.5px; text-decoration: none; }
.fsb .tabs a.on { color: var(--fsb-navy); border-bottom-color: var(--fsb-sand); }

.fsb .flab { display: block; font-size: 13px; font-weight: 700;
  color: var(--fsb-muted); margin-bottom: 6px; }
.fsb .inp { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  font-family: var(--fsb-body); border: 1.5px solid var(--fsb-cream-d);
  border-radius: 9px; background: #fff; color: var(--fsb-navy); }
.fsb .inp:focus { outline: 2px solid var(--fsb-sand); outline-offset: 1px;
  border-color: var(--fsb-sand); }

.fsb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .fsb-2col { grid-template-columns: 1fr; } }

.fsb-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px;
  color: var(--fsb-navy-l); cursor: pointer; }
.fsb-check input { margin-top: 3px; flex: none; }
.fsb-check a { text-decoration: underline; }

/* ── Messages ─────────────────────────────────────────────────────────── */
.fsb-errs { background: #F5E4DE; border: 1px solid #E3C3B8; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px; }
.fsb-errs p { margin: 0 0 4px; font-size: 14px; color: var(--fsb-danger); }
.fsb-errs p:last-child { margin-bottom: 0; }

.fsb-ok { background: #E4EFE9; border: 1px solid #C6DED3; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px; }
.fsb-ok p { margin: 0; font-size: 14px; color: #2F6B58; }

.fsb-empty { background: #fff; border: 1.5px dashed var(--fsb-cream-d);
  border-radius: 14px; padding: 34px; text-align: center; }
.fsb-empty p { margin: 0 0 16px; color: var(--fsb-muted); }

.fsb-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.fsb-row form { margin: 0; }

/* ── Honeypot ─────────────────────────────────────────────────────────────
   Surtout pas display:none : les bots courants sautent les champs cachés de
   façon évidente, justement parce que c'est le piège classique. Hors écran,
   non focusable, aria-hidden : invisible pour l'humain ET le lecteur d'écran,
   présent dans le DOM pour qui remplit tout. */
.fsb-hp { position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; }

/* ── Mon compte — en-tête ─────────────────────────────────────────────── */
.fsb-hello { display:flex; align-items:center; gap:18px; margin:0 0 28px; }
.fsb-hi-av { width:58px; height:58px; border-radius:50%; flex:none;
  background:var(--fsb-navy); color:var(--fsb-cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fsb-disp); font-size:20px; letter-spacing:.05em; }
.fsb-hi-name { font-size:26px; line-height:1.1; margin:2px 0 0; color:var(--fsb-navy); }
.fsb-hi-mail { font-size:13.5px; color:var(--fsb-muted); margin:2px 0 0; }

/* ── Mon compte — cartes de navigation ────────────────────────────────────
   La carte entière est un <a>. Un titre cliquable dans une carte qui ne l'est
   pas, c'est une cible de 200 px² au lieu de 700 : sur téléphone, ça se rate. */
.fsb-cards { display:flex; flex-direction:column; gap:12px; max-width:620px; }

.fsb .fsb-cd {
  display:flex; align-items:center; gap:18px;
  background:#fff; border:1.5px solid var(--fsb-cream-d); border-radius:14px;
  padding:20px 22px; text-decoration:none; color:var(--fsb-navy);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* .fsb a:hover passe tout en doré : on le neutralise ici, sinon la carte
   entière vire au sable au survol. */
.fsb .fsb-cd:hover {
  color:var(--fsb-navy); border-color:var(--fsb-navy);
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(2,41,58,.09);
}
.fsb .fsb-cd:focus-visible { outline:3px solid var(--fsb-sand); outline-offset:2px; }

.fsb-cd-ic { width:46px; height:46px; border-radius:11px; flex:none;
  background:#E8EEDC; color:var(--fsb-navy);
  display:flex; align-items:center; justify-content:center; }
.fsb-cd-ic.sand { background:#F7EDD2; color:var(--fsb-sand-t); }
.fsb-cd-ic svg { width:22px; height:22px; display:block; }

.fsb-cd-b { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.fsb-cd-t { font-size:17px; letter-spacing:.03em; line-height:1.2; }
.fsb-cd-d { font-size:13.5px; color:var(--fsb-muted); line-height:1.4; }

.fsb-cd-n { flex:none; min-width:24px; height:24px; padding:0 7px; border-radius:12px;
  background:var(--fsb-sand); color:var(--fsb-navy);
  font-family:var(--fsb-disp); font-size:13px;
  display:flex; align-items:center; justify-content:center; }

.fsb-cd-ar { flex:none; color:var(--fsb-sage); font-size:18px; line-height:1;
  transition:transform .18s ease, color .18s ease; }
.fsb .fsb-cd:hover .fsb-cd-ar { color:var(--fsb-navy); transform:translateX(4px); }

@media (max-width:520px) {
  .fsb .fsb-cd { padding:16px; gap:14px; }
  .fsb-cd-ar { display:none; }
}

/* ── Gestion du compte ────────────────────────────────────────────────── */
.fsb-forms { display:flex; flex-direction:column; gap:18px; max-width:560px; }
.fsb-forms .fsb-card { max-width:none; }
.fsb .fsb-forms .seclab { font-size:17px; margin:0 0 6px; }
.fsb-hint { font-size:12.5px; color:var(--fsb-muted); margin:8px 0 0; line-height:1.5; }

.fsb-back { margin:0 0 22px; }

.fsb-pending { background:#F7EDD2; border:1px solid #E6D4A2; border-radius:10px;
  padding:14px 18px; margin:0 0 22px; max-width:620px; }
.fsb-pending p { margin:0 0 6px; font-size:14px; color:var(--fsb-sand-t); line-height:1.5; }
.fsb-pending form { margin:0; }

/* Un <button> déguisé en lien : l'action modifie l'état côté serveur, donc
   c'est un POST avec nonce, pas un <a>. Un GET destructeur part tout seul au
   premier préchargeur de lien qui passe. */
.fsb-link { background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:13px; color:var(--fsb-sand-t); text-decoration:underline; }
.fsb-link:hover { color:var(--fsb-danger); }