@font-face{font-family:'M PLUS 1';font-style:normal;font-display:swap;font-weight:400;src:url(/site/fonts/m-plus-1-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'M PLUS 1';font-style:normal;font-display:swap;font-weight:400;src:url(/site/fonts/m-plus-1-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'M PLUS 1';font-style:normal;font-display:swap;font-weight:800;src:url(/site/fonts/m-plus-1-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'M PLUS 1';font-style:normal;font-display:swap;font-weight:800;src:url(/site/fonts/m-plus-1-latin-ext-800.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Syncopate';font-style:normal;font-display:swap;font-weight:700;src:url(/site/fonts/syncopate-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ivory:#FBF7EE;--ink:#1B2A4A;--night:#13224A;--azure:#1F6FC4;--sky:#6CC0F2;--champagne:#D8B272;--coral:#E5553D;
  --bg:var(--ivory);--fg:var(--ink);--fg-2:rgb(27 42 74 / .74);--line:rgb(27 42 74 / .14);--panel:#FFFFFF;--link:#1A5FA8;
  --rar-C:#8C97A8;--rar-R:#2F86D6;--rar-SR:#7B67D6;--rar-SSR:#C9A055;--rar-UR:#E5553D;
  --gold:linear-gradient(135deg,#F3D9A0,#C9A055 45%,#8A6420);--prism:conic-gradient(from 200deg,#E5553D,#FFB49A,#F3D28C,#A8DAF6,#6CC0F2,#C7A6FF,#E5553D);
  --font:'M PLUS 1','Hiragino Sans','Segoe UI',system-ui,sans-serif;--gutter:16px;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0E1A3A;--fg:#FBF7EE;--fg-2:rgb(251 247 238 / .76);--line:rgb(251 247 238 / .16);--panel:#16264F;--link:#8FD0F7}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font)}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible,.play:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- barre du haut (posée sur la bannière) ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ivory);text-decoration:none;min-height:44px}
.brand svg{width:32px;height:32px;flex:none}
.brand span{font:700 14px/1 'Syncopate','M PLUS 1',system-ui,sans-serif;letter-spacing:.08em}
.top nav ul{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:rgb(251 247 238 / .86);text-decoration:none;font-size:15px}
.top nav a:hover{color:var(--ivory);text-decoration:underline}
.top nav a[aria-current="page"]{color:var(--ivory);font-weight:800}

/* ---------- bannière ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--ivory);padding-bottom:40px;
  background:radial-gradient(60% 46% at 84% 30%,rgb(31 111 196 / .58),transparent 72%),radial-gradient(48% 40% at 6% 100%,rgb(229 85 61 / .3),transparent 72%),radial-gradient(42% 30% at 58% 104%,rgb(216 178 114 / .24),transparent 72%),linear-gradient(168deg,#0E1A3A 0%,var(--night) 52%,#1B3166 100%)}
.hero::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgb(216 178 114 / .5),transparent)}
.hero__body{display:grid;gap:28px;padding-top:12px}
.hero__text{display:grid;gap:12px;align-content:start;min-width:0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none;font-size:14px;color:rgb(251 247 238 / .72)}
.crumbs li+li::before{content:'›';margin-right:8px;opacity:.6}
.crumbs a{color:inherit}
.crumbs [aria-current]{color:var(--ivory)}
h1{margin:0;font-weight:800;font-size:clamp(32px,8.4vw,60px);line-height:1.05;letter-spacing:-.015em;overflow-wrap:anywhere;text-wrap:balance}
.native{margin:-4px 0 0;font-size:18px;color:rgb(251 247 238 / .7)}
.lead{margin:0;max-width:52ch;font-size:17px;color:rgb(251 247 238 / .86)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:8px 0 0;padding:16px 0 0;border-top:1px solid rgb(251 247 238 / .16);max-width:520px}
.facts dt{color:rgb(251 247 238 / .66);font-size:14px;padding-top:2px}
.facts dd{margin:0;font-weight:800;min-width:0;overflow-wrap:anywhere}
.facts a{color:var(--ivory)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px}
.play{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:999px;background:var(--ivory);color:var(--night);font-weight:800;font-size:17px;text-decoration:none;box-shadow:0 10px 24px -12px rgb(0 0 0 / .6)}
.play:hover{background:#FFFFFF}
.hint{margin:0;font-size:14px;color:rgb(251 247 238 / .72)}

/* Carte du personnage : le seul élément appuyé de la page. */
.feature{display:flex;flex-direction:column;align-items:center;justify-self:center;width:min(250px,64vw);transform:rotate(-3deg);filter:drop-shadow(0 22px 30px rgb(4 10 30 / .55))}
.feature .art{width:100%;border-radius:14px;padding:5px}
.feature .art img,.feature .art .ph{border-radius:10px}
.feature .pill{font-size:15px;margin-top:-16px}

/* ---------- pastilles de tranche ---------- */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:1px 10px;border-radius:999px;background:var(--rar);color:var(--rar-ink,#FFFFFF);font-weight:800;font-size:13px;line-height:1.5;border:2px solid var(--pill-edge,var(--bg))}
[data-rarity="C"]{--rar:var(--rar-C);--rar-ink:#1B2A4A}
[data-rarity="R"]{--rar:var(--rar-R);--rar-ink:#FFFFFF}
[data-rarity="SR"]{--rar:var(--rar-SR);--rar-ink:#FFFFFF}
[data-rarity="SSR"]{--rar:var(--rar-SSR);--rar-ink:#1B2A4A}
[data-rarity="UR"]{--rar:var(--rar-UR);--rar-ink:#FFFFFF}
[data-rarity="SSR"] .pill,.pill[data-rarity="SSR"]{background:var(--gold)}
[data-rarity="UR"] .pill,.pill[data-rarity="UR"]{background:linear-gradient(135deg,#E5553D,#FFB49A 30%,#F3D28C 50%,#A8DAF6 70%,#C7A6FF 85%,#E5553D);color:#1B2A4A}
.hero .pill{--pill-edge:var(--night)}
.facts .pill{margin-right:8px;border-color:transparent}

/* ---------- illustration (cadre de tranche) ---------- */
.art{position:relative;display:block;aspect-ratio:2/3;border-radius:10px;padding:3px;background:var(--rar)}
[data-rarity="SSR"] .art{background:var(--gold)}
[data-rarity="UR"] .art{background:var(--prism)}
.art img,.art .ph{width:100%;height:100%;border-radius:7px;object-fit:cover;object-position:50% 15%;background:#1D3468}
.art .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;text-align:center;color:rgb(251 247 238 / .8);font-size:12px;line-height:1.3;background:linear-gradient(180deg,color-mix(in srgb,var(--rar) 40%,#13224A),#0E1A3A)}
.ph svg{width:42%;height:auto;opacity:.55}

/* ---------- sections ---------- */
main>.sec{padding-block:40px 8px}
.sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:20px}
h2{margin:0;font-weight:800;font-size:clamp(22px,5vw,30px);line-height:1.2;overflow-wrap:anywhere}
.sec__note{margin:0;color:var(--fg-2);font-size:15px}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;font-weight:800}

/* Grille de cartes */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:24px 12px;margin:0;padding:0;list-style:none}
.tile{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.tile>a{display:flex;flex-direction:column;align-items:center;width:100%;color:var(--fg);text-decoration:none;border-radius:12px}
.tile .art{width:100%;transition:transform .2s ease}
.tile>a:hover .art{transform:translateY(-3px)}
.tile .pill{margin-top:-13px}
.tile .name{margin-top:6px;width:100%;font-weight:800;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.tile>a:hover .name{text-decoration:underline}
.tile .sub{margin-top:2px;width:100%;color:var(--fg-2);font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Série : éventail des trois cartes les plus rares */
.fan{justify-self:center;position:relative;width:min(300px,78vw);aspect-ratio:3/2.4;margin-top:8px}
.fan .art-w{position:absolute;top:0;width:46%;filter:drop-shadow(0 16px 20px rgb(4 10 30 / .55))}
.fan .art-w:nth-child(1){left:27%;z-index:3}
.fan .art-w:nth-child(2){left:2%;top:9%;transform:rotate(-9deg);z-index:2}
.fan .art-w:nth-child(3){left:52%;top:9%;transform:rotate(9deg);z-index:1}
.counts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.counts li{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.counts .pill{--pill-edge:transparent}

/* Anniversaires : la date en grand */
h1.dated{display:flex;flex-direction:column;gap:6px}
.dated .kicker{font-size:clamp(20px,4.6vw,28px);line-height:1.2;letter-spacing:0;color:rgb(251 247 238 / .86)}
.date{display:block;font-weight:800;font-size:clamp(56px,17vw,128px);line-height:.92;letter-spacing:-.03em;color:#F3D28C}
.daynav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:4px 0 0;padding:0;list-style:none}
.daynav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ivory)}

/* Calendrier des 366 jours */
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:24px 20px;margin:0;padding:0;list-style:none}
.month h3{margin:0 0 8px;font-weight:800;font-size:16px}
.month ol{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:0;padding:0;list-style:none}
.month a{display:flex;align-items:center;justify-content:center;min-height:32px;border-radius:6px;font-size:14px;color:var(--fg);text-decoration:none}
.month a:hover{background:var(--line)}
.month a[aria-current="page"]{background:var(--night);color:var(--ivory);font-weight:800}
@media (prefers-color-scheme:dark){.month a[aria-current="page"]{background:var(--champagne);color:var(--night)}}

/* Liste des séries */
.series-list{columns:1;column-gap:32px;margin:0;padding:0;list-style:none}
.series-list li{break-inside:avoid;border-bottom:1px solid var(--line)}
.series-list a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0;color:var(--fg);text-decoration:none}
.series-list a:hover .t{text-decoration:underline}
.series-list .t{font-weight:800;min-width:0;overflow-wrap:anywhere}
.series-list .n{flex:none;color:var(--fg-2);font-size:14px}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:24px}
.pager a{display:inline-flex;align-items:center;min-height:44px;font-weight:800}
.pager span{color:var(--fg-2)}

/* ---------- présentation (/presentation) ---------- */
.lead--strong{font-weight:800;color:var(--ivory)}
.free{justify-self:start;margin:4px 0 0;padding:8px 16px;border:1px solid rgb(216 178 114 / .55);border-radius:14px;background:rgb(216 178 114 / .1);color:#F3D28C;font-size:15px;line-height:1.45}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid rgb(251 247 238 / .55);color:var(--ivory);font-weight:800;font-size:16px;text-decoration:none}
.ghost:hover{border-color:var(--ivory);background:rgb(251 247 238 / .08)}
.ghost:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.quick{display:flex;flex-wrap:wrap;gap:0 22px;margin:0;padding:0;list-style:none}
.quick a{display:inline-flex;align-items:center;min-height:44px;color:var(--ivory);font-weight:800;font-size:15px}
.mark{justify-self:center;width:min(200px,46vw);aspect-ratio:1;filter:drop-shadow(0 18px 30px rgb(4 10 30 / .5))}
.mark svg{width:100%;height:100%}
.steps{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;padding:18px 18px 18px 70px;border:1px solid var(--line);border-radius:16px;background:var(--panel);counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:18px;top:18px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--night);color:#F3D28C;font-weight:800}
.steps h3{margin:0 0 4px;font-weight:800;font-size:18px;line-height:1.3}
.steps p{margin:0;color:var(--fg-2)}
.panels{display:grid;gap:16px;align-items:start}
.panel{min-width:0;padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.panel h2{margin-bottom:12px;font-size:clamp(20px,4.4vw,24px)}
.panel p{margin:0 0 12px}
.panel p:last-child{margin-bottom:0}
.providers{display:grid;gap:10px;margin:4px 0 12px}
.providers div{padding:12px 14px;border-radius:12px;background:var(--bg)}
.providers dt{font-weight:800}
.providers dd{margin:2px 0 0;color:var(--fg-2)}
.panel a{overflow-wrap:anywhere}
.more-link a{display:inline-flex;align-items:center;min-height:44px;font-weight:800}
@media (prefers-color-scheme:dark){.steps li::before{background:var(--champagne);color:var(--night)}}

/* ---------- pied ---------- */
.foot{margin-top:56px;padding-block:32px 40px;border-top:1px solid var(--line);color:var(--fg-2);font-size:14px}
.foot__in{display:grid;gap:16px}
.foot ul{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;list-style:none}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg)}
.foot p{margin:0;max-width:70ch}

@media (min-width:720px){
  :root{--gutter:24px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:28px 20px}
  .series-list{columns:2}
  .lead{font-size:18px}
  .steps,.panels{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .hero{padding-bottom:56px}
  .hero__body{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;padding-top:24px}
  .feature{width:280px;margin-right:24px}
  .fan{width:340px;margin-right:12px}
  .series-list{columns:3}
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps li{padding:68px 20px 22px}
  .mark{width:220px;margin-right:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.tile>a:hover .art{transform:none}}