/* ============================================================================
   CDBY — Thème "Tournoi des anciens"
   Fichier    : css/cdby-theme.css
   Origine    : adapté de la maquette cdby-redesign.html (design Claude).
   Chargement : après assets/css/main.css et css/style.css (voir _header_html.php)
                afin de pouvoir surcharger leurs couleurs/typo par défaut.

   Choix assumés pour ce public (licenciés seniors) :
   - fond clair uniquement, pas de mode sombre automatique ;
   - police de base volontairement grande (20px) et interlignage large ;
   - menu du site toujours visible (pas de tiroir/JS à ouvrir).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — couleurs et rayons. Modifier ici pour changer la charte globale.
      Volontairement pas de bloc "dark mode" : on force un fond clair partout.
   -------------------------------------------------------------------------- */
:root {
  --felt-900: #12332A;
  --felt-700: #1F5A47;
  --felt-100: #E7F0EA;
  --link-green: #0F7A50;
  --field-bg: #F2F1EC;
  --field-border: #8A8272;
  --cream-100: #F5F3EC;
  --brass-500: #B08A3E;
  --brass-300: #D8BD7C;
  --ball-red: #B3241C;
  --ink-900: #1C1710;
  --ink-600: #4A4236;
  --rule: rgba(28, 23, 16, 0.14);
  --radius-s: 4px;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
}

/* --------------------------------------------------------------------------
   2. BASE — typographie plus grande pour un public senior.
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  font-size: 18px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  color: var(--felt-900);
}

img, iframe, video { max-width: 100%; }

/* Liens : vert plus vif que le reste de la charte (--felt-700) et soulignés
   en permanence (pas seulement au survol), pour rester bien distincts du
   texte courant (--ink-900, très sombre) même sans bien percevoir les
   couleurs. Le soulignement passe par border-bottom (déjà utilisé par
   assets/css/main.css) plutôt que text-decoration, pour garder la même
   transition de couleur au survol. */
a {
  color: var(--link-green);
  border-bottom: solid 1px;
}
a:hover, a:hover * {
  color: var(--felt-700) !important;
  border-bottom-color: var(--brass-500) !important;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brass-500);
  color: var(--felt-900);
  padding: 12px 18px;
  z-index: 200;
  font-size: 1rem;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 3px solid var(--brass-500);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. BARRE DU HAUT (.topbar) — identité + connexion, sur toutes les pages.
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--felt-900);
  color: var(--cream-100);
  font-size: 1rem;
}
.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.topbar nav span { opacity: 0.95; }
.topbar nav a { text-decoration: none; border-bottom: none; opacity: 0.9; color: var(--cream-100); }
.topbar nav a:hover, .topbar nav a:hover * {
  opacity: 1;
  text-decoration: underline;
  color: var(--cream-100) !important;
}

/* --------------------------------------------------------------------------
   4. EN-TÊTE DE PAGE (.page-header) — titre de la page, sur fond clair.
      Utilisé par toutes les pages via _header_html.php.
   -------------------------------------------------------------------------- */
.page-header {
  background: var(--bg);
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--rule);
}
.page-header-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.page-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 0;
}
.page-header .eyebrow {
  color: var(--felt-700);
  font-size: 0.95rem;
  margin: 4px 0 0;
}
/* Boules affichées à droite du titre (voir $page_header_balls dans _header_html.php) */
.page-header .hero-balls { flex-shrink: 0; display: block; }
.page-header .ball { filter: drop-shadow(0 2px 3px rgba(28, 23, 16, 0.18)); }

/* Accroche texte sous le titre de page (index.php). */
.hero-intro { max-width: 760px; margin: 0 auto; }
.hero-intro p {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   5. MISE EN PAGE GÉNÉRALE (.layout) — menu en colonne fixe à gauche +
      contenu à droite. Empilés (menu au-dessus) sous 860px de large.
   -------------------------------------------------------------------------- */
.layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: flex;
  align-items: flex-start;
}

