/* ==========================================================================
   Les Demeures de Province — ajustements responsive (Ocean Communication)
   40-modeles-pied-de-page.css : modèles partagés (groupe D)
     · Pied de page ........................ modèle 170 (.elementor-170)
     · Article (actualités) ................ modèle 517 (.elementor-517)
     · Fiche bien (maison, terrain) ........ modèle 191 (.elementor-191)
     · Fiche agence ........................ modèle 311 (.elementor-311)
   Chargé après 00-commun.css par mu-plugins/ldp-responsive.php.
   Un correctif ici vaut pour toutes les pages qui utilisent le modèle
   (toutes les pages pour le pied de page, tous les articles, biens, agences).

   Points de rupture : mobile ≤ 767 px · tablette 768–1024 px · laptop
   1025–1440 px · grand écran au-delà.
   Conteneurs : on surcharge les variables d'Elementor (--width, --padding-*…)
   avec « html body .elementor-<modèle> .e-con.elementor-element.elementor-element-<id> »,
   plus fort que la règle d'Elementor (0,3,0). Widgets : propriétés directes.
   Les !important ne servent qu'à battre le CSS personnalisé des widgets
   (Elementor) ou de l'extension ldp-immobilier, qui en contient déjà.
   Non traité ici : l'en-tête (00-commun), la marge haute des heros en
   ≤ 1024 px (00-commun §5), la typographie hors charte (Playfair, Roboto).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PIED DE PAGE (modèle 170) — reconstruit le 21/10/2026 : colonnes alimentées
   par les menus WordPress « Pied de page — … » (Apparence › Menus), accordéon en
   mobile. Ses styles complémentaires sont dans le thème enfant :
   themes/ocean-communication-enfant/assets/pied-de-page.css (et .js).
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   2. ARTICLE (modèle 517) — /les-grandes-etapes-…/, /une-maison-sur-mesure-…/
   Structure : hero 1f2c8c1 > 7ba90f4 [surtitre 9abc74b, titre 8620e3c, date af454f9]
   · image à la une f2b4e21 > 93d8aa7 (remonte sur le hero)
   · corps 8a8a42d > [texte 1882000 > 044aca7] [colonne 89e895e > sommaire f9f25ca,
     encadré d2d4b41 > 71201b5 / 2ca1b56 / bouton 249ae30] · navigation 63a7a8e
   -------------------------------------------------------------------------- */

/* 2a. Hero : le voile bleu s'effaçait vers la droite sur une photo claire.
   Titre et burger blancs sur blanc en mobile/tablette, et en desktop les
   entrées « Nos réalisations », « Contact », « Actualités » et les icônes
   sociales de l'en-tête étaient illisibles. Même dégradé marine que les
   fiches bien et agence ; la photo reste perceptible en transparence. */
html body .elementor-517 .elementor-element.elementor-element-1f2c8c1::after {
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .12) 0%, transparent 60%),
		radial-gradient(60% 80% at 0% 100%, rgba(10, 37, 64, .5) 0%, transparent 70%),
		linear-gradient(120deg, rgba(10, 37, 64, .95) 0%, rgba(15, 85, 157, .92) 55%, rgba(61, 130, 201, .88) 100%);
}

/* 2b. Image à la une qui recouvrait la date (et la fin du titre en mobile) :
   elle remonte de 96 px sur le hero alors que le hero ne laisse que 40 à
   80 px sous la date. En ≤ 1024 px : chevauchement réduit à 48 px et 80 px
   sous la date, soit 32 px d'air. */
@media (max-width: 1024px) {
	html body .elementor-517 .e-con.elementor-element.elementor-element-1f2c8c1 {
		--padding-bottom: 80px;
	}
	html body .elementor-517 .elementor-element.elementor-element-93d8aa7 {
		margin-top: -98px;
	}
}
/* Laptop : le hero fait 81 % de la hauteur d'écran et centre son texte ;
   sur un écran bas (1366 × 660) il ne restait que 4 à 13 px entre la date et
   l'image. Hauteur minimale de 640 px : 60 à 75 px d'air. */
