/*
Theme Name: Festi-Baule 2026
Theme URI: https://festivalfictiondocumentairepolitique.com
Author: LePressing
Author URI: https://lepressing.com
Description: Thème enfant de Twenty Twenty-Five portant le design system 2026 : Archivo variable (OFL, auto-hébergée), bleu Festival #003EAF, bleu logotype #0268B1. Le système est décrit dans DESIGN.md.
Template: twentytwentyfive
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: festibaule-2026
*/

/* =========================================================
   1. Correctifs de rendu
   ========================================================= */

/* Capitales + interlettrage élargissent les libellés : on empêche la coupure. */
.wp-block-button__link {
	white-space: nowrap;
}

/* Titres de colonne courts : éviter les veuves sur deux mots. */
.wp-block-column > .wp-block-heading,
.wp-block-heading {
	text-wrap: balance;
}

/* Longueur de ligne confortable pour le texte courant, sans contraindre les blocs larges. */
.entry-content > p,
.wp-block-post-content > p {
	max-width: var(--wp--custom--mesure);
}

/* Archivo a des chiffres proportionnels par défaut : tabulaires dans les grilles et tableaux. */
.wp-block-table,
.is-style-chiffres {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* =========================================================
   2. Accessibilité
   ========================================================= */

/* Focus visible partout, y compris sur fond bleu. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--encre);
	outline-offset: 2px;
}

.has-bleu-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-encre-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.is-style-section-bleu :where(a, button, summary, [tabindex]):focus-visible,
.is-style-section-encre :where(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--blanc);
}

/* Cibles tactiles : 44 px minimum sur la navigation et les boutons. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-button__link {
	min-height: var(--wp--custom--cible);
	display: inline-flex;
	align-items: center;
}

/* Les bordures décoratives sont trop claires pour un champ de formulaire. */
input:not([type="submit"]),
select,
textarea {
	border: 2px solid var(--wp--preset--color--gris);
	border-radius: 0;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--medium);
	min-height: var(--wp--custom--cible);
}

input:not([type="submit"]):focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--bleu);
}

::selection {
	background: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================
   3. Styles de blocs additionnels
   ========================================================= */

/* Bouton fantôme : contour bleu, fond transparent. */
.wp-block-button.is-style-fantome > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--bleu);
	border: 2px solid var(--wp--preset--color--bleu);
}

.wp-block-button.is-style-fantome > .wp-block-button__link:hover,
.wp-block-button.is-style-fantome > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
}

.is-style-section-bleu .wp-block-button.is-style-fantome > .wp-block-button__link,
.is-style-section-encre .wp-block-button.is-style-fantome > .wp-block-button__link {
	color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--blanc);
}

/* Surtitre : la petite ligne en capitales espacées au-dessus d'un titre. */
.is-style-surtitre {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--bleu-clair);
	margin-bottom: 0.5rem;
}

/*
 * Relevé par la cliente le 2026-09-11 : « regarde 4ème ce n'est pas
 * correctement écrit ». Le surtitre passe tout en capitales, donc le
 * <sup>e</sup> de « 4e édition » sortait en « 4E ». L'exposant ordinal
 * s'écrit en bas de casse, quelle que soit la casse du texte porteur.
 * Vaut pour tous les surtitres et tous les titres en capitales.
 */
.is-style-surtitre sup,
.ffdp-bandeau-titre sup,
.ffdp-carte__titre sup,
.ffdp-carte__categorie sup,
.ffdp-carte__repere sup,
.ffdp-programme-entete__titre sup,
.ffdp-jour__date sup {
	text-transform: lowercase;
}

/* Sur un aplat de marque, le surtitre passe en blanc : le bleu clair
   n'y tient pas la lecture. */
.is-style-section-bleu .is-style-surtitre,
.is-style-section-encre .is-style-surtitre,
.has-bleu-background-color .is-style-surtitre,
.has-encre-background-color .is-style-surtitre {
	color: var(--wp--preset--color--blanc);
}

/* Titre d'affiche : la plus grosse échelle, réservée aux héros de page. */
.is-style-affiche {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--affiche);
	font-weight: 900;
	line-height: 0.88;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* Filet épais de section, écho au trait sous le logotype. */
.wp-block-separator.is-style-affiche {
	border: 0;
	border-top: var(--wp--custom--trait--affiche) solid currentColor;
	opacity: 1;
	max-width: none;
}

/* =========================================================
   4. Logos
   ========================================================= */

/* Les SVG sont en currentColor : la couleur vient du contexte. */
.festibaule-logo {
	display: inline-block;
	width: auto;
	height: auto;
	color: var(--wp--preset--color--bleu);
}

.festibaule-logo svg,
.festibaule-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Zone de protection : une demi-hauteur de « P » autour du logotype. */
.festibaule-logo--principal { max-width: 22rem; padding: 0.6em 0; }
.festibaule-logo--texte     { max-width: 18rem; padding: 0.6em 0; }
.festibaule-logo--sceau     { max-width: 7.5rem; padding: 0.4em; }

.has-bleu-background-color .festibaule-logo,
.has-encre-background-color .festibaule-logo,
.is-style-section-bleu .festibaule-logo,
.is-style-section-encre .festibaule-logo {
	color: var(--wp--preset--color--blanc);
}

/* =========================================================
   5. Passerelles vers l'ancien thème (tailpress-master)
   Les 27 pages existantes portent encore ses classes.
   À supprimer une fois les contenus repris.
   ========================================================= */

.has-primary-color        { color: var(--wp--preset--color--bleu-clair) !important; }
.has-primary-background-color { background-color: var(--wp--preset--color--bleu-clair) !important; }
.has-primary-hover-color  { color: var(--wp--preset--color--bleu) !important; }
.has-primary-hover-background-color { background-color: var(--wp--preset--color--bleu) !important; }
.has-secondary-color      { color: var(--wp--preset--color--bleu) !important; }
.has-secondary-background-color { background-color: var(--wp--preset--color--bleu) !important; }
.has-dark-color           { color: var(--wp--preset--color--encre) !important; }
.has-dark-background-color { background-color: var(--wp--preset--color--encre) !important; }
.has-light-color          { color: var(--wp--preset--color--gris-voile) !important; }
.has-light-background-color { background-color: var(--wp--preset--color--gris-voile) !important; }

.has-regular-font-size { font-size: var(--wp--preset--font-size--medium) !important; }
.has-xl-font-size      { font-size: var(--wp--preset--font-size--x-large) !important; }
.has-xxl-font-size     { font-size: var(--wp--preset--font-size--xx-large) !important; }
.has-xxxl-font-size    { font-size: var(--wp--preset--font-size--xxx-large) !important; }

/* =========================================================
   6. Cartes
   Transposition du système de la charte (dernière page) :
   bandeau haut, visuel crédité, bandeau bas centré.
   Le HTML des compositions ne porte que des classes ;
   tout le rendu est ici.
   ========================================================= */

.ffdp-carte {
	--ffdp-fond: var(--wp--preset--color--bleu);
	--ffdp-texte: var(--wp--preset--color--blanc);
	--ffdp-ratio: 3 / 2;

	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ffdp-fond);
	color: var(--ffdp-texte);
	border: 2px solid var(--ffdp-fond);
	overflow: hidden;
	height: 100%;
}

.ffdp-carte > * {
	margin-block: 0;
}

/* --- bandeau haut : sceau optionnel + repère --- */

.ffdp-carte .ffdp-carte__enseigne {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	text-align: center;
	/* Deux lignes de repère réservées d'office. « Présidente du jury
	   documentaire politique » en tient deux, « Jury fiction politique » une
	   seule : sans cette réserve, les visuels d'une même rangée ne
	   commencaient pas à la même hauteur. La régularité de la grille passe
	   avant l'économie de quelques pixels. */
	min-height: calc(0.8125rem * 1.3 * 2 + 1.75rem);
}

.ffdp-carte .ffdp-carte__enseigne .festibaule-logo {
	max-width: 64px;
	padding: 0;
	color: inherit;
}

.ffdp-carte .ffdp-carte__repere {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0;
	color: inherit;
}

/* --- visuel + crédit vertical --- */

.ffdp-carte .ffdp-carte__media {
	position: relative;
	aspect-ratio: var(--ffdp-ratio);
	overflow: hidden;
	background: var(--wp--preset--color--encre);
	margin: 0;
}

/*
 * Une carte sans visuel ne montre pas un aplat encre a la place de l'image :
 * le cadre du visuel disparait. Sans cette regle, une fiche film ou personne
 * sans image mise en avant rend un rectangle noir en 3:2, parce que
 * .ffdp-carte__media porte un aspect-ratio et un fond encre. Or l'encre
 * ponctue, elle ne fait jamais un aplat de cette taille.
 * Utile tant que les affiches et les portraits 2026 ne sont pas livres.
 */
.ffdp-carte .ffdp-carte__media:not(:has(img)) {
	display: none;
}

.ffdp-carte .ffdp-carte__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--duree--normale) ease;
}

