/* ============================================================
   MAV — feuille de style bi-thème
   Thème : SOMBRE, définitif (décision du 12 août 2026).
   Le thème clair et son bouton de bascule ont été retirés des pages.
   Les règles ci-dessous marquées INACTIF sont conservées au cas où :
   pour les réactiver il faudrait remettre le bouton dans l'en-tête.
   ============================================================ */
:root{
  --nuit:#0a0a0c;
  --nuit-2:#121216;
  --ivoire:#efe9dc;
  --ivoire-faible:#b8b2a6;
  --lueur:#f4b860;
  --lueur-pale:#f7d9a0;
  --ligne:#2a2a30;
  --blanc:#f6f4ef;
  /* variables spécifiques au thème */
  --header-grad:linear-gradient(rgba(10,10,12,.55),rgba(10,10,12,0));
  --header-scrolled:rgba(10,10,12,.94);
  --hero-ph:radial-gradient(ellipse 60% 55% at 50% 40%,rgba(244,184,96,.18),transparent 70%),repeating-linear-gradient(45deg,#111114 0 12px,#0c0c0f 12px 24px);
  --hero-after:linear-gradient(rgba(10,10,12,.35),rgba(10,10,12,.12) 42%,rgba(10,10,12,.72));
  --mono-glow:drop-shadow(0 0 26px rgba(244,184,96,.4));
  --pagehero-after:linear-gradient(rgba(10,10,12,.55),rgba(10,10,12,.35),rgba(10,10,12,.75));
  --ph-stripes:repeating-linear-gradient(45deg,#151519 0 14px,#0f0f12 14px 28px);
}
/* INACTIF — thème clair, plus aucune page ne pose data-theme="clair" */
:root[data-theme="clair"]{
  --nuit:#f7f6f3;
  --nuit-2:#efece5;
  --ivoire:#1b1b19;
  --ivoire-faible:#6f6a62;
  --lueur:#1b1b19;
  --lueur-pale:#3a3a36;
  --ligne:#e3ded4;
  --blanc:#141412;
  --header-grad:linear-gradient(rgba(247,246,243,.92),rgba(247,246,243,0));
  --header-scrolled:rgba(247,246,243,.96);
  --hero-ph:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(0,0,0,.035),transparent 72%);
  --hero-after:none;
  --mono-glow:none;
  --pagehero-after:linear-gradient(rgba(247,246,243,.15),rgba(247,246,243,.05),rgba(247,246,243,.3));
  --ph-stripes:repeating-linear-gradient(45deg,#e9e5dc 0 14px,#e2ddd2 14px 28px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--nuit);color:var(--ivoire);font-family:'Josefin Sans',sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s ease,color .5s ease}
h1,h2,h3,.display{font-family:'Cormorant',serif;font-weight:400;line-height:1.12}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.mono{width:auto;display:inline-block}

/* ---- header ---- */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;background:var(--header-grad);transition:background .4s}
header.scrolled{background:var(--header-scrolled);border-bottom:1px solid var(--ligne)}
.logo-mark{display:inline-flex;align-items:center}
.logo-mark .mono{height:30px;color:var(--blanc);transition:color .3s}
.logo-mark:hover .mono{color:var(--lueur)}
.head-actions{display:flex;align-items:center;gap:24px}
/* INACTIF — bouton de bascule retiré des pages */
.theme-toggle{background:none;border:1px solid var(--ligne);color:var(--ivoire-faible);font-family:inherit;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 15px;border-radius:100px;cursor:pointer;transition:all .3s;white-space:nowrap}
.theme-toggle:hover{border-color:var(--lueur);color:var(--lueur)}
nav ul{display:flex;gap:34px;list-style:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
nav a{color:var(--ivoire-faible);transition:color .3s}
nav a:hover,nav a.actif{color:var(--lueur)}
.burger{display:none;background:none;border:0;color:var(--ivoire);font-size:1.5rem;cursor:pointer;z-index:60}

/* ---- hero immersif ---- */
.hero{position:relative;height:100vh;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero video.bg,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .placeholder-bg{position:absolute;inset:0;z-index:0;background:var(--hero-ph)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:var(--hero-after)}
.hero .inner{position:relative;z-index:2;padding:0 24px}
.hero .mono-hero{height:118px;color:var(--lueur);filter:var(--mono-glow);margin-bottom:1.5rem}
.hero .eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--lueur);font-weight:400}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);color:var(--blanc);letter-spacing:.02em;margin:.5rem 0 0}
.hero h1 em{font-style:italic;color:var(--lueur-pale)}
.hero .sub{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ivoire-faible);margin-top:1.3rem}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ivoire-faible);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.6}50%{transform:translateX(-50%) translateY(6px);opacity:1}}

