/* Shared base reset / fonts */
html, body { margin: 0; padding: 0; }
body { font-family: 'Public Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }

/* --- Direction 1 — Sobre ------------------------------------------------- */
.d1 {
  --bg: #f4efe6;
  --paper: #faf6ee;
  --ink: #2c3e50;
  --ink-2: #4a5b6e;
  --muted: #8a8579;
  --rule: #d9d2c4;
  --accent: #a83232;
  --brown: #7d5a3c;
  font-family: 'Public Sans', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.d1 .serif { font-family: 'Source Serif 4', Georgia, serif; }
.d1 hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* --- Direction 2 — Moderne ----------------------------------------------- */
.d2 {
  --bg: #fcfbf8;
  --panel: #ffffff;
  --ink: #161616;
  --ink-2: #4a4a4a;
  --muted: #8e8e88;
  --rule: #ece8de;
  --accent: #a83232;
  --navy: #2c3e50;
  --sand: #f1ebde;
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* --- Direction 3 — Patrimonial ------------------------------------------- */
.d3 {
  --bg: #ebe3d3;
  --paper: #f3ecdd;
  --ink: #3a2e2a;
  --ink-2: #5a473d;
  --muted: #8a7965;
  --rule: #ccbfa6;
  --accent: #a83232;
  --brown: #7d5a3c;
  --gold: #b8965a;
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
.d3 .display { font-family: 'EB Garamond', serif; font-weight: 500; }

/* --- Placeholder image --------------------------------------------------- */
.placeholder {
  position: relative;
  background-color: var(--rule, #d9d2c4);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.18) 0 1px,
    transparent 1px 9px
  );
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .04em;
  color: rgba(0,0,0,.45);
  text-transform: uppercase;
  overflow: hidden;
}
.placeholder span {
  background: rgba(255,255,255,.6);
  padding: 4px 8px; border-radius: 2px;
}

/* ───────── Filet de sécurité « mobile » (≤ 820 px) ─────────
   N'affecte que les petits écrans. La mise en page bureau reste identique. */
@media (max-width: 820px) {
  /* Empêche tout débordement horizontal accidentel sans casser le sticky. */
  body { overflow-x: hidden; overflow-x: clip; }
  /* Les grandes images ne dépassent jamais la largeur de l'écran. */
  .d2 img { max-width: 100%; }
  /* Les mises en page en colonnes passent à une seule colonne.
     minmax(0,1fr) + min-width:0 évite qu'un enfant large (vidéo, carte) ne
     fasse déborder la colonne au-delà de l'écran. */
  .d2 [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .d2 [style*="grid-template-columns"] > * { min-width: 0; }
  .d2 iframe { max-width: 100%; }
  /* Marges latérales des grandes sections réduites pour le téléphone. */
  .d2 > section,
  .d2 section[style*="48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  /* Les éléments « collants » (figures, encadrés) se replacent dans le flux. */
  .d2 [style*="sticky"] { position: static !important; }
  /* Bandeaux pleine largeur : on garde l'espacement vertical, on réduit l'horizontal. */
  .d2 [style*="64px 48px"] { padding-left: 16px !important; padding-right: 16px !important; }
}