/*
 * AXEK Elements – Header (barre de nav) — par 6LEX (https://6lex.co)
 * Pilule flottante fixe. Menu mobile : tiroir OU plein écran.
 * Disparaît en descendant / réapparaît en remontant (classe .is-hidden = JS).
 * Menu ouvert (mobile) = classe .is-open (pilotée par le JS).
 */
.axek-hd{
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	padding: 14px 0;
	transition: transform var(--axk-dur-slow) var(--axk-ease);
}
.axek-hd, .axek-hd * { box-sizing: border-box; }
.axek-hd--hide.is-hidden{ transform: translateY(-135%); }

.axek-hd-in{
	position: relative; z-index: 2;
	width: min(1220px, calc(100% - 28px)); margin: 0 auto;
	height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 0 12px 0 26px;
	background: #fff; border: 1px solid var(--ax-filet); border-radius: 100px;
	box-shadow: 0 12px 34px rgba(16,16,25,.08);
	transition: background var(--axk-dur-mid) var(--axk-ease), box-shadow var(--axk-dur-mid) var(--axk-ease), border-color var(--axk-dur-mid) var(--axk-ease), height var(--axk-dur-mid) var(--axk-ease);
}
.axek-hd.is-scrolled .axek-hd-in{ height: 58px; }

.axek-hd-logo{ display: inline-flex; align-items: center; text-decoration: none; color: var(--ax-encre); font-weight: 700; font-size: var(--ax-carte); letter-spacing: -.015em; transition: color var(--axk-dur-mid) var(--axk-ease); line-height: 1.25;}
.axek-hd-logo img{ height: 34px; width: auto; display: block; }

