/* =========================================================================
   PISTA — feuille de style unique
   Réservation d'un court de tennis unique · résidence San Jordi d'Alfama
   Ambiance « terre battue » : terracotta + sable/beige, sobre et moderne.
   Mobile-first. Aucune media-query pour piloter le planning : c'est planning.js
   qui pose les classes body (.mode-desktop / .mode-mobile / .planning--2cols).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Palette « terre battue » */
  --clay-50:  #fbf3ef;
  --clay-100: #f6e2d9;
  --clay-200: #eec3b2;
  --clay-300: #e0a088;
  --clay-400: #d3897a;   /* rosé clair (terre au soleil) */
  --clay-500: #c46c5c;   /* terracotta ROSÉE — signature (teinte réelle du court) */
  --clay-600: #a85348;   /* rosé profond */
  --clay-700: #7f3a30;
  --clay-800: #5f2b23;

  /* Iconiques du logo (photo du court) */
  --band:  #b84f42;      /* rouge de la bande « JORDI » — accents & soulignés */
  --cream: #f2dfc7;      /* crème du texte du logo — lumière chaude de la charte */

  /* Sable / crème */
  --sand-50:  #fdfbf7;
  --sand-100: #f9f4ec;
  --sand-200: #f1e8da;
  --sand-300: #e6d8c3;
  --sand-400: #d6c3a6;
  --sand-500: #c2ab89;

  /* Encre (bruns chauds pour le texte) */
  --ink-900: #2f2420;
  --ink-700: #4a3a34;
  --ink-500: #6d5a51;
  --ink-300: #9b8a80;

  /* Rôles sémantiques (surchargés en dark plus bas) */
  --bg:            var(--sand-100);
  --bg-raised:     var(--sand-50);
  --bg-sunken:     var(--sand-200);
  --surface:       #ffffff;
  --surface-alt:   var(--sand-100);
  --border:        var(--sand-300);
  --border-strong: var(--sand-400);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-300);

  --accent:        var(--clay-500);
  --accent-hover:  var(--clay-600);
  --accent-ink:    #ffffff;
  --accent-soft:   var(--clay-100);
  --on-header:     #fff8f3;
  --header-fill:   color-mix(in srgb, var(--accent-soft) 85%, var(--accent));

  --success:   #3f7d55;
  --success-bg:#e7f1e9;
  --danger:    #b23b32;
  --danger-bg: #f7e5e3;
  --info-bg:   var(--sand-100);

  /* Court (cellules libres) — vert « gazon fané » très discret */
  --free-tint:   #f4efe6;
  --free-hover:  #efe7d8;

  /* Espacement (échelle 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Rayons */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Ombres douces (teintées chaud, jamais noir pur) */
  --shadow-xs: 0 1px 2px rgba(76, 43, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(76, 43, 32, 0.08), 0 1px 2px rgba(76, 43, 32, 0.05);
  --shadow-md: 0 6px 18px rgba(76, 43, 32, 0.10), 0 2px 6px rgba(76, 43, 32, 0.06);
  --shadow-lg: 0 14px 40px rgba(76, 43, 32, 0.16), 0 4px 12px rgba(76, 43, 32, 0.08);

  /* Anneau de focus accessible */
  --ring: 0 0 0 3px rgba(192, 102, 76, 0.35);

  /* Typo responsive (clamp : mobile → desktop) */
  --fs-xs:   clamp(0.72rem, 0.70rem + 0.15vw, 0.80rem);
  --fs-sm:   clamp(0.82rem, 0.79rem + 0.20vw, 0.92rem);
  --fs-base: clamp(0.94rem, 0.90rem + 0.25vw, 1.05rem);
  --fs-md:   clamp(1.05rem, 0.98rem + 0.40vw, 1.20rem);
  --fs-lg:   clamp(1.25rem, 1.10rem + 0.80vw, 1.60rem);
  --fs-xl:   clamp(1.60rem, 1.30rem + 1.60vw, 2.30rem);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1080px;
  --transition: 0.2s ease;

  color-scheme: light dark;
}

