/* L’Azalaï — une nuit dans le désert.
   Ciel indigo, texte pâle comme les « deux lunes » de Hendu, or du sable pour l’accent.
   Pensé d’abord pour le téléphone ; l’ordinateur élargit et aère. */

:root{
  --nuit:#0f1424;
  --crepuscule:#171d33;
  --lune:#e9e6dc;
  --brume:#a6a9ba;
  --sable:#d9a95b;
  --trait:#2a3150;
  --sur-sable:#1a1408;
  --voile:rgba(15,20,36,.92);
  --titres:"Cormorant","Cormorant Garamond",Georgia,serif;
  --texte:"Literata",Georgia,"Times New Roman",serif;
  --taille:1.125rem;
  --gouttiere:20px;
  color-scheme:dark;
}
:root[data-theme="sable"]{
  --nuit:#f4ecdc;
  --crepuscule:#ebe0c9;
  --lune:#2b2318;
  --brume:#75684f;
  --sable:#99661a;
  --trait:#d9cbae;
  --sur-sable:#fff8ea;
  --voile:rgba(244,236,220,.94);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nuit);color:var(--lune);font-family:var(--texte);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--sable)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sable);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--titres);font-weight:600;line-height:1.08;margin:0;text-wrap:balance}

.surtitre{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brume)}
.sous-titre{color:var(--brume);font-size:.92rem;margin:.4em 0 0}
.lien-discret{font-size:.85rem;text-decoration:none}
.lien-discret:hover{text-decoration:underline}

.bouton{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:999px;border:1px solid var(--sable);background:transparent;color:var(--sable);font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,filter .2s}
.bouton:hover{background:color-mix(in srgb,var(--sable) 12%,transparent)}
.bouton.plein{background:var(--sable);color:var(--sur-sable)}
.bouton.plein:hover{filter:brightness(1.08)}
.bouton svg{transition:transform .2s}
.bouton:hover svg{transform:translateX(3px)}
.bouton .pseudo{font-weight:400;opacity:.8}

/* ================= ACCUEIL ================= */
/* Le héros reste nocturne quelle que soit l’ambiance choisie : c’est la couverture du livre. */
.hero{--nuit:#0f1424;--lune:#e9e6dc;--brume:#b3b6c6;--sable:#d9a95b;--sur-sable:#1a1408;position:relative;background:#0f1424;color:var(--lune)}
.hero-image{position:relative;height:66svh;min-height:380px;max-height:640px;overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,20,36,.25) 0%,rgba(15,20,36,0) 30%,rgba(15,20,36,.55) 72%,#0f1424 100%)}
.hero-texte{position:relative;margin-top:-132px;padding:0 var(--gouttiere) 52px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;animation:lever .9s ease both}
.hero h1{font-size:clamp(3.4rem,17vw,6.5rem);letter-spacing:.06em;line-height:.92;text-shadow:0 2px 30px rgba(15,20,36,.7)}
.accroche{font-family:var(--titres);font-style:italic;font-size:clamp(1.3rem,5.2vw,1.7rem);line-height:1.32;margin:0;max-width:26ch;text-wrap:balance}
.hero-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:360px;margin-top:10px}
.hero-meta{margin:0;font-size:.85rem;color:var(--brume)}
@keyframes lever{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.accueil main{max-width:680px;margin:0 auto;padding:0 var(--gouttiere)}
.accueil section{padding:60px 0;border-top:1px solid var(--trait)}
.accueil section>h2{font-size:2.3rem;text-align:center}
.accueil section>.sous-titre{text-align:center;margin-bottom:34px}

.histoire p{margin:0 0 1.05em}
.histoire p:not(.sous-titre):not(.chute){font-style:italic}
.histoire .chute{font-family:var(--titres);font-size:1.5rem;line-height:1.35;text-align:center;margin:1.5em 0 0}
.histoire .chute strong{color:var(--sable);font-weight:600}

.bandeau{width:calc(100% + 2*var(--gouttiere));max-width:none;margin:-60px calc(-1*var(--gouttiere)) 44px;aspect-ratio:16/8;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}

.sommaire{list-style:none;margin:0;padding:0}
.sommaire li{border-bottom:1px solid var(--trait)}
.sommaire li>a,.sommaire li.a-venir{display:grid;grid-template-columns:2.2em 1fr auto auto;gap:12px;align-items:center;min-height:68px;padding:12px 4px;text-decoration:none;color:var(--lune)}
.sommaire .n{font-family:var(--titres);font-size:1.5rem;color:var(--sable);font-variant-numeric:tabular-nums;text-align:center}
.sommaire .t{font-family:var(--titres);font-size:1.32rem;font-weight:600;line-height:1.15}
.sommaire .t small{display:block;font-family:var(--texte);font-weight:400;font-size:.8rem;color:var(--brume);margin-top:4px}
.sommaire .etat{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sable);white-space:nowrap}
.sommaire a svg{color:var(--sable);transition:transform .2s}
.sommaire a:hover{background:color-mix(in srgb,var(--sable) 6%,transparent)}
.sommaire a:hover svg{transform:translateX(4px)}
.sommaire .a-venir{grid-template-columns:2.2em 1fr auto;min-height:54px}
.sommaire .a-venir .n,.sommaire .a-venir .t{color:var(--brume);opacity:.75}
.sommaire .a-venir .t{font-size:1.14rem;font-weight:500}
.sommaire .a-venir .etat{color:var(--brume);opacity:.75}
.sommaire a.lu .etat{color:var(--brume)}

