/* Mosaïque des 1001 nues (page /mille-et-une-nues/mosaique/, avec nues.js)
   Salle noire (--night) : les nues s'y allument. Les commandes flottent en verre sombre.
   Verre : dépoli (blur 24px + saturate 180 %), fond --night à 58 %, liseré de lumière en haut,
   ombre diffuse en bas ; repli opaque si backdrop-filter n'est pas pris en charge.
   Au plus 3 surfaces de verre visibles en temps normal (barre, « 1001 ! ? / n° », musique). */
.nues2d {
  --verre-fond: color-mix(in oklab, var(--night) 58%, transparent);
  --verre-fond-plein: color-mix(in oklab, var(--night) 88%, var(--on-night));
  --verre-flou: blur(24px) saturate(180%);
  --verre-bord: color-mix(in oklab, var(--on-night) 12%, transparent);
  --verre-lumiere: inset 0 1px 0 color-mix(in oklab, var(--on-night) 22%, transparent);
  --verre-ombre: 0 8px 32px rgb(0 0 0 / .32), 0 2px 6px rgb(0 0 0 / .18);
  --verre-trait: color-mix(in oklab, var(--on-night) 14%, transparent);
  --verre-survol: color-mix(in oklab, var(--on-night) 9%, transparent);
  --verre-actif: color-mix(in oklab, var(--on-night) 17%, transparent);
  position: relative; height: calc(100svh - var(--header)); min-height: 520px; overflow: hidden;
  background: var(--night); color: var(--on-night); color-scheme: dark;
}
.nues2d :focus-visible { outline-color: var(--accent-night); }
.nues2d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; view-transition-name: nues-mosaique; }
/* voile en haut : le titre reste lisible quand des nues passent dessous (pas de flou : il ne coûte rien) */
.nues2d::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--night), color-mix(in oklab, var(--night) 70%, transparent) 45%, transparent); }

/* Verre commun */
.n2-bar, .n2-more, .n2-music, .n2-info, .n2-detail {
  background: var(--verre-fond); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord); box-shadow: var(--verre-lumiere), var(--verre-ombre); color: var(--on-night);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .n2-bar, .n2-more, .n2-music, .n2-info, .n2-detail { background: var(--verre-fond-plein); }
}

/* En-tête */
.n2-head { position: absolute; left: var(--gutter); top: 14px; max-width: 36ch; pointer-events: none; z-index: 2; color: var(--on-night); }
.n2-head a { pointer-events: auto; }
.n2-head .crumbs { color: var(--on-night-soft); margin-bottom: .4rem; }
.n2-head .crumbs a { color: var(--on-night); }
.n2-head h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0 0 .2em; color: var(--on-night); }
.n2-hint, .n2-status { font-size: .8rem; color: var(--on-night-soft); margin: 0; }
.n2-hint { transition: opacity var(--d-recit) var(--courbe-sortie), transform var(--d-recit) var(--courbe-sortie); }
.nues2d.n2-calme .n2-hint { opacity: 0; transform: translateY(-4px); }
.n2-status { color: var(--accent-night); font-weight: 500; }
.nues2d.ready .n2-status { display: none; }

/* Barre de commandes flottante */
.n2-tools { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 3; padding: 0 12px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; pointer-events: none; }
.n2-tools > * { pointer-events: auto; }
.n2-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; padding: 4px; border-radius: 26px; }
.n2-more { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 26px; }
.n2-tools button, .n2-go { font: 500 .8125rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--on-night-soft);
  background: transparent; border: 0; border-radius: 22px; min-height: 44px; cursor: pointer;
  transition: color var(--d-court) var(--courbe-sortie), background var(--d-court) var(--courbe-sortie), transform var(--d-instant) var(--courbe-sortie); }