@media (min-width: 1025px) and (max-width: 1440px) {
	html body .elementor-517 .e-con.elementor-element.elementor-element-1f2c8c1 {
		--min-height: max(81vh, 640px);
	}
}
/* Grand écran : 81 % d'un écran de 1300 px de haut laissaient ~320 px vides
   au-dessus du surtitre et ~270 px entre la date et l'image (2560 px). */
@media (min-width: 1441px) {
	html body .elementor-517 .e-con.elementor-element.elementor-element-1f2c8c1 {
		--min-height: min(81vh, 820px);
	}
}

/* 2c. Titre de l'article en mobile : 40 px, soit 4 lignes sur 347 px. */
@media (max-width: 767px) {
	html body .elementor-517 .elementor-element.elementor-element-8620e3c .elementor-heading-title {
		font-size: 32px;
		line-height: 1.2;
	}
}

/* 2d. Image à la une : bandeau fixe de 386 px de haut. En desktop (1420 ×
   386, ratio 3,7) la photo d'article2 était coupée au pignon ; en mobile
   (347 × 386) l'image était recadrée en hauteur. Ratio adapté à l'écran,
   et pleine largeur du contenu (elle s'arrêtait à 1280 px, non alignée
   sur le titre et le texte au-delà de 1460 px). */
html body .elementor-517 .elementor-element.elementor-element-93d8aa7 img {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	object-position: center 55%;
}
@media (max-width: 1024px) {
	html body .elementor-517 .elementor-element.elementor-element-93d8aa7 img {
		aspect-ratio: 2 / 1;
	}
}
@media (max-width: 767px) {
	html body .elementor-517 .elementor-element.elementor-element-93d8aa7 img {
		aspect-ratio: 4 / 3;
		border-radius: 20px;
	}
}

/* 2e. Colonne de lecture (laptop et grand écran) : les paragraphes faisaient
   860 à 960 px de large en 16 px, soit 115 à 130 signes par ligne. Texte
   limité à 44 rem (≈ 75–85 signes) et légèrement agrandi. */
@media (min-width: 1025px) {
	html body .elementor-517 .elementor-element.elementor-element-044aca7 {
		font-size: 17px;
		line-height: 1.75;
	}
	html body .elementor-517 .elementor-element.elementor-element-044aca7 :is(p, ul, ol, h2, h3, h4, blockquote, table) {
		max-width: 44rem;
	}
}

/* 2f. Listes du texte : 48 px de marge + 40 px de retrait. En mobile, le
   texte des puces commençait à 120 px et ne faisait que 239 px de large. */
html body .elementor-517 .elementor-element.elementor-element-044aca7 :is(ul, ol) {
	margin-inline-start: 0;
	padding-inline-start: 1.6em;
}
@media (max-width: 767px) {
	html body .elementor-517 .elementor-element.elementor-element-044aca7 :is(ul, ol) {
		padding-inline-start: 1.25em;
	}
}

/* 2g. Tablette portrait (768–1023 px) : la colonne latérale (186 px) restait
   à droite du texte : « TABLE DES / MATIÈRES » sur 2 lignes, encadré écrasé,
   bouton « Demander un / devis » sur 2 lignes. Elle passe sous le texte,
   comme en mobile. À 1024 px (tablette paysage) elle tient (279 px) et reste
   à droite. */
@media (min-width: 768px) and (max-width: 1023px) {
	html body .elementor-517 .e-con.elementor-element.elementor-element-8a8a42d {
		--flex-direction: column;
		--flex-wrap: nowrap;
	}
	html body .elementor-517 .e-con.elementor-element:is(.elementor-element-1882000, .elementor-element-89e895e) {
		--width: 100%;
	}
}

