/* ==========================================================================
   Paintball Albi — socle et composants partagés
   Deuxième fichier de la cascade : tokens.css → main.css → pages.css
   Aucune couleur en dur : tout passe par les jetons.
   ========================================================================== */

/* --- Remise à plat ------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: var(--inter-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;  /* filet contre un débordement isolé, jamais une excuse */
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: var(--inter-titre);
  letter-spacing: var(--chasse-titre);
  word-spacing: var(--mots-titre);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

/* --- Accessibilité ------------------------------------------------------ */

/* Un anneau de focus visible, jamais supprimé. La variante :focus-visible
   évite de l'afficher au clic à la souris sans le retirer au clavier. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--trait-epais) solid var(--c-vermillon-sombre);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.saut-contenu {
  position: absolute;
  left: var(--e-4);
  top: -100%;
  z-index: var(--z-notice);
  padding: var(--e-3) var(--e-4);
  background: var(--fond-inverse);
  color: var(--texte-inverse);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top var(--duree-courte) var(--courbe-entree);
}
.saut-contenu:focus { top: 0; }

.lecture-seule-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Conteneurs --------------------------------------------------------- */

.contenu,
.contenu-large {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.contenu       { max-width: var(--contenu-max); }
.contenu-large { max-width: calc(var(--contenu-max) + 8rem); }
.contenu--etroit { max-width: var(--contenu-etroit); }

/* Rythme vertical. Deux sections de même fond qui se suivent additionnent
   leurs marges et creusent un trou visuel : la règle d'adjacence ci-dessous
   supprime le doublon plutôt que d'imposer une alternance stricte. */
.section { padding-block: var(--section-y); }
.section--alterne { background: var(--fond-alterne); }
.section--encre   { background: var(--fond-inverse); color: var(--texte-inverse); }
.section--appel   { background: var(--fond-alterne); text-align: center; }

/* Deux sections de même fond qui se suivent additionnent leurs marges et
   creusent un trou. On ne neutralise donc que les paires de fonds
   identiques, jamais un changement de fond — qui a besoin de son air. */
.section:not([class*="--"]) + .section:not([class*="--"]),
.section--alterne + .section--alterne,
.section--alterne + .section--appel,
.section--encre + .section--encre {
  padding-block-start: 0;
}

/* --- Typographie de page ------------------------------------------------ */

.titre-page   { font-size: var(--t-3xl); font-weight: var(--poids-massif); }
.titre-section { font-size: var(--t-xl); font-weight: var(--poids-gras); margin-block-end: var(--e-4); }

.sur-titre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--poids-gras);
  letter-spacing: var(--chasse-capitale);
  text-transform: uppercase;
  color: var(--appui);
  margin-block-end: var(--e-4);
}
/* Un sur-titre en flex n'est pas centré par text-align : c'est justify-content
   qui décide. Avec une pastille d'un seul côté, les mots paraissent décalés,
   d'où la compensation par le décalage inverse. */
.sur-titre::before {
  content: "";
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: var(--r-plein);
  background: var(--marque);
  flex: none;
}
.entree--centree .sur-titre { justify-content: center; margin-inline-start: -.75rem; }

.chapo {
  font-size: var(--t-md);
  color: var(--texte-doux);
  max-width: var(--mesure-large);
  margin-block-end: var(--e-5);
}
.texte-large {
  font-size: var(--t-md);
  max-width: var(--mesure-large);
}
.section--encre .chapo,
.section--encre .texte-large { color: var(--texte-inverse); }

/* Le mot frappé par l'impact d'une bille. La bille arrive de la gauche :
   la masse se tasse au point de contact et la matière fuse vers la droite,
   les gouttes suivant cet axe au lieu d'entourer le mot. C'est cette
   orientation qui distingue un impact d'un motif décoratif.

   La forme est portée par un masque et non par un fond coloré : la teinte
   reste le jeton --marque, seule la découpe vient du SVG. Une couleur
   écrite dans le SVG échapperait à tokens.css, que le site tient pour
   unique source de la charte.

   Le SVG est incorporé plutôt que chargé depuis /img : le texte du mot est
   blanc, donc invisible tant que le fond n'est pas peint. Une requête
   séparée le ferait disparaître le temps de son aller-retour — en plein
   sur le titre que Google chronomètre.

   Le tracé n'est pas modifiable ici : il est produit par `npm run tache`,
   qui le réinjecte dans ce fichier. */
