/* =========================================================================
   JLP Décryptage — nouvelle expérience d'accueil (phase 1)
   -------------------------------------------------------------------------
   Trois couches seulement :
     1. la vidéo de ville, fond plein écran silencieux, en boucle ;
     2. le texte éditorial défilant, vrai texte HTML au-dessus ;
     3. l'intro plein écran, qui s'ouvre par le centre pour révéler le reste.
   Aucune navigation, aucun dock : phase 2.
   ========================================================================= */

:root{
  --jlpn-ivoire:#EFEAE0;
  --jlpn-blanc:#FFFFFF;
  --jlpn-sable:#E6E0D4;
  --jlpn-cuivre:#C9A86C;
  --jlpn-nuit:#05070C;
  --jlpn-marge:clamp(18px,3.4vw,44px);
}

html,body{margin:0;padding:0;width:100%;height:100%;min-height:100%;
  background:var(--jlpn-nuit);overflow:hidden;overscroll-behavior:none}
body{color:var(--jlpn-ivoire);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.jlpn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- la scène */
.jlpn-scene{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  overflow:hidden;background:var(--jlpn-nuit)}

/* --- 1. vidéo de ville : fond animé, jamais un média encadré --- */
/* Fond d'accueil : une image panoramique, plus aucune vidéo. Le micro-zoom
   ne se joue qu'une fois, à la révélation de la homepage, et reste figé sur
   sa position finale — pas de boucle, donc pas de raccord à masquer. */
.jlpn-fond{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  border:0;display:block;pointer-events:none;
  transform:scale(1);transform-origin:center center;
  backface-visibility:hidden;will-change:transform}
/* uniquement le calque de fond, direct enfant de la scène : sinon la règle
   attrapait aussi les médaillons du dock et les sortait du flux. */
.jlpn-scene > picture{position:absolute;inset:0;display:block;z-index:0}
@keyframes jlpn-respire{from{transform:scale(1)}to{transform:scale(1.03)}}
.jlpn-on .jlpn-fond{animation:jlpn-respire 30s cubic-bezier(.22,.61,.36,1) forwards;
  animation-iteration-count:1}

/* voile de lisibilité : une lentille douce au centre, un cadre discret aux
   bords. Pas d'aplat, la ville doit rester vivante. */
.jlpn-voile{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(62% 76% at 50% 50%,
      rgba(3,6,13,.54) 0%, rgba(3,6,13,.34) 44%, rgba(3,6,13,.10) 68%, rgba(3,6,13,0) 82%),
    linear-gradient(180deg,
      rgba(3,6,13,.52) 0%, rgba(3,6,13,.10) 18%,
      rgba(3,6,13,0) 46%, rgba(3,6,13,.14) 80%, rgba(3,6,13,.58) 100%)}

/* --- 2. texte éditorial défilant --- */
.jlpn-roll{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 19%,#000 79%,transparent 98%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 19%,#000 79%,transparent 98%);
  opacity:0;transition:opacity 1.5s ease .25s}
.jlpn-on .jlpn-roll{opacity:1}

.jlpn-piste{position:absolute;left:0;right:0;top:0;will-change:transform;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:52vh clamp(20px,6vw,60px)}
.jlpn-piste[hidden]{display:none}

.jlpn-l{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:400;color:var(--jlpn-ivoire);
  font-size:clamp(16px,1.9vw,22px);line-height:1.55;letter-spacing:.07em;
  margin:clamp(3px,.7vh,7px) 0;max-width:820px;
  text-shadow:0 1px 20px rgba(0,0,0,.72),0 0 46px rgba(0,0,0,.45)}
.jlpn-l.t{font-style:normal;font-weight:500;color:var(--jlpn-blanc);
  font-size:clamp(21px,2.6vw,31px);letter-spacing:.22em;text-transform:uppercase}
.jlpn-l.n{font-style:normal;font-weight:400;color:var(--jlpn-sable);
  font-size:clamp(14px,1.7vw,19px);letter-spacing:.24em;text-transform:uppercase}
.jlpn-l.s{font-style:normal;font-weight:300;color:rgba(201,168,108,.62);
  font-size:clamp(14px,1.5vw,18px);letter-spacing:0;
  margin:clamp(10px,1.6vh,18px) 0;text-shadow:none}

/* --- 3. interface : langue et son. Discrète, jamais un lecteur. --- */
.jlpn-ui{position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:0;transition:opacity 1.3s ease .55s}
.jlpn-on .jlpn-ui{opacity:1}
.jlpn-ui > *{pointer-events:auto}

/* En-tête : logo à gauche, sélecteur de langue à droite, sur la même ligne
   optique. Les deux réservent leur largeur, ils ne peuvent pas se croiser. */
.jlpn-logo{position:absolute;top:calc(var(--jlpn-marge) + env(safe-area-inset-top,0px));
  left:var(--jlpn-marge);display:block;line-height:0;
  max-width:min(46vw,240px);
  opacity:.86;transition:opacity .3s ease}
.jlpn-logo img{display:block;width:auto;height:clamp(13px,1.45vw,21px);
  max-width:100%;border:0;
  filter:drop-shadow(0 1px 9px rgba(0,0,0,.55))}
.jlpn-logo:hover{opacity:1}
.jlpn-logo:focus-visible{outline:1px solid rgba(201,168,108,.75);outline-offset:6px}

.jlpn-lang{position:absolute;top:calc(var(--jlpn-marge) + env(safe-area-inset-top,0px));
  right:var(--jlpn-marge);display:flex;align-items:center;gap:9px}
/* Le contrôle du son garde le coin, tout à droite. Le groupe secondaire se
   range à sa gauche : la réserve ci-dessous correspond à la largeur du bloc
   « SON | OFF » et à la gouttière qui l'en sépare. */
.jlpn-scene{--son-w:clamp(92px,7.4vw,124px)}
/* le groupe secondaire compte désormais deux entrées côte à côte */
/* « Collaborer » et « À propos » sont plus longs : on élargit la colonne et
   on resserre légèrement l'interlettrage pour qu'aucun mot n'en déborde. */
.jlpn-dock-sec .jlpn-nav{width:clamp(90px,7vw,116px)}
.jlpn-dock-sec .jlpn-nav-mot{letter-spacing:.1em}
.jlpn-son{position:absolute;bottom:calc(var(--jlpn-marge) + env(safe-area-inset-bottom,0px));
  right:var(--jlpn-marge);display:flex;align-items:baseline;gap:9px}

.jlpn-b0{appearance:none;-webkit-appearance:none;background:none;border:0;padding:6px 2px;
  margin:0;cursor:pointer;color:rgba(239,234,224,.55);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;line-height:1;
  text-shadow:0 1px 12px rgba(0,0,0,.8);
  transition:color .3s ease,opacity .3s ease}
.jlpn-b0:hover{color:var(--jlpn-cuivre)}
.jlpn-b0:focus-visible{outline:1px solid rgba(201,168,108,.75);outline-offset:5px}
.jlpn-b0[aria-pressed="true"],.jlpn-lang .jlpn-b0.actif{color:var(--jlpn-blanc)}
.jlpn-lang .jlpn-b0.actif{border-bottom:1px solid rgba(201,168,108,.75);padding-bottom:5px}
.jlpn-trait{color:rgba(239,234,224,.26);font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;line-height:1;user-select:none}

.jlpn-son .jlpn-etiq{color:rgba(239,234,224,.38);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;line-height:1;
  text-shadow:0 1px 12px rgba(0,0,0,.8);user-select:none}
.jlpn-son .jlpn-b0{min-width:3.6em;text-align:right}

/* --------------------------------------------------------- 4. l'intro
   Elle occupe tout l'écran. À la fin, l'ouverture centrale déjà présente
   dans l'image s'élargit : la ville apparaît par cette fente. */
.jlpn-intro{position:fixed;inset:0;z-index:8;background:#000;
  width:100vw;height:100vh;height:100dvh;   /* 100vh = repli, 100dvh = viewport visible */
  margin:0;padding:0;border:0;
  overflow:hidden;will-change:opacity,transform}
/* La vidéo remplit réellement le conteneur : aucune contrainte de taille
   intrinsèque, aucun cadre, aucun letterboxing. Le recadrage latéral du
   16/9 en portrait est volontaire. */
.jlpn-intro video,.jlpn-intro .jlpn-fin{position:absolute;inset:0;display:block;
  width:100%;height:100%;
  min-width:100%;min-height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:#000;
  object-fit:cover;object-position:center center}
.jlpn-intro .jlpn-fin{opacity:0}
.jlpn-intro.jlpn-fige video{opacity:0}
.jlpn-intro.jlpn-fige .jlpn-fin{opacity:1}
.jlpn-intro.jlpn-parti{display:none}

/* ------------------------------------------------- 5. mouvement réduit
   Aucune animation continue : le texte est posé, la ville est arrêtée sur
   son image, tout le contenu et tous les contrôles restent accessibles. */
@media (prefers-reduced-motion:reduce){
  /* le contenu reste atteignable, mais aucune barre ne vient couper la
     vidéo : le conteneur reçoit le focus clavier (voir accueil-refonte.js). */
  .jlpn-roll{overflow-y:auto;pointer-events:auto;
    -webkit-mask-image:none;mask-image:none;
    transition:none;opacity:1;
    scrollbar-width:none;-ms-overflow-style:none}
  .jlpn-roll::-webkit-scrollbar{width:0;height:0}
  .jlpn-roll:focus-visible{outline:1px solid rgba(201,168,108,.6);outline-offset:-3px}
  .jlpn-piste{position:relative;padding-top:clamp(48px,9vh,110px);
    padding-bottom:clamp(48px,9vh,110px);transform:none !important}
  .jlpn-ui{transition:none;opacity:1}
  /* mouvement réduit : image parfaitement fixe, aucun micro-zoom */
  .jlpn-on .jlpn-fond{animation:none;transform:scale(1)}
  .jlpn-intro{transition:none}
}

/* ------------------------------------------------------- 6. responsive */
@media (max-width:900px){
  .jlpn-l{font-size:clamp(15.5px,4.1vw,19px);line-height:1.5;letter-spacing:.055em;
    max-width:min(560px,86vw)}
  .jlpn-l.t{font-size:clamp(19px,5.6vw,26px);letter-spacing:.18em}
  .jlpn-l.n{font-size:clamp(13px,3.7vw,17px);letter-spacing:.19em}
  .jlpn-piste{padding:56vh clamp(22px,7vw,40px)}
  /* le bas s'efface plus tôt : le contrôle son ne heurte aucune ligne */
  .jlpn-roll{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 73%,transparent 94%);
                     mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 73%,transparent 94%)}
  .jlpn-voile{background:
    radial-gradient(88% 62% at 50% 50%,
      rgba(3,6,13,.60) 0%, rgba(3,6,13,.40) 46%, rgba(3,6,13,.12) 72%, rgba(3,6,13,0) 88%),
    linear-gradient(180deg,
      rgba(3,6,13,.58) 0%, rgba(3,6,13,.12) 20%,
      rgba(3,6,13,0) 48%, rgba(3,6,13,.18) 80%, rgba(3,6,13,.62) 100%)}
  .jlpn-fond{object-position:center center}
}
/* Intro sur petits écrans : les barres du navigateur mobile font varier la
   hauteur utile, 100dvh suit le viewport visible. Règle explicite, garde-fou
   contre toute feuille de style qui produirait un « contain » ou un cadre. */
