/* =========================================================
   À part'Être
   Feuille de style principale
   Tous les réglages de marque sont dans :root, un seul
   endroit à modifier quand la charte définitive arrive.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
/* Les six couleurs viennent de la charte graphique de l'association.
   L'encre foncée est un ajout : la charte ne fournit aucune couleur
   lisible en texte courant. Voir la note dans LISEZMOI.md. */
:root {
  /* Charte */
  --celadon:   #7FCA9F;
  --tea-green: #BFE4CF;
  --jasmine:   #F4DC76;
  --beige:     #F6F6DD;
  --tiger:     #ED8218;
  --peach:     #F6C08B;

  /* Ajouts nécessaires à la lisibilité */
  --encre:       #17392C;
  --encre-douce: #4A5A50;
  --blanc:       #FFFFFF;
  --ligne:       #E2E2C4;
  --ligne-fine:  #EDEDD6;
  --beige-clair: #FBFBEE;

  /* Alias de rôle, utilisés dans tout le reste de la feuille */
  --creme:        var(--beige-clair);
  --creme-fonce:  var(--beige);
  --vert-profond: var(--encre);
  --vert-moyen:   #3D6B55;
  --vert-menthe:  var(--celadon);
  --vert-pale:    var(--tea-green);
  --jaune:        var(--jasmine);
  --jaune-pale:   #FBF3D3;
  --orange:       var(--tiger);
  --orange-fonce: #C4650B;
  --anthracite:   var(--encre);

  /* Typographie */
  --display: "Archivo", "Arial Black", Helvetica, sans-serif;
  --corps:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rythme */
  --page:     1160px;
  --texte:    64ch;
  --gouttiere: clamp(1.25rem, 4vw, 3.25rem);
  --section:  clamp(3.75rem, 8vw, 6.5rem);
  --rayon:    3px;
  --rayon-sm: 2px;
}/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--corps);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--vert-profond); text-underline-offset: 3px; }
a:hover { color: var(--orange-fonce); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0 0 0.6em;
  color: var(--vert-profond);
}

h1 { font-size: clamp(2.4rem, 1.85rem + 2.6vw, 3.9rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1.42rem + 1.5vw, 2.5rem); }
h3 { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 1.2em; max-width: var(--texte); }
ul, ol { max-width: var(--texte); }

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  color: var(--encre-douce);
}

/* Surtitre : nomme la nature de la section */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vert-moyen);
  margin: 0 0 1.1rem;
}
.surtitre::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--vert-menthe);
  flex: none;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert-profond);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ---------- 3. Structure ---------- */
.enveloppe {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section); }
.section--serre { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.section--menthe { background: var(--vert-pale); }
.section--creme  { background: var(--creme-fonce); }

/* ---------- 4. Signature : l'aigrette ---------- */
.separateur {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: clamp(2.5rem, 6vw, 4rem);
}
.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ligne);
}
.separateur svg { width: 20px; color: var(--vert-moyen); flex: none; opacity: 0.7; }

/* ---------- 5. En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 238, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne);
}
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.logo {
  font-family: var(--display);
  line-height: 1;
  text-decoration: none;
  display: block;
}
.logo__haut {
  display: block;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--vert-moyen);
  margin-left: 0.1em;
  margin-bottom: 0.15em;
}
.logo__bas {
  display: block;
  font-size: 1.4375rem;
  letter-spacing: 0.13em;
  color: var(--vert-profond);
}

.nav__liste {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.9vw, 1.75rem);
  margin: 0;
  padding: 0;
}
.nav__lien {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--encre-douce);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav__lien:hover { color: var(--vert-profond); border-bottom-color: var(--vert-moyen); }
.nav__lien[aria-current="page"] { color: var(--vert-profond); border-bottom-color: var(--vert-profond); }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-sm);
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  color: var(--vert-profond);
  font: inherit;
  line-height: 0;
}
.burger svg { width: 20px; }

/* ---------- 6. Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--corps);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.5rem;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Orange réservé à l'action principale : prendre contact */
.bouton--principal { background: var(--tiger); color: var(--encre); border-color: var(--tiger); }
.bouton--principal:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); color: var(--blanc); }

.bouton--secondaire { background: transparent; color: var(--vert-profond); border-color: var(--vert-profond); }
.bouton--secondaire:hover { background: var(--vert-profond); color: var(--creme); }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* ---------- 7. Mention du prix ---------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--jaune);
  color: var(--vert-profond);
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--rayon-sm);
  margin: 0 0 1.75rem;
}
.pastille svg { width: 11px; color: var(--jaune); flex: none; }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--ligne-fine);
}
.hero__filigrane {
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  width: min(500px, 45vw);
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
.hero__interieur { position: relative; z-index: 1; max-width: 40rem; }
.hero__titre { margin-bottom: 0.2em; }
.hero__accroche {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.02rem + 0.6vw, 1.4375rem);
  line-height: 1.35;
  color: var(--vert-moyen);
  margin: 0 0 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--ligne);
  max-width: 26ch;
}

/* ---------- 9. Bande de clarté ---------- */
.clarte { background: var(--vert-profond); color: var(--creme); }
.clarte__interieur {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.clarte h2 {
  color: var(--creme);
  margin-bottom: 0;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  padding-top: 1.1rem;
  border-top: 2px solid var(--jaune);
}
.clarte p { color: rgba(246, 246, 221, 0.9); }
.clarte p:last-child { margin-bottom: 0; }
.clarte strong { color: #fff; font-weight: 600; }

/* ---------- 10. Question centrale ---------- */
.question { text-align: center; }
.question__titre {
  font-size: clamp(2.1rem, 1.5rem + 2.9vw, 3.75rem);
  margin-bottom: 0.5em;
}
.question p {
  margin-inline: auto;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--encre-douce);
}

/* ---------- 11. Objectifs ---------- */
.objectifs {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
.objectif { border-top: 1px solid var(--vert-moyen); padding-top: 1.35rem; }
.objectif h3 { margin-bottom: 0.5em; }
.objectif p { font-size: 0.9375rem; color: var(--encre-douce); margin-bottom: 0; line-height: 1.6; }

/* ---------- 12. Cartes ---------- */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
}
.carte {
  display: flex;
  flex-direction: column;
  background: var(--creme);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.18s ease;
}
.carte:hover { background: #fff; }
.carte svg { width: 24px; color: var(--vert-moyen); margin-bottom: 1.5rem; }
.carte h3 { margin-bottom: 0.5em; }
.carte p { font-size: 0.9375rem; color: var(--encre-douce); margin-bottom: 1.5rem; line-height: 1.6; }
.carte__action {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--vert-profond);
  border-bottom: 1px solid var(--vert-menthe);
  align-self: flex-start;
  padding-bottom: 2px;
}
.carte:hover .carte__action { color: var(--orange-fonce); border-bottom-color: var(--orange); }

/* ---------- 13. Citation ---------- */
.citation {
  max-width: 26ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.95vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--vert-profond);
}
.citation__source {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ligne);
  font-family: var(--corps);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.bloc-citation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* ---------- 14. Témoignages ---------- */
.temoignage {
  border-top: 1px solid var(--ligne);
  padding-top: 2.5rem;
  margin-bottom: 3.5rem;
}
.temoignage__entete {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 2rem;
}
.temoignage__entete svg { width: 22px; color: var(--vert-moyen); flex: none; }
.temoignage__nom {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--vert-profond);
  line-height: 1.2;
}
.temoignage__meta {
  font-size: 0.75rem;
  color: var(--encre-douce);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}
.temoignage p:last-child { margin-bottom: 0; }
.temoignage .exergue {
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--vert-profond);
  border-left: 2px solid var(--jaune);
  padding-left: 1.5rem;
  margin-block: 2rem;
  max-width: 32ch;
}

