/* Palette de marque de Larysa (document design-system fourni) — seule palette du site,
   depuis l'abandon de Vif et Ta version. --card-line (obwodka de la carte Activité,
   distincte de --mint) en vert plus affirmé que --mint, pour que la carte blanche ne se
   noie pas quand la section autour est déjà vert pâle (.sand). */
:root{
  --ground:#FAF7F6; --mint:#DFF1EE; --cream:#F3ECE7; --lilac:#EAF3E4; --card:#FFFFFF; --line:#E5D9E8;
  --card-line:#A9D8C4;
  --ink:#241B28; --ink-2:#3D2B35; --ink-3:#6B5B63;
  --teal:#3DA298; --teal-deep:#276A62; --teal-tint:#DFF1EE;
  --violet:#8D5D99; --violet-tint:#F0E9F1;
  --sun:#FFCB4D; --sun-deep:#E8A716;
  --on-teal:#FFFFFF; --press:2px;
  --shadow:0 2px 0 rgba(36,27,40,.04),0 16px 40px -18px rgba(61,162,152,.35);
  --r:22px;
  --display:"PT Serif",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
}

/* Bloc "Prochaines dates" (accueil) : fond --mint, repris du bloc "Par où commencer"
   supprimé. La bordure 1px de la carte Activité est maintenant le défaut partout
   (assets/event-card.css) — plus besoin de l'emprunter ici spécifiquement. */
.agenda-teaser{ background:var(--mint); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.4vw,4.3rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);font-weight:700}
h3{font-size:1.3rem}
p{margin:0}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:36em}
.eyebrow{display:inline-block;justify-self:start;font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-tint);padding:6px 12px;border-radius:999px}
.wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}

/* Bandeau "mode aperçu" (render_apercu_banner(), includes/site_functions.php) — visible
   uniquement pour un·e bénévole/admin connecté·e, jamais pour le public. Couleur violette
   (registre "admin" du site, cf. .step::before) plutôt que mint/sun pour bien se distancier
   du reste du contenu, pas sticky : au-dessus du header, défile avec la page. */
.apercu-banner{background:var(--violet-tint);border-bottom:2px solid var(--violet)}
.apercu-banner__inner{padding:9px 0;color:var(--violet);font-weight:700;font-size:.86rem;text-align:center}

/* header */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(12px);border-bottom:2px solid var(--mint)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;height:72px}
.bar .brand{margin-right:auto}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px;border-radius:50%;background:var(--card)}
.brand b{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.06em}
/* #nav (id), pas nav (balise) : un autre <nav> a existé ailleurs sur une page (ex. la
   navigation rapide de la page Activités) et se faisait cacher en mobile par la règle
   générique ci-dessous — ces règles ne doivent viser QUE la navigation principale du header. */
#nav{display:flex;gap:4px;align-items:center}
#nav a{padding:8px 10px;border-radius:999px;color:var(--ink-2);font-weight:500;font-size:.92rem;white-space:nowrap}
/* Capsule couleur footer (teal 42% + blanc) sur le lien survolé/actif — le header, lui, reste
   translucide-beige comme le reste du site, seule cette pastille porte la couleur. */
#nav a:hover{text-decoration:none;background:color-mix(in srgb,var(--teal) 42%,white);color:var(--teal-deep)}
#nav a[aria-current="page"]{color:var(--teal-deep);background:color-mix(in srgb,var(--teal) 42%,white)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:.98rem;border:1.5px solid transparent;cursor:pointer;font-family:var(--body);line-height:1.2;white-space:nowrap}
.btn:hover{text-decoration:none}
/* primary = jaune (--sun) : l'action qu'on veut voir cliquée (s'inscrire, écrire, envoyer...) —
   la couleur la plus vive de la palette, pour qu'elle saute aux yeux. ghost = vert/sarcelle
   (--teal) : action secondaire (en savoir plus, voir une page), plus posée. */
.btn-primary{background:var(--sun);color:var(--ink);border-color:var(--sun);box-shadow:0 var(--press) 0 var(--sun-deep)}
.btn-primary:hover{transform:translateY(1px);box-shadow:0 calc(var(--press) - 1px) 0 var(--sun-deep)}



