/* ==================================================================
   Alta FA
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dark: #050b1c;
  --darker: #0d1730;
  --darker-50: rgba(20, 38, 78, .5);
  --darker-80: rgba(28, 52, 104, .8);
  --light-dark: rgba(2, 6, 20, .4);
  --light-darke: rgba(2, 6, 20, .8);
  --light-darke-60: rgba(2, 6, 20, .6);
  --dard-darker: rgba(3, 8, 24, .985);

  --blue: #1a6cf0;
  --blue-soft: #3f8dff;

  --white: #fff;
  --white-50: hsla(0, 0%, 100%, .5);
  --white-0: hsla(0, 0%, 100%, 0);
}

html {
  background: var(--dark);
  font-size: 10px;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;

  /* Le voile décoratif du hero déborde volontairement sur les côtés.
     "clip" le rogne sans créer de conteneur de défilement : pas de
     barre horizontale, et la barre de navigation collante continue
     de fonctionner — ce que "hidden" casserait. */
  overflow-x: clip;
}

body {
  color: var(--white);
  font-family: Poppins, sans-serif;
  font-size: 1.6rem;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; display: inline-block; position: relative; text-decoration: none; }
ul, li { list-style: none; }
li { margin: .5em; }
p { line-height: 2; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background-color: var(--blue); border-radius: 3px; }
::-webkit-scrollbar-track { background-color: var(--light-dark); }

/* ---------------- Arrière-plan ---------------- */

.background-image {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: 0;

  /* Visible par défaut. L'animation n'est qu'un enrobage : surtout pas
     de fill-mode "both" ici — sinon l'image reste figée à l'état
     initial (opacity 0) dès que l'animation ne démarre pas : onglet en
     arrière-plan, rendu bridé par le navigateur, retour via bfcache… */
  opacity: 1;
  animation: bg-in 1.2s ease;
}

.background-veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 0%, rgba(2, 6, 20, .45) 100%),
    linear-gradient(180deg, rgba(2, 6, 20, .65) 0%, transparent 30%, transparent 62%, rgba(2, 6, 20, .75) 100%);
  pointer-events: none;
}

@keyframes bg-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }

.section { position: relative; z-index: 1; }

/* ---------------- Header / navigation ---------------- */

/* Barre collante plutôt que fixe : en « fixed », l'en-tête sortait du
   flux au premier défilement et la page perdait sa hauteur d'un coup
   (≈112 px). Le bas devenait difficile, voire impossible, à atteindre
   sur les pages à peine plus hautes que l'écran. En « sticky »
   l'élément reste dans le flux : la hauteur ne bouge plus. */
.navigation {
  position: sticky;
  top: 0;
  z-index: 999;
}

header {
  align-items: center;
  display: flex;
  font-size: 1em;
  justify-content: space-between;
  margin-bottom: 3vh;
  padding: .5% 2%;
  position: relative;
  transition: background .5s, backdrop-filter .5s;
  width: 100%;
  z-index: 999;
}

header.scrolled {
  /* Assez opaque pour que le contenu qui défile dessous ne se lise
     plus à travers la barre. */
  background: rgba(3, 8, 24, .93);
  backdrop-filter: blur(12px);
}

header img.logo {
  height: 6.5rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
  transition: transform .3s;
}
.logo-link:hover img.logo { transform: scale(1.05); }

.nav { display: flex; align-items: center; }

.menu { align-items: center; display: flex; }

.menu a {
  color: var(--white-50);
  padding: 1rem 2rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: color .3s;
}
.menu a:hover, .menu a.active { color: var(--white); }

.menu a:not(.logo-link):not(.rs2)::after {
  background: var(--blue);
  border-radius: 5vh;
  bottom: .5rem;
  content: "";
  height: 3px;
  left: 2rem;
  position: absolute;
  right: 2rem;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease-in-out;
}
.menu a:not(.logo-link):not(.rs2):hover::after,
.menu a.active:not(.logo-link)::after { transform: scaleX(1); }

/* Réseaux */
.menu .rs3 { display: flex; gap: 3%; justify-content: center; }
.menu .rs3 .rs2 { margin-left: .6vw; padding: 0; }

.menu .back {
  align-items: center;
  background: var(--darker-50);
  border-radius: 150px;
  cursor: pointer;
  display: flex;
  height: 4.5vh;
  justify-content: center;
  width: 4.5vh;
  transition: background .3s, transform .3s;
}
.menu .back:hover { background: var(--darker-80); transform: translateY(-2px); }
.menu .back .rs { height: 2vh; width: 2vh; }

