/**
 * Cabinet Ehrhard — styles de la charte.
 *
 * Ce fichier ne contient QUE ce que le kit Elementor ne sait pas exprimer :
 * l'entaille des boutons, les dégradés, les rythmes de grille, le cadrage des
 * photos. Couleurs, échelle typographique et largeur de contenu vivent dans le
 * kit (Elementor › Réglages du site) pour rester modifiables à l'écran.
 *
 * Convention : toute classe de ce fichier est préfixée `ehr-` et se pose sur un
 * conteneur ou un widget via le champ « Classes CSS » d'Elementor.
 */

:root {
	--ehr-lime: #DEF867;
	--ehr-orange: #FF562C;
	--ehr-bleu: #0D27F6;
	--ehr-mauve: #D464FF;
	--ehr-sombre: #1D1D1D;
	--ehr-creme: #F0EFEB;
	--ehr-gris: #F6F6F6;

	/* l'entaille : 26 × 13 px au coin supérieur gauche, mesurée sur la maquette */
	--ehr-ent-x: 26px;
	--ehr-ent-y: 13px;

	--ehr-titre: 'Inter', system-ui, sans-serif;
	--ehr-accent: 'Scope One', Georgia, serif;
	--ehr-corps: 'Nunito', system-ui, sans-serif;
}

/* ==========================================================================
   Règles transverses de la charte
   ========================================================================== */

/* Zéro arrondi : signature de la charte. Le kit s'en occupe pour les boutons,
   ici on couvre ce qu'Elementor arrondit par défaut ailleurs. */
.elementor input:not([type="checkbox"]):not([type="radio"]),
.elementor textarea,
.elementor select,
.elementor .elementor-field-group .elementor-field,
.elementor .elementor-button,
.elementor img {
	border-radius: 0;
}

/* Titres bicolores : dans un titre, <em> passe en Scope One et <b> en Inter 600.
   C'est la mécanique de la maquette (« L'espace comme il devrait être »). */
.elementor-heading-title em,
.elementor-heading-title i {
	font-family: var(--ehr-accent);
	font-style: normal;
	font-weight: 400;
}

.elementor-heading-title b,
.elementor-heading-title strong {
	font-family: var(--ehr-titre);
	font-weight: 600;
}

.ehr-titre--lime em {
	color: var(--ehr-lime);
}

.ehr-titre--bleu em {
	color: var(--ehr-bleu);
}

.ehr-titre--orange em {
	color: var(--ehr-orange);
}

.ehr-titre--mauve em {
	color: var(--ehr-mauve);
}

/* Intertitre à puce : losange orange de 12 px avant le texte. */
.ehr-intertitre .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.ehr-intertitre .elementor-heading-title::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--ehr-orange);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Gouttière latérale — RÈGLE GÉNÉRALE DU SITE
   --------------------------------------------------------------------------

   🔴 Rien ne touche le bord du viewport (règle posée par Lucas le 27/08/2026) :
   ni un texte, ni un bouton, ni une image de contenu. Deux exceptions, et deux
   seulement — les FONDS pleine largeur (la photo du hero, l'image du pied de
   page) et la piste du bandeau de logos, qui défile par construction. Aucune
   des deux n'est un cas particulier à écrire : un fond est peint sous le
   remplissage, et la piste déborde depuis l'intérieur d'une section qui, elle,
   a bien sa gouttière.

   Pourquoi une règle générale plutôt qu'une classe : `section()` génère un
   remplissage horizontal NUL et le conteneur d'Elementor est simplement
   plafonné à 1200 px, donc le défaut est celui du GÉNÉRATEUR, pas d'une page.
   La classe `ehr-gouttiere` ne couvrait que les deux pages écrites le 27/08 —
   mesuré le même jour à 376 px sur l'accueil : 71 éléments à x = 0, dont le H1,
   le chapô et le bouton du hero. Après cette règle : 36, tous dans la piste de
   logos. Une page future est couverte sans qu'on ait à y penser.

   Le point de rupture n'est pas choisi au hasard : 1200 + 2 × 40 = 1280.
   Au-delà, le contenu fait déjà ses 1200 px et la marge vient du centrage ; en
   deçà, la gouttière prend le relais. Aucun saut de largeur au passage.

   Le gabarit de boucle est délibérément absent de la liste : une carte n'est
   pas une section, et lui poser une gouttière la creuserait de 20 px. */
@media (max-width: 1279px) {
	[data-elementor-type="wp-page"] > .e-con.e-con-boxed > .e-con-inner,
	[data-elementor-type="wp-page"] > .e-con.e-con-full,
	[data-elementor-type="single-post"] > .e-con.e-con-boxed > .e-con-inner,
	[data-elementor-type="single-post"] > .e-con.e-con-full,
	[data-elementor-type="footer"] > .e-con.e-con-boxed > .e-con-inner,
	[data-elementor-type="footer"] > .e-con.e-con-full {
		padding-inline: clamp(20px, 8vw, 40px);
	}
}

/* ==========================================================================
   Boutons — l'entaille
   ========================================================================== */

/* Note d'intégration : sur Elementor 4.2, les widgets n'ont plus de contrôle de
   marge ni de remplissage. La géométrie du bouton se règle donc ici, et
   l'espacement autour de lui vient toujours d'un conteneur.

   `display: inline-flex` + `align-items: center` ne sont pas décoratifs : le
   `.elementor-button` est un `<a>` en `inline-block`, donc un `min-height` seul
   laisse le texte collé en haut (mesuré : contenu de 34 px, 26 px de vide en bas).
   C'est le flex qui centre verticalement. */
.ehr-btn .elementor-button {
	clip-path: polygon(var(--ehr-ent-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ehr-ent-y));
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	padding: 0 24px;
	transition: filter .18s ease;
}

.ehr-btn .elementor-button:hover {
	filter: brightness(1.08);
}

.ehr-btn .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
}

.ehr-btn .elementor-button-icon svg {
	width: 30px;
	height: auto;
}

/* Lien fléché « Voir le projet » : un bouton sans fond ni entaille. */
.ehr-lien .elementor-button {
	clip-path: none;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	background: transparent;
	padding: 0;
	font-family: var(--ehr-titre);
	font-weight: 500;
	font-size: 16px;
	white-space: nowrap;
}

.ehr-lien .elementor-button-content-wrapper {
	gap: 12px;
	justify-content: flex-start;
}

.ehr-lien .elementor-button-icon svg {
	width: 26px;
	transition: transform .2s ease;
}

.ehr-lien .elementor-button:hover .elementor-button-icon svg {
	transform: translateX(5px);
}

/* ==========================================================================
   En-tete : le logo, gabarit Theme Builder unique pour tout le site
   ========================================================================== */

/* Sur l'accueil, le logo se superpose a la photo du hero comme sur la maquette :
   on sort l'en-tete du flux. Sur les autres pages il reste dans le flux, sur fond
   sombre. */
body.home .elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

body:not(.home) .elementor-location-header {
	background: var(--ehr-sombre);
	padding-bottom: 30px;
}

