/* ==========================================================================
   Endogeni — styles communs
   Typographie, verre, orbes, boutons, cartes, grille, en-tête, pied de page,
   animations et prise en charge de prefers-reduced-motion.
   ========================================================================== */

/* --- Remise à zéro ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-pearl);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(107, 75, 255, .18); }

:focus-visible {
  outline: 2px solid var(--c-violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Typographie -------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
  line-height: 1.12;
  margin: 0;
  color: var(--c-ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

p { margin: 0; }

.lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--c-ink-soft);
  font-weight: 300;
}

.muted { color: var(--c-ink-soft); }

.section-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--c-violet);
  line-height: 1;
}

/* Numéros en Michroma, texte irisé */
.num {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  line-height: 1;
}

/* --- Texte irisé animé --------------------------------------------------- */
.iri {
  background-image: var(--grad-iris);
  background-size: var(--grad-iris-size);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: iris-shift var(--dur-iris) linear infinite;
}

@keyframes iris-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --- Liseré irisé animé (bordure en dégradé) ----------------------------- */
.liseret { position: relative; }

.liseret::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background-image: var(--grad-liseret);
  background-size: var(--grad-liseret-size);
  animation: liseret-shift var(--dur-liseret) linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

@keyframes liseret-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --- Fond irisé animé ---------------------------------------------------- */
.iris-fill {
  background-image: var(--grad-iris);
  background-size: var(--grad-iris-size);
  animation: iris-shift var(--dur-iris) linear infinite;
  color: var(--c-white);
}

/* --- Matière « verre » --------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-color);
  box-shadow: var(--glass-shadow);
}

/* --- Orbes --------------------------------------------------------------- */
.orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: var(--grad-orb);
  filter: blur(80px);
  opacity: .6;
  animation: orb-spin var(--dur-orb) linear infinite;
  pointer-events: none;
  z-index: 0;
}

.orb--soft   { filter: blur(70px); opacity: .5; }
.orb--strong { filter: blur(90px); opacity: .75; }

.orb--slow { animation-duration: 26s; }
.orb--fast { animation-duration: 18s; }

@keyframes orb-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Grands orbes de fond de page */
.orb--page {
  position: absolute;
  z-index: 0;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}

/* --- Grille -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--page-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.section {
  position: relative;
  padding-block: 120px;
}

/* les ancres s'arrêtent sous la capsule flottante de l'en-tête */
section[id] { scroll-margin-top: calc(var(--header-inset-y) + var(--header-h) + 12px); }

/* Le contenu est découpé au niveau de <main> : les grands orbes de fond
   débordent librement d'une section à l'autre, sans défilement horizontal
   ni arête visible aux limites de section. */
main { overflow: clip; }

/* En-tête de section : titre à gauche, phrase à droite */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}

.section-head__aside {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.7;
  padding-bottom: 6px;
}

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.btn--iris {
  background-image: var(--grad-iris);
  background-size: var(--grad-iris-size);
  animation: iris-shift var(--dur-iris) linear infinite;
  color: var(--c-white);
  box-shadow: var(--shadow-violet);
}

.btn--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border-color);
  box-shadow: var(--glass-shadow);
  color: var(--c-ink);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -14px rgba(107, 75, 255, .55);
}

.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }

/* --- Cartes --------------------------------------------------------------- */
.card {
  position: relative;
  border-radius: var(--r-card);
  padding: 32px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-color);
  box-shadow: var(--glass-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 42px 70px -34px rgba(40, 50, 120, .45);
}

.card__title {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-size: 19px;
  line-height: 1.25;
  margin: 0;
}

