/* ======================================================================
   JB IMMO — complements.css (panel MYDMC, lot D, 08.10.2026)
   Ce qui s'ajoute au site sans toucher à style.css : cartes AU CLIC et carte du site (Leaflet servi par le site, 09.10),
   bandeau d'annonce, bouton « Voir la vidéo » du haut de page, pied de page au standard MYDMC (Cookies, point
   secret avec l'œil), horaires jour par jour. Mêmes couleurs que style.css (noir, or, blanc).
   ====================================================================== */

/* ----- Bandeau d'annonce (panel : Pop-up & annonce) ----- */
.bandeau-annonce { background: var(--or); color: var(--noir); font-size: .88rem; font-weight: 600; text-align: center; padding: 8px 0; line-height: 1.4; }

/* ----- Carte au clic : invitation avant tout chargement ----- */
.carte-clic { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(circle at 30% 30%, rgba(201,162,76,.10), transparent 60%),
                repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px), var(--noir-soft); }
.carte-clic__invite { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; max-width: 360px; }
.carte-clic__icone { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center;
    background: rgba(201,162,76,.14); border: 1px solid var(--glass-border); color: var(--or); }
.carte-clic__icone svg, .carte-clic__icone .ico { width: 22px; height: 22px; }
.carte-clic__invite small { color: var(--gris); font-size: .8rem; line-height: 1.5; }
.carte-clic.is-chargee { display: block; background: var(--noir-soft); }
.carte-clic.is-chargee iframe { width: 100%; height: 100%; border: 0; display: block; }
.carte-clic__zone { width: 100%; height: 100%; }
.carte-chargement { padding: 40px; text-align: center; color: var(--gris); margin: 0; }

/* ----- Carte du site : Leaflet 1.9.4 servi par le site (09.10.2026), chargé au clic -----
   style.css garde la bulle sombre de l'ancien site (.leaflet-popup-*, .map-pop__*, .leaflet-marker-jb) ; ici
   seulement ce que la « carte maison » du lot D avait ajouté : bulle de la fiche, croix ronde, boutons + / − or au survol. */
.leaflet-container { font-family: var(--font-body); }
.leaflet-container a.map-pop__link { color: var(--noir); }
.leaflet-container a.map-pop__link:hover { color: var(--noir); text-decoration: none; }
.carte-bulle-fiche { padding: 12px 34px 12px 14px; font-size: .88rem; line-height: 1.45; color: var(--texte-clair); }
.carte-bulle-fiche strong { color: #fff; }
.leaflet-container a.leaflet-popup-close-button { top: 4px; right: 6px; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(10,10,10,.75); color: #fff; font: 1.15rem/28px var(--font-body); text-align: center; z-index: 2; }
.leaflet-container a.leaflet-popup-close-button:hover, .leaflet-container a.leaflet-popup-close-button:focus-visible { background: var(--or); color: var(--noir); }
.leaflet-bar a:hover, .leaflet-bar a:focus-visible { background: var(--or); color: var(--noir); }
.leaflet-container .leaflet-control-attribution { color: #222; }
.leaflet-container .leaflet-control-attribution a { color: #222; text-decoration: underline; }
.leaflet-marker-icon .leaflet-marker-jb { cursor: pointer; }

/* ----- Haut de page : vidéo YouTube / Vimeo au clic ----- */
.hero__video-btn { position: absolute; z-index: 3; right: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 48px); display: inline-flex;
    align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; cursor: pointer; text-align: left;
    background: rgba(10,10,10,.72); border: 1px solid var(--glass-border); color: #fff; font: inherit;
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.hero__video-btn:hover, .hero__video-btn:focus-visible { border-color: var(--or); }
.hero__video-btn-rond { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--or); flex-shrink: 0; }
.hero__video-btn-rond .play-tri { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -4px; width: 0; height: 0;
    border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--noir); }
.hero__video-btn-texte { display: flex; flex-direction: column; font-weight: 600; font-size: .95rem; }
.hero__video-btn-texte small { font-weight: 400; font-size: .74rem; color: #d9d9d9; }

/* ----- Pages éditoriales (mentions, confidentialité…) : filet de sécurité (09.10.2026, décision de David) -----
   Un texte collé depuis un traitement de texte peut porter « font-family: Times » dans ses balises. Ici, la police
   du site gagne TOUJOURS : texte = police du site (Inter), titres = police des titres (comme style.css). Les icônes
   (Font Awesome, classes « fa… ») gardent la leur. */
.legal *:not([class*="fa"]) { font-family: var(--font-body) !important; }
.legal :is(h1, h2, h3, h4, h5, h6):not([class*="fa"]), .legal :is(h1, h2, h3, h4, h5, h6) *:not([class*="fa"]) { font-family: 'Playfair Display', Georgia, serif !important; }

/* ----- Pied de page au standard MYDMC ----- */
.footer__cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.footer__cookies:hover, .footer__cookies:focus-visible { color: var(--or); }
.footer__coeur { font-style: normal; }
/* « With 🤍 by MYDMC » : le gris d'origine (#6f6f6f, 3,9:1 sur le noir du pied) n'était pas assez lisible. */
.footer__credit { color: #a3a3a3; }
.footer__admin { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 18px; height: 18px; line-height: 1; }
.footer__admin-point { width: 6px; height: 6px; border-radius: 50%; background: var(--or); opacity: .45; transition: opacity .3s ease; }
.footer__admin-oeil { position: absolute; inset: 0; width: 18px; height: 18px; fill: none; stroke: var(--or); stroke-width: 2; opacity: 0; transition: opacity .3s ease; }
.footer__admin:hover .footer__admin-point, .footer__admin:focus-visible .footer__admin-point { opacity: 0; }
.footer__admin:hover .footer__admin-oeil, .footer__admin:focus-visible .footer__admin-oeil { opacity: 1; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__text .cookie-banner__fort { display: inline; font-size: inherit; margin: 0; color: #fff; }

/* ----- Contact : horaires jour par jour, fermetures ----- */
.horaires-jours { margin: 8px 0 0; display: grid; gap: 4px; font-size: .9rem; }
.horaires-jours div { display: flex; gap: 12px; justify-content: space-between; max-width: 340px; }
.horaires-jours dt { color: var(--gris); }
.horaires-jours dd { margin: 0; color: var(--texte-clair); }
.horaires-fermeture { margin: 8px 0 0; color: var(--or); font-size: .9rem; font-weight: 600; }

@media (max-width: 640px) {
    .hero__video-btn { left: 16px; right: 16px; bottom: 16px; }
    .footer__legal { flex-wrap: wrap; justify-content: center; }
}

/* ── Protection des formulaires (09.10.2026, standard MYDMC §2.0) ──────────────────────────────────────────────
   Widget Cloudflare Turnstile (chargé au premier clic / à la première saisie) et question « a + b » de SECOURS :
   « hidden » doit l'emporter sur le display:flex de .form-field. */
[data-pf-secours][hidden], .pf-turnstile[hidden] { display: none !important; }
.form-grid > .pf-turnstile { grid-column: 1 / -1; }
.pf-turnstile { min-height: 65px; margin: 4px 0 14px; max-width: 100%; }
.sidebar-card .pf-turnstile { margin: 0 0 14px; }

/* Bandeau d'information sur téléphone (09.10.2026) : en colonne, « flex: 1 1 380px » du site réservait 380 px de HAUT
   au texte (vide d'environ 300 px avant « Compris »). Le texte prend sa hauteur naturelle. */
@media (max-width: 640px) { .cookie-banner__text { flex: 0 1 auto; } }