/* Page d'attente du calendrier digital Extime — charte hiver 2026 « Time Among Stars »
   (charte Carré Noir du 12/08/2026) et brand book Extime 2022. */

@font-face { font-family: "Extime"; font-weight: 100; font-style: normal; font-display: swap; src: url("/assets/polices/Extime-Thin.woff2") format("woff2"); }
@font-face { font-family: "Extime"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/polices/Extime-Light.woff2") format("woff2"); }
@font-face { font-family: "Extime"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/polices/Extime-Regular.woff2") format("woff2"); }
@font-face { font-family: "Extime"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/polices/Extime-Bold.woff2") format("woff2"); }
@font-face { font-family: "Gloock"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/polices/Gloock-Regular.woff2") format("woff2"); }

:root {
  /* Palette hiver 2026 (RVB) */
  --malachite: #004650;
  --vert-clair: #7BFA91;
  --turquoise: #62D0C5;
  --or-clair: #CAAF65;
  --or: #BA974E;          /* doré classique, brand book */
  --encre: #272727;
  --blanc: #ffffff;

  --police: "Extime", "Helvetica Neue", Arial, sans-serif;
  --police-accent: "Gloock", Georgia, serif;

  --ecrin-coin: 22px;     /* coin coupé de la forme écrin */
  --gouttiere: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--police);
  font-weight: 300;
  color: var(--blanc);
  background-color: var(--malachite);
  background-image: url("/assets/img/fond-cosmique-1024.webp");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  overflow-x: hidden;
  position: relative;
}
@media (min-width: 900px) {
  body { background-image: url("/assets/img/fond-cosmique-2048.webp"); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Collection d'astres (décor, jamais sur les logotypes) ─────────────── */
.ciel {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.astre {
  position: absolute; height: auto; display: block;
  animation: flotter 12s ease-in-out infinite alternate;
}
.astre--etoile     { width: clamp(220px, 46vw, 520px); right: -14vw; top: -4vh; animation-duration: 14s; }
.astre--planete    { width: clamp(200px, 40vw, 480px); left: -18vw; bottom: -14vh; animation-duration: 16s; }
.astre--jupiter    { width: clamp(90px, 16vw, 200px);  left: -4vw; top: 7vh; animation-duration: 11s; animation-delay: -4s; }
.astre--pointillee { width: clamp(120px, 22vw, 280px); right: -5vw; bottom: 10vh; animation-duration: 13s; animation-delay: -7s; opacity: .9; }
.astre--mercure    { width: clamp(50px, 8vw, 110px);   left: 9vw; top: 36vh; animation-duration: 10s; animation-delay: -2s; }
.astre--lune       { width: clamp(110px, 18vw, 230px); right: 8vw; top: 44vh; animation-duration: 15s; animation-delay: -9s; opacity: .8; }

@media (max-width: 640px) {
  .astre--lune, .astre--mercure { display: none; }
  .astre--etoile { width: 58vw; right: -26vw; top: -9vh; }
  .astre--planete { bottom: -10vh; }
  .astre--jupiter { top: 4vh; }
  .astre--pointillee { bottom: 2vh; }
}
@keyframes flotter {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -14px, 0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .astre { animation: none; } }

/* ── Mise en page ──────────────────────────────────────────────────────── */
.entete, .scene, .pied { position: relative; z-index: 1; }

.entete { display: flex; justify-content: center; padding: 28px var(--gouttiere) 8px; }
.logo-extime { width: 112px; height: auto; }

.scene {
  width: min(100%, 600px);
  margin: 0 auto;
  padding: 8px var(--gouttiere) 32px;
}

.hero { text-align: center; padding: 18px 0 26px; }
.logo-tas { width: min(78%, 330px); height: auto; margin: 0 auto; display: block; }
.hero__traduction {
  margin: 18px 0 0;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--or-clair);
}

/* ── Encart : forme écrin blanche sur le visuel clé ────────────────────── */
.ecrin {
  background: var(--blanc);
  color: var(--encre);
  padding: clamp(28px, 6vw, 44px) clamp(22px, 6vw, 44px);
  text-align: center;
  clip-path: polygon(
    var(--ecrin-coin) 0, calc(100% - var(--ecrin-coin)) 0,
    100% var(--ecrin-coin), 100% calc(100% - var(--ecrin-coin)),
    calc(100% - var(--ecrin-coin)) 100%, var(--ecrin-coin) 100%,
    0 calc(100% - var(--ecrin-coin)), 0 var(--ecrin-coin));
}
.ecrin__categorie {
  margin: 0 0 14px;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--malachite);
}
.ecrin__titre {
  margin: 0 0 16px;
  font-weight: 300;
  font-size: clamp(1.7rem, 6.2vw, 2.3rem);
  line-height: 1.12;
  color: var(--malachite);
}
.ecrin__texte {
  margin: 0 auto 26px;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.55;
}
.ecrin__texte strong { font-weight: 400; color: var(--malachite); }
.ecrin__texte sup { font-size: .7em; line-height: 0; }

.compte { border-top: 1px solid var(--or-clair); border-bottom: 1px solid var(--or-clair); padding: 18px 0 16px; }
.compte__intitule {
  margin: 0 0 10px;
  font-weight: 400; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--or);
}
.compte__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.compte__case { display: flex; flex-direction: column; align-items: center; }
.compte__nombre {
  font-family: var(--police-accent);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1;
  color: var(--malachite);
  font-variant-numeric: tabular-nums;
}
.compte__unite { margin-top: 6px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre); }
.compte__ouvert { margin: 0; font-size: 1.05rem; color: var(--malachite); }

.ecrin__note { margin: 22px 0 0; font-size: 0.85rem; line-height: 1.5; color: #5a5a5a; }

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied {
  width: min(100%, 600px); margin: 0 auto;
  padding: 0 var(--gouttiere) 40px;
  text-align: center; font-size: 0.78rem; line-height: 1.6; color: rgba(255, 255, 255, .78);
}
.pied p { margin: 0 0 10px; }
.pied__tags { color: var(--turquoise); letter-spacing: 0.04em; }

@media (min-width: 720px) {
  .entete { padding-top: 40px; }
  .logo-extime { width: 132px; }
  .hero { padding: 24px 0 34px; }
  .hero__traduction { font-size: 1.05rem; }
}