.persos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.perso{margin:0;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--trait);background:#0f1424}
.perso img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;transition:transform .6s ease}
.perso:hover img{transform:scale(1.03)}
.perso figcaption{position:absolute;inset:auto 0 0 0;padding:44px 12px 12px;background:linear-gradient(to top,rgba(15,20,36,.95),transparent);color:#e9e6dc;display:flex;flex-direction:column;gap:2px}
.perso strong{font-family:var(--titres);font-size:1.3rem;font-weight:600;line-height:1.1}
.perso span{font-size:.8rem;font-style:italic;line-height:1.35;color:#c9cbd6}

/* Vidéos : un rail qui défile au pouce sur téléphone, une grille sur ordinateur. */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gouttiere));padding:4px var(--gouttiere) 14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.video{flex:0 0 62%;max-width:250px;scroll-snap-align:center;display:flex;flex-direction:column;gap:10px;color:var(--lune);text-decoration:none}
.video-titre{font-family:var(--titres);font-size:1.35rem;font-weight:600;line-height:1.1}
.video:hover .lien-discret{text-decoration:underline}
.video-vignette{position:relative;display:block;width:100%;border:1px solid var(--trait);border-radius:12px;overflow:hidden;background:#0f1424;aspect-ratio:9/16}
.video-vignette img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.video:hover .video-vignette img{transform:scale(1.04)}
.video-jouer{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;display:grid;place-items:center;background:rgba(15,20,36,.6);border:1px solid rgba(233,230,220,.55);color:#e9e6dc;backdrop-filter:blur(4px);transition:background .2s,transform .2s}
.video-jouer svg{margin-left:3px}
.video:hover .video-jouer{background:var(--sable);color:#1a1408;transform:scale(1.06)}
.video-duree{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:999px;background:rgba(15,20,36,.75);color:#e9e6dc;font-size:.75rem}
.video-texte{display:flex;flex-direction:column;gap:2px}
.video.tiktok{justify-content:center;align-items:flex-start;gap:10px;padding:22px 18px;border:1px solid var(--trait);border-radius:12px;background:var(--crepuscule);color:var(--lune);text-decoration:none;aspect-ratio:auto;align-self:stretch}
.video.tiktok strong{font-family:var(--titres);font-size:1.6rem;line-height:1.1;word-break:break-word}
.video.tiktok>span:not(.surtitre):not(.bouton){font-size:.9rem;color:var(--brume);line-height:1.5}
.video.tiktok .bouton{min-height:44px;padding:8px 18px;margin-top:6px}


.pied{text-align:center;color:var(--brume);font-size:.82rem;padding:44px var(--gouttiere) calc(52px + env(safe-area-inset-bottom));border-top:1px solid var(--trait)}
.pied p{margin:.35em 0}
.pied-titre{font-family:var(--titres);font-size:1.6rem;letter-spacing:.14em;color:var(--lune)}

/* ================= LECTURE ================= */
#progression{position:fixed;top:0;left:0;height:3px;width:0;background:var(--sable);z-index:30}
.barre{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0;background:var(--voile);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--trait);transition:transform .3s ease}
.barre.cachee{transform:translateY(-100%)}
.barre-retour{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;color:var(--lune);text-decoration:none;font-size:.9rem}
.barre-titre{font-family:var(--titres);font-size:1.15rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-reglages{justify-self:end;min-width:48px;min-height:44px;border:0;background:transparent;font-family:var(--titres);font-size:1.35rem;font-weight:600;cursor:pointer;border-radius:8px}
.barre-reglages:hover,.barre-retour:hover{color:var(--sable)}
.reglages{position:absolute;top:100%;right:8px;margin-top:8px;width:min(300px,calc(100vw - 16px));padding:8px 16px;background:var(--crepuscule);border:1px solid var(--trait);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.reglage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:.9rem}
.reglage+.reglage{border-top:1px solid var(--trait)}
.reglage div{display:flex;gap:8px}
.reglage button{min-width:56px;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--trait);background:transparent;cursor:pointer}
.reglage button:hover{border-color:var(--sable)}
.reglage button[aria-pressed="true"]{border-color:var(--sable);color:var(--sable)}

.entete{padding:calc(96px + env(safe-area-inset-top)) var(--gouttiere) 8px;text-align:center}
.entete.avec-image{padding-top:0}
.entete-image{position:relative;margin:0 calc(-1*var(--gouttiere));height:62svh;min-height:340px;max-height:600px;overflow:hidden}
.entete-image img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.entete-image::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--nuit) 30%,transparent) 0%,transparent 30%,color-mix(in srgb,var(--nuit) 55%,transparent) 74%,var(--nuit) 100%)}
.avec-image .entete-texte{position:relative;margin-top:-84px}
.entete-texte{display:flex;flex-direction:column;align-items:center;gap:8px;animation:lever .8s ease both}
.entete .numero{font-family:var(--titres);font-style:italic;font-size:1.3rem;color:var(--sable)}
.entete h1{font-size:clamp(2.5rem,11vw,4rem)}
.entete .sous-titre{font-family:var(--titres);font-style:italic;font-size:1.3rem;color:var(--lune);margin:0}
.entete .duree{margin:6px 0 0;font-size:.82rem;color:var(--brume)}
.entete-texte::after{content:"";width:44px;height:1px;background:var(--sable);margin-top:18px}

