/**
 * En-tête flottant.
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px) :
 *   pilule   x 386 → 1534, y 35, hauteur 100, coins 100, fond rgba(246,240,230,0.9)
 *   logo     monogramme 71, wordmark 24px sur 2 lignes
 *   menu     16px Jost
 *   bouton   « Contacter le cabinet » doré, 226 × 42
 */

/* Sélecteur à deux classes : bat le .site-header:not(.dynamic-header) du parent
   (max-width:1140px + padding-inline:10px) qu'un sélecteur à une classe ne
   pourrait pas emporter. */
.site-header.header-full-width {
	/* Fixé plutôt que sticky : la pilule flotte au-dessus du décor du hero, qui
	   démarre à y=0 derrière elle — comme dans la maquette. Les héros ont un
	   padding haut suffisant pour ne pas passer sous la pilule. */
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	max-width: 100%;
	margin: 0;
	/* Petites gouttières : c'est le max-width de la pilule (voir .site-header__bar)
	   qui borne sa longueur et la centre. On gagne ainsi une pilule nettement plus
	   longue, avec de la place pour le bouton et les boutons ronds à venir. */
	padding: 35px var(--anidjar-gouttiere) 0;
	pointer-events: none; /* la pilule reste cliquable, pas la gouttière autour */
}

.site-header.is-scrolled.header-full-width {
	padding-top: 12px;
}

.site-header__bar {
	/* Grille 1fr auto 1fr : logo à gauche, menu centré dans la page, actions à
	   droite. Les colonnes latérales égales garantissent un menu réellement
	   centré, quelle que soit la largeur du logo ou des actions. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--anidjar-espace-lg);
	box-sizing: border-box;

	/* Longueur de la pilule : bornée et centrée. Assez large pour loger, colonnes
	   latérales égales obligent (menu vraiment centré), le logo, le menu, le bouton
	   et deux boutons ronds supplémentaires sans débordement. */
	max-width: 1500px;
	margin-inline: auto;

	/* hello-elementor met .site-header en flex : sans width:100% la pilule, en
	   flex-item, se réduirait à son contenu au lieu de remplir la gouttière. */
	width: 100%;
	min-height: 100px;
	padding: 14px 14px 14px 37px;
	border-radius: var(--anidjar-rayon-pilule);
	background-color: var(--anidjar-surface-nav);
	pointer-events: auto;
	transition: min-height var(--anidjar-transition), padding var(--anidjar-transition),
		box-shadow var(--anidjar-transition), background-color var(--anidjar-transition);

	/* Fond flouté : on augmente le flou une fois défilé. */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* ---------------------------------------------------------------------------
 * État réduit (ajouté en JS au défilement)
 * ------------------------------------------------------------------------ */

.site-header.is-scrolled {
	padding-top: 12px;
}

.site-header.is-scrolled .site-header__bar {
	min-height: 72px;
	padding-block: 8px;
	background-color: var(--anidjar-surface-carte);
	box-shadow: var(--anidjar-ombre-carte);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.site-header.is-scrolled .site-header__mark {
	width: 48px;
}

.site-header.is-scrolled .site-header__wordmark {
	font-size: 1.25rem;
}

/* ---------------------------------------------------------------------------
 * Logo
 * ------------------------------------------------------------------------ */

.site-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--anidjar-espace-xs);
	justify-self: start; /* colonne de gauche */
	color: var(--anidjar-texte);
	text-decoration: none;
}

.site-header__mark {
	display: block;
	width: 71px;
	color: var(--anidjar-or);
	transition: width var(--anidjar-transition);
}

.site-header__mark svg {
	display: block;
	width: 100%;
	height: auto;
}

.site-header__wordmark {
	font-family: var(--anidjar-police-titre);
	font-size: 1.5rem;
	font-weight: var(--anidjar-graisse-titre);
	line-height: 1.05;
	white-space: pre-line;
	transition: font-size var(--anidjar-transition);
}

/* ---------------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------------ */

/* display: contents : le <nav> ne forme pas de boîte, ses enfants (menu et
   actions) deviennent des cellules de la grille de la barre. Le menu tombe donc
   dans la colonne centrale, les actions dans celle de droite. */
.site-header__nav {
	display: contents;
}

.site-header__nav > .site-nav {
	justify-self: center; /* colonne centrale */
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.5vw, 29px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__item {
	position: relative;
	margin: 0;
}

.site-nav__item--parent {
	display: flex;
	align-items: center;
	gap: 6px;
}

.site-nav__link {
	color: var(--anidjar-texte);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--anidjar-transition);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	color: var(--anidjar-texte-accent);
}