/* ---------- 15. Encadrés ---------- */
.encadre {
  background: var(--creme-fonce);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.encadre--menthe { background: var(--vert-pale); border-color: #D3E1D8; }
.encadre h3 { margin-top: 0; }
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }

.infos-pratiques { list-style: none; margin: 0; padding: 0; }
.infos-pratiques li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--ligne-fine);
}
.infos-pratiques li:last-child { border-bottom: 0; padding-bottom: 0; }
.infos-pratiques li:first-child { padding-top: 0; }
.infos-pratiques .etiquette {
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-top: 0.2rem;
}

/* ---------- 16. En-tête de page intérieure ---------- */
.entete-page {
  position: relative;
  overflow: hidden;
  background: var(--creme-fonce);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--ligne);
}
.entete-page__filigrane {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: min(300px, 30vw);
  opacity: 0.09;
  pointer-events: none;
}
.entete-page .enveloppe { position: relative; z-index: 1; }
.entete-page h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3.1rem); }
.entete-page .lead { max-width: 52ch; margin-bottom: 0; }

/* ---------- 17. Formulaire ---------- */
.formulaire { display: grid; gap: 1.35rem; max-width: 600px; }
.champ { display: grid; gap: 0.45rem; }
.champ label {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.champ input, .champ textarea, .champ select {
  font: inherit;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-sm);
  padding: 0.8rem 0.95rem;
  width: 100%;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  border-color: var(--vert-moyen);
  outline: 1px solid var(--vert-moyen);
  outline-offset: 0;
}
.champ__aide { font-size: 0.8125rem; color: var(--encre-douce); }
.champ--case { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; }
.champ--case input { width: auto; margin-top: 0.35rem; }
.champ--case label { font-weight: 400; font-size: 0.875rem; text-transform: none; letter-spacing: 0; color: var(--encre); }

/* Bloc d'urgence : le seul endroit où l'orange sert de bordure */
.urgence {
  background: #fff;
  border: 1px solid var(--orange);
  border-left-width: 3px;
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 1.9rem);
}
.urgence h3 { color: var(--orange-fonce); margin-top: 0; }
.urgence ul { list-style: none; padding: 0; margin: 0; }
.urgence li { padding-block: 0.55rem; border-bottom: 1px solid var(--ligne-fine); font-size: 0.9375rem; }
.urgence li:last-child { border-bottom: 0; padding-bottom: 0; }
.urgence strong {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--vert-profond);
  margin-right: 0.4rem;
}

/* ---------- 18. Actualités ---------- */
.actu {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--ligne-fine);
  align-items: start;
}
.actu:first-of-type { padding-top: 0; }
.actu__date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert-moyen);
  padding-top: 0.45rem;
  line-height: 1.5;
}
.actu h3 { margin-bottom: 0.5em; }
.actu p:last-child { margin-bottom: 0; }

/* ---------- 19. Pied de page ---------- */
.pied {
  background: var(--anthracite);
  color: rgba(246, 246, 221, 0.78);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.875rem;
  line-height: 1.7;
}
.pied a { color: rgba(246, 246, 221, 0.78); text-decoration: none; }
.pied a:hover { color: var(--jaune); }
.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(246, 246, 221, 0.2);
}
.pied h4 {
  font-family: var(--corps);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--celadon);
  margin: 0 0 1.1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.55rem; }
.pied .logo__bas { color: var(--creme); }
.pied .logo__haut { color: var(--vert-menthe); }
.pied p { max-width: 32ch; margin-bottom: 0; }
.pied strong { color: var(--creme); font-weight: 600; }
.pied__bas {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(246, 246, 221, 0.5);
}

/* ---------- 20. Utilitaires ---------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.centre { text-align: center; }
.centre p { margin-inline: auto; }
.mesure { max-width: var(--texte); }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 21. Adaptatif ---------- */
@media (max-width: 900px) {
  .clarte__interieur,
  .bloc-citation,
  .duo { grid-template-columns: 1fr; }
  .citation { max-width: none; }
  .hero__filigrane { width: 62vw; right: -18%; opacity: 0.09; }
}

@media (max-width: 780px) {
  .burger { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--beige-clair);
    border-bottom: 1px solid var(--ligne);
    display: none;
    padding: 0.25rem var(--gouttiere) 1.25rem;
  }
  .nav[data-ouvert="true"] { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien {
    display: block;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--ligne-fine);
    font-size: 0.9375rem;
  }
  .actu { grid-template-columns: 1fr; gap: 0.6rem; }
  .actu__date { padding-top: 0; }
  .infos-pratiques li { grid-template-columns: 1fr; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 22. Impression ---------- */
@media print {
  .entete, .pied, .groupe-boutons, .hero__filigrane { display: none; }
  body { background: #fff; }
}

/* ---------- 23. Photos ---------- */
.figure { margin: 0; }
.figure img {
  width: 100%;
  border-radius: var(--rayon);
  border: 1px solid var(--ligne);
}
.figure figcaption {
  margin-top: 0.85rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--vert-menthe);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.figure figcaption .credit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A8378;
}
.actu .figure { margin-top: 1.5rem; max-width: 520px; }

/* ---------- 24. Logo ---------- */
.logo { display: block; text-decoration: none; line-height: 0; }
.logo img { width: 132px; }
.entete .logo img { width: clamp(104px, 12vw, 132px); }
.pied .logo img { width: 150px; }

/* ---------- 25. Illustrations de la charte ---------- */
.hero__illustration {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(760px, 58vw);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}
.hero__aigrettes {
  position: absolute;
  top: 4%;
  right: 4%;
  width: min(260px, 26vw);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.entete-page__filigrane { opacity: 0.4; }

.bandeau-illustre {
  position: relative;
  overflow: hidden;
  background: var(--tea-green);
}
.bandeau-illustre__image {
  display: block;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .hero__illustration { position: static; width: 100%; margin-top: 2.5rem; }
  .hero__aigrettes { width: 150px; opacity: 0.4; }
}

/* =========================================================
   26. Direction « Recomposé »
   Collage éditorial : aplats francs, titres à deux voix,
   aigrettes en annotation. Les mots manuscrits sont des
   tracés Sellomita vectorisés, la police reste hors du site.
   ========================================================= */

/* --- Titres à deux voix --- */
.mot {
  display: inline-block;
  height: 0.92em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.2em) rotate(-2.5deg);
  margin-inline: 0.12em;
}
.mot--grand { height: 1.08em; transform: translateY(0.24em) rotate(-3deg); }

/* --- Tampon --- */
.tampon { width: clamp(104px, 11vw, 148px); height: auto; }
.tampon__texte {
  font-family: var(--corps);
  font-size: 13.2px;
  font-weight: 700;
  letter-spacing: 1.6px;
  fill: var(--encre);
}
.hero .tampon {
  position: absolute;
  top: clamp(1rem, 3vw, 2.25rem);
  right: clamp(1rem, 4vw, 3rem);
  z-index: 3;
}

/* --- Pastille à bord décalé --- */
.pastille {
  border: 1.5px solid var(--encre);
  color: var(--encre);
  background: var(--beige-clair);
  box-shadow: 4px 4px 0 var(--jasmine);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
}
.pastille svg { color: var(--tiger); }

/* --- Aplats francs --- */
.aplat { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 4px; }
.aplat--celadon { background: var(--celadon); }
.aplat--jasmine { background: var(--jasmine); }
.aplat--peach   { background: var(--peach); }
.aplat--tea     { background: var(--tea-green); }
.aplat h3, .aplat p { color: var(--encre); }

/* --- Hero recomposé --- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
.hero__interieur {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__titre { font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.2rem); line-height: 1.06; }
.hero__accroche {
  border-bottom: 0;
  padding-bottom: 0;
  color: var(--encre);
  max-width: 32ch;
  margin-bottom: 1.25rem;
}
.hero__cadre {
  position: relative;
  z-index: 1;
  background: var(--jasmine);
  border-radius: 6px;
  padding: clamp(1.25rem, 3vw, 2rem);
  transform: rotate(-1.4deg);
}
.hero__cadre img { transform: rotate(1.4deg); }
.hero__aigrettes {
  top: auto;
  bottom: -4%;
  left: -2%;
  right: auto;
  width: min(200px, 22vw);
  opacity: 0.45;
  z-index: 0;
}

/* --- Annotation à l'aigrette --- */
.annotation { position: relative; }
.annotation__graine {
  position: absolute;
  width: 44px;
  color: var(--celadon);
  pointer-events: none;
}
.annotation__graine--titre { top: -48px; right: 8%; transform: rotate(28deg); }
.annotation__graine--bouton { bottom: -10px; left: -56px; transform: rotate(-115deg); width: 38px; }

/* --- Damier des objectifs --- */
.damier {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}
.damier li { border-radius: 4px; padding: clamp(1.35rem, 2.6vw, 1.9rem); }
.damier li:nth-child(1) { background: var(--celadon); }
.damier li:nth-child(2) { background: var(--jasmine); }
.damier li:nth-child(3) { background: var(--peach); }
.damier li:nth-child(4) { background: var(--tea-green); }
.damier li:nth-child(odd) { transform: translateY(-10px); }
.damier h3 { margin-bottom: 0.45em; }
.damier p { font-size: 0.9375rem; margin-bottom: 0; color: var(--encre); }

/* --- Cartes en collage --- */
.grille-cartes { background: transparent; border: 0; gap: clamp(0.75rem, 1.6vw, 1.15rem); }
.carte {
  background: var(--beige-clair);
  border: 1.5px solid var(--encre);
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--tea-green);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.carte:nth-child(2) { box-shadow: 5px 5px 0 var(--jasmine); }
.carte:nth-child(3) { box-shadow: 5px 5px 0 var(--peach); }
.carte:nth-child(4) { box-shadow: 5px 5px 0 var(--celadon); }
.carte:hover { background: var(--beige-clair); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--tiger); }
.carte svg { color: var(--encre); width: 26px; }
.carte__action { border-bottom-color: var(--tiger); }

