/* ==========================================================================
   KINOÏ — teaser
   Une image à la fois, plein écran, en fondu lent. La marque au centre,
   la planche-contact en bas. Même mise en scène téléphone / ordinateur.
   ========================================================================== */

:root{
  --encre:#050505;
  --nuit:#121214;
  --papier:#efece4;
  --brume:#c6c2b8;
  --pierre:#8a877e;
  --filet:rgba(239,236,228,.28);
  --lent:cubic-bezier(.2,.7,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }

body{
  background:var(--encre);
  color:var(--papier);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings:'wdth' 100, 'wght' 380;
  font-size:16px; line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:1px solid var(--papier); outline-offset:4px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.saut{ position:absolute; left:-9999px; top:0; z-index:60; background:var(--papier); color:var(--encre); padding:12px 18px; }
.saut:focus{ left:12px; top:12px; }

/* Petites capitales espacées — la voix discrète de la maison */
.surtitre, .saison, .tete__etat, .pied__legende, .invitation, .fiche__tag, .planche__num{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 100, 'wght' 500;
}

/* --------------------------------------------------------------- Logo */
.logo{
  display:inline-flex; align-items:baseline; gap:.06em;
  font-variation-settings:'wdth' 125, 'wght' 900;
  line-height:.9; letter-spacing:-.015em;
  text-decoration:none; user-select:none;
}
.marque{ display:inline-flex; flex-direction:column; align-items:center; }
.barre{ display:block; width:.17em; height:.70em; border-radius:.05em; background:currentColor; }
.pts{ display:flex; gap:.075em; margin-top:.085em; }
.pts b{ display:block; width:.16em; height:.16em; border-radius:50%; background:currentColor; }
.logo--xs{ font-size:28px; }
.logo--sm{ font-size:17px; }

/* --------------------------------------------------------------- Rideau */
.rideau{
  position:fixed; inset:0; z-index:50; background:var(--encre);
  display:none;                       /* activé seulement si JS confirme */
  align-items:center; justify-content:center;
}
.js-intro .rideau{
  display:flex;
  animation:rideau-fond 1.1s 2.1s var(--lent) forwards;
}
.rideau.parti{ display:none !important; }
.rideau__filet{
  position:absolute; left:50%; top:50%; height:1px; width:0;
  background:var(--papier); transform:translate(-50%,-50%);
  animation:filet-trace 1.1s .2s var(--lent) forwards, fondu .5s 1.4s forwards;
}
.rideau .logo{ opacity:0; animation:logo-arrive 1s 1s var(--lent) forwards, fondu .5s 1.9s forwards; }
@keyframes filet-trace{ to{ width:min(46vw, 320px); } }
@keyframes logo-arrive{ from{ opacity:0; letter-spacing:.22em; } to{ opacity:1; letter-spacing:-.015em; } }
@keyframes rideau-fond{ to{ opacity:0; visibility:hidden; } }
@keyframes fondu{ to{ opacity:0; } }

/* --------------------------------------------------------------- Mur */
.mur{
  position:fixed; inset:-12vh -10vw; z-index:0;
  display:flex; gap:2.4vw;
  transform:rotate(-5deg) scale(1.14);
  will-change:transform;
}
@keyframes mur-arrive{ from{ transform:rotate(-5deg) scale(1.28); opacity:0; } }
.js-intro .mur{ animation:mur-arrive 2s 2.2s var(--lent) backwards; }

.colonne{ flex:1; overflow:hidden; }
.colonne__ruban{
  display:flex; flex-direction:column; gap:2.4vw;
  animation:remonte var(--duree, 90s) linear infinite;
}
.colonne:nth-child(2) .colonne__ruban{ animation-direction:reverse; }
@keyframes remonte{ to{ transform:translateY(-50%); } }

.vue{
  position:relative; overflow:hidden; flex-shrink:0;
  display:block; width:100%; padding:0;
  background:var(--nuit);
  border:1px solid transparent; border-radius:2px;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  cursor:pointer;
  transition:filter .45s var(--lent), border-color .45s, transform .6s var(--lent);
}
.vue:hover{ transform:scale(1.045); z-index:1; }
.vue img{
  width:100%; height:100%; object-fit:cover;
  animation:souffle 26s ease-in-out infinite alternate;
}
.vue:nth-child(odd) img{ animation-duration:32s; animation-delay:-14s; }
@keyframes souffle{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.vue:hover, .vue:active{ filter:brightness(1.18); border-color:var(--filet); }
body.fige .colonne__ruban, body.fige .vue img{ animation-play-state:paused !important; }

.secours{ position:fixed; inset:0; z-index:0; }
.secours img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }

.voile{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(5,5,5,.72) 0%, rgba(5,5,5,.12) 26%, transparent 55%),
    radial-gradient(115% 90% at 50% 45%, rgba(5,5,5,.36) 0%, rgba(5,5,5,.62) 62%, rgba(5,5,5,.88) 100%);
}
.grain{
  position:fixed; inset:-60px; z-index:2; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:granule .5s steps(3) infinite;
}
@keyframes granule{ 0%{ transform:translate(0,0); } 50%{ transform:translate(-28px,16px); } 100%{ transform:translate(18px,-24px); } }

/* --------------------------------------------------------------- Scène */
.scene{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(18px, 3vw, 34px) clamp(18px, 3.4vw, 40px)
          calc(clamp(18px, 3vw, 30px) + env(safe-area-inset-bottom));
}
.tete{ pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.js-intro .tete{ animation:apparition 1s 3s backwards; }
.tete__etat{ display:flex; align-items:center; gap:10px; color:var(--brume); }
.point{ width:5px; height:5px; border-radius:50%; background:var(--papier); animation:battement 3s ease-in-out infinite; }
@keyframes battement{ 50%{ opacity:.25; } }
@keyframes apparition{ from{ opacity:0; } }

.centre{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(10px, 1.8vh, 16px); min-height:0;
}
.centre > *{ pointer-events:auto; }
.surtitre{ color:var(--brume); }
.js-intro .surtitre{ animation:apparition 1.2s 3.05s backwards; }

.logo--xl{
  font-size:clamp(66px, 16vw, 164px);
  overflow:hidden; padding-bottom:.16em;
  filter:drop-shadow(0 8px 34px rgba(5,5,5,.7));
}
.js-intro .logo--xl .l, .js-intro .logo--xl .marque{ transform:translateY(112%); opacity:0; animation:monte 1.1s var(--lent) forwards; }
.js-intro .logo--xl .l:nth-child(1){ animation-delay:2.55s; }
.js-intro .logo--xl .l:nth-child(2){ animation-delay:2.65s; }
.js-intro .logo--xl .l:nth-child(3){ animation-delay:2.75s; }
.js-intro .logo--xl .l:nth-child(4){ animation-delay:2.85s; }
.js-intro .logo--xl .marque{ animation-delay:3s; }
@keyframes monte{ to{ transform:translateY(0); opacity:1; } }

.devise{
  font-variation-settings:'wdth' 104, 'wght' 520; font-style:italic;
  font-size:clamp(17px, 4.2vw, 23px); color:var(--brume);
  text-shadow:0 2px 14px rgba(5,5,5,.9);
}
.js-intro .devise{ animation:apparition 1.2s 3.4s backwards; }
.filet{ display:block; width:1px; height:clamp(22px, 5vh, 44px); background:var(--filet); }
.js-intro .filet{ animation:filet-pousse 1s 3.6s var(--lent) backwards; }
@keyframes filet-pousse{ from{ transform:scaleY(0); } }
.saison{ color:var(--brume); text-shadow:0 2px 12px rgba(5,5,5,.95); }
.js-intro .saison{ animation:apparition 1.2s 3.8s backwards; }

.invitation{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:6px; padding:14px 26px;
  color:var(--papier); background:transparent;
  border:1px solid var(--filet); border-radius:0;
  cursor:pointer;
  transition:background .35s var(--lent), color .35s var(--lent), border-color .35s;
}
.js-intro .invitation{ animation:apparition 1.2s 4s backwards; }
.invitation .ico{ width:12px; height:12px; transform:rotate(-90deg); transition:transform .35s var(--lent); }
.invitation:hover{ background:var(--papier); color:var(--encre); border-color:var(--papier); }
.invitation:hover .ico{ transform:rotate(-90deg) translateY(4px); }

/* --------------------------------------------------------------- Pied */
.pied{
  pointer-events:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.js-intro .pied{ animation:apparition 1.2s 4.2s backwards; }
.pied__invite{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brume); text-shadow:0 2px 10px rgba(5,5,5,.9);
}
.pied__contact{ font-size:12.5px; color:var(--pierre); }
.pied__contact a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
.pied__contact a:hover{ color:var(--brume); border-color:var(--brume); }


.ico{ flex-shrink:0; color:currentColor; }
.btn{
  font:inherit; font-size:14px; letter-spacing:.06em;
  font-variation-settings:'wdth' 104, 'wght' 640;
  color:var(--encre); background:var(--papier);
  border:0; border-radius:0; padding:13px 22px; cursor:pointer;
  transition:background .3s, transform .15s;
}
.btn:hover{ background:#fff; }
.btn:active{ transform:scale(.985); }
.erreur{ min-height:20px; margin-top:8px; font-size:13px; color:#e0a1a1; }
.succes__titre{ font-variation-settings:'wdth' 108, 'wght' 700; font-size:16.5px; }
.succes__detail{ font-size:13.5px; color:var(--brume); }
.ico--lg{ width:26px; height:26px; }

/* --------------------------------------------------------------- Fiche */
.fiche{
  margin:auto;
  border:1px solid var(--filet); border-radius:2px; padding:0;
  background:#0f0f12; color:var(--papier);
  width:min(430px, calc(100vw - 28px));
  height:min(86svh, 640px);
  overflow:hidden;
  box-shadow:0 50px 140px rgba(0,0,0,.8);
}
.fiche[open]{ animation:fiche-arrive .4s cubic-bezier(.2,.85,.3,1); }
@keyframes fiche-arrive{ from{ opacity:0; transform:scale(1.04); } }
.fiche::backdrop{
  background:rgba(12,12,14,.68);
  backdrop-filter:blur(7px);
}

.fiche__visuel{ position:absolute; inset:0; }
.fiche__visuel img{
  width:100%; height:100%; object-fit:cover; object-position:top;
  animation:fiche-zoom 14s ease-out forwards;
}
@keyframes fiche-zoom{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.fiche__voile{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(10,10,13,.97) 0%, rgba(10,10,13,.88) 34%,
    rgba(10,10,13,.35) 62%, rgba(10,10,13,.18) 100%);
}

.fiche__fermer{
  position:absolute; top:12px; right:12px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:0;
  background:rgba(12,12,14,.55); color:var(--papier);
  border:1px solid rgba(237,235,229,.3); cursor:pointer;
  transition:background .18s, transform .18s;
}
.fiche__fermer:hover{ background:rgba(12,12,14,.85); transform:rotate(90deg); }
.fiche__fermer .ico{ width:16px; height:16px; }

.fiche__tag{
  position:absolute; top:18px; left:20px; z-index:2;
  font-size:11.5px; letter-spacing:.04em; color:var(--brume);
  padding:6px 10px; border:1px solid var(--filet); border-radius:0;
  background:rgba(12,12,14,.4); backdrop-filter:blur(6px);
}

.fiche__corps{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 20px calc(20px + env(safe-area-inset-bottom));
}
.fiche__titre{
  font-variation-settings:'wdth' 112, 'wght' 860; font-style:italic;
  font-size:clamp(26px, 7vw, 32px); line-height:1.05;
  text-shadow:0 3px 20px rgba(10,10,13,.9);
}
.fiche__sous{ margin-top:6px; font-size:13.5px; color:var(--brume); text-shadow:0 2px 12px rgba(10,10,13,.9); }
.fiche__ligne{
  display:flex; align-items:center; gap:10px;
  margin-top:10px; padding:3px 12px;
  background:rgba(5,5,5,.5); backdrop-filter:blur(9px);
  border:1px solid var(--filet); border-radius:2px;
  transition:border-color .18s;
}
.fiche__ligne:focus-within{ border-color:rgba(237,235,229,.6); }
.fiche__ligne .ico{ width:15px; height:15px; color:var(--pierre); }
.fiche__ligne input{
  flex:1; min-width:0; font:inherit; font-size:16px; color:var(--papier);
  background:transparent; border:0; outline:none; padding:11px 0;
}
.fiche__ligne input::placeholder{ color:#8b8983; }
.btn--large{ width:100%; margin-top:8px; padding:13px; }
.fiche .erreur{ min-height:18px; margin:6px 0 0; text-shadow:0 1px 8px rgba(10,10,13,.9); }

.fiche__succes{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:10px 0 6px; text-align:center;
}
.fiche__succes[hidden]{ display:none; }
.fiche__succes .ico--lg{ animation:coche-pop .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes coche-pop{ 0%{ transform:scale(.2); opacity:0; } 65%{ transform:scale(1.2); } 100%{ transform:scale(1); opacity:1; } }
.fiche.ok{ animation:carte-ok .6s; }
@keyframes carte-ok{ 30%{ box-shadow:0 0 0 6px rgba(237,235,229,.35), 0 50px 140px rgba(0,0,0,.8); } }
.fiche.ok form{ display:none; }

/* Voir de plus près */
.fiche__loupe{
  position:absolute; top:60px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:'wdth' 100, 'wght' 500;
  color:var(--papier); background:rgba(5,5,5,.5); backdrop-filter:blur(6px);
  border:1px solid var(--filet); padding:8px 12px; cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.fiche__loupe .ico{ width:13px; height:13px; }
.fiche__loupe:hover{ background:var(--papier); color:var(--encre); border-color:var(--papier); }

.loupe{
  margin:0; padding:0; border:0; border-radius:0;
  width:100vw; height:100vh; max-width:100vw; max-height:100vh;
  background:#050505; color:var(--papier); overflow:hidden;
}
.loupe::backdrop{ background:#050505; }
.loupe[open]{ animation:apparition .35s var(--lent); }
.loupe__cadre{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  cursor:zoom-in; touch-action:none;
}
.loupe__cadre img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  transform-origin:50% 50%;
  transition:transform .45s var(--lent);
  will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
.loupe__cadre.zoom{ cursor:zoom-out; }
.loupe__cadre.zoom img{ transform:scale(2.6); transition:transform .25s var(--lent); }
.loupe__fermer{
  position:absolute; top:18px; right:18px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  background:rgba(5,5,5,.6); color:var(--papier);
  border:1px solid var(--filet); cursor:pointer;
  transition:background .2s, transform .3s var(--lent);
}
.loupe__fermer:hover{ background:var(--papier); color:var(--encre); transform:rotate(90deg); }
.loupe__fermer .ico{ width:16px; height:16px; }
.loupe__aide{
  position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brume);
  background:rgba(5,5,5,.55); padding:8px 14px; border:1px solid var(--filet);
  pointer-events:none; white-space:nowrap;
}

/* Affiche en vol (clone animé entre le mur et la fiche) */
.volant{
  position:fixed; z-index:45; object-fit:cover; object-position:top;
  border-radius:2px;
  box-shadow:0 40px 120px rgba(0,0,0,.75);
  transition:left .5s cubic-bezier(.3,.8,.25,1), top .5s cubic-bezier(.3,.8,.25,1),
             width .5s cubic-bezier(.3,.8,.25,1), height .5s cubic-bezier(.3,.8,.25,1),
             border-radius .5s, opacity .28s;
  pointer-events:none;
}

/* --------------------------------------------------------------- Écrans */
@media (max-width:719px){
  .mur{ inset:-12vh -24vw; gap:3.4vw; }
  .colonne:nth-child(3){ display:none; }
  .colonne__ruban{ gap:3.4vw; }
  .pied__contact{ display:none; }
  .pied{ justify-content:center; }
  .surtitre{ display:none; }
}
@media (max-height:600px){
  .fiche{ height:min(94svh, 640px); }
  .filet, .surtitre{ display:none; }
}

/* --------------------------------------------------------------- Accessibilité */
@media (prefers-reduced-motion:reduce){
  .mur, .colonne__ruban, .vue img, .grain, .point,
  .fiche__visuel img, .fiche__succes .ico--lg{ animation:none !important; transition:none !important; }
  .rideau{ animation:rideau-fond .01s forwards; }
  .rideau__filet, .rideau .logo{ animation:none; opacity:0; }
  .tete, .surtitre, .logo--xl .l, .logo--xl .marque, .devise, .filet, .saison,
  .invitation, .pied{ animation:none !important; transform:none; opacity:1; }
}