/*
Theme Name: Frontline Child
Theme URI: http://demo.farost.net/frontline/
Author: Farost
Author URI: http://themeforest.net/user/farost
Description: Frontline is a theme run on Elementor Page Builder Plugin, This is a free WordPress theme which helps you to create a website in just few minutes. You can create law firms, attorneys, counsel, legal adviser, legal experts websites and many more from this WordPress theme. Theme provides lots of options and is easily customizable through the Customizer. Optimized for speed and 1 click demo import options this theme is quick to setup.
Version: 2.2.2
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: frontline-child
Template:     frontline
Tags: elementor, law, law-firm, attorney, one-column, two-columns, left-sidebar, right-sidebar, grid-layout, accessibility-ready, custom-colors, custom-menu, editor-style, featured-images, footer-widgets, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* ==========================================================================
   audetlantinnotaire.com — surcharges 2026 (thème enfant)
   ========================================================================== */

/* M-04 · Horaire de la barre du haut : version longue (ordinateur) / courte (mobile).
   Le CSS additionnel du personnaliseur masque toute la barre sous 1200 px ; on la garde visible
   avec l'horaire seul (l'adresse et les réseaux sociaux restent dans le pied de page). */
.header-top .al-horaire-court { display: none; }

@media (max-width: 1199px) {
	html body #site-header-wrap.header-layout2 .header-top {
		display: flex !important;
		height: auto !important;
		min-height: 32px;
		padding: 6px 0;
	}
	#site-header-wrap .header-top .header-top-left .slide-ct-address,
	#site-header-wrap .header-top .header-top-right { display: none; }
	#site-header-wrap .header-top .header-top-inner,
	#site-header-wrap .header-top .header-top-left { justify-content: center; width: 100%; }
	#site-header-wrap .header-top .ct-item.slide-ct-time {
		display: flex; flex-direction: row; align-items: center; gap: 8px;
		margin: 0; padding: 0; border: 0;
	}
	#site-header-wrap .header-top .ct-item.slide-ct-time span { margin: 0; line-height: 1; }
	#site-header-wrap .header-top .ct-item.slide-ct-time p { white-space: nowrap; margin: 0; }
}

@media (max-width: 767px) {
	.header-top .al-horaire-long { display: none; }
	.header-top .al-horaire-court { display: inline; }
	#site-header-wrap .header-top .ct-item.slide-ct-time p { font-size: 13px; }
}

/* M-07 · Menu : libellés saisis tels que demandés (« Qui sommes-nous? »…), affichés en majuscules
   comme l'ancien menu (dont les libellés étaient tapés en capitales). */
#site-header-wrap .primary-menu > li > a { text-transform: uppercase; }

/* M-13 / M-14 · Qui sommes-nous? : deux portraits 4:5 côte à côte, même hauteur, même traitement,
   légende « Nos notaires » en italique sous les photos. Fond : réception sous voile blanc (réglage Elementor). */
