/*
 * navbar/pilule — engagement 5 : aucun hexadecimal, valeurs de repli comprises.
 *
 * BASCULE FRANCHE. Contrairement a voile, qui interpole tout sur --ivy-stuck,
 * cette composition ne lit QUE la classe .ivy-stuck. Les deux etats sont deux
 * jeux de valeurs, et une transition CSS fait le chemin entre eux.
 *
 * MOTIF DE SPECIFICITE, et c'est la seule chose non evidente du fichier.
 * L'etat bascule des PROPRIETES PERSONNALISEES sur la racine ; les regles qui
 * les consomment restent a deux classes. Elementor, lui, emet ses selecteurs
 * sous {{WRAPPER}}, donc a trois classes au moins : un reglage du panneau bat
 * toujours le gabarit, dans les DEUX etats. Ecrire directement
 * ".ivy-navbar--pilule.ivy-stuck .ivy-navbar__stage { width: ... }" mettrait
 * le gabarit a egalite avec le controle, et l'ordre de chargement deciderait
 * — c'est-a-dire personne.
 */

.ivy-navbar--pilule {
	--ivy-pill-width: 100%;
	--ivy-pill-height: var( --ivy-navbar-h, 104px );
	--ivy-pill-radius: 0;
	--ivy-pill-surface: transparent;
	--ivy-pill-shadow: none;

	/*
	 * L'encre de la barre, pour ce qui n'a PAS de controle propre : le
	 * chevron des sous-menus, et le repli du burger.
	 *
	 * Elle ne lit AUCUNE propriete ecrite par un controle, et c'est le
	 * correctif du defaut trouve dans l'editeur. La famille "color" ecrit
	 * --ivy-<partie>-color sur le SELECTEUR DE LA FAMILLE — le lien, le CTA —
	 * jamais sur la racine. Une bascule hissee ici ne la voit pas : un parent
	 * ne lit pas une propriete posee sur son enfant, et le reglage du client
	 * etait purement ignore aux deux bouts. Les couleurs pilotables se
	 * resolvent donc sur leur consommateur, plus bas.
	 */
	--ivy-pill-ink: var( --ivy-surface, rgb( 255 255 255 ) );
	--ivy-pill-cta-bg: var( --ivy-surface, rgb( 255 255 255 ) );

	--ivy-pill-ease: cubic-bezier( 0.65, 0, 0.35, 1 );
	--ivy-pill-duree: calc( 280ms * var( --ivy-motion, 1 ) );

	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	padding: 0;
}

.ivy-navbar--pilule.ivy-stuck {
	--ivy-pill-width: min( 100%, var( --ivy-navbar-max, 1000px ) );
	--ivy-pill-height: var( --ivy-navbar-h-stuck, 80px );
	--ivy-pill-radius: var( --ivy-navbar-radius-stuck, 30px );
	--ivy-pill-surface: var( --ivy-surface, rgb( 255 255 255 ) );
	--ivy-pill-shadow: 0 2px 6px rgb( 0 0 0 / 0.07 );

	--ivy-pill-ink: var( --ivy-ink, rgb( 17 17 17 ) );
	--ivy-pill-cta-bg: var( --ivy-ink, rgb( 17 17 17 ) );

	/*
	 * La gouttiere n'apparait qu'a l'etat colle : au repos la barre est de
	 * bord a bord, et c'est ce contraste qui fait le geste.
	 */
	padding: var( --ivy-navbar-gutter-y, 16px ) var( --ivy-navbar-gutter, 20px ) 0;
}

/* --- La pilule ---------------------------------------------------------- */

.ivy-navbar--pilule .ivy-navbar__stage {
	width: var( --ivy-pill-width );
	min-height: var( --ivy-pill-height );
	margin-inline: auto;
	border-radius: var( --ivy-pill-radius );
	background: var( --ivy-pill-surface );
	box-shadow: var( --ivy-pill-shadow );
	transition:
		border-radius var( --ivy-pill-duree ) var( --ivy-pill-ease ),
		background-color var( --ivy-pill-duree ) var( --ivy-pill-ease ),
		box-shadow var( --ivy-pill-duree ) var( --ivy-pill-ease );
}

