/* ==========================================================================
   Compagnie Logos — amendements à la charte
   --------------------------------------------------------------------------
   Ce fichier existe pour ne PAS modifier logos-charte.css, qui est la reprise
   fidèle du référentiel de handoff. Si une v1.1 de la charte arrive, on
   remplace le référentiel sans rien perdre, et on relit ce fichier pour voir
   ce qui a été intégré à la source et peut donc en sortir.

   Toute règle ici porte une date et une raison. Rien d'autre n'y entre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2026-08-08 — Le bouton principal passe en noir.

   Raison : #FEF402 portait trois messages simultanés (entrée de navigation
   active, bouton principal, aplat du cycle Propriété). Sur une page d'agenda
   les trois cohabitaient à quelques dizaines de pixels. En libérant le bouton,
   le jaune ne garde plus que deux emplois, et la répartition devient lisible :

     jaune  → « vous êtes ici »        (navigation active, filtre actif)
     noir   → « agissez »              (bouton principal)
     cycle  → « ceci appartient à »    (badges, filets, courbes photo)

   Conséquence : la variante noire de la charte servait à la vidéo. Les deux se
   confondraient. La variante vidéo garde donc son filet gris #707070 en
   incrustation, qui devient sa marque distinctive plutôt qu'un détail.
   -------------------------------------------------------------------------- */

.logos-bouton {
  background: var(--logos-noir);
  color: var(--logos-blanc);
}

.logos-bouton--noir {                    /* vidéo, teaser */
  background: var(--logos-noir);
  color: var(--logos-blanc);
  box-shadow: inset 0 0 0 1px #707070;   /* valeur de la charte, conservée */
}

