/* Preflight — styles de l'application.
   Uniquement des tokens de design/tokens.css (chargé avant ce fichier).
   Le fuchsia (--pf-accent) n'est jamais utilisé ici : il est réservé au logo.
   Tout ce qui bloque utilise --pf-blocking*, tout ce qui est complet --pf-ok. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--pf-font-ui); font-size: 16px; line-height: 1.45; background: var(--pf-page-bg); color: var(--pf-text); }
:focus-visible { outline: 3px solid var(--pf-brand); outline-offset: 2px; }
a { color: var(--pf-brand); }
a:hover { color: var(--pf-brand-hover); }
h1, h2, h3 { margin: 0; }
.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; }
.mono { font-family: var(--pf-font-mono); }

/* En-tête */
.topbar { min-height: 72px; padding: 12px 40px; background: var(--pf-header-bg); border-bottom: 1px solid var(--pf-border);
          display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { display: block; height: 32px; width: auto; }
.brand__sep { width: 1px; height: 24px; background: var(--pf-border); }
.brand__space { font-family: var(--pf-font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-text-secondary); }
.topbar__right { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.nav { display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: var(--pf-touch); padding: 0 12px; border-radius: var(--pf-radius-sm);
         color: var(--pf-text-secondary); font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--pf-text); background: var(--pf-brand-faint); }
.nav a[aria-current="page"] { color: var(--pf-brand); font-weight: 600; }
.lang { display: flex; gap: 2px; }
.lang button { min-width: var(--pf-touch); min-height: var(--pf-touch); padding: 0 8px; border: 0; background: none; border-radius: var(--pf-radius-sm);
               font: 500 13px var(--pf-font-mono); letter-spacing: .08em; color: var(--pf-text-secondary); cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--pf-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.lang button:hover { background: var(--pf-brand-faint); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--pf-touch); height: var(--pf-touch); padding: 0;
                border: 0; border-radius: var(--pf-radius-sm); background: none; color: var(--pf-text-secondary); cursor: pointer; }
.theme-toggle svg { fill: none; stroke: currentColor; }
.theme-toggle:hover { color: var(--pf-text); background: var(--pf-brand-faint); }
.theme-toggle[aria-pressed="true"] { color: var(--pf-brand); }
.theme-toggle[aria-pressed="true"] svg { fill: currentColor; }
.prefs { display: flex; align-items: center; gap: 8px; }
/* Deux versions du logo dans la page, une seule visible : sur fond clair ou sur #2B1344. */
html:not([data-theme="dark"]) .logo--on-dark, html[data-theme="dark"] .logo--on-light { display: none; }
.user { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--pf-text-secondary); }
.inline-form { display: inline; margin: 0; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--pf-touch); padding: 0 20px;
       border: 0; border-radius: var(--pf-radius-sm); font: 600 16px var(--pf-font-ui); cursor: pointer; text-decoration: none; }