.btn-ghost{background:var(--teal);color:var(--on-teal);border-color:var(--teal);box-shadow:0 var(--press) 0 var(--teal-deep)}
.btn-ghost:hover{transform:translateY(1px);box-shadow:0 calc(var(--press) - 1px) 0 var(--teal-deep)}
.btn-sm{padding:9px 16px;font-size:.9rem}
.lang{background:var(--ground);border:2px solid var(--mint);border-radius:999px;padding:7px 12px;font:inherit;font-weight:700;font-size:.85rem;color:var(--teal-deep);cursor:pointer}
.lang:hover{background:var(--mint)}
.menu-btn{display:none;background:var(--mint);border:1.5px solid var(--mint);font-weight:700;border-radius:999px;padding:8px 14px;font:inherit;color:var(--ink);cursor:pointer}
@media (max-width:900px){
  #nav{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;background:var(--ground);border-bottom:1px solid var(--line);padding:12px 24px 20px}
  #nav.open{display:flex}
  #nav a{padding:12px 10px;font-size:1.05rem}
  .menu-btn{display:block}
  .bar .btn{display:none}
}

/* pages */
.page{display:none}
.page.active{display:block}
section{padding:72px 0}
section.tight{padding:44px 0}
.sand{background:var(--mint)}
.violet{background:var(--lilac)}
.cream{background:var(--cream)}
.white{background:var(--card)}
.head{display:grid;gap:12px;max-width:44em;margin-bottom:40px}

/* hero */
.hero{padding:40px 0 48px}
.hero .wrap{background:var(--mint);border-radius:36px;padding:56px 56px 0;overflow:hidden}
@media (max-width:820px){.hero .wrap{padding:36px 24px 0;border-radius:28px}}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:end}
.hero-copy{display:grid;gap:22px;padding-bottom:56px;align-self:center}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
/* Boîte à proportions FIXES, la même sur toutes les pages (accueil/Collectivités/Devenir
   intervenant...) — l'image se contient dedans (object-fit:contain), quelle que soit sa propre
   forme. Avant, la boîte prenait la hauteur naturelle de l'image (juste width plafonné) : une
   illustration plus haute que large (ex. mascotte debout de face) donnait un hero bien plus
   grand que les autres pages. Avec une boîte fixe, le cercle jaune peut aussi redevenir un
   simple %, sans avoir besoin de suivre la forme de l'image à chaque fois. */
.hero-art{position:relative;display:flex;justify-content:center;width:min(100%,400px);aspect-ratio:5/6;margin:0 auto}
.hero-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.hero-art::before{content:"";position:absolute;width:88%;aspect-ratio:1;left:50%;bottom:-18%;transform:translateX(-50%);border-radius:50%;background:var(--sun);z-index:0}
@media (max-width:820px){.hero .grid{grid-template-columns:1fr}.hero-art{order:-1;width:min(70%,260px)}.hero-copy{padding-bottom:40px}}
/* Boutons du hero empilés pleine largeur sur mobile, comme .cta-card .actions ci-dessous — et
   white-space:normal (au lieu du nowrap par défaut de .btn) en filet de sécurité : sur un
   téléphone avec le texte agrandi (accessibilité) ou une traduction UK plus longue, un bouton
   à texte fixe en une seule ligne peut devenir plus large que l'écran et déborder, même en
   pleine largeur — le signalement de Larysa sur mobile Chrome pointait ce cas. */
@media (max-width:480px){
  .hero .actions{flex-direction:column}
  .hero .actions .btn{width:100%; justify-content:center; white-space:normal; text-align:center}
}
.sprout{display:inline-block;width:1em;height:1em;vertical-align:-.1em}

