/* =========================================================
   components.css — L'Atelier des Arts · Piste Kandinsky
   Tous les composants visuels du thème
   ========================================================= */

/* ============================================================
   0. RÈGLES DE SÛRETÉ RESPONSIVE
   Les adresses e-mail et les URL longues n'offrent presque aucun point de
   césure : sur un écran de 320 px elles font déborder la page. On les autorise
   à se couper dans les zones de texte.
   ============================================================ */
.entry-content,
.contact-info-list,
.contact-info-block,
.sidebar-card,
.site-footer,
.invitation-card,
.hero-offer { overflow-wrap: break-word; }

/* ============================================================
   1. TOPBAR KANDINSKY
   ============================================================ */
.topbar { display: flex; height: 6px; }
.topbar span { flex: 1; }
.topbar span:nth-child(1) { background: var(--color-red); }
.topbar span:nth-child(2) { background: var(--color-yellow); }
.topbar span:nth-child(3) { background: var(--color-blue); }
.topbar span:nth-child(4) { background: var(--color-navy); }
.topbar span:nth-child(5) { background: var(--color-green); }

/* ============================================================
   1b. BARRE RACCOURCIS (sous la topbar, au-dessus du header sticky)
   ============================================================ */
.quickbar {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
}
.quickbar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--padding-x);
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  min-height: 38px;
}
.quickbar__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  letter-spacing: 0.04em;
  transition: color var(--ease-fast), background var(--ease-fast);
  white-space: nowrap;
}
.quickbar__link:hover { color: var(--color-red); background: rgba(228,61,61,0.05); }
.quickbar__icon { font-size: 0.88rem; }
.quickbar__sep {
  display: block;
  width: 1px;
  height: 14px;
  background: var(--color-line);
}
.quickbar__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--ease-fast);
  white-space: nowrap;
}
.quickbar__cta:hover { background: var(--color-red-dark); color: var(--color-white); }

@media (max-width: 768px) {
  .quickbar { display: none; }
}

/* ============================================================
   2. HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 14px var(--padding-x);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

/* Logo
   Agrandi le 08/09/2026 à la demande de la cliente (retour du 6 septembre,
   point 2.4 du plan d'action). La marge disponible sur la ligne du header
   était de 105px (nav = 661px pour 766px de colonne) : on reste dedans. */
.site-logo { display: flex; align-items: center; gap: 14px; }
.site-logo__img { height: 64px; width: auto; }
.site-logo__text { font-family: var(--font-display); line-height: 1.1; }
.site-logo__name { display: block; font-size: 1.55rem; font-weight: 500; color: var(--color-ink); }
.site-logo__sub  {
  display: block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Nav principale */
.main-nav__list {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;   /* 7 rubriques : on évite le passage à la ligne */
  list-style: none;
  margin: 0; padding: 0;
}
.main-nav__list li { position: relative; }
.main-nav__list > li > a {
  display: block;
  padding: 8px 9px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  position: relative;
  white-space: nowrap;
  transition: color var(--ease-fast);
}
.main-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  background: var(--color-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.main-nav__list > li > a:hover { color: var(--color-red); }
.main-nav__list > li > a:hover::after { transform: scaleX(1); }
.main-nav__list .current-menu-item > a,
.main-nav__list .current-page-ancestor > a { color: var(--color-red); }
.main-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* Sous-menus */
.main-nav__list .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-red);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 100;
  list-style: none;
  margin: 0; padding: 8px 0;
}
/* Ouverture au survol ET au clavier (navigation par tabulation) */
.main-nav__list li:hover > .sub-menu,
.main-nav__list li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav__list .sub-menu a {
  display: block;
  padding: 8px 18px;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.main-nav__list .sub-menu a:hover { background: var(--color-bg-alt); color: var(--color-red); }

/* Niveau 3 et au-delà : le sous-menu s'ouvre sur le côté */
.main-nav__list .sub-menu .sub-menu {
  top: -8px;
  left: 100%;
  border-top: 1px solid var(--color-line);
  border-left: 3px solid var(--color-red);
  transform: translateX(-6px);
}
.main-nav__list .sub-menu li:hover > .sub-menu,
.main-nav__list .sub-menu li:focus-within > .sub-menu { transform: translateX(0); }
/* Si le sous-sous-menu déborde à droite, il s'ouvre vers la gauche.
   Couvre les quatre dernières rubriques : « École Musmat », qui est la seule à
   porter un 3ᵉ niveau, est 4ᵉ en partant de la fin et débordait sur un écran
   de 1024 px. */
.main-nav__list > li:nth-last-child(-n+4) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
  border-left: 1px solid var(--color-line);
  border-right: 3px solid var(--color-red);
}

/* Repère visuel : cette entrée déploie un sous-menu */
.main-nav__list .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 4px; height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.55;
}
.main-nav__list > li.menu-item-has-children > a { padding-right: 18px; }
.main-nav__list .sub-menu .menu-item-has-children > a { padding-right: 26px; }
.main-nav__list .sub-menu .menu-item-has-children > a::before {
  right: 12px;
  transform: translateY(-50%) rotate(-45deg);
}

/* Menu burger */
.menu-toggle { display: none; }
.menu-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle-label span { display: block; width: 26px; height: 2px; background: var(--color-navy); }

/* ============================================================
   3. BOUTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: background var(--ease-fast), color var(--ease-fast);
}
/* Rouge = action à effectuer. Tous les survols de boutons y mènent,
   même quand le bouton n'est pas rouge au repos (mail du 21/07/2026). */
.btn--primary { background: var(--color-red);    color: var(--color-white); }
.btn--primary:hover { background: var(--color-red-dark); color: var(--color-white); }
.btn--blue    { background: var(--color-blue);   color: var(--color-white); }
.btn--blue:hover { background: var(--color-red); color: var(--color-white); }
.btn--yellow  { background: var(--color-yellow); color: var(--color-ink); }
.btn--yellow:hover { background: var(--color-red); color: var(--color-white); }

/* Soutenir l'association : navy + texte jaune. Même traitement pour le
   bouton « Adhérer » du header et le bloc « Faire un don » de la colonne. */
