/* =====================================================================
   L'Art du Jour - couche design « artistique + machine ».
   Galerie sombre (l'œuvre prime) + détails de laboratoire (mono, grille,
   curseur clignotant). Chargé après Bootstrap pour gagner la cascade.
   ===================================================================== */

:root {
    /* Encre & lumière */
    --ink-900: #0a0a0b;   /* fond galerie       */
    --ink-800: #111114;   /* surfaces           */
    --ink-700: #1a1a1f;   /* cartes             */
    --ink-600: #26262d;   /* bordures pleines   */
    --line:    #2b2b33;   /* filets             */
    --paper:   #ecebe6;   /* texte principal    */
    --muted:   #8a8a93;   /* texte secondaire   */
    --faint:   #7c7c85;   /* labels machine (4,79:1 sur --ink-900, WCAG 1.4.3 AA) */
    --accent:  #c8ff4d;   /* vert-acide « signal machine » */
    --accent-dim: #7e9e3a;

    /* Typo : serif = artiste, mono = machine */
    --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', Georgia, serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Bootstrap re-pointé sur nos jetons */
    --bs-body-bg: var(--ink-900);
    --bs-body-color: var(--paper);
    --bs-border-color: var(--line);
    --bs-link-color: var(--paper);
    --bs-link-hover-color: var(--accent);
    --bs-emphasis-color: var(--paper);
    --bs-primary: var(--accent);
}

* { -webkit-font-smoothing: antialiased; }

body {
    background-color: var(--ink-900);
    color: var(--paper);
    font-family: var(--font-serif);
    /* Grille de laboratoire, très discrète, en fond. */
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    background-attachment: fixed;
    opacity: 1;
}
/* Voile pour atténuer la grille et garder l'œuvre lisible. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 0%, transparent 0%, var(--ink-900) 78%);
    pointer-events: none;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ---- Labels machine : « // SEED », « // SIGNATURE » ---------------- */
.machine-label {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--faint);
}
.machine-label::before { content: "// "; color: var(--accent-dim); }

.mono { font-family: var(--font-mono); }
.text-accent { color: var(--accent); }

/* Curseur clignotant - signe de vie de la machine. Quatre cycles à 1,05 s =
   4,2 s, sous le seuil des 5 s de WCAG 2.2.2 : le curseur bat au chargement
   puis se fige, visible. Pas de bouton pause à construire. */
.cursor::after {
    content: "▍";
    color: var(--accent);
    margin-left: .15em;
    animation: blink 1.05s steps(1) 4;
}
@keyframes blink { 50% { opacity: 0; } }

/* Lien d'évitement. Autonome exprès : Bootstrap n'est chargé que par les pages
   qui passent par base.html.twig, et les huit pages autonomes du back-office
   portent le même lien. Une classe, un comportement, partout pareil.
   Invisible tant qu'il n'a pas le focus, plein cadre dès qu'il l'a. */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: .6rem;
    left: .6rem;
    z-index: 1080;
    width: auto;
    height: auto;
    margin: 0;
    padding: .7rem 1rem;
    overflow: visible;
    clip-path: none;
    background: var(--ink-800);
    color: var(--paper);
    border: 1px solid var(--accent);
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}

/* =====================================================================
   En-tête / navigation
   ===================================================================== */
.site-header {
    border-bottom: 1px solid var(--line);
    background: rgba(10, 10, 11, .72);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header .brand {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--paper);
    text-decoration: none;
}
.site-header .brand .glyph { color: var(--accent); }
.site-header nav a {
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .04em;
    padding: .2rem 0;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.site-header nav a:hover,
.site-header nav a.is-active {
    color: var(--paper);
    border-bottom-color: var(--accent);
}
.header-clock {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--faint);
    letter-spacing: .08em;
}

/* Sélecteur de langue : ne montre que la langue active ; déplie au clic. */
.site-header .lang-switch {
    position: relative;
}
.site-header .lang-switch > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .04em;
    transition: color .18s ease;
}
.site-header .lang-switch > summary::-webkit-details-marker { display: none; }
.site-header .lang-switch > summary::after {
    content: "▾";
    font-size: .7em;
    transition: transform .18s ease;
}
.site-header .lang-switch[open] > summary::after { transform: rotate(180deg); }
.site-header .lang-switch > summary:hover,
.site-header .lang-switch[open] > summary { color: var(--paper); }
.site-header .lang-switch-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .4rem .2rem;
    min-width: 8rem;
    background: rgba(10, 10, 11, .96);
    border: 1px solid var(--line);
    border-radius: .35rem;
    backdrop-filter: blur(8px);
    z-index: 60;
}
.site-header .lang-switch-menu a {
    padding: .3rem .7rem;
    border-bottom: none;
    white-space: nowrap;
}
.site-header .lang-switch-menu a[aria-current="true"] {
    color: var(--paper);
    border-bottom: none;
}

/* =====================================================================
   Titres
   ===================================================================== */
h1, h2, h3 { font-family: var(--font-serif); letter-spacing: -.01em; }
.display-art {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.02;
    font-weight: 600;
    margin: 0;
}
.eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent-dim);
    margin-bottom: 1rem;
}

/* Working-translation notice on EN legal pages (step-11 §7). */
.legal-review-notice {
    border: 1px solid var(--accent-dim);
    border-left-width: 4px;
    padding: .75rem 1rem;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--accent-dim);
}

/* =====================================================================
   Le Présent (œuvre du jour)
   ===================================================================== */
