/* 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;
  --shade: #161412;  /* ombres et voiles : jamais l'encre, qui peut s'éclaircir */
  --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); }
.theme-switch { display: inline-flex; margin: 0; align-items: center; }
.theme-switch button {
  background: transparent;
  color: inherit;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
}
.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, a:focus-visible, button:focus-visible, summary: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(--shade) 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(--shade) 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 top,
    rgba(12, 11, 10, 0.94) 0%,
    rgba(12, 11, 10, 0.78) 32%,
    rgba(12, 11, 10, 0.28) 58%,
    transparent 78%
  );
}
.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: #faf7f1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.room-hero.has-cover .room-hero-say h1,
.room-hero.has-cover .room-hero-say a,
.room-hero.has-cover .room-hero-say .where,
.room-hero.has-cover .room-hero-say .hint {
  color: #faf7f1;
}
.room-hero.has-cover .room-hero-say .eyebrow,
.room-hero.has-cover .room-hero-say .eyebrow a { color: #e7d7b8; }
.room-hero.has-cover .room-hero-say .tag {
  color: #faf7f1;
  border-color: rgba(250, 247, 241, 0.55);
}
.room-hero.has-cover .room-hero-say .btn-ghost {
  color: #faf7f1;
  border-color: rgba(250, 247, 241, 0.7);
  background: rgba(12, 11, 10, 0.35);
}
.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(--shade) 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(--shade) 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);
  z-index: 5;
  background: #161412;
  border: 1px solid #faf7f1;
  color: #faf7f1;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 44px;
  min-height: 44px;
  padding: 0.65rem 1rem;
  cursor: pointer;
}
.viewer-close:hover { background: #2a261f; }
.viewer-close:focus-visible { outline: 2px solid #e7d7b8; outline-offset: 3px; }
@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; }
.ai-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.ai-draft .hint { margin-top: 0; flex: 1 1 16rem; }
.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;
}
.work-public { border: 1px solid var(--line); margin: 0.2rem 0 0.4rem; padding: 0.8rem 1rem 1rem; display: grid; gap: 0.8rem; }
.work-public legend { padding: 0 0.35rem; color: var(--bronze); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.studio-gap { display: block; margin-top: 0.25rem; color: var(--bronze); font-style: normal; font-size: 0.78rem; }
.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(--shade) 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 {
  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: attr(data-tag);
  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;
}

/* ------------------------------------------------------------------
   Réseaux sociaux (admin) : comptes, atelier de post, aperçu
   ------------------------------------------------------------------ */

.net-accounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.9rem;
  margin: 0 0 1.2rem;
}
.net-card {
  --state: var(--quiet);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.05rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--state);
  min-width: 0;
}
.net-card[data-state="on"] { --state: var(--ok); }
.net-card[data-state="ready"] { --state: var(--ocre); }
.net-card[data-state="error"] { --state: var(--alerte); }
.net-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.net-card h3 { margin: 0; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; flex: 1 1 auto; min-width: 0; }
.net-card p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--quiet); }
.net-card p strong { color: var(--ink); font-weight: 500; }
.net-card .btn { align-self: flex-start; }
.net-mono {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: color-mix(in srgb, var(--state) 22%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--state) 55%, var(--line));
  flex-shrink: 0;
}
.net-pill {
  --state: var(--quiet);
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  color: var(--state);
  border: 1px solid color-mix(in srgb, var(--state) 50%, transparent);
  white-space: nowrap;
}
.net-card .net-pill { --state: inherit; color: var(--state); }
.net-pill[data-state="on"] { --state: var(--ok); }
.net-pill[data-state="error"] { --state: var(--alerte); }
.post-log strong .net-pill { margin-left: 0.4rem; vertical-align: 0.1em; }
.net-error { color: var(--alerte); overflow-wrap: anywhere; }
.net-vars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.net-vars code { font-size: 0.74rem; overflow-wrap: normal; word-break: normal; }
.net-dev code { font-size: 0.76rem; overflow-wrap: anywhere; }
.net-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.84rem;
  color: var(--bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}

.net-dev {
  margin: 0 0 1.6rem;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--line);
  font-size: 0.86rem;
}
.net-dev summary { cursor: pointer; color: var(--quiet); }
.net-dev ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.net-dev li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.net-dev li strong { font-weight: 500; min-width: 6rem; }

