/**
 * ivg-menu-overlay.css — Pastille « Menu » + overlay plein écran.
 *
 * Isolé sous le préfixe .ivg-ov-*. Palette reprise du header Elementor #5079
 * (bleu #4251A7, titres en Capriola, textes en Poppins : les deux fontes sont
 * déjà chargées par le site, on n'en ajoute aucune).
 *
 * Markup : inc/ivg-menu-overlay.php · JS : assets/js/ivg-menu-overlay.js
 */

:root {
	--ivg-ov-bleu:        #4251A7;
	--ivg-ov-bleu-fonce:  #313C7D;
	--ivg-ov-encre:       #1E2340;
	--ivg-ov-gris:        #5A6072;
	--ivg-ov-ligne:       #E3E5EF;
	--ivg-ov-fond:        #FFFFFF;
	--ivg-ov-fond-doux:   #F5F6FB;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER ELEMENTOR — neutralisation de la nav horizontale
   La navigation vit désormais dans l'overlay (décision Fred, 03/09/2026).
   RETOUR ARRIÈRE : commenter ce bloc, rien d'autre. Le template Elementor
   #5079 n'a PAS été modifié, les widgets sont intacts en base.

   ⚠️ TOUT est conditionné à `html.ivg-ov-actif`, classe posée par un script
   inline en tête de page (cf. ivg_overlay_classe_html()). Sans JavaScript, la
   classe n'existe pas : la nav horizontale reste affichée et le site garde une
   navigation. Ne jamais dé-scoper ces règles — ce serait livrer un site sans
   menu du tout aux visiteurs sans JS.
   ══════════════════════════════════════════════════════════════════════════ */

/* Toute navigation horizontale dans N'IMPORTE QUEL header Elementor.
   Règle générique et non par identifiant de widget : le site a au moins DEUX
   templates de header — #5079 (général) et #13497 (Hauts-de-France, en vert) —
   et cibler les widgets un par un laissait la nav en place sur le second.
   Un futur header hérite de la règle sans qu'on y pense. */
.ivg-ov-actif .elementor-location-header .elementor-widget-nav-menu {
	display: none !important;
}

/* La colonne desktop qui portait la nav (71 % de la barre) devient vide :
   on la retire pour que le titre et le bouton de sortie se répartissent la
   largeur. La colonne mobile (f2a1a9b) est CONSERVÉE : c'est elle qui
   accueille la pastille. */
.ivg-ov-actif .elementor-5079 .elementor-element-d8594ba {
	display: none !important;
}
.ivg-ov-actif .elementor-5079 .elementor-element-db92e9e,
.ivg-ov-actif .elementor-5079 .elementor-element-027f50f {
	width: auto !important;
}
.ivg-ov-actif .elementor-5079 .elementor-element-027f50f {
	margin-left: auto;
}

/* Nom du site centré dans la barre desktop (pastille à gauche, sortie à
   droite), à la façon du header de jeunesmedecins.fr.
   Centrage en absolu plutôt qu'en grille : les colonnes Elementor ont des
   largeurs en pourcentage figées dans le template, et le titre vit dans la
   colonne de gauche avec la pastille. Le sortir du flux est le seul moyen de
   le centrer sur la BARRE et non sur sa colonne, sans toucher au template.
   Desktop seulement : sur mobile la barre n'a pas la place. */
@media (min-width: 768px) {
	.ivg-ov-actif .elementor-5079 .elementor-element-d25c9dd > .elementor-container {
		position: relative;
	}
	/* Elementor pose `position: relative` sur ses colonnes ET sur les
	   .elementor-widget-wrap. Sans les remettre en `static`, le titre en
	   absolu se cale sur sa colonne (à gauche) et non sur la barre : il
	   restait collé à 62px du bord. */
	.ivg-ov-actif .elementor-5079 .elementor-element-db92e9e,
	.ivg-ov-actif .elementor-5079 .elementor-element-db92e9e > .elementor-widget-wrap {
		position: static;
	}
	.ivg-ov-actif .elementor-5079 .elementor-element-d046b3b {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		margin: 0;
	}
	.ivg-ov-actif .elementor-5079 .elementor-element-d046b3b .elementor-heading-title {
		font-size: 21px;
		white-space: nowrap;
	}
}

/* Même traitement pour le header Hauts-de-France (#13497, en vert), qui a sa
   propre structure : une seule section desktop, colonnes 33/33/33, titre en
   `c3f634f` / `e68adc6`. Il n'a AUCUNE section mobile — sous 1025px la page
   HDF n'affiche pas de header du tout, et la pastille repasse en position
   fixe en haut à gauche (repli prévu par le CSS et le JS). C'est un gain :
   cette page n'avait jusqu'ici aucune navigation sur mobile. */
@media (min-width: 768px) {
	.ivg-ov-actif .elementor-13497 .elementor-element-1704c30 > .elementor-container {
		position: relative;
	}
	.ivg-ov-actif .elementor-13497 .elementor-element-c3f634f,
	.ivg-ov-actif .elementor-13497 .elementor-element-c3f634f > .elementor-widget-wrap {
		position: static;
	}
	/* Colonne du milieu vidée de sa nav : on la retire et on laisse la
	   colonne du titre prendre sa largeur naturelle (même recette que
	   pour le header #5079 plus haut). */
	.ivg-ov-actif .elementor-13497 .elementor-element-c5865bc {
		display: none !important;
	}
	.ivg-ov-actif .elementor-13497 .elementor-element-c3f634f {
		width: auto !important;
	}
	.ivg-ov-actif .elementor-13497 .elementor-element-e68adc6 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		margin: 0;
	}
	.ivg-ov-actif .elementor-13497 .elementor-element-e68adc6 .elementor-heading-title {
		font-size: 21px;
		white-space: nowrap;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER COLLANT (sticky) — décision Fred, 03/09/2026
   La barre porte « Quitter le site rapidement ». Sur un site IVG la sortie
   d'urgence ne doit jamais demander de remonter en haut d'une page longue :
   la barre reste donc collée en haut au défilement. Volontairement PAS scopé
   à .ivg-ov-actif — sans JavaScript, la sortie d'urgence doit rester à un
   geste elle aussi.

   Vérifié le 03/09/2026 : aucun ancêtre du <header> n'a d'`overflow` autre
   que visible (#c27-site-wrapper, body, html), condition sans laquelle
   `sticky` est silencieusement ignoré. Le fond bleu est sur la section
   Elementor, pas sur le <header> : rien d'autre ne change visuellement.

   z-index sous la pastille (1000) et l'overlay (99999), au-dessus du contenu
   (cartes, sliders MyListing).
   RETOUR ARRIÈRE : commenter ce bloc.
   ══════════════════════════════════════════════════════════════════════════ */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 900;
}
/* Utilisateurs connectés : la barre d'admin WordPress est fixée en haut
   (32px, 46px sous 783px) — on se cale dessous. */
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .elementor-location-header { top: 46px; }
}

/* Rétraction au défilement (mobile) : le JS pose .ivg-header-cachee quand on
   descend et la retire dès qu'on remonte (cf. « Barre collante qui se
   rétracte » dans ivg-menu-overlay.js). Le JS ne pose jamais la classe
   au-dessus de 1024px ; la media query est une ceinture en plus des
   bretelles. Sans JS : simple sticky, jamais cachée. */
@media (max-width: 1024px) {
	.elementor-location-header {
		transition: transform 0.25s ease;
		will-change: transform;
	}
	.elementor-location-header.ivg-header-cachee {
		transform: translateY(-100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header { transition: none; }
}

/* Barre mobile #5079 : le bouton « Quitter le site rapidement » (widget
   9edd29d, colonne 6ee4179 à 35 %) débordait de sa colonne sous ~400px —
   page de 406px pour un écran de 390, bouton coupé et scroll horizontal.
   Défaut antérieur à l'overlay, repéré le 03/09/2026 en vérifiant le
   sticky. Padding resserré, bouton calé à droite, gouttière gauche de la
   colonne retirée. Tient jusqu'à 360px (largeur Android de base).
   Spécificité `.elementor-element.elementor-element-x` : nécessaire pour
   passer devant les règles responsive générées par Elementor. */
@media (max-width: 480px) {
	.elementor-5079 .elementor-element.elementor-element-9edd29d .elementor-button {
		padding: 10px 8px;
	}
	.elementor-5079 .elementor-element.elementor-element-9edd29d .elementor-button-wrapper {
		text-align: right;
	}
	.elementor-5079 .elementor-element.elementor-element-6ee4179 > .elementor-widget-wrap {
		padding-left: 0;
		padding-right: 4px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   PASTILLE « MENU »
   ══════════════════════════════════════════════════════════════════════════ */

/* Conteneur d'accueil : le JS pose .ivg-ov-host sur la colonne Elementor qui
   reçoit la pastille. Sans cela, .elementor-widget-wrap empile ses enfants
   verticalement et la pastille se retrouverait au-dessus du titre du site. */
.ivg-ov-host {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 14px;
}

/* Masquée par défaut, affichée seulement quand le JS a posé `ivg-ov-actif` :
   une pastille sans JavaScript n'ouvrirait rien. Pendant ce temps la nav
   horizontale du header reste en place (cf. bloc précédent). */
.ivg-ov-burger { display: none; }

.ivg-ov-actif .ivg-ov-burger {
	/* Repli si aucune barre visible (header masqué, refonte du template) :
	   la pastille reste atteignable en haut à gauche. */
	position: fixed;
	top: 14px;
	left: 14px;
	z-index: 1000;

	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 15px;
	background: var(--ivg-ov-fond);
	color: var(--ivg-ov-bleu);
	border: none;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(30, 35, 64, .18);
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

/* Pastille injectée DANS la barre : flux normal, elle suit le header.
   Préfixe `.ivg-ov-actif` obligatoire : sans lui cette règle serait moins
   spécifique que le bloc ci-dessus et le `position: fixed` l'emporterait. */
.ivg-ov-actif .ivg-ov-burger--inline {
	position: static;
	top: auto;
	left: auto;
	flex: 0 0 auto;
}

.ivg-ov-actif .ivg-ov-burger:hover,
.ivg-ov-actif .ivg-ov-burger:focus-visible {
	background: var(--ivg-ov-fond-doux);
	color: var(--ivg-ov-bleu-fonce);
}

.ivg-ov-burger-lignes {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ivg-ov-burger-lignes span {
	display: block;
	width: 19px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.ivg-ov-burger-label {
	/* line-height 1 : on centre le mot dans la pastille, pas un paragraphe. */
	line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   OVERLAY PLEIN ÉCRAN
   ══════════════════════════════════════════════════════════════════════════ */

.ivg-ov {
	position: fixed;
	inset: 0;
	/* Au-dessus du header Elementor (z-index 1000 côté thème) et du loader
	   MyListing, sous rien d'autre : c'est un dialogue modal. */
	z-index: 99999;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--ivg-ov-fond);
	padding: 20px clamp(20px, 5vw, 72px) 48px;
	font-family: "Poppins", system-ui, sans-serif;
}
.ivg-ov[hidden] { display: none; }
body.ivg-ov-open { overflow: hidden; }

/* ── Barre haute : fermeture à gauche, sortie d'urgence à droite ────────── */
/* La fermeture est à gauche, à l'endroit même de la pastille « Menu » qui
   vient d'ouvrir l'overlay : ouvrir et fermer se font au même endroit. Le nom
   du site n'y est plus — il reste lisible sur la barre Elementor. */
.ivg-ov-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ivg-ov-ligne);
}

.ivg-ov-bar-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Sortie d'urgence : reprise du bouton du header, en version lisible sur
   fond clair. Traitement distinct des liens de menu — c'est un dispositif de
   sécurité, il doit se repérer sans être lu. */
.ivg-ov-sortie {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--ivg-ov-bleu);
	border-radius: 5px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
/* Fermeture : bouton texte « ✕ Fermer le menu », croix avant le libellé.
   Même famille visuelle que la sortie d'urgence (pill, bleu sur fond doux)
   pour que la barre se lise comme une seule rangée d'actions. */
.ivg-ov-close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* 44px : cible tactile minimale. Géométrie du composant, pas un espacement. */
	min-height: 44px;
	padding: 0 18px 0 14px;
	box-sizing: border-box;
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	background: var(--ivg-ov-fond-doux);
	border: none;
	border-radius: 999px;
	cursor: pointer;
}
.ivg-ov-close-croix {
	font-size: 26px;
	line-height: 1;
	/* Recentre optiquement le × (sa boîte glyphe est un peu haute). */
	position: relative;
	top: -1px;
}
.ivg-ov-close:focus-visible {
	outline: 2px solid var(--ivg-ov-bleu);
	outline-offset: 2px;
}

/* ── Colonnes ──────────────────────────────────────────────────────────── */
/* Colonnes ancrées en haut, sous la barre (choix Fred, 03/09/2026 : le
   centrage vertical décrochait le menu du geste qui vient de l'ouvrir). */
.ivg-ov-nav {
	flex: 1;
	display: flex;
	align-items: flex-start;
	padding-top: clamp(28px, 4vw, 48px);
}
.ivg-ov-nav > .ivg-ov-cols { width: 100%; }
.ivg-ov-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
	max-width: 1240px;
}
.ivg-ov-col { min-width: 0; }

.ivg-ov-h {
	display: block;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ivg-ov-ligne);
	font-family: "Capriola", system-ui, sans-serif;
	font-size: 17px;
	color: var(--ivg-ov-bleu);
	text-decoration: none;
}
a.ivg-ov-h:hover { border-bottom-color: var(--ivg-ov-bleu); }

.ivg-ov-sub { list-style: none; margin: 0; padding: 0; }
.ivg-ov-sub li { margin: 0 0 12px; }
.ivg-ov-sub a {
	font-size: 15px;
	line-height: 1.4;
	color: var(--ivg-ov-encre);
	text-decoration: none;
}
.ivg-ov-sub a:hover { color: var(--ivg-ov-bleu); text-decoration: underline; }

/* ── Pied de l'overlay : liens légaux à gauche, connexion à droite ──────── */
.ivg-ov-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: clamp(32px, 5vw, 64px);
	padding-top: 20px;
	border-top: 1px solid var(--ivg-ov-ligne);
}
.ivg-ov-foot-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ivg-ov-foot-liens a,
.ivg-ov-foot-lien {
	font-size: 13px;
	color: var(--ivg-ov-gris);
	text-decoration: none;
}
.ivg-ov-foot-liens a:hover,
.ivg-ov-foot-lien:hover { color: var(--ivg-ov-bleu); text-decoration: underline; }

/* Liens de compte : visibles uniquement pour les utilisateurs connectés, et
   traités comme les mentions légales — discrets, jamais comme un bouton. Le
   grand public ne voit rien ici (cf. ivg_overlay_render_pied_compte()). */
.ivg-ov-foot-compte {
	display: flex;
	gap: 20px;
	margin-left: auto;
}

/* ── Garde-fou contraste ────────────────────────────────────────────────
   MyListing et Elementor recolorent liens et boutons au survol (règles
   globales sur `a`), ce qui casse le contraste de nos éléments sur fond
   coloré. On force donc la couleur du texte, avec la spécificité .ivg-ov et
   !important. Volontaire, et limité à ces trois éléments. */
.ivg-ov .ivg-ov-sortie,
.ivg-ov .ivg-ov-sortie:hover,
.ivg-ov .ivg-ov-sortie:focus,
.ivg-ov .ivg-ov-close,
.ivg-ov .ivg-ov-close:hover,
.ivg-ov .ivg-ov-close:focus { color: var(--ivg-ov-bleu) !important; }

.ivg-ov .ivg-ov-sortie:hover { background: var(--ivg-ov-fond-doux); }
.ivg-ov .ivg-ov-close:hover { background: var(--ivg-ov-ligne) !important; }

.ivg-ov .ivg-ov-foot-liens a,
.ivg-ov .ivg-ov-foot-lien { color: var(--ivg-ov-gris) !important; }
.ivg-ov .ivg-ov-foot-liens a:hover,
.ivg-ov .ivg-ov-foot-lien:hover { color: var(--ivg-ov-bleu) !important; }

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Barre mobile Elementor : la colonne d'accueil ne fait que 15 % de la
   largeur. La pastille passe en icône seule (46px, au-dessus de la cible
   tactile de 44px), le mot « Menu » ne tiendrait pas. */
@media (max-width: 1024px) {
	.ivg-ov-actif .ivg-ov-burger--inline {
		gap: 0;
		width: 46px;
		height: 46px;
		padding: 0;
		justify-content: center;
	}
	.ivg-ov-actif .ivg-ov-burger--inline .ivg-ov-burger-label { display: none; }
}

@media (max-width: 900px) {
	.ivg-ov-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ivg-ov-sortie { font-size: 13px; padding: 0 12px; }
	.ivg-ov-close { font-size: 13px; padding: 0 14px 0 12px; gap: 8px; }
	.ivg-ov-foot-compte { margin-left: 0; }
}

@media (max-width: 560px) {
	.ivg-ov-cols { grid-template-columns: 1fr; }
}