/* Hallmark · macrostructure: custom bespoke « Une journée » · tone: documentaire, sensoriel · anchor hue: laiton sur heure du jour
 * theme: système SKADI (neige froide) étendu d'une palette horaire · genre: editorial/atmospheric
 * nav: rail caméléon existant · footer: existant · enrichment: E5 canvas fait main (givre, buée)
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 * Page « Une journée » : chargé uniquement sur cette page (inc/skadi.php).
 */

/* ============ Tokens : la lumière heure par heure ============ */
:root{
  --j-aube:#E3ECF2;
  --j-matin:#EDF2F5;
  --j-midi:#F4F7F9;
  --j-apresmidi:#F5F1EA;
  --j-or:#EEDBBB;
  --j-crepuscule:#2A363C;
  --j-soir:#182024;
  --j-nuit:#0D1215;

  --j-encre-clair:var(--encre);
  --j-texte-clair:var(--texte);
  --j-heure-clair:var(--laiton-encre);
  --j-encre-sombre:var(--neige);
  --j-texte-sombre:#C3CDD2;
  --j-heure-sombre:var(--laiton-vif);
  --j-filet-sombre:#34434B;

  --j-papier:var(--j-aube);
  --j-encre:var(--j-encre-clair);
  --j-texte:var(--j-texte-clair);
  --j-heure:var(--j-heure-clair);
  --j-filet:var(--filet);

  --j-chiffres:clamp(3.2rem,1.6rem + 7vw,8.5rem);
  --j-voile:color-mix(in oklch, var(--nuit) 70%, transparent);
  --j-section:clamp(88px,12vw,180px);
}
html[data-jour="sombre"]{
  --j-encre:var(--j-encre-sombre);
  --j-texte:var(--j-texte-sombre);
  --j-heure:var(--j-heure-sombre);
  --j-filet:var(--j-filet-sombre);
}
html body{background:var(--j-papier);color:var(--j-texte);transition:color var(--dur-lent) var(--ease-out)}
html .bande__sol{fill:var(--j-papier)}
.j h1,.j h2,.j h3{color:var(--j-encre);transition:color var(--dur-lent) var(--ease-out)}
.j p{margin:0}
.j .surtitre{color:var(--j-heure)}

/* ============ Briques communes ============ */
.j-heure{
  display:block;font:400 var(--j-chiffres)/.9 var(--font-display);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--j-heure);transition:color var(--dur-lent) var(--ease-out);
}
.j-photo{position:relative;margin:0;min-width:0}
.j-photo img{width:100%;height:100%;object-fit:cover}
.j-photo figcaption{
  margin-top:var(--space-xs);font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;
  font-variant-numeric:tabular-nums;color:var(--j-texte);opacity:.8;
}
.j-tete{display:flex;flex-direction:column;gap:var(--space-md);max-width:34rem}
.j-tete h2{font-size:var(--text-h2);line-height:1.08}
.j-tete p:not(.j-heure){font-size:var(--text-lg);line-height:1.6;max-width:42ch}
.j-moment{padding:var(--j-section) var(--gutter);display:grid;gap:var(--space-2xl)}

/* ============ Ouverture : la vitre gelée ============ */
.j-ouverture{
  min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;
  gap:var(--space-xl);padding:calc(var(--space-2xl) + 40px) var(--gutter) var(--space-2xl);
}
@media (min-width:900px){
  .j-ouverture{grid-template-columns:minmax(0,5fr) minmax(0,6fr);padding:0 0 0 var(--gutter);align-items:stretch}
}
.j-ouverture__texte{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-lg);padding-bottom:var(--space-2xl)}
@media (min-width:900px){ .j-ouverture__texte{padding:var(--space-3xl) var(--space-xl) var(--space-3xl) 0} }
.j-ouverture h1{font-size:var(--text-display-s);line-height:1.02;max-width:14ch;min-width:0;overflow-wrap:break-word}
.j-lede{font-size:var(--text-lg);line-height:1.6;max-width:38ch}
.j-consigne{
  display:inline-flex;align-items:center;gap:var(--space-sm);font:500 var(--text-xs)/1.4 var(--font-body);
  letter-spacing:2px;text-transform:uppercase;color:var(--j-encre);
}
.j-consigne::before{content:"";width:28px;height:1px;background:var(--laiton)}

