/* Portail Fondation — socle commun crème/forêt, accents tricolores contrôlés (11.1). */
:root{
  --f-jaune:#ffcd02;--f-bleu:#213a76;--f-rouge:#ca1431;
  --f-cream:#fbf8f1;--f-cream-2:#f7f2e8;--f-border:#e3d7b6;
}
body.fondation{background:var(--f-cream);color:var(--forest);display:block;min-height:auto}
/* En-tête collant : en mode application et en paysage sur téléphone à encoche,
   les marges système ne sont pas nulles. Sans elles, la barre d'état et
   l'encoche passent par-dessus les passerelles — les trois destinations du
   §6.4 deviennent intouchables. max() garde la valeur de confort partout
   ailleurs. */
.f-entete{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem clamp(1rem,3vw,2rem);background:rgba(251,248,241,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--f-border);
  padding-top:max(.6rem,env(safe-area-inset-top));
  padding-left:max(clamp(1rem,3vw,2rem),env(safe-area-inset-left));
  padding-right:max(clamp(1rem,3vw,2rem),env(safe-area-inset-right));
  /* Sans le retour à la ligne, le sélecteur de langue sortait de l'écran à
     320 px : la pastille ES commençait exactement au bord droit, hors du
     viewport, donc intouchable. Le §12 exige une interface utilisable dès
     320 px, et le §6.5 que le choix de langue reste accessible partout. */
  flex-wrap:wrap;row-gap:.35rem;
}
/* Sur téléphone, l'en-tête tient en DEUX rangées et non trois : la marque et le
   choix de langue partagent la première, les trois destinations du §6.4
   occupent la seconde. Empilé en trois rangées, cet en-tête collant mesurait
   167 px — près du tiers d'un écran de 568 px, et autant de moins pour le
   contenu à chaque défilement. */
@media(max-width:30rem){
  .f-langues{order:1}
  .surfaces{order:2;width:100%}
}
/* Le lettrage de la marque mère héritait du soulignement par défaut du
   navigateur sur toute la surface Fondation : un lockup ne se souligne pas. */
.f-entete .marque{color:var(--forest);text-decoration:none;gap:.5rem}
.f-entete .marque img{filter:none}
.f-entete .marque span{text-shadow:none}
.surfaces{display:flex;gap:.15rem;flex-wrap:wrap}
.surfaces a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border-radius:var(--pill);
  color:var(--forest-700);text-decoration:none;font-size:.82rem;font-weight:600;letter-spacing:.04em;
}
.surfaces a[aria-current]{background:var(--forest);color:var(--cream)}
.surfaces a:hover{background:var(--f-cream-2)}
.surfaces a:focus-visible,.f-langues a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.f-langues{display:flex;gap:.1rem}
/* 44 px et non 42 : le §12 et le critère G.1 fixent le plancher tactile à
   44 × 44 px. L'écart passait inaperçu à la souris ; au doigt, sur le sélecteur
   de langue, il ne passe pas. */
.f-langues a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--pill);color:var(--forest-700);text-decoration:none;font-size:.78rem;font-weight:600}
.f-langues a[aria-current]{background:var(--forest);color:var(--cream)}

.f-hero{position:relative;min-height:56svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.f-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:-2}
.f-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(14,26,13,.82),rgba(14,26,13,.28) 45%,rgba(14,26,13,.05))}
.f-hero-texte{width:100%;max-width:72rem;margin:0 auto;padding:2rem clamp(1rem,4vw,2.5rem) 2.4rem;color:var(--cream)}
.f-hero .kicker{font-size:.74rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.f-hero h1{margin-top:.5rem;font-size:clamp(2rem,5vw,3.4rem);font-weight:650;letter-spacing:.01em;text-wrap:balance}
.f-hero p{margin-top:.9rem;max-width:56ch;font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.65;color:rgba(251,248,241,.92)}

.f-section{max-width:72rem;margin:0 auto;padding:clamp(2.2rem,6vw,4rem) clamp(1rem,4vw,2.5rem) 0;
  padding-left:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-left));
  padding-right:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-right))}
