/* ══════════════════════════════════════════════════════════════════════════
   Header public « Altitude Révision » — habillage du template Elementor 1284
   ──────────────────────────────────────────────────────────────────────────
   Le MARKUP est 100 % Elementor natif (conteneurs + widgets logo, nav-menu,
   icon-list, icon, button). Cette feuille ne porte que ce qu'Elementor ne sait
   pas exprimer en réglages : la double barre, la bascule en grille 3 colonnes,
   la pilule givrée, les panneaux flottants et les paliers 1366/1200 px.

   Source : « Homepage Redesign v2.html » (projet Claude Design), blocs
   HEADER 1 / HEADER 2 / panneaux mobile. Les valeurs sont reprises telles
   quelles ; seuls les sélecteurs sont adaptés au DOM d'Elementor.

   ⚠ Boutons et icônes : RIEN ici ne restyle les boutons `ar-btn-*` ni les
   icônes SVG. Leurs couleurs, bordures, rayons, paddings, typo et animations
   de survol restent portés par les réglages des widgets et par le CSS du kit.
   Les seules règles qui les touchent sont géométriques (gabarit 50 px des
   pilules du tiroir) ou correctives (garde `fill:none` des SVG en trait).

   ⚠ Spécificité : les feuilles d'Elementor sont chargées APRÈS celle-ci, donc
   à spécificité égale elles gagnent. Les règles qui affrontent une base
   Elementor (`.e-con{display:var(--display)}`, `{width:var(--width)}`,
   `{gap:var(--gap)}`, toutes à (0,1,0)) sont écrites à (0,2,0) au minimum.

   Paliers : 1366 et 1200 px viennent de la maquette (dégradation de la nav
   avant le mobile), 1024 et 767 sont les breakpoints du kit Elementor
   (viewport_lg=1025, viewport_md=768).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HEADER 1 : barre simple, non fixe ─────────────────────────────────── */

/* `.e-con` (0,1,0) pose position:relative et est chargé APRÈS cette feuille :
   toute règle de positionnement doit donc viser (0,2,0). D'où le `.e-con`
   accolé ici et sur .ar-fp-wrap / .ar-hdr en mobile. */
.ar-hdr.e-con {
	position: relative;
	z-index: 300;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* (0,2,0) : bat .e-con{width:var(--width)} et .e-con-full{padding:…}

   Barre pleine largeur : la maquette plafonnait à 1280 px centrés, ce qui
   laissait de grandes marges vides sur un écran large (mesuré : 320 px de
   chaque côté en 1920) et décollait le logo du bord. Plafond retiré le
   03/08/2026 à la demande de l'utilisateur — logo à gauche de la fenêtre,
   groupe téléphone / compte / CTA à droite. On garde la gouttière de 20 px du
   site (le `calc(100% - 40px)` de la maquette), seule la limite disparaît. */
.ar-hdr .ar-hdr-in {
	width: calc(100% - 40px);
	margin: 0 auto;
}

/* Le logo est un widget « Logo du site » : l'<img> doit garder son ratio.
   Trois propriétés obligatoires dans un parent flex (sinon Elementor écrase
   l'image sur la hauteur fixée via son max-width:100%). */
.ar-hdr .ar-brand,
.ar-fp-wrap .ar-brand {
	flex-shrink: 0;
	line-height: 0;
}
.ar-hdr .ar-brand img,
.ar-fp-wrap .ar-brand img {
	width: auto;
	max-width: none;
	height: 42px;
	display: block;
}

/* Nav à points : la nav absorbe l'espace libre de part et d'autre, comme le
   `margin: 0 auto` de la maquette. */
.ar-hdr-in > .ar-mnav,
.ar-fp > .ar-mnav {
	margin-inline: auto;
}
/* Le widget nav-menu rend DEUX <ul> : le menu principal et le menu déroulant
   (même sans burger). Tout est donc porté par `--main`, ce qui a l'avantage de
   monter la spécificité au-dessus des règles d'Elementor.
   Adversaire ici : `.elementor-nav-menu--layout-horizontal .elementor-nav-menu`
   (0,2,0, widget-nav-menu.min.css) qui impose flex-wrap:wrap. */
.ar-mnav .elementor-nav-menu--main .elementor-nav-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
}
.ar-mnav .elementor-nav-menu--main .elementor-nav-menu > li {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.ar-mnav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
	white-space: nowrap;
	transition: color 160ms;
}
/* Le point turquoise de séparation. Posé en ::after sur le <li> plutôt que via
   le séparateur natif d'Elementor, qui est un border-left : une bordure ne peut
   pas devenir un rond.
   Adversaire : `.elementor-nav-menu--main .elementor-nav-menu>li:not(:last-child):after`
   (0,3,0) qui pose `content: var(--e-nav-menu-divider-content, none)` et
   `height: 35%`. Séparateur natif désactivé = variable à `none` = aucun point
   rendu, et une hauteur en % qui étirerait le rond en barre. D'où (0,4,0). */
