/* L'accueil (l'écran-titre) : en haut, la porte blindée de l'abri dans sa colline (decor/porte.jpg) — c'est le grand bouton
   pour entrer : sa porte Poké Ball (Master Ball à Halloween) roule et s'écarte, la lumière jaillit, on plonge dans le tunnel ;
   en dessous, l'abri vu en coupe, où chaque menu est une vraie salle avec les Pokémon qui y travaillent.
   Le ciel suit l'heure du joueur (jour, soir, nuit) ; pendant Halloween, c'est la nuit violette, les chauves-souris, les citrouilles.
   Tout est rangé sous #titre (les classes jour / soir / nuit / halloween / entree / nouveau sont posées sur lui par js/accueil.js). */

html #titre {
  --accent: #E3350D; --jaune: #FFCB05; --bleu: #2A75BB; --creme: #FFF6E5; --blanc: #fff;
  --encre: #1C1B2E; --acier: #8A97A3; --doux: #555368; --bois: #B9763F; --bois-fonce: #7A4A23;
  --terre: #5B3B26; --terre-2: #4A2F1E; --terre-3: #3A2417; --roche: #2B1C13;
  --titres: 'Fredoka', 'Rubik', system-ui, sans-serif; --texte: 'Rubik', system-ui, sans-serif; --chiffres: 'Silkscreen', monospace;
  --haut: max(clamp(420px, 62vh, 640px), calc(38.1vw + 30px));
  /* La largeur de l'image de la colline (elle couvre toujours toute la largeur). */
  --largeur-colline: max(100vw, (var(--haut) - 40px) * 2.1);
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--roche);
  color: var(--encre);
  font-family: var(--texte);
}
html #titre.halloween { --accent: #F26B1D; --jaune: #FFC94A; --bleu: #7B4FC4; --creme: #FFF1DC; --encre: #1A1426; }
html #titre::before { display: none; }
html #titre button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Dehors : la colline et sa porte blindée ---------- */
html #titre .dehors { position: relative; height: var(--haut); overflow: hidden; background: #45bbea; }
/* L'image garde ses proportions : assez large pour l'écran, assez haute pour la zone ; posée sur le sol, centrée sur la porte. */
html #titre .colline {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--largeur-colline);
  aspect-ratio: 1344 / 640;
  transform: translateX(-50%);
  background: url(../decor/porte.jpg) center / 100% 100% no-repeat;
  transform-origin: 50% 64.7%;
  transition: transform 1.3s cubic-bezier(.6, 0, .4, 1) 1.4s;
}
/* Le voile du ciel déborde au-dessus de l'image, sur la bande de ciel. */
html #titre .ciel { position: absolute; inset: -400px 0 0 0; pointer-events: none; transition: background 1s; z-index: 1; }
html #titre.soir .ciel { background: linear-gradient(180deg, rgba(255, 120, 60, 0.45), rgba(255, 170, 90, 0.22) 55%, rgba(80, 30, 60, 0.2)); mix-blend-mode: multiply; }
html #titre.nuit .ciel { background: linear-gradient(180deg, rgba(10, 16, 48, 0.86), rgba(30, 30, 80, 0.6) 60%, rgba(10, 10, 30, 0.5)); }
html #titre.halloween .ciel { background: linear-gradient(180deg, rgba(43, 27, 69, 0.88), rgba(70, 40, 110, 0.6) 60%, rgba(26, 20, 38, 0.5)); }
html #titre .ciel-etoiles, html #titre .lune, html #titre .chauves, html #titre .citrouilles { position: absolute; pointer-events: none; opacity: 0; transition: opacity 1s; z-index: 1; }
html #titre.nuit .ciel-etoiles, html #titre.halloween .ciel-etoiles, html #titre.nuit .lune, html #titre.halloween .lune, html #titre.halloween .chauves, html #titre.halloween .citrouilles { opacity: 1; }
html #titre .ciel-etoiles {
  inset: 0 0 50% 0;
  background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 37% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 48% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 63% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 6%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 34%, #fff 50%, transparent 51%);
  animation: acc-scintille 3s ease-in-out infinite alternate;
}
@keyframes acc-scintille { to { filter: brightness(0.6); } }
html #titre .lune { top: 14%; right: 24%; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe9, #f3e3b8); border: 4px solid var(--encre); box-shadow: 0 0 40px rgba(255, 240, 200, 0.5); }
html #titre .chauves { top: 13%; left: 22%; width: 260px; }
html #titre .chauves path { fill: var(--encre); }
html #titre .chauves g { animation: acc-vole 6s ease-in-out infinite alternate; }
@keyframes acc-vole { to { transform: translate(40px, 14px); } }
html #titre .citrouilles { left: 50%; bottom: 4%; width: min(900px, 120vw); transform: translateX(-50%); }

