/**
 * Contenu éditorial et éléments de composition.
 *
 * Regroupe les traitements récurrents de la maquette qui ne sont ni une
 * variation de bloc (voir blocs.css) ni un morceau de gabarit (en-tête, pied).
 */

/* ==========================================================================
   1. Étiquette d'avis
   ========================================================================== */

.ipd-etiquette {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px;
	border-radius: var(--wp--custom--rayon--pilule);
	background: var(--wp--preset--color--azur);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

.ipd-etiquette__etoiles {
	color: var(--wp--preset--color--or);
	letter-spacing: 0.1em;
}

/* ==========================================================================
   1 bis. Visuel du héros
   ========================================================================== */

/*
 * Les dimensions et arrondis des images sont portés par ces classes plutôt
 * que par les attributs du bloc Image. Raison : l'éditeur sérialise ces
 * attributs dans un ordre précis (classes « is-resized », « has-custom-border »,
 * styles en ligne sur la balise img) et toute divergence invalide le bloc.
 * En restant sur des classes, les compositions demeurent valides et l'auteur
 * garde la main sur l'image elle-même.
 */

.ipd-hero__visuel img {
	width: 100%;
	max-width: 460px;
	height: auto;
}

/* Bandeau en tête de carte : hauteur fixe de 230 px, coins carrés. */
.ipd-image-bandeau img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/*
 * Visuel du service mis en avant. La maquette utilise une image de fond :
 * elle remplit la cellule sans contribuer à sa hauteur. On reproduit ce
 * comportement en détachant l'image du flux, sinon elle impose sa propre
 * hauteur à la rangée de grille.
 */
.ipd-image-vedette {
	position: relative;
	min-height: 250px;
	overflow: hidden;
}

.ipd-image-vedette {
	background-color: #d9e9f6;
}

.ipd-image-vedette img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/*
 * Bloc poussé en bas d'une carte en colonne (margin-top:auto de la maquette).
 * La classe est doublée pour passer devant « .is-layout-flex > :is(*, div) »
 * du cœur, qui remet toutes les marges à zéro dans une disposition flex.
 */
.ipd-pousse-bas.ipd-pousse-bas {
	margin-top: auto;
}

/*
 * Colonne visuelle étirée sur la hauteur du texte en regard.
 * La maquette pose « align-self: stretch » sur le visuel alors que la grille
 * est centrée (voir base.css), plus une hauteur plancher.
 */
.ipd-media-plein--haut {
	min-height: clamp(300px, 32vw, 440px);
	height: 100%;
}

.ipd-media-plein--haut img {
	min-height: clamp(300px, 32vw, 440px);
	height: 100%;
}

/* Portrait rond de la signature newsletter. */
.ipd-avatar img {
	width: 60px;
	height: 60px;
	border-radius: 99px;
	object-fit: cover;
	background: var(--wp--preset--color--azur);
}

/* Vignette des services secondaires ; la teinte réserve l'emplacement. */
.ipd-vignette img {
	width: 100%;
	height: 78px;
	object-fit: cover;
	background-color: var(--wp--preset--color--azur);
	border-radius: var(--wp--custom--rayon--sm);
	display: block;
}

/* ==========================================================================
   2. Bandeau de chiffres clés
   ========================================================================== */

.ipd-chiffres {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--neutre);
	border-radius: var(--wp--custom--rayon--xxxl);
}

/* Filets de séparation entre les chiffres, seulement entre les cellules. */
.ipd-chiffres > * + * {
	border-left: 1px solid #eef3f8;
}

@container (max-width: 800px) {
	.ipd-chiffres > * + * {
		border-left: 0;
		border-top: 1px solid #eef3f8;
	}
}

/*
 * Pas de « margin: 0 » ici : la gouttière verticale de 4 px vient du blockGap
 * du groupe, et une marge posée par le thème la neutraliserait.
 */
.ipd-chiffre__libelle {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--gris);
}

/* ==========================================================================
   3. Cartes de service et d'actualité
   ========================================================================== */

/*
 * Une carte entière cliquable : le lien du titre est étiré sur la carte.
 * Le reste du texte demeure sélectionnable.
 */
