/**************************************************
 * DENITSA — EATOCK CLEAN SHEET (simplifié & solide)
 **************************************************/

/* Reset minimal */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* Variables layout */
:root{
  --menu-w:215px;      /* largeur menu desktop */
  --gap-w:36px;        /* espace entre menu et contenu */
}

/* Base */
html{
  overflow-x:hidden; /* pas de scroll horizontal inutile */
}

body{
  font:14px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#333;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Liens (hors menu) */
a,
a:link,
a:visited,
a:hover,
a:active,
#content a,
#exhibit a,
#index a{
  color:#2a2a2a;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* ----- MENU GAUCHE (fixe) ----- */
#menu{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:var(--menu-w);
  height:100%;
  overflow:auto;
  background:#fff;
  padding:10px 0 18px;
  font-size:12px;
  line-height:1.35;
  font-family:"Helvetica Neue", Arial, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* lissage lien menu */
#menu a{
  display:block;
  padding:2px 0;
  color:#000;
  text-decoration:none;
  -webkit-text-fill-color:#000;
  transition:color .25s ease, -webkit-text-fill-color .25s ease;
}

#menu a:hover{
  color:#999;
  -webkit-text-fill-color:#999;
}

/* page active */
#menu li.active > a,
#menu li.on > a,
#menu li.exhibit-active > a,
#menu a.active{
  color:#c6c6c6 !important;
  -webkit-text-fill-color:#c6c6c6 !important;
  border-left:2px solid #c6c6c6;
  padding-left:6px;
}

#menu ul{
  list-style:none;
  margin:0 0 14px;
}

#menu ul li{
  margin:4px 0;
}

#menu ul li a{
  display:block;
  padding:2px 0 3px;
  word-break:break-word;
}

/* Titres de section du menu — version luxe */
#menu ul li.section-title{
  margin:20px 0 10px;
  padding-top:10px;
  border-top:1px solid #e6e6e6;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.12em;
  color:#555;
  text-transform:uppercase;
}

/* ----- COLONNE CONTENU ----- */
#content{
  margin-left: calc(var(--menu-w) + var(--gap-w));
  padding:30px 10px 48px 0; /* moins de marge à droite */
}

/* Conteneurs (texte/images/vidéos) :
   largeur = toute la place dispo à droite du menu */
#exhibit,
#img-container,
#content .container{
  display:block;
  margin:0;
  width: calc(100vw - (var(--menu-w) + var(--gap-w)));
  max-width:1000px;            /* largeur maxi chic */
}

/* Titres */
h1,h2,h3,h4,h5,h6,
#content h1,#content h2,#content h3,#content h4,
#menu ul li.section-title{
  color:#2a2a2a;
  font-weight:600;
  letter-spacing:.3px;
}

/* Texte : on limite le flux à 700px pour les listes */
#content li{
  max-width:700px;
}

#content p{
  font-size:16px;
  line-height:1.6;
  letter-spacing:0.2px;
  margin:0 0 14px;
  color:#2a2a2a;
}

/* P avec image = pas de cap */
#content p:has(img){
  max-width:none !important;
}

#exhibit p,
#img-container p,
#content .container p{
  max-width:none !important;
}

/* Un peu moins d’espace sous les paragraphes d’expo si besoin */
#exhibit p{
  margin-bottom:10px !important;
}

/* Neutralise d’éventuels attributs HTML width/height */
img[width],
img[height]{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}

/* Icônes sociales (ne pas agrandir) */
img.icon{
  width:28px;
  height:28px;
  display:inline-block;
  vertical-align:middle;
  margin-right:8px;
  max-width:none;
  max-height:none;
}

/* === IMAGES EXPOS — standard 1000px max === */
#exhibit img,
#img-container img,
#content .container img{
  display:block;
  width:100%;
  max-width:1000px;
  height:auto;
  margin:0 0 40px;
}

/* Classe spéciale si tu veux forcer 1000px sur une image */
.img-1000{
  display:block;
  width:100%;
  max-width:1000px;
  height:auto;
  margin:0 0 40px;
}

/* === VIDÉOS (YouTube / .mov) === */
iframe,
video{
  display:block;
  width:100%;
  max-width:1000px;    /* même largeur que les images */
  height:auto;
  aspect-ratio:16/9;
  border:0;
  margin:12px 0 40px;
  border-radius:6px;
}

