@charset "UTF-8";

/* =========================
   Variables
   ========================= */
:root{
  --green:#8fba64;
  --green-pale:#cfead0;
  --green-bg:#000000; /* fond noir */
  --text:#ffffff;
  --beige:#e8e1cf;
  --wood:url('img/wood.svg');
  --border:#8fba64;
}

/* =========================
   Reset / Base
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Verdana, Arial, sans-serif;background:var(--green-bg);color:var(--text)}
a{color:inherit;text-decoration:none}

/* =========================
   Layout container
   ========================= */
.container{max-width:1200px;margin:0 auto;background:var(--green-bg)}

/* =========================
   Header & Nav
   ========================= */
.header{background:#000;border-bottom:4px solid var(--green)}
.logo-title{display:flex;align-items:center;gap:12px;padding:10px}
.logo{height:80px;width:80px;object-fit:cover;border-radius:10px}
.site-title{font:900 40px Georgia,"Times New Roman",serif;color:var(--green)}

.topnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
  margin-top:10px;
}
.topnav a{
  display:inline-block;
  padding:10px 20px;
  min-width:120px;
  text-align:center;
  border-radius:8px;
  background:var(--green);
  border:2px solid var(--green);
  font-weight:700;
  color:#fff;
  line-height:1.2;
  transition: filter 0.2s ease, transform 0.12s ease;
}
.topnav a:hover{filter:brightness(1.05); transform: translateY(-2px);}

/* contact top line */
.topline{
  margin-top:10px;
  background:var(--green);
  color:#fff;
  text-align:center;
  padding:6px 8px;
  font-weight:bold;
  border-top:4px solid var(--green);
  border-bottom:4px solid var(--green);
}

/* =========================
   Corps (grid layout)
   ========================= */
.body{display:grid;grid-template-columns:220px 1fr 220px;gap:14px; padding:12px}

/* left / right columns */
.left, .right{
  background:var(--green);
  border:6px solid var(--green);
  border-radius:10px;
  padding:8px;
}

/* center content */
.center{
  background:var(--green);
  border:8px solid var(--green);
  border-radius:12px;
  padding:20px;
  min-height:420px;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

/* headings & text */
h1{font-size:28px;margin:6px 0 12px;color:#fff}
h2{font-size:20px;margin:12px 0 8px;color:#fff}
p{line-height:1.6;margin-bottom:12px}
.list{padding-left:16px}
.list li{margin:6px 0}

/* =========================
   Miniatures - base (compatibilité)
   ========================= */
.thumb{
  display:block;
  margin:8px 0;
  border:4px solid var(--green);
  border-radius:10px;
  background:#fff;
  padding:3px;
  box-shadow:0 6px 14px rgba(0,0,0,.1);
  text-decoration:none;
}
.thumb img{display:block;width:100%;border-radius:6px}
.thumb .legend{display:block;font-size:12px;color:#fff;margin-top:6px;line-height:1.2}

/* =========================
   Viewer (colonne gauche)
   ========================= */
.left .viewer{
  width:100%;
  height:320px;      /* ajustable */
  overflow:hidden;
  border-radius:8px;
  margin-bottom:10px;
  background:#fff;
  padding:6px;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.left .viewer img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:6px;
}

/* petites miniatures (left/right) */
.thumb.small{ width:100%; margin:6px 0; }
.thumb.small img{ width:100%; height:120px; object-fit:cover; }

/* état actif sur miniature */
.thumb.active{
  border:4px solid #fff;
  box-shadow:0 0 0 4px var(--green);
}

/* focus pour l'accessibilité */
.thumb:focus{outline:3px dashed #fff; outline-offset:4px}

/* =========================
   Footer
   ========================= */
footer{padding:10px 12px;text-align:center;color:#fff}
footer .foot{background:var(--green);border-top:4px solid var(--green);padding:12px 8px}
small{opacity:0.8}

/* =========================
   Responsive layout
   ========================= */
@media (max-width:1000px){
  .body{grid-template-columns:1fr}
  .right{order:3}
  .left{order:2}
  .center{order:1}
}

/* =========================
   MOSAIC GALLERY (compatible avec .thumb)
   ========================= */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: 120px;   /* hauteur de base d'une case */
  gap: 10px;
  align-items: stretch;
  width:100%;
}

/* évite conflit de marge éventuel */
.gallery-mosaic .thumb { margin:0; }

/* mitem : règle principale pour chaque case */
.gallery-mosaic .mitem {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;             /* essentiel pour éviter overflow dans une grille flex/grid */
  overflow: hidden;
  border-radius: 8px;
  border: 4px solid var(--green);
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  text-decoration: none;
}

/* image : remplir la case sans déformation */
.gallery-mosaic .mitem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* utilitaires pour agrandir cases */
.gallery-mosaic .span-2 { grid-column: span 2; }
.gallery-mosaic .row-2  { grid-row: span 2; }

/* combinaison */
.gallery-mosaic .span-2.row-2 { box-shadow: 0 8px 20px rgba(0,0,0,.12); }

/* hover */
.gallery-mosaic .mitem:hover {
  transform: translateY(-4px);
  transition: transform .18s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

/* responsive mosaic */
@media (max-width:700px) {
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 90px;
  }
  .gallery-mosaic .span-2 { grid-column: span 2; }
  .gallery-mosaic .row-2 { grid-row: span 2; }
}

/* =========================
   Small tweaks to avoid layout breakage
   ========================= */
/* Forcer les images à ne pas dépasser leur conteneur */
img { max-width:100%; height:auto; display:block; }

/* Empêcher les liens de s'afficher en inline-block étranges */
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* =========================
   Fin du fichier
   ========================= */