:root{--cmp-ink:#11110f;--cmp-paper:#f3f0e8;--cmp-paper2:#e8e3d8;--cmp-red:#a5161d;--cmp-line:rgba(17,17,15,.16);--cmp-muted:#6b675f;--cmp-white:#fffdf8}
body.comparison-v2{background:var(--cmp-paper);color:var(--cmp-ink)}
.comparison-v2 main{font-family:Barlow,Inter,system-ui,sans-serif}.comparison-v2 .cmp-wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.comparison-v2 .cmp-hero{min-height:670px;display:grid;align-items:center;background:radial-gradient(circle at 80% 15%,rgba(165,22,29,.18),transparent 33%),linear-gradient(120deg,var(--cmp-paper) 0 62%,var(--cmp-paper2) 62% 100%);border-bottom:1px solid var(--cmp-line);overflow:hidden}
.comparison-v2 .cmp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;padding:78px 0}.comparison-v2 .cmp-eyebrow{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--cmp-red)}
.comparison-v2 .cmp-hero h1{font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(64px,8.3vw,122px);line-height:.79;letter-spacing:-.035em;margin:18px 0 28px;text-transform:uppercase}.comparison-v2 .cmp-hero h1 em{font-style:normal;color:var(--cmp-red)}
.comparison-v2 .cmp-lead{font-size:20px;max-width:680px;color:#37342f}.comparison-v2 .cmp-actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}.comparison-v2 .cmp-pill{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:100px;background:var(--cmp-ink);color:white!important;text-decoration:none;font-weight:850;font-size:12px}.comparison-v2 .cmp-pill.red{background:var(--cmp-red)}.comparison-v2 .cmp-pill.light{background:transparent;color:var(--cmp-ink)!important;border:1px solid var(--cmp-line)}
.comparison-v2 .fight-card{min-height:475px;background:var(--cmp-ink);color:var(--cmp-white);position:relative;overflow:hidden;border-radius:4px;padding:34px;box-shadow:0 30px 70px rgba(0,0,0,.15)}.comparison-v2 .fight-card:before{content:'極';position:absolute;right:-12px;bottom:-95px;font-size:390px;font-weight:1000;line-height:1;color:rgba(255,255,255,.04)}
.comparison-v2 .cmp-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:end;margin-top:130px;position:relative;z-index:2}.comparison-v2 .fighter small{display:block;color:#aaa;font-size:10px;letter-spacing:.15em;text-transform:uppercase}.comparison-v2 .fighter b{font-size:31px;letter-spacing:-.04em}.comparison-v2 .fighter.right{text-align:right}.comparison-v2 .vsmark{font-weight:1000;color:var(--cmp-red);font-size:22px;padding-bottom:6px}.comparison-v2 .ruleline{position:absolute;left:34px;right:34px;bottom:34px;border-top:1px solid rgba(255,255,255,.15);padding-top:17px;display:flex;justify-content:space-between;font-size:11px;color:#aaa}
.comparison-v2 .ticker{background:var(--cmp-red);color:#fff;padding:11px 0;white-space:nowrap;overflow:hidden;font-size:12px;font-weight:900;letter-spacing:.13em}.comparison-v2 .ticker span{display:inline-block;padding-left:2vw}
.comparison-v2 .cmp-section{padding:100px 0;border-bottom:1px solid var(--cmp-line)}.comparison-v2 .section-head{display:grid;grid-template-columns:110px 1fr;gap:30px;margin-bottom:52px}.comparison-v2 .num{font-weight:950;font-size:14px;color:var(--cmp-red);padding-top:12px}.comparison-v2 .cmp-section h2{font-family:'Bebas Neue',Impact,sans-serif;font-size:clamp(48px,5.5vw,76px);line-height:.92;letter-spacing:-.025em;margin:0;text-transform:uppercase;max-width:900px}.comparison-v2 .subcopy{max-width:760px;font-size:17px;color:#4f4b44;margin-top:18px}
.comparison-v2 .cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.comparison-v2 .art-card{background:var(--cmp-white);border:1px solid var(--cmp-line);padding:34px;min-height:410px;position:relative;overflow:hidden}.comparison-v2 .art-card.dark{background:var(--cmp-ink);color:white}.comparison-v2 .kanji{font-size:92px;font-weight:950;line-height:1;color:var(--cmp-red);margin-bottom:45px}.comparison-v2 .art-card h3{font-family:'Bebas Neue',Impact,sans-serif;font-size:46px;letter-spacing:-.02em;margin:0 0 12px}.comparison-v2 .art-card p{font-size:16px;max-width:500px}.comparison-v2 .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.comparison-v2 .tag{border:1px solid currentColor;border-radius:100px;padding:7px 11px;font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;opacity:.75}
.comparison-v2 .compare{width:100%;border-collapse:collapse;background:var(--cmp-white);border:1px solid var(--cmp-line)}.comparison-v2 .compare th,.comparison-v2 .compare td{padding:20px 22px;border-bottom:1px solid var(--cmp-line);vertical-align:top}.comparison-v2 .compare th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#e7e1d5}.comparison-v2 .compare td:first-child{font-weight:850;width:26%}.comparison-v2 .check{color:var(--cmp-red);font-weight:950}
.comparison-v2 .choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.comparison-v2 .choice{padding:42px;background:var(--cmp-ink);color:white;min-height:410px}.comparison-v2 .choice.other{background:var(--cmp-red)}.comparison-v2 .choice .label{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:.68}.comparison-v2 .choice h3{font-family:'Bebas Neue',Impact,sans-serif;font-size:52px;line-height:.95;letter-spacing:-.02em;margin:18px 0 22px}.comparison-v2 .choice li{margin:11px 0}.comparison-v2 .callout{background:var(--cmp-red);color:white;padding:54px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.comparison-v2 .callout h3{font-family:'Bebas Neue',Impact,sans-serif;font-size:54px;line-height:.95;margin:0}.comparison-v2 .callout p{font-size:18px;margin:0}.comparison-v2 .faq{max-width:900px;margin-left:auto}.comparison-v2 details{border-top:1px solid var(--cmp-line);padding:24px 0}.comparison-v2 details:last-child{border-bottom:1px solid var(--cmp-line)}.comparison-v2 summary{cursor:pointer;font-size:20px;font-weight:900;list-style:none}.comparison-v2 details p{color:#4d4942;max-width:760px}.comparison-v2 .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.comparison-v2 .related-grid a{background:var(--cmp-white);border:1px solid var(--cmp-line);padding:24px;text-decoration:none;font-weight:800;min-height:110px;display:flex;align-items:flex-end}.comparison-v2 .related-grid a:hover{background:var(--cmp-ink);color:#fff}.comparison-v2 .crumbs{font-size:12px;margin-bottom:24px;color:var(--cmp-muted)}
@media(max-width:780px){.comparison-v2 .cmp-hero-grid,.comparison-v2 .cards,.comparison-v2 .choice-grid,.comparison-v2 .callout,.comparison-v2 .related-grid{grid-template-columns:1fr}.comparison-v2 .cmp-hero{min-height:auto}.comparison-v2 .fight-card{min-height:360px}.comparison-v2 .section-head{grid-template-columns:1fr;gap:5px}.comparison-v2 .cmp-section{padding:70px 0}.comparison-v2 .compare{font-size:13px}.comparison-v2 .compare th,.comparison-v2 .compare td{padding:14px 10px}.comparison-v2 .cmp-lead{font-size:17px}.comparison-v2 .cmp-hero h1{font-size:68px}}

/* --- Intégration au site officiel KarateIDS ---------------------------- */
/* Le header du site est clair sur fond sombre : sur les pages crème, on force
   l'état « scrolled » (fond noir opaque) pour garder le menu lisible. */
.comparison-v2 .header{background:rgba(10,10,10,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(17,17,15,.18)}
.comparison-v2 .cmp-hero{padding-top:5.5rem}
.comparison-v2 .crumbs a{color:var(--cmp-muted);text-decoration:underline;text-underline-offset:3px}
.comparison-v2 .crumbs a:hover{color:var(--cmp-red)}
.comparison-v2 .crumbs .sep{margin:0 .3rem}
.comparison-v2 .cmp-pill:hover{opacity:.88}
.comparison-v2 .related-grid a{color:var(--cmp-ink)}
.comparison-v2 main a{color:var(--cmp-ink)}
/* le footer officiel reste sombre : rien à surcharger */
@media(max-width:860px){.comparison-v2 .cmp-hero{padding-top:4.5rem}}

/* --- FAQ : neutralise le composant .faq de styles.css -------------------
   styles.css definit .faq pour le site officiel, qui est SOMBRE :
   panneau #151515 et texte clair. Les pages comparaison sont CREME et
   reutilisaient ce meme nom de classe : le panneau noir arrivait avec,
   mais la couleur du texte venait de la page creme, d'ou des questions
   en encre sombre sur fond sombre, illisibles.
   On retablit ici la liste minimale prevue au design des comparaisons. */
.comparison-v2 .faq{background:none;border:0;border-radius:0;padding:0}
.comparison-v2 .faq details{border-top:1px solid var(--cmp-line);padding:0}
.comparison-v2 .faq details:last-child{border-bottom:1px solid var(--cmp-line)}
.comparison-v2 .faq summary{padding:22px 0;color:var(--cmp-ink);font-size:21px;
  letter-spacing:.01em;align-items:center}
.comparison-v2 .faq summary:hover{color:var(--cmp-red)}
.comparison-v2 .faq p{padding:0 0 22px;color:#4d4942;font-size:16.5px;max-width:760px}

/* L'attribut open est porte par <details>, pas par le conteneur .faq :
   la regle .faq[open] de styles.css ne se declenchait jamais ici, et le
   bloc ouvert affichait encore un « + ». */
.comparison-v2 .faq summary::after{color:var(--cmp-red)}
.comparison-v2 .faq details[open] summary::after{content:"–"}


/* ── v3 · Débordement horizontal sur mobile ────────────────────────────────
   Mesuré au navigateur à 390 px : le document débordait de 86 px en anglais
   et de 209 px en français. Cause unique : .choice et .callout portent un
   padding de 42–54 px et des titres Bebas 52–54 px ; dans une colonne de
   350 px, la largeur min-content du titre dépasse la piste de grille. Le
   français l'aggrave (« conditionnement », « personnelle ») sans en être la
   cause — le défaut existe déjà sur les pages anglaises livrées.
   Correctif appliqué aux deux langues : aucun design distinct pour le
   français. Rien hors de .comparison-v2 n'est touché. */
@media(max-width:520px){
  .comparison-v2 .choice{padding:28px 22px;min-height:0}
  .comparison-v2 .choice h3{font-size:34px;overflow-wrap:break-word}
  .comparison-v2 .callout{padding:32px 22px;gap:22px}
  .comparison-v2 .callout h3{font-size:36px;overflow-wrap:break-word}
  .comparison-v2 .cmp-hero h1{overflow-wrap:break-word}
  .comparison-v2 .related-grid a{padding:18px;min-height:0}
  .comparison-v2 .crumbs{overflow-wrap:break-word}
}

/* Le tableau comparatif est une donnée large : il défile seul, la page non.
   Mesuré à 360 px : le tableau français atteignait 443 px de large. */
.comparison-v2 .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.comparison-v2 .table-scroll .compare{min-width:340px}

/* v4 · Même garde que discover.css : un mot long dans un titre d'affichage ne
   doit pas pouvoir faire déborder la page. Mesuré à 360 px et à 1024 px. */
.comparison-v2 .cmp-hero h1,
.comparison-v2 .choice h3,
.comparison-v2 .callout h3,
.comparison-v2 .cmp-vs,
.comparison-v2 .section-head h2{overflow-wrap:break-word}

/* Un enfant de grille ou de flex ne descend pas sous sa largeur min-content
   tant que min-width vaut auto : la césure posée au-dessus restait sans effet
   sur .cmp-vs et .choice-grid. min-width:0 la laisse s'appliquer. */
.comparison-v2 .cmp-vs > *,
.comparison-v2 .choice-grid > *,
.comparison-v2 .cmp-hero-grid > *{min-width:0}
.comparison-v2 .fighter b,
.comparison-v2 .fighter small,
.comparison-v2 .choice h3{overflow-wrap:break-word}