/* Novélia – en-tête : baseline sous le logo et menus déroulants (compatible thème noveliatheme) */

/* ---------- Baseline sous le logo ----------
   La baseline fait exactement la largeur du logo, texte justifié bord à bord.
   Sans script : pseudo-élément contraint à la largeur du logo (width 0 + min-width 100 %), justifié.
   Avec script (ns-entete.js) : un vrai <span> dont la taille de police est calculée pour remplir
   la largeur du logo sur une ligne, recalculée quand le logo change de taille (en-tête fixe, écrans). */
body.ns-baseline .jdo-menu > a:first-child {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	flex: none;
	text-decoration: none;
}
body.ns-baseline .jdo-menu > a:first-child::after,
body.ns-baseline .jdo-menu > a:first-child .ns-baseline-texte {
	display: block;
	width: 0;
	min-width: 100%;
	margin-top: 7px;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 9px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: justify;
	text-align-last: justify;
	color: rgba(255, 255, 255, .94);
	text-shadow: 0 1px 8px rgba(30, 10, 28, .35);
	transition: color .3s;
}
body.ns-baseline .jdo-menu > a:first-child::after { content: var(--ns-baseline, "Développer, construire & respecter"); }
body.ns-baseline.ns-baseline-js .jdo-menu > a:first-child::after { content: none; display: none; }
body.ns-baseline .jdo-menu > a:first-child .ns-baseline-texte { white-space: nowrap; overflow: visible; }
body.ns-baseline .jdo-menu.fixed-menu > a:first-child::after,
body.ns-baseline .jdo-menu.fixed-menu > a:first-child .ns-baseline-texte {
	color: #8e3d80;
	text-shadow: none;
	margin-top: 5px;
}
@media only screen and (max-width: 1140px) {
	body.ns-baseline .jdo-menu > a:first-child { position: relative; z-index: 999999999; }
	body.ns-baseline .jdo-menu > a:first-child::after,
	body.ns-baseline .jdo-menu > a:first-child .ns-baseline-texte { margin-top: 4px; }
}

/* ---------- Menus déroulants ---------- */
body.ns-menus #menu-menu-principal > li { position: relative; }
body.ns-menus #menu-menu-principal .sub-menu { list-style: none; margin: 0; padding: 0; text-transform: none; }
body.ns-menus #menu-menu-principal .sub-menu a::after,
body.ns-menus #menu-menu-principal .sub-menu a::before { content: none !important; display: none !important; }
body.ns-menus #menu-menu-principal .ns-chevron { display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: 1px; transition: transform .2s; }
body.ns-menus #menu-menu-principal .ns-chevron svg { display: block; width: 10px; height: 10px; }
body.ns-menus .ns-bascule { display: none; }

/* Entrée « Espace client » */
body.ns-menus #menu-menu-principal li.ns-menu-espace > a::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 6px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pas d'animation de taille ou de marge au chargement (le thème anime toutes les propriétés des liens) */
body.ns-menus #menu-menu-principal a { transition-property: color, background-color, border-color, padding; }

@media only screen and (min-width: 1141px) {
	/* Un menu plus dense : huit entrées tiennent sur une ligne, à côté du bouton Contact */
	body.ns-menus #menu-menu-principal > li > a { margin-left: 9px; margin-right: 9px; font-size: 14px; }
	body.ns-menus #menu-menu-principal .ns-chevron { margin-left: 4px; }

	body.ns-menus #menu-menu-principal > li > .sub-menu {
		position: absolute;
		top: calc(100% + 12px);
		left: 50%;
		z-index: 100000;
		min-width: 260px;
		padding: 10px;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 22px 48px rgba(46, 18, 40, .22);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 10px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	/* Pont invisible : le survol ne se perd pas entre l'entrée et le panneau */
	body.ns-menus #menu-menu-principal > li > .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -16px;
		height: 16px;
	}
	body.ns-menus #menu-menu-principal > li:hover > .sub-menu,
	body.ns-menus #menu-menu-principal > li:focus-within > .sub-menu,
	body.ns-menus #menu-menu-principal > li.ns-ouvert > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
	body.ns-menus #menu-menu-principal > li:hover .ns-chevron,
	body.ns-menus #menu-menu-principal > li.ns-ouvert .ns-chevron { transform: rotate(180deg); }
	body.ns-menus #menu-menu-principal > li.ns-colonnes > .sub-menu { width: 520px; columns: 2; column-gap: 6px; }
	body.ns-menus #menu-menu-principal .sub-menu li { break-inside: avoid; }
	body.ns-menus #menu-menu-principal .sub-menu a {
		display: block;
		margin: 0 !important;
		padding: 9px 13px !important;
		border-radius: 10px;
		color: #4d4d4d !important;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.3;
		white-space: normal;
		text-decoration: none;
		transition: background .15s, color .15s;
	}
	body.ns-menus #menu-menu-principal .sub-menu a:hover,
	body.ns-menus #menu-menu-principal .sub-menu a:focus-visible {
		background: rgba(142, 61, 128, .09);
		color: #8e3d80 !important;
	}
	body.ns-menus #menu-menu-principal .sub-menu .current-menu-item > a { color: #8e3d80 !important; font-weight: 600; }

	body.ns-menus #menu-menu-principal li.ns-menu-espace > a {
		padding: 7px 14px;
		border: 1.5px solid rgba(255, 255, 255, .75);
		border-radius: 999px;
	}
	body.ns-menus #menu-menu-principal li.ns-menu-espace > a::after { content: none !important; }
	body.ns-menus .jdo-menu.fixed-menu #menu-menu-principal li.ns-menu-espace > a { border-color: #8e3d80; color: #8e3d80; }
}

