/*
Theme Name: Tita Nzebi
Theme URI: https://titanzebi.com
Description: Theme enfant Hello Elementor pour le site officiel de Tita Nzebi, chanteuse gabonaise d'afro-fusion. Contient les tokens de design, les polices locales et la bibliotheque de composants du handoff.
Author: AD-Crea
Author URI: https://ad-crea.fr
Template: hello-elementor
Version: 1.63.0
Text Domain: tita-nzebi
License: GNU General Public License v3 or later
*/

/* =========================================================
   1. TOKENS
   Source : design_handoff_tita_nzebi/README.md
   ========================================================= */
:root {
  /* Couleurs */
  --tn-bg:        #26100d;             /* fond principal, oxblood */
  --tn-text:      #f0e4d6;             /* texte */
  --tn-acc:       #d99a45;             /* accent or ambre */
  --tn-acc-2:     #8e2318;             /* accent rouge profond */
  --tn-link-hover:#e0a75c;
  --tn-rule:        rgba(217, 154, 69, .28);
  --tn-rule-soft:   rgba(217, 154, 69, .22);
  --tn-rule-strong: rgba(217, 154, 69, .35);
  --tn-text-85:   rgba(240, 228, 214, .85);
  --tn-text-70:   rgba(240, 228, 214, .7);
  --tn-text-55:   rgba(240, 228, 214, .55);
  /* Ces 45 % ne donnent qu un contraste de 3,79 sur le fond, sous le
     seuil de 4,5 : Lighthouse le signale. La teinte est conservee telle
     quelle par choix, l ecart au dessin d origine primant ici. Il
     faudrait 52 % pour passer le seuil. */
  --tn-text-45:   rgba(240, 228, 214, .45);

  /* Typographies */
  --tn-font-heading: "Caprasimo", Georgia, serif;
  --tn-font-body:    "Figtree", system-ui, -apple-system, sans-serif;
  --tn-font-mono:    "Space Mono", ui-monospace, monospace;

  /* Espacement, echelle Organic */
  --tn-space-1: 4.4px;
  --tn-space-2: 8.8px;
  --tn-space-3: 13.2px;
  --tn-space-4: 17.6px;
  --tn-space-6: 26.4px;
  --tn-space-8: 35.2px;
  --tn-space-12: 52.8px;  /* space-8 x 1.5 */
  --tn-space-16: 70.4px;  /* space-8 x 2   */

  /* Rayons */
  --tn-radius-sm: 8px;
  --tn-radius-md: 16px;
  --tn-radius-lg: 28px;
  --tn-radius-pill: 999px;

  /* Conteneur */
  --tn-container: 1180px;
  --tn-gutter: 40px;
}

/* =========================================================
   2. BASE
   ========================================================= */
html { scroll-behavior: smooth; }

body {
  background: var(--tn-bg);
  color: var(--tn-text);
  font-family: var(--tn-font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tn-acc); text-decoration: none; }
a:hover, a:focus { color: var(--tn-link-hover); }

h1, h2, h3, h4,
.tn-display {
  font-family: var(--tn-font-heading);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.08;
}

/* Focus clavier : jamais l'anneau bleu du navigateur */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--tn-acc);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Conteneur a la largeur du handoff */
.tn-wrap {
  max-width: var(--tn-container);
  margin-inline: auto;
  padding-inline: var(--tn-gutter);
}

/* =========================================================
   3. TYPOGRAPHIES UTILITAIRES
   ========================================================= */
.tn-kicker {
  font: 600 11px/1 var(--tn-font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tn-acc);
}

.tn-mono {
  font: 400 11px/1.5 var(--tn-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tn-text-55);
}

/* La note d une chronique, seule donnee chiffree de la page GRAMMY.
   Elle passe a 19 px quand la ligne de source reste a 11, et de gris a
   ambre : un votant doit la voir sans la chercher.

   line-height a zero empeche ce corps plus grand de creuser la ligne :
   les etoiles debordent de leur ligne au lieu de l ecarter, la mise en
   page ne bouge donc pas. L espacement les separe pour qu on les compte
   d un coup d oeil. */
/* Le bouton d ecoute et son element audio partagent une enveloppe :
   le script retrouve ainsi l un depuis l autre, quel que soit le
   bandeau ou on les pose. */
.tn-audio-wrap { display: inline-flex; }

.tn-stars {
  color: var(--tn-acc);
  font-size: 1.75em;
  line-height: 0;
  vertical-align: -.16em;
  letter-spacing: .12em;
  padding-inline-end: .1em;
}

.tn-lead { font-size: 26px; line-height: 1.35; }
.tn-lead--dim { color: var(--tn-text-55); }

/* Titres rendus par shortcode : l'echelle responsive est portee par le CSS,
   ces titres n'ont pas de reglage responsive dans Elementor. */
.tn-hero__title {
  font-size: clamp(38px, 5.8vw, 74px);
  line-height: 1.02;
  margin: 0;
}
.tn-grammy__title {
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1.04;
  margin: 0;
}

/* =========================================================
   4. BOUTONS
   ========================================================= */
/* Pilule pleine. La classe se pose sur le lien lui-meme. */
.tn-pill,
.tn-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-text);
  color: var(--tn-bg);
  font-family: var(--tn-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  border: 0;
  transition: background .2s ease, color .2s ease;
}
.tn-pill:hover, .tn-pill:focus,
.tn-btn .elementor-button:hover,
.tn-btn .elementor-button:focus {
  background: var(--tn-acc);
  color: #fff;
}

/* Pilule contour. */
.tn-pill-o,
.tn-btn-o .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--tn-radius-pill);
  border: 1px solid rgba(240, 228, 214, .35);
  background: transparent;
  color: var(--tn-text);
  font-family: var(--tn-font-body);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease;
}
.tn-pill-o:hover, .tn-pill-o:focus,
.tn-btn-o .elementor-button:hover,
.tn-btn-o .elementor-button:focus {
  border-color: var(--tn-acc);
  color: var(--tn-acc);
  background: transparent;
}

/* Les variantes .tn-btn et .tn-btn-o se posent sur le widget bouton
   d'Elementor : l'enveloppe reste nue, seul le lien interne est habille. */
.tn-btn, .tn-btn-o {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.tn-btn .elementor-button-content-wrapper,
.tn-btn-o .elementor-button-content-wrapper { gap: 8px; }

/* Bouton rond de lecture, pose en bas a droite d'une pochette */
.tn-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(240, 228, 214, .5);
  background: rgba(38, 16, 13, .6);
  color: var(--tn-text);
}
.tn-play:hover { border-color: var(--tn-acc); color: var(--tn-acc); }
.tn-play svg { width: 15px; height: 15px; stroke-width: 2.75; }