/* trust band */
.trust{padding:26px 0 0}
.trust .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--ink-2);font-size:.95rem}
.facts span{display:inline-flex;align-items:center;gap:8px}
.facts i{width:10px;height:10px;border-radius:50%;background:var(--sun);border:2px solid var(--teal);display:inline-block}
.logos{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.logos a{display:inline-flex;line-height:0}
.logos img{height:30px;width:auto;mix-blend-mode:multiply}

/* legal-doc (page RGPD) */
.legal-doc{max-width:52em;margin-top:8px}
.legal-doc h2{margin-top:40px;margin-bottom:12px;font-size:1.3rem}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{margin-top:22px;margin-bottom:6px;font-size:1.05rem;font-family:var(--display);color:var(--ink)}
.legal-doc p{color:var(--ink-2);margin-top:10px}
.legal-doc p b{color:var(--ink)}
.legal-doc ul{margin:10px 0 10px 1.2em;color:var(--ink-2)}
.legal-doc ul li{margin-top:4px}
.legal-doc a{color:var(--teal);text-decoration:underline}
.legal-table{width:100%;border-collapse:collapse;margin:14px 0 18px;border-radius:10px;overflow:hidden;border:2px solid var(--mint);font-size:.92rem}
.legal-table th{background:var(--mint);text-align:left;padding:10px 14px;font-family:var(--display);font-weight:700;color:var(--ink)}
.legal-table td{padding:10px 14px;border-top:1px solid var(--mint);color:var(--ink-2);vertical-align:top}
.legal-table tr:nth-child(even) td{background:color-mix(in srgb,var(--mint) 35%,transparent)}
@media (max-width:640px){
  .legal-table,.legal-table thead,.legal-table tbody,.legal-table th,.legal-table td,.legal-table tr{display:block}
  .legal-table thead{display:none}
  .legal-table tr{border-top:2px solid var(--mint);padding:10px 0}
  .legal-table tr:first-child{border-top:0}
  .legal-table td{padding:4px 0;border:0}
  .legal-table td:first-child{font-weight:700;color:var(--ink)}
}



/* doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.door{display:grid;gap:12px;padding:26px 26px 24px;border-radius:var(--r);background:var(--card);border:2px solid var(--mint);color:var(--ink);transition:transform .2s,box-shadow .2s}
.door:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal)}
.door .who{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);font-weight:700}
.door p{color:var(--ink-2)}
.door .go{color:var(--teal-deep);font-weight:600;margin-top:6px}
@media (max-width:820px){.doors{grid-template-columns:1fr}}

/* events : grille de mise en page seulement — le style de la carte elle-même vit dans
   assets/event-card.css, partagé avec l'admin. auto-fit (pas repeat(3,1fr) fixe) : avec
   moins de 3 cartes (ex. les activités d'un seul volontaire), la ou les colonnes vides se
   réduisent à 0 et les cartes existantes s'étirent pour remplir la ligne, au lieu de
   laisser un vide à droite. */
.events{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.events.three{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media (max-width:1000px){.events.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.events,.events.three{grid-template-columns:1fr}}

/* Mini-Actívité : variante compacte de la carte Activité (photo/habillage, plashka date,
   avatars des intervenant·e·s, titre) — sans description ni bouton. Sert aux aperçus
   (accueil) où plusieurs cartes tiennent sans allonger la page ; la carte complète reste
   utilisée sur Agenda/Activités. */
.events.compact .event-body p,
.events.compact .event-body .btn{display:none}

/* directions */
.dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.dirs{display:grid;gap:0}
.dir{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.dir:last-child{border-bottom:1px solid var(--line)}
.dir .ic{width:44px;height:44px;border-radius:14px;background:var(--sun);display:grid;place-items:center;color:var(--ink)}
.dir p{color:var(--ink-2);font-size:.98rem;margin-top:4px}
.dir h3 a{color:inherit;text-decoration:none}
.dir h3 a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.dir-art{display:flex;justify-content:center}
/* Hauteur pilote (pas la largeur) : une mascotte pleine longueur (ex. m-point, bien plus
   haute que large) a un ratio très différent des autres illustrations .dir-art — piloter
   par la largeur la faisait dépasser largement la hauteur du texte à côté. En fixant la
   hauteur et en laissant la largeur suivre le ratio de chaque image, toutes les
   illustrations .dir-art restent proches de la hauteur du bloc de texte voisin. */
.dir-art img,.dir-art .mascot{width:auto;height:300px;max-width:100%}
@media (max-width:820px){.dir-grid{grid-template-columns:1fr}.dir-art img,.dir-art .mascot{height:170px}}

/* Projets en développement (Collectivités) — deux grandes cartes horizontales plutôt qu'une
   grille de petites cartes (déjà beaucoup de grilles sur cette page). Cartes dans une section
   .sand : bordure --card-line (pas --mint) pour que le blanc ne se noie pas dans le fond mint,
   même logique que .cta-card. */
.projects-row{display:grid;gap:24px;margin-top:8px}
.project-card{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center;padding:32px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-line)}
.project-card--sans-art{grid-template-columns:1fr}
.project-card__art{aspect-ratio:1;border-radius:16px;background:var(--mint);display:grid;place-items:center;overflow:hidden}
.project-card__art img{width:100%;height:100%;object-fit:contain}
.project-card__body h3{margin:0 0 10px}
.project-card__body p{color:var(--ink-2)}
.project-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.project-card__tags span{font-family:var(--body);font-size:.82rem;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--mint);color:var(--teal-deep)}
.project-card__tags span.project-card__tag--status{background:var(--violet-tint);color:var(--violet);font-weight:700}
@media (max-width:700px){
  .project-card{grid-template-columns:1fr;padding:24px}
  .project-card__art{max-width:160px;margin:0 auto}
}

/* stats strip (sous le Hero) : détachée du Hero (fond blanc + fine bordure verte, comme
   .cta-card), plus le même fond --mint qui la fondait dans le Hero juste au-dessus. */
.stats-strip{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:28px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px 32px}
.stats-strip .stat b{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--ink)}
.stats-strip .stat--place b{text-transform:uppercase;font-size:1rem;letter-spacing:.01em;color:var(--teal)}
.stats-strip .stat:nth-child(2) b{color:var(--sun-deep)}
.stats-strip .stat:nth-child(3) b{color:var(--violet)}
.stats-strip .stat:nth-child(4) b{color:var(--teal-deep)}
.stats-strip .stat p{margin-top:8px;color:var(--ink-2);font-size:.92rem;line-height:1.4}
.stats-strip .stat b a{color:inherit;text-decoration:none}
.stats-strip .stat b a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.stats-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.stats-strip{grid-template-columns:1fr}}

