/* Page Kakuriis : les décorations sont isolées pour pouvoir les retirer facilement. */
.kakuriis-page { --pink:#ff4381; --night:#1e1553; --cream:#fffdef; --yellow:#fffb95; --green:#36e983; --violet:#772faf; }
.kakurii-profile { display:grid; grid-template-columns:minmax(0,1fr); width:100%; max-width:1350px; margin:25px auto 0; align-items:stretch; }
.kakurii-profile[hidden] { display:none; }
.kakurii-profile-art { background:transparent; color:var(--cream); display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:clamp(42px,5vw,80px) clamp(18px,3vw,50px) 12px; min-width:0; overflow:hidden; }
.kakurii-hook { font-size:clamp(22px,3vw,43px); line-height:1.12; text-align:center; margin:0; max-width:22ch; }
.kakurii-hook em { font-style:normal; color:var(--pink); text-shadow:3px 4px 0 var(--yellow); }
.kakurii-profile-art > img { display:block; width:min(100%,570px); aspect-ratio:1; object-fit:contain; margin:10px auto; animation:kakurii-bob 5s ease-in-out infinite; }
/* Papier rose découpé, légèrement incliné, avec zigzags indépendants des deux côtés. */
.kakurii-profile-info { position:relative; isolation:isolate; background:var(--pink); color:var(--night); padding:clamp(36px,4vw,65px) clamp(15px,2vw,28px) 36px; min-width:0; transform:rotate(-3deg); }
.kakurii-profile-info::before,.kakurii-profile-info::after { content:""; position:absolute; z-index:-1; top:0; bottom:0; width:20px; background:var(--pink); }
.kakurii-profile-info::before { left:-19px; clip-path:polygon(100% 0%,0 3.125%,100% 6.25%,0 9.375%,100% 12.5%,0 15.625%,100% 18.75%,0 21.875%,100% 25%,0 28.125%,100% 31.25%,0 34.375%,100% 37.5%,0 40.625%,100% 43.75%,0 46.875%,100% 50%,0 53.125%,100% 56.25%,0 59.375%,100% 62.5%,0 65.625%,100% 68.75%,0 71.875%,100% 75%,0 78.125%,100% 81.25%,0 84.375%,100% 87.5%,0 90.625%,100% 93.75%,0 96.875%,100% 100%); }
.kakurii-profile-info::after { right:-19px; clip-path:polygon(0 0%,100% 3.125%,0 6.25%,100% 9.375%,0 12.5%,100% 15.625%,0 18.75%,100% 21.875%,0 25%,100% 28.125%,0 31.25%,100% 34.375%,0 37.5%,100% 40.625%,0 43.75%,100% 46.875%,0 50%,100% 53.125%,0 56.25%,100% 59.375%,0 62.5%,100% 65.625%,0 68.75%,100% 71.875%,0 75%,100% 78.125%,0 81.25%,100% 84.375%,0 87.5%,100% 90.625%,0 93.75%,100% 96.875%,0 100%); }
/* Croix cartoon hors du papier rose. */
.kakurii-close { position:absolute; top:-37px; right:-34px; width:78px; height:78px; display:grid; place-items:center; padding:0; border:0; background:none; color:var(--violet); font-family:Arial,sans-serif; font-size:90px; font-weight:900; line-height:1; text-shadow:5px 6px 0 var(--yellow); cursor:pointer; z-index:5; transform-origin:center; transition:transform .22s ease,color .22s ease; }
.kakurii-close:hover,.kakurii-close:focus-visible { transform:scale(1.14) rotate(13deg); color:var(--green); }
.kakurii-profile { scroll-margin-top:175px; }
.kakurii-details { transform:rotate(-2deg); transform-origin:center; }
.kakurii-info-heading { text-align:center; }
.kakurii-info-heading h2 { font-size:clamp(52px,7vw,112px); color:var(--green); text-shadow:-4px 5px 0 var(--yellow),5px 9px 0 var(--violet); margin:0; line-height:1.08; overflow-wrap:anywhere; }
/* Bandeau violet simple, sur une seule ligne. */
.kakurii-info-heading p { display:table; margin:0 auto 10px; padding:3px 12px; background:var(--violet); border-radius:8px; color:var(--yellow); font-family:"Knewave",cursive; font-size:clamp(12px,1.7vw,27px); line-height:1.2; text-transform:uppercase; white-space:nowrap; transform:rotate(-2deg); }
/* Deux pointillés PNG : le second retourné de 180°. */
.kakurii-dash { display:block; max-width:380px; width:100%; height:auto; aspect-ratio:200/164; max-height:164px; object-fit:contain; object-position:center; margin:-18px auto; }
.kakurii-details + .kakurii-dash,.kakurii-facts + .kakurii-dash { transform:rotate(180deg); }
.kakurii-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,40px); }
.kakurii-fact { transform-origin:center center; }
.kakurii-fact h3 { display:flex; align-items:center; gap:8px; font-family:"Knewave",cursive; text-transform:uppercase; font-size:clamp(22px,3vw,42px); color:var(--yellow); text-shadow:3px 4px 0 var(--violet); margin:0 0 9px; line-height:1.15; transform-origin:left center; }
.kakurii-fact:nth-child(1) { transform:rotate(-3deg); }
.kakurii-fact:nth-child(2) { transform:translateY(17px) rotate(-3deg); }
.kakurii-fact:nth-child(2) h3 { color:#68f4e5; }
.kakurii-fact:nth-child(3) { transform:rotate(-3deg); }
.kakurii-fact:nth-child(3) h3 { color:var(--green); }
.kakurii-fact h3 img { display:block; width:clamp(28px,4vw,53px); height:clamp(28px,4vw,53px); object-fit:contain; flex:none; }
/* Pas de redéfinition des styles p globaux. */
.kakurii-fact p { margin:0; }
.kakurii-fact-wide { grid-column:1/-1; }
.kakurii-details { display:grid; gap:10px; }
.kakurii-details p { margin:0; color:var(--cream); font-size:20px; }
.kakurii-details strong { color:var(--cream); }
.kakurii-profile-nav { display:flex; justify-content:center; gap:16px; margin-top:12px; }
.kakurii-profile-nav button { width:40px; height:40px; border:0; border-radius:50%; background:var(--violet); color:var(--cream); font-size:30px; line-height:1; cursor:pointer; }
.kakurii-profile-nav button:hover { background:var(--green); color:var(--night); }
.kakuriis-gallery-section { width:min(100% - 32px,1280px); margin:30px auto 70px; text-align:center; }
.kakuriis-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,30px); }
.kakurii-tile { background:transparent; border:0; color:var(--cream); cursor:pointer; padding:8px; min-width:0; }
.kakurii-tile img { display:block; width:100%; aspect-ratio:1/1; height:auto; object-fit:contain; transition:transform .25s ease; }
.kakurii-tile:hover img,.kakurii-tile:focus-visible img { transform:scale(1.08) rotate(-4deg); }
.kakurii-tile span { display:block; margin-top:0; font-family:"Knewave",cursive; font-size:clamp(16px,2vw,24px); line-height:1; text-transform:uppercase; }
.kakurii-tile:hover span,.kakurii-tile[aria-pressed="true"] span { color:var(--green); }
@keyframes kakurii-bob { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-10px) rotate(2deg); } }
@media(min-width:980px) { .kakurii-details p { font-size:20px; } .kakuriis-gallery-section { margin-top:30px; } .kakurii-profile { grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); } .kakuriis-gallery { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(min-width:980px) {.kakurii-profile .kakurii-dash{  max-height: 90px; }}
@media(max-width:979px) { .kakurii-profile { margin-top:0; } .kakurii-profile-art > img { width:min(100%,510px); } .kakurii-profile-info { padding:35px 22px; } .kakurii-profile-info::before,.kakurii-profile-info::after { width:20px; } .kakurii-profile-info::before { left:-19px; } .kakurii-profile-info::after { right:-19px; } }
@media(max-width:430px) { .kakurii-facts { gap:18px 14px; } .kakurii-fact { transform-origin:center center; }
.kakurii-fact h3 { font-size:22px; } .kakurii-info-heading h2 { font-size:clamp(49px,13vw,65px); } }
@media(prefers-reduced-motion:reduce) { .kakurii-profile-art > img { animation:none; } .kakurii-tile img { transition:none; } }

@media(max-width:979px) { .kakurii-profile-art > img { width:min(100%,640px); max-width:none; } .kakurii-profile-art { padding-left:4px; padding-right:4px; } }

/* Accroches : trois lignes explicites, sans variation selon la largeur. */
.kakurii-hook .hook-line { display:block; }

@media(max-width:979px) { .kakurii-close { top:-32px; right:-13px; width:64px; height:64px; font-size:75px; } .kakurii-profile { scroll-margin-top:115px; } }

/* Ajustements fiche : proportions et lisibilité. */
@media (min-width:980px) {
  .kakurii-profile { grid-template-columns:minmax(0,1.19fr) minmax(0,.81fr); }
  .kakurii-fact p { font-size:30px; line-height:1.22; }
}
.kakurii-fact-wide p { max-width:23ch; }
.kakurii-fact p .fact-line { display:block; }
.kakurii-fact p .fact-line:nth-child(even) { padding-left:4px; }
.kakurii-details strong { color:var(--yellow); }
.kakurii-details p:nth-child(1) { transform:rotate(-1.5deg); }
.kakurii-details p:nth-child(2) { transform:rotate(1deg); }
.kakurii-info-heading p { margin-bottom:0; }
.kakurii-info-heading + .kakurii-dash { margin-top:-25px; }
.kakurii-profile-art { justify-content:flex-start; }
.kakurii-hook { color:var(--cream); }
.kakurii-hook em { color:var(--pink); text-shadow:3px 4px 0 var(--yellow); }
.kakurii-hook .hook-green { color:var(--green); text-shadow:3px 4px 0 var(--violet); }

/* Ajustements de la fiche : interlignage serré et alignement des détails. */
.kakurii-fact p { line-height:.8; }
.kakurii-details p:nth-child(2) { transform:rotate(-1.5deg); }
.kakurii-facts + .kakurii-dash { margin-bottom:-52px; }

/* Mise en page compacte sur mobile, sans toucher aux tailles desktop. */
@media (max-width:979px) {
  .kakurii-profile-art { padding-top:22px; padding-bottom:0; }
  .kakurii-hook { font-size:clamp(30px,7.5vw,48px); }
  .kakurii-profile-art > img { margin:0 auto -14px; }
  .kakurii-profile-info { padding-top:26px; }
  .kakurii-info-heading h2 { font-size:clamp(66px,15vw,100px); }
  .kakurii-info-heading p { font-size:clamp(16px,3.8vw,25px); }
  .kakurii-dash { margin-top:-48px; margin-bottom:-48px; }
  .kakurii-info-heading + .kakurii-dash { margin-top:-52px; margin-bottom:-48px; }
  .kakurii-facts + .kakurii-dash { margin-top:-48px; margin-bottom:-60px; }
}

/* Noms longs : restent sur une seule ligne ; taille ajustée en JS au besoin. */
.kakurii-info-heading h2 { white-space:nowrap; overflow-wrap:normal; word-break:normal; }

/* Fiche mobile : portrait carré, sans hauteur artificielle, et papier rose pleine largeur. */
@media (max-width:979px) {
  .kakurii-profile { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .kakurii-profile-art {
    display:flex; flex-direction:column; justify-content:flex-start;
    align-items:center; padding:0; margin:0; overflow:visible;
  }
  .kakurii-hook { margin:0; padding:0; }
  .kakurii-profile-art > img {
    display:block; width:min(100%,440px); max-width:100%;
    height:auto; aspect-ratio:1/1; object-fit:contain;
    margin:-5px auto -8px; flex:none;
  }
  .kakurii-profile-info {
    box-sizing:border-box; width:100vw; max-width:none;
    margin:0 0 0 calc(50% - 50vw);
    padding:24px clamp(25px,6vw,42px) 26px;
    transform:rotate(-3deg);
  }
  /* Les dents passent des côtés aux bords haut/bas, sans toucher au contenu. */
  .kakurii-profile-info::before, .kakurii-profile-info::after {
    position:absolute; left:0; right:0; width:100%; height:15px;
    background:var(--pink); z-index:-1;
  }
  .kakurii-profile-info::before {
    top:-14px; bottom:auto;
    clip-path:polygon(0 100%, 0 0, 5% 100%, 10% 0, 15% 100%, 20% 0, 25% 100%, 30% 0, 35% 100%, 40% 0, 45% 100%, 50% 0, 55% 100%, 60% 0, 65% 100%, 70% 0, 75% 100%, 80% 0, 85% 100%, 90% 0, 95% 100%, 100% 0, 100% 100%);
  }
  .kakurii-profile-info::after {
    top:auto; bottom:-14px;
    clip-path:polygon(0 0, 0 100%, 5% 0, 10% 100%, 15% 0, 20% 100%, 25% 0, 30% 100%, 35% 0, 40% 100%, 45% 0, 50% 100%, 55% 0, 60% 100%, 65% 0, 70% 100%, 75% 0, 80% 100%, 85% 0, 90% 100%, 95% 0, 100% 100%, 100% 0);
  }
}

/* Derniers ajustements : fiche Kakuriis */
.kakurii-details { line-height:.8; }
.kakurii-details p { line-height:inherit; }
@media (max-width:979px) {
  /* Fond plus large que l'écran, contenu à la même place. */
  .kakurii-profile-info {
    width:calc(100vw + 32px);
    margin-left:calc(50% - 50vw - 16px);
    padding-left:calc(clamp(25px,6vw,42px) + 16px);
    padding-right:calc(clamp(25px,6vw,42px) + 16px);
  }
  /* La croix reste entièrement dans le viewport malgré la rotation du panneau. */
  .kakurii-close { right:36px; top:-30px; }
  .kakurii-fact:nth-child(3) { padding-top:15px; }
  .kakurii-fact-wide p { max-width:none; width:100%; }
}

/* Ajustements typographiques et croix — octobre 2026. */
.kakurii-hook .hook-green { text-shadow:3px 4px 0 var(--yellow); }
@media (min-width:980px) and (max-width:1250px) {
  .kakurii-hook { font-size:clamp(38px,4.3vw,54px); }
}
@media (max-width:979px) {
  .kakurii-fact p { font-size:26px; line-height:.8; }
  .kakurii-close { right:19px; top:-43px; }
}

/* Texte droit à l'intérieur du panneau ; seule la fiche rose pivote. */
.kakurii-details,
.kakurii-info-heading p,
.kakurii-fact:nth-child(1),
.kakurii-fact:nth-child(3),
.kakurii-details p:nth-child(1),
.kakurii-details p:nth-child(2) { transform:none; }
.kakurii-fact:nth-child(2) { transform:translateY(17px); }

/* Plus de respiration entre le header mobile et la fiche ouverte. */
@media (max-width:979px) {
  .kakurii-profile { margin-top:28px; }
  .kakurii-profile-art { padding-top:18px; }
}

/* Pointillés mobiles et titres des trois caractéristiques sur desktop. */
@media (max-width:979px) {
  .kakurii-dash { max-width:380px; }
}
@media (min-width:980px) {
  .kakurii-fact h3 { font-size:clamp(21px,2.6vw,26px); }
}

/* Lien vers les produits associés, en bas de la fiche rose. */
.kakurii-goodies-link { display:table; width:max-content; max-width:100%; margin:26px auto 0; text-align:center; }
.kakurii-goodies-link[hidden] { display:none !important; }

/* Accroche : inclinaison constante. */
.kakurii-hook { transform:rotate(-3deg); transform-origin:center; }

/* Le bouton goodies chevauche le bas du papier rose. */
.kakurii-profile-info { padding-bottom:58px; }
.kakurii-goodies-link {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:max-content;
  max-width:calc(100% - 12px);
  margin:20px auto -87px;
  padding:2px 23px;
  height:45px;
  min-height:45px;
  box-sizing:border-box;
  background:var(--green);
  color:var(--cream);
  border-radius:14px;
  text-decoration:none;
  transform:rotate(2deg);
}
.kakurii-goodies-link::after { content:''; display:block; width:8px; height:8px; box-sizing:content-box; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); flex:none; }
.kakurii-goodies-link:hover,
.kakurii-goodies-link:focus-visible {
  background:var(--green);
  color:var(--cream) !important;
  transform:translateY(-2px) rotate(0deg);
}
@media(max-width:979px) {
  .kakurii-details { margin-top:10px; }
  .kakurii-goodies-link { margin-bottom:-87px; }
}

/* Ouverture façon pop-up cartoon, fermeture façon rebond. */
@keyframes kakurii-paper-in{0%{opacity:0;transform:translateY(75px) rotate(-11deg) scale(.65)}55%{opacity:1;transform:translateY(-16px) rotate(2deg) scale(1.055)}76%{transform:translateY(7px) rotate(-5deg) scale(.98)}100%{transform:translateY(0) rotate(-3deg) scale(1)}}
@keyframes kakurii-art-in{0%{opacity:0;transform:translateX(-65px) scale(.65) rotate(-18deg)}65%{opacity:1;transform:translateX(12px) scale(1.08) rotate(7deg)}100%{transform:none}}
@keyframes kakurii-paper-out{0%{opacity:1;transform:rotate(-3deg) scale(1)}28%{transform:rotate(2deg) scale(1.045)}100%{opacity:0;transform:translateY(80px) rotate(10deg) scale(.65)}}
@keyframes kakurii-art-out{to{opacity:0;transform:translateX(-60px) scale(.65) rotate(-15deg)}}
.kakurii-profile.is-opening .kakurii-profile-info{animation:kakurii-paper-in .72s cubic-bezier(.22,.8,.2,1) both}
.kakurii-profile.is-opening .kakurii-profile-art{animation:kakurii-art-in .72s cubic-bezier(.2,.85,.3,1) both}
.kakurii-profile.is-closing .kakurii-profile-info{animation:kakurii-paper-out .42s ease-in both}
.kakurii-profile.is-closing .kakurii-profile-art{animation:kakurii-art-out .38s ease-in both}
@media(prefers-reduced-motion:reduce){.kakurii-profile.is-opening .kakurii-profile-info,.kakurii-profile.is-opening .kakurii-profile-art,.kakurii-profile.is-closing .kakurii-profile-info,.kakurii-profile.is-closing .kakurii-profile-art{animation:none}}

/* Entrées volontairement contrastées : personnage en envol latéral, fiche en dépliage. */
@keyframes kakurii-art-in{0%{opacity:0;transform:translateX(-110px) rotate(-24deg) scale(.48)}58%{opacity:1;transform:translateX(17px) rotate(9deg) scale(1.12)}78%{transform:translateX(-7px) rotate(-4deg) scale(.97)}100%{transform:none}}
@keyframes kakurii-paper-in{0%{opacity:0;transform:translateY(25px) rotate(8deg) scaleX(.55) scaleY(.85)}42%{opacity:1;transform:translateY(-8px) rotate(-6deg) scaleX(1.035) scaleY(1.04)}72%{transform:translateY(4px) rotate(-1deg) scale(0.99)}100%{transform:rotate(-3deg) scale(1)}}
@keyframes kakurii-art-out{0%{opacity:1;transform:none}30%{transform:translateX(12px) rotate(7deg) scale(1.06)}100%{opacity:0;transform:translateX(-120px) rotate(-25deg) scale(.45)}}
@keyframes kakurii-paper-out{0%{opacity:1;transform:rotate(-3deg) scale(1)}35%{transform:translateY(-8px) rotate(-7deg) scale(1.025)}100%{opacity:0;transform:translateY(55px) rotate(12deg) scaleX(.55) scaleY(.8)}}
.kakurii-profile.is-opening .kakurii-profile-art{animation:kakurii-art-in .78s cubic-bezier(.2,.8,.2,1) both}
.kakurii-profile.is-opening .kakurii-profile-info{animation:kakurii-paper-in .62s .10s cubic-bezier(.25,.85,.25,1) both}
@media(prefers-reduced-motion:reduce){.kakurii-profile.is-opening .kakurii-profile-info,.kakurii-profile.is-opening .kakurii-profile-art,.kakurii-profile.is-closing .kakurii-profile-info,.kakurii-profile.is-closing .kakurii-profile-art{animation:none}}

/* Accroche puis portrait : deux apparitions indépendantes. */
@keyframes kakurii-hook-reveal {
  0% { opacity:0; transform:translateY(-30px) rotate(-12deg) scale(.75); }
  65% { opacity:1; transform:translateY(7px) rotate(-2deg) scale(1.08); }
  100% { opacity:1; transform:rotate(-3deg) scale(1); }
}
@keyframes kakurii-portrait-reveal {
  0% { opacity:0; transform:translateY(55px) rotate(13deg) scale(.55); }
  65% { opacity:1; transform:translateY(-12px) rotate(-5deg) scale(1.09); }
  82% { transform:translateY(4px) rotate(2deg) scale(.98); }
  100% { opacity:1; transform:none; }
}
.kakurii-profile.is-opening .kakurii-hook {
  animation:kakurii-hook-reveal .52s .12s cubic-bezier(.2,.85,.25,1) both;
}
.kakurii-profile.is-opening .kakurii-profile-art > img {
  animation:kakurii-portrait-reveal .7s .32s cubic-bezier(.2,.8,.2,1) both;
}
@media (prefers-reduced-motion:reduce) {
  .kakurii-profile.is-opening .kakurii-hook,
  .kakurii-profile.is-opening .kakurii-profile-art > img { animation:none; }
}

/* Le conteneur reste immobile : accroche et portrait entrent séparément. */
.kakurii-profile.is-opening .kakurii-profile-art { animation:none; }

/* Fiche plus compacte sur desktop : réduction des proportions, sans modifier le mobile. */
@media (min-width:980px) {
  .kakurii-profile { max-width:1120px; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); }
  .kakurii-profile-art { padding:34px 18px 8px; }
  .kakurii-hook { font-size:clamp(29px,2.8vw,39px); }
  .kakurii-profile-art > img { width:min(100%,455px); }
  .kakurii-profile-info { padding:38px 22px 48px; }
  .kakurii-info-heading h2 { font-size:clamp(48px,6vw,86px); }
  .kakurii-info-heading p { font-size:clamp(12px,1.45vw,21px); }
  .kakurii-fact h3 { font-size:clamp(19px,2.1vw,29px); }
  .kakurii-fact h3 img { width:clamp(25px,3vw,42px); height:clamp(25px,3vw,42px); }
  .kakurii-fact p { font-size:24px; }
  .kakurii-facts { gap:16px 22px; }
  .kakurii-dash { max-height:132px; }
  .kakurii-close { width:64px; height:64px; font-size:75px; top:-30px; right:-29px; }
}

