/**
 * Tutobox — pages.css
 * Shell typographique partagé par toutes les pages de contenu long
 * (mentions, CGU, confidentialité, cookies, à propos, contact, blog,
 * carrières). Importé via <link rel="stylesheet" href="pages.css">.
 *
 * Briques :
 *   .prose-page           Conteneur centré
 *   .prose-eyebrow        Étiquette section
 *   .prose-title          H1
 *   .prose-lede           Sous-titre intro
 *   .prose-updated        Pill « Mise à jour »
 *   .prose-toc            Sommaire pill sticky
 *   .prose-card           Carte papier englobant le corps
 *   .prose                Conteneur typo (H2, H3, p, ul, ol, a, code…)
 *   .prose-table-wrap     Wrapper de table responsive
 *   .prose-table          Table inventaire / faits
 *   .prose-action         Carte d'action inline (CTA + pictogramme)
 *   .prose-grid           Grille 2 ou 3 colonnes pour faits/valeurs
 *   .prose-fact           Carte fait / valeur clé
 *   .prose-callout        Encart info / avertissement
 *   .prose-form           Formulaire (contact, candidature)
 *   .prose-meta-list      Liste clé/valeur (mentions légales)
 *   .prose-empty          État « bientôt disponible » (blog/carrières)
 */

body[data-tb-context] { background: var(--ds-slate-50); }

.prose-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}
@media (max-width: 720px) {
  .prose-page { padding: 40px 20px 64px; }
}

.prose-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--ds-font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ds-color-accent);
  margin-bottom: 12px;
}
.prose-eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.7;
}
.prose-title {
  font: 700 38px/1.1 var(--ds-font-sans);
  letter-spacing: -0.03em; color: var(--ds-slate-900);
  margin: 0 0 12px;
  text-wrap: balance;
}
@media (max-width: 540px) { .prose-title { font-size: 30px; } }

.prose-lede {
  font: 400 16px/1.55 var(--ds-font-sans);
  color: var(--ds-slate-600); letter-spacing: -0.005em;
  margin: 0 0 8px; max-width: 60ch;
  text-wrap: pretty;
}

.prose-updated {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  padding: 5px 12px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-pill);
  font: 600 11px/1 var(--ds-font-mono);
  letter-spacing: 0.06em; color: var(--ds-slate-600);
  text-transform: uppercase;
}
.prose-updated svg { color: var(--ds-color-accent); }

/* Carte papier ─────────────────────────────────────────────── */
.prose-card {
  margin-top: 32px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-border-alpha);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}

/* Conteneur typo ───────────────────────────────────────────── */
.prose {
  padding: 40px 48px 48px;
  max-width: 720px;
  color: var(--ds-slate-700);
  font: 400 15.5px/1.7 var(--ds-font-sans);
  letter-spacing: -0.003em;
}
@media (max-width: 720px) {
  .prose { padding: 28px 22px 36px; font-size: 15px; }
}

