/**
 * pp-patterns.css
 * Compositions Gutenberg — styles partages.
 *
 * Anciennement patterns.css. Renomme pour aligner les quatre
 * feuilles du theme sur le meme prefixe.
 *
 * Charge sur le site ET dans l'editeur, sans prefixe de portee :
 * les classes .pp-card / .pp-lead sont assez specifiques pour
 * n'avoir besoin d'aucun conteneur.
 *
 * SPECIFICITE — a lire avant toute modification.
 *
 * pp-content.css cible le contenu par des selecteurs de type
 * « :is(.pp-contenu, .editor-styles-wrapper) h3 », soit (0,1,1).
 * Une classe seule comme « .pp-card__title » ne vaut que (0,1,0) :
 * elle perd.
 *
 * Toutes les regles d'element sont donc imbriquees sous « .pp-card »,
 * ce qui donne (0,2,0) et l'emporte proprement, sans !important.
 * Ne pas « simplifier » ces selecteurs en retirant le parent.
 *
 * VALEURS DE REPLI — il n'y en a plus. Les anciennes (« #14213d »,
 * « #0b69b1 ») dataient d'une palette abandonnee : en cas de
 * chargement partiel elles auraient affiche de fausses couleurs,
 * plus difficiles a diagnostiquer qu'une propriete ignoree.
 */

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

/**
 * Valeurs relevees sur la maquette. Elles ne correspondent a aucun
 * palier de --pp-space-*, d'ou des variables locales plutot qu'un
 * jeton detourne.
 */
.pp-card {
	--pp-card-padding: 2.5rem;  /* 40 px */
	--pp-card-gap: 1.25rem;     /* 20 px */

	background: var(--pp-cream);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-card-padding);
	display: flex;
	flex-direction: column;
	gap: var(--pp-card-gap);
	text-align: left;
}

/**
 * Filet de securite. Si un groupe conserve la classe has-global-padding
 * — mise en page contrainte, contenu deja enregistre en base — sa marge
 * interieure laterale viendrait s'ajouter a celle de la carte et
 * decalerait les textes vers la droite.
 */
.pp-card.has-global-padding {
	padding-inline: var(--pp-card-padding);
}

/* Sous 600 px, 40 px de marge interieure mangent la largeur utile. */
@media (max-width: 599px) {
	.pp-card {
		--pp-card-padding: 1.5rem;
	}
}

/**
 * Hauteurs egales en grille : ne PAS utiliser height: 100% ici. Sans
 * parent a hauteur definie — c'est le cas dans la previsualisation de
 * l'inserteur — la carte s'etire et gonfle la vignette. Les enfants
 * d'une grille CSS s'etirent deja d'eux-memes (align-items: stretch
 * par defaut), ce qui suffit a aligner les boutons via margin-top: auto.
 */

/**
 * Neutralise ce que la mise en page de WordPress et pp-content.css
 * imposent aux enfants : marges verticales, marges automatiques de
 * centrage, largeur maximale.
 *
 * Le selecteur d'element est necessaire pour atteindre (0,1,1) et
 * couvrir les cas ou pp-content.css cible les titres et paragraphes.
 */
.pp-card > *,
.pp-card > :is( h1, h2, h3, h4, h5, h6, p, figure, div, ul, ol ) {
	margin-block: 0;
	margin-inline: 0;
	max-width: none;
}

/* Visuel ------------------------------------------------------------------ */

.pp-card .pp-card__media {
	margin: 0;
}

.pp-card .pp-card__media img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--pp-radius);
}

/* Icone ------------------------------------------------------------------- */

.pp-card .pp-card__icon {
	margin: 0;
	color: var(--pp-blue);
}

.pp-card .pp-card__icon svg {
	width: 3rem;
	height: 3rem;
	fill: currentColor;
}

/* Titre ------------------------------------------------------------------- */

.pp-card .pp-card__title {
	font-family: var(--pp-font);
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--pp-navy);
	text-align: left;
	text-wrap: balance;

	/* Garde-fou : au-dela de trois lignes, le titre est tronque. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Resume ------------------------------------------------------------------ */

.pp-card .pp-card__text {
	font-family: var(--pp-font);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--pp-muted);
	text-align: left;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Bouton ------------------------------------------------------------------ */

.pp-card .pp-card__actions {
	margin-top: auto; /* colle le bouton en bas quelle que soit la hauteur */
}

.pp-card .pp-card__cta .wp-block-button__link {
	background-color: var(--pp-blue);
	color: var(--pp-white);
	border: 0;
	border-radius: var(--pp-radius-pill);
	padding: 0.8rem 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.pp-card .pp-card__cta .wp-block-button__link:hover,
.pp-card .pp-card__cta .wp-block-button__link:focus-visible {
	background-color: var(--pp-saffron);
	color: var(--pp-navy);
}

.pp-card .pp-card__cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--pp-navy);
	outline-offset: 2px;
}

