/* ==========================================
   EFFET « VERRE DRY » (toutes les pages)
   1. Bandeau de navigation en haut de page
   2. Tous les boutons du site : verre fumé sans contour ni liseré, halo de couleur au survol
   Chargé en dernier dans le <head> pour passer devant style.css et les styles propres aux pages.
   ========================================== */
:root {
    --dry-bg: linear-gradient(180deg, rgba(22, 22, 30, .42) 0%, rgba(8, 8, 12, .32) 100%);
    --dry-blur: blur(22px) saturate(190%);
    --dry-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .25);
    --c-blue: 31, 182, 255;
    --c-red: 255, 45, 85;
    --c-green: 48, 255, 102;
    --c-purple: 114, 31, 255;
    --c-white: 245, 245, 247;
}

/* ---------- 1. BANDEAU ---------- */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
    padding: calc(clamp(8px, 1.4vw, 16px) + env(safe-area-inset-top, 0px)) max(clamp(10px, 3vw, 40px), env(safe-area-inset-right, 0px)) 0 max(clamp(10px, 3vw, 40px), env(safe-area-inset-left, 0px));
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
    pointer-events: none;
}
.topbar.is-hidden { transform: translateY(-140%); opacity: 0; }
.topbar-screen {
    pointer-events: auto; position: relative;
    width: min(100%, 1240px); margin: 0 auto;
    height: clamp(52px, 4.6vw, 64px);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 clamp(10px, 1.6vw, 22px);
    border: none; border-radius: 999px;
    background: var(--dry-bg);
    -webkit-backdrop-filter: var(--dry-blur); backdrop-filter: var(--dry-blur);
    box-shadow: var(--dry-shadow);
}
.topbar-logo { justify-self: start; display: block; width: clamp(34px, 3vw, 42px); height: clamp(34px, 3vw, 42px); }
.topbar-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(var(--c-green), .55)); transition: transform .3s ease, filter .3s ease; }
.topbar-logo:hover img { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(var(--c-green), .8)); }
.topbar-nav { justify-self: center; display: flex; align-items: center; gap: clamp(4px, 1.4vw, 22px); }
.topbar-link {
    --c: var(--c-white);
    font-family: var(--font-tech, 'Space Grotesk', sans-serif); font-weight: 600;
    font-size: clamp(.72rem, .85vw, .86rem); letter-spacing: clamp(1.2px, .18vw, 2.4px); line-height: 1;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    color: rgba(var(--c), .92);
    padding: clamp(9px, .9vw, 12px) clamp(12px, 1.3vw, 20px);
    border: none; border-radius: 999px;
    text-shadow: 0 0 12px rgba(var(--c), .45);
    transition: background .3s ease, box-shadow .3s ease, color .3s ease, text-shadow .3s ease;
}
.topbar-link:hover, .topbar-link:focus-visible {
    color: #fff; outline: none;
    background: radial-gradient(120% 140% at 50% 0%, rgba(var(--c), .34) 0%, rgba(var(--c), .12) 70%);
    box-shadow: 0 0 18px rgba(var(--c), .35), 0 0 40px rgba(var(--c), .15);
    text-shadow: 0 0 10px rgba(var(--c), .9);
}
.topbar-link.tb-tournages { --c: var(--c-red); color: rgb(var(--c-red)); }
.topbar-link.tb-studio { --c: var(--c-blue); color: rgb(var(--c-blue)); }
.topbar-link.tb-soft { color: rgba(var(--c-white), .6); text-shadow: none; }
.topbar-link.tb-soft:hover, .topbar-link.tb-soft:focus-visible { --c: var(--c-green); }
.topbar-link.tb-tournages:hover, .topbar-link.tb-studio:hover { color: #fff; }
.topbar-langs { justify-self: end; display: flex; align-items: center; }
.topbar-langs .lang-switcher { position: static; transform: none; opacity: .85; padding: 0; gap: 6px; }
.topbar-langs .lang-switcher:hover { opacity: 1; }
.topbar-langs .lang-flag { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
    .topbar-langs .lang-flag:not(.active) { margin-left: -32px; }
    .topbar-langs .lang-switcher:hover .lang-flag:not(.active),
    .topbar-langs .lang-switcher:focus-within .lang-flag:not(.active) { margin-left: 0; }
}
.topbar-burger { display: none; justify-self: end; font-family: var(--font-tech, 'Space Grotesk', sans-serif); font-size: 1.3rem; line-height: 1;
    color: rgba(var(--c-white), .85); background: transparent; border: none; border-radius: 999px; padding: 8px 10px; }
.topbar-burger:hover { background: rgba(var(--c-white), .08); }
.topbar-drawer { display: none; }
@media (max-width: 760px) {
    .topbar-screen { height: 52px; padding: 0 8px 0 10px; }
    .topbar-nav { gap: 2px; }
    .topbar-link { font-size: .72rem; letter-spacing: 1.4px; padding: 10px 11px; }
    .topbar-link.tb-soft, .topbar-screen > .topbar-langs { display: none; }
    .topbar-burger { display: block; }
    .topbar-drawer.open {
        display: grid; justify-items: center; gap: 6px; pointer-events: auto;
        width: min(100%, 1240px); margin: 8px auto 0; padding: 14px; border-radius: 24px;
        background: linear-gradient(180deg, rgba(22, 22, 30, .6) 0%, rgba(8, 8, 12, .55) 100%);
        -webkit-backdrop-filter: var(--dry-blur); backdrop-filter: var(--dry-blur);
        box-shadow: var(--dry-shadow);
    }
    .topbar-drawer .topbar-link { font-size: .85rem; }
    .topbar-drawer .topbar-langs { justify-self: center; margin-top: 4px; }
}

/* Place réservée sous le bandeau (sauf l'accueil, dont l'intro plein écran passe dessous) */
body.has-topbar:not(.topbar-home) { padding-top: clamp(70px, 6.6vw, 90px); }
body.topbar-home .hero { padding-top: clamp(72px, 7vw, 100px); }
body.has-topbar .article-back-btn,
body.has-topbar .articles-back-btn { top: clamp(78px, 7vw, 98px); }
/* Les panneaux plein écran passent devant le bandeau */
.pf-panel, .focus-overlay { z-index: 100000; }

/* ---------- 2. BOUTONS « DRY » ----------
   Une seule recette : verre fumé, pas de bordure, ombre douce. Chaque bouton garde
   sa couleur de texte et prend un halo de sa couleur (--c) au survol. */
.square-media-btn, .gallery-sort-toggle, .gallery-return-btn, .back-to-top-btn,
.mini-nav-btn, .cta-btn-rdv, .cta-btn-devis, .heart-btn,
.article-back-btn, .articles-back-btn, .article-next-link, .article-cta-btn, .card-read,
.notfound-link, .pf-btn {
    border: none;
    background: var(--dry-bg);
    -webkit-backdrop-filter: var(--dry-blur); backdrop-filter: var(--dry-blur);
    box-shadow: var(--dry-shadow);
}
/* Filtres des pages portfolio : transparents au repos (choix validé), sans contour */
.pf-chip { border: none; background: transparent; box-shadow: none; }
.square-media-btn { border-radius: 22px; }

/* Couleur de halo de chaque bouton */
.square-media-btn.btn-red, .mini-nav-btn.mini-nav-tournages, .heart-btn { --c: var(--c-red); }
.square-media-btn.btn-blue, .mini-nav-btn.mini-nav-studio { --c: var(--c-blue); }
.gallery-sort-toggle, .gallery-return-btn, .back-to-top-btn, .cta-btn-rdv, .article-cta-btn-rdv,
.articles-back-btn, .card-read, .notfound-link, .pf-btn.pf-green { --c: var(--c-green); }
.mini-nav-btn.mini-nav-top, .article-back-btn, .article-next-link { --c: var(--c-purple); }
.mini-nav-btn.mini-nav-articles, .mini-nav-btn.mini-nav-infos, .cta-btn-devis, .article-cta-btn-devis, .pf-btn { --c: var(--c-white); }
.pf-page .pf-btn:not(.pf-green), .pf-page .pf-chip { --c: var(--pf-accent-rgb); }

.square-media-btn:hover, .gallery-sort-toggle:hover, .gallery-return-btn:hover, .back-to-top-btn:hover,
.mini-nav-btn:hover, .cta-btn-rdv:hover, .cta-btn-devis:hover, .heart-btn:hover,
.article-back-btn:hover, .articles-back-btn:hover, .article-next-link:hover, .article-cta-btn:hover,
a:hover .card-read, .notfound-link:hover, .pf-btn:hover, .pf-chip:hover {
    border: none;
    background: radial-gradient(120% 140% at 50% 0%, rgba(var(--c), .34) 0%, rgba(var(--c), .1) 70%);
    box-shadow: 0 0 22px rgba(var(--c), .4), 0 0 50px rgba(var(--c), .18);
}

/* Page Articles : « Lire le dossier » prend la couleur de sa rubrique (vert, violet, rouge, bleu),
   au repos comme au survol (règles aussi précises que celles de la page pour passer devant) */
.article-card .card-read, .article-card.purple .card-read, .article-card.red .card-read, .article-card.blue .card-read {
    border: none;
    background: var(--dry-bg);
    -webkit-backdrop-filter: var(--dry-blur); backdrop-filter: var(--dry-blur);
    box-shadow: var(--dry-shadow);
}
.article-card .card-read { --c: var(--c-green); }
.article-card.purple .card-read { --c: var(--c-purple); }
.article-card.red .card-read { --c: var(--c-red); }
.article-card.blue .card-read { --c: var(--c-blue); }
.article-card:hover .card-read, .article-card.purple:hover .card-read, .article-card.red:hover .card-read, .article-card.blue:hover .card-read {
    background: radial-gradient(120% 140% at 50% 0%, rgba(var(--c), .34) 0%, rgba(var(--c), .1) 70%);
    box-shadow: 0 0 22px rgba(var(--c), .4), 0 0 50px rgba(var(--c), .18);
}

/* Filtres des pages portfolio : verre fumé au repos, verre néon de la couleur du titre une fois choisi */
.pf-chip[aria-pressed="true"] {
    color: #fff;
    background: radial-gradient(120% 140% at 50% 0%, rgba(var(--pf-accent-rgb), .42) 0%, rgba(var(--pf-accent-rgb), .16) 70%);
    box-shadow: 0 0 14px rgba(var(--pf-accent-rgb), .6), 0 0 34px rgba(var(--pf-accent-rgb), .3);
    text-shadow: 0 0 10px rgba(var(--pf-accent-rgb), .9);
}

/* Le pouls lumineux du mini-footer : un halo seul, sans bordure */
@keyframes navPulseDry {
    0%, 85%, 100% { box-shadow: var(--dry-shadow); }
    92% { box-shadow: var(--dry-shadow), 0 0 18px var(--nav-pulse-color); }
}
.mini-nav-btn.mini-nav-tournages, .mini-nav-btn.mini-nav-studio,
.mini-nav-btn.mini-nav-articles, .mini-nav-btn.mini-nav-top { animation-name: navPulseDry; }
.mini-nav-btn:hover { animation: none; }

/* Drapeaux : plus de cercle de contour, le drapeau actif est signalé par un halo vert */
.lang-flag { border: none; }
.lang-flag.active { box-shadow: 0 0 12px rgba(var(--c-green), .55); }

@media (prefers-reduced-motion: reduce) { .topbar, .topbar-link, .topbar-logo img { transition: none; } }

/* Liens légaux ajoutés en bas de chaque page par topbar.js */
.legal-links { position: relative; z-index: 5; margin: 0; padding: 22px 16px calc(26px + env(safe-area-inset-bottom, 0px)); text-align: center;
    font-family: var(--font-tech, 'Space Grotesk', sans-serif); font-size: .72rem; letter-spacing: .6px; color: rgba(245, 245, 247, .35); }
.legal-links a { color: rgba(245, 245, 247, .5); text-decoration: none; transition: color .2s ease; }
.legal-links a:hover { color: var(--neon-green, #30ff66); }

/* Bouton « OFFRES » : ouvre un petit menu (Catalogue IA en bleu, bientôt l'offre tournage en rouge) */
.tb-menu { position: relative; display: flex; }
.topbar-link.tb-offres { --c: var(--c-green); color: rgb(var(--c-green)); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.topbar-link.tb-offres::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.tb-menu.open .topbar-link.tb-offres, .topbar-link.tb-offres:hover { color: #fff; }
.tb-menu.open .topbar-link.tb-offres::after { transform: translateY(1px) rotate(-135deg); }
.tb-menu-list { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 230px; padding: 8px; border-radius: 20px; display: grid; gap: 4px;
    background: linear-gradient(180deg, rgba(22, 22, 30, .82) 0%, rgba(8, 8, 12, .78) 100%); -webkit-backdrop-filter: var(--dry-blur); backdrop-filter: var(--dry-blur); box-shadow: var(--dry-shadow);
    opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.tb-menu.open .tb-menu-list { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tb-menu-item { --c: var(--c-white); display: grid; gap: 3px; padding: 12px 16px; border-radius: 14px; text-decoration: none; transition: background .25s ease, box-shadow .25s ease; }
.tb-menu-item b { font-family: var(--font-tech, 'Space Grotesk', sans-serif); font-weight: 700; font-size: .82rem; letter-spacing: 1.8px; text-transform: uppercase; color: rgb(var(--c)); text-shadow: 0 0 12px rgba(var(--c), .5); }
.tb-menu-item span { font-family: var(--font-tech, 'Space Grotesk', sans-serif); font-size: .74rem; color: rgba(245, 245, 247, .6); }
.tb-menu-item:hover, .tb-menu-item:focus-visible { outline: none; background: radial-gradient(120% 140% at 50% 0%, rgba(var(--c), .3) 0%, rgba(var(--c), .08) 70%); box-shadow: 0 0 18px rgba(var(--c), .3); }
.tb-mi-blue { --c: var(--c-blue); }
.tb-mi-red { --c: var(--c-red); }
.tb-drawer-label, .tb-drawer-offre { display: none; }
@media (max-width: 760px) {
    .topbar-nav .tb-menu { display: none; }
    .tb-drawer-label { display: block; margin: 4px 0 0; font-family: var(--font-tech, 'Space Grotesk', sans-serif); font-size: .66rem; letter-spacing: 2px; color: rgba(245, 245, 247, .45); }
    .topbar-drawer .tb-drawer-offre { display: inline-flex; color: rgb(var(--c-blue)); text-shadow: 0 0 12px rgba(var(--c-blue), .5); }
}
/* Correctif : dans le menu téléphone, Articles et Le Jeez doivent rester visibles */
@media (max-width: 760px) { .topbar-drawer .topbar-link.tb-soft { display: inline-flex; } }
/* Entrée rouge « TOURNAGE & SHOOTING » dans le menu téléphone */
@media (max-width: 760px) { .topbar-drawer .tb-drawer-offre.tb-mi-red { color: rgb(var(--c-red)); text-shadow: 0 0 12px rgba(var(--c-red), .5); } }