@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Constellar — feuille de style unique du site vitrine.
   Aucune ressource externe : polices systeme, couleurs reprises du logo
   (constellar_logo_V.svg), tout tient dans ce fichier.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette reprise telle quelle du logo de marque */
  --nuit: #0a1130;
  --nuit-profonde: #060b1f;
  --nuit-claire: #121a41;
  --liaison: #5468b4;
  --etoile: #c9d6f5;
  --ambre: #f0a23c;
  --ambre-clair: #fbb14c;
  --ambre-halo: #ffbe6a;

  --encre: #eef2fc;
  --encre-2: #aab6d8;
  --encre-3: #7b88ad;
  --trait: rgba(201, 214, 245, 0.14);
  --trait-fort: rgba(201, 214, 245, 0.28);

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --mesure: 38rem;          /* largeur de lecture confortable */
  --large: 72rem;           /* largeur maximale des grilles */
  --marge: clamp(1.25rem, 5vw, 4rem);

  /* Progression de l'animation de constellation, pilotee par le script.
     Reste a 1 (etat final, logo en place) si le script ne s'execute pas. */
  --p-compose: 1;
  --p-loge: 1;
  --p-entete: 1;
}

/* ── Remise a zero mesuree ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

body {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--encre);
  background: var(--nuit-profonde);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ciel de fond : un degrade tres sourd, fixe, sur lequel tout se detache. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--nuit-claire) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(84, 104, 180, 0.16) 0%, transparent 65%),
    var(--nuit-profonde);
}

::selection { background: var(--ambre); color: var(--nuit-profonde); }

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

/* ── Utilitaires ──────────────────────────────────────────────────────── */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; top: 0; left: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--ambre); color: var(--nuit-profonde);
  padding: 0.6rem 1rem; font-weight: 600; text-decoration: none;
}
.evitement:focus { transform: translateY(0); }

.contenant {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* ── En-tete : la marque n'y apparait qu'une fois le logo « rangé » ───── */
.entete {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--marge);
  background: color-mix(in srgb, var(--nuit-profonde) 82%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.entete[data-pose="oui"] { border-block-end-color: var(--trait); }

.entete .marque-mini {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-decoration: none;
  white-space: nowrap;
  opacity: var(--p-entete);
  transition: opacity 0.25s ease;
}
.entete .marque-mini .lettre-a { opacity: calc(1 - var(--p-entete)); }

.nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.nav a {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--encre-2);
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--encre); }
.nav .lien-langue {
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  color: var(--encre-2);
}
.nav .lien-langue:hover { border-color: var(--ambre); color: var(--ambre); }
@media (max-width: 46rem) {
  .nav .lien-section { display: none; }
}

/* ── La constellation mobile ──────────────────────────────────────────── */
/* Un unique SVG, en position fixe, que le script deplace du centre de l'ecran
   vers la lettre A du titre, puis vers celle de l'en-tete. */
#constellation {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 50;
  width: 700px;             /* unites du viewBox ; l'echelle fait le reste */
  height: 430px;
  /* Sans cela, la remise a zero (`svg { max-width: 100% }`) rabat ces 700 px
     sur la largeur de l'ecran : sur un telephone de 390 px, toute la
     constellation se trouvait reduite de 44 % et decalee, donc incapable de se
     poser sur celle de la photo comme sur le A. L'echelle est pilotee par le
     transform, jamais par la largeur de la fenetre. */
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  overflow: visible;          /* les etoiles partent hors du cadre du logo */
  will-change: transform;
}
#constellation .jambe {
  stroke: var(--liaison);
  stroke-width: 7;
  stroke-linecap: round;
  fill: none;
}
#constellation .etoile { fill: var(--etoile); }
#constellation .foyer-halo { opacity: var(--p-compose); }
#constellation .foyer { opacity: var(--p-compose); }

/* Le visuel de marque : la constellation dans sa galaxie.
   Sur l'accueil, la constellation animee vient se composer exactement dessus
   avant de s'en detacher ; ailleurs, l'image reste en fond, tres sourde. */