.ivy-navbar--pilule .ivy-navbar__inner {
	display: flex;
	align-items: center;
	gap: clamp( 16px, 3vw, 48px );
	min-height: inherit;
	/*
	 * Marge interieure PAR DEFAUT, que le controle Bar > Padding remplace des
	 * qu'il est regle — a chaque bout independamment, l'onglet Collee etant
	 * desormais emis pour la famille spacing.
	 */
	padding-inline: var( --ivy-navbar-pad, clamp( 16px, 2.5vw, 40px ) );
}

/* --- Le partage : la part de barre que prend chaque bloc ---------------- *
 *
 * Au-dessus du point de rupture, le fragment mobile_panel est en
 * `display: contents` : le logo, le menu et le CTA sont donc TROIS ENFANTS
 * DIRECTS de .ivy-navbar__inner, et un pourcentage posé sur l'un d'eux se lit
 * sur la largeur de la barre. C'est ce qui rend le partage réglable au
 * panneau, par la famille `size` en %, à l'état normal comme collé.
 *
 * `flex-shrink: 1` et `min-inline-size: 0` sont la ceinture. Trois parts qui
 * totalisent 100 % PLUS les deux gouttières dépassent la largeur disponible :
 * sans ces deux lignes les blocs refusent de se réduire et la barre déborde.
 * Avec elles ils cèdent au prorata, et la somme se lit comme une proportion,
 * jamais comme une mesure au pixel.
 *
 * RIEN NE CHANGE TANT QU'AUCUNE PART N'EST RÉGLÉE : `flex-basis: auto` lit
 * alors la largeur intrinsèque, exactement comme avant.
 */

/* --- Logo : deux exemplaires, un seul visible --------------------------- */

.ivy-navbar--pilule .ivy-navbar__logo {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-inline-size: 0;
	min-height: 44px;
}

.ivy-navbar--pilule .ivy-navbar__logo-img {
	display: block;
	/*
	 * LA HAUTEUR RENDUE DE LA MARQUE, et le repli est la valeur d'hier : la
	 * barre moins sa respiration. C'etait un `max-height`, donc un PLAFOND —
	 * une largeur plus genereuse elargissait la boite sans jamais agrandir le
	 * logo, et le reglage paraissait mort. Constate par Alex le 21 aout.
	 *
	 * Ecrite ici en `block-size`, elle devient une valeur que le controle
	 * Hauteur du panneau REMPLACE — il vise ce meme selecteur, declare sous
	 * `size_height`. La barre suit par son `min-height`.
	 */
	block-size: calc( var( --ivy-pill-height ) - 24px );
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	/*
	 * ANCRE A GAUCHE. Des qu'une part est reglee, la boite du logo devient
	 * plus large que l'image — le plafond de hauteur, lui, ne bouge pas. Sans
	 * cette ligne, `contain` centre la marque dans sa boite et le logo se
	 * decolle du bord gauche : le reglage semble deplacer le logo au lieu de
	 * lui donner de la place. Mesure du 21 aout : part a 18 %, boite 246 px,
	 * image 80 px, soit 83 px de derive vers la droite.
	 */
	object-position: left center;
}

/*
 * La barre au repos ne peint rien : posee sur un hero photographique, elle
 * demande le plus souvent une encre claire, et le logo suit. C'etait donc
 * ecrit en dur ici — et c'etait un element code en dur, ce que l'engagement 1
 * interdit. Deux sites montes l'ont paye le meme jour, le client voyant du
 * blanc la ou il avait fourni du marine et de l'or.
 *
 * Le gabarit publie --ivy-logo-tint depuis l'option logo_tint. Le REPLI est
 * `none` depuis le 23 aout : sans reglage, le logo garde ses couleurs. Il
 * valait `brightness( 0 ) invert( 1 )` avant, ce qui blanchissait un logo
 * couleur sans que rien ne le demande.
 *
 * L'exemplaire colle, lui, conserve ses couleurs : la barre y peint son fond,
 * la question ne se pose pas.
 */
.ivy-navbar--pilule .ivy-navbar__logo--rest {
	filter: var( --ivy-logo-tint, none );
}