/* Editeur ----------------------------------------------------------------- */

.editor-styles-wrapper .pp-card .pp-card__title,
.editor-styles-wrapper .pp-card .pp-card__text {
	/* Le clamp masquerait le texte en cours de saisie. */
	display: block;
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.pp-card .pp-card__cta .wp-block-button__link {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Texte mis en avant
   -------------------------------------------------------------------------- */

/**
 * La taille (26 px, fluide jusqu'a 20 px) vient du prereglage pp-lead
 * applique par le bloc. Cette regle ne porte que ce que theme.json ne
 * peut pas exprimer sur un bloc seul : la graisse et la mesure.
 *
 * Classe doublee pour atteindre (0,2,0) : ce bloc vit hors d'une carte,
 * il n'a pas de parent sur lequel s'appuyer face aux regles de contenu.
 */
.pp-lead.pp-lead {
	font-weight: 500;
	line-height: 1.4;
	color: var(--pp-navy);
	max-width: var(--pp-measure);
}

/* --------------------------------------------------------------------------
   Cartes a icones
   --------------------------------------------------------------------------
   Ces classes etaient posees par la composition icon-cards mais
   n'existaient dans aucune feuille : le bloc s'affichait sans mise en
   forme. Reconstruction sobre, a confronter a la maquette.
   -------------------------------------------------------------------------- */

.pp-icon-cards {
	gap: 14px;
}

.pp-icon-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 100%;
	background: var(--pp-white);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 20px 22px;
	transition: border-color 0.18s ease;
}

.pp-icon-card:hover {
	border-color: var(--pp-navy);
}

.pp-icon-card .pp-icon-card__text > * {
	margin-block: 0;
}

.pp-icon-card .pp-icon-card__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--pp-navy);
}

.pp-icon-card .pp-icon-card__label {
	margin-top: 4px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--pp-muted);
}

/* Pastille creme : le SVG herite de currentColor. */
.pp-icon-card .pp-icon-card__badge {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--pp-cream);
	color: var(--pp-blue);
}

.pp-icon-card .pp-icon-card__badge svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

@media (max-width: 599px) {
	.pp-icon-card {
		padding: 16px 18px;
	}

	.pp-icon-card .pp-icon-card__badge {
		width: 44px;
		height: 44px;
	}
}

/* --------------------------------------------------------------------------
   Fiche personne
   --------------------------------------------------------------------------
   Fiche large sur fond creme, portrait carre a angles arrondis.
   Ne pas confondre avec .pp-personne (pp-content.css, section 11),
   la fiche compacte a photo ronde sur fond blanc.

   Tout est centre au niveau du conteneur : les enfants heritent, il
   n'y a pas de text-align a repeter bloc par bloc.
   -------------------------------------------------------------------------- */

.pp-person {
	--pp-person-padding: 2.5rem;  /* 40 px */

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	height: 100%;
	background: var(--pp-cream);
	border-radius: var(--pp-radius-lg);
	padding: var(--pp-person-padding);
	text-align: center;
}

/* Meme filet de securite que .pp-card : si le groupe conserve
   has-global-padding, sa marge laterale s'ajouterait a celle de la fiche. */
.pp-person.has-global-padding {
	padding-inline: var(--pp-person-padding);
}

.pp-person > * {
	margin-block: 0;
	margin-inline: 0;
	max-width: none;
}

/* Portrait ---------------------------------------------------------------- */

.pp-person .pp-person__media {
	margin: 0;
	inline-size: 200px;
	max-inline-size: 100%;
}

.pp-person .pp-person__media img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;

	/* Les portraits en pied cadrent mal au centre : on remonte la
	   zone visible pour garder le visage dans le cercle. */
	object-position: center 30%;
	border-radius: 50%;
}

/* Nom --------------------------------------------------------------------- */

.pp-person .pp-person__name {
	font-family: var(--pp-font);
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--pp-navy);
	text-wrap: balance;
}

/* Fonction ---------------------------------------------------------------- */

/* Pas de text-transform ici, contrairement a .pp-personne__role : la
   fonction se lit comme un titre court, pas comme un surtitre. */
.pp-person .pp-person__role {
	font-family: var(--pp-font);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pp-blue);
}

/* Bouton ------------------------------------------------------------------ */

.pp-person .pp-person__actions {
	margin-top: auto; /* aligne les boutons quand les noms font deux lignes */
	padding-top: 0.5rem;
	justify-content: center;
}