/* ---- blocs univers (photos plein cadre, texte clair posé dessus dans les 2 thèmes) ---- */
.univers{position:relative;height:92vh;min-height:560px;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden}
.univers .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.4s ease}
.univers:hover .bg{transform:scale(1.045)}
.univers .placeholder{position:absolute;inset:0;z-index:0;background:var(--ph-stripes);display:flex;align-items:center;justify-content:center}
.univers .placeholder span{color:var(--ivoire-faible);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.univers::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(10,10,12,0) 28%,rgba(10,10,12,.55) 62%,rgba(10,10,12,.9))}
.univers .cap{position:relative;z-index:2;padding:0 24px 9vh;max-width:640px}
.univers .eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:#f4b860;font-weight:400}
.univers h2{font-size:clamp(2rem,5vw,3.4rem);color:#fff;margin:.5rem 0 .4rem}
.univers p{color:#f4f0e9;opacity:.95;max-width:46ch;margin:0 auto 1.8rem}
.btn{display:inline-block;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.72);padding:14px 34px;transition:all .3s}
.btn:hover{border-color:#fff;background:rgba(255,255,255,.14)}

/* ---- sections texte génériques ---- */
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.section{padding:110px 0;position:relative}
.psaume{font-family:'Cormorant',serif;font-style:italic;font-weight:300;color:var(--lueur-pale);opacity:.9}

/* rencontre / contact */
.rencontre{text-align:center;border-top:1px solid var(--ligne)}
.rencontre .eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--lueur)}
.rencontre h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--blanc);margin:.5rem 0 1rem}
.rencontre>.wrap>p{color:var(--ivoire-faible);max-width:52ch;margin:0 auto}
.lieux{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:760px;margin:48px auto 0}
.lieu{border:1px solid var(--ligne);padding:38px 30px;transition:border-color .4s}
.lieu:hover{border-color:var(--lueur)}
.lieu .ville{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--lueur);margin-bottom:1rem}
.lieu h3{font-size:1.7rem;color:var(--blanc);margin-bottom:.4rem}
.lieu p{color:var(--ivoire-faible);font-size:.95rem}
.contact-line{margin-top:52px;font-size:1.05rem;letter-spacing:.04em}
.contact-line a{color:var(--lueur-pale);border-bottom:1px solid var(--ligne);padding-bottom:2px}
.contact-line a:hover{border-color:var(--lueur)}

/* footer */
footer{background:var(--nuit-2);border-top:1px solid var(--ligne);padding:60px 0 44px;text-align:center}
footer .mono{height:56px;color:var(--ivoire);margin-bottom:1rem}
footer .psaume{font-size:1.15rem;margin-bottom:1.4rem;display:block}
footer .fine{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-faible);opacity:.7}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:860px){
  header{padding:16px 20px}
  .head-actions{gap:14px}
  .theme-toggle{font-size:.58rem;padding:7px 12px}
  nav ul{position:fixed;inset:0;background:var(--nuit);flex-direction:column;align-items:center;justify-content:center;gap:30px;font-size:1.1rem;transform:translateX(100%);transition:transform .4s}
  nav ul.open{transform:none}
  .burger{display:block}
  .hero,.univers{height:88vh}
  .lieux{grid-template-columns:1fr}
  .section{padding:80px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ===== page intérieure : en-tête de section ===== */
.page-hero{position:relative;min-height:64vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:140px 24px 80px;overflow:hidden}
.page-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero .placeholder-bg{position:absolute;inset:0;z-index:0;background:var(--hero-ph)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:var(--pagehero-after)}
.page-hero .inner{position:relative;z-index:2;max-width:720px}
.page-hero .eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--lueur)}
.page-hero h1{font-size:clamp(2.4rem,6vw,4rem);color:var(--blanc);margin:.5rem 0 1rem}
.page-hero p{color:var(--ivoire);opacity:.9}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center}
.section-head .eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--lueur)}
.section-head h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--blanc);margin:.5rem 0 1rem}
.section-head p{color:var(--ivoire-faible)}
.prose{max-width:680px;margin:0 auto;color:var(--ivoire)}
.prose p{margin-bottom:1.2rem}
.prose .lead{font-family:'Cormorant',serif;font-size:1.5rem;font-style:italic;color:var(--lueur-pale);line-height:1.4}

/* ===== parcours pièce par pièce ===== */
.parcours{max-width:1080px;margin:0 auto 56px}
.parcours .salle{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lueur)}
.parcours .mot{font-family:'Cormorant',serif;font-size:1.55rem;color:var(--lueur-pale);line-height:1.1;margin:.4rem 0 .35rem}
.parcours .desc{color:var(--ivoire-faible);font-size:1rem;line-height:1.65}

/* toutes les rangées partagent la même grille : le texte tombe toujours
   sur la même verticale, avec ou sans photo */
.parcours .item{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  padding:38px 0;border-bottom:1px solid var(--ligne)}
/* rangée sans photo : la colonne de gauche ne porte que le nom de la salle,
   calé contre la gouttière */
.parcours .item:not(.has-photo) .salle{text-align:right}

/* rangée avec photo : image bridée en hauteur et calée contre la gouttière,
   pour ne pas laisser de grand vide noir en face du texte */
