/* ============================================================================
   COMPOSANTS — chaque bloc réutilisable du site, dans l'ordre d'apparition.
   ========================================================================= */

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--hauteur-header);
  color: var(--texte-sur-sombre);
  background: var(--fond-sombre);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}

/* Sur l'accueil, le header est transparent au-dessus de la photo */
.page-accueil .header:not(.header--plein) {
  background: transparent;
}

.header--plein {
  border-bottom-color: rgba(162, 212, 213, 0.22);
}

.header__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  height: 100%;
}

/* Le logo (ampoule et nom côte à côte) est très large : 40 px de haut
   suffisent pour que le nom reste lisible sans écraser le menu. */
.header__logo img {
  height: 40px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.nav__lien {
  position: relative;
  padding-block: 4px;
  color: var(--texte-doux-sur-sombre);
  text-decoration: none;
  font-size: var(--taille-s);
  font-weight: 600;
  transition: color 0.2s;
}

.nav__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--lagon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__lien:hover,
.nav__lien[aria-current="page"] {
  color: var(--texte-sur-sombre);
}

.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__bouton-menu {
  display: none;
  padding: var(--esp-2);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.nav__bouton-menu svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 899px) {
  .nav__bouton-menu {
    display: block;
  }

  .nav__liste {
    position: fixed;
    inset: var(--hauteur-header) 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: var(--esp-3) var(--marge-laterale) var(--esp-5);
    background: var(--fond-sombre);
    border-top: 1px solid rgba(162, 212, 213, 0.22);
  }

  .nav__liste.est-ouvert {
    display: flex;
  }

  .nav__liste .nav__lien {
    padding: var(--esp-3) 0;
    font-family: var(--police-titre);
    font-size: var(--taille-l);
    font-weight: 400;
    border-bottom: 1px solid rgba(162, 212, 213, 0.16);
  }

  .nav__liste .bouton {
    margin-top: var(--esp-4);
  }
}

@media (min-width: 900px) {
  /* L'écart se resserre sur les écrans moyens pour que les liens et le bouton
     tiennent chacun sur une ligne à côté du logo. */
  .nav__liste {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 5vw - 1.25rem, 2.5rem);
    white-space: nowrap;
  }
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.8rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--rayon-bouton);
  font-family: var(--police-texte);
  font-size: var(--taille-s);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.bouton--principal {
  background: var(--accent);
  color: #fff;
}

.bouton--principal:hover {
  background: var(--turquoise-fonce);
}

.bouton--contour {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}

.bouton--contour:hover {
  background: var(--texte-sur-sombre);
  border-color: var(--texte-sur-sombre);
  color: var(--petrole);
}

/* Un bouton contour sur fond clair se remplit en pétrole */
.section:not(.section--sombre) .bouton--contour:hover {
  background: var(--petrole);
  border-color: var(--petrole);
  color: #fff;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  /* la marge basse laisse la place à la bande de chiffres, en position absolue */
  padding-block: calc(var(--hauteur-header) + var(--esp-6)) calc(var(--esp-6) + 120px);
  color: var(--texte-sur-sombre);
  background: var(--fond-sombre);
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 63, 83, 0.62) 0%, rgba(23, 63, 83, 0.12) 38%, rgba(23, 63, 83, 0.94) 100%);
}