.present { padding-block: clamp(2rem, 6vw, 5rem); }
.present-visual {
    margin: 0;
    border: 1px solid var(--line);
    background:
        repeating-conic-gradient(var(--ink-800) 0% 25%, var(--ink-700) 0% 50%) 50% / 28px 28px;
    box-shadow: 0 40px 120px -40px #000;
    overflow: hidden;
    position: relative;
}
.present-visual img {
    display: block;
    width: 100%;
    height: auto;
}
.artwork-visual img,
.museum-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Galerie de vignettes (fiche œuvre) : l'œuvre seule + les mockups « en
   situation ». Le clic permute le grand visuel (gallery_controller). */
.gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.gallery-thumb {
    flex: 0 1 118px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--ink-800);
    cursor: pointer;
    text-align: center;
    transition: border-color .25s ease;
}
.gallery-thumb-visual {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.gallery-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    opacity: .75;
    transition: opacity .25s ease;
}
.gallery-thumb-label {
    display: block;
    padding: .4rem .35rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    line-height: 1.3;
    color: var(--muted);
}
.gallery-thumb:hover,
.gallery-thumb:focus-visible {
    border-color: var(--accent-dim);
}
.gallery-thumb:hover img { opacity: 1; }
.gallery-thumb.is-active { border-color: var(--accent); }
.gallery-thumb.is-active img { opacity: 1; }
.gallery-thumb.is-active span { color: var(--accent); }

/* Apparition douce de l'œuvre (Stimulus reveal) */
[data-controller~="reveal"] { opacity: 0; transform: translateY(12px); }
[data-controller~="reveal"].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity .9s ease, transform .9s ease;
}

/* =====================================================================
   Fiche d'identité
   ===================================================================== */
.identity-card {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.identity-card h1,
.identity-card h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0 0 1rem;
}
.identity-card .collection-badge {
    margin: -0.4rem 0 1.4rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .08em;
}
.identity-card .collection-badge a {
    color: var(--accent-dim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.identity-card .collection-badge a::before { content: "→ "; }
.identity-card .collection-badge a:hover,
.identity-card .collection-badge a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.identity-card .recipe {
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--paper);
    border-left: 2px solid var(--accent);
    padding-left: 1rem;
    margin: 1.2rem 0 1.8rem;
}
.identity-card dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1.4rem;
    margin: 0;
    padding-block: 1rem;
    border-top: 1px solid var(--line);
}
.identity-card dt {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    align-self: center;
}
.identity-card dt::before { content: "// "; color: var(--accent-dim); }
.identity-card dd { margin: 0; align-self: center; }
.identity-card .signature,
.identity-card .public-key {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--accent);
    word-break: break-all;
    background: var(--ink-900);
    border: 1px solid var(--line);
    padding: .35rem .55rem;
    display: inline-block;
}
.identity-card .adn dd {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.7;
}
.identity-card .adn-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.identity-card .adn-list li { word-break: break-all; }
.identity-card .adn-list li::before {
    content: "// ";
    color: var(--accent-dim);
    font-size: .8em;
}
.btn-order {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-900);
    background: var(--accent);
    padding: .8rem 1.4rem;
    border: 1px solid var(--accent);
    transition: background .2s ease, color .2s ease;
}
.btn-order:hover,
.btn-order:focus-visible {
    background: transparent;
    color: var(--accent);
}

/* =====================================================================
   Le Musée (grille)
   ===================================================================== */
.museum { padding-block: clamp(2rem, 5vw, 4rem); }
.museum-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    border: 1px solid var(--line);
    background: var(--ink-800);
    padding: 1rem 1.2rem;
    margin-bottom: 2.4rem;
}
/* L'avertissement d'auto-soumission prend la ligne entière : les filtres
   reprennent dessous, comme si de rien n'était. */
.museum-filters-hint {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    color: var(--muted);
}
.museum-filters label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
.museum-filters select,
.museum-filters button {
    background: var(--ink-900);
    color: var(--paper);
    border: 1px solid var(--line);
    padding: .5rem .7rem;
    font-family: var(--font-mono);
    font-size: .85rem;
}
.museum-filters button {
    color: var(--ink-900);
    background: var(--accent);
    border-color: var(--accent);
    cursor: pointer;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .72rem;
    transition: background .15s ease;
}
.museum-filters button:hover { background: #d8ff7a; }

.museum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    /* La grille est un <ul> (sémantique de liste retrouvée avec la pagination
       classique) : sans ce reset, le navigateur peint une puce par cellule. */
    list-style: none;
    margin: 0;
    padding: 0;
}
.museum-item { background: var(--ink-900); }
.museum-item a {
    display: block;
    text-decoration: none;
    color: var(--paper);
    position: relative;
}
.museum-item .frame {
    aspect-ratio: 1 / 1;
    background:
        repeating-conic-gradient(var(--ink-800) 0% 25%, var(--ink-700) 0% 50%) 50% / 22px 22px;
    overflow: hidden;
    transition: filter .25s ease;
}
.museum-item a:hover .frame { filter: brightness(1.08); }
.museum-item .meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .7rem .85rem;
    border-top: 1px solid var(--line);
}
.museum-item .title { font-family: var(--font-mono); font-size: .82rem; }
.museum-item .status {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .12rem .4rem;
    border: 1px solid var(--line);
}
.status--available { color: var(--accent); border-color: var(--accent-dim); }
.status--sold-out { color: var(--faint); }

/* Pagination bar: its own row below the grid, sharing the grid's border so the
   two read as one block (the bar sat *inside* the grid as a full-width cell
   while pages were appended in place; it is now a sibling of it). */
