/* ==========================================================================
   Rayon de Soleil — Design system v3
   Palette chaude à accent unique, alignée sur le logo « soleil » de l'association.
   Grille 8pt · deux familles typographiques · contrastes WCAG AA vérifiés.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices auto-hébergées
   Deux familles variables, servies depuis le site : pas de dépendance à
   Google Fonts (donc pas de transfert d'IP des visiteurs vers un tiers, un
   point sensible en Suisse et dans l'UE), et un rendu identique hors ligne.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs — surfaces */
  --bg:             #FFFFFF;
  --bg-warm:        #FBF8F4;
  --bg-sand:        #F4EFE7;
  --bg-ink:         #1A1714;

  /* Couleurs — texte */
  --ink:            #1A1714;   /* 17.9:1 sur blanc */
  --ink-soft:       #5C554D;   /*  7.3:1 sur blanc */
  --on-ink:         #FBF8F4;   /* 16.9:1 sur --bg-ink */
  --on-ink-soft:    #C4BCB1;   /*  9.5:1 sur --bg-ink */

  /* Couleurs — accent unique */
  --accent:         #D93A17;   /* aplats, boutons (blanc dessus : 4.6:1) */
  --accent-ink:     #B8300F;   /* texte accentué sur fond clair : 6.1:1 */
  --accent-dim:     #FF7A4D;   /* texte accentué sur fond sombre : 6.9:1 */
  --accent-wash:    #FDF1EC;   /* voile très léger */

  /* Traits */
  --border:         #E8E2D9;
  --border-strong:  #D8CFC2;

  /* Rayons */
  --r-sm:  8px;
  --r:     14px;
  --r-lg:  22px;
  --r-pill: 999px;

  /* Ombres douces et superposées */
  --shadow-sm: 0 1px 2px rgba(26, 23, 20, .04),
               0 2px 8px rgba(26, 23, 20, .04);
  --shadow-md: 0 1px 3px rgba(26, 23, 20, .05),
               0 10px 28px rgba(26, 23, 20, .07);
  --shadow-lg: 0 2px 6px rgba(26, 23, 20, .06),
               0 24px 60px rgba(26, 23, 20, .12);

  /* Rythme vertical des sections */
  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw:      1200px;

  /* Typographie */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  /* 17px de base : le public de l'association est majoritairement âgé. */
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* Titres — Fraunces, resserré, légèrement adouci */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 30, 'WONK' 0;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.125rem);  line-height: 1.1; }
h2 { font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.16; }
h3 { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.3; letter-spacing: -.01em; }
h4 { font-size: 1rem; line-height: 1.4; }

p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--accent-ink);
  text-decoration: none;
  text-underline-offset: .2em;
}
a:hover { text-decoration: underline; }

strong { font-weight: 650; }

/* Focus : toujours visible, jamais supprimé */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 1rem; text-decoration: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }
.wrap--text   { max-width: 68ch; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--warm  { background: var(--bg-warm); }
.section--sand  { background: var(--bg-sand); }
.section--ink   { background: var(--bg-ink); color: var(--on-ink); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--on-ink); }
.section--ink p { color: var(--on-ink-soft); }

.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--center { max-width: 40ch; margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.125rem; margin-bottom: 0; }

/* Sur-titre */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before {
  content: '';
  width: 1.75rem; height: 2px;
  background: var(--accent);
  flex: none;
}
@media (min-width: 40rem) { .eyebrow { white-space: nowrap; } }
.section-head--center .eyebrow { justify-content: center; }
.section--ink .eyebrow { color: var(--accent-dim); }

.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.note {
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* Deux colonnes alternées */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > .split__media { order: -1; }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
}

.frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sand);
  box-shadow: var(--shadow-md);
}
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame--tall img     { aspect-ratio: 3 / 4; }
.frame--portrait img { aspect-ratio: 4 / 5; }
.frame--wide img     { aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   4. Boutons et liens d'action
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.25rem;              /* > 44px, confort tactile */
  padding: .875rem 1.875rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-ink); color: #fff; }

