:root{--bg:#13090d;--panel:#1c0e14;--text:#f1e4d6;--muted:#bea99d;--gold:#d6b47d;--line:rgba(214,180,125,.28);--red:#862d3c;--display:'Cormorant Garamond',Georgia,serif;--body:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.8;overflow-x:hidden}body[data-world="secret"]{--bg:#090b0e;--panel:#101318;--text:#d8dce0;--muted:#929ca4;--gold:#b3b9c0;--line:rgba(177,190,201,.2);--red:#8f2733}button,input{font:inherit}button{cursor:pointer}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}::selection{background:#913849;color:#fff}
.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E")}.curtain{position:absolute;top:0;height:760px;width:12vw;max-width:170px;pointer-events:none;z-index:2;opacity:.45;background:repeating-linear-gradient(90deg,#24070f 0,#541525 16%,#2b0b17 31%,#65182b 49%,#260a15 68%);mask-image:linear-gradient(#000 0%,transparent 100%)}.curtain-left{left:0}.curtain-right{right:0;transform:scaleX(-1)}body[data-world="secret"] .curtain{opacity:0}
.masthead{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,90px);border-bottom:1px solid var(--line);position:relative;z-index:5;background:rgba(11,8,11,.72)}.monogram{font:600 31px var(--display);text-decoration:none;letter-spacing:-2px}.monogram span{font:12px var(--body);color:var(--gold);margin-left:4px}.masthead-center,.status{font-size:9px;letter-spacing:2.2px;font-weight:700}.masthead-center span{margin:0 16px;color:var(--gold)}.status{display:flex;gap:10px;align-items:center;color:var(--muted)}.status-dot{height:6px;width:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.hero{position:relative;min-height:690px;max-width:1320px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding:75px clamp(26px,8vw,130px) 105px;gap:55px}.hero-halo{position:absolute;inset:4% 0 0;background:radial-gradient(ellipse at 65% 42%,rgba(132,38,61,.25),transparent 55%);pointer-events:none}.hero-copy{z-index:1}.eyebrow,.chapter-kicker,.threshold-top{color:var(--gold);font-size:10px;letter-spacing:3.2px;font-weight:700}.eyebrow span{margin:0 10px}.hero-pretitle,.secret-overtitle{font:italic 25px var(--display);color:var(--muted);margin:30px 0 0}.hero h1,.secret-hero h1{font:500 clamp(74px,9vw,140px)/.83 var(--display);letter-spacing:-4px;margin:16px 0 25px}.hero h1 em,.secret-hero h1 em{display:block;color:var(--gold);font-weight:400}.hero-rule{height:1px;background:var(--line);width:70%;margin:30px 0;position:relative}.hero-rule span{position:absolute;right:0;top:-14px;color:var(--gold)}.hero-quote{font:italic clamp(21px,2.2vw,29px)/1.35 var(--display);max-width:570px}.text-link{display:inline-flex;gap:30px;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:2.4px;border-bottom:1px solid var(--gold);padding-bottom:12px;margin-top:30px}.text-link span{font-size:20px;line-height:1}.portrait-frame{position:relative;z-index:1;max-width:390px;width:100%;aspect-ratio:3/4;border:1px solid var(--gold);padding:12px;box-shadow:0 0 0 7px rgba(214,180,125,.04),0 20px 90px #0009}.portrait-frame:before,.portrait-frame:after{content:'✦';position:absolute;color:var(--gold);font-size:17px;top:-17px}.portrait-frame:before{left:-8px}.portrait-frame:after{right:-8px}.portrait-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;background:linear-gradient(150deg,#45212a,#13090d)}.portrait-ornament{position:absolute;top:19px;left:23px;z-index:1;color:var(--gold)}.portrait-label{position:absolute;bottom:22px;left:25px;right:25px;text-align:center;letter-spacing:3px;font-size:9px;background:#10070ca8;padding:10px}.hero-bottom{position:absolute;bottom:35px;left:0;right:0;text-align:center;color:var(--muted);font-size:9px;letter-spacing:3px}.hero-bottom span{padding:0 20px;color:var(--gold)}
.editorial{border-block:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:18px clamp(25px,8vw,140px);font-size:9px;letter-spacing:2.3px;color:var(--muted)}.editorial span:nth-child(2){color:var(--gold)}.chapters{max-width:930px;margin:0 auto;padding:40px 28px 90px}.chapter{padding:75px 0;border-bottom:1px solid var(--line)}.chapter-kicker{margin-bottom:12px}.chapter h2,.threshold h2,.return-section h2{font:500 clamp(54px,6vw,82px)/1 var(--display);margin:0 0 35px}.chapter h2:after{content:'✦';font:16px var(--body);color:var(--gold);margin-left:20px;vertical-align:middle}.prose{color:var(--muted);font-size:15px;line-height:2.05}.prose p{margin:0 0 23px}.prose table{border-collapse:collapse;width:100%;max-width:620px;margin:20px 0 34px}.prose th{display:none}.prose td{border-bottom:1px solid var(--line);padding:10px 14px}.prose td:first-child{width:34%;color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}.prose h2{font:600 20px var(--display);letter-spacing:3px;margin:38px 0 12px;color:var(--gold)}.prose h2:after{display:none}.prose h2+p{margin-top:0}.prose h2~p{margin-bottom:12px}
.threshold{text-align:center;padding:95px 24px 125px;background:radial-gradient(ellipse at center,rgba(112,33,51,.22),transparent 65%)}.threshold h2{max-width:700px;margin:24px auto}.threshold h2 em,.return-section h2 em{color:var(--gold);font-weight:400}.threshold>p{color:var(--muted);font:italic 24px var(--display)}.mirror{display:block;margin:65px auto 35px;width:210px;height:300px;border:0;background:linear-gradient(120deg,#8d6a43,#e6c98d,#6c452b);border-radius:50% 50% 6px 6px / 40% 40% 6px 6px;padding:9px;box-shadow:0 0 0 4px #25131a,0 0 0 5px #8d6a43,0 35px 80px #000a;transition:transform .5s,box-shadow .5s}.mirror:hover{transform:translateY(-9px) scale(1.03);box-shadow:0 0 0 4px #25131a,0 0 0 5px #d9bd83,0 30px 100px #9b344955}.mirror-inner{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:55px;background:linear-gradient(140deg,#1b202c,#4d4e59 45%,#161521 48%,#38202c 78%,#090d17);border-radius:50% 50% 3px 3px / 40% 40% 3px 3px;border:1px solid #c9ad85}.mirror-raven{font:60px var(--display);color:#d5d1d1;text-shadow:0 0 20px #fff7}.mirror-caption{font-size:9px;letter-spacing:2px;color:#e6d2bb}.threshold .threshold-warning{font-size:18px}
.secret-hero{min-height:650px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:90px 25px;position:relative;background:radial-gradient(ellipse at 50% 30%,rgba(114,21,34,.22),transparent 58%),repeating-linear-gradient(120deg,transparent 0 140px,rgba(255,255,255,.012) 141px 142px)}.secret-sigil{font-size:50px;color:#9c3644;margin-bottom:25px}.secret-hero h1{font-size:clamp(65px,10vw,140px);margin:20px 0}.secret-hero .hero-quote{max-width:680px}.secret-divider{letter-spacing:20px;color:#88303d}.world-secret .chapter h2:after{content:'◆';color:#973440}.world-secret .chapter-kicker{color:#9e5360}.world-secret .chapters{position:relative}.world-secret .chapters:before{content:'CONFIDENTIEL';position:absolute;right:-80px;top:160px;transform:rotate(90deg);font-size:10px;letter-spacing:6px;color:#77303b}.return-section{text-align:center;padding:120px 25px}.return-section h2{margin:30px 0}.return-button{background:none;border:1px solid var(--gold);color:var(--text);padding:17px 25px;font-size:11px;letter-spacing:2px;transition:background .2s}.return-button:hover{background:#842d3d}
.site-footer{padding:40px 8vw 120px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:2.4px;color:var(--muted)}.audio-player{position:fixed;bottom:18px;right:18px;z-index:30;display:flex;align-items:center;gap:14px;background:rgba(17,12,16,.96);border:1px solid #886d63;padding:10px 16px;box-shadow:0 10px 50px #0008;backdrop-filter:blur(12px)}.audio-toggle{width:38px;height:38px;border:1px solid #c3a577;border-radius:50%;background:transparent;color:#e5c78d}.audio-meta{display:flex;flex-direction:column;min-width:110px;line-height:1.4}.audio-kicker{font-size:8px;letter-spacing:2px;color:#bba58e}.audio-meta strong{font:600 18px var(--display);color:#f4e4d6}.volume-control{display:flex;align-items:center;gap:8px;color:#d8bf9b}.volume-control input{width:95px;accent-color:#c9a575}.volume-control output{font-size:10px;min-width:30px;color:#d8bf9b}
.transition-screen{position:fixed;inset:0;z-index:50;background:#07080c;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .65s}.transition-screen.is-active{opacity:1;pointer-events:all}.transition-glyph{font:100px var(--display);color:#8e3342;animation:turn 3s linear infinite}.transition-screen p{font:italic 25px var(--display);color:#d8c5c2;text-align:center;padding:0 20px}@keyframes turn{to{transform:rotate(180deg)}}.reveal{opacity:1;transform:none}@media (prefers-reduced-motion:no-preference){.reveal:not(.is-visible){opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.reveal.is-visible{opacity:1;transform:none}}
@media(max-width:850px){.masthead-center{display:none}.hero{grid-template-columns:1fr;padding-top:70px;gap:45px}.hero-copy{order:2}.portrait-frame{order:1;width:min(80%,340px);justify-self:center}.hero h1{font-size:clamp(70px,13vw,110px)}.hero-bottom{display:none}.editorial span:last-child{display:none}.world-secret .chapters:before{display:none}}
@media(max-width:520px){.masthead{height:65px}.status{font-size:8px;letter-spacing:1px}.curtain{width:8vw}.hero{padding:45px 23px 65px}.hero h1{letter-spacing:-2px;font-size:70px}.portrait-frame{width:min(85%,300px)}.chapters{padding:10px 23px 70px}.chapter{padding:58px 0}.chapter h2{font-size:58px}.prose{font-size:14px}.prose td{padding:10px 7px}.audio-player{bottom:8px;right:8px;left:8px;justify-content:center;padding:8px}.audio-meta{min-width:75px}.volume-control input{width:70px}.site-footer{font-size:8px;gap:10px;letter-spacing:1px}.secret-hero{min-height:580px}}



:root {
  --reading-width: 1280px;
  --portrait-width: 530px;
  --prose-size: clamp(19px, 1.55vw, 23px);
  --literary-font: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
}

/* Fonds vivants : halos, rayons de scène et reflets mouvants. */
body {
  background: #160710;
  transition: background-color 1.2s ease, color 1.2s ease;
}
body::before,
body::after {
  content: '';
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: -1;
}
body::before {
  background:
    radial-gradient(ellipse at 18% 25%, rgba(171, 39, 81, .35), transparent 39%),
    radial-gradient(ellipse at 85% 68%, rgba(169, 112, 49, .18), transparent 44%),
    repeating-conic-gradient(from 20deg at 50% -30%, transparent 0deg 12deg, rgba(226, 168, 104, .035) 13deg 15deg, transparent 16deg 31deg);
  animation: raven-ambience 22s ease-in-out infinite alternate;
}
body::after {
  background: repeating-linear-gradient(105deg, transparent 0 14%, rgba(239, 190, 115, .027) 15%, transparent 17% 34%);
  animation: raven-rays 28s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
body[data-world='secret'] { background: #07080d; }
body[data-world='secret']::before {
  background:
    radial-gradient(ellipse at 24% 15%, rgba(117, 15, 38, .39), transparent 45%),
    radial-gradient(ellipse at 80% 78%, rgba(40, 65, 89, .27), transparent 45%),
    repeating-conic-gradient(from 10deg at 80% -10%, transparent 0deg 17deg, rgba(166, 188, 209, .027) 18deg 19deg, transparent 20deg 39deg);
}
body[data-world='secret']::after {
  background: repeating-linear-gradient(115deg, transparent 0 12%, rgba(175, 32, 51, .035) 13%, transparent 15% 30%);
}
@keyframes raven-ambience {
  from { transform: translate(-2%, -1%) rotate(-2deg) scale(1); }
  to { transform: translate(2%, 2%) rotate(4deg) scale(1.08); }
}
@keyframes raven-rays {
  from { transform: translateX(-4%) skewX(-3deg); opacity: .6; }
  to { transform: translateX(5%) skewX(3deg); opacity: 1; }
}

/* Une scène d'ouverture immense : le portrait devient central. */
.hero {
  max-width: 1720px;
  min-height: min(920px, 100svh);
  grid-template-columns: minmax(0, 1fr) minmax(390px, .92fr);
  gap: clamp(35px, 5vw, 105px);
  padding: 90px clamp(30px, 6vw, 120px) 110px;
}
.hero .portrait-frame {
  max-width: var(--portrait-width);
  justify-self: center;
  padding: 17px;
  box-shadow: 0 0 0 9px rgba(214,180,125,.07), 0 25px 110px #000b, 0 0 100px #8e334133;
}
.hero h1 { font-size: clamp(88px, 10vw, 170px); }
.hero-quote { font-size: clamp(25px, 2.4vw, 36px); }
.portrait-label { font-size: 12px; letter-spacing: 4px; }

/* Lecture confortable, généreuse, avec une véritable police littéraire. */
.chapters {
  width: min(100% - 9vw, var(--reading-width));
  max-width: 100%;
  padding: 45px 0 110px;
}
.chapter { padding: 95px 0; }
.chapter h2 { font-size: clamp(70px, 7vw, 110px); }
.prose {
  font-family: var(--literary-font);
  font-size: var(--prose-size);
  line-height: 1.72;
  letter-spacing: .012em;
  color: var(--text);
}
.prose p {
  width: 100%;
  max-width: none;
  margin: 0 0 1.15em;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.prose p:first-child::first-letter { font-size: 1.2em; }
.prose table { max-width: 900px; font-family: var(--literary-font); }
.prose td { padding: 15px 20px; }
.prose td:first-child { font-family: 'DM Sans', sans-serif; font-size: 12px; }
.prose h2 { font-size: 31px; }

/* La seconde identité reçoit elle aussi un portrait monumental. */
.secret-hero {
  min-height: 0;
  padding: 100px 25px 115px;
  background: radial-gradient(ellipse at 50% 36%, rgba(114,21,34,.3), transparent 70%);
}
.secret-hero h1 { font-size: clamp(76px, 9vw, 150px); }
.secret-hero .hero-quote { max-width: 920px; }
.secret-portrait {
  width: min(80vw, 510px);
  max-width: none;
  margin: 65px auto 48px;
  padding: 16px;
  border-color: #a4aeb9;
  box-shadow: 0 0 0 8px #b6c3d010, 0 30px 120px #000c, 0 0 90px #9d243044;
}
.secret-portrait img { filter: contrast(1.12) saturate(.68) brightness(.83); }
.secret-portrait .portrait-label { color: #e1d8dc; }
.world-secret .chapter { border-bottom-color: rgba(184, 191, 205, .24); }

@media (max-width: 900px) {
  .hero { min-height: 0; grid-template-columns: 1fr; padding: 70px 6vw 100px; }
  .hero .portrait-frame { width: min(80vw, 510px); max-width: none; order: 1; }
  .hero-copy { order: 2; }
  .chapters { width: min(100% - 10vw, 760px); }
}
@media (max-width: 560px) {
  .hero { padding: 45px 24px 75px; }
  .hero h1 { font-size: clamp(68px, 15vw, 100px); }
  .hero .portrait-frame { width: min(85vw, 390px); }
  .chapters { width: calc(100% - 42px); padding-bottom: 70px; }
  .chapter { padding: 65px 0; }
  .chapter h2 { font-size: clamp(54px, 13vw, 75px); }
  .prose { font-size: 19px; line-height: 1.66; }
  .prose td { padding: 12px 8px; }
  .secret-portrait { width: min(85vw, 400px); }
  .secret-hero { padding: 75px 22px 90px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* Alignement et justification des textes */

section p,
article p {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.mirror-quote {
    width: 100%;
    text-align: center;
}



.world-secret .secret-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    justify-content: initial;
    text-align: left;

    width: 100%;
    max-width: 1520px;
    min-height: 760px;
    margin: 0 auto;
    padding: 75px clamp(26px, 8vw, 130px) 105px;
    gap: 55px;

    background: transparent;
}

.world-secret .secret-hero .hero-copy {
    position: relative;
    z-index: 2;
}

.world-secret .secret-hero .hero-quote {
    max-width: 570px;
    text-align: left;
}

.world-secret .secret-hero .portrait-frame {
    width: 100%;
    max-width: 530px;
    justify-self: center;
}

.world-secret .secret-hero .hero-halo {
    background: radial-gradient(
        ellipse at 65% 42%,
        rgba(145, 20, 43, 0.28),
        transparent 60%
    );
}

/* Adaptation mobile */

@media (max-width: 850px) {
    .world-secret .secret-hero {
        grid-template-columns: 1fr;
        padding: 70px 25px;
        gap: 45px;
    }

    .world-secret .secret-hero .portrait-frame {
        order: 1;
        width: min(80vw, 510px);
    }

    .world-secret .secret-hero .hero-copy {
        order: 2;
    }
}