/* ============================================================
   LES PAGES D'OUTILS — feuille commune.

   Huit pages partagent cette mise en page. Règle du site : une page
   ne redéclare jamais une valeur, elle prend un jeton de /tokens.css,
   et si un motif se répète sur deux pages il vient ici.

   Charger dans cet ordre : tokens.css, buttons.css, faq.css, tools.css.
   ============================================================ */

body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

/* Une classe qui pose display bat la règle par défaut de [hidden] : sans ça,
   les panneaux de résultat s'affichent vides au chargement. */
[hidden] { display: none !important; }

main { padding-top: 120px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 30px; }

/* Le repère du site : fond violet, 16/32, 14 px demi-gras. buttons.css ajoute
   par-dessus le passage au carré au survol. */
.cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--violet); color: #fff; padding: 16px 32px;
  font-size: 14px; font-weight: 600; border: 0; cursor: pointer;
  font-family: var(--sans); letter-spacing: var(--ls-label);
}
.cta-button:hover { background: var(--violet-dark); }
.cta-button:disabled { opacity: .5; cursor: default; }
.cta-quiet {
  background: transparent; color: var(--ink-2); padding: 14px 24px;
  font-size: 14px; font-weight: 600; border: 0; cursor: pointer; font-family: var(--sans);
}
.cta-quiet:hover { color: var(--ink); }

/* ---- Ouverture ---- */
.hero { padding: 40px 0 46px; }
.hero h1 {
  font-size: var(--t-3xl); font-weight: var(--w-bold);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight);
  margin: 0 0 20px; max-width: 17ch; text-wrap: balance;
}
.hero p.lead {
  font-size: var(--t-md); line-height: var(--lh-body);
  color: var(--ink-3); max-width: 60ch; margin: 0;
}

/* ---- Le dépôt de fichier ---- */
.dropzone {
  margin-top: 42px; background: var(--paper-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 56px 40px; text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.dropzone.dragging { box-shadow: var(--shadow-2); transform: translateY(-2px); }
/* Une fois le travail fait, la zone de dépôt n'a plus à occuper un écran :
   elle se replie et ne sert plus qu'à recommencer avec un autre scénario. */
.dropzone.has-result {
  padding: 22px 30px; display: flex; align-items: center;
  justify-content: center; gap: 18px; flex-wrap: wrap;
}
.dropzone h2 {
  font-size: var(--t-xl); font-weight: var(--w-bold);
  letter-spacing: var(--ls-label); margin: 0 0 10px; text-wrap: balance;
}
.dropzone.has-result h2 { font-size: var(--t-base); font-weight: var(--w-medium); color: var(--ink-3); margin: 0; }
.dropzone p { color: var(--ink-3); font-size: var(--t-base); margin: 0 0 26px; }
.dropzone.has-result p { display: none; }
.dropzone.has-result .cta-button { padding: 12px 22px; }
.dropzone .formats { font-size: var(--t-sm); color: var(--ink-4); margin: 22px 0 0; }

/* Masqué à l'œil mais gardé dans la page : display:none le sortirait de
   l'ordre de tabulation et le rendrait invisible aux lecteurs d'écran. */
.file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pick { cursor: pointer; display: inline-block; }
.pick:focus-within { outline: 2px solid var(--violet); outline-offset: 3px; }

.status {
  margin-top: 22px; padding: 16px 20px; border-radius: var(--r-md);
  font-size: var(--t-base); background: var(--violet-soft); color: var(--ink-2);
}
.status-error { background: var(--error-bg); color: var(--error-ink); }

/* ---- Panneaux de résultat ---- */
.result { margin-top: 44px; display: grid; grid-template-columns: 420px 1fr; gap: 46px; align-items: start; }
.result-wide { grid-template-columns: 1fr; }
.panel { background: var(--paper-2); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 32px; }
.result > .panel:first-child { position: sticky; top: 108px; }
.result-wide > .panel:first-child { position: static; }
.panel h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-4); font-weight: var(--w-bold); margin: 0 0 18px;
}
.panel h3 + h3 { margin-top: 28px; }
/* Un titre de section qui suit des chiffres ou un tableau a besoin d'air :
   sans ça « THE NOTES » vient se coller sous la dernière légende. */
