/* =========================================================
   BASE – LAYOUT
   Fichier : /assets/css/base/layout.css
   Objectif : structure globale (front & admin), containers,
              espacement, grilles simples, sans "design".
========================================================= */

/* -------------------------
   1) Hauteurs & structure
------------------------- */

html, body {
    height: 100%;
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: none;
}

html {
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    touch-action: pan-y;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* Permet d’avoir un header + main + footer cohérents */
.site-header {
    flex: 0 0 auto;
}

.site-footer-wrapper {
    flex: 0 0 auto;
}

/* Toute zone principale doit pousser le footer en bas */
main {
    flex: 1 0 auto;
}

/* -------------------------
   2) Conteneur global
------------------------- */

/*
  Convention :
  - sur le front tu utilises <main class="page"> ... </main>
*/
.page {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 40px;
    box-sizing: border-box;
}


/* Variante plus étroite (si un jour tu as une page "form") */
.page--narrow {
    width: min(820px, 100%);
}

/* -------------------------
   3) Espacements verticaux
------------------------- */

.stack {
    display: grid;
    gap: 16px;
}

.stack--sm { gap: 10px; }
.stack--lg { gap: 24px; }

/* Sections standard */
.section {
    margin-top: 26px;
}

.section:first-child {
    margin-top: 0;
}

/* -------------------------
   4) Grilles utilitaires
------------------------- */

.grid {
    display: grid;
    gap: 16px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Responsive utilitaire */
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .grid-3,
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }
}

/* -------------------------
   5) Media helpers
------------------------- */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -------------------------
   6) Layout pages "front"
------------------------- */

/*
  Si tu veux une zone "hero" (titre + intro) standard.
  Optionnel : tu l’utiliseras plus tard si tu veux.
*/
.page-hero {
    display: block;
    gap: 10px;
    margin-bottom: 18px;
}

/* -------------------------
   7) Layout footer wrapper
------------------------- */

/*
  Ton footer est inclus via:
  <footer class="site-footer-wrapper"><?php require ... ?></footer>

  On laisse le "design" du footer dans /assets/css/front/front.css
  mais on garantit ici une largeur cohérente si besoin.
*/
.site-footer-wrapper .site-footer {
    width: min(1200px, 100%);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}