/* ──────────────────────────────────────────────────────────────
   Mon Puzzle Intérieur — Pages légales v4
   Styles de contenu uniquement — topbar/brand gérés par page-brand.css
   ──────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* !important : theme.css (chargé après) impose .wrap{max-width:var(--max)} ~1180px
   et étalait le contenu légal sur desktop. On rétablit la colonne lisible 760. */
.wrap { max-width: 760px !important; margin: 0 auto; padding: 40px 24px 80px; position: relative; z-index: 1; }

h1 {
  font-family: 'Cardo', Georgia, serif !important;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700 !important;
  margin: 0 0 14px;
  color: #1C0F02 !important;
  letter-spacing: -.01em;
  line-height: 1.2;
}

h2 {
  font-family: 'Mona Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  margin: 40px 0 16px;
  color: var(--copper) !important;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid rgba(154,123,62,.22);
  padding-bottom: 10px;
}

h3 {
  font-family: 'Cardo', Georgia, serif !important;
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: #1C0F02 !important;
}

p { color: #1C0F02 !important; margin: 10px 0; font-size: 15px; line-height: 1.75; }
strong { color: #1C0F02 !important; font-weight: 600; }

ul, ol { color: #1C0F02 !important; padding-left: 22px; }
li { margin: 6px 0; line-height: 1.7; color: #1C0F02 !important; }
li::marker { color: var(--copper); }

.lead { color: var(--text-soft); font-size: 14px; margin-bottom: 32px; font-style: italic; }

section { margin-bottom: 28px; }

a {
  color: var(--copper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
a:hover { color: var(--copper-dark); border-bottom-color: var(--copper-dark); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(154,123,62,.22);
  color: #1C0F02 !important;
  vertical-align: top;
}
th {
  color: var(--copper);
  font-weight: 500;
  letter-spacing: .1em;
  font-size: 11px;
  text-transform: uppercase;
  background: rgba(201,154,78,.06);
  font-family: var(--font-sans);
}
td code {
  background: rgba(255,255,255,.4);
  color: var(--copper-dark);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.muted { color: var(--text-soft); font-size: 13px; }

/* Placeholders manquants — surlignés en rouge vif pour repérage rapide */
mark.todo-placeholder {
  background: rgba(196, 90, 72, 0.28);
  color: #a03020;
  border-radius: 3px;
  padding: 1px 5px;
  font-style: italic;
  font-weight: 500;
  text-decoration: underline dotted rgba(196, 90, 72, 0.7);
  cursor: help;
}

@media (max-width: 600px) {
  /* Fix débordement horizontal mobile : body est en flex (theme.css partagé) →
     .wrap ne pouvait pas rétrécir sous la largeur min-content de ses tableaux,
     d'où le décalage texte + fond. On borne la largeur et on force les tableaux
     à se replier (table-layout fixed + coupure des longs mots). */
  html, body { width: 100vw; max-width: 100vw; overflow-x: hidden; }
  .wrap { padding: 28px 18px 60px; max-width: 100vw; min-width: 0; }
  h1 { font-size: 26px; }
  table { table-layout: fixed; width: 100%; font-size: 13px; }
  th, td { padding: 10px 10px; overflow-wrap: anywhere; word-break: break-word; }
  p, li { overflow-wrap: anywhere; }
}
@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll; }
}
@media (max-width: 1024px) {
  body { background-attachment: scroll; }
}