/* La porte de l'abri, peinte en Poké Ball par-dessus celle du dessin : c'est le bouton pour entrer. */
html #titre .porte {
  position: absolute;
  left: 50%;
  top: 64.7%;
  height: 41.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  z-index: 2;
}
html #titre .porte .ball-master { display: none; }
html #titre.halloween .porte .ball-master { display: inline; }
html #titre.halloween .porte .ball-normale { display: none; }
html #titre .porte .disque { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.6, 0, .3, 1) 1s; }
html #titre .porte .roue { width: 100%; height: 100%; display: block; transition: transform 1.1s cubic-bezier(.5, 0, .2, 1); }
html #titre .porte:hover .roue { transform: rotate(-10deg); }
/* La nuit, la porte et l'arche prennent la lumière de la scène. */
html #titre.nuit .porte .disque, html #titre.nuit .arche, html #titre.nuit .ecran-abri { filter: brightness(0.72) saturate(0.85); }
html #titre.halloween .porte .disque, html #titre.halloween .arche, html #titre.halloween .ecran-abri { filter: brightness(0.8) saturate(0.9); }
html #titre.soir .porte .disque, html #titre.soir .arche { filter: sepia(0.18) brightness(0.95); }
html #titre .porte .halo { position: absolute; inset: 0; border-radius: 50%; animation: acc-halo 2.4s ease-out infinite; }
@keyframes acc-halo { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 110, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(255, 214, 110, 0); } }
html #titre.halloween .porte .halo { animation-name: acc-halo-fete; }
@keyframes acc-halo-fete { 0% { box-shadow: 0 0 0 0 rgba(200, 150, 255, 0.6); } 100% { box-shadow: 0 0 0 22px rgba(200, 150, 255, 0); } }
/* Derrière la porte : le tunnel de l'abri, qui s'éclaire quand la porte s'écarte. */
html #titre .porte .ouverture { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 0.4s 0.9s, box-shadow 1.2s 1.2s; }
html #titre .porte .ouverture svg { width: 100%; height: 100%; display: block; filter: blur(0.5px); }
html #titre .porte .lampes { opacity: 0; transition: opacity 0.4s 1.4s; }
html #titre .porte .tunnel-defile circle { opacity: 0; transform-box: view-box; transform-origin: 50px 57px; }
html #titre.entree .porte .lampes { opacity: 1; }
/* Pendant le zoom, des anneaux de lumière défilent : on avance dans le tunnel. */
html #titre.entree .porte .tunnel-defile circle { animation: acc-avance 1.6s linear 1.4s infinite; }
@keyframes acc-avance { 0% { transform: scale(0.12); opacity: 0; } 25% { opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
/* Les faisceaux de lumière qui débordent de la porte sur le chemin. */
html #titre .porte .rayons { position: absolute; left: -40%; right: -40%; top: 72%; height: 75%; pointer-events: none; opacity: 0; transition: opacity 0.8s 1.1s;
  background: radial-gradient(ellipse 48% 62% at 50% 0%, rgba(255, 222, 130, 0.95), rgba(255, 196, 90, 0.5) 45%, rgba(255, 190, 80, 0) 72%);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%); filter: blur(5px); }
html #titre.entree .porte .rayons { opacity: 1; }
/* La tranche du disque : invisible porte fermée, elle apparaît quand la porte roule sur le côté. */
html #titre .porte .tranche { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #2b2f38, #8d97a3 45%, #3a3f48); transform: translateX(6%); opacity: 0; transition: opacity 0.3s 0.9s; }
html #titre.entree .porte .roue { transform: rotate(-320deg); }
html #titre.entree .porte .disque { transform: translateX(-118%); filter: drop-shadow(10px 8px 8px rgba(0, 0, 0, 0.5)); }
html #titre.entree .porte .tranche { opacity: 1; }
html #titre.entree .porte .ouverture { opacity: 1; box-shadow: 0 0 40px 14px rgba(255, 210, 110, 0.55); }
html #titre.entree .porte .halo { display: none; }
html #titre.entree .colline { transform: translateX(-50%) scale(4); }

