:root {
  --bleu: #2E6DA4;
  --bleu-fonce: #173A5E;
  --canard: #0E7C74;
  --canard-clair: #14958B;
  --jaune: #F4E4A1;
  --jaune-bord: #C9B04A;
  --papier: #F4F7FA;
  --blanc: #FFFFFF;
  --encre: #13273A;
  --gris: #5A6B7B;
  --trait: #C5D3E0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 400 1.0625rem/1.65 "Atkinson Hyperlegible", system-ui, sans-serif;
  color: var(--encre);
  background: var(--papier);
}

h1, h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }

p { margin: 0 0 1em; max-width: 62ch; }
a { color: var(--bleu-fonce); }
:focus-visible { outline: 3px solid var(--canard); outline-offset: 3px; }

.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }

/* En-tête */
.bandeau { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.bandeau .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; }
.bandeau img { display: block; height: 44px; width: auto; }
.lien-don { font-weight: 700; }

/* Hero : grille bleue, clin d'œil à la carte de visite */
.hero {
  padding: 3.5rem 0 4.5rem;
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size: 28px 28px;
  border-bottom: 1px solid var(--trait);
}
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
.chapo { font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0.75rem; }
.note { color: var(--gris); font-size: 0.95rem; }

.btn, .btn-second {
  display: inline-block;
  font: 700 1.05rem/1 "Atkinson Hyperlegible", system-ui, sans-serif;
  padding: 1rem 1.6rem;
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
}
.btn, .btn-second {
  border: 3px solid var(--encre);
  box-shadow: 4px 4px 0 var(--encre);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover, .btn-second:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }
.btn:active, .btn-second:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--encre); }
.btn { background: var(--bleu-fonce); color: var(--blanc); }
.btn-second { background: var(--blanc); color: var(--encre); }

/* Jauge : une pièce imprimée couche par couche */
.jauge {
  margin: 0;
  background: var(--blanc);
  border: 3px solid var(--encre);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--encre);
  padding: 1.25rem 1.25rem 1rem;
}
.jauge figcaption { font-size: 0.9rem; color: var(--gris); margin-bottom: 1rem; }
.pile { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; }
.couche {
  height: 10px;
  border-radius: 5px;
  border: 1.5px dashed #9DB4C8;
  background: transparent;
}
.couche.pleine { background: var(--canard); border: 1.5px solid var(--canard); }
.couche.pleine:nth-child(even) { background: var(--canard-clair); border-color: var(--canard-clair); }
.couche.en-cours { background: var(--jaune); border: 1.5px solid var(--jaune-bord); }
.animee .couche { transition: background-color 0.25s, border-color 0.25s; }
.plateau { height: 6px; margin-top: 3px; border-radius: 3px; background: var(--bleu-fonce); }

.chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1rem; margin: 1.1rem 0 0; }
.chiffres dt { font-size: 0.85rem; color: var(--gris); }
.chiffres dd { margin: 0; font: 700 1.6rem/1.2 "Bricolage Grotesque", system-ui, sans-serif; }
.maj { font-size: 0.85rem; color: var(--gris); margin: 0.9rem 0 0; }

