/** * L'Aire Bête — Boutons de liens unifiés au style Retour (v1.48.27) * * Consigne Johanne : tous les boutons de liens du frontend doivent avoir * l'apparence des boutons "Retour" (noir 55% + cadre crème + Georgia * crème, rounded 22px). Ce fichier est chargé en dernier pour gagner * la cascade ; `!important` est utilisé sur les propriétés visuelles * pour neutraliser les overrides spécifiques de chaque module. * * Les propriétés de layout (position, top/left/width/height, z-index) * NE sont pas touchées — chaque bouton conserve son emplacement. * * Référence : .lb-pavillon-back (pavillon-bg.css v1.43.91) * background : rgba(0, 0, 0, 0.55) * border : 2px solid rgba(244, 220, 174, 0.5) * color : #f4dcae * font : 700 0.95rem Georgia, "Times New Roman", serif * padding : 8px 18px * radius : 22px * shadow : 0 4px 12px rgba(0, 0, 0, 0.32) * * @package LaireBete */ /* État de base — tous les link-boutons frontend */ .lb-pavillon-back, .lb-passerelle__back, .lb-passerelle__shop, .lb-boutique-interior__back, .lb-boutique-interieur__back, .lb-facade-overlay__back, .lb-facade-overlay__enter, .lb-door-cta, .lb-pavillon-interieur__btn, .lb-pavillon-interieur__back, .lb-pavillon-shops__back, .lb-shop-back, .lb-shop-card__cta, .lb-produit-card__cta, .lb-exterior-building-cta, .lb-annonce-detail__retour, .lb-annonce-detail__retour a, .lb-bouton-grave, .lb-bouton-grave--primary, .lb-panneau__cat-link, .lb-coin-panel__back, .lb-coin__filter-btn, .lb-coin__detail-add-btn, .lb-wi-dialog__btn, .lb-btn-reserver, .lb-shop-sign--button, .lb-pavillon-content a { background: rgba(0, 0, 0, 0.55) !important; border: 2px solid rgba(244, 220, 174, 0.5) !important; color: #f4dcae !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 0.95rem !important; font-weight: 700 !important; text-decoration: none !important; padding: 8px 18px !important; border-radius: 22px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32) !important; cursor: pointer !important; text-shadow: none !important; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important; } /* État hover / focus */ .lb-pavillon-back:hover, .lb-pavillon-back:focus-visible, .lb-passerelle__back:hover, .lb-passerelle__back:focus-visible, .lb-passerelle__shop:hover, .lb-passerelle__shop:focus-visible, .lb-boutique-interior__back:hover, .lb-boutique-interior__back:focus-visible, .lb-boutique-interieur__back:hover, .lb-boutique-interieur__back:focus-visible, .lb-facade-overlay__back:hover, .lb-facade-overlay__back:focus-visible, .lb-facade-overlay__enter:hover, .lb-facade-overlay__enter:focus-visible, .lb-door-cta:hover, .lb-door-cta:focus-visible, .lb-pavillon-interieur__btn:hover, .lb-pavillon-interieur__btn:focus-visible, .lb-pavillon-interieur__back:hover, .lb-pavillon-interieur__back:focus-visible, .lb-pavillon-shops__back:hover, .lb-pavillon-shops__back:focus-visible, .lb-shop-back:hover, .lb-shop-back:focus-visible, .lb-shop-card__cta:hover, .lb-shop-card__cta:focus-visible, .lb-produit-card__cta:hover, .lb-produit-card__cta:focus-visible, .lb-exterior-building-cta:hover, .lb-exterior-building-cta:focus-visible, .lb-annonce-detail__retour a:hover, .lb-annonce-detail__retour a:focus-visible, .lb-bouton-grave:hover, .lb-bouton-grave:focus-visible, .lb-bouton-grave--primary:hover, .lb-bouton-grave--primary:focus-visible, .lb-panneau__cat-link:hover, .lb-panneau__cat-link:focus-visible, .lb-coin-panel__back:hover, .lb-coin-panel__back:focus-visible, .lb-coin__filter-btn:hover, .lb-coin__filter-btn:focus-visible, .lb-coin__detail-add-btn:hover, .lb-coin__detail-add-btn:focus-visible, .lb-wi-dialog__btn:hover, .lb-wi-dialog__btn:focus-visible, .lb-btn-reserver:not(:disabled):hover, .lb-btn-reserver:not(:disabled):focus-visible, .lb-shop-sign--button:hover, .lb-shop-sign--button:focus-visible, .lb-pavillon-content a:hover, .lb-pavillon-content a:focus-visible { /* v1.49.4 — Pattern unifié site-wide : luminosité dorée uniquement, sans zoom */ background: transparent !important; transform: none !important; box-shadow: none !important; filter: drop-shadow(0 8px 24px rgba(255, 215, 100, 0.65)) !important; color: #f4dcae !important; text-decoration: none !important; outline: none !important; } /* Focus-visible : outline crème en plus */ .lb-pavillon-back:focus-visible, .lb-passerelle__back:focus-visible, .lb-passerelle__shop:focus-visible, .lb-boutique-interior__back:focus-visible, .lb-boutique-interieur__back:focus-visible, .lb-facade-overlay__back:focus-visible, .lb-facade-overlay__enter:focus-visible, .lb-door-cta:focus-visible, .lb-pavillon-interieur__btn:focus-visible, .lb-pavillon-interieur__back:focus-visible, .lb-pavillon-shops__back:focus-visible, .lb-shop-back:focus-visible, .lb-shop-card__cta:focus-visible, .lb-produit-card__cta:focus-visible, .lb-exterior-building-cta:focus-visible, .lb-annonce-detail__retour a:focus-visible, .lb-bouton-grave:focus-visible, .lb-bouton-grave--primary:focus-visible, .lb-panneau__cat-link:focus-visible, .lb-coin-panel__back:focus-visible, .lb-coin__filter-btn:focus-visible, .lb-coin__detail-add-btn:focus-visible, .lb-wi-dialog__btn:focus-visible, .lb-btn-reserver:not(:disabled):focus-visible, .lb-shop-sign--button:focus-visible, .lb-pavillon-content a:focus-visible { outline: 2px solid #f4dcae !important; outline-offset: 2px !important; } /* État actif d'un toggle de filtre — légèrement plus contrasté */ .lb-coin__filter-btn.is-active { background: rgba(244, 220, 174, 0.35) !important; color: #f4dcae !important; } /* v1.48.62 — Boutons positionnés absolute avec centrage translateX(-50%) : on doit RÉ-ajouter ce translateX dans le hover unifié (sinon le scale écrase le centrage et le bouton saute à gauche). */ .lb-facade-overlay__enter, .lb-facade-overlay__enter:hover, .lb-facade-overlay__enter:focus-visible { transform: translateX(-50%) !important; } /* v1.49.4 — scale retiré pour pattern unifié, translateX(-50%) déjà géré au-dessus */ /* État "ajouté" du bouton panier coin — feedback positif sans changer radicalement la palette : on bascule sur un vert sombre lisible. */ .lb-coin__detail-add-btn.is-added { background: rgba(60, 110, 70, 0.65) !important; border-color: rgba(180, 220, 180, 0.55) !important; color: #e8f5e8 !important; } /* État disabled — opacité réduite, plus de transform */ .lb-btn-reserver:disabled, .lb-pavillon-interieur__btn:disabled, .lb-pavillon-interieur__btn[disabled] { opacity: 0.4 !important; cursor: not-allowed !important; transform: none !important; } /* ================================================================== * v1.49.7 — Pancarte bois Pixar 3D (non cliquable) * Usage : Ouverture bientôt * * Police : Cinzel pour Latin (cosy serif majuscules) + Noto Sans fallbacks * pour les scripts non-latins (ru/ar/zh/ja/ko) — pas de tofu sur 11 langues. * * Style : planche bois épaisse avec grain vertical, bevel haut/bas, * ombre portée, texte gravé crème. * ================================================================== */ .lb-btn-wood { display: inline-block; padding: 0.35em 0.9em; font-family: "Cinzel", "Noto Sans", "Noto Sans Arabic", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", serif; /* v1.49.17 — Poids black (900) pour gravure plus marquée */ font-weight: 900; font-size: clamp(0.65rem, 0.8vw, 0.95rem); letter-spacing: 0.05em; /* v1.49.17 — Texte très foncé + double ombre (highlight clair en bas + sombre en haut) pour effet gravé contrastant sur le bois. */ color: #1a0a02; text-align: center; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 250, 220, 0.85), 0 -1px 0 rgba(40, 18, 4, 0.5), 0 2px 3px rgba(40, 18, 4, 0.35); cursor: default; user-select: none; /* v1.49.12 — Cadre bois épais avec panneau intérieur embossé */ border: 5px solid #6b4220; border-radius: 0; /* v1.49.13 — Grain bois HORIZONTAL (lignes du veinage parallèles au côté long du panneau) + base légèrement plus foncée. */ background-image: /* Fines lignes sombres du grain bois */ repeating-linear-gradient(2deg, rgba(80, 45, 15, 0) 0px, rgba(80, 45, 15, 0.22) 1px, rgba(80, 45, 15, 0) 3px, rgba(80, 45, 15, 0) 8px), /* Bandes plus larges, plus douces (variation du grain) */ repeating-linear-gradient(178deg, rgba(130, 80, 35, 0) 0px, rgba(130, 80, 35, 0.14) 3px, rgba(130, 80, 35, 0) 7px, rgba(130, 80, 35, 0) 16px), /* Base bois plus foncée que v1.49.10 */ linear-gradient(180deg, #d8b888 0%, #c4a070 50%, #a8855a 100%); /* v1.49.12 — Emboss : trait sombre net interne + ombre du cadre projetée sur l'intérieur (recessed) + highlight bas pour le relief. */ box-shadow: inset 0 0 0 1px rgba(40, 20, 5, 0.55), inset 0 3px 5px rgba(60, 30, 10, 0.35), inset 0 -2px 3px rgba(255, 245, 210, 0.45), inset 2px 0 4px rgba(60, 30, 10, 0.2), inset -2px 0 4px rgba(60, 30, 10, 0.2), 0 3px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); transition: none; } /* Wrapper sign sur place du marché : centre la pancarte + remplit le bbox DnD */ .lb-pm-element--sign { display: flex; align-items: center; justify-content: center; pointer-events: auto; /* permet le drag en mode édition */ /* v1.49.16 — Perspective 3D restaurée comme au début (v1.49.9). */ perspective: 800px; transform-style: preserve-3d; /* v1.49.18 — Recul derrière les autres pm-elements (kiosque z:4, distributrice z:4, construction z:4). z:3 = sous construction. */ z-index: 3 !important; } /* v1.49.20 — Les pancartes « À louer » au PREMIER plan (au-dessus de construction z:4, kiosque z:4, distributrice z:4). */ .lb-pm-element--a-louer-1, .lb-pm-element--a-louer-2, .lb-pm-element--a-louer-3 { z-index: 5 !important; } .lb-pm-element--sign .lb-btn-wood { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; /* v1.49.16 — Rotation 3D 2 axes restaurée (rotateX = tilt haut/bas, rotateY = tilt gauche/droite). Avec perspective(800px) du wrapper, le tilt est expressif. Garde les angles raisonnables (<30°) pour éviter le foreshortening excessif. */ transform: rotateX(var(--lb-rx, 0deg)) rotateY(var(--lb-ry, 0deg)); transform-origin: center center; } /* v1.49.9 — Panneau de rotation 4 flèches (mode édition place-marche). Apparaît sur chaque sign en mode édition. */ .lb-pm-edit__rotate-panel { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); z-index: 30; display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 22px); gap: 2px; pointer-events: auto; } .lb-pm-edit__rotate { background: rgba(20, 12, 4, 0.85); border: 1px solid rgba(244, 220, 174, 0.6); color: #f4dcae; font: 700 0.85rem Georgia, serif; border-radius: 4px; cursor: pointer; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .lb-pm-edit__rotate:hover { background: rgba(60, 35, 15, 0.95); } .lb-pm-edit__rotate[data-rotate="up"] { grid-column: 2; grid-row: 1; } .lb-pm-edit__rotate[data-rotate="left"] { grid-column: 1; grid-row: 2; } .lb-pm-edit__rotate[data-rotate="reset"] { grid-column: 2; grid-row: 2; font-size: 0.95rem; } .lb-pm-edit__rotate[data-rotate="right"] { grid-column: 3; grid-row: 2; } .lb-pm-edit__rotate[data-rotate="down"] { grid-column: 2; grid-row: 3; } /* Non cliquable : ignore hover/focus (pas de luminosité dorée). */ .lb-btn-wood:hover, .lb-btn-wood:focus, .lb-btn-wood:focus-visible, .lb-btn-wood:active { filter: none !important; transform: rotateX(var(--lb-rx, 0deg)) rotateY(var(--lb-ry, 0deg)) !important; box-shadow: inset 0 0 0 1px rgba(40, 20, 5, 0.55), inset 0 3px 5px rgba(60, 30, 10, 0.35), inset 0 -2px 3px rgba(255, 245, 210, 0.45), inset 2px 0 4px rgba(60, 30, 10, 0.2), inset -2px 0 4px rgba(60, 30, 10, 0.2), 0 3px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25) !important; outline: none !important; }