/*
Theme Name: Ollie Enfant - La Pistache Paris
Theme URI: https://lapistacheparis.com
Description: Surcouche du thème Ollie pour La Pistache Paris. Contient les règles structurelles de lisibilité (responsive) et servira de socle aux modèles de contenu. Les mises à jour d'Ollie ne l'effacent pas.
Author: La Pistache Paris
Template: ollie
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ollie-child
*/

/* =================================================================
   LA PISTACHE PARIS — RÈGLES STRUCTURELLES DE LISIBILITÉ
   =================================================================
   Ces règles s'appliquent à TOUT le site, y compris aux pages qui
   n'existent pas encore. Elles garantissent qu'aucun texte ne peut
   se chevaucher ni sortir de l'écran, quelle que soit la largeur.

   Écrites une fois, elles évitent d'avoir à régler le responsive
   bloc par bloc. Ne pas les supprimer : c'est le filet de sécurité.
   ================================================================= */


/* -----------------------------------------------------------------
   1. AUCUN DÉBORDEMENT HORIZONTAL
   -----------------------------------------------------------------
   Par défaut, une colonne refuse de devenir plus étroite que son
   mot le plus long : elle pousse alors la page vers la droite et
   tout se décale. « min-width: 0 » l'autorise à rétrécir, donc à
   passer à la ligne. C'est la règle qui manque dans la plupart des
   mises en page qui cassent sur mobile.
   ----------------------------------------------------------------- */

.wp-block-columns > .wp-block-column,
.wp-block-group.is-layout-flex > *,
.wp-block-group.is-layout-grid > *,
.wp-block-post-template > li,
.wp-block-query .wp-block-post {
	min-width: 0;
}

/* La page elle-même ne défile jamais latéralement.
   « clip » et non « hidden » : indispensable pour que l'en-tête
   collant, prévu ensuite, continue de fonctionner. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}

/* iOS et Android grossissent d'eux-mêmes le texte des blocs larges,
   surtout en mode paysage : une ligne pleine largeur peut devenir
   énorme à côté d'un texte en colonne étroite. On leur retire cette
   initiative ; c'est la typographie fluide du thème qui décide. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}


/* -----------------------------------------------------------------
   2. LES MOTS LONGS SE COUPENT AU LIEU DE SORTIR DE L'ÉCRAN
   -----------------------------------------------------------------
   Adresses, noms de lieux composés, liens collés : sur un téléphone
   étroit ils dépassaient. Ils passent maintenant à la ligne.
   ----------------------------------------------------------------- */

p, li, dd, dt, figcaption, blockquote, td, th,
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-post-excerpt__excerpt,
.wp-block-navigation-item__label {
	overflow-wrap: break-word;
}


/* -----------------------------------------------------------------
   3. IMAGES, LOGOS ET VIDÉOS NE DÉPASSENT JAMAIS LEUR COLONNE
   -----------------------------------------------------------------
   Le logo garde sa taille choisie sur grand écran, et se réduit tout
   seul sur téléphone au lieu de déborder.
   ----------------------------------------------------------------- */

img, svg, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
}

.wp-block-site-logo,
.wp-block-site-logo a,
.wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}


/* -----------------------------------------------------------------
   4. GARDE-FOU SUR L'INTERLIGNE
   -----------------------------------------------------------------
   Un interligne réglé en dessous de 1 dans l'éditeur fait
   littéralement se chevaucher les lignes de texte : c'était la
   panne du pied de page. Si une telle valeur est saisie par erreur,
   elle est ramenée à une valeur lisible. Les interlignes normaux
   du thème ne sont pas touchés.
   ----------------------------------------------------------------- */

:is(p, h1, h2, h3, h4, h5, h6, .wp-block-columns, .wp-block-group)[style*="line-height:0"],
:is(p, h1, h2, h3, h4, h5, h6, .wp-block-columns, .wp-block-group)[style*="line-height: 0"] {
	line-height: 1.5 !important;
}


/* -----------------------------------------------------------------
   5. LES CONTENUS LARGES DÉFILENT DANS LEUR CADRE
   -----------------------------------------------------------------
   Un tableau ou un bloc de code trop large glisse dans son propre
   cadre, au lieu de déformer toute la page.
   ----------------------------------------------------------------- */

.wp-block-table,
.wp-block-preformatted,
pre.wp-block-code {
	max-width: 100%;
	overflow-x: auto;
}


/* -----------------------------------------------------------------
   6. RECHERCHE : LA LOUPE SEULE
   -----------------------------------------------------------------
   Le champ de saisie n'apparaît qu'au clic sur la loupe et ne
   réserve aucune place tant qu'il est fermé. L'icône est centrée
   dans son bouton, pour s'aligner sur la ligne du menu.
   ----------------------------------------------------------------- */

.wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
	border: none;
	padding: 0;
	background: transparent;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--custom-principale-vert);
}


/* -----------------------------------------------------------------
   7. FORMULAIRE NEWSLETTER (Brevo)
   -----------------------------------------------------------------
   Brevo livre un champ pleine largeur avec le bouton en dessous.
   On le remet conforme à la maquette validée : champ et bouton
   côte à côte, largeur limitée, ensemble centré. Sur téléphone,
   le bouton repasse sous le champ.
   ----------------------------------------------------------------- */

/* Le code livré par Brevo pose « margin: 0 !important » sur son bloc
   racine, ce qui écrase la règle de centrage de WordPress : le bloc
   reste collé au bord gauche de la zone de contenu. Invisible tant que
   l'écran est plus étroit que cette zone, franc au-delà. On recentre. */
/* Le sélecteur est volontairement préfixé par « body » : le style de
   Brevo est injecté dans la page APRÈS cette feuille et porte lui aussi
   « !important ». À poids égal, c'est le dernier qui gagne — il faut
   donc être plus précis que lui, pas seulement aussi insistant. */
body .sib-form,
body #sib-form-container {
	margin-left: auto !important;
	margin-right: auto !important;
}

#sib-container {
	max-width: 420px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

#sib-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Premier bloc : le champ email, il occupe la place disponible */
#sib-form > div:first-of-type {
	flex: 1 1 210px;
	min-width: 0;
	padding: 0 !important;
	margin: 0 !important;
}

/* Deuxième bloc : le bouton, il garde sa taille */
#sib-form > div:nth-of-type(2) {
	flex: 0 0 auto;
	padding: 0 !important;
	margin: 0 !important;
}

#sib-form .input {
	width: 100%;
	box-sizing: border-box;
}

/* Le texte d'exemple est centré, comme tout le reste du pied de page */
#sib-container input.input,
#sib-container input.input::placeholder {
	text-align: center !important;
}

#sib-form .sib-form-block__button {
	white-space: nowrap;
	cursor: pointer;
}

#sib-form .entry__error {
	flex-basis: 100%;
}


/* Mentions légales et copyright : volontairement un cran en dessous
   des colonnes « Le média » et « Professionnels ». Taille fluide,
   donc elle suit la largeur de l'écran sans jamais devenir illisible. */
.pistache-mentions {
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem) !important;
	line-height: 1.7;
}


/* La cible du lien « Newsletter » doit s'arrêter SOUS l'en-tête
   collant, sinon celui-ci recouvre le titre à l'arrivée. */
#newsletter {
	scroll-margin-top: 180px;
}


/* -----------------------------------------------------------------
   7 bis. FORMULAIRE NEWSLETTER — LA VERSION MAISON
   -----------------------------------------------------------------
   Reprend trait pour trait la maquette validée du formulaire Brevo
   (champ et bouton côte à côte, 420 px, ensemble centré, bouton sous
   le champ sur téléphone), mais sans le moindre appel extérieur.
   Les valeurs viennent du site lui-même, pas de mémoire :
   vert #5c7a52, texte blanc, angles de 5 px, corps de 16 px.
   Le 16 px n'est pas décoratif : en dessous, Safari sur iPhone
   agrandit la page tout seul quand on touche le champ.
   ----------------------------------------------------------------- */

.pistache-infolettre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 420px;
	margin-inline: auto;
}

/* L'étiquette existe pour les lecteurs d'écran, sans occuper de place
   à l'œil : la maquette validée n'en montre pas. */
.pistache-infolettre__etiquette,
.pistache-infolettre__piege {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pistache-infolettre__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

/* Les 44 px ne sont pas décoratifs : c'est la taille minimale d'une
   cible confortable au doigt. Sans eux, la hauteur du champ suit la
   taille de police fluide du thème et tombe à 35 px sur téléphone —
   trop petit, et désaligné du bouton qui, lui, reste à 43 px. */
.pistache-infolettre__champ {
	flex: 1 1 210px;
	min-width: 0;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--custom-noir-encre);
	background: var(--wp--preset--color--custom-blanc);
	border: 1px solid var(--wp--preset--color--border-light, #e3e3f0);
	border-radius: 5px;
}

.pistache-infolettre__champ::placeholder {
	text-align: center;
	color: var(--wp--preset--color--custom-gris-texte);
	opacity: 1;
}

.pistache-infolettre__champ:focus-visible,
.pistache-infolettre__bouton:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-vert-fonc);
	outline-offset: 2px;
}

.pistache-infolettre__bouton {
	flex: 0 0 auto;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.7rem 1.2rem;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--wp--preset--color--custom-blanc);
	background: var(--wp--preset--color--custom-principale-vert);
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}

.pistache-infolettre__bouton:hover {
	background: var(--wp--preset--color--custom-vert-fonc);
}

.pistache-infolettre__mention {
	flex-basis: 100%;
	margin: 0.2rem 0 0;
	font-size: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
	line-height: 1.6;
	text-align: center;
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-infolettre__mention a {
	color: inherit;
	text-decoration: underline;
}

/* « Pour en savoir plus sur vos données, c’est ici. » (25 octobre 2026) :
   à la ligne dès 420 px de large, à la suite en dessous. Trois lignes au
   plus sur toutes les largeurs (demande de Stéphane) : police un peu
   réduite sous 420 px ; sous 375 px, la mention prend aussi 16 px de
   chaque marge plutôt qu'une police illisible. Mesuré avec
   outils/mention-lignes.mjs (12 formats et LARGEURS=320,…,440). */
@media (min-width: 420px) {
	.pistache-infolettre__plus {
		display: block;
	}
}

@media (max-width: 419px) {
	.pistache-infolettre__mention {
		font-size: 0.68rem;
	}
}

@media (max-width: 374px) {
	.pistache-infolettre__mention {
		font-size: 0.64rem;
		margin-inline: -16px;
		flex-basis: calc(100% + 32px);
	}
}

/* La réponse à une tentative d'inscription. Elle ne dit « c'est fait »
   que si Brevo l'a confirmé — jamais par optimisme. */
.pistache-infolettre__reponse {
	max-width: 420px;
	margin: 0 auto 0.8rem;
	padding: 0.7rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: center;
	border-radius: 5px;
}

.pistache-infolettre__reponse.est-succes {
	color: var(--wp--preset--color--custom-vert-fonc);
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
}

.pistache-infolettre__reponse.est-erreur {
	color: #7a2e2e;
	background: #fbeceb;
}

/* Sur téléphone, le bouton repasse sous le champ et prend toute
   la largeur : une cible confortable au pouce. */
@media (width <= 480px) {

	.pistache-infolettre__champ,
	.pistache-infolettre__bouton {
		flex: 1 1 100%;
	}
}

/* -----------------------------------------------------------------
   7 ter. LA PAGE DE DÉSINSCRIPTION
   -----------------------------------------------------------------
   Le bouton reprend le vert de la charte, comme le reste du site :
   se désinscrire ne doit pas être caché ni grisé, la loi veut que
   ce soit aussi simple que s'inscrire. Même hauteur de 44 px, pour
   la même raison qu'ailleurs : une cible confortable au doigt.
   ----------------------------------------------------------------- */

.pistache-desinscription {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	max-width: 420px;
	margin-inline: auto;
}

.pistache-desinscription__adresse {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: center;
	color: var(--wp--preset--color--custom-gris-texte);
}

/* Le champ n'apparaît que si l'on ne sait pas qui arrive : depuis le
   pied de page, personne ne nous a dit son adresse.
   L'étiquette « Votre adresse e-mail » faisait doublon à l'écran avec
   le texte d'exemple du champ (retirée le 22 septembre 2026, à la
   demande de Stéphane). Elle n'est PAS supprimée : elle reste dans la
   page pour les lecteurs d'écran, qui en ont besoin pour annoncer le
   champ. Même technique que le formulaire d'inscription. */
.pistache-desinscription__etiquette {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pistache-desinscription__champ {
	width: 100%;
	max-width: 320px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.6rem 0.9rem;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--custom-noir-encre);
	background: var(--wp--preset--color--custom-blanc);
	border: 1px solid var(--wp--preset--color--border-light, #e3e3f0);
	border-radius: 5px;
}

.pistache-desinscription__champ:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-vert-fonc);
	outline-offset: 2px;
}

/* Bouton volontairement discret : se désinscrire ne se célèbre pas.
   Il reste à 44 px de haut — la loi veut que partir soit aussi
   simple que s'inscrire, donc la cible doit rester confortable. */
.pistache-desinscription__bouton {
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.6rem 1.2rem;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--custom-blanc);
	background: var(--wp--preset--color--custom-principale-vert);
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}

.pistache-desinscription__bouton:hover {
	background: var(--wp--preset--color--custom-vert-fonc);
}

.pistache-desinscription__bouton:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-vert-fonc);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
   7 quater. LE FORMULAIRE DE CONTACT (« Nous écrire »)
   -----------------------------------------------------------------
   Mêmes codes que l'infolettre : vert de la charte, angles de 5 px,
   corps de 16 px (en dessous, Safari sur iPhone agrandit la page
   quand on touche le champ), cibles de 44 px au moins.
   Une différence voulue : le contour des champs est gris foncé et
   non gris très clair. Un champ doit se voir sur le fond blanc
   (contraste d'au moins 3 pour 1, règle d'accessibilité) — ici il
   est seul sur la page, sans bouton collé pour le signaler.
   ----------------------------------------------------------------- */

/* Pas de largeur propre : le formulaire prend celle de la colonne de
   texte de la page, et s'aligne sur elle (centré à 560 px, il était
   décalé de 90 px par rapport au texte — vu à l'essai). */
.pistache-contact {
	scroll-margin-top: 90px;
}

.pistache-contact__formulaire {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Le champ-piège : hors de la vue et du clavier, présent pour les robots. */
.pistache-contact__piege {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pistache-contact__consigne {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-contact__champ {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pistache-contact__etiquette {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--custom-noir-encre);
}

/* Sélecteur à trois classes : la règle d'Ollie pour les champs
   (input:not([type="submit"]):not([type="radio"])) pèse plus lourd
   qu'une classe seule, et imposait sa bordure très claire aux champs
   texte — vu à l'essai, le 23 septembre 2026. */
.pistache-contact .pistache-contact__champ .pistache-contact__saisie {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.65rem 0.9rem;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--custom-noir-encre);
	background: var(--wp--preset--color--custom-blanc);
	border: 1px solid var(--wp--preset--color--custom-gris-texte);
	border-radius: 5px;
}

.pistache-contact .pistache-contact__champ textarea.pistache-contact__saisie {
	min-height: 11rem;
	resize: vertical;
}

.pistache-contact__saisie:focus-visible,
.pistache-contact__bouton:focus-visible,
.pistache-contact a:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-vert-fonc);
	outline-offset: 2px;
}

.pistache-contact .pistache-contact__champ.est-en-erreur .pistache-contact__saisie {
	border: 2px solid #b3261e;
}

.pistache-contact__erreur {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #7a2e2e;
}

.pistache-contact__bouton {
	align-self: flex-start;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.7rem 1.6rem;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--custom-blanc);
	background: var(--wp--preset--color--custom-principale-vert);
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}

.pistache-contact__bouton:hover {
	background: var(--wp--preset--color--custom-vert-fonc);
}

.pistache-contact__mention {
	margin: 0;
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
	line-height: 1.6;
	color: var(--wp--preset--color--custom-gris-texte);
}

