/* Hallmark · macrostructure: custom bespoke « Une nuit » · tone: nocturne, haute tension retenue · anchor hue: laiton sur nuit
 * theme: système SKADI (neige froide), page entièrement [data-sombre] (dérogation : la page est une photo de nuit)
 * genre: atmospheric · nav: rail caméléon existant + guirlande de progression · footer: existant
 * enrichment: lampe frontale (masque CSS), pose longue (filtre au défilement), éclipse (SVG), ciel calculé (SunCalc)
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 * Chargé uniquement sur la page « une-nuit » (inc/skadi.php).
 */

/* ============ Tokens de la page ============ */
:root{
  --n-fond:#0D1215;
  --n-fond-2:#141B1F;
  --n-texte:var(--sur-photo-doux);
  --n-encre:var(--sur-photo);
  --n-heure:var(--laiton-vif);
  --n-filet:#2B373D;
  --n-ampoule:#F6D9A6;
  --n-lune-ombre:#26323A;
  --n-section:clamp(88px,12vw,180px);
}
html body{background:var(--n-fond);color:var(--n-texte);line-height:1.75}
html .bande__sol{fill:var(--n-fond)}
.n h1,.n h2,.n h3{color:var(--n-encre);font-style:normal}
.n p{margin:0;letter-spacing:.01em}
.n .surtitre{color:var(--n-heure)}
.n a:not(.btn){color:var(--n-encre);text-underline-offset:3px}
.n .btn{color:var(--n-encre)}
.n .btn:hover,.n .btn:focus-visible{color:var(--blanc)}
.n .btn--plein{color:var(--nuit)}
.n .btn:focus-visible{outline:2px solid var(--glacier-texte);outline-offset:3px}
.n .btn[hidden]{display:none}
.n .btn:disabled{opacity:.45;cursor:default}
.n .btn:disabled::before{transform:scaleX(0)}
.n figure{margin:0;min-width:0}
.n figcaption{
  margin-top:var(--space-xs);font:500 var(--text-xs)/1.4 var(--font-body);letter-spacing:2px;
  font-variant-numeric:tabular-nums;color:var(--n-texte);opacity:.75;
}
.n-lede{font-size:var(--text-lg);line-height:1.7;max-width:40ch}
.n-note{font-size:var(--text-xs);letter-spacing:1px;line-height:1.5;opacity:.7;max-width:48ch}
.n-tete{display:flex;flex-direction:column;gap:var(--space-md);max-width:34rem;min-width:0}
.n-tete h2{font-size:var(--text-h2);line-height:1.08;overflow-wrap:break-word}

/* ============ 1. Ouverture : la lampe frontale ============ */
.n-ouverture{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);align-items:end;
  min-height:100svh;padding:calc(var(--space-2xl) + 40px) var(--gutter) var(--space-2xl);
}
@media (min-width:900px){
  .n-ouverture{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;padding-block:var(--space-2xl)}
}
.n-ouverture__texte{display:flex;flex-direction:column;gap:var(--space-lg);min-width:0}
.n-ouverture h1{font:500 var(--text-display-s)/1 var(--font-display);letter-spacing:-.02em;overflow-wrap:break-word}
.n-consigne{font-size:var(--text-base);line-height:1.7;color:var(--n-encre);max-width:38ch}
.n-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md)}
.n-compte{font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;font-variant-numeric:tabular-nums;color:var(--n-heure)}

.n-frontale{justify-self:center;width:min(100%, calc((100svh - 120px) * .6665))}
.n-frontale__cadre{position:relative;aspect-ratio:1333/2000;overflow:hidden;touch-action:pan-y;cursor:crosshair;background:var(--n-fond)}
.n-frontale img{display:block;width:100%;height:100%;object-fit:cover}
.n-noir{
  position:absolute;inset:0;background:color-mix(in oklch, var(--n-fond) 94%, transparent);pointer-events:none;
  transition:opacity 1.4s var(--ease-out);
}
.n-noir.is-leve{opacity:0}
.n-lueur{
  position:absolute;width:9%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklch, var(--n-ampoule) 70%, transparent) 0, transparent 70%);
  opacity:0;scale:.4;transition:opacity var(--dur-lent) var(--ease-out),scale var(--dur-lent) var(--ease-out);
}
.n-lueur.is-on{opacity:1;scale:1}
.n-lueur--lune{width:16%;background:radial-gradient(circle, color-mix(in oklch, var(--glacier-texte) 45%, transparent) 0, transparent 70%)}

