:root {
  --green: #3a8642; --green-dark: #275a2e; --green-light: #eaf3ea;
  --blue: #9fb4c7; --lilac: #a493b8; --cream: #fbf7ef; --cream-dark: #f3ead9;
  --ink: #2b261f; --ink-soft: #58503f; --white: #ffffff;
  --radius: 18px; --shadow: 0 10px 30px rgba(39,90,46,.12); --shadow-soft: 0 4px 14px rgba(39,90,46,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:"Quicksand","Segoe UI",Verdana,sans-serif; color:var(--ink); background:var(--cream); line-height:1.65; }
h1,h2,h3,h4 { font-family:"Baloo 2","Quicksand",sans-serif; color:var(--green-dark); margin-top:0; line-height:1.2; }
h1 { font-size:clamp(2rem,4vw,2.9rem); }
h2 { font-size:clamp(1.5rem,3vw,2.1rem); }
h3 { font-size:1.25rem; }
a { color:var(--green-dark); text-decoration:none; }
a:hover { text-decoration:underline; }
/* height:auto est indispensable : les <img> qui portent des attributs width/height
   (comme la photo de la structure, 1200x737) gardent sinon leur hauteur d'attribut
   pendant que max-width reduit la largeur — l'image est alors ecrasee. */
img { max-width:100%; height:auto; display:block; }
.container { width:100%; max-width:1120px; margin:0 auto; padding:0 24px; }
.frog-icon { width:100%; height:100%; display:block; }
.topbar { background:var(--green-dark); color:#fff; font-size:.85rem; }
.topbar .container { display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:flex-end; padding:6px 24px; }
.topbar a { color:#fff; }
header.site-header { background:var(--cream); position:sticky; top:0; z-index:50; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand { display:flex; align-items:center; gap:14px; }
.brand .logo-box { width:52px; height:66px; flex:none; }
.brand-text .name { font-family:"Baloo 2",sans-serif; font-size:1.3rem; color:var(--green-dark); font-weight:700; line-height:1.1; }
.brand-text .tagline { font-size:.82rem; color:var(--ink-soft); }
.tagline-mobile { display:none; }
nav.main-nav ul { list-style:none; display:flex; gap:6px; margin:0; padding:0; }
nav.main-nav a { font-family:inherit; font-size:1rem; background:none; border:none; cursor:pointer; display:inline-block; padding:10px 18px; border-radius:999px; color:var(--green-dark); font-weight:600; transition:.2s; }
nav.main-nav a:hover, nav.main-nav a.active { background:var(--green); color:#fff; }
.hero { background:linear-gradient(160deg,var(--green-light) 0%,var(--cream) 55%); padding:56px 0 70px; }
.hero .container { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero-badge { display:inline-block; background:#fff; color:var(--green-dark); border:1px solid var(--green); padding:6px 16px; border-radius:999px; font-size:.85rem; font-weight:700; margin-bottom:16px; }
.hero p.lead { font-size:1.1rem; color:var(--ink-soft); max-width:46ch; }
.hero-cta { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.btn { display:inline-block; padding:13px 26px; border-radius:999px; font-weight:700; font-family:inherit; border:2px solid var(--green); cursor:pointer; font-size:.95rem; background:none; }
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-dark); border-color:var(--green-dark); }
.btn-outline { background:transparent; color:var(--green-dark); }
.btn-outline:hover { background:var(--green-light); }
.hero-visual { display:flex; justify-content:center; align-items:center; }
.hero-visual .logo-box { width:270px; height:340px; filter:drop-shadow(0 18px 26px rgba(39,90,46,.22)); }
section { padding:64px 0; }
section.alt { background:#fff; }
.section-head { text-align:center; max-width:680px; margin:0 auto 40px; }
.section-head .kicker { text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; color:var(--green); }
.section-head p { color:var(--ink-soft); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.card { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-soft); border:1px solid rgba(58,134,66,.08); }
.card .icon { width:52px; height:52px; border-radius:14px; background:var(--green-light); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:14px; }
.photo-frame { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff; }
.info-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.info-item { background:#fff; border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow-soft); }
.info-item .icon { font-size:1.8rem; margin-bottom:8px; }
.info-item .label { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.info-item .value { font-weight:700; color:var(--green-dark); }
.values-list { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.value-item { display:flex; gap:14px; align-items:flex-start; background:var(--green-light); padding:18px 20px; border-radius:14px; }
.value-item .dot { flex:none; width:34px; height:34px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.banner { background:var(--green-dark); color:#fff; border-radius:var(--radius); padding:42px; text-align:center; }
.banner h2 { color:#fff; }
.banner p { color:rgba(255,255,255,.85); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.contact-card { background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-soft); border-top:5px solid var(--green); }
.contact-card.lilac { border-top-color:var(--lilac); }
.contact-card .role { display:inline-block; background:var(--green-light); color:var(--green-dark); padding:3px 12px; border-radius:999px; font-size:.78rem; font-weight:700; margin-bottom:12px; }
.contact-line { display:flex; align-items:center; gap:10px; margin:10px 0; font-weight:600; }
.map-embed { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:none; width:100%; height:340px; display:block; background:var(--green-light); }
.map-note { font-size:.85rem; color:var(--ink-soft); margin-top:10px; }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:30px 0 10px; }
.stat { text-align:center; background:var(--green-light); border-radius:14px; padding:18px 10px; }
.stat .num { font-family:"Baloo 2",sans-serif; font-size:1.7rem; color:var(--green-dark); font-weight:700; }
.stat .lab { font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.school-card { display:flex; gap:18px; background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft); margin-bottom:18px; }
.school-card .badge { flex:none; width:54px; height:54px; border-radius:14px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.note-box { background:var(--cream-dark); border-left:5px solid var(--lilac); border-radius:10px; padding:18px 22px; font-size:.95rem; color:var(--ink-soft); }
footer.site-footer { background:var(--green-dark); color:rgba(255,255,255,.9); padding:50px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; margin-bottom:30px; }
.footer-grid h4 { color:#fff; margin-bottom:14px; }
footer.site-footer a { color:rgba(255,255,255,.85); }
.footer-brand { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
/* pastille claire : sans elle, le bonnet vert du logo se confond avec le fond du pied de page */
.footer-brand .logo-box { width:46px; height:58px; flex:none; background:#fbf7ef;
  border-radius:12px; padding:4px; display:block; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:.82rem; text-align:center; color:rgba(255,255,255,.6); }
footer.site-footer ul { list-style:none; padding:0; margin:0; }
footer.site-footer li { margin-bottom:8px; }
.carousel { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.carousel-track { position:relative; width:100%; aspect-ratio:16/8; background:var(--green-light); }
.carousel-slide { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.carousel-slide.active { opacity:1; pointer-events:auto; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; }
.carousel-caption { position:absolute; left:0; right:0; bottom:0; padding:18px 22px; background:linear-gradient(to top, rgba(20,30,15,.82), rgba(20,30,15,0)); color:#fff; font-size:.95rem; }
.carousel-caption .tag { display:inline-block; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; margin-bottom:6px; letter-spacing:.02em; }
.tag-real { background:var(--green); color:#fff; }
.tag-placeholder { background:var(--lilac); color:#fff; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); border:none; width:42px; height:42px; border-radius:50%; font-size:1rem; cursor:pointer; color:var(--green-dark); box-shadow:var(--shadow-soft); }
.carousel-btn.prev { left:16px; } .carousel-btn.next { right:16px; }
.carousel-btn:hover { background:#fff; }
.carousel-dots { position:absolute; bottom:14px; right:20px; display:flex; gap:8px; }
.dot { width:10px; height:10px; border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.35); cursor:pointer; padding:0; }
.dot.active { background:#fff; }
.nw { white-space:nowrap; }


/* ---------- Carrousel photo : glisse au doigt, fonctionne SANS JavaScript ---------- */
.gallery { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#22331e; }
.gallery-track {
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.gallery-item {
  position:relative; flex:0 0 100%; scroll-snap-align:center; margin:0; min-width:0;
}
.gallery-item img { width:100%; height:clamp(240px, 52vw, 460px); object-fit:cover; display:block; }
.gallery-item figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px;
  background:linear-gradient(to top, rgba(20,30,15,.85), rgba(20,30,15,0));
  color:#fff; font-size:.95rem; font-weight:600;
}
/* barre de defilement masquee : les fleches servent de repere */
.gallery-track { scrollbar-width:none; -ms-overflow-style:none; }
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-hint { text-align:center; font-size:.85rem; color:var(--ink-soft); margin:12px 0 0; }
.gallery-btn {
  position:absolute; top:50%; transform:translateY(-50%); display:none;
  background:rgba(255,255,255,.9); border:none; width:44px; height:44px; border-radius:50%;
  font-size:1.05rem; cursor:pointer; color:var(--green-dark); box-shadow:var(--shadow-soft); z-index:2;
}
.gallery-btn:hover { background:#fff; }
.gallery-btn.prev { left:12px; } .gallery-btn.next { right:12px; }
.gallery-dots { position:absolute; bottom:14px; right:18px; display:none; gap:8px; z-index:2; }
.gallery-dots .dot { width:10px; height:10px; border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.35); cursor:pointer; padding:0; }
.gallery-dots .dot.active { background:#fff; }
/* ---------- Fleches du carrousel SANS JavaScript ----------
   Les ancres #mam-photo-N n'ont AUCUNE boite (display:none) : le navigateur n'a donc
   rien vers quoi faire defiler la page, ce qui evite tout saut vertical au clic.
   On decale la PREMIERE photo par une marge negative, ce qui pousse toutes les autres.
   Surtout pas un transform sur le rail : cela deplacerait aussi sa zone de decoupe
   (overflow:hidden) et la photo suivante sortirait de l'ecran. */
.gallery-nav { display:none; }
.slide-anchor { display:none; }
html:not(.js-on) .gallery-track { overflow:hidden; scroll-snap-type:none; }
html:not(.js-on) .gallery-item:first-child { transition:margin-left .35s ease; }
html:not(.js-on) #mam-photo-1:target ~ .gallery-track .gallery-item:first-child { margin-left:-100%; }
html:not(.js-on) #mam-photo-2:target ~ .gallery-track .gallery-item:first-child { margin-left:-200%; }
html:not(.js-on) #mam-photo-3:target ~ .gallery-track .gallery-item:first-child { margin-left:-300%; }
html:not(.js-on) #mam-photo-4:target ~ .gallery-track .gallery-item:first-child { margin-left:-400%; }
html:not(.js-on) .gallery-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--green-dark);
  font-size:1.5rem; line-height:1; font-weight:700; text-decoration:none;
  box-shadow:var(--shadow-soft);
}
html:not(.js-on) .gallery-nav:hover { background:#fff; text-decoration:none; }
html:not(.js-on) .gallery-nav.prev { left:12px; }
html:not(.js-on) .gallery-nav.next { right:12px; }

/* fleches et pastilles : confort ajoute uniquement si le JavaScript fonctionne */
.js-on .gallery-btn { display:flex; align-items:center; justify-content:center; }
.js-on .gallery-dots { display:flex; }
.js-on .js-on .gallery-hint { display:none; }

/* ---------- Agrandissement des photos, MOBILE uniquement, 100% CSS ----------
   Principe : PAS de position:fixed et PAS d'overlay a l'interieur du conteneur
   de defilement du carrousel (c'etait la cause du bug iOS de la version precedente).
   La vue agrandie est un bloc normal, place tout en haut du <body>, qui REMPLACE
   la page quand son ancre est ciblee. Aucun JavaScript requis. */
.zoom-anchor { display:none; }
.zoom-view { display:none; }
.zoom-link { display:block; }
/* sur grand ecran les photos ne sont pas cliquables : le rendu PC ne change pas */
@media (min-width:881px) { .zoom-link { pointer-events:none; } }
@media (max-width:880px) {
  .zoom-anchor:target ~ .skip-link,
  .zoom-anchor:target ~ header.site-header,
  .zoom-anchor:target ~ main,
  .zoom-anchor:target ~ footer.site-footer { display:none; }
  .zoom-anchor:target + .zoom-view {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; width:100%; margin:0; padding:12px;
    background:#0e1a0c; box-sizing:border-box; text-decoration:none;
  }
  .zoom-view img {
    max-width:100%; max-height:94vh; width:auto; height:auto;
    object-fit:contain; border-radius:10px; display:block;
  }
}

/* ---------- Carte Google ----------
   Elle se charge directement avec la page (choix du client : confort de lecture).
   Le bloc .map-removed n'apparait que si le visiteur refuse via le bandeau. */
.map-zone { position:relative; }
.map-removed {
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  width:100%; min-height:340px; display:none; align-items:center; justify-content:center;
  background:var(--green-light); border:1px dashed rgba(58,134,66,.45); padding:22px 18px;
}
.map-zone.refused .map-embed { display:none; }
.map-zone.refused .map-removed { display:flex; }
.map-consent-inner { text-align:center; max-width:34ch; }
.map-consent-pin { font-size:1.8rem; line-height:1; margin-bottom:6px; }
.map-consent-title { font-weight:700; color:var(--green-dark); margin:0 0 8px; }
.map-consent-text { font-size:.85rem; color:var(--ink-soft); margin:0 0 14px; }
.map-consent-btn { padding:10px 20px; font-size:.9rem; }
.map-consent-alt { font-size:.82rem; margin:12px 0 0; }

/* ---------- Bandeau de consentement ---------- */
.cookie-banner {
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:9000;
  background:#1E3A21; color:#fff; padding:16px 20px; box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.js-on .cookie-banner.show { display:block; }
.cookie-banner .cookie-inner {
  max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  justify-content:space-between;
}
.cookie-banner p { margin:0; font-size:.88rem; flex:1 1 320px; min-width:0; }
.cookie-banner a { color:#cfe6cf; text-decoration:underline; }
.cookie-actions { display:flex; gap:10px; flex-wrap:wrap; }
/* refuser doit etre aussi simple qu'accepter : memes dimensions, meme poids visuel (CNIL) */
.cookie-actions button {
  font-family:inherit; font-size:.88rem; font-weight:700; padding:10px 22px;
  border-radius:999px; cursor:pointer; border:2px solid #fff; min-width:132px;
}
.cookie-accept { background:#fff; color:var(--green-dark); }
.cookie-refuse { background:transparent; color:#fff; }
@media (max-width:620px) {
  /* bandeau compact : il ne doit pas manger la moitie de l'ecran */
  .cookie-banner { padding:12px 14px; }
  .cookie-banner .cookie-inner { flex-direction:column; align-items:stretch; gap:10px; }
  .cookie-banner p { font-size:.78rem; line-height:1.45; flex:0 0 auto; }
  .cookie-actions { justify-content:stretch; gap:8px; }
  .cookie-actions button { flex:1 1 0; min-width:0; padding:9px 12px; font-size:.84rem; }
}

/* ---------- Page mentions legales ---------- */
.legal-body { max-width:78ch; margin:0 auto; }
.legal-body h2 { font-size:1.25rem; margin:34px 0 10px; }
.legal-body h2:first-of-type { margin-top:0; }
.legal-body ul { padding-left:22px; }
.legal-body li { margin-bottom:7px; }
.legal-intro {
  background:var(--green-light); border-left:4px solid var(--green);
  border-radius:10px; padding:16px 20px; margin-bottom:30px;
}
.legal-intro p { margin:0; font-size:.92rem; }
.legal-note { font-size:.85rem; color:var(--ink-soft); font-style:italic; }
.a-completer {
  background:#fff3cd; border-bottom:2px solid #e0a800; padding:1px 5px;
  border-radius:4px; font-weight:600;
}
.legal-manage { margin-top:38px; padding-top:22px; border-top:1px solid rgba(58,134,66,.2); }
.legal-manage button {
  font-family:inherit; font-size:.9rem; font-weight:700; padding:10px 22px; border-radius:999px;
  border:2px solid var(--green); background:var(--green); color:#fff; cursor:pointer; display:none;
}
.js-on .legal-manage button { display:inline-block; }
.legal-manage .no-js-note { font-size:.85rem; color:var(--ink-soft); }
.js-on .legal-manage .no-js-note { display:none; }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:30px 0 10px; }
.stat { text-align:center; background:var(--green-light); border-radius:14px; padding:18px 10px; }
.stat .num { font-family:"Baloo 2",sans-serif; font-size:1.7rem; color:var(--green-dark); font-weight:700; }
.stat .lab { font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.school-card { display:flex; gap:18px; background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft); margin-bottom:18px; }
.school-card .badge { flex:none; width:54px; height:54px; border-radius:14px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.note-box { background:var(--cream-dark); border-left:5px solid var(--lilac); border-radius:10px; padding:18px 22px; font-size:.95rem; color:var(--ink-soft); }
footer.site-footer { background:var(--green-dark); color:rgba(255,255,255,.9); padding:50px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; margin-bottom:30px; }
.footer-grid h4 { color:#fff; margin-bottom:14px; }
footer.site-footer a { color:rgba(255,255,255,.85); }
.footer-brand { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:.82rem; text-align:center; color:rgba(255,255,255,.6); }
footer.site-footer ul { list-style:none; padding:0; margin:0; }
footer.site-footer li { margin-bottom:8px; }

.carousel-note { font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:16px; }
@media (max-width:700px) { .carousel-track { aspect-ratio:4/5; } }


@media (max-width:880px) {
}
@media (max-width:880px) {
  .hero .container { grid-template-columns:1fr; text-align:center; }
  .hero p.lead { margin-left:auto; margin-right:auto; }
  .hero-cta { justify-content:center; }
  /* mobile : on masque la grenouille sous le bouton "Decouvrir la MAM" */
  .hero-visual { display:none; }
  .grid-3, .grid-2 { grid-template-columns:1fr; }
  .info-strip { grid-template-columns:repeat(2,1fr); }
  .values-list { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; }
  nav.main-nav ul { gap:2px; justify-content:center; flex-wrap:wrap; }
  nav.main-nav a { padding:8px 10px; font-size:.85rem; }

  .nav-wrap { flex-wrap:wrap; row-gap:10px; }
  .brand { flex:1 1 100%; order:1; justify-content:center; }
  .brand-text { min-width:0; flex:0 1 auto; max-width:calc(100vw - 130px); }
  .brand-text .name { font-size:clamp(.8rem, 4.6vw, 1.1rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* specificite renforcee : « .brand-text .tagline { display:block } », plus bas
     dans le fichier, reactivait sinon cette phrase et la faisait passer a la ligne */
  .brand-text .tagline.tagline-desktop { display:none; }
  nav.main-nav { order:2; flex:1 1 100%; }
  .tagline-mobile { display:block; order:3; flex:1 1 100%; text-align:center; font-size:.78rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------- anti-débordement horizontal (iPhone) ---------- */
html, body { max-width:100%; overflow-x:hidden; }
/* overflow-x:hidden fait de html/body un conteneur de defilement, ce qui NEUTRALISE
   le position:sticky de l'en-tete. overflow-x:clip protege du debordement horizontal
   sans creer ce conteneur, donc l'en-tete redevient collant. Repli automatique sur
   hidden pour les navigateurs qui ne connaissent pas clip (Safari < 16). */
@supports (overflow: clip) {
  html, body { overflow-x:clip; }
}
.contact-grid > *, .grid-2 > *, .grid-3 > *, .info-strip > *, .values-list > * { min-width:0; }
.contact-card, .contact-line { min-width:0; }
.contact-line { flex-wrap:wrap; }
.contact-line a, .footer-grid a, .contact-card a { overflow-wrap:anywhere; word-break:break-word; }
footer.site-footer li { overflow-wrap:anywhere; }
@media (max-width:420px) {
  .container { padding:0 16px; }
  .info-item { padding:16px 8px; }
  .info-item .value { font-size:.85rem; }
  .info-item .label { font-size:.72rem; }
  .contact-card { padding:22px 18px; }
  .contact-line { font-size:.92rem; }
}

/* ---- ajouts version site ---- */
.skip-link { position:absolute; left:-9999px; top:0; background:var(--green-dark); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:300; }
.skip-link:focus { left:0; }
a.brand { text-decoration:none; color:inherit; }
a.brand:hover { text-decoration:none; }
/* le logo est un <span> sur le site : il lui faut display:block. Les dimensions,
   elles, sont definies plus haut et dans le media query — ne pas les repeter ici. */
.brand .logo-box { display:block; }
.brand .logo-box img { width:100%; height:100%; }
.brand-text { display:block; }
.brand-text .name, .brand-text .tagline { display:block; }
.hero-visual .logo-box { display:block; }
.logo-box img { width:100%; height:100%; object-fit:contain; display:block; }

.footer-brand .logo-box img { width:100%; height:100%; }
.hero-slim { padding-bottom:36px; }
.hero-slim .container { display:block; text-align:center; }
.hero-slim .lead { margin-left:auto; margin-right:auto; }
.center-note { text-align:center; color:var(--ink-soft); max-width:70ch; margin:20px auto 0; }
.btn-invert { margin-top:16px; border-color:#fff; background:#fff; color:var(--green-dark); }
.btn-invert:hover { background:var(--cream); }
.contact-line { margin:10px 0; }
:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
@media (max-width:880px) { .brand .logo-box { width:60px; height:76px; } }