/* --- Photo collée sur aplat --- */
.photo-collee { position: relative; display: inline-block; max-width: 100%; }
.photo-collee::before {
  content: "";
  position: absolute;
  inset: -16px -16px 16px 16px;
  background: var(--jasmine);
  border-radius: 4px;
  transform: rotate(-2deg);
  z-index: 0;
}
.photo-collee img {
  position: relative;
  z-index: 1;
  border-radius: 3px;
  border: 1.5px solid var(--encre);
}

/* --- Bande de clarté en aplat franc --- */
.clarte { background: var(--encre); }
.clarte h2 { border-top-color: var(--jasmine); }

/* --- Citation --- */
.bloc-citation .citation { color: var(--encre); }
.citation__source { border-top-color: var(--tiger); }

@media (max-width: 900px) {
  .hero__interieur { grid-template-columns: 1fr; }
  .hero__cadre { order: -1; }
  .hero .tampon { position: static; margin-bottom: 1.5rem; }
  .annotation__graine--titre, .annotation__graine--bouton { display: none; }
  .damier li:nth-child(odd) { transform: none; }
}

/* --- Damier à six cases --- */
.damier--six { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.damier--six li:nth-child(5) { background: var(--peach); }
.damier--six li:nth-child(6) { background: var(--celadon); }
.damier--six li:nth-child(even) { transform: translateY(10px); }
.damier--six li:nth-child(odd) { transform: none; }

/* --- Témoignages en blocs colorés --- */
.temoignage {
  border-top: 0;
  border-left: 4px solid var(--celadon);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0 clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.temoignage--celadon { border-left-color: var(--celadon); }
.temoignage--jasmine { border-left-color: var(--jasmine); }
.temoignage--peach   { border-left-color: var(--peach); }
.temoignage--tea     { border-left-color: var(--tea-green); }
.temoignage--jasmine .exergue { border-left-color: var(--jasmine); }
.temoignage--peach .exergue   { border-left-color: var(--peach); }
.temoignage--tea .exergue     { border-left-color: var(--tea-green); }
.temoignage--celadon .exergue { border-left-color: var(--celadon); }

@media (max-width: 780px) {
  .damier--six li:nth-child(even) { transform: none; }
}

/* =========================================================
   27. Animations et compositions riches
   Tout est désactivé si le visiteur a demandé la réduction
   des animations, voir le bloc prefers-reduced-motion.
   ========================================================= */

/* --- Barre de progression de lecture --- */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--tiger);
  z-index: 300;
  will-change: transform;
}

/* --- Révélation au scroll --- */
.reveler {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(.22,.8,.3,1), transform 0.75s cubic-bezier(.22,.8,.3,1);
}
.reveler.est-visible { opacity: 1; transform: none; }
.reveler[data-retard="1"] { transition-delay: 0.09s; }
.reveler[data-retard="2"] { transition-delay: 0.18s; }
.reveler[data-retard="3"] { transition-delay: 0.27s; }
.reveler[data-retard="4"] { transition-delay: 0.36s; }
.reveler[data-retard="5"] { transition-delay: 0.45s; }

/* --- Entrée du hero --- */
@keyframes monte {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entre-cadre {
  from { opacity: 0; transform: rotate(-1.4deg) translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: rotate(-1.4deg); }
}
.hero__interieur > div > * { animation: monte 0.8s cubic-bezier(.22,.8,.3,1) backwards; }
.hero__interieur .pastille      { animation-delay: 0.05s; }
.hero__titre                    { animation-delay: 0.14s; }
.hero__accroche                 { animation-delay: 0.26s; }
.hero__interieur p:not(.hero__accroche):not(.pastille) { animation-delay: 0.36s; }
.hero__interieur .groupe-boutons { animation-delay: 0.46s; }
.hero__cadre { animation: entre-cadre 0.95s cubic-bezier(.22,.8,.3,1) 0.2s backwards; }

/* --- Mot entouré à la main --- */
.entoure { position: relative; display: inline-block; }
.entoure__trace {
  position: absolute;
  top: -14%; left: -11%;
  width: 122%; height: 128%;
  overflow: visible;
  pointer-events: none;
}
.entoure__trace path {
  fill: none;
  stroke: var(--tiger);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
}
.entoure.est-visible .entoure__trace path {
  animation: tracer 1.15s cubic-bezier(.5,0,.2,1) 0.75s forwards;
}
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* --- Tampon en rotation lente --- */
@keyframes tourne { to { transform: rotate(360deg); } }
/* Le tampon reste fixe pendant la lecture : un mouvement perpétuel dans le
   champ de vision fatigue et détourne du texte. Il s'anime au survol. */
.hero .tampon { transition: transform 0.6s cubic-bezier(.22,.8,.3,1); }
.hero:hover .tampon { transform: rotate(22deg); }

/* --- Aigrettes en parallaxe --- */
.hero__aigrettes, .entete-page__filigrane { will-change: transform; }

/* --- Mosaïque --- */
.mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.4rem, 0.9vw, 0.7rem);
}
.mosaique > * { aspect-ratio: 1; border-radius: 3px; overflow: hidden; }
.mosaique img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.22,.8,.3,1); }
.mosaique figure { margin: 0; }
.mosaique figure:hover img { transform: scale(1.06); }
.mosaique .pave--celadon { background: var(--celadon); }
.mosaique .pave--jasmine { background: var(--jasmine); }
.mosaique .pave--tea     { background: var(--tea-green); }
.mosaique .pave--peach   { background: var(--peach); }
.mosaique .pave--encre   { background: var(--encre); }
.mosaique .pave {
  display: grid;
  place-items: center;
  padding: 0.75rem;
  text-align: center;
}
.mosaique .pave span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1.5;
}
.mosaique .pave--encre span { color: var(--beige); }

