/* --- Authentification --------------------------------------------------- */
.auth-shell { max-width: 430px; margin: 0 auto; padding: var(--space-7) var(--space-4); }
.auth-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.auth-brand { text-align: center; margin-bottom: var(--space-5); }
.auth-brand .seal { margin: 0 auto var(--space-4); transform: none; }
.lang-switch { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-5); }

/* --- Rédaction ---------------------------------------------------------- */
.exo-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.exo-btn {
  flex: 1 1 150px; font: inherit; text-align: left; cursor: pointer;
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--ink);
  background: var(--paper-card); color: var(--ink); border-radius: var(--radius);
}
.exo-btn .big { display: block; font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; }
.exo-btn .small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.exo-btn[aria-pressed='true'] { background: var(--ink); color: var(--paper-card); }
.exo-btn[aria-pressed='true'] .small { color: rgba(244, 241, 231, 0.7); }

.prompt-row { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.prompt-text {
  flex: 1; font-family: var(--font-serif); font-style: italic; font-size: var(--step-1);
  background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: var(--radius); padding: var(--space-3);
}
.citation {
  font-family: var(--font-serif); border-left: 3px solid var(--gold); background: var(--gold-wash);
  padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: var(--space-3);
}
.citation .ref { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: var(--space-2); font-style: normal; }

.writing-area { min-height: 320px; }
.part-block { margin-bottom: var(--space-4); }
.part-block > label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: var(--space-2); }
.part-block textarea { min-height: 120px; }
.part-block.full textarea { min-height: 260px; }

.counter { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); }
.counter .gauge { flex: 1; }

/* --- Correction --------------------------------------------------------- */
.error-item { border-bottom: 1px solid var(--line-soft); padding: var(--space-3) 0; }
.error-item:last-child { border-bottom: none; }
.error-item .before { color: var(--red); text-decoration: line-through; font-family: var(--font-serif); }
.error-item .after { color: var(--green); font-weight: 600; font-family: var(--font-serif); }
.error-item .rule { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: 2px; }

.marq-row { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--step--1); }
.marq-row:last-child { border-bottom: none; }
.marq-row .mark-ok { color: var(--green); font-weight: 700; }
.marq-row .mark-no { color: var(--red); font-weight: 700; }

/* --- Dictionnaire ------------------------------------------------------- */
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); }
.link-grid a { display: block; padding: var(--space-3); border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); text-decoration: none; color: var(--ink); font-weight: 600; font-size: var(--step--1); }
.link-grid a:hover { border-color: var(--gold); }

/* --- Administration ----------------------------------------------------- */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.secret-value { font-family: var(--font-mono); font-size: var(--step--1); background: var(--paper); padding: 2px 8px; border-radius: 3px; border: 1px solid var(--line); }
.credential-box { background: var(--green-wash); border: 1.5px dashed var(--green); border-radius: var(--radius); padding: var(--space-4); font-family: var(--font-mono); }

@media (max-width: 640px) {
  .masthead { flex-direction: column-reverse; align-items: flex-start; }
  .seal { width: 66px; height: 66px; }
  .seal .n { font-size: 18px; }
  .bar-row { grid-template-columns: 96px 1fr 34px; }
}

/* v1.1 — indicateurs du tableau de bord */
.kpi-highlight .value { color: var(--red); }
.kpi-sub { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.top-errors td.fault { color: var(--red); text-decoration: line-through; text-decoration-thickness: 1px; }
.top-errors td.fix { color: var(--green); font-weight: 600; }
.overcome-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.overcome-list li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); }
.overcome-list .fix { color: var(--green); font-weight: 600; }
.mastery-track { height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; margin: var(--space-2) 0 var(--space-3); }
.mastery-fill { height: 100%; background: var(--green); }

/* v1.2 — retour de correction groupé par domaine */
.error-group { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.error-group h4 { margin: 0 0 var(--space-1); }
.error-group .count { font-weight: 400; color: var(--ink-soft); }
.error-group .stack { margin-top: var(--space-3); }
.tag-syntaxe, .tag-grammaire, .tag-lexique { background: var(--ink); color: var(--paper-card); border-color: var(--ink); }

/* v1.2 — espacements (QA) : sélecteur de langue et en-têtes de vue avec action */
.lang-switch { margin-bottom: var(--space-5); }
.view-header { margin-bottom: var(--space-5); row-gap: var(--space-3); }
.view-header h2 { margin: 0; }
.back-row { margin-top: var(--space-5); }
.assign-feedback { margin-top: var(--space-3); }
.is-new { background: var(--green-wash); transition: background 1.5s ease; }
.settings-grid { display: grid; gap: var(--space-5); }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: end; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-soft); }
.setting:last-child { border-bottom: 0; }
.setting .field { margin: 0; }
.setting input[type='number'] { max-width: 10rem; }

/* v1.3 — Rédiger : respiration entre les blocs (retour utilisateurs) */
.write-head > * + * { margin-top: var(--space-4); }
.write-head .position-row { margin-top: var(--space-5); }
.write-head .prompt-row { margin-top: var(--space-5); }   /* v1.3.1 : 24 px, comme les autres séparations */
.write-actions { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
#marq-live { margin-top: var(--space-3); }
#drafts li .small + .small { margin-top: var(--space-1); }

/* v1.3 — barres du tableau de bord : un <span> en ligne ignore largeur et
   hauteur, d'où des barres invisibles. */
.bar-fill { display: block; }

/* v1.3 — stratégies d'autocorrection */
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.strategy { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--paper-card); }
.strategy ul { margin: var(--space-2) 0 0; padding-left: 1.1em; }
.strategy li + li { margin-top: var(--space-1); }
.strategy-hit { border-color: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }

/* v1.3 — règle générale : un intertitre ou une rangée de boutons dans une
   carte ne colle jamais au bloc précédent (cause commune des points 1, 3, 4). */
.card > h4:not(:first-child) { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.card > .row:not(:first-child) { margin-top: var(--space-4); }
.card > .table-wrap + .table-wrap, .card > .kpi-grid + .table-wrap { margin-top: var(--space-3); }

/* v1.3.1 — version en service, en pied de page */
.app-version { text-align: center; margin: var(--space-6) 0 var(--space-4); font-family: var(--font-mono, monospace); font-size: 11px; }

/* v1.3.1 — Rédiger : la règle générale « .card > .row:not(:first-child) »
   (spécificité 0,3,0) écrasait « .write-head .position-row » (0,2,0) et
   ramenait l'espacement à 16 px. Sélecteurs renforcés, placés en dernier. */
.card.write-head > .position-row { margin-top: var(--space-5); }
.card.write-head > .prompt-row { margin-top: var(--space-5); }

/* v1.4 — logo cliquable (retour à l'accueil du rôle) */
a.seal { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.15s ease; }
a.seal:hover { transform: rotate(-4deg) scale(1.03); }
a.seal:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 50%; }

/* v1.4 — texte rouvert depuis « Dernières corrections » */
.text-viewer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.text-viewer .written-text { white-space: pre-wrap; line-height: 1.7; padding: var(--space-4); background: var(--paper-card); border: 1px solid var(--line-soft); border-radius: var(--radius); margin: var(--space-3) 0; }
.text-viewer .error-item { margin-top: var(--space-2); }

/* v1.4 — stratégies d'autorévision (Chasse aux erreurs) */
.strategies-card .strategy-section { margin-top: var(--space-5); }
.strategies-card .strategy-section h4 { margin: 0 0 var(--space-2); }
.strategies-card ul { margin: 0; padding-left: 1.2em; }
.strategies-card li + li { margin-top: var(--space-2); }