/* ===================================================================
   Maromme Tir Sportif — identité visuelle
   Palette :
     --ink    #11151a  charcoal/marine profond (fonds sombres, header)
     --paper  #f6f4ef  blanc chaud (fond principal)
     --line   #ddd6c4  trait fin sur fond clair
     --flame  #d6471f  rouge "10" (accent, appels à l'action)
     --brass  #9c8654  laiton (étiquettes, secondaire)
     --steel  #3a4a5c  bleu acier (texte secondaire)
   Typo : Oswald (titres, condensé/précis) + Source Sans 3 (texte courant)
   Signature : motif de cible à anneaux concentriques, repris comme
   séparateur de section et puce de liste — le club est littéralement
   organisé autour de ces anneaux de score.
   =================================================================== */

/* Polices servies par le site lui-même, et non par Google.
   Deux raisons : l'affichage ne dépend plus d'un tiers joignable ou non,
   et l'adresse IP de chaque visiteur n'est plus transmise à Google sans
   son consentement — ce que la CNIL et les tribunaux allemands ont
   sanctionné à propos de Google Fonts.
   Ce sont des polices variables : un seul fichier couvre toutes les
   graisses, d'où la plage dans font-weight. 140 Ko en tout, contre deux
   requêtes bloquantes vers un domaine extérieur. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(/assets/fonts/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(/assets/fonts/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/assets/fonts/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #11151a;
  --ink-soft: #1c232c;
  --paper: #f6f4ef;
  --paper-soft: #efece3;
  --line: #ddd6c4;
  --flame: #d6471f;
  --flame-dark: #ab3717;
  --brass: #9c8654;
  --steel: #3a4a5c;
  --text: #21262c;
  --text-soft: #5a6470;
  --radius: 4px;
  --max: 1180px;
  --shadow: 0 12px 30px -14px rgba(17, 21, 26, 0.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Source Sans 3', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Un nom de fichier, une adresse, un mot sans espace : rien de ce qu on
     nous confie ne doit pouvoir pousser la page plus large que l ecran.
     C est une archive de caisse — « Archive_Fiscal_Mensuelle_202412_N_35_
     DH_20241228180813037.zip », soixante caracteres d un seul tenant — qui
     faisait defiler l ecran des statistiques de travers sur un telephone. */
  overflow-wrap: break-word;
}
h1, h2, h3, h4, .display {
  font-family: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; letter-spacing: 0.03em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform: uppercase; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--flame); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul { padding-left: 0; list-style: none; margin: 0 0 1em; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.75em 1.2em;
  background: var(--flame);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

body.lightbox-open { overflow: hidden; }

/* Anneau-puce, motif signature, réutilisé partout où une liste a du sens */
.ring-list li {
  position: relative;
  padding: 0.2em 0 0.2em 1.9em;
  margin-bottom: 0.5em;
}
.ring-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--flame);
}
.ring-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--flame);
}

/* Eyebrow / étiquette */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Arial Narrow', 'Oswald', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.8em;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--brass);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Arial Narrow', 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  border: 2px solid var(--flame);
  background: var(--flame);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--flame-dark); border-color: var(--flame-dark); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-small { padding: 0.5em 1em; font-size: 0.8rem; }
.btn-danger { background: #8a2222; border-color: #8a2222; }
.btn-danger:hover { background: #6e1b1b; border-color: #6e1b1b; }
.btn-loading { opacity: 0.75; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  a.card-link:hover, .tarif-card:hover, .bureau-card:hover { transform: none; }
  a.card-link:hover img, .gallery-grid .lightbox-trigger:hover img { transform: none; }
}

/* ---------- Header / nav ---------- */
#site-header {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow 0.2s ease;
}
#site-header.scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28); }
#site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.logo { display: flex; align-items: center; gap: 0.7em; color: #fff; font-family: 'Arial Narrow', 'Oswald', sans-serif; }
/* Le vrai logo du club, celui du marquage textile, remplace la cible qui
   etait dessinee ici en CSS. Ses reperes en croix sont blancs : il est fait
   pour un fond sombre, ce qui est le cas de l'en-tete. */
.logo .mark { width: 46px; height: 46px; flex: none; }
@media (max-width: 700px) {
  .logo .mark { width: 38px; height: 38px; }
}
.logo strong { display:block; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.logo span { display:block; font-family:'Segoe UI', sans-serif; font-size: 0.72rem; color: var(--brass); letter-spacing: 0.08em; text-transform: uppercase; }

nav#primary-nav { display: flex; align-items: center; gap: 4px; }
nav#primary-nav > ul { display: flex; gap: 4px; margin: 0; }
nav#primary-nav > ul > li { position: relative; }
nav#primary-nav > ul > li > a, nav#primary-nav .nav-label {
  display: block; color: #f3f1ea; font-family: 'Arial Narrow', 'Oswald', sans-serif;
  font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1.6em 0.85em; cursor: pointer;
}
nav#primary-nav > ul > li > a:hover, nav#primary-nav .nav-label:hover,
nav#primary-nav > ul > li.active > a,
nav#primary-nav > ul > li.active > .nav-label { color: var(--flame); text-decoration: none; }
.submenu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--ink-soft); border-top: 2px solid var(--flame); box-shadow: var(--shadow);
  padding: 8px 0;
}
nav#primary-nav > ul > li:hover .submenu,
nav#primary-nav > ul > li:focus-within .submenu { display: block; }
.submenu a { display: block; padding: 0.7em 1.2em; color: #e8e5dc; font-size: 0.92rem; }
.submenu a:hover, .submenu li.active > a { background: rgba(255,255,255,0.05); color: var(--flame); text-decoration:none; }
/* La porte de celui qui est deja entre : encadree, parce qu'elle ne mene pas
   a une page du site mais hors des pages publiques. */
nav#primary-nav > ul > li.nav-espace > a {
  border: 1px solid rgba(255,255,255,0.28); border-radius: 3px;
  padding: 0.6em 0.9em; margin-left: 0.4em;
}
nav#primary-nav > ul > li.nav-espace > a:hover { border-color: var(--flame); }
.nav-contact { color: var(--brass); font-size: 0.85rem; margin-left: 0.5em; white-space: nowrap; }
#nav-toggle { display: none; }