/* Petite etiquette de genre */
.tn-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--tn-radius-pill);
  border: 1px solid rgba(240, 228, 214, .35);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tn-text);
}

/* =========================================================
   5. CADRES ET VOILES
   ========================================================= */
.tn-frame { position: relative; overflow: hidden; border-radius: var(--tn-radius-lg); }
.tn-frame--md { border-radius: var(--tn-radius-md); }
.tn-ratio-4x5 { aspect-ratio: 4 / 5; }
/* Remplit la hauteur de sa colonne, pour qu'une photo suive la hauteur du
   contenu voisin au lieu d'imposer sa propre proportion. */
.e-con.tn-fill { flex: 1 1 auto; min-height: 420px; }
@media (max-width: 767px) {
  .e-con.tn-fill { flex: 0 0 auto; aspect-ratio: 4 / 5; min-height: 0; }
}
.tn-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Voile vertical sombre, bandeaux centres */
.tn-veil-down::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(38,16,13,.35) 0%, rgba(38,16,13,.86) 100%);
}
/* Voile horizontal bordeaux, bandeaux a texte a gauche */
.tn-veil-right::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(72,17,12,.96) 0%, rgba(72,17,12,.7) 55%, rgba(38,16,13,.2) 100%);
}
/* Voile horizontal bordeaux inverse, bandeaux a texte a droite.
   Il sert au bandeau du titre a la une, pose juste sous celui de
   l'album : la symetrie evite que les deux se lisent comme un doublon. */
.tn-veil-left::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(270deg, rgba(72,17,12,.96) 0%, rgba(72,17,12,.7) 55%, rgba(38,16,13,.2) 100%);
}
/* Voile du hero d'accueil */
.tn-veil-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(64,14,11,.6) 0%, rgba(78,20,14,.4) 42%, rgba(38,16,13,.97) 100%);
}
/* Voile du bandeau video */
.tn-veil-video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(72,17,12,.72), rgba(38,16,13,.88));
}
/* Voile des bandeaux de citation */
.tn-veil-quote::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(58,14,11,.86), rgba(38,16,13,.9));
}
/* Le contenu repasse au-dessus du voile.
   On vise tous les enfants directs et pas seulement .e-con-inner : les
   conteneurs Elementor en pleine largeur n'ont pas cette enveloppe, et le
   voile passerait alors par-dessus le texte. */
.e-con.tn-veil-down > *,
.e-con.tn-veil-right > *,
.e-con.tn-veil-left > *,
.e-con.tn-veil-hero > *,
.e-con.tn-veil-video > *,
.e-con.tn-veil-quote > *,
.tn-veil-down > :not(.e-con),
.tn-veil-right > :not(.e-con),
.tn-veil-left > :not(.e-con),
.tn-veil-hero > :not(.e-con),
.tn-veil-video > :not(.e-con),
.tn-veil-quote > :not(.e-con) { position: relative; z-index: 2; }

/* Sous-menu d ancres des pages longues.
   Colle en haut de l ecran une fois passe : la page GRAMMY se parcourt
   en diagonale, un votant doit pouvoir sauter a la section qui
   l interesse a n importe quel moment. L en-tete du site n est pas
   collant, il n y a donc pas de superposition a craindre. */
.tn-anchors {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(38, 16, 13, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tn-rule);
}
.tn-anchors ul {
  display: flex;
  gap: var(--tn-space-6);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  list-style: none;
  /* Sur un telephone les entrees defilent lateralement plutot que de
     passer a la ligne : le bandeau garde ainsi une hauteur fixe. */
  overflow-x: auto;
  scrollbar-width: none;
}
.tn-anchors ul::-webkit-scrollbar { display: none; }
.tn-anchors a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font: 400 11px/1.5 var(--tn-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tn-text-55);
  transition: color .15s ease;
}
.tn-anchors a:hover { color: var(--tn-acc); }
.tn-anchors a:focus-visible {
  outline: 2px solid var(--tn-acc);
  outline-offset: -4px;
}
/* Le titre d une section visee ne doit pas passer sous le bandeau. */
:target { scroll-margin-top: 64px; }
@media (max-width: 767px) {
  .tn-anchors ul { padding: 0 20px; gap: var(--tn-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .tn-anchors a { transition: none; }
}

/* =========================================================
   6. TITRE DE SECTION AVEC FILET
   ========================================================= */
.tn-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--tn-space-4);
  margin-bottom: var(--tn-space-6);
}
.tn-section-head h2 { margin: 0; }
.tn-rule-line { flex: 1; height: 1px; background: var(--tn-rule-strong); }

/* =========================================================
   7. CARTES DE DISQUE ET DE TITRE
   ========================================================= */
.tn-disc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
}
.tn-disc__cover { position: relative; aspect-ratio: 1; border-radius: var(--tn-radius-md); overflow: hidden; }
.tn-disc__cover img { width: 100%; height: 100%; object-fit: cover; }
.tn-disc__title { font-family: var(--tn-font-heading); font-size: 19px; color: var(--tn-text); transition: color .2s ease; }
/* Les cartes du journal ont un visuel paysage et un titre plus grand */
.tn-post-card__cover { aspect-ratio: 16 / 11; }
.tn-post-card .tn-disc__title { font-size: 22px; line-height: 1.22; }
.tn-disc:hover .tn-disc__title,
.tn-disc:focus-within .tn-disc__title { color: var(--tn-acc); }


/* Les images des cartes remplissent leur cadre carre */
.tn-disc__cover .elementor-widget-container,
.tn-disc__cover figure,
.tn-disc__cover img { width: 100%; height: 100%; }
.tn-disc__cover img { object-fit: cover; }

/* Carte "Titre a la une" du hero d'accueil */
.tn-featured-track {
  display: flex;
  gap: var(--tn-space-4);
  align-items: stretch;
  padding: var(--tn-space-3);
  border-radius: var(--tn-radius-lg);
  background: rgba(38, 16, 13, .72);
  border: 1px solid rgba(240, 228, 214, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  max-width: 400px;
}
.tn-featured-track__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--tn-space-2);
}
.tn-featured-track__title { font-family: var(--tn-font-heading); font-size: 19px; }
.tn-featured-track__cover { width: 132px; flex: none; }
.tn-featured-track__cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .tn-featured-track { max-width: none; } }

/* =========================================================
   8. LIGNE DE DATE DE CONCERT
   ========================================================= */