/* Ajustements des espacements de la fiche sur ordinateur. */
@media (min-width:980px) {
  .kakurii-info-heading + .kakurii-dash { margin-bottom:2px; }
  .kakurii-facts + .kakurii-dash { margin-bottom:-22px; }
  .kakurii-profile-info { padding-bottom:26px; }
  .kakurii-profile-art > img { width:min(100%,485px); }
}

@media (min-width:980px) {
  .kakurii-fact-wide { padding-top:20px; }
}

/* Accroche rapprochée du personnage ; papier rose ajusté à son contenu. */
@media (min-width:980px) {
  .kakurii-profile { align-items:start; }
  .kakurii-profile-art { justify-content:flex-end; align-self:stretch; }
  .kakurii-hook { margin-bottom:-8px; }
  .kakurii-profile-art > img { margin:0 auto; }
  .kakurii-profile-info { align-self:start; }
}

/* Tabeyo : prolonger le papier rose jusqu’au milieu du bouton goodies. */
@media (min-width:980px) {
  .kakurii-profile-info:has(.kakurii-goodies-link:not([hidden])) { padding-bottom:65px; }
}

/* Fiche ouverte : bandeau pleine largeur, visuel crème et papier rose.
   La galerie conserve sa largeur et sa position habituelles. */
.kakurii-profile {
  width:100%;
  max-width:none;
}
.kakurii-profile-art {
  background:var(--cream);
  color:var(--night);
}
.kakurii-hook { color:var(--night); }

