/* ==========================================================================
   header.css — N10 scroll-morph × N11 mega-menu
   État 0 : barre pleine largeur transparente posée sur le hero sombre.
   État 1 : pilule flottante centrée, verre sombre, glow bleu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COQUE
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding-inline: var(--gutter);
  /* pas de fond ici : c'est .hdr__bar qui porte le morph */
}

.hdr__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0.9375rem 0.375rem;
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition:
    max-width    var(--dur-morph) var(--ease-out),
    padding      var(--dur-morph) var(--ease-out),
    margin-top   var(--dur-morph) var(--ease-out),
    border-radius var(--dur-morph) var(--ease-out),
    background-color var(--dur-morph) var(--ease-out),
    border-color var(--dur-morph) var(--ease-out),
    box-shadow   var(--dur-morph) var(--ease-out),
    -webkit-backdrop-filter var(--dur-morph) var(--ease-out),
    backdrop-filter var(--dur-morph) var(--ease-out);
}

/* État scrollé — la pilule */
.hdr.is-stuck .hdr__bar {
  max-width: 1100px;
  margin-top: 12px;
  padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  border-radius: var(--radius-pill);
  background: rgba(6, 11, 24, .70);
  border-color: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 20px 60px -20px rgba(3, 6, 15, .92),
    0 0 40px -18px rgba(27, 110, 243, .55),
    var(--inner-top);
}

/* Bordure en dégradé, révélée seulement à l'état pilule */
.hdr__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(100deg,
    rgba(147,193,255,.42) 0%,
    rgba(147,193,255,.04) 42%,
    rgba(91,75,232,.34) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-morph) var(--ease-out);
}
.hdr.is-stuck .hdr__bar::before { opacity: 1; }

/* --------------------------------------------------------------------------
   2. LOGO
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--on-dark);
  flex: none;
  padding: 0.25rem 0.375rem;
  border-radius: var(--radius-xs);
}
.logo__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 0 14px rgba(74,155,255,.9);
  align-self: center;
  margin-left: 2px;
  flex: none;
}
.logo:hover .logo__dot { box-shadow: 0 0 22px rgba(74,155,255,1); }

/* --------------------------------------------------------------------------
   3. NAVIGATION PRINCIPALE
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-inline: auto;   /* centrage optique de la nav */
}
.nav__item { position: relative; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.5rem 0.8125rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-dark-2);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__link.is-current { color: var(--on-dark); }

/* Underline en dégradé qui se déploie + halo doux */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.8125rem; right: 0.8125rem; bottom: 0.1875rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-text);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after,
.nav__link.is-current::after { transform: scaleX(1); opacity: 1; }

.nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 120% at 50% 100%, rgba(74,155,255,.20) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.nav__link:hover::before,
.nav__link[aria-expanded="true"]::before { opacity: 1; }

/* Chevron des items à sous-menu */
.nav__chev {
  width: 10px; height: 10px;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   4. ACTIONS À DROITE
   -------------------------------------------------------------------------- */
.hdr__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}
.hdr__tel {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-dark-2);
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.hdr__tel:hover { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   5. MEGA-MENU (N11)
   Panneau large centré sous la barre : fond sombre, orbes, grain, grille.
   -------------------------------------------------------------------------- */
.mega {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  width: min(1120px, calc(100vw - var(--gutter) * 2));
  transform: translate(-50%, -12px);
  z-index: var(--z-mega);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.mega__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(158deg, rgba(9,16,30,.94) 0%, rgba(14,25,45,.94) 100%);
  border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  box-shadow: var(--shadow-deep), 0 0 60px -30px rgba(27,110,243,.7);
  padding: var(--space-xl);
}
.mega__panel::after {           /* grain local, plus marqué que le global */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .05;
  background-image: var(--grain-url);
  pointer-events: none;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.92fr);
  gap: var(--space-lg);
  align-items: start;
}

/* 5a. Cards de service dans le mega-menu */
.mega-card {
  position: relative;
  display: block;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.mega-card:hover,
.mega-card:focus-visible {
  background: rgba(74,155,255,.07);
  border-color: rgba(74,155,255,.28);
  transform: translateY(-2px);
}

.mega-card__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(27,110,243,.22), rgba(91,75,232,.18));
  border: 1px solid rgba(74,155,255,.26);
  color: var(--blue-300);
}
.mega-card__icon svg { width: 19px; height: 19px; }
/* Icônes animées au hover : le tracé se redessine */
.mega-card__icon svg [data-draw] {
  stroke-dasharray: 44;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-slower) var(--ease-out);
}
.mega-card:hover .mega-card__icon svg [data-draw] { stroke-dashoffset: 88; }
.mega-card:hover .mega-card__icon {
  border-color: rgba(74,155,255,.6);
  box-shadow: 0 0 26px -8px rgba(74,155,255,.8);
  color: var(--on-dark);
}