.bloc-mosaique {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* --- Compteurs --- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.chiffre { border-top: 1px solid var(--celadon); padding-top: 1.25rem; }
.chiffre__valeur {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.chiffre__libelle {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  color: var(--encre-douce);
  line-height: 1.5;
  max-width: 22ch;
}

/* --- Rail de citations --- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 360px);
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail-carte {
  background: var(--beige-clair);
  border: 1.5px solid var(--encre);
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--celadon);
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  display: flex;
  flex-direction: column;
}
.rail-carte:nth-child(2) { box-shadow: 5px 5px 0 var(--jasmine); }
.rail-carte:nth-child(3) { box-shadow: 5px 5px 0 var(--peach); }
.rail-carte:nth-child(4) { box-shadow: 5px 5px 0 var(--tea-green); }
.rail-carte blockquote {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
}
.rail-carte cite {
  margin-top: auto;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-top: 0.9rem;
  border-top: 1px solid var(--ligne);
}

/* --- Bouton avec flèche qui glisse --- */
.bouton .fleche { transition: transform 0.2s ease; }
.bouton:hover .fleche { transform: translateX(4px); }

@media (max-width: 900px) {
  .bloc-mosaique { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mosaique { grid-template-columns: repeat(3, 1fr); }
  .mosaique > *:nth-child(n+10) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveler { opacity: 1; transform: none; }
  .hero__interieur > div > *, .hero__cadre { animation: none; }
  .hero .tampon { animation: none; }
  .entoure.est-visible .entoure__trace path { animation: none; stroke-dashoffset: 0; }
  .progression { display: none; }
}

/* =========================================================
   28. Corrections d'ergonomie
   ========================================================= */

/* --- Focus visible y compris sur les fonds colorés --- */
:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}
.clarte :focus-visible, .pied :focus-visible, .pave--encre :focus-visible {
  outline-color: var(--jasmine);
}

/* --- Aiguillage : trois portes d'entrée --- */
.aiguillage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
}
.porte {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: 6px;
  border: 1.5px solid var(--encre);
  text-decoration: none;
  color: var(--encre);
  background: var(--beige-clair);
  box-shadow: 5px 5px 0 var(--encre);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.porte:hover, .porte:focus-visible {
  color: var(--encre);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--encre);
}
.porte--concernee { background: var(--celadon); }
.porte--soutenir  { background: var(--jasmine); }
.porte--pro       { background: var(--tea-green); }
.porte__oeil {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.porte h3 { margin: 0; font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); }
.porte p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.porte__action {
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 700;
  font-size: 0.875rem;
}

/* --- Rappel d'urgence, présent sur l'accueil --- */
.urgence-ruban {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  background: var(--beige-clair);
  border: 1.5px solid var(--tiger);
  border-left-width: 4px;
  border-radius: 4px;
  padding: 0.95rem 1.25rem;
  font-size: 0.9375rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.urgence-ruban strong { font-weight: 700; }
.urgence-ruban .numero {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  margin-right: 0.3rem;
}

/* --- Repères --- */
.repere { border-top: 1px solid var(--celadon); padding-top: 1.25rem; }
.repere__valeur {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.repere__libelle {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  color: var(--encre-douce);
  line-height: 1.55;
  max-width: 24ch;
}

/* --- Rail : commandes visibles --- */
.rail-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.rail-commandes { display: flex; gap: 0.5rem; flex: none; }
.rail-commandes button {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--encre);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rail-commandes button:hover { background: var(--encre); color: var(--beige); }
.rail-commandes button[disabled] { opacity: 0.35; cursor: default; }
.rail-commandes button[disabled]:hover { background: transparent; color: var(--encre); }
.rail { scroll-behavior: smooth; }

/* --- Formulaire : réassurance --- */
.champ__facultatif {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre-douce);
  margin-left: 0.4rem;
}
.formulaire__intro {
  background: var(--tea-green);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.formulaire__intro p { margin: 0; max-width: none; }

@media (max-width: 900px) {
  /* Le texte passe avant l'illustration : le titre doit rester au-dessus de la ligne de flottaison */
  .hero__cadre { order: 1; }
  .hero__interieur > .annotation { order: 0; }
  .rail-entete { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   29. Emplacements d'images
   Les visuels vivent dans assets/img/a-remplacer/. Déposer
   une vraie image sous le même nom suffit à la publier.
   ========================================================= */

.visuel { margin: 0; position: relative; }
.visuel img {
  width: 100%;
  border-radius: 4px;
  display: block;
}
.visuel figcaption {
  margin-top: 0.8rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--celadon);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--encre-douce);
}

/* Visuel large, pleine colonne */
.visuel--large { margin-block: clamp(2rem, 4vw, 3rem); }

/* Visuel posé sur un aplat, légèrement de travers */
.visuel--colle { padding: clamp(0.9rem, 2vw, 1.4rem); border-radius: 6px; }
.visuel--colle.sur-jasmine { background: var(--jasmine); transform: rotate(-1.2deg); }
.visuel--colle.sur-celadon { background: var(--celadon); transform: rotate(1deg); }
.visuel--colle.sur-tea     { background: var(--tea-green); transform: rotate(-0.8deg); }
.visuel--colle.sur-peach   { background: var(--peach); transform: rotate(1.2deg); }
.visuel--colle img { transform: rotate(0.9deg); }
.visuel--colle.sur-celadon img, .visuel--colle.sur-peach img { transform: rotate(-0.9deg); }

/* Trois vignettes côte à côte */
.trio-visuels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  margin-block: clamp(2rem, 4vw, 2.75rem);
}
.trio-visuels .visuel img { aspect-ratio: 1; object-fit: cover; }
.trio-visuels figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-left: 0;
  padding-left: 0;
  color: var(--encre);
}

/* Bandeau d'en-tête de page */
.entete-visuel {
  margin-block: 0;
  line-height: 0;
  border-bottom: 1px solid var(--ligne);
}
.entete-visuel img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 0;
}

/* Portrait rond en tête de témoignage */
.temoignage__portrait {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--encre);
  flex: none;
}

/* Vignette d'actualité */
.actu .visuel { max-width: 420px; margin-top: 1.25rem; }
.actu .visuel img { aspect-ratio: 9 / 6.5; object-fit: cover; }

@media (max-width: 780px) {
  .visuel--colle, .visuel--colle img { transform: none; }
}

/* =========================================================
   30. Mise à niveau des pages intérieures
   ========================================================= */

/* --- En-tête de page : un vrai hero, pas un bandeau --- */
.entete-page {
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
  background: var(--beige-clair);
}
.entete-page::after { display: none; }
.entete-page__filigrane {
  top: 50%;
  right: -3%;
  width: min(420px, 38vw);
  opacity: 0.28;
}
.entete-page__interieur { max-width: 44rem; }
.entete-page h1 {
  font-size: clamp(2.1rem, 1.55rem + 2.5vw, 3.5rem);
  margin-bottom: 0.45em;
}
.entete-page .lead { max-width: 48ch; }
.entete-page .groupe-boutons { margin-top: 1.75rem; }
.entete-page > .enveloppe > * { animation: monte 0.75s cubic-bezier(.22,.8,.3,1) backwards; }
.entete-page .surtitre { animation-delay: 0.04s; }
.entete-page h1 { animation-delay: 0.12s; }
.entete-page .lead { animation-delay: 0.22s; }
.entete-page .groupe-boutons { animation-delay: 0.32s; }