/* story */
.story{display:grid;grid-template-columns:160px 1fr;gap:36px;align-items:center}
.story img{width:160px;height:160px;border-radius:50%;background:var(--card);object-fit:cover}
.story p{color:var(--ink-2);max-width:40em}
@media (max-width:640px){.story{grid-template-columns:1fr;justify-items:start}}

/* team — carte cliquable en entier (photo + nom). Catégories déplacées sous le nom, en
   pilules fines au-dessus du mini-descriptif — même style que les liens actifs de nav
   (poids normal, pas de majuscules ni de gras — pas un badge). */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.person{display:grid;gap:10px;color:inherit;text-decoration:none}
.person:hover{text-decoration:none}
.person-cover{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--mint)}
.person-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.person-tags{display:flex;flex-wrap:wrap;gap:6px}
.person b{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--teal-deep)}
.person b .arrow{transition:transform .15s}
.person:hover b .arrow{transform:translateX(3px)}
.person span{color:var(--ink-2);font-size:.92rem;line-height:1.4}
/* Spécificité (.person-tags span) = (.person span) : placée après pour gagner le
   conflit de couleur, sinon .person span (générique, sert la description) l'emporte. */
.person-tags span{font-family:var(--body);font-size:.82rem;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--mint);color:var(--teal-deep)}
.faces{display:flex;align-items:center}
.faces img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--ground);margin-left:-12px;background:var(--mint)}
.faces img:first-child{margin-left:0}
.team-preview{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:space-between}
@media (max-width:820px){.team{grid-template-columns:repeat(2,1fr)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{display:grid;gap:10px;padding:24px;border-radius:var(--r);background:var(--card);border:2px solid var(--mint);position:relative}
.step::before{counter-increment:step;content:counter(step);width:40px;height:40px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.1rem}
.step p{color:var(--ink-2);font-size:.97rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
/* Variante 6 cartes (3 colonnes x 2 rangs) — classe plutôt que style inline, pour que les
   media queries ci-dessus puissent continuer à l'emporter sur mobile (un style inline sur
   l'élément aurait une spécificité plus forte que .steps ci-dessus et resterait figé à 3
   colonnes même en dessous de 900px). */
.steps.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.steps.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps.cols-3{grid-template-columns:1fr}}

/* Illustration "escalier" du Parcours MAVKA (au-dessus des cartes .step) — image fournie par
   Larysa (reprise de l'ancienne page WordPress), pas un habillage recréé en CSS. */
.parcours-visuel{width:100%;border-radius:24px}
.parcours-visuel__note{text-align:center;font-style:italic;color:var(--ink-3);margin:18px auto 0;font-size:.95rem;max-width:32em}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.list{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.list li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--ink-2)}
.list li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--teal-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat;margin-top:2px}
details{border-top:1px solid var(--line);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;color:var(--teal-deep);flex:none;width:28px;text-align:center}
details[open] summary::after{content:"−"}
details p{color:var(--ink-2);margin-top:10px;max-width:40em}

