/*
  Socle — remise à zéro, typographie, focus, charpente de page.
  ============================================================================

  Ce que chaque page hérite sans y penser. Trois feuilles plutôt qu'une :
  les jetons changent quand la charte change, la base quand le socle change,
  les composants quand un composant change. Les mélanger rendrait chaque
  modification risquée pour les deux autres.

  Aucune couleur, aucune taille, aucun rayon n'est écrit ici : tout est lu
  dans tokens.css. Seuls les points de bascule apparaissent en clair, une
  media query n'acceptant pas de variable dans sa condition — 640px et
  1024px, les mêmes que --breakpoint-md et --breakpoint-lg.
*/

/* ==========================================================================
   Remise à zéro sobre
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Empêche l'agrandissement automatique du texte en paysage sur iOS, qui
     casse l'échelle typographique sans prévenir. */
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ==========================================================================
   Typographie
   ========================================================================== */

body {
  font-family: var(--font-family);
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-leading);
  color: var(--color-on-surface);
  background-color: var(--color-background);
  /* Une chaîne insécable — une référence, une adresse, un identifiant collé —
     se coupe plutôt que d'élargir la page. C'est la première des deux causes
     de défilement horizontal à 360 px ; l'autre est traitée sur le tableau
     replié, dans components.css. */
  overflow-wrap: break-word;
  /* Le pied reste en bas même sur une page courte, sans hauteur imposée au
     contenu. La seconde déclaration l'emporte là où elle est comprise : sur
     un téléphone, 100vh ignore la barre d'adresse rétractable et vaut plus
     que le visible, ce qui fait défiler une page qui tient pourtant. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/*
  Chaque niveau de titre a sa classe jumelle. Elle sert là où l'apparence d'un
  titre est voulue sans sa place dans le plan du document — la galerie montre
  l'échelle typographique sans semer des <h1> sous des <h2>.
*/
h1,
.text-display-lg {
  /* Conçu pour le téléphone puis élargi : le plus grand titre prend sa
     variante mobile par défaut et s'agrandit au-delà du point de bascule. */
  font-size: var(--text-display-lg-mobile-size);
  font-weight: var(--text-display-lg-mobile-weight);
  line-height: var(--text-display-lg-mobile-leading);
  /* 13 septembre 2026 : titre affirmé, tracking resserré pour l'accompagner. */
  letter-spacing: var(--text-display-lg-mobile-tracking);
  /* Un titre long ne doit jamais élargir la page : les mots très longs se
     coupent plutôt que de déborder. */
  overflow-wrap: break-word;
}

h2,
.text-headline-md {
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-leading);
  overflow-wrap: break-word;
}

h3,
.text-headline-sm {
  font-size: var(--text-headline-sm-size);
  font-weight: var(--text-headline-sm-weight);
  line-height: var(--text-headline-sm-leading);
}

.text-body-lg {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-leading);
}

.text-caption {
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  line-height: var(--text-caption-leading);
  color: var(--color-on-surface-variant);
}

.text-label-caps {
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  line-height: var(--text-label-caps-leading);
  letter-spacing: var(--text-label-caps-tracking);
  text-transform: uppercase;
}

/*
  Surtitre — la ligne courte qui précède un titre et le situe : l'état des
  inscriptions au-dessus du titre d'accueil, la section au-dessus d'un
  intertitre. Même dessin que .text-label-caps, mais teinté de l'accent
  courant : --surtitre-accent vaut le bleu d'action par défaut et se
  substitue localement (l'espace organisateur y pose son anis), exactement
  comme --card-accent le fait pour la carte principale.

  Ce n'est jamais le titre lui-même : un surtitre seul ne dit rien, il ne
  fait qu'annoncer la ligne qui suit.
*/
.surtitre {
  --surtitre-accent: var(--color-primary);
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  line-height: var(--text-label-caps-leading);
  letter-spacing: var(--text-label-caps-tracking);
  text-transform: uppercase;
  color: var(--surtitre-accent);
}

/*
  Chapeau — le paragraphe d'introduction qui suit un titre et dit en une
  phrase ce qu'on attend du visiteur. Plus grand que le texte courant, moins
  appuyé qu'un titre : il porte le ton, jamais l'information critique, qui
  reste dans le corps de la page.
*/
.chapeau {
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-leading);
  color: var(--color-on-surface-variant);
  /* Une mesure plus courte que la colonne : un chapeau qui court sur toute
     la largeur se lit comme du texte courant et perd son rôle. */
  max-width: 44ch;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--motion-quick) var(--motion-ease);
}

a:hover {
  color: var(--color-on-primary-container);
}

/* ==========================================================================
   Focus
   ==========================================================================

   Anneau de 2 px, visible partout. La règle vise `:focus-visible` et non
   `:focus` : un clic à la souris sur un bouton n'a pas à laisser un anneau,
   une tabulation si. Aucune règle du projet ne pose `outline: none` ailleurs
   — supprimer l'anneau rendrait la navigation au clavier impraticable.
*/

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Charpente de page
   ========================================================================== */

/* Lien d'évitement : premier élément focalisable de la page, invisible tant
   qu'il n'a pas le focus. Il évite de traverser l'en-tête à la tabulation. */
.skip-link {
  position: absolute;
  left: var(--space-1);
  top: calc(-1 * var(--space-7));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2);
  border-radius: var(--radius-default);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--text-label-field-weight);
  text-decoration: none;
  transition: top 0.1s ease-out;
}

