/* ============================================
   VARIABLES (identiques au site principal)
============================================ */
: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; }
ul   { list-style:none; }
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; align-items:center;
}
.nav-center a {
  font-size:0.65rem; font-weight:400; 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); transition:all var(--transition); }


/* ============================================
   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;
}
/* ============================================
   HERO DU JOURNAL
============================================ */
.journal-hero {
  padding-top:72px;
  background:var(--off-white);
  border-bottom:1px solid var(--light-gray);
}
.journal-hero-inner {
  max-width:1400px; margin:0 auto; padding:80px 72px 64px;
  display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:60px;
}
.section-label {
  font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--mid-gray); margin-bottom:20px;
}
.hero-title {
  font-family:var(--font-serif); font-size:3.6rem; font-weight:300;
  line-height:1.1; letter-spacing:0.01em;
}
.hero-title em { font-style:italic; }
.hero-desc {
  font-size:0.82rem; line-height:2; color:var(--dark-gray); max-width:400px;
  align-self:flex-end; padding-bottom:8px;
}

/* ============================================
   FILTRES
============================================ */
.filter-bar {
  max-width:1400px; margin:0 auto; padding:0 72px;
  display:flex; gap:0; border-bottom:1px solid var(--light-gray);
  overflow-x:auto; scrollbar-width:none;
}
.filter-bar::-webkit-scrollbar { display:none; }
.filter-tab {
  font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase;
  padding:18px 28px; color:var(--dark-gray); white-space:nowrap;
  border-bottom:2px solid transparent; transition:all var(--transition);
  background:transparent;
}
.filter-tab:hover { color:var(--ink); }
.filter-tab.active { color:var(--ink); border-bottom-color:var(--ink); }

/* ============================================
   ARTICLE À LA UNE
============================================ */
.featured-wrap {
  max-width:1400px; margin:0 auto; padding:0 72px;
  border-bottom:1px solid var(--light-gray);
}
.featured-card {
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0;
}
.featured-img-wrap {
  height:480px; overflow:hidden; position:relative;
}
.featured-img-wrap img { transition:transform 0.8s var(--transition); }
.featured-card:hover .featured-img-wrap img { transform:scale(1.04); }

.featured-body {
  padding:52px 56px; display:flex; flex-direction:column;
  justify-content:space-between; background:var(--white);
}
.art-cat {
  font-size:0.58rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.featured-title {
  font-family:var(--font-serif); font-size:2.2rem; font-weight:400;
  line-height:1.25; margin-bottom:20px; letter-spacing:0.01em;
}
.featured-excerpt {
  font-size:0.78rem; line-height:2; color:var(--dark-gray);
  margin-bottom:32px; flex:1;
}
.featured-footer {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--light-gray); padding-top:24px;
}
.art-meta { font-size:0.62rem; color:var(--mid-gray); letter-spacing:0.08em; }
.btn-lire {
  font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); padding-bottom:3px;
  border-bottom:1px solid var(--ink); transition:all var(--transition);
}
.btn-lire:hover { color:var(--accent); border-color:var(--accent); padding-left:6px; }

/* ============================================
   GRILLE ARTICLES
============================================ */
.articles-section {
  max-width:1400px; margin:0 auto; padding:0 72px;
}
.articles-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--light-gray);
}
.art-card {
  border-right:1px solid var(--light-gray);
  border-bottom:1px solid var(--light-gray);
  cursor:pointer; transition:background var(--transition);
}
.art-card:hover { background:var(--off-white); }
.art-card-img {
  height:220px; overflow:hidden;
  background:var(--light-gray);
}
.art-card-img img { transition:transform 0.7s var(--transition); }
.art-card:hover .art-card-img img { transform:scale(1.05); }
.art-card-body { padding:24px 28px 28px; }
.art-card-title {
  font-family:var(--font-serif); font-size:1.3rem; font-weight:400;
  line-height:1.3; margin:10px 0 12px;
}
.art-card-excerpt {
  font-size:0.72rem; line-height:1.9; color:var(--dark-gray);
  margin-bottom:20px; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.art-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--light-gray); padding-top:16px;
}
.read-time {
  font-size:0.58rem; letter-spacing:0.15em; color:var(--mid-gray);
  display:flex; align-items:center; gap:8px;
}
.read-time::before { content:''; display:block; width:20px; height:1px; background:var(--mid-gray); }

