/**
 * ivg-menu-overlay.css — Pastille « Menu » + overlay plein écran.
 *
 * Isolé sous le préfixe .ivg-ov-*. Palette reprise de l'ancien 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/menu-overlay.php (thème ivg) · 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;
}

/* La barre d'en-tête (header.php) porte une nav horizontale de secours :
   visible seulement sans JavaScript. Avec JS, la pastille « Menu » la remplace.
   Le placement, le collant et la rétraction mobile de la barre sont dans style.css. */
.ivg-ov-actif .ivg-entete__nav { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   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; }
}