/* L'étiquette sous la porte, sur le chemin (l'autre bouton pour entrer). */
html #titre #btn-entrer {
  position: absolute;
  left: 50%;
  top: 85.5%;
  margin: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 22px 9px;
  background: var(--accent);
  color: var(--blanc);
  border: 4px solid var(--encre);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--encre);
  white-space: nowrap;
  animation: acc-appel 1.8s ease-in-out infinite;
}
html #titre #btn-entrer:disabled { filter: grayscale(0.6); animation: none; cursor: wait; }
html #titre #btn-entrer b { font: 700 clamp(22px, 2.6vw, 32px) / 1.05 var(--titres); -webkit-text-stroke: 0.09em var(--encre); paint-order: stroke fill; }
html #titre #btn-entrer small { color: var(--creme); font-size: 13px; }
@keyframes acc-appel { 50% { transform: translateX(-50%) scale(1.05); } }
html #titre.entree #btn-entrer { opacity: 0; transition: opacity 0.3s; }
html #titre.entree .arche, html #titre.entree .ecran-abri { opacity: 0; transition: opacity 0.4s 1.3s; }

/* L'arche de l'abri : son centre tombe sur celui de la porte (50 % ; 64,7 %), le rayon extérieur fait 44 % de la hauteur de l'image.
   L'arche et l'écran sont des images posées sur la colline : ils laissent passer les clics vers la porte. */
html #titre .arche { position: absolute; left: 50%; top: 20.7%; width: 41.9%; height: auto; transform: translateX(-50%); z-index: 2; overflow: visible; pointer-events: none; }
html #titre .arche-texte { font-family: var(--titres); font-weight: 700; letter-spacing: 1px; paint-order: stroke fill; stroke: #2b2f38; stroke-width: 6px; stroke-linejoin: round; }
html #titre .arche-texte .t1 { fill: #E3350D; }
html #titre .arche-texte .t2 { fill: #FFCB05; }
html #titre.halloween .arche-texte .t1 { fill: #F26B1D; }
html #titre.halloween .arche-texte .t2 { fill: #FFC94A; }
html #titre .ecran-abri { position: absolute; left: 61.43%; top: 54.06%; width: 2.19%; height: 2.81%; z-index: 2; pointer-events: none; }
html #titre .ecran-abri text { font-family: var(--chiffres); fill: #7ff0c8; }
html #titre .cache { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Le tableau d'affichage des nouveautés : planté dans l'herbe à droite du chemin, sous un petit toit de tuiles,
   à la taille du paysage ; son ombre tombe sur l'herbe, une lanterne s'allume le soir. */