/* ============ 2. Pose longue ============ */
.n-pose{position:relative;height:240svh}
.n-pose__colle{
  position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);gap:var(--space-lg);padding:calc(var(--space-xl) + 40px) var(--gutter) var(--space-xl);
}
@media (min-width:900px){
  .n-pose__colle{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr);align-items:center;padding-block:var(--space-xl)}
}
.n-pose__photo{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;height:100%}
.n-pose__photo img{
  display:block;max-height:calc(100% - 2em);width:auto;max-width:100%;object-fit:contain;
  filter:brightness(var(--n-expo-b,1)) contrast(var(--n-expo-c,1));
}
.n-expo{font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;font-variant-numeric:tabular-nums;color:var(--n-heure)}
.n-tenir{user-select:none;-webkit-user-select:none;touch-action:none}
@media (max-width:899px){
  .n-pose .n-tete p:not(.surtitre):not(.n-expo){display:none}
}

/* ============ 3. Éclipse ============ */
.n-eclipse{position:relative;height:420svh}
.n-eclipse__colle{
  position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);gap:var(--space-lg);padding:calc(var(--space-xl) + 40px) var(--gutter) var(--space-xl);
}
@media (min-width:900px){
  .n-eclipse__colle{grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr);align-items:center;padding-block:var(--space-xl)}
}
.n-eclipse__photos{position:relative;min-height:0;height:100%}
.n-eclipse__photos figure{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--dur-lent) var(--ease-out);
}
.n-eclipse__photos figure.is-actif{opacity:1}
.n-eclipse__photos img{display:block;max-height:calc(100% - 2em);width:auto;max-width:100%;object-fit:contain}
.n-jauge{display:flex;align-items:center;gap:var(--space-md)}
.n-jauge svg{width:56px;height:56px;flex:none}
.n-jauge__soleil{fill:var(--laiton-vif)}
.n-jauge__lune{fill:var(--n-fond)}
.n-jauge__vue{font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;font-variant-numeric:tabular-nums;color:var(--n-heure)}
@media (max-width:899px){
  .n-eclipse .n-tete p:not(.surtitre){display:none}
  .n-eclipse .n-tete h2{font-size:var(--text-h3)}
}