.pp-person .pp-person__cta .wp-block-button__link {
	background-color: var(--pp-blue);
	color: var(--pp-white);
	border: 0;
	border-radius: var(--pp-radius-pill);
	padding: 0.85rem 2rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.pp-person .pp-person__cta .wp-block-button__link:hover,
.pp-person .pp-person__cta .wp-block-button__link:focus-visible {
	background-color: var(--pp-navy);
	color: var(--pp-white);
}

.pp-person .pp-person__cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--pp-navy);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.pp-person {
		--pp-person-padding: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-person .pp-person__cta .wp-block-button__link {
		transition: none;
	}
}
/* ==========================================================================
   Bloc « Nos lieux » — shortcode [pp_venues]

   À coller à la fin de assets/css/pp-patterns.css

   Toutes les règles sont imbriquées sous .pp-venues : aucun risque
   d'écraser les styles globaux du site.
   ========================================================================== */

.pp-venues {
	display: grid;
	grid-template-columns: 31fr 69fr;
	/* Aucun fond ici : il est défini par le conteneur Elementor. */
	color: var(--pp-navy-soft, #4a587a);
}

/* --------------------------------------------------------------------------
   Colonne de gauche : liste des lieux

   Le titre du bloc se gère dans Elementor. Les règles .pp-venues__title
   ci-dessous ne servent que si l'attribut title= est utilisé dans le
   code court, ce qui n'est pas le cas par défaut.
   -------------------------------------------------------------------------- */

.pp-venues__aside {
	padding: 100px 40px 40px 40px;
}

.pp-venues__title {
	margin: 0;
	/* Seul élément à garder le navy soutenu. */
	color: var(--pp-navy, #13294b);
	line-height: 1.05;
}

/* Filet safran sous le titre. */
.pp-venues__title::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 3px;
	margin-top: 1.25rem;
	background-color: var(--pp-saffron, #f2a649);
}

.pp-venues__tabs {
	display: flex;
	flex-direction: column;
	margin-top: 2.5rem;
}

/* Sans titre dans le bloc, la liste démarre en haut de la colonne. */
.pp-venues__tabs:first-child {
	margin-top: 0;
}

.pp-venues__tab {
	/* Neutralise l'apparence native du bouton. */
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--pp-line, #dfe5ee);
	border-radius: 0;
	padding: 1.25rem 0;
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	transition: color 0.15s ease;
	color: var(--pp-navy-soft, #4a587a);
}

.pp-venues__tab:focus {
    background-color: transparent;
    color: inherit;
}

.pp-venues__tab:hover {
    color: var(--pp-navy-soft, #4a587a);
    background-color: transparent;
}

/* Lieu actuellement affiché. */
.pp-venues__tab[aria-selected="true"] {
	font-weight: 700;
}

.pp-venues__tab:focus-visible {
	outline: 2px solid var(--pp-blue, #2c7ad1);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Panneaux de détail

   Tous les panneaux occupent la même case de grille : la hauteur du bloc
   reste stable quand on passe d'un lieu à l'autre, sans à-coup.
   -------------------------------------------------------------------------- */

.pp-venues__panels {
	display: grid;
}

.pp-venues__panel {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 24rem;
}

/* Panneau masqué : il conserve sa place mais devient invisible,
   y compris pour les lecteurs d'écran. */
.pp-venues__panel[hidden] {
	visibility: hidden;
}

.pp-venues__body {
	padding: 3.5rem 3rem;
	max-width: 34rem;
}

.pp-venues__row + .pp-venues__row {
	margin-top: 2rem;
}

.pp-venues__label {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.pp-venues__value {
	line-height: 1.6;
}

/* Précision affichée sous les horaires. */
.pp-venues__note {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--pp-muted, #61728c);
}

/* --------------------------------------------------------------------------
   Photo du lieu

   L'image est positionnée en absolu pour qu'elle remplisse la colonne
   sans jamais imposer sa propre hauteur au bloc.
   -------------------------------------------------------------------------- */

.pp-venues__media {
	position: relative;
	overflow: hidden;
}

.pp-venues__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Tablette et mobile

   Une seule colonne : la liste au-dessus, puis la photo, puis le texte.
   Les panneaux masqués sortent du flux pour éviter les blancs.
   -------------------------------------------------------------------------- */

@media (max-width: 61.99em) {

	.pp-venues {
		grid-template-columns: 1fr;
	}

	.pp-venues__aside {
		padding: 100px 20px 20px 40px;
	}

	.pp-venues__panels {
		display: block;
	}

	.pp-venues__panel {
		display: flex;
		flex-direction: column-reverse;
		min-height: 0;
	}

	.pp-venues__panel[hidden] {
		display: none;
		visibility: visible;
	}

	.pp-venues__media {
		min-height: 14rem;
	}

	.pp-venues__media img {
		position: static;
		height: 14rem;
	}

	.pp-venues__body {
		padding: 2rem 1.5rem 2.5rem;
		max-width: none;
	}
}