/* SMMTT Jeunes — hand-written charter CSS, no framework (D-07). */

:root {
  /* Colors — sampled from logo_smm.png, per 01-UI-SPEC.md */
  --color-bg: #FFFFFF;
  --color-surface: #EEF1F8;
  --color-accent: #2A3A85;
  --color-error: #C0392B;
  --color-success-border: #2E7D32;
  --color-success-bg: #E8F5E9;
  --color-brand-yellow: #FDEB04;
  --color-amber-text: #7B4E0E;
  --color-amber-bg: #FFFBEB;
  --color-amber-border: #B7791F;

  /* Neutral structure grays — sketch 004 (07-CONTEXT.md D7-01/D7-05) : gris
     utilitaires, jamais des couleurs de marque, mais tokenisés en :root pour
     satisfaire UX-11 (0 littéral hex hors :root). */
  --color-text: #1A1A1A;
  --color-text-muted: #5A5A5A;
  --color-border: #D6DCEC;
  --color-hover: #F4F6FC;

  /* Grille calendaire mensuelle (10-UI-SPEC.md §Color, amende D-09) — 5
     nouveaux tokens de catégorie ; chpt-jeunes/autre réutilisent
     --color-accent/--color-text-muted directement dans les règles .cat-*. */
  --cat-crit-1: #1E8FA6;
  --cat-crit-2: #7B4FA6;
  --cat-feminine: #C0447D;
  --cat-jeudi-vendredi: #D9600F;
  --cat-dimanche: #3F7A55;
  --cat-chpt-paris: #A65E00;

  /* Spacing scale — multiples of 4, per 01-UI-SPEC.md Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Typography utility classes — 01-UI-SPEC.md Typography table */
.text-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.text-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.text-heading {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.text-display {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

/* Bandeau permanent d'instance archive (Phase 15, D-13/D-06) — première
   chose visible sur toute page, rendue via le global Jinja2
   instance_is_archive (app/deps.py, P-13). Réutilise --color-amber-*
   (déjà employé par .warning-banner) : un avertissement permanent, pas une
   erreur (--color-error) ni un succès. */
.instance-banner {
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-amber-bg);
  color: var(--color-amber-text);
  border-bottom: 1px solid var(--color-amber-border);
  text-align: center;
  font-size: 14px;
}

/* Header / brand lockup */
.site-header {
  padding: var(--space-lg) var(--space-lg) 0 var(--space-lg);
  text-align: center;
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.brand-logo {
  height: 40px;
  width: auto;
}

.brand-wordmark {
  color: var(--color-accent);
}

/* Decorative-only brand highlight (never on interactive elements — UI-SPEC) */
.brand-underline {
  height: 3px;
  width: 64px;
  margin: var(--space-sm) auto 0;
  background-color: var(--color-brand-yellow);
}

main {
  padding: var(--space-xl) var(--space-lg);
}

/* Login card (D-07: sober, centered, minimal) */
.login-card {
  max-width: 360px;
  margin: var(--space-2xl) auto 0 auto;
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-surface);
  border-radius: 8px;
}

.login-card .text-display {
  color: var(--color-accent);
  margin: 0 0 var(--space-lg) 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Mobile-first tap-target exception — 01-UI-SPEC.md Spacing Scale exceptions */
input[type="password"],
input[type="text"],
input[type="file"],
button {
  min-height: 44px;
}

input[type="password"],
input[type="text"] {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-surface);
  border-radius: 4px;
  font-size: 16px;
}

input[type="password"]:focus,
input[type="text"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px var(--space-md);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.btn-secondary {
  background-color: var(--color-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.error-message {
  color: var(--color-error);
  margin-top: var(--space-md);
}

/* Dashboard */
.dashboard-section {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.upload-section {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.empty-state {
  background-color: var(--color-surface);
  padding: var(--space-lg);
  border-radius: 8px;
}

.empty-state a {
  color: var(--color-accent);
}

.success-banner {
  border: 1px solid var(--color-success-border);
  background-color: var(--color-success-bg);
  padding: var(--space-md);
  border-radius: 4px;
}

.warning-banner {
  border: 1px solid var(--color-amber-border);
  background-color: var(--color-amber-bg);
  color: var(--color-amber-text);
  padding: var(--space-md);
  border-radius: 4px;
}

/* Bloc Favoris + Outils fusionné (10-UI-SPEC.md §3, D-14, sketch
   011-favoris-outils-filet LOCKED) — remplace .favorites-bar/.tools-bar (2
   barres horizontales séparées) par 1 seul conteneur grid 2 colonnes égales
   + filet vertical pleine hauteur, en tête de page. */
.fo-block {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  background-color: var(--color-surface);
}

.fo-col {
  display: flex;
  flex-direction: column;
}

.fo-divider {
  background: var(--color-border);
}

.fo-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 12px 12px 4px;
}

.fo-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.fo-item:hover,
.fo-item:focus {
  background-color: var(--color-hover);
}

.fo-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-bg);
  background-color: var(--color-success-border);
}

.fo-icon--fftt {
  background-color: var(--color-accent);
}

.fo-icon--assoconnect {
  background-color: var(--color-amber-border);
}

/* Déviation du sketch 011 (10-UI-SPEC.md §2) : AssoConnect occupe déjà
   --color-amber-border en production, réutiliser l'ambre créerait une
   collision entre 2 favoris de même couleur ; --color-text-muted n'introduit
   aucun nouveau token et convient à un document de référence statique. */
.fo-icon--pdf {
  background-color: var(--color-text-muted);
}

.fo-icon--contacts {
  background-color: var(--color-accent);
}

.fo-arrow {
  margin-left: 8px;
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 11px;
}

/* Grille calendaire mensuelle (10-UI-SPEC.md §1, sketch 012 round 2, D-07..
   D-10/D-13b) — remplace .calendar-annex (liste plate repliée, D-18). */
.cal-switch {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 999px;
  background-color: var(--color-surface);
  padding: 4px;
}

.cal-switch-option {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Phase 15 (D-06/P-02) : "1"/"2" désignent la première et la seconde
   année civile de la saison COURANTE, jamais une année précise — ces
   classes servent n'importe quelle saison sans modification de la feuille
   de style (dérivées par app.season.derive.annee_classe). */
.cal-switch-option.cal-year-1 {
  background-color: var(--color-surface);
}

.cal-switch-option.cal-year-2 {
  background-color: var(--color-hover);
}

.cal-switch-radio:checked + .cal-switch-option {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
}

/* debug 260805-candrier-vide-en-aout-ok-mais : l'ancien couple de règles
   .cal-grid et .cal-list, filtrées par attribut data-cal-month égal à "1",
   forçait display: none — ciblait l'index de mois "1" (septembre) en dur,
   EN PLUS du toggle JS
   (panel.style.display = ... ? "" : "none"). "" ne fait qu'effacer le style
   inline — la règle CSS ci-dessus continuait donc de s'appliquer en
   permanence à l'index 1, rendant septembre impossible à afficher, même
   avec JS actif (voir 10-REVIEW.md WR-02, qui n'avait identifié que le cas
   sans JS). `.cal-panel--hidden` remplace ce mécanisme : appliqué
   server-side sur tous les mois sauf le premier (Jinja `loop.first`), puis
   basculé côté JS via classList — plus jamais de conflit inline/CSS, et ça
   fonctionne pour n'importe quel nombre de mois. */
.cal-panel--hidden {
  display: none;
}

.cal-day-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: center;
}

.cal-day {
  min-height: 44px;
  padding: var(--space-xs);
  border-radius: 4px;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cal-day-btn {
  cursor: pointer;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.cal-day--empty {
  background: transparent;
}

.cal-day.selected {
  border: 2px solid var(--color-accent);
  background-color: var(--color-hover);
}

.cal-day.has-events:hover {
  background-color: var(--color-hover);
}

/* D-13b — SEUL 2e emploi sanctionné de --color-brand-yellow en
   background-color, aux côtés de .date-card--next. */
.cal-day.is-today {
  background-color: var(--color-brand-yellow);
}

.cal-day.is-today .dnum {
  color: var(--color-accent);
  font-weight: 700;
}

.dnum {
  font-size: 14px;
  font-weight: 600;
}

.cal-pill,
.list-dot,
.legend-pill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.legend-pill,
.list-dot {
  width: 9px;
  height: 9px;
}

/* debug 260805-legende-cal-illisible-scroll : .cal-legend n'avait aucune règle CSS —
   les libellés s'affichaient sans saut de ligne ni pastille visible (les .legend-pill
   étaient des <span> restés display:inline, donc width/height sans effet). Chaque
   catégorie est maintenant un item flex discret (.legend-item), avec wrap. */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-xs);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pill-extra {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.cat-chpt-jeunes {
  background-color: var(--color-accent);
}

.cat-chpt-jeunes.is-cloture {
  background: transparent;
  border: 1.5px solid var(--color-accent);
}

.cat-crit-1 {
  background-color: var(--cat-crit-1);
}

.cat-crit-1.is-cloture {
  background: transparent;
  border: 1.5px solid var(--cat-crit-1);
}

.cat-crit-2 {
  background-color: var(--cat-crit-2);
}

.cat-crit-2.is-cloture {
  background: transparent;
  border: 1.5px solid var(--cat-crit-2);
}

.cat-feminine {
  background-color: var(--cat-feminine);
}

.cat-feminine.is-cloture {
  background: transparent;
  border: 1.5px solid var(--cat-feminine);
}

.cat-jeudi-vendredi {
  background-color: var(--cat-jeudi-vendredi);
}

.cat-jeudi-vendredi.is-cloture {
  background: transparent;
  border: 1.5px solid var(--cat-jeudi-vendredi);
}

.cat-dimanche {
  background-color: var(--cat-dimanche);
}

.cat-dimanche.is-cloture {
  background: transparent;
  border: 1.5px solid var(--cat-dimanche);
}

.cat-chpt-paris {
  background-color: var(--cat-chpt-paris);
}

.cat-chpt-paris.is-cloture {
  background: transparent;
  border: 1.5px solid var(--cat-chpt-paris);
}

.cat-autre {
  background-color: var(--color-text-muted);
}

.cat-autre.is-cloture {
  background: transparent;
  border: 1.5px solid var(--color-text-muted);
}

.cal-list {
  margin-top: var(--space-sm);
}

/* debug 260805-legende-cal-illisible-scroll : max-height + overflow-y:auto forçait un
   scroll interne dès que la liste dépassait 220px (5+ événements) — la page doit
   scroller, pas un sous-conteneur (cf. symptoms Bug B). */
.list-scroll {
}

.list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.list-row.selected {
  background-color: var(--color-surface);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.list-date {
  flex: 0 0 52px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.list-label {
  flex: 1 1 auto;
  font-size: 14px;
}

.dashboard-messages-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Dashboard cards (quick 260715-iy9) — one card per action, consistent with the
   message-card / journee-selector surface pattern. */
.dashboard-card {
  background-color: var(--color-bg);
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.dashboard-card .text-heading {
  color: var(--color-accent);
  margin: 0;
}

.dashboard-card .btn {
  align-self: flex-start;
}

/* Sheet links list */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.link-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.link-list a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.link-list a:hover,
.link-list a:focus {
  text-decoration: underline;
}

.dashboard-card code {
  background-color: var(--color-surface);
  padding: 2px var(--space-xs);
  border-radius: 4px;
  font-size: 14px;
  word-break: break-all;
}

/* Full-width action buttons on mobile for one-handed tap */
@media (max-width: 480px) {
  .dashboard-card .btn {
    align-self: stretch;
  }
}

.dashboard-footer {
  margin-top: var(--space-md);
}

/* Messages page (Phase 3, D-17) — mobile-optimized: one card per tranche
   d'âge, xl gap between stacked cards (03-UI-SPEC.md Spacing Scale). */
.messages-section {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.back-link {
  color: var(--color-accent);
  text-decoration: none;
}

.journee-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--color-surface);
  padding: var(--space-lg);
  border-radius: 8px;
}

.journee-selector select,
.form-field select {
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  font-size: 16px;
}

.message-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-surface);
  border-radius: 8px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.message-text {
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.5;
}

.copy-button--success {
  color: var(--color-success-border);
}

/* D-17/03-UI-SPEC.md: full-width Copier button on mobile, one-handed tap */
@media (max-width: 480px) {
  .message-card .copy-button {
    width: 100%;
  }
}

/* Public parent présence form (05-UI-SPEC.md §3, PRES-05/D-07) — mobile-first,
   opened from a WhatsApp link on a parent's phone. Same container rules as
   .messages-section (no new spacing/color token, reused as-is). */
.presence-form-section {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Full-width "Enregistrer ma réponse" submit button on mobile, one-handed tap. */
@media (max-width: 480px) {
  .presence-form-section .btn {
    width: 100%;
  }
}

/* Screen-reader-only utility (06-UI-SPEC.md §1.2) — NEVER display:none, the
   element must stay in the accessibility tree and keyboard-focusable.
   Single declaration reused as-is by plan 06-04 for the dashboard date band. */
.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;
}

/* Cartouche de date — écran parents (06-UI-SPEC.md §2.2, 005-B). Le fond/
   padding vient d'ici ; taille/poids de police vient de la classe utilitaire
   .text-heading appliquée en plus dans le HTML. */
.presence-cartouche {
  background-color: var(--color-surface);
  padding: var(--space-lg);
  border-radius: 8px;
}

/* Reset des styles navigateur par défaut d'un <fieldset> pour hériter du
   même rythme vertical que .form-field existant (dispo/voiture passent de
   <select> à <fieldset>/<legend> de boutons segmentés). */
fieldset.form-field {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

/* Boutons segmentés Oui/Non (06-UI-SPEC.md §2.2) — technique radio sr-only +
   label, réutilisée telle quelle par le plan 06-04 pour la bande de dates. */
.segmented-control {
  display: flex;
  gap: var(--space-sm);
}

.segmented-option {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-accent);
  background-color: var(--color-bg);
  cursor: pointer;
}

.segmented-radio:checked + .segmented-option {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.segmented-radio:focus-visible + .segmented-option {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Bande de cartes-dates Championnat (06-UI-SPEC.md §1.2, D-15) — scroll
   horizontal, une carte par entrée, radio sr-only + label (même technique
   que .segmented-control ci-dessus). */
.journee-band {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  /* Ancre les radios .sr-only (position: absolute) DANS le scroller : sans
     cela leur bloc conteneur est un ancêtre hors de .journee-band, et le
     navigateur n'a aucune boîte vers laquelle défiler quand un radio hors
     écran prend le focus clavier — la bande ne défilait pas (WR-04). */
  position: relative;
}

.date-card {
  min-height: 44px;
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-surface);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  flex-shrink: 0;
  --dc-jx-ink: var(--color-accent);
  --dc-day-ink: var(--color-text-muted);
  --dc-date-ink: var(--color-text);
}

/* SEUL usage de --color-brand-yellow en background-color dans tout le
   fichier — le jaune est une surface, jamais une encre (D-13a). */
.date-card--next {
  background-color: var(--color-brand-yellow);
  color: var(--color-accent);
  border-color: var(--color-brand-yellow);
  --dc-day-ink: var(--color-accent);
  --dc-date-ink: var(--color-accent);
}

/* Le jaune IDENTIFIE la carte « prochaine échéance » ; ce n'est pas un état.
   La carte is_next étant cochée par défaut (dashboard.html), toute règle
   :checked (0,3,0) qui repeint `background-color` s'applique au MÊME élément
   que .date-card--next (0,1,0) et annule le jaune exactement dans l'état par
   défaut — le seul que l'utilisateur voit en arrivant (D-13a). La sélection
   se marque donc par un anneau intérieur : box-shadow inset, jamais rogné par
   l'overflow-x de .journee-band, et qui n'entre pas en concurrence avec
   l'outline de :focus-visible ci-dessous. NE PAS réintroduire de
   `background-color` ici — cf. test_next_card_yellow_wins_cascade_in_default_state. */
.journee-radio:checked + .date-card {
  box-shadow: inset 0 0 0 3px var(--color-accent);
}

/* Sélection d'une carte NON-next : aucun jaune à préserver, le remplissage
   accent reste le signal principal. Spécificité (0,4,0) > (0,1,0). */
.journee-radio:checked + .date-card:not(.date-card--next) {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  --dc-jx-ink: var(--color-bg);
  --dc-day-ink: var(--color-bg);
  --dc-date-ink: var(--color-bg);
}

/* Hiérarchie typographique des cartes-dates (sketch 004 index.html:51-53,
   D7-04) — sélecteurs de classe autonomes, sans lien syntaxique avec
   .date-card, donc hors du périmètre du garde-fou de cascade CR-01. L'encre
   vient des custom properties --dc-*-ink posées ci-dessus (héritées). */
.dc-kind {
  min-height: 1.5em;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dc-day-ink, var(--color-text-muted));
}

.dc-jx {
  min-height: 1.5em;
  font-size: 20px;
  font-weight: 600;
  color: var(--dc-jx-ink, var(--color-accent));
}

.dc-dates {
  min-height: 3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.dc-date {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dc-date-ink, var(--color-text));
}

/* outline-offset NÉGATIF : un anneau extérieur (+2px) est rogné par
   l'overflow-x: auto de .journee-band sur les cartes de bord (WR-04).
   L'outline coexiste avec le box-shadow inset de :checked — les deux
   propriétés sont distinctes, un état sélectionné+focalisé garde les deux. */
.journee-radio:focus-visible + .date-card {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Hero à 3 actions (06-UI-SPEC.md §1.2/§1.3, D-15/D-21, sketch 004 D7-01) —
   un seul des N heros server-rendered est visible à la fois, basculé par le
   script inline du dashboard. */
.journee-hero--hidden {
  display: none;
}

/* Pastille « prochaine échéance » (sketch 004 index.html:56, D7-02) — le
   jaune ne marque QUE le hero is_next (D-13a). */
.badge-next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  align-self: flex-start;
  background-color: var(--color-brand-yellow);
  color: var(--color-accent);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Lignes de largeur uniforme (sketch 004 index.html:60-67, D7-01) — plus de
   bouton plein navy : filet léger, fond blanc, icône/texte/chevron alignés. */
.hero-action {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 56px;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.hero-action:hover,
.hero-action:focus {
  border-color: var(--color-accent);
  background-color: var(--color-hover);
}

.hero-action--disabled {
  cursor: not-allowed;
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

.criterium-published-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.criterium-published-links a {
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.hero-action-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 4px;
  background-color: var(--color-surface);
  color: var(--color-accent);
  display: grid;
  place-items: center;
}

.hero-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.hero-action-title {
  font-weight: 600;
  color: var(--color-accent);
}

.hero-action-subtitle {
  color: var(--color-text-muted);
}

.hero-action-go {
  color: var(--color-text-muted);
  flex: 0 0 auto;
}

.criterium-section {
  max-width: 720px;
}

.criterium-section h1,
.criterium-section h2 {
  color: var(--color-accent);
  margin: 0;
}

.criterium-section form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.criterium-section input[type="file"] {
  min-height: 44px;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 16px;
}

.criterium-section input[type="file"]:focus-visible,
.criterium-section .btn:focus-visible,
.criterium-section a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.criterium-section .link-list {
  overflow-wrap: anywhere;
}

/* Import contacts Google (Phase 9, 09-UI-SPEC.md) — même forme que
   .dashboard-section, nouvelle classe (720px, page desktop). */
.contacts-import-section {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contacts-import-section table {
  width: 100%;
  border-collapse: collapse;
}

.contacts-import-section th {
  background-color: var(--color-surface);
  color: var(--color-accent);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-weight: 600;
}

.contacts-import-section td {
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
}

input[type="checkbox"] {
  accent-color: var(--color-accent);
}

/* WR-05 (09.1-REVIEW.md) : lockup icône + titre de page (ex. l'en-tête de
   /evaluations) — même layout que .brand-lockup mais avec le gap "md",
   extrait ici plutôt que laissé en `style="..."` inline dans le template
   (discipline du dépôt : tout le layout passe par style.css). */
.page-header-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Classement mensuel — page écran et prévisualisation du PDF mural. */
.ranking-page {
  max-width: 1120px;
  margin: 0 auto;
}
.ranking-page-logo { width: 52px; height: 52px; object-fit: contain; }
.ranking-intro { max-width: 680px; color: var(--color-text-muted); }
.ranking-controls { display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); margin: var(--space-lg) 0; padding: var(--space-md); background: var(--color-surface); border-radius: 8px; }
.ranking-generate-form, .ranking-actions { display: flex; align-items: end; gap: var(--space-sm); flex-wrap: wrap; }
.ranking-generate-form label { font-size: 14px; font-weight: 600; }
.ranking-generate-form select { min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); font-size: 16px; }
.ranking-message { padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; border-radius: 4px; }
.ranking-message--error { color: var(--color-error); border: 1px solid var(--color-error); }
.ranking-message--success { color: var(--color-success-border); background: var(--color-success-bg); border: 1px solid var(--color-success-border); }
.ranking-population-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.ranking-population-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); color: var(--color-text); border: 2px solid var(--color-border); border-radius: 8px; text-decoration: none; }
.ranking-population-card strong { color: var(--color-accent); font-size: 18px; }
.ranking-population-card span:last-child { color: var(--color-text-muted); }
.ranking-population-card--active { border-color: var(--color-accent); background: var(--color-surface); }
.ranking-print-sheet { padding: var(--space-lg); border: 1px solid var(--color-border); }
.ranking-print-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.ranking-print-header img { width: 44px; height: 44px; object-fit: contain; }
.ranking-print-header h2 { margin: 0; color: var(--color-accent); }
.ranking-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th { padding: var(--space-sm); color: var(--color-accent); background: var(--color-surface); text-align: left; font-size: 13px; }
.ranking-table td { padding: 7px var(--space-sm); border-bottom: 1px solid var(--color-border); font-size: 14px; vertical-align: top; }
.ranking-points { color: var(--color-accent); font-weight: 700; text-align: right; }
.ranking-license { display: block; color: var(--color-text-muted); font-size: 11px; }
.ranking-generated { margin: var(--space-md) 0 0; color: var(--color-text-muted); font-size: 12px; }
.ranking-history-title { margin-top: var(--space-xl); color: var(--color-accent); }
.ranking-history-row { display: grid; grid-template-columns: 1fr 100px 100px; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.ranking-history-row a { color: var(--color-accent); }
.ranking-not-ready { color: var(--color-text-muted); }

@media (max-width: 600px) {
  .ranking-controls, .ranking-generate-form, .ranking-actions { align-items: stretch; flex-direction: column; }
  .ranking-generate-form select, .ranking-generate-form button, .ranking-actions .btn { width: 100%; }
  .ranking-population-cards, .ranking-columns { grid-template-columns: 1fr; }
  .ranking-history-row { grid-template-columns: 1fr 76px 76px; font-size: 14px; }
}

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .site-header, .ranking-intro, .ranking-controls, .ranking-population-cards, .ranking-history-title, .ranking-history { display: none !important; }
  main { padding: 0; }
  .ranking-page, .ranking-print-sheet { max-width: none; border: 0; padding: 0; }
  .ranking-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8mm; }
  .ranking-table th, .ranking-table td { padding: 2mm 1.5mm; }
  .ranking-table { break-inside: auto; }
  .ranking-table tr { break-inside: avoid; }
}