/* ============================================
   VARIABLES
============================================ */
:root {
  --white:       #ffffff;
  --off-white:   #f9f8f6;
  --light-gray:  #f2f1ef;
  --mid-gray:    #c8c4be;
  --dark-gray:   #6b6560;
  --ink:         #1a1815;
  --blue-nav:    rgba(220,232,240,0.97);
  --accent:      #8b7355;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Montserrat', sans-serif;
  --transition:  0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); background:var(--white); color:var(--ink); line-height:1.7; overflow-x:hidden; }
img  { display:block; width:100%; height:100%; object-fit:cover; }
a    { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--mid-gray); }

/* ============================================
   HEADER
============================================ */
header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:0 48px; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.96);
  box-shadow:0 1px 0 rgba(0,0,0,0.07);
  backdrop-filter:blur(8px);
}
.logo { font-family:var(--font-serif); font-size:1.25rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; }
.logo em { font-weight:300; font-style:italic; }
.nav-center {
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:36px;
}
.nav-center a {
  font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink); position:relative; padding-bottom:2px; transition:color var(--transition);
}
.nav-center a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--ink); transition:width var(--transition); }
.nav-center a:hover::after { width:100%; }
.nav-center a.current { border-bottom:1px solid var(--ink); }
.nav-right { display:flex; align-items:center; gap:28px; }
.cart-btn { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.cart-count { width:18px; height:18px; background:var(--ink); color:var(--white); border-radius:50%; font-size:0.55rem; display:flex; align-items:center; justify-content:center; }
.burger { display:flex; flex-direction:column; gap:5px; padding:4px; }
.burger span { display:block; width:24px; height:1px; background:var(--ink); }

/* ============================================
   FULLSCREEN MENU OVERLAY (light blue)
============================================ */
/* dim backdrop right third */
.menu-backdrop {
  display: none;
}

/* --- Conteneur parent qui englobe le titre ET le sous-menu --- */
.menu-group {
  position: relative;
  display: block;
  width: 100%;
  /* On définit une marge interne à droite pour créer un "pont" invisible
     qui relie le texte de gauche à la zone de droite */
  padding-right: 50px;
}

/* --- Configuration du panneau (Moitié droite) --- */
.menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%; /* Occupe la moitié de l'écran */
  background: var(--blue-nav);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateX(100%);
}
.menu-overlay.open {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

/* Zone interne relative pour positionner les sous-menus absolument */
.menu-overlay-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 100px 60px;
}

/* Conteneur principal gauche */
.menu-left-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 45%; /* Prend un peu moins de la moitié du volet */
}




/* --- Style des liens principaux --- */
.menu-trigger {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
  transition: color var(--transition);
  display: inline-block;
}
.menu-trigger:hover {
  color: var(--accent);
}






/* --- Le sous-menu de droite --- */
.menu-sub-content {
  position: absolute;
  top: 0; /* Aligné pile sur le haut de son conteneur .menu-group */
  left: 100%; /* Se place juste après la fin du .menu-group (à droite) */
  width: 250px; /* Largeur fixe ou en % selon vos besoins */

  opacity: 0;
  visibility: hidden;
  transform: translateX(15px);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;

  /* TRÈS IMPORTANT : empêche les clics fantômes quand il est masqué */
  pointer-events: none;
}

/* --- L'activation au survol --- */
/* Dès que la souris survole le groupe (y compris l'espace invisible qui sépare
   le titre du sous-menu), le sous-menu reste affiché et devient actif */
.menu-group:hover .menu-sub-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: all; /* Devient cliquable */
}

/* Optionnel : Garder le titre principal coloré quand on survole ses sous-liens */
.menu-group:hover .menu-trigger {
  color: var(--accent);
}

/* --- Styles des listes de droite (inchangés mais nettoyés) --- */
.menu-sub-content h4 {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dark-gray);
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom: 8px;
}
.menu-sub-content a {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 12px;
  transition: padding-left 0.2s, color 0.2s;
}
.menu-sub-content a:hover {
  padding-left: 6px;
  color: var(--accent) !important;
}

