.ipd-carte-lien {
	position: relative;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ipd-carte-lien a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ipd-carte-lien:hover {
	background: #dceaf7;
}

.ipd-carte-lien .wp-block-image,
.ipd-carte-lien .wp-block-post-featured-image {
	overflow: hidden;
}

.ipd-carte-lien img {
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ipd-carte-lien:hover img {
	transform: scale(1.03);
}

/* Métadonnée au-dessus du titre d'article. */
.ipd-carte__meta {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	/* Interlignage par défaut comme la maquette. */
	line-height: normal;
	margin: 0;
}

/* ==========================================================================
   4. Rail horizontal (galerie de biens vendus)
   ========================================================================== */

/*
 * Le rail réutilise le bloc Galerie natif : la sélection doit donc être plus
 * spécifique que « .wp-block-gallery.has-nested-images » du cœur pour
 * remplacer sa disposition en flex par un défilement horizontal.
 */
.ipd-rail,
.wp-block-gallery.has-nested-images.ipd-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(300px, 340px);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ipd-rail::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/*
 * Le bloc Galerie dimensionne ses figures en pourcentages (« width: calc(25%…) »)
 * avec le sélecteur « .wp-block-gallery.has-nested-images figure.wp-block-image ».
 * Pour reprendre la main sans !important, on ajoute simplement la classe du
 * rail : la spécificité passe devant celle du cœur.
 */
/*
 * Le cœur protège sa largeur avec « …figure.wp-block-image:not(#individual-image) »,
 * dont le :not(#id) gonfle artificiellement la spécificité. On reprend la
 * même construction plutôt qu'un !important.
 */
.ipd-rail > *,
.wp-block-gallery.has-nested-images.ipd-rail > figure.wp-block-image:not(#individual-image) {
	scroll-snap-align: start;
	margin: 0;
	width: auto;
	height: 215px;
	flex: 0 0 auto;
	display: block;
}

.wp-block-gallery.has-nested-images.ipd-rail > figure.wp-block-image img {
	width: 100%;
	height: 215px;
	object-fit: cover;
	border-radius: var(--wp--custom--rayon--lg);
	display: block;
}

/* La galerie native masque les légendes en survol : inutile ici. */
.wp-block-gallery.has-nested-images.ipd-rail > figure.wp-block-image figcaption {
	display: none;
}

.ipd-rail-commandes {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.ipd-rail img {
	/* Réservation du visuel, comme dans la maquette. */
	background-color: var(--wp--preset--color--azur);
	width: 100%;
	height: 215px;
	object-fit: cover;
	border-radius: var(--wp--custom--rayon--lg);
	display: block;
	transition: transform 0.25s ease;
}

.ipd-rail a:hover img {
	transform: scale(1.02);
}

/* Boutons de défilement du rail. */
.ipd-rail-commande {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--rayon--pilule);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--custom--bordure--bleue);
	background: var(--wp--preset--color--azur-pale);
	color: var(--wp--preset--color--primary-dark);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.ipd-rail-commande:hover {
	background: var(--wp--preset--color--azur);
}

.ipd-rail-commande--plein {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ipd-rail-commande--plein:hover {
	background: var(--wp--preset--color--primary-dark);
}

.ipd-rail-commande[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ==========================================================================
   5. Grille de partenaires
   ========================================================================== */

.ipd-partenaires img {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--rayon--lg);
	height: 96px;
	width: 100%;
	object-fit: contain;
	padding: 16px;
	display: block;
}

/* ==========================================================================
   6. Formulaires
   ========================================================================== */

.ipd-champ {
	padding: 14px 16px;
	border-radius: var(--wp--custom--rayon--md);
	border: 1px solid var(--wp--custom--bordure--champ);
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--contrast);
	width: 100%;
}

.ipd-champ::placeholder {
	color: var(--wp--custom--texte--legende);
}

.ipd-champ:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

/* Pas de hauteur plancher : la maquette laisse l'attribut rows gouverner. */
textarea.ipd-champ {
	resize: vertical;
}

.ipd-consentement {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--custom--texte--sombre-doux);
}

/* La maquette laisse la case se comprimer avec le reste de la rangée : elle
   rend 13 px et non 17, ce qui donne quatre pixels de plus au texte et change
   ses coupures de ligne en affichage étroit. On reproduit ce comportement. */
.ipd-consentement input {
	margin-top: 3px;
}

/* ==========================================================================
   7. Contenu long (articles, pages de service)
   ========================================================================== */

.ipd-article :where(h2) {
	margin-top: var(--wp--preset--spacing--70);
}

.ipd-article :where(h3) {
	margin-top: var(--wp--preset--spacing--50);
}

.ipd-article :where(p) {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
	color: var(--wp--preset--color--texte-bleute);
}

/* Tableau comparatif des pages de service. */
.ipd-article .wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.ipd-article .wp-block-table :where(th, td) {
	border: 1px solid var(--wp--custom--bordure--bleue);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}

.ipd-article .wp-block-table thead th {
	background: var(--wp--preset--color--azur);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ==========================================================================
   8. Carte d'actualité
   ========================================================================== */

/*
 * Le visuel de couverture porte l'arrondi de la maquette (14 px) ; les
 * marges verticales sont laissées au blockGap du groupe.
 */
/*
 * La maquette teinte l'emplacement des visuels : tant que l'image n'est pas
 * arrivée — ou si elle manque — la carte garde son bloc de couleur au lieu
 * d'un trou blanc.
 */
.ipd-carte__visuel img,
.ipd-carte-lien .wp-block-post-featured-image img {
	background-color: var(--wp--preset--color--azur);
}

.ipd-carte__visuel img,
.ipd-carte-lien .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--rayon--lg);
	width: 100%;
	display: block;
}

