/* ═══════════════════════════════════════════════════════════
   Traducteur Monégasque — Münegascu
   main.css — Styles globaux
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --rouge:     #C8102E;
  --rouge-dark:#9B0B22;
  --blanc:     #FFFFFF;
  --or:        #C9A84C;
  --or-clair:  #F0D98C;
  --or-dark:   #A8873C;
  --bleu:      #1A3A5C;
  --bleu-dark: #0F2540;
  --sable:     #F5EED8;
  --sable2:    #E8D9B0;
  --ombre:     rgba(26, 58, 92, .15);
  --vert:      #27ae60;
  --vert-dark: #219150;
  --violet:    #8e44ad;
  --gris:      #f4f4f4;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition: .2s ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Lato', sans-serif;
  background: var(--sable);
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(200,16,46,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(26,58,92,.07) 0%, transparent 50%);
  color: #2a2a2a;
  line-height: 1.5;
}

/* ── Header ───────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, var(--rouge) 0%, var(--rouge-dark) 100%);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(200,16,46,.4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.coat { font-size: 2rem; }

header h1 {
  font-family: 'Playfair Display', serif;
  color: var(--blanc);
  font-size: 1.5rem;
  letter-spacing: 1px;
  flex: 1;
}

header h1 span {
  display: block;
  font-size: .7rem;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  color: var(--or-clair);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 2px;
}

.btn-admin {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--blanc);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: .78rem;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  transition: background var(--transition);
  white-space: nowrap;
}
.btn-admin:hover { background: rgba(255,255,255,.25); }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display: flex;
  justify-content: center;
  padding: 24px 16px 0;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 10px 24px;
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
  cursor: pointer;
  border: 2px solid var(--or);
  background: transparent;
  color: var(--bleu);
  transition: all .3s;
}
.tab-btn:first-child  { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.tab-btn:last-child   { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.tab-btn:not(:first-child):not(:last-child) { border-left: none; }
.tab-btn.active {
  background: linear-gradient(135deg, var(--or), var(--or-dark));
  color: var(--blanc);
  box-shadow: 0 4px 15px rgba(201,168,76,.4);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Layout ───────────────────────────────────────────────── */
.main {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px 60px;
}

/* ── Translator Box ───────────────────────────────────────── */
.tbox {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px var(--ombre);
  overflow: visible;
  border: 1px solid var(--sable2);
}

.lang-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, var(--bleu), var(--bleu-dark));
  padding: 13px 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.lang-label {
  flex: 1;
  text-align: center;
  font-family: 'Playfair Display', serif;
  color: var(--blanc);
  font-size: .95rem;
}
.lang-label small {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: .65rem;
  color: var(--or-clair);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2px;
}

.swap-btn {
  background: var(--or);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--blanc);
  transition: all .3s;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.swap-btn:hover { background: var(--rouge); transform: rotate(180deg); }

.ta-row { display: grid; grid-template-columns: 1fr 1fr; }
.ta-col { padding: 18px 20px; }
.ta-col:first-child { border-right: 2px solid var(--sable2); }

.ta-col label {
  display: block;
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bleu);
  font-weight: 700;
  margin-bottom: 7px;
}

textarea, .out-area {
  width: 100%;
  min-height: 120px;
  font-family: 'Lato', sans-serif;
  font-size: .95rem;
  line-height: 1.65;
  color: #2a2a2a;
  border: none;
  resize: none;
  outline: none;
  background: transparent;
}

