/* =========================================================================
   FICHE DE PRODUCTION — design/PageFicheProduction.dc.html
   Mise en page des sections ; les composants (components/) portent leur
   propre CSS. Mobile d'abord, aux paliers du rail (768, 1280).
   ========================================================================= */

:root { --fiche-pad: var(--e-12); }
@media (min-width: 768px) { :root { --fiche-pad: var(--e-16); } }

/* --- Tête : bande --c-vert-900, texte papier, surtitres --c-surtitre-sombre
       (défini dans prod10avril.css) ---------------------------------------- */
.fiche-tete {
  background: var(--c-vert-900);
  color: var(--c-paper);
}
.fiche-tete > .container { padding-block: var(--e-12); }
.fiche-tete__rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-4);
}
.fiche-tete__ligne {
  font-size: var(--t-small);
  line-height: var(--l-dense);
  color: var(--c-surtitre-sombre);
}
.fiche-tete__titre {
  margin: var(--e-3) 0 0;
  max-width: 26ch;
  font-family: var(--f-titre);
  font-size: var(--t-h1);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  font-weight: var(--g-normal);
  color: var(--c-paper);
}
.fiche-chapeau {
  margin: 0;
  max-width: var(--l-max-texte);
  font-size: var(--t-lead);
  line-height: var(--l-texte);
  color: var(--c-ink-2);
}
.fiche-chapeau--tete {
  margin-top: var(--e-4);
  color: var(--c-surtitre-sombre);
}
/* Site officiel : lien sur la bande, aux couleurs des liens du pied de page. */
.fiche-tete__site { margin: var(--e-4) 0 0; font-size: var(--t-small); font-weight: var(--g-fort); }
.fiche-tete__site a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible-min);
  color: var(--c-vert-100);
  text-underline-offset: 3px;
}
.fiche-tete__site a:hover { color: var(--c-paper); }
.fiche-tete__site .bi { font-size: 16px; line-height: 1; }

/* --- Sections sur papier -------------------------------------------------- */
.fiche-section { background: var(--c-paper); }
.fiche-section > .container { padding-bottom: var(--e-12); }
/* L'espace sous la bande sombre va à la première section visible. */
.fiche-tete + .fiche-section > .container { padding-top: var(--e-12); }
.fiche-section--fin-de-groupe > .container { padding-bottom: var(--fiche-pad); }

.fiche-h2 {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titre);
  font-size: var(--t-h2);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  font-weight: var(--g-normal);
}
.fiche-h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  font-weight: var(--g-normal);
}
/* Intitulé en capitales du système (--t-label), pour les sous-groupes. */
.fiche-etiquette {
  margin: 0 0 var(--e-4);
  font-family: var(--f-texte);
  font-size: var(--t-label);
  letter-spacing: var(--a-label);
  text-transform: uppercase;
  font-weight: var(--g-fort);
  color: var(--c-ink-3);
}
.fiche-intro {
  margin: calc(var(--e-3) - var(--e-4)) 0 0;
  max-width: var(--l-max-texte);
  font-size: var(--t-small);
  line-height: var(--l-dense);
  color: var(--c-ink-2);
}
.fiche-vide { color: var(--c-ink-3); font-size: var(--t-small); }

/* Deux colonnes souples : elles passent l'une sous l'autre faute de place. */
.fiche-deux-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-8) var(--gout);
  align-items: flex-start;
}
.fiche-colonne { min-width: 0; }
.fiche-colonne--large { flex: 1 1 380px; }
.fiche-colonne--budget { flex: 1 1 420px; }
/* Sans contact, le budget garde à peu près sa largeur d'à côté du contact
   (environ 650 px à 1280) : en pleine largeur, poste et précision
   s'écartent trop pour se lire d'une ligne à l'autre. */
.fiche-colonne--budget:only-child { flex: 0 1 660px; }
.fiche-colonne--contact { flex: 1 1 280px; }

.fiche-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6) var(--gout);
  margin-top: var(--e-6);
}
@media (min-width: 768px)  { .fiche-grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .fiche-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Exigences et encadré du gril fixe ------------------------------------ */
.fiche-exigences {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  max-width: var(--l-max-texte);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}
.fiche-exigences li {
  padding-top: var(--e-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-small);
  line-height: var(--l-dense);
  color: var(--c-ink-2);
}
.fiche-encadre-gril {
  flex: 1 1 340px;
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-6);
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-fort);
  border-top: 2px solid var(--c-vert-700);
  border-radius: var(--r-md);
}
.fiche-encadre-gril .bi { flex: 0 0 auto; font-size: 20px; line-height: 1; padding-top: 2px; color: var(--c-vert-700); }
.fiche-encadre-gril__titre {
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  color: var(--c-ink);
}
.fiche-encadre-gril__texte {
  margin: var(--e-3) 0 0;
  font-size: var(--t-small);
  line-height: var(--l-dense);
  color: var(--c-ink-2);
}