.ipd-carte__visuel,
.ipd-carte-lien .wp-block-post-featured-image {
	margin: 0;
}

/* Le titre de publication reprend la police des titres sans marge propre. */
.ipd-carte-lien .wp-block-post-title,
.ipd-carte-lien .wp-block-post-excerpt,
.ipd-carte-lien .wp-block-post-excerpt p {
	margin: 0;
}

.ipd-carte-lien .wp-block-post-title a {
	color: inherit;
}

/*
 * Le bloc Image mise en avant enveloppe l'image dans un lien en ligne : sans
 * passage en bloc, la figure ne prend pas la hauteur de l'image.
 */
.ipd-carte-lien .wp-block-post-featured-image a {
	display: block;
}

/*
 * La carte est une colonne flex : sans « flex-shrink: 0 », le visuel se
 * comprime pour tenir dans une hauteur de rangée qu'il contribue lui-même à
 * définir, et la grille se tasse.
 */
.ipd-carte-lien > * {
	flex-shrink: 0;
}

/*
 * Le ratio est porté par la figure, pas seulement par l'image : dans une
 * carte en colonne flex placée dans une grille, une hauteur déduite de la
 * seule image ne donne pas de contribution intrinsèque exploitable et la
 * rangée se tasse.
 */
.ipd-carte__visuel {
	aspect-ratio: 16 / 10;
	width: 100%;
}

.ipd-carte__visuel a,
.ipd-carte__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mesure de 22 caractères imposée au titre de la section Avis. */
.ipd-mesure-22 {
	max-width: 22ch;
	margin-inline: auto;
}

/*
 * Le paragraphe porteur devient un conteneur flex : sa hauteur est alors
 * exactement celle de l'étiquette (30 px), sans strut de ligne parasite.
 */
.ipd-etiquette-ligne {
	display: flex;
	justify-content: center;
	line-height: normal;
}

/* Empilement des services : gouttière fluide de la maquette. */
.wp-block-group.ipd-gouttiere--services {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3.5vw, 48px);
}

/* Accroche du service mis en avant : la maquette l'atténue à 80 %. */
.ipd-teaser {
	opacity: 0.8;
}

/*
 * La gouttière globale du thème vaut 0, comme la maquette : chaque
 * composition déclare ses propres espacements. Le contenu rédigé dans
 * l'éditeur a besoin, lui, d'un rythme par défaut.
 */
.ipd-article .wp-block-post-content > * + * {
	margin-block-start: 1.2em;
}

/*
 * Bande de 1240 px centrée — la largeur de référence de la maquette pour
 * les éléments posés hors des sections (surtitre du bloc contact). Un groupe
 * en mise en page contrainte ne conviendrait pas : WordPress y ajoute la
 * marge racine du site, ce qui décale le contenu de 12 px.
 */
.wp-block-group.ipd-bande {
	max-width: 1240px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Carte d'article bordée — page « Vie locale »
   -------------------------------------------------------------------------- */

/*
 * La maquette entoure ces cartes d'un filet et fait déborder le visuel
 * jusqu'aux bords : le rognage vient de `overflow: hidden` sur la carte,
 * l'image n'ayant alors pas besoin de rayon propre.
 */
.wp-block-group.ipd-carte-article {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--neutre);
	overflow: hidden;
	transition: border-color 0.18s ease;
}

.wp-block-group.ipd-carte-article:hover,
.wp-block-group.ipd-carte-article:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.ipd-carte-article__visuel,
.ipd-carte-article__visuel img {
	width: 100%;
	height: 200px;
	display: block;
	object-fit: cover;
	border-radius: 0;
	background-color: var(--wp--preset--color--azur);
}

/* --------------------------------------------------------------------------
   Page « Mentions légales »
   -------------------------------------------------------------------------- */

/*
 * Colonne de lecture suivie : plus étroite que la bande courante du site,
 * comme dans la maquette.
 */
.wp-block-group.ipd-bande--900 {
	max-width: 900px;
	margin-inline: auto;
}