.btn--primary { background: var(--pf-brand-fill); color: var(--pf-on-brand); }
.btn--primary:hover { background: var(--pf-brand-fill-hover); color: var(--pf-on-brand); }
.btn--secondary { background: var(--pf-surface); color: var(--pf-text); border: 1px solid var(--pf-border-strong); font-weight: 500; }
.btn--secondary:hover { border-color: var(--pf-brand); color: var(--pf-brand); }
.btn--link { min-height: var(--pf-touch); padding: 0 8px; background: none; color: var(--pf-text-secondary); font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.btn--link:hover { color: var(--pf-text); }
.btn--small { font-size: 14px; padding: 0 14px; }
.btn:disabled, .btn[aria-disabled="true"] { min-height: 48px; background: var(--pf-disabled-bg); color: var(--pf-disabled-text); border: 0; cursor: not-allowed; }
.btn--full { width: 100%; }

/* Mise en page */
.page { padding: 40px 64px 64px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; max-width: 1360px; margin: 0 auto; }
.main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.aside { flex: 0 1 420px; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
/* Une longue checklist défile dans sa carte : « Envoyer en prod » reste à l'écran. */
/* 136 px : en-tête (72) + marge haute de la page (40) + marge basse (24). */
.aside > .card { max-height: calc(100vh - 136px); overflow-y: auto; }
.aside .card__foot { position: sticky; bottom: -28px; margin-bottom: -28px; padding-bottom: 28px; background: var(--pf-surface); }
.page--narrow { max-width: 960px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

.label { font-family: var(--pf-font-mono); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-secondary); }

/* Produits */
.products { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.products legend { padding: 0; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: var(--pf-touch); padding: 0 16px; border: 1px solid var(--pf-border-strong); border-radius: var(--pf-radius-pill);
        background: var(--pf-surface); color: var(--pf-text); font: 500 15px var(--pf-font-ui); cursor: pointer; }
.chip:hover { border-color: var(--pf-brand); }
.chip[aria-pressed="true"] { background: var(--pf-brand-fill); border-color: var(--pf-brand-fill); color: var(--pf-on-brand); font-weight: 600; }
.chip:disabled { cursor: default; }
.chip:disabled:not([aria-pressed="true"]) { color: var(--pf-text-muted); }

/* Cartes */
.card { padding: 28px 32px; background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-radius-md);
        display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 24px; }
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.card__kicker { font-family: var(--pf-font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-text-secondary); overflow-wrap: anywhere; }
.card__title { margin: 6px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.card__heading { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.card__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
              padding-top: 16px; border-top: 1px solid var(--pf-divider); }
.card__sub { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--pf-divider); }

/* Statuts */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pf-radius-pill);
          background: var(--pf-blocking-bg); border: 1px solid var(--pf-blocking-border); color: var(--pf-blocking-text);
          font: 600 13px var(--pf-font-mono); white-space: nowrap; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pf-blocking); flex: none; }
.status--ok { background: var(--pf-brand-faint); border-color: var(--pf-brand-subtle); color: var(--pf-brand); }
.status--ok .status__dot { background: var(--pf-ok); }
.status--draft { background: var(--pf-surface); border-color: var(--pf-border-strong); color: var(--pf-text-secondary); }
.status--draft .status__dot { background: var(--pf-text-muted); }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--pf-divider); }
.checklist li:first-child { border-top: 0; }
.checklist svg { flex: none; margin-top: 1px; }
.checklist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.checklist__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.checklist__label { font-size: 16px; color: var(--pf-text); text-decoration: none; }
a.checklist__label:hover { color: var(--pf-brand); text-decoration: underline; text-underline-offset: 3px; }
.checklist__state { font: 13px var(--pf-font-mono); color: var(--pf-text-secondary); white-space: nowrap; }
.checklist__why { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pf-text-secondary); }
.is-blocking .checklist__state { font-weight: 600; color: var(--pf-blocking-text); }
.checklist__product { margin: 18px 0 2px; }
.icon-ok circle { fill: var(--pf-ok); }
.icon-ok path { stroke: var(--pf-surface); } /* check découpé dans le rond : blanc en clair, sombre sur le lilas */
.icon-blocking circle:first-child { stroke: var(--pf-blocking-icon); }
.icon-blocking path { stroke: var(--pf-blocking-icon); }
.icon-blocking circle:last-child { fill: var(--pf-blocking-icon); }

.rule { font: 500 13px var(--pf-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-secondary); }

/* Formulaire */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > label, .field__label { font-size: 15px; font-weight: 600; }
.input { width: 100%; min-height: var(--pf-touch); padding: 10px 12px; border: 1px solid var(--pf-border-strong); border-radius: var(--pf-radius-sm);
         background: var(--pf-surface); color: var(--pf-text); font: 16px var(--pf-font-ui); }
textarea.input { min-height: 104px; resize: vertical; line-height: 1.45; }
.input:focus { outline: 3px solid var(--pf-brand); outline-offset: 0; border-color: var(--pf-brand); }
.input[aria-invalid="true"] { border-color: var(--pf-blocking-icon); }
.field__help { margin: 0; font-size: 14px; color: var(--pf-text-secondary); }
.field__issue { margin: 0; font-size: 14px; color: var(--pf-blocking-text); }
.field__value { margin: 0; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.field__value--empty { color: var(--pf-text-muted); }
.field__code { font: 14px var(--pf-font-mono); overflow-wrap: anywhere; }
.field__proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: var(--pf-text-secondary); }
.field__proposal .btn--link { padding: 0; }
.note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pf-text-secondary); }
.duration { font: 14px var(--pf-font-mono); color: var(--pf-text-secondary); }

/* Visuels */
.slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.slot { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px;
        border: 1px solid var(--pf-border); border-radius: var(--pf-radius-sm); scroll-margin-top: 24px; }