.panel .figures + h3,
.panel .findings + h3,
.panel .table-shell + h3,
.panel table + h3 { margin-top: 40px; }

/* Pas de filets : c'est l'espace qui sépare, pas un trait. */
.counts { list-style: none; padding: 0; margin: 0 0 20px; }
.counts li { font-size: var(--t-base); color: var(--ink-2); padding: 5px 0; }
.counts b { font-weight: var(--w-bold); color: var(--ink); }
.muted { font-size: var(--t-sm); color: var(--ink-3); line-height: var(--lh-body); margin: 0; }

.options { margin: 26px 0 24px; display: flex; flex-direction: column; gap: 4px; }
.options label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--t-base); color: var(--ink-2); padding: 6px 0; cursor: pointer;
}
.options label input { flex: none; }
.options .group { display: flex; gap: 20px; margin-bottom: 8px; }
.options .group-label { font-size: var(--t-sm); color: var(--ink-4); margin: 0 0 4px; }
.title-name { display: block; color: var(--ink-3); font-size: var(--t-sm); overflow-wrap: anywhere; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: var(--t-sm); color: var(--ink-3); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: var(--t-base); color: var(--ink);
  background: var(--paper); border: 0; border-radius: var(--r-sm); padding: 13px 15px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--violet); outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 96px; line-height: var(--lh-body); }

.warnings { margin: 0 0 22px; }
.warnings ul { margin: 0; padding-left: 18px; }
.warnings li { font-size: var(--t-sm); color: var(--ink-3); line-height: var(--lh-body); margin-bottom: 8px; }

.action-button { width: 100%; justify-content: center; }

/* ---- L'aperçu, à l'échelle de la page de scénario ---- */
.preview-shell {
  background: var(--paper-2); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 40px 44px; overflow: auto; max-height: 78vh;
}
.preview {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 12px; line-height: 1.32; color: var(--ink); width: 6in; min-width: 6in;
}
.preview .pv { margin: 0; white-space: pre-wrap; }
.preview .pv-scene-heading, .preview .pv-character,
.preview .pv-action, .preview .pv-transition { margin-top: 1.32em; }
.preview .pv-scene-heading { font-weight: var(--w-bold); }
.preview .pv-more { margin-top: 2em; font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-4); }

/* ---- Grands chiffres ---- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.figure .k {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--ink-4); font-weight: var(--w-bold); margin: 0 0 8px;
}
.figure .v {
  font-size: var(--t-2xl); font-weight: var(--w-black); letter-spacing: var(--ls-number);
  line-height: var(--lh-snug); margin: 0; font-variant-numeric: tabular-nums;
}
.figure .v small { font-size: var(--t-md); font-weight: var(--w-medium); color: var(--ink-3); }
.figure .note { font-size: var(--t-sm); color: var(--ink-3); margin: 6px 0 0; line-height: var(--lh-body); }

/* ---- Tableaux ---- */
.table-shell { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th {
  text-align: left; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--ls-caps); color: var(--ink-4); font-weight: var(--w-bold);
  padding: 0 14px 12px 0; white-space: nowrap;
}
table.data td { padding: 9px 14px 9px 0; color: var(--ink-2); vertical-align: top; }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:nth-child(odd) td { background: var(--paper); }
table.data td:first-child, table.data th:first-child { padding-left: 12px; border-radius: var(--r-sm) 0 0 var(--r-sm); }
table.data td:last-child, table.data th:last-child { padding-right: 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* Barre de proportion dans un tableau (répliques par personnage). */
.share { display: block; background: var(--violet-soft); border-radius: var(--r-full); height: 8px; min-width: 60px; }
.share i { display: block; background: var(--violet); height: 100%; border-radius: var(--r-full); }

/* ---- Constats du vérificateur ---- */
.findings { display: flex; flex-direction: column; gap: 10px; }
.finding { background: var(--paper); border-radius: var(--r-md); padding: 18px 20px; }
.finding .head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.finding h4 { font-size: var(--t-base); font-weight: var(--w-bold); margin: 0; }
.finding p { font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-3); margin: 6px 0 0; max-width: 76ch; }
.finding .where { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4); margin: 8px 0 0; }
.pill-level {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: var(--w-bold); border-radius: var(--r-full); padding: 4px 10px;
}
.pill-level.stop { background: var(--error-bg); color: var(--error-ink); }
.pill-level.look { background: var(--violet-soft); color: var(--violet-dark); }
.pill-level.fine { background: var(--cream); color: var(--ink-2); }