.prose h2 {
  font: 700 22px/1.3 var(--ds-font-sans);
  letter-spacing: -0.02em; color: var(--ds-slate-900);
  margin: 36px 0 14px;
  scroll-margin-top: 80px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--ds-radius-md);
  background: var(--ds-blue-50); color: var(--ds-color-accent);
  font: 700 12px/1 var(--ds-font-mono); letter-spacing: 0.02em;
  margin-right: 10px;
  vertical-align: 2px;
}
.prose h3 {
  font: 600 16px/1.35 var(--ds-font-sans);
  letter-spacing: -0.01em; color: var(--ds-slate-900);
  margin: 24px 0 8px;
}
.prose p { margin: 12px 0; text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 20px; margin: 14px 0; }
.prose li { margin: 10px 0; }
.prose li::marker { color: var(--ds-slate-400); }
.prose strong { color: var(--ds-slate-900); font-weight: 700; }
.prose a {
  color: var(--ds-color-accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color var(--ds-duration-fast);
}
.prose a:hover { color: var(--ds-color-accent-hover); }
.prose code {
  font: 500 13.5px/1.4 var(--ds-font-mono);
  background: var(--ds-slate-100); color: var(--ds-slate-900);
  padding: 1px 6px; border-radius: var(--ds-radius-xs);
  border: 1px solid var(--ds-color-border);
}
.prose hr {
  border: 0; border-top: 1px solid var(--ds-color-border);
  margin: 32px 0;
}

/* Tables ──────────────────────────────────────────────────── */
.prose-table-wrap {
  margin: 16px 0 4px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-color-surface);
}
.prose-table {
  width: 100%; border-collapse: collapse;
  font: 500 13.5px/1.5 var(--ds-font-sans);
}
.prose-table thead { background: var(--ds-slate-50); }
.prose-table th {
  text-align: left; padding: 10px 14px;
  font: 600 11px/1 var(--ds-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-slate-500);
  border-bottom: 1px solid var(--ds-color-border);
}
.prose-table td {
  padding: 12px 14px;
  color: var(--ds-slate-700);
  border-bottom: 1px solid var(--ds-border-alpha);
  vertical-align: top;
}
.prose-table tr:last-child td { border-bottom: 0; }
.prose-table td.mono {
  font: 500 12.5px/1.5 var(--ds-font-mono);
  color: var(--ds-slate-900); white-space: nowrap;
}
.prose-table .tag {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--ds-radius-pill);
  font: 700 10px/1.4 var(--ds-font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.prose-table .tag.req { background: var(--ds-red-50); color: var(--ds-red-700); }
.prose-table .tag.opt { background: var(--ds-blue-50); color: var(--ds-color-accent); }
.prose-table .tag.ana { background: var(--ds-green-50); color: var(--ds-green-700); }
@media (max-width: 720px) {
  .prose-table th, .prose-table td { padding: 10px 12px; font-size: 12.5px; }
  .prose-table td.mono { font-size: 11.5px; }
}

/* Carte d'action inline ────────────────────────────────────── */
.prose-action {
  margin: 20px 0;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--ds-blue-50);
  border: 1px solid var(--ds-border-accent-subtle);
  border-radius: var(--ds-radius-lg);
}
.prose-action-ico {
  width: 36px; height: 36px; border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface); color: var(--ds-color-accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  border: 1px solid var(--ds-border-accent-subtle);
}
.prose-action-text {
  flex: 1; min-width: 0;
  font: 400 14px/1.55 var(--ds-font-sans); color: var(--ds-slate-700);
}
.prose-action-text strong { color: var(--ds-slate-900); }
.prose-action button,
.prose-action .btn {
  appearance: none; border: 0;
  padding: 9px 14px; border-radius: var(--ds-radius-md);
  background: var(--ds-color-accent);
  color: var(--ds-color-text-inverse); text-decoration: none;
  font: 600 12.5px/1 var(--ds-font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  flex: none;
}


/* Sommaire sticky ─────────────────────────────────────────── */
.prose-toc {
  position: sticky; top: 76px;
  margin-bottom: 24px;
  padding: 6px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-pill);
  display: flex; gap: 4px; flex-wrap: wrap;
  box-shadow: var(--ds-shadow-xs);
  z-index: 5;
}
.prose-toc a {
  flex: 1; min-width: 0;
  padding: 8px 14px; border-radius: var(--ds-radius-pill);
  font: 600 11.5px/1 var(--ds-font-sans);
  color: var(--ds-slate-600); text-decoration: none;
  text-align: center; white-space: nowrap;
  transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}
.prose-toc a:hover { background: var(--ds-slate-50); color: var(--ds-slate-900); }
@media (max-width: 720px) { .prose-toc { display: none; } }

/* Grille de faits / valeurs ────────────────────────────────── */
.prose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.prose-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .prose-grid, .prose-grid.cols-2 { grid-template-columns: 1fr; }
}
.prose-fact {
  padding: 16px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
}
.prose-fact-k {
  font: 600 10px/1 var(--ds-font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ds-slate-400);
}
.prose-fact-v {
  margin-top: 8px;
  font: 700 22px/1.2 var(--ds-font-sans);
  letter-spacing: -0.02em; color: var(--ds-slate-900);
}
.prose-fact-sub {
  margin-top: 4px;
  font: 400 13px/1.55 var(--ds-font-sans);
  color: var(--ds-slate-500);
}