.slot.is-blocking { border-color: var(--pf-blocking-border); background: var(--pf-blocking-bg); }
.slot__preview { width: 112px; height: 84px; display: flex; align-items: center; justify-content: center; overflow: hidden;
                 border: 1px dashed var(--pf-border-strong); border-radius: 8px; background: var(--pf-brand-faint); }
.slot__preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.slot__frame { border: 1px solid var(--pf-brand-subtle); background: var(--pf-surface); }
.slot__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.slot__format { font: 600 15px var(--pf-font-mono); }
.slot__meta { font: 13px var(--pf-font-mono); color: var(--pf-text-secondary); overflow-wrap: anywhere; }
.slot__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.upload { position: relative; }
.upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload:focus-within { outline: 3px solid var(--pf-brand); outline-offset: 2px; border-radius: var(--pf-radius-sm); }
.progress { font: 13px var(--pf-font-mono); color: var(--pf-text-secondary); }
.field__optional { font-size: 14px; font-weight: 400; color: var(--pf-text-secondary); }
.attachment { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.attachment a:not(.btn) { color: inherit; text-underline-offset: 3px; }

/* Messages */
.flash { padding: 14px 18px; border-radius: var(--pf-radius-sm); background: var(--pf-surface); border: 1px solid var(--pf-brand-subtle); color: var(--pf-brand); font-weight: 500; }
.alert { padding: 14px 18px; border-radius: var(--pf-radius-sm); background: var(--pf-blocking-bg); border: 1px solid var(--pf-blocking-border); color: var(--pf-blocking-text); font-size: 15px; }
.copy { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.copy .input { flex: 1 1 280px; font: 14px var(--pf-font-mono); }

/* Listes */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 24px;
       background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-radius-md); color: var(--pf-text); text-decoration: none; }
a.row:hover { border-color: var(--pf-brand); }
.row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row__title { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.row__meta { font: 13px var(--pf-font-mono); letter-spacing: .04em; color: var(--pf-text-secondary); }
.empty { padding: 28px 32px; background: var(--pf-surface); border: 1px dashed var(--pf-border-strong); border-radius: var(--pf-radius-md); color: var(--pf-text-secondary); }
.section { display: flex; flex-direction: column; gap: 14px; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 600 12px var(--pf-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pf-text-secondary); padding: 0 12px 10px 0; }
.table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--pf-divider); vertical-align: middle; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
.muted { color: var(--pf-text-muted); }

/* Pages de connexion */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px 16px; }
.auth__logo img { height: 44px; width: auto; display: block; }
.auth__card { width: 100%; max-width: 420px; }
.auth__tagline { font: 500 13px var(--pf-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pf-text-secondary); text-align: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--pf-text-secondary); min-height: var(--pf-touch); }
.check input { width: 18px; height: 18px; accent-color: var(--pf-brand); }

/* Fil de questions */
.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.message { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--pf-border); border-radius: var(--pf-radius-sm); background: var(--pf-surface); }
/* Les messages du commercial sur le fond de page : on voit qui parle d'un coup d'œil. */
.message--commercial { background: var(--pf-brand-faint); border-color: var(--pf-brand-subtle); }
.message--commercial .message__meta, .message--commercial .slot__meta { color: var(--pf-text-brand-muted); }
.message__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.message__author { font-weight: 600; overflow-wrap: anywhere; }
.message__meta { font: 13px var(--pf-font-mono); color: var(--pf-text-secondary); overflow-wrap: anywhere; }
.message__body { margin: 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.message__files a { color: inherit; text-underline-offset: 3px; }
.thread__form { display: flex; flex-direction: column; gap: 8px; }
.thread__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.row__statuses { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1100px) {
  .aside { position: static; flex: 1 1 100%; }
  .aside > .card { max-height: none; overflow: visible; }
  .aside .card__foot { position: static; margin-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 720px) {
  .topbar { padding: 12px 16px; }
  .brand__sep, .brand__space, .user > span { display: none; }
  .topbar__right { gap: 4px 8px; }
  .page { padding: 24px 16px 48px; }
  .card { padding: 20px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .slot { grid-template-columns: 80px minmax(0, 1fr); }
  .slot__preview { width: 80px; height: 64px; }
  .slot__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
  .row { padding: 16px; }
}