/* V251.2.73 — CSS commun consolidé. */

/* ===== Source consolidée : site-v251-2-26.css ===== */


/* V251.2.16 — Pacifico local, identique au prototype V252. */
@font-face {
  font-family: 'Pacifico';
  src: url('../fonts/pacifico-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

/* V244 — Icônes Tabler SVG intégrées, avec import Nunito maintenu en tête de feuille. */
svg.ti{width:1em!important;height:1em!important;display:inline-block;vertical-align:-0.125em;overflow:visible;flex-shrink:0;pointer-events:none}

/* ═══ BASE, COMPOSANTS ET RESPONSIVE ═══ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:#EBE3D4;color:#2A2A2A;font-size:16px;line-height:1.7}

:root{
  --vert:        #3D6B4E;
  --vert-fonce:  #2A4A35;
  --vert-mid:    #5A8A6A;
  --vert-clair:  #B8D4C0;
  --vert-pale:   #E8F2EB;
  --vert-sauge:  #8AAA94;
  --creme:       #F7F3EC;
  --lin:         #EBE3D4;
  --blanc:       #FDFAF5;
  --ocre:        #C8934A;
  --ocre-clair:  #F5E8D0;
  --terra:       #B85C38;
  --terra-clair: #F5E0D0;
  --texte:       #2A2A2A;
  --texte-doux:  #4A4A4A;
  --texte-muted: #888;
  --border:      #D4CDB8;
  --papier:      #FBF7EF;
  --bord-doux:   #E3DBC9;
}

.page{max-width:1100px;margin:0 auto;background:var(--creme);box-shadow:0 2px 40px rgba(0,0,0,0.10)}
h1,h2,h3{font-family:'Nunito',sans-serif;color:var(--texte);line-height:1.22}
h1{font-size:40px;font-weight:800}
h2{font-size:26px;font-weight:700}
h3{font-size:17px;font-weight:700}
p{color:var(--texte-doux);line-height:1.78}

/* BOUTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;padding:13px 28px;border-radius:50px;cursor:pointer;border:none;text-decoration:none;transition:transform 0.15s,box-shadow 0.15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.btn-vert   {background:var(--vert);color:#fff;box-shadow:0 3px 10px rgba(42,74,53,0.20)}

.btn-rouge  {background:#C0392B;color:#fff;box-shadow:0 3px 10px rgba(192,57,43,0.28)}
.btn-rouge:hover{background:#A93226 !important;box-shadow:0 6px 16px rgba(192,57,43,0.35) !important;transform:translateY(-2px)}
.btn-terra  {background:var(--terra);color:#fff;box-shadow:0 3px 10px rgba(184,92,56,0.22)}
.btn-outline{background:var(--vert-pale);color:var(--vert);border:2px solid var(--vert)}


.btn-sm{padding:9px 20px;font-size:13.5px}

/* LABELS */
.eyelet{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--terra);margin-bottom:10px}
#page-agenda .eyelet{font-weight:900;font-size:14px;letter-spacing:1.5px}
#page-home .eyelet, #page-home .eyelet-vert{font-weight:900;font-size:12px;letter-spacing:1.5px}
#page-asso .eyelet, #page-asso .eyelet-vert, #page-asso .eyelet-light{font-weight:900;font-size:12px;letter-spacing:1.5px}
#page-aide .eyelet, #page-aide .eyelet-vert{font-weight:900;font-size:12px;letter-spacing:1.5px}
.eyelet-vert{color:var(--vert-mid)}
.eyelet-light{color:#8ABFA8}

/* ── HEADER ── */




.header-brand-name{font-size:30px;font-weight:900;color:var(--vert-fonce);font-family:'Nunito',sans-serif;line-height:1.1;letter-spacing:-0.3px}




.nav-cta{position:absolute;right:48px;background:var(--vert);color:#fff;border:none;padding:10px 22px;border-radius:50px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;transition:background 0.2s}


/* ── HERO CLAIR ── */
.hero{background:var(--creme);display:grid;grid-template-columns:1fr 1fr;min-height:520px;align-items:center;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;top:-80px;right:45%;width:320px;height:320px;background:radial-gradient(circle,rgba(184,212,192,0.3) 0%,transparent 70%);pointer-events:none}
.hero-left{padding:68px 48px 68px 60px;position:relative;z-index:2}

.hero h1{font-size:33px;color:var(--vert-fonce);margin-bottom:18px;line-height:1.18;font-weight:900}
.hero h1 em{font-style:normal;color:var(--terra)}
.hero-sub{font-size:15.5px;color:var(--texte-doux);line-height:1.72;margin-bottom:14px;max-width:460px}




.hero-right{position:relative;min-height:520px;overflow:hidden;border-left:4px solid var(--vert-pale)}
.hero-right-photo{width:100%;height:100%;min-height:520px;background:linear-gradient(160deg,#C8DDD0 0%,#A8C4B0 35%,#8AAA94 65%,#6A8A78 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative}


/* FEUILLES DÉCO SVG */


/* ── SÉPARATEUR ONDULÉ ── */
.wave-sep{width:100%;line-height:0;display:block;overflow:hidden}
.wave-sep svg{display:block;width:100%}

/* ── SECTION GÉNÉRIQUE ── */
.section{padding:72px 60px}
.section-tight{padding:56px 60px}
.section-head{text-align:center;margin-bottom:48px}
.section-head h2{margin-bottom:8px}
.section-head p{font-size:15px;color:var(--texte-muted);max-width:560px;margin:0 auto;line-height:1.7}

/* ── BACKGROUNDS ── */
.bg-creme  {background:var(--creme)}
.bg-blanc  {background:var(--blanc)}
.bg-lin    {background:var(--lin)}
.bg-pale   {background:var(--vert-pale)}
.bg-fonce  {background:var(--vert-fonce)}



/* ── PROMESSE CHIPS ── */







/* ── BÉNÉFICES - CARTES PAPIER ── */
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ben-card{
  background:var(--blanc);
  border-radius:18px 6px 18px 6px;
  padding:28px 22px;
  border:1.5px solid var(--vert-clair);
  position:relative;overflow:hidden;
  transition:transform 0.2s,box-shadow 0.2s;
  box-shadow:0 2px 8px rgba(42,74,53,0.06);
}
@media (hover: hover) and (pointer: fine) {
.ben-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(42,74,53,0.12)}
}















.ben-card h3{font-size:15.5px;color:var(--vert-fonce);margin-bottom:8px;padding-right:40px;font-weight:800}
.ben-card p{font-size:13px;color:var(--texte-doux);line-height:1.7}

/* ── GALERIE ── */
.gal-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;align-items:start}
.gal-card{border-radius:16px;overflow:hidden;position:relative;cursor:pointer}
.gal-card.main{grid-row:span 2;height:100%}
.gal-photo{width:100%;height:100%;min-height:190px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.gal-card.main .gal-photo{min-height:400px}
.gal-card:nth-child(1) .gal-photo{background:linear-gradient(160deg,#7AAA84,#4A7C59)}
.gal-card:nth-child(2) .gal-photo{background:linear-gradient(160deg,#A8BDB0,#5A8A6A)}
.gal-card:nth-child(3) .gal-photo{background:linear-gradient(160deg,#C4B898,#A89878)}
.gal-card:nth-child(4) .gal-photo{background:linear-gradient(160deg,#C8A484,#B87848)}
.gal-card:nth-child(5) .gal-photo{background:linear-gradient(160deg,#B4C8B0,#6A9878)}
.gal-cat-label{position:absolute;top:10px;left:10px;background:rgba(255,255,255,0.92);color:var(--vert-fonce);font-size:11px;font-weight:800;padding:4px 11px;border-radius:50px}
.gal-legend{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(30,55,35,0.88) 0%,transparent 100%);color:#fff;font-size:12px;padding:26px 12px 12px;line-height:1.5;font-style:italic}


/* ── PÉDAGOGIE ── */
.section-peda{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.peda-text h2{color:var(--vert-fonce);margin-bottom:16px;line-height:1.3}
.peda-text p{font-size:15px;color:var(--texte-doux);line-height:1.75;margin-bottom:18px}


.peda-note{font-size:12.5px;color:var(--texte-muted);font-style:italic;margin-bottom:20px}
.reassurance-box{background:var(--ocre-clair);border-radius:16px;padding:18px 22px;border-left:4px solid var(--ocre)}
.reassurance-box p{font-size:14px;color:#7A4A20;line-height:1.7;font-style:italic;margin:0}


/* ── TÉMOIGNAGE ── */

.section-temoignage::before{content:'"';position:absolute;top:-20px;left:40px;font-size:180px;color:rgba(61,107,78,0.08);font-family:Georgia,serif;line-height:1}




/* ── ÉQUIPE ── */
.eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.eq-card{background:var(--blanc);border-radius:20px;padding:28px 20px;text-align:center;border:2px solid var(--vert-clair);transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 3px 8px rgba(42,74,53,0.08), 0 12px 26px -12px rgba(42,74,53,0.22)}
@media (hover: hover) and (pointer: fine) {
.eq-card:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 14px rgba(42,74,53,0.10), 0 20px 36px -14px rgba(42,74,53,0.26)}
}

.eq-avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;overflow:hidden;border:3px solid var(--vert-pale)}
.eq-avatar img{width:100%;height:100%;object-fit:cover}
.eq-name{font-size:17px;color:var(--texte);font-weight:800;margin-bottom:3px}
.eq-role{font-size:11px;color:var(--terra);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.eq-text{font-size:13px;color:var(--texte-doux);line-height:1.7;font-style:italic}

.eq-cta{text-align:center;margin-top:22px}

/* ── INSCRIPTIONS ── */






@media (hover: hover) and (pointer: fine) {

}









/* ── FAQ ── */
.faq-list{margin-top:36px}
.faq-item{border-bottom:1.5px solid var(--lin)}
.faq-q{font-size:15.5px;color:var(--vert-fonce);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 0;cursor:pointer;user-select:none}
.faq-q span{flex:1;line-height:1.45}
.faq-q .ti{color:var(--terra);font-size:19px;flex-shrink:0;transition:transform 0.25s}
.faq-q.open .ti{transform:rotate(180deg)}
.faq-a{font-size:14.5px;color:var(--texte-doux);line-height:1.8;padding-bottom:18px;display:none}
.faq-a.open{display:block}
.faq-cta{text-align:center;margin-top:32px}

/* ── CONTACT ── */
.section-contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-h{font-size:25px;color:var(--vert-fonce);font-weight:800;margin-bottom:20px;line-height:1.3}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.contact-list li{font-size:14.5px;color:var(--texte-doux);display:flex;align-items:center;gap:11px}
.contact-list .ti{color:var(--vert);font-size:19px;flex-shrink:0}
.contact-list a{color:var(--vert);text-decoration:none;font-weight:600}
.contact-socials{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 20px}
.contact-socials a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(68,128,92,.35);background:rgba(255,255,255,.55);color:var(--vert-fonce);text-decoration:none;transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease}
.contact-socials a:hover,.contact-socials a:focus-visible{transform:translateY(-2px);background:var(--vert-pale);border-color:rgba(68,128,92,.55);box-shadow:0 8px 18px rgba(42,74,53,.10)}
.contact-socials svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.7}
.contact-socials svg rect,.contact-socials svg circle{fill:none}
.form-box{background:var(--blanc);border-radius:22px;padding:32px;border:1.5px solid var(--border)}
.form-title{font-size:19px;color:var(--vert-fonce);font-weight:900;margin-bottom:22px}
.form-gr{margin-bottom:16px}
.form-lbl{font-size:11px;color:var(--texte-muted);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block}
.form-inp,.form-sel,.form-ta{width:100%;padding:11px 14px;border:1.75px solid var(--border);border-radius:12px;font-size:14px;font-family:'Nunito',sans-serif;color:var(--texte);background:var(--creme);outline:none;transition:border-color 0.2s;box-shadow:inset 0 1px 3px rgba(42,74,53,0.09), inset 0 1px 0 rgba(255,255,255,0.5)}
.form-inp:focus,.form-sel:focus,.form-ta:focus{border-color:var(--vert)}
.form-ta{resize:vertical;min-height:90px}
.form-submit{width:100%;background:var(--vert);color:#fff;border:none;padding:14px;border-radius:50px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;margin-top:6px;transition:background 0.2s,transform 0.15s}
.form-submit:hover{background:var(--vert-fonce);transform:translateY(-1px)}

/* ── FOOTER ── */
.footer{background:var(--vert-fonce);padding:36px 60px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}








/* ── MODALE ── */
.modal-overlay{display:flex;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:99999;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.22s ease, visibility 0s linear 0.22s}
.modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0.22s ease, visibility 0s linear 0s}
.modal{position:relative;background:var(--blanc);border-radius:24px;padding:44px 38px;max-width:400px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.2);max-height:90vh;overflow-y:auto;transform:scale(0.95);transition:transform 0.22s ease}
.modal-overlay.show .modal{transform:scale(1)}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(42,74,53,0.08);border:none;color:var(--vert-fonce);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;z-index:2}
@media (max-width:760px){.modal-x{width:40px;height:40px;font-size:17px;top:10px;right:10px}}
.modal-x:hover{background:rgba(42,74,53,0.16)}
#modal-mode-form .form-submit{padding:11px;font-size:14px}
.modal-icon{width:68px;height:68px;border-radius:50%;background:var(--vert-pale);margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.modal-icon .ti{font-size:32px;color:var(--vert)}
.modal h3{font-size:21px;color:var(--vert-fonce);margin-bottom:10px}
.modal p{font-size:15px;color:var(--texte-doux);line-height:1.7;margin-bottom:24px}
.modal-close{background:var(--vert);color:#fff;border:none;padding:11px 30px;border-radius:50px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif}

/* ── ROUTING ── */
#page-home{display:block}
#page-asso{display:none}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  
  
  
  
  
  .hero{grid-template-columns:1fr}
  .hero-right{min-height:220px}
  .hero-left{padding:40px 22px}
  .hero h1{font-size:26px}
  .section,.section-tight{padding-left:22px;padding-right:22px}
  .ben-grid,.eq-grid,.section-peda,.section-contact,.inscr-docs{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gal-card.main{grid-row:span 1}
  
  
  .footer{padding:28px 22px}
}


/* ══════════════════════════════════
   V9 - SYSTÈME FULL WIDTH PROPRE
══════════════════════════════════ */
body { background: #EDE8DF; }

/* Supprimer le wrapper .page max-width */
.page { max-width: none !important; box-shadow: none !important; background: transparent !important; }

/* Container de contenu centré */




/* ── HEADER V9 ── */



/* Supprimer texte logo résiduel */







.nav-cta { position: absolute !important; right: 52px !important; top: 50%; transform: translateY(-50%); background: var(--vert); color: #fff; border: none; padding: 10px 22px; border-radius: 50px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: 'Nunito',sans-serif; transition: background 0.2s; white-space: nowrap; }


/* ── SECTIONS FULL WIDTH ── */
/* Toutes les sections sont width:100%, le fond va aux bords */
/* Le contenu est dans .w */



/* Remplacer .section par .sec dans le HTML est le plus propre */
/* Mais on garde la compatibilité avec les classes existantes */
.section { width: 100%; padding: 68px 0; }
.section-tight { width: 100%; padding: 52px 0; }

.section-peda { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; }

/* Réécrire les paddings internes des sections pour utiliser .w */
/* Ces overrides remplacent le padding inline des sections existantes */

.section > .ben-grid,
.section > .eq-grid,
.section > .promesse-inner,
.section > .section-head,
.section > .faq-list,
.section > .faq-cta,
.section > .piliers-row { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 52px; padding-right: 52px; box-sizing: border-box; }

/* Hero */
.hero { width: 100%; background: var(--creme); }
.hero-left { padding: 68px 52px 68px 8%; max-width: 580px; }

/* Galerie */
.section .gal-grid { max-width: 1100px; margin: 0 auto; padding: 0 52px; box-sizing: border-box; }

/* eyelet-vert : alignement géré par wrapper HTML */

/* Peda section */
.section.section-peda { max-width: 1100px; margin: 0 auto; padding-left: 52px; padding-right: 52px; box-sizing: border-box; }

/* Contact */
.section.section-contact { max-width: 1100px; margin: 0 auto; padding-left: 52px; padding-right: 52px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* Inscriptions */




/* FAQ */
.section > .section-head, .section > .faq-list, .section > .faq-cta { max-width: 860px; }

/* Footer */
.footer { width: 100%; padding: 36px 52px; }

/* ── NOS VALEURS V9 : AÉRÉ ── */









.valeur-texte ul li::before { content: '•'; position: absolute; left: 0; color: var(--vert); top: -1px; }
/* Citation plus compacte */



/* ── PRESSE ── */







/* ── RESPONSIVE V9 ── */
@media(max-width: 1000px) {
  .hero { grid-template-columns: 1fr !important; }
  .hero-left { padding: 40px 22px !important; max-width: 100% !important; }
  .hero-right { min-height: 220px; }
  .section, .section-tight, .sec, .sec-sm { padding-left: 0; padding-right: 0; }
   .section > .ben-grid, .section > .eq-grid,
  .section > .promesse-inner, .section > .section-head, .section > .faq-list,
  .section > .faq-cta, .section > .piliers-row { padding-left: 22px; padding-right: 22px; }
  .section .gal-grid, .section .gal-cta { padding: 0 22px; }
  .section.section-peda { padding: 48px 22px !important; grid-template-columns: 1fr !important; gap: 32px !important; }
  /* Peda-img : l'image doit remplir tout le cadre malgré le padding du conteneur */
  #page-home .peda-img { padding: 0 !important; }
  #page-home .peda-img img { width: 100% !important; }
  .section.section-contact { padding: 48px 22px !important; grid-template-columns: 1fr !important; gap: 32px !important; }
  
   .ben-grid, .eq-grid, .inscr-docs { grid-template-columns: 1fr !important; }
  .gal-grid { grid-template-columns: 1fr 1fr !important; }
  .gal-card.main { grid-row: span 1 !important; }
  .footer { padding: 26px 22px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
}


/* V10 - Logo 150px cliquable */


/* V10 - NOS VALEURS editorial */
.valeur-section { width: 100%; padding: 64px 0; }
.valeur-section.bg-creme { background: var(--creme); }
.valeur-section.bg-pale  { background: var(--vert-pale); }
.valeur-inner { max-width: 1080px; margin: 0 auto; padding: 0 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.valeur-inner.reverse { direction: rtl; }
.valeur-inner.reverse > * { direction: ltr; }
.valeur-photo-wrap { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(42,74,53,0.10); }
.valeur-photo-wrap img { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; background: #E8EDE8; }
.valeur-text-wrap h2 { font-size: 14px; font-weight: 800; letter-spacing: 2.5px; color: var(--vert-fonce); margin-bottom: 20px; text-transform: uppercase; font-family: 'Nunito',sans-serif; }
.valeur-text-wrap p { font-size: 14.5px; color: var(--texte-doux); line-height: 1.85; margin-bottom: 12px; font-family: 'Nunito',sans-serif; }
.valeur-text-wrap ul { list-style: none; padding: 0; margin: 0 0 12px; }
.valeur-text-wrap ul li { font-size: 14.5px; color: var(--texte-doux); padding-left: 20px; position: relative; line-height: 1.8; margin-bottom: 6px; font-family: 'Nunito',sans-serif; }
.valeur-text-wrap ul li::before { content: '•'; position: absolute; left: 0; color: var(--vert); top: -1px; font-size: 16px; }
.valeur-text-wrap .freinet-quote { font-style: italic; color: var(--vert-fonce); border-left: 3px solid var(--vert-clair); padding-left: 16px; margin-top: 8px; font-size: 13.5px; }
/* Citation Montessori bandeau */
.citation-mts { width: 100%; padding: 52px 0; background: var(--vert-fonce); position: relative; overflow: hidden; }
.citation-mts::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vert-mid), var(--ocre), var(--vert-mid)); }
.citation-mts::after  { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vert-mid), var(--ocre), var(--vert-mid)); }
.citation-mts-inner { max-width: 680px; margin: 0 auto; padding: 0 52px; text-align: center; position: relative; z-index: 1; }
.citation-mts-inner blockquote { font-size: 19px; color: #fff; font-style: italic; line-height: 1.82; font-weight: 400; font-family: 'Nunito',sans-serif; margin: 0; }
.citation-mts-inner cite { display: block; font-size: 13px; color: var(--vert-clair); margin-top: 16px; font-style: normal; font-weight: 700; letter-spacing: 0.5px; font-family: 'Nunito',sans-serif; }
/* ── Bordures témoignage home : identiques à .citation-mts (Nos valeurs) ── */
#section-temo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vert-mid), var(--ocre), var(--vert-mid)); }
#section-temo::after  { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vert-mid), var(--ocre), var(--vert-mid)); }

/* ── Headers pages secondaires version foncée (Nos valeurs, Agenda, Presse) ── */
.page-banner-dark {
  background: var(--vert-fonce) !important;
  position: relative;
  overflow: hidden;
}
.page-banner-dark::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vert-mid), var(--ocre), var(--vert-mid));
}
.page-banner-dark::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vert-mid), var(--ocre), var(--vert-mid));
}
.page-banner-dark h1 { color: #fff !important; }
.page-banner-dark p  { color: rgba(255,255,255,0.75) !important; }

/* ── Harmonisation H2 site : 22px / 900 (référence page Nous aider) ── */
#page-home h2:not(.hero-title):not([class*="hero"]) { font-size: 22px !important; font-weight: 900 !important; }
#page-asso h2:not(.section.bg-creme:last-of-type h2) { font-size: 22px !important; font-weight: 900 !important; }

/* ── Couleur H2 unifiée sur toutes les pages ── */
#page-home h2, #page-valeurs h2, #page-asso h2,
#page-aide h2, #page-presse h2, #page-agenda h2 { color: var(--vert-fonce) !important; }

/* ── Titres sur fond vert foncé : rester blancs ── */
.page-banner-dark h1, .page-banner-dark h2,
#section-temo h2, #section-temo h1,
.section.bg-fonce h2, .section.bg-fonce h1,
#page-asso .section.bg-fonce h2 { color: #fff !important; }

.valeur-cta-sec { width: 100%; padding: 56px 0; background: var(--vert-pale); text-align: center; }

/* V10 - PRESSE cards */
.presse-grid-v10 { max-width: 1080px; margin: 0 auto; padding: 52px 52px; display: flex; flex-direction: column; gap: 36px; }
.presse-card-v10 { background: var(--blanc); border-radius: 20px; overflow: hidden; border: 1.5px solid var(--bord-doux); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 8px rgba(42,74,53,0.08), 0 14px 28px -14px rgba(42,74,53,0.24); display: grid; grid-template-columns: 1fr 1fr; }
.presse-card-v10.rev { direction: rtl; }
.presse-card-v10.rev > * { direction: ltr; }
.presse-card-photo { overflow: hidden; }
.presse-card-photo img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform 0.3s; }
@media (hover: hover) and (pointer: fine) {
.presse-card-v10:hover .presse-card-photo img { transform: scale(1.03); }
}

.presse-card-body { padding: 36px 44px; display: flex; flex-direction: column; justify-content: center; }
.presse-card-logo-img { max-height: 56px; max-width: 200px; object-fit: contain; display: block; margin-bottom: 18px; }
.presse-card-title a { color: var(--vert-fonce); text-decoration: none; font-size: 17px; font-weight: 700; line-height: 1.55; font-family: 'Nunito',sans-serif; border-bottom: 2px solid var(--vert-clair); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; display: block; }
.presse-card-title a:hover { color: var(--vert); border-color: var(--vert); }



/* Responsive V10 */
@media(max-width: 900px) {
  
  .valeur-inner { grid-template-columns: 1fr !important; direction: ltr !important; gap: 22px; padding: 0 22px; }
  .valeur-section { padding: 44px 0; }
  .valeur-photo-wrap img { max-height: 260px; object-fit: cover; }
  .citation-mts { padding: 36px 0; }
  .citation-mts-inner { padding: 0 22px; }
  .citation-mts-inner blockquote { font-size: 16px; }
  .valeur-cta-sec { padding: 36px 22px; }
  .presse-grid-v10 { padding: 32px 22px; gap: 24px; }
  .presse-card-v10 { grid-template-columns: 1fr !important; direction: ltr !important; }
  .presse-card-photo img { height: 210px; }
  .presse-card-body { padding: 24px 20px; }
  .presse-card-title a { font-size: 15px; }
  
  
}


/* V11 header-logo */


@media(max-width:900px) {  }

/* V131 - logo header legerement reduit (desktop + mobile) */

@media(max-width:900px) {  }

/* V132 - reduction reelle du logo header : l'image utilise un style inline (#gh-logo-img), pas la classe .header-logo */
@media(max-width:900px) { #gh-logo-img { width: 78px !important; height: 78px !important; } }


/* V12 - alignement galerie et sections inline */
/* Exception : les divs full-width (essai-band, séparateur) gardent leur max-width propre */

.section .gal-grid, .section .gal-cta { padding-left: 52px; padding-right: 52px; }
@media(max-width:900px) {
  .section > h2[style], .section > p[style], .section > div[style], 
  .section .gal-grid, .section .gal-cta { padding-left: 22px; padding-right: 22px; }
}


/* Header global */



/* Équipe éditorial V13 */
.eq-card { padding: 0 !important; overflow: hidden; }
.eq-card .eq-avatar {
  width: 100% !important; height: 280px !important;
  border-radius: 0 !important; margin: 0 !important;
  border: none !important;
}
.eq-card .eq-avatar img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 0 !important;
}

.eq-card .eq-name { margin-top: 0; }
@media(max-width:900px) {
  .eq-card .eq-avatar { height: 240px !important; }
}


/* ═══ V13 POLISH ═══ */

/* Header : CTA flex-shrink, nav wrap propre */
#global-header nav { min-width: 0; }
#global-header button { flex-shrink: 0; }

/* Header : onglet actif */
#global-header a.nav-active {
  background: var(--vert-pale) !important;
  color: var(--vert-fonce) !important;
}

/* Équipe : carte éditoriale */
.eq-card { padding: 0 !important; overflow: hidden; border-radius: 16px; }
.eq-card .eq-avatar {
  width: 100% !important;
  height: 280px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: block;
  overflow: hidden;
}
.eq-card .eq-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 15% !important;
  border-radius: 0 !important;
  display: block;
}
.eq-card .eq-avatar {
  box-shadow: inset 0 -3px 6px -3px rgba(42,74,53,0.20);
}
.eq-card-body { padding: 22px 20px 24px; }

/* Valeurs : photos harmonisées */
.valeur-photo-wrap img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  background: #EDEAE4;
}
.valeur-photo-wrap {
  border-radius: 12px;
  overflow: hidden;
}

/* Galerie : alignment */
.section > .gal-grid { padding-left: 52px; padding-right: 52px; }


/* Bloc essai */


/* Mobile */
@media (max-width: 900px) {
  .eq-card .eq-avatar { height: 240px !important; }
  .section > .gal-grid, .section > .gal-cta { padding-left: 22px; padding-right: 22px; }
}


/* Galerie lightbox */
#gal-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
#gal-lightbox.open { display: flex; }
#gal-lightbox img {
  max-width: min(90vw, 900px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5);
  animation: galFadeIn 0.18s ease;
}
@keyframes galFadeIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
#gal-lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 100000;
}
#gal-lightbox-close:hover { background: rgba(255,255,255,0.3); }


/* V14 - Galerie hover + photos arrondies */
.gal-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.gal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(42,74,53,0.12);
}
}

.hero-right-photo {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(42,74,53,0.14);
}
.hero-right-photo img {
  border-radius: 20px;
}


/* ─── V8 corrections ─────────────────────────────── */

/* 1+2. Hero : marge droite + comportement fluide au zoom */
.hero-right {
  overflow: hidden;
  padding: 28px 52px 28px 20px;   /* respiration droite symétrique */
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}
.hero-right-photo {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 28px rgba(42,74,53,0.14) !important;
  flex: 1;                         /* fluide, suit la colonne */
  min-height: 0;
  background: var(--vert-pale);
}
.hero-right-photo img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  display: block !important;
  border-radius: 16px !important;
}

/* 3. Pédagogie : photo étirée sur toute la hauteur du texte */
.section-peda { align-items: stretch; }

.peda-img{border-radius:20px;overflow:hidden;box-shadow:0 6px 24px rgba(42,74,53,0.12);align-self:start}
.peda-img img{width:100%;height:650px;object-fit:cover;object-position:center 40%;display:block}
@media(max-width:900px){.peda-img img{height:420px}}
@media(max-width:600px){.peda-img img{height:280px}}

/* ─── fin V9c ─────────────────────────────────── */


/* ═══ PAGE NOUS AIDER - SIMPLE ═══ */

/* Hero sobre */






/* Section bénéfices : texte + photo */
.aide-s-benefices{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.aide-s-ben-list{list-style:none;padding:0;margin:20px 0 0}
.aide-s-ben-list li{padding:14px 0 14px 22px;position:relative;border-bottom:1px solid var(--vert-clair);font-size:15px;color:var(--texte-doux);line-height:1.68}
.aide-s-ben-list li:last-child{border-bottom:none}
.aide-s-ben-list li::before{content:'✦';position:absolute;left:0;top:16px;color:var(--vert-mid);font-size:10px}
.aide-s-ben-list strong{display:block;color:var(--vert-fonce);font-weight:800;margin-bottom:3px;font-size:15px}



/* 3 blocs contribuer */
.aide-s-blocs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.aide-s-bloc{background:var(--blanc);border-radius:18px;padding:24px 22px;border:1.5px solid var(--vert-clair);box-shadow:0 2px 10px rgba(42,74,53,0.07);display:flex;flex-direction:column}




.aide-s-bloc h3{font-size:16px;color:var(--vert-fonce);font-weight:800;margin-bottom:10px}
.aide-s-bloc p{font-size:15px;color:var(--texte-doux);line-height:1.70;margin-bottom:12px;flex-shrink:0}
.aide-s-bloc .btn{margin-top:auto;margin-bottom:0;padding-top:16px;align-self:center}
.aide-s-bloc .btn.btn-sm{padding:9px 20px !important;display:inline-flex;align-items:center;justify-content:center;gap:7px}

/* Encadré sobre */





/* CTA final */
.aide-s-cta-wrap{padding:60px}
.aide-s-cta-card{background:var(--blanc);border-radius:22px;padding:44px 52px 40px;max-width:680px;margin:0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(42,74,53,0.12), 0 20px 40px -18px rgba(42,74,53,0.32);text-align:center;border:2.25px solid var(--vert-clair)}
.aide-s-cta-card h2{color:var(--vert-fonce);font-size:22px;font-weight:900;margin-bottom:14px}
.aide-s-cta-card > p{color:var(--texte-doux);font-size:15px;line-height:1.74;max-width:520px;margin:0 auto 26px}
.aide-s-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:0}
.aide-s-tax-note{max-width:540px;margin:24px auto 0;padding-top:20px;border-top:1px solid var(--vert-clair);color:var(--texte-doux);font-size:13px;line-height:1.65}
.aide-s-tax-note p{margin:0}
.aide-s-tax-note strong{color:var(--vert-fonce);font-weight:900}
.aide-s-tax-example{margin-top:7px!important;font-style:italic;color:var(--texte-muted)}
@media(max-width:600px){
  .aide-s-tax-note{margin-top:22px;padding-top:18px;font-size:12.5px;line-height:1.62}
}


/* Photo chantier dans la section contribuer (optionnelle) */



/* Responsive */
@media(max-width:1000px){
  
  .aide-s-benefices{grid-template-columns:1fr!important;gap:28px!important}
  .aide-s-blocs{grid-template-columns:1fr!important;gap:14px}
  
  .aide-s-cta-wrap{padding:40px 22px!important}
  .aide-s-cta-card{padding:36px 22px!important}
}
@media(max-width:600px){
  
  .aide-s-cta-card h2{font-size:22px}
}

/* Bouton secondaire doux - vert pâle */
.btn-aide-soft{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;line-height:1;padding:10px 20px;border-radius:50px;cursor:pointer;transition:background 0.18s,box-shadow 0.18s,transform 0.15s;text-decoration:none;white-space:nowrap;background:var(--vert-pale);color:var(--vert-fonce);border:2px solid var(--vert-mid);box-shadow:0 2px 7px rgba(42,74,53,0.14)}




/* Photo section Notre approche - hauteur maîtrisée */
.home-peda-photo{width:100%;height:580px;object-fit:cover;object-position:center 35%;display:block}
@media(max-width:900px){.home-peda-photo{height:420px}}
@media(max-width:600px){.home-peda-photo{height:280px}}

/* ── Page Association : resserrement des espacements ── */
#page-asso .section { padding: 44px 0; }
#page-asso .section-head { margin-bottom: 32px; }

/* Bloc intro après hero : carte légère */


/* Section intro : réduire le padding encore */
#page-asso .section-intro { padding: 32px 0 28px; }

/* Section foncée : padding un peu moins généreux */
#page-asso .bg-fonce { padding: 52px 0; }

/* "Le sens du projet" */
#page-asso .asso-project-section-v2429 { padding: 44px 0; }

/* CTA final */
#page-asso .section.bg-creme:last-of-type { padding: 44px 0; }

/* Section gouvernance et s'impliquer */
#page-asso .bg-lin { padding: 44px 0; }

/* Hero : réduire espace sous la photo */


@media(max-width:700px) {
  #page-asso .section { padding: 32px 0; }
  
}

/* ── Asso finition haut de page ── */
#page-asso .section-intro { padding: 20px 0 32px; }

@media(max-width:700px){
  #page-asso .section-intro { padding: 16px 0 24px; }
}

/* ── Page Asso : titres renforcés ── */
#page-asso h1 { font-weight: 800; }


/* ── Cartes gouvernance ── */
.asso-card-gov {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
.asso-card-gov:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(42,74,53,0.13);
  border-color: var(--vert-mid);
}
}