.ivy-navbar--pilule .ivy-navbar__logo--stuck {
	filter: none;
}

/*
 * :has() plutot qu'une classe posee en PHP : le gabarit ne doit pas avoir a
 * annoncer au CSS ce que le CSS peut voir lui-meme. Sans second exemplaire,
 * le premier reste visible dans les deux etats — c'est le repli, et il est
 * gratuit.
 */
.ivy-navbar--pilule .ivy-navbar__logo--stuck {
	display: none;
}

.ivy-navbar--pilule.ivy-stuck .ivy-navbar__logo:has( .ivy-navbar__logo--stuck ) .ivy-navbar__logo--rest {
	display: none;
}

.ivy-navbar--pilule.ivy-stuck .ivy-navbar__logo--stuck {
	display: block;
}

/* --- Menu --------------------------------------------------------------- */

.ivy-navbar--pilule .ivy-navbar__menu {
	/* `auto` centre le menu TANT QU'AUCUNE PART N'EST RÉGLÉE. Dès que les
	   trois parts sont posées, il ne reste plus d'espace libre à distribuer
	   et ce sont elles qui gouvernent. */
	margin-inline: auto;
	min-inline-size: 0;
}

/* ENFANT DIRECT : la liste de PREMIER NIVEAU, pas celle du sous-menu.
   Le pourquoi est dans PASSATION.md §3, piege du selecteur descendant. */