/* « Gratuit, sous réserve de validation par la rédaction. » sous le
   formulaire, quand on arrive par l'un des deux liens « Professionnels »
   du pied de page (10 octobre 2026). Elle s'efface si le visiteur choisit
   un autre objet. */
.pistache-contact__gratuit {
	margin: 1.1rem 0 0;
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
	line-height: 1.6;
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-contact:has(#pc-sujet option:checked:not([value="evenement"]):not([value="lieu"])) .pistache-contact__gratuit {
	display: none;
}

.pistache-contact__mention a,
.pistache-contact__reponse a,
.pistache-contact__encore a {
	color: inherit;
	text-decoration: underline;
}

/* La réponse : « parti » seulement si Brevo l'a accepté. */
.pistache-contact__reponse {
	margin: 0 0 1.1rem;
	padding: 0.8rem 1rem;
	font-size: 0.95rem;
	line-height: 1.55;
	border-radius: 5px;
}

.pistache-contact__reponse p {
	margin: 0;
}

.pistache-contact__reponse ul {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}

.pistache-contact__reponse.est-succes {
	color: var(--wp--preset--color--custom-vert-fonc);
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
}

.pistache-contact__reponse.est-erreur {
	color: #7a2e2e;
	background: #fbeceb;
}

.pistache-contact__encore {
	margin: 0;
	font-size: 0.95rem;
}

/* Sur téléphone, le bouton prend toute la largeur : une cible
   confortable au pouce. */
@media (width <= 480px) {

	.pistache-contact__bouton {
		align-self: stretch;
	}
}

/* L'adresse des mentions légales : le leurre glissé au milieu pour
   les robots n'est ni affiché, ni copié, ni lu à voix haute.
   « display: none » et non un masquage visuel : un texte seulement
   masqué à l'œil partirait dans un copier-coller. */
.pistache-courriel__leurre {
	display: none !important;
}

/* -----------------------------------------------------------------
   8. PIED DE PAGE — LES DEUX COLONNES SUR TÉLÉPHONE
   -----------------------------------------------------------------
   Sans limite de largeur, les deux colonnes s'étalent d'un bord à
   l'autre de l'écran et paraissent collées à gauche. On les resserre
   pour que le duo se lise comme un bloc centré.
   ----------------------------------------------------------------- */

/* Sur téléphone (23 sept. 2026) : UN LIEN PAR LIGNE, toujours.
   Les colonnes prennent la largeur de leur plus long lien, et le duo
   reste centré. Avant, elles faisaient 145 px chacune : les nouveaux
   liens « Annoncer un événement » et « Faire connaître votre lieu »
   (177 px) passaient sur deux lignes et se lisaient comme quatre liens. */
@media (width <= 600px) {

	footer .wp-block-columns.is-not-stacked-on-mobile {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		column-gap: 2.5rem;
		row-gap: 1.4rem;
		max-width: none;
		margin-inline: auto;
	}

	footer .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		width: auto;
		min-width: 0;
	}

	footer .wp-block-columns.is-not-stacked-on-mobile a {
		white-space: nowrap;
	}
}

/* En français, les deux colonnes restent côte à côte jusqu'à 340 px de
   large (25 octobre 2026 : elles s'empilaient sous 420 px, donc sur
   l'iPhone 17 Pro, 402 px, alors qu'elles y tiennent). Il leur faut
   116 + 156 px de liens, plus l'écart : sous 375 px, l'écart se
   resserre ; sous 360 px, la police baisse avec la largeur de l'écran
   (les classes de taille de WordPress imposent !important). Sous 340 px
   seulement, « Professionnels » passe sous « Le média », aligné sur lui.
   L'anglais, plus court, reste toujours côte à côte. Mesuré avec
   outils/pied-colonnes-mesure.mjs. */
@media (width < 375px) {

	html[lang^="fr"] footer .wp-block-columns.is-not-stacked-on-mobile {
		column-gap: 1.5rem;
	}
}

@media (340px <= width < 360px) {

	html[lang^="fr"] footer .wp-block-columns.is-not-stacked-on-mobile h4 {
		font-size: 3.9vw !important;
	}

	html[lang^="fr"] footer .wp-block-columns.is-not-stacked-on-mobile p {
		font-size: 3.6vw !important;
	}
}

@media (width < 340px) {

	html[lang^="fr"] footer .wp-block-columns.is-not-stacked-on-mobile {
		grid-template-columns: max-content;
	}
}

/* Le texte de présentation du média, sous le logo (23 sept. 2026) :
   petit, gris, centré, dans une colonne étroite — deux à trois lignes
   sur ordinateur, davantage sur téléphone. La largeur est comptée en
   caractères (ch) : elle suit la taille du texte, quelle que soit
   la taille d'écran. */
footer .pistache-presentation {
	max-width: 62ch;
	margin-inline: auto;
	line-height: 1.6;
	text-wrap: pretty;
}


/* =================================================================
   9. EN-TÊTE
   =================================================================
   Trois états, produits par une seule construction de blocs :

   - téléphone et tablette (≤ 781 px) : bande fine, 3 traits à
     gauche, logo centré, loupe à droite ;
   - ordinateur en haut de page : deux lignes (maquette validée) ;
   - ordinateur après défilement : une ligne fine, FR/EN à gauche,
     4 rubriques, logo au centre exact, 4 rubriques, loupe et
     réseaux sociaux à droite.

   Les deux demi-menus (« moitié gauche » et « moitié droite ») sont
   ce qui permet d'avoir exactement le même écart de chaque côté du
   logo. Le menu mobile est un troisième menu, complet.
   ================================================================= */

/* C'est le conteneur du modèle « En-tête » qui doit coller, pas le
   groupe intérieur : ce dernier fait exactement la hauteur de
   l'en-tête, il n'aurait aucune place pour se déplacer. */
.site-header,
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Barre réduite sur ordinateur : son cadre garde la hauteur qu'il avait
   (fixée par entete.js), pour que le contenu de la page ne bouge pas.
   La partie devenue vide du cadre est transparente et doit laisser
   passer les clics vers la page. */
.site-header.est-figee {
	pointer-events: none;
}

.site-header.est-figee .pistache-entete {
	pointer-events: auto;
}

.pistache-entete {
	position: relative;
	background: var(--wp--preset--color--custom-blanc);
}

/* La flèche de retour de la recherche ne sert qu'en version mobile */
.pistache-retour {
	display: none;
}

/* Éléments qui ne servent que dans certains états.
   Les sélecteurs sont préfixés par « .pistache-entete » pour passer
   devant la règle interne « body .is-layout-flex » de WordPress,
   qui sinon réaffiche ces blocs. */
.pistache-entete .pistache-logo-compact,
.pistache-entete .pistache-langue-compacte,
.pistache-entete .pistache-reseaux-compacts {
	display: none;
}

/* Le FR/EN et les réseaux rangés dans le menu mobile ne doivent
   jamais apparaître ailleurs que dans le tiroir. */
.pistache-menu-mobile .pistache-langue,
.pistache-menu-mobile .pistache-reseaux-menu {
	display: none;
}


/* ---------- TÉLÉPHONE ET TABLETTE : une seule bande fine ----------
   Seuil fixé à 1279 px depuis le 7 octobre 2026 (879 px avant).
   Demande de Stéphane : « à ce niveau, ça devrait passer en mode
   mobile ». Mesuré : la barre compacte passait sur deux lignes
   jusqu'à 1210 px (1227 px avec une barre de défilement Windows).
   À 1280 px elle garde 83 px d'avance (66 sous Windows). Sous
   1280 px : tablettes en paysage (iPad 1024 à 1194 px) et petits
   écrans. L'outil de mesure : outils/marge-entete.mjs.

   Deux cas déclenchent cet affichage :
   - un écran étroit (téléphone ou tablette en portrait) ;
   - un écran très bas (téléphone tenu à l'horizontale) : il est
     large, mais l'en-tête sur deux lignes y mangerait la moitié de
     la hauteur, et les rubriques n'ont pas la place de tenir sur
     une seule ligne autour du logo.
   ------------------------------------------------------------------ */

@media (width <= 1279px), (height <= 500px) {

	/* La ligne verte disparaît : son contenu passe dans le tiroir */
	.pistache-entete .pistache-entete__haut,
	.pistache-entete .pistache-menu-gauche,
	.pistache-entete .pistache-menu-droite {
		display: none;
	}

	.pistache-barre {
		gap: var(--wp--preset--spacing--small);
		min-height: 58px;
	}

	/* Les 3 traits, à gauche */
	.pistache-menu-mobile {
		order: 1;
		flex: 0 0 auto;
	}

	/* Le logo, au centre */
	.pistache-entete .pistache-logo-compact {
		display: block;
		order: 2;
		flex: 1 1 auto;
		text-align: center;
	}

	/* Le bloc du logo porte une largeur écrite en dur (220 px) ; c'est
	   elle qui prime, et cette règle ne fait que la borner sur les
	   écrans étroits. Sans les deux, le logo restait à 150 px. */
	.pistache-logo-compact img {
		max-width: min(220px, 54vw);
		width: auto;
		height: auto;
		margin-inline: auto;
	}

	/* La bande grandit avec le logo, sinon il touche les bords.
	   220 px de large font 64 px de haut : 72 px laissent 4 px
	   de respiration au-dessus et au-dessous. */
	.pistache-barre {
		min-height: 72px;
	}

	/* La loupe, à droite */
	.pistache-outils {
		order: 3;
		flex: 0 0 auto;
	}

	/* ----- Recherche ----- */

	/* 16 px en permanence, et pas seulement une fois le champ ouvert.
	   iOS lit la taille du champ à l'instant précis où il y met le
	   curseur : si elle est inférieure à 16 px à cet instant, il zoome
	   sur toute la page et n'en ressort plus. Or WordPress ouvre le
	   champ et y place le curseur avant que la règle « ouverte »
	   n'ait pu s'appliquer — d'où le zoom malgré la bonne valeur. */
	.pistache-recherche .wp-block-search__input {
		font-size: 16px !important;
	}

	.pistache-barre {
		position: relative;
	}

	.pistache-barre.pistache-recherche-ouverte .pistache-menu-mobile,
	.pistache-barre.pistache-recherche-ouverte .pistache-logo-compact {
		visibility: hidden;
	}

	.pistache-barre.pistache-recherche-ouverte .pistache-outils {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		gap: .5rem;
		background: var(--wp--preset--color--custom-blanc);
		z-index: 2;
	}

	.pistache-recherche-ouverte .pistache-recherche {
		flex: 1 1 auto;
		width: 100%;
	}

	.pistache-recherche-ouverte .pistache-recherche .wp-block-search__inside-wrapper {
		display: flex;
		align-items: center;
		gap: .4rem;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border-light);
	}

	.pistache-recherche-ouverte .pistache-recherche .wp-block-search__input {
		flex: 1 1 auto;
		width: 100% !important;
		min-width: 0;
		border: none;
		background: transparent;
		padding: .35rem .2rem;
	}

	/* La flèche de retour, tout à gauche */
	.pistache-retour {
		display: none;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: none;
		background: transparent;
		color: var(--wp--preset--color--custom-principale-vert);
		cursor: pointer;
	}

	.pistache-recherche-ouverte .pistache-retour {
		display: flex;
	}

	/* ----- Le tiroir ouvert ----- */

	.pistache-menu-mobile .wp-block-navigation__responsive-container-content {
		position: relative;
		padding-top: 3.4rem;
	}

	/* FR/EN en haut à gauche, réseaux sociaux en haut à droite */
	.pistache-menu-mobile .is-menu-open .pistache-langue {
		display: flex;
		align-items: center;
		position: absolute !important;
		top: 0;
		left: 0;
		margin: 0;
		min-height: 28px;
	}

	/* WordPress range les réseaux sociaux dans une SECONDE liste,
	   séparée de celle des rubriques. C'est cette liste qu'il faut
	   déplacer en haut à droite — déplacer l'élément seul ne sert à
	   rien, il resterait calé sur sa liste restée en bas. */
	.pistache-menu-mobile ul.wp-block-navigation__container:has(> li > .pistache-reseaux-menu) {
		position: absolute !important;
		top: 0;
		left: auto !important;
		/* on laisse la place à la croix de fermeture, à l'extrême droite */
		right: 3.4rem !important;
		width: auto !important;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
	}

	.pistache-menu-mobile .wp-block-navigation-item:has(> .pistache-reseaux-menu) {
		position: static;
		margin: 0;
		padding: 0;
	}

	.pistache-menu-mobile .is-menu-open .pistache-reseaux-menu {
		display: flex;
		align-items: center;
		min-height: 28px;
	}

	/* ----- Sous-menus repliés par défaut ----- */

	.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		display: none !important;
	}

	.is-menu-open .wp-block-navigation-item.has-child.pistache-sous-menu-ouvert > .wp-block-navigation__submenu-container {
		display: flex !important;
	}

	/* Une zone de clic confortable pour la flèche, et elle pivote */
	.is-menu-open .wp-block-navigation-submenu__toggle {
		padding: .55rem;
	}

	.is-menu-open .wp-block-navigation-submenu__toggle svg {
		transition: transform .2s ease;
		transform: rotate(0deg);
	}

	.is-menu-open .pistache-sous-menu-ouvert > .wp-block-navigation-submenu__toggle svg {
		transform: rotate(180deg);
	}
}


/* ---------- ORDINATEUR ---------- */