.frappe {
  position: relative;
  display: inline-block;
  color: var(--texte-inverse);
  padding-inline: .12em;
  z-index: 0;
}
.frappe::before {
  content: "";
  position: absolute;
  /* Débord large : les projections vivent en dehors de la boîte du mot,
     pas autour de ses lettres. */
  inset: -.26em -.20em -.30em;
  background: var(--marque);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%20100%22%20preserveAspectRatio=%22none%22%20fill=%22black%22%3E%3Cpath%20d=%22M199.9,48.0C199.7,50.2%20198.6,52.4%20197.6,54.6C196.5,56.9%20195.6,59.1%20193.5,61.4C191.3,63.7%20186.3,65.4%20184.6,68.2C182.8,71.0%20189.8,76.6%20183.0,78.0C176.2,79.4%20153.4,76.2%20143.8,76.8C134.3,77.4%20132.2,80.3%20125.6,81.4C118.9,82.5%20110.8,82.5%20103.8,83.2C96.9,84.0%2090.5,85.6%2084.0,85.8C77.5,86.0%2070.9,84.8%2064.8,84.5C58.8,84.2%2052.8,84.5%2047.7,83.8C42.6,83.1%2038.7,81.4%2034.3,80.5C29.9,79.5%2024.5,79.2%2021.2,77.9C17.8,76.5%2016.6,74.0%2014.3,72.3C11.9,70.5%209.0,69.0%207.1,67.1C5.3,65.3%204.2,63.1%203.2,61.0C2.1,59.0%201.4,56.8%200.9,54.6C0.3,52.4%200.0,50.2%200.0,48.0C-0.0,45.8%200.3,43.6%200.8,41.4C1.3,39.2%202.0,37.0%203.0,34.9C4.0,32.8%205.2,30.8%206.6,28.7C8.0,26.6%209.2,24.5%2011.3,22.5C13.4,20.6%2015.2,18.1%2019.0,16.9C22.9,15.8%2029.5,16.3%2034.5,15.7C39.4,15.1%2043.5,14.0%2048.6,13.4C53.6,12.7%2059.0,12.7%2064.9,12.0C70.9,11.3%2077.8,9.0%2084.2,9.2C90.6,9.4%2096.6,12.2%20103.5,13.1C110.4,14.1%20117.1,14.3%20125.4,14.7C133.7,15.1%20143.3,14.9%20153.2,15.4C163.1,15.8%20180.6,15.2%20184.7,17.5C188.9,19.8%20176.9,26.1%20178.0,29.0C179.1,31.9%20187.9,32.8%20191.4,34.8C194.9,36.9%20197.5,39.1%20198.9,41.3C200.4,43.5%20200.2,45.8%20199.9,48.0Z%22/%3E%3Ccircle%20cx=%22178%22%20cy=%2230%22%20r=%223.4%22/%3E%3Ccircle%20cx=%22190%22%20cy=%2222%22%20r=%222.2%22/%3E%3Ccircle%20cx=%22197%22%20cy=%2215%22%20r=%221.4%22/%3E%3Ccircle%20cx=%22182%22%20cy=%2268%22%20r=%222.8%22/%3E%3Ccircle%20cx=%22194%22%20cy=%2276%22%20r=%221.8%22/%3E%3Ccircle%20cx=%22150%22%20cy=%228%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22168%22%20cy=%224%22%20r=%221.6%22/%3E%3Ccircle%20cx=%2210%22%20cy=%2226%22%20r=%222%22/%3E%3Ccircle%20cx=%224%22%20cy=%2270%22%20r=%221.5%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%20100%22%20preserveAspectRatio=%22none%22%20fill=%22black%22%3E%3Cpath%20d=%22M199.9,48.0C199.7,50.2%20198.6,52.4%20197.6,54.6C196.5,56.9%20195.6,59.1%20193.5,61.4C191.3,63.7%20186.3,65.4%20184.6,68.2C182.8,71.0%20189.8,76.6%20183.0,78.0C176.2,79.4%20153.4,76.2%20143.8,76.8C134.3,77.4%20132.2,80.3%20125.6,81.4C118.9,82.5%20110.8,82.5%20103.8,83.2C96.9,84.0%2090.5,85.6%2084.0,85.8C77.5,86.0%2070.9,84.8%2064.8,84.5C58.8,84.2%2052.8,84.5%2047.7,83.8C42.6,83.1%2038.7,81.4%2034.3,80.5C29.9,79.5%2024.5,79.2%2021.2,77.9C17.8,76.5%2016.6,74.0%2014.3,72.3C11.9,70.5%209.0,69.0%207.1,67.1C5.3,65.3%204.2,63.1%203.2,61.0C2.1,59.0%201.4,56.8%200.9,54.6C0.3,52.4%200.0,50.2%200.0,48.0C-0.0,45.8%200.3,43.6%200.8,41.4C1.3,39.2%202.0,37.0%203.0,34.9C4.0,32.8%205.2,30.8%206.6,28.7C8.0,26.6%209.2,24.5%2011.3,22.5C13.4,20.6%2015.2,18.1%2019.0,16.9C22.9,15.8%2029.5,16.3%2034.5,15.7C39.4,15.1%2043.5,14.0%2048.6,13.4C53.6,12.7%2059.0,12.7%2064.9,12.0C70.9,11.3%2077.8,9.0%2084.2,9.2C90.6,9.4%2096.6,12.2%20103.5,13.1C110.4,14.1%20117.1,14.3%20125.4,14.7C133.7,15.1%20143.3,14.9%20153.2,15.4C163.1,15.8%20180.6,15.2%20184.7,17.5C188.9,19.8%20176.9,26.1%20178.0,29.0C179.1,31.9%20187.9,32.8%20191.4,34.8C194.9,36.9%20197.5,39.1%20198.9,41.3C200.4,43.5%20200.2,45.8%20199.9,48.0Z%22/%3E%3Ccircle%20cx=%22178%22%20cy=%2230%22%20r=%223.4%22/%3E%3Ccircle%20cx=%22190%22%20cy=%2222%22%20r=%222.2%22/%3E%3Ccircle%20cx=%22197%22%20cy=%2215%22%20r=%221.4%22/%3E%3Ccircle%20cx=%22182%22%20cy=%2268%22%20r=%222.8%22/%3E%3Ccircle%20cx=%22194%22%20cy=%2276%22%20r=%221.8%22/%3E%3Ccircle%20cx=%22150%22%20cy=%228%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22168%22%20cy=%224%22%20r=%221.6%22/%3E%3Ccircle%20cx=%2210%22%20cy=%2226%22%20r=%222%22/%3E%3Ccircle%20cx=%224%22%20cy=%2270%22%20r=%221.5%22/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: -1;
}