.mega-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--on-dark);
  margin-bottom: 0.25rem;
}
.mega-card__desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--on-dark-3);
  margin-bottom: 0.5rem;
}
.mega-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue-400);
}
.mega-card__go svg { transition: transform var(--dur-base) var(--ease-out); }
.mega-card:hover .mega-card__go svg { transform: translateX(4px); }

/* 5b. Colonne vedette « Développement sur-mesure » */
.mega-feature {
  position: relative;
  overflow: hidden;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  box-shadow: var(--glow-blue);
  color: #fff;
}
.mega-feature::before {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -90px; top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,211,240,.75) 0%, rgba(41,211,240,0) 68%);
  filter: blur(40px);
  pointer-events: none;
}
.mega-feature > * { position: relative; }
.mega-feature__tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.18);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.mega-feature h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: 0.5rem;
}
.mega-feature p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  margin-bottom: var(--space-md);
}
.mega-feature .btn {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.8);
}
.mega-feature .btn:hover { background: #EAF0FA; }

/* 5c. Mega-menus simples (Réalisations, Agence) — liste + descriptions */
.mega--list { width: min(620px, calc(100vw - var(--gutter) * 2)); }
.mega--list .mega__panel { padding: var(--space-lg); }
.mega__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}
.mega__list a {
  display: block;
  padding: 0.6875rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-base) var(--ease-out);
}
.mega__list a:hover { background: rgba(74,155,255,.09); }
.mega__list strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-dark);
  margin-bottom: 1px;
}
.mega__list span {
  display: block;
  font-size: var(--text-sm);
  color: var(--on-dark-3);
  line-height: 1.45;
}

.mega__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
  font-size: var(--text-sm);
  color: var(--on-dark-3);
}

/* --------------------------------------------------------------------------
   6. BURGER (mobile)
   -------------------------------------------------------------------------- */
.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-dark-strong);
  background: rgba(255,255,255,.04);
  flex: none;
}
.burger:hover { background: rgba(74,155,255,.10); border-color: rgba(74,155,255,.4); }

/* Les trois barres sont posées en absolu depuis le centre du bouton.
   C'est la seule façon d'obtenir une croix dont les deux diagonales se
   croisent exactement au même point : en flux, les barres héritent de la
   hauteur de ligne du conteneur et les translations ne retombent jamais
   sur le même centre. */
.burger span {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 2px;
  margin: -1px 0 0 -10px;
  background: var(--on-dark);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }

.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. DRAWER MOBILE — plein écran sombre, orbes, accordéons en cascade
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -1.5%, 0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
  overflow: hidden;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.0625rem var(--gutter);
  border-bottom: 1px solid var(--line-dark);
  flex: none;
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-lg) var(--gutter) var(--space-lg);
}

/* Cascade d'ouverture sur les items */
.drawer__item {
  border-bottom: 1px solid var(--line-dark);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
.drawer.is-open .drawer__item {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(60ms + var(--i, 0) * 55ms);
}

.drawer__trigger,
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 1.0625rem 0.25rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--on-dark);
  text-align: left;
}
.drawer__trigger svg { flex: none; transition: transform var(--dur-base) var(--ease-out); }
.drawer__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__trigger[aria-expanded="true"] { color: var(--blue-300); }

.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.drawer__sub > div { overflow: hidden; }
.drawer__trigger[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }

.drawer__sub a {
  display: block;
  padding: 0.6875rem 0.25rem 0.6875rem 1rem;
  border-left: 1px solid var(--line-dark-strong);
  font-size: var(--text-base);
  color: var(--on-dark-2);
}
.drawer__sub a:hover { color: var(--on-dark); border-left-color: var(--blue-400); }
.drawer__sub div > :last-child { margin-bottom: var(--space-md); }

/* Le bloc d'action est sorti de la zone défilante : sur mobile, « Démarrer un
   projet » doit rester sous le pouce, pas au bout d'un scroll. */
.drawer__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--gutter);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-dark);
  background: rgba(6, 11, 24, .88);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 -20px 40px -28px rgba(3, 6, 15, .9);
}
/* Même cascade d'entrée que les items du menu, mais en dernier */
.drawer__foot .btn {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
.drawer.is-open .drawer__foot .btn {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: 340ms;
}
.drawer.is-open .drawer__foot .btn:last-child { transition-delay: 400ms; }

.drawer__meta {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--on-dark-3);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE HEADER
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav, .hdr__tel { display: none; }
  .burger { display: block; }
  .hdr__bar { justify-content: space-between; padding: 0.75rem 0.375rem; }
  .hdr.is-stuck .hdr__bar { padding: 0.5rem 0.5rem 0.5rem 1rem; max-width: 720px; }
  .hdr__actions .btn--primary { display: none; }
}

@media (max-width: 1180px) and (min-width: 1081px) {
  .nav__link { padding-inline: 0.625rem; font-size: var(--text-sm); }
}

/* Le mega-menu passe en 2 colonnes avant de disparaître au profit du drawer */
@media (max-width: 1080px) {
  .mega { display: none; }
}