/* Filet coloré sous l'en-tête, une couleur par page */
.entete-page { border-bottom: 5px solid var(--celadon); }
.entete-page--association { border-bottom-color: var(--jasmine); }
.entete-page--groupe      { border-bottom-color: var(--celadon); }
.entete-page--temoignages { border-bottom-color: var(--peach); }
.entete-page--actualites  { border-bottom-color: var(--tea-green); }
.entete-page--contact     { border-bottom-color: var(--tiger); }

/* --- Sommaire par ancres --- */
.ancres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  max-width: none;
}
.ancres a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--beige-clair);
  box-shadow: 3px 3px 0 var(--celadon);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ancres li:nth-child(2) a { box-shadow: 3px 3px 0 var(--jasmine); }
.ancres li:nth-child(3) a { box-shadow: 3px 3px 0 var(--peach); }
.ancres li:nth-child(4) a { box-shadow: 3px 3px 0 var(--tea-green); }
.ancres a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tiger); }
[id] { scroll-margin-top: 110px; }

/* --- Témoignage en deux colonnes --- */
.temoignage {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 0;
  border-top: 1px solid var(--ligne);
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}
.temoignage__entete {
  display: block;
  margin: 0;
  position: sticky;
  top: 110px;
  align-self: start;
}
.temoignage__portrait { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 0.9rem; }
.temoignage__entete > svg { width: 30px; margin-bottom: 0.75rem; }
.temoignage__nom { font-size: 1.375rem; }
.temoignage__corps > p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.1em;
  line-height: 0.82;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--celadon);
}
.temoignage--jasmine .temoignage__corps > p:first-child::first-letter { color: #B9972C; }
.temoignage--peach .temoignage__corps > p:first-child::first-letter { color: var(--tiger); }
.temoignage--tea .temoignage__corps > p:first-child::first-letter { color: var(--vert-moyen); }
.temoignage .exergue { max-width: none; }

/* --- Frise des actualités --- */
.frise { position: relative; padding-left: clamp(1.5rem, 4vw, 2.75rem); }
.frise::before {
  content: "";
  position: absolute;
  left: 5px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--celadon), var(--jasmine), var(--peach));
}
.frise .actu { position: relative; border-bottom: 0; padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.frise .actu::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 4vw, 2.75rem) + 1px);
  top: clamp(1.9rem, 3.4vw, 2.7rem);
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--beige-clair);
  border: 2.5px solid var(--encre);
}
.frise .actu--prochaine::before { background: var(--tiger); }

/* --- Questions fréquentes --- */
.questions { max-width: none; margin: 0; padding: 0; list-style: none; }
.questions details {
  border-top: 1px solid var(--ligne);
  padding-block: 1.1rem;
}
.questions details:last-of-type { border-bottom: 1px solid var(--ligne); }
.questions summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--encre);
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: "+";
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tiger);
  flex: none;
}
.questions details[open] summary::after { content: "\2013"; }
.questions details p { margin: 0.9rem 0 0; }

/* --- Pied de page de parcours --- */
.suite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
}
.suite__lien {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1.5px solid var(--encre);
  border-radius: 6px;
  background: var(--beige-clair);
  box-shadow: 5px 5px 0 var(--tea-green);
  text-decoration: none;
  color: var(--encre);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.suite__lien:nth-child(2) { box-shadow: 5px 5px 0 var(--jasmine); }
.suite__lien:hover { color: var(--encre); transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--tiger); }
.suite__oeil {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.suite__lien h3 { margin: 0; }
.suite__lien p { margin: 0; font-size: 0.9375rem; color: var(--encre-douce); }

/* --- Étapes numérotées --- */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; max-width: none; }
.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--ligne);
  align-items: start;
}
.etapes li::before {
  content: counter(etape);
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--celadon);
  color: var(--encre);
  font-family: var(--display);
  font-weight: 800;
  display: grid;
  place-items: center;
}
.etapes li:nth-child(2)::before { background: var(--jasmine); }
.etapes li:nth-child(3)::before { background: var(--peach); }
.etapes strong { display: block; margin-bottom: 0.25rem; }
.etapes p { margin: 0; font-size: 0.9375rem; color: var(--encre-douce); }

@media (max-width: 860px) {
  .temoignage { grid-template-columns: 1fr; }
  .temoignage__entete {
    position: static;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .temoignage__portrait { width: 72px; margin-bottom: 0; }
  /* Sur mobile, le rappel d'urgence remonte avant le formulaire */
  .contact-colonnes { display: flex; flex-direction: column; }
  .contact-colonnes > .contact-aside { order: -1; }
}

/* =========================================================
   31. Le vocabulaire d'annotation, décliné partout
   Les icônes en ligne portent toutes un viewBox : sans lui,
   leur hauteur retombe sur 150 px par défaut.
   ========================================================= */
.pastille svg, .carte svg, .separateur svg, .temoignage__entete > svg,
.annotation__graine, .bandeau-defilant__groupe svg, .surtitre svg {
  aspect-ratio: 1;
  height: auto;
}

/* --- Texture d'aigrettes en fond de section --- */
.texture { position: relative; overflow: hidden; }
.texture > .enveloppe { position: relative; z-index: 1; }
.texture::after {
  content: "";
  position: absolute;
  background: url("../img/aigrettes.svg") no-repeat center / contain;
  pointer-events: none;
  opacity: 0.17;
  z-index: 0;
}
.texture--droite::after  { top: -8%;  right: -9%;  width: min(420px, 40vw); aspect-ratio: 1.13; }
.texture--gauche::after  { bottom: -12%; left: -8%; width: min(380px, 36vw); aspect-ratio: 1.13; transform: scaleX(-1); }
.texture--haut::after    { top: -16%; left: 28%;   width: min(300px, 32vw); aspect-ratio: 1.13; transform: rotate(18deg); }
.clarte.texture::after   { opacity: 0.1; }
.section--menthe.texture::after { opacity: 0.22; }

/* --- Mot souligné à la main --- */
.souligne { position: relative; display: inline-block; }
.souligne__trait {
  position: absolute;
  left: -3%; bottom: -0.34em;
  width: 106%;
  height: 0.38em;
  overflow: visible;
}
.souligne__trait path {
  fill: none;
  stroke: var(--celadon);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
}
.souligne--jasmine .souligne__trait path { stroke: var(--jasmine); }
.souligne--peach .souligne__trait path   { stroke: var(--peach); }
.souligne--tiger .souligne__trait path   { stroke: var(--tiger); stroke-width: 5; }
.souligne.est-visible .souligne__trait path {
  animation: tracer 0.9s cubic-bezier(.5,0,.2,1) 0.35s forwards;
}

/* --- Flèche dessinée à la main --- */
.fleche-dessinee {
  position: absolute;
  width: clamp(72px, 9vw, 120px);
  color: var(--tiger);
  pointer-events: none;
  opacity: 0.9;
}
.fleche-dessinee path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.reveler.est-visible .fleche-dessinee path,
.fleche-dessinee.est-visible path {
  animation: tracer 1s cubic-bezier(.5,0,.2,1) 0.45s forwards;
}
.fleche--vers-droite { top: -54px; right: 2%; transform: rotate(8deg); }
.fleche--vers-gauche { top: -58px; left: 1%; transform: scaleX(-1) rotate(6deg); }
.fleche--vers-bas    { bottom: -64px; left: 14%; transform: rotate(74deg); }

/* --- Graines d'annotation, variantes de position --- */
.annotation__graine--section { top: -40px; left: -46px; transform: rotate(-24deg); width: 40px; }
.annotation__graine--droite  { top: -34px; right: -8px; transform: rotate(42deg); width: 36px; }
.annotation__graine--bas     { bottom: -34px; right: 6%; transform: rotate(132deg); width: 34px; }

/* --- Étiquette manuscrite posée de travers --- */
.etiquette-penchee {
  display: inline-block;
  background: var(--jasmine);
  border: 1.5px solid var(--encre);
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-2.2deg);
  box-shadow: 3px 3px 0 var(--encre);
  margin-bottom: 1rem;
}
.etiquette-penchee--celadon { background: var(--celadon); }
.etiquette-penchee--peach   { background: var(--peach); }

