/* Thème sombre par défaut */
body {
  background: #1b1a17;
  color: #e0d6c2;
  font-family: "Garamond", "Georgia", serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 1.5em 0 0.5em;
  line-height: 1.3;
  color: #c9a227; /* doré médiéval */
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* Paragraphes */
p {
  margin: 0 0 1em;
}


/* Liens (sombre) */
a {
  color: #4ecdc4; /* turquoise lisible */
  text-decoration: none;
}
a:hover {
  color: #76e8df;
  text-decoration: underline;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
  border: 2px solid #5c4033;
  border-radius: 4px;
}

img.left {
    max-width: 50%;
  float: left;
  margin: 0 1em 1em 0;
}

a.left {
    float: left;
    margin: 0 1em 1em 0;
    max-width: 50%;
}

img.right {
    max-width: 50%;
  float: right;
  margin: 0 0 1em 1em;
}

a.right {
    float: right;
    margin: 0 0 1em 1em;
    max-width: 50%;
}

br.clear {
  clear: both;
}

.glightbox-container .gdesc-inner {
  font-family: "Garamond", "Georgia", serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #e0d6c2;       /* texte clair sur fond sombre */
  text-align: center;
  padding: 0.5em 1em;
}
/* Thème sombre par défaut */
:root{
  --hdr-bg: #1b1a17;
  --hdr-txt: #e0d6c2;
  --hdr-txt-hover: #f1c40f;
  --submenu-bg: #26241f;
  --submenu-bd: #3a372f;
  --focus-ring: #76e8df;
}

@media (prefers-color-scheme: light){
  :root{
    --hdr-bg: #fdf6e3;       /* parchemin */
    --hdr-txt: #2c2a1d;      /* brun foncé */
    --hdr-txt-hover: #8b3a3a;
    --submenu-bg: #fffdfa;
    --submenu-bd: #ded6c6;
    --focus-ring: #2563eb;
  }
}

/* Header */
.site-header { background: var(--hdr-bg); }

/* Barre principale */
.menu{
  list-style:none;
  margin: 0 auto;         /* marge automatique gauche/droite */
    padding:.5em 1em;
  display:flex; gap:.5em; align-items:center;
    justify-content: center; /* centrage horizontal */
  max-width: 1200px;       /* limite la largeur si tu veux */
}
.menu > li{ position:relative; }
.menu > li > a{
  display:inline-block; 
  padding:.5em .75em; 
  border-radius:.375rem;
  color: var(--hdr-txt); 
  text-decoration:none; 
  font-weight:600;
}
.menu > li > a:hover,
.menu > li > a:focus-visible{
  color: var(--hdr-txt-hover);
  outline: 2px solid transparent; /* évite le reflow */
  text-decoration: underline;
}

/* Sous-menus */
.submenu{
  position:absolute;
   left:0;
   top:100%;
  min-width: 220px;
  background: var(--submenu-bg);
  border: 1px solid var(--submenu-bd);
  border-radius: .5rem;
  padding:.5em;
  list-style:none;
  display:none; z-index: 20;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.submenu > li > a{
  display:block; padding:.4em .6em; border-radius:.375rem;
  color: var(--hdr-txt); text-decoration:none; font-weight:500;
}
.submenu > li > a:hover,
.submenu > li > a:focus-visible{
  background: rgba(255,255,255,.08);
  color: var(--hdr-txt-hover);
  outline: none;
}

/* Ouvrir au hover ET au focus clavier */
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu{ display:block; }

/* Anneau d'accessibilité au clavier */
.menu a:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Petits écrans : éviter les sous-menus qui sortent de l'écran */
@media (max-width: 700px){
  .menu{ flex-wrap: wrap; gap:.25em; }
  .submenu{ position: static; display:none; margin:.25em 0 0; }
  .has-sub:hover > .submenu,
  .has-sub:focus-within > .submenu{ display:block; }
}



/* Mode clair si choisi par l'utilisateur */
@media (prefers-color-scheme: light) {
  body {
    background: #fdf6e3; /* parchemin clair */
    color: #2c2a1d;
  }

  h1, h2, h3 { color: #8b3a3a; } /* rouge sombre */
  a {
    color: #1d4ed8; /* bleu roi lisible */
  }
  a:hover {
    color: #2563eb;
    text-decoration: underline;
  }
  img { border: 2px solid #aaa; }
    header {
    background: #fdf6e3; /* fond parchemin */
  }
  header nav a {
    color: #2c2a1d; /* brun foncé bien lisible */
  }
  header nav a:hover {
    color: #8b3a3a; /* rouge sombre */
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 12px;
}

.gallery a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
}

.gallery img {
  width: 100%;
  height: 250px;     /* hauteur fixe */
  object-fit: cover; /* recadre portrait/paysage */
  border-radius: 6px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Effet au survol */
.gallery a:hover img {
  transform: scale(1.05);
  filter: brightness(0.9);
}