/* Mobile : conserver la disposition verticale existante, mais passer
   toute la zone accroche + personnage sur fond crème. */
@media (max-width:979px) {
  .kakurii-profile-art {
    box-sizing:border-box;
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:18px 12px 0;
  }
}

/* Desktop : bandeau sur toute la fenêtre, fiche rose sur le tiers droit. */
@media (min-width:980px) {
  .kakurii-profile {
    width:100%;
    max-width:none;
    margin-left:0;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    align-items:stretch;
    background:var(--cream);
  }
  .kakurii-profile-art {
    align-self:stretch;
    justify-content:flex-end;
    padding:30px 22px 0;
  }
  .kakurii-profile-info {
    box-sizing:border-box;
    align-self:start;
    width:100%;
  }
  .kakurii-hook { color:var(--night); }
}

/* Raccord continu des deux panneaux, sans espace entre crème et rose. */
@media (max-width:979px) {
  .kakurii-profile { gap:0 !important; }
  .kakurii-profile-art { margin-bottom:0 !important; }
  .kakurii-profile-info { margin-top:0 !important; }
}
@media (min-width:980px) {
  .kakurii-profile-info { align-self:stretch; min-height:100%; }
}

/* Desktop : papier rose incliné, débordant sous le masque du bandeau.
   Seul le décor est incliné : le texte reste lisible et en place. */
