/* ==========================================================================
   Compagnie Logos — bandeau, pied de page, menu
   ========================================================================== */

:root { --page-marge: 40px; }

/* Garde-fous globaux : aucune page ne doit défiler horizontalement. */
img, svg, video { max-width: 100%; height: auto; }
* { min-width: 0; }   /* les enfants de grid/flex peuvent rétrécir */

body {
  margin: 0;
  overflow-x: clip;
  background: var(--logos-blanc);
  color: var(--logos-noir);
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
}

/* Le logo ne se pose jamais en blanc et n'a pas de cartouche : le fond de page
   reste clair, y compris derrière le bandeau. */

.logos-page,
.site-bandeau__interieur,
.site-pied__interieur {
  max-width: 1032px;
  margin: 0 auto;
  padding: 0 var(--page-marge);
}

/* Liens du texte courant : gras, jamais soulignés, aucun aplat au repos.
   Le survol suit la règle GLOBALE (voir le bloc « Survol global » en fin de
   fichier) : fond encre opaque, texte blanc, bascule nette. */
a { color: inherit; text-decoration: none; }

.logos-texte a,
.fiche-bloc a,
.agenda-ligne__lieu a {
  font-weight: 700;
  text-decoration: none;
}

/* --- Pictogrammes -------------------------------------------------------- */

.picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.picto svg { width: 100%; height: 100%; display: block; }

.picto--facebook, .picto--instagram, .picto--vimeo, .picto--youtube { width: 16px; height: 16px; }
.picto--suivant, .picto--precedent { width: 13px; height: 28px; }
.picto--menu, .picto--fermer { width: 24px; height: 24px; }
.picto--lecture { width: 12px; height: 14px; }
.picto--spectacles, .picto--fabrique { width: 16px; height: 16px; }

/* --- Bandeau ------------------------------------------------------------- */

.site-bandeau { padding-top: 26px; }

.site-bandeau__interieur {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.logos-logo { display: block; color: var(--logos-noir); }  /* bascule nette : aucune animation (règle de survol globale) */

a:hover > .logos-logo,
a:focus-visible > .logos-logo { color: var(--logos-encre); }

.logos-logo svg, .logos-logo svg * { fill: currentColor; }
.logos-logo svg { display: block; height: 64px; width: auto; }  /* réduit sous les 90 px de la charte, décision du 2026-08-08 pour que la navigation tienne */

.site-navigation ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.site-navigation a {
  display: inline-block;
  padding: 8px 10px;
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
}

/* « Vous êtes ici » dans le MENU : aplat noir, texte blanc (décision
   compagnie 2026-08-09). Les onglets de sous-page sont en couleur d'accent,
   les filtres de l'agenda en fond noir. Le !important protège l'état actif
   du survol global : un lien de page actif ne réagit pas au survol. */
.site-navigation .current-menu-item > a,
.site-navigation .current_page_parent > a,
.site-navigation .current-menu-ancestor > a {
  background: var(--logos-noir) !important;
  color: var(--logos-blanc) !important;
}

.site-navigation .site-social--panneau { display: none; }

.site-social {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;   /* cale les pictos sur la ligne des entrées de menu */
}

.site-social .picto { display: block; }

/* Même survol que les textes : picto blanc sur carré noir. Le padding
   constant évite tout décalage au survol. */
.site-social a { display: inline-flex; padding: 5px; }
.site-social { gap: 6px; }
.site-social a:hover,
.site-social a:focus-visible {
  background: var(--logos-noir);
  color: var(--logos-blanc);
}

/* Sous-menus. Desktop : panneau déroulant sous l'entrée parente, aplat blanc
   cerné du filet noir, ouvert au survol et au focus clavier. */
.site-navigation li { position: relative; }

/* Bloc blanc, sans liseré : le sous-menu prolonge la colonne blanche du site.
   Au survol, le texte passe couleur encre. */
.site-navigation .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 220px;
  width: max-content;      /* assez large pour qu'aucune entrée ne se replie */
  max-width: 70vw;
  margin: 0;
  padding: 0;              /* pas de bord blanc au-delà du premier/dernier item */
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--logos-blanc);
  list-style: none;
}
.site-navigation .sub-menu a { white-space: nowrap; }

