/* snw — Vol. 01 */
/* Concept : la page est un volume de manga. Couverture en planche, un chapitre par projet, une fiche personnage, puis « À suivre… ».
   Grille de planche à 12 colonnes, gouttières noires, cases cerclées d'os, quelques bords biseautés. */
:root{
  --nuit:#070404;        /* fond, noir de la bannière */
  --cendre:#120c0c;      /* intérieur des cases vides */
  --os:#dcd6d5;          /* cadres, texte principal */
  --papier:#ece6e3;      /* cartouches de narration */
  --brume:#8f8584;       /* texte secondaire (contraste 5,6:1 sur nuit) */
  --sang:#e0130f;        /* rouge des éclats, accent unique */
  --trait:#2a1e1e;
  --titre:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gout:clamp(8px,1.1vw,14px);   /* gouttière entre cases */
  --cadre:3px;
  --dur-claque:.42s; --courbe-claque:cubic-bezier(.2,1.45,.4,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--os);font:400 15px/1.65 var(--mono);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--sang);color:var(--nuit)}
.ico{width:1.15em;height:1.15em;flex:none}
.wrap{max-width:1320px;margin:0 auto}

/* Grain d'impression, fixe et léger */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.11;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== Typo retravaillée ===== */
.mot{font-family:var(--titre);font-weight:900;text-transform:uppercase;line-height:.8;letter-spacing:-.005em;filter:url(#ronge)}
.cut{display:inline-block;position:relative;white-space:nowrap}
.cut .h{display:block;clip-path:polygon(-5% -45%,105% -45%,105% 30%,-5% 64%)}
.cut .b{position:absolute;inset:0;clip-path:polygon(-5% 64%,105% 30%,105% 140%,-5% 140%);transform:translate(.045em,.028em)}
.cut .lame{position:absolute;left:-3%;right:-3%;top:47%;height:max(2px,.022em);background:var(--sang);transform:rotate(-11deg);transform-origin:left center;box-shadow:0 0 .12em var(--sang)}
.rouge{color:var(--sang)}
.rouge .lame{background:var(--os);box-shadow:none}
.fantome{text-shadow:-.035em 0 0 rgba(224,19,15,.55)}
.anim .cut .b{animation:decroche .5s cubic-bezier(.2,.9,.2,1) var(--d,.2s) backwards}
.anim .cut .lame{animation:lame .45s cubic-bezier(.7,0,.2,1) var(--d,.2s) backwards}
.anim .chapitre:not(.vu) .cut .b,.anim .chapitre:not(.vu) .cut .lame{animation:none}
@keyframes decroche{0%,55%{transform:none}100%{transform:translate(.045em,.028em)}}
@keyframes lame{0%{transform:rotate(-11deg) scaleX(0)}100%{transform:rotate(-11deg) scaleX(1)}}

/* ===== Barre du haut ===== */
.barre{display:flex;align-items:center;gap:20px;padding-block:18px 14px}
.barre .logo{width:clamp(96px,11vw,150px);mix-blend-mode:lighten}
.barre nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 22px;font:700 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.barre nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.barre nav a:hover{border-color:var(--sang)}
.barre .vol{font:500 13px/1 var(--mono);color:var(--brume);letter-spacing:.14em;white-space:nowrap}
a:focus-visible,button:focus-visible{outline:2px solid var(--sang);outline-offset:3px}

/* ===== Planche et cases ===== */
.planche{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gout);grid-auto-flow:dense}
.case{position:relative;overflow:hidden;background:var(--cendre);min-height:0;min-width:0;
  box-shadow:inset 0 0 0 var(--cadre) var(--os)}
.case > img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.case:hover > img{transform:scale(1.035)}
.case.pix > img{image-rendering:pixelated}
.case::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 var(--cadre) var(--os);pointer-events:none}
.bl{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0)}
.biais-d{clip-path:polygon(0 0,100% 0,95% 100%,0 100%)}
.biais-g{clip-path:polygon(4% 0,100% 0,100% 100%,0 100%)}
.biais-h{clip-path:polygon(0 9%,100% 0,100% 100%,0 100%)}
.biais-b{clip-path:polygon(0 0,100% 0,100% 91%,0 100%)}
.vitesse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.etiquette{position:absolute;left:14px;bottom:14px;z-index:2;background:var(--nuit);color:var(--os);font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px}
.etiquette b{color:var(--sang)}
.cartouche{background:var(--papier);color:var(--nuit);box-shadow:inset 0 0 0 var(--cadre) var(--nuit),0 0 0 var(--cadre) var(--os);padding:22px 24px;font:400 14px/1.6 var(--mono)}
.cartouche p{margin:0;max-width:52ch}
.cartouche .k{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sang);margin-bottom:10px}
.bulle{position:absolute;z-index:2;background:var(--papier);color:var(--nuit);font:900 clamp(16px,1.8vw,24px)/1 var(--titre);text-transform:uppercase;letter-spacing:.03em;
  padding:12px 16px 26px;clip-path:polygon(0 0,100% 0,100% 74%,34% 74%,16% 100%,20% 74%,0 74%)}

