/* Mise en page : tableau vivant au centre, commandes dessous (portrait) ou à droite (ordinateur).
   Identité « autocollant » : contours encre épais, ombres pleines, turquoise et orange du logo.
   Univers unique et lumineux, volontairement indépendant du thème clair/sombre de l'appareil. */
:root {
  color-scheme: light;
  --ciel: #E2F6F5;
  --ciel-motif: #CDEEEC;
  --papier: #FFFFFF;
  --encre: #2A2230;
  --encre-douce: #5E5568;
  --turquoise: #1EC6CF;
  --turquoise-fonce: #0B7F87;
  --orange: #E8551E;
  --orange-vif: #FF6B35;
  --jaune: #FFC83D;
  --gris-floue: #9AA4B1;
  --danger: #B42318;
  --danger-fond: #FFE3DC;
  --f-titre: 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --f-texte: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --rayon: 18px;
  --ombre: 0 4px 0 var(--encre);
}
html, body { background: var(--ciel); color: var(--encre); }
body {
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.45;
  background-image: radial-gradient(var(--ciel-motif) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  overflow-x: hidden;
}
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-titre); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--turquoise-fonce); outline-offset: 3px; }
[hidden] { display: none !important; }
.zc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#zc {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 10px 28px;
}

/* ---------- En-tête */
#zc-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.zc-logo { background: none; border: 0; padding: 0; cursor: pointer; display: flex; }
.zc-logo img { height: 46px; width: auto; display: block; }
.zc-pieces {
  position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--papier); border: 3px solid var(--encre); border-radius: 999px; padding: 4px 14px 4px 6px;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem; box-shadow: var(--ombre);
  font-variant-numeric: tabular-nums; min-height: 44px;
}
.zc-pieces svg { width: 28px; height: 28px; }
.zc-plus { position: absolute; right: 8px; top: -8px; color: var(--turquoise-fonce); font-size: .95rem; animation: zc-monte .9s ease-out forwards; pointer-events: none; }
@keyframes zc-monte { to { transform: translateY(-22px); opacity: 0; } }
.zc-nav { display: flex; gap: 8px; }
.zc-btn-icone {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; min-height: 46px;
  background: var(--papier); border: 3px solid var(--encre); border-radius: 14px; box-shadow: var(--ombre);
  cursor: pointer; padding: 0 10px; font-family: var(--f-titre); font-weight: 700;
}
.zc-btn-icone svg { width: 22px; height: 22px; }
.zc-btn-icone span { display: none; }
@media (min-width: 640px) { .zc-btn-icone span { display: inline; } }
.zc-btn-icone:active, .zc-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }

/* ---------- Boutons */
.zc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 8px 18px; background: var(--papier); border: 3px solid var(--encre); border-radius: 16px;
  box-shadow: var(--ombre); font-family: var(--f-titre); font-weight: 700; font-size: 1.1rem; cursor: pointer;
  text-decoration: none; transition: transform .08s;
}
.zc-btn svg { width: 22px; height: 22px; flex: none; }
.zc-btn:disabled { opacity: .45; cursor: not-allowed; }
.zc-btn-orange { background: var(--orange); color: #fff; }
.zc-btn-grand { width: 100%; min-height: 60px; font-size: 1.35rem; font-weight: 800; }
.zc-btn-grand svg { width: 28px; height: 28px; }
.zc-btn-petit { min-height: 44px; padding: 4px 12px; font-size: 1rem; }
.zc-btn-danger { background: var(--danger-fond); color: var(--danger); }
.zc-pulse { animation: zc-pulse 1.2s ease-in-out infinite; }
@keyframes zc-pulse { 50% { transform: scale(1.03); } }

.zc-carte { background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre); }

