/* ==========================================================================
   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-masque.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-masque.png);
          mask-image: url(../svg/anneau-masque.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 : FUCHSIA CLAIR #FF57C4 — inversion mauve/fuchsia 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 fuchsia.

   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: #FF57C4; }  /* 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/fuchsia + é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 fuchsia). 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
   cadre-anneau.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/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;
}

/* 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/anneau-carre.png);
          mask-image: url(../svg/anneau-carre.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 {
  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/anneau-carre.png");
          mask-image: url("../svg/anneau-carre.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 au repos, et au survol
     un fondu vers encre → COULEUR PRINCIPALE (filtre dynamique #w-accent,
     suit la couleur choisie dans Réglages LOGOS → Apparence). */
  position: relative;
  filter: none;
}
.equipe-portrait::before,
.equipe-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
}
.equipe-portrait::before {
  filter: brightness(1.18) contrast(1.02) url(#w-encre) saturate(0.8);
}
.equipe-portrait::after {
  filter: brightness(1.18) contrast(1.02) url(#w-accent) saturate(0.8);
  opacity: 1;   /* couleur visible en continu */
}
.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; }
}




/* --- Cartes membre sans photo : anneau plein en couleur encre --- */
.equipe-membre--sans-photo::before {
  content: "";
  display: block;
  width: 180px; height: 180px;
  margin-bottom: 12px;
  background-color: var(--logos-noir, #001721);
  -webkit-mask-image: url("../svg/anneau-plein.png");
          mask-image: url("../svg/anneau-plein.png");
  -webkit-mask-size: contain;    mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.equipe-membre--sans-photo { border: 0; padding: 0; }
.equipe-membre--sans-photo .equipe-nom { font-family: Oswald, sans-serif; font-weight: 500; font-size: 18px; text-transform: uppercase; }
.equipe-membre--sans-photo .equipe-role { color: #444; font-size: 14px; margin-top: 2px; }

@media (max-width: 460px) {
  .equipe-membre--sans-photo::before { 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: 500;
  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 {
  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(). */
/* :has(:focus-visible) et non :focus-within — après un CLIC souris le
   portrait garde le focus, et l'effet restait collé sur la photo cliquée
   jusqu'au clic suivant. :focus-visible ne se déclenche qu'au clavier. */
.equipe-grille:has(.equipe-membre:hover) .equipe-portrait::after,
.equipe-grille:has(.equipe-portrait:focus-visible) .equipe-portrait::after,
.equipe-membre:hover .equipe-portrait::after,
.equipe-membre:has(:focus-visible) .equipe-portrait::after { opacity: 0; }

.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. */
.logos-js .equipe-bio {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 450ms ease, margin-top 450ms ease;
}
.logos-js .equipe-bio.est-replie { grid-template-rows: 0fr; margin-top: 0; }
.logos-js .equipe-bio__texte { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .logos-js .equipe-bio { transition: 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; }
}

/* Flèche « tout replier » sous la grille du noyau dur : triangle texturé
   pointe en haut, créée par logos-equipe.js, visible bios ouvertes. */
.equipe-replier {
  display: block;
  margin: 18px auto 0;
  padding: 10px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--logos-noir);
}
/* L'attribut hidden (posé par logos-equipe.js tant que l'accordéon est
   fermé) doit gagner sur le display:block ci-dessus : la règle du
   navigateur pour [hidden] est écrasée par toute règle d'auteur. */
.equipe-replier[hidden] { display: none; }
.equipe-replier::before {
  content: "";
  display: block;
  width: 16px;
  height: 18px;
  background: currentColor;
  -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);   /* pointe vers le haut */
}
.equipe-replier:hover, .equipe-replier:focus-visible { color: var(--logos-encre); }

/* --------------------------------------------------------------------------
   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; }
}