.j-vitre{position:relative;overflow:hidden;background:var(--givre);isolation:isolate}
.j-vitre img{position:absolute;inset:0}
.j-vitre figcaption{position:absolute;z-index:3;left:var(--space-md);bottom:var(--space-md);margin:0;color:var(--sur-photo);opacity:1;text-shadow:0 1px 8px var(--j-voile)}
.j-ouverture .j-vitre{min-height:72svh}
@media (min-width:900px){ .j-ouverture .j-vitre{min-height:100svh} }
.j-givre{position:absolute;inset:0;z-index:2;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.j-degivrer{
  position:absolute;z-index:4;right:var(--space-md);bottom:var(--space-md);
  min-height:44px;padding:0 var(--space-md);border:1px solid currentColor;border-radius:0;
  background:color-mix(in oklch, var(--blanc) 70%, transparent);color:var(--encre);
  font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background var(--dur-rapide) var(--ease-out),opacity var(--dur-moyen) var(--ease-out);
}
.j-degivrer:hover{background:var(--blanc)}
.j-degivrer:focus-visible{outline:2px solid var(--petrole);outline-offset:3px}
.j-degivrer:active{transform:translateY(1px)}
.j-degivrer[disabled]{opacity:0;pointer-events:none}
.j-vitre--nuit .j-degivrer{background:color-mix(in oklch, var(--nuit) 60%, transparent);color:var(--sur-photo)}
.j-vitre--nuit .j-degivrer:hover{background:var(--nuit)}
.j-vitre--nuit .j-degivrer:focus-visible{outline-color:var(--laiton-vif)}

/* ============ Trio (préparatifs) ============ */
.j-trio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md)}
.j-trio .j-photo:first-child{grid-column:1 / -1;aspect-ratio:3/2}
.j-trio .j-photo:not(:first-child){aspect-ratio:2/3}
@media (min-width:900px){
  .j-moment--trio{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
  .j-moment--trio .j-tete{position:sticky;top:var(--space-3xl)}
  .j-trio{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-lg)}
  .j-trio .j-photo:first-child{grid-column:1 / 12}
  .j-trio .j-photo:nth-child(2){grid-column:2 / 7;margin-top:var(--space-xl)}
  .j-trio .j-photo:nth-child(3){grid-column:7 / 13;margin-top:calc(var(--space-3xl) * 1.6)}
}

/* ============ Diptyque bord à bord ============ */
.j-diptyque{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm);margin-inline:calc(var(--gutter) * -1)}
.j-diptyque .j-photo figcaption{padding-inline:var(--gutter)}
.j-diptyque .j-photo:first-child{aspect-ratio:4/5}
.j-diptyque .j-photo:last-child{aspect-ratio:3/2}
@media (min-width:900px){
  .j-diptyque{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}
  .j-diptyque .j-photo:first-child{aspect-ratio:2/3}
  .j-diptyque .j-photo:last-child{aspect-ratio:4/3}
  .j-diptyque .j-photo figcaption{padding-inline:var(--space-md)}
}

/* ============ Chapitre épinglé ============ */
.j-chapitre{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);padding:var(--j-section) var(--gutter)}
.j-chapitre .j-photo{aspect-ratio:2/3;max-height:88svh}
@media (min-width:900px){
  .j-chapitre{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--space-3xl);align-items:center;min-height:120svh}
  .j-chapitre .j-photo{position:sticky;top:6svh;width:auto;height:88svh;margin-left:auto}
}

/* ============ Bandes plein cadre ============ */
.j-plein{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;overflow:hidden;
  margin-left:calc(var(--rail-w) * -1)}
