:root{
  --paper:#f4efe5; --paper2:#fffaf0; --ink:#373130; --muted:#6b6761;
  --coral:#e89786; --lagoon:#8bc9bd; --green:#7ca68a; --blue:#365f72;
  --line:rgba(55,49,48,.14); --shadow:0 16px 45px rgba(55,49,48,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;line-height:1.68}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;line-height:1.08;margin:0 0 1rem}
h1{font-size:clamp(2.6rem,7vw,5.7rem)}
h2{font-size:clamp(2rem,5vw,3.5rem)}
h3{font-size:1.55rem}
p{margin:.25rem 0 1rem}
.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,3rem);background:rgba(244,239,229,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;gap:.35rem;flex-wrap:wrap}
.nav a{text-decoration:none;padding:.45rem .7rem;border-radius:999px;font-weight:750}
.nav a:hover,.nav a.active{background:rgba(139,201,189,.24)}
.hero{position:relative;min-height:68vh;display:grid;align-items:end;color:white;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(55,49,48,.86),rgba(55,49,48,.22),rgba(55,49,48,.80));z-index:1}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-content{position:relative;z-index:2;max-width:1100px;padding:clamp(2rem,7vw,5rem)}
.eyebrow{color:var(--coral);text-transform:uppercase;letter-spacing:.18em;font-size:.84rem;font-weight:900}
.subtitle{max-width:850px;color:#fff7ef;font-size:1.17rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}
.button{display:inline-flex;padding:.85rem 1.15rem;border-radius:999px;text-decoration:none;font-weight:850}
.primary{background:var(--coral);color:var(--ink)}
.ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff}
.soft{background:rgba(139,201,189,.22);border:1px solid var(--line)}
.section{padding:clamp(2.4rem,6vw,5rem) clamp(1.1rem,5vw,4rem)}
.center{text-align:center}.narrow{max-width:960px;margin-inline:auto}
.panel,.card,.chapter,.gallery-card,.plate,.note{background:var(--paper2);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.panel{padding:1.25rem}
.notice{border-left:6px solid var(--coral);background:#fff3e6;padding:1.15rem;border-radius:18px}
.cover-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:1rem;align-items:end}
.card{overflow:hidden;text-decoration:none}.card img{width:100%;object-fit:cover}.card.main img{aspect-ratio:16/7}.card.small img{aspect-ratio:2/3}.card .label{padding:.85rem;font-weight:800}
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.route .card img{aspect-ratio:2/3}.route .body{padding:1rem}
.two{display:grid;grid-template-columns:360px 1fr;gap:1.4rem;align-items:start}.two img{border-radius:20px;box-shadow:var(--shadow)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.gallery-card{overflow:hidden}.gallery-card img{width:100%;aspect-ratio:1/1;object-fit:cover}.gallery-card figcaption{padding:.75rem;color:var(--muted)}
.chapter{margin:1rem auto;max-width:1120px;overflow:hidden}
.chapter summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;background:linear-gradient(90deg,rgba(139,201,189,.22),rgba(232,151,134,.10));font-weight:900;border-bottom:1px solid var(--line)}
.chapter summary::-webkit-details-marker{display:none}
.chapter summary small{display:block;color:var(--muted);font-weight:650;margin-top:.25rem}
.reading-flow{padding:1.5rem clamp(1rem,4vw,3rem);max-width:910px;margin:auto;font-family:Georgia,"Times New Roman",serif;font-size:1.06rem;line-height:1.8}
.reading-flow h1{font-size:2rem}.reading-flow h2{font-size:1.55rem}.reading-flow h3{font-size:1.25rem;color:var(--blue)}
.reading-flow blockquote{border-left:4px solid var(--coral);padding-left:1rem;color:var(--muted)}
.plate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.plate{padding:1rem}.plate img{border-radius:16px}.plate.wide{grid-column:1/-1}.plate figcaption{color:var(--muted);padding-top:.7rem}
.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.note{padding:1.15rem}.priority{border-left:6px solid var(--coral)}
.footer{background:var(--ink);color:var(--paper);padding:2rem;text-align:center}.small{opacity:.7}
@media(max-width:1100px){.cover-grid{grid-template-columns:repeat(2,1fr)}.cover-grid .main{grid-column:1/-1}.route,.gallery,.report-grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}}
@media(max-width:760px){.nav{display:none}.route,.gallery,.plate-grid,.report-grid{grid-template-columns:1fr}}


