/* MON PORTFOLIO-V3-KU — maquette (build v88). Valeurs reprises du pack KANA V85 (portal.css / kana-quiz styles.css).
   Mise en page : un fil central, en-tête V85 + bande 12 couleurs, cadres blancs à bord coloré, onglets fixes à droite. */
:root{
  color-scheme:light;
  --mesure:72ch;--paper:#fffdf9;--ink:#211f1b;--muted:#625d56;--text:#2e2b26;--line:#c9c0b4;--white:#fff;
  --gold:#f9db4f;--orange:#de8f44;--red:#cb4b36;--red-dark:#9b3424;--pink:#c63364;--magenta:#a32d78;--purple:#682e76;
  --indigo:#4a4886;--blue:#204f8e;--blue-mid:#2f68a3;--blue-light:#377db5;--teal:#49a39b;--green:#77b788;--lime:#91bd55;
  --serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Helvetica Neue",Arial,"Yu Gothic","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;min-height:100vh;color:var(--ink);font:14px/1.6 var(--sans);
  background:radial-gradient(circle at 12% 10%,rgba(32,79,142,.07),transparent 28rem),radial-gradient(circle at 88% 18%,rgba(203,75,54,.07),transparent 26rem),var(--paper)}
a{color:inherit}
.shell{width:min(1160px,calc(100% - 40px));min-height:100vh;margin:auto;display:flex;flex-direction:column}
main{flex:1}