.out-area { color: var(--bleu); font-style: italic; display: block; }
.out-area.empty { color: #bbb; font-style: normal; font-size: .88rem; }

.abar {
  padding: 12px 20px;
  border-top: 2px solid var(--sable2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Boutons ──────────────────────────────────────────────── */
.btn-red {
  background: linear-gradient(135deg, var(--rouge), var(--rouge-dark));
  color: var(--blanc);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 22px;
  font-family: 'Playfair Display', serif;
  font-size: .9rem;
  cursor: pointer;
  transition: all .3s;
  box-shadow: 0 4px 15px rgba(200,16,46,.3);
}
.btn-red:hover { transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--sable2);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: #888;
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Lato', sans-serif;
}
.btn-ghost:hover { border-color: var(--rouge); color: var(--rouge); }

.btn-or {
  background: transparent;
  border: 1px solid var(--or);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: var(--or);
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Lato', sans-serif;
}
.btn-or:hover { background: var(--or); color: var(--blanc); }

.btn-blue {
  background: transparent;
  border: 1px solid var(--bleu);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: var(--bleu);
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Lato', sans-serif;
}
.btn-blue:hover { background: var(--bleu); color: var(--blanc); }

.btn-vert {
  background: var(--vert);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: var(--blanc);
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Lato', sans-serif;
}
.btn-vert:hover { background: var(--vert-dark); }

.ml-auto { margin-left: auto; }

.speak-btn {
  background: transparent;
  border: 1.5px solid var(--or);
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--or);
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
}
.speak-btn:hover { background: var(--or); color: var(--blanc); }
.speak-btn.speaking {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--blanc);
  animation: pulse .8s infinite;
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

.voice-select {
  font-size: .74rem;
  padding: 4px 8px;
  border: 1px solid var(--sable2);
  border-radius: var(--radius-sm);
  background: var(--blanc);
  color: var(--bleu);
  cursor: pointer;
  outline: none;
  font-family: 'Lato', sans-serif;
}

/* ── Analyse Tokenisée ────────────────────────────────────── */
.analysis-box {
  background: var(--sable);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 20px 14px;
  font-size: .8rem;
  line-height: 2;
}

.tok {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  margin: 2px;
  cursor: default;
}
.tok-found  { background: #eaf7ef; color: #1e8449; font-style: italic; }
.tok-smart  { background: #e8f4fd; color: #1a5276; font-style: italic; border: 1px dashed #85c1e9; }
.tok-proper { background: #f3e5ff; color: var(--violet); }
.tok-unk    { background: #fdecea; color: var(--rouge); }
.tok-punct  { color: #aaa; }
.tok-phrase { background: #fef9e7; color: #7d6608; border: 1px dashed var(--or); }

.legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 20px 14px;
  font-size: .72rem;
  color: #666;
}
.legend span { display: flex; align-items: center; gap: 4px; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── Correction participative ─────────────────────────────── */
.correction-panel {
  background: #fffcf0;
  border: 1px solid var(--or);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 20px 16px;
  display: none;
}
.correction-panel.show { display: block; }
.correction-panel h4 {
  font-size: .78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bleu);
  font-weight: 700;
  margin-bottom: 10px;
}
.correction-input {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition);
}
.correction-input:focus { border-color: var(--or); }

/* ── Dictionnaire ─────────────────────────────────────────── */
.section-title {
  font-family: 'Playfair Display', serif;
  color: var(--bleu);
  font-size: 1.2rem;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--or);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.badge {
  background: var(--rouge);
  color: var(--blanc);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: .7rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}
.badge-or   { background: var(--or); }
.badge-blue { background: var(--bleu); }
.badge-vert { background: var(--vert); }
.badge-gris { background: #9a9a9a; }

.cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.cat-btn {
  padding: 5px 13px;
  border: 1px solid var(--sable2);
  border-radius: 20px;
  background: var(--blanc);
  font-size: .76rem;
  cursor: pointer;
  color: var(--bleu);
  transition: all var(--transition);
  font-family: 'Lato', sans-serif;
}
.cat-btn.active, .cat-btn:hover {
  background: var(--rouge);
  color: var(--blanc);
  border-color: var(--rouge);
}

.search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.search-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition);
  background: var(--blanc);
}
.search-bar input:focus { border-color: var(--or); }
.search-bar button {
  padding: 10px 18px;
  background: var(--bleu);
  color: var(--blanc);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .88rem;
  transition: background var(--transition);
}
.search-bar button:hover { background: var(--rouge); }

.dict-grid { display: grid; gap: 7px; }

.dict-card {
  background: var(--blanc);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 12px var(--ombre);
  border-left: 4px solid var(--or);
  transition: transform .18s, box-shadow .18s;
  cursor: pointer;
}
.dict-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--ombre); }
.dict-card.custom   { border-left-color: var(--vert); }
.dict-card.phrase-card { border-left-color: var(--bleu); }

.dw  { font-size: .9rem; color: #2a2a2a; font-weight: 700; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dph { font-size: .7rem; color: #999; font-style: italic; margin-top: 1px; }
.dcat { font-size: .66rem; color: var(--or); text-transform: uppercase; letter-spacing: 1px; }
.darr { color: var(--rouge); font-size: .95rem; flex-shrink: 0; }

/* ── Grammaire ────────────────────────────────────────────── */
.gram-section {
  background: var(--blanc);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px var(--ombre);
}
.gram-section h3 {
  font-family: 'Playfair Display', serif;
  color: var(--rouge);
  font-size: 1rem;
  margin-bottom: 12px;
  border-left: 4px solid var(--or);
  padding-left: 10px;
}

.gram-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin-bottom: 8px; }
.gram-table th {
  background: var(--bleu);
  color: var(--blanc);
  padding: 7px 10px;
  text-align: left;
  font-weight: 600;
}
.gram-table td { padding: 7px 10px; border-bottom: 1px solid var(--sable2); }
.gram-table tr:nth-child(even) td { background: #fafaf7; }
.gram-table .mc { color: var(--bleu); font-style: italic; font-weight: 600; }
.gram-table .fr { color: #555; }

.note {
  background: linear-gradient(to right, rgba(201,168,76,.15), transparent);
  border-left: 3px solid var(--or);
  padding: 9px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .82rem;
  color: #555;
  line-height: 1.6;
  margin-top: 8px;
}

.gram-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.pill {
  display: inline-block;
  background: var(--or);
  color: var(--blanc);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .73rem;
  margin: 2px;
  cursor: pointer;
}
.pill.rouge { background: var(--rouge); }
.pill.bleu  { background: var(--bleu); }
.pill.vert  { background: var(--vert); }

/* ── Conjugaison ──────────────────────────────────────────── */
.conj-block { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }

.conj-tense { background: var(--sable); border-radius: var(--radius-md); padding: 11px 13px; }
.conj-tense h4 {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--rouge);
  margin-bottom: 7px;
  font-weight: 700;
}
.conj-tense li { list-style: none; font-size: .82rem; padding: 2px 0; display: flex; gap: 6px; align-items: center; }
.conj-tense .pron { color: #999; min-width: 26px; font-size: .75rem; }
.conj-tense .form { color: var(--bleu); font-style: italic; font-weight: 600; }

/* ── Admin Modal ──────────────────────────────────────────── */
.admin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.admin-overlay.show { display: flex; }

.admin-modal {
  background: var(--blanc);
  border-radius: 18px;
  width: min(700px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.admin-header {
  background: linear-gradient(135deg, var(--bleu), var(--bleu-dark));
  padding: 18px 24px;
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
}
.admin-header h2 { font-family: 'Playfair Display', serif; color: var(--blanc); font-size: 1.2rem; }
.admin-close { background: transparent; border: none; color: var(--blanc); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.admin-body { padding: 22px; }

.admin-login { text-align: center; padding: 30px 0; }
.admin-login input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .95rem;
  outline: none;
  margin-bottom: 12px;
  transition: border-color var(--transition);
}
.admin-login input:focus { border-color: var(--bleu); }

.admin-section { margin-bottom: 28px; }
.admin-section h3 {
  font-family: 'Playfair Display', serif;
  color: var(--bleu);
  font-size: 1.05rem;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sable2);
}

.suggestion-card {
  background: var(--sable);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 4px solid var(--or);
}
.suggestion-card.validated { border-left-color: var(--vert); opacity: .7; }
.sugg-meta { font-size: .73rem; color: #999; margin-bottom: 8px; }
.sugg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; font-size: .85rem; }
.sugg-row .label { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: #aaa; margin-bottom: 2px; }
.sugg-row .val { font-weight: 600; color: #2a2a2a; }
.sugg-row .val.mc { color: var(--bleu); font-style: italic; }
.sugg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.admin-edit-input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .85rem;
  outline: none;
  min-width: 120px;
  transition: border-color var(--transition);
}
.admin-edit-input:focus { border-color: var(--or); }

/* ── CSV Import ───────────────────────────────────────────── */
.csv-box {
  background: var(--blanc);
  border-radius: 14px;
  padding: 22px;
  border: 2px dashed var(--sable2);
  transition: border-color .3s;
}
.csv-box:hover, .csv-box.drag { border-color: var(--or); }
.csv-example {
  background: #f5f5f5;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: monospace;
  font-size: .78rem;
  color: #555;
  margin: 10px 0;
  white-space: pre;
}
.csv-drop-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--sable2);
  text-align: center;
  transition: background var(--transition);
}
.csv-drop-label:hover { background: var(--sable); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 18px;
  background: var(--blanc);
  border-radius: var(--radius-md);
  border: 1px solid var(--sable2);
}
.form-field label {
  display: block;
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bleu);
  font-weight: 700;
  margin-bottom: 5px;
}
.form-field input {
  width: 100%;
  padding: 8px 11px;
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .88rem;
  outline: none;
  transition: border-color var(--transition);
}
.form-field input:focus { border-color: var(--or); }

/* ── Conflict Modal ───────────────────────────────────────── */
.conflict-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.conflict-overlay.show { display: flex; }

.conflict-modal {
  background: var(--blanc);
  border-radius: 18px;
  width: min(680px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.conflict-header {
  background: linear-gradient(135deg, var(--rouge), var(--rouge-dark));
  padding: 16px 22px;
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
}
.conflict-header h2 { font-family: 'Playfair Display', serif; color: var(--blanc); font-size: 1.1rem; }

.conflict-body { padding: 20px; }
.conflict-global {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--sable);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  align-items: center;
  font-size: .83rem;
  color: #555;
}
.conflict-item {
  background: var(--blanc);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--sable2);
  box-shadow: 0 2px 8px var(--ombre);
}
.conflict-item h4 { font-size: .8rem; color: var(--rouge); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }

.conflict-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; font-size: .84rem; }
.conflict-choice {
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  padding: 10px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.conflict-choice:hover { border-color: var(--or); }
.conflict-choice.selected { border-color: var(--vert); background: #f0faf4; }
.conflict-choice .badge-choice { position: absolute; top: 6px; right: 6px; font-size: .65rem; padding: 1px 6px; }
.conflict-choice h5 { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: #aaa; margin-bottom: 4px; }
.conflict-choice .word { font-weight: 700; color: #2a2a2a; font-size: .9rem; }
.conflict-choice .trans { color: var(--bleu); font-style: italic; font-size: .85rem; }

/* ── Status messages ──────────────────────────────────────── */
.modal-status {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .83rem;
  margin-top: 10px;
  display: none;
}
.modal-status.ok  { background: #eafaf1; color: var(--vert); display: block; }
.modal-status.err { background: #fdecea; color: var(--rouge); display: block; }

/* ── CSV locked screen ────────────────────────────────────── */
.locked-screen {
  background: linear-gradient(135deg, var(--bleu), var(--bleu-dark));
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  color: var(--blanc);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .ta-row { grid-template-columns: 1fr; }
  .ta-col:first-child { border-right: none; border-bottom: 2px solid var(--sable2); }
  .gram-grid  { grid-template-columns: 1fr; }
  .conj-block { grid-template-columns: 1fr 1fr; }
  .form-grid  { grid-template-columns: 1fr 1fr; }
  header h1   { font-size: 1.1rem; }
  .tab-btn    { padding: 8px 12px; font-size: .8rem; }
  header      { padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════════════
   QUIZ / FLASHCARDS
   ══════════════════════════════════════════════════════════ */

.quiz-setup {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 8px 40px var(--ombre);
  max-width: 560px;
  margin: 0 auto;
}

.quiz-setup h2 {
  font-family: 'Playfair Display', serif;
  color: var(--bleu);
  font-size: 1.3rem;
  margin-bottom: 20px;
  text-align: center;
}

.quiz-field { margin-bottom: 14px; }
.quiz-field label {
  display: block;
  font-size: .72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bleu);
  font-weight: 700;
  margin-bottom: 6px;
}
.quiz-field select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  outline: none;
  background: var(--blanc);
  transition: border-color var(--transition);
}
.quiz-field select:focus { border-color: var(--or); }

/* Flashcard */
.quiz-game { max-width: 560px; margin: 0 auto; }

.quiz-progress {
  margin-bottom: 14px;
}
.quiz-progress-bar-wrap {
  height: 6px;
  background: var(--sable2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.quiz-progress-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--or), var(--rouge));
  border-radius: 3px;
  transition: width .4s ease;
}
.quiz-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: #888;
}
.quiz-score-pills { display: flex; gap: 8px; }
.quiz-score-pill {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 700;
}

.quiz-flashcard-wrap {
  perspective: 1000px;
  height: 220px;
  margin-bottom: 18px;
}

.quiz-flashcard {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s ease;
  cursor: pointer;
}
.quiz-flashcard.flipped { transform: rotateY(180deg); }
.quiz-flashcard.card-ok  { animation: flash-ok  .3s ease; }
.quiz-flashcard.card-ko  { animation: flash-ko  .3s ease; }
.quiz-flashcard.card-skip { animation: flash-skip .3s ease; }

@keyframes flash-ok   { 0%,100%{} 50%{box-shadow: 0 0 0 4px var(--vert)} }
@keyframes flash-ko   { 0%,100%{} 50%{box-shadow: 0 0 0 4px var(--rouge)} }
@keyframes flash-skip { 0%,100%{} 50%{box-shadow: 0 0 0 4px #bbb} }

.quiz-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backface-visibility: hidden;
  box-shadow: 0 8px 30px var(--ombre);
}
.quiz-front {
  background: linear-gradient(135deg, var(--blanc), var(--sable));
  border: 2px solid var(--sable2);
}
.quiz-back {
  background: linear-gradient(135deg, var(--bleu), var(--bleu-dark));
  transform: rotateY(180deg);
}
.quiz-card-label {
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 8px;
}
.quiz-back .quiz-card-label { color: var(--or-clair); }
.quiz-card-word {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--bleu);
  text-align: center;
  line-height: 1.3;
}
.quiz-back .quiz-card-word { color: var(--blanc); }
.quiz-card-hint {
  font-size: .75rem;
  color: var(--or);
  margin-top: 6px;
  font-style: italic;
}
.quiz-card-cat {
  font-size: .68rem;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8px;
}
.quiz-card-ph {
  font-size: .78rem;
  color: var(--or-clair);
  font-style: italic;
  margin-top: 6px;
}

.quiz-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.quiz-btn-ok   { background: var(--vert);  color: var(--blanc); border: none; border-radius: var(--radius-sm); padding: 11px 28px; font-size: .9rem; cursor: pointer; font-family: 'Lato',sans-serif; font-weight: 700; transition: filter .2s; }
.quiz-btn-ko   { background: var(--rouge); color: var(--blanc); border: none; border-radius: var(--radius-sm); padding: 11px 28px; font-size: .9rem; cursor: pointer; font-family: 'Lato',sans-serif; font-weight: 700; transition: filter .2s; }
.quiz-btn-skip { background: #999;         color: var(--blanc); border: none; border-radius: var(--radius-sm); padding: 11px 20px; font-size: .9rem; cursor: pointer; font-family: 'Lato',sans-serif; transition: filter .2s; }
.quiz-btn-flip { background: linear-gradient(135deg, var(--or), var(--or-dark)); color: var(--blanc); border: none; border-radius: var(--radius-sm); padding: 11px 36px; font-size: .95rem; cursor: pointer; font-family: 'Playfair Display',serif; transition: filter .2s; box-shadow: 0 4px 15px rgba(201,168,76,.35); }
.quiz-btn-ok:hover, .quiz-btn-ko:hover, .quiz-btn-skip:hover, .quiz-btn-flip:hover { filter: brightness(1.1); }

/* Résultats */
.quiz-results {
  background: var(--blanc);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 8px 40px var(--ombre);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.quiz-mistakes {
  text-align: left;
  background: var(--sable);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
  max-height: 200px;
  overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════
   HISTORIQUE
   ══════════════════════════════════════════════════════════ */

.history-panel {
  background: var(--blanc);
  border: 1px solid var(--sable2);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 16px;
  display: none;
  box-shadow: 0 4px 20px var(--ombre);
}
.history-panel.show { display: block; }

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: 'Playfair Display', serif;
  color: var(--bleu);
  font-size: .95rem;
}

.history-card {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--sable);
  cursor: pointer;
  transition: background var(--transition);
  border-left: 3px solid var(--or);
}
.history-card:hover { background: var(--sable2); }
.history-meta { font-size: .65rem; color: #aaa; margin-bottom: 3px; }
.history-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .83rem; }
.history-src  { color: #2a2a2a; font-weight: 600; }
.history-arr  { color: var(--rouge); }
.history-out  { color: var(--bleu); font-style: italic; }

/* ══════════════════════════════════════════════════════════
   DÉTECTION LANGUE
   ══════════════════════════════════════════════════════════ */

.lang-detect-badge {
  display: none;
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  transition: all .3s;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   IMPORT VERBES (admin)
   ══════════════════════════════════════════════════════════ */

.verb-tab-btn {
  padding: 6px 16px;
  border: 1px solid var(--sable2);
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .78rem;
  cursor: pointer;
  color: var(--bleu);
  transition: all var(--transition);
}
.verb-tab-btn.active,
.verb-tab-btn:hover {
  background: var(--bleu);
  color: var(--blanc);
  border-color: var(--bleu);
}

.verb-list-scroll {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--sable2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--blanc);
}

/* ══════════════════════════════════════════════════════════
   ADMIN — ONGLETS INTERNES
   ══════════════════════════════════════════════════════════ */

.adm-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sable2);
}

.adm-tab-btn {
  padding: 7px 14px;
  border: 1px solid var(--sable2);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: 'Lato', sans-serif;
  font-size: .78rem;
  cursor: pointer;
  color: var(--bleu);
  transition: all var(--transition);
  white-space: nowrap;
}
.adm-tab-btn:hover,
.adm-tab-btn.active {
  background: var(--bleu);
  color: var(--blanc);
  border-color: var(--bleu);
}

.adm-tab-content { animation: fadeIn .2s ease; }

/* ══════════════════════════════════════════════════════════
   BDD VIEWER
   ══════════════════════════════════════════════════════════ */

.bdd-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.bdd-search {
  flex: 1;
  min-width: 150px;
  padding: 7px 12px;
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .82rem;
  outline: none;
  transition: border-color var(--transition);
}
.bdd-search:focus { border-color: var(--or); }

#bdd-cat-filter {
  padding: 7px 10px;
  border: 2px solid var(--sable2);
  border-radius: var(--radius-sm);
  font-family: 'Lato', sans-serif;
  font-size: .78rem;
  outline: none;
  background: var(--blanc);
  cursor: pointer;
}

.bdd-cnt-badge {
  font-size: .72rem;
  font-weight: 700;
  color: var(--bleu);
  white-space: nowrap;
  padding: 4px 10px;
  background: var(--sable);
  border-radius: 12px;
}

.bdd-table-wrap {
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--sable2);
  border-radius: var(--radius-sm);
}

.bdd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}

.bdd-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bleu);
  color: var(--blanc);
}

.bdd-table thead th {
  padding: 10px 10px;
  text-align: left;
  font-size: .72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

.bdd-table tbody tr {
  border-bottom: 1px solid var(--sable2);
  transition: background var(--transition);
}
.bdd-table tbody tr:hover          { background: var(--sable); }
.bdd-table tbody tr.brow-custom    { background: #fffdf0; }
.bdd-table tbody tr.editing        { background: #f0f8ff; }

.bdd-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.bdd-table td .mc { color: var(--bleu); font-style: italic; }

.bdd-inp {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--or);
  border-radius: 4px;
  font-family: 'Lato', sans-serif;
  font-size: .8rem;
  outline: none;
  box-sizing: border-box;
}
.bdd-inp:focus { border-color: var(--bleu); }

.bdd-ph-wrap { display: flex; align-items: center; gap: 4px; }

.bdd-cat-sel {
  padding: 4px 6px;
  border: 1px solid var(--or);
  border-radius: 4px;
  font-family: 'Lato', sans-serif;
  font-size: .75rem;
  outline: none;
  background: var(--blanc);
}

.bdd-btn-edit, .bdd-btn-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background var(--transition);
}
.bdd-btn-edit:hover { background: #e3f2fd; }
.bdd-btn-del:hover  { background: #fdecea; }

.bdd-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 0 4px;
  flex-wrap: wrap;
}

.pag-btn {
  padding: 4px 12px;
  border: 1px solid var(--sable2);
  border-radius: var(--radius-sm);
  background: var(--blanc);
  cursor: pointer;
  font-size: .78rem;
  transition: all var(--transition);
}
.pag-btn:hover:not(:disabled) { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.pag-btn:disabled { opacity: .4; cursor: default; }

/* ══════════════════════════════════════════════════════════
   CLAVIER IPA
   ══════════════════════════════════════════════════════════ */

.ipa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ipa-overlay.show { display: flex; }

.ipa-modal {
  background: #1a2a3c;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  overflow: hidden;
}

.ipa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: 'Playfair Display', serif;
  color: var(--or);
  font-size: .95rem;
}
.ipa-header button {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.ipa-header button:hover { color: var(--blanc); }

.ipa-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.ipa-key {
  min-width: 36px;
  padding: 6px 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: var(--blanc);
  font-size: .9rem;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  line-height: 1;
}
.ipa-key:hover {
  background: var(--or);
  border-color: var(--or);
  color: var(--bleu);
  transform: scale(1.08);
}

.ipa-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.ipa-ctrl {
  padding: 7px 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  color: var(--blanc);
  font-family: 'Lato', sans-serif;
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--transition);
}
.ipa-ctrl:hover { background: rgba(255,255,255,.22); }

.btn-ipa {
  background: rgba(26,58,92,.08);
  border: 1px solid var(--bleu);
  color: var(--bleu);
  border-radius: 6px;
  font-size: .75rem;
  cursor: pointer;
  padding: 5px 8px;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-ipa:hover { background: var(--bleu); color: var(--blanc); }

/* ══════════════════════════════════════════════════════════
   CORRECTEUR ORTHOGRAPHE INLINE
   ══════════════════════════════════════════════════════════ */

/* Bandeau de consentement avant tout envoi vers le service externe LanguageTool */
.lt-consent-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #fef9e7;
  border: 1px solid var(--or);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: .76rem;
  color: #555;
}
.lt-consent-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Wrapper relatif pour superposer le miroir */
.ta-col { position: relative; }

/* Le textarea doit être transparent pour laisser passer les soulignements */
#tin {
  position: relative;
  z-index: 3;
  background: transparent !important;
  caret-color: var(--bleu-fonce, #1a3a5c);
}

/* Div miroir superposée */
#spell-mirror {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  color: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  /* fond visible sous le textarea transparent */
  background: var(--blanc);
  border: 2px solid transparent;
}

/* Mot erroné dans le miroir : souligné rouge ondulé */
.spell-underline {
  position: relative;
  display: inline;
  color: transparent;
  text-decoration: underline wavy #e74c3c;
  text-underline-offset: 3px;
  border-radius: 2px;
  cursor: pointer;
}

/* Tooltip au survol du mot souligné */
.spell-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2a3c;
  border-radius: 8px;
  padding: 6px 8px;
  white-space: nowrap;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  gap: 6px;
  pointer-events: auto;
  flex-direction: column;
  align-items: stretch;
  min-width: 130px;
}

.spell-underline:hover .spell-tooltip {
  display: flex;
}

/* Petite flèche */
.spell-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a2a3c;
}