/* Chevron décoratif (pas un bouton) : accolé au texte, il pivote quand le
   sous-menu s'ouvre. */
.site-nav__chevron {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	color: var(--anidjar-texte);
}

.site-nav__chevron svg {
	width: 11px;
	height: auto;
	transition: transform var(--anidjar-transition), color var(--anidjar-transition);
}

/* Écran fin : le survol du texte ouvre le sous-menu et retourne le chevron. */
@media (hover: hover) and (pointer: fine) {
	.site-nav__item--parent:hover .site-nav__chevron svg,
	.site-nav__item--parent:focus-within .site-nav__chevron svg {
		transform: rotate(180deg);
		color: var(--anidjar-texte-accent);
	}
}

.site-nav__item--parent[data-open="true"] .site-nav__chevron svg {
	transform: rotate(180deg);
}

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

.site-nav__submenu {
	position: absolute;
	top: calc(100% + 18px);
	left: -20px;
	z-index: 10;
	min-width: 220px;
	margin: 0;
	padding: 12px;
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte);
	box-shadow: var(--anidjar-ombre-carte);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	list-style: none;

	/* fermé par défaut ; ouvert au survol (desktop) ou au clic (JS) */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--anidjar-transition), transform var(--anidjar-transition), visibility var(--anidjar-transition);
}

.site-nav__submenu .site-nav__link {
	display: block;
	padding: 8px 12px;
	border-radius: 10px;
	white-space: normal;
	transition: background-color var(--anidjar-transition), color var(--anidjar-transition);
}

.site-nav__submenu .site-nav__link:hover {
	background-color: var(--anidjar-creme);
}

/* Ouverture : au survol sur écran fin (pointeur précis), au clic partout. */
@media (hover: hover) and (pointer: fine) {
	.site-nav__item--parent:hover .site-nav__submenu,
	.site-nav__item--parent:focus-within .site-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.site-nav__item--parent[data-open="true"] .site-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * Actions (bouton + réseaux)
 * ------------------------------------------------------------------------ */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--anidjar-espace-sm);
	justify-self: end; /* colonne de droite */
}

.site-header__socials {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__social {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--anidjar-ivoire);
	color: var(--anidjar-brun);
}

.site-header__social svg {
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------------------------
 * Boutons ronds de contact (téléphone / WhatsApp)
 *
 * Deux instances dans le DOM : « --inline » dans les actions (visible desktop),
 * « --bar » directement dans la barre (visible mobile, à côté du burger). Chaque
 * instance masquée à l'autre point de rupture — le rendu est donc unique à l'œil.
 * ------------------------------------------------------------------------ */

.site-header__contact .contact-pill__icon {
	width: 40px;
	height: 40px;
}

.site-header__contact .contact-pill__icon svg {
	width: 18px;
	height: 18px;
}

/* Desktop : la version « barre » est masquée (les pastilles sont dans les actions). */
.site-header__contact--bar {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Burger (mobile)
 * ------------------------------------------------------------------------ */

/* Verrou de défilement posé par le JS quand le menu mobile est ouvert. */
.menu-scroll-lock {
	overflow: hidden;
}

.site-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	/* flex: 0 0 44px — sans cela, le bouton est un flex-item compressible dans la
	   barre mobile : son contenu (trois <span> vides) a une taille minimale nulle,
	   il se réduit donc à ses 20px de padding et les barres disparaissent. */
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 10px;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	/* Safari iOS applique l'apparence native « push-button » aux <button>, ce qui
	   perturbe la mise en page interne (contenu enveloppé dans une boîte anonyme
	   centrée) : les barres se retrouvent sans largeur. */
	-webkit-appearance: none;
	appearance: none;
}

/* Sans cela, hello-elementor/Elementor peint le fond en framboise au survol,
   au focus et au clic (button:hover/:active { background:#c36 }). */
.site-header__burger:hover,
.site-header__burger:focus,
.site-header__burger:active {
	background: none;
}

/* Dimensions explicites : les barres ne dépendent plus de l'étirement implicite
   du flex (align-items: stretch), que WebKit n'applique pas de façon fiable dans
   un <button>. 24px = 44px de bouton moins 2 × 10px de padding. */
.site-header__burger span {
	display: block;
	flex: 0 0 2px;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--anidjar-brun);
	transform-origin: center;
	transition: transform var(--anidjar-transition), opacity var(--anidjar-transition);
}

/* Menu ouvert : les trois barres se croisent en X (la barre centrale disparaît).
   Décalage de 7px = distance d'une barre au centre (boîte de 24px, barres de 2px,
   écart de 5px). */
