/**
 * Variations de style des blocs natifs.
 *
 * Chaque sélecteur correspond à une variation déclarée dans
 * inc/block-styles.php. Les compositions n'emploient que des blocs du cœur :
 * c'est ici que se joue leur habillage.
 */

/* ==========================================================================
   Groupe — cartes et sections
   ========================================================================== */

.wp-block-group.is-style-carte {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--rayon--carte);
	overflow: hidden;
}

.wp-block-group.is-style-carte-azur {
	background: var(--wp--preset--color--azur);
	border-radius: var(--wp--custom--rayon--carte);
}

.wp-block-group.is-style-carte-contour {
	background: var(--wp--preset--color--azur-pale);
	border: 1px solid var(--wp--custom--bordure--bleue);
	border-radius: var(--wp--custom--rayon--xl);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Une carte contourée qui est aussi un lien réagit au survol. */
.wp-block-group.is-style-carte-contour:hover {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-group.is-style-carte-sombre {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--rayon--carte);
}

.wp-block-group.is-style-section-sombre {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-group.is-style-filet-haut {
	border-top: 1px solid var(--wp--custom--bordure--neutre);
}

.wp-block-group.is-style-filet-bas {
	border-bottom: 1px solid var(--wp--custom--bordure--neutre);
}

/*
 * Dans un contexte sombre, les textes secondaires et les surtitres doivent
 * basculer vers les teintes claires de la palette.
 */
:is(.is-style-carte-sombre, .is-style-section-sombre, .has-contrast-background-color)
	:where(p:not([class*="has-"]), li:not([class*="has-"])) {
	color: var(--wp--preset--color--texte-clair);
}

:is(.is-style-carte-sombre, .is-style-section-sombre, .has-contrast-background-color)
	.is-style-surtitre:not([class*="has-text-color"]) {
	color: var(--wp--preset--color--ciel);
}

/* ==========================================================================
   Paragraphe — rôles éditoriaux
   ========================================================================== */

.wp-block-paragraph.is-style-surtitre,
p.is-style-surtitre {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	/* La maquette laisse l'interlignage par défaut : le figer décalerait
	   la hauteur de toutes les colonnes qui commencent par un surtitre. */
	line-height: normal;
	color: var(--wp--preset--color--primary);
}

.wp-block-paragraph.is-style-chapo,
p.is-style-chapo {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	color: var(--wp--preset--color--texte-bleute);
}

.wp-block-paragraph.is-style-mention,
p.is-style-mention {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.5;
	color: var(--wp--custom--texte--legende);
}

/* ==========================================================================
   Bouton — variantes de la maquette
   ========================================================================== */

.wp-block-button.is-style-pilule .wp-block-button__link {
	border-radius: var(--wp--custom--rayon--pilule);
}

.wp-block-button.is-style-azur .wp-block-button__link {
	background: var(--wp--preset--color--azur);
	color: var(--wp--preset--color--primary-dark);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.wp-block-button.is-style-azur .wp-block-button__link:hover,
.wp-block-button.is-style-azur .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-contour-clair .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--azur);
	border: 1px solid rgba(234, 244, 252, 0.3);
}

.wp-block-button.is-style-contour-clair .wp-block-button__link:hover,
.wp-block-button.is-style-contour-clair .wp-block-button__link:focus-visible {
	background: rgba(234, 244, 252, 0.1);
	color: var(--wp--preset--color--base);
}

/* Lien de rubrique : pas de fond, juste un filet bleu sous le texte. */
.wp-block-button.is-style-lien-souligne .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	padding: 0 0 4px;
	border-radius: 0;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	/* Interlignage par défaut : la maquette n'en pose pas sur ce lien. */
	line-height: normal;
}

.wp-block-button.is-style-lien-souligne .wp-block-button__link:hover,
.wp-block-button.is-style-lien-souligne .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
}

/* Appel à l'action pleine largeur, utilisé dans les encarts d'estimation. */
.wp-block-button.is-style-bloc {
	width: 100%;
}

.wp-block-button.is-style-bloc .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding: 18px 24px;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: clamp(16px, 1.7vw, 18px);
	/* Interlignage par défaut comme dans la maquette : la valeur globale des
	   boutons (1.3) rendrait l'encart plus haut de quelques pixels. */
	line-height: normal;
	letter-spacing: -0.02em;
}

/* ==========================================================================
   Liste — coches et pilules
   ========================================================================== */

.wp-block-list.is-style-coches {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * La maquette place la coche dans un span, en ligne flex avec un gap de
 * 10 px : la boîte de ligne suit donc la police de repli du caractère. On
 * reproduit ce modèle, mais avec un pseudo-élément pour que la coche reste
 * décorative et ne soit pas annoncée par les lecteurs d'écran.
 */
/*
 * Le marqueur est sorti du flux : en grille ou en flex, un élément de liste
 * contenant une balise en ligne (un <strong>, par exemple) produit un
 * deuxième élément de mise en page, et son texte se retrouve renvoyé dans la
 * colonne du marqueur — un mot par ligne. En position absolue, le contenu
 * reste en flux normal quelle que soit sa composition.
 */
.wp-block-list.is-style-coches > li {
	position: relative;
	padding-left: var(--ipd-retrait-puce, 30px);
}

.wp-block-list.is-style-coches > li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--primary);
}

:is(.is-style-carte-sombre, .is-style-section-sombre, .has-contrast-background-color)
	.wp-block-list.is-style-coches > li::before {
	color: var(--wp--preset--color--ciel);
}