/* Encart info / avertissement ──────────────────────────────── */
.prose-callout {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--ds-color-accent);
  background: var(--ds-slate-50);
  border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
  font: 400 14px/1.6 var(--ds-font-sans);
  color: var(--ds-slate-700);
}
.prose-callout strong { color: var(--ds-slate-900); }
.prose-callout.warn {
  border-left-color: var(--ds-amber-400);
  background: var(--ds-amber-50);
}

/* Liste clé/valeur (mentions légales) ─────────────────────── */
.prose-meta-list {
  margin: 16px 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 24px;
  padding: 18px 20px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
}
.prose-meta-list dt {
  font: 600 11px/1.4 var(--ds-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-slate-500);
  padding-top: 2px;
}
.prose-meta-list dd {
  margin: 0;
  font: 500 14px/1.5 var(--ds-font-sans);
  color: var(--ds-slate-900);
}
@media (max-width: 540px) {
  .prose-meta-list { grid-template-columns: 1fr; gap: 4px 0; padding: 14px 16px; }
  .prose-meta-list dd { margin-bottom: 10px; }
}

/* Formulaire (contact, candidature) ─────────────────────────── */
.prose-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 18px 0;
}
.prose-form .full { grid-column: 1 / -1; }
.prose-form label {
  display: flex; flex-direction: column; gap: 6px;
  font: 600 11px/1 var(--ds-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-slate-600);
}
.prose-form input,
.prose-form select,
.prose-form textarea {
  appearance: none;
  padding: 11px 14px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  font: 400 14px/1.4 var(--ds-font-sans);
  color: var(--ds-slate-900);
  transition: border-color var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
  text-transform: none; letter-spacing: -0.005em;
}
.prose-form textarea { min-height: 140px; resize: vertical; }
.prose-form input:focus,
.prose-form select:focus,
.prose-form textarea:focus {
  outline: 0;
  border-color: var(--ds-color-accent);
  box-shadow: var(--ds-focus-glow);
}
.prose-form-actions {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--ds-color-border);
}
.prose-form-hint {
  font: 500 11px/1.4 var(--ds-font-mono);
  letter-spacing: 0.04em; color: var(--ds-slate-400);
}
.prose-form button[type="submit"] {
  appearance: none; border: 0;
  padding: 12px 22px; border-radius: var(--ds-radius-md);
  background: var(--ds-color-accent);
  color: var(--ds-color-text-inverse);
  font: 600 13px/1 var(--ds-font-sans);
  letter-spacing: -0.005em; cursor: pointer;
}
@media (max-width: 540px) { .prose-form { grid-template-columns: 1fr; } }

/* État vide (blog, carrières) ──────────────────────────────── */
.prose-empty {
  margin: 32px 0;
  padding: 56px 32px;
  text-align: center;
  background: var(--ds-color-surface);
  border: 1px dashed var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
}
.prose-empty-ico {
  width: 48px; height: 48px; border-radius: var(--ds-radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-blue-50);
  color: var(--ds-color-accent);
  margin-bottom: 14px;
}
.prose-empty-title {
  font: 700 19px/1.3 var(--ds-font-sans);
  letter-spacing: -0.02em; color: var(--ds-slate-900);
  margin: 0 0 6px;
}
.prose-empty-sub {
  font: 400 14px/1.55 var(--ds-font-sans);
  color: var(--ds-slate-500); letter-spacing: -0.005em;
  max-width: 42ch; margin: 0 auto 18px;
}

/* Liste d'articles (blog) ───────────────────────────────────── */
.prose-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.prose-list-item,
.prose .prose-list-item {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 18px;
  padding: 16px 18px;
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  align-items: center;
  text-decoration: none; color: inherit;
  transition: border-color var(--ds-duration-fast);
}
.prose-list-item:hover { border-color: var(--ds-border-accent-muted); }
.prose-list-date {
  font: 600 11px/1.3 var(--ds-font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ds-slate-400);
}
.prose-list-title {
  font: 700 15px/1.35 var(--ds-font-sans);
  letter-spacing: -0.015em; color: var(--ds-slate-900);
}
.prose-list-tag {
  padding: 4px 10px; border-radius: var(--ds-radius-pill);
  background: var(--ds-blue-50); color: var(--ds-color-accent);
  font: 700 10px/1 var(--ds-font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}
@media (max-width: 540px) {
  .prose-list-item { grid-template-columns: 1fr; gap: 6px; }
  .prose-list-tag { justify-self: start; }
}