.museum-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--ink-800);
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-top: 0;
}
.museum-pager-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* Own padding: the bar's links are the only functional navigation with JS
       disabled, so they carry the WCAG 2.5.8 minimum target size themselves. */
    padding: .7rem 1.1rem;
    border: 1px solid var(--line);
    background: var(--ink-900);
    color: var(--paper);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* « Suivante » is the primary move through the archive - it gets the accent
   fill, the same affordance as the filter submit button. */
.museum-pager-next {
    color: var(--ink-900);
    background: var(--accent);
    border-color: var(--accent);
}
.museum-pager-link:hover { border-color: var(--accent); color: var(--accent); }
.museum-pager-next:hover { background: #d8ff7a; border-color: #d8ff7a; color: var(--ink-900); }
/* Kept in the flow (aria-hidden) so the three slots don't shift page to page. */
.museum-pager-link.is-disabled {
    opacity: .35;
    background: transparent;
    color: var(--faint);
    border-style: dashed;
}
.museum-pager-arrow { font-size: .9rem; line-height: 1; }
.museum-pager-count {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Way back to the filters after a screenful of artworks (T13): a plain text
   link needs its own padding to clear the WCAG 2.5.8 minimum target size.
   Habillé comme les autres liens « machine » du site (mono, capitales, filet
   qui s'allume à l'accent) plutôt qu'en lien brut souligné. */
.museum-back-top {
    display: inline-block;
    padding: .6rem .25rem;
    margin-top: 1.4rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.museum-back-top::before { content: "↑ "; color: var(--accent-dim); }
.museum-back-top:hover,
.museum-back-top:focus-visible {
    color: var(--paper);
    border-bottom-color: var(--accent);
}

/* =====================================================================
   Back-office - File de curation
   ===================================================================== */
.curation { padding-block: clamp(2rem, 5vw, 4rem); }

.curation-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 2.4rem;
}
.curation-stats .stat {
    flex: 1 1 200px;
    background: var(--ink-800);
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.curation-stats .stat-figure {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--accent);
}
.curation-stats .stat-label {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}

.curation-empty {
    border: 1px dashed var(--line);
    background: var(--ink-800);
    padding: 2rem 1.4rem;
    text-align: center;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .9rem;
}

.curation-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}
.curation-card {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.curation-card .frame {
    aspect-ratio: 1 / 1;
    background:
        repeating-conic-gradient(var(--ink-800) 0% 25%, var(--ink-700) 0% 50%) 50% / 22px 22px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.curation-card .frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.curation-body {
    padding: 1.1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.curation-recipe {
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.5;
    border-left: 2px solid var(--accent);
    padding-left: .9rem;
    margin: 0;
}
.curation-gamut-warning {
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.5;
    color: #ffd24d;
    background: rgba(255, 178, 0, .08);
    border: 1px solid rgba(255, 178, 0, .35);
    padding: .55rem .7rem;
    margin: 0;
}

.curation-dna {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1.1rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.curation-dna dt {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
    align-self: center;
}
.curation-dna dt::before { content: "// "; color: var(--accent-dim); }
.curation-dna dd {
    margin: 0;
    align-self: center;
    font-size: .9rem;
    word-break: break-all;
}
.curation-dna dd.mono { font-size: .74rem; color: var(--muted); }

.curation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: auto;
}
.curation-actions form { margin: 0; }
.curation-actions .act {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .55rem .9rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.curation-actions .act--validate {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink-900);
}
.curation-actions .act--validate:hover {
    background: #d8ff7a;
    border-color: #d8ff7a;
}
.curation-actions .act--regenerate { color: var(--muted); }
.curation-actions .act--regenerate:hover {
    color: var(--paper);
    border-color: var(--muted);
}
.curation-actions .act--reject:hover {
    color: #ff7a7a;
    border-color: #ff7a7a;
}

/* =====================================================================
   Back-office - édition de la citation (page autonome, hors EasyAdmin)
   Réemploie l'encre + le vert « signal machine » du site : `app.css` porte
   déjà le fond sombre via `body`, on n'ajoute que la coquille et le champ.
   ===================================================================== */
.recipe-page { min-height: 100vh; }
.recipe-shell {
    max-width: 52rem;
    margin-inline: auto;
    padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 2rem) 4rem;
}
.recipe-header { margin-bottom: 2rem; }
.recipe-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    margin: 0 0 .8rem;
}
.recipe-subtitle {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 0 0 1.4rem;
}
.recipe-subtitle code {
    color: var(--accent);
    background: var(--ink-900);
    border: 1px solid var(--line);
    padding: .1rem .4rem;
    font-size: .92em;
}
.recipe-back {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.recipe-back:hover,
.recipe-back:focus-visible { color: var(--accent); border-bottom-color: var(--accent-dim); }

.recipe-card {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.recipe-card label {
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .7rem;
}
.recipe-card label::before { content: "// "; color: var(--accent-dim); }
.recipe-card textarea {
    width: 100%;
    min-height: 8.5rem;
    resize: vertical;
    background: var(--ink-900);
    color: var(--paper);
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    padding: .9rem 1rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.6;
    transition: border-color .18s ease;
}
.recipe-card textarea:focus {
    outline: none;
    border-color: var(--accent-dim);
    border-left-color: var(--accent);
}
.recipe-card textarea::placeholder { color: var(--faint); font-style: normal; }

/* Erreurs de validation (thème de formulaire Symfony par défaut). */
.recipe-card ul {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
}
.recipe-card ul li {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: #ff7a7a;
}
.recipe-card ul li::before { content: "! "; color: #ff7a7a; }

.recipe-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.6rem;
}
.recipe-submit {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-900);
    background: var(--accent);
    border: 1px solid var(--accent);
    padding: .8rem 1.6rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.recipe-submit:hover,
.recipe-submit:focus-visible { background: transparent; color: var(--accent); }

/* =====================================================================
   Commander (tunnel d'achat)
   ===================================================================== */
.checkout-tunnel { padding-block: clamp(1.5rem, 5vw, 4rem); }

.checkout-visual {
    margin: 0;
    border: 1px solid var(--line);
    background:
        repeating-conic-gradient(var(--ink-800) 0% 25%, var(--ink-700) 0% 50%) 50% / 28px 28px;
    box-shadow: 0 40px 120px -40px #000;
    overflow: hidden;
}
.checkout-visual img { display: block; width: 100%; height: auto; }

/* Colonne d'achat : carte « laboratoire » alignée sur la fiche d'identité. */
.checkout-tunnel .col-lg-5 {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
    padding: clamp(1.4rem, 3vw, 2rem);
}
.checkout-tunnel h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin: 0 0 1.4rem;
}

.checkout-sold-out {
    font-family: var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.checkout-formats {
    border: 1px solid var(--line);
    padding: 1rem 1.1rem 1.1rem;
    margin: 0;
}
.checkout-formats legend {
    float: none;
    width: auto;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .8rem;
}
.checkout-formats legend::before { content: "// "; color: var(--accent-dim); }

.checkout-format {
    align-items: center;
    border-top: 1px solid var(--line);
    padding: .7rem 0;
    margin: 0;
    cursor: pointer;
}
.checkout-format:first-of-type { border-top: 0; }
.checkout-format > span:first-child {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.checkout-format input[type="radio"] { accent-color: var(--accent); }
.checkout-format-price {
    font-family: var(--font-mono);
    font-size: .9rem;
    color: var(--accent);
    white-space: nowrap;
}

/* Boutons : le btn-primary Bootstrap est illisible sur le vert acide. */
.checkout-tunnel .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--ink-900);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-active-bg: #d8ff7a;
    --bs-btn-active-border-color: #d8ff7a;
    --bs-btn-active-color: var(--ink-900);
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    width: 100%;
}

.checkout-error {
    font-family: var(--font-mono);
    font-size: .82rem;
}

/* Rareté : l'argument de valeur central (édition numérotée), affiché en « signal
   machine » — pas de fausse urgence temporelle (audit §2). État neutre discret ;
   passe en vert acide (--low) seulement quand l'édition s'épuise (< 10). */
.checkout-rarity {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line);
    padding: .3rem .6rem;
    margin: 0 0 1.4rem;
}
.checkout-rarity--low {
    color: var(--accent);
    border-color: var(--accent-dim);
}

/* Seam mockup : réservé pour une future mise en situation, invisible tant que
   vide (l'attribut [hidden] suffit ; ceinture + bretelles). */
.checkout-mockup:empty { display: none; }

/* « Ce que vous recevez » : label machine + liste alignée sur la carte labo. */
.checkout-receive {
    border-top: 1px solid var(--line);
    margin-top: 1.4rem;
    padding-top: 1.1rem;
}
.checkout-receive h2 {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 .7rem;
}
.checkout-receive h2::before { content: "// "; color: var(--accent-dim); }
.checkout-receive ul { margin: 0; }
.checkout-receive li {
    padding: .2rem 0;
    line-height: 1.5;
}
.checkout-receive li::before {
    content: "→ ";
    color: var(--accent-dim);
    font-family: var(--font-mono);
}

/* Réassurance : fines mentions de confiance, en retrait (mono discret). */
.checkout-reassurance {
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.checkout-reassurance li {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .02em;
    color: var(--muted);
    padding: .18rem 0;
}
.checkout-reassurance li::before { content: "• "; color: var(--accent-dim); }
.checkout-reassurance a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.checkout-reassurance a:hover { color: var(--accent); }

/* Mobile : visuel d'abord, colonne d'achat dessous, sans débordement. */
@media (max-width: 991.98px) {
    .checkout-tunnel .col-lg-5 { margin-top: 1.5rem; }
}

/* =====================================================================
   Manifeste
   ===================================================================== */
.manifesto { padding-block: clamp(2rem, 6vw, 5rem); max-width: 64ch; }
.manifesto p { font-size: 1.18rem; line-height: 1.75; color: var(--paper); }
.manifesto h2 { margin-top: 2.4rem; font-size: 1.5rem; }
.manifesto pre {
    background: var(--ink-800);
    border: 1px solid var(--line);
    padding: 1rem 1.1rem;
    overflow-x: auto;
}
.manifesto .public-key {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--accent);
    word-break: break-all;
}

/* CTA « vérifier un certificat » : bouton-contour acide + note discrète. */
.manifesto .verify-cta {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    padding: .55rem 1.2rem;
    transition: background-color .18s ease, color .18s ease;
}
.manifesto .verify-cta:hover,
.manifesto .verify-cta:focus-visible {
    background: var(--accent);
    color: var(--ink-900);
}
.manifesto .verify-cta-hint {
    margin-top: .7rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--muted);
}

/* =====================================================================
   Vérification de certificat (page publique)
   Même colonne étroite que le Manifeste ; formulaire « laboratoire ».
   ===================================================================== */
.certificate-verification {
    padding-block: clamp(2rem, 6vw, 5rem);
    max-width: 60ch;
}
.certificate-verification > p:not([class]) {
    font-size: 1.18rem;
    line-height: 1.75;
    color: var(--paper);
}

.certificate-verification .verify-form { margin-block: 2rem; }
.certificate-verification .verify-field { margin-bottom: 1.4rem; }

/* Labels = signal machine (mono, capitales, « // »). */
.certificate-verification .form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .5rem;
}
.certificate-verification .form-label::before { content: "// "; color: var(--accent-dim); }