html #titre .tableau { position: absolute; left: 70.5%; bottom: 5.5%; width: clamp(210px, 16.5%, 290px); z-index: 2; transform: rotate(-1.5deg); transform-origin: 50% 100%; }
html #titre .tableau::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -10px; height: 22px; background: radial-gradient(ellipse at 50% 50%, rgba(20, 40, 10, 0.45), transparent 70%); z-index: -1; }
html #titre .tableau .toit { position: relative; height: 26px; margin: 0 -16px -4px; background: repeating-linear-gradient(90deg, #C4122F 0 16px, #9E0E25 16px 18px); border: 4px solid var(--encre); border-radius: 10px 10px 4px 4px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.18); z-index: 1; }
html #titre .tableau .lanterne { position: absolute; right: 14px; top: 100%; width: 14px; height: 20px; margin-top: 4px; background: #ffd76b; border: 3px solid var(--encre); border-radius: 4px 4px 7px 7px; opacity: 0; transition: opacity 1s; }
html #titre .tableau .lanterne::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 6px; background: var(--encre); }
html #titre.nuit .tableau .lanterne, html #titre.halloween .tableau .lanterne, html #titre.soir .tableau .lanterne { opacity: 1; box-shadow: 0 0 22px 8px rgba(255, 210, 110, 0.55); }
html #titre.nuit .colline .tableau, html #titre.halloween .colline .tableau { filter: brightness(0.82) saturate(0.88); }
html #titre.soir .colline .tableau { filter: sepia(0.15) brightness(0.95); }
html #titre .tableau .bois { padding: 10px; background: repeating-linear-gradient(0deg, var(--bois) 0 22px, #A86A36 22px 24px); border: 4px solid var(--encre); border-radius: 6px; }
html #titre .tableau .feuille { position: relative; padding: 12px 12px 8px; background: var(--creme); border: 2px solid var(--encre); border-radius: 3px; transform: rotate(-1.2deg); }
html #titre .tableau .feuille::before { content: ""; position: absolute; top: -8px; left: 50%; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--encre); }
html #titre .tableau small { font: 400 10px var(--chiffres); color: var(--doux); }
html #titre .tableau b { display: block; margin: 2px 0 5px; font: 700 16px / 1.15 var(--titres); }
html #titre .tableau ul { margin: 0; padding-left: 15px; font-size: 12.5px; line-height: 1.35; }
html #titre .tableau li + li { margin-top: 3px; }
html #titre .tableau .btn-annonces { position: relative; display: block; margin: 7px auto 0; padding: 3px 10px; background: none; border: 0; border-bottom: 2px solid var(--encre); border-radius: 0; box-shadow: none; font: 600 13px var(--titres); }
html #titre .tableau .btn-annonces .point { position: absolute; top: 0; right: -6px; width: 10px; height: 10px; background: var(--accent); border: 2px solid var(--encre); border-radius: 50%; }
html #titre .tableau .poteaux { display: flex; justify-content: space-around; }
html #titre .tableau .poteaux i { width: 14px; height: 30px; background: linear-gradient(90deg, var(--bois-fonce), var(--bois) 40%, var(--bois-fonce)); border: 3px solid var(--encre); border-top: 0; }
html #titre .tableau .herbe { position: absolute; left: -8%; width: 116%; bottom: -4px; height: 22px; }

/* La carte du dresseur, en haut à gauche. */
html #titre .badge-dresseur { position: absolute; top: 14px; left: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; background: var(--blanc); border: 3px solid var(--encre); border-radius: 18px; box-shadow: 0 5px 0 var(--encre); }
html #titre .badge-dresseur img { width: 46px; height: 46px; border: 3px solid var(--encre); border-radius: 12px; background: var(--creme); image-rendering: pixelated; }
html #titre .badge-dresseur .qui { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
html #titre .badge-dresseur .qui b { font: 700 18px var(--titres); }
html #titre .badge-dresseur .qui small { font-size: 12px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html #titre .badge-dresseur .pastille-lettres { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; display: grid; place-items: center; background: var(--accent); color: #fff; border: 2px solid var(--encre); border-radius: 9px; font: 700 11px var(--titres); font-style: normal; }
html #titre .badge-dresseur .pastille-lettres[hidden] { display: none; }
html #titre .badge-dresseur .bouton-rond { position: relative; min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 8px; margin: 0; background: var(--creme); border: 2px solid var(--encre); border-radius: 17px; box-shadow: none; font: 600 13px var(--titres); }
html #titre .badge-dresseur .bouton-rond.badges { gap: 4px; display: flex; }
html #titre .badge-dresseur .bouton-rond.badges img { width: 16px; height: 16px; border: 0; border-radius: 0; background: none; }

/* ---------- Le sol, puis l'abri en coupe ---------- */
html #titre .sol { position: relative; height: 26px; margin-top: -10px; z-index: 4; background: linear-gradient(180deg, #7FBF3F 0 8px, #5E9A2C 8px 12px, var(--terre) 12px); }
html #titre .abri {
  position: relative;
  padding: 0 0 30px;
  background:
    radial-gradient(ellipse 60px 22px at 8% 30%, rgba(0, 0, 0, 0.25), transparent 70%),
    radial-gradient(ellipse 80px 26px at 92% 62%, rgba(0, 0, 0, 0.25), transparent 70%),
    linear-gradient(180deg, var(--terre) 0 30%, var(--terre-2) 30% 62%, var(--terre-3) 62%);
}
html #titre.entree .abri, html #titre.entree .sol { opacity: 0.3; transition: opacity 1s 1.2s; }
html #titre .coupe { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; gap: 18px 0; width: min(1160px, 94vw); margin: 0 auto; padding-top: 18px; }
/* Le puits de l'ascenseur descend juste sous la porte. */
html #titre .puits { grid-column: 2; grid-row: 1 / span 3; position: relative; margin: -18px 6px 0; background: repeating-linear-gradient(0deg, #3b3f46 0 6px, #2c2f35 6px 12px); border: 4px solid var(--encre); border-top: 0; }
html #titre .puits::before, html #titre .puits::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: var(--acier); }
html #titre .puits::before { left: 8px; }
html #titre .puits::after { right: 8px; }
html #titre .cabine { position: absolute; left: 4px; right: 4px; height: 70px; background: linear-gradient(180deg, #d8dde2, #a9b2bb); border: 3px solid var(--encre); border-radius: 6px; animation: acc-cabine 12s ease-in-out infinite; }
html #titre .cabine::after { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; margin-left: -1.5px; background: var(--encre); }
@keyframes acc-cabine { 0%, 12% { top: 2%; } 30%, 45% { top: 40%; } 62%, 75% { top: 76%; } 92%, 100% { top: 2%; } }

