/* Feuille de style unique de l'application.

   Principes : lisible par des bénévoles non techniciens, utilisable au doigt
   sur un téléphone (achat de billet, espace adhérent, contrôle des entrées),
   et contrastée. Les couleurs de l'association sont injectées par le gabarit
   dans --couleur et --accent : tout le reste s'y adapte. */

:root {
  --couleur: #1a4278;
  --accent: #c8102e;

  --texte: #1c1d21;
  --texte-doux: #5b5f66;
  --fond: #f7f7f5;
  --fond-carte: #ffffff;
  --bord: #dcdcd6;
  --ok: #1f6b45;
  --ok-fond: #e6f4ec;
  --erreur: #a4252b;
  --erreur-fond: #fbeaea;
  --alerte: #8a5a00;
  --alerte-fond: #fdf3e0;

  --rayon: 8px;
  --ombre: 0 1px 2px rgba(16, 18, 20, .06), 0 4px 12px rgba(16, 18, 20, .04);
  --largeur: 72rem;
}

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

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

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
}

/* Lien d'évitement : premier élément focusable de la page, pour accéder au
   contenu sans parcourir tout le menu au clavier. */
.evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--couleur); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.evitement:focus { left: 0; }

/* ---------------------------------------------------------------- bandeau */

.bandeau {
  background: var(--couleur);
  color: #fff;
}
.bandeau-interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.marque {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem;
}
.marque .logo { height: 44px; width: auto; display: block; }

.navigation { flex: 1 1 auto; }
.navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .15rem;
}
.navigation a {
  display: block; padding: .45rem .7rem;
  color: #fff; text-decoration: none;
  border-radius: var(--rayon);
  font-size: .94rem;
  opacity: .92;
}
.navigation a:hover, .navigation a:focus-visible { background: rgba(255,255,255,.16); opacity: 1; }
.navigation a.actif { background: rgba(255,255,255,.22); opacity: 1; font-weight: 600; }