.btn--soutien {
  background: var(--color-navy);
  color: var(--color-yellow);
}
.btn--soutien:hover { background: var(--color-red); color: var(--color-white); }

.btn--ghost   {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-navy);
}
.btn--ghost:hover { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }
.btn--ghost-red {
  background: transparent;
  color: var(--color-red);
  border: 2px solid var(--color-red);
}
.btn--ghost-red:hover { background: var(--color-red); color: var(--color-white); }
.btn--block { width: 100%; }
.btn--sm  { padding: 9px 18px; font-size: 0.8rem; }
.btn--lg  { padding: 16px 36px; font-size: 1rem; }

/* ============================================================
   4. HÉROS — PAGE D'ACCUEIL
   ============================================================ */
.hero-home {
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero-home__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--padding-x);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Formes géométriques décoratives Kandinsky */
.hero-home__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.shape-circle-red {
  position: absolute;
  top: -50px; left: -70px;
  width: 240px; height: 240px;
  background: var(--color-red);
  border-radius: 50%;
  opacity: 0.92;
}
.shape-triangle-yellow {
  position: absolute;
  top: 110px; right: 42%;
  width: 0; height: 0;
  border-left:  28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 48px solid var(--color-yellow);
  transform: rotate(18deg);
}
.shape-circle-blue {
  position: absolute;
  bottom: 32px; left: 34%;
  width: 40px; height: 40px;
  background: var(--color-blue);
  border-radius: 50%;
}
.shape-dot-green {
  position: absolute;
  top: 20px; right: 6%;
  width: 26px; height: 26px;
  background: var(--color-green);
  border-radius: 50%;
}

/* Texte hero */
.hero-home__copy { position: relative; z-index: 1; min-width: 0; }
/* Bandeau « à la une » — information passive, donc orangé (mail du 21/07/2026) */
.hero-home__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-4);
  background: var(--color-orange);
  padding: 5px 14px;
}
.hero-home__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.8rem, 5.6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.hero-home__title em { font-style: normal; color: var(--color-red); }
.hero-home__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-6);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
}
.hero-home__dot {
  width: 6px; height: 6px;
  background: var(--color-yellow);
  border-radius: 50%;
  display: block;
}
.hero-home__lede {
  font-size: 1.06rem;
  color: var(--color-ink-soft);
  line-height: 1.65;
  max-width: 40ch;
  margin-bottom: var(--space-8);
}
.hero-home__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Deux propositions mises en avant dans le bandeau (chœur / ateliers Musmat).
   Chacune a son texte, son bouton et son contact direct. */
.hero-home__offers {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 46ch;
}
.hero-offer {
  border-left: 4px solid var(--color-orange);
  padding-left: 16px;
}
.hero-offer__text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink);
  margin-bottom: 12px;
}
.hero-offer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.hero-offer__contact {
  font-size: 0.9rem;
  color: var(--color-blue);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-fast), color var(--ease-fast);
}
.hero-offer__contact:hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

/* Affiche hero (encadrée ombre dure) */
.hero-home__poster { position: relative; z-index: 1; min-width: 0; }
/* Contour orangé fin (mail du 21/07/2026) : encadrement plus discret
   qu'à l'origine, pour ne pas empiéter sur le texte */
.hero-home__poster-frame {
  background: var(--color-white);
  padding: 6px;
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-hard);
  transition: transform var(--ease), box-shadow var(--ease);
  position: relative;
}
.hero-home__poster-frame:hover {
  transform: translate(-3px, -3px);
  box-shadow: 18px 18px 0 0 var(--color-red);
}
.hero-home__poster-frame img { width: 100%; display: block; }

/* Seconde image du bandeau, plus petite et décalée pour ne pas concurrencer
   la première. */
.hero-home__poster-second { margin-top: 26px; }
.hero-home__poster-second .hero-home__poster-frame { box-shadow: 10px 10px 0 0 var(--color-navy); }
.hero-home__poster-second .hero-home__poster-caption { margin-top: 10px; }

/* Logo du festival, en tête de la page chapeau Festival. Pas de cadre :
   c'est un logo sur fond blanc, pas une affiche. */
.festival-logo {
  margin: 0 0 var(--space-8);
  text-align: center;
}
/* Version longue du logo, placee sous « Decouvrir le festival » depuis le
   09/09/2026 (point 5.1). Elle fait 2000x324 : sans plafond de largeur, elle
   ecraserait la liste juste au-dessus. */
.festival-logo--bas {
  margin-top: var(--space-12);
  max-width: 520px;
}
.festival-logo img {
  max-width: min(420px, 100%);
  height: auto;
  display: inline-block;
}

/* Cadre d'affiche générique, même traitement que le héros (fond blanc,
   contour orangé fin, ombre dure), pour les affiches insérées dans le
   contenu des pages (éditions du festival, Voix Lyriques, Quay'Bello…) */
.poster-frame {
  display: block;
  max-width: 340px;
  margin-inline: auto;
  background: var(--color-white);
  padding: 6px;
  border: 2px solid var(--color-orange);
  box-shadow: var(--shadow-hard);
}
/* Un cadre centré placé après un cadre flotté doit passer dessous, sinon les
   deux se chevauchent (constaté sur la page Quay'Bello, 17 août 2026). */
.poster-frame:not([class*="--float"]) {
  clear: both;
  /* Aligné le 08/09/2026 sur les autres figures du contenu (2.75em) : cette
     règle, plus spécifique, retenait l'ancienne marge de 2rem et la photo
     restait collée au texte suivant. */
  margin-block: 2.75em;
}
/* Un titre placé juste après une image flottante doit lui aussi passer
   dessous, sinon il se retrouve coincé dans l'espace restant et le texte
   s'empile lettre par lettre (constaté page École Musmat, 19 août 2026). */