/* Champs techniques (hash / signature) : mono, fond encre, filet acide. */
.certificate-verification textarea.form-control {
    background: var(--ink-900);
    color: var(--paper);
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: 0;
    padding: .8rem 1rem;
    font-family: var(--font-mono);
    font-size: .88rem;
    line-height: 1.5;
    word-break: break-all;
    box-shadow: none;
    transition: border-color .18s ease;
}
.certificate-verification textarea.form-control:focus {
    background: var(--ink-900);
    color: var(--paper);
    border-color: var(--accent-dim);
    border-left-color: var(--accent);
    box-shadow: none;
}
.certificate-verification textarea.form-control::placeholder { color: var(--faint); }

/* Bouton d'action : pavé vert acide (encre au repos → contour au survol). */
.certificate-verification .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--ink-900);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-active-bg: #d8ff7a;
    --bs-btn-active-border-color: #d8ff7a;
    --bs-btn-active-color: var(--ink-900);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-inline: 1.6rem;
}

/* Verdict : encadré sombre, filet coloré à gauche, gros glyphe. */
.certificate-verification .verify-verdict {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block: 2rem;
    padding: 1.1rem 1.3rem;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-left-width: 3px;
}
.certificate-verification .verify-verdict strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: .04em;
    margin-bottom: .2rem;
}
.certificate-verification .verify-verdict-mark {
    font-size: 2rem;
    line-height: 1;
}
.certificate-verification .verify-verdict.is-valid {
    border-left-color: var(--accent);
}
.certificate-verification .verify-verdict.is-valid .verify-verdict-mark,
.certificate-verification .verify-verdict.is-valid strong { color: var(--accent); }
.certificate-verification .verify-verdict.is-invalid {
    border-left-color: #ff7a7a;
}
.certificate-verification .verify-verdict.is-invalid .verify-verdict-mark,
.certificate-verification .verify-verdict.is-invalid strong { color: #ff7a7a; }

.certificate-verification .verify-key-note {
    margin-top: 2rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--muted);
}
.certificate-verification .verify-key-note a { color: var(--accent); }