/* ── Cartes commissions (fonds colorés) ── */
.asso-card-comm {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
.asso-card-comm:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(42,74,53,0.12);
}
}


/* ── Cartes territoire (fond foncé) ── */
.asso-card-terr {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
.asso-card-terr:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.11) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
}


@media(max-width:700px){
  .asso-card-gov:hover,
  .asso-card-comm:hover,
  .asso-card-terr:hover { transform: none; }
}

/* ── Asso finition finale ── */

/* Hero titre h1 : font-weight déjà en inline à 900, on s'assure via CSS aussi */
#page-asso h1 { font-weight: 900; }

/* Titres de section h2 : 800 */
#page-asso h2 { font-weight: 800; }

/* CTA final : h2 aligné sur référence Nos valeurs */
#page-asso .section.bg-creme:last-of-type h2 { font-size: 17px !important; font-weight: 900 !important; }

/* CTA final : réduire padding */
#page-asso .section.bg-creme:last-of-type { padding: 36px 0 32px; }

/* ── Home : titres renforcés ── */
#page-home h2 { font-weight: 800; }

/* ── Page Nous aider : titres renforcés ── */
#page-aide h1 { font-weight: 800; }
#page-aide h2 { font-weight: 900; }

/* ── Page Nos valeurs : titres renforcés ── */
#page-valeurs h2 { font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════
   HERO HOME - RECONSTRUCTION PROPRE (calqué sur .valeur-inner)
   Neutralise toutes les anciennes règles parasites du hero.
   Logique : bloc 2 colonnes, image width:100% height:auto (ratio conservé).
   ═══════════════════════════════════════════════════════════════ */

/* Fond pleine largeur - bandes latérales supprimées */
#page-home .hero {
  width: 100% !important;
  background: var(--creme) !important;
  padding: 56px 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
  box-sizing: border-box !important;
}
/* Grille 2 colonnes centrée à 1180px */
#page-home .hero-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 52px !important;
  box-sizing: border-box !important;
}
#page-home .hero::after { display: none !important; }

/* Colonne texte */
#page-home .hero-left {
  padding: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
}

/* Colonne photo */
#page-home .hero-right {
  padding: 0 !important;
  min-height: 0 !important;
  border-left: none !important;
  overflow: visible !important;
  display: block !important;
  position: static !important;
}

/* Wrapper image */
#page-home .hero-right-photo {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 28px rgba(42,74,53,0.14) !important;
  display: block !important;
  flex: none !important;
}

/* IMAGE - logique Nos valeurs : ratio conservé, réduction proportionnelle */
#page-home .hero-right-photo img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  display: block !important;
  border-radius: 20px !important;
}

/* Responsive : passage 1 colonne quand l'espace devient insuffisant */
@media (max-width: 900px) {
  #page-home .hero { padding: 40px 0 !important; }
  #page-home .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 22px !important;
  }
  #page-home .hero-right-photo img { max-height: 420px !important; }
}

/* ═══ DIRECTION ARTISTIQUE - ÉTAPE 1 : texture papier quasi-invisible ═══ */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("../images/texture-papier.svg");
  background-repeat: repeat;
  mix-blend-mode: multiply;
}
/* Le header et les éléments interactifs restent au-dessus de la texture */
#global-header { z-index: 9999; }

/* ═══ DA1b : fond pleine largeur pour section-peda (Home) ═══ */
/* La section Contact n’utilise plus cet ancien système pleine largeur. */
#page-home .section.section-peda {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-left: max(52px, calc((100% - 1100px) / 2)) !important;
  padding-right: max(52px, calc((100% - 1100px) / 2)) !important;
  padding-top: 68px !important;
  padding-bottom: 68px !important;
}
@media (max-width: 900px) {
  #page-home .section.section-peda {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ═══ DA2 : harmonisation graphique des photos (radius + ombre douce + fine bordure) ═══ */
/* Radius commun 18px et ombre naturelle douce. Aucune modif de dimension/ratio. */

/* Photo hero Home */
#page-home .hero-right-photo,
#page-home .hero-right-photo img {
  border-radius: 18px !important;
}
#page-home .hero-right-photo {
  box-shadow: 0 8px 30px rgba(42,74,53,0.13) !important;
  border: 3px solid var(--vert-fonce) !important;
}

/* Photo Notre approche */
#page-home .peda-img,
#page-home .peda-img img {
  border-radius: 18px !important;
}
#page-home .peda-img {
  box-shadow: 0 8px 30px rgba(42,74,53,0.13) !important;
  border: 3px solid var(--vert-fonce) !important;
}

/* Cartes galerie (photos) */
#page-home .gal-card {
  border-radius: 18px !important;
  border: 2.25px solid var(--bord-doux) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 10px rgba(42,74,53,0.14),
    0 18px 34px -16px rgba(42,74,53,0.34) !important;
}