.menu-close {
  position: absolute;
  top: 32px;
  right: 48px;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
}
.menu-left {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu-main-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-main-links a {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  transition: color var(--transition), letter-spacing var(--transition);
  letter-spacing: 0.02em;
}
.menu-main-links a:hover {
  color: var(--accent);
  letter-spacing: 0.06em;
}
.menu-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 40px;
  padding-bottom: 20px;
}
.menu-sub {
  display: flex;
  gap: 60px;
}
.menu-sub-col h4 {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dark-gray);
  margin-bottom: 16px;
}
.menu-sub-col a {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 10px;
  transition: color var(--transition);
}
.menu-sub-col a:hover { color: var(--accent); }
.menu-bottom {
  display: flex;
  align-items: center;
  gap: 32px;
}
.menu-social a {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-gray);
  margin-right: 20px;
}
/* ============================================
   FIL D'ARIANE
============================================ */
.breadcrumb {
  margin-top:72px;
  max-width:1400px; margin-top:72px; width:100%;
  padding:18px 72px;
  display:flex; align-items:center; gap:10px;
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mid-gray); border-bottom:1px solid var(--light-gray);
}
.breadcrumb a { color:var(--dark-gray); transition:color var(--transition); }
.breadcrumb a:hover { color:var(--ink); }
.breadcrumb .sep { color:var(--light-gray); }
.breadcrumb .current-crumb { color:var(--ink); }

/* ============================================
   EN-TÊTE ARTICLE
============================================ */
.art-header {
  max-width:1400px; margin:60px auto; padding:56px 72px 0;
}
.art-cat {
  font-size:0.58rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
.art-main-title {
  font-family:var(--font-serif); font-size:3.2rem; font-weight:300;
  line-height:1.18; letter-spacing:0.01em; max-width:820px;
  margin-top:100px;
}
.art-main-title em { font-style:italic; }
.art-header-meta {
  display:flex; align-items:center; gap:32px;
  padding:24px 0; border-top:1px solid var(--light-gray); border-bottom:1px solid var(--light-gray);
}
.author-block { display:flex; align-items:center; gap:12px; }
.avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--light-gray); border:1px solid var(--mid-gray);
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:500; letter-spacing:0.05em; flex-shrink:0;
}
.author-name { font-size:0.72rem; font-weight:500; }
.author-role { font-size:0.6rem; color:var(--dark-gray); }
.meta-sep { width:1px; height:32px; background:var(--light-gray); }
.meta-item { font-size:0.62rem; letter-spacing:0.1em; color:var(--dark-gray); }
.meta-item strong { display:block; color:var(--ink); font-weight:500; font-size:0.68rem; margin-bottom:2px; }

/* ============================================
   CORPS DE L'ARTICLE (2 colonnes)
============================================ */
.art-body-wrap {
  max-width:1400px; margin:0 auto; padding:0 72px;
  display:grid; grid-template-columns:1fr 300px; gap:0;
  align-items:start;
}

/* --- Colonne contenu --- */
.art-content { padding:48px 56px 80px 0; border-right:1px solid var(--light-gray); }

/* Photo principale */
.art-hero-img {
  height:520px; overflow:hidden; margin-top:95px;
  position:relative; cursor:zoom-in;
}
.art-hero-img img { transition:transform 0.6s var(--transition); }
.art-hero-img:hover img { transform:scale(1.03); }
.art-hero-zoom {
  position:absolute; bottom:16px; right:16px;
  font-size:0.55rem; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.8); display:flex; align-items:center; gap:5px;
}
.art-hero-zoom::before { content:'⊕'; font-size:0.9rem; }
.art-img-caption { font-size:0.6rem; color:var(--mid-gray); letter-spacing:0.08em; margin-bottom:40px; padding-left:2px; }

