/*
Theme Name: Djen.Love
Theme URI: https://djen.love
Author: Clement Djen
Description: One-page theme for Djen.Love — Design Systems & Intelligences. Native FR / EN / AR, no translation plugin.
Version: 3.6
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: djen-love
*/

@font-face { font-family: 'PP Editorial Sans'; src: url('assets/fonts/PPEditorialSans-Ultralight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial Sans'; src: url('assets/fonts/PPEditorialSans-UltralightItalic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'PP Editorial Sans'; src: url('assets/fonts/PPEditorialSans-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Editorial Sans'; src: url('assets/fonts/PPEditorialSans-Ultrabold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--djen-bg, #fff); }
body {
  font-family: 'PP Editorial Sans', 'IBM Plex Sans Arabic', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--djen-ink, #0d0d0d);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 1.2s ease, color 1.2s ease;
}
a { color: var(--djen-ink, #0d0d0d); text-decoration: none; }
a:hover { opacity: .45; }
::selection { background: var(--djen-ink, #0d0d0d); color: var(--djen-bg, #fff); }
button { font: inherit; color: inherit; }

/* ---------- shell ---------- */
.hero {
  position: relative;
  height: var(--djen-vh, 100svh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 max(6.6vw, env(safe-area-inset-left, 0px));
}
.bar {
  flex: 0 0 auto;
  min-height: max(8.2svh, 46px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(14px, 2.6vw, 46px);
  padding: 10px 0;
  background: var(--djen-bg, #fff);
  z-index: 4;
  font-size: clamp(12px, .85vw, 14px);
  letter-spacing: .02em;
}
.bar--top { text-transform: uppercase; font-variant-numeric: tabular-nums; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.bar--bottom { justify-content: space-between; gap: 8px 24px; }
.clock { display: flex; gap: .6em; }
.clock > span:first-child { opacity: .45; }
.langs { display: flex; align-items: baseline; gap: clamp(10px, 1.1vw, 18px); }
.langs a { text-transform: uppercase; opacity: .35; transition: opacity .2s ease; }
.langs a:hover, .langs a.is-active { opacity: 1; }

.mark { display: block; height: max(1.7svh, 13px); }
.mark img { display: block; height: 100%; width: auto; filter: var(--djen-logo, none); }
.nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px clamp(14px, 2.6vw, 46px); }
.nav button { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; opacity: .42; transition: opacity .24s ease; }
.nav button:hover, .nav button.is-active { opacity: 1; }

/* ---------- drifting poem ---------- */
.stage { flex: 1 1 auto; position: relative; overflow: hidden; z-index: 1; }
.drift { animation: djen-drift 180s linear infinite; will-change: transform; }
.drift p {
  margin: 0;
  padding: 4vh 0;
  font-weight: 200;
  font-size: clamp(21px, 3.3vw, 56px);
  line-height: 1.5;
  letter-spacing: -.01em;
  text-align: justify;
  hyphens: auto;
}
.drift[dir="rtl"] p { line-height: 1.72; letter-spacing: 0; }
@keyframes djen-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-50%,0); } }

/* ---------- random erasures over the poem ---------- */
.poem {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  color: var(--djen-ink, #0d0d0d);
}
/* the same words, in white, living inside the sky — the square simply uncovers the black ones */
.panel__poem {
  position: absolute; z-index: 1;
  left: 50%; top: 50%;
  width: var(--djen-stage-w, 100%); height: var(--djen-stage-h, 100%);
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 16px rgba(0,0,0,.5);
  contain: paint;
  opacity: 0;
  transition: opacity .35s ease 1.15s;
}
.panel.is-open .panel__poem { opacity: 1; transition: opacity .3s ease 0s; }
.panel.is-about .panel__poem, .panel.is-contact .panel__poem, .panel.is-legal .panel__poem { opacity: 0; transition: opacity .9s ease .45s; }
.erase { position: absolute; inset: -10%; z-index: 2; pointer-events: none; }
.erase i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--djen-bg, #fff) 0%, var(--djen-bg, #fff) 43%, transparent 70%);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes djen-erase-a {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.8); }
  16%  { opacity: .34; }
  64%  { opacity: .34; }
  100% { opacity: 0; transform: translate3d(3.5vw,-7vh,0) scale(1.35); }
}
@keyframes djen-erase-b {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(1.3); }
  22%  { opacity: .3; }
  58%  { opacity: .3; }
  100% { opacity: 0; transform: translate3d(-4.5vw,5vh,0) scale(.75); }
}

/* ---------- sound ---------- */
.sound {
  appearance: none; background: none; border: 0; padding: 0;
  margin-left: auto;
  display: flex; align-items: center; gap: .55em;
  text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer;
  opacity: .35;
  transition: opacity .26s ease;
}
.sound:hover, .sound[aria-pressed="true"] { opacity: 1; }
.sound__dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--djen-ink, #0d0d0d); }
.sound[aria-pressed="true"] .sound__dot { animation: djen-pulse 3.6s ease-in-out infinite; }
@keyframes djen-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- the square that opens ---------- */
.panel {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--djen-sq, 204px); height: var(--djen-sq, 204px);
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  background: var(--djen-bg, #fff);
  z-index: 5;
  overflow: hidden;
  cursor: zoom-in;
  transition: width 1.6s cubic-bezier(.22,1,.26,1), height 1.6s cubic-bezier(.22,1,.26,1),
              min-width 1.6s cubic-bezier(.22,1,.26,1), min-height 1.6s cubic-bezier(.22,1,.26,1);
}
.panel.is-open {
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  cursor: default;
  transition: width 1.6s cubic-bezier(.22,1,.26,1), height 1.6s cubic-bezier(.22,1,.26,1),
              min-width 1.6s cubic-bezier(.22,1,.26,1), min-height 1.6s cubic-bezier(.22,1,.26,1);
}
.stage.is-sky .panel { cursor: zoom-out; }
.panel__sky {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  animation: djen-ken 34s ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
}
/* while the square travels, nothing else may cost a frame */
.stage.is-moving .panel__sky { animation-play-state: paused; will-change: auto; }
.stage.is-moving .panel { will-change: width, height; }
.stage.is-moving .erase i { animation-play-state: paused; }
@keyframes djen-ken {
  0%   { transform: translate3d(1.2%, -1%, 0) scale(1.08); }
  50%  { transform: translate3d(-1.6%, 1.4%, 0) scale(1.24); }
  100% { transform: translate3d(1.2%, -1%, 0) scale(1.08); }
}
.panel__black {
  position: absolute; inset: 0; z-index: 2;
  background: #0d0d0d; opacity: 0; pointer-events: none;
  transition: opacity .7s ease;
}
.panel.is-contact .panel__black, .panel.is-legal .panel__black { opacity: 1; }

/* the hairline, night skin only, full screen only */
.panel__frame {
  position: absolute; inset: 0; z-index: 6;
  border: 1px solid var(--djen-frame, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.panel.is-open .panel__frame { opacity: 1; }

.sky__close {
  position: absolute; z-index: 7;
  top: clamp(14px, 2.6vw, 46px); right: clamp(14px, 2.6vw, 46px);
  appearance: none; background: none; border: 0; padding: 0;
  font-size: clamp(12px, .85vw, 14px);
  letter-spacing: .02em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 18px rgba(0,0,0,.35);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease .3s;
}
.stage.is-sky .sky__close { opacity: 1; pointer-events: auto; transition: opacity .5s ease .9s; }
.sky__close:hover { opacity: .45; }

/* ---------- trace: one poster, this minute, nothing else ---------- */
.trace-room {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 4.4vw, 78px);
  padding: clamp(18px, 3.4vw, 62px);
  background: var(--djen-bg, #fff);
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
.trace-room.is-open { opacity: 1; pointer-events: auto; }
.room__sheet {
  flex: 0 0 auto;
  height: min(74svh, 660px);
  aspect-ratio: 1240 / 1748;
  overflow: hidden;
  background: color-mix(in srgb, var(--djen-ink, #0d0d0d) 5%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--djen-ink, #0d0d0d) 12%, transparent);
  opacity: 1;
  transition: opacity .75s ease;
}
.trace-room.is-turning .room__sheet { opacity: 0; transition: opacity .3s ease; }
.room__sheet canvas { display: block; width: 100%; height: 100%; }
.room__side { max-width: 34ch; display: flex; flex-direction: column; gap: clamp(13px, 1.5vw, 24px); }
.room__title { margin: 0; font-weight: 200; font-size: clamp(19px, 2.05vw, 34px); line-height: 1.16; letter-spacing: -.02em; text-wrap: pretty; }
.room__hint { margin: 0; font-weight: 200; font-size: clamp(12px, .88vw, 15px); line-height: 1.62; opacity: .58; text-wrap: pretty; }
.room__ed { font-weight: 500; font-size: clamp(9px, .66vw, 11px); letter-spacing: .16em; text-transform: uppercase; opacity: .4; font-variant-numeric: tabular-nums; }
.room__own { margin: calc(clamp(13px, 1.5vw, 24px) * -0.55) 0 0; font-weight: 200; font-size: clamp(11px, .8vw, 13px); line-height: 1.55; opacity: .45; max-width: 30ch; text-wrap: pretty; }
.room__acts { display: flex; flex-wrap: wrap; gap: .8em clamp(18px, 1.9vw, 32px); }
.room__act {
  appearance: none; background: none; border: 0; padding: 0;
  font-weight: 500; font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; opacity: .42;
  transition: opacity .24s ease;
}
.room__act:hover { opacity: 1; }
.room__act--take { opacity: 1; }
.room__act--take:hover { opacity: .5; }
.room__msg { font-weight: 500; font-size: clamp(10px, .72vw, 12px); letter-spacing: .06em; text-transform: uppercase; opacity: .55; min-height: 1em; }
.room__close {
  position: absolute; top: clamp(14px, 2.6vw, 46px); right: clamp(14px, 2.6vw, 46px);
  appearance: none; background: none; border: 0; padding: 0;
  font-size: clamp(12px, .85vw, 14px);
  letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer; opacity: .5; transition: opacity .2s ease;
}
.room__close:hover { opacity: 1; }

/* ---------- layers: a plain fade, nothing moves ---------- */
.layer {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--djen-stage-w, 100%); height: var(--djen-stage-h, 100%);
  transform: translate3d(-50%, -50%, 0);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 3.4vw, 62px);
  gap: clamp(16px, 2vw, 34px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease 0s;
}
.layer.is-visible { opacity: 1; pointer-events: auto; transition: opacity .46s ease .88s; }
.layer--about {
  z-index: 3;
  color: var(--djen-about-ink, #0d0d0d);
  background: linear-gradient(to top, var(--djen-about-scrim, transparent) 0%, var(--djen-about-scrim, transparent) 38%, transparent 78%);
}
.layer--about .layer__close { color: var(--djen-about-ink, #0d0d0d); }
.layer--contact { z-index: 4; color: #fff; justify-content: space-between; gap: clamp(18px, 2.2vw, 38px); }
.layer--contact a { color: #fff; }

.layer__close {
  position: absolute;
  top: clamp(14px, 2.6vw, 46px); right: clamp(14px, 2.6vw, 46px);
  appearance: none; background: none; border: 0; padding: 0;
  font-size: clamp(12px, .85vw, 14px);
  letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer;
}
.layer__close:hover { opacity: .45; }

/* ---------- about ---------- */
.lede {
  margin: 0; max-width: 40ch;
  font-weight: 200;
  font-size: clamp(18px, 2.3vw, 40px);
  line-height: 1.28; letter-spacing: -.02em;
  text-wrap: pretty;
}
.lede img { display: inline-block; height: .56em; width: auto; vertical-align: baseline; margin-right: .12em; filter: var(--djen-about-logo, none); }
[dir="rtl"] .lede { max-width: 34ch; line-height: 1.6; letter-spacing: 0; }
[dir="rtl"] .lede img { margin: 0 0 0 .12em; }
.meta {
  margin: 0;
  font-weight: 500;
  font-size: clamp(11px, .72vw, 12px);
  line-height: 1.6; letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .62;
}
.meta span { white-space: nowrap; }
.refs {
  margin: calc(clamp(16px, 2vw, 34px) * -1) 0 0;
  font-weight: 500;
  font-size: clamp(11px, .72vw, 12px);
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-wrap: pretty;
}
.refs__label { opacity: .62; margin-inline-end: .9em; }
.refs__list { opacity: .75; }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 34px); }
.insta { display: inline-flex; align-items: center; gap: .34em; }
.insta svg { width: .9em; height: .9em; flex: 0 0 auto; }

/* ---------- contact ---------- */
.contact__foot { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 30px); min-height: 0; }
.contact__grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(24px, 3vw, 64px); }
.contact__col { flex: 1 1 300px; display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 36px); }
.contact__col--where { flex: 1 1 220px; gap: clamp(16px, 1.8vw, 30px); }
.contact__here,
.contact__mail,
.say__input {
  font-weight: 200;
  font-size: clamp(16px, 2.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -.02em;
}
.contact__here { white-space: nowrap; }
.contact__reach { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; }
.contact__minor,
.where__addr {
  font-weight: 200;
  font-size: clamp(14px, 1.15vw, 20px);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.contact__minor { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em clamp(16px, 1.8vw, 30px); }

.where { display: flex; flex-direction: column; gap: .4em; opacity: .4; transition: opacity .7s ease; }
.where.is-live { opacity: 1; }
.where__label {
  display: flex; align-items: center; gap: .7em;
  font-weight: 500; font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .06em; text-transform: uppercase;
}
.where__label time { opacity: .5; font-variant-numeric: tabular-nums; }
.where__dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.where.is-live .where__dot { animation: djen-pulse 3.6s ease-in-out infinite; }
.where__trip {
  font-weight: 500; font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .5;
}

/* one line, sent to WordPress */
.say { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 26px); width: min(100%, 30ch); }
.say__input {
  flex: 1 1 auto; min-width: 0;
  appearance: none; background: none;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.4); border-radius: 0;
  padding: .4em 0;
  font-family: inherit;
  color: #fff; outline: none;
}
.say__input::placeholder { color: rgba(255,255,255,.42); }
.say__send {
  appearance: none; background: none; border: 0; padding: 0;
  font-weight: 500; font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; cursor: pointer; white-space: nowrap;
}
.say__send:hover { opacity: .5; }
.say__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.say__msg { flex: 1 1 100%; font-weight: 500; font-size: clamp(10px, .72vw, 12px); letter-spacing: .02em; opacity: .55; }
.say__input, .say__send { transition: opacity .3s ease; }
.say.is-sent .say__input, .say.is-sent .say__send { display: none; }
.say.is-sent .say__msg { opacity: 1; font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .22em; }

/* ---------- Bio & CV ---------- */
.cv {
  flex: 0 0 auto;
  margin-right: clamp(58px, 7vw, 120px);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 18px;
  font-weight: 500; font-size: clamp(11px, .72vw, 12px);
  letter-spacing: .06em; text-transform: uppercase;
}
.cv__btn {
  appearance: none; background: none;
  border: 1px solid rgba(255,255,255,.4); border-radius: 0;
  padding: .7em 1.1em;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.cv__btn:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.cv__form { display: flex; align-items: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .32s ease; }
.cv__form.is-visible { opacity: 1; pointer-events: auto; }
.cv__input {
  appearance: none; background: none;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.4); border-radius: 0;
  padding: .5em 0; width: 15ch;
  font-family: inherit;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; outline: none;
}
.cv__input::placeholder { color: rgba(255,255,255,.5); }
.cv__ok { appearance: none; background: none; border: 0; padding: 0; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cv__ok:hover { opacity: .5; }
.cv__msg { opacity: .55; text-transform: none; letter-spacing: .02em; }

/* ---------- legal, read as a colophon ---------- */
.legal-link {
  appearance: none; background: none; border: 0; padding: 0;
  align-self: flex-start;
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; opacity: .45;
  cursor: pointer;
  transition: opacity .2s ease;
}
.legal-link:hover { opacity: 1; }
.layer--legal { z-index: 5; color: #fff; justify-content: center; }
.legal {
  display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 44px);
  max-width: min(100%, 1180px);
  max-height: 82%;
  overflow-y: auto;
  padding-inline-end: 12px;
  font-weight: 200;
  font-size: clamp(11px, .85vw, 15px);
  line-height: 1.78;
  scrollbar-width: thin;
}
.legal__title {
  margin: 0;
  font-weight: 200;
  font-size: clamp(18px, 2.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.legal__list { columns: 30ch 2; column-gap: clamp(26px, 4.6vw, 84px); column-rule: 1px solid rgba(255,255,255,.13); }
.legal__entry { break-inside: avoid; margin: 0 0 clamp(16px, 1.9vw, 30px); }
.legal__term { font-weight: 500; font-size: .78em; letter-spacing: .09em; text-transform: uppercase; opacity: .42; }
.legal__body { margin: .5em 0 0; max-width: 44ch; white-space: pre-line; opacity: .88; text-wrap: pretty; hyphens: auto; }
/* iOS turns SIRET and phone numbers into tel: links — keep them readable on black */
.legal a, .legal a:hover, .legal a:visited,
.meta a, .meta a:hover, .meta a:visited { color: #fff; text-decoration: none; }

/* no hover on a finger: a tap must not leave a state behind */
@media (hover: none) {
  a:hover { opacity: 1; }
  .langs a:hover, .nav button:hover, .sound:hover, .room__act:hover,
  .sky__close:hover, .room__close:hover, .layer__close:hover, .legal-link:hover,
  .say__send:hover, .cv__ok:hover { opacity: inherit; }
  .langs a.is-active, .nav button.is-active, .sound[aria-pressed="true"] { opacity: 1; }
  .cv__btn:hover { border-color: rgba(255,255,255,.4); background: none; }
}

/* four clocks are two clocks on a very small screen */
@media (max-width: 400px) {
  .bar--top .clock:nth-of-type(3), .bar--top .clock:nth-of-type(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drift, .panel__poem .drift, .panel__sky, .erase i, .sound__dot, .where__dot { animation: none; }
}

/* ---------- small screens: one line per bar, thumb-sized targets ---------- */
@media (max-width: 700px) {
  .hero { padding: 0 max(7.2vw, env(safe-area-inset-left, 0px)); }

  .bar {
    min-height: 54px;
    padding: 13px 0;
    flex-wrap: nowrap;
  }
  /* top bar must hold four clocks + three languages on one line */
  .bar--top { font-size: 11px; gap: 7px; }
  .sound { gap: .4em; min-height: 44px; margin-block: -7px; }
  .refs { font-size: 11px; }
  .legal { font-size: 11px; max-height: none; flex: 1 1 auto; min-height: 0; padding-inline-end: 8px; }
  .legal__list { columns: auto 1; column-rule: 0; }
  .layer--legal { justify-content: flex-start; padding-block: 64px 30px; }
  .legal-link { font-size: 10px; min-height: 28px; display: flex; align-items: center; }
  .bar--top .clock { gap: .45em; }
  .langs { gap: 9px; }
  /* le logotype, moitié plus petit, centré sur la ligne About · Contact */
  .mark { height: max(.85svh, 7px); align-self: center; }

  /* bottom bar: lifted clear of in-app browser toolbars (Instagram, TikTok) */
  .bar--bottom {
    font-size: 13px; gap: 16px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    min-height: calc(84px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }
  /* the logotype must sit on the same optical line as About / Contact */
  .bar--bottom .mark { height: 13px; display: flex; align-items: center; min-height: 30px; }
  .bar--bottom .tagline { display: none; }
  .nav { gap: 16px; flex-wrap: nowrap; }


  .langs a, .nav button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -7px;
  }

  .layer__close { min-height: 44px; display: inline-flex; align-items: center; }
  .layer--contact { overflow-y: auto; padding-block: 64px 28px; gap: 24px; }
  .contact__here { white-space: normal; }
  .contact__grid { gap: 22px; }
  .say { width: 100%; }
  .say__input { padding: .6em 0; }
  .say__send { min-height: 44px; display: inline-flex; align-items: center; }
  .meta, .cv { font-size: 11px; }
  .cv { margin-right: 52px; }
  .cv__btn { padding: .9em 1.2em; }
  .cv__input { width: 13ch; padding: .7em 0; }

  .trace-room { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; padding-block: 64px 30px; overflow-y: auto; }
  .room__sheet { height: 40svh; align-self: center; }
  .room__side { max-width: none; gap: 14px; }
  .room__close { min-height: 44px; display: inline-flex; align-items: center; }
  .room__act { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ---------- la veille : une phrase par heure, et ce dont le site se souvient ---------- */
/* la zone de clic déborde, la barre ne grandit pas : la scène garde sa hauteur,
   et le poème son rythme */
.seuil {
  appearance: none; background: none; border: 0;
  box-sizing: content-box;
  width: 14px; height: 14px;
  padding: 13px 8px; margin: -13px -8px;
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seuil__dot {
  display: grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--djen-ink, #0d0d0d);
  animation: djen-seuil 6.5s ease-in-out infinite;
  will-change: opacity, transform;
}
.seuil__dot::after {
  content: ''; display: block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--djen-ink, #0d0d0d);
}
@keyframes djen-seuil { 0%, 100% { opacity: .34; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } }
.seuil:hover .seuil__dot, .seuil:focus-visible .seuil__dot { opacity: 1; animation: none; transform: scale(1.12); }
.seuil.is-known .seuil__dot { animation-duration: 4s; }
.seuil[aria-expanded="true"] .seuil__dot { opacity: 1; animation: none; transform: scale(1.12); }

.veille {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(26px, 6vw, 96px);
  color: #fff;
  text-shadow: 0 0 26px rgba(0, 0, 0, .45);
  background: linear-gradient(to bottom, rgba(8,10,14,.42) 0%, rgba(8,10,14,.14) 34%, rgba(8,10,14,.52) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease;
}
.veille.is-open { opacity: 1; pointer-events: auto; transition: opacity 1.1s ease .7s; }
/* la veille se lit sur le ciel, plein écran */
body.veille-open .panel { width: 100%; height: 100%; min-width: 0; min-height: 0; }
body.veille-open .panel__frame { opacity: 1; }
body.veille-open .erase { opacity: 0; transition: opacity .4s ease; }
.veille__inner {
  display: flex; flex-direction: column;
  gap: clamp(18px, 2.6vw, 40px);
  width: min(58ch, 100%);
  max-height: 100%;
  overflow-y: auto;
}
.veille__mem {
  margin: 0;
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: opacity 1.4s ease .5s;
}
.veille__mem.is-on { opacity: .38; }
.veille__phrase {
  margin: 0;
  font-weight: 200;
  font-size: clamp(26px, 3.6vw, 62px);
  line-height: 1.16;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.veille__phrase span {
  display: inline;
  opacity: 0;
  animation: djen-veille-in 1.6s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes djen-veille-in { from { opacity: 0; } to { opacity: 1; } }
[dir="rtl"] .veille__phrase { letter-spacing: 0; line-height: 1.45; }

.veille__past {
  display: flex; flex-direction: column; gap: .5em;
  font-size: clamp(12px, 1vw, 15px);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 1.2s ease .8s;
}
.veille__past.is-on { opacity: .34; max-height: 10em; }
.veille__past-label { font-size: clamp(9px, .7vw, 11px); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.veille__past-line { font-weight: 200; font-style: italic; }

/* la nuit à Beyrouth. Le jour, il ne reste que le filet. */
.veille__night {
  border-top: 1px solid rgba(255, 255, 255, .28);
  padding-top: clamp(12px, 1.6vw, 22px);
  min-height: 1px;
}
.veille__night-line {
  margin: 0;
  font-weight: 200; font-style: italic;
  font-size: clamp(14px, 1.3vw, 20px);
  text-transform: lowercase;
  opacity: 0;
  transition: opacity 2s ease 1.2s;
}
.veille__night.is-awake {
  border-top-color: transparent;
  background: rgba(9, 9, 11, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f2ede6;
  margin-inline: calc(-1 * clamp(14px, 2vw, 30px));
  padding: clamp(14px, 1.8vw, 26px) clamp(14px, 2vw, 30px);
}
.veille__night.is-awake .veille__night-line { opacity: .92; }

.veille__acts {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .7em clamp(18px, 1.9vw, 32px);
}
.veille__take {
  appearance: none; background: none; border: 0;
  padding: 12px 0; margin: -12px 0;
  font: inherit; font-weight: 500;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  opacity: .85; transition: opacity .24s ease;
}
.veille__take:hover { opacity: .45; }
.veille__take[disabled] { opacity: .35; cursor: default; }
.veille__stamp {
  font-weight: 500; font-size: clamp(9px, .66vw, 11px);
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .5; font-variant-numeric: tabular-nums;
}
.veille__msg {
  font-weight: 500; font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .06em; text-transform: uppercase; opacity: .7;
}

.veille__close {
  position: absolute; z-index: 2;
  top: clamp(14px, 2.6vw, 46px); inset-inline-end: clamp(14px, 2.6vw, 46px);
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: clamp(10px, .8vw, 12px);
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 18px rgba(0, 0, 0, .35);
  opacity: .7; cursor: pointer; transition: opacity .24s ease;
}
.veille__close:hover { opacity: 1; }

@media (max-width: 720px) {
  .seuil { padding: 15px 11px; margin: -15px -11px -15px 6px; }
  .veille { align-items: flex-start; padding-block: 64px 28px; overflow-y: auto; }
  .veille__inner { width: 100%; }
  .veille__acts {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .7em clamp(18px, 1.9vw, 32px);
}
.veille__take {
  appearance: none; background: none; border: 0;
  padding: 12px 0; margin: -12px 0;
  font: inherit; font-weight: 500;
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  opacity: .85; transition: opacity .24s ease;
}
.veille__take:hover { opacity: .45; }
.veille__take[disabled] { opacity: .35; cursor: default; }
.veille__stamp {
  font-weight: 500; font-size: clamp(9px, .66vw, 11px);
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .5; font-variant-numeric: tabular-nums;
}
.veille__msg {
  font-weight: 500; font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .06em; text-transform: uppercase; opacity: .7;
}

.veille__close { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .veille__phrase span { animation-duration: .01s; }
}