/* --- Bandeau d'annonce --------------------------------------------------
   Sous l'en-tête, dans le flux : il pousse la page au lieu de la recouvrir,
   et disparaît du flux quand on le ferme. Le fond paille le distingue de
   l'en-tête sans crier : c'est une nouvelle, pas une alerte. */

.bandeau-annonce {
  background: var(--fond-paille);
  border-block-end: var(--trait) solid var(--bordure-forte);
}
.bandeau-annonce__interieur {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  max-width: var(--contenu-max);
  margin-inline: auto;
  padding: var(--e-2) var(--gouttiere);
  font-size: var(--t-sm);
  line-height: var(--inter-dense);
}
.bandeau-annonce .icone { flex: none; color: var(--appui); }
.bandeau-annonce p { flex: 1; font-weight: var(--poids-moyen); }
.bandeau-annonce__fermer {
  flex: none;
  inline-size: var(--cible);
  block-size: var(--cible);
  margin-inline-end: calc(var(--cible-ecart) * -1);
  background: none;
  border: none;
  border-radius: var(--r-plein);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--texte-doux);
  cursor: pointer;
}
.bandeau-annonce__fermer:hover { background: rgba(22, 22, 26, .08); color: var(--texte); }

/* --- Liens -------------------------------------------------------------- */

a { color: var(--lien); }
a:hover { color: var(--lien-survol); }