.entry-content h2, .entry-content h3, .entry-content h4 {
  clear: both;
}
.poster-frame img { width: 100%; display: block; }
@media (min-width: 600px) {
  .poster-frame--float-right {
    float: right;
    margin-left: var(--space-8);
    margin-bottom: var(--space-4);
  }
}
.hero-home__poster-placeholder {
  aspect-ratio: 3 / 4;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
  padding: 20px;
}
.hero-home__poster-caption {
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

/* ============================================================
   5. PILIER CARDS (saison)
   ============================================================ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--ease);
}
.pillar-card:hover { transform: translateY(-4px); }

.pillar-card__bar { height: 6px; }
.pillar-card--red    .pillar-card__bar { background: var(--color-red); }
.pillar-card--yellow .pillar-card__bar { background: var(--color-yellow); }
.pillar-card--blue   .pillar-card__bar { background: var(--color-blue); }

.pillar-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.pillar-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pillar-card:hover .pillar-card__media img { transform: scale(1.05); }

/* En-tete de carte : etiquette et titre, places AU-DESSUS de la photo depuis
   le 09/09/2026 (demande du 6 septembre, « tous au meme niveau »). La hauteur
   minimale aligne les photos des trois cartes meme quand un titre passe sur
   deux lignes. */
.pillar-card__tagline { display: flex; flex-direction: column; gap: 16px; }
.pillar-card__tagline .pillar-card__tag { padding: 0 24px 6px; }
.pillar-card > .pillar-card__title { padding: 0 24px 16px; align-self: start; }
/* Grille imbriquee : les deux rangees d'une carte (en-tete, puis le reste)
   s'alignent sur celles des cartes voisines, donc les photos demarrent toutes
   au meme niveau quelle que soit la longueur des titres. */
.pillars-grid { grid-template-rows: auto auto 1fr; }
.pillar-card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}
.pillar-card__rest { display: flex; flex-direction: column; min-width: 0; }
/* Repli pour les navigateurs sans grille imbriquee. */
@supports not (grid-template-rows: subgrid) {
  .pillar-card { display: flex; flex-direction: column; }
  .pillar-card__tagline { min-height: 62px; }
  .pillar-card__title   { min-height: 68px; }
}
.pillar-card__body > .pillar-card__list {
  list-style: disc;
  padding-left: 1.15em;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.pillar-card__body > .pillar-card__list li + li { margin-top: 0.45em; }

.pillar-card__body {
  padding: 22px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pillar-card__tag {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 500;
}
.pillar-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
}
.pillar-card__text { font-size: 0.94rem; color: var(--color-ink-soft); flex: 1; line-height: 1.6; }
.pillar-card__link {
  align-self: flex-start;
  font-weight: 500;
  font-size: 0.88rem;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-ink);
  color: var(--color-ink);
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
/* Une carte peut porter plusieurs liens (carte « actions pédagogiques ») */
.pillar-card__link + .pillar-card__link { margin-top: 10px; }
.pillar-card--red    .pillar-card__link { color: var(--color-red);    border-color: var(--color-red); }
/* Le lien de la carte jaune est en navy, pas en jaune : sur fond blanc le jaune
   tombe à un contraste d'environ 1,4:1, illisible. Navy + jaune restent la paire
   du code-couleur, ici c'est le liseré du haut qui porte le jaune. */
.pillar-card--yellow .pillar-card__link { color: var(--color-navy);   border-color: var(--color-yellow); }
.pillar-card--blue   .pillar-card__link { color: var(--color-blue);   border-color: var(--color-blue); }

/* ============================================================
   6. BANDE CITATION (section noire Kandinsky)
   ============================================================ */
.quote-band {
  background: var(--color-navy);
  padding: 88px var(--padding-x);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.quote-band__inner {
  max-width: 760px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.quote-band__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  color: var(--color-white);
  line-height: 1.25;
  margin-bottom: 18px;
}
.quote-band__attr {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-yellow);
}
/* Formes décoratives dans la bande */
.quote-band__shape { position: absolute; }
.quote-band__shape--circle-red {
  top: 24px; left: 6%;
  width: 88px; height: 88px;
  background: var(--color-red);
  border-radius: 50%;
}
.quote-band__shape--triangle {
  bottom: 20px; left: 16%;
  width: 0; height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 38px solid var(--color-yellow);
  transform: rotate(-10deg);
}
.quote-band__shape--rect {
  top: 50%; right: 5%;
  width: 64px; height: 64px;
  background: var(--color-green);
  transform: translateY(-50%);
}
.quote-band__shape--line {
  bottom: 40px; right: 20%;
  width: 110px; height: 2px;
  background: var(--color-yellow);
  transform: rotate(8deg);
}

/* ============================================================
   7. ACTUALITÉS (3 colonnes)
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Invitations permanentes, sous les actualités de l'accueil.
   Volontairement distinctes des articles : elles ne défilent pas. */
.invitations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: var(--space-10);
}
.invitation-card {
  background: var(--color-white);
  border-top: 4px solid var(--color-blue);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invitation-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-navy);
}
.invitation-card__text {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.invitation-card__link {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
  padding-bottom: 2px;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.invitation-card__link:hover { color: var(--color-red); border-bottom-color: var(--color-red); }

/* Les deux façons de nous soutenir, au-dessus des logos partenaires.
   Code couleur du site : navy + jaune = soutien. */
.soutiens-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: var(--space-10);
}
.soutien-card {
  background: var(--color-white);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.soutien-card--navy   { border-top: 4px solid var(--color-navy); }
.soutien-card--yellow { border-top: 4px solid var(--color-yellow); }
.soutien-card__text {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--color-ink-soft);
}
.soutien-card__link {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  padding-bottom: 2px;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.soutien-card__link:hover { color: var(--color-red); border-bottom-color: var(--color-red); }
.news-item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.news-item__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-orange);
}
.news-item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.news-item:hover .news-item__media img { transform: scale(1.04); }
.news-item__date {
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.news-item__date strong { color: var(--color-red); font-weight: 600; }
.news-item__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.2;
}
.news-item__title a:hover { color: var(--color-red); }
.news-item__excerpt { font-size: 0.94rem; color: var(--color-ink-soft); line-height: 1.6; }
.news-item__link {
  align-self: flex-start;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-red);
  border-bottom: 1px solid var(--color-red);
  padding-bottom: 1px;
}