/* ═══ DA2 - TEST légendes photos discrètes (2 photos uniquement) ═══ */
#page-home .hero-right-photo,
#page-home .peda-img { position: relative; }
.photo-legend {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 18px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  background: linear-gradient(transparent, rgba(20,35,25,0.45));
  border-radius: 0 0 18px 18px;
  pointer-events: none;
  z-index: 2;
}

/* ═══ DA2b : harmonisation photos autres pages (radius 18px + ombre douce + bordure crème) ═══ */

/* Nos valeurs */
#page-valeurs .valeur-photo-wrap {
  border-radius: 18px !important;
  box-shadow: 0 8px 30px rgba(42,74,53,0.13) !important;
  border: 3px solid var(--blanc) !important;
}
#page-valeurs .valeur-photo-wrap img { border-radius: 15px !important; }

/* Nous aider */


/* Presse : uniquement les vraies photos (pas les logos médias), radius + ombre douce, SANS bordure crème */
#page-presse .presse-card-photo {
  border-radius: 18px !important;
  overflow: hidden !important;
}
#page-presse .presse-card-photo img { border-radius: 18px !important; }

/* ═══ DA4 : CARTES FICHE CAHIER - esprit carnet pedagogique ═══ */
/* Direction "fiche de cahier d ecole" inspiree du flyer : papier chaud, micro-lignage discret, */
/* onglet de fiche, filet pointille leger sous les titres, ombre "fiche posee sur table". */
/* Regle d or : si l effet se remarque avant le contenu, c est trop fort. Tout reste subtil. */

/* ── HOME / FAMILLE 2 : 6 cartes benefices = PAGE DE CAHIER ── */
/* Marge verticale rouge a gauche + lignes de cahier + silhouette feuille. Pas de punaise. */
#page-home .ben-card {
  background:
    /* lignes de cahier horizontales, assumees mais lisibles */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 25px,
      rgba(90,138,106,0.10) 25px,
      rgba(90,138,106,0.10) 26px
    ),
    var(--papier) !important;
  border: 1.5px solid var(--bord-doux) !important;
  border-left: none !important;
  border-bottom: 2.5px solid var(--bord-doux) !important;
  border-radius: 3px 11px 12px 3px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 12px 28px -11px rgba(42,74,53,0.30),
    0 4px 9px rgba(42,74,53,0.11) !important;
  position: relative !important;
  overflow: visible !important;
  padding-top: 30px !important;
  padding-left: 30px !important;
}
/* Marge verticale rouge / terre cuite douce de la page de cahier (a gauche) */
#page-home .ben-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 16px;
  width: 2px;
  background: rgba(184,92,56,0.38);
  pointer-events: none;
}
/* Petit onglet de fiche en haut (conserve, court, couleur thematique douce) */
#page-home .ben-card::before {
  content: '';
  position: absolute;
  top: -5px; left: 30px;
  width: 36px; height: 11px;
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
  box-shadow: 0 -1px 2px rgba(42,74,53,0.08);
  z-index: 1;
}
#page-home .ben-card.c1::before, #page-home .ben-card.c4::before { background: var(--vert-mid); }
#page-home .ben-card.c2::before, #page-home .ben-card.c6::before { background: var(--terra); }
#page-home .ben-card.c3::before { background: var(--ocre); }
#page-home .ben-card.c5::before { background: #6A9A5A; }

/* Soulignement pointille leger sous le titre (trait de cahier) */
#page-home .ben-card h3 {
  position: relative;
  padding-bottom: 9px;
}
#page-home .ben-card h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 2px;
  background-image: radial-gradient(circle, var(--vert-sauge) 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  opacity: 0.7;
}
#page-home .ben-card.c2 h3::after { background-image: radial-gradient(circle, var(--terra) 1px, transparent 1px); }
#page-home .ben-card.c3 h3::after { background-image: radial-gradient(circle, var(--ocre) 1px, transparent 1px); }

@media (hover: hover) and (pointer: fine) {
/* Hover : la feuille se souleve doucement */
#page-home .ben-card:hover {
  transform: translateY(-3px) rotate(-0.15deg) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 18px 32px -11px rgba(42,74,53,0.28),
    0 4px 10px rgba(42,74,53,0.10) !important;
  border-color: var(--vert-clair) !important;
}
}

/* Etiquette de theme : coin scolaire organique */

/* Pastilles d icones rondes et chaleureuses, non "app" */

/* Marge verticale rouge / terre cuite de la page de cahier (a gauche, plus presente que les benefices) */

/* Onglet court en haut, couleur thematique douce (vert / ocre) */


/* ── ASSOCIATION : version institutionnelle rechauffee (allegee pour ce lot)
   V42 : bordures legerement epaissies (desktop / tablette large).
   V43 : relief renforce (ombres en couches + bordures affirmees) en
   desktop / tablette large, sans toucher aux couleurs ni au mobile. ── */
#page-asso .asso-card-gov {
  background: var(--papier) !important;
  border: 1.75px solid var(--bord-doux) !important;
  border-radius: 12px 12px 14px 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 3px 8px rgba(42,74,53,0.10),
    0 16px 30px -16px rgba(42,74,53,0.32) !important;
  position: relative !important;
  overflow: hidden !important;
}
#page-asso .asso-card-gov::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; background: var(--vert-mid); opacity: 0.65;
}
#page-asso .asso-card-comm {
  border: 1.75px solid var(--bord-doux) !important;
  border-radius: 12px 12px 14px 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 3px 8px rgba(42,74,53,0.08),
    0 14px 26px -16px rgba(42,74,53,0.24) !important;
  padding: 26px 22px !important;
}
#page-asso .asso-card-comm h3 { font-size: 16px !important; }
#page-asso .asso-card-comm p  { font-size: 13.5px !important; }
#page-asso .asso-card-comm > div > div:first-child { width: 40px !important; height: 40px !important; }
#page-asso .asso-card-comm > div > div:first-child .ti { font-size: 18px !important; }
#page-asso .asso-card-terr {
  border-width: 1.75px !important;
  border-radius: 14px 14px 16px 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 32px -16px rgba(0,0,0,0.45) !important;
  padding: 26px 22px !important;
}
#page-asso .asso-card-terr h3 { font-size: 16px !important; }
#page-asso .asso-card-terr p  { font-size: 13.5px !important; }

/* ── NOUS AIDER : 3 cartes (relief renforce, meme esprit que Gouvernance Association) ── */
#page-aide .aide-s-bloc {
  background: var(--papier) !important;
  border: 1.75px solid var(--bord-doux) !important;
  border-radius: 12px 12px 14px 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 3px 8px rgba(42,74,53,0.10),
    0 16px 30px -16px rgba(42,74,53,0.32) !important;
  position: relative !important;
  overflow: hidden !important;
}
#page-aide .aide-s-bloc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; opacity: 0.85;
}
#page-aide .aide-s-bloc.b1::before { background: var(--ocre); }
#page-aide .aide-s-bloc.b2::before { background: var(--vert-mid); }
#page-aide .aide-s-bloc.b3::before { background: var(--terra); }


/* ═══════════════════════════════════════════════════════════
   V33 - PASSE RESPONSIVE GLOBALE MOBILE / TABLETTE
   Aucun impact desktop (tout sous breakpoints).
   ═══════════════════════════════════════════════════════════ */

/* --- Garde anti-débordement horizontal global --- */
html, body { max-width: 100%; overflow-x: hidden; }

/* ============ HEADER MOBILE (burger) - sous 760px ============ */
@media (max-width: 760px) {

  /* Row 1 : logo à gauche, burger à droite */
  #gh-row1 {
    justify-content: flex-start !important;
    padding: 10px 18px !important;
  }
  

  #gh-logo-img {
    width: 56px !important;
    height: 56px !important;
  }

  /* V34 : socials visibles dans la barre, entre logo et burger, format compact, couleurs de marque (cf page Contact) */
  /* V36 : icones regroupees dans la zone droite, accolees au burger (position absolue ancree a droite, n'affecte pas logo/burger) */
  #gh-socials {
    display: flex !important;
    position: absolute !important;
    left: auto !important;
    right: 56px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 9px !important;
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  #gh-socials a { font-size: 19px !important; }
  #gh-socials a:nth-child(1) { color: #E1306C !important; }
  #gh-socials a:nth-child(2) { color: #1877F2 !important; }
  #gh-socials a:nth-child(3) { color: #0A66C2 !important; }

  /* Burger visible */
  #gh-burger { display: block !important; }

  /* Row 2 = drawer déroulant, masqué par défaut */
  #gh-row2 {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 18px 16px !important;
    gap: 4px !important;
    border-top: 1px solid var(--lin);
    background: var(--blanc);
  }
  #global-header.gh-open #gh-row2 { display: flex !important; }

  /* Nav verticale */
  #gh-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    flex: none !important;
  }
  #gh-nav a {
    display: block !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  /* CTA pleine largeur dans le menu */
  #gh-cta {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    justify-content: center;
  }

  /* Réseaux sociaux intégrés en bas du menu */
  #gh-row2::after {
    content: "";
  }
  
  

  /* Spacer réduit : header bien plus compact en mobile */
  #header-spacer { height: 86px !important; }
}

/* Au-dessus de 760px : pas de réseaux mobiles, pas de burger */
@media (min-width: 761px) {
  
}

/* ============ ASSOCIATION - grilles 1 colonne sous 900px (1 colonne dès la tablette 768px) ============ */
@media (max-width: 900px) {
  .asso-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }
  .asso-grid > * { min-width: 0; }
}

/* ============ NOUS AIDER - titre qui déborde ============ */
@media (max-width: 760px) {
  .aide-hero-title {
    font-size: 21px !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

/* ============ HOME - titres parfois trop massifs ============ */
@media (max-width: 600px) {
  h1 { font-size: 28px !important; line-height: 1.25 !important; }
  .hero h1 { font-size: 27px !important; }
}

/* ============ Galerie Home un peu serrée en 2 col ============ */
@media (max-width: 560px) {
  .gal-grid { grid-template-columns: 1fr !important; }
}

/* ============ Sécurité conteneurs : pas de débordement ============ */
@media (max-width: 760px) {
  .section, .page { max-width: 100% !important; box-sizing: border-box; }
  img { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   V34 — FINITIONS MOBILE : Association + Nous aider
   Passe chirurgicale, harmonisation des marges (22px, cf Home / Nos valeurs).
   ═══════════════════════════════════════════════════════════ */

/* ── Association : marges latérales harmonisées sur les titres de section ── */
@media (max-width: 900px) {
  #page-asso .section-head,
  #page-asso .asso-project-section-v2429,
  #page-asso .section.bg-creme:last-of-type {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }
}

/* ── Association : haut de page, le titre ne doit plus être mangé par le header ── */
@media (max-width: 760px) {
  
}

/* ── Home / Nos valeurs / Presse : même respiration sous le header qu'Association, en mobile ── */
@media (max-width: 760px) {
  .page-banner {
    padding-top: 76px !important;
  }
}

/* ── Association : photo du hero agrandie, marges alignées sur Home / Nos valeurs ── */
@media (max-width: 760px) {
  
  
}

/* ── Association : encadré vert sous le hero, plus de respiration interne (V39) ── */
@media (max-width: 760px) {
  
}

/* ── Association : encadré vert décollé des bords de l'écran (V40) ── */
@media (max-width: 900px) {
  
}

/* ── Association : CTA final, micro-ajustement pour éviter un retour à la ligne disgracieux dans les boutons sur très petits écrans ── */
@media (max-width: 480px) {
  #page-asso .section.bg-creme:last-of-type .btn {
    font-size: 13.5px;
    padding: 12px 18px;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }
}

/* V135 - mobile : les 4 boutons CTA (Échanger / téléchargements / journée d'essai) restent sur une seule ligne */
@media (max-width: 480px) {
  .eq-cta .btn,
  .cta-wrap-narrow .btn {
    font-size: 12px !important;
    padding: 9px 14px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
}

/* ── Nous aider : haut de page, respiration sous le header ── */
@media (max-width: 760px) {
  
}

/* ── Nous aider : bloc "Impact concret" — correction du débordement / collage au bord ── */
@media (max-width: 760px) {
  #page-aide .aide-benefices-wrap {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }
  
}

/* ── Nous aider : bloc "Trois façons de soutenir" — même harmonisation de marges ── */
@media (max-width: 760px) {
  #page-aide .aide-trois-wrap {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }
  
}

/* ── Nous aider : titre du hero un peu plus gras, aligné sur Association / Nos valeurs ── */
@media (max-width: 760px) {
  
}

/* ── Nous aider : photo "chantier" — l'image doit remplir tout le cadre arrondi, y compris en bas ── */
@media (max-width: 760px) {
  
  
}

/* ── Nous aider : encadré "Nous construisons les besoins" — marge extérieure pour ne plus toucher les bords ── */
@media (max-width: 760px) {
  
}

/* ═══════════════════════════════════════════════════════════
   V38 — ASSOCIATION MOBILE : relief des cartes
   (Gouvernance, S'impliquer, Au-delà de l'école).
   Scope strict #page-asso, sous 900px uniquement.
   Aucun impact desktop, aucun impact autres pages.
   ═══════════════════════════════════════════════════════════ */

/* ── Cartes Gouvernance : plus de relief, sensation de fiche posée ── */
@media (max-width: 900px) {
  #page-asso .asso-card-gov {
    border-color: var(--vert-clair) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      0 2px 6px rgba(42,74,53,0.10),
      0 14px 26px -12px rgba(42,74,53,0.32) !important;
  }
  #page-asso .asso-card-gov::before {
    width: 4px !important;
    opacity: 0.85 !important;
  }
}

/* ── Cartes S'impliquer (commissions) : effet fiche mission, relief doux ── */
@media (max-width: 900px) {
  #page-asso .asso-card-comm {
    border-width: 1.5px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 2px 6px rgba(42,74,53,0.08),
      0 12px 22px -12px rgba(42,74,53,0.26) !important;
  }
}

/* ── Cartes "Au-delà de l'école" (fond vert foncé) : contraste et profondeur renforcés ── */
@media (max-width: 900px) {
  #page-asso .asso-card-terr {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 14px 28px -14px rgba(0,0,0,0.55) !important;
  }
}

/* ── V41 : bordures des cartes légèrement épaissies, plus de présence (fiche posée) ── */
@media (max-width: 900px) {
  #page-asso .asso-card-gov  { border-width: 1.75px !important; }
  #page-asso .asso-card-comm { border-width: 2px !important; }
  #page-asso .asso-card-terr { border-width: 1.75px !important; }
}

/* ── Photo hero asso : pleine largeur sur mobile / tablette ── */
@media (max-width: 1000px) {
  #asso-hero-photo-wrap { padding: 24px 18px 0 !important; }
  #asso-hero-photo-wrap > div { max-width: 100% !important; padding: 0 !important; border-radius: 16px !important; overflow: hidden !important; }
  #asso-hero-photo-wrap img { border-radius: 16px !important; box-shadow: 0 4px 16px rgba(42,74,53,0.12) !important; border: 3px solid var(--vert-fonce) !important; }
}

/* ═══ PAGE AGENDA ═══ */
.agenda-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,400px));justify-content:center;gap:24px;margin-top:28px}
.agenda-card{background:var(--papier);border:2px solid var(--bord-doux);border-radius:16px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 4px 10px rgba(42,74,53,0.10),0 16px 32px -14px rgba(42,74,53,0.28)}
.agenda-card.passe{opacity:0.82;box-shadow:0 2px 6px rgba(42,74,53,0.06)}
.agenda-card-photo{position:relative;height:260px;background:var(--vert-pale)}
.agenda-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.agenda-card-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--vert-pale),var(--vert-clair))}
.agenda-card-ph .ti{font-size:40px;color:rgba(255,255,255,0.6)}
.agenda-card-date{position:absolute;top:14px;left:14px;background:var(--papier);border-radius:12px;padding:8px 14px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.16)}
.agenda-card-date-d{display:block;font-size:24px;font-weight:800;color:var(--terra);line-height:1}
.agenda-card-date-m{display:block;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--texte-doux);letter-spacing:0.5px;margin-top:2px}

.agenda-card-body{padding:22px 24px 26px}
.agenda-card-body h3{font-size:19px;font-weight:800;color:var(--vert-fonce);margin:0 0 10px}
.agenda-card-body p{font-size:14.5px;color:var(--texte-doux);line-height:1.7;margin:0}
.agenda-empty{grid-column:1/-1;text-align:center;padding:8px 20px 20px;color:var(--texte-muted)}
.agenda-empty .ti{font-size:32px;color:var(--vert-clair);margin-bottom:10px;display:block}
.agenda-empty p{font-size:14px;line-height:1.6;max-width:420px;margin:0 auto}
@media (max-width: 900px) {
  .agenda-grid{
    grid-template-columns: 1fr;
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box;
  }
  .agenda-card-photo{ height: 180px; }
  .agenda-card{
    border-width: 2px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 4px 10px rgba(42,74,53,0.10),
      0 16px 32px -14px rgba(42,74,53,0.28);
  }
}