.al-qui .al-qui-photos .elementor-widget-wrap { padding: 0 8px; }
.al-qui .al-portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 10, 30, .18);
}
.al-qui .al-qui-legende-titre { margin: 0 0 14px; } /* « Nos notaires » : sous-titre au-dessus des photos */
.al-qui .al-qui-legende-titre p {
	margin: 0;
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	color: #1c1c23;
}
.al-qui .al-qui-legendes .elementor-widget-wrap { padding: 0 8px; }
.al-qui .al-qui-legende p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
	color: #555;
}
.al-qui .al-qui-legende a { color: #00abb9; word-break: break-word; }
.al-qui .al-qui-legende strong.al-qui-nom { display: inline; font-style: normal; font-size: 15px; color: #1c1c23; }
.al-qui .al-qui-legendes .elementor-container { align-items: stretch; }
.al-qui .al-qui-legendes .elementor-column > .elementor-widget-wrap { height: 100%; align-content: flex-start; }
.al-qui .al-qui-legendes { margin-top: 14px; }

/* Badge « Actuellement en congé de maternité » (widget Elementor séparé, classe al-badge-conge) :
   superposé au bas de la photo de Mélanie, sans couvrir le visage. À supprimer dans Elementor à son retour. */
.al-qui .al-qui-photos .elementor-column:first-child > .elementor-widget-wrap { position: relative; }
.al-qui .al-qui-photos .elementor-widget-image { margin-bottom: 0; } /* le badge se place par rapport au bas de la photo */
.al-qui .elementor-widget.al-badge-conge {
	position: absolute; left: 50%; bottom: 14px; z-index: 2;
	width: max-content; max-width: calc(100% - 24px); margin: 0 !important;
	transform: translateX(-50%);
}
.al-qui .al-badge-conge p {
	margin: 0; padding: 6px 14px;
	background: #00abb9; color: #fff; border-radius: 6px;
	font-size: clamp(12px, .95vw, 15px); font-weight: 600; line-height: 1.3; text-align: center;
	font-variant-caps: all-small-caps; letter-spacing: .03em;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.al-qui .custom-heading-description p { margin-bottom: 1em; }

@media (max-width: 767px) {
	.al-qui .al-qui-photos { margin-top: 10px; }
	.al-qui .elementor-widget.al-badge-conge { bottom: 8px; }
	.al-qui .al-badge-conge p { font-size: 12px; padding: 4px 8px; letter-spacing: .02em; }
	.al-qui .al-qui-legendes .elementor-column { margin-bottom: 14px; }
}

/* M-20 · Nous joindre : le nouveau texte est plus long que l'ancien (qui avait un saut de ligne forcé) ;
   on limite la largeur pour qu'il ne passe pas sur la zone claire à droite de l'image de fond. */
#contact .custom-heading-description { max-width: 520px; }

/* M-21 · Pied de page : photo extérieure du bureau (enseigne « 2685 » / « Audet Lantin Notaire »)
   en fond, sous un voile sombre pour la lisibilité des coordonnées. */
#colophon .top-footer {
	background-color: #1c1c23;
	background-image:
		linear-gradient(rgba(14, 17, 28, .82), rgba(14, 17, 28, .88)),
		url("assets/img/exterieur-bureau-1920.jpg");
	background-image:
		linear-gradient(rgba(14, 17, 28, .82), rgba(14, 17, 28, .88)),
		image-set(url("assets/img/exterieur-bureau-1920.webp") type("image/webp"), url("assets/img/exterieur-bureau-1920.jpg") type("image/jpeg"));
	background-size: cover;
	background-position: center 45%;
}


/* M-30 · Pages de texte (politique de confidentialité, politique de témoins, demande de soumission) :
   sans bandeau de titre, largeur de lecture ~75 caractères, titres proportionnés. */
.al-page-texte #content { padding-top: 60px; padding-bottom: 70px; }
.al-page-texte .site-main .entry-content,
.al-page-texte #primary .entry-content { max-width: 38rem; margin: 0 auto; font-size: 17px; line-height: 1.7; color: #444; } /* ≈ 75 caractères par ligne */
.al-page-texte .entry-content h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.2; margin: 6px 0 10px; color: #1c1c23; }
.al-page-texte .entry-content h2 { font-size: clamp(22px, 2.6vw, 27px); line-height: 1.3; margin: 2.2em 0 .6em; color: #1c1c23; }
.al-page-texte .entry-content h3 { font-size: 19px; margin: 1.6em 0 .5em; color: #1c1c23; }
.al-page-texte .entry-content ul { margin: 0 0 1.2em 1.2em; list-style: disc; }
.al-page-texte .entry-content li { margin-bottom: .35em; }
.al-page-texte .entry-content a { color: #008c98; text-decoration: underline; word-break: break-word; }
.al-page-texte .al-politique-etude { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: #00abb9; }
.al-page-texte .al-politique-maj { color: #777; font-size: 14px; }

/* M-25 · Liens légaux du pied de page (menu « Liens légaux ») : petits liens, cibles tactiles suffisantes. */
#colophon .bottom-footer .bottom-menu ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
#colophon .bottom-footer .bottom-menu a { display: inline-block; padding: 10px 0; font-size: 13px; color: #aaa; text-decoration: underline; }
#colophon .bottom-footer .bottom-menu a:hover { color: #00abb9; }
/* Q35 · zone tactile ≥ 44 px (le lien fait 43 px) sans changer la mise en page : pseudo-élément centré */
#colophon .bottom-footer .bottom-menu a { position: relative; }
#colophon .bottom-footer .bottom-menu a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 100%; min-height: 44px; transform: translateY(-50%); }
@media (max-width: 767px) {
	#colophon .bottom-footer .bottom-col { flex-direction: column; align-items: flex-start; gap: 6px; }
	/* le bouton fixe « retour en haut » (bas gauche) ne doit pas recouvrir les liens en fin de page */
	#colophon .bottom-footer { padding-bottom: 76px; }
}

/* M-05 · Bloc « DEMANDE DE SOUMISSION RAPIDE » : même HTML dans les deux versions de l'héros
   (A : calque Slider Revolution ; B : section Elementor). Reprend l'identité de l'ancien carré noir
   « Consultation Téléphonique » (.contact-form-slider : fond #15151b, bordure turquoise, rayon 10 px, Playfair). */
a.al-cta-soumission {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	min-height: 120px;
	padding: 30px 28px;
	background-color: #15151b;
	border: 2px solid #00abb9;
	border-radius: 10px;
	color: #fff !important;
	font-family: 'Playfair Display', serif;
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .02em;
	text-align: center;
	text-decoration: none !important;
	white-space: normal;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
	transition: background-color .2s ease, border-color .2s ease;
}
a.al-cta-soumission .al-cta-titre { text-align: center !important; white-space: normal !important; } /* le calque Slider Revolution impose text-align en ligne */
a.al-cta-soumission .al-cta-fleche { color: #00abb9; font-size: 1.1em; transition: transform .2s ease, color .2s ease; }
a.al-cta-soumission:hover,
a.al-cta-soumission:focus-visible { background-color: #00abb9; border-color: #fff; }
a.al-cta-soumission:hover .al-cta-fleche,
a.al-cta-soumission:focus-visible .al-cta-fleche { color: #fff; transform: translateX(4px); }
a.al-cta-soumission:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
	a.al-cta-soumission { min-height: 64px; padding: 16px 18px; font-size: 19px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	a.al-cta-soumission, a.al-cta-soumission .al-cta-fleche { transition: none; }
}

/* Héros version B (statique 2026, section Elementor .al-hero-statique) : même contenu et même hiérarchie
   que le slider — logo, slogan, valeurs en rotation (CSS seul), numéro (mobile), bloc de soumission. */
.al-hero-statique { overflow: hidden; }
.al-hero-statique .al-hero-logo img { max-width: 100%; height: auto; }
.al-hero-statique .al-hero-slogan .elementor-heading-title { letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.al-hero-statique .al-hero-tel { margin: 0; text-align: center; font-size: 18px; }
.al-hero-statique .al-hero-tel a { color: #00aab8; display: inline-block; padding: 8px 12px; }

.al-valeurs {
	position: relative;
	height: 1.3em;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: clamp(22px, 3.7vw, 50px);
	line-height: 1.3;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}
.al-valeurs li {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: al-valeur 12s infinite;
}
.al-valeurs li:first-child { opacity: 1; } /* état sans animation : première valeur visible */
.al-valeurs li:nth-child(2) { animation-delay: 3s; }
.al-valeurs li:nth-child(3) { animation-delay: 6s; }
.al-valeurs li:nth-child(4) { animation-delay: 9s; }
@keyframes al-valeur {
	0%   { opacity: 0; transform: translateY(12px); }
	4%   { opacity: 1; transform: none; }
	22%  { opacity: 1; transform: none; }
	26%  { opacity: 0; transform: translateY(-8px); }
	100% { opacity: 0; }
}

/* Apparition légère au chargement (sans JavaScript) */
.al-hero-statique .elementor-widget { animation: al-hero-entree .3s ease-out both; }
.al-hero-statique .elementor-column + .elementor-column .elementor-widget { animation-delay: .12s; }
@keyframes al-hero-entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.al-hero-statique .al-hero-cta { max-width: 470px; margin-left: auto; margin-right: auto; }

@media (max-width: 767px) {
	.al-hero-statique .al-hero-cta { margin-top: 18px; }
	.al-valeurs { font-size: 15px; }
}

/* Mouvement réduit : pas de rotation, les quatre valeurs sont affichées ensemble. */
@media (prefers-reduced-motion: reduce) {
	.al-valeurs { height: auto; font-size: clamp(14px, 1.6vw, 20px); }
	.al-valeurs li { position: static; display: inline; opacity: 1; animation: none; }
	.al-valeurs li + li::before { content: " · "; }
	.al-hero-statique .elementor-widget { animation: none; }
}

/* Écran de chargement du thème : retiré par JavaScript au chargement. Sécurité sans JavaScript (ou si un
   script échoue) : il s'efface de lui-même après 4 s au plus, sinon le site reste masqué. */
#cms-loadding { animation: al-cacher-chargement .3s ease 4s forwards; }
@keyframes al-cacher-chargement { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 767px) {
	/* M-21 · version mobile de la photo extérieure (79 Ko au lieu de 386 Ko) */
	#colophon .top-footer {
		background-image:
			linear-gradient(rgba(14, 17, 28, .82), rgba(14, 17, 28, .88)),
			url("assets/img/exterieur-bureau-960.webp");
	}
}

/* Phase 5 · Les animations d'entrée Elementor (fadeInRight…) font arriver des colonnes depuis l'extérieur de
   l'écran : la page s'élargissait un instant (barre de défilement horizontale). On coupe ce qui dépasse
   sans créer de conteneur de défilement (en-tête collant préservé). */
body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* WebKit (Safari) ne reporte pas le « clip » du body sur la fenêtre : la page défilait encore de ~100 px
   pendant les animations. Chaque section Elementor de premier niveau coupe aussi son débordement horizontal
   (clip : le débordement vertical reste visible). */
.elementor-top-section { overflow-x: clip; }

/* Q35 · Liens « Politique de témoins » / « Politique de confidentialité » de la bannière Complianz : zone tactile
   ≥ 44 px sans changement visuel. Le lien (texte sur 1 ou 2 lignes) reste en ligne ; son pseudo-élément couvre toute
   la case <li> de la liste, au moins 44 px de haut, centré. */
.cmplz-cookiebanner .cmplz-documents li { position: relative; }
.cmplz-cookiebanner .cmplz-documents li > a.cmplz-link::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%;
	height: 100%; min-height: 44px; transform: translateY(-50%);
}

/* Phase 5 · Cibles tactiles ≥ 40–44 px (liens courriel/téléphone du pied de page et des légendes, réseaux sociaux) */
@media (max-width: 1024px) {
	/* zone de clic agrandie par un pseudo-élément : la hauteur des lignes (alignement) ne change pas */
	#colophon .al-info-bloc a,
	.al-qui .al-qui-legende a { position: relative; }
	#colophon .al-info-bloc a::after,
	.al-qui .al-qui-legende a::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; } /* ≈ 44 px */
	#colophon .cms-social-media a,
	#colophon .cs-social a,
	#colophon a.social-facebook,
	#colophon a.social-instagram { width: 44px !important; height: 44px !important; line-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; }
}

/* Pied de page en 4 colonnes équilibrées : présentation · Mélanie · Nancy · carte + réseaux sociaux.
   Sur 4 colonnes, le bloc de Nancy (sans titre) s'aligne sur celui de Mélanie (sous « Nos informations »). */

/* Pied de page — alignement horizontal (demande d'Oli, Phase 5) :
   même interligne dans les 4 colonnes ; en-têtes de même hauteur (« Nos informations », espace réservé au-dessus
   de Nancy, « Notre bureau ») ; blocs de coordonnées aux lignes identiques (nom, titre, adresse ×2, courriel,
   téléphone, fax) ; haut du logo aligné sur le haut des titres, même marge dessous. */
#colophon .top-footer {
	--al-pied-lh: 24px;            /* interligne commun */
	--al-pied-titre: 28px;         /* hauteur d'un titre de colonne */
	--al-pied-titre-mb: 18px;      /* marge sous les titres et sous le logo */
}
#colophon .top-footer .widget { margin-top: 0 !important; padding-top: 0 !important; }
#colophon .top-footer .widget + .widget { margin-top: 30px !important; }
#colophon .top-footer .footer-widget-title {
	margin: 0 0 var(--al-pied-titre-mb) !important; padding: 0 !important;
	font-size: 20px; line-height: var(--al-pied-titre); min-height: var(--al-pied-titre);
}
#colophon .top-footer p,
#colophon .top-footer li { margin: 0 !important; font-size: 14px; line-height: var(--al-pied-lh); }
#colophon .top-footer .widget_media_image img { display: block; margin: 0 0 var(--al-pied-titre-mb); }
#colophon .al-info-bloc p { white-space: nowrap; }
#colophon .al-info-nom strong { color: #fff; font-weight: 700; }
#colophon .al-info-titre { color: #cfd6da; }
#colophon .top-footer .gmw-thumbnail-map { display: block; line-height: 0; }
#colophon .top-footer .gmw-thumbnail-map img,
#colophon .top-footer .cmplz-placeholder-element { display: block; margin: 0; }
@media (min-width: 992px) {
	/* espace réservé de la hauteur d'un titre au-dessus du bloc de Nancy */
	#colophon .al-info-bloc--nancy { padding-top: calc(var(--al-pied-titre) + var(--al-pied-titre-mb)); }
}
/* colonne 1 : le texte suit le logo avec la même marge que sous les titres */
#colophon .top-footer .widget_media_image + .widget { margin-top: 0 !important; }
#colophon .top-footer .footer-logo.widget { margin-bottom: 0 !important; }

/* Pied de page — rangée d'en-têtes unique (3ᵉ demande d'Oli) : sur 4 colonnes, le logo tient lieu de titre de la
   colonne 1 ; la rangée prend la hauteur du logo (200 px de large max) et les titres s'alignent sur son bas.
   Le contenu des 4 colonnes (paragraphe, Mélanie, Nancy, carte) commence ainsi à la même hauteur. Mobile inchangé. */
@media (min-width: 992px) {
	#colophon .top-footer { --al-pied-entete: 85px; }  /* hauteur du logo à 199 px de large (ratio 1024 × 438) */
	#colophon .top-footer .widget_media_image img,
	.site-footer .top-footer .cms-footer-item .footer-logo img { /* l'emporte sur le max-height: 90px du CSS additionnel */
		height: var(--al-pied-entete) !important; max-height: none !important; width: auto !important; max-width: 200px !important; object-fit: contain;
	}
	#colophon .top-footer .footer-widget-title {
		display: flex; align-items: flex-end;
		height: var(--al-pied-entete); min-height: var(--al-pied-entete);
	}
	#colophon .al-info-bloc--nancy { padding-top: calc(var(--al-pied-entete) + var(--al-pied-titre-mb)); }
	/* le titre « Nos réseaux sociaux » (sous la carte) garde sa hauteur normale */
	#colophon .top-footer .widget + .widget .footer-widget-title { height: auto; min-height: var(--al-pied-titre); }
}

/* Pied de page — équilibre des colonnes (4ᵉ demande d'Oli) : « Nos réseaux sociaux » sous le paragraphe de la
   colonne 1 (même marge que sous la rangée des titres) ; la carte de la colonne 4 s'étire jusqu'au bas des icônes
   (colonnes de même hauteur, sans valeur figée). Mobile : logo, paragraphe, réseaux, Mélanie, Nancy, carte. */
#colophon .top-footer .cms-footer-item:first-child .widget_cs_social_widget { margin-top: var(--al-pied-titre-mb) !important; }
#colophon .top-footer .cms-footer-item:first-child .widget_text { margin-bottom: 0 !important; } /* sinon 29 px du thème */
#colophon .top-footer .widget:last-child,
#colophon .top-footer .widget:last-child > :last-child,
#colophon .top-footer .cms-social-media,
#colophon .top-footer .widget_cs_social_widget ul { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Carte du pied de page : taille réglée dans Google Maps Widget (270 × 290 px), jamais rognée (attribution Google
   visible, exigence de Google) ; l'image se réduit proportionnellement si la colonne est plus étroite.
   Le HTML du widget (div de Complianz dans un <p>) crée des paragraphes vides autour de la carte : masqués. */
#colophon #googlemapswidget-2 > p:not(:has(img)) { display: none; }
#colophon #googlemapswidget-2 > p { margin: 0 !important; }
#colophon #googlemapswidget-2 img { display: block; max-width: 100%; height: auto; }
/* avant consentement : l'espace réservé de Complianz prend le format de la carte (270 × 290) */
#colophon #googlemapswidget-2 img.cmplz-placeholder-element { width: 100%; aspect-ratio: 270 / 290; object-fit: cover; }

/* Q35 · Bouton « Gérer mon consentement » ([al-gerer-consentement]) au bas des pages de politique : même style que
   les boutons du site (Envoyer / Soumettre). Spécificité renforcée : ne pas hériter du bouton flottant de Complianz
   (position fixe, masqué sur mobile). */
.al-gerer-consentement { margin: 2.5em 0 1em; }
.al-gerer-consentement button.cmplz-manage-consent.al-bouton-consentement,
.al-gerer-consentement a.al-bouton-consentement {
	position: static !important; display: inline-block !important; visibility: visible !important;
	width: auto; min-height: 48px; margin: 0; padding: 13px 33px;
	font-family: "Futura Hv BT", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5;
	text-transform: uppercase; letter-spacing: .07em; color: #fff; background: #00abb9;
	border: 1px solid transparent; border-radius: 0; box-shadow: none; cursor: pointer; transform: none;
}
.al-gerer-consentement .al-bouton-consentement:hover,
.al-gerer-consentement .al-bouton-consentement:focus-visible { background: #1c1c23; color: #fff; text-decoration: none; }
.al-gerer-consentement .al-bouton-consentement:focus-visible { outline: 3px solid #00abb9; outline-offset: 2px; }
.al-gerer-consentement a.al-bouton-consentement { text-decoration: none; }
/* Politique de témoins : l'ancre du panneau 8.1 laisse voir son titre au-dessus */
#cmplz-manage-consent-container { scroll-margin-top: 110px; }