/* TSUZUKI - DA "La Planche" (famille Cult/Indie).
   La page EST une planche de manga imprimee : papier chaud, cases encrees, gouttieres.
   L'accent suit le GENRE de la serie affichee (data-accent), la structure ne bouge jamais.
   Zero fond sombre. Panchang aux gros titres seuls (pateuse en petit corps). */

:root{
  --etabli:#e9e5dd;      /* le papier */
  --case:#ffffff;        /* la case */
  --case-creuse:#f5f2ec; /* fond des blocs en attente */
  --encre:#0f1113;
  --gris:#565043;        /* 8,0:1 sur blanc */
  --bord:3px;
  --gouttiere:14px;
  /* accents par genre : les 4 passent AA sur blanc et portent du blanc */
  --acc:#1a44d0; --sur-acc:#ffffff;
  /* Statuts, fixes quel que soit l'accent. Calibres sur le PAPIER (#e9e5dd), pas sur
     le blanc : c'est le fond le plus clair sur lequel ils apparaissent qui commande.
     Sur blanc ils sont donc largement au-dessus du seuil. */
  --vert:#2a6f46;   /* 4,8:1 sur papier - 6,1:1 sur blanc */
  --ambre:#8a5500;  /* 5,0:1 sur papier - 6,2:1 sur blanc */
  --neutre:#625d51; /* 5,2:1 sur papier - 6,6:1 sur blanc */
  --titres:'Panchang','Archivo Black',Impact,system-ui,sans-serif;
  --corps:'General Sans','Helvetica Neue',Arial,system-ui,sans-serif;
}
[data-accent="action"]  { --acc:#d9330c; }  /* vermillon  4,7:1 */
[data-accent="sport"]   { --acc:#00785a; }  /* jade       5,5:1 */
[data-accent="seinen"]  { --acc:#1a44d0; }  /* bleu encre 7,6:1 */
[data-accent="romance"] { --acc:#9a6400; }  /* ambre      5,0:1 */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;
  color:var(--encre);font-family:var(--corps);font-size:16px;line-height:1.55;
  overflow-x:hidden;font-variant-numeric:tabular-nums;
  background-color:var(--etabli);
  background-image:radial-gradient(rgba(15,17,19,.06) 1.25px,transparent 1.35px);
  background-size:8px 8px;background-attachment:fixed}
main{flex:1}
.saut{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--encre);color:var(--case);padding:.75rem 1.25rem;font-weight:700;
  text-decoration:none;border-radius:0 0 6px 0}
.saut:focus{left:0}
.wrap{max-width:1140px;margin:0 auto;padding-left:18px;padding-right:18px}
.case{background:var(--case);border:var(--bord) solid var(--encre);
  box-shadow:6px 6px 0 var(--encre)}
a{color:var(--encre)}

/* ---- bandeau et navigation ---- */
.tete{background:var(--case);border-bottom:4px solid var(--encre)}
.tete-in{max-width:1140px;margin:0 auto;padding:13px 18px;
  display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap}
.marque{font-family:var(--titres);font-weight:800;font-size:23px;letter-spacing:.06em;
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
/* Le logo (kanji 続 encre sur case blanche) existait deja en favicon/app-icon, jamais
   montre dans l'entete (23/08, Remi : « ya pas le logo »). Meme case que .case ailleurs
   sur le site : bordure encree, angles vifs, jamais de rayon flou. */
.marque .logo{width:30px;height:30px;border:2px solid var(--encre);flex:none;display:block}
.marque .kana{font-family:var(--corps);font-weight:600;font-size:13px;
  letter-spacing:.22em;color:var(--acc);margin-left:9px}
.nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.nav a{font-weight:600;font-size:14px;text-decoration:none;padding-bottom:2px;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--encre)}
.nav a[aria-current="page"]{border-bottom-color:var(--acc)}
.bandeau{background:var(--encre);color:var(--case);padding:8px 16px;text-align:center;
  font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase}

/* ---- titres et sections ---- */
.entete{padding:34px 0 6px;position:relative}
/* Le minimum est cale sur le mot insecable le plus long du site ("CONFIDENTIALITE",
   15 caracteres) : au-dessus de 24px il sort de la colonne en 390px de large.
   break-word en filet de securite pour un titre de serie plus long a l'avenir. */
h1{font-family:var(--titres);font-weight:800;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(24px,5.4vw,46px);text-transform:uppercase;overflow-wrap:break-word}
.entete .kj{position:absolute;right:0;top:6px;font-size:clamp(56px,9vw,96px);
  line-height:1;color:var(--encre);opacity:.06;pointer-events:none;user-select:none}
/* ---- LA CASE D'OUVERTURE (le hero) ----
   Restauree le 23/08 depuis previz/demo-profondeur.html, la 1re maquette validee :
   Remi « on arrive direct dans mon carnet, y a aucun hero... c'est ca la DA de
   TSUZUKI ». C'est la case d'ouverture d'une planche : lignes de vitesse tracees
   en SVG, cartouche encre incline, lettrage a ombre portee dans l'accent, trame
   imprimee en pied, kanji geant en filigrane.
   ⚠️ Etat de repos toujours peint : aucune opacite nulle ici, seul .flash (pur
   decor) est invisible au repos par nature. Si le JS ne tourne pas, la case est
   complete et lisible, elle perd juste le mouvement. */
.hero{position:relative;overflow:hidden;background:var(--case);
  border:var(--bord) solid var(--encre);box-shadow:6px 6px 0 var(--encre);
  margin-top:26px;padding:34px 30px 30px;min-height:262px}
.hero .vitesse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* bande imprimee en pied de case : de la matiere, mais JAMAIS sous le texte */
.hero .trame-hero{position:absolute;left:0;bottom:0;width:100%;height:34px;opacity:.24;
  pointer-events:none;
  background-image:radial-gradient(var(--encre) 1.35px,transparent 1.45px);
  background-size:7px 7px}
.hero .kanji{position:absolute;right:-16px;bottom:-52px;font-size:224px;line-height:1;
  font-weight:700;color:var(--encre);opacity:.07;pointer-events:none;user-select:none}
.hero-in{position:relative}
/* Le duo texte + illustration groupe, sur l'accueil seulement (23/08, Remi : "creer une
   image a mettre a droite" — Luffy/Naruto/Conan/Gon/Tanjiro, encre pure, produite pour
   TSUZUKI comme les portraits). Jamais de bordure propre sur l'image : elle vit DANS
   la case du hero, un 2e cadre ferait un cadre dans le cadre. */
/* 23/08 (retour Remi, 9e passe) : image calee au ras du bas du hero (align-items:flex-end
   au lieu de center) — les personnages posent pied sur la trame du bas au lieu de flotter
   au milieu, plus solide visuellement. */
.hero-duo .hero-in{position:relative;display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.hero-duo .hero-texte{flex:1 1 320px;min-width:0}
/* 23/08 (retour Remi, 8e passe) : « on doit pas voir que c'est une image inseree ». Toutes
   les passes precedentes (blanc assorti, multiply, masque radial, marge) traitaient un
   RECTANGLE — la vraie solution etait de ne plus en avoir un du tout. Image DETOUREE (fond
   retire via l'outil dedie, PNG alpha reel) : les personnages flottent directement sur les
   lignes de vitesse du hero, aucun cadre possible puisqu'il n'y a plus de fond a cadrer.
   Couleur ajoutee sur quelques elements (bandeau du chapeau, cheveux) a la demande de Remi —
   ce n'est plus de l'encre pure sur cette illustration precise, seulement sur les portraits
   perso. Largeur reprise a l'identique de la version XL validee (clamp 280-400). */
.hero-visuel{flex:none;width:clamp(280px,34vw,400px);height:auto;position:relative;z-index:1}
/* 23/08 (retour Remi, pilote Luffy) : sur une fiche serie, le portrait ne doit PAS faire
   grossir la case au-dela de sa taille de texte-seul - contrairement au duo d'accueil (tune
   large expres, cf. ci-dessus), ici c'est la hauteur du bloc texte qui commande, l'image
   s'y cale, jamais l'inverse. Piloté par la hauteur (pas la largeur, qui varie trop d'un
   perso a l'autre selon le cadrage retenu a la generation). */
.hero-perso .hero-visuel{width:auto;max-width:260px;height:270px;max-height:270px}
/* 23/08 (retour Remi, 3e passe) : le flex du duo d'accueil pousse le perso tout contre le
   bord droit - or c'est PILE la ou vit le kanji geant du fond (bottom-right, meme coin), qui
   devient invisible dessous, et ca laisse un vrai trou blanc au milieu (entre le texte et le
   perso) ou rien ne se passe. Passe en grille : colonne texte a sa largeur naturelle, colonne
   perso = TOUT l'espace restant, perso centre DEDANS (donc au milieu du vide, plus dans le
   coin du kanji). */
/* colonne texte plafonnee (minmax(0,...)) : un titre long ("JoJo's Bizarre Adventure") sur une
   piste grid "auto" pousse sinon la colonne a sa largeur max-content SANS retour a la ligne,
   ecrasant la colonne perso a quelques dizaines de px, recollee dans le coin du kanji.
   460px suit le max-width:52ch du chapo, meme borne que le texte lui-meme respecte deja. */
.hero-perso .hero-in{display:grid;grid-template-columns:minmax(0,460px) 1fr;align-items:center;gap:18px}
.hero-perso .hero-visuel{justify-self:center}
@media (max-width:640px){
  .hero-visuel{display:none}
}
.cartouche{display:inline-block;background:var(--encre);color:var(--case);
  font-family:var(--titres);font-weight:700;font-size:clamp(15px,2.6vw,21px);
  letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;transform:rotate(-1.2deg)}
/* serie qui ne sort plus : le cartouche passe dans l'accent du genre, meme signal
   que la pastille de statut mais dans le langage de la case. Les 4 accents portent
   du blanc en AA (verifie 21/08), --sur-acc suit l'accent. */
.cartouche.pause{background:var(--acc);color:var(--sur-acc)}
.hero h1{font-size:clamp(30px,6.6vw,64px);line-height:1.16;margin:20px 0 14px;
  text-shadow:3px 3px 0 var(--acc)}
.hero .chapo{max-width:52ch}
.hero .chapo b{color:var(--encre);font-weight:600}
/* fiche serie : les etiquettes de genre et le lien du filtre vivent dans la case */
.hero .etiquettes{margin:0 0 12px}
.hero .lien-filtre{margin-top:12px}
/* le flash d'impact : purement decoratif, donc invisible au repos par nature */
.hero .flash{position:absolute;inset:0;background:var(--acc);opacity:0;
  pointer-events:none;mix-blend-mode:multiply}
@media (max-width:480px){
  .hero{padding:26px 20px 24px;min-height:0;margin-top:18px}
  .hero .kanji{font-size:150px;bottom:-34px;right:-10px}
}

/* ---- HERO V3, accueil seul (28/08, maquette previz/hero-v3.html validee par
   Remi : « vendu, deploie »). Regard webmarketing/design : un hero = un job
   (taper sa serie). Le champ de recherche est le CTA, le titre une promesse
   en bas de casse, les lignes de vitesse sont clippees autour du personnage
   (cf. lignesDeVitesse dans tsuzuki.js) et la photo est ancree bas-droit HORS
   du calcul de hauteur. Scope .hero-duo SANS .hero-perso : les fiches serie
   gardent leur lettrage tant que la question n'est pas tranchee. ---- */
.hero-duo:not(.hero-perso){box-shadow:4px 4px 0 var(--encre);
  padding:26px 32px 24px;min-height:0}
.hero-duo:not(.hero-perso) .cartouche{font-size:clamp(11.5px,1.5vw,13px);
  padding:4px 10px;letter-spacing:.07em}
.hero-duo:not(.hero-perso) h1{font-size:clamp(22px,3.2vw,34px);font-weight:700;
  line-height:1.25;letter-spacing:0;text-shadow:none;text-transform:none;
  margin:12px 0 10px}
/* l'accent se reduit a un filet de 3px sous le mot-cle : zero bloc, zero ombre */
.hero-duo:not(.hero-perso) h1 .hl{color:var(--acc);box-shadow:inset 0 -3px 0 var(--acc)}
.hero-duo:not(.hero-perso) .chapo{font-size:15.5px;max-width:46ch}
/* le CTA : le champ est la star du hero */
.hero-duo:not(.hero-perso) .cherche{margin-top:16px;max-width:460px}
.hero-duo:not(.hero-perso) .cherche input{font-size:16px;padding:11px 12px}
/* la photo : ancree au coin bas-droit, pieds sur la trame, absolute donc elle
   ne pousse plus la hauteur ; le texte reserve sa zone. Retiree sous 900px :
   aucun chevauchement possible. */
.hero-duo:not(.hero-perso) .hero-in{display:block}
.hero-duo:not(.hero-perso) .hero-texte{padding-right:270px}
.hero-duo:not(.hero-perso) .hero-visuel{position:absolute;right:16px;bottom:0;
  width:clamp(180px,20vw,250px)}
@media (max-width:900px){
  .hero-duo:not(.hero-perso) .hero-visuel{display:none}
  .hero-duo:not(.hero-perso) .hero-texte{padding-right:0}
}
/* flottement leger : la case reste vivante apres la choregraphie d'entree.
   Coupe net chez prefers-reduced-motion (media query). */
@media (prefers-reduced-motion: no-preference){
  .hero-duo:not(.hero-perso) .hero-visuel{animation:hero-flotte 7s ease-in-out 1.4s infinite alternate}
  @keyframes hero-flotte{from{transform:translateY(0)}to{transform:translateY(-4px)}}
}
.trait{width:64px;height:7px;background:var(--acc);margin:15px 0;transform-origin:left center}
.chapo{color:var(--gris);font-size:16px;max-width:64ch}
section{padding-top:68px}
/* Titre de section = ligne de titre courant d'un livre imprime (23/08) : le titre
   a gauche, le kanji-repere en bout de ligne, un filet d'encre COMPLET dessous.
   Remplace le trait rouge repete sous chaque h2 (« style IA », Remi) — le trait
   accent ne survit que sous le h1 : une signature par page, pas six. Le kanji
   cesse d'etre un fantome decoratif a 6 % : petit, plein, couleur du genre. */
section h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  font-family:var(--titres);font-weight:700;font-size:clamp(19px,2.6vw,25px);
  text-transform:uppercase;letter-spacing:.01em;border-bottom:2px solid var(--encre);
  padding-bottom:12px;margin-bottom:18px}
section h2 .kj{margin-left:auto;flex:none;font-family:var(--corps);font-weight:700;
  font-size:20px;line-height:1;color:var(--acc);letter-spacing:.1em;
  white-space:nowrap;pointer-events:none;user-select:none}
/* La traduction du kanji, a cote (23/08, Remi : « on le met et on traduit ») :
   petit mot gris, jamais une glose avec article. */
section h2 .kj i{font-style:normal;font-weight:500;font-size:11.5px;color:var(--gris);
  margin-left:8px;letter-spacing:.04em;text-transform:none}
.sous{color:var(--gris);font-size:14.5px;max-width:70ch;margin-bottom:18px}

/* [hidden] doit gagner : sans cette ligne, le display:flex de .carte ecrase le
   display:none du navigateur et une carte "masquee" reste peinte a l'ecran. */
[hidden]{display:none !important}

/* ---- grilles et cartes ----
   Flex et non grid, deliberement : les rangees pleines s'etirent pour occuper toute
   la largeur (zero espace mort), et une derniere rangee incomplete se CENTRE au lieu
   de laisser une carte seule collee a gauche a cote d'un vide. La largeur maximale
   empeche une carte isolee de devenir absurdement large. */
.grille{display:flex;flex-wrap:wrap;gap:var(--gouttiere);justify-content:center}
.grille > *{flex:1 1 292px;max-width:420px}

/* Bande de chiffres, en bento : le total porte la rangee, les trois etats se
   rangent a cote. Tailles differentes parce que l'importance differe. */
.bento{display:grid;gap:var(--gouttiere);grid-template-columns:1.6fr 1fr;
  grid-template-rows:repeat(3,1fr)}
.bento > :first-child{grid-row:span 3;justify-content:center}
.bento > :first-child .gros{font-size:clamp(44px,7vw,72px)}
@media (max-width:760px){
  .bento{grid-template-columns:1fr;grid-template-rows:none}
  .bento > :first-child{grid-row:auto}
}
.carte{padding:17px 19px;display:flex;flex-direction:column;gap:9px}
.carte-lien{text-decoration:none;color:inherit;
  transition:transform .08s ease,box-shadow .08s ease}
.carte-lien:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--encre)}
.carte .haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.carte h3{font-family:var(--corps);font-weight:600;font-size:16.5px;line-height:1.25}
.carte .ligne{font-size:13.5px;color:var(--gris)}
.carte .ligne b{color:var(--encre);font-weight:600}
.carte .alerte{font-size:12.5px;color:var(--gris);border-top:2px solid var(--etabli);
  padding-top:8px;margin-top:2px}
