/* Berry Flambette — feuille de style unique.
 *
 * Mobile d'abord : les règles de base valent pour le petit écran, et les
 * `min-width` élargissent ensuite. L'inverse obligerait le téléphone — qui est
 * l'écran majoritaire — à charger puis annuler des règles qui ne le concernent
 * pas.
 *
 * AUCUNE POLICE DISTANTE. Une police servie par un tiers est une requête vers
 * ce tiers depuis le navigateur du visiteur, donc un sujet RGPD que le MVP n'a
 * pas à ouvrir. On s'appuie sur les polices du système.
 *
 * Aucun framework, aucun build, aucun préprocesseur : ce fichier est lisible et
 * modifiable par quelqu'un qui n'est pas développeur (règle 8 du dépôt).
 */

:root {
  --encre: #1b1b1b;
  --encre-douce: #545454;
  --fond: #fdfdfb;
  --fond-carte: #ffffff;
  --trait: #d8d5cd;
  --accent: #7a2e1e;        /* terre de Sienne, sobre et lisible */
  --accent-clair: #f3ece6;
  --focus: #0b57d0;
  --rayon: 6px;
  /* La hauteur de la barre collante, MESURÉE au rendu : 46,5 px sur petit
     écran, 52,9 px dès 40rem (le remplissage s'élargit). Elle sert de décalage
     au bloc des rubriques quand celui-ci colle à son tour, et de marge de
     défilement aux ancres — sans quoi la barre recouvrirait leur cible.
     3,6rem = 57,6 px : la plus haute des deux, plus quelques pixels de
     respiration à l'arrivée sur une ancre. */
  --barre: 3.6rem;
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

/* Le lien d'évitement : premier élément focalisable de la page, invisible
   jusqu'à ce qu'on l'atteigne au clavier. */
.evitement {
  position: fixed;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  /* Au-dessus de la barre collante, sans quoi il passerait dessous. */
  z-index: 10;
}
.evitement:focus { left: .5rem; top: .5rem; }

a { color: var(--accent); }
a:focus-visible, .etiquette:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- entête */
/* LA BARRE EST COLLANTE ET NE FAIT QU'UNE LIGNE. Elle suit le lecteur sur
   toute la page, ce qui rend les rubriques atteignables sans remonter — voir
   le commentaire du gabarit HTML pour la raison, qui est une raison de MESURE
   et pas de confort.
   Une ligne, et pas quatre. Mesuré au rendu (Chrome, viewport 380 px) : la
   barre occupe 46,5 px — 6,6 % d'un écran de 700 px. Le bloc des six pastilles
   en occupe 169 sur quatre lignes ; l'emporter dans la barre donnerait 216 px,
   soit 31 % de l'écran gelés en permanence (36 % à 320 px). Le lien
   « Rubriques ↑ » ramène au bloc complet, qui reste en tête de page — un
   geste, sans script. */
.entete {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 2px solid var(--trait);
  padding: .5rem 1rem;
  background: var(--fond-carte);
}
.marque {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.marque a { color: var(--encre); text-decoration: none; }
.marque a:hover { text-decoration: underline; }
.acces { font-size: .85rem; font-weight: 600; color: var(--accent) !important; }

/* Le bloc des rubriques : en tête de page, dans le flux, il défile. Cible du
   lien « Rubriques ↑ » — d'où la marge de défilement, sans quoi la barre
   collante recouvrirait la première ligne du bloc à l'arrivée. */
.rubriques {
  padding: .6rem 1rem .8rem;
  border-bottom: 1px solid var(--trait);
  background: var(--fond-carte);
  scroll-margin-top: var(--barre);
}
.rubriques ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
}
.rubriques a {
  display: block;
  padding: .25rem .55rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  font-size: .9rem;
}
.rubriques a:hover { background: var(--accent-clair); }

/* --------------------------------------------------------------- contenu */
/* La marge de défilement met le contenu SOUS la barre collante quand on
   arrive par le lien d'évitement. */
main { max-width: 46rem; margin: 0 auto; padding: 1rem; scroll-margin-top: var(--barre); }
h1 { font-size: 1.55rem; line-height: 1.25; margin: .6rem 0 .3rem; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: .2rem 0; }
section { margin-bottom: 2rem; }

.baille { color: var(--encre-douce); margin-top: 0; }
.note { color: var(--encre-douce); font-size: .92rem; }
.vide { color: var(--encre-douce); font-style: italic; }

.fil { font-size: .85rem; color: var(--encre-douce); margin-bottom: .8rem; }
.fil a { color: var(--encre-douce); }

/* ----------------------------------------------------------- les cartes */
.cartes { list-style: none; margin: 0; padding: 0; }
.carte {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: .8rem .9rem;
  margin-bottom: .7rem;
}
.carte h3 { margin: .15rem 0 .3rem; }
.carte h3 a { text-decoration: none; }
.carte h3 a:hover { text-decoration: underline; }
.quand {
  margin: 0;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--encre-douce);
}
.lieu { margin: .1rem 0; font-size: .92rem; }
.etiquettes { margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.etiquette {
  display: inline-block;
  background: var(--accent-clair);
  border-radius: 999px;
  padding: .12rem .55rem;
  font-size: .78rem;
  text-decoration: none;
  color: var(--accent);
}

.voir-tout { margin: 1rem 0 0; }
.voir-tout a { font-weight: 600; }

/* ------------------------------------------------------- listes d'index */
.index-mois, .index-rubriques, .tous-mois {
  list-style: none; margin: 0; padding: 0;
}
.index-mois li, .index-rubriques li {
  border-bottom: 1px solid var(--trait);
  padding: .5rem .2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.compte { color: var(--encre-douce); font-variant-numeric: tabular-nums; }

.mois { margin: 0 0 1.2rem; }
.voisins { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; }
.voisins a { font-size: .9rem; }
.tous-mois { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: .87rem; }
.tous-mois li { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .15rem .5rem; }
.tous-mois strong { color: var(--accent); }

/* ---------------------------------------------------- page d'un événement */
.evenement .periodes { padding-left: 1.1rem; }
.evenement .periodes li { margin: .2rem 0; }
.contacts { padding-left: 1.1rem; word-break: break-word; }
.bouton {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: var(--rayon);
  text-decoration: none;
  font-weight: 600;
}
.bouton:hover { background: #5e2317; }

/* `.legal` partage la présentation de `.attribution` : ce sont les mêmes
   couples libellé/valeur, sur les pages légales cette fois. Un second jeu de
   règles identiques se serait décalé du premier à la première retouche. */
.attribution, .legal {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: .8rem .9rem;
  margin: 0 0 1rem;
  font-size: .9rem;
}
.attribution dt, .legal dt { font-weight: 700; color: var(--encre-douce); }
.attribution dd, .legal dd { margin: 0 0 .55rem; }
.attribution dd:last-child, .legal dd:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ pied */
.pied {
  border-top: 2px solid var(--trait);
  margin-top: 2.5rem;
  padding: 1.2rem 1rem 2rem;
  background: var(--fond-carte);
  font-size: .85rem;
  color: var(--encre-douce);
}
.pied p { max-width: 46rem; margin: 0 auto .6rem; }
.menu-pied { font-size: .9rem; }

/* --------------------------------------------------------- écrans larges */
/* Les index longs — 259 communes — se lisent en colonnes dès qu'il y a de la
   place. `columns` est du CSS, pas du script, et se dégrade en une colonne. */
.index-communes { list-style: none; margin: 0; padding: 0; columns: 2; gap: 1.5rem; }
.index-communes li {
  break-inside: avoid;
  border-bottom: 1px solid var(--trait);
  padding: .35rem .2rem;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
}

/* --------------------------------------------------------- écrans larges */
@media (min-width: 40rem) {
  body { font-size: 1.02rem; }
  .entete { padding: .7rem 1.5rem; }
  .rubriques { padding: .6rem 1.5rem .7rem; }
  h1 { font-size: 1.9rem; }
  .carte { padding: 1rem 1.1rem; }
  .index-communes { columns: 3; }
}

@media (min-width: 60rem) {
  main { padding: 1.5rem 1rem 2rem; }
  .index-communes { columns: 4; }
}

/* Dès 75rem, les six pastilles tiennent sur UNE ligne (mesuré : 54 px à
   1 200 px de large). Le bloc peut alors coller sous la barre sans coûter
   d'écran : 107 px au total, 15 % d'un écran de 700 px. Les six rubriques
   restent visibles en permanence — ce qui est le mieux pour la mesure, et
   qu'on ne peut simplement pas offrir au téléphone. */
@media (min-width: 75rem) {
  .rubriques { position: sticky; top: 3.35rem; z-index: 4; }
}

/* Respecte le réglage système : pas d'animation imposée. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}