/* ============================================================
   8. PARTENAIRES
   ============================================================ */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 80px;
  max-width: 100%;
  padding: 10px;
  filter: grayscale(1) opacity(0.5);
  transition: filter var(--ease), transform var(--ease);
}
.partner-logo:hover {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}
.partner-logo img { max-height: 100%; max-width: 220px; width: auto; object-fit: contain; }
a.partner-logo { text-decoration: none; color: inherit; cursor: pointer; }
/* Partenaire cité sans logo : même gabarit que les autres cases, le nom
   remplaçant l'image (demande du 6 septembre — Fromagerie Oger-Guillo). */
.partner-logo--texte {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  text-align: center;
  line-height: 1.25;
  max-width: 170px;
  border: 1px solid var(--color-line);
}

/* ============================================================
   8bis. ARTISTES (portraits + biographies)
   ============================================================ */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px;
  margin-block: 1.5em;
}
.artist-card { text-align: center; }
.artist-card__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: var(--space-2);
  background: var(--color-bg-alt);
  border: 2px solid var(--color-orange);
}
.artist-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.artist-card__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.75rem;
}
.artist-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.25;
}
.artist-card__bio { display: block; font-size: 0.8rem; margin-top: 2px; }

/* ============================================================
   9. SIDEBAR PERMANENTE
   ============================================================ */
.sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.sidebar-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  padding: 20px 20px 24px;
  min-width: 0;
}
.sidebar-card--red    { border-top: 4px solid var(--color-red); }
.sidebar-card--yellow { border-top: 4px solid var(--color-yellow); }
.sidebar-card--orange { border-top: 4px solid var(--color-orange); }
.sidebar-card--green  { border-top: 4px solid var(--color-green); }
.sidebar-card--blue   { border-top: 4px solid var(--color-blue); }
.sidebar-card--dark   {
  background: var(--color-navy);
  border: 0;
  color: var(--color-white);
}
.sidebar-card--dark p    { color: rgba(255,255,255,0.72); }

.sidebar-card__eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.sidebar-card--dark .sidebar-card__eyebrow { color: var(--color-yellow); }

.sidebar-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--color-ink);
}
/* Bloc de soutien : navy + jaune, comme le bouton « Adhérer » du header */
.sidebar-card--dark .sidebar-card__title { color: var(--color-yellow); }
/* Le bouton s'inverse pour rester lisible sur le fond navy du bloc,
   tout en conservant la même paire de couleurs */
.sidebar-card--dark .btn--soutien {
  background: var(--color-yellow);
  color: var(--color-navy);
}
.sidebar-card--dark .btn--soutien:hover { background: var(--color-red); color: var(--color-white); }

.sidebar-card__poster {
  margin: 0 -6px 14px;
}
.sidebar-card__poster img {
  width: 100%;
  display: block;
  border: 5px solid rgba(255,255,255,0.08);
  box-shadow: 8px 8px 0 0 var(--color-navy);
}
.sidebar-card--dark .sidebar-card__poster img {
  border-color: rgba(255,255,255,0.1);
}

/* Agenda mini */
.sidebar-agenda { display: flex; flex-direction: column; }
.sidebar-agenda__item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
}
.sidebar-agenda__item:last-child { border-bottom: 0; }
.sidebar-agenda__date {
  flex: 0 0 52px;
  text-align: center;
  background: var(--color-bg-alt);
  padding: 6px 4px;
}
.sidebar-agenda__day {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-red);
}
.sidebar-agenda__month {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.sidebar-agenda__info strong {
  display: block;
  font-weight: 500;
  color: var(--color-ink);
  font-size: 0.88rem;
}
.sidebar-agenda__info span { font-size: 0.78rem; color: var(--color-muted); }

/* Contact sidebar */
.sidebar-contact { display: flex; flex-direction: column; gap: 10px; }
.sidebar-contact__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}
.sidebar-contact__icon { flex: 0 0 16px; margin-top: 3px; color: var(--color-yellow); }

/* Citation sidebar (encart « citation », pages Musmat / Calendrier / Contacts) */
.sidebar-card--quote {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-green);
}
.sidebar-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--color-ink);
}
.sidebar-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Petite phrase d'invitation sous le texte d'un encart */
.sidebar-card__note {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-muted);
}
/* Les formules « nous contacter » et « pour réserver » deviennent des liens
   dans ce texte. Sans cette règle, ils héritaient du gris de la note et rien
   ne les distinguait du reste de la phrase. Rouge : c'est une action que le
   lecteur effectue. */
.sidebar-card__note a {
  color: var(--color-red);
  border-bottom: 1px solid currentColor;
}
.sidebar-card__note a:hover { color: var(--color-red-dark); }

/* Lien secondaire sous un encart (« être informé du programme ») */
.sidebar-card__link-more {
  margin-top: 12px;
  font-size: 0.84rem;
}
.sidebar-card__link-more a {
  color: var(--color-blue);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-fast);
}
.sidebar-card__link-more a:hover { color: var(--color-red); border-bottom-color: var(--color-red); }

/* Liens utiles sidebar */
.sidebar-links { display: flex; flex-direction: column; gap: 8px; }
.sidebar-links li {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 8px;
}
.sidebar-links li:last-child { border-bottom: 0; padding-bottom: 0; }
.sidebar-links a {
  font-size: 0.86rem;
  color: var(--color-ink-soft);
  transition: color var(--ease-fast);
}
.sidebar-links a:hover { color: var(--color-red); }
.sidebar-links a.is-current { color: var(--color-red); font-weight: 500; }

/* Réseaux sociaux — vrais logos de marque (Facebook bleu, Instagram
   dégradé), déjà des marques autonomes et colorées : plus besoin d'un
   cerclage maison pour les rendre visibles ou cohérentes entre elles, ni
   d'adapter une couleur de trait au fond (contrairement aux anciens pictos
   monochromes). Un simple agrandissement au survol suffit comme retour. */