/* Liste de communes : des étiquettes qui s'enroulent. */
.wp-block-list.is-style-puces-pilules {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wp-block-list.is-style-puces-pilules > li {
	padding: 7px 13px;
	border-radius: var(--wp--custom--rayon--pilule);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--bleu-clair);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--texte--fonce);
	line-height: normal;
}

/* ==========================================================================
   Titre — filet de séparation
   ========================================================================== */

.wp-block-heading.is-style-souligne {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

/* ==========================================================================
   Icône — pastille azur
   ========================================================================== */

/*
 * Socle du conteneur d'icône, repris de la feuille du bloc `core/icon` : sans
 * lui, une version de WordPress antérieure à 7.1 laisse le SVG à sa taille
 * intrinsèque et gonfle les lignes qui le portent.
 */
.wp-block-icon {
	line-height: 0;
}

.wp-block-icon svg {
	box-sizing: border-box;
	fill: currentColor;
}

:where(.wp-block-icon) svg {
	width: 100%;
	height: 100%;
}
/*
 * Les icônes de la maquette sont dessinées au trait. Or le registre d'icônes
 * de WordPress ne conserve que le « viewBox » et les tracés : il retire les
 * attributs de présentation (fill, stroke, stroke-width) et applique un
 * remplissage à la couleur courante. On rétablit donc le rendu au trait en
 * CSS, uniquement sur les emplacements du thème — une icône pleine choisie
 * dans la collection WordPress reste pleine ailleurs.
 */
.wp-block-icon.is-style-pastille svg,
.ipd-contact__icone svg,
.ipd-icone-trait svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ipd-contact__icone svg {
	stroke-width: 1.7;
}

.wp-block-icon.is-style-pastille {
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--rayon--xl);
	background: var(--wp--preset--color--azur);
	color: var(--wp--preset--color--primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wp-block-icon.is-style-pastille svg {
	width: 28px;
	height: 28px;
}

/* Format réduit pour le bandeau de chiffres. */
.wp-block-icon.is-style-pastille.ipd-pastille--sm {
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--rayon--lg);
}

.wp-block-icon.is-style-pastille.ipd-pastille--sm svg {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   Image — couverture
   ========================================================================== */

.wp-block-image.is-style-couverture img {
	width: 100%;
	border-radius: var(--wp--custom--rayon--xxl);
	display: block;
}

/* ==========================================================================
   Colonnes — alignement
   ========================================================================== */

.wp-block-columns.is-style-aligne-bas {
	align-items: flex-end;
}

/* Pastille centrée dans une carte alignée au centre. */
.wp-block-icon.is-style-pastille.ipd-pastille--centree {
	margin-inline: auto;
}

/*
 * Rangée de boutons : la maquette les laisse s'étirer à la même hauteur.
 * WordPress centre les éléments, si bien qu'un bouton bordé (1 px de plus)
 * dépasse son voisin plein de 1,6 px.
 */
.wp-block-buttons.is-layout-flex {
	align-items: stretch;
}

.wp-block-buttons.is-layout-flex > .wp-block-button {
	display: flex;
}

.wp-block-buttons.is-layout-flex > .wp-block-button > .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Bouton posé sur une carte claire : fond blanc, filet bleuté et libellé
 * dans le bleu foncé — la variante secondaire des sections azur.
 */
.wp-block-button.is-style-carte-bouton .wp-block-button__link {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--champ);
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-carte-bouton .wp-block-button__link:hover,
.wp-block-button.is-style-carte-bouton .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--azur);
	border-color: var(--wp--preset--color--primary);
}

/* Bouton à filet neutre, sur fond clair. */
.wp-block-button.is-style-contour-neutre .wp-block-button__link {
	background: transparent;
	border: 1px solid #d9d9d5;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-contour-neutre .wp-block-button__link:hover,
.wp-block-button.is-style-contour-neutre .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--azur);
	border-color: var(--wp--preset--color--primary);
}

/*
 * Liste « à croix » : le pendant négatif de la liste à coches, utilisée pour
 * énumérer ce à quoi on s'expose en se lançant seul.
 */
.wp-block-list.is-style-croix {
	list-style: none;
}

/*
 * La gouttière de bloc ne s'applique pas aux listes : WordPress ne rend pas
 * `ul` en flex. La maquette espace ses éléments de 12 px — sans cette marge,
 * ils se touchent, et cinq puces perdent près de cinquante pixels.
 */
.wp-block-list.is-style-croix li {
	position: relative;
	padding-left: 32px;
	list-style: none;
}

.wp-block-list.is-style-croix li + li {
	margin-top: 12px;
}

.wp-block-list.is-style-croix li::before {
	content: "✗";
	position: absolute;
	left: 0;
	top: 0;
	color: #b9b9b5;
	font-weight: 700;
}

/*
 * Sur l'accueil, la maquette serre le marqueur contre le texte (rangée flex
 * à 10 px) là où les pages intérieures l'alignent sur une colonne de 18 px.
 */
.wp-block-list.ipd-puces--serre > li {
	--ipd-retrait-puce: 21px;
}

/* Bouton en capitales, repris de la maquette (sections sombres). */
.wp-block-button.ipd-bouton--capitales .wp-block-button__link {
	text-transform: uppercase;
}

/* La maquette fait passer ses grilles de trois colonnes à une seule sous
   1120 px, sans jamais afficher deux colonnes. Une grille de blocs réglée sur
   une largeur minimale ne sait pas l'exprimer : elle intercale deux colonnes. */
@media (max-width: 1120px) {
	.wp-block-group.ipd-grille-1120 {
		grid-template-columns: minmax(0, 1fr);
	}
}