.site-navigation .sub-menu a:hover,
.site-navigation .sub-menu a:focus-visible {
  background: var(--logos-encre, #001721);
  color: var(--logos-blanc, #fff);
}

.site-navigation li:hover > .sub-menu,
.site-navigation li:focus-within > .sub-menu {
  display: flex;
}

.site-navigation .sub-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;   /* jamais plus grand que les entrées du menu (13 px) */
}

.site-navigation .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 9px;
  margin-left: 8px;
  background: currentColor;
  /* triangle texturé, pointe en bas */
  -webkit-mask-image: url(../svg/picto/chevron-plein.svg);
          mask-image: url(../svg/picto/chevron-plein.svg);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transform: rotate(90deg);
  vertical-align: 1px;
}

/* Filet fin sous la navigation : 4,66 px, couleur encre.
   Géométrie de la maquette (conteneur 1366, contenu à 167) : le filet part à
   341 px du bord, soit 174 px du début du contenu — 26 px après le bord droit
   du logo (148 px) — et s'arrête 15 px avant le bord droit du contenu. */
.site-bandeau__filet {
  height: var(--filet-fin);
  background: var(--logos-encre);
  margin-top: 22px;
  margin-left: 174px;
  margin-right: 15px;
}

.site-bascule-menu {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--logos-noir);
}

/* --- Pied de page -------------------------------------------------------- */

.site-pied { margin-top: 80px; }

.site-pied__filet {
  height: var(--filet-epais);
  background: var(--logos-noir);
}


.site-pied__interieur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 40px;
}

.site-pied p {
  font-family: var(--font-texte);
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  margin: 0;
}

.site-pied ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.site-pied ul a {
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}

/* Lien newsletter (pied de page et page Contact) : BOUTON à cadre, comme les
   boutons à filet du site (Réserver, onglets). Picto + texte.
   N'existe dans le DOM que si l'URL est renseignée dans Réglages LOGOS. */
.lien-newsletter,
.logos-texte .lien-newsletter {   /* double sélecteur : sur la page Contact, la
   règle générique des liens de texte (padding: 0) écrasait celle du bouton */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 35px;
  padding: 0 20px;
  box-shadow: inset 0 0 0 2px var(--logos-noir);
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
}
.lien-newsletter__picto { width: 16px; height: 16px; flex: none; }
.lien-newsletter__picto svg { width: 100%; height: 100%; display: block; }
/* Pied de page : le bouton se cale à droite. */
.lien-newsletter--pied { margin-left: auto; align-self: center; }
.lien-newsletter:hover, .lien-newsletter:focus-visible {
  background: var(--logos-encre);
  color: var(--logos-blanc);
  box-shadow: none;
}
.contact-newsletter { margin: 0; }

/* --- Titres du contenu des pages ------------------------------------------
   Les h2/h3 saisis dans l'éditeur (pages Compagnie, Équipe, Fabrique, Contact)
   suivent les niveaux de la charte : h2 en Oswald, h3 en Ubuntu Bold. */

.logos-texte h2 {
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 40px 0 12px;
}

.logos-texte h2:first-child { margin-top: 0; }

.logos-texte h3 {
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  margin: 28px 0 8px;
}

.page-titre { font-size: clamp(42px, 7vw, 72px); margin: 0 0 26px; }

/* Visuel de tête des pages internes : cadre déchiré (mask-border), filtre
   encre + ombre portée — hauteur maquette (469 px, ancrage 32 %).
   2026-08-19 : le masque est dérivé de l'anneau carré des photos d'équipe
   (cadre-anneau.png) — bords déchirés fins et angles carrés adoucis, à la
   place de l'ancienne pilule lisse. Slice 362 = tout l'arc d'angle du
   fichier 1100×1100 ; width 62px = son épaisseur à l'écran. */