.sidebar-social {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.sidebar-social__link {
  display: flex;
  transition: transform var(--ease);
}
.sidebar-social__link:hover { transform: scale(1.12); }
.sidebar-social__link svg { width: 26px; height: 26px; }

/* Réseaux sociaux en pied de page — mêmes proportions que la sidebar. */
.site-footer__social {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}
.site-footer__social-link {
  display: flex;
  transition: transform var(--ease);
}
.site-footer__social-link:hover { transform: scale(1.12); }
.site-footer__social-link svg { width: 26px; height: 26px; }

/* Partenaires sidebar (bandeau défilant) */
.sidebar-partners { overflow: hidden; max-width: 100%; min-width: 0; }
.sidebar-partners__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: sidebar-partners-scroll 22s linear infinite;
}
.sidebar-partners:hover .sidebar-partners__track { animation-play-state: paused; }
.sidebar-partners__track img {
  height: 42px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}
@keyframes sidebar-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   9bis. GRILLE VIDÉO (page Médias)
   Vignette + lien vers YouTube : pas d'iframe, donc aucun script
   tiers chargé et une page qui reste rapide.
   ============================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-block: var(--space-6);
}
.video-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  transition: border-color var(--ease-fast), transform var(--ease-fast);
}
.video-card:hover { border-color: var(--color-red); transform: translateY(-2px); }
.video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.video-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Pastille de lecture, dessinée en CSS (aucune image supplémentaire) */
.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-red);
  transition: background var(--ease-fast);
}
.video-card__play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--color-white);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.video-card:hover .video-card__play { background: var(--color-red-dark); }
.video-card__body { padding: 14px 16px 18px; }
.video-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--color-ink);
}
.video-card__meta {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Lecteur intégré, une fois la vidéo lancée (assets/js/video-embed.js) */
.video-card--lu { cursor: default; }
.video-card--lu:hover { border-color: var(--color-line); transform: none; }
.video-card__player-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-card__player {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-card__externe {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--color-blue);
}
.video-card__externe:hover { color: var(--color-red); }

/* Filtres de la page Médias (assets/js/media-filtres.js) */
.media-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.media-filtres__groupe { display: flex; flex-wrap: wrap; gap: 8px; }
.media-filtres__chip {
  padding: 7px 16px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}
.media-filtres__chip:hover { border-color: var(--color-red); color: var(--color-red); }
.media-filtres__chip.is-active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}
.media-filtres__vide {
  flex-basis: 100%;
  color: var(--color-muted);
  font-style: italic;
}

/* ============================================================
   9c. ENCART MUSMAT (page d'accueil, optionnel)
   ============================================================ */
.musmat-highlight { padding-block: var(--space-12); }
.musmat-highlight__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 40px var(--padding-x);
  background: var(--color-white);
  border-left: 6px solid var(--color-green);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.musmat-highlight__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-orange);
  padding: 5px 14px;
  margin-bottom: 14px;
}
.musmat-highlight__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 12px;
}
.musmat-highlight__text {
  max-width: 640px;
  margin: 0 auto 22px;
  color: var(--color-ink-soft);
}

/* ============================================================
   10. PIED DE PAGE
   ============================================================ */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0 var(--padding-x) 28px;
  margin-top: var(--space-20);
}

/* Page Actualités : le titre qui sépare ce que la cliente écrit elle-même
   (ses évènements à venir et passés) de la liste de ses publications.
   Même rythme vertical que les titres de son contenu, sinon il se colle au
   paragraphe du dessus. */
.actus-liste__titre {
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
}

/* Le bandeau d'identité : la phrase de présentation et son paragraphe.
   Un seul texte (Personnaliser → Phrase de présentation), deux emplacements.
   Remonté en tête de l'accueil le 22/09/2026 : Mme Pras ne le voyait pas, il
   commençait à 949 px du haut, sous un bandeau d'accueil de 800 px, donc hors
   écran sur un portable. Il reste en bas des autres pages, où il fait la
   transition vers le pied de page navy (teinte #cadbe1, arbitrée le 05/08). */
.bandeau-identite {
  position: relative;
  overflow: hidden;
  background: var(--color-bandeau);
  text-align: center;
}
.bandeau-identite__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin-inline: auto;
}
.bandeau-identite__phrase {
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-navy);
  text-wrap: balance;
}
.bandeau-identite__texte {
  line-height: 1.6;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* En tête de l'accueil : plus resserré qu'en pied de page, sinon il repousse
   trop bas le bandeau d'accueil, qui reste le morceau de bravoure de la page. */
.bandeau-identite--accueil { padding: 28px var(--padding-x); }
.bandeau-identite--accueil .bandeau-identite__phrase { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.bandeau-identite--accueil .bandeau-identite__texte  { margin-top: 10px; font-size: 0.95rem; }

/* En pied de page : le bloc vit dans .site-footer, qui porte son propre
   padding horizontal. La marge négative le fait déborder en pleine largeur. */
.bandeau-identite--pied {
  margin-inline: calc(var(--padding-x) * -1);
  padding: 56px var(--padding-x);
}
.bandeau-identite--pied .bandeau-identite__phrase { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }
.bandeau-identite--pied .bandeau-identite__texte  { margin-top: 14px; font-size: 0.98rem; }

/* Sélecteurs volontairement plus spécifiques que « .site-footer p » plus bas,
   qui met les paragraphes du pied de page en blanc translucide, illisible sur
   la bande claire. */
.site-footer .bandeau-identite__phrase { color: var(--color-navy); }
.site-footer .bandeau-identite__texte  { color: var(--color-ink-soft); }

/* Formes Kandinsky discrètes — sur fond clair, opacité réduite */
.bandeau-identite__forme { position: absolute; }
.bandeau-identite__forme--cercle {
  top: -34px; left: 5%;
  width: 96px; height: 96px;
  background: var(--color-green);
  border-radius: 50%;
  opacity: 0.22;
}
.bandeau-identite__forme--triangle {
  bottom: -18px; right: 8%;
  width: 0; height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 44px solid var(--color-red);
  opacity: 0.22;
  transform: rotate(14deg);
}

@media (max-width: 768px) {
  .bandeau-identite--accueil { padding: 22px var(--padding-x); }
  .bandeau-identite--pied { padding: 40px var(--padding-x); }
  .bandeau-identite__texte { font-size: 0.95rem; }
}

.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-top: 48px;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
}
.site-footer__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-yellow);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-fast);
}
.site-footer__links a:hover { border-bottom-color: var(--color-yellow); }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-yellow);
  margin-bottom: 14px;
}
.site-footer p,
.site-footer li { font-size: 0.88rem; color: rgba(255,255,255,0.58); line-height: 1.8; }
.site-footer a:hover { color: var(--color-yellow); }
.site-footer__brand-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 12px;
}
.footer-nav__list { list-style: none; margin: 0; padding: 0; }