.galaxie {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: -1;
  display: block;
  width: min(78vmin, 700px);
  aspect-ratio: 1;
  pointer-events: none;
  /* Les bords se fondent dans la nuit : pas de carre visible. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 72%);
  opacity: var(--galaxie-opacite, 0.22);
  transform: translate(-50%, -50%) translateY(var(--galaxie-derive, 0px))
             scale(var(--galaxie-echelle, 1));
  will-change: transform, opacity;
}
.galaxie img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 48rem) {
  /* Ecran etroit : la hauteur est la ressource rare, la largeur ne l'est pas. */
  .galaxie { width: min(104vw, 560px); }
}

/* Sur l'accueil, le medaillon est le point de mire du depart. Des que la
   constellation animee s'en detache, la photo s'efface vite : sans cela, on
   verrait deux constellations a la fois, l'une quittant l'autre. */
[data-page="accueil"] .galaxie {
  --galaxie-opacite: calc(1 - min(1, var(--p-loge) * 6));
  inset-block-start: 46%;
}

/* Champ d'etoiles : trois plans qui defilent a des vitesses differentes.
   C'est ce decalage qui donne la profondeur, pas un mouvement propre. */
.ciel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}
.ciel circle { fill: var(--etoile); }
.ciel g { will-change: transform; }
.ciel [data-plan="0"] { transform: translateY(var(--plan-0, 0px)); }
.ciel [data-plan="1"] { transform: translateY(var(--plan-1, 0px)); }
.ciel [data-plan="2"] { transform: translateY(var(--plan-2, 0px)); }

/* Une etoile sur sept respire, chacune avec son propre retard. Les retards
   sont des classes, pas des attributs `style` : la CSP du site interdit tout
   style en ligne, et il n'y a aucune raison d'y faire exception. */
.scintille { animation: respire 5.5s ease-in-out infinite; }
.scintille.r0 { animation-delay: 0s; }
.scintille.r1 { animation-delay: 0.8s; }
.scintille.r2 { animation-delay: 1.6s; }
.scintille.r3 { animation-delay: 2.3s; }
.scintille.r4 { animation-delay: 3.1s; }
.scintille.r5 { animation-delay: 3.9s; }
.scintille.r6 { animation-delay: 4.6s; }
.scintille.r7 { animation-delay: 5.3s; }
@keyframes respire {
  0%, 100% { opacity: inherit; }
  50%      { opacity: 0.15; }
}

/* ── Heros ────────────────────────────────────────────────────────────── */
.scene { height: 200vh; }

.heros {
  position: sticky;
  inset-block-start: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(2rem, 6vh, 4.5rem);
  padding: 7rem var(--marge) 5rem;
  text-align: center;
  overflow: hidden;
  /* Le texte se detache du ciel sans l'effacer. */
  background: radial-gradient(ellipse 76% 42% at 50% 66%,
              color-mix(in srgb, var(--nuit-profonde) 82%, transparent) 0%,
              transparent 72%);
}

.marque {
  font-family: var(--sans);
  font-size: clamp(2.1rem, 11vw, 8.5rem);
  font-weight: 300;
  letter-spacing: clamp(0.08em, 1.2vw, 0.18em);
  line-height: 1;
  white-space: nowrap;
  color: var(--encre);
  opacity: calc(1 - var(--p-entete));
}
/* La lettre A reste dans le flux — elle reserve la place et reste lisible par
   les lecteurs d'ecran — mais s'efface pour laisser voir la constellation.
   Sa largeur est elargie a dessein : a hauteur de capitale, le chevron est
   environ 1,6 fois plus large que haut, donc plus large qu'un A. Sans ce
   creneau, il faudrait le retrecir pour qu'il tienne, et il paraitrait petit. */
.lettre-a {
  display: inline-block;
  width: 1.2em;
  text-align: center;
}
.marque .lettre-a {
  opacity: calc(1 - var(--p-loge));
}