/* =====================================================================
   À propos (page « artiste »)
   Récit long : occupe toute la largeur sur grand écran via des colonnes
   « journal » (lignes qui restent lisibles), colonne unique sur mobile.
   ===================================================================== */
.about {
    /* Écrase le max-width étroit hérité de .manifesto : on remplit l'espace. */
    max-width: min(84rem, 100%);
    margin-inline: auto;
}
.about section { margin-bottom: 2rem; }
/* Titres de paragraphe : signal machine vert fluo, petite marque mono. */
.about section h2 {
    margin-top: 0;
    margin-bottom: .6rem;
    font-size: 1.3rem;
    letter-spacing: .005em;
    color: var(--accent);
}
.about section h2::before {
    content: "∑ ";
    font-family: var(--font-mono);
    font-size: .8em;
    color: var(--accent-dim);
}

@media (min-width: 62rem) {
    .about {
        column-width: 21rem;   /* autant de colonnes lisibles que la largeur permet */
        column-gap: 3.25rem;
    }
    /* Titre et chapô traversent toute la largeur, au-dessus des colonnes. */
    .about > .eyebrow,
    .about > h1 { column-span: all; }
    /* On ne coupe jamais un bloc au milieu d'une colonne. */
    .about > p,
    .about > section { break-inside: avoid; }
}

/* Phrase-signature encadrée, pleine largeur, centrée sous le récit. */
.about .signature {
    column-span: all;
    width: fit-content;
    max-width: 100%;
    margin: clamp(3rem, 6vw, 5rem) auto 1rem;
    padding: 1.4rem 3rem;
    border: 1px solid var(--accent-dim);
    /* Double filet fin façon plaque gravée. */
    box-shadow: inset 0 0 0 4px var(--ink-900);
    background: color-mix(in srgb, var(--accent) 6%, var(--ink-800));
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--accent);
    text-align: center;
}
.about .signature::after {
    content: "Wilfried Fournier";
    display: block;
    margin-top: .7rem;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: .7rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--faint);
}

/* =====================================================================
   Pied de page
   ===================================================================== */
.site-footer {
    border-top: 1px solid var(--line);
    margin-top: 4rem;
    padding-block: 2rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--faint);
    letter-spacing: .06em;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
/* Columned footer (grouped links) so a growing collection list stays tidy. */
.site-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(8rem, 1fr));
    gap: 1.6rem 2rem;
    align-items: start;
}
.site-footer-brand { display: flex; flex-direction: column; gap: .4rem; }
.site-footer-mark { color: var(--muted); letter-spacing: .1em; }
.site-footer-tagline { color: var(--faint); }
.site-footer-col { display: flex; flex-direction: column; gap: .55rem; }
.site-footer-heading {
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .2rem;
}
@media (max-width: 48rem) {
    .site-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer-brand { grid-column: 1 / -1; }
}