.texte-riche a,
.chapo a,
p a {
  position: relative;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
/* La cible tactile d'un lien en ligne est étendue par un pseudo-élément
   absolu : épaissir le lien lui-même casserait l'interlignage du paragraphe. */
.texte-riche a::after,
p a::after {
  content: "";
  position: absolute;
  inset-block: calc((var(--cible) - 1em) / -2);
  inset-inline: -.25em;
}

/* --- Boutons ------------------------------------------------------------ */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-block-size: var(--cible);
  padding: var(--e-3) var(--e-5);
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  font-size: var(--t-base);
  line-height: 1.2;
  text-decoration: none;
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-plein);
  cursor: pointer;
  transition: transform var(--duree-instant) var(--courbe-entree),
              box-shadow var(--duree-instant) var(--courbe-entree);
}
.bouton--grand { padding: var(--e-4) var(--e-6); font-size: var(--t-md); }
/* Boutons d'interface — administration, barre d'édition : la cible tactile
   reste à 44 px, seul le texte se resserre. */
.bouton--petit { padding: var(--e-2) var(--e-4); font-size: var(--t-sm); }

.bouton--principal {
  background: var(--accent);
  color: var(--texte);
  box-shadow: var(--ombre-relief);
}
/* L'ombre pleine se rétracte au lieu de disparaître : le bouton s'enfonce
   au lieu de sauter, et la zone cliquable ne bouge pas. */
.bouton--principal:hover,
.bouton--principal:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: var(--ombre-relief-bas);
  color: var(--texte);
}
.bouton--principal:active { transform: translate(4px, 4px); box-shadow: none; }

.bouton--fantome {
  background: transparent;
  color: var(--texte);
}
.bouton--fantome:hover,
.bouton--fantome:focus-visible {
  background: rgba(22, 22, 26, .06);
  color: var(--texte);
}

.section--encre .bouton--fantome {
  border-color: var(--texte-inverse);
  color: var(--texte-inverse);
}

/* --- En-tête ------------------------------------------------------------ */

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--fond);
  border-block-end: var(--trait) solid var(--bordure);
}
.entete__interieur {
  max-width: calc(var(--contenu-max) + 8rem);
  margin-inline: auto;
  padding: var(--e-3) var(--gouttiere);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--texte);
  line-height: 1.05;
  margin-inline-end: auto;
}
.logo__marque {
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: var(--t-lg);
  letter-spacing: var(--chasse-titre);
}
.logo__lieu {
  font-size: var(--t-xs);
  letter-spacing: var(--chasse-capitale);
  text-transform: uppercase;
  color: var(--appui);
}

.nav { display: contents; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}
.nav__liste a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cible);
  color: var(--texte);
  text-decoration: none;
  font-weight: var(--poids-moyen);
}
.nav__liste a:hover { color: var(--accent-texte); }
.nav__liste a[aria-current="page"] {
  color: var(--accent-texte);
  box-shadow: inset 0 -3px 0 var(--accent-bord);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.lien-tel {
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  color: var(--texte);
  text-decoration: none;
  white-space: nowrap;
}

.burger { display: none; }

@media (max-width: 64rem) {
  .burger {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-block-size: var(--cible);
    min-inline-size: var(--cible);
    padding-inline: var(--e-3);
    background: transparent;
    border: var(--trait) solid var(--bordure-forte);
    border-radius: var(--r-plein);
    font-family: var(--police-titre);
    font-weight: var(--poids-gras);
    cursor: pointer;
  }
  .burger__traits,
  .burger__traits::before,
  .burger__traits::after {
    content: "";
    display: block;
    inline-size: 1.1rem;
    block-size: 2px;
    background: currentColor;
  }
  .burger__traits { position: relative; }
  .burger__traits::before { position: absolute; top: -5px; }
  .burger__traits::after  { position: absolute; top: 5px; }

  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-4);
    padding: var(--e-5) var(--gouttiere) var(--e-6);
    background: var(--fond);
    border-block-end: var(--trait) solid var(--bordure);
  }
  .entete { position: sticky; }
  .entete__interieur { position: relative; }
  /* Une ombre portée sépare nettement le panneau du contenu : sans elle,
     le bouton du menu et celui de la page se lisent comme deux boutons
     voisins au lieu de deux plans distincts. */
  .nav[data-ouvert="true"] { display: flex; box-shadow: var(--ombre-flottante); }

  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste a { padding-block: var(--e-2); font-size: var(--t-md); }
  .nav__actions { flex-direction: column; align-items: stretch; }
  .nav__actions .bouton { inline-size: 100%; }
}

/* --- Pied de page ----------------------------------------------------------
   Dernier écran de la visite : il porte la marque plutôt qu'un simple nom
   en gras, et reprend les signatures de la direction — tache, teintes
   d'accent, soulignement qui pousse depuis la gauche. */