/* Dark mode : on garde l'ADN terracotta, fond terre cuite très sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #211a17;
    --bg-raised:     #2a201c;
    --bg-sunken:     #1a1310;
    --surface:       #2e2420;
    --surface-alt:   #352a25;
    --border:        #43342d;
    --border-strong: #55423a;
    --text:          #f3e8e1;
    --text-muted:    #c3ab9e;
    --text-faint:    #8f786c;

    --accent:        var(--clay-400);
    --accent-hover:  var(--clay-300);
    --accent-ink:    #241512;
    --accent-soft:   #3d2a22;
    --on-header:     #fbeee6;

    --success:   #8fce9f;
    --success-bg:#233327;
    --danger:    #ef9a90;
    --danger-bg: #3a2320;
    --info-bg:   #2a201c;

    --free-tint:  #271e1a;
    --free-hover: #302420;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(207, 126, 99, 0.45);
  }
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  /* Léger dégradé de fond : lumière rasante sur la terre battue */
  background-image:
    radial-gradient(120% 60% at 50% -10%, var(--accent-soft) 0%, transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.2; font-weight: 700; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-lg); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-md); }
p  { margin: 0 0 var(--space-4); }

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

img, svg { max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-3); text-decoration: none; }

/* -------------------------------------------------------------------------
   3. HEADER / NAV / SÉLECTEUR LANGUE
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-fill);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}

.site-header__bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;      /* header centré : langues (haut-droite) · logo héros · menu */
  align-items: center;
  gap: var(--space-2);
}

/* Marque */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  text-decoration: none;
  line-height: 1.05;
  margin: 0;
}
.brand__logo {
  height: 86px;
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: block;
}
.brand__text { display: inline-flex; flex-direction: column; gap: 1px; }
.brand:hover { text-decoration: none; }
.brand__name {
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--accent-hover);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* Petite balle de tennis en puce */
.brand__name::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #dce86a, #b7c73f);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
  flex: none;
}
.brand__tagline {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
}

/* Navigation */
.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;   /* menu centré sous le logo héros */
}
.main-nav > a {
  position: relative;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.main-nav > a:hover {
  color: var(--accent-hover);
  background: var(--surface-alt);
  text-decoration: none;
}
.main-nav > a[aria-current="page"] {
  color: var(--accent-hover);   /* actif = couleur + souligné rouge-bande (une seule marque) */
}

/* Bouton d'action (Créer un compte) */
.main-nav .nav-cta {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: var(--shadow-xs);
}
.main-nav .nav-cta:hover {
  color: var(--accent-ink);
  background: var(--accent-hover);
}

/* Sélecteur de langue — pastilles segmentées */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  order: -1;               /* petit contrôle, en haut à droite */
  align-self: flex-end;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.lang-switch__item {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  line-height: 1;
  transition: color var(--transition), background var(--transition);
}
.lang-switch__item:hover {
  color: var(--accent-hover);
  text-decoration: none;
}
.lang-switch__item.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* Bandeau d'information (saison, etc.) */
.site-notice {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
   4. MAIN / FOOTER
   ------------------------------------------------------------------------- */
.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.site-footer {
  flex: none;
  text-align: center;
  padding: var(--space-5) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}
.site-footer a { color: var(--text-faint); text-decoration: underline; margin-left: var(--space-3); }
.site-footer a:hover { color: var(--accent); }

/* Page « Comment ça marche » */
.help { max-width: 640px; margin: 0 auto; }
.help__intro { font-size: var(--fs-md); color: var(--text-muted); margin: 0 0 var(--space-6); }
.help__block { margin-bottom: var(--space-5); scroll-margin-top: 6rem; }  /* header sticky */
.help__block h2 { color: var(--accent); margin: 0 0 var(--space-2); }
.help__block p { line-height: 1.6; margin: 0; }
.help__back { margin-top: var(--space-6); font-size: var(--fs-sm); }

/* Lien d'aide intégré au message lecture-seule (visiteur) */
.planning-notice__link {
  margin-left: auto;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}
.planning-notice__link:hover { color: var(--band); }

.main-title,
.page-title {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* -------------------------------------------------------------------------
   5. MESSAGES (info quota / connexion) + ALERTES
   ------------------------------------------------------------------------- */
.planning-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 640px;
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.planning-notice::before { content: "ℹ️"; font-size: 1rem; flex: none; }

.planning-login-cta {
  text-align: center;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.planning-login-cta a { color: var(--accent-hover); font-weight: 600; }

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.alert--error   { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 40%, transparent);  color: color-mix(in srgb, var(--danger) 78%, var(--text)); }
.alert--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: color-mix(in srgb, var(--success) 72%, var(--text)); }

/* -------------------------------------------------------------------------
   6. PLANNING — modes de colonnes (pilotés par classes body)
   .planning--2cols : heure + 2 jours (masque les colonnes 4+)
   défaut           : 7 jours visibles
   ------------------------------------------------------------------------- */
.planning-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

body.planning--2cols .planning-table th:nth-child(n+4),
body.planning--2cols .planning-table td:nth-child(n+4) {
  display: none;
}

.planning-table {
  position: relative;
  overflow: visible;           /* laisse dépasser les menus kebab */
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;            /* arrondit proprement les coins de l'en-tête */
}
/* Réactive le débordement quand un kebab est ouvert (voir plus bas) */

.planning-table th.jour,
.planning-table td.jour {
  width: 14.2857%;
  max-width: 14.2857%;
  min-width: 14.2857%;
  text-align: center;
  overflow: hidden;
}
body.planning--2cols .planning-table th.jour,
body.planning--2cols .planning-table td.jour {
  width: 50%;
  max-width: 50%;
  min-width: 50%;
}

/* En-tête */
.planning-table thead th {
  background: var(--accent);
  color: var(--on-header);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid color-mix(in srgb, var(--accent) 70%, black 12%);
}
.planning-table thead th small {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: 0.92em;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.82;
}
.planning-table thead th.hour {
  background: var(--accent-hover);
  text-transform: none;
  width: 76px;
}
.planning-table thead th:last-child { border-right: none; }

/* Colonne des heures */
.planning-table td.hour,
.planning-table tbody th.hour {
  width: 76px;
  background: var(--header-fill);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: center;
  white-space: nowrap;
}

/* Corps */
.planning-table tbody td {
  height: 62px;
  padding: 0;
  position: relative;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: middle;
}
.planning-table tbody td:last-child { border-right: none; }
.planning-table tbody tr:nth-child(even) td.jour { background: color-mix(in srgb, var(--surface-alt) 45%, transparent); }

/* -------------------------------------------------------------------------
   7. CELLULES — machine à états
   ------------------------------------------------------------------------- */

/* --- Créneau passé (hachures « terre battue tassée ») --- */
.cell--past {
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--border) 45%, transparent),
    color-mix(in srgb, var(--border) 45%, transparent) 5px,
    transparent 5px,
    transparent 12px
  );
  cursor: not-allowed;
}

