/* Groupe ARA — navigation (mega menus + menu mobile).
   Header généré par _dev/build_nav.py depuis _dev/menu.json. */

/* ---------- Barre principale ---------- */
.ara-glass .nav-main { position: relative; gap: 20px; }
/* Les entrées occupent toute la hauteur de la barre : la zone de survol touche
   le panneau, la souris peut descendre dans le menu sans qu'il se referme. */
.ara-glass .nav-links.nav-desktop { align-self: stretch; display: flex; align-items: stretch; }
.nav-list { display: flex; align-items: stretch; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-item { display: flex; align-items: center; gap: 2px; }
.nav-item.is-compact { position: relative; }
.ara-glass .nav-links .lnk.is-actif { color: var(--ara-navy-900); font-weight: 600; }

/* Le libellé d'un menu sans page est un <button> qui doit ressembler aux liens */
.nav-trigger, .nav-chevron, .nav-burger, .nm-trigger {
	font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-chev { flex: none; transition: transform var(--dur-2) var(--ease-standard); }
[aria-expanded="true"] > .nav-chev { transform: rotate(180deg); }
.nav-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; border-radius: 8px; color: var(--ara-navy-700); }
.nav-chevron:hover, .nav-chevron[aria-expanded="true"] { color: var(--ara-coral-600); background: rgba(255,255,255,0.6); }
.nav-trigger:focus-visible, .nav-chevron:focus-visible, .nav-burger:focus-visible, .nm-trigger:focus-visible,
.mega a:focus-visible, .nav-mobile a:focus-visible {
	outline: none; box-shadow: var(--shadow-focus); border-radius: 8px;
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-burger { display: none; }

/* ---------- Mega menu ---------- */
.mega {
	position: absolute; top: 100%; left: 50%; z-index: 60;
	width: min(1180px, calc(100vw - 48px)); padding-top: 10px;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-2);
}
.mega.is-open {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
	transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard), visibility 0s;
}
.mega--compact { width: 300px; left: 50%; }
.mega-inner {
	padding: 26px 28px; border-radius: 22px;
	background: linear-gradient(150deg, rgba(255,255,255,0.995) 0%, rgba(255,255,255,0.985) 100%);
	backdrop-filter: blur(36px) saturate(150%); -webkit-backdrop-filter: blur(36px) saturate(150%);
	border: 1px solid var(--glass-border-strong); box-shadow: var(--glass-shadow-strong);
	max-height: calc(100vh - 140px); overflow-y: auto;
}
.mega--compact .mega-inner { padding: 16px 14px; }
.mega-accroche {
	margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--glass-hairline);
	font-size: 14px; line-height: 1.5; color: var(--ara-gray-600); max-width: 760px;
}
.mega-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 28px; }
.mega--compact .mega-grid { grid-template-columns: 1fr; gap: 0; }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-head {
	display: flex; align-items: center; gap: 8px; padding: 0 10px 10px;
	font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 600; color: var(--ara-gray-500);
}
.mega-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ton); flex: none; }
.mega-link {
	display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 11px;
	text-decoration: none; transition: background var(--dur-2) var(--ease-standard);
}
.mega-link:hover { background: color-mix(in srgb, var(--ton) 8%, transparent); }
.mega-label { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ara-navy-800); }
.mega-link:hover .mega-label { color: var(--ara-navy-900); }
.mega-link.is-produit .mega-label { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--ara-navy-900); }
.mega-desc { font-size: 12.5px; line-height: 1.4; color: var(--ara-gray-600); }
.mega-tout, .mega-encart-lien {
	display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
	color: var(--ara-coral-600); text-decoration: none; transition: gap var(--dur-2) var(--ease-standard);
}
.mega-tout { margin: 10px 10px 0; }
.mega-tout:hover, .mega-encart:hover .mega-encart-lien { gap: 10px; }
.mega-encart {
	display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; text-decoration: none;
	background: linear-gradient(150deg, color-mix(in srgb, var(--ton) 11%, white), color-mix(in srgb, var(--ton) 4%, white));
	border: 1px solid color-mix(in srgb, var(--ton) 18%, white);
	transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) var(--ease-standard);
}
.mega-encart:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-sm); }
.mega-encart-titre { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ara-navy-900); }
.mega-encart-texte { font-size: 13.5px; line-height: 1.5; color: var(--ara-navy-700); flex: 1; }