.f-section:last-of-type{padding-bottom:clamp(2.2rem,6vw,4rem)}
.f-section h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:650;letter-spacing:.01em}
/* Filet tricolore contrôlé — la signature Fondation, sous les titres de section seulement. */
.f-section h2::after{content:"";display:block;width:5.5rem;height:3px;margin-top:.55rem;border-radius:2px;
  background:linear-gradient(90deg,var(--f-jaune) 0 33%,var(--f-bleu) 33% 66%,var(--f-rouge) 66%)}
.f-section>p.intro{margin-top:1rem;max-width:64ch;line-height:1.7;color:var(--forest-700)}

.f-cartes{display:grid;gap:1rem;margin-top:1.4rem}
.f-cartes.deux{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.f-cartes.piliers{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.f-carte{background:#fffdf7;border:1px solid var(--f-border);border-radius:1.4rem;padding:1.4rem;
  box-shadow:0 16px 34px -26px rgba(38,55,37,.4)}
.f-carte h3{font-size:1.08rem;font-weight:650}
.f-carte .forme{margin-top:.3rem;font-size:.8rem;color:var(--forest-700)}
.f-carte p{margin-top:.65rem;font-size:.92rem;line-height:1.6;color:var(--forest-700)}
.f-carte .ref{margin-top:.8rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--forest)}
.f-carte .resp{margin-top:.7rem;font-size:.76rem;color:var(--forest-700);border-top:1px dashed var(--f-border);padding-top:.6rem}
.f-note{margin-top:1rem;padding:1rem 1.2rem;border-left:3px solid var(--gold);background:var(--f-cream-2);
  border-radius:0 .9rem .9rem 0;font-size:.88rem;line-height:1.6;color:var(--forest-700)}

.f-etat{margin-top:1.2rem;padding:1.2rem 1.4rem;border:1.5px dashed var(--f-border);border-radius:1.2rem;
  background:var(--f-cream-2);font-size:.92rem;line-height:1.65;color:var(--forest-700)}
.f-etat b{color:var(--forest)}
.f-maj{margin-top:.7rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-700)}

.f-cta{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;margin-top:1.1rem;padding:.7rem 1.5rem;
  border-radius:var(--pill);background:var(--forest);color:var(--cream);text-decoration:none;font-weight:600;font-size:.92rem}
.f-cta:hover{background:var(--forest-700)}
.f-cta:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Cibles tactiles. Un lien de carte ou de rappel n'est pas un lien « au fil du
   texte » : il se vise au pouce, souvent en marchant. On lui donne la hauteur
   de 44 px du §12 par la zone de touche, sans grossir la typographie — la
   ligne de base du texte ne bouge pas. */
.f-lien{color:var(--f-bleu);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}
.f-lien:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.f-passerelle{margin-top:clamp(2.2rem,6vw,4rem);background:var(--forest);color:var(--cream)}
.f-passerelle-int{max-width:72rem;margin:0 auto;padding:2.2rem clamp(1rem,4vw,2.5rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.f-passerelle p{font-size:.95rem}
.f-passerelle .f-cta{background:var(--gold);color:var(--ink)}
.f-passerelle .f-cta:hover{background:#f2bb63}

.f-footer{background:#1d2a1c;color:rgba(251,248,241,.75);font-size:.82rem}
/* Le pied porte les passerelles de retour : en mode application, la barre
   d'accueil du téléphone mangerait la dernière ligne de liens. */
.f-footer-int{max-width:72rem;margin:0 auto;padding:1.6rem clamp(1rem,4vw,2.5rem);
  padding-bottom:max(1.6rem,calc(env(safe-area-inset-bottom) + .8rem));
  padding-left:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-left));
  padding-right:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-right));
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between}
.f-footer a{color:var(--cream);text-decoration:underline;text-underline-offset:3px;padding:.5rem 0;
  display:inline-flex;align-items:center;min-height:44px}