/* --- Deuxième partie : extraits, œuvre, crédits, rôle, tournée, presse,
       photos, aller plus loin ------------------------------------------- */

/* Bande teintée --c-paper-2 avec filet fort en tête (Extraits, Tournée). */
.fiche-section--teinte {
  background: var(--c-paper-2);
  border-top: 1px solid var(--c-line-fort);
}
.fiche-section--teinte > .container,
.fiche-section--filet > .container { padding-block: var(--fiche-pad); }
.fiche-section--filet { border-top: 1px solid var(--c-line-fort); }
/* Première section après une bande : elle reprend l'air du haut. */
.fiche-section--ouvre-groupe > .container { padding-top: var(--fiche-pad); }
/* Fiche de production : l'air des groupes se déduit du voisinage, et suit
   donc l'ordre des sections et celles qui sont vides. Une section sur papier
   prend le grand air avant une bande et en fin de page ; celle qui suit une
   bande le reprend en haut. */
.fiche-production > .fiche-section:not(.fiche-section--teinte, .fiche-section--filet):has(+ .fiche-section--teinte, + .fiche-section--filet) > .container,
.fiche-production > .fiche-section:last-child > .container { padding-bottom: var(--fiche-pad); }
.fiche-production > :is(.fiche-section--teinte, .fiche-section--filet) + .fiche-section > .container { padding-top: var(--fiche-pad); }

.fiche-deux-colonnes--marge { margin-top: var(--e-6); }
.fiche-colonne--video { flex: 1 1 460px; display: flex; flex-direction: column; gap: var(--e-6); }
/* Vidéos seules : une grille, une colonne sous 768 px, deux au-delà. */
.fiche-colonne--video-seule {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6) var(--gout);
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .fiche-colonne--video-seule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fiche-colonne--audio { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--e-4); }
.fiche-colonne--texte { flex: 1 1 420px; }
.fiche-colonne--image { flex: 1 1 300px; }

/* Texte courant issu d'un champ formaté (p, em, strong). */
.fiche-prose { display: flex; flex-direction: column; gap: var(--e-4); }
.fiche-prose p,
.fiche-texte {
  margin: 0;
  max-width: var(--l-max-texte);
  font-size: var(--t-base);
  line-height: var(--l-texte);
}
.fiche-prose .fiche-h3 { margin-top: var(--e-4); }
.fiche-texte { margin-top: var(--e-4); }

/* Grilles des crédits, des photos et des cartes : écart vertical --e-8. */
.fiche-grille--large { gap: var(--e-8) var(--gout); }

.fiche-credits {
  min-width: 0;
  padding-top: var(--e-4);
  border-top: 2px solid var(--c-vert-700);
}
.fiche-credits .fiche-etiquette { margin: 0; }
.fiche-credits__lignes { display: flex; flex-direction: column; gap: var(--e-3); margin: var(--e-4) 0 0; }
.fiche-credits__lignes div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--c-line);
}
.fiche-credits__lignes dt {
  flex: 1 1 120px;
  min-width: 0;
  font-size: var(--t-small);
  line-height: var(--l-dense);
  font-weight: var(--g-normal);
  color: var(--c-ink-3);
}
.fiche-credits__lignes dd {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0;
  font-family: var(--f-titre);
  font-size: var(--t-base);
  line-height: var(--l-dense);
}

.fiche-partenaires { margin-top: var(--e-8); }
/* Pages des sites partenaires sur cette production : liens sortants, au
   rail, sous les logos. */
.fiche-pages-partenaires { margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.fiche-pages-partenaires a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cible-min);
  font-size: var(--t-small);
  color: var(--c-vert-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fiche-pages-partenaires a:hover { color: var(--c-vert-900); }

.fiche-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-8) var(--gout);
  margin: var(--e-6) 0 0;
}
.fiche-chiffres div {
  flex: 1 1 200px;
  min-width: 0;
  padding-top: var(--e-3);
  border-top: 1px solid var(--c-line-fort);
}
.fiche-chiffres dt {
  font-size: var(--t-label);
  letter-spacing: var(--a-label);
  text-transform: uppercase;
  font-weight: var(--g-fort);
  color: var(--c-ink-3);
}
.fiche-chiffres dd {
  margin: var(--e-2) 0 0;
  font-family: var(--f-titre);
  font-size: var(--t-h1);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  font-variant-numeric: tabular-nums;
}
.fiche-etapes-titre { margin-top: var(--e-12); }
.fiche-etapes { margin-top: var(--e-4); }

.fiche-presse {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  max-width: 900px;
  margin-top: var(--e-6);
}

.fiche-carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  min-width: 0;
  padding-top: var(--e-4);
  border-top: 2px solid var(--c-vert-700);
}
.fiche-carte__resume {
  margin: 0;
  max-width: var(--l-max-texte);
  font-size: var(--t-small);
  line-height: var(--l-dense);
  color: var(--c-ink-2);
}