/* Liens « action » génériques */
.actions a, .back a {
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
}
.actions a:hover, .back a:hover { color: #d8ff7a; }

/* =====================================================================
   Pages « collection » (longue traîne SEO, plan-seo-acquisition A.2)
   Réemploie la grille du musée ; ajoute l'accroche, les puces « machine »,
   le corps éditorial (largeur de lecture) et la FAQ dépliable.
   ===================================================================== */
.collection { padding-block: clamp(2rem, 5vw, 4rem); }
.collection .display-art { margin-bottom: 1.2rem; }

.collection-lede {
    max-width: 60ch;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.55;
    color: var(--paper);
    margin: 0 0 1.6rem;
}

/* Puces « signal machine » : les preuves produit, en mono, avant la grille. */
.collection-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 2.4rem;
    padding: 0;
}
.collection-chips li {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--ink-800);
    padding: .4rem .7rem;
}
.collection-chips li::before { content: "// "; color: var(--accent-dim); }

.collection-empty {
    border: 1px dashed var(--line);
    background: var(--ink-800);
    padding: 2rem 1.4rem;
    text-align: center;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: .9rem;
    margin-bottom: 2.4rem;
}

/* Région éditoriale : corps + FAQ. Séparée de la grille par un filet pleine
   largeur ; en colonne unique sur mobile, en deux colonnes qui remplissent
   l'écran sur grand écran (le récit à gauche, la FAQ à droite). */
.collection-editorial {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--line);
}

/* Corps éditorial : chapitres rythmés, sous-titres « signal machine ». */
.collection-prose { max-width: 65ch; }
.collection-prose section + section { margin-top: 2.6rem; }
.collection-prose p {
    line-height: 1.75;
    color: var(--paper);
    margin: 0 0 1.1rem;
}

/* Titres de chapitre : marque ∑ mono + vert accent, calqués sur `.about h2`. */
.collection-prose h2,
.collection-faq > h2 {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    letter-spacing: .005em;
    color: var(--accent);
    margin: 0 0 .7rem;
}
.collection-prose h2::before,
.collection-faq > h2::before {
    content: "∑ ";
    font-family: var(--font-mono);
    font-size: .78em;
    color: var(--accent-dim);
}

/* FAQ dépliable (AEO) : native <details>, sans JS. En colonne unique, un filet
   la sépare du récit qui la précède ; en deux colonnes ce filet disparaît. */
.collection-faq {
    max-width: 65ch;
    margin-top: 2.8rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--line);
}

@media (min-width: 62rem) {
    .collection-editorial {
        display: grid;
        grid-template-columns: 1.25fr 1fr;
        gap: clamp(2.5rem, 5vw, 4.75rem);
        align-items: start;
    }
    /* Chaque colonne remplit sa cellule ; plus de filet interne entre les deux. */
    .collection-prose,
    .collection-faq { max-width: none; }
    .collection-faq {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}
.collection-faq details {
    border-top: 1px solid var(--line);
    padding: .9rem 0;
}
.collection-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.collection-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--paper);
}
.collection-faq summary::-webkit-details-marker { display: none; }
.collection-faq summary::after {
    content: "+";
    font-family: var(--font-mono);
    color: var(--accent);
    transition: transform .18s ease;
}
.collection-faq details[open] summary::after { transform: rotate(45deg); }
.collection-faq details p {
    margin: .8rem 0 0;
    line-height: 1.7;
    color: var(--muted);
}

/* Appel à l'action : le bouton signal + un lien discret vers le musée. */
.collection-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    margin-top: 3.5rem;
}
.collection-cta-link {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.collection-cta-link:hover {
    color: var(--paper);
    border-bottom-color: var(--accent);
}

/* Collection maillage bandeaux (plan-seo-acquisition A.4.2): museum + home. */
.museum-collections,
.home-collections {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-block: 2.5rem;
    padding-block: 1.1rem;
    border-top: 1px solid var(--line, rgba(255, 255, 255, .12));
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .12));
}
.museum-lede {
    max-width: 60ch;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: var(--paper);
    margin: 0 0 1.6rem;
}

.museum-collections { margin-top: 0; }
.museum-collections-label,
.home-collections-label {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-dim);
}
.museum-collections a,
.home-collections a {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.museum-collections a:hover,
.home-collections a:hover {
    color: var(--paper);
    border-bottom-color: var(--accent);
}

/* =====================================================================
   Exposition « Virtuel ! Et alors ? »
   Pages sans locale, ouvertes au scan d'un QR code, debout devant un
   poster. Pas d'en-tête, pas de pied de page : ces classes portent donc
   seules l'identité du site (grille de labo, serif, vert acide, labels
   machine). Colonne étroite comme le Manifeste, corps de texte plus
   gros - on lit sur un téléphone, à bout de bras, dans une salle.
   ===================================================================== */
.expo-body { min-height: 100dvh; }

.expo-shell {
    width: 100%;
    max-width: 64ch;
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 5vw, 2rem);
}

/* ---- L'écran du QR code ---------------------------------------------- */
.expo-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding-block: clamp(2.5rem, 10vh, 5rem);
}
.expo-home h1 { margin: 0 0 1.5rem; }
.expo-home-intro {
    font-size: 1.18rem;
    line-height: 1.7;
    color: var(--paper);
    margin-bottom: 2.4rem;
}

/* Boutons au pouce : pleine largeur, hauts, empilés. Le premier est plein
   (vert acide, comme .btn-order), les suivants en contour - une seule
   action évidente, les autres restent disponibles. */
.expo-button {
    display: block;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    padding: 1.15rem 1.4rem;
    margin-bottom: .9rem;
    transition: background-color .18s ease, color .18s ease;
}
.expo-button:first-of-type {
    color: var(--ink-900);
    background: var(--accent);
}
.expo-button:first-of-type:hover,
.expo-button:first-of-type:focus-visible {
    background: transparent;
    color: var(--accent);
}
.expo-button:hover,
.expo-button:focus-visible {
    background: var(--accent);
    color: var(--ink-900);
}

