/* ==========================================================================
   Kit AD83 — Header [af_kit_ad83_header]
   Le thème renseigne les variables --af-kit-* depuis ses jetons ; valeurs par défaut neutres ci-dessous.
   Sommaire :
   1. Variables
   2. Conteneur
   3. Main nav + sous-menus
   4. Tiroir
   5. Responsive (992)
   ========================================================================== */

/* 1. Variables */
:where(:root) {
  --af-kit-font: sans-serif;
  --af-kit-text: CanvasText;
  --af-kit-bg: Canvas;
  --af-kit-dark: CanvasText;
  --af-kit-on-dark: Canvas;
  --af-kit-accent: LinkText;
  --af-kit-accent-label: CanvasText;
  --af-kit-logo-text: GrayText;
  --af-kit-muted: GrayText;
  --af-kit-line: color-mix(in srgb, CanvasText 15%, transparent);
  --af-kit-line-soft: color-mix(in srgb, CanvasText 10%, transparent);
  --af-kit-hover-line: color-mix(in srgb, CanvasText 30%, transparent);
  --af-kit-soft-bg: color-mix(in srgb, CanvasText 6%, transparent);
  --af-kit-tint: color-mix(in srgb, LinkText 8%, transparent);
  --af-kit-tint-text: LinkText;
  --af-kit-link-hover: LinkText;
  --af-kit-backdrop: color-mix(in srgb, CanvasText 55%, transparent);
  --af-kit-shade: color-mix(in srgb, CanvasText 10%, transparent);
  --af-kit-shade-strong: color-mix(in srgb, CanvasText 20%, transparent);
  --af-kit-focus: Highlight;
  --af-kit-radius-sm: 6px;
  --af-kit-radius-md: 8px;
  --af-kit-radius-lg: 15px;
  --af-kit-space-1: 8px;
  --af-kit-space-2: 12px;
  --af-kit-space-3: 20px;
  --af-kit-space-4: 32px;
  --af-kit-width: 1250px;
  --af-kit-nav-height: 120px;
  --af-kit-logo-height: 60px;
  --af-kit-float-top: 40px;
}