/* --- Créneau libre --- */
.action-wrap { position: relative; width: 100%; height: 100%; }

.cell-free {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 0;
  cursor: pointer;
  background: var(--free-tint);
  transition: background var(--transition);
}
.cell-free:hover { background: var(--free-hover); }

.cell-free .cell-free__hour {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-sm);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: opacity var(--transition);
}

.cell-free form {
  position: relative;
  width: 100%; height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bouton « Réserver » caché par défaut, révélé au hover desktop */
.cell-free button {
  display: none;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.cell-free button:hover { background: var(--accent-hover); }
.cell-free button:active { transform: scale(0.96); }

body.mode-desktop .cell-free:hover button { display: inline-flex; }
body.mode-desktop .cell-free:hover .cell-free__hour { opacity: 0; }
@media (hover: hover) {
  .cell-free:hover button { display: inline-flex; }
  .cell-free:hover .cell-free__hour { opacity: 0; }
}

/* Libre mais non réservable (quota atteint) */
.cell-free--readonly { cursor: pointer; }   /* visiteur : tap → toast « connecte-toi » */
.cell-free--blocked { cursor: not-allowed; background: var(--surface-alt); }
.cell-free--blocked button { display: none !important; }
.cell-free--blocked .cell-free__hour { opacity: 0.45; }
.cell-free--blocked::after {
  content: "🔒";
  position: absolute;
  top: 5px; right: 6px;
  font-size: 0.7rem;
  opacity: 0.4;
}

/* --- Créneau réservé --- */
td.cell--reserved {
  position: relative;
  overflow: visible;
  background:
    linear-gradient(var(--reserve-accent, transparent), var(--reserve-accent, transparent)),
    var(--surface);
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--reserve-accent, var(--accent)) 55%, var(--accent));
}