/* Claque d'entrée des cases (couverture au chargement, chapitres au défilement) */
.anim .couv .case,.anim .chapitre.vu .case,.anim .chapitre.vu .tete{animation:claque var(--dur-claque) var(--courbe-claque) calc(var(--i,0) * 110ms + var(--base,0ms)) backwards}
.anim .chapitre:not(.vu) .case,.anim .chapitre:not(.vu) .tete{opacity:0}
.anim .couv .planche{animation:secousse .32s linear .62s}
.anim .chapitre.vu .planche{animation:secousse .3s linear calc(var(--base,0ms) + 260ms)}
.anim .couv .vitesse,.anim .chapitre.vu .vitesse{animation:surgit 1.1s ease-out .25s backwards}
@keyframes claque{0%{opacity:0;transform:scale(1.16)}100%{opacity:1;transform:none}}
@keyframes secousse{0%,100%{transform:none}20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-4px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(2px,3px)}}
@keyframes surgit{0%{transform:scale(1.5);opacity:0}100%{transform:none;opacity:1}}

/* Flash d'impact à l'ouverture d'un chapitre */
.chapitre{position:relative}
.chapitre::before{content:"";position:absolute;inset:-10px calc(-1 * max(16px,env(safe-area-inset-left,0px)));background:var(--os);opacity:0;pointer-events:none;z-index:5}
.anim .chapitre.vu::before{animation:flash .34s steps(2,end)}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}

/* ===== Couverture ===== */
.couv .planche{grid-template-rows:auto auto auto}
.c-perso{grid-column:1/6;grid-row:1/4;min-height:clamp(420px,52vw,700px)}
.c-perso img{object-position:30% 30%}
.c-perso .bulle{right:18px;top:18px}
.c-titre{grid-column:6/12;grid-row:1/3;background:#0d0909;padding:clamp(22px,3.4vw,48px);display:flex;flex-direction:column;justify-content:flex-end;gap:22px;min-height:clamp(300px,33vw,460px)}
.c-titre h1{margin:0;position:relative;z-index:1;font-size:clamp(58px,9.4vw,138px);display:flex;flex-direction:column;gap:.06em}
.c-titre .qui{position:relative;z-index:1;margin:0;font:400 clamp(13px,1.1vw,15px)/1.6 var(--mono);max-width:46ch;color:var(--os)}
.c-titre .qui b{background:var(--sang);color:var(--nuit);padding:1px 6px;font-weight:700}
.c-titre .tampon{position:absolute;right:clamp(16px,2.6vw,36px);top:clamp(16px,2.6vw,36px);z-index:1;border:2px solid var(--sang);color:var(--sang);font:900 18px/1 var(--titre);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;transform:rotate(6deg)}
.c-kanji{grid-column:12/13;grid-row:1/4;background:var(--os);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-block:22px;color:var(--nuit)}
.c-kanji span{writing-mode:vertical-rl;font-size:clamp(20px,2vw,30px);letter-spacing:.45em;font-weight:700}
.c-kanji small{writing-mode:vertical-rl;font:700 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase}
.c-sommaire{grid-column:6/12;grid-row:3/4;background:var(--nuit);padding:22px clamp(18px,2.4vw,32px) 18px}
.c-sommaire h2{margin:0 0 6px;font:700 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--brume)}
.c-sommaire ol{list-style:none;margin:0;padding:0}
.c-sommaire li + li{border-top:1px solid var(--trait)}
.c-sommaire a{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:11px 0;text-decoration:none}
.c-sommaire .n{font:700 12px/1 var(--mono);color:var(--sang);letter-spacing:.08em}
.c-sommaire .p{font:900 clamp(24px,2.5vw,34px)/1 var(--titre);text-transform:uppercase;letter-spacing:.02em;transition:transform .25s,color .25s}
.c-sommaire .t{font-size:12px;color:var(--brume);text-align:right}
.c-sommaire a:hover .p{color:var(--sang);transform:translateX(6px)}