/* ── Carrousel horizontal "Passés" : 3 cartes visibles desktop, défilement + flèches, swipe mobile ── */
.agenda-scroll-wrap{position:relative;margin-top:28px;padding:0 66px}
.agenda-scroll{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.agenda-scroll::-webkit-scrollbar{display:none;height:0}
.agenda-scroll .agenda-card{
  flex:0 0 calc((100% - 44px)/3);
  scroll-snap-align:start;
  min-width:260px;
}
.agenda-scroll .agenda-empty{flex:1 0 100%}
.agenda-arrow{
  position:absolute;
  top:130px;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:50%;
  background:var(--vert-fonce);
  border:none;
  box-shadow:0 4px 14px rgba(42,74,53,0.30);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:5;
  font-size:20px;
  font-weight:700;
  color:#fff;
  transition:background 0.2s, transform 0.15s;
}
.agenda-arrow:hover{background:var(--vert);transform:translateY(-50%) scale(1.06)}
.agenda-arrow:active{transform:translateY(-50%) scale(0.92)}
.agenda-arrow.agenda-arrow-left{left:8px}
.agenda-arrow.agenda-arrow-right{right:8px}
.agenda-arrow[disabled]{opacity:0.35;cursor:default;pointer-events:none}
@media (max-width: 1200px) {
  .agenda-scroll-wrap{ padding:0 52px; }
  .agenda-scroll .agenda-card{ flex:0 0 calc((100% - 22px)/2); }
}
@media (max-width: 900px) {
  .agenda-scroll-wrap{
    padding: 0 22px;
  }
  .agenda-scroll{
    gap:18px;
  }
  .agenda-scroll .agenda-card{
    flex:0 0 88%;
    min-width:0;
  }
  .agenda-arrow{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   V101 — HARMONISATION DESIGN PREMIUM
   Passe transversale, purement additive.
   Règle d'or : les éléments déjà validés (cartes cahier Home,
   cartes Association, portraits équipe, cartes Nous aider,
   popup formulaire) servent de RÉFÉRENCE et ne sont pas écrasés.
   Aucun texte / lien / JS / photo modifié.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. SYSTÈME D'OMBRES UNIFIÉ (couches chaudes vertes) ── */
:root{
  --ombre-posee: 0 2px 8px rgba(42,74,53,0.07);
  --ombre-carte:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 3px 8px rgba(42,74,53,0.09),
    0 14px 28px -14px rgba(42,74,53,0.26);
  --ombre-forte:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 5px 12px rgba(42,74,53,0.12),
    0 22px 44px -18px rgba(42,74,53,0.30);
  --ombre-hover:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 8px 16px rgba(42,74,53,0.12),
    0 26px 48px -18px rgba(42,74,53,0.30);
  /* Contraste texte muted légèrement relevé (chaud) */
  --texte-muted: #7d766b;
}

/* Remplacement des dernières ombres noires froides résiduelles
   par des équivalents chauds, à intensité perçue égale. */
.agenda-card-date{ box-shadow: 0 2px 10px rgba(42,74,53,0.18) !important; }
.modal{ box-shadow: 0 20px 60px rgba(30,55,40,0.24) !important; } /* même profondeur, teinte chaude — structure popup intacte */

/* Élévation harmonisée des éléments encore "plats" (hors familles validées) */

@media (hover: hover) and (pointer: fine) {

}

.form-box{ box-shadow: var(--ombre-carte); }

.reassurance-box{ box-shadow: var(--ombre-posee); }


/* ── 2. ÉCHELLE DE RADIUS (12 / 18 / 24 / 50) ──
   Normalisation douce des valeurs orphelines (16, 20, 22) vers 18px.
   Les radius asymétriques signature (12px 12px 14px 4px, 18px 4px…)
   et le modal (24px, validé) sont conservés tels quels. */
.doc-card, .essai-band, .form-box,
.reassurance-box, .aide-s-photo, .gal-card,
.peda-img, .aide-s-photo-contrib{ border-radius: 18px; }
.eq-card{ border-radius: 18px !important; }

/* ── 3. BOUTONS PREMIUM ──
   Hover chaud unifié + focus visible. Aucun texte, onclick,
   ni logique CTA/popup modifiés. */
.btn{ transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(42,74,53,0.14), 0 10px 22px -8px rgba(42,74,53,0.28) !important;
}
.btn:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(42,74,53,0.14) !important; }
.btn-outline:hover{ background: var(--vert-clair); }


.btn:focus-visible,
.nav-cta:focus-visible,
.form-submit:focus-visible,
.btn-aide-soft:focus-visible,
.modal-close:focus-visible{
  outline: 3px solid rgba(90,138,106,0.5);
  outline-offset: 2px;
}
.form-submit:hover{
  box-shadow: 0 4px 10px rgba(42,74,53,0.16), 0 10px 22px -8px rgba(42,74,53,0.28);
}



/* ── Bouton Visiter l'école : hover avec relief ── */
#gh-cta { transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important; }
#gh-cta:hover {
  background: var(--vert-fonce) !important;
  box-shadow: 0 6px 18px rgba(42,74,53,0.30), 0 2px 6px rgba(42,74,53,0.18) !important;
  transform: translateY(-2px) !important;
}

/* ── 4. AGENDA — remise à niveau (page la plus faible) ── */

/* État vide "À venir" : encadré papier posé, liseré pointillé,
   icône dans une pastille, relief doux. Texte JS inchangé. */
.agenda-empty{
  grid-column: 1/-1;
  max-width: 520px;
  margin: 0 auto;
  background: var(--papier);
  border: 2px dashed var(--vert-clair);
  border-radius: 18px;
  padding: 40px 32px 36px;
  color: var(--texte-doux);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 3px 8px rgba(42,74,53,0.08),
    0 16px 30px -16px rgba(42,74,53,0.22);
  position: relative;
}
.agenda-empty .ti{
  width: 60px; height: 60px;
  line-height: 60px;
  font-size: 28px !important;
  color: var(--vert-mid) !important;
  background: var(--vert-pale);
  border: 1.5px solid var(--vert-clair);
  border-radius: 50%;
  margin: 0 auto 16px;
  display: block !important;
  text-align: center;
  box-shadow: 0 2px 6px rgba(42,74,53,0.10);
}
.agenda-empty p{
  font-size: 14.5px !important;
  color: var(--texte-doux) !important;
  line-height: 1.72 !important;
}

/* Cartes événement : alignées sur le standard de relief Association
   (papier + radius asymétrique signature + ombres en couches). */
.agenda-card{
  border: 1.75px solid var(--bord-doux) !important;
  border-radius: 12px 12px 14px 4px !important;
  box-shadow: var(--ombre-carte) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.agenda-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--ombre-hover) !important;
}
}

.agenda-card.passe{
  opacity: 1;
  filter: saturate(0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 3px 8px rgba(42,74,53,0.08),
    0 14px 26px -16px rgba(42,74,53,0.22) !important;
}
.agenda-card-date{ border: 1.5px solid var(--bord-doux); }

/* Rythme vertical de la page : sections mieux calées, sans étirer */
#page-agenda .section{ padding: 52px 0 60px; }
#page-agenda .section-head{ margin-bottom: 30px; }

/* ── 5. PRESSE — effet coupure posée + écrin logos ── */
.presse-card-v10{
  border: 1.75px solid var(--bord-doux) !important;
  border-radius: 18px !important;
  box-shadow: var(--ombre-carte) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.presse-card-v10:hover{
  transform: translateY(-3px);
  box-shadow: var(--ombre-hover) !important;
}
}

/* Écrin discret pour les logos médias du hero */


/* ── 6. RESPIRATION & RYTHME (corrections ciblées) ── */
#page-presse .presse-grid-v10{ padding-top: 44px; padding-bottom: 56px; }
.faq-item{ transition: background 0.15s ease; }
.faq-q:hover span{ color: var(--vert); }

/* ── 7. MICRO-FINITIONS TRANSVERSALES ── */
/* Focus chauds sur les champs (formulaire Contact + popup) */
.form-inp:focus, .form-sel:focus, .form-ta:focus{
  border-color: var(--vert);
  box-shadow:
    inset 0 1px 3px rgba(42,74,53,0.09),
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 0 3px rgba(90,138,106,0.18);
}
/* Liens sociaux : transition douce */


/* Chips piliers : style harmonisé avec hero-tag / peda-tag, pas de relief */

/* Mobile : mêmes soins, gabarits ajustés */
@media (max-width: 760px){
  .agenda-empty{ margin-left: 22px; margin-right: 22px; padding: 32px 22px 28px; }
  
  .btn:hover{ transform: none; } /* pas de lift au tap mobile */
  .agenda-card:hover, .presse-card-v10:hover, .doc-card:hover{ transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO NATURE - Home v103
   Hero immersif : photo pleine largeur, zone centrale lumineuse
   (voile radial, pas de cartouche rigide), vague organique en bas.
   Ne touche à aucune autre règle : classes dédiées .hero-nature-*
   ═══════════════════════════════════════════════════════════════ */
.hero-nature{
  position:relative;
  width:100%;
  min-height:640px;
  background-image:url("../images/hero-home-desktop.webp");
  background-size:cover;
  background-position:center 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* Voile lumineux central + léger dégradé haut/bas pour la lisibilité */
.hero-nature::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:
    radial-gradient(ellipse 46% 60% at 50% 45%,
      rgba(251,247,239,0.93) 0%,
      rgba(251,247,239,0.80) 40%,
      rgba(251,247,239,0.36) 72%,
      rgba(251,247,239,0) 100%),
    linear-gradient(to bottom,
      rgba(251,247,239,0.16) 0%,
      rgba(251,247,239,0) 28%,
      rgba(251,247,239,0) 68%,
      rgba(251,247,239,0.28) 100%);
  pointer-events:none;
}
.hero-nature-content{
  position:relative;
  z-index:2;
  max-width:660px;
  margin:0 auto;
  padding:92px 32px 150px;
  text-align:center;
}
.hero-nature-title{
  font-family:'Nunito',sans-serif;
  font-size:54px;
  font-weight:900;
  color:var(--vert-fonce);
  letter-spacing:-0.6px;
  line-height:1.1;
  margin-bottom:18px;
  text-shadow:0 1px 14px rgba(251,247,239,0.9);
}
.hero-nature-sep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto 22px;
  max-width:320px;
}
.hero-nature-sep span{
  flex:1;
  height:1.5px;
  border-radius:2px;
  background:linear-gradient(to right, rgba(61,107,78,0), rgba(61,107,78,0.55));
}
.hero-nature-sep span:last-child{
  background:linear-gradient(to left, rgba(61,107,78,0), rgba(61,107,78,0.55));
}
.hero-nature-sep .ti{
  font-size:18px;
  color:var(--vert);
  line-height:1;
}
.hero-nature-text{
  font-size:19px;
  line-height:1.72;
  font-weight:600;
  color:var(--texte);
  text-shadow:0 1px 10px rgba(251,247,239,0.85);
  margin:0;
}
.hero-nature-text strong{
  color:var(--terra);
  font-weight:800;
}
/* Vague organique de transition vers la section suivante (fond crème) */
.hero-nature-wave{
  position:absolute;
  left:0; right:0; bottom:-1px;
  width:100%;
  height:90px;
  display:block;
  z-index:3;
  pointer-events:none;
}

/* V134 - mobile : voile resserré sur la zone de texte uniquement (titre/séparateur/paragraphe), photo visible autour */
@media (max-width:760px){
  .hero-nature::before{
    background:
      radial-gradient(ellipse 62% 42% at 50% 43%,
        rgba(251,247,239,0.97) 0%,
        rgba(251,247,239,0.90) 40%,
        rgba(251,247,239,0.55) 68%,
        rgba(251,247,239,0.18) 88%,
        rgba(251,247,239,0) 100%) !important;
  }
}

/* V135 - mobile : supprime le padding redondant du wrapper (le padding de la section suffit), pour égaler la largeur du CTA équipe de référence et tenir sur une ligne */
@media (max-width:760px){
  
}

/* Responsive tablette */
@media (max-width:900px){
  .hero-nature{ min-height:560px; background-position:center 45%; background-image:url("../images/hero-home-tablette.webp"); }
  .hero-nature-content{ padding:70px 26px 128px; max-width:520px; }
  .hero-nature-title{ font-size:40px; }
  .hero-nature-text{ font-size:17px; }
  .hero-nature-wave{ height:66px; }
}
/* Responsive mobile */
@media (max-width:520px){
  .hero-nature{ min-height:620px; background-position:center 46%; }
  .hero-nature-content{ padding:60px 22px 118px; }
  .hero-nature-title{ font-size:34px; line-height:1.14; margin-bottom:16px; }
  .hero-nature-sep{ max-width:240px; margin-bottom:18px; }
  .hero-nature-text{ font-size:16px; line-height:1.7; }
  .hero-nature-wave{ height:56px; }
}

/* V136 - mobile : un peu plus de graisse sur le paragraphe hero pour la lisibilité */
@media (max-width:760px){
  .hero-nature-text{ font-weight:700 !important; }
}

/* V137 - mobile : spacer du header ajusté pour supprimer le liseré visible avant la photo */
@media (max-width:760px){
  #header-spacer{ height:80px !important; }
}

/* V138 - mobile : le bouton "Poser une question sur l'association" reste aussi sur une seule ligne */
@media (max-width: 480px) {
  button[onclick*="Poser une question sur l"] {
    font-size: 12px !important;
    padding: 9px 14px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
}

/* V139 - mobile : le bouton "Télécharger le bulletin d'adhésion" à la même taille que "Poser une question" */
@media (max-width: 480px) {
  .association-pdf-link {
    font-size: 12px !important;
    padding: 9px 14px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V140 - PASSE RESPONSIVE TABLETTE (761px - 1000px) - HOME
   Cartes moins étirées : grilles en 2 colonnes, photos recadrées.
   Aucun impact desktop (>1000px) ni mobile (≤760px).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1000px) {
  /* Screens 1 : cartes "correspondre à votre enfant/famille" côte à côte */
  

  /* Screen 2 : cartes "Un cadre pour apprendre" en 2 colonnes */
  .ben-grid { grid-template-columns: 1fr 1fr !important; }

  /* Screens 3-4 : galerie "moments de vie" harmonisée, plus d'espace vide */
  .gal-grid { grid-template-columns: 1fr 1fr !important; align-items: stretch !important; }
  .gal-card.main { grid-row: span 1 !important; }
  .gal-card .gal-photo,
  .gal-card.main .gal-photo { height: 250px !important; min-height: 0 !important; }

  /* Screen 5 : équipe en 2 colonnes, photos recadrées, cartes moins larges */
  .eq-grid { grid-template-columns: 1fr 1fr !important; max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
  .eq-card .eq-avatar { height: 230px !important; }
}

/* ═══════════════════════════════════════════════════════════
   V141 - ÉQUIPE : carrousel swipe mobile + tablette (≤1000px)
   Même mécanique que le carrousel Agenda (scroll-snap natif).
   Aucun impact desktop (>1000px), aucun JS nécessaire.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .eq-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 18px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: none !important;
    padding-top: 4px;
    padding-bottom: 8px;
  }
  .eq-grid::-webkit-scrollbar { display: none; height: 0; }
  .eq-grid .eq-card {
    flex: 0 0 62%;
    scroll-snap-align: center;
    min-width: 0;
  }
}
@media (max-width: 760px) {
  .eq-grid .eq-card { flex: 0 0 86%; }
}

/* ═══════════════════════════════════════════════════════════
   V144 - ÉQUIPE : recadrage photos tablette (761px - 1000px)
   Le carrousel introduit en V141 a rendu obsolète la hauteur
   230px de V140 (pensée pour une grille 2 colonnes abandonnée).
   Résultat : cartes larges en carrousel (flex 62%) + hauteur
   trop faible = crop vertical trop serré sur les photos.
   Hauteur augmentée pour retrouver un cadrage proche du mobile.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 900px) {
  .eq-card .eq-avatar { height: 320px !important; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .eq-card .eq-avatar { height: 360px !important; }
}

/* ═══════════════════════════════════════════════════════════
   V142 - ÉQUIPE : points indicateurs sous le carrousel swipe
   Visibles uniquement en mobile/tablette (≤1000px).
   ═══════════════════════════════════════════════════════════ */
.eq-dots { display: none; }
@media (max-width: 1000px) {
  .eq-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .eq-dots .eq-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vert-clair, #C9DCC9);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .1s linear, transform .1s ease-out;
  }
  .eq-dots .eq-dot.active {
    background: var(--vert-fonce, #2A4A35);
    transform: scale(1.25);
  }
}

/* ═══════════════════════════════════════════════════════════
   V146 - GALERIE : carrousel swipe mobile + tablette (≤1000px)
   Même mécanique que le carrousel Équipe (V141/V142), avec
   hauteur de photo proportionnelle (aspect-ratio) plutôt que
   fixe, pour garder le meilleur ratio sur toute la plage
   360px-1000px. Une carte à la fois (flex 90%) pour un cadrage
   large. Aucun impact desktop (>1000px), qui garde la grille
   masonry existante avec la photo "main" mise en avant.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .gal-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: none !important;
    padding-top: 4px;
    padding-bottom: 8px;
  }
  .gal-grid::-webkit-scrollbar { display: none; height: 0; }
  .gal-grid .gal-card {
    flex: 0 0 90%;
    scroll-snap-align: center;
    min-width: 0;
    grid-row: unset !important;
    height: auto !important;
  }
  .gal-grid .gal-card .gal-photo,
  .gal-grid .gal-card.main .gal-photo {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  .gal-grid .gal-card .gal-photo img,
  .gal-grid .gal-card.main .gal-photo img {
    height: 100% !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V146 - GALERIE : points indicateurs sous le carrousel swipe
   Visibles uniquement en mobile/tablette (≤1000px).
   ═══════════════════════════════════════════════════════════ */
.gal-dots { display: none; }
@media (max-width: 1000px) {
  .gal-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .gal-dots .gal-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vert-clair, #C9DCC9);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .1s linear, transform .1s ease-out;
  }
  .gal-dots .gal-dot.active {
    background: var(--vert-fonce, #2A4A35);
    transform: scale(1.25);
  }
}

/* ═══════════════════════════════════════════════════════════
   V147 - GALERIE MOBILE (≤760px) : cadrage fidèle à l'original
   Les photos sources sont en réalité en portrait (675x900,
   ratio 3:4), pas en paysage. Le ratio 4/3 de V146 (pensé pour
   la tablette, qui reste large en valeur absolue) écrasait
   beaucoup trop l'image sur mobile : case courte, peu lisible,
   et gros recadrage vertical perdu.
   Passage à 3/4 sous 760px seulement : correspond quasiment
   aux dimensions natives (recadrage minimal) et la carte
   gagne ~1.8x de hauteur à largeur égale = photos bien plus
   grandes et lisibles. Tablette (761-1000px, V146) et desktop
   non affectés.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .gal-grid .gal-card .gal-photo,
  .gal-grid .gal-card.main .gal-photo {
    aspect-ratio: 3 / 4 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V148 - GALERIE TABLETTE (761-1000px) : même opération que
   V147 (mobile), cette fois sur la tranche tablette.
   Cadrage rapproché des dimensions natives (3:4) : marge
   verticale largement suffisante sur ces écrans pour l'assumer
   sans problème de place. Mobile (V147) et desktop non
   affectés.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1000px) {
  .gal-grid .gal-card .gal-photo,
  .gal-grid .gal-card.main .gal-photo {
    aspect-ratio: 3 / 4 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V149 - GALERIE TABLETTE : réduction de la taille de carte
   Le cadrage 3:4 de V148 est bon, mais à 90% de largeur (V146)
   la hauteur qui en résulte (largeur x 4/3) dépasse presque
   toute la hauteur d'écran sur ces tablettes : les points du
   carrousel passent sous la ligne de flottaison, scroll requis.
   Largeur de carte réduite à 60% (le ratio 3:4 n'est pas
   touché) pour que la photo + les points tiennent sans scroll
   sur iPad Mini/Air, Surface Pro/Duo, Zenbook Fold. Mobile
   (V147) et desktop non affectés.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1000px) {
  .gal-grid .gal-card {
    flex: 0 0 60% !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V150 - "UN CADRE POUR APPRENDRE" : carrousel swipe mobile
   uniquement (≤760px). Même mécanique que Équipe (V141/V142)
   et Galerie (V146), pour éviter le scroll répété sur la home :
   les 6 cartes (Individu, Apprentissage, Bienveillance,
   Autonomie, Nature, Collectif) passent en swipe horizontal
   avec points indicateurs. Tablette (2 colonnes) et desktop
   (3 colonnes) non affectés.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .ben-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: none !important;
    padding-top: 4px;
    padding-bottom: 8px;
  }
  .ben-grid::-webkit-scrollbar { display: none; height: 0; }
  .ben-grid .ben-card {
    flex: 0 0 86%;
    scroll-snap-align: center;
    min-width: 0;
  }
}

/* V150 - points indicateurs du carrousel "cadre pour apprendre" (mobile uniquement) */
.ben-dots { display: none; }
@media (max-width: 760px) {
  .ben-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .ben-dots .ben-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vert-clair, #C9DCC9);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .1s linear, transform .1s ease-out;
  }
  .ben-dots .ben-dot.active {
    background: var(--vert-fonce, #2A4A35);
    transform: scale(1.25);
  }
}


/* ═══════════════════════════════════════════════════════════
   V152 - PAGE ASSOCIATION : carrousels swipe mobile (≤760px)
   Gouvernance (3 cartes) + Commissions (6 cartes), même
   mécanique que sur la home. Un 3ème bloc ".asso-grid" existe
   plus bas (Écologie/Parentalité/Créativité, cartes .asso-card-
   terr) : il n'est PAS concerné, d'où l'ajout d'une classe
   marqueur .assoc-carousel + un id dédié sur les deux seules
   grilles ciblées, plutôt qu'un ciblage générique par .asso-grid
   qui aurait aussi transformé le 3ème bloc.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .asso-grid.assoc-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: none !important;
    padding-top: 4px;
    padding-bottom: 8px;
  }
  .asso-grid.assoc-carousel::-webkit-scrollbar { display: none; height: 0; }
  .asso-grid.assoc-carousel > div {
    flex: 0 0 86%;
    scroll-snap-align: center;
    min-width: 0;
  }
}

/* V152 - points indicateurs des carrousels association (mobile uniquement) */
.assoc-dots { display: none; }
@media (max-width: 760px) {
  .assoc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .assoc-dots .assoc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vert-clair, #C9DCC9);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .1s linear, transform .1s ease-out;
  }
  .assoc-dots .assoc-dot.active {
    background: var(--vert-fonce, #2A4A35);
    transform: scale(1.25);
  }
}

/* Carrousel « Une association ouverte sur le territoire » :
   points blancs sur le fond vert foncé. */
.assoc-dots.dots-light .assoc-dot {
  background: rgba(255, 255, 255, 0.35);
}
.assoc-dots.dots-light .assoc-dot.active {
  background: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   V157 - PAGE "NOUS AIDER" : carrousel swipe mobile uniquement
   (≤760px) pour les 3 blocs (Faire un don, Donner du temps ou
   du matériel, Relayer le projet). Même mécanique que les
   autres carrousels du site. Tablette (761-1000px) non
   concernée : elle reste en 1 colonne empilée comme avant,
   aucune plainte à ce sujet, donc pas de changement là-bas.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .aide-s-blocs {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 4px;
    padding-bottom: 8px;
  }
  .aide-s-blocs::-webkit-scrollbar { display: none; height: 0; }
  .aide-s-blocs .aide-s-bloc {
    flex: 0 0 86%;
    scroll-snap-align: center;
    min-width: 0;
  }
}

/* V157 - points indicateurs du carrousel "Nous aider" (mobile uniquement) */
.aide-dots { display: none; }
@media (max-width: 760px) {
  .aide-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .aide-dots .aide-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vert-clair, #C9DCC9);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .1s linear, transform .1s ease-out;
  }
  .aide-dots .aide-dot.active {
    background: var(--vert-fonce, #2A4A35);
    transform: scale(1.25);
  }
}

/* ═══════════════════════════════════════════════════════════
   V155 - AGENDA (événements passés) : points sous le carrousel
   Le carrousel + flèches existaient déjà (une carte à la fois
   sous 900px, seuil propre à cette section). Ajout des points,
   cohérent avec les autres carrousels du site. Flèches
   conservées telles quelles.
   ═══════════════════════════════════════════════════════════ */
.agenda-dots { display: none; }
@media (max-width: 900px) {
  .agenda-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .agenda-dots .agenda-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vert-clair, #C9DCC9);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .1s linear, transform .1s ease-out;
  }
  .agenda-dots .agenda-dot.active {
    background: var(--vert-fonce, #2A4A35);
    transform: scale(1.25);
  }
}

/* ═══════════════════════════════════════════════════════════
   V156 - INSCRIPTIONS mobile : marges latérales insuffisantes
   Diagnostic : la marge réelle sur ce bloc était quasi nulle,
   pas juste "petite". #inscriptions > .cta-wrap-narrow a un
   padding inline (0 60px) neutralisé sous 760px par V135
   ("le padding de la section suffit"), sauf que le padding
   propre de .section est LUI-MÊME mis à 0 par la réécriture
   responsive V9 (ligne ~415) sous 1000px. Résultat : 0 + 0 = 0,
   le texte n'était retenu que par le retour à la ligne naturel,
   pas par un vrai padding. Le tablette (761-1000px) n'est pas
   concernée : V135 est scopé à 760px, l'inline 60px y reste actif.
   Fix scopé à #inscriptions uniquement (.cta-wrap-narrow est
   aussi utilisé par le CTA "pour qui", qu'on ne veut pas toucher),
   aligné sur les 22px de référence (section-peda).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  
}


/* ═══ V106 : NAVIGATION HEADER DESKTOP, plus aérée et plus lisible ═══ */
@media (min-width: 901px) {
  #gh-nav { gap: 6px !important; }
  #gh-nav a {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 9px 17px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V143 - HEADER TABLETTE (761px - 900px) : nav compactée
   pour tenir sur UNE seule ligne (fix iPad Mini 768px où
   "Presse" passait à la ligne). Aucun impact desktop/mobile.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 900px) {
  #gh-nav {
    flex-wrap: nowrap !important;
    gap: 0px !important;
  }
  #gh-nav a {
    font-size: 12.5px !important;
    padding: 7px 8px !important;
    white-space: nowrap !important;
  }
  #gh-cta {
    font-size: 12px !important;
    padding: 8px 14px !important;
    margin-left: 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   V145 - HEADER TABLETTE : fix spacer (761-900px) + extension
   nav compactée à la tranche 901-1000px (ex: Surface Pro 912px)
   1) V143 avait compacté la nav 761-900px mais le spacer fixe
      restait à 192px (valeur desktop d'origine) : le header
      réel étant devenu plus bas, un espace vide apparaissait
      avant le hero. Spacer réajusté à la hauteur réelle.
   2) V143 s'arrêtait à 900px : au-delà (901-1000px), logo et
      nav reprenaient leur taille desktop, et "Presse" repassait
      à la ligne faute de place. Même compaction appliquée ici,
      avec son propre spacer ajusté.
   Aucun impact sous 761px ni au-dessus de 1000px.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 900px) {
  #header-spacer { height: 160px !important; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  #gh-logo-img {
    width: 78px !important;
    height: 78px !important;
  }
  #gh-nav {
    flex-wrap: nowrap !important;
    gap: 2px !important;
  }
  #gh-nav a {
    font-size: 12.5px !important;
    padding: 7px 8px !important;
    white-space: nowrap !important;
  }
  #gh-cta {
    font-size: 12px !important;
    padding: 8px 14px !important;
    margin-left: 4px !important;
  }
  #header-spacer { height: 160px !important; }
}