.texte{max-width:34em;margin:0 auto;padding:34px var(--gouttiere) 0;font-size:var(--taille);line-height:1.72;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.texte p{margin:0 0 .78em}
.texte p.dlg{padding-left:.15em}
.texte p.lettrine::first-letter{font-family:var(--titres);font-weight:600;font-size:3.5em;float:left;line-height:.82;padding:.06em .1em 0 0;color:var(--sable)}
.texte p.pause{text-align:center;color:var(--sable);margin:2.2em 0;font-size:.95rem}
.texte .intertitre{font-size:1.75em;text-align:center;margin:2.2em 0 1em;hyphens:manual}
.texte strong{font-weight:600}

/* Les planches : l’image accompagne le récit, elle ne l’interrompt pas. */
.planche{margin:2.4em auto;max-width:min(100%,400px,52svh);transition:opacity .9s ease,transform .9s ease}
.js .planche{opacity:0;transform:translateY(12px)}
.js .planche.vue{opacity:1;transform:none}
.planche .cadre{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--trait);background:var(--crepuscule);box-shadow:0 18px 44px -22px rgba(0,0,0,.6)}
.planche img{width:100%;height:auto}
.planche figcaption{margin-top:.8em;text-align:center;font-style:italic;font-size:.86em;line-height:1.45;color:var(--brume);hyphens:manual;text-wrap:balance}

.fin{text-align:center;color:var(--sable);letter-spacing:.6em;margin:48px 0 8px;font-size:.9rem}

.en-video{max-width:34em;margin:0 auto;padding:36px var(--gouttiere) 0}
.en-video h2{font-size:1.7rem;text-align:center;margin-bottom:20px}
.en-video .rail{justify-content:center}