@media (max-width: 900px) {
  #nav-toggle {
    display: block; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer;
  }
  nav#primary-nav {
    display: none; flex-direction: column; align-items: stretch;
    position: absolute; top: 78px; left: 0; right: 0; background: var(--ink-soft);
    box-shadow: var(--shadow); padding: 8px 0;
  }
  nav#primary-nav.open { display: flex; }
  nav#primary-nav > ul { flex-direction: column; width: 100%; }
  .submenu { position: static; box-shadow: none; display: none; }
  nav#primary-nav > ul > li.open .submenu { display: block; }
  nav#primary-nav > ul > li.active.open .submenu { display: block; }
  .nav-label::after {
    content: "▾";
    display: inline-block;
    margin-left: 0.35em;
    font-size: 0.75em;
    transition: transform 0.2s ease;
  }
  nav#primary-nav > ul > li.open > .nav-label::after { transform: rotate(180deg); }
  nav#primary-nav > ul > li.nav-espace > a { border: 0; padding: 1.6em 0.85em; margin-left: 0; }
  .nav-contact { margin: 0.8em 1.2em; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--ink); color: #fff;
  padding: 5.5em 0 6em;
}
.hero .rings {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  width: 620px; height: 620px; opacity: 0.18; pointer-events: none;
}
.hero .rings circle { fill: none; stroke: var(--flame); }
/* Les bandeaux posent color:#fff, mais la regle generale des titres remet
   var(--ink) par-dessus — soit exactement la couleur du fond. Le titre de
   chaque page etait donc invisible. « inherit » reprend la couleur du
   bandeau, et suivra si la palette change un jour. */
.hero h1, .page-hero h1 { color: inherit; }
.hero-inner { position: relative; max-width: 680px; }
.hero p.lead { font-size: 1.15rem; color: #d8d4c8; max-width: 540px; }
.hero .cta-row { display: flex; gap: 14px; margin-top: 1.6em; flex-wrap: wrap; }

.page-hero {
  background: var(--ink); color: #fff; padding: 3.4em 0 3em; position: relative; overflow:hidden;
}
.page-hero .rings { position:absolute; right:-100px; top:-80px; width:380px; height:380px; opacity:0.15; }
.page-hero .rings circle { fill:none; stroke: var(--flame); }
.page-hero h1 { margin-bottom: 0.15em; }
.page-hero .lead { color:#d8d4c8; max-width: 640px; margin:0; }

/* ---------- Sections / blocks ---------- */
section.block { padding: 3.2em 0; border-bottom: 1px solid var(--line); }
section.block:last-child { border-bottom: 0; }
.block-texte .corps p:first-child { margin-top: 0; }
.block-liste ul.ring-list { max-width: 760px; }
.block-image figure { margin: 0; }
.block-image-figure { margin: 0; max-width: 960px; }
.block-image figcaption { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.6em; font-style: italic; }
.block-image-figure figcaption { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.6em; font-style: italic; }
.actu-figure { margin: 0 0 2em; }
.block-fichier a.file-link {
  display: inline-flex; align-items: center; gap: 0.6em; background: var(--paper-soft);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9em 1.3em;
  color: var(--ink); font-family:'Arial Narrow', 'Oswald', sans-serif; text-transform: uppercase; font-size: 0.88rem; letter-spacing:0.03em;
}
.block-fichier a.file-link:hover { border-color: var(--flame); color: var(--flame); text-decoration:none; }

.tarifs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 1.5em; }
.tarif-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8em; box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tarif-card:hover {
  transform: translateY(-3px);
  border-color: var(--flame);
  box-shadow: 0 16px 36px -16px rgba(17, 21, 26, 0.4);
}
.tarif-card .prix { font-family:'Arial Narrow', 'Oswald', sans-serif; font-size: 2.2rem; color: var(--flame); margin: 0.2em 0 0.3em; }
.tarif-card .prix small { font-size: 1rem; color: var(--text-soft); }

/* Cards génériques (accueil, actu) */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
a.card-link {
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.card-link:hover {
  transform: translateY(-4px);
  border-color: var(--flame);
  box-shadow: 0 16px 36px -16px rgba(17, 21, 26, 0.45);
  text-decoration: none;
}
a.card-link:hover h3 { color: var(--flame); }
a.card-link:focus-visible { outline-offset: 4px; }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform 0.35s ease; }
a.card-link:hover img { transform: scale(1.04); }
.card .body { padding: 1.4em; flex: 1; display: flex; flex-direction: column; }
.card .date { font-family:'Arial Narrow', 'Oswald', sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--brass); text-transform: uppercase; margin-bottom: 0.4em; }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--text-soft); flex: 1; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-grid figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.gallery-grid .lightbox-trigger { width: 100%; border-radius: var(--radius); }
.gallery-grid img { aspect-ratio: 1/1; object-fit: cover; width: 100%; transition: transform .25s ease; }
.gallery-grid .lightbox-trigger:hover img { transform: scale(1.06); }
.gallery-grid figcaption {
  position: absolute; left:0; right:0; bottom:0; padding: 0.5em 0.7em; font-size: 0.78rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: #fff;
}

