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

.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 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-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-hero > :not(.e-con),
.tn-veil-video > :not(.e-con),
.tn-veil-quote > :not(.e-con) { position: relative; z-index: 2; }

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

/* =========================================================
   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); }
.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;
}
.tn-form textarea,
.tn-form .elementor-field-textual.elementor-field-type-textarea {
  border-radius: var(--tn-radius-md);
}
.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; }

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

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