/* ============ 1. TAILLE GLOBALE ============ */
html { font-size: 21px; }

body, p, li, dd, blockquote, span, div, a {
  font-size: 1.12rem;
  line-height: 1.7;
}

/* ============ 2. LARGEUR : remplir toute la page ============ */
[class*="container"], [class*="wrapper"], [class*="inner"],
[class*="content"], main, section > div {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: clamp(1.5rem, 4vw, 5rem) !important;
  padding-right: clamp(1.5rem, 4vw, 5rem) !important;
}

/* ============ 3. TITRES ============ */
h1 { font-size: clamp(3.5rem, 9vw, 8rem) !important; line-height: 0.92; }
h2 { font-size: clamp(2.8rem, 6.5vw, 5.5rem) !important; line-height: 1.02; }
h3 { font-size: clamp(2rem, 4vw, 3rem) !important; }
h4 { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; }

/* ============ 4. MENU ET EN-TÊTE ============ */
header, [class*="header"], nav, [class*="nav"] { font-size: 1.2rem !important; }
header a, nav a, [class*="menu"] a, [class*="menu"] span {
  font-size: 1.1rem !important;
  letter-spacing: 0.09em;
}
[class*="logo"], [class*="brand"] { font-size: 1.5rem !important; }
[class*="logo"] img, [class*="brand"] img { width: 4rem !important; height: auto !important; }

/* ============ 5. RUBRIQUES ET PETITES CAPITALES ============ */
[class*="label"], [class*="eyebrow"], [class*="kicker"], [class*="tag"],
[class*="badge"], [class*="caption"], small, figcaption {
  font-size: 1.05rem !important;
  letter-spacing: 0.15em;
}

/* ============ 6. ICÔNES ET BOUTONS ============ */
svg, [class*="icon"] { width: 1.5em !important; height: 1.5em !important; }
button, [class*="btn"], [class*="cta"], [class*="pill"] {
  font-size: 1.15rem !important;
  padding: 1em 1.8em !important;
}

/* ============ 7. IMAGES ET CARTES ============ */
[class*="card"] img, [class*="cover"] img, [class*="tome"] img,
[class*="portrait"] img, [class*="map"] img {
  width: 100% !important;
  height: auto !important;
  min-height: 380px;
  object-fit: cover;
}

/* ============ 8. CONTRASTE ============ */
p, li { color: #e0dacd !important; }

/* ============ 9. MOBILE : le point le plus cassé ============ */
@media (max-width: 900px) {
  html { font-size: 19px; }
  body, p, li { font-size: 1.15rem !important; line-height: 1.8; }

  h1 { font-size: clamp(2.6rem, 13vw, 4.5rem) !important; }
  h2 { font-size: clamp(2.1rem, 10vw, 3.5rem) !important; }
  h3 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }

  /* Force les colonnes à s'empiler au lieu de se comprimer */
  [class*="grid"], [class*="row"], [class*="columns"], [class*="flex"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  [class*="col"], [class*="card"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Empêche tout débordement horizontal */
  body { overflow-x: hidden !important; }
  img, video, iframe, table { max-width: 100% !important; height: auto !important; }

  /* Marges latérales plus serrées sur petit écran */
  [class*="container"], [class*="wrapper"], section > div {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
}