:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --muted:#6b6b6b;
  --viridian:#5a83a2;   /* accent = même bleu que le menu (ex-orange) — ajuste ici pour toute la teinte du site */
  --blue:#5a83a2;       /* bleu cassé (hover menu + jours semaine) — bleu/blanc pas flashy */
  --blue-soft:#7ea6c4;
  --gutter:2.25rem;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Mactis','Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ===== LOADER (préchargement) — fond sombre + dégradé orange animé + logo Kultur ===== */
.loader{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
  transition:opacity .9s ease;
}
.loader.loaded{ opacity:0; pointer-events:none; }
/* spinner gooey (4 points + carré central qui fusionnent) */
.loader-spin{
  width: 80px;
  aspect-ratio: 1;
  border: 10px solid #0000;
  box-sizing: border-box;
  background:
    radial-gradient(farthest-side,#fff 98%,#0000) 0    0/20px 20px,
    radial-gradient(farthest-side,#fff 98%,#0000) 100% 0/20px 20px,
    radial-gradient(farthest-side,#fff 98%,#0000) 100% 100%/20px 20px,
    radial-gradient(farthest-side,#fff 98%,#0000) 0 100%/20px 20px,
    linear-gradient(#fff 0 0) 50%/40px 40px,
    #000;
  background-repeat:no-repeat;
  filter: blur(4px) contrast(10);
  animation: l12 0.8s infinite;
}
@keyframes l12 {
  100%  {background-position:100% 0,100% 100%,0 100%,0 0,center}
}

/* ===== NAV ===== */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:1.4rem var(--gutter);
}
.nav-brand{
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.02em;
}

/* ===== MENU TOGGLE + OVERLAY (Navigation Menus #7) ===== */
.menu-toggle{
  position:relative;
  z-index:1100;
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--ink);
  background:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .35s ease;
}
.menu-toggle svg{
  position:absolute;
  width:16px;
  height:16px;
  stroke:var(--ink);
  fill:none;
  stroke-width:1.6;
  transition:stroke .35s ease;
}
/* Le bouton (et le nom) s'adaptent au fond de la section survolée pour rester visibles.
   .on-dark = quand le bouton est au-dessus d'une section à fond sombre ;
   .force-dark = quand le menu plein écran (fond sombre) est ouvert. */
.nav.on-dark .menu-toggle,
.nav.force-dark .menu-toggle{ border-color:var(--paper); }
.nav.on-dark .menu-toggle svg,
.nav.force-dark .menu-toggle svg{ stroke:var(--paper); }
.nav.on-dark .nav-brand,
.nav.force-dark .nav-brand{ color:var(--paper); }
.nav-brand{ transition:color .35s ease; }
/* Croix de fermeture visible sur l'overlay sombre */
#iconClose{ stroke:var(--paper); }
.menu-overlay{
  position:fixed;
  inset:0;
  background:var(--ink);
  color:var(--paper);
  z-index:1000;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2.5rem;
  padding:12vh 6vw 8vh;
  clip-path:circle(0% at calc(100% - 3.2rem) 2.6rem);
  transition:clip-path .7s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
}
.menu-overlay.open{
  clip-path:circle(150% at calc(100% - 3.2rem) 2.6rem);
  pointer-events:auto;
}
.menu-primary{
  display:flex;
  flex-direction:column;
  width:100%;
  border-top:1px solid rgba(255,255,255,.14);
}
/* ===== Item de menu — hover "3D Animation #13" : barre viridian qui s'ouvre
   depuis la ligne centrale, texte inversé + description à droite ===== */
.menu-link{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.ml-base,
.ml-fill-title{
  font-family:'Mactis','General Sans',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:clamp(1.9rem, 5.5vw, 4.6rem);
  line-height:1.18;
}
.ml-base{
  display:block;
  color:var(--paper);
  padding:.12em 6% .12em 6%;
}
.ml-fill{
  position:absolute;
  inset:0;
  /* hover menu bleu/blanc cassé (réf. lueur bleue) — bleu mat + léger dégradé, pas flashy */
  background:linear-gradient(105deg, var(--blue) 0%, var(--blue-soft) 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:0 6%;
  clip-path:inset(50% 0 50%);
  transition:clip-path .22s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
.menu-link:hover .ml-fill,
.menu-link:focus-visible .ml-fill{ clip-path:inset(0 0 0); }
/* Mobile (pas de hover) : l'effet se déploie très vite au tap (:active) et au focus */
@media (hover:none){
  .ml-fill{ transition:clip-path .1s cubic-bezier(.76,0,.24,1); }
  .menu-link:active .ml-fill,
  .menu-link:focus .ml-fill{ clip-path:inset(0 0 0); }
}
.ml-fill-title{ color:var(--paper); }
.ml-fill-desc{
  flex-shrink:0;
  max-width:38%;
  text-align:right;
  color:var(--paper);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:clamp(.72rem, 1vw, 1rem);
  letter-spacing:.01em;
  opacity:.85;
}
.menu-secondary{
  display:flex;
  gap:1.6rem;
  align-items:center;
}
.menu-secondary a{
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  transition:color .2s;
}
.menu-secondary a:hover{ color:var(--viridian); }
@media (prefers-reduced-motion: reduce){
  .ml-fill{ transition:none; }
}

/* ===== HERO (scroll container + pin pour zoom PT#15) ===== */
.hero{
  position:relative;
  height:165vh;              /* longueur de scroll du zoom hero (+ grand = zoom plus lent) */
  background:var(--paper);
}
.hero-pin{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  overflow:hidden;
}
.hero-zoomwrap{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  will-change:transform;
}

/* ===== PT#15 : le LOGO vectoriel sert de titre puis grandit (zoom) ===== */
.pt15-mask{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}
#logoPath,#logoArc{ fill:var(--ink); }   /* logo + arche noir sur le fond blanc du hero */

/* Voile blanc final : garantit un écran 100% blanc en toute fin de zoom (enchaîne sur Mission blanche) */
.pt15-panel{
  position:absolute;
  inset:0;
  background:var(--paper);
  opacity:0;
  pointer-events:none;
  z-index:3;
}
/* Lien rapide vers la page programme, centré ~1cm sous le logo, dans une bulle (s'efface au zoom) */
.hero-cta{
  position:absolute;
  left:50%;
  top:84%;                         /* sous le logo centré (voir en vrai Chrome) */
  transform:translateX(-50%);
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:'General Sans',sans-serif;
  font-size:.82rem;
  font-weight:600;                 /* un peu plus gras */
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding:.62rem 1.35rem;
  border:1.5px solid var(--ink);
  border-radius:40px;              /* bulle */
  background:rgba(255,255,255,.6);
  transition:color .2s, gap .2s, background .2s, border-color .2s;
}
.hero-cta:hover{ color:var(--paper); background:var(--ink); gap:.85rem; }

/* Bulle « Semaine de la culture » — visible seulement en mobile (sous les engagements) */
.sem-cta-mobile{ display:none; }

/* Bulle « Semaine de la culture » sous Événements (section 3) — version PC uniquement */
.sem-cta-act{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.6rem; width:max-content;
  padding:.62rem 1.3rem;
  border:1.5px solid var(--ink); border-radius:40px;
  background:transparent;
  font-family:'General Sans',sans-serif; font-weight:600;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  transition:color .2s, background .2s, gap .2s;
}
.sem-cta-act:hover{ color:var(--paper); background:var(--ink); gap:.85rem; }
/* Mobile : la bulle reste sous Événements, avec un espace dessous pour ne pas
   empiéter sur le bloc suivant (décale le titre du dessous vers le bas). */
@media (max-width:768px){
  .sem-cta-act{ margin-top:1.5rem; margin-bottom:clamp(2rem,6vh,3.5rem); }
}

/* ===== GRID SCROLL 3D (Codrops "On-Scroll 3D Grid", grid--3 / type3) =====
   Styles grid repris de base.css de la démo, scopés sous #missionGrid.
   Composition Kultur : la grid est fixée (sticky, centrée) dans .m3d-stage
   pendant que les .m3d-eng défilent par-dessus, en avant-plan (z-index sup).
   La hauteur de la section = 1 écran de stage + N écrans d'engagements ;
   c'est cette hauteur qui pilote la durée de l'animation (ScrollTrigger). */
.m3d-scroll{
  --perspective:1500px;
  --grid-item-ratio:1.5;
  --grid-width:105%;
  --grid-height:auto;
  --grid-gap:2vw;
  --grid-columns:8;
  --grid-inner-scale:0.5;
  position:relative;
  background:var(--paper);   /* fond blanc (site uniforme) */
}
/* Section = 2 colonnes : Connected Grid (#19) à gauche, engagements à droite (sticky). */
.m3d5-content{
  position:relative;
  margin-top:-4vh;   /* proche du texte de la mission au-dessus, sans le recouvrir */
  display:grid;
  grid-template-columns:0.5fr 1.5fr;   /* grille compressée à GAUCHE (secondaire) · engagements à DROITE (primaire) */
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  padding:0 clamp(1.5rem,5vw,5rem) 6vh;
}

/* ===== Connected Grid (Scroll Animation #19) — images dispersées révélées au scroll ===== */
.cgrid{
  display:grid;
  grid-template-columns:1fr;   /* mobile : 1 colonne */
  gap:5vh 2vw;
}
.cgrid__item{ position:relative; margin:0; }
.cgrid__item-img{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:var(--img-ratio,4/3);
  border-radius:8px;
  will-change:transform;
}
.cgrid__item-img-inner{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:50%;
  will-change:transform;
}
.cgrid__item-caption{
  position:absolute;
  left:0;
  bottom:0;
  padding:.55rem .7rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:baseline;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
  will-change:transform,opacity;
}
.cgrid__item-caption h3{ margin:0; font-family:'General Sans','Inter',sans-serif; font-weight:700; font-size:clamp(.72rem,1vw,.95rem); }
.cgrid__item-caption span{ font-weight:600; font-size:clamp(.6rem,.85vw,.8rem); color:var(--viridian); }
@media(min-width:53em){
  /* remonte la grille d'images pour qu'elle commence à la hauteur du sous-titre
     « un label pour la scène locale » — même taille, même largeur, juste plus haut */
  .cgrid{ grid-template-columns:repeat(6,1fr); margin-top:-41.5rem; }
  .cgrid__item{ grid-column:var(--c) / span var(--s); grid-row:var(--r); }
}
@media(max-width:52.99em){
  .m3d5-content{ grid-template-columns:1fr; }
  .m3d5-eng-list{ transform:none; }
}

/* ENGAGEMENTS — les 4 engagements rassemblés en liste à droite de l'écran,
   pendant que la grille (type4) reste animée à gauche. Entrée en cascade (GSAP).
   Toujours au-dessus des images. */
/* Layout éditorial "GOALS" : chaque engagement = une rangée
   numéro | titre | description, séparées par un filet horizontal. */
.m3d5-eng-list{
  align-self:start;
  z-index:3;
  display:flex;
  flex-direction:column;
  width:100%;
  list-style:none;
}
/* Bloc des 4 engagements placé sous le paragraphe (même colonne alignée à droite) */
/* double classe → l'emporte sur .mission-text{margin-top:2.75rem} : les engagements
   remontent près du paragraphe pour tenir au-dessus du bas de l'image à gauche */
.mission-text.mission-eng{ margin-top:1rem; }
.m3d5-eng{
  display:grid;
  grid-template-columns:clamp(1.4rem,2.4vw,2.1rem) 1fr;
  align-items:center;
  gap:clamp(.7rem,1.6vw,1.35rem);
  padding:clamp(.35rem,.9vh,.6rem) 0;   /* plus serré : les 4 tiennent au-dessus du bas de l'image */
  text-align:left;
  color:var(--ink);   /* texte noir sur fond blanc */
  opacity:0;
  transform:translateY(24px);
}
/* entrée en cascade quand la liste arrive à l'écran (classe .eng-in via JS) */
.m3d5-eng-list.eng-in .m3d5-eng{
  animation:engIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.m3d5-eng-list.eng-in .m3d5-eng:nth-child(1){ animation-delay:0s; }
.m3d5-eng-list.eng-in .m3d5-eng:nth-child(2){ animation-delay:.12s; }
.m3d5-eng-list.eng-in .m3d5-eng:nth-child(3){ animation-delay:.24s; }
.m3d5-eng-list.eng-in .m3d5-eng:nth-child(4){ animation-delay:.36s; }
@keyframes engIn{
  from{ opacity:0; transform:translateY(24px); }
  to{   opacity:1; transform:translateY(0); }
}
/* gros numéro NOIR (chiffres → General Sans, jamais Mactis) */
.m3d5-eng-num{
  font-family:'General Sans','Inter',sans-serif;
  font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.5rem);
  line-height:1;
  color:var(--ink);
}
/* pin drapeau jurassien (remplace le numéro) */
.m3d5-eng-pin{ display:inline-flex; align-items:center; }
.jura-pin{ width:clamp(1.05rem,2vw,1.55rem); height:auto; display:block; }
/* UN SEUL texte uniforme (pas de premier mot en titre) : même taille, même graisse */
.m3d5-eng-txt{
  font-family:'General Sans','Inter',system-ui,sans-serif;
  font-weight:400;
  line-height:1.32;
  font-size:clamp(.85rem,1vw,1rem);
  color:var(--ink);
}
/* L'état masqué initial est posé par GSAP (gsap.from + immediateRender) dans
   kultur-mission-grid.js, pas en CSS : ainsi, sans JS, les engagements restent visibles. */

/* ===== MISSION (style affiche, inversé : titre+photo en haut, texte en bas) ===== */
.mission{
  position:relative;
  background:var(--paper);   /* couleurs inversées : fond blanc, texte noir */
  padding:2.5rem 0 2rem;
  min-height:100vh;          /* de la place pour la grande illustration centrée */
  overflow:hidden;
}
/* Illustration statique, en bas à gauche (le titre/texte occupe la moitié droite) */
.mission-bro{
  position:absolute; left:clamp(1.5rem,5vw,6rem); top:clamp(2.5rem,6vh,4rem); z-index:0;
  height:min(78vh, 760px); width:auto;
  /* bornée à la moitié gauche : ne peut plus croiser la colonne de texte (bug Safari) */
  max-width:min(40vw, calc(50vw - 3rem));
  object-fit:contain; object-position:left top; pointer-events:none; user-select:none;
}
@media (max-width:900px){ .mission-bro{ display:none; } }
.mission-title{
  width:72%;                                 /* large → seul le grand titre déborde à gauche */
  margin-left:auto;
  padding-right:clamp(2.5rem,6vw,6rem);      /* aligné à droite mais décollé du bord */
  text-align:right;
}
.mission-title-main{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.32em;                                 /* espace entre "Notre" et "Mission" (titre statique) */
  font-family:'Mactis','General Sans',sans-serif;
  font-weight:800;
  font-size:clamp(3rem, 10vw, 7.5rem);
  line-height:.95;
  letter-spacing:.015em;
  text-transform:uppercase;
  color:var(--ink);
}
.mt-word{ display:inline-flex; }
/* Titre "Notre Mission" animé par Text Animations #5 : bloc simple (les lettres sont
   découpées en .fx5-char) — pas de flex qui écarterait chaque lettre. */
.mission-title-main.fx5{ display:block; }
.mission-photo{
  height:clamp(60px, 9vw, 130px);
  width:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  margin:0 .8vw;
  flex-shrink:0;
  opacity:0;
}
.mt-word .letter{
  display:inline-block;
  opacity:0;
  transform-origin:50% 100%;
}
/* Apparition style Text Animations #8 : les lettres montent en place, une à une
   (repris de l'effet "rise"/ghost), déclenché à l'arrivée de la section. */
.mission.in-view .mt-word .letter{
  animation:mtRise 1.1s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes mtRise{
  0%{ opacity:0; transform:translateY(65%); }
  55%{ opacity:1; transform:translateY(-14%); }
  72%{ transform:translateY(5%); }
  88%{ transform:translateY(-2%); }
  100%{ opacity:1; transform:translateY(0); }
}
/* ===== Page Transitions #1 : la page sortante recule (monte, rétrécit, s'estompe)
   pendant qu'un voile (couleur de la page Projets) se déploie du bas vers le haut,
   puis navigation. Voir js/kultur-pt1-exit.js. ===== */
.pt1-cover{
  position:fixed; inset:0; z-index:100000;
  background:#0a0a0a;                     /* fond de la page Projets */
  clip-path:inset(100% 0% 0% 0%);         /* caché en bas, se déploie vers le haut */
  will-change:clip-path;
  pointer-events:none;
}
/* la page qui part : recule en profondeur, comme dans la démo #1 */
body.pt1-leaving{
  transform-origin:50% 0%;
  transform:translateY(-30vh) scale(.8);
  opacity:.4;
}

/* ===== Anim générique .rise : mêmes lettres montantes que "Notre mission" ===== */
.rise .rw{ display:inline-flex; white-space:pre; }
.rise .letter{ display:inline-block; opacity:0; transform-origin:50% 100%; will-change:transform,opacity; }
.rise.is-rise .letter{ animation:mtRise 1.1s cubic-bezier(.25,.46,.45,.94) forwards; }
/* Paragraphes (.slide-up) : le bloc glisse depuis le bas, simple et fluide */
.slide-up{
  opacity:0; transform:translateY(34px); will-change:transform,opacity;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.slide-up.in{ opacity:1; transform:none; }

/* .reveal-clip : dévoilement vertical haut→bas (comme le titre Contact).
   .in est ajouté par kultur-textrise.js quand l'élément arrive à l'écran. */
.reveal-clip{
  clip-path:inset(0 0 100% 0);
  -webkit-clip-path:inset(0 0 100% 0);
  will-change:clip-path;
  transition:clip-path .85s cubic-bezier(.5,0,.1,1), -webkit-clip-path .85s cubic-bezier(.5,0,.1,1);
}
.reveal-clip.in{ clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); }

@media (prefers-reduced-motion:reduce){
  .rise .letter{ opacity:1; animation:none; }
  .slide-up{ opacity:1; transform:none; transition:none; }
  .reveal-clip{ clip-path:none; -webkit-clip-path:none; transition:none; }
}
/* La photo garde son apparition en fondu */
.mission.in-view .mission-photo{
  animation:mtPhotoIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes mtPhotoIn{
  to{ opacity:1; }
}
.mission-title-sub{
  margin-top:1rem;
  font-family:'Mactis','General Sans',sans-serif;
  font-weight:800;
  font-size:clamp(1.4rem, 3.2vw, 2.5rem);
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0;
  transform:translateY(22px);
}
/* le sous-titre monte en fondu, juste après le titre */
.mission.in-view .mission-title-sub{
  animation:missionSubIn .7s cubic-bezier(.2,.8,.2,1) .6s forwards;
}
@keyframes missionSubIn{
  from{ opacity:0; transform:translateY(22px); }
  to{   opacity:1; transform:translateY(0); }
}
.mission-text{
  display:flex;
  justify-content:flex-end;
  padding:1.25rem clamp(2.5rem,6vw,6rem) 0;   /* même marge droite que le titre (décollé du bord) */
  margin-top:2.75rem;   /* plus d'air entre le titre et le paragraphe */
}
.mission-body-wrap{
  position:relative;
  width:52%;
  max-width:540px;   /* colonne plus étroite → ne déborde pas à gauche autant que le titre */
  /* Le texte reste dans la moitié droite (plus de chevauchement avec l'illustration).
     Léger rapprochement du centre uniquement en très grand écran, où il y a la place. */
  transform:none;
}
@media (min-width:1500px){
  .mission-body-wrap{ transform:translateX(-2.4rem); }
}
.mission-body{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  width:100%;
  /* police plus simple et lisible (celle du programme) au lieu de Mactis */
  font-family:'General Sans','Inter',system-ui,sans-serif;
  font-weight:400;                              /* paragraphes plus fins (Nyght Regular) */
  font-size:clamp(1.1rem, 1.35vw, 1.28rem);
  line-height:1.6;
  color:var(--ink);
  text-align:justify;   /* justifié : bords nets des deux côtés */
  text-justify:inter-word;
}
.mission-body p{
  opacity:0;
  transform:translateX(-40px);
}
.mission.in-view .mission-body p{
  animation:letterSlideIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.mission.in-view .mission-body p:nth-child(2){ animation-delay:.15s; }
@keyframes letterSlideIn{
  from{ opacity:0; transform:translateX(-40px); }
  to{   opacity:1; transform:translateX(0); }
}

/* ===== Hover Effects #14 : simulation de fluide (three.js) en fond de la 2e section ===== */



/* ===== ACTIVITÉS — Scroll Animation #29 (GSAP pinned image mask reveal) =====
   Colonne gauche = sections de texte (1 par activité, 100vh chacune).
   Colonne droite = pile d'images épinglée qui s'essuie au scroll (voir kultur-activites-29.js). */
.act29{
  position:relative;
  background:var(--paper);   /* fond blanc (site uniforme) */
  margin-top:clamp(4rem,9vh,8rem);   /* plus d'espace après la section Notre mission */
}
.act29-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(30px, 6vw, 90px);
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.act29-left{
  display:flex;
  flex-direction:column;
  min-width:300px;
}
.act29-info{
  max-width:440px;
  min-height:100vh;
  display:grid;
  place-items:center;
}
.act29-num{
  display:block;
  font-family:'General Sans',sans-serif;   /* chiffres → PAS Mactis */
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--viridian);
  margin-bottom:1.1rem;
}
.act29-header{
  font-family:'Mactis','General Sans',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2rem, 4vw, 3.1rem);   /* réduit → tient sur une seule ligne */
  line-height:1.02;
  letter-spacing:.015em;
  white-space:nowrap;   /* force une ligne (ex. "Partenariats") */
  color:var(--ink);   /* texte noir sur fond blanc */
}
.act29-desc{
  margin-top:1.2rem;
  max-width:42ch;
  font-family:'General Sans','Inter',system-ui,sans-serif;
  font-weight:400;
  color:var(--ink);   /* texte noir sur fond blanc */
  font-size:clamp(1.08rem, 1.3vw, 1.2rem);
  line-height:1.65;
  letter-spacing:.01em;
  text-align:justify;
  text-justify:inter-word;
}
.act29-right{
  position:relative;
  width:100%;
  max-width:520px;
  height:100vh;
  flex-shrink:1;
  display:flex;
  flex-direction:column;
}
.act29-img{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  width:100%;
  height:min(64vh, 560px);
  border-radius:16px;
  overflow:hidden;
}
.act29-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media (max-width:768px){
  .act29-inner{ flex-direction:column; gap:0; }
  .act29-left, .act29-right{ display:contents; }
  .act29-info{ min-height:auto; max-width:100%; padding:7vh 0 2vh; place-items:start; }
  .act29-img{
    position:static;
    transform:none;
    width:100%;
    height:56vh;
    margin-bottom:1.4rem;
    border-radius:12px;
  }
}

/* ===== COMITÉ (hover-expand carousel) ===== */
/* ===== COMITÉ — slider infini (Sliders #22) : slides qui grandissent en défilant,
   boucle des 5 membres, titre en haut à gauche, prénom au survol. ===== */
.team{
  position:relative;
  height:100vh; min-height:560px;
  background:var(--paper);
  overflow:hidden;
}
/* titre en haut à gauche */
.team-head2{
  position:absolute; top:clamp(2rem,6vh,4rem); left:var(--gutter);
  z-index:5; max-width:min(52%,600px);
  pointer-events:none;
}
.team-xl{
  margin:0;
  font-family:'Mactis','General Sans',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,5rem); line-height:.96; letter-spacing:-.01em; color:var(--ink);
}
.team-lead{
  margin:1.1rem 0 0; max-width:46ch;
  font-family:'General Sans','Inter',system-ui,sans-serif; font-weight:400;
  font-size:clamp(.98rem,1.2vw,1.12rem); line-height:1.6; color:var(--muted);
}

/* ===== COMITÉ — rangée de PILIERS. À l'arrivée : seul le titre. Au scroll : les
   images montent depuis le bas et se posent comme des piliers. Hover : "extend reveal"
   — le pilier survolé s'élargit et dévoile prénom + rôle (les voisins se resserrent). ===== */
.tm-pillars{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  gap:6px;
  padding:clamp(9vh,15vh,18vh) var(--gutter) clamp(6vh,9vh,11vh);
}
.tm-pillar{
  position:relative; flex:0 0 auto;
  width:var(--w); height:var(--h);
  cursor:pointer;
  /* départ : sous l'écran, invisible → monte en place (piloté par .tm-pillars.in) */
  transform:translateY(120%); opacity:0;
  transition:transform 1s cubic-bezier(.16,.84,.28,1) var(--in-d,0s),
             opacity .7s ease var(--in-d,0s);
  will-change:transform;
}
.tm-pillars.in .tm-pillar{ transform:none; opacity:1; }
.tm-pillar:hover{ z-index:20; }
/* Le média (image + légende) : au repos il remplit le pilier étroit (crop) ; au survol
   il s'ÉLARGIT en flottant au-dessus des voisins → l'image se révèle en entier.
   Aucun reflow : les piliers voisins ne bougent pas, le survol reste stable. */
.tm-pillar-media{
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:hidden; border-radius:6px; background:#e9e9e9;
  transition:width .55s cubic-bezier(.22,.61,.36,1),
             left .55s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease;
  will-change:width;
}
.tm-pillar-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* photos détourées sur fond blanc = bcp de marge blanche en haut : on zoome au repos
     pour cadrer le visage dans le pilier étroit. Au survol, retour à 1 → photo entière. */
  transform:scale(1.42); transform-origin:50% 40%;
  filter:grayscale(1);
  transition:filter .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.tm-pillar:hover .tm-pillar-media img{ transform:scale(1); }
/* survol : la case s'ouvre à la largeur naturelle du portrait → image entière */
.tm-pillar:hover .tm-pillar-media{
  width:calc(var(--h) * 0.75);           /* = ratio naturel des portraits (750×1000) → image ENTIÈRE */
  left:calc(50% - (var(--h) * 0.375));   /* recentrée sur le pilier, débordant symétriquement */
  box-shadow:0 26px 60px rgba(10,10,10,.32);
}
.tm-pillar:hover .tm-pillar-media img{ filter:grayscale(0); object-fit:cover; }
/* légende révélée au survol (bas de l'image) */
.tm-pillar-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.3rem 1.2rem 1.1rem;
  background:linear-gradient(to top, rgba(10,10,10,.85), rgba(10,10,10,0));
  opacity:0; transform:translateY(14px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.tm-pillar-name{
  display:block; color:var(--paper);
  font-family:var(--font-title); font-weight:800; line-height:1.05;
  font-size:clamp(1rem,1.3vw,1.4rem);
}
.tm-pillar-role{
  display:block; margin-top:.3rem;
  font-family:var(--font-ui); font-weight:400;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.tm-pillar:hover .tm-pillar-cap{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .tm-pillar{ transform:none; opacity:1; }
  .tm-pillar-media{ transition:none; }
}

/* ===== SEMAINE DE LA KULTURE — carousel circulaire courbé de livres (miroir) ===== */
/* Page Transitions #15 : wrapper épinglé. Le fond identique aux sections sert de
   toile de fond au reveal ; la .bookshelf s'ouvre depuis le centre par-dessus. */
.bookshelf-reveal{
  position:relative;
  background:#f5f4f3;
  overflow:hidden;
}
.bookshelf-reveal .bookshelf{
  will-change:clip-path, transform;
  transform-origin:50% 50%;
}
.bookshelf{
  position:relative;
  height:100vh;
  min-height:720px;
  background:#f5f4f3;              /* même blanc cassé que la section "Comité" au-dessus */
  overflow:hidden;
}
.bookshelf-hud{
  position:absolute;
  z-index:6;
  top:1.6rem;
  left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--gutter);
  pointer-events:none;
}
.bookshelf-hud .hud-label{
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.bookshelf-hud .hud-drag{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.45);
}
.bookshelf-hud .hud-count{
  font-family:'General Sans',sans-serif;   /* chiffres → PAS Mactis */
  font-size:.86rem;
  letter-spacing:.1em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stage3d{
  position:absolute;
  inset:0;
  perspective:2200px;
  perspective-origin:50% 46%;
  display:grid;
  place-items:center;
  cursor:grab;
  touch-action:pan-y;
  /* L'entrée est gérée par le reveal PT#15 (clip depuis le centre) sur .bookshelf */
  opacity:1;
}
.stage3d.dragging{ cursor:grabbing; }
.ring{
  position:relative;
  width:0; height:0;
  transform-style:preserve-3d;
  transform:translateY(-2vh) rotateX(-4deg) rotateY(var(--rot,0deg));
  will-change:transform;
}
.book{
  position:absolute;
  left:0; top:0;
  width:320px; height:460px;
  margin-left:-160px; margin-top:-230px;
  transform-style:preserve-3d;
  cursor:pointer;
  /* Livres visibles d'emblée : l'entrée est le reveal PT#15 (clip depuis le centre) */
  transition:filter .3s;
}
.book-face{  /* couverture entière (image unique, non découpée) + bombage optique */
  position:absolute;
  inset:0;
  border-radius:6px;
  overflow:hidden;
  background:#222;
}
.book-face img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:url(#bookBulge);        /* déforme l'image en dôme continu -> aucune coupure */
}
.book-face::before{  /* tranche/spine sombre à gauche */
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:14px;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index:2;
}
.book-face::after{  /* voile + reflet lumière */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 30%),
             linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%);
  z-index:2;
}
.book-shadow{  /* ombre portée, plaquée derrière le livre */
  position:absolute;
  inset:0;
  border-radius:6px;
  box-shadow:0 24px 50px rgba(0,0,0,.5);
  transform:translateZ(-8px);
}
.book-overlay{  /* titre + numéro, plats et au premier plan pour rester lisibles */
  position:absolute;
  inset:0;
  transform:translateZ(18px);
  pointer-events:none;
}
.book-label{
  position:absolute;
  left:24px; right:14px; bottom:18px;
  z-index:3;
  font-family:'Mactis','General Sans',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1;
  font-size:1.5rem;
  color:var(--paper);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.book-num{
  font-family:'General Sans',sans-serif;   /* chiffres → PAS Mactis */
  position:absolute;
  left:24px; top:16px;
  z-index:3;
  font-size:.72rem;
  letter-spacing:.16em;
  color:rgba(255,255,255,.7);
}
/* reflet miroir sous chaque livre */
.book-mirror{
  position:absolute;
  left:0; top:100%;
  width:100%; height:100%;
  margin-top:10px;
  transform:scaleY(-1);
  transform-origin:top;
  border-radius:4px 8px 8px 4px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 55%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 55%);
  opacity:.55;
  pointer-events:none;
}
.book-mirror img{ width:100%; height:100%; object-fit:cover; display:block; filter:url(#bookBulge); }

/* ===== FLIPBOOK (livre ouvert, pages qui tournent) ===== */
.bookviewer{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(6,6,8,.92);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.bookviewer.open{ opacity:1; pointer-events:auto; }
.bookviewer-close{
  position:absolute;
  top:1.6rem; right:1.6rem;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:none;
  color:var(--paper);
  cursor:pointer;
  font-size:1.1rem;
  z-index:3;
}
.bookviewer-hint{
  position:absolute;
  bottom:2rem; left:0; right:0;
  text-align:center;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  pointer-events:none;
}
.flip{ perspective:2600px; }
.flip-book{
  position:relative;
  width:760px; height:520px;
  max-width:92vw;
  transform-style:preserve-3d;
  transform:scale(.85);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.3,.5,1), opacity .5s;
}
.bookviewer.open .flip-book{ transform:scale(1); opacity:1; }
.flip-leaf{
  position:absolute;
  top:0; left:50%;
  width:50%; height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.65,0,.35,1);
}
.flip-leaf.flipped{ transform:rotateY(-180deg); }
.leaf-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  overflow:hidden;
  background:#f4f1ea;
  box-shadow:inset 0 0 40px rgba(0,0,0,.08);
  padding:2.6rem 2.4rem;
  display:flex;
  flex-direction:column;
}
.leaf-face.back{ transform:rotateY(180deg); }
.leaf-face.cover{ background:#12121a; color:var(--paper); }
.leaf-face.cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.leaf-eyebrow{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--viridian); margin-bottom:.7rem; position:relative; }
.leaf-title{ font-family:'Mactis','General Sans',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.02em; line-height:.98; font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--ink); margin-bottom:1rem; position:relative; }
.leaf-face.cover .leaf-title{ color:var(--paper); font-size:clamp(2rem,4vw,3rem); }
.leaf-body{ font-size:.95rem; line-height:1.6; color:#333; position:relative; }
.leaf-face.cover .leaf-body{ color:rgba(255,255,255,.75); }
.leaf-foot{ margin-top:auto; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#999; position:relative; }
.flip-progress{ position:absolute; bottom:-2.4rem; left:0; right:0; text-align:center; font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.6); }

@media (max-width:700px){
  .book{ width:150px; height:216px; margin-left:-75px; margin-top:-108px; }
  .book-mirror{ width:150px; height:216px; }
  .flip-book{ height:64vh; }
  .leaf-face{ padding:1.6rem 1.4rem; }
}

@media (max-width:760px){
  /* Mobile : titre en haut, piliers en rangée qui défile au doigt (légende toujours visible) */
  .team{ height:auto; min-height:0; padding:6rem 0 3rem; }
  .team-head2{ position:static; max-width:none; padding:0 var(--gutter); }
  .tm-pillars{
    position:static; inset:auto; padding:2rem 0 0;
    justify-content:flex-start; align-items:flex-end;
    overflow-x:auto; scrollbar-width:none; gap:10px;
    padding-inline:var(--gutter);
  }
  .tm-pillars::-webkit-scrollbar{ display:none; }
  .tm-pillar{ transform:none; opacity:1; width:clamp(150px,46vw,210px); height:clamp(300px,66vw,420px); }
  /* pas d'élargissement au survol sur mobile — légende visible d'office */
  .tm-pillar:hover .tm-pillar-media{ width:100%; left:0; box-shadow:none; }
  .tm-pillar-media img{ filter:grayscale(0); }
  .tm-pillar-cap{ opacity:1; transform:none; }
}

@media (max-width:700px){
  .act29-header{ font-size:clamp(1.9rem, 9vw, 2.8rem); }
  .act29-desc{ text-align:left; text-justify:auto; }   /* colonne étroite : pas de justif (évite les grands écarts) */

  .mission-title{ width:100%; padding:0 1.75rem; text-align:right; }
  .mission-text{ padding:2rem 1.75rem 0; }
  .mission-body-wrap{ transform:none; width:100%; max-width:none; }
  .mission-body{ width:100%; text-align:justify; }
  .scroll-band-img{ max-height:160px; }
  .menu-overlay{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2.5rem; padding:0 1.75rem; }
  .menu-secondary{ align-items:flex-start; }

  /* CTA hero : un peu plus haut et compact sur petit écran */
  .hero-cta{ top:70%; font-size:.72rem; padding:.52rem 1.1rem; }

  /* Bulle raccourci Semaine de la culture, centrée sous les 4 engagements */
  .sem-cta-mobile{
    display:flex; align-items:center; gap:.5rem;
    width:max-content; margin:1.9rem auto 0;
    padding:.72rem 1.4rem;
    border:1.5px solid var(--ink); border-radius:40px;
    background:transparent;
    font-family:'General Sans',sans-serif; font-weight:600;
    font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink); text-decoration:none;
  }
}

/* ===== CONTACT — fond BLANC. Titre géant « Contact » en haut (reveal depuis le haut,
   coordonné au scroll via GSAP). En haut à droite : image du comité + coordonnées.
   Sous le titre : le formulaire, en police plus fine. ===== */
.contact2{
  position:relative;
  min-height:100vh;
  margin-top:clamp(9rem,26vh,24rem);   /* plus d'espace avant la page contact */
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  padding:clamp(2.4rem,7vh,5rem) var(--gutter) clamp(3rem,8vh,6rem);
  display:flex; flex-direction:column; align-items:center;   /* tout centré */
}

/* Titre géant en haut, centré */
.ct-title{
  margin:0;
  font-family:'Mactis','General Sans',sans-serif;
  font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.82;
  font-size:clamp(3.4rem,16vw,13.5rem);   /* un peu plus petit */
  color:var(--ink);
  text-align:center;
}
/* reveal HORIZONTAL : le texte se dévoile de gauche à droite (clip-path, piloté au scroll) */
.ct-title-mask{ display:block; }
.ct-title-inner{ display:block; will-change:clip-path; }

/* Bloc coordonnées — centré, sous le formulaire */
.ct-aside{
  order:2;                              /* après le formulaire */
  width:100%; max-width:500px;
  margin:clamp(2rem,5vh,3.5rem) auto 0;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.ct-photo-wrap{ margin:0; }
.ct-photo-wrap img{
  width:100%; height:auto; display:block;      /* image ENTIÈRE (ratio naturel, pas de crop) */
  filter:grayscale(1) contrast(1.03);
}
.ct-photo-wrap figcaption{
  margin-top:.55rem;
  font-family:'General Sans',sans-serif; font-weight:500;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.ct-info{
  display:flex; flex-direction:column; align-items:center; gap:.42rem;
  text-align:center;                          /* infos centrées sous l'image */
  font-family:'General Sans','Inter',system-ui,sans-serif; font-weight:400;
  font-size:.86rem; line-height:1.45; color:var(--ink);
}
.ct-info-label{
  font-weight:600; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.2rem;
}
.ct-info a{ color:var(--ink); text-decoration:none; transition:color .2s; width:max-content; }
.ct-info a:hover{ color:var(--viridian); }
.ct-info address{ font-style:normal; color:var(--ink); display:flex; flex-direction:column; align-items:center; }
/* Curseur clignotant du texte tapé à la machine (ct-info) */
.tw-caret{ display:inline-block; margin-left:1px; font-weight:400; color:var(--ink); animation:twBlink 1s steps(1) infinite; }
@keyframes twBlink{ 50%{ opacity:0; } }
.ct-info.tw-typing a{ pointer-events:none; }   /* pas de clic pendant la frappe */

/* Formulaire sous le titre — police plus fine, centré */
.ct-form{
  order:1;
  margin:clamp(2rem,6vh,4.5rem) auto 0;   /* centré */
  display:flex; flex-direction:column; gap:1.15rem;
  width:min(100%,400px);   /* jamais plus large que la section (respecte les marges) */
}
.ct-field{ position:relative; }
.ct-field input,
.ct-field textarea{
  -webkit-appearance:none; appearance:none;   /* iOS Safari : enlève coins arrondis + ombre interne natifs */
  border-radius:0;
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(10,10,10,.22);
  color:var(--ink);
  font-family:'General Sans','Inter',system-ui,sans-serif;
  font-weight:300;                 /* police plus fine */
  font-size:1.08rem;
  padding:.75rem 0 .55rem;
  resize:none;
  transition:border-color .25s;
}
.ct-field input:focus,
.ct-field textarea:focus{ outline:none; border-color:var(--ink); }
.ct-field label{
  position:absolute; left:0; top:.75rem;
  color:rgba(10,10,10,.42);
  font-family:'General Sans','Inter',system-ui,sans-serif;
  font-weight:300; font-size:1.08rem;
  pointer-events:none;
  transition:.2s;
}
.ct-field input:focus + label,
.ct-field input:not(:placeholder-shown) + label,
.ct-field textarea:focus + label,
.ct-field textarea:not(:placeholder-shown) + label{
  top:-.7rem; font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.ct-submit{
  -webkit-appearance:none; appearance:none;   /* iOS Safari : bouton sans style natif */
  margin-top:.5rem; align-self:center;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:40px;
  padding:.85rem 1.8rem;
  font-family:'General Sans',sans-serif; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; font-size:.82rem;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:background .2s, color .2s, gap .2s;
}
.ct-submit:hover{ background:var(--viridian); color:var(--paper); gap:.85rem; }
.ct-submit:disabled{ opacity:.5; pointer-events:none; }
.ct-status{ margin:.9rem 0 0; font-size:.9rem; line-height:1.4; opacity:.85; }
.ct-status.is-error{ color:#c0392b; opacity:1; }

/* Fondu de l'image + du formulaire (déclenché APRÈS le reveal du titre, via .in en JS).
   L'image descend en apparaissant ; le formulaire monte légèrement. */
.ct-fade{ opacity:0; transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.ct-aside.ct-fade{ transform:translateY(16px); }
.ct-form.ct-fade{ transform:translateY(16px); }
.ct-fade.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .ct-fade{ opacity:1; transform:none; transition:none; }
}

@media (max-width:820px){
  .contact2{ padding-top:clamp(2rem,6vh,4rem); }
  .ct-title{ font-size:clamp(2.4rem,14vw,6rem); }
  .ct-form{ width:100%; }
  .ct-aside{ margin-top:2rem; }
}

/* ===== PIED DE PAGE — mentions légales / confidentialité ===== */
.site-legal{
  background:var(--paper);
  color:var(--muted);
  border-top:1px solid rgba(10,10,10,.1);
  padding:1.4rem var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.6rem 1.4rem;
  font-family:'General Sans','Inter',system-ui,sans-serif;
  font-size:.78rem; letter-spacing:.02em;
}
.site-legal .sl-copy{ color:var(--muted); }
.site-legal .sl-links{ display:flex; align-items:center; gap:.6rem; }
.site-legal a{ color:var(--ink); text-decoration:none; transition:color .2s; }
.site-legal a:hover{ color:var(--viridian); }
.site-legal .sl-sep{ color:var(--muted); }
@media (max-width:600px){
  .site-legal{ flex-direction:column; text-align:center; gap:.5rem; }
}


/* ============================================================
   POLICES — Aileron (titres) · Nyght Serif (paragraphes + sous-titres)
   Bloc de fin : mêmes sélecteurs → l'emporte dans la cascade.
   UI / nombres / champs de formulaire restent en General Sans (lisibilité).
   ============================================================ */
body{ font-family:var(--font-body); }

/* TITRES → Aileron */
.ml-base, .ml-fill-title,
.mission-title-main, .act29-header, .team-xl, .tm-name,
.book-label, .leaf-title, .ct-title,
.cgrid__item-caption h3{ font-family:var(--font-title); }

/* PARAGRAPHES + PETITS TEXTES → sans plus fin et plus lisible (General Sans/Inter) */
.ml-fill-desc, .mission-body, .act29-desc, .team-lead,
.m3d5-eng-txt, .ct-info{
  font-family:var(--font-ui); font-weight:400; letter-spacing:.005em;
}
.mission-title-sub{ font-family:var(--font-body); font-weight:500; }