/* ---------- Disposition des écrans */
.zc-ecran { display: grid; gap: 14px; }
.zc-zone-scene { position: relative; min-width: 0; }
.zc-panneau { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 920px) {
  .zc-ecran { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.zc-ecran-simple { display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin: 0 auto; }
.zc-titre-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Scène (tableau) */
.zc-scene {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; overflow: hidden;
  border: 3px solid var(--encre); border-radius: 24px; box-shadow: 0 6px 0 var(--encre);
  background: #9BE0EF; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
@media (min-width: 600px) { .zc-scene { aspect-ratio: 4 / 3; } }
@media (min-width: 920px) { .zc-scene { width: min(100%, calc((100vh - 110px) * 4 / 3)); margin: 0 auto; } }
.zc-fond, .zc-avant { position: absolute; inset: 0; }
.zc-fond svg, .zc-avant svg { width: 100%; height: 100%; display: block; }
.zc-avant { pointer-events: none; z-index: 1500; }
.zc-monde { position: absolute; inset: 0; }
.zc-decor, .zc-element-pose { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.zc-decor svg, .zc-element-pose svg { display: block; width: 100%; overflow: visible; }
.zc-element-pose { transform: translate(-50%, -78%); }
.zc-decor.apparait { animation: zc-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: .3s; }
@keyframes zc-pop { from { transform: translate(-50%, -100%) scale(0); } }

/* ---------- Animaux */
.zc-animal { position: absolute; transform: translate(-50%, -96%); }
.zc-animal.cliquable { cursor: pointer; }
.zc-animal.cliquable::before { content: ""; position: absolute; inset: -18% -12%; }
.zc-animal.arrive { animation: zc-arrive .6s ease-out both; }
@keyframes zc-arrive { from { opacity: 0; } }
.zc-flip.gauche { transform: scaleX(-1); }
.zc-pose svg { display: block; width: 100%; overflow: visible; }
.a-onde { display: none; }
.nage .a-onde { display: inline; }
.nage .a-patte, .nage .a-ombre { display: none; }
.nage .a-tout { transform: translateY(6px); }
.nage .a-corps { clip-path: var(--eau); }
.a-patte { transform-box: fill-box; transform-origin: 50% 8%; }
.marche .pa { animation: zc-pas .32s ease-in-out infinite alternate; }
.marche .pb { animation: zc-pas .32s ease-in-out infinite alternate-reverse; }
@keyframes zc-pas { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.marche .a-tout { animation: zc-rebond .32s ease-in-out infinite alternate; }
.nage.zc-animal .marche .a-tout, .nage .a-tout { animation-name: zc-flotte; animation-duration: 1.2s; }
@keyframes zc-rebond { to { transform: translateY(-2.5px); } }
@keyframes zc-flotte { from { transform: translateY(6px); } to { transform: translateY(8px); } }
.repos .a-queue { animation: zc-queue 1.8s ease-in-out infinite alternate; }
@keyframes zc-queue { from { transform: rotate(-4deg); } to { transform: rotate(7deg); } }
.a-oeil { animation: zc-cligne 4.2s infinite; }
@keyframes zc-cligne { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.act-grignoter .a-tete { animation: zc-grignote .22s ease-in-out infinite alternate; }
@keyframes zc-grignote { from { transform: rotate(-3deg); } to { transform: rotate(6deg); } }
.act-redresser .a-tout { transform-origin: 50px 96px; animation: zc-redresse 1.4s ease-in-out infinite alternate; }
@keyframes zc-redresse { from { transform: rotate(0); } to { transform: translateY(-5px) rotate(-14deg); } }
.act-sautiller .a-tout { animation: zc-saut .6s ease-out infinite; }
@keyframes zc-saut { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
.act-fouiller .a-tete { animation: zc-fouille .45s ease-in-out infinite alternate; }
@keyframes zc-fouille { from { transform: rotate(14deg); } to { transform: rotate(26deg); } }
.act-brouter .a-tete { animation: zc-broute 2.4s ease-in-out infinite alternate; }
@keyframes zc-broute { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(40deg); } }
.act-observer .a-tete { animation: zc-observe 2.2s ease-in-out infinite alternate; }
@keyframes zc-observe { from { transform: rotate(-9deg); } to { transform: rotate(5deg); } }
.act-barboter .a-tout { transform-origin: 60px 84px; animation: zc-barbote 1.8s ease-in-out infinite; }
@keyframes zc-barbote { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(28deg); } }
.act-jouer .a-tout { transform-origin: 60px 90px; animation: zc-joue .7s ease-in-out infinite alternate; }
@keyframes zc-joue { from { transform: rotate(-9deg); } to { transform: translateY(-6px) rotate(9deg); } }
.fige * { animation-delay: -.5s !important; animation-play-state: paused !important; }

.zc-coeur { position: absolute; transform: translate(-50%, -100%); animation: zc-coeur 1.2s ease-in-out infinite; pointer-events: none; }
.zc-coeur svg { display: block; width: 100%; }
@keyframes zc-coeur { 50% { transform: translate(-50%, -130%) scale(1.15); } }

/* Sursaut des animaux rares */
.zc-bulle-alerte { position: absolute; left: 50%; top: -18%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--jaune); border: 3px solid var(--encre); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 800; font-size: 1.2rem; line-height: 1; z-index: 5; animation: zc-alerte .3s ease-in-out infinite alternate; pointer-events: none; }
@keyframes zc-alerte { to { transform: translateX(-50%) scale(1.2); } }
.sursaute .zc-pose { animation: zc-sursaut .45s ease-out; }
@keyframes zc-sursaut { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-22%) rotate(-6deg); } }
.zc-rarete { display: inline-block; border: 2px solid var(--encre); border-radius: 999px; padding: 0 8px; font-family: var(--f-texte); font-size: .8rem; font-weight: 800; background: #E7ECEF; vertical-align: middle; }
.zc-rarete.peu_commun { background: #BDF1F3; }
.zc-rarete.rare { background: #D9CCFF; }
.zc-rarete.tres_rare { background: var(--orange-vif); color: #fff; }
.zc-avis { display: block; font-family: var(--f-texte); font-size: .95rem; font-weight: 800; color: var(--danger); }

/* Cadre de visée */
.zc-cadre { position: absolute; inset: -14% -10% -6%; pointer-events: none; animation: zc-vise .9s ease-in-out infinite alternate; }
.zc-cadre i { position: absolute; width: 22%; height: 26%; border: 0 solid #fff; filter: drop-shadow(0 0 1.5px var(--encre)) drop-shadow(0 0 1px var(--encre)); }
.zc-cadre i:nth-child(1) { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: 8px; }
.zc-cadre i:nth-child(2) { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: 8px; }
.zc-cadre i:nth-child(3) { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: 8px; }
.zc-cadre i:nth-child(4) { right: 0; bottom: 0; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: 8px; }
@keyframes zc-vise { to { inset: -10% -6% -3%; } }

/* ---------- Observation */
.zc-hud-scene { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; z-index: 2000; pointer-events: none; }
.zc-chrono, .zc-cliches {
  background: var(--papier); border: 3px solid var(--encre); border-radius: 999px; padding: 2px 12px;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px;
}
.zc-chrono.urgent { background: var(--orange-vif); color: #fff; }
.zc-cliches i { display: inline-flex; width: 24px; height: 24px; opacity: .25; }
.zc-cliches i.plein { opacity: 1; color: var(--orange); }
.zc-cliches svg { width: 100%; height: 100%; }
.zc-coins i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255, 255, 255, .85); z-index: 1600; pointer-events: none; }
.zc-coins i:nth-child(1) { left: 12px; bottom: 12px; border-left-width: 3px; border-bottom-width: 3px; }
.zc-coins i:nth-child(2) { right: 12px; bottom: 12px; border-right-width: 3px; border-bottom-width: 3px; }
.zc-coins i:nth-child(3) { left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-width: 2px; border-radius: 50%; border-color: rgba(255, 255, 255, .5); }
.zc-coins i:nth-child(4) { display: none; }
.zc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2100; }
.zc-flash.on { animation: zc-flash .35s ease-out; }
@keyframes zc-flash { from { opacity: .95; } to { opacity: 0; } }
.zc-retour-photo { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 2050; opacity: 0; pointer-events: none;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.6rem; padding: 2px 16px; border: 3px solid var(--encre); border-radius: 14px; background: var(--papier); }
.zc-retour-photo.on { animation: zc-retour 1.2s ease-out; }
.zc-retour-photo.excellente { background: var(--jaune); }
.zc-retour-photo.valide { background: var(--turquoise); }
.zc-retour-photo.floue { background: #DDE2E8; }
@keyframes zc-retour { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 15%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }
.zc-pause { position: absolute; inset: 0; z-index: 2500; display: grid; place-items: center; background: rgba(42, 34, 48, .55); border-radius: 24px; padding: 16px; }
.zc-pause .zc-carte { text-align: center; display: grid; gap: 10px; max-width: 320px; }

.zc-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.zc-hud > #zc-obs-guide, .zc-hud > .zc-cible, .zc-hud > .zc-aide-clavier { grid-column: 1 / -1; }
@media (min-width: 920px) { .zc-hud { grid-template-columns: 1fr; } }
.zc-cible { font-family: var(--f-titre); font-weight: 700; font-size: 1.2rem; min-height: 1.6em; }
.zc-jauge { position: relative; height: 26px; border: 3px solid var(--encre); border-radius: 13px; background: var(--papier); overflow: hidden; }
.zc-jauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gris-floue); }
.zc-jauge.valide i { background: var(--turquoise); }
.zc-jauge.excellente i { background: var(--jaune); }
.zc-jauge span { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--encre); margin-left: -1.5px; }
.zc-jauge-texte { font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.zc-jx { display: grid; justify-items: center; }
.zc-jx.gele { opacity: .45; filter: grayscale(.6); }
.zc-jbarre { position: relative; width: 100%; height: 34px; border: 3px solid var(--encre); border-radius: 17px; background: var(--papier); overflow: hidden; }
.zc-jbarre.vide { background: repeating-linear-gradient(45deg, var(--papier), var(--papier) 8px, #EFECF2 8px, #EFECF2 16px); }
.zc-jbarre .zv, .zc-jbarre .ze { position: absolute; top: 0; bottom: 0; }
.zc-jbarre .zv { background: var(--turquoise); }
.zc-jbarre .ze { background: var(--jaune); border-left: 2px solid var(--encre); border-right: 2px solid var(--encre); }
.zc-jbarre .cur { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; background: var(--encre); border-radius: 3px; box-shadow: 0 0 0 2px var(--papier); }
.zc-jcercle { width: min(150px, 100%); height: auto; aspect-ratio: 1; }
.zc-jcercle .piste { stroke: #E4E0EA; }
.zc-jcercle .zv { stroke: var(--turquoise); }
.zc-jcercle .ze { stroke: var(--jaune); }
.zc-jcercle .aig { stroke: var(--encre); stroke-width: 5; stroke-linecap: round; }
.zc-jcercle .axe { fill: var(--encre); }
.zc-jetapes { display: flex; gap: 8px; justify-content: center; margin-top: 6px; min-height: 16px; }
.zc-jetapes i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--encre); background: var(--papier); }
.zc-jetapes i.courante { background: #FFF3C4; }
.zc-jetapes i.floue { background: var(--gris-floue); }
.zc-jetapes i.valide { background: var(--turquoise); }
.zc-jetapes i.excellente { background: var(--jaune); }
.zc-jret.excellente { color: #8A5A00; }
.zc-jret.valide { color: var(--turquoise-fonce); }
.zc-jret.floue { color: var(--encre-douce); }
.zc-indice { font-weight: 800; }
.zc-declencheur {
  width: 104px; height: 104px; border-radius: 50%; border: 4px solid var(--encre); background: var(--orange); color: #fff;
  box-shadow: 0 5px 0 var(--encre); display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer;
  font-family: var(--f-titre); font-weight: 800; font-size: .95rem;
}
.zc-declencheur svg { width: 40px; height: 40px; }
.zc-declencheur:disabled { background: #E9E6EC; color: var(--encre-douce); cursor: not-allowed; }
.zc-declencheur:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--encre); }
@media (min-width: 920px) { .zc-declencheur { justify-self: center; width: 132px; height: 132px; font-size: 1.1rem; } .zc-declencheur svg { width: 52px; height: 52px; } }
.zc-aide-clavier { color: var(--encre-douce); font-size: .85rem; display: none; }
@media (hover: hover) and (min-width: 920px) { .zc-aide-clavier { display: block; text-align: center; } }

/* ---------- Guide (mascotte) */
.zc-guide { display: flex; align-items: center; gap: 12px; background: var(--papier); border: 3px solid var(--turquoise-fonce); border-radius: var(--rayon); padding: 10px 12px; flex-wrap: wrap; animation: zc-guide .4s ease-out; }
.zc-guide img { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--encre); flex: none; }
.zc-guide p { flex: 1 1 160px; font-weight: 700; }
@keyframes zc-guide { from { transform: translateY(6px); opacity: 0; } }

/* ---------- Zoo */
.zc-fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--encre); background: var(--papier); box-shadow: var(--ombre); display: grid; place-items: center; cursor: pointer; z-index: 2200; }
.zc-fleche svg { width: 26px; height: 26px; }
.zc-fleche.g { left: 8px; } .zc-fleche.d { right: 8px; }
@media (min-width: 920px) { .zc-fleche.g { left: -6px; } .zc-fleche.d { right: -6px; } }
.zc-fleche:disabled { opacity: .3; cursor: default; }
.zc-plaque { position: absolute; left: 12px; top: 12px; z-index: 2000; background: var(--papier); border: 3px solid var(--encre); border-radius: 14px; padding: 6px 12px; display: grid; box-shadow: var(--ombre); max-width: calc(100% - 24px); }
.zc-plaque strong { font-family: var(--f-titre); font-size: 1.25rem; line-height: 1.1; }
.zc-plaque span { font-size: .9rem; font-weight: 700; color: var(--encre-douce); }
.zc-badge { position: absolute; right: 12px; top: 12px; z-index: 2000; display: flex; align-items: center; gap: 4px; background: var(--jaune); border: 3px solid var(--encre); border-radius: 999px; padding: 2px 12px 2px 4px; font-family: var(--f-titre); font-weight: 800; }
.zc-badge svg { width: 26px; height: 26px; }
.zc-visiteurs { position: absolute; inset: 0; z-index: 1600; pointer-events: none; }
.zc-visiteur { position: absolute; bottom: -2%; width: 12%; transform: translateX(-50%); transform-origin: 50% 100%; animation: zc-visiteur 2.4s ease-in-out infinite alternate; }
.zc-cloture { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: url(../assets/images/decor_cloture.webp) repeat-x left bottom / auto 100%; }
/* les pieds restent au sol : le visiteur respire (étirement léger) au lieu de monter */
@keyframes zc-visiteur { to { transform: translateX(-50%) scale(.98, 1.04) rotate(1.2deg); } }
.zc-banniere { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); z-index: 2300; white-space: nowrap; font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.4rem, 5vw, 2.4rem); color: #fff; background: var(--orange); border: 4px solid var(--encre); border-radius: 18px; padding: 4px 22px; box-shadow: 0 5px 0 var(--encre); animation: zc-banniere 2.6s ease-out forwards; pointer-events: none; }
@keyframes zc-banniere { 0% { transform: translateX(-50%) scale(0) rotate(-8deg); } 15% { transform: translateX(-50%) scale(1.1) rotate(-3deg); } 25%, 80% { transform: translateX(-50%) scale(1) rotate(-3deg); opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1) rotate(-3deg); } }
.glisse-g { animation: zc-glisse-g .35s ease-out; } .glisse-d { animation: zc-glisse-d .35s ease-out; }
@keyframes zc-glisse-g { from { transform: translateX(16%); opacity: .2; } }
@keyframes zc-glisse-d { from { transform: translateX(-16%); opacity: .2; } }
.zc-progres { display: grid; gap: 8px; font-weight: 800; }
.zc-barre { height: 12px; border: 2.5px solid var(--encre); border-radius: 8px; background: var(--papier); overflow: hidden; margin-top: 2px; }
.zc-barre i { display: block; height: 100%; background: var(--turquoise); }
.zc-revenu { display: flex; align-items: center; gap: 6px; color: var(--encre-douce); }
.zc-revenu svg { width: 20px; height: 20px; }
.zc-actions { display: grid; gap: 10px; }
.zc-actions-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zc-actions-ligne .zc-btn-grand { flex: 1 1 220px; width: auto; }

.zc-confettis { position: absolute; inset: 0; pointer-events: none; z-index: 2400; overflow: hidden; }
.zc-confettis i { position: absolute; top: -12px; width: 9px; height: 13px; border: 1.5px solid var(--encre); border-radius: 2px; animation: zc-tombe 1.9s ease-in forwards; }
@keyframes zc-tombe { to { transform: translate(var(--dx), 420px) rotate(540deg); opacity: .2; } }

/* ---------- Cinématique (images et texte, style bande dessinée) */
.en-cine #zc-entete { display: none; }
.zc-cine { display: grid; gap: 10px; max-width: 520px; margin: 0 auto; }
@media (min-width: 920px) { .zc-cine { max-width: 560px; } }
.zc-cine-haut { display: flex; justify-content: space-between; align-items: center; }
.zc-cine-compte { font-weight: 800; color: var(--encre-douce); }
.zc-cine-cadre { position: relative; aspect-ratio: 4 / 5; margin: 0 auto; width: min(100%, calc((100vh - 200px) * 0.8)); border: 4px solid var(--encre); border-radius: 18px; overflow: hidden; background: var(--encre); box-shadow: var(--ombre); touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
.zc-cp { position: absolute; inset: 0; animation: zc-cp-fondu .35s ease-out both; }
.zc-cp.vient-droite { animation-name: zc-cp-droite; }
.zc-cp.vient-gauche { animation-name: zc-cp-gauche; }
@keyframes zc-cp-fondu { from { opacity: 0; } }
@keyframes zc-cp-droite { from { opacity: 0; transform: translateX(8%); } }
@keyframes zc-cp-gauche { from { opacity: 0; transform: translateX(-8%); } }
.zc-cp-image { position: absolute; inset: 0; overflow: hidden; background: #FFF3C4; }
.zc-cp-ph, .zc-cp-photo { position: absolute; inset: 0; width: 100%; height: 100%; animation: zc-cp-zoom 14s ease-out both; transform-origin: 50% 40%; }
.zc-cp-photo { object-fit: cover; opacity: 0; transition: opacity .4s; }
.zc-cp-photo.ok { opacity: 1; }
@keyframes zc-cp-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.zc-cp-sprite { position: absolute; transform: translate(-50%, -100%); height: auto; }
.zc-cp-etiq { position: absolute; left: 10px; top: 10px; background: rgba(255, 255, 255, .85); border: 2px solid var(--encre); border-radius: 999px; padding: 1px 10px; font-size: .75rem; font-weight: 800; }
.zc-cp-sfx { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) rotate(-8deg); font-family: var(--f-titre); font-weight: 800; font-size: clamp(3rem, 16vw, 5.5rem); color: var(--jaune); -webkit-text-stroke: 3px var(--encre); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--encre); animation: zc-cp-sfx .5s cubic-bezier(.3, 1.6, .5, 1) both .25s; pointer-events: none; }
@keyframes zc-cp-sfx { from { transform: translateX(-50%) rotate(-8deg) scale(0); } }
.zc-cp-narr, .zc-cp-bulle { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--papier); border: 3px solid var(--encre); box-shadow: 0 4px 0 var(--encre); padding: 12px 14px; font-weight: 700; line-height: 1.35; font-size: 1.05rem; }
.zc-cp-narr { background: #FFF3C4; border-radius: 6px; }
.zc-cp-narr p, .zc-cp-bulle p { margin: 0; }
.zc-cp-bulle { border-radius: 22px; display: flex; gap: 10px; align-items: center; }
.zc-cp-bulle::after { content: ""; position: absolute; left: 34px; top: -15px; width: 24px; height: 24px; background: var(--papier); border-left: 3px solid var(--encre); border-top: 3px solid var(--encre); transform: rotate(45deg) skew(8deg, 8deg); border-radius: 4px 0 0 0; }
.zc-cp-bulle strong { display: block; font-family: var(--f-titre); color: var(--orange); font-size: .95rem; letter-spacing: .02em; }
.zc-cp-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 3px solid var(--encre); object-fit: cover; background: var(--turquoise); }
.zc-cine-bas { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.zc-cine-points { grid-row: 1; grid-column: 1 / -1; display: flex; gap: 7px; justify-content: center; flex-wrap: nowrap; }
.zc-cine-bas .zc-btn-orange { width: 100%; grid-row: 2; grid-column: 2; }
.zc-cine-bas #zc-cine-prec { grid-row: 2; grid-column: 1; }
.zc-cp-sprite.rond { border-radius: 50%; border: 4px solid var(--encre); aspect-ratio: 1; object-fit: cover; transform: translate(-50%, -50%); }
.zc-cine-points i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--encre); background: var(--papier); }
.zc-cine-points i.fait { background: var(--turquoise); }
.zc-cine-points i.actif { background: var(--orange); transform: scale(1.3); }
.zc-reduit .zc-cp, .zc-reduit .zc-cp-ph, .zc-reduit .zc-cp-photo, .zc-reduit .zc-cp-sfx { animation: none; }