@media (max-width:768px){
  .jlpn-intro{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
    overflow:hidden;background:#000}
  .jlpn-intro video,.jlpn-intro .jlpn-fin{width:100%;height:100%;
    max-width:none;max-height:none;
    object-fit:cover;object-position:center center}
  /* Aucun agrandissement artificiel : le portrait mobile attend sa propre
     source 9/16. Recadrer davantage le 16/9 détruirait la composition. */
}
@media (orientation:landscape) and (max-height:520px){
  .jlpn-intro{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
    overflow:hidden;background:#000}
  .jlpn-intro video,.jlpn-intro .jlpn-fin{width:100%;height:100%;
    object-fit:cover;object-position:center center}
}

@media (max-width:560px){
  :root{--jlpn-marge:16px}
  .jlpn-b0,.jlpn-trait,.jlpn-son .jlpn-etiq{font-size:10px;letter-spacing:.18em}
  .jlpn-b0{padding:9px 2px}
  .jlpn-lang{gap:6px}
  .jlpn-logo{max-width:38vw}
  .jlpn-logo img{height:12px}
}
@media (max-height:520px) and (orientation:landscape){
  .jlpn-piste{padding-top:60vh;padding-bottom:60vh}
  .jlpn-l{font-size:15px;margin:2px 0}
  .jlpn-l.t{font-size:19px}
}


/* ============================================================ navigation
   Première entrée de la navigation : Interviews. Le conteneur est un simple
   rang horizontal — les entrées suivantes s'ajouteront à sa droite. */
/* Groupe secondaire, à droite : Avis aujourd'hui, À propos plus tard. Il se
   place sur la même ligne basse que le contrôle du son, à sa droite, avec un
   écart franc : ce n'est pas une commande audio, c'est une entrée de
   navigation. Le SON est décalé vers la gauche pour lui laisser la place. */
.jlpn-dock-sec{position:absolute;
  right:calc(var(--jlpn-marge) + var(--son-w) + clamp(26px,3vw,58px));
  bottom:calc(var(--jlpn-marge) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,26px)}
.jlpn-dock-sec .jlpn-nav{width:clamp(74px,5.6vw,92px)}

.jlpn-dock{position:absolute;left:var(--jlpn-marge);
  bottom:calc(var(--jlpn-marge) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:flex-start;gap:clamp(10px,1.4vw,22px)}

/* ---------------------------------------------------- entrées de navigation
   Quatre pictogrammes SVG partageant la même grammaire : disque sombre,
   anneau lumineux très fin, glyphe monochrome, filet, intitulé. Une teinte
   d'anneau par section. Rien de bitmap : net à toute densité. */
.jlpn-nav{--teinte:230,213,178;appearance:none;-webkit-appearance:none;margin:0;
  /* largeur fixe : les intitulés sur deux lignes ne poussent plus les
     voisins et les disques restent alignés */
  width:clamp(92px,7.4vw,116px);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:6px 4px;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.jlpn-nav-interview{--teinte:238,224,205}
.jlpn-nav-decryptage{--teinte:206,209,214}
.jlpn-nav-entreprise{--teinte:150,182,224}
.jlpn-nav-collaborations{--teinte:216,168,140}

.jlpn-nav-disque{display:block;width:clamp(52px,4.6vw,64px);
  height:clamp(52px,4.6vw,64px);line-height:0}
.jlpn-nav-disque svg{width:100%;height:100%;display:block;overflow:visible}
.jlpn-nav-fond{fill:rgba(9,10,13,.62);stroke:none}
.jlpn-nav-anneau{fill:none;stroke:rgba(var(--teinte),.5);stroke-width:1.1;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(var(--teinte),.28));
  transition:stroke .35s ease,filter .35s ease}
.jlpn-nav-glyphe{fill:none;stroke:rgba(var(--teinte),.88);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s ease}
.jlpn-nav-glyphe .ico-fin{stroke-width:2.2;stroke-opacity:.72}
.jlpn-nav-filet{display:block;width:20px;height:1px;
  background:rgba(var(--teinte),.55);transition:width .35s ease,background .35s ease}
.jlpn-nav-mot{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:clamp(11px,1.05vw,13.5px);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--teinte),.9);text-align:center;line-height:1.25;
  max-width:100%;text-shadow:0 1px 14px rgba(0,0,0,.85);
  transition:color .35s ease}

@media (hover:hover){
  .jlpn-nav:hover{transform:translateY(-3px)}
  .jlpn-nav:hover .jlpn-nav-anneau{stroke:rgba(var(--teinte),.95);
    filter:drop-shadow(0 0 9px rgba(var(--teinte),.5))}
  .jlpn-nav:hover .jlpn-nav-glyphe{stroke:#FFFFFF}
  .jlpn-nav:hover .jlpn-nav-filet{width:30px;background:rgba(var(--teinte),.85)}
  .jlpn-nav:hover .jlpn-nav-mot{color:#FFFFFF}
}
.jlpn-nav:focus-visible{outline:none}
.jlpn-nav:focus-visible .jlpn-nav-disque{outline:1px solid rgba(var(--teinte),.9);
  outline-offset:6px;border-radius:50%}
/* ============================================================ dock mobile
   Sur téléphone, la rangée collée en bas à gauche devenait serrée et venait
   au contact du bouton SON. On lui substitue une vraie barre de navigation :
   pleine largeur, centrée, posée sur un verre fumé, quatre colonnes égales,
   intitulés conservés. Le bouton SON remonte au-dessus, le texte défilant
   s'arrête avant. Aucun comportement n'est modifié, seulement la mise en
   place. */
@media (max-width:768px){
  /* hauteur réelle de la barre : elle sert de repère aux éléments qui doivent
     rester au-dessus, plutôt qu'une valeur devinée */
  .jlpn-scene{--dock-h:118px}
  .jlpn-dock{position:fixed;left:0;right:0;bottom:0;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
    align-items:start;justify-items:center;
    padding:12px 8px calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(6,8,12,0),rgba(6,8,12,.72) 38%,
      rgba(4,6,9,.88));
    border-top:1px solid rgba(230,213,178,.14);
    z-index:8}
  .jlpn-nav{padding:4px 2px;gap:7px;width:100%}
  .jlpn-nav-disque{width:46px;height:46px}
  .jlpn-nav-filet{width:16px}
  .jlpn-nav-mot{font-size:9.5px;letter-spacing:.1em;max-width:none;
    line-height:1.2}
  /* le groupe secondaire se pose au-dessus de la barre, côté gauche ; le SON
     reste à droite sur la même ligne : ils ne se touchent jamais. */
  /* Trois entrées secondaires sur un téléphone : elles prennent leur propre
     ligne, au-dessus de celle du son, et se réduisent à leur pictogramme.
     L'intitulé reste porté par l'aria-label. */
  .jlpn-dock-sec{position:fixed;left:14px;right:auto;
    bottom:calc(var(--dock-h) + 58px + env(safe-area-inset-bottom,0px));
    gap:10px;z-index:8}
  .jlpn-dock-sec .jlpn-nav{width:auto;flex-direction:row;align-items:center;gap:9px;
    padding:6px 12px 6px 6px;border-radius:999px;
    background:rgba(6,8,12,.62);
    box-shadow:inset 0 0 0 1px rgba(230,213,178,.16)}
  .jlpn-dock-sec .jlpn-nav-disque{width:32px;height:32px}
  .jlpn-dock-sec .jlpn-nav-filet{display:none}
  .jlpn-dock-sec .jlpn-nav-mot{font-size:9px;letter-spacing:.18em;max-width:none}
}
@media (max-width:470px){
  .jlpn-dock-sec .jlpn-nav-mot{display:none}
  .jlpn-dock-sec .jlpn-nav{padding:6px;border-radius:50%}
  .jlpn-dock-sec .jlpn-nav-disque{width:34px;height:34px}

  /* le bouton SON passe au-dessus de la barre, le texte s'arrête avant */
  .jlpn-son{bottom:calc(var(--dock-h) + 14px + env(safe-area-inset-bottom,0px))}
  .jlpn-roll{inset:0 0 calc(var(--dock-h) + 6px + env(safe-area-inset-bottom,0px)) 0}
}
@media (max-width:360px){
  .jlpn-scene{--dock-h:112px}
  .jlpn-nav-disque{width:42px;height:42px}
  .jlpn-nav-mot{font-size:9px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  .jlpn-nav{transition:none}
  .jlpn-nav:hover{transform:none}
}


/* ---------------------------------------------- transition mobile portrait
   Le film 16/9 ne peut pas être recadré en 9/16 sans amputer le mot
   INTERVIEWS ni détruire l'ouverture centrale. En portrait, on reproduit donc
   le même principe avec deux panneaux : une composition verticale, coupée au
   milieu, dont les deux moitiés s'écartent et découvrent la page derrière. */
/* --------------------------------------------- transition Interviews
   Calque vidéo plein écran, porteur de l'image de couverture du film : même
   si la lecture n'a pas encore peint sa première image, l'écran montre la
   transition et jamais du noir. (Cette règle avait disparu lors d'une
   refonte du dock, la vidéo s'affichait alors en ligne, à sa taille
   intrinsèque.) */
.jlpn-transition{position:fixed;inset:0;z-index:90;
  width:100vw;height:100vh;height:100dvh;
  object-fit:cover;object-position:center center;
  margin:0;padding:0;border:0;display:block;
  background:#05070B url("/images/interviews-transition-poster.jpg")
    center center / cover no-repeat;
  pointer-events:none;opacity:1;transition:opacity .2s linear}
.jlpn-transition[hidden]{display:none}
.jlpn-transition.jlpn-sortie{opacity:0}
@media (prefers-reduced-motion:reduce){
  .jlpn-transition{transition:none}
}

/* =============================================== une seule vue à la fois
   La pile de l'accueil : fond 0, voile 2, texte défilant 3, interface 4.
   Une section vient au-dessus, à 20, sur un fond opaque. Et surtout, dès
   qu'une section est ouverte, les éléments propres à l'accueil — texte
   défilant, dock, son, logo, sélecteur — sortent du rendu : ils ne peuvent
   plus se superposer ni intercepter un clic. L'état est unique, porté par
   l'attribut data-vue de <html>. */
.jlpn-vue{position:absolute;inset:0;z-index:20;overflow:hidden;
  background:#05070B}
.jlpn-vue[hidden]{display:none}

html:not([data-vue="home"]) .jlpn-roll,
html:not([data-vue="home"]) .jlpn-voile,
html:not([data-vue="home"]) .jlpn-ui{display:none}

.jlpn-rideau{position:fixed;inset:0;z-index:90;
  width:100vw;height:100vh;height:100dvh;overflow:hidden;
  /* fond transparent : sinon le noir du conteneur resterait visible entre les
     deux volets et masquerait la page découverte derrière */
  background:transparent;pointer-events:none;opacity:0;
  transition:opacity .3s linear}
/* Au repos le rideau est en display:none : ses images ne sont donc pas
   téléchargées tant qu'il n'a pas servi, et il reste réutilisable indéfiniment. */
.jlpn-rideau[hidden]{display:none}
.jlpn-rideau.jlpn-visible{opacity:1}
.jlpn-volet{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;
  will-change:transform;
  transition:transform 1.15s cubic-bezier(.62,.02,.34,1)}
.jlpn-volet-g{left:0}
.jlpn-volet-d{left:50%}
.jlpn-volet i{position:absolute;top:0;height:100%;width:200%;display:block;
  background-image:url("/images/interviews-transition-mobile.jpg");
  background-size:cover;background-position:center center;background-repeat:no-repeat}

/* Rideau Décryptage : même mécanique que celui des Interviews, avec ses
   propres visuels. Chaque orientation ne charge que l'image qui la concerne. */
.jlpn-rideau-dcx .jlpn-volet i{
  background-image:url("/images/decryptage-transition-desktop.webp")}
.jlpn-rideau-etp .jlpn-volet i{
  background-image:url("/images/entreprise-transition-desktop.webp")}
.jlpn-rideau-col .jlpn-volet i{
  background-image:url("/images/collaborations-transition-desktop.webp")}
.jlpn-rideau-avi .jlpn-volet i{
  background-image:url("/images/avis-transition-desktop.webp")}
.jlpn-rideau-clb .jlpn-volet i{
  background-image:url("/images/collaborer-transition-desktop.webp")}
.jlpn-rideau-apr .jlpn-volet i{
  background-image:url("/images/apropos-transition-desktop.webp")}
@media (max-width:768px) and (orientation:portrait){
  .jlpn-rideau-dcx .jlpn-volet i{
    background-image:url("/images/decryptage-transition-mobile.webp")}
  .jlpn-rideau-etp .jlpn-volet i{
    background-image:url("/images/entreprise-transition-mobile.webp")}
  .jlpn-rideau-col .jlpn-volet i{
    background-image:url("/images/collaborations-transition-mobile.webp")}
  .jlpn-rideau-avi .jlpn-volet i{
    background-image:url("/images/avis-transition-mobile.webp")}
  .jlpn-rideau-clb .jlpn-volet i{
    background-image:url("/images/collaborer-transition-mobile.webp")}
  .jlpn-rideau-apr .jlpn-volet i{
    background-image:url("/images/apropos-transition-mobile.webp")}
}

/* respiration lumineuse du symbole, une seule fois, avant l'ouverture */
.jlpn-souffle{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(38% 20% at 50% 52%,
    rgba(228,197,138,.30), rgba(228,197,138,.10) 46%, rgba(228,197,138,0) 74%);
  mix-blend-mode:screen}
.jlpn-rideau.jlpn-visible .jlpn-souffle{animation:jlpn-respiration 1.5s ease-in-out .5s 1 both}
@keyframes jlpn-respiration{0%{opacity:0}45%{opacity:1}100%{opacity:0}}
.jlpn-volet-g i{left:0}
.jlpn-volet-d i{left:-100%}
.jlpn-rideau.jlpn-ouvre .jlpn-volet-g{transform:translateX(-100%)}
.jlpn-rideau.jlpn-ouvre .jlpn-volet-d{transform:translateX(100%)}

@media (prefers-reduced-motion:reduce){
  .jlpn-rideau,.jlpn-volet{transition:none}
  .jlpn-rideau.jlpn-visible .jlpn-souffle{animation:none}
}


/* =========================================================== mobile : coût
   Correctifs de performance strictement réservés aux petits écrans. Le rendu
   desktop n'est concerné par aucune de ces règles. */
@media (max-width:900px){
  /* Le micro-zoom fait retravailler en continu une grande texture plein écran.
     Le panorama reste fixe : le texte apporte déjà le mouvement. */
  .jlpn-on .jlpn-fond{animation:none;transform:none}

  /* Un backdrop-filter permanent, posé au-dessus d'un texte qui défile, oblige
     le compositeur à reprendre l'arrière-plan à chaque image. Même rendu
     obtenu par un aplat translucide et un filet fin. */

  /* le texte est animé par une keyframe CSS : une seule couche promue */
  .jlpn-piste{will-change:transform;backface-visibility:hidden}
  .jlpn-roll{contain:paint}
}