.tn-row {
  display: flex;
  align-items: center;
  gap: var(--tn-space-4);
  padding: var(--tn-space-4) var(--tn-space-3);
  border-bottom: 1px solid rgba(217, 154, 69, .3);
  transition: background .2s ease;
}
.tn-row:hover { background: transparent; }
/* Ville en Caprasimo, date au-dessus en mono, salle en dessous. */
.tn-row { align-items: baseline; padding-block: var(--tn-space-6); }
.tn-city {
  font-family: var(--tn-font-heading);
  font-size: 30px;
  line-height: 1.1;
  color: var(--tn-text);
  transition: color .2s ease;
}
.tn-row:hover .tn-city { color: var(--tn-acc); }
.tn-row__place { flex: 1; }
.tn-row--past { opacity: .5; }
.tn-sold { color: var(--tn-acc); }

/* Lien texte souligne, qui remplace la pilule dans les listes. */
.tn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tn-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--tn-text);
  border-bottom: 1px solid var(--tn-rule-strong);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.tn-link:hover { color: var(--tn-acc); border-color: var(--tn-acc); }
.tn-link svg { transition: transform .2s ease; }
.tn-link:hover svg { transform: translateX(3px); }

/* Le bouton Billets est plus compact que la pilule courante */
/* L'action de droite garde sa largeur et son libelle sur une ligne : sans
   cela la colonne du lieu la comprime et le texte se replie. */
/* Affiche d un concert : le texte et son lien a gauche, le bandeau a
   droite.

   Une grille plutot qu une rangee souple. En flex, le bouton passait a
   la ligne sous l affiche et laissait un trou de cent pixels sous le
   texte ; la grille le range juste dessous, l affiche occupant les deux
   rangees a droite.

   La regle ne vaut que pour les lignes qui portent une affiche : les
   autres dates gardent leur bouton a droite, et les tableaux de credits
   de la page FYC emploient la meme classe sans devoir changer de forme. */
.tn-row:has(> .tn-row__affiche) {
  display: grid;
  /* La colonne de droite ne depasse jamais la taille du fichier
     fourni : au dela l affiche serait agrandie, donc molle. */
  grid-template-columns: 1fr clamp(320px, 46%, 605px);
  grid-template-areas:
    "texte  affiche"
    "bouton affiche";
  align-items: start;
  column-gap: var(--tn-space-6);
  row-gap: var(--tn-space-2);
}
/* Elementor impose width: 100% a ses conteneurs : sans largeur
   automatique, le bloc de la ville deborderait de sa cellule. */
.tn-row:has(> .tn-row__affiche) > .tn-row__place {
  grid-area: texte;
  width: auto;
}
.tn-row:has(> .tn-row__affiche) > .tn-row__affiche {
  grid-area: affiche;
  align-self: center;
}
.tn-row:has(> .tn-row__affiche) > .tn-row__action { grid-area: bouton; }
.tn-row__affiche img {
  display: block;
  width: 100%;
  aspect-ratio: 820 / 312;
  object-fit: cover;
  border-radius: var(--tn-radius-md);
}
/* En dessous de 900 px les deux colonnes ne tiennent plus : tout
   s empile, l affiche entre le lieu et le bouton. */
@media (max-width: 900px) {
  .tn-row:has(> .tn-row__affiche) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "texte"
      "affiche"
      "bouton";
  }
}

.tn-row > .tn-row__action { flex: 0 0 auto; }
.tn-row__action a,
.tn-row__action span,
.tn-link { white-space: nowrap; }
.tn-row .tn-pill-o { padding: 8px 16px; }

/* Pochette isolee dans un bandeau de detail */
.tn-album-cover img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   8 bis. CARTES ENCADREES
   Coordonnees, bloc programmateurs, categories GRAMMY.
   ========================================================= */
.tn-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6);
  border-radius: var(--tn-radius-lg);
  border: 1px solid rgba(240, 228, 214, .18);
  background: rgba(240, 228, 214, .04);
}
.tn-card--gold {
  border-color: var(--tn-rule-strong);
  background: rgba(72, 17, 12, .32);
}
.tn-card__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-block: var(--tn-space-2);
  border-bottom: 1px solid rgba(240, 228, 214, .1);
}
.tn-card__row:last-child { border-bottom: 0; }
.tn-card__label { font: 400 11px/1.5 var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tn-text-55); }
.tn-card__value { font-size: 15px; color: var(--tn-text); }
.tn-card__value a { color: var(--tn-text); }
.tn-card__value a:hover { color: var(--tn-acc); }

/* Tableau de credits de la page GRAMMY */
.tn-credits .tn-row { border-bottom-color: rgba(240, 228, 214, .12); }
.tn-credits .tn-row:hover { background: transparent; }

/* Fiche d un titre, sur la page de candidature. Le numero en ambre, le
   titre, ce que dit la chanson, puis les credits replies : un votant
   parcourt d abord les dix titres, puis ouvre celui qui l interesse. */
.tn-fiche {
  border-top: 1px solid var(--tn-rule);
  padding-top: var(--tn-space-4);
}
.tn-fiche__num {
  color: var(--tn-acc);
  font: 400 12px/1 var(--tn-font-mono);
  letter-spacing: .08em;
}
.tn-fiche__titre {
  font-family: var(--tn-font-heading);
  font-size: 26px;
  line-height: 1.15;
  color: var(--tn-text);
}
.tn-fiche__note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--tn-text-70);
  max-width: 62ch;
}
/* Les credits d un titre sont plus serres que ceux de l album : ils se
   lisent en survol, pas en lecture suivie. */
.tn-fiche .tn-credits .tn-row,
.tn-fiche-modale .tn-credits .tn-row { padding-block: var(--tn-space-2) !important; }
.tn-fiche .tn-credits .tn-row span:first-child,
.tn-fiche-modale .tn-credits .tn-row span:first-child { min-width: 150px; }

/* Depliant des credits secondaires.
   details plutot qu un script : le contenu est dans la page, donc lu par
   un moteur et par un lecteur d ecran meme replie, et l ouverture
   fonctionne sans JavaScript. */
.tn-credits__fold > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--tn-space-4) 0;
  min-height: 24px;
  color: var(--tn-acc);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tn-credits__fold > summary::-webkit-details-marker { display: none; }