/* Ligne d'un tableau d'identité : la valeur fait face à son intitulé. */
.wp-block-group.ipd-fiche-ligne {
	border-top: 1px solid #eef3f8;
	gap: 10px;
}

.ipd-fiche-ligne a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

/* Liste à puces « point », alignée comme dans la maquette. */
.wp-block-list.is-style-puces-point {
	list-style: none;
}

/*
 * La maquette espace ces puces par une marge basse posée sur chaque
 * élément — y compris le dernier, qui pousse donc le bloc de 10 px. La
 * gouttière du bloc ne reproduit ni l'un ni l'autre.
 */
.wp-block-list.is-style-puces-point li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	list-style: none;
}

.wp-block-list.is-style-puces-point li::before {
	content: "·";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Duo texte / visuel — pages « À propos », « Plaine dijonnaise »
   -------------------------------------------------------------------------- */

/*
 * La maquette pose ces deux colonnes en grille à colonnes égales, centrées
 * verticalement, et inverse leur ordre une ligne sur deux.
 */
.wp-block-group.ipd-duo {
	gap: clamp(28px, 3.6vw, 52px);
	align-items: center;
}

.wp-block-group.ipd-duo--inverse > :first-child {
	order: 2;
}

.wp-block-group.ipd-duo--inverse > :last-child {
	order: 1;
}

/* Visuel encadré : le cadre et la hauteur minimale viennent de la maquette. */
.ipd-visuel-encadre {
	margin: 0;
}

.ipd-visuel-encadre img {
	width: 100%;
	/* Hauteur imposée : la maquette cadre ces visuels, elle ne les laisse
	   pas prendre leur proportion d'origine. */
	height: clamp(260px, 28vw, 380px);
	object-fit: cover;
	display: block;
	border-radius: 16px;
	border: 1px solid var(--wp--custom--bordure--neutre);
	background-color: var(--wp--preset--color--creme);
}

.ipd-visuel-encadre--sm img {
	height: clamp(220px, 24vw, 320px);
}

/* Citation du bandeau « À propos ». */
.wp-block-quote.ipd-citation {
	padding: 22px 24px;
	background: var(--wp--preset--color--creme);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 14px 14px 0;
	font-family: var(--wp--preset--font-family--titre);
	font-style: normal;
}

/* Duo dont les deux colonnes partent du haut (arguments côte à côte). */
.wp-block-group.ipd-duo--haut {
	gap: clamp(28px, 3.6vw, 48px);
	align-items: start;
}

.wp-block-group.ipd-duo--large {
	gap: clamp(30px, 4vw, 56px);
}

.ipd-visuel-encadre--md img {
	height: clamp(240px, 26vw, 340px);
}

/* Variante pâle des étiquettes de communes, utilisée sur la page Plaine. */
.wp-block-list.is-style-puces-pilules.ipd-pilules--pale > li {
	padding: 9px 14px;
	background: var(--wp--preset--color--azur-pale);
	border-color: var(--wp--custom--bordure--bleue);
	color: #2b3742;
}

/* Accent en italique bleu dans les titres, repris de la maquette. */
.ipd-accent {
	font-style: italic;
	color: var(--wp--preset--color--primary-dark);
}

/* --------------------------------------------------------------------------
   Page « Prendre rendez-vous »
   -------------------------------------------------------------------------- */

/* Encart d'appel direct, sous la liste des promesses. */
.wp-block-group.ipd-carte-appel {
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--custom--bordure--neutre);
}

.ipd-numero a {
	color: var(--wp--preset--color--contrast);
	transition: color 0.18s ease;
}

.ipd-numero a:hover,
.ipd-numero a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Cadre de l'agenda en ligne. */
.wp-block-group.ipd-agenda {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--neutre);
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(22, 22, 22, 0.08);
}

.wp-block-group.ipd-agenda__entete {
	border-bottom: 1px solid #eef3f8;
}

/* La maquette dimensionne son agenda en JavaScript : 82 % de la hauteur de
   fenêtre, entre 620 et 940 pixels. La même règle s'écrit en CSS. */
.ipd-agenda__cadre {
	width: 100%;
	height: clamp(620px, 82vh, 940px);
	border: 0;
	display: block;
}

/* Carte pâle : engagements du rendez-vous. */
.wp-block-group.ipd-carte-pale {
	background: var(--wp--preset--color--azur-pale);
	border: 1px solid var(--wp--custom--bordure--bleue);
}

/* --------------------------------------------------------------------------
   Page « Devenir apporteur d'affaires »
   -------------------------------------------------------------------------- */