.spell-accept, .spell-reject {
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-family: 'Lato', sans-serif;
  font-size: .75rem;
  cursor: pointer;
  font-weight: 600;
  text-align: left;
  transition: filter .15s;
}
.spell-accept {
  background: #27ae60;
  color: white;
}
.spell-accept:hover { filter: brightness(1.15); }

.spell-reject {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}
.spell-reject:hover { background: rgba(255,255,255,.22); color: white; }







/* Hint dans le panneau correction */
#correction-click-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: #888;
  padding: 8px 0;
  font-style: italic;
}

/* Zone de saisie de la correction */
#correction-word-select {
  animation: fadeIn .2s ease;
}


/* ── Tokens cliquables dans la zone de traduction ── */
.out-token {
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 2px;
  transition: background .15s, outline .15s;
  display: inline;
}
.out-token:hover {
  background: rgba(201,168,76,.22);
  text-decoration: underline dotted var(--or);
}
.out-token.selected {
  background: rgba(201,168,76,.38);
  outline: 1.5px solid var(--or);
  border-radius: 3px;
}

/* ── Correcteur orthographe popup ── */
#spell-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #1a2a3c;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  min-width: 160px;
  flex-direction: column;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════
   MOOC — Parcours d'apprentissage (onglet Apprendre)
   ══════════════════════════════════════════════════════════ */