/* Cacher le "Built with Indexhibit" si présent */
#credits,
#footer,
.poweredby{
  display:none !important;
}

/* === NEWS PAGE — BLOCS CHICS & HARMONISÉS === */

/* Conteneur général de la page News */
#content.news-page,
#exhibit.news-page{
  line-height:1.55;
}

/* Chaque annonce (bloc de news) */
.news-block{
  margin-bottom:60px;            /* espace entre blocs */
}

/* Titre d’un événement */
.news-block h2,
.news-block h3{
  font-size:22px;
  font-weight:600;
  margin-bottom:12px;
  letter-spacing:0.5px;
}

/* Texte régulier */
.news-block p{
  margin-bottom:12px;            /* toujours égal et chic */
}

/* Lien “more info” */
.news-block a{
  text-decoration:none;
  border-bottom:1px solid #000;
  padding-bottom:2px;
}

/* Images dans les news (un peu plus petites) */
.news-block img{
  display:block;
  width:100%;
  max-width:900px;               /* largeur élégante */
  margin:0 0 18px 0;             /* espace sous l’image */
}

/* -------------------------------------------------
   MOBILE (≤ 820px)
   ------------------------------------------------- */
@media (max-width:820px){
  :root{
    --menu-w:150px;
    --gap-w:12px;
  }

  #menu{
    width:var(--menu-w);
    font-size:16px;
    line-height:1.4;
  }

  #content{
    margin-left: calc(var(--menu-w) + var(--gap-w));
    padding:10px 10px 40px 10px;
    float:none;
    clear:both;
  }

  #exhibit,
  #img-container,
  #content .container{
    width: calc(100vw - (var(--menu-w) + var(--gap-w)));
    max-width:100%;
    margin:0;
    float:none;
    clear:both;
  }

  /* Texte confortable sur mobile */
  #content p,
  #content li{
    max-width:100%;
    font-size:16px;
  }

  /* images & vidéos full largeur mobile */
  #exhibit img,
  #img-container img,
  #content .container img,
  iframe,
  video{
    max-width:100%;
  }
}

/* Fallback vieux navigateurs sans :has / clamp */
@supports not (width: clamp(10px, 10px, 10px)){
  #exhibit,
  #img-container,
  #content .container{
    width: calc(100vw - (var(--menu-w) + var(--gap-w)));
    max-width:1000px;
  }
}


/* ======== ALIGNEMENT GLOBAL ARTISTE DENITSA ======== */

/* Largeur logique du contenu */
#content, #exhibit, #img-container, #content .container {
  margin-left: calc(var(--menu-w) + var(--gap-w));
  width: calc(100vw - (var(--menu-w) + var(--gap-w)));
  max-width: 1200px; /* tu peux mettre 1100 ou 1000 selon ton goût */
}

/* Images harmonisées */
#exhibit img,
#img-container img,
#content .container img {
  display:block;
  width:100%;
  max-width:1000px;   /* images AVANT-PREMIÈRE ok */
  margin: 0 0 48px 0; /* ESPACE CONSTANT */
}

/* Vidéos harmonisées */
#exhibit iframe,
#content iframe,
#img-container iframe {
  display:block;
  width:100%;
  max-width:1000px;  /* pareil que les images */
  aspect-ratio:16/9;
  height:auto;
  border-radius:6px;
  margin: 0 0 48px 0;
}

/* Centrage visuel */
#exhibit img,
#exhibit iframe,
#img-container img,
#img-container iframe,
#content .container img,
#content .container iframe {
  margin-left:auto;
  margin-right:auto;
}

/* ——— COLONNE D'EXPOSITION (contenu images/vidéos/texte) ——— */
#exhibit,
#img-container,
#content .container{
  width:100%;
  max-width:1000px;      /* largeur max harmonisée */
  margin:0 auto 40px 0;  /* auto à droite → la colonne colle bien au texte */
}

/* ——— IMAGES ET VIDEOS ——— */
#exhibit img,
#img-container img,
#content .container img,
#exhibit iframe,
#img-container iframe,
#content .container iframe {
  display:block;
  width:100%;
  max-width:1000px;
  height:auto;
  margin:0 0 40px 0;     /* plus de centrage inutile */
}