/* =========================================================
   Handi-T'Cap : feuille de style du site
   Couleurs : fond bleuté, sable clair, sable soutenu (pied de page), bleu nuit (texte), bleu paon (boutons, liens), marine du T (filets), terre cuite (cœurs, trait sous le titre).
   Typographie : Bricolage Grotesque (titres), Atkinson Hyperlegible Next (texte, menus, boutons, libellés).
   ========================================================= */


@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --c-fond: #f8f3ea;      /* fond principal, crème chaud */
  --c-fond-2: #ece4d6;    /* sable des cartes, encadrés et pied de page */
  --c-texte: #06368b;     /* marine du T : texte courant (9,8:1) */
  --c-accent: #06368b;    /* marine du T : le seul bleu du site (titres, liens, boutons, texte) */
  --c-detail: #06368b;    /* marine du T : filets, liens du pied de page */
  --c-coeur: #a74453;     /* terre cuite : trait sous le titre, cœurs décoratifs */
  --c-sable-fonce: #e2dccd; /* sable soutenu, éclairci : pied de page */
  --c-bouton: var(--c-accent);
  --c-bouton-texte: var(--c-fond);

  --f-titre: "Bricolage Grotesque", Arial, sans-serif;
  --f-sous-titre: "Bricolage Grotesque", Arial, sans-serif;
  --f-texte: "Atkinson Hyperlegible Next", Arial, sans-serif;
  --f-libelle: "Atkinson Hyperlegible Next", Arial, sans-serif;

  --largeur: 72rem;
  --colonne: 70ch;
  --rayon: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-texte);
  font: 500 1.125rem/1.7 var(--f-texte);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--f-titre); font-weight: 800; line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.01em; }
h2, h3 { font-family: var(--f-sous-titre); font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.75rem); }
p { margin: 0 0 1em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { font-family: var(--f-libelle); position: absolute; left: 1rem; top: -4rem; background: var(--c-bouton); color: var(--c-bouton-texte); padding: 0.6rem 1rem; z-index: 10; font-weight: 600; border-radius: 999px; }
.lien-evitement:focus { top: 1rem; }

.conteneur { width: min(100% - 2rem, var(--largeur)); margin-inline: auto; }

/* ---------- En-tête ---------- */
.entete { background: var(--c-fond); border-bottom: 3px solid var(--c-detail); position: sticky; top: 0; z-index: 5; }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; }
.entete__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--c-texte); }
.entete__logo img { width: 64px; height: 64px; }
.entete__nom { white-space: nowrap; font-family: var(--f-titre); font-weight: 800; font-size: 1.35rem; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 1.2rem; }
.nav a { font-family: var(--f-libelle); font-weight: 700; font-size: 0.95rem; color: var(--c-texte); text-decoration: none; padding: 0.4rem 0; display: inline-block; text-underline-offset: 0.3em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 2px; }

.nav-mobile { display: none; }
.nav-mobile summary { font-family: var(--f-libelle); list-style: none; cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--c-bouton); color: var(--c-bouton-texte); min-height: 44px; display: flex; align-items: center; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile[open] .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-fond); border-bottom: 3px solid var(--c-detail); padding: 0.5rem 1rem 1rem; }
.nav-mobile[open] .nav ul { flex-direction: column; }
.nav-mobile .nav a { padding: 0.7rem 0; font-size: 1.15rem; }

@media (max-width: 1180px) {
  .nav--bureau { display: none; }
  .nav-mobile { display: block; }
  .entete__logo img { width: 52px; height: 52px; }
}

/* ---------- Bandeau ---------- */
.bandeau__media { height: clamp(160px, 28vw, 380px); }

/* ---------- Présentation ---------- */
.presentation { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.presentation__grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .presentation__grille { grid-template-columns: 1fr; } }
.titre-principal { font-size: clamp(2.2rem, 1.5rem + 3vw, 2.9rem); letter-spacing: -0.035em; margin-bottom: 0.2em; }
.titre-principal::after { content: ""; display: block; width: 60px; height: 2px; margin-top: 0.3em; background: var(--c-coeur); }
.accroche { color: var(--c-accent); font-family: var(--f-sous-titre); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.4rem); margin: 0 0 0.6em; line-height: 1.3; }
.statut { display: inline-block; font-family: var(--f-libelle); font-weight: 600; font-size: 1rem; margin: 0 0 1.6em; padding: 0.3rem 0.9rem; border-radius: 0 6px 6px 0; background: var(--c-fond-2); border-left: 4px solid var(--c-detail); }
.presentation__texte p:not(.statut) { max-width: var(--colonne); }

.medias { display: grid; gap: 1rem; }
.medias > .a-fournir { min-height: 320px; }

/* Emplacement de média à fournir (à retirer en production) */
.a-fournir { font-family: var(--f-libelle); display: grid; place-items: center; text-align: center; min-height: 130px; padding: 1rem; border: 2px dashed var(--c-accent); color: var(--c-accent); border-radius: var(--rayon); font-weight: 600; font-size: 0.95rem; }
.bandeau .a-fournir { border-radius: 0; border-inline: 0; height: 100%; background: var(--c-fond-2); }