/* ═══ V107 : POLISH TYPOGRAPHIQUE GLOBAL, confort de lecture ═══ */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after {
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}
h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════
   V159 - PAGE ASSOCIATION : grilles en 3 colonnes sur tablette
   (761-1000px), au lieu du carrousel. Décision Jo : gouvernance
   (3 cartes), commissions (6 cartes, 3x2) et territoire (3
   cartes) tiennent confortablement en 3 colonnes à ces largeurs
   (les cartes ont justement été calibrées pour un rendu 3
   colonnes jusqu'à 900-960px de large sur desktop, donc rien à
   resserrer côté gap/police).
   Ce bloc vient après la règle "ASSOCIATION - grilles 1 colonne
   sous 900px" plus haut et la neutralise sur 761-1000px sans la
   modifier (principe additif) : elle continue de s'appliquer
   sous 761px, mais y est de toute façon déjà remplacée par le
   carrousel .assoc-carousel (deux classes = spécificité plus
   forte), donc sans effet réel à cette largeur.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1000px) {
  .asso-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }
  .asso-grid > * { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════
   V160 - PAGE AGENDA : proportions tablette (761-1000px)
   "À venir" et "Passés" héritaient tous les deux du traitement
   pensé pour le vrai mobile (seuil à 900px) : une carte "à venir"
   étirée sur toute la largeur avec une photo basse (180px), très
   disproportionnée sur un écran tablette, et un carrousel "Passés"
   à une seule carte visible (88% de large, flèches masquées) alors
   qu'il y a la place pour 2 cartes. On resserre donc ces deux
   sections sur la plage tablette uniquement, sans toucher au
   comportement mobile (≤760px) ni au comportement desktop/grand
   format déjà réglé plus haut (>1000px, ou 901-1200px pour le
   carrousel "Passés").
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1000px) {
  /* À venir : la carte ne s'étire plus sur toute la largeur */
  .agenda-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 480px)) !important;
  }
  .agenda-card-photo { height: 220px; }

  /* Passés : 2 cartes visibles au lieu d'1 seule à 88% */
  .agenda-scroll-wrap { padding: 0 48px; }
  .agenda-scroll { gap: 20px; }
  .agenda-scroll .agenda-card {
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: 0;
  }
  .agenda-arrow { display: flex; }
}

/* ═══════════════════════════════════════════════════════════
   V161 - PAGE AGENDA "Passés" (tablette 761-1000px) : flèches
   retirées. Jo a testé sur iPad Mini : le swipe tactile + les 4
   points sous le carrousel (déjà actifs sur cette plage depuis
   V155) suffisent largement, les flèches gauche/droite ajoutées
   en V160 sont redondantes sur un écran tactile. On les remasque
   ici sans toucher au bloc V160 (principe additif) : le layout
   2-cartes-par-ligne et la photo "à venir" recalibrée restent
   inchangés. Les marges latérales du carrousel sont resserrées
   en conséquence, la place réservée aux boutons n'étant plus
   nécessaire.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1000px) {
  .agenda-arrow { display: none; }
  .agenda-scroll-wrap { padding: 0 22px; }
}

/* ═══════════════════════════════════════════════════════════
   V162 - PAGE "NOUS AIDER" : marges + cartes sur tablette
   (761-1000px). Diagnostic : les correctifs de marges pour le
   bloc "Impact concret" (.aide-benefices-wrap) et le bloc "Trois
   façons de soutenir" (.aide-trois-wrap) n'avaient été écrits que
   pour le vrai mobile (≤760px, cf. règles plus haut), laissant le
   texte et les cartes coller aux bords sur tablette. Par ailleurs,
   la règle générale @media(max-width:1000px) forçait .aide-s-blocs
   en 1 colonne pour toute la plage mobile+tablette (le commentaire
   V157 notait explicitement "tablette non concernée, pas de
   changement" - ce n'est plus vrai). On aligne ici sur le même
   traitement que la page Association (3 colonnes, cartes déjà
   calibrées pour cette largeur), sans toucher au mobile ni au
   desktop.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1000px) {
  #page-aide .aide-benefices-wrap {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }
  #page-aide .aide-trois-wrap {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box;
  }
  .aide-s-blocs {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .aide-s-blocs > * { min-width: 0; }

  /* V163 - encadré "Nous construisons les besoins..." : il repose sur
     max-width:760px + margin:0 auto, mais sa section parente n'a
     aucun padding latéral propre (.section-tight est full-bleed).
     Sur tablette, 760px est proche de la largeur d'écran (ex. 768px
     sur iPad Mini), ce qui ne laisse quasiment plus de marge. On
     force une largeur qui garantit au moins 22px de chaque côté,
     tout en gardant le centrage et le plafond de 760px pour les
     largeurs de tablette plus généreuses (jusqu'à 1000px). */
  
}

/* ═══════════════════════════════════════════════════════════
   V164 - PAGE PRESSE : cadrage des photos sur tablette
   (761-900px). La règle mobile @media(max-width:900px) fixe
   .presse-card-photo img à 210px de haut, une valeur calibrée
   pour une carte étroite (~360px sur mobile, ratio ~1.7:1,
   proche du ratio d'origine desktop ~1.65:1). Sur tablette la
   carte fait ~720-850px de large (empilée sur 1 colonne comme
   sur mobile, cf. règle ≤900px) mais garde cette même hauteur
   de 210px, ce qui donne un ratio ~3.4:1 : la photo paraît
   aplatie/écrasée. On remonte la hauteur pour retrouver un
   cadrage proche du mobile, sans toucher à l'empilement en 1
   colonne ni au comportement mobile (≤760px, qui reste à
   210px) ou desktop (>900px, déjà en 2 colonnes avec un ratio
   correct).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 900px) {
  .presse-card-photo img { height: 400px; }
}

/* ═══════════════════════════════════════════════════════════
   V165 - PAGE PRESSE : coins des photos, commun à desktop,
   tablette et mobile. Comme sur les cartes équipe pédagogique
   (cf. Justine) : la carte elle-même (.presse-card-v10) a déjà
   border-radius:18px + overflow:hidden, donc elle arrondit
   automatiquement les seuls coins réellement en bord de carte,
   quel que soit l'agencement (photo en haut sur mobile/tablette,
   à gauche ou à droite sur desktop selon .rev). Mais une règle
   #page-presse ajoutée plus tard forçait en plus un
   border-radius:18px directement sur la photo, ce qui arrondissait
   ses 4 coins indépendamment de la carte - y compris ceux qui
   touchent le texte (les deux coins du bas sur mobile/tablette,
   le coin latéral côté texte sur desktop). En ramenant la photo à
   0, elle n'a plus son propre arrondi : elle hérite simplement du
   découpage de la carte parente, ce qui donne exactement le rendu
   des cartes équipe sur les trois formats, sans code spécifique
   par largeur d'écran.
   ═══════════════════════════════════════════════════════════ */
#page-presse .presse-card-photo,
#page-presse .presse-card-photo img {
  border-radius: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   V224 - NOUS AIDER : 4 cartes d'impact concret
   Grille 2x2 desktop, grille tablette, carrousel mobile.
   Composant autonome : aucun impact sur la galerie de la Home.
   ═══════════════════════════════════════════════════════════ */
#page-aide .aide-impact-layout {
  align-items: start;
  gap: 44px;
}
#page-aide .aide-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#page-aide .aide-impact-card {
  position: relative;
  width: 100%;
  height: 252px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--vert-fonce);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(42,74,53,.12), 0 16px 28px -16px rgba(42,74,53,.35);
  cursor: pointer;
  text-align: left;
  font: inherit;
  isolation: isolate;
}
#page-aide .aide-impact-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20,45,32,0) 38%, rgba(20,45,32,.26) 58%, rgba(20,45,32,.92) 100%);
  pointer-events: none;
}
#page-aide .aide-impact-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}
@media (hover: hover) and (pointer: fine) {
#page-aide .aide-impact-card:hover img { transform: scale(1.035); }
}

#page-aide .aide-impact-card:focus-visible {
  outline: 3px solid var(--ocre);
  outline-offset: 4px;
}
#page-aide .aide-impact-label {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(247,243,236,.94);
  color: var(--vert-fonce);
  font-size: 11px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(20,45,32,.14);
}
#page-aide .aide-impact-legend {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.48;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
#page-aide .aide-impact-dots { display: none; }

@media (min-width: 761px) and (max-width: 1000px) {
  #page-aide .aide-impact-layout { gap: 30px !important; }
  #page-aide .aide-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  #page-aide .aide-impact-card { height: 310px; }
  #page-aide .aide-impact-legend { font-size: 14px; }
}

@media (max-width: 760px) {
  #page-aide .aide-impact-layout { gap: 26px !important; }
  #page-aide .aide-impact-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 1px 10px;
  }
  #page-aide .aide-impact-grid::-webkit-scrollbar { display: none; height: 0; }
  #page-aide .aide-impact-card {
    flex: 0 0 86%;
    height: 390px;
    scroll-snap-align: center;
    min-width: 0;
  }
  #page-aide .aide-impact-label { top: 16px; left: 16px; font-size: 12px; padding: 8px 13px; }
  #page-aide .aide-impact-legend { left: 18px; right: 18px; bottom: 18px; font-size: 14px; line-height: 1.5; }
  #page-aide .aide-impact-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  #page-aide .aide-impact-dots button {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: var(--vert-clair);
    cursor: pointer;
    transition: background .1s linear, transform .1s ease-out;
  }
  #page-aide .aide-impact-dots button.active {
    background: var(--vert-fonce);
    transform: scale(1.25);
  }
  #page-aide .aide-impact-dots button:focus-visible {
    outline: 2px solid var(--ocre);
    outline-offset: 3px;
  }
}


/* ═══════════════════════════════════════════════════════════
   V225 - NOUS AIDER : légendes courtes + hover aligné Home
   Référence exacte : translation verticale et ombre des .gal-card.
   Le zoom interne de l’image est neutralisé.
   ═══════════════════════════════════════════════════════════ */
#page-aide .aide-impact-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
#page-aide .aide-impact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(42,74,53,0.12);
}
}

#page-aide .aide-impact-card img {
  transition: none;
}
@media (hover: hover) and (pointer: fine) {
#page-aide .aide-impact-card:hover img {
  transform: none;
}
}


/* ═══ FOOTER GLOBAL ═══ */
.footer.footer-v229 {
  background: #264f38;
  color: #f7f3ec;
  padding: 0 !important;
  min-height: 0 !important;
}
.footer-v229__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 32px 12px;
  box-sizing: border-box;
}
.footer-v229__top {
  display: grid;
  grid-template-columns: minmax(330px, 1.55fr) auto;
  gap: 28px;
  align-items: start;
}
.footer-v229__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.footer-v229__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}
.footer-v229__brand strong {
  display: block;
  color: #fffaf1;
  font-size: 18px;
  font-weight: 700;
}
.footer-v229__brand span {
  display: block;
  margin-top: 2px;
  color: rgba(247,243,236,.72);
  font-size: 12px;
}
.footer-v229 a {
  color: rgba(247,243,236,.78);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}
.footer-v229 a:hover,
.footer-v229 a:focus-visible {
  color: #fffaf1;
}
.footer-v229__useful {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: 13px;
}
.footer-v229__socials {
  display: flex;
  gap: 9px;
  margin: 0;
}
.footer-v229__socials a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(247,243,236,.28);
  border-radius: 50%;
  color: #fffaf1;
}
.footer-v229__socials a:hover,
.footer-v229__socials a:focus-visible {
  background: rgba(247,243,236,.12);
  transform: translateY(-2px);
}
.footer-v229__socials svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
}
.footer-v229__socials svg rect,
.footer-v229__socials svg circle { fill: none; }
.footer-v229__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(247,243,236,.18);
  color: rgba(247,243,236,.58);
  font-size: 12px;
}
.footer-v229__bottom-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-v229__bottom-links a {
  color: rgba(247,243,236,.72);
}
.footer-v229__bottom-links a:hover,
.footer-v229__bottom-links a:focus-visible {
  color: #fffaf1;
}
@media (max-width: 900px) {
  .footer-v229__inner { padding-inline: 26px; }
}
@media (max-width: 700px) {
  .footer-v229__inner { padding: 22px 22px 14px; }
  .footer-v229__top {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
  .footer-v229__identity { grid-column: 1 / -1; }
  .footer-v229__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
  }
  .footer-v229__bottom-links {
    justify-content: flex-start;
    gap: 12px 18px;
  }
}
@media (max-width: 430px) {
  .footer-v229__top {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer-v229__identity { grid-column: auto; }
  .footer-v229__useful {
    align-items: center;
    justify-self: center;
    width: 100%;
  }
  .footer-v229__socials {
    justify-content: center;
    width: 100%;
  }
}

/* V234 — Header desktop compacté uniquement au-dessus de 1000 px */
@media (min-width: 1001px) {
  #gh-row1 {
    padding: 8px 52px 6px !important;
  }

  #gh-logo-img {
    width: 104px !important;
    height: 104px !important;
  }

  #gh-socials {
    gap: 10px !important;
  }

  #gh-row2 {
    padding: 6px 40px !important;
  }

  #gh-nav a {
    padding: 5px 10px !important;
    font-size: 13px !important;
  }

  #gh-cta {
    padding: 8px 18px !important;
    font-size: 12.5px !important;
  }

  #header-spacer {
    height: 158px !important;
  }
}