.ffdp-carte .ffdp-carte__credit {
	position: absolute;
	top: 0;
	right: 0;
	writing-mode: vertical-rl;
	white-space: nowrap;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 100%;
	margin: 0;
	padding: 0.6rem 0.3rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.5625rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

/* --- bandeau bas --- */

.ffdp-carte .ffdp-carte__pied {
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	 * Relevé par la cliente le 2026-09-11, sur la sélection comme sur le
	 * jury : « les traits blancs sous la photo ne sont pas tous alignés de
	 * la même façon ». Le filet est porté par le titre en ::before, et le
	 * pied était centré verticalement : un titre de trois lignes poussait
	 * donc le filet plus haut qu'un titre d'une ligne. Caler en haut aligne
	 * les filets de toute une rangée, et le blanc part en bas de carte, où
	 * il ne se voit pas.
	 */
	justify-content: flex-start;
	flex: 1 1 auto;
	gap: 0.75rem;
	padding: 1.5rem 1.5rem 1.75rem;
	text-align: center;
	text-wrap: balance;
}

.ffdp-carte .ffdp-carte__categorie {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.25;
	margin: 0;
	color: inherit;
}

.ffdp-carte .ffdp-carte__mention {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.25;
	margin: 0;
	color: inherit;
}

/* Le filet court de la charte, porté par le titre : un élément de moins à casser. */
.ffdp-carte .ffdp-carte__titre::before {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	background: currentColor;
	margin: 0 auto 0.75rem;
}

.ffdp-carte .ffdp-carte__titre {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0;
	color: inherit;
}

.ffdp-carte .ffdp-carte__attribution {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45;
	margin: 0;
	color: inherit;
}

/* --- variantes de fond --- */

.ffdp-carte--encre { --ffdp-fond: var(--wp--preset--color--encre); }

.ffdp-carte--clair {
	--ffdp-fond: var(--wp--preset--color--blanc);
	--ffdp-texte: var(--wp--preset--color--bleu);
	border-color: var(--wp--preset--color--bleu);
}

/* --- ratios : un par contexte, jamais choisi à la main --- */

.ffdp-carte--personne  { --ffdp-ratio: 1 / 1; }
.ffdp-carte.is-affiche { --ffdp-ratio: 2 / 3; }
/*
 * Les cartes de la sélection sont en 4:5, pas en 2:3 comme le palmarès.
 * Décidé le 2026-09-07 sur comparaison de rendus : la carte entière tient
 * alors dans la grille, titre et réalisateur compris, là où le 2:3 remplit
 * l'écran d'un seul rang de visuels. Et le repli sur un photogramme
 * paysage y est nettement moins rogné. Les affiches ne perdent rien au
 * change : elles sont contenues, pas remplies, à tout ratio de cadre.
 * Le palmarès garde son 2:3, calé sur son gabarit Figma.
 */
.ffdp-carte--film.is-affiche { --ffdp-ratio: 4 / 5; }
.ffdp-carte.is-photogramme { --ffdp-ratio: 3 / 2; }
.ffdp-carte.is-portrait { --ffdp-ratio: 1 / 1; }

/* --- carte à la une : le seul endroit où le sceau se répète pas --- */

.ffdp-carte--une .ffdp-carte__titre { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.ffdp-carte--une .ffdp-carte__pied  { padding-bottom: 2rem; }

/* --- carte cliquable : le titre porte le lien, la zone couvre la carte --- */

.ffdp-carte--lien .ffdp-carte__titre a {
	color: inherit;
	text-decoration: none;
}

.ffdp-carte--lien .ffdp-carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ffdp-carte--lien:hover .ffdp-carte__media img { transform: scale(1.04); }

.ffdp-carte--lien:focus-within {
	outline: 3px solid var(--wp--preset--color--encre);
	outline-offset: 3px;
}

.ffdp-carte--clair.ffdp-carte--lien:focus-within,
.ffdp-carte--lien:focus-within { outline-color: var(--wp--preset--color--encre); }

/* =========================================================
   7. Grilles de cartes
   Style de bloc « Grille » sur le bloc Groupe : le nombre de
   colonnes s'adapte seul, il n'y a pas de colonnes à régler.
   ========================================================= */

:is(.wp-block-group, .wp-block-post-template).is-style-grille,
:is(.wp-block-group, .wp-block-post-template).is-style-grille-large {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

/* Le modèle de contenu rend une liste : on la dépouille de ses puces et de
   son retrait, et chaque élément devient une cellule qui s'étire. */
.wp-block-post-template.is-style-grille,
.wp-block-post-template.is-style-grille-large {
	list-style: none;
	padding: 0;
	margin: 0;
}

.wp-block-post-template.is-style-grille > li,
.wp-block-post-template.is-style-grille-large > li {
	display: flex;
	flex-direction: column;
}

:is(.wp-block-group, .wp-block-post-template).is-style-grille {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

:is(.wp-block-group, .wp-block-post-template).is-style-grille-large {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr));
}

:is(.wp-block-group, .wp-block-post-template).is-style-grille > *,
:is(.wp-block-group, .wp-block-post-template).is-style-grille-large > * {
	margin-block: 0;
	max-width: none;
}

/* Le bloc Image dans le cadre du visuel : il remplit, il ne pousse pas. */
.ffdp-carte .ffdp-carte__media .wp-block-image,
.ffdp-carte .ffdp-carte__media figure {
	margin: 0;
	height: 100%;
}

/* =========================================================
   8. Carte horizontale
   Visuel à gauche, informations à droite, texte au fer à gauche.
   Ouverte à tous les contextes ; le palmarès l'utilise par défaut
   avec le ratio affiche.
   ========================================================= */

.ffdp-carte--horizontal {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	align-items: start;
}

/* Le visuel occupe toute la hauteur de la colonne de gauche
   et garde son ratio : une affiche n'est jamais rognée en hauteur. */
.ffdp-carte--horizontal .ffdp-carte__media {
	grid-area: 1 / 1 / 3 / 2;
	align-self: start;
}

/* Sur le format horizontal, le crédit passe au bord gauche :
   à droite il touchait la colonne de texte et semblait lui appartenir. */
.ffdp-carte--horizontal .ffdp-carte__credit {
	right: auto;
	left: 0;
}

.ffdp-carte--horizontal .ffdp-carte__enseigne {
	grid-area: 1 / 2 / 2 / 3;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: 1.35rem 1.4rem 0.35rem;
	min-height: 0;
}

.ffdp-carte--horizontal .ffdp-carte__pied {
	grid-area: 2 / 2 / 3 / 3;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: 0.35rem 1.4rem 1.5rem;
}

.ffdp-carte--horizontal .ffdp-carte__titre::before {
	margin: 0.85rem 0;
}

/* Le palmarès borne sa colonne d'affiche à 15 rem au lieu de 38 %.
   En pleine largeur large, 38 % donnent une affiche de 450 px, donc, au ratio
   2:3, une carte de 675 px de haut dont les deux tiers droits sont vides. La
   hauteur d'une carte horizontale est celle de son visuel : c'est le visuel
   qu'il faut borner, pas la carte. */
.ffdp-carte--palmares.ffdp-carte--horizontal {
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
}

/* Sous 40 rem la carte horizontale redevient une carte verticale centrée. */
@media (max-width: 40rem) {
	.ffdp-carte--horizontal {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}

	.ffdp-carte--horizontal .ffdp-carte__enseigne {
		grid-area: 1 / 1 / 2 / 2;
		align-items: center;
		text-align: center;
		padding: 0.875rem 1rem;
	}

	.ffdp-carte--horizontal .ffdp-carte__media { grid-area: 2 / 1 / 3 / 2; }

	.ffdp-carte--horizontal .ffdp-carte__pied {
		grid-area: 3 / 1 / 4 / 2;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 1.5rem 1.5rem 1.75rem;
	}

	.ffdp-carte--horizontal .ffdp-carte__titre::before { margin: 0 auto 0.75rem; }
}

/* =========================================================
   9. En-tête et pied de page
   Transposition des composants Figma « En-tête » (variante
   Blanc) et « Pied de page ». Voir BACKOFFICE.md §1 ter.
   ========================================================= */

/* Le logotype de l'en-tête : 190 px en mobile, 220 px au-delà,
   comme les deux maquettes. La zone de protection reste gérée
   par le padding de .festibaule-logo--principal. */
.ffdp-entete .festibaule-logo--principal {
	width: clamp(11.875rem, 16vw, 13.75rem);
	max-width: none;
}

/* =========================================================
   Sections pleine largeur : elles se touchent

   Mesuré sur la home le 2026-09-03 : le héros se termine à
   948 px, le bandeau commence à 972 px. Vingt-quatre pixels de
   blanc entre deux aplats qui devraient se toucher, et la même
   bande sous chaque section.

   L'origine n'est pas dans le contenu : aucun bloc ne porte de
   marge. C'est WordPress qui pose margin-block-start: 24px sur
   chaque bloc de premier niveau, parce que le réglage blockGap
   n'est pas activé dans settings de theme.json, ce qui rend
   inerte le blockGap à 0 déclaré dans styles.

   On ne l'active pas : activer blockGap propagerait la valeur
   aux dispositions flex et grille, où le défaut actuel est bien
   plus petit, et déplacerait des espacements partout. On coupe
   la marge là où elle nuit, sur les seules sections pleine
   largeur. Leur respiration est dans leur propre padding.
   Les paragraphes de premier niveau d'une page de texte, eux,
   gardent leur espacement.
   ========================================================= */

.entry-content > .alignfull {
	margin-block-start: 0;
}

/* =========================================================
   Navigation mobile
   Composants Figma « Menu mobile · barre » (97:120) et
   « Menu mobile · ouvert » (97:132), page Home 2026.

   Le bouton du menu est celui du bloc Navigation du cœur.
   Aucun JavaScript de notre côté : le piège de focus,
   aria-expanded, la fermeture à Échap et au clic extérieur
   sont fournis et maintenus par WordPress. C'est aussi la
   même liste d'entrées qu'en desktop : une seule à tenir.
   Le fond bleu et le texte blanc du panneau sont posés en
   attributs du bloc (overlayBackgroundColor, overlayTextColor)
   pour rester visibles et modifiables dans l'éditeur.
   ========================================================= */

/* =========================================================
   POURQUOI LE PANNEAU REMPLACE LA BARRE DES 1260 px, ET PAS 600

   Mesure du 2026-09-11, largeur par largeur, sur /programme/ :

     >= 1260 px   en-tete 161 px, la barre tient sur une ligne
     1240 px      en-tete 244 px, le logotype et la nav se separent
      900 px      en-tete 305 px
      800 px      en-tete 371 px, la nav elle-meme passe sur 2 lignes

   Le point de rupture etait a 600 px : entre 600 et 1259 px le site
   servait donc une barre desktop haute de 240 a 371 px. Tolerable
   tant que l'en-tete defilait avec la page ; intenable depuis qu'il
   est collant, ou 371 px mangent la moitie d'un ecran de tablette.

   La barre a besoin d'environ 1230 px : logotype 220, navigation
   764, billetterie 140, plus les ecarts. Elle ne RENTRE PAS sous
   1260 px. On ne la retaille donc pas a la marge, on passe au
   panneau, qui porte la meme liste et la billetterie.

   Consequence assumee : une tablette et un portable de 1024 px
   ouvrent le menu au bouton. C'est un menu concu, pas un repli.
   ========================================================= */


@media (max-width: 1259.98px) {
	/* La barre tient sur une ligne : logotype, billetterie, bouton
	   du menu. Le groupe de l'en-tête est en flex-wrap: wrap, ce
	   qui renvoyait les deux commandes sous le logotype dès 343 px.
	   On interdit le retour à la ligne et on resserre les écarts. */
	.ffdp-entete > .wp-block-group,
	.ffdp-entete > .wp-block-group > .wp-block-group {
		flex-wrap: nowrap;
		gap: 1rem;
	}

	/* Le logotype se contracte avec la largeur d'écran : 120 px sur
	   un petit téléphone, 150 px dès qu'il y a la place. */
	.ffdp-entete .festibaule-logo--principal {
		width: clamp(7.5rem, 34vw, 9.375rem);
		flex-shrink: 0;
	}

	/* La billetterie reste atteignable en un geste. C'est le
	   geste que le public fait à deux jours de l'ouverture, sur
	   son téléphone, et l'enterrer sous le bouton du menu
	   contredirait le brief. Elle passe avant ce bouton. */
	.ffdp-entete__billetterie {
		order: -1;
	}

	.ffdp-entete__billetterie .wp-block-button__link {
		padding-inline: 0.875rem;
		font-size: var(--wp--preset--font-size--small);
		white-space: nowrap;
	}

	.ffdp-entete .wp-block-navigation__responsive-container-open {
		flex-shrink: 0;
	}
}

/* Le bouton du menu et sa croix : la cible fait 44 px pleins,
   pas seulement le trait de l'icône. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--cible);
	min-height: var(--wp--custom--cible);
}

/* POIDS DES SÉLECTEURS, à lire avant de toucher aux règles qui
   suivent.

   Le cœur habille son panneau avec des sélecteurs à quatre
   classes, dont celui-ci qui écrase toute marge intérieure des
   entrées :

     .wp-block-navigation__responsive-container.is-menu-open
     :where(:not(.disable-default-overlay))
     .wp-block-navigation__responsive-container-content
     .wp-block-navigation-item__content { padding: 0 }

   Le :where() ne compte pas, mais les quatre classes si. Arriver
   après dans la feuille ne suffit donc pas : il faut au moins
   autant de poids. D'où la classe .is-menu-open répétée. C'est
   volontaire et documenté, pas une coquille.

   Le cœur pose aussi, sur ce panneau :
   - un padding en clamp() pris sur le padding racine du thème,
   - un padding-top de 2rem + 24px sur le contenu,
   - gap: inherit sur le conteneur, qui récupère le blockGap de
     1,75 rem du bloc et écarte les entrées de 28 px.
   Les trois sont neutralisés ci-dessous : la respiration du
   panneau est dans la hauteur des lignes, pas dans des marges.
   ========================================================= */

.ffdp-nav .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	padding: 0;
	gap: 0;
}

.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content {
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	padding-top: 5.5rem;
}

.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation__container {
	width: 100%;
	flex-grow: 0;
	align-items: stretch;
	gap: 0;
}

/* box-sizing: le thème n'a pas de remise à zéro universelle, tout
   est en content-box. Sans cette ligne, l'entrée fait
   100 % + 2 × 24 px de marge intérieure, soit 417 px dans un
   panneau de 369 : le panneau déborde de 48 px, part en défilement
   horizontal, et le début de chaque libellé sort de l'écran.
   C'est ce qui coupait « LE » et « LA ». */
.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation-item,
.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box;
}