/* Chevron dessine au trait, pour ne pas dependre d une police d icones. */
.tn-credits__fold > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.tn-credits__fold[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.tn-credits__fold > summary:hover { color: var(--tn-text); }
.tn-credits__fold > summary:focus-visible {
  outline: 2px solid var(--tn-acc);
  outline-offset: 3px;
}
/* La premiere ligne depliee ne doit pas coller au bouton. */
.tn-credits__fold[open] > div { padding-top: var(--tn-space-2); }
@media (prefers-reduced-motion: reduce) {
  .tn-credits__fold > summary::after { transition: none; }
}

/* Grille de photos posee a cote d un texte long.
   Le carre met les portraits et les paysages sur un pied d egalite : la
   colonne garde une trame reguliere quel que soit le cadrage d origine. */
.tn-photos-grid {
  display: grid;
  grid-template-columns: repeat(var(--tn-photos-cols, 2), 1fr);
  gap: var(--tn-space-3);
  width: 100%;
}
.tn-photo-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Les photos de Tita sont recadrees pour tenir dans un cadre plus large
   qu elles. Centre, le recadrage coupe la tete : les portraits placent le
   visage dans le tiers haut. On remonte donc la fenetre, sans changer le
   format des cartes ni celui des vignettes. */
.tn-photo-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--tn-radius-sm);
  object-position: 50% 25%;
}
/* La vignette s ouvre en grand au clic. Le curseur l annonce, le
   leger agrandissement au survol confirme qu elle repond. */
.tn-photo-tile__link {
  display: block;
  cursor: zoom-in;
  border-radius: var(--tn-radius-sm);
  overflow: hidden;
}
.tn-photo-tile__link img { transition: transform .3s ease, opacity .3s ease; }
.tn-photo-tile__link:hover img { transform: scale(1.04); opacity: .92; }
.tn-photo-tile__link:focus-visible {
  outline: 2px solid var(--tn-acc);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tn-photo-tile__link img { transition: none; }
  .tn-photo-tile__link:hover img { transform: none; }
}
/* Quatre vignettes de front tiennent sur un ecran large, pas sur un
   telephone : la trame retombe a deux quoi qu on lui demande. */
@media (max-width: 767px) {
  .tn-photos-grid { grid-template-columns: repeat(2, 1fr); }
}

.tn-photo-tile__credit {
  font: 400 10px/1.4 var(--tn-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tn-text-45);
}

/* =========================================================
   8 ter. PAROLES ET CORPS D'ARTICLE
   ========================================================= */
.tn-lyrics {
  border-top: 1px solid rgba(240, 228, 214, .14);
  padding-block: var(--tn-space-3);
}
.tn-lyrics summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding-block: var(--tn-space-2);
}
.tn-lyrics summary::-webkit-details-marker { display: none; }
.tn-lyrics summary::after {
  content: "+";
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  color: var(--tn-acc);
}
.tn-lyrics[open] summary::after { content: "\2212"; }
.tn-lyrics__body {
  padding-top: var(--tn-space-3);
  font-size: 15px;
  line-height: 1.9;
  color: var(--tn-text-85);
}

.tn-prose { font-size: 17px; line-height: 1.75; color: var(--tn-text-85); }
.tn-prose h2 { font-size: 32px; margin: var(--tn-space-8) 0 var(--tn-space-3); }
.tn-prose h3 { font-size: 24px; margin: var(--tn-space-6) 0 var(--tn-space-2); }
.tn-prose p { margin: 0 0 var(--tn-space-4); }
/* Douze paragraphes en une seule colonne se lisent mal : cette variante
   les repartit sur deux, ce qui raccourcit la ligne et donne au bloc une
   hauteur tenable. Le texte coule d une colonne a l autre, il n y a rien
   a decouper a la main. */
.tn-prose--colonnes {
  column-count: 2;
  column-gap: var(--tn-space-8);
}
/* Une ligne seule en haut ou en bas de colonne se lit mal : on en exige
   deux au minimum de chaque cote. */
.tn-prose--colonnes p { orphans: 2; widows: 2; }
@media (max-width: 900px) {
  .tn-prose--colonnes { column-count: 1; }
}

.tn-prose blockquote {
  margin: var(--tn-space-6) 0;
  padding-left: var(--tn-space-4);
  border-left: 2px solid var(--tn-acc);
  font-family: var(--tn-font-heading);
  font-size: 22px;
  line-height: 1.35;
}

/* =========================================================
   9. CHAMPS DE FORMULAIRE
   ========================================================= */
.tn-form input[type="text"],
.tn-form input[type="email"],
.tn-form input[type="tel"],
.tn-form textarea,
.tn-form select,
.tn-form .elementor-field-textual {
  background: rgba(240, 228, 214, .06);
  border: 1px solid rgba(240, 228, 214, .26);
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text);
  padding: 14px 22px;
  font-family: var(--tn-font-body);
  font-size: 14px;
}
/* La zone de texte ne prend pas la pilule : sur sept lignes de haut, les
   angles rongeraient le texte. Le selecteur porte la classe d'Elementor en
   plus de l'element, sinon la regle pilule ci-dessus, plus specifique,
   l'emporte. La classe elementor-field-type-textarea, elle, n'est pas
   posee sur le champ : seul le groupe qui l'entoure la recoit. */
.tn-form textarea,
/* Liste deroulante : le navigateur dessine lui-meme le panneau des
   options, avec les couleurs du systeme. Sur un fond sombre il sortait
   donc un panneau blanc a surlignage bleu, etranger au site.

   color-scheme lui dit dans quel registre travailler : il rend alors un
   panneau sombre, sans qu'on ait a redessiner un menu maison, qui
   couterait du script et de l accessibilite. */
.tn-form select.elementor-field-textual,
select.elementor-field-textual {
  color-scheme: dark;
}

.tn-form textarea.elementor-field-textual {
  border-radius: var(--tn-radius-lg);
  resize: vertical;
  min-height: 160px;
}
.tn-form ::placeholder { color: rgba(240, 228, 214, .45); }
.tn-form .elementor-field-textual:focus {
  outline: 2px solid var(--tn-acc);
  outline-offset: 2px;
  border-color: transparent;
  box-shadow: none;
}

/* =========================================================
   10. LETTRAGE DE MARQUE
   ========================================================= */