/* Visuel du bandeau sombre : simple cadre, sans hauteur imposée. */
.ipd-visuel-clair {
	margin: 0;
}

/* La maquette laisse ses photos à leur hauteur naturelle. Les visuels de
   démonstration livrés ici n'ont pas le même cadrage : on leur impose les
   proportions d'origine pour que la section garde sa hauteur. */
.ipd-visuel-clair img {
	width: 100%;
	aspect-ratio: 543 / 363;
	object-fit: cover;
	display: block;
	border-radius: 16px;
	border: 1px solid rgba(234, 244, 252, 0.14);
}

.ipd-visuel-vignette {
	margin: 0;
}

.ipd-visuel-vignette img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
	border: 1px solid var(--wp--custom--bordure--neutre);
	background-color: var(--wp--preset--color--azur);
}

/* Étiquette sombre du montant de prime. */
.ipd-badge-sombre {
	display: inline-block;
	padding: 12px 20px;
	border-radius: var(--wp--custom--rayon--pilule);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
}

/* Variante blanche des étiquettes, sur fond crème. */
.wp-block-list.is-style-puces-pilules.ipd-pilules--blanches > li {
	padding: 10px 16px;
	background: var(--wp--preset--color--base);
	border-color: var(--wp--custom--bordure--neutre);
	font-size: 15px;
	color: #2b3742;
}

/* Carte voilée sur fond sombre : barème de rémunération. */
.wp-block-group.ipd-carte-voilee {
	background: rgba(234, 244, 252, 0.06);
}

.ipd-gain {
	border-top: 1px solid rgba(234, 244, 252, 0.18);
}

/* Accent clair, pour les titres posés sur fond sombre. */
.ipd-accent-clair {
	font-style: italic;
	color: var(--wp--preset--color--ciel);
}

/* Le visuel des cartes de profil est plus bas que celui des articles. */
/* Les cartes de profil portent un visuel plus bas que les cartes d'article :
   le cadre doit suivre l'image, sinon il garde trente pixels de vide. */
.ipd-carte-article__visuel--profil,
.ipd-carte-article__visuel--profil img {
	height: 170px;
}

/*
 * Accordéon de questions : le fond de la pile fait office de filet entre les
 * réponses, d'où la gouttière d'un pixel.
 */
.wp-block-group.ipd-accordeon {
	background: var(--wp--custom--bordure--neutre);
	overflow: hidden;
}

.wp-block-group.ipd-accordeon__item {
	background: var(--wp--preset--color--base);
}

/* Carte de coordonnées de bas de page. */
.wp-block-group.ipd-carte-coordonnees {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--champ);
}

.ipd-lien-email a {
	color: var(--wp--preset--color--primary-dark);
	word-break: break-all;
}

/* --------------------------------------------------------------------------
   Page « Nous rejoindre »
   -------------------------------------------------------------------------- */

.wp-block-group.ipd-duo--hero {
	gap: clamp(32px, 4.4vw, 64px);
	align-items: center;
}

/*
 * Portrait légèrement incliné, avec l'encart de chiffres posé en bas à
 * gauche : la réserve en bas du conteneur lui laisse la place.
 */
.wp-block-group.ipd-portrait-incline {
	position: relative;
	padding: 14px 14px 64px 24px;
}

.ipd-portrait-incline__photo {
	margin: 0;
}

.ipd-portrait-incline__photo img {
	width: 100%;
	/*
	 * La maquette cadre ce portrait en paysage (517 x 357). Les photos de
	 * démonstration du thème sont en portrait : sans proportion imposée,
	 * elles étirent la section de plusieurs centaines de pixels.
	 */
	aspect-ratio: 516 / 357;
	object-fit: cover;
	height: auto;
	display: block;
	border-radius: 12px;
	transform: rotate(-2.5deg);
	box-shadow: 0 24px 60px rgba(22, 22, 22, 0.18);
}

.wp-block-group.ipd-encart-chiffres {
	position: absolute;
	left: 0;
	bottom: 8px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.ipd-portrait-incline__photo img {
		transform: none;
	}
}

/* Visuel à grand rayon, sans cadre. */
.ipd-visuel-rond {
	margin: 0;
}