.card__text {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.panel {
  position: relative;
  border-radius: var(--r-panel);
  padding: 56px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-color);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

/* --- Pastilles et puces ---------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.4;
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
}

.chip--iris {
  background-image: var(--grad-iris);
  background-size: var(--grad-iris-size);
  animation: iris-shift var(--dur-iris) linear infinite;
  color: var(--c-white);
}

/* ==========================================================================
   Logotype
   ========================================================================== */
.logotype {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.logotype__mark { width: 34px; height: 34px; overflow: visible; }

.logotype__text {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--c-ink);
  white-space: nowrap;
}

/* ==========================================================================
   En-tête — capsule en verre flottante
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--header-inset-y) var(--header-inset-x);
  /* L'en-tête arrive par fetch : sans hauteur réservée, il ne fait que ses
     marges au premier rendu puis pousse toute la page vers le bas quand le
     partial se pose. On réserve sa hauteur finale dès le premier pixel. */
  min-height: calc(var(--header-h) + var(--header-inset-y) * 2);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding-inline: 22px 12px;
  border-radius: var(--r-pill);
  max-width: calc(var(--page-max) + 96px);
  margin-inline: auto;
}

.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 400;
  color: var(--c-ink-soft);
  transition: color .2s ease, background-color .2s ease;
}

.site-nav__link:hover { color: var(--c-ink); background: rgba(255, 255, 255, .6); }

.site-nav__link.is-current {
  color: var(--c-ink);
  font-weight: 500;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px var(--c-border);
}

.site-header__cta { flex: none; min-height: 44px; padding: 0 22px; font-size: 14px; }

/* --- Sélecteur de langue ---------------------------------------------------
   Rendu par site.js dans deux conteneurs : la barre en desktop, le bas du
   menu déroulant en mobile où la barre est trop étroite.
   -------------------------------------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px var(--c-border);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-ink-soft);
  transition: color .2s ease, background-color .2s ease;
}

.lang-switch__item:hover { color: var(--c-ink); background: rgba(255, 255, 255, .7); }

.lang-switch__item.is-current {
  background: var(--c-white);
  color: var(--c-violet);
  box-shadow: 0 2px 6px -2px rgba(40, 50, 120, .3);
}

/* Un seul des deux emplacements est visible à la fois. */
.lang-switch--menu { display: none; }

/* Bouton du menu mobile */
.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform .25s ease, opacity .25s ease;
}

.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 0 var(--gutter) 56px;
}

.site-footer__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-top: 32px;
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--c-ink-soft);
}

.site-footer__left { display: flex; align-items: center; gap: 12px; }
.site-footer__mark { width: 26px; height: 26px; flex: none; overflow: visible; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  :root {
    --gutter: var(--gutter-tablet);
    --header-inset-x: 24px;
    --fs-h1: 46px;
    --fs-h2: 34px;
    --fs-quote: 36px;
  }

  .section { padding-block: 88px; }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .panel { padding: 40px; }
}

@media (max-width: 860px) {
  :root {
    --gutter: var(--gutter-mobile);
    --header-inset-x: 16px;
    --header-inset-y: 12px;
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-quote: 26px;
    --fs-body: 16px;
    --r-panel: 28px;
    --r-card: 24px;
  }

  .section { padding-block: 64px; }
  .panel { padding: 24px; }
  .card { padding: 24px; }

  .nav-toggle { display: flex; }

  .lang-switch--bar { display: none; }
  .lang-switch--menu {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .site-header__inner { padding-inline: 16px 10px; gap: 10px; }
  .logotype__text { font-size: 17px; }
  .logotype__mark { width: 28px; height: 28px; }
  .site-header__cta { min-height: 40px; padding: 0 16px; font-size: 13px; }

  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    padding: 12px;
    border-radius: var(--r-card);
    /* panneau déroulant : plus opaque que le verre des cartes, pour rester
       lisible par-dessus le hero */
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-color);
    box-shadow: var(--glass-shadow);
  }

  .site-header.is-open .site-nav { display: block; }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__link { height: 46px; padding: 0 14px; font-size: 16px; }

  .site-footer { padding-bottom: 40px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }

  .orb { filter: blur(60px); }
}

/* ==========================================================================
   Mouvement réduit — toutes les animations s'arrêtent
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}