.hero__contenu {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__contenu h1 {
  max-width: 12ch;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.hero__contenu p {
  max-width: 48ch;
  margin-block: var(--esp-4) var(--esp-5);
  font-size: var(--taille-l);
  color: var(--texte-sur-sombre);
}

/* ---------- En-tête des pages intérieures ---------- */

.page-tete {
  position: relative;
  padding-block: var(--esp-6) calc(var(--esp-6) + 30px);
  background:
    url("../assets/decor/boussole.svg") right var(--marge-laterale) top var(--esp-5) / 64px no-repeat,
    var(--fond-sombre);
  color: var(--texte-sur-sombre);
  overflow: hidden;
}

/* La vague qui ferme l'en-tête, reprise de la couverture de la plaquette */
.page-tete::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(28px, 4vw, 56px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C300 6 700 4 1040 22c180 10 320 12 400 6v32H0z' fill='%23a2d4d5' fill-opacity='.55'/%3E%3Cpath d='M0 44c360-22 760-24 1100-8 160 8 270 8 340 4v20H0z' fill='%23fbfcfc'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.page-tete h1 {
  font-weight: 300;
  letter-spacing: -0.02em;
}

.page-tete p {
  max-width: 58ch;
  margin-top: var(--esp-4);
  color: var(--texte-doux-sur-sombre);
  font-size: var(--taille-l);
}

@media (max-width: 599px) {
  .page-tete {
    background-size: 44px, auto;
    background-position: right var(--marge-laterale) top var(--esp-3), 0 0;
  }
}

/* ---------- Chiffres clés ---------- */

.chiffres {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.chiffre {
  padding-top: var(--esp-3);
  border-top: 2px solid var(--lagon);
}

.chiffre__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--titre);
}

.chiffre__label {
  display: block;
  max-width: 24ch;
  margin-top: var(--esp-3);
  font-size: var(--taille-s);
  color: var(--accent);
}

.section--sombre .chiffre__valeur {
  color: var(--texte-sur-sombre);
}

.section--sombre .chiffre__label {
  color: var(--lagon);
}

/* ---------- Cartes ----------
   Fond menthe, coins doux et un petit point en haut à gauche,
   comme les encadrés de la plaquette. */

.carte {
  position: relative;
  padding: var(--esp-4) var(--esp-4) var(--esp-4);
  padding-top: calc(var(--esp-4) + 10px);
  border-radius: var(--rayon-l);
  background: var(--menthe);
}

.carte::before {
  content: "";
  position: absolute;
  top: var(--esp-3);
  left: var(--esp-4);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.carte--sable {
  background: var(--sable-clair);
}

.carte--sable::before {
  background: var(--sable);
}

.carte h3 {
  margin-bottom: var(--esp-2);
  font-family: var(--police-texte);
  font-size: var(--taille-m);
  font-weight: 700;
}

.carte p {
  color: var(--texte-doux);
  font-size: var(--taille-s);
}

/* Sur fond menthe, les cartes passent en blanc pour se détacher */
.section--douce .carte {
  background: var(--fond);
}

.section--douce .carte--sable {
  background: var(--sable-clair);
}

.section--sombre .carte {
  background: rgba(162, 212, 213, 0.1);
}

.section--sombre .carte::before {
  background: var(--lagon);
}

.section--sombre .carte p {
  color: var(--texte-doux-sur-sombre);
}

/* Cartes séparées par des traits, façon colonnes (les pôles) :
   empilées et séparées par un trait horizontal sur mobile,
   côte à côte et séparées par un trait vertical sur grand écran. */
.colonnes {
  display: grid;
}

.colonnes .carte {
  padding-left: 0;
  border-radius: 0;
  background: none;
}

.colonnes .carte::before {
  left: 0;
}

.colonnes .carte + .carte {
  border-top: 1px solid var(--bordure-forte);
}

@media (min-width: 760px) {
  .colonnes {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .colonnes .carte + .carte {
    border-top: 0;
    border-left: 1px solid var(--bordure-forte);
  }

  /* Le texte des colonnes suivantes se décale du trait */
  .colonnes .carte + .carte {
    padding-left: var(--esp-4);
  }

  .colonnes .carte + .carte::before {
    left: var(--esp-4);
  }
}

.carte .pole__role {
  margin-top: var(--esp-4);
  color: var(--accent);
  font-size: var(--taille-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pole__membres {
  margin-top: var(--esp-3);
  padding: 0;
  list-style: none;
  font-size: var(--taille-s);
}

.pole__role + .pole__membres {
  margin-top: var(--esp-2);
}

.pole__membres li + li {
  margin-top: var(--esp-1);
}

/* ---------- Photos ---------- */

.photo {
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: var(--fond-doux);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--paysage {
  aspect-ratio: 4 / 3;
}

/* Image pleine largeur entre deux sections */
.bandeau-photo {
  position: relative;
  margin: 0;
  height: clamp(300px, 58vh, 660px);
  background: var(--marine);
}

.bandeau-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
}

.bandeau-photo figcaption {
  position: absolute;
  right: var(--marge-laterale);
  bottom: var(--esp-3);
  padding: 0.3em 0.9em;
  border-radius: var(--rayon-bouton);
  background: rgba(23, 63, 83, 0.7);
  color: var(--texte-sur-sombre);
  font-size: var(--taille-xs);
}

/* ---------- Vidéos ----------
   Une vignette avec un bouton lecture ; le lecteur YouTube la remplace au clic. */

.video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: var(--petrole);
}

.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.video:hover img {
  transform: scale(1.03);
}

.video__lecture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: auto;
  border-radius: 50%;
  background: rgba(23, 63, 83, 0.82);
  box-shadow: 0 0 0 6px rgba(162, 212, 213, 0.35);
  color: #fff;
  transition: background 0.2s ease;
}

.video__lecture svg {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}

.video:hover .video__lecture,
.video:focus-visible .video__lecture {
  background: var(--turquoise);
}

.video:focus-visible {
  outline: 3px solid var(--sable);
  outline-offset: 3px;
}

.video__duree {
  position: absolute;
  right: var(--esp-3);
  bottom: var(--esp-3);
  padding: 0.2em 0.7em;
  border-radius: var(--rayon-bouton);
  background: rgba(23, 63, 83, 0.8);
  color: var(--texte-sur-sombre);
  font-size: var(--taille-xs);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Repères de travail ----------
   Invisibles pour les visiteurs : ils n'apparaissent qu'en ajoutant ?todo
   à l'adresse de la page. */

.a-completer,
.emplacement {
  display: none;
}

.mode-todo .a-completer {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.15em 0.6em;
  border: 1px dashed currentColor;
  border-radius: var(--rayon);
  color: var(--a-completer);
  font-size: var(--taille-xs);
  font-weight: 600;
}

.mode-todo .emplacement {
  display: grid;
  place-items: center;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-4);
  border: 2px dashed var(--bordure);
  border-radius: var(--rayon-l);
  color: var(--texte-doux);
  text-align: center;
  font-size: var(--taille-s);
}

.mode-todo .emplacement strong {
  font-family: var(--police-titre);
  font-size: var(--taille-m);
  color: var(--texte);
}

/* ---------- Mur de logos partenaires ---------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-5) var(--esp-6);
}

.logos a {
  display: block;
  transition: opacity 0.2s;
}

.logos a:hover {
  opacity: 0.6;
}

.logos img {
  height: 46px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
}

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

.frise {
  display: grid;
  padding: 0;
  list-style: none;
}

.saison {
  display: grid;
  gap: var(--esp-4);
  padding-block: var(--esp-5);
  border-top: 1px solid var(--bordure);
}

.saison:last-child {
  border-bottom: 1px solid var(--bordure);
}

@media (min-width: 820px) {
  .saison {
    grid-template-columns: 160px 1fr 340px;
    gap: var(--esp-5);
    align-items: start;
  }
}

.saison__annee {
  font-family: var(--police-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--titre);
}

.saison__statut {
  display: inline-block;
  margin-left: var(--esp-2);
  padding: 0.3em 0.8em;
  border-radius: var(--rayon-bouton);
  background: var(--sable-clair);
  color: var(--petrole);
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.saison__corps p {
  margin-top: var(--esp-2);
  color: var(--texte-doux);
}

.saison .photo {
  aspect-ratio: 4 / 3;
}

.saison__corps .saison__mandat {
  margin-top: var(--esp-1);
  color: var(--texte-doux);
  font-size: var(--taille-xs);
  font-weight: 600;
}

.saison__corps .saison__mebc {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  padding: 0.2em 0.8em;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--fond);
  color: var(--texte-doux);
  font-size: var(--taille-xs);
  font-weight: 600;
}

.saison__mebc::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.saison__corps .saison__mebc--couru {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--fond);
}

.saison__mebc--couru::before {
  background: currentColor;
}

.saison__bureau {
  color: var(--texte-doux);
  font-size: var(--taille-s);
}

/* Année sans équipe : en retrait */
.saison--pause .saison__annee {
  color: var(--texte-doux);
}

/* ---------- Jalons (genèse) ---------- */

.jalons {
  display: grid;
  gap: var(--esp-4);
  margin: 0;
  padding: 0 0 0 var(--esp-4);
  list-style: none;
  border-left: 2px solid var(--bordure);
}

.jalon {
  position: relative;
}

.jalon::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: calc(-1 * var(--esp-4) - 7px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.jalon__date {
  font-family: var(--police-titre);
  font-size: var(--taille-s);
  font-weight: 600;
  color: var(--accent);
}

.jalon p {
  margin-top: var(--esp-1);
  color: var(--texte-doux);
  font-size: var(--taille-s);
}

/* ---------- Galerie ---------- */

.galerie {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.galerie figure,
.figure-legendee {
  margin: 0;
}

.galerie .photo {
  aspect-ratio: 4 / 3;
}

/* Une grande photo par rangée, à gauche puis à droite (1re, 4e, 5e, 8e, 9e…) :
   la grille respire et chaque rangée de trois colonnes reste pleine */
@media (min-width: 900px) {
  .galerie figure:nth-child(4n + 1),
  .galerie figure:nth-child(4n) {
    grid-column: span 2;
  }

  .galerie figure:nth-child(4n + 1) .photo,
  .galerie figure:nth-child(4n) .photo {
    aspect-ratio: 16 / 9;
  }
}

.galerie figcaption,
.figure-legendee figcaption {
  margin-top: var(--esp-2);
  font-size: var(--taille-xs);
  color: var(--texte-doux);
}

/* ---------- Listes clé-valeur ---------- */

.fiche {
  display: grid;
  margin: 0;
}

.fiche > div {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-block: var(--esp-3);
  border-bottom: 1px solid var(--bordure);
}

.fiche dt {
  color: var(--texte-doux);
  font-size: var(--taille-s);
}

.fiche dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.section--sombre .fiche > div {
  border-bottom-color: rgba(162, 212, 213, 0.2);
}

.section--sombre .fiche dt {
  color: var(--texte-doux-sur-sombre);
}

/* ---------- Vue 3D ---------- */

.vue-3d {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: var(--marine-2);
  color: var(--texte-sur-sombre);
}

.vue-3d:empty {
  display: none;
}

.vue-3d model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}

.credit-3d {
  margin-top: var(--esp-2);
  font-size: var(--taille-xs);
  color: var(--texte-doux);
}

.credit-3d[hidden] {
  display: none;
}

/* ---------- Membres ---------- */

.membre__photo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: var(--esp-3);
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: var(--marine);
  color: var(--texte-sur-sombre);
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: 300;
}

.membre__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.membre h3 {
  font-size: var(--taille-m);
  font-weight: 500;
}

.membre__role {
  color: var(--accent);
  font-size: var(--taille-s);
  font-weight: 700;
}

/* ---------- PJT ---------- */

.pjt .photo,
.pjt .emplacement {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--esp-3);
}

.pjt h3 {
  margin-bottom: var(--esp-1);
  font-size: var(--taille-m);
}

.pjt__membres {
  margin-top: var(--esp-3);
  padding: 0;
  list-style: none;
  font-size: var(--taille-s);
}

.pjt__membres li + li {
  margin-top: var(--esp-1);
}

/* ---------- Formulaire ---------- */

.formulaire {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border-radius: var(--rayon-l);
  background: var(--menthe);
}

.formulaire__ligne {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.champ {
  display: grid;
  gap: var(--esp-1);
}

.champ label {
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
}

.champ textarea {
  min-height: 130px;
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 127, 137, 0.18);
}

.formulaire__piege {
  display: none;
}

.formulaire__message {
  padding: var(--esp-3);
  border-radius: var(--rayon);
  font-size: var(--taille-s);
}

.formulaire__message[hidden] {
  display: none;
}

.formulaire__message--ok {
  background: #e3f3ec;
  color: #14532d;
}

.formulaire__message--erreur {
  background: #fdecec;
  color: #991b1b;
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  padding-block: var(--esp-6) var(--esp-4);
  background: var(--fond-sombre);
  color: var(--texte-doux-sur-sombre);
  font-size: var(--taille-s);
}

/* La double vague de bas de page de la plaquette. Elle mord sur le bas de la
   dernière section, qui a toujours assez de marge pour l'accueillir. */
.footer::before {
  content: "";
  position: absolute;
  inset: auto 0 100%;
  height: clamp(28px, 4vw, 56px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C360 4 720 6 1080 24s300 16 360 8v28H0z' fill='%23a2d4d5'/%3E%3Cpath d='M0 50c420-26 800-22 1120-8 160 7 260 6 320 2v16H0z' fill='%23173f53'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.footer__grille {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.footer img {
  height: 40px;
  width: auto;
  margin-bottom: var(--esp-3);
}

.footer h2 {
  margin-bottom: var(--esp-3);
  color: var(--lagon);
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer ul {
  display: grid;
  gap: var(--esp-2);
  padding: 0;
  list-style: none;
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:hover {
  color: var(--texte-sur-sombre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bas {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid rgba(162, 212, 213, 0.2);
  font-size: var(--taille-xs);
}

/* ---------- Apparition au défilement ---------- */

.apparition {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.apparition.est-visible {
  opacity: 1;
  transform: none;
}

.sans-js .apparition {
  opacity: 1;
  transform: none;
}

/* ---------- Logo dans la photo d'accueil ---------- */

.hero__logo {
  height: clamp(56px, 7vw, 88px);
  width: auto;
  margin-bottom: var(--esp-5);
  /* Le bleu de « GADZ » se perd sur le mur clair : une ombre marquée le détache de la photo */
  filter: drop-shadow(0 1px 3px rgba(23, 63, 83, 0.8)) drop-shadow(0 2px 18px rgba(23, 63, 83, 0.7));
}

/* Le logo est déjà en grand dans la photo : on masque celui du header
   tant qu'on est en haut de l'accueil, il réapparaît au défilement. */
.page-accueil .header:not(.header--plein) .header__logo {
  opacity: 0;
  pointer-events: none;
}

.header__logo {
  transition: opacity 0.25s ease;
}

/* ---------- Bande de chiffres (bas de la photo d'accueil) ---------- */

.bande-chiffres {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(237, 246, 245, 0.93);
  backdrop-filter: blur(6px);
  color: var(--petrole);
}

.bande-chiffres__cellule {
  padding: var(--esp-4) var(--esp-3);
  text-align: center;
  border-left: 1px solid var(--bordure);
}

.bande-chiffres__cellule:first-child {
  border-left: 0;
}

.bande-chiffres__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.1rem, 0.7rem + 1.4vw, 2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.bande-chiffres__exposant {
  font-size: 0.62em;
  font-weight: 400;
}

.bande-chiffres__label {
  display: block;
  margin-top: var(--esp-2);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Sur téléphone, la bande passe sous la photo et se met sur deux colonnes */
@media (max-width: 767px) {
  .hero {
    padding-bottom: 0;
  }

  .hero__contenu {
    margin-bottom: var(--esp-5);
  }

  .bande-chiffres {
    position: static;
    grid-template-columns: repeat(2, 1fr);
    background: var(--menthe);
  }

  .bande-chiffres__cellule {
    border-top: 1px solid var(--bordure);
  }

  .bande-chiffres__cellule:nth-child(odd) {
    border-left: 0;
  }

  .bande-chiffres__cellule:last-child {
    grid-column: 1 / -1;
  }
}

/* ---------- Chantiers (page projets) ---------- */

.chantiers {
  display: grid;
  gap: var(--esp-6);
}

.chantier {
  display: grid;
  gap: var(--esp-5);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--bordure);
}

@media (min-width: 900px) {
  .chantier {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* une fois sur deux, la photo passe à gauche */
  .chantier:nth-child(even) .chantier__texte {
    order: 2;
  }

  /* un chantier sans photo occupe toute la largeur plutôt que la moitié */
  .chantier--sans-photo {
    grid-template-columns: 1fr;
  }

  .chantier--sans-photo .chantier__texte {
    max-width: 62ch;
  }
}

.chantier__numero {
  display: block;
  margin-bottom: var(--esp-3);
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.chantier__texte h2 {
  letter-spacing: -0.01em;
}

.chantier__accroche {
  margin-block: var(--esp-2) var(--esp-3);
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  font-weight: 400;
  color: var(--accent);
}

.chantier__photo {
  aspect-ratio: 4 / 3;
}

/* ---------- Feuille de route (accueil) ---------- */

.roadmap {
  display: grid;
  gap: var(--esp-5);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: etape;
}

@media (min-width: 600px) {
  .roadmap {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-5) var(--esp-4);
  }
}

@media (min-width: 900px) {
  .roadmap {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* On s'arrête à trois colonnes : au-delà, les étapes deviennent trop étroites
   pour que le texte reste lisible. Deux rangées de trois, c'est plus clair. */

.etape {
  position: relative;
  padding-top: var(--esp-4);
  border-top: 2px solid var(--bordure);
}

/* Le jalon sur la ligne */
.etape::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bordure);
}

.etape--termine {
  border-top-color: var(--accent);
}

.etape--termine::before {
  background: var(--accent);
}

/* L'étape en cours porte le point sable, comme la page active de la plaquette */
.etape--en-cours {
  border-top-color: var(--sable);
}

.etape--en-cours::before {
  background: var(--sable);
  box-shadow: 0 0 0 5px rgba(194, 171, 125, 0.28);
}

.etape__periode {
  display: block;
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.etape--en-cours .etape__periode {
  color: var(--petrole);
}

.etape__titre {
  margin-top: var(--esp-2);
  font-size: var(--taille-l);
  font-weight: 400;
}

.etape__texte {
  margin-top: var(--esp-2);
  font-size: var(--taille-s);
  color: var(--texte-doux);
}

.etape__statut {
  display: inline-block;
  margin-top: var(--esp-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.etape--termine .etape__statut {
  color: var(--accent);
}

.etape--en-cours .etape__statut {
  padding: 0.3em 0.8em;
  border-radius: var(--rayon-bouton);
  background: var(--sable-clair);
  color: var(--petrole);
  box-shadow: inset 0 0 0 1px var(--sable);
}

/* ============================================================================
   BLOCS DE LA PAGE PARTENAIRES (et de l'appel au soutien de l'accueil)
   ========================================================================= */

/* ---------- Objectif de financement : le grand encadré menthe ---------- */

.objectif {
  display: grid;
  gap: var(--esp-4) var(--esp-5);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--rayon-l);
  background:
    url("../assets/decor/lignes-vagues.svg") right -20px bottom 12px / 220px no-repeat,
    var(--menthe);
}

@media (min-width: 760px) {
  .objectif {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.objectif__montant {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(3rem, 2rem + 4vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--titre);
}

.objectif__label {
  display: block;
  margin-top: var(--esp-2);
  color: var(--accent);
  font-weight: 700;
}

.objectif__texte {
  max-width: 62ch;
  grid-column: 1 / -1;
  color: var(--texte);
}

.objectif__facons {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--accent);
  font-size: var(--taille-s);
  line-height: 1.3;
}

.objectif__facons strong {
  font-family: var(--police-titre);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--titre);
}

.section--sombre .objectif {
  background:
    url("../assets/decor/lignes-vagues.svg") right -20px bottom 12px / 220px no-repeat,
    rgba(162, 212, 213, 0.1);
}

.section--sombre .objectif__montant,
.section--sombre .objectif__facons strong,
.section--sombre .objectif__texte {
  color: var(--texte-sur-sombre);
}

.section--sombre .objectif__label,
.section--sombre .objectif__facons {
  color: var(--lagon);
}

/* ---------- Deux colonnes « Votre contribution » / « Notre engagement » ---------- */

.echange {
  display: grid;
  gap: var(--esp-5) var(--esp-4);
}

@media (min-width: 860px) {
  .echange {
    grid-template-columns: 1fr 1fr;
  }
}

.echange h3 {
  margin-bottom: var(--esp-4);
  font-size: var(--taille-l);
}

.echange__liste {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ---------- Moyens de soutien (accueil + partenaires) ---------- */

.moyens {
  display: grid;
  gap: var(--esp-4);
  padding: 0;
  margin: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.moyen {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4);
  border-radius: var(--rayon-l);
  background: var(--menthe);
}

.moyen__numero {
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  font-weight: 300;
  color: var(--accent);
}

.moyen h3 {
  font-size: var(--taille-l);
}

.moyen p {
  color: var(--texte-doux);
  font-size: var(--taille-s);
}

.section--sombre .moyen {
  background: rgba(162, 212, 213, 0.1);
}

.section--sombre .moyen__numero {
  color: var(--lagon);
}

.section--sombre .moyen p {
  color: var(--texte-doux-sur-sombre);
}

/* ---------- Niveaux de partenariat ---------- */

.niveaux {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.niveau {
  display: grid;
  gap: var(--esp-2) var(--esp-5);
  padding: var(--esp-4) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border-radius: var(--rayon-l);
  background: var(--menthe);
}

/* Une ligne sur deux en sable, comme dans la plaquette */
.niveau:nth-child(even) {
  background: var(--sable-clair);
}

@media (min-width: 760px) {
  .niveau {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
}

.niveau__montant {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  font-weight: 400;
  color: var(--titre);
}

.niveau__nom {
  display: block;
  margin-top: var(--esp-1);
  color: var(--accent);
  font-weight: 700;
}

.niveau__note {
  display: block;
  margin-top: var(--esp-1);
  color: var(--texte-doux);
  font-size: var(--taille-xs);
}

.niveau p {
  color: var(--texte);
  font-size: var(--taille-s);
}

.note {
  margin-top: var(--esp-4);
  color: var(--texte-doux);
  font-size: var(--taille-xs);
}

/* ---------- Budget prévisionnel : barres horizontales ----------
   Une seule série, une seule couleur : la valeur est écrite à côté
   de chaque barre, pas besoin de légende. */

.budget {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.budget__ligne {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr 3.8rem;
  gap: var(--esp-3);
  align-items: center;
  font-size: var(--taille-s);
}

.budget__piste {
  height: 14px;
  border-radius: 4px;
  background: var(--fond);
}

.budget__barre {
  display: block;
  width: var(--part);
  height: 100%;
  border-radius: 4px;
  background: var(--turquoise);
  transition: background 0.2s;
}

.budget__ligne--principale .budget__barre {
  background: var(--petrole);
}

.budget__ligne:hover .budget__barre {
  background: var(--petrole-2);
}

.budget__valeur {
  font-weight: 700;
  color: var(--titre);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .budget__ligne {
    grid-template-columns: 1fr auto;
  }

  .budget__ligne {
    gap: var(--esp-1) var(--esp-3);
  }

  .budget__piste {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ---------- Encadré texte (pourquoi nous soutenir, contacts) ---------- */

.encadre {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--rayon-l);
  background: var(--menthe);
}

.encadre--sable {
  background: var(--sable-clair);
}

.encadre p + p {
  margin-top: var(--esp-3);
}

.contacts {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: var(--esp-4);
}

.contacts h3 {
  margin-bottom: var(--esp-2);
  color: var(--accent);
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contacts ul {
  display: grid;
  gap: var(--esp-1);
  padding: 0;
  list-style: none;
  font-size: var(--taille-s);
}

.contacts__email {
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  text-decoration: none;
}

.contacts__email:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================================
   BLOCS DE LA PAGE PARTENARIAT
   ========================================================================= */

/* ---------- Frise du financement réuni (dans l'en-tête sombre) ----------
   Une seule valeur face à un objectif : une jauge, la piste dans un ton plus
   clair de la même couleur, et des graduations tous les 10 000 €. */

.collecte {
  max-width: 880px;
  margin-top: var(--esp-5);
  padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
  border: 1px solid rgba(162, 212, 213, 0.22);
  border-radius: var(--rayon-l);
  background: rgba(162, 212, 213, 0.08);
}

.collecte__chiffres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
}

.collecte__reuni {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--texte-sur-sombre);
}

.collecte__sur {
  display: block;
  margin-top: var(--esp-2);
  color: var(--texte-doux-sur-sombre);
}

.collecte__sur strong {
  color: var(--texte-sur-sombre);
  font-weight: 700;
  white-space: nowrap;
}

.collecte__pourcent {
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: 300;
  line-height: 1;
  color: var(--lagon);
}

.collecte__piste {
  height: 16px;
  margin-top: var(--esp-4);
  border-radius: 4px;
  background: rgba(162, 212, 213, 0.18);
  overflow: hidden;
}

/* La barre se remplit quand la frise apparaît à l'écran (voir js/main.js) */
.collecte__barre {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--lagon);
  transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s;
}

.collecte.est-visible .collecte__barre {
  width: var(--part);
}

.collecte__graduations {
  position: relative;
  height: 2.2em;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--texte-doux-sur-sombre);
  font-size: var(--taille-xs);
  font-variant-numeric: tabular-nums;
}

.collecte__graduations li {
  position: absolute;
  top: 0;
  left: var(--position);
  padding-top: 10px;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Le petit trait de chaque graduation, sous la jauge */
.collecte__graduations li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 1px;
  height: 6px;
  background: rgba(162, 212, 213, 0.5);
}

.collecte__graduations li:first-child {
  transform: none;
}

.collecte__graduations li:first-child::before {
  left: 0;
}

.collecte__graduations li:last-child {
  transform: translateX(-100%);
}

.collecte__graduations li:last-child::before {
  left: auto;
  right: 0;
}

.page-tete .collecte__note {
  max-width: 68ch;
  margin-top: var(--esp-3);
  font-size: var(--taille-s);
}

/* ---------- Partenaires de la saison, par niveau ----------
   Mêmes bandes menthe / sable que les niveaux de la page « Devenir partenaire ».
   Plus le niveau est haut, plus le cadre du logo est grand. */

.paliers {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.paliers--hors-grille {
  margin-top: var(--esp-5);
}

.palier {
  --logo-largeur: 240px;
  --logo-hauteur: 96px;
  display: grid;
  gap: var(--esp-3) var(--esp-5);
  padding: var(--esp-4) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border-radius: var(--rayon-l);
  background: var(--menthe);
}

.palier:nth-child(even) {
  background: var(--sable-clair);
}

.palier--rang-5 { --logo-largeur: 400px; --logo-hauteur: 140px; }
.palier--rang-4 { --logo-largeur: 300px; --logo-hauteur: 116px; }
.palier--rang-3 { --logo-largeur: 250px; --logo-hauteur: 100px; }
.palier--rang-2 { --logo-largeur: 210px; --logo-hauteur: 88px; }
.palier--rang-1 { --logo-largeur: 180px; --logo-hauteur: 76px; }

/* L'école, hors grille : un simple filet au lieu d'un fond */
.palier--hors-grille {
  background: none;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

@media (min-width: 760px) {
  .palier {
    grid-template-columns: 260px 1fr;
    align-items: center;
  }
}

.palier__nom {
  font-family: var(--police-texte);
  font-size: var(--taille-m);
  font-weight: 700;
  color: var(--accent);
}

.palier--rang-5 .palier__nom {
  font-family: var(--police-titre);
  font-size: var(--taille-l);
  font-weight: 400;
  color: var(--titre);
}

/* Cinq points, comme les cinq niveaux : autant de points pleins que le rang */
.palier__points {
  display: flex;
  gap: 6px;
  margin-bottom: var(--esp-2);
}

.palier__points span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.palier__points .plein {
  background: var(--accent);
}

.palier__partenaires {
  display: grid;
  gap: var(--esp-4);
}

.partenaire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
}

.partenaire > div {
  flex: 1 1 15rem;
  min-width: 0;
}

.partenaire__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: min(100%, var(--logo-largeur));
  height: var(--logo-hauteur);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--rayon);
  background: #fff;
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.partenaire__logo:hover {
  box-shadow: 0 0 0 2px var(--lagon);
}

.partenaire__logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partenaire__nom {
  font-size: var(--taille-l);
}

.partenaire__apports {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  padding: 0;
  margin-top: var(--esp-2);
  list-style: none;
}

.partenaire__apports li {
  padding: 2px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  background: var(--fond);
  color: var(--turquoise-fonce);
  font-size: var(--taille-xs);
  font-weight: 700;
}

.partenaire__texte {
  max-width: 52ch;
  margin-top: var(--esp-1);
  color: var(--texte-doux);
  font-size: var(--taille-s);
}