/* V235 — Ajustement fin du header desktop */
@media (min-width: 1001px) {
  #gh-logo-img {
    width: 112px !important;
    height: 112px !important;
  }

  #gh-nav a {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 11px !important;
  }

  #header-spacer {
    height: 166px !important;
  }
}


/* V238 — Flèches de navigation du carrousel de témoignages (desktop) */
.temo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.temo-arrow:hover,
.temo-arrow:focus-visible {
  background: rgba(255,255,255,.17);
  border-color: rgba(255,255,255,.48);
  transform: translateY(-50%) scale(1.05);
  outline: none;
}
.temo-arrow--prev { left: -72px; }
.temo-arrow--next { right: -72px; }
.temo-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 980px) {
  .temo-arrow--prev { left: -44px; }
  .temo-arrow--next { right: -44px; }
}
@media (max-width: 760px) {
  .temo-arrow { display: none; }
}


/* V239 — Pages Confidentialité et Accessibilité */
.legal-page-v239{background:var(--creme);min-height:60vh;padding:58px 24px 76px}
.legal-page-v239__inner{max-width:900px;margin:0 auto;background:rgba(255,253,248,.9);border:1px solid rgba(79,123,91,.22);border-radius:22px;padding:44px 54px;box-shadow:var(--ombre-posee)}
.legal-page-v239 h1{font-family:'Nunito',sans-serif;font-size:36px;line-height:1.15;color:var(--vert-fonce);margin:0 0 12px;font-weight:900}
.legal-page-v239 .legal-intro{font-size:17px;line-height:1.7;color:var(--texte-doux);margin:0 0 32px}
.legal-page-v239 h2{font-family:'Nunito',sans-serif;font-size:22px;color:var(--vert-fonce);margin:34px 0 12px;font-weight:900}
.legal-page-v239 p,.legal-page-v239 li{font-size:15.5px;line-height:1.75;color:var(--texte-doux)}
.legal-page-v239 ul{padding-left:22px;margin:10px 0 18px}
.legal-page-v239 a{color:var(--vert);font-weight:700;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-page-v239 .legal-date{margin-top:34px;padding-top:18px;border-top:1px solid rgba(79,123,91,.22);font-size:13px;color:var(--texte-doux);font-style:italic}
.form-privacy-v239{max-width:520px;margin:14px auto 0;font-size:12.5px;line-height:1.55;color:var(--texte-doux);text-align:center}
.form-privacy-v239 a{color:var(--vert-fonce);font-weight:800;text-decoration:underline;text-underline-offset:2px}
@media(max-width:700px){
  .legal-page-v239{padding:30px 16px 48px}
  .legal-page-v239__inner{padding:30px 22px;border-radius:18px}
  .legal-page-v239 h1{font-size:29px}
  .legal-page-v239 h2{font-size:20px;margin-top:28px}
  .legal-page-v239 p,.legal-page-v239 li{font-size:15px}
}


/* V241 — micro-interactions des réseaux sociaux du header */
#gh-socials a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 5px !important;
  margin: -5px !important;
  border-radius: 50%;
  transition: color .18s ease, transform .18s ease, background .18s ease !important;
}
#gh-socials a:hover,
#gh-socials a:focus-visible {
  color: var(--vert-fonce) !important;
  transform: translateY(-2px);
  background: rgba(68,128,92,.08);
}
@media (hover:none), (pointer:coarse) {
  #gh-socials a:hover,
  #gh-socials a:focus-visible {
    transform: none;
    background: transparent;
  }
}

/* ═══ ROUTAGE, ACCESSIBILITÉ ET CONSOLIDATION ═══ */
html.route-pending [id^="page-"]{display:none!important}
.skip-link-v242{position:fixed;z-index:100000;left:16px;top:12px;transform:translateY(-180%);background:#fff;color:#2A4A35;padding:10px 16px;border:2px solid #2A4A35;border-radius:8px;font-weight:800;text-decoration:none;transition:transform .15s ease}
.skip-link-v242:focus{transform:translateY(0)}
p.hero-nature-title{margin-top:0}
[role="button"][tabindex="0"]{cursor:pointer}
[role="button"][tabindex="0"]:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid #C8934A!important;outline-offset:3px!important}
.form-inp:focus-visible,.form-sel:focus-visible,.form-ta:focus-visible{outline:none!important;outline-offset:0!important;border-color:var(--vert)!important;box-shadow:inset 0 1px 3px rgba(42,74,53,.09),inset 0 1px 0 rgba(255,255,255,.5)!important}

#modal[aria-hidden="true"],#gal-lightbox[aria-hidden="true"]{visibility:hidden}
#modal.show[aria-hidden="false"],#gal-lightbox.open[aria-hidden="false"]{visibility:visible}

.long-link-v242,#page-confidentialite a,#page-accessibilite a{overflow-wrap:anywhere;word-break:break-word}
/* Extend hit areas without changing visual dimensions or compact layouts. */
#temo-dots button,.eq-dot,.gal-dot,.ben-dot,.assoc-dot,.aide-dot,.agenda-dot,#aide-impact-dots button,#gh-socials a,#global-header a[target="_blank"],#gh-burger,.footer-v229__socials a,.footer-v229__bottom-links a{position:relative}
#temo-dots button::after,.eq-dot::after,.gal-dot::after,.ben-dot::after,.assoc-dot::after,.aide-dot::after,.agenda-dot::after,#aide-impact-dots button::after{content:"";position:absolute;inset:-17px;border-radius:50%}
#gh-socials a::after,#global-header a[target="_blank"]::after,#gh-burger::after,.footer-v229__socials a::after,.footer-v229__bottom-links a::after{content:"";position:absolute;inset:-7px}
/* Stronger secondary text contrast. */

.eyelet,.eyelet-vert{color:#84442F!important}
.asso-gov-intro,.asso-comm-intro,#page-presse .page-banner + div p{color:#4A4A4A!important}
@media (max-width:360px){#page-confidentialite a,#page-accessibilite a{overflow-wrap:anywhere;word-break:break-word}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═══ V247.9 — BARRE DE DÉFILEMENT DESKTOP ═══
   Intégration discrète dans la bordure droite du site.
   Le comportement natif mobile et tablette compacte reste inchangé. */
@media (min-width:761px){
  html{
    scrollbar-color:var(--vert-sauge) var(--creme);
    scrollbar-width:thin;
  }
  html::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  html::-webkit-scrollbar-track{
    background:var(--creme);
  }
  html::-webkit-scrollbar-thumb{
    min-height:52px;
    background:var(--vert-sauge);
    border:2px solid var(--creme);
    border-radius:999px;
  }
  html::-webkit-scrollbar-thumb:hover{
    background:var(--vert-mid);
  }
  html::-webkit-scrollbar-thumb:active{
    background:var(--vert);
  }
  html::-webkit-scrollbar-corner{
    background:var(--creme);
  }
}


/* ═══ V242.8 — PREMIÈRE CENTRALISATION DES STYLES INLINE ═══
   Règles répétitives et purement visuelles uniquement.
   Les états dynamiques pilotés par JavaScript restent en inline. */
.u-clickable{cursor:pointer}
.temo-quote-mark{font-size:52px;color:rgba(255,255,255,0.10);line-height:1;margin-bottom:-8px;font-family:Georgia,serif}
.temo-quote-text{font-size:15px;color:rgba(255,255,255,0.88);font-style:italic;line-height:1.78;font-weight:400;font-family:'Nunito',sans-serif;margin-bottom:14px}
.temo-quote-text-last{margin-bottom:0}
.gal-photo-frame{height:270px;position:relative;overflow:hidden}
.gal-photo-shade{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(transparent,rgba(30,50,35,0.75))}
.media-cover-pos-30{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.media-cover-pos-40{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.layout-narrow{max-width:680px;margin:0 auto;padding:0 52px}
.page-banner-title{font-size:36px;margin-bottom:12px;font-weight:900!important;font-family:'Nunito',sans-serif}
.page-banner-standard{width:100%;padding:56px 0;text-align:center}
.page-banner-subtitle{font-size:17px;line-height:1.65;font-family:'Nunito',sans-serif;font-weight:600}
.section-clipped{position:relative;overflow:hidden}
.decorative-watermark{opacity:0.12;position:absolute;pointer-events:none}
.asso-comm-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.icon-white-16{font-size:16px;color:#fff}
#page-asso .asso-gov-card-base{background:var(--blanc);border-radius:18px 4px 18px 4px;padding:28px 22px;border:1.5px solid var(--vert-clair);box-shadow:0 2px 8px rgba(42,74,53,0.06)}
.asso-gov-title{color:var(--vert-fonce);margin-bottom:8px;font-weight:800}
.asso-gov-text{font-size:13.5px;color:var(--texte-doux);line-height:1.72}
#page-asso .asso-terr-card-base{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:26px 20px}
.asso-terr-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.asso-terr-icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.asso-terr-title{color:#fff;margin:0;font-size:15px;font-weight:800}
.asso-terr-text{font-size:13px;color:rgba(255,255,255,0.72);line-height:1.7}
.body-copy-spaced{font-size:16px;color:var(--texte-doux);line-height:1.85;margin-bottom:16px}
.body-copy-lead{font-size:15px;color:var(--texte-doux);max-width:560px;line-height:1.72}
.scroll-target-offset{scroll-margin-top:200px}


/* ═══ V242.9 — DEUXIÈME CENTRALISATION DES STYLES INLINE ═══
   Styles statiques des pages Association et Nous aider.
   Les états dynamiques JavaScript restent volontairement en ligne. */
#page-asso .asso-page-hero-bg{background:var(--vert-pale)}
#page-asso .asso-hero-photo-wrap-v2429{background:var(--vert-pale);padding:36px 40px 0;text-align:center}
#page-asso .asso-hero-photo-inner-v2429{max-width:1080px;margin:0 auto 0;padding:0 40px 0;cursor:pointer}
#page-asso .asso-hero-photo-v2429{width:100%;height:auto;max-height:460px;object-fit:cover;display:block;border-radius:18px;box-shadow:0 8px 30px rgba(42,74,53,0.13);border:3px solid var(--vert-fonce)}
#page-asso .asso-wave-shell-v2429{line-height:0;display:block;overflow:hidden;background:var(--vert-pale);margin-bottom:0}
#page-asso .asso-wave-svg-v2429{display:block;width:100%;height:52px}
#page-asso .asso-intro-inner-v2429{max-width:680px;margin:0 auto;padding:0 52px;text-align:center}
#page-asso .asso-intro-copy-lead-v2429{font-size:16px;color:var(--texte-doux);line-height:1.85;margin-bottom:18px;font-weight:500}
#page-asso .asso-intro-emphasis-v2429{color:var(--vert-fonce)}
#page-asso .asso-intro-copy-v2429{font-size:16px;color:var(--texte-doux);line-height:1.85;font-weight:500}
#page-asso .wave-bg-lin-v2429{background:#EDE8DF}
#page-asso .asso-gov-grid-v2429{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto}
#page-asso .asso-gov-icon-green-v2429{width:44px;height:44px;border-radius:12px;background:var(--vert-pale);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
#page-asso .asso-gov-icon-green-glyph-v2429{font-size:20px;color:var(--vert)}
#page-asso .asso-gov-icon-ochre-v2429{width:44px;height:44px;border-radius:12px;background:var(--ocre-clair);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
#page-asso .asso-gov-icon-ochre-glyph-v2429{font-size:20px;color:var(--ocre)}
#page-asso .asso-gov-icon-terra-v2429{width:44px;height:44px;border-radius:12px;background:var(--terra-clair);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
#page-asso .asso-gov-icon-terra-glyph-v2429{font-size:20px;color:var(--terra)}
#page-asso .wave-bg-cream-v2429{background:#F7F3EC}
#page-asso .asso-comm-grid-v2429{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:960px;margin:0 auto}
#page-asso .asso-comm-card-green-v2429{background:var(--vert-pale);border-radius:16px;padding:22px 18px;border:1.5px solid var(--vert-clair)}
#page-asso .asso-comm-icon-green-v2429{width:36px;height:36px;border-radius:10px;background:var(--vert);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-asso .asso-comm-title-green-v2429{font-size:14.5px;color:var(--vert-fonce);margin:0;font-weight:800}
#page-asso .asso-comm-copy-green-v2429{font-size:12.5px;color:var(--texte-doux);line-height:1.65}
#page-asso .asso-comm-card-ochre-v2429{background:var(--ocre-clair);border-radius:16px;padding:22px 18px;border:1.5px solid rgba(200,147,74,0.25)}
#page-asso .asso-comm-icon-ochre-v2429{width:36px;height:36px;border-radius:10px;background:var(--ocre);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-asso .asso-comm-title-ochre-v2429{font-size:14.5px;color:#7A5A00;margin:0;font-weight:800}
#page-asso .asso-comm-copy-ochre-v2429{font-size:12.5px;color:#7A5A00;line-height:1.65;opacity:0.85}
#page-asso .asso-comm-card-terra-v2429{background:var(--terra-clair);border-radius:16px;padding:22px 18px;border:1.5px solid rgba(184,92,56,0.2)}
#page-asso .asso-comm-icon-terra-v2429{width:36px;height:36px;border-radius:10px;background:var(--terra);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-asso .asso-comm-title-terra-v2429{font-size:14.5px;color:#7A3B20;margin:0;font-weight:800}
#page-asso .asso-comm-copy-terra-v2429{font-size:12.5px;color:#7A3B20;line-height:1.65;opacity:0.85}
#page-asso .asso-comm-card-work-v2429{background:#EEF4EE;border-radius:16px;padding:22px 18px;border:1.5px solid rgba(74,138,90,0.2)}
#page-asso .asso-comm-icon-work-v2429{width:36px;height:36px;border-radius:10px;background:#4A8A5A;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-asso .asso-comm-title-work-v2429{font-size:14.5px;color:#2A5A3A;margin:0;font-weight:800}
#page-asso .asso-comm-copy-work-v2429{font-size:12.5px;color:#2A5A3A;line-height:1.65;opacity:0.85}
#page-asso .asso-comm-card-link-v2429{background:#F0F8E8;border-radius:16px;padding:22px 18px;border:1.5px solid rgba(106,154,74,0.2)}
#page-asso .asso-comm-icon-link-v2429{width:36px;height:36px;border-radius:10px;background:#6A9A4A;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-asso .asso-comm-title-link-v2429{font-size:14.5px;color:#3A6A1A;margin:0;font-weight:800}
#page-asso .asso-comm-copy-link-v2429{font-size:12.5px;color:#3A6A1A;line-height:1.65;opacity:0.85}
#page-asso .asso-comm-card-team-v2429{background:var(--vert-fonce);border-radius:16px;padding:22px 18px;border:1.5px solid rgba(255,255,255,0.12)}
#page-asso .asso-comm-icon-team-v2429{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#page-asso .asso-comm-team-glyph-v2429{font-size:16px;color:#B7D9C4}
#page-asso .asso-comm-title-team-v2429{font-size:14.5px;color:#fff;margin:0;font-weight:800}
#page-asso .asso-comm-copy-team-v2429{font-size:12.5px;color:rgba(255,255,255,0.78);line-height:1.65}
#page-asso .wave-bg-dark-v2429{background:#2A4A35}
#page-asso .asso-territory-title-v2429{color:#fff}
#page-asso .asso-territory-lead-v2429{color:rgba(255,255,255,0.65);max-width:580px;margin:0 auto}
#page-asso .asso-territory-grid-v2429{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:0 auto;position:relative;z-index:2}
#page-asso .asso-territory-icon-eco-v2429{font-size:18px;color:#B7D9C4}
#page-asso .asso-territory-icon-parent-v2429{font-size:18px;color:#F4C4A0}
#page-asso .asso-territory-icon-creative-v2429{font-size:18px;color:#FAC775}
#page-asso .wave-bg-project-v2429{background:#FBF6EA}
#page-asso .asso-project-section-v2429{background:#FBF6EA;border-bottom:2px solid var(--ocre)}
#page-asso .asso-project-inner-v2429{max-width:740px;margin:0 auto}
#page-asso .asso-project-title-v2429{font-size:26px;color:var(--vert-fonce);margin-bottom:18px;line-height:1.3}
#page-asso .asso-project-copy-v2429{font-size:16px;color:var(--texte-doux);line-height:1.85}
#page-asso .asso-cta-section-v2429{text-align:center}
#page-asso .asso-cta-title-v2429{font-size:17px !important;color:var(--vert-fonce);margin-bottom:10px;font-weight:900 !important;font-family:'Nunito',sans-serif}
#page-asso .asso-cta-button-wrap-v2429{display:flex;justify-content:center;margin-bottom:16px;margin-top:20px}
#page-asso .asso-bulletin-wrap-v2429{padding-top:0}




#page-aide .aide-impact-wrap-v2429{max-width:1100px;margin:0 auto;padding:0 0}
#page-aide .aide-impact-heading-wrap-v2429{margin-bottom:36px}
#page-aide .aide-impact-title-v2429{font-size:22px;font-weight:900;color:var(--vert-fonce);margin-bottom:12px}
#page-aide .aide-impact-img-one-v2429{object-position:center 43%}
#page-aide .aide-impact-img-two-v2429{object-position:center 44%}
#page-aide .aide-impact-img-three-v2429{object-position:center 45%}
#page-aide .aide-impact-img-four-v2429{object-position:center 40%}
#page-aide .wave-bg-aide-lin-one-v2429{background:#EFE8D6}
#page-aide .aide-methods-wrap-v2429{max-width:1100px;margin:0 auto}
#page-aide .aide-methods-title-v2429{font-size:22px;font-weight:900;color:var(--vert-fonce);margin-bottom:10px}
#page-aide .wave-bg-aide-green-two-v2429{background:var(--vert-pale)}
#page-aide .wave-bg-aide-lin-two-v2429{background:#EFE8D6}


/* ═══ V242.10 — TROISIÈME CENTRALISATION DES STYLES INLINE ═══
   Styles statiques des pages Nos valeurs et Presse.
   Les états dynamiques JavaScript restent volontairement en ligne. */
#page-valeurs .valeurs-page-bg-v24210{background:var(--creme)}
#page-valeurs .valeurs-citation-inner-v24210{padding-top:4px;padding-bottom:4px}
#page-valeurs .valeurs-citizen-photo-v24210{object-fit:cover;object-position:center 30%}
#page-valeurs .valeurs-cta-section-v24210{padding:4px 0 32px}
#page-valeurs .valeurs-cta-inner-v24210{max-width:640px;margin:0 auto;padding:0 52px}
#page-valeurs .valeurs-cta-title-v24210{font-size:17px;color:var(--vert-fonce);margin-bottom:10px;font-family:'Nunito',sans-serif;font-weight:900}
#page-valeurs .valeurs-cta-actions-v24210{display:flex;justify-content:center}
#page-presse .presse-page-bg-v24210{background:var(--creme)}


#page-presse .presse-banner-subtitle-v24210{font-size:16px;line-height:1.65;font-family:'Nunito',sans-serif;font-weight:600}
#page-presse .presse-cta-section-v24210{width:100%;background:var(--vert-pale);padding:48px 0;text-align:center}
#page-presse .presse-cta-inner-v24210{max-width:560px;margin:0 auto;padding:0 40px}
#page-presse .presse-cta-title-v24210{font-size:22px;color:var(--vert-fonce);margin-bottom:10px;font-family:'Nunito',sans-serif;font-weight:900}
#page-presse .presse-cta-copy-v24210{font-size:14.5px;color:var(--texte-muted);margin-bottom:24px;font-family:'Nunito',sans-serif;font-weight:600}
#page-presse .presse-cta-actions-v24210{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}


/* V242.11 — composants globaux et Agenda : styles statiques centralisés */
#global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--blanc);
  border-bottom: 2px solid var(--vert-pale);
  box-shadow: 0 2px 14px rgba(42,74,53,0.09);
}
#gh-row1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 52px 10px;
  border-bottom: 1px solid var(--lin);
  position: relative;
}
#gh-row1 > a[title="Accueil"] {
  display: inline-block;
  line-height: 0;
}
#gh-logo-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(42,74,53,0.10));
}
#gh-burger {
  display: none;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--vert-fonce);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
#gh-socials {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}
#gh-socials a {
  color: var(--vert-mid);
  font-size: 22px;
  text-decoration: none;
  line-height: 1;
}
#gh-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 40px;
  gap: 8px;
  flex-wrap: wrap;
}
#gh-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}
#gh-nav a {
  font-size: 13.5px;
  color: var(--texte-doux);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 50px;
  white-space: nowrap;
  font-family: 'Nunito', sans-serif;
}
#nav-home,
#nav-valeurs,
#nav-asso,
#nav-aide {
  transition: background 0.15s, color 0.15s;
}
#gh-cta {
  background: var(--vert);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#header-spacer {
  height: 192px;
}
#modal-mode-form {
  text-align: left;
}
#page-agenda .agenda-page-bg {
  background: var(--creme);
}
#page-agenda .wave-sep {
  background: var(--vert-pale);
}