.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-block-start: var(--wp--custom--trait--fin) solid rgb(255 255 255 / 0.28);
}

.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation-item:last-child {
	border-block-end: var(--wp--custom--trait--fin) solid rgb(255 255 255 / 0.28);
}

/* Cinq classes : une de plus que la règle du cœur qui met le
   padding à zéro. Une entrée par ligne, 64 px de haut, texte
   centré verticalement, marge intérieure alignée sur la marge
   de page. */
.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 4rem;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 0.98;
	text-transform: uppercase;
}

/* La croix se pose à la hauteur du bouton du menu, pas dans le
   coin : le doigt n'a pas à se déplacer pour refermer. */
.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
	inset-block-start: 1.375rem;
	inset-inline-end: 1rem;
}

/* DEUX NAVIGATIONS, une par largeur.

   Le bloc Navigation n'a pas de marqueur « mobile seulement » :
   tout ce qu'on ajoute pour le panneau, billetterie, parcours
   secondaires, réseaux, apparaît aussi dans la barre desktop.
   Masquer élément par élément marche mal : la barre desktop finit
   par dépendre d'une pile de règles qu'un thème parent ou une mise
   à jour peut renverser.

   On sépare donc franchement. La navigation desktop porte les six
   entrées et rien d'autre ; la navigation mobile porte les six
   entrées plus ce que la maquette demande dans le panneau. Chacune
   disparaît à l'autre largeur, en une règle.

   Le prix, assumé : les six entrées existent en deux exemplaires
   dans parts/header.html. Une septième se saisit deux fois. */
/* Deux classes dans le sélecteur, et ce n'est pas cosmétique :
   WordPress imprime les styles de disposition du bloc Navigation
   dans une balise <style> placée APRÈS la feuille du thème.
   À poids égal, c'est lui qui gagne, et le
   .wp-container-core-navigation-is-layout-xxx { display: flex }
   remettait la navigation mobile visible en desktop. */
@media (max-width: 1259.98px) {
	.ffdp-entete .ffdp-nav--desktop {
		display: none;
	}
}

@media (min-width: 1260px) {
	.ffdp-entete .ffdp-nav--mobile {
		display: none;
	}
}

/* Les parcours secondaires : même gabarit de ligne, mais en corps
   courant et sans capitales. Ils se lisent comme un pied de page,
   pas comme une entrée principale. */
.ffdp-nav .is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content .ffdp-nav__secondaire .wp-block-navigation-item__content {
	min-height: var(--wp--custom--cible);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
}

/* Le premier parcours secondaire ouvre un intervalle : c'est la
   césure entre la navigation principale et le reste. */
.ffdp-nav .is-menu-open.is-menu-open .ffdp-nav__secondaire:first-of-type {
	margin-block-start: var(--wp--preset--spacing--40);
	border-block-start: 0;
}

/* La billetterie du panneau : pleine largeur, alignée sur la marge
   des entrées, posée juste sous la liste. */
.ffdp-nav .is-menu-open.is-menu-open .ffdp-nav__billetterie-mobile {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
}

.ffdp-nav .is-menu-open.is-menu-open .ffdp-nav__billetterie-mobile .wp-block-button {
	width: 100%;
}

.ffdp-nav .is-menu-open.is-menu-open .ffdp-nav__billetterie-mobile .wp-block-button__link {
	box-sizing: border-box;
	width: 100%;
	justify-content: center;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--bleu);
}

.ffdp-nav .is-menu-open.is-menu-open .ffdp-nav__reseaux {
	box-sizing: border-box;
	width: 100%;
	padding-inline: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

/* =========================================================
   L'entrée de la page lue

   Posée par le filtre de functions.php, qui ajoute
   aria-current="page" et la classe .ffdp-nav__actif. Le cœur ne
   le fait pas : il ne marque que les liens de type page, et les
   six entrées de l'en-tête sont des liens personnalisés.

   BUDGET DE LARGEUR, à lire avant de toucher à ces règles.
   La barre n'a qu'une trentaine de pixels de marge, mesurés le
   2026-09-11 et documentés dans parts/header.html. Donc PAS de
   changement de graisse ni de capitalisation pour marquer
   l'entrée active : le libellé s'élargirait et la barre
   repasserait sur deux lignes. Le soulignement, lui, se pose
   sous le texte, hors du flux, et ne coûte aucun pixel.
   ========================================================= */

.ffdp-nav .ffdp-nav__actif {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--trait--moyen);
	text-underline-offset: 0.45em;
	text-decoration-skip-ink: none;
}

/* En desktop la barre est sur fond blanc : l'entrée lue passe au
   bleu de marque, le même que le survol, et le trait avec elle.
   Dans le panneau mobile le fond est bleu et le texte blanc : le
   trait suffit, une couleur de marque y serait illisible. */
@media (min-width: 1260px) {
	.ffdp-entete .ffdp-nav--desktop .ffdp-nav__actif {
		color: var(--wp--preset--color--bleu);
	}
}

/* Le filet du pied de page est un trait de 2 px, pas le 1 px par
   défaut du séparateur. */
.ffdp-pied__filet {
	border-top-width: var(--wp--custom--trait--moyen);
}

/* =========================================================
   10. Héros de l'accueil
   Composant Figma « Hero B — photo + voile » (29:107).
   ========================================================= */

/* Le titre du festival tient sur trois lignes, dont la dernière
   à l'échelle affiche. Un seul h1, pas trois blocs : le titre de
   la page reste un titre. */