.mooc-lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.mooc-lesson-card {
  background: var(--blanc);
  border: 2px solid var(--sable2);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: var(--transition);
}
.mooc-lesson-card:hover {
  border-color: var(--or);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--ombre);
}
.mooc-lesson-card.done { border-color: var(--vert); background: #f4fbf6; }
.mooc-lesson-card-niveau {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--or-dark); font-weight: 700; margin-bottom: 6px;
}
.mooc-lesson-card-titre {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; color: var(--bleu); margin-bottom: 10px;
}
.mooc-lesson-card-badge {
  display: inline-block; font-size: .72rem; padding: 3px 10px;
  border-radius: 12px; background: var(--sable2); color: var(--bleu-dark);
}
.mooc-lesson-card-badge.new { background: var(--or-clair); color: var(--bleu-dark); }
.mooc-lesson-card.done .mooc-lesson-card-badge { background: var(--vert); color: var(--blanc); }

/* ── Zone de jeu d'une leçon ── */
.mooc-lesson-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.mooc-lesson-title {
  font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--bleu);
}
.mooc-step-indicator { display: flex; gap: 6px; }
.mooc-step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sable2); display: inline-block;
}
.mooc-step-dot.active { background: var(--rouge); }
.mooc-step-dot.done   { background: var(--vert); }