/* ═══ V242.13 — CENTRALISATION FINALE DES STYLES STATIQUES DE LA HOME ═══
   Les seuls styles conservés en ligne sur la Home sont les états dynamiques
   des témoignages (affichage des slides et couleur active des points). */
#page-home .home-hero-photo-shell-v24213{padding:0;background:none;border-radius:20px;overflow:hidden;cursor:pointer}
#page-home .home-wave-bg-pale-v24213{background:#EAF2EB}
#page-home .home-wave-bg-cream-v24213{background:#F7F3EC}
#page-home .home-wave-bg-lin-v24213{background:#EDE8DF}
#page-home .home-wave-bg-inscriptions-v24213{background:#EFF5F0}





#page-home .home-story-copy-v24213{font-size:16px;color:var(--texte-doux);line-height:1.8}
#page-home .home-decor-rotated-v24213{position:absolute;top:-10px;right:20px;opacity:.06;transform:rotate(-20deg) scale(2)}
#page-home .home-gallery-intro-v24213{padding:0 52px;max-width:1100px;margin:0 auto 20px;box-sizing:border-box}
#page-home .home-gallery-eyelet-v24213{display:block;margin-bottom:10px}
#page-home .home-gallery-title-v24213{font-size:25px;margin-bottom:10px;color:var(--vert-fonce)}
#page-home .home-gallery-copy-v24213{font-size:14.5px;color:var(--texte-muted);margin-bottom:0;max-width:700px}
#page-home .home-gallery-main-frame-v24213{height:100%;min-height:552px;position:relative;overflow:hidden}
#page-home .home-gallery-main-image-v24213{width:100%;height:552px;object-fit:cover;object-position:center 25%;display:block}
#page-home .home-gallery-main-shade-v24213{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(transparent,rgba(30,50,35,.82))}
#page-home .home-media-cover-25-v24213{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
#page-home .home-media-cover-60-v24213{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
#page-home .home-testimonials-section-v24213{width:100%;background:var(--vert-fonce);padding:56px 0;position:relative;overflow:hidden}
#page-home .home-testimonials-inner-v24213{max-width:800px;margin:0 auto;padding:0 52px;position:relative;z-index:1}
#page-home .home-testimonials-heading-wrap-v24213{text-align:center;margin-bottom:36px}
#page-home .home-testimonials-title-v24213{font-size:22px;color:#fff;font-weight:700;font-family:'Nunito',sans-serif;line-height:1.3;margin:0}
#page-home .home-testimonials-stage-v24213{min-height:160px}
#page-home .home-testimonial-slide-v24213{text-align:center}
#page-home .home-testimonials-dots-v24213{display:flex;justify-content:center;gap:8px;margin-top:28px;align-items:center}
#page-home .home-testimonial-dot-v24213{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;padding:0;transition:background .2s;flex-shrink:0}
#page-home .home-team-title-v24213{font-size:25px;text-align:center;margin-bottom:10px}
#page-home .home-team-copy-v24213{font-size:15px;color:var(--texte-muted);text-align:center;max-width:540px;margin:0 auto}
#page-home .home-inscriptions-section-v24213{background:#EFF5F0}



#page-home .home-trial-title-v24213{font-size:19px;color:var(--vert-fonce);font-weight:800;margin-bottom:12px;font-family:'Nunito',sans-serif;line-height:1.3}


/* Conservation du retrait mobile historique des enfants directs de .section,
   auparavant déclenché par la présence de leur attribut style. */
@media (max-width:900px){
  #page-home .section > .home-decor-top-right-v24213,
  #page-home .section > .home-decor-bottom-left-v24213,
  #page-home .section > .home-fit-title-v24213,
  #page-home .section > .home-fit-intro-v24213,
  #page-home .section > .home-decor-rotated-v24213,
  #page-home .section > .home-team-title-v24213,
  #page-home .section > .home-team-copy-v24213{padding-left:22px;padding-right:22px}
}

/* V242.14 — adresses juridiques lisibles sur une seule ligne en mobile. */
@media (max-width: 480px) {
  #page-confidentialite a[href^="mailto:equipepeda.laclefdeschamps@gmail.com"],
  #page-accessibilite a[href^="mailto:equipepeda.laclefdeschamps@gmail.com"] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: clamp(11.5px, 3.45vw, 13.5px);
    letter-spacing: -0.02em;
    vertical-align: baseline;
  }
}

/* ═══ V247.1 — HARMONISATION DES CTA DE CONTENU SUR MOBILE ═══
   Référence visuelle : boutons de la page « Nous aider ».
   Uniquement sous 761 px : même corps, même hauteur et même respiration,
   sans modifier les couleurs, l’alignement, l’ordre ni le rendu tablette/desktop. */
@media (max-width: 760px) {
  main[id^="page-"] .btn.btn-sm {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    padding: 9px 20px !important;
    gap: 7px !important;
  }

  /* Les variantes avec bordure gardent exactement la même hauteur extérieure. */
  main[id^="page-"] .btn.btn-sm.btn-outline,
  main[id^="page-"] .btn.btn-sm.btn-outline-dark {
    padding: 7px 18px !important;
  }
}

/* À 320 px, même hauteur et même présence visuelle, avec un retrait horizontal
   légèrement resserré pour conserver tous les libellés sur une seule ligne. */
@media (max-width: 340px) {
  main[id^="page-"] .btn.btn-sm {
    font-size: 13px !important;
    padding: 9px 14px !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  main[id^="page-"] .btn.btn-sm.btn-outline,
  main[id^="page-"] .btn.btn-sm.btn-outline-dark {
    padding: 7px 12px !important;
  }
}

/* ═══ V247.3 — HARMONISATION DES CTA DE CONTENU SUR DESKTOP ═══
   Référence visuelle : gabarit des CTA de la page « Nous aider ».
   À partir de 761 px, tous les CTA de contenu partagent la même hauteur,
   la même respiration et le même rythme typographique, sans modifier
   leurs couleurs, leur emplacement, leur largeur naturelle ni le CTA du header. */
@media (min-width: 761px) {
  main[id^="page-"] .btn.btn-sm {
    line-height: 1.7;
  }

  /* Compensation des bordures pour conserver le même gabarit extérieur
     que les boutons pleins de la page « Nous aider ». */
  main[id^="page-"] .btn.btn-sm.btn-outline,
  main[id^="page-"] .btn.btn-sm.btn-outline-dark {
    padding: 7px 18px;
  }
}

/* ═══ V247.10 — PRESSE : RETOUR AU GABARIT ORIGINAL ═══
   Les cartes conservent strictement leur structure et leurs dimensions
   validées en V247.7. Seuls les trois logos officiels transparents sont
   intégrés, sans cadre, fond, cartouche ni décoration supplémentaire. */
@media (min-width: 901px) {
  #page-presse .presse-card-v10 {
    height: 280px;
  }
}

#page-presse .presse-card-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 52px;
  margin: 0 0 18px;
  object-fit: contain;
  object-position: left center;
}

#page-presse .presse-card-logo-img.logo-ouest-france {
  width: 142px;
}

#page-presse .presse-card-logo-img.logo-le-telegramme {
  width: 190px;
}

#page-presse .presse-card-logo-img.logo-cote-quimper {
  width: 190px;
}

@media (max-width: 900px) {
  #page-presse .presse-card-logo-img {
    max-width: 100%;
    max-height: 46px;
    margin-bottom: 16px;
  }
  #page-presse .presse-card-logo-img.logo-ouest-france {
    width: 132px;
  }
  #page-presse .presse-card-logo-img.logo-le-telegramme,
  #page-presse .presse-card-logo-img.logo-cote-quimper {
    width: 178px;
  }
}

/* ═══ V247.12 — PRESSE : HARMONISATION SOBRE DES LOGOS SVG ═══
   Objectif : garder le gabarit des cartes intact, supprimer toute impression
   de cadre blanc autour des logos et harmoniser leur présence visuelle en
   prenant Côté Quimper comme référence. Aucun cartouche, aucun fond, aucune
   décoration : seulement des SVG transparents bien dimensionnés. */
#page-presse .presse-card-body > div:first-child {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

#page-presse .presse-card-logo-img {
  display: block;
  width: auto !important;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0 !important;
  object-fit: contain;
  object-position: left center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#page-presse .presse-card-logo-img.logo-ouest-france {
  height: 36px;
}

#page-presse .presse-card-logo-img.logo-le-telegramme {
  height: 38px;
}

#page-presse .presse-card-logo-img.logo-cote-quimper {
  height: 36px;
}

@media (max-width: 900px) {
  #page-presse .presse-card-body > div:first-child {
    min-height: 38px;
    margin-bottom: 16px;
  }

  #page-presse .presse-card-logo-img.logo-ouest-france {
    height: 31px;
  }

  #page-presse .presse-card-logo-img.logo-le-telegramme {
    height: 33px;
  }

  #page-presse .presse-card-logo-img.logo-cote-quimper {
    height: 31px;
  }
}


/* ═══ V247.13 — PRESSE : LOGOS OFFICIELS VERSIONNÉS ET SANS FOND ═══
   Les nouveaux noms de fichiers forcent leur téléchargement et évitent que
   les anciennes versions à fond blanc restent servies depuis le cache long
   des icônes. Le gabarit des cartes ne change pas. */
#page-presse .presse-card-body > div:first-child {
  min-height: 46px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#page-presse .presse-card-logo-img {
  display: block;
  width: auto !important;
  height: auto;
  max-width: 100%;
  max-height: none;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain;
  object-position: left center;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#page-presse .presse-card-logo-img.logo-ouest-france {
  height: 46px;
}

#page-presse .presse-card-logo-img.logo-le-telegramme {
  height: 34px;
}

#page-presse .presse-card-logo-img.logo-cote-quimper {
  height: 46px;
}

@media (max-width: 900px) {
  #page-presse .presse-card-body > div:first-child {
    min-height: 40px;
    margin-bottom: 16px;
  }

  #page-presse .presse-card-logo-img.logo-ouest-france {
    height: 40px;
  }

  #page-presse .presse-card-logo-img.logo-le-telegramme {
    height: 30px;
  }

  #page-presse .presse-card-logo-img.logo-cote-quimper {
    height: 40px;
  }
}

/* ═══ V251.2.6 — HEADER MOBILE CONSOLIDÉ ANDROID + iOS ═══
   Une seule règle définitive conserve le rendu validé (82 px, logo 66 px,
   réseaux et burger aux mêmes coordonnées). Android reste en sticky afin de
   permettre le repli de la barre d’adresse. iOS/iPadOS utilise fixed avec le
   spacer existant, car WebKit peut faire disparaître un header sticky pendant
   le défilement. Aucun fichier CSS ni correctif tardif supplémentaire. */
@media (max-width: 760px) {
  :root {
    --gh-compact-height: 82px;
    --gh-compact-logo-size: 66px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  #global-header,
  #global-header.gh-open {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--gh-compact-height) !important;
    min-height: var(--gh-compact-height) !important;
    max-height: var(--gh-compact-height) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: var(--blanc) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  #gh-row1 {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--gh-compact-height) !important;
    min-height: var(--gh-compact-height) !important;
    max-height: var(--gh-compact-height) !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    overflow: visible !important;
    background: var(--blanc) !important;
    border-bottom: 0 !important;
    contain: layout style;
  }

  #gh-row1 > a[title="Accueil"] {
    position: absolute !important;
    left: 16px !important;
    top: 8px !important;
    display: block !important;
    width: var(--gh-compact-logo-size) !important;
    height: var(--gh-compact-logo-size) !important;
    min-width: var(--gh-compact-logo-size) !important;
    min-height: var(--gh-compact-logo-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 0 !important;
  }

  #gh-logo-img {
    display: block !important;
    width: var(--gh-compact-logo-size) !important;
    height: var(--gh-compact-logo-size) !important;
    min-width: var(--gh-compact-logo-size) !important;
    min-height: var(--gh-compact-logo-size) !important;
    max-width: var(--gh-compact-logo-size) !important;
    max-height: var(--gh-compact-logo-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  #gh-socials {
    position: absolute !important;
    left: auto !important;
    right: 76px !important;
    top: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 42px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #gh-socials a {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    color: var(--vert-mid) !important;
    background: transparent !important;
    opacity: .94;
    touch-action: manipulation;
  }

  #gh-socials a:nth-child(1),
  #gh-socials a:nth-child(2),
  #gh-socials a:nth-child(3) {
    color: var(--vert-mid) !important;
  }

  #gh-socials svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.9 !important;
  }

  #gh-socials a:hover,
  #gh-socials a:focus-visible {
    color: var(--vert-fonce) !important;
    background: rgba(68,128,92,.09) !important;
    transform: none !important;
    opacity: 1;
  }

  #gh-socials a:active {
    background: rgba(68,128,92,.14) !important;
  }

  #gh-burger {
    position: absolute !important;
    right: 12px !important;
    top: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    transform: none !important;
    touch-action: manipulation;
    transition: background .16s ease, color .16s ease;
  }

  #gh-burger svg {
    width: 28px;
    height: 28px;
  }

  #gh-burger:hover,
  #gh-burger:focus-visible {
    background: rgba(68,128,92,.09);
  }

  #gh-burger:active {
    background: rgba(68,128,92,.14);
  }

  #gh-socials a::after,
  #gh-burger::after {
    inset: 0 !important;
  }

  #gh-cta,
  #gh-social-mobile {
    display: none !important;
  }

  #gh-row2 {
    position: absolute !important;
    top: var(--gh-compact-height) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 18px 14px !important;
    max-height: calc(100vh - var(--gh-compact-height));
    max-height: calc(100dvh - var(--gh-compact-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #header-spacer {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
  }

  /* Branche WebKit mobile : le header reste visible pendant tout le scroll. */
  html.is-ios #global-header,
  html.is-ios #global-header.gh-open {
    position: fixed !important;
  }

  html.is-ios #header-spacer {
    display: block !important;
    width: 100% !important;
    height: var(--gh-compact-height) !important;
    min-height: var(--gh-compact-height) !important;
    max-height: var(--gh-compact-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 var(--gh-compact-height) !important;
  }
}


/* ═══ V251.2.12 — TYPOGRAPHIE MANUSCRITE DU LOGO ═══
   Police exacte retrouvée dans le prototype V252 : Pacifico.
   Application strictement ciblée au titre Home, aux prénoms de l'équipe
   et aux deux titres « Nous écrire ». Les tailles et couleurs restent intactes. */
.hero-nature-title,
.eq-name,
.form-title {
  font-family: 'Pacifico', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
}


/* ═══ V251.2.13 — Fonctions équipe en Pacifico, minuscules ═══
   On prolonge la signature manuscrite sur les intitulés de fonction,
   en conservant une hiérarchie plus discrète que les prénoms. */
.eq-role {
  font-family: 'Pacifico', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}


/* ═══ V251.2.14 — Casse des fonctions de l’équipe ═══ */
.eq-card:nth-child(1) .eq-role,
.eq-card:nth-child(2) .eq-role {
  text-transform: none !important;
}
.eq-card:nth-child(3) .eq-role {
  text-transform: lowercase !important;
}


/* ═══ V251.2.15 — PACIFICO EN TOUCHES STRATÉGIQUES ═══
   La typographie manuscrite reste réservée aux accroches humaines,
   aux petits repères de section et à la signature du footer.
   Les grands titres de pages, la navigation et les contenus restent en Nunito. */
.contact-h,
#page-valeurs .page-banner-subtitle,
#page-asso .page-banner-subtitle,
#page-aide .page-banner-subtitle,
#page-presse .page-banner-subtitle,
.footer-v229__brand strong,
.eyelet,
.eyelet-vert,
.eyelet-light {
  font-family: 'Pacifico', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Préservation des tailles et couleurs existantes. */
.eyelet,
.eyelet-vert,
.eyelet-light {
  line-height: 1.35 !important;
}
#page-agenda .eyelet {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.footer-v229__brand strong {
  line-height: 1.25 !important;
}


/* ═══ V251.2.16 — PACIFICO AGENDA + EYELETS RENFORCÉS ═══
   L’accroche de la page Agenda rejoint les autres accroches manuscrites.
   Les petits repères de section gagnent 2 px pour une présence plus équilibrée,
   sans modifier leurs couleurs, positions ni hiérarchie. */
#page-agenda .page-banner-subtitle {
  font-family: 'Pacifico', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: 0 !important;
}

.eyelet,
.eyelet-vert,
.eyelet-light {
  font-size: 13px !important;
}
#page-home .eyelet,
#page-home .eyelet-vert,
#page-asso .eyelet,
#page-asso .eyelet-vert,
#page-asso .eyelet-light,
#page-aide .eyelet,
#page-aide .eyelet-vert {
  font-size: 14px !important;
}
#page-agenda .eyelet {
  font-size: 16px !important;
}


/* ═══ V251.2.17 — EYELETS +1 PX DESKTOP / TABLETTE ═══
   Dernier ajustement de présence visuelle : +1 px uniquement au-dessus de 760 px.
   Les tailles mobiles validées en V251.2.16 restent strictement inchangées. */
@media (min-width: 761px) {
  .eyelet,
  .eyelet-vert,
  .eyelet-light {
    font-size: 14px !important;
  }
  #page-home .eyelet,
  #page-home .eyelet-vert,
  #page-asso .eyelet,
  #page-asso .eyelet-vert,
  #page-asso .eyelet-light,
  #page-aide .eyelet,
  #page-aide .eyelet-vert {
    font-size: 15px !important;
  }
  #page-agenda .eyelet {
    font-size: 17px !important;
  }
}