.ffdp-hero__titre {
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-wrap: initial;
}

.ffdp-hero__mot {
	display: block;
	font-size: var(--wp--preset--font-size--affiche);
	letter-spacing: -0.015em;
}

/* Le filet reprend le trait sous le logotype : 8 px, aligné à
   gauche, sur un peu moins de la moitié de la largeur utile.

   Le sélecteur porte les deux classes exprès : la règle générique
   « .wp-block-separator.is-style-affiche » plus haut met max-width à none, et
   une seule classe ne suffisait pas à la battre. Le filet s'étendait donc sur
   toute la largeur du héros sans que personne le voie — le conteneur ne
   faisait que 704 px. Il a fallu aligner le héros sur la grille pour que le
   défaut se montre. */
.wp-block-separator.ffdp-hero__filet {
	max-width: 36.5625rem;
	margin-inline: 0 auto;
}

/* Sur le héros comme dans le bandeau, les exposants ne doivent pas
   décaler l'interligne des grandes tailles. */
.ffdp-hero sup,
.ffdp-bandeau sup {
	line-height: 0;
	font-size: 0.55em;
}

/* =========================================================
   11. Titres de section et filtres
   L'en-tête de section revient quatre fois sur l'accueil.
   ========================================================= */

/* Le lien de renvoi s'aligne sur la ligne de base du titre, pas
   sur son sommet : c'est ce qui le rattache au titre plutôt qu'au
   surtitre. */
.ffdp-titre-section {
	row-gap: var(--wp--preset--spacing--30);
}

.ffdp-lien-section {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.ffdp-lien-section a {
	color: var(--wp--preset--color--bleu-clair);
	text-decoration: none;
}

.ffdp-lien-section a:hover,
.ffdp-lien-section a:focus {
	color: var(--wp--preset--color--bleu);
	text-decoration: underline;
}

/* Filtre : la pastille de renvoi par compétition. Bordure en gris et
   non en filet — DESIGN.md §1 : filet ne borde pas un élément
   d'interface, 1,38 contre le blanc là où il en faut 3. Gris tient
   à 6,90. */
.wp-block-button.is-style-filtre > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--encre);
	border: var(--wp--custom--trait--moyen) solid var(--wp--preset--color--gris);
	padding-inline: var(--wp--preset--spacing--30);
}

.wp-block-button.is-style-filtre > .wp-block-button__link:hover,
.wp-block-button.is-style-filtre > .wp-block-button__link:focus,
.wp-block-button.is-style-filtre > .wp-block-button__link[aria-current] {
	background-color: var(--wp--preset--color--bleu);
	border-color: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
}

.is-style-section-bleu .wp-block-button.is-style-filtre > .wp-block-button__link,
.is-style-section-encre .wp-block-button.is-style-filtre > .wp-block-button__link {
	color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--blanc);
}

/* =========================================================
   12. Programme : colonnes de jour
   Une colonne par jour, en-tête sur aplat bleu, séances
   séparées par un filet. Le filet est ici un séparateur
   décoratif : c'est le seul emploi que DESIGN.md §1 lui
   reconnaît.
   ========================================================= */

/* PAS de height: 100% ici.

   Mesure du 2026-09-11 : avec les colonnes egalisees, les quatre
   boites faisaient 1247 px de haut pour un jeudi a 2 seances et
   un dimanche a 1. Soit environ 700 px de vide cerne d'un filet
   sous le dimanche, sur la page d'accueil. Une boite qui epouse
   son contenu dit la verite du programme : le jeudi est court,
   le samedi est long. */
.ffdp-jour {
	border: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
}

.ffdp-jour__entete {
	background: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
	padding: var(--wp--preset--spacing--20);
}

.ffdp-jour__nom {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0;
	color: inherit;
}

.ffdp-jour__date {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	margin: 0.25rem 0 0;
	color: inherit;
}

.ffdp-seance {
	padding: 1.25rem var(--wp--preset--spacing--20);
	border-bottom: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
}

/* La dernière séance ne porte pas de filet : la bordure de la
   colonne le fait déjà. */
.ffdp-jour > .ffdp-seance:last-child {
	border-bottom: 0;
}

.ffdp-seance > * {
	margin: 0;
}

.ffdp-seance__heure {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--wp--preset--color--bleu-clair);
	font-variant-numeric: tabular-nums;
}

.ffdp-seance__titre {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--encre);
	margin-top: 0.25rem;
}

.ffdp-seance__nature {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
	margin-top: 0.25rem;
}

/* État de réservation de la séance : Sur invitation, Sans réservation,
   ou le tarif si aucune URL de billetterie n'existe encore. */
.ffdp-seance__reservation {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.45;
	color: var(--wp--preset--color--bleu-clair);
	margin-top: 0.5rem;
}

/* Sur un aplat de marque, la colonne s'inverse. */
.is-style-section-bleu .ffdp-jour,
.is-style-section-encre .ffdp-jour {
	border-color: var(--wp--preset--color--blanc);
}

.is-style-section-bleu .ffdp-seance,
.is-style-section-encre .ffdp-seance {
	border-bottom-color: var(--wp--preset--color--blanc);
}

.is-style-section-bleu .ffdp-seance__titre,
.is-style-section-encre .ffdp-seance__titre,
.is-style-section-bleu .ffdp-seance__heure,
.is-style-section-encre .ffdp-seance__heure {
	color: var(--wp--preset--color--blanc);
}

.is-style-section-bleu .ffdp-seance__nature,
.is-style-section-encre .ffdp-seance__nature {
	color: var(--wp--preset--color--bleu-voile);
}

.is-style-section-bleu .ffdp-seance__reservation,
.is-style-section-encre .ffdp-seance__reservation {
	color: var(--wp--preset--color--blanc);
}

/* =========================================================
   13. Galerie créditée
   ========================================================= */

/* La planche-contact des archives utilise le bloc galerie cœur tel quel, en
   `columns-4` et `is-cropped`. Tentative abandonnée le 2026-09-04 : reprendre
   l'idiome de grille du thème (`display:grid` plus auto-fill) sur
   `.ffdp-galerie.is-cropped` réduisait les photos à des vignettes de 50 px.
   Le cœur pose `display:flex` et un calcul de largeur sur les enfants d'une
   galerie imbriquée ; un `width:auto` ne suffit pas à les faire remplir une
   piste de grille. La hauteur des rangées varie légèrement d'une rangée à
   l'autre, c'est le comportement du flex et c'est acceptable. Ne pas
   réessayer sans revoir la CSS du cœur en entier. */

.ffdp-galerie figcaption {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
	text-align: left;
	background: none;
	padding: 0.75rem 0 0;
	position: static;
}

/* =========================================================
   14. Bandeau de titre des pages secondaires
   ========================================================= */

/* Le chapô ne suit pas la largeur élargie : au-delà, une ligne de
   26 px devient illisible. 860 px sur la maquette.
   margin-inline explicite : le bandeau n'est plus en disposition
   contrainte, mais une règle de WordPress peut encore centrer les
   blocs plafonnés. La maquette aligne tout à gauche. */
.ffdp-bandeau-titre .ffdp-chapo {
	max-width: 53.75rem;
	margin-inline: 0 auto;
}

/* Le bandeau et le héros alignent leurs lignes sur le même bord gauche :
   surtitre, titre, chapô. C'est le « items-start » des maquettes, et c'est
   la disposition contrainte de WordPress qui les centrait. Le corps de la
   fiche, lui, reste contraint : un synopsis ne se lit pas sur 1248 px. */
.ffdp-bandeau-titre :is(p, h1, h2),
.ffdp-hero :is(p, h1, h2) {
	margin-inline: 0;
	text-align: left;
}

/* Le titre de la fiche film est un bloc Titre de contenu et non un titre
   écrit : il faut le viser explicitement. */
.ffdp-bandeau-titre .wp-block-post-title {
	margin-inline: 0;
	max-width: none;
	text-align: left;
}

/* Variante claire : le bandeau de la fiche film est sur blanc, titre en bleu
   Festival et repère en bleu du logotype. Même composant, autre contexte. */
.ffdp-bandeau-titre--clair .wp-block-post-title {
	color: var(--wp--preset--color--bleu);
}

/* =========================================================
   15. Le programme, page détaillée
   Reconstruit le 2026-09-03 depuis le cadre Figma « Le programme ·
   Desktop 1440 » (node 49:322) : quatre colonnes par ligne, heure,
   détail, salle, état de réservation. Classes propres à cette page,
   distinctes de .ffdp-jour / .ffdp-seance qui appartiennent à la
   vignette de l'accueil (section-programme.php), une mise en page
   différente sur les mêmes données.
   ========================================================= */

.ffdp-programme-entete {
	background-color: var(--wp--preset--color--bleu);
	padding: 1.25rem var(--wp--preset--spacing--30);
}

.ffdp-programme-entete__titre {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 0.98;
	text-transform: uppercase;
	color: var(--wp--preset--color--blanc);
	margin: 0;
}

.ffdp-programme-liste {
	border-top: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
}

/* Un jour annonce mais pas encore programme : une mention pleine largeur,
   pas une ligne de seance. Voir patterns/page-programme.php. */
.ffdp-programme-attente {
	padding: var(--wp--preset--spacing--30) 0;
	margin: 0;
	color: var(--wp--preset--color--encre);
	opacity: 0.7;
}

.ffdp-programme-ligne {
	display: grid;
	grid-template-columns: 7rem 1fr 6rem 13rem;
	gap: 2rem;
	align-items: center;
	padding: 1.5rem var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
}

.ffdp-programme-ligne > * {
	margin: 0;
}

.ffdp-programme-heure {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-clair);
	font-variant-numeric: tabular-nums;
}