/* ---------- Profession de foi ---------- */
.foi { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.foi__encadre { background: var(--c-fond-2); border-radius: var(--rayon); border-top: 6px solid var(--c-detail); padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 700px) { .foi__encadre { grid-template-columns: 1fr; } }
.foi h2 { color: var(--c-accent); margin-bottom: 0.35em; }
.foi p { font-size: 1.3rem; line-height: 1.5; margin: 0; }

/* ---------- Réseaux et charte ---------- */
.liens-asso { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.liens-asso__grille { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.reseaux a { font-family: var(--f-libelle); display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.2rem; border-radius: 999px; background: var(--c-bouton); color: var(--c-bouton-texte); font-weight: 600; text-decoration: none; }
.reseaux a:hover { text-decoration: underline; }
.charte .a-fournir { min-height: 90px; width: 220px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--c-sable-fonce); border-top: 3px solid var(--c-detail); padding-block: 2.5rem 1.5rem; font-size: 1rem; }
.pied__grille { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.pied__nom { font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem; margin: 0 0 0.3rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pied__bas { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-detail); }

/* ---------- Touches de peps ---------- */
/* Bandeau : accueillera le diaporama photo */
.bandeau { position: relative; overflow: hidden; background: var(--c-fond-2); }
.bandeau .a-fournir { position: relative; background: transparent; }

/* Titre : plus grand, trait rouge affirmé */
.titre-principal { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.6rem); }
.titre-principal::after { width: 90px; height: 5px; border-radius: 3px; }


/* Profession de foi : encadré sable, cœurs rouges */
.foi__encadre { background: var(--c-fond-2); color: var(--c-texte); border-top: 4px solid var(--c-detail); border-radius: 22px; position: relative; overflow: hidden; }
.foi__encadre > div { position: relative; z-index: 1; padding-left: 2.1rem; } /* le texte s'aligne sur le titre, le cœur reste dans la marge */
.foi h2 { color: var(--c-accent); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
.foi h2::before { content: "\2665" / ""; color: var(--c-coeur); position: absolute; left: 0; }
.foi p { font-size: 1.4rem; }

/* Boutons des réseaux : sans ombre */
.reseaux a { padding: 0.6rem 1.4rem; }

/* Numéro RNA en pilule cerclée de marine */
.statut { border-left: 0; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--c-accent); }

/* ---------- Blocs repris du site actuel ---------- */
.a-coller { border: 2px dashed var(--c-accent); border-radius: var(--rayon); padding: 1rem 1.2rem; color: var(--c-accent); font-family: var(--f-libelle); font-weight: 600; font-size: 1rem; }

.mission { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.mission__grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.mission__grille > .a-fournir { min-height: 0; }
@media (max-width: 760px) { .mission__grille { grid-template-columns: 1fr; } }

.piliers { background: var(--c-fond-2); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.piliers__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); }
@media (max-width: 860px) { .piliers__liste { grid-template-columns: 1fr; } }
.pilier { background: var(--c-fond); border-radius: var(--rayon); padding: 1.5rem; border-top: 4px solid var(--c-detail); }
.pilier h2 { font-size: 1.35rem; color: var(--c-accent); }

.personnalites { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.personnalites__grille { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.5rem 1rem; }
.perso { text-align: center; }
.perso__photo.a-fournir { min-height: 0; aspect-ratio: 1; border-radius: 50%; margin: 0 auto 0.7rem; width: min(150px, 100%); font-size: 0.85rem; }
.perso__nom { font-family: var(--f-sous-titre); font-weight: 600; font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.2rem; }
.perso__role { font-size: 0.95rem; line-height: 1.4; margin: 0; }

.citation { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.citation__bloc { margin: 0; background: var(--c-fond-2); border-radius: 22px; padding: clamp(1.5rem, 4vw, 3rem); position: relative; overflow: hidden; }
.citation__bloc::before { content: "\201C" / ""; position: absolute; top: 0.25rem; left: 1.5rem; font-family: var(--f-titre); font-weight: 800; font-size: 8rem; line-height: 1; color: var(--c-coeur); opacity: .5; }
.citation blockquote { margin: 0; position: relative; }
.citation__phrase { font-family: var(--f-titre); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.5rem, 1rem + 2vw, 2.3rem); line-height: 1.2; color: var(--c-accent); margin: 1rem 0; }
.citation figcaption { font-weight: 600; }
.citation figcaption::before { content: ""; display: block; width: 60px; height: 3px; background: var(--c-coeur); margin-bottom: 0.6rem; }
.insecable { white-space: nowrap; }
.pied a { color: var(--c-detail); } /* le bleu paon serait trop faible sur le sable soutenu */
.mission__texte { font-size: 1.2rem; line-height: 1.65; margin: 0; max-width: 60ch; }
.citation blockquote > p:not(.citation__phrase) { max-width: 70ch; }
.pied__coord { font-style: normal; }
.pied__coord p { margin: 0 0 0.6rem; }
.pied__titre { font-family: var(--f-titre); font-weight: 600; font-size: 1.05rem; }

/* ---------- Bandeau : phrase d'accroche ---------- */
.bandeau__media { position: relative; display: grid; place-items: center; padding: 1.5rem; text-align: center; }
.bandeau__phrase { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.7rem, 1rem + 3vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--c-texte); margin: 0; max-width: 18ch; }
.bandeau__note { position: absolute; bottom: 0.8rem; right: 1rem; margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--c-accent); }

/* ---------- Accompagnement, Facilitation, Permanence ---------- */
.engagements { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.engagements .pilier { background: var(--c-fond-2); }

/* ---------- Marraine ---------- */
.marraine { background: var(--c-fond-2); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.marraine__grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 760px) { .marraine__grille { grid-template-columns: 1fr; } }
.marraine__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.marraine__photos .a-fournir { min-height: 200px; }
.marraine__nom { font-family: var(--f-titre); font-weight: 800; font-size: 1.6rem; color: var(--c-accent); margin: 0 0 0.3rem; }

/* ---------- Partenaires ---------- */
.partenaires { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.partenaires__grille { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.partenaire a { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; text-align: center; }
.partenaire a:hover .partenaire__nom { text-decoration: underline; }
.partenaire__logo.a-fournir { display: grid; min-height: 90px; width: 100%; font-size: 0.85rem; }
.partenaire__nom { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }

/* ---------- Diaporama du bandeau ---------- */
.diaporama { position: relative; height: clamp(220px, 33vw, 527px); padding: 0; overflow: hidden; }
.diaporama__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.diaporama__image.est-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .diaporama__image { transition: none; } }
.diaporama .bandeau__phrase { position: relative; z-index: 1; background: rgba(247, 250, 253, .9); padding: 0.6em 0.9em; border-radius: var(--rayon); max-width: 20ch; }
.diaporama__pause { position: absolute; z-index: 1; right: 1rem; bottom: 1rem; font: 700 0.9rem var(--f-libelle); color: var(--c-bouton-texte); background: var(--c-bouton); border: 0; border-radius: 999px; padding: 0.5rem 1rem; min-height: 44px; cursor: pointer; }

/* ---------- Photos ---------- */
.mission__photo { width: 100%; max-width: 427px; height: auto; border-radius: var(--rayon); }
img.perso__photo { width: min(150px, 100%); aspect-ratio: 1; object-fit: cover; object-position: center 22%; border-radius: 50%; margin: 0 auto 0.7rem; }
.marraine__photos img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: var(--rayon); }
img.partenaire__logo { width: 100%; height: 90px; object-fit: contain; background: #fff; border-radius: 10px; padding: 0.5rem; }
.partenaire__sans-lien { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.charte img { width: 186px; height: auto; }
@media (max-width: 600px) {
  .diaporama { height: 260px; }
  .diaporama .bandeau__phrase { font-size: 1.45rem; }
  .diaporama__pause { right: 0.6rem; bottom: 0.6rem; font-size: 0.8rem; padding: 0.35rem 0.8rem; min-height: 36px; }
}

/* ---------- Vidéos ---------- */
.video-a-fournir { aspect-ratio: 16 / 9; min-height: 0; }
.site-video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--rayon); background: var(--c-texte); }
.citation__video { margin-top: 1.5rem; max-width: 720px; }

/* ---------- T'es handi, T'es cap ---------- */
.hymne { padding-block: 0 clamp(2.5rem, 6vw, 4.5rem); }
.hymne__grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: stretch; }
.hymne__titre { grid-column: 1 / -1; font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem); margin: 0; }
.hymne__titre::after { content: ""; display: block; width: 90px; height: 5px; border-radius: 3px; margin-top: 0.35em; background: var(--c-coeur); }
/* (ancien emplacement image du chanteur, retiré) */
@media (max-width: 760px) { .hymne__grille { grid-template-columns: 1fr; } }
.marraine__photos { grid-template-columns: 1fr 1.3fr; }

/* Citation : logo à gauche, texte à droite, guillemets en haut à droite */
.citation__bloc { display: grid; grid-template-columns: 200px 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-top: clamp(3rem, 6vw, 4rem); }
.citation__logo { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto; }
.citation__bloc blockquote, .citation__bloc figcaption { grid-column: 2; }
@media (max-width: 760px) {
  .citation__bloc { grid-template-columns: 1fr; padding-top: 4.5rem; }
  .citation__logo { grid-column: 1; grid-row: auto; width: 140px; margin-bottom: 1.5rem; }
  .citation__bloc blockquote, .citation__bloc figcaption { grid-column: 1; }
}

.medias__portrait { width: 100%; max-width: 420px; height: auto; border-radius: var(--rayon); justify-self: center; }
img.hymne__image { width: 100%; height: auto; border-radius: var(--rayon); align-self: center; }
.marraine__video { width: 100%; max-height: 420px; border-radius: var(--rayon); background: var(--c-texte); }

/* Citation sans logo : une seule colonne */
.citation__bloc { display: block; }
/* Présentation : portrait rond à gauche, logo à droite */
.medias { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.medias__portrait { aspect-ratio: 1; object-fit: cover; border-radius: 50%; max-width: 260px; }
.medias__logo { grid-column: auto; width: 100%; max-width: 260px; justify-self: center; }
/* Valeurs et combats en Bricolage, terre cuite */
.foi p { font-family: var(--f-titre); font-weight: 600; color: var(--c-coeur); font-size: 1.45rem; line-height: 1.4; }
/* Marraine : texte et photo à gauche, vidéo à droite */
.marraine__grille { grid-template-columns: 1fr 1fr; align-items: center; }
.marraine__photo { width: 200px; height: 260px; object-fit: cover; border-radius: var(--rayon); margin: 0.5rem 0 1rem; }
.marraine__video { max-height: 560px; justify-self: center; width: auto; max-width: 100%; }

/* Présentation : en-tête sur toute la largeur, ronds centrés sur le paragraphe */
.presentation__grille { row-gap: 0; align-items: center; }
.presentation__entete { grid-column: 1 / -1; }
.presentation__texte p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .medias { margin-top: 2rem; } }