.mooc-lesson-body {
  background: var(--blanc); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: 0 2px 10px var(--ombre);
}

.mooc-dialogue-box { margin-bottom: 16px; }
.mooc-dialogue-line {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--sable2);
}
.mooc-dialogue-line:last-child { border-bottom: none; }
.mooc-dialogue-speaker {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bleu);
  color: var(--blanc); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.mooc-dialogue-mc { font-size: 1.05rem; color: var(--bleu); font-weight: 600; }
.mooc-dialogue-fr { font-size: .85rem; color: #888; margin-top: 2px; }

.mooc-note-box {
  background: #fef9e7; border: 1px solid var(--or);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: .85rem; color: #555; margin-bottom: 14px;
}
.mooc-vocab-box { font-size: .85rem; color: #555; margin-bottom: 8px; }
.mooc-vocab-chip {
  display: inline-block; background: var(--sable); border-radius: 12px;
  padding: 4px 12px; margin: 4px 6px 0 0; font-size: .82rem;
}

.mooc-exo-label { font-size: .8rem; color: var(--or-dark); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .03em; }
.mooc-exo-consigne { font-size: 1.3rem; color: var(--bleu); margin-bottom: 16px; font-family: 'Playfair Display', serif; }
.mooc-exo-phrase-mc { font-size: 1.25rem; color: var(--bleu); font-weight: 600; margin-bottom: 4px; }
.mooc-exo-phrase-fr { font-size: .85rem; color: #888; margin-bottom: 16px; }

.mooc-carte-img-apprentissage {
  width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto;
  border-radius: var(--radius-sm);
}

.mooc-carte-svg {
  width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto 12px;
  border-radius: var(--radius-sm);
}
.mooc-carte-pin { cursor: pointer; }
.mooc-carte-pin circle {
  fill: var(--rouge); stroke: var(--blanc); stroke-width: 3;
  fill-opacity: .85; transition: fill .15s;
}
.mooc-carte-pin:hover circle { fill: var(--or-dark); }
.mooc-carte-pin.done circle { fill: var(--vert); }
.mooc-carte-pin-label { fill: var(--blanc); font-size: 20px; font-weight: 700; pointer-events: none; }
.mooc-carte-picker-box {
  background: var(--sable); border-radius: var(--radius-sm); padding: 14px; margin-top: 10px;
}
.mooc-carte-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mooc-carte-opt { flex: 1 1 auto; min-width: 110px; }
.rev-opt-correct { background: var(--vert) !important; color: var(--blanc) !important; border-color: var(--vert) !important; }
.rev-opt-wrong { background: var(--rouge) !important; color: var(--blanc) !important; border-color: var(--rouge) !important; opacity: .85; }


.mooc-input {
  width: 100%; padding: 12px 14px; border: 2px solid var(--sable2);
  border-radius: var(--radius-sm); font-size: 1rem; font-family: 'Lato', sans-serif;
  outline: none; transition: var(--transition);
}
.mooc-input:focus { border-color: var(--or); }
.mooc-input:disabled { background: #f4f4f4; color: #999; }

/* ── MOOC : fiches vocabulaire / grammaire / conjugaison ── */
.mooc-vocab-list { margin-bottom: 12px; }
.mooc-vocab-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--sable2);
  font-size: .95rem;
}
.mooc-vocab-row:last-child { border-bottom: none; }
.mooc-vocab-fr { flex: 1; color: #444; }
.mooc-vocab-arrow { color: var(--or-dark); }
.mooc-vocab-mc { flex: 1; color: var(--bleu); font-weight: 600; }

.mooc-verb-box {
  background: var(--sable); border-radius: var(--radius-md);
  padding: 14px 16px; margin: 14px 0;
}
.mooc-verb-title { font-size: .85rem; font-weight: 700; color: var(--bleu-dark); margin-bottom: 8px; }
.mooc-conj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.mooc-conj-row { display: flex; justify-content: space-between; font-size: .88rem; padding: 2px 0; }
.mooc-conj-pron { color: #777; }
.mooc-conj-form { color: var(--bleu); font-weight: 600; }

.mooc-grammar-box {
  background: #eef5fb; border: 1px solid var(--bleu);
  border-radius: var(--radius-md); padding: 16px 18px;
  font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--bleu-dark);
}
.mooc-grammar-text {
  font-family: 'Lato', sans-serif; font-size: .92rem; color: #444;
  margin-top: 8px; line-height: 1.5;
}
.mooc-grammar-examples { margin-top: 10px; }
.mooc-grammar-example {
  font-family: 'Lato', sans-serif; font-size: .88rem; color: var(--bleu);
  background: var(--blanc); border-radius: var(--radius-sm);
  padding: 6px 10px; margin-top: 4px;
}

/* ── MOOC : objectif de leçon et vocabulaire groupé par sous-thème ── */
.mooc-objectif-box {
  background: #fff7e6; border: 1px solid var(--or);
  border-radius: var(--radius-md); padding: 14px 18px;
  margin-bottom: 16px;
}
.mooc-objectif-title { font-weight: 700; color: var(--or-dark); margin-bottom: 6px; font-size: .92rem; }
.mooc-objectif-list { margin: 0; padding-left: 20px; font-size: .9rem; color: #444; }
.mooc-objectif-list li { margin-bottom: 3px; }

.mooc-vocab-group { margin-bottom: 16px; }
.mooc-vocab-group-title {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--or-dark); font-weight: 700; margin-bottom: 6px;
  border-bottom: 1px solid var(--sable2); padding-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   ÉVALUATIONS DE FIN DE NIVEAU — Phase A
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cartes d'éval dans le catalogue ─────────────────────────────── */
.mooc-eval-card {
  background: linear-gradient(135deg, var(--bleu-dark) 0%, #1A3A5C 100%);
  color: var(--blanc);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 2px solid transparent;
  grid-column: 1 / -1; /* pleine largeur dans la grille */
}
.mooc-eval-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--ombre); }
.mooc-eval-card.done  { border-color: var(--or); }
.mooc-eval-card-niveau { font-size: .75rem; color: var(--or-clair); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.mooc-eval-card-titre  { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; font-family: 'Playfair Display', serif; }
.mooc-eval-card-desc   { font-size: .82rem; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.mooc-eval-card-badge  {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  background: var(--or); color: var(--bleu-dark);
}
.mooc-eval-card-badge.done { background: var(--vert); color: var(--blanc); }

/* ── Header de l'éval (barre de progression) ─────────────────────── */
.eval-header {
  background: var(--blanc);
  border-bottom: 1px solid var(--sable2);
  padding: 12px 16px 10px;
  margin-bottom: 0;
  position: sticky; top: 0; z-index: 10;
}
.eval-exit-btn {
  float: right; background: none; border: none; color: #999;
  font-size: .85rem; cursor: pointer; padding: 2px 6px;
}
.eval-exit-btn:hover { color: var(--rouge); }
.eval-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.eval-title { font-weight: 700; font-size: .95rem; color: var(--bleu-dark); }
.eval-progress-txt { font-size: .8rem; color: #999; }
.eval-step-row { display: flex; gap: 5px; margin-bottom: 6px; }
.eval-step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sable2); transition: background var(--transition);
}
.eval-step-dot.active { background: var(--rouge); }
.eval-step-dot.done   { background: var(--vert); }
.eval-progress-bar-wrap { height: 4px; background: var(--sable2); border-radius: 2px; overflow: hidden; }
.eval-progress-bar-fill { height: 100%; background: var(--rouge); border-radius: 2px; transition: width .4s ease; }

/* ── En-tête de section ─────────────────────────────────────────── */
.eval-section-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 0;
}
.eval-section-icone { font-size: 1.5rem; }
.eval-section-titre { font-size: 1rem; font-weight: 700; color: var(--bleu-dark); flex: 1; }
.eval-q-count { font-size: .8rem; color: #999; white-space: nowrap; }

/* ── Corps commun ────────────────────────────────────────────────── */
.eval-body { padding: 16px; }

/* ── Texte de compréhension ─────────────────────────────────────── */
.eval-texte-box {
  background: var(--sable); border: 1px solid var(--sable2);
  border-radius: var(--radius-md); padding: 14px 16px;
  margin-bottom: 18px;
}
.eval-texte-mc { font-size: 1rem; color: var(--bleu); font-weight: 600; margin-bottom: 1px; }
.eval-texte-fr { font-size: .82rem; color: #888; margin-bottom: 8px; }

/* ── Questions et choix ──────────────────────────────────────────── */
.eval-question { font-size: 1.05rem; font-weight: 600; color: var(--bleu-dark); margin-bottom: 14px; line-height: 1.4; }
.eval-choices  { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.eval-choice {
  text-align: left; background: var(--blanc); border: 2px solid var(--sable2);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: .95rem; cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.eval-choice:hover:not(:disabled) { border-color: var(--or); background: #fffbf0; }
.eval-choice.correct { border-color: var(--vert); background: #f0fbf4; color: var(--vert-dark); font-weight: 700; }
.eval-choice.wrong   { border-color: var(--rouge); background: #fff0f0; color: var(--rouge-dark); }
.eval-choice:disabled { cursor: default; opacity: .85; }

/* ── Feedback ────────────────────────────────────────────────────── */
.eval-feedback-ok, .eval-feedback-ko {
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: .9rem; margin-bottom: 12px; line-height: 1.5;
}
.eval-feedback-ok { background: #edfaf3; border: 1px solid #b7e4cc; color: #1a7a42; }
.eval-feedback-ko { background: #fff0f0; border: 1px solid #f5c2c2; color: #a32d2d; }

/* ── Bouton suivant ──────────────────────────────────────────────── */
.eval-next-btn { margin-top: 8px; width: 100%; }

/* ── Vocabulaire : input ─────────────────────────────────────────── */
.eval-vocab-direction { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--or-dark); font-weight: 700; margin-bottom: 8px; }
.eval-vocab-prompt { font-size: 1.4rem !important; font-family: 'Playfair Display', serif; color: var(--bleu); }
.eval-input { width: 100%; margin-bottom: 12px; font-size: 1rem; }

/* ── Phrase à compléter ──────────────────────────────────────────── */
.eval-pc-consigne  { font-size: .82rem; color: #888; margin-bottom: 8px; }
.eval-pc-traduction { font-size: .88rem; color: #888; font-style: italic; margin-bottom: 12px; }
.eval-pc-phrase {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 1.1rem; color: var(--bleu); font-weight: 600; margin-bottom: 8px;
}
.eval-pc-avant, .eval-pc-apres { white-space: nowrap; }
.eval-pc-input { width: 130px !important; text-align: center; font-size: 1rem !important; margin: 0 !important; }
.eval-pc-indice { font-size: .8rem; color: #888; font-style: italic; margin-bottom: 12px; }

/* ── Relier ──────────────────────────────────────────────────────── */
.eval-relier-consigne { font-size: .88rem; color: #888; margin-bottom: 14px; }
.eval-relier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.eval-relier-col  { display: flex; flex-direction: column; gap: 8px; }
.eval-relier-item {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 2px solid var(--sable2); background: var(--blanc);
  font-size: .92rem; cursor: pointer; text-align: center;
  transition: all var(--transition);
}
.eval-relier-item:hover:not(:disabled) { border-color: var(--or); background: #fffbf0; }
.eval-relier-item.selected { border-color: var(--bleu); background: #eef4fb; font-weight: 700; }
.eval-relier-item.matched  { border-color: var(--vert); background: #edfaf3; color: var(--vert-dark); font-weight: 700; cursor: default; }
.eval-relier-item.error    { border-color: var(--rouge); background: #fff0f0; animation: shake .3s ease; }
.eval-relier-item.fr       { color: #444; }
.eval-relier-item.mc       { color: var(--bleu); font-weight: 600; }
.eval-relier-hint { font-size: .78rem; color: #bbb; text-align: center; margin-top: 4px; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── Écran de résultats ──────────────────────────────────────────── */
.eval-resultats { text-align: center; }
.eval-score-hero  { margin-bottom: 24px; }
.eval-score-emoji { font-size: 3.5rem; margin-bottom: 8px; }
.eval-score-pct   { font-size: 3rem; font-weight: 800; color: var(--bleu-dark); line-height: 1; margin-bottom: 8px; }
.eval-score-comment { font-size: 1.05rem; color: #555; font-style: italic; margin-bottom: 6px; line-height: 1.4; }
.eval-score-sub   { font-size: .85rem; color: #999; }

.eval-chart-wrap  { margin: 0 auto 20px; }

.eval-detail-list { text-align: left; margin-bottom: 20px; }
.eval-detail-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--sable2);
}
.eval-detail-icone  { font-size: 1rem; width: 24px; text-align: center; }
.eval-detail-titre  { flex: 1; font-size: .85rem; color: #555; }
.eval-detail-bar-wrap { width: 80px; height: 8px; background: var(--sable2); border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.eval-detail-bar-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.eval-detail-score  { font-size: .85rem; font-weight: 700; width: 36px; text-align: right; }

.eval-resultats-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-secondary {
  background: var(--blanc); border: 2px solid var(--bleu);
  color: var(--bleu); border-radius: var(--radius-sm);
  padding: 10px 18px; font-size: .95rem; cursor: pointer; font-weight: 600;
  transition: all var(--transition);
}
.btn-secondary:hover { background: var(--bleu); color: var(--blanc); }

/* ── Groupement par niveau dans le catalogue ─────────────────────── */
.mooc-niveau-section { margin-bottom: 28px; }
.mooc-niveau-titre {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--or-dark); font-weight: 700;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--sable2);
}

/* ═══════════════════════════════════════════════════════════════════
   FICHES DE GRAMMAIRE ENRICHIES — format blocs
   ═══════════════════════════════════════════════════════════════════ */

.mooc-gram-box {
  background: var(--blanc);
  border: 1.5px solid var(--sable2);
  border-radius: var(--radius-md);
  padding: 18px 16px 14px;
  margin-bottom: 4px;
}

.mooc-gram-titre {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bleu-dark);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sable2);
}

.mooc-gram-corps { display: flex; flex-direction: column; gap: 14px; }

/* ── Intro ──────────────────────────────────────────────────────── */
.mooc-gram-intro {
  font-size: .92rem;
  color: #444;
  line-height: 1.65;
}

/* ── Règle ──────────────────────────────────────────────────────── */
.mooc-gram-regle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--sable);
  border-left: 3px solid var(--or);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
}
.mooc-gram-emoji { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.mooc-gram-regle-titre {
  font-size: .88rem;
  font-weight: 700;
  color: var(--bleu-dark);
  margin-bottom: 3px;
}
.mooc-gram-regle-texte { font-size: .88rem; color: #555; line-height: 1.55; }

/* ── Tableau ────────────────────────────────────────────────────── */
.mooc-gram-tableau { }
.mooc-gram-tableau-titre {
  font-size: .8rem;
  font-weight: 700;
  color: var(--or-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.mooc-gram-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.mooc-gram-td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--sable2);
  vertical-align: middle;
  line-height: 1.4;
}
.mooc-gram-table tr:last-child .mooc-gram-td { border-bottom: none; }
.mooc-gram-table tr:nth-child(odd) .mooc-gram-td { background: var(--sable); }
.mooc-gram-td.c1 { font-weight: 700; color: var(--bleu); white-space: nowrap; }
.mooc-gram-td.c2 { color: #444; }
.mooc-gram-td.c3 { color: #888; font-style: italic; font-size: .83rem; }

/* ── Exemples ───────────────────────────────────────────────────── */
.mooc-gram-exemples {
  border-left: 3px solid var(--bleu);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mooc-gram-ex-row { }
.mooc-gram-ex-mc {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bleu);
  margin-bottom: 1px;
}
.mooc-gram-ex-fr {
  font-size: .85rem;
  color: #777;
  margin-bottom: 1px;
}
.mooc-gram-ex-note {
  font-size: .75rem;
  color: var(--or-dark);
  font-style: italic;
}

/* ── Astuce ─────────────────────────────────────────────────────── */
.mooc-gram-astuce {
  background: #fffbf0;
  border: 1px solid var(--or-clair);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: .88rem;
  color: var(--or-dark);
  line-height: 1.55;
}

/* ── Attention ──────────────────────────────────────────────────── */
.mooc-gram-attention {
  background: #fff5f5;
  border: 1px solid #f5c2c2;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: .88rem;
  color: #a32d2d;
  line-height: 1.55;
}

/* ── Badge détection de graphie ─────────────────────────────────────────── */
#graphie-badge {
  margin-top: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border, #e0e0e0);
  font-size: .82rem;
  line-height: 1.55;
  overflow: hidden;
}

/* En-tête du badge */
.graphie-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-wrap: wrap;
}

.graphie-icon { font-size: 1rem; flex-shrink: 0; }

.graphie-label {
  font-weight: 600;
  font-size: .85rem;
  color: var(--text, #222);
}

.graphie-conf {
  font-size: .75rem;
  color: #888;
  margin-left: auto;
}

/* Tags official / historical */
.graphie-tag {
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.graphie-tag.official {
  background: #e6f4ea;
  color: #1e6e3a;
  border: 1px solid #a8d5b5;
}
.graphie-tag.historical {
  background: #fef3e2;
  color: #7a4f00;
  border: 1px solid #f5d28a;
}

/* Corps */
.graphie-desc {
  padding: 7px 12px 4px;
  color: #555;
  font-size: .81rem;
}

.graphie-note {
  padding: 4px 12px;
  color: #666;
  font-size: .79rem;
  font-style: italic;
}

/* Avertissement FR→MC */
.graphie-fr-warn {
  margin: 6px 12px;
  padding: 7px 10px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  color: #6d4c00;
  font-size: .80rem;
  line-height: 1.5;
}

/* Lien officiel */
.graphie-link {
  padding: 6px 12px 9px;
  font-size: .79rem;
}
.graphie-link a {
  color: var(--rouge, #c8102e);
  text-decoration: none;
}
.graphie-link a:hover { text-decoration: underline; }

/* Couleur de fond selon statut */
#graphie-badge:has(.graphie-tag.official)   { background: #fafffe; border-color: #a8d5b5; }
#graphie-badge:has(.graphie-tag.historical) { background: #fffdf8; border-color: #f5d28a; }

/* ── Leçons-récits (23/09/2026) ─────────────────────────────────────── */
.mooc-recit-intro { font-size: 1rem; line-height: 1.65; font-style: italic; margin: 8px 0 14px; }
.mooc-recit-chapitre { margin: 18px 0 8px; }
.mooc-recit-titre { font-size: 1.08rem; color: var(--rouge, #c8102e); margin: 0 0 8px; }
.mooc-recit-p { line-height: 1.7; margin: 0 0 10px; }
.mooc-recit-mot { background: #fff4f4; border-radius: 6px; padding: 0 4px; white-space: nowrap; }
.mooc-recit-mot b { color: var(--rouge, #c8102e); }
.mooc-recit-mot i { color: #666; font-size: .92em; }
.mooc-recit-speak { font-size: .75em; margin-left: 2px; padding: 0 2px; }
.mooc-recit-encadre { background: #fffbf0; border-left: 4px solid var(--or-clair, #e0c070); border-radius: 6px; padding: 10px 12px; margin: 10px 0; font-size: .92rem; line-height: 1.55; }
.mooc-recit-encadre-titre { font-weight: 600; margin-bottom: 4px; }
.mooc-recit-enmc { border: 1px dashed #ddd; border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.mooc-recit-enmc-titre { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.mooc-recit-mc-line { margin: 4px 0 8px; }
@media (prefers-color-scheme: dark) { .mooc-recit-mot { background: rgba(200,16,46,.15); } .mooc-recit-encadre { background: rgba(224,192,112,.12); } }
/* Quiz de compréhension et révision espacée (23/09/2026) */
.mooc-recit-quiz { margin-top: 18px; }
.mooc-quiz-q { margin: 10px 0 14px; }
.mooc-quiz-question { font-weight: 600; margin-bottom: 6px; }
.mooc-quiz-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.mooc-quiz-btn { border: 1px solid #ccc; background: transparent; border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; color: inherit; }
.mooc-quiz-btn.ok { border-color: #2e7d32; background: rgba(46,125,50,.12); }
.mooc-quiz-btn.err { border-color: #c62828; background: rgba(198,40,40,.12); }
.mooc-quiz-expl { font-size: .9rem; margin-top: 6px; opacity: .85; }
.mooc-rev-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #e3d9b6; background: #fffbf0; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.mooc-rev-compteur { font-size: .9rem; opacity: .7; margin-bottom: 12px; }
.mooc-rev-fr { font-size: 1.4rem; margin: 10px 0 16px; }
.mooc-rev-mc { font-size: 1.5rem; font-weight: 600; color: var(--rouge, #c8102e); margin-bottom: 16px; }
.mooc-rev-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .mooc-rev-card { background: rgba(224,192,112,.1); border-color: #6b5d33; } }
/* Relecture par un locuteur (23/09/2026) */
.rel-head { margin-bottom: 12px; font-size: .9rem; }
.rel-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.rel-filtre { border: 1px solid #ccc; background: none; border-radius: 14px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: .8rem; color: inherit; }
.rel-filtre.actif { background: var(--rouge, #c8102e); color: #fff; border-color: transparent; }
.rel-progress { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.rel-progress div { height: 100%; background: var(--rouge, #c8102e); }
.rel-carte { border: 1px solid #e5e5e5; border-radius: 12px; padding: 16px; }
.rel-type { font-size: .78rem; opacity: .7; margin-bottom: 10px; }
.rel-mc { font-size: 1.6rem; font-weight: 600; color: var(--rouge, #c8102e); }
.rel-fr { font-size: 1.1rem; margin: 4px 0 10px; }
.rel-ctx { font-size: .88rem; font-style: italic; opacity: .8; margin-bottom: 10px; }
.rel-prev { font-size: .85rem; background: #f6f6f6; border-radius: 6px; padding: 6px 8px; margin-bottom: 10px; }
.rel-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.rel-btns button { flex: 1; min-width: 90px; padding: 12px; border-radius: 10px; border: none; font: inherit; font-size: 1rem; cursor: pointer; }
.rel-ok { background: #2e7d32; color: #fff; } .rel-ko { background: #c62828; color: #fff; } .rel-fix { background: #f0a500; color: #fff; }
.rel-edit label { display: block; font-size: .8rem; margin: 8px 0 2px; }
.rel-edit input { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; border: 1px solid #ccc; border-radius: 6px; }
.rel-nav { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.rel-nav button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
.rel-footer { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rel-aide { font-size: .78rem; opacity: .7; flex-basis: 100%; }
.rel-vide { padding: 20px 0; }
@media (prefers-color-scheme: dark) { .rel-prev { background: rgba(255,255,255,.06); } .rel-carte { border-color: #444; } .rel-progress { background: #333; } }