/* ==========================================================================
   Compagnie Logos — feuille de style de référence
   Générée depuis la charte graphique v1.0 (août 2026).
   Tout ce qui suit est normatif : ne pas inventer d'autres valeurs.

   2026-08-26 — Cette feuille EST désormais la référence vivante de la
   charte (fin du statut « handoff intouchable ») : toute évolution actée
   se reporte ICI, avec un commentaire daté et motivé, comme celui-ci.
   Les amendements historiques restent dans logos-amendements.css.
   ========================================================================== */

/* --- Typographies ------------------------------------------------------- */

@font-face {
  font-family: 'Logos Batard';
  src: url("../fonts/LogosBatard-Regular.woff2") format("woff2"),
       url("../fonts/LogosBatard-Regular.otf") format("opentype"),
       url("../fonts/LogosBatard-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2026-09-01 — la LOGOS SANS est RETIRÉE de la charte (décision compagnie) :
   Oswald la remplace partout (aplats compris). Le @font-face et le fichier
   de police sont supprimés ; le jeton --font-special survit, pointé sur
   Oswald, pour que tous les usages basculent d'un coup. */

/* Ubuntu et Oswald viennent de Google Fonts :
   https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oswald:wght@400;500;700&display=swap */

/* --- Jetons -------------------------------------------------------------- */

:root {
  /* Couleurs permanentes de la charte */
  --logos-noir:   #000000;
  --logos-blanc:  #FFFFFF;
  --logos-jaune:  #FEF402;  /* le seul jaune, et le seul aplat coloré par défaut */
  --logos-encre:  #001721;  /* filets, traits, ombres du traitement Encre */

  /* Couleurs du cycle Révolution — « Le partage du butin », « Le pain de la bouche » */
  --revolution-ombres:   #0514D5;
  --revolution-lumieres: #FF7F39;

  /* Couleurs du cycle Propriété — créations suivantes */
  --propriete-ombres:   #D5058C;
  --propriete-lumieres: #FEF402;  /* le jaune de la charte */

  /* Familles */
  --font-titre:    'Logos Batard', Oswald, sans-serif;  /* niveau 1, 56 px minimum */
  --font-special:  Oswald, sans-serif;    /* niveaux 1-2 — Oswald depuis le 2026-09-01 (ex-Logos Sans) */
  --font-sous-titre: Oswald, sans-serif;                /* niveau 3 */
  --font-texte:    Ubuntu, sans-serif;                  /* courant, navigation, mentions */

  /* Filets */
  --filet-epais: 10px;    /* pieds de page */
  --filet-fin:   4.66px;  /* sous navigation, couleur --logos-encre */
}

/* --- Hiérarchie typographique ------------------------------------------- */

.logos-titre-1 {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 76px;        /* 56 px absolu minimum, et bien au-delà sur affiches */
  line-height: 1;
  text-transform: uppercase;
  /* JAMAIS sur aplat jaune, et toujours sur fond clair */
}

.logos-titre-special {
  font-family: var(--font-special);
  font-weight: 500;
  font-size: 32px;        /* minimum */
  letter-spacing: 1px;
  text-transform: uppercase;
  /* Niveaux 1 et 2 uniquement, avec parcimonie. C'est le seul titre
     qui peut se poser sur l'aplat jaune. */
}

.logos-titre-3 {
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.logos-titre-4 { font-family: var(--font-texte); font-weight: 700; font-size: 17px; }

.logos-texte      { font-family: var(--font-texte); font-weight: 400; font-size: 14px; line-height: 1.75; }
.logos-navigation { font-family: var(--font-texte); font-weight: 500; font-size: 15px; text-transform: uppercase; }
.logos-mention    { font-family: var(--font-texte); font-weight: 300; font-style: italic; font-size: 12px; }

/* --- Éléments graphiques ------------------------------------------------ */

.logos-surlignage {                     /* le bloc jaune sous titrage */
  display: inline-block;
  background: var(--logos-jaune);
  padding: 12px 26px 8px;
}

.logos-repere {                         /* barre verticale devant un texte */
  width: 6px;
  background: var(--logos-noir);
  flex: none;
}

.logos-filet-epais { height: var(--filet-epais); background: var(--logos-noir); }
.logos-filet-fin   { height: var(--filet-fin);   background: var(--logos-encre); }

.logos-bouton {                          /* bouton principal */
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 24px;
  font-family: var(--font-special);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  background: var(--logos-jaune);
  color: var(--logos-noir);
}

.logos-bouton--noir  { background: var(--logos-noir); color: var(--logos-blanc); box-shadow: inset 0 0 0 1px #707070; }
.logos-bouton--vide  { background: var(--logos-blanc); color: var(--logos-noir); box-shadow: inset 0 0 0 2px var(--logos-noir); }

/* --- Traitement des photos ----------------------------------------------
   Trois courbes de transfert de dégradé, et trois seulement. Les valeurs
   se reprennent telles quelles ; on ne les réécrit pas « à l'œil ».
   Les filtres SVG correspondants sont générés dynamiquement en PHP
   (logos_filtres_dynamiques_svg, functions.php) : les couleurs des cycles
   étant réglables, le fichier statique filtres-photo.svg a été retiré
   (2026-08-26).
   Aucune photo n'est publiée sans l'une de ces courbes.
   Jamais de transparence ni d'opacité réduite sur une photo.
   Jamais de voile dégradé sous du texte : on pose le texte sur un aplat opaque.
   ------------------------------------------------------------------------ */

.photo-revolution { filter: brightness(1.14) contrast(0.97) url(#cycle-revolution) saturate(0.99); }
.photo-propriete  { filter: brightness(1.14) contrast(0.97) url(#cycle-propriete)  saturate(0.99); }
.photo-encre      { filter: brightness(1.05) contrast(1.15) url(#encre-logos)      saturate(0.99); }

/* --- Classes de cycle ----------------------------------------------------
   Une classe par cycle, posée sur le conteneur d'un spectacle (fiche, carte,
   slide). Elle porte les deux couleurs du dégradé, la couleur d'aplat du
   spectacle et la courbe photo. Tout le reste s'y réfère par variable :
   aucune couleur de cycle n'est écrite en dur dans les composants.

   <article class="cycle-revolution">
     <div class="photo-cadre photo-cycle" style="background-image:url(...)"></div>
     <h2 class="logos-titre-1">Le partage du butin</h2>
     <span class="spectacle-statut">En diffusion</span>
   </article>
   ------------------------------------------------------------------------ */

.cycle-revolution {
  --cycle-ombres:   var(--revolution-ombres);    /* #0514D5 */
  --cycle-lumieres: var(--revolution-lumieres);  /* #FF7F39 */
  --cycle-aplat:    var(--revolution-lumieres);  /* aplat du spectacle */
  --cycle-courbe:   url(#cycle-revolution);
  --cycle-brightness: 1.14;
  --cycle-contrast:   0.97;
}

.cycle-propriete {
  --cycle-ombres:   var(--propriete-ombres);     /* #D5058C */
  --cycle-lumieres: var(--propriete-lumieres);   /* #FEF402 */
  --cycle-aplat:    var(--logos-jaune);
  --cycle-courbe:   url(#cycle-propriete);
  --cycle-brightness: 1.14;
  --cycle-contrast:   0.97;
}

.hors-cycle {                                    /* portraits, presse, fabrique */
  --cycle-ombres:   var(--logos-encre);          /* #001721 */
  --cycle-lumieres: var(--logos-blanc);
  --cycle-aplat:    var(--logos-jaune);
  --cycle-courbe:   url(#encre-logos);
  --cycle-brightness: 1.05;
  --cycle-contrast:   1.15;
}

/* 2026-09-01 (rév. du soir) — Un SPECTACLE sans cycle : photos en ENCRE
   DOUCE, la même chaîne que les portraits de l'équipe et la mosaïque
   (brightness 1.06 / contrast 1.03 / #w-encre-doux) — l'essai pitaya du
   matin est abandonné (décision compagnie). Les aplats et pastilles hors
   cycle gardent l'accent. La classe est posée par logos_cycle_class() sur
   les seuls spectacles (fiche, carte, diapositive). */
.spectacle-sans-cycle {
  --cycle-ombres:   var(--logos-encre);
  --cycle-lumieres: var(--logos-jaune);          /* pitaya (jeton accent) — aplats seulement */
  --cycle-courbe:   url(#w-encre-doux);
  --cycle-brightness: 1.06;
  --cycle-contrast:   1.03;
}
.spectacle-sans-cycle .photo-cycle {
  filter: brightness(1.06) contrast(1.03) url(#w-encre-doux);
}

/* Photo d'un spectacle : prend automatiquement la courbe de son cycle. */
.photo-cycle {
  filter: brightness(var(--cycle-brightness)) contrast(var(--cycle-contrast)) var(--cycle-courbe) saturate(0.99);
}

/* Aplat et filet d'un spectacle : prennent la couleur de son cycle. */
.spectacle-statut { background: var(--cycle-aplat); color: var(--cycle-texte, var(--logos-noir)); }
.spectacle-aplat { background: var(--cycle-aplat); color: var(--cycle-texte, var(--logos-noir)); }
.spectacle-filet { background: var(--cycle-lumieres); }

/* Le dégradé du cycle, pour les nuanciers et les repères de section. */
.cycle-degrade { background: linear-gradient(to right, var(--cycle-ombres), var(--cycle-lumieres)); }

/* --- Cadre tamponné : « Carte — bandeaux » -------------------------------
   Le cadre déchiré est un masque. Sa boîte DOIT être au ratio du fichier
   (2064 / 938 ≈ 2.2) : toute autre proportion déforme les bords.
   2026-08-26 — le masque « pilule » du handoff (cadre-masque.png) est
   remplacé par le cadre définitif carte-bandeaux.png (décision compagnie
   du 2026-08-19, désormais portée par la charte elle-même).
   ------------------------------------------------------------------------ */

.photo-cadre {
  aspect-ratio: 2064 / 938;
  background-size: cover;
  -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;
}

/* --- Fenêtre en anneau ---------------------------------------------------
   L'anneau sert de fenêtre photo. Ses proportions sont fixes :
   406.45 / 686.55. Le clipPath #anneau-clip est dans anneau-clip.svg.
   ------------------------------------------------------------------------ */

.photo-anneau {
  aspect-ratio: 406.45 / 686.55;
  background-size: cover;
  clip-path: url(#anneau-clip);
}

/* --- Interdits -----------------------------------------------------------
   — Logo : jamais en blanc ; pas de cartouche ; toujours sur fond clair,
     en noir ou dans la couleur sombre du cycle. Ne pas déformer, incliner,
     ni poser sur une photo chargée.
   — Aplats : jaune #FEF402 par défaut. Un cycle peut utiliser sa couleur
     claire en aplat sur ses propres supports (orange pour Révolution).
     Les couleurs sombres de cycle restent aux filets et aux courbes photo.
   — Titre Logos Batard : jamais sur aplat jaune, toujours sur fond clair.
   — Textures : le fond granuleux se pose en noir ou en blanc, jamais en couleur.
   — Aucun encart rogné par le cadre d'une photo.
   ------------------------------------------------------------------------ */