/* Carte CTA "accueil" (fin de page) : fond beige standard de la section, carte blanche à
   bordure fine — même --card-line que la carte Activité — sans illustration. */
.cta-card{max-width:720px;margin:0 auto;padding:40px;border-radius:var(--r);background:var(--card);border:1px solid var(--card-line);display:grid;gap:14px}
.cta-card h3{font-size:1.5rem}
.cta-card p{color:var(--ink-2)}
.cta-card .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
@media (max-width:700px){
  .cta-card{padding:28px}
  /* Empilés sur mobile, les deux boutons avaient des largeurs très inégales (un texte
     bien plus long que l'autre) — pleine largeur et centrés, ça lit comme une paire
     plutôt que comme un bouton principal et un fragment. */
  .cta-card .actions{flex-direction:column}
  .cta-card .actions .btn{width:100%; justify-content:center; white-space:normal; text-align:center}
}

/* photos */
figure{margin:0}
.photos{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
.photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--mint)}
.photo>img{width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.92);border-radius:12px;padding:8px 10px;font-size:.82rem;line-height:1.3;color:var(--ink-2)}
.photo figcaption b{display:block;color:var(--ink);font-size:.8rem}
.photos .photo:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:820px){.photos{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.photos .photo:first-child{grid-column:span 2;grid-row:span 1;height:220px}}
/* how-to */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:how}
.how{display:grid;gap:10px;padding:26px;border-radius:var(--r);background:var(--card);border:2px solid var(--mint)}
.how::before{counter-increment:how;content:counter(how);width:44px;height:44px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.25rem}
.how p{color:var(--ink-2);font-size:.98rem}
@media (max-width:820px){.howto{grid-template-columns:1fr}}
/* practical */
/* tabs-pill : capsule de sélection réutilisable (page volontaire — onglets Présentation/
   Parcours/Ma vision). Composant partagé, même s'il n'est utilisé qu'à un seul endroit
   aujourd'hui, pour rester cohérent si un futur usage réapparaît. */