.pied {
  background: var(--fond-inverse);
  color: var(--texte-inverse);
  /* Le débord de la carte d'appel final s'ajoute au retrait courant :
     sans lui, la carte recouvrirait la première ligne du pied. */
  padding-block-start: calc(var(--e-8) + var(--debord-carte));
}

.pied__interieur {
  max-width: var(--contenu-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: grid;
  gap: var(--e-7) var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
@media (min-width: 62rem) {
  /* La colonne de marque tient deux fois la largeur des autres : elle
     porte le logo, l'adresse et le repère, là où les suivantes n'ont que
     des listes de liens. */
  .pied__interieur { grid-template-columns: 1.6fr repeat(4, 1fr); }
}

/* Colonne de marque : elle groupe logo, adresse et repère, et se distingue
   des colonnes de liens par sa largeur. */
.pied__marque { display: block; }

.pied__logo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-block-end: var(--e-5);
}
.pied__logo b {
  display: block;
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: var(--t-md);
  line-height: 1.1;
}
.pied__logo i {
  display: block;
  font-style: normal;
  font-size: var(--t-sm);
  color: rgba(255, 253, 247, .68);
}

.pied__image {
  inline-size: 3rem;
  block-size: auto;
  flex: none;
}

.pied__adresse {
  font-style: normal;
  line-height: var(--inter-dense);
  color: rgba(255, 253, 247, .82);
}
.pied__repere {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-block-start: var(--e-3);
  font-size: var(--t-sm);
  font-weight: var(--poids-gras);
  color: var(--c-turquoise);
}

.pied__titre {
  font-size: var(--t-xs);
  letter-spacing: var(--chasse-capitale);
  text-transform: uppercase;
  color: var(--c-orange);
  margin-block-end: var(--e-4);
}

.pied__liste { display: grid; gap: var(--e-3); font-size: var(--t-sm); }

/* Le soulignement pousse depuis la gauche, comme dans la navigation : le
   même geste d'un bout à l'autre de la page. */
.pied__liste a,
.pied__reseaux a {
  position: relative;
  display: inline-block;
  color: var(--texte-inverse);
  text-decoration: none;
}
.pied__liste a::after,
.pied__reseaux a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -3px;
  block-size: 2px;
  background: var(--c-orange);
  border-radius: var(--r-plein);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree-survol) var(--courbe-douce);
}
.pied__liste a:hover::after,
.pied__liste a:focus-visible::after,
.pied__reseaux a:hover::after,
.pied__reseaux a:focus-visible::after { transform: scaleX(1); }

.pied__tel {
  font-family: var(--police-titre);
  font-weight: var(--poids-gras);
  font-size: var(--t-md);
}

.pied__reseaux { display: flex; gap: var(--e-4); margin-block-start: var(--e-5); font-size: var(--t-sm); }

/* Marqueur d'information manquante : visible, jamais masqué. Il vaut mieux
   qu'un horaire absent se voie qu'un horaire inventé. */
.pied__manquant {
  display: inline-block;
  padding: var(--e-1) var(--e-2);
  border: 1px dashed var(--c-orange);
  border-radius: var(--r-sm);
  color: var(--c-orange);
  font-size: var(--t-sm);
}

.pied__bas {
  max-width: var(--contenu-max);
  margin: var(--e-8) auto 0;
  padding: var(--e-4) var(--gouttiere);
  border-block-start: 1px solid rgba(255, 253, 247, .16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-sm);
}

/* Trois billes aux couleurs de la charte : la signature la plus discrète
   de la direction, posée là où elle ne dispute rien au contenu. */
.pied__billes { display: flex; gap: var(--e-2); }
.pied__billes i {
  inline-size: .6rem;
  block-size: .6rem;
  border-radius: var(--r-plein);
}
.pied__billes i:nth-child(1) { background: var(--c-orange); }
.pied__billes i:nth-child(2) { background: var(--marque); }
.pied__billes i:nth-child(3) { background: var(--c-turquoise); }

.pied__signature {
  font-size: var(--t-sm);
  color: rgba(255, 253, 247, .7);
}
.pied__signature a {
  color: rgba(255, 253, 247, .7);
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color var(--duree-survol) var(--courbe-douce);
}
.pied__signature a:hover { color: var(--c-orange); }

