/* Les fontes, servies par la maison.

   Elles venaient de fonts.googleapis.com : une feuille de style tierce
   bloquante, deux poignées de main TLS, et le texte qui attend. Les
   mêmes fichiers, posés ici, arrivent sur la connexion déjà ouverte.
   Seules les plages latines sont embarquées — le site est en français.
   Ce sont des fontes variables : un fichier couvre toutes les graisses. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/Outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/Outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --wall: #f3efe6;
  --paper: #faf7f1;
  --ink: #161412;
  --quiet: #6f675e;
  --line: #d8d0c4;
  --bronze: #5c4634;
  --ok: #2f4a38;

  /* Les pigments. Tirés d’une boîte de couleurs, jamais saturés : ils
     désignent — une offre, une portée, un état — et ne décorent pas. Tous
     tiennent le rapport de contraste AA sur le mur comme sur le papier. */
  --ocre: #8a6220;      /* jaune de Naples assombri — ce qui modifie */
  --terre: #9d5233;     /* terre de Sienne brûlée — ce qui sort du site */
  --olive: #5f6b40;     /* terre verte — ce qui observe */
  --indigo: #3f4d6b;    /* indigo — ce qui lit, ce qui informe */
  --prune: #6a3d54;     /* garance sombre — ce qui est rare */
  --alerte: #8a2d2d;    /* rouge de Venise — ce qui casse */

  /* Les mêmes, étendus au lavis : des fonds, pas des traits. */
  --ocre-voile: #f6efdf;
  --terre-voile: #f7ebe4;
  --olive-voile: #eef0e5;
  --indigo-voile: #e9ecf2;
  --prune-voile: #f3e9ee;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Outfit", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.01em;
}
img { max-width: 100%; height: auto; display: block; }
/* `img { display: block }` l'emporte sur la règle par défaut du navigateur
   pour `[hidden]` : sans cette ligne, une image masquée continue d'occuper
   la place et montre son icône de visuel cassé — c'est ce qui traînait
   dans l'aperçu de l'admin réseaux. */
[hidden] { display: none !important; }
a { color: inherit; }
/* Même la sélection reste dans la boîte de couleurs. */
::selection { background: var(--ocre-voile); color: var(--ink); }
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus { left: 1rem; top: 1rem; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* La barre, le contenu et le pied partagent la même gouttière et la même
   largeur maximale : sans cela, le logo et le premier titre ne tombent pas
   sur la même verticale, et la maison penche. */
.site-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  padding: 1.35rem var(--gut);
  border-bottom: 1px solid var(--line);
}
.site-bar, .colophon, .site-foot {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gut));
  margin-inline: auto;
}
.mark {
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mark em { font-style: italic; font-weight: 400; color: var(--bronze); }
/* L'écart se resserre avant que les libellés ne touchent le logo, et la
   rangée sait passer à la ligne plutôt que déborder de l'écran. */
.site-bar nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem clamp(0.9rem, 1.9vw, 1.4rem);
  min-width: 0;
}
.site-bar nav a {
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--quiet);
}
.site-bar nav a:hover { color: var(--ink); }
.nav-cta { color: var(--ink) !important; }
.site-bar a:focus-visible, .nav-toggle:focus-visible, .site-search input:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
.site-search {
  position: relative;
  flex: 1 1 12rem;
  max-width: 22rem;
  min-width: 0;
}
.site-search input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: 0.92rem;
}
.site-search input::placeholder { color: var(--quiet); }
.site-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  z-index: 40;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--bronze) 30%, transparent);
}
.site-suggest a {
  display: block;
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.site-suggest a:hover,
.site-suggest a.is-on { background: var(--ocre-voile); }
.site-suggest strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
}
.site-suggest span {
  display: block;
  color: var(--quiet);
  font-size: 0.8rem;
}


/* Avis posé au-dessus de la page : un carton, pas une ligne dans le flux.
   Il s’en va tout seul — le JS pose .is-out, puis retire l’élément. */
.flashes {
  position: fixed;
  top: max(5.2rem, calc(env(safe-area-inset-top) + 4.5rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: min(32rem, calc(100vw - 2rem));
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.atelier-app .flashes,
.admin-app .flashes,
.auth-page .flashes,
.letter-page .flashes,
.admin-login .flashes {
  top: max(1.45rem, env(safe-area-inset-top));
}
.flash {
  pointer-events: auto;
  margin: 0;
  padding: 0.95rem 1.2rem 1rem 1.15rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bronze) 58%, var(--paper)),
    0 0 0 5px var(--paper),
    0 0 0 6px color-mix(in srgb, var(--bronze) 42%, var(--paper)),
    0 18px 36px -18px color-mix(in srgb, var(--bronze) 30%, transparent);
  animation: flash-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.flash::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1px;
  margin: 0 0 0.7rem;
  background: var(--bronze);
}
.flash-ok { color: var(--ok); }
.flash-ok::before { background: var(--ok); }
.flash-ok {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ok) 42%, var(--paper)),
    0 0 0 5px var(--paper),
    0 0 0 6px color-mix(in srgb, var(--ok) 32%, var(--paper)),
    0 18px 36px -18px color-mix(in srgb, var(--ok) 22%, transparent);
}
.flash-info { color: var(--indigo); }
.flash-info::before { background: var(--indigo); }
.flash-info {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--indigo) 42%, var(--paper)),
    0 0 0 5px var(--paper),
    0 0 0 6px color-mix(in srgb, var(--indigo) 32%, var(--paper)),
    0 18px 36px -18px color-mix(in srgb, var(--indigo) 20%, transparent);
}
.flash-error { color: var(--alerte); }
.flash-error::before { background: var(--alerte); }
.flash-error {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--alerte) 42%, var(--paper)),
    0 0 0 5px var(--paper),
    0 0 0 6px color-mix(in srgb, var(--alerte) 32%, var(--paper)),
    0 18px 36px -18px color-mix(in srgb, var(--alerte) 20%, transparent);
}
.flash.is-out {
  opacity: 0;
  transform: translateY(-10px);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}
h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.lead, .lead-sm { color: var(--quiet); line-height: 1.65; }
.lead { font-size: 1.15rem; margin: 1.6rem 0 2.2rem; }
.lead-sm { margin: 0.7rem 0 0; }
.hero-actions, .atelier-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 0.75rem 1.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--sans);
  transition: transform 0.35s ease, opacity 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ghost { border-color: var(--line); }
.btn:hover { opacity: 1; transform: translateY(-2px); }
.btn-ink:hover { background: var(--bronze); border-color: var(--bronze); }
.btn:not(.btn-ink):hover { border-color: var(--bronze); color: var(--bronze); }
.btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.btn:disabled, .btn[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}


.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem 1.4rem;
  padding: 1.4rem var(--gut);
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: 0.85rem;
}
.site-foot p { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.7rem 1.15rem; }
.site-foot a { color: var(--bronze); text-decoration-color: var(--line); }
.site-foot a:hover { text-decoration-color: var(--bronze); }
.colophon {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) auto minmax(12rem, 1fr);
  align-items: start;
  gap: 2rem 3rem;
  padding: 2.4rem var(--gut) 2.6rem;
}
.colophon-brand .mark { display: inline-block; margin-bottom: 0.45rem; }
.colophon-brand p + p { max-width: 28rem; line-height: 1.55; }
.facts {
  margin: 0;
  display: grid;
  gap: 0.55rem 1.2rem;
}
.facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.4rem; }
.facts dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}
.facts dd { margin: 0; }
/* Les questions : deux colonnes quand la place le permet, parce qu'une
   colonne de six réponses pousse le pied de page très loin. */
.faq .band { max-width: none; }
.faq dl {
  margin: 0;
  columns: 2 26rem;
  column-gap: clamp(1.6rem, 4vw, 4rem);
}
.faq dl > div {
  break-inside: avoid;
  padding: 0 0 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.faq dt {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
}
.faq dd {
  margin: 0.45rem 0 0;
  color: var(--quiet);
  line-height: 1.6;
}
.board {
  display: grid;
  gap: 1.6rem;
}
.board > .stat-row { margin-bottom: 0; }
.board > .panel { margin: 0; }
.viewing-room { align-items: start; }
.atelier-side .nav-label {
  margin: 1.15rem 0 0.2rem;
  padding: 0 0.55rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}
.atelier-side .nav-label:first-of-type { margin-top: 0.2rem; }


.crumb { padding: 1.6rem 0 0; }
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--quiet);
  font-size: 0.88rem;
}
.crumb li:not(:last-child)::after {
  content: "·";
  margin-left: 0.45rem;
  color: var(--line);
}
.crumb a { text-decoration: none; color: var(--quiet); font-size: inherit; }
.crumb a:hover { color: var(--bronze); }
.crumb [aria-current] { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   LA PARTIE PUBLIQUE — une maison qui montre des œuvres
   ═══════════════════════════════════════════════════════════════════════

   Le site montrait des listes de noms. Une galerie ne se visite pas en
   lisant un répertoire : elle se visite en regardant les murs. Tout ce
   qui suit part de là — l'image d'abord, le texte pour la nommer.

   Trois formes seulement, reprises partout :

     le cadre  (.frame)   un passe-partout de papier autour d'un visuel ;
     la carte  (.card)    une salle ou une œuvre, image puis cartel ;
     la bande  (.band)    un intertitre : surtitre, titre, lien à droite.

   Les couleurs ne changent pas. La boîte de pigments reste celle d'avant.
   ─────────────────────────────────────────────────────────────────── */

/* ── L'échelle de la page ────────────────────────────────────────────── */

:root {
  /* La marge de la page, d'un seul endroit : la barre, le pied et le
     contenu doivent s'aligner au pixel, sinon la maison bascule. */
  --gut: clamp(1.15rem, 5.2vw, 5.5rem);
  --measure: 40rem;   /* une colonne de texte lisible */
  --wide: 96rem;      /* au-delà, on cesse d'étirer */
}

main {
  flex: 1;
  padding: 0 var(--gut) 5rem;
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gut));
  margin: 0 auto;
}
.home main { padding-top: 0; }

