/*--------------------------------------------------------------
## Footer

Reprend la maquette validée avec Léa : fond sombre qui clôt la page, baseline
en Prata ponctuée du point doré, intitulés de colonne en petites capitales
dorées et underline animé sur les liens, comme dans le mega-menu du header.

Le contenu reste entièrement dans le gabarit Beaver Builder « Footer - Ne pas
supprimer » (id 18047), que Léa édite depuis des années : tout ce qui suit est
du style, aucun texte ni lien n'est écrit ici. Les sélecteurs partent donc de
`.fl-builder-content-18047`, l'identifiant de ce gabarit.

Deux contraintes dictent la forme des sélecteurs :

  1. Beaver Builder écrit un CSS par nœud (`18047-layout-partial.css`) chargé
     après cette feuille, avec des sélecteurs en `.fl-builder-content
     .fl-node-xxx .fl-rich-text *:not(b, strong)`, soit une spécificité de
     (0,3,1). La classe du gabarit est donc répétée pour passer devant.
  2. `responsive-desktop.css` plafonne `.fl-row-fixed-width` à `72vw
     !important` entre 1200 et 1600px. Seul un `!important` en vient à bout.

Le gabarit compte deux groupes de colonnes : les colonnes de contenu, puis la
ligne du bas. Ils sont distingués par `:last-child` plutôt que par leur nœud,
pour survivre à une reconstruction du groupe dans Beaver Builder.
--------------------------------------------------------------*/

:root {
	/* Variante claire, retenue par Léa le 30 septembre 2026 : sur un footer de
	   cette hauteur, l'aplat sombre pesait trop en fin de page. Le passage à
	   l'autre direction de la maquette ne tient qu'à ce bloc et au logotype. */
	--footer-fond: #fff;
	--footer-or: #BC8E4E;
	--footer-texte: #23252B;
	--footer-attenue: rgba(35, 37, 43, .58);
	--footer-filet: rgba(35, 37, 43, .10);
	--footer-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ===== Le bloc ===== */

/* Beaver Builder pose le fond sur `.fl-row-content-wrap`, pas sur la rangée :
   le poser ailleurs laisse une bande de la couleur de la page sur les côtés.
   Ses 20px de padding latéral s'ajoutaient aux gouttières de la grille. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-row > .fl-row-content-wrap {
	background-color: var(--footer-fond);
	border-top: 1px solid var(--footer-filet);
	padding: 82px 0 0;
}

/* Grille du site, la même que le header et le hero. Le gabarit tombait à 72vw,
   soit 1077px sur un écran de 1496, quand le contenu des pages en fait 1346 :
   le footer ne s'alignait sur aucun repère au-dessus de lui. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-row-content {
	/* `.fl-row-content-wrap` est un conteneur flex et son contenu porte
	   `flex: 1 1 auto` : sans cette ligne, il s'étire sur toute la largeur du
	   conteneur et la largeur ci-dessous reste sans effet. */
	flex-grow: 0;
	width: min(1470px, calc(100% - 140px));
	max-width: none !important;
	margin-left: auto;
	margin-right: auto;
}

/* ===== Les colonnes ===== */

/* `fl-col-group` est en `display: block` avec des colonnes flottantes dont les
   largeurs sont fixées en pourcentage par nœud. La grille reprend la main, ce
   qui permet d'ajouter ou de retirer une colonne sans réajuster les autres. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 56px 60px;
	padding-bottom: 64px;
}

/* Le clearfix de Beaver Builder, `content: " "; display: table`, devient un
   élément de grille dès que le groupe passe en `display: grid` : il occupe la
   première cellule et décale toutes les colonnes d'un cran.

   Il n'est masqué que sur ce groupe-là : la ligne du bas reste en
   `display: block` avec une colonne flottante, que seul ce clearfix contient.
   L'avoir masqué partout privait ce groupe de sa hauteur, réduite à ses seuls
   paddings, et le pied de page se terminait 20px trop court. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child):before,
.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child):after {
	display: none;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) > .fl-col {
	width: auto;
	max-width: none;
	float: none;
	clear: none;
	/* `.fl-col-small` reçoit des marges automatiques, qui centrent la colonne
	   sur sa largeur intrinsèque une fois le groupe passé en grille : sous
	   1100px, chaque colonne se retrouvait centrée et rétrécie à son texte. */
	margin-left: 0;
	margin-right: 0;
}

/* Beaver Builder donne 20px de marge à chaque module. La marge latérale
   décalait les colonnes de la grille, la verticale creusait sous les titres. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-module > .fl-module-content {
	margin: 0;
}

/* ===== Typographie =====
Beaver Builder impose par nœud `font-size: 1.8rem`, `line-height: 1.8` et,
sur deux modules, `text-transform: uppercase`, à tous les descendants. D'où
le niveau de sélecteur, qui doit passer devant (0,3,1). */

