/* =========================================================================
   he-v2.css — Thème commun HETERACTIS v2 (extrait du <style> de heteractis-v2)
   Police Inter chargée EN LOCAL (zéro CDN) via @import (assets/fonts/inter.css).
   Charge avec Tailwind (runtime local) déclaré dans header.php.
   ========================================================================= */

@import url('../fonts/inter.css');

/* =========================================================================
   SKIP-LINK — Lien d'évitement (RGAA / WCAG 2.1)
   Invisible par défaut, visible au focus clavier. Permet de sauter
   directement au contenu principal, sans traverser la navigation.
   ========================================================================= */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: inline-block;
  padding: 8px 16px;
  background-color: #15213f;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 4px 0;
  transform: translateY(-110%);
  transition: transform 0.2s ease-out;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #f9962c;
  outline-offset: 2px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #F7F7F7; color: #15213f; -webkit-font-smoothing: antialiased; }

.display { letter-spacing: -0.04em; line-height: 0.98; }
.tight   { letter-spacing: -0.03em; }

/* Liquid glass */
.liquid-glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)),
    linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.18));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 40px rgba(0,0,0,0.18);
}
/* Glass clair pour les sections claires */
.glass-light {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(61,82,151,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 18px 50px -24px rgba(21,33,63,0.35);
}

.hero-bg {
  background:
    linear-gradient(180deg, rgba(21,33,63,0.55) 0%, rgba(21,33,63,0.35) 35%, rgba(21,33,63,0.78) 100%),
    url('../images/agence-web-digitale.webp') center / cover no-repeat;
}

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* Hero letters */
.h-word { display: inline-block; }
.h-letter { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(4deg); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.h-letter.in { opacity: 1; transform: none; }

.logo-white { filter: brightness(0) invert(1); }

.cta-grad { background: linear-gradient(120deg, #3d5297 0%, #4b62ad 60%, #28304f 100%); }

.nav-scrolled { background: rgba(20,26,52,0.90); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 6px 24px rgba(0,0,0,0.18); }
.nav-scrolled .nav-link { color: #fff; }
.nav-scrolled .logo-img { filter: brightness(0) invert(1); }
.nav-scrolled .nav-cta { background:#f9962c; color:#fff; }
.nav-scrolled .nav-row { height: 3.75rem; }    /* menu plus compact au scroll */

/* Menu mobile déroulant animé */
#mobileMenu { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1); }
#mobileMenu.open { max-height: 520px; }
#mobileMenu .mm-item { opacity: 0; transform: translateX(-14px); transition: opacity .4s ease, transform .4s ease; }
#mobileMenu.open .mm-item { opacity: 1; transform: none; }
#mobileMenu.open .mm-item:nth-child(1){transition-delay:.06s} #mobileMenu.open .mm-item:nth-child(2){transition-delay:.12s}
#mobileMenu.open .mm-item:nth-child(3){transition-delay:.18s} #mobileMenu.open .mm-item:nth-child(4){transition-delay:.24s}
#mobileMenu.open .mm-item:nth-child(5){transition-delay:.30s} #mobileMenu.open .mm-item:nth-child(6){transition-delay:.36s}
#mobileMenu.open .mm-item:nth-child(7){transition-delay:.42s}
#burger svg { transition: transform .3s ease; } #burger.is-open svg { transform: rotate(90deg); }

.underline-link { position: relative; }
.underline-link::after { content:''; position:absolute; left:0; bottom:-4px; height:1.5px; width:0; background: currentColor; transition: width .35s ease; }
.underline-link:hover::after { width:100%; }

::selection { background: #4b62ad; color:#fff; }

/* scroll cue */
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
.floaty { animation: floaty 2.4s ease-in-out infinite; }

/* Témoignages vidéo (lite-youtube) */
lite-youtube { width:100%; max-width:100%; aspect-ratio:16/9; border-radius:1.25rem 1.25rem 0 0; overflow:hidden; }

/* =========================================================================
   FOCUS VISIBLE — Accessibilité (WCAG 2.1 niveau AA)
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f9962c;
  outline-offset: 2px;
}

/* =========================================================================
   PREFERS-REDUCED-MOTION — Respecte les préférences utilisateur
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .h-letter,
  .floaty {
    animation: none !important;
    transition: none !important;
  }
  .skip-link {
    transition: none;
  }
  #mobileMenu {
    transition: none;
  }
  #mobileMenu .mm-item {
    transition: none;
  }
  #burger svg {
    transition: none;
  }
  .underline-link::after {
    transition: none;
  }
}