/* ---------- en-tête (capture V85) ---------- */
.site-header{position:relative;min-height:96px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:26px;padding-block:6px}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--gold) 0 8%,var(--orange) 8% 16%,var(--red) 16% 24%,var(--pink) 24% 32%,var(--magenta) 32% 40%,var(--purple) 40% 48%,var(--indigo) 48% 56%,var(--blue) 56% 66%,var(--blue-light) 66% 74%,var(--teal) 74% 84%,var(--green) 84% 92%,var(--lime) 92% 100%)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand-logo{width:76px;height:auto;filter:drop-shadow(0 3px 3px rgba(32,79,142,.12))}
.brand-name{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.brand-jp{color:var(--blue);font:700 25px/1.2 var(--serif);letter-spacing:.1em}
.brand-sub{color:var(--red-dark);font:600 17px/1.2 Georgia,var(--serif);letter-spacing:.14em}
.header-centre{justify-self:center;color:var(--ink);font:800 13.5px/1.3 var(--sans);letter-spacing:.02em;text-decoration:none;text-align:center}
.header-centre span{margin:0 4px;font-weight:300}
.header-centre:hover{color:var(--red)}
.header-gaiyou{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none}
.gaiyou{color:var(--red);font:700 19px/1.35 var(--serif);letter-spacing:.08em}
.gaiyou rt{color:var(--red);font:700 .4em/1.2 var(--sans);letter-spacing:.06em}
.gaiyou-tr{color:var(--muted);font:600 9.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.lang-switch{display:flex;gap:4px;margin-right:14px}
.lang-btn{min-height:30px;min-width:40px;padding:4px 11px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--muted);font:800 11px/1 var(--sans);letter-spacing:.1em}
.lang-btn.is-on{border-color:var(--ink);background:var(--ink);color:#fff}
.lang-btn.is-soon{opacity:.38}

/* ---------- page de garde ---------- */
.cover-page main{display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding-block:30px 26px;min-height:640px}
.cover-inner{margin-block:auto;padding-block:20px;display:flex;flex-direction:column;align-items:center}
.cover-logo{width:150px;height:auto}
.kicker{margin-top:14px;color:var(--red);font-size:11px;font-weight:900;letter-spacing:.22em}
.cover-jp{margin:8px 0 0;color:var(--red);font:700 21px/1.6 var(--serif);letter-spacing:.08em}
.cover-jp rt{color:var(--red);font:700 .4em/1.2 var(--sans);letter-spacing:.06em}
.grand-titre{display:block;margin:20px 0 0;text-decoration:none;color:var(--ink)}
.grand-titre h1{margin:0;font:500 clamp(46px,8vw,92px)/1 var(--serif);letter-spacing:-.04em}
.grand-titre:hover,.grand-titre:focus-visible{color:var(--red);outline:none}
.grand-titre:focus-visible h1{text-decoration:underline;text-underline-offset:10px}
.porte{margin:30px auto 0;display:flex;flex-direction:column;align-items:center;width:152px}
.porte-principes{display:grid;grid-template-columns:repeat(3,44px);gap:10px;justify-content:center}
.porte-principes span{font:700 27px/1 var(--serif);text-align:center}
.p-rouge{color:#cb4b36}.p-bleu{color:#204f8e}.p-dore{color:#c99a00}
.barres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.barres i{display:block;height:4px}
.f-rouge{background:#cb4b36}.f-bleu{background:#204f8e}.f-dore{background:#f9db4f}
.porte .barres{width:152px;margin-top:9px}
.porte-souligne{width:152px;height:1px;margin-top:18px;background:#d8d2c8}
.acces-bas{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.acces{display:flex;flex-direction:column;align-items:center;gap:11px;text-decoration:none;color:var(--ink);max-width:48%}
.acces-nom{font:400 22px/1.4 var(--serif);letter-spacing:.1em;text-indent:.1em}
.acces .barres{width:150px}
.acces:hover .acces-nom,.acces:focus-visible .acces-nom{color:var(--red)}
.acces:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
footer{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px}

/* ---------- table des matières ---------- */
.page-head{padding:60px 4vw 26px}
.page-title{margin:0 0 14px;font:500 clamp(43px,6vw,75px)/1 var(--serif);letter-spacing:-.04em}
.page-head p{max-width:var(--mesure);margin:0;color:var(--muted);font-size:16px;line-height:1.75}
.cards{display:grid;grid-template-columns:1fr;gap:12px;padding:10px 4vw 72px}
.palette-card{position:relative;display:grid;grid-template-columns:74px 1fr;align-items:center;gap:22px;min-height:118px;padding:20px 26px 20px 34px;border:1px solid var(--line);background:#fff;text-decoration:none;box-shadow:6px 7px 0 rgba(32,79,142,.07)}
.palette-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--card-color)}
.palette-card::after{content:"";position:absolute;right:0;top:22px;bottom:22px;width:12px;border-radius:4px 0 0 4px;background:var(--card-color)}
.palette-rank{display:flex;flex-direction:column;align-items:center;font:700 30px/1 Georgia,serif;color:var(--card-ink,var(--card-color));text-align:center}
.palette-rank small{margin-top:5px;font:800 10px/1 var(--sans);letter-spacing:.14em}
.palette-card h2{margin:6px 0;font:600 23px/1.3 var(--serif)}
.palette-card h2 rt{color:var(--red);font:700 .42em/1.2 var(--sans)}
.palette-card p{margin:0;color:var(--muted);line-height:1.65}
.state{display:block;color:var(--card-ink,var(--card-color));font-size:10px;font-weight:900;letter-spacing:.16em}
.palette-card.is-soon{box-shadow:4px 5px 0 rgba(32,79,142,.04)}
.palette-card.is-soon .state{color:var(--muted)}
.palette-card.is-soon .palette-rank{opacity:.72}
.palette-card:hover,.palette-card:focus-visible{border-color:var(--card-color);outline:none}
.palette-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- onglets fixes (13) ---------- */
.palette-indexes{position:fixed;z-index:20;right:max(8px,calc(50% - 600px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;align-items:flex-end;height:min(78vh,620px)}
.palette-tab{position:relative;flex:1 1 0;max-height:44px;display:flex;align-items:center;justify-content:flex-end;width:34px;padding-right:7px;border:2px solid #fff;border-right:0;border-radius:8px 0 0 8px;box-shadow:0 3px 12px rgba(33,31,27,.2);text-decoration:none;overflow:hidden;transition:width .18s ease;background:var(--tab)}
.palette-tab .tab-n{position:absolute;left:5px;top:50%;transform:translateY(-50%);color:var(--tab-ink,#fff);font:800 10px/1 var(--sans)}
.tab-label{color:var(--tab-ink,#fff);font:800 10.5px/1.3 var(--sans);letter-spacing:.05em;text-align:right;white-space:normal;opacity:0;transition:opacity .14s ease}
.palette-tab:hover,.palette-tab:focus-visible{width:226px;outline:none}
.palette-tab:hover .tab-label,.palette-tab:focus-visible .tab-label{opacity:1}
.palette-tab:hover .tab-n,.palette-tab:focus-visible .tab-n{opacity:0}
.palette-tab.is-current{width:50px;box-shadow:0 4px 16px rgba(33,31,27,.3)}
.palette-tab.is-current:hover{width:226px}

/* ---------- page palette (capture V85 LES KANA) ---------- */
.titre-palette{margin:46px 0 0;text-align:center;font:400 clamp(26px,4.4vw,44px)/1.3 var(--serif);letter-spacing:.16em;text-indent:.16em}
.titre-palette small{display:block;margin-bottom:6px;font:800 11px/1 var(--sans);letter-spacing:.24em;color:var(--red)}
.acces-liste{display:flex;justify-content:center;flex-wrap:wrap;gap:22px clamp(28px,7vw,84px);margin:34px 0 8px}
.acces-liste .acces{max-width:none}
.acces-liste .acces-nom{font:600 15px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-indent:.12em}
.acces-liste .acces .barres{width:128px}
.acces-n{font:600 12px/1 var(--sans);color:var(--muted);letter-spacing:.14em}

.rubrique{max-width:820px;margin:46px auto 0}
.rubrique>h2{margin:0 0 4px;text-align:center;font:800 12px/1.2 var(--sans);letter-spacing:.24em;color:var(--ink)}
.rubrique>.barres{width:120px;margin:10px auto 22px}
.rubrique-note{margin:-8px auto 20px;max-width:56ch;text-align:center;color:var(--muted);font-size:12.5px}

.cadre{position:relative;margin:0 auto 26px;background:#fff;border:1px solid #cfc6b8;box-shadow:6px 7px 0 rgba(32,79,142,.07)}
.cadre-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px 11px;border-bottom:1px solid #e4ddd2;border-top:4px solid var(--c)}
.cadre-type{color:var(--c-ink,var(--c));font:900 11px/1.2 var(--sans);letter-spacing:.24em}
.cadre-num{color:var(--muted);font:600 11px/1.2 var(--sans);letter-spacing:.1em}
.cadre h3{margin:0;padding:16px 18px 4px;font:600 21px/1.4 var(--serif);text-wrap:balance}
.cadre-etat{padding:0 18px 14px;color:var(--muted);font-size:12px;letter-spacing:.04em}
.cadre-etat b{color:var(--c-ink,var(--c))}
.cadre-corps{padding:0 0 4px}
.cadre iframe{display:block;width:100%;height:760px;border:0;border-top:1px solid #e4ddd2;background:#fff}
.cadre-pied{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;padding:11px 18px;border-top:1px solid #e4ddd2;font-size:12px;color:var(--muted)}
.cadre-pied a{color:var(--blue);font-weight:700;text-underline-offset:3px}
.c-chevalet{--c:var(--blue)}
.c-jisshu{--c:var(--red)}
.c-douga{--c:var(--gold);--c-ink:#8a6d00}
.attente{display:grid;place-items:center;min-height:160px;margin:6px 18px 18px;border:1px dashed var(--line);background:repeating-linear-gradient(135deg,#fff 0 12px,#faf7f1 12px 24px);color:var(--muted);font:600 17px/1.5 var(--serif);letter-spacing:.2em;text-align:center;padding:18px}
.attente small{display:block;margin-top:6px;font:500 11px/1.5 var(--sans);letter-spacing:.06em}
.lecteur{position:relative;display:grid;place-items:center;aspect-ratio:16/9;max-width:min(520px,calc(100% - 36px));margin:4px auto 18px;background:#211f1b;color:#fff;text-decoration:none}
.lecteur-lien{display:flex;flex-direction:column;align-items:center;gap:10px;font:700 13px/1 var(--sans);letter-spacing:.1em}
.lecteur-lien svg{width:54px;height:54px;fill:var(--gold)}
.lecteur-hote{position:absolute;left:12px;bottom:10px;color:#c9c0b4;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}

.mujunjo-note{max-width:var(--mesure);margin:0;padding:16px 18px 18px;border-top:1px solid #e4ddd2;color:var(--text);font-size:12.5px;line-height:1.9}
.mujunjo-note>span,.mujunjo-note b{color:var(--red)}
.mujunjo-note ruby rt,.mujunjo-note rt{color:var(--red);font:700 .6em/1.2 var(--sans)}
.mujunjo-note .brouillon{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--line);color:var(--muted);font:700 9.5px/1.5 var(--sans);letter-spacing:.1em;vertical-align:1px}

.progress-board{display:grid;grid-template-columns:1fr repeat(3,130px);gap:24px;align-items:center;margin:48px 0 0;border-top:1px solid var(--blue);border-bottom:1px solid var(--red);padding:26px 4vw;background:linear-gradient(90deg,rgba(32,79,142,.045),rgba(203,75,54,.045))}
.progress-board .k{color:var(--blue);font:800 11px/1.2 var(--sans);letter-spacing:.2em}
.progress-board h2{margin:8px 0 0;font:500 20px/1.5 var(--serif)}
.progress-board .stat{border-left:1px solid #d7ccbf;padding-left:16px}
.progress-board .stat b{display:block;color:var(--purple);font:700 30px/1.1 Georgia,serif}
.progress-board .stat.rouge b{color:var(--red)}
.progress-board .stat span{color:#3a362f;font-size:12px}
.progress-board .sous{grid-column:1/-1;margin:-6px 0 0;color:var(--muted);font-size:11.5px}

.pied-page{margin-top:40px}

@media(max-width:760px){
  .shell{width:min(100% - 32px,1160px)}
  .site-header{grid-template-columns:auto 1fr;gap:10px 12px;padding-block:10px 12px}
  .brand-jp{font-size:19px}.brand-sub{font-size:13px}.brand-logo{width:58px}
  .header-centre{grid-column:1/-1;grid-row:2;justify-self:start;font-size:12px}
  .lang-switch{margin-right:0;justify-self:end}
  .header-gaiyou{justify-self:end}
  .cards{padding-inline:0}.page-head{padding-inline:0}
  .palette-card{grid-template-columns:52px 1fr;gap:14px;padding:18px 22px}
  .palette-card h2{font-size:19px}
  .palette-indexes{top:auto;right:8px;bottom:8px;transform:none;flex-direction:row;height:auto;gap:3px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 16px)}
  .palette-tab,.palette-tab.is-current,.palette-tab:hover,.palette-tab.is-current:hover{flex:none;width:23px;height:24px;max-height:none;padding:0;border:1px solid #fff;border-radius:5px;justify-content:center}
  .palette-tab .tab-n{position:static;transform:none;font-size:9px}
  .tab-label{display:none}
  .acces-nom{font-size:15px}.acces .barres{width:96px}.acces{max-width:46%}
  .cover-page main{min-height:600px}
  .progress-board{grid-template-columns:1fr 1fr 1fr;gap:12px;padding-inline:12px}
  .progress-board>div:first-child{grid-column:1/-1}
  .cadre iframe{height:640px}
  footer{flex-direction:column}
  body{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){.palette-tab,.tab-label{transition:none}}

/* ---------- V88 : lecteurs intégrés, 概要 ---------- */
.cadre iframe{contain:layout paint}
.cadre .lecteur iframe{width:100%;height:100%;border:0;border-top:0}
.lecteur{display:block}
.faq{max-width:880px;margin:0 auto;padding:20px 20px 80px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font:600 21px/1.4 var(--serif)}
.faq p{max-width:var(--mesure);color:var(--muted);line-height:1.75}
.faq strong{color:var(--ink)}
.faq ruby rt{color:var(--red);font:700 .5em/1.2 var(--sans)}
.faq .essai-furigana{margin:10px 0;font:400 26px/2 var(--serif);color:var(--ink)}
.faq .renvoi-note{margin-left:3px;color:var(--red);font:700 11px/1 Georgia,serif;vertical-align:super;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:34px;padding:12px 24px;border:1px solid var(--blue);border-radius:4px;background:var(--blue);color:#fff;text-decoration:none;font-weight:800;box-shadow:6px 6px 0 rgba(203,75,54,.18)}
.titre-palette rt{color:var(--red);font:700 .3em/1.2 var(--sans);letter-spacing:.1em}
.rubrique.theme>h2{font:600 clamp(18px,2.6vw,24px)/1.4 var(--serif);letter-spacing:.14em}

/* ---- V91 : page palette provisoire (4 livrables + 1 vidéo) ---- */
.pv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"y0 . k0" "y1 dg k1";gap:34px clamp(14px,4vw,56px);margin:38px auto 30px;max-width:1040px;align-items:start}
.pv-grid .pv{max-width:none;align-items:center;text-align:center;gap:9px}
.pv-grid .pv-code{display:inline-block;padding:2px 14px 3px;border:2px solid #111;border-radius:999px;font:500 17px/1.2 var(--serif);letter-spacing:.06em;color:#111}
.pv-grid .pv-nom{font:600 clamp(15px,1.9vw,19px)/1.45 var(--sans);letter-spacing:.06em;text-transform:none;text-indent:0}
.pv-grid .pv-l2{font:700 12px/1.4 var(--sans);letter-spacing:.34em;text-indent:.34em;color:#2454bd}
.pv-grid .pv-l3{font:400 12px/1.6 var(--sans);color:var(--muted);letter-spacing:.04em}
.pv-grid .pv .barres{width:128px}
.pv-grid .pv-douga .pv-code{border-color:#cb4b36;color:#cb4b36}
.pv-grid .pv-douga{padding:14px 10px;border:1px dashed #cfc6b8;background:#fffdf8}
.pv-grid .pv-yomi.pv-r1{grid-area:y0}.pv-grid .pv-yomi.pv-r2{grid-area:y1}
.pv-grid .pv-kazu.pv-r1{grid-area:k0}.pv-grid .pv-kazu.pv-r2{grid-area:k1}
.pv-grid .pv-douga{grid-area:dg}
.pv-video{max-width:760px;margin:0 auto 24px}
@media(max-width:760px){
 .pv-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"y0" "y1" "dg" "k0" "k1";gap:26px;margin-top:26px}
}
@media(max-width:520px){.titre-palette{font-size:21px;letter-spacing:.08em;text-indent:.08em}}

.plateforme{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:560px;margin:8px auto 34px;padding:22px 18px;text-align:center;text-decoration:none;color:var(--ink);background:#fff;border:1px solid #cfc6b8;box-shadow:6px 7px 0 rgba(32,79,142,.07)}
.plateforme .pf-kick{font:400 13px/1.5 var(--serif);letter-spacing:.18em;color:var(--muted)}
.plateforme .pf-name{font:600 clamp(20px,3.4vw,28px)/1.4 var(--serif);letter-spacing:.12em}
.plateforme .barres{width:150px}
.plateforme .pf-go{font:700 13px/1 var(--sans);letter-spacing:.14em;color:#2454bd}
.plateforme:hover .pf-name{color:var(--red)}
.faq h3{margin:16px 0 6px;font:700 15px/1.5 var(--sans);letter-spacing:.06em}