.suite{max-width:34em;margin:0 auto;padding:40px var(--gouttiere) 56px;display:flex;flex-direction:column;gap:18px}
.suivant{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 56px 24px 22px;min-height:96px;border:1px solid var(--sable);border-radius:14px;background:color-mix(in srgb,var(--sable) 8%,transparent);color:var(--lune);text-decoration:none;transition:background .2s}
.suivant strong{font-family:var(--titres);font-size:1.6rem;line-height:1.12}
.suivant .duree{font-size:.82rem;color:var(--brume)}
.suivant svg{position:absolute;right:20px;top:50%;margin-top:-11px;width:22px;height:22px;color:var(--sable);transition:transform .2s}
.suivant:hover{background:color-mix(in srgb,var(--sable) 15%,transparent)}
.suivant:hover svg{transform:translateX(4px)}
.suite-arrive{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px 22px;border:1px solid var(--trait);border-radius:14px;background:var(--crepuscule)}
.suite-arrive strong{font-family:var(--titres);font-style:italic;font-weight:500;font-size:1.55rem;line-height:1.15}
.suite-arrive p{margin:0;color:var(--brume);font-size:.94rem;max-width:36ch}
.suite-arrive .bouton{width:100%;max-width:340px}
.retour-partage{min-height:1.3em;font-size:.85rem;color:var(--brume)}
.suite-bas{display:flex;justify-content:space-between;gap:12px}
.suite-bas a{display:inline-flex;align-items:center;min-height:48px;color:var(--brume);text-decoration:none;font-size:.92rem}
.suite-bas a:hover{color:var(--sable)}

.reprise{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:25;margin:0 auto;max-width:440px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--crepuscule);border:1px solid var(--trait);box-shadow:0 14px 40px rgba(0,0,0,.4);font-size:.86rem;line-height:1.35;animation:lever .4s ease both}
.reprise[hidden]{display:none}
.reprise button{flex:none;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--sable);background:transparent;color:var(--sable);font-weight:600;font-size:.84rem;cursor:pointer}

/* ================= ORDINATEUR ================= */
@media (min-width:720px){
  :root{--gouttiere:32px;--taille:1.22rem}
  .hero-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:none;width:auto}
  .video{flex-basis:220px}
  .rail{justify-content:center;flex-wrap:wrap;overflow:visible}
  .persos{gap:22px}
  .perso strong{font-size:1.7rem}
  .perso span{font-size:.92rem}
  .perso figcaption{padding:60px 20px 18px}
  .planche{max-width:min(100%,420px,52svh)}
  .texte{padding-top:48px}
  .sommaire .t{font-size:1.5rem}
}
@media (min-width:1000px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:56px;max-width:1180px;margin:0 auto;padding:56px 48px 72px;min-height:min(100vh,860px)}
  .hero-image{order:2;height:auto;max-height:none;aspect-ratio:2/3;max-width:460px;width:100%;justify-self:center;border-radius:6px;border:1px solid #2a3150;box-shadow:0 40px 90px -40px #000,0 0 0 10px rgba(42,49,80,.25)}
  .hero-image::after{background:linear-gradient(to bottom,transparent 60%,rgba(15,20,36,.45))}
  .hero-image img{object-position:50% 50%}
  .hero-texte{margin:0;padding:0;align-items:flex-start;text-align:left;gap:20px}
  .hero-actions{justify-content:flex-start}
  .hero h1{font-size:clamp(5rem,8.4vw,7.6rem)}
  .accroche{font-size:1.9rem;max-width:22ch}
  .accueil{background:linear-gradient(#0f1424,#0f1424) top/100% min(100vh,860px) no-repeat var(--nuit)}
  .accueil main{max-width:760px}
  .accueil section{padding:84px 0}
  .accueil section>h2{font-size:2.9rem}
  .histoire p:not(.sous-titre):not(.chute){font-size:1.14rem}
  .bandeau{width:100%;margin:-84px 0 56px;border-radius:0 0 6px 6px}
  .entete-image{height:64vh;max-height:640px;max-width:1100px;margin:0 auto}
  .entete-image img{object-position:50% 26%}
  .entete-image::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,var(--nuit),transparent 22%,transparent 78%,var(--nuit))}
  .entete-image::after{z-index:1}
  .avec-image .entete-texte{margin-top:-120px;z-index:2}
  .entete h1{font-size:4.6rem}
  .suite{padding-bottom:84px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .planche{opacity:1;transform:none}
}
@media print{
  .barre,#progression,.suite,.pied,.reprise,.en-video{display:none}
  body{background:#fff;color:#000}
  .planche{opacity:1;transform:none}
}