.reserved-label {
  position: absolute;      /* overlay : remplit la cellule sans empiler avec .action-wrap → plus de débordement dans la ligne suivante */
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  text-align: center;
}
.reserved-label__name {
  font-variant: small-caps;
  font-weight: 700;
  font-size: clamp(0.72rem, 0.66rem + 0.5vw, 0.9rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Annulation de SA réservation : petit × en coin, TOUJOURS visible, nom conservé.
   Le form est DANS .reserved-label (absolute inset:0, qui remplit bien la cellule) → le × se cale sans ambiguïté (même conteneur que le nom centré). */
.cell--reserved .cancel-form {
  position: absolute;
  top: 5px; right: 5px;
  margin: 0;
  z-index: 3;
  line-height: 0;
}
.cell--reserved .cancel-form .btn--cancel {
  position: relative;
  display: inline-flex;
  width: 22px; height: 22px;
  padding: 0;
  background: var(--danger);
  border: none;
  border-radius: 50%;
  font-size: 0;                 /* masque le libellé (conservé pour lecteurs d'écran) */
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
/* Croix dessinée avec 2 barres croisées → centrage parfait (indépendant de la police) */
.cell--reserved .cancel-form .btn--cancel::before,
.cell--reserved .cancel-form .btn--cancel::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 2px;
  background: #fff;
  border-radius: 1px;
}
.cell--reserved .cancel-form .btn--cancel::before { transform: translate(-50%, -50%) rotate(45deg); }
.cell--reserved .cancel-form .btn--cancel::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.cell--reserved .cancel-form .btn--cancel:hover { background: color-mix(in srgb, var(--danger) 82%, black); }
.cell--reserved .cancel-form .btn--cancel:active { transform: scale(0.94); }

/* -------------------------------------------------------------------------
   8. KEBAB (⋮) — visible en mode 2 colonnes / mobile
   ------------------------------------------------------------------------- */
/* Par défaut (7 colonnes desktop) : pas de kebab */
body:not(.planning--2cols) .kebab-wrap,
body:not(.planning--2cols) .kebab { display: none !important; }

/* Ces utilitaires suivent le mode d'affichage */
body.planning--2cols .desktop-only,
body.mode-mobile     .desktop-only { display: none !important; }
body:not(.planning--2cols).mode-desktop .mobile-only { display: none !important; }

/* En 2 colonnes : kebab en coin de cellule */
body.planning--2cols td .cell-free .kebab-wrap,
body.planning--2cols td.cell--reserved .kebab-wrap {
  position: absolute;
  top: 5px; right: 5px;
  z-index: 4;
  display: block !important;
}

/* Reset du <summary> natif */
.kebab-wrap summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.kebab-wrap summary::-webkit-details-marker,
.kebab-wrap summary::marker { display: none; content: ""; }
.kebab-wrap summary::after { content: none !important; }
details.kebab-wrap { border: none; }
details.kebab-wrap > summary { -webkit-appearance: none; appearance: none; }

/* Déclencheur ⋮ */
.kebab {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kebab:hover,
.kebab:focus-visible { background: var(--surface); color: var(--accent-hover); }

/* Menu déroulant */
.kebab-menu {
  display: none;
  position: absolute;
  top: 30px; right: 4px;
  min-width: 170px;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}
.kebab-wrap[open] .kebab-menu {
  display: block;
  animation: kebabFadeIn 0.15s ease-out;
}
@keyframes kebabFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kebab-menu form { margin: 0; }

/* Items du menu (Annuler / Réserver) : plats, pleine largeur */
.kebab-menu .btn--cancel,
.kebab-menu button,
.kebab-menu a {
  position: static;
  transform: none;
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  box-shadow: none;
}
.kebab-menu .btn--cancel { color: var(--danger); text-align: center; }
.kebab-menu .btn--cancel:hover,
.kebab-menu button:hover,
.kebab-menu a:hover { background: var(--surface-alt); text-decoration: none; }

/* Item « Réserver » mis en avant */
.kebab-menu .btn-reserver {
  color: var(--accent-ink);
  background: var(--accent);
  text-align: center;
}
.kebab-menu .btn-reserver:hover { background: var(--accent-hover); }

/* Quand un kebab est ouvert : le td et la table passent au-dessus */
td:has(.kebab-wrap[open]),
td.cell--reserved:has(.kebab-wrap[open]) {
  position: relative;
  z-index: 1000;
  overflow: visible;
}
.planning-table:has(.kebab-wrap[open]) { overflow: visible; }

/* -------------------------------------------------------------------------
   9. NAVIGATION DU PLANNING (semaine précédente / suivante + mobile/swipe)
   ------------------------------------------------------------------------- */
.planning-nav,
.planning-nav-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), transform var(--transition);
}
.btn-nav:hover:not(.disabled) { background: var(--accent-hover); text-decoration: none; }
.btn-nav:active:not(.disabled) { transform: translateY(1px); }
.btn-nav.disabled { opacity: 0.4; pointer-events: none; }

/* La nav semaine « desktop » disparaît en 2 colonnes ; l'inverse pour mobile */
body.planning--2cols nav[aria-label="Navigation planning"],
body.planning--2cols .planning-nav { display: none; }
body:not(.planning--2cols) .planning-nav-mobile { display: none; }

/* -------------------------------------------------------------------------
   10. TOAST
   ------------------------------------------------------------------------- */
.planning-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%) translateY(8px);
  max-width: min(92vw, 420px);
  padding: var(--space-3) var(--space-4);
  background: var(--ink-900);
  color: #fdf7f2;
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 9999;
}
.planning-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;   /* tap pour fermer */
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .planning-toast { background: #0f0b09; border: 1px solid var(--border); }
}
/* Toasts typés : couleur + icône selon le sens (info = fond neutre par défaut). */
.planning-toast.toast--success { background: var(--success); }
.planning-toast.toast--error   { background: var(--danger); }
.planning-toast::before { margin-right: 0.4em; font-weight: 700; }
.planning-toast.toast--success::before { content: "\2713"; }  /* ✓ */
.planning-toast.toast--error::before   { content: "\26A0"; }  /* ⚠ */
.planning-toast.toast--info::before    { content: "\2139"; }  /* ℹ */