/* Le logo a DEUX versions depuis le 09/09/2026, toutes deux fournies par le client,
   de meme ratio 1,908 donc interchangeables sans rien deplacer :
   - sombre (att. 1110) pour les fonds clairs,
   - claire (att. 1111, 85 % de #f0f0f0) pour les fonds sombres.
   Les plaques blanches posees plus tot dans la journee ont ete RETIREES : une vraie
   declinaison vaut mieux qu'un fond rapporte.

   🔴 C'est la version CLAIRE qui est posee partout, dans les deux gabarits, y compris
   sur l'accueil : la photo du hero du 15h26 est un fond sombre une fois le voile
   #1D1D1D a 40 % applique. Mesure sur le rendu, sous le logo : la version sombre
   tombait a 2,43:1 en mediane et 1,01:1 au pire (elle disparaissait dans le plafond
   en bois), la claire tient 4,76:1 en mediane et 4,17:1 au pire.
   ⚠️ Si une photo CLAIRE revenait un jour sur le hero, il faudrait rebasculer
   l'accueil sur la version sombre — c'est l'attachement 1110, garde en mediatheque.

   Ne reste donc en CSS que la LARGEUR : le client veut le logo double sur PC mais
   « pas ailleurs que sur la page d'accueil » (09/09, 15h07). Le gabarit porte 400 px,
   l'interieur du site revient a 200. Le selecteur ajoute `.elementor-widget-image`
   pour depasser la specificite de post-1073.css
   (`.elementor-1073 .elementor-element-539afc2 img`, 0-3-1). */
body:not(.home) .ehr-entete .elementor-widget-image img {
	width: 200px;
}

/* Le premier conteneur du hero est une CALE VIDE : l'en-tete etant hors du flux sur
   l'accueil, c'est elle qui reserve la hauteur du logo pour que le texte passe
   dessous. Elle valait 120 px, taillee pour un logo de 176 px de haut.
   Le logo double du 09/09 en fait 210, et descend donc jusqu'a 250 px : le titre,
   qui commencait a 238, passait 12 px SOUS lui. Mesure faite a la demande du client
   (« descendre le texte pour l'ecarter du logo »).
   Cale portee a 190 px : le titre tombe a ~308, soit ~58 px sous le logo.
   Desktop uniquement — en tablette et en mobile le logo est reste a 200 px de large,
   la cale de 120 px y suffit deja. */
@media (min-width: 1025px) {
	.ehr-hero > .elementor-element:first-child .e-con-inner {
		padding-top: 190px;
	}
}

/* Deux resserrages demandes le 09/09/2026 pour descendre encore le titre du hero.
   Ils marchent parce que le hero est en `justify-content: space-between` : ses trois
   blocs (la cale, le contenu, les chiffres du bas) se repartissent l'espace libre,
   donc TOUT ce qui raccourcit le bloc du milieu le fait descendre d'environ la
   moitie de ce qu'on lui retire.

   1. L'interligne du grand titre valait 1,38 — un heritage, aucune regle ne le posait
      sur le h1, alors que le kit Figma prevoit 1,0 pour les titres. A 70 px, deux
      lignes occupaient 211 px. */
.ehr-hero .elementor-widget-heading .elementor-heading-title {
	line-height: 1.1;
}

/* 2. Le conteneur du paragraphe portait 28 px de padding haut. Le titre etant
      desormais plus serre, il garde assez d'air avec 8 px. */
.ehr-hero .elementor-element-205a004 {
	padding-top: 8px;
}

/* ==========================================================================
   Section 1 — hero
   ========================================================================== */

.ehr-hero {
	position: relative;
	isolation: isolate;
}

/* Le voile de la maquette est UNIFORME : #1D1D1D à 40 % sur toute la photo, et non
   un dégradé (relevé du 17/08). Posé en CSS pour que la photo reste, elle,
   modifiable dans Elementor (arrière-plan du conteneur). */
.ehr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: rgba(29, 29, 29, .4);
}

.ehr-hero__pitch {
	max-width: 520px;
}

/* Les trois chiffres, séparés par un point comme sur la maquette. */
.ehr-chiffre {
	position: relative;
	text-align: center;
	min-width: 170px;
}

.ehr-chiffre + .ehr-chiffre::before {
	content: ".";
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-78%);
	font-family: var(--ehr-accent);
	font-size: 50px;
	line-height: 1;
	opacity: .85;
}

.ehr-chiffre__valeur .elementor-heading-title {
	font-family: var(--ehr-accent);
	font-size: 50px;
	line-height: 1.38;
	letter-spacing: -0.05em;
}

/* ==========================================================================
   Section 2 — le cabinet
   ========================================================================== */

/* Géométrie relevée sur la maquette, ramenée au contenu de 1202 px :
   les deux colonnes de texte et les deux photos ne partent PAS du bord gauche,
   elles sont décalées à x=307 (25,5 %), et la seconde photo descend de 229 px.
   Les pourcentages gardent le rythme fluide entre 900 et 1440 px. */
.ehr-cab__textes,
.ehr-cab__visuels {
	padding-left: 25.54%;
}

.ehr-cab__textes {
	margin-top: 72px;
}

/* 273 px et 381 px sur la maquette, exprimés en part de la zone restante (895 px) */
.ehr-cab__texte1 {
	width: 30.5%;
}

.ehr-cab__texte2 {
	width: 42.6%;
}

.ehr-cab__visuels {
	margin-top: 30px;
	align-items: flex-start;
}

.ehr-cab__bloc {
	width: 45.6%;
}

/* le décalage vertical de la seconde photo, signature de la section */
.ehr-cab__visuels > .ehr-cab__bloc:nth-child(2) {
	margin-top: 229px;
}

.ehr-visuel {
	position: relative;
	overflow: hidden;
}

.ehr-visuel__img img {
	width: 100%;
	aspect-ratio: 408 / 550;
	object-fit: cover;
	display: block;
}

/* 🔴 Le recadrage `cover` ci-dessus rogne la photo en HAUT ET EN BAS, à parts
   égales. Mesuré sur le visuel de gauche le 10/09/2026 : image 534 × 768 dans une
   boîte de 407 × 549, donc 36,7 px de débord vertical, soit 18,4 px perdus en haut
   (24,1 px de la source). C'est invisible sur une photo d'intérieur, mais la photo
   « Maison à flanc de colline » porte des dessins d'architecte dans sa bande haute
   et ils étaient tronqués. Calée en haut, elle ne perd plus rien de ce côté et les
   36,7 px partent tous en bas.
   ⚠️ Le modificateur est propre à CETTE image, pas au bloc : changer la photo
   rouvre la question, dans un sens comme dans l'autre. */
.ehr-visuel__img--haut img {
	object-position: top;
}

/* La pastille fléchée : carré orange de 50 px à 20 px du coin bas-droit de la
   photo. Font Awesome libre n'a pas de flèche diagonale, on tourne la flèche
   droite de -45 deg (la maquette est à -40, l'écart n'est pas perceptible). */