/* 2h. Encadré « Un projet de construction ? » : interligne fixe de 41 px
   (énormes écarts dès que le titre passe sur 2 lignes), compensé par une
   marge négative du texte. */
html body .elementor-517 .elementor-element.elementor-element-71201b5 .elementor-heading-title {
	line-height: 1.35;
}
html body .elementor-517 .elementor-element.elementor-element-2ca1b56 {
	margin-top: 10px;
}
/* Intitulé du sommaire : interligne de 1 (lignes collées s'il passe à la ligne) */
html body .elementor-517 .elementor-element.elementor-element-f9f25ca .elementor-toc__header-title {
	line-height: 1.35 !important;
}

/* 2i. Navigation précédent / suivant : libellés « Précédent » et « Suivant »
   à 11,2 px → 12 px. */
html body .elementor-517 .elementor-element.elementor-element-63a7a8e :is(.post-navigation__prev--label, .post-navigation__next--label) {
	font-size: .75rem !important;
}


/* --------------------------------------------------------------------------
   3. FICHE BIEN (modèle 191) — /biens/maison-neuve-a-caen/, /biens/terrain-a-batir-a-dieppe/
   Structure : corps c2bb416 > [contenu d1bf0a3 > 544b9e6e > 27db0a6 > description dd2826b,
   caractéristiques 7f00ce6f, référence 8efd990, DPE 3eb5486a > 01751d4, simulateur 62f04b80]
   [colonne 03b23f1 > agence c275880 (3422be9 + fed9732), encadré ec32908]
   · bloc final 8a0b531 > … titre 8d832bb, carte téléphone 274b3ea, formulaire 8f3c002
   -------------------------------------------------------------------------- */

/* 3a. Tablette : la colonne latérale (25 %, 170–240 px) passe sous le
   contenu. L'adresse de l'agence tenait sur 6 lignes, le titre de l'encadré
   laissait « savoir » seul et le bouton « Ce bien / m'intéresse » passait sur
   2 lignes. Sous le contenu, carte agence et encadré côte à côte. */
@media (min-width: 768px) and (max-width: 1024px) {
	html body .elementor-191 .e-con.elementor-element.elementor-element-c2bb416 {
		--flex-direction: column;
		--flex-wrap: nowrap;
	}
	html body .elementor-191 .e-con.elementor-element:is(.elementor-element-d1bf0a3, .elementor-element-03b23f1) {
		--width: 100%;
	}
	html body .elementor-191 .e-con.elementor-element.elementor-element-03b23f1 {
		--flex-direction: row;
		--flex-wrap: nowrap;
		--align-items: stretch;
		--gap: 20px;
		--column-gap: 20px;
	}
	html body .elementor-191 .e-con.elementor-element:is(.elementor-element-c275880, .elementor-element-ec32908) {
		--width: auto;
		flex: 1 1 0;
		min-width: 0;
	}
	html body .elementor-191 .e-con.elementor-element.elementor-element-ec32908 {
		--justify-content: center;
		--padding-top: 24px;
		--padding-bottom: 24px;
	}
}

/* 3b. Laptop et grand écran : la colonne latérale (agence + encadré, ~320 px
   de haut) reste visible pendant la lecture d'une fiche de 1 900 px, au lieu
   de laisser la colonne de droite vide. */
@media (min-width: 1025px) {
	html body .elementor-191 .e-con.elementor-element.elementor-element-03b23f1 {
		--align-self: flex-start;
		align-self: flex-start;
		position: sticky;
		top: 24px;
	}
}

/* 3c. Bords gauches : description et caractéristiques étaient au bord du
   contenu, mais la référence, le DPE et le simulateur décalés de 24 px (et
   plus étroits). Tout le monde sur le même bord. */