.tn-lettering {
  font-family: var(--tn-font-heading);
  font-size: clamp(48px, 11.5vw, 136px);
  line-height: .8;
  text-align: right;
  color: rgba(240, 228, 214, .9);
  margin-bottom: -18px;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.tn-lettering--hero {
  font-size: clamp(48px, 11.7vw, 138px);
  margin: var(--tn-space-6) -6px -20px 0;
}

/* =========================================================
   11. EN-TETE
   ========================================================= */
.tn-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(38, 16, 13, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(217, 154, 69, .25);
}
.tn-brand {
  font-family: var(--tn-font-heading);
  font-size: 22px;
  color: var(--tn-text);
  line-height: 1;
}
.tn-brand sup { font-size: 10px; }
/* La marque pousse la navigation et le bouton vers la droite */
.tn-header__brand { margin-right: auto; }
.tn-header__cta { flex: none; }
.tn-header .elementor-nav-menu--main .elementor-item { padding: 0; }
.tn-header .elementor-nav-menu--dropdown { background: rgba(38, 16, 13, .97); }
.tn-header .elementor-menu-toggle { color: var(--tn-text); background: transparent; }
.tn-nav .elementor-item {
  font-family: var(--tn-font-body);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tn-text-70);
  padding: 0;
}
.tn-nav .elementor-item:hover,
.tn-nav .elementor-item.elementor-item-active { color: var(--tn-acc); }

/* La navigation du pied de page est en casse normale, plus grande */
.tn-nav--footer .elementor-item {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(240, 228, 214, .8);
}
.tn-nav--footer .elementor-item:hover { color: var(--tn-acc); }

/* Fil d'Ariane */
.tn-crumb { font: 400 11px/1.5 var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tn-text-55); }
.tn-crumb a { color: var(--tn-text-55); }
.tn-crumb a:hover { color: var(--tn-acc); }

/* =========================================================
   12. PIED DE PAGE
   ========================================================= */
.tn-footer { position: relative; overflow: hidden; }
.tn-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(58,14,11,.9), rgba(38,16,13,.97));
}
.e-con.tn-footer > *,
.tn-footer > :not(.e-con) { position: relative; z-index: 2; }
.tn-footer-rule { height: 1px; background: rgba(240, 228, 214, .16); }

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  :root { --tn-gutter: 24px; }
  .tn-lead { font-size: 22px; }
}
@media (max-width: 767px) {
  :root { --tn-gutter: 20px; }
  .tn-lead { font-size: 19px; }
  .tn-row { flex-wrap: wrap; gap: var(--tn-space-2); }
  .tn-row__date { min-width: 100%; font-size: 17px; }
  .tn-lettering { white-space: normal; }
}

/* =========================================================
   14. MOUVEMENT REDUIT
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* =========================================================
   15. REFONTE : COMPOSITIONS PROPRES AU SITE
   Le hero et les bandeaux ne reposent plus sur une photo
   pleine largeur voilee, motif trop courant.
   ========================================================= */

/* Hero en deux volets : le titre sur le fond plat, le portrait a droite. */
.tn-split { align-items: stretch; }
.tn-split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--tn-radius-lg);
  aspect-ratio: 3 / 4;
}
.tn-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(200deg, rgba(72, 17, 12, 0) 45%, rgba(38, 16, 13, .55) 100%);
}

/* Filet vertical, marque l'entree des sections sans bandeau photo. */
.tn-mark {
  position: relative;
  padding-left: var(--tn-space-6);
}
.tn-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--tn-acc);
}
/* Le filet doit s'arreter au texte : ni remplissage bas, ni marge sur le
   dernier element, sinon il court dans le vide sous le titre. */
.e-con.tn-mark { padding-bottom: 0; }
.tn-mark > :last-child { margin-bottom: 0; }

/* Cadre video contenu, en 16/9, au lieu d'un bandeau pleine largeur. */
.tn-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--tn-radius-lg);
  overflow: hidden;
  flex-wrap: nowrap;
}
/* En petite largeur le 16/9 devient trop bas pour le texte : le conteneur
   se replierait en seconde colonne, et le bouton sortirait de l'ecran. */
@media (max-width: 900px) {
  .e-con.tn-video-frame { aspect-ratio: auto; min-height: 340px; }
}
.tn-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 16, 13, .1), rgba(38, 16, 13, .7));
}
.e-con.tn-video-frame > * { position: relative; z-index: 2; }

/* Le lecteur remplit le cadre : la video se joue sur place, sans quitter
   la page ni ouvrir de fenetre. Il se glisse sous le degrade, qui ne
   capte pas les clics, pour que la couverture garde le meme rendu que
   sur l accueil. */
.e-con.tn-video-frame > .tn-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.tn-video-player .elementor-widget-container,
.tn-video-player .elementor-wrapper,
.tn-video-player .elementor-custom-embed-image-overlay,
.tn-video-player iframe { height: 100%; width: 100%; }
/* Elementor cale son ratio avec une hauteur nulle et une marge basse.
   Dans un cadre qui porte deja le 16/9, on lui rend une vraie hauteur. */
.tn-video-player .elementor-fit-aspect-ratio {
  height: 100%;
  padding-bottom: 0;
}
.tn-video-player .elementor-custom-embed-image-overlay {
  background-size: cover;
  background-position: center;
}

/* Le texte ne barre pas la video : il laisse passer les clics vers le
   bouton de lecture, et s efface une fois la lecture lancee, quand
   Elementor retire l image de couverture. */
.tn-video-frame__text {
  z-index: 3;
  pointer-events: none;
  transition: opacity .25s ease;
}
.e-con.tn-video-frame:not(:has(.elementor-custom-embed-image-overlay))::after,
.e-con.tn-video-frame:not(:has(.elementor-custom-embed-image-overlay)) .tn-video-frame__text {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tn-video-frame__text { transition: none; }
}

/* Fil du parcours : le texte reste sur le fond plat, la photo est un cadre
   contenu. Un filet vertical relie les etapes, avec un point par annee. */
.tn-milestone {
  position: relative;
  border-left: 1px solid var(--tn-rule);
  padding-left: var(--tn-space-8) !important;
}
.tn-milestone::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tn-acc);
}
/* .e-con en tete du selecteur : sans lui la largeur par defaut des
   conteneurs Elementor l'emporte, sa feuille etant chargee apres celle-ci. */
.e-con.tn-milestone__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--tn-radius-md);
  overflow: hidden;
  flex: 0 0 280px;
  width: 280px;
}
@media (max-width: 767px) {
  .tn-milestone { flex-wrap: wrap; padding-left: var(--tn-space-6) !important; }
  .e-con.tn-milestone__media { aspect-ratio: 16 / 10; flex: 1 1 100%; width: 100%; }
}

/* Liste datee, meme langage visuel que le fil du parcours : un filet
   vertical, un point par entree. Elle sert la discographie et les
   ouvrages, qui n ont pas besoin d une fiche chacun. */