.n2-tools button { padding: 0 14px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.n2-tools button:hover { color: var(--on-night); background: var(--verre-survol); }
.n2-tools button:active { transform: scale(.96); }
.n2-tools button[aria-pressed="true"], .n2-tools button[aria-expanded="true"] { color: var(--on-night); background: var(--verre-actif); }

/* Contrôles segmentés (Forme, Ordre) : une pastille glisse sous le choix */
.n2-group { display: flex; align-items: center; }
.n2-seg { position: relative; isolation: isolate; padding: 0; border-radius: 22px; }
.n2-seg + .n2-seg { margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--verre-trait); border-radius: 0; }
.n2-lab { font: 500 .6875rem/1 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--on-night-soft); opacity: .75; padding: 0 6px 0 12px; }
.n2-seg button[aria-pressed] { position: relative; z-index: 1; }
.n2-pill { position: absolute; z-index: 0; left: 0; top: 0; height: 44px; width: 0; border-radius: 22px; background: var(--verre-actif);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--on-night) 14%, transparent); opacity: 0; pointer-events: none; }
.n2-seg.n2-pret .n2-pill { transition: transform var(--d-moyen) var(--courbe-sortie), width var(--d-moyen) var(--courbe-sortie), opacity var(--d-court) var(--courbe-sortie); }
.n2-seg:has(.n2-pill) button[aria-pressed="true"] { background: transparent; }

/* Hasard, mis en avant ; Recentrer, en icône */
.n2-tools .n2-hasard { color: var(--night); background: var(--accent-night); font-weight: 600; padding: 0 16px 0 13px; margin-left: 2px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 4px 14px -4px color-mix(in oklab, var(--accent-night) 60%, transparent); }
.n2-tools .n2-hasard:hover { color: var(--night); background: color-mix(in oklab, var(--accent-night) 82%, white); }
.n2-tools .n2-hasard[aria-pressed="true"] { color: var(--night); background: var(--accent-night);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 0 2px var(--night), 0 0 0 3.5px var(--accent-night); }
.n2-hasard svg { transition: transform var(--d-moyen) var(--courbe-sortie); }
.n2-hasard:active svg { transform: rotate(-90deg); }
.n2-tools .n2-fit { width: 44px; padding: 0; }
.n2-tools svg { width: 18px; height: 18px; flex: none; }
.n2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 1001 ! ? et recherche d'une nue : regroupés, discrets */
.n2-go { display: flex; align-items: center; gap: 2px; padding: 0 0 0 10px; cursor: auto; }
.n2-go label { font-size: .75rem; color: var(--on-night-soft); }
.n2-go input { width: 3.8em; height: 44px; border: 1px solid var(--verre-trait); border-radius: 22px; background: color-mix(in oklab, var(--night) 40%, transparent);
  color: var(--on-night); font: 500 .875rem/1 var(--sans); padding: 0 8px; margin-left: 6px; text-align: center; }
.n2-go input:focus { border-color: var(--accent-night); outline: none; }
.n2-go input:focus-visible { outline: 2px solid var(--accent-night); outline-offset: 1px; }
.n2-tools .n2-go button { padding: 0 14px 0 10px; }
.n2-tools .n2-info-toggle { padding: 0 14px; font-family: var(--serif); font-size: .95rem; font-style: italic; }

/* Musique */
.n2-audio { position: absolute; right: var(--gutter); top: 14px; z-index: 3; }
.n2-music { display: flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 16px 0 14px; border-radius: 22px;
  color: var(--on-night-soft); font: 500 .8125rem/1 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: color var(--d-court) var(--courbe-sortie), background var(--d-court) var(--courbe-sortie); }
.n2-music:hover { color: var(--on-night); }
.n2-note { font-size: 1.1rem; opacity: .6; display: inline-block; }
.n2-music[aria-pressed="true"] { color: var(--on-night); background: color-mix(in oklab, var(--night) 40%, color-mix(in oklab, var(--accent-night) 28%, transparent)); }
.n2-music[aria-pressed="true"] .n2-note { opacity: 1; color: var(--accent-night); animation: n2note 1.6s ease-in-out infinite; }
@keyframes n2note { 50% { transform: translateY(-3px) rotate(-8deg); } }

/* Panneaux */
.n2-info { position: absolute; left: 50%; translate: -50% 0; bottom: calc(var(--n2-bar, 80px) + 10px); width: min(440px, calc(100% - 24px)); border-radius: 20px; padding: 18px 20px; z-index: 4; }
.n2-info p { margin: 0 0 .4em; font-size: .84rem; color: var(--on-night-soft); }
.n2-rank { font: 400 1.8rem/1.15 var(--serif) !important; color: var(--on-night) !important; word-break: break-all; }
.n2-rank-full { max-height: 30vh; overflow: auto; font: .72rem/1.5 ui-monospace, monospace !important; word-break: break-all; color: var(--on-night) !important;
  background: color-mix(in oklab, var(--night) 50%, transparent); border-radius: 10px; padding: 8px 10px; }
