*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --rose-poudre: #f2dcd5; --rose-doux: #e8c8bf;
  --beige-creme: #faf5f0; --blanc-casse: #fdfaf8;
  --corail: #e07b65; --corail-hover: #cc6b55; --corail-light: #f5e0db;
  --text-dark: #2c2018; --text-medium: #5a4540; --text-muted: #9a8078;
  --card-shadow: 0 2px 16px rgba(180,140,130,0.10);
  --card-shadow-hover: 0 6px 28px rgba(180,140,130,0.18);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-lg: 24px; --radius-pill: 100px;
}
html { /* JS-driven scroll */ }
section[id] { scroll-margin-top: 110px; }
body { font-family: var(--font-body); color: var(--text-dark); background: var(--blanc-casse); font-size: 18px; -webkit-font-smoothing: antialiased; }

/* ===== Mobile (<768px) — n'affecte pas le desktop ===== */
@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  #root { overflow-x: hidden; }

  /* Bascule images desktop -> mobile */
  .img-desktop { display: none !important; }
  .img-mobile { display: block !important; }
  .citation-wrap.img-mobile { position: relative !important; width: 100% !important; aspect-ratio: 1024 / 1536 !important; overflow: hidden !important; }

  /* Nav */
  .nav-bar { padding: 0 16px !important; }
  .nav-links { display: none !important; }
  .nav-actions { gap: 10px !important; }
  .nav-actions button { padding: 10px 14px !important; font-size: 12px !important; }

  /* Hero : texte d'abord, puis photo (ordre mobile) */
  .hero-sec { display: flex !important; flex-direction: column !important; min-height: auto !important; overflow: hidden !important; padding-top: 68px !important; }
  .hero-photo { order: 2 !important; position: relative !important; z-index: 1 !important; transform: none !important; width: 100% !important; max-width: 100% !important; right: auto !important; top: auto !important; margin: 28px 0 0 !important; border-radius: 24px 24px 80px 24px !important; }
  .hero-text { order: 1 !important; width: 100% !important; max-width: 100% !important; padding: 40px 26px 8px !important; }

  /* Grilles : tout en une colonne */
  .sympt-grid { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 72px !important; max-width: 100% !important; }
  /* Cartes symptômes : empilées verticalement (icône / titre / description) */
  .sympt-card { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 16px !important; padding: 28px 26px !important; min-height: 0 !important; }
  .sympt-body { width: 100% !important; }
  .sympt-card-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 21px !important; }
  .help-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; margin-bottom: 80px !important; padding-top: 0 !important; }
  .about-photo { order: -1 !important; }
  .cred-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; }
  .quotes-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .offers-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Paddings horizontaux des sections réduits */
  .sec-pad { padding-left: 22px !important; padding-right: 22px !important; }
  .sec-pad-inner { padding-left: 22px !important; padding-right: 22px !important; }

  /* Schéma "Tout est lié" : plus grand, marges réduites */
  .liens-sec { padding: 64px 10px !important; }
  .liens-img { max-width: 100% !important; }

  /* Mon approche : titre AVANT la photo */
  .about-title-desktop { display: none !important; }
  .about-title-mobile { display: block !important; order: -2 !important; margin: 0 0 4px !important; }

  /* Image citation : viewport de recadrage premium sur mobile */
  .citation-wrap { display: block !important; position: relative !important; width: 100% !important; aspect-ratio: 1024 / 1536 !important; overflow: hidden !important; }
  .citation-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 116% !important; height: auto !important; max-height: none !important; object-fit: fill !important; transform: translate(-6%, -7%) !important; }

  /* Titres de section : aucun débordement horizontal */
  h2 { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.12 !important; }

  /* Phrase « Et pourtant » : autoriser le retour à la ligne */
  .nowrap-quote { white-space: normal !important; font-size: 19px !important; line-height: 1.55 !important; }
}