.net-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
.net-steps { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.net-steps .panel { margin: 0; }
.net-steps .sheet { width: 100%; padding: 0; }
.net-steps .sheet > label:first-of-type, .net-steps .sheet > .net-choice:first-of-type { margin-top: 0; }
.net-step > .net-notice { margin-bottom: 1rem; }
.net-step summary .net-pill { margin-left: auto; }
.net-step > summary,
.net-step-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  list-style: none;
}
.net-step > summary { cursor: pointer; }
.net-step > summary::-webkit-details-marker { display: none; }
.net-step > summary::after {
  content: "+";
  margin-left: 0.6rem;
  color: var(--quiet);
  font-size: 1.2rem;
}
.net-step[open] > summary::after { content: "–"; }
.net-step[open] > summary, .net-step-head { margin-bottom: 1.2rem; }
.net-step summary span:not(.net-step-num), .net-step-head span:not(.net-step-num) { display: flex; flex-direction: column; gap: 0.15rem; }
.net-step strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.net-step small { color: var(--quiet); font-size: 0.82rem; }
.net-step-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--bronze);
  color: var(--bronze);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.net-choice { border: 0; margin: 0 0 0.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.net-choice legend { padding: 0; margin-bottom: 0.55rem; font-size: 0.88rem; }
.net-chip { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.net-choice + .net-notice { margin-top: 1rem; }
.net-more + .btn, .net-more + .net-submit { margin-top: 1.2rem; }
.net-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.net-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--quiet);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.net-chip span small { font-size: 0.7rem; color: var(--quiet); }
.net-chip:hover span { border-color: var(--bronze); color: var(--ink); }
.net-chip input:checked + span {
  border-color: var(--bronze);
  color: var(--ink);
  background: color-mix(in srgb, var(--bronze) 16%, var(--paper));
}
.net-chip input:checked + span::before { content: "✓"; color: var(--bronze); }
.net-chip input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.net-chip.is-off { cursor: not-allowed; }
.net-chip.is-off span { opacity: 0.55; border-style: dashed; }
.net-chip.is-off:hover span { border-color: var(--line); color: var(--quiet); }

.net-more { font-size: 0.88rem; }
.net-more summary { cursor: pointer; color: var(--bronze); margin-bottom: 0.4rem; }
.net-more[open] summary { margin-bottom: 1rem; }
.net-notice {
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--ocre-voile);
  border-left: 2px solid var(--ocre);
}
.net-count { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--quiet); }
.net-count.is-over { color: var(--alerte); }
.net-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.net-submit .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.net-draft .eyebrow { margin-bottom: 0.8rem; }
.net-draft-body { display: flex; gap: 1rem; align-items: center; }
.net-draft-body img { width: 6rem; height: 6rem; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.net-draft-body p { margin: 0 0 0.4rem; font-size: 0.84rem; }

.phone-title { margin: 0; padding: 0.8rem 0.9rem 0; font-weight: 500; font-size: 0.92rem; }
.phone-title + .phone-caption { padding-top: 0.35rem; }

@media (max-width: 960px) {
  .net-studio { grid-template-columns: 1fr; }
  .net-studio .post-preview { position: static; max-width: 24rem; }
}

.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; }

.up { color: var(--ok); }
.down { color: var(--alerte); }

/* ------------------------------------------------------------------
   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; }
}

/* ── Offres Free : cartel de salon ─────────────────────────────────────
   Tout reste sous .free-offers. La grille historique (.offers-grid,
   .offer-card) et les cartes de l’atelier ne sont pas touchées.
   Le pigment ne sort que dans le filet de 3px et les petites capitales. */

.free-offers {
  max-width: 72rem;
  min-width: 0;
  padding-top: clamp(1.6rem, 4vw, 2.8rem);
}
.free-offers .free-mast { max-width: 40rem; }
.free-offers .free-mast h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.15rem, 4.6vw, 3.85rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 16em;
}
.free-offers .free-mast .lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.28;
  color: var(--ink);
  max-width: 22em;
  margin: 1.05rem 0 0.8rem;
}
.free-offers .free-mast-text {
  margin: 0;
  max-width: 42em;
  color: var(--quiet);
  font-size: 1rem;
  line-height: 1.65;
}
.free-offers .btn {
  transform: none;
  white-space: normal;
  line-height: 1.35;
  letter-spacing: 0.08em;
  max-width: 100%;
  min-height: 44px;
}
.free-offers .btn:hover,
.free-offers .btn:focus,
.free-offers .btn:focus-visible,
.free-offers .btn:active {
  transform: none;
}
.free-offers .free-mast .btn { margin-top: 1.55rem; }

.free-offers .free-scale {
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}
.free-offers .free-scale .eyebrow { margin-bottom: 0.2rem; }
.free-offers .free-scale-steps {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) auto minmax(0, 1.08fr) auto minmax(0, 0.78fr);
  column-gap: clamp(0.55rem, 1.6vw, 1.15rem);
  align-items: end;
  margin-top: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.free-offers .free-scale-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
}
.free-offers .free-scale-step.is-free { --pigment: var(--olive); }
.free-offers .free-scale-step.is-pro { --pigment: var(--indigo); }
.free-offers .free-scale-step.is-studio { --pigment: var(--prune); }
.free-offers .free-scale-rate {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.free-offers .is-free .free-scale-rate { font-size: clamp(3.3rem, 6.2vw, 5.35rem); }
.free-offers .is-pro .free-scale-rate { font-size: clamp(2.45rem, 4.1vw, 3.45rem); }
.free-offers .is-studio .free-scale-rate { font-size: clamp(1.85rem, 2.8vw, 2.45rem); }
.free-offers .free-scale-bar {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--pigment);
}
.free-offers .free-scale-name {
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pigment);
  white-space: nowrap;
}
.free-offers .free-scale-join {
  align-self: end;
  margin-bottom: calc(0.72rem + 0.5rem - 8px);
  color: var(--quiet);
  line-height: 0;
}
.free-offers .free-scale-join .is-down { display: none; }