/* Burger */
#toggle-menu, #toggle-menu + label { cursor: pointer; display: none; }
#toggle-menu + label { height: 1.5em; margin: 2em; position: relative; width: 2em; }
#toggle-menu + label span,
#toggle-menu + label span:nth-child(2)::after {
  background: #fff; border-radius: 5vh; display: inline-block; height: 3px;
  left: 0; position: absolute; right: 0;
  transition: transform .2s, left .2s, right .2s;
}
#toggle-menu + label span:first-child { left: 50%; top: 0; }
#toggle-menu + label span:nth-child(2),
#toggle-menu + label span:nth-child(2)::after { content: ""; top: 50%; transform: translateY(-50%); }
#toggle-menu + label span:last-child { bottom: 0; right: 50%; }
#toggle-menu:checked + label span:first-child { left: 100%; }
#toggle-menu:checked + label span:nth-child(2) { transform: translateY(-50%) rotate(45deg); }
#toggle-menu:checked + label span:nth-child(2)::after { transform: translateY(-50%) rotate(-90deg); }
#toggle-menu:checked + label span:last-child { right: 100%; }

/* ---------------- Hero ---------------- */

.table {
  margin-top: 40vh;
  position: relative;
  text-align: center;
  transform: translateY(-40%);
  z-index: 2;
}

.table .titre {
  font-size: 3em;
  font-weight: 600;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}

.table .description {
  color: #fff;
  font-size: 4em;
  font-weight: 800;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
}

.table .bouton { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1em; }

.tilty { transform: perspective(1000px); transform-style: preserve-3d; transition: transform .2s ease-out; }
.tilty a { transform-style: preserve-3d; }
.tilty p { transform: translateZ(20px); }

.table .bouton-notif {
  background: var(--light-dark);
  backdrop-filter: blur(6px);
  border: 1px solid hsla(0, 0%, 100%, .12);
  border-radius: .5rem;
  box-shadow: 0 20px 25px -5px rgba(2, 2, 2, .35);
  color: var(--white);
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: 600;
  justify-content: center;
  margin-top: 1vw;
  padding: 8px 50px;
  text-align: center;
  transition: background .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s;
}
.table .bouton-notif:hover {
  background: var(--blue);
  border-color: var(--blue-soft);
  box-shadow: 0 24px 40px -10px rgba(26, 108, 240, .55);
}

/* ---------------- Footer ---------------- */

.ava-footer {
  align-items: center;
  bottom: 0;
  color: hsla(0, 0%, 100%, .55);
  display: flex;
  font-family: "Space Grotesk", sans-serif;
  font-size: .75rem;
  gap: 1rem;
  justify-content: space-between;
  left: 0;
  letter-spacing: .15em;
  padding: 1rem 1.5rem;
  position: fixed;
  width: 100%;
  z-index: 2;
}
.ava-footer a { color: hsla(0, 0%, 100%, .75); transition: color .3s; }
.ava-footer a:hover { color: var(--white); }

/* ---------------- Animations d'apparition ---------------- */

.appear-d1 { animation: appear-d1 .5s cubic-bezier(.5, 0, .73, 1); }
.appear-d2 { animation: appear-d2 .7s cubic-bezier(.5, 0, .73, 1); }
.appear-d3 { animation: appear-d2 .9s cubic-bezier(.5, 0, .73, 1); }

