/* ColoSolidaire — feuille de style principale
   Charte : coffre commun 00_Identite/Charte-graphique.md
   Règle : l'orange #FD9B5A (texte #1F2A2C) est réservé au bouton « Faire un don ». */

@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-vf.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson-next-vf.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson-next-italic-vf.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --canard: #1E787B;
  --canard-fonce: #14585A;
  --canard-nuit: #0B2E30;
  --orange: #FD9B5A;
  --orange-chiffre: #E07A35;
  --peche: #FCE0CE;
  --peche-clair: #FFF4EC;
  --menthe: #8AC9BF;
  --texte: #1F2A2C;
  --texte-doux: #4B5C5E;
  --fond-doux: #F4F8F8;
  --trait: #D5E3E3;
  --trait-clair: #E6ECEC;
  --blanc: #FFFFFF;
  --titre: "Montserrat", Arial, sans-serif;
  --corps: "Atkinson Hyperlegible Next", Arial, sans-serif;
  --large: 1200px;
  --gouttiere: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--corps); font-size: 18px; line-height: 1.55; color: var(--texte); background: var(--blanc); }
img { max-width: 100%; display: block; }
a { color: var(--canard); }
a:hover { color: var(--canard-fonce); }
:focus-visible { outline: 3px solid var(--canard); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.12; margin: 0; }
p { margin: 0; }

.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 { position: absolute; left: 16px; top: -60px; background: var(--canard); color: var(--blanc); padding: 10px 16px; border-radius: 8px; z-index: 20; font-weight: 700; }
.lien-evitement:focus { top: 12px; color: var(--blanc); }