.ffdp-programme-detail > * {
	margin: 0;
}

.ffdp-programme-titre {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
}

/* =========================================================
   LE TITRE D'UNE SEANCE EST UN LIEN VERS SA FICHE

   Posé le 2026-09-11. Le générateur enveloppe les treize titres
   de films, le chemin réel étant résolu à l'écriture par
   fb-maj-programme-2026.php.

   Le lien global du thème est bleu clair et souligné. Appliqué
   tel quel, il repeindrait les treize titres en couleur
   secondaire : le titre cesserait d'être la tête de ligne et la
   page ressemblerait à une liste de liens. On garde donc l'encre
   et on ne prend du lien que le soulignement, en trait fin, qui
   suffit à dire que la ligne mène quelque part. Le bleu arrive au
   survol et au focus.

   Vaut pour les deux mises en page : la ligne de /programme/ et
   la colonne de jour de l'accueil. La masterclass, qui portait
   déjà son propre lien, suit la même règle.
   ========================================================= */

.ffdp-programme-titre a,
.ffdp-seance__titre a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--trait--fin);
	text-underline-offset: 0.2em;
	transition: color var(--wp--custom--duree--rapide) ease,
		text-decoration-color var(--wp--custom--duree--rapide) ease;
}

.ffdp-programme-titre a:hover,
.ffdp-programme-titre a:focus-visible,
.ffdp-seance__titre a:hover,
.ffdp-seance__titre a:focus-visible {
	color: var(--wp--preset--color--bleu);
	text-decoration-thickness: var(--wp--custom--trait--moyen);
}

.ffdp-programme-nature {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
}

.ffdp-programme-salle {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
}

.ffdp-programme-action {
	display: flex;
	justify-content: flex-end;
}

p.ffdp-programme-action {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
	text-align: right;
}

@media (max-width: 34rem) {
	.ffdp-programme-ligne {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.ffdp-programme-action,
	div.ffdp-programme-action {
		justify-content: flex-start;
	}

	p.ffdp-programme-action {
		text-align: left;
	}
}

/* La frise des archives : l'affiche du lauréat, bornée en mobile.
   Sous 40 rem les colonnes de la bande s'empilent et l'affiche prendrait les
   390 px de large, donc 585 px de haut. Trois éditions faisaient 1 800 px
   d'affiches à défiler avant d'atteindre la troisième : une frise se parcourt,
   elle ne se contemple pas. */
@media (max-width: 40rem) {
	.ffdp-frise__affiche {
		max-width: 9rem;
	}
}

/* =========================================================
   16. Mention spéciale du palmarès
   Une ligne, pas une carte : la mention accompagne un prix,
   elle ne se met pas au même rang que le lauréat.
   ========================================================= */

.ffdp-mention {
	display: grid;
	grid-template-columns: 5rem minmax(8rem, 14rem) 1fr auto;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding: var(--wp--preset--spacing--20);
	border: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
}

.ffdp-mention > * {
	margin: 0;
}

.ffdp-mention__media img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: var(--wp--preset--color--encre);
}

.ffdp-mention__label {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--gris);
}

.ffdp-mention__titre {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
}

.ffdp-mention__attribution {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
	text-align: right;
}

/* Sous 40 rem, les quatre colonnes de la mention ne tiennent pas : 5 rem plus
   8 rem plus les gouttières forcent la page à plus de 380 px et la font
   déborder à l'horizontale, ce qui rognait aussi le bouton Billetterie de
   l'en-tête. La vignette garde sa colonne, les trois textes s'empilent dans la
   seconde. Deux pistes déclarées explicitement, pas une seule : voir le piège
   n°8 des pages intérieures, une grille à une piste avec plus de deux enfants
   ne s'empile pas de façon fiable. */
@media (max-width: 40rem) {
	.ffdp-mention {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
		align-items: start;
	}

	.ffdp-mention__media {
		grid-area: 1 / 1 / 4 / 2;
	}

	.ffdp-mention__label,
	.ffdp-mention__titre,
	.ffdp-mention__attribution {
		grid-column: 2;
		text-align: left;
	}
}

@media (max-width: 48rem) {
	.ffdp-mention {
		grid-template-columns: 4rem 1fr;
		align-items: start;
	}
	.ffdp-mention__label { grid-column: 2; }
	.ffdp-mention__titre { grid-column: 2; }
	.ffdp-mention__attribution { grid-column: 2; text-align: left; }
}

/* =========================================================
   17. Président du festival
   Une carte n'a pas de place pour une biographie : le
   président passe en deux colonnes. C'est une boucle de
   requête d'une personne — le modèle de contenu rend une
   liste, qu'on dépouille comme les grilles.
   ========================================================= */

.wp-block-post-template.ffdp-president {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ffdp-president > li {
	display: block;
}

.ffdp-president .ffdp-carte__media img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	background: var(--wp--preset--color--encre);
}

/* La colonne de texte : les blocs se suivent d'un cran, sans les marges
   par défaut de l'éditeur, et le paragraphe de biographie garde la mesure —
   une biographie ne se lit pas sur 1248 px. */
.ffdp-president .wp-block-column > * {
	margin-block: 0;
}

.ffdp-president .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ffdp-president .wp-block-post-content {
	max-width: var(--wp--custom--mesure);
}

/* =========================================================
   18. Fiche film
   Le gabarit single-fb_film.html se remplit par les
   liaisons de blocs, source festibaule/champ. Les lignes de
   générique vides sont retirées côté serveur.
   ========================================================= */

.ffdp-ariane p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.ffdp-ariane a {
	color: var(--wp--preset--color--bleu-clair);
	text-decoration: none;
}

.ffdp-ariane a:hover,
.ffdp-ariane a:focus {
	text-decoration: underline;
}

.ffdp-ariane__separateur,
.ffdp-ariane__actuel {
	color: var(--wp--preset--color--gris);
}

/* Le repère de la fiche reprend celui de la carte, en bleu du logotype :
   sur fond blanc il porte la mention sans concurrencer le titre. */
.ffdp-fiche__repere {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu-clair);
}

.ffdp-fiche__attribution {
	margin: 0;
	color: var(--wp--preset--color--encre);
}

/* Le visuel de la fiche n'est pas rogné au carré : c'est un photogramme. */
.ffdp-fiche__visuel .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--encre);
}

.ffdp-fiche__credit {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
}

/* --- générique : étiquette à gauche, valeur à droite --- */

.ffdp-generique__ligne {
	display: grid;
	grid-template-columns: 12.5rem 1fr;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--20);
	border-top: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
}

.ffdp-generique__ligne > * {
	margin: 0;
}

.ffdp-generique__label {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

.ffdp-generique__valeur {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--encre);
	/* L'interprétation est saisie un nom par ligne ; on garde les retours
	   sans forcer la casse ni la ponctuation. */
	white-space: pre-line;
}

/* La bande-annonce est une valeur de générique, pas un appel à l'action :
   le bouton se dépouille de sa boîte et se lit comme un lien. */
.ffdp-generique__lien {
	gap: 0;
}

.ffdp-generique__lien .wp-block-button__link {
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	color: var(--wp--preset--color--bleu-clair);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: none;
	text-decoration: underline;
	white-space: normal;
}

.ffdp-generique__lien .wp-block-button__link:hover,
.ffdp-generique__lien .wp-block-button__link:focus {
	background: none;
	color: var(--wp--preset--color--bleu);
}

@media (max-width: 40rem) {
	.ffdp-generique__ligne {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}
}

/* =========================================================
   19. Cartes en boucle de requête
   La carte liée est la même que la carte écrite : mêmes
   classes, même CSS. Seuls les blocs cœur diffèrent
   (post-title, post-featured-image).
   ========================================================= */

/* Le titre de la carte devient un bloc Titre de contenu : il porte déjà
   ffdp-carte__titre, mais WordPress l'enveloppe d'un lien qu'il faut
   remettre au bon endroit. */
.ffdp-carte__titre.wp-block-post-title {
	margin: 0;
}

/*
 * Les cartes de la sélection lisent le champ Affiche par une liaison, donc un
 * bloc Image et non le bloc Image mise en avant (2026-09-07). Même traitement :
 * le bloc remplit le cadre du visuel, il ne le pousse pas.
 */
.ffdp-carte .ffdp-carte__media .ffdp-carte__affiche {
	margin: 0;
	height: 100%;
}

.ffdp-carte .ffdp-carte__media .ffdp-carte__affiche img {
	width: 100%;
	height: 100%;
	/*
	 * 2026-09-11 : REMPLISSAGE POUR TOUT LE MONDE, affiches comprises.
	 *
	 * Demande de la cliente du 11 septembre, arbitrée par Cédric : « il faut
	 * vraiment recadrer les photos, certaines laissent les espaces bleus
	 * d'autres pas, ce n'est pas harmonisé, les légendes ne sont pas toujours
	 * sur la photo mais dans l'espace laissé bleu ». Le mélange de contenu et
	 * de rempli était effectivement irrégulier d'une carte à l'autre.
	 *
	 * Ce que ça coûte, et c'était l'argument du 7 septembre : une affiche va
	 * de 0,67 à 0,80 de ratio, le cadre est en 0,80, donc une affiche étroite
	 * perd jusqu'à 8 % de sa hauteur, moitié en haut moitié en bas. Les
	 * lauriers de festival et le bloc de crédits d'une affiche sont
	 * précisément là. Vérifié sur rendu avant de garder la règle.
	 *
	 * La classe is-repli, posée au rendu par le plugin quand le champ Affiche
	 * est vide, n'a plus d'effet sur object-fit : elle est conservée parce
	 * qu'elle reste le seul moyen de distinguer affiche et photogramme au
	 * rendu, et qu'une règle future peut en avoir besoin.
	 */
	object-fit: cover;
}