/* Intitulés de colonne : les petites capitales dorées des kickers du header,
   là où le thème en faisait des titres Prata de 18px. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-module-rich-text .fl-rich-text h4 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--footer-or);
	margin: 0 0 22px;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-module-rich-text .fl-rich-text p {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.45rem;
	font-weight: 300;
	line-height: 1.6;
	text-transform: none;
	color: var(--footer-texte);
	margin: 0 0 12px;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-module-rich-text .fl-rich-text p:last-child {
	margin-bottom: 0;
}

/* Liens : underline animé du header, dessiné au survol seulement. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-module-rich-text .fl-rich-text a {
	position: relative;
	font-size: 1.45rem;
	font-weight: 300;
	text-transform: none;
	color: var(--footer-texte);
	text-decoration: none;
	transition: color .3s var(--footer-ease);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-module-rich-text .fl-rich-text a:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--footer-ease);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-module-rich-text .fl-rich-text a:hover {
	color: var(--footer-or);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-module-rich-text .fl-rich-text a:hover:after {
	transform: scaleX(1);
}

/* ===== Logotype =====
Le gabarit n'en portait pas, et la page d'accueil ne rend pas le pré-footer qui
en affichait un : la marque n'apparaissait nulle part en bas de page.

Le lien vit dans le gabarit, comme les réseaux sociaux, pour que sa cible reste
modifiable sans toucher au code ; l'image est posée ici, sur le même fichier que
le header sert sur fond sombre, et le libellé reste lu par les lecteurs d'écran
sans être visible. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-logo {
	margin: 0 0 26px;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-logo a {
	display: block;
	width: 106px;
	height: 38px;
	font-size: 0;
	background-image: url("../img/heuritech-logotype-black.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	transition: opacity .3s var(--footer-ease);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-logo a:hover {
	opacity: .7;
}

/* L'underline animé des liens n'a rien à souligner sur une image. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-logo a:after {
	display: none;
}

/* ===== Baseline =====
Première colonne, premier module : la phrase de marque passe en Prata et se
ferme sur le point doré, comme le titre du hero. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) > .fl-col:first-child .fl-rich-text p.footer-baseline {
	font-family: 'Prata', serif;
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--footer-texte);
	max-width: 22ch;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) > .fl-col:first-child .fl-rich-text p.footer-baseline:after {
	content: "";
	display: inline-block;
	width: .16em;
	height: .16em;
	margin-left: .1em;
	border-radius: 50%;
	background-color: var(--footer-or);
}

/* ===== Ligne du bas ===== */
.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:last-child {
	border-top: 1px solid var(--footer-filet);
	padding: 26px 0 34px;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:last-child .fl-rich-text p {
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--footer-attenue);
	margin: 0;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:last-child .fl-rich-text a {
	font-size: 1.3rem;
	color: var(--footer-attenue);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:last-child .fl-rich-text a:hover {
	color: var(--footer-or);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:last-child .fl-rich-text,
.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:last-child .fl-rich-text p {
	/* le gabarit centrait cette ligne, seule du footer à l'être */
	text-align: left;
}

/* ===== Réseaux sociaux =====
Les liens restent du texte dans le gabarit, « LinkedIn » et « Instagram », pour
que Léa puisse les modifier sans manipuler de balisage : l'icône est posée ici
en masque, et le libellé reste lu par les lecteurs d'écran. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-social {
	display: flex;
	gap: 12px;
	margin-top: 26px;
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--footer-filet);
	font-size: 0;
	transition: background-color .3s var(--footer-ease), border-color .3s var(--footer-ease);
}

/* L'underline animé des autres liens n'a pas de sens sur une pastille ronde,
   et le `:after` sert ici à porter l'icône. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-social a:after {
	content: "";
	position: static;
	width: 16px;
	height: 16px;
	transform: none;
	background-color: var(--footer-attenue);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color .3s var(--footer-ease);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-social a[href*="linkedin"]:after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.57h.05a4.17 4.17 0 0 1 3.75-2.06c4.01 0 4.75 2.64 4.75 6.07V21h-4v-5.13c0-1.22-.02-2.8-1.7-2.8-1.71 0-1.97 1.33-1.97 2.7V21h-4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.57h.05a4.17 4.17 0 0 1 3.75-2.06c4.01 0 4.75 2.64 4.75 6.07V21h-4v-5.13c0-1.22-.02-2.8-1.7-2.8-1.71 0-1.97 1.33-1.97 2.7V21h-4z'/%3E%3C/svg%3E");
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-social a[href*="instagram"]:after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.2c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2zm0 6.65a3.15 3.15 0 1 0 0 6.3 3.15 3.15 0 0 0 0-6.3zm0-1.8a4.95 4.95 0 1 1 0 9.9 4.95 4.95 0 0 1 0-9.9zm5.2-.9a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.2c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2zm0 6.65a3.15 3.15 0 1 0 0 6.3 3.15 3.15 0 0 0 0-6.3zm0-1.8a4.95 4.95 0 1 1 0 9.9 4.95 4.95 0 0 1 0-9.9zm5.2-.9a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0z'/%3E%3C/svg%3E");
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-social a:hover {
	background-color: var(--footer-or);
	border-color: var(--footer-or);
}

.fl-builder-content-18047.fl-builder-content-18047 .fl-rich-text p.footer-social a:hover:after {
	background-color: #fff;
}

/* ===== Formulaire HubSpot =====
Il vit dans une iframe créée sans `src`, donc de même origine : son contenu
n'est pas atteignable en CSS depuis ici, il est habillé par
`js/footer-hubspot.js`. Seul le cadre se règle d'ici. */
.fl-builder-content-18047.fl-builder-content-18047 .fl-module-html iframe {
	width: 100%;
	border: 0;
}

/* ===== Responsive ===== */
@media screen and (max-width: 1100px) {
	.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px;
	}

	.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) > .fl-col:first-child,
	.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) > .fl-col:last-child {
		grid-column: 1 / -1;
	}
}

@media screen and (max-width: 600px) {
	.fl-builder-content-18047.fl-builder-content-18047 .fl-row-content {
		width: calc(100% - 50px);
	}

	.fl-builder-content-18047.fl-builder-content-18047 .fl-col-group:not(:last-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	.fl-builder-content-18047.fl-builder-content-18047 .fl-row > .fl-row-content-wrap {
		padding-top: 62px;
	}
}