/* AC21.6 (B3 tâche 008) — écran « Analyser mon site » : saisie de l'URL, état
   d'attente, échec nommé, validation champ par champ.

   Feuille entièrement tenue par les jetons de design_tokens.css : aucune
   couleur en dur, d'où son entrée dans TOKENISED_SHEETS. Elle reprend la
   grammaire de siret_verification.css (même famille d'écran : un geste, un
   état, un motif), avec le préfixe `se-`.

   R3-MOB.8 — pensée pour le pouce : cibles d'au moins 44 px, cases à cocher
   agrandies, comparaison « actuel / proposé » qui passe en colonne sous 600 px
   au lieu de couper le texte en deux. */

.se-page { max-width: 760px; margin: 0 auto; }

.se-topbar { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: 18px; flex-wrap: wrap; }
.se-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--n-500); text-decoration: none; }
.se-back:hover { color: var(--gold-500); }
.se-page-title { font-size: 22px; font-weight: 800; color: var(--ink); }
/* #4847 : « Relancer l'analyse », à droite du titre (sous lui en mobile). */
.se-relaunch-form { margin: 0 0 0 auto; }
.se-relaunch { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; }
@media (max-width: 640px) { .se-relaunch-form { margin: 0; width: 100%; } .se-relaunch { width: 100%; justify-content: center; } }

.se-card { display: block; border: 1px solid var(--n-200); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--n-0); }

.se-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.se-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.se-hint { font-size: 13px; color: var(--n-500); line-height: 1.5; margin: 6px 0 18px; }
.se-trust { margin-top: 12px; font-size: 12px; color: var(--n-500); line-height: 1.5; }
.se-empty { margin-top: 14px; font-size: 13px; color: var(--n-500); line-height: 1.5; }
.se-link { font-size: 13px; font-weight: 600; color: var(--gold-500); }

.se-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--gold-500); margin-bottom: 6px; }
.se-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.se-input { flex: 1; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 10px var(--sp-3); border-radius: 9px; border: 1.5px solid var(--n-200); font-size: 13px; font-family: inherit; background: var(--n-0); color: var(--ink); }
.se-input:focus { outline: none; border-color: var(--gold-primary); }

/* ── Attente ──────────────────────────────────────────────────────────────
   Pas de barre, pas de pourcentage : un pictogramme fixe, un titre, et l'état
   réel du job en une phrase. */
.se-wait { text-align: center; padding: var(--sp-5) 0; }
.se-wait-mark { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--gold-500); }
.se-wait-mark svg { width: 100%; height: 100%; }
.se-wait-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.se-wait-state { margin-top: 8px; font-size: 14px; color: var(--gold-500); font-weight: 600; }
.se-wait-url { margin-top: 8px; font-size: 12px; color: var(--n-400); word-break: break-all; }
.se-wait-note { margin-top: 12px; font-size: 12px; color: var(--n-500); line-height: 1.5; }

/* ── Échec ─────────────────────────────────────────────────────────────── */
.se-status { margin: 14px 0; font-size: 13px; line-height: 1.5; padding: 10px var(--sp-3); border-radius: 9px; }
.se-status--error { color: var(--red); background: var(--red-50); }
.se-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* ── Revue champ par champ ────────────────────────────────────────────────
   Une case par proposition. La cible tactile est le LABEL entier, pas la seule
   case : à 390 px, viser un carré de 16 px au pouce ne marche pas. */
.se-review { margin-top: var(--sp-4); }
.se-item { border-top: 1px solid var(--n-200); padding: var(--sp-4) 0; }
.se-item-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--gold-500); }
/* #4915 (15/10) : intitulé de rubrique et son « Tout sélectionner ». */
.se-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.se-select-all {
  padding: 4px 12px; border: 1px solid var(--gold-200); border-radius: 999px; background: var(--n-0);
  font: inherit; font-size: 12px; font-weight: 600; color: var(--gold-600); cursor: pointer; min-height: 32px;
}
.se-select-all:hover { border-color: var(--gold-primary); background: var(--gold-50); }
.se-select-all:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 2px; }
.se-select-all[aria-pressed="true"] { background: var(--gold-50); }
.se-select-all[hidden] { display: none; }
.se-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--ink); line-height: 1.5; }
.se-checkbox { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--gold-primary); }

.se-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: 8px; }
.se-side { border: 1px solid var(--n-200); border-radius: 9px; padding: 10px var(--sp-3); }
.se-side--proposed { border-color: var(--gold-primary); background: var(--gold-50); }
.se-side-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--n-500); margin-bottom: 4px; }
.se-side-value { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
/* #4364 : l'histoire lue sur le site garde ses paragraphes. */
.se-side-value--text { white-space: pre-line; }
.se-side-value--muted { color: var(--n-500); font-size: 12px; margin-top: 6px; }
.se-origin { display: block; margin-top: 6px; font-size: 11px; color: var(--n-400); }

/* #4365 (Tatianna 02/10) — la carte entière se coche. Le label englobe la case
   et les deux valeurs ; les enfants sont des <span> (contenu autorisé dans un
   label), remis en bloc ici. L'état coché se lit sur toute la carte. */
.se-pick { cursor: pointer; }
label.se-item.se-pick { display: block; border: 1px solid var(--n-200); border-radius: 12px; padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); transition: border-color .15s, background .15s; }
label.se-item.se-pick:hover { border-color: var(--gold-200); }
label.se-item.se-pick:has(.se-checkbox:checked) { border-color: var(--gold-primary); background: var(--gold-50); }
label.se-item.se-pick:has(.se-checkbox:focus-visible) { outline: 2px solid var(--gold-primary); outline-offset: 2px; }
.se-pick .se-compare { display: grid; }
.se-pick .se-side, .se-pick .se-side-value { display: block; }
.se-check.se-pick:has(.se-checkbox:checked) { font-weight: 600; }

.se-list { list-style: none; margin: 8px 0 0; padding: 0; }
.se-list li { font-size: 13px; color: var(--ink); line-height: 1.6; }

.se-photos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.se-photo { display: block; position: relative; border: 1px solid var(--n-200); border-radius: 9px; padding: 8px; cursor: pointer; }
.se-photo img { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 6px; background: var(--n-100); }
.se-photo .se-checkbox { position: absolute; top: 14px; left: 14px; }
.se-photo-url { display: block; margin-top: 6px; font-size: 11px; color: var(--n-400); overflow-wrap: anywhere; }

.se-applied { margin-top: var(--sp-5); border-top: 1px solid var(--n-200); padding-top: var(--sp-4); }

@media (max-width: 600px) {
  .se-row { flex-direction: column; }
  .se-compare { grid-template-columns: 1fr; }
  .se-photos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .se-actions > * { width: 100%; }
}

/* B3 tâche 011 — l'historique des analyses, sous le cadre de la dernière.
   `fetched_at` et `extracted_at` étaient écrites par le job et lues nulle
   part ; c'est leur surface. */
.se-history { max-width:720px; margin:26px auto 0; }
.se-history-h { font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--n-500); margin:0 0 10px; }
.se-history-l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.se-history-i { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; border:1px solid var(--n-200); border-radius:11px; padding:11px 14px; background:var(--n-0); }
.se-history-url { font-size:13px; font-weight:600; color:var(--n-900); overflow-wrap:anywhere; }
.se-history-meta { font-size:11.5px; color:var(--n-500); flex:1 1 200px; }
.se-history-st { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-radius:999px; padding:3px 9px; background:var(--n-100); color:var(--n-700); }
.se-history-st-applied { background:var(--green-50); color:var(--green); }
.se-history-st-failed { background:var(--red-50); color:var(--red); }