/* -------------------------------------------------------------------------
   11. FORMULAIRES — login / register / compte (cartes)
   ------------------------------------------------------------------------- */
.card,
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
}
.auth-card {
  max-width: 420px;
  margin: var(--space-4) auto var(--space-6);
}
.auth-card h1,
.auth-card .page-title { text-align: center; margin-bottom: var(--space-5); }

/* Base des champs (fonctionne avec ou sans classe .field) */
.field { margin-bottom: var(--space-4); }
.site-main label,
.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.site-main input[type="text"],
.site-main input[type="email"],
.site-main input[type="password"],
.site-main input[type="search"],
.site-main input:not([type]),
.site-main select,
.site-main textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.site-main input:focus,
.site-main select:focus,
.site-main textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.site-main input::placeholder,
.site-main textarea::placeholder { color: var(--text-faint); }

.site-main select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* Boutons génériques */
.btn,
.site-main button[type="submit"]:not(.btn--cancel):not(.btn--reserve),
.auth-card button:not(.linklike) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.72rem 1.2rem;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover,
.site-main button[type="submit"]:not(.btn--cancel):not(.btn--reserve):hover,
.auth-card button:not(.linklike):hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.btn:active,
.site-main button[type="submit"]:not(.btn--reserve):active { transform: translateY(1px); }

.btn--block,
.auth-card button[type="submit"] { width: 100%; margin-top: var(--space-2); }

.btn--ghost {
  color: var(--accent-hover);
  background: transparent;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--surface-alt); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 82%, black); }

/* Lien secondaire sous un formulaire */
.form-aside {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.form-aside a { font-weight: 600; }

/* Lien discret à l'apparence de texte (ex. « Mot de passe oublié ? ») :
   hérite du .form-aside (petit, atténué), souligné léger, sans gras ni accent. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
  cursor: pointer;
}
.linklike:hover { color: var(--text); text-decoration-color: currentColor; }

/* Popup contact (mot de passe oublié) — l'email n'apparaît qu'à l'ouverture */
dialog.modal {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-5);
  max-width: 22rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .45); }
.modal__contact { margin: var(--space-3) 0 0; font-weight: 600; }
.modal__actions { margin-top: var(--space-4); text-align: right; }