.j-plein > .j-photo{position:absolute;inset:0;z-index:-1}
.j-plein > .j-photo img{transform:scale(var(--j-zoom,1.08));transition:transform 1.6s var(--ease-out)}
.j-plein.est-la > .j-photo img{--j-zoom:1}
.j-plein > .j-photo figcaption{position:absolute;right:var(--gutter);top:var(--space-2xl);margin:0;color:var(--sur-photo);opacity:1}
.j-plein::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top, var(--j-voile) 0%, transparent 55%)}
.j-plein .j-tete{padding:var(--space-3xl) var(--gutter) var(--space-2xl) calc(var(--rail-w) + var(--gutter));max-width:none}
.j-plein .j-tete h2,.j-plein .j-tete p{color:var(--sur-photo)}
.j-plein .j-tete .j-heure{color:var(--laiton-vif)}
.j-plein--or::after{background:linear-gradient(to top, color-mix(in oklch, var(--nuit) 78%, transparent) 0%, transparent 60%)}

/* ============ Éparpillé (après-midi) ============ */
.j-epars{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
.j-epars .j-photo{aspect-ratio:3/2}
@media (min-width:900px){
  .j-epars{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-lg);row-gap:0}
  .j-epars .j-photo:nth-child(1){grid-column:1 / 7}
  .j-epars .j-photo:nth-child(2){grid-column:6 / 13;margin-top:40%;z-index:1}
  .j-epars .j-photo:nth-child(3){grid-column:3 / 9;margin-top:-6%}
  .j-epars .j-photo{transform:translateY(var(--j-derive,0px))}
}

/* ============ Quatuor (le soir) ============ */
.j-quatuor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-md)}
.j-quatuor .j-photo{aspect-ratio:2/3}
.j-quatuor .j-photo:nth-child(3){grid-column:1 / -1;aspect-ratio:3/2}
@media (min-width:900px){
  .j-moment--soir{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
  .j-moment--soir .j-tete{position:sticky;top:var(--space-3xl)}
  .j-quatuor{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}
  .j-quatuor .j-photo:nth-child(2){margin-top:var(--space-3xl)}
  .j-quatuor .j-photo:nth-child(3){grid-column:auto;aspect-ratio:2/3;margin-top:var(--space-xl)}
  .j-quatuor .j-photo:nth-child(4){grid-column:1 / -1;aspect-ratio:21/9}
}

/* ============ Rafale (la fête) ============ */
.j-rafale{padding:var(--j-section) var(--gutter)}
.j-rafale .j-tete{margin-bottom:var(--space-2xl)}
.j-rafale__pile{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--space-md)}
.j-rafale__pile .j-photo{aspect-ratio:3/2}
.j-rafale__compteur{display:none}
/* Version folioscope (ajoutée par le script si le mouvement est permis) */
.j-rafale--flip{height:340vh;padding:0;position:relative}
.j-rafale--flip .j-rafale__scene{
  position:sticky;top:0;height:100svh;display:grid;align-content:center;gap:var(--space-lg);
  padding:var(--space-2xl) var(--gutter);grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .j-rafale--flip .j-rafale__scene{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center;gap:var(--space-2xl)}
}
.j-rafale--flip .j-tete{margin:0}
.j-rafale--flip .j-rafale__pile{display:block;position:relative;aspect-ratio:3/2;max-height:72svh}
.j-rafale--flip .j-rafale__pile .j-photo{position:absolute;inset:0;opacity:0}
.j-rafale--flip .j-rafale__pile .j-photo.est-vue{opacity:1}
.j-rafale--flip .j-rafale__pile .j-photo figcaption{display:none}
.j-rafale--flip .j-rafale__compteur{
  display:flex;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-sm);
  font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;font-variant-numeric:tabular-nums;color:var(--j-texte);
}
.j-rafale__barre{flex:1;align-self:center;height:1px;background:var(--j-filet);position:relative}
.j-rafale__barre i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:var(--laiton-vif)}