.bandeau-compte { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.bandeau-compte .discret { color: rgba(255,255,255,.85); }

/* Menu replié sur téléphone, sans JavaScript. */
.bascule-menu, .bouton-menu { display: none; }

@media (max-width: 860px) {
  .bouton-menu {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 38px; padding: 8px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.4); border-radius: var(--rayon);
    margin-left: auto;
  }
  .bouton-menu span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .navigation { display: none; flex-basis: 100%; }
  .bascule-menu:checked ~ .navigation { display: block; }
  .navigation ul { flex-direction: column; gap: .1rem; }
  .navigation a { padding: .6rem .7rem; }
  .bandeau-compte { flex-basis: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------- contenu */

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.6rem 1rem 3rem;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .4rem; }
h2 { font-size: 1.22rem; margin: 2rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
p { margin: 0 0 1rem; }
.introduction { color: var(--texte-doux); margin-bottom: 1.6rem; max-width: 56ch; }
.discret { color: var(--texte-doux); font-size: .9em; }
.vide { color: var(--texte-doux); font-style: italic; }

a { color: var(--couleur); }
a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ blocs */

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.grille { display: grid; gap: 1rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.carte-chiffre {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--couleur);
  border-radius: var(--rayon);
  padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.carte-valeur { font-size: 1.7rem; font-weight: 650; line-height: 1.1; }
.carte-libelle { color: var(--texte-doux); font-size: .9rem; }
.carte-precision { color: var(--texte-doux); font-size: .82rem; }

.encart {
  border-radius: var(--rayon);
  padding: .8rem 1rem;
  margin: 0 0 1.2rem;
  border: 1px solid var(--bord);
  background: var(--fond-carte);
  font-size: .95rem;
}
.encart-info { border-left: 4px solid var(--couleur); }
.encart-alerte { border-left: 4px solid var(--alerte); background: var(--alerte-fond); }
.encart-erreur { border-left: 4px solid var(--erreur); background: var(--erreur-fond); }
.encart-ok { border-left: 4px solid var(--ok); background: var(--ok-fond); }
.encart p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- messages */

.message {
  border-radius: var(--rayon);
  padding: .75rem 1rem;
  margin-bottom: 1.2rem;
  border: 1px solid transparent;
}
.message-ok     { background: var(--ok-fond);     border-color: #bfe0cd; color: var(--ok); }
.message-erreur { background: var(--erreur-fond); border-color: #edc4c4; color: var(--erreur); }
.message-info   { background: #eaf0f6;            border-color: #c9d8e6; color: #27496b; }
.message-alerte { background: var(--alerte-fond); border-color: #e8d4a8; color: var(--alerte); }

/* ------------------------------------------------------------ formulaires */

form { margin: 0; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.champ .aide { display: block; color: var(--texte-doux); font-size: .86rem; margin-top: .25rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=url], select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--couleur) 45%, #fff);
  outline-offset: 1px;
}
textarea { min-height: 7rem; resize: vertical; }
.champ-erreur input, .champ-erreur select, .champ-erreur textarea { border-color: var(--erreur); }
.erreur-champ { color: var(--erreur); font-size: .87rem; margin-top: .25rem; }

fieldset { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; margin: 0 0 1.2rem; }
legend { font-weight: 600; padding: 0 .4rem; }

.bouton {
  display: inline-block;
  padding: .6rem 1.1rem;
  font: inherit; font-weight: 600;
  color: #fff; background: var(--couleur);
  border: 1px solid var(--couleur);
  border-radius: var(--rayon);
  text-decoration: none; cursor: pointer;
  /* Cible d'au moins 44 px de haut : utilisable au doigt. */
  min-height: 44px; line-height: 1.5;
}
.bouton:hover { background: color-mix(in srgb, var(--couleur) 85%, #000); color: #fff; }
.bouton-secondaire { background: #fff; color: var(--couleur); }
.bouton-secondaire:hover { background: #f0f0ee; color: var(--couleur); }
.bouton-discret {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff;
  padding: .4rem .8rem; min-height: 0; font-weight: 500; font-size: .88rem;
}
.bouton-discret:hover { background: rgba(255,255,255,.26); color: #fff; }
.bouton-danger { background: var(--erreur); border-color: var(--erreur); }
.bouton-danger:hover { background: #8a1f24; }
.boutons { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; }

/* Petites étiquettes d'état (présent, absent, payé...) : un mot coloré lu
   d'un coup d'œil dans un tableau. */
.etiquette {
  display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: #ececea; color: var(--texte-doux);
}
.etiquette-ok { background: var(--ok-fond); color: var(--ok); }
.etiquette-alerte { background: var(--alerte-fond); color: #8a5a00; }
.etiquette-erreur { background: #fbe9e9; color: var(--erreur); }

/* Bouton réduit, pour les actions répétées ligne par ligne dans un tableau. */
.bouton-petit { padding: .25rem .55rem; font-size: .82rem; }

/* Texte secondaire d'une cellule : plus petit encore que .discret, pour ce
   qui éclaire sans devoir être lu (la date d'une vérification, par exemple). */
.petit { font-size: .82em; }

/* Suivi des paiements : la colonne d'état porte une étiquette, une phrase
   d'explication et la fraîcheur de l'information. Empilées en bloc plutôt
   que séparées par des <br>, elles gardent un interligne régulier et la
   cellule ne s'étire pas sur toute la largeur disponible. */
.paiement-etat .discret { display: block; }
.paiement-etat .etiquette { display: inline-block; margin-bottom: .25rem; }
.paiement-etat { max-width: 18rem; }
.paiement-actions { white-space: nowrap; vertical-align: top; }

/* Action repliée : elle n'occupe qu'une ligne tant qu'on ne l'ouvre pas.
   Sert au remboursement, qui réclame un motif mais ne sert presque jamais. */
.repli-action > summary {
  cursor: pointer; color: var(--couleur); font-size: .85rem; padding: .2rem 0;
}
.repli-action > summary:hover { text-decoration: underline; }
.repli-action form { display: flex; gap: .4rem; margin-top: .4rem; white-space: normal; }
.repli-action input[type="text"] { width: 9rem; }

/* Liste de points de contrôle : un état coloré, puis une explication. */
.liste-etat { list-style: none; padding: 0; margin: 0; }
.liste-etat li { padding: .45rem 0; border-top: 1px solid var(--bord); }
.liste-etat li:first-child { border-top: 0; }
.liste-etat .etiquette { margin-right: .4rem; }

/* Formulaire aligné horizontalement, qui repasse en colonne sur téléphone. */
.ligne-formulaire { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.ligne-formulaire .champ { margin-bottom: 0; }

/* Jauge de progression (collecte, budget). */
.jauge {
  height: 14px; background: #e8e8e4; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--bord);
}
.jauge-remplissage { height: 100%; background: var(--couleur); transition: width .3s; }

/* Diagramme en barres, dessiné en SVG sans bibliothèque extérieure. */
.diagramme { display: block; min-width: 320px; }
.diagramme-barre { fill: var(--couleur); }
.diagramme-valeur { font-size: 10px; fill: var(--texte-doux); }
.diagramme-libelle { font-size: 10px; fill: var(--texte-doux); }
.diagramme-axe { stroke: var(--bord); stroke-width: 1; }

/* --------------------------------------------------------------- tableaux */

.tableau-enveloppe { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tableau {
  width: 100%; border-collapse: collapse; background: var(--fond-carte);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  font-size: .94rem;
}
table.tableau th, table.tableau td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--bord); }
table.tableau th { background: #f1f1ee; font-size: .86rem; text-transform: uppercase; letter-spacing: .02em; color: var(--texte-doux); }
table.tableau tr:last-child td { border-bottom: 0; }
table.tableau tbody tr:hover { background: #fafaf8; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* Un montant ne se coupe jamais entre le nombre et le symbole : « 5 552,00 »
   sur une ligne et « € » sur la suivante se lit mal et fait négligé. */
.nombre, table.tableau tfoot th, table.tableau tfoot td { white-space: nowrap; }

/* Sur téléphone, un tableau de données devient une liste de fiches : plus
   lisible qu'un défilement horizontal pour consulter un adhérent. */
@media (max-width: 680px) {
  table.tableau.fiches, table.tableau.fiches tbody, table.tableau.fiches tr, table.tableau.fiches td { display: block; width: 100%; }
  table.tableau.fiches thead { display: none; }
  table.tableau.fiches tr { border-bottom: 1px solid var(--bord); padding: .5rem 0; }
  table.tableau.fiches td { border: 0; padding: .2rem .7rem; }
  table.tableau.fiches td::before {
    content: attr(data-libelle) " : ";
    font-weight: 600; color: var(--texte-doux);
  }
}

/* ------------------------------------------------------------- historique */

.bloc-histo { margin-top: 2rem; border-top: 1px solid var(--bord); padding-top: .8rem; }
.bloc-histo summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.liste-histo { list-style: none; margin: .8rem 0 0; padding: 0; font-size: .92rem; }
.liste-histo li { padding: .35rem 0; border-bottom: 1px dotted var(--bord); }
.histo-date { color: var(--texte-doux); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- pied */

.pied {
  border-top: 1px solid var(--bord);
  background: var(--fond-carte);
  padding: 1.2rem 1rem;
  font-size: .9rem;
  color: var(--texte-doux);
}
.pied-interieur {
  max-width: var(--largeur); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.pied nav { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ------------------------------------------------- page de connexion seule */

.page-etroite { max-width: 26rem; margin: 2.5rem auto; }

/* ------------------------------------------------------------- impression */

@media print {
  .bandeau, .pied, .boutons, .evitement { display: none !important; }
  body { background: #fff; }
  .carte { box-shadow: none; border-color: #999; }
}

/* ------------------------------------------------- accessibilité (lot 12) */

/* Certaines personnes règlent leur système pour limiter les animations
   (troubles vestibulaires, migraines). On respecte ce choix. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cibles tactiles : au moins 44 px de haut sur écran tactile, y compris pour
   les petits boutons des tableaux. Au doigt, un bouton de 24 px se rate une
   fois sur trois — et le contrôle des entrées se fait sur un téléphone, en
   extérieur, parfois dans le noir. */
@media (pointer: coarse) {
  .bouton, button, input[type="submit"] { min-height: 44px; }
  .bouton-petit { min-height: 38px; padding: .4rem .7rem; }
  summary { padding: .3rem 0; }
}

/* Texte réservé aux lecteurs d'écran : visuellement absent, mais lu. Sert à
   donner un libellé à un élément dont le sens est évident à l'œil mais pas à
   l'oreille. */
.lecture-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Un champ obligatoire mal rempli doit se voir autrement que par la couleur :
   le navigateur affiche son propre message, on ajoute une bordure franche. */
input:not(:placeholder-shown):invalid, textarea:not(:placeholder-shown):invalid {
  border-color: var(--erreur);
}