.free-offers .free-wall {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(0, 0.92fr);
  gap: 0.95rem 1.05rem;
  align-items: stretch;
  margin-top: clamp(1.5rem, 3vw, 2.15rem);
}
.free-offers .free-plaque {
  --pigment: var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease;
}
.free-offers .free-plaque[data-offre="free"] {
  --pigment: var(--olive);
  grid-column: 1;
  grid-row: 1 / span 2;
}
.free-offers .free-plaque[data-offre="free_pro"] {
  --pigment: var(--indigo);
  grid-column: 2;
  grid-row: 1;
}
.free-offers .free-plaque[data-offre="free_studio"] {
  --pigment: var(--prune);
  grid-column: 2;
  grid-row: 2;
}
.free-offers .free-plaque:hover,
.free-offers .free-plaque:focus-within {
  border-color: var(--pigment);
}
.free-offers .free-plaque-bar {
  display: block;
  flex: none;
  height: 3px;
  width: 100%;
  background: var(--pigment);
}
.free-offers .free-plaque-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 1.2rem 1.35rem 1.35rem;
}
.free-offers .free-plaque-mark {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pigment);
}
.free-offers .free-plaque-option {
  color: var(--quiet);
  letter-spacing: 0.14em;
  font-weight: 400;
}
.free-offers .free-plaque-option::before {
  content: "—";
  margin: 0 0.4rem 0 0.2rem;
  color: var(--quiet);
}
.free-offers .free-plaque h2 {
  margin: 0.4rem 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.3vw, 2.25rem);
  line-height: 1.02;
  overflow-wrap: break-word;
}
.free-offers .free-plaque-price {
  margin: 0.8rem 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.05rem, 2.8vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
.free-offers .free-plaque[data-offre="free"] .free-plaque-price {
  font-size: clamp(2.7rem, 4.6vw, 4.15rem);
}
.free-offers .free-plaque-audience {
  margin: 0.7rem 0 0;
  color: var(--quiet);
  font-size: 0.95rem;
  line-height: 1.5;
}
.free-offers .free-plaque ul {
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0;
}
.free-offers .free-plaque li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.free-offers .free-plaque li:last-child { border-bottom: 1px solid var(--line); }
.free-offers .free-plaque-foot {
  margin-top: auto;
  padding-top: 1.15rem;
}
.free-offers .free-plaque-year {
  margin: 0 0 0.85rem;
  color: var(--quiet);
  font-size: 0.88rem;
  line-height: 1.5;
}
.free-offers .free-plaque form { margin: 0; }
.free-offers form label {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
}
.free-offers form select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin: 0 0 0.85rem;
  padding: 0.45rem 0;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  background: transparent;
}
.free-offers form select:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
.free-offers .free-plaque .btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.free-offers .free-compare,
.free-offers .free-close {
  max-width: 46rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.free-offers .free-compare h2,
.free-offers .free-close h2 {
  margin: 0 0 0.95rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.65rem, 2.8vw, 2.25rem);
  line-height: 1.12;
  max-width: 22em;
}
.free-offers .free-compare h3 {
  margin: 1.7rem 0 0.65rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--ink);
}
.free-offers .free-compare p,
.free-offers .free-close p {
  margin: 0 0 0.95rem;
  max-width: 68ch;
  color: var(--quiet);
  font-size: 0.98rem;
  line-height: 1.65;
}
.free-offers .trust-list {
  list-style: none;
  margin: 1.25rem 0 1.35rem;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: none;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}
.free-offers .trust-list li {
  position: static;
  margin: 0;
  padding: 0.9rem 0 0.9rem 0.85rem;
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--pigment, var(--line));
  color: var(--ink);
}
.free-offers .trust-list li::before { content: none; }
.free-offers .trust-list li:nth-child(1) { --pigment: var(--olive); }
.free-offers .trust-list li:nth-child(2) { --pigment: var(--indigo); }
.free-offers .trust-list li:nth-child(3) { --pigment: var(--prune); }
.free-offers .trust-list li:last-child { border-bottom: 1px solid var(--line); }
.free-offers .trust-list strong {
  color: var(--ink);
  font-weight: 500;
}
.free-offers .free-close-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.25rem;
  color: var(--bronze);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.28em;
}
.free-offers .free-close-link:hover { text-decoration-color: var(--bronze); }

@media (max-width: 860px) {
  .free-offers .free-scale-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .free-offers .free-scale-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "rate bar" "rate name";
    column-gap: 0.9rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
  }
  .free-offers .free-scale-rate { grid-area: rate; }
  .free-offers .free-scale-bar { grid-area: bar; align-self: end; }
  .free-offers .free-scale-name { grid-area: name; }
  .free-offers .is-free .free-scale-rate { font-size: 2.55rem; }
  .free-offers .is-pro .free-scale-rate { font-size: 2.05rem; }
  .free-offers .is-studio .free-scale-rate { font-size: 1.7rem; }
  .free-offers .free-scale-join {
    margin: 0;
    padding: 0.2rem 0 0.2rem 0.15rem;
    align-self: start;
  }
  .free-offers .free-scale-join .is-across { display: none; }
  .free-offers .free-scale-join .is-down { display: block; }
  .free-offers .free-wall { grid-template-columns: minmax(0, 1fr); }
  .free-offers .free-plaque[data-offre="free"],
  .free-offers .free-plaque[data-offre="free_pro"],
  .free-offers .free-plaque[data-offre="free_studio"] {
    grid-column: auto;
    grid-row: auto;
  }
  .free-offers .free-mast .btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* ── Communauté : un mur de salon ──────────────────────────────────────
   Le mur reprend les tons de papier d'app.css : v3.css repeint :root
   en nuit, et cette salle doit rester claire. Rien d'autre n'est touché.
   Le min-width sur main évite qu'un libellé long élargisse la page. */