/* L'image mise en avant remplace le bloc Image dans le cadre du visuel. */
.ffdp-carte .ffdp-carte__media .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.ffdp-carte .ffdp-carte__media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Une grille vide ne laisse pas un trou : le message le dit. */
.ffdp-requete-vide {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: var(--wp--custom--trait--fin) dashed var(--wp--preset--color--gris);
	color: var(--wp--preset--color--gris);
	text-align: center;
}

/* =========================================================
   20. Formulaire de contact
   Gabarit Figma « Contact · Desktop 1440 », node 56:401.
   Contact Form 7 rend le formulaire ; la mise en forme est ici,
   l'extension n'apporte aucun style de son côté.
   ========================================================= */

/* La colonne, c'est le `form` rendu par l'extension, pas le groupe qui
   l'entoure : celui-ci n'a qu'un seul enfant, le conteneur de l'extension,
   donc un `gap` posé dessus ne sépare rien. Les champs se touchaient. */
.ffdp-formulaire .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* Les champs cachés de l'extension comptent comme un enfant de la colonne et
   ajouteraient une gouttière fantôme en tête de formulaire.
   ATTENTION : ne PAS y ajouter `.screen-reader-response`. C'est la zone
   d'annonce en direct des erreurs pour les lecteurs d'écran ; `display:none`
   la retirerait de l'arbre d'accessibilité et le formulaire n'annoncerait
   plus rien. L'extension la sort déjà du flux en absolu, elle ne crée donc
   aucune gouttière. */
.ffdp-formulaire .hidden-fields-container {
	display: none;
}

/* Deux champs par ligne au-delà de 32 rem, un seul en dessous.
   `auto-fit` plutôt qu'une media query : la bascule suit la largeur réelle
   de la colonne, qui n'est pas celle de la fenêtre puisque le formulaire
   partage la section avec la colonne latérale. */
.ffdp-formulaire__ligne {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.ffdp-formulaire__champ {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
}

/* Contact Form 7 passe son gabarit dans wpautop : chaque libellé et son
   champ se retrouvent enveloppés dans un `<p>` qu'on n'a pas écrit. Sans
   cette règle, la colonne flex ne voit qu'un seul enfant, son `gap` ne
   s'applique nulle part, et c'est la marge du paragraphe qui espace, donc
   inégalement d'un champ à l'autre. Visible seulement en mobile, quand les
   deux champs d'une ligne s'empilent. Le paragraphe reprend le rôle de la
   colonne au lieu d'être combattu. */
.ffdp-formulaire__champ > p {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
}

/* Le conteneur que l'extension pose autour de chaque champ est un `span` :
   en ligne, il ne transmet pas la largeur au champ qu'il contient. */
.ffdp-formulaire .wpcf7-form-control-wrap {
	display: block;
}

.ffdp-formulaire label {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
}

/* L'astérisque des champs obligatoires reprend la couleur des données
   manquantes : c'est la même idée, « il manque quelque chose ici ». */
.ffdp-formulaire label .obligatoire {
	color: var(--wp--preset--color--brique);
}

.ffdp-formulaire :is(input, textarea, select),
.ffdp-formulaire .wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
}

.ffdp-formulaire textarea {
	min-height: 10rem;
	resize: vertical;
}

.ffdp-formulaire ::placeholder {
	color: var(--wp--preset--color--gris);
	opacity: 1;
}

/* Le bouton d'envoi n'est pas un bloc Bouton : c'est un input rendu par
   l'extension. On lui repose les règles du bouton du thème plutôt que d'en
   inventer un second. */
.ffdp-formulaire input[type="submit"] {
	min-height: var(--wp--custom--cible);
	padding: 1rem 1.75rem;
	border: var(--wp--custom--trait--moyen) solid var(--wp--preset--color--bleu);
	background: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	align-self: flex-start;
	width: auto;
	transition: background var(--wp--custom--duree--normale) ease,
		color var(--wp--custom--duree--normale) ease;
}

.ffdp-formulaire input[type="submit"]:hover,
.ffdp-formulaire input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--bleu);
}

/* Les messages de l'extension : erreurs de champ en brique, message général
   encadré. Sans ces règles ils sortent en rouge navigateur, hors charte. */
.ffdp-formulaire .wpcf7-not-valid-tip {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--brique);
}

.ffdp-formulaire :is(input, textarea, select).wpcf7-not-valid {
	border-color: var(--wp--preset--color--brique);
}

.ffdp-formulaire .wpcf7-response-output {
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	border: var(--wp--custom--trait--moyen) solid var(--wp--preset--color--filet);
	font-size: var(--wp--preset--font-size--small);
}

.ffdp-formulaire form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--bleu);
	color: var(--wp--preset--color--bleu);
}

.ffdp-formulaire form:is(.invalid, .failed, .aborted) .wpcf7-response-output {
	border-color: var(--wp--preset--color--brique);
	color: var(--wp--preset--color--brique);
}

/* La colonne latérale : un libellé gris au-dessus de sa valeur, séparés par
   un filet. Trois fois la même chose, d'où une classe et non trois blocs
   réglés à la main. */
.ffdp-fiche__ligne {
	border-top: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
	padding-top: 0.75rem;
}

.ffdp-fiche__libelle {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--gris);
	margin: 0 0 0.25rem;
}

.ffdp-fiche__valeur {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--encre);
	margin: 0;
}

.ffdp-fiche__valeur.est-manquant {
	color: var(--wp--preset--color--brique);
}


/* =========================================================
   14. Pied de page
   Composant Figma « Pied de page » (132:670).
   Quatre colonnes de navigation, un filet, puis le copyright
   et les réseaux sur une même ligne.
   ========================================================= */

/* Sous 782 px le cœur empile les colonnes une par une. Quatre
   colonnes de liens empilées font un pied de page interminable
   sur un téléphone : on les remet par deux. */
@media (max-width: 781px) {
	.ffdp-pied__colonnes.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - 1.25rem) !important;
		flex-grow: 0;
	}
}

/* Le corps de texte du site (« Mention », 13 a 15 px fluide) est
   pense pour de la lecture ; pose sur quatre colonnes de liens et
   des intitules en gras capitales, il alourdit le pied de page.
   On fixe des tailles propres au pied de page, sous ce plancher,
   pour une hierarchie fine texte courant/copyright/reseaux. */
.ffdp-pied__colonnes .is-style-surtitre {
	font-size: 0.75rem;
}

/* La cible tactile de 44 px vaut pour la navigation principale, où
   chaque entrée est une destination majeure. Dans un pied de page
   dense elle porte le pas entre deux liens à 52 px, sans rapport
   avec la maquette. On descend à 32 px : au-dessus du minimum de
   24 px exigé par WCAG 2.5.8 niveau AA, et les liens gardent leur
   espacement de 8 px, donc ils ne se touchent pas. */
.ffdp-pied__menu .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	min-height: 32px;
	line-height: 1.55;
}

/* Un menu de pied de page n'est pas une barre de navigation : pas
   d'état survolé souligné qui fasse sauter la ligne. */
.ffdp-pied__menu .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Le bas de page : copyright à gauche, réseaux à droite, et les deux
   l'un sous l'autre quand la ligne ne tient plus. */
.ffdp-pied__bas {
	row-gap: 1rem;
}

.ffdp-pied__bas > * {
	margin-block: 0;
}

.ffdp-pied__bas p {
	font-size: 0.75rem;
}

/* Les réseaux tiennent le registre des mentions : petites capitales
   espacées. La maquette les pose en IBM Plex Mono ; le système ne
   compte qu'une famille, Archivo, et une seconde police pour trois
   mots ne se justifie pas. L'interlettrage porte le même signal. */
.ffdp-pied__reseaux .wp-block-navigation-item__content {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	min-height: 32px;
	line-height: 1.5;
}

/* =========================================================
   13. En-tête collant, ancres, et mouvement

   Posé le 2026-09-11. Le site n'avait que trois transitions
   pour 1880 lignes de feuille et aucun JavaScript.

   La règle tenue ici : le mouvement dit un état ou une entrée,
   il ne décore jamais. UNE seule entrée orchestrée, le héros.
   Pas de fondu-montée sur chaque section au défilement : c'est
   le réflexe qu'on voit partout, et sur un site consulté vite
   pour trouver un horaire, il ne fait que retarder la lecture.

   Le bloc prefers-reduced-motion du §2 ramène toutes ces durées
   à 0,01 ms. Aucune animation ici ne conditionne l'affichage
   d'un contenu : chacune part d'un état décalé et finit sur
   l'état normal, donc sans animation la page est correcte.
   ========================================================= */

html {
	scroll-behavior: smooth;
}

/* TOUTE CIBLE D'ANCRE SE POSE SOUS L'EN-TÊTE.

   Il n'y avait aucun scroll-margin sur le site : une ancre
   collait le titre visé au bord haut de la fenêtre, et avec
   l'en-tête collant elle passerait carrément dessous. La hauteur
   réelle de l'en-tête est écrite par le script dans
   --ffdp-entete-h ; la valeur de repli couvre le cas sans
   JavaScript. */
:where([id]) {
	/* L'en-tete, PLUS la barre de filtres quand la page en a une. Une
	   cible qui tombe derriere la barre est une cible manquee, et la barre
	   existe justement pour sauter d'ancre en ancre. --ffdp-filtres-h vaut
	   0 sur les pages sans barre.

	   On se base sur la hauteur DEPLOYEE de l'en-tete, la plus grande :
	   elle reserve environ 80 px de trop pendant un saut, ou l'en-tete
	   finit resserre. C'est le sens prudent de l'erreur, un titre visible
	   trop bas plutot qu'un titre cache. */
	scroll-margin-top: calc(var(--ffdp-entete-h, 5.5rem) + var(--ffdp-filtres-h, 0px) + 1.5rem);
}