/* Une salle : son image, sa plaque, son étiquette de menu, ses Pokémon. */
html #titre .salle { position: relative; display: block; width: 100%; aspect-ratio: 1120 / 320; margin: 0; padding: 0; border: 5px solid var(--encre); border-radius: 6px; background: #222 center / cover no-repeat;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 6px 0 rgba(0, 0, 0, 0.35); overflow: hidden; text-align: left; transition: filter 0.2s, transform 0.2s; }
html #titre .salle:hover, html #titre .salle:focus-visible { filter: brightness(1.12) saturate(1.1); transform: translateY(-3px); outline: none; }
html #titre .salle .lumiere { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 240, 180, 0.22), transparent 60%); pointer-events: none; }
html #titre .salle .plaque { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 14px 3px; background: var(--encre); color: var(--creme); border-radius: 0 0 10px 10px; font: 400 12px var(--chiffres); letter-spacing: 1px; white-space: nowrap; z-index: 2; }
html #titre .salle .plaque i { display: none; font-style: normal; }
html #titre .salle .etiquette { position: absolute; left: 12px; bottom: 12px; z-index: 30; display: flex; flex-direction: column; padding: 6px 14px 8px; background: var(--creme); border: 3px solid var(--encre); border-radius: 14px; box-shadow: 0 4px 0 var(--encre); transition: transform 0.15s; }
html #titre .salle:hover .etiquette { transform: translateY(-3px) rotate(-1deg); }
html #titre .salle .etiquette b { font: 700 clamp(17px, 1.9vw, 24px) / 1.1 var(--titres); }
html #titre .salle .etiquette small { color: var(--doux); font-size: 13px; }
html #titre .salle .pokes { position: absolute; inset: 0; pointer-events: none; }
html #titre .salle .poke { position: absolute; left: 0; bottom: 9%; background-repeat: no-repeat; image-rendering: pixelated; transform-origin: 50% 100%; }
/* Avant la première partie, les salles sont encore à construire. */
html #titre.nouveau .salle { filter: grayscale(1) brightness(0.45); cursor: default; }
html #titre.nouveau .salle:hover { transform: none; }
html #titre.nouveau .salle .etiquette, html #titre.nouveau .salle .pokes { display: none; }
html #titre.nouveau .salle::after { content: ""; position: absolute; left: -10%; right: -10%; top: 42%; height: 30px; background: repeating-linear-gradient(-45deg, #FFCB05 0 18px, #1C1B2E 18px 36px); transform: rotate(-6deg); border-block: 3px solid var(--encre); }
html #titre.nouveau .salle .plaque i { display: inline; }
html #titre .salle.hantee { display: none; grid-column: 1 / -1; aspect-ratio: 2240 / 320; background-color: #7B4FC4; background-blend-mode: multiply; background-size: auto 100%; background-repeat: repeat-x; }
html #titre.halloween .salle.hantee { display: block; }
html #titre .salle.hantee .etiquette { background: var(--bleu); color: var(--blanc); }
html #titre .salle.hantee .etiquette small { color: var(--creme); }