.expo-home-site {
    margin-top: 2.2rem;
    margin-bottom: 0;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
}
.expo-home-site a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: color .18s ease, border-color .18s ease;
}
.expo-home-site a::before { content: "→ "; color: var(--accent-dim); }
.expo-home-site a:hover,
.expo-home-site a:focus-visible {
    color: var(--paper);
    border-bottom-color: var(--accent);
}

/* ---- Le chemin du retour --------------------------------------------- */
/* Entré par un QR code, le visiteur n'a pas de page précédente : le bouton
   « retour » de son navigateur ne mène nulle part. Chaque page fille pose
   donc son propre retour. Même vocabulaire que .expo-home-site (mono, chevron
   acide), flèche inversée. */
.expo-back {
    margin: 0 0 1.6rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.expo-back a {
    color: var(--muted);
    text-decoration: none;
    transition: color .18s ease;
}
.expo-back a::before { content: "\2190 "; color: var(--accent-dim); }
.expo-back a:hover,
.expo-back a:focus-visible { color: var(--accent); }

/* En bas des six étapes, la cible doit être grosse : on lit au pouce. */
.expo-back--end {
    margin: 3rem 0 0;
    padding-block: .6rem;
}

/* ---- Les six étapes --------------------------------------------------- */
.expo-how { padding-block: clamp(2rem, 6vw, 4.5rem); }
.expo-how h1 { margin: 0 0 1.4rem; }
.expo-how .lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 2.6rem;
}
.expo-how p {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--paper);
}
.expo-how strong { color: var(--accent); font-weight: 600; }

.expo-step { margin-top: 3rem; }
.expo-step:first-of-type { margin-top: 0; }
/* Le numéro d'étape est déjà dans le texte du h2 : on le laisse porter le
   filet acide plutôt que d'inventer une pastille. */
.expo-step h2 {
    font-size: 1.45rem;
    margin-bottom: .9rem;
    padding-left: .9rem;
    border-left: 3px solid var(--accent-dim);
}

/* La suite, les divisions : des nombres, donc du mono, comme partout où la
   machine parle sur ce site. */
.expo-figure {
    font-family: var(--font-mono) !important;
    font-size: .95rem !important;
    line-height: 1.9 !important;
    color: var(--accent) !important;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-dim);
    padding: .9rem 1.1rem;
    overflow-x: auto;
}

/* ---- Le schéma interactif -------------------------------------------- */
.expo-sketch {
    margin-block: 1.8rem;
    background: var(--ink-800);
    border: 1px solid var(--line);
    padding: 1.1rem;
}
/* `color` est lu par phyllotaxis_controller.js (getComputedStyle) pour la
   couleur des points : le schéma se dessine donc en vert acide. */
.expo-sketch-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.2rem;
    color: var(--accent);
    background: var(--ink-900);
    border: 1px solid var(--line);
}
.expo-sketch-control {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
    font-family: var(--font-mono);
    font-size: .72rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint) !important;
}
.expo-sketch-control:last-child { margin-bottom: 0; }
.expo-sketch-control label { flex: 0 0 auto; }
.expo-sketch-control label::before { content: "// "; color: var(--accent-dim); }
.expo-sketch-control output {
    flex: 0 0 auto;
    min-width: 5ch;
    text-align: right;
    color: var(--accent);
    letter-spacing: .06em;
}
.expo-sketch-control input[type="range"] {
    flex: 1 1 10rem;
    min-width: 8rem;
    accent-color: var(--accent);
}
.expo-sketch-control input[type="range"]:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* Garde-fou éditorial : le schéma n'est pas l'œuvre. Même traitement que
   .legal-review-notice - un encart machine, discret mais assumé. */
.expo-disclaimer {
    font-family: var(--font-mono);
    font-size: .82rem !important;
    line-height: 1.65 !important;
    color: var(--accent-dim) !important;
    border: 1px solid var(--accent-dim);
    border-left-width: 4px;
    padding: .75rem 1rem;
}
.expo-disclaimer strong { color: var(--accent-dim) !important; }

/* ---- Le reel plein cadre --------------------------------------------- */
/* Seule page de l'expo sans grille ni voile : le 9:16 et rien d'autre. */
.expo-body--reel {
    margin: 0;
    background: #000;
    background-image: none;
}
.expo-body--reel::before { content: none; }
.expo-reel {
    display: block;
    width: 100vw;
    height: 100dvh;
    object-fit: contain;
    background: #000;
}

/* Le seul élément posé par-dessus le reel : un cartouche opaque, calé dans la
   zone sûre (encoche iOS), assez grand pour le pouce. Il ne mange pas le
   cadre - le 9:16 est en `contain`, il reste des bandes noires. */
.expo-back--overlay,
.expo-alt--overlay {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + .9rem);
    z-index: 2;
    margin: 0;
    padding: .7rem 1rem;
    color: var(--muted);
    background: rgb(0 0 0 / .55);
    border: 1px solid var(--accent-dim);
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}
.expo-back--overlay { left: calc(env(safe-area-inset-left, 0px) + .9rem); }
.expo-back--overlay::before { content: "\2190 "; color: var(--accent-dim); }

/* L'alternative textuelle du reel. Le pendant du retour, mais à droite : la
   barre de commandes native de la vidéo occupe désormais le bas du cadre. */
.expo-alt--overlay { right: calc(env(safe-area-inset-right, 0px) + .9rem); }
.expo-alt--overlay::after { content: " \2192"; color: var(--accent-dim); }