.f-footer a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.f-entete{backdrop-filter:none}}

/* Actualités migrées */
.a-carte img{width:100%;height:11rem;object-fit:cover;border-radius:.9rem;display:block}
.a-carte h3{margin-top:.8rem}
.a-titre{color:var(--forest);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.a-titre:hover{color:var(--f-bleu);text-decoration:underline;text-underline-offset:3px}
.a-titre:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.a-date{margin-top:.3rem;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-700)}
.a-article{max-width:46rem}
.a-article h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:650;margin-top:.6rem;text-wrap:balance}
.a-fil{font-size:.85rem}
.a-hero,.a-video{width:100%;height:auto;border-radius:1.2rem;margin-top:1.4rem;display:block;background:#1d2a1c}
.a-corps{margin-top:1.2rem;line-height:1.75;color:var(--forest-700)}
.a-corps p{margin-top:1rem}
.a-source{margin-top:1.6rem;font-size:.76rem;color:var(--forest-700);border-top:1px dashed var(--f-border);padding-top:.8rem}
.a-badge{display:inline-block;padding:.1rem .6rem;border-radius:var(--pill);border:1px solid var(--f-bleu);color:var(--f-bleu);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Pages utilitaires (contact, mentions) */
.m-titre{margin-top:2rem;font-size:1.15rem;font-weight:650}
.m-liste{margin-top:.8rem;padding-left:1.2rem;line-height:1.7;color:var(--forest-700)}
.m-liste li{margin-top:.5rem}

/* Pages piliers */
.p-pilier{max-width:56rem}
.p-tagline{margin-top:1.6rem;font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:650;color:var(--forest)}
.p-tagline::after{content:"";display:block;width:5.5rem;height:3px;margin-top:.55rem;border-radius:2px;
  background:linear-gradient(90deg,var(--f-jaune) 0 33%,var(--f-bleu) 33% 66%,var(--f-rouge) 66%)}
.p-intro{margin-top:1rem;line-height:1.75;color:var(--forest-700)}
.p-itw{margin:1.6rem 0 0}
.p-itw video{width:100%;height:auto;border-radius:1.2rem;display:block;background:#1d2a1c}
.p-itw figcaption{margin-top:.5rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-700)}
.p-mirroir{display:grid;gap:1.4rem;margin-top:2.4rem;align-items:center;grid-template-columns:1fr}
@media(min-width:760px){
  .p-mirroir{grid-template-columns:1.15fr 1fr}
  .p-mirroir-inverse{grid-template-columns:1fr 1.15fr}
  .p-mirroir-inverse .p-mirroir-texte{order:2}
}
.p-mirroir img{width:100%;height:auto;border-radius:1.2rem;display:block}
.p-mirroir h2{font-size:1.3rem;font-weight:650;margin-top:.3rem}
.p-mirroir p{margin-top:.7rem;line-height:1.7;color:var(--forest-700)}
.p-mirroir .kicker{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--f-bleu)}
.p-temoignage{display:flex;gap:1.2rem;align-items:flex-start;margin-top:2.6rem;
  background:#fffdf7;border:1px solid var(--f-border);border-radius:1.4rem;padding:1.4rem}
.p-temoignage img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.p-temoignage blockquote p{font-style:italic;line-height:1.7;color:var(--forest-700)}
.p-temoignage footer{margin-top:.7rem;font-size:.85rem;color:var(--forest)}
.p-finale{margin-top:2.6rem;text-align:center}
.p-finale h2{font-size:1.4rem;font-weight:650}
.p-finale>p{margin-top:.6rem;color:var(--forest-700)}
.p-finale video{width:100%;height:auto;border-radius:1.2rem;margin-top:1.2rem;background:#1d2a1c}
.p-soutien{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center}