.af_kit_header ul { list-style: none; margin: 0; padding: 0; }
.af_kit_header li { margin: 0; }
.af_kit_header li::before { content: none; }
.af_kit_header :is(button, a):not(#af_kit_reset) { text-transform: none; letter-spacing: normal; box-shadow: none; text-decoration: none; }
.af_kit_header .af_kit_link:not(#af_kit_reset) { font-weight: 500; font-size: 13px; line-height: 16px; }

/* 2. Conteneur (Beaver Builder : module et rangée sans marge ni fond) */
.af_kit_header { position: relative; z-index: 100; width: 100%; font-family: var(--af-kit-font); }
.fl-module:has(> .fl-module-content > .fl-html > .af_kit_header) { flex: 1 1 100%; width: 100%; }
.fl-builder-content .fl-module:has(> .fl-module-content > .af_kit_header) .fl-module-content,
.fl-module-content:has(> .af_kit_header),
.fl-module-content:has(> .fl-html > .af_kit_header) { margin: 0; }
.af_kit_header + p:empty,
.fl-module-content > p:empty:has(+ .af_kit_header) { display: none; }
.fl-col:has(.af_kit_header) { min-height: 0; }
.fl-row:has(.af_kit_header) > .fl-row-content-wrap { background-color: transparent; }

/* 3. Main nav */
.af_kit_nav_wrap {
  position: relative;
  z-index: 2;
  background: var(--af-kit-bg);
  box-shadow: 0 0 30px 0 var(--af-kit-shade);
}
.af_kit_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--af-kit-space-3);
  max-width: var(--af-kit-width);
  height: var(--af-kit-nav-height);
  margin: 0 auto;
  padding: 0 10px 0 30px;
  box-sizing: border-box;
}
.af_kit_logo { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; border-radius: var(--af-kit-radius-sm); text-decoration: none; }
.af_kit_logo_img { display: block; width: auto; max-width: 100%; height: var(--af-kit-logo-height); }
.af_kit_logo_text { color: var(--af-kit-text); font: 700 18px/1.2 var(--af-kit-font); }
.af_kit_brand { display: inline-flex; align-items: center; gap: 14px; flex: 0 1 auto; min-width: 0; }
.af_kit_brand .af_kit_logo { flex: none; }
.af_kit_org {
  display: -webkit-box;
  min-width: 0;
  max-width: 220px;
  padding: 10px 0 10px 14px;
  border-left: 1px solid var(--af-kit-line);
  color: var(--af-kit-logo-text);
  font: 600 14px/1.25 var(--af-kit-font);
  text-decoration: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.af_kit_org:hover { color: var(--af-kit-logo-text); }
.af_kit_items { display: flex; align-items: stretch; height: 100%; }
.af_kit_item { position: relative; display: flex; }
.af_kit_header .af_kit_link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--af-kit-space-1);
  width: auto;
  min-width: 95px;
  max-width: 130px;
  height: 100%;
  padding: 0 4px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--af-kit-text);
  font: 500 13px/16px var(--af-kit-font);
  text-decoration: none;
  cursor: pointer;
}
.af_kit_header .af_kit_link i { font-size: 30px; line-height: 1; color: var(--af-kit-text); transition: color 0.2s ease, transform 0.2s ease; }
.af_kit_header .af_kit_item--accent .af_kit_link i { color: var(--af-kit-accent); }
.af_kit_item--accent .af_kit_label { color: var(--af-kit-accent-label); }
/* Actif / survolé : trait de 1px sur 35px centré sous le libellé, couleur du texte */
.af_kit_header .af_kit_link:is(:hover, :focus-visible),
.af_kit_header .af_kit_link[aria-expanded="true"] { background: transparent; }
.af_kit_header .af_kit_label { position: relative; }
.af_kit_header .af_kit_label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 35px;
  height: 1px;
  background: transparent;
  transform: translateX(-50%) scaleX(0.4);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.af_kit_header .af_kit_link:is(:hover, :focus-visible) .af_kit_label::after,