/* ---------------------------------------------- en-tête collant */

/* Sur /programme/, /selection/ et /jury/ on défile longtemps, et
   la Billetterie sortait de l'écran pour ne jamais revenir. C'est
   le geste que le public fait à deux jours de l'ouverture. */
/* C'EST L'ENVELOPPE DU BLOC QUI COLLE, PAS NOTRE EN-TETE.

   Mesure du 2026-09-11 : pose sur .ffdp-entete, position: sticky
   ne faisait rien du tout, sans erreur ni avertissement. Le bloc
   Partie de modele enveloppe notre <header> dans un second
   <header class="wp-block-template-part">, haut de 161 px, soit
   EXACTEMENT la hauteur de son contenu. Or un element collant ne
   se deplace que dans son parent : ici le parent n'offre aucune
   course, donc l'en-tete defilait comme avant.

   On colle donc l'enveloppe, et on garde l'habillage sur
   .ffdp-entete. Le selecteur passe par .wp-site-blocks pour ne
   viser que la partie de modele de premier niveau : celle du pied
   de page en est une aussi. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.ffdp-entete {
	transition: padding-block var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie),
		box-shadow var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie);
}

/* La classe est posée par le script dès que la page a défilé.
   L'en-tête se resserre au lieu de rester un bandeau épais. */
/* CE QUI FIXE LA HAUTEUR DE L'EN-TETE, mesure le 2026-09-12.

   Deploye, a 1440 px, il fait 161 px, composes de :

     padding          24 px en haut et en bas
     logotype        103 px, dont 80 px de dessin et 11,4 px de
                     zone de protection en haut et en bas
     navigation       44 px, la cible tactile d'une entree
     billetterie      51 px, soit 44 px de cible plus le padding

   La hauteur est donc commandee par le LOGOTYPE, pas par le
   padding. Reduire le padding seul ne rend presque rien.

   PIEGE PAYE : la premiere version posait padding-block sur cette
   classe, sans effet. La composition ecrit le padding en STYLE EN
   LIGNE, style="padding-top:var(--wp--preset--spacing--30)...",
   et un style en ligne bat toute classe, quel que soit son poids.
   Mesure du 12/09 : le padding restait a 24 px dans les deux
   etats, et seul le logotype se reduisait. D'ou le !important,
   qui est ici le seul moyen d'atteindre un style en ligne sans
   retirer le reglage de l'editeur.

   Cible resserree : 72 px en desktop, 68 px en mobile. Le plancher
   est la cible tactile de 44 px, on ne descend pas dessous. */
.ffdp-entete.est-condensee {
	padding-block: 0.75rem !important;
	box-shadow: 0 1px 0 var(--wp--preset--color--filet);
}

/* LE LOGOTYPE RESTE LE LOGOTYPE, MEME RESSERRE.

   Essai du 2026-09-12, annule le meme jour : le sceau carre
   remplacait le logotype a l'etat resserre, parce que j'avais
   suppose qu'a 48 px de haut la premiere ligne du logotype
   tomberait a 4 px et ne se lirait plus.

   Verifie sur un rendu a deux fois la resolution : c'est FAUX.
   A 48 px de haut, les trois lignes du logotype se lisent encore.
   Le sceau, lui, porte un anneau de texte fin qui devient une
   bouillie a 44 px. Le logotype reste donc en place aux deux
   etats, et l'en-tete ne porte qu'un seul logotype.

   Lecon : une taille de texte se mesure sur un rendu agrandi,
   elle ne se deduit pas d'un rapport de viewBox.

   Le second code court a ete retire de parts/header.html. Au
   passage, il avait fait repasser l'en-tete deploye sur deux
   lignes, a 252 px : le bloc Code court enveloppe chaque logotype
   dans son propre <p>, qui reste un element de la disposition
   flex meme vide, et l'ecart de 40 px qu'il ajoutait suffisait a
   depasser le budget de largeur. */

/* Le logotype se pilote par sa HAUTEUR a l'etat resserre, pas par
   sa largeur : c'est la hauteur qui commande la barre, et le
   dessin garde son rapport. La zone de protection tombe, elle
   n'a plus de sens dans une barre de 72 px.
   Regles conservees : elles servent de repli si les deux
   logotypes ne sont pas poses dans la composition. */
.ffdp-entete .festibaule-logo--principal {
	transition: width var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie),
		height var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie),
		padding var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie);
}

.ffdp-entete.est-condensee .festibaule-logo--principal {
	width: auto;
	height: 2.5rem;
	padding-block: 0;
}

/* Le §9 pose width: 100% sur le SVG : a hauteur pilotee, c'est la
   largeur qui doit suivre. */
.ffdp-entete.est-condensee .festibaule-logo--principal svg {
	height: 100%;
	width: auto;
}

/* La billetterie retombe sur sa cible tactile exacte, 44 px, au
   lieu des 51 px que lui donnait son padding. */
.ffdp-entete.est-condensee .ffdp-entete__billetterie .wp-block-button__link {
	padding-block: 0.5rem;
}

/* LE LOGOTYPE NE SE RESSERRE QU'EN DESKTOP.

   Mesure du 2026-09-11 : sans la requete de media, cette regle a
   trois classes battait la regle mobile a deux classes du §9, qui
   contracte le logotype a 34vw. Sur un telephone de 360 px, le
   logotype passait donc de 122 a 144 px DES QU'ON DEFILAIT, et la
   barre debordait de 11 px. Une regle d'etat qui casse une regle
   de largeur : c'est le genre de defaut qui n'apparait qu'apres
   le premier geste du visiteur. */
@media (min-width: 1260px) {
	.ffdp-entete.est-condensee .festibaule-logo--principal {
		width: auto;
		height: 3rem;
	}
}

/* Le panneau mobile du cœur se pose en fixed : l'en-tête ne doit
   pas lui passer devant. */
.ffdp-nav .wp-block-navigation__responsive-container.is-menu-open {
	z-index: 60;
}

/* ------------------------------------------- l'entrée du héros */

@keyframes ffdp-monte {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
}

@keyframes ffdp-trait {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
}

/* Les six éléments du héros se posent l'un après l'autre, et le
   filet se tire depuis la gauche. C'est le seul moment théâtral
   du site, il dure moins d'une seconde en tout. */
.ffdp-hero .wp-block-cover__inner-container > * {
	animation: ffdp-monte var(--wp--custom--duree--lente) var(--wp--custom--courbe--sortie) backwards;
}

.ffdp-hero .wp-block-cover__inner-container > :nth-child(1) { animation-delay: 40ms; }
.ffdp-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 120ms; }
.ffdp-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 220ms; }
.ffdp-hero .wp-block-cover__inner-container > :nth-child(4) { animation-delay: 300ms; }
.ffdp-hero .wp-block-cover__inner-container > :nth-child(5) { animation-delay: 360ms; }
.ffdp-hero .wp-block-cover__inner-container > :nth-child(6) { animation-delay: 420ms; }

.ffdp-hero .wp-block-cover__inner-container > .ffdp-hero__filet {
	animation-name: ffdp-trait;
	transform-origin: left center;
}

/* -------------------------------------- retour d'état, partout */

/* Un bouton doit s'enfoncer quand on appuie. Sous 100 ms le
   geste est perçu comme instantané. */
.wp-block-button__link,
.ffdp-formulaire input[type="submit"] {
	transition: background-color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie),
		color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie),
		border-color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie),
		transform var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie);
}

.wp-block-button__link:active,
.ffdp-formulaire input[type="submit"]:active {
	transform: scale(0.98);
}

/* La carte entière est cliquable : elle doit le dire avant le
   clic. L'image zoomait déjà, le cadre suit. */
.ffdp-carte--lien {
	transition: transform var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie),
		box-shadow var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie);
}

.ffdp-carte--lien:hover,
.ffdp-carte--lien:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.16);
}

/* La ligne de programme est une ligne de tableau qu'on parcourt
   à l'œil : un fond très pâle au survol tient le regard sur la
   bonne séance. */
.ffdp-programme-ligne {
	transition: background-color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie);
}

.ffdp-programme-ligne:hover {
	background-color: var(--wp--preset--color--gris-voile);
}

/* Les entrées de navigation et les liens de section changent de
   couleur, pas d'un coup sec. */
.ffdp-nav .wp-block-navigation-item__content,
.ffdp-lien-section a,
.ffdp-pied__menu .wp-block-navigation-item__content {
	transition: color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie),
		text-decoration-color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie);
}

/* ------------------------------- film précédent et film suivant */

/* Depuis une fiche film on ne pouvait que revenir en arrière. Ces
   deux liens ferment la sélection en boucle. Rendus par
   festibaule_liens_films_voisins() dans functions.php. */
.ffdp-voisins {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	align-items: stretch;
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: var(--wp--custom--trait--moyen) solid var(--wp--preset--color--filet);
}

.ffdp-voisins__lien {
	flex: 1 1 16rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-height: var(--wp--custom--cible);
	padding: var(--wp--preset--spacing--20);
	border: var(--wp--custom--trait--fin) solid var(--wp--preset--color--filet);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: border-color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie),
		background-color var(--wp--custom--duree--rapide) var(--wp--custom--courbe--sortie);
}

.ffdp-voisins__lien:hover,
.ffdp-voisins__lien:focus-visible {
	border-color: var(--wp--preset--color--bleu);
	background-color: var(--wp--preset--color--bleu-voile);
	color: var(--wp--preset--color--encre);
}

.ffdp-voisins__lien--suivant {
	text-align: right;
	align-items: flex-end;
}

.ffdp-voisins__sens {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bleu);
}