.n2-show { border: 0; background: none; padding: 10px 0; margin: -6px 0 -10px; min-height: 44px; color: var(--accent-night); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: .8rem; }
.n2-detail { position: absolute; right: var(--gutter); top: 72px; width: min(440px, calc(100% - 24px)); border-radius: 22px; padding: 12px 12px 18px; z-index: 4; }
.n2-detail img { display: block; width: 100%; height: auto; aspect-ratio: 2158 / 1000; border-radius: 12px; background: color-mix(in oklab, var(--night) 60%, transparent); }
.n2-detail > div { padding: 0 6px; }
.n2-detail h2 { font-size: 1.8rem; margin: 14px 0 .2em; color: var(--on-night); }
.n2-detail p { font-size: .84rem; color: var(--on-night-soft); margin: 0 0 10px; }
.n2-detail .btn { background: var(--on-night); color: var(--night); border-color: var(--on-night); border-radius: 24px; min-height: 44px; padding: 12px 20px; margin-top: 4px; }
.n2-detail .btn:hover { background: var(--accent-night); border-color: var(--accent-night); color: var(--night); }
.n2-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 1;
  color: var(--on-night); background: color-mix(in oklab, var(--night) 62%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--on-night) 18%, transparent);
  transition: background var(--d-court) var(--courbe-sortie); }
.n2-close:hover { background: var(--night); }

/* Le calcul, sous la mosaïque (fond clair de la page) : sans boîte */
.n2-maths { margin: 1.4rem 0 2.6rem; }
.n2-formula { font: 400 clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem)/1.2 var(--serif); letter-spacing: -.015em; color: var(--ink); margin: 0 0 1.6rem; text-wrap: balance; }
.n2-formula span { font-size: 1.25em; font-style: italic; color: var(--accent); }
.n2-formula b { font-weight: 400; white-space: nowrap; }
.n2-steps, .n2-facts { list-style: none; margin: 0; padding: 1.1rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; border-top: 1px solid var(--line); }
.n2-steps { margin-bottom: 1.4rem; }
.n2-steps li, .n2-facts li { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
.n2-steps b, .n2-facts b { font: 400 1.75rem/1 var(--serif); color: var(--ink); white-space: nowrap; }

@media (max-width: 700px) {
  .n2-music { padding: 0; }
  .n2-music-t { display: none; }
  .n2-head { right: 70px; }
  .nues2d::before { height: 150px; }
  /* deux rangées : Forme, puis Ordre + Hasard + Recentrer ; « 1001 ! ? / n° » au-dessus, à droite */
  .n2-tools { flex-direction: column; align-items: stretch; gap: 6px; padding: 0 10px; }
  .n2-more { order: -1; align-self: flex-end; }
  .n2-bar { gap: 4px; border-radius: 24px; }
  .n2-bar > .n2-seg:first-child { flex: 1 1 100%; }
  .n2-bar > .n2-seg + .n2-seg { flex: 1 1 auto; margin-left: 0; padding-left: 0; border-left: 0; border-radius: 22px; }
  .n2-seg button[aria-pressed] { flex: 1 1 auto; padding: 0 9px; }
  .n2-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
  .n2-tools .n2-hasard { padding: 0 14px 0 11px; }
  .n2-detail { top: auto; right: 10px; bottom: calc(var(--n2-bar, 160px) + 8px); width: auto; left: 10px; }
  .n2-detail h2 { font-size: 1.5rem; margin-top: 10px; }
  .n2-info { bottom: calc(var(--n2-bar, 160px) + 8px); }
  .n2-steps, .n2-facts { grid-template-columns: 1fr; gap: 14px; }
  .n2-steps li, .n2-facts li { display: grid; grid-template-columns: 6.2rem 1fr; align-items: start; gap: 12px; }
  .n2-steps li span, .n2-facts li span { padding-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .n2-seg.n2-pret .n2-pill, .n2-hint, .n2-hasard svg { transition: none; }
  .n2-music[aria-pressed="true"] .n2-note { animation: none; }
}