.page-visuel {
  height: 469px;
  margin: 0;
  background-size: cover;
  background-position: center 32%;
  -webkit-mask-image: url(../svg/cadre-anneau.png);
          mask-image: url(../svg/cadre-anneau.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Emplacement à visuel sans visuel : le masque rempli couleur encre. */
.page-visuel--encre { background: var(--logos-encre); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }

@media (max-width: 780px) {
  .page-visuel { height: 220px; }
}

/* Sous-pages : fil de rubrique (surtitre) collé au titre, comme la maquette. */
.page-fil {
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--logos-encre);
  margin: 30px 0 10px;   /* 30 px sous le visuel de tête (maquette) */
}
.page-fil:first-child,
.page-titre:first-child { margin-top: 0; }   /* le padding de page suffit */

/* Respiration au-dessus du contenu : UNE SEULE règle pour toutes les pages
   (54 px sous le filet du bandeau), portée par le conteneur — plus aucune
   marge posée au cas par cas sur les premiers éléments. C'est ce qui rendait
   les hauts de pages inégaux : chaque gabarit avait sa propre valeur. */
.logos-page { padding-top: 54px; }

.page-onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 34px; }

.page-onglets a {
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  box-shadow: inset 0 0 0 2px var(--logos-noir);
}

/* Onglet de sous-page sélectionné : la COULEUR d'accent (décision compagnie
   2026-08-19), texte noir. */
.page-onglets a[aria-current] { background: var(--logos-jaune); color: var(--logos-noir); box-shadow: none; }
/* 2026-08-20 : :not([aria-current]) ici aussi — cette règle locale doublait
   le bloc « Survol global » et rendait le survol à l'onglet ACTIF. */
.page-onglets a:not([aria-current]):hover, .page-onglets a:not([aria-current]):focus-visible { background: var(--logos-encre); color: var(--logos-blanc); box-shadow: none; }

/* Liste en ligne (collaborateurs) : tout sur une composition continue,
   séparateurs losange — décision compagnie, remplace la ligne par personne
   du modèle v2. */
.liste-inline p { display: inline; font-size: 14px; line-height: 2; }
.liste-inline br { display: none; }
.liste-inline p strong { font-family: var(--font-sous-titre); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; padding-right: 5px; }
.liste-inline p:not(:last-of-type)::after { content: "\25C6"; font-size: 9px; vertical-align: 2px; padding: 0 10px; }

/* --- Accessibilité ------------------------------------------------------- */

.lien-evitement {
  position: absolute;
  left: -9999px;
}

.lien-evitement:focus {
  position: static;
  display: inline-block;
  padding: 10px 16px;
  background: var(--logos-jaune);
  font-weight: 500;
}

:focus-visible {
  outline: 3px solid var(--logos-encre);
  outline-offset: 2px;
}

/* --- Mobile 390 ---------------------------------------------------------- */

/* --- Tablette ------------------------------------------------------------ */
@media (max-width: 1100px) {
  :root { --page-marge: 28px; }

  /* La navigation passe sous le logo, pleine largeur, plutôt que de se
     compresser à côté : c'est la zone 781-1100 qui débordait. */
  .site-bandeau__interieur { flex-wrap: wrap; row-gap: 10px; }
  .site-navigation { order: 3; width: 100%; }
  .site-navigation ul { gap: 2px; }
  .site-social { margin-left: auto; }
}

@media (max-width: 780px) {
  :root { --page-marge: 20px; }

  .site-bandeau { padding-top: 14px; }
  .site-bandeau__filet { margin-top: 8px; }
  .logos-logo svg { height: 44px; }

  .site-bandeau__interieur { align-items: center; }

  /* Le burger n'apparaît que si le script a tourné, et la navigation ne se
     replie que dans ce cas : sans JavaScript, le menu reste déplié et
     utilisable, plutôt qu'un bouton mort devant une navigation masquée. */
  .logos-js .site-bascule-menu {
    display: inline-flex;
    position: relative;
    z-index: 30;
    margin-left: auto;   /* calé au bord droit du bandeau */
    padding: 8px 0 8px 8px;
  }

  /* Les pictos sociaux quittent le bandeau : ils vivent dans le panneau. */
  .site-bandeau .site-social { display: none; }

  .site-navigation { order: 3; width: 100%; }

  .logos-js .site-navigation[data-ouvert="false"] { display: none; }

  /* Ouvert : panneau plein écran sur fond blanc, au-dessus de la page, avec
     le bouton de fermeture qui reste en haut à droite. Entrées en Ubuntu
     Medium 22 px, aplat jaune sur l'entrée active, sociaux en bas. */
  .logos-js .site-navigation[data-ouvert="true"] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--logos-blanc);
    padding: 72px var(--page-marge) 32px;
    overflow-y: auto;
  }

  .logos-js .site-navigation[data-ouvert="true"] ul { padding: 0; }

  .logos-js .site-navigation[data-ouvert="true"] a {
    font-size: 17px;
    padding: 9px 0;
  }

  .logos-js .site-navigation[data-ouvert="true"] .current-menu-item > a {
    display: inline-block;
    padding: 10px 16px;
  }

  .logos-js .site-navigation[data-ouvert="true"] .site-social--panneau {
    display: flex;
    gap: 22px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: var(--filet-fin) solid var(--logos-encre);
  }
  .logos-js .site-navigation[data-ouvert="true"] .site-social .picto { width: 22px; height: 22px; }

  body.logos-menu-ouvert { overflow: hidden; }

  .site-navigation ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
  }

  .site-navigation a {
    display: block;
    padding: 9px 0;
    font-size: 17px;
  }

  /* En mobile, les sous-menus restent dépliés et indentés : un déroulant au
     survol n'existe pas au doigt. */
  .site-navigation .sub-menu {
    display: flex;
    position: static;
    box-shadow: none;
    padding: 0 0 0 20px;
    min-width: 0;
  }
  .site-navigation .menu-item-has-children > a::after { content: none; }

  .site-social { order: 2; }
}

/* Mobile : hiérarchie menu / sous-menu SANS ambiguïté — entrées de premier
   niveau en gras, sous-pages en retrait le long d'un filet encre, plus
   petites et en graisse normale. */
@media (max-width: 780px) {
  .site-navigation > ul > li > a,
  .logos-js .site-navigation[data-ouvert="true"] > ul > li > a {
    font-weight: 700;
  }

  /* La double déclaration est nécessaire : le panneau ouvert remet le
     padding des ul à zéro avec une spécificité supérieure. */
  .site-navigation .sub-menu,
  .logos-js .site-navigation[data-ouvert="true"] .sub-menu {
    width: auto;
    max-width: none;
    margin: 2px 0 12px 4px;
    padding: 0 0 0 26px;   /* respiration entre le filet et le texte */
    border-left: 3px solid var(--logos-encre);
  }

  .site-navigation .sub-menu a,
  .logos-js .site-navigation[data-ouvert="true"] .sub-menu a {
    font-size: 15px;
    font-weight: 400;
    white-space: normal;
    padding: 7px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 780px) {
  .site-bandeau__filet { margin-left: 0; }
}

/* ============================================================
   Composants de mise en page des pages internes (maquette v2) :
   filets, pastilles, titres à chevron, colonnes, citations, blocs.
   Utilisés par le contenu des pages (donnees/pages/*.html).
   ============================================================ */

/* Filet fin de section, au-dessus des colonnes et des blocs. */
.logos-texte .filet,
.filet { height: var(--filet-fin, 4.66px); background: var(--logos-encre); border: 0; margin: 0; }

/* Deux colonnes égales, une seule en mobile. */
.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.deux-colonnes--serre { gap: 40px; }
.colonne { display: flex; flex-direction: column; gap: 22px; }
.colonne > p { margin: 0; }

/* Grille principale 2/3 – 1/3 (contenu + bloc d'appel à droite). */
.grille-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Grille visuel en anneau (254 px) + texte. */
.grille-anneau {
  display: grid;
  grid-template-columns: 254px 1fr;
  gap: 56px;
  align-items: start;
}
/* Variante espacée : respiration avant le bloc quand aucun titre à chevron
   ne le précède (ex. bloc « La compagnie » de la page Logos, les sens et la
   raison). */
.grille-anneau--espace { margin-top: 62px; }
.visuel-anneau {
  width: 254px;
  height: 430px;
  background-size: cover;
  background-position: center 40%;
  -webkit-mask-image: url(../svg/anneau-masque.png);
          mask-image: url(../svg/anneau-masque.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}

/* Visuels HORS spectacle : le filtre se CHOISIT dans le contenu de la page
   (WYSIWYG) en ajoutant une classe — encre par défaut, mauve en option.
   Bichromie encre → mauve #D08AFF, même courbe que le filtre encre. */
.visuel-anneau--mauve,
.page-visuel--mauve,
.equipe-portrait--mauve,
.photo-mauve {
  filter: brightness(1.18) contrast(1.02) url(#w-mauve) saturate(0.8);
}

/* Titre spécial (Logos Sans 32) dans le flux des pages. */
.logos-texte .titre-special {
  font-family: var(--font-special);
  font-weight: 500;   /* en Oswald (hors aplat) : 500 pour coller à la Logos Sans */
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

/* Titre de section précédé du chevron plein (triangle CSS, sans SVG). */
.titre-chevron {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 54px 0 26px;
}
.titre-chevron::before {
  content: "";
  width: 16px;
  height: 19px;
  flex: none;
  background: var(--logos-noir);
  /* triangle TEXTURÉ (bords déchirés, même famille que la Batard) */
  -webkit-mask-image: url(../svg/picto/chevron-plein.svg);
          mask-image: url(../svg/picto/chevron-plein.svg);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Titre de section mis en valeur, sans chevron : le surlignage de la charte
   (12/26/8) posé sur un titre Logos Sans. Par défaut : aplat ENCRE, texte
   blanc. Dans l'éditeur, on peut choisir la mise en valeur à la couleur d'un
   cycle en AJOUTANT sa classe au titre : « titre-aplat cycle-revolution »
   (orange) ou « titre-aplat cycle-propriete » (jaune), texte noir. */
.titre-aplat,
.logos-texte .titre-aplat {
  display: inline-block;
  align-self: flex-start;
  background: var(--logos-encre);
  color: var(--logos-blanc);
  padding: 12px 26px 8px;
  margin: 0 0 26px;
}
.titre-aplat.cycle-revolution, .logos-texte .titre-aplat.cycle-revolution,
.titre-aplat.cycle-propriete, .logos-texte .titre-aplat.cycle-propriete {
  background: var(--cycle-aplat);
  color: var(--logos-noir);
}

/* Pastilles : la couleur est AUTOMATISÉE — la pastille d'un contenu lié à un
   cycle porte la classe du cycle (cycle-revolution → orange, cycle-propriete
   → jaune) ; sans cycle, c'est le mauve général (--logos-jaune). Aucune
   couleur de pastille ne s'écrit à la main. */
.pastille {
  display: inline-block;
  align-self: flex-start;
  background: var(--logos-jaune);
  padding: 9px 20px 6px;
  /* toute pastille est un aplat : la typo Logos Sans y est permise */
  font-family: var(--font-special);
  font-weight: 400;   /* graisse native, pas de faux gras */
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pastille.cycle-revolution,
.pastille.cycle-propriete,
.pastille.cycle-transmission { background: var(--cycle-aplat); }
/* Pastille d'un spectacle PASSÉ : le grisé, comme partout ailleurs. */
.pastille.spectacle-passe { background: var(--passe-lumieres, #C9C9C9); }
.pastille--orange { background: var(--revolution-lumieres, #FF8C4A); }  /* alias historique */
.pastille--titre { font-size: 22px; }

/* Citation détachée par un gros trait vertical noir. */
.citation-barre { display: flex; gap: 16px; align-items: stretch; }
.citation-barre::before { content: ""; width: 6px; background: var(--logos-noir); flex: none; }
.citation-barre p { margin: 0; font-size: 14px; line-height: 1.8; max-width: 540px; }

/* Bloc d'appel sur aplat jaune (« Accueillir la fabrique »). */
.bloc-jaune {
  background: var(--logos-jaune);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.logos-texte .bloc-jaune .titre-special { font-size: 32px; line-height: 1.1; }
.bloc-jaune p { margin: 0; font-size: 13px; line-height: 1.7; }

/* Bouton d'action : aplat noir, texte blanc. */
.bouton-noir {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  background: var(--logos-noir);
  color: var(--logos-blanc);
  padding: 0 24px;
  height: 35px;
  font-family: var(--font-special);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
/* Déjà sur fond noir : inversion au survol (règle globale). */
.bouton-noir:hover, .bouton-noir:focus-visible {
  background: var(--logos-blanc);
  color: var(--logos-encre);
  box-shadow: inset 0 0 0 2px var(--logos-encre);
}

/* Étapes de la fabrique : filet AU-DESSUS du titre, titre contenu. */
.fabrique-etapes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 0;
  padding: 0;
}
.fabrique-etapes li { display: flex; flex-direction: column; gap: 10px; }
.fabrique-etapes .filet { order: -1; }
.fabrique-etape__num {
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
}
.fabrique-etapes p { margin: 0; font-size: 13px; line-height: 1.7; }

/* Corps de texte des colonnes maquette. */
.texte-15 { font-size: 15px; line-height: 1.9; }
.texte-14 { font-size: 14px; line-height: 1.8; }
.texte-13 { font-size: 13px; line-height: 1.75; }

.logos-texte .deux-colonnes p,
.logos-texte .grille-anneau p { margin: 0; }

@media (max-width: 900px) {
  .grille-2-1 { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 780px) {
  .deux-colonnes { grid-template-columns: 1fr; gap: 34px; }
  .grille-anneau { grid-template-columns: 1fr; }
  .fabrique-etapes { grid-template-columns: 1fr; }
}

/* Variantes d'espacement des colonnes + priorité du titre à chevron. */
.colonne--24 { gap: 24px; }
.colonne--14 { gap: 14px; }
.logos-texte .titre-chevron { margin: 54px 0 26px; }
.deux-colonnes--34 { gap: 34px; }
.logos-texte .titre-special--espace { margin-top: 28px; }

/* ==========================================================================
   Survol GLOBAL (cahier des charges 2026-08-09).
   Remplace toutes les conventions précédentes (jaune menu, aplat 20 %,
   soulignements, effets animés). Tout lien texte, entrée de menu, onglet et
   bouton : fond encre OPAQUE derrière le texte, texte blanc, bascule nette —
   aucune animation. S'applique partout et uniformément.
   Les modules chargés après ce fichier (agenda, spectacle, accueil) ne
   définissent plus leurs propres survols : ils s'alignent sur cette règle.
   ========================================================================== */

/* Les liens de page ACTIFS (entrée de menu courante, onglet courant) ne
   réagissent pas au survol : leur état « vous êtes ici » prime. */
.site-navigation a:hover, .site-navigation a:focus-visible,
.site-pied a:hover, .site-pied a:focus-visible,
.page-onglets a:not([aria-current]):hover,
.page-onglets a:not([aria-current]):focus-visible,
.logos-texte a:hover, .logos-texte a:focus-visible,
.fiche-bloc a:hover, .fiche-bloc a:focus-visible,
.agenda-ligne__lieu a:hover, .agenda-ligne__lieu a:focus-visible,
.fiche-retour:hover, .fiche-retour:focus-visible,
.fiche-dates__lien:hover, .fiche-dates__lien:focus-visible,
.agenda-annees a:hover, .agenda-annees a:focus-visible,
.agenda-suite a:hover, .agenda-suite a:focus-visible,
.agenda-ligne__type-lien:hover, .agenda-ligne__type-lien:focus-visible,
.agenda-ligne__spectacle:hover, .agenda-ligne__spectacle:focus-visible,
.agenda-ligne__reserver:hover, .agenda-ligne__reserver:focus-visible,
.agenda-chip:hover, .agenda-chip:focus-visible,
.agenda-lien-filtre:hover, .agenda-lien-filtre:focus-visible,
.accueil-entree:hover, .accueil-entree:focus-visible,
.logos-bouton--vide:hover, .logos-bouton--vide:focus-visible,
.logos-bouton--jaune:hover, .logos-bouton--jaune:focus-visible,
.lien-evitement:focus {
  background: var(--logos-encre);
  color: var(--logos-blanc);
  box-shadow: none;
  text-decoration: none;
  transition: none;
}

/* ==========================================================================
   Visuels HORS spectacle (tête de page Fabrique, anneau de la page
   compagnie) : bichromie encre → COULEUR PRINCIPALE en continu, comme les
   portraits d'équipe — animation d'arrivée, éclairs, et survol inversé
   (la couleur se retire au survol). Deux couches ::before/::after, le masque
   du parent découpe l'ensemble ; l'ombre portée reste sur le parent.
   Le remplissage encre sans image (--encre) n'est pas concerné.
   ========================================================================== */

.page-visuel:not(.page-visuel--encre),
.visuel-anneau {
  position: relative;
}
.page-visuel:not(.page-visuel--encre) { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.visuel-anneau { filter: none; }

.page-visuel:not(.page-visuel--encre)::before,
.page-visuel:not(.page-visuel--encre)::after,
.visuel-anneau::before,
.visuel-anneau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
}

.page-visuel:not(.page-visuel--encre)::before,
.visuel-anneau::before {
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}

.page-visuel:not(.page-visuel--encre)::after,
.visuel-anneau::after {
  filter: brightness(1.18) contrast(1.02) url(#w-accent) saturate(0.8);
  opacity: 1;   /* couleur visible en continu */
}

/* Cas des éléments DÉJÀ sur fond encre/noir (bouton principal, « Nous
   écrire », Envoyer, Teaser) : inversion — fond blanc, texte encre — pour que
   le changement d'état reste perceptible. Le filet 2 px garde la silhouette. */
.logos-bouton:not(.logos-bouton--vide):not(.logos-bouton--jaune):hover,
.logos-bouton:not(.logos-bouton--vide):not(.logos-bouton--jaune):focus-visible,
.contact-envoyer:hover, .contact-envoyer:focus-visible {
  background: var(--logos-blanc);
  color: var(--logos-encre);
  box-shadow: inset 0 0 0 2px var(--logos-encre);
  transition: none;
}

/* ==========================================================================
   Règle typographique LOGOS SANS (décision compagnie 2026-08-19) :
   la Logos Sans ne peut exister que SUR UN APLAT DE COULEUR (encre, cycle,
   accent, noir). Hors aplat, c'est Oswald qui la remplace.
   La Batard Sec n'est PAS concernée : elle reste sur les grands titres,
   y compris sur fond blanc.
   ========================================================================== */

/* Hors aplat : Oswald. */
.titre-special,
.logos-texte .titre-special {
  font-family: var(--font-sous-titre);
}
.logos-bouton--vide { font-family: var(--font-sous-titre); }   /* bouton à fond blanc */

/* Sur aplat : la Logos Sans reste. */
.titre-aplat,
.logos-texte .titre-aplat,
.bloc-jaune .titre-special,
.logos-texte .bloc-jaune .titre-special {
  font-family: var(--font-special);
  font-weight: 400;   /* graisse native de la Logos Sans, pas de faux gras */
}

/* Titre de section sans chevron ni aplat (« Les collaborateurs ») : la même
   respiration sous le titre que les autres sections (26 px). */
.logos-texte .equipe-collaborateurs > .titre-special {
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   2026-08-20 — Pied de page : bande des logos de soutiens (Réglages LOGOS →
   Pied de page, identifiants d'images séparés par des virgules). Logos en
   nuances de gris pour rester sous la charte ; la liste complète et les
   catégories vivent sur la page Partenaires & soutiens.
   -------------------------------------------------------------------------- */
.site-pied__soutiens {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: center;
  margin: 34px 0 8px;
}
.site-pied__soutiens img {
  max-height: 44px;
  width: auto;
  /* dégradé encre : la même bichromie que les photos du site */
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}

/* 2026-08-20 — Grille de logos des partenaires ([logos_partenaires]) : même
   traitement que la bande du pied de page, en plus grand. Nuances de gris :
   la couleur reste réservée aux cycles et à l'accent. */
.grille-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  margin: 18px 0 34px;
}
.grille-logos img {
  max-height: 60px;
  max-width: 190px;
  width: auto;
  /* dégradé encre : la même bichromie que les photos du site */
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}

/* 2026-08-20 — Fabrique itinérante fusionnée en une page : les rubriques
   (Résidences-enquêtes, Créations partagées) sont des aplats espacés.
   Spécificité alignée sur .logos-texte .titre-aplat (margin: 0 0 26px),
   sinon la rubrique collait au bloc précédent. Le sous-titre qui suit
   colle à sa rubrique : l'espace appartient à l'aplat, pas au sous-titre. */
.titre-rubrique,
.logos-texte .titre-aplat.titre-rubrique {
  margin: 64px 0 16px;
}
.logos-texte .titre-rubrique + .titre-special,
.logos-texte .titre-rubrique + h3,
.logos-texte .titre-rubrique + p { margin-top: 0; }

/* 2026-08-20 — Pages de la Fabrique itinérante : le picto fabrique
   accompagne le fil de rubrique (le nom de la page mère). */
.page-fil__picto { width: 14px; height: 16px; margin-right: 10px; vertical-align: -3px; }

/* 2026-08-20 — Les noms de spectacles en pastille-titre sont des LIENS vers
   les fiches : même habillage que la pastille, survol selon la règle globale. */
.pastille a { color: inherit; text-decoration: none; font-weight: inherit; }