/* ============================================
   PAGINATION
============================================ */
.pagination {
  max-width:1400px; margin:0 auto; padding:56px 72px;
  display:flex; align-items:center; gap:4px;
}
.pg-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; border:1px solid var(--light-gray);
  color:var(--dark-gray); background:transparent; transition:all var(--transition);
}
.pg-btn:hover { border-color:var(--ink); color:var(--ink); }
.pg-btn.active { background:var(--ink); color:var(--white); border-color:var(--ink); }
.pg-arrow { font-size:1rem; }
.pg-sep { padding:0 8px; color:var(--mid-gray); font-size:0.8rem; }

/* ============================================
   NEWSLETTER BAND
============================================ */
.newsletter-band {
  background:var(--ink); color:var(--white);
  padding:64px 0;
}
.newsletter-inner {
  max-width:1400px; margin:0 auto; padding:0 72px;
  display:flex; align-items:center; justify-content:space-between; gap:60px;
}
.newsletter-text { font-family:var(--font-serif); font-size:2rem; font-weight:300; line-height:1.3; }
.newsletter-text em { font-style:italic; color:var(--mid-gray); }
.newsletter-form { display:flex; gap:0; flex:0 0 400px; }
.newsletter-input {
  flex:1; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.3);
  color:var(--white); font-family:var(--font-sans); font-size:0.78rem;
  padding:12px 0; outline:none; transition:border-color var(--transition);
}
.newsletter-input::placeholder { color:rgba(255,255,255,0.4); font-size:0.68rem; letter-spacing:0.1em; }
.newsletter-input:focus { border-bottom-color:var(--white); }
.newsletter-submit {
  font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--white); padding:12px 0 12px 28px;
  border-bottom:1px solid rgba(255,255,255,0.3);
  transition:all var(--transition); background:transparent; white-space:nowrap;
}
.newsletter-submit:hover { color:var(--mid-gray); }

/* ============================================
   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-brand-text { font-size:0.72rem; line-height:2; max-width:300px; }
footer .logo { color:var(--white); margin-bottom:24px; }
.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(20px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ============================================
   ARTICLES CACHÉS (filtre)
============================================ */
.art-card.hidden { display:none; }

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width:1024px) {
  header { padding:0 32px; }
  .journal-hero-inner { padding:60px 40px; grid-template-columns:1fr; gap:24px; }
  .filter-bar { padding:0 40px; }
  .featured-wrap { padding:0 40px; }
  .featured-card { grid-template-columns:1fr; }
  .featured-img-wrap { height:300px; }
  .featured-body { padding:36px 40px; }
  .articles-section { padding:0 40px; }
  .articles-grid { grid-template-columns:repeat(2,1fr); }
  .pagination { padding:40px; }
  .newsletter-inner { flex-direction:column; padding:0 40px; gap:32px; }
  .newsletter-form { flex:none; width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; padding:0 40px 60px; }
  .footer-bottom { padding:32px 40px 0; }
  .nav-center { display:none; }
}
@media (max-width:768px) {
  .journal-hero-inner { padding:48px 24px; }
  .hero-title { font-size:2.4rem; }
  .filter-bar { padding:0 24px; }
  .featured-wrap { padding:0 24px; }
  .featured-body { padding:28px 24px; }
  .articles-section { padding:0 24px; }
  .articles-grid { grid-template-columns:1fr; }
  .pagination { padding:32px 24px; }
  .newsletter-inner { padding:0 24px; }
  .newsletter-text { font-size:1.6rem; }
  .footer-grid { grid-template-columns:1fr; padding:0 24px 60px; }
  .footer-bottom { padding:24px 24px 0; flex-direction:column; gap:16px; text-align:center; }
}