/**************************************************
 * DENITSA — EATOCK CLEAN SHEET
 * Version simple, stable, sans doublons
 **************************************************/

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

/* Base */
html { overflow-x:hidden; }
body{
  font:14px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#333;
  background:#fff;
}

/* Liens (gris foncé partout) */
a, a:link, a:visited, a:hover, a:active,
#menu a, #content a, #exhibit a, #index a{
  color:#2a2a2a; text-decoration:none; -webkit-text-fill-color:#2a2a2a;
}
a:hover{ text-decoration:underline; }

/* ----- MENU GAUCHE (fixe) ----- */
#menu{
  position:fixed; top:0; bottom:0; left:0;
  width:215px; height:100%;
  overflow:auto;
  background:#fff;
  padding:10px 0 18px;
  font-size:14px; line-height:1.35;
}
#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 */
#menu ul li.section-title{
  margin:18px 0 8px;
  padding-top:8px;
  border-top:1px solid #eee;
  text-transform:none;
  font-weight:600; letter-spacing:.3px; color:#2a2a2a;
}

/* ----- COLONNE CONTENU ----- */
#content{
  margin-left:215px;               /* aligne à gauche, à côté du menu */
  padding:20px 24px 48px 0;
}

/* Conteneur principal (texte/images/vidéos) */
#exhibit,
#content .container,
#img-container{
  margin:0;                        /* pas de centrage automatique */
  width:auto;
  max-width:960px;                 /* largeur de lecture agréable */
}

/* 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;
}

/* Paragraphes/texte */
#content p, #content li, #content div{
  max-width:700px; line-height:1.55; font-size:15px;
  margin:0 0 12px;
}

/* Images — pleine largeur de la colonne */
#exhibit img, #img-container img, .container img{
  display:block; width:100%; height:auto; max-width:100%;
  margin:0 0 28px;
}

/* 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;
}

/* Vidéos (YouTube/Vimeo) — fluides, 16:9 */
iframe, video{
  display:block; width:100%; height:auto; max-width:100%;
  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; }

/* -------------------------------------------------
   MOBILE UNIQUE OVERRIDE (≤ 820px)
   ------------------------------------------------- */
@media (max-width:820px){

  /* menu plus étroit */
  #menu{
    width:150px; font-size:16px; line-height:1.4;
  }

  /* colonne de contenu juste à droite du menu */
  #content{
    margin:0; margin-left:160px;          /* = largeur menu + ~10px */
    padding:10px 10px 40px 10px;
    float:none; clear:both;
  }

  /* conteneurs gardés dans le viewport */
  #exhibit,
  #img-container,
  #content .container{
    width:calc(100vw - 170px);            /* viewport – (menu + gap) */
    max-width:calc(100vw - 170px);
    margin:0; float:none; clear:both;
  }

  /* médias fluides */
  #exhibit img, #img-container img, .container img, iframe, video{
    width:100%; max-width:100%; height:auto; margin:12px 0;
  }

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


/* --- PATCH ESPACE ENTRE MENU ET CONTENU --- */
:root{
  --menu-w: 215px;      /* largeur du menu Eatock */
  --gap-w: 28px;        /* espace souhaité */
}

/* Desktop : on ajoute un vrai “gutter” */
#content{
  margin-left: calc(var(--menu-w) + var(--gap-w)) !important;
  padding-left: 0 !important;
}

/* On s’assure que les conteneurs suivent le même décalage visuel */
#exhibit,
#img-container,
#content .container{
  margin-left: 0 !important;      /* pas de double marge */
  max-width: 960px !important;
}

/* Mobile : menu plus étroit + petit gap */
@media (max-width: 820px){
  :root{ --menu-w: 150px; --gap-w: 12px; }
  #content{
    margin-left: calc(var(--menu-w) + var(--gap-w)) !important;
    padding: 10px 10px 40px 10px !important;
  }
  #exhibit, #img-container, #content .container{
    width: calc(100vw - (var(--menu-w) + var(--gap-w))) !important;
    max-width: calc(100vw - (var(--menu-w) + var(--gap-w))) !important;
  }
}