.btn--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--secondary:hover { background: var(--bg-sand); border-color: var(--ink); color: var(--ink); }

.btn--onink {
  background: transparent;
  border-color: rgba(251, 248, 244, .45);
  color: var(--on-ink);
}
.btn--onink:hover { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }

.btn--sm { min-height: 2.75rem; padding: .5rem 1.125rem; font-size: .9375rem; }
.btn--block { width: 100%; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}
.actions--center { justify-content: center; }

/* Lien fléché */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.arrow-link svg { flex: none; transition: transform .2s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 16px rgba(26, 23, 20, .05);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

/* Lockup de marque : la marque du logo + le nom composé */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink);
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand__mark { width: 2.375rem; height: 2.375rem; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 30;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.brand__sub {
  font-size: .6875rem;
  font-weight: 550;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
}
.nav__list > li { display: flex; align-items: center; }
.nav__list a {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
}
.nav__list a:hover { background: var(--bg-sand); text-decoration: none; }
.nav__list a[aria-current='page'] { color: var(--accent-ink); }

/* ------------------------------------------------------ Sous-menu « À propos » */
.nav__item--has-sub { position: relative; }
.nav__item--is-current > a { color: var(--accent-ink); }

.nav__sub-toggle {
  appearance: none;
  background: none;
  border: 0;
  margin: 0 0 0 -.375rem;
  padding: .5rem .375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.nav__sub-toggle:hover { background: var(--bg-sand); }
.nav__sub-toggle svg {
  width: 1rem;
  height: 1rem;
  transition: transform .2s var(--ease);
}
.nav__item.is-open > .nav__sub-toggle svg { transform: rotate(180deg); }

.nav__sub { list-style: none; margin: 0; padding: 0; }


.header__cta { display: flex; align-items: center; gap: .5rem; flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}
/* Pas de `gap` ici : l'écart entre barres doit valoir exactement la
   translation de l'état « croix » ci-dessous (pas de 8px). */
.nav-toggle span {
  display: block;
  width: 1.25rem; height: 2px;
  margin: 3px 0;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s var(--ease), opacity .15s var(--ease);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--bg-ink);
  color: var(--on-ink);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Cadre sur le groupe, pas sur la cime des arbres. */
  object-position: center 62%;
}
/* Voile asymétrique : contraste garanti sous le texte à gauche, photo
   laissée respirer à droite là où se trouve le groupe. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(20,17,15,.88) 0%, rgba(20,17,15,.74) 38%,
                            rgba(20,17,15,.42) 68%, rgba(20,17,15,.34) 100%),
    linear-gradient(180deg, rgba(20,17,15,.35) 0%, transparent 30%, rgba(20,17,15,.45) 100%);
}
@media (max-width: 62rem) {
  /* En mobile le texte couvre toute la largeur : voile uniforme. */
  .hero::after {
    background: linear-gradient(180deg, rgba(20,17,15,.7) 0%, rgba(20,17,15,.78) 100%);
  }
}
/* Hauteur calibrée pour qu'à 1366x600 le CTA reste au-dessus de la ligne
   de flottaison, avec un aperçu de la section suivante qui invite à défiler. */
.hero__inner {
  position: relative;
  padding-block: clamp(3.25rem, 6vw, 5rem);
  max-width: 54rem;
}
.hero h1 { color: #fff; margin-bottom: 1.125rem; }
.hero .eyebrow { color: var(--accent-dim); }
.hero__lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: rgba(251, 248, 244, .92);
  max-width: 36rem;
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-top: 1.75rem;
  font-size: .9375rem;
  color: var(--on-ink-soft);
}
.hero__proof strong { color: #fff; font-weight: 650; }

/* En-tête des pages intérieures */
.pagehead {
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.pagehead__inner { max-width: 44rem; }
.pagehead h1 { margin-bottom: 0; }
.pagehead .lead { margin-top: 1.25rem; }

/* Fil d'Ariane */
.crumbs {
  display: flex;
  gap: .5rem;
  margin: 0 0 1.25rem;
  list-style: none;
  font-size: .875rem;
  color: var(--ink-soft);
}
.crumbs a { color: var(--ink-soft); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--border-strong); }

/* --------------------------------------------------------------------------
   7. Bandeau de chiffres
   -------------------------------------------------------------------------- */
.stats-band { border-bottom: 1px solid var(--border); }
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 48rem) { .stat { border-top: 0; } }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 30;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent-ink);
}
.stat__label {
  display: block;
  margin-top: .75rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.section--warm .card, .section--sand .card { background: var(--bg); }
.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.card__icon svg { width: 1.375rem; height: 1.375rem; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .9875rem; margin-bottom: 0; }

/* Étapes numérotées */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 3.5rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: -.15rem;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
}
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--ink-soft); margin-bottom: 0; }