/* Carte "Mon carnet" de l'accueil (23/08) : avant, .carte-lien etait la case elle-meme (un
   <a> plein). Ici la case reste un <div>, le lien ne couvre que le titre+la ligne, pour
   laisser la place a un bouton "Retirer" qui n'est pas un lien de navigation. Le survol de
   la carte entiere reprend le meme mouvement qu'avant (transform+ombre), neutralise sur le
   lien interne pour ne pas le dupliquer. */
.carnet-carte{transition:transform .08s ease,box-shadow .08s ease}
.carnet-carte:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--encre)}
.carnet-carte .carte-lien{display:flex;flex-direction:column;gap:9px}
.carnet-carte .carte-lien:hover{transform:none;box-shadow:none}
.carnet-retirer{align-self:flex-start;background:none;border:none;padding:0;
  font-family:var(--corps);font-size:12.5px;color:var(--gris);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.carnet-retirer:hover{color:var(--encre)}

/* ---- pastilles de statut ---- */
.pastille{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;flex:none}
.pastille .pt{width:9px;height:9px;border-radius:50%;flex:none}
.st-diffusion{color:var(--vert)} .st-diffusion .pt{background:var(--vert)}
.st-pause{color:var(--ambre)} .st-pause .pt{background:var(--ambre)}
.st-termine{color:var(--neutre)} .st-termine .pt{background:var(--neutre)}

/* ---- boutons (bordure epaisse + ombre dure qui s'ecrase au clic) ---- */
.bouton{display:inline-block;font-family:var(--corps);font-weight:600;font-size:14px;
  letter-spacing:.02em;color:var(--encre);background:var(--case);text-decoration:none;
  border:var(--bord) solid var(--encre);box-shadow:4px 4px 0 var(--encre);
  padding:9px 16px;cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease,background-color .12s ease,color .12s ease}
.bouton:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--encre)}
.bouton:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--encre)}
.bouton[aria-pressed="true"],.bouton.plein{background:var(--acc);color:var(--sur-acc)}
.bouton:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,
button:focus-visible{
  outline:3px solid var(--acc);outline-offset:2px}
