/* ===================================================================
   Château de Boisseron — shared design system
   Direction "Fête au Château" — the same festive, three-accent energy
   as the digital pôle's night-time installations (teal, orange, violet),
   moved into daylight: a warm sunlit ground rather than a night sky, so
   the site reads as cheerful and welcoming rather than sombre. Tokens
   are defined once in a bare :root, a deliberate single world rather
   than a light/dark toggle. Page-specific layouts (FAQ accordion,
   contact form, pole detail, timeline) live in each page's own
   <style> block.
   =================================================================== */

:root{
  --bg: #FBF1DE;
  --surface: #FFFFFF;
  --surface-alt: #F4E6C4;
  --ink: #241F16;
  --ink-soft: #5B5140;
  --ink-faint: #776E59;
  --accent: #0EA893;
  --accent-deep: #0B6B5D;
  --accent-tint: rgba(14,168,147,0.14);
  --leaf: #FF6B45;
  --leaf-deep: #C6350A;
  --leaf-tint: rgba(255,107,69,0.14);
  --accent2: #7C5CD9;
  --accent2-deep: #6A47C9;
  --accent2-tint: rgba(124,92,217,0.14);
  --rule: rgba(36,31,22,0.14);
  --shadow: rgba(36,31,22,0.18);
  --overlay-top: rgba(20,15,9,0.10);
  --overlay-bottom: rgba(14,11,7,0.82);
}

*{ box-sizing: border-box; }
/* -webkit-text-size-adjust:100% neutralise le "text autosizing" propre à
   Safari iOS : sur un vrai iPhone (jamais reproductible dans un émulateur
   desktop), WebKit peut grossir automatiquement la taille du texte de
   certains blocs de paragraphe sans élargir leur conteneur d'autant,
   faisant déborder ce texte hors de sa boîte (par ex. hors du bandeau
   sombre du podcast). Cette règle fige la taille de police telle que
   définie par le CSS, sans ce gonflement automatique. */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Grain photographique très discret, posé sur toute la page (aplats,
   photos, cartes) pour casser le côté trop lisse d'un simple fond uni.
   Calque fixe et non interactif : il ne bouge pas au scroll et ne gêne
   jamais le clic. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNTAnIGhlaWdodD0nMjUwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  background-size: 250px 250px;
}
::selection{ background: var(--leaf-tint); color: var(--ink); }
a{ color: inherit; }
/* height:auto est indispensable ici : les attributs HTML width/height,
   ajoutés sur beaucoup d'images pour éviter les sauts de mise en page au
   chargement, sont sinon repris tels quels par le navigateur — largeur
   fluide (max-width:100%) mais hauteur figée en pixels à la valeur brute de
   l'attribut, ce qui déforme l'image dès que sa largeur réelle affichée ne
   correspond plus à sa largeur naturelle (grille, colonne étroite, mobile…).
   Une règle plus spécifique en aval (hero, cartes, vignettes recadrées avec
   object-fit) peut toujours redéfinir sa propre hauteur sans être affectée. */
img{ max-width: 100%; height: auto; display: block; }

/* Default visible focus ring — specific components below refine this
   further, but nothing on the site should ever focus invisibly. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link — first focusable element on every page, hidden until a
   keyboard user tabs to it, then jumps straight past the header/nav
   to the main content (WCAG 2.4.1 Bypass Blocks). */