.ar-mnav .elementor-nav-menu--main .elementor-nav-menu > li:not(:last-child)::after {
	content: '';
	width: 5px;
	height: 5px;
	border: 0;
	border-radius: 50%;
	background: #20c4c3;
	flex-shrink: 0;
	position: static;
}

/* Un conteneur enfant Elementor reçoit `--width: 100%` : sans ça le groupe de
   droite occupe toute la largeur restante (mesuré : 779 px au lieu de 520),
   écrase la nav et fait chevaucher les libellés. `width:fit-content` +
   `flex-shrink:0` le ramènent à son contenu. Adversaire : `.e-con` (0,1,0)
   qui consomme les variables → (0,2,0) suffit, sans !important. */
.ar-hdr .ar-hdr-right,
.ar-fp-wrap .ar-hdr-right {
	width: fit-content;
	flex-shrink: 0;
}

/* ── HEADER 2 : barre fixe qui descend au scroll ───────────────────────── */

.ar-fp-wrap.e-con {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 400;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border-bottom: 1px solid rgba(16, 24, 32, 0.08);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
	transform: translateY(-100%);
	transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ar-fp-wrap.ar-on {
	transform: translateY(0);
	pointer-events: auto;
}
/* Même pleine largeur que la barre 1, pour que le logo et le groupe de droite
   ne se déplacent pas quand la barre fixe prend le relais au scroll. */
.ar-fp-wrap .ar-fp {
	width: calc(100% - 40px);
	margin: 0 auto;
}
.ar-fp-wrap .ar-brand img {
	height: 34px;
}
/* Seule différence de gabarit entre les deux barres : le padding des boutons,
   très légèrement réduit. Ce ne sont PAS des variantes de boutons.
   Adversaire : la règle générée par widget
   `.elementor-1284 .elementor-element.elementor-element-<id> .elementor-button`,
   soit QUATRE classes (0,4,0), chargée après cette feuille. Il faut donc
   (0,5,0) : d'où `.elementor-widget.elementor-widget-button` accolés. */
.ar-fp .ar-hdr-cta.elementor-widget.elementor-widget-button .elementor-button {
	padding: 10px 16px;
}
.ar-fp .ar-hdr-account.elementor-widget.elementor-widget-button .elementor-button {
	padding: 8px 14px;
}

/* ── Icônes mobiles : aucun fond, aucune bordure, aucun carré ──────────── */

.ar-mob-ic .elementor-icon-wrapper,
.ar-mob-ic .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
}
.ar-mob-ic .elementor-icon {
	cursor: pointer;
}
.ar-mob-ic svg {
	display: block;
	width: 1em;
	height: 1em;
}
/* Garde générale : un SVG en trait ne doit jamais devenir un aplat quand
   Elementor pose un `fill` sur le <svg> (au repos comme au survol). */
.ar-hdr svg[fill="none"],
.ar-fp-wrap svg[fill="none"] {
	fill: none !important;
}

/* ── Panneaux flottants (contact et tiroir), alignés sur la pilule ─────── */

.ar-hdr .ar-panel {
	display: none;
	width: calc(100% - 40px);
	margin: 8px auto 0;
	background: #fff;
	border: 1px solid rgba(16, 24, 32, 0.08);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
	overflow: hidden;
}
.ar-hdr .ar-panel.ar-open {
	display: block;
}

/* Les deux boutons d'une rangée se partagent la largeur à parts égales.
   min-width:0 empêche un libellé long d'imposer sa largeur. */
.ar-hdr .ar-tel-row > .elementor-widget,
.ar-hdr .ar-pill-row > .elementor-widget {
	flex: 1 1 0;
	min-width: 0;
}
/* Gabarit commun des pilules du tiroir (maquette : 50 px). Géométrie
   uniquement : ni couleur, ni bordure, ni rayon, ni typo ne sont touchés. */