/* Une section qui sort des marges pour aller d'un bord à l'autre. */
.bleed {
  margin-left: calc(-1 * var(--gut));
  margin-right: calc(-1 * var(--gut));
}

/* ── La bande d'intertitre ───────────────────────────────────────────── */

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  margin: 0 0 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.band > div { min-width: 0; }
.band .eyebrow { margin-bottom: 0.35rem; }
.band h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
}
.band p {
  margin: 0.6rem 0 0;
  color: var(--quiet);
  line-height: 1.6;
  max-width: var(--measure);
}
.band-link {
  color: var(--bronze);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.band-link:hover { border-bottom-color: var(--bronze); }

section + section { margin-top: clamp(3.2rem, 6vw, 5.5rem); }

/* ── Le cadre ────────────────────────────────────────────────────────────
   Une œuvre n'est pas une vignette : elle est montée sur un passe-partout
   de papier, avec une ombre courte qui la décolle du mur. Le visuel garde
   ses proportions — c'est tout l'objet du cadre. */

.frame {
  margin: 0;
  background: var(--paper);
  padding: clamp(0.7rem, 1.5vw, 1.4rem);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bronze) 16%, transparent),
    0 14px 30px -22px color-mix(in srgb, var(--ink) 55%, transparent);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.frame img {
  width: 100%;
  height: auto;
  display: block;
}
/* Quand la place est contrainte (une rangée régulière), le visuel se
   recadre plutôt que de crever la ligne. */
.frame.is-cropped img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
a:hover > .frame,
a:hover .frame {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bronze) 42%, transparent),
    0 22px 40px -22px color-mix(in srgb, var(--ink) 60%, transparent);
}

/* Le cartel sous une œuvre. */
.tag-line {
  margin: 0.85rem 0 0;
  display: block;
}
.tag-line strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
}
.tag-line span {
  display: block;
  color: var(--quiet);
  font-size: 0.86rem;
  margin-top: 0.2rem;
  line-height: 1.45;
}
.tag-line .by { color: var(--bronze); }

/* ── L'accueil : le vestibule ───────────────────────────────────────── */

.foyer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}
.foyer-say { max-width: 34rem; }
.foyer h1 {
  font-size: clamp(2.9rem, 6.4vw, 5rem);
  line-height: 0.98;
  font-weight: 500;
}
.foyer h1 em {
  font-style: italic;
  color: var(--bronze);
}
.foyer .lead { margin: 1.5rem 0 2rem; }

/* Le triptyque : trois œuvres réelles, décalées comme un accrochage.
   C'est la première chose que voit un visiteur — donc ce sont des
   œuvres, pas une illustration. */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0.7rem, 1.6vw, 1.5rem);
}
.triptych li { list-style: none; }
.triptych a { text-decoration: none; display: block; }
.triptych li:nth-child(1) { transform: translateY(clamp(0.8rem, 2.4vw, 2.6rem)); }
.triptych li:nth-child(3) { transform: translateY(clamp(-2.6rem, -2vw, -0.6rem)); }
.triptych .tag-line strong { font-size: 0.98rem; }
.triptych .tag-line span { font-size: 0.78rem; }

/* Rien n'est encore accroché : on ne montre pas un trou, on montre
   l'invitation. */
.triptych-empty {
  border: 1px dashed var(--line);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--quiet);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.5;
}

/* ── La salle à l'affiche ────────────────────────────────────────────── */

.affiche {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 3.6vw, 3.2rem);
  align-items: center;
}
.affiche-cover {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background: var(--paper);
}
.affiche-cover img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.affiche-cover:hover img { transform: scale(1.035); }
.affiche-say h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.02;
  margin: 0.2rem 0 0;
  letter-spacing: -0.02em;
}
.affiche-say h3 a { text-decoration: none; }
.affiche-say h3 a:hover { color: var(--bronze); }
.affiche-where {
  margin: 0.55rem 0 0;
  color: var(--quiet);
  font-size: 0.92rem;
}
.affiche-note {
  margin: 1.1rem 0 0;
  line-height: 1.7;
  color: var(--quiet);
  max-width: 34rem;
}
.affiche-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.affiche-strip a { display: block; text-decoration: none; }
.affiche-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper);
  transition: opacity 0.35s ease;
}
.affiche-strip a:hover img { opacity: 0.82; }
.affiche-go { margin: 1.5rem 0 0; }

/* ── Le mur ──────────────────────────────────────────────────────────────
   Un accrochage en colonnes : les œuvres gardent leurs proportions et se
   rangent comme sur une cimaise, pas comme dans un tableur. */

.wall-mosaic {
  columns: 4 17rem;
  column-gap: clamp(0.9rem, 2vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wall-mosaic li {
  break-inside: avoid;
  margin: 0 0 clamp(1.4rem, 2.6vw, 2.4rem);
}
.wall-mosaic a { text-decoration: none; display: block; }

/* ── Les disciplines ─────────────────────────────────────────────────── */

.disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.disciplines a {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 0.5rem 0.95rem;
  text-decoration: none;
  color: var(--quiet);
  font-size: 0.86rem;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.disciplines a:hover {
  border-color: var(--bronze);
  color: var(--ink);
  background: var(--paper);
}
.disciplines em {
  font-style: normal;
  color: var(--bronze);
  font-size: 0.78rem;
  margin-left: 0.35rem;
}

/* ── Les trois temps ─────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  border-top: 2px solid var(--line);
  padding-top: 1.1rem;
}
.steps li:nth-child(1) { border-top-color: var(--olive); }
.steps li:nth-child(2) { border-top-color: var(--bronze); }
.steps li:nth-child(3) { border-top-color: var(--terre); }
.steps b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
}
.steps li:nth-child(1) b { color: var(--olive); }
.steps li:nth-child(2) b { color: var(--bronze); }
.steps li:nth-child(3) b { color: var(--terre); }
.steps h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0.35rem 0 0.5rem;
  letter-spacing: -0.01em;
}
.steps p { margin: 0; color: var(--quiet); line-height: 1.6; }

/* ── Les salles, en cartes ───────────────────────────────────────────────
   Le répertoire montre des salles. Une salle a une image : la vignette de
   240 px posée à côté d'un nom ne disait rien de ce qu'il y a dedans. */

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.room-card { position: relative; }
/* Le lien enveloppe toute la carte : ses enfants sont des `span`, donc on
   les empile explicitement — sans quoi ils se rangent en ligne et le nom
   passe par-dessus l'image. */
.room-card > a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
}
.room-card-cover {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  aspect-ratio: 3 / 2;
}
.room-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.room-card > a:hover .room-card-cover img { transform: scale(1.04); }
/* Sans image de fond, la salle porte son initiale — un mur nu, pas un
   rectangle cassé. */
.room-card-cover.is-bare {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bronze) 8%, var(--paper)),
      var(--paper));
}
.room-card-cover.is-bare span {
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 4.4rem);
  color: color-mix(in srgb, var(--bronze) 55%, transparent);
  line-height: 1;
}
.room-card-say {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  transition: border-color 0.35s ease;
}
.room-card > a:hover .room-card-say { border-top-color: var(--bronze); }
.room-card-name {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.room-card > a:hover .room-card-name { color: var(--bronze); }
.room-card-meta {
  display: block;
  color: var(--quiet);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 0.3rem;
}
.room-card-say .room-card-meta { margin-top: 0; }
.room-card-name { display: block; }
.room-card-count { white-space: nowrap; }
/* La bande d'œuvres sous une salle : ce qu'on y verra en entrant. Elle
   vit dans le lien, pas à côté — une carte est un seul objet cliquable,
   et rien ne déborde sur la rangée suivante. */
.room-card-strip {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
/* En flex plutôt qu'en grille : une salle qui n'a que deux œuvres remplit
   la bande à deux, au lieu de laisser un trou à droite. */
.room-card-strip img {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper);
  transition: opacity 0.35s ease;
}
.room-card > a:hover .room-card-strip img { opacity: 0.85; }

/* La marque d'une offre haute — discrète, posée sur l'image. */
.tag {
  display: inline-block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  border: 1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
  padding: 0.16rem 0.45rem;
  vertical-align: middle;
  white-space: nowrap;
}
.room-card-flags {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  z-index: 2;
}
.room-card-flags .tag {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
}

/* ── L'en-tête d'une page publique ───────────────────────────────────── */

.page-head {
  padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  max-width: 48rem;
}
.page-head h1 {
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  line-height: 1;
}
.page-head .lead { margin: 1.2rem 0 0; }

/* La barre d'outils du répertoire. */
.finder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.2rem;
  margin: 1.8rem 0 0;
}
.finder input[type="search"] {
  flex: 1 1 16rem;
  max-width: 26rem;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.7rem 0.95rem;
}
.finder input[type="search"]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
.room-count { margin: 0; color: var(--quiet); font-size: 0.9rem; }
.room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.1rem 0 0;
}
.room-chips button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--quiet);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.room-chips button:hover { border-color: var(--bronze); color: var(--ink); }
.room-chips button.is-on {
  background: var(--ink);
  color: var(--wall);
  border-color: var(--ink);
}
.room-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}
.room-letters a { text-decoration: none; color: var(--quiet); }
.room-letters a:hover { color: var(--bronze); }