.site-header[data-open="true"] .site-header__burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header[data-open="true"] .site-header__burger span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.site-header[data-open="true"] .site-header__burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------ */

@media (max-width: 1200px) {
	/* Pilule resserrée : elle flotte plus haut et plus étroite en marge, pour
	   dégager le haut du hero (le décor continue de passer derrière). */
	.site-header.header-full-width,
	.site-header.is-scrolled.header-full-width {
		padding: 12px var(--anidjar-gouttiere) 0;
	}

	/* On repasse en flex : logo | pastilles | burger. Pas d'écart automatique
	   entre les items (gap 0) : on gère l'espace au cas par cas ci-dessous, pour
	   coller les pastilles au burger. */
	.site-header__bar {
		display: flex;
		gap: 0;
		min-height: 64px;
		padding: 8px 8px 8px 20px;
	}

	/* Sur écran étroit, c'est le logo qui cède la place (le libellé revient à la
	   ligne), jamais les pastilles ni le burger. */
	.site-header__brand {
		min-width: 0;
		flex: 0 1 auto;
	}

	.site-header__contact--bar {
		flex: 0 0 auto;
	}

	/* Logo plus compact sur mobile (comme l'état réduit). */
	.site-header__mark {
		width: 48px;
		flex: 0 0 auto;
	}

	.site-header__wordmark {
		font-size: 1.25rem;
	}

	.site-header__burger {
		display: flex;
		margin-left: var(--anidjar-espace-2xs); /* collé aux pastilles */
	}

	/* Boutons ronds poussés tout à droite (margin-left auto), collés au burger.
	   La version « en ligne » (dans les actions du panneau) est masquée. */
	.site-header__contact--bar {
		display: flex;
		gap: var(--anidjar-espace-2xs);
		margin-left: auto;
	}

	.site-header__contact--inline {
		display: none;
	}

	.site-header__nav {
		display: flex;
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--anidjar-espace-md);
		max-height: 0;
		overflow: hidden;
		padding: 0 var(--anidjar-espace-md);
		border-radius: var(--anidjar-rayon-carte);
		/* Panneau franchement opaque : le contenu du hero ne doit pas transparaître
		   derrière les liens. */
		background-color: var(--anidjar-creme);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		opacity: 0;
		visibility: hidden;
		transition: max-height var(--anidjar-transition), opacity var(--anidjar-transition),
			visibility var(--anidjar-transition), padding var(--anidjar-transition);
	}

	.site-header[data-open="true"] .site-header__nav {
		max-height: 80vh;
		overflow-y: auto;
		padding: var(--anidjar-espace-md);
		opacity: 1;
		visibility: visible;
		box-shadow: var(--anidjar-ombre-carte);
	}

	.site-nav {
		flex-direction: column;
		align-items: stretch;
		gap: var(--anidjar-espace-xs);
		width: 100%;
	}

	.site-nav__item--parent {
		flex-wrap: wrap;
		justify-content: space-between;
		/* Le libellé + chevron sur une ligne, le sous-menu dessous : aucun écart
		   vertical entre les deux quand le sous-menu est replié (row-gap 0). */
		row-gap: 0;
	}

	/* Un libellé long doit revenir à la ligne plutôt que déborder du panneau. */
	.site-nav__link {
		white-space: normal;
		overflow-wrap: break-word;
	}

	/* Sur mobile, le chevron sert d'interrupteur : zone de tap élargie, sans
	   décaler la mise en page (marge négative compensée). */
	.site-nav__chevron {
		width: auto;
		height: auto;
		padding: 10px;
		margin: -10px;
		cursor: pointer;
	}

	.site-nav__submenu {
		position: static;
		width: 100%;
		min-width: 0;
		margin-top: 0; /* aucun espace quand replié ; l'écart arrive à l'ouverture */
		box-shadow: none;
		background-color: var(--anidjar-creme);

		/* sur mobile, tout passe par le clic (data-open) */
		max-height: 0;
		padding-block: 0;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: max-height var(--anidjar-transition), padding var(--anidjar-transition),
			margin-top var(--anidjar-transition);
	}

	.site-nav__item--parent[data-open="true"] .site-nav__submenu {
		max-height: 400px;
		margin-top: var(--anidjar-espace-2xs);
		padding-block: 12px;
	}

	.site-header__actions {
		flex-wrap: wrap;
	}

	.site-header.is-scrolled .site-header__bar {
		min-height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__bar,
	.site-nav__submenu,
	.site-header__nav,
	.site-nav__chevron svg,
	.site-header__mark,
	.site-header__wordmark {
		transition: none;
	}
}