/* ---------- Le fond de la coupe ---------- */
html #titre .fond { position: relative; padding: 30px 16px 26px; background: linear-gradient(180deg, var(--terre-3), var(--roche) 50%); text-align: center; color: #d9c9b6; }
html #titre .fossiles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.35; }
html #titre .btn-soutien { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 18px 8px 8px; background: var(--jaune); border: 3px solid var(--encre); border-radius: 30px; box-shadow: 0 5px 0 var(--encre); font: 700 17px var(--titres); color: var(--encre); }
html #titre .btn-soutien[hidden] { display: none; }
html #titre .btn-soutien i { width: 34px; height: 34px; border: 3px solid var(--encre); border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, var(--encre) 3px 6px, transparent 6px), linear-gradient(180deg, #F2BC00 0 44%, var(--encre) 44% 56%, #fff 56%); }
html #titre .fond .liens { position: relative; margin-top: 16px; font-size: 12px; line-height: 1.6; }
html #titre .fond a, html #titre .fond .lien { color: #fff1d6; }
html #titre .fond .lien { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; font-size: 12px; text-decoration: underline; }
html #titre .tableau-mobile { display: none; position: relative; left: auto; width: min(420px, 92vw); margin: 0 auto 24px; bottom: auto; transform: none; }
html #titre .tableau-mobile::after { display: none; }

/* ---------- L'entrée : la porte roule, la lumière jaillit, on plonge dedans ; le jeu apparaît dans la lumière ---------- */
#rideau-entree { position: fixed; inset: 0; z-index: 50; background: #fffbe6; opacity: 0; pointer-events: none; transition: opacity 0.5s 2.5s; }
#rideau-entree.visible { opacity: 1; pointer-events: auto; }
#rideau-entree:not(.visible) { transition: opacity 0.6s; }
html #titre:not(.entree) .colline, html #titre:not(.entree) .porte .disque, html #titre:not(.entree) .porte .ouverture, html #titre:not(.entree) .porte .rayons,
html #titre:not(.entree) .porte .tranche, html #titre:not(.entree) .porte .lampes, html #titre:not(.entree) .abri, html #titre:not(.entree) .sol { transition-delay: 0s; }

/* ---------- Téléphone ---------- */
@media (max-width: 900px) {
  /* Sur téléphone, la colline est moins zoomée : le ciel au-dessus accueille la carte du dresseur. */
  html #titre { --haut: 470px; --largeur-colline: max(100vw, 880px); }
  html #titre #btn-entrer { padding: 5px 14px 6px; }
  html #titre #btn-entrer b { font-size: 20px; }
  html #titre #btn-entrer small { font-size: 11px; }
  html #titre .badge-dresseur { left: 10px; right: 10px; top: 10px; gap: 6px; padding: 4px 6px 4px 4px; }
  html #titre .badge-dresseur img { width: 40px; height: 40px; }
  html #titre .badge-dresseur .qui { flex: 1; }
  html #titre .badge-dresseur .qui b { font-size: 16px; }
  html #titre .badge-dresseur .qui small { font-size: 11px; }
  html #titre .badge-dresseur .bouton-rond { min-width: 30px; height: 30px; padding: 0 6px; font-size: 12px; }
  html #titre .colline .tableau { display: none; }
  html #titre .tableau-mobile { display: block; }
  html #titre .coupe { grid-template-columns: 34px 1fr; gap: 14px 0; }
  html #titre .puits { grid-column: 1; grid-row: 1 / span 7; margin: -18px 6px 0 0; }
  html #titre .salle, html #titre .salle.hantee { grid-column: 2; }
  html #titre .salle.hantee { aspect-ratio: 1120 / 320; background-size: cover; }
  html #titre .salle .etiquette { left: 8px; bottom: 8px; padding: 4px 10px 6px; border-radius: 12px; }
  html #titre .salle .etiquette b { font-size: 17px; }
  html #titre .salle .etiquette small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html #titre .ciel-etoiles, html #titre .chauves g, html #titre .porte .halo, html #titre #btn-entrer, html #titre .cabine { animation: none; }
}

/* Le tableau garde sa taille de panneau : le titre de l'annonce et sa première ligne, raccourcis. */
html #titre .tableau b.acc-annonce, html #titre .tableau .acc-lignes li { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
html #titre .tableau b.acc-annonce { -webkit-line-clamp: 2; }
html #titre .tableau .acc-lignes li { -webkit-line-clamp: 4; }
html #titre .tableau-mobile .acc-lignes li { -webkit-line-clamp: 6; }
/* La feuille du tableau s'écrit à l'encre, même posée dans le fond de l'abri (dont le texte est clair) : sur téléphone, elle était presque illisible. */
html #titre .tableau .feuille { color: var(--encre); }
html #titre .tableau .feuille small { color: var(--doux); }