html body .elementor-191 .e-con.elementor-element:is(.elementor-element-8efd990, .elementor-element-3eb5486a, .elementor-element-62f04b80) {
	--padding-left: 0px;
	--padding-right: 0px;
}
/* Carte « Agence en charge » : décalée de 10 px par rapport à l'encadré bleu
   sous elle (et par rapport à la carte en mobile). */
html body .elementor-191 .e-con.elementor-element.elementor-element-c275880 {
	--padding-left: 0px;
	--padding-right: 0px;
}

/* 3d. Caractéristiques (m², terrain, pièces…) : grille de cases de taille
   fixe → case orpheline à demi vide (5e case en mobile, 2 cases en tablette,
   case unique du terrain coupée « Terrain de 571 / m² »), 5 colonnes écrasées
   en 1024 px. Les cases s'étirent pour remplir chaque rangée. */
html body .elementor-191 .elementor-element.elementor-element-7f00ce6f .elementor-icon-list-items {
	display: flex !important;
	flex-wrap: wrap;
}
html body .elementor-191 .elementor-element.elementor-element-7f00ce6f .elementor-icon-list-item {
	flex: 1 1 150px;
	min-width: 0;
}
@media (min-width: 768px) and (max-width: 1024px) {
	/* 768 px : 3 + 2 cases ; 1024 px : les 5 sur une ligne */
	html body .elementor-191 .elementor-element.elementor-element-7f00ce6f .elementor-icon-list-item {
		flex-basis: 180px;
	}
}
@media (max-width: 767px) {
	html body .elementor-191 .elementor-element.elementor-element-7f00ce6f .elementor-icon-list-item {
		flex: 1 1 40%;
	}
}

/* 3e. DPE : la barre A (40 % de l'échelle, 77 px en tablette) écrasait
   l'étiquette « Ce bien » sur 2 lignes, par-dessus la lettre. */
html body .elementor-191 .elementor-element.elementor-element-01751d4 .ldp-energy-bar.is-active {
	min-width: 7.5rem;
}
html body .elementor-191 .elementor-element.elementor-element-01751d4 .ldp-energy-bar.is-active::after {
	white-space: nowrap;
	flex-shrink: 0;
}

/* 3f. Fiche sans DPE (terrain) : le conteneur vide laissait ~100 px de blanc
   entre « Référence » et « Estimez vos mensualités ». */
html body .elementor-191 .e-con.elementor-element.elementor-element-3eb5486a:has(.elementor-shortcode:empty) {
	display: none;
}
/* Fiche sans agence (terrain) : titre « Agence en charge » sans carte, et
   carte téléphone vide (icône seule) dans le bloc final. */
html body .elementor-191 .e-con.elementor-element.elementor-element-c275880:not(:has(.elementor-widget-text-editor)) {
	display: none;
}
html body .elementor-191 .e-con.elementor-element.elementor-element-274b3ea:not(:has(.elementor-element-cec1ad3 .elementor-widget)) {
	display: none !important;
}

/* 3g. Titre « Vous souhaitez en savoir plus sur ce bien ? » (40 px, retour
   à la ligne forcé) : « savoir » restait seul sur sa ligne en mobile et en
   tablette. Sans le retour forcé, taille adaptée, lignes équilibrées. */
@media (max-width: 1024px) {
	html body .elementor-191 .elementor-element.elementor-element-8d832bb .elementor-heading-title {
		font-size: 32px;
		line-height: 1.2;
		text-wrap: balance;
	}
	html body .elementor-191 .elementor-element.elementor-element-8d832bb .elementor-heading-title br {
		display: none;
	}
}
@media (max-width: 767px) {
	html body .elementor-191 .elementor-element.elementor-element-8d832bb .elementor-heading-title {
		font-size: 30px;
	}
}

/* 3h. Formulaire « Ce bien m'intéresse » : carte à 97 % de sa colonne (bord
   droit décalé de 19 px) et titre centré en tablette / mobile alors que le
   texte et les champs sont alignés à gauche. */