.ivy-navbar--pilule .ivy-navbar__menu > ul {
	display: flex;
	align-items: center;
	gap: clamp( 12px, 2vw, 32px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-navbar--pilule .ivy-navbar__menu li {
	position: relative;
}

/*
 * Les deux bouts sont resolus ICI, sur le lien, et non hisses sur la racine :
 * c'est le seul endroit ou --ivy-menu-color, ecrite par le controle sur le
 * selecteur de la famille, est visible. Meme regime que voile.
 */
.ivy-navbar--pilule .ivy-navbar__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --ivy-menu-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	text-decoration: none;
	transition: color var( --ivy-pill-duree ) var( --ivy-pill-ease );
}

/* La page courante reste identifiable au repos comme en barre collee, sans
   faire porter toute l'information par l'inversion de couleur. */
.ivy-navbar--pilule .ivy-navbar__menu a[aria-current="page"],
.ivy-navbar--pilule .ivy-navbar__menu .current-menu-ancestor > .ivy-navbar__submenu-wrap > a {
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-thickness: max( 2px, 0.1em );
	text-underline-offset: 0.28em;
}

.ivy-navbar--pilule.ivy-stuck .ivy-navbar__menu a {
	color: var( --ivy-menu-color-stuck, var( --ivy-ink, rgb( 17 17 17 ) ) );
}

/*
 * Le chevron suit la bascule mais pas le controle de couleur du menu : ce
 * controle ecrit sur le LIEN, et le chevron en est un frere, pas un
 * descendant. Lui donner sa propre entree dans "selectors" demanderait une
 * liste separee par des virgules, que le contrat interdit. Limite assumee,
 * la meme que chez voile.
 */
.ivy-navbar--pilule .ivy-navbar__submenu-toggle {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	/* `font` ne porte ni la casse ni l'interlettrage, et l'UA pose
	   `text-transform: none` sur les boutons : sans ces deux lignes, un
	   menu regle en capitales laisse le sous-menu en minuscules. */
	text-transform: inherit;
	letter-spacing: inherit;
	/* La meme variable que les liens : le bouton de sous-menu appartient a la
	   partie « Menu », il ne peut pas porter une couleur a lui. */
	color: var( --ivy-menu-color, var( --ivy-pill-ink ) );
	text-decoration: none;
	transition: color var( --ivy-pill-duree ) var( --ivy-pill-ease );
}

.ivy-navbar--pilule .ivy-navbar__submenu-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Le chevron : une forme, pas une image — rien a charger, et il tourne. */
.ivy-navbar--pilule .ivy-navbar__submenu-toggle::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform calc( 200ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-navbar--pilule .ivy-open > .ivy-navbar__submenu-toggle::after,
.ivy-navbar--pilule .ivy-navbar__submenu-wrap.ivy-open .ivy-navbar__submenu-toggle::after {
	transform: rotate( -135deg ) translate( -3px, -3px );
}

/* --- Sous-menu ---------------------------------------------------------- */

/*
 * La regle de panneau est cadree sur le SOUS-MENU, jamais sur
 * [data-ivy-disclose-panel] en general : le tiroir est un panneau lui aussi,
 * et une regle large l'aurait masque au-dessus de 991 px, ou il doit etre
 * transparent a la mise en page. voile s'en sort par une contre-regle en
 * min-width ; ici, viser juste evite d'avoir a se rattraper.
 */
.ivy-navbar--pilule .ivy-navbar__submenu-wrap > [data-ivy-disclose-panel] {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	padding-top: 8px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY( -12px ) scale( 0.96 );
	transform-origin: top center;
	transition:
		opacity calc( 180ms * var( --ivy-motion, 1 ) ) ease,
		transform calc( 180ms * var( --ivy-motion, 1 ) ) cubic-bezier( 0.2, 0.9, 0.3, 1 ),
		visibility 0s linear calc( 180ms * var( --ivy-motion, 1 ) );
}

.ivy-navbar--pilule .ivy-open > [data-ivy-disclose-panel] {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

.ivy-navbar--pilule .ivy-navbar__submenu {
	display: grid;
	gap: 2px;
	min-width: 12rem;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var( --ivy-surface, rgb( 255 255 255 ) );
	border-radius: 12px;
	box-shadow: 0 12px 32px rgb( 0 0 0 / 0.12 );
}

/*
 * --ivy-submenu-color AVANT l'encre : c'est la propriete que la famille
 * « color » pose sur CE lien, qui est le selecteur de la partie `submenu`.
 * Sans elle, le reglage de couleur du sous-menu etait muet. Le repli rend
 * l'encre exactement comme avant.
 */
.ivy-navbar--pilule .ivy-navbar__submenu a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: var( --ivy-submenu-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	text-decoration: none;
	transition: background-color calc( 140ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-navbar--pilule .ivy-navbar__submenu a:hover {
	background: color-mix( in srgb, var( --ivy-ink, rgb( 17 17 17 ) ) 8%, transparent );
}

/* --- Appel a l'action --------------------------------------------------- */

.ivy-navbar--pilule .ivy-navbar__cta {
	flex: 0 1 auto;
	min-inline-size: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7em 1.4em;
	border-radius: var( --ivy-radius-action, 999px );
	white-space: nowrap;
	text-decoration: none;
	background: var( --ivy-pill-cta-bg );
	color: var( --ivy-cta-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	transition:
		background-color var( --ivy-pill-duree ) var( --ivy-pill-ease ),
		color var( --ivy-pill-duree ) var( --ivy-pill-ease ),
		transform calc( 180ms * var( --ivy-motion, 1 ) ) ease;
}

.ivy-navbar--pilule .ivy-navbar__cta:hover {
	transform: translateY( -1px );
}

.ivy-navbar--pilule.ivy-stuck .ivy-navbar__cta {
	color: var( --ivy-cta-color-stuck, var( --ivy-surface, rgb( 255 255 255 ) ) );
}

/* --- Burger ------------------------------------------------------------- */




/* --- Accessibilite ------------------------------------------------------ */

/*
 * Defini ici plutot que suppose du theme : le nom accessible du burger en
 * depend, et une composition ne doit pas dependre d'une classe qu'un theme
 * parent pourrait ne pas fournir.
 */
.ivy-navbar--pilule .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.ivy-navbar--pilule a:focus-visible,
.ivy-navbar--pilule button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


/* --- Le contrat du fragment mobile_panel --------------------------------- */

/*
 * La SEULE chose que le fragment demande a son hote : que la barre laisse le
 * collapse se placer en fin de ligne sous le point de rupture. Le panneau,
 * lui, est fixe — il ne depend plus de la mise en page de la barre, ce qui
 * est tout l'interet de l'avoir mis en commun.
 */
@media ( max-width: 991px ) {
	.ivy-navbar--pilule .ivy-navbar__inner {
		flex-wrap: nowrap;
	}
}