/* ── La salle d'un artiste ───────────────────────────────────────────── */

/* L'image de fond va d'un bord à l'autre : c'est le mur qu'on voit en
   entrant, pas une bannière posée dans une colonne. */
.room-hero {
  position: relative;
  margin-top: 1.2rem;
}
.room-hero-cover {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.room-hero-cover img {
  width: 100%;
  height: clamp(16rem, 42vw, 32rem);
  object-fit: cover;
}
/* Un voile en bas de l'image : le nom s'y pose et reste lisible quelle
   que soit l'œuvre au-dessus. */
.room-hero.has-cover .room-hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 35%,
    color-mix(in srgb, var(--ink) 62%, transparent) 100%
  );
}
.room-hero.has-cover .room-hero-say {
  position: absolute;
  left: clamp(1rem, 3vw, 2.6rem);
  right: clamp(1rem, 3vw, 2.6rem);
  bottom: clamp(1rem, 2.6vw, 2.2rem);
  color: var(--paper);
}
.room-hero.has-cover .room-hero-say .eyebrow { color: color-mix(in srgb, var(--paper) 82%, var(--bronze)); }
.room-hero.has-cover .room-hero-say .where { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.room-hero.has-cover .room-hero-say .tag {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
}
.room-hero-say h1 {
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.room-hero-say .where { color: var(--quiet); margin: 0.5rem 0 0; font-size: 1rem; }

/* Sous l'image : la note d'intention à gauche, les faits à droite.
   Les faits sont aussi ce qu'un moteur lit en premier. */
.room-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  padding: clamp(1.8rem, 4vw, 3rem) 0 0;
}
.statement {
  margin: 0;
  line-height: 1.75;
  font-size: 1.06rem;
  max-width: var(--measure);
}
.statement + .statement { margin-top: 1rem; }
.room-facts {
  margin: 0;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  font-size: 0.92rem;
}
.room-facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.room-facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-top: 0.16rem;
}
.room-facts dd { margin: 0; }
.room-facts a { color: var(--ink); text-decoration-color: var(--line); }
.room-facts a:hover { text-decoration-color: var(--bronze); }

/* L'œuvre mise en avant : elle occupe la largeur, comme un accrochage
   central. */
.spotlight { display: block; }
.spotlight a { text-decoration: none; display: block; }
.spotlight-figure {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  margin: 0;
}
.spotlight-figure img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
}
.spotlight figcaption strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.1;
  margin-top: 0.4rem;
}
.spotlight figcaption span {
  display: block;
  color: var(--quiet);
  margin-top: 0.5rem;
  line-height: 1.65;
}

/* L'accrochage. En colonnes : chaque toile garde sa forme. */
.hang {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 18rem;
  column-gap: clamp(1rem, 2.2vw, 2rem);
}
.hang li {
  break-inside: avoid;
  margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
}
.hang a { text-decoration: none; display: block; }
/* L'accrochage « salon » : moins de colonnes, des pièces plus grandes. */
.hang.salon { columns: 2 24rem; column-gap: clamp(1.6rem, 3.2vw, 3rem); }

.collection-block + .collection-block { margin-top: clamp(2.4rem, 5vw, 4rem); }

.empty-room, .room-contact { color: var(--quiet); padding: 2rem 0; }
.room-contact a { color: var(--bronze); }

/* ── La salle de vue — une œuvre seule ───────────────────────────────── */

.solo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 0.7fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  padding: 1.6rem 0 3rem;
  align-items: start;
}
/* Le mur de la salle de vue est plus sourd que celui du couloir : l'œil
   se pose sur l'œuvre, pas sur le fond. */
.solo-frame {
  margin: 0;
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  padding: clamp(1.2rem, 3.5vw, 3.5rem);
  display: grid;
  place-items: center;
  cursor: zoom-in;
}
.solo-frame img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--ink) 70%, transparent);
}
.cartel { position: sticky; top: 1.5rem; }
.cartel h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.cartel .by { text-decoration: none; color: var(--bronze); }
.cartel .by:hover { text-decoration: underline; }
.cartel .meta, .cartel .note { color: var(--quiet); line-height: 1.7; }
.cartel .meta { margin: 0.7rem 0 0; font-size: 0.95rem; }
.cartel .note { margin: 1.2rem 0 0; }
.cartel-facts {
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.88rem;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
.cartel-facts > div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.5rem; }
.cartel-facts dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-top: 0.1rem;
}
.cartel-facts dd { margin: 0; }

/* Précédente / suivante, en vignettes : on voit où l'on va. */
.walk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.walk a {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  text-decoration: none;
  color: var(--quiet);
  font-size: 0.82rem;
  min-width: 0;
}
.walk a img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  background: var(--paper);
}
.walk a:hover { color: var(--bronze); }
.walk .walk-next { grid-column: 2; text-align: right; }
.walk .walk-next img { order: 2; }
.walk .walk-next { grid-template-columns: minmax(0, 1fr) 3.6rem; }
.walk b {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
}
.share-row a, .share-row button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--quiet);
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.share-row a:hover, .share-row button:hover { border-color: var(--bronze); color: var(--ink); }

/* La suite de l'accrochage, sous l'œuvre : on ne quitte pas la salle par
   une impasse. Et les moteurs y lisent le lien entre les pages d'une même
   salle, ce qui compte autant que la visite. */
.more-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.more-strip a { text-decoration: none; display: block; }
.more-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper);
  transition: opacity 0.35s ease;
}
.more-strip a:hover img { opacity: 0.82; }
.more-strip .tag-line strong { font-size: 0.95rem; }
.more-strip .tag-line span { font-size: 0.78rem; }
.more-strip li.is-current { opacity: 0.4; pointer-events: none; }

/* La visionneuse : cliquer une œuvre l'ouvre en grand, sur le mur sombre. */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--ink) 93%, transparent);
  cursor: zoom-out;
  animation: viewer-in 0.3s ease both;
}
.viewer img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  box-shadow: 0 30px 70px -30px #000;
}
.viewer-close {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.6rem);
  right: clamp(0.8rem, 2vw, 1.6rem);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  color: var(--paper);
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
.viewer-close:hover { border-color: var(--paper); }
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Le formulaire de contact ────────────────────────────────────────── */

.contact-block {
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  max-width: var(--measure);
}
.contact-block h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.4rem; }

.auth-page main { display: grid; place-items: center; }
.auth-card, .sheet {
  width: min(34rem, 100%);
  padding: 2.5rem 0 3rem;
}
.auth-card h1, .atelier-head h1 { font-size: 2.8rem; }
form label { display: block; margin: 1.15rem 0; font-size: 0.86rem; letter-spacing: 0.04em; }
form input, form textarea, form select {
  width: 100%;
  margin-top: 0.4rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.55rem 0;
  font: inherit;
  color: inherit;
}
form textarea { resize: vertical; }
form small { display: block; color: var(--alerte); margin-top: 0.3rem; }
.hint { display: block; color: var(--quiet); font-size: 0.8rem; margin-top: 0.2rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.check { display: flex; align-items: center; gap: 0.7rem; }
.check input { width: auto; margin: 0; }
.auth-switch { color: var(--quiet); margin-top: 1.6rem; }

.atelier-head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: end;
  padding: 2.8rem 0 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.8rem;
}
.studio-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.6rem;
}
.studio-grid a { text-decoration: none; }
.studio-grid img {
  height: 220px;
  width: 100%;
  object-fit: contain;
  background: var(--paper);
  padding: 0.8rem;
}
.studio-grid strong { display: block; font-family: var(--serif); font-size: 1.2rem; margin-top: 0.55rem; }
.studio-grid span { color: var(--quiet); font-size: 0.85rem; }
.studio-grid .dim { opacity: 0.55; }

