/* UDCShare v2 — modèle unique des pages de contenu (views/v2/content.ejs). Le HTML vient des pages v1, sans leurs styles :
   cette feuille donne une mise en forme sobre et lisible à tout ce qu'elles contiennent. Jetons : tokens.css. */

.v2-prose { max-width: 48rem; padding-block: var(--space-6) var(--space-8); overflow-wrap: break-word; }
.v2-prose > * + * { margin-top: 0; }
.v2-prose h1 { margin-top: var(--space-2); }
.v2-prose h2 { margin-top: var(--space-7); }
.v2-prose h3 { margin-top: var(--space-5); }
.v2-prose h4 { margin-top: var(--space-4); font-size: var(--font-size-base); }
.v2-prose section, .v2-prose article, .v2-prose header, .v2-prose aside, .v2-prose nav { margin-block: var(--space-4); }
.v2-prose ul, .v2-prose ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.v2-prose li > ul, .v2-prose li > ol { margin-top: var(--space-2); }
.v2-prose blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-brand); background: var(--color-surface-2); border-radius: var(--radius-sm); }
.v2-prose hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-6); }
.v2-prose img { border-radius: var(--radius-md); }
.v2-prose code { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: var(--color-surface-2); padding: 0.1em 0.35em; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.v2-prose pre { overflow-x: auto; padding: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.v2-prose pre code { background: none; padding: 0; overflow-wrap: normal; }
.v2-prose strong, .v2-prose b { font-weight: var(--font-weight-bold); }
.v2-prose small, .v2-prose time { color: var(--color-text-muted); }

/* Tableaux : défilent seuls sur petit écran, jamais la page. */
.v2-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--font-size-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.v2-prose th, .v2-prose td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); min-width: 7.5rem; }
.v2-prose thead th { background: var(--color-surface-2); }
.v2-prose caption { caption-side: bottom; padding: var(--space-2); color: var(--color-text-muted); text-align: left; }
/* Téléphone : un tableau à colonnes titrées (data-label, utils/v2Content.js) devient une pile de cartes, une par ligne. */
@media (max-width: 640px) {
  .v2-prose table[data-stack] { display: block; overflow: visible; background: none; border: 0; }
  .v2-prose table[data-stack] caption { display: block; padding: 0 0 var(--space-2); }
  .v2-prose table[data-stack] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v2-prose table[data-stack] tbody, .v2-prose table[data-stack] tr { display: block; }
  .v2-prose table[data-stack] tr { margin-bottom: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
  .v2-prose table[data-stack] td, .v2-prose table[data-stack] tbody th { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); min-width: 0; overflow-wrap: anywhere; }
  .v2-prose table[data-stack] td::before, .v2-prose table[data-stack] tbody th::before { content: attr(data-label); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
  .v2-prose table[data-stack] tr > :first-child { display: block; background: var(--color-surface-2); font-weight: var(--font-weight-bold); }
  .v2-prose table[data-stack] tr > :first-child::before { content: none; }
  .v2-prose table[data-stack] tr > :last-child { border-bottom: 0; }
}

/* Blocs des pages v1 (cartes, encadrés, grilles) : repérés par leur nom de classe, rendus en cartes sobres. */
.v2-prose [class*="card"], .v2-prose [class*="box"], .v2-prose [class*="feature"], .v2-prose [class*="level"],
.v2-prose [class*="highlight"], .v2-prose [class*="tip"], .v2-prose [class*="note"], .v2-prose [class*="callout"],
.v2-prose [class*="faq-item"], .v2-prose [class*="step"]:not(ol):not(ul):not(li) {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); margin-block: var(--space-3);
}
.v2-prose [class*="card"] [class*="card"], .v2-prose [class*="box"] [class*="box"] { border: 0; padding: 0; background: none; }
.v2-prose [class*="grid"], .v2-prose [class*="cards"], .v2-prose [class*="features"] {
  display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.v2-prose [class*="grid"] > *, .v2-prose [class*="cards"] > * { margin-block: 0; }
.v2-prose [class*="hero"] { padding-block: var(--space-4); }
.v2-prose [class*="hero"] p { font-size: var(--font-size-lg); color: var(--color-text-muted); }
.v2-prose [class*="badge"], .v2-prose [class*="tag"]:not(table):not(tr) {
  display: inline-block; padding: 0.15em 0.6em; border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--color-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
}
.v2-prose [class*="breadcrumb"], .v2-prose [class*="crumbs"] { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Boutons et liens d'action des pages v1 → boutons v2. */
.v2-prose a[class*="btn"], .v2-prose a[class*="cta"], .v2-prose a[class*="button"], .v2-prose button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-tap);
  padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 2px solid var(--color-brand-strong);
  background: var(--color-brand-strong); color: var(--color-on-brand); font: inherit; font-weight: var(--font-weight-bold);
  text-decoration: none; cursor: pointer; margin: var(--space-1) var(--space-2) var(--space-1) 0;
}
.v2-prose a[class*="secondary"], .v2-prose a[class*="ghost"], .v2-prose a[class*="outline"], .v2-prose button[class*="secondary"] {
  background: transparent; color: var(--color-link);
}
/* Questions de la FAQ v1 : texte de titre, pas un gros bouton. */
.v2-prose .faq-question { display: flex; width: 100%; justify-content: space-between; text-align: left; background: none; color: var(--color-text);
  border: 0; border-radius: 0; padding: 0; min-height: var(--size-tap); margin: 0; font-size: var(--font-size-lg); }
.v2-prose .faq-question .faq-chevron { transition: transform var(--motion-fast); }
.v2-prose .faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
/* Réponses repliées dès le premier affichage quand le script est actif (html.js, posé par theme.js) : évite le saut quand content.js les replie. */
.js .v2-prose .faq-question[data-faq]:not([aria-expanded="true"]) + .faq-answer { display: none; }

/* « L'essentiel en bref » de la FAQ : réponses courtes lisibles d'un coup d'œil, sans retrait de liste de définitions. */
.v2-prose .faq-essentials { margin: 0; }
.v2-prose .faq-essentials dt { font-weight: var(--font-weight-bold); color: var(--color-text); margin-top: var(--space-4); }
.v2-prose .faq-essentials dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }

/* Décor v1 sans sens hors de son thème. */
.v2-prose [class*="background-animation"], .v2-prose [class*="glow"], .v2-prose [class*="orb"], .v2-prose [class*="particles"] { display: none; }

/* Champs des pages v1 (recherche de l'aide…) au format v2. */
.v2-prose input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .v2-prose select, .v2-prose textarea {
  display: block; width: 100%; max-width: 32rem; min-height: var(--size-tap); padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius-md);
  margin-block: var(--space-2);
}
.v2-prose label { display: block; font-weight: var(--font-weight-medium); }
.v2-prose form { margin-block: var(--space-4); }
/* Lien seul sur sa ligne (hors paragraphe et liste) : zone de toucher de 44 px. */
.v2-prose :is(div, section, article, aside, header, nav) > a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]) { display: inline-flex; align-items: center; min-height: var(--size-tap); }