.ffdp-voisins__titre {
	font-family: var(--wp--preset--font-family--archivo-condense);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

@media (max-width: 599px) {
	.ffdp-voisins__lien--suivant {
		text-align: left;
		align-items: flex-start;
	}
}

/* =========================================================
   14. Un bouton ne déborde pas de sa colonne

   Mesuré le 2026-09-11 sur /infos-pratiques/ à 360 px : le bouton
   « Réserver sur cinegulfstream.fr » faisait 337 px dans une
   colonne de 312, et poussait le document 1 px au-delà de la
   fenêtre. Un bouton en inline-flex prend la largeur de son
   libellé, sans limite, et son texte ne revient donc jamais à la
   ligne. On lui pose une borne, et le libellé s'y plie.
   ========================================================= */

.wp-block-button__link {
	max-width: 100%;
	text-align: center;
	overflow-wrap: anywhere;
	/* Le §1 pose white-space: nowrap sur tous les boutons, pour que
	   les capitales interlettrees ne se coupent pas. Sur un libelle
	   long, dans une colonne etroite, c'est ce nowrap qui empeche le
	   retour a la ligne et fait deborder : max-width ne peut rien
	   contre lui, la largeur minimale du contenu reste celle de la
	   ligne entiere. On le leve ici, et on le garde la ou il compte,
	   sur la billetterie de l'en-tete, dont le libelle tient en un
	   mot et qui ne doit jamais se casser. */
	white-space: normal;
}

.ffdp-entete__billetterie .wp-block-button__link,
.ffdp-nav__billetterie-mobile .wp-block-button__link {
	white-space: nowrap;
}

/* =========================================================
   15. La barre de filtres de page, collante au retour

   Posée le 2026-09-13. Sur /jury/, /selection/ et /programme/,
   une rangée de boutons mène aux ancres de la page. Passé le
   premier écran, elle est perdue : il faut remonter tout en haut
   pour changer de section.

   COMPORTEMENT : elle est normale dans le flux en haut de page.
   Une fois dépassée, elle se colle sous l'en-tête, mais SEULEMENT
   quand le visiteur remonte. Tant qu'il descend, il lit, et la
   barre s'efface derrière l'en-tête. C'est le sens de la demande :
   une barre collante permanente mangerait 60 px de lecture à
   chaque écran sans jamais servir.

   PAS DE CLASSE DANS LE CONTENU. Le groupe qui porte les boutons
   n'a aucune classe propre, et il est écrit dans trois
   compositions plus trois pages en base. On le vise par :has()
   sur ses enfants directs, ce qui règle les trois pages d'un coup
   et marchera pour toute page de filtres à venir, archives
   comprises. Zéro écriture en base.

   LA GARDE :not(:has(> :not(.wp-block-buttons))) N'EST PAS
   FACULTATIVE. Bug du 13/09 sur l'accueil : la section « La
   selection 2026 » enferme dans UN MEME groupe son titre, sa
   rangee de boutons et la grille des treize films. Le :has() seul
   attrapait ce groupe entier, donc TOUTE la section devenait
   collante et partait en translation au defilement. La garde dit
   ce qu'on vise vraiment : un groupe DONT LE SEUL CONTENU est la
   rangee de filtres. Sur l'accueil les boutons sont un raccourci
   vers /selection/, pas une navigation de page : rien a coller.

   LECON : un selecteur structurel doit decrire ce que l'element
   EST, pas seulement ce qu'il CONTIENT. « Contient des filtres »
   attrape aussi tout ce qui les entoure.

   SANS JAVASCRIPT la barre reste simplement collée en permanence :
   c'est un repli correct, pas une page cassée.
   ========================================================= */

.wp-block-group:has(> .wp-block-buttons > .wp-block-button.is-style-filtre):not(:has(> :not(.wp-block-buttons))) {
	position: sticky;
	/* Sous l'en-tête, à sa hauteur COURANTE : 161 px déployé,
	   81 px resserré. Le script tient la variable à jour. La valeur
	   de repli couvre le cas sans JavaScript. */
	top: var(--ffdp-entete-h-courante, 10rem);
	z-index: 40;
	/* Le groupe est transparent : collé, le contenu défilerait au
	   travers. Il lui faut le fond de la page et un filet de pied,
	   comme l'en-tête resserré. */
	background-color: var(--wp--preset--color--blanc);
	transition: transform var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie),
		padding-block var(--wp--custom--duree--normale) var(--wp--custom--courbe--sortie);
}

/* Collée, elle se resserre et porte le filet. Le padding est en
   style en ligne dans la composition, d'où le !important : un
   style en ligne bat toute classe, piège déjà payé sur l'en-tête
   le 12/09. */
.wp-block-group.est-collee:has(> .wp-block-buttons > .wp-block-button.is-style-filtre):not(:has(> :not(.wp-block-buttons))) {
	padding-block: 0.6rem !important;
	box-shadow: 0 1px 0 var(--wp--preset--color--filet);
}

/* Le visiteur descend : la barre s'efface DERRIÈRE l'en-tête. On
   la translate de sa propre hauteur PLUS celle de l'en-tête,
   sinon une barre plus haute que l'en-tête dépasse encore. Sur
   /jury/ elle passe sur deux lignes, le cas est réel. */
.ffdp-descend .wp-block-group.est-collee:has(> .wp-block-buttons > .wp-block-button.is-style-filtre):not(:has(> :not(.wp-block-buttons))) {
	transform: translateY(calc(-100% - var(--ffdp-entete-h-courante, 10rem)));
	pointer-events: none;
}

/* JAMAIS masquée si elle a le focus. Un visiteur au clavier qui
   tabule dans les filtres ne doit pas voir disparaître l'élément
   qu'il est en train de parcourir. */
.ffdp-descend .wp-block-group.est-collee:focus-within:has(> .wp-block-buttons > .wp-block-button.is-style-filtre):not(:has(> :not(.wp-block-buttons))) {
	transform: none;
	pointer-events: auto;
}

/* COLLÉE ET ÉTROITE, LA BARRE DEVIENT UNE BANDE À FAIRE GLISSER.

   Mesure du 2026-09-13 sur /jury/, cinq entrées : collée, la barre
   empilée fait 297 px à 390 px de large. Avec l'en-tête, elle occupe
   369 px, soit 45 % de l'écran. Une barre censée aider à naviguer qui
   recouvre la moitié de ce qu'on lit ne sert plus à rien.

   Sur une seule ligne défilante elle retombe sous 60 px. C'est le
   comportement attendu d'une barre de filtres sur téléphone, et le
   site le fait déjà pour le bandeau partenaires sous 600 px : même
   geste, même convention.

   Seulement à l'état COLLÉ. En haut de page, dans le flux, la barre
   garde ses lignes multiples : la place ne manque pas et tout se lit
   d'un coup. */
@media (max-width: 1259.98px) {
	.wp-block-group.est-collee:has(> .wp-block-buttons > .wp-block-button.is-style-filtre):not(:has(> :not(.wp-block-buttons))) > .wp-block-buttons {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-block: 0.15rem;
	}

	.wp-block-group.est-collee:has(> .wp-block-buttons > .wp-block-button.is-style-filtre):not(:has(> :not(.wp-block-buttons))) > .wp-block-buttons::-webkit-scrollbar {
		display: none;
	}

	.wp-block-group.est-collee:has(> .wp-block-buttons > .wp-block-button.is-style-filtre):not(:has(> :not(.wp-block-buttons))) .wp-block-button {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* =========================================================
   16. BICHROMIE DES PORTRAITS
   Décision de Cédric du 2026-09-13, variante D de la planche
   de comparaison : encre vers blanc sur TOUS les portraits.

   LE DÉFAUT RÉEL N'ÉTAIT PAS LA COULEUR. Dans une même rangée,
   les fonds allaient du gris moyen au blanc pur en passant par
   le crème. Deux photos noir et blanc mal accordées jurent
   autant qu'une photo couleur. La bichromie ramène toute image
   à la même plage tonale, quelle que soit sa provenance.

   PORTÉE : les personnes, jamais les films. Les affiches et les
   photogrammes restent en couleur, la cliente a tranché le
   11/09. Les deux sélecteurs se complètent et ne se recouvrent
   pas tout à fait :
   - .ffdp-carte--personne : les cartes écrites en dur de
     /le-festival/, plus celles des grilles de /jury/ ;
   - li.fb_personne : la composition du président du festival,
     qui est un core/columns et ne porte pas la classe de carte.
   Mesuré le 13/09 : 31 images sur 31 sur /jury/, 15 sur 15 sur
   /le-festival/, 0 sur l'accueil et 0 sur /selection/.

   Le filtre SVG #fb-duo-encre est imprimé une fois par
   functions.php, sur wp_body_open.

   PAS D'EFFET AU SURVOL. Le « couleur au survol » est daté et
   coûte un repeint par image ; à quarante portraits sur une
   page, c'est un choix cher pour un gadget.

   PIÈGE : un filter crée un contexte d'empilement. Ne jamais
   poser cette règle sur un ancêtre de la barre collante, elle
   cesserait de coller.
   ========================================================= */

.ffdp-carte--personne .ffdp-carte__media img,
li.fb_personne .ffdp-carte__media img {
	filter: url(#fb-duo-encre);
}

/* Repli si le filtre SVG n'est pas résolu (document sans le SVG,
   rendu partiel, courrier). Une image en niveaux de gris vaut
   mieux qu'une image couleur isolée dans une grille. */
@supports not (filter: url(#fb-duo-encre)) {
	.ffdp-carte--personne .ffdp-carte__media img,
	li.fb_personne .ffdp-carte__media img {
		filter: grayscale(1) contrast(1.08) brightness(1.02);
	}
}