.conteneur { max-width: var(--large); margin: 0 auto; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.pile { display: flex; flex-direction: column; gap: var(--pile, 16px); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 260px), 1fr)); gap: var(--gap, 20px); }
.deux-cols { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.deux-cols > * { flex: 1 1 420px; min-width: 0; }
.section { padding-top: 80px; padding-bottom: 80px; }
.section--doux { background: var(--fond-doux); }
.section--canard { background: var(--canard); color: var(--blanc); }
.section--peche { background: var(--peche); }

.titre-section { font-weight: 800; font-size: clamp(28px, 3.4vw, 38px); color: var(--canard); }
.section--canard .titre-section { color: var(--blanc); }
.surtitre { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--canard); }
.fil { font-size: 15px; color: var(--texte-doux); }
.fil a { color: inherit; }
.note { font-size: 14px; color: var(--texte-doux); }
.credit { font-size: 12px; color: var(--texte-doux); }
.a-valider { color: var(--texte); background: #FFF8D6; outline: 1px dashed #C9A400; padding: 0 4px; border-radius: 3px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; font-size: 17px; cursor: pointer; font-family: var(--corps); }
.btn--plein { background: var(--canard); color: var(--blanc); }
.btn--plein:hover { background: var(--canard-fonce); color: var(--blanc); }
.btn--contour { border-color: var(--canard); color: var(--canard); background: transparent; }
.btn--blanc { background: var(--blanc); color: var(--canard-fonce); }
.btn--contour-blanc { border-color: var(--blanc); color: var(--blanc); }
.btn--contour-blanc:hover { color: var(--blanc); background: rgba(255,255,255,0.1); }
.btn--petit { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn-don { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--orange); color: var(--texte); font-family: var(--titre); font-weight: 800; font-size: 16px; text-decoration: none; }
.btn-don:hover { background: #F98A42; color: var(--texte); }
.btn-don--grand { min-height: 54px; padding: 0 30px; font-size: 18px; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; background: var(--blanc); border-bottom: 1px solid var(--trait-clair); }
.entete__secondaire { background: var(--fond-doux); }
.entete__secondaire ul { max-width: 1440px; margin: 0 auto; padding: 6px 32px; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; font-size: 14px; }
.entete__secondaire a { color: var(--texte); }
.entete__principal { max-width: 1440px; margin: 0 auto; padding: 14px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.entete__logo { flex: none; display: inline-flex; }
.entete__logo img { width: 219px; height: 30px; object-fit: contain; }
.menu { flex: 1 1 auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-weight: 600; font-size: 15px; }
.menu a { color: var(--texte); text-decoration: none; }
.menu a:hover, .menu a[aria-current] { color: var(--canard); text-decoration: underline; text-underline-offset: 4px; }
.entete__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.menu-bouton { display: none; }

@media (max-width: 1100px) {
  .entete__secondaire { display: none; }
  .entete__principal { padding: 10px 16px; }
  .entete__logo img { width: 175px; height: 24px; }
  .menu-bouton { display: inline-flex; margin-left: auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 2px solid var(--trait); border-radius: 999px; background: var(--blanc); font: 700 15px var(--corps); color: var(--texte); cursor: pointer; }
  .menu { order: 5; flex-basis: 100%; display: none; }
  .menu.est-ouvert { display: block; }
  .menu ul { flex-direction: column; align-items: flex-start; gap: 0; font-size: 17px; }
  .menu li { width: 100%; border-top: 1px solid var(--trait-clair); }
  .menu a { display: block; padding: 12px 4px; }
  .entete__actions { order: 4; flex-basis: 100%; }
  .entete__actions .btn--contour { display: none; }
  .entete__actions .btn-don { flex: 1; justify-content: center; }
}
@media (min-width: 640px) and (max-width: 1100px) {
  .entete__actions { order: 2; flex-basis: auto; }
  .entete__actions .btn-don { flex: none; }
  .menu-bouton { margin-left: 0; order: 3; }
}

/* Bandeaux photo */
.bandeau-photo { position: relative; background-size: cover; background-position: center 40%; color: var(--blanc); }
.bandeau-photo--accueil { background-image: linear-gradient(90deg, rgba(11,46,48,0.92) 0%, rgba(11,46,48,0.72) 38%, rgba(11,46,48,0.15) 72%, rgba(11,46,48,0) 100%), url("/assets/img/illus-sauts-lac.webp"); }
.bandeau-photo__contenu { padding-top: 120px; padding-bottom: 190px; }
.bandeau-photo h1 { font-weight: 800; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.05; max-width: 10em; }
.bandeau-photo .chapo { font-size: clamp(18px, 1.8vw, 21px); max-width: 30em; color: #F2F7F7; }
.bandeau-photo .surtitre { color: var(--peche); }
.chiffre-cle { font-size: 16px; font-weight: 600; color: var(--peche); border-left: 4px solid var(--orange); padding-left: 14px; max-width: 32em; }
.bandeau-photo .credit { position: absolute; right: 16px; bottom: 120px; color: #E6F2F1; }
@media (max-width: 700px) {
  .bandeau-photo--accueil { background-image: linear-gradient(180deg, rgba(11,46,48,0.85) 0%, rgba(11,46,48,0.7) 100%), url("/assets/img/illus-sauts-lac.webp"); }
  .bandeau-photo__contenu { padding-top: 64px; padding-bottom: 150px; }
}

.bandeau-clair { background: linear-gradient(180deg, var(--peche) 0%, var(--peche-clair) 100%); }
.bandeau-clair--peche { background: var(--peche); }
.bandeau-clair__grille { padding-top: 64px; padding-bottom: 40px; }
.bandeau-clair h1 { font-weight: 800; font-size: clamp(34px, 4.4vw, 54px); color: var(--canard); }
.bandeau-clair .chapo { font-size: 20px; max-width: 32em; }
.photo-debord { margin: 0 0 -100px; position: relative; z-index: 2; }
.photo-debord img { width: 100%; height: 400px; object-fit: cover; box-shadow: 0 24px 50px rgba(11,46,48,0.22); }
.photo-debord figcaption { text-align: right; margin-top: 6px; }
.apres-debord { padding-top: 140px; }
@media (max-width: 700px) { .photo-debord { margin-bottom: 0; } .photo-debord img { height: 260px; } .apres-debord { padding-top: 64px; } }

.blob { border-radius: 58% 42% 47% 53% / 45% 55% 45% 55%; }
.blob2 { border-radius: 42% 58% 55% 45% / 52% 44% 56% 48%; }
.photo-blob { position: relative; display: flex; justify-content: center; }
.photo-blob__fond { position: absolute; width: 86%; height: 92%; top: 8%; left: 10%; background: var(--peche); }
.photo-blob__fond--menthe { background: var(--menthe); left: 4%; }
.photo-blob img { position: relative; width: 88%; height: 400px; object-fit: cover; }

/* Cartes publics */
.publics { position: relative; z-index: 2; margin-top: -96px; padding-bottom: 72px; }
.publics h2 { font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blanc); }
.carte-public { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--blanc); border-radius: 20px; box-shadow: 0 18px 40px rgba(11,46,48,0.18); text-decoration: none; color: var(--texte); }
.carte-public--peche { background: var(--peche); }
.carte-public__titre { font-family: var(--titre); font-weight: 700; font-size: 20px; color: var(--canard); }
.carte-public--peche .carte-public__titre, .carte-public--peche .carte-public__lien { color: var(--canard-fonce); }
.carte-public__texte { font-size: 16px; }
.carte-public__lien { font-weight: 700; font-size: 16px; color: var(--canard); margin-top: auto; }
.carte-public:hover { transform: translateY(-2px); transition: transform .15s; }

/* Chiffres */
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.chiffre { display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--orange); padding-top: 12px; }
.chiffre__valeur { font-family: var(--titre); font-weight: 800; font-size: clamp(38px, 4vw, 52px); line-height: 1; color: var(--orange-chiffre); }
.chiffre__libelle { font-size: 16px; }

/* Bloc don */
.bloc-don { background-image: linear-gradient(180deg, rgba(20,88,90,0.80) 0%, rgba(11,46,48,0.92) 100%), url("/assets/img/illus-colline.webp"); background-size: cover; background-position: center 30%; color: var(--blanc); padding-top: 96px; padding-bottom: 96px; }
.bloc-don h2 { font-weight: 800; font-size: clamp(32px, 4vw, 44px); }
.bloc-don .chapo { font-size: 20px; max-width: 30em; color: #F2F7F7; }
.bloc-don .note, .bloc-don .credit { color: #E6F2F1; }
.montants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.montant { background: rgba(255,255,255,0.94); color: var(--texte); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.montant__valeur { font-family: var(--titre); font-weight: 800; font-size: 28px; color: var(--canard-fonce); }
.montant__texte { font-size: 14px; }
@media (max-width: 560px) { .montants { grid-template-columns: 1fr; } }

/* Témoignage */
.citation__guillemet { font-family: var(--titre); font-weight: 800; font-size: 110px; line-height: 0.6; color: var(--orange); }
.citation blockquote { margin: 0; font-family: var(--titre); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; }
.citation figcaption { font-size: 16px; color: var(--texte-doux); }
.emplacement { border: 2px dashed var(--menthe); display: flex; align-items: center; justify-content: center; text-align: center; padding: 32px; color: var(--texte-doux); font-size: 15px; }

/* Cartes séjour */
.carte-sejour { display: flex; flex-direction: column; gap: 14px; }
.carte-sejour__photo { position: relative; }
.carte-sejour__photo img { width: 100%; height: 260px; object-fit: cover; border-radius: 28px 28px 28px 4px; }
.pastille { position: absolute; left: 16px; bottom: -14px; background: var(--blanc); color: var(--canard-fonce); font-size: 14px; font-weight: 700; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(11,46,48,0.15); }
.carte-sejour__corps { padding: 10px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.carte-sejour h3 { font-weight: 700; font-size: 21px; }
.carte-sejour h3 a { color: var(--texte); text-decoration: none; }
.carte-sejour h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-sejour { position: relative; }
.carte-sejour__infos { font-size: 15px; color: var(--texte-doux); }
.carte-sejour__lien { font-weight: 700; font-size: 16px; color: var(--canard); }

/* Raccourcis « Passer à l'action » */
.raccourci { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; border: 1px solid var(--trait); text-decoration: none; color: var(--texte); }
.raccourci--don { background: var(--peche); border-color: var(--peche); }
.raccourci__titre { font-family: var(--titre); font-weight: 700; font-size: 18px; color: var(--canard); }
.raccourci--don .raccourci__titre { color: var(--canard-fonce); }
.raccourci__texte { font-size: 15px; }

/* Actualités */
.carte-actu { display: flex; flex-direction: column; gap: 8px; position: relative; }
.carte-actu__type { font-size: 13px; font-weight: 600; color: var(--canard); letter-spacing: 0.04em; text-transform: uppercase; }
.carte-actu h3 { font-weight: 700; font-size: 19px; }
.carte-actu h3 a { color: var(--texte); text-decoration: none; }
.carte-actu h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-actu time, .carte-actu__meta { font-size: 15px; color: var(--texte-doux); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--canard); background: var(--blanc); color: var(--canard); font: 700 15px var(--corps); cursor: pointer; }
.filtre[aria-pressed="true"] { background: var(--canard); color: var(--blanc); }

/* Étapes */
.etapes { list-style: none; margin: 0; padding: 0; }
.etape { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--orange); padding-top: 16px; }
.etape__num { font-family: var(--titre); font-weight: 800; font-size: 44px; line-height: 1; color: var(--orange-chiffre); }
.etape h3 { font-weight: 700; font-size: 22px; }
.etape p { font-size: 16px; }

.cartes-blanches { list-style: none; margin: 0; padding: 0; }
.carte-blanche { background: var(--blanc); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.carte-blanche strong { color: var(--canard-fonce); }
.carte-blanche span { font-size: 15px; }

/* FAQ */
.faq { max-width: 900px; }
.faq details { background: var(--blanc); border-radius: 14px; padding: 18px 22px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin-top: 12px; }

/* Page don */
.cadre { border: 1px solid var(--trait); border-radius: 20px; padding: 28px; }
.bascule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: var(--fond-doux); padding: 6px; border-radius: 999px; }
.bascule button { min-height: 48px; border: none; border-radius: 999px; font: 700 17px var(--corps); background: transparent; color: var(--canard); cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--canard); color: var(--blanc); }
.helloasso { width: 100%; min-height: 720px; border: none; }
.helloasso-attente { min-height: 420px; border: 2px dashed var(--orange); border-radius: 16px; background: #FFF6F0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.encart { border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.encart h2 { font-weight: 700; font-size: 22px; color: var(--canard); }
.encart--canard { background: var(--canard); color: var(--blanc); }
.encart--canard h2 { color: var(--blanc); }
.encart--peche { background: var(--peche); border: 2px dotted var(--orange); }
.encart--trait { border: 1px solid var(--trait); }
.raison { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; background: var(--canard-fonce); }
.raison strong { font-family: var(--titre); font-size: 20px; }
.raison span { font-size: 16px; color: #E6F2F1; }

/* Fiche séjour */
.bandeau-sejour { background-size: cover; background-position: center 45%; color: var(--blanc); }
.bandeau-sejour__contenu { padding-top: 200px; padding-bottom: 120px; }
.bandeau-sejour .fil { color: #E6F2F1; }
.bandeau-sejour h1 { font-weight: 800; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.08; }
.bandeau-sejour .pastille { position: static; align-self: flex-start; box-shadow: none; }
.bandeau-sejour .chapo { font-size: 20px; max-width: 34em; color: #F2F7F7; }
.fiche { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-bottom: 80px; }
.fiche__corps { flex: 1 1 600px; min-width: 0; padding-top: 48px; }
.fiche__aside { flex: 1 1 340px; min-width: 0; margin-top: -72px; position: relative; z-index: 2; background: var(--blanc); border-radius: 24px; box-shadow: 0 24px 50px rgba(11,46,48,0.18); padding: 28px; }
.fiche__aside .titre { font-family: var(--titre); font-weight: 800; font-size: 26px; color: var(--canard-fonce); }
.fiche__aside .encadre { font-size: 16px; background: var(--peche); border-radius: 14px; padding: 14px; }
.caracteristiques { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.caracteristiques div { border-top: 3px solid var(--orange); padding-top: 10px; }
.caracteristiques dt { font-size: 14px; color: var(--texte-doux); }
.caracteristiques dd { margin: 0; font-weight: 700; }
.fiche h2 { font-weight: 800; font-size: 30px; color: var(--canard); }
@media (max-width: 700px) { .fiche__aside { margin-top: 0; } .bandeau-sejour__contenu { padding-top: 120px; padding-bottom: 56px; } }

/* Bandeau d'appel au don (bas de page) */
.appel-don { background: var(--fond-doux); }
.appel-don .conteneur { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.appel-don h2 { font-weight: 800; font-size: 28px; color: var(--canard); }

/* Pages de contenu (Markdown) */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 28px; color: var(--canard); margin-top: 1.6em; }
.prose h3 { font-size: 22px; margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose img { border-radius: 20px; }

/* Formulaires */
.formulaire { display: grid; gap: 18px; max-width: 640px; }
.champ { display: grid; gap: 6px; }
.champ label, .champ legend { font-weight: 700; }
.champ input, .champ select, .champ textarea { min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid #9DB3B3; font: 17px var(--corps); }
.champ textarea { min-height: 120px; }
.champ .aide { font-size: 15px; color: var(--texte-doux); }
fieldset.champ { border: none; padding: 0; margin: 0; }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.case input { min-height: 0; width: 20px; height: 20px; margin-top: 4px; }

/* Missions bénévoles */
.carte-mission { border: 1px solid var(--trait); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.carte-mission h3 { font-size: 22px; color: var(--canard); }
.carte-mission__meta { font-size: 15px; color: var(--texte-doux); }

/* Pied de page */
.pied { background: var(--texte); color: var(--trait-clair); }
.pied a { color: var(--trait-clair); }
.pied__grille { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 32px 48px; }
.pied__grille > * { flex: 1 1 280px; min-width: 0; }
.pied__titre { font-family: var(--titre); font-weight: 700; font-size: 18px; color: var(--blanc); }
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: 15px; }
.pied__logo { width: 219px; height: 30px; }
.newsletter { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter input { flex: 1 1 200px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--menthe); font-size: 16px; }
.newsletter button { min-height: 44px; padding: 0 18px; border-radius: 8px; border: none; background: var(--menthe); color: var(--texte); font-weight: 700; font-size: 16px; cursor: pointer; }
.pied__bas { border-top: 1px solid #34413F; }
.pied__bas .conteneur { padding-top: 16px; padding-bottom: 16px; font-size: 14px; color: #B9C6C6; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .entete, .pied, .appel-don { display: none; } }
.pied .btn-don { color: var(--texte); }