@media (min-width:980px) {
  .kakurii-profile { overflow:hidden; }
  .kakurii-profile-info {
    isolation:isolate;
    background:transparent;
    transform:none;
  }
  .kakurii-profile-info::before {
    content:"";
    position:absolute;
    z-index:-1;
    left:-85px;
    right:-130px;
    top:-110px;
    bottom:-110px;
    width:auto;
    background:var(--pink);
    clip-path:none;
    transform:rotate(-3deg);
    transform-origin:center;
  }
  .kakurii-profile-info::after { content:none; }
  /* L'animation du contenu ne doit pas réincliner le panneau. */
  .kakurii-profile.is-opening .kakurii-profile-info {
    animation:kakurii-info-slide-in .62s .10s cubic-bezier(.25,.85,.25,1) both;
  }
  .kakurii-profile.is-closing .kakurii-profile-info {
    animation:kakurii-info-slide-out .42s ease-in both;
  }
}
@keyframes kakurii-info-slide-in {
  from { opacity:0; translate:45px 0; }
  to { opacity:1; translate:0 0; }
}
@keyframes kakurii-info-slide-out {
  from { opacity:1; translate:0 0; }
  to { opacity:0; translate:45px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .kakurii-profile.is-opening .kakurii-profile-info,
  .kakurii-profile.is-closing .kakurii-profile-info { animation:none; }
}

/* Le zigzag appartient au même plan que le fond rose : une seule
   rotation et un seul découpage, sans décalage entre deux calques. */
@media (min-width:980px) {
  .kakurii-profile-info::before {
    left:-75px;
    clip-path:polygon(
      24px 0%, 0 3.125%, 24px 6.25%, 0 9.375%,
      24px 12.5%, 0 15.625%, 24px 18.75%, 0 21.875%,
      24px 25%, 0 28.125%, 24px 31.25%, 0 34.375%,
      24px 37.5%, 0 40.625%, 24px 43.75%, 0 46.875%,
      24px 50%, 0 53.125%, 24px 56.25%, 0 59.375%,
      24px 62.5%, 0 65.625%, 24px 68.75%, 0 71.875%,
      24px 75%, 0 78.125%, 24px 81.25%, 0 84.375%,
      24px 87.5%, 0 90.625%, 24px 93.75%, 0 96.875%,
      24px 100%, 100% 100%, 100% 0%
    );
  }
  .kakurii-profile-info::after { content:none; }
  /* Inclinaison du contenu, indépendante de l'animation du panneau. */
  .kakurii-info-heading,
  .kakurii-profile-info > .kakurii-dash,
  .kakurii-profile-info > .kakurii-facts,
  .kakurii-profile-info > .kakurii-details,
  .kakurii-profile-info > .kakurii-goodies-link {
    rotate:-3deg;
  }
}
/* La croix est soeur du panneau masqué, et n'est donc jamais rognée. */
.kakurii-profile-shell { position:relative; }
.kakurii-profile-shell:has(> .kakurii-profile[hidden]) { display:none; }
.kakurii-profile-shell > .kakurii-close {
  position:absolute;
  z-index:20;
  top:-30px;
  right:10px;
}
@media (max-width:979px) {
  .kakurii-profile-shell > .kakurii-close { top:-30px; right:12px; }
}
@media (min-width:980px) {
  .kakurii-profile-shell { width:100%; max-width:1280px; margin:0 auto; border-radius:30px; }
  .kakurii-profile-shell .kakurii-profile { width:100%; max-width:100%; margin:0; border-radius:30px; }
  .kakurii-profile-shell > .kakurii-close { right:0; top:-35px; }
}

@media (min-width:1281px) {
  .kakurii-profile-shell > .kakurii-close { right:-15px; }
}

/* Desktop : composition équilibrée du panneau rose et portrait carré. */
@media (min-width:980px) {
  /* Compense l'inclinaison du papier pour recentrer les textes. */
  .kakurii-info-heading,
  .kakurii-profile-info > .kakurii-dash,
  .kakurii-profile-info > .kakurii-facts,
  .kakurii-profile-info > .kakurii-details,
  .kakurii-profile-info > .kakurii-goodies-link {
    position:relative;
    left:-18px;
  }

  /* Les illustrations sont carrées, indépendamment de leur transparence. */
  .kakurii-profile-art {
    justify-content:flex-end;
    gap:0;
    padding:22px 12px 0;
  }
  .kakurii-profile-art > img {
    box-sizing:border-box;
    display:block;
    width:min(100%, 590px);
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
    flex:0 0 auto;
    margin:0 auto;
  }
  .kakurii-hook {
    font-size:clamp(39px,3.7vw,59px);
    line-height:1.05;
    margin:0 auto -8px;
    max-width:22ch;
    position:relative;
    z-index:1;
  }
}

/* Ajustements finaux du bandeau personnage. */
@media (min-width:980px) {
  /* Accroche près de l'illustration, sans occuper toute la largeur. */
  .kakurii-hook { font-size:clamp(34px,3.1vw,49px); margin-bottom:-10px; }
}
@media (max-width:979px) {
  /* Fond crème continu derrière le papier incliné : aucun filet de fond visible. */
  .kakurii-profile { background:var(--cream); overflow:hidden; }
  .kakurii-profile-art { position:relative; z-index:1; }
  .kakurii-profile-info {
    position:relative;
    z-index:0;
    width:calc(100vw + 100px);
    max-width:none;
    margin-left:calc(50% - 50vw - 50px);
    padding-left:calc(clamp(25px,6vw,42px) + 50px);
    padding-right:calc(clamp(25px,6vw,42px) + 50px);
    transform:rotate(-3deg);
  }
  /* Garder les dents du haut, supprimer celles du bas. */
  .kakurii-profile-info::after { content:none !important; }
}
/* Encoche centrale couleur du fond, ancrée au bord inférieur de la fiche. */
.kakurii-profile-shell:has(> .kakurii-profile:not([hidden]))::after {
  content:"";
  position:absolute;
  z-index:12;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:34px solid transparent;
  border-right:34px solid transparent;
  border-bottom:35px solid var(--night);
  pointer-events:none;
}

/* Mobile : découpe du papier rose en un seul calque.
   Le zigzag supérieur et le bord inférieur oblique ne peuvent plus être rognés
   par la rotation ou laisser apparaître le fond crème. */
@media (max-width:979px) {
  .kakurii-profile-info {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    padding:40px clamp(25px,6vw,42px) 42px;
    transform:none;
    background:var(--pink);
    clip-path:polygon(
      0 17px, 4% 0, 8% 17px, 12% 0, 16% 17px,
      20% 0, 24% 17px, 28% 0, 32% 17px,
      36% 0, 40% 17px, 44% 0, 48% 17px,
      52% 0, 56% 17px, 60% 0, 64% 17px,
      68% 0, 72% 17px, 76% 0, 80% 17px,
      84% 0, 88% 17px, 92% 0, 96% 17px,
      100% 0, 100% calc(100% - 12px), 0 100%
    );
  }
  .kakurii-profile-info::before,
  .kakurii-profile-info::after { content:none !important; }
  .kakurii-profile-art { z-index:0; }
  .kakurii-profile-info { z-index:1; }
  .kakurii-profile-art > img { margin-bottom:0; }
}

/* Mobile : papier rose dessiné sans rotation ni découpe du contenu.
   Le fond de la fiche est celui de la page : la diagonale inférieure
   reste entièrement visible, sans débordement blanc sur les côtés. */
@media (max-width:979px) {
  .kakurii-profile {
    overflow:visible;
    background:var(--night);
    gap:0;
  }
  .kakurii-profile-art {
    background:var(--cream);
    margin:0;
  }
  .kakurii-profile-info {
    isolation:isolate;
    position:relative;
    width:100%;
    margin:0;
    padding:42px clamp(25px,6vw,42px) 52px;
    background:transparent;
    transform:none;
    clip-path:none;
    overflow:visible;
  }
  .kakurii-profile-info::before {
    content:"" !important;
    display:block;
    position:absolute;
    z-index:-1;
    inset:0;
    width:100%;
    height:100%;
    background:var(--pink);
    transform:none;
    clip-path:polygon(
      0 17px, 4% 0, 8% 17px, 12% 0, 16% 17px,
      20% 0, 24% 17px, 28% 0, 32% 17px,
      36% 0, 40% 17px, 44% 0, 48% 17px,
      52% 0, 56% 17px, 60% 0, 64% 17px,
      68% 0, 72% 17px, 76% 0, 80% 17px,
      84% 0, 88% 17px, 92% 0, 96% 17px,
      100% 0, 100% calc(100% - 18px), 0 100%
    );
  }
  .kakurii-profile-info::after { content:none !important; }
  .kakurii-profile-shell:has(> .kakurii-profile:not([hidden]))::after {
    bottom:0;
  }
}

/* Mobile : fond rose débordant, sans rogner la diagonale ni l'encoche. */
@media (max-width:979px) {
  .kakurii-profile,
  .kakurii-profile-shell { overflow:visible; }
  .kakurii-profile-art { padding-bottom:30px; }
  .kakurii-profile.is-opening .kakurii-profile-art { padding-bottom:30px; }
  .kakurii-profile-info {
    padding-top:10px;
    isolation:isolate;
    overflow:visible;
    background:transparent;
  }
  .kakurii-profile-info::before {
    content:"" !important;
    position:absolute;
    display:block;
    width:120%;
    left:-10%;
    right:auto;
    top:0;
    bottom:0;
    height:100%;
    transform:none;
    background:var(--pink);
    z-index:-1;
    clip-path:polygon(
      0 17px,4% 0,8% 17px,12% 0,16% 17px,20% 0,
      24% 17px,28% 0,32% 17px,36% 0,40% 17px,44% 0,
      48% 17px,52% 0,56% 17px,60% 0,64% 17px,68% 0,
      72% 17px,76% 0,80% 17px,84% 0,88% 17px,92% 0,
      96% 17px,100% 0,100% calc(100% - 18px),0 100%
    );
  }
  .kakurii-profile-shell:has(> .kakurii-profile:not([hidden]))::after {
    content:"";
    display:block;
    position:absolute;
    z-index:30;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:17px solid transparent;
    border-right:17px solid transparent;
    border-bottom:18px solid var(--night);
    pointer-events:none;
  }
}

/* Raccord mobile : le rose chevauche le crème sans toucher au portrait. */
@media (max-width:979px) {
  .kakurii-profile-art,
  .kakurii-profile.is-opening .kakurii-profile-art {
    padding-bottom:70px;
  }
  .kakurii-profile-info::before {
    top:-40px;
    height:calc(100% + 40px);
  }
}

/* Espace supplémentaire au-dessus du portrait, uniquement sur mobile. */
@media (max-width:979px) {
  .kakurii-profile-art,
  .kakurii-profile.is-opening .kakurii-profile-art {
    padding-top: 30px;
  }
}

/* Mobile : croix centrée verticalement sur le raccord crème / rose. */
@media (max-width:979px) {
  .kakurii-profile-shell > .kakurii-close {
    top:var(--kakurii-mobile-seam, 50%);
    right:12px;
    transform:translateY(-50%);
    z-index:60;
  }
  .kakurii-profile-shell > .kakurii-close:hover,
  .kakurii-profile-shell > .kakurii-close:focus-visible {
    transform:translateY(-50%) scale(1.14) rotate(13deg);
  }
}

/* Frise supérieure sur toutes les tailles d’écran, sous la croix. */
.kakurii-profile-shell > .kakurii-profile-top-edge {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:10px;
    background:url('../img/hero-cache.png') repeat-x center top;
    pointer-events:none;
    z-index:35;
}
.kakurii-profile-shell > .kakurii-close { z-index:60; }

/* Frise inférieure desktop : même motif inversé, sous l’encoche centrale. */
@media (min-width:980px) {
  .kakurii-profile-shell > .kakurii-profile-top-edge { border-radius:30px 30px 0 0; }
  .kakurii-profile-shell:has(> .kakurii-profile:not([hidden]))::before {
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:10px;
    background:url('../img/hero-cache.png') repeat-x center top;
    transform:rotate(180deg);
    pointer-events:none;
    z-index:20;
  }
  .kakurii-profile-shell:has(> .kakurii-profile:not([hidden]))::after { z-index:30; }
}

/* Goodies : ancré dans le flux du panneau rose, sans chevauchement. */
.kakurii-profile-info > .kakurii-goodies-link {
  position:relative;
  margin:24px auto 0;
  inset:auto;
  flex-shrink:0;
}
@media (max-width:979px) {
  .kakurii-profile-info > .kakurii-goodies-link { margin:24px auto 0; }
}
@media (min-width:980px) {
  .kakurii-profile-info:has(.kakurii-goodies-link:not([hidden])) { padding-bottom:58px; }
}

/* Fiche : signe de présence sur toute la largeur, séparateurs limités à 80 %. */
.kakurii-fact-wide p { width:100%; max-width:none; }
.kakurii-dash { width:80%; max-width:80%; }

/* Orientation des deux séparateurs, identique sur tous les écrans. */
.kakurii-info-heading + .kakurii-dash { transform:rotate(4deg); }
.kakurii-details + .kakurii-dash,
.kakurii-facts + .kakurii-dash { transform:rotate(184deg); }

/* Pagination de la galerie des personnages. */
.kakurii-tile[hidden], .kakuriis-pagination[hidden] { display:none !important; }
.kakuriis-pagination { display:flex; align-items:center; justify-content:center; gap:22px; margin:32px auto 0; }
.kakuriis-page-arrow { display:grid; place-items:center; width:46px; height:46px; border:0; border-radius:50%; background:var(--cream); color:var(--dark, #2e2d49); font-size:26px; font-weight:bold; cursor:pointer; transition:background .2s, transform .2s; }
.kakuriis-page-arrow:hover:not(:disabled), .kakuriis-page-arrow:focus-visible:not(:disabled) { background:#36e983; transform:scale(1.08); }
.kakuriis-page-arrow:disabled { opacity:.35; cursor:default; }
.kakuriis-page-label { font-family:'Knewave',cursive; font-size:19px; color:var(--cream); min-width:48px; }

/* Pagination : mêmes disques et chevrons que le carrousel d'accueil. */
.kakuriis-page-arrow {
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%;
  background: #772faf; color: #fffdef; cursor: pointer;
  transition: background-color .2s ease;
}
.kakuriis-page-arrow::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.kakuriis-page-arrow.hero-prev::before { transform: translateX(2px) rotate(-135deg); }
.kakuriis-page-arrow.hero-next::before { transform: translateX(-2px) rotate(45deg); }
.kakuriis-page-arrow:hover:not(:disabled),
.kakuriis-page-arrow:focus-visible:not(:disabled) { background: #36e983; color: #1e1553; transform: none; }
.kakuriis-page-arrow:disabled { opacity: .35; cursor: default; }

/* Desktop : corps des descriptions et nom plus imposant, ajusté par JS à la largeur réelle. */
@media (min-width: 980px) {
  .kakurii-fact p { font-size: 24px; }
  .kakurii-info-heading h2 { font-size: clamp(81px, 9vw, 135px); }
}

/* Le nom reste dans la zone rose, y compris avec les titres longs. */
@media (min-width:980px) {
  .kakurii-info-heading { min-width:0; max-width:100%; }
  .kakurii-info-heading h2 { max-width:100%; }
}

/* Titre desktop : grande taille de référence, réduction seulement si nécessaire en JS. */
@media (min-width:980px) {
  .kakurii-info-heading h2 { font-size:135px; white-space:nowrap; max-width:none; width:max-content; text-align:center; margin-inline:auto; }
}

/* Fond décoratif du panneau crème : toutes les tailles d’écran. */
.kakurii-profile-art {
    background-image:url('../img/fiche-bg.png');
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:auto;
}

/* Desktop : accroche et portrait décalés ensemble de 40px vers la gauche. */
@media (min-width:980px) {
  .kakurii-profile-art > .kakurii-hook,
  .kakurii-profile-art > img {
    position:relative;
    left:-40px;
  }
  .kakurii-profile-art > .kakurii-hook {
    margin-top:auto;
    margin-bottom:auto;
  }
}

/* Desktop : décale uniquement le contenu, sans déplacer le panneau rose. */
@media (min-width:980px) {
  .kakurii-profile-info > * { position:relative; left:-40px; }
}

/* Accroche de la fiche Kakurii : pas d'ombre, sauf emphase jaune. */
.kakurii-hook, .kakurii-hook .hook-green { text-shadow:none!important; }
.kakurii-hook em, .kakurii-hook em.hook-green { text-shadow:3px 4px 0 var(--yellow)!important; }

/* Survol ciblé : noms des Kakuriis dans la galerie. */
.kakurii-tile:is(:hover,:focus-visible) span {
  text-shadow: -2px -2px 0 #fffb95, 2px 2px 0 #772faf;
}

/* Hero-cache : debordement de 1 px sur les deux bords. */
.kakurii-profile-shell > .kakurii-profile-top-edge { top: -1px; }
@media (min-width: 980px) {
  .kakurii-profile-shell:has(> .kakurii-profile:not([hidden]))::before { bottom: -1px; }
}


/* Séparateurs décoratifs : ne bloquent pas la sélection des textes ni TranslatePress.
   Aucun changement de z-index des panneaux : le papier rose et ses zigzags restent visibles. */
.kakurii-profile .kakurii-dash { pointer-events: none !important; }

/* Fiches Kakurii : largeur des pointillés sur mobile uniquement. */
@media (max-width: 979px) {
  .kakurii-dash { max-width: 380px !important; }
}