/* Merge Your Pets — DA cartoon, 12 octobre 2026.
   Références : fenêtres SOL (aubergine/crème, Fredoka/Luckiest Guy),
   bannières cartoon du 11 octobre et portraits HD natifs du 12 octobre.
   Le fichier de base conserve les structures et comportements du wiki. */
:root {
  --aub: #2a1f2e; --creme: #fff8e8; --or: #ffd84a; --vert: #4fd47a;
  --bg: #fff8e8; --bg-2: #f5ecd9; --surface: #fffdf6;
  --ink: #2a1f2e; --ink-2: #665a68; --line: #d9ccbd;
  --accent: #217653; --accent-2: #18573e; --on-accent: #fff8e8;
  --honey: #ffd84a; --honey-2: #b98626; --honey-ink: #795212;
  --night: #2a1f2e; --night-2: #372b3b; --night-3: #443748;
  --night-line: #69566b; --night-ink: #fff8e8; --night-ink-2: #d5c7d7;
  --glass: rgba(255,248,232,.96); --veil: rgba(42,31,46,.6);
  --f-display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-title: "Luckiest Guy", "Fredoka", system-ui, sans-serif;
  --f-hud: "Nunito", system-ui, sans-serif;
  --shadow-1: 0 5px 0 rgba(42,31,46,.13);
  --shadow-2: 0 7px 0 rgba(42,31,46,.18), 0 12px 24px rgba(42,31,46,.1);
  --radius: 24px; --radius-s: 16px; --header-h: 80px;
  --maxw: 1360px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2a1f2e; --bg-2: #332638; --surface: #3d3042; --line: #766378;
    --ink: #fff8e8; --ink-2: #d5c7d7; --accent: #78e7a3; --accent-2: #4fd47a;
    --on-accent: #2a1f2e; --glass: rgba(42,31,46,.97); --honey-ink: #ffe68b;
    --r0t: #d6d9d0; --r1t: #92e2a4; --r2t: #aac9ff; --r3t: #d2b8ff;
    --r4t: #ffe289; --r5t: #ffa8c1; --r6t: #90e8f5;
    --shadow-1: 0 5px 0 rgba(0,0,0,.25); --shadow-2: 0 7px 0 rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2a1f2e; --bg-2: #332638; --surface: #3d3042; --line: #766378;
  --ink: #fff8e8; --ink-2: #d5c7d7; --accent: #78e7a3; --accent-2: #4fd47a;
  --on-accent: #2a1f2e; --glass: rgba(42,31,46,.97); --honey-ink: #ffe68b;
  --r0t: #d6d9d0; --r1t: #92e2a4; --r2t: #aac9ff; --r3t: #d2b8ff;
  --r4t: #ffe289; --r5t: #ffa8c1; --r6t: #90e8f5;
  color-scheme: dark;
}
body { font-weight: 600; }
h1,h2,h3,h4 { letter-spacing: 0; }
.hud { font-weight: 900; letter-spacing: .08em; }
.h-section,.h-page,.carte-biome h3,.ouverture__promesse,.compteur b {
  font-family: var(--f-title); font-weight: 400; letter-spacing: .015em;
  color: var(--creme); -webkit-text-stroke: 5px var(--aub);
  paint-order: stroke fill; text-shadow: 0 4px 0 var(--aub);
  line-height: 1.13;
}
.h-section { font-size: clamp(2.1rem,4.4vw,3.6rem); }
.h-page { font-size: clamp(2.7rem,6vw,5rem); }
.chapo { font-weight: 600; }
.surtitre { font-family: var(--f-display); font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.surtitre::before { width: 14px; height: 14px; border: 2px solid var(--aub); border-radius: 5px; transform: rotate(-12deg); }
.motif { background-image: radial-gradient(var(--motif,rgba(42,31,46,.08)) 2px,transparent 2px); background-size: 24px 24px; }
.bande { padding-block: clamp(60px,7vw,96px); }
.bande--nuit { --motif: rgba(255,248,232,.055); }
.bande--creme { border-block: 3px solid var(--aub); }
/* Boutons en relief : mêmes contours et couleurs que le jeu. */
.btn {
  border: 3px solid var(--aub); border-radius: 16px; min-height: 50px;
  color: var(--aub); background: var(--creme);
  box-shadow: 0 4px 0 var(--aub); font-size: 1.05rem;
}
.btn:hover { box-shadow: 0 6px 0 var(--aub); }
.btn:active { box-shadow: 0 1px 0 var(--aub); }
.btn--miel,.btn--foret {
  font: 400 1.15rem/1.15 var(--f-title); letter-spacing: .03em;
  -webkit-text-stroke: 2.5px var(--aub); paint-order: stroke fill;
  color: var(--creme); text-shadow: 0 1px 0 var(--aub);
  background: linear-gradient(#ffe782,#ffd84a 55%,#efb931);
  box-shadow: 0 0 0 2px var(--creme),0 6px 0 2px var(--aub);
}
.btn--foret { background: linear-gradient(#67e68a,#4fd47a 55%,#2aa65a); }
.btn--miel:hover,.btn--foret:hover { box-shadow: 0 0 0 2px var(--creme),0 8px 0 2px var(--aub); }
.btn--miel:active,.btn--foret:active { box-shadow: 0 0 0 2px var(--creme),0 2px 0 2px var(--aub); }
.btn--miel svg,.btn--foret svg { color: var(--aub); }
.btn--verre { background: #49344f; color: var(--creme); border-color: var(--creme); box-shadow: 0 4px 0 var(--aub); backdrop-filter: none; }
.btn--petit { min-height: 40px; font-size: .95rem; }
.icone-btn { background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; }
.icone-btn:hover { background: var(--bg-2); }
/* Navigation stable et compacte, même sur les petites fenêtres. */
.entete,.entete[data-sur-image="1"] {
  background: var(--glass); color: var(--ink); border-bottom: 3px solid var(--aub);
  box-shadow: 0 3px 0 rgba(255,248,232,.35); backdrop-filter: blur(12px);
}
.entete__barre { gap: 18px; }
.marque__logo { width: 138px; }
.nav { gap: 2px; margin-left: 0; }
.nav a { font-weight: 600; padding-inline: 10px; opacity: 1; }
.nav a[aria-current="page"] { background: var(--honey); color: var(--aub); box-shadow: inset 0 0 0 2px var(--aub); }
.nav a[aria-current="page"]::after { display: none; }
.puce-biome { background: var(--surface); border: 2px solid var(--ink); }
.puce-biome__nom { font-weight: 600; }
.entete .btn--jouer { font-size: .92rem; min-height: 44px; }
.menu { background-image: radial-gradient(rgba(255,248,232,.05) 2px,transparent 2px); background-size: 24px 24px; }
.menu__liens a { font-family: var(--f-title); font-weight: 400; -webkit-text-stroke: 3px var(--aub); paint-order: stroke fill; }
.menu .icone-btn { background: var(--night-2); border-color: var(--creme); }
/* Ouverture : illustration lumineuse à droite, panneau de jeu à gauche. */
.ouverture { min-height: 790px; min-height: min(880px,max(790px,94svh)); border-bottom: 4px solid var(--aub); justify-content: center; }
.ouverture__art img { object-position: 70% center; transform: none; transition: opacity .8s ease; }
.ouverture::before { background: linear-gradient(90deg,rgba(42,31,46,.18),transparent 65%),linear-gradient(0deg,rgba(42,31,46,.65),transparent 35%); }
.ouverture__contenu { gap: 30px; padding-top: calc(var(--header-h) + 48px); padding-bottom: 36px; }
.ouverture__intro {
  display: grid; gap: 20px; width: min(460px,100%); padding: 28px;
  background: rgba(42,31,46,.94); border: 3px solid var(--creme); border-radius: 28px;
  box-shadow: 0 0 0 3px var(--aub),0 8px 0 3px rgba(42,31,46,.45);
}
.ouverture__sur { font-size: .73rem; color: var(--or); letter-spacing: .06em; }
.ouverture__sur::before { width: 12px; height: 12px; border: 2px solid var(--creme); border-radius: 4px; transform: rotate(-12deg); }
.titre-logo img { width: min(390px,100%); }
.ouverture__promesse { font-size: clamp(1.9rem,3vw,2.65rem); -webkit-text-stroke-width: 3px; }
.ouverture__accroche { max-width: 35ch; color: #f4e9ef; font-size: 1rem; line-height: 1.6; font-weight: 700; }
.ouverture__actions { gap: 16px; }
.ouverture__actions .btn { flex: 1 1 auto; padding-inline: 14px; }
.horloge { max-width: 880px; padding: 18px 22px; margin-top: 0; gap: 14px 28px; background: rgba(42,31,46,.95); border: 3px solid var(--creme); box-shadow: 0 0 0 3px var(--aub),0 6px 0 3px rgba(42,31,46,.4); border-radius: 22px; }
.horloge__actuel { font-weight: 600; }
.horloge__compte { font-family: var(--f-display); font-weight: 600; color: var(--or); }
.horloge__piste { gap: 10px; }
.horloge__seg b { height: 12px; border: 2px solid rgba(255,248,232,.4); border-radius: 6px; }
.horloge__seg span { letter-spacing: 0; font-size: .72rem; font-family: var(--f-display); font-weight: 500; }
.horloge__seg[data-actif="1"] span { color: var(--or); }
/* Cartes et petites étiquettes : silhouettes franches, contours discrets dans les articles. */
.etape,.carte-tech,.carte-famille { border: 3px solid var(--aub); box-shadow: var(--shadow-1); }
.etape { border-top-width: 8px; }
.etape:nth-child(1) { border-top-color: #47c8d5; }
.etape:nth-child(2) { border-top-color: #b291f4; }
.etape:nth-child(3) { border-top-color: #ffd84a; }
.etape:nth-child(4) { border-top-color: #4fd47a; }
.etape__num { color: var(--ink); background: var(--bg-2); padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; letter-spacing: 0; font-size: .8rem; }
.etape__icone,.carte-tech img,.article__tete img,.tech>img { filter: drop-shadow(0 3px 0 rgba(42,31,46,.25)); }
.etape:not(:last-child)::after { border-color: var(--aub); width: 14px; height: 14px; right: -16px; }
.etape h3,.carte-tech h3 { font-weight: 600; }
.carte-biome { min-height: 300px; border: 3px solid var(--creme); box-shadow: 0 0 0 2px var(--aub),0 6px 0 var(--aub); padding: 20px; }
.carte-biome img { object-position: 72% center; }
.carte-biome::before { background: linear-gradient(0deg,rgba(42,31,46,.98),rgba(42,31,46,.15) 60%,transparent 85%); }
.carte-biome h3 { font-size: 2.2rem; -webkit-text-stroke-width: 3px; }
.carte-biome p { color: var(--creme); font-size: .95rem; }
.carte-biome__num { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; background: var(--aub); border: 2px solid var(--creme); border-radius: 10px; letter-spacing: 0; top: 14px; left: 14px; }
.etiquette { background: var(--aub); border: 2px solid var(--creme); font-weight: 900; letter-spacing: .04em; }
.etiquette--live::before { border-radius: 50%; box-shadow: none; background: var(--vert); }
.carte-famille:hover { box-shadow: var(--shadow-2); }
.carte-famille .vitrine { border-radius: 16px; }
.carte-famille h3 { font-size: 1.45rem; font-weight: 600; }
.carte-famille__biome { letter-spacing: .03em; font-weight: 900; }
.vitrine { border: 2px solid color-mix(in srgb,var(--c) 45%,var(--line)); background: radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--c) 20%,transparent),transparent 75%),var(--bg-2); }
.scelle::before { background-size: 28px 28px; opacity: .35; }
.scelle__btn { border: 2px solid var(--aub); background: var(--creme); color: var(--aub); box-shadow: 0 3px 0 var(--aub); min-height: 38px; font-size: .9rem; font-weight: 600; }
.scelle__btn:hover { background: #ffe68b; }
.vitrine--petite .scelle__btn { min-height: 34px; font-size: .85rem; }
.scelle__texte { font-size: .7rem; letter-spacing: .04em; }
.remasquer { border: 2px solid var(--ink); }
.scene { border: 3px solid var(--creme); box-shadow: 0 0 0 3px var(--aub),0 6px 0 3px rgba(42,31,46,.2); }
.scene .scelle__btn,.bande--nuit .scelle__btn { color: var(--aub); background: var(--creme); }
.bande--nuit .carte-famille { border-color: var(--creme); box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.rarete { border-width: 2px; border-radius: 10px; letter-spacing: .04em; font-weight: 900; }
.compteur b { -webkit-text-stroke-width: 3px; color: var(--or); }
.oeuf__img img { filter: drop-shadow(0 4px 0 rgba(42,31,46,.3)); }
.oeuf__nom { font-weight: 600; }
.puce,.tier-btn,.champ,.bascule { border: 2px solid var(--line); }
.puce { min-height: 42px; font-weight: 600; }
.puce[aria-pressed="true"],.tier-btn[aria-pressed="true"],.sommaire a[data-actif="1"] { background: var(--or); color: var(--aub); border-color: var(--aub); }
.tier-btn[aria-pressed="true"] span { color: #634b19; }
.bascule button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--aub); }
.article,.tech,.outil,.detail-tier,.pelage,.evolution,.voisin,.tableau-cadre,.encadre { border: 2px solid var(--line); }
.lore__chapitres { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:18px; margin:0; padding:0; list-style:none; }
.lore__chapitre { display:grid; align-content:start; gap:14px; padding:24px; background:var(--surface); border:2px solid var(--line); border-top:5px solid var(--c,var(--accent)); border-radius:22px; box-shadow:0 5px 0 var(--line); min-width:0; }
.lore__etape { font-size:.85rem; color:var(--ink-2); }
.lore__chapitre h3 { font-family:var(--f-display); font-size:1.4rem; font-weight:600; line-height:1.2; margin:0 0 12px; }
.lore__chapitre p { font-family:var(--f-body); line-height:1.75; color:var(--ink-2); margin:0; }
.lore-scelle { display:grid; justify-items:start; gap:18px; }
.lore-scelle .btn svg { width:18px; height:18px; }
@media(max-width:480px) { .lore__chapitre { padding:20px; } }
.article h2,.tech h2,.outil h2 { font-weight: 600; }
.article { border-top: 5px solid var(--line); }
.article:target { border-color: var(--honey-2); }
.tableau-cadre { border-radius: 16px; }
th { font-size: .75rem; letter-spacing: .03em; font-weight: 900; }
tbody tr:nth-child(even) { background: color-mix(in srgb,var(--bg-2) 35%,transparent); }
.fil { letter-spacing: .03em; }
.tete-biome::before { background: linear-gradient(90deg,rgba(42,31,46,.92),rgba(42,31,46,.1) 85%),linear-gradient(0deg,var(--night),transparent 55%); }
.tete-biome { border-bottom: 3px solid var(--aub); }
.tete-biome img { object-position: 72% center; }
.voisin:hover { border-color: var(--ink); }
.dialogue { border: 3px solid var(--creme); box-shadow: 0 0 0 3px var(--aub),0 8px 0 3px rgba(42,31,46,.3); }
.voile { background: rgba(42,31,46,.75); }
.niveau-spoiler { border-width: 2px; }
.niveau-spoiler:has(input:checked) { border-color: var(--honey-2); }
.res:hover,.res[data-sel="1"] { box-shadow: inset 0 0 0 2px var(--line); }
/* NOFLEX : signature typographique, pas une ancienne illustration réaliste. */
.pied { border-top: 4px solid var(--aub); }
.pied__studio { min-height: 170px; padding: 28px; border: 3px solid var(--creme); background: var(--night-2); display: flex; align-items: center; gap: 28px; box-shadow: 0 0 0 2px var(--aub),0 6px 0 rgba(0,0,0,.2); }
.pied__studio::before { background: radial-gradient(circle at 80% 50%,rgba(255,216,74,.12),transparent 50%); }
.pied__embleme { font: 400 5rem/1 var(--f-title); color: var(--or); -webkit-text-stroke: 4px var(--aub); paint-order: stroke fill; position: relative; }
.pied__embleme span { position: absolute; right: -15px; top: -12px; font-size: 2rem; color: var(--creme); }
.pied__studio p { max-width: 30ch; font: 600 clamp(1.4rem,2.5vw,2rem)/1.2 var(--f-display); }
.pied h4 { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--or); }
.pied__grille { gap: 30px; }
/* Réduction de densité tablette / téléphone sans recadrage portrait artificiel. */
@media (max-width: 1360px) { .nav,.entete .btn--jouer { display: none; } .btn-menu { display: inline-grid; } }
@media (min-width: 1361px) { .nav { display: flex; } .btn-menu { display: none; } }
@media (max-width: 980px) { .biomes { grid-template-columns: repeat(2,minmax(0,1fr)); } .horloge { max-width: 100%; } }
@media (max-width: 760px) {
  :root { --header-h: 72px; }
  .entete__barre { gap: 10px; }
  .entete .marque__logo { width: 118px; }
  .ouverture { min-height: 0; display: block; }
  .ouverture__art { height: clamp(275px,57vw,400px); top: var(--header-h); }
  .ouverture__art img { object-fit: cover; object-position: 72% center; }
  .ouverture::before { background: linear-gradient(0deg,var(--night) 0,var(--night) calc(100% - 390px),transparent 85%); }
  .ouverture__contenu { padding-top: calc(var(--header-h) + clamp(240px,50vw,335px)); gap: 24px; padding-bottom: 32px; }
  .ouverture__intro { width: 100%; padding: 22px; gap: 16px; background: var(--night); }
  .titre-logo img { width: 260px; }
  .ouverture__promesse { font-size: 2rem; }
  .ouverture__accroche { max-width: 100%; font-size: 1rem; }
  .horloge { grid-template-columns: 1fr; padding: 18px; }
  .horloge__info { grid-template-columns: 1fr auto; align-items: center; }
  .horloge__label { grid-column: 1; }
  .horloge__actuel { grid-column: 1; }
  .horloge__compte { grid-column: 2; grid-row: 1 / span 2; font-size: 1.75rem; }
  .horloge__compte small { display: block; margin: 6px 0 0; text-align: right; letter-spacing: 0; }
  .horloge__piste { gap: 5px; }
  .horloge__seg span { font-size: .63rem; }
  .horloge__seg b { height: 10px; border-width: 1px; }
  .h-section,.h-page { -webkit-text-stroke-width: 3px; text-shadow: 0 3px 0 var(--aub); }
  .h-section { font-size: 2rem; } .h-page { font-size: 2.7rem; }
  .bande { padding-block: 56px; }
  .grille-familles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .carte-famille { padding: 7px 7px 12px; gap: 8px; border-width: 2px; }
  .carte-famille h3 { font-size: 1.1rem; }
  .carte-famille__animal { font-size: .82rem; }
  .carte-famille__ligne { flex-wrap: wrap; gap: 5px; }
  .carte-famille .rarete { font-size: .62rem; padding: 4px 6px; }
  .scelle__btn { min-height: 38px; padding-inline: 9px; font-size: .8rem; }
  .scene .scelle__btn { font-size: .95rem; }
  .scelle__texte { font-size: .6rem; }
  .biomes { grid-template-columns: 1fr; gap: 20px; }
  .carte-biome { min-height: 280px; }
  .tete-page { padding-top: calc(var(--header-h) + 40px); }
  .pied__studio { padding: 24px; gap: 24px; }
  .pied__embleme { font-size: 4rem; }
}
@media (max-width: 560px) {
  .entete .btn-recherche { display: inline-grid; }
  .entete .btn-spoiler { display: none; } /* Toujours accessible dans le menu. */
  .entete__outils { gap: 7px; }
  .icone-btn,.puce-biome { height: 38px; } .icone-btn { width: 38px; }
  .puce-biome { padding: 0 9px; gap: 7px; }
  .puce-biome__nom { font-size: .8rem; }
  .puce-biome__point { width: 7px; height: 7px; }
  .btn-langue { width: auto; }
  .ouverture__actions { flex-direction: column; gap: 14px; }
  .etape { padding: 20px 16px; }
  .etape__num { padding: 6px; font-size: .72rem; }
  .etape h3 { font-size: 1.45rem; }
  .entete-section { gap: 14px; }
  .dialogue--petit { padding: 20px; }
  .scelle__btn { gap: 5px; }
}
@media (max-width: 360px) {
  .entete .marque__logo { width: 102px; }
  .puce-biome__nom { display: none; }
  .puce-biome { width: 32px; justify-content: center; }
  .horloge__seg span { font-size: .57rem; }
  .grille-familles { gap: 10px; }
  .scelle__texte { display: none; }
  .carte-famille__corps { padding-inline: 2px; }
  .carte-famille .rarete { font-size: .57rem; }
}
/* L'action principale garde sa place dans l'ouverture ; la barre reste courte. */
@media (max-width: 1550px) { .entete .btn--jouer { display: none; } }
@media (min-width: 761px) {
  .ouverture__intro { gap: 18px; padding: 24px; }
  .titre-logo img { width: 340px; }
  .ouverture__promesse { font-size: 2.15rem; }
  .ouverture__actions { flex-direction: row; }
  .ouverture__actions .btn { font-size: .94rem; padding-inline: 11px; }
  .ouverture__actions .btn--miel { font-size: .95rem; }
}
.ouverture__contenu { grid-template-columns: minmax(0,1fr); }
.ouverture__intro,.horloge,.horloge__piste,.horloge__seg { min-width: 0; }
.horloge__piste { grid-auto-columns: minmax(0,1fr); }
.horloge__seg span { overflow: hidden; text-overflow: ellipsis; }
.carte-biome__num { width: auto; padding-inline: 9px; font-size: .65rem; }
.tete-biome .surtitre { color: var(--creme) !important; }