@media (min-width: 768px) {
	html body .elementor-191 .e-con.elementor-element.elementor-element-8f3c002 {
		--width: 100%;
	}
}
html body .elementor-191 .elementor-element.elementor-element-2ec833c {
	text-align: start;
}


/* --------------------------------------------------------------------------
   4. FICHE AGENCE (modèle 311) — /agences/agence-de-caen/ …
   Structure : hero e5ee885 · contact 14263ef > [ba5c6a4 > … carte 61bb116 > 200e7ff7]
   [carte Google 0f5ffc9] · rendez-vous 16d5e14 > … conseillers 4dde9c8 / 5260c19
   (texte 5a4450d / 0175286, bouton 291bedc / c6fe0cf), formulaire 98e1d12
   · biens 4ee1d35 · autres agences 8e4a8b6 > 60ab8ee > 84dbe27 > 4 icon-box
   -------------------------------------------------------------------------- */

/* 4a. Boutons téléphone des conseillers : « 06 28 26 39 67 » sur 3 lignes
   dans une pastille de 125 px en tablette. Numéro toujours sur une ligne ;
   en ≤ 1024 px le bouton passe sous le nom (comme les blocs « contacts par
   secteur » des autres pages). */
html body .elementor-311 .elementor-element:is(.elementor-element-291bedc, .elementor-element-c6fe0cf) .elementor-button {
	white-space: nowrap;
}
/* Paragraphes d'une ligne (départements, nom) : leurs marges faisaient des
   blocs de 64 à 88 px de haut, d'où des cartes à moitié vides. */
html body .elementor-311 :is(.elementor-element-4dde9c8, .elementor-element-5260c19) .elementor-widget-text-editor p {
	margin-block: 0;
}
/* le nom remontait de 58 px pour compenser ces marges */
html body .elementor-311 .elementor-element:is(.elementor-element-4ccb5c8, .elementor-element-eed1799) {
	margin-top: 4px;
}
@media (max-width: 1024px) {
	html body .elementor-311 .e-con.elementor-element:is(.elementor-element-4dde9c8, .elementor-element-5260c19) {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0 !important;
		--flex-direction: column;
		--align-items: flex-start;
	}
	html body .elementor-311 .e-con.elementor-element:is(.elementor-element-5a4450d, .elementor-element-0175286, .elementor-element-ec88fa0, .elementor-element-77460b0) {
		--width: 100%;
		--align-items: flex-start;
		--padding-bottom: 6px;
	}
	html body .elementor-311 .e-con.elementor-element:is(.elementor-element-ec88fa0, .elementor-element-77460b0) {
		--padding-top: 0px;
		--padding-bottom: 14px;
	}
	html body .elementor-311 .elementor-element:is(.elementor-element-291bedc, .elementor-element-c6fe0cf) {
		--container-widget-width: auto;
		width: auto;
		align-self: flex-start;
	}
}

/* 4b. Carte « Contactez l'agence » : l'e-mail était coupé à la dernière
   lettre (« …province.f / r ») en mobile et sur 2 lignes en tablette (carte
   à 40 %, 274 px). Tablette : carte et plan à 50 / 50 ; e-mail un peu plus
   petit ; marges intérieures de la carte réduites en mobile. */
@media (min-width: 768px) and (max-width: 1024px) {
	html body .elementor-311 .e-con.elementor-element:is(.elementor-element-ba5c6a4, .elementor-element-0f5ffc9) {
		--width: 50%;
	}
}
@media (max-width: 1024px) {
	html body .elementor-311 .elementor-element.elementor-element-61bb116 .e-con-full > .e-con-full:nth-child(1) .elementor-icon-list-item:nth-child(2) .elementor-icon-list-text {
		font-size: clamp(14px, 3.85vw, 15px) !important;
	}
}
@media (max-width: 767px) {
	html body .elementor-311 .e-con.elementor-element.elementor-element-61bb116 {
		padding: 20px !important;
	}
}