/* Présentation : un seul rond, le logo et la photo se relaient (2 s chacun, 3 cycles) */
.medias { display: block; position: relative; width: min(300px, 80vw); aspect-ratio: 1; justify-self: center; }
.medias img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; }
.medias__portrait { z-index: 1; object-fit: cover; border-radius: 50%; opacity: 0; animation: fondu 5s ease-in-out 3; }
@keyframes fondu { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .medias__portrait { animation: none; } }
@media (max-width: 860px) { .medias { margin: 2rem auto 0; } }
/* Chanson : emplacement audio */
.hymne__audio { min-height: 160px; align-self: center; }
/* Marraine : la photo sert de couverture à la vidéo */
.marraine__video { object-fit: cover; aspect-ratio: 9 / 16; height: min(560px, 90vw); width: auto; }

/* Lecteur vidéo avec photo de couverture */
.lecteur { position: relative; width: min(100%, 420px); aspect-ratio: 3 / 4; justify-self: center; border-radius: var(--rayon); overflow: hidden; background: var(--c-texte); }
.lecteur__video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lecteur__couverture { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; background: var(--c-texte); }
.lecteur__couverture[hidden] { display: none; }
.lecteur__couverture img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; display: block; }
.lecteur__bouton { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--c-bouton); box-shadow: 0 0 0 4px var(--c-fond); }
.lecteur__bouton::after { content: ""; position: absolute; left: 30px; top: 22px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent var(--c-bouton-texte); }
.lecteur__couverture:hover .lecteur__bouton { transform: scale(1.06); }
.lecteur__couverture:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }

/* Titres H1, H2, H3 en bleu paon (6,2:1), accroche en terre cuite (5,2:1) */
h1, h2, h3 { color: var(--c-accent); }
.accroche { color: var(--c-coeur); }

/* Bloc « agit concrètement » : texte seul, centré, mis en avant */
.mission__seul { text-align: center; }
.mission__seul .mission__texte { margin: 0 auto; max-width: 62ch; font-size: 1.3rem; }

/* ===== Retours du 2 novembre ===== */
/* Menu et nom de l'en-tête en bleu paon, survol en terre cuite */
.entete__nom { color: var(--c-accent); }
.nav a { color: var(--c-accent); }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--c-coeur); text-decoration-color: var(--c-coeur); }
/* Numéro RNA en bleu paon */
.statut { color: var(--c-accent); }
/* Présentation : les ronds centrés entre l'accroche et la fin du texte */
.presentation__entete { margin-bottom: 0.3rem; }
/* Signature de la citation en terre cuite */
.citation figcaption { color: var(--c-coeur); }
/* Vidéo du char centrée, avec sa légende */
.citation .conteneur { text-align: center; }
.citation__bloc { text-align: left; }
.citation__video { display: block; margin: 1.5rem auto 0; max-width: 720px; }
.video__legende { max-width: 60ch; margin: 0.8rem auto 0; font-size: 0.95rem; color: var(--c-texte); text-align: center; }
/* Chanson : pochette plus petite, en rond */
.hymne__grille { grid-template-columns: 1fr auto; align-items: center; }
img.hymne__image { width: clamp(160px, 22vw, 240px); height: auto; aspect-ratio: 1; object-fit: cover; object-position: center 30%; border-radius: 50%; justify-self: center; }
.hymne__lecteur { align-self: center; }
.hymne__legende { margin: 0.8rem 0 0; font-size: 0.95rem; text-align: center; }
@media (max-width: 760px) { .hymne__grille { grid-template-columns: 1fr; } img.hymne__image { grid-row: 2; } }
/* Icônes et petit trait terre cuite sur les cartes */
.icone { color: var(--c-coeur); display: block; margin-bottom: 0.6rem; }
.pilier h2::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--c-coeur); margin-top: 0.55rem; }
.pilier { display: flex; flex-direction: column; }
.pilier__photo { width: 100%; height: auto; border-radius: 10px; margin-top: auto; padding-top: 1rem; }
/* Marraine : titre en terre cuite */
.marraine h2 { color: var(--c-coeur); }
/* Bloc « agit concrètement » au-dessus des cartes */
.mission { padding-block: 0 clamp(2rem, 5vw, 3.5rem); }