.pied__lien-nu {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 253, 247, .7);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
  font-size: var(--t-sm);
}
.pied__lien-nu:hover { color: var(--texte-inverse); }

/* --- Champs de formulaire ----------------------------------------------- */

.champ { display: grid; gap: var(--e-2); margin-block-end: var(--e-5); }
.champ__libelle { font-weight: var(--poids-moyen); }
.champ__saisie { position: relative; display: flex; }

.champ input,
.champ textarea,
.champ select {
  flex: 1;
  min-block-size: var(--cible);
  padding: var(--e-3) var(--e-4);
  /* 16 px minimum : en dessous, iOS zoome de lui-même sur le champ. */
  font-size: max(var(--t-base), 16px);
  background: var(--fond);
  border: var(--trait) solid var(--bordure-forte);
  border-radius: var(--r-md);
}
.champ input:focus,
.champ textarea:focus { outline-offset: 1px; }

.oeil {
  position: absolute;
  inset-inline-end: var(--e-2);
  inset-block: 50% auto;
  translate: 0 -50%;
  min-block-size: var(--cible);
  padding-inline: var(--e-3);
  background: none;
  border: none;
  font-size: var(--t-sm);
  font-weight: var(--poids-moyen);
  color: var(--accent-texte);
  cursor: pointer;
}

.message {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  margin-block-end: var(--e-4);
}
.message--erreur { background: var(--c-erreur-fond); color: var(--c-erreur); }
.message--succes { background: var(--c-succes-fond); color: var(--c-succes); }

/* --- Apparitions au défilement ------------------------------------------
   L'état masqué n'existe que si le script a pu s'exécuter : sans la classe
   .js sur <html>, tout reste visible. main.js pose en plus un filet de
   sécurité au bout de quelques secondes. */

.js .apparait {
  opacity: 0;
  /* Un déplacement court : au-delà d'un demi-rem, l'entrée se remarque
     elle-même au lieu d'accompagner la lecture. */
  translate: 0 .55rem;
  transition: opacity var(--duree-apparition) var(--courbe-douce),
              translate var(--duree-apparition) var(--courbe-douce);
}
.js .apparait.est-visible {
  opacity: 1;
  translate: 0 0;
}

/* Variante claire, pour les fonds photo et les sections encre. */
.bouton--clair {
  background: var(--texte-inverse);
  color: var(--texte);
  border-color: var(--texte-inverse);
}
.bouton--clair:hover,
.bouton--clair:focus-visible { background: var(--fond-alterne); color: var(--texte); }

.sur-titre--clair { color: var(--c-turquoise); }
.titre-section--grand { font-size: var(--t-2xl); }

/* --- Icônes ---------------------------------------------------------------
   Tracé au trait, épaisseur constante. La couleur vient du contexte, ce qui
   évite un jeu d'icônes par teinte. */