.parcours .item.has-photo{padding:40px 0;gap:44px}
.parcours .item.has-photo figure{margin:0;overflow:hidden;border:1px solid var(--ligne);
  aspect-ratio:4/5;width:100%;max-width:340px;justify-self:end;background:var(--ph-stripes)}
.parcours .item.has-photo.inverse figure{justify-self:start}
/* ligne d'attributs sous la description */
.parcours .attr{margin-top:.9rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivoire-faible);opacity:.7}
.parcours .item.has-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.parcours .item.has-photo:hover img{transform:scale(1.04)}
.parcours .item.has-photo .salle{padding-top:0}
.parcours .item.has-photo .mot{font-size:2.1rem}
.parcours .item.has-photo .desc{font-size:1.05rem}
/* alternance : une rangée sur deux, la photo passe à droite */
.parcours .item.has-photo.inverse figure{order:2}

@media(max-width:860px){
  .parcours .item{grid-template-columns:1fr;gap:10px;padding:30px 2px;align-items:start}
  .parcours .item:not(.has-photo) .salle{text-align:left}
  .parcours .item.has-photo{gap:26px;padding:40px 0}
  .parcours .item.has-photo.inverse figure{order:0}
  .parcours .item.has-photo figure{aspect-ratio:3/2}
  .parcours .item.has-photo .mot{font-size:1.7rem}
}

/* photo d'illustration insérée dans une section de texte */
.fig-texte{max-width:820px;margin:52px auto 0}
.fig-texte img{width:100%;border:1px solid var(--ligne)}
.fig-texte figcaption{margin-top:14px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivoire-faible);opacity:.6;text-align:center}

/* ===== galerie photos musée ===== */
.musee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.musee-grid figure{position:relative;overflow:hidden;border:1px solid var(--ligne);aspect-ratio:3/4;background:var(--ph-stripes)}
.musee-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.musee-grid figure:hover img{transform:scale(1.05)}
.musee-grid .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ivoire-faible);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:1rem}
@media(max-width:860px){.musee-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== carrousel Joséphine (défilement horizontal) ===== */
.jo{position:relative}
.jo .photo{position:relative;aspect-ratio:3/4;border:1px solid var(--ligne);overflow:hidden;transition:border-color .4s}
.jo:hover .photo{border-color:var(--lueur)}
.jo .photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.jo:hover .photo img{transform:scale(1.04)}
.jo .cap{margin-top:14px;text-align:center}
.jo .mot{font-family:'Cormorant',serif;font-size:1.5rem;letter-spacing:.1em;color:var(--lueur-pale)}
.jo .titre{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-faible);margin-top:2px}
.jo .an{font-size:.72rem;color:var(--ivoire-faible);opacity:.6}
.jo-carousel{position:relative;margin:0 -32px}
.jo-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 32px 24px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.jo-track::-webkit-scrollbar{height:2px}
.jo-track::-webkit-scrollbar-thumb{background:var(--ligne)}
.jo-track .jo{flex:0 0 300px;scroll-snap-align:start}
.jo-nav{position:absolute;top:36%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;background:var(--header-scrolled);border:1px solid var(--ligne);color:var(--ivoire);font-family:'Cormorant',serif;font-size:2rem;line-height:0;cursor:pointer;transition:all .3s;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.jo-nav:hover{border-color:var(--lueur);color:var(--lueur)}
.jo-nav.prev{left:24px}
.jo-nav.next{right:24px}
.jo-hint{text-align:right;padding:0 32px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivoire-faible);opacity:.55}
@media(max-width:860px){.jo-nav{display:none}.jo-track .jo{flex:0 0 78vw}}

/* hero de page AVEC photo : voile sombre + texte clair dans les 2 thèmes */
.page-hero.has-photo::after{background:linear-gradient(rgba(10,10,12,.58),rgba(10,10,12,.48),rgba(10,10,12,.72))}
.page-hero.has-photo .eyebrow{color:#f4b860}
.page-hero.has-photo h1{color:#fff}
.page-hero.has-photo p{color:#f4f0e9}

/* ===== page légale ===== */
.legal{max-width:780px;margin:0 auto;color:var(--ivoire)}
.legal h2{font-size:1.7rem;color:var(--blanc);margin:2.6rem 0 .8rem}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-bottom:1rem}
.legal ul{margin:0 0 1rem 1.2rem;color:var(--ivoire)}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--lueur-pale);border-bottom:1px solid var(--ligne)}
.legal a:hover{border-color:var(--lueur)}
.legal .maj{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-faible);opacity:.7}
.legal .todo{display:inline-block;background:rgba(244,184,96,.1);border-left:2px solid var(--lueur);padding:1px 10px;color:var(--lueur-pale);font-style:italic}
footer .fine a{border-bottom:1px solid var(--ligne)}
footer .fine a:hover{border-color:var(--lueur);color:var(--lueur)}