.work-edit {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.preview { margin: 0; background: var(--paper); padding: 1.4rem; }
.danger { margin: 2rem 0 0; }
.danger button {
  background: none;
  border: 0;
  color: var(--alerte);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Motion */
.hero, .strip article, .rooms, .auth-card, .room-intro, .solo {
  animation: rise 0.85s ease both;
}
.strip article:nth-child(2) { animation-delay: 0.08s; }
.strip article:nth-child(3) { animation-delay: 0.16s; }
.hang li, .studio-grid li, .room-list li, .stat-row li {
  animation: rise 0.7s ease both;
}
.hang li:nth-child(1), .studio-grid li:nth-child(1) { animation-delay: 0.04s; }
.hang li:nth-child(2), .studio-grid li:nth-child(2) { animation-delay: 0.08s; }
.hang li:nth-child(3), .studio-grid li:nth-child(3) { animation-delay: 0.12s; }
.hang li:nth-child(4), .studio-grid li:nth-child(4) { animation-delay: 0.16s; }
.hang li:nth-child(5), .studio-grid li:nth-child(5) { animation-delay: 0.2s; }
.hang li:nth-child(6), .studio-grid li:nth-child(6) { animation-delay: 0.24s; }
.hang a, .room-list a, .studio-grid > li > a {
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.hang a:hover, .studio-grid > li > a:hover { transform: translateY(-6px); }
.hang img, .studio-grid img, .solo-frame img, .preview img {
  transition: transform 0.7s ease;
}
.hang a:hover img, .studio-grid a:hover img { transform: scale(1.03); }
.site-bar nav a { transition: color 0.25s ease; }
.room-list a:hover .room-name { color: var(--bronze); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Atelier shell */
/* L'atelier et l'admin ne sont pas des pages de lecture : leur coquille
   prend l'écran entier, colonne sombre comprise. */
.atelier-app main, .admin-app main { max-width: none; padding: 0 0 3rem; }
.atelier-app .site-foot { display: none; }
.atelier-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100vh - 5rem);
}
.atelier-side {
  padding: 2.2rem 1.6rem;
  border-right: 1px solid var(--line);
}
.side-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}
.side-name {
  font-family: var(--serif);
  font-size: 1.55rem;
  margin: 0.35rem 0 0.4rem;
}
.side-status {
  margin: 0 0 1.6rem;
  font-size: 0.82rem;
  color: var(--quiet);
}
.side-status::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--line);
  vertical-align: 0.05em;
}
.side-status.is-open { color: var(--ok); }
.side-status.is-open::before { background: var(--ok); }
.side-nav { display: flex; flex-direction: column; gap: 0.35rem; }
.side-nav a {
  text-decoration: none;
  color: var(--quiet);
  font-size: 0.92rem;
  padding: 0.35rem 0;
  transition: color 0.25s ease, padding 0.25s ease;
}
.side-nav a:hover, .side-nav a.is-on { color: var(--ink); }
.side-nav a.is-locked {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  opacity: 0.62;
}
.side-nav a.is-locked em {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronze);
}
.atelier-canvas { padding: 0 4vw 3rem; }
.atelier-actions form { margin: 0; }
.stat-row {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
}
.stat-row li {
  border: 1px solid var(--line);
  padding: 1.2rem 1rem;
  background: var(--paper);
}
.stat-row span {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
}
.stat-row em {
  font-style: normal;
  color: var(--quiet);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.2rem;
}
.panel-head h2 { font-size: 1.6rem; }
.panel-head a { color: var(--bronze); text-decoration: none; font-size: 0.88rem; }
.studio-grid li { position: relative; }
.work-tools {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.work-tools form { margin: 0; }
.work-tools button {
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  width: 2rem;
  height: 1.8rem;
  font: inherit;
}
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.studio-grid.compact img { height: 180px; }

/* ── La lettre ──────────────────────────────────────────────────────────
   Porte fermée, cette page est le site entier. Elle n’a donc ni barre ni
   pied : une feuille posée sur le mur, avec son en-tête à la place du menu,
   ses actes à la place des pages, sa signature à la place du colophon.
   Tout ce qu’il y a à savoir d’Artworksdigital tient dedans. */
.letter-page {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background:
    radial-gradient(ellipse 70% 46% at 100% 0%, color-mix(in srgb, var(--bronze) 11%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 38% at 0% 100%, color-mix(in srgb, var(--ocre) 8%, transparent), transparent 52%),
    var(--wall);
}
.letter-page main {
  display: flex;
  justify-content: center;
  padding: clamp(2.4rem, 5vw, 4.2rem) 7vw clamp(3.2rem, 6vw, 5.2rem);
}
.letter-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.letter-page .letter {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(41rem, 100%);
  margin: 0 auto;
  padding: clamp(2.8rem, 5vw, 4.2rem) clamp(1.9rem, 4.4vw, 3.4rem) clamp(2.4rem, 4vw, 3.4rem);
  background:
    linear-gradient(168deg, var(--paper) 0%, var(--paper) 56%, color-mix(in srgb, var(--wall) 36%, var(--paper)) 100%);
  /* Double filet bronze, puis une ombre chaude et basse. */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bronze) 70%, var(--paper)),
    0 0 0 6px var(--paper),
    0 0 0 7px color-mix(in srgb, var(--bronze) 58%, var(--paper)),
    0 32px 54px -22px color-mix(in srgb, var(--bronze) 26%, transparent),
    0 10px 20px -12px color-mix(in srgb, var(--ink) 7%, transparent);
  animation: letter-settle 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes letter-settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* L’en-tête tient lieu de barre : la marque, et ce que fait la maison.
   Rien à cliquer en haut — on lit, puis on descend. */
.letter-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.4rem;
  margin-bottom: 2.9rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bronze) 34%, var(--paper));
}
.letter-mast .mark {
  font-size: 1.22rem;
  color: var(--ink);
}
.letter-mast .letter-place {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quiet);
}

.letter-head { margin: 0 0 2.6rem; }
.letter-head::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 1px;
  margin-top: 1.55rem;
  background: var(--bronze);
}
.letter-page .eyebrow {
  margin-bottom: 0.7rem;
  letter-spacing: 0.22em;
}
.letter h1 {
  font-size: clamp(2.35rem, 6.4vw, 3.55rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  hyphens: none;
}
.letter h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--bronze);
}
.letter h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.05rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1.15rem;
}
.letter h3 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.letter p {
  max-width: 52ch;
  margin: 0 0 1.05rem;
  line-height: 1.75;
  color: var(--quiet);
  font-weight: 300;
}
.letter p:last-child { margin-bottom: 0; }
.letter p a, .statement a, .lead a, .kael-note a {
  color: var(--bronze);
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
}
.letter p a:hover, .statement a:hover, .lead a:hover { text-decoration-color: var(--bronze); }
.letter a:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
.letter .letter-open {
  max-width: 26ch;
  margin-bottom: 1.35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.45;
  color: var(--ink);
}

/* Des actes, pas des sections : un chiffre romain et un silence. */
.letter-act { margin-top: 0; }
.letter-act + .letter-act {
  margin-top: 3.4rem;
  padding-top: 0;
}
.letter .letter-act-mark {
  max-width: none;
  margin: 0 0 0.85rem;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--bronze);
}

/* Cartels : la question, puis le « Oui. » */
.letter .emphasis {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.38rem, 2.4vw, 1.68rem);
  font-weight: 400;
  line-height: 1.35;
  max-width: 26ch;
  margin: 1.8rem 0 1.9rem;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 1px solid var(--bronze);
}
.letter .emphasis-ask { font-style: italic; }
.letter .emphasis-return {
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.7vw, 1.82rem);
  max-width: 16ch;
  margin: 1.9rem 0 1.7rem;
}
.letter .oui {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 1.28em;
  letter-spacing: -0.03em;
}

/* La définition en quatre lignes : ce qu’un moteur — humain ou génératif —
   doit pouvoir citer sans se tromper. */
.letter-facts {
  margin: 1.9rem 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--bronze) 24%, var(--paper));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.15rem 1.8rem;
}
.letter-facts div { min-width: 0; }
.letter-facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.3rem;
}
.letter-facts dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 300;
  overflow-wrap: anywhere;
}
.letter-facts a { color: var(--bronze); text-underline-offset: 0.2em; }

/* Les trois mouvements — l’atelier, l’accrochage, la galerie. */
.letter-moves {
  list-style: none;
  margin: 1.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.letter-moves li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
}
.letter-moves .move-no {
  font-family: var(--serif);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  color: var(--bronze);
}
.letter-moves p { margin: 0; max-width: 40ch; font-size: 0.96rem; }

/* Il y a / Il n’y a pas : la promesse, et son revers. */
.letter-contrast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 1.9rem 0 0;
}
.letter-contrast section { min-width: 0; }
.letter-contrast h3 {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bronze) 26%, var(--paper));
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}
.letter-contrast ul {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.letter-contrast li {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--quiet);
  font-weight: 300;
}
.letter-contrast .is-not li {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--terre) 38%, transparent);
}

/* Les salles déjà ouvertes : la porte du bas est fermée, celles-ci non. */
.letter-rooms {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.letter-rooms li + li { border-top: 1px solid color-mix(in srgb, var(--bronze) 18%, var(--paper)); }
.letter-rooms a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.75rem 0;
  text-decoration: none;
  color: var(--ink);
}
.letter-rooms a:hover .room-name { color: var(--bronze); }
.letter-rooms .room-name { font-size: 1rem; }
.letter-rooms .room-meta {
  font-size: 0.82rem;
  color: var(--quiet);
  letter-spacing: 0.02em;
}

/* Les offres, en clair : un nom, un prix, une phrase. */
.letter-offers {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.letter-offers li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1.2rem;
  padding: 0.85rem 0;
}
.letter-offers li + li { border-top: 1px solid color-mix(in srgb, var(--bronze) 18%, var(--paper)); }
.letter-offers .offer-name { font-size: 1rem; color: var(--ink); }
.letter-offers .offer-cost {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--bronze);
  white-space: nowrap;
}
.letter-offers .offer-line {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--quiet);
  max-width: 52ch;
}

/* Le renvoi vers une page encore ouverte : discret, mais c’est un lien. */
.letter-more {
  margin: 1.7rem 0 0;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
.letter-more a {
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bronze) 32%, var(--paper));
  padding-bottom: 0.14em;
}
.letter-more a:hover { border-bottom-color: var(--bronze); }

