/* =============================================================
   COMPOSANTS — boutons, navigation, menu plein écran
   ============================================================= */

/* === BOUTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--text-base);
  line-height: 1;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }

/* --- FIX · toute icône dans un .btn reçoit une dimension ---
   Sans cela, un <svg> dans un bouton en width:100% se comporte
   comme un bloc et gonfle pour occuper tout l'espace restant. */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--cta);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(180, 24, 15, .24);
}
.btn--primary:hover {
  background: var(--cta-hover);
  box-shadow: 0 4px 14px rgba(180, 24, 15, .32);
}

.btn--lg {
  font-size: var(--text-lg);
  padding: var(--s-4) var(--s-5);
}
.btn--lg svg {
  width: 18px;
  height: 18px;
}
/* === NAVIGATION · Glass pill === */
.nav {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  z-index: var(--z-nav);
  border-radius: var(--r-pill);

  /* Frost */
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  /* Bord lumineux + profondeur */
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    0 8px 32px rgba(14, 27, 87, .12),
    0 2px 8px rgba(14, 27, 87, .06),
    inset 0 1px 0 rgba(255, 255, 255, .8);

  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.nav--scrolled {
  background: rgba(255, 255, 255, .85);
  box-shadow:
    0 12px 40px rgba(14, 27, 87, .16),
    0 4px 12px rgba(14, 27, 87, .08),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Fallback si backdrop-filter non supporté */
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: rgba(255, 255, 255, .96); }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  min-height: 56px;
}

/* Logo */
/* === LOGO NAV === */
.nav__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* Réserve l'espace exact que le logo va occuper */
  height: 32px;
}
.nav__logo-img {
  display: block;
  height: 100%;       /* s'adapte à la hauteur du conteneur */
  width: auto;        /* largeur calculée depuis le ratio naturel */
  /* Retire le halo bleu du fond transparent si besoin */
  filter: drop-shadow(0 1px 2px rgba(14, 27, 87, .08));
}

@media (min-width: 1024px) {
  .nav__logo { height: 40px; }
}
/* Liens desktop */
.nav__links {
  display: none;
  align-items: center;
  gap: var(--s-5);
}
.nav__links a {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  padding: var(--s-2) var(--s-1);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: var(--s-1);
  right: var(--s-1);
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-fluid);
}
.nav__links a:hover { color: var(--red-deep); }
.nav__links a:hover::after { transform: scaleX(1); }

/* CTA nav */
.nav__cta {
  padding: var(--s-2) var(--s-4);
  font-size: var(--text-sm);
}
.nav__cta-short { display: inline; }
.nav__cta-full { display: none; }

/* Burger — morph vers X */
.nav__burger {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__burger:hover { background: rgba(14, 27, 87, .06); }

.nav__burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  margin: -1px 0 0 -10px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateY(var(--y, 0));
  transition: transform var(--dur-base) var(--ease-fluid),
              opacity var(--dur-fast) var(--ease-out);
}
.nav__burger span:nth-child(1) { --y: -6px; }
.nav__burger span:nth-child(2) { --y: 0; }
.nav__burger span:nth-child(3) { --y: 6px; }

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

/* === DESKTOP === */
@media (min-width: 1024px) {
  .nav {
    top: var(--s-5);
    left: 50%;
    right: auto;
    width: max-content;
    max-width: calc(100% - var(--s-5) * 2);
    transform: translateX(-50%);
  }
  .nav__inner {
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
    min-height: 60px;
    gap: var(--s-7);
  }
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__cta {
    padding: var(--s-3) var(--s-5);
    font-size: var(--text-sm);
  }
  .nav__cta-short { display: none; }
  .nav__cta-full { display: inline; }
}

/* === MENU PLEIN ÉCRAN · Mobile === */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: rgba(250, 247, 242, .88);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
@supports not (backdrop-filter: blur(1px)) {
  .menu-panel { background: var(--paper); }
}
.menu-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility 0s;
}

.menu-panel__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-6);
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.menu-panel__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.menu-panel__links a {
  display: block;
  padding: var(--s-3) 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-4xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Staggered mask reveal — état initial */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-slow) var(--ease-fluid),
              transform var(--dur-slow) var(--ease-fluid),
              color var(--dur-fast) var(--ease-out);
}
.menu-panel__links a:hover { color: var(--red-deep); }

/* Reveal staggered — delays progressifs */
.menu-panel[data-open="true"] .menu-panel__links li:nth-child(1) a { opacity: 1; transform: none; transition-delay: 100ms; }
.menu-panel[data-open="true"] .menu-panel__links li:nth-child(2) a { opacity: 1; transform: none; transition-delay: 150ms; }
.menu-panel[data-open="true"] .menu-panel__links li:nth-child(3) a { opacity: 1; transform: none; transition-delay: 200ms; }
.menu-panel[data-open="true"] .menu-panel__links li:nth-child(4) a { opacity: 1; transform: none; transition-delay: 250ms; }

.menu-panel__cta {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-fluid),
              transform var(--dur-slow) var(--ease-fluid);
}
.menu-panel[data-open="true"] .menu-panel__cta {
  opacity: 1;
  transform: none;
  transition-delay: 320ms;
}

.menu-panel__foot {
  font-size: var(--text-sm);
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-fluid);
}
.menu-panel[data-open="true"] .menu-panel__foot {
  opacity: 1;
  transition-delay: 400ms;
}

/* Desktop : le menu plein écran n'existe pas */
@media (min-width: 1024px) {
  .menu-panel { display: none; }
}

/* === REDUCED MOTION — tiering ===
   Tier 1 (mouvement large) : supprimé.
   Tier 2 (transitions) : raccourci, préservé en fade.
   Tier 3 (opacity, focus) : conservé.
   ==================================== */
@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav--scrolled,
  .btn,
  .nav__burger,
  .menu-panel {
    transition-duration: 1ms !important;
  }
  .nav__burger span {
    transition: transform 150ms var(--ease-out),
                opacity 150ms var(--ease-out);
  }
  .menu-panel__links a,
  .menu-panel__cta,
  .menu-panel__foot {
    transform: none !important;
    transition: opacity 150ms var(--ease-out) !important;
    transition-delay: 0ms !important;
  }
}