/* ══ Responsive ══ */
/* Les paliers du menu sont pilotés par mesure (.nav-tight / .nav-collapsed,
   voir js/core/header.js) et non par media query : ajouter un onglet depuis
   l'admin ne doit pas casser la mise en page. Les media queries ci-dessous ne
   traitent que ce qui dépend réellement de la taille de l'écran. */
@media (max-width:1024px) {
  .header-inner { padding:0 1.6rem; }
  .section      { padding:3rem 1.6rem; }
  .phil-page, .blog-page, .cons-page, .faq-page, .contact-page { padding:3rem 1.6rem; }
}

@media (max-width:820px) {
  :root { --header-h:56px; --header-h-tall:84px; }
  .header-inner { padding:0 1.1rem; grid-template-columns:1fr auto; }
  .hdr-nav      { display:none; }
  .mob-menu-btn { display:flex; align-items:center; }
  .hdr-logo span { font-size:.92rem; }
  .section      { padding:2.5rem 1.2rem; }
  .hero         { min-height:56vh; padding:4rem 1.2rem .5rem; }
  /* Le titre du hero ne doit plus être coupé sur mobile : on autorise
     le retour à la ligne dès que la largeur devient contrainte. */
  .hero h1      { white-space:normal; }
  .reviews-nav.prev { left:-.2rem; }
  .reviews-nav.next { right:-.2rem; }
  #toasts       { bottom:1rem; right:1rem; left:1rem; }
  .toast        { max-width:none; }
  #cookie       { right:1rem; left:1rem; max-width:none; top:auto; bottom:1rem; transform:none; }
  #nl-popup     { right:1rem; left:1rem; max-width:none; width:auto; }
  #nl-fab       { bottom:1rem; left:1rem; }
  .overlay      { padding:1rem .8rem; }
  .modal        { padding:1.6rem 1.3rem; }
}

@media (max-width:560px) {
  .form-row, .form-row-addr, .form-row-city { grid-template-columns:1fr; }
  .phil-page, .blog-page, .cons-page, .faq-page, .contact-page { padding:2.2rem 1.1rem; }
  .blog-post, .contact-form-wrap { padding:1.5rem 1.2rem; }
  .cons-text-wrap { padding:1.5rem 1.2rem; }
  .hdr-logo span  { display:none; }
  .site-footer    { padding:1.6rem 1rem; }
}

/* ══ Impression ══
   On force le thème clair et l'échelle de texte à 1, y compris quand le
   visiteur imprime depuis le thème sombre — sinon le PDF sort avec un fond
   noir. Corollaire : aucune couleur calculée en JS ne doit être posée en
   style inline (un style inline gagne sur ces règles) : passer par une
   variable CSS. */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg:#fff; --bg1:#fff; --bg2:#fff; --bg3:#fff; --bg4:#fff;
    --border:#ccc; --border2:#bbb;
    --text:#000; --text-mid:#333; --text-dim:#666;
    --accent:#8A5E22; --accent2:#6d4a1b; --on-accent:#fff;
    --accent-bg:transparent; --accent-soft:#ddd;
    --header-bg:#fff; --mobmenu-bg:#fff; --overlay-bg:#fff; --lightbox-bg:#fff;
    --hover-bg:transparent; --stripe-bg:transparent; --hairline:#eee;
    --scrim:transparent; --scrim-soft:transparent;
    --on-scrim:#000; --on-scrim-dim:#333;
    --gift-grad:none; --hero-glow:transparent;
    --shadow:none; --shadow-md:none; --shadow-sm:none; --gift-glow:none;
    --text-scale:1;
    color-scheme: light;
  }
  .site-header, #mob-menu, .mob-menu-btn, .comfort-ctrl, .nav-search-wrap,
  #cookie, #nl-popup, #nl-fab, #toasts, .adm-side, .guide-cta,
  .reviews-nav, .section-back, .admin-btn { display:none !important; }
  .site-footer { border-top:1px solid #ccc; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.7em; color:#666; }
}