.tabs-pill{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);margin-bottom:28px}
.tabs-pill button{border:0;background:transparent;border-radius:999px;padding:10px 22px;font:inherit;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink-2);cursor:pointer}
.tabs-pill button[aria-selected="true"]{background:var(--teal);color:#fff}

/* activites-jump : navigation rapide vers chaque domaine (page Activités) — de simples liens
   d'ancre, pas des onglets : toutes les sections restent affichées en dessous, on saute juste
   à l'une d'elles. Collée sous le header principal (top = sa hauteur, .bar height:72px) pour
   rester joignable tout au long d'une page qui peut être longue une fois pleine d'activités. */
/* Fond opaque, pas de backdrop-filter : deux position:sticky superposées avec blur chacune
   provoquent un bug de rendu connu sur mobile (Safari iOS surtout) — la barre se retrouve à
   moitié ou totalement recouverte par le header pendant le scroll. Un fond uni règle ça. */
.activites-jump{position:sticky; top:72px; z-index:15; background:var(--ground); border-bottom:1px solid var(--card-line); padding:14px 0}
.activites-jump .wrap{display:flex; gap:8px; flex-wrap:wrap}
.activites-jump a{display:inline-flex; align-items:center; padding:8px 18px; border-radius:999px; background:var(--card); border:1px solid var(--card-line); font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--ink-2); text-decoration:none; white-space:nowrap}
.activites-jump a:hover{background:var(--mint); color:var(--teal-deep); text-decoration:none}
/* Espace pour le header (72px) + cette barre elle-même (~66px) : sans ça, sauter à une section
   (clic sur la capsule, ou lien direct depuis "Nos directions" sur l'accueil) la fait démarrer
   cachée sous la barre collée. */
#activites-culture,#activites-education,#activites-bienetre,#activites-evenementiel,#activites-initiatives{scroll-margin-top:150px}
/* docs */
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0;margin:0;list-style:none}
.docs li{border-radius:10px;background:var(--card);border:2px solid var(--mint);overflow:hidden}
.docs li>a,.docs li.doc-soon{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:.97rem;color:var(--ink)}
.docs li>a{transition:background-color .15s ease}
.docs li>a:hover,.docs li>a:focus-visible{background:var(--mint)}
.docs .doc-ic{flex:none;width:20px;height:20px;color:var(--teal)}
.docs li>a span:not(.st),.docs li.doc-soon span:not(.st){flex:1}
.docs li.doc-soon{opacity:.72}
.docs li.doc-soon .doc-ic{color:var(--ink-3)}
.docs .st{flex:none;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--teal);color:#fff;white-space:nowrap}
.docs .st.soon{background:var(--sun);color:var(--ink)}
@media (max-width:640px){.docs{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pillar{display:grid;gap:8px;padding:22px;border-radius:var(--r);background:var(--card);border:2px solid var(--mint)}
.pillar p{color:var(--ink-2);font-size:.96rem}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.contact-info{display:grid;gap:22px}
.contact-info .mascot.tall{height:180px;width:auto;justify-self:start}
.contact-info dl{display:grid;gap:14px;margin:0}
.contact-info dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.contact-info dd{margin:2px 0 0;font-size:1.1rem}
form{display:grid;gap:14px;padding:28px;border-radius:var(--r);background:var(--card);border:2px solid var(--mint)}
label{display:grid;gap:6px;font-size:.9rem;font-weight:600}
input,textarea,select{font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--mint);background:var(--ground);color:var(--ink);width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal)}
textarea{min-height:130px;resize:vertical}
.consent{display:flex;gap:10px;align-items:start;font-weight:400;font-size:.88rem;color:var(--ink-2)}
.consent input{width:auto;margin-top:4px}
.note{font-size:.85rem;color:var(--ink-3)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* footer */
/* Même vert que le bandeau date de la carte Activité (assets/event-card.css) — mix 42%
   avec du blanc, plus affirmé que --mint. */
footer{background:color-mix(in srgb, var(--teal) 42%, white);padding:48px 0 36px;color:var(--ink-2);font-size:.92rem;margin-top:24px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;align-items:start}
footer .cols{display:flex;gap:40px;flex-wrap:wrap}
footer .col{display:grid;gap:8px}
footer .col b{color:var(--ink);font-family:var(--display)}
footer a{color:var(--ink-2)}
.social{display:flex;gap:10px}
.social a{width:36px;height:36px;border-radius:50%;border:2px solid var(--mint);display:grid;place-items:center;color:var(--ink-2)}
.social a:hover{border-color:var(--teal);color:var(--teal-deep);text-decoration:none}
.legal{margin-top:28px;padding-top:20px;border-top:2px solid rgba(31,174,147,.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.85rem;color:var(--ink-3)}

@media (max-width:900px){.bar{gap:10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}