.tn-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-6);
}
.tn-timeline__item {
  position: relative;
  border-left: 1px solid var(--tn-rule);
  padding-left: var(--tn-space-6);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tn-timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tn-acc);
}
.tn-timeline__year { color: var(--tn-acc); }
.tn-timeline__title {
  font-family: var(--tn-font-heading);
  font-size: 21px;
  line-height: 1.15;
  color: var(--tn-text);
}
.tn-timeline__note { font-size: 14px; color: var(--tn-text-55); }

/* Discographie en pochettes. Le carre est impose au cadre et non a
   l image : une pochette mal rognee garde ainsi sa place dans la trame
   au lieu de decaler toute la rangee. */
.tn-disco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--tn-disco-cols, 5), 1fr);
  gap: var(--tn-space-4);
}
.tn-disco__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
}
.tn-disco__cover {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--tn-radius-sm);
  overflow: hidden;
  background: rgba(240, 228, 214, .06);
  margin-bottom: var(--tn-space-2);
}
.tn-disco__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.tn-disco__link:hover .tn-disco__cover img { transform: scale(1.05); }
.tn-disco__year { color: var(--tn-acc); }
.tn-disco__title {
  font-family: var(--tn-font-heading);
  font-size: 19px;
  line-height: 1.15;
  color: var(--tn-text);
}
.tn-disco__label { font-size: 13px; color: var(--tn-text-55); }
.tn-disco__link:focus-visible { outline: 2px solid var(--tn-acc); outline-offset: 4px; }
@media (max-width: 900px) { .tn-disco { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tn-disco { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .tn-disco__cover img { transition: none; }
  .tn-disco__link:hover .tn-disco__cover img { transform: none; }
}

/* Ouvrages : couverture etroite a gauche, notice a droite. Le format
   reste lisible meme avec une couverture de faible definition, parce
   qu elle ne depasse jamais 96 pixels a l ecran. */
.tn-books {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tn-space-8);
}
.tn-book {
  display: flex;
  gap: var(--tn-space-4);
  align-items: flex-start;
}
.tn-book__cover {
  flex: 0 0 120px;
  width: 120px;
  border-radius: var(--tn-radius-sm);
  overflow: hidden;
  line-height: 0;
}
.tn-book__cover img { display: block; width: 100%; height: auto; }
.tn-book__body { display: flex; flex-direction: column; gap: 4px; }
.tn-book__year { color: var(--tn-acc); }
.tn-book__title {
  font-family: var(--tn-font-heading);
  font-size: 21px;
  line-height: 1.15;
  color: var(--tn-text);
}
.tn-book__note { font-size: 14px; color: var(--tn-text-55); }
.tn-book__body { gap: var(--tn-space-2); }
.tn-book__texte { font-size: 15px; line-height: 1.6; color: var(--tn-text-70); }
.tn-book__texte p { margin: 0 0 var(--tn-space-2); }
.tn-book__texte p:last-child { margin-bottom: 0; }
/* Le bouton se detache de la notice, sans s etirer sur toute la colonne. */
.tn-book__bouton { align-self: flex-start; margin-top: var(--tn-space-2); }
@media (max-width: 767px) {
  .tn-books { grid-template-columns: 1fr; }
  .tn-book__cover { flex-basis: 96px; width: 96px; }
}

/* Lecteur Spotify integre, sur la fiche d'album. */
.tn-player { width: 100%; line-height: 0; }
.tn-player iframe { display: block; width: 100%; border: 0; }

/* Compteur d'annee, pose en marge des listes. */
.tn-index {
  font: 400 11px/1 var(--tn-font-mono);
  letter-spacing: .06em;
  color: var(--tn-text-45);
}

@media (max-width: 767px) {
  .tn-city { font-size: 24px; }
  .tn-mark { padding-left: var(--tn-space-4); }
}

/* =========================================================
 * PAGES PRESSE, PROFESSIONNELS ET LANGUE NZEBI
 * ======================================================= */

/* Bloc de contact professionnel : un titre, puis une carte. */
.tn-pro { display: flex; flex-direction: column; gap: var(--tn-space-3); width: 100%; }
.tn-page-title {
  margin: 0;
  font-family: var(--tn-font-heading);
  font-size: clamp(30px, 6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--tn-text);
}

.e-con.tn-pro-col:not(:has(.tn-pro)) { display: none; }
.tn-pro__title {
  margin: 0;
  font: 400 13px/1.4 var(--tn-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tn-acc);
}

/* Visuels a telecharger. La legende porte la taille et le credit photo,
   que le journaliste doit reprendre. */
.tn-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-6);
  width: 100%;
}
@media (max-width: 900px) { .tn-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tn-photos { grid-template-columns: 1fr; } }

.tn-photo { margin: 0; display: flex; flex-direction: column; gap: var(--tn-space-2); }
.tn-photo__link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--tn-radius-md);
  overflow: hidden;
  background: rgba(240, 228, 214, .04);
}
.tn-photo__link img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
  display: block;
}
.tn-photo__over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 12px/1 var(--tn-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tn-text);
  background: rgba(38, 16, 13, .72);
  opacity: 0;
  transition: opacity .18s ease;
}
.tn-photo__link:hover .tn-photo__over,
.tn-photo__link:focus-visible .tn-photo__over { opacity: 1; }
.tn-photo__cap { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tn-text-55); }
.tn-photo__credit { color: var(--tn-text-45); }

/* Revue de presse : photo, media, titre, chapo, lien vers l'article.
   Les colonnes viennent de la grille de boucle d'Elementor, pas d'ici. */
.e-con.tn-review {
  border-radius: var(--tn-radius-lg);
  border: 1px solid var(--tn-rule-soft);
  background: rgba(240, 228, 214, .04);
  overflow: hidden;
  height: 100%;
}
.tn-review__photo {
  position: relative;
  flex: none;
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.tn-review__photo > * { position: absolute; inset: 0; margin: 0; }
.tn-review__photo .elementor-widget-container,
.tn-review__photo figure { width: 100%; height: 100%; margin: 0; }
.tn-review__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
  display: block;
}

.e-con.tn-review__body { flex: 1; }
.e-con.tn-review__head { width: 100%; }
.tn-reviews__media { color: var(--tn-acc); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.tn-reviews__date { color: var(--tn-text-45); font-size: 11px; white-space: nowrap; }

.tn-review__title {
  font-family: var(--tn-font-heading);
  font-size: 21px;
  line-height: 1.2;
  color: var(--tn-text);
}
.tn-review__chapo { font-size: 14px; line-height: 1.6; color: var(--tn-text-70); }
.tn-review__chapo p { margin: 0 0 var(--tn-space-2); }
.tn-review__chapo p:last-child { margin-bottom: 0; }

.tn-reviews__quote {
  margin: 0;
  padding-left: var(--tn-space-3);
  border-left: 2px solid var(--tn-rule);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tn-text-85);
}
.tn-reviews__quote::before { content: "“"; }
.tn-reviews__quote::after  { content: "”"; }