@media (width >= 1280px) and (height >= 501px) {

	.pistache-entete .pistache-menu-mobile {
		display: none;
	}

	.pistache-barre {
		gap: clamp(.4rem, 1.2vw, 1.2rem);
	}

	/* La ligne verte se replie au défilement */
	.pistache-entete__haut {
		overflow: hidden;
		max-height: 240px;
		opacity: 1;
		transition:
			max-height .3s ease,
			opacity .2s ease,
			padding-top .3s ease,
			padding-bottom .3s ease;
	}

	.pistache-entete.est-compacte .pistache-entete__haut {
		max-height: 0;
		opacity: 0;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* ----- La barre réduite -----
	   Trois colonnes « 1fr / logo / 1fr » : les deux colonnes
	   latérales étant strictement égales, le logo tombe au centre
	   exact, et les deux demi-menus, alignés vers l'intérieur, se
	   retrouvent à la même distance de lui. */
	/* Police resserrée d'un cran dans la barre réduite : c'est ce qui
	   libère la place nécessaire pour tenir sur une seule ligne. */
	.pistache-entete.est-compacte .pistache-menu-gauche,
	.pistache-entete.est-compacte .pistache-menu-droite {
		font-size: var(--wp--preset--font-size--x-small) !important;
	}

	/* Le bandeau qui porte la barre est déjà pleine largeur : c'est
	   LUI qui sert de repère au FR/EN et aux réseaux, pour qu'ils
	   filent aux bords de l'écran. La barre, elle, redevient neutre. */
	.pistache-entete.est-compacte .pistache-entete__bas {
		position: relative;
	}

	.pistache-entete.est-compacte .pistache-barre {
		position: static;
		display: grid;
		/* La barre réduite prend TOUTE la largeur de l'écran, pas la
		   largeur de lecture : le FR/EN et les réseaux filent aux
		   extrémités, et les rubriques récupèrent la place gagnée.
		   C'est ce qui permet de garder le logo visible bien plus bas
		   qu'avant — mesuré : tout tient jusqu'à 1210 px, contre
		   1366 px auparavant. */
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: clamp(.7rem, 1.4vw, 1.3rem);
		/* ⚠️ Sans cette ligne, WordPress la plafonnait à 1260 px (règle
		   « .is-layout-constrained > .alignwide ») : au-delà de 1320 px
		   les rubriques de gauche n'avaient que 5 px d'avance, et le menu
		   passait sur deux lignes à 1320 px avec une barre de défilement
		   Windows. Trouvé et corrigé le 7 octobre 2026 : rien ne bouge à
		   l'écran (les rubriques restent collées au logo, positions
		   mesurées identiques au pixel), seule l'avance augmente. */
		max-width: none;
		/* Place réservée à gauche pour le FR/EN, à droite pour la loupe
		   et les réseaux. Chaque pixel pris ici est un pixel en moins
		   pour les rubriques.

		   ⚠️ 96 px, et pas davantage. Mesuré le 3 septembre 2026 : les
		   quatre rubriques de gauche réclament 423 px. Avec 112 px de
		   marge intérieure elles n'en avaient que 423 — zéro pixel
		   d'avance — et le menu basculait sur deux lignes au moindre
		   agrandissement du logo. Avec 96 px elles disposent de
		   459 px, soit 36 px d'avance, et la pastille FR/EN (76 px de
		   large) garde 20 px de dégagement.
		   Avant de changer cette valeur ou la taille du logo :
		   remesurer la marge, pas seulement le nombre de lignes. */
		/* 64 px depuis le 7 octobre 2026 (92 avant). Cette marge sert à
		   contourner la pastille FR/EN, posée sur le bandeau. La barre
		   complète n'existe plus qu'à partir de 1320 px : la pastille y
		   est à 45 px de la première rubrique, 92 px réservaient donc
		   trop. Mesuré avec 64 px : plus jamais deux lignes, même avec
		   une barre de défilement Windows ; avant de toucher la pastille,
		   les rubriques ont encore 23 px d'avance à 1320 px (14 sous
		   Windows), 44 à 1366, 78 à 1440. Positions inchangées au pixel.

		   ⚠️ Chaque pixel ajouté ici est un pixel de moins pour les
		   rubriques. Voir les défauts A12 et S25 du journal. */
		padding-inline: 64px;
		min-height: 56px;
	}

	.pistache-entete.est-compacte .pistache-menu-gauche {
		grid-column: 1;
		justify-self: end;
	}

	.pistache-entete.est-compacte .pistache-logo-compact {
		display: block;
		grid-column: 2;
	}

	/* Les sous-menus déroulants ne doivent pas allonger la barre */
	.pistache-entete.est-compacte .pistache-barre .wp-block-navigation__submenu-container {
		position: absolute;
	}

	.pistache-entete.est-compacte .pistache-logo-compact img {
		max-width: 180px;
	}

	.pistache-entete.est-compacte .pistache-menu-droite {
		grid-column: 3;
		justify-self: start;
	}

	/* FR/EN à gauche, loupe et réseaux à droite, aux deux bouts */
	.pistache-entete.est-compacte .pistache-langue-compacte {
		display: flex;
		position: absolute;
		left: clamp(18px, 2.2vw, 42px);
		top: 50%;
		transform: translateY(-50%);
	}

	.pistache-entete.est-compacte .pistache-outils {
		position: absolute;
		right: clamp(18px, 2.2vw, 42px);
		top: 50%;
		transform: translateY(-50%);
	}

	.pistache-entete.est-compacte .pistache-reseaux-compacts {
		display: flex;
	}

	/* ----- Le poids visuel du côté droit -----
	   La pastille FR/EN, à gauche, occupe 29 px de haut. En face, la
	   loupe et les réseaux n'en faisaient que 24 et 16 : la barre
	   penchait à gauche. On les remonte au même niveau.
	   Les icônes de réseaux se dimensionnent par la taille de texte
	   de leur bloc — c'est ainsi que WordPress les construit. */
	.pistache-entete.est-compacte .pistache-reseaux-compacts {
		font-size: 20px;
	}

	.pistache-entete.est-compacte .pistache-outils .wp-block-search__button svg {
		width: 26px;
		height: 26px;
	}

	/* La loupe se rapproche du menu : elle vient se placer à
	   mi-chemin entre « Bons plans » et le premier réseau social,
	   au lieu d'être collée aux réseaux tout au bord. */
	/* La loupe est posée entre la dernière rubrique et les réseaux.
	   Elle se rapproche des réseaux quand l'écran rétrécit, sinon
	   elle finirait collée à « Bons plans » : mesuré, il ne restait
	   que 11 px de dégagement à 1300 px. */
	/* La loupe se pose juste après la dernière rubrique, et non près
	   des réseaux. Comme elle est ancrée à droite, il faut agrandir sa
	   marge à mesure que l'écran s'élargit : la formule suit l'écart
	   mesuré entre le menu et les réseaux (environ 0,47 × la largeur
	   de l'écran, moins 525 px). Le plancher de 16 px l'empêche de
	   venir toucher les réseaux sur les écrans étroits. */
	.pistache-entete.est-compacte .pistache-outils .pistache-recherche {
		margin-right: max(16px, calc(47vw - 571px));
	}


	/* ----- La recherche ouverte, sur ordinateur -----
	   Sans ces règles, le champ s'ouvrait PAR-DESSUS les rubriques :
	   les lettres du menu se lisaient à travers le champ. On reprend
	   le principe déjà retenu pour le mobile — le champ occupe toute
	   la barre, une flèche à gauche ramène en arrière — et on masque
	   le reste le temps de la recherche. */

	.pistache-barre.pistache-recherche-ouverte {
		position: relative;
	}

	.pistache-barre.pistache-recherche-ouverte > *:not(.pistache-outils) {
		visibility: hidden;
	}

	.pistache-barre.pistache-recherche-ouverte .pistache-outils {
		position: absolute;
		inset: 0;
		right: 0;
		top: 0;
		transform: none;
		display: flex;
		align-items: center;
		gap: .5rem;
		background: var(--wp--preset--color--custom-blanc);
		z-index: 3;
	}

	/* Dans la barre réduite, les réseaux sociaux et le FR/EN vivent
	   aussi dans les outils : ils cèdent la place au champ. */
	.pistache-barre.pistache-recherche-ouverte .pistache-outils > *:not(.pistache-recherche):not(.pistache-retour) {
		display: none;
	}

	.pistache-barre.pistache-recherche-ouverte .pistache-recherche {
		flex: 1 1 auto;
		width: 100%;
	}

	.pistache-barre.pistache-recherche-ouverte .wp-block-search__inside-wrapper {
		display: flex;
		align-items: center;
		gap: .4rem;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .12));
	}

	.pistache-barre.pistache-recherche-ouverte .wp-block-search__input {
		flex: 1 1 auto;
		width: 100% !important;
		min-width: 0;
		border: none;
		background: transparent;
		padding: .4rem .3rem;
	}

	.pistache-barre.pistache-recherche-ouverte .pistache-retour {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: none;
		background: transparent;
		color: var(--wp--preset--color--custom-principale-vert);
		cursor: pointer;
	}


	/* ----- Entre 1280 et 1319 px : la barre sans les réseaux -----
	   La barre complète (FR/EN, 4 rubriques, logo, 4 rubriques, loupe,
	   réseaux) ne tient qu'à partir de 1320 px. En dessous, on retire ce
	   qui reste accessible ailleurs, dans l'ordre voulu par Stéphane : les
	   RÉSEAUX d'abord (ligne verte et pied de page), puis le FR/EN, et le
	   LOGO en dernier. Jamais le menu, jamais la loupe.

	   Depuis le 7 octobre 2026, sous 1280 px l'en-tête passe en mode
	   mobile : seul ce palier reste (logo 140 px, FR/EN gardé). Mesuré :
	   83 px d'avance à 1280 px, 121 à 1319 (66 et 104 avec une barre de
	   défilement Windows).

	   ⚠️ La marge intérieure DOIT réserver la place de ce qui reste
	   posé aux bords : sans elle, le menu centré passe SOUS la loupe. */

	@media (width <= 1319px) {

		/* Sans les réseaux, la grille « 1fr auto 1fr » n'a plus de
		   raison d'être — et elle nuisait : elle donnait la même
		   largeur aux deux menus alors que celui de gauche est plus
		   long de 100 px. En flux libre, chacun prend ce qu'il faut,
		   et le logo garde sa place au milieu. */
		.pistache-entete.est-compacte .pistache-barre {
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			column-gap: clamp(.5rem, 1.4vw, 1.3rem);
			padding-inline: 110px;
		}

		.pistache-entete.est-compacte .pistache-reseaux-compacts {
			display: none;
		}

		.pistache-entete.est-compacte .pistache-logo-compact {
			display: block;
			flex: 0 0 auto;
		}

		.pistache-entete.est-compacte .pistache-logo-compact img {
			max-width: 140px;
		}
	}

	/* Les paliers « sous 1120 px » (sans FR/EN, logo 110) et « sous
	   1040 px » (sans logo), ainsi que le filet « écran bas de moins de
	   880 px », ont été retirés le 7 octobre 2026 : sous 1280 px l'en-tête
	   est désormais en mode mobile, ils ne pouvaient plus s'appliquer.
	   Leur texte est dans la sauvegarde « avant-bulles-perso-entete ». */
}

/* Respect du réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {

	/* Le carrousel ne glisse plus : il saute d'une diapositive à
	   l'autre. Le script coupe déjà son défilement automatique. */
	.pistache-carrousel__piste {
		scroll-behavior: auto;
	}

	.pistache-entete__haut,
	.wp-block-navigation-submenu__toggle svg {
		transition: none;
	}
}


/* =================================================================
   10. LES FICHES (Adresse, Exposition, Événement, Guide)
   =================================================================
   Habillage des blocs construits dans inc/blocs-fiches.php.
   Tout est en tailles fluides : rien à régler par écran.
   ================================================================= */

/* ----- Fil d'Ariane ----- */

.pistache-ariane {
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
	color: var(--wp--preset--color--custom-gris-texte);
	margin-block: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	line-height: 1.6;
}

.pistache-ariane a {
	color: inherit;
	text-decoration: none;
}

.pistache-ariane a:hover {
	text-decoration: underline;
}

.pistache-ariane__sep {
	margin-inline: 0.35em;
	opacity: 0.6;
}


/* ----- Pastilles sous le titre ----- */

.pistache-pastilles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-block: 0 var(--wp--preset--spacing--small);
}

.pistache-pastille {
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
	color: var(--wp--preset--color--custom-gris-texte);
	font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
	padding: 0.15em 0.75em;
	border-radius: 20px;
	white-space: nowrap;
}

/* Seul « Coup de cœur » porte le vert de la marque. */
.pistache-pastille.est-vedette {
	background: transparent;
	color: var(--wp--preset--color--custom-principale-vert);
	border: 1px solid var(--wp--preset--color--custom-principale-vert);
}


/* ----- Ligne auteur ----- */

.pistache-auteur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
	color: var(--wp--preset--color--custom-gris-texte);
	padding-bottom: var(--wp--preset--spacing--small);
	margin-bottom: var(--wp--preset--spacing--medium);
	border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .1));
}

.pistache-auteur__pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--custom-principale-vert);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 500;
	flex: 0 0 auto;
}

.pistache-auteur__nom {
	font-weight: 500;
	color: var(--wp--preset--color--custom-noir-encre);
}

/* Depuis le 23 sept. 2026, « Écrit par … » est un lien vers la page
   d'auteur. Souligné fin, pour qu'on voie que c'est un lien sans
   alourdir la ligne. */
a.pistache-auteur__nom {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a.pistache-auteur__nom:hover {
	color: var(--wp--preset--color--custom-principale-vert);
}

a.pistache-auteur__nom:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-vert-fonc);
	outline-offset: 2px;
}

.pistache-auteur__barre,
.pistache-auteur__sep {
	opacity: 0.4;
}

.pistache-partager {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ----- Étoiles ----- */

.pistache-etoiles {
	letter-spacing: 1px;
	font-size: 1em;
	white-space: nowrap;
}

.pistache-etoile.est-pleine {
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-etoile.est-vide {
	color: rgba(0, 0, 0, .2);
}

/* Demi-étoile : verte à gauche, grise à droite. */
.pistache-etoile.est-demi {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--custom-principale-vert) 50%,
		rgba(0, 0, 0, .2) 50%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}


/* ----- Légende et crédit de la photo ----- */

.pistache-legende {
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
	color: var(--wp--preset--color--custom-gris-texte);
	font-style: italic;
	text-align: center;
	margin-block: 0.5rem var(--wp--preset--spacing--medium);
}


/* ----- Boutons d'action ----- */

.pistache-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: var(--wp--preset--spacing--medium);
}

.pistache-bouton {
	display: inline-block;
	padding: 0.6em 1.3em;
	border-radius: var(--wp--custom--border-radius, 6px);
	font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
	text-decoration: none;
	line-height: 1.3;
	text-align: center;
}

.pistache-bouton.est-plein {
	background: var(--wp--preset--color--custom-principale-vert);
	color: #fff;
}

.pistache-bouton.est-plein:hover {
	background: var(--wp--preset--color--custom-vert-fonc);
	color: #fff;
}

.pistache-bouton.est-contour {
	border: 1px solid rgba(0, 0, 0, .2);
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-bouton.est-contour:hover {
	border-color: var(--wp--preset--color--custom-principale-vert);
	color: var(--wp--preset--color--custom-principale-vert);
}


/* ----- Encadré EN BREF ----- */

.pistache-bref {
	border: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .12));
	border-radius: 8px;
	padding: var(--wp--preset--spacing--small);
	margin-block: var(--wp--preset--spacing--medium);
}

.pistache-bref__titre {
	font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.78rem);
	font-weight: 500;
	letter-spacing: 1.5px;
	color: var(--wp--preset--color--custom-principale-vert);
	margin: 0 0 0.6rem;
}

.pistache-bref__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
	color: var(--wp--preset--color--custom-gris-texte);
	line-height: 1.85;
}

.pistache-bref__liste li {
	padding-left: 1.1em;
	position: relative;
}

.pistache-bref__liste li::before {
	content: "-";
	position: absolute;
	left: 0;
	opacity: 0.55;
}

.pistache-bref__libelle {
	color: var(--wp--preset--color--custom-noir-encre);
}


/* ----- Carte ----- */

.pistache-carte {
	margin-block: var(--wp--preset--spacing--medium);
}

/* Hauteur réservée : la carte ne décale rien en arrivant. */
.pistache-carte iframe {
	display: block;
	width: 100%;
	height: clamp(180px, 28vw, 260px);
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-carte__lien {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
}


/* ----- Encadré newsletter ----- */

.pistache-newsletter {
	border: 1px solid var(--wp--preset--color--custom-principale-vert);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--medium);
	text-align: center;
	margin-block: var(--wp--preset--spacing--medium);
}

.pistache-newsletter__titre {
	font-weight: 500;
	margin: 0 0 0.2rem;
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
}

.pistache-newsletter__soustitre {
	color: var(--wp--preset--color--custom-gris-texte);
	margin: 0 0 0.8rem;
	font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
}


/* ----- Vous pourriez aimer ----- */

.pistache-suggestions {
	margin-top: var(--wp--preset--spacing--large);
}

.pistache-suggestions__titre {
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
	margin: 0 0 0.7rem;
}

.pistache-suggestions__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--small);
}

.pistache-suggestions__liste a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.pistache-carte-lien__image {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
	margin-bottom: 0.45rem;
}

.pistache-carte-lien__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pistache-carte-lien__titre {
	display: block;
	font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
	line-height: 1.4;
}

.pistache-carte-lien__meta {
	display: block;
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
	color: var(--wp--preset--color--custom-gris-texte);
	margin-top: 0.1rem;
}

.pistache-suggestions__liste a:hover .pistache-carte-lien__titre {
	color: var(--wp--preset--color--custom-principale-vert);
}

/* Sur téléphone, une seule colonne. */
@media (width <= 600px) {

	.pistache-suggestions__liste {
		grid-template-columns: 1fr;
	}
}


/* ----- Emplacements publicitaires -----
   La hauteur est réservée dès le chargement : quand la publicité
   arrive, elle se pose dans un espace déjà libre et ne pousse jamais
   le texte vers le bas. C'est ce décalage que Google pénalise. */

.pistache-pub {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #ba7517;
	border-radius: 8px;
	background: #faeeda;
	margin-block: var(--wp--preset--spacing--medium);
	overflow: hidden;
}

.pistache-pub__mesure {
	font-size: clamp(0.65rem, 0.62rem + 0.15vw, 0.75rem);
	letter-spacing: 1px;
	color: #633806;
	text-align: center;
	padding: 0.5rem;
}