/* Sections */
.bloc { padding: 4rem 0; }
.bloc.clair { background: var(--blanc); border-block: 1px solid var(--trait); }
.deux { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.intro { color: var(--gris); }

.paliers { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.palier {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--trait);
  border-radius: 0.6rem;
  background: var(--papier);
}
.palier.atteint { border-color: var(--canard); }
.palier.courant { border-color: var(--bleu-fonce); background: var(--blanc); }
.palier .prix { font: 700 1.6rem/1 "Bricolage Grotesque", system-ui, sans-serif; }
.palier h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.palier p { margin: 0; color: var(--gris); }
.palier .etat { font-weight: 700; font-size: 0.95rem; }
.palier.atteint .etat { color: var(--canard); }

.etapes { padding-left: 1.2rem; }
.etapes li { margin-bottom: 0.6rem; max-width: 56ch; }

details { border-bottom: 1px solid var(--trait); padding: 1rem 0; max-width: 46rem; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 0.7rem 0 0; }

.pied { background: var(--bleu-fonce); color: var(--blanc); padding: 2.5rem 0; }
.pied a { color: var(--jaune); }
.pied p { margin-bottom: 0.8rem; }
.pied .petit { font-size: 0.85rem; opacity: 0.85; }

@media (max-width: 52rem) {
  .hero .wrap, .deux { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding: 2.5rem 0 3rem; }
  .bloc { padding: 3rem 0; }
  .palier { grid-template-columns: 1fr; gap: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .animee .couche { transition: none; }
}

/* Slogan : trois blocs façon étiquettes, décalés comme des pièces posées sur le plateau */
.slogan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.slogan span {
  display: inline-block;
  padding: 0.1em 0.3em 0.18em;
  border: 3px solid var(--encre);
  box-shadow: 6px 6px 0 var(--encre);
  background: var(--blanc);
}
.slogan span:nth-child(1) { background: var(--jaune); transform: rotate(-1.5deg); }
.slogan span:nth-child(2) { background: var(--canard); color: var(--blanc); margin-left: 1.4rem; transform: rotate(1deg); }
.slogan span:nth-child(3) { background: var(--blanc); margin-left: 0.5rem; transform: rotate(-0.6deg); }

@media (max-width: 52rem) {
  .slogan span { box-shadow: 4px 4px 0 var(--encre); }
  .slogan span:nth-child(2) { margin-left: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-second { transition: none; }
}

/* ---------- Touches néobrutalistes ---------- */
::selection { background: var(--jaune); color: var(--encre); }

/* Traits structurants plus francs */
.bandeau { border-bottom: 3px solid var(--encre); }
.hero { border-bottom: 3px solid var(--encre); }
.bloc.clair { border-block: 3px solid var(--encre); }
.pied { border-top: 6px solid var(--jaune); }

/* Barre sous chaque titre de section */
h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 8px;
  margin-top: 0.6rem;
  background: var(--canard);
  border: 2px solid var(--encre);
}

/* Pastille collée sur la jauge */
.jauge { position: relative; }
.pastille {
  position: absolute;
  top: -1.3rem;
  right: -0.9rem;
  padding: 0.5rem 0.9rem;
  background: var(--jaune);
  border: 3px solid var(--encre);
  box-shadow: 4px 4px 0 var(--encre);
  font: 700 1.15rem/1 "Bricolage Grotesque", system-ui, sans-serif;
  transform: rotate(5deg);
}

/* Phrase clé du projet */
.encart {
  padding: 1rem 1.25rem;
  background: var(--jaune);
  border: 3px solid var(--encre);
  box-shadow: 5px 5px 0 var(--encre);
  font-weight: 700;
  transform: rotate(-0.5deg);
}

/* Paliers : l'état se lit d'un coup d'œil à la couleur */
.palier {
  border: 3px solid var(--encre);
  border-radius: 0;
  background: var(--blanc);
  box-shadow: 5px 5px 0 var(--encre);
}
.palier.courant { background: var(--jaune); border-color: var(--encre); }
.palier.courant p { color: var(--encre); }
.palier.atteint { background: var(--canard); color: var(--blanc); border-color: var(--encre); }
.palier.atteint p { color: var(--blanc); }
.palier .etat {
  justify-self: end;
  padding: 0.2rem 0.65rem;
  background: var(--blanc);
  border: 2px solid var(--encre);
  color: var(--encre);
}
.palier.atteint .etat { color: var(--encre); }

/* Étapes pour donner : une vraie suite, donc numérotée */
.etapes { list-style: none; padding: 0; counter-reset: etape; }
.etapes li { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; counter-increment: etape; }
.etapes li::before {
  content: counter(etape);
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--jaune);
  border: 3px solid var(--encre);
  box-shadow: 3px 3px 0 var(--encre);
  font: 700 1.1rem/1 "Bricolage Grotesque", system-ui, sans-serif;
}

/* FAQ en blocs qui s'ouvrent */
details {
  max-width: 46rem;
  margin-bottom: 1.1rem;
  padding: 1rem 1.25rem;
  background: var(--blanc);
  border: 3px solid var(--encre);
  box-shadow: 5px 5px 0 var(--encre);
}
details[open] { background: var(--jaune); }
summary { display: flex; justify-content: space-between; gap: 1rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 700 1.4rem/1 "Bricolage Grotesque", system-ui, sans-serif; }
details[open] summary::after { content: "\2013"; }

@media (max-width: 52rem) {
  .pastille { right: 0.4rem; }
  .palier .etat { justify-self: start; }
}

/* ---------- Site complet : navigation, accueil, fil rouge ---------- */
.bandeau .wrap { flex-wrap: wrap; gap: 0.75rem 2rem; }
.bandeau nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; }
.bandeau nav a { color: var(--encre); font-weight: 700; text-decoration: none; }
.bandeau nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.bandeau nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--canard); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.bandeau .lien-don {
  padding: 0.4rem 0.9rem;
  background: var(--jaune);
  border: 3px solid var(--encre);
  box-shadow: 3px 3px 0 var(--encre);
}
.bandeau .lien-don:hover { text-decoration: none; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }

/* Titre moyen pour les pages secondaires */
.slogan.moyen { font-size: clamp(1.9rem, 5vw, 3.4rem); }
.titre-simple { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1.5rem; }

/* Accueil */
.vitrine img { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; transform: rotate(-3deg); }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
.carte {
  padding: 1.25rem;
  background: var(--blanc);
  border: 3px solid var(--encre);
  box-shadow: 5px 5px 0 var(--encre);
}
.carte h3 { margin: 0 0 0.5rem; font: 700 1.35rem/1.15 "Bricolage Grotesque", system-ui, sans-serif; }
.carte p { margin: 0; max-width: none; }
.cartes .carte:nth-child(1) { background: var(--jaune); }
.cartes .carte:nth-child(3) { background: #D6EDEA; }
.carte.large { max-width: 46rem; margin-top: 2rem; }
.agenda { margin: 0 0 1rem; padding-left: 1.2rem; }
.mini { font-weight: 700; }

/* Pages de texte (mentions) */
.texte-long h2 { font-size: 1.4rem; margin-top: 2rem; }
.texte-long h2::after { display: none; }

/* Fil rouge : un filament qui relie les sections, comme dans le slogan */
.fil { position: relative; z-index: 2; display: flex; justify-content: center; height: 4.5rem; margin: -2.25rem 0; pointer-events: none; }
.fil::before { content: ""; width: 10px; height: 100%; background: var(--canard); border-inline: 3px solid var(--encre); }
.fil::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: var(--jaune);
  border: 3px solid var(--encre);
  border-radius: 50%;
}

@media (max-width: 52rem) {
  .cartes { grid-template-columns: 1fr; }
  .vitrine img { max-width: 14rem; }
}

/* Repère « palier atteint » sur la jauge */
.jalon {
  max-width: none;
  margin: 1.1rem 0 0;
  padding: 0.6rem 0.9rem;
  background: var(--canard);
  color: var(--blanc);
  border: 3px solid var(--encre);
  box-shadow: 4px 4px 0 var(--encre);
  font-weight: 700;
  transform: rotate(-1deg);
}
.jalon::before { content: "\2713\00a0"; }