/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#e9eef8;background:#0b0b0c}

/* Header (rappel thème) */
.site-header{position:fixed;top:0;left:0;right:0;z-index:10;
  background:linear-gradient(180deg,rgba(11,11,12,.85),rgba(11,11,12,.6));
  backdrop-filter:saturate(120%) blur(10px);-webkit-backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)}
.logo-img{height:44px;width:auto;display:block;opacity:.9}
.top-nav{display:flex;gap:20px;flex-wrap:wrap}
.top-nav a{color:#c9ced9;text-decoration:none;font-weight:500;font-size:14px;padding:.35rem .6rem;border-radius:999px;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.top-nav a:hover{color:#0b0b0c;background:#7dd3fc;box-shadow:0 0 0 6px rgba(125,211,252,.25)}
.top-nav a.active{color:#0b0b0c;background:#7dd3fc;box-shadow:0 0 0 6px rgba(125,211,252,.25);cursor:default}

/* Page content */
.page{max-width:1100px;margin:0 auto;padding:px 18px 60px}



/* ===== MOSAIC: 2 items par ligne, 1 grand + 1 petit, alternés ===== */
.mosaic{ grid-auto-flow: row;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 220px;
  gap:16px;
}

@media(min-width:720px){
  .mosaic{ grid-auto-rows: 260px; gap:18px; }
}
@media(min-width:1024px){
  .mosaic{ grid-auto-rows: 300px; gap:20px; }
}

/* Item commun */
.m-item{position:relative; overflow:hidden; background:#0b0b0c; border-radius:0;
  border:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.m-item:hover{transform:none; box-shadow:none;}
.m-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.22,.6,.2,1)}
.m-item:hover img{transform:scale(1.06)}

/* Légende overlay en haut à gauche */
.m-caption{
  position:absolute; top:10px; left:12px; right:12px;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.35);
}
.m-title{margin:0; font-weight:650; font-size:18px; line-height:1.2;
margin-top: 13px; margin-bottom:13px;
}
.m-place{margin:.25rem 0 0; font-size:.92rem; opacity:.9}

/* Schémas d’occupation (12 colonnes) — on alterne toutes les 2 vignettes */
.m-item.layout-a.big{ grid-column: 5 / span 8; }   /* 8/12 (≈ 66%) */
.m-item.layout-a.small{ grid-column: 1 / span 4; } /* 4/12 (≈ 33%) */

.m-item.layout-b.big{ grid-column: 1 / span 7; }   /* 7/12 */
.m-item.layout-b.small{ grid-column: 8 / span 5; } /* 5/12 */

/* Chaque vignette prend 1 “ligne” de hauteur ; tu peux augmenter à 2 pour des images plus imposantes */
.m-item.big{ grid-row: span 1; }
.m-item.small{ grid-row: span 1; }

/* Mobile : on passe en pile verticale (1 colonne) */
@media(max-width:640px){
  .mosaic{ grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .m-item{ grid-column: auto / span 1 !important; }
}

/* Scrollbars (option) */
.em-content::-webkit-scrollbar{height:12px;width:12px}
.em-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.em-content::-webkit-scrollbar-track{background:transparent}

/* Fix barre de défilement horizontale sous le sous-menu */
.ss-nav {
  display: flex;
  flex-wrap: wrap;            /* passe à la ligne si nécessaire */
  gap: 10px;
  justify-content: center;
  max-width: 100%;
  overflow-x: hidden;         /* empêche le scroll horizontal */
}
.ss-nav a, .ss-nav span {
  display: inline-block;
  white-space: nowrap;        /* garde chaque item sur une ligne */
}
/* supprime visuellement toute scrollbar résiduelle */
.ss-nav { scrollbar-width: none; }
.ss-nav::-webkit-scrollbar { display: none; }
/* sécurité si un parent force un overflow */
header, .site-header, .header-inner { overflow-x: clip; }
main, body, html { max-width: 100%; overflow-x: hidden; }