:root { --ink:#111a42; --night:#08112f; --blue:#153b91; --electric:#5f9dff; --cream:#fbf6e9; --gold:#f2b74a; --ember:#ee6c31; --mist:#dce8ff; --body:'DM Sans', Arial, sans-serif; --display:'Cormorant Garamond', Georgia, serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--cream); font-family:var(--body); font-size:16px; line-height:1.62; overflow-x:hidden; }
body::selection { background:var(--gold); color:var(--night); }
.sky { position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 72% 15%, rgba(48,99,232,.36), transparent 30rem), radial-gradient(circle at 20% 70%, rgba(220,93,38,.16), transparent 28rem), linear-gradient(150deg,#07102c 4%,#122863 49%,#07102c); }
.site-header { width:min(1180px,calc(100% - 3rem)); margin:0 auto; height:5.4rem; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand { color:var(--cream); text-decoration:none; font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; line-height:.82; font-size:1rem; }
.brand span,.brand strong { display:block; }.brand strong { font-size:1.3rem; font-weight:600; }
.main-nav { display:flex; gap:1.7rem; align-items:center; }.main-nav a { color:rgba(251,246,233,.82); text-decoration:none; font-size:.85rem; font-weight:600; }.main-nav a:hover { color:var(--gold); }
.menu-toggle { display:none; }
.hero { width:min(1180px,calc(100% - 3rem)); min-height:calc(100vh - 5.4rem); margin:0 auto; display:grid; grid-template-columns:1.06fr .94fr; align-items:center; gap:3rem; padding:3rem 0 5rem; }
.eyebrow { margin:0 0 .8rem; color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; font-weight:700; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--display); line-height:.96; }
h1 { margin-bottom:1.3rem; font-size:clamp(4rem,8vw,7.4rem); letter-spacing:-.05em; font-weight:600; } h1 em { color:#b7d5ff; font-weight:500; }
.hero-intro { max-width:35rem; font-size:1.07rem; color:rgba(251,246,233,.84); }.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:2rem 0 1.4rem; }.button { display:inline-flex; align-items:center; min-height:2.85rem; padding:0 1.1rem; font-size:.82rem; font-weight:700; text-decoration:none; transition:.2s ease; }.button-primary { background:var(--gold); color:var(--night); }.button-primary:hover { transform:translateY(-2px); background:#ffd473; }.button-quiet { color:var(--cream); border:1px solid rgba(255,255,255,.3); }.button-quiet:hover { border-color:var(--cream); }.author-line { color:rgba(251,246,233,.62); font-family:var(--display); font-style:italic; font-size:1.15rem; }
.hero-cover-wrap { justify-self:center; position:relative; width:min(100%,26rem); }.cover-glow { position:absolute; inset:8% -15%; z-index:-1; background:radial-gradient(circle,rgba(82,144,255,.55),transparent 67%); filter:blur(22px); }.hero-cover { width:100%; display:block; box-shadow:0 35px 70px rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.2); transform:rotate(2deg); }
.panel-section { background:var(--cream); color:var(--ink); }.intro-section,.map-section,.book-section { padding:clamp(4.5rem,9vw,8rem) max(1.5rem,calc((100vw - 1080px)/2)); }.section-heading h2,.book-section h2 { font-size:clamp(3.1rem,6vw,5.2rem); margin-bottom:1.6rem; letter-spacing:-.045em; }.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,8vw,7rem); max-width:950px; }.intro-grid p { margin:0; }.lead { font-family:var(--display); font-size:1.55rem; line-height:1.25; }
.powers { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin-top:4rem; padding-top:1.6rem; border-top:1px solid rgba(17,26,66,.18); }.powers div { text-align:center; }.power-mark { display:block; height:2.5rem; font-family:var(--display); font-size:2.25rem; line-height:1; }.fire { color:var(--ember); }.water { color:#317cc7; }.earth { color:#766247; }.wind { color:#64748b; }.light { color:#ca911b; }.shadow { color:#464263; }.powers strong,.powers small { display:block; }.powers strong { font-family:var(--display); font-size:1.2rem; }.powers small { font-size:.68rem; opacity:.64; }
.heirs-section,.gallery-section { padding:clamp(5rem,10vw,9rem) max(1.5rem,calc((100vw - 1080px)/2)); background:linear-gradient(145deg,#090f2b,#172d68); }.heading-light h2 { color:var(--cream); }.heirs-layout { display:grid; grid-template-columns:minmax(9rem,.6fr) minmax(16rem,1.1fr) .7fr; gap:clamp(1.5rem,5vw,5rem); align-items:center; margin-top:3rem; }.character-nav { display:grid; }.character-button { appearance:none; border:0; border-bottom:1px solid rgba(255,255,255,.2); background:transparent; color:rgba(251,246,233,.6); text-align:left; padding:1rem .1rem; font-size:.74rem; font-family:var(--body); cursor:pointer; transition:.2s; }.character-button span { display:block; color:var(--cream); font-family:var(--display); font-size:1.45rem; line-height:1; }.character-button:hover,.character-button.active { color:var(--gold); padding-left:.5rem; }.character-button.active span { color:var(--gold); }.character-card { min-height:19rem; padding:clamp(2rem,4vw,4rem); background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.18); }.character-index { color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; }.character-card h3 { margin:.4rem 0 1rem; font-size:clamp(3.5rem,7vw,5.8rem); }.character-card p:not(.character-index) { color:rgba(251,246,233,.82); }.character-quote { margin:2rem 0 0; color:#adcfff!important; font-family:var(--display); font-size:1.4rem; font-style:italic; }.character-orbit { position:relative; width:12rem; aspect-ratio:1; border:1px solid rgba(180,208,255,.34); border-radius:50%; }.character-orbit::before,.character-orbit::after,.character-orbit span { content:''; position:absolute; width:.6rem; height:.6rem; border-radius:50%; background:var(--gold); box-shadow:0 0 20px var(--gold); }.character-orbit::before { top:12%; left:22%; }.character-orbit::after { right:5%; bottom:24%; background:#72a8ff; box-shadow:0 0 20px #72a8ff; }.character-orbit span:nth-child(1){ top:51%; left:48%; background:var(--ember); }.character-orbit span:nth-child(2){ bottom:9%; left:30%; background:#a8ccff; }.character-orbit span:nth-child(3){ top:31%; right:18%; background:#fff0a6; }
.map-section { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2rem,6vw,6rem); align-items:center; }.map-copy h2 { font-size:clamp(3.1rem,6vw,5.2rem); margin-bottom:1.2rem; letter-spacing:-.045em; }.place-list { display:grid; margin:2rem 0 1rem; }.place { padding:.65rem 0; border:0; background:none; color:var(--ink); font-family:var(--display); font-size:1.35rem; text-align:left; cursor:pointer; border-bottom:1px solid rgba(17,26,66,.15); }.place span { display:inline-block; width:2.2rem; color:#6781ac; font-family:var(--body); font-size:.68rem; vertical-align:middle; }.place:hover,.place.active { color:#d3552a; }.place-detail { min-height:3rem; color:#46516c; font-size:.9rem; }.map-frame { margin:0; padding:.8rem; background:#fff; box-shadow:0 20px 40px rgba(17,26,66,.18); transform:rotate(1deg); }.map-frame img { display:block; width:100%; height:auto; }.map-frame figcaption { padding:.65rem .2rem 0; color:#59647d; font-family:var(--display); font-style:italic; }
.gallery { display:grid; grid-template-columns:1.05fr .95fr .95fr; gap:1.2rem; margin-top:3rem; }.gallery-item { margin:0; position:relative; min-height:18rem; overflow:hidden; background:#0a1333; }.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); transition:transform .45s; }.gallery-item:hover img { transform:scale(1.04); }.gallery-item figcaption { position:absolute; inset:auto 0 0; padding:2.5rem 1.1rem 1rem; background:linear-gradient(transparent,rgba(0,0,0,.85)); font-family:var(--display); font-size:1.25rem; }
.book-section { display:grid; grid-template-columns:minmax(12rem,20rem) minmax(0,35rem); gap:clamp(2.5rem,7vw,7rem); align-items:center; justify-content:center; }.book-cover-small { width:100%; max-width:18rem; margin:auto; box-shadow:0 24px 55px rgba(17,26,66,.25); }.book-note { font-weight:700; color:#384a71; }
.tome-two-section { padding:clamp(5rem,10vw,9rem) max(1.5rem,calc((100vw - 1080px)/2)); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr); gap:clamp(2.5rem,8vw,8rem); align-items:center; background:radial-gradient(circle at 12% 12%,rgba(82,144,255,.24),transparent 30%),radial-gradient(circle at 88% 80%,rgba(202,145,27,.15),transparent 27%),linear-gradient(135deg,#07102d,#192f70); color:var(--cream); border-top:1px solid rgba(255,255,255,.14); }.tome-two-content { max-width:43rem; }.tome-two-section .eyebrow { color:#b7d5ff; }.tome-two-section h2 { margin:0 0 1.7rem; font-size:clamp(3.2rem,6.5vw,6rem); line-height:.86; letter-spacing:-.05em; }.tome-two-section h2 span { display:block; color:var(--gold); font-size:.43em; letter-spacing:.02em; margin-top:.65rem; }.tome-two-lead { margin:0 0 1.6rem; color:#fff4d5; font-family:var(--display); font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.08; }.tome-two-copy { max-width:38rem; color:rgba(251,246,233,.83); }.tome-two-copy p { margin:0 0 1rem; }.tome-two-status { margin:2rem 0 0; color:#b7d5ff; font-weight:700; }.newsletter-card { padding:clamp(2rem,4vw,3.2rem); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); box-shadow:0 24px 50px rgba(0,0,0,.2); }.newsletter-symbol { margin:0 0 .8rem; color:var(--gold); font-size:2rem; }.newsletter-card h3 { margin:0 0 .8rem; font-size:clamp(2rem,4vw,3rem); line-height:.9; }.newsletter-card > p:not(.newsletter-symbol) { color:rgba(251,246,233,.8); }.newsletter-card .button { margin-top:1.1rem; }
footer { padding:2rem 1.5rem; display:flex; justify-content:space-between; gap:1rem; color:rgba(251,246,233,.6); font-size:.75rem; } footer p { margin:0; }
@media (max-width:760px) { .site-header,.hero { width:min(100% - 2rem,560px); }.site-header { height:4.4rem; }.menu-toggle { display:block; border:1px solid rgba(255,255,255,.35); color:var(--cream); background:transparent; padding:.4rem .6rem; font:600 .72rem var(--body); text-transform:uppercase; letter-spacing:.09em; }.main-nav { position:absolute; top:4.1rem; right:0; display:none; min-width:13rem; padding:1rem; background:#0c1943; border:1px solid rgba(255,255,255,.16); flex-direction:column; align-items:flex-start; }.main-nav.open { display:flex; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:3.5rem; }.hero-copy { order:2; }.hero-cover-wrap { order:1; width:min(76%,20rem); }.hero-cover { transform:rotate(1deg); } h1 { font-size:clamp(3.8rem,18vw,5.3rem); }.intro-section,.map-section,.book-section,.heirs-section,.gallery-section { padding:4.5rem 1.3rem; }.intro-grid,.map-section,.book-section { grid-template-columns:1fr; }.powers { grid-template-columns:repeat(3,1fr); row-gap:1.8rem; }.heirs-layout { grid-template-columns:1fr; }.character-nav { grid-template-columns:repeat(3,1fr); gap:.4rem; }.character-button { border:1px solid rgba(255,255,255,.18); padding:.7rem .5rem; }.character-button:hover,.character-button.active { padding-left:.5rem; }.character-orbit { display:none; }.gallery { grid-template-columns:1fr; }.gallery-item { min-height:23rem; }.book-cover-small { max-width:15rem; }.map-frame { order:-1; } footer { display:block; } footer p + p { margin-top:.5rem; } }

/* Portraits couleur des personnages et portfolio complet */
.heirs-layout { grid-template-columns:minmax(9rem,.6fr) minmax(26rem,1.5fr) .45fr; }
.character-button { padding:.8rem .1rem; }
.character-card { min-height:27rem; display:grid; grid-template-columns:minmax(12rem,.8fr) 1fr; overflow:hidden; padding:0; }
.character-art { display:block; width:100%; height:100%; min-height:27rem; object-fit:cover; object-position:center top; background:#0b1537; }
.character-details { padding:clamp(1.7rem,3vw,3.2rem); align-self:center; }
.gallery-intro { max-width:38rem; color:rgba(251,246,233,.72); }
.adventure-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem; }
.adventure-item { margin:0; position:relative; aspect-ratio:2/3; overflow:hidden; background:#0a1333; border:1px solid rgba(255,255,255,.12); }
.adventure-item img { width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.04); transition:transform .45s,filter .45s; }
.adventure-item:hover img { transform:scale(1.05); filter:grayscale(.15) contrast(1.03); }
.adventure-item figcaption { position:absolute; inset:auto 0 0; padding:2.4rem .85rem .75rem; background:linear-gradient(transparent,rgba(0,0,0,.9)); display:grid; gap:.08rem; }
.adventure-item figcaption span { color:var(--gold); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.adventure-item figcaption strong { font-family:var(--display); font-size:1.17rem; line-height:1.05; font-weight:600; }
@media (max-width:760px) { .character-card { grid-template-columns:1fr; }.character-art { min-height:19rem; max-height:27rem; }.adventure-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; } }
@media (max-width:760px) { .tome-two-section { padding:4.5rem 1.3rem; grid-template-columns:1fr; gap:2rem; }.tome-two-section h2 { font-size:clamp(3rem,15vw,4.5rem); }.newsletter-card { padding:2rem 1.5rem; } }