/* ==========================================================================
   LAYOUT — gabarit de page, navigation, menu mobile, footer
   Ces blocs sont identiques sur toutes les pages du site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gabarit de page
   Mobile  : pleine largeur, marges latérales de 16px portées par les sections.
   Desktop : conteneur de 1440px max, 120px de marge → 1200px de contenu.
   -------------------------------------------------------------------------- */
.page {
  position: relative; /* référence pour les cercles décoratifs */
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* La maquette desktop applique 120px de marge sur les quatre côtés du cadre ;
   la maquette mobile n'a aucune marge haute, la barre de nav touche le bord. */
@media (min-width: 900px) {
  .page {
    padding-block: var(--page-pad);
  }
}

/* Bloc de contenu standard : occupe toute la largeur disponible. */
.section {
  width: 100%;
}

/* Rythme vertical entre les grandes sections (95px mobile / 120px desktop). */
.section--spaced {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-m);
}

@media (min-width: 900px) {
  .section--spaced {
    padding-top: var(--space-4xl);
  }
}

/* --------------------------------------------------------------------------
   Cercles décoratifs
   Purement ornementaux : retirés de l'arbre d'accessibilité et insensibles
   au pointeur.

   Le calque s'étend sur toute la largeur de la fenêtre — et non sur celle du
   conteneur — pour que les cercles restent ancrés au bord droit de l'écran
   au-delà de 1440px. Son `overflow: hidden` rogne le débordement sans
   provoquer de défilement horizontal, et sans englober la nav collante.
   -------------------------------------------------------------------------- */
.decor-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.decor {
  position: absolute;
}

.decor img {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */

/* Sentinelle invisible : sa sortie du champ signale à nav.js que la barre
   est passée en position collée (voir .site-nav.is-stuck). */
.nav-sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (min-width: 900px) {
  .site-nav {
    /* Reste une pilule flottante, légèrement décollée du haut de l'écran. */
    top: var(--space-m);
  }
}

/* --- La pilule ---------------------------------------------------------- */
.nav-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  /* En mobile, les 16px latéraux de la maquette sont déjà portés par .page :
     la barre ne garde que son padding vertical, sinon on doublerait la marge. */
  padding: var(--space-s) 0;
  /* La barre mobile n'a ni fond ni effet dans Figma — elle reste transparente
     jusqu'à ce que du contenu passe dessous (état collé plus bas). */
  background-color: transparent;
  border-radius: var(--radius-pill);
  transition: background-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* --- Pilule de verre (desktop) ------------------------------------------- */
/* La maquette desktop applique un effet Figma `GLASS` : blur 4, refraction 0.8,
   depth 20, lumière à -45°, intensité 0.8, dispersion 0.5. Aucune primitive CSS
   ne reproduit ce shader, mais son rendu est mesurable — relevé pixel par pixel
   sur l'export Figma :

     · aucune ombre à l'extérieur de la pilule (blanc pur sur les 4 côtés) ;
     · un liseré interne sur les bords HAUT et GAUCHE uniquement (la lumière
       vient de -45°), large d'environ 15px ;
     · profil depuis le bord : 254 · 249 · 250 · 250 · 251 · 251 · 251 · 252 …
       soit un maximum de 2.4% de noir, atteint à 1px du bord.

   D'où les deux ombres internes décalées vers le bas-droite ci-dessous, qui
   ombrent le haut et la gauche.

   S'y ajoute une ombre portée permanente — demandée explicitement, et absente
   de Figma — pour que la pilule ressorte davantage du fond blanc. */
@media (min-width: 900px) {
  .nav-bar {
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow:
      inset 1px 1px 0 rgba(0, 0, 0, 0.02),
      inset 4px 4px 14px rgba(0, 0, 0, 0.022),
      0 4px 24px rgba(0, 0, 0, 0.06);
  }
}

/* --- État collé : « liquid glass » -------------------------------------- */
/* L'opacité passe à 70% pour garantir la lisibilité du texte noir par-dessus
   le contenu qui défile — un blanc à 10% ne permet aucune garantie de
   contraste. Repli en blanc quasi opaque si backdrop-filter n'est pas géré. */
/* Seul le fond change au scroll : il s'opacifie pour garder le texte lisible
   par-dessus le contenu qui défile. Liseré et ombre portée sont déjà permanents
   en desktop, il n'y a donc rien à y ajouter ici. */
.site-nav.is-stuck .nav-bar {
  background-color: rgba(255, 255, 255, 0.92);
}

/* En mobile la barre est transparente au repos : elle ne reçoit son ombre
   qu'une fois collée, quand du contenu passe effectivement dessous. */
@media (max-width: 899px) {
  .site-nav.is-stuck .nav-bar {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-nav.is-stuck .nav-bar {
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

/* --- Logo --------------------------------------------------------------- */
.nav-logo {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--fs-logo);
  font-weight: 700;
  line-height: 32px;
  color: var(--violet-600);
  text-decoration: none;
  white-space: nowrap;
}

/* --- Liens desktop ------------------------------------------------------ */
.nav-links {
  display: none; /* remplacés par le burger en mobile */
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }

  .nav-links a {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--dark);
    text-decoration: none;
  }

  /* Page courante : passage en gras, comme dans la maquette desktop. */
  .nav-links a[aria-current='page'] {
    font-weight: 700;
  }

  .nav-links a:hover {
    color: var(--violet-700);
  }
}

/* --- Indicateur de page courante (mobile) ------------------------------- */
/* Maquette : #A78BFA — remplacé par #7C3AED (Violet600), qui atteint 5.72:1
   contre 2.74:1, sous le seuil WCAG AA de 4.5:1. */
.nav-current {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--violet-600);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .nav-current {
    display: none;
  }
}