/* ---- Les trois pas vers Google Docs ---- */
.steps { margin-top: 46px; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 46px 44px; }
.steps h2 { font-size: var(--t-xl); font-weight: var(--w-bold); margin: 0 0 30px; letter-spacing: var(--ls-label); }
.steps ol { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-full); background: var(--violet);
  color: #fff; font-weight: var(--w-bold); font-size: var(--t-sm); margin-bottom: 14px;
}
.steps li p { margin: 0; font-size: var(--t-base); line-height: var(--lh-loose); color: rgba(255,255,255,.82); }
.steps li b { color: #fff; font-weight: var(--w-medium); }

/* ---- Sections de texte ---- */
.section { padding: 78px 0 0; }
.section h2 { font-size: var(--t-2xl); font-weight: var(--w-bold); letter-spacing: var(--ls-label); margin: 0 0 18px; text-wrap: balance; }
.section p { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-3); max-width: 62ch; margin: 0 0 16px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px; margin-top: 34px; }
.cols h3 { font-size: var(--t-lg); font-weight: var(--w-bold); margin: 0 0 10px; }
.cols p { max-width: 52ch; }

.install-band {
  margin-top: 82px; background: var(--cream); border-radius: var(--r-lg); padding: 46px 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 34px;
}
.install-band h2 { font-size: var(--t-xl); font-weight: var(--w-bold); margin: 0 0 8px; }
.install-band p { margin: 0; color: var(--ink-3); font-size: var(--t-base); max-width: 52ch; }
.install-band .cta-button { flex: none; }

/* ---- Les autres outils, en bas de chaque page ---- */
.more-tools { padding: 78px 0 0; }
.more-tools h2 { font-size: var(--t-xl); font-weight: var(--w-bold); margin: 0 0 22px; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.more-grid a {
  background: var(--paper-2); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 22px 24px; display: block; transition: box-shadow .2s ease, transform .2s ease;
}
.more-grid a:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.more-grid h3 { font-size: var(--t-base); font-weight: var(--w-bold); margin: 0 0 6px; }
.more-grid p { font-size: var(--t-sm); color: var(--ink-3); margin: 0; line-height: var(--lh-body); }

@media (max-width: 980px) {
  .result { grid-template-columns: 1fr; }
  .result > .panel:first-child { position: static; }
  .steps ol { grid-template-columns: 1fr; gap: 26px; }
  .cols { grid-template-columns: 1fr; }
  .more-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--t-2xl); }
  .install-band { flex-direction: column; align-items: flex-start; }
}

/* ---- Les deux outils qui appellent un modèle ---- */
.logline { background: var(--paper); border-radius: var(--r-md); padding: 22px 24px; margin-top: 14px; }
.logline .angle {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--violet-dark); font-weight: var(--w-bold); margin: 0 0 8px;
}
.logline .line { font-size: var(--t-md); line-height: var(--lh-body); color: var(--ink); margin: 0; max-width: 68ch; }
.reading { font-size: var(--t-base); color: var(--ink-3); margin: 24px 0 6px; max-width: 70ch; }
#loglines .muted { margin-top: 18px; }

#poster img { display: block; width: 100%; max-width: 460px; border-radius: var(--r-md); box-shadow: var(--shadow-2); }
#poster .tagline {
  font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3);
  margin: 18px 0 10px; max-width: 46ch;
}