.heros-titre {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4.2vw, 3.1rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 30ch;
  opacity: calc(1 - min(1, var(--p-compose) * 2.4));
}
.heros-suite {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--encre-2);
  max-width: 34ch;
  text-wrap: balance;
  opacity: calc(1 - min(1, var(--p-compose) * 2.4));
}
.heros-suite strong { color: var(--ambre); font-weight: 500; }

.invite {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline: 0;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--encre-3);
  opacity: calc(1 - var(--p-loge));
}
.invite span::after {
  content: "";
  display: block;
  width: 1px; height: 2.5rem;
  margin: 0.6rem auto 0;
  background: linear-gradient(var(--encre-3), transparent);
}

/* ── Sections courantes ───────────────────────────────────────────────── */
.section {
  padding-block: clamp(4rem, 11vh, 8.5rem);
  position: relative;
}
.section + .section { border-block-start: 1px solid var(--trait); }

.surtitre {
  font-size: 0.73rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-block-end: 1.4rem;
}
.section h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-block-end: 1.6rem;
  text-wrap: balance;
}
.section p {
  max-width: var(--mesure);
  color: var(--encre-2);
}
.section p + p { margin-block-start: 1.1rem; }
.section .chapeau {
  color: var(--encre);
  font-size: 1.1em;
  max-width: 42rem;
}

/* Apparition sobre a l'entree dans le champ de vision */
.monte {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.monte[data-vu="oui"] { opacity: 1; transform: none; }

/* ── Cartes du produit ────────────────────────────────────────────────── */
.cartes {
  display: grid;
  gap: 1px;
  margin-block-start: clamp(2.5rem, 6vh, 4rem);
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 46rem) and (max-width: 66rem) {
  .cartes { grid-template-columns: repeat(2, 1fr); }
  .carte:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 66rem) {
  .cartes { grid-template-columns: repeat(3, 1fr); }
}
.carte {
  background: color-mix(in srgb, var(--nuit) 70%, transparent);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
  transition: background-color 0.3s ease;
}
.carte:hover { background: color-mix(in srgb, var(--nuit-claire) 60%, transparent); }
.carte h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.carte h3::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ambre);
  box-shadow: 0 0 10px var(--ambre-halo);
  transform: translateY(-1px);
}
.carte p { font-size: 0.94rem; color: var(--encre-2); max-width: none; }

/* ── Bloc mis en exergue ──────────────────────────────────────────────── */
.exergue {
  margin-block-start: clamp(2rem, 5vh, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-inline-start: 2px solid var(--ambre);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ambre) 8%, transparent), transparent 70%);
  border-radius: 0 4px 4px 0;
}
.exergue h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-block-end: 0.9rem;
}
.exergue p { color: var(--encre); max-width: var(--mesure); }

/* ── Empreinte : le cout de la page, affiche sans emphase ────────────── */
.empreinte {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: color-mix(in srgb, var(--nuit) 55%, transparent);
}
.empreinte h2 {
  font-family: var(--sans);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  margin-block-end: 1.5rem;
}
.mesures {
  display: grid;
  gap: 1.2rem 2.5rem;
  margin-block-end: 1.6rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--trait);
}
@media (min-width: 34rem) {
  .mesures { grid-template-columns: repeat(3, auto); justify-content: start; }
}
.mesure { display: grid; gap: 0.15rem; }
.mesure .valeur {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ambre);
  font-variant-numeric: tabular-nums;
}
.mesure .quoi {
  font-size: 0.82rem;
  color: var(--encre-3);
  max-width: 22ch;
}
.empreinte p { font-size: 0.95rem; }