.logos-bouton--jaune {                   /* l'ancien principal, si un support en a besoin */
  background: var(--logos-jaune);
  color: var(--logos-noir);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   2026-08-08 — Portée de l'interdiction d'opacité.

   La charte écrit « jamais d'opacité réduite » dans la section consacrée au
   traitement des photos. Précision reçue : l'interdiction ne porte que sur les
   photos. Le texte peut donc être atténué par l'opacité.

   Reste vrai sans changement : aucune photo en opacité réduite, aucune
   transparence, aucun voile dégradé sous un texte.
   -------------------------------------------------------------------------- */

.photo-cadre,
.photo-anneau,
.photo-cycle {
  opacity: 1 !important;                 /* garde-fou : la règle photo tient */
}

/* --------------------------------------------------------------------------
   2026-08-08 — L'anneau passe du clip-path SVG au masque PNG.

   Raison : la charte découpe le cadre par un masque PNG (mask-image) mais
   l'anneau par `clip-path: url(#anneau-clip)`. Or la référence à un clipPath
   SVG depuis un élément HTML n'est pas prise en charge par Safari et reste
   fragile ailleurs : les anneaux ne s'affichaient pas découpés sur la page
   des spectacles. Les deux formes utilisent désormais la même technique,
   celle qui fonctionne. anneau.png est généré depuis anneau.svg du
   handoff (813 × 1373, le ratio 406,45 / 686,55 de la charte) — aucun dessin
   n'est modifié.
   -------------------------------------------------------------------------- */

.photo-anneau {
  clip-path: none;
  -webkit-mask-image: url(../svg/anneau.png);
          mask-image: url(../svg/anneau.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   2026-08-08 — Alignement sur la charte v2 (handoff « handoff_theme_logos »).
   Le référentiel v1 est conservé ; tout ce qui change est ici.
   -------------------------------------------------------------------------- */

:root {
  --logos-fond-page: #e9e9e9;
  --filet-agenda: #d4d4d4;
}

/* --------------------------------------------------------------------------
   2026-08-19 — Couleur d'accent MODIFIABLE EN ADMIN (Réglages LOGOS →
   Apparence). Défaut : PITAYA #FF145B (nom arrêté le 2026-08-24 — ce rose
   était dit « fuchsia » auparavant ; couleur principale du 2026-08-20,
   anciennement #FF57C4) — inversion mauve/pitaya du 2026-08-20, puis
   échange des luminosités : l'accent a pris la clarté du mauve, le mauve
   (devenu couleur sombre du cycle Possessions, voir plus bas) a pris la
   profondeur du pitaya.

   La valeur ci-dessous n'est qu'un repli : functions.php surcharge
   --logos-jaune en tête de page avec la couleur choisie. Le filtre photo
   dynamique #w-accent reste disponible mais N'EST PLUS appliqué par défaut :
   depuis le 2026-08-19, toutes les photos masquées sont en encre au repos,
   la bichromie du cycle n'apparaissant qu'au survol (voir la règle globale
   plus bas). EXCEPTION : le cycle Propriété / Possessions garde le JAUNE
   #FEF402 comme couleur de cycle — la couleur de cycle appartient à la
   charte du cycle, pas à l'accent du site.
   -------------------------------------------------------------------------- */

:root { --logos-jaune: #FF145B; }  /* défaut ; surchargé par la couleur choisie dans Réglages LOGOS → Apparence */

.cycle-propriete {
  --cycle-aplat: var(--propriete-lumieres);      /* #FEF402, inchangé */
}

/* 2026-08-20 — Inversion mauve/pitaya + échange des luminosités : la
   couleur SOMBRE du cycle Possessions est le MAUVE FONCÉ #8200DA (teinte du
   mauve #D08AFF, assombrie à la profondeur de l'ancien pitaya). Filets et
   dégradés du cycle suivent ; les courbes photo sont recalculées dans
   filtres-v2.svg (w-propriete, w-rose). */
:root { --propriete-ombres: #8200DA; }

/* --------------------------------------------------------------------------
   2026-08-09 — UNE SEULE couleur utilisable par cycle (hors dégradés).

   Règle compagnie : en dehors des dégradés et des courbes photo, chaque cycle
   n'expose qu'une couleur — celle de son aplat : ORANGE #FF7F39 pour
   Révolution, JAUNE #FEF402 pour Possessions. Les couleurs sombres (#0514D5,
   #D5058C) restent réservées aux courbes photo et aux dégradés, jamais en
   texte, icône ou aplat. --cycle-icone matérialise cette règle pour les
   pictogrammes et textes colorés par cycle.
   -------------------------------------------------------------------------- */
.cycle-revolution { --cycle-icone: var(--revolution-lumieres); }  /* orange */
.cycle-propriete  { --cycle-icone: var(--propriete-lumieres); }   /* jaune  */
.hors-cycle       { --cycle-icone: var(--logos-jaune); }          /* sans spectacle : la couleur d'accent */

/* 2026-08-20 — Cycle TRANSMISSION (Huellas, Compte à rebours) :
   brun clair #DA9E62 en couleur utilisable, brun profond #5B3815 réservé aux
   courbes photo et dégradés. */
:root {
  --transmission-ombres:   #5B3815;
  --transmission-lumieres: #DA9E62;
}
.cycle-transmission {
  --cycle-ombres:   var(--transmission-ombres);
  --cycle-lumieres: var(--transmission-lumieres);
  --cycle-aplat:    var(--transmission-lumieres);
  --cycle-icone:    var(--transmission-lumieres);
  --cycle-courbe:   url(#w-transmission);
  --cycle-brightness: 1.18;
  --cycle-contrast:   1.02;
}

/* --------------------------------------------------------------------------
   2026-08-10 — Logos Batard remplacée par LogosBatardSec v2.0.

   Famille DÉDIÉE « Logos Batard Sec » + bascule du jeton --font-titre :
   redéclarer la même famille que la charte laissait le navigateur libre de
   choisir l'ancienne fonte. Avec un nom distinct, aucune ambiguïté — et
   l'ancienne Batard reste en repli si un fichier manque. Le preload de
   functions.php pointe aussi sur le nouveau fichier.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Logos Batard Sec';
  /* Version WEB optimisée (2026-08-20) : 388 Ko contre 812 Ko. Le woff2
     suffit à tous les navigateurs depuis 2016 ; en repli extrême, la pile
     retombe sur l'ancienne Logos Batard puis Oswald. */
  src: url("../fonts/LogosBatardSec-Regular-web.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-titre: 'Logos Batard Sec', 'Logos Batard', Oswald, sans-serif;
}

/* 2026-08-20 — Jamais de graisse SYNTHÉTIQUE : la Logos Sans (une seule
   graisse, Medium) et la Batard Sec (Regular) ne doivent pas être
   « engraissées » artificiellement par le navigateur — le trait bave,
   surtout en clair sur aplat sombre. Les fontes qui ont un vrai gras
   (Ubuntu 700, Oswald variable) ne sont pas affectées. */
body { font-synthesis: none; }
/* (la graisse native 400 des titres spéciaux et pastilles est posée dans
   logos-chrome.css, chargé après ce fichier) */

/* Polices Google en local — RGPD : plus aucun appel à fonts.googleapis. */
@font-face { font-family: 'Oswald'; src: url("../fonts/Oswald-var.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url("../fonts/Ubuntu-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }

/* Page grise, colonne de contenu blanche de 1032 px. */
body { background: var(--logos-fond-page); }

.site-colonne {
  max-width: 1032px;
  margin: 0 auto;
  background: #ffffff;
  padding: 0 40px;
}

/* Téléphone : gouttière réduite, cohérente avec la maquette mobile (20 px). */
@media (max-width: 780px) {
  .site-colonne { padding: 0 20px; }
}

.logos-page, .site-bandeau__interieur, .site-pied__interieur {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Liens : gras, jamais soulignés, aucun aplat au repos. Le survol est défini
   par la règle GLOBALE de logos-chrome.css (aplat encre opaque, texte blanc). */
.logos-texte a, .fiche-bloc a, .agenda-ligne__lieu a {
  background: none;
  color: var(--logos-noir);
  font-weight: 700;
  padding: 0;
}

/* Navigation en Oswald. */
.site-navigation a, .site-pied ul a, .agenda-archives, .agenda-archives select {
  font-family: var(--font-sous-titre);
  letter-spacing: 0.5px;
}

/* Le cadre déchiré passe en mask-box-image : les bords ne s'étirent plus
   avec l'image, seule la zone centrale suit (spécification v2).
   2026-08-19 — le masque « pilule » du handoff est remplacé par
   carte-bandeaux.png, dérivé de l'anneau carré des photos d'équipe : bords
   déchirés fins, angles carrés adoucis, intérieur nettoyé de son grain
   (décision compagnie — les arrondis de la pilule n'étaient pas originaux). */
/* 2026-08-19 — Le masque cadre est généré HORS LIGNE à la taille d'affichage
   (2064×938) : coins ET bords portent la texture déchirée de l'anneau carré
   à une échelle uniforme, assemblée segment par segment. Plus de mask-border
   qui étirait les bords : un simple mask-image suffit, et le ratio du bloc
   (2080/946) correspond au fichier — rien ne se déforme. */
.photo-cadre, .fiche-visuel__photo {
  -webkit-mask-box-image: none;
          mask-border-source: none;
  -webkit-mask-image: url(../svg/carte-bandeaux.png);
          mask-image: url(../svg/carte-bandeaux.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* 2026-08-09 — Le visuel de la fiche spectacle reste SANS ombre portée
   (cahier des charges) : la règle drop-shadow ajoutée en 2.8.0 est retirée.
   L'ombre du visuel de tête des pages Fabrique (.page-visuel), elle, suit la
   maquette et est conservée dans logos-chrome.css. */

/* Portraits d'équipe : masque carré déchiré + filtre encre. */
.portrait-equipe {
  width: 180px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url(../svg/carte-portrait.png);
          mask-image: url(../svg/carte-portrait.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}

/* Filtres photo v2 : courbes de dégradé, appliquées au conteneur. */
/* 2026-08-19 — RÈGLE GLOBALE des photos masquées : au repos, toute photo est
   en ENCRE, sans autre couleur. La bichromie du cycle arrive au survol en
   LONG FONDU (900 ms), identique au retour. Un filtre SVG ne s'interpole
   pas : la version bichromie vit dans un ::after superposé dont seule
   l'opacité varie ; ::before porte l'encre. background:inherit reprend
   l'image posée en style inline, le masque du parent découpe l'ensemble. */
.photo-cycle {
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}

.cycle-revolution .photo-cycle, .photo-cycle.cycle-revolution,
.cycle-propriete .photo-cycle, .photo-cycle.cycle-propriete,
.cycle-transmission .photo-cycle, .photo-cycle.cycle-transmission {
  position: relative;
  filter: none;   /* un filtre parent refiltrerait les deux couches */
}

.cycle-revolution .photo-cycle::before, .photo-cycle.cycle-revolution::before,
.cycle-propriete .photo-cycle::before, .photo-cycle.cycle-propriete::before,
.cycle-transmission .photo-cycle::before, .photo-cycle.cycle-transmission::before,
.cycle-revolution .photo-cycle::after, .photo-cycle.cycle-revolution::after,
.cycle-propriete .photo-cycle::after, .photo-cycle.cycle-propriete::after,
.cycle-transmission .photo-cycle::after, .photo-cycle.cycle-transmission::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
}

/* Repos : la PREMIÈRE couleur du cycle (la sombre) est déjà là — monochrome
   bleu pour Révolution, rose pour Possessions. */
.cycle-revolution .photo-cycle::before, .photo-cycle.cycle-revolution::before {
  filter: brightness(1.18) contrast(1.02) url(#w-bleu) saturate(0.8);
}
.cycle-propriete .photo-cycle::before, .photo-cycle.cycle-propriete::before {
  filter: brightness(1.18) contrast(1.02) url(#w-rose) saturate(0.8);
}
.cycle-transmission .photo-cycle::before, .photo-cycle.cycle-transmission::before {
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}

/* La bichromie du cycle est l'ÉTAT VISIBLE permanent — identique aux sorties
   Claude Design. Une petite animation la fait ARRIVER depuis l'encre à
   l'apparition de la page (fondu 1,2 s après 300 ms d'encre). */
@keyframes logos-fondu-couleur {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* MODÈLE DÉFINITIF (2026-08-20, arrêté) : les couleurs sont VISIBLES EN
   CONTINU — plus aucun changement au survol. Bichromie complète du cycle
   sur les photos de spectacle, encre → couleur principale ailleurs.
   Réglages Claude Design : brightness 1.18, contrast 1.02, saturate 0.8,
   courbes à point médian 0.2 (filtres-v2.svg). Les photos sources gardent
   leurs couleurs naturelles. */

.cycle-revolution .photo-cycle::after, .photo-cycle.cycle-revolution::after {
  filter: brightness(1.18) contrast(1.02) url(#w-revolution) saturate(0.8);
  opacity: 1;
}
.cycle-propriete .photo-cycle::after, .photo-cycle.cycle-propriete::after {
  filter: brightness(1.18) contrast(1.02) url(#w-propriete) saturate(0.8);
  opacity: 1;
}
.cycle-transmission .photo-cycle::after, .photo-cycle.cycle-transmission::after {
  filter: brightness(1.18) contrast(1.02) url(#w-transmission) saturate(0.8);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2026-08-20 — Spectacles PASSÉS (statut « passe ») : traitement GRISÉ,
   quel que soit leur cycle, partout où ils apparaissent (cartes, fiche,
   agenda). La classe est posée par les gabarits d'après le statut : tout
   spectacle qui bascule en « passé » se grise automatiquement.
   -------------------------------------------------------------------------- */
:root {
  --passe-ombres:   #4A4A4A;
  --passe-lumieres: #C9C9C9;
}
.spectacle-passe {
  --cycle-ombres:   var(--passe-ombres);
  --cycle-lumieres: var(--passe-lumieres);
  --cycle-aplat:    var(--passe-lumieres);
  --cycle-icone:    var(--passe-lumieres);
}
/* Photos : bichromie grise. Placé APRÈS les règles de cycle, il gagne à
   spécificité égale — un passé du cycle Transmission sort gris, pas brun. */
.spectacle-passe .photo-cycle, .photo-cycle.spectacle-passe {
  position: relative;
  filter: none;
}
.spectacle-passe .photo-cycle::before, .photo-cycle.spectacle-passe::before,
.spectacle-passe .photo-cycle::after, .photo-cycle.spectacle-passe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
}
.spectacle-passe .photo-cycle::before, .photo-cycle.spectacle-passe::before {
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}
.spectacle-passe .photo-cycle::after, .photo-cycle.spectacle-passe::after {
  filter: brightness(1.18) contrast(1.02) url(#w-gris) saturate(0.8);
  opacity: 1;
}



/* ============================================================
   Pages Compagnie : Quid est logos ? / Notre équipe
   ============================================================ */

/* --- Ce que je cherche : exergue + signature --- */
.compagnie-exergue {
  font-family: var(--font-titre, 'Logos Batard Sec', Georgia, serif);
  font-size: clamp(30px, 3.2vw, 40px);   /* plancher relevé : lisible sur mobile */
  line-height: 1.15;
  margin: 0 0 28px;
  max-width: 20ch;
}
/* Signature de Morgane : en typo Logos (Batard), SANS aplat derrière
   (décision compagnie 2026-08-09 — remplace la pastille). */
.compagnie-signature,
.logos-texte .compagnie-signature {
  font-family: var(--font-titre, 'Logos Batard', Oswald, sans-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  background: none;
  padding: 0;
  margin: 24px 0 0;
}
.compagnie-cherche,
.compagnie-quid,
.compagnie-histoire,
.compagnie-cycles { margin-bottom: 44px; max-width: 62ch; }
.compagnie-cycles h3 {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 22px 0 6px;
}

/* --- Équipe : listes nom / rôle --- */
.equipe-noyau, .equipe-prod, .equipe-bureau, .equipe-collaborateurs {
  margin-bottom: 54px;
}
.deux-colonnes .equipe-prod, .deux-colonnes .equipe-bureau { margin-bottom: 0; }
/* Maquette : trait noir à gauche, « rôle | nom » sur chaque ligne. */
.equipe-liste {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 4px solid var(--logos-noir, #000);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.equipe-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.equipe-liste .equipe-role {
  color: inherit;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.equipe-liste .equipe-role::after {
  content: "|";
  opacity: 0.45;
  margin-left: 12px;
  font-family: var(--font-texte);
  font-weight: 400;
  text-transform: none;
}
.equipe-liste .equipe-nom {
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

/* --- Collaborateurs : liste EN LIGNE, séparateur ◆ (exception validée par la
   compagnie — remplace la ligne par personne de la maquette). --- */
.equipe-collaborateurs { margin-top: 54px; }
.equipe-collab { list-style: none; margin: 0; padding: 0; }
.equipe-collab li {
  display: inline;
  font-size: 14px;
  line-height: 2;
}
.equipe-collab li:not(:last-child)::after {
  content: "\25C6";           /* ◆ */
  font-size: 9px;
  vertical-align: 2px;
  padding: 0 10px;
  color: var(--logos-noir);
}
.equipe-collab__nom,
.equipe-collab li strong {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
}


/* --- Équipe : cartes avec portrait en anneau carré --- */
.equipe-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 32px 24px;
}
.equipe-membre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 0;
}
.equipe-portrait {
  width: 180px; height: 180px;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url("../svg/carte-portrait.png");
          mask-image: url("../svg/carte-portrait.png");
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  margin-bottom: 12px;
  /* Deux couches, comme les photos de cycle : encre doux au repos, et au
     survol un fondu vers la PHOTO BRUTE, sans aucun traitement (décision
     compagnie 2026-08-24 — voir la règle .equipe-portrait::after). */
  position: relative;
  filter: none;
}
.equipe-portrait::before,
.equipe-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
}
.equipe-portrait::before {
  /* 2026-08-20 : au repos, le PETIT filtre encre des galeries (encre doux),
     pas la bichromie pleine — les portraits gardent leurs couleurs adoucies. */
  filter: brightness(1.06) contrast(1.03) url(#w-encre-doux);
}
.equipe-portrait::after {
  /* 2026-08-24 : au survol, la photo BRUTE, sans aucun traitement — ni
     courbe ni saturation (décision compagnie ; remplace le saturate(1.18)
     du 2026-08-20). */
  filter: none;
  opacity: 0;   /* n'apparaît qu'au survol */
}
.equipe-membre .equipe-nom { font-family: Oswald, sans-serif; font-weight: 500; font-size: 18px; text-transform: uppercase; }
.equipe-membre .equipe-role { color: #444; font-size: 14px; margin-top: 2px; }

@media (max-width: 460px) {
  .equipe-grille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 16px; }
  .equipe-portrait { width: 140px; height: 140px; }
}




/* Les anciennes règles « Fabrique » (v2.6) sont remplacées par les composants
   génériques de logos-chrome.css (filet, pastille, grille-2-1, fabrique-etapes). */


/* ============================================================
   Page Contact
   ============================================================ */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1.2fr;   /* maquette : le formulaire est plus large */
  gap: 60px;
  align-items: start;
}

/* Colonne formulaire sur aplat jaune, comme la maquette. */
.contact-formulaire {
  background: var(--logos-jaune, #FEF402);
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.logos-texte .contact-formulaire h2 {
  font-family: var(--font-special);
  font-weight: 400;   /* 2026-08-25 : graisse native Logos Sans, jamais de gras */
  font-size: 32px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}
.contact-bloc { margin-bottom: 28px; max-width: 46ch; }
.contact-personne { margin: 0 0 14px; line-height: 1.5; }
.contact-role,
.contact-personne strong {
  display: block;
  font-family: Oswald, sans-serif; font-weight: 600;
  letter-spacing: 0.3px;
}
.contact-legal { font-size: 12px; line-height: 1.7; }  /* mentions légales : 12 px, maquette */
.contact-legal p { font-size: 12px; }

/* Formulaire */
.contact-form { display: grid; gap: 16px; }
.contact-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-form__duo { grid-template-columns: 1fr; } }
.contact-champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-champ label {
  font-family: Oswald, sans-serif; font-weight: 500;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}
.contact-champ input,
.contact-champ select,
.contact-champ textarea {
  font: inherit;
  padding: 8px 12px;
  min-height: 40px;
  border: 0;
  box-shadow: inset 0 0 0 2px var(--logos-noir, #000);
  background: var(--logos-blanc, #fff);
  border-radius: 0;
}
.contact-champ textarea { resize: vertical; }
.contact-champ input:focus,
.contact-champ select:focus,
.contact-champ textarea:focus {
  outline: 3px solid var(--logos-encre, #001721);
  outline-offset: 1px;
}
/* pot de miel : invisible pour l'humain */
.contact-champ--miel { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.contact-envoyer {
  font-family: Oswald, sans-serif; font-weight: 600;
  font-size: 15px; text-transform: uppercase; letter-spacing: 1px;
  padding: 12px 22px;
  border: 0; cursor: pointer;
  background: var(--logos-noir, #001721); color: #fff;
}
/* Déjà sur fond noir : inversion au survol (règle globale de logos-chrome.css). */
.contact-envoyer:hover, .contact-envoyer:focus-visible {
  background: var(--logos-blanc, #fff);
  color: var(--logos-encre, #001721);
  box-shadow: inset 0 0 0 2px var(--logos-encre, #001721);
}

.contact-message {
  padding: 12px 16px; margin: 0 0 16px;
  font-weight: 600;
}
.contact-message--ok { background: rgba(0,23,33,0.06); }
.contact-message--erreur { background: #ffe8e2; }

@media (max-width: 780px) {
  .contact-grille { grid-template-columns: 1fr; gap: 32px; }
}

/* Fiche sans photo : le cadre déchiré rempli couleur encre (décision v2.8). */
.fiche-visuel__photo--vide { background: var(--logos-encre); filter: none; }

/* --------------------------------------------------------------------------
   2026-08-20 — Équipe : biographies dépliables + survol des portraits.

   Au survol d'un portrait, la COULEUR s'efface en fondu : la couche accent
   (::after) passe en opacité 0, il reste la couche encre. C'est l'inverse
   des photos de spectacle (couleurs fixes) — exception demandée par la
   compagnie pour la page Équipe. Au clic sur un portrait, les biographies
   du noyau dur s'ouvrent toutes ensemble (logos-equipe.js).
   -------------------------------------------------------------------------- */
.equipe-grille .equipe-portrait { cursor: pointer; }
.equipe-portrait::after { transition: opacity 450ms ease; }
/* Le survol d'UN membre efface la couleur de TOUS les portraits (décision
   compagnie 2026-08-20) : :has() remonte l'état au niveau de la grille.
   Le déclencheur est la CARTE entière (photo, nom, rôle, biographie
   ouverte) : l'état survolé tient tant que la souris reste sur la zone,
   y compris en lisant une bio. Le repli par membre reste en secours pour
   les navigateurs sans :has(). */
/* 2026-08-20 : au survol, la photo NATURELLE (légèrement saturée) apparaît
   en fondu sur tous les portraits — au repos ils sont en encre doux. :has() remonte l'état à
   la grille entière ; :has(:focus-visible) et non :focus-within, sinon le
   focus laissé par un clic souris collait l'effet sur la photo cliquée. */
/* 2026-08-25 : SEULE l'image survolée réagit (le survol de groupe via
   :has(), décidé le 2026-08-20, est abandonné avec la visionneuse). */
.equipe-portrait:hover::after,
.equipe-portrait:focus-visible::after { opacity: 1; }

.equipe-bio { margin-top: 10px; }
/* Aucun libellé visible : la biographie ne s'ouvre qu'au clic sur un
   portrait. ACCORDÉON FLUIDE : la rangée de grille s'anime de 0fr à 1fr —
   la seule façon d'animer une hauteur sans la mesurer. Structure en <div>
   simple et non en <details> : les Chrome récents enveloppent le contenu
   d'un <details> dans une boîte interne (::details-content) qui devient
   l'item de grille à la place du texte, et le repli ne se faisait plus.
   Sans JavaScript (pas de classe logos-js), les biographies restent
   simplement visibles. */
/* 2026-08-25 : l'accordéon est REMPLACÉ par la visionneuse (décision
   compagnie). Les biographies sont masquées dans le corps de page dès que
   JavaScript tourne — elles ne se lisent que dans la visionneuse. Sans
   JavaScript, elles restent simplement visibles. */
.logos-js .equipe-mode-visionneuse .equipe-grille .equipe-bio { display: none; }
.equipe-bio__texte p {
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
  margin: 10px 0 0;
}
/* Dans les listes rôle | nom (production, bureau) : la bio occupe sa
   propre ligne sous l'entrée. */
.equipe-liste .equipe-bio { flex-basis: 100%; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .equipe-portrait::after { transition: none; }
}

/* --------------------------------------------------------------------------
   2026-08-20 — Le premier « o » de LOGOS rebondit au survol du logo.

   Exception assumée à la règle « bascule nette, aucune animation » : elle
   vaut pour les états de survol de l'interface, pas pour ce clin d'œil
   demandé par la compagnie. Les 99 tracés du « o » portent la classe
   logo-o1 (posée dans logo-logos.svg) et bougent d'un seul bloc : la
   translation est identique pour tous, la lettre reste entière.
   -------------------------------------------------------------------------- */
.logos-logo .logo-o1 {
  /* Rotation d'un seul bloc : tous les fragments partagent le même centre,
     celui de la lettre (coordonnées du viewBox), sinon le o se disloque.
     Deux mouvements INDÉPENDANTS grâce aux propriétés séparées :
     le rebond est une animation sur `translate`, la mise au droit une
     transition sur `rotate` — à la sortie du survol, seule la rotation
     s'inverse, en douceur, sans rebond. */
  transform-box: view-box;
  transform-origin: 175.7px 223.1px;
  rotate: 0deg;
  transition: rotate 600ms ease;
}
a:hover > .logos-logo .logo-o1,
a:focus-visible > .logos-logo .logo-o1 {
  /* La lettre est dessinée légèrement penchée : au survol elle se met
     droite (-7°) et rebondit deux fois — UNE exécution, pas de boucle. */
  rotate: -10deg;   /* la lettre est dessinée plus penchée qu'il n'y paraît */
  animation: logo-o-rebond 1100ms ease-in-out 1;
}
@keyframes logo-o-rebond {
  0%, 80%, 100% { translate: 0 0; }
  28%           { translate: 0 -30px; }   /* unités du viewBox (317 de haut) */
  50%           { translate: 0 0; }
  66%           { translate: 0 -12px; }
}
/* À la SORTIE du survol : la rotation s'inverse en douceur (transition
   ci-dessus) et un petit rebond unique l'accompagne — la classe o-retombe
   est posée le temps de l'animation par logos-menu.js. */
a.o-retombe > .logos-logo .logo-o1 { animation: logo-o-petit-rebond 500ms ease-in-out 1; }
@keyframes logo-o-petit-rebond {
  0%, 100% { translate: 0 0; }
  45%      { translate: 0 -14px; }
}
@media (prefers-reduced-motion: reduce) {
  .logos-logo .logo-o1 { transition: none; }
  a:hover > .logos-logo .logo-o1,
  a:focus-visible > .logos-logo .logo-o1 { animation: none; rotate: 0deg; }
}

/* --------------------------------------------------------------------------
   2026-08-20 — RESPONSIVE, 2e vague de corrections compagnie.
   -------------------------------------------------------------------------- */

/* Titres Batard un peu plus gros sur mobile : les clamp() descendaient à
   42 px, trop discrets sur petit écran. */
@media (max-width: 780px) {
  .logos-titre-1 { font-size: clamp(47px, 11.5vw, 64px); }
}

/* Bandeaux à masque sur MOBILE : un masque dédié PLUS HAUT QUE LARGE
   (carte-mobile.png, 900 × 1120, angles du masque original copiés
   sans déformation, bords en tuilage miroir). Le conteneur prend le RATIO
   du masque : même hauteur partout (pages ET fiches), jamais d'étirement.
   2026-08-25 — sélecteurs PRÉFIXÉS par .site-colonne : cette feuille est
   chargée AVANT logos-chrome.css, dont la règle de base .page-visuel
   (masque desktop + hauteur fixe 469 px) écrasait silencieusement ce bloc
   à spécificité égale — d'où les coins déformés signalés deux fois. */
/* 2026-08-25 — Les bandeaux reçoivent leurs DEUX recadrages en variables
   (posées par les gabarits) : --visuel-large (panoramique) par défaut, et
   sur mobile --visuel-portrait = la MÊME image que l'anneau (recadrage
   anneau dédié, sinon image mise en avant). Les têtes de page décoratives
   (visuel de rubrique en fichier du thème) gardent leur background-image
   en ligne, qui prime naturellement. */
.site-colonne .page-visuel,
.site-colonne .fiche-visuel__photo {
  background-image: var(--visuel-large);
  /* 2026-09-01 — point de cadrage et taille réglés dans « Cadrage des
     visuels » (fiche spectacle) ; absents = centre + couvrir, comme avant. */
  background-position: var(--focale-cadre, center);
  background-size: var(--taille-cadre, cover);
}

@media (max-width: 780px) {
  .site-colonne .page-visuel,
  .site-colonne .fiche-visuel__photo {
    aspect-ratio: 900 / 1120;
    height: auto;
    background-image: var(--visuel-portrait, var(--visuel-large));
    /* 2026-09-01 — le cadre mobile a son propre point de cadrage. */
    background-position: var(--focale-carte-mobile, center);
    background-size: var(--taille-carte-mobile, cover);
    -webkit-mask-image: url(../svg/carte-mobile.png);
            mask-image: url(../svg/carte-mobile.png);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}

/* 2026-08-24 — Équipe : « Production / diffusion » et « Le bureau » sont des
   SOUS-RUBRIQUES du noyau dur (h3 dans la section). L'échelle typographique
   suit la hiérarchie : un cran sous le titre de section (32 → 22 px),
   chevron réduit d'autant. */
.logos-texte .equipe-noyau h3.titre-chevron {
  font-size: 22px;
  margin: 40px 0 18px;
}
.logos-texte .equipe-noyau h3.titre-chevron::before {
  width: 12px;
  height: 14px;
}

/* 2026-08-25 — ÉQUIPE sur MOBILE : un membre par ligne, portrait pleine
   largeur (décision compagnie). Posé en fin de fichier pour gagner sur la
   grille précédente. Le masque carré (carte-portrait) garde son ratio 1:1. */
@media (max-width: 780px) {
  .equipe-grille { grid-template-columns: 1fr; gap: 40px; }
  .equipe-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* 2026-08-25 — Sous-rubriques de l'Équipe (Production / diffusion, Le
   bureau) : davantage d'air au-dessus (64 px au lieu de 40), demandé après
   essai. */
.logos-texte .equipe-noyau h3.titre-chevron { margin-top: 64px; }

/* --------------------------------------------------------------------------
   2026-08-25 — ÉQUIPE : la VISIONNEUSE des biographies (retenue à l'essai
   contre l'accordéon et le recto/verso — logos_equipe_shortcode,
   logos-equipe.js).
   -------------------------------------------------------------------------- */

/* VISIONNEUSE : plein écran blanc, photo brute en anneau carré + bio. */
body.equipe-visionneuse-ouverte { overflow: hidden; }
.equipe-visionneuse { display: none; }
/* Boîte AJUSTÉE au contenu (décision 2026-08-25 : pas de plein écran), sur
   FOND BLANC (décision finale du même jour, après essai de la nuit d'encre).
   Le voile démarre SOUS le bandeau (top posé par logos-equipe.js) : la
   navigation du site reste visible. Chaque fiche est CENTRÉE VERTICALEMENT
   pour elle-même (décision 2026-08-25 : l'alignement à hauteur commune est
   abandonné — la hauteur suit le contenu de chaque fiche). */
.equipe-visionneuse.est-ouverte {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--logos-blanc);
  padding: 40px var(--page-marge, 20px);
}
.equipe-visionneuse__interieur {
  background: var(--logos-blanc);
  width: min(820px, 100%);
  max-height: min(560px, calc(100vh - 80px));
  overflow-y: auto;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
}
.equipe-visionneuse__photo {
  display: block;
  /* 2026-08-25 : photo CENTRÉE VERTICALEMENT face au texte (la boîte a une
     hauteur commune figée : le centrage est stable de fiche en fiche). */
  align-self: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url(../svg/carte-portrait.png);
          mask-image: url(../svg/carte-portrait.png);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  /* photo BRUTE : aucun traitement, comme le survol des portraits */
}
.equipe-visionneuse__nom {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 28px;
  text-transform: uppercase;
  margin: 0;
}
.equipe-visionneuse__role { color: #444; font-size: 15px; margin: 4px 0 18px; }
.equipe-visionneuse__bio p { font-size: 14px; line-height: 1.8; margin: 0 0 12px; text-align: left; }
.equipe-visionneuse__fermer,
.equipe-visionneuse__prec,
.equipe-visionneuse__suiv {
  position: absolute;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  z-index: 2;
}
.equipe-visionneuse.est-ouverte { /* référent des boutons */ }
.equipe-visionneuse__fermer { top: 14px; right: 14px; }
/* 2026-08-25 : flèches ancrées aux abords de la boîte (820 px centrés) —
   à 40 px du texte (au lieu de 14, trop proche) ; jamais hors écran. */
.equipe-visionneuse__prec { left: max(6px, calc(50% - 410px - 84px)); top: 50%; transform: translateY(-50%); }
.equipe-visionneuse__suiv { right: max(6px, calc(50% - 410px - 84px)); top: 50%; transform: translateY(-50%); }
.equipe-visionneuse__fermer::before,
.equipe-visionneuse__prec::before,
.equipe-visionneuse__suiv::before {
  content: "";
  display: block;
  width: 22px;
  height: 26px;
  margin: 0 auto;
  background: var(--logos-noir);
  -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;
}
.equipe-visionneuse__fermer::before {
  -webkit-mask-image: url(../svg/picto/fermer.svg);
          mask-image: url(../svg/picto/fermer.svg);
  width: 24px;
  height: 24px;
}
.equipe-visionneuse__prec::before { transform: rotate(180deg); }
.equipe-visionneuse__fermer:hover, .equipe-visionneuse__prec:hover, .equipe-visionneuse__suiv:hover,
.equipe-visionneuse__fermer:focus-visible, .equipe-visionneuse__prec:focus-visible, .equipe-visionneuse__suiv:focus-visible {
  background: var(--logos-noir);
}
.equipe-visionneuse__fermer:hover::before, .equipe-visionneuse__prec:hover::before, .equipe-visionneuse__suiv:hover::before,
.equipe-visionneuse__fermer:focus-visible::before, .equipe-visionneuse__prec:focus-visible::before, .equipe-visionneuse__suiv:focus-visible::before {
  background: var(--logos-blanc);
}
@media (max-width: 780px) {
  .equipe-visionneuse__interieur { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; max-height: calc(100vh - 56px); }
}


/* --------------------------------------------------------------------------
   2026-08-25 — LOGOS SANS : JAMAIS DE GRAS (décision compagnie). Tous les
   styles portés par --font-special reviennent à la graisse native 400 : le
   fichier unique (Medium) sert déjà toute la plage sans synthèse, mais les
   REPLIS Oswald, eux, s'engraissaient à 500. Surcharges des deux règles du
   référentiel (logos-charte.css, intouchable) :
   -------------------------------------------------------------------------- */
.logos-titre-special,
.logos-bouton {
  font-weight: 400;
}


/* --------------------------------------------------------------------------
   2026-09-01 — ELEMENTOR DANS LA CHARTE (essai pages traditionnelles).
   Les colonnes Elementor respirent comme les colonnes de la charte
   (gouttière verticale 22 px, .colonne) : l'espacement propre d'Elementor
   (20 px sous chaque widget) est annulé et les paragraphes d'un widget
   texte suivent le même rythme. Le widget Séparateur EST le filet fin de
   la charte. Les aplats choisis au sélecteur « Style LOGOS » (cartouche,
   pastille) ne s'étirent pas sur la largeur de leur colonne. Le titre à
   chevron ouvre sa section d'un trait, comme dans la règle du filet —
   sauf si un Séparateur le précède déjà (jamais de doublon).
   -------------------------------------------------------------------------- */
.logos-texte .elementor-widget-wrap { gap: 22px; }
.logos-texte .elementor-widget-wrap > .elementor-element.elementor-widget { margin-bottom: 0; }
.logos-texte .elementor-widget-text-editor p { margin: 0 0 22px; }
.logos-texte .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.logos-texte .elementor-widget-divider { padding: 0; }
.logos-texte .elementor-widget-divider .elementor-divider { padding: 0; }
.logos-texte .elementor-divider-separator {
  display: block;
  border: 0;
  width: 100%;
  height: var(--filet-fin, 4.66px);
  background: var(--logos-encre);
}

.logos-texte .elementor-widget-wrap > .titre-aplat,
.logos-texte .elementor-widget-wrap > .pastille {
  width: auto;
  max-width: 100%;
}

.logos-texte .elementor-widget.titre-chevron {
  border-top: var(--filet-fin, 4.66px) solid var(--logos-encre);
  padding-top: 20px;
}
.logos-texte .elementor-widget-divider + .elementor-widget.titre-chevron {
  border-top: 0;
  padding-top: 0;
}

/* Grilles de la charte IMBRIQUÉES dans une colonne Elementor (converties
   en sections internes qui GARDENT leur classe) : les enveloppes
   d'Elementor s'effacent — display: contents — pour que les enfants
   redeviennent les items de la grille. Même principe que la
   neutralisation de wp-block-group__inner-container. */
.logos-texte .elementor-inner-section:is([class*="deux-colonnes"], .fabrique-etapes, [class*="grille-"]) > .elementor-container,
.logos-texte .elementor-inner-section:is([class*="deux-colonnes"], .fabrique-etapes, [class*="grille-"]) > .elementor-container > .elementor-column,
.logos-texte .elementor-inner-section:is([class*="deux-colonnes"], .fabrique-etapes, [class*="grille-"]) > .elementor-container > .elementor-column > .elementor-widget-wrap {
  display: contents;
}

/* Le « Style LOGOS » d'un widget Titre vit sur l'ENVELOPPE : le h2/h3
   intérieur d'Elementor doit en HÉRITER — sans quoi il garde le style de
   titre par défaut, étranger à la charte (constaté 2026-09-01 sur
   « La compagnie »). Les titres SANS style LOGOS gardent les règles h2/h3
   du thème. */
.logos-texte :is(.titre-special, .titre-aplat, .titre-chevron, .logos-titre-1) .elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}