.af_kit_header .af_kit_link[aria-expanded="true"] .af_kit_label::after { background: var(--af-kit-text); transform: translateX(-50%); }
.af_kit_header :is(.af_kit_burger, .af_kit_item--accent .af_kit_link, .af_kit_link[target="_blank"]) .af_kit_label::after { content: none; }
.af_kit_header .af_kit_item.is-current .af_kit_label::after { background: var(--af-kit-text); transform: translateX(-50%); }
.af_kit_header .af_kit_drawer_items .af_kit_label::after { content: none; }
.af_kit_header .af_kit_link:is(:hover, :focus-visible) i,
.af_kit_header .af_kit_link[aria-expanded="true"] i { transform: translateY(-2px); }
.af_kit_header .af_kit_link:focus-visible { outline: 2px solid var(--af-kit-focus); outline-offset: -6px; border-radius: var(--af-kit-radius-md); }
.af_kit_sub {
  position: absolute;
  top: calc(100% - 10px);
  right: 0;
  z-index: 5;
  min-width: 240px;
  max-height: 70vh;
  overflow: auto;
  padding: var(--af-kit-space-1) !important;
  background: var(--af-kit-bg);
  border-radius: var(--af-kit-radius-lg);
  box-shadow: 0 8px 30px 0 var(--af-kit-shade-strong);
}
.af_kit_sub[hidden] { display: none; }
.af_kit_sub a:not(#af_kit_reset) {
  display: block;
  padding: 10px var(--af-kit-space-2);
  border-radius: var(--af-kit-radius-md);
  color: var(--af-kit-text);
  font: 500 14px/1.3 var(--af-kit-font);
  text-decoration: none;
}
.af_kit_sub a:not(#af_kit_reset):is(:hover, :focus-visible) { background: var(--af-kit-dark); color: var(--af-kit-on-dark); }
.af_kit_header .af_kit_burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 64px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--af-kit-radius-md);
  background: transparent;
  color: var(--af-kit-text);
  cursor: pointer;
}
.af_kit_header .af_kit_burger:not(#af_kit_reset) { font: 500 13px/16px var(--af-kit-font); }
.af_kit_header .af_kit_burger i { font-size: 30px; }
.af_kit_header .af_kit_burger:is(:hover, :focus-visible) { background: var(--af-kit-tint); color: var(--af-kit-tint-text); }
/* Bouton « menu » sur ordinateur (filtre af_kit_ad83_header_menu_button) : même gabarit qu’une entrée */
@media (min-width: 993px) {
  .af_kit_header--drawer .af_kit_items { margin-left: auto; }
  .af_kit_header--drawer .af_kit_burger:not(#af_kit_reset) { display: flex; margin-left: calc(-1 * var(--af-kit-space-3)); gap: var(--af-kit-space-1); width: 95px; height: 100%; }
  .af_kit_header--drawer .af_kit_burger:not(#af_kit_reset):is(:hover, :focus-visible) { background: transparent; color: var(--af-kit-text); }
  .af_kit_header--drawer .af_kit_burger i { transition: transform 0.2s ease; }
  .af_kit_header--drawer .af_kit_burger:is(:hover, :focus-visible) i { transform: translateY(-2px); }
}

/* Carte flottante : shortcode float, ou page qui contient un élément .af_kit_float (héro du thème) */
.af_kit_header--float,
body:has(.af_kit_float) .af_kit_header { height: 0; }
.af_kit_header--float .af_kit_nav_wrap,
body:has(.af_kit_float) .af_kit_header .af_kit_nav_wrap { position: absolute; top: var(--af-kit-float-top); left: 0; right: 0; padding: 0 40px; background: none; box-shadow: none; }
.af_kit_header--float .af_kit_nav,
body:has(.af_kit_float) .af_kit_header .af_kit_nav { background: var(--af-kit-bg); border-radius: var(--af-kit-radius-lg); box-shadow: 0 4px 30px 0 var(--af-kit-shade); }

/* 4. Tiroir mobile */
.af_kit_drawer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--af-kit-backdrop);
  overscroll-behavior: contain;
}
.af_kit_drawer[hidden] { display: none; }
.af_kit_drawer_panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(360px, 88vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--af-kit-space-3) var(--af-kit-space-3) calc(var(--af-kit-space-4) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: var(--af-kit-bg);
  box-shadow: 0 0 30px 0 var(--af-kit-shade-strong);
}
.af_kit_drawer_head { display: flex; align-items: center; justify-content: space-between; gap: var(--af-kit-space-2); margin-bottom: var(--af-kit-space-3); }
.af_kit_drawer_head .af_kit_logo_img { height: min(var(--af-kit-logo-height), 52px); }
.af_kit_drawer_head .af_kit_brand { flex-direction: column; align-items: flex-start; gap: var(--af-kit-space-1); }
.af_kit_drawer_head .af_kit_org { max-width: none; padding: 0; border-left: 0; }
.af_kit_header .af_kit_drawer_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--af-kit-soft-bg);
  color: var(--af-kit-text);
  font-size: 22px;
  cursor: pointer;
}
.af_kit_header .af_kit_drawer_close:is(:hover, :focus-visible) { background: var(--af-kit-dark); color: var(--af-kit-on-dark); }
.af_kit_drawer_items { display: flex; flex-direction: column; gap: 2px; }
.af_kit_drawer_items .af_kit_item { flex-direction: column; }
.af_kit_header .af_kit_drawer_items .af_kit_link {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--af-kit-space-2);
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 52px;
  padding: 0 var(--af-kit-space-2);
  border-radius: var(--af-kit-radius-md);
  font-size: 16px;
  text-align: left;
}
.af_kit_header .af_kit_drawer_items .af_kit_link i { font-size: 26px; }
.af_kit_header .af_kit_drawer_items .af_kit_link:not(#af_kit_reset) { font-size: 16px; line-height: 1.3; }
.af_kit_header .af_kit_drawer_close:not(#af_kit_reset) { font-size: 22px; }
.af_kit_header .af_kit_drawer_items .af_kit_link:is(:hover, :focus-visible) { background: var(--af-kit-dark); color: var(--af-kit-on-dark); }
.af_kit_header .af_kit_drawer_items .af_kit_link:is(:hover, :focus-visible) :is(i, .af_kit_label) { color: var(--af-kit-on-dark); transform: none; }
.af_kit_header .af_kit_drawer_items .has-sub > .af_kit_link::after {
  content: "\e136";
  margin-left: auto;
  font-family: "Phosphor-Light";
  font-size: 18px;
  transition: transform 0.2s ease;
}
.af_kit_header .af_kit_drawer_items .has-sub > .af_kit_link[aria-expanded="true"]::after { transform: rotate(180deg); }
.af_kit_drawer_items .af_kit_sub {
  position: static;
  min-width: 0;
  max-height: none;
  padding: 0 0 var(--af-kit-space-1) 50px !important;
  box-shadow: none;
  border-radius: 0;
}
.af_kit_drawer_title {
  margin: var(--af-kit-space-4) 0 var(--af-kit-space-1);
  padding-top: var(--af-kit-space-3);
  border-top: 1px solid var(--af-kit-line-soft);
  color: var(--af-kit-muted);
  font: 700 12px/1.3 var(--af-kit-font);
  letter-spacing: 0.84px;
  text-transform: uppercase;
}
.af_kit_drawer_links a:not(#af_kit_reset) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--af-kit-space-2);
  border-radius: var(--af-kit-radius-md);
  color: var(--af-kit-text);
  font: 500 15px/1.3 var(--af-kit-font);
  text-decoration: none;
}
.af_kit_drawer_links a:not(#af_kit_reset):is(:hover, :focus-visible) { background: var(--af-kit-tint); color: var(--af-kit-link-hover); }
html.af_kit_nav-open,
html.af_kit_nav-open body { overflow: hidden; }
html.af_kit_nav-open .af_kit_header { z-index: 100000; }

/* 5. Responsive */
@media (max-width: 992px) {
  :where(:root) { --af-kit-nav-height: 80px; --af-kit-float-top: 20px; }
  .af_kit_header--float .af_kit_nav_wrap,
  body:has(.af_kit_float) .af_kit_header .af_kit_nav_wrap { padding: 0 var(--af-kit-space-3); }
  .af_kit_nav { padding: 0 var(--af-kit-space-1) 0 var(--af-kit-space-3); }
  .af_kit_items { display: none; }
  .af_kit_header .af_kit_burger { display: inline-flex; }
  .af_kit_logo_img { height: min(var(--af-kit-logo-height), 50px); }
  .af_kit_brand { gap: 10px; }
  .af_kit_org { max-width: 160px; padding-left: 10px; font-size: 12px; }
}
@media (max-width: 768px) {
  :where(:root) { --af-kit-nav-height: 64px; --af-kit-float-top: var(--af-kit-space-2); }
  .af_kit_header--float .af_kit_nav_wrap,
  body:has(.af_kit_float) .af_kit_header .af_kit_nav_wrap { padding: 0 var(--af-kit-space-2); }
  .af_kit_header--float .af_kit_nav,
  body:has(.af_kit_float) .af_kit_header .af_kit_nav { border-radius: var(--af-kit-radius-md); }
  .af_kit_nav { padding: 0 var(--af-kit-space-1) 0 var(--af-kit-space-2); }
  .af_kit_logo_img { height: min(var(--af-kit-logo-height), 40px); }
  .af_kit_header .af_kit_burger { width: 48px; height: 48px; }
  .af_kit_header .af_kit_burger .af_kit_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .af_kit_header .af_kit_link i,
  .af_kit_header .af_kit_label::after { transition: none; }
}
