/* Site de Joris v6 « signature » (08/11/2026, nuit) : une idée forte, la lumière de Joris qui accompagne le visiteur et finit dans le O du logo,
   et un grand moment, « Une journée avec Joris » en défilement horizontal. Chargé après vie.css. */

/* Ouverture (09/11, demande de Greg : le vrai O du logo, jamais une cible) : la sphère s'allume, le O se révèle depuis elle
   comme à la fin du film, et la boussole se pose vers le nord (1,3 s, une fois par visite) */
.ouverture { position: fixed; inset: 0; z-index: 200; background: #0B1A33; display: grid; place-items: center; transition: opacity .7s ease, visibility .7s; }
.ouverture.fini { opacity: 0; visibility: hidden; }
.ouverture .o-joris { position: relative; width: 132px; height: 132px; }
.ouverture .o-joris img { position: relative; display: block; width: 100%; height: 100%; opacity: 0; transform: rotate(-38deg) scale(.82);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 45%, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, #000 0 45%, transparent 62%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18% 18%; mask-size: 18% 18%;
  animation: o-revele 1.05s .1s linear forwards, o-nord 1s .35s cubic-bezier(.25, 1.3, .45, 1) forwards; }
.ouverture .halo { position: absolute; inset: -60%; border-radius: 50%; opacity: 0; transform: scale(.4);
  background: radial-gradient(circle, rgba(246, 213, 143, .5) 0%, rgba(217, 168, 91, .16) 30%, rgba(11, 26, 51, 0) 62%); animation: o-halo 1.3s .05s ease-out forwards; }
@keyframes o-revele {
  0% { opacity: 0; -webkit-mask-size: 14% 14%; mask-size: 14% 14%; animation-timing-function: ease-out; }
  12% { opacity: 1; }
  33% { opacity: 1; -webkit-mask-size: 24% 24%; mask-size: 24% 24%; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { opacity: 1; -webkit-mask-size: 320% 320%; mask-size: 320% 320%; } }
@keyframes o-nord { 0% { filter: drop-shadow(0 0 0 rgba(246, 213, 143, 0)); } 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 16px rgba(246, 213, 143, .4)); } }
@keyframes o-halo { 40% { opacity: 1; transform: scale(1); } 100% { opacity: .55; transform: scale(1.08); } }
html.deja-vu .ouverture { display: none; }

/* La lumière : toile au-dessus du contenu, sans capter la souris */
#lumiere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }

/* Curseur doré (souris seulement) */
.curseur-or { position: fixed; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid rgba(201, 161, 90, .75); border-radius: 50%; pointer-events: none; z-index: 210; transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s, opacity .3s; opacity: 0; mix-blend-mode: multiply; }
.curseur-or.actif { opacity: 1; }
.curseur-or.sur-lien { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(201, 161, 90, .12); border-color: rgba(201, 161, 90, .4); }
@media (pointer: coarse) { .curseur-or { display: none; } }

/* Titre du haut : graisse variable qui suit la souris */
[data-variable] .lettre { display: inline-block; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .35s; }

/* Boutons aimantés */
.aimant { transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform; }