/* Prose */
.art-prose { max-width:640px; }
.art-prose p {
  font-size:0.88rem; line-height:2.05; color:var(--dark-gray);
  margin-bottom:24px;
}
.art-prose p strong { color:var(--ink); font-weight:500; }
.art-prose h3 {
  font-family:var(--font-serif); font-size:1.6rem; font-weight:400;
  color:var(--ink); margin:40px 0 20px; line-height:1.3;
}
.pull-quote {
  border-left:2px solid var(--ink); padding:16px 24px; margin:36px 0;
  font-family:var(--font-serif); font-size:1.55rem; font-weight:300;
  line-height:1.45; font-style:italic; color:var(--ink);
}
.art-prose figure { margin:36px 0; }
.art-prose figure img { height:320px; object-fit:cover; }
.art-prose figcaption { font-size:0.6rem; color:var(--mid-gray); letter-spacing:0.08em; margin-top:10px; }

/* Tags fin d'article */
.art-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:48px; padding-top:32px; border-top:1px solid var(--light-gray); }
.art-tag {
  font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase;
  padding:8px 16px; border:1px solid var(--mid-gray); color:var(--dark-gray);
  transition:all var(--transition); cursor:pointer;
}
.art-tag:hover { border-color:var(--ink); color:var(--ink); }

/* Partage */
.art-share { display:flex; align-items:center; gap:16px; margin-top:32px; }
.share-label { font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--mid-gray); }
.share-btn {
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:10px 20px; border:1px solid var(--light-gray); color:var(--dark-gray);
  transition:all var(--transition);
}
.share-btn:hover { border-color:var(--ink); color:var(--ink); }

/* --- Colonne sidebar --- */
.art-sidebar { padding:48px 0 48px 40px; position:sticky; top:88px; }
.sidebar-block {
  padding-bottom:28px; margin-bottom:28px;
  border-bottom:1px solid var(--light-gray);
}
.sidebar-block:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.sidebar-label {
  font-size:0.57rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--mid-gray); margin-bottom:16px;
}
/* Infos article */
.sidebar-info-row {
  display:flex; gap:8px; align-items:baseline;
  padding:5px 0; border-bottom:1px solid var(--light-gray); font-size:0.7rem;
}
.sidebar-info-row:last-child { border-bottom:none; }
.sidebar-info-row .lbl { color:var(--dark-gray); flex:0 0 76px; }
.sidebar-info-row .val { font-weight:500; }

/* Articles connexes */
.related-item {
  display:flex; gap:12px; margin-bottom:18px;
  cursor:pointer; transition:opacity var(--transition);
}
.related-item:hover { opacity:0.7; }
.related-item:last-child { margin-bottom:0; }
.related-thumb { width:60px; height:60px; flex-shrink:0; overflow:hidden; background:var(--light-gray); }
.related-title { font-family:var(--font-serif); font-size:0.95rem; line-height:1.35; margin-bottom:4px; }
.related-date  { font-size:0.58rem; color:var(--mid-gray); letter-spacing:0.08em; }

/* CTA atelier */
.sidebar-cta {
  background:var(--off-white); padding:20px;
}
.sidebar-cta p { font-size:0.72rem; line-height:1.8; color:var(--dark-gray); margin-bottom:16px; }
.btn-rdv-small {
  display:block; text-align:center;
  font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase;
  padding:12px; border:1px solid var(--ink); color:var(--ink);
  transition:all var(--transition);
}
.btn-rdv-small:hover { background:var(--ink); color:var(--white); }

/* ============================================
   NAVIGATION PREV / NEXT
============================================ */
.art-nav-footer {
  border-top:1px solid var(--light-gray);
  display:grid; grid-template-columns:1fr 1fr;
}
.nav-foot-item {
  padding:40px 72px; cursor:pointer;
  transition:background var(--transition);
}
.nav-foot-item:hover { background:var(--off-white); }
.nav-foot-item:first-child { border-right:1px solid var(--light-gray); }
.nav-foot-item:last-child { text-align:right; }
.nav-foot-dir {
  font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mid-gray); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.nav-foot-item:last-child .nav-foot-dir { justify-content:flex-end; }