main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 760px;
  padding: 24px 0 40px;
}
main section + section { margin-top: 48px; }
main .hero-intro + section { margin-top: 32px; }

/* Pages "larges" (voir $page_wide dans _header_html.php) : pleine largeur,
   sans espace blanc à gauche, pour les tableaux volumineux (calendrier...).
   Le menu démarre replié par défaut sur ces pages (voir js/menu-toggle.js). */
body.page-wide .layout { max-width: none; padding-left: 0; padding-right: 16px; }
body.page-wide main { max-width: none; }

main .lede {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   6. TIMELINE (.timeline) — étapes de la saison.
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 28px 0 0; padding: 0; border-left: 3px solid var(--rule); }
.timeline li { position: relative; padding: 2px 0 30px 30px; }
.timeline li:last-child { padding-bottom: 2px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brass-500);
}
.timeline .when {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  color: var(--felt-700);
  margin: 0 0 8px;
}
.timeline ul { margin: 8px 0 0; padding-left: 22px; color: var(--text-muted); }
.timeline ul li { padding: 4px 0; border: none; }
.timeline ul li::before { content: none; }

/* --------------------------------------------------------------------------
   7. RESSOURCES (.resources) — règlement, fichiers de saisie, etc.
   -------------------------------------------------------------------------- */
.resources { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.resource {
  flex: 1 1 260px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  padding: 20px 22px;
  text-decoration: none;
  border-bottom: none;
  color: var(--text);
  background: var(--surface);
  display: block;
}
.resource:hover { border-color: var(--brass-500); }
.resource .label { font-size: 0.95rem; color: var(--text-muted); margin: 0 0 6px; }
.resource .name { font-family: 'Fraunces', serif; font-size: 1.2rem; margin: 0; }

/* --------------------------------------------------------------------------
   8. MENU DU SITE (.site-menu-wrap) — colonne fixe à gauche, ouverte par
      défaut (fonctionne sans JS). Reste à l'écran pendant le défilement
      (position: sticky) sur les pages longues (calendrier, classement...).

      Repli : le bouton .menu-toggle (dans le menu) fait glisser TOUT le
      panneau hors de l'écran et rend sa largeur au contenu — utile sur les
      pages très larges (tableaux de calendrier, etc.). Une languette fixe
      .menu-reopen apparaît alors au bord gauche de l'écran pour le rouvrir.
      Préférence mémorisée en JS (voir js/menu-toggle.js) ; sans JS, les deux
      boutons ne font rien et le menu reste ouvert.
   -------------------------------------------------------------------------- */
.site-menu-wrap {
  flex: 0 0 260px;
  width: 260px;
  position: sticky;
  top: 24px;
  margin-top: 40px;
  margin-right: 40px;
  padding: 22px 18px;
  background: var(--felt-100);
  border-radius: var(--radius-s);
  overflow: hidden;
  transition: width 0.25s ease, flex-basis 0.25s ease, margin-right 0.25s ease,
              padding 0.25s ease, opacity 0.15s ease;
}
body.is-menu-collapsed .site-menu-wrap {
  width: 0;
  flex-basis: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
}
/* Spécificité + !important nécessaires ici : la règle générique des boutons
   (section 10 plus bas, et assets/css/main.css) impose color/box-shadow/
   font-size en !important sur tous les <button>. */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: auto;
  line-height: normal;
  margin: 0;
  padding: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted) !important;
}
.menu-toggle:hover { color: var(--felt-700) !important; background-color: transparent !important; }

.site-menu { margin-top: 12px; text-align: left; white-space: nowrap; }
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu li { border-bottom: 1px solid var(--rule); }
.site-menu li.divider { border-bottom: none; height: 0; }
.site-menu a {
  display: block;
  text-align: left;
  padding: 16px 4px;
  text-decoration: none;
  border-bottom: none;
  color: var(--text);
  font-size: 14px;
}
.site-menu a:hover, .site-menu a:hover * { color: var(--felt-700) !important; }
.site-menu .arrow { color: var(--brass-500); font-size: 1.2rem; margin-left: 4px; }