.site-footer__bottom {
  max-width: var(--container);
  margin: 40px auto 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

.site-footer__bottom ul { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-footer__bottom a:hover { color: var(--color-yellow); }

/* Crédit du concepteur, seul sur sa propre ligne, centré */
.site-footer__credit-row {
  max-width: var(--container);
  margin: 10px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}
.site-footer__credit-icon { color: rgba(255,255,255,0.35); flex-shrink: 0; }
.site-footer__credit { white-space: nowrap; color: rgba(255,255,255,0.45); }
a.site-footer__credit {
  border-bottom: 1px solid transparent;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
a.site-footer__credit:hover {
  color: var(--color-yellow);
  border-bottom-color: var(--color-yellow);
}
@media (max-width: 700px) {
  .site-footer__credit-row { white-space: normal; text-align: center; }
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .bandeau-identite--pied { padding: 44px var(--padding-x); }
}

@media (max-width: 900px) {
  .hero-home__inner { grid-template-columns: 1fr; gap: 48px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .news-grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1200px) {
  /* Bascule en menu burger.
     Corrigé le 08/09/2026 : le bandeau desktop réclame 1210px de large
     (logo 294 + nav 662 + bouton 124 + marges 130). En dessous, la barre
     débordait à l'horizontale et le logo était écrasé à 96px — défaut
     présent depuis l'origine, rendu visible par l'agrandissement du logo.
     Le bouton « Adhérer » reste visible jusqu'à 768px. */
  .site-header__inner { grid-template-columns: 1fr auto auto; gap: 16px; }
  .header-cta        { order: 1; }
  .menu-toggle-label { order: 2; display: flex; }
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    padding: 16px var(--padding-x) 24px;
    display: none;
    /* Le menu déplié fait trois niveaux et dépasse largement la hauteur de
       l'écran : sans défilement propre, les dernières entrées sont
       inatteignables (le header est sticky, le menu suit). dvh tient compte
       de la barre d'adresse mobile qui apparaît et disparaît. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .menu-toggle:checked ~ .main-nav { display: block; }
  .main-nav__list { flex-direction: column; gap: 0; }
  .main-nav__list > li > a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-line);
    font-size: 1rem;
  }
  .main-nav__list > li > a::after { display: none; }
  /* Sur mobile, tous les niveaux sont dépliés : aucune page n'est hors d'atteinte */
  .main-nav__list .sub-menu,
  .main-nav__list .sub-menu .sub-menu {
    position: static;
    left: auto; right: auto; top: auto;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0;
    border-left: 2px solid var(--color-line);
    padding: 0 0 0 16px;
    margin-left: 4px;
    min-width: 0;
  }
  .main-nav__list .menu-item-has-children > a::before { display: none; }
  .main-nav__list > li.menu-item-has-children > a,
  .main-nav__list .sub-menu .menu-item-has-children > a { padding-right: 4px; }
}

@media (max-width: 768px) {
  /* Header : la bascule en menu burger se fait à 1200px (bloc juste au-dessus).
     Sous 768px on masque en plus le bouton « Adhérer », faute de place, et on
     revient à un logo plus compact : à la taille du desktop, « L'Atelier des
     Arts » passait sur deux lignes et le bandeau montait à 110px de haut. */
  .header-cta { display: none; }
  .site-logo       { gap: 10px; }
  .site-logo__img  { height: 46px; }
  .site-logo__name { font-size: 1.15rem; }
  .site-logo__sub  { font-size: 0.62rem; letter-spacing: 0.12em; }

  /* Sections */
  .quote-band { padding: 64px var(--padding-x); }
  .hero-home  { padding: 40px 0 32px; }
  /* Quand le bandeau s'empile, ce cercle décoratif tombe pile derrière la
     légende de la photo et la rend illisible (gris sur bleu foncé). */
  .shape-circle-blue { display: none; }

  /* Grilles */
  .pillars-grid,
  .news-grid,
  .soutiens-grid,
  .invitations-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }

  /* Footer */
  .site-footer { padding: 48px var(--padding-x) 24px; margin-top: var(--space-12); }
  .site-footer__inner { flex-direction: column; gap: 20px; }
  .site-footer__links { align-items: flex-start; text-align: left; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   12. PAGE CONTACT
   ============================================================ */
.contact-wrap { padding-bottom: var(--space-16); }
.contact-header { margin-bottom: var(--space-10); }
.contact-header__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem,4vw,3.4rem);
  margin-bottom: var(--space-4);
}
.contact-header__intro { font-size: 1.05rem; color: var(--color-muted); max-width: 54ch; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gutter);
  align-items: start;
}
/* Sans min-width: 0, les colonnes ne peuvent pas descendre sous la largeur
   intrinsèque des champs du formulaire : sur un écran de 360 px, la page
   se met à défiler horizontalement. */
.contact-grid > * { min-width: 0; }
.contact-form-col__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-red);
}

/* Styles CF7 */
.wpcf7-form label {
  display: block;
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 11px 14px;
  border: 1.5px solid var(--color-line);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--color-ink);
  transition: border-color var(--ease-fast);
  border-radius: 0;
  outline: none;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { border-color: var(--color-red); }
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
.wpcf7-form input[type="submit"] {
  margin-top: var(--space-6);
  background: var(--color-red);
  color: var(--color-white);
  padding: 13px 28px;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background var(--ease-fast);
  width: auto;
}
.wpcf7-form input[type="submit"]:hover { background: var(--color-red-dark); }