/* ---------- Bureau du club ---------- */
.bureau-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.bureau-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2em 1.5em; text-align: center; box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bureau-card:hover {
  transform: translateY(-3px);
  border-color: var(--brass);
  box-shadow: 0 14px 32px -14px rgba(17, 21, 26, 0.38);
}
.bureau-photo {
  width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
  margin: 0 auto 1em; display: block; border: 3px solid var(--flame);
}
.bureau-photo--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-soft); font-size: 2.5rem; color: var(--text-soft);
}
.bureau-card h3 { margin: 0 0 0.2em; }
.bureau-role { color: var(--flame); font-weight: 600; margin: 0 0 0.8em; font-size: 0.95rem; }
.bureau-contact { margin: 0.3em 0; font-size: 0.9rem; }

/* ---------- Lightbox galerie ---------- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 21, 26, 0.92); padding: 20px;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-dialog { position: relative; max-width: min(960px, 100%); width: 100%; }
.lightbox-figure { margin: 0; text-align: center; }
.lightbox-img {
  max-width: 100%; max-height: 80vh; width: auto; height: auto;
  margin: 0 auto; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lightbox-caption {
  color: #e8e5dc; font-size: 0.95rem; margin-top: 0.8em; font-style: italic;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,0.12); border: 0; color: #fff;
  cursor: pointer; line-height: 1; border-radius: var(--radius);
  transition: background 0.15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.22); }
.lightbox-close {
  top: -0.2em; right: 0; font-size: 2rem; width: 2.4rem; height: 2.4rem;
}
.lightbox-prev, .lightbox-next {
  top: 50%; transform: translateY(-50%); font-size: 2.4rem;
  width: 2.6rem; height: 3.2rem;
}
.lightbox-prev { left: -3.2rem; }
.lightbox-next { right: -3.2rem; }
@media (max-width: 700px) {
  .lightbox-prev { left: 0.2rem; }
  .lightbox-next { right: 0.2rem; }
  .lightbox-close { top: 0.2rem; right: 0.2rem; }
}

/* ---------- Lightbox triggers (pages + galerie) ---------- */
.lightbox-trigger {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.lightbox-trigger img { display: block; width: 100%; height: auto; transition: transform 0.3s ease, opacity 0.2s ease; }
.lightbox-trigger:hover img { opacity: 0.92; }
.lightbox-trigger--wide img { border-radius: var(--radius); }
.lightbox-hint {
  position: absolute;
  right: 0.65em;
  bottom: 0.65em;
  padding: 0.35em 0.65em;
  background: rgba(17, 21, 26, 0.72);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.lightbox-trigger:hover .lightbox-hint,
.lightbox-trigger:focus-visible .lightbox-hint { opacity: 1; transform: translateY(0); }

/* ---------- Retour en haut ---------- */
.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid var(--flame);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.15s ease, transform 0.15s ease;
}
.back-to-top:hover { background: var(--flame); transform: translateY(-2px); }
.back-to-top[hidden] { display: none; }

/* ---------- Contact ---------- */
.contact-shell { max-width: 720px; }
.contact-coords { margin-top: 3em; }

/* ---------- Footer ---------- */
#site-footer { background: var(--ink); color: #cfcabd; padding: 3em 0 2em; margin-top: 3em; }
#site-footer .grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2em; }
#site-footer h4 { color: #fff; font-size: 0.95rem; }
.logo-pied { width: 112px; height: 112px; margin-bottom: 1em; }
#site-footer a { color: #cfcabd; }
#site-footer a:hover { color: var(--flame); }
#site-footer .bottom { margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.82rem; color: #80796a; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5em; }
@media (max-width: 700px) { #site-footer .grid { grid-template-columns: 1fr; } }

/* ---------- Formulaires (contact + admin) ---------- */
.field { margin-bottom: 1.3em; }
.field label { display:block; font-family:'Arial Narrow', 'Oswald', sans-serif; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; color: var(--steel); margin-bottom: 0.4em; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password],
.field input[type=number], .field input[type=date], .field textarea, .field select {
  width: 100%; padding: 0.75em 0.9em; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; background:#fff; color: var(--text);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--flame); }
.field-error input, .field-error textarea {
  border-color: #c0392b;
  background: #fff8f7;
}
.field-error label { color: #8a2c1b; }
.field-hint { font-size: 0.82rem; color: var(--text-soft); margin-top: 0.3em; }
.field-checkbox { display:flex; align-items:center; gap:0.6em; }
.field-checkbox input { width:auto; }

.alert { padding: 1em 1.3em; border-radius: var(--radius); margin-bottom: 1.5em; font-size: 0.95rem; }
.alert-success { background:#e4f3e6; color:#235c2c; border:1px solid #bfe2c4; }
.alert-error { background:#fbe7e3; color:#8a2c1b; border:1px solid #f1c3b8; }
.alert-info { background:#eaf1f6; color:#244154; border:1px solid #c9dce8; }

/* ---------- Pop-up message temporaire ---------- */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(17,21,26,0.72);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
/* Deja lu : le serveur pose cette classe des le premier octet, donc le message
   ne clignote pas le temps qu'un script vienne le cacher. */
.popup-overlay.popup-lu { display: none; }
.popup-modal {
  background: #fff; max-width: 680px; width: 100%; border-radius: 6px; padding: 2.5em 2.5em 2em;
  box-shadow: var(--shadow); position: relative; border-top: 6px solid var(--flame);
  text-align: center;
}
.popup-modal.popup-alerte { border-top-color: #8a2222; }
.popup-modal h3 { margin-bottom: 0.6em; font-size: 1.4rem; }
.popup-close {
  position: absolute; top: 0.8em; right: 0.9em; background: none; border: 0; font-size: 1.6rem;
  cursor: pointer; color: var(--text-soft); line-height: 1;
}
.popup-close:hover { color: var(--flame); }

/* Bandeau fixe (haut ou bas) */
.popup-bandeau {
  position: fixed; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: .7em;
  padding: .65em 3em; font-size: .92rem; font-weight: 600; cursor: pointer;
  background: var(--flame); color: #fff; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: opacity .2s;
}
.popup-bandeau.bandeau-haut { top: 0; }
.popup-bandeau.bandeau-bas { bottom: 0; }
.popup-bandeau.popup-alerte { background: #8a2222; }
.popup-bandeau:hover { opacity: .9; }
.popup-bandeau .bandeau-icon { font-size: 1.1em; flex-shrink: 0; }
body.has-bandeau-haut #site-header { top: var(--bandeau-h, 42px); }

/* ---------- Admin ---------- */
.admin-shell { display:flex; min-height: 100vh; }
.admin-side { width: 250px; background: var(--ink); color: #e8e5dc; flex: none; padding: 1.6em 1.2em; }
.admin-side a { display:block; color:#cfcabd; padding:0.6em 0.7em; border-radius: var(--radius); font-size:0.92rem; }
.admin-side a:hover, .admin-side a.active { background: rgba(255,255,255,0.07); color:#fff; text-decoration:none; }
.admin-side .grp { font-family:'Arial Narrow', 'Oswald',sans-serif; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass); margin: 1.2em 0 0.3em 0.7em; }
.admin-main { flex: 1; padding: 2.2em 2.6em; background: var(--paper-soft); }
.admin-box { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.8em; margin-bottom: 1.6em; }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 1.6em; }
.block-editor { border:1px solid var(--line); border-radius: var(--radius); padding:1.4em; margin-bottom:1.2em; background: var(--paper); }
.block-editor .block-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1em; }
.block-editor .block-type { font-family:'Arial Narrow', 'Oswald',sans-serif; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--brass); }
.btn-row { display:flex; gap:0.6em; flex-wrap:wrap; }
table.admin-table { width:100%; border-collapse: collapse; }
table.admin-table th, table.admin-table td { text-align:left; padding:0.7em 0.6em; border-bottom:1px solid var(--line); font-size:0.92rem; }
.thumb-60 { width:60px; height:60px; object-fit:cover; border-radius:4px; }
.login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--ink); }
.login-box { background:#fff; padding:2.6em; width:100%; max-width:380px; border-radius:6px; border-top:6px solid var(--flame); }

/* La marge sous le logo vivait dans un attribut style du gabarit, ou la mise
   en page du telephone ne pouvait pas la reprendre. */
.admin-side .logo { margin-bottom: 1.6em; }

@media (max-width: 800px) {
  .admin-shell { flex-direction: column; }
  .admin-main { padding: 1.4em; }

  /* Le menu prenait l ecran entier : quatorze entrees empilees les unes sous
     les autres, qu il fallait toutes depasser avant d atteindre la page qu on
     venait modifier. Il s etale desormais en lignes.

     Pas de defilement lateral, pour la raison deja donnee aux onglets de
     l espace : un menu qui defile cache ses entrees sans le dire. Ici tout
     reste visible, et les intertitres gardent leur ligne a eux — ce sont eux
     qui disent ou finit le contenu du site et ou commence le compte. */
  .admin-side {
    width: 100%;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.2em 0.15em;
    padding: 0.9em 1em;
  }
  .admin-side .logo { flex: 1 0 100%; margin-bottom: 0.5em; }
  .admin-side .grp { flex: 1 0 100%; margin: 0.6em 0 0 0.2em; }
  .admin-side a { padding: 0.35em 0.6em; font-size: 0.85rem; }
}

/* ---------- Espace du club ----------
   Une coquille a part de l'administration : on y arrive sur un telephone, au
   stand, pour saisir une seance en deux minutes. D'ou des cartes empilees
   plutot qu'un tableau, et des zones tactiles qui ne se ratent pas avec des
   doigts froids. */
body.espace { background: var(--paper-soft); }

.espace-tete {
  display:flex; align-items:center; gap:1.2em; flex-wrap:wrap;
  background: var(--ink); color:#e8e5dc; padding: 0.9em 1.4em;
}
/* Sur un large ecran, ce conteneur s'efface : marque, onglets et compte
   redeviennent trois elements cote a cote, le compte pousse a droite par le
   flex:1 des onglets. Il ne reprend corps qu'en dessous de 700 px, ou marque
   et compte doivent tenir sur une meme ligne au-dessus des onglets. */
.espace-haut { display: contents; }

.espace-marque { display:flex; align-items:center; gap:0.6em; color:#fff; font-weight:600; }
.espace-marque:hover { text-decoration:none; }
/* L'ordre du source place le compte juste apres la marque, parce que les deux
   forment un bloc sur telephone. Sur large ecran, « order » les redispose :
   marque, onglets, compte — et le flex:1 des onglets pousse le compte a
   droite. C'est la seule facon d'avoir les deux dispositions sans ecrire les
   liens deux fois dans le gabarit. */
.espace-nav { display:flex; gap:0.3em; flex-wrap:wrap; flex:1; order: 2; }
.espace-compte { order: 3; }
.espace-nav a {
  color:#cfcabd; padding:0.55em 0.9em; border-radius: var(--radius); font-size:0.94rem;
}
.espace-nav a:hover, .espace-nav a.active { background: rgba(255,255,255,0.09); color:#fff; text-decoration:none; }
.espace-compte { display:flex; gap:0.9em; flex-wrap:wrap; font-size:0.85rem; }
.espace-compte a { color:#a9a396; }
.espace-compte a:hover { color:#fff; }

/* Entre le telephone et le grand ecran, le septieme onglet fait deborder la
   rangee et « Le stock » tombe seul sur une deuxieme ligne, sous les six
   autres. Un pas et une taille un peu plus serres les tiennent ensemble
   jusque vers mille pixels, ce qui couvre les portables du club. */
@media (min-width: 701px) and (max-width: 1200px) {
  .espace-tete { gap: 0.8em; padding: 0.9em 1em; }
  .espace-nav { gap: 0.15em; }
  .espace-nav a { padding: 0.5em 0.6em; font-size: 0.9rem; }
  .espace-compte { gap: 0.7em; font-size: 0.82rem; }
}

.espace-main { max-width: 760px; margin: 0 auto; padding: 1.8em 1.2em 4em; }
.espace-main h1 { margin: 0 0 1.2em; }

.espace-carte {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.5em; margin-bottom: 1.4em;
}
.espace-carte h2 { margin: 0 0 0.9em; font-size: 1.1rem; }
.espace-carte summary { cursor: pointer; list-style: revert; }
.espace-carte summary h2 { margin: 0; }

.espace-grille { display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.2em; }

.doux { color: var(--text-soft); }
.espace-score { font-size: 2.4rem; line-height:1; margin: 0 0 0.3em; }
.espace-score .doux { font-size: 1.2rem; }

.etiquette {
  display:inline-block; background: var(--ink); color:#fff; border-radius: 999px;
  padding: 0.15em 0.7em; font-size: 0.72rem; letter-spacing:0.05em; text-transform:uppercase;
}

/* Le curseur et son echelle : la valeur exacte compte moins que la tendance,
   donc pas de nombre affiche — c'est ce qui evite de se demander si « 3 »
   voulait dire la meme chose la semaine derniere. */
.espace-curseur input[type=range] { width:100%; }
/* La note en clair, a droite du libelle : c est elle qu on cherche des yeux. */
.espace-curseur-tete { display:flex; justify-content:space-between; align-items:baseline; gap:1em; }
.espace-curseur-note { font-weight:700; font-size:1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Les chiffres de l echelle, chacun sous la position qu il designe. Le retrait
   des deux cotes vaut a peu pres la moitie du bouton du curseur : le 1 et le 5
   tombent sous son centre, pas sous les bords de la piste. */
.espace-echelle { display:flex; justify-content:space-between; padding: 0 0.3em; font-size:0.78rem; color: var(--text-soft); }

.espace-record {
  background:#fdf6e3; border:1px solid #ecdcae; border-radius: var(--radius);
  padding: 0.8em 1em; margin: 0 0 0.4em;
}
.espace-records-detail { display:flex; gap:1.4em; flex-wrap:wrap; font-size:0.85rem; margin:0 0 1.2em; }

.espace-seances { list-style:none; padding:0; margin:0; }
.espace-seances > li { border-top:1px solid var(--line); padding: 1em 0; }
.espace-seances > li p { margin: 0.25em 0; font-size: 0.9rem; }
.espace-seance-tete { display:flex; align-items:center; gap:0.8em; flex-wrap:wrap; }
.espace-seance-tete strong { font-size:1.15rem; }
.espace-modifier { margin-left:auto; font-size:0.85rem; }

.espace-formateur {
  background: var(--paper-soft); border-left:3px solid var(--brass);
  padding: 0.6em 0.9em; margin-top: 0.6em; border-radius: 0 var(--radius) var(--radius) 0;
}
.espace-formateur p { margin: 0.2em 0; font-size:0.88rem; }

@media (max-width: 700px) {
  /* Sur un telephone, les cinq onglets ne tiennent pas sur une ligne et se
     repartissaient en trois, la marque coincee au milieu : l'en-tete avait
     l'air casse. On empile — marque et compte sur une ligne, onglets sur la
     suivante — et les onglets defilent lateralement plutot que de retourner
     a la ligne. C'est ce que fait n'importe quelle application, donc ce que
     le pouce cherche deja. */
  .espace-tete { flex-direction: column; align-items: stretch; gap: 0.7em; padding: 0.8em 1em; }
  .espace-haut { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }
  /* Les onglets reviennent a la ligne plutot que de defiler lateralement.
     Un defilement les aurait caches sans le dire : sur six onglets, un
     moniteur en voyait trois et rien n'indiquait que les autres existaient.
     Deux lignes d'en-tete coutent moins cher qu'un ecran qu'on ne trouve
     pas. */
  .espace-nav {
    flex-wrap: wrap; gap: 0.15em 0.1em;
    /* Sans min-width: 0, un element flex refuse de descendre sous la largeur
       de son contenu : le menu elargissait la page entiere. */
    min-width: 0;
  }
  /* Sept onglets tiennent en deux rangees, mais de justesse : quelques
     dixiemes de moins sur le pas et la taille rendent une vingtaine de
     pixels au contenu, sur un en-tete qui en prenait deja cent cinquante. */
  .espace-nav a { white-space: nowrap; padding: 0.4em 0.6em; font-size: 0.85rem; }
  .espace-compte { font-size: 0.78rem; gap: 0.7em; }

  .espace-grille { grid-template-columns: 1fr; }
  .espace-main { padding: 1.2em 0.9em 3em; }
  .espace-carte { padding: 1.1em; }

  /* Deux boutons qui ne tiennent pas cote a cote reviennent a la ligne.
     Sans flex-grow ils gardent chacun la largeur de son texte, et la pile
     a l'air deboitee — « Compter le stock » large, « Les references »
     etroit, les deux commencant au meme bord. Etires, ils forment une
     colonne reguliere, et chacun devient une cible de la largeur du pouce. */
  .btn-row > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Courbes ----------
   Le SVG est dessine par le serveur dans un repere de 640 unites de large et
   s'etire ensuite : preserveAspectRatio="none" deforme volontairement le
   trace en largeur, ce qui n'a pas d'importance : le SVG ne porte plus que
   des traits, et le texte qui les nomme est pose autour, en HTML. */
.graphique { width: 100%; height: auto; display: block; margin: 0.4em 0 0.8em; }

/* Les graduations de toutes les courbes, posees autour du SVG plutot que
   dedans. Le repere de 640 unites est etire a la largeur disponible, donc
   son texte retrecirait avec lui : sur un telephone de 375 px, une etiquette
   de 13 unites tombait a six pixels. En HTML, elle garde sa taille a toutes
   les largeurs. Les positions sont des pourcentages calcules dans le meme
   repere que le trace, donc les deux restent alignes. */
.graphique-cadre { position: relative; }
.graphique-cadre .graphique { margin-bottom: 0; }
.graphique-y, .graphique-abscisses span {
  position: absolute; font-size: 0.72rem; color: var(--text-soft); line-height: 1;
}
/* 5.6 % = les 36 unites qui separent le bord gauche du trace de grille. */
.graphique-y {
  left: 0; width: 5.6%; text-align: right; transform: translateY(-50%);
  /* Une graduation ne se coupe jamais : « 1,5 k » sur deux lignes laisse un
     « k » tout seul, qui ne veut plus rien dire. Elle deborde plutot dans la
     marge de la carte, ou il n y a rien a cacher. */
  white-space: nowrap;
}
.graphique-abscisses { position: relative; height: 1.6em; margin: 0 0 0.8em; }
.graphique-abscisses span { top: 0; transform: translateX(-50%); white-space: nowrap; }
.graphique-abscisses span.debut { transform: none; }
.graphique-abscisses span.fin { transform: translateX(-100%); }

.graphique-vide {
  color: var(--text-soft); font-size: 0.88rem; text-align: center;
  padding: 1.6em 0; margin: 0;
}

.graphique-legende {
  list-style: none; padding: 0; margin: 0 0 0.8em;
  display: flex; gap: 1.2em; flex-wrap: wrap; font-size: 0.85rem;
}
.graphique-legende li { display: flex; align-items: center; gap: 0.4em; }
.graphique-legende span { width: 14px; height: 3px; border-radius: 2px; }

.graphique-donnees { margin-bottom: 1em; }
.graphique-donnees summary { cursor: pointer; font-size: 0.82rem; color: var(--text-soft); }
.graphique-donnees table { width: 100%; border-collapse: collapse; margin-top: 0.6em; }
.graphique-donnees th, .graphique-donnees td {
  text-align: left; padding: 0.35em 0.6em; border-bottom: 1px solid var(--line); font-size: 0.85rem;
}

/* ---------- Liste des tireurs ----------
   L'alerte d'inactivite est portee par une bordure et un fond, jamais par la
   seule couleur du texte : un nom rouge parmi trente noms noirs ne se voit pas
   sur un telephone en plein soleil, et pas du tout pour qui distingue mal le
   rouge. */
.espace-tireurs { list-style: none; padding: 0; margin: 0; }
.espace-tireurs > li {
  display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap;
  padding: 0.75em 0.8em; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.espace-tireurs > li.en-alerte {
  background: #fdf2f0; border-left-color: #c0492c;
}
.espace-tireur-nom { font-weight: 600; }
.espace-categorie { font-size: 0.82rem; }
.espace-derniere { margin-left: auto; font-size: 0.85rem; color: var(--text-soft); }
.espace-tireurs > li.en-alerte .espace-derniere { color: #8a2c1b; font-weight: 600; }

.pastille {
  display: inline-block; border-radius: 999px; padding: 0.15em 0.75em;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.pastille-large { font-size: 0.9rem; padding: 0.3em 1em; margin-right: 0.6em; }

@media (max-width: 700px) {
  .espace-derniere { margin-left: 0; width: 100%; }
}

/* ---------- Competitions ---------- */
.espace-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.5em 1.2em; }
.espace-cases label { display: flex; align-items: center; gap: 0.5em; font-size: 0.92rem; }
.espace-cases input { width: auto; }

.espace-creneau { border-top: 1px solid var(--line); padding-top: 0.9em; grid-template-columns: 2fr 1fr 1fr; }
.espace-creneau:first-of-type { border-top: 0; }

.espace-reponse { border-top: 1px solid var(--line); margin-top: 1em; padding-top: 1em; }

/* Le tableau des inscrits deborde en largeur sur un telephone : il defile dans
   sa propre boite plutot que de faire defiler la page entiere de travers. */
.espace-carte table.admin-table { display: block; overflow-x: auto; }
.espace-carte table.admin-table select { width: auto; margin-right: 0.4em; }

@media (max-width: 700px) {
  .espace-creneau { grid-template-columns: 1fr; }
}

/* Une ligne de l'ecran d'equipe : nom, adresse, deux cases, un bouton. */
.espace-ligne-equipe { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; width: 100%; }
.espace-ligne-equipe label { display: flex; align-items: center; gap: 0.4em; font-size: 0.9rem; }
.espace-ligne-equipe input[type=checkbox] { width: auto; }
.espace-ligne-equipe button { margin-left: auto; }

/* Le lieu d'une competition. Le petit « carte » est discret : il mene hors du
   site, et l'adresse elle-meme suffit a qui ne veut pas y aller. */
.lieu { text-decoration: underline dotted; text-underline-offset: 0.2em; }
.lieu-carte { font-size: 0.82rem; }
.lieu-carte::before { content: "("; }
.lieu-carte::after  { content: ")"; }

/* ---------------------------------------------------------------- Le stock */

/* Les deux etats qui demandent quelque chose. Le rouge est celui des boutons
   dangereux du site, le laiton celui des etiquettes : on ne fabrique pas une
   troisieme palette pour un ecran de plus. */
.etiquette-rupture { background: #8a2222; }
.etiquette-bas     { background: var(--brass); }

/* La carte « a commander », en tete d'ecran : un liseré suffit a la detacher
   des rayons ranges qui suivent, sans en faire une alarme. Ce n'est pas une
   panne, c'est une liste de courses. */
.espace-carte-alerte { border-left: 3px solid var(--flame); }

/* Le calibre, a l'interieur d'un rayon. Plus petit qu'un h2 : c'est un
   intercalaire, pas un titre de section. */
.stock-categorie {
  margin: 1.2em 0 0; font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}
.stock-categorie:first-of-type { margin-top: 0; }


/* Une ligne d'inventaire : une quantite, un nom, un lien, une phrase.
   Une grille et non une rangee souple : ces quatre elements, dans un flex qui
   se replie, se redistribuaient a chaque largeur autrement — sur un telephone,
   l'etiquette « a commander » d'une reference finissait sous le nom de la
   suivante, et « Detail » changeait de place a chaque ligne. Ici la quantite
   est toujours a gauche et le lien toujours a droite : la colonne se parcourt
   du pouce sans rien relire.
   La meme grille sert au catalogue et a l'historique, ou la colonne de gauche
   porte le conditionnement et la quantite du mouvement. */
.stock-ligne {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto;
  column-gap: 1em;
  align-items: baseline;
}
.stock-ligne > p { margin: 0; }

/* Alignee a droite, comme une colonne de chiffres sur une facture : c'est ce
   qui permet de comparer deux lignes sans les lire. */
.stock-ligne-quantite { text-align: right; }
.stock-ligne-quantite strong { display: block; font-size: 1.25rem; line-height: 1.15; }
.stock-ligne-quantite span { font-size: 0.72rem; color: var(--text-soft); }

.stock-ligne-nom { font-size: 1.02rem; }
.stock-ligne-lien { font-size: 0.85rem; white-space: nowrap; }
.stock-ligne-lien form { margin: 0; }

.stock-ligne-note {
  grid-column: 2 / -1;
  /* « anywhere » et non « break-word » : seul le premier reduit la largeur
     minimale de la case, et c est elle qui elargissait la grille entiere. */
  overflow-wrap: anywhere;
  margin-top: 0.4em;
  font-size: 0.88rem;
  color: var(--text-soft);
}
/* L'etiquette d'etat vit dans la phrase qui l'explique : la separer d'« epuise
   vers octobre » ne rendait ni l'une ni l'autre plus claire. */
.stock-ligne-note .etiquette { margin-right: 0.3em; }
.etiquette-inactive { background: var(--text-soft); }

@media (max-width: 700px) {
  /* La colonne des chiffres se resserre, mais elle ne disparait pas : c'est
     elle qui tient l'alignement, et sans elle la liste redevient une suite de
     paragraphes ou l'on ne compare plus rien. */
  .stock-ligne { grid-template-columns: 3.9em minmax(0, 1fr) auto; column-gap: 0.7em; }
  .stock-ligne-quantite strong { font-size: 1.1rem; }
  .stock-ligne-nom { font-size: 0.98rem; }
}

/* Une ligne de saisie du comptage : le nom a gauche, les champs a droite.
   Sur un telephone, les champs passent sous le nom plutot que de se
   comprimer — on les remplit avec un pouce, devant le placard. */
.stock-saisie {
  display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 0.7em 0;
}
.stock-saisie:first-of-type { border-top: 0; }
.stock-saisie-nom { flex: 1 1 12em; min-width: 0; margin: 0; font-size: 0.95rem; }
.stock-saisie-rappel { display: block; font-size: 0.78rem; }

/* « [  ] x 50 + [  ] » doit rester sur une ligne : coupe entre le facteur
   et le second champ, la formule ne se lit plus, et l'on ne sait plus
   lequel des deux champs compte les boites. */
.stock-saisie-champs { display: flex; align-items: center; gap: 0.4em; flex-wrap: nowrap; }
.stock-saisie-champs > span { flex: 0 0 auto; white-space: nowrap; }
/* Assez large pour quatre chiffres, pas plus : une colonne de champs de la
   largeur de la page invite a y ecrire autre chose qu'un nombre.
   min-width:0 parce qu'un <input> refuse par defaut de descendre sous sa
   taille intrinseque — une vingtaine de caracteres — et debordait de la
   carte sur un telephone au lieu de se comprimer. */
.stock-saisie-champs input { width: 4.5em; min-width: 0; margin: 0; text-align: right; }

@media (max-width: 700px) {
  .stock-saisie-champs { width: 100%; }
  .stock-saisie-champs input { flex: 1 1 0; width: auto; }
}

/* La feuille de présence : trente cases à cocher.
   En colonnes automatiques plutôt qu'en une seule liste : trente noms empilés
   font défiler trois écrans, et l'on perd le fil de ceux qu'on a déjà cochés.
   La cible est large (toute la ligne est cliquable, c'est un <label>) parce
   qu'on coche debout, au pas de tir, avec le pouce. */
.cahier-presents {
  list-style: none; padding: 0; margin: 0;
  columns: 3 12em; column-gap: 1.4em;
}
.cahier-presents > li {
  /* Sans cela, un nom se coupe en deux d'une colonne a l'autre. */
  break-inside: avoid;
  margin: 0 0 0.15em;
}
.cahier-presents label {
  display: flex; align-items: baseline; gap: 0.5em;
  padding: 0.35em 0.3em; border-radius: var(--radius); cursor: pointer;
}
.cahier-presents label:hover { background: var(--paper-soft); }
.cahier-presents input { margin: 0; flex: 0 0 auto; }
.cahier-presents .doux { font-size: 0.78rem; }

/* Le bilan de presence, en tete des seances de groupe. Deux lignes et pas une
   barre de progression : « 12 seances sur 15 » se lit d'un coup, une barre
   demande de deviner le denominateur — et c'est justement lui qui compte. */
.espace-assiduite { margin: 0 0 0.6em; }

/* Quand il faut appeler. Un liseré et un fond, comme les tireurs en alerte de
   la liste : la couleur seule du texte ne suffit pas en plein soleil, ni pour
   qui distingue mal le rouge. */
.espace-assiduite-alerte {
  background: #fdf2f0; border-left: 3px solid #c0492c;
  padding: 0.7em 0.9em; margin: 0 0 0.6em;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
}

/* La zone ou l'on depose l'archive de la caisse. C'est un <label> : sans
   JavaScript, un clic ouvre le selecteur de fichiers comme n'importe quel
   champ, et la page fait exactement la meme chose en un geste de plus. */
.caisse-depot {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 2em 1.2em; margin-bottom: 1em;
  background: var(--paper-soft);
}
.caisse-depot:hover, .caisse-depot.survol { border-color: var(--flame); background: #fff; }
.caisse-depot strong { display: block; font-size: 1.05rem; margin-bottom: 0.35em; }
.caisse-depot span { display: block; font-size: 0.85rem; }

/* Le champ reste dans le flux mais discret : le cacher tout a fait le
   retirerait de la navigation au clavier, et la page ne se remplirait plus
   qu'a la souris. */
.caisse-depot input[type=file] {
  display: block; margin: 1em auto 0; max-width: 100%; font-size: 0.85rem;
}
.caisse-choisi { margin: 0 0 1em; }

/* Les tableaux de statistiques de la caisse.
   Un tableau et non une liste : ce sont des colonnes de chiffres qu'on
   compare de haut en bas, et c'est exactement ce a quoi sert un tableau. Il
   defile lateralement dans son cadre plutot que de pousser la page — aucune
   action ne s'y cache, seulement des nombres. */
.tableau-large { overflow-x: auto; }

.stats-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.stats-table th {
  text-align: left; padding: 0 0.7em 0.5em 0;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-soft);
}
.stats-table td {
  padding: 0.5em 0.7em 0.5em 0; border-top: 1px solid var(--line);
  vertical-align: baseline;
}
.stats-table tr:first-child td { border-top: none; }
.stats-table .chiffre { text-align: right; white-space: nowrap; }
.stats-table td.stats-barre { width: 38%; }

/* La barre. Du HTML et une largeur en pourcentage, pas un SVG : le chiffre
   reste a cote en toutes lettres, la page s'imprime, et rien ne retrecit
   avec le dessin sur un telephone. */
.barre {
  display: block; height: 0.55em; min-width: 2.5em;
  background: var(--line); border-radius: 999px; overflow: hidden;
}
.barre > span { display: block; height: 100%; background: var(--flame); border-radius: 999px; }

@media (max-width: 700px) {
  /* La barre est un agrement : sur un telephone, elle prend la place des
     chiffres, qui sont l'information. */
  .stats-table .stats-barre { display: none; }
  .stats-table { font-size: 0.88rem; }
}

/* Choisir un article a regarder de pres. Sur une ligne quand la place le
   permet, empile quand elle manque — c'est un formulaire de trois elements,
   pas un ecran de recherche. */
.caisse-choix {
  display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap;
}
.caisse-choix label { font-size: 0.85rem; color: var(--text-soft); }
.caisse-choix select { flex: 1 1 14em; min-width: 0; margin: 0; }

/* Le second chiffre d'une cellule : la boite en gros, la cartouche dessous.
   Deux unites pour une meme quantite — on range des boites, on tire des
   cartouches — et il fallait les deux sans doubler le tableau. */
.stats-second { display: block; font-size: 0.78rem; line-height: 1.2; }

/* Un petit diagramme dans une grille : son titre reste au-dessus du cadre. */
.espace-grille > div > h3 {
  font-size: 1rem; margin: 0 0 0.4em;
}
.espace-grille > div > h3 .doux { font-weight: 400; font-size: 0.8rem; }

/* ---------------------------------------------------------------------------
   Telephone : ce qui ne peut pas retrecir defile dans sa boite
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  /* Meme remede que pour le tableau des inscrits, et meme raison : un tableau
     de six colonnes ne rentre pas dans 375 px, et le laisser deborder faisait
     defiler la page entiere de travers — on perdait le menu en voulant lire
     une adresse. Il defile desormais dans sa propre boite. */
  table.admin-table { display: block; overflow-x: auto; }

  /* Un champ de saisie dans une cellule poussait la page a 607 px a lui seul :
     il se contente de la place de sa colonne. */
  table.admin-table input,
  table.admin-table select { max-width: 100%; }

  /* Les cellules portent souvent une adresse electronique, qui n a pas plus
     de raison qu un nom de fichier d elargir la page. */
  table.admin-table td { overflow-wrap: anywhere; }
}

/* Le curseur de notation : l'input range porte une marge laterale de 2 px par
   defaut, donc il occupait 254 px dans une boite de 250. Ce n'etait pas qu'un
   depassement : l'echelle chiffree posee dessous fait la largeur de la boite,
   et ses graduations tombaient donc a cote du curseur, decalees de deux pixels
   a chaque extremite. On lit une note sur cette echelle — autant qu'elle dise
   vrai. */
.espace-curseur input[type="range"] { width: 100%; margin-left: 0; margin-right: 0; }