.ipd-visuel-rond img {
	width: 100%;
	/* Cadrage 3:2, comme les visuels de la maquette. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	height: auto;
	display: block;
	border-radius: 20px;
	background-color: var(--wp--preset--color--azur);
}

/* Étiquettes plus compactes. */
.wp-block-list.is-style-puces-pilules.ipd-pilules--sm > li {
	padding: 8px 14px;
	font-size: 14px;
}

/* Ligne de conclusion : phrase et bouton sur la même rangée. */
.wp-block-group.ipd-ligne-conclusion {
	gap: 18px;
	align-items: center;
}

.ipd-accent-plein {
	color: var(--wp--preset--color--primary-dark);
}

/* Surtitres : variante neutre et variante appuyée. */
.is-style-surtitre.ipd-surtitre--neutre {
	color: #8b8b88;
}

.is-style-surtitre.ipd-surtitre--gras {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

/* Pastille numérotée des raisons. */
.ipd-pastille-numero {
	width: 38px;
	height: 38px;
	border-radius: var(--wp--custom--rayon--pilule);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
}

/* Citation posée sur une carte blanche. */
.wp-block-quote.ipd-citation-carte {
	margin: 0;
	padding: 22px 24px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--neutre);
	border-radius: 16px;
	font-style: normal;
}

/* Citation sur fond sombre. */
.wp-block-quote.ipd-citation-sombre {
	margin: 0;
	padding: 22px 24px;
	background: rgba(234, 244, 252, 0.06);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 14px 14px 0;
	font-style: normal;
}

.ipd-citation__auteur {
	color: var(--wp--preset--color--ciel);
}

/* Biographie : une ligne par entrée, séparées par un filet. */
.wp-block-list.ipd-liste-bio {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wp-block-list.ipd-liste-bio li {
	list-style: none;
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--custom--bordure--neutre);
	font-size: 15px;
	line-height: 1.65;
	color: #3a3a38;
}

/* Carte d'étape : visuel en tête, contenu en dessous. */
.wp-block-group.ipd-carte-etape {
	background: var(--wp--preset--color--azur-pale);
	border: 1px solid var(--wp--custom--bordure--bleue);
	overflow: hidden;
}

.ipd-carte-etape__visuel {
	margin: 0;
}

.ipd-carte-etape__visuel img {
	width: 100%;
	height: 180px;
	display: block;
	object-fit: cover;
	border-radius: 0;
	background-color: var(--wp--preset--color--azur);
}

/*
 * Tableau de chiffres sur fond sombre : le fond de la pile fait office de
 * filet entre les lignes, d'où la gouttière d'un pixel.
 */
.wp-block-group.ipd-tableau-chiffres {
	background: rgba(234, 244, 252, 0.18);
	overflow: hidden;
}

.wp-block-group.ipd-tableau-chiffres__ligne {
	background: var(--wp--preset--color--contrast);
	align-items: baseline;
}

.ipd-nombre {
	white-space: nowrap;
}

/* Colonne coiffée d'un filet épais. */
.wp-block-group.ipd-colonne-filet {
	border-top: 2px solid var(--wp--preset--color--contrast);
}

/*
 * Profils : la maquette les présente en onglets. Le bloc « Détails » du cœur
 * en conserve le fonctionnement — une fiche ouverte à la fois — sans sortir
 * des blocs natifs.
 */
.wp-block-details.ipd-profil {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--neutre);
	transition: border-color 0.18s ease;
}