/* ============ Fin : la buée, la date ============ */
.j-fin{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xl);padding:var(--j-section) var(--gutter) var(--space-3xl)}
.j-fin .j-vitre{aspect-ratio:2/3;max-height:90svh;width:100%}
@media (min-width:900px){
  .j-fin{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--space-3xl);align-items:center}
  .j-fin .j-vitre{width:auto;height:90svh;margin-left:auto}
}
.j-fin__texte{display:flex;flex-direction:column;gap:var(--space-lg);max-width:34rem}
.j-fin__texte h2{font-size:var(--text-h2);line-height:1.08}
.j-fin__texte p:not(.j-heure){font-size:var(--text-lg);line-height:1.6}
.j-fin .formdate label{color:var(--j-texte)}
.j-fin .lien{color:var(--j-encre)}

/* ============ Horloge (injectée par le script) ============ */
.j-horloge{
  position:fixed;z-index:25;right:var(--gutter);bottom:calc(var(--bande-h) + var(--space-md));
  display:grid;gap:6px;pointer-events:none;width:clamp(150px,18vw,230px);
  color:var(--j-encre);transition:color var(--dur-lent) var(--ease-out),opacity var(--dur-moyen) var(--ease-out);
}
@media (min-width:900px){ .j-horloge{bottom:var(--space-xl)} }
.j-horloge__heure{font:400 clamp(1.8rem,1.2rem + 2vw,3rem)/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right}
.j-horloge__moment{font:500 var(--text-xs)/1 var(--font-body);letter-spacing:2px;text-transform:uppercase;text-align:right;color:var(--j-texte)}
.j-horloge__regle{position:relative;height:14px}
.j-horloge__regle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.j-horloge__regle line{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.35}
.j-horloge__regle line.majeur{opacity:.7}
.j-horloge__regle .plage{stroke:var(--laiton);opacity:1;stroke-width:2}
.j-horloge__curseur{position:absolute;top:-3px;width:2px;height:20px;background:var(--laiton-vif);left:calc(var(--h,0) * 100%);transform:translateX(-1px)}
.j-horloge.est-cachee{opacity:0}
.j-horloge.sur-photo{color:var(--sur-photo)}
.j-horloge.sur-photo .j-horloge__moment{color:var(--sur-photo-doux)}

/* ============ Mobile ============ */
@media (max-width:899px){
  .j-plein{margin-left:0}
  .j-plein .j-tete{padding-left:var(--gutter)}
  .j-horloge{width:auto;right:var(--space-md);display:flex;align-items:baseline;gap:var(--space-xs);padding:6px 10px;
    background:color-mix(in oklch, var(--j-papier) 86%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .j-horloge.sur-photo{background:color-mix(in oklch, var(--nuit) 55%, transparent)}
  .j-horloge__heure{font-size:1.15rem;order:2}
  .j-horloge__moment{order:1}
  .j-horloge__regle{display:none}
  .j-tete h2,.j-fin__texte h2{overflow-wrap:break-word;min-width:0}
}

/* ============ Mouvement réduit ============ */
@media (prefers-reduced-motion: reduce){
  .j-plein > .j-photo img{transform:none;transition:none}
  .j-epars .j-photo{transform:none}
}

/* Mobile : moins d'espace dans l'ouverture (02/11/2026) */
@media (max-width:899px){
  .j-ouverture{min-height:0;padding:var(--space-xl) var(--gutter) var(--space-lg);gap:var(--space-lg)}
  .j-ouverture__texte{padding-bottom:var(--space-md)}
}

/* Mobile : photos du trio en pleine largeur (02/11/2026) */
@media (max-width:899px){
  .j-trio{grid-template-columns:minmax(0,1fr)}
  .j-trio .j-photo{grid-column:1 / -1}
}

/* Mobile : photos uniformes, une colonne (02/11/2026) */
@media (max-width:899px){
  .j-quatuor{grid-template-columns:minmax(0,1fr)}
  .j-quatuor .j-photo,.j-quatuor .j-photo:nth-child(3){grid-column:auto;aspect-ratio:3/2}
}