.tn-reviews__link {
  margin-top: auto;
  align-self: flex-start;
  font: 400 12px/1 var(--tn-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tn-text-70);
  border-bottom: 1px solid var(--tn-rule);
  padding-bottom: 3px;
}
.tn-reviews__link:hover { color: var(--tn-acc); }

/* Le bouton Charger plus de la grille, en pilule contour comme les
   boutons secondaires du site. Elementor sert sinon son bouton gris. */
.tn-load-more .e-loop__load-more { display: flex; justify-content: center; margin-top: var(--tn-space-8); }
.tn-load-more .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: var(--tn-radius-pill);
  border: 1px solid rgba(240, 228, 214, .35);
  background: transparent;
  color: var(--tn-text);
  font-family: var(--tn-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: currentColor;
  transition: border-color .2s ease, color .2s ease;
}
.tn-load-more .elementor-button:hover,
.tn-load-more .elementor-button:focus-visible {
  border-color: var(--tn-acc);
  color: var(--tn-acc);
  background: transparent;
}

/* Le message de fin de liste, une fois tout charge. */
.tn-load-more .e-load-more-message {
  margin-top: var(--tn-space-6);
  text-align: center;
  font: 400 12px/1.5 var(--tn-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tn-text-45);
}

/* Documents techniques : sans aucun fichier ni dossier de presse, le
   bloc n'a rien a proposer et disparait. Un texte vide ne creuse pas
   davantage l'espace entre le titre et les boutons. */
.e-con.tn-docs:not(:has(a)) { display: none; }
.tn-docs .elementor-widget-text-editor:has(> .elementor-widget-container:empty) { display: none; }

/* Bouton de lecture d'un extrait. Il garde l'allure d'une pilule
   contour, et echange son icone quand la lecture est en cours. */
.tn-audio-btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 16px;
  cursor: pointer;
  font-family: var(--tn-font-body);
}
.tn-audio-btn__pause { display: none; }
.tn-audio-btn.is-playing .tn-audio-btn__play { display: none; }
.tn-audio-btn.is-playing .tn-audio-btn__pause { display: inline-flex; }
.tn-audio-btn.is-playing { border-color: var(--tn-acc); color: var(--tn-acc); }
.tn-audio { display: none; }
.tn-featured-track__link { margin-top: auto; align-self: flex-start; padding: 8px 16px; }

/* Categories soumises aux GRAMMY. La grille suit le nombre reellement
   renseigne, de une a trois. */
.tn-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--tn-space-4);
  width: 100%;
}
.tn-cat { gap: var(--tn-space-3); }
.tn-cat__work {
  margin: 0;
  font-family: var(--tn-font-heading);
  font-size: 24px;
  line-height: 1.15;
  color: var(--tn-acc);
}

/* Page langue nzebi : les trois reperes en colonnes. */
.e-con.tn-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tn-space-8); width: 100%; }
@media (max-width: 780px) { .e-con.tn-facts { grid-template-columns: 1fr; } }

/* Compteur d'articles, sous la revue de presse. */
.tn-press-count {
  margin: var(--tn-space-8) 0 0;
  text-align: center;
  font: 400 12px/1.6 var(--tn-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tn-text-45);
}
.tn-press-count__n {
  font-family: var(--tn-font-heading);
  font-size: 22px;
  letter-spacing: 0;
  color: var(--tn-acc);
  vertical-align: -2px;
  margin-right: 6px;
}

/* =========================================================
 * ACCESSIBILITE
 * ======================================================= */

/* Le reperage principal ne doit pas afficher de contour au moment ou le
   lien d'evitement lui donne le focus : il n'est pas un element pilotable. */
.tn-main:focus { outline: none; }

/* Les liens de plateformes du pied de page mesuraient 17 pixels de haut,
   sous les 24 attendus pour une cible tactile. La hauteur minimale les
   rend atteignables au doigt sans changer leur apparence. */
.tn-socials a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-block: -4px;
}

/* Signature de l'agence, discrete sous la mention de copyright. */
.tn-credit {
  margin: var(--tn-space-2) 0 0;
  font: 400 11px/1.6 var(--tn-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tn-text-45);
}
.tn-credit a {
  color: var(--tn-text-70);
  border-bottom: 1px solid var(--tn-rule);
  padding-bottom: 1px;
}
.tn-credit a:hover { color: var(--tn-acc); }


/* La pochette ne se laisse plus comprimer.
   Elementor donne aux widgets une largeur souple : dans une rangee, le
   cadre de la pochette tombait a 200 pixels alors que l image en fait
   280. Elle debordait donc sous le bloc de texte voisin, peint par
   dessus. La regle vaut pour toutes les pages, celles a venir comprises. */
.elementor-widget:has(.tn-album-cover) { flex-shrink: 0; }

/* Les dix chansons du disque, en boutons sous les credits de l album.
   Cent lignes de credits d affilee seraient illisibles : chaque bouton
   ouvre la fiche de sa chanson par dessus la page, et un votant garde sa
   place dans les credits pendant qu il lit. */
.tn-fiches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin-top: var(--tn-space-4);
}
.tn-fiche__appel {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
}
.tn-fiche__appel-num { color: var(--tn-acc); }

.tn-fiche-modale {
  width: min(620px, calc(100vw - 2 * var(--tn-space-6)));
  max-height: min(82vh, 780px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--tn-rule-strong);
  border-radius: var(--tn-radius-md);
  background: var(--tn-bg);
  color: var(--tn-text);
  overflow: auto;
  /* La molette ne fait plus defiler la page derriere une fois le bas de
     la fiche atteint. */
  overscroll-behavior: contain;
  /* Les credits d un titre depassent souvent la hauteur disponible. La
     barre du systeme, large et claire, jurait sur ce fond : on la reduit
     et on la teinte. */
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 154, 69, .45) transparent;
}
.tn-fiche-modale::backdrop { background: rgba(13, 13, 13, .74); }
.tn-fiche-modale__corps { position: relative; padding: var(--tn-space-8); }
.tn-fiche-modale__fermer {
  position: absolute;
  top: var(--tn-space-3);
  right: var(--tn-space-3);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tn-text-55);
  font: 400 26px/1 var(--tn-font-body);
  cursor: pointer;
}
/* Le theme parent peint tout bouton survole ou au clavier en rose vif.
   La croix prend le focus des l ouverture de la fiche : sans ces etats,
   elle s affichait en pastille rose au milieu du dessin. */