/* Les questions, dans la lettre : la réponse tient en une phrase. */
.letter-page .faq {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.letter-page .faq header { margin: 0; }
.letter-page .faq h2 { margin-bottom: 1.15rem; }
.letter-page .faq .eyebrow { display: none; }
.letter-page .faq dl {
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0;
}
.letter-page .faq dl > div { padding: 1.05rem 0; }
.letter-page .faq dl > div + div { border-top: 1px solid color-mix(in srgb, var(--bronze) 18%, var(--paper)); }
.letter-page .faq dt {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.letter-page .faq dd {
  margin: 0;
  max-width: 52ch;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--quiet);
  font-weight: 300;
}

/* La signature tient lieu de pied de page : à qui écrire, qui signe, et la
   porte de service — un tiret, rien de plus. */
.letter-close {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.85rem 1.6rem;
  margin-top: 3.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--bronze) 28%, var(--paper));
}
.letter .letter-write {
  max-width: none;
  margin: 0;
}
.letter .letter-write a {
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--bronze);
  border-bottom: 1px solid color-mix(in srgb, var(--bronze) 32%, var(--paper));
  padding-bottom: 0.14em;
}
.letter .letter-write a:hover {
  border-bottom-color: var(--bronze);
}

.letter .sign {
  max-width: none;
  margin: 0 0 0 auto;
  text-align: right;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}
.letter-close .gate {
  flex-basis: 100%;
}
.gate-dot {
  border: 0;
  background: none;
  padding: 0 0.15em 0 0;
  font: inherit;
  color: inherit;
  cursor: default;
}
.gate-dot:focus-visible,
.gate-go:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
.gate {
  margin-top: 1rem;
  text-align: right;
}
.gate input {
  width: 8rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-family: var(--sans);
  font-style: normal;
  color: var(--ink);
  padding: 0.3rem 0;
  opacity: 0.35;
}
.gate input:focus { outline: none; opacity: 0.7; }
.gate input:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  opacity: 0.85;
}
.gate-go {
  border: 0;
  background: none;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.25;
  cursor: pointer;
}

@view-transition { navigation: auto; }

.side-brand {
  display: inline-block;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.15rem;
  margin-bottom: 1.6rem;
  letter-spacing: 0.03em;
}
.side-brand em { font-style: italic; color: var(--bronze); }
.side-identity {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.6rem;
}
.avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 99px;
  background: var(--terre);
  color: var(--paper);
  font-size: 0.68rem;
  font-style: normal;
  margin-left: 0.4rem;
}
.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.35rem;
  padding: 0.5rem 0.55rem;
}
.side-nav a.is-on { background: var(--paper); }
.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 1.6rem;
}
.side-foot a, .side-foot button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--quiet);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-size: 0.88rem;
}
.side-foot button:hover, .side-foot a:hover { color: var(--ink); }

