/* =========================================================================
   Fiche salle et fiche enseigne, refondues — 2.137.0, 26 septembre 2026.

   Chargée avec eg-ap.css sur ?apercu=1, et pour tout le monde quand
   eg_refonte_salle / eg_refonte_enseigne vaut 1.

   Le HTML est celui d'aujourd'hui, sans une modification (refonte/fiche.php
   reprend eg-fiche.php et ses template-parts tels quels). Cette feuille ne
   fait que deux choses :
     1. habiller dans le langage de l'accueil — héros, pastilles, titres ;
     2. changer l'ORDRE VISUEL des blocs, par flex « order », dans le même
        HTML : sur la salle, notre test remonte en premier. La colonne de
        droite (réserver, gérant, lettre) reste à droite (2.143.1). Les
        moteurs lisent l'ordre du HTML, inchangé.

   Rien n'est masqué. Une règle qui cache un bloc serait une suppression.
   ========================================================================= */

.ap-fiche { background: var(--ap-papier); }

/* ---------- Le héros : même photo, même contenu, moins de bruit ---------- */
.ap-fiche .eg-fi__hero { background: var(--ap-encre); }
.ap-fiche .eg-fi__hero-in { padding-top: 48px; padding-bottom: 40px; }
.ap-fiche .eg-fi__fil { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.ap-fiche .eg-fi__fil a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.ap-fiche .eg-fi__fil a:hover { color: var(--ap-lampe); }
.ap-fiche .eg-fi__dossier { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 300; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--ap-lampe); }
.ap-fiche .eg-fi__dossier i { display: none; }
.ap-fiche .eg-fi__h1 { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 300; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.005em; color: #fff; text-transform: none; }
.ap-fiche .eg-fi__h1 em { font-style: normal; color: var(--ap-lampe); }
.ap-fiche .eg-fi__ens { font-size: 17px; color: rgba(255, 255, 255, .78); }
.ap-fiche .eg-fi__ens a { color: var(--ap-lampe); }

/* Les pastilles de faits : joueurs, durée, prix, niveau, âge — ou salles,
   joueurs, prix, testées, horaires. Même contenu, en tuiles lisibles. */
.ap-fiche .eg-fi__tickets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ap-fiche .eg-fi__ticket { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .88); font-size: 14.5px; }
.ap-fiche .eg-fi__ticket b { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 400; font-size: 15px; color: #fff; }
.ap-fiche .eg-fi__ticket svg { color: var(--ap-lampe); }

.ap-fiche .eg-fi__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ap-fiche .eg-fi__go { background: var(--ap-lampe); color: var(--ap-encre); font-family: var(--eg-display, Oswald), sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 15px 28px; border: 0; border-radius: 0; box-shadow: 0 5px 0 var(--ap-chaud); text-decoration: none; }
.ap-fiche .eg-fi__go:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ap-chaud); color: var(--ap-encre); }
.ap-fiche .eg-fi__ghost { background: transparent; color: #fff; font-family: var(--eg-display, Oswald), sans-serif; font-weight: 500; font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; padding: 13px 22px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); text-decoration: none; }
.ap-fiche .eg-fi__ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ap-lampe); color: var(--ap-lampe); }