.barre-outils{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.compte{font-size:13.5px;color:var(--gris)}

/* ---- formulaires ---- */
label{font-weight:600;font-size:13.5px;display:block;margin-bottom:5px}
input[type="number"],input[type="search"],select{font-family:var(--corps);font-size:15px;
  color:var(--encre);background:var(--case);border:var(--bord) solid var(--encre);
  padding:8px 11px;width:100%;max-width:100%}
.champs{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.champ{flex:1 1 160px;min-width:130px}
.aide{font-size:12.5px;color:var(--gris);margin-top:6px}

/* ---- recherche du hero : le premier geste de quelqu'un qui debarque ---- */
.cherche{position:relative;margin-top:22px;max-width:420px}
.cherche label{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.cherche-liste{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:100%;
  z-index:5;background:var(--case);border:var(--bord) solid var(--encre);
  border-top:0;box-shadow:6px 6px 0 var(--encre)}
.cherche-liste li{border-top:2px solid var(--encre)}
.cherche-liste li:first-child{border-top:0}
.cherche-liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;text-decoration:none;font-weight:600;font-size:14.5px}
.cherche-liste a:hover,.cherche-liste a:focus-visible{background:var(--encre);color:var(--case)}
.cherche-liste a:hover .pastille,.cherche-liste a:focus-visible .pastille{color:var(--case)}
.cherche-liste .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cherche-rien{padding:10px 12px;font-size:13.5px;color:var(--gris)}
.cherche-raccourcis{font-size:13px;color:var(--gris);margin-top:9px}
.cherche-raccourcis a{font-weight:600;color:var(--encre)}

/* ---- carte-chiffre du catalogue : elle MENE quelque part, elle le dit ---- */
/* width:fit-content ET align-self : la premiere case du bento est un conteneur flex,
   qui "bloquifie" ses enfants — sans ca, inline-block redevient block et le trait
   court sur toute la largeur de la carte, ou il lit comme un separateur, plus
   comme un lien. Meme effet sur mobile, ou les cases passent en pleine largeur. */
.mene{font-weight:600;font-size:13px;margin-top:10px;color:var(--acc);
  border-bottom:2px solid var(--acc);display:inline-block;padding-bottom:1px;
  width:fit-content;align-self:flex-start}

/* ---- bloc "pas encore releve" : deliberement en creux, jamais casse ---- */
.attente{background:var(--case-creuse);border:2px dashed var(--neutre);padding:16px 18px}
.attente .etiq{font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--neutre);display:block;margin-bottom:6px}
.attente p{font-size:14px;color:var(--gris);max-width:66ch}

/* ---- reperes de fraicheur ---- */
.frais{font-size:12.5px;color:var(--gris)}
.perime{color:var(--ambre);font-weight:600}

/* ---- tables ---- */
.tableau{width:100%;border-collapse:collapse;background:var(--case);
  border:var(--bord) solid var(--encre);box-shadow:6px 6px 0 var(--encre)}
.tableau caption{text-align:left;font-size:13.5px;color:var(--gris);padding-bottom:10px}
.tableau th,.tableau td{text-align:left;padding:11px 14px;font-size:14px;
  border-bottom:2px solid var(--etabli)}
.tableau th{font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--encre);color:var(--case)}
.tableau tr:last-child td{border-bottom:none}
.tableau td a{font-weight:600}
.defile{overflow-x:auto}