/* --- Bouton « Let's talk » ---------------------------------------------- */
/* Sélecteur à deux classes : il doit l'emporter sur `.btn { display: inline-flex }`,
   déclaré plus bas dans ce fichier et donc prioritaire à spécificité égale. */
.nav-bar .nav-cta {
  display: none;
}

@media (min-width: 900px) {
  .nav-bar .nav-cta {
    display: inline-flex;
  }
}

/* --- Bouton burger ------------------------------------------------------ */
/* Icône de 24px, mais zone tappable portée à 44px via le padding, avec une
   marge négative pour que l'icône reste alignée comme dans la maquette. */
.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin: calc((var(--tap-min) - 24px) / -2);
  flex-shrink: 0;
}

.nav-burger img {
  width: 18px;
  height: 13.5px;
}

@media (min-width: 900px) {
  .nav-burger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   MENU MOBILE (overlay)
   Panneau blanc qui descend du haut, sur un voile sombre à 25%.
   -------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  /* Non affiché tant que le menu est fermé : le retire du parcours clavier. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-out, visibility 0s;
}

/* Voile sombre à 25%, valeur de la maquette. */
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
}

/* Panneau : entre par le haut (« move in », ease-out). */
.mobile-menu__panel {
  position: relative;
  background-color: var(--white);
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateY(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s);
}

.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin: calc((var(--tap-min) - 24px) / -2);
}

.mobile-menu__close img {
  width: 15px;
  height: 15px;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-s) var(--space-s);
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__list a {
  display: block;
  width: 100%;
  /* 16 + 24 + 16 = 56px de haut : au-delà des 44px requis. */
  padding: var(--space-s) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--dark);
  text-decoration: none;
}

/* Dernier lien avant le bouton : respiration de 32px, comme dans la maquette. */
.mobile-menu__list li:last-child a {
  padding-bottom: var(--space-l);
}

.mobile-menu__cta {
  width: 100%;
}

/* --------------------------------------------------------------------------
   BOUTONS — composants réutilisés sur toutes les pages
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-s);
  min-height: var(--tap-min);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}

/* Bouton principal : violet plein, texte blanc (7.14:1, AA ✓). */
.btn--primary {
  background-color: var(--violet-700);
  color: var(--white);
}

.btn--primary:hover {
  background-color: #5b21b6; /* Violet800 — assombrissement au survol */
}

/* Bouton secondaire : fond crème, texte violet (6.90:1, AA ✓). */
.btn--secondary {
  background-color: var(--yellow-50);
  color: var(--violet-700);
}

.btn--secondary:hover {
  background-color: var(--yellow-100);
}

/* Variante horizontale plus large, utilisée dans la nav et sur le bouton
   e-mail en desktop (24px de padding latéral au lieu de 16px).
   En mobile la maquette conserve 16px partout : la variante n'y agit pas. */
@media (min-width: 900px) {
  .btn--wide {
    padding-inline: var(--space-m);
  }
}

/* Pleine largeur : comportement mobile de tous les boutons de contenu. */
.btn--block {
  display: flex;
  width: 100%;
}

@media (min-width: 900px) {
  .btn--block {
    display: inline-flex;
    width: auto;
  }
}

.btn__icon {
  width: 18px;
  height: 16.125px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FOOTER — identique sur toutes les pages
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: var(--space-2xl);
  padding-bottom: 10px;
  text-align: center;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--gray-500);
}

/* Mobile : copyright et lien sur deux lignes, comme dans la maquette. */
.site-footer__line {
  display: block;
}

@media (min-width: 900px) {
  .site-footer__line {
    display: inline;
  }
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}

/* Sur la page Privacy Policy elle-même, le lien devient du texte simple —
   comme dans la maquette — mais garde son apparence. */
.site-footer__current {
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--violet-700);
}