/* ==========================================================================
   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.
   ========================================================================== */

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

@font-face {
  font-family: 'Logos Sans';
  src: url("../fonts/LogosSans-Medium.woff2") format("woff2"),
       url("../fonts/LogosSans-Medium.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* 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:  'Logos Sans', Oswald, sans-serif;    /* niveaux 1-2, 32 px minimum, avec parcimonie */
  --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 dans filtres-photo.svg.
   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;
}

/* 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é ------------------------------------------------------
   Le cadre déchiré est un masque. Sa boîte DOIT être au ratio du fichier
   (2080 / 946 = 2.199) : toute autre proportion déforme les arrondis.
   ------------------------------------------------------------------------ */

.photo-cadre {
  aspect-ratio: 2080 / 946;
  background-size: cover;
  -webkit-mask-image: url(../svg/cadre-masque.png);
          mask-image: url(../svg/cadre-masque.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.
   ------------------------------------------------------------------------ */