/* Bande « Mes réservations à venir » (vue consolidée voir/annuler hors fenêtre) */
.my-bookings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-left: 3px solid var(--accent);   /* liseré d'accent = mise en exergue */
  border-radius: var(--radius-md);
}
.my-bookings__label { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.my-bookings__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.my-bookings__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-sm);
  background: var(--surface);   /* puce blanche = ressort sur le panneau teinté */
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.my-bookings__when { color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.my-bookings__when:hover { text-decoration: underline; }
/* Message de quota fusionné : sous-ligne pleine largeur, emoji info discret */
.my-bookings__notice {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.my-bookings__notice::before { content: "ℹ️"; font-size: 1rem; flex: none; }
.my-bookings__why {
  color: var(--accent);
  text-decoration: underline;
  white-space: nowrap;
  font-style: italic;
  font-size: var(--fs-xs);
}
.my-bookings__why:hover { color: var(--band); }

/* Croix d'annulation : réutilise le bouton rond à barres croisées du planning */
.my-bookings .cancel-form { display: inline-flex; margin: 0; line-height: 0; }
.my-bookings .btn--cancel {
  position: relative;
  display: inline-flex;
  width: 20px; height: 20px;
  padding: 0;
  background: var(--danger);
  border: none;
  border-radius: 50%;
  font-size: 0;                 /* masque le libellé (conservé pour lecteurs d'écran) */
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.my-bookings .btn--cancel::before,
.my-bookings .btn--cancel::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 2px;
  background: #fff;
  border-radius: 1px;
}
.my-bookings .btn--cancel::before { transform: translate(-50%, -50%) rotate(45deg); }
.my-bookings .btn--cancel::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.my-bookings .btn--cancel:hover { background: color-mix(in srgb, var(--danger) 82%, black); }
.my-bookings .btn--cancel:active { transform: scale(0.94); }

/* Écran « Mon compte » : liste de définition */
.account-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.account-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.account-list dt,
.account-list .label { color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.account-list dd,
.account-list .value { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.text-faint { color: var(--text-faint); font-weight: 400; }

/* Mon compte : bloc « changer mon mot de passe » repliable.
   Pas de bordure haute : la dernière ligne de .account-list en a déjà une (évite le double filet). */
.account-pw { margin: 0 0 var(--space-4); }
.account-pw > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.account-pw > summary:hover { color: var(--band); }
.account-pw form { margin-top: var(--space-4); }

/* -------------------------------------------------------------------------
   12. UTILITAIRES & CONFORT
   ------------------------------------------------------------------------- */
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.stack > * + * { margin-top: var(--space-4); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

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

/* Réconciliation : le libellé "Free" est redondant avec la ligne d’heure */
.cell-free__label { display: none; }

/* --- Harvest ancien : le logo photo devient la marque (plus de puce verte) --- */
.brand__name::before { content: none; }
.brand__name { font-size: var(--fs-lg); }

/* --- Harvest ancien : soulignement "terre battue" au survol du menu --- */
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: var(--space-2); right: var(--space-2);
  bottom: 4px; height: 2px;
  background: var(--band);   /* cite la bande « JORDI » du terrain */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.main-nav > a:not(.nav-cta):hover::after,
.main-nav > a:not(.nav-cta)[aria-current="page"]::after { transform: scaleX(1); }

/* --- Menu langue en pop (4e item du menu) --- */
.lang-menu { position: relative; display: inline-flex; }
.lang-menu__toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.lang-menu__globe { flex: none; opacity: 0.9; }
.lang-menu__toggle::-webkit-details-marker { display: none; }
.lang-menu__toggle:hover,
.lang-menu[open] .lang-menu__toggle { color: var(--accent-hover); background: var(--surface-alt); }
.lang-menu__caret { font-size: 0.8em; opacity: 0.7; display: inline-block; transition: transform var(--transition); }
.lang-menu[open] .lang-menu__caret { transform: rotate(180deg); }
.lang-menu__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.lang-menu__item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.lang-menu__item:hover { background: var(--surface-alt); color: var(--accent-hover); text-decoration: none; }
.lang-menu__item.is-active { color: var(--accent-ink); background: var(--accent); font-weight: 700; }

/* Case libre : en mobile, bouton « Réserver » direct (pas de hover, pas de kebab) ; heure masquée (redondante avec la colonne) */
/* Tactile (pas de survol pour révéler) : boutons TOUJOURS visibles.
   - Téléphone (2 colonnes) : bouton plein (peu de boutons, « ancien mode »).
   - Tablette (7 colonnes) : style léger (contour) pour ne pas saturer la grille. */
body.mode-mobile .cell-free button { display: inline-flex; }
body.mode-mobile .cell-free .cell-free__hour { display: none; }

body.mode-mobile:not(.planning--2cols) .cell-free button {
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: none;
  font-weight: 600;
}
body.mode-mobile:not(.planning--2cols) .cell-free button:active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Kebab (uniquement cases réservées annulables) : caché en desktop, le hover révèle l'action */
body.mode-desktop .kebab-wrap { display: none; }

/* (Le × d'annulation est désormais géré plus haut, dans .reserved-label — voir .cancel-form) */

/* Week-end (samedi/dimanche) : repère visuel discret — le calendrier est glissant (pas de lundi fixe) */
.planning-table thead th.jour.is-weekend { background: var(--accent-hover); }
td.cell.is-weekend .cell-free { background: color-mix(in srgb, var(--free-tint) 78%, var(--accent-soft)); }