.skip-link{
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1001;
  background: var(--accent-deep);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus{
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

h1, h2, h3{
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 24px;
}

.eyebrow{
  font-family: "Work Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ---------------- header / nav ---------------- */
header.site{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding-block: 20px;
  background: transparent;
  box-shadow: none;
  transition: background 0.25s ease, padding-block 0.25s ease, box-shadow 0.25s ease;
}
header.site::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(22,17,10,0.62) 0%, rgba(22,17,10,0.32) 55%, rgba(22,17,10,0) 100%);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
header.site.scrolled{
  background: rgba(11,107,93,0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-block: 14px;
  box-shadow: 0 8px 22px var(--shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.site.scrolled{ background: var(--accent-deep); }
}
header.site.scrolled::before{ opacity: 0; }
/* Le flou (backdrop-filter) ci-dessus a un effet de bord : il transforme
   l'en-tête en repère de positionnement pour tout élément "fixed" placé à
   l'intérieur — ce qui est le cas du menu mobile plein écran (nav.primary).
   Résultat, une fois la page défilée : le menu ne se positionnait plus par
   rapport à l'écran entier, mais par rapport à la seule hauteur de
   l'en-tête, et s'affichait tassé en haut au lieu de couvrir tout l'écran.
   Le menu étant de toute façon destiné à recouvrir entièrement l'en-tête
   dès son ouverture, on retire simplement le flou pendant ce court instant. */
header.site:has(.menu-check:checked){
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fade-in{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.in-view{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .fade-in{ opacity: 1; transform: none; transition: none; }
}

header.site .bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img{ width: 46px; height: 46px; object-fit: contain; }
.brand-name{
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: 0.01em;
}
nav.primary{
  display: flex;
  align-items: center;
  gap: 30px;
}

/* ---------------- ambiance sonore (page d'accueil uniquement) ---------------- */
/* Premier élément du bandeau de navigation, juste avant « Accueil », pour
   rester visible d'emblée plutôt que discrète en coin d'écran. Coupée par
   défaut : rien ne joue tant que le visiteur n'a pas cliqué (règle
   d'accessibilité 1.4.2 et politique de lecture automatique des
   navigateurs). Un clic déclenche deux boucles sonores superposées (fond
   champêtre + cigales), avec fondu à l'activation comme à la coupure. */
.sound-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sound-toggle:hover{ background: rgba(255,255,255,0.28); border-color: #fff; }
.sound-toggle:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.sound-toggle.is-playing{ background: var(--accent); border-color: var(--accent); }
.sound-toggle svg{ width: 18px; height: 18px; display: block; flex-shrink: 0; }
.sound-toggle .sound-waves{ opacity: 0; transition: opacity 0.2s ease; }
.sound-toggle.is-playing .sound-waves{ opacity: 1; }
.sound-toggle[aria-busy="true"]{ cursor: wait; }
/* Dans le menu, rapproche l'icône d'« Accueil » : le gap uniforme de 30px
   entre liens est trop large pour ce duo icône+premier lien. */
nav.primary .sound-toggle{ margin-right: -14px; }
/* Copie légère dans la barre du haut, à côté du hamburger : sur mobile,
   « Accueil » (et donc l'icône ci-dessus) n'est visible qu'une fois le menu
   ouvert. Cette seconde icône — même bouton, même état, juste un second
   point d'accès — reste visible en permanence. Masquée sur desktop, où la
   version du menu suffit déjà. */
.sound-toggle-mobile{ display: none; }
@media (max-width: 720px){
  .sound-toggle-mobile{ display: flex; margin-left: auto; }
}
nav.primary a{
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity .15s ease;
}
nav.primary a:hover, nav.primary a:focus-visible{ border-color: var(--accent); }
nav.primary a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
nav.primary a[aria-current="page"]{ border-color: var(--accent); }
.nav-cta{
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 999px;
  padding: 7px 18px !important;
}

.menu-toggle{ display: none; }
/* Kept in the tab order (not display:none) so keyboard users can reach
   and toggle the mobile menu with Tab + Space; visually hidden, with the
   focus ring redirected onto the visible hamburger icon it labels. */
.menu-check{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.menu-check:focus-visible{ outline: none; }
.menu-check:focus-visible + .menu-toggle{
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- nav dropdown ("Découvrir") ---------------- */
.nav-drop{ position: relative; }
.nav-drop-btn{
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: "Work Sans", sans-serif;
  color: rgba(255,255,255,0.92);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.nav-drop-btn:hover, .nav-drop-btn:focus-visible{ border-color: var(--accent); }
.nav-drop-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.nav-drop-btn.current{ border-color: var(--accent); }
.nav-drop-btn .chev{ transition: transform 0.15s ease; }
.nav-drop.open .nav-drop-btn .chev{ transform: rotate(180deg); }
.drop-panel{
  position: absolute;
  top: calc(100% + 16px);
  left: -14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 8px;
  min-width: 230px;
  box-shadow: 0 14px 32px var(--shadow);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-drop.open .drop-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-drop .drop-panel a{
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: none !important;
}
.nav-drop .drop-panel a:hover, .nav-drop .drop-panel a[aria-current="page"]{
  background: var(--accent-tint);
  color: var(--accent-deep);
}

/* ---------------- buttons ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Work Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
  cursor: pointer;
}
.btn:hover{ transform: translateY(-1px); }
/* White text on --accent alone measures ~3:1, below the WCAG AA 4.5:1
   threshold for text — using --accent-deep here keeps the same teal
   family at a compliant ~6.4:1, with a further-darkened shade on hover. */
.btn-primary{ background: var(--accent-deep); color: #fff; }
.btn-primary:hover{ background: #09584C; }
.btn-ghost{ color: #fff; border-color: rgba(255,255,255,0.55); background: transparent; }
.btn-ghost:hover{ border-color: #fff; background: rgba(255,255,255,0.12); }
/* ---------------- page header (secondary pages) ---------------- */
.page-hero{
  position: relative;
  min-height: 38vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--accent-deep);
}
.page-hero.has-photo .hero-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.page-hero.has-photo::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,17,10,0.32) 0%, rgba(22,17,10,0.82) 100%);
}
.page-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 130px 44px;
  color: #fff;
}
.page-hero h1{
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  margin-block: 12px 0;
  max-width: 20ch;
}
.page-hero .lede{
  max-width: 60ch;
  color: rgba(255,255,255,0.86);
  font-size: 1.02rem;
  margin: 16px 0 0;
}
.crumb{
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  margin: 10px 0 0;
}
.crumb a{ text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); }
.crumb a:hover{ border-color: #fff; }

/* ---------------- hero (homepage, full) ---------------- */
.hero{
  position: relative;
  min-height: 84vh;
  display: flex;
  align-items: flex-end;
  background: #241C12;
  overflow: hidden;
}
.hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 35%;
}
.hero-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--overlay-top) 0%, rgba(22,17,10,0.08) 38%, var(--overlay-bottom) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 120px 56px;
  color: #fff;
}
.hero-content .eyebrow{ color: #BEF2E6; }
.hero h1{
  color: #fff;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.04;
  margin-block: 14px 18px;
  max-width: 14ch;
}
.hero-lede{
  max-width: 56ch;
  color: rgba(255,255,255,0.88);
  font-size: 1.08rem;
  margin: 0 0 30px;
}
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.stat-strip{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.22);
}
.stat-strip div{
  padding: 18px 22px;
  border-right: 1px solid rgba(255,255,255,0.22);
}
.stat-strip div:last-child{ border-right: none; }
.stat-num{
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat-num-tight{ white-space: nowrap; }
.stat-num-sub{
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}
.stat-lbl{
  font-size: 0.74rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.03em;
}

/* ---------------- section head / pull quote / tags ---------------- */
.section-head{
  max-width: 62ch;
  margin-bottom: 48px;
}
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin: 10px 0 14px; }
.section-head p{ color: var(--ink-soft); margin: 0; max-width: 56ch; }

.pull{
  border-left: 2px solid var(--leaf);
  padding-left: 22px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--ink);
  align-self: center;
}

.tag-cloud{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag-cloud span, .tag-cloud a{
  font-size: 0.86rem;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  background: var(--surface);
}
.tag-cloud a{
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tag-cloud a:hover{
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}
/* Rotation des 3 couleurs des pôles (teal / orange / violet) sur les
   pastilles du nuage d'activités, pour un accueil plus vivant. Au repos :
   fond blanc conservé, juste le contour et le texte colorés. Au survol :
   couleur pleine + texte blanc + légère lueur colorée + soulèvement, pour
   un effet plus marqué et chatoyant que le survol neutre ci-dessus (ces
   règles plus spécifiques — nth-child + hover — l'emportent sur lui). */
.tag-cloud a:nth-child(3n+1){ border-color: var(--accent); color: var(--accent-deep); }
.tag-cloud a:nth-child(3n+2){ border-color: var(--leaf); color: var(--leaf-deep); }
.tag-cloud a:nth-child(3n+3){ border-color: var(--accent2); color: var(--accent2-deep); }
.tag-cloud a:nth-child(3n+1):hover{
  background: var(--accent-deep); border-color: var(--accent-deep); color: #fff;
  box-shadow: 0 6px 18px -4px rgba(11,107,93,0.55);
  transform: translateY(-1px);
}
.tag-cloud a:nth-child(3n+2):hover{
  background: var(--leaf-deep); border-color: var(--leaf-deep); color: #fff;
  box-shadow: 0 6px 18px -4px rgba(198,53,10,0.55);
  transform: translateY(-1px);
}
.tag-cloud a:nth-child(3n+3):hover{
  background: var(--accent2-deep); border-color: var(--accent2-deep); color: #fff;
  box-shadow: 0 6px 18px -4px rgba(106,71,201,0.55);
  transform: translateY(-1px);
}

/* ---------------- pole cards (reused: home teaser + poles page) ---------------- */
.pole-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pole-card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pole-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 34px var(--shadow);
}
.pole-card:focus-visible{
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}
.pole-card-media{
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.pole-card-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.pole-card:hover .pole-card-media img{ transform: scale(1.05); }
.pole-card-body{
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pole-card-title{
  font-size: 1.2rem;
  margin: 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.pole-card:hover .pole-card-title{ color: var(--accent-deep); text-decoration-color: var(--accent-deep); }
.pole-card .pole-desc{ color: var(--ink-soft); font-size: 0.95rem; margin: 0; flex: 1; }
.pole-tag{
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--accent-deep);
  margin: 0;
}
.pole-card:nth-child(2) .pole-tag{ color: var(--leaf-deep); }
.pole-card:nth-child(3) .pole-tag{ color: var(--accent2-deep); }

/* ---------------- cta band ---------------- */
.cta{
  padding-block: 64px;
  background: var(--accent-deep);
  color: #fff;
}
.cta-grid{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.cta h2{ color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); max-width: 30ch; }
.cta-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.cta .btn-primary{ background: #fff; color: var(--accent-deep); }
.cta .btn-ghost{ color: #fff; border-color: rgba(255,255,255,0.55); }

/* ---------------- newsletter band (accueil) ---------------- */
.newsletter{
  padding-block: 56px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
}
.newsletter-grid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.newsletter-text{ max-width: 46ch; }
.newsletter-text h2{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 4px 0 8px; }
.newsletter-text p{ margin: 0; color: var(--ink-soft); }
.newsletter-form{ min-width: 260px; }
@media (max-width: 720px){
  .newsletter-grid{ flex-direction: column; align-items: flex-start; }
}

/* Habillage du formulaire Infomaniak (le script tiers injecte sa propre
   boîte grise avec son propre titre/texte : on masque ce doublon et on
   réhabille les champs pour qu'ils reprennent l'identité du site). La
   classe .inf-main_8002c5f27890e62ed13bb7ace69db2e6 est générée par
   Infomaniak pour ce formulaire précis ; nos sélecteurs, plus spécifiques
   que le <style> inline du widget, l'emportent sans avoir besoin de
   !important. */
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6{
  background: transparent;
  margin: 0;
}
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 > h4,
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 > span,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 > h4,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 > span{
  display: none;
}
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-content,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-content{
  margin-top: 0;
}
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-input input,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-input input{
  width: 100%;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding-left: 14px;
  font-family: "Work Sans", sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--surface);
}
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-rgpd,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-rgpd{
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin: 10px 0 12px;
}
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-submit,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-submit{
  text-align: left;
}
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-submit input,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-submit input{
  background: var(--accent-deep);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 26px;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: "Work Sans", sans-serif;
  cursor: pointer;
  transition: background 0.15s ease;
}
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-submit input:hover,
.foot-newsletter-embed .inf-main_8002c5f27890e62ed13bb7ace69db2e6 .inf-submit input:hover{
  background: #09584C;
}
.newsletter-form .altcha-label,
.foot-newsletter-embed .altcha-label{
  font-family: "Work Sans", sans-serif;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
/* Bloc dédié de l'accueil : carte blanche pour détacher le formulaire du
   fond crème environnant. */
.newsletter-form .inf-main_8002c5f27890e62ed13bb7ace69db2e6{
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px;
  max-width: 420px;
  box-shadow: 0 8px 24px rgba(36,31,22,0.06);
}

/* ---------------- footer ---------------- */
footer.site{
  padding-block: 52px 36px;
  background: var(--bg);
  border-top: 1px solid var(--rule);
}
.foot-grid{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.75fr) minmax(0,0.85fr) minmax(0,1.05fr) minmax(0,1.3fr);
  align-items: start;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.foot-col.foot-newsletter{
  text-align: justify;
  text-align-last: left;
}
.foot-col.foot-newsletter h4{
  margin-bottom: 8px;
}
.foot-col.foot-newsletter p{
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.foot-newsletter-embed{
  max-width: 100%;
}
.foot-newsletter-embed .inf-input input{
  text-align: left;
}
.foot-brand{ display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.foot-brand img{ width: 64px; height: 64px; object-fit: contain; }
.foot-brand span{ font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.3rem; }
.foot-col h4{
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
  font-family: "Work Sans", sans-serif;
}
.foot-col a, .foot-col p{
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.foot-col a:hover{ color: var(--accent-deep); }
.foot-presse-link{ display: flex; align-items: center; gap: 6px; }
.foot-presse-link svg{ flex: none; }
.foot-legal{ display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a{ color: var(--ink-faint); text-decoration: none; }
.foot-legal a:hover{ color: var(--accent-deep); text-decoration: underline; }
.foot-bottom{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  font-size: 0.8rem;
  color: var(--ink-faint);
  /* Réserve la place du bouton flottant "retour en haut" (fixe, en bas à
     droite de l'écran) pour qu'il ne recouvre jamais ce bloc lorsque la
     page est défilée jusqu'en bas. Si l'espace manque, le bloc crédits
     passe simplement à la ligne suivante grâce à flex-wrap. */
  padding-right: 170px;
}
.foot-credit{
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-credit img{
  height: 28px;
  width: auto;
  object-fit: contain;
  flex: none;
}
.foot-credit span{
  color: var(--ink-faint);
  font-size: 0.8rem;
}
@media (max-width: 600px){
  /* Sur petit écran, le bouton passe au libellé court "Haut" : la place à
     réserver est donc un peu moindre. */
  .foot-bottom{ padding-right: 120px; }
}

/* ---------------- closing photo (shared) ---------------- */
.closing-photo{
  padding-block: 0 64px;
}
.closing-photo figure{ margin: 0; }
.closing-photo img{
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.closing-photo figcaption{
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
}
.closing-cta{
  text-align: center;
  margin-top: 20px;
}

/* ---------------- clickable video / podcast thumbnail (shared) ---------------- */
.video-embed{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  margin-top: 22px;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.video-embed img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.video-embed:hover img{ opacity: 1; transform: scale(1.02); }
.video-duration{
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(18,25,26,0.6);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.video-play{
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  color: #fff;
}
.video-play-circle{
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(18,25,26,0.55);
  border: 1.5px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-embed:hover .video-play-circle{ background: var(--accent-deep); transform: scale(1.08); }
.video-pip-btn{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(18,25,26,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 6px 13px 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.2s ease;
}
.video-pip-btn:hover, .video-pip-btn:focus-visible{ background: var(--accent-deep); }

/* ---------------- inline archival photo within running text (shared) ---------------- */
.text-photo{
  margin: 18px 0 0;
  max-width: 420px;
}
.text-photo img{
  width: 100%;
  display: block;
  border-radius: 8px;
}
.text-photo figcaption{
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---------------- legal page prose (mentions légales / confidentialité) ---------------- */
.legal-content{ padding-block: 56px 80px; }
.legal-content .wrap{ max-width: 820px; }
.legal-content h2{ font-size: 1.25rem; margin: 44px 0 14px; }
.legal-content h2:first-child{ margin-top: 0; }
.legal-content p{ color: var(--ink-soft); margin: 0 0 1.1em; max-width: 72ch; }
.legal-content ul{ color: var(--ink-soft); padding-left: 20px; margin: 0 0 1.1em; }
.legal-content li{ margin-bottom: 0.5em; }
.legal-content .updated{ color: var(--ink-faint); font-size: 0.86rem; margin-bottom: 40px; }

/* ---------------- legal info box (mentions légales / confidentialité) ---------------- */
.legal-box{
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px 30px;
  margin: 28px 0;
}
.legal-box dl{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 16px;
  margin: 0;
}
.legal-box dt{ font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.legal-box dd{ margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
@media (max-width: 600px){
  .legal-box dl{ grid-template-columns: 1fr; gap: 2px 0; }
  .legal-box dt{ margin-top: 10px; }
}

/* ---------------- light stat row (secondary pages) ---------------- */
.stat-row-light{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 36px;
}
.stat-row-light div{
  min-width: 0; /* sans ça, une grille CSS laisse le contenu (mot long,
    intitulé qui s'allonge) forcer la colonne au-delà de sa part équitable,
    au lieu de le laisser passer à la ligne dans l'espace prévu. */
  padding: 20px 22px;
  border-right: 1px solid var(--rule);
}
.stat-row-light div:last-child{ border-right: none; }
.stat-row-light .stat-num{
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-row-light .stat-lbl{
  font-size: 0.76rem;
  color: var(--ink-soft);
}
/* ---------------- back-to-top button ---------------- */
/* Un texte accompagne désormais la flèche : le bouton, jusque-là un simple
   rond, passait inaperçu ou ne laissait pas deviner son rôle au survol. */
.back-to-top{
  position: fixed;
  right: max(20px, calc(50vw - 590px + 24px));
  bottom: 30px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  box-shadow: 0 10px 26px var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.15s ease;
}
.back-to-top.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover{ background: #09584C; }
.back-to-top:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.back-to-top svg{ width: 20px; height: 20px; display: block; flex-shrink: 0; }
/* Sur petit écran, le libellé complet est remplacé par une version courte
   pour garder un bouton compact (cf. .foot-bottom, qui lui réserve la place). */
.back-to-top-short{ display: none; }

@media (max-width: 600px){
  .back-to-top{ right: 14px; bottom: 18px; padding: 11px 16px 11px 13px; font-size: 0.8rem; gap: 6px; }
  .back-to-top svg{ width: 18px; height: 18px; }
  .back-to-top-full{ display: none; }
  .back-to-top-short{ display: inline; }
}

@media (max-width: 480px){
  .stat-num-tight{ white-space: normal; }
}

/* ---------------- bandeau podcast (composant partagé) ---------------- */
.podcast-box{
  background: var(--accent-deep);
  color: #fff;
  border-radius: 10px;
  padding: 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
/* min-width:0 : par défaut un enfant de grille refuse de rétrécir sous la
   largeur de son contenu ("min-width:auto"). Filet de sécurité pour que la
   colonne de texte se redimensionne toujours correctement, quelle que soit
   la largeur réellement disponible. */
.podcast-box > div{ min-width: 0; }
.podcast-icon{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.podcast-box h2{ color: #fff; font-size: 1.5rem; margin: 0 0 14px; }
.podcast-box p{ color: rgba(255,255,255,0.86); margin: 0 0 1em; max-width: 66ch; overflow-wrap: break-word; }
.podcast-doc{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 14px;
}
.podcast-disclosure{
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 14px;
  margin-top: 18px !important;
}
.podcast-doc + .podcast-disclosure{
  border-top: none;
  padding-top: 0;
}
.podcast-transcript{
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 14px;
}
.podcast-transcript summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  overflow-wrap: break-word;
}
.podcast-transcript summary::-webkit-details-marker{ display: none; }
.podcast-transcript summary::after{
  content: "+";
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(255,255,255,0.75);
  transition: transform 0.15s ease;
}
.podcast-transcript[open] summary::after{ content: "\2013"; }
.podcast-transcript-body{
  margin-top: 18px;
  max-width: 66ch;
  color: rgba(255,255,255,0.86);
  font-size: 0.92rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.podcast-transcript-body p{ margin: 0 0 1em; }
.podcast-transcript-body p:last-child{ margin-bottom: 0; }
.podcast-transcript-body strong{ color: #fff; }
.podcast-transcript-body ul,
.podcast-transcript-body ol{ margin: 0 0 1em; padding-left: 1.2em; }
.podcast-transcript-body li{ margin-bottom: 0.6em; }
.podcast-transcript-body li:last-child{ margin-bottom: 0; }
/* Titres d'actes, pour les transcriptions découpées en chapitres : même
   traitement visuel que .eyebrow (petites capitales espacées) mais en clair
   pour rester lisible sur le fond sombre du bandeau podcast. */
.podcast-transcript-body h3{
  font-family: "Work Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #BEF2E6;
  margin: 1.8em 0 0.9em;
}
.podcast-transcript-body h3:first-child{ margin-top: 0; }

/* ---------------- shared responsive ---------------- */
@media (max-width: 900px){
  .pole-grid{ grid-template-columns: 1fr; }
  .stat-strip{ grid-template-columns: repeat(2, 1fr); }
  .stat-strip div:nth-child(2){ border-right: none; }
  .stat-strip div:nth-child(3), .stat-strip div:nth-child(4){ border-top: 1px solid rgba(255,255,255,0.22); }
  .stat-row-light{ grid-template-columns: repeat(2, 1fr); }
  .stat-row-light div:nth-child(2){ border-right: none; }
  .stat-row-light div:nth-child(3), .stat-row-light div:nth-child(4){ border-top: 1px solid var(--rule); }
  .foot-grid{ grid-template-columns: 1fr; gap: 24px; }
  .podcast-box{ grid-template-columns: 1fr; padding: 30px 24px; }
}

@media (max-width: 720px){
  nav.primary{
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--accent-deep);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 32px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  nav.primary a{ font-size: 1.3rem; color: #fff; }
  .menu-check:checked ~ nav.primary{ transform: translateX(0); }
  .nav-drop{ width: 100%; }
  .nav-drop-btn{ font-size: 1.3rem; color: #fff; }
  .nav-drop-btn.current{ border-color: var(--accent); }
  .drop-panel{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 18px 0 0 16px;
    min-width: 0;
    transition: none;
  }
  .nav-drop .drop-panel a{
    padding: 0;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
  }
  .nav-drop .drop-panel a:hover, .nav-drop .drop-panel a[aria-current="page"]{
    background: transparent;
    color: #fff;
  }
  .menu-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.15);
    cursor: pointer;
    position: relative;
    z-index: 41;
  }
  .menu-toggle svg{ width: 18px; height: 18px; }
  .menu-check:checked ~ .menu-toggle .icon-open{ display: none; }
  .menu-check:checked ~ .menu-toggle .icon-close{ display: block; }
  .icon-close{ display: none; }
  .cta-grid{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px){
  .wrap{ padding-inline: 18px; }
  .hero-content{ padding-block: 100px 40px; }
  .hero-actions .btn{ flex: 1 1 auto; justify-content: center; }
  .page-hero-content{ padding-block: 110px 36px; }
  /* En 2 colonnes, certains intitulés (« Une coopérative d'intérêt
     collectif », « Des Ressources partagées »…) n'ont plus la place de
     respirer sur un écran de téléphone étroit : on repasse en 1 colonne. */
  .stat-row-light{ grid-template-columns: 1fr; }
  .stat-row-light div{ border-right: none !important; border-top: 1px solid var(--rule); }
  .stat-row-light div:first-child{ border-top: none; }
}