.atelier-app .site-bar, .admin-app .site-bar, .atelier-app .site-foot, .admin-app .site-foot { display: none; }
.atelier-app main, .admin-app main { padding: 0; }
.atelier-shell, .admin-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}
.atelier-side, .admin-side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 1.6rem 1.3rem 1.4rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f7f3eb, var(--wall));
}
.admin-side { background: #161412; color: #f3efe6; border-right-color: #2a2622; }
.admin-side .side-brand { margin-bottom: 0.3rem; }
.admin-side .side-brand em { color: #d4b48a; }
.admin-side .side-kicker {
  margin: 0 0 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8c847a;
}
.admin-side .nav-label {
  margin: 1.15rem 0 0.3rem;
  padding: 0 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a635a;
}
.admin-side .nav-label:first-of-type { margin-top: 0; }
.admin-side .side-nav a { color: #b9b0a4; }
.admin-side .side-nav a:hover, .admin-side .side-nav a.is-on { color: #f3efe6; background: #2a2622; }
.admin-side .side-nav a.is-on { box-shadow: inset 2px 0 0 #d4b48a; }
.admin-side .side-nav .badge { margin-left: 0.35rem; background: #d4b48a; color: #161412; }
.admin-side .side-foot a { color: #8c847a; }
.sys-lamps {
  list-style: none;
  margin: auto 0 1.15rem;
  padding: 0.9rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
}
.sys-lamps li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c847a;
}
.sys-lamps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5c534c;
}
.sys-lamps li.is-up { color: #d8cfc3; }
.sys-lamps li.is-up::before { background: #7fae86; }

.sys-strip {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
.sys-strip li {
  padding: 0.85rem 1rem;
  background: var(--paper);
  border-left: 2px solid var(--line);
}
.sys-strip em {
  display: block;
  margin-bottom: 0.25rem;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
}
.sys-strip span { font-family: var(--serif); font-size: 1.2rem; }
.sys-strip .is-up { border-left-color: var(--ok); }
.sys-strip .is-down { border-left-color: var(--alerte); }

.admin-offer-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.admin-offer {
  margin: 0;
  padding: 1.2rem 1.15rem 1.3rem;
  background: var(--paper);
  border-top: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.admin-offer[data-offre="decouverte"] { border-top-color: var(--olive); }
.admin-offer[data-offre="artiste"] { border-top-color: var(--bronze); }
.admin-offer[data-offre="pro"] { border-top-color: var(--terre); }
.admin-offer[data-offre="studio"] { border-top-color: var(--prune); }
.admin-offer h3 { font-size: 1.65rem; margin: 0; }
.admin-offer-price { font-family: var(--serif); font-size: 1.15rem; margin: 0.15rem 0 0.35rem; }
.admin-offer-count { margin: 0; color: var(--ink); }
.admin-offer .btn { margin-top: 0.9rem; align-self: flex-start; }

.admin-dossiers {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.admin-dossier {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: center;
  padding: 1.15rem 1.2rem 1.2rem;
  background: var(--paper);
  border-left: 2px solid var(--line);
}
.admin-dossier[data-offre="decouverte"] { border-left-color: var(--olive); }
.admin-dossier[data-offre="artiste"] { border-left-color: var(--bronze); }
.admin-dossier[data-offre="pro"] { border-left-color: var(--terre); }
.admin-dossier[data-offre="studio"] { border-left-color: var(--prune); }
.admin-dossier-main { min-width: 0; }
.admin-dossier h3 { margin: 0.15rem 0 0.2rem; font-size: 1.45rem; }
.admin-dossier .quiet { margin: 0; }
.admin-dossier-meta { margin: 0.35rem 0 0; font-size: 0.88rem; }
.admin-dossier .inline-assign { flex-wrap: wrap; justify-content: flex-end; }
.admin-letter {
  width: min(28rem, 100%);
  padding: 2.6rem 2.2rem 2.8rem;
  background: var(--paper);
  box-shadow: 0 28px 70px rgba(22, 20, 18, 0.14);
  border-top: 2px solid var(--bronze);
}
.admin-login { background: var(--wall); }
.admin-login .admin-letter h1 { margin: 0.2rem 0 0.4rem; }

.admin-canvas, .atelier-canvas { padding: 0 4vw 4rem; animation: rise 0.45s ease both; }

/* La colonne est collante et haute d'un écran : sur une page longue, sa
   couleur s'arrêtait net au milieu. Le fond est peint sur la grille. */
.atelier-shell, .admin-shell { position: relative; }
.atelier-shell::before, .admin-shell::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 250px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f7f3eb, var(--wall));
}
.admin-shell::before { background: #161412; border-right-color: #2a2622; }
.atelier-side, .admin-side { position: sticky; z-index: 1; }

@media (max-width: 1024px) {
  .atelier-shell::before, .admin-shell::before { width: 200px; }
}
@media (max-width: 860px) {
  .atelier-shell::before, .admin-shell::before { display: none; }
}

.studio-filter {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.7rem 0.9rem;
  font: inherit;
  min-width: 12rem;
}
.drag-handle {
  cursor: grab;
  border: 1px solid var(--line);
  background: var(--paper);
  width: 2rem;
  height: 1.8rem;
  font: inherit;
}
.studio-grid li.is-dragging { opacity: 0.45; transform: scale(0.98); }
.empty-card {
  border: 1px dashed var(--line);
  padding: 2.2rem;
  background: var(--paper);
}
.stat-chart .spark { display: block; margin-top: 0.6rem; width: 100%; height: auto; }
.spark { display: block; width: 100%; height: auto; }

.mail-split, .admin-grid, .account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.mail-list, .mini-table, .bars { list-style: none; margin: 0; padding: 0; }
.mail-list a, .mini-table li, .bars li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.mail-list a { flex-direction: column; }
.mail-list strong { font-family: var(--serif); font-size: 1.15rem; }
.mail-list span, .mail-list em, .mini-table span { color: var(--quiet); font-size: 0.88rem; font-style: normal; }
.mail-list .is-unread strong { color: var(--bronze); }
.mail-body {
  white-space: pre-wrap;
  line-height: 1.65;
  background: var(--paper);
  padding: 1.4rem;
  margin-bottom: 2rem;
}
.mail-letter {
  margin: 0 0 1.6rem;
  background: #f3efe6;
  border: 1px solid var(--line);
  min-height: 36rem;
}
.mail-letter iframe,
.mail-letter-frame {
  display: block;
  width: 100%;
  height: 46rem;
  border: 0;
  background: #f3efe6;
}
.mail-embed-wrap {
  margin: 0 0 2.2rem;
  padding: 2rem 1.2rem 2.4rem;
  background: #f3efe6;
  border: 1px solid var(--line);
}
.mail-embed-mark {
  margin: 0 0 1.2rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}
.mail-embed-mark em { color: var(--bronze); font-style: italic; }
.mail-embed-card {
  max-width: 40rem;
  margin: 0 auto;
  background: #faf7f1;
  border: 1px solid #d8d0c4;
}
.mail-raw {
  margin: 0 0 2rem;
  color: var(--quiet);
}
.mail-raw summary {
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mail-raw pre {
  margin: 0.8rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--paper);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  color: var(--ink);
}
.range-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.range-tabs a {
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.45rem 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.range-tabs a.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kpi small { display: block; margin-top: 0.35rem; font-size: 0.78rem; }
.kpi .up { color: var(--ok); }
.kpi .down { color: var(--alerte); }
.chart-panel { margin-bottom: 1.6rem; }
.live-now {
  margin: 0 0 2rem;
  padding: 1.3rem 1.35rem 1.15rem;
  background: var(--paper);
  border-left: 2px solid var(--bronze);
}
.live-now-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}
.live-now h2 { margin: 0.15rem 0 0.25rem; font-size: 1.7rem; }
.live-count { margin: 0; color: var(--quiet); }
.live-count strong { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.live-lamp {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
}
.live-lamp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.live-lamp.is-up { color: var(--ok); }
.live-lamp.is-up::before {
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent);
  animation: live-beat 1.8s ease-in-out infinite;
}
@keyframes live-beat {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 8%, transparent); }
}
.live-pulse { margin: 0.9rem 0 0.35rem; }
.live-pulse .spark { height: 56px; }
.live-feed { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.live-feed li {
  display: grid;
  grid-template-columns: minmax(7rem, 0.9fr) minmax(0, 1.6fr) auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.live-feed strong { font-family: var(--serif); font-size: 1.05rem; }
.live-feed span { color: var(--quiet); font-size: 0.88rem; overflow-wrap: anywhere; }
.live-feed em { color: var(--quiet); font-style: normal; font-size: 0.78rem; white-space: nowrap; }
.live-feed .is-empty { display: block; color: var(--quiet); border: 0; padding: 0.8rem 0 0.2rem; }
.bars li { align-items: baseline; }
.bars small { display: block; color: var(--quiet); }
.table-wrap { overflow: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th, table.data td { text-align: left; padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Le tableau des offres : la première colonne nomme la fonction, les
   suivantes disent oui ou non — donc elles se lisent centrées, et la
   colonne des noms reste collée à gauche même quand on fait défiler. */
table.compare th[scope="col"], table.compare td { text-align: center; }
table.compare th[scope="col"]:first-child, table.compare th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--quiet);
}
table.compare thead th {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  border-bottom-color: var(--bronze);
}
table.compare td .dim { color: var(--line); }
table.compare tbody tr:hover th, table.compare tbody tr:hover td { background: var(--paper); }
.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.row-actions button {
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}

.contact-form { padding: 0; }

.offers-grid {
  display: grid;
  /* Quatre colonnes seulement quand elles tiennent : à quatre cent
     cinquante pixels de large, un nom d'offre finissait coupé au milieu. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  padding: 0 0 3rem;
  align-items: stretch;
}
.offer-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.5rem 1.3rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 100%;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.offer-card:hover { border-color: var(--teinte, var(--bronze)); transform: translateY(-3px); }
.offer-card.is-featured { border-color: var(--ink); }
/* L'offre conseillée porte une étiquette, pas seulement un cadre plus noir :
   la nuance de bordure ne se voit pas sur un écran mal réglé. */
.offer-card.is-featured::after {
  content: "Le plus choisi";
  position: absolute;
  top: -0.72rem;
  right: 1rem;
  background: var(--ink);
  color: var(--wall);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem;
}
.offer-card.is-current { box-shadow: inset 0 0 0 1px var(--bronze); }
/* Chaque offre porte son pigment : quatre colonnes se distinguent d’un
   coup d’œil, sans qu’on ait à lire les quatre titres. */
.offer-card::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1.5rem -1.3rem 0.9rem;
  background: var(--teinte, var(--line));
}
.offer-card[data-offre="decouverte"] { --teinte: var(--olive); }
.offer-card[data-offre="artiste"] { --teinte: var(--bronze); }
.offer-card[data-offre="pro"] { --teinte: var(--indigo); }
.offer-card[data-offre="studio"] { --teinte: var(--prune); }
.offer-badge {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teinte, var(--bronze));
}
.offer-audience { margin: 0; color: var(--quiet); font-size: 0.92rem; }
.offer-price {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--serif);
  font-size: 2rem;
}
/* Les promesses de l'offre : une coche par ligne, pas une puce de liste —
   on lit « inclus », pas « élément d'une énumération ». */
.offer-card ul {
  margin: 0.4rem 0 1.2rem;
  padding: 0;
  list-style: none;
  color: var(--quiet);
  line-height: 1.5;
  font-size: 0.92rem;
  flex: 1;
  display: grid;
  gap: 0.45rem;
}
.offer-card li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem; }
.offer-card li::before {
  content: "✓";
  color: var(--teinte, var(--bronze));
  font-size: 0.85rem;
  line-height: 1.5;
}
.offer-works {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teinte, var(--bronze));
}
.offer-card .btn { align-self: stretch; text-align: center; margin-top: auto; }
.atelier-offers { padding-top: 0.4rem; }
.flag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin: 0.6rem 0 1.2rem;
}
.inline-assign { display: flex; gap: 0.4rem; align-items: center; }
.inline-assign select, .inline-assign button {
  font: inherit;
  font-size: 0.8rem;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.35rem 0.5rem;
}
.quiet { color: var(--quiet); font-size: 0.82rem; }
.share-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 0; align-items: center; }
.share-row a, .link-copy { color: var(--bronze); font-size: 0.86rem; }
.link-copy {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collection-block { margin: 2rem 0 3rem; }
.collection-block h2 { font-size: 1.7rem; margin-bottom: 1rem; }

/* ------------------------------------------------------------------
   Composants ajoutés : brouillons réseaux, aperçus d’e-mail, journal
   ------------------------------------------------------------------ */

.draft-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: start;
}
.draft-visual { margin: 0; }
.draft-visual img {
  width: 100%;
  height: auto;
  background: var(--paper);
  border: 1px solid var(--line);
}
.draft-visual figcaption { margin-top: 0.6rem; font-size: 0.85rem; }
.draft-copy .mail-body { margin-bottom: 1rem; }
.copy-field textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.8rem;
}

.post-log { list-style: none; margin: 0; padding: 0; }
.post-log li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.post-log img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  background: var(--paper);
  flex-shrink: 0;
}
.post-log div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.post-log span, .post-log small { color: var(--quiet); font-size: 0.86rem; }
.post-log a { color: var(--bronze); font-size: 0.84rem; }
.post-log .down { color: var(--alerte); }

.post-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1.1rem;
}
.post-feed li { min-width: 0; }
.post-feed img,
.post-feed-empty {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--line);
  display: block;
}
.post-feed-empty {
  display: grid;
  place-items: center;
  color: var(--quiet);
  font-size: 0.78rem;
}
.post-feed a { display: block; }
.post-feed-meta {
  margin: 0.45rem 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
}
.post-feed-caption {
  margin: 0;
  color: var(--quiet);
  font-size: 0.86rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.publish-split { align-items: start; }
.post-preview { position: sticky; top: 1.4rem; }
.post-preview .eyebrow { margin-bottom: 0.8rem; }
.phone {
  background: var(--paper);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bronze) 40%, var(--paper)),
    0 0 0 6px var(--paper),
    0 0 0 7px color-mix(in srgb, var(--bronze) 28%, var(--paper)),
    0 18px 36px -18px color-mix(in srgb, var(--bronze) 24%, transparent);
  overflow: hidden;
}
.phone header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.phone-dot {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--bronze), var(--terre));
  flex-shrink: 0;
}
.phone header strong {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
}
.phone figure { margin: 0; background: var(--wall); }
.phone img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.phone-blank {
  margin: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--quiet);
  font-size: 0.86rem;
  padding: 1rem;
  text-align: center;
}
.phone-caption {
  margin: 0;
  padding: 0.85rem 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}

.busy-veil {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--wall) 72%, transparent);
}
.busy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1.8rem;
  background: var(--paper);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bronze) 50%, var(--paper)),
    0 0 0 5px var(--paper),
    0 0 0 6px color-mix(in srgb, var(--bronze) 36%, var(--paper)),
    0 18px 36px -16px color-mix(in srgb, var(--bronze) 28%, transparent);
}
.busy-card p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}
.busy-spin {
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--line);
  border-top-color: var(--bronze);
  border-radius: 50%;
  animation: busy-turn 0.7s linear infinite;
}
@keyframes busy-turn {
  to { transform: rotate(360deg); }
}
form.is-busy { pointer-events: none; }
body.is-busy { cursor: wait; }

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.6rem;
  padding-bottom: 3rem;
}
.preview-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.preview-card h2 { font-size: 1.3rem; }
.preview-frame {
  border: 1px solid var(--line);
  background: #fff;
  height: 20rem;
  overflow: hidden;
}
.preview-frame iframe { width: 100%; height: 100%; border: 0; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.preview-actions form { display: flex; gap: 0.5rem; align-items: flex-end; margin: 0; flex: 1; }
.preview-actions input { border: 1px solid var(--line); background: var(--paper); padding: 0.5rem 0.6rem; font: inherit; min-width: 0; }

/* Bouton de menu — présent dans le DOM, montré seulement en petit écran. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.shell-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  padding: 0.8rem 7vw;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  cursor: pointer;
}
.admin-app .shell-toggle { background: #161412; color: #b9b0a4; border-bottom-color: #2a2622; }

/* ------------------------------------------------------------------
   K.A.E.L. — le panneau. Discret tant qu'on ne l'appelle pas.
   ------------------------------------------------------------------ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   K.A.E.L. — le panneau de conversation.

   Il porte le pigment de ce qu'il voit : indigo pour toute la plateforme,
   terre verte pour un seul atelier. Sa tête est sombre, comme la colonne
   de l'admin : K.A.E.L. n'est pas une carte de la page, c'est quelqu'un
   d'autre à qui l'on parle.
   ------------------------------------------------------------------ */
.kael-open {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.1rem 0 0.55rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(22, 20, 18, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
}
.kael-open:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(22, 20, 18, 0.28);
}
.kael-open:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }
/* Panneau ouvert : le bouton n'a plus rien à dire, il s'efface. */
.kael-is-open .kael-open { opacity: 0; pointer-events: none; }