/* Bannière : 970 × 90 sur ordinateur, 320 × 100 sur téléphone.
   La case ne réserve 90 px que sur un écran d'ordinateur : au moins
   880 px de large ET 501 px de haut (c'était aussi le seuil de l'en-tête
   jusqu'au 7 octobre 2026 ; celui-ci est passé à 1280 px, la case non)
   (la case y fait au moins 832 px, une bannière de 728 y tient). Partout
   ailleurs, tablette en portrait et téléphone en paysage compris, c'est
   le format mobile, haut de 100 px, qui sera servi : la case réserve
   100 px. Avant le 27 septembre 2026, 90 px dès 601 px de large : le
   format mobile aurait poussé le contenu de 10 px à son arrivée. */
/* Depuis le 10 octobre 2026 (décision de Stéphane, planche AVANT / APRÈS) :
   970 × 90 dès 1018 px de large, 728 × 90 dès 768 px, 320 × 100 en
   dessous. La case a exactement la taille du format de l'écran : rien ne
   bouge quand l'annonce arrive. À 970 px, elle sort de la colonne du texte,
   centrée, dans la largeur du site ; à 768 px, le 728 × 90 déborde de 4 px
   sur chaque marge (aucun défilement de côté). Entre 768 et 879 px de large,
   et sur un téléphone à l'horizontale de 812 ou 932 px, la case passe de
   100 à 90 px : le contenu y remonte de 10 px. Les règles d'avant sont
   décrites ci-dessus. */
.pistache-pub.est-banniere {
	min-height: 100px;
	height: 100px;
}

@media (width >= 768px) {

	body .pistache-pub.est-banniere {
		width: 728px;
		max-width: none;
		min-height: 90px;
		height: 90px;
		margin-left: calc((100% - 728px) / 2) !important;
		margin-right: calc((100% - 728px) / 2) !important;
	}
}

@media (width >= 1018px) {

	body .pistache-pub.est-banniere {
		width: 970px;
		margin-left: calc((100% - 970px) / 2) !important;
		margin-right: calc((100% - 970px) / 2) !important;
	}
}

/* Case vide : n'affiche que le format de l'écran. */
.pistache-pub__format {
	display: none;
}

.pistache-pub__format.est-petit {
	display: inline;
}

@media (width >= 768px) {

	.pistache-pub__format.est-petit {
		display: none;
	}

	.pistache-pub__format.est-moyen {
		display: inline;
	}
}

@media (width >= 1018px) {

	.pistache-pub__format.est-moyen {
		display: none;
	}

	.pistache-pub__format.est-grand {
		display: inline;
	}
}

/* Emplacement rempli : le cadre a la taille exacte de l'annonce, et la
   mention (« Publicité », « Sponsorisé », « Lien partenaire »…) se pose
   juste au-dessus de son coin droit : pour la bannière, dans l'espace de
   32 px qui la sépare du menu (rien ne bouge). */
.pistache-pub.est-remplie {
	overflow: visible;
}

.pistache-pub__cadre {
	position: relative;
	max-width: 100%;
	height: 100%;
	margin: 0 auto;
}

.pistache-pub.est-banniere .pistache-pub__cadre {
	width: 320px;
}

.pistache-pub.est-pave .pistache-pub__cadre {
	width: 300px;
}

@media (width >= 768px) {

	.pistache-pub.est-banniere .pistache-pub__cadre {
		width: 728px;
	}

	.pistache-pub.est-pave:not(.est-source-regie) .pistache-pub__cadre {
		width: 100%;
	}
}

@media (width >= 1018px) {

	.pistache-pub.est-banniere .pistache-pub__cadre,
	.pistache-pub.est-pave .pistache-pub__cadre {
		width: 970px;
	}
}

/* L'annonce occupe tout le cadre. Les autres annonces de la rotation
   restent cachées (une seule tirée au sort). */
.pistache-pub__lien,
.pistache-pub__lien picture,
.pistache-pub__lien img {
	display: block;
	width: 100%;
	height: 100%;
}

.pistache-pub__lien img {
	object-fit: contain;
}

.pistache-pub__lien[hidden] {
	display: none !important;
}

.pistache-pub__cadre .pistache-pub__code {
	display: block;
	height: 100%;
	overflow: hidden;
}

.pistache-pub__cadre .pistache-pub__mention {
	inset: auto 0 100% auto;
	margin-bottom: 3px;
	line-height: 1;
}

/* Sous-menu ouvert (assets/js/pub.js, règle de Google contre les clics
   accidentels) : les publicités s'effacent et ne répondent à aucun clic,
   jusqu'à une demi-seconde après la fermeture du sous-menu. */
.pistache-pub,
.pistache-carte-lien.est-publicite {
	transition: opacity 0.15s ease;
}

.est-sous-menu-ouvert .pistache-pub,
.est-sous-menu-ouvert .pistache-carte-lien.est-publicite {
	opacity: 0.25;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

	.pistache-pub,
	.pistache-carte-lien.est-publicite {
		transition: none;
	}
}

/* Pavé (décision de Stéphane du 10 octobre 2026, planches 5 et 6) :
   970 × 250 dès 1018 px de large (case élargie à 970 px, centrée, qui sort
   de la colonne du texte) ; entre 768 et 1017 px, le même visuel réduit à
   la largeur de la case (720 × 186 sur une tablette de 768 px : la largeur
   d'avant ne change pas, la suite remonte de 59 à 65 px) ; 300 × 250 en
   dessous. Une régie ne laisse pas réduire ses annonces : sur tablette,
   elle garde une case de 250 px de haut pour un 300 × 250. Avant le
   10 octobre 2026 : case de toute la largeur, 250 px de haut partout. */
.pistache-pub.est-pave {
	min-height: 250px;
	height: 250px;
}

@media (width >= 768px) {

	.pistache-pub.est-pave:not(.est-source-regie) {
		min-height: 0;
		height: auto;
		aspect-ratio: 970 / 250;
	}
}

@media (width >= 1018px) {

	body .pistache-pub.est-pave {
		width: 970px;
		max-width: none;
		min-height: 250px;
		height: 250px;
		aspect-ratio: auto;
		margin-left: calc((100% - 970px) / 2) !important;
		margin-right: calc((100% - 970px) / 2) !important;
	}
}

/* Sur téléphone (jusqu'à 600 px de large), l'emplacement ignore la marge
   latérale et prend toute la largeur de l'écran ; le texte garde la sienne.
   À 320 px, la case ne faisait que 272 px : les formats mobiles (320 × 100,
   300 × 250) n'y tenaient pas. Toutes les cases sont posées dans un bloc
   décalé de la marge du site (24 px de chaque côté) : on la leur retire,
   ni plus ni moins, pour qu'elles touchent exactement les deux bords sans
   faire défiler la page sur le côté. Les bords latéraux et les coins
   arrondis disparaissent, puisque la case touche l'écran.
   Décision de Stéphane du 27 septembre 2026. */
@media (width <= 600px) {

	/* « body » et « !important » : posées directement dans un bloc de mise
	   en page (bannière du haut, pavé des fiches), les cases reçoivent de
	   WordPress « margin: auto !important » ; sans cela elles gardaient
	   leurs 24 px (mesuré le 27 septembre 2026). */
	body .pistache-pub {
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 24px)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 24px)) !important;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}
}


/* ----- Vidéo Instagram -----
   On n'affiche qu'une miniature : Instagram n'est chargé que si le
   visiteur clique. Un seul embed direct coûterait environ une seconde. */

.pistache-video {
	margin: var(--wp--preset--spacing--medium) auto;
	max-width: 400px;
}

.pistache-video__lien {
	display: block;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-video__lien img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le bouton de lecture, dessiné en CSS : aucune image à charger. */
.pistache-video__play {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
}

.pistache-video__play::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent var(--wp--preset--color--custom-noir-encre);
}

.pistache-video-lien {
	text-align: center;
	margin-block: var(--wp--preset--spacing--medium);
}


/* ----- Vous pourriez aimer : la carte mise en avant -----
   Deux cas bien distincts, et il ne faut jamais les confondre :
   « Sponsorisé » = payé par un partenaire, mention obligatoire, cadre
   ambre comme les autres emplacements publicitaires du site.
   « À la une » = l'un de nos propres contenus : cadre discret, aucune
   mention de publicité — annoncer une publicité là où il n'y en a pas
   serait aussi trompeur que l'inverse. */

/* ----- Les pastilles posées sur la photo -----
   La date à gauche, « Coup de cœur » à droite, toutes deux EN HAUT.
   Elles ne sont plus placées chacune dans son coin mais rangées côte
   à côte dans une même bande : sur une carte étroite, elles se
   partagent la place au lieu de se chevaucher. */
.pistache-carte-lien__image {
	position: relative;
	display: flex;
	/* La date en BAS, « Coup de cœur » en HAUT : posées en diagonale,
	   elles ne peuvent pas se superposer, même sur une carte étroite.
	   L'essai « les deux en haut » a été abandonné le 3 septembre —
	   côte à côte, elles se chevauchaient. */
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 10px;
}

.pistache-carte-lien__image img {
	position: absolute;
	inset: 0;
}

.pistache-carte-lien__mention {
	position: relative;
	z-index: 1;
	order: 2;
	margin-top: auto;
	background: #faeeda;
	border: 1px dashed #ba7517;
	color: #633806;
	font-size: clamp(0.62rem, 0.6rem + 0.12vw, 0.7rem);
	padding: 0.1em 0.6em;
	border-radius: 20px;
	line-height: 1.6;
}