/* Manifeste : les mots s'allument au fil du défilement */
.manifeste { padding: 130px 0 120px; background: #fff; }
.manifeste p { font-family: var(--titre); font-size: clamp(30px, 3.8vw, 54px); line-height: 1.18; letter-spacing: -.02em; font-weight: 500; color: var(--encre); max-width: 1060px; }
.manifeste .mot { opacity: .14; transition: opacity .25s linear; }
.manifeste .mot.allume { opacity: 1; }
.manifeste .mot.or { color: transparent; background: linear-gradient(180deg, #E2B466, #B88334); -webkit-background-clip: text; background-clip: text; }
.manifeste .mot.mauve { color: var(--mauve); }
.manifeste .signe { margin-top: 34px; display: flex; align-items: center; gap: 12px; color: var(--gris); font-size: 15px; }
.manifeste .signe img { width: 30px; height: 30px; border-radius: 50%; }

/* Une journée avec Joris : défilement horizontal épinglé */
.journee { position: relative; background: var(--encre); color: #f7f3ec; }
.journee-colle { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.journee-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; }
.journee-tete h2 { color: #f7f3ec; }
.journee-tete p { color: rgba(247, 243, 236, .65); max-width: 380px; font-size: 16px; }
.piste { display: flex; gap: 22px; padding-left: max(24px, calc((100vw - 1200px) / 2)); padding-right: 24vw; will-change: transform; }
.moment { flex: none; width: 380px; min-height: 420px; border-radius: 22px; padding: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.moment::before { content: ""; position: absolute; inset: auto -40% -60% auto; width: 300px; height: 300px; background: radial-gradient(circle, rgba(109, 76, 224, .35), transparent 65%); }
.moment .heure { font-family: var(--titre); font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(247, 243, 236, .55); }
.moment h3 { color: #fff; font-size: 22px; margin: 18px 0 8px; }
.moment > p { color: rgba(247, 243, 236, .7); font-size: 15px; }
.moment .ui { margin-top: auto; background: #fff; color: #1f2937; border-radius: 14px; padding: 14px 16px; font-size: 13.5px; position: relative; box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
.moment .ui .t { font-weight: 600; font-size: 12.5px; color: var(--encre); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.moment .ui .t small { font-weight: 400; color: var(--gris); }
.moment .ui .l { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid #f0eee9; }
.moment .ui .l:first-of-type { border-top: 0; }
.moment .ui em { font-style: normal; color: var(--gris-2); }
.moment .ui .ok { color: #15803d; font-weight: 600; }
.moment .ui .boutons-u { display: flex; gap: 6px; margin-top: 10px; }
.moment .ui .boutons-u span { padding: 6px 11px; border-radius: 7px; font-weight: 600; font-size: 12px; background: #f1efea; }
.moment .ui .boutons-u span.oui { background: var(--encre); color: #fff; }
.moment .ui .direct { color: #c0392b; font-weight: 600; font-size: 12px; }
.moment .ui .direct::before { content: "● "; }
.moment.nuit { background: linear-gradient(160deg, rgba(109, 76, 224, .25), rgba(11, 26, 51, .2)); }
.journee-barre { margin: 36px max(24px, calc((100vw - 1200px) / 2)) 0; height: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; position: relative; }
.journee-barre i { position: absolute; inset: 0 auto 0 0; width: var(--av, 0%); background: linear-gradient(90deg, #8f7cf0, #E2C27D); border-radius: 2px; }
.journee-barre span { position: absolute; right: 0; top: 12px; font-size: 12.5px; color: rgba(247, 243, 236, .5); }

/* Photos : révélation par rideau */
.cadre-photo { clip-path: inset(8% 8% 8% 8% round 22px); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.profil.actif .cadre-photo { clip-path: inset(0 0 0 0 round 22px); }

/* Projecteur sous la souris dans les sections sombres */
.cree, .final, .journee { --mx: 50%; --my: 50%; }
.cree::after, .final::after, .journee::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx) var(--my), rgba(226, 194, 125, .08), transparent 60%); }

/* Grain très léger sur le sombre */
.cree, .final, .journee { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }

/* Défilé : léger penché selon la vitesse */
.rails { transform: skewX(var(--penche, 0deg)); transition: transform .3s ease-out; }

/* Fin : le logo où la lumière vient se poser */
.final { padding: 150px 0 140px; }
.final .logo-fin { position: relative; width: min(560px, 80vw); margin: 0 auto 34px; }
.final .logo-fin img { width: 100%; height: auto; opacity: .12; transition: opacity 1.4s ease; }
.final.allume .logo-fin img { opacity: 1; }
.final h2 { font-size: clamp(30px, 3.6vw, 48px); }

/* Coulisses : compteur de lignes */
.cree .chiffres-cree strong small { font-size: 16px; color: rgba(247, 243, 236, .6); margin-left: 4px; }

@media (max-width: 760px) {
  .journee-colle { position: relative; height: auto; padding: 80px 0; }
  .journee { height: auto !important; }
  .journee-tete { flex-direction: column; align-items: flex-start; margin-bottom: 26px; }
  .piste { overflow-x: auto; scroll-snap-type: x mandatory; padding-right: 24px; transform: none !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .piste::-webkit-scrollbar { display: none; }
  .moment { width: 82vw; min-height: 380px; scroll-snap-align: center; }
  .journee-barre { display: none; }
  .manifeste { padding: 84px 0; }
  .final { padding: 100px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ouverture { display: none; } #lumiere, .curseur-or { display: none; }
  .manifeste .mot { opacity: 1; } .cadre-photo { clip-path: none; transition: none; }
  .rails { transform: none; } .final .logo-fin img { opacity: 1; }
  .journee-colle { position: relative; height: auto; padding: 90px 0; } .journee { height: auto !important; }
  .piste { overflow-x: auto; transform: none !important; }
}