.contact-info-col { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-info-block {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-blue);
  padding: var(--space-6) var(--space-6) var(--space-8);
}
.contact-info-block--alt { border-top-color: var(--color-red); }
.contact-info-block__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: var(--space-4);
}
.contact-info-list { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-info-list__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--color-ink-soft);
  line-height: 1.55;
}
.contact-info-list__icon { flex: 0 0 18px; margin-top: 3px; color: var(--color-yellow); }
/* Sans min-width: 0, l'enfant flex garde la largeur intrinsèque de l'adresse
   e-mail et fait déborder la page sur les écrans de 320 px. */
.contact-info-list__item > * { min-width: 0; }
.contact-info-list__item a { overflow-wrap: anywhere; }

/* Réseaux sociaux dans l'encart Coordonnées de la page Contact — vrais
   logos de marque, déjà colorés : fonctionnent tels quels sur fond blanc. */
.contact-info-social { display: flex; gap: 14px; }
.contact-info-social__link {
  display: flex;
  transition: transform var(--ease);
}
.contact-info-social__link:hover { transform: scale(1.12); }
.contact-info-social__link svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   13. PAGE ARCHIVES
   ============================================================ */
.archives-header { margin-bottom: var(--space-12); }
.archives-header__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem,4vw,3.4rem);
  margin-bottom: var(--space-3);
}
.archives-header__intro { font-size: 1.05rem; color: var(--color-muted); max-width: 54ch; }

.archive-season { padding-block: var(--space-10); }
.archive-season__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-navy);
}
.archive-season__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
}
.archive-season__year {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--color-red);
  line-height: 1;
}
.archive-season__tag {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-left: auto;
}
.archive-season__body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-10);
  align-items: start;
}
.archive-season__img {
  width: 100%;
  display: block;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-hard);
}
.archive-season__img-placeholder {
  width: 240px;
  height: 320px;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.9rem;
  border: 1px solid var(--color-line);
}
.archive-season__caption {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: var(--space-3);
  text-align: center;
}
.archive-docs { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.archive-docs a { font-size: 0.92rem; color: var(--color-blue); }
.archive-docs a:hover { color: var(--color-red); }

.archive-divider {
  border: 0;
  height: 1px;
  background: var(--color-line);
}

.archive-older { padding-block: var(--space-10); }
.archive-older h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-navy);
}
.archive-older__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.archive-older__item {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-red);
  padding: var(--space-6);
}
.archive-older__year {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-red);
  display: block;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.archive-older__item h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  margin-bottom: var(--space-1);
}
.archive-older__item p { font-size: 0.9rem; color: var(--color-muted); }

/* Galerie photos */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.photo-gallery__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  background: var(--color-bg-alt);
}
.photo-gallery__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ease-slow), filter var(--ease);
  filter: brightness(0.95);
}
.photo-gallery__item:hover .photo-gallery__img {
  transform: scale(1.06);
  filter: brightness(1);
}

@media (max-width: 768px) {
  .archive-season__body { grid-template-columns: 1fr; }
  .archive-older__grid  { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   14. AGRANDISSEMENT DES IMAGES (lightbox maison, sans plugin)
   Affiches, portraits et photos s'ouvrent par-dessus la page,
   le site reste visible derrière. Voir assets/js/lightbox.js.
   ============================================================ */

/* Curseur et retour visuel sur ce qui est agrandissable */
.ada-zoomable { cursor: zoom-in; }
.ada-zoomable:focus-visible { outline: 3px solid var(--color-red); outline-offset: 3px; }
.poster-frame a, .photo-gallery__item { cursor: zoom-in; }

/* Empêche la page de défiler derrière la fenêtre ouverte */
body.ada-lightbox-ouverte { overflow: hidden; }

.ada-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4vh 3vw;
  /* Navy translucide : le site reste lisible derrière, l'affiche ressort quand même */
  background: rgba(43, 47, 72, 0.86);
}
.ada-lightbox[hidden] { display: none; }

.ada-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ada-lightbox__img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  display: block;
  background: var(--color-white);
  padding: 6px;
  border: 2px solid var(--color-orange);
  box-shadow: 14px 14px 0 0 rgba(0, 0, 0, 0.35);
}
.ada-lightbox__caption {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  max-width: 60ch;
}
.ada-lightbox__caption[hidden] { display: none; }

/* Boutons : fermeture et navigation */
.ada-lightbox__close,
.ada-lightbox__nav {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  font-family: var(--font-display);
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast);
}
.ada-lightbox__close:hover,
.ada-lightbox__nav:hover,
.ada-lightbox__close:focus-visible,
.ada-lightbox__nav:focus-visible {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}
.ada-lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  border-radius: 50%;
}
.ada-lightbox__nav {
  width: 48px;
  height: 48px;
  font-size: 2rem;
  border-radius: 50%;
}
.ada-lightbox__nav[hidden] { display: none; }

@media (max-width: 768px) {
  .ada-lightbox { padding: 6vh 2vw; gap: 4px; }
  .ada-lightbox__img { max-height: 72vh; box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.35); }
  .ada-lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .ada-lightbox__close { top: 10px; right: 12px; width: 38px; height: 38px; font-size: 1.5rem; }
}

/* ============================================================
   13. PAGE 404
   ============================================================ */
.page-grid--full { grid-template-columns: 1fr; }

.error-404 {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: var(--space-16) 0;
}
.error-404__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.error-404__inner .deco-divider { margin-inline: auto; }
.error-404__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  margin: var(--space-4) 0;
}
.error-404__text {
  color: var(--color-ink-soft, var(--color-ink));
  margin-bottom: var(--space-8);
}
.error-404__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.error-404__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: 0.85rem;
}
.error-404__links a { color: var(--color-blue); border-bottom: 1px solid transparent; }
.error-404__links a:hover { color: var(--color-red); border-bottom-color: var(--color-red); }

/* =========================================================
   FAQ — blocs « Détails » natifs de WordPress
   Posés le 9/09/2026 (point 13 du plan). Volontairement neutres :
   le code-couleur fonctionnel réserve l'orangé, le navy et le jaune à
   d'autres usages, seul le survol passe au rouge comme partout ailleurs.
   ========================================================= */
.entry-content .wp-block-details,
.contact-sections .wp-block-details {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-line);
  padding: var(--space-4) var(--space-6);
  margin-block: var(--space-3);
  transition: border-color var(--ease);
}
.entry-content .wp-block-details[open],
.contact-sections .wp-block-details[open] { border-left-color: var(--color-green); }