.pistache-carte-lien__mention.est-neutre {
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
	border: 1px solid rgba(0, 0, 0, .12);
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-carte-lien.est-sponsorisee .pistache-carte-lien__image {
	outline: 1px dashed #ba7517;
	outline-offset: -1px;
	background: #faeeda;
}

/* Sur téléphone, deux colonnes plutôt qu'une : six vignettes empilées
   feraient une colonne interminable en fin d'article. */
@media (width <= 600px) {

	.pistache-suggestions__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ----- Mention obligatoire des liens rémunérés ----- */

.pistache-mention-affiliation {
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
	color: var(--wp--preset--color--custom-gris-texte);
	margin: -0.4rem 0 var(--wp--preset--spacing--medium);
	line-height: 1.6;
}

/* En fin d'article (10 octobre 2026, inc/affiliation.php) : une seule
   mention par page, juste avant l'encart de l'infolettre. Mêmes écarts que
   sous la liste du guide « Aujourd'hui » avant ce changement : la liste
   apporte déjà ses 32 px (aucune marge en plus après le texte de l'article),
   et deux fois l'espace moyen jusqu'à l'encart. */
/* Rapprochée le 30 octobre 2026 (demande de Stéphane du 26 : « trop de marge avant et après »
   pour une seule petite ligne) : 12 px sous le bloc d'avant, 16 px jusqu'à l'encart qui suit
   (avant : 24 à 32 px au-dessus, 48 à 64 px en dessous). Le bloc d'avant perd sa marge du bas,
   sinon elle l'emporte sur les 12 px (deux marges qui se touchent se fondent en une seule). */
main .pistache-mention-affiliation.est-fin-article {
	margin-top: 0.75rem;
	margin-bottom: 0;
	padding-bottom: 0;
}

main > :has(+ .pistache-mention-affiliation.est-fin-article) {
	margin-bottom: 0;
}

main .pistache-mention-affiliation.est-fin-article + * {
	margin-top: 1rem;
}

main .wp-block-post-content + .pistache-mention-affiliation.est-fin-article {
	margin-top: 0;
}

/* Page sans article (accueil, liste) : au-dessus du pied de page, dans la
   largeur du texte. */
.pistache-mention-bas {
	max-width: var(--wp--style--global--content-size, 740px);
	margin: 0 auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}


/* ----- Emplacement publicitaire rempli -----
   Même hauteur réservée qu'un emplacement vide : rien ne bouge
   entre le chargement de la page et l'arrivée de la publicité. */

.pistache-pub.est-remplie {
	position: relative;
	flex-direction: column;
	background: transparent;
	border: none;
}

.pistache-pub__mention {
	position: absolute;
	inset: 4px 6px auto auto;
	font-size: 0.62rem;
	letter-spacing: 1px;
	color: var(--wp--preset--color--custom-gris-texte);
	text-transform: uppercase;
}

.pistache-pub__code {
	width: 100%;
	display: flex;
	justify-content: center;
}


/* ----- Publicité à la place d'une carte de suggestion ----- */

.pistache-carte-lien.est-publicite .pistache-carte-lien__image {
	display: flex;
	align-items: center;
	justify-content: center;
	outline: 1px dashed #ba7517;
	outline-offset: -1px;
	background: #faeeda;
}

.pistache-carte-lien__code {
	display: block;
	width: 100%;
	overflow: hidden;
}


/* ----- Vidéo : le bouton de lecture ----- */

.pistache-video__lien {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: none;
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-video.est-en-chargement .pistache-video__play {
	opacity: 0.4;
}

/* Le lecteur : hauteur posée par nous, affinée ensuite par Instagram
   s'il envoie sa mesure.

   La proportion 100/177 vient d'une mesure réelle : pour un cadre de
   400 px de large, Instagram réclame 708 px de haut pour un reel.
   C'est donc juste dès le premier affichage, y compris sur mobile où
   le message de dimensionnement n'arrive pas.

   Les bandes noires visibles autour de la vidéo sont produites par le
   lecteur d'Instagram lui-même, à l'intérieur du cadre — elles ne
   viennent pas de cette valeur et ne peuvent pas être retirées d'ici.

   Si un jour les vidéos changent de format, c'est ce seul chiffre
   qu'il faut ajuster. */
.pistache-video.est-en-lecture {
	background: none;
}

.pistache-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 100 / 177;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}


/* ----- Pastilles cliquables -----
   Elles mènent désormais à leur page de rubrique, de type de lieu ou
   de quartier. L'apparence ne change pas d'un pixel : on neutralise
   seulement le soulignement et la couleur que le navigateur applique
   d'office aux liens. */

a.pistache-pastille {
	text-decoration: none;
	color: var(--wp--preset--color--custom-gris-texte);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

a.pistache-pastille:hover,
a.pistache-pastille:focus-visible {
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
	color: var(--wp--preset--color--custom-principale-vert);
}

a.pistache-pastille.est-vedette {
	color: var(--wp--preset--color--custom-principale-vert);
}

a.pistache-pastille.est-vedette:hover,
a.pistache-pastille.est-vedette:focus-visible {
	background: var(--wp--preset--color--custom-principale-vert);
	color: #fff;
	border-color: var(--wp--preset--color--custom-principale-vert);
}


/* ----- « La suite après la publicité » -----
   Presque collée à l'encart, pour qu'on lise les deux comme un seul
   ensemble et que le lecteur comprenne que le texte reprend après. */

.pistache-pub__annonce {
	font-size: clamp(0.66rem, 0.63rem + 0.15vw, 0.74rem);
	color: var(--wp--preset--color--custom-gris-texte);
	text-align: center;
	letter-spacing: 0.5px;
	margin: var(--wp--preset--spacing--medium) 0 0.3rem;
	line-height: 1.4;
}

/* L'encart qui suit cette mention ne reprend pas de marge en haut. */
.pistache-pub__annonce + .pistache-pub {
	margin-top: 0;
}


/* ----- Bandeau de date -----
   Trois états sur une exposition, un seul sur un événement. Les
   couleurs suivent la règle de sobriété du site : le vert reste la
   marque, l'ocre est réservé à l'urgence, le gris à l'information
   neutre. Aucune autre couleur n'entre ici. */

.pistache-bandeau {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	border-radius: 8px;
	padding: 0.6em 1em;
	margin-block: 0 var(--wp--preset--spacing--medium);
	font-size: clamp(0.8rem, 0.76rem + 0.22vw, 0.92rem);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.pistache-bandeau .pistache-icone {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

/* En cours, ou date d'un événement : vert clair de la marque. */
.pistache-bandeau.est-en-cours {
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
	color: var(--wp--preset--color--custom-vert-fonc);
}

/* Bientôt terminée : l'ocre, réservé à l'urgence et à rien d'autre. */
.pistache-bandeau.est-urgente {
	background: #faeeda;
	color: #633806;
	border: 1px solid #ba7517;
}

/* Terminée : gris neutre, sans dramatiser. */
.pistache-bandeau.est-terminee {
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
	color: var(--wp--preset--color--custom-gris-texte);
}


/* ----- État d'une exposition sur une carte -----
   Placé juste sous la photo, avant le titre : dans une liste, savoir
   ce qui se termine bientôt vaut mieux que tout le reste. Mêmes
   couleurs que le bandeau de la fiche, pour qu'on reconnaisse
   l'information d'un coup d'œil. */

/* Posé sur la photo, au même endroit et à la même taille que la
   mention « Sponsorisé », pour que l'œil trouve toujours cette
   information au même point d'une carte à l'autre. */
.pistache-statut {
	position: relative;
	z-index: 1;
	order: 2;
	margin-top: auto;
	font-size: clamp(0.62rem, 0.6rem + 0.12vw, 0.7rem);
	font-weight: 500;
	line-height: 1.6;
	padding: 0.1em 0.6em;
	border-radius: 20px;
}

.pistache-statut.est-en-cours {
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
	color: var(--wp--preset--color--custom-vert-fonc);
}

.pistache-statut.est-urgente {
	background: #faeeda;
	color: #633806;
}

.pistache-statut.est-terminee {
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
	color: var(--wp--preset--color--custom-gris-texte);
}


/* ----- Proportions du lecteur selon la plateforme -----
   Instagram sert un cadre vertical avec sa barre de titre ; YouTube et
   Vimeo servent du 16:9. Une seule valeur ne peut pas convenir aux
   deux, d'où ces règles séparées. */

.pistache-video[data-plateforme="youtube"],
.pistache-video[data-plateforme="vimeo"] {
	max-width: 100%;
}

.pistache-video[data-plateforme="youtube"] iframe,
.pistache-video[data-plateforme="vimeo"] iframe {
	aspect-ratio: 16 / 9;
}

/* Une vidéo verticale YouTube (Short) reste dans la largeur d'un reel. */
.pistache-video[data-plateforme="youtube"] .pistache-video__lien,
.pistache-video[data-plateforme="vimeo"] .pistache-video__lien {
	aspect-ratio: 16 / 9;
}


/* ----- Carte : le bouton d'affichage -----
   Même principe que la vidéo : rien n'est demandé à OpenStreetMap
   tant que le visiteur ne l'a pas décidé. La hauteur est réservée
   dès le départ, donc le contenu ne bouge pas quand la carte arrive. */

.pistache-carte__bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	height: clamp(180px, 28vw, 260px);
	border: 1px dashed rgba(0, 0, 0, .18);
	border-radius: 8px;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
	color: var(--wp--preset--color--custom-gris-texte);
	font: inherit;
	font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
	cursor: pointer;
}

/* Le bouton n'est qu'un repli : dans la quasi-totalité des cas la
   carte se charge seule à l'approche et il disparaît avant d'être vu. */
.pistache-carte__bouton:hover {
	border-color: var(--wp--preset--color--custom-principale-vert);
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-carte__bouton .pistache-icone {
	width: 1.2em;
	height: 1.2em;
}


/* =================================================================
   11. LES PAGES DE LISTE (archives, rubriques, quartiers)
   =================================================================
   Un seul habillage pour toutes : archive d'un type, rubrique du
   menu, quartier, type de lieu, budget. */

.pistache-liste__entete {
	margin-block: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
}

.pistache-liste__titre {
	margin: 0 0 0.25rem;
}

.pistache-liste__desc {
	color: var(--wp--preset--color--custom-gris-texte);
	font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
	margin: 0;
	max-width: 46em;
}

.pistache-liste__vide {
	color: var(--wp--preset--color--custom-gris-texte);
	padding: var(--wp--preset--spacing--large) 0;
}


/* ----- Barre de filtres ----- */

.pistache-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	/* défini plus bas pour les petits écrans */
	padding-bottom: var(--wp--preset--spacing--small);
	margin-bottom: var(--wp--preset--spacing--medium);
	border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .1));
}

.pistache-filtre {
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 20px;
	padding: 0.35em 0.95em;
	font-size: clamp(0.76rem, 0.72rem + 0.2vw, 0.86rem);
	color: var(--wp--preset--color--custom-gris-texte);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.5;
}

.pistache-filtre:hover {
	border-color: var(--wp--preset--color--custom-principale-vert);
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-filtre.est-actif {
	background: var(--wp--preset--color--custom-principale-vert);
	border-color: var(--wp--preset--color--custom-principale-vert);
	color: #fff;
}


/* ----- La grille de cartes -----
   Trois colonnes sur ordinateur, deux sur tablette, une seule sur
   téléphone : sur un écran étroit, une carte pleine largeur se lit
   sans effort là où deux vignettes deviennent illisibles. */

.pistache-grille {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--medium);
}

@media (width <= 900px) {

	.pistache-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 600px) {

	.pistache-grille {
		grid-template-columns: 1fr;
	}
}

/* La 2e carte de « Vous pourriez aimer » quand plusieurs se partagent la
   place (10 octobre 2026) : empilées dans la même case, qui prend la
   hauteur de la plus haute ; une seule visible, tirée au sort. */
.pistache-carte-lien.est-rotation {
	display: grid;
}

.pistache-rotation__choix {
	grid-area: 1 / 1;
	visibility: hidden;
}

.pistache-rotation__choix[data-pi-choisi] {
	visibility: visible;
}

/* Le pavé publicitaire occupe toute la rangée, sans casser la grille. */
.pistache-carte-lien.est-pub {
	grid-column: 1 / -1;
}

.pistache-carte-lien.est-pub .pistache-pub {
	margin-block: 0;
}

/* Sur une page de liste, les cartes respirent un peu plus. */
.pistache-grille .pistache-carte-lien__titre {
	font-size: clamp(0.88rem, 0.84rem + 0.22vw, 1rem);
	margin-top: 0.15rem;
}

.pistache-carte-lien__vedette {
	display: inline-block;
	margin: 0.45rem 0 0;
}


/* ----- Charger plus ----- */

.pistache-charger {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--large);
}

.pistache-charger__compte {
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
	color: var(--wp--preset--color--custom-gris-texte);
}


/* ----- Pastille « Coup de cœur » sur une carte -----
   En haut à droite de la photo, en diagonale de l'état qui occupe le
   bas à gauche : les deux ne se gênent jamais, et l'œil retrouve
   chacune toujours au même endroit. */

.pistache-carte-lien__vedette {
	position: relative;
	z-index: 1;
	/* Première dans le flux, donc en haut ; poussée à droite. */
	order: 0;
	align-self: flex-end;
	background: var(--wp--preset--color--custom-principale-vert);
	color: #fff;
	font-size: clamp(0.62rem, 0.6rem + 0.12vw, 0.7rem);
	font-weight: 500;
	line-height: 1.6;
	padding: 0.1em 0.6em;
	border-radius: 20px;
	white-space: nowrap;
}


/* ----- Deuxième ligne de filtres : par état ----- */

.pistache-filtres.est-etats {
	border-bottom: none;
	padding-bottom: 0;
	margin-top: calc(var(--wp--preset--spacing--medium) * -0.5);
	margin-bottom: var(--wp--preset--spacing--medium);
}

.pistache-filtre.est-etat {
	border-style: dashed;
}

.pistache-filtre.est-etat.est-actif {
	border-style: solid;
}


/* ==========================================================
   12. Les étapes d'un guide
   ==========================================================
   La liste numérotée de lieux qui fait le corps d'un guide.
   Les numéros sont écrits dans le titre, pas laissés à la
   puce de la liste : le pavé publicitaire est lui aussi un
   <li>, et il ne doit surtout pas être numéroté.
   ========================================================== */

.pistache-etapes {
	list-style: none;
	margin: var(--wp--preset--spacing--medium) 0 0;
	padding: 0;
}

.pistache-etape {
	margin: 0 0 var(--wp--preset--spacing--medium);
	padding: 0 0 var(--wp--preset--spacing--medium);
	border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .1));
}

.pistache-etape:last-child,
.pistache-etape.est-pub {
	border-bottom: none;
}

.pistache-etape.est-pub {
	padding-bottom: 0;
}

/* Les guides longs : les lieux arrivent par 5 (assets/js/etapes.js,
   7 octobre 2026). Sans le script, la classe « est-par-paquets » n'est
   jamais posée : tout s'affiche. */
.pistache-etapes.est-par-paquets > .pistache-etape.est-a-venir {
	display: none;
}

.pistache-etapes__guetteur {
	height: 1px;
	margin: 0;
	padding: 0;
}

.pistache-etape__titre {
	/* clamp : le titre grandit avec l'écran sans jamais sauter
	   d'un coup, et reste lisible sur le plus petit mobile. */
	font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
	line-height: 1.3;
	margin: 0 0 0.6em;
}

.pistache-etape__titre a {
	color: inherit;
	text-decoration: none;
}

.pistache-etape__titre a:hover,
.pistache-etape__titre a:focus-visible {
	text-decoration: underline;
}

.pistache-etape__numero {
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-etape__image {
	display: block;
	margin: 0 0 0.75em;
}

.pistache-etape__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
}

.pistache-etape__texte {
	margin: 0 0 0.75em;
}

.pistache-etape__infos {
	/* Surtout pas de flex ici : chaque morceau deviendrait un bloc
	   insécable, et sur mobile le point de séparation partait seul
	   à la ligne devant les étoiles. En flux normal, la ligne se
	   coupe où il faut, comme un vrai paragraphe. */
	display: block;
	margin: 0 0 0.85em;
	padding: 0.55em 0.85em;
	border-radius: 8px;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
	font-size: clamp(0.78rem, 0.75rem + 0.14vw, 0.88rem);
	line-height: 1.5;
	/* Une adresse longue ne doit jamais élargir la page. */
	overflow-wrap: anywhere;
}

.pistache-etape__infos .pistache-icone {
	width: 1.05em;
	height: 1.05em;
	vertical-align: -0.18em;
}

/* Les étoiles restent soudées à leur point de séparation. */
.pistache-etape__infos .pistache-etoiles {
	white-space: nowrap;
}

.pistache-etape .pistache-bouton {
	display: inline-block;
}


/* ==========================================================
   13. Le plan du site
   ==========================================================
   Trois niveaux, sans puces : on lit une carte du site, pas
   une liste de courses. Les colonnes se forment toutes seules
   quand l'écran est assez large.
   ========================================================== */

.pistache-plan {
	margin-top: var(--wp--preset--spacing--medium);
}

.pistache-plan h2 {
	margin: var(--wp--preset--spacing--large) 0 var(--wp--preset--spacing--x-small);
	padding-bottom: 0.35em;
	border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .1));
}

.pistache-plan h2:first-child {
	margin-top: 0;
}

.pistache-plan__titre {
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
	margin: var(--wp--preset--spacing--small) 0 0.35em;
}

.pistache-plan__titre a {
	color: inherit;
	text-decoration: none;
}

.pistache-plan__titre a:hover,
.pistache-plan__titre a:focus-visible {
	text-decoration: underline;
}

.pistache-plan__note {
	color: var(--wp--preset--color--custom-gris-texte);
	font-size: 0.8em;
	font-weight: 400;
}

.pistache-plan__liens {
	list-style: none;
	margin: 0 0 0.4em;
	padding: 0;
	/* Les colonnes n'apparaissent que s'il y a la place : sur un
	   petit mobile, une seule colonne, sans réglage à part. */
	columns: 16rem 3;
	column-gap: var(--wp--preset--spacing--medium);
}

.pistache-plan__liens li {
	break-inside: avoid;
	margin: 0 0 0.3em;
	font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.95rem);
	line-height: 1.45;
	/* Un titre de fiche très long ne doit pas élargir la page. */
	overflow-wrap: anywhere;
}


/* ==========================================================
   14. La recherche vivante
   ==========================================================
   Le panneau de résultats se pose sous l'en-tête, sur toute
   sa largeur. Il est en position absolue : il recouvre la
   page au lieu de la pousser vers le bas, sinon le contenu
   sauterait à chaque lettre tapée.
   ========================================================== */

.pistache-resultats {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 120;
	max-height: min(70vh, 34rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wp--preset--spacing--small) clamp(1rem, 4vw, 2rem) var(--wp--preset--spacing--small);
	background: var(--wp--preset--color--custom-blanc);
	border-top: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .1));
	box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
}

.pistache-resultats[hidden] {
	display: none;
}

.pistache-resultats__titre {
	margin: 0 0 0.6em;
	font-size: clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-resultats__titre strong {
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-resultats__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Une colonne sur mobile, deux au maximum ensuite : au-delà, un
	   panneau de recherche devient un mur de vignettes illisible. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
	gap: 0.15rem clamp(1rem, 3vw, 2rem);
	max-width: 62rem;
}

.pistache-resultats__liste a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.45rem 0.4rem;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}