/* ---------- Menu mobile ---------- */
.nav-burger {
	width: 44px; height: 44px; border-radius: var(--radius-full); flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	background: var(--glass-fill-quiet); border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 10px rgba(46,58,83,0.05);
}
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ara-navy-900); transition: transform var(--dur-2) var(--ease-standard), opacity var(--dur-2); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
	max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
	background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--glass-hairline);
	box-shadow: 0 18px 40px rgba(46,58,83,0.12);
	padding: 8px 20px 24px;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile nav { display: flex; flex-direction: column; }
.nav-mobile .nm-link, .nav-mobile .nm-trigger {
	display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
	font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ara-navy-900);
	text-decoration: none; text-align: left; border-bottom: 1px solid var(--glass-hairline);
}
.nm-panel { display: flex; flex-direction: column; padding: 6px 0 14px; border-bottom: 1px solid var(--glass-hairline); }
.nm-panel[hidden] { display: none; }
.nm-head { margin: 12px 0 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ara-gray-500); }
.nm-sub { display: flex; align-items: center; min-height: 40px; padding-left: 12px; font-size: 15px; color: var(--ara-navy-700); text-decoration: none; }
.nm-sub--main, .nm-sub--tout { font-weight: 600; color: var(--ara-coral-600); }
.nm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.nm-actions a { width: 100%; text-decoration: none; }
html.nav-open { overflow: hidden; }

/* ---------- Pages « en construction » ---------- */
.construction-carte { max-width: 920px; margin: 0 auto; padding: 56px; text-align: left; }
.construction-badge {
	display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; border-radius: var(--radius-full);
	background: var(--ara-amber-50); border: 1px solid rgba(246,146,53,0.28);
	font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ara-amber-700);
}
.construction-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ara-amber-500); box-shadow: 0 0 8px var(--ara-amber-500); }
.ara-glass .construction-titre { margin-top: 24px; font-size: clamp(38px, 6vw, 64px); }
.construction-titre span { color: var(--ara-coral-500); }
.construction-texte { margin: 20px 0 0; max-width: 620px; }
.construction-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.construction-actions a { text-decoration: none; }
.construction-rubrique { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--glass-hairline); }

/* ---------- Responsive ---------- */
@media (max-width: 1535px) {
	.nav-list { gap: 16px; }
	.ara-glass .nav-links { font-size: 14px; }
	.nav-client-txt { display: none; }
	.ara-glass .nav-main a.nav-client { width: 44px; padding: 0; }
}
@media (max-width: 1365px) {
	.nav-desktop { display: none !important; }
	.nav-burger { display: inline-flex; }
	.ara-glass .nav-main { flex-wrap: nowrap !important; }
}
@media (max-width: 1080px) {
	.ara-glass .nav-main { height: 64px !important; padding: 0 16px !important; }
	.nav-mobile { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
}
@media (max-width: 560px) {
	.nav-actions .nav-cta { display: none; }
	.construction-carte { padding: 32px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.mega, .mega.is-open, .nav-chev, .nav-burger span, .mega-encart { transition: none; }
}

/* ---------- Pastille « En construction » (temporaire : signaler_construction dans _dev/menu.json) ---------- */
.nav-chantier {
	display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 7px; vertical-align: 2px;
	border-radius: var(--radius-full); background: var(--ara-amber-50); border: 1px solid rgba(246,146,53,0.3);
	font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--ara-amber-700); white-space: nowrap;
}
.mega-link.is-produit .nav-chantier { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* Sous-entrées (offres Divalto par métier) */
.mega-link.is-sous { padding: 5px 10px 5px 24px; position: relative; }
.mega-link.is-sous::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--ara-amber-200); }
.mega-link.is-sous .mega-label { font-size: 13.5px; }
.mega-link.is-sous .mega-desc { font-size: 11.5px; }

/* Métiers & Secteurs : le produit dédié ressort sous chaque entrée */
#mega-metiers .mega-desc { color: var(--ara-amber-700); font-weight: 600; font-size: 12px; }

/* Titres de colonne cliquables (ARA CLOUD, ARA CARE) */
.mega-head.is-lien { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; font-weight: 700; color: var(--ara-navy-900); text-decoration: none; gap: 8px; }
.mega-head.is-lien svg { opacity: 0.5; transition: transform var(--dur-2) var(--ease-standard), opacity var(--dur-2); }
.mega-head.is-lien:hover { color: var(--ara-coral-600); }
.mega-head.is-lien:hover svg { opacity: 1; transform: translateX(3px); }
a.nm-head { display: block; text-decoration: none; color: var(--ara-navy-900); }