/* ===== Retours : titres des cartes, phrase du bandeau et boutons en terre cuite ===== */
.pilier h2 { color: var(--c-coeur); }
.diaporama .bandeau__phrase { color: var(--c-coeur); }
.nav-mobile summary, .diaporama__pause { background: var(--c-coeur); color: var(--c-fond); }
/* Essai : H1 et phrase de la citation en marine du T */
.titre-principal, .citation__phrase { color: #06368b; }

/* ===== Charte finale du 2 novembre : le marine du T partout ===== */
.entete__nom, .nav a { color: #06368b; }
.statut { color: #06368b; box-shadow: inset 0 0 0 2px #06368b; }
.foi h2, .hymne__titre { color: #06368b; }
/* Les six cartes : titres en marine, textes en terre cuite */
.pilier h2 { color: #06368b; }
.pilier p { color: var(--c-coeur); }
/* Accompagnement, Facilitation, Présence : icône et petit trait en marine */
.engagements .icone { color: #06368b; }
.engagements .pilier h2::after { background: #06368b; }

/* Vidéo : titre terre cuite au-dessus, 40 px de respiration autour */
.citation { padding-bottom: 40px; }
.citation__bloc { margin-bottom: 40px; }
.video__titre { font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem); color: var(--c-coeur); text-align: center; margin: 0 0 0.8rem; }
.citation__video { margin-top: 0; }
.foi { padding-top: 0; }

/* Deux photos sous Nos valeurs / Nos combats */
.foi__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.foi__photos .a-fournir { min-height: 240px; }
@media (max-width: 600px) { .foi__photos { grid-template-columns: 1fr; } }

/* Chanson : portrait rond du chanteur, plus petit, avec sa légende */
.hymne__chanteur { margin: 0; text-align: center; justify-self: center; }
img.hymne__image { width: clamp(140px, 16vw, 190px); object-position: center; }
.hymne__chanteur figcaption { margin-top: 0.6rem; font-weight: 700; font-size: 0.95rem; color: #06368b; }

/* Photos à venir sous les cartes Accompagnement, Facilitation, Présence */
.pilier__photo-a-venir { min-height: 150px; margin-top: auto; }
.engagements .pilier p { margin-bottom: 1rem; }

/* Marraine : texte plus présent, vidéo plus compacte */
.marraine__grille { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); }
.marraine__texte { max-width: 34rem; }
.marraine__texte h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 0.4em; }
.marraine__nom { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); color: #06368b; margin-bottom: 0.4rem; }
.marraine__texte p:not(.marraine__nom) { font-size: 1.15rem; }
.marraine__texte p:last-child { font-family: var(--f-titre); font-weight: 600; color: var(--c-coeur); }
.lecteur.marraine__lecteur { width: min(100%, 340px); }
@media (max-width: 760px) { .marraine__grille { grid-template-columns: 1fr; } }

/* Personnalités : bande de 6 sur l'accueil */
.personnalites__bande { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .personnalites__bande { grid-template-columns: repeat(3, 1fr); } }
.personnalites__suite { text-align: center; margin: 2rem 0 0; }
.bouton { display: inline-flex; align-items: center; min-height: 48px; padding: 0.7rem 1.6rem; border-radius: 999px; background: var(--c-bouton); color: var(--c-bouton-texte); font-weight: 700; text-decoration: none; }
.bouton:hover { background: var(--c-coeur); }

/* ---------- Pages intérieures ---------- */
.page-entete { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.fil { font-size: 0.95rem; margin-bottom: 1rem; }
.fil a { color: #06368b; }
/* Menu à 10 entrées : tient sur une ligne au-dessus de 1240 px */
.nav--bureau ul { gap: 0.15rem 0.95rem; }
.nav--bureau a { font-size: 0.9rem; }
@media (max-width: 1240px) { .nav--bureau { display: none; } .nav-mobile { display: block; } }
.nav--bureau ul { gap: 0.15rem 0.8rem; flex-wrap: nowrap; }
.nav--bureau a { font-size: 0.88rem; white-space: nowrap; }
.entete__nom { font-size: 1.2rem; }
.entete__logo img { width: 56px; height: 56px; }
@media (max-width: 1280px) { .nav--bureau { display: none; } .nav-mobile { display: block; } }

/* ===== Règle de la charte : terre cuite seulement sur fond sable, marine sur fond bleu ===== */
/* Sur fond bleu, ce qui était en terre cuite passe en marine */
.accroche, .video__titre, .diaporama .bandeau__phrase { color: #06368b; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: #06368b; text-decoration-color: var(--c-coeur); }
/* Les six cartes : fond sable, titres terre cuite, texte marine */
.pilier h2 { color: var(--c-coeur); }
.pilier p { color: #06368b; }
.piliers { background: var(--c-fond); }
.piliers .pilier { background: var(--c-fond-2); }
/* « Agit concrètement » : bande sable, texte terre cuite un peu plus petit */
.mission { background: var(--c-fond-2); padding-block: clamp(2rem, 5vw, 3rem); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.mission__seul .mission__texte { color: var(--c-coeur); font-size: 1.08rem; }
.foi { padding-bottom: clamp(2rem, 5vw, 3rem); }
/* Chanson : lecteur audio et petit rond bien visible */
.hymne__audio-lecteur { width: 100%; display: block; }
img.hymne__image { width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 0 4px var(--c-fond), 0 0 0 6px #06368b; }
/* Bouton « Découvrir » : marine, rouge au survol */
.bouton { background: #06368b; color: var(--c-fond); }
.bouton:hover, .bouton:focus-visible { background: var(--c-coeur); }
.hymne__chanteur img.hymne__image { width: 120px; height: 120px; min-width: 120px; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 0 auto; }

/* ===== Retours du 2 novembre (soir) ===== */
/* Menu : tout le lien passe en brique au survol */
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--c-coeur); text-decoration-color: var(--c-coeur); }
/* Phrase du bandeau en brique */
.diaporama .bandeau__phrase { color: var(--c-coeur); }
/* Rond logo / photo : 1 s chacun, 3 cycles, relancé quand il apparaît à l'écran */
.medias__portrait { animation: none; opacity: 0; }
.medias.en-cours .medias__portrait { animation: fondu 2.4s ease-in-out 3; }
@keyframes fondu { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .medias.en-cours .medias__portrait { animation: none; } }
/* Respirations de 40 px */
.citation { padding-top: 40px; }
.video__titre { color: var(--c-coeur); margin-bottom: 40px; }
.foi { padding-top: 40px; }
/* Texte « agit concrètement » collé sous Nos valeurs / Nos combats */
.foi__action { grid-column: 1 / -1; text-align: center; color: var(--c-coeur); font-size: 1.08rem; max-width: 62ch; margin: 0.5rem auto 0 !important; padding-left: 0 !important; }
.foi__encadre > .foi__action { position: relative; z-index: 1; }
/* Icônes d'Accompagnement, Facilitation, Présence en brique */
.engagements .icone { color: var(--c-coeur); }
/* Chanson : légende centrée sur deux lignes */
.hymne__legende { line-height: 1.6; }
/* Marraine : belle photo sous le titre, remerciements en bleu */
.marraine__photo { display: block; width: 180px; height: 230px; object-fit: cover; border-radius: var(--rayon); margin: 0.6rem 0 1rem; }
.marraine__texte p:last-child { color: #06368b; }
/* Noms des personnalités en brique */
.perso__nom { color: var(--c-coeur); }
/* Réseaux avec leurs icônes */
.reseaux a { gap: 0.55rem; }
.reseaux svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.liens-asso__grille { justify-content: center; }
/* Charte Romain Jacob dans le pied de page */
.pied__charte { display: flex; align-items: center; gap: 0.8rem; max-width: 26rem; font-size: 0.9rem; }
.pied__charte img { width: 96px; height: auto; background: #fff; border-radius: 8px; padding: 4px; flex: none; }
.foi__action { font-family: var(--f-texte); font-weight: 700; line-height: 1.65; }
/* Photos dans la carte Nos valeurs / Nos combats, texte d'action en dessous */
.foi__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-top: 1.2rem; }
.foi__action { font-size: calc(1.08rem - 3px); }
.foi__action-texte { color: #06368b; }
.foi__action-chute { color: var(--c-coeur); }
/* Photos de Nos valeurs / Nos combats au même niveau, avec leur légende */
.foi__encadre > div { display: flex; flex-direction: column; }
.foi__figure { margin: auto 0 0; padding-top: 1.2rem; }
.foi__figure .foi__photo { margin-top: 0; }
.foi__figure figcaption { margin-top: 0.5rem; font-size: 0.95rem; font-weight: 700; color: #06368b; text-align: center; }
.foi__action { font-size: calc(1.08rem - 5px); }
.foi__encadre { row-gap: 0; }
.foi__encadre > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.foi__figure { margin: 0; }
@media (max-width: 700px) { .foi__encadre > div { grid-row: auto; display: block; } }
.foi .foi__action { font-size: 18px; margin-top: 1.5rem !important; }

/* ===== Règle d'espacement : 70 px entre chaque section de la page d'accueil ===== */
main > section { padding-block: 70px 0 !important; margin: 0 !important; }
main > section:last-child { padding-bottom: 70px !important; }
/* Sections à fond plein (sable) : 70 px à l'intérieur, et 70 px avant la suivante */
main > section.marraine { padding-block: 70px !important; margin-top: 70px !important; }
main > section.marraine + section { padding-top: 70px !important; }
/* Dans la citation : 40 px entre la carte et la vidéo */
.citation__bloc { margin-bottom: 40px; }
/* Personnalités : bien aéré sous le titre */
.personnalites__grille { margin-top: 50px; }

/* Nos valeurs / Nos combats : 20 px de plus avant les photos et avant le texte */
.foi__figure { padding-top: calc(1.2rem + 20px); }
.foi .foi__action { margin-top: calc(1.5rem + 20px) !important; }
.foi__figure figcaption { color: var(--c-coeur); }

/* Chanteur en brique */
.hymne__chanteur figcaption { color: var(--c-coeur); }

/* Les six cartes : icône et petit trait en marine, titre en brique */
.pilier .icone, .engagements .icone { color: #06368b; }
.pilier h2::after, .engagements .pilier h2::after { background: #06368b; }

/* Marraine : nom en titre bleu, rôle en petit sous la photo, vidéo sans couverture */
.marraine__texte .marraine__nom { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); color: #06368b; margin: 0 0 0.6rem; }
.marraine__photo { margin: 0 0 0.5rem; }
.marraine__role { font-size: 14px !important; font-weight: 700; color: var(--c-coeur); margin: 0 0 1rem; }

/* ===== Signature graphique : un trait marine qui finit par un cœur brique ===== */
.titre-principal::after, .hymne__titre::after { width: 112px; height: 16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22112%22%20height%3D%2216%22%20viewBox%3D%220%200%20112%2016%22%3E%3Crect%20x%3D%220%22%20y%3D%226.0%22%20width%3D%2292%22%20height%3D%224%22%20rx%3D%222.0%22%20fill%3D%22%2306368b%22/%3E%3Cpath%20transform%3D%22translate%2896%2C1.0%29%20scale%281.0%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%23a74453%22/%3E%3C/svg%3E") no-repeat left center; margin-top: 0.3em; }
.pilier h2::after, .engagements .pilier h2::after { width: 70px; height: 12px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2270%22%20height%3D%2212%22%20viewBox%3D%220%200%2070%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224.5%22%20width%3D%2254%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%2306368b%22/%3E%3Cpath%20transform%3D%22translate%2858%2C0.75%29%20scale%280.75%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%23a74453%22/%3E%3C/svg%3E") no-repeat left center; margin-top: 0.5rem; }
.citation figcaption::before { width: 70px; height: 12px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2270%22%20height%3D%2212%22%20viewBox%3D%220%200%2070%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224.5%22%20width%3D%2254%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%2306368b%22/%3E%3Cpath%20transform%3D%22translate%2858%2C0.75%29%20scale%280.75%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%23a74453%22/%3E%3C/svg%3E") no-repeat left center; }
/* Marraine : rôle en 16 px */
.marraine__role { font-size: 16px !important; }

/* Titres H2 : trait et cœur en brique ; le H1 garde le trait marine */
.hymne__titre::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22112%22%20height%3D%2216%22%20viewBox%3D%220%200%20112%2016%22%3E%3Crect%20x%3D%220%22%20y%3D%226.0%22%20width%3D%2292%22%20height%3D%224%22%20rx%3D%222.0%22%20fill%3D%22%23a74453%22/%3E%3Cpath%20transform%3D%22translate%2896%2C1.0%29%20scale%281.0%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%23a74453%22/%3E%3C/svg%3E"); }
.pilier h2::after, .engagements .pilier h2::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2270%22%20height%3D%2212%22%20viewBox%3D%220%200%2070%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224.5%22%20width%3D%2254%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23a74453%22/%3E%3Cpath%20transform%3D%22translate%2858%2C0.75%29%20scale%280.75%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%23a74453%22/%3E%3C/svg%3E"); }
/* Menu : jamais souligné, seule la couleur change */
.nav a, .nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { text-decoration: none; border-bottom: 0; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--c-coeur); }
/* Réseaux : passent en brique au survol */
.reseaux a:hover, .reseaux a:focus-visible { background: var(--c-coeur); color: var(--c-fond); text-decoration: none; }
/* Marraine : rôle 18 px, description 16 px, remerciements 16 px en brique */
.marraine__role { font-size: 18px !important; }
.marraine__texte p:not(.marraine__nom):not(.marraine__role) { font-size: 16px; }
.marraine__texte p:last-child { font-family: var(--f-texte); font-weight: 700; font-size: 16px; color: var(--c-coeur); }

/* Signature graphique inversée : trait brique, cœur marine, partout */
.titre-principal::after, .hymne__titre::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22112%22%20height%3D%2216%22%20viewBox%3D%220%200%20112%2016%22%3E%3Crect%20x%3D%220%22%20y%3D%226.0%22%20width%3D%2292%22%20height%3D%224%22%20rx%3D%222.0%22%20fill%3D%22%23a74453%22/%3E%3Cpath%20transform%3D%22translate%2896%2C1.0%29%20scale%281.0%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%2306368b%22/%3E%3C/svg%3E"); }
.pilier h2::after, .engagements .pilier h2::after, .citation figcaption::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2270%22%20height%3D%2212%22%20viewBox%3D%220%200%2070%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224.5%22%20width%3D%2254%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23a74453%22/%3E%3Cpath%20transform%3D%22translate%2858%2C0.75%29%20scale%280.75%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%2306368b%22/%3E%3C/svg%3E"); }
.pilier__photo { aspect-ratio: 4 / 3; object-fit: cover; }

/* Portrait du chanteur sans cercle bleu */
img.hymne__image, .hymne__chanteur img.hymne__image { box-shadow: none; }

/* ===== Retours : fusion des cartes, marraine façon chanson, vidéo sans bandes ===== */
.cartes__liste { grid-template-columns: repeat(3, 1fr); row-gap: clamp(1rem, 3vw, 2rem); }
@media (max-width: 860px) { .cartes__liste { grid-template-columns: 1fr; } }
.cartes .pilier { background: var(--c-fond-2); }
/* Marraine : plus de cadre plein, même mise en page que « T'es handi, T'es cap » */
main > section.marraine { background: none; padding-block: 70px 0 !important; margin-top: 0 !important; }
main > section.marraine + section { padding-top: 70px !important; }
.marraine__grille { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.marraine__titre { grid-column: 1 / -1; margin: 0; }
.marraine__texte { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: center; max-width: none; }
.marraine__photo { width: 160px; height: 200px; flex: none; margin: 0; }
.marraine__texte .marraine__nom { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 0.4rem; }
.marraine__desc { font-size: 16px; margin: 0 0 0.6rem; }
.marraine__merci { font-weight: 700; font-size: 16px; color: var(--c-coeur); margin: 0; }
.lecteur.marraine__lecteur { width: 260px; }
@media (max-width: 760px) {
  .marraine__grille { grid-template-columns: 1fr; }
  .marraine__texte { flex-direction: column; align-items: flex-start; }
  .lecteur.marraine__lecteur { width: min(100%, 300px); }
}
/* Vidéo du char : sans bandes bleues */
.citation__video { aspect-ratio: auto; height: auto; background: transparent; border-radius: var(--rayon); }
.citation__video { width: 100%; max-width: 720px; }
.marraine h2.marraine__titre { color: #06368b; }
.lecteur.marraine__lecteur { background: transparent; aspect-ratio: auto; }
.lecteur.marraine__lecteur .lecteur__video { height: auto; border-radius: var(--rayon); }

/* Légende photo sur une ligne, lien vers les paroles, lecteur plus grand, pied de page */
.foi__figure figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .foi__figure figcaption { white-space: normal; } }
.hymne__paroles { margin: 0.4rem 0 0; text-align: center; font-size: 15px; }
.hymne__paroles a { color: var(--c-coeur); font-weight: 700; }
.hymne__paroles a:hover { color: #06368b; }
.lecteur.marraine__lecteur { width: clamp(280px, 30vw, 380px); }
.pied { background: var(--c-fond-2); }
.pied a { color: var(--c-coeur); }
.pied a:hover { color: #06368b; }

/* ===== Menu raccourci (2 novembre) ===== */
/* Identité : menu jamais souligné, brique au survol et sur la page en cours */
.nav a, .nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { text-decoration: none; }
/* Adhérer : bouton pilule marine, brique au survol, sans ombre */
.nav a.nav__bouton { background: #06368b; color: var(--c-fond); border-radius: 999px; padding: 0.45rem 1.1rem; }
.nav a.nav__bouton:hover, .nav a.nav__bouton:focus-visible { background: var(--c-coeur); color: var(--c-fond); }
.nav-mobile .nav a.nav__bouton { margin-top: 0.5rem; padding: 0.6rem 1.4rem; }
.nav--bureau ul { align-items: center; }
@media (min-width: 1000px) { .nav--bureau { display: block; } .nav-mobile { display: none; } }
/* Entre 1000 et 1120 px : espaces resserrés pour garder le menu sur une ligne */
@media (min-width: 1000px) and (max-width: 1119px) { .nav--bureau ul { gap: 0.15rem 0.6rem; } .entete__nom { font-size: 1.1rem; } }
.entete__logo { flex-shrink: 0; }
@media (min-width: 1000px) and (max-width: 1119px) { .nav--bureau ul { gap: 0.15rem 0.5rem; } .nav--bureau a { font-size: 0.85rem; } .nav a.nav__bouton { padding: 0.45rem 0.9rem; } }
@media (min-width: 1000px) and (max-width: 1119px) { .entete__logo img { width: 52px; height: 52px; } }

/* ===== Pages intérieures : Qui sommes-nous (2 novembre) ===== */
/* Titre de section : même signature que les H2 de l'accueil (trait brique, cœur marine) */
.titre-section { font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem); color: #06368b; margin: 0 0 1.5rem; }
.titre-section::after { content: ""; display: block; width: 112px; height: 16px; margin-top: 0.35em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22112%22%20height%3D%2216%22%20viewBox%3D%220%200%20112%2016%22%3E%3Crect%20x%3D%220%22%20y%3D%226.0%22%20width%3D%2292%22%20height%3D%224%22%20rx%3D%222.0%22%20fill%3D%22%23a74453%22/%3E%3Cpath%20transform%3D%22translate%2896%2C1.0%29%20scale%281.0%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%2306368b%22/%3E%3C/svg%3E") no-repeat left center; }
.qsn-intro { font-size: 1.15rem; max-width: var(--colonne); margin: 0 0 1.5rem; }

/* Listes à puces en cœur brique */
.liste-coeur { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.55rem; max-width: var(--colonne); }
.liste-coeur li { position: relative; padding-left: 1.7rem; }
.liste-coeur li::before { content: "\2665" / ""; position: absolute; left: 0; top: 0; color: var(--c-coeur); }

/* Président : texte à gauche, portrait à droite */
.qsn-president__grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); align-items: center; }
.qsn-president__grille .titre-section { grid-column: 1 / -1; }
.qsn-president__photo { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; justify-self: center; }
.qsn-president__temps { font-family: var(--f-titre); font-weight: 600; font-size: 1.2rem; color: var(--c-coeur); margin: 0 0 0.6rem; }
.qsn-president__pair { margin: 0; max-width: var(--colonne); }
.qsn-president__pair strong { color: var(--c-coeur); }
@media (max-width: 860px) {
  .qsn-president__grille { grid-template-columns: 1fr; }
  .qsn-president__photo { grid-row: 2; max-width: 240px; margin-bottom: 2rem; }
}

/* Équipe : encadré sable */
.qsn-equipe__encadre { background: var(--c-fond-2); border-radius: 22px; padding: clamp(1.5rem, 4vw, 2.75rem); }
.qsn-equipe__encadre .liste-coeur { margin-bottom: 0; }

/* Véhicules : trois photos côte à côte */
.qsn-vehicules__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 1.5rem); }
.qsn-vehicules__grille .a-fournir { min-height: 0; aspect-ratio: 4 / 3; }
.qsn-vehicules__grille img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
@media (max-width: 760px) { .qsn-vehicules__grille { grid-template-columns: 1fr; } }

/* Le titre porte déjà sa marge : grilles collées sous l'intro */
.partenaires .partenaires__grille, .personnalites .personnalites__grille { margin-top: 0; }

/* Questions fréquentes : accordéon sobre */
.faq__liste { display: grid; gap: 0.8rem; max-width: 52rem; }
.faq__item { background: var(--c-fond-2); border-radius: var(--rayon); }
.faq__item summary { cursor: pointer; list-style: none; position: relative; padding: 1.1rem 3.2rem 1.1rem 1.4rem; font-family: var(--f-titre); font-weight: 600; font-size: 1.15rem; color: #06368b; min-height: 44px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+" / ""; position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; line-height: 1; color: var(--c-coeur); }
.faq__item[open] summary::after { content: "\2212" / ""; }
.faq__item summary:hover { color: var(--c-coeur); }
.faq__item p { margin: 0; padding: 0 1.4rem 1.3rem; max-width: var(--colonne); }
.faq__suite { margin: 2rem 0 0; }
/* Véhicules : deux photos en hauteur et une en largeur, alignées à la même hauteur */
.qsn-vehicules__grille { display: flex; gap: clamp(1rem, 3vw, 1.5rem); }
.qsn-vehicules__grille img.vehicule { width: 0; min-width: 0; height: auto; border-radius: var(--rayon); aspect-ratio: auto; object-fit: cover; }
.vehicule--portrait { flex: 0.75 1 0; }
.vehicule--paysage { flex: 1.3333 1 0; }
@media (max-width: 760px) {
  .qsn-vehicules__grille { flex-wrap: wrap; }
  .vehicule--portrait { flex: 1 1 calc(50% - 0.75rem); }
  .vehicule--paysage { flex: 1 1 100%; }
}
/* Président : photo avec Sébastien Chabal, en largeur, avec sa légende */
.qsn-president__figure { margin: 0; justify-self: center; width: 100%; }
.qsn-president__figure .qsn-president__photo { max-width: 100%; width: 100%; aspect-ratio: auto; height: auto; object-fit: initial; border-radius: var(--rayon); }
.qsn-president__figure figcaption { margin-top: 0.6rem; font-size: 0.95rem; font-weight: 700; color: var(--c-coeur); text-align: center; }
@media (max-width: 860px) { .qsn-president__figure { grid-row: 2; margin-bottom: 2rem; } }
/* Photo avec Sébastien Chabal plus petite */
.qsn-president__figure { max-width: 320px; }
@media (max-width: 860px) { .qsn-president__figure { max-width: 280px; } }
/* Président : logo ISMA 1 s, puis photo avec Chabal en fondu (comme le rond de l'accueil).
   3 cycles et demi : l'animation s'arrête sur la photo. */
.alterne { position: relative; width: 100%; aspect-ratio: 959 / 660; border-radius: var(--rayon); overflow: hidden; }
.alterne img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.alterne__photo { z-index: 1; opacity: 0; }
.alterne.en-cours .alterne__photo { animation: fondu 2.4s ease-in-out 3.5 forwards; }
.alterne.sans-anim .alterne__photo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .alterne .alterne__photo, .alterne.en-cours .alterne__photo { animation: none; opacity: 1; } }

/* ===== Page Nos missions et objectifs (3 novembre) ===== */
.missions__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); counter-reset: none; }
@media (max-width: 960px) { .missions__liste { grid-template-columns: 1fr; } }
.mission-carte { background: var(--c-fond-2); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.2rem); border-top: 4px solid #06368b; }
.mission-carte__num { display: block; font-family: var(--f-titre); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--c-coeur); margin-bottom: 0.6rem; }
.mission-carte h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem); color: #06368b; margin: 0 0 0.7rem; }
.mission-carte h2::after { content: ""; display: block; width: 70px; height: 12px; margin-top: 0.5rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2270%22%20height%3D%2212%22%20viewBox%3D%220%200%2070%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224.5%22%20width%3D%2254%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23a74453%22/%3E%3Cpath%20transform%3D%22translate%2858%2C0.75%29%20scale%280.75%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%2306368b%22/%3E%3C/svg%3E") no-repeat left center; }
.mission-carte p { margin: 0 0 0.8rem; }
.mission-carte__mots { display: inline-block; font-style: italic; font-weight: 700; color: var(--c-coeur); margin: 0.3rem 0 0 !important; }
.mission-carte .liste-coeur { margin: 0; gap: 0.5rem; }
.mission-carte a { color: var(--c-coeur); font-weight: 700; }
.mission-carte a:hover { color: #06368b; }
.missions__suite { margin: 2.5rem 0 0; text-align: center; }
/* Missions : 1 et 2 côte à côte, 3 sur toute la largeur avec sa liste en deux colonnes */
.missions__liste { grid-template-columns: repeat(2, 1fr); }
.mission-carte:nth-child(3) { grid-column: 1 / -1; }
.mission-carte:nth-child(3) .liste-coeur { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; max-width: none; }
@media (max-width: 760px) {
  .missions__liste { grid-template-columns: 1fr; }
  .mission-carte:nth-child(3) .liste-coeur { grid-template-columns: 1fr; }
}
/* Missions : une photo par carte (1 et 2 en bas de carte, 3 à droite) */
.mission-carte { display: flex; flex-direction: column; }
.mission-carte__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-top: auto; padding-top: 0; }
.mission-carte:not(.mission-carte--large) .mission-carte__mots { margin-bottom: 1.4rem !important; }
.mission-carte--large { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.mission-carte--large .mission-carte__photo { margin-top: 0; }
.mission-carte:nth-child(3) .liste-coeur { grid-template-columns: 1fr; }
@media (max-width: 760px) { .mission-carte--large { grid-template-columns: 1fr; } }

/* ===== Page Notre offre (3 novembre) ===== */
.offre__liste { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.offre-bloc { background: var(--c-fond-2); border-radius: 22px; border-top: 4px solid #06368b; padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.offre-bloc h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.8rem); color: #06368b; margin: 0 0 1.2rem; }
.offre-bloc h2::after { content: ""; display: block; width: 70px; height: 12px; margin-top: 0.5rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2270%22%20height%3D%2212%22%20viewBox%3D%220%200%2070%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224.5%22%20width%3D%2254%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23a74453%22/%3E%3Cpath%20transform%3D%22translate%2858%2C0.75%29%20scale%280.75%29%22%20d%3D%22M8%2014s-7-4.3-8.9-8.6C-2.3%202.2-.4%200%202.3%200%204.2%200%205.4%201.1%206%202.4%206.6%201.1%207.8%200%209.7%200c2.7%200%204.6%202.2%203.2%205.4C11%209.7%208%2014%208%2014z%22%20fill%3D%22%2306368b%22/%3E%3C/svg%3E") no-repeat left center; }
.offre-bloc .liste-coeur { max-width: 62rem; margin-bottom: 1rem; }
.offre-bloc a { color: var(--c-coeur); font-weight: 700; }
.offre-bloc a:hover { color: #06368b; }
.offre-bloc__grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.offre-bloc__grille > .liste-coeur { margin: 0; }
@media (max-width: 860px) { .offre-bloc__grille { grid-template-columns: 1fr; } }
.offre-bloc__texte { max-width: var(--colonne); margin: 0 0 1rem; }
.offre-sous-liste { list-style: disc; margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.offre-sous-liste li { padding-left: 0; }
.offre-sous-liste li::before { content: none; }
.offre-sous-liste li::marker { color: var(--c-coeur); }
/* Encadré ATTENTION : fond crème, filet brique */
.offre-attention { background: var(--c-fond); border-radius: var(--rayon); border-left: 5px solid var(--c-coeur); padding: 1.3rem 1.4rem; }
.offre-attention__titre { font-family: var(--f-titre); font-weight: 800; color: var(--c-coeur); margin: 0 0 0.8rem; font-size: 1.15rem; }
.offre-attention .liste-coeur { margin: 0 0 1rem; }
.offre-attention__lien { margin: 0; }
/* Emplacements photos */
.offre-photos { display: grid; gap: 1rem; margin-top: 1.5rem; }
.offre-photos--4 { grid-template-columns: repeat(4, 1fr); }
.offre-photos--3 { grid-template-columns: repeat(3, 1fr); }
.offre-photos .a-fournir { min-height: 0; aspect-ratio: 4 / 3; font-size: 0.9rem; }
.offre-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
@media (max-width: 860px) { .offre-photos--4, .offre-photos--3 { grid-template-columns: repeat(2, 1fr); } }

/* ===== Emplacements photo décrits (3 novembre) ===== */
.photo-a-venir { min-height: 0; aspect-ratio: 4 / 3; font-size: 0.9rem; line-height: 1.4; padding: 1rem; }
.pilier .photo-a-venir { margin-top: auto; }
.foi__figure .photo-a-venir { width: 100%; }
.photo-a-venir--video { aspect-ratio: 16 / 9; max-width: 34rem; margin: 0 0 1.4rem; }
.qsn-president__photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 860px) { .qsn-president__photos { grid-template-columns: repeat(2, 1fr); } }
.qsn-vehicules__grille .photo-a-venir.vehicule { width: 0; min-width: 0; aspect-ratio: 3 / 4; }
@media (max-width: 760px) { .qsn-vehicules__grille .photo-a-venir.vehicule { width: auto; } }
.foi__figure .photo-a-venir, .pilier .photo-a-venir { display: grid; place-items: center; text-align: center; }
.photo-a-venir--video { max-width: 26rem; }

/* ===== Page Nos réalisations (3 novembre) ===== */
.real-titre { font-family: var(--f-titre); font-weight: 600; font-size: 1.2rem; color: var(--c-coeur); margin: 2rem 0 0.9rem; }
.offre-bloc h2 + .real-titre { margin-top: 0.4rem; }
.real-evenement { font-family: var(--f-titre); font-weight: 600; font-size: 1.05rem; color: #06368b; margin: 1.3rem 0 0.6rem; }
.real-evenement::before { content: "\2665" / ""; color: var(--c-coeur); margin-right: 0.5rem; }
.galerie { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
@media (max-width: 860px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
.galerie .photo-a-venir { font-size: 0.82rem; }
.galerie__figure { margin: 0; }
.galerie__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.galerie__figure figcaption { margin-top: 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--c-coeur); text-align: center; }
.real-logos { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
@media (max-width: 860px) { .real-logos { grid-template-columns: repeat(2, 1fr); } }
.real-logos .a-fournir { min-height: 90px; font-size: 0.82rem; }
.offre-bloc .partenaire a { color: #06368b; }

/* ===== Nos actus : liste et articles (3 novembre) ===== */
.actus__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); }
@media (max-width: 960px) { .actus__liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .actus__liste { grid-template-columns: 1fr; } }
.actu-carte__lien { display: flex; flex-direction: column; height: 100%; background: var(--c-fond-2); border-radius: 22px; overflow: hidden; text-decoration: none; color: #06368b; }
.actu-carte__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-fond-2); }
.actu-carte__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actu-carte__photo--logo { display: grid; place-items: center; background: var(--c-sable-fonce); }
.actu-carte__photo--logo img { width: 120px; height: 120px; object-fit: contain; }
.actu-carte__corps { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.actu-carte__date { font-size: 0.95rem; font-weight: 700; color: var(--c-coeur); margin: 0 0 0.4rem; }
.actu-carte__titre { font-size: 1.3rem; color: #06368b; margin: 0 0 0.6rem; }
.actu-carte__desc { font-size: 1rem; margin: 0 0 1rem; }
.actu-carte__suite { margin-top: auto; font-weight: 700; color: var(--c-coeur); }
.actu-carte__lien:hover .actu-carte__titre, .actu-carte__lien:focus-visible .actu-carte__titre { color: var(--c-coeur); }
.actus__vide { font-size: 1.15rem; }

/* Article : colonne de lecture étroite */
.conteneur--article { width: min(100% - 2rem, 50rem); }
.article__infos { font-weight: 700; color: var(--c-coeur); margin: 0.6rem 0 0; }
.article__photo { margin: 0 0 2rem; }
.article__photo img { width: 100%; height: auto; border-radius: var(--rayon); display: block; }
.article__texte { font-size: 1.1rem; line-height: 1.75; }
.article__texte > * { max-width: var(--colonne); }
.article__texte h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.8rem); color: #06368b; margin: 2.2rem 0 0.8rem; }
.article__texte h3 { font-size: 1.25rem; color: var(--c-coeur); margin: 1.8rem 0 0.6rem; }
.article__texte a { color: var(--c-coeur); font-weight: 700; }
.article__texte a:hover { color: #06368b; }
.article__texte ul, .article__texte ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.article__texte li { margin-bottom: 0.4rem; }
.article__texte li::marker { color: var(--c-coeur); }
.article__texte img { display: block; width: 100%; max-width: var(--colonne); height: auto; margin: 1.5rem 0; border-radius: var(--rayon); }
.article__texte blockquote { margin: 1.5rem 0; padding: 1rem 1.4rem; background: var(--c-fond-2); border-left: 5px solid var(--c-coeur); border-radius: 0 var(--rayon) var(--rayon) 0; font-family: var(--f-titre); font-weight: 600; font-size: 1.2rem; }
.article__texte blockquote p { margin: 0; }
.article__video { margin: 2rem 0 0; aspect-ratio: 16 / 9; border-radius: var(--rayon); overflow: hidden; background: #06368b; }
.article__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.article__retour { margin: 2.5rem 0 0; }
/* Article : respirations, photo au format paysage, puces en cœur */
.article { padding: 2rem 0 70px; }
.article__photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.article__texte ul { list-style: none; padding-left: 0; }
.article__texte ul > li { position: relative; padding-left: 1.7rem; }
.article__texte ul > li::before { content: "\2665" / ""; position: absolute; left: 0; top: 0; color: var(--c-coeur); }

/* ===== Page Contact (3 novembre) ===== */
.contact__grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact__grille { grid-template-columns: 1fr; } }
.formulaire { display: grid; gap: 1.2rem; }
.formulaire .titre-section { margin-bottom: 0.4rem; }
.formulaire__note { margin: 0; font-size: 0.95rem; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .formulaire__ligne { grid-template-columns: 1fr; } }
.champ { display: grid; gap: 0.4rem; }
.champ label { font-weight: 700; color: #06368b; }
.champ label span, .formulaire__note span { color: var(--c-coeur); }
.champ input, .champ select, .champ textarea { font: inherit; font-size: 1.05rem; color: #06368b; background: #fff; border: 2px solid #c9bfae; border-radius: 12px; padding: 0.75rem 0.9rem; min-height: 48px; width: 100%; }
.champ textarea { resize: vertical; min-height: 10rem; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid #06368b; outline-offset: 2px; border-color: #06368b; }
.champ__aide { margin: 0; font-size: 0.95rem; color: var(--c-coeur); font-weight: 700; }
.formulaire__rgpd { margin: 0; font-size: 0.95rem; }
.formulaire__rgpd a { color: var(--c-coeur); font-weight: 700; }
.formulaire .bouton { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
.contact__coordonnees { background: var(--c-fond-2); border-radius: 22px; border-top: 4px solid #06368b; padding: clamp(1.5rem, 3.5vw, 2.2rem); }
.contact__coordonnees address { font-style: normal; }
.contact__titre { font-size: 1.4rem; color: #06368b; margin: 0 0 1.2rem; }
.contact__titre--reseaux { margin-top: 1.8rem; }
.contact__bloc { margin: 0 0 1.1rem; }
.contact__libelle { display: block; font-size: 0.95rem; font-weight: 700; color: var(--c-coeur); margin-bottom: 0.15rem; }
.contact__bloc a { color: #06368b; font-weight: 700; }
.contact__bloc a:hover { color: var(--c-coeur); }
.contact__coordonnees .reseaux { gap: 0.6rem; }
.merci .bouton { margin-top: 1rem; }

/* ===== Page 404 (3 novembre) ===== */
.introuvable__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .introuvable__grille { grid-template-columns: 1fr; } }
.introuvable__encadre { background: var(--c-fond-2); border-radius: 22px; border-top: 4px solid #06368b; padding: clamp(1.5rem, 3.5vw, 2.2rem); }
.introuvable__titre { font-size: 1.4rem; color: #06368b; margin: 0 0 0.9rem; }
.introuvable__encadre .bouton { margin-top: 0.4rem; }
.introuvable__liens a { color: #06368b; font-weight: 700; }
.introuvable__liens a:hover { color: var(--c-coeur); }

/* ===== Mentions légales et confidentialité (3 novembre) ===== */
.legal__maj { font-weight: 700; color: var(--c-coeur); margin: 0 0 1.5rem; }
.legal__texte h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.55rem); color: #06368b; margin: 2.2rem 0 0.7rem; }
.legal__texte p { max-width: var(--colonne); }
.legal__texte a { color: var(--c-coeur); font-weight: 700; }
.legal__texte a:hover { color: #06368b; }
.legal__texte .liste-coeur { margin-bottom: 1rem; }
.legal__texte > * { max-width: 50rem; }
/* Charte Romain Jacob : tout le bloc est un lien vers la charte */
.pied__charte a { display: flex; align-items: center; gap: 0.8rem; color: #06368b; text-decoration: none; }
.pied__charte a span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.pied__charte a:hover span, .pied__charte a:focus-visible span { color: var(--c-coeur); text-decoration-color: currentColor; }

/* ===== Paroles de la chanson (3 novembre) ===== */
.paroles__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .paroles__grille { grid-template-columns: 1fr; } }
.paroles__ecoute { background: var(--c-fond-2); border-radius: 22px; border-top: 4px solid #06368b; padding: clamp(1.5rem, 3.5vw, 2.2rem); position: sticky; top: 100px; }
@media (max-width: 860px) { .paroles__ecoute { position: static; } }
.paroles__titre { font-size: 1.4rem; color: #06368b; margin: 0 0 1rem; }
.paroles__credits { margin: 1.2rem 0 0; font-weight: 700; color: var(--c-coeur); }
.paroles__refrain { background: var(--c-fond-2); border-left: 5px solid var(--c-coeur); border-radius: 0 var(--rayon) var(--rayon) 0; padding: 1.3rem 1.5rem; margin-bottom: 2.5rem; }
.paroles__refrain p { font-family: var(--f-titre); font-weight: 600; font-size: 1.2rem; line-height: 1.7; margin: 0; color: #06368b; }
.paroles__couplets { margin: 0; padding-left: 1.6rem; display: grid; gap: 1.2rem; }
.paroles__couplets li::marker { color: var(--c-coeur); font-weight: 800; font-family: var(--f-titre); }
.paroles__couplets p { margin: 0; line-height: 1.7; }
/* Nom d'une personnalité avec lien : même couleur que les autres noms */
.perso__nom a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.perso__nom a:hover { color: #06368b; }

/* ===== Bouton Menu sur mobile : marine comme les autres boutons, brique au survol (3 novembre) ===== */
.nav-mobile summary { background: #06368b; color: var(--c-fond); }
.nav-mobile summary:hover, .nav-mobile summary:focus-visible, .nav-mobile[open] summary { background: var(--c-coeur); color: var(--c-fond); }

.qsn-president__photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.mission-carte--large .mission-carte__photo { aspect-ratio: 3 / 4; }
@media (max-width: 760px) { .mission-carte--large .mission-carte__photo { aspect-ratio: 4 / 5; object-position: center 60%; } }
.foi__bd { grid-column: 1 / -1; margin: 1.5rem auto 0; max-width: 340px; text-align: center; }
.foi__bd img { display: block; width: 100%; height: auto; border-radius: 12px; }
.foi__bd figcaption { font-size: 0.85rem; margin-top: 0.4rem; color: var(--c-accent, #a74453); }
/* Sommaire de page (Nos réalisations) */
.sommaire { background: var(--c-fond-2); border-radius: 22px; padding: 1.2rem clamp(1.25rem, 3vw, 2rem); }
.sommaire__titre { font-family: var(--f-titre); font-weight: 600; color: var(--c-coeur); margin: 0 0 0.6rem; }
.sommaire__liste { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; counter-reset: som; }
.sommaire__liste li { counter-increment: som; }
.sommaire__liste a { display: inline-block; padding: 0.45rem 1rem; border: 2px solid #06368b; border-radius: 999px; color: #06368b; font-weight: 600; text-decoration: none; }
.sommaire__liste a::before { content: counter(som) ". "; color: var(--c-coeur); }
.sommaire__liste a:hover, .sommaire__liste a:focus-visible { background: #06368b; color: #fff; }
.sommaire__liste a:hover::before, .sommaire__liste a:focus-visible::before { color: #fff; }
.offre-bloc[aria-labelledby^="real-"] { scroll-margin-top: 6rem; }
.contact__drapeau { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0 0 1.5rem; }
.paroles__pochette { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0 0 1.4rem; }
.paroles__clip { margin: 1.4rem 0 0; }
@media (min-width: 861px) { .paroles__pochette { max-width: 260px; } }
.qsn-parcours { background: var(--c-fond-2); border-radius: 16px; border-left: 4px solid var(--c-coeur); padding: 1rem 1.2rem; margin: 0 0 1.4rem; max-width: 34rem; }
.qsn-parcours__titre { font-weight: 700; color: #06368b; margin: 0 0 0.6rem; }
.qsn-parcours__duree { font-weight: 500; color: var(--c-coeur); }
.qsn-parcours__duree { white-space: nowrap; }
.qsn-parcours__video { display: block; width: 100%; max-width: 270px; height: auto; aspect-ratio: 268 / 480; border-radius: 12px; background: #000; }
.qsn-parcours { max-width: 22rem; }

/* ---------- Vidéos légendées : Nos réalisations, Qui sommes-nous (4 novembre) ---------- */
.real-video { margin: 0.6rem auto 1.6rem; max-width: 720px; }
.real-video--verticale { max-width: 270px; }
.real-video video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }
.real-video figcaption { margin-top: 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--c-coeur); text-align: center; }
.real-video__duree { font-weight: 500; white-space: nowrap; }
.real-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 270px)); justify-content: center; gap: 0.8rem; margin: 0.6rem 0 1.6rem; }
.real-videos .real-video { margin: 0; }
.qsn-video { margin-top: 1.5rem; margin-bottom: 0; }
.qsn-soutiens-videos__titre { text-align: center; margin-top: 2.5rem; }
.offre-video { margin-top: 1.5rem; margin-bottom: 0; }