/* La note de l'équipe, en tampon or ; l'avis des joueurs, en encre. */
.ap-fiche .eg-fi__tampon { background: var(--ap-lampe); color: var(--ap-encre); border: 0; border-radius: var(--ap-r); box-shadow: none; transform: none; }
.ap-fiche .eg-fi__tampon b { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 300; }
.ap-fiche .eg-fi__tampon--rouge { background: rgba(255, 255, 255, .08); color: #fff; }
.ap-fiche .eg-fi__tampon--vide { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); }
.ap-fiche .eg-fi__avisj { color: var(--ap-lampe); }
.ap-fiche .eg-fi__logo { border-radius: 20px; background: #fff; }
.ap-fiche .eg-fe__gerer { border-radius: 14px; }
.ap-fiche .eg-fi__ferme { border-radius: 14px; }

/* ---------- Le sommaire collant : réserver reste à portée ---------- */
.ap-fiche .eg-fe__somm { background: #fff; border-bottom: 1px solid var(--ap-fil); }
.ap-fiche .eg-fe__somm a { font-family: var(--eg-display, Oswald), sans-serif; font-size: 14.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ap-txt2); }
.ap-fiche .eg-fe__somm a:hover { color: var(--ap-encre); }
.ap-fiche .eg-fe__somm-resa { background: var(--ap-lampe) !important; color: var(--ap-encre) !important; box-shadow: 0 4px 0 var(--ap-chaud); border-radius: 0; padding: 11px 22px; }

/* ---------- Le corps : deux colonnes, comme avant la refonte ----------
   2.143.1, 29 septembre 2026. La refonte du 27 empilait tout sur une colonne
   de 980 px et descendait la colonne de droite sous le corps. Retour de
   François : « il n'y a plus de blocs sur la droite, tout est passé en
   dessous », « c'est décalé, surtout sur les derniers blocs ». Mesuré : le
   corps faisait 980 px entre un en-tête et un bas de page de 1 180 px, et la
   colonne descendue n'occupait que la moitié de la largeur.

   La grille d'origine (eg-fiche.css : 1fr + 350 px, 1 180 px de large) reprend
   donc la main. Cette feuille ne garde que l'ordre des sections de la salle
   et l'alignement du haut de la colonne sur le premier titre. */
.ap-fiche .eg-fi__col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ap-fiche .eg-fi__aside { margin-top: 40px; align-content: start; min-width: 0; }
.ap-fiche .eg-fi__aside > * { min-width: 0; max-width: 100%; }

/* Sur la salle : notre test d'abord — c'est le seul contenu que le site
   est seul à avoir. Les autres sections gardent leur ordre. */
.ap-fiche.eg-fi--salle #rapport { order: -2; }
.ap-fiche.eg-fi--salle #jeu { order: -1; }

.ap-fiche .eg-fe__sec { padding: 40px 0 0; }
.ap-fiche .eg-fi__h2,
.ap-fiche .eg-fe__h2 { font-family: var(--eg-display, Oswald), sans-serif; font-weight: 300; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; color: var(--ap-encre); margin: 0 0 18px; }
.ap-fiche .eg-fi__h2 small,
.ap-fiche .eg-fe__h2 small { font-family: var(--eg-body, Karla), sans-serif; font-size: 15px; color: var(--ap-txt3); letter-spacing: 0; text-transform: none; }

/* Les cartes des autres salles, les tuiles, les cadres : la même forme. */
.ap-fiche .eg-fs__autre,
.ap-fiche .eg-fi__next a { border-radius: var(--ap-r); overflow: hidden; }
.ap-fiche .eg-fi__aside > * { border-radius: var(--ap-r); }
.ap-fiche .eg-fi__bas { padding-top: 40px; }

@media (max-width: 680px) {
	.ap-fiche .eg-fi__hero-in { padding-top: 32px; padding-bottom: 28px; }
	.ap-fiche .eg-fe__sec { padding-top: 30px; }
}

/* Sous 900 px la grille d'origine passe à une colonne, et la colonne de
   droite suit le corps. 2.143.2 : sauf le code promo. Il arrivait tout en bas
   de page, après 6 500 px sur une salle ; il remonte en tête du corps, avec
   le lien vers ses conditions. Pour cela la colonne de droite s'efface
   (display: contents) et ses blocs se rangent dans la grille du corps.
   Rien n'est masqué, rien n'est écrit deux fois : seul l'ordre visuel change. */
@media (max-width: 900px) {
	.ap-fiche .eg-fi__aside { display: contents; }
	.ap-fiche .eg-fi__corps > .eg-fi__col { order: 2; }
	.ap-fiche .eg-fi__aside > * { order: 3; }
	.ap-fiche .eg-fi__aside > .eg-fi__promo,
	.ap-fiche .eg-fi__aside > .eg-fi__promo + .eg-fi__lien-promo { order: 1; }
	.ap-fiche .eg-fi__aside > .eg-fi__promo + .eg-fi__lien-promo { margin-top: -14px; }
}

/* Le fond du héros d'une enseigne est souvent son logo, étiré sur toute la
   largeur — « ESCAPE LAB » en lettres de deux mètres. On le garde, mais en
   texture : très assombri, un peu flou. Le logo net, lui, est à droite. */
.ap-fiche.eg-fi--enseigne .eg-fi__bg { opacity: .22; filter: blur(2px) saturate(.6); }