.tn-fiche-modale__fermer:hover,
.tn-fiche-modale__fermer:focus,
.tn-fiche-modale__fermer:focus-visible,
.tn-fiche-modale__fermer:active { background: transparent; border-radius: 50%; }
.tn-fiche-modale__fermer:hover,
.tn-fiche-modale__fermer:focus-visible {
  color: var(--tn-acc);
  background: rgba(217, 154, 69, .12);
}
/* La croix occupe le coin : le titre s arrete avant. */
.tn-fiche-modale .tn-fiche__titre { margin: var(--tn-space-1) 0 var(--tn-space-3); padding-right: 40px; }
.tn-fiche-modale .tn-fiche__note { margin-bottom: var(--tn-space-4); }

@media (max-width: 600px) {
  .tn-fiche-modale__corps { padding: var(--tn-space-6); }
}


/* La fenetre d ecoute, dessinee comme une page de lien intelligent :
   la pochette, le disque, puis une ligne par service. Un visiteur arrive
   avec son service a lui et le cherche dans une liste ; une rangee de
   noms colles se lit mal pour ca. */
.tn-ecoute {
  width: min(430px, calc(100vw - 2 * var(--tn-space-6)));
  max-height: min(88vh, 820px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--tn-rule-strong);
  border-radius: var(--tn-radius-md);
  background: var(--tn-bg);
  color: var(--tn-text);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 154, 69, .45) transparent;
}
.tn-ecoute::backdrop { background: rgba(13, 13, 13, .78); }
.tn-ecoute__corps { position: relative; padding: var(--tn-space-8) var(--tn-space-6) var(--tn-space-6); }
.tn-ecoute__tete { text-align: center; }
.tn-ecoute__tete img {
  width: 190px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--tn-radius-sm);
  display: block;
  margin: 0 auto var(--tn-space-4);
}
.tn-ecoute__artiste {
  font-family: var(--tn-font-heading);
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
}
.tn-ecoute__album {
  font: 400 12px/1.5 var(--tn-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tn-acc);
  margin: var(--tn-space-1) 0 0;
}
.tn-ecoute__liste {
  list-style: none;
  margin: var(--tn-space-6) 0 0;
  padding: 0;
}
.tn-ecoute__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3) 0;
  border-top: 1px solid var(--tn-rule-soft);
}
.tn-ecoute__service { font-size: 15px; }
/* Le lien vers la page qui regroupe tout ferme la liste : il occupe
   toute la ligne, sans bouton, pour ne pas se confondre avec un service. */
.tn-ecoute__ligne--toutes { justify-content: center; padding-top: var(--tn-space-4); }
.tn-ecoute__ligne--toutes a { color: var(--tn-text-55); }
.tn-ecoute__ligne--toutes a:hover { color: var(--tn-acc); }

@media (max-width: 600px) {
  .tn-ecoute__corps { padding: var(--tn-space-6) var(--tn-space-4) var(--tn-space-4); }
  .tn-ecoute__tete img { width: 150px; }
}


/* Le passage d'une langue a l'autre, dans l'en-tete.
   Deux codes de deux lettres separes d'un filet : assez discret pour ne
   pas concurrencer le bouton d'ecoute, assez lisible pour se trouver. */
.tn-langues {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  font: 400 11px/1 var(--tn-font-mono);
  letter-spacing: .08em;
}
.tn-langues > * + *::before {
  content: "/";
  color: var(--tn-text-45);
  margin-right: var(--tn-space-2);
}
.tn-langues a { color: var(--tn-text-55); text-decoration: none; }
.tn-langues a:hover,
.tn-langues a:focus-visible { color: var(--tn-acc); }
.tn-langues__actuelle { color: var(--tn-text); }


/* Le credit d'une photo de fond.
   Le bandeau porte son image en fond de conteneur : aucune legende ou
   l'accrocher. Le credit se pose donc dans le coin, en petites capitales,
   pose sur un voile pour rester lisible quelle que soit la photo. */
.e-con:has(.tn-credit-photo) { position: relative; }
.tn-credit-photo {
  position: absolute;
  right: var(--tn-space-3);
  bottom: var(--tn-space-2);
  z-index: 2;
  padding: 3px 9px;
  border-radius: var(--tn-radius-pill);
  background: rgba(13, 13, 13, .42);
  color: rgba(240, 228, 214, .82);
  font: 400 10px/1.5 var(--tn-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Le widget qui le porte ne doit ni occuper de place, ni servir de point
   d'ancrage : sans quoi le credit se cale sur lui, en haut du bandeau, au
   lieu du coin de la photo. Elementor rend le code court avec ou sans son
   conteneur intermediaire selon la version, les deux formes sont visees. */
.elementor-widget:has(> .elementor-shortcode > .tn-credit-photo),
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .tn-credit-photo) {
  position: static;
  width: 0;
  height: 0;
}

@media (max-width: 600px) {
  .tn-credit-photo { right: var(--tn-space-2); font-size: 9px; }
}


/* Les pages ecrites a la main : mentions legales, confidentialite.
   Elles n'ont pas de mise en page Elementor, elles sortent donc du
   gabarit par defaut du theme parent, sans colonne ni marges : le texte
   partait coller au bord gauche sur toute la largeur de l'ecran.
   On leur donne la meme colonne de lecture que le reste du site. */
.site-main > .page-header,
.site-main > .page-content {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--tn-gutter);
  box-sizing: border-box;
}
.site-main > .page-header { padding-block: var(--tn-space-16) 0; }
.site-main > .page-content { padding-bottom: var(--tn-space-16); }
/* Le titre suit la colonne, il ne porte plus sa propre largeur. */
.site-main > .page-header .entry-title { max-width: none; }

/* Le texte de ces pages se lit en continu : on aere les paragraphes et
   on detache les intertitres, comme dans le reste du site. */
.site-main > .page-content p { margin: 0 0 var(--tn-space-4); line-height: 1.7; }
.site-main > .page-content h2 {
  font-family: var(--tn-font-heading);
  font-size: 26px;
  line-height: 1.2;
  margin: var(--tn-space-8) 0 var(--tn-space-3);
}
.site-main > .page-content h2:first-child { margin-top: 0; }
.site-main > .page-content a { color: var(--tn-acc); }

@media (max-width: 600px) {
  .site-main > .page-header,
  .site-main > .page-content { padding-inline: 20px; }
  .site-main > .page-header { padding-block: var(--tn-space-12) 0; }
}