.pistache-resultats__liste a:hover,
.pistache-resultats__liste a:focus-visible {
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-resultats__image {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-resultats__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pistache-resultats__texte {
	/* Indispensable : sans lui, un titre long élargit la grille. */
	min-width: 0;
}

.pistache-resultats__nom,
.pistache-resultats__details {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pistache-resultats__nom {
	font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.95rem);
	line-height: 1.35;
}

.pistache-resultats__details,
.pistache-resultats__vide {
	font-size: clamp(0.74rem, 0.72rem + 0.1vw, 0.82rem);
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-resultats__vide {
	margin: 0;
	white-space: normal;
}

.pistache-resultats__tout {
	display: inline-block;
	margin-top: 0.7rem;
	font-size: clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
	color: var(--wp--preset--color--custom-principale-vert);
}


/* ==========================================================
   15. La page d'accueil
   ========================================================== */

/* ----- Le carrousel d'ouverture -----
   Sur téléphone et tablette en portrait : une diapositive pleine
   largeur, qu'on fait glisser au doigt, avec accrochage. Sur
   ordinateur (880 px et plus) : une diapositive au centre et une
   voisine coupée de chaque côté, qui tournent en boucle (voir plus
   bas, « en boucle sur ordinateur »). Le défilement automatique est
   l'affaire de assets/js/carrousel.js. */

.pistache-carrousel {
	margin-bottom: var(--wp--preset--spacing--medium);
}

/* Garde-fou : quelle que soit la largeur accordée par la mise en page,
   une diapositive ne dépasse jamais la moitié de la hauteur de
   l'écran. Une photo d'ouverture qui remplit tout l'écran repousse le
   reste de la page hors de vue. */
.pistache-carrousel__image img {
	max-height: 52vh;
}

.pistache-carrousel__piste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/* Une longueur SIMPLE, et pas une variable d'espacement du thème :
	   celles-ci contiennent des clamp(), qu'on ne peut pas diviser
	   dans un calc(). Le calcul devenait invalide et la largeur des
	   diapositives retombait à « auto » — une seule occupait alors
	   tout l'écran. Défaut mesuré le 3 septembre 2026. */
	--ecart: 0.5rem;
	gap: var(--ecart);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* La barre de défilement ne s'affiche pas : on fait glisser. */
	scrollbar-width: none;
}

.pistache-carrousel__piste::-webkit-scrollbar {
	display: none;
}

.pistache-carrousel__vue {
	flex: 0 0 100%;
	scroll-snap-align: center;
	min-width: 0;
}

.pistache-carrousel__vue > a,
.pistache-carrousel__vue > .pistache-carrousel__cadre {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
}

.pistache-carrousel__image {
	display: block;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-carrousel__image img {
	display: block;
	width: 100%;
	height: auto;
	/* Hauteur réservée dès le premier pixel : la page ne saute pas
	   quand la photo arrive. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pistache-carrousel__texte {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: clamp(1rem, 4vw, 2rem);
	/* Un dégradé plutôt qu'un voile uni : la photo reste visible en
	   haut, le texte reste lisible en bas quelle que soit l'image. */
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .32) 55%, transparent);
}

.pistache-carrousel__etiquette {
	background: var(--wp--preset--color--custom-principale-vert);
	color: #fff;
	font-size: clamp(0.66rem, 0.63rem + 0.14vw, 0.76rem);
	padding: 0.2em 0.8em;
	border-radius: 20px;
}

.pistache-carrousel__titre {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.15rem, 0.95rem + 1.6vw, 2.1rem);
	line-height: 1.2;
	/* Une ombre portée légère : le texte reste lisible même sur une
	   photo claire, sans assombrir davantage l'image. */
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* Deux diapositives visibles dès qu'il y a la place */
@media (width >= 880px) {

	.pistache-carrousel__vue {
		flex-basis: calc(50% - 0.25rem);
	}
}

/* ----- En boucle sur ordinateur (décision de Stéphane du 8 octobre 2026) -----
   À partir de 880 px et de 3 diapositives (classe « est-en-boucle »,
   posée par inc/blocs-accueil.php) : une diapositive au centre, une
   voisine coupée de chaque côté. Chacune garde la taille d'avant (la
   moitié de la largeur), et le carrousel garde sa largeur et sa
   hauteur.

   Toutes les diapositives occupent la même case d'une grille : la
   hauteur du carrousel est donc celle d'une diapositive, réservée dès
   le premier affichage (aucun saut de mise en page). Chacune est
   ensuite décalée de « --pos » places : 0 au centre, -1 à gauche, 1 à
   droite ; au-delà, elle attend hors du cadre, invisible (ni lien
   atteignable au clavier, ni texte lu deux fois).

   Avant que le script ne tourne, la mise en place est déjà la bonne :
   la 1re au centre, la 2e à droite, la dernière à gauche. Le script
   reprend ensuite la main (classe « est-pilote ») sans que rien ne
   bouge.

   « scripting: enabled » : si le JavaScript est coupé, ces règles ne
   s'appliquent pas et le carrousel reste celui d'avant, qu'on fait
   défiler soi-même. Un navigateur qui ne comprend pas cette condition
   garde lui aussi l'ancien carrousel, et le script fait de même. */
@media (width >= 880px) and (scripting: enabled) {

	.pistache-carrousel.est-en-boucle .pistache-carrousel__piste {
		display: grid;
		grid-template-columns: calc(50% - 0.25rem);
		justify-content: center;
		/* Rien ne défile : les diapositives bougent seulement par les
		   flèches ou le défilement automatique. « clip » coupe sans
		   créer de zone qui défile (« hidden », pour les navigateurs
		   anciens, en crée une). */
		overflow-x: hidden;
		overflow-x: clip;
		scroll-snap-type: none;
		/* Sur un écran tactile, le doigt fait toujours défiler la page
		   vers le bas ; le glissé de côté est traité par le script. */
		touch-action: pan-y;
	}

	.pistache-carrousel.est-en-boucle .pistache-carrousel__vue {
		--pos: 2;
		grid-area: 1 / 1;
		transform: translateX(calc(var(--pos) * (100% + var(--ecart))));
		visibility: hidden;
		/* Proche du glissement d'avant (environ 0,4 s). « visibility »
		   suit le mouvement : une diapositive qui sort reste visible
		   jusqu'au bout de sa course. */
		transition: transform 0.45s ease, visibility 0.45s;
	}

	.pistache-carrousel.est-en-boucle .pistache-carrousel__piste:not(.est-pilote) > .pistache-carrousel__vue:first-child {
		--pos: 0;
		visibility: visible;
	}

	.pistache-carrousel.est-en-boucle .pistache-carrousel__piste:not(.est-pilote) > .pistache-carrousel__vue:nth-child(2) {
		--pos: 1;
		visibility: visible;
	}

	.pistache-carrousel.est-en-boucle .pistache-carrousel__piste:not(.est-pilote) > .pistache-carrousel__vue:last-child {
		--pos: -1;
		visibility: visible;
	}

	.pistache-carrousel.est-en-boucle .pistache-carrousel__piste.est-pilote > .pistache-carrousel__vue.est-visible {
		visibility: visible;
	}

	/* Rangement instantané, hors de la vue, avant un mouvement. */
	.pistache-carrousel.est-en-boucle .pistache-carrousel__piste.est-figee > .pistache-carrousel__vue {
		transition: none;
	}

	/* Le réglage « réduire les animations » : on saute d'une diapositive
	   à l'autre, sans glissement. */
	@media (prefers-reduced-motion: reduce) {

		.pistache-carrousel.est-en-boucle .pistache-carrousel__vue {
			transition: none;
		}
	}
}

/* La silhouette d'une diapositive qui sort d'un côté pendant qu'elle
   entre de l'autre (carrousel de 3 diapositives seulement). Elle n'a
   ni lien ni texte : ses mots sont dessinés par le CSS, qu'aucun moteur
   de recherche ni lecteur d'écran ne lit. */
.pistache-carrousel__vue.est-fantome [data-pi-texte]::before {
	content: attr(data-pi-texte);
}


/* ----- « Que faire à Paris ? » ----- */

.pistache-moments {
	margin-block: var(--wp--preset--spacing--large);
	text-align: center;
}

.pistache-moments__titre {
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
	margin: 0 0 0.2em;
}

.pistache-moments__soustitre {
	margin: 0 0 var(--wp--preset--spacing--small);
	color: var(--wp--preset--color--custom-gris-texte);
	font-size: clamp(0.85rem, 0.82rem + 0.14vw, 0.95rem);
}

.pistache-moments__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.pistache-moment {
	display: inline-block;
	padding: 0.55em 1.4em;
	border: 1px solid var(--wp--preset--color--custom-principale-vert);
	border-radius: 24px;
	color: var(--wp--preset--color--custom-principale-vert);
	font-size: clamp(0.8rem, 0.77rem + 0.14vw, 0.9rem);
	text-decoration: none;
	white-space: nowrap;
}

.pistache-moment:hover,
.pistache-moment:focus-visible {
	background: var(--wp--preset--color--custom-principale-vert);
	color: #fff;
}


/* ----- Une section de l'accueil ----- */

.pistache-section {
	margin-block: var(--wp--preset--spacing--large);
}

.pistache-section__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .1));
	padding-bottom: 0.4rem;
}

.pistache-section__titre {
	margin: 0;
	font-size: clamp(1.15rem, 1.05rem + 0.55vw, 1.6rem);
	min-width: 0;
}

.pistache-section__tout {
	flex: 0 0 auto;
	font-size: clamp(0.76rem, 0.74rem + 0.12vw, 0.85rem);
	color: var(--wp--preset--color--custom-principale-vert);
	white-space: nowrap;
}

.pistache-section__soustitre {
	margin: 0.5rem 0 var(--wp--preset--spacing--small);
	color: var(--wp--preset--color--custom-gris-texte);
	font-size: clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
}

.pistache-cartes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Le nombre de colonnes vient du bloc lui-même : 4 pour une
	   section normale, 3 pour Voyage, 2 pour Les tops. */
	grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--small);
}

@media (width <= 900px) {

	.pistache-cartes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 480px) {

	.pistache-cartes {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Les tops : deux cartes couchées, photo à gauche, seulement là où la
   section a ses deux grandes colonnes (plus de 900 px). Avant le 7 octobre
   2026 : dès 601 px. Entre 781 et 900 px (téléphone tenu à l'horizontale),
   toutes les sections passent à 2 colonnes : la carte couchée tombait dans
   une demi-colonne, photo de 150 px contre 374 ailleurs (signalé par
   Stéphane). Elle y reprend la carte verticale des autres sections. */
@media (width >= 901px) {

	.pistache-section.est-large .pistache-carte-lien > a {
		display: grid;
		grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
		align-items: center;
		gap: 0.9rem;
	}

	.pistache-section.est-large .pistache-carte-lien__image {
		margin: 0;
	}
}


/* ----- « Regarde et découvre » ----- */

.pistache-videos {
	margin-block: var(--wp--preset--spacing--large);
}

.pistache-videos__piste {
	list-style: none;
	margin: var(--wp--preset--spacing--x-small) 0 0;
	padding: 0 0 0.5rem;
	display: flex;
	gap: var(--wp--preset--spacing--small);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}

.pistache-videos__vue {
	/* Format vertical 9:16, comme les vidéos elles-mêmes. */
	flex: 0 0 clamp(9.5rem, 40vw, 13rem);
	scroll-snap-align: start;
	min-width: 0;
}

.pistache-videos__vue > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.pistache-videos__image {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-videos__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Le bouton de lecture, dessiné en CSS : aucune image à charger. */
.pistache-videos__lecture {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
}

.pistache-videos__lecture::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--wp--preset--color--custom-principale-vert);
}

.pistache-videos__titre {
	display: block;
	margin-top: 0.45rem;
	font-size: clamp(0.78rem, 0.75rem + 0.12vw, 0.88rem);
	line-height: 1.35;
	overflow-wrap: anywhere;
}


/* ----- Les flèches du carrousel -----
   Elles servent d'abord à faire comprendre qu'on peut faire défiler.
   Posées SUR la photo, en retrait des bords, avec un fond clair pour
   rester visibles quelle que soit l'image dessous. */

.pistache-carrousel {
	position: relative;
}

.pistache-carrousel__fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(32px, 3vw, 40px);
	height: clamp(32px, 3vw, 40px);
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: var(--wp--preset--color--custom-vert-fonc, #2f4429);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: background .15s ease, opacity .15s ease;
}

.pistache-carrousel__fleche[hidden] {
	display: none;
}

.pistache-carrousel__fleche svg {
	width: 60%;
	height: 60%;
}

.pistache-carrousel__fleche.est-avant {
	left: clamp(6px, 1.2vw, 14px);
}

.pistache-carrousel__fleche.est-apres {
	right: clamp(6px, 1.2vw, 14px);
}

.pistache-carrousel__fleche:hover,
.pistache-carrousel__fleche:focus-visible {
	background: #fff;
}

/* Atténuée quand elle ramène au tout début ou à la toute fin —
   mais jamais désactivée : le tour boucle. */
.pistache-carrousel__fleche.est-au-bout {
	opacity: .55;
}

/* Sur téléphone, les flèches restent au VRAI milieu de la
   diapositive — c'est ce qu'on attend d'elles. Pour qu'elles ne
   tombent pas sur le titre et la pastille, c'est le TEXTE qui
   s'écarte des bords, pas la flèche qui se déplace.
   (Premier essai : flèches remontées à 30 %. Elles étaient alors
   37 px au-dessus du centre, et Stéphane l'a vu tout de suite.) */
@media (width <= 780px) {

	.pistache-carrousel__texte {
		padding-inline: 52px;
	}
}


/* Le crédit sous une vidéo : discret, mais toujours présent.
   Une vidéo sans source affichée passerait pour la nôtre. */
.pistache-video__credit,
.pistache-videos__vue .pistache-video__credit {
	display: block;
	margin-top: 0.35rem;
	font-size: clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
	color: var(--wp--preset--color--custom-gris-texte);
	text-align: center;
}

.pistache-videos__vue .pistache-video__credit {
	text-align: left;
	margin-top: 0.15rem;
}

.pistache-video__credit a {
	color: inherit;
	text-decoration: none;
}

.pistache-video__credit a:hover,
.pistache-video__credit a:focus-visible {
	text-decoration: underline;
}

/* « Voir en plein écran sur Instagram » sous la vidéo (30 octobre 2026) : le lecteur
   d'Instagram n'a pas de bouton plein écran. */
.pistache-video__plein-ecran {
	max-width: 400px;
	margin: calc(-1 * var(--wp--preset--spacing--medium) + 0.25rem) auto var(--wp--preset--spacing--medium);
	font-size: clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
	text-align: center;
}

.pistache-video__plein-ecran a {
	color: var(--wp--preset--color--custom-gris-texte);
}

/* « La suite après la vidéo » : juste au-dessus de la vidéo, presque collée,
   comme « La suite après la publicité » au-dessus du pavé (1er novembre 2026). */
.pistache-video__suite {
	max-width: 400px;
	margin: var(--wp--preset--spacing--medium) auto 0.3rem;
	font-size: clamp(0.66rem, 0.63rem + 0.15vw, 0.74rem);
	color: var(--wp--preset--color--custom-gris-texte);
	text-align: center;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

.pistache-video__suite + .pistache-video {
	margin-top: 0;
}


/* ==========================================================
   16. Petits écrans : une ligne qui glisse plutôt qu'une
       ligne qui se casse
   ==========================================================
   Sur un téléphone, quatre filtres ne tiennent pas côte à côte :
   « Coup de cœur » tombait seul sur une deuxième ligne, désaligné.
   Plutôt que de le laisser tomber, la ligne devient glissante —
   c'est le geste que tout le monde connaît sur un téléphone, et
   les quatre restent alignés.
   ========================================================== */

@media (width <= 780px) {

	.pistache-filtres {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* La barre de défilement mangerait la ligne de séparation. */
		padding-bottom: 0.6rem;
	}

	.pistache-filtres::-webkit-scrollbar {
		display: none;
	}

	.pistache-filtre {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Une respiration à droite : on voit qu'il reste quelque chose. */
	.pistache-filtres::after {
		content: "";
		flex: 0 0 0.5rem;
	}
}


/* ==========================================================
   17. Les sections de l'accueil sur téléphone
   ==========================================================
   Sur ordinateur, les 4 cartes sont côte à côte : rien à faire
   glisser, les flèches n'ont pas lieu d'être. Sur téléphone, une
   seule carte tient à l'écran — on en montre une, plus un morceau
   de la suivante, et deux flèches disent qu'il y a une suite.
   ========================================================== */

.pistache-cartes-bande {
	position: relative;
}

/* Sur ordinateur, aucune flèche : tout est déjà visible. */
.pistache-bande__fleche {
	display: none;
}

@media (width <= 780px) {

	.pistache-cartes {
		display: flex;
		gap: var(--wp--preset--spacing--x-small);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* Un peu d'air pour que l'ombre des flèches ne soit pas coupée. */
		padding-block: 2px;
	}

	.pistache-cartes::-webkit-scrollbar {
		display: none;
	}

	.pistache-cartes > li {
		/* 86 % : on voit nettement qu'une carte suivante commence. */
		flex: 0 0 86%;
		scroll-snap-align: center;
		min-width: 0;
	}

	.pistache-bande__fleche:not([hidden]) {
		position: absolute;
		/* 37 % : mesuré, c'est le milieu exact de la photo d'une
		   carte (176 px de photo dans une carte de 238 px). */
		top: 37%;
		transform: translateY(-50%);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, .92);
		color: var(--wp--preset--color--custom-vert-fonc, #2f4429);
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	}

	.pistache-bande__fleche svg {
		width: 60%;
		height: 60%;
	}

	.pistache-bande__fleche.est-avant {
		left: 4px;
	}

	.pistache-bande__fleche.est-apres {
		right: 4px;
	}

	.pistache-bande__fleche.est-au-bout {
		opacity: .45;
	}

	/* Les tops : la carte couchée reprend la mise en page verticale. */
	.pistache-section.est-large .pistache-carte-lien > a {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pistache-cartes {
		scroll-behavior: auto;
	}
}


/* ==========================================================
   18. Le logo de la grande en-tête, vraiment au centre
   ==========================================================
   La ligne verte range trois éléments « aux extrémités » :
   FR/EN (76 px), le logo (280 px), les réseaux (144 px). Comme
   les deux côtés n'ont pas la même largeur, le logo tombait
   34 px trop à gauche — exactement la moitié de l'écart.
   On donne aux deux côtés la même part : le logo retrouve le
   centre exact, quelle que soit la largeur de l'écran.
   ========================================================== */

.pistache-entete__haut .pistache-langue,
.pistache-entete__haut .pistache-reseaux-entete {
	flex: 1 1 0;
	min-width: 0;
}

.pistache-entete__haut .pistache-reseaux-entete {
	justify-content: flex-end;
}


/* ==========================================================
   18 bis. Le bouton FR/EN
   ==========================================================
   Version 1, choisie par Stéphane le 9 octobre 2026, sur le modèle de
   Le Bonbon : la pastille d'avant (même forme, même taille, contour de
   2 px) remplie de vert, FR et EN en gras dans deux moitiés égales, et
   un curseur blanc sous la langue de la page. Au survol de l'autre
   langue, ou quand le clavier s'y pose, le curseur glisse vers elle
   (0,3 s) ; le clic ouvre la page traduite.

   Le HTML vient de inc/bilingue.php (selecteur_de_langue) : classe
   « pistache-bascule » et « data-langue-active ». Il sert partout où
   est le bouton : haut de page, barre réduite, menu du téléphone.

   Les sélecteurs sont longs exprès : WordPress rend transparent le fond
   des boutons « contour » avec une règle à 4 classes. Les marges
   latérales, elles, sont écrites dans le bloc lui-même : seul
   « !important » passe devant. Contraste : blanc sur #5C7A52 = 4,8:1. */

.pistache-langue .wp-block-button.is-style-outline > .wp-block-button__link.pistache-bascule {
	position: relative;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background-color: var(--wp--preset--color--custom-principale-vert);
	outline-color: var(--wp--preset--color--custom-principale-vert);
	isolation: isolate;
	cursor: default;
}

/* Le curseur blanc : sous FR, ou sous EN sur une page anglaise. */
.pistache-langue .pistache-bascule::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 2px;
	bottom: 2px;
	left: 2px;
	width: calc(50% - 2px);
	border-radius: 20px;
	background-color: var(--wp--preset--color--custom-blanc);
	transition: transform 0.3s ease;
}

.pistache-langue .pistache-bascule[data-langue-active="en"]::before {
	transform: translateX(100%);
}

.pistache-langue .pistache-bascule .pistache-bascule__langue {
	position: relative;
	z-index: 1;
	padding: 0 9px;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--custom-blanc);
	transition: color 0.3s ease;
}

/* La langue de la page : verte, sur le curseur blanc. */
.pistache-langue .pistache-bascule strong.pistache-bascule__langue {
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-langue .pistache-bascule a.pistache-bascule__langue {
	cursor: pointer;
}

/* Survol ou clavier sur l'autre langue : le curseur glisse vers elle et
   les couleurs s'échangent. Un navigateur qui ne connaît pas « :has »
   ignore ces règles : le bouton reste juste, sans glissement. */
.pistache-langue .pistache-bascule[data-langue-active="fr"]:has(a:hover, a:focus-visible)::before {
	transform: translateX(100%);
}

.pistache-langue .pistache-bascule[data-langue-active="en"]:has(a:hover, a:focus-visible)::before {
	transform: translateX(0);
}

.pistache-langue .pistache-bascule:has(a:hover, a:focus-visible) strong.pistache-bascule__langue {
	color: var(--wp--preset--color--custom-blanc);
}

.pistache-langue .pistache-bascule:has(a:hover, a:focus-visible) a.pistache-bascule__langue {
	color: var(--wp--preset--color--custom-principale-vert);
}

@media (prefers-reduced-motion: reduce) {

	.pistache-langue .pistache-bascule::before,
	.pistache-langue .pistache-bascule .pistache-bascule__langue {
		transition: none;
	}
}


/* ==========================================================
   19. La liste d'une famille d'étiquettes
   ==========================================================
   « Par quartier » et, plus tard, « Temps forts ».
   ========================================================== */

.pistache-etiquettes {
	list-style: none;
	margin: var(--wp--preset--spacing--small) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--x-small);
}

.pistache-etiquette {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.75em 1em;
	border: 1px solid var(--wp--preset--color--border-light, rgba(0, 0, 0, .12));
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	/* Un nom de quartier long ne doit pas élargir la grille. */
	overflow-wrap: anywhere;
}

.pistache-etiquette:hover,
.pistache-etiquette:focus-visible {
	border-color: var(--wp--preset--color--custom-principale-vert);
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-etiquette__nom {
	font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.05rem);
	line-height: 1.3;
}

.pistache-etiquette__compte {
	font-size: clamp(0.74rem, 0.72rem + 0.1vw, 0.82rem);
	color: var(--wp--preset--color--custom-gris-texte);
}

/* ==========================================================
   20. Le bandeau cookies (Complianz)
   ==========================================================
   Tout le reste (textes, couleurs, largeur, coins arrondis, croix
   retiree) est regle dans Complianz lui-meme. Ne restent ici que les
   points que son tableau de bord ne sait pas faire.

   Sa feuille de style est chargee APRES celle du theme. A force egale
   c'est donc lui qui gagne. On accroche chaque regle a l'identifiant du
   conteneur, #cmplz-cookiebanner-container, qui passe devant sans avoir
   a ecrire « !important » partout.
   ========================================================== */

/* Le titre en gras, comme demande. Complianz le pose a 500. */
#cmplz-cookiebanner-container .cmplz-title {
	font-weight: 700;
}

/* Ordre d'affichage : Tout accepter · Parametrer vos choix · Refuser.
   Dans le code du bandeau ils arrivent dans l'ordre accepter / refuser /
   parametrer. On ne touche pas au code, seulement a l'ordre affiche. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept {
	order: 1;
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences {
	order: 2;
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-deny {
	order: 3;
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-save-preferences {
	order: 2;
}

/* Le voile derriere le bandeau. Complianz le pose en noir a 70 %, ce qui
   masque la page. On veut la page « legerement grisee » : encore lisible,
   non cliquable, et qui defile toujours. */
#cmplz-cookiebanner-container.cmplz-soft-cookiewall {
	background-color: rgba( 44, 44, 42, 0.3 );
}

/* Sur mobile et tablette, Complianz colle le bandeau bord a bord et les
   coins arrondis disparaissent. On lui rend la meme marge que sur ordinateur. */
@media ( max-width: 1023px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: calc( 100% - 20px );
		max-width: calc( 100% - 20px );
		margin-bottom: 10px;
	}
}