/* ---- tableau des arcs (23/08) : numero d'ordre, marqueur d'arc en cours.
   Le titre est souligne (affordance de lien), les colonnes sont NOMMEES :
   fini le "ch. 1 a 7" muet en bout de ligne. ---- */
.tableau-arcs td:first-child{width:60%}
.tableau-arcs .num{font-family:var(--titres);font-weight:700;font-size:11.5px;
  color:var(--gris);margin-right:12px;letter-spacing:.08em}
.encours{font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--acc);margin-left:10px;white-space:nowrap}
/* Les noms dans les listes-lignes (personnages) sont soulignes : sur mobile il
   n'y a pas de survol, le soulignement est la seule affordance de clic. */
.ligne-mini .nom{text-decoration:underline;text-underline-offset:3px}

/* ---- fiche serie ---- */
.releve{display:grid;gap:var(--gouttiere);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.releve .case{padding:18px 20px}
.releve h3{font-family:var(--corps);font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-bottom:12px}
.gros{font-family:var(--titres);font-weight:800;font-size:clamp(30px,5vw,42px);line-height:1}
.gros .u{font-family:var(--corps);font-weight:600;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gris);margin-left:8px}
.ligne-fiche{font-size:14px;color:var(--gris);margin-top:10px}
.ligne-fiche b{color:var(--encre);font-weight:600}
/* Interdit grave de Remi (06/08/2026) : pas de liseret colore PARTIEL (border-left
   ou border-top seul), "c'est trop IA". Soit la bordure fait tout le tour, soit rien.
   Les genres sont donc du texte nu, la note un simple aplat, et le resultat -- le bloc
   qui doit accrocher l'oeil -- porte une bordure accent COMPLETE. */