.wp-block-details.ipd-profil[open] {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-details.ipd-profil summary {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.015em;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
}

.wp-block-details.ipd-profil[open] summary {
	color: var(--wp--preset--color--primary-dark);
}

/*
 * Titre de carte d'article : la maquette le garde en quasi-noir même s'il
 * est cliquable ; la couleur de lien du thème ne s'y applique pas.
 */
.ipd-carte-article .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

.ipd-carte-article:hover .wp-block-post-title a,
.ipd-carte-article .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

/*
 * La boucle de requête place chaque carte dans un <li> : sans hauteur pleine,
 * la carte ne remplit pas sa cellule et la rangée perd son alignement bas.
 */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template.is-layout-grid > li > .ipd-carte-article {
	width: 100%;
}

/*
 * Lignes texte / visuel de la page « À propos ». La maquette les compose en
 * flex avec des bases inégales — 320 px pour le texte, 300 px pour le visuel —
 * et non en grille à colonnes égales : la colonne de texte y gagne 10 px, ce
 * qui change toutes ses coupures de ligne.
 */
.wp-block-group.ipd-duo--flex {
	flex-wrap: wrap;
	gap: clamp(28px, 3.6vw, 52px);
	align-items: center;
}

.wp-block-group.ipd-duo--flex > * {
	min-width: 0;
}

.wp-block-group.ipd-duo--flex > :first-child {
	flex: 1 1 320px;
}

.wp-block-group.ipd-duo--flex > :last-child {
	flex: 1 1 300px;
}

/* Sur la page « Plaine », la maquette empile ces puces avec une gouttière
   de 12 px et sans marge finale. */
.wp-block-list.is-style-puces-point.ipd-puces--gouttiere {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wp-block-list.is-style-puces-point.ipd-puces--gouttiere li {
	margin-bottom: 0;
}

/* Un conteneur de blocs placé dans une colonne souple se laisse comprimer par
   ses voisins : ses images débordaient alors de la section au lieu de
   l'agrandir. On lui interdit de rétrécir. */
.ipd-sans-compression {
	flex-shrink: 0;
}

/* Page « Prendre rendez-vous » : le texte se cale au milieu de l'agenda. */
.wp-block-group.ipd-duo--centre {
	align-items: center;
}

/* --------------------------------------------------------------------------
   Onglets de profil (page « Nous rejoindre »)
   --------------------------------------------------------------------------

   La maquette présente les trois profils en onglets : une rangée de pastilles
   et un seul panneau visible. Gutenberg n'a pas de bloc d'onglets ; l'état
   repose donc sur des boutons radio, ce qui fonctionne sans JavaScript et
   reste navigable au clavier (les flèches passent d'un onglet à l'autre).

   Ajouter un quatrième profil demande une règle de plus dans les deux blocs
   repérés « un couple par onglet ». */

.ipd-onglets__bascule {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ipd-onglets__barre {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(20px, 2.6vw, 28px);
}

.ipd-onglets__barre label {
	padding: 12px 18px;
	border: 1px solid var(--wp--custom--bordure--neutre);
	border-radius: var(--wp--custom--rayon--pilule);
	background: var(--wp--preset--color--base);
	color: #2b3742;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ipd-onglets__barre label:hover {
	border-color: var(--wp--preset--color--contrast);
}

.ipd-onglets__panneau {
	display: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--neutre);
}

/* Un couple par onglet : le panneau visible. */
#ipd-profil-0:checked ~ .ipd-onglets__panneau--0,
#ipd-profil-1:checked ~ .ipd-onglets__panneau--1,
#ipd-profil-2:checked ~ .ipd-onglets__panneau--2 {
	display: block;
}

/* Un couple par onglet : la pastille active et son liseré de focus. */
#ipd-profil-0:checked ~ .ipd-onglets__barre label[for="ipd-profil-0"],
#ipd-profil-1:checked ~ .ipd-onglets__barre label[for="ipd-profil-1"],
#ipd-profil-2:checked ~ .ipd-onglets__barre label[for="ipd-profil-2"] {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

#ipd-profil-0:focus-visible ~ .ipd-onglets__barre label[for="ipd-profil-0"],
#ipd-profil-1:focus-visible ~ .ipd-onglets__barre label[for="ipd-profil-1"],
#ipd-profil-2:focus-visible ~ .ipd-onglets__barre label[for="ipd-profil-2"] {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Pages de service : signature et chapeau
   -------------------------------------------------------------------------- */

.ipd-article .ipd-signature {
	margin-bottom: 22px;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.02em;
	color: #5a6672;
}

.ipd-article .ipd-chapeau {
	margin-bottom: 28px;
	color: #3a3a38;
}

/* ==========================================================================
   Pages de service
   ==========================================================================

   Trame reprise de la maquette : un en-tête clair, une section par thème avec
   ses cartes, un tableau de comparaison le cas échéant, une section sombre
   pour la citation et les chiffres, puis l'appel à l'action et le formulaire. */

.ipd-svc-visuel {
	margin: 0;
}

.ipd-svc-visuel img {
	width: 100%;
	height: clamp(240px, 26vw, 340px);
	object-fit: cover;
	display: block;
	border-radius: 16px;
	border: 1px solid var(--wp--custom--bordure--neutre);
	background-color: var(--wp--preset--color--creme);
}

/* La maquette borne la largeur des titres de section pour aérer la colonne. */
.ipd-svc-titre {
	max-width: 34ch;
}

.wp-block-group.ipd-svc-carte {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--bleue);
}

/*
 * Le tableau de comparaison est une grille de rangées, pas un tableau HTML :
 * les proportions de colonnes viennent du contenu et se replient d'un bloc en
 * affichage étroit, là où un vrai tableau se serrerait jusqu'à l'illisible.
 */
.ipd-svc-tableau {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--bleue);
	border-radius: 16px;
	overflow: hidden;
}

.ipd-svc-tableau__ligne {
	display: grid;
	grid-template-columns: var(--ipd-colonnes, 1fr);
	gap: 14px;
	padding: 14px clamp(16px, 2vw, 22px);
	border-top: 1px solid #eef3f8;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--texte-bleute);
}