/* ═══ V251.2.18 — TITRES DE CATÉGORIE AGENDA RENFORCÉS ═══
   « À venir » et « Passés » sont des titres de catégories, pas de simples eyelets.
   Ils gagnent +4 px sur desktop/tablette et +2 px sur mobile, sans toucher aux
   autres repères manuscrits du site. */
#page-agenda .section-head .eyelet {
  font-size: 18px !important;
  line-height: 1.25 !important;
}
@media (min-width: 761px) {
  #page-agenda .section-head .eyelet {
    font-size: 21px !important;
  }
}


/* ═══ V251.2.19 — PACIFICO : VALEURS ET QUESTIONS FINALES ═══
   Extension ciblée de la signature manuscrite aux six intitulés de valeurs
   et aux quatre questions conversationnelles validées. Les tailles, couleurs,
   marges et positions restent celles de la V251.2.18. Footer inchangé. */
#page-valeurs .valeur-text-wrap h2,
#page-valeurs .valeurs-cta-title-v24210,
#page-asso .asso-cta-title-v2429,
#page-aide .aide-s-cta-card > h2,
#page-presse .presse-cta-title-v24210 {
  font-family: 'Pacifico', sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* ═══ V251.2.20 — TITRES DES SIX VALEURS RENFORCÉS ═══
   Pacifico possède une hauteur visuelle plus faible que Nunito à taille égale.
   Les six titres passent donc au-dessus du corps de texte, sans modifier les
   autres éléments Pacifico ni les espacements structurels de la page. */
#page-valeurs .valeur-text-wrap h2 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  #page-valeurs .valeur-text-wrap h2 {
    font-size: 18px !important;
  }
}


/* ═══ V251.2.21 — QUESTIONS CALÉES SUR LES TITRES DE VALEURS ═══
   La taille de « La bienveillance éducative » devient la référence exacte
   pour les trois questions conversationnelles ciblées. Couleurs, marges,
   positions et autres propriétés inchangées. */
#page-valeurs .valeurs-cta-title-v24210,
#page-asso .asso-cta-title-v2429,
#page-presse .presse-cta-title-v24210 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  #page-valeurs .valeurs-cta-title-v24210,
  #page-asso .asso-cta-title-v2429,
  #page-presse .presse-cta-title-v24210 {
    font-size: 18px !important;
  }
}


/* ═══ V251.2.22 — QUESTION ASSOCIATION AGRANDIE ═══
   « Une question sur le fonctionnement associatif ? » reçoit une présence
   équivalente à « Ces valeurs vous correspondent ? » dans son contexte visuel.
   Le mobile conserve la taille précédente pour éviter tout débordement. */
@media (min-width: 761px) {
  #page-asso .asso-cta-title-v2429 {
    font-size: 25px !important;
    line-height: 1.35 !important;
  }
}


/* ═══ V251.2.23 — Témoignages et citation en Pacifico ═══
   Ajustement strictement typographique : tailles, couleurs, alignements,
   marges et positions existants conservés. */
#page-home .home-testimonials-title-v24213 {
  font-family: 'Pacifico', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
}

#page-valeurs .valeurs-citation-inner-v24210 blockquote {
  font-family: 'Pacifico', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
}


/* ═══ V251.2.24 — HEADER MOBILE FIXE ET ANTI-DISPARITION ═══
   Correctif ciblé après régression constatée au scroll mobile.
   La V251.2.6 utilisait sticky sur Android et fixed sur iOS. Avec les couches
   graphiques ajoutées depuis, certains navigateurs mobiles peuvent sortir le
   header sticky de leur couche de composition. Le header passe donc en fixed
   sur tous les mobiles, avec le spacer existant activé systématiquement.
   Dimensions, coordonnées, menu burger et rendu visuel restent inchangés. */
@media (max-width: 760px) {
  #global-header,
  #global-header.gh-open,
  html.is-ios #global-header,
  html.is-ios #global-header.gh-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    isolation: isolate;
    contain: layout style;
    will-change: transform;
  }

  #header-spacer,
  html.is-ios #header-spacer {
    display: block !important;
    width: 100% !important;
    height: var(--gh-compact-height) !important;
    min-height: var(--gh-compact-height) !important;
    max-height: var(--gh-compact-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 var(--gh-compact-height) !important;
  }

  #gh-row1,
  #gh-row2 {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}


/* ═══ V251.2.25 — MOT-SYMBOLE OFFICIEL DANS LE HERO ═══
   Le grand titre de la Home reprend désormais directement le tracé exact
   du logo officiel. La taille, la couleur et le centrage du bloc sont
   conservés ; seule la forme typographique est remplacée. */
.hero-nature-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
}



@media (max-width: 900px) {
  
}

@media (max-width: 520px) {
  
}


/* ═══ V251.2.26 — CASSE DU MOT-SYMBOLE HERO ═══
   Le grand titre reprend la police manuscrite Pacifico déjà utilisée dans le site,
   avec les majuscules demandées à « Clef » et « Champs ».
   Les dimensions visuelles du mot-symbole V251.2.25 sont conservées. */
.hero-nature-title {
  display: block !important;
  font-family: 'Pacifico', sans-serif !important;
  font-size: 69px !important;
  font-weight: 400 !important;
  font-synthesis: none;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  color: var(--vert-fonce) !important;
  text-shadow: 0 1px 14px rgba(251,247,239,0.90) !important;
}

@media (max-width: 900px) {
  .hero-nature-title { font-size: 51px !important; }
}
@media (max-width: 520px) {
  .hero-nature-title {
    font-size: clamp(33px, calc(12.05vw - 5.3px), 43px) !important;
  }
}

/* ===== Source consolidée : forms-v251-2.css ===== */
/* V251.2 — antispam et accessibilité des formulaires. Aucun impact graphique hors indications et états utiles. */
.form-honeypot-v251{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;pointer-events:none!important}
.form-required-v251{font-size:1em;font-weight:700;text-transform:none;letter-spacing:0}
.form-field-error-v251:empty,.form-status-v251:empty{display:none}
.form-field-error-v251{display:block;margin:5px 2px 0;color:#8b2f2f;font-size:13px;line-height:1.4;font-weight:700}
.form-gr.has-error-v251 .form-inp,.form-gr.has-error-v251 .form-sel,.form-gr.has-error-v251 .form-ta{border-color:#8b2f2f;box-shadow:0 0 0 1px #8b2f2f}
.form-status-v251{margin:12px 2px 0;font-size:14px;line-height:1.45;font-weight:700}
.form-status-v251[data-state="error"],.form-status-v251[data-state="validation"]{color:#8b2f2f}
.form-submit[disabled]{cursor:wait;opacity:.72;transform:none}


/* ===== V251.2.85 — Fluidité mobile, lot 1 : cartes tactiles =====
   Les effets de survol restent réservés aux dispositifs à pointeur fin.
   Sur écran tactile, les cartes gardent leur rendu au repos sans transition
   inutile pendant le swipe ou le défilement vertical.
*/
@media (hover: none), (pointer: coarse) {
  .gal-card,
  .eq-card,
  .doc-card,
  .agenda-card,
  .presse-card-v10,
  .asso-card-gov,
  .asso-card-comm,
  .asso-card-terr,
  #page-aide .aide-impact-card,
  #page-aide .aide-impact-card img,
  .presse-card-v10 .presse-card-photo img {
    transition: none !important;
  }
}


/* ===== V251.2.92 — Mini passe esthétique : titre Home et accroches de pages =====
   - mot-symbole Pacifico de la Home légèrement renforcé sans changer sa taille ;
   - accroches Pacifico des cinq pages principales passées en blanc pour améliorer
     leur contraste sur le bandeau vert foncé.
*/
#page-home .hero-nature-title {
  -webkit-text-stroke: .42px currentColor;
  paint-order: stroke fill;
}

#page-valeurs .page-banner-subtitle,
#page-asso .page-banner-subtitle,
#page-agenda .page-banner-subtitle,
#page-aide .page-banner-subtitle,
#page-presse .page-banner-subtitle {
  color: #FFFFFF !important;
}

@media (max-width: 520px) {
  #page-home .hero-nature-title {
    -webkit-text-stroke-width: .32px;
  }
}


/* ===== V251.2.93 — Micro-passe esthétique : séparateur Home et accroches desktop =====
   - pictogramme central sous le mot-symbole de la Home retiré ;
   - les deux filets restent continus et discrets ;
   - accroches Pacifico des pages internes légèrement agrandies sur desktop uniquement.
*/
#page-home .hero-nature-sep {
  gap: 0 !important;
}

#page-home .hero-nature-sep svg {
  display: none !important;
}

@media (min-width: 1001px) {
  #page-valeurs .page-banner-subtitle,
  #page-asso .page-banner-subtitle,
  #page-agenda .page-banner-subtitle,
  #page-aide .page-banner-subtitle,
  #page-presse .page-banner-subtitle {
    font-size: 20px !important;
    line-height: 1.55 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   V251.2.141 — CONTACT, FICHE DE CORRESPONDANCE
   Refonte strictement esthétique du bloc Home et de la fenêtre globale.
   Les contenus, champs, objets préremplis, liens sociaux et traitements
   Netlify restent inchangés.
   ═══════════════════════════════════════════════════════════════ */

/* Bloc intégré : les deux colonnes deviennent un seul objet graphique. */
#page-home .section.section-contact {
  position: relative !important;
  isolation: isolate;
  width: calc(100% - 104px) !important;
  max-width: 1100px !important;
  margin: 72px auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 39%) minmax(0, 61%) !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow: hidden;
  border: 1px solid rgba(63, 91, 69, 0.16);
  border-radius: 28px;
  background: #fbf7ef !important;
  box-shadow:
    0 3px 8px rgba(42, 74, 53, 0.07),
    0 20px 44px -22px rgba(42, 74, 53, 0.28);
}

#page-home .section.section-contact > div:first-child {
  position: relative;
  min-width: 0;
  padding: 52px 46px 44px;
  background-color: #e1ede2;
  background-image:
    url('../images/paper-fibres-v251-2-8.webp'),
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.50), transparent 34%),
    linear-gradient(145deg, #e8f1e8 0%, #dceadd 100%);
  background-size: 420px auto, auto, auto;
  background-blend-mode: soft-light, normal, normal;
}

#page-home .section.section-contact > div:first-child::after {
  content: none;
}

#page-home .contact-h {
  position: relative;
  z-index: 1;
  max-width: 330px;
  margin: 0 0 30px;
  color: var(--vert-fonce);
  font-size: clamp(26px, 2.1vw, 31px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.35px;
}

#page-home .contact-list {
  position: relative;
  z-index: 1;
  gap: 15px;
  margin: 0 0 26px;
}

#page-home .contact-list li {
  min-width: 0;
  gap: 12px;
  color: #3e4e43;
  font-size: 13.5px;
  line-height: 1.45;
}

#page-home .contact-list .ti {
  width: 34px !important;
  height: 34px !important;
  padding: 8px;
  border: 1px solid rgba(61, 107, 78, .15);
  border-radius: 10px;
  background: rgba(255, 253, 248, .68);
  color: var(--vert);
  box-shadow: 0 3px 8px rgba(42, 74, 53, .06);
}

#page-home .contact-list a {
  overflow-wrap: break-word;
  color: var(--vert-fonce);
  font-weight: 800;
}

#page-home .contact-list li:last-child a {
  font-size: 12px;
  letter-spacing: -.12px;
}

/* Les trois boutons sociaux validés conservent leur dessin et leur format. */
#page-home .contact-socials {
  position: relative;
  z-index: 1;
  gap: 11px;
  margin: 0;
}

#page-home .contact-socials a {
  width: 42px;
  height: 42px;
  border-color: rgba(61, 107, 78, .32);
  background: rgba(255, 253, 248, .66);
  box-shadow: 0 3px 9px rgba(42, 74, 53, .07);
}

#page-home .form-box {
  position: relative;
  min-width: 0;
  height: 100%;
  padding: 46px 48px 42px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: #fcf8f0;
  background-image:
    url('../images/paper-fibres-v251-2-8.webp'),
    radial-gradient(circle at 86% 16%, rgba(255,255,255,.75), transparent 31%),
    linear-gradient(180deg, #fffdf8 0%, #fbf6ed 100%);
  background-size: 430px auto, auto, auto;
  background-blend-mode: soft-light, normal, normal;
  box-shadow: none;
}

#page-home .form-box::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 22px;
  bottom: 22px;
  left: 0;
  border-left: 1px dashed rgba(61, 107, 78, .23);
}

#page-home #main-contact-form {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 18px;
}

#page-home #main-contact-form > .form-title {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: var(--vert-fonce);
  font-size: 29px;
  line-height: 1.25;
}

#page-home #main-contact-form > .form-gr {
  min-width: 0;
  margin: 0;
}

#page-home #main-contact-form > .form-gr:nth-of-type(6) {
  grid-column: 1 / -1;
}

#page-home #main-contact-form .form-lbl,
#modal-contact-form .form-lbl {
  margin-bottom: 6px;
  color: #68736b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .9px;
}

#page-home #main-contact-form .form-inp,
#page-home #main-contact-form .form-sel,
#page-home #main-contact-form .form-ta,
#modal-contact-form .form-inp,
#modal-contact-form .form-sel,
#modal-contact-form .form-ta {
  border: 1.4px solid #d9d0c1;
  background: rgba(248, 244, 236, .90);
  box-shadow:
    inset 0 1px 3px rgba(42, 74, 53, .055),
    inset 0 1px 0 rgba(255,255,255,.78);
}

#page-home #main-contact-form .form-inp,
#page-home #main-contact-form .form-sel {
  min-height: 43px;
}

#page-home #main-contact-form .form-ta {
  min-height: 105px;
}

#page-home #main-contact-form > .form-submit {
  grid-column: 1;
  align-self: center;
  min-height: 46px;
  margin: 0;
  box-shadow: 0 6px 14px rgba(42, 74, 53, .15);
}

#page-home #main-contact-form > .form-privacy-v239 {
  grid-column: 2;
  align-self: center;
  margin: 0;
  color: #747d77;
  font-size: 10.5px;
  line-height: 1.55;
}

#page-home #main-contact-form > .form-status-v251 {
  grid-column: 1 / -1;
  margin: 0;
}

/* Fenêtre globale : même papier, même hiérarchie, sans ajout de contenu. */
#modal:has(#modal-mode-form[style*="display: block"]) .modal {
  width: min(760px, calc(100% - 40px));
  max-width: 760px;
  padding: 42px 44px 38px;
  overflow: hidden auto;
  border: 1px solid rgba(63, 91, 69, .16);
  border-radius: 26px;
  background-color: #fcf8f0;
  background-image:
    url('../images/paper-fibres-v251-2-8.webp'),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.78), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, #fbf6ed 100%);
  background-size: 430px auto, auto, auto;
  background-blend-mode: soft-light, normal, normal;
  text-align: left;
  box-shadow: 0 26px 70px rgba(28, 52, 36, .28) !important;
}

/* V251.2.151.9 — formulaires : ancien liseré vert supérieur supprimé. */

#modal-contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

#modal-contact-form > .form-title {
  grid-column: 1 / -1;
  margin: 0 0 5px;
  color: var(--vert-fonce);
  font-size: 28px;
  line-height: 1.25;
}

#modal-contact-form > .form-gr {
  min-width: 0;
  margin: 0;
}

#modal-contact-form > .form-gr:nth-of-type(6),
#modal-contact-form > .form-status-v251 {
  grid-column: 1 / -1;
}

#modal-contact-form .form-inp,
#modal-contact-form .form-sel {
  min-height: 41px;
}

#modal-contact-form .form-ta {
  min-height: 94px;
}

#modal-contact-form > .form-submit {
  grid-column: 1;
  min-height: 44px;
  margin: 2px 0 0;
  box-shadow: 0 6px 14px rgba(42, 74, 53, .15);
}

#modal:has(#modal-mode-form[style*="display: block"]) .modal-x {
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  background: #e8f1e8;
  color: var(--vert-fonce);
}

#modal:has(#modal-mode-form[style*="display: block"]) .modal:focus-visible {
  outline: 2px solid rgba(61, 107, 78, .48) !important;
  outline-offset: 3px !important;
}

@media (max-width: 1100px) {
  #page-home .section.section-contact {
    width: calc(100% - 44px) !important;
    max-width: none !important;
    margin: 48px 22px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 24px;
  }

  #page-home .section.section-contact > div:first-child {
    padding: 38px 34px 34px;
  }

  #page-home .contact-h {
    max-width: none;
    font-size: 28px;
  }

  #page-home .form-box {
    padding: 38px 34px 36px;
  }

  #page-home .form-box::before {
    top: 0;
    right: 22px;
    bottom: auto;
    left: 22px;
    border-top: 1px dashed rgba(61, 107, 78, .23);
    border-left: 0;
  }
}

@media (max-width: 620px) {
  #page-home .section.section-contact {
    width: calc(100% - 32px) !important;
    margin: 40px 16px !important;
    border-radius: 21px;
  }

  #page-home .section.section-contact > div:first-child {
    padding: 31px 24px 28px;
  }

  #page-home .contact-h {
    margin-bottom: 24px;
    font-size: clamp(23px, 7.2vw, 28px);
  }

  #page-home .contact-list {
    gap: 12px;
    margin-bottom: 23px;
  }

  #page-home .contact-list li {
    font-size: 12.5px;
  }

  #page-home .contact-list .ti {
    width: 32px !important;
    height: 32px !important;
    padding: 7px;
  }

  #page-home .form-box {
    padding: 31px 24px 28px;
  }

  #page-home #main-contact-form {
    display: block;
  }

  #page-home #main-contact-form > .form-title {
    margin-bottom: 21px;
    font-size: 27px;
  }

  #page-home #main-contact-form > .form-gr {
    margin-bottom: 14px;
  }

  #page-home #main-contact-form > .form-submit {
    width: 100%;
    margin: 1px 0 13px;
  }

  #page-home #main-contact-form > .form-privacy-v239 {
    margin: 0;
    text-align: center;
    font-size: 10px;
  }

  /* Depuis les CTA, le mobile reste une feuille de formulaire seule. */
  #modal:has(#modal-mode-form[style*="display: block"]) {
    align-items: center;
    padding: 10px;
  }

  #modal:has(#modal-mode-form[style*="display: block"]) .modal {
    width: 100%;
    max-width: 430px;
    max-height: calc(100dvh - 20px);
    padding: 28px 20px 22px;
    border-radius: 20px;
  }

  #modal-contact-form {
    display: block;
  }

  #modal-contact-form > .form-title {
    margin: 0 0 20px;
    padding-right: 44px;
    font-size: 27px;
  }

  #modal-contact-form > .form-gr {
    margin-bottom: 12px;
  }

  #modal-contact-form .form-inp,
  #modal-contact-form .form-sel {
    min-height: 40px;
  }

  #modal-contact-form .form-ta {
    min-height: 82px;
  }

  #modal-contact-form > .form-submit {
    width: 100%;
    margin: 2px 0 0;
  }

  #modal:has(#modal-mode-form[style*="display: block"]) .modal-x {
    top: 11px;
    right: 11px;
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 360px) {
  #page-home .section.section-contact {
    width: calc(100% - 24px) !important;
    margin-right: 12px !important;
    margin-left: 12px !important;
  }

  #page-home .section.section-contact > div:first-child,
  #page-home .form-box {
    padding-right: 19px;
    padding-left: 19px;
  }

  #modal:has(#modal-mode-form[style*="display: block"]) .modal {
    padding-right: 16px;
    padding-left: 16px;
  }
}