/* Languette de réouverture : masquée tant que le menu est ouvert, fixée au
   bord gauche de l'écran (bien visible, reste atteignable même en scrollant)
   dès qu'il est replié. */
.menu-reopen {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 56px;
  line-height: normal;
  padding: 0;
  border: none;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--felt-900) !important;
  color: var(--cream-100) !important;
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(18, 51, 42, 0.35) !important;
}
.menu-reopen:hover { background: var(--felt-700) !important; }
body.is-menu-collapsed .menu-reopen { display: flex; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sous 860px : plus de place pour deux colonnes, le menu passe au-dessus
   du contenu ; le repli se fait alors en hauteur plutôt qu'en largeur. */
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .site-menu-wrap {
    position: static;
    width: 100%;
    flex-basis: auto;
    margin-top: 24px;
    margin-right: 0;
    border-radius: var(--radius-s);
    max-height: 2000px;
    transition: max-height 0.25s ease, opacity 0.15s ease, margin-top 0.25s ease,
                padding 0.25s ease;
  }
  body.is-menu-collapsed .site-menu-wrap {
    max-height: 0;
    width: 100%;
    flex-basis: auto;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .menu-reopen { top: auto; bottom: 16px; }
  main { padding-top: 24px; }
}

/* --------------------------------------------------------------------------
   9. PIED DE PAGE
   -------------------------------------------------------------------------- */
footer {
  background: var(--cream-100);
  border-top: 1px solid var(--rule);
  margin-top: 56px;
}
.footer-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 36px;
  color: var(--text-muted);
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   10. ÉLÉMENTS GÉNÉRIQUES — pages pas encore adaptées au nouveau design
       (tableaux, formulaires, boutons). Grossis pour rester lisible.
   -------------------------------------------------------------------------- */
table { font-size: 1rem; border-collapse: collapse; }
th, td { padding: 10px 12px; }

/* Cellule d'actions admin (calendrier.php) : plusieurs icônes côte à côte
   (édition, suppression, convocation...), taille d'origine conservée.
   Espace resserré ENTRE les icônes ; le débordement sur la cellule suivante
   est évité par le min-width:100px mis directement sur le <td> (voir
   calendrier.php), plus fiable ici qu'un padding/espaceur CSS seul. */
.td-actions { padding: 6px 8px 6px 14px; }
.td-actions img { vertical-align: middle; }
.td-actions a { border-bottom: none; margin-right: 2px; }
.td-actions a:last-child { margin-right: 0; }

/* Champs de formulaire : assets/css/main.css leur donne une bordure gris
   clair à 75% d'opacité sur fond blanc — quasiment invisible. On leur donne
   un fond légèrement teinté + une bordure nette pour qu'ils se détachent
   clairement de la page, avec un état focus lui aussi bien visible. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input:not([type]),
select,
textarea {
  background: var(--field-bg) !important;
  border: 2px solid var(--field-border) !important;
  border-radius: var(--radius-s) !important;
  color: var(--text) !important;
  font-size: 1.05rem !important;
  padding: 0 14px !important;
}
textarea { padding: 12px 14px !important; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
  border-color: var(--felt-700) !important;
  box-shadow: 0 0 0 1px var(--felt-700) !important;
}

/* Boutons (soumission de formulaire) : remplis en couleur pleine plutôt que
   contour fin, pour ressortir nettement sur fond blanc. */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  background-color: var(--felt-700) !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  letter-spacing: 0.03em !important;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  background-color: var(--felt-900) !important;
}
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
.button:active {
  background-color: var(--felt-900) !important;
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .page-header { padding: 32px 20px 26px; }
  .layout { padding: 0 20px 32px; }
  .topbar-inner { padding: 12px 20px; }
}