/* Charte nubelo, commune à l'accueil et à la démonstration d'adralis :
   encre, corail (accent rare), sable, fond ; police Inter hébergée ici. */
@font-face {
  font-family: "Inter";
  src: url("/polices/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --encre: #14181D; --corail: #FF6B4A; --sable: #F0E6E2; --fond: #F8F7F6; --blanc: #FFFFFF;
  --texte: var(--encre); --texte-doux: #4A525C; --page: var(--fond); --surface: var(--sable);
  --carte: var(--blanc); --trait: #E6DED9; --forme: var(--encre); --enveloppe: var(--blanc);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; } /* bandes pleine largeur (inset en 50vw) sans défilement horizontal */
/* pied de page en bas de l'écran même quand la page est courte */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; width: 100%; }
body > header, body > footer { flex: none; }

/* Zone sombre (bandeau d'accueil) : palette sombre */
.sombre {
  --texte: #F3F1EF; --texte-doux: #B4BAC2; --surface: #232A32; --carte: #1A1F25; --trait: #2E363F;
  --forme: var(--blanc); --enveloppe: var(--encre);
  background: var(--encre); color: var(--texte);
}
body {
  margin: 0; background: var(--page); color: var(--texte);
  font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-optical-sizing: auto;
}
a { color: inherit; text-decoration-color: var(--corail); text-underline-offset: .2em; }
a:hover { color: var(--corail); }
:focus-visible { outline: 3px solid var(--corail); outline-offset: 2px; border-radius: 4px; }

.conteneur { max-width: 1160px; margin: 0 auto; padding: 0 16px; }

/* Marque : symbole + nom en minuscules */
.marque { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.marque svg { display: block; height: 1.5em; width: auto; }
.marque svg.logotype { height: 1.1em; } /* logotype « Adralis » : fichier marque/adralis-logotype.svg */
.forme { stroke: var(--forme); }
.forme-plein { fill: var(--forme); }
.accent { fill: var(--corail); }
.rabat { stroke: var(--enveloppe); }

/* En-tête : voir nubelo-chrome.css */

.bouton {
  display: inline-block; background: var(--corail); color: var(--encre); font: 600 1rem "Inter", sans-serif;
  text-decoration: none; border: 0; border-radius: 999px; padding: .75rem 1.4rem; cursor: pointer;
}
.bouton { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1); box-shadow: 0 14px 30px -14px var(--corail); }
.bouton:hover { color: var(--encre); transform: translateY(-2px); box-shadow: 0 20px 36px -14px var(--corail); }
.bouton.secondaire { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1.5px var(--trait); }
.bouton.secondaire:hover { box-shadow: inset 0 0 0 1.5px var(--texte); }

/* Pied de page */
.pied { background: var(--sable); border-top: 1px solid var(--trait); margin-top: 72px; padding: 36px 0 48px; color: var(--texte-doux); font-size: .92rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.pied .marque { font-size: 1rem; color: var(--texte); }
.pied p { margin: .25rem 0; }

/* Accès au compte, dans l'en-tête : voir nubelo-chrome.css (session.js) */
.session-ouverte .offert { display: none; }

/* Ciel 3D (ciel.js) : scène de l'accueil qui remplace l'exemple une fois le rendu prêt */
.scene-ciel.webgl {
  background: radial-gradient(ellipse 60% 120% at 50% 130%, rgba(255, 107, 74, .25), transparent 70%), linear-gradient(#0E1217, #1B2530 75%, #22303D);
}
.scene-ciel.webgl { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; border: 1px solid #2C333B; }
.scene-ciel.webgl > .exemple { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }