/* =========================================================
   Claire Potié — Styles communs
   Dossier : css/styles.css
   ========================================================= */

/* --------------------- Base & Typo --------------------- */
@font-face {
  font-family: 'NobelBook';
  src: url('../fonts/nobel-book.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --cp-text: #2b2b2b;
  --cp-text-soft: #555;
  --cp-heading: #444444;
  --cp-link: #444444;
  --cp-accent: #444444;     /* traits actifs et bordure active dans le menu */
  --cp-bg: #ffffff;
  --cp-shadow: rgba(0,0,0,.05);
  --cp-overlay: rgba(0,0,0,.35);
  --cp-modal-bg: #000000;
  --cp-legend: #cccccc;     /* légende modale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 40px;
  --radius: 4px;
}

body{
  background-color: var(--cp-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: 'NobelBook', sans-serif;
  overflow-x: hidden;
}

/* --------------------- Layout générique --------------------- */
.page-container{ display:flex; flex:1; }
.main-content{
  margin-left: 180px;
  width: calc(100% - 180px);
  padding: 10px;
  box-sizing: border-box;
  display:flex; flex-direction:column; align-items:flex-start;
}

.text-content{ width:100%; max-width:900px; margin-left:0; }

.title-container{
  display:flex; flex-direction:column; align-items:flex-start;
  margin-bottom: 20px;
  margin-left: 0;
}
.title-container h1{
  font-size: 2.2rem; color: var(--cp-heading);
  margin: 10; font-weight: normal; font-family: 'NobelBook', sans-serif; display: inline;
}
.title-container span{ font-size:1.5rem; color: #555; font-weight:lighter; font-family: 'NobelBook', sans-serif; display:block; }

/* Logo en haut à gauche */
.logo-container { display: none; justify-content: center; padding: 10px; }

/* --------------------- Sidebar (menu latéral) --------------------- */
.sidebar{
  width:180px; background:var(--cp-bg); padding:20px 0 0;
  position:fixed; height:100vh; left:0; top:0; z-index:100;
}
.sidebar .logo{ text-align:left; padding:0 0 20px 20px; }
.sidebar .logo img{ max-height:80px; width:auto; margin-left:0; }

.sidebar nav ul{ list-style:none; padding:0; margin:50; }
.sidebar nav ul li{ margin:0; text-align:left; padding-left:20px; }
.sidebar nav ul li a{
  text-decoration:none; color:var(--cp-link); font-weight:normal;
  display:block; padding:10px 15px 10px 0; transition:all .3s ease;
  font-family: 'NobelBook', sans-serif; font-size:1.3rem;
}
.sidebar nav ul li a:hover{ color:var(--cp-link); font-weight:bold; padding-left:10px; }
.sidebar nav ul li a.active{
  color:var(--cp-link); font-weight:bold; border-left:3px solid var(--cp-accent); padding-left:7px;
}

/* --------------------- Burger (mobile) --------------------- */
/* IMPORTANT : non fixe => défile avec la page sur mobile */
.menu-toggle{
  display:none;
  position:absolute;            /* pas 'fixed' => il remonte quand on scrolle */
  top:20px; left:20px;
  z-index:101;
  cursor:pointer; padding:10px;
}
.menu-toggle span{
  display:block; width:25px; height:3px; background-color:#444; margin:5px 0; transition:all .3s ease;
}

/* --------------------- Overlay générique --------------------- */
.overlay{
  position:fixed; inset:0; background:var(--cp-overlay);
  display:none; z-index:90;
}
.overlay.show{ display:block; }

/* Carousel pour les tableaux */
.carousel-container {width: 100%; max-width: 100%; height: auto; margin: 5px auto; position: relative; overflow: hidden; }

.carousel-slide {
   position: absolute; width: 100%; height: auto; opacity: 0; transition: opacity 1s ease-in-out;
   display: flex; justify-content: center; align-items: center; top: 0; left: 0;
}
.carousel-slide img {width: 100%; height: auto; object-fit: contain; max-height: 85vh; border: none; }
.carousel-slide.active {opacity: 1; position: relative; }

/* --------------------- Grilles/galeries --------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: var(--space-5);
  margin: 0 auto var(--space-5);
  width:100%; max-width:1400px; padding: 0 10px; box-sizing:border-box;
}
.gallery-item{
  display:flex; flex-direction:column; align-items:center;
  background:#fff; padding: var(--space-3); text-align:center; cursor:pointer;
}
.gallery-item img{
  max-width:100%; height:auto; max-height:600px; display:block; margin:0 auto;
  cursor:pointer; object-fit:contain; width:auto;
}
.gallery-info{ margin-top: 15px; text-align:center; }
.gallery-info h3{ margin:0 0 5px; color:#1a1a1a; font-size:1.3rem; }
.gallery-info p{ margin:5px 0; color:var(--cp-text-soft); font-size:.9rem; }

/* --------------------- Modale (plein écran) --------------------- */
.modal{
  display:none; position:fixed; inset:0; background-color: var(--cp-modal-bg);
  z-index:1000; justify-content:center; align-items:center; padding:20px;
}
.modal-content{ max-width:90%; max-height:90%; display:flex; flex-direction:column; align-items:center; }
.modal img{ max-width:100%; max-height:80vh; display:block; cursor:pointer; }
.modal-info{ color: var(--cp-legend); margin-top:14px; text-align:center; font-size:1.5rem; }

/* --- Évite le chevauchement avec le switch EN/FR (haut-droite) --- */
.modal .close {
  top: 50px;         /* était 20px : on descend la croix sous le switch */
  right: 30px;       /* léger alignement à droite */
  z-index: 1200;     /* s'assure qu'elle reste cliquable au-dessus de tout */
}

.close{ position:absolute; top:20px; right:30px; color:#fff; font-size:3rem; font-weight:bold; cursor:pointer; }

/* --------------------- Footer --------------------- */
footer{
  background:#fff; padding:15px 20px; text-align:right;
  margin-left:220px; width:calc(100% - 220px);
  box-sizing:border-box; margin-top:auto;
}
footer p{ margin:0; color:#555; font-size:.9rem; }

/* --------------------- Variantes de pages --------------------- */

/* Biographie : split en 2 colonnes sur desktop */
.biography-layout{
  display:grid; grid-template-columns: 380px 1fr;
  column-gap: 28px; align-items:start; margin-top:3px;
}
.bio-photo{ width:100%; max-width:380px; height:auto; object-fit:cover; display:block; }
.biography-text{
  font-family: "NobelBook", sans-serif;
  font-size:1.16rem; line-height:1.6; color:var(--cp-text);
}
.biography-text > :first-child{ margin-top:0; }

/* Contact : paragraphes plus lisibles */
.contact-content{ margin-bottom:10px; width:100%; text-align:left; }
.contact-content ul li { font-size: 1.3rem; line-height: 1.4; margin-bottom: 10px; }
.contact-content ul li:nth-child(3) { font-size: 1.18rem; line-height: 1.6; }
.contact-content p{ margin:0 0 20px; color:#333; font-size:1.3rem; line-height:1.6; }
.contact-form{ margin-top:30px; width:100%; max-width:600px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; margin-bottom:5px; color:#333; font-size:1rem; }
.form-group input, .form-group textarea{
  width:100%; padding:10px; border:1px solid #ddd; border-radius:4px; font-size:1rem;
}
.form-group textarea{ height:150px; resize:vertical; }
.submit-btn{
  background:#444; color:#fff; border:0; padding:12px 24px; font-size:1rem; cursor:pointer; border-radius:4px;
  transition: background .3s ease;
}
.submit-btn:hover{ background:#333; }

/* ===== Commutateur de langue (haut-droite) ===== */
.lang-switch {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #444;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: 'NobelBook', sans-serif;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  opacity: .94;
  transition: transform .15s ease, opacity .2s ease;
}
.lang-switch:hover { opacity: 1; transform: translateY(-1px); }
.lang-switch .globe {
  width: 16px; height: 16px; display: inline-block;
  background: radial-gradient(circle at 30% 30%, #7fb3ff 0 40%, #3e86d1 41% 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* --------------------- Responsive (≤ 768px) --------------------- */
@media (max-width: 768px){
  .menu-toggle{ display:block; }

  /* Sidebar coulissante en mobile : cachée par défaut, visible quand .active */
  .sidebar{
    width:100%; height:auto; position:fixed; top:0; left:-100%;
    transition:left .3s ease; padding:20px 0 0;
  }
  .sidebar.active{ left:0; }
  .sidebar nav ul{
    display:flex; flex-direction:column; align-items:flex-start;
    padding:0 20px; margin-top:60px;
  }
     .sidebar nav ul li { text-align: left; padding-left: 0; }

  .main-content, footer{ margin-left:0; width:100%; padding:20px; }

  .text-content{ margin-left:0; align-items:center; margin-top:-20px; }
  .title-container{ align-items:center; text-align:center; margin-left:0; }

  .logo-container{ display:flex; justify-content:center; padding:10px; }
  .logo-container img{ max-height:50px; width:auto; margin-top:20px; }
  .sidebar .logo{ display:none; }

  /* Galeries : une seule colonne et images larges */
  .gallery-grid{ grid-template-columns:1fr; gap:20px; }
  .gallery-item{ align-items:center; }
  .gallery-item img{
    width:75vw; max-width:100%; height:auto; max-height:85vh;
    object-fit:contain; display:block; margin:0 auto;
  }

  .modal .close {
    top: calc(70px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }

  /* Biographie : pile et photo agrandie */
  .biography-layout{ grid-template-columns:1fr; row-gap:18px; }
  .bio-photo{ width:85vw; max-width:min(520px, 100%); margin:0 auto; }
  .biography-text{font-family: "NobelBook", sans-serif; font-size:1.18rem; text-align:left; }

  /* Footer plein largeur en mobile */
  footer{ margin-left:0; width:100%; }

  .lang-switch { top: 14px; right: 14px; }

}