.skip-link:focus-visible {
  top: var(--space-1);
  color: var(--color-on-primary);
}

/*
  En-tête. Son fond est le blanc pur du fond de page. C'était une contrainte
  jusqu'au 13 septembre 2026 — le fichier de logo portait un pavé blanc
  opaque qui serait apparu sur tout autre fond. Le fichier est maintenant
  détouré : le blanc de l'en-tête n'est plus qu'un choix, révocable, et le
  logo peut désormais se poser sur n'importe quel fond clair.
*/
/* 13 septembre 2026 : shadow-card remplace le simple filet d'antan — l'en-tête
   devient son propre plan, sur lequel le médaillon du logo vient déborder
   (voir .header__medallion). position:relative fixe le contexte d'empilement
   pour que ce débordement reste au-dessus du contenu, jamais dessous. */
.header {
  position: relative;
  z-index: 1;
  background-color: var(--color-background);
  box-shadow: var(--shadow-card);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-block: var(--space-2);
}

/* 13 septembre 2026, second passage : le logo et le nom étaient empilés, ce
   qui donnait sur téléphone un en-tête de 125 px dont toute la moitié droite
   restait vide. Ils forment maintenant un bloc horizontal — la marque à
   gauche, le nom à côté d'elle, sur deux lignes quand la largeur l'impose.
   L'en-tête est plus court et le logo plus grand : les deux à la fois, parce
   que c'est la disposition, pas la taille, qui coûtait la place. */
.header__home {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-on-surface);
  text-decoration: none;
}

.header__home:hover {
  color: var(--color-on-surface);
}

/*
  Médaillon du logo — 13 septembre 2026 : le logo seul se lisait trop
  discrètement dans la refonte amplifiée. Posé dans son propre disque en
  relief (shadow-raised), un geste emprunté aux sceaux d'association, jamais
  employé ailleurs sur ce site.

  Le débordement de moitié sous le bord bas de l'en-tête, prévu au premier
  passage, est abandonné le même jour : mesuré, il ne débordait de rien — le
  nom empilé dessous rendait l'en-tête plus haut que le médaillon, et le
  geste ne se voyait pas. Le disque porte seul le relief, en ligne avec le
  nom.
*/
.header__medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--logo-medallion-mobile);
  height: var(--logo-medallion-mobile);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.logo {
  height: var(--logo-height-mobile);
  width: auto;
  flex: none;
}

/* Deux lignes valent mieux qu'une ligne pleine suivie d'un mot orphelin :
   `balance` répartit le nom au lieu de couper juste avant « Chécy ». */
.header__name {
  text-wrap: balance;
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  line-height: var(--text-label-caps-leading);
  letter-spacing: var(--text-label-caps-tracking);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/*
  Navigation organisateur — visible seulement en colonne large. Cible
  tactile de 44 px sur chaque lien, comme le reste de l'en-tête et du pied.
*/
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
}

/* La déconnexion est un bouton de formulaire, mais se lit comme les liens qui l'entourent. */
.header__nav-logout {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.header__nav-logout:hover {
  color: var(--color-on-primary-container);
}

.main {
  flex: 1 0 auto;
  padding-block: var(--space-3) var(--space-section-gap);
}

/*
  Colonne de contenu. 720px en public : au-delà, une ligne de texte devient
  pénible à suivre. 1200px en organisateur, pour laisser respirer les
  tableaux.
*/
.column {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-margin-mobile);
}

.column--wide {
  max-width: var(--admin-max-width);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Sans ceci, un enfant large — un tableau, un mot interminable — étire la
     colonne et fait défiler la page horizontalement. */
  min-width: 0;
}

/*
  Trois rythmes, et trois seulement. Le défaut (--space-3) sépare des blocs
  de même nature ; --serre regroupe ce qui se lit d'un seul tenant — un
  surtitre et son titre, un titre et son chapeau — ; --loose sépare les
  grandes sections d'une page. Un empilement où tout est à la même distance
  ne hiérarchise rien : c'est le principal défaut corrigé le 13 septembre
  2026.
*/
.stack--serre {
  gap: var(--space-1);
}

.stack--loose {
  gap: var(--space-section-gap);
}

.footer {
  flex: none;
  background-color: var(--color-surface-container);
  border-top: 1px solid var(--color-outline-variant);
  padding-block: var(--space-3);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  color: var(--color-on-surface-variant);
}

.footer p {
  margin-block: var(--space-half);
}

/* Une adresse de courriel est une cible tactile : elle doit mesurer 44 px. */
.footer a {
  display: inline-block;
  min-height: var(--touch-target-min);
  padding-block: var(--space-1);
}

/* Réservé aux lecteurs d'écran : lu, jamais vu. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Au-delà du point de bascule téléphone (640px)
   ========================================================================== */

@media (min-width: 640px) {
  h1,
  .text-display-lg {
    font-size: var(--text-display-lg-size);
    font-weight: var(--text-display-lg-weight);
    line-height: var(--text-display-lg-leading);
    letter-spacing: var(--text-display-lg-tracking);
  }

  .logo {
    height: var(--logo-height);
  }

  .header__medallion {
    width: var(--logo-medallion);
    height: var(--logo-medallion);
  }

  .header__inner {
    padding-block: var(--space-3);
  }

  .main {
    padding-block: var(--space-5) var(--space-section-gap);
  }

  .column {
    padding-inline: var(--space-margin-desktop);
  }
}

/* ==========================================================================
   Préférence de mouvement réduit
   ========================================================================== */

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