/* Citation / épigraphe */
.quote {
  max-width: 44rem;
  margin: 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--accent);
}
.quote p {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}
.section--ink .quote p { color: var(--on-ink); }
.quote footer {
  margin-top: 1rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section--ink .quote footer { color: var(--on-ink-soft); }

/* Liste à puces « soleil » */
.ticks { list-style: none; display: grid; gap: .75rem; }
.ticks li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: .1rem; top: .6rem;
  width: .625rem; height: .625rem;
  border-radius: 50%;
  background: var(--accent);
}
.ticks strong { color: var(--ink); font-weight: 600; }

/* Bandeau d'appel à l'action */
.cta {
  background: var(--bg-ink);
  color: var(--on-ink);
  position: relative;
  overflow: hidden;
}
.cta__inner {
  position: relative;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  padding-block: var(--section-y);
}
.cta h2 { color: #fff; }
.cta p { color: var(--on-ink-soft); }
/* Motif « rayons » discret, clin d'œil au logo */
.cta::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  width: 46rem; height: 46rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(217, 58, 23, .3) 0%, transparent 62%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Galerie
   -------------------------------------------------------------------------- */
.gallery-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .9375rem;
  color: var(--ink-soft);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .5rem;
}
@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
}

.shot {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-sand);
  cursor: zoom-in;
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26,23,20,.35));
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.shot:hover img { transform: scale(1.05); }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  background: rgba(14, 12, 11, .96);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: grid; }
.lightbox__img {
  max-width: min(100%, 78rem);
  max-height: 82vh;
  width: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lightbox__count {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.lightbox__btn svg { width: 1.25rem; height: 1.25rem; }
.lightbox__btn:hover { background: var(--accent); }
.lightbox__btn--close { top: 1.25rem; right: 1.25rem; }
.lightbox__btn--prev  { left: 1.25rem;  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
  .lightbox__btn--prev { left: .75rem; }
  .lightbox__btn--next { right: .75rem; }
}

/* --------------------------------------------------------------------------
   10. Documents
   -------------------------------------------------------------------------- */
.docgroup + .docgroup { margin-top: clamp(3rem, 6vw, 4.5rem); }
.docgroup__head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--border);
}
.docgroup__head h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin: 0; }
.docgroup__head span {
  font-size: .875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.docs {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.doc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.doc:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.doc__thumb {
  display: block;
  background: var(--bg-sand);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.25rem 0;
}
.doc__thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  box-shadow: 0 -1px 0 var(--border), var(--shadow-sm);
}
.doc__body {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.25rem;
  flex: 1;
}
.doc__body h3 { font-size: 1.0625rem; margin: 0; }
.doc__meta {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.doc__body .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   11. Dons
   -------------------------------------------------------------------------- */
.paycard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.paycard h3 { margin-bottom: 1.25rem; }

.dl { margin: 0; }
.dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding: .875rem 0;
  border-top: 1px solid var(--border);
}
.dl__row:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 30rem) {
  .dl__row { grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline; }
}
.dl dt {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dl dd { margin: 0; font-weight: 550; }
.dl dd.is-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  font-size: 1.0625rem;
}