/* Lien vers la page dediee du filtre de contenu : sobre, texte simple souligne,
   pose a part du fil de lecture (pas une section, pas un badge colore). */
.lien-filtre{margin-top:14px}
.lien-filtre a{font-weight:600;font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px}

/* Mini-nav de fiche serie (23/08), rendue COLLANTE le meme jour : le sommaire
   reste sous la main sur toute la page sans manger la lecture. C'est le "titre
   courant" d'un livre : bande de papier blanc, filet d'encre, nom de la serie
   en rappel, liens soulignes separes par des points -- JAMAIS une pilule
   (interdit du 06/08). Le lien de la section courante passe a l'accent via
   initMiniNav (tsuzuki.js) ; sans JS, tout marche pareil, sans le marquage. */
html{scroll-behavior:smooth}
#rattrapage,#arcs,#personnages,#bonus{scroll-margin-top:64px}
.mini-nav{position:sticky;top:0;z-index:40;display:flex;align-items:baseline;
  gap:0 16px;background:var(--case);border-bottom:3px solid var(--encre);
  margin:30px -18px 0;padding:11px 18px}
.mini-nav .qui{font-family:var(--titres);font-weight:800;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;margin-right:10px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:34%}
.mini-nav a{font-weight:600;font-size:13.5px;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;color:var(--encre)}
.mini-nav a.actif{color:var(--acc);text-decoration-thickness:2.5px}
.mini-nav a+a::before{content:"·";margin-right:16px;color:var(--neutre);
  text-decoration:none;display:inline-block}