.nav-foot-title {
  font-family:var(--font-serif); font-size:1.3rem; font-weight:400;
  line-height:1.3; max-width:360px;
}
.nav-foot-item:last-child .nav-foot-title { margin-left:auto; }

/* ============================================
   LIGHTBOX PHOTO PLEIN ÉCRAN
============================================ */
.lightbox-fs {
  position:fixed; inset:0; background:rgba(10,8,6,0.96); z-index:9000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.lightbox-fs.open { opacity:1; pointer-events:all; }
.lightbox-fs img { max-width:88vw; max-height:88vh; object-fit:contain; }
.lfs-close {
  position:absolute; top:24px; right:32px;
  color:rgba(255,255,255,0.7); font-size:1rem; cursor:pointer;
  background:none; border:none; font-family:var(--font-sans);
  letter-spacing:0.15em; font-size:0.65rem; text-transform:uppercase;
}

/* ============================================
   FOOTER
============================================ */
footer { background:var(--ink); color:rgba(255,255,255,0.75); padding:80px 0 40px; }
.footer-grid {
  max-width:1400px; margin:0 auto; padding:0 72px 60px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
footer .logo { color:var(--white); margin-bottom:24px; }
.footer-brand-text { font-size:0.72rem; line-height:2; max-width:300px; }
.footer-col h5 { font-size:0.58rem; letter-spacing:0.28em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:24px; }
.footer-col a { display:block; font-size:0.75rem; color:rgba(255,255,255,0.7); margin-bottom:12px; transition:color var(--transition); }
.footer-col a:hover { color:var(--white); }
.footer-bottom {
  max-width:1400px; margin:0 auto; padding:32px 72px 0;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-copy { font-size:0.65rem; color:rgba(255,255,255,0.35); }

/* ============================================
   TOAST
============================================ */
.toast {
  position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--white); font-size:0.68rem; letter-spacing:0.12em;
  padding:16px 32px; opacity:0; transition:all 0.4s; z-index:9000; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================
   FADE IN
============================================ */
.fade-in { opacity:0; transform:translateY(18px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width:1024px) {
  header { padding:0 32px; }
  .breadcrumb { padding:18px 40px; }
  .art-header { padding:48px 40px 0; }
  .art-body-wrap { padding:0 40px; grid-template-columns:1fr; }
  .art-content { padding:40px 0 60px; border-right:none; }
  .art-sidebar { position:static; padding:0 0 60px; border-top:1px solid var(--light-gray); }
  .nav-foot-item { padding:32px 40px; }
  .footer-grid { grid-template-columns:1fr 1fr; padding:0 40px 60px; }
  .footer-bottom { padding:32px 40px 0; }
  .nav-center { display:none; }
  .art-main-title { font-size:2.4rem; }
  .art-hero-img { height:360px; }
}
@media (max-width:768px) {
  .breadcrumb { padding:14px 24px; }
  .art-header { padding:36px 24px 0; }
  .art-main-title { font-size:1.9rem; }
  .art-header-meta { flex-wrap:wrap; gap:16px; }
  .meta-sep { display:none; }
  .art-body-wrap { padding:0 24px; }
  .art-hero-img { height:260px; }
  .pull-quote { font-size:1.3rem; }
  .nav-foot-item { padding:24px; }
  .nav-foot-item:first-child,.nav-foot-item:last-child { border:none; border-bottom:1px solid var(--light-gray); text-align:left; }
  .art-nav-footer { grid-template-columns:1fr; }
  .nav-foot-item:last-child .nav-foot-dir { justify-content:flex-start; }
  .footer-grid { grid-template-columns:1fr; padding:0 24px 60px; }
  .footer-bottom { padding:24px 24px 0; flex-direction:column; gap:12px; }
}