.kael-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--bronze), var(--terre));
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0;
  flex-shrink: 0;
}
/* La pastille de présence : verte quand K.A.E.L. répond vraiment, creuse
   quand il n'est pas branché — l'un ne doit pas se faire passer pour l'autre. */
.kael-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--quiet);
  background: transparent;
}
.kael-pulse.is-live {
  border-color: transparent;
  background: #7fae86;
  box-shadow: 0 0 0 0 rgba(127, 174, 134, 0.6);
  animation: kael-breathe 2.6s ease-out infinite;
}
@keyframes kael-breathe {
  0% { box-shadow: 0 0 0 0 rgba(127, 174, 134, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(127, 174, 134, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 174, 134, 0); }
}

/* `display: flex` sur une classe l'emporte sur `[hidden]` : sans cette
   ligne, le panneau resterait affiché et masquerait son propre bouton. */
.kael-panel[hidden] { display: none; }
.kael-panel {
  --teinte: var(--indigo);
  --voile: var(--indigo-voile);
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 61;
  width: min(25rem, calc(100vw - 2.8rem));
  max-height: min(36rem, calc(100vh - 2.8rem));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 22px 60px rgba(22, 20, 18, 0.26);
  animation: rise 0.3s ease both;
}
.kael-panel[data-ton="atelier"] { --teinte: var(--olive); --voile: var(--olive-voile); }

.kael-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
}
.kael-mark-head { width: 38px; height: 38px; font-size: 1.25rem; }
.kael-ident { flex: 1; min-width: 0; }
.kael-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
}
.kael-tag {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  color: #a49b8f;
  letter-spacing: 0.02em;
}
.kael-close {
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #a49b8f;
  cursor: pointer;
  min-width: 34px;
  min-height: 34px;
  transition: color 0.2s ease;
}
.kael-close:hover { color: var(--paper); }

/* Le bandeau de portée : ce que K.A.E.L. a sous les yeux, en une ligne. */
.kael-context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.9rem;
  background: var(--voile);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--teinte);
  font-size: 0.76rem;
  color: var(--quiet);
  overflow-wrap: anywhere;
}
.kael-scope {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  background: var(--teinte);
  color: var(--paper);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kael-stream {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background:
    linear-gradient(var(--paper) 30%, rgba(250, 247, 241, 0)) top / 100% 1.4rem no-repeat,
    linear-gradient(rgba(22, 20, 18, 0.07), rgba(22, 20, 18, 0)) top / 100% 0.4rem no-repeat;
  background-attachment: local, scroll;
}

/* K.A.E.L. parle depuis la marge, avec sa marque ; l'artiste répond en
   face, à droite. Deux voix, deux formes — on suit sans lire les noms. */
.kael-line { display: grid; }
.kael-line p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.kael-kael {
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.55rem;
  justify-items: start;
}
.kael-kael::before {
  content: "K";
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--voile);
  color: var(--teinte);
  border: 1px solid var(--teinte);
  font-family: var(--serif);
  font-size: 0.85rem;
}
.kael-kael > * { grid-column: 2; }
.kael-kael > p {
  padding: 0.55rem 0.75rem;
  background: var(--wall);
  border-left: 2px solid var(--teinte);
}
.kael-me {
  justify-items: end;
}
.kael-me > p {
  max-width: 85%;
  background: var(--ink);
  color: var(--paper);
  padding: 0.55rem 0.75rem;
}
.kael-list {
  margin: 0.45rem 0 0;
  padding-left: 1.5rem;
  color: var(--quiet);
  font-size: 0.85rem;
  line-height: 1.55;
}
.kael-list li::marker { color: var(--teinte); }

/* L'attente a sa forme propre : trois points qui respirent, pas un
   message vide qu'on prendrait pour une réponse. */
.kael-typing > p { display: flex; gap: 0.28rem; align-items: center; padding: 0.75rem; }
.kael-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teinte);
  opacity: 0.35;
  animation: kael-dot 1.2s ease-in-out infinite;
}
.kael-typing i:nth-child(2) { animation-delay: 0.16s; }
.kael-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes kael-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.kael-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--line);
}
.kael-actions button {
  border: 1px solid var(--line);
  background: var(--wall);
  color: var(--quiet);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.45rem 0.7rem;
  min-height: 36px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.kael-actions button:hover:not(:disabled) {
  color: var(--teinte);
  border-color: var(--teinte);
  background: var(--voile);
}
.kael-actions button:focus-visible { outline: 2px solid var(--teinte); outline-offset: 2px; }

.kael-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.7rem 0.9rem 0.9rem;
  border-top: 1px solid var(--line);
  margin: 0;
}
.kael-form textarea {
  flex: 1;
  min-height: 40px;
  max-height: 8rem;
  border: 1px solid var(--line);
  background: var(--wall);
  padding: 0.6rem 0.65rem;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: none;
  margin: 0;
  transition: border-color 0.2s ease;
}
.kael-form textarea:focus {
  outline: none;
  border-color: var(--teinte);
}
.kael-send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.kael-send:hover:not(:disabled) { background: var(--teinte); border-color: var(--teinte); }
.kael-send:disabled { opacity: 0.35; cursor: default; }
.kael-send:focus-visible { outline: 2px solid var(--teinte); outline-offset: 2px; }
.kael-actions button:disabled { opacity: 0.45; cursor: default; }

.kael-note {
  margin: 0;
  padding: 0 0.9rem 0.9rem;
  font-size: 0.78rem;
  color: var(--quiet);
  line-height: 1.5;
}
.kael-note code {
  background: var(--ocre-voile);
  color: var(--ocre);
  padding: 0 0.2rem;
}

/* Console d'administration de K.A.E.L. */
.kael-secret { border: 1px solid var(--bronze); padding: 1.2rem; background: var(--paper); }
.kael-token {
  display: block;
  margin: 0.6rem 0 1rem;
  padding: 0.8rem;
  background: var(--wall);
  border: 1px solid var(--line);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}
/* Une portée n’est pas une étiquette parmi d’autres : elle dit ce que
   K.A.E.L. peut casser. Le pigment monte avec la gravité — lire, observer,
   corriger, publier, tout. On la voit avant de la lire. */
.scope-chip, .risk-chip {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--teinte, var(--line));
  background: var(--voile, var(--wall));
  color: var(--teinte, inherit);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.scope-chip[data-portee="KAEL_READ"] { --teinte: var(--indigo); --voile: var(--indigo-voile); }
.scope-chip[data-portee="KAEL_ANALYZE"] { --teinte: var(--olive); --voile: var(--olive-voile); }
.scope-chip[data-portee="KAEL_WRITE"] { --teinte: var(--ocre); --voile: var(--ocre-voile); }
.scope-chip[data-portee="KAEL_PUBLISH"] { --teinte: var(--terre); --voile: var(--terre-voile); }
.scope-chip[data-portee="KAEL_ADMIN"] { --teinte: var(--alerte); --voile: var(--terre-voile); }

.risk-chip { text-transform: uppercase; }
.risk-chip[data-risque="low"] { --teinte: var(--olive); --voile: var(--olive-voile); }
.risk-chip[data-risque="medium"] { --teinte: var(--ocre); --voile: var(--ocre-voile); }
.risk-chip[data-risque="high"] { --teinte: var(--terre); --voile: var(--terre-voile); }
.risk-chip[data-risque="critical"] { --teinte: var(--paper); --voile: var(--alerte); border-color: var(--alerte); }
.up { color: var(--ok); }
.down { color: var(--alerte); }

/* Sur un téléphone, un panneau flottant de 25rem n'a nulle part où
   flotter : il devient une feuille, ancrée en bas, sur toute la largeur. */
@media (max-width: 620px) {
  .kael-open { right: 1rem; bottom: 1rem; padding: 0 0.9rem 0 0.5rem; }
  .kael-open-label { display: none; }
  .kael-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-height: min(80vh, calc(100vh - 3rem));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -14px 44px rgba(22, 20, 18, 0.3);
  }
  .kael-stream { padding: 0.9rem 1rem; }
  .kael-actions, .kael-form { padding-left: 1rem; padding-right: 1rem; }
  .kael-actions button { flex: 1 1 auto; }
}
/* La barre gestuelle iOS mord sur le dernier élément, quel qu'il soit —
   le formulaire ici, la note là. C'est donc au panneau de reculer. */
@supports (padding: max(0px)) {
  @media (max-width: 620px) {
    .kael-panel { padding-bottom: env(safe-area-inset-bottom); }
  }
}

/* ------------------------------------------------------------------
   Responsive — une seule échelle, du 27 pouces au petit téléphone
   ------------------------------------------------------------------ */

/* Rien ne doit déborder : les enfants de grille peuvent rétrécir, les
   longues chaînes (URL, e-mails) se coupent plutôt que d’élargir la page. */
