/* ==========================================================================
   Alive — socle du site vitrine
   Noir profond, blanc cassé, un seul détail coloré : le dégradé du logo.
   Le dégradé ne touche jamais le texte courant.
    ========================================================================== */

/* ---------- 1. Police : Galano Grotesque Alt ---------- */
@font-face {
  font-family: 'Galano';
  src: url('../fonts/Galano-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Galano';
  src: url('../fonts/Galano-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Galano';
  src: url('../fonts/Galano-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Galano';
  src: url('../fonts/Galano-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Galano';
  src: url('../fonts/Galano-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Galano';
  src: url('../fonts/Galano-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Galano';
  src: url('../fonts/Galano-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- 2. Jetons ---------- */
:root {
  /* Fonds — presque noirs, très peu d'écart entre les niveaux */
  --noir:        #060608;
  --noir-2:      #0B0B0E;
  --noir-3:      #101014;
  --noir-4:      #17171C;

  /* Traits — rares et discrets */
  --trait:       rgba(255, 255, 255, .07);
  --trait-fort:  rgba(255, 255, 255, .2);

  /* Texte */
  --blanc:       #F1F0ED;
  --gris:        #94949E;
  --gris-bas:    #63636D;

  /* Détail coloré — dégradé « Color 3 » du logo : indigo vers orange */
  --g1: #4F4FC4;
  --g2: #9A6BA8;
  --g3: #F59B3C;

  --degrade:     linear-gradient(118deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);

  /* Mesures — angles nets, pas de grands rayons */
  --page:        1280px;
  --gouttiere:   clamp(20px, 4vw, 44px);
  --r:           3px;
  --r-l:         4px;

  /* Courbes */
  --sortie:      cubic-bezier(.22, 1, .36, 1);
  --doux:        cubic-bezier(.4, 0, .2, 1);

  color-scheme: dark;
}

/* Thème clair : on inverse les jetons, tous les composants suivent.
   Posé sur une section (ou sur la barre de navigation quand elle survole une section claire). */
.theme-clair, .nav.clair, .menu-mobile.clair {
  --noir:       #F2F1EE;
  --noir-2:     #FFFFFF;
  --noir-3:     #E9E8E4;
  --noir-4:     #DDDCD7;
  --blanc:      #0B0B0E;
  --gris:       #50505A;
  --gris-bas:   #86868F;
  --trait:      rgba(0, 0, 0, .09);
  --trait-fort: rgba(0, 0, 0, .24);
  color: var(--blanc);
}
.theme-clair ::selection { color: #fff; }


/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: 'Galano', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--g3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--g1);
  outline-offset: 3px;
}

/* ---------- 4. Typographie ---------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.t-geant {
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.05em;
}
.t-grand {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.042em;
}
.t-moyen {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  letter-spacing: -.038em;
  line-height: 1.03;
}
.t-petit {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  letter-spacing: -.025em;
  line-height: 1.18;
  font-weight: 700;
}

p { margin: 0; }
.p-large {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--gris);
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.p-gris { color: var(--gris); text-wrap: pretty; }
.p-mini { font-size: .88rem; line-height: 1.45; color: var(--gris-bas); }

/* Chiffres et références techniques — jamais en surtitre de section */
.tech {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  font-weight: 400;
  color: var(--gris-bas);
  font-variant-numeric: tabular-nums;
}

.blanc-vif { color: #fff; }

/* ---------- 5. Mise en page ---------- */
.page {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.page--large { max-width: 1520px; }

.section { padding-block: clamp(84px, 11vw, 160px); position: relative; }
.section--serre { padding-block: clamp(52px, 6vw, 88px); }

.filet { height: 1px; background: var(--trait); border: 0; margin: 0; }

.grille { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 6. Lueurs de fond ---------- */
.lueur {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.lueur--a { background: var(--g1); }
.lueur--b { background: var(--g3); }
.lueur--c { background: var(--g2); }

/* ---------- 7. Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  height: 68px;
  transition: background .5s var(--doux), border-color .5s var(--doux),
              transform .5s var(--sortie), opacity .4s;
  border-bottom: 1px solid transparent;
}
.nav.est-posee {
  background: color-mix(in srgb, var(--noir) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--trait);
}
.nav.cachee { transform: translateY(-100%); opacity: 0; }

.nav__int {
  position: relative;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  gap: 40px;
}

.marque { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marque__icone { width: 24px; height: 24px; color: var(--blanc); transition: color .5s; }
.marque__mot   { height: 16px; width: auto; color: var(--blanc); }
.marque:hover .marque__icone { color: var(--g1); }

/* Les raccourcis de section, centrés sur la page (et non entre le logo et les boutons) */
.nav__liens {
  display: flex; align-items: center; gap: 26px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav__actions { margin-left: auto; }
/* sur un écran moyen, pas la place de centrer : les liens se glissent entre les deux */
@media (max-width: 1240px) {
  .nav__liens { position: static; transform: none; margin-inline: auto; }
}
.nav__lien {
  position: relative;
  padding: 4px 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--gris);
  transition: color .3s var(--doux);
}
.nav__lien:hover, .nav__lien[aria-current='page'] { color: var(--blanc); }
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--degrade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--sortie);
}
.nav__lien:hover::after,
.nav__lien[aria-current='page']::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.burger {
  display: none;
  width: 38px; height: 38px;
  background: none; border: 0; padding: 0; cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 9px; width: 20px; height: 1.5px;
  background: var(--blanc);
  transition: transform .45s var(--sortie);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger.ouvert span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--noir);
  padding: 96px var(--gouttiere) 40px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--doux), visibility .35s;
}
.menu-mobile.ouvert { opacity: 1; visibility: visible; }
.menu-mobile a {
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.045em;
  padding: 16px 0;
  border-bottom: 1px solid var(--trait);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--sortie), transform .5s var(--sortie);
}
.menu-mobile.ouvert a { opacity: 1; transform: none; }
.menu-mobile.ouvert a:nth-child(1) { transition-delay: .05s; }
.menu-mobile.ouvert a:nth-child(2) { transition-delay: .1s; }
.menu-mobile.ouvert a:nth-child(3) { transition-delay: .15s; }
.menu-mobile.ouvert a:nth-child(4) { transition-delay: .2s; }
.menu-mobile .btn { margin-top: 32px; justify-content: center; }

/* ---------- 8. Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.008em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .35s var(--sortie), border-color .35s, background .35s, color .35s;
  background: none;
}
.btn:active { transform: translateY(1px); }

.btn--plein { background: var(--blanc); color: var(--noir); }
.btn--plein::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--degrade);
  transform: translateY(101%);
  transition: transform .5s var(--sortie);
}
.btn--plein:hover { color: #fff; }
.btn--plein:hover::before { transform: none; }
.btn--plein > * { position: relative; z-index: 1; }

.btn--trait { border-color: var(--trait-fort); color: var(--blanc); }
.btn--trait:hover { border-color: var(--blanc); }

.btn--nu { padding-inline: 0; color: var(--gris); }
.btn--nu:hover { color: var(--blanc); }

.btn--grand { padding: 17px 30px; font-size: .98rem; }

.btn .fleche { transition: transform .4s var(--sortie); }
.btn:hover .fleche { transform: translateX(4px); }

/* Lien souligné qui s'allume */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--blanc);
  padding-bottom: 4px;
  position: relative;
  transition: gap .35s var(--sortie);
}
.lien-fleche::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--trait-fort);
}
.lien-fleche::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--degrade);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--sortie);
  z-index: 1;
}
.lien-fleche:hover { gap: 13px; }
.lien-fleche:hover::before { transform: scaleX(1); }