/* =========================================================
   COFFRET INTERACTIF SIMPLE — fausse 3D légère
   ========================================================= */

.interactive-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.coffret-stage{
  perspective:1200px;
  min-height:520px;
  display:grid;
  place-items:center;
  position:relative;
}
.coffret-shadow{
  position:absolute;
  width:min(680px,88vw);
  height:80px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(55,49,48,.22),rgba(55,49,48,0) 65%);
  bottom:22px;
  filter:blur(6px);
}
.coffret-object{
  position:relative;
  width:min(620px,92vw);
  height:390px;
  transform-style:preserve-3d;
  transform:rotateX(7deg) rotateY(-18deg);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.coffret-stage:hover .coffret-object{
  transform:rotateX(5deg) rotateY(-10deg) translateY(-5px);
}
.slipcase{
  position:absolute;
  inset:38px 48px 26px 36px;
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%),
    url("assets/cover_coffret.jpg");
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 32px 70px rgba(55,49,48,.25);
  transform:translateZ(-38px);
  overflow:hidden;
}
.slipcase:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(55,49,48,.72),rgba(55,49,48,.12),rgba(55,49,48,.48));
}
.slipcase-title{
  position:absolute;
  z-index:2;
  left:26px;
  bottom:22px;
  color:white;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.65rem;
  line-height:1.05;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.slipcase-edge{
  position:absolute;
  top:57px;
  right:34px;
  width:54px;
  height:303px;
  border-radius:0 22px 22px 0;
  background:linear-gradient(90deg,rgba(55,49,48,.25),rgba(55,49,48,.85));
  transform:skewY(-4deg) translateZ(18px);
  box-shadow:inset 12px 0 20px rgba(255,255,255,.08);
}
.volume-spine{
  position:absolute;
  top:72px;
  width:88px;
  height:276px;
  border:0;
  border-radius:14px;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  background:var(--paper2);
  box-shadow:0 18px 42px rgba(55,49,48,.25);
  transform-style:preserve-3d;
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .55s ease,
    filter .55s ease;
}
.volume-spine img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.volume-spine span{
  position:absolute;
  inset:auto 0 0 0;
  padding:.45rem .35rem;
  color:white;
  background:linear-gradient(180deg,rgba(55,49,48,0),rgba(55,49,48,.88));
  font-size:.82rem;
  font-weight:900;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.volume-spine:nth-of-type(1){left:105px;transform:translateZ(32px) rotateY(-4deg)}
.volume-spine:nth-of-type(2){left:201px;transform:translateZ(44px) rotateY(-2deg)}
.volume-spine:nth-of-type(3){left:297px;transform:translateZ(56px) rotateY(0deg)}
.volume-spine:nth-of-type(4){left:393px;transform:translateZ(68px) rotateY(2deg)}
.volume-spine:hover,
.volume-spine:focus-visible{
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 30px 65px rgba(55,49,48,.34);
  outline:3px solid rgba(232,151,134,.55);
  outline-offset:4px;
}
.volume-spine:nth-of-type(1):hover,
.volume-spine:nth-of-type(1):focus-visible{transform:translateZ(140px) translateX(-18px) translateY(-12px) rotateY(-10deg)}
.volume-spine:nth-of-type(2):hover,
.volume-spine:nth-of-type(2):focus-visible{transform:translateZ(150px) translateX(-8px) translateY(-16px) rotateY(-7deg)}
.volume-spine:nth-of-type(3):hover,
.volume-spine:nth-of-type(3):focus-visible{transform:translateZ(160px) translateX(8px) translateY(-16px) rotateY(7deg)}
.volume-spine:nth-of-type(4):hover,
.volume-spine:nth-of-type(4):focus-visible{transform:translateZ(170px) translateX(18px) translateY(-12px) rotateY(10deg)}
.volume-spine.is-opening{
  transform:translateZ(260px) translateX(0) translateY(-18px) rotateY(0deg) scale(1.08) !important;
  z-index:20;
}
.coffret-hint{
  max-width:660px;
  margin:1.2rem auto 0;
  text-align:center;
  color:var(--muted);
}
.quick-access{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.8rem;
  margin-top:1.2rem;
}
.quick-access a{
  text-decoration:none;
  padding:.9rem 1rem;
  border-radius:18px;
  background:rgba(139,201,189,.22);
  border:1px solid var(--line);
  font-weight:850;
  text-align:center;
}
.experience-note{
  margin-top:1rem;
  color:var(--muted);
}
@media(max-width:1100px){
  .interactive-intro{grid-template-columns:1fr}
  .coffret-stage{min-height:460px}
}
@media(max-width:720px){
  .coffret-object{
    width:360px;
    height:300px;
    transform:rotateX(5deg) rotateY(-10deg) scale(.92);
  }
  .coffret-stage{min-height:360px;overflow:hidden}
  .slipcase{inset:42px 36px 24px 20px}
  .slipcase-edge{right:22px;top:57px;height:218px;width:42px}
  .slipcase-title{font-size:1.15rem;left:18px;bottom:18px}
  .volume-spine{top:70px;width:56px;height:194px;border-radius:10px}
  .volume-spine span{font-size:.65rem}
  .volume-spine:nth-of-type(1){left:58px}
  .volume-spine:nth-of-type(2){left:121px}
  .volume-spine:nth-of-type(3){left:184px}
  .volume-spine:nth-of-type(4){left:247px}
  .quick-access{grid-template-columns:repeat(2,1fr)}
}


/* ===== Version partage épurée ===== */

.visual-intro{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1.2rem;
}
.visual-intro img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.visual-banner{
  position:relative;
  min-height:260px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  margin:1.2rem 0 1.6rem;
  background:#ddd;
}
.visual-banner img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.visual-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(55,49,48,.62),rgba(55,49,48,.12),rgba(55,49,48,.42));
}
.visual-banner .overlay-title{
  position:absolute;
  z-index:2;
  left:1.2rem;
  bottom:1rem;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;
  line-height:1.06;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.visual-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin:1.1rem 0 1.6rem;
}
.visual-strip img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:16px;
  box-shadow:var(--shadow);
}
@media(max-width:900px){
  .visual-intro{grid-template-columns:1fr}
  .visual-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .visual-strip{grid-template-columns:1fr}
}


/* ===== Accueil éditorial final ===== */

.home-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.home-intro .lead{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.28rem;
  line-height:1.72;
}
.home-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}
.home-card{
  background:var(--paper2);
  border:1px solid var(--line);
  border-radius:24px;
  padding:1.15rem;
  box-shadow:var(--shadow);
}
.home-card h3{
  margin-bottom:.55rem;
}
.cahier-callout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:1.4rem;
  align-items:center;
  background:linear-gradient(135deg,rgba(139,201,189,.18),rgba(232,151,134,.12)),var(--paper2);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.cahier-callout img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.cahier-callout .content{
  padding:1.4rem;
}
.clean-footer-note{
  max-width:900px;
  margin:auto;
  opacity:.78;
}
@media(max-width:950px){
  .home-intro{grid-template-columns:1fr}
  .home-cards{grid-template-columns:1fr}
  .cahier-callout{grid-template-columns:1fr}
  .cahier-callout img{max-height:420px}
}