/* « Toujours actif », dans le detail des choix, est ecrit en vert navigateur
   par Complianz. On le remet au vert de la charte. */
#cmplz-cookiebanner-container .cmplz-always-active {
	color: var( --wp--preset--color--custom-principale-vert );
}

/* Complianz impose 250 px de large a chaque bouton. A trois boutons cela fait
   770 px, ce qui deborde du bandeau des que l'ecran descend sous 1300 px :
   « Refuser » se retrouvait coupe a droite. On laisse les boutons prendre la
   largeur de leur texte, et s'il manque vraiment de place ils passent a la
   ligne au lieu d'etre rognes. */
@media ( min-width: 1024px ) {

	#cmplz-cookiebanner-container .cmplz-buttons {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
		flex: 0 1 auto;
		width: auto;
		min-width: 0;
		padding-left: 26px;
		padding-right: 26px;
	}
}

/* Sous 425 px, Complianz masque purement et simplement le titre. Or c'est la
   phrase qui porte le message. On le remet.
   Regle etendue a 767 px : l'en-tete de Complianz reserve 100 px a gauche
   pour un logo et 100 px a droite pour la croix. Les deux sont absents chez
   nous, mais la place restait prise — sur un telephone de 430 px il ne
   restait que 170 px au titre, qui se coupait n'importe ou. */
@media ( max-width: 767px ) {

	#cmplz-cookiebanner-container .cmplz-header {
		grid-template-columns: 1fr;
	}

	#cmplz-cookiebanner-container .cmplz-header .cmplz-title {
		display: block;
		grid-column-start: 1;
		text-align: center;
	}
}

/* Ecrans bas (mobile tenu en paysage). Complianz force le bandeau a occuper
   toute la hauteur de l'ecran, ce qui creuse un grand vide entre le titre et
   le texte. On le laisse s'ajuster a son contenu ; la limite de hauteur posee
   plus haut par le plugin continue de proteger les tres petits ecrans. */
@media ( max-height: 400px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		height: auto;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
		flex: 0 1 auto;
	}
}

/* Les interrupteurs de « Parametrer vos choix ».
   Au repos le rail est blanc : sans bordure il serait invisible sur le fond
   blanc du bandeau. On lui donne donc un contour et une boule gris charte,
   a gauche. Une fois active, le rail passe au vert et la boule devient
   blanche, a droite : la position, la couleur du rail ET celle de la boule
   changent toutes les trois, on ne peut pas se tromper. */
#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox .cmplz-label::before {
	border: 1px solid var( --wp--preset--color--custom-gris-texte );
}

#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox .cmplz-label::after {
	background: var( --wp--preset--color--custom-gris-texte );
}

#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
	border-color: var( --cmplz_slider_active_color );
}

#cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after {
	background: var( --wp--preset--color--custom-blanc );
}

/* Sur ordinateur, le bandeau pleine largeur etait trop allonge et trop plat.
   On le resserre et on le recentre en bas : le texte tient sur plus de
   lignes, la forme devient plus carree. */
@media ( min-width: 1024px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: min( 980px, calc( 100% - 20px ) );
		max-width: min( 980px, calc( 100% - 20px ) );
		left: 0;
		right: 0;
		margin-inline: auto;
	}
}

/* Telephone tenu en paysage. Complianz y reduit tout a 60 % (et les boutons
   a 30 %), ce qui rendait le texte minuscule sur un bandeau etire d'un bord
   a l'autre. Comme le bandeau s'ajuste desormais a son contenu, cette
   reduction n'a plus lieu d'etre : on revient a une taille normale et on
   resserre la largeur. Les « !important » sont necessaires : Complianz en
   utilise lui-meme sur ces memes proprietes. */
@media ( max-height: 400px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: min( 680px, calc( 100% - 20px ) );
		max-width: min( 680px, calc( 100% - 20px ) );
		left: 0;
		right: 0;
		margin-inline: auto;
		transform: none;
		zoom: 1;
		padding: 15px 20px !important;
		gap: 10px !important;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
		margin-bottom: 0 !important;
		max-height: none;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
		margin-top: 0 !important;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		gap: 10px !important;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		height: auto !important;
		min-height: 45px !important;
		zoom: 1 !important;
		padding: 10px 26px !important;
		font-size: var( --cmplz_button_font_size ) !important;
		line-height: 20px !important;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-information {
		zoom: 1 !important;
	}
}

/* « Parametrer vos choix » et « Refuser » : bordure retiree comme demande.
   Sans bordure NI fond ils cessaient de ressembler a des boutons, ce qui
   pose probleme : la CNIL demande que refuser soit aussi visible et aussi
   simple qu'accepter. On applique donc le repli prevu — un gris tres leger,
   ici en aplat plutot qu'en trait, car un trait de cette clarte ne se voit
   pas sur fond blanc. Ils restent des boutons, mais tres discrets a cote
   du vert plein de « Tout accepter ». */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	background-color: var( --wp--preset--color--custom-secondaire-gris-clair );
	border-color: var( --wp--preset--color--custom-secondaire-gris-clair );
}

/* Un peu plus resserre encore sur ordinateur, pour une forme moins allongee. */
@media ( min-width: 1024px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: min( 820px, calc( 100% - 20px ) );
		max-width: min( 820px, calc( 100% - 20px ) );
	}
}

/* Forme du bandeau sur ordinateur. Complianz place le texte a gauche et les
   boutons a droite : en resserrant la largeur, les trois boutons ne tenaient
   plus sur une ligne et « Refuser » se retrouvait seul, relegue. On donne
   donc aux boutons leur propre ligne, sous le texte. Le bandeau devient
   nettement moins allonge, et les trois boutons restent alignes ensemble. */
@media ( min-width: 1024px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: min( 700px, calc( 100% - 20px ) );
		max-width: min( 700px, calc( 100% - 20px ) );
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		grid-column: 1 / -1;
		grid-row-start: auto;
		flex-wrap: nowrap;
		justify-content: center;
	}
}

/* Sur telephone, le titre doit se couper apres « proteger », pour que
   « vos donnees » passe dessous et que « proteger » finisse la ligne.
   On ne peut pas poser de saut de ligne dans le texte : Complianz retire
   tout HTML du titre a l'affichage. On limite donc la largeur : la ligne
   ne peut plus contenir la phrase entiere, et comme « vos donnees » est
   lie par une espace insecable, la coupure ne peut tomber qu'avant « vos ».
   18em laisse de la marge des deux cotes : assez large pour toute la
   premiere ligne, trop etroit pour la phrase complete. */
@media ( max-width: 767px ) {

	#cmplz-cookiebanner-container .cmplz-title {
		max-width: 18em;
		margin-inline: auto;
	}
}

/* Toujours en paysage : sous 768 px de large, Complianz empile les boutons.
   Sur un ecran de 375 px de haut le bandeau prenait alors 95 % de la hauteur.
   En paysage la largeur ne manque pas : on les remet cote a cote. */
@media ( max-height: 400px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		flex-direction: row;
	}
}

/* Complianz attend UNE SECONDE avant de faire glisser le bandeau, plus une
   demi-seconde d'animation. La page semblait donc mettre plus d'une seconde
   a se charger alors que le serveur repond en un quart de seconde : c'est le
   bandeau qui se faisait attendre, pas le site. On reduit l'attente.
   Sa regle porte deja un identifiant : on ajoute la classe .cmplz-show pour
   passer devant sans « !important ». */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}

/* Sur ordinateur uniquement : groupe de boutons centre sous le texte, dans
   l'ordre Refuser · Parametrer vos choix · Tout accepter. Sur les autres
   formats l'ordre reste Tout accepter en premier, comme demande. */
@media ( min-width: 1024px ) {

	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-deny {
		order: 1;
	}

	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-view-preferences,
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-save-preferences {
		order: 2;
	}

	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-accept {
		order: 3;
	}
}

/* Sur ordinateur, le bandeau collait presque au bord bas de l'ecran.
   On le decolle legerement. Les autres formats gardent leur marge de
   10 px : sur un telephone, la place manque trop pour se le permettre. */
@media ( min-width: 1024px ) {

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		margin-bottom: 28px;
	}
}


/* -----------------------------------------------------------------
   LE TITRE DES PAGES DE DÉSINSCRIPTION
   -----------------------------------------------------------------
   Le 21 septembre 2026, ce titre avait été réduit à la demande de
   Stéphane. Résultat : il détonnait. Mesuré sur trois pages de
   référence — /expositions/, /qui-sommes-nous/, /mentions-legales/ —
   tout le site porte ses titres de page en Fraunces 46,4 px,
   graisse 600, couleur #2c2c2a. La règle de réduction est donc
   retirée : ces deux pages reprennent la taille du site.
   Le corps, lui, n'avait jamais bougé : Inter 18,64 px, comme
   partout ailleurs.
   ----------------------------------------------------------------- */


/* -----------------------------------------------------------------
   GUIDES « AUJOURD'HUI » ET « CE SOIR » (28 septembre 2026)
   -----------------------------------------------------------------
   La liste, la phrase « rien pour aujourd'hui » et « Où dîner ce
   soir » : entre eux, le même écart qu'entre les blocs d'un article.
   ----------------------------------------------------------------- */

.pistache-maintenant > * + * {
	margin-block-start: var(--wp--style--block-gap, 1.5rem);
}


/* -----------------------------------------------------------------
   L'ESPACE ENTRE LA PHOTO PRINCIPALE ET LE TEXTE (29 septembre 2026)
   -----------------------------------------------------------------
   Sous la photo, l'espace n'était porté QUE par la légende (sa marge
   du bas). Une photo sans légende collait donc au texte : 0 px sur
   Hôtel Le Pigalle, le Petit Palais, Season, Le Très Particulier et
   les guides du jour et du week-end. Sans légende, le texte garde
   désormais le même écart que sous une légende. Avec légende, rien
   ne change.
   ----------------------------------------------------------------- */

main .wp-block-post-featured-image + .wp-block-post-content {
	margin-top: var(--wp--preset--spacing--medium);
}


