/* Graphen Studio — article du Journal (Publications) */

.p-foot { display: none; }

/* L'en-tête passe au-dessus de la photo d'ouverture : il s'inverse, comme
   sur la page Archive, pour rester lisible sur le clair comme sur le sombre. */
.menu-btn { mix-blend-mode: difference; --c1: #fff; }

/* Sans fond sur html, le blanc de body part sur le canevas, hors du groupe
   où joue le « difference » : l'en-tête resterait blanc sur blanc. */
html { background: #fff; }

/* Le film est un mockup presque blanc : tant qu'il est dans l'écran, la page vire au noir
   (film.js règle --nuit, 0 = blanc, 1 = noir, et --lettre, 0 = texte noir, 1 = texte blanc),
   puis revient au blanc quand on le quitte. Sans film.js, --nuit reste à 0 : page blanche. */
html {
  --nuit: 0;
  --lettre: 0;
  --c-fond: color-mix(in srgb, #000 calc(var(--nuit) * 100%), #fff);
  --c-texte: color-mix(in srgb, #fff calc(var(--lettre) * 100%), #000);
  --c-doux: color-mix(in srgb, #bdbdbd calc(var(--lettre) * 100%), #4a4a4a);
  --c-pale: color-mix(in srgb, #858585 calc(var(--lettre) * 100%), #a1a1a1);
}
html, body { background: var(--c-fond); }
/* le texte de l'article seulement : le menu et l'en-tête gardent leurs couleurs */
.page--jnl { color: var(--c-texte); }
/* en quittant la page, retour au blanc : le fondu de sortie ne doit pas laisser de noir */
html.is-leaving { --nuit: 0 !important; --lettre: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html, body { transition: background-color .5s; }
}

.page--jnl {
  display: block;
  padding: 0;
  overflow-x: clip;
}

/* ---------- Titre ---------- */

/* Titre posé à 394 px, métadonnées 28 px dessous, photo à 453 px : le bloc
   finit donc au milieu de l'écran. */
.jnl-head {
  min-height: 50vh;
  min-height: 50svh;
  padding: 120px 20px 13px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.jnl-head h1 {
  max-width: 860px;
  font-size: 20px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.jnl-head__meta { display: flex; gap: 10px; color: var(--c-doux); }

/* ---------- Photo d'ouverture ---------- */

/* Cadre héro extensible au défilement */
.jnl-hero {
  position: relative;
  aspect-ratio: 1440 / 990;
}
.jnl-hero__frame {
  --s: .2;
  --k: -25.25%;
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(var(--k) * (1 - var(--s))), 0) scale(var(--s));
  transform-origin: 50% 50%;
  will-change: transform;
  overflow: hidden;
}
.jnl-hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Texte ---------- */

/* Deux moitiés, 5 px de marge : l'intertitre à gauche (710 px de large), les
   paragraphes à droite, sur 600 px au plus. */
.jnl-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 200px 5px 0;
}
.jnl-row + .jnl-row { padding-top: 160px; }

.jnl-row__side { display: flex; flex-direction: column; gap: 2px; }
.jnl-row__tag { color: var(--c-pale); }
.jnl-row__side h2 {
  max-width: 560px;
  margin: 0;
  font: inherit;
}

.jnl-row__text {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.jnl-row__text p {
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: .03em;
}
.jnl-row__text p.jnl-lead {
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: .01em;
}

.jnl-quote { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.jnl-quote p { font-style: italic; }
.jnl-quote cite { font-style: normal; color: var(--c-pale); }

.jnl-row--credit .jnl-row__text p { font-size: inherit; line-height: inherit; letter-spacing: inherit; }

/* ---------- Photos ---------- */

/* 720 × 600 au centre, à 1440 px ; 240 px sous le texte, 200 px avant le
   suivant. */
.jnl-shot {
  width: 50%;
  margin: 240px auto 0;
  aspect-ratio: 720 / 600;
  overflow: hidden;
  background: var(--line);
}
.jnl-shot + .jnl-shot { margin-top: 3px; }
.jnl-shot img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Film intégré (film.js) ----------
   Même dessin que la card vidéo de Création de contenu (vitrine.css) : pas de lecteur
   du navigateur, trois icônes blanches ombrées en bas à gauche — lecture/pause, son
   (égaliseur animé, barré en muet), plein écran / sortie — et un clic sur le film
   l'ouvre en grand. 16:9, plus large qu'une capture pour que l'interface reste lisible. */
.jnl-shot--video { position: relative; width: min(72%, 1280px); aspect-ratio: 16 / 9; background: #000; }
.jnl-film__fenetre { position: absolute; inset: 0; overflow: hidden; background: #000; }
.jnl-film__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }

.jnl-film__commandes {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.jnl-film__commandes button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  cursor: inherit;   /* la flèche de la page, pas la main du système */
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .55)) drop-shadow(0 2px 13px rgb(0 0 0 / .35));
  transition: transform .15s var(--ease-out);
}
.jnl-film__commandes button:hover,
.jnl-film__commandes button:focus-visible { transform: scale(1.08); outline: none; }

/* lecture / pause */
.jnl-film__lecture svg { width: 22px; height: 22px; fill: currentColor; }
.jnl-film__pause { display: none; }
.jnl-film[data-joue] .jnl-film__play { display: none; }
.jnl-film[data-joue] .jnl-film__pause { display: block; }

/* son : égaliseur de trois barres, figé derrière sa barre oblique en muet */
.jnl-film__son svg { width: 28px; height: 28px; fill: currentColor; }
.jnl-film__barre {
  transform-box: fill-box;
  transform-origin: center;
  animation: jnl-barre-a 987ms ease-in-out infinite alternate;
}
.jnl-film__barre:nth-of-type(2) { animation-name: jnl-barre-b; animation-delay: 233ms; }
.jnl-film__barre:nth-of-type(3) { animation-delay: 466ms; }
.jnl-film[data-muet] .jnl-film__barre,
.jnl-film:not([data-joue]) .jnl-film__barre { animation-play-state: paused; }
@keyframes jnl-barre-a { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes jnl-barre-b { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
.jnl-film__coupe { display: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jnl-film[data-muet] .jnl-film__coupe { display: block; }

/* plein écran / sortie */
.jnl-film__ecran svg { width: 21px; height: 21px; fill: none; stroke: currentColor; }
.jnl-film__reduire { display: none; }
.jnl-film[data-plein-ecran] .jnl-film__agrandir { display: none; }
.jnl-film[data-plein-ecran] .jnl-film__reduire { display: block; }

/* le curseur de la page se change en loupe sur le film (curseur.js) ; en plein écran,
   son dessin ne passe pas au-dessus : les fichiers prennent le relais */
.jnl-film__fenetre {
  cursor: url(/assets/img/curseurs/loupe.svg) 12 12, zoom-in;
  cursor: -webkit-image-set(url(/assets/img/curseurs/loupe.svg) 1x, url(/assets/img/curseurs/loupe@2x.png) 2x) 12 12, zoom-in;
}
html.curseur-anime .jnl-film:fullscreen,
html.curseur-anime .jnl-film:fullscreen * {
  cursor: url(/assets/img/curseurs/fleche.svg) 1 1, default !important;
  cursor: -webkit-image-set(url(/assets/img/curseurs/fleche.svg) 1x, url(/assets/img/curseurs/fleche@2x.png) 2x) 1 1, default !important;
}
html .jnl-film:fullscreen .jnl-film__fenetre {
  cursor: url(/assets/img/curseurs/loupe.svg) 12 12, zoom-out !important;
  cursor: -webkit-image-set(url(/assets/img/curseurs/loupe.svg) 1x, url(/assets/img/curseurs/loupe@2x.png) 2x) 12 12, zoom-out !important;
}
.jnl-film:fullscreen,
.jnl-film[data-plein-ecran] { width: 100vw; height: 100vh; max-width: none; margin: 0; aspect-ratio: auto; background: #000; }
.jnl-film:fullscreen .jnl-film__video,
.jnl-film[data-plein-ecran] .jnl-film__video { object-fit: contain; }
.jnl-film:fullscreen .jnl-film__commandes,
.jnl-film[data-plein-ecran] .jnl-film__commandes { left: 26px; bottom: 22px; }
.jnl-film:fullscreen .jnl-film__commandes button,
.jnl-film[data-plein-ecran] .jnl-film__commandes button { width: 55px; height: 55px; }
.jnl-film:fullscreen .jnl-film__cadre,
.jnl-film[data-plein-ecran] .jnl-film__cadre {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .jnl-film__commandes button { transition: none; }
  .jnl-film__barre { animation: none; }
}

.jnl-body { padding-bottom: 200px; }

/* ---------- Projet précédent / suivant ----------
   Deux cartes rectangulaires en bas de page projet, comme les deux moitiés du texte :
   le précédent à gauche, le suivant à droite. La vignette, le nom, et une flèche discrète. */
.jnl-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 200px 5px 0;
}
.jnl-nav__carte { display: block; color: inherit; }
.jnl-nav__image {
  display: block;
  aspect-ratio: 710 / 440;
  overflow: hidden;
  background: var(--line);
}
.jnl-nav__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.jnl-nav__legende {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
}
.jnl-nav__sens {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--c-pale);
  transition: color .3s;
}
.jnl-nav__sens svg { width: 14px; height: 8px; flex: none; }
.jnl-nav__carte:hover .jnl-nav__image img { transform: scale(1.03); }
.jnl-nav__carte:hover .jnl-nav__sens { color: var(--c-texte); }


/* ================= Tablette et mobile ================= */

@media (max-width: 1199px) {
  .m-header { mix-blend-mode: difference; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .m-header .wordmark__g, .m-header .wordmark__s { color: #fff; }
}

@media (max-width: 809px) {
  .jnl-head { min-height: 0; padding: 332px 10px 0; gap: 8px; }
  .jnl-head h1 { max-width: 290px; }
  .jnl-head__meta { font-size: 12px; line-height: 15.6px; }

  /* Vignette d'ouverture mobile */
  .jnl-hero { aspect-ratio: 380 / 422; margin: 115px 5px 0; }
  .jnl-hero__frame { --k: 29.6%; }

  .jnl-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 40px 10px 0; }
  .jnl-row + .jnl-row { padding-top: 60px; }
  .jnl-row__side, .jnl-row__text p, .jnl-quote cite { font-size: 12px; line-height: 15.6px; }
  .jnl-row__text { max-width: none; gap: 39px; }
  .jnl-nav { gap: 5px; padding: 80px 5px 0; }
  .jnl-nav__legende { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; line-height: 15.6px; }

  .jnl-shot { width: auto; margin: 43px 5px 0; aspect-ratio: 380 / 317; }
  .jnl-shot--video { aspect-ratio: 16 / 9; }
  .jnl-shot + .jnl-shot { margin-top: 3px; }

  .jnl-body { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .jnl-hero__frame { --s: 1 !important; }
}

/* ================= Page projet : les mockups dans l'article =================
   Une page projet reprend la mise en page de l'article : photo d'ouverture,
   puis les compositions de mockups.css entre les paragraphes. Ces compositions
   sont dessinées sur un carré ; le cadre le devient. */

.jnl-shot--mk {
  position: relative;
  aspect-ratio: 1;
  background: none;
}

/* La grande : presque toute la largeur de la page, avec les 5 px de marge du
   texte, et assez basse pour tenir dans l'écran. La bande de trois écrans y
   est agrandie de 15 % autour du centre (mêmes rapports et mêmes écarts que
   dans mockups.css), puis recentrée en hauteur : l'écran du milieu occupe les
   deux tiers du cadre. */
.jnl-shot--large {
  width: auto;
  margin-left: 5px;
  margin-right: 5px;
  aspect-ratio: 1430 / 760;
}
.jnl-shot--large .mk--bande .mk__ecran { top: 16.8%; }
.jnl-shot--large .mk--bande .mk__ecran--un    { left: -11.77%; width: 35.38%; }
.jnl-shot--large .mk--bande .mk__ecran--deux  { left: 24.84%;  width: 56.38%; }
.jnl-shot--large .mk--bande .mk__ecran--trois { left: 82.46%;  width: 28.97%; }

@media (max-width: 809px) {
  .jnl-shot--mk { aspect-ratio: 1; }
  .jnl-shot--large { aspect-ratio: 1430 / 760; }
}

/* Photo verticale : cadre 4/5, plus étroit, pour ne pas couper un portrait
   en bandeau. */
.jnl-shot--haut { width: 37.5%; aspect-ratio: 4 / 5; }

/* La grande composition à un seul écran : centré, les deux tiers de la
   largeur, sur le gris clair de mockups.css. */
.jnl-shot--large .mk--plein .mk__ecran { left: 16.85%; top: 11%; width: 66.3%; }

@media (max-width: 809px) {
  .jnl-shot--haut { width: auto; aspect-ratio: 4 / 5; }
}

/* Un mockup dans une page projet : posé sur un fond de carte gris, légèrement
   réduit par rapport au cadre pour faire ressortir l'écran blanc sur le fond blanc du site. */
.jnl-shot--ecran {
  position: relative;
  width: auto;
  margin-left: 5px;
  margin-right: 5px;
  aspect-ratio: 1440 / 900;
  background: color-mix(in srgb, #1a1a1a calc(var(--nuit) * 100%), #ebebeb);
}
.jnl-shot--ecran .mk__ecran,
.jnl-shot--ecran .jnl-film__cadre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
}
.jnl-shot--ecran .jnl-film__cadre {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

@media (max-width: 809px) {
  .jnl-shot--ecran .mk__ecran,
  .jnl-shot--ecran .jnl-film__cadre {
    width: 90%;
  }
}

/* Page projet : le vrai logo du projet à la place du titre et de sa ligne
   secteur · année (assets/img/logos/, tirés des sites de maquette). Sa taille
   est donnée par les attributs width et height de chaque page. */
.jnl-head--logo h1 { max-width: none; line-height: 0; }
.jnl-head__logo { display: block; max-width: calc(100vw - 40px); height: auto; }

@media (max-width: 809px) {
  .jnl-head__logo { zoom: .8; }
}

/* Lien dans le texte d'un article : souligné, pour se distinguer des mots */
.jnl-lien { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jnl-lien:hover { text-decoration-color: var(--c-pale); }