/* ===== Chapitres ===== */
.chapitre{padding-block:clamp(70px,9vw,130px) 0}
.tete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:end;margin-bottom:var(--gout);position:relative}
.tete .num{position:relative;width:clamp(110px,14vw,190px);aspect-ratio:1;background:var(--os);color:var(--nuit);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,8% 100%)}
.tete .num .vitesse path{fill:#b9b1af}
.tete .num span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;font:900 clamp(56px,7.6vw,104px)/.8 var(--titre)}
.tete .num .court{font-size:clamp(40px,5vw,64px)}
.tete .num small{font:700 11px/1 var(--mono);letter-spacing:.24em;margin-bottom:8px}
.tete .nom{min-width:0}
.tete h2{margin:0;font-size:clamp(64px,11vw,168px)}
.tete .pinceau{display:block;width:min(560px,90%);height:clamp(12px,1.4vw,20px);color:var(--sang);margin-top:6px}
.anim .chapitre.vu .tete .pinceau{animation:pinceau .7s cubic-bezier(.7,0,.2,1) calc(var(--base,0ms) + 240ms) backwards}
@keyframes pinceau{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.tete .meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font:700 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brume)}
.tete .meta .a-faire{color:var(--nuit);background:#d9a300;padding:2px 7px;letter-spacing:.1em}

/* Ch. 01 Atome */
.p-atome .a1{grid-column:1/9;grid-row:1/3;aspect-ratio:1400/648}
.p-atome .a2{grid-column:9/13;grid-row:1/2;aspect-ratio:580/370}
.p-atome .a3{grid-column:9/11;grid-row:2/4}
.p-atome .a4{grid-column:11/13;grid-row:2/4}
.p-atome .a5{grid-column:1/9;grid-row:3/4}
.p-atome .a2 img{object-position:left center}

/* Ch. 02 Avania */
.p-avania .v1{grid-column:1/8;grid-row:1/3;aspect-ratio:1400/644}
.p-avania .v2{grid-column:8/13;grid-row:1/2;min-height:220px}
.p-avania .v2 .vitesse path{fill:#fff}
.p-avania .v2 img{position:absolute;inset:0;object-fit:contain;padding:10px 12%;z-index:1;transition:transform .7s}
.p-avania .v2{background:#5aa33a}
.p-avania .v3{grid-column:8/13;grid-row:2/4;aspect-ratio:1100/701}
.p-avania .v4{grid-column:1/5;grid-row:3/4}
.p-avania .v5{grid-column:5/8;grid-row:3/4;min-height:150px}
.p-avania .v5 img{object-position:20% center}

/* Ch. 03 Vexis */
.p-vexis .x1{grid-column:1/13;grid-row:1/2;aspect-ratio:580/120;background:#e6eefb}
.p-vexis .x1 img{object-fit:cover;object-position:left top}
.p-vexis .x2{grid-column:1/8;grid-row:2/4;aspect-ratio:1400/651}
.p-vexis .x3{grid-column:8/13;grid-row:2/3;aspect-ratio:732/407}
.p-vexis .x4{grid-column:8/13;grid-row:3/4;align-self:end}
.p-vexis .x5{grid-column:1/13;grid-row:4/5;aspect-ratio:900/230}
.p-vexis .x5 img{object-position:left top}

/* Liens réels (remplacent les emplacements « à ajouter ») */
.tete .meta a{color:var(--os);text-decoration:none;border-bottom:2px solid var(--sang);padding-bottom:2px}
.tete .meta a:hover{color:var(--sang)}
a.val{text-decoration:none;color:var(--os)}
a.val:hover{color:var(--sang)}

/* ===== Fiche personnage (stack) ===== */
.fiche .planche{grid-template-rows:auto auto}
.f-portrait{grid-column:1/4;grid-row:1/3;min-height:340px}
.f-portrait img{object-position:62% 30%;filter:contrast(1.1)}
.f-dom{padding:22px 22px 24px;background:#0d0909;display:flex;flex-direction:column;gap:14px}
.f-dom h3{margin:0;font:700 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--sang)}
.f-dom ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.f-dom li{font:900 clamp(26px,2.6vw,38px)/1 var(--titre);text-transform:uppercase;letter-spacing:.02em}
.f1{grid-column:4/9}.f2{grid-column:9/13}.f3{grid-column:4/7}.f4{grid-column:7/10}.f5{grid-column:10/13}
.f2{background:var(--os);color:var(--nuit)}
.f2 h3{color:var(--sang)}

/* ===== Fin : À suivre ===== */
.fin .planche{grid-template-rows:auto auto}
.s-suivre{grid-column:1/9;grid-row:1/3;padding:clamp(26px,4vw,56px);background:#0d0909;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:clamp(360px,36vw,520px)}
.s-suivre h2{margin:0;position:relative;z-index:1;font-size:clamp(66px,11vw,170px)}
.s-suivre p{position:relative;z-index:1;margin:0;max-width:44ch;font-size:clamp(14px,1.2vw,16px)}
.s-suivre .ch4{position:relative;z-index:1;font:700 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sang)}
.s-oeil{grid-column:9/13;grid-row:1/2;min-height:200px}
.s-oeil img{object-position:55% 40%}
.s-contact{grid-column:9/13;grid-row:2/3;display:flex;flex-direction:column;gap:var(--gout);background:transparent;box-shadow:none}
.s-contact::after{display:none}
.lien{position:relative;background:var(--nuit);box-shadow:inset 0 0 0 var(--cadre) var(--os);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px}
.lien .k{display:flex;align-items:center;gap:8px;font:700 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brume)}
.lien .val{font:900 clamp(28px,2.8vw,40px)/1 var(--titre);letter-spacing:.02em;user-select:all;word-break:break-all}
.lien .val.a-faire{font:700 13px/1.4 var(--mono);color:var(--nuit);background:#d9a300;padding:4px 8px;align-self:flex-start;user-select:auto}
.copier{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--sang);color:var(--nuit);border:0;cursor:pointer;
  font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:12px 22px 12px 14px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background .2s,transform .2s}
.copier:hover{background:var(--os);transform:translateX(3px)}
.copier .ok{display:none}
.copier.fait .ok{display:block}.copier.fait .go{display:none}
.lien .note{font-size:12px;color:var(--brume)}

.pied{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;align-items:baseline;padding-block:40px 34px;margin-top:clamp(60px,8vw,110px);border-top:1px solid var(--trait);font:400 12px/1.5 var(--mono);color:var(--brume);letter-spacing:.08em}
.pied b{color:var(--os);font-weight:700}

/* Numéro de page fixe, comme en bas d'une page de manga */
.folio{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;font:700 11px/1 var(--mono);letter-spacing:.2em;background:var(--nuit);border:1px solid var(--trait);padding:8px 10px;color:var(--brume)}
.folio b{color:var(--os)}

/* ===== Mobile ===== */
@media (max-width:900px){
  .planche{grid-template-columns:repeat(6,minmax(0,1fr))}
  .c-perso{grid-column:1/4;grid-row:1/3;min-height:420px}
  .c-titre{grid-column:4/7;grid-row:1/2;min-height:0}
  .c-kanji{display:none}
  .c-sommaire{grid-column:4/7;grid-row:2/3}
  .p-atome .a1,.p-avania .v1,.p-vexis .x2{grid-column:1/7;grid-row:auto}
  .p-atome .a2{grid-column:1/7;grid-row:auto}
  .p-atome .a3{grid-column:1/4;grid-row:auto;aspect-ratio:3/4}.p-atome .a4{grid-column:4/7;grid-row:auto;aspect-ratio:3/4}
  .p-atome .a5,.p-avania .v4{grid-column:1/7;grid-row:auto}
  .p-avania .v2{grid-column:1/4;grid-row:auto}.p-avania .v5{grid-column:4/7;grid-row:auto}
  .p-avania .v3{grid-column:1/7;grid-row:auto}
  .p-vexis .x1,.p-vexis .x5{grid-column:1/7;grid-row:auto}
  .p-vexis .x3,.p-vexis .x4{grid-column:1/7;grid-row:auto}
  .f-portrait{grid-column:1/3;grid-row:1/4;min-height:0}
  .f1{grid-column:3/7}.f2{grid-column:3/7}.f3{grid-column:3/7}.f4{grid-column:1/4}.f5{grid-column:4/7}
  .s-suivre{grid-column:1/7;grid-row:auto}
  .s-oeil{grid-column:1/3;grid-row:auto}
  .s-contact{grid-column:3/7;grid-row:auto}
}
@media (max-width:600px){
  body{font-size:14px}
  .barre nav{display:none}
  .planche{grid-template-columns:minmax(0,1fr)}
  .planche > *{grid-column:1/-1!important;grid-row:auto!important}
  .c-perso{min-height:340px}
  .c-titre h1{font-size:clamp(54px,17vw,84px)}
  .p-atome .a3,.p-atome .a4{aspect-ratio:4/5}
  .f-portrait{min-height:260px}
  .s-oeil{min-height:180px}
  .biais-d,.biais-g{clip-path:none}
  .tete{grid-template-columns:minmax(0,1fr)}
  .tete .num{width:96px}
  .c-titre .tampon{display:none}
  .tete h2{font-size:clamp(56px,19vw,96px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Un seul contact : le bloc Discord remplit la case */
.s-contact .lien{flex:1;justify-content:center}