/* -----------------------------------------------------------------
   TEXTE JUSTIFIÉ, AVEC COUPURE DES MOTS (29 septembre 2026)
   -----------------------------------------------------------------
   Le texte courant des fiches et des guides : justifié, et coupé en
   fin de ligne selon la langue de la page (français ou anglais, lue
   dans <html lang>), pour éviter les grands trous entre les mots.
   Jamais les titres, les cartes, les légendes ni les paragraphes
   auxquels l'éditeur a donné un alignement, ni les lignes à rôle
   particulier (crédit, mention, informations pratiques).

   Sous 360 px de large (les plus petits téléphones), le texte reste
   aligné à gauche, sans coupure de mots : sur une ligne aussi courte,
   la justification laissait trop de trous (décision de Stéphane du
   29 septembre 2026).

   Même règle, à la demande de Stéphane, sur les pages Mentions légales
   (24 octobre 2026 : n° 149 en français, n° 252 en anglais) et Qui
   sommes-nous (25 octobre 2026 : n° 147 en français, n° 250 en
   anglais), puis Protection des données (25 octobre 2026 : n° 3 en
   français, n° 249 en anglais) et la Charte éditoriale (même jour :
   n° 151 en français, n° 254 en anglais). Aucune autre page fixe (consigne du
   25 octobre 2026 : ne modifier que la page en cours). Les listes
   restent alignées à gauche, comme partout, sauf sur Protection des
   données : ses listes sont faites de vraies phrases, sur plusieurs
   lignes, et la moitié du texte serait restée en drapeau.
   ----------------------------------------------------------------- */

@media (min-width: 360px) {
	:is(.single-adresse, .single-exposition, .single-evenement, .single-guide, .page-id-149, .page-id-252, .page-id-147, .page-id-250, .page-id-3, .page-id-249, .page-id-151, .page-id-254) .wp-block-post-content p:not([class*="has-text-align"]):not([class*="pistache-"]),
	:is(.page-id-3, .page-id-249) .wp-block-post-content li,
	.pistache-etape__texte,
	.pistache-maintenant__vide {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 6 3 2;
	}
}

/* Jamais de coupure dans un nom : la marque, les personnes, l'adresse
   du site (inc/blocs-pages.php). Les noms de pages en lien, faits de
   mots ordinaires, peuvent se couper : les protéger creusait des trous
   sur téléphone (mesuré : ×4,5 l'espace normal au lieu de ×3,1). */
.pistache-nom {
	-webkit-hyphens: manual;
	hyphens: manual;
}


/* -----------------------------------------------------------------
   LA PAGE « ANNONCER SUR LA PISTACHE » (11 octobre 2026)
   -----------------------------------------------------------------
   Bloc pistache/annoncer (inc/annoncer.php) : ce qui se réserve, le
   déroulé, la réservation. Mise en forme sobre, celle des autres pages
   fixes : seuls « À fournir » (en gris) et l'avis de réservation fermée
   (filet vert) se distinguent. */
.pistache-annoncer__fournir,
.pistache-annoncer__images {
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-annoncer__etapes li + li {
	margin-top: 0.4em;
}

.pistache-annoncer__ferme {
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--wp--preset--color--custom-principale-vert);
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
	border-radius: 0 8px 8px 0;
}


/* -----------------------------------------------------------------
   LA PHOTO DE STÉPHANE SUR « QUI SOMMES-NOUS » (25 octobre 2026)
   -----------------------------------------------------------------
   Bloc pistache/photo-auteur (inc/auteur.php), en tête du texte :
   à gauche du premier paragraphe, le texte coule à côté. Taille
   moyenne sur ordinateur et tablette ; plus petite sur téléphone,
   toujours à gauche, sans masquer le texte (décision de Stéphane du
   25 octobre 2026). Rien ne s'affiche tant qu'il n'y a pas de photo.
   ----------------------------------------------------------------- */

.wp-block-post-content > .pistache-photo-auteur {
	float: left;
	width: 240px;
	max-width: 40%;
	margin: 0.35em 1.5rem 0.75rem 0 !important;
}

.pistache-photo-auteur img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.wp-block-post-content:has(> .pistache-photo-auteur)::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 599px) {
	.wp-block-post-content > .pistache-photo-auteur {
		width: 120px;
		margin: 0.3em 1rem 0.5rem 0 !important;
	}
}

/* Le premier paragraphe commence à la hauteur de la photo (sans l'écart
   habituel entre deux blocs). */
.wp-block-post-content > .pistache-photo-auteur + * {
	margin-block-start: 0 !important;
}


/* -----------------------------------------------------------------
   CODE PROMO, À DROITE DU BOUTON DE RÉSERVATION (26 octobre 2026)
   -----------------------------------------------------------------
   Version A choisie par Stéphane (« coupon vert clair ») : un cadre vert
   clair à pointillés verts, « -10 % » en gras vert foncé, le code en gras.
   Le code est un bouton qui le copie (assets/js/fiche.js). Sur un petit
   téléphone (moins de 520 px), « avec le code » disparaît ; sous 410 px, bouton
   et code se resserrent sans l'icône ; sous 360 px, le texte rapetisse aussi.
   ----------------------------------------------------------------- */

.pistache-code {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex-wrap: wrap;
	gap: 0.45em;
	padding: 0.5em 0.85em;
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
	border: 1.5px dashed var(--wp--preset--color--custom-principale-vert);
	border-radius: var(--wp--custom--border-radius, 6px);
	font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);
	line-height: 1.3;
	color: var(--wp--preset--color--custom-noir-encre);
}

.pistache-code__avantage {
	font-weight: 700;
	font-size: 1.12em;
	color: var(--wp--preset--color--custom-vert-fonc);
}

.pistache-code__copier {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0; /* zone à toucher plus haute, même aspect (marge négative) */
	margin-block: -0.4em;
	border: none;
	background: none;
	color: var(--wp--preset--color--custom-noir-encre);
	font: inherit;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.pistache-code__copier:hover,
.pistache-code__copier:focus-visible {
	text-decoration: underline;
}

.pistache-code__copier svg {
	flex: none;
	opacity: 0.8;
}

/* « Code copié », juste au-dessus du code, pendant 2 secondes. */
.pistache-code__copier.est-copie::after {
	content: attr(data-copie);
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2em 0.6em;
	border-radius: 4px;
	background: var(--wp--preset--color--custom-vert-fonc);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	white-space: nowrap;
}

@media (max-width: 519px) {
	.pistache-code__mots {
		display: none;
	}
}

/* Sous 410 px (iPhone mini, SE et 12 à 16, la plupart des Android de 360 à 393 px), tout tient
   encore sur la ligne du bouton : bouton et code un peu resserrés, sans l'icône. Seulement sur
   une fiche qui a un code promo : les boutons des autres fiches ne changent pas. Mesuré le
   30 octobre 2026 : à 360 et 375 px, le code passait sous le bouton ; à 390 et 480 px,
   il ne restait qu'1 ou 2 px avec « Réserver une table » d'une fiche Adresse. */
@media (max-width: 409px) {
	.pistache-actions:has(.pistache-code) {
		gap: 6px;
	}

	.pistache-actions:has(.pistache-code) .pistache-bouton {
		padding-inline: 0.8em;
	}

	.pistache-code {
		gap: 0.3em;
		padding: 0.45em 0.55em;
	}

	.pistache-code__copier {
		letter-spacing: 0;
	}

	.pistache-code__copier svg {
		display: none;
	}
}

/* Sous 360 px (petit téléphone, 320 px), le texte du code rapetisse aussi
   (37 px manquaient à 320 px, mesuré le 26 octobre 2026). */
@media (max-width: 359px) {
	.pistache-code {
		font-size: 0.7rem;
	}

	.pistache-actions:has(.pistache-code) .pistache-bouton {
		padding-inline: 0.6em;
	}
}


/* -----------------------------------------------------------------
   DIAPORAMA EN HAUT DES FICHES (26 octobre 2026)
   -----------------------------------------------------------------
   La photo principale puis les photos de la galerie « Diaporama »,
   dans le même cadre 16:9 aux coins arrondis. Défilement natif aimanté
   photo par photo (le doigt suffit sur téléphone), flèches et compteur
   posés sur la photo (inc/diaporama.php, assets/js/diaporama.js).
   ----------------------------------------------------------------- */

.pistache-diapo {
	position: relative;
}

.pistache-diapo__piste {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: 12px;
	aspect-ratio: 16 / 9;
}

.pistache-diapo__piste::-webkit-scrollbar {
	display: none;
}

.pistache-diapo__piste:focus-visible {
	outline: 2px solid var(--wp--preset--color--custom-principale-vert);
	outline-offset: 3px;
}

.pistache-diapo__photo {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	aspect-ratio: 16 / 9;
}

.pistache-diapo__photo > .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.pistache-diapo__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

.pistache-diapo__fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(32px, 3vw, 40px);
	height: clamp(32px, 3vw, 40px);
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: var(--wp--preset--color--custom-vert-fonc, #2f4429);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.pistache-diapo__fleche[hidden] {
	display: none;
}

.pistache-diapo__fleche svg {
	width: 60%;
	height: 60%;
}

.pistache-diapo__fleche.est-avant {
	left: clamp(6px, 1.2vw, 14px);
}

.pistache-diapo__fleche.est-apres {
	right: clamp(6px, 1.2vw, 14px);
}

.pistache-diapo__fleche:hover,
.pistache-diapo__fleche:focus-visible {
	background: #fff;
}

.pistache-diapo__compte {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.5;
	pointer-events: none;
}


/* -----------------------------------------------------------------
   BANDEAU « SE TERMINE BIENTÔT » SUR TÉLÉPHONE (26 octobre 2026)
   -----------------------------------------------------------------
   Sur un téléphone tenu droit, « plus que 5 jours, » disparaît :
   « Se termine bientôt - jusqu’au 31 octobre 2026 ». Mesuré : la
   phrase entière ne tient sur une ligne qu'à partir de 540 px de large
   (inc/blocs-fiches.php, bandeau_bientot).
   ----------------------------------------------------------------- */

@media (max-width: 599px) {
	.pistache-bandeau__reste {
		display: none;
	}
}


/* ----- Annonces maison « À découvrir » (étape 7 du lancement, 31 octobre 2026) -----
   Quand rien d'autre n'est prévu, la bannière, le pavé et la 2e carte de
   « Vous pourriez aimer » présentent un contenu du site (inc/publicite.php,
   section 9). Couleurs et polices du site, pas de cadre de publicité. La
   photo n'occupe qu'une partie de la case : la photo de l'article reste le
   plus grand élément de la page (mesuré). La case garde exactement la
   taille du format (970 × 90, 728 × 90, 320 × 100 ; 970 × 250, 300 × 250) :
   rien ne bouge, et une publicité payée reprend la même place. */
.pistache-annonce {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-right: 12px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
	color: var(--wp--preset--color--custom-noir-encre);
	text-decoration: none;
}

.pistache-annonce__photo {
	flex: none;
	height: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--wp--preset--color--custom-secondaire-gris-clair);
}

.pistache-annonce__photo picture,
.pistache-annonce__photo img {
	display: block;
	width: 100%;
	height: 100%;
}

.pistache-annonce__photo img {
	object-fit: cover;
}

.pistache-annonce__texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.pistache-annonce__mention {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-annonce__titre {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
}

.pistache-annonce__meta {
	overflow: hidden;
	font-size: 0.72rem;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--wp--preset--color--custom-gris-texte);
}

.pistache-annonce__fleche {
	flex: none;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--wp--preset--color--custom-principale-vert);
}

.pistache-annonce:hover .pistache-annonce__titre,
.pistache-annonce:focus-visible .pistache-annonce__titre {
	color: var(--wp--preset--color--custom-principale-vert);
}

/* Bannière sur téléphone (320 × 100) : photo carrée, titre sur deux lignes. */
.pistache-annonce.est-banniere .pistache-annonce__meta,
.pistache-annonce.est-banniere .pistache-annonce__fleche {
	display: none;
}

@media (width >= 768px) {

	/* Bannière 728 × 90 et 970 × 90 : photo 16/9 (160 × 90), titre sur une ligne. */
	.pistache-annonce.est-banniere {
		gap: 18px;
		padding-right: 22px;
	}

	.pistache-annonce.est-banniere .pistache-annonce__photo {
		aspect-ratio: 16 / 9;
	}

	.pistache-annonce.est-banniere .pistache-annonce__titre {
		-webkit-line-clamp: 1;
		font-size: 1.15rem;
	}

	.pistache-annonce.est-banniere .pistache-annonce__meta,
	.pistache-annonce.est-banniere .pistache-annonce__fleche {
		display: block;
	}
}

/* Pavé sur téléphone (300 × 250) : photo en haut, texte dessous. */
.pistache-annonce.est-pave {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.pistache-annonce.est-pave .pistache-annonce__photo {
	width: 100%;
	height: 130px;
	aspect-ratio: auto;
}

.pistache-annonce.est-pave .pistache-annonce__texte {
	gap: 4px;
	padding: 10px 14px 12px;
}

.pistache-annonce.est-pave .pistache-annonce__titre {
	font-size: 1.05rem;
}

.pistache-annonce.est-pave .pistache-annonce__fleche {
	display: none;
}

@media (width >= 768px) {

	/* Pavé 970 × 250 (réduit à la largeur de la case sur tablette) : photo 4/3 à gauche. */
	.pistache-annonce.est-pave {
		flex-direction: row;
		align-items: center;
		gap: 4%;
		padding-right: 4%;
	}

	.pistache-annonce.est-pave .pistache-annonce__photo {
		width: auto;
		height: 100%;
		aspect-ratio: 4 / 3;
	}

	.pistache-annonce.est-pave .pistache-annonce__texte {
		gap: 6px;
		padding: 0;
	}

	.pistache-annonce.est-pave .pistache-annonce__mention {
		font-size: 0.7rem;
	}

	.pistache-annonce.est-pave .pistache-annonce__titre {
		font-size: clamp(1.1rem, 0.55rem + 1.25vw, 1.6rem);
	}

	.pistache-annonce.est-pave .pistache-annonce__meta {
		font-size: 0.85rem;
	}

	.pistache-annonce.est-pave .pistache-annonce__fleche {
		display: block;
		font-size: 1.6rem;
	}
}

/* La 2e carte de « Vous pourriez aimer » : la carte du site, mention verte. */
.pistache-carte-lien__mention.est-decouvrir {
	background: var(--wp--preset--color--custom-secondaire-vert-clair);
	border: 1px solid rgba(92, 122, 82, .35);
	color: var(--wp--preset--color--custom-vert-fonc);
}

/* Sur téléphone, debout ou à l'horizontale (moins de 768 px), l'annonce maison
   prend toute la case, exactement comme la case vide d'avant (demande de
   Stéphane du 31 octobre 2026 : sur un téléphone à l'horizontale de 667 px,
   la bannière faisait 320 px de large au lieu des 619 de la case). Une
   publicité payée garde son format exact (320 × 100, 300 × 250), centré. */
@media (width < 768px) {

	.pistache-pub.est-source-autopromo .pistache-pub__cadre {
		width: 100%;
	}
}

/* Jusqu'à 600 px, la case touche les deux bords de l'écran, sans coins arrondis. */
@media (width <= 600px) {

	.pistache-pub.est-source-autopromo .pistache-annonce {
		border-radius: 0;
	}
}

/* Case assez large (téléphone à l'horizontale) : la ligne du dessous et la
   flèche dans la bannière ; le pavé reprend la photo à gauche. */
@media (480px <= width < 768px) {

	.pistache-annonce.est-banniere .pistache-annonce__meta,
	.pistache-annonce.est-banniere .pistache-annonce__fleche {
		display: block;
	}

	.pistache-annonce.est-banniere {
		padding-right: 18px;
	}
}

@media (601px <= width < 768px) {

	.pistache-annonce.est-pave {
		flex-direction: row;
		align-items: center;
		gap: 22px;
		padding-right: 22px;
	}

	.pistache-annonce.est-pave .pistache-annonce__photo {
		width: auto;
		height: 100%;
		aspect-ratio: 4 / 3;
	}

	.pistache-annonce.est-pave .pistache-annonce__texte {
		padding: 0;
	}

	.pistache-annonce.est-pave .pistache-annonce__fleche {
		display: block;
		font-size: 1.4rem;
	}
}


/* ----- Le grand titre (H1) de l'accueil, invisible à l'écran -----
   Lu par Google, les IA et les lecteurs d'écran ; hors du flux de la page :
   rien ne bouge (inc/blocs-accueil.php, 1er novembre 2026). */
.pistache-titre-cache {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}