/* ===========================*/
/* PAGE (template page.php) ---*/
/* ===========================*/

/*
  Objectif :
  - CSS dédiée aux pages WordPress "classiques" (is_page()).
  - Ne s'applique pas aux templates personnalisés (panier, checkout, contact, mon compte).
*/

body.page #primary.content-area {
  width: 100%;
  height: calc(100vh - 180px);
  max-height: calc(100vh - 180px);
}

body.page #main.site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
  padding-bottom: 100px;
}

/* Typo / contenus standards */
body.page #main.site-main h1,
body.page #main.site-main h2,
body.page #main.site-main h3 {
  color: #000;
}

body.page #main.site-main p {
  line-height: 1.6;
}

/* ========================================
   RESPONSIVE
======================================== */


@media (max-width: 1400px){

  body.page #main.site-main {max-width: 90%;}

}

@media (max-width: 1200px){

  body.page #primary.content-area {
    height: auto;
    max-height: none;
  }

  body.page #main.site-main {
    padding: 32px 16px;
    padding-bottom: 90px;
  }

}

@media (max-width: 768px){


  body.page #main.site-main {
    max-width: 90%;
    padding: 24px 14px;
    padding-bottom: 80px;
  }

  /* Confort de lecture sur mobile */
  body.page #main.site-main p {
    line-height: 1.7;
  }

  body.page #main.site-main h1 { font-size: 1.8rem; line-height: 1.2; }
  body.page #main.site-main h2 { font-size: 1.4rem; line-height: 1.25; }
  body.page #main.site-main h3 { font-size: 1.15rem; line-height: 1.3; }

}

@media (max-width: 480px){

  body.page #main.site-main {
    padding: 20px 12px;
    padding-bottom: 70px;
  }

  body.page #main.site-main h1 { font-size: 1.6rem; }
  body.page #main.site-main h2 { font-size: 1.3rem; }
  body.page #main.site-main h3 { font-size: 1.1rem; }

}