.ar-big-btn .elementor-button,
.ar-drawer-btn .elementor-button {
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Les widgets d'une rangée sont étirés à la même hauteur par le conteneur ;
   le <a> doit suivre, sinon un libellé qui passe sur deux lignes (« Demande
   d'intervention » à 375 px) laisse son voisin plus court. */
.ar-hdr .ar-tel-row > .elementor-widget .elementor-button,
.ar-hdr .ar-pill-row > .elementor-widget .elementor-button {
	height: 100%;
}
.ar-hdr .ar-tel-row > .elementor-widget > .elementor-widget-container,
.ar-hdr .ar-pill-row > .elementor-widget > .elementor-widget-container {
	height: 100%;
}
.ar-big-btn .elementor-button-icon svg {
	width: 20px;
	height: 20px;
}
/* Le glyphe WhatsApp est un aplat, pas un tracé : il ne prend pas de stroke. */
.ar-wa .elementor-button-icon svg {
	stroke: none;
}

/* Liste du tiroir : un filet sous chaque entrée. Scopé à `--main` comme la nav
   desktop, pour ne pas toucher le <ul> déroulant que le widget rend aussi. */
.ar-acc .elementor-nav-menu--main .elementor-nav-menu > li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.ar-acc .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
	justify-content: flex-start;
}

/* ── Header de l'espace client (template 30) ───────────────────────────────
   Il porte les mêmes classes que le header public et hérite donc de tout ce
   qui précède, pleine largeur comprise (le plafond de 1280 px a d'abord été
   retiré ici le 03/08/2026, puis pour les deux headers le même jour — les
   classes `ar-hdr-client` / `ar-fp-client` restent en place sur le template
   30, elles n'ont simplement plus de surcharge de gabarit à porter).
   ────────────────────────────────────────────────────────────────────────── */

/* Bas du tiroir mobile client (« Mon profil » / « Se déconnecter », rendus par
   le template posé sur `item_after_template` du widget JetMenu). Le widget est
   la copie exacte de celui de la barre latérale ; il ne reste qu'à caler son
   écart icône/libellé sur celui des entrées JetMenu du dessus — mesuré : icône
   à 32 px et libellé à 68 px, soit 14 px après une boîte d'icône de 22 px. */
.ar-drawer-foot .elementor-icon-list-icon {
	margin-inline-end: 14px;
}

/* ── ≤1366 : la nav se resserre, le logo rétrécit ──────────────────────── */

@media (max-width: 1366px) {
	.ar-hdr .ar-brand img,
	.ar-fp-wrap .ar-brand img {
		height: 32px;
	}
	.ar-mnav .elementor-nav-menu--main .elementor-nav-menu,
	.ar-mnav .elementor-nav-menu--main .elementor-nav-menu > li {
		gap: 11px;
	}
	.ar-hdr .ar-hdr-in,
	.ar-fp-wrap .ar-fp {
		gap: 20px;
	}
}

/* ── ≤1200 : on ne garde que les icônes du téléphone et de « Mon compte » ─ */

@media (max-width: 1200px) {
	/* `.ar-btn-swap .elementor-button-text` du kit (0,2,0) pose display:grid
	   pour le défilement du libellé : il faut passer au-dessus, d'où la classe
	   du bouton accolée. Le libellé disparaît, l'animation reste intacte dès
	   que le libellé revient au-dessus de 1200 px. */
	.ar-hdr-tel .elementor-icon-list-text,
	.ar-hdr-account.ar-btn-swap .elementor-button-text {
		display: none;
	}
	/* Même adversaire à (0,4,0) que le padding du header 2 : (0,5,0) requis. */
	.ar-hdr .ar-hdr-account.elementor-widget.elementor-widget-button .elementor-button,
	.ar-fp .ar-hdr-account.elementor-widget.elementor-widget-button .elementor-button {
		padding: 10px 12px;
	}
	/* Sans libellé, l'espacement icône/texte n'a plus lieu d'être. */
	.ar-hdr-account .elementor-button-icon {
		margin: 0;
	}
	.ar-hdr-tel .elementor-icon-list-item > a {
		gap: 0;
	}
}

/* ── ≤1024 : mode mobile et tablette ───────────────────────────────────── */

@media (max-width: 1024px) {
	/* Le sticky vit sur le wrapper du template (enfant direct du <body>),
	   comme le .hdr de la maquette : posé sur .ar-hdr il serait inerte, car
	   son parent header.elementor-location-header ne mesure que la hauteur de
	   la barre et un sticky ne colle que dans les limites de son parent. */
	header.elementor-location-header {
		position: sticky;
		top: 0;
		z-index: 300;
	}
	/* Le filet du bas est porté par le conteneur racine .ar-hdr : il va d'un
	   bord à l'autre de l'écran, alors qu'il s'arrêterait aux gouttières s'il
	   était sur le conteneur intérieur. */
	.ar-hdr.e-con {
		background: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		transition: background .45s cubic-bezier(0.22, 1, 0.36, 1),
		            border-color .45s cubic-bezier(0.22, 1, 0.36, 1);
	}
	/* Dès qu'on a quitté le haut de page, le conteneur s'efface : seule la
	   barre intérieure porte encore quelque chose (rien quand elle est
	   masquée, la pilule quand elle revient). Sans ça, `.ar-hdr` garde sa
	   hauteur de 60 px, son fond blanc et son filet collés en haut de l'écran
	   pendant que `.ar-hdr-in` se translate hors champ → une bande blanche
	   résiduelle au scroll descendant (défaut présent aussi dans la maquette,
	   corrigé ici à la demande de l'utilisateur le 03/08/2026). */
	.ar-hdr.ar-mob-past {
		background: transparent;
		border-bottom-color: transparent;
	}

	/* Trois colonnes : burger, logo centré, téléphone. */
	.ar-hdr .ar-hdr-in {
		display: grid;
		grid-template-columns: 40px 1fr 40px;
		align-items: center;
		height: 60px;
		padding: 0;
		gap: 10px;
		transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1),
		            background .3s, box-shadow .3s, border-color .3s;
	}
	.ar-hdr .ar-mob-r {
		justify-content: flex-end;
	}
	.ar-hdr .ar-brand {
		justify-content: center;
		display: flex;
	}
	.ar-hdr .ar-brand img {
		height: 40px;
		margin-inline: auto;
	}
	.ar-mob-burger .elementor-icon {
		font-size: 30px;
	}
	.ar-mob-tel .elementor-icon {
		font-size: 26px;
	}

	/* Header de l'espace client : le burger est un widget JetMenu, pas un
	   widget « icône ». Même fichier menu-3.svg que le site public, mais
	   JetMenu impose `.jet-mobile-menu__toggle-icon svg { width: 16px }` dans
	   sa propre feuille (public.css, spécificité 0,1,1) et le réglage de
	   taille du widget ne passe pas — d'où ces 30 px reposés à (0,3,1).
	   Aucune couleur n'est touchée : les trois traits (noir, turquoise, noir)
	   sont peints par le SVG lui-même. */
	.ar-hdr .ar-mob-jetburger .jet-mobile-menu__toggle-icon svg {
		width: 30px;
		height: 30px;
	}
	/* JetMenu tourne en mode « fill svg icon » (indispensable aux icônes
	   filaires du tiroir) : il peint TOUS les tracés en `fill: currentColor`,
	   ce qui aplatit le burger en monochrome et lui fait perdre son trait
	   turquoise. On rend à chaque tracé la couleur que le fichier déclare
	   lui-même — aucune couleur n'est décidée ici. `revert-layer` fait
	   exactement ça ; les deux règles au-dessus sont le repli des navigateurs
	   qui l'ignorent (elles ne font que recopier l'attribut `fill` du SVG).
	   Adversaire mesuré : la règle de JetMenu est à (0,3,2), d'où le
	   sélecteur d'attribut qui porte les nôtres à égalité, en dernier. */
	.ar-hdr .ar-mob-jetburger .jet-mobile-menu__toggle-icon svg path[fill="#0b0b0b"] {
		fill: #0b0b0b;
	}
	.ar-hdr .ar-mob-jetburger .jet-mobile-menu__toggle-icon svg path[fill="#20c4c3"] {
		fill: #20c4c3;
	}
	.ar-hdr .ar-mob-jetburger .jet-mobile-menu__toggle-icon svg path[fill] {
		fill: revert-layer;
	}

	/* État « pilule givrée » : la barre redescend en capsule flottante. */
	.ar-hdr.ar-mob-pill .ar-hdr-in {
		margin-top: 10px;
		padding: 0 14px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.78);
		-webkit-backdrop-filter: blur(16px) saturate(1.4);
		backdrop-filter: blur(16px) saturate(1.4);
		border: 1px solid rgba(16, 24, 32, 0.08);
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
	}
	.ar-hdr.ar-mob-pill .ar-brand img {
		height: 30px;
	}
	.ar-hdr.ar-mob-pill .ar-mob-burger .elementor-icon {
		font-size: 27px;
	}
	.ar-hdr.ar-mob-pill .ar-mob-jetburger .jet-mobile-menu__toggle-icon svg {
		width: 27px;
		height: 27px;
	}
	.ar-hdr.ar-mob-pill .ar-mob-tel .elementor-icon {
		font-size: 23px;
	}
}

/* ── ≤767 : gouttières resserrées ──────────────────────────────────────── */

@media (max-width: 767px) {
	.ar-hdr .ar-hdr-in,
	.ar-hdr .ar-panel {
		width: calc(100% - 20px);
	}
	.ar-hdr .ar-hdr-in {
		grid-template-columns: 34px 1fr 34px;
	}
	.ar-hdr .ar-brand img {
		height: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ar-fp-wrap,
	.ar-hdr .ar-hdr-in {
		transition: none;
	}
}