@media (prefers-reduced-motion: reduce) {
  .souligne.est-visible .souligne__trait path { animation: none; stroke-dashoffset: 0; }
  .surligne::before { transition: none; transform: rotate(-0.8deg) scaleX(1); }
  .fleche-dessinee path { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 780px) {
  .fleche-dessinee { display: none; }
  .annotation__graine--section, .annotation__graine--droite { display: none; }
  .texture::after { opacity: 0.1; }
}

/* =========================================================
   32. Ajustements de lecture et de composition
   ========================================================= */

/* --- Les mots manuscrits qui portent un titre --- */
.mot--grand { height: 1.22em; transform: translateY(0.26em) rotate(-2.5deg); }
h1 .mot--grand, h2 .mot--grand { height: 1.3em; }
.entete-page h1 .mot--grand { height: 1.45em; }

/* --- Six objectifs : trois colonnes, deux lignes pleines --- */
.damier--six { grid-template-columns: repeat(3, 1fr); }
.damier--six li:nth-child(odd), .damier--six li:nth-child(even) { transform: none; }
.damier--six li:nth-child(1), .damier--six li:nth-child(3), .damier--six li:nth-child(5) {
  transform: translateY(-10px);
}
@media (max-width: 980px) {
  .damier--six { grid-template-columns: repeat(2, 1fr); }
  .damier--six li:nth-child(1), .damier--six li:nth-child(3), .damier--six li:nth-child(5) { transform: none; }
  .damier--six li:nth-child(odd) { transform: translateY(-10px); }
}
@media (max-width: 620px) {
  .damier--six { grid-template-columns: 1fr; }
  .damier--six li { transform: none !important; }
}

/* --- Les aplats rejoignent le vocabulaire de collage --- */
.aplat {
  border: 1.5px solid var(--encre);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--encre);
  transform: rotate(-0.7deg);
}
.aplat > * { transform: rotate(0.7deg); }
.aplat--jasmine { transform: rotate(0.8deg); }
.aplat--jasmine > * { transform: rotate(-0.8deg); }
.aplat--tea { transform: rotate(-0.5deg); }
.aplat--tea > * { transform: rotate(0.5deg); }
.aplat .bouton { transform: none; }
.aplat .groupe-boutons { transform: none; }

/* Le lien vers l'agence, dans le pied */
.pied__bas a { text-decoration: underline; text-underline-offset: 3px; }
.pied__bas a:hover { color: var(--jasmine); }

@media (max-width: 780px) {
  .aplat, .aplat > * { transform: none; }
}

/* =========================================================
   33. Bande de bulles de parole
   L'association parle d'espace de parole : la bande n'est pas
   un décor, elle dit le sujet.
   ========================================================= */
.bulles {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  background: var(--beige-clair);
}
.bulles__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.bulles__interieur { position: relative; z-index: 1; }

/* Variante fine, en séparateur */
.bulles--ruban { padding-block: 0; height: clamp(74px, 9vw, 118px); }
.bulles--ruban .bulles__fond { position: static; height: 100%; }

/* Cartes posées sur la bande */
.bulles-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.85rem, 2vw, 1.5rem);
}
.bulle-carte {
  background: var(--beige-clair);
  border: 1.5px solid var(--encre);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--encre);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
}
.bulle-carte::after {
  content: "";
  position: absolute;
  left: 2.2rem;
  bottom: -15px;
  width: 0; height: 0;
  border-left: 16px solid var(--encre);
  border-bottom: 16px solid transparent;
}
.bulle-carte::before {
  content: "";
  position: absolute;
  left: 2.35rem;
  bottom: -11px;
  width: 0; height: 0;
  border-left: 13px solid var(--beige-clair);
  border-bottom: 13px solid transparent;
  z-index: 1;
}
.bulle-carte:nth-child(2) { transform: translateY(-14px) rotate(-0.8deg); }
.bulle-carte:nth-child(3) { transform: translateY(8px) rotate(0.6deg); }
.bulle-carte p { margin: 0; max-width: none; }
.bulle-carte cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

@media (max-width: 780px) {
  .bulle-carte:nth-child(2), .bulle-carte:nth-child(3) { transform: none; }
}

/* =========================================================
   34. Désencombrement
   Retrait des automatismes qui signaient le gabarit.
   ========================================================= */

/* 1 et 2. Plus de filet ni de surtitre en petites capitales */
.surtitre, .surtitre::before { display: none; }
.date-repere {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vert-moyen);
  margin-bottom: 0.75rem;
}

/* 4. L'ombre portée pleine reste aux seuls éléments cliquables et aux bulles */
.pastille { box-shadow: none; }
.ancres a { box-shadow: none; background: transparent; }
.ancres li:nth-child(n) a { box-shadow: none; }
.ancres a:hover { background: var(--encre); color: var(--beige); transform: none; }
.aplat { box-shadow: none; }
.etiquette-penchee { box-shadow: none; }

/* 5. La rotation redevient un accident, pas une règle */
.aplat, .aplat > *,
.aplat--jasmine, .aplat--jasmine > *,
.aplat--tea, .aplat--tea > * { transform: none; }
.visuel--colle.sur-celadon, .visuel--colle.sur-tea { transform: none; }
.visuel--colle.sur-celadon img, .visuel--colle.sur-tea img { transform: none; }
.bulle-carte:nth-child(3) { transform: none; }

/* 7. Deux grilles cessent d'être symétriques */
.aiguillage { grid-template-columns: 1.35fr 1fr 1fr; }
.porte--concernee h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); }
.porte--concernee p { font-size: 1rem; }

.chiffres { grid-template-columns: repeat(12, 1fr); }
.chiffres .repere:nth-child(1) { grid-column: span 5; }
.chiffres .repere:nth-child(2) { grid-column: span 4; }
.chiffres .repere:nth-child(3) { grid-column: span 3; }
.chiffres .repere:nth-child(4) { grid-column: span 6; }
.chiffres .repere:nth-child(1) .repere__valeur { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); }