.icone {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone--fin { inline-size: 1.15rem; block-size: 1.15rem; }

/* --- Fonds de section -----------------------------------------------------
   Trois teintes claires remplacent l'aplat sombre pour les sections de
   contenu : un noir plein coupe une page claire en deux. */

.section--menthe  { background: var(--fond-menthe); }
.section--abricot { background: var(--fond-abricot); }
.section--paille  { background: var(--fond-paille); }

.section--menthe + .section--menthe,
.section--abricot + .section--abricot,
.section--paille + .section--paille { padding-block-start: 0; }

.duo--paille { background: var(--fond-paille); }
.duo--menthe { background: var(--fond-menthe); }

/* --- Apparition en cascade ------------------------------------------------
   Le décalage suit le rang de l'élément, plafonné : au-delà de cinq, le
   dernier bloc arriverait trop après les autres pour qu'on fasse le lien.
   Le pas reste court, sinon la cascade devient un défilé qu'on attend. */

.js .apparait { transition-delay: calc(min(var(--rang, 0), 5) * 45ms); }

/* ==========================================================================
   EN-TÊTE — état compact au défilement
   ========================================================================== */

.entete {
  transition: box-shadow var(--duree-courte) var(--courbe-entree),
              background-color var(--duree-courte) var(--courbe-entree);
}

/* Une fois la page défilée, l'en-tête se resserre et laisse voir le contenu
   par transparence. Le repli sans backdrop-filter reste un fond opaque :
   un en-tête translucide sur un navigateur qui ne floute pas rendrait le
   texte illisible dès qu'une photo passe dessous. */
.entete[data-defile="true"] {
  box-shadow: 0 .5rem 1.5rem rgba(22, 22, 26, .1);
}
@supports (backdrop-filter: blur(1px)) {
  .entete[data-defile="true"] {
    background-color: color-mix(in srgb, var(--fond) 82%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
  }
}

.entete[data-defile="true"] .entete__interieur { padding-block: var(--e-2); }
.entete[data-defile="true"] .logo__image { scale: .85; }

/* --- Logo ------------------------------------------------------------------
   Chargé au double de sa taille d'affichage : un tracé aussi détaillé
   perdrait ses contours sur un écran à forte densité. */

.logo__texte { display: grid; }

.logo__image {
  inline-size: 2.75rem;
  block-size: auto;
  flex: none;
  transition: rotate var(--duree-survol) var(--courbe-douce);
}
.logo:hover .logo__image { rotate: -6deg; }

/* --- Liens de navigation --------------------------------------------------- */

/* Le soulignement pousse depuis la gauche plutôt que d'apparaître d'un
   bloc : le mouvement suit le sens de lecture. */
.nav__liste a {
  position: relative;
  transition: color var(--duree-instant) var(--courbe-entree);
}
.nav__liste a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: .45rem;
  block-size: var(--trait-epais);
  background: var(--accent-bord);
  border-radius: var(--r-plein);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree-courte) var(--courbe-entree);
}
.nav__liste a:hover::after,
.nav__liste a:focus-visible::after { transform: scaleX(1); }

.nav__liste a[aria-current="page"] { box-shadow: none; }
.nav__liste a[aria-current="page"]::after { transform: scaleX(1); }

/* --- Jauge de lecture ------------------------------------------------------ */

.entete__jauge {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  block-size: var(--trait);
  overflow: hidden;
}
.entete__jauge span {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: linear-gradient(90deg, var(--c-orange), var(--marque), var(--c-turquoise));
  transform: scaleX(var(--progression, 0));
  transform-origin: left;
}
.entete { position: sticky; }

/* ==========================================================================
   RIDEAU D'OUVERTURE
   Une tache de peinture s'étale, porte le nom, puis se retire vers le haut.
   Le contenu est rendu dessous depuis le début : le rideau ne retarde ni
   l'affichage ni la mesure du plus grand rendu de contenu.
   ========================================================================== */

.rideau {
  position: fixed;
  inset: 0;
  z-index: var(--z-notice);
  display: grid;
  place-content: center;
  justify-items: center;
  background: var(--fond);
  animation: rideau-sortie 420ms var(--courbe-sortie) 900ms forwards;
}
.rideau[hidden] { display: none; }

/* Le logo entre par un éclat : il grandit d'un coup, dépasse légèrement
   sa taille, puis se pose. C'est le geste d'une bille qui s'écrase, celui
   que le dessin raconte déjà. */
.rideau__logo {
  display: block;
  inline-size: min(38vw, 11rem);
  scale: 0;
  rotate: -14deg;
  animation: logo-eclate 620ms var(--courbe-entree) forwards;
}
.rideau__logo img { inline-size: 100%; block-size: auto; }

.rideau__marque {
  position: relative;
  margin-block-start: var(--e-4);
  font-family: var(--police-titre);
  font-weight: var(--poids-massif);
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  letter-spacing: var(--chasse-titre);
  color: var(--texte);
  opacity: 0;
  animation: marque-entre 380ms var(--courbe-douce) 380ms forwards;
}

@keyframes logo-eclate {
  0%   { scale: 0; rotate: -14deg; }
  70%  { scale: 1.06; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes marque-entre {
  from { opacity: 0; translate: 0 .6rem; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes rideau-sortie {
  to { translate: 0 -100%; }
}

/* Le rideau est une pure mise en scène : sous mouvement réduit il ne
   s'affiche pas du tout, plutôt que de s'afficher figé puis disparaître. */
@media (prefers-reduced-motion: reduce) {
  .rideau { display: none; }
}

/* Deuxième page consultée dans le même onglet : le rideau ne se joue plus.
   La classe est posée par le script en-tête, avant le premier rendu. */
.rideau-vu .rideau { display: none; }