@media (max-width:640px){
  /* Une seule ligne qui defile en travers plutot que deux lignes empilees :
     la barre reste basse, le contenu reste visible. */
  .mini-nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

.etiquettes{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.etiq-genre{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris)}
.etiq-genre + .etiq-genre::before{content:"·";margin-right:14px;color:var(--neutre)}
.note{font-size:13.5px;color:var(--gris);padding:11px 15px;background:var(--case-creuse);
  margin-top:14px;max-width:74ch}
.note b{color:var(--encre)}
.resultat{background:var(--case-creuse);border:var(--bord) solid var(--acc);
  padding:15px 17px;margin-top:16px}
.resultat .gros{font-size:clamp(24px,4vw,34px)}
.resultat p{font-size:14px;color:var(--gris);margin-top:8px;max-width:70ch}

/* ---- verdicts de densite (filtre de contenu) : memes couleurs que les pastilles
   de statut, elles restent fixes quel que soit l'accent-genre affiche. ---- */
.verdict{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;flex:none}
.verdict .pt{width:9px;height:9px;border-radius:50%;flex:none}
.v-ponctuel{color:var(--vert)} .v-ponctuel .pt{background:var(--vert)}
.v-recurrent{color:var(--ambre)} .v-recurrent .pt{background:var(--ambre)}
.v-structurel{color:var(--encre)} .v-structurel .pt{background:var(--encre)}
/* Verdict honnete quand la source ne suffit pas : un pointille, jamais un chiffre
   invente pour remplir la case. Meme couleur neutre que le statut "Terminee". */
.v-non-renseigne{color:var(--neutre)}
.v-non-renseigne .pt{background:none;border:1.5px dashed var(--neutre)}

/* ---- listes d'arcs / personnages / fillers dans une fiche : boitier + rangees.
   Chaque rangee est un lien complet (zone de clic large), separee par un filet. ---- */
.liste-mini{padding:6px 20px}
.ligne-mini{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:2px solid var(--etabli);text-decoration:none;color:inherit}
.liste-mini > a:last-child,.liste-mini > div:last-child{border-bottom:none}
a.ligne-mini:hover{color:var(--acc)}
.ligne-mini .nom{font-weight:600;font-size:14.5px}
.ligne-mini .detail{font-size:13px;color:var(--gris);text-align:right}

/* ---- fiche personnage : le portrait en tete ----
   Une CASE de planche, pas une vignette ronde de reseau social : bordure encree
   pleine, ombre portee dure, angles vifs. Le texte garde sa colonne a gauche. */
.entete-perso{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
.entete-perso .entete-texte{position:relative;min-width:0}
/* Le kanji de la fiche personnage (23/08, 2e version sur retour de Remi) : plus un
   fantome absolu qui chevauchait les noms longs (Tony Tony Chopper), mais un vrai
   element DANS LE FLUX, en haut a droite, plein, AVEC SA TRADUCTION — 人 « la
   personne ». Il enseigne au lieu de decorer, et ne peut plus rien manger. */
.haut-fiche{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px 14px;flex-wrap:wrap;margin-bottom:6px;font-size:16px}
.haut-fiche a{font-weight:600}
.kj-lexique{white-space:nowrap;font-weight:700;font-size:30px;line-height:1;
  color:var(--encre)}
.kj-lexique i{font-style:normal;font-weight:500;font-size:12px;color:var(--gris);
  margin-left:9px;letter-spacing:.04em;vertical-align:baseline}
/* La carte d'identite est DANS l'entete : sortie de la, elle laissait 209 px de
   vide sous le titre, le portrait fixant seul la hauteur de la rangee. */
.carte-identite{padding:16px 20px;margin-top:20px;max-width:56ch}
.carte-identite .ligne-fiche:first-child{margin-top:0}
.entete-perso .frais{margin-top:12px}
/* Le nom japonais reprend EXACTEMENT la signature de la marque (.marque .kana) :
   corps, graisse, interlettrage large, couleur d'accent du genre. */
.nom-ja{display:inline-block;font-family:var(--corps);font-weight:600;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.22em;color:var(--acc);
  text-transform:none;margin-left:14px;vertical-align:middle;white-space:nowrap}
.portrait{margin:6px 0 0;padding:0;background:var(--case);overflow:hidden}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.portrait .credit{font-size:11.5px;color:var(--gris);padding:9px 12px;
  border-top:var(--bord) solid var(--encre);background:var(--case-creuse)}
@media (max-width:760px){
  /* Le portrait passe SOUS le titre : au-dessus, il repousse le nom hors du premier
     ecran, et c'est le nom qu'on vient chercher. */
  .entete-perso{grid-template-columns:1fr;gap:18px}
  .portrait{max-width:340px}
}

/* ---- fiche personnage : les anecdotes, en cases de planche ----
   Une case par fait, jamais un paragraphe fourre-tout : c'est la grammaire du
   medium (des cases, des gouttieres), pas une grille de cartes generique.
   Bordure COMPLETE, jamais un lisere partiel (interdit grave du 06/08). */
.planche{display:grid;gap:var(--gouttiere);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Jamais de case orpheline sur sa ligne : la derniere impaire prend toute la largeur. */
.planche > :last-child:nth-child(odd){grid-column:1/-1}
.anecdote{padding:18px 20px}
.anecdote p{font-size:14.5px}
.etiq-type{font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc);margin-bottom:11px;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline}
.etiq-type .quand{color:var(--gris);font-size:12.5px;font-weight:500;letter-spacing:.02em;
  text-transform:none}
/* .anecdote p (0,1,1) battait .src (0,1,0) et remontait la ligne de sources a
   14,5 px : on qualifie, sinon la source se lit aussi gros que le fait. */
.src{font-size:12px;color:var(--gris);margin-top:13px}
.anecdote .src,.encart-aff .src{font-size:12px}
.src a{font-weight:600}
.src b{color:var(--ambre)}

/* Le spoiler reste FERME par defaut : un wiki devoile des la premiere ligne,
   TSUZUKI attend que le lecteur ouvre. <details> natif, donc lisible au clavier
   et toujours ouvrable si le JS ne charge pas. */
details.spoil{padding:0}
details.spoil > summary{cursor:pointer;list-style:none;padding:16px 20px;
  font-weight:600;font-size:13.5px;background:var(--case-creuse)}
details.spoil > summary::-webkit-details-marker{display:none}
details.spoil > summary::before{content:"▸";color:var(--acc);margin-right:9px}
details.spoil[open] > summary::before{content:"▾"}
details.spoil > summary:hover{color:var(--acc)}
details.spoil[open] > summary{border-bottom:2px solid var(--etabli)}
details.spoil .dedans{padding:16px 20px 18px}

/* ---- le marque-page (23/08) : se reperer par un arc ou un personnage plutot
   que par un numero d'episode que personne ne connait par coeur. Repli fermee
   par defaut (<details> natif, pas de JS requis pour l'ouvrir) : ceux qui
   connaissent deja leur episode n'en voient jamais le contenu. ---- */
details.marque-page{margin-top:16px;padding:0}
details.marque-page > summary{cursor:pointer;list-style:none;padding:14px 18px;
  font-weight:600;font-size:14px;background:var(--case-creuse);
  border:var(--bord) solid var(--encre)}
details.marque-page > summary::-webkit-details-marker{display:none}
details.marque-page > summary::before{content:"▸";color:var(--acc);margin-right:9px}
details.marque-page[open] > summary::before{content:"▾"}
details.marque-page > summary span{text-decoration:underline;text-underline-offset:3px}
details.marque-page > summary:hover span{color:var(--acc)}
.mp-corps{border:var(--bord) solid var(--encre);border-top:none;padding:20px}
.mp-groupe{margin-bottom:22px}
.mp-groupe:last-of-type{margin-bottom:0}
.mp-groupe h3{font-family:var(--corps);font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.mp-note{font-size:12.5px;color:var(--gris);margin:-4px 0 12px;max-width:60ch}

.mp-arcs{display:flex;flex-wrap:wrap;gap:9px}
.mp-bouton{font:inherit;text-align:left;background:var(--case);color:var(--encre);
  border:2px solid var(--encre);padding:9px 13px;cursor:pointer;font-weight:600;
  font-size:13.5px}
.mp-bouton .detail{display:block;font-weight:500;font-size:11.5px;color:var(--gris);
  margin-top:2px}
.mp-bouton:hover{border-color:var(--acc)}
.mp-bouton.mp-actif{background:var(--encre);color:var(--case);border-color:var(--encre)}
.mp-bouton.mp-actif .detail{color:#cfc9be}

.mp-persos{display:flex;flex-wrap:wrap;gap:10px}
.mp-perso{font:inherit;background:none;border:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;width:72px}
.mp-perso img{width:64px;height:64px;object-fit:cover;border:2px solid var(--encre)}
.mp-perso span{font-size:11px;font-weight:600;text-align:center;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-perso:hover img{border-color:var(--acc)}
.mp-perso.mp-actif img{border-color:var(--acc);border-width:3px}
.mp-perso.mp-actif span{color:var(--acc)}

/* ---- encart d'affiliation : toujours APRES le contenu, jamais avant ---- */
.encart-aff{padding:18px 20px}
.encart-aff .bouton{margin-top:6px}

/* ---- navigation precedent/suivant en bas d'une page arc ---- */
.nav-arc{display:flex;justify-content:space-between;gap:14px;margin-top:40px;flex-wrap:wrap}
.nav-arc a{flex:1 1 200px;text-align:center}
.nav-arc .vide{flex:1 1 200px}

/* ---- pied ---- */
.pied{border-top:4px solid var(--encre);background:var(--case);margin-top:72px}
.pied-in{max-width:1140px;margin:0 auto;padding:22px 18px 34px;color:var(--gris);font-size:13.5px;
  display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center}
.pied-in a{font-weight:600}

.vide{color:var(--gris);font-size:14.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:640px){
  .grille > *{flex:1 1 100%;max-width:none}
  .case{box-shadow:4px 4px 0 var(--encre)}
  section{padding-top:52px}
  .entete .kj{opacity:.05}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* Signature « Mis à jour le · Par Jules » (GEO 30/09) */
.signature-page { margin: 28px 0 8px; }