@media (max-width: 980px) {
  .aiguillage { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .chiffres .repere { grid-column: span 1 !important; }
}
@media (max-width: 560px) {
  .chiffres { grid-template-columns: 1fr; }
}

/* =========================================================
   35. Respiration de l'en-tête
   Le logo mesure 59 % de sa largeur en hauteur : à 132 px
   il dépassait les 78 px de l'en-tête et se plaquait en haut.
   ========================================================= */
.entete__interieur {
  min-height: 0;
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
  align-items: center;
}
.entete .logo { display: flex; align-items: center; }
.entete .logo img {
  width: clamp(92px, 10vw, 116px);
  height: auto;
  display: block;
}
.pied .logo img { width: clamp(118px, 13vw, 142px); }

/* Les ancres tiennent compte de la nouvelle hauteur */
[id] { scroll-margin-top: 124px; }
.temoignage__entete { top: 124px; }

/* =========================================================
   36. Trois ajustements
   ========================================================= */

/* 1. Le rappel d'urgence tient sur une ligne */
.urgence-ruban {
  flex-wrap: nowrap;
  gap: 0 1.75rem;
  align-items: baseline;
  width: fit-content;   /* le cadre suit le contenu */
  max-width: 100%;
}
.urgence-ruban > span { white-space: nowrap; }
.urgence-ruban .numero { font-size: 1.0625rem; }
@media (max-width: 900px) {
  .urgence-ruban { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
}

/* 2. Les mots manuscrits en ligne sont calés sur la hauteur des capitales,
      pas sur le cadratin : sans cela, un mot sans jambage paraît minuscule. */
.mot {
  height: 1.12em;
  transform: translateY(0.24em) rotate(-2.2deg);
  margin-inline: 0.16em 0.1em;
}
.clarte .mot, .question .mot { height: 1.2em; }

/* 3. Le surlignage passe en dégradé de fond : plus de pseudo-élément
      en z-index négatif, donc plus de disparition derrière les cartes. */
.surligne {
  padding-inline: 0.16em;
  background-image: linear-gradient(var(--jasmine), var(--jasmine));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 0.6em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.65s cubic-bezier(.22,.8,.3,1) 0.2s;
  border-radius: 2px;
}
.surligne::before { content: none; }
.surligne.est-visible { background-size: 100% 0.6em; }
.surligne--celadon { background-image: linear-gradient(var(--celadon), var(--celadon)); }
.surligne--peach   { background-image: linear-gradient(var(--peach), var(--peach)); }

@media (prefers-reduced-motion: reduce) {
  .surligne { transition: none; background-size: 100% 0.6em; }
}

/* =========================================================
   37. Rythme du bas de l'accueil
   Chaque section garde une forme propre, pour que la page
   relance l'intérêt jusqu'au pied.
   ========================================================= */

/* Témoignages en bulles de parole */
.rail { padding: 0.75rem 0.5rem 1.75rem; }
.rail-carte--bulle {
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--encre);
  position: relative;
  transform: rotate(-1deg);
}
.rail-carte--bulle:nth-child(even) { transform: rotate(0.9deg); box-shadow: 6px 6px 0 var(--encre); }
.rail-carte--bulle::after {
  content: "";
  position: absolute;
  left: 2.2rem;
  bottom: -15px;
  border-left: 16px solid var(--encre);
  border-bottom: 16px solid transparent;
}
.rail-carte--bulle blockquote { font-size: 1.125rem; }

/* Repères en bande d'encre */
.bande-reperes { background: var(--encre); color: var(--beige-clair); }
.bande-reperes h2 { color: var(--beige-clair); margin-bottom: clamp(2rem, 4vw, 3rem); }
.chiffres--bande .repere { border-top: 2px solid var(--jasmine); }
.chiffres--bande .repere__valeur {
  color: var(--jasmine);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}
.chiffres--bande .repere__libelle { color: var(--tea-green); }
.bande-reperes.texture::after { opacity: 0.1; }
.chiffres--bande { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres--bande .repere:nth-child(n) { grid-column: auto; }
@media (max-width: 1000px) { .chiffres--bande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .chiffres--bande { grid-template-columns: 1fr; } }

/* Objectifs : liste numérotée, visuel collé sur le côté */
.buts__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.buts__cote { position: sticky; top: 140px; }
.buts__cote h2 { max-width: 14ch; margin-bottom: 2.75rem; }
.photo-collee--celadon::before { background: var(--celadon); transform: rotate(2.5deg); }
.buts__cote .photo-collee { width: min(320px, 80%); margin-left: 16px; transform: rotate(-1.5deg); }
.buts__liste { list-style: none; margin: 0; padding: 0; }
.but {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.4rem;
  border-bottom: 1.5px solid var(--ligne);
}
.but:first-child { padding-top: 0; }
.but:last-child { border-bottom: 0; }
.but__num {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--tea-green);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--encre);
}
.but:nth-child(even) .but__num { background: var(--jasmine); }
.but h3 { margin: 0.35rem 0 0.35rem; }
.but p { margin: 0; color: var(--encre-douce); }

/* Devenir membre sur aplat jasmine, carte posée */
.section--jasmine { background: var(--jasmine); }
.aplat--carte {
  background: var(--beige-clair);
  border: 1.5px solid var(--encre);
  border-radius: 12px;
  rotate: 1.2deg;
}

@media (max-width: 900px) {
  .buts__grille { grid-template-columns: 1fr; }
  .buts__cote { position: static; }
  .buts__cote .photo-collee { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-carte--bulle { transform: none; }
  .aplat--carte { rotate: none; }
}

/* Stabilo plus fin sur les titres, pour garder la lecture des lettres */
h1 .surligne, h2 .surligne { background-size: 0% 0.42em; background-position: 0 92%; }
h1 .surligne.est-visible, h2 .surligne.est-visible { background-size: 100% 0.42em; }
@media (prefers-reduced-motion: reduce) {
  h1 .surligne, h2 .surligne { background-size: 100% 0.42em; }
}

/* Mot entouré du titre d'accueil : le mot et son cercle bougent ensemble,
   et le bloc ne pousse plus la troisième ligne vers le bas. */
.hero__titre .entoure {
  transform: translateY(0.2em) rotate(-2.5deg);
  margin-block: -0.38em;
  vertical-align: baseline;
}
.hero__titre .entoure .mot { transform: none; margin-inline: 0.12em 0; }
.hero__titre .entoure__trace { top: -6%; left: -9%; width: 124%; height: 118%; max-width: none; }

/* Photo réelle dans le cadre du haut de l'accueil */
.hero__cadre .hero__photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid var(--encre);
  border-radius: 3px;
}

/* =========================================================
   38. En-tête des pages intérieures, en collage
   Aplat de couleur propre à chaque page, texte à gauche,
   visuel collé et penché à droite, comme l'accueil.
   ========================================================= */
.entete-page {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 0;
  overflow: hidden;
}
.entete-page--association { background: var(--jasmine); }
.entete-page--groupe      { background: var(--tea-green); }
.entete-page--temoignages { background: var(--peach); }
.entete-page--actualites  { background: var(--tea-green); }
.entete-page--contact     { background: var(--jasmine); }
.entete-page__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--max, 1180px);
}
.entete-page__texte .lead { color: var(--encre); }
.entete-page__visuel {
  position: relative;
  rotate: 1.6deg;
  animation: entre-cadre 0.95s cubic-bezier(.22,.8,.3,1) 0.2s backwards;
}
.entete-page__visuel::before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  background: var(--beige-clair);
  border: 1.5px solid var(--encre);
  border-radius: 6px;
  rotate: -3deg;
}
.entete-page__visuel img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid var(--encre);
  border-radius: 4px;
}
@media (max-width: 860px) {
  .entete-page__grille { grid-template-columns: 1fr; }
  .entete-page__visuel { max-width: 420px; margin: 0.5rem 0 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .entete-page__visuel { animation: none; }
}
/* Sur mobile, la page Contact garde le rappel d'urgence tout en haut */
@media (max-width: 860px) {
  .entete-page--contact .entete-page__visuel { display: none; }
}

/* Survol des boutons : on reste dans les couleurs claires de la charte,
   le bouton se soulève avec une ombre d'encre au lieu de s'assombrir. */
.bouton { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.bouton--principal:hover,
.bouton--principal:focus-visible {
  background: var(--tiger);
  border-color: var(--encre);
  color: var(--encre);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--encre);
}
.bouton--secondaire:hover,
.bouton--secondaire:focus-visible {
  background: var(--jasmine);
  color: var(--encre);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--encre);
}
@media (prefers-reduced-motion: reduce) {
  .bouton--principal:hover, .bouton--secondaire:hover { transform: none; }
}

/* Tampon sur téléphone : plus petit, posé en haut à droite à côté de la pastille */
@media (max-width: 900px) {
  .hero .tampon {
    position: absolute;
    width: 78px;
    top: 1.75rem;
    right: 1rem;
    margin: 0;
  }
}
/* Bulles de l'accueil : même hauteur pour les trois, texte centré verticalement */
.bulles-cartes { align-items: stretch; }
.bulle-carte { display: flex; flex-direction: column; justify-content: center; }
.bulle-carte p { margin: 0; }

