/* Charte nubelo : encre, corail (accent rare), sable, fond. Police Inter hébergée sur le site. */
@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);        /* formes des logos */
  --enveloppe: var(--blanc);    /* rabat de l'enveloppe adralis */
}


* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--texte);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.conteneur { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: inherit; text-decoration-color: var(--corail); text-underline-offset: 0.2em; }
a:hover { color: var(--corail); }
a:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; border-radius: 4px; }

.lien-evitement {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--carte); padding: 0.5rem 1rem; border-radius: 6px;
}
.lien-evitement:focus { left: 0.5rem; }

/* Marques : symbole + nom en minuscules, Inter Display SemiBold */
.marque {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 600; letter-spacing: -0.02em; text-decoration: none;
}
.marque svg { display: block; height: 1.6em; width: auto; }
.forme { stroke: var(--forme); }
.forme-plein { fill: var(--forme); }
.accent { fill: var(--corail); }
.rabat { stroke: var(--enveloppe); }

/* En-tête : voir nubelo-chrome.css */
@media (max-width: 40rem) { .bouton-petit { padding: 0.5rem 1rem; font-size: 0.9rem; } }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Bandeau d'accueil : toujours sombre, quel que soit le thème */
.bandeau {
  --forme: var(--blanc);
  --texte: #F3F1EF;
  --texte-doux: #B4BAC2;
  background: var(--encre);
  color: var(--texte);
  overflow: hidden;
}
.accroche {
  display: grid; gap: 2.5rem; align-items: center;
  padding-top: 4rem; padding-bottom: 5rem;
}
@media (min-width: 56rem) { .accroche { grid-template-columns: 1.3fr 0.7fr; gap: 3rem; padding-top: 5.5rem; padding-bottom: 6.5rem; } }
.surtitre { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--corail); margin: 0 0 1rem; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); max-width: 17ch; }
.accroche-texte > p:not(.surtitre) { font-size: 1.2rem; color: var(--texte-doux); max-width: 34rem; margin: 0; }
.grand-symbole { width: min(100%, 17rem); height: auto; justify-self: center; opacity: 0.9; }
@media (max-width: 55.99rem) { .grand-symbole { display: none; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }
.lien-clair { color: #F3F1EF; font-weight: 500; }

/* Démonstration : une vraie sortie d'Adralis (référentiel BAN du 17/10/2026) */
.demo { margin: 0; display: grid; gap: 0.75rem; min-width: 0; }
.demo > div { border-radius: 14px; padding: 1.1rem 1.25rem; min-width: 0; }
.demo-saisie { background: var(--carte); }
.demo-saisie p { margin: 0.35rem 0 0; color: var(--texte-doux); overflow-wrap: anywhere; }
.demo-sortie { background: var(--blanc); color: var(--encre); }
.etiquette { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-doux); }
.demo-sortie .etiquette { color: #4A525C; }
.lignes {
  list-style: none; margin: 0.6rem 0 0; padding: 0; counter-reset: ligne;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem; line-height: 1.9;
}
.lignes li {
  counter-increment: ligne; min-height: 1.9em; padding-left: 2rem; position: relative;
  border-bottom: 1px solid #EFE9E6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lignes li::before {
  content: counter(ligne); position: absolute; left: 0; width: 1.2rem; text-align: right;
  color: #8A929B; font-size: 0.8rem;
}
.lignes .rempli { font-weight: 600; }
.lignes mark { background: none; color: var(--encre); box-shadow: 0 0.12em 0 var(--corail); }
.verdict { margin: 0.9rem 0 0; font-size: 0.93rem; color: #4A525C; }
.verdict strong { display: block; color: var(--encre); }

section { padding: 4rem 0; }
section + section { border-top: 1px solid var(--trait); }
h1 { color: var(--texte); }
.intro { color: var(--texte-doux); max-width: 38rem; margin: 0 0 2rem; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }

.application {
  background: var(--surface);
  border-radius: 20px;
  padding: clamp(1.5rem, 5vw, 3rem);
  display: grid; gap: 2rem;
}
.application .marque { font-size: 2rem; }
.application .marque svg { height: 1.5em; }
.marque svg.logotype { height: 1.1em; } /* logotype « Adralis » : marque/adralis-logotype.svg */
.application > div > p { color: var(--texte-doux); margin: 0.5rem 0 0; max-width: 36rem; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.points li { background: var(--carte); border-radius: 12px; padding: 1.1rem 1.25rem; }
.points strong { display: block; font-weight: 600; }
.points span { color: var(--texte-doux); font-size: 0.97rem; }
@media (min-width: 44rem) { .points { grid-template-columns: 1fr 1fr; } }

.bouton {
  display: inline-block; justify-self: start;
  background: var(--corail); color: var(--encre);
  font-weight: 600; text-decoration: none;
  padding: 0.75rem 1.4rem; border-radius: 999px; line-height: 1.25;
}
.bouton:hover { color: var(--encre); filter: brightness(1.05); }
.note { font-size: 0.9rem; color: var(--texte-doux); margin: -1.25rem 0 0; }

.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; font-size: 1.15rem; }
.reseau { display: inline-flex; align-items: center; gap: 0.6rem; }
.reseau svg { width: 1.6em; height: 1.6em; flex: none; }
.discret { color: var(--texte-doux); }

footer { background: var(--sable); border-top: 1px solid var(--trait); padding: 2.25rem 0 3rem; margin-top: 4.5rem; font-size: 0.9rem; color: var(--texte-doux); }
footer .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

.texte h1 { font-size: clamp(2rem, 5vw, 2.8rem); max-width: none; }
.texte h2 { font-size: 1.3rem; margin-top: 2.5rem; }
.texte { padding-bottom: 2rem; }
.texte p { max-width: 42rem; }

.application-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.application-tete h2 { margin: 0; }
.statut { font-size: 0.85rem; font-weight: 600; background: var(--carte); border-radius: 999px; padding: 0.3rem 0.85rem; color: var(--texte-doux); }
.application-texte { margin: 0; color: var(--texte-doux); max-width: 36rem; }
@media (min-width: 56rem) {
  .application { grid-template-columns: 1fr 1fr; align-items: start; }
  .application-tete, .application-texte, .points, .application > .actions { grid-column: 1; }
  .application .demo { grid-column: 2; grid-row: 1 / span 4; }
}
.application .actions { margin-top: 0.5rem; }
.application .note { margin: 0; }
.suite { margin-top: 1rem; padding: 1.25rem 1.5rem; border: 1px dashed var(--trait); border-radius: 14px; color: var(--texte-doux); display: grid; gap: 0.2rem; }
.suite strong { color: var(--texte); }

.principes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .principes { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.principes li { border-top: 3px solid var(--texte); padding-top: 1rem; }
.principes h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.principes p { margin: 0; color: var(--texte-doux); }
.bouton-petit { padding: 0.55rem 1.1rem; font-size: 0.95rem; }
header:not(.entete) { padding: 2rem 0; }
header:not(.entete) .marque { font-size: 1.5rem; }

/* Survols en CSS ; le reste du mouvement est dans animations.js (Motion) */
.bouton { transition: filter .15s; }


/* Les cercles du symbole se dilatent depuis leur centre (Motion) */
.grand-symbole circle { transform-box: fill-box; transform-origin: center; }
.lignes mark { transition: none; }

/* Solutions : trois blocs alternés (texte d'un côté, aperçu de l'autre), un par sous-domaine */
.application + .application { margin-top: 1.5rem; }
.application-tete h2, .application-tete h3 { margin: 0; }
.nom-solution { display: inline-flex; align-items: center; gap: 0.6em; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variation-settings: "opsz" 32; }
.nom-solution svg { height: 1.5em; width: 1.5em; }
.statut.disponible { background: var(--corail); color: var(--encre); }
.bouton.secondaire { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1.5px var(--texte); }
.bouton.secondaire:hover { color: var(--texte); background: var(--carte); }
@media (min-width: 56rem) {
  /* colonne de l'aperçu à droite ; « inverse » la met à gauche */
  .application .vitrine { grid-column: 2; grid-row: 1 / span 4; }
  .application.inverse { grid-template-columns: 1fr 1fr; }
  .application.inverse .vitrine { grid-column: 1; }
  .application.inverse .application-tete, .application.inverse .application-texte,
  .application.inverse .points, .application.inverse > .actions { grid-column: 2; }
}

.vitrine { margin: 0; display: grid; gap: 0.9rem; min-width: 0; align-content: start;
  background: var(--blanc); color: var(--encre); border-radius: 16px; padding: 1.25rem; }
.recherche { display: flex; align-items: center; gap: 0.7rem; background: #F4EFEC; border-radius: 999px; padding: 0.8rem 1.1rem; color: #4A525C; }
.recherche svg { width: 1.3rem; height: 1.3rem; flex: none; --forme: var(--encre); }
.criteres { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.criteres span { font-size: 0.85rem; font-weight: 500; padding: 0.3rem 0.8rem; border-radius: 999px; background: #F4EFEC; color: #4A525C; }
.criteres .actif { background: var(--encre); color: var(--blanc); }
.resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.resultats li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid #EFE9E6; border-radius: 12px; }
.resultats i { display: block; height: 0.7rem; border-radius: 999px; background: #E2DAD6; }
.resultats b { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--encre); flex: none; }
.resultats b.cessee { background: #C9C0BB; }
.resultats b.deces { background: var(--corail); }
.resultats li.repere { border-color: var(--corail); box-shadow: 0 0 0 3px rgba(255, 107, 74, .18); }
.vitrine .etiquette { color: #4A525C; margin-bottom: 0.6rem; }
.legende { margin: 0; display: flex; gap: 0.6rem; align-items: center; font-size: 0.93rem; color: #4A525C; }
.pastille { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--corail); flex: none; }

/* Schéma du compte commun */
.plateforme { margin-top: 3rem; text-align: center; }
.plateforme h3 { font-size: 1.3rem; }
.plateforme svg { width: 100%; max-width: 40rem; height: auto; }
.plateforme .liens { stroke: var(--trait); }
.plateforme .noeud rect { fill: var(--carte); stroke: var(--trait); stroke-width: 1.5; }
.plateforme .noeud text { fill: var(--texte); font: 600 15px "Inter", system-ui, sans-serif; }
.plateforme .noeud .petit { font-weight: 400; font-size: 12px; fill: var(--texte-doux); }
.plateforme .centre rect { fill: var(--corail); stroke: none; }
.plateforme .centre text, .plateforme .centre .petit { fill: var(--encre); }
.plateforme p { color: var(--texte-doux); max-width: 34rem; margin: 0.5rem auto 0; }

.application .vitrine { transition: transform .25s; }
@media (hover: hover) { .application .vitrine:hover { transform: translateY(-4px); } }

/* Accueil : titre, puis une scène de ciel du soir avec un nuage par solution.
   Chaque nuage est piloté par ses données : data-palette (couleurs ci-dessous) et data-forme (nuages3d.js).
   nuages.js calcule la mise en page selon le nombre de nuages (--x, --y, --w, --wn) et ajoute .pret au ciel ;
   nuages3d.js dessine les nuages en WebGL (.webgl) ; sans WebGL, des formes SVG en CSS 3D les remplacent. */
.hero { padding-top: 4rem; padding-bottom: 4.5rem; text-align: center; }
.hero h1 { max-width: none; font-size: clamp(3rem, 9vw, 5.5rem); margin-bottom: 0.5rem; }
.accroche-texte > p.sous-titre { max-width: none; font-size: clamp(1.1rem, 2.5vw, 1.4rem); color: var(--texte-doux); margin: 0; }

/* Police de la scène : Outfit, plus ronde et plus lisible sur les nuages (licence OFL, polices/LICENSE-Outfit.txt) */
@font-face { font-family: "Outfit"; src: url("polices/Outfit-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.hero h1, .accroche-texte > p.sous-titre, .nuage, .compte { font-family: "Outfit", "Inter", system-ui, sans-serif; }

/* Palettes : ombre (dessous), mid, clair (dessus) ; --texte-nuage = couleur du texte posé dessus. Ajouter une palette = ajouter un bloc. */
.nuage, .nuage[data-palette="peche"] { --nuage-ombre: #E5735B; --nuage-mid: #FF9F86; --nuage-clair: #FFE3D8; --texte-nuage: var(--encre); }
.nuage[data-palette="menthe"] { --nuage-ombre: #2F9D88; --nuage-mid: #6FD3BD; --nuage-clair: #DAF8EF; --texte-nuage: var(--encre); }
.nuage[data-palette="indigo"] { --nuage-ombre: #2F3B82; --nuage-mid: #5F73C4; --nuage-clair: #A9B6F0; --texte-nuage: #FFFFFF; }
.nuage[data-palette="ambre"] { --nuage-ombre: #C98512; --nuage-mid: #FFC857; --nuage-clair: #FFF0C9; --texte-nuage: var(--encre); }
.nuage[data-palette="rose"] { --nuage-ombre: #C8508C; --nuage-mid: #F58BC0; --nuage-clair: #FFE0F0; --texte-nuage: var(--encre); }
.nuage[data-palette="ciel"] { --nuage-ombre: #2F7FC4; --nuage-mid: #6FB8F0; --nuage-clair: #DDF1FF; --texte-nuage: var(--encre); }

/* Au survol, le texte d'un nuage garde sa couleur (le corail des liens est illisible sur le nuage corail) */
a.nuage:hover, a.nuage:focus-visible { color: var(--texte-nuage); }

/* Sur le nuage corail, ni le logo ni le soulignement ne doivent être corail : encre à la place */
.nuage[data-palette="peche"] .accent { fill: var(--encre); }
.nuage[data-palette="peche"] .ouvrir { text-decoration-color: var(--encre); }

@keyframes apparition { from { opacity: 0; transform: translateY(16px); } }
@keyframes scintille { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes flotte3d { 0%, 100% { translate: 0 0 var(--z); } 50% { translate: 0 -0.7cqw var(--z); } }

.ciel {
  container-type: inline-size; position: relative; margin-top: 1.5rem; text-align: left; overflow: hidden;
  border-radius: 28px; border: 1px solid #2C333B;
  background: radial-gradient(ellipse 60% 45% at 50% 100%, rgba(255, 107, 74, .22), transparent 70%),
              linear-gradient(#0E1217, #1B2530 70%, #22303D);
}
.monde { display: grid; gap: 1.25rem; padding: 2.5rem 1.25rem 2rem; justify-items: center; }
.fond { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.etoiles circle { fill: #F3F1EF; opacity: .55; }
.etoiles .e1 { animation: scintille 4s infinite; } .etoiles .e2 { animation: scintille 5.5s 1.2s infinite; } .etoiles .e3 { animation: scintille 3.2s .6s infinite; }

/* Le nuage : un lien qui contient son texte (la forme est dessinée en WebGL, ou en SVG de repli) */
.nuage {
  position: relative; z-index: 1; display: block; width: min(100%, 22rem); aspect-ratio: 400 / 280; text-decoration: none;
  color: var(--texte-nuage); --forme: var(--texte-nuage);
  animation: apparition .8s both; animation-delay: calc(var(--i, 0) * .12s);
}
.nuage:focus-visible { outline: none; }
.ciel:not(.pret) .nuage, .ciel.erreur .nuage { background: var(--nuage-mid); border-radius: 2.5rem; padding: 1.5rem; aspect-ratio: auto; }
.forme-nuage { position: absolute; inset: 0; width: 100%; height: 100%; }
.forme-nuage.c1 { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); transition: filter .4s; }
.forme-nuage.c2, .forme-nuage.c3 { visibility: hidden; }
.contenu { position: absolute; left: 15%; right: 15%; top: 38%; bottom: 20%; display: grid; }
.ciel:not(.pret) .contenu { position: static; }
.repos, .detail { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.45rem; transition: opacity .3s, transform .3s; }
.detail { opacity: 0; transform: translateY(8px); font-size: 0.82rem; line-height: 1.35; gap: 0.3rem; font-weight: 500; }
.nuage:hover .repos, .nuage:focus-visible .repos, .nuage.ouvert .repos { opacity: 0; transform: translateY(-8px); }
.nuage:hover .detail, .nuage:focus-visible .detail, .nuage.ouvert .detail { opacity: 1; transform: none; }
.logo { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; letter-spacing: -0.01em; font-size: 1.45rem; }
.logo svg { height: 1.2em; width: auto; }
.logo-kompaz { font-weight: 600; font-variation-settings: "opsz" 32; } /* même dessin de lettres que le logotype d'Adralis : Inter Display SemiBold */
.logo-kompaz svg { height: 1.9em; } /* symbole carré : plus haut que le logotype d'Adralis pour peser autant */
.verbe { font-size: 0.95rem; font-weight: 500; }
.etat { font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 0.15rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--texte-nuage) 16%, transparent); }
.etat.dispo { background: var(--corail); color: var(--encre); }
.pts { opacity: .8; font-size: 0.74rem; }
.ouvrir { font-weight: 700; text-decoration: underline; text-decoration-color: var(--corail); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 39.99rem) { .pts { display: none; } }

/* « un seul compte » : point au centre des nuages (ajouté par nuages.js), bureau seulement */
.compte { display: none; position: absolute; z-index: 0; left: var(--x); top: var(--y); translate: -50% -50%; text-align: center; color: #B4BAC2; font-size: 0.75rem; font-weight: 500; pointer-events: none; }
.compte::before { content: ""; display: block; width: 14px; height: 14px; margin: 0 auto 4px; border-radius: 50%; background: var(--corail); box-shadow: 0 0 0 5px rgba(255, 107, 74, .22); }

/* Bureau : scène à proportions fixes, nuages posés par pourcentages (--x, --y, --w, --wn posés par nuages.js) */
@media (min-width: 52rem) {
  .ciel.pret { aspect-ratio: var(--ratio, 1000 / 600); perspective: 1100px; perspective-origin: 50% 40%; }
  .ciel.pret .monde { display: block; position: absolute; inset: 0; padding: 0; transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
  .ciel.pret .fond { display: block; transform: translateZ(-260px) scale(1.4); backface-visibility: hidden; }
  .ciel.pret .compte { display: block; transform: translateZ(-70px); }
  .ciel.pret .nuage { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform-style: preserve-3d; --z: 0px; translate: 0 0 var(--z);
    animation: apparition .8s both, flotte3d 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .12s), calc(var(--i, 0) * -2.3s); }
  .ciel.pret .nuage:nth-of-type(3n+1) { --z: 50px; } .ciel.pret .nuage:nth-of-type(3n+2) { --z: -10px; } .ciel.pret .nuage:nth-of-type(3n) { --z: 90px; }
  .ciel.pret .nuage:hover, .ciel.pret .nuage:focus-visible, .ciel.pret .nuage.ouvert { transform: translateZ(70px) scale(1.07); animation-play-state: running, paused; }
  .ciel.pret .nuage { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
  .forme-nuage.c2, .forme-nuage.c3 { visibility: visible; }
  .forme-nuage.c2 { transform: translateZ(-14px); filter: brightness(.82); }
  .forme-nuage.c3 { transform: translateZ(-28px); filter: brightness(.62); }
  .ciel.pret .contenu { transform: translateZ(22px); }
  /* les tailles de texte suivent la largeur du nuage (--wn, en % de la scène) : 44 → valeurs d'origine */
  .ciel.pret .logo { font-size: calc(var(--wn, 44) * .0557cqw); }
  .ciel.pret .verbe { font-size: calc(var(--wn, 44) * .0375cqw); }
  .ciel.pret .etat { font-size: calc(var(--wn, 44) * .0261cqw); }
  .ciel.pret .detail { font-size: calc(var(--wn, 44) * .0341cqw); gap: calc(var(--wn, 44) * .0114cqw); }
  .ciel.pret .pts { font-size: calc(var(--wn, 44) * .0295cqw); }
  .ciel.pret .contenu { top: 35%; bottom: 18%; }
}
.nuage:hover .forme-nuage.c1, .nuage:focus-visible .forme-nuage.c1, .nuage.ouvert .forme-nuage.c1 { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 16px rgba(255, 107, 74, .3)); }

/* WebGL : le canvas dessine les nuages ; le texte HTML suit son nuage (--dx, --dy, --s, --rx, --ry posées par nuages3d.js) */
.ciel > canvas.webgl, .monde > canvas.webgl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ciel.webgl { perspective: 1100px; perspective-origin: 50% 50%; }
.ciel.webgl .forme-nuage, .ciel.webgl .fond { display: none; }
.ciel.webgl .monde { display: contents; transform: none; }
.ciel.webgl.pret .monde { display: contents; }
.ciel.webgl .compte { transform: none; }
.ciel.webgl .nuage, .ciel.webgl .nuage:hover, .ciel.webgl .nuage:focus-visible, .ciel.webgl .nuage.ouvert,
.ciel.webgl.pret .nuage, .ciel.webgl.pret .nuage:hover, .ciel.webgl.pret .nuage:focus-visible, .ciel.webgl.pret .nuage.ouvert {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); translate: var(--dx, 0px) var(--dy, 0px); scale: var(--s, 1);
  transform-style: flat; transition: none; animation: apparition .8s both; animation-delay: calc(var(--i, 0) * .12s); }
.ciel.webgl .contenu, .ciel.webgl.pret .contenu { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nuage, .etoiles circle { animation: none !important; } .nuage, .repos, .detail { transition: none; }
  .ciel.pret .monde { transform: none; }
}