.ehr-visuel__cta {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
}

.ehr-visuel__cta .elementor-button {
	clip-path: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	min-height: 0;
	padding: 0;
}

.ehr-visuel__cta .elementor-button-content-wrapper {
	gap: 0;
	justify-content: center;
	width: auto;
}

.ehr-visuel__cta .elementor-button-icon svg {
	width: 17px;
	height: auto;
	transform: rotate(-45deg);
}

.ehr-visuel__cta .elementor-button-text {
	display: none;
}

.ehr-visuel__legende .elementor-heading-title {
	font-family: var(--ehr-corps);
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--ehr-sombre);
}

/* ==========================================================================
   Section 3 — typologies (onglets imbriqués + autorotation)
   ========================================================================== */

/* Les couleurs d'onglet passent par les VARIABLES du widget : une simple règle
   `color` sur .e-n-tab-title perdait contre le CSS d'Elementor, qui affichait les
   onglets inactifs en bleu (couleur de lien du kit). */
.ehr-onglets {
	--n-tabs-title-color-normal: var(--ehr-sombre);
	--n-tabs-title-color-hover: var(--ehr-orange);
	--n-tabs-title-color-active: var(--ehr-mauve);
	--n-tabs-title-background-color-normal: transparent;
	--n-tabs-title-background-color-hover: transparent;
	--n-tabs-title-background-color-active: transparent;
	--n-tabs-title-border-width: 0;
	--n-tabs-title-padding-inline-start: 0;
	--n-tabs-title-padding-inline-end: 0;
	--n-tabs-title-padding-block-start: 0;
	--n-tabs-title-padding-block-end: 0;
	--n-tabs-heading-gap: 44px;
	--n-tabs-gap: 56px;
}

/* Sur la maquette les quatre onglets sont RÉPARTIS sur toute la largeur du
   contenu (écarts mesurés de 102 à 110 px, soit exactement space-between), pas
   collés avec un écart fixe. */
.ehr-onglets .e-n-tabs-heading {
	justify-content: space-between;
	gap: 24px;
	border: 0;
	flex-wrap: wrap;
}

/* Le repère de l'onglet actif : un triangle de 14 px centré sous le libellé,
   pointe vers la photo. */
.ehr-onglets .e-n-tab-title {
	position: relative;
}

.ehr-onglets .e-n-tab-title[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -29px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 14px solid var(--ehr-mauve);
}

.ehr-onglets .e-n-tab-title {
	font-family: var(--ehr-accent);
	font-size: 30px;
	line-height: 1.37;
	letter-spacing: -0.05em;
	background: none;
	border: 0;
	padding: 0;
	transition: color .2s ease;
}

.ehr-onglets .e-n-tab-title[aria-selected="true"] {
	color: var(--ehr-mauve);
}

.ehr-onglets .e-n-tabs-content > .e-con {
	padding: 0;
}

.ehr-typologie {
	position: relative;
}

.ehr-typologie img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	display: block;
}

/* La maquette pose un voile #1D1D1D à 20 % sur TOUTE la photo (et non un dégradé
   en bas) : c'est ce qui rend la légende blanche lisible quelle que soit la photo.
   L'ombre portée reste, en appoint sur les visuels très clairs. */
.ehr-typologie::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: rgba(29, 29, 29, .2);
}

/* Légende à GAUCHE, pas centrée : 102 px du bord sur une photo de 1200 (8,5 %),
   largeur 486 (40,5 %), 50 px du bas. */
.ehr-typologie__legende {
	position: absolute;
	z-index: 2;
	left: 8.5%;
	bottom: 50px;
	width: min(486px, calc(100% - 17%));
	text-align: left;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
}

.ehr-typologie__legende,
.ehr-typologie__legende p {
	color: #fff;
	margin: 0;
}

/* ==========================================================================
   Section 4 — grille de projets au rythme décalé
   ========================================================================== */

/* L'introduction est 220 px plus bas que le titre sur la maquette. */
.ehr-proj__intro {
	margin-top: 220px;
}

/* La composition relevée sur la maquette n'est PAS une grille régulière avec des
   décalages (ce que je croyais d'abord, et qui faisait chevaucher le pied d'une
   carte avec l'image du dessous) : c'est un masonry à quatre cases de LARGEURS
   DIFFÉRENTES, ancrées à gauche en colonne 1 et à droite en colonne 2.

     case 1   x=0    l=483   image 483 × 550
     case 2   x=613  l=588   image 588 × 888
     case 3   x=0    l=690   image 690 × 590
     case 4   x=817  l=384   image 384 × 284

   D'où deux colonnes de 1fr, les items alignés start ou end, et une largeur
   explicite par case. L'écart entre rangées vaut 135 px, mesuré entre le bas de
   la case la plus haute et le début de la rangée suivante. */
@media (min-width: 901px) {
	/* 🔴 minmax(0, 1fr) et non 1fr : une largeur fixe posée sur un item
	   REDIMENSIONNE sa colonne avec `1fr` (mesuré : les colonnes passaient à
	   « 588px 690px »), ce qui déportait toute la composition. */
	.ehr-grille-projets .elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		column-gap: 60px;
		row-gap: 135px;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(1) {
		justify-self: start;
		width: 483px;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(2) {
		justify-self: end;
		width: 588px;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(3) {
		justify-self: start;
		width: 690px;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(4) {
		justify-self: end;
		width: 384px;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(1) .ehr-carte__visuel {
		aspect-ratio: 483 / 550;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(2) .ehr-carte__visuel {
		aspect-ratio: 588 / 888;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(3) .ehr-carte__visuel {
		aspect-ratio: 690 / 590;
	}

	.ehr-grille-projets .e-loop-item:nth-of-type(4) .ehr-carte__visuel {
		aspect-ratio: 384 / 284;
	}
}

@media (max-width: 900px) {
	.ehr-proj__intro {
		margin-top: 0;
	}
}

/* ==========================================================================
   Carte projet (gabarit de boucle) — sert aussi à l'archive
   ========================================================================== */

.ehr-carte__visuel {
	position: relative;
	overflow: hidden;
	background: #2a2a2a;
	aspect-ratio: 483 / 550;
}

.ehr-carte__visuel .elementor-widget-image,
.ehr-carte__visuel .elementor-widget-container,
.ehr-carte__visuel figure,
.ehr-carte__visuel a {
	height: 100%;
	display: block;
	margin: 0;
}

.ehr-carte__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.ehr-carte:hover .ehr-carte__visuel img {
	transform: scale(1.03);
}

/* 🔴 La carte ENTIÈRE est cliquable, pas seulement la flèche. Mesuré le
   27/08/2026 sur la fiche projet : le lien « Voir le projet » occupait
   141 × 18 px sur une carte de 373 × 365, soit 1,7 % de sa surface, et un clic
   au centre tombait sur l'image. Le même gabarit servant aux trois grilles
   (accueil, archive, « dans le même secteur »), la règle vaut pour les trois.

   Pourquoi pas le réglage « Lien » natif du conteneur : Elementor rend alors le
   conteneur en <a>, et le bouton interne en est un aussi. Le navigateur ferme
   le premier <a> avant d'ouvrir le second, donc le pied de la carte sort du
   lien et la moitié du problème reste. Un seul <a> par carte, c'est celui-ci,
   qui projette une surface transparente sur toute la carte.

   Les deux `static` ne sont pas décoratifs : Elementor pose `relative` sur le
   widget du bouton et sur le pied, donc sans eux `inset: 0` se cale sur la
   flèche et ne couvre rien de plus. Et le z-index passe devant le badge, qui
   est en 2 — sinon il intercepterait le clic dans son coin. */
.ehr-carte {
	position: relative;
}

.ehr-carte .ehr-carte__pied,
.ehr-carte .ehr-lien {
	position: static;
}

.ehr-carte .ehr-lien .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* La carte est neutre en couleur : c'est le CONTEXTE qui décide. Les deux grilles
   qui l'utilisent sont sur fond sombre — la section 4 de l'accueil et la page
   /projets/ — d'où les textes en blanc. Une future grille sur fond clair n'aurait
   qu'à ne pas reprendre ces deux classes.
   (La note d'origine annonçait une archive sur fond CLAIR : le design system la
   donne sombre, corrigé le 27/08/2026.) */
.ehr-grille-projets .ehr-carte .elementor-heading-title,
.ehr-grille-projets .ehr-carte .elementor-button,
.ehr-archive__grille .ehr-carte .elementor-heading-title,
.ehr-archive__grille .ehr-carte .elementor-button {
	color: #fff;
}

.ehr-grille-projets .ehr-carte__lieu .elementor-heading-title,
.ehr-archive__grille .ehr-carte__lieu .elementor-heading-title {
	opacity: .8;
}

/* Le pied de carte : titre et lieu à gauche, lien à droite, sur une seule rangée.

   Le seuil de retour à la ligne était à 600 px de FENÊTRE, ce qui ne dit rien de
   la largeur d'une carte : dans une fenêtre de 835 la grille passe à deux
   colonnes, les cartes tombent à 366 px, et « Voir le projet » (141 px) ne rentre
   plus à côté du titre. La rangée étant en `nowrap`, le lien sortait de la carte
   et la page défilait de 6 px horizontalement (mesuré le 27/08/2026 sur /projets/).

   🔴 Une requête de conteneur serait la bonne réponse en théorie, et elle CASSE la
   page ici : `container-type: inline-size` sur la carte empêche la hauteur de la
   grille de remonter jusqu'au widget de boucle. Mesuré le 27/08/2026 à 376 px :
   le widget annonçait 5020 px pour un contenu de 6181, et les trois dernières
   cartes passaient PAR-DESSUS le pied de page, sur 911 px. Sans la requête,
   5782 = 5782. Ne pas réessayer sans vérifier la hauteur du widget.

   On reste donc sur la fenêtre, au seuil où la grille passe à deux colonnes. */
.ehr-carte__pied {
	flex-wrap: nowrap;
}

@media (max-width: 1024px) {
	.ehr-carte__pied {
		flex-wrap: wrap;
	}
}

.ehr-carte__badge {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
}

.ehr-carte__badge .elementor-heading-title,
.ehr-grille-projets .ehr-carte .ehr-carte__badge .elementor-heading-title,
.ehr-archive__grille .ehr-carte .ehr-carte__badge .elementor-heading-title {
	display: inline-block;
	background: var(--ehr-creme);
	color: var(--ehr-bleu);
	font-family: var(--ehr-titre);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	padding: 12px 16px;
}

.ehr-carte__badge .elementor-heading-title:empty {
	display: none;
}

.ehr-carte__lieu .elementor-heading-title:empty {
	display: none;
}

/* ==========================================================================
   Section 5 — concept
   ========================================================================== */

/* Le bloc lime est une COLONNE de 690 px bornée par le conteneur, jamais un fond
   de section : sur la maquette le groupe de section mesure 1202 et non 1440, donc
   il reste du blanc à sa droite. `stretch` lui fait prendre toute la hauteur,
   comme le rectangle qui court de y=0 à y=1328. */
.ehr-concept__lime {
	align-self: stretch;
}

/* Les images sont recadrées en cover aux dimensions de la maquette. Sélecteur
   volontairement précis (classe + widget) : `.ehr-x img` seul perd contre la
   règle d'Elementor qui remet la largeur des images en auto. */
.ehr-concept__photo img {
	display: block;
	width: 284px;
	max-width: 100%;
	height: 400px;
	object-fit: cover;
}

.ehr-argument__vignette img {
	display: block;
	width: 184px;
	max-width: 100%;
	height: 220px;
	object-fit: cover;
}

.ehr-portrait__photo img {
	display: block;
	width: 284px;
	max-width: 100%;
	height: 284px;
	object-fit: cover;
}

.ehr-argument__titre .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-weight: 600;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0;
}

/* Nunito 18/20 au relevé : un interlignage de 20 px pour un corps de 18, donc
   bien plus serré que le 1,4 du kit. C'est ce resserrement qui donne aux trois
   arguments leur hauteur de 220 px. */
.ehr-argument__texte,
.ehr-argument__texte p {
	margin: 0;
	font-size: 18px;
	line-height: 20px;
}

/* Nunito ITALIQUE 16/22, centrée (relevé : `italic: true`). La variante italique
   est auto-hébergée, sans quoi le navigateur l'aurait synthétisée en inclinant
   la variante droite. */
.ehr-citation p {
	margin: 0;
	font-style: italic;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}

/* Les deux lignes de la légende sont au MÊME poids sur la maquette (Inter Medium
   500) : le <span> ne sert qu'à passer à la ligne, il n'atténue rien. */
.ehr-portrait__nom {
	max-width: 420px;
}

.ehr-portrait__nom .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 0;
	text-align: center;
}

.ehr-portrait__nom .elementor-heading-title span {
	display: block;
}

/* ==========================================================================
   Section 6 — carrousel de références
   ========================================================================== */

.ehr-logos .swiper-slide {
	background: #fff;
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.ehr-logos .swiper-slide figure,
.ehr-logos .swiper-slide-image {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.ehr-logos img {
	max-height: 130px;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ehr-logos .elementor-swiper-button {
	color: var(--ehr-sombre);
}

/* ==========================================================================
   Section 7 — pied de page
   ========================================================================== */

.ehr-pied {
	position: relative;
	isolation: isolate;
}

/* Voile uniforme #1D1D1D à 20 %, comme sur la maquette (et non un dégradé). */
.ehr-pied::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: rgba(29, 29, 29, .2);
}

/* Le bloc orange est un VRAI bloc HTML posé sur la photo, pas une zone peinte
   dans l'image : 1200 × 600 sur la maquette, il porte le logo, les coordonnées
   et la signature. */
.ehr-pied__bloc {
	min-height: 600px;
	position: relative;
}

/* Le bouton du haut tombe sur la même ligne que le paragraphe (y=248 contre 252
   sur la maquette), d'où l'alignement en bas de la rangée d'en-tête. */
.ehr-pied__cta {
	padding-bottom: 4px;
}

/* Les coordonnées sont SOUS le logo, empilées, décalées de 31 px de plus que lui. */
.ehr-pied__infos {
	margin-top: 50px;
	padding-left: 31px;
	align-items: flex-start;
}

.ehr-pied__info .elementor-heading-title,
.ehr-pied__info .elementor-heading-title a {
	font-family: var(--ehr-titre);
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	letter-spacing: 0;
	color: #fff;
	text-decoration: none;
}

.ehr-pied__trait {
	width: 20px;
}

.ehr-pied__retour .elementor-button {
	color: #fff;
}

/* La signature touche le bas du bloc orange et déborde légèrement à gauche
   (x=28 contre 72 pour le logo) ; à droite elle s'arrête 26 px avant le bord, ce
   qui laisse 1146 px de lettrage sur les 1200 du bloc. */
.ehr-pied__bloc > .ehr-pied__signature-col {
	container-type: inline-size;
	/* La marge négative décale la colonne SANS l'élargir : elle s'arrêtait donc
	   44 px avant le bord droit du bloc (mesuré : lettrage fini à 72 px du bord
	   au lieu de 26). D'où la largeur rattrapée d'autant. */
	margin-left: -44px;
	width: calc(100% + 44px);
	/* `auto` en haut : le bloc orange est une colonne flex, donc la signature est
	   poussée contre son bas comme sur la maquette (elle y est à fleur, y=1010
	   pour un bloc qui finit à 1010). */
	margin-top: auto;
	padding-top: 40px;
	padding-right: 26px;
}

.ehr-coord .elementor-icon-list-item,
.ehr-coord a {
	font-family: var(--ehr-titre);
	font-weight: 500;
	font-size: 16px;
	color: #fff;
}

/* 🔴 Le lettrage était dimensionné en `vw` alors que sa boîte est plafonnée à
   1200 px : au-delà de 1240 px de fenêtre la police continuait de grandir dans un
   conteneur qui, lui, ne bougeait plus, et « CABINET EHRHARD » sortait du bloc
   orange. Les unités de conteneur (`cqi`) se rapportent à la boîte réelle, donc
   le lettrage la remplit à TOUTE largeur, sans point de rupture.
   L'orthographe corrigée y contribue : la maquette écrit « CABINET EHHARD »
   (14 signes) et fait tenir 1147 px à 140 px de corps ; « EHRHARD » en compte 15,
   donc environ 7 % de plus, et 140 px ne rentrait déjà plus.
   Le `clamp` en `vw` reste en repli pour un navigateur sans unités de conteneur
   (avant Chrome 105 / Safari 16 / Firefox 110). */
.ehr-signature .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-weight: 600;
	font-size: clamp(40px, 8.9vw, 130px);
	font-size: 11.4cqi;
	line-height: 1.2;
	letter-spacing: -0.05em;
	white-space: nowrap;
	color: #fff;
}


/* ---------- le pied de page sous 900 px ---------- */

/* 🔴 Le bloc orange garde des retraits qui n'ont de sens que sur les 1200 px de
   la maquette : 72 px à gauche pour caler le logo, 102 à droite pour le lien de
   retour, 31 d'indentation sous le logo, et une marge négative de 44 px pour la
   signature. Mesuré à 376 px le 27/08/2026 : le contenu démarrait à 72 puis à
   103 px, sans rien pour l'équilibrer à droite. Signalé par Lucas.
   Sur une colonne unique, tout repasse en symétrique et centré.

   🔴 767 et non 900, contrairement au reste de ce fichier : le filet entre le
   téléphone et l'e-mail se centre par le réglage NATIF du widget, qui bascule au
   point de rupture « mobile » d'Elementor, soit 767. Garder 900 ici aurait laissé
   une bande de 768 à 900 px où le bloc est centré et le filet encore à gauche. */
@media (max-width: 767px) {
	.ehr-pied__bloc {
		min-height: 0;
		padding: 40px 24px 28px;
		text-align: center;
	}

	.ehr-pied__haut {
		padding-right: 0;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}

	/* La largeur de 260 px et l'alignement à droite servaient à poser le lien en
	   haut à droite du bloc ; empilé, il se centre sous le logo. */
	.ehr-pied__haut-box {
		width: 100%;
		margin-top: 0;
		align-items: center;
	}

	.ehr-pied__infos {
		padding-left: 0;
		margin-top: 34px;
		align-items: center;
	}


	/* La signature reprend le flux : la marge négative et la largeur rattrapée
	   n'existent que pour la faire déborder à gauche du bloc, comme la maquette. */
	.ehr-pied__bloc > .ehr-pied__signature-col {
		margin-left: 0;
		width: 100%;
		padding-right: 0;
		padding-top: 32px;
	}

	.ehr-signature .elementor-heading-title {
		text-align: center;
	}
}

/* ==========================================================================
   Mentions légales — page de texte, volontairement nue
   ==========================================================================

   Aucune ambition graphique ici : une colonne, une mesure de lecture courte, du
   contraste. La page hérite du kit (polices, couleurs, titres) et de l'en-tête
   et du pied de page du Theme Builder ; il ne reste qu'à borner la largeur du
   texte, que rien d'autre ne borne sur un fond uni. */

.ehr-ml__grand-titre .elementor-heading-title {
	font-size: clamp(32px, 5vw, 56px);
	margin-bottom: 10px;
}

.ehr-ml__titre .elementor-heading-title {
	font-size: 22px;
	letter-spacing: -0.02em;
	margin-top: 46px;
}

/* 66 caractères : la mesure de lecture confortable pour un texte suivi. Sans
   elle, les paragraphes courent sur les 1200 px du conteneur. */
.ehr-ml__corps,
.ehr-ml__corps p {
	max-width: 66ch;
	line-height: 1.7;
}

.ehr-ml__corps p + p {
	margin-top: 14px;
}

.ehr-ml__corps a {
	color: var(--ehr-bleu);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le fil d'ariane est écrit en blanc pour les pages sur fond sombre : ici le
   fond est crème, il lui faut l'encre du site.

   🔴 Double classe volontaire. La règle générique `.ehr-ariane p` vit plus bas
   dans ce fichier (section « archive ») : à spécificité égale, c'est elle qui
   l'emportait, et le fil sortait en blanc sur crème — mesuré rgb(255,255,255)
   à opacité .65, illisible. Deux classes suffisent à passer devant sans
   déplacer quoi que ce soit. */
.ehr-ariane.ehr-ariane--clair p,
.ehr-ariane.ehr-ariane--clair a,
.ehr-ariane.ehr-ariane--clair .elementor-heading-title {
	color: var(--ehr-sombre);
	opacity: .75;
}

/* 🔴 Encart de travail, à retirer avec son bloc avant la mise en production :
   il énumère ce que ni le registre des entreprises ni le DNS ne peuvent dire. */
.ehr-ml__avertissement {
	max-width: 66ch;
	border-left: 4px solid var(--ehr-orange);
	background: rgba(255, 255, 255, .6);
	padding: 16px 20px;
	margin-top: 26px;
}

.ehr-ml__avertissement p {
	margin: 0;
	line-height: 1.6;
}

/* ==========================================================================
   Formulaire de contact (popup)
   ========================================================================== */

.ehr-formulaire .elementor-field-group > label {
	font-family: var(--ehr-titre);
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 6px;
}

.ehr-formulaire .elementor-field {
	border: 1px solid rgba(29, 29, 29, .18);
	background: #fff;
	padding: 12px 14px;
	font-family: var(--ehr-corps);
	font-size: 16px;
}

.ehr-formulaire .elementor-field:focus {
	outline: 2px solid var(--ehr-orange);
	outline-offset: 0;
	border-color: var(--ehr-orange);
}

.ehr-formulaire .elementor-button[type="submit"] {
	clip-path: polygon(var(--ehr-ent-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ehr-ent-y));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	background: var(--ehr-orange);
	color: #fff;
	font-family: var(--ehr-corps);
	font-size: 18px;
}

/* ==========================================================================
   Adaptation aux petits écrans
   ========================================================================== */

@media (max-width: 900px) {
	.ehr-chiffre + .ehr-chiffre::before {
		display: none;
	}

	/* Les décalages de la section 2 ne tiennent qu'en grand format : sous 900 px
	   on repasse tout au bord et on empile. */
	.ehr-cab__textes,
	.ehr-cab__visuels {
		padding-left: 0;
	}

	.ehr-cab__texte1,
	.ehr-cab__texte2,
	.ehr-cab__bloc {
		width: 100%;
	}

	.ehr-cab__visuels > .ehr-cab__bloc:nth-child(2) {
		margin-top: 0;
	}

	.ehr-onglets .e-n-tabs-heading {
		justify-content: flex-start;
	}

	.ehr-onglets .e-n-tab-title[aria-selected="true"]::after {
		display: none;
	}

	.ehr-typologie__legende {
		width: 100%;
	}

	.ehr-typologie img {
		height: 320px;
	}

	.ehr-typologie__legende {
		position: static;
		transform: none;
		width: 100%;
		text-align: left;
		padding-top: 18px;
		text-shadow: none;
	}

	.ehr-typologie__legende,
	.ehr-typologie__legende p {
		color: var(--ehr-sombre);
	}

	.ehr-onglets .e-n-tabs-heading {
		gap: 22px;
	}

	.ehr-onglets .e-n-tab-title {
		font-size: 22px;
	}

	.ehr-carte__visuel {
		aspect-ratio: 4 / 3;
	}

	/* Section 5 : les deux colonnes s'empilent, et les largeurs fixes relevées
	   sur la maquette (386, 690, 334, 284, 184, 358, 180) repassent en fluide.
	   Le décalage de 229 px sous le titre et l'indentation de 51 px de la photo
	   ne veulent plus rien dire sur une colonne unique.

	   🔴 Remettre la rangée en `wrap` est indispensable : la version bureau est en
	   `nowrap`, et un `width: 100%` posé sur deux enfants d'une ligne qui ne se
	   coupe pas ne les empile pas, il les COMPRIME. Mesuré à 376 px de large :
	   colonne gauche à 108 px, bloc lime à 142 px côte à côte, et 14 px de
	   débordement horizontal de la page. */
	.ehr-concept__grille {
		flex-wrap: wrap;
		gap: 0;
	}

	.ehr-concept .ehr-concept__gauche,
	.ehr-concept__lime,
	.ehr-concept__titre-box,
	.ehr-concept__photo-box,
	.ehr-argument__txt,
	.ehr-argument__titre-box {
		width: 100%;
	}

	.ehr-concept__photo-box {
		margin: 60px 0 0 0;
	}

	.ehr-concept__lime {
		margin-top: 60px;
		padding: 50px 24px;
	}

	/* La section porte un remplissage nul (la maquette place tout à l'intérieur
	   des colonnes), ce qui la prive aussi de la gouttière par défaut du kit :
	   sur mobile le titre et la photo touchaient le bord de l'écran. On la rend
	   ici, à la même valeur que celle du bloc lime. */
	.ehr-concept__gauche {
		padding: 0 24px;
	}

	/* La vignette passe au-dessus du texte et s'étale, sinon elle se réduit à un
	   timbre de 184 px à côté d'un paragraphe déjà étroit. */
	.ehr-argument {
		flex-wrap: wrap;
		gap: 20px;
	}

	.ehr-argument__img {
		width: 100%;
	}

	.ehr-argument__vignette img {
		width: 100%;
		height: 240px;
	}
}

/* ==========================================================================
   Page /projets/ — l'archive
   ==========================================================================

   Relevée sur la fiche « Archive projets » du design system, qui n'existe pas
   dans le Figma (conception AFID du 17/08/2026 sur la charte de la maquette).

   🔴 Elle ressemble à la section 4 de l'accueil mais N'EN EST PAS une copie :
   l'accueil est un masonry à quatre LARGEURS fixes, ce qui n'a de sens que pour
   quatre cartes ; ici les deux colonnes sont égales et c'est la PROPORTION des
   images qui varie, sur un cycle de huit. D'où deux classes distinctes,
   `ehr-grille-projets` et `ehr-archive__grille`, et surtout pas la même.

   Ce que le kit ne sait pas exprimer et qui vit donc ici : le titre en clamp(),
   l'allure des filtres (le widget les rend en Nunito gris), le cycle de
   proportions et le décalage d'une colonne sur deux. */

/* La gouttière latérale est désormais une règle GÉNÉRALE, en tête de fichier
   (chercher « Gouttière latérale »). La classe `ehr-gouttiere` que porte encore
   le générateur ne fait plus rien de plus : elle est conservée parce qu'elle
   documente l'intention dans l'éditeur. */

/* Le fil d'ariane sert à l'archive ET à la fiche projet : pas de préfixe de
   page. Sur la fiche il porte en plus le titre courant, en balise dynamique. */
.ehr-ariane p,
.ehr-ariane .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
	opacity: .65;
	margin: 0;
}

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

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

.ehr-ariane p span {
	margin: 0 10px;
}

/* Le titre d'un projet peut faire 88 caractères (mesuré sur les 73) : dans un
   fil d'ariane il passerait à la ligne et doublerait la hauteur du bandeau. */
.ehr-fp__ariane-titre .elementor-heading-title {
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Le kit met les h1 en Scope One 70 (c'est le hero qui commande) ; ici le titre
   est en Inter et seul le mot accentué passe en Scope One, comme sur la fiche.
   clamp() plutôt que les points de rupture d'Elementor : la taille suit la
   largeur en continu, sans marche d'escalier à 1024 px. */
.ehr-archive__titre .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1.05;
}

.ehr-archive__titre {
	margin-top: 34px;
}

.ehr-archive__intro {
	max-width: 560px;
	margin-top: 26px;
}

.ehr-archive__intro p {
	margin: 0;
}

/* La rangée de filtres : les 4 secteurs parents à gauche, le total à droite,
   posés sur la ligne de base et soulignés d'un filet. */
.ehr-archive__filtres {
	margin-top: 56px;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.ehr-archive__compte {
	margin-left: auto;
}

.ehr-archive__compte p {
	font-family: var(--ehr-titre);
	font-size: 14px;
	color: #fff;
	opacity: .6;
	white-space: nowrap;
	margin: 0;
}

/* Le widget « Filtre de taxonomie » rend une <search class="e-filter"> de
   <button class="e-filter-item">, en Nunito gris sur fond transparent. La charte
   veut les mots en Scope One, comme les onglets de la section 3.

   🔴 Les couleurs du widget passent par SES variables, et ses valeurs par défaut
   sont faites pour un fond clair : `--e-filter-hover-text-color` et
   `--e-filter-active-text-color` valent #0c0d0e, soit un contraste de 1,16:1 sur
   le #1D1D1D de la section — un libellé qui disparaît au survol. Signalé par Lucas
   le 27/08/2026, et invisible tant qu'on ne survole pas : une règle `color` sur
   `:hover` ne suffit PAS, c'est la variable qu'il faut poser, sinon celle du widget
   revient sur l'état qu'on n'a pas couvert. */
.ehr-archive__filtre {
	--e-filter-normal-text-color: #fff;
	--e-filter-hover-text-color: #fff;
	--e-filter-active-text-color: var(--ehr-mauve);
}

.ehr-archive__filtre .e-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 36px;
}

.ehr-archive__filtre .e-filter-item {
	font-family: var(--ehr-accent);
	font-size: clamp(20px, 2.1vw, 30px);
	font-weight: 400;
	line-height: 1.37;
	letter-spacing: -0.05em;
	color: #fff;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease, color .2s ease;
}

.ehr-archive__filtre .e-filter-item:hover {
	color: #fff;
	opacity: .85;
}

.ehr-archive__filtre .e-filter-item[aria-pressed="true"] {
	opacity: 1;
	color: var(--ehr-mauve);
}

/* ---------- la grille ---------- */

.ehr-archive__grille .elementor-grid {
	align-items: start;
	column-gap: 60px;
	row-gap: 70px;
	padding-top: 60px;
}

/* 🔴 Les deux colonnes ne valent QU'AU-DESSUS de 901 px. Posée sans borne, la
   règle écrasait les réglages natifs du widget (2 colonnes en tablette, 1 en
   mobile) et donnait des cartes de 158 px de large sur un téléphone de 376 —
   mesuré le 27/08/2026, et invisible tant qu'on ne regarde que le bureau.

   🔴 nth-of-type et non nth-child : Elementor place une balise <style> en premier
   enfant du conteneur de boucle, qui décalerait tout le compte d'un cran. Le
   décalage d'une colonne sur deux est la signature du rythme de la maquette ; sur
   une seule colonne il n'aurait rien à décaler et n'ajouterait que du vide. */
@media (min-width: 901px) {
	.ehr-archive__grille .elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ehr-archive__grille .e-loop-item:nth-of-type(even) {
		margin-top: 90px;
	}
}

/* Les huit proportions relevées sur la fiche du design system, en cycle : la
   grille ne doit jamais donner l'impression d'un tableau régulier. Le cycle se
   poursuit de lui-même sur les lots chargés ensuite, puisque les cartes ajoutées
   arrivent dans le même conteneur. */
.ehr-archive__grille .e-loop-item:nth-of-type(8n + 1) .ehr-carte__visuel {
	aspect-ratio: 483 / 550;
}

.ehr-archive__grille .e-loop-item:nth-of-type(8n + 2) .ehr-carte__visuel {
	aspect-ratio: 588 / 700;
}

.ehr-archive__grille .e-loop-item:nth-of-type(8n + 3) .ehr-carte__visuel {
	aspect-ratio: 690 / 560;
}

.ehr-archive__grille .e-loop-item:nth-of-type(8n + 4) .ehr-carte__visuel {
	aspect-ratio: 483 / 430;
}

.ehr-archive__grille .e-loop-item:nth-of-type(8n + 5) .ehr-carte__visuel {
	aspect-ratio: 690 / 590;
}

.ehr-archive__grille .e-loop-item:nth-of-type(8n + 6) .ehr-carte__visuel {
	aspect-ratio: 483 / 620;
}

.ehr-archive__grille .e-loop-item:nth-of-type(8n + 7) .ehr-carte__visuel {
	aspect-ratio: 588 / 470;
}

.ehr-archive__grille .e-loop-item:nth-of-type(8n + 8) .ehr-carte__visuel {
	aspect-ratio: 483 / 540;
}

/* ---------- « Voir plus de projets » ---------- */

.ehr-archive__grille .e-loop__load-more {
	display: flex;
	justify-content: center;
	padding: 90px 0 0;
}

.ehr-archive__grille .e-loop__load-more .elementor-button {
	clip-path: polygon(var(--ehr-ent-x) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ehr-ent-y));
	display: inline-flex;
	align-items: center;
	gap: 28px;
	min-height: 60px;
	padding: 0 24px;
	background: var(--ehr-bleu);
	color: #fff;
	font-family: var(--ehr-corps);
	font-size: 18px;
	line-height: 1;
	transition: filter .18s ease;
}

.ehr-archive__grille .e-loop__load-more .elementor-button:hover {
	filter: brightness(1.1);
}

.ehr-archive__grille .e-load-more-message {
	padding-top: 90px;
	text-align: center;
	font-family: var(--ehr-titre);
	font-size: 14px;
	color: #fff;
	opacity: .6;
}

/* ---------- sous 900 px ---------- */

@media (max-width: 900px) {
	.ehr-archive__grille .elementor-grid {
		column-gap: 24px;
		row-gap: 40px;
		padding-top: 40px;
	}

	.ehr-archive__grille .e-loop__load-more {
		padding-top: 50px;
	}

	/* Le widget centre ses filtres sous le point de rupture mobile ; tout le
	   reste de la page est fer à gauche, ils doivent l'être aussi. */
	.ehr-archive__filtre .e-filter {
		gap: 20px 24px;
		justify-content: flex-start;
	}

	.ehr-archive__filtre {
		text-align: left;
	}

	.ehr-archive__compte {
		margin-left: 0;
	}
}


/* ==========================================================================
   Fiche projet — /projets/<slug>/
   ==========================================================================

   Gabarit Theme Builder « single-post », condition « include/singular/projet ».
   Relevée sur la fiche « Fiche projet » du design system, absente du Figma.

   La mosaïque est le widget « Galerie » natif alimenté par la balise acf-gallery,
   visionneuse comprise : le javascript que prévoyait la fiche du design system
   n'a pas été écrit. */

/* ---------- bandeau ---------- */

/* 1200 × 620 sur la maquette. L'image est en `full` côté widget pour que le
   navigateur ait de quoi choisir dans le srcset : sans largeur imposée il
   retenait une variante de 768 px pour un affichage plein cadre. */
.ehr-fp__principale img {
	width: 100%;
	aspect-ratio: 1200 / 620;
	object-fit: cover;
	background: #2a2a2a;
}

/* ---------- identité ---------- */

.ehr-fp__titre .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.1;
	color: #fff;
}

/* La colonne de gauche n'a pas de largeur fixe : elle prend ce que la colonne
   d'infos (360 px) lui laisse, et se replie sous 320 px de large. */
.ehr-fp__id-grille > :first-child {
	flex: 1 1 320px;
	min-width: 0;
}

.ehr-fp__badge .elementor-heading-title {
	display: inline-block;
	background: var(--ehr-creme);
	color: var(--ehr-bleu);
	font-family: var(--ehr-titre);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	padding: 12px 16px;
}

.ehr-fp__badge--vide .elementor-heading-title {
	background: none;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
}

/* 8 fiches sur 73 ne portent aucun type de projet : leur second badge serait un
   rectangle vide bordé de blanc. */
.ehr-fp__badge .elementor-heading-title:empty {
	display: none;
}

/* ---------- le tableau d'identité ---------- */

/* 🔴 `display: contents` sur les rangées, pour que libellés et valeurs entrent
   dans LA MÊME grille : sinon chaque rangée dimensionne sa colonne de libellé
   pour elle seule et les valeurs démarrent à des abscisses différentes, là où la
   maquette les aligne. C'est ce que fait un <dl> et ce que le conteneur flex
   d'Elementor ne sait pas exprimer. */
.ehr-fp__infos {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px 26px;
	align-content: start;
}

.ehr-fp__ligne {
	display: contents;
}

/* 🔴 Une ligne sans valeur ne doit pas laisser son libellé seul. Quand la balise
   dynamique est vide, Elementor n'imprime pas un widget vide : il OMET le widget
   entier (mesuré le 27/08/2026). La règle se pose donc sur son absence, pas sur
   `:empty`. Et `display: none` l'emporte bien sur `display: contents`, donc le
   libellé disparaît avec elle. Concerné : `annee_realisation` sur les 73 fiches,
   `mise_en_valeur` sur 61, `concept` sur 25, `lieu` sur 11, `precision_type` sur 3. */
.ehr-fp__ligne:not(:has(.ehr-fp__valeur)) {
	display: none;
}

.ehr-fp__label .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-size: 16px;
	line-height: 1.45;
	color: #fff;
	opacity: .6;
	white-space: nowrap;
	letter-spacing: 0;
}

.ehr-fp__valeur .elementor-heading-title {
	font-family: var(--ehr-titre);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: #fff;
	letter-spacing: 0;
}

.ehr-fp__concept .elementor-heading-title {
	font-family: var(--ehr-accent);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: -0.05em;
}

/* ---------- description ---------- */

.ehr-fp__description .elementor-heading-title {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
}

.ehr-fp__contenu p {
	margin: 0 0 20px;
}

.ehr-fp__contenu > :last-child {
	margin-bottom: 0;
}

/* ---------- la mosaïque ---------- */

.ehr-fp__compte p {
	font-family: var(--ehr-titre);
	font-size: 14px;
	opacity: .6;
	margin: 0;
}

/* La première photo occupe quatre cases : deux colonnes sur deux rangées, comme
   la maquette. Les cases étant carrées, 2 × 288 + 16 de gouttière retombe
   exactement sur la hauteur de deux rangées : la mosaïque reste d'aplomb.

   🔴 Si une photo semble ne pas remplir sa case, ce n'est pas cette règle : 14 %
   des photos de galerie ont une bande blanche DANS LE FICHIER (l'ancien site les
   posait sur un gabarit de 1360 × 768). Mesuré le 27/08/2026, ne pas y revenir. */
.ehr-fp__mosaique .e-gallery-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

/* Une fiche sans galerie n'a pas à afficher « Le chantier en images » au-dessus
   de rien. Les 73 projets importés en ont une, mais pas forcément le 74e. */
.ehr-fp__galerie:not(:has(.e-gallery-item)) {
	display: none;
}

/* ---------- dans le même secteur ---------- */

/* Le gabarit de carte est réutilisé tel quel. Deux écarts assumés avec la fiche
   du design system, qui dessinait ici une carte simplifiée : le badge de secteur
   et le lien « Voir le projet » restent, parce qu'une seule carte pour tout le
   site vaut mieux qu'une variante à maintenir. Seule la proportion change. */
.ehr-fp__lies-grille .ehr-carte__visuel {
	aspect-ratio: 4 / 3;
}

.ehr-fp__lies-grille .elementor-grid {
	column-gap: 40px;
	row-gap: 40px;
}

/* 🔴 Fond clair ici, et la carte neutre ne suffisait PAS : mesuré le 27/08/2026,
   le lien « Voir le projet » sortait en rgb(255,255,255) — blanc sur blanc,
   invisible à l'œil comme à la capture. Le kit donne cette couleur à tous les
   boutons ; les deux autres grilles sont sur fond sombre, donc personne ne
   l'avait vu. Le titre et le lieu, eux, héritent bien de l'encre. */
.ehr-fp__lies-grille .ehr-carte .elementor-button {
	color: var(--ehr-sombre);
}

/* 🔴 Et il débordait de 45 px à droite de sa carte. Le pied est en `nowrap`
   au-dessus de 1024 px de FENÊTRE, or ici les cartes font 373 px quelle que
   soit la fenêtre (trois colonnes dans 1200) : le titre sur deux lignes pousse
   le lien dehors. La fenêtre ne dit rien de la largeur d'une carte — c'est la
   leçon de la requête de conteneur qui a cassé la page le même jour (voir plus
   haut). Cette grille-ci est étroite par construction, donc on tranche par la
   grille et pas par une mesure. */
.ehr-fp__lies-grille .ehr-carte__pied {
	flex-wrap: wrap;
}

/* ---------- l'appel ---------- */

.ehr-fp__appel .elementor-heading-title {
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.1;
}

/* Le bouton « Tous les projets » est un contour, sans entaille : c'est le second
   rôle, il ne doit pas porter la signature de la charte. */
.ehr-btn--fantome .elementor-button {
	clip-path: none;
	background: none;
	border: 1px solid rgba(0, 0, 0, .3);
}

.ehr-btn--fantome .elementor-button:hover {
	filter: none;
	border-color: var(--ehr-sombre);
}

/* ---------- sous 900 px ---------- */

@media (max-width: 900px) {
	.ehr-fp__principale img {
		aspect-ratio: 3 / 2;
	}

	.ehr-fp__id-grille {
		gap: 40px;
	}

	/* La colonne d'infos perd sa largeur fixe de 360 px, sinon elle laisse une
	   bande vide à sa droite sur un écran de téléphone. */
	.ehr-fp__infos {
		width: 100%;
	}


	.ehr-fp__lies-grille .elementor-grid {
		column-gap: 24px;
		row-gap: 40px;
	}
}