@keyframes appear-d1 {
  0%, 15% { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes appear-d2 {
  0%, 30% { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------- Responsive ---------------- */

@media screen and (max-width: 1000px) {
  .rs3 { display: flex; gap: 3%; justify-content: center; padding: 1rem 0; width: 100%; }
  .table { max-width: 100%; padding: 10px; }
  .table .titre { font-size: 2em; font-weight: 600; }
  .table .description { font-size: 2.5em; font-weight: 800; margin: auto; }
  .table .bouton-notif { font-size: 20px; padding: 10px 40px; }
  .rs, .rs2 { height: 4vh; width: 4vh; }
  .rs2 { margin-right: 0; }
}

@media screen and (max-width: 862px) {
  #toggle-menu + label { display: inline-block; z-index: 999; }

  .menu {
    background: linear-gradient(160deg, #04091c 0%, #071431 55%, #03081a 100%);
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-size: 22px;
    height: 100vh;
    justify-content: center;
    margin-right: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform .7s;
    width: 100vw;
  }
  #toggle-menu:checked ~ .menu { transform: translateX(0); }

  .menu a:not(.logo-link):not(.rs2)::after { left: 25%; right: 25%; }

  .menu .back { height: 6vh; width: 6vh; }
  .menu .back .rs { height: 2.6vh; width: 2.6vh; }

  .logo { height: 7rem; margin-left: 6vw; }
  .ava-footer { flex-direction: column; gap: .4rem; text-align: center; }
}

@media screen and (max-width: 425px) {
  html { font-size: 8px; }
}

/* ==================================================================
   Sous-menu "Boutique"
   ================================================================== */

.menu .has-sub { margin: 0; position: relative; }
.menu .has-sub > a { padding: 1rem 2rem; display: inline-block; }
.menu .has-sub > a > span { text-transform: uppercase; }

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 20rem;
  padding: .6rem;
  background: rgba(4, 10, 28, .92);
  backdrop-filter: blur(14px);
  border: 1px solid hsla(0, 0%, 100%, .1);
  border-radius: .8rem;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 50;
}
.menu .has-sub:hover .submenu,
.menu .has-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: 1rem 1.4rem;
  border-radius: .5rem;
  font-size: 1.4rem;
  letter-spacing: .04em;
  transition: background .2s, color .2s;
}
.submenu a::after { display: none; }
.submenu a:hover { background: hsla(0, 0%, 100%, .07); color: var(--white); }

/* Panier dans la barre de nav */
.cart-button { border: none; position: relative; padding: 0; }
.cart-badge {
  position: absolute;
  top: -.4rem;
  right: -.4rem;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.9rem;
  text-align: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
}
.cart-badge.visible { opacity: 1; transform: scale(1); }

body.no-scroll { overflow: hidden; }

/* Pages internes : fond fixe, contenu scrollable */
.page-shop .background-image-fixed { position: fixed; }
.page-shop .ava-footer { position: static; }

@media screen and (max-width: 862px) {
  .menu .has-sub { width: 100%; text-align: center; }

  /* Le sous-menu est masqué dès qu'on passe au menu burger : une seule
     entrée « Boutique », qui mène directement aux abonnements. */
  .submenu { display: none; }
}

/* ==================================================================
   Accueil — voile local derrière le hero

   L'arrière-plan comporte un personnage aux zones claires (t-shirt) :
   sans ce dégradé, le texte blanc devient illisible par endroits.
   ================================================================== */

.page-home .table { isolation: isolate; }

.page-home .table::before {
  content: "";
  position: absolute;
  inset: -14rem -10vw;
  z-index: -1;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(2, 6, 20, .82) 0%,
    rgba(2, 6, 20, .62) 40%,
    rgba(2, 6, 20, .28) 68%,
    transparent 100%
  );
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Accueil : l'arrière-plan est une illustration, pas une texture.
   On supprime l'assombrissement global (conservé sur la boutique, où
   il fait ressortir les cartes) et on ne garde que deux dégradés
   discrets en haut et en bas, pour le header et le footer.
------------------------------------------------------------------ */

.page-home .background-veil {
  background:
    linear-gradient(180deg, rgba(2, 6, 20, .55) 0%, transparent 18%),
    linear-gradient(0deg,   rgba(2, 6, 20, .60) 0%, transparent 16%);
}

/* Voile resserré derrière le texte : juste ce qu'il faut pour la
   lisibilité, sans manger l'illustration. */
.page-home .table::before {
  inset: -10rem -6vw;
  background: radial-gradient(
    46% 48% at 50% 50%,
    rgba(2, 6, 20, .74) 0%,
    rgba(2, 6, 20, .46) 46%,
    transparent 100%
  );
}

/* Tablettes tactiles plus larges que le point de bascule du burger :
   le survol n'existe pas sur ces appareils, un sous-menu au hover y est
   inutilisable. On le masque aussi. */
@media (hover: none) and (pointer: coarse) {
  .menu .submenu { display: none; }
}

/* ------------------------------------------------------------------
   Emplacement réservé du panier

   Le bouton panier n'existe que sur les pages de la boutique. Sans
   cet espace réservé, la barre de navigation serait plus courte
   ailleurs et tous les liens se décaleraient d'une page à l'autre.

   En mobile le menu est une colonne centrée : les icônes se recentrent
   d'elles-mêmes, l'emplacement n'a plus lieu d'être.
------------------------------------------------------------------ */

.menu .cart-slot {
  visibility: hidden;
  pointer-events: none;
  background: none;
}

@media screen and (max-width: 862px) {
  .menu .cart-slot { display: none; }
}