/* ── Parcours (page fondateur) ────────────────────────────────────────── */
.parcours { margin-block-start: clamp(2rem, 5vh, 3rem); display: grid; gap: 0; }
.etape {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: 1.9rem;
  border-block-start: 1px solid var(--trait);
}
@media (min-width: 48rem) {
  .etape { grid-template-columns: 11rem 1fr; }
}
.etape .periode {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--encre-3);
  white-space: nowrap;
  padding-block-start: 0.2rem;
}
.etape h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin-block-end: 0.35rem;
}
.etape h3 .org { color: var(--ambre); font-weight: 500; }
.etape h3 .org::before { content: " — "; color: var(--encre-3); }
.etape p { font-size: 0.95rem; max-width: var(--mesure); }

.liste-puces { display: grid; gap: 0.7rem; margin-block-start: 1.4rem; }
.liste-puces li {
  position: relative;
  padding-inline-start: 1.4rem;
  color: var(--encre-2);
  font-size: 0.95rem;
  max-width: var(--mesure);
}
.liste-puces li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--liaison);
}

/* ── Liens et boutons ─────────────────────────────────────────────────── */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 1.6rem;
  font-weight: 500;
  color: var(--ambre);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.lien-fleche::after { content: "→"; transition: transform 0.2s ease; }
.lien-fleche:hover { border-block-end-color: var(--ambre); }
.lien-fleche:hover::after { transform: translateX(3px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-block-start: 2rem;
}
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--encre);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.bouton:hover { border-color: var(--ambre); color: var(--ambre); }
.bouton--plein {
  background: var(--ambre);
  border-color: var(--ambre);
  color: var(--nuit-profonde);
}
.bouton--plein:hover {
  background: var(--ambre-clair);
  border-color: var(--ambre-clair);
  color: var(--nuit-profonde);
}

/* ── Pages de texte (mentions, confidentialite, cookies) ──────────────── */
.page-texte { padding-block: clamp(7rem, 16vh, 11rem) clamp(4rem, 10vh, 7rem); }
.page-texte h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  margin-block-end: 1.2rem;
}
.page-texte .chapeau {
  color: var(--encre-2);
  max-width: var(--mesure);
  font-size: 1.05rem;
}
.page-texte .maj {
  margin-block-start: 0.9rem;
  font-size: 0.85rem;
  color: var(--encre-3);
}
.bloc-legal {
  margin-block-start: clamp(2.2rem, 5vh, 3.2rem);
  padding-block-start: clamp(1.6rem, 4vh, 2.4rem);
  border-block-start: 1px solid var(--trait);
}
.bloc-legal h2 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-block-end: 1rem;
}
.bloc-legal p, .bloc-legal dd { color: var(--encre-2); max-width: var(--mesure); }
.bloc-legal p + p { margin-block-start: 0.9rem; }
.bloc-legal code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--liaison) 18%, transparent);
  color: var(--etoile);
}
.bloc-legal a { color: var(--ambre); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.fiche { display: grid; gap: 0.55rem; margin: 0; }
@media (min-width: 40rem) {
  .fiche { grid-template-columns: 14rem 1fr; gap: 0.55rem 1.5rem; }
}
.fiche dt {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--encre-3);
}
.fiche dd { margin: 0; }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.pied {
  padding-block: clamp(2.5rem, 6vh, 4rem);
  border-block-start: 1px solid var(--trait);
  display: grid;
  gap: 1.4rem;
  font-size: 0.85rem;
  color: var(--encre-3);
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.pied-liens a { color: var(--encre-2); text-decoration: none; }
.pied-liens a:hover { color: var(--ambre); }
.pied .sobriete { max-width: 46rem; }

/* ── Preferences de mouvement reduit ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .monte { opacity: 1; transform: none; }
  /* Le logo est directement pose dans la lettre A : aucun deplacement. */
  #constellation { transition: none; }
  .scintille { animation: none; }
  .ciel g, .galaxie { transform: translate(-50%, -50%); }
  .ciel g { transform: none; }
}

/* ── Impression ───────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  body::before, .ciel, #constellation, .entete, .invite, .galaxie { display: none; }
  .section, .page-texte { padding-block: 1.5rem; }
  .scene { height: auto; }
  .heros { position: static; height: auto; }
  a { text-decoration: underline; }
}