/* Récit de la journée : deux rangées, texte et encadré, puis photo et suite du texte */
.duo--recit { align-items: center; }
.duo--recit + .duo--recit { margin-top: clamp(2.5rem, 5vw, 4rem); }
.duo--recit .mesure > p:last-child { margin-bottom: 0; }
.duo--recit .visuel { margin: 0; }
@media (max-width: 900px) {
  .duo--inverse .visuel { order: 2; }
}

/* =========================================================
   39. Retours du comité (octobre 2026)
   ========================================================= */
/* Logo avec la graine, plus grand */
.entete .logo img { width: clamp(140px, 15vw, 192px); height: auto; }
.pied .logo img { width: 180px; height: auto; }

/* Nous soutenir : QR-code de paiement */
.pied__don { display: flex; gap: 1rem; align-items: flex-start; }
.pied__don img { width: 104px; height: 104px; background: #fff; padding: 6px; border-radius: 6px; flex: none; }
.pied__don p { margin: 0; font-size: 0.875rem; line-height: 1.5; }
.soutien img { display: block; width: 140px; height: 140px; background: #fff; padding: 8px; border: 1.5px solid var(--encre); border-radius: 6px; margin-block: 0.5rem 1rem; }

/* Contact du groupe de parole : QR-code et coordonnées Info-Entraide */
.contact-groupe { display: inline-flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; justify-content: center; text-align: left; margin-top: 1rem; }
.contact-groupe img { width: 140px; height: 140px; background: #fff; padding: 8px; border: 1.5px solid var(--encre); border-radius: 6px; }
.contact-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }

/* Logo et flyers présentés comme visuels collés */
.visuel--logo { background: var(--beige-clair); padding: clamp(1.5rem, 4vw, 3rem); }
.visuel--logo img { width: 100%; height: auto; }
.visuel--flyer img { width: 100%; height: auto; }
.actu .visuel--flyer { max-width: 360px; }
.duo--centre { align-items: center; }
.visuel--colle.visuel--logo { background: var(--beige-clair); }
.pied__don { flex-direction: column; }
.pied__don p { max-width: 24ch; }
/* Flyers et affiches : toujours entiers, jamais recadrés, cliquables pour les voir en grand */
.actu .visuel--flyer { max-width: 460px; }
.actu .visuel--flyer img, .visuel--flyer img { aspect-ratio: auto; object-fit: contain; height: auto; border: 1.5px solid var(--encre); box-shadow: 5px 5px 0 var(--jasmine); }
.visuel--flyer a { display: block; }
.visuel--flyer figcaption a { color: var(--encre); font-weight: 600; }
/* Pastille du prix cliquable sur l'accueil */
a.pastille--lien { text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.pastille--lien:hover, a.pastille--lien:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--encre); }
/* Formulaire : champ piège invisible et message après envoi */
.champ--piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__statut { padding: 1rem 1.25rem; border-radius: 8px; border: 1.5px solid var(--encre); font-weight: 600; margin-bottom: 1.25rem; }
.formulaire__statut--ok { background: var(--tea-green); }
.formulaire__statut--alerte { background: var(--peach); }
.pied__bas a { color: inherit; }
/* Pages légales */
.texte-legal { max-width: 760px; }
.texte-legal h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); margin-top: 2.5rem; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal ul { padding-left: 1.2rem; }
.entete-page--legal { background: var(--tea-green); padding-block: clamp(2rem, 4vw, 3rem); }
.entete-page--legal .entete-page__grille { grid-template-columns: 1fr; }
.texte-legal { max-width: var(--max, 1180px); }
.texte-legal > * { max-width: 68ch; }

/* ===== 40. Deuxième tour de corrections (oct. 2026) ===== */
.entete .logo img { width: clamp(160px, 18vw, 228px); }
.pied .logo img { width: 200px; }

.clarte p .mot.mot--grand { float: left; height: 4em !important; width: auto; margin: -0.35em .55em 0 -0.2em; transform: rotate(-4deg); }

.section--projets { background: linear-gradient(160deg, var(--jaune-pale) 0%, #FDE9D3 100%); }
.titre-projets .mot, .titre-projets .mot--grand { height: clamp(3.4rem, 8vw, 5.5rem); transform: rotate(-2deg); }
.section--projets .trio-visuels figcaption { background: var(--tiger); color: var(--blanc); display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-weight: 600; }
.section--projets .duo h3 { display: inline-block; padding: .15rem .75rem; border-radius: 999px; margin-top: 1.4rem; }
.section--projets .duo h3:nth-of-type(3n+1) { background: var(--tea-green); }
.section--projets .duo h3:nth-of-type(3n+2) { background: var(--jasmine); }
.section--projets .duo h3:nth-of-type(3n+3) { background: var(--peach); }

.galerie-membres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); margin-top: 2rem; }
.galerie-membres__item { margin: 0; border-radius: 14px; overflow: hidden; background: var(--blanc); box-shadow: 0 6px 18px rgba(23,57,44,.12); }
.galerie-membres__item:nth-child(odd) { transform: rotate(-1.2deg); }
.galerie-membres__item:nth-child(even) { transform: rotate(1deg); }
.galerie-membres__item img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.galerie-membres__credit { margin-top: 1.5rem; font-size: .85rem; color: var(--encre-douce); }
.galerie-membres__credit a { color: inherit; }

.soutien > p:first-of-type { margin-bottom: .9rem; }
.pied .pied__don p { margin: 0 0 .5rem !important; line-height: 1.45; }
.pied__don img { margin-bottom: .9rem; }
.pied__don .pied__don-accroche { font-weight: 700; color: var(--jasmine); font-size: 1.02rem; margin-bottom: .3rem; }
.pied__iban { font-size: .82rem; letter-spacing: .02em; white-space: nowrap; }
.pied__iban span { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pied__merci { font-style: italic; opacity: .8; font-size: .85rem; }
/* Galerie « visages » v2 : photo de groupe + ronde de portraits */
.visages .photo-collee img { aspect-ratio: 4/3; object-fit: cover; object-position: 50% 45%; width: 100%; height: auto; }
.visages__liste { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.6rem, 1.6vw, 1rem); }
.visages__liste li { width: clamp(76px, 8.4vw, 104px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--blanc); box-shadow: 0 6px 16px rgba(23,57,44,.14); transition: transform .25s ease; }
.visages__liste li:hover { transform: translateY(-4px) scale(1.06); }
.visages__liste img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visages__credit { text-align: center; margin-top: 1.4rem; font-size: .85rem; color: var(--encre-douce); }
.visages__credit a { color: inherit; }
.visages__liste { max-width: none; width: 100%; }
.visages__liste { max-width: 980px; margin-inline: auto; gap: clamp(.7rem, 2vw, 1.4rem); }
.visages__liste li { width: clamp(84px, 11vw, 138px); }
.visages__credit { max-width: none; margin-inline: auto; }
/* Galerie « visages » v3 : carrousel de portraits */
.rail--portraits { grid-auto-columns: clamp(200px, 23vw, 270px); margin-top: 2rem; padding: .75rem .5rem 1.5rem; }
.portrait-carte { margin: 0; border-radius: 14px; overflow: hidden; background: var(--blanc); border: 5px solid var(--blanc); box-shadow: 0 8px 20px rgba(23,57,44,.14); }
.portrait-carte:nth-child(3n+1) { box-shadow: 6px 6px 0 var(--jasmine); }
.portrait-carte:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--peach); }
.portrait-carte:nth-child(3n+3) { box-shadow: 6px 6px 0 var(--celadon); }
.portrait-carte img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 9px; }
.visages__credit { text-align: left; margin: .4rem 0 0; }
.portrait-carte figcaption { padding: .65rem .4rem .35rem; text-align: center; font-weight: 700; font-size: 1.02rem; color: var(--encre); background: var(--blanc); }