/* Télécoms : une seule colonne (ARALINK) + encart → panneau resserré */
#mega-telecoms { width: min(760px, calc(100vw - 48px)); }

/* Ancres : le header collant ne masque pas la cible ; vignette ciblée mise en évidence */
.ara-glass [id] { scroll-margin-top: 100px; }
.care-carte:target { animation: cibleFlash 1.8s var(--ease-standard) 1; }
@keyframes cibleFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--ara-blue-400), var(--glass-shadow-strong); } 100% { box-shadow: var(--glass-shadow); } }
@media (prefers-reduced-motion: reduce) { .care-carte:target { animation: none; box-shadow: 0 0 0 3px var(--ara-blue-400); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* =====================================================================
   Optimisation du header (instructions/INSTRUCTIONS_CLAUDE_CODE_HEADER_ARA.md)
   ===================================================================== */
:root { --topbar-h: 34px; }

/* Bandeau supérieur : plus compact, contraste renforcé, liens actifs */
.ara-glass .nav-top {
	height: var(--topbar-h); color: var(--ara-navy-800);
	border-bottom-color: rgba(46,58,83,0.06);
	transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}
.ara-glass .nav-top .grp { gap: 20px; }
.ara-glass .nav-top a.item { color: inherit; text-decoration: none; border-radius: 6px; }
.ara-glass .nav-top a.item:hover { color: var(--ara-coral-600); }
.ara-glass .nav-top a.item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nav-top-sep { color: var(--ara-gray-400); }
.nav-top-langue { font-weight: 600; letter-spacing: 0.04em; }

/* Sticky : le bandeau sort par le haut, la navigation reste collée.
   Après 60 px, il s'efface en douceur (pas de changement de hauteur → pas de saut). */
.ara-glass .site-header { top: calc(-1 * var(--topbar-h)); }
html.topbar-cache .ara-glass .nav-top { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.ara-glass [id] { scroll-margin-top: 92px; }

/* Bouton téléphone : header compact mobile [logo] [téléphone] [menu] */
.nav-tel {
	display: none; width: 44px; height: 44px; border-radius: var(--radius-full);
	align-items: center; justify-content: center; color: var(--ara-coral-600);
	background: var(--glass-fill-quiet); border: 1px solid var(--glass-border);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 10px rgba(46,58,83,0.05);
}
.nav-tel:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Coordonnées dans le menu mobile */
.nm-coords { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-hairline); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.nm-coords a, .nm-coords span { display: flex; align-items: center; min-height: 36px; color: var(--ara-navy-700); text-decoration: none; }
.nm-coords a:hover { color: var(--ara-coral-600); }

/* Navigation sur une ligne jusqu'à 1260 px : espacements resserrés plutôt que hamburger */
@media (max-width: 1365px) {
	.nav-desktop { display: flex !important; }
	.nav-burger { display: none; }
	.ara-glass .nav-main { padding: 0 24px !important; gap: 14px; }
	.ara-glass .nav-top { padding: 0 24px; }
	.nav-list { gap: 12px; }
}
@media (max-width: 1259px) {
	.nav-desktop { display: none !important; }
	.nav-burger { display: inline-flex; }
}
@media (max-width: 768px) {
	.nav-tel { display: inline-flex; }
	.nav-actions .nav-client { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ara-glass .nav-top { transition: none; }
}
html, body { overflow-x: clip; }
/* Sous 1080 px le bandeau supérieur est masqué : la navigation colle tout en haut */
@media (max-width: 1080px) { .ara-glass .site-header { top: 0; } }

/* Titres de colonne aux couleurs des marques ARA CLOUD / ARA CARE / ARALINK */
.mega-marque { display: flex; align-items: center; gap: 12px; margin: -6px 0 10px; padding: 10px; border-radius: 14px; text-decoration: none; transition: background var(--dur-2) var(--ease-standard); }
.mega-marque:hover { background: rgba(46,58,83,0.04); }
.mega-marque .ic-box { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.mega-marque-texte { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mega-marque-nom { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; color: var(--ara-navy-900); }
.mega-marque-nom b { font-weight: 700; }
.mega-marque-sous { margin-top: 3px; font-size: 12.5px; color: var(--ara-gray-600); }
.mega-marque > svg { color: var(--ara-navy-700); flex: none; transition: transform var(--dur-2) var(--ease-standard); }
.mega-marque:hover > svg { transform: translateX(3px); }
.mega-marque:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* =====================================================================
   Mega menu « cartes de marque » : ARA CLOUD / ARA CARE / ARALINK
   ===================================================================== */
.mega--cartes { width: min(1100px, calc(100vw - 48px)); }
.mega--cartes .mega-inner { padding: 30px 32px 22px; }
.mc-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-carte { display: flex; flex-direction: column; padding: 4px 30px; border-left: 1px solid var(--glass-hairline); }
.mc-carte:first-child { border-left: none; padding-left: 4px; }
.mc-carte:last-child { padding-right: 4px; }
.mc-tete { display: flex; align-items: flex-start; justify-content: space-between; }
.ara-glass .mc-icone { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 10px 24px color-mix(in srgb, var(--ton) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.8); }
.mc-fleche { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--ton) 9%, white); color: var(--ton); transition: transform var(--dur-2) var(--ease-standard), background var(--dur-2); }
.mc-fleche:hover { transform: translateX(3px); background: color-mix(in srgb, var(--ton) 16%, white); }
.mc-nom { margin-top: 18px; font-family: var(--font-display); font-size: 25px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--ara-navy-900); text-decoration: none; }
.mc-nom b { font-weight: 700; }
.mc-sous { margin-top: 6px; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--ara-navy-800); }
.mc-texte { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ara-gray-600); }
.mc-liste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mc-liste a { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 5px 0; font-size: 14.5px; color: var(--ara-navy-800); text-decoration: none; }
.mc-liste a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ton); flex: none; }
.mc-liste a:hover { color: var(--ton); }
.mc-tout { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ton); text-decoration: none; transition: gap var(--dur-2) var(--ease-standard); }
.mc-tout:hover { gap: 11px; }
.mc-pied { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--glass-hairline); display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ara-navy-700); text-decoration: none; }
.mc-pied:hover { color: var(--ara-coral-600); }
.mc-carte a:focus-visible, .mc-pied:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 8px; }
/* Nombre de cartes variable (2 pour Infrastructure & Cloud) */
.mega--cartes { width: min(calc(var(--n, 3) * 360px + 64px), calc(100vw - 48px)); }
.mc-grille { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }

/* Logos officiels dans les menus */
.mc-logo { display: inline-flex; align-items: center; min-height: 44px; }
.mc-logo img { height: 32px; width: auto; display: block; }
.mega-marque-logo { height: 28px; width: auto; display: block; }
.mega-marque-texte { gap: 6px; }
.mega-marque-texte { align-items: flex-start; }

/* Charte « Famille ARA » : seconde partie du nom en couleur de marque (_dev/build_marques.py) */
.m-link { color: var(--ara-coral-500); }
.m-cloud { color: var(--ara-blue-500); }
.m-care { color: var(--ara-amber-600); }
/* La graphie des marques résiste aux mises en capitales du CSS (surtitres, libellés) : ARACloud, jamais ARACLOUD */
.m-marque, .m-app { white-space: nowrap; }
.m-link, .m-cloud, .m-care, .m-app { text-transform: none; }
/* Pied de page : descripteur sous les marques ARACloud / ARACare / ARALink */
.pied-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--ara-gray-500); }
/* Fond « aurora » : taches de couleur floutées posées en ligne dans chaque page.
   Le corail (opacité 0.24 à 0.34 d'origine) donnait un fond trop rose : on le
   ramène au niveau des autres teintes, sur tous les écrans. */
.page-aurora .pa-blob[style*="coral"] { opacity: 0.14 !important; }
/* Sur mobile, les taches font 500 à 620 px de large : sur 390 px, le corail de
   gauche couvrait tout l'écran et les taches bleues, placées à droite, en
   sortaient. On les réduit et on ramène bleu et sarcelle dans le champ. */
@media (max-width: 640px) {
	.page-aurora .pa-blob { width: 78vw !important; height: 78vw !important; }
	.page-aurora .pa-blob[style*="blue"],
	.page-aurora .pa-blob[style*="teal"] { left: 42% !important; opacity: 0.30 !important; }
}