/* 4c. Mobile : ~100 px de blanc entre le hero et la carte contact, et carte
   Google collée au bloc bleu suivant (0 px). */
@media (max-width: 767px) {
	html body .elementor-311 .e-con.elementor-element.elementor-element-7f0fc9a {
		--padding-top: 0px;
	}
	html body .elementor-311 .e-con.elementor-element.elementor-element-14263ef {
		--padding-bottom: 48px;
	}
}

/* 4d. « Nos autres agences » : cartes à la largeur de leur texte (154 à
   257 px) → grille irrégulière, carte orpheline, cartes écrasées en tablette
   (« Agence / d'Evreux », « Voir / l'agence »). Grille régulière : 1 colonne
   en mobile, 2 en tablette, 4 au-delà ; cartes de même hauteur, cliquables
   en entier (seuls le titre et l'icône étaient des liens). */
html body .elementor-311 .e-con.elementor-element.elementor-element-84dbe27 {
	--flex-wrap: wrap;
	--justify-content: flex-start;
	--align-items: stretch;
	--gap: 16px;
	--row-gap: 16px;
	--column-gap: 16px;
}
html body .elementor-311 .e-con.elementor-element-84dbe27 > .elementor-element.elementor-widget-icon-box {
	flex: 0 0 calc((100% - 48px) / 4);
	width: calc((100% - 48px) / 4);
	max-width: none;
	min-width: 0;
}
@media (max-width: 1024px) {
	html body .elementor-311 .e-con.elementor-element-84dbe27 > .elementor-element.elementor-widget-icon-box {
		flex-basis: calc((100% - 16px) / 2);
		width: calc((100% - 16px) / 2);
	}
}
@media (max-width: 767px) {
	html body .elementor-311 .e-con.elementor-element-84dbe27 > .elementor-element.elementor-widget-icon-box {
		flex-basis: 100%;
		width: 100%;
	}
	/* icône à gauche du nom (elle passait au-dessus : cartes de 100 px de haut) */
	html body .elementor-311 .e-con.elementor-element-84dbe27 .elementor-widget-icon-box .elementor-icon-box-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 15px;
		text-align: start;
	}
	html body .elementor-311 .e-con.elementor-element-84dbe27 .elementor-widget-icon-box .elementor-icon-box-icon {
		margin: 0;
		flex: 0 0 auto;
		align-self: center;
		height: auto;
		line-height: 0;
	}
}
html body .elementor-311 .e-con.elementor-element-84dbe27 > .elementor-widget-icon-box > .elementor-widget-container,
html body .elementor-311 .e-con.elementor-element-84dbe27 .elementor-icon-box-wrapper {
	height: 100%;
}
html body .elementor-311 .e-con.elementor-element-84dbe27 .elementor-icon-box-wrapper {
	position: relative;
	box-sizing: border-box;
}
html body .elementor-311 .e-con.elementor-element-84dbe27 .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
}

/* 4e. Surtitres sable (#E2C9A0) sur fond blanc ou crème : contraste de 1,6:1,
   quasi illisibles (« - NOS ANNONCES », « - PRÈS DE CHEZ VOUS »). Sable foncé
   (contraste 4,6 à 5:1). Les surtitres sur fond bleu gardent le sable clair. */
html body .elementor-311 .elementor-element:is(.elementor-element-f0bcc00, .elementor-element-d95fafd) .elementor-heading-title {
	color: #8C6A3A;
}

/* 4f. Formulaire « Écrire à l'agence » : carte à 97 % de sa colonne et titre
   centré en ≤ 1024 px alors que le texte et les champs sont à gauche. */
@media (min-width: 768px) {
	html body .elementor-311 .e-con.elementor-element.elementor-element-98e1d12 {
		--width: 100%;
	}
}
html body .elementor-311 .elementor-element.elementor-element-706eccc {
	text-align: start;
}