/* Grands écrans : un peu moins de marge latérale dans l'en-tête, pour laisser respirer le menu */
@media only screen and (min-width: 1601px) {
	body.ns-menus .jdo-menu { padding-left: 5vw; padding-right: 5vw; }
	body.ns-menus .jdo-menu.fixed-menu { padding-left: 4vw; padding-right: 4vw; }
	body.ns-menus #menu-menu-principal > li > a { font-size: 16px; margin-left: 12px; margin-right: 12px; }
}
/* Écrans moyens : « Espace client » en pastille ronde (le libellé reste lu par les lecteurs d'écran) */
@media only screen and (min-width: 1141px) and (max-width: 1799px) {
	body.ns-menus #menu-menu-principal li.ns-menu-espace > a {
		display: inline-grid;
		place-items: center;
		width: 38px;
		height: 38px;
		padding: 0;
		font-size: 0;
		border-radius: 50%;
	}
	body.ns-menus #menu-menu-principal li.ns-menu-espace > a::before { width: 17px; height: 17px; margin: 0; }
}
@media only screen and (min-width: 1141px) and (max-width: 1350px) {
	body.ns-menus #menu-menu-principal > li > a { margin-left: 6px; margin-right: 6px; font-size: 13px; }
	body.ns-menus .jdo-menu .menu-menu-principal-container { padding-left: 1.5vw; padding-right: 0; }
	body.ns-menus #menu-menu-principal .ns-chevron { margin-left: 3px; width: 9px; height: 9px; }
}

/* Téléphone et tablette : sous-menus en accordéon dans le panneau du thème */
@media only screen and (max-width: 1140px) {
	body.ns-menus .jdo-menu .menu-btn:checked ~ .jdo-navbar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
	body.ns-menus #menu-menu-principal { padding-bottom: 40px; }
	body.ns-menus #menu-menu-principal > li { display: flex; flex-wrap: wrap; align-items: center; }
	body.ns-menus #menu-menu-principal .ns-chevron { display: none; }
	body.ns-menus .ns-bascule {
		display: inline-grid;
		place-items: center;
		width: 34px;
		height: 34px;
		margin-left: -6px;
		padding: 0;
		border: 1.5px solid currentColor;
		border-radius: 50%;
		background: transparent;
		color: inherit;
		cursor: pointer;
		opacity: .85;
	}
	body.ns-menus .ns-bascule svg { width: 14px; height: 14px; transition: transform .2s; }
	body.ns-menus .ns-ouvert > .ns-bascule svg { transform: rotate(180deg); }
	body.ns-menus #menu-menu-principal .sub-menu {
		display: none;
		flex-basis: 100%;
		margin: 0 0 8px 20px;
		padding-left: 14px;
		border-left: 2px solid rgba(201, 203, 91, .8);
	}
	body.ns-menus #menu-menu-principal .ns-ouvert > .sub-menu { display: block; }
	body.ns-menus #menu-menu-principal .sub-menu a {
		font-size: 15.5px;
		margin: .7vh 12px !important;
		text-transform: none;
		font-weight: 500;
	}
	body.ns-menus #menu-menu-principal .sub-menu a:hover { padding-left: 0; }
	body.ns-menus .jdo-menu:not(.fixed-menu) .ns-bascule { color: #fff; }
	body.ns-menus .jdo-menu.fixed-menu .ns-bascule { color: #4d4d4d; }
}

/* ---------- Baseline sous les autres logos Novélia (pied de page, contact, pages programmes, Groupe) ----------
   Même principe que dans l'en-tête : exactement la largeur du logo, texte justifié ; ns-entete.js ajuste la taille. */
.ns-logo-baseline { display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; vertical-align: top; text-decoration: none; }
.ns-logo-baseline > img { display: block; margin-bottom: 0 !important; }
.ns-baseline-logo { display: block; width: 0; min-width: 100%; margin-top: 8px; font-family: Montserrat, system-ui, sans-serif; font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-align: justify; text-align-last: justify; }
.ns-logo-couleur .ns-baseline-logo { color: #8e3d80; }
.ns-logo-clair .ns-baseline-logo { color: rgba(255, 255, 255, .92); }
.nsite .ns-coordonnees-marque, .nlp .logo-novelia-marque, .nsite .ns-metier-marque { margin-bottom: 18px; }

/* Pictos d'appel et d'e-mail du thème, à droite de l'écran (ordinateur) : plus discrets, et la bande transparente qui
   les porte ne bloque plus les clics sur la page */
@media (min-width: 1141px) {
	.menu-contact { pointer-events: none; }
	.menu-contact a { pointer-events: auto; }
	.menu-contact .menu-contact-btn-call, .menu-contact .menu-contact-btn-email {
		width: 56px; height: 56px; padding: 0; margin: 0 0 10px;
		display: flex; align-items: center; justify-content: center;
		border-radius: 16px 0 0 16px;
	}
	.menu-contact .menu-contact-btn-email { margin-bottom: 0; }
	.menu-contact .menu-contact-btn-call img, .menu-contact .menu-contact-btn-email img { width: 22px; max-width: 22px; height: auto; }
}