/* menu desktop : centré pile dans la barre (absolu), indépendant des largeurs logo/CTA */
.axek-hd-menu{ display: flex; gap: 26px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.axek-hd-menu a{ font-size: var(--ax-second); color: var(--ax-encre); text-decoration: none; transition: color var(--axk-dur) var(--axk-ease); line-height: 1.55; font-weight: 500;}
.axek-hd-menu a:hover{ color: var(--ax-terra); }

.axek-hd-actions{ display: flex; align-items: center; transition: opacity var(--axk-dur) var(--axk-ease); }
.axek-hd-cta{ display: inline-flex; align-items: center; background: var(--ax-terra); color: #fff; font-weight: 600; font-size: var(--axk-btn-sm-fs); padding: var(--axk-btn-sm-pad); border-radius: var(--axk-btn-radius); text-decoration: none; white-space: nowrap; transition: filter var(--axk-dur) var(--axk-ease), transform var(--axk-dur) var(--axk-ease); }
.axek-hd-cta:hover{ background: var(--axk-btn-terra-h); transform: translateY(var(--axk-btn-lift)); }
.axek-hd-cta-short{ display: none; }

/* --- burger (3 traits → X) --- */
.axek-hd-burger.axek-hd-burger{ display: none; position: relative; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--ax-filet); border-radius: 50%; background: #fff; cursor: pointer; color: var(--ax-encre); padding: 0; transition: color var(--axk-dur-mid) var(--axk-ease), border-color var(--axk-dur-mid) var(--axk-ease), background var(--axk-dur-mid) var(--axk-ease); }
.axek-hd-burger span{ position: absolute; top: 50%; left: 50%; width: 19px; height: 1.7px; margin: -.85px 0 0 -9.5px; background: currentColor; border-radius: 2px; transition: transform var(--axk-dur-slow) var(--axk-ease), opacity var(--axk-dur) var(--axk-ease); }
.axek-hd-burger span:nth-child(1){ transform: translateY(-5px); }
.axek-hd-burger span:nth-child(3){ transform: translateY(5px); }
.axek-hd.is-open .axek-hd-burger span:nth-child(1){ transform: rotate(45deg); }
.axek-hd.is-open .axek-hd-burger span:nth-child(2){ opacity: 0; }
.axek-hd.is-open .axek-hd-burger span:nth-child(3){ transform: rotate(-45deg); }

/* --- transparent au sommet (overlay du héro) --- */
.axek-hd[data-transparent="yes"]:not(.is-scrolled) .axek-hd-in{ background: transparent; border-color: var(--ax-filet-sombre); box-shadow: none; }
.axek-hd[data-transparent="yes"]:not(.is-scrolled) .axek-hd-logo,
.axek-hd[data-transparent="yes"]:not(.is-scrolled) .axek-hd-menu a{ color: #fff; }
.axek-hd[data-transparent="yes"]:not(.is-scrolled) .axek-hd-burger{ background: rgba(255,255,255,.12); border-color: var(--ax-filet-sombre); color: #fff; }

/* ================= MENU PLEIN ÉCRAN ================= */
.axek-hd-fs{
	position: fixed; inset: 0; z-index: 1; color: #fff;
	background: radial-gradient(120% 130% at 50% 0%, var(--ax-terra-halo), var(--ax-terra) 45%, var(--ax-terra-fond) 100%);
	clip-path: circle(0% at calc(100% - 46px) 46px);
	/* Fermeture PLUS RAPIDE que l'ouverture : une sortie lente se lit comme un blocage. */
	transition: clip-path var(--axk-dur-slow) var(--axk-ease);
	pointer-events: none;
	display: flex; flex-direction: column;
	padding: clamp(94px,15vh,150px) clamp(22px,5vw,52px) clamp(28px,4vw,48px);
}
.axek-hd.is-open .axek-hd-fs{ clip-path: circle(150% at calc(100% - 46px) 46px); pointer-events: auto; transition: clip-path var(--axk-dur-slow) var(--axk-ease); }
.axek-hd-fs-grain{ position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.axek-hd-fs-rings{ position: absolute; right: -12vw; top: -16vh; width: 72vw; height: 72vw; pointer-events: none;
	-webkit-mask: radial-gradient(circle,#000 18%,transparent 64%); mask: radial-gradient(circle,#000 18%,transparent 64%); }
.axek-hd-fs-rings circle{ fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }

.axek-hd-fs-in{ position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.axek-hd-fsmenu{ margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; }
.axek-hd-fslink{ display: block; padding: clamp(6px,1vh,14px) 0; text-decoration: none; }
/* Les liens apparaissent TOUS ENSEMBLE (plus de cascade à six paliers) et
   d'un glissement court : 110 % de course faisait un effet de rideau, trop
   appuyé. 12px suffisent à donner le mouvement sans le rendre spectaculaire. */
.axek-hd-fsclip{ display: block; opacity: 0; transform: translateY(12px);
	font-weight: 700; font-size: var(--ax-display); letter-spacing: -.03em; line-height: 1.02; color: #fff;
	background-image: linear-gradient(#fff,#fff); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
	transition: opacity var(--axk-dur-mid) var(--axk-ease), transform var(--axk-dur-mid) var(--axk-ease), background-size var(--axk-dur-mid) var(--axk-ease); }
/* Un seul et même petit retard pour tout le monde : le temps que le panneau
   s'ouvre. Un retard uniforme n'est pas une cascade. */
.axek-hd.is-open .axek-hd-fsclip{ opacity: 1; transform: none; transition-delay: var(--axk-dur-fast); }
.axek-hd-fslink:hover .axek-hd-fsclip{ background-size: 100% 2px; }

.axek-hd-fs-foot{ display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	opacity: 0; transform: translateY(10px);
	transition: opacity var(--axk-dur-mid) var(--axk-ease), transform var(--axk-dur-mid) var(--axk-ease); }
.axek-hd.is-open .axek-hd-fs-foot{ transition-delay: var(--axk-dur); }
.axek-hd.is-open .axek-hd-fs-foot{ opacity: 1; transform: none; }
.axek-hd-fs-foot div{ display: flex; flex-direction: column; gap: 3px; }
.axek-hd-fs-foot span{ font-size: var(--ax-meta); letter-spacing: 0; color: rgba(255,246,240,.66); line-height: 1.45;}
/* Les navigateurs mobiles transforment tout seuls les numéros en liens d'appel
   (soulignés, en couleur système). On neutralise ce style sans perdre le lien. */
.axek-hd-fs-foot a,
.axek-hd-fs-foot a:hover,
.axek-hd-fs-foot a:focus{
	color: inherit;
	text-decoration: none;
	-webkit-text-decoration: none;
}
.axek-hd-fs-foot .axek-hd-fs-lead{ color: #fff; font-weight: 600; }

/* menu plein écran ouvert : la barre reste telle quelle (blanche), le X garde
   son contour et reste noir → bien visible ; on masque juste le bouton CTA.
   (Le burger n'est pas surchargé : sur un héro transparent il reste blanc.) */
.axek-hd--fs.is-open .axek-hd-actions{ opacity: 0; pointer-events: none; }

/* --- responsive --- */
@media (max-width: 940px){
	.axek-hd-in{ gap: 12px; padding: 0 10px 0 22px; }
	.axek-hd-logo{ margin-right: auto; }
	.axek-hd-burger.axek-hd-burger{ display: inline-flex; }
	.axek-hd-cta-long{ display: none; } .axek-hd-cta-short{ display: inline; }

	/* tiroir déroulant (mode « drawer ») */
	.axek-hd:not(.axek-hd--fs) .axek-hd-menu{
		position: absolute; left: 0; right: 0; top: calc(100% + 12px); margin: 0;
		flex-direction: column; gap: 0;
		background: #fff; border: 1px solid var(--ax-filet); border-radius: 22px; padding: 8px 22px 16px;
		box-shadow: 0 20px 44px rgba(16,16,25,.12);
		transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform var(--axk-dur) var(--axk-ease), opacity var(--axk-dur) var(--axk-ease);
	}
	.axek-hd:not(.axek-hd--fs) .axek-hd-menu a{ padding: 13px 2px; border-bottom: 1px solid var(--ax-filet); color: var(--ax-encre); }
	.axek-hd:not(.axek-hd--fs) .axek-hd-menu a:last-child{ border-bottom: none; }
	.axek-hd:not(.axek-hd--fs).is-open .axek-hd-menu{ transform: none; opacity: 1; pointer-events: auto; }

	/* en mode plein écran, le menu inline est remplacé par l'overlay */
	.axek-hd--fs .axek-hd-menu{ display: none; }
}

/* verrou de défilement quand le plein écran est ouvert */
html.axek-hd-lock, html.axek-hd-lock body{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
	.axek-hd{ transition: none; }
	.axek-hd-fs{ transition: opacity var(--axk-dur-mid) var(--axk-ease); clip-path: none; opacity: 0; }
	.axek-hd.is-open .axek-hd-fs{ opacity: 1; }
	.axek-hd-fsclip{ transform: none !important; transition: background-size var(--axk-dur-mid) var(--axk-ease) !important; }
	.axek-hd-fs-foot{ transition: opacity var(--axk-dur-mid) var(--axk-ease); transform: none; }
}

/* ---------- ZONES DE TOUCHE ----------
   Au doigt, ce qui se touche doit faire au moins 40 px. Téléphone ET tablette :
   le pointeur grossier ("pointer: coarse") attrape aussi les hybrides tactiles,
   la largeur attrape les tablettes que le navigateur déclare fines. On agrandit la
   ZONE, jamais le dessin : marge intérieure verticale sur les liens en ligne,
   carré plein sur les icônes. Pas de pseudo-élément qui déborderait sur le
   voisin : deux zones de touche ne doivent jamais se chevaucher. */
@media (max-width: 1024px), (pointer: coarse){
	/* Le menu horizontal existe encore entre 940 et 1024 px : sur iPad paysage,
	   ses liens ne faisaient que 23 px. Le menu est positionné en absolu et
	   centré, l'agrandir ne pousse donc rien autour de lui. */
	.axek-hd-menu a{ padding-block: 9px; }
	.axek-hd-fs-social a{ min-width: 44px; min-height: 44px; display: inline-flex;
		align-items: center; justify-content: center; }
	.axek-hd-logo{ min-height: 44px; display: inline-flex; align-items: center; }
}