/* ============ 4. Le ciel de votre date ============ */
.n-ciel{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xl);
  padding:var(--n-section) var(--gutter);background:var(--n-fond-2);border-top:1px solid var(--n-filet);
}
@media (min-width:1200px){.n-ciel{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}}
.n-ciel .formdate.brxe-form{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-md);max-width:30rem}
.n-ciel .formdate .form-group{display:flex;flex-direction:column;gap:var(--space-xs);margin:0;padding:0;width:100%}
.n-ciel .formdate .form-group input,.n-ciel .formdate .form-group select{flex:none;width:100%}
.n-ciel .formdate .submit-button-wrapper{flex-direction:row}
.n-ciel .formdate .bricks-button{
  min-height:48px;padding:0 var(--space-lg);border:1px solid var(--laiton-vif);border-radius:0;
  background:var(--laiton-vif);color:var(--nuit);cursor:pointer;
  font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;text-transform:uppercase;
  transition:background var(--dur-rapide) var(--ease-out),color var(--dur-rapide) var(--ease-out);
}
.n-ciel .formdate .bricks-button:hover{background:var(--n-ampoule)}
.n-ciel .formdate .bricks-button:focus-visible{outline:2px solid var(--glacier-texte);outline-offset:3px}
.n-ciel .formdate .bricks-button:active{transform:translateY(1px)}
.n-ciel .formdate .bricks-button:disabled{opacity:.45;cursor:default}
.n-ciel .formdate label{color:var(--n-texte)}
.n-ciel .formdate select{
  min-height:48px;padding:var(--space-sm) var(--space-md);flex:1 1 220px;
  background:var(--blanc);color:var(--encre);border:1px solid var(--filet);border-radius:0;
  font:400 var(--text-base) var(--font-body);
}
.n-ciel .formdate select:focus-visible{outline:2px solid var(--glacier);outline-offset:0}
.n-ciel .brxe-form .message{color:var(--n-encre)}
.n-sortie{
  position:relative;display:flex;flex-direction:column;gap:var(--space-lg);min-width:0;
  padding:var(--space-xl);border:1px solid var(--n-filet);
}
.n-sortie__date{font:500 var(--text-h3)/1.2 var(--font-display);color:var(--n-encre)}
.n-sortie__lune{display:flex;align-items:center;gap:var(--space-lg)}
.n-sortie__lune svg{width:72px;height:72px;flex:none}
.n-sortie__lune p{line-height:1.6}
.n-lune-fond{fill:var(--n-lune-ombre)}
.n-lune-clair{fill:var(--n-ampoule)}
.n-sortie dl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--space-sm) var(--space-lg);margin:0}
.n-sortie dt{font:500 var(--text-xs)/1.6 var(--font-body);letter-spacing:2px;text-transform:uppercase;color:var(--n-heure)}
.n-sortie dd{margin:0;font-variant-numeric:tabular-nums;color:var(--n-encre);white-space:nowrap;text-align:right}
.n-sortie__verdict{font-size:var(--text-lg);line-height:1.6;color:var(--n-encre)}
.n-champagne{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ============ Guirlande de progression ============ */
.n-guirlande{
  position:fixed;right:var(--space-md);bottom:var(--space-md);z-index:40;
  display:flex;align-items:flex-start;gap:0;padding:var(--space-xs) var(--space-sm) 0;
  background:color-mix(in oklch, var(--n-fond) 80%, transparent);
}
.n-guirlande::before{
  content:"";position:absolute;left:var(--space-sm);right:var(--space-sm);top:12px;height:8px;
  border-bottom:1px solid var(--n-filet);border-radius:0 0 50% 50%;
}
.n-guirlande a{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:48px;min-height:48px;padding-top:10px;text-decoration:none;
  font:500 10px/1 var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--n-texte);white-space:nowrap;
}
.n-guirlande a::before{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--n-filet);
  transition:background var(--dur-moyen) var(--ease-out),box-shadow var(--dur-moyen) var(--ease-out);
}
.n-guirlande a.is-on::before{background:var(--n-ampoule);box-shadow:0 0 12px 2px color-mix(in oklch, var(--n-ampoule) 60%, transparent)}
.n-guirlande a[aria-current="true"]{color:var(--n-encre)}
.n-guirlande a:focus-visible{outline:2px solid var(--glacier-texte);outline-offset:2px}
@media (max-width:599px){
  .n-guirlande a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .n-guirlande a{min-width:40px}
}

/* ============ Mobile : en-tête de nuit, légendes au-dessus de la guirlande ============ */
html .entete.sur-photo{background:color-mix(in oklch, var(--n-fond) 90%, transparent)}
@media (max-width:899px){
  .n-pose__colle,.n-eclipse__colle{padding-bottom:calc(var(--space-2xl) + 8px)}
}

/* ============ Mouvement réduit ============ */
@media (prefers-reduced-motion: reduce){
  .n-noir,.n-lueur{display:none}
  .n-frontale__cadre{cursor:auto}
  .n-pose{height:auto}
  .n-pose__colle,.n-eclipse__colle{position:static;height:auto}
  .n-pose__photo img{filter:none}
  .n-tenir,.n-expo{display:none}
  .n-eclipse{height:auto}
  .n-eclipse__photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-md);height:auto}
  .n-eclipse__photos figure{position:static;opacity:1;transition:none}
  .n-eclipse__photos img{max-height:none;width:100%}
  .n-jauge{display:none}
  .n-guirlande a::before{transition:none}
}