/* ---------- 9. Icônes ---------- */
.ico {
  width: 20px; height: 20px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

/* ---------- 10. Révélations ---------- */
.rev {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--sortie), transform .9s var(--sortie);
}
.rev.vu { opacity: 1; transform: none; }

.ligne-masque { display: block; overflow: hidden; padding-bottom: .05em; }
.ligne-masque > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1.1s var(--sortie);
}
.ligne-masque.vu > span { transform: none; }

.rev-suite > * { opacity: 0; transform: translateY(18px); }
.rev-suite.vu > * {
  opacity: 1; transform: none;
  transition: opacity .8s var(--sortie), transform .8s var(--sortie);
}
.rev-suite.vu > *:nth-child(1) { transition-delay: .03s; }
.rev-suite.vu > *:nth-child(2) { transition-delay: .1s; }
.rev-suite.vu > *:nth-child(3) { transition-delay: .17s; }
.rev-suite.vu > *:nth-child(4) { transition-delay: .24s; }
.rev-suite.vu > *:nth-child(5) { transition-delay: .31s; }

/* ---------- 11. Pied de page ---------- */
.pied {
  border-top: 1px solid var(--trait);
  padding-block: 72px 32px;
  position: relative;
  overflow: hidden;
}
.pied__haut {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, .75fr));
  gap: 40px;
  padding-bottom: 60px;
}
.pied__col h4 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--gris-bas);
  margin-bottom: 16px;
}
.pied__col a {
  display: block;
  padding: 5px 0;
  color: var(--gris);
  font-size: .95rem;
  transition: color .3s;
}
.pied__col a:hover { color: var(--blanc); }
.pied__bas {
  border-top: 1px solid var(--trait);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pied__filigrane {
  width: 100%;
  margin-top: 44px;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
}

/* ---------- 13. Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rev, .rev-suite > * { opacity: 1 !important; transform: none !important; }
  .ligne-masque > span { transform: none !important; }
}

/* ---------- 14. Points de rupture ---------- */
@media (max-width: 980px) {
  .nav__liens { display: none; }
  .nav__actions .btn--trait { display: none; }
  .burger { display: block; }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__haut { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 620px) {
  .nav__actions .btn--plein { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; }
  .pied__bas { flex-direction: column; align-items: flex-start; }
}