/* ---------- Accueil */
.zc-accueil { display: grid; gap: 18px; justify-items: center; max-width: 520px; margin: 0 auto; padding-top: 6px; text-align: left; }
.zc-accueil-logo { width: min(100%, 440px); height: auto; filter: drop-shadow(0 6px 0 rgba(42, 34, 48, .12)); }
.zc-accueil-carte { display: flex; gap: 14px; align-items: center; }
.zc-accueil-carte p { margin-top: 6px; }
.zc-mascotte { width: 84px; height: 84px; border-radius: 22px; border: 3px solid var(--encre); flex: none; }
.zc-mascotte.grand { width: 120px; height: 120px; margin: 0 auto; display: block; }

/* ---------- Lieux */
.zc-lieux { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.zc-lieu { text-align: left; padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); cursor: pointer; }
.zc-lieu:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.zc-lieu.ferme { cursor: not-allowed; }
.zc-lieu.ferme .zc-lieu-image { filter: grayscale(.85) brightness(.9); }
.zc-lieu-image { height: 120px; border-bottom: 3px solid var(--encre); overflow: hidden; }
.zc-lieu-image.grand { height: 150px; border: 3px solid var(--encre); border-radius: 14px; }
.zc-lieu-image svg { width: 100%; height: 100%; display: block; }
.zc-lieu-texte { padding: 12px 14px 14px; display: grid; gap: 6px; }
.zc-lieu-prix { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.zc-lieu-prix svg { width: 22px; height: 22px; }
.zc-lieu-especes { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.zc-mini { display: inline-block; width: 46px; flex: none; }
.zc-mini svg { display: block; width: 100%; }
.zc-mini.silhouette svg { filter: brightness(0); opacity: .28; }
.zc-mini * { animation: none !important; }
.zc-compte { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--encre-douce); margin-left: auto; }

/* ---------- Préparation */
.zc-slot { position: absolute; transform: translate(-50%, -78%); aspect-ratio: 1; border-radius: 50%; border: 3px dashed #fff; background: rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; min-width: 48px; min-height: 48px; line-height: 1; }
.zc-slot span { font-family: var(--f-titre); font-weight: 800; font-size: 1.8rem; line-height: 1; color: #fff; text-shadow: 0 2px 0 var(--encre); }
.zc-slot svg { width: 100%; height: auto; display: block; }
.zc-slot.rempli { background: rgba(255, 255, 255, .2); border-style: solid; border-color: rgba(255, 255, 255, .7); }
.zc-slot.choisi { border: 4px solid var(--orange-vif); background: rgba(255, 255, 255, .55); animation: zc-pulse 1.2s ease-in-out infinite; }
.zc-consigne { font-weight: 800; }
.zc-elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.zc-element { display: grid; justify-items: center; gap: 2px; padding: 8px 6px; background: var(--papier); border: 3px solid var(--encre); border-radius: 14px; box-shadow: var(--ombre); cursor: pointer; font-weight: 800; line-height: 1.15; text-align: center; min-height: 48px; }
.zc-element svg { width: 54px; }
.zc-element small { font-weight: 700; color: var(--encre-douce); }
.zc-element.actif { background: #D6F6F7; border-color: var(--turquoise-fonce); }
.zc-element:disabled { opacity: .35; cursor: not-allowed; }
.zc-retirer { align-content: center; color: var(--danger); }
.zc-especes-lieu { display: grid; gap: 4px; background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); padding: 8px 10px; }
.zc-esp-ligne { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.zc-esp-nom { display: grid; font-weight: 800; line-height: 1.15; min-width: 0; }
.zc-esp-nom small { font-weight: 700; color: var(--encre-douce); }
.zc-puce { display: inline-block; margin-left: auto; background: var(--jaune); border: 2px solid var(--encre); border-radius: 999px; padding: 0 8px; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.zc-alerte { color: var(--danger); font-weight: 800; }

/* ---------- Résultats */
.zc-mission { background: var(--papier); border: 3px solid var(--turquoise-fonce); border-radius: var(--rayon); padding: 12px 14px; font-weight: 700; }
.zc-res-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zc-res-ligne { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 14px; align-items: center; background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); padding: 10px; box-shadow: var(--ombre); }
.zc-res-texte { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.zc-res-accueil { font-weight: 800; }
.zc-res-ligne.nouveau .zc-res-accueil { color: var(--turquoise-fonce); }
.zc-res-ligne.aucun .zc-res-accueil { color: var(--encre-douce); }
.zc-res-gain { display: flex; align-items: center; gap: 6px; font-weight: 800; flex-wrap: wrap; }
.zc-res-gain svg { width: 20px; height: 20px; }
.zc-res-gain small { font-weight: 700; color: var(--encre-douce); }
.zc-res-note { font-size: .9rem; color: var(--encre-douce); }
.zc-rembourse { font-weight: 700; }
.zc-total { display: flex; align-items: center; gap: 8px; font-family: var(--f-titre); font-weight: 800; font-size: 1.5rem; }
.zc-total svg { width: 30px; height: 30px; }

.zc-cliche { position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 100%; overflow: hidden; border: 3px solid var(--encre); border-radius: 12px; background: #fff; }
.zc-cliche-fond { position: absolute; inset: 0; }
.zc-cliche-fond svg { width: 100%; height: 100%; display: block; }
.zc-cliche-animal { position: absolute; left: 50%; bottom: 4%; width: 56%; transform: translateX(-50%); }
.zc-cliche-animal.gauche .zc-pose { transform: scaleX(-1); }
.zc-cliche.floue .zc-cliche-fond, .zc-cliche.floue .zc-cliche-animal { filter: blur(3px); }
.zc-cliche.excellente { box-shadow: 0 0 0 3px var(--jaune); }
.zc-cliche-q { position: absolute; left: 6px; bottom: 6px; background: var(--papier); border: 2px solid var(--encre); border-radius: 999px; padding: 0 8px; font-size: .78rem; font-weight: 800; }
.zc-cliche.excellente .zc-cliche-q { background: var(--jaune); }
.zc-cliche.valide .zc-cliche-q { background: #BDF1F3; }

/* ---------- Collection */
.zc-sous-titre { margin-top: 6px; }
.zc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.zc-fiche { display: grid; gap: 4px; text-align: left; background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); padding: 8px; box-shadow: var(--ombre); cursor: pointer; }
.zc-fiche:disabled { cursor: default; background: #F1F5F6; }
.zc-fiche strong { font-family: var(--f-titre); font-size: 1.05rem; line-height: 1.15; }
.zc-fiche small { color: var(--encre-douce); font-weight: 700; }
.zc-fiche .zc-compte { margin-left: 0; }
.zc-fiche-image { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 3px dashed #C4D3D6; border-radius: 12px; }
.zc-fiche-image .zc-mini { width: 70%; }

/* ---------- Réglages */
.zc-reglages .zc-carte { display: grid; gap: 12px; }
.zc-bascule { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 800; cursor: pointer; }
.zc-bascule input { width: 26px; height: 26px; accent-color: var(--turquoise-fonce); }
.zc-reglages textarea { width: 100%; border: 3px solid var(--encre); border-radius: 12px; padding: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; background: #F7FBFB; resize: vertical; }
.zc-fichier { position: relative; overflow: hidden; }
.zc-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zc-msg.ok { color: var(--turquoise-fonce); font-weight: 800; }
.zc-msg.erreur { color: var(--danger); font-weight: 800; }
.zc-version { align-self: center; background: none; border: 0; color: var(--encre-douce); font-size: .85rem; padding: 10px; cursor: default; }

/* ---------- Modales */
.zc-voile { position: fixed; inset: 0; background: rgba(42, 34, 48, .55); display: grid; place-items: center; padding: 16px; z-index: 5000; }
.zc-modale { position: relative; overflow: hidden; width: min(100%, 440px); max-height: 90vh; overflow-y: auto; display: grid; gap: 12px; text-align: center; }
.zc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.zc-ligne-hab { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 10px; background: var(--papier); border: 2.5px solid var(--encre); border-radius: 12px; cursor: pointer; font-weight: 800; }
.zc-ligne-hab.actif { background: #D6F6F7; }

/* ---------- Débogage */
#zc-debug { position: fixed; right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 9000; width: 230px; background: #20202A; color: #F4F4F8; border-radius: 12px; padding: 10px; display: grid; gap: 6px; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
#zc-debug button, #zc-debug select { background: #34343F; color: #F4F4F8; border: 1px solid #5A5A6A; border-radius: 6px; padding: 6px; cursor: pointer; font-size: 13px; }
#zc-debug label { display: grid; gap: 2px; }
#zc-debug p { color: #BDBDCC; font-size: 12px; }

/* ---------- Mouvements réduits */
.zc-reduit .zc-pose *, .zc-reduit .zc-visiteur, .zc-reduit .zc-pulse, .zc-reduit .zc-slot.choisi, .zc-reduit .zc-cadre,
.zc-reduit .glisse-g, .zc-reduit .glisse-d, .zc-reduit .zc-decor.apparait, .zc-reduit .zc-coeur, .zc-reduit .zc-guide { animation: none !important; }
.zc-reduit .zc-banniere { animation: zc-fondu 2.6s linear forwards; transform: translateX(-50%) rotate(-3deg); }
@keyframes zc-fondu { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zc-pulse, .zc-confettis { animation: none !important; } }
.zc-ver-liste{max-height:55vh;overflow:auto;margin:8px 0;text-align:left}
.zc-ver h3{margin:10px 0 0;font-size:1rem}.zc-ver small{opacity:.7}.zc-ver ul{margin:4px 0 8px 18px;padding:0}
.zc-profil { padding-top: 4vh; }
.zc-profil .zc-carte { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; text-align: center; }
.zc-profil-clic { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--encre); }
.zc-profil h1 { margin: 0; font-size: 1.5rem; }
.zc-profil p { margin: 0; }
.zc-champ { display: grid; gap: 4px; text-align: left; font-weight: 800; }
.zc-champ input { font: inherit; font-weight: 700; padding: 10px 12px; border: 3px solid var(--encre); border-radius: 12px; background: #fff; }
.zc-profil-reglages { display: grid; gap: 6px; text-align: left; }
.zc-petit { font-size: .8rem; opacity: .7; }
.zc-batt { margin: 0; font-weight: 800; font-size: .9rem; text-align: center; background: #fff; border: 2px solid var(--encre); border-radius: 999px; padding: 4px 12px; }
.zc-stock { position: absolute; top: 4px; right: 6px; font-style: normal; font-weight: 800; font-size: .8rem; background: var(--jaune); border: 2px solid var(--encre); border-radius: 999px; padding: 0 6px; }
.zc-element { position: relative; }
.zc-recolte { padding-bottom: 24px; }
.zc-rec-ligne { display: grid; gap: 8px; }
.zc-rec-ligne p { margin: 0; }
.zc-stock-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-stock-pastille { display: grid; justify-items: center; width: 64px; font-size: .75rem; }
.zc-stock-pastille svg { width: 40px; height: 34px; }
.zc-am { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 2px dashed #cfe; }
.zc-am small { display: block; opacity: .75; }
.zc-am-max { font-weight: 800; opacity: .6; }
.zc-onglets { display: flex; gap: 8px; }
.zc-onglet { flex: 1; font: inherit; font-weight: 800; padding: 8px 6px; border: 3px solid var(--encre); border-radius: 14px; background: var(--papier); cursor: pointer; }
.zc-onglet.actif { background: var(--turquoise, #1EC6CF); color: #fff; }
.zc-enc-appat { display: grid; gap: 4px; text-align: left; }
.zc-enc-appat p { margin: 0; font-size: .8rem; }
.zc-enc-appat.inconnue { opacity: .7; }
.zc-fiche-detail { text-align: left; display: grid; gap: 8px; max-height: 62vh; overflow: auto; }
.zc-fiche-detail h2 { margin: 0; }
.zc-fiche-detail p { margin: 0; }
.zc-fait { background: #FFF3C4; border: 2px solid var(--encre); border-radius: 10px; padding: 8px 10px; }
.zc-fiche-liste { margin: 0; padding-left: 18px; }
.zc-deco-ev { position: absolute; inset: 0; z-index: 1550; pointer-events: none; overflow: hidden; font-size: clamp(1.3rem, 5.5vw, 2.5rem); line-height: 1; }
.zc-deco-ev > span { position: absolute; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.zc-ev-img { display: block; height: 1.25em; width: auto; }
.zc-toile { top: 0; left: 0; } .zc-toile .zc-ev-img { height: 2.2em; }
.zc-lune { top: 3%; right: 5%; } .zc-lune .zc-ev-img { height: 1.7em; }
.zc-lune::before { content: ""; position: absolute; inset: -60%; background: radial-gradient(circle, rgba(255,236,170,.55), transparent 62%); z-index: -1; }
.zc-bas.b0 { bottom: 12%; left: 2%; } .zc-bas.b1 { bottom: 12%; right: 3%; }
.zc-bas { animation: zc-citrouille 2.6s ease-in-out infinite; } .zc-bas.b1 { animation-delay: -1.3s; }
@keyframes zc-citrouille { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,140,30,.5)) brightness(.95); } 50% { filter: drop-shadow(0 0 14px rgba(255,170,40,.95)) brightness(1.15); } }
.zc-vol { top: 10%; left: -12%; animation: zc-vol 14s linear infinite; }
.zc-vol .zc-ev-img.alt { position: absolute; inset: 0; animation: zc-battement .5s steps(1) infinite; }
@keyframes zc-battement { 50% { opacity: 0; } }
.zc-vol.v1 { top: 21%; animation-duration: 19s; animation-delay: -7s; font-size: .8em; }
.zc-vol.v2 { top: 33%; animation-duration: 26s; animation-delay: -13s; font-size: .9em; opacity: .9; }
@keyframes zc-vol { 0% { left: -12%; transform: translateY(0); } 25% { transform: translateY(-14px); } 50% { transform: translateY(6px); } 75% { transform: translateY(-10px); } 100% { left: 108%; transform: translateY(0); } }
.zc-brume { position: absolute; left: 0; bottom: 8%; width: 200%; height: 34%; opacity: .55;
  background: url(../assets/images/halloween_brume.webp) repeat-x left bottom / auto 100%,
    radial-gradient(ellipse 18% 55% at 12% 70%, rgba(235,225,255,.75), transparent 70%), radial-gradient(ellipse 22% 60% at 38% 60%, rgba(235,225,255,.6), transparent 70%),
    radial-gradient(ellipse 18% 55% at 62% 72%, rgba(235,225,255,.75), transparent 70%), radial-gradient(ellipse 22% 60% at 88% 62%, rgba(235,225,255,.6), transparent 70%);
  animation: zc-brume 60s linear infinite; }
@keyframes zc-brume { to { transform: translateX(-50%); } }
.zc-lueur { position: absolute; bottom: 14%; width: 6px; height: 6px; border-radius: 50%; background: #FFB347; box-shadow: 0 0 8px 3px rgba(255,170,60,.8); opacity: 0; animation: zc-lueur 9s ease-in-out infinite; }
@keyframes zc-lueur { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: .95; } 50% { transform: translate(18px,-90px); opacity: .7; } 85% { opacity: .9; } 100% { transform: translate(-12px,-190px); opacity: 0; } }
.zc-eclair { position: absolute; inset: 0; background: #E9DDFF; opacity: 0; mix-blend-mode: screen; animation: zc-eclair 31s linear infinite; }
@keyframes zc-eclair { 0%, 96.5%, 97.8%, 100% { opacity: 0; } 97% { opacity: .55; } 97.4% { opacity: .05; } 97.6% { opacity: .4; } }
.zc-reduit .zc-vol, .zc-reduit .zc-brume, .zc-reduit .zc-lueur, .zc-reduit .zc-eclair, .zc-reduit .zc-bas { animation: none !important; }
.zc-reduit .zc-vol { left: 40%; } .zc-reduit .zc-lueur, .zc-reduit .zc-eclair { display: none; }
/* ---------- Thème Halloween (violet et orange) */
html.ev-halloween { --ciel: #261340; --ciel-motif: #33204F; --turquoise: #9B5DE5; --turquoise-fonce: #6B35B8; --encre-douce: #5E5568; color-scheme: light; }
html.ev-halloween, html.ev-halloween body { background-color: var(--ciel); color: #FFEBD2; }
html.ev-halloween body { background-image: radial-gradient(ellipse 90% 40% at 50% 112%, rgba(255,122,24,.45), transparent 70%), radial-gradient(var(--ciel-motif) 1.6px, transparent 1.7px); background-size: 100% 100%, 22px 22px; background-attachment: fixed, scroll; }
html.ev-halloween .zc-pieces,
html.ev-halloween .zc-btn-icone,
html.ev-halloween .zc-btn,
html.ev-halloween .zc-carte,
html.ev-halloween .zc-chrono,
html.ev-halloween .zc-cliches,
html.ev-halloween .zc-retour-photo,
html.ev-halloween .zc-jauge,
html.ev-halloween .zc-guide,
html.ev-halloween .zc-fleche,
html.ev-halloween .zc-plaque,
html.ev-halloween .zc-cp-etiq,
html.ev-halloween .zc-cp-narr,
html.ev-halloween .zc-cp-bulle,
html.ev-halloween .zc-lieu,
html.ev-halloween .zc-slot,
html.ev-halloween .zc-element,
html.ev-halloween .zc-especes-lieu,
html.ev-halloween .zc-mission,
html.ev-halloween .zc-res-ligne,
html.ev-halloween .zc-cliche-q,
html.ev-halloween .zc-fiche,
html.ev-halloween .zc-ligne-hab,
html.ev-halloween .zc-champ input,
html.ev-halloween .zc-batt,
html.ev-halloween .zc-onglet,
html.ev-halloween .zc-fait,
html.ev-halloween .zc-modale { color: var(--encre); }
html.ev-halloween .zc-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1540; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(95,45,160,.75) 0%, rgba(255,160,90,.55) 58%, rgba(70,25,110,.8) 100%), radial-gradient(ellipse at 50% 55%, transparent 50%, rgba(25,5,50,.85) 100%); opacity: .85; }
html.ev-halloween .zc-revenu, html.ev-halloween .zc-version { color: #FFD9A8; }
html.ev-halloween .zc-barre i, html.ev-halloween .zc-onglet.actif { background: linear-gradient(90deg, #FF7A18, #9B5DE5); }
.zc-banniere-ev { display: grid; text-align: left; font: inherit; padding: 14px 16px; border: 3px solid var(--encre); border-radius: 14px; background: url(../assets/images/halloween_banniere.webp) center / cover, linear-gradient(90deg, #FF8A2B, #7B4BC9); color: #fff; text-shadow: 0 2px 0 rgba(30,10,60,.7); box-shadow: var(--ombre); cursor: pointer; }
.zc-banniere-ev small { opacity: .9; }
.zc-ev-carte { display: grid; gap: 10px; }
.zc-ev-carte p { margin: 0; }
.zc-ev-obj { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: 2px dashed #cfe; }
.zc-ev-obj > div:first-child { flex: 1; display: grid; gap: 2px; }
.zc-ev-obj small { opacity: .8; }
.zc-bebe { }
.zc-bebe-mini { width: 46px; justify-self: center; }
.zc-poup-ligne { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; }
.zc-poup-ligne p { margin: 2px 0 0; font-size: .85rem; }
.zc-poup-ligne small { margin-left: 6px; opacity: .8; }
.zc-poup-ligne.ne { background: #FFF0F6; }
html.ev-halloween .zc-poup-ligne.ne { background: #FFF0F6; }
.zc-salle { font-size: clamp(1.2rem, 4.5vw, 2rem); line-height: 1; }
.zc-salle .zc-ev-img { width: 100%; height: auto; }
.zc-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.zc-tuile { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 84px; padding: 8px 6px; font: inherit; color: var(--encre); background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); cursor: pointer; text-align: center; }
.zc-tuile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.zc-tuile svg, .zc-tuile-ico { width: 26px; height: 26px; font-size: 1.45rem; line-height: 26px; }
.zc-tuile .zc-ev-img { height: 26px; }
.zc-tuile strong { font-family: var(--f-titre); font-size: .95rem; line-height: 1.1; white-space: nowrap; }
@media (max-width: 460px) { .zc-tuile strong { font-size: .82rem; } .zc-tuile { padding: 8px 2px; } }
.zc-tuile small { font-size: .78rem; font-weight: 700; color: var(--encre-douce); }
.zc-batt-chip { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 4px; min-height: 44px; padding: 2px 10px; font: inherit; font-weight: 800; color: var(--encre); background: var(--papier); border: 3px solid var(--encre); border-radius: 999px; box-shadow: var(--ombre); cursor: pointer; font-variant-numeric: tabular-nums; }
.zc-batt-chip small { display: block; font-size: .7rem; color: var(--encre-douce); }
.zc-batt-chip { grid-auto-flow: row; grid-template-columns: auto auto; line-height: 1.05; }
.zc-batt-chip small { grid-column: 1 / -1; text-align: center; }
.zc-pieces { margin-left: auto; }
@media (max-width: 460px) {
  #zc-entete { gap: 6px; }
  .zc-logo img { height: 36px; }
  .zc-pieces { padding: 2px 10px 2px 4px; font-size: 1.05rem; gap: 4px; }
  .zc-pieces svg { width: 22px; height: 22px; }
  .zc-batt-chip { padding: 2px 7px; font-size: .9rem; }
  .zc-nav { gap: 6px; }
  .zc-btn-icone { min-width: 42px; padding: 0 8px; }
}
@media (max-width: 350px) { .zc-logo img { height: 28px; } #zc-entete { gap: 4px; } .zc-pieces { font-size: .95rem; padding-right: 8px; } .zc-batt-chip small { display: none; } .zc-btn-icone { min-width: 40px; padding: 0 6px; } }
.zc-ban-txt { display: grid; justify-self: start; background: rgba(30, 10, 60, .74); border-radius: 10px; padding: 4px 10px; }
.zc-ecran-obs .zc-vol, .zc-ecran-obs .zc-lune, .zc-ecran-obs .zc-toile { display: none; }
@media (max-width: 919px) {
  .zc-cta { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; }
  .zc-cta .zc-btn-grand { box-shadow: 0 4px 0 var(--encre), 0 10px 26px rgba(20, 10, 40, .35); }
}
.zc-champ, .zc-champ input { min-width: 0; width: 100%; }
.zc-reglages .zc-carte, .zc-profil .zc-carte { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.zc-pastille { display: inline-block; background: var(--orange-vif); color: #fff; border-radius: 999px; padding: 0 7px; font-size: .75rem; }
.zc-mission-ligne { display: flex; align-items: center; gap: 10px; }
.zc-mission-ligne > div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.zc-mission-ligne small { color: var(--encre-douce); }
.zc-mission-ligne.reclamee { opacity: .7; }
.zc-etoiles { color: #E8A100; letter-spacing: 1px; }
.zc-toast { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 9000; max-width: calc(100% - 24px); background: var(--papier); color: var(--encre); border: 3px solid var(--encre); border-radius: 14px; box-shadow: var(--ombre); padding: 8px 14px; font-weight: 800; animation: zc-toast 3.4s ease both; }
@keyframes zc-toast { 0% { opacity: 0; transform: translate(-50%, -20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.zc-reduit .zc-toast { animation: none; }
.zc-ico { display: inline-block; height: 1.3em; width: auto; vertical-align: -0.3em; }
.zc-tuile-ico .zc-ico { height: 32px; vertical-align: 0; display: block; margin: 0 auto; }
.zc-tuile-ico:has(.zc-ico) { width: auto; height: 32px; line-height: normal; }
.zc-btn-icone .zc-ico { height: 28px; vertical-align: 0; }
.zc-batt-chip .zc-ico { height: 24px; vertical-align: 0; }
.zc-pastille .zc-ico { height: 1.1em; vertical-align: -0.2em; }
@media (max-width: 460px) { .zc-btn-icone .zc-ico { height: 24px; } .zc-batt-chip .zc-ico { height: 20px; } }
@media (max-width: 350px) { .zc-btn-icone .zc-ico { height: 20px; } .zc-batt-chip .zc-ico { height: 16px; } .zc-pieces svg { width: 18px; height: 18px; } }
.zc-avatar { --t: 64px; --ep: calc(var(--t) * .12); position: relative; display: inline-block; width: var(--t); height: var(--t); border-radius: 50%; flex: none; isolation: isolate; vertical-align: middle; }
.zc-avatar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--anneau, #2A2230); border: 2px solid var(--encre); z-index: -1; }
.zc-avatar > img { position: absolute; inset: var(--ep); width: calc(100% - 2 * var(--ep)); height: calc(100% - 2 * var(--ep)); border-radius: 50%; object-fit: contain; padding: 9%; background: radial-gradient(circle at 50% 35%, #fff, #DDF4F3); border: 2px solid var(--encre); box-sizing: border-box; }
.zc-avatar.a-tourne::before { animation: zc-an-tourne 4s linear infinite; }
.zc-avatar.a-tourne.a-lent::before { animation-duration: 12s; }
.zc-avatar.a-arc::before { animation: zc-an-arc 5s linear infinite; }
.zc-avatar.a-tourne.a-arc::before { animation: zc-an-tourne 4s linear infinite, zc-an-arc 6s linear infinite; }
.zc-avatar.a-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -2; animation: zc-an-pulse 1.8s ease-in-out infinite; }
@keyframes zc-an-tourne { to { transform: rotate(1turn); } }
@keyframes zc-an-arc { to { filter: hue-rotate(360deg); } }
@keyframes zc-an-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--lueur, rgba(255,255,255,.8)); } 50% { box-shadow: 0 0 calc(var(--t) * .12) calc(var(--t) * .06) var(--lueur, rgba(255,255,255,.8)); } }
.zc-reduit .zc-avatar::before, .zc-reduit .zc-avatar::after { animation: none !important; }
.zc-carte-profil { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--encre); background: var(--papier); border: 3px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 8px 12px; cursor: pointer; }
.zc-carte-profil > span:not(.zc-avatar) { flex: 1; display: grid; min-width: 0; }
.zc-carte-profil strong { font-family: var(--f-titre); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-carte-profil small { color: var(--encre-douce); font-weight: 700; }
.zc-carte-profil > svg { width: 20px; height: 20px; }
.zc-profil-tete { display: flex; align-items: center; gap: 16px; }
.zc-profil-tete h2 { margin: 0 0 4px; }
.zc-profil-tete p { margin: 2px 0; font-size: .85rem; color: var(--encre-douce); font-weight: 700; }
.zc-choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.zc-choix { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 10px 6px; background: var(--papier); color: var(--encre); border: 3px solid var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); }
.zc-choix strong { font-size: .85rem; line-height: 1.15; }
.zc-choix.equipe { background: #E6FBFA; border-color: var(--turquoise-fonce); }
.zc-choix.verrou .zc-avatar { filter: grayscale(1) opacity(.55); }
.zc-choix .zc-btn-petit { padding: 4px 10px; min-height: 34px; }
.zc-condition { font-size: .72rem; color: var(--encre-douce); font-weight: 700; line-height: 1.2; }
.zc-equipe { font-size: .78rem; font-weight: 800; color: var(--turquoise-fonce); }
.zc-anime { display: block; font-size: .7rem; color: #B87900; }
.zc-recomp { display: flex; align-items: center; gap: 6px; color: #8A5A00 !important; font-weight: 800; }
html.ev-halloween .zc-choix, html.ev-halloween .zc-carte-profil { color: var(--encre); }
html.ev-halloween .zc-choix.equipe { background: #F1E8FF; border-color: #6B35B8; }
button { touch-action: manipulation; }
.zc-declencheur { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.zc-btn-decorer { width: 100%; }
.zc-deco-q .zc-ev-img { width: 100%; height: auto; }
.zc-deco-q { container-type: inline-size; }
.zc-deco-q .zc-deco-emoji { font-size: 82cqw; line-height: 1; display: block; text-align: center; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.zc-place-img .zc-deco-emoji, .zc-deco-apercu .zc-deco-emoji { font-size: clamp(1.4rem, 6vw, 2.4rem); line-height: 1; display: block; text-align: center; }
.zc-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.zc-place { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 4px; font: inherit; color: var(--encre); background: #F4FBFB; border: 3px dashed #9AC; border-radius: 14px; cursor: pointer; min-height: 120px; text-align: center; }
.zc-place.choisie { border-style: solid; border-color: var(--turquoise-fonce); background: #E6FBFA; }
.zc-place.bloquee { cursor: default; opacity: .6; }
.zc-place small { font-size: .72rem; color: var(--encre-douce); font-weight: 700; }
.zc-place strong { font-size: .8rem; }
.zc-place-img { height: 44px; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; }
.zc-place-img .zc-ev-img { height: 44px; width: auto; }
.zc-deco-apercu { height: 56px; display: grid; place-items: center; }
.zc-deco-apercu .zc-ev-img { height: 56px; width: auto; }
.zc-effets { font-size: .72rem; color: #2E7D32; font-weight: 800; line-height: 1.2; }
.zc-script { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; text-align: left; }
.zc-script-clic { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--encre); }
.zc-script-bulle { position: relative; left: auto; right: auto; bottom: auto; }
.zc-script-bulle::after { left: -14px; top: 26px; transform: rotate(-45deg) skew(8deg, 8deg); }
html.ev-halloween .zc-place { color: var(--encre); }
@media (max-width: 700px) { .zc-badge { display: none; } }
/* ---------- Fiche d'espèce */
.zc-modale.zf { padding: 0; gap: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; text-align: left; max-height: min(88vh, 760px); }
.zf-hero { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #9BE0EF; border-bottom: 3px solid var(--encre); }
.zf-hero .zf-photo, .zf-hero .zf-fond { position: absolute; inset: 0; }
.zf-hero .zf-fond svg { width: 100%; height: 100%; display: block; }
.zf-hero .zc-cliche { border: 0; border-radius: 0; height: 100%; aspect-ratio: auto; box-shadow: none; }
.zf-hero .zc-cliche-q { left: auto; right: 54px; top: 10px; bottom: auto; }
.zf-hero .zf-animal { position: absolute; left: 50%; bottom: 26%; width: 40%; transform: translateX(-50%); z-index: 1; }
.zf-hero .zf-animal .zc-mini { display: block; width: 100%; height: auto; }
.zf-hero .zf-animal .zc-mini svg { width: 100%; height: auto; }
.zf-hero.inconnue .zf-fond { filter: grayscale(.6) brightness(.8); }
.zf-hero::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(30, 18, 40, .78)); pointer-events: none; }
.zf-titre { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 2; color: #fff; display: grid; justify-items: start; gap: 2px; }
.zf-titre h2 { color: #fff; font-size: 1.6rem; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); margin: 0; }
.zf-titre small { font-weight: 800; opacity: .9; }
.zf-rarete { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--encre); color: var(--encre); }
.zf-rarete.r-commun { background: #BDEFB0; } .zf-rarete.r-peu_commun { background: #BDE3FF; } .zf-rarete.r-rare { background: #E3CCFF; } .zf-rarete.r-tres_rare { background: #FFE27A; }
.zf-fermer { position: absolute; right: 10px; top: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--encre); background: var(--papier); color: var(--encre); font-weight: 900; font-size: 1rem; cursor: pointer; box-shadow: 0 2px 0 var(--encre); }
.zf-corps { overflow-y: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }
.zf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.zf-stat { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 8px 4px; border: 2px solid var(--encre); border-radius: 12px; background: #F4FBFB; text-align: center; }
.zf-stat b { font-family: var(--f-titre); font-size: 1.15rem; line-height: 1.1; white-space: nowrap; }
.zf-stat b span { font-size: .8rem; color: var(--encre-douce); }
.zf-stat small { font-size: .66rem; font-weight: 800; color: var(--encre-douce); line-height: 1.15; }
.zf-barre { display: block; width: 100%; height: 5px; border-radius: 9px; background: #DDE7EA; overflow: hidden; }
.zf-barre i { display: block; height: 100%; background: var(--turquoise); }
.zf-m, .zf-f { font-family: system-ui, sans-serif; font-weight: 900; }
.zf-stat b .zf-m, .zf-stat b .zf-f { font-size: 1rem; }
.zf-m { color: #2E7BE0 !important; } .zf-f { color: #E0457B !important; }
.zf-prefs { display: flex; flex-wrap: wrap; gap: 6px; }
.zf-chip { font-size: .82rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; border: 2px solid var(--encre); background: #fff; }
.zf-chip.aime { background: #D9F7CF; } .zf-chip.evite { background: #FFE0DA; } .zf-chip.inconnu { background: #EEE; color: var(--encre-douce); }
.zf-bebe { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #FFF0F6; border: 2px solid #F3C2D6; }
.zf-bebe-img { width: 44px; flex: none; }
.zf-bebe div { display: grid; }
.zf-bebe small { color: var(--encre-douce); font-weight: 700; font-size: .8rem; }
.zf-desc { margin: 0; line-height: 1.45; }
.zf-fait { background: #FFF3C4; border: 2px solid var(--encre); border-radius: 12px; padding: 10px 12px; font-size: .92rem; }
.zf-fait b { display: block; margin-bottom: 2px; }
.zf-date { color: var(--encre-douce); font-weight: 700; text-align: center; }
.zf-pied { padding: 10px 14px 14px; border-top: 2px solid #E3E8EA; background: var(--papier); }
.zf-pied .zc-btn { width: 100%; }
@media (max-width: 360px) { .zf-stats { grid-template-columns: repeat(2, 1fr); } }
.zf-hero .zf-animal .silhouette { filter: brightness(0) opacity(.55) !important; }
.zf-fermer:focus:not(:focus-visible) { outline: none; }

/* Québec : attitudes des nouvelles espèces. */
.act-parader .a-tout { animation: zc-parade 1.8s ease-in-out infinite; }
.act-coasser .a-tout { animation: zc-coasse 1.5s ease-in-out infinite; }
.act-pecher .a-tout { animation: zc-peche 3s ease-in-out infinite; }
.act-hululer .a-tout, .act-hurler .a-tout { animation: zc-appel 2.6s ease-in-out infinite; }
.act-envol .a-tout { animation: zc-envol 2.8s ease-in-out infinite; }
@keyframes zc-parade { 50% { transform: scaleX(1.08) rotate(-4deg); } }
@keyframes zc-coasse { 10%,30% { transform: scale(1.05,.96); } 20%,40%,100% { transform: scale(1); } }
@keyframes zc-peche { 0%,65%,100% { transform: rotate(0); } 72% { transform: rotate(16deg) translateY(3px); } }
@keyframes zc-appel { 35%,60% { transform: rotate(-8deg) scaleY(1.04); } }
@keyframes zc-envol { 30%,60% { transform: translateY(-17px) rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .zc-pose .a-tout { animation: none !important; } }
.mouvements-reduits .zc-pose .a-tout { animation: none !important; }
/* Les petites découvertes de ZooClic : accessoires et album en papier. */
.zc-cache { position:absolute; right:9%; bottom:14%; z-index:2200; width:56px; height:56px; padding:5px; border:0; border-radius:50%; cursor:pointer; background:rgba(255,247,205,.88); box-shadow:0 2px 0 #2a2230,0 0 16px #ffe07a; touch-action:manipulation; }
.zc-cache img { display:block; width:100%; height:100%; object-fit:contain; }
.zc-cache:hover, .zc-cache:focus-visible { outline:3px solid #2a2230; outline-offset:4px; }
.zc-cache-lueur { position:absolute; top:-7px; right:-2px; color:#b76812; font-size:23px; animation:zc-cache-brille 2.8s ease-in-out infinite; }
@keyframes zc-cache-brille { 50% { transform:rotate(35deg) scale(.7); opacity:.4; } }
.zc-cache-recompense { text-align:center; }
.zc-cache-recompense>img { width:94px; }
.zc-cache-recompense ul { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:0; list-style:none; }
.zc-cache-recompense li { padding:10px 14px; border:2px solid var(--encre); border-radius:14px; background:#fff2b0; font-weight:900; }
.zc-sur-tiret { font-size:.7rem; letter-spacing:.12em; font-weight:900; color:#775d3b; margin:0 0 5px; }
.zc-sur-discret { font-size:.85rem; line-height:1.45; color:var(--encre-douce); }
.zc-lumiere { position:absolute; inset:0; pointer-events:none; z-index:1200; background:linear-gradient(125deg,rgba(255,223,131,.36),transparent 42%,rgba(255,173,77,.1)); mix-blend-mode:soft-light; }
.zc-lumiere:after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,rgba(255,249,208,.22) 27%,transparent 35%,transparent 55%,rgba(255,249,208,.15) 57%,transparent 65%); }
.zc-lumiere-badge { position:absolute; top:10px; left:10px; z-index:1400; pointer-events:none; border:2px solid var(--encre); border-radius:20px; padding:5px 10px; background:#ffedb0; font-size:.76rem; font-weight:900; color:#6b431e; }
.zc-viseur .zc-lumiere-badge { top:55px; }
.zc-dore-conseil { background:#fff0b8; border:2px solid #b77d27; color:#5f3a1a; border-radius:12px; padding:9px; font-size:.85rem; line-height:1.4; }
.zc-cliche.doree .zc-cliche-fond:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg,rgba(255,221,112,.35),transparent 65%); }
.zc-album { max-width:1000px; margin:auto; }
.zc-album-intro { display:flex; align-items:center; gap:18px; padding:22px; border:3px solid var(--encre); border-radius:20px; background:#fff4db; box-shadow:0 4px 0 var(--encre); }
.zc-album-intro h2 { margin:4px 0 7px; font-size:clamp(1.25rem,4vw,1.8rem); }
.zc-album-intro p:last-child { margin:0; line-height:1.5; }
.zc-album-sceau { flex:none; display:grid; place-items:center; width:65px; height:65px; border:3px solid #974c38; border-radius:50%; color:#974c38; font-size:44px; transform:rotate(-10deg); }
.zc-album-compteurs { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 10px; }
.zc-album-compteurs>span { display:flex; flex:1; gap:8px; justify-content:center; align-items:center; padding:12px; background:var(--papier); border:2px solid var(--encre); border-radius:12px; font-size:.85rem; }
.zc-album-compteurs b { font-size:1.25rem; }
.zc-album-grille { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:6px 4px 16px; }
.zc-polaroid { position:relative; min-width:0; text-align:center; background:#fffdf5; border:2px solid var(--encre); border-radius:4px; padding:8px 8px 13px; box-shadow:3px 4px 0 rgba(42,34,48,.16); color:var(--encre); cursor:pointer; font:inherit; }
.zc-polaroid:nth-child(odd) { transform:rotate(-1deg); }
.zc-polaroid:nth-child(even) { transform:rotate(1deg); }
.zc-polaroid:hover,.zc-polaroid:focus-visible { transform:translateY(-3px); outline:3px solid var(--turquoise); outline-offset:3px; }
.zc-polaroid.vedette { border-color:#a36612; box-shadow:0 0 0 3px #ffe083,3px 5px 0 rgba(42,34,48,.16); }
.zc-polaroid .zc-cliche { width:100%; aspect-ratio:4/3; height:auto; margin:0 0 10px; border-radius:2px; overflow:hidden; }
.zc-polaroid>strong { display:block; font-size:.9rem; margin:7px 0 4px; overflow-wrap:anywhere; }
.zc-polaroid>small { display:block; color:#6a5a48; font-size:.73rem; line-height:1.35; }
.zc-polaroid.vide:hover { transform:none; outline:none; }
.zc-polaroid.vide { opacity:.65; cursor:default; transform:none; }
.zc-album-vide { display:grid; place-items:center; aspect-ratio:4/3; background:repeating-linear-gradient(135deg,#ede7d9 0 8px,#f4eedf 8px 16px); border:1px dashed #aa9d86; }
.zc-album-vide svg { width:38px; color:#998b73; }
.zc-tampon { display:block; width:max-content; max-width:100%; margin:-2px auto 8px; border:2px solid #a24f40; border-radius:3px; padding:3px 5px; color:#a24f40; font-size:.6rem; font-weight:900; letter-spacing:.03em; transform:rotate(-6deg); }
.zc-souvenir-grand { text-align:center; }
.zc-souvenir-grand .zc-cliche { width:100%; aspect-ratio:4/3; height:auto; margin:15px 0; border:8px solid #fffdf5; box-shadow:0 3px 12px #2a223025; }
.zc-souvenir-grand .zc-btn { width:100%; margin-top:9px; }
.zc-souvenir-coeur { font-weight:900; color:#a24f40; }
.zc-album-vedette { display:flex; gap:10px; align-items:center; width:100%; padding:10px; text-align:left; color:var(--encre); background:#fff5dc; border:2px solid var(--encre); border-radius:13px; cursor:pointer; font:inherit; }
.zc-album-vedette>span:first-child { flex:none; width:70px; }
.zc-album-vedette .zc-cliche { width:70px; height:54px; margin:0; }
.zc-album-vedette .zc-cliche-q { display:none; }
.zc-album-vedette small { display:block; font-size:.6rem; letter-spacing:.05em; margin-bottom:5px; }
.zc-album-vedette strong { font-size:.85rem; }
.zc-album-vedette>b { margin-left:auto; font-size:28px; color:#a24f40; }
.zc-btn-album { width:100%; margin:0 0 14px; background:#fff4db; }
@media(max-width:650px) { .zc-album-grille { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } .zc-album-intro { padding:16px; gap:12px; } .zc-album-sceau { width:44px; height:44px; font-size:30px; } }
@media(prefers-reduced-motion:reduce) { .zc-cache-lueur { animation:none; } .zc-polaroid:hover { transform:none; } }
.zc-reduit .zc-cache-lueur { animation:none; }

/* Contrastes des surfaces papier, indépendants du thème saisonnier. */
.zc-album-intro, .zc-album-compteurs, .zc-album-compteurs>span { color:#2a2230; }
.zc-album-intro h2, .zc-album-intro p:last-child, .zc-album-compteurs b { color:#2a2230; }
.zc-album-intro .zc-sur-tiret { color:#775d3b; }
html.ev-halloween .zc-album>.zc-sur-discret { color:#e4d6ed; }
.zc-reglage-note { font-size:.85rem; line-height:1.45; color:var(--encre-douce); margin:0 0 12px; }

html.theme-sous_bois { --ciel:#E4EED9; --ciel-motif:#CEDDBD; --turquoise:#67A653; --turquoise-fonce:#416F35; }
html.theme-aurore { --ciel:#EDE7FA; --ciel-motif:#DAD0EF; --turquoise:#9A7BC4; --turquoise-fonce:#6C5193; }
html.theme-ambre { --ciel:#FFF0DA; --ciel-motif:#EFDBBB; --turquoise:#D69551; --turquoise-fonce:#935D2C; }
.zc-themes-grille { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.zc-theme-carte { display:flex; flex-direction:column; gap:10px; min-width:0; }
.zc-theme-carte h2,.zc-theme-carte p { margin:0; }
.zc-theme-carte small { margin-top:auto; }
.zc-theme-carte.actif { outline:3px solid var(--turquoise); }
.zc-theme-apercu { background:var(--ap-fond); border:2px solid #2a2230; border-radius:12px; padding:14px; display:flex; flex-wrap:wrap; gap:10px; color:#2a2230; }
.zc-theme-apercu span { display:block; width:100%; font-weight:900; background:#fffdf5; padding:4px; border-radius:6px; }
.zc-theme-apercu i { display:block; height:24px; flex:1; background:#fffdf5; border-radius:6px; }
.zc-theme-apercu b { background:var(--ap-accent); width:100%; padding:7px; border:2px solid #2a2230; border-radius:8px; text-align:center; }
@media(max-width:550px) { .zc-themes-grille { grid-template-columns:1fr; } }
html.theme-rive { --ciel:#E1F1FA; --ciel-motif:#C7E3F3; --turquoise:#62A8D6; --turquoise-fonce:#386E98; }

.zc-rares-puces { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; font-size:.7rem; }
.zc-rares-puces>span { border:1px solid #75657d; border-radius:12px; padding:2px 6px; color:#302635; background:#fff6f3; }
.zc-rares-puces>.eclat { background:#ece4ff; }
.zc-formes-grille { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.zc-forme-carte { min-width:0; text-align:center; color:#2a2230; background:#fff9eb; border:2px solid #2a2230; border-radius:13px; padding:10px; }
.zc-forme-carte h3 { margin:0 0 7px; }
.zc-forme-carte p,.zc-forme-carte small { font-size:.8rem; line-height:1.45; }
.zc-forme-image { width:100%; height:120px; display:flex; align-items:end; justify-content:center; }
.zc-forme-image svg { width:100%; max-height:120px; }
.zc-forme-image.bebe { height:85px; }
.zc-forme-image.bebe svg { max-height:85px; }
.zc-forme-tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:#fff5f1; color:#5e3157; font:800 10px sans-serif; white-space:nowrap; border:1px solid #5e3157; border-radius:8px; padding:2px 5px; pointer-events:none; }
.zc-cliche-forme { position:absolute; top:5px; left:5px; background:#fff1fa; color:#563258; border-radius:8px; padding:3px 6px; font-size:.65rem; font-weight:900; }
@media(max-width:500px) { .zc-formes-grille { grid-template-columns:1fr; } .zc-forme-carte { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5px; } .zc-forme-carte h3,.zc-forme-carte small { grid-column:1/-1; } }

.zc-climat { padding:10px 14px; border:2px solid var(--encre); border-radius:14px; background:#fff6db; color:#382c3e; margin:8px 0; }
.zc-climat strong,.zc-climat small { display:block; }
.zc-gestion-carte { padding:20px; margin:16px 0; background:#fff8e8; color:#382c3e; }
.zc-gestion-carte .zc-btn { margin:6px 4px 6px 0; }
.zc-gestion-portrait { width:80px; height:100px; object-fit:contain; float:right; }
.zc-meteo { position:absolute; inset:0; pointer-events:none; z-index:1100; overflow:hidden; border-radius:inherit; }
.zc-meteo-nuages { background:linear-gradient(#68788825,transparent 65%); }
.zc-meteo-pluie { background:#536a8817; }
.zc-meteo-soleil { background:linear-gradient(120deg,#ffe28530,transparent 45%); }
.zc-saison-automne { box-shadow:inset 0 -22px 25px #c8792625; }
.zc-saison-hiver { box-shadow:inset 0 -24px 20px #e4f8ff70; }
.zc-meteo i { position:absolute; top:-15%; animation:zc-averse 1.4s linear infinite; width:2px; height:22px; background:#b5d4f4aa; }
.zc-meteo-neige i { width:6px; height:6px; border-radius:50%; background:#fff; animation-duration:6s; }
@keyframes zc-averse { to {transform:translate(-18px,650px);} }
.zc-reduit .zc-meteo i { animation:none; top:30%; }
@media(prefers-reduced-motion:reduce) { .zc-meteo i {animation:none;top:30%;} }


.zc-idle-liens {display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.zc-idle-carte {padding:20px;margin:16px 0;background:#fff8e8;color:#382c3e;}
.zc-idle-chiffres {padding:12px 16px;background:#fff;border:2px solid #382c3e;border-radius:14px;color:#382c3e;}
.zc-idle-benefice {font-weight:800;color:#226945;}
.zc-kiosque-grand {width:min(240px,65%);display:block;margin:0 auto 12px;}
.zc-idle-kiosque-intro {width:120px;display:block;margin:12px auto;}
.zc-kiosque-scene {position:absolute;bottom:4%;left:4%;width:18%;min-width:52px;padding:0;border:0;background:transparent;z-index:2300;cursor:pointer;}
.zc-kiosque-scene img {width:100%;display:block;filter:drop-shadow(0 3px 0 #2a223066);}
.zc-defi {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-top:2px dashed #bbae9a;padding:12px 0;}
.zc-defi p {flex:1 1 250px;margin:0;}.zc-defi small {display:block;margin-top:6px;}
.zc-carnet-page {display:flex;align-items:center;gap:14px;background:#fff8e8;border:3px solid #382c3e;color:#382c3e;border-radius:14px;padding:12px;margin:12px 0;}
.zc-carnet-page img {width:100px;max-width:35%;border:3px solid #382c3e;border-radius:8px;}.zc-carnet-page small {display:block;}

/* Ouest canadien — cartes et commandes adaptées au téléphone. */
.zc-voyage-photo{height:150px;overflow:hidden;border-radius:14px}.zc-voyage-photo svg{width:100%;height:100%;object-fit:cover}
.zc-regions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.zc-objectifs{border:2px solid currentColor;border-radius:14px;padding:10px;margin-bottom:12px}.zc-objectifs strong,.zc-objectifs small{display:block}.zc-objectifs small{font-size:.78rem;margin-top:8px}.zc-objectifs .zc-actions-ligne{gap:6px;margin-top:8px}.zc-goodie-image{display:block;width:140px;height:130px;object-fit:contain;margin:auto}.zc-voyage .zc-carte{color:#302838;background:#fff7df}.zc-voyage .zc-carte :is(h2,h3,p,li,small,strong){color:#302838}.theme-halloween .zc-voyage .zc-carte h2,.theme-halloween .zc-voyage .zc-carte h3{color:#302838}
@media(max-width:480px){.zc-regions .zc-onglet{flex:1 1 40%}.zc-objectifs .zc-btn{font-size:.8rem;padding:8px}.zc-voyage .zc-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.zc-voyage .zc-idle-carte{min-width:0;overflow-wrap:anywhere}.zc-voyage .zc-goodie-image{max-width:100%}}

/* Collection des appâts — 0.3.1. Dimensions locales : aucun SVG ne peut agrandir une fiche. */
.zc-appats-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 16px}
.zc-appats-intro h2{margin:0 0 4px;font-size:1.5rem;line-height:1.2}.zc-appats-intro p{margin:0;max-width:48ch;font-size:.9rem;line-height:1.5}
.zc-appats-compteur{flex:none;background:#fff3cf;color:#684c28;border:2px solid #d7bd86;border-radius:999px;padding:7px 12px;font-size:.8rem;font-weight:800}
.zc-appats-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;align-items:start}
.zc-appat-carte{min-width:0;overflow:hidden;background:#fffdf7;color:#302838;border:3px solid #302838;border-radius:20px;box-shadow:0 5px 0 #302838}
.zc-appat-entete{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:center;padding:18px 18px 12px}
.zc-appat-entete>div{min-width:0}.zc-appat-entete h3{color:#302838;margin:5px 0 0;font-family:var(--f-titre);font-size:1.28rem;line-height:1.15;overflow-wrap:anywhere}
.zc-appat-visuel{width:80px;height:76px;min-width:0;display:grid;place-items:center;background:#edf6ef;border:2px solid #d7e5db;border-radius:15px;overflow:hidden}
.zc-appat-visuel svg,.zc-appat-visuel img{display:block;width:68px;height:64px;max-width:100%;max-height:100%;object-fit:contain}
.zc-appat-etiquette{display:inline-block;background:#eef0f7;color:#4c4665;padding:3px 9px;border-radius:999px;font-size:.74rem;font-weight:800;text-transform:capitalize}
.zc-appat-reperes{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0 18px 15px;color:#635d6a;font-size:.8rem;font-weight:700}
.zc-appat-details{border-top:1px solid #e2dbcc}.zc-appat-details summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px;list-style:none;cursor:pointer;color:#335f56;background:#f1f6ed;font-weight:800;font-size:.84rem}
.zc-appat-details summary::-webkit-details-marker{display:none}.zc-appat-details summary>span{font-size:1.2rem;line-height:1;transition:transform .15s}.zc-appat-details[open] summary>span{transform:rotate(180deg)}
.zc-appat-details summary:focus-visible{outline:3px solid #7b47b4;outline-offset:-4px;border-radius:8px}
.zc-appat-contenu{padding:16px 18px 18px;display:grid;gap:16px}.zc-appat-contenu section{min-width:0}.zc-appat-contenu h4{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 .85rem var(--f-texte);color:#51493f;margin:0 0 9px}.zc-appat-contenu h4 span{color:#736956;font-size:.75rem}
.zc-appat-puces{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}.zc-appat-puces li{max-width:100%;border:1px solid #ddd7ca;border-radius:8px;background:#f4f1e9;color:#514b43;padding:5px 8px;font-size:.76rem;line-height:1.3;overflow-wrap:anywhere}
.zc-appat-affinite.aime .zc-appat-puces li{background:#e6f4e8;border-color:#bad9c1;color:#2e5e3c}.zc-appat-affinite.evite .zc-appat-puces li{background:#fff0e8;border-color:#ebcabb;color:#794232}
.zc-appat-indice{color:#746d63;margin:8px 0 0;font-size:.77rem;line-height:1.45}.zc-appat-verrouille{background:#ede8ef;border-color:#62566b;box-shadow:0 5px 0 #62566b}.zc-appat-verrouille .zc-appat-visuel{background:#e1dbe5;border:2px dashed #b8aabe}.zc-appat-visuel.verrouille svg{filter:brightness(0);opacity:.22}.zc-appat-attente{padding:0 18px 18px;margin:0;color:#62586a;font-size:.82rem;line-height:1.5}
@media(max-width:480px){.zc-appats-intro{align-items:flex-start;flex-direction:column;gap:10px}.zc-appats-intro h2{font-size:1.4rem}.zc-appats-grille{gap:14px}.zc-appat-entete{padding:15px 15px 12px;grid-template-columns:72px minmax(0,1fr);gap:12px}.zc-appat-visuel{width:72px;height:70px}.zc-appat-visuel svg,.zc-appat-visuel img{width:62px;height:58px}}
@media(prefers-reduced-motion:reduce){.zc-appat-details summary>span{transition:none}}