main, .atelier-canvas, .admin-canvas { min-width: 0; }
.strip > *, .solo > *, .split > *, .account-grid > *, .mail-split > *,
.admin-grid > *, .draft-split > *, .offers-grid > * { min-width: 0; }
.mail-list a, .mini-table li, .post-log div, .stat-row li { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mail-body { overflow-wrap: anywhere; }
/* Une URL de webhook citée en clair élargissait la page entière sous 360px. */
code { overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .atelier-shell, .admin-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .solo { grid-template-columns: minmax(0, 1.3fr) minmax(15rem, 0.9fr); gap: 2rem; }
  .foyer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wall-mosaic { columns: 3 15rem; }
  .draft-split { grid-template-columns: 1fr; }
  .post-preview { position: static; }
  .admin-offer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dossier { flex-direction: column; align-items: stretch; }
  .live-feed li { grid-template-columns: 1fr auto; }
  .live-feed span { grid-column: 1 / -1; }
}

/* Sous 960px : six à sept libellés en capitales ne tiennent plus à côté du
   logo — la barre se replie derrière le bouton. Tout est conditionné à
   `.js` : sans JavaScript, un menu qu’on ne peut pas ouvrir vaudrait moins
   que des liens qui passent à la ligne. */
@media (max-width: 960px) {
  .site-bar {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .site-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  .nav-toggle { margin-left: auto; }
  .js .nav-toggle { display: flex; }
  .js .site-bar nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: 0.4rem;
  }
  /* Paysage téléphone : le panneau déroule au lieu de pousser la page. */
  .js .site-bar nav.is-open {
    display: flex;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .js .site-bar nav a {
    width: 100%;
    padding: 0.85rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
  }
  .js .nav-cta { color: var(--bronze) !important; }
}

@media (min-width: 1100px) {
  .admin-app .board {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}

/* Sous 860px : les marges se resserrent, les colonnes s’empilent. */
@media (max-width: 860px) {
  main { padding-bottom: 3.5rem; }
  .colophon { grid-template-columns: 1fr; }

  .solo, .work-edit, .split, .account-grid, .foyer, .affiche,
  .room-brief, .spotlight-figure, .steps,
  .mail-split, .admin-grid, .offers-grid, .flag-grid { grid-template-columns: 1fr; }
  .atelier-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .foyer { padding: 2.5rem 0 3rem; gap: 2.4rem; }
  /* Le triptyque perd son décalage : empilé, il ferait des trous. */
  .triptych li { transform: none !important; }
  .solo-frame { padding: 1.4rem; min-height: 0; }
  .solo-frame img { max-height: 60vh; }
  .cartel { position: static; }
  .wall-mosaic { columns: 2 14rem; }
  .hang, .hang.salon { columns: 2 14rem; }
  .room-hero-cover img { height: clamp(12rem, 44vw, 20rem); }
  .room-facts > div { grid-template-columns: 5.5rem minmax(0, 1fr); }

  /* Atelier et admin : la colonne devient un tiroir — là aussi, seulement
     si le bouton qui l’ouvre peut fonctionner. */
  .atelier-shell, .admin-shell { grid-template-columns: 1fr; }
  .js .shell-toggle { display: flex; }
  .js .atelier-side, .js .admin-side {
    display: none;
    position: static;
    height: auto;
    min-height: 0;
    padding: 1.2rem 6vw 1.6rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .js .atelier-side.is-open, .js .admin-side.is-open { display: flex; }
  .admin-side { border-bottom-color: #2a2622; }
  .side-brand, .side-identity { margin-bottom: 1rem; }
  .side-nav a { min-height: 44px; }
  .side-foot { flex-direction: row; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.2rem; }
  .atelier-canvas, .admin-canvas { padding: 0 6vw 3rem; }

  .preview-frame { height: 16rem; }
  .preview-actions form { flex-basis: 100%; }
}

@media (max-width: 620px) {
  .foyer h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .lead { font-size: 1.05rem; margin: 1.2rem 0 1.8rem; }
  .auth-card h1, .atelier-head h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .band h2, .page-head h1, .room-hero-say h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .cartel h1 { font-size: 1.9rem; }
  .panel-head h2 { font-size: 1.35rem; }

  .studio-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem; }
  .studio-grid img, .studio-grid.compact img { height: 165px; }

  /* Le mur reste à deux colonnes : une œuvre par ligne ferait une page
     interminable, et l’accrochage se lit par comparaison. */
  .wall-mosaic, .hang, .hang.salon { columns: 2 9rem; column-gap: 0.8rem; }
  .rooms-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.4rem 0.9rem; }
  .room-card-name { font-size: 1.15rem; }
  .room-card-strip { display: none; }
  /* Sur un téléphone, trois vignettes de cent pixels ne montrent rien.
     La première pièce prend toute la largeur, les deux autres se partagent
     la ligne d'en dessous : on voit enfin une œuvre en entrant. */
  .triptych { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .triptych li:first-child { grid-column: 1 / -1; }
  .triptych li:first-child .frame.is-cropped img { aspect-ratio: 5 / 4; }
  .triptych .tag-line span { display: none; }
  .walk { grid-template-columns: 1fr; }
  .walk .walk-next { grid-column: 1; }
  .more-strip { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1.8rem; }
  .stat-row li { padding: 0.9rem 0.8rem; }
  .stat-row span { font-size: 1.5rem; }
  .stat-row em { font-size: 0.72rem; }

  .btn { padding: 0.8rem 1.1rem; min-height: 44px; }
  .hero-actions .btn, .atelier-actions .btn { flex: 1 1 auto; text-align: center; }
  .range-tabs a { min-height: 40px; display: inline-flex; align-items: center; }
  .row-actions button, .work-tools button, .drag-handle { min-height: 38px; min-width: 38px; }
  .studio-filter { width: 100%; min-width: 0; }

  .mail-body { padding: 1rem; }
  .mail-letter { min-height: 28rem; }
  .mail-letter iframe { height: 32rem; }
  .post-log img { width: 3.2rem; height: 3.2rem; }
  .letter-page main { padding: 2.8rem max(1.1rem, env(safe-area-inset-left)) 3.4rem max(1.1rem, env(safe-area-inset-right)); }
  .letter-page .letter { padding: 2.8rem 1.85rem 2.4rem; }
  .letter-moves li { grid-template-columns: 2.1rem 1fr; }
  table.data { font-size: 0.85rem; }
}

/* Les plus petits écrans encore vendus (SE, Galaxy A0x). */
@media (max-width: 420px) {
  main { padding-bottom: 3rem; }
  .letter-page main { padding: 1.5rem 0.95rem 2rem; }
  .letter-page .letter {
    width: 100%;
    padding: 2.1rem 1.3rem 2rem;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bronze) 68%, var(--paper)),
      0 0 0 4px var(--paper),
      0 0 0 5px color-mix(in srgb, var(--bronze) 52%, var(--paper)),
      0 16px 28px -14px color-mix(in srgb, var(--bronze) 22%, transparent);
  }
  .letter h1 { font-size: clamp(2.05rem, 9vw, 2.55rem); }
  .letter .letter-open { font-size: 1.18rem; }
  .letter .emphasis { padding-left: 0.85rem; max-width: 32ch; }
  .letter .emphasis-return { max-width: 14ch; }
  .letter-close { flex-direction: column; align-items: flex-start; }
  .letter .sign { margin-left: 0; align-self: flex-end; }
  .letter-mast { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .letter-facts { grid-template-columns: 1fr; gap: 0.95rem; }
  .letter-contrast { grid-template-columns: 1fr; }
  .letter-moves li { grid-template-columns: 1fr; gap: 0.2rem; }
  .letter-offers li { grid-template-columns: 1fr; }
  .letter-offers .offer-cost { grid-row: auto; grid-column: 1; }
  .letter-rooms a { flex-direction: column; gap: 0.15rem; }
  .atelier-canvas, .admin-canvas, .atelier-side, .admin-side, .shell-toggle { padding-left: 5vw; padding-right: 5vw; }
  .mark { font-size: 1.15rem; }
  .wall-mosaic, .hang, .hang.salon { columns: 1; }
  .rooms-grid { grid-template-columns: 1fr; }
  .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-grid img, .studio-grid.compact img { height: 130px; }
  .hero-actions, .atelier-actions { gap: 0.6rem; }
  .walk { flex-wrap: wrap; }
  .preview-frame { height: 13rem; }
}

/* En dessous, deux colonnes de chiffres deviennent illisibles. */
@media (max-width: 359px) {
  .stat-row, .studio-grid, .admin-offer-row, .sys-strip { grid-template-columns: 1fr; }
}

/* Encoche et barre gestuelle iOS — uniquement là où la marge est déjà réduite. */
@media (max-width: 860px) {
  @supports (padding: max(0px)) {
    .site-bar, .site-foot, .colophon, main {
      padding-left: max(env(safe-area-inset-left), var(--gut));
      padding-right: max(env(safe-area-inset-right), var(--gut));
    }
    .atelier-canvas, .admin-canvas, .atelier-side, .admin-side, .shell-toggle {
      padding-left: max(env(safe-area-inset-left), 6vw);
      padding-right: max(env(safe-area-inset-right), 6vw);
    }
    .site-foot { padding-bottom: max(env(safe-area-inset-bottom), 1.4rem); }
  }
}
@media (max-width: 420px) {
  @supports (padding: max(0px)) {
    .atelier-canvas, .admin-canvas, .atelier-side, .admin-side, .shell-toggle {
      padding-left: max(env(safe-area-inset-left), 5vw);
      padding-right: max(env(safe-area-inset-right), 5vw);
    }
  }
}

/* Écrans très larges : le texte ne doit pas s’étirer indéfiniment. */
@media (min-width: 1800px) {
  .wall-mosaic { columns: 5 17rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  @view-transition { navigation: none; }
}