.expo-back--overlay:hover,
.expo-back--overlay:focus-visible,
.expo-alt--overlay:hover,
.expo-alt--overlay:focus-visible {
    color: var(--accent);
    background: rgb(0 0 0 / .8);
}

/* =====================================================================
   Retours visiteurs - signalement & livre d'or
   Les deux formulaires sortent du thème Symfony PAR DÉFAUT (label, puis le
   <ul> d'erreurs, puis le champ) : on ne touche pas au markup rendu, on
   l'habille. Même grammaire que partout ailleurs : surtitre mono, label
   « // », champ sombre à filet acide, bouton plein.
   ===================================================================== */
.feedback { padding-block: clamp(2rem, 5vw, 4rem); }
.feedback-lede {
    max-width: 60ch;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: var(--paper);
    margin: 0 0 2rem;
}

/* Accusé de réception : le même encart machine que .legal-review-notice, mais
   côté accent - c'est une bonne nouvelle, pas une alerte. */
.feedback-flash {
    max-width: 60ch;
    margin: 0 0 2rem;
    padding: .85rem 1.1rem;
    border: 1px solid var(--accent-dim);
    border-left-width: 4px;
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.65;
    color: var(--accent);
}

/* Résumé d'erreurs (WCAG 3.3.1). Chaque ligne est une ancre vers son champ :
   elle doit se lire comme un lien, pas comme du texte rouge. */
.feedback-errors {
    max-width: 60ch;
    margin: 0 0 2rem;
    padding: .85rem 1.1rem;
    border: 1px solid #ff7a7a;
    border-left-width: 4px;
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.6;
    color: #ff7a7a;
}
.feedback-errors p { margin: 0 0 .6rem; }
.feedback-errors ul { list-style: none; margin: 0; padding: 0; }
.feedback-errors li + li { margin-top: .3rem; }
.feedback-errors li::before { content: "! "; }
.feedback-errors a { color: #ff7a7a; text-underline-offset: .25em; }
.feedback-errors a:hover,
.feedback-errors a:focus-visible { color: var(--paper); }

.feedback-form {
    max-width: 44rem;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.feedback-field { margin-bottom: 1.6rem; }
.feedback-field > label {
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .6rem;
}
.feedback-field > label::before { content: "// "; color: var(--accent-dim); }
/* Sélecteur par type : la case à cocher du consentement ne doit pas hériter du
   champ de saisie pleine largeur. */
.feedback-field input[type="text"],
.feedback-field input[type="email"],
.feedback-field textarea {
    width: 100%;
    background: var(--ink-900);
    color: var(--paper);
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    padding: .8rem 1rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.6;
    transition: border-color .18s ease;
}
.feedback-field textarea { min-height: 8.5rem; resize: vertical; }
.feedback-field input[type="text"]:focus,
.feedback-field input[type="email"]:focus,
.feedback-field textarea:focus {
    outline: none;
    border-color: var(--accent-dim);
    border-left-color: var(--accent);
}
.feedback-field .help-text {
    margin-top: .5rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    line-height: 1.55;
    color: var(--muted);
}
/* Erreurs de champ : le thème par défaut les pose entre le label et le champ. */
.feedback-field ul {
    list-style: none;
    margin: 0 0 .55rem;
    padding: 0;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: #ff7a7a;
}
.feedback-field li::before { content: "! "; }

/* Consentement : le thème par défaut écrit le label AVANT la case. On rétablit
   l'ordre de lecture avec `order`, sans réécrire le gabarit de formulaire. */
.feedback-consent {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .7rem;
}
.feedback-consent > label {
    order: 2;
    flex: 1 1 18rem;
    margin: 0;
    font-family: var(--font-sans);
    font-size: .9rem;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}
.feedback-consent > label::before { content: none; }
.feedback-consent input[type="checkbox"] {
    order: 1;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .18rem;
    accent-color: var(--accent);
}
.feedback-consent ul { order: 3; flex-basis: 100%; margin: 0; }

/* Même bouton que la citation en back-office et que les filtres du musée :
   plein en vert acide, il se vide au survol. */
.feedback-submit {
    margin-top: .4rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-900);
    background: var(--accent);
    border: 1px solid var(--accent);
    padding: .8rem 1.8rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.feedback-submit:hover,
.feedback-submit:focus-visible { background: transparent; color: var(--accent); }

/* ---- Le mur des signatures ------------------------------------------- */
.feedback-wall {
    max-width: 62ch;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}
.feedback-wall > h2 {
    font-size: 1.5rem;
    margin: 0 0 2rem;
}
.guestbook-entry {
    margin-bottom: 2.2rem;
    padding-left: 1.2rem;
    border-left: 2px solid var(--accent-dim);
}
.guestbook-entry blockquote {
    margin: 0 0 .7rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--paper);
}
.guestbook-entry footer {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--faint);
}
.guestbook-badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .18rem .5rem;
    border: 1px solid var(--accent-dim);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-dim);
}

/* Le livre d'or reprend la barre du musée telle quelle. Elle n'a pas ici de
   grille au-dessus pour lui prêter son filet : on lui rend son bord haut. */
.feedback-pager {
    margin-top: 2.5rem;
    border-top: 1px solid var(--line);
}

/* =====================================================================
   Mouvement réduit (WCAG 2.3.3)
   Le système dit « moins de mouvement » : on coupe tout, sans énumérer les
   trente transitions du fichier. Le !important est le motif standard, et
   le seul moyen de passer devant les règles plus spécifiques.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}