.ipd-svc-tableau__ligne--entete {
	background: var(--wp--preset--color--azur-pale);
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

.ipd-svc-tableau__cle {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.ipd-svc-tableau__ligne--entete .ipd-svc-tableau__cle {
	color: inherit;
}

/* La maquette conserve ses colonnes en affichage étroit : on ne replie pas. */

.ipd-svc-cta-titre {
	max-width: 30ch;
	margin-inline: auto;
}

.ipd-svc-cta-texte {
	max-width: 70ch;
	margin-inline: auto;
}

/*
 * Les gouttières exprimées en clamp() ne passent pas par l'attribut de bloc :
 * WordPress ne retient que les valeurs simples. Elles se posent donc ici, comme
 * pour les autres duos du thème.
 */
.wp-block-group.ipd-svc-hero {
	gap: clamp(30px, 4vw, 56px);
	align-items: center;
}

.wp-block-group.ipd-svc-sombre {
	gap: clamp(28px, 3.6vw, 48px);
	align-items: center;
}

/* Duo resserré : gouttière de la maquette pour la section « Personne ne réussit seul ». */
.wp-block-group.ipd-duo--serre {
	gap: clamp(24px, 3.4vw, 40px);
}

/*
 * Carte de contact de la page « Nous rejoindre » : la maquette réunit les
 * coordonnées et la prise de rendez-vous dans une seule carte, séparées par
 * un filet, et non dans deux cartes côte à côte.
 */
.wp-block-group.ipd-nr-carte {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--bordure--champ);
}

.ipd-nr-carte__suite {
	border-top: 1px solid var(--wp--custom--bordure--bleue);
}

/* Raccourci vers l'agenda, au-dessus du formulaire de la page Contact.
   Le texte et le bouton tiennent sur une ligne tant que la place le permet,
   puis passent l'un sous l'autre sans que le bouton s'étire. */
.ipd-contact-raccourci__corps {
	gap: clamp(12px, 2vw, 24px);
}

.ipd-contact-raccourci__corps > p {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--wp--preset--color--texte-doux, inherit);
}

@media (max-width: 600px) {
	.ipd-contact-raccourci__corps {
		justify-content: flex-start;
	}
}

/*
 * Proportions de colonnes des tableaux comparatifs. Elles ne peuvent pas
 * tenir dans un style en ligne : l'éditeur de blocs ne retient que les
 * propriétés qu'il connaît et les perdrait au premier enregistrement.
 */
.ipd-svc-tableau--annonce-immobiliere-a-dijon-1 {
	--ipd-colonnes: 1.3fr 1.4fr 0.7fr;
}

.ipd-svc-tableau--annonce-immobiliere-a-dijon-2 {
	--ipd-colonnes: 1.3fr 1fr 1.3fr;
}

.ipd-svc-tableau--estimation-immobiliere-a-dijon-1 {
	--ipd-colonnes: 1.1fr 1fr 1.3fr;
}

.ipd-svc-tableau--estimation-immobiliere-a-dijon-2 {
	--ipd-colonnes: 1fr 1fr 1fr 1.2fr;
}

.ipd-svc-tableau--mise-en-valeur-de-votre-bien-immobilier-a-dijon-1 {
	--ipd-colonnes: 1.1fr 0.9fr 1.4fr;
}

.ipd-svc-tableau--mise-en-valeur-de-votre-bien-immobilier-a-dijon-2 {
	--ipd-colonnes: 1.2fr 1fr 1.2fr;
}

.ipd-svc-tableau--recherche-dacheteurs-pour-votre-maison-a-dijon-1 {
	--ipd-colonnes: 1.2fr 1.5fr 1.4fr;
}

.ipd-svc-tableau--recherche-dacheteurs-pour-votre-maison-a-dijon-2 {
	--ipd-colonnes: 1fr 0.8fr 1.3fr 1.2fr;
}

.ipd-svc-tableau--vendre-votre-bien-immobilier-a-dijon-1 {
	--ipd-colonnes: 1.1fr 1fr 1.2fr;
}

.ipd-svc-tableau--vendre-votre-bien-immobilier-a-dijon-2 {
	--ipd-colonnes: 1.1fr 0.9fr 1.3fr 1fr;
}

.ipd-svc-tableau--visites-immobilieres-a-dijon-1 {
	--ipd-colonnes: 1.2fr 1.1fr 1.3fr;
}

.ipd-svc-tableau--visites-immobilieres-a-dijon-2 {
	--ipd-colonnes: 1.2fr 1fr 1.3fr;
}

/* Les cellules sont des paragraphes : pas de marge dans la grille. */
.ipd-svc-tableau__ligne > p {
	margin: 0;
}