.entry-content .wp-block-details > summary,
.contact-sections .wp-block-details > summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  transition: color var(--ease-fast);
}
.entry-content .wp-block-details > summary::-webkit-details-marker,
.contact-sections .wp-block-details > summary::-webkit-details-marker { display: none; }

/* Le chevron est dessiné : pas d'image à charger, il suit la couleur du texte. */
.entry-content .wp-block-details > summary::before,
.contact-sections .wp-block-details > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.42em;
  height: 0.42em;
  margin-top: 0.24em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--ease);
}
.entry-content .wp-block-details[open] > summary::before,
.contact-sections .wp-block-details[open] > summary::before { transform: rotate(45deg); }

.entry-content .wp-block-details > summary:hover,
.contact-sections .wp-block-details > summary:hover { color: var(--color-red); }

.entry-content .wp-block-details > summary + *,
.contact-sections .wp-block-details > summary + * { margin-top: var(--space-4); }
.entry-content .wp-block-details p,
.contact-sections .wp-block-details p { color: var(--color-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-details > summary::before,
  .contact-sections .wp-block-details > summary::before { transition: none; }
}

/* =========================================================
   Formulaires — astérisque des champs obligatoires
   Demande du 8 septembre 2026 : « habituellement il y a * pour les mentions
   obligatoires ». L'astérisque est décoratif (aria-hidden) : Contact Form 7
   pose déjà aria-required sur les champs, l'information est donc portée deux
   fois sans être annoncée deux fois.
   ========================================================= */
.champ-requis {
  color: var(--color-red);
  font-weight: 700;
  margin-left: 0.15em;
}
.form-legend {
  margin-top: var(--space-4);
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* =========================================================
   Cibles tactiles des liens autonomes
   Audit du 10/09/2026 : sur téléphone, les liens qui forment un bloc à eux
   seuls (pied de page, « En savoir plus » des encarts, « Lire la suite »)
   mesuraient 15 à 16 px de haut. La norme demande 24 px pour un doigt.
   Les liens en pleine phrase ne sont pas concernés : leur hauteur est
   contrainte par l'interligne du texte, la norme les exclut expressément.
   ========================================================= */
@media (max-width: 768px) {
  .site-footer__links a,
  .site-footer__bottom ul a,
  .sidebar-card__link-more a,
  .sidebar-contact__item a,
  .news-item__link,
  .site-footer__credit a {
    display: inline-block;
    min-height: 24px;
    padding-block: 4px;
  }
}

/* =========================================================
   GALERIES DE PHOTOS — blocs Galerie natifs de WordPress
   Converties le 10/09/2026 : elles étaient en HTML sur mesure et Mme Pras ne
   pouvait pas y poser de légende. Le bloc natif le permet, image par image,
   depuis l'éditeur.

   Ces règles reproduisent l'aspect d'origine (grille de 4, recadrage 4/3,
   léger zoom au survol) par-dessus la mise en page en flex du bloc natif.
   Le `:not(#i):not(#j)` n'est pas une coquille. WordPress cible ses propres
   images avec `:not(#individual-image)`, qui pèse autant qu'un identifiant,
   et ajoute une classe de plus pour les galeries de deux ou trois images.
   Il faut donc deux `:not` pour repasser devant, sinon les photos de
   programme ressortent à 87 px au lieu de 199. C'est le procédé qu'emploie
   WordPress lui-même, pas un contournement de fortune.
   ========================================================= */
.entry-content .wp-block-gallery.galerie-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-block: var(--space-8);
}

.entry-content .wp-block-gallery.galerie-photos figure.wp-block-image:not(#i):not(#j) {
  /* WordPress calcule une largeur en pourcentage pour ses galeries en flex.
     Plutot que de lui disputer la propriete « width », on passe par
     « min-width », qu il ne touche pas : la figure remplit sa cellule de
     grille quoi qu il arrive. */
  width: 100%;
  min-width: 100%;
  max-width: none;
  flex: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.entry-content .wp-block-gallery.galerie-photos figure.wp-block-image:not(#i):not(#j) > a,
.entry-content .wp-block-gallery.galerie-photos figure.wp-block-image:not(#i):not(#j) > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
  cursor: zoom-in;
  flex: none;
}

.entry-content .wp-block-gallery.galerie-photos figure.wp-block-image:not(#i):not(#j) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter var(--ease);
  filter: brightness(0.95);
}

.entry-content .wp-block-gallery.galerie-photos figure.wp-block-image:not(#i):not(#j):hover img {
  transform: scale(1.06);
  filter: brightness(1);
}

/* La légende qu'elle saisit dans l'éditeur. Tant qu'elle n'écrit rien, aucune
   zone n'apparaît et la galerie garde exactement son aspect d'avant. */
.entry-content .wp-block-gallery.galerie-photos figure.wp-block-image:not(#i):not(#j) figcaption {
  position: static;
  margin: 6px 0 0;
  padding: 0;
  max-height: none;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-muted);
  text-align: center;
  background: none;
  overflow: visible;
  text-overflow: clip;
}

/* Programme du festival : deux pages côte à côte, pas une grille de quatre. */
.entry-content .wp-block-gallery.galerie-photos--duo,
.entry-content .wp-block-gallery.galerie-photos:has(> figure:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 500px;
}

@media (max-width: 768px) {
  .entry-content .wp-block-gallery.galerie-photos { grid-template-columns: repeat(2, 1fr); }
}

/* Affiches encadrées converties en blocs Image natifs le 10/09/2026, pour que
   Mme Pras puisse les légender et les remplacer elle-même. Les classes
   `poster-frame` sont conservées, donc l'aspect ne change pas. WordPress
   ajoute seulement sa marge basse d'un cadratin sur `.wp-block-image` :
   on la retire pour retrouver l'espacement d'origine au pixel près. */
.entry-content figure.wp-block-image.poster-frame { margin-bottom: 0; }
.entry-content figure.wp-block-image.poster-frame > img,
.entry-content figure.wp-block-image.poster-frame > a > img { display: block; width: 100%; height: auto; }