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

/* 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;
	justify-content: center;
	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.
   ========================================================= */

@media (max-width: 599px) {
	/* 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: 599px) {
	.ffdp-entete .ffdp-nav--desktop {
		display: none;
	}
}

@media (min-width: 600px) {
	.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);
}

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

.ffdp-jour {
	height: 100%;
	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);
}

.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%;
	/*
	 * Une vraie affiche est CONTENUE, jamais rognée : les affiches réelles
	 * vont de 0,67 à 0,80 et un remplissage couperait leur titre. Même règle
	 * que le palmarès. La classe is-repli est posée au rendu par le plugin
	 * quand le champ Affiche est vide, et rétablit le remplissage : un
	 * photogramme paysage contenu dans un cadre portrait ne serait qu'une
	 * bande étroite.
	 */
	object-fit: contain;
}

.ffdp-carte .ffdp-carte__media .ffdp-carte__affiche.is-repli img {
	object-fit: cover;
}

/*
 * Les bandes laissées par une affiche contenue prennent le fond de la carte,
 * pas l'aplat encre du cadre de visuel : une affiche flottant sur un
 * rectangle noir au milieu d'une carte bleue se verrait comme un défaut.
 */
.ffdp-carte .ffdp-carte__media:has(.ffdp-carte__affiche:not(.is-repli)) {
	background: transparent;
}

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