/* Carte TWINT : QR carré, à scanner depuis le téléphone. */
.qr {
  margin: 0;
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.qr img {
  width: 100%;
  max-width: 15rem;
  margin: 0 auto 1rem;
  padding: .75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.qr figcaption p { margin: 0; font-size: .9375rem; font-weight: 600; }
.qr figcaption span {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Bulletin QR-facture suisse : format paysage, doit rester lisible et imprimable. */
.qrbill {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.qrbill img {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.qrbill figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem clamp(1.25rem, 3vw, 1.75rem);
}
.qrbill figcaption p { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.qrbill figcaption strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   12. Formulaire
   -------------------------------------------------------------------------- */
.form {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.form h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.form__grid { display: grid; gap: 1.25rem; }
@media (min-width: 34rem) { .form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--accent-ink); }
.field input, .field textarea {
  font: inherit;
  font-size: 1rem;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field__hint { font-size: .875rem; color: var(--ink-soft); }

/* Encart d'information */
.callout {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
  background: var(--accent-wash);
  border: 1px solid #F3D9D0;
  border-radius: var(--r);
  font-size: .9375rem;
}
.callout svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--accent-ink); }
.callout p { margin: 0; }
.callout p + p { margin-top: .5rem; }

/* Bloc de contact direct */
.contact-list { list-style: none; display: grid; gap: 1.5rem; margin: 2rem 0 0; }
.contact-list dd { margin: 0; }   /* annule le retrait par défaut des <dd> */
.contact-list dt, .contact-list__label {
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}
.contact-list__value { font-size: 1.125rem; font-weight: 550; }
.contact-list__value a { font-weight: 600; }

/* --------------------------------------------------------------------------
   13. Pied de page
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg-ink);
  color: var(--on-ink-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .9375rem;
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer h2 { font-size: 1rem; }
.footer__title {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-ink);
}
.footer .brand { color: var(--on-ink); margin-bottom: 1rem; }
.footer .brand__sub { color: var(--on-ink-soft); }
.footer p { color: var(--on-ink-soft); }
.footer a { color: var(--on-ink); }
.footer a:hover { color: var(--accent-dim); }
.footer__links { list-style: none; display: grid; gap: .625rem; }
.footer__links a { color: var(--on-ink-soft); }
.footer__links a:hover { color: var(--on-ink); }

.social {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin-bottom: 1.5rem;
}
.social a {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(251, 248, 244, .2);
  border-radius: var(--r-pill);
  color: var(--on-ink);
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.social svg { width: 1.125rem; height: 1.125rem; }

.footer__sponsor {
  display: inline-block;
  padding: .5rem .75rem;
  background: #fff;
  border-radius: var(--r-sm);
}
.footer__sponsor img { height: 2.5rem; width: auto; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(251, 248, 244, .14);
  font-size: .875rem;
  color: var(--on-ink-soft);
}
.footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   14. Responsive — navigation mobile
   -------------------------------------------------------------------------- */
@media (max-width: 78rem) {
  .nav-toggle { display: flex; }
  .header__cta .btn { display: none; }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    max-height: calc(100vh - 4.75rem);
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
  }
  .nav__list > li + li { border-top: 1px solid var(--border); }
  .nav__list a { padding: 1rem .25rem; font-size: 1.0625rem; border-radius: 0; }
  .nav__list a:hover { background: transparent; color: var(--accent-ink); }
  .nav__cta { padding: 1rem var(--gutter) 1.5rem; border-top: 1px solid var(--border); }
  .nav__cta .btn { width: 100%; }

  /* Sous-menu déplié en place, sous son entrée parente. */
  .nav__list > li { display: block; }
  .nav__list > .nav__item--has-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .nav__list > .nav__item--has-sub > a { grid-column: 1; }
  .nav__list .nav__sub-toggle {
    grid-column: 2;
    justify-self: end;
    margin: 0;
    padding: 1rem .25rem;
    min-height: 3rem;
    min-width: 3rem;
  }
  .nav__sub {
    grid-column: 1 / -1;
    display: none;
    padding-left: 1.25rem;
    border-top: 1px solid var(--border);
  }
  .nav__item.is-open > .nav__sub { display: block; }
  .nav__sub li + li { border-top: 1px solid var(--border); }
  .nav__sub a { padding: .875rem .25rem; font-size: 1rem; color: var(--ink-soft); }
  .nav__sub a:hover, .nav__sub a[aria-current='page'] { color: var(--accent-ink); }
}
@media (min-width: 78.0625rem) {
  .nav__cta { display: none; }

  .nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    min-width: 13.5rem;
    padding: .5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  /* Le survol et le bouton pilotent l'ouverture ; :focus-within porte sur le
     sous-menu lui-même, pour qu'il reste ouvert pendant la tabulation sans
     empêcher Échap de le refermer depuis le bouton. */
  .nav__item--has-sub:hover > .nav__sub,
  .nav__item.is-open > .nav__sub,
  .nav__sub:focus-within {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__sub a {
    display: block;
    padding: .5rem .625rem;
    border-radius: var(--r-sm);
    font-size: .9375rem;
    white-space: nowrap;
  }
}

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   15. Apparition au défilement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   16. Impression
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer, .nav, .cta, .lightbox { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .hero { background: none; color: #000; }
  .hero::after, .hero__media { display: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* --------------------------------------------------------------------------
   17. Pied de page — mentions légales et crédit
   -------------------------------------------------------------------------- */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.25rem;
}
.footer__legal a,
.footer__legal-btn {
  color: var(--on-ink-soft);
  font-size: .875rem;
}
.footer__legal a:hover,
.footer__legal-btn:hover { color: var(--on-ink); text-decoration: underline; }

/* Bouton « Gérer les cookies » : rendu identique aux liens voisins. */
.footer__legal-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  text-underline-offset: .2em;
}

.footer__credit {
  flex-basis: 100%;
  margin-top: .5rem;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(251, 248, 244, .10);
  text-align: center;
  font-size: .8125rem;
  letter-spacing: .01em;
}
.footer__credit a { color: var(--on-ink-soft); font-weight: 550; }
.footer__credit a:hover { color: var(--accent-dim); }

/* --------------------------------------------------------------------------
   18. Pages légales — texte long
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 2rem; margin-bottom: .4rem; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--accent-ink); }
.prose address {
  font-style: normal;
  margin-bottom: 1.1em;
}
.prose .updated {
  display: inline-block;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: .5rem 1rem;
  background: var(--bg-sand);
  border-radius: var(--r-pill);
  font-size: .875rem;
  color: var(--ink-soft);
}

/* Sommaire des pages légales */
.toc {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem 1.75rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.toc h2 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .875rem;
  padding: 0;
  border: 0;
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: .5rem;
  padding: 0;
  margin: 0;
}
.toc li { counter-increment: toc; margin: 0; }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: .625rem;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--accent-ink);
}
.toc a { color: var(--ink); }

/* Tableau simple (durées de conservation, cookies) */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .9375rem;
}
.table th, .table td {
  text-align: left;
  vertical-align: top;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-weight: 650;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-warm);
}
.table tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   19. Bandeau de consentement aux cookies
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  z-index: 200;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent[hidden] { display: none; }

.consent__panel {
  pointer-events: auto;
  width: min(46rem, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
@media (prefers-reduced-motion: no-preference) {
  .consent__panel { animation: consent-in .32s var(--ease) both; }
}
@keyframes consent-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.consent__title {
  font-size: 1.1875rem;
  margin: 0 0 .5rem;
}
/* Cible de focus programmatique, non interactive : pas d'anneau visible. */
.consent__title:focus, .consent__title:focus-visible { outline: none; }
.consent__text {
  color: var(--ink-soft);
  font-size: .9375rem;
  margin: 0 0 1.25rem;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
}
/* Accepter et Refuser : même taille, même poids visuel (exigence nLPD/RGPD). */
.consent__actions .btn--primary,
.consent__actions .btn--secondary { flex: 1 1 12rem; justify-content: center; }
.consent__link {
  appearance: none;
  background: none;
  border: 0;
  padding: .5rem .25rem;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.consent__link:hover { color: var(--ink); }

.consent__prefs {
  display: grid;
  gap: .875rem;
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.consent__prefs[hidden] { display: none; }

.consent__opt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .875rem;
  align-items: start;
  padding: 1rem 1.125rem;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.consent__opt input {
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  margin: .2rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent__opt input:disabled { cursor: not-allowed; opacity: .55; }
.consent__opt label { font-weight: 600; cursor: pointer; }
.consent__opt input:disabled + label { cursor: default; }
.consent__opt p {
  grid-column: 2;
  margin: 0;
  font-size: .875rem;
  color: var(--ink-soft);
}
.consent__badge {
  margin-left: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

@media (max-width: 30rem) {
  .consent { left: 0; right: 0; bottom: 0; }
  .consent__panel { border-radius: var(--r-lg) var(--r-lg) 0 0; border-width: 1px 0 0; }
  .consent__actions .btn--primary,
  .consent__actions .btn--secondary { flex-basis: 100%; }
  .consent__link { width: 100%; text-align: center; }
}

@media print { .consent { display: none !important; } }

/* --------------------------------------------------------------------------
   20. Organigramme
   -------------------------------------------------------------------------- */
.orgchart { display: grid; gap: 0; }

.orgchart__top {
  display: flex;
  justify-content: center;
}
.orgchart__top .orgcard { max-width: 22rem; }

/* Trait de liaison entre le sommet et les responsables de domaine. */
.orgchart__link {
  width: 2px;
  height: clamp(1.75rem, 4vw, 2.75rem);
  margin-inline: auto;
  background: var(--border-strong);
}
.orgchart__rule {
  height: 2px;
  background: var(--border-strong);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 2px;
}

.orgcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.5rem 1.625rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.section--warm .orgcard, .section--sand .orgcard { background: var(--bg); }
.orgcard:hover { transform: translateY(-2px); border-color: var(--border-strong); }

.orgcard__role {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.orgcard__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.orgcard__tel {
  margin-top: .375rem;
  font-size: .9375rem;
  font-weight: 550;
  color: var(--ink-soft);
}
.orgcard__tel a { color: var(--ink-soft); }
.orgcard__tel a:hover { color: var(--accent-ink); }

.orgcard--lead {
  background: var(--bg-ink);
  border-color: var(--bg-ink);
  box-shadow: var(--shadow-md);
}
.orgcard--lead .orgcard__role { color: var(--accent-dim); }
.orgcard--lead .orgcard__name { color: var(--on-ink); }
.orgcard--lead .orgcard__tel,
.orgcard--lead .orgcard__tel a { color: var(--on-ink-soft); }
.orgcard--lead .orgcard__tel a:hover { color: var(--accent-dim); }

/* --------------------------------------------------------------------------
   21. Partenaires
   -------------------------------------------------------------------------- */
.partners {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: 0;
  margin: 0;
}
.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  min-height: 10.5rem;
  padding: 1.75rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-align: center;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.section--warm .partner, .section--sand .partner { background: var(--bg); }
.partner:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.partner img {
  /* Boîte de rendu identique pour tous : les logos carrés et les logos très
     larges occupent la même surface, la grille reste régulière. */
  width: 100%;
  height: 5rem;
  object-fit: contain;
  object-position: center;
}
.partner__name {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: balance;
}
/* Repli si le fichier du logo est absent : le nom prend toute la place. */
.partner.is-missing img { display: none; }
.partner.is-missing .partner__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   22. Formulaire : messages et champs pièges
   -------------------------------------------------------------------------- */
.alerte {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.75rem;
  border: 1px solid;
  border-radius: var(--r);
  font-size: .9375rem;
}
.alerte svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.alerte p { margin: 0; }
.alerte p + p { margin-top: .35rem; }
.alerte ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.alerte li { margin-bottom: .25rem; }

.alerte--ok {
  background: #F1F7F1;
  border-color: #C6DFC6;
  color: #1F4B2A;
}
.alerte--erreur {
  background: var(--accent-wash);
  border-color: #F2C4B6;
  color: #8C2409;
}
.alerte--erreur a, .alerte--ok a { color: inherit; text-decoration: underline; }

/* Champs pièges : hors écran mais lisibles par les robots, jamais par les
   lecteurs d'écran (aria-hidden) ni au clavier (tabindex="-1"). */
.piege {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field--calcul { max-width: 18rem; }
.field--calcul input { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   23. Mosaïque photo de la page d'accueil
   -------------------------------------------------------------------------- */
.mosaique {
  display: grid;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16 / 9;
}

.mosaique__vue {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-sand);
  box-shadow: var(--shadow-sm);
}
.mosaique__vue--grande { grid-row: 1 / span 2; }
.mosaique__vue:hover { text-decoration: none; }

.mosaique__vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.mosaique__vue:hover img,
.mosaique__vue:focus-visible img { transform: scale(1.045); }

/* Voile sombre en bas : la légende reste lisible sur n'importe quelle photo. */
.mosaique__vue::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(26, 23, 20, .78), rgba(26, 23, 20, 0));
  pointer-events: none;
}

.mosaique__legende {
  position: absolute;
  left: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(.875rem, 1.8vw, 1.25rem);
  z-index: 1;
  color: #fff;
  font-size: clamp(.875rem, 1.1vw, 1rem);
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(26, 23, 20, .5);
}

@media (max-width: 48rem) {
  .mosaique {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .mosaique__vue--grande { grid-row: auto; }
  .mosaique__vue { aspect-ratio: 4 / 3; }
  .mosaique__vue--grande { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   19. Éditions
   Liste des éditions, journées d'une édition, sélecteur d'année de la galerie.
   Composants ajoutés avec le back-office : tout est alimenté par la base.
   -------------------------------------------------------------------------- */

/* Liste des éditions */
.editions {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.edition-carte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.edition-carte:hover,
.edition-carte:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.edition-carte__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-sand); }
.edition-carte__media img { width: 100%; height: 100%; object-fit: cover; }
.edition-carte:hover .edition-carte__media img { transform: scale(1.02); }
.edition-carte__media img { transition: transform .4s var(--ease); }

.edition-carte__corps { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.edition-carte__corps h2 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.edition-carte__corps p { margin: 0 0 .5rem; color: var(--ink-soft); }

.edition-carte__badge {
  display: inline-block;
  margin: 0 0 .6rem !important;
  padding: .2rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink) !important;
  background: var(--accent-wash);
  border-radius: var(--r-pill);
}
.edition-carte__dates { font-weight: 600; color: var(--ink) !important; }
.edition-carte__compte { margin-bottom: 0 !important; font-size: .9rem; }

/* Une journée à l'intérieur d'une édition */
.journee { margin-top: clamp(2.5rem, 5vw, 4rem); }
.journee:first-of-type { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.journee__tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding-bottom: .75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.journee__titre { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.journee__date { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.journee__compte {
  margin: 0 0 0 auto;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-ink);
  white-space: nowrap;
}
.journee__texte { margin: -.5rem 0 1.5rem; max-width: 68ch; color: var(--ink-soft); }

/* Sélecteur d'année de la galerie */
.galerie-annees {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.galerie-annees__lien {
  display: inline-block;
  padding: .45rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.galerie-annees__lien:hover { color: var(--ink); border-color: var(--border-strong); }
.galerie-annees__lien.is-active {
  color: #FFF;
  background: var(--accent);
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   20. Document sans aperçu
   Le serveur ne peut pas toujours produire l'image de la première page ;
   dans ce cas la carte affiche une vignette neutre plutôt qu'un trou.
   -------------------------------------------------------------------------- */
.doc__thumb--vide {
  display: grid;
  place-items: center;
  background: var(--bg-sand);
  color: var(--ink-soft);
}
.doc__thumb--vide svg { width: 2.5rem; height: 2.5rem; opacity: .55; }