main:has(> .free-community) {
  min-width: 0;
  background: #f3efe6;
}
.free-community {
  --wall: #f3efe6;
  --paper: #faf7f1;
  --ink: #161412;
  --quiet: #6f675e;
  --line: #d8d0c4;
  --bronze: #5c4634;
  --shade: #161412;
  --ok: #2f4a38;
  --ocre: #8a6220;
  --terre: #9d5233;
  --olive: #5f6b40;
  --indigo: #3f4d6b;
  --prune: #6a3d54;
  --alerte: #8a2d2d;
  --ocre-voile: #f6efdf;
  --terre-voile: #f7ebe4;
  --olive-voile: #eef0e5;
  --indigo-voile: #e9ecf2;
  --prune-voile: #f3e9ee;
  min-width: 0;
  max-width: 100%;
  padding-top: clamp(1.8rem, 4.2vw, 3.1rem);
  background: var(--wall);
  color: var(--ink);
  color-scheme: light;
}
.free-community ::selection { background: var(--ocre-voile); color: var(--ink); }
.free-community .free-mast h1 {
  max-width: 11em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.55rem, 6.2vw, 4.25rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.free-community .free-mast .lead {
  max-width: min(34rem, 100%);
  margin: 0.95rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.22rem, 2.1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--quiet);
  overflow-wrap: break-word;
}
.free-community .free-fil {
  margin-top: 1.7rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}
.free-community .free-fil ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.15rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.free-community .free-fil li {
  min-width: 0;
  max-width: 100%;
}
.free-community .free-fil a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 0.35rem 0;
  color: var(--quiet);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}
.free-community .free-fil a:hover {
  color: var(--ink);
}
.free-community .free-fil a[aria-current="page"] {
  color: var(--ink);
}
.free-community .free-fil a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.65rem;
  height: 1px;
  background: var(--ocre);
}
.free-community .free-fil-note {
  max-width: min(40rem, 100%);
  margin: 0.85rem 0 0;
  padding-left: 0.85rem;
  border-left: 1px solid var(--ocre);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.free-community .free-mast .hint {
  max-width: min(38rem, 100%);
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--quiet);
  overflow-wrap: break-word;
}
.free-community .free-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.free-community .free-notice h2 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 500;
}
.free-community .free-notice p {
  margin: 0.3rem 0 0;
  max-width: 36rem;
  color: var(--quiet);
  font-size: 0.92rem;
  line-height: 1.5;
}
.free-community .free-notice form { margin: 0; }
.free-community .free-notice .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 0;
  border: 0;
  border-bottom: 1px solid var(--ocre);
  background: transparent;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  transform: none;
}
.free-community .free-notice button.btn:hover,
.free-community .free-notice button.btn:focus-visible,
.free-community .free-notice button.btn:active {
  transform: none;
  opacity: 1;
  background: transparent;
  border-color: var(--bronze);
  color: var(--bronze);
}
.free-community .free-wall {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.6rem, 5vw, 4.2rem) clamp(1.15rem, 2.2vw, 2.1rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.free-community .free-work {
  min-width: 0;
  background: transparent;
  animation: free-hang-in 0.55s ease both;
}
.free-community .free-work:nth-child(2) { animation-delay: 0.05s; }
.free-community .free-work:nth-child(3) { animation-delay: 0.1s; }
.free-community .free-work:nth-child(4) { animation-delay: 0.15s; }
.free-community .free-work:nth-child(5) { animation-delay: 0.2s; }
.free-community .free-work:nth-child(6) { animation-delay: 0.25s; }
.free-community .free-work:nth-child(7) { animation-delay: 0.3s; }
.free-community .free-work:nth-child(8) { animation-delay: 0.35s; }
@keyframes free-hang-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.free-community .free-frame {
  display: block;
  padding: clamp(0.65rem, 1.25vw, 1.05rem);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--bronze) 28%, var(--line));
  text-decoration: none;
  transition: border-color 0.35s ease;
}
.free-community .free-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
  background: var(--ocre-voile);
  transition: background-color 0.35s ease;
}
.free-community .free-work:hover .free-frame,
.free-community .free-work:focus-within .free-frame {
  border-color: color-mix(in srgb, var(--bronze) 72%, var(--ink));
}
.free-community .free-work:hover .free-frame img,
.free-community .free-work:focus-within .free-frame img {
  background: color-mix(in srgb, var(--ocre) 12%, var(--ocre-voile));
}
.free-community .free-work h2 {
  margin: 0.85rem 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.free-community .free-by {
  margin: 0.28rem 0 0;
}
.free-community .free-by a {
  color: var(--quiet);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: break-word;
}
.free-community .free-by a:hover {
  color: var(--bronze);
  text-decoration: underline;
  text-decoration-color: var(--ocre);
  text-underline-offset: 0.22em;
}
.free-community .free-count {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.45rem 0 0;
  color: var(--quiet);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.free-community .free-count::before {
  content: "";
  width: 1.35rem;
  height: 1px;
  flex: none;
  background: var(--ocre);
}
.free-community .free-chrome {
  margin-top: 0.75rem;
  padding-top: 0.2rem;
  border-top: 1px solid transparent;
  color: var(--quiet);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.free-community .free-work:hover .free-chrome,
.free-community .free-work:focus-within .free-chrome {
  color: var(--ink);
  border-top-color: var(--line);
}
.free-community .free-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.85rem;
}
.free-community .free-actions form,
.free-community .free-collect,
.free-community details form {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.free-community .free-chrome .btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  max-width: 100%;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
  white-space: normal;
  transform: none;
}
.free-community .free-chrome .btn:hover,
.free-community .free-chrome .btn:focus-visible,
.free-community .free-chrome .btn:active {
  transform: none;
  opacity: 1;
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--ocre);
}
.free-community .free-chrome .btn[aria-pressed="true"] {
  color: var(--ocre);
  border-bottom-color: color-mix(in srgb, var(--ocre) 55%, transparent);
}
.free-community .free-chrome .btn[aria-pressed="true"]:hover,
.free-community .free-chrome .btn[aria-pressed="true"]:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ocre);
}
.free-community .free-collect { margin-top: 0.15rem; }
.free-community .free-collect label,
.free-community details label {
  margin: 0.35rem 0 0.5rem;
  color: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.free-community .free-collect input,
.free-community details textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.35rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}
.free-community .free-collect input {
  min-height: 44px;
  padding: 0.55rem 0;
}
.free-community .free-collect input::placeholder {
  color: var(--quiet);
  opacity: 1;
}
.free-community details textarea {
  min-height: 6.5rem;
  padding: 0.55rem 0;
  resize: vertical;
}
.free-community .free-collect input:focus-visible,
.free-community details textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}
.free-community .free-collect input:user-invalid,
.free-community details textarea:user-invalid {
  border-bottom-color: var(--alerte);
}
.free-community .free-remark {
  margin: 0.75rem 0 0;
  color: inherit;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.free-community .free-remark strong {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.free-community details {
  margin-top: 0.1rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.free-community summary {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  color: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.free-community summary::-webkit-details-marker { display: none; }
.free-community summary::marker { content: ""; }
.free-community summary::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  margin-right: 0.6rem;
  background: linear-gradient(currentColor, currentColor) center / 0.7rem 1px no-repeat;
}
.free-community details[open] summary::before {
  background:
    linear-gradient(currentColor, currentColor) center / 1px 0.7rem no-repeat,
    linear-gradient(currentColor, currentColor) center / 0.7rem 1px no-repeat;
}
.free-community details form { padding-bottom: 0.45rem; }
.free-community details .hint {
  margin: 0.15rem 0 0.35rem;
  color: var(--quiet);
  font-size: 0.86rem;
  line-height: 1.45;
}
.free-community .free-join {
  margin: 0.7rem 0 0;
}
.free-community .free-join a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bronze);
  font-size: 0.92rem;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--bronze) 40%, transparent);
  text-underline-offset: 0.28em;
}
.free-community .free-join a:hover {
  color: var(--ink);
  text-decoration-color: var(--ocre);
}
.free-community .free-empty {
  grid-column: 1 / -1;
  max-width: 28rem;
  margin: clamp(1.5rem, 4vw, 3rem) 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  font-weight: 500;
  line-height: 1.3;
}
.free-community .free-folio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: clamp(2rem, 4.5vw, 3.4rem);
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}
.free-community .free-folio:not(:has(a)) {
  display: none;
}
.free-community .free-folio a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bronze);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.free-community .free-folio a:hover {
  color: var(--ink);
}

@media (min-width: 760px) {
  .free-community .free-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .free-community .free-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .free-community .free-fil li:nth-child(4) {
    margin-left: 0.85rem;
    padding-left: 1.35rem;
    box-shadow: inset 1px 0 0 var(--line);
  }
}
@media (max-width: 759px) {
  .free-community {
    padding-right: 1.25rem;
    box-sizing: border-box;
  }
  .free-community .free-fil ul {
    max-width: 100%;
  }
  .free-community .free-fil li {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .free-community .free-mast .lead,
  .free-community .free-mast .hint,
  .free-community .free-fil-note {
    max-width: 17rem;
  }
  .free-community .free-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .free-community .free-actions form,
  .free-community .free-chrome .btn,
  .free-community .free-collect .btn,
  .free-community details .btn {
    width: 100%;
  }
  .free-community .free-notice {
    align-items: stretch;
  }
  .free-community .free-notice .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Inscription — porte entrebâillée : mur à gauche, formulaire à droite.
   Limité à .auth-signup. v3.css suit cette feuille : le préfixe
   body.auth-page.auth-signup garde la main. */
body.auth-page.auth-signup {
  background: #f3efe6;
  color: #161412;
  color-scheme: light;
}
body.auth-page.auth-signup main {
  --wall: #f3efe6;
  --paper: #faf7f1;
  --ink: #161412;
  --quiet: #6f675e;
  --line: #d8d0c4;
  --bronze: #5c4634;
  --ok: #2f4a38;
  --shade: #161412;
  --ocre: #8a6220;
  --olive: #5f6b40;
  --indigo: #3f4d6b;
  --prune: #6a3d54;
  --alerte: #8a2d2d;
  --ocre-voile: #f6efdf;
  --terre-voile: #f7ebe4;
  --olive-voile: #eef0e5;
  --indigo-voile: #e9ecf2;
  --prune-voile: #f3e9ee;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--wall);
  color: var(--ink);
}
body.auth-page.auth-signup main ::selection {
  background: var(--ocre-voile);
  color: var(--ink);
}
body.auth-page.auth-signup .flashes {
  width: min(32rem, calc(100% - 2rem));
}
body.auth-page.auth-signup .auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
  background: var(--wall);
}
body.auth-page.auth-signup .auth-card {
  order: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding:
    max(0.7rem, env(safe-area-inset-top))
    max(1.15rem, env(safe-area-inset-right))
    1.6rem
    max(1.15rem, env(safe-area-inset-left));
  background: var(--paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
}
body.auth-page.auth-signup .auth-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.auth-page.auth-signup .auth-card > :not(.auth-back) {
  width: min(100%, 34rem);
  max-width: 100%;
  min-width: 0;
}
body.auth-page.auth-signup .auth-aside {
  order: 2;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: 0;
  background: var(--wall);
  color: var(--ink);
  border: 0;
  border-top: 1px solid var(--line);
}
body.auth-page.auth-signup .auth-aside-panel {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding:
    0.9rem
    max(1.15rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1.15rem, env(safe-area-inset-left));
}
body.auth-page.auth-signup .auth-aside-kicker {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--quiet);
}
body.auth-page.auth-signup .auth-aside-sentence {
  display: block;
  margin: 0;
  max-width: 36rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .auth-aside-title,
body.auth-page.auth-signup .auth-aside-perks {
  display: none;
}
body.auth-page.auth-signup .auth-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2rem;
  margin: 0 0 0.15rem;
  color: var(--quiet);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
body.auth-page.auth-signup .auth-back:hover {
  color: var(--ink);
}
body.auth-page.auth-signup .eyebrow {
  display: block;
  margin: 0 0 0.15rem;
  color: var(--quiet);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}
body.auth-page.auth-signup .auth-card h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.15rem, 5.2vw, 3.05rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .lead-sm {
  display: block;
  margin: 0.4rem 0 0;
  max-width: 38rem;
  color: var(--quiet);
  font-size: 0.95rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .lead-sm a,
body.auth-page.auth-signup .auth-switch a,
body.auth-page.auth-signup .auth-legal a,
body.auth-page.auth-signup .field-hint a,
body.auth-page.auth-signup .field-error a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-underline-offset: 0.18em;
}
body.auth-page.auth-signup .field-error a {
  color: var(--alerte);
}
body.auth-page.auth-signup .lead-sm a:hover,
body.auth-page.auth-signup .auth-switch a:hover,
body.auth-page.auth-signup .auth-legal a:hover,
body.auth-page.auth-signup .field-hint a:hover {
  text-decoration-color: var(--ink);
}
body.auth-page.auth-signup .signup-proofs {
  list-style: none;
  display: grid;
  gap: 0.2rem;
  margin: 0.55rem 0 0.1rem;
  padding: 0.4rem 0 0;
  border-top: 1px solid var(--line);
}
body.auth-page.auth-signup .signup-proofs li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .signup-proofs li::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 1px;
  background: var(--ink);
  transform: translateY(-0.28em);
}
body.auth-page.auth-signup .signup-form {
  display: block;
  width: 100%;
  min-width: 0;
}
body.auth-page.auth-signup .signup-form > *,
body.auth-page.auth-signup .signup-form > .field,
body.auth-page.auth-signup .signup-form > .offer-pick {
  grid-column: auto;
  grid-row: auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}
body.auth-page.auth-signup .auth-form .field {
  margin: 0.45rem 0;
  min-width: 0;
}
body.auth-page.auth-signup .auth-form label {
  display: block;
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .auth-form input:not([type="hidden"]):not([type="radio"]) {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
}
body.auth-page.auth-signup .auth-form input::placeholder {
  color: var(--quiet);
  opacity: 1;
}
body.auth-page.auth-signup .auth-form input:focus,
body.auth-page.auth-signup .auth-form input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
  box-shadow: none;
}
body.auth-page.auth-signup .auth-form .has-error input:not([type="radio"]) {
  border-color: var(--alerte);
}
body.auth-page.auth-signup .auth-form .has-error input:focus-visible {
  outline-color: var(--alerte);
}
body.auth-page.auth-signup .password-box input {
  padding-right: 5.6rem;
}
body.auth-page.auth-signup .password-toggle {
  color: var(--quiet);
  letter-spacing: 0.08em;
}
body.auth-page.auth-signup .password-toggle:hover {
  color: var(--ink);
}
body.auth-page.auth-signup .password-toggle:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
body.auth-page.auth-signup .field-hint {
  margin-top: 0.2rem;
  color: var(--quiet);
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .slug-preview {
  display: block;
  max-width: 100%;
  color: var(--quiet);
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .slug-preview b {
  color: var(--ink);
  font-weight: 500;
}
body.auth-page.auth-signup .field-error {
  color: var(--alerte);
  overflow-wrap: anywhere;
}
body.auth-page.auth-signup .signup-terms {
  margin: 0.35rem 0 0.45rem;
  color: color-mix(in srgb, var(--ink) 78%, var(--paper));
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .offer-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0.15rem 0 0.45rem;
  min-width: 0;
}
body.auth-page.auth-signup .offer-pick legend,
body.auth-page.auth-signup .offer-pick > .field-hint {
  grid-column: 1 / -1;
}
body.auth-page.auth-signup .offer-pick legend {
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}
body.auth-page.auth-signup .auth-form .offer-choice {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  margin: 0;
  padding: 0.4rem 0.2rem 0.4rem 1.7rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.auth-page.auth-signup .offer-choice:first-of-type {
  border-top: 1px solid var(--line);
}
body.auth-page.auth-signup .offer-choice:hover {
  border-color: var(--line);
  background: var(--wall);
}
body.auth-page.auth-signup .offer-choice.is-picked {
  border-color: var(--line);
  background: var(--wall);
  box-shadow: inset 2px 0 0 var(--ink);
}
body.auth-page.auth-signup .offer-choice:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
body.auth-page.auth-signup .offer-choice input {
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  accent-color: var(--ink);
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.auth-page.auth-signup .offer-choice-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.8rem;
  min-width: 0;
}
body.auth-page.auth-signup .offer-choice-head strong,
body.auth-page.auth-signup .offer-choice-head b,
body.auth-page.auth-signup .offer-choice-body,
body.auth-page.auth-signup .offer-choice-tag {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .offer-choice-head strong {
  color: var(--ink);
  font-weight: 500;
}
body.auth-page.auth-signup .offer-choice-head b,
body.auth-page.auth-signup .offer-choice-tag {
  color: var(--ink);
  font-weight: 400;
}
body.auth-page.auth-signup .offer-choice-body {
  color: var(--quiet);
}
body.auth-page.auth-signup .auth-submit {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--indigo);
  border-radius: 0;
  background: var(--indigo);
  color: var(--paper);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  scroll-margin-bottom: 1.5rem;
}
body.auth-page.auth-signup .auth-submit:hover {
  background: #2a354c;
  border-color: #2a354c;
  color: var(--paper);
}
body.auth-page.auth-signup .auth-submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--paper);
}
body.auth-page.auth-signup .auth-submit:active {
  background: #2a354c;
  border-color: #2a354c;
  transform: none;
}
body.auth-page.auth-signup .auth-submit:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}
body.auth-page.auth-signup .signup-next,
body.auth-page.auth-signup .auth-legal {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8125rem;
}
body.auth-page.auth-signup .reassure-after {
  display: block;
}
body.auth-page.auth-signup .signup-engagements {
  width: min(100%, 34rem);
  max-width: 100%;
  margin: 0.85rem 0 0;
  color: var(--quiet);
  font-size: 0.8125rem;
}
body.auth-page.auth-signup .signup-engagements summary {
  display: flex;
  align-items: center;
  min-height: 2rem;
  color: var(--quiet);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
body.auth-page.auth-signup .reassure {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 62%, var(--paper));
  font-size: 0.8125rem;
  line-height: 1.4;
}
body.auth-page.auth-signup .reassure li {
  display: block;
  position: relative;
  margin: 0;
  padding-left: 0;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup .reassure li:nth-child(1) { order: 3; }
body.auth-page.auth-signup .reassure li:nth-child(2) { order: 4; }
body.auth-page.auth-signup .reassure li:nth-child(3) { order: 1; }
body.auth-page.auth-signup .reassure li:nth-child(4) { order: 2; }
body.auth-page.auth-signup .reassure li:nth-child(5) { order: 5; }
body.auth-page.auth-signup .reassure li::before {
  content: none;
}
body.auth-page.auth-signup .reassure strong {
  color: inherit;
  font-weight: 400;
}
body.auth-page.auth-signup .auth-switch {
  margin: 0.7rem 0 0;
  color: var(--quiet);
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: break-word;
}
body.auth-page.auth-signup a:focus-visible,
body.auth-page.auth-signup button:focus-visible,
body.auth-page.auth-signup summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  body.auth-page.auth-signup .auth-card,
  body.auth-page.auth-signup .btn:hover,
  body.auth-page.auth-signup .auth-submit:hover {
    animation: none;
    transform: none;
  }
}
@media (min-width: 861px) {
  body.auth-page.auth-signup .auth-layout {
    grid-template-columns: minmax(16rem, 0.96fr) minmax(20rem, 1.04fr);
    align-items: stretch;
  }
  body.auth-page.auth-signup .auth-aside {
    order: 1;
    border-top: 0;
    min-height: 100dvh;
  }
  body.auth-page.auth-signup .auth-aside::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
    pointer-events: none;
  }
  body.auth-page.auth-signup .auth-aside-panel {
    position: sticky;
    top: 12vh;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
    padding: 0 clamp(1.8rem, 4vw, 4.4rem) 1.5rem;
  }
  body.auth-page.auth-signup .auth-aside-sentence {
    display: none;
  }
  body.auth-page.auth-signup .auth-aside-kicker {
    margin: 0 0 1.15rem;
  }
  body.auth-page.auth-signup .auth-aside-title {
    display: block;
    max-width: 9em;
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(3rem, 4.6vw, 4.8rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    overflow-wrap: break-word;
  }
  body.auth-page.auth-signup .auth-aside-title em {
    color: var(--ink);
    font-style: italic;
    font-weight: 500;
  }
  body.auth-page.auth-signup .auth-aside-perks {
    display: grid;
    gap: 0;
    max-width: 22rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: proof;
    color: var(--ink);
  }
  body.auth-page.auth-signup .auth-aside-perks li {
    counter-increment: proof;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    margin: 0;
    padding: 0.8rem 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.02rem;
    line-height: 1.35;
    overflow-wrap: break-word;
  }
  body.auth-page.auth-signup .auth-aside-perks li:last-child {
    border-bottom: 1px solid var(--line);
  }
  body.auth-page.auth-signup .auth-aside-perks li::before {
    content: counter(proof, decimal-leading-zero);
    width: auto;
    height: auto;
    background: none;
    transform: none;
    color: var(--quiet);
    font-family: var(--serif);
    font-size: 1.15rem;
    line-height: 1;
  }
  body.auth-page.auth-signup .auth-card {
    order: 2;
    align-items: flex-start;
    min-height: 100dvh;
    padding: 0.85rem clamp(1.4rem, 3vw, 2.6rem) 1.6rem;
  }
  body.auth-page.auth-signup .auth-card h1 {
    font-size: clamp(2.45rem, 3.4vw, 3.05rem);
  }
}
@media (max-width: 860px) {
  body.auth-page.auth-signup .auth-aside-kicker,
  body.auth-page.auth-signup .auth-aside-sentence {
    display: block;
  }
  body.auth-page.auth-signup .auth-aside-title,
  body.auth-page.auth-signup .auth-aside-perks,
  body.auth-page.auth-signup .auth-aside ul {
    display: none;
  }
  body.auth-page.auth-signup .auth-aside {
    min-height: 0;
  }
  body.auth-page.auth-signup .auth-card {
    padding-top: 0.25rem;
  }
  body.auth-page.auth-signup .eyebrow {
    display: none;
  }
  body.auth-page.auth-signup .auth-form .field {
    margin: 0.18rem 0;
  }
}
@media (min-width: 600px) and (max-width: 860px) {
  body.auth-page.auth-signup .auth-card {
    align-items: stretch;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  body.auth-page.auth-signup .auth-card > :not(.auth-back) {
    width: min(100%, 40rem);
    margin-inline: auto;
  }
}
@media (max-height: 820px) {
  body.auth-page.auth-signup .auth-card {
    padding-top: 0.4rem;
  }
  body.auth-page.auth-signup .eyebrow {
    display: none;
  }
  body.auth-page.auth-signup .auth-card h1 {
    font-size: 2.5rem;
  }
  body.auth-page.auth-signup .signup-proofs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    margin: 0.25rem 0 0;
    padding: 0.2rem 0 0;
  }
  body.auth-page.auth-signup .signup-proofs li {
    font-size: 1rem;
  }
  body.auth-page.auth-signup .auth-form .field {
    margin: 0.22rem 0;
  }
  body.auth-page.auth-signup .auth-form input:not([type="hidden"]):not([type="radio"]) {
    padding-top: 0.38rem;
    padding-bottom: 0.38rem;
  }
  body.auth-page.auth-signup .lead-sm {
    margin-top: 0.2rem;
  }
}
@media (max-height: 820px) and (min-width: 861px) {
  body.auth-page.auth-signup .offer-pick {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  body.auth-page.auth-signup .auth-submit {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
}
@media (max-height: 940px) {
  body.auth-page.auth-signup .offer-choice-body,
  body.auth-page.auth-signup .offer-choice-tag {
    display: none;
  }
  body.auth-page.auth-signup .offer-choice {
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
  }
}

/* La barre de langue et le bandeau cookies sont injectés hors du
   formulaire. Sur cette page ils restent dans le papier, pour que
   le bouton indigo soit le seul aplat saturé. */
body.auth-page.auth-signup .aw-languages {
  justify-content: flex-end;
  gap: 0.15rem 0.55rem;
  margin: 0;
  padding: 0.2rem max(1.15rem, env(safe-area-inset-right)) 0.15rem max(1.15rem, env(safe-area-inset-left));
  background: #f3efe6;
  color: #6f675e;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid #d8d0c4;
}
body.auth-page.auth-signup .aw-languages a,
body.auth-page.auth-signup .aw-languages span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}
body.auth-page.auth-signup .aw-languages [aria-current="true"] {
  color: #161412;
  text-decoration: underline;
  text-decoration-color: #161412;
  text-underline-offset: 0.25em;
}
body.auth-page.auth-signup .aw-languages a:hover {
  color: #161412;
}
body.auth-page.auth-signup .aw-languages a:focus-visible {
  outline: 2px solid #161412;
  outline-offset: 2px;
}
body.auth-page.auth-signup .cookie-band {
  background: #faf7f1;
  color: #161412;
  border: 1px solid #d8d0c4;
  box-shadow: 0 16px 40px -28px rgba(22, 20, 18, 0.55);
  padding: 0.45rem 0.7rem;
  gap: 0.35rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1.35;
}
body.auth-page.auth-signup .cookie-band p {
  margin: 0;
}
body.auth-page.auth-signup .cookie-band a {
  color: #161412;
}
body.auth-page.auth-signup .cookie-band .btn {
  padding: 0.4rem 0.7rem;
  min-height: 2.25rem;
}
body.auth-page.auth-signup .cookie-band .btn-ink,
body.auth-page.auth-signup .cookie-band .btn-ink:hover,
body.auth-page.auth-signup .cookie-band .btn-ink:focus-visible,
body.auth-page.auth-signup .cookie-band .btn-ghost,
body.auth-page.auth-signup .cookie-band .btn-ghost:hover,
body.auth-page.auth-signup .cookie-band .btn-ghost:focus-visible {
  background: transparent;
  border-color: #161412;
  color: #161412;
}
@media (min-width: 861px) {
  body.auth-page.auth-signup .cookie-band {
    left: 0.8rem;
    right: auto;
    width: min(42%, 26rem);
    bottom: 0.8rem;
    margin: 0;
  }
  body.auth-page.auth-signup:has(.cookie-band) {
    padding-bottom: 0;
  }
}
@media (max-width: 860px) {
  body.auth-page.auth-signup .cookie-band {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0;
    box-shadow: none;
  }
  body.auth-page.auth-signup:has(.cookie-band) {
    padding-bottom: 0;
  }
}