/* =====================================================
   NOMADE — Bassin d'Arcachon
   Direction artistique : pervenche + sable + sunset
   ===================================================== */

:root {
    /* Palette inspirée DA Bassin — lagon + crème + corail */
    --periwinkle: #8AA5C4;        /* powder blue / lagon doux */
    --periwinkle-dark: #6B8EAD;
    --periwinkle-deep: #7590B8;   /* lagoon-ink : profondeur */
    --sand: #E8DCC4;              /* sable chaud */
    --sand-light: #FAF6EE;        /* cream paper */
    --sunset: #F4A261;            /* corail couchant */
    --sunset-deep: #E08A4A;
    --pine: #3E5C4A;
    --pine-light: #6B8E78;
    --cream: #FAF6EE;
    --ink: #1F2937;
    --ink-soft: #4A5B6E;
    --muted: #8A97A8;
    --white: #FFFDF7;             /* paper off-white */

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

    --shadow-sm: 0 2px 8px rgba(62, 78, 110, 0.06);
    --shadow: 0 8px 28px rgba(62, 78, 110, 0.1);
    --shadow-lg: 0 20px 60px rgba(62, 78, 110, 0.15);

    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-title: 'Fraunces', 'Playfair Display', Georgia, serif; /* réservé aux NOMS de spots & events */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', system-ui, sans-serif; /* repli casual propre, plus de cursive/Snell Roundhand moche si Caveat echoue */

    --container: 1200px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* text-size-adjust:100% : empêche iOS/Android d'auto-agrandir le texte au reflow
   (barre d'URL qui se replie au scroll → le H1 du hero « changeait de taille »).
   100% (pas none) = on garde le respect du zoom/accessibilité de l'utilisateur. */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    overflow-x: hidden;
}

/* UNE PAGE COURTE DOIT REMPLIR L'ECRAN.
   Mesure le 15 aout 2026 dans l'application installee, page Notifications :
   le `body` blanc s'arretait a 499 px, l'ecran en fait 844, et les 345 px du bas
   laissaient voir le fond creme de `html`. Une bande vide sur 41 % de la hauteur,
   sans barre d'adresse ni onglet pour expliquer ce qu'on regarde : ca ressemble a
   une page qui n'a pas fini de charger.
   La carte est exclue : elle gere elle-meme sa hauteur en plein ecran.
   `svh` vise la fenetre la PLUS PETITE (barres du navigateur deployees), donc la
   page ne deborde jamais et n'invente pas de defilement inutile. */
body:not(.carte-fullscreen) { min-height: 100vh; min-height: 100svh; }

/* ==========================================================================
   APPLICATION MOBILE : cibles tactiles et lisibilite.
   Releve du 15 aout 2026 sur six telephones (iPhone SE, 14, 14 Pro Max,
   Pixel 7, Android 360 et iPhone couche), application installee.
   Le DESSIN ne bouge nulle part, seule la zone de contact grandit : c'est la
   regle posee pour les cases a cocher et les fleches, elle vaut ici aussi.
   ========================================================================== */

/* L'INTERRUPTEUR DES NOTIFICATIONS mesurait 52 x 32 px, soit 8 px de moins que
   le minimum en hauteur, sur les six appareils. C'est le geste principal de la
   page Notifications : le rater, c'est ne pas s'abonner. La pastille garde ses
   32 px visibles, la zone de contact monte a 44. */
.ios-switch { position: relative; }
.ios-switch::before {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
}

/* LA LIGNE LEGALE DE L'APPLICATION (Mentions, Confidentialite, CGU, Cookies)
   faisait 30 px de haut, et le lien BassinWebFlow 20. Quatre liens colles les
   uns aux autres a cette taille, on en ouvre un pour un autre. */
.footer-app-legal a,
.footer-app-legal .footer-cookies-btn {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 4px;
}
.footer-bottom a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 0 2px;
}

/* Le plancher de 12 px est pose en FIN de feuille : voir le bloc dedie. */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { font-family: var(--font-hand); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ==== HEADER ==== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 18px 0;
    transition: all 0.3s var(--ease);
    background: rgba(250, 250, 247, 0.94); /* assez opaque pour que la photo du Bassin ne le traverse pas */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(31, 36, 46, 0.04);
}
.site-header.scrolled {
    background: rgba(250, 250, 247, 0.97);
    box-shadow: var(--shadow-sm);
    padding: 12px 0;
}
.site-header.hidden {
    transform: translateY(calc(-100% - 40px));
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    color: var(--periwinkle-deep); letter-spacing: -0.02em;
    text-decoration: none;
}
.logo-mark {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--periwinkle), var(--periwinkle-dark));
    display: grid; place-items: center; color: white; font-weight: 800;
    font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}
/* Variante logo image (PNG complet) — utilisée dans le header & footer.
   Le logo est plus grand que la barre de nav et la déborde verticalement,
   sans pousser sa hauteur (position: absolute centré). */
.logo-img { gap: 0; position: relative; height: 56px; width: 220px; }
.logo-img img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 168px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s var(--ease);
}
.logo-img:hover img { transform: translateY(-50%) scale(1.04); }
/* Dans le footer (fond foncé), pas de débordement nécessaire — taille raisonnable */
.site-footer .logo-img { height: 80px; width: 200px; }
.site-footer .logo-img img { height: 100px; }
@media (max-width: 720px) {
    .logo-img { height: 48px; width: 140px; }
    .logo-img img { height: 110px; }
}
.main-nav { display: flex; gap: 28px; align-items: center; }
.main-nav a {
    font-size: 0.93rem; font-weight: 500; color: var(--ink-soft);
    position: relative; transition: color 0.2s, transform 0.2s ease;
}
.main-nav a:not(.active)::after {
    content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
    background: var(--sunset-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
.main-nav a:not(.active):hover { transform: translateX(4px); }
.main-nav a:not(.active):hover::after { transform: scaleX(1); }
.main-nav a.active { color: var(--sunset-deep); font-weight: 600; }
/* onglet actif : simplement le mot en orange (pas de repere) */
.nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--periwinkle-deep);
    color: #fff;
    font-size: 0.88rem; font-weight: 600; letter-spacing: -0.005em;
    box-shadow: 0 8px 20px rgba(193, 53, 132, 0.38);
    transition: transform 0.2s var(--ease), box-shadow 0.22s var(--ease), filter 0.2s var(--ease);
}
.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(193, 53, 132, 0.52);
    filter: brightness(1.06);
    color: #fff;
}
.nav-cta:active { transform: translateY(0); }
/* 44 x 44 et non 32 x 32 : c'est le bouton principal de navigation sur
   téléphone, il doit respecter la cible tactile. Le DESSIN ne bouge pas, les
   trois traits gardent leurs 24 px de large et leurs 5 px d'écart ; c'est la
   zone de contact qui grandit autour. Relevé à l'audit du 15 août 2026. */
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span {
    position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink);
    transition: transform 0.3s, opacity 0.3s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 26px; }
.burger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ==== HERO ==== */
.hero {
    min-height: 100vh; position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--sand-light) 0%, var(--cream) 100%);
    display: flex; align-items: center; padding-top: 120px; padding-bottom: 80px;
}
.hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(138, 165, 196, 0.34), transparent 60%),
      radial-gradient(circle at 85% 65%, rgba(31, 41, 55, 0.12), transparent 50%),
      radial-gradient(circle at 75% 15%, rgba(138, 165, 196, 0.20), transparent 45%);
}
/* Soleil doux — glow chaud côté droit */
.hero-sun {
    position: absolute; top: 18%; right: -60px;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
        rgba(31, 41, 55, 0.55) 0%,
        rgba(31, 41, 55, 0.22) 30%,
        rgba(31, 41, 55, 0.05) 55%,
        transparent 70%);
    filter: blur(2px);
    pointer-events: none; z-index: 1;
    animation:none;
}
@keyframes sun-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.88; }
}
/* Vagues horizon — traits d'aquarelle qui se balancent */
.hero-horizon {
    position: absolute; left: 0; right: 0; bottom: 9%;
    width: 100%; height: 60px; pointer-events: none; z-index: 1;
    opacity: 0.55;
}
.hero-horizon path { animation:none; transform-origin: center; }
.hero-horizon path:nth-child(2) { animation-duration: 9s; animation-delay: -2s; }
@keyframes wave-drift {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-8px) translateY(2px); }
}
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 30 Q15 20 30 30 T60 30' stroke='%238AA5C4' stroke-width='0.6' fill='none' opacity='0.3'/%3E%3C/svg%3E");
    opacity: 0.6;
}
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-text .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px; border-radius: 50px;
    background: white; border: 1px solid rgba(139, 160, 200, 0.3);
    color: var(--periwinkle-deep); font-size: 0.82rem; font-weight: 500;
    margin-bottom: 22px;
}
.eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--sunset); box-shadow: 0 0 0 4px rgba(31, 41, 55,0.2);
    animation:none;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(31, 41, 55,0); } }
.hero h1 { margin-bottom: 24px; }
.hero h1 .handwritten {
    font-family: var(--font-hand); color: var(--sunset-deep);
    font-weight: 700; font-size: 1.1em; display: inline-block;
    transform: rotate(-2deg);
}
.hero h1 .underline {
    position: relative; display: inline-block;
}
.hero h1 .underline::after {
    content: ''; position: absolute; left: -2%; right: -2%; bottom: -4px; height: 14px;
    background: var(--periwinkle); opacity: 0.28; z-index: -1; border-radius: 8px;
    transform: skewX(-6deg);
}
.hero-desc { font-size: 1.1rem; color: var(--ink-soft); margin-bottom: 32px; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 50px; font-weight: 500;
    transition: all 0.25s var(--ease); cursor: pointer;
}
.btn-primary {
    background: var(--ink); color: var(--cream);
    box-shadow: 0 10px 24px rgba(31, 36, 46, 0.2);
}
.btn-primary:hover { background: var(--periwinkle-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(62, 78, 110, 0.25); }
.btn-secondary {
    background: white; color: var(--ink); border: 1px solid rgba(31,36,46,0.12);
}
.btn-secondary:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-sunset {
    background: linear-gradient(135deg, var(--sunset), var(--sunset-deep));
    color: white;
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.35);
}
.btn-sunset:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(31, 41, 55, 0.45); }
.btn-ghost {
    background: rgba(31, 41, 55, 0.05); color: var(--ink);
    border: 1px solid rgba(31, 41, 55, 0.12);
}
.btn-ghost:hover { background: rgba(31, 41, 55, 0.1); transform: translateY(-2px); }

/* ==== SHOTGUN BUTTON (vraie DA : noir + wordmark blanc + bowtie logo) ==== */
.btn-shotgun {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 13px 24px;
    background: #0A0710;
    color: #fff;
    border-radius: 12px;
    font-family: var(--font-sans);
    text-decoration: none;
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow:
        0 10px 30px rgba(10, 7, 16, 0.45),
        inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-shotgun-glow {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(80% 120% at 0% 100%, rgba(31, 41, 55, 0.45) 0%, transparent 55%),
        radial-gradient(90% 120% at 100% 0%, rgba(120, 80, 200, 0.55) 0%, transparent 60%),
        radial-gradient(60% 80% at 60% 80%, rgba(216, 143, 181, 0.35) 0%, transparent 65%);
    opacity: 0.85;
    transition: opacity 0.3s var(--ease);
}
.btn-shotgun:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 40px rgba(10, 7, 16, 0.55),
        inset 0 0 0 1px rgba(255,255,255,0.1);
}
.btn-shotgun:hover .btn-shotgun-glow { opacity: 1; }
.btn-shotgun-logo {
    color: #fff;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.btn-shotgun-label {
    font-size: 1.05rem; font-weight: 900;
    letter-spacing: 0.14em;
    color: #fff;
    font-family: var(--font-sans);
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ==== L'AVIS DE NOMADE ==== */
.nomade-review {
    margin-top: 36px; padding: 28px 30px;
    background: rgba(138,165,196,0.09);
    border-radius: var(--radius);
    border: 1px solid rgba(138,165,196,0.22);
    position: relative;
}
/* Desktop : l'avis s'étend sur toute la largeur du contenu, jusqu'au bord de la photo */
@media (min-width: 721px) {
    .nomade-review { width: min(1152px, calc(100vw - 48px)); padding: 34px 40px; }
}
.nomade-review::before {
    content: '“'; position: absolute; top: -10px; right: 22px;
    font-family: var(--font-display); font-size: 4.5rem; line-height: 1;
    color: var(--periwinkle-deep); opacity: 0.15;
}
.nmr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.nmr-badge {
    width: 50px; height: 50px; border-radius: 50%;
    background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(31,41,55,0.18);
    border: 1px solid rgba(31,41,55,0.06);
    flex-shrink: 0;
}
.nmr-badge img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
.nmr-head-text { display: flex; flex-direction: column; line-height: 1.1; }
.nmr-label {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1rem; color: var(--ink); letter-spacing: -0.01em;
}
.nmr-sub {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    color: var(--periwinkle-deep); font-size: 0.95rem; margin-top: 3px;
}
.nmr-text {
    margin: 0; font-family: var(--font-display); font-weight: 400;
    font-size: 1.12rem; line-height: 1.55; color: var(--ink);
    font-style: italic;
}

/* ==== dhv2-meta-sub (address sub-line) ==== */
.dhv2-meta-sub {
    display: block; margin-top: 4px;
    font-size: 0.82rem; color: rgba(31, 41, 55, 0.55);
    font-family: var(--font-sans); font-weight: 400;
    font-style: italic;
}

.hero-stats { display: flex; gap: 32px; padding-top: 28px; border-top: 1px solid rgba(31,36,46,0.1); }
.hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--periwinkle-deep); }
.hero-stat span { font-size: 0.82rem; color: var(--muted); }

.hero-visual { position: relative; height: 560px; }
.hero-card {
    position: absolute; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-lg);
    background: white;
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-main { top: 0; left: 10%; width: 70%; height: 68%; transform: rotate(-3deg); z-index: 2; }
.hero-card-small { bottom: 4%; right: 0; width: 55%; height: 45%; transform: rotate(4deg); z-index: 3; border: 6px solid white; }
.hero-card-tiny {
    top: 15%; right: -5%; width: 38%; height: 32%; transform: rotate(8deg); z-index: 1;
    background: linear-gradient(135deg, var(--periwinkle), var(--periwinkle-dark));
    padding: 20px; color: white; display: flex; flex-direction: column; justify-content: space-between;
    border: 6px solid white;
}
.hero-card-tiny .big-emoji { font-size: 2.4rem; }
.hero-card-tiny strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; }
.hero-card-tiny span { font-size: 0.78rem; opacity: 0.85; }
.hero-scroll {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: var(--muted); font-size: 0.8rem; display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.hero-scroll::after {
    content: ''; width: 1px; height: 30px; background: var(--muted); animation:none;
}
@keyframes scrollDown { 0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ==== SECTION BASE ==== */
.section { padding: 100px 0; position: relative; }
.section-head { margin-bottom: 56px; max-width: 720px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .label {
    display: inline-block; font-family: var(--font-hand); font-size: 1.5rem;
    color: var(--sunset-deep); transform: rotate(-2deg); margin-bottom: 10px;
}
.section-head p { font-size: 1.08rem; color: var(--ink-soft); margin-top: 16px; }

/* ==== EVENT CARDS ==== */
/* ==== EVENT CARD V2 : full-bleed éditoriale ==== */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 26px; }
.event-card-v2 {
    position: relative;
    display: block;
    min-height: 440px;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--ink);
    background-size: cover; background-position: center;
    text-decoration: none; color: white;
    box-shadow: 0 10px 28px rgba(31,36,46,0.14);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    isolation: isolate;
}
.event-card-v2::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: inherit; background-size: cover; background-position: center;
    transition: transform 0.6s var(--ease);
}
.event-card-v2:hover { transform: translateY(-7px); box-shadow: 0 26px 56px rgba(31,36,46,0.28); }
.event-card-v2:hover::before { transform: scale(1.07); }
.ev2-scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20,26,38,0.55) 0%, rgba(20,26,38,0) 22%, rgba(20,26,38,0) 42%, rgba(20,26,38,0.55) 68%, rgba(20,26,38,0.94) 100%);
}
/* Date "affichage journal" : big D.M stack */
.ev2-date {
    position: absolute; top: 18px; left: 18px;
    display: flex; flex-direction: column; line-height: 0.95;
    font-family: var(--font-display);
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
}
.ev2-day { font-size: 2.6rem; font-weight: 600; }
.ev2-month { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.18em; margin-top: 6px; opacity: 0.9; font-family: var(--font-sans); font-weight: 700; }
/* Multi-day event card date */
.ev2-date.is-multiday .ev2-day { font-size: 1.6rem; white-space: nowrap; }
.ev2-date.is-multiday .ev2-month { font-size: 0.7rem; letter-spacing: 0.1em; }
.ev2-bottom {
    position: absolute; left: 20px; right: 20px; bottom: 22px;
    display: flex; flex-direction: column; gap: 10px;
}
.ev2-cat {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    padding: 5px 11px; border-radius: 50px;
    background: var(--cat-color, var(--periwinkle));
    color: white; font-size: 0.72rem; font-weight: 600;
    box-shadow: 0 6px 14px rgba(0,0,0,0.22);
}
.event-card-v2 h3 {
    margin: 0; color: white;
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.1;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.ev2-desc {
    font-size: 0.88rem; line-height: 1.45;
    color: rgba(255,255,255,0.88);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.5s var(--ease), opacity 0.35s var(--ease);
}
.event-card-v2:hover .ev2-desc, .event-card-v2:focus-visible .ev2-desc { max-height: 100px; opacity: 1; }
.ev2-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 0.78rem; color: rgba(255,255,255,0.85);
    padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.15);
}
.ev2-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Sponsorisé : halo + ribbon */
.event-card-v2.is-partner { outline: 2px solid rgba(31, 41, 55,0.9); outline-offset: -2px; box-shadow: 0 0 0 6px rgba(31, 41, 55,0.14), 0 14px 32px rgba(31, 41, 55,0.30); }
.event-card-v2.is-partner:hover { box-shadow: 0 0 0 8px rgba(31, 41, 55,0.20), 0 24px 54px rgba(31, 41, 55,0.40); }
.ev2-tags-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ev2-tags-row .partner-chip { font-size: 0.62rem; padding: 5px 11px; }

/* Event detail (modal-ish expansion not needed — we use links) */
.event-card .event-desc { font-size: 0.92rem; color: var(--ink-soft); }

/* ==== SPOTS SECTION ==== */
.spots-section { background: var(--sand-light); }
.category-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
/* Mobile/tablette : les onglets de catégorie deviennent une rangée de chips scrollable
   (avant : display:none → aucun filtre catégorie sur mobile). */
@media (max-width: 960px) {
    .category-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; gap: 8px; margin-bottom: 16px; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .category-tabs::-webkit-scrollbar { display: none; }
    .category-tabs .category-tab { flex: 0 0 auto; padding: 10px 16px; font-size: .88rem; }
}
.category-tab {
    padding: 10px 20px; border-radius: 50px;
    background: white; color: var(--ink); font-size: 0.9rem; font-weight: 500;
    border: 1px solid rgba(31,36,46,0.1);
    transition: all 0.25s var(--ease);
    display: inline-flex; align-items: center; gap: 8px;
}
.category-tab:hover { border-color: var(--periwinkle); }
.category-tab.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.category-tab .emoji { font-size: 1.1rem; }

/* ==== FILTER BAR : tabs + search côte à côte ==== */
.filter-bar {
    position: relative; z-index: 30;
    display: flex; align-items: flex-start; justify-content: center;
    gap: 16px; flex-wrap: wrap; margin-bottom: 40px;
}
.filter-bar .category-tabs { margin-bottom: 0; flex: 1 1 auto; justify-content: center; }
/* Mobile : rangée de chips scrollable alignée à GAUCHE (sinon justify-content:center pousse
   la 1re chip « Tout » hors écran → on arrive sur la page déjà « slidée »). */
@media (max-width: 960px) { .filter-bar .category-tabs { justify-content: flex-start; } }
.search-box {
    position: relative;
    display: inline-flex; align-items: center;
    background: white;
    border: 1px solid rgba(31,36,46,0.1);
    border-radius: 50px;
    padding: 0 14px 0 38px;
    min-width: 240px; max-width: 320px;
    height: 40px; flex: 0 0 auto;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.search-box:focus-within {
    border-color: var(--periwinkle);
    box-shadow: 0 0 0 3px rgba(148, 163, 255, 0.15);
}
.search-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.search-input {
    flex: 1 1 auto;
    border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 0.9rem; color: var(--ink);
    height: 100%;
    min-width: 0;
}
.search-input::placeholder { color: var(--muted); opacity: 0.7; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
    display: none;
    border: 0; background: rgba(31,36,46,0.08);
    color: var(--ink);
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 1rem; line-height: 1; cursor: pointer;
    margin-left: 8px;
    transition: background 0.2s var(--ease);
}
.search-clear:hover { background: rgba(31,36,46,0.15); }
.search-clear.is-visible { display: inline-flex; align-items: center; justify-content: center; }

/* ==== CITY SELECT : dropdown multi-sélection ==== */
.city-select { position: relative; z-index: 50; flex: 0 0 auto; }
.city-select-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px;
    background: white;
    border: 1px solid rgba(31,36,46,0.1);
    border-radius: 50px;
    font: inherit; font-size: 0.9rem; font-weight: 500;
    color: var(--ink); cursor: pointer;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
    white-space: nowrap;
}
.city-select-btn:hover { border-color: var(--periwinkle); }
.city-select.has-selection .city-select-btn {
    background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.city-select-btn .city-select-chev {
    transition: transform 0.25s var(--ease);
    opacity: 0.7;
}
.city-select-btn[aria-expanded="true"] .city-select-chev { transform: rotate(180deg); }
.city-select-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

.city-select-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    z-index: 100;
    width: 280px; max-width: calc(100vw - 32px);
    background: white;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(31,36,46,0.18);
    border: 1px solid rgba(31,36,46,0.08);
    overflow: hidden;
    animation: citySelectIn 0.2s var(--ease);
}
@keyframes citySelectIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.city-select-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--cream);
    border-bottom: 1px solid rgba(31,36,46,0.08);
    font-size: 0.82rem;
}
.city-select-head strong { color: var(--ink); font-weight: 700; }
.city-select-reset {
    border: 0; background: transparent;
    color: var(--sunset-deep); font: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
    transition: background 0.2s var(--ease);
}
.city-select-reset:hover { background: rgba(31, 41, 55,0.1); }
.city-select-list {
    list-style: none; margin: 0; padding: 6px 0;
    max-height: 280px; overflow-y: auto;
}
.city-select-list li { margin: 0; }
.city-select-option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    font-size: 0.9rem; color: var(--ink);
    cursor: pointer;
    transition: background 0.15s var(--ease);
}
.city-select-option:hover { background: rgba(148,163,255,0.08); }
.city-select-check {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px;
    border: 1.8px solid rgba(31,36,46,0.25);
    border-radius: 4px;
    background: white;
    cursor: pointer; flex: 0 0 auto;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
    position: relative;
}
.city-select-check:checked {
    background: var(--ink); border-color: var(--ink);
}
.city-select-check:checked::after {
    content: ''; position: absolute;
    left: 4px; top: 0.5px; width: 5px; height: 9px;
    border: solid var(--cream);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.city-select-name { flex: 1 1 auto; }

/* Scrollbar discrète pour la liste */
.city-select-list::-webkit-scrollbar { width: 8px; }
.city-select-list::-webkit-scrollbar-track { background: transparent; }
.city-select-list::-webkit-scrollbar-thumb { background: rgba(31,36,46,0.15); border-radius: 4px; }
.city-select-list::-webkit-scrollbar-thumb:hover { background: rgba(31,36,46,0.25); }

@media (max-width: 720px) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .search-box { width: 100%; max-width: none; align-self: stretch; }
    .city-select { align-self: stretch; }
    .city-select-btn { width: 100%; justify-content: space-between; }
    .city-select-panel { right: auto; left: 0; width: 100%; }
}

/* ==== SPOT CARD V2 : full-bleed éditoriale ==== */
.spot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.spot-card {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    min-height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
    text-decoration: none; color: white;
    box-shadow: 0 10px 26px rgba(31,36,46,0.14);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    isolation: isolate;
}
.spot-card::before {
    /* Image zoom via pseudo-overlay + transition sur le background-size parent (trick) */
    content: ''; position: absolute; inset: 0;
    background: inherit; background-size: cover; background-position: center;
    transition: transform 0.6s var(--ease);
    z-index: -2;
}
.spot-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(31,36,46,0.26); }
.spot-card:hover::before { transform: scale(1.06); }
.spot-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(20,26,38,0.45) 0%, rgba(20,26,38,0) 25%, rgba(20,26,38,0) 45%, rgba(20,26,38,0.55) 72%, rgba(20,26,38,0.92) 100%);
}
.spot-top {
    position: absolute; top: 16px; left: 16px; right: 16px;
    display: flex; justify-content: space-between; gap: 10px;
    pointer-events: none;
}
/* Wrapper qui regroupe les chips de catégorie à gauche.
   Permet d'avoir plusieurs pilules quand un spot est dans plusieurs catégories,
   tout en gardant le chip de prix bien aligné à droite via space-between du parent. */
.spot-chips-cat {
    display: flex; flex-wrap: wrap; gap: 6px; min-width: 0;
}
.spot-chip {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 6px 12px; border-radius: 50px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.spot-chip-cat { background: rgba(255,255,255,0.88); color: var(--ink); text-transform: uppercase; }
.spot-bottom {
    position: absolute; left: 20px; right: 20px; bottom: 22px;
    display: flex; flex-direction: column; gap: 8px;
}
.spot-location {
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 600; opacity: 0.85;
}
.spot-name {
    font-family: var(--font-title); font-weight: 600;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.08;
    margin: 0; color: white;
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.spot-desc {
    font-size: 0.88rem; line-height: 1.45;
    color: rgba(255,255,255,0.88);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.5s var(--ease), opacity 0.35s var(--ease), margin 0.35s var(--ease);
}
.spot-card:hover .spot-desc, .spot-card:focus-visible .spot-desc {
    max-height: 60px; opacity: 1; margin-top: 2px;
}
.spot-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.spot-tag-row .tag-pill { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); color: white; backdrop-filter: blur(6px); }

/* Sponsorisé : halo sunset + chip top-left prioritaire */
.spot-card.is-partner { outline: 2px solid rgba(31, 41, 55,0.9); outline-offset: -2px; box-shadow: 0 0 0 6px rgba(31, 41, 55,0.14), 0 14px 32px rgba(31, 41, 55,0.30); }
.spot-card.is-partner:hover { box-shadow: 0 0 0 8px rgba(31, 41, 55,0.20), 0 22px 50px rgba(31, 41, 55,0.38); }
.spot-tags-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 2px; }
.spot-tags-row .partner-chip { font-size: 0.62rem; padding: 5px 11px; }

.spot-empty {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px;
    color: var(--muted);
}

/* ==== INSTAGRAM STRIP ==== */
.insta-strip {
    background: linear-gradient(135deg, var(--periwinkle) 0%, var(--periwinkle-dark) 100%);
    color: white;
    position: relative; overflow: hidden;
}
.insta-strip::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 80% 20%, rgba(31, 41, 55,0.3), transparent 40%);
    pointer-events: none;
}
.insta-strip-inner {
    position: relative; padding: 80px 0;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center;
}
.insta-strip h2 { color: white; margin-bottom: 18px; }
.insta-strip h2 .highlight { color: var(--sunset); font-family: var(--font-hand); }
.insta-strip p { color: rgba(255,255,255,0.85); margin-bottom: 28px; font-size: 1.05rem; }
.insta-stats { display: flex; gap: 32px; margin-bottom: 32px; }
.insta-stat strong { font-family: var(--font-display); font-size: 2rem; display: block; }
.insta-stat span { font-size: 0.85rem; opacity: 0.8; }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.insta-grid-item {
    aspect-ratio: 1; border-radius: 12px; overflow: hidden;
    background: rgba(255,255,255,0.1); position: relative;
    transition: transform 0.3s;
}
.insta-grid-item:hover { transform: scale(1.04); }
.insta-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.insta-cta {
    background: white; color: var(--periwinkle-deep);
    padding: 14px 26px; border-radius: 50px;
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; transition: transform 0.2s;
}
.insta-cta:hover { transform: translateY(-2px); }

/* ==== PLAYLIST ==== */
.playlist-section {
    background: var(--ink); color: var(--cream);
    position: relative; overflow: hidden;
}
.playlist-section::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 15% 40%, rgba(139, 160, 200, 0.32), transparent 50%),
      radial-gradient(circle at 85% 60%, rgba(31, 41, 55, 0.14), transparent 40%),
      radial-gradient(circle at 50% 90%, rgba(139, 160, 200, 0.16), transparent 45%);
    pointer-events: none;
}
.playlist-section .container { position: relative; }
.playlist-head { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.playlist-head .label {
    display: inline-block; font-family: var(--font-hand); font-size: 1.6rem;
    color: var(--sunset); transform: rotate(-2deg); margin-bottom: 10px;
}
.playlist-head h2 { color: white; margin-bottom: 18px; }
.playlist-head h2 .hand { font-family: var(--font-hand); color: var(--sunset); }
.playlist-head p { color: rgba(255,255,255,0.75); margin-bottom: 28px; font-size: 1.05rem; }
.playlist-grid {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.playlist-card { display: flex; flex-direction: column; gap: 14px; }
.playlist-card-label {
    font-family: var(--font-display); font-weight: 500;
    color: var(--cream); font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding-left: 4px;
}
.playlist-card-label em {
    font-style: italic; color: var(--sunset);
    font-family: var(--font-hand); font-weight: 400;
    font-size: 1.3rem; margin-right: 4px;
}
.playlist-embed {
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.playlist-embed iframe { width: 100%; height: 380px; border: none; display: block; }

/* ==== COMMUNITY ==== */
.community-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.group-card {
    background: white; border-radius: var(--radius);
    padding: 28px; box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
    border: 1px solid rgba(139, 160, 200, 0.15);
    display: flex; flex-direction: column; gap: 14px;
}
.group-card:hover {
    transform: translateY(-4px);
    border-color: var(--group-color, var(--periwinkle));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--group-color, var(--periwinkle)) 18%, transparent),
        0 18px 40px color-mix(in srgb, var(--group-color, var(--periwinkle)) 28%, transparent);
}
.group-emoji { font-size: 2.6rem; line-height: 1; }
.group-card h3 { margin: 0; }
.group-card p { color: var(--ink-soft); font-size: 0.92rem; flex: 1; }
.group-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(31,36,46,0.08); }
.group-members { font-size: 0.85rem; color: var(--muted); }
.group-join {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    background: var(--group-color, var(--periwinkle-deep));
    color: #fff !important;
    font-weight: 700; font-size: 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow:
        0 6px 16px color-mix(in srgb, var(--group-color, var(--periwinkle-deep)) 38%, transparent);
    transition: transform 0.2s var(--ease), box-shadow 0.22s var(--ease), gap 0.2s var(--ease), filter 0.2s var(--ease);
}
.group-join:hover {
    gap: 12px;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--group-color, var(--periwinkle-deep)) 55%, transparent);
}
.group-join svg { stroke: #fff; }

/* ==== PAGE HEADER ==== */
.page-hero {
    padding: 180px 0 80px;
    background: linear-gradient(180deg, var(--sand-light) 0%, var(--cream) 100%);
    text-align: center; position: relative; overflow: hidden;
}
.page-hero::after { display: none; }
.page-hero .label {
    display: inline-block; font-family: var(--font-hand); font-size: 1.8rem;
    color: var(--sunset-deep); transform: rotate(-2deg); margin-bottom: 6px;
}
.page-hero p { max-width: 640px; margin: 20px auto 0; color: var(--ink-soft); font-size: 1.08rem; }

/* ==== FOOTER ==== */
.site-footer {
    /* Bleu logo, légèrement assombri pour que le texte blanc reste lisible —
       même teinte que la top-bar pour cohérence DA */
    background: #7590B8; color: rgba(255,255,255,0.92);
    padding: 80px 0 30px; position: relative;
}
/* trait orange du footer retire (demande Theo) */
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 50px;
    padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-brand .logo { color: white; }
.footer-brand p { margin-top: 18px; max-width: 320px; }
.footer-social { display: flex; gap: 12px; margin-top: 24px; }
.footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: grid; place-items: center;
    transition: background 0.2s, transform 0.2s;
}
.footer-social a:hover { background: var(--sunset); transform: translateY(-2px); }
.footer-col h4 { font-family: var(--font-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: white; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.92rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--sunset); }
.footer-bottom {
    padding-top: 24px; display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; font-size: 0.82rem;
}
.footer-bottom a { color: inherit; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.25); transition: color 0.2s, border-color 0.2s; }
.footer-bottom a:hover { color: var(--sunset); border-bottom-color: var(--sunset); }
.footer-credits {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.72rem; opacity: 0.55; text-align: center;
    letter-spacing: 0.02em;
}
.footer-credits a { color: inherit; border-bottom: 1px dotted rgba(255,255,255,0.25); transition: opacity 0.2s; }
.footer-credits a:hover { opacity: 1; color: var(--periwinkle); }

/* ==== LEGAL PAGES ==== */
.legal-content { max-width: 780px; margin: 0 auto; padding: 60px 24px 120px; }
.legal-content h2 { margin-top: 40px; margin-bottom: 16px; font-size: 1.5rem; color: var(--periwinkle-deep); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 14px; color: var(--ink-soft); }
.legal-content ul { margin-left: 20px; margin-bottom: 16px; color: var(--ink-soft); }
.legal-content strong { color: var(--ink); }

/* ==== RESPONSIVE ==== */
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { height: 400px; }
    .insta-strip-inner { grid-template-columns: 1fr; gap: 40px; }
    .playlist-inner { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
/* TABLETTE : entre 721 et 820px la barre complete ne tient pas. Mesure a 768px : logo
   210px + six liens 513px, pour 490px disponibles. « Pass Nomade » se cassait en deux
   lignes et le header passait sur trois niveaux (constate sur iPad par Théo, 7 août
   2026). On garde le burger, dont le tiroir contient deja tous les liens et boutons. */
@media (min-width: 721px) and (max-width: 820px) {
    .main-nav { display: none; }
    .burger { display: block; }
}
/* Un libelle de menu ne se coupe jamais en deux, quelle que soit la largeur. */
.main-nav a { white-space: nowrap; }

@media (max-width: 720px) {
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; flex-direction: column; padding: 20px 24px; align-items: stretch; gap: 20px; box-shadow: var(--shadow); }
    .main-nav.open { display: flex; }
    .burger { display: block; }
    .nav-cta { display: none; }
    .hero { padding-top: 110px; padding-bottom: 60px; }
    .hero-stats { gap: 18px; }
    .hero-stat strong { font-size: 1.4rem; }
    .section { padding: 70px 0; }
    .footer-grid { grid-template-columns: 1fr; }
    h1 { font-size: 2.4rem; }
}

/* =====================================================
   V2 ADDITIONS — top bar, hero V2, polaroids, tags, detail
   ===================================================== */

/* ==== TOP INFO BAR ==== */
.top-bar {
    /* Bleu logo, légèrement assombri pour que le texte blanc reste bien lisible */
    background: #7590B8;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    padding: 5px 0; /* fine, ne pas wrapper sur 2 lignes */
    position: fixed; top: 0; left: 0; right: 0; z-index: 101;
    text-shadow: 0 1px 1px rgba(31, 36, 46, 0.15);
    white-space: nowrap;
    overflow-x: auto;
}
.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: nowrap;
}
.top-bar-items {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: nowrap;
}
.top-bar-date { white-space: nowrap; }
.top-bar-item { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.01em; }
.top-bar-item strong { color: #FFD9C2; font-weight: 700; } /* sunset clair pour rester visible sur le bleu */
.top-emoji { font-size: 0.9rem; }
.top-wave { color: #FFD9C2; animation:none; }
@keyframes top-wave-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}
.top-sep { opacity: 0.4; margin: 0 4px; }
.top-bar-date { font-family: var(--font-hand); font-size: 1rem; color: #fff; text-transform: capitalize; }
.top-bar-location { opacity: 0.95; }
.top-bar-sun { gap: 5px; }
.top-bar-sun .top-sun-sep { opacity: 0.7; margin: 0 2px; font-size: 0.78rem; }

.site-header { top: 0; }

@media (max-width: 720px) {
    /* Top-bar non-fixed + header sticky en mobile : ils s'empilent naturellement,
       le header reste collé au haut au scroll */
    .top-bar { position: static; font-size: 0.72rem; padding: 6px 0; }
    .top-bar-location, .top-bar-date, .top-bar-sun { display: none; }
    .top-bar-inner { display: flex; justify-content: center; }
    .top-bar-items { gap: 12px; grid-column: auto; }
    .site-header { position: sticky; top: 0; }
}

/* ==== HERO V2 ==== */
.hero-v2, .hero-v3 {
    min-height: 78vh;
    padding-top: 140px; padding-bottom: 60px;
    position: relative;
    background: linear-gradient(170deg,
        #BBCDE2 0%,
        #CFDCEC 30%,
        #E7D5C4 60%,
        #F9E9D7 85%,
        var(--cream) 100%);
}

/* Photo Bassin d'Arcachon en arrière-plan : visible derrière la carte
   "Le Bassin sans filtre" mais coupée au bord de la zone partenaires.
   - Desktop : fondu vers la droite (carte à gauche, partenaires à droite)
   - Mobile  : fondu vers le bas  (carte en haut, partenaires en bas)
   WebP avec image-set + fallback JPG. */
.hero-v3::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/hero-bassin-v2.jpg'); /* fallback pour navigateurs sans image-set */
    background-image:
        image-set(
            url('../img/hero-bassin-v2.webp') type('image/webp'),
            url('../img/hero-bassin-v2.jpg') type('image/jpeg')
        );
    background-size: cover;
    background-position: 70% center; /* cadre sur les bateaux et cabane à droite */
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
}

/* Le calque aquarelle + le contenu doivent passer au-dessus de la photo */
.hero-v3 .hero-watercolor { z-index: 1; opacity: 0.5; }
.hero-v3 .hero-horizon    { z-index: 2; }
.hero-v3 > .container,
.hero-v3-inner            { position: relative; z-index: 4; }

/* Sur mobile : photo posée DERRIÈRE la carte uniquement (étendue latéralement
   à toute la largeur viewport, remonte au top du hero, coupée net sous la carte).
   La zone partenaires devient un bloc visuellement séparé, sans photo. */
@media (max-width: 720px) {
    /* Désactive la photo qui couvrait toute la section */
    .hero-v3::before { display: none; }
    /* Masque les déco aquatiques en mobile : sur grande hauteur (partenaires
       empilés), les radial-gradients du watercolor + les vaguelettes du horizon
       s'étirent et créent des bandes colorées visibles aux jonctions. */
    .hero-v3 .hero-watercolor { display: none; }
    .hero-v3 .hero-horizon    { display: none; }
    /* Fond uniforme cream en mobile : le gradient bleu→pêche→cream du desktop
       devient une succession de bandes de couleur visibles quand la section est
       haute (partenaires empilés). On garde uniquement le cream. */
    .hero-v3 { background: var(--cream); }
}
.hero-watercolor {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(ellipse 70% 50% at 20% 30%, rgba(139,160,200,0.60), transparent 75%),
        radial-gradient(ellipse 45% 40% at 80% 75%, rgba(31, 41, 55,0.22), transparent 70%),
        radial-gradient(ellipse 55% 45% at 65% 20%, rgba(139,160,200,0.28), transparent 70%),
        radial-gradient(ellipse 35% 45% at 45% 85%, rgba(217,143,181,0.16), transparent 70%);
    mix-blend-mode: multiply;
    filter: blur(6px);
}
.hero-watercolor::after {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.4;
}
.hero-v2-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}
.hero-v3-inner {
    position: relative; z-index: 4;
    display: grid; grid-template-columns: 1fr; align-items: center;
    justify-items: center;
}
/* Quand des partenaires existent : texte centré, scatter en grille overlay */
.hero-v3:has(.hv3-scatter) .hero-v3-text {
    max-width: 520px;
    z-index: 5;
}
/* Hauteur hero adaptée au nombre de cartes partenaires */
.hero-v3:has([data-count="5"]),
.hero-v3:has([data-count="6"]) {
    min-height: 85vh;
}
.hero-v3:has([data-count="7"]),
.hero-v3:has([data-count="8"]) {
    min-height: 90vh;
}
/* Quand des partenaires existent : le container laisse passer les clics vers les cartes scatter */
.hero-v3:has(.hv3-scatter) .hero-v3-inner {
    pointer-events: none;
}
.hero-v3-text { pointer-events: auto; }
/* Fallback 0 partenaires : la colonne visuelle disparaît, le texte se recentre */
.hero-v3:not(:has(.hv3-scatter)) .hero-v3-inner {
    max-width: 820px; margin: 0 auto; text-align: center;
}
.hero-v3:not(:has(.hv3-scatter)) .hero-v3-text { align-items: center; }
.hero-v3:not(:has(.hv3-scatter)) .hero-v3-actions { justify-content: center; }

/* Carte blanche translucide à 50% — la photo du Bassin transparaît à travers.
   Layout identique desktop/responsive : texte centré, titre compact, CTAs empilés. */
.hero-v3-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 22px;
    padding: 36px 32px;
    box-shadow: 0 18px 38px rgba(31, 36, 46, 0.10), 0 4px 12px rgba(31, 36, 46, 0.05);
}
/* Titre compact (style responsive appliqué partout) */
.hero-v3-text .hero-hand-title { text-align: center; margin: 14px 0 14px; }
.hero-v3-text .hero-hand-title .line-top  { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0; }
.hero-v3-text .hero-hand-title .line-main { font-size: clamp(3.2rem, 6.5vw, 5rem); line-height: 0.95; margin: 2px 0; }
.hero-v3-text .hero-hand-title .line-sub  { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
/* Description recentrée + un peu plus étroite pour un bon rythme de lecture */
.hero-v3-text .hero-v3-desc {
    max-width: 38ch; margin: 6px auto 22px; line-height: 1.55;
}
/* CTAs empilés en colonne (comme responsive) */
.hero-v3-text .hero-v3-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    align-items: stretch;
}
.hero-v3-text .hero-v3-actions .btn { width: 100%; justify-content: center; margin: 0; }
.hero-v3-text .hero-v3-actions .btn-sunset { order: -1; } /* primary toujours en haut */
/* Stats centrées */
.hero-v3-text .hero-card-stats { justify-content: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-radius: 50px;
    background: rgba(255,255,255,0.75); backdrop-filter: blur(8px);
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid rgba(62,78,110,0.12);
    color: var(--periwinkle-deep);
    font-size: clamp(0.58rem, 1.1vw, 0.78rem); font-weight: 600; letter-spacing: 0.08em;
    margin-bottom: 24px;
}
.hero-badge-dot { font-size: 1rem; }

/* Vagues + aquarelle (effets de lumière) retirés du hero — demande Théo « ça fait très IA » */
.hero-watercolor, .hero-horizon { display: none !important; }
/* H1 hero : une seule couleur + une seule graisse ; seul « filtre » se distingue */
.hero-hand-title {
    font-family: var(--font-hand);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--periwinkle-deep);
    margin-bottom: 28px;
}
.hero-hand-title .line-top,
.hero-hand-title .line-main,
.hero-hand-title .line-sub { display: block; }
.hero-hand-title .line-top { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.hero-hand-title .line-main {
    font-size: clamp(3.6rem, 9vw, 7rem);
    font-family: var(--font-hand);
    transform: rotate(-1.5deg);
    margin: 4px 0;
}
.hero-hand-title .line-sub { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.hero-hand-title .brush-word {
    position: relative; display: inline-block;
    color: var(--sunset-deep);
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.15em;
    padding: 0 4px;
}
.hero-hand-title .brush-underline {
    position: absolute; left: -4%; right: -4%; bottom: -14px;
    width: 108%; height: 22px; z-index: -1;
    color: var(--sunset);
    opacity: 0.85;
}

.hero-v2-desc, .hero-v3-desc {
    font-size: 1.12rem; color: var(--ink-soft);
    max-width: 480px; margin-bottom: 34px; line-height: 1.55;
}
.hero-v2-actions, .hero-v3-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Signature éditoriale sous les CTAs */
.hero-v3-signature {
    display: flex; align-items: center; gap: 14px;
    margin-top: 36px; padding-top: 22px;
    border-top: 1px solid rgba(62,78,110,0.15);
    font-size: 0.82rem; color: var(--ink-soft); max-width: 480px;
}
.hv3-edition { font-family: var(--font-display); font-style: italic; color: var(--periwinkle-deep); }
.hv3-dot { opacity: 0.4; }
.hv3-count strong { color: var(--ink); font-weight: 700; }

/* Visual hero : cartes sponsor scattered (style polaroid/scrapbook) — gère 1 à 8 cartes.
   Overlay absolu positionné sur .hero-v3 (la section), pas sur le container.
   Les cartes flottent à gauche et à droite du rectangle blanc centré.
   Le container (z:4) est au-dessus, transparent sur les côtés → cartes visibles. */
.hero-v3-visual.hv3-scatter {
    position: absolute;
    top: 140px; bottom: 40px;   /* Respecte les paddings du hero (header + bas) */
    left: 0; right: 0;
    margin: 0 auto;
    max-width: calc(var(--container) + 160px);
    padding: 0 24px;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}
/* Pas de grille desktop — positionnement absolu par carte pour contrôle total */
.hv3-scrap { pointer-events: auto; }
.hv3-scatter-label {
    position: absolute; top: 80px; right: 24px;
    color: var(--sunset-deep);
    font-size: 1.25rem; line-height: 1.15;
    text-align: right;
    z-index: 50;
    transform: rotate(4deg);
    pointer-events: none;
    padding: 10px 16px 10px 18px;
    background: rgba(251, 245, 231, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(217, 143, 181, 0.3);
    box-shadow: 0 8px 24px -8px rgba(62, 78, 110, 0.25),
                0 2px 6px rgba(62, 78, 110, 0.08);
}
.hv3-scatter-label em { font-style: italic; font-weight: 400; color: var(--periwinkle-deep); }

.hv3-scrap {
    position: absolute;
    width: var(--scrap-w);
    /* On force la hauteur via calc (ratio 4/5 → height = width × 5/4 = width × 1.25).
       aspect-ratio est gardé comme fallback, mais certains plugins/resets WP override
       la height calculée par aspect-ratio sur les éléments en position:absolute → carte invisible. */
    height: calc(var(--scrap-w) * 1.25);
    min-height: 0;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    will-change: transform;
    /* Fallback visuel si la featured image ne charge pas (sinon : rectangle bleu nuit — ou invisible) */
    background-color: var(--periwinkle-deep);
    background-image: linear-gradient(135deg, var(--periwinkle-deep) 0%, var(--sunset-deep) 100%);
}
.hv3-scrap::before { display: none; }
.hv3-scrap .spot-name { font-size: 1.25rem; line-height: 1.1; }
.hv3-scrap .spot-top { top: 12px; left: 12px; right: 12px; }
.hv3-scrap .spot-bottom { left: 14px; right: 14px; bottom: 14px; gap: 6px; }
.hv3-scrap .spot-chip { font-size: 0.72rem; padding: 5px 11px; }
.hv3-scrap .spot-location {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.hv3-scrap .tag-pill.light { font-size: 0.7rem; padding: 4px 9px; }
.hv3-scrap .spot-tags-row .partner-chip { font-size: 0.66rem; padding: 4px 9px; }

/* Desktop : les cartes restent en position absolute, dimensionnées par --scrap-w */

/* Animation hover : lift + redressement + halo subtil */
.hv3-scrap {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.45s var(--ease),
                filter 0.45s var(--ease);
}
.hv3-scrap:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.06) !important;
    z-index: 20;
    box-shadow: 0 20px 50px -10px rgba(62,78,110,0.35), 0 0 0 2px rgba(255,255,255,0.6);
    filter: saturate(1.1);
}
/* Micro-wiggle continu au repos, stoppé au hover */
@keyframes hv3-breathe {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -4px; }
}
.hv3-scrap {
    animation:none;
}
.hv3-scrap-2 { animation-delay: -1.6s; }
.hv3-scrap-3 { animation-delay: -3.2s; }
.hv3-scrap-4 { animation-delay: -0.8s; }
.hv3-scrap-5 { animation-delay: -2.4s; }
.hv3-scrap-6 { animation-delay: -4s; }
.hv3-scrap-7 { animation-delay: -1.2s; }
.hv3-scrap-8 { animation-delay: -3.6s; }
.hv3-scrap:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .hv3-scrap { animation: none; }
}

/* ===== Placement absolu adaptatif (desktop ≥ 961px) =====
   Chaque côté (gauche/droite) est indépendant :
   - 4 cartes sur un côté → 2×2 petites (--s4)
   - 3 cartes → colonne verticale, plus grosses (--s3)
   - 2 cartes → colonne verticale, encore plus grosses (--s2)
   - 1 carte → grosse carte seule (--s1) */

@media (min-width: 961px) {
    .hv3-scatter {
        --s4: clamp(130px, 12.5vw, 165px);  /* 4 cartes par côté (2×2) */
        --s3: clamp(148px, 13.5vw, 182px);  /* 3 cartes verticales */
        --s2: clamp(178px, 16vw, 218px);    /* 2 cartes verticales */
        --s1: clamp(210px, 18vw, 260px);    /* 1 carte solo */
        --s0: clamp(250px, 22vw, 310px);    /* carte géante (XXL) */
    }

    /* --- 1 carte : solo droite --- */
    .hv3-scatter[data-count="1"] .hv3-scrap-1 {
        right: 2%; top: 22%; width: var(--s1); transform: rotate(-3deg);
    }

    /* --- 2 cartes : 1 grosse gauche + 1 grosse droite --- */
    .hv3-scatter[data-count="2"] .hv3-scrap-1 { left: 2%;  top: 22%; width: var(--s1); transform: rotate(-4deg); }
    .hv3-scatter[data-count="2"] .hv3-scrap-2 { right: 2%; top: 22%; width: var(--s1); transform: rotate(3.5deg); }

    /* --- 3 cartes : 1 grosse gauche + 2 moyennes droite --- */
    .hv3-scatter[data-count="3"] .hv3-scrap-1 { left: 2%;  top: 22%; width: var(--s1); transform: rotate(-3deg); }
    .hv3-scatter[data-count="3"] .hv3-scrap-2 { right: 2%; top: 8%;  width: var(--s2); transform: rotate(3.5deg); }
    .hv3-scatter[data-count="3"] .hv3-scrap-3 { right: 2%; top: 54%; width: var(--s2); transform: rotate(-2deg); }

    /* --- 4 cartes : 2 moyennes gauche + 2 moyennes droite --- */
    .hv3-scatter[data-count="4"] .hv3-scrap-1 { left: 2%;  top: 8%;  width: var(--s2); transform: rotate(-3deg); }
    .hv3-scatter[data-count="4"] .hv3-scrap-2 { left: 2%;  top: 54%; width: var(--s2); transform: rotate(2.5deg); }
    .hv3-scatter[data-count="4"] .hv3-scrap-3 { right: 2%; top: 8%;  width: var(--s2); transform: rotate(-4deg); }
    .hv3-scatter[data-count="4"] .hv3-scrap-4 { right: 2%; top: 54%; width: var(--s2); transform: rotate(3deg); }

    /* --- 5 cartes : 2 moyennes gauche + 3 verticales droite --- */
    .hv3-scatter[data-count="5"] .hv3-scrap-1 { left: 2%;  top: 8%;  width: var(--s2); transform: rotate(-3deg); }
    .hv3-scatter[data-count="5"] .hv3-scrap-2 { left: 2%;  top: 54%; width: var(--s2); transform: rotate(2.5deg); }
    .hv3-scatter[data-count="5"] .hv3-scrap-3 { right: 2%; top: 1%;  width: var(--s3); transform: rotate(3.5deg); }
    .hv3-scatter[data-count="5"] .hv3-scrap-4 { right: 2%; top: 35%; width: var(--s3); transform: rotate(-2deg); }
    .hv3-scatter[data-count="5"] .hv3-scrap-5 { right: 2%; top: 68%; width: var(--s3); transform: rotate(2deg); }

    /* --- 6 cartes : 3 verticales gauche + 3 verticales droite --- */
    .hv3-scatter[data-count="6"] .hv3-scrap-1 { left: 2%;  top: 1%;  width: var(--s3); transform: rotate(-3deg); }
    .hv3-scatter[data-count="6"] .hv3-scrap-2 { left: 2%;  top: 35%; width: var(--s3); transform: rotate(2.5deg); }
    .hv3-scatter[data-count="6"] .hv3-scrap-3 { left: 2%;  top: 68%; width: var(--s3); transform: rotate(-2deg); }
    .hv3-scatter[data-count="6"] .hv3-scrap-4 { right: 2%; top: 1%;  width: var(--s3); transform: rotate(3.5deg); }
    .hv3-scatter[data-count="6"] .hv3-scrap-5 { right: 2%; top: 35%; width: var(--s3); transform: rotate(-4deg); }
    .hv3-scatter[data-count="6"] .hv3-scrap-6 { right: 2%; top: 68%; width: var(--s3); transform: rotate(3deg); }

    /* --- 7 cartes : 3 verticales gauche + 4 droite (2×2) --- */
    .hv3-scatter[data-count="7"] .hv3-scrap-1 { left: 2%;  top: 1%;  width: var(--s3); transform: rotate(-3deg); }
    .hv3-scatter[data-count="7"] .hv3-scrap-2 { left: 2%;  top: 35%; width: var(--s3); transform: rotate(2.5deg); }
    .hv3-scatter[data-count="7"] .hv3-scrap-3 { left: 2%;  top: 68%; width: var(--s3); transform: rotate(-2deg); }
    .hv3-scatter[data-count="7"] .hv3-scrap-4 { right: calc(var(--s4) + 14px); top: 3%;  width: var(--s4); transform: rotate(3.5deg); }
    .hv3-scatter[data-count="7"] .hv3-scrap-5 { right: calc(var(--s4) + 14px); top: 51%; width: var(--s4); transform: rotate(-2deg); }
    .hv3-scatter[data-count="7"] .hv3-scrap-6 { right: 0;  top: 0%;  width: var(--s4); transform: rotate(-4deg); }
    .hv3-scatter[data-count="7"] .hv3-scrap-7 { right: 0;  top: 49%; width: var(--s4); transform: rotate(3deg); }

    /* --- 8 cartes : 4 gauche (2×2) + 4 droite (2×2) --- */
    .hv3-scatter[data-count="8"] .hv3-scrap-1 { left: 0;   top: 3%;  width: var(--s4); transform: rotate(-3deg); }
    .hv3-scatter[data-count="8"] .hv3-scrap-2 { left: 0;   top: 51%; width: var(--s4); transform: rotate(2.5deg); }
    .hv3-scatter[data-count="8"] .hv3-scrap-3 { left: calc(var(--s4) + 14px); top: 0%;  width: var(--s4); transform: rotate(3.5deg); }
    .hv3-scatter[data-count="8"] .hv3-scrap-4 { left: calc(var(--s4) + 14px); top: 49%; width: var(--s4); transform: rotate(-2deg); }
    .hv3-scatter[data-count="8"] .hv3-scrap-5 { right: calc(var(--s4) + 14px); top: 3%;  width: var(--s4); transform: rotate(-4deg); }
    .hv3-scatter[data-count="8"] .hv3-scrap-6 { right: calc(var(--s4) + 14px); top: 51%; width: var(--s4); transform: rotate(3deg); }
    .hv3-scatter[data-count="8"] .hv3-scrap-7 { right: 0;  top: 0%;  width: var(--s4); transform: rotate(2deg); }
    .hv3-scatter[data-count="8"] .hv3-scrap-8 { right: 0;  top: 49%; width: var(--s4); transform: rotate(-3.5deg); }
}
.btn-ghost {
    background: rgba(255,255,255,0.6); color: var(--ink);
    border: 1.5px solid var(--ink);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

/* Hero postcards */
.hero-v2-visual { position: relative; height: 500px; }
.postcard {
    position: absolute;
    background: white; padding: 14px 14px 42px;
    box-shadow: 0 30px 80px rgba(62,78,110,0.25), 0 2px 8px rgba(62,78,110,0.15);
    border-radius: 4px;
}
.postcard img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.postcard-main {
    top: 4%; left: 8%; width: 62%; height: 70%;
    transform: rotate(-4deg);
    z-index: 2;
}
.postcard-alt {
    bottom: 2%; right: 4%; width: 52%; height: 55%;
    transform: rotate(5deg);
    z-index: 3;
}
.postcard-alt .postcard-caption {
    position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
    font-family: var(--font-hand); font-size: 1.2rem; color: var(--ink-soft);
}
.postcard-tape {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
    width: 90px; height: 26px;
    background: rgba(31, 41, 55,0.55);
    border-left: 1px dashed rgba(255,255,255,0.4);
    border-right: 1px dashed rgba(255,255,255,0.4);
    box-shadow: 0 2px 6px rgba(62,78,110,0.1);
}
.postcard-sticker {
    position: absolute; top: 55%; right: -2%;
    background: var(--sunset); color: white;
    padding: 16px 18px; border-radius: 50%;
    width: 110px; height: 110px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; transform: rotate(10deg);
    box-shadow: 0 14px 30px rgba(31, 41, 55,0.4);
    z-index: 4; font-family: var(--font-hand);
    line-height: 1.1;
}
.postcard-sticker span:first-child { font-size: 1.3rem; }
.postcard-sticker strong { font-size: 1.3rem; display: block; }
.postcard-sticker span { font-size: 0.95rem; opacity: 0.95; }

/* ==== WEEKEND POLAROIDS ==== */
.weekend-section {
    background: linear-gradient(180deg, var(--cream) 0%, var(--sand-light) 100%);
    padding: 80px 0 100px;
    position: relative;
}
.weekend-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.weekend-head .label { font-family: var(--font-hand); font-size: 1.6rem; color: var(--sunset-deep); transform: rotate(-2deg); display: inline-block; margin-bottom: 10px; }
.weekend-head h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.weekend-head p { color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }

.scribble-circle { position: relative; display: inline-block; color: var(--sunset-deep); font-family: var(--font-hand); font-weight: 700; font-size: 1.2em; padding: 0 12px; }
.scribble-circle svg { position: absolute; inset: -10% -5%; width: 110%; height: 120%; z-index: -1; color: var(--sunset); opacity: 0.75; pointer-events: none; }

/* ==== WEEKEND HERO + MINI (banner + grid) ==== */
.weekend-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Hero (événement à la une — bannière pleine largeur) */
.weekend-hero {
    position: relative;
    display: block;
    height: clamp(320px, 38vw, 420px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--ink);
    background-size: cover; background-position: center;
    text-decoration: none; color: white;
    box-shadow: 0 16px 44px rgba(31,36,46,0.22);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    isolation: isolate;
}
.weekend-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background: inherit; background-size: cover; background-position: center;
    transition: transform 0.7s var(--ease);
}
.weekend-hero:hover { transform: translateY(-6px); box-shadow: 0 28px 62px rgba(31,36,46,0.32); }
.weekend-hero:hover::before { transform: scale(1.06); }
.weekend-hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(20,26,38,0.5) 0%, transparent 35%, transparent 50%, rgba(20,26,38,0.65) 75%, rgba(20,26,38,0.95) 100%),
        linear-gradient(90deg, rgba(20,26,38,0.3) 0%, transparent 50%);
}
.weekend-hero-top {
    position: absolute; top: 22px; left: 22px; right: 22px;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px;
}
.weekend-hero-flag {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: white; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 8px 14px; border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.24);
}
.weekend-hero.is-partner { outline: 2px solid rgba(31, 41, 55,0.9); outline-offset: -2px; box-shadow: 0 0 0 6px rgba(31, 41, 55,0.14), 0 18px 44px rgba(31, 41, 55,0.34); }
.weekend-hero.is-partner:hover { box-shadow: 0 0 0 8px rgba(31, 41, 55,0.2), 0 28px 62px rgba(31, 41, 55,0.44); }
.weekend-hero-top .partner-chip { font-size: 0.66rem; padding: 6px 12px; letter-spacing: 0.1em; }

.weekend-hero-date {
    position: absolute; right: 26px; bottom: 28px;
    display: flex; flex-direction: column; align-items: flex-end;
    line-height: 0.9;
    color: white;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.weekend-hero-date .wh-day { font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; }
.weekend-hero-date .wh-month { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; margin-top: 4px; }
/* Multi-day hero date */
.weekend-hero-date.is-multiday .wh-day { font-size: clamp(1.8rem, 3.5vw, 2.6rem); white-space: nowrap; }
.weekend-hero-date.is-multiday .wh-month { font-size: 0.72rem; letter-spacing: 0.14em; }
.wh-badge {
    display: inline-block; margin-top: 8px;
    font-family: var(--font-sans); font-size: 0.58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 4px 10px; border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.22);
}

.weekend-hero-bottom {
    position: absolute; left: 26px; right: 40%; bottom: 28px;
    display: flex; flex-direction: column; gap: 14px;
}
.weekend-hero-cat {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 50px;
    background: var(--cat-color, var(--periwinkle));
    color: white; font-size: 0.78rem; font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,0,0,0.24);
}
.weekend-hero-tags-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.weekend-hero-city {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 50px;
    background: rgba(255,255,255,0.96); color: var(--ink);
    font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px rgba(0,0,0,0.24);
    backdrop-filter: blur(4px);
}
.weekend-hero h3 {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    color: white;
    text-shadow: 0 4px 22px rgba(0,0,0,0.42);
}
.weekend-hero-meta {
    display: flex; flex-wrap: wrap; gap: 18px;
    color: rgba(255,255,255,0.9); font-size: 0.88rem; font-weight: 500;
    padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.18);
}
.weekend-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Mini-cards (grille sous le hero) */
.weekend-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.weekend-mini {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(31,36,46,0.10);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    text-decoration: none; color: inherit;
}
.weekend-mini:hover { transform: translateX(-4px); box-shadow: 0 18px 38px rgba(31,36,46,0.18); }
.weekend-mini.is-partner { outline: 2px solid rgba(31, 41, 55,0.85); outline-offset: -2px; box-shadow: 0 0 0 4px rgba(31, 41, 55,0.14), 0 12px 30px rgba(31, 41, 55,0.24); }
.wm-media { position: relative; overflow: hidden; }
.wm-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.weekend-mini:hover .wm-media img { transform: scale(1.08); }
.wm-tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.wm-tags-row .partner-chip { font-size: 0.55rem; padding: 3px 8px; letter-spacing: 0.08em; box-shadow: 0 4px 10px rgba(31, 41, 55,0.35); }
.wm-body {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 16px;
    padding: 14px 18px;
}
.wm-date {
    font-family: var(--font-display); line-height: 1;
    color: var(--sunset-deep); text-align: center;
    padding-right: 16px;
    border-right: 2px solid rgba(31,36,46,0.08);
}
.wm-date strong { font-size: 1.7rem; display: block; font-weight: 600; }
.wm-date span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-family: var(--font-sans); font-weight: 700; }
/* Multi-day mini date : taille réduite pour "14→17" */
.wm-date.is-multiday strong { font-size: 1.15rem; white-space: nowrap; }
.wm-date.is-multiday span { font-size: 0.6rem; letter-spacing: 0.1em; }
.wm-text { min-width: 0; }
.wm-cat { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.wm-text h4 {
    margin: 0 0 4px; font-family: var(--font-display); font-weight: 600;
    font-size: 1.08rem; line-height: 1.15; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wm-meta { font-size: 0.78rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wm-city { color: var(--sunset-deep); font-weight: 700; letter-spacing: 0.01em; font-size: 0.82rem; }
.wm-sep { opacity: 0.4; }
.wm-time { color: var(--ink-soft); }
.wm-arrow {
    color: var(--ink-soft);
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.weekend-mini:hover .wm-arrow { color: var(--sunset-deep); transform: translateX(4px); }
@media (max-width: 520px) {
    .weekend-mini { grid-template-columns: 100px 1fr; }
    .wm-body { grid-template-columns: auto 1fr; padding: 12px 14px; gap: 12px; }
    .wm-arrow { display: none; }
}

/* ==== AGENDA TIMELINE (homepage) ==== */
.agenda-section { background: var(--cream); padding: 80px 0 100px; }
.agenda-head {
    display: grid; grid-template-columns: auto 1fr; gap: 60px;
    align-items: end;
    max-width: 1000px;
    margin: 0 auto 56px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(31,36,46,0.1);
}
.agenda-head .label { margin-bottom: 12px; }
.agenda-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; margin: 0; }
.agenda-head p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 420px; justify-self: end; }

.agenda-timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; display: flex; flex-direction: column; gap: 0; }
.agenda-row { position: relative; }
.agenda-row + .agenda-row { border-top: 1px solid rgba(31,36,46,0.08); }
.agenda-row-link {
    display: grid;
    grid-template-columns: 90px 180px 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 24px 14px;
    color: inherit; text-decoration: none;
    transition: background 0.25s var(--ease);
}
.agenda-row-link:hover { background: white; border-radius: var(--radius); }
.agenda-row.is-partner .agenda-row-link {
    background: linear-gradient(90deg, rgba(31, 41, 55,0.10), rgba(31, 41, 55,0) 70%);
    border-radius: var(--radius);
}
.agenda-row.is-partner .agenda-row-link:hover { background: linear-gradient(90deg, rgba(31, 41, 55,0.16), rgba(31, 41, 55,0.03) 70%); }

.agenda-date {
    font-family: var(--font-display); line-height: 1;
    text-align: center; color: var(--ink);
}
.agenda-date strong { display: block; font-size: 3rem; font-weight: 600; color: var(--sunset-deep); letter-spacing: -0.02em; }
.agenda-date span { display: block; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

.agenda-photo {
    width: 180px; height: 130px;
    background-size: cover; background-position: center;
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(31,36,46,0.12);
    transition: transform 0.35s var(--ease);
}
.agenda-row-link:hover .agenda-photo { transform: scale(1.04); }

.agenda-content { min-width: 0; }
.agenda-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.agenda-cat {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 50px;
    background: var(--cat-color, var(--periwinkle));
    color: white; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.agenda-tags .partner-chip { font-size: 0.6rem; padding: 4px 10px; letter-spacing: 0.1em; }
.agenda-content h3 {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em;
    margin: 0 0 6px; color: var(--ink);
}
.agenda-desc {
    font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft);
    margin: 0 0 10px;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.agenda-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.82rem; color: var(--ink-soft); }
.agenda-arrow {
    color: var(--ink-soft); opacity: 0.6;
    transition: transform 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.agenda-row-link:hover .agenda-arrow { color: var(--sunset-deep); transform: translateX(6px); opacity: 1; }

@media (max-width: 860px) {
    .agenda-head { grid-template-columns: 1fr; gap: 16px; }
    .agenda-head p { justify-self: start; }
    .agenda-row-link { grid-template-columns: 72px 1fr; gap: 18px; padding: 20px 12px; }
    .agenda-photo, .agenda-arrow { display: none; }
    .agenda-date strong { font-size: 2.2rem; }
    .agenda-content h3 { font-size: 1.2rem; }
}

/* ==== EVENTS MAGAZINE (homepage, layout "journal" asymétrique) ==== */
.evmag-section { background: var(--cream); padding: 90px 0 110px; position: relative; overflow: hidden; }
.evmag-section::before {
    content: ""; position: absolute; top: -140px; right: -120px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(31, 41, 55,0.12), transparent 70%);
    pointer-events: none;
}
.evmag-head {
    display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px;
    margin-bottom: 44px;
}
.evmag-head-text .label { margin-bottom: 14px; }
.evmag-head-text h2 {
    font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em;
    margin: 0 0 14px; font-family: var(--font-serif, var(--font-sans));
}
.evmag-head-text p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; margin: 0; max-width: 540px; }
.evmag-head-link {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--ink); font-weight: 600; font-size: 0.95rem; text-decoration: none;
    padding: 12px 20px; border-radius: 50px;
    border: 1.5px solid rgba(31,36,46,0.15); background: white;
    transition: all 0.25s ease; white-space: nowrap;
}
.evmag-head-link:hover { border-color: var(--sunset-deep); color: var(--sunset-deep); transform: translateY(-2px); }
.evmag-head-link svg { transition: transform 0.25s ease; }
.evmag-head-link:hover svg { transform: translateX(4px); }

.evmag-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 18px;
}

/* Hero "couverture" : 2 colonnes x 2 rangées — carte premium featured event */
.evmag-hero {
    grid-column: span 2; grid-row: span 2;
    position: relative; overflow: hidden;
    border-radius: 22px;
    background-color: var(--periwinkle-deep);
    background-image: linear-gradient(135deg, var(--sunset) 0%, var(--periwinkle-deep) 100%);
    background-size: cover; background-position: center;
    min-height: 440px;
    text-decoration: none; color: white;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 22px;
    box-shadow: 0 18px 40px rgba(31,36,46,0.14);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.evmag-hero:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(31,36,46,0.22); }
.evmag-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.3) 65%, rgba(0,0,0,0.82) 100%);
    z-index: 1;
}
.evmag-hero > * { position: relative; z-index: 2; }
.evmag-hero-top {
    position: absolute; top: 22px; left: 22px; right: 22px; z-index: 3;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.evmag-cover {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.94); color: var(--ink);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 50px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.evmag-cover::before { content: "★"; color: var(--sunset-deep); }
.evmag-hero-date {
    font-family: var(--font-display); line-height: 0.9;
    color: white; text-align: right;
    display: flex; flex-direction: column; align-items: flex-end;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.evmag-hero-date strong { display: block; font-size: clamp(3.4rem, 7vw, 5.4rem); font-weight: 600; color: white; letter-spacing: -0.02em; }
.evmag-hero-date span { display: block; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.26em; color: white; margin-top: 6px; }
.evmag-hero-body { display: flex; flex-direction: column; gap: 10px; }
.evmag-hero-body h3 {
    margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; color: white;
    font-family: var(--font-serif, var(--font-sans));
}
.evmag-hero-desc { margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.88); max-width: 520px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.evmag-hero-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 0.82rem; color: rgba(255,255,255,0.9); margin-top: 4px;
}
.evmag-hero.is-partner {
    outline: 3px solid var(--sunset);
    outline-offset: -3px;
    box-shadow: 0 0 0 6px rgba(31, 41, 55, 0.22), 0 24px 54px rgba(31, 41, 55, 0.38);
    animation:none;
}
@keyframes evmag-partner-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(31, 41, 55, 0.22), 0 18px 42px rgba(31, 41, 55, 0.30); }
    50%       { box-shadow: 0 0 0 10px rgba(31, 41, 55, 0.32), 0 28px 62px rgba(31, 41, 55, 0.48); }
}

/* Catégorie pill (grand) */
.evmag-cat {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.94); color: var(--ink);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 6px 12px; border-radius: 50px;
    border-left: 3px solid var(--cat-color, var(--sunset-deep));
    align-self: flex-start;
}

/* Tile : petits blocs éditoriaux */
.evmag-tile {
    position: relative; overflow: hidden;
    border-radius: 18px; background: white;
    text-decoration: none; color: var(--ink);
    display: flex; flex-direction: column;
    box-shadow: 0 6px 18px rgba(31,36,46,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.evmag-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(31,36,46,0.15); }
/* Sponsored tile — halo lumineux pulsant (plus de span 2 rows) */
.evmag-tile.is-partner {
    outline: 3px solid var(--sunset);
    outline-offset: -3px;
    box-shadow: 0 0 0 5px rgba(31, 41, 55, 0.22), 0 20px 42px rgba(31, 41, 55, 0.30);
    animation:none;
}
.evmag-tile.is-partner .evmag-tile-media { height: 260px; }
@keyframes evmag-partner-pulse-sm {
    0%, 100% { box-shadow: 0 0 0 5px rgba(31, 41, 55, 0.22), 0 16px 34px rgba(31, 41, 55, 0.26); }
    50%       { box-shadow: 0 0 0 9px rgba(31, 41, 55, 0.32), 0 24px 52px rgba(31, 41, 55, 0.44); }
}
@media (max-width: 720px) {
    .evmag-tile.is-partner { grid-row: span 1; }
    .evmag-tile.is-partner .evmag-tile-media { height: 140px; }
}
.evmag-tile-media {
    position: relative; height: 130px;
    background-size: cover; background-position: center;
    border-radius: 18px 18px 0 0;
}
.evmag-tile-date {
    position: absolute; top: 10px; left: 10px;
    background: white; border-radius: 10px;
    padding: 8px 12px 6px; text-align: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    min-width: 46px;
    font-family: var(--font-display); line-height: 1;
}
.evmag-tile-date strong { display: block; font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--sunset-deep); letter-spacing: -0.02em; }
.evmag-tile-date span { display: block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-soft); margin-top: 3px; }
/* Multi-day event tile date */
.evmag-tile-date.is-multiday strong { font-size: 1.1rem; white-space: nowrap; }
.evmag-tile-date.is-multiday span { font-size: 0.56rem; letter-spacing: 0.08em; }
.evmag-tile-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.evmag-tile-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evmag-cat-sm {
    background: transparent; padding: 2px 0; border-radius: 0; border-left: none;
    font-size: 0.68rem; color: var(--ink-soft); font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
}
.evmag-tile-tags .partner-chip { font-size: 0.56rem; padding: 2px 7px; letter-spacing: 0.05em; }
/* Ruban "★ Partenaire" — posé en haut à droite de la cover de la tuile sponso */
.evmag-tile-partner {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 999px;
    background: linear-gradient(135deg, var(--sunset) 0%, var(--sunset-deep) 100%);
    color: #fff; font-family: var(--font-sans);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(31, 41, 55, 0.45);
    z-index: 2;
}
.evmag-tile h4 {
    margin: 0; font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.01em;
    font-family: var(--font-serif, var(--font-sans));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.evmag-tile-meta { font-size: 0.75rem; color: var(--ink-soft); margin-top: auto; }

/* ===== Desktop : evmag-tiles → spot-card style (full-bleed image + overlay) ===== */
/* En mobile/tablette : forcer fond blanc sur les tiles pour la lisibilité
   (le background-image inline du <a> doit être masqué, seul .evmag-tile-media l'affiche) */
.evmag-card.evmag-tile {
    background-image: none !important;
    background-color: white;
}
/* Masqué par défaut, visible uniquement en desktop ≥ 961px */
.evmag-card-scrim,
.evmag-card-desktop-only { display: none; }

@media (min-width: 961px) {
    /* Masque le layout mobile thumbnail+body */
    .evmag-card .evmag-card-mobile-only { display: none !important; }

    /* Active le mode full-bleed — ré-autorise le background-image inline */
    .evmag-card.evmag-tile {
        background-image: var(--card-bg) !important; /* réactive l'image masquée en mobile */
    }
    .evmag-card {
        background-size: cover; background-position: center;
        background-color: var(--periwinkle-deep);
        border-radius: var(--radius-lg, 18px);
        aspect-ratio: 4/5;
        position: relative; overflow: hidden;
        flex-direction: column; justify-content: space-between;
        color: white; text-decoration: none;
        box-shadow: 0 10px 26px rgba(31,36,46,0.14);
        transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
        isolation: isolate;
    }
    /* Image zoom via pseudo — same trick as spot-card */
    .evmag-card::before {
        content: ''; position: absolute; inset: 0;
        background: inherit; background-size: cover; background-position: center;
        transition: transform 0.6s var(--ease);
        z-index: -2;
    }
    .evmag-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(31,36,46,0.26); }
    .evmag-card:hover::before { transform: scale(1.06); }

    /* Scrim overlay — identical to spot-scrim */
    .evmag-card .evmag-card-scrim {
        display: block;
        position: absolute; inset: 0; z-index: -1;
        background: linear-gradient(180deg,
            rgba(20,26,38,0.45) 0%, rgba(20,26,38,0) 25%,
            rgba(20,26,38,0) 45%, rgba(20,26,38,0.55) 72%, rgba(20,26,38,0.92) 100%);
        pointer-events: none;
    }

    /* Overlay content visible */
    .evmag-card-desktop-only { display: flex; }

    /* Top : catégorie + date */
    .evmag-card-top {
        position: absolute; top: 12px; left: 12px; right: 12px;
        z-index: 3;
        justify-content: space-between; align-items: flex-start;
    }
    .evmag-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .evmag-card-date {
        background: white; border-radius: 10px;
        padding: 6px 10px 4px; text-align: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        font-family: var(--font-display); line-height: 1;
        min-width: 42px;
    }
    .evmag-card-date strong {
        display: block; font-size: 1.5rem; font-weight: 600;
        color: var(--sunset-deep); letter-spacing: -0.02em; line-height: 1;
    }
    .evmag-card-date span {
        display: block; font-family: var(--font-sans);
        font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em;
        color: var(--ink-soft); margin-top: 2px;
    }
    /* Multi-day desktop card date */
    .evmag-card-date.is-multiday strong { font-size: 1rem; white-space: nowrap; }
    .evmag-card-date.is-multiday span { font-size: 0.5rem; letter-spacing: 0.08em; }

    /* Bottom : infos event */
    .evmag-card-bottom {
        position: absolute; bottom: 20px; left: 20px; right: 20px;
        z-index: 3;
        flex-direction: column; gap: 8px;
    }
    .evmag-card-bottom .spot-name {
        font-family: var(--font-title); font-weight: 600; /* noms events en Fraunces comme partout (desktop=mobile) */
        font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.08;
        color: white; margin: 0;
        text-shadow: 0 2px 14px rgba(0,0,0,0.35);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .evmag-card-bottom .spot-location {
        color: rgba(255,255,255,0.85); font-size: 0.72rem;
        letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
    }
    .evmag-card-bottom .partner-chip {
        font-size: 0.6rem; padding: 3px 8px;
    }
    /* Description reveal on hover — same as spot-desc */
    .evmag-card-desc {
        font-size: 0.85rem; line-height: 1.4;
        color: rgba(255,255,255,0.88);
        max-height: 0; overflow: hidden; opacity: 0;
        transition: max-height 0.5s var(--ease), opacity 0.35s var(--ease), margin 0.35s var(--ease);
    }
    .evmag-card:hover .evmag-card-desc, .evmag-card:focus-visible .evmag-card-desc {
        max-height: 56px; opacity: 1; margin-top: 2px;
    }
    .evmag-card-meta {
        display: flex; flex-wrap: wrap; gap: 10px;
        font-size: 0.72rem; color: rgba(255,255,255,0.85);
    }

    /* ── Grid desktop : 3 colonnes fixes comme spot-grid ── */
    .evmag-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    /* Sponsor glow — exact same as spot-card.is-partner */
    .evmag-card.is-partner {
        outline: 2px solid rgba(31, 41, 55,0.9); outline-offset: -2px;
        box-shadow: 0 0 0 6px rgba(31, 41, 55,0.14), 0 14px 32px rgba(31, 41, 55,0.30);
    }
    .evmag-card.is-partner:hover {
        box-shadow: 0 0 0 8px rgba(31, 41, 55,0.20), 0 22px 50px rgba(31, 41, 55,0.38);
    }
}

/* Tablette : le grid de base (evmag-grid hors desktop) gère déjà le responsive */
@media (max-width: 720px) {
    .evmag-head { grid-template-columns: 1fr; gap: 20px; }
    .evmag-head-link { justify-self: start; }
    /* 1 colonne en mobile : toutes les tuiles + le hero en mini-horizontal.
       grid-auto-rows: auto — sinon le minmax(200px, auto) du desktop force
       chaque card à 200px+ et étire la photo. */
    .evmag-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 12px;
    }

    /* Evmag hero en mini-horizontal aussi (même format que le reste) */
    .evmag-hero {
        grid-column: span 1 !important;
        min-height: 0 !important;
        padding: 14px 16px 14px 156px !important; /* gap miniature ↔ texte = 30px */
        background-color: white !important;
        color: var(--ink) !important;
        border-radius: 14px !important;
        isolation: isolate;
        overflow: hidden;
        position: relative;
    }
    .evmag-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: white;
        z-index: 0;
        pointer-events: none;
    }
    .evmag-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 126px; height: 100%;
        background-image: inherit;
        background-size: cover;
        background-position: center;
        z-index: 1;
    }
    .evmag-hero > * { position: relative; z-index: 2; }
    .evmag-hero-scrim { display: none !important; }
    .evmag-hero-desc { display: none !important; }
    .evmag-hero-date {
        position: relative !important;
        top: auto !important; right: auto !important; left: auto !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 4px;
    }
    .evmag-hero-date strong {
        font-size: 1.4rem !important;
        color: var(--sunset-deep) !important;
        font-weight: 600;
        text-shadow: none !important;
    }
    .evmag-hero-date span {
        font-size: 0.6rem !important;
        color: var(--ink-soft) !important;
        margin-top: 0 !important;
        letter-spacing: 0.14em;
        text-shadow: none !important;
    }
    .evmag-hero-top {
        position: relative !important;
        top: auto !important; left: auto !important;
        margin-bottom: 4px;
    }
    .evmag-hero-top .evmag-cover {
        background: var(--sunset);
        color: white;
        font-size: 0.55rem;
        padding: 3px 8px;
        border-radius: 50px;
        letter-spacing: 0.1em;
    }
    .evmag-hero-body {
        position: relative !important;
        gap: 4px !important;
    }
    .evmag-hero-body h3 {
        color: var(--ink) !important;
        text-shadow: none !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        font-weight: 600;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .evmag-hero-meta {
        color: var(--ink-soft) !important;
        font-size: 0.7rem !important;
        gap: 8px !important;
    }
    .evmag-hero-meta span { color: var(--ink-soft) !important; text-shadow: none !important; }
    .evmag-hero .evmag-cat {
        align-self: flex-start;
        padding: 3px 8px;
        font-size: 0.62rem;
    }
}

/* Sponsor chip générique (réutilisé hero + spot + event) */
.partner-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, var(--sunset), var(--sunset-deep));
    color: white; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 7px 13px; border-radius: 50px;
    box-shadow: 0 8px 20px rgba(31, 41, 55,0.4);
    z-index: 3;
}

/* ==== TAG PILLS ==== */
.tag-pill {
    display: inline-block;
    padding: 4px 10px; border-radius: 50px;
    background: var(--sand-light); color: var(--ink-soft);
    font-size: 0.72rem; font-weight: 500;
    border: 1px solid rgba(139,160,200,0.2);
}
.tag-pill.light {
    background: rgba(255,255,255,0.2); color: white;
    border-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(6px);
}
.spot-tags, .event-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.event-body .event-tags { order: -1; }

.category-tab[data-event-category].active { background: var(--cat-color, var(--ink)); border-color: var(--cat-color, var(--ink)); color: white; }

/* (legacy spot-card extras retirés : spot-card V2 gère text-decoration + color lui-même) */

/* ==== SPONSORED SECTION ==== */
.partner-section { background: linear-gradient(180deg, var(--cream) 0%, rgba(31, 41, 55,0.06) 100%); }
.partner-head { text-align: center; margin-bottom: 40px; }
.partner-label {
    display: inline-block;
    background: linear-gradient(135deg, var(--sunset), var(--sunset-deep));
    color: white; font-weight: 700;
    font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 8px 18px; border-radius: 50px;
    box-shadow: 0 6px 16px rgba(31, 41, 55,0.3);
    margin-bottom: 16px;
}
.partner-head h2 { margin-bottom: 14px; }
.partner-head p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; }

.partner-grid {
    display: grid;
    /* auto-FIT + max 360px : les pistes vides se replient (carte solitaire CENTRÉE, pas collée à gauche),
       et le max 360px empêche une carte unique de s'étaler sur toute la largeur. */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 360px));
    gap: 24px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    justify-items: center;
}
/* Chaque carte partenaire : ~360px, centrée dans sa piste */
.partner-grid > .partner-card { width: 100%; max-width: 360px; margin-inline: auto; }
.partner-card {
    position: relative; background: white;
    border: 2px solid var(--sunset);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 12px 30px rgba(31, 41, 55,0.15);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    display: block; color: inherit; text-decoration: none;
}
.partner-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(31, 41, 55,0.28); }
.partner-media { height: 220px; position: relative; overflow: hidden; }
.partner-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.partner-card:hover .partner-media img { transform: scale(1.05); }
.partner-ribbon {
    position: absolute; top: 14px; left: 14px;
    background: white; color: var(--sunset-deep);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    padding: 6px 12px; border-radius: 50px;
    box-shadow: var(--shadow-sm);
}
.partner-body { padding: 22px 22px 24px; }
.partner-cat { font-size: 0.74rem; color: var(--sunset-deep); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.partner-body h3 { margin: 6px 0 10px; }
.partner-body p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 14px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ==== EVENTS PREVIEW (homepage) ==== */
.events-preview-section {
    background: linear-gradient(180deg, var(--cream) 0%, var(--sand-light) 100%);
    padding: 90px 0 100px;
    position: relative;
}
.events-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 20px;
}
.event-preview-card {
    display: block; text-decoration: none; color: inherit;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(62,78,110,0.10);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.event-preview-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(62,78,110,0.18); }
.event-preview-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.event-preview-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.event-preview-card:hover .event-preview-media img { transform: scale(1.05); }
.event-preview-date {
    position: absolute; top: 14px; left: 14px;
    background: white; color: var(--sunset-deep);
    padding: 8px 12px; border-radius: 8px;
    text-align: center; line-height: 1;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    font-family: var(--font-hand);
}
.event-preview-date strong { font-size: 1.5rem; display: block; }
.event-preview-date span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.event-preview-body { padding: 18px 20px 22px; }
.event-preview-meta { font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.event-preview-body h3 { margin: 8px 0 10px; font-size: 1.15rem; line-height: 1.25; }
.event-preview-body p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }

/* ==== COMMUNITY WHATSAPP ==== */
/* colored top strip removed — hover glow uses --group-color instead */
.group-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.whatsapp-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: #25D366; color: white;
    display: grid; place-items: center; flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(37,211,102,0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-icon:hover { transform: scale(1.08) rotate(-6deg); box-shadow: 0 10px 22px rgba(37,211,102,0.5); }

/* ==== DETAIL PAGE — V2 MAGAZINE SPLIT ==== */
.detail-page { padding-bottom: 100px; }

.detail-hero-v2 {
    padding: 140px 0 80px;
    background:
        radial-gradient(1200px 600px at 85% 10%, rgba(31, 41, 55,0.08), transparent 55%),
        radial-gradient(900px 500px at 10% 90%, rgba(139,160,200,0.26), transparent 65%),
        radial-gradient(800px 500px at 70% 80%, rgba(139,160,200,0.14), transparent 60%),
        var(--cream);
    position: relative; overflow: hidden;
}
.detail-back-v2 {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-soft); font-size: 0.92rem;
    padding: 8px 16px; border-radius: 50px;
    background: white; border: 1px solid rgba(31,36,46,0.08);
    transition: transform 0.2s, box-shadow 0.2s, color 0.2s;
    margin-bottom: 32px;
}
.detail-back-v2:hover { transform: translateX(-3px); color: var(--sunset-deep); box-shadow: 0 6px 16px rgba(31,36,46,0.08); }

.dhv2-grid {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px;
    align-items: center;
}
.dhv2-text { max-width: 560px; }
.dhv2-tags-top { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; align-items: center; }
.dhv2-tags-top .event-cat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 50px;
    color: white; font-weight: 600; font-size: 0.82rem;
    letter-spacing: 0.02em; line-height: 1;
    box-shadow: 0 6px 14px rgba(31,36,46,0.12);
}
.dhv2-tags-top .partner-chip { font-size: 0.72rem; padding: 8px 14px; }
.dhv2-title {
    font-family: var(--font-title); font-weight: 600;
    font-size: clamp(2.6rem, 5.2vw, 4.8rem); line-height: 1.02;
    letter-spacing: -0.02em; color: var(--ink);
    margin: 0 0 22px;
}
/* Noms d'events sur les cartes : même typo d'avant (Fraunces) que les noms de spots */
.partner-body h3, .ev2-bottom h3, .wm-text h4, .evmag-tile-body h4 {
    font-family: var(--font-title);
}
.dhv2-lead {
    font-size: 1.18rem; line-height: 1.55; color: var(--ink-soft);
    margin: 0 0 32px; max-width: 520px;
}
.dhv2-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px 28px; padding: 24px 0;
    border-top: 1px solid rgba(31,36,46,0.1);
    border-bottom: 1px solid rgba(31,36,46,0.1);
    margin-bottom: 30px;
}
.dhv2-meta-item { display: flex; flex-direction: column; gap: 4px; }
.dhv2-meta-item em {
    font-style: normal; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.dhv2-meta-item strong {
    font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.3;
}
.dhv2-meta-item a { color: var(--periwinkle-deep); font-weight: 500; }
.dhv2-meta-item a:hover { color: var(--sunset-deep); }
.dhv2-meta-wide { grid-column: 1 / -1; }
.dhv2-meta-wide strong { font-size: 1.08rem; font-weight: 600; }
.dhv2-meta-hours > em { display: none; }

/* === Hours card — today in focus + expandable week === */
.hours-card {
    --hc-open: #17A663;
    --hc-closed: #D23527;
    padding: 0;
}
.hours-today {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(62, 92, 118, 0.10);
    box-shadow: 0 2px 6px rgba(62, 92, 118, 0.04);
    position: relative;
}
.hours-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}
.hours-today.is-open-now  .hours-dot { background: var(--hc-open); box-shadow: 0 0 0 4px rgba(23, 166, 99, 0.18); }
.hours-today.is-closed-now .hours-dot { background: var(--hc-closed); box-shadow: 0 0 0 4px rgba(210, 53, 39, 0.15); }
.hours-today.is-open-now  .hours-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--hc-open); opacity: 0.5;
    animation:none;
}
@keyframes hours-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(2.6); opacity: 0;   }
    100% { transform: scale(2.6); opacity: 0;   }
}
.hours-today-body {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1; min-width: 0;
}
.hours-today-label {
    font-style: normal;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ink-soft);
}
.hours-today.is-open-now   .hours-today-label { color: var(--hc-open); }
.hours-today.is-closed-now .hours-today-label { color: var(--hc-closed); }
.hours-today-val {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.hours-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid rgba(62, 92, 118, 0.14);
    color: var(--ink-soft);
    padding: 6px 10px 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.hours-toggle:hover {
    background: var(--sand-light);
    border-color: rgba(62, 92, 118, 0.22);
    color: var(--ink);
}
.hours-toggle-chev { transition: transform 0.25s var(--ease); }
.hours-card[data-open="true"] .hours-toggle-chev { transform: rotate(180deg); }
.hours-week {
    list-style: none; margin: 0;
    padding: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease), opacity 0.25s var(--ease), padding 0.35s var(--ease), margin 0.35s var(--ease);
}
.hours-card[data-open="true"] .hours-week {
    max-height: 420px;
    opacity: 1;
    padding: 8px 16px 4px;
    margin-top: 8px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(62, 92, 118, 0.10);
}
.hours-week-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 0.9rem; line-height: 1.3;
    border-bottom: 1px solid rgba(62, 92, 118, 0.07);
}
.hours-week-row:last-child { border-bottom: none; }
.hours-week-day {
    font-weight: 500; color: var(--ink-soft);
    font-size: 0.88rem;
}
.hours-week-val {
    color: var(--ink); text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.hours-week-row.is-today {
    position: relative;
    padding: 9px 10px;
    margin: 0 -10px;
    background: linear-gradient(90deg, rgba(31, 41, 55, 0.10), rgba(31, 41, 55, 0) 70%);
    border-radius: 8px;
    border-bottom: 1px solid transparent;
}
.hours-week-row.is-today .hours-week-day { color: var(--sunset-deep); font-weight: 700; }
.hours-week-row.is-today .hours-week-val { color: var(--sunset-deep); font-weight: 700; }
.hours-week-row.is-closed .hours-week-val { color: rgba(62, 92, 118, 0.45); font-style: italic; font-weight: 400; }

@media (max-width: 520px) {
    .hours-today { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .hours-today-body { flex-basis: calc(100% - 30px); }
    .hours-toggle { margin-left: 24px; }
    .hours-today-val { font-size: 1rem; }
}

/* === Real brand buttons (Waze / Google Maps / Apple Plans) === */
.dhv2-nav {
    margin-top: 22px;
    display: flex; flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.dhv2-nav-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
    font-weight: 700;
    margin-right: 4px;
    width: 100%;
}
.dhv2-nav-btn {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 9px 18px 9px 9px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.09);
    border-radius: 999px;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1F2937;
    text-decoration: none;
    transition: transform 0.2s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    flex: 1 1 0;
    min-width: 0;
    max-width: 220px;
}
.dhv2-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.14);
    color: #1F2937;
    border-color: rgba(17, 24, 39, 0.15);
}
.dhv2-nav-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08); }

/* Brand tile — circular app-icon style using the authentic brand SVG inside */
.dhv2-nav-btn .brand-logo {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: block;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    overflow: visible;
}
/* The SVG is rendered as a child element — make sure it fills the tile */
.dhv2-nav-btn svg.brand-logo,
.dhv2-nav-btn > svg.brand-logo { overflow: visible; }
/* Waze — official cyan, white mono logo */
.dhv2-nav-btn .brand-waze  { background: #33CCFF; color: #fff; padding: 5px; }
/* Google Maps — white tile with the multi-color pin, slightly inset */
.dhv2-nav-btn .brand-gmaps { background: #fff; padding: 4px; }
/* Apple Plans — the real iOS Maps app icon SVG already IS the full colored tile */
.dhv2-nav-btn .brand-plans { background: transparent; padding: 0; }

/* Label (Waze / Google Maps / Plans) takes remaining space */
.dhv2-nav-btn > span { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 520px) {
    .dhv2-nav-btn { padding: 5px 12px 5px 5px; font-size: 0.82rem; gap: 8px; max-width: none; }
    .dhv2-nav-btn .brand-logo { width: 30px; height: 30px; }
    .dhv2-nav-btn .brand-waze { padding: 5px; }
    .dhv2-nav-btn .brand-gmaps { padding: 4px; }
}
.dhv2-meta-itinerary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--sunset-deep); color: #fff !important;
    border-radius: 999px;
    font-weight: 600 !important; font-size: 0.92rem;
    text-decoration: none;
    width: fit-content;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
    box-shadow: 0 6px 18px rgba(31, 41, 55, 0.28);
}
.dhv2-meta-itinerary:hover {
    transform: translateY(-2px);
    background: #D47A3A;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.42);
    color: #fff !important;
}
.dhv2-meta-itinerary svg { transition: transform 0.2s var(--ease); }
.dhv2-meta-itinerary:hover svg { transform: translateX(3px); }

.dhv2-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.dhv2-media { position: relative; }
.dhv2-media::before {
    content: ''; position: absolute;
    inset: 30px -30px -30px 30px;
    /* Photo du spot dupliquée + ultra-floutée + saturée → un fond unique
       qui respire la couleur du lieu. Fallback : dégradé sunset si pas d'image. */
    background-image: var(--spot-photo, linear-gradient(135deg, var(--sunset), var(--sunset-deep) 35%, var(--periwinkle-deep)));
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.35);
    border-radius: var(--radius-lg);
    z-index: 0; opacity: 0.88;
    transform: rotate(1.5deg);
}
.dhv2-photo {
    position: relative; z-index: 1;
    aspect-ratio: 4/5;
    background-size: cover; background-position: center;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgba(31,36,46,0.35);
    overflow: hidden;
}
.dhv2-date-stamp {
    position: absolute; top: 22px; left: 22px;
    background: white; border-radius: 18px;
    padding: 14px 18px 12px; text-align: center;
    font-family: var(--font-display); line-height: 1;
    color: var(--sunset-deep);
    box-shadow: 0 10px 24px rgba(31,36,46,0.18);
}
.dhv2-date-stamp strong { display: block; font-size: 2.4rem; font-weight: 600; }
.dhv2-date-stamp span { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

/* ==== CARROUSEL GALERIE PHOTOS (page détail spot) ==== */
.dhv2-gallery {
    position: relative; z-index: 1;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgba(31,36,46,0.35);
    overflow: hidden;
    background: var(--ink);
}
.dhv2-gallery-track {
    display: flex;
    width: 100%; height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    outline: none;
}
.dhv2-gallery-track::-webkit-scrollbar { display: none; }
.dhv2-gallery-slide {
    flex: 0 0 100%;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    position: relative;
}

/* Boutons prev/next — ronds, semi-transparents, masqués sur tactile */
.dhv2-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.92);
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(31,36,46,0.28);
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
    z-index: 4;
    opacity: 0;
}
.dhv2-gallery:hover .dhv2-gallery-nav,
.dhv2-gallery:focus-within .dhv2-gallery-nav { opacity: 1; }
.dhv2-gallery-nav:hover { background: white; transform: translateY(-50%) scale(1.08); }
.dhv2-gallery-nav:disabled { opacity: 0 !important; pointer-events: none; }
.dhv2-gallery-prev { left: 14px; }
.dhv2-gallery-next { right: 14px; }

/* Dots */
.dhv2-gallery-dots {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 7px;
    background: rgba(31,36,46,0.55);
    backdrop-filter: blur(8px);
    padding: 7px 11px;
    border-radius: 50px;
    z-index: 3;
}
.dhv2-gallery-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none; padding: 0; cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
.dhv2-gallery-dot:hover { background: rgba(255,255,255,0.75); }
.dhv2-gallery-dot.is-active {
    background: white;
    width: 22px;
    border-radius: 4px;
}

/* Compteur "1/8" */
.dhv2-gallery-counter {
    position: absolute; top: 16px; right: 16px;
    background: rgba(31,36,46,0.65);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 0.78rem; font-weight: 600;
    padding: 5px 11px;
    border-radius: 50px;
    letter-spacing: 0.04em;
    z-index: 3;
}

@media (max-width: 720px) {
    .dhv2-gallery-nav { display: none; }
    .dhv2-gallery-counter { font-size: 0.72rem; padding: 4px 9px; top: 12px; right: 12px; }
    .dhv2-gallery-dots { bottom: 12px; padding: 6px 10px; }
}

/* Body below hero */
.detail-body-v2 { padding-top: 70px; }
.dbv2-grid {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 70px;
    align-items: start;
}
.dbv2-main { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); max-width: 680px; }
.dbv2-main > p:first-child {
    font-size: 1.3rem; line-height: 1.55;
    color: var(--ink); font-weight: 500;
    margin-bottom: 28px;
    padding-left: 20px; border-left: 3px solid var(--sunset-deep);
}
.dbv2-main p { margin-bottom: 18px; }
.dbv2-main .detail-tags { margin-top: 28px; }

.dbv2-aside { position: sticky; top: 120px; align-self: start; }

/* Related grid: taille fixe peu importe le nombre de cartes */
.detail-page .event-grid,
.detail-page .spot-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
    justify-content: start;
}
.dbv2-card {
    background: white;
    border: 1px solid rgba(139,160,200,0.22);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow);
}
.dbv2-card h3 { margin-bottom: 18px; font-size: 1.1rem; letter-spacing: -0.01em; }
.dbv2-card .detail-info { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.dbv2-card .detail-info li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--ink-soft); }
.dbv2-card .detail-info li span:first-child { width: 22px; flex-shrink: 0; }
.dbv2-card .detail-info a { color: var(--periwinkle-deep); font-weight: 500; }
.dbv2-card .detail-info a:hover { color: var(--sunset-deep); }

.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==== RESPONSIVE V2 ==== */
@media (max-width: 960px) {
    .hero-v2-inner { grid-template-columns: 1fr; gap: 50px; }
    .hero-v3-inner { gap: 30px; }
    /* Le hero est display:flex → quand le scatter passe en relative, il faut empiler */
    .hero-v3:has(.hv3-scatter) { flex-direction: column; }
    .hero-v2-visual { height: 440px; }
    /* Tablet : scatter revient en position relative, stack vertical sous le rectangle */
    .hero-v3-visual.hv3-scatter {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        width: 100%; max-width: 520px;
        margin-left: auto; margin-right: auto;
        display: flex; flex-direction: column; align-items: center;
        gap: 18px; padding-top: 40px; overflow: visible;
        pointer-events: auto;
        z-index: 4;
    }
    .hero-v3:has(.hv3-scatter) .hero-v3-text { max-width: none; }
    .hero-v3:has(.hv3-scatter) .hero-v3-inner { pointer-events: auto; }
    /* Toutes les cartes en stack vertical (reset des positions desktop) */
    .hv3-scrap {
        position: static !important; width: min(300px, 100%) !important; height: auto !important;
        transform: rotate(0) !important; margin: 0 !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    }
    .hv3-scrap:nth-child(odd)  { transform: rotate(-1.5deg) !important; }
    .hv3-scrap:nth-child(even) { transform: rotate(1.5deg) !important; }
    .detail-body { grid-template-columns: 1fr; gap: 32px; }
    .detail-aside { position: static; }
    .dhv2-grid { grid-template-columns: 1fr; gap: 50px; }
    .dhv2-media { max-width: 480px; margin: 0 auto; width: 100%; }
    .dbv2-grid { grid-template-columns: 1fr; gap: 40px; }
    .dbv2-aside { position: static; }
    .postcard-sticker { width: 90px; height: 90px; padding: 12px; }
    .postcard-sticker strong { font-size: 1.1rem; }
}
@media (max-width: 720px) {
    .hero-v2, .hero-v3 { padding-top: 110px; min-height: auto; }
    .hero-hand-title .line-main { font-size: 3.8rem; }
    /* hv3-scatter est refondu plus bas (stack vertical) */
    .weekend-hero { height: clamp(260px, 50vw, 340px); }
    .weekend-hero-bottom { right: 35%; }
    .weekend-hero-date { right: 18px; }
    .weekend-hero-date .wh-day { font-size: clamp(2.2rem, 8vw, 3.4rem); }
    .weekend-hero-date.is-multiday .wh-day { font-size: clamp(1.4rem, 4vw, 2rem); }
    .weekend-list { grid-template-columns: 1fr; }
    .detail-hero-v2 { padding: 110px 0 50px; }
    .dhv2-title { font-size: clamp(2.1rem, 7vw, 3rem); }
    .dhv2-media::before { inset: 20px -18px -18px 20px; }
    .detail-body-v2 { padding-top: 50px; }
}

/* ==== CARTE ==== */
.page-hero-carte { padding-bottom: 40px; }
.carte-section { padding: 20px 0 100px; }
.carte-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.carte-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.carte-filter {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 999px;
    background: white; border: 1.5px solid rgba(62, 92, 118, 0.15);
    color: var(--ink); font-family: var(--font-sans); font-weight: 600;
    font-size: 0.92rem; cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.carte-filter:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.carte-filter.active {
    background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.carte-filter .cf-count { color: rgba(0,0,0,0.4); font-weight: 500; margin-left: 2px; }
.carte-filter.active .cf-count { color: rgba(255,255,255,0.55); }
.cf-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cf-dot-all   { background: linear-gradient(135deg, #E08A4A 50%, #7590B8 50%); }
.cf-dot-spot  { background: var(--periwinkle-deep); }   /* plus d'orange hors partenaire */
.cf-dot-event { background: #7590B8; }

/* Sous-filtres par catégorie (affichés sous les filtres principaux) */
.carte-subfilters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: -12px 0 22px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.6);
    border: 1px dashed rgba(62,92,118,0.18);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: carte-subfade 0.28s var(--ease);
}
.carte-subfilters[hidden] { display: none; }
.carte-subfilter-label {
    font-family: var(--font-display); font-style: italic;
    color: rgba(31,41,55,0.65); font-size: 0.9rem;
    margin-right: 4px;
}
.carte-subfilter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: white; border: 1.5px solid rgba(62,92,118,0.12);
    color: var(--ink); font-family: var(--font-sans); font-weight: 600;
    font-size: 0.82rem; cursor: pointer;
    transition: transform 0.15s var(--ease), border-color 0.15s var(--ease),
                background 0.15s var(--ease), color 0.15s var(--ease);
}
.carte-subfilter:hover {
    transform: translateY(-1px);
    border-color: var(--cat-color, var(--periwinkle-deep));
}
.carte-subfilter.active {
    background: var(--cat-color, var(--ink));
    color: white;
    border-color: var(--cat-color, var(--ink));
}
.carte-subfilter .csf-emoji { font-size: 0.95em; }
.carte-subfilter .csf-count { color: rgba(0,0,0,0.4); font-weight: 500; }
.carte-subfilter.active .csf-count { color: rgba(255,255,255,0.55); }
@keyframes carte-subfade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.carte-legend-hint {
    font-family: var(--font-display); font-style: italic;
    color: rgba(31, 41, 55, 0.6); font-size: 0.95rem;
}
.carte-wrap {
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: 0 30px 70px rgba(31, 41, 55, 0.18);
    border: 1px solid rgba(62, 92, 118, 0.12);
}
.carte-map {
    width: 100%; height: clamp(520px, 72vh, 780px);
    background: #e9e2d3;
}

/* Leaflet overrides */
.leaflet-container { font-family: var(--font-sans); background: #F4ECD8; }
.leaflet-control-zoom a {
    border-radius: 10px !important;
    color: var(--ink) !important;
    border-color: rgba(62, 92, 118, 0.15) !important;
}
.leaflet-control-attribution {
    font-size: 0.7rem !important;
    background: rgba(255,255,255,0.85) !important;
    border-radius: 6px 0 0 0 !important;
}

/* Pins — style puck moderne (inspiré Airbnb / Apple Maps) */
.pin-icon { background: transparent !important; border: none !important; }
/* Les partenaires passent DEVANT tous les autres pins, sur toutes les cartes du site.
   Valeur haute et non 500 : Leaflet calcule le z-index d'un pin normal en ajoutant sa
   position verticale, ce qui le faisait repasser devant le partenaire dès qu'il était
   plus bas dans la fenêtre (mesuré : 1364 contre 500). Théo, 7 août 2026. */
.pin-icon-xl { z-index: 100000 !important; }
.pin {
    position: relative;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform 0.22s cubic-bezier(.2,.8,.2,1);
}
.pin:hover { transform: scale(1.12) translateY(-3px); z-index: 600; }
.pin-xl:hover { transform: scale(1.08) translateY(-3px); }

/* Disque principal */
.pin-disc {
    position: absolute;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2.5px solid var(--ink);
    box-shadow:
        0 6px 14px rgba(31, 41, 55, 0.22),
        0 2px 4px rgba(31, 41, 55, 0.12);
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 0.22s var(--ease);
    z-index: 2;
}
.pin-emoji {
    font-size: 17px;
    line-height: 1;
    filter: drop-shadow(0 1px 0.5px rgba(0,0,0,0.12));
}

/* Pointe sous le disque */
.pin-tail {
    position: absolute;
    left: 50%;
    top: 32px;
    width: 10px; height: 10px;
    background: #ffffff;
    border-right: 2.5px solid var(--ink);
    border-bottom: 2.5px solid var(--ink);
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
    box-shadow: 2px 2px 4px rgba(31, 41, 55, 0.1);
}

/* Différenciation NETTE lieu vs sortie (orange = réservé aux partenaires) :
   - SPOT (lieu)   = disque BLANC cerclé bleu, icône bleue  (contour)
   - EVENT (sortie) = disque BLEU PLEIN, icône blanche       (plein) */
.pin-spot .pin-disc  { border-color: #7590B8; background: #fff; }
.pin-spot .pin-emoji { color: #7590B8; }
.pin-spot .pin-tail  { background: #fff; border-right-color: #7590B8; border-bottom-color: #7590B8; }
.pin-event .pin-disc  { border-color: #fff; background: #7590B8; }
.pin-event .pin-emoji { color: #fff; }
.pin-event .pin-tail  { background: #7590B8; border-right-color: #fff; border-bottom-color: #fff; }

/* Zoom Leaflet fluide : pins « à plat » pendant l'animation de zoom. Sans ça, les
   box-shadow (×2) + drop-shadow de chaque pin sont repeints à chaque frame quand
   Leaflet repositionne les ~26 marqueurs → le zoom lague. La classe .map-zooming
   est posée par le JS (zoomstart→zoomend) le temps de l'animation seulement. */
.map-zooming .pin,
.map-zooming .pin-disc { transition: none !important; }
/* PASTILLE CENTRÉE : la forme des pins quand on est dézoomé. Une goutte est ancrée par
   sa pointe et se dessine vers le haut ; à la vue « tout le bassin » son corps couvre
   650m et se retrouve au large d'un lieu pourtant posé sur la berge. Mesuré le 7 août
   2026 contre la tuile d'image : la pointe est juste, c'est la forme qui ment.
   La pastille, elle, est centrée sur le point : symétrique, donc honnête. */
.pin.pin-pastille { display: block; }
.pin.pin-pastille .pin-tail { display: none; }
.pin.pin-pastille .pin-disc {
    width: 100%; height: 100%; position: absolute; inset: 0; margin: 0;
    border-width: 2px;
}
/* Le symbole occupe une part FIXE du disque : dimensionne en em il tombait a 9px de
   large, illisible. En pourcentage, il suit la pastille quelle que soit sa taille. */
.pin.pin-pastille .pin-emoji {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1em;
}
.pin.pin-pastille .pin-emoji svg { width: 52%; height: 52%; }
.pin.pin-pastille .pin-bubble { bottom: 100%; margin-bottom: 7px; }
.pin.pin-pastille .pin-star { transform: scale(calc(.8 * var(--nmkz, 1))); transform-origin: top right; }
.pin.pin-pastille .pin-evbadge { transform: scale(calc(.82 * var(--nmkz, 1))); transform-origin: top right; }

/* COMPENSATION DU ZOOM CSS DU THEME (html{zoom:.67-.92} en desktop), pilotee par la
   variable --nmkz posee sur le conteneur de la carte. La GOUTTE est mise a l'echelle
   depuis sa POINTE : la boite Leaflet garde sa taille de conception et l'ancre reste
   exacte au pixel. Agrandir la boite decalait le dessin, la pointe visible partait a
   9px a gauche et 17px au-dessus de l'ancre (audit du 7 aout 2026). L'etoile, le
   compteur et la bulle sont DANS l'element mis a l'echelle : ils suivent d'eux-memes. */
.leaflet-marker-icon .pin:not(.pin-pastille) { transform: scale(var(--nmkz, 1)); transform-origin: bottom center; }
/* La pastille est agrandie a la source (voir makeIcon) : seule sa bulle, en pixels
   fixes, a besoin de la meme compensation. */
/* La bulle « c'est ce week-end » garde la MEME taille, qu'elle soit posee sur une
   pastille ou sur un amas : les deux hotes sont vises. Sans .lab-mini-hote, les bulles
   des amas restaient a la taille de base pendant que les autres etaient compensees,
   d'ou deux tailles a l'ecran (mesure du 7 aout 2026 : 98px contre 124px). Les bulles
   des gouttes, elles, suivent deja l'echelle de leur pin parent. */
.pin.pin-pastille .pin-bubble,
.lab-mini-hote .pin-bubble { transform: translateX(-50%) scale(var(--nmkz, 1)); transform-origin: bottom center; }
.map-zooming .pin-disc { box-shadow: none !important; }
.map-zooming .pin-emoji { filter: none !important; }
.map-zooming .pin-halo { display: none !important; }

/* ===== Légende des pins (bas-gauche des cartes : hero HP + /carte/) ===== */
.map-legend {
    position: absolute; left: 16px; bottom: 16px; z-index: 1000;
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(62,92,118,.16); border-radius: 12px;
    padding: 9px 12px; box-shadow: 0 6px 18px rgba(31,41,55,.14);
    font-family: var(--font-sans); font-size: .76rem; font-weight: 600; color: var(--ink);
    pointer-events: none;
}
.map-legend .ml-item { display: flex; align-items: center; gap: 8px; line-height: 1; }
/* ENTRÉE QUI FILTRE = vrai bouton. Sans fond ni bordure, personne ne devinait qu'on
   pouvait cliquer. L'entrée active se remplit, comme un pin de sortie : c'est le même
   langage que le reste de la carte. Hauteur minimale de 40px, c'est une cible tactile. */
button.ml-item {
    /* Le bandeau de légende porte « pointer-events: none » pour ne pas bloquer la carte
       en dessous. Il faut donc re-autoriser le clic sur le bouton lui-même, sinon la
       légende ne répond à rien. C'est ce qui manquait sur la carte de l'accueil. */
    pointer-events: auto;
    cursor: pointer; font: inherit; font-weight: 700; color: var(--ink);
    background: #fff; border: 1px solid rgba(62, 92, 118, .2); border-radius: 10px;
    padding: 8px 14px; min-height: 40px; box-sizing: border-box; white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
button.ml-item:hover { border-color: var(--periwinkle-deep); background: var(--sand-light, #F7F5F0); }
button.ml-item:focus-visible { outline: 2px solid var(--periwinkle-deep); outline-offset: 2px; }
button.ml-item.is-active {
    background: var(--periwinkle-deep); border-color: var(--periwinkle-deep); color: #fff;
}
button.ml-item.is-active b { color: #fff; }
button.ml-item.is-active .ml-pin-spot { border-color: #fff; }
button.ml-item.is-active .ml-pin-event { background: #fff; box-shadow: none; }
.map-legend.has-active button.ml-item:not(.is-active) { opacity: .62; }
.map-legend .ml-pin { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-sizing: border-box; }
.ml-pin-spot    { background: #fff; border: 2.5px solid #7590B8; }
.ml-pin-event   { background: #7590B8; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(117,144,184,.55); }
.ml-pin-partner { background: linear-gradient(135deg, #F4A261, #E08A4A); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(224,138,74,.55); }
/* /carte/ desktop : légende JUSTE SOUS le panneau de gauche, MÊME LARGEUR (384px), en ligne */
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape){
    .carte-fullscreen .carte-panel { bottom: 78px; }        /* on remonte le bas du panneau pour loger la légende dessous */
    .carte-app .map-legend {
        left: 20px; right: auto; width: 384px; max-width: calc(100vw - 40px); bottom: 22px;
        flex-direction: row; justify-content: space-around; gap: 4px;
    }
}
/* /carte/ mobile : légende en HAUT-GAUCHE, une ligne, même hauteur que « Tout le Bassin » */
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
    .carte-app .map-legend {
        display: flex; flex-direction: row; gap: 12px;
        /* Sa propre ligne, sous les deux boutons de la bande du haut : avec ses trois
           entrées et leurs compteurs elle ne tient plus à côté d'eux. */
        left: 12px; top: 156px; right: auto; bottom: auto;
        padding: 7px 12px; font-size: .72rem;
    }
    .carte-app .map-legend .ml-pin { width: 12px; height: 12px; }
    /* Plus de masquage de « Partenaires » : la légende a rejoint le tiroir, où la place
       ne manque pas, et le doublon des filtres rapides a été retiré. La masquer ici
       supprimerait purement et simplement le filtre partenaires sur mobile. */
}

/* Sponsorisé = plus gros, anneau doré, halo pulsé, étoile */
.pin-xl .pin-disc {
    width: 48px; height: 48px;
    border-width: 3px;
    border-color: #ffffff;
    background: linear-gradient(135deg, #F4A261 0%, #E08A4A 100%);
    box-shadow:
        0 0 0 3px rgba(224, 138, 74, 0.30),
        0 10px 22px rgba(31, 41, 55, 0.30),
        0 3px 6px rgba(31, 41, 55, 0.15);
}
.pin-xl .pin-emoji { font-size: 22px; color: #fff; }
.pin-xl .pin-tail {
    top: 44px;
    width: 12px; height: 12px;
    background: #E08A4A;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-width: 3px;
}
.pin-halo {
    position: absolute;
    top: 0; left: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(31, 41, 55, 0.35);
    animation:none;
    pointer-events: none;
    z-index: 0;
}
@keyframes pin-halo {
    0%   { transform: scale(0.85); opacity: 0.7; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}
.pin-star {
    position: absolute;
    top: -3px; right: -5px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #ffffff;
    color: #E08A4A;
    font-size: 12px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(31, 41, 55, 0.4), 0 0 0 2.5px #E08A4A;
    z-index: 4;
}
.pin:hover .pin-disc {
    box-shadow:
        0 12px 22px rgba(31, 41, 55, 0.28),
        0 4px 8px rgba(31, 41, 55, 0.15);
}
.pin-xl:hover .pin-disc {
    box-shadow:
        0 0 0 4px rgba(31, 41, 55, 0.25),
        0 14px 28px rgba(31, 41, 55, 0.45),
        0 4px 8px rgba(31, 41, 55, 0.18);
}

/* Popup */
.leaflet-popup-content-wrapper {
    border-radius: var(--radius) !important;
    padding: 0 !important; overflow: hidden;
    box-shadow: 0 20px 50px rgba(31, 41, 55, 0.25) !important;
}
.leaflet-popup-content { margin: 0 !important; width: 300px !important; }
.leaflet-popup-tip { background: white !important; }
.nomade-popup .leaflet-popup-close-button {
    color: white !important;
    width: 28px !important; height: 28px !important;
    font-size: 20px !important; font-weight: 300 !important;
    padding: 2px 0 0 0 !important;
    top: 8px !important; right: 8px !important;
    background: rgba(0,0,0,0.4) !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 24px !important;
}
.map-popup { font-family: var(--font-sans); }
.popup-img {
    height: 140px; background-size: cover; background-position: center;
    position: relative;
}
.popup-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.35));
}
.popup-chip {
    position: absolute; top: 12px; left: 12px;
    color: white; font-weight: 600; font-size: 0.75rem;
    padding: 5px 11px; border-radius: 9px;
    z-index: 2;
}
.popup-sponsor {
    position: absolute; bottom: 12px; left: 12px;
    background: #F4C94A; color: var(--ink);
    font-weight: 700; font-size: 0.7rem;
    padding: 4px 10px; border-radius: 9px;
    z-index: 2;
}
.popup-body { padding: 16px 18px 18px; }
.popup-body h3 {
    font-family: var(--font-display); font-size: 1.2rem;
    margin: 0 0 6px; color: var(--ink); line-height: 1.2;
}
.popup-desc { font-size: 0.88rem; color: rgba(31,41,55,0.7); margin: 0 0 12px; line-height: 1.45; }
.popup-meta {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--periwinkle-deep);
    font-weight: 500; margin-bottom: 10px;
}
.popup-addr {
    font-size: 0.78rem; color: var(--ink-soft);
    margin: 10px 0 14px; padding: 8px 10px;
    background: var(--sand-light); border-radius: 8px;
    display: flex; align-items: flex-start; gap: 6px; line-height: 1.35;
    border-left: 3px solid var(--sunset-deep);
}
.popup-actions { display: flex; gap: 8px; }
.popup-btn {
    flex: 1; text-align: center;
    padding: 9px 10px; border-radius: 10px;
    font-size: 0.82rem; font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.popup-btn-primary,
.leaflet-popup-content a.popup-btn-primary {
    background: var(--sunset-deep);
    color: #fff !important;
}
.popup-btn-primary:hover,
.leaflet-popup-content a.popup-btn-primary:hover {
    transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31, 41, 55, 0.4);
    color: #fff !important;
}
.popup-btn-ghost {
    background: rgba(62, 92, 118, 0.08); color: var(--periwinkle-deep);
    border: 1px solid rgba(62, 92, 118, 0.15);
}
.popup-btn-ghost:hover { background: rgba(62, 92, 118, 0.12); }

/* === Popup navigation (Waze / Google Maps / Apple Plans) === */
.popup-nav {
    margin: 10px 0 14px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(139, 160, 200, 0.16), rgba(139, 160, 200, 0.04));
    border-radius: 10px;
    border: 1px solid rgba(62, 92, 118, 0.1);
}
.popup-nav-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 7px;
}
.popup-nav-btns {
    display: grid;
    /* 3 colonnes égales toujours — les boutons remplissent leur cellule */
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.popup-nav-btn {
    /* `flex` (block-level) → remplit la cellule grid (sinon `inline-flex` reste à la taille du contenu) */
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.09);
    color: #1F2937;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Sur popup étroit : on compacte typo + padding pour tout garder sur une ligne */
@media (max-width: 480px) {
    .popup-nav-btns { gap: 5px; }
    .popup-nav-btn {
        font-size: 0.72rem;
        padding: 5px 7px 5px 4px;
        gap: 4px;
    }
    .popup-nav-btn .brand-logo,
    .popup-nav-btn > svg:first-of-type { width: 22px; height: 22px; }
}
/* Très très petit popup (≤320px) : on cache le label, garde juste les icônes */
@media (max-width: 320px) {
    .popup-nav-btn {
        font-size: 0;
        padding: 5px;
        justify-content: center;
    }
    .popup-nav-btn .brand-logo,
    .popup-nav-btn > svg:first-of-type { width: 26px; height: 26px; }
}
.popup-nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
    color: #1F2937;
    border-color: rgba(17, 24, 39, 0.15);
}
.popup-nav-btn .brand-logo {
    flex-shrink: 0; width: 24px; height: 24px; display: block;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.05);
    object-fit: contain;
}
.popup-nav-btn .brand-waze  { background: #33CCFF; color: #fff; padding: 4px; }
.popup-nav-btn .brand-gmaps { background: #fff; padding: 3px; }
.popup-nav-btn .brand-plans { background: transparent; padding: 0; }
/* Fallback pour les logos SVG inline sans classe brand-* */
.popup-nav-btn > svg:first-of-type {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
}

@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
    .carte-map { height: 60vh; }
    .carte-toolbar { flex-direction: column; align-items: center; }
    .carte-filters { justify-content: center; }
    .leaflet-popup-content { width: 260px !important; }

    /* --- Popup compact mobile --- */
    .leaflet-popup-content .popup-img { height: 110px; }
    .leaflet-popup-content .popup-body { padding: 12px 14px 14px; }
    .leaflet-popup-content .popup-body h3 { font-size: 1.05rem; margin-bottom: 4px; }
    .leaflet-popup-content .popup-meta { margin-bottom: 6px; }
    .leaflet-popup-content .popup-addr { margin: 6px 0 8px; padding: 6px 8px; font-size: 0.74rem; }
    .leaflet-popup-content .popup-nav { margin: 6px 0 8px; padding: 8px 10px; }
    .leaflet-popup-content .popup-nav-label { margin-bottom: 5px; font-size: 0.62rem; }

    /* GPS buttons : 3 colonnes icône-only, compacts */
    .leaflet-popup-content .popup-nav-btns {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .leaflet-popup-content .popup-nav-btn {
        font-size: 0;          /* cache le texte */
        padding: 8px;
        justify-content: center;
        border-radius: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .leaflet-popup-content .popup-nav-btn .brand-logo,
    .leaflet-popup-content .popup-nav-btn > svg:first-of-type {
        width: 28px; height: 28px;
    }

    .leaflet-popup-content .popup-actions { margin-top: 2px; }
    .leaflet-popup-content .popup-btn { padding: 7px 8px; font-size: 0.78rem; }
}

/* =====================================================
   PAGE CONTACT — Instagram en priorité + formulaire doux
   ===================================================== */
.contact-section { padding: 40px 0 100px; overflow-x: clip; }

/* ---- Bloc Instagram (priorité) ---- */
.contact-ig {
    position: relative;
    border-radius: 28px;
    padding: 2px;
    background: linear-gradient(135deg, #E08A4A 0%, #C13584 45%, #833AB4 70%, #405DE6 100%);
    box-shadow: 0 24px 60px rgba(193, 53, 132, 0.22);
    margin-bottom: 56px;
}
.contact-ig-glow {
    position: absolute; inset: -20px; z-index: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(31, 41, 55, 0.25), transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(193, 53, 132, 0.18), transparent 60%);
    filter: blur(30px); opacity: 0.9;
    pointer-events: none;
}
.contact-ig-inner {
    position: relative; z-index: 1;
    background: var(--white);
    border-radius: 26px;
    padding: 44px 48px;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 48px; align-items: center;
}
.contact-ig-left { display: flex; flex-direction: column; gap: 14px; }
.contact-ig-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    width: fit-content;
    font-family: var(--font-hand);
    font-size: 1.5rem; color: var(--sunset-deep);
    transform: rotate(-2deg);
}
.contact-ig-eyebrow::before {
    content: ''; width: 22px; height: 2px; background: var(--sunset); border-radius: 2px;
}
.contact-ig-left h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; }
.contact-ig-left p { color: var(--ink-soft); font-size: 1.02rem; max-width: 460px; }
.contact-ig-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.contact-ig-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px;
    font-weight: 600; font-size: 0.96rem;
    transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), filter 0.22s var(--ease);
}
.contact-ig-btn-primary {
    background: var(--periwinkle-deep);
    color: #fff;
    box-shadow: 0 10px 26px rgba(193, 53, 132, 0.38);
}
.contact-ig-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 32px rgba(193, 53, 132, 0.52); }
.contact-ig-btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid rgba(62, 78, 110, 0.18);
}
.contact-ig-btn-ghost:hover { border-color: var(--sunset-deep); color: var(--sunset-deep); transform: translateY(-2px); }

/* Mock conversation IG */
.contact-ig-right { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.contact-ig-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(62, 92, 74, 0.08);
    color: var(--pine);
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em;
}
.contact-ig-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4CC17A;
    box-shadow: 0 0 0 4px rgba(76, 193, 122, 0.22);
    animation:none;
}
@keyframes contact-ig-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(76, 193, 122, 0.22); }
    50%       { box-shadow: 0 0 0 8px rgba(76, 193, 122, 0.0); }
}
.contact-ig-mock {
    width: 100%; max-width: 340px;
    background: var(--sand-light);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: 0 12px 32px rgba(62, 78, 110, 0.12);
    display: flex; flex-direction: column; gap: 10px;
}
.contact-ig-mock-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(62, 78, 110, 0.08);
}
.contact-ig-mock-avatar {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.contact-ig-mock-avatar img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.contact-ig-mock-head > div { display: flex; flex-direction: column; line-height: 1.2; }
.contact-ig-mock-head strong { font-size: 0.84rem; color: var(--ink); }
.contact-ig-mock-head span { font-size: 0.72rem; color: var(--pine-light); }
.contact-ig-mock-bubble {
    max-width: 85%;
    padding: 10px 14px; border-radius: 18px;
    font-size: 0.88rem; line-height: 1.4;
}
.contact-ig-mock-bubble-in {
    align-self: flex-start;
    background: #fff;
    color: var(--ink);
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 8px rgba(62, 78, 110, 0.06);
}
.contact-ig-mock-bubble-out {
    align-self: flex-end;
    background: linear-gradient(135deg, #F4A261 0%, #E08A4A 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
}

/* ---- Séparateur ---- */
.contact-sep {
    display: flex; align-items: center; gap: 16px;
    margin: 20px auto 40px; max-width: 640px;
}
.contact-sep-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(62, 78, 110, 0.22), transparent); }
.contact-sep-text {
    font-family: var(--font-hand); font-size: 1.2rem; color: var(--ink-soft); white-space: nowrap;
}

/* ---- Formulaire ---- */
.contact-form-wrap {
    background: var(--white);
    border-radius: 28px;
    padding: 40px 44px;
    box-shadow: 0 18px 50px rgba(62, 78, 110, 0.10);
    max-width: 860px; margin: 0 auto;
}
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.contact-form-error {
    padding: 12px 16px; border-radius: 12px;
    background: rgba(31, 41, 55, 0.14);
    color: var(--sunset-deep);
    font-size: 0.92rem; font-weight: 600;
}

.contact-field {
    display: flex; flex-direction: column; gap: 6px;
    border: none; padding: 0; margin: 0;
}
.contact-field > span, .contact-field > legend {
    font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
    letter-spacing: 0.02em;
}
.contact-field input,
.contact-field textarea {
    font-family: inherit; font-size: 0.98rem; color: var(--ink);
    padding: 12px 16px; border-radius: 14px;
    border: 1.5px solid rgba(62, 78, 110, 0.14);
    background: var(--sand-light);
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
    width: 100%;
}
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--periwinkle);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(138, 165, 196, 0.18);
}
.contact-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Raisons — cards cliquables */
.contact-reasons {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    margin-top: 10px;
}
.contact-reason { cursor: pointer; }
.contact-reason input { position: absolute; opacity: 0; pointer-events: none; }
.contact-legend-hint {
    font-weight: 400; color: var(--muted);
    font-size: 0.76rem; letter-spacing: 0;
    margin-left: 4px;
}
.contact-reason-card {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 16px 18px 44px; border-radius: 16px;
    border: 1.5px solid rgba(62, 78, 110, 0.14);
    background: var(--sand-light);
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    height: 100%;
}
/* Check indicator — case visible top-left */
.contact-reason-check {
    position: absolute; top: 18px; left: 14px;
    width: 20px; height: 20px; border-radius: 6px;
    border: 1.8px solid rgba(62, 78, 110, 0.28);
    background: #fff;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
    display: grid; place-items: center;
}
.contact-reason-check::after {
    content: ''; width: 10px; height: 6px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0; transition: opacity 0.15s var(--ease);
}
.contact-reason input:checked + .contact-reason-card .contact-reason-check {
    background: var(--sunset-deep);
    border-color: var(--sunset-deep);
}
.contact-reason input:checked + .contact-reason-card .contact-reason-check::after { opacity: 1; }
.contact-reason input:focus-visible + .contact-reason-card {
    box-shadow: 0 0 0 4px rgba(138, 165, 196, 0.28);
}
.contact-reason-card:hover {
    border-color: var(--periwinkle);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(62, 78, 110, 0.08);
}
.contact-reason input:checked + .contact-reason-card {
    border-color: var(--sunset-deep);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.22), 0 8px 22px rgba(31, 41, 55, 0.16);
}
.contact-reason-emoji { font-size: 1.5rem; }
.contact-reason-card strong { font-size: 0.96rem; color: var(--ink); font-weight: 600; }
.contact-reason-card em {
    font-style: normal; font-size: 0.8rem; color: var(--ink-soft);
    font-weight: 400; line-height: 1.4;
}
.contact-reason-card-sponsor {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.10), rgba(31, 41, 55, 0.02));
    border-color: rgba(31, 41, 55, 0.28);
}
.contact-reason-card-sponsor .contact-reason-emoji { color: var(--sunset-deep); }
.contact-reason input:checked + .contact-reason-card-sponsor {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.18), rgba(31, 41, 55, 0.05));
}

/* Sous-bloc partenaire : révélé quand la case partner est cochée */
.contact-partner-sub {
    display: none;
    margin-top: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.08), rgba(31, 41, 55, 0.02));
    border: 1.5px dashed rgba(31, 41, 55, 0.4);
    border-radius: 16px;
    flex-direction: column; gap: 12px;
    animation: contact-sub-in 0.3s var(--ease);
}
/* Affichage quand partenaire est coché (supporte Chrome/Safari/Firefox 121+) */
.contact-form:has(input[name="reason[]"][value="partner"]:checked) .contact-partner-sub { display: flex; }
@keyframes contact-sub-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.contact-partner-sub-label {
    font-size: 0.82rem; font-weight: 600; color: var(--sunset-deep);
    letter-spacing: 0.02em;
}
.contact-partner-sub-label em {
    font-style: normal; font-weight: 400; color: var(--ink-soft);
    font-size: 0.76rem; margin-left: 4px;
}
.contact-partner-sub-choices {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.contact-partner-opt { cursor: pointer; }
.contact-partner-opt input { position: absolute; opacity: 0; pointer-events: none; }
.contact-partner-opt-card {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px 12px 42px;
    background: #fff; border: 1.5px solid rgba(62, 78, 110, 0.14);
    border-radius: 12px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
    height: 100%;
}
.contact-partner-opt-card:hover { border-color: var(--sunset); transform: translateY(-1px); }
.contact-partner-opt-check {
    position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.8px solid rgba(62, 78, 110, 0.28);
    background: #fff;
    display: grid; place-items: center;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.contact-partner-opt-check::after {
    content: ''; width: 9px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0; transition: opacity 0.15s var(--ease);
}
.contact-partner-opt input:checked + .contact-partner-opt-card {
    border-color: var(--sunset-deep);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.18);
}
.contact-partner-opt input:checked + .contact-partner-opt-card .contact-partner-opt-check {
    background: var(--sunset-deep); border-color: var(--sunset-deep);
}
.contact-partner-opt input:checked + .contact-partner-opt-card .contact-partner-opt-check::after { opacity: 1; }
.contact-partner-opt-emoji { font-size: 1.4rem; }
.contact-partner-opt-text { display: flex; flex-direction: column; line-height: 1.25; }
.contact-partner-opt-text strong { font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.contact-partner-opt-text em {
    font-style: normal; font-size: 0.74rem; color: var(--ink-soft);
    font-weight: 400; line-height: 1.35;
}
@media (max-width: 720px) {
    .contact-partner-sub-choices { grid-template-columns: 1fr; }
}

/* Submit */
.contact-submit-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    margin-top: 8px;
}
.contact-submit {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px; border-radius: 999px;
    background: linear-gradient(135deg, var(--sunset) 0%, var(--sunset-deep) 100%);
    color: #fff; font-weight: 700; font-size: 1rem;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.36);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), gap 0.2s var(--ease), filter 0.2s var(--ease);
}
.contact-submit:hover {
    transform: translateY(-2px); gap: 14px;
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(31, 41, 55, 0.52);
}
.contact-submit-hint { font-size: 0.82rem; color: var(--ink-soft); }

/* Succès */
.contact-success {
    text-align: center; padding: 40px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.contact-success-ico {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, #6B8E78 0%, #3E5C4A 100%);
    color: #fff; font-size: 1.8rem; font-weight: 700;
    display: grid; place-items: center;
    box-shadow: 0 12px 28px rgba(62, 92, 74, 0.32);
    margin-bottom: 8px;
}
.contact-success h3 { font-size: 1.8rem; color: var(--ink); }
.contact-success p { color: var(--ink-soft); max-width: 440px; margin: 0 auto; }
.contact-success a { color: var(--sunset-deep); font-weight: 600; text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
    .contact-ig-inner { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
    .contact-ig-right { align-items: stretch; }
    .contact-ig-mock { max-width: none; }
}
@media (max-width: 720px) {
    .contact-section { padding: 30px 0 70px; }
    .contact-form-wrap { padding: 28px 22px; border-radius: 22px; }
    .contact-row { grid-template-columns: 1fr; gap: 16px; }
    .contact-reasons { grid-template-columns: 1fr; }
    .contact-submit-row { flex-direction: column; align-items: stretch; }
    .contact-submit { justify-content: center; }
}

/* ==== UTILS / REVEAL ==== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* =====================================================
   RESPONSIVE FINAL PASS — placé en fin pour prévaloir
   sur les règles antérieures via l'ordre du cascade.
   3 breakpoints : 960px / 720px / 480px.
   ===================================================== */

/* ---- TABLETTE PAYSAGE & PETITS DESKTOPS ---- */
@media (max-width: 960px) {
    .container { padding: 0 22px; }

    /* Grilles à 3 cols deviennent 2 */
    .playlist-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

    /* Grilles auto-fit : réduction minmax pour éviter colonnes écrasées */
    .event-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
    .spot-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
    .community-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
    .partner-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

    /* Paddings sections trop généreux en tablette */
    .insta-strip, .insta-strip-section { padding: 0; }
    .insta-strip > .insta-strip-inner.container { padding: 60px 16px; }
    .weekend-section, .agenda-section { padding: 60px 0 80px; }
    .events-preview-section, .evmag-section { padding: 70px 0 80px; }
    .agenda-intro { padding: 60px 0 24px; }
    .page-hero { padding: 140px 0 60px; }
}

/* ---- MOBILE PORTRAIT (tablette serrée + grand mobile) ---- */
@media (max-width: 720px) {
    .container { padding: 0 18px; }

    /* ---- Sections : normalisation paddings ---- */
    .insta-strip, .insta-strip-section { padding: 0; }
    .insta-strip > .insta-strip-inner.container { padding: 50px 18px; }
    .weekend-section, .agenda-section { padding: 50px 0 60px; }
    .events-preview-section, .evmag-section { padding: 50px 0 60px; }
    .playlist-section { padding: 60px 0; }
    .agenda-intro { padding: 50px 0 20px; }
    .page-hero { padding: 110px 0 50px; }
    .page-hero .label { font-size: 1.5rem; }
    .page-hero p { font-size: 1rem; margin-top: 16px; }

    /* ---- Grilles principales : une seule colonne explicite ---- */
    .event-grid, .spot-grid, .community-grid, .partner-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .playlist-grid { grid-template-columns: 1fr; gap: 20px; }
    /* Hauteur Spotify "compact" — l'embed Spotify rend 152px en mode compact,
       on aligne le conteneur dessus pour éviter le vide en bas */
    .playlist-embed iframe { height: 152px; }
    .playlist-head { margin-bottom: 30px; }
    .playlist-head .btn { margin: 0 auto; }

    /* ---- Week-end accueil : compact ---- */
    .weekend-hero { height: clamp(240px, 55vw, 320px); }
    .weekend-hero-top { top: 16px; left: 16px; right: 16px; }
    .weekend-hero-bottom { left: 16px; right: 60%; bottom: 16px; }
    .weekend-hero h3 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
    .weekend-hero-date { right: 16px; bottom: 16px; }
    .weekend-hero-date .wh-day { font-size: clamp(2rem, 10vw, 3rem); }
    .weekend-hero-date.is-multiday .wh-day { font-size: clamp(1.2rem, 5vw, 1.6rem); }
    .wh-badge { font-size: 0.5rem; padding: 3px 8px; }
    .weekend-mini { grid-template-columns: 100px 1fr; }
    .wm-body { padding: 12px 14px; gap: 12px; }
    .wm-date.is-multiday strong { font-size: 1rem; }

    /* ---- Evmag accueil : resserrage ---- */
    .evmag-hero { min-height: 280px; padding: 16px; }
    .evmag-hero-body h3 { font-size: clamp(1.35rem, 5vw, 1.7rem); }
    .evmag-hero-desc { display: none; }

    /* ---- CTAs centrés partout sur mobile ---- */
    .hero-actions,
    .hero-v2-actions,
    .hero-v3-actions,
    .playlist-head,
    .insta-strip-content,
    .section-head,
    .weekend-head,
    .evmag-head,
    .evmag-head-text,
    .partner-head,
    .agenda-head,
    .page-hero,
    .page-hero .container,
    .evmag-cta,
    .agenda-cta-wrap { text-align: center; }

    .hero-actions,
    .hero-v2-actions,
    .hero-v3-actions,
    .agenda-cta-wrap,
    .evmag-cta { justify-content: center; align-items: center; }

    .hero-v2-text,
    .hero-v3-text { text-align: center; align-items: center; }

    .hero-v2-text .hero-hand-title,
    .hero-v3-text .hero-hand-title { text-align: center; }

    /* Blocs qui contiennent un CTA isolé (div wrapper inline style) → centrés */
    .section > .container > div[style*="text-align:center"],
    .section > .container > div[style*="text-align: center"] { text-align: center; }

    /* Bouton isolé qui flotte → centré via margin auto */
    .section > .container > .btn,
    .section > .container > a.btn { display: inline-flex; margin-left: auto; margin-right: auto; }

    /* Liens "Voir tout" etc. en fin de section */
    .evmag-head-link,
    .weekend-head-link,
    .spots-head-link { justify-self: center; margin: 0 auto; }

    /* ---- Limite à 3 cartes par bloc sur l'accueil — SAUF partenaires ----
       Les cartes "is-sponsored" / "is-partner" restent toujours visibles pour que
       chaque partenaire ait sa mise en avant garantie même sur mobile.
       Pour les pages /evenements et /spots, aucune limite (cf. plus bas). */
    /* Week-end : hero (1) + 8 mini = 9 max, sauf partenaires toujours visibles */
    .weekend-list > .weekend-mini:nth-child(n+9):not(.is-sponsored):not(.is-partner) { display: none; }
    /* Evmag : 9 max en mobile, géré par JS via data-mobile-limit="9" */
    /* Spots preview homepage : la limite mobile est gérée par JS via data-mobile-limit.
       L'ancienne règle CSS qui ciblait .spots-section a été retirée car elle s'appliquait
       aussi à la page Spots standalone (qui partage la même classe) — bug "max 3 cartes". */
    /* Events preview homepage (legacy) : 3 sauf partenaires */
    .events-preview-grid > .event-preview-card:nth-child(n+4):not(.is-sponsored):not(.is-partner) { display: none; }
    /* Agenda list : 3 sauf partenaires */
    .agenda-timeline > *:nth-child(n+4):not(.is-sponsored):not(.is-partner) { display: none; }
    .playlist-head { margin-bottom: 34px; }

    /* ---- Grille Instagram (3 cols sans responsive avant) ---- */
    .insta-grid { gap: 8px; }
    .insta-stats { gap: 22px; flex-wrap: wrap; }
    .insta-stat strong { font-size: 1.6rem; }

    /* ---- Event-grid variant pour pages détail (minmax 300/360 cassait) ---- */
    .detail-page .event-grid,
    .detail-page .spot-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Contact form : resserrage ---- */
    .contact-form-wrap { padding: 24px 18px; border-radius: 20px; }
    .contact-section { padding: 30px 0 60px; }

    /* ---- Hero V2 : hauteur fluide ---- */
    .hero-v2, .hero-v3 { min-height: auto; padding-top: 120px; padding-bottom: 40px; }

    /* ---- Hero-badge pastille : masquée en mobile pour libérer la vue ---- */
    .hero-badge { display: none; }

    /* ---- Scatter cards homepage : abandon du collage diagonal → stack propre ---- */
    .hero-v3-visual.hv3-scatter {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        max-width: 100% !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
        grid-template-columns: none !important;
        gap: 18px !important;
        padding-top: 50px;
        overflow: visible;
        z-index: 4;
        pointer-events: auto;
    }
    .hero-v3:has(.hv3-scatter) .hero-v3-inner { pointer-events: auto; }
    .hv3-scatter-label {
        position: static;
        transform: none;
        text-align: center;
        font-size: 1.4rem;
        margin-bottom: 4px;
        align-self: center;
    }
    .hv3-scrap {
        position: static !important;
        width: min(320px, 100%) !important;
        height: auto !important;
        aspect-ratio: 4/5;
        transform: rotate(0) !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        margin: 0 !important;
    }
    .hv3-scrap-1, .hv3-scrap-2, .hv3-scrap-3 {
        top: auto !important; left: auto !important; right: auto !important;
        transform: rotate(0) !important;
    }
    /* Léger tilt alterné pour conserver le côté "scrapbook" sans chevaucher */
    .hv3-scrap-1 { transform: rotate(-1.5deg) !important; }
    .hv3-scrap-2 { transform: rotate(1.5deg) !important; }
    .hv3-scrap-3 { transform: rotate(-1deg) !important; }
    .hv3-scrap:hover { transform: translateY(-4px) rotate(0deg) !important; }

    /* Fade très léger en bas de la zone partenaires (mobile uniquement) :
       le ::after est positionné en absolute par rapport à .hv3-scatter, donc il
       suit toujours le bas de la zone, peu importe le nombre de partenaires. */
    .hero-v3-visual.hv3-scatter::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        bottom: -30px;
        height: 70px;
        background: linear-gradient(to bottom, transparent 0%, var(--cream) 100%);
        pointer-events: none;
        z-index: 2;
    }

    /* ============================================================
       FORMAT MINI-HORIZONTAL : event-card-v2 + spot-card en mobile
       (HP + pages dédiées) — alignement sur le style "weekend-mini".
       Image en miniature à gauche (≈110px) + carte blanche à droite
       avec date / catégorie / titre / méta. La forme INTERNE de la
       carte ne change pas selon le contexte.
       Stratégie : ::after = voile blanc plein, ::before repositionné
       en miniature gauche (hérite de l'image inline du parent). */
    .event-card-v2,
    .spot-card {
        aspect-ratio: auto !important;
        min-height: 0 !important;
        height: auto !important;
        background-color: white !important;
        color: var(--ink) !important;
        padding: 14px 16px 14px 140px !important; /* gap miniature ↔ texte = 30px */
        border-radius: 14px !important;
        overflow: hidden;
        box-shadow: 0 8px 22px rgba(31,36,46,0.10) !important;
        isolation: isolate;
        display: block;
        outline-offset: 0 !important;
    }
    /* ::after = voile blanc qui couvre TOUTE la carte (cache l'image cover du parent) */
    .event-card-v2::after,
    .spot-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: white;
        z-index: 0;
        pointer-events: none;
    }
    /* ::before = miniature à gauche. On utilise var(--card-bg) injectée en
       inline par le PHP au lieu de `background: inherit` qui peut poser des
       problèmes sur iOS Safari avec des images dont l'URL est en inline style.
       top + bottom au lieu de height:100% pour fiabilité quand le parent
       n'a pas de hauteur fixe. */
    .event-card-v2::before,
    .spot-card::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        inset: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 110px !important;
        height: auto !important;
        background-image: var(--card-bg, none) !important;
        background-color: transparent !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        z-index: 1 !important; /* au-dessus du voile blanc, en-dessous du contenu */
        transform: none !important;
    }
    /* Cadrage : spots → bas-centre (sujet en bas en général), events → haut */
    .spot-card::before { background-position: 50% 65% !important; }
    .event-card-v2::before { background-position: 50% 15% !important; }
    /* Désactive scrims et descriptions */
    .ev2-scrim, .spot-scrim { display: none !important; }
    .ev2-desc, .spot-desc { display: none !important; }
    /* Tout le contenu remonte au-dessus du voile blanc + miniature */
    .event-card-v2 > *:not(.ev2-scrim),
    .spot-card > *:not(.spot-scrim) { position: relative; z-index: 2; }

    /* ---- Event card v2 (mini) ---- */
    .event-card-v2 .ev2-date {
        position: relative !important;
        top: auto !important; left: auto !important;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        color: var(--sunset-deep) !important;
        text-shadow: none !important;
        margin: 0 0 4px;
    }
    .event-card-v2 .ev2-day {
        font-size: 1.4rem !important;
        color: var(--sunset-deep) !important;
        font-weight: 600;
    }
    .event-card-v2 .ev2-month {
        font-size: 0.62rem !important;
        margin-top: 0 !important;
        color: var(--ink-soft);
        opacity: 1;
        letter-spacing: 0.14em;
    }
    .event-card-v2 .ev2-bottom {
        position: relative !important;
        left: auto !important; right: auto !important; bottom: auto !important;
        padding: 0 !important;
        gap: 4px !important;
    }
    .event-card-v2 h3 {
        color: var(--ink) !important;
        text-shadow: none !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .event-card-v2 .ev2-cat {
        box-shadow: 0 2px 6px rgba(0,0,0,0.10);
        align-self: flex-start;
    }
    .event-card-v2 .ev2-meta {
        color: var(--ink-soft) !important;
        text-shadow: none !important;
        font-size: 0.72rem !important;
        border-top: none !important;
        padding-top: 0 !important;
        gap: 8px !important;
    }
    .event-card-v2 .ev2-meta span { color: var(--ink-soft); }
    .event-card-v2 .ev2-tags-row { margin-bottom: 2px; }

    /* ---- Spot card (mini) ---- */
    .spot-card .spot-top {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important;
        margin: 0 0 4px;
    }
    .spot-card .spot-bottom {
        position: relative !important;
        left: auto !important; right: auto !important; bottom: auto !important;
        gap: 4px !important;
    }
    .spot-card .spot-name {
        color: var(--ink) !important;
        text-shadow: none !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .spot-card .spot-location {
        color: var(--sunset-deep);
        opacity: 1;
        font-size: 0.72rem;
    }
    .spot-card .spot-tag-row .tag-pill {
        background: rgba(31,36,46,0.05);
        border-color: rgba(31,36,46,0.10);
        color: var(--ink-soft);
        backdrop-filter: none;
    }
    .spot-card .spot-chip-cat {
        background: rgba(31,36,46,0.06);
        font-size: 0.62rem;
        padding: 3px 8px;
    }

    /* ---- Evmag tile : même architecture que event-card-v2 / spot-card ----
       Carte en bloc avec miniature absolute à gauche → la hauteur de la carte
       suit naturellement le contenu (plus d'espace vide en bas). */
    .evmag-tile {
        display: block !important;
        flex-direction: unset !important;
        position: relative;
        padding: 14px 16px 14px 140px !important; /* gap miniature ↔ texte = 30px */
        min-height: 0 !important;
        background: white;
        border-radius: 14px;
        overflow: hidden;
    }
    .evmag-tile .evmag-tile-media {
        position: absolute !important;
        top: 0 !important; bottom: 0 !important; left: 0 !important;
        width: 110px !important;
        height: auto !important;
        flex: none !important;
        border-radius: 0 !important;
        background-size: cover;
        background-position: 50% 15%; /* haut-centre — affiches d'events */
    }
    .evmag-tile.is-partner .evmag-tile-media {
        height: 100% !important;
    }
    .evmag-tile-body {
        padding: 0 !important;
        gap: 4px !important;
        justify-content: flex-start !important;
    }
    .evmag-tile-body h4 {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    /* Plus de margin-top: auto sur le meta (sinon il étire la carte) */
    .evmag-tile-meta {
        margin-top: 0 !important;
        font-size: 0.72rem;
        color: var(--ink-soft);
    }
    .evmag-tile-date {
        top: 8px !important; left: 8px !important;
        padding: 5px 9px 4px !important;
        min-width: 38px !important;
    }
    .evmag-tile-date strong { font-size: 1.2rem !important; }
    .evmag-tile-date span { font-size: 0.55rem !important; }
    .evmag-tile-partner {
        font-size: 0.55rem !important;
        padding: 3px 8px !important;
    }

    /* ---- Event preview (homepage "Frappadingue-like") : un peu plus compact ---- */
    .event-preview-media { aspect-ratio: 16/10; }
    .event-preview-body { padding: 14px 16px 18px; }
    .event-preview-body h3 { font-size: 1.05rem; margin: 6px 0 8px; }
    .event-preview-body p { font-size: 0.85rem; }

    /* ---- Sponsor head : réduction marge + titre ---- */
    .partner-head { margin-bottom: 28px; }
    .partner-head h2 { font-size: 1.7rem; }
    .partner-head p { font-size: 0.95rem; }
    .partner-body { padding: 18px 18px 20px; }
    .partner-media { height: 180px; }

    /* ---- Footer : resserrage ---- */
    .site-footer { padding: 60px 0 24px; }
    .footer-grid { gap: 30px; padding-bottom: 36px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; font-size: 0.78rem; }
    .footer-credits { font-size: 0.68rem; }

    /* ---- Top-bar : finesse supplémentaire ---- */
    .top-bar-items { gap: 10px; }
    .top-bar-item { font-size: 0.72rem; }

    /* ---- Legal pages ---- */
    .legal-content { padding: 40px 18px 80px; }
}

/* ---- MOBILE PETIT FORMAT (iPhone SE, Android serré) ---- */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    /* ---- Hero principal ---- */
    .hero { padding-top: 90px; padding-bottom: 40px; }
    .hero-hand-title .line-main { font-size: clamp(2.6rem, 11vw, 3.4rem); }
    .hero-hand-title .line-top { font-size: clamp(1.7rem, 6vw, 2rem); }
    .hero-hand-title .line-sub { font-size: clamp(1.8rem, 6.5vw, 2.2rem); }

    /* ---- Page hero ---- */
    .page-hero { padding: 90px 0 40px; }
    .page-hero h1 { font-size: clamp(2.3rem, 9.5vw, 2.6rem); line-height: 1.08; font-weight: 700; }
    .page-hero .label { font-size: 1.3rem; }

    /* ---- Sections : paddings courts ---- */
    .section { padding: 50px 0; }
    .insta-strip-section, .weekend-section, .agenda-section,
    .events-preview-section, .evmag-section { padding: 40px 0 48px; }
    .agenda-intro { padding: 40px 0 16px; }

    /* ---- Grille Instagram : 2 colonnes au lieu de 3 ---- */
    .insta-grid { grid-template-columns: repeat(2, 1fr); }
    .insta-grid-item:nth-child(n+5) { display: none; } /* garde 4 au lieu de 6 pour respirer */
    .insta-strip h2 { font-size: 1.8rem; }
    .insta-strip p { font-size: 0.95rem; }
    .insta-strip > .insta-strip-inner.container { padding: 44px 16px 48px; }

    /* ---- Evmag (éditorial accueil) ---- */
    .evmag-hero-date strong { font-size: clamp(2.8rem, 14vw, 4rem); }
    .evmag-head h2 { font-size: 1.6rem; }
    .evmag-head p { font-size: 0.92rem; }
    .evmag-hero { min-height: 240px; }
    .evmag-hero-body h3 { font-size: 1.25rem; }
    .evmag-tile-media { height: 130px; }
    .evmag-tile h4 { font-size: 0.95rem; }

    /* ---- Weekend hero (accueil) : compact ---- */
    .weekend-hero { height: clamp(200px, 55vw, 280px); }
    .weekend-hero-bottom { right: 50%; }
    .weekend-hero-date .wh-day { font-size: clamp(2rem, 12vw, 3rem); }
    .weekend-hero-date .wh-month { font-size: 0.75rem; }
    .weekend-hero-date.is-multiday .wh-day { font-size: clamp(1.1rem, 6vw, 1.6rem); }
    .weekend-hero h3 { font-size: 1.15rem; }
    .wh-badge { margin-top: 5px; font-size: 0.45rem; padding: 3px 7px; }
    .weekend-mini { grid-template-columns: 84px 1fr; }
    .wm-body { grid-template-columns: auto 1fr; padding: 10px 12px; gap: 10px; }
    .wm-text h4 { font-size: 1rem; }
    .wm-date strong { font-size: 1.4rem; }
    .wm-date.is-multiday strong { font-size: 0.9rem; }

    /* ---- Playlist : iframe en mode compact Spotify (152px) pour éviter le vide ---- */
    .playlist-section { padding: 50px 0; }
    .playlist-embed iframe { height: 152px; }
    .playlist-head { margin-bottom: 26px; }
    .playlist-head h2 { font-size: 1.6rem; }
    .playlist-head p { font-size: 0.92rem; margin-bottom: 22px; }

    /* ---- Cards : paddings internes resserrés ---- */
    .partner-card, .group-card { border-radius: 18px; }
    .partner-body { padding: 16px 16px 18px; }
    .partner-body h3 { font-size: 1.15rem; }
    .partner-media { height: 160px; }
    .partner-head { margin-bottom: 24px; }
    .partner-head h2 { font-size: 1.45rem; }
    .group-card { padding: 22px; }

    /* ---- Event card v2 / Spot card : version mini un poil plus serrée ----
       Reprend le format mini-horizontal du breakpoint 720px, juste un peu plus
       compact pour les petits écrans (vignette 95px au lieu de 110px). */
    .event-card-v2,
    .spot-card {
        padding: 12px 14px 12px 124px !important; /* gap miniature ↔ texte = 29px */
    }
    .event-card-v2::before,
    .spot-card::before { width: 95px !important; }
    .event-card-v2 h3,
    .spot-card .spot-name { font-size: 0.95rem !important; }
    .event-card-v2 .ev2-day { font-size: 1.3rem !important; }
    .event-card-v2 .ev2-month { font-size: 0.6rem !important; }
    .event-card-v2 .ev2-meta { font-size: 0.68rem !important; gap: 8px !important; }

    /* ---- Scatter cards : format 1 colonne plus serré ---- */
    .hv3-scrap { width: min(280px, 92%); }
    .hv3-scatter-label { font-size: 1.25rem; }

    /* ---- Chips et tags ---- */
    .tag-pill, .tag-pill.light, .partner-chip, .ev2-cat, .spot-chip {
        font-size: 0.7rem; padding: 4px 9px;
    }

    /* ---- Détail hero V2 ---- */
    .detail-hero-v2 { padding: 90px 0 40px; }
    .dhv2-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .dhv2-meta { grid-template-columns: 1fr 1fr; gap: 12px; }
    .dhv2-media { min-height: 260px; border-radius: 22px; }

    /* ---- Contact form : resserrage max ---- */
    .contact-form-wrap { padding: 20px 14px; border-radius: 18px; }
    .contact-ig-inner { padding: 24px 18px; gap: 22px; }
    .contact-ig-mock { padding: 16px; }
    .contact-reason-card { padding: 14px 14px 14px 40px; }
    .contact-reason-card h4 { font-size: 0.95rem; }
    .contact-reason-card p { font-size: 0.82rem; }
    .contact-submit { padding: 14px 22px; font-size: 0.95rem; }

    /* ---- Footer ---- */
    .site-footer { padding: 50px 0 20px; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-credits { font-size: 0.64rem; line-height: 1.5; }

    /* ---- Top-bar : encore plus compact (non-fixed hérité du 720px) ---- */
    .top-bar { font-size: 0.68rem; padding: 5px 0; }
    .top-bar-items { gap: 8px; justify-content: center; width: 100%; flex-wrap: wrap; }
    .top-bar-inner { justify-content: center; }
    .top-bar-item { font-size: 0.68rem; }
    .site-header { top: 0; }

    /* ---- Headers de sections ---- */
    h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
    h2 { font-size: clamp(1.6rem, 6vw, 2rem); }
    h3 { font-size: clamp(1.1rem, 4.5vw, 1.3rem); }

    /* ---- Nav CTA masqué depuis 720px, burger déjà actif ---- */
    /* ---- Scribble / décors : réduction visuelle ---- */
    .hero-sun { width: 260px; right: -80px; }

    /* ---- Legal pages ---- */
    .legal-content { padding: 30px 14px 60px; }
    .legal-content h2 { font-size: 1.25rem; }
}


/* ============================================================
   PAGE 404 — "Tu quittes le bassin ?"
   ============================================================ */
.error-404 {
    position: relative;
    min-height: 90vh;
    padding: 120px 0 100px;
    overflow: hidden;
}
.error-404-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.error-404-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(31, 41, 55, 0.25);
    color: var(--sunset-deep);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    margin-bottom: 30px;
}
.error-404-eyebrow-dot {
    font-size: 1rem;
    animation:none;
}
@keyframes error-404-wave {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

.error-404-title {
    margin: 0 0 30px;
    line-height: 0.95;
    color: var(--ink);
}
.error-404-title .line-top {
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--periwinkle-deep);
    font-style: italic;
    display: block;
    margin-bottom: -8px;
}
.error-404-title .line-main {
    font-size: clamp(4.5rem, 11vw, 7.5rem);
    color: var(--ink);
    display: block;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.error-404-title .line-sub {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    color: var(--ink);
    display: block;
    margin-top: -4px;
}
.error-404-title .brush-word {
    color: var(--sunset);
    position: relative;
    display: inline-block;
}
.error-404-title .brush-underline {
    position: absolute;
    left: -4%;
    bottom: -10px;
    width: 108%;
    height: auto;
    color: var(--sunset);
}

.error-404-desc {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto 36px;
}

.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 36px;
}
.error-404-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.error-404-actions .btn-sunset {
    box-shadow: 0 14px 30px -8px rgba(31, 41, 55, 0.55);
}

.error-404-hint {
    font-size: 0.92rem;
    color: var(--ink-soft);
    margin: 0;
}
.error-404-hint a {
    color: var(--sunset-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.error-404-hint a:hover { color: var(--sunset); }

/* Responsive — 404 */
@media (max-width: 720px) {
    .error-404 { padding: 80px 0 60px; min-height: 80vh; }
    .error-404-actions { flex-direction: column; }
    .error-404-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}


/* ============================================================
   BLOG — listing + single article
   ============================================================ */

/* ---- Page Blog : hero éditorial ---- */
.blog-hero-section { padding-top: 50px; }
.blog-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 18px 50px rgba(31, 36, 46, 0.12);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-hero:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(31, 36, 46, 0.18); }
.blog-hero-media {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 380px;
}
.blog-hero-flag {
    position: absolute; top: 20px; left: 20px;
    background: var(--sunset);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
    box-shadow: 0 6px 14px rgba(31, 41, 55, 0.4);
}
.blog-hero-body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.blog-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1; margin: 12px 0 14px;
    color: var(--ink);
}
.blog-hero-subtitle {
    font-size: 1.08rem; line-height: 1.5;
    color: var(--ink-soft); margin: 0 0 18px;
}
.blog-hero-meta {
    font-size: 0.85rem; color: var(--muted);
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-bottom: 22px;
}
.blog-meta-dot { color: var(--muted); opacity: 0.6; }
.blog-hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--sunset-deep); font-weight: 600; font-size: 1rem;
    transition: gap 0.2s ease;
}
.blog-hero:hover .blog-hero-cta { gap: 12px; }

/* ---- Grille articles ---- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
.blog-card {
    display: flex; flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: 0 8px 24px rgba(31, 36, 46, 0.08);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(31, 36, 46, 0.16); }
.blog-card-media {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: var(--periwinkle);
}
.blog-card-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
    color: var(--sunset-deep); text-transform: uppercase;
    margin-bottom: 6px;
}
.blog-card-title {
    font-family: var(--font-display);
    font-size: 1.32rem; line-height: 1.25;
    margin: 6px 0 10px; color: var(--ink);
}
.blog-card-subtitle {
    font-size: 0.94rem; line-height: 1.55; color: var(--ink-soft);
    margin: 0 0 14px; flex: 1;
}
.blog-card-meta {
    font-size: 0.78rem; color: var(--muted);
    display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
}

/* ---- Single article ---- */
.article-page { padding: 0; }
.article-hero {
    padding: 60px 0 30px;
    background: linear-gradient(180deg, var(--cream) 0%, transparent 100%);
}
.article-hero-inner { max-width: 760px; margin: 0 auto; }
.article-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-soft); font-size: 0.9rem; font-weight: 500;
    margin-bottom: 22px;
    text-decoration: none;
    transition: color 0.2s;
}
.article-back:hover { color: var(--sunset-deep); }
.article-cat-pill {
    display: inline-block;
    background: var(--periwinkle-deep);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.article-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.08;
    color: var(--ink);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.article-subtitle {
    font-size: clamp(1.08rem, 2.4vw, 1.32rem);
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 24px;
    font-weight: 400;
}
.article-meta {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--ink-soft);
    padding: 14px 0 4px;
    border-top: 1px solid var(--border);
}
.article-meta-author strong { color: var(--ink); }

/* Cover image */
.article-cover { padding: 20px 0 40px; }
.article-cover-img {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgba(31, 36, 46, 0.3);
    max-width: 920px; margin: 0 auto;
}

/* Body article */
.article-body { padding: 40px 0 60px; }
.article-body-inner { max-width: 720px; margin: 0 auto; }
.article-content {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--ink);
}
.article-content > * + * { margin-top: 1.4em; }
.article-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.5vw, 2.1rem);
    color: var(--ink);
    margin-top: 1.8em;
    line-height: 1.2;
}
.article-content h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 1.55rem);
    color: var(--ink);
    margin-top: 1.6em;
    line-height: 1.25;
}
.article-content p { margin: 0; }
.article-content a {
    color: var(--sunset-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-content a:hover { color: var(--sunset); }
.article-content blockquote {
    border-left: 4px solid var(--sunset);
    padding: 10px 0 10px 22px;
    margin: 1.8em 0;
    font-family: var(--font-display);
    font-size: 1.32rem; line-height: 1.4;
    color: var(--ink); font-style: italic;
}
.article-content img,
.article-content figure {
    max-width: 100%; height: auto;
    border-radius: 12px;
    margin: 1.8em auto;
    display: block;
}
.article-content ul, .article-content ol {
    padding-left: 26px; margin: 1.4em 0;
}
.article-content li { margin: 6px 0; }
.article-content hr {
    border: 0; height: 1px; background: var(--border);
    margin: 2.4em 0;
}

/* Tags + footer meta */
.article-tags {
    margin: 36px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.article-tags-label {
    font-size: 0.85rem; color: var(--ink-soft); font-weight: 600;
    margin-right: 6px;
}
.article-footer-meta {
    margin-top: 36px;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 18px;
}
.article-author-block {
    display: flex; align-items: center; gap: 12px;
}
.article-author-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sunset), var(--periwinkle));
    color: white;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.article-author-block span { display: block; font-size: 0.78rem; color: var(--ink-soft); }
.article-author-block strong { font-size: 1rem; color: var(--ink); }
.article-share {
    display: flex; gap: 8px; align-items: center;
}
.article-share-label {
    font-size: 0.85rem; color: var(--ink-soft); margin-right: 6px;
}
.article-share-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--cream); color: var(--ink-soft);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.article-share-btn:hover { background: var(--sunset); color: white; border-color: var(--sunset); }

/* Related */
.article-related { background: var(--cream); padding: 60px 0; margin-top: 40px; }

/* Responsive */
@media (max-width: 860px) {
    .blog-hero { grid-template-columns: 1fr; }
    .blog-hero-media { min-height: 280px; }
    .blog-hero-body { padding: 28px 24px 32px; }
}
@media (max-width: 720px) {
    .blog-hero-section { padding-top: 30px; }
    .blog-grid { grid-template-columns: 1fr; gap: 18px; }
    .article-hero { padding: 30px 0 20px; }
    .article-cover { padding: 10px 0 24px; }
    .article-body { padding: 24px 0 40px; }
    .article-footer-meta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BLOC AUTEUR ENRICHI (single article)
   ============================================================ */
.article-author-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    margin: 32px 0 0;
    background: var(--cream);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.article-author-card + .article-author-card {
    margin-top: 14px;
}
.article-author-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(31, 36, 46, 0.12);
}
.article-author-photo-fallback {
    background: linear-gradient(135deg, var(--sunset), var(--periwinkle));
    color: white;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
}
.article-author-info {
    flex: 1;
    min-width: 0;
}
.article-author-label {
    display: block;
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.article-author-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 2px;
}
.article-author-role {
    display: block;
    font-size: 0.88rem;
    color: var(--sunset-deep);
    font-style: italic;
    margin-bottom: 10px;
}
.article-author-bio {
    margin: 6px 0 12px;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.article-author-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.article-author-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--periwinkle-deep);
    background: white;
    padding: 5px 11px;
    border-radius: 50px;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.2s;
}
.article-author-link:hover {
    color: var(--sunset-deep);
    border-color: var(--sunset);
    background: white;
}
@media (max-width: 720px) {
    .article-author-card { padding: 18px; gap: 14px; }
    .article-author-photo { width: 56px; height: 56px; }
    .article-author-photo-fallback { font-size: 1.4rem; }
    .article-author-name { font-size: 1.15rem; }
}

/* ============================================================
   BLOC NEWSLETTER (footer)
   ============================================================ */
.footer-newsletter {
    margin: 40px 0 30px;
    padding: 36px 32px;
    /* Légère élévation sur le fond bleu logo du footer : voile blanc translucide
       + accent sunset subtil — pas de fond cassé qui jurerait avec le bleu logo. */
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(31, 41, 55,0.16) 100%);
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 12px 30px rgba(31,36,46,0.10);
}
.footer-newsletter-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    /* Sunset clair pour ressortir sur le bleu logo */
    color: #FFD9C2;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.footer-newsletter h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.15;
    margin: 0 0 10px;
    color: white;
}
.footer-newsletter p {
    margin: 0;
    color: rgba(255,255,255,0.78);
    font-size: 0.94rem;
    line-height: 1.55;
}
.footer-newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.footer-newsletter-row {
    display: flex;
    gap: 8px;
    background: white;
    border-radius: 50px;
    padding: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.footer-newsletter-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px 16px;
    font-size: 0.95rem;
    color: var(--ink);
    outline: none;
}
.footer-newsletter-btn {
    background: var(--sunset);
    color: white;
    border: 0;
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, transform 0.2s;
}
.footer-newsletter-btn:hover { background: var(--sunset-deep); transform: translateX(2px); }
.footer-newsletter-btn:disabled { opacity: 0.7; cursor: wait; }
.footer-newsletter-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
    cursor: pointer;
}
.footer-newsletter-consent input { margin-top: 3px; flex-shrink: 0; }
.footer-newsletter-message {
    font-size: 0.88rem;
    margin-top: 4px;
    min-height: 18px;
    color: rgba(255,255,255,0.85);
}
.footer-newsletter-message.is-success { color: #6CD68C; font-weight: 600; }
.footer-newsletter-message.is-error { color: #FF9A6B; }

@media (max-width: 720px) {
    .footer-newsletter {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 26px 22px;
    }
    .footer-newsletter-row { flex-direction: column; padding: 8px; border-radius: 14px; gap: 8px; }
    .footer-newsletter-input { padding: 12px; }
    .footer-newsletter-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   CTA NEWSLETTER DANS LE HEADER
   Override de .nav-cta : remplace le dégradé Insta par les couleurs Nomade.
   Le texte est plus long ("Recevoir les bons plans du week-end") donc on adapte.
   ============================================================ */
.nav-cta-newsletter {
    background: linear-gradient(135deg, var(--sunset) 0%, var(--sunset-deep) 100%);
    box-shadow: 0 6px 18px rgba(31, 41, 55, 0.32);
    white-space: nowrap;
    font-size: 0.84rem;
}
.nav-cta-newsletter:hover {
    box-shadow: 0 12px 26px rgba(31, 41, 55, 0.50);
    filter: brightness(1.06);
}
.nav-cta-newsletter svg { flex-shrink: 0; }

/* Smooth scroll global (pour le clic sur #newsletter-signup) */
html { scroll-behavior: smooth; }

/* Ancre newsletter : un peu de marge top pour pas que le header sticky cache le titre */
#newsletter-signup { scroll-margin-top: 100px; }

/* Sur tablette, on raccourcit le label si la place manque */
@media (max-width: 1100px) {
    .nav-cta-newsletter { font-size: 0.78rem; padding: 8px 14px; }
}

/* ============================================================
   GROUPE CTA HEADER (Newsletter + Insta côte à côte)
   ============================================================ */
.nav-ctas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Le CTA Insta garde son gradient distinctif (au cas où on l'avait écrasé via .nav-cta) */
/* Instagram : petit bouton discret (2026-08-06, demande Theo). Au repos il ne
   crie pas ; c'est au SURVOL qu'il prend les couleurs de la marque. L'ancienne
   version portait un degrade permanent et une ombre violette, deux choses que
   la DA du site refuse ailleurs. La zone cliquable reste a 44px. */
.nav-insta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    border: 1px solid rgba(117, 144, 184, .32); background: transparent;
    color: var(--ink-soft); text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nav-insta:hover, .nav-insta:focus-visible {
    background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 55%, #962FBF 80%, #4F5BD5 100%);
    border-color: transparent; color: #fff;
}
.nav-insta svg { width: 18px; height: 18px; display: block; }

/* Bouton « Mon compte » / « Se connecter » du Pass. */
.nav-cta.nav-cta-compte {
    gap: 7px;
    background: var(--white) !important;
    color: var(--ink) !important;
    border: 1.5px solid rgba(117, 144, 184, .55);
    box-shadow: none !important;
    font-weight: 700;
}
/* CONNECTÉ, LE BOUTON PORTE LE VISAGE ET LE PRÉNOM (15 août 2026).
   Le rond est admis ici : c'est un portrait. La pastille garde 24 px pour ne pas
   faire grossir la barre, mais le bouton entier reste la cible tactile. */
.nav-cta.nav-cta-compte.est-connecte { padding-left: 6px; }
/* Même pastille dans le menu du téléphone, où le bouton vit réellement. */
.mm-cta-compte.est-connecte { padding-left: 8px; }
.mm-cta-vue {
    flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sand-light); border: 1px solid rgba(117,144,184,.35);
}
.mm-cta-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-cta-ini { font-size: 12px; font-weight: 800; color: var(--periwinkle-deep); line-height: 1; }
.nav-cta-vue {
    flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sand-light); border: 1px solid rgba(117,144,184,.35);
}
.nav-cta-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Même précaution que dans l'espace membre : `display` écrase `[hidden]`. */
.nav-cta-vue img[hidden], .mm-cta-vue img[hidden] { display: none; }
.nav-cta-ini { font-size: 11px; font-weight: 800; color: var(--periwinkle-deep); line-height: 1; }
/* Au survol le bouton devient bleu : l'initiale doit suivre, sinon elle
   disparaît sur son propre fond. */
.nav-cta.nav-cta-compte:hover .nav-cta-vue { background: #fff; border-color: #fff; }

.nav-cta.nav-cta-compte:hover {
    background: var(--periwinkle-deep) !important;
    border-color: var(--periwinkle-deep);
    color: #fff !important;
    transform: translateY(-1px);
    filter: none;
}

/* Menu mobile : les deux actions sont EMPILEES et pleine largeur (retour a
   l'ancienne mise en page, demande de Theo le 15 aout 2026). La rangee d'avant
   avait ete faite pour gagner une ligne quand le bouton de compte est arrive ;
   le panneau tient sans defilement malgre tout, c'est mesure. */
.mm-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
/* LES TROIS BOUTONS DU MENU ONT LE MEME ARRONDI.
   Demande de Theo le 15 aout 2026 : « donne les memes arrondis aux trois
   boutons sur le menu en mobile, le bouton app etant la reference ». Le bouton
   d'installation porte deja un arrondi complet par sa propre regle, les deux
   autres restaient a 10 px : trois boutons empiles dont un seul est arrondi
   autrement, ca saute aux yeux.
   EXCEPTION ASSUMEE a la regle « pas de pilule » de CLAUDE.md section 2 : cette
   regle vise les chips et les badges, et la consigne ci-dessus est posterieure
   et explicite. Elle ne vaut QUE pour les trois boutons de ce menu. */
.mm-actions > .mm-cta { border-radius: 999px; }
.mm-cta.mm-cta-compte {
    width: 100%;
    background: var(--white) !important;
    color: var(--ink) !important;
    border: 1.5px solid rgba(117, 144, 184, .55);
    box-shadow: none !important;
}
.mm-cta.mm-cta-compte:hover { background: var(--periwinkle-deep) !important; color: #fff !important; filter: none; }
.mm-insta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: none; border-radius: 50%;
    border: 1px solid rgba(117, 144, 184, .32); background: transparent;
    color: var(--ink-soft); text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mm-insta:hover, .mm-insta:focus-visible {
    background: #7590B8;
    border-color: transparent; color: #fff;
}

@media (max-width: 1100px) {
    /* Tablette : le libelle du compte tombe, l'icone suffit. */
    .nav-cta-compte { padding: 8px 12px; gap: 0; font-size: 0; }
    .nav-cta-compte svg { width: 18px; height: 18px; }
    /* MAIS LA PASTILLE RESTE, elle EST l'icône quand on est connecté. Sans cette
       reprise, `font-size: 0` emportait aussi les initiales et il ne restait
       qu'un rond vide. Le même piège avait déjà mangé le libellé du bouton
       d'installation sur ce header. */
    .nav-cta-compte.est-connecte { padding-left: 8px; padding-right: 8px; }
    .nav-cta-compte .nav-cta-vue { width: 26px; height: 26px; }
    .nav-cta-compte .nav-cta-ini { font-size: 11px; }
}
@media (max-width: 980px) {
    .nav-ctas { display: none; }
}

/* ============================================================
   AGENDA MAGAZINE — layout asymetrique hero + tuiles (accueil)
   ============================================================ */
/* ============================================================
   PARTNER EMPHASIS — tuiles sponsorisees plus visibles
   Les partenaires payent : ils doivent crever l'ecran sur l'accueil.
   ============================================================ */

/* Tuile partenaire — alignée sur le layout local : 1 col × 2 rangées (haute, pas large).
   Le hero reste 2×2, les autres tuiles 1×1, et les sponsored se distinguent par la
   hauteur doublée + halo orange + ruban animé. */

/* Hover des cartes partenaires : lift plus marque + halo qui s'amplifie */
.evmag-hero.is-partner:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 0 8px rgba(31, 41, 55, 0.32), 0 32px 70px rgba(31, 41, 55, 0.48);
    animation-play-state: paused;
}
.evmag-tile.is-partner:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 0 7px rgba(31, 41, 55, 0.30), 0 26px 56px rgba(31, 41, 55, 0.42);
    animation-play-state: paused;
}

/* ============================================================
   CENTRAGE GLOBAL DES CTA EN RESPONSIVE (≤ 720px)
   Couvre tous les types de boutons / liens d'action du site.
   ============================================================ */
@media (max-width: 720px) {
    /* ---- 1. Tous les boutons isolés : centres dans leur conteneur ---- */
    .btn,
    .btn-primary, .btn-ghost, .btn-sunset, .btn-outline,
    .btn-shotgun,
    .insta-cta, .blog-hero-cta,
    .nav-cta, .nav-cta-newsletter, .nav-cta-insta,
    .evmag-head-link, .weekend-head-link, .spots-head-link, .partner-head-link, .agenda-head-link,
    .agenda-cta, .agenda-cta-link, .partner-cta,
    .contact-ig-btn,
    .nc-btn,
    .article-share-btn,
    .page-title-action {
        margin-left: auto !important;
        margin-right: auto !important;
        justify-self: center;
        align-self: center;
    }

    /* ---- 2. Wrappers de boutons (groupes flex/grid) : centres ---- */
    .hero-actions, .hero-v2-actions, .hero-v3-actions,
    .agenda-cta-wrap, .evmag-cta, .partner-cta-wrap,
    .article-share-row,
    .contact-buttons,
    .popup-nav-btns,
    .dhv2-nav-buttons, .dhv2-actions,
    .nc-actions, .single-actions,
    .insta-strip-inner > div:first-child {
        justify-content: center !important;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
    }

    /* ---- 3. Section heads (titre + CTA côte à côte en desktop) → colonne centrée ---- */
    .evmag-head, .weekend-head, .spots-head, .partner-head, .agenda-head {
        grid-template-columns: 1fr !important;
        justify-items: center;
        text-align: center;
    }
    .evmag-head > *, .weekend-head > *,
    .spots-head > *, .partner-head > *,
    .agenda-head > * {
        text-align: center;
    }

    /* ---- 4. Wrappers inline-style "text-align:center" + div isolés CTA ---- */
    .section > .container > div[style*="text-align"],
    .section > .container > div[style*="margin-top"],
    .section > .container > p[style*="text-align"] {
        text-align: center !important;
    }
    .section > .container > div[style*="text-align"] > .btn,
    .section > .container > div[style*="margin-top"] > .btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ---- 5. Boutons de navigation détail (Waze / GMaps / Apple Maps) ---- */
    .dhv2-nav-btn, .popup-nav-btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================
   PAGES LÉGALES (Mentions, Confidentialité, CGU)
   ============================================================ */
.legal-hero {
    background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
    padding: 100px 0 50px;
    text-align: center;
}
.legal-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin: 12px 0 0;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.legal-hero .page-hero-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sunset-deep);
    background: rgba(255,255,255,0.9);
    padding: 6px 14px;
    border-radius: 50px;
}

.legal-page {
    background: var(--cream);
    padding: 50px 0 90px;
}
.legal-content {
    max-width: 820px;
}
.legal-article {
    background: white;
    padding: clamp(28px, 5vw, 56px);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(31,36,46,0.08);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.7;
}
.legal-article h2 {
    font-family: var(--font-display, var(--font-sans));
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    color: var(--ink);
    margin: 36px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sand);
    letter-spacing: -0.01em;
}
.legal-article h2:first-child { margin-top: 0; }
.legal-article h3 {
    font-size: 1.12rem;
    color: var(--periwinkle-deep);
    margin: 24px 0 10px;
    font-weight: 700;
}
.legal-article p {
    margin: 0 0 16px;
    color: var(--ink-soft);
}
.legal-article ul, .legal-article ol {
    margin: 0 0 18px;
    padding-left: 22px;
    color: var(--ink-soft);
}
.legal-article li {
    margin-bottom: 8px;
    line-height: 1.6;
}
.legal-article strong { color: var(--ink); font-weight: 700; }
.legal-article a {
    color: var(--sunset-deep);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.legal-article a:hover { color: var(--sunset); }
.legal-article em { font-style: italic; }
.legal-article code {
    background: var(--sand);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    color: var(--periwinkle-deep);
}

/* Navigation entre pages légales */
.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px dashed rgba(31,36,46,0.1);
}
.legal-nav a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: white;
    border: 1.5px solid rgba(31,36,46,0.1);
    border-radius: 50px;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.2s ease;
}
.legal-nav a:hover {
    border-color: var(--sunset-deep);
    color: var(--sunset-deep);
    transform: translateY(-2px);
}
.legal-nav a.is-active {
    background: var(--sunset-deep);
    border-color: var(--sunset-deep);
    color: white;
}

@media (max-width: 720px) {
    .legal-hero { padding: 80px 0 30px; }
    .legal-page { padding: 30px 0 60px; }
    .legal-article {
        padding: 24px 20px;
        font-size: 0.95rem;
    }
}

/* ============================================================
   HERO V3 RESPONSIVE — Option C "Carte premium"
   Le bloc texte (badge + titre + desc + CTAs + stats) devient
   une carte blanche translucide avec ombre, sur mobile.
   ============================================================ */
@media (max-width: 720px) {
    .hero-v3 { padding-top: 90px; }
    .hero-v3-inner {
        grid-template-columns: 1fr !important;
        gap: 110px !important; /* 90px de photo sous la carte + 20px d'air avant les partenaires */
    }

    /* Carte blanche : le fond direct est transparent, on passe par 2 pseudo-éléments
       pour que la stack soit propre :
         ::before = photo plein viewport, étendue au-delà de la carte (z=-2)
         ::after  = voile blanc 50% limité à la carte (z=-1)
       puis le contenu (texte, boutons) en flow naturel par-dessus. */
    .hero-v3-text {
        position: relative;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 22px;
        padding: 32px 22px 24px !important;
        margin: 0 4vw !important;
        box-shadow: 0 18px 38px rgba(31, 36, 46, 0.12), 0 4px 12px rgba(31, 36, 46, 0.06);
        text-align: center !important;
        align-items: center !important;
    }
    /* Photo du Bassin, plein viewport, au-delà des bords de la carte,
       avec le même espace en haut (header → carte) qu'en bas (carte → fin photo).
       Très léger fade tout en bas pour un raccord doux vers la zone partenaires. */
    .hero-v3-text::before {
        content: '';
        position: absolute;
        top: -90px;          /* compense padding-top: 90px du hero */
        bottom: -90px;       /* même espace en bas (sans toucher les partenaires) */
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        z-index: -2;
        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 36px), transparent 100%);
                mask-image: linear-gradient(to bottom, black calc(100% - 36px), transparent 100%);
        background-image: url('../img/hero-bassin-v2.jpg');
        background-image:
            image-set(
                url('../img/hero-bassin-v2.webp') type('image/webp'),
                url('../img/hero-bassin-v2.jpg') type('image/jpeg')
            );
        background-size: cover;
        background-position: center 80%;
        opacity: 0.85;
        pointer-events: none;
    }
    /* Voile blanc 50% : limité à la carte (rectangle visible) */
    .hero-v3-text::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.5);
        border-radius: inherit;
        z-index: -1;
        pointer-events: none;
    }

    /* Badge : onglet épinglé en haut de la carte — toujours 1 ligne */
    .hero-v3-text .hero-badge {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--sunset-deep) !important;
        color: white !important;
        padding: 7px 14px !important;
        font-size: clamp(0.48rem, 1.05vw, 0.6rem) !important;
        line-height: 1.25 !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
        text-align: center !important;
        max-width: calc(100% - 16px);
        overflow: hidden; text-overflow: ellipsis;
        box-shadow: 0 6px 14px rgba(31, 41, 55,0.4);
        margin: 0 !important;
        border: 1.5px solid rgba(255,255,255,0.4);
    }
    .hero-v3-text .hero-badge .hero-badge-dot {
        display: inline-block !important;
        margin-right: 4px;
    }

    /* Titre */
    .hero-v3-text .hero-hand-title {
        margin: 14px 0 12px !important;
    }
    .hero-v3-text .hero-hand-title .line-top {
        font-size: 1.3rem !important;
        margin: 0 !important;
    }
    .hero-v3-text .hero-hand-title .line-main {
        font-size: clamp(3rem, 13vw, 4.6rem) !important;
        line-height: 0.95 !important;
        margin: 2px 0 !important;
    }
    .hero-v3-text .hero-hand-title .line-sub {
        font-size: clamp(1.7rem, 7vw, 2.5rem) !important;
    }

    /* Description */
    .hero-v3-text .hero-v3-desc {
        font-size: 0.94rem !important;
        max-width: 30ch !important;
        margin: 6px auto 18px !important;
        line-height: 1.55;
    }

    /* CTAs : colonne full-width, primary en premier */
    .hero-v3-text .hero-v3-actions {
        flex-direction: column;
        gap: 8px !important;
        width: 100%;
        align-items: stretch !important;
    }
    .hero-v3-text .hero-v3-actions .btn {
        width: 100%;
        margin: 0 !important;
        justify-content: center;
    }
    .hero-v3-text .hero-v3-actions .btn-sunset {
        order: -1;
    }

    /* Stats inline en bas de la carte — gap explicite pour bien espacer
       les 3 colonnes (spots / events / Bassin). */
    .hero-v3-text .hero-card-stats,
    .hero-card-stats {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 32px !important;
        margin: 22px 0 0 !important;
        padding-top: 18px;
        border-top: 1px dashed rgba(31,36,46,0.15);
        width: 100%;
    }
    .hero-card-stat {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        font-size: 0.72rem;
        color: var(--ink-soft);
        text-align: center;
    }
    .hero-card-stat strong {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--ink);
        font-family: var(--font-display);
        letter-spacing: -0.01em;
        line-height: 1;
    }
}

/* Stats en desktop : style "signature éditoriale" sous les CTAs.
   Reprend la grammaire visuelle du .hero-v3-signature (border-top, séparateurs, ton sobre). */
@media (min-width: 721px) {
    .hero-card-stats {
        display: flex;
        align-items: baseline;
        gap: 18px;
        margin-top: 32px;
        padding-top: 20px;
        border-top: 1px solid rgba(62,78,110,0.15);
        max-width: 480px;
        font-size: 0.86rem;
        color: var(--ink-soft);
    }
    .hero-card-stats .hero-card-stat {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        flex-direction: row;
    }
    .hero-card-stats .hero-card-stat strong {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 700;
        color: var(--periwinkle-deep);
        font-size: 1.15rem;
        line-height: 1;
    }
    /* Petit séparateur · entre chaque stat */
    .hero-card-stats .hero-card-stat + .hero-card-stat::before {
        content: "·";
        opacity: 0.4;
        margin-right: 12px;
        color: var(--ink-soft);
    }
}
/* perf : reveal neutralise (visible direct, plus de fade JS-gated qui retardait le LCP) */
.reveal{opacity:1;transform:none}
/* perf : placeholder cartes en lazy-load + reservation hauteur top-bar (anti-CLS au swap de police) */
[data-bg]{background-color:var(--sand-light)}
@media (max-width:720px){.top-bar{min-height:36px}}
/* hero sans pastille : le titre demarre en haut de la carte (le padding gere l'espace), on retire sa marge haute */
.hero-v3-text .hero-hand-title{margin-top:0}
@media (max-width:720px){.hero-v3-text .hero-hand-title{margin-top:0 !important}}
/* mobile : fond hero leger (820px ~40Ko au lieu de 131Ko) = LCP plus rapide ; + bg non-fixed (perf paint mobile) */
@media (max-width:720px){.hero-v3-text::before{background-image:url('../img/hero-bassin-mobile.jpg') !important;background-image:image-set(url('../img/hero-bassin-mobile.webp') type('image/webp'),url('../img/hero-bassin-mobile.jpg') type('image/jpeg')) !important}body{background-attachment:scroll}}

/* ===== Façade Spotify (chargement du player au clic → TBT + Speed Index OK) =====
   Hauteurs calées sur l'iframe réel (380px desktop / 152px mobile) : zéro décalage
   quand l'iframe s'injecte au clic. Le grossissement au clic = interaction utilisateur,
   donc non compté dans le CLS. */
.playlist-embed[data-spotify-id]:not(.is-loaded) { box-shadow: var(--shadow-sm); }
.playlist-facade {
    width: 100%; height: 380px; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--sand-light); color: var(--ink); font-family: var(--font-sans);
    text-align: center; padding: 20px;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.playlist-facade:hover, .playlist-facade:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #1DB954; outline: none; }
.playlist-facade .pf-badge { color: #1DB954; line-height: 0; }
.playlist-facade .pf-cta { display: inline-flex; align-items: center; gap: 7px; background: #1DB954; color: #fff; font-weight: 700; font-size: .95rem; padding: 10px 22px; border-radius: 999px; }
.playlist-facade .pf-cta svg { flex-shrink: 0; }
.playlist-facade .pf-hint { font-size: .78rem; color: var(--muted); }
@media (max-width: 720px) {
    .playlist-facade { height: 152px; gap: 8px; padding: 12px; }
    .playlist-facade .pf-badge svg { width: 22px; height: 22px; }
    .playlist-facade .pf-hint { display: none; }
}

/* Icônes SVG inline (nomade_icon) — remplacent les emojis, héritent couleur + taille du texte */
.ni { width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }

/* ============================================================
   CTA propriétaire en bas des fiches spots (bleu clair Nomade)
   NB : ce CSS DOIT être ici (pas en <style> inline) — LiteSpeed
   strippe les styles inline des templates.
   ============================================================ */
.owner-cta { padding: 78px 0 62px; }
.owner-cta-band {
    display: flex; align-items: center; gap: 30px;
    min-height: 172px;
    background: #7590B8;
    border-radius: 28px; padding: 30px 48px;
    box-shadow: 0 24px 50px -26px rgba(62, 92, 118, .5);
}
.owner-cta-text { flex: 1 1 auto; min-width: 0; }
.owner-cta-kicker {
    display: block; font-family: var(--font-hand); font-size: 1.35rem;
    color: rgba(255, 255, 255, .9); transform: rotate(-2deg); margin-bottom: 4px;
}
.owner-cta-band h2 {
    margin: 2px 0 9px; color: #fff;
    font-family: var(--font-sans); font-weight: 800; letter-spacing: -.01em;
    font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.08;
}
.owner-cta-band p { color: rgba(255, 255, 255, .85); margin: 0; font-size: .98rem; line-height: 1.55; max-width: 340px; }
/* mascotte : passée en blanc (filtre), contenue dans la bande, sans déformation (max-width) */
.owner-cta-mascot { flex: 0 0 auto; height: 140px; width: auto; max-width: none; filter: brightness(0) invert(1); }
.owner-cta-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #7590B8;
    font-weight: 700; font-size: 1rem; padding: 15px 30px;
    border-radius: 50px; white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(31, 41, 55, .35);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.owner-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(31, 41, 55, .45); }
@media (max-width: 820px) {
    .owner-cta { padding: 56px 0 44px; }
    .owner-cta-band { flex-direction: column; text-align: center; gap: 10px; padding: 32px 24px; min-height: 0; }
    .owner-cta-text { max-width: 100%; }
    .owner-cta-band p { margin: 0 auto; }
    .owner-cta-kicker { transform: none; }
    .owner-cta-mascot { height: 126px; order: 2; }
    .owner-cta-btn { order: 3; margin-top: 4px; }
}

/* Bouton Insta du header — label complet UNIQUEMENT en vrai desktop (>=1101px),
   pour laisser le repli icône-seule (<=1100px) agir et ne pas tasser le logo. */
@media (min-width: 1101px) {
  .nav-cta-insta { padding: 13px 26px; gap: 9px; font-size: .9rem; white-space: nowrap; }
  .nav-cta-insta svg { width: 22px; height: 22px; }
}

/* Note Google (rating) sur la fiche spot */
.dhv2-rating { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 20px; color: var(--ink); flex-wrap: wrap; }
.dhv2-rating .ni { color: #F4A261; width: 1.15em; height: 1.15em; }
.dhv2-rating-val { font-weight: 800; font-size: 1.2rem; line-height: 1; }
.dhv2-rating-sub { color: var(--ink-soft); font-size: .9rem; }

/* Note Google sur les cartes de spots (badge compact, lisible sur l'image) */
.spot-rating {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.74rem; font-weight: 800; line-height: 1;
    background: rgba(0, 0, 0, 0.4); color: #fff;
    padding: 3px 9px; border-radius: 999px;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.spot-rating .ni { color: #F4A261; width: 0.95em; height: 0.95em; }
/* « sur Google » : source de la note affichée en texte (pas de schema aggregateRating) */
.sr-google { font-weight: 500; font-size: .88em; opacity: .82; }

/* ============================================================
   CARTE PLEIN ÉCRAN (refonte 2026-07) — full-bleed + panneau flottant
   ============================================================ */
.carte-fullscreen { overflow: hidden; }
.carte-fullscreen .site-footer { display: none; }
.carte-fullscreen main { padding: 0 !important; margin: 0 !important; }
/* barre marée/météo + header : fixes flottantes au-dessus de la carte (toutes tailles) */
.carte-fullscreen .top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; }
.carte-fullscreen .site-header { position: fixed; top: 0; }

.carte-app { position: fixed; inset: 0; z-index: 1; background: #eef1f4; }
#nomadeMap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.carte-app .leaflet-container { width: 100%; height: 100%; background: #eef1f4; font-family: var(--font-sans); }
.carte-app .leaflet-control-zoom { border: none !important; box-shadow: 0 8px 20px -8px rgba(31,41,55,.35); border-radius: 12px; overflow: hidden; margin: 0 20px 26px 0 !important; }
.carte-app .leaflet-control-zoom a { background: rgba(255,255,255,.94); color: var(--ink); border: none; width: 38px; height: 38px; line-height: 38px; font-size: 18px; }
.carte-app .leaflet-control-zoom a:hover { background: #fff; color: var(--periwinkle-deep); }
.carte-app .leaflet-control-attribution { background: rgba(255,255,255,.72); border-radius: 8px 0 0 0; font-size: 10px; color: var(--ink-soft); backdrop-filter: blur(4px); }

.carte-empty { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink-soft); text-align: center; padding: 24px; }
.carte-empty .ni { width: 42px; height: 42px; color: var(--periwinkle); }

.carte-fit {
    position: absolute; z-index: 20; top: 130px; right: 20px;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: var(--ink); font-weight: 700; font-size: .85rem;
    padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 12px 28px -12px rgba(31,41,55,.4); cursor: pointer; transition: transform .2s var(--ease);
}
.carte-fit:hover { transform: translateY(-2px); }
.carte-fit .ni { color: var(--sunset-deep); width: 1.05em; height: 1.05em; }

/* Panneau : sidebar desktop / bottom-sheet mobile */
.carte-panel {
    position: absolute; z-index: 30;
    top: 130px; left: 20px; bottom: 22px; width: 384px; max-width: calc(100vw - 40px);
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.86); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border: 1px solid rgba(255,255,255,.7); border-radius: 24px;
    box-shadow: 0 34px 64px -26px rgba(31,41,55,.45); overflow: hidden;
}
.carte-grip { display: none; }
/* Escamotage de la barre : téléphone uniquement, le panneau y est une feuille du bas.
   En tablette et en desktop c'est une colonne, elle n'a pas à disparaître. */
.carte-masquer { display: none; }
.carte-rappel { display: none; }
.carte-panel-top { padding: 20px 20px 14px; flex-shrink: 0; }
.carte-kicker { display: block; font-family: var(--font-hand); font-size: 1.55rem; color: var(--periwinkle-deep); line-height: 1; margin-bottom: 12px; }

.carte-search-row { display: flex; align-items: center; gap: 10px; }
.carte-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: var(--sand-light); border: 1px solid rgba(31,41,55,.08); border-radius: 14px; padding: 11px 14px; }
.carte-search-cancel { display: none; background: none; border: none; color: var(--periwinkle-deep); font-family: var(--font-sans); font-weight: 700; font-size: .92rem; padding: 8px 2px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.carte-search:focus-within { border-color: var(--periwinkle); box-shadow: 0 0 0 3px rgba(138,165,196,.22); }
.carte-search svg { color: var(--ink-soft); flex-shrink: 0; }
/* 16px minimum : empêche le zoom auto d'iOS quand on tape dans le champ (sinon la carte « part dans tous les sens »). */
.carte-search input { flex: 1; border: none; background: none; outline: none; font-size: 16px; color: var(--ink); font-family: var(--font-sans); min-width: 0; }
.carte-search input::placeholder { color: var(--ink-soft); }
.carte-search input::-webkit-search-cancel-button { display: none; }
.carte-search-clear { border: none; background: none; color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }

.carte-chips { display: flex; gap: 7px; margin-top: 12px; }
.carte-filter { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--sand-light); border: 1px solid transparent; border-radius: 999px; padding: 8px 6px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all .18s var(--ease); }
.carte-filter b { font-weight: 800; opacity: .65; }
.carte-filter.active { background: var(--periwinkle-deep); color: #fff; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cf-dot-all { background: linear-gradient(135deg, var(--periwinkle), var(--sunset)); }
.cf-dot-spot { background: var(--periwinkle-deep); }
.cf-dot-event { background: var(--periwinkle-deep); }
.carte-filter.active .cf-dot { background: #fff; }

.carte-subfilters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.carte-subfilter { display: inline-flex; align-items: center; gap: 5px; background: rgba(31,41,55,.05); border: none; border-radius: 999px; padding: 6px 11px; font-size: .76rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all .15s var(--ease); }
.carte-subfilter .ni { width: .95em; height: .95em; }
.carte-subfilter.active { background: var(--sunset-deep); color: #fff; }
.carte-subfilter[style*="cat-color"].active { background: var(--cat-color, var(--periwinkle)); color: #fff; }
.carte-subfilter.active .csf-emoji, .carte-subfilter.active svg { color: #fff; }

.carte-list { flex: 1; overflow-y: auto; padding: 6px 10px 14px; overscroll-behavior: contain; }
.carte-list-empty { padding: 30px 20px; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.carte-row { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: none; border-radius: 16px; padding: 9px 10px; cursor: pointer; transition: background .15s var(--ease); }
.carte-row:hover { background: rgba(138,165,196,.16); }
.cl-thumb { width: 52px; height: 52px; border-radius: 13px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--sand); }
.cl-thumb-icon { display: flex; align-items: center; justify-content: center; color: #fff; }
.cl-thumb-icon .ni { width: 22px; height: 22px; }
/* Vignette de repli d'un spot sans photo : bleu comme ses pins, plus orange.
   Une pastille orange dans la liste se lisait comme « partenaire ». */
.cl-thumb-spot { background: linear-gradient(135deg, var(--periwinkle), var(--periwinkle-deep)); }
.cl-thumb-event { background: linear-gradient(135deg, var(--periwinkle), var(--periwinkle-deep)); }
.cl-text { flex: 1; min-width: 0; }
.cl-name { display: block; font-family: 'One Little Font', 'Caveat', cursive; font-weight: 700; color: var(--ink); font-size: 1.18rem; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-partner .ni { color: var(--sunset-deep); width: .85em; height: .85em; }
.cl-sub { display: block; font-size: .78rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pastilles de mise en avant dans la liste de la carte. Radius 10px comme les
   pastilles de l'aperçu, et non la grande pilule des pages : dans une rangée de
   52px il faut que ça reste discret et lisible. L'orange reste réservé au
   partenaire, le bleu dit l'avantage Pass. */
.cl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.cl-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 9px;
    font-size: .66rem; font-weight: 700; line-height: 1.3;
    letter-spacing: .02em; white-space: nowrap; color: #fff;
}
.cl-chip .ni { width: .9em; height: .9em; }
/* Orange en HEXADÉCIMAL DUR, et non var(--sunset) : le thème neutralise
   --sunset en bleu sur tout le body (« blanc dominant, bleu nomade »), et ne
   garde l'orange que là où il est écrit en dur. C'est la convention de
   .partner-chip et de .ml-pin-partner, à laquelle on se conforme ici, sinon la
   pastille Partenaire sortait bleue comme celle du Pass. */
.cl-chip-partner { background: linear-gradient(135deg, #F4A261, #E08A4A); }
.cl-chip-pass { background: var(--periwinkle-deep); }
.cl-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cl-rating { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 800; color: var(--ink); }
.cl-rating .ni { color: var(--sunset); width: .9em; height: .9em; }
.cl-chev { color: var(--ink-soft); }

.carte-panel[data-view="detail"] .carte-panel-top,
.carte-panel[data-view="detail"] .carte-list,
.carte-panel[data-view="detail"] .carte-list-empty { display: none; }
.carte-panel[data-view="list"] .carte-detail { display: none; }
.carte-panel[data-view="detail"] .carte-detail { display: block; }
.carte-detail { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.carte-detail-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(31,41,55,.06); }
.carte-detail-back { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 13px 18px; font-size: .85rem; font-weight: 700; color: var(--periwinkle-deep); cursor: pointer; }
.carte-detail-close { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 12px 18px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.carte-detail-close:hover { color: var(--ink); }
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape){ .carte-detail-close { display: none; } }
.cd-hero { height: 168px; background-size: cover; background-position: center; background-color: var(--sand); position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 12px; }
/* Les pastilles de catégorie ne sont plus orange. L'orange est la couleur des
   partenaires, c'est ce qui doit sauter aux yeux sur la carte : le poser aussi
   sur chaque spot lui retirait tout son sens. Encre translucide sur la photo,
   comme la pastille partenaire juste en face. */
.cd-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 104px); }
.cd-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(31,41,55,.62); color: #fff; font-size: .72rem; font-weight: 700; padding: 5px 11px; border-radius: 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cd-chip .ni { width: .95em; height: .95em; }
.cd-partner { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.45); color: #fff; font-size: .68rem; font-weight: 700; padding: 5px 10px; border-radius: 10px; backdrop-filter: blur(3px); }
.cd-partner .ni { color: var(--sunset); width: .9em; height: .9em; }
.cd-body { padding: 16px 20px 24px; }
.cd-title { font-family: 'One Little Font', 'Caveat', cursive; font-size: 2.1rem; line-height: 1.02; color: var(--ink); margin: 0 0 8px; }
.cd-rating { display: flex; align-items: center; gap: 5px; font-size: .95rem; margin-bottom: 8px; color: var(--ink); font-weight: 700; }
.cd-rating .ni { color: var(--sunset); }
.cd-rating span { color: var(--ink-soft); font-size: .82rem; font-weight: 500; }
.cd-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink-soft); font-size: .85rem; margin-bottom: 8px; }
.cd-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cd-meta .ni { width: 1em; height: 1em; }
.cd-addr { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-soft); font-size: .85rem; margin: 0 0 12px; }
.cd-addr .ni { flex-shrink: 0; margin-top: 2px; }
.cd-desc { color: var(--ink); font-size: .9rem; line-height: 1.6; margin: 0 0 16px; }
.cd-nav { margin-bottom: 16px; }
.cd-nav-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 700; margin-bottom: 7px; }
.cd-nav-btns { display: flex; gap: 8px; }
.cd-nav-btn { flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: var(--sand-light); border: 1px solid rgba(31,41,55,.07); border-radius: 13px; padding: 10px 4px; font-size: .72rem; font-weight: 700; color: var(--ink); text-decoration: none; transition: all .15s var(--ease); }
.cd-nav-btn:hover { border-color: var(--periwinkle); transform: translateY(-1px); }
.cd-nav-btn svg { width: 22px; height: 22px; }
.cd-cta { display: flex; margin-top: 14px; align-items: center; justify-content: center; background: var(--periwinkle-deep); color: #fff; font-weight: 700; padding: 14px; border-radius: 14px; text-decoration: none; transition: all .2s var(--ease); }
.cd-cta:hover { background: var(--ink); transform: translateY(-2px); }

.pin-active { z-index: 1000 !important; }
.pin-active .pin-disc { box-shadow: 0 0 0 4px rgba(31, 41, 55,.55), 0 8px 18px -4px rgba(31,41,55,.5); }

/* Mobile : barre marée/météo masquée pour gagner de l'espace (demande Théo) */
@media (max-width: 720px) { .top-bar { display: none !important; } }

@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
    /* barre + header restent bien en haut, fixes, au-dessus de la carte */
    .carte-fullscreen .site-header { position: fixed; top: 0; }
    /* panneau = bottom-sheet, REPLIÉE à l'arrivée (la carte reste visible) */
    .carte-panel {
        top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
        border-radius: 22px 22px 0 0; border-bottom: none; height: 74vh; max-height: 74vh;
        transition: transform .34s cubic-bezier(.4,0,.2,1);
    }
    .carte-panel[data-open="false"] { transform: translateY(calc(100% - var(--peek, 168px) - 16px - env(safe-area-inset-bottom, 0px))); }
    /* replié = uniquement recherche + filtres, JAMAIS d'établissement visible */
    .carte-panel[data-open="false"] .carte-list,
    .carte-panel[data-open="false"] .carte-list-empty { display: none; }
    /* TIROIR REPLIÉ : poignée, recherche et ligne de catégories, rien de plus.
       La légende et les filtres rapides attendent l'ouverture. Mesuré le 8 août
       2026 : replié, le tiroir prenait 287px sur un écran de 812, la carte n'en
       gardait qu'un peu plus de la moitié une fois le header déduit. Material
       plafonne une feuille venant du bas à la moitié de l'écran, on vise le
       cinquième, comme les applications de cartographie. */
    /* BARRE ESCAMOTABLE. Même repliée, la barre garde 160 à 190px et gêne la lecture
       de la carte. On peut donc la retirer complètement, et la rappeler d'un bouton.
       Demandé par Théo le 8 août 2026. Trois positions, dans l'ordre : masquée,
       repliée, ouverte. On masque par le chevron ou en glissant vers le bas depuis
       l'état replié ; on rappelle par la pastille posée en bas de la carte. */
    /* La barre s'escamote, MAIS l'aperçu d'une fiche reste visible : masquer les
       filtres n'est pas refuser de voir un spot. Sans ce :not(), taper un pin
       construisait bien la fiche mais elle restait hors écran (Théo, 8 août 2026).
       L'aperçu refermé, la barre retrouve sa cachette toute seule. */
    .carte-panel[data-masque="1"]:not([data-view="detail"]) { transform: translateY(112%) !important; }

    /* Bouton « masquer » posé SUR LA CARTE, juste au-dessus de la barre, et non
       dans le bandeau : là-haut il ne reste que 20px entre le bord du panneau et
       le champ de recherche, le bouton s'y écrasait et mordait sur le champ.
       Sur la carte il a sa place, une vraie cible de 40px, et il ne gêne rien :
       les boutons de zoom de Leaflet sont masqués sur téléphone. */
    .carte-masquer {
        position: absolute; z-index: 455;
        right: 14px; bottom: calc(var(--peek, 170px) + 30px);
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0;
        border: 1px solid rgba(31, 41, 55, .12); border-radius: 12px;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        color: var(--ink-soft); cursor: pointer;
        box-shadow: 0 6px 18px rgba(31, 36, 46, .14);
    }
    .carte-masquer:active { transform: scale(.94); }
    /* Il ne sert que barre visible et repliée : ouverte on referme par la poignée,
       masquée c'est la pastille de rappel qui prend le relais. */
    .carte-panel[data-open="true"] ~ .carte-masquer,
    .carte-panel[data-masque="1"] ~ .carte-masquer,
    .carte-panel[data-view="detail"] ~ .carte-masquer,
    .carte-panel[data-search="on"] ~ .carte-masquer { display: none; }
    /* Et la pastille de rappel s'efface le temps qu'on lit une fiche. */
    .carte-panel[data-view="detail"] ~ .carte-rappel { display: none; }

    .carte-rappel {
        position: absolute; z-index: 460;
        left: 50%; transform: translateX(-50%);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
        display: inline-flex; align-items: center; gap: 7px;
        min-height: 44px; padding: 0 18px;
        border: 1px solid rgba(31, 41, 55, .12); border-radius: 12px;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        color: var(--ink); font-size: .9rem; font-weight: 600;
        white-space: nowrap;   /* sinon « Recherche et filtres » se coupe en deux */
        box-shadow: 0 8px 22px rgba(31, 36, 46, .16);
        cursor: pointer;
    }
    .carte-rappel:active { transform: translateX(-50%) scale(.97); }
    /* L'attribut hidden doit rester le maître : c'est lui que le script manipule. */
    .carte-rappel[hidden] { display: none; }

    .carte-panel[data-open="false"] .carte-quick { display: none; }
    /* Posée une fraction de seconde par setPeek pour mesurer la hauteur du tiroir
       replié quel que soit son état réel. Voir setPeek dans page-carte.php. */
    .carte-panel.mesure-peek .carte-quick { display: none; }
    .carte-panel[data-open="false"] .carte-bas.dans-tiroir { gap: 8px; margin: 2px 0 4px; }
    .carte-grip { display: block; position: relative; width: 42px; height: 5px; border-radius: 3px; background: rgba(31,41,55,.2); border: none; margin: 9px auto 2px; cursor: pointer; flex-shrink: 0; }
    /* La poignée ne fait que 5px de haut. On lui donne une zone de contact réelle
       sans changer son dessin ni la hauteur du tiroir. Le bandeau entier est
       cliquable en plus (voir le script), la poignée n'est que le repère visuel. */
    .carte-grip::after { content: ''; position: absolute; left: 50%; top: 50%; width: 150px; height: 28px; transform: translate(-50%, -50%); }
    .carte-kicker { display: none; }
    .carte-panel-top { padding: 4px 16px 12px; }
    .carte-fit { top: 104px; right: 14px; }
    .carte-app .leaflet-control-zoom { display: none; }
    .carte-app .leaflet-control-attribution { font-size: 9px; padding: 1px 5px; }
    /* fiche = sheet compacte plafonnée -> la carte reste visible + tappable au-dessus */
    /* L'apercu se dimensionne sur son contenu. Le plafond de 60vh coupait les
       fiches les plus riches, mesurees a 499px sur un ecran de 812 : on tombait
       sur un defilement de 12 a 30px, juste assez pour cacher le bas sans qu'on
       s'en apercoive. Releve a 84svh, les fiches courtes restent courtes et
       aucune n'a besoin d'etre defilee. svh et non vh : la barre du navigateur
       mobile fausse vh. */
    .carte-panel[data-view="detail"] { height: auto; max-height: 84vh; }
    .carte-panel[data-view="detail"] { max-height: 84svh; }
    /* mode recherche = overlay PLEIN ÉCRAN type Waze/Apple Maps. Le panneau passe en position:fixed
       et est calé sur le viewport VISIBLE (au-dessus du clavier) par JS via l'API visualViewport —
       seule méthode fiable sur iOS, qui sinon fait remonter tout le panneau au clavier. */
    body.carte-searching .carte-app { z-index: 200; } /* l'overlay passe AU-DESSUS du header */
    .carte-panel[data-search="on"] {
        position: fixed; top: 0; left: 0; right: auto; bottom: auto;
        width: 100%; height: 100%; max-height: none;
        border-radius: 0; transform: none !important;
        background: rgba(250,250,247,.98);
    }
    .carte-panel[data-search="on"] .carte-panel-top { padding-top: 14px; }
    .carte-panel[data-search="on"] .carte-search-cancel { display: inline-flex; }
    .carte-panel[data-search="on"] .carte-grip { display: none; }
    /* sous-filtres en scroll horizontal (façon chips à faire défiler) */
    /* touch-action: pan-x, même raison que la légende : le geste horizontal
       appartient à cette ligne, pas au tiroir qui la porte. */
    .carte-subfilters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
    .carte-subfilters::-webkit-scrollbar { display: none; }
    .carte-subfilter { flex-shrink: 0; }
}


/* ===SPOT-VARIANTS-START=== */
.spot-fiche{}
.spot-variant{display:block}
/* --- Variante A --- */
/* ===================== VARIANTE A — Fiche produit classique ===================== */
.spot-variant[data-variant="a"]{
    --va-periwinkle:#8AA5C4;
    --va-periwinkle-deep:#7590B8;
    --va-sunset:#F4A261;
    --va-sunset-deep:#E08A4A;
    --va-creme:#FAF6EE;
    --va-sable:#E8DCC4;
    --va-encre:#1F2937;
    --va-encre-soft:#4A5B6E;
    --va-muted:#8A97A8;
    --va-line:rgba(31,41,55,.08);
    --va-shadow:0 10px 30px rgba(31,41,55,.08);
    --va-shadow-sm:0 4px 14px rgba(31,41,55,.06);
    display:block;
    background:var(--va-creme);
    color:var(--va-encre);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    padding:44px 24px 8px;
}
.spot-variant[data-variant="a"] *,
.spot-variant[data-variant="a"] *::before,
.spot-variant[data-variant="a"] *::after{ box-sizing:border-box; }
.spot-variant[data-variant="a"] a:focus-visible,
.va-hours-sum:focus-visible{ outline:2px solid var(--va-periwinkle-deep); outline-offset:2px; border-radius:10px; }

.va-grid{
    max-width:1120px; margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    gap:48px;
    align-items:start;
}

/* ---------- Galerie ---------- */
.va-gallery{ min-width:0; }
.va-hero{
    position:relative; margin:0;
    aspect-ratio:3/2;
    border-radius:18px; overflow:hidden;
    border:1px solid var(--va-line);
    background:var(--va-sable);
}
.va-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
.va-hero-empty{ position:absolute; inset:0; background:var(--va-sable); }

.va-hero-cats{ position:absolute; top:12px; left:12px; display:flex; flex-wrap:wrap; gap:6px; max-width:72%; }
.va-cat{
    background:var(--va-periwinkle-deep); color:#fff;
    font-size:12px; font-weight:600; letter-spacing:.02em;
    padding:6px 11px; border-radius:999px; box-shadow:var(--va-shadow-sm);
}
.va-partner{
    position:absolute; top:12px; right:12px;
    display:inline-flex; align-items:center; gap:5px;
    background:var(--va-sunset); color:var(--va-encre);
    font-size:12px; font-weight:700;
    padding:6px 11px; border-radius:999px; box-shadow:var(--va-shadow-sm);
}
.va-partner svg{ width:13px; height:13px; }

.va-strip{
    display:flex; gap:8px; margin-top:12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.va-strip[data-count="1"]{ display:none; }
.va-strip-item{
    flex:0 0 auto; width:76px; height:76px;
    border-radius:12px; overflow:hidden;
    border:1px solid var(--va-line);
    scroll-snap-align:start; background:var(--va-sable);
}
.va-strip-item.is-active{ border:2px solid var(--va-periwinkle); }
.va-strip-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Panneau info (sticky) ---------- */
.va-panel{
    position:static; align-self:start; order:-1;
    min-width:0;
    background:#fff; border-radius:18px;
    border:1px solid var(--va-line); box-shadow:var(--va-shadow);
    padding:32px;
}
.va-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.va-pill{
    background:var(--va-periwinkle-deep); color:#fff;
    font-size:12px; font-weight:600; letter-spacing:.02em;
    padding:5px 11px; border-radius:999px;
}
.va-name{
    font-family:'One Little Font','Caveat',cursive;
    font-weight:400; font-size:34px; line-height:1.12;
    margin:0 0 12px; color:var(--va-encre);
}
.va-rating{ display:flex; align-items:center; gap:7px; margin-bottom:16px; }
.va-star{ display:inline-flex; font-size:19px; color:var(--va-sunset); }
.va-star svg{ fill:var(--va-sunset); }
.va-rating-val{ font-weight:800; font-size:16px; color:var(--va-encre); }
.va-rating-sub{ color:var(--va-muted); font-size:14px; }
.va-lead{ color:var(--va-encre-soft); font-size:15px; line-height:1.6; margin:0 0 20px; }

.va-specs{ border-top:1px solid var(--va-line); margin-bottom:22px; }
.va-spec{
    display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
    padding:14px 0; border-bottom:1px solid var(--va-line);
}
.va-spec-k{
    display:inline-flex; align-items:center; gap:7px;
    color:var(--va-muted); font-size:13px; font-weight:600; flex:0 0 auto;
}
.va-spec-k svg{ font-size:15px; color:var(--va-periwinkle-deep); }
.va-spec-v{ color:var(--va-encre); font-size:14px; font-weight:500; text-align:right; line-height:1.45; }
.va-spec-v a{ color:var(--va-periwinkle-deep); text-decoration:none; font-weight:600; }
.va-spec-v a:hover{ text-decoration:underline; }
.va-spec-sub{ display:block; color:var(--va-muted); font-weight:400; font-size:13px; margin-top:2px; }

/* Horaires dépliables (details/summary, sans JS) */
.va-spec-hours{ display:block; }
.va-hours{ width:100%; }
.va-hours-sum{
    display:flex; align-items:center; gap:12px;
    list-style:none; cursor:pointer; min-height:44px;
}
.va-hours-sum::-webkit-details-marker{ display:none; }
.va-hours-now{
    display:inline-flex; align-items:center; gap:7px; margin-left:auto;
    font-size:14px; font-weight:600; color:var(--va-encre);
}
.va-hours-dot{ width:8px; height:8px; border-radius:50%; background:var(--va-muted); flex:0 0 auto; }
.va-hours-now.is-open .va-hours-dot{ background:var(--va-periwinkle-deep); }
.va-hours-now.is-closed{ color:var(--va-muted); }
.va-hours-chev{ color:var(--va-muted); flex:0 0 auto; transition:transform .2s ease; }
.va-hours[open] .va-hours-chev{ transform:rotate(180deg); }
.va-hours-week{ list-style:none; margin:8px 0 4px; padding:10px 0 0; border-top:1px solid var(--va-line); }
.va-hours-row{ display:flex; justify-content:space-between; gap:16px; padding:5px 0; font-size:13px; }
.va-hours-day{ color:var(--va-encre-soft); }
.va-hours-val{ color:var(--va-encre); font-weight:500; }
.va-hours-row.is-today{ font-weight:700; }
.va-hours-row.is-today .va-hours-day,
.va-hours-row.is-today .va-hours-val{ color:var(--va-periwinkle-deep); }
.va-hours-row.is-closed .va-hours-val{ color:var(--va-muted); font-weight:400; }

/* Actions (façon "ajouter au panier") */
.va-actions{ display:flex; flex-direction:column; gap:12px; }
.va-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:58px; padding:0 22px; width:100%;
    border-radius:16px; border:1px solid transparent;
    font-size:16px; font-weight:700; text-decoration:none; cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.va-btn-primary{ background:#7590B8; color:#fff; }
.va-btn-primary:hover{ background:#63809f; }
.va-btn-ghost{ background:var(--periwinkle-deep); border-color:transparent; color:#fff; }
/* Bouton Instagram de la fiche spot : meme degrade officiel que le bloc
   Instagram du pied de page, pour que la marque soit reconnaissable d'un coup
   d'oeil. Reserve a Instagram : un lien Facebook garde le bouton neutre. */
/* Le bouton reseau d'une fiche : de l'air entre l'icone et le mot. */
.va-btn{ gap:10px; }
.va-btn-ic{ flex:0 0 auto; }
.va-btn-insta{
    background: linear-gradient(135deg, #F4A261 0%, #C13584 60%, #833AB4 100%);
    border-color: transparent; color:#fff;
}
.va-btn-insta:hover{ filter:brightness(1.06); color:#fff; }
.va-btn-ghost:hover{ filter:brightness(1.06); }

.va-nav{ margin-top:6px; }
.va-nav-label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--va-muted); margin-bottom:8px; }
.va-nav-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.va-nav-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:44px; padding:0 8px;
    border:1px solid var(--va-line); border-radius:12px;
    background:#fff; color:var(--va-encre-soft);
    font-size:13px; font-weight:600; text-decoration:none;
    transition:border-color .18s ease,background .18s ease;
}
.va-nav-btn:hover{ border-color:var(--va-periwinkle); background:var(--va-creme); }
.va-nav-btn svg,.va-nav-btn img{ width:16px; height:16px; flex:0 0 auto; }

/* ---------- Sous les deux colonnes ---------- */
.va-below{ max-width:1120px; margin:48px auto 0; }
.va-desc{
    max-width:70ch; margin:0 auto;
    color:var(--va-encre-soft); font-size:16px; line-height:1.72;
}
.va-desc p{ margin:0 0 1em; }
.va-desc p:last-child{ margin-bottom:0; }
.va-desc h2,.va-desc h3{ font-family:'One Little Font','Caveat',cursive; font-weight:400; color:var(--va-encre); line-height:1.2; }
.va-desc a{ color:var(--va-periwinkle-deep); }
.va-desc img{ max-width:100%; height:auto; border-radius:14px; }

.va-tags{ max-width:70ch; margin:20px auto 0; display:flex; flex-wrap:wrap; gap:8px; }
.va-tag{ background:#fff; border:1px solid var(--va-line); border-radius:999px; padding:5px 12px; font-size:13px; color:var(--va-encre-soft); }

.va-nomade{
    max-width:none; margin:28px auto 0;
    background:#fff; border:1px solid var(--va-line); border-radius:18px;
    box-shadow:var(--va-shadow-sm); padding:24px 28px;
}
.va-nomade-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.va-nomade-avatar{ width:48px; height:48px; border-radius:50%; object-fit:contain; padding:5px; border:1px solid var(--va-line); background:#fff; flex:0 0 auto; }
.va-nomade-titles{ display:flex; flex-direction:column; }
.va-nomade-label{ font-family:'Caveat',cursive; font-size:26px; font-weight:700; color:var(--va-periwinkle-deep); line-height:1; }
.va-nomade-sub{ font-style:normal; color:var(--va-muted); font-size:13px; margin-top:2px; }
.va-nomade-text{ margin:0; color:var(--va-encre); font-size:16px; line-height:1.7; font-style:italic; }

/* ===================== Mobile ===================== */
@media (max-width:720px){
    .spot-variant[data-variant="a"]{ padding:8px 16px 8px; }
    .va-grid{ grid-template-columns:1fr; gap:24px; }

    /* Galerie -> carrousel plein cadre (on masque la grande image, la bande devient le carrousel) */
    .va-hero{ display:block; }
    .va-strip{ display:flex; gap:10px; margin-top:0; padding-bottom:0; }
    .va-strip[data-count="1"]{ display:flex; }
    .va-strip-item{
        flex:0 0 100%; width:100%; height:auto; aspect-ratio:3/2;
        border-radius:18px; border:1px solid var(--va-line);
        scroll-snap-align:start;
    }
    .va-strip-item.is-active{ border:1px solid var(--va-line); }

    /* Mobile : le panneau infos passe EN HAUT (demande Théo), la photo + l'avis dessous */
    .va-panel{ order:-1; position:static; padding:24px 20px; background:#fff; border:1px solid var(--va-line); border-radius:18px; box-shadow:var(--va-shadow); text-align:center; }
    .va-gallery{ order:0; margin-top:8px; }
    .va-pills{ justify-content:center; }
    .va-name{ font-size:26px; }
    .va-rating{ justify-content:center; }
    .va-lead{ text-align:center; }
    .va-specs{ text-align:left; }
    .va-btn{ min-height:52px; }

    .va-below{ margin-top:36px; }
    .va-nomade{ padding:22px; }
    .va-nomade-text{ font-size:15px; }
}

/* --- Fiche finalisee (variante A) : cadrage + slider photos + avis sous la galerie --- */
.spot-fiche{padding:102px 0 90px}
@media(max-width:720px){.spot-fiche{padding:32px 0 64px}}
.spot-variant[data-variant="a"] .va-hero{position:relative;overflow:hidden}
.spot-variant[data-variant="a"] .va-hero-img{transition:opacity .28s ease}
.spot-variant[data-variant="a"] .va-hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:var(--va-encre);border:1px solid rgba(31,41,55,.08);border-radius:50%;cursor:pointer;box-shadow:0 4px 14px rgba(31,41,55,.12);transition:background .15s,transform .15s;z-index:2}
.spot-variant[data-variant="a"] .va-hero-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.spot-variant[data-variant="a"] .va-hero-prev{left:12px}
.spot-variant[data-variant="a"] .va-hero-next{right:12px}
.spot-variant[data-variant="a"] .va-hero-count{position:absolute;right:12px;bottom:12px;background:rgba(31,41,55,.72);color:#fff;font:600 .78rem 'Inter',sans-serif;padding:3px 10px;border-radius:999px;z-index:2}
.spot-variant[data-variant="a"] .va-strip-item{cursor:pointer;transition:border-color .15s,opacity .15s}
.spot-variant[data-variant="a"] .va-strip-item:hover{opacity:.88}
.spot-variant[data-variant="a"] .va-gallery .va-nomade{margin-top:18px}
@media(min-width:721px){
  .spot-variant[data-variant="a"] .va-hero{ aspect-ratio:auto; min-height:340px; margin:0; }
}

/* --- ESSAI Cuisine Ephemere (.va-trial) : fond blanc + bleu nomade + photo reduite avec vignettes --- */
.spot-fiche.va-trial{ background:#FAFAF7; } /* meme blanc que le header, cartes en #fff pur */
.spot-variant[data-variant="a"].va-trial{ background:transparent; --va-periwinkle-deep:#7590B8; --va-periwinkle:#7590B8; }
.spot-variant[data-variant="a"].va-trial .va-panel,
.spot-variant[data-variant="a"].va-trial .va-nomade{ border-color:rgba(31,41,55,.12); }
.spot-variant[data-variant="a"].va-trial .va-gallery{ display:flex; flex-direction:column; }
.spot-variant[data-variant="a"].va-trial .va-hero{ flex:1 1 auto; min-height:0; }
.spot-variant[data-variant="a"].va-trial .va-strip{ display:flex; flex:0 0 auto; gap:8px; margin-top:10px; padding-bottom:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.spot-variant[data-variant="a"].va-trial .va-strip-item{ flex:0 0 auto; width:74px; height:74px; aspect-ratio:auto; min-height:0; padding:0; border-radius:12px; border:1px solid var(--va-line); overflow:hidden; background:var(--va-sable); cursor:pointer; transition:border-color .15s,opacity .15s; }
.spot-variant[data-variant="a"].va-trial .va-strip-item:hover{ opacity:.9; }
.spot-variant[data-variant="a"].va-trial .va-strip-item.is-active{ border:2px solid var(--va-periwinkle-deep); }
.spot-variant[data-variant="a"].va-trial .va-strip-item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Vignettes sous la photo = desktop uniquement (demande Theo 2026-07-09) */
@media (max-width:720px){ .va-trial .va-strip{ display:none !important; } }
/* ===SPOT-VARIANTS-END=== */


/* ===== NM-ROW : carte "ligne" horizontale mobile (liste spots/events) ===== */
.nm-row{ display:none; }
@media (max-width:720px){
  .spot-grid:has(.nm-row), .event-grid:has(.nm-row), .evmag-grid:has(.nm-row){ display:flex; flex-direction:column; gap:12px; }
  .spot-card:has(.nm-row), .event-card-v2:has(.nm-row), .evmag-tile:has(.nm-row){
    display:block !important; background:#fff !important; background-image:none !important;
    aspect-ratio:auto !important; height:auto !important; min-height:0 !important;
    border-radius:18px; padding:11px !important;
    box-shadow:0 4px 14px rgba(31,41,55,.06); border:1px solid rgba(31,41,55,.07);
  }
  .spot-card:has(.nm-row)::before, .event-card-v2:has(.nm-row)::before, .spot-card:has(.nm-row)::after, .event-card-v2:has(.nm-row)::after, .evmag-tile:has(.nm-row)::before, .evmag-tile:has(.nm-row)::after{ display:none !important; }
  .spot-card:has(.nm-row) > :not(.nm-row), .event-card-v2:has(.nm-row) > :not(.nm-row), .evmag-tile:has(.nm-row) > :not(.nm-row){ display:none !important; }
  .nm-row{ display:flex; align-items:center; gap:13px; text-align:left; width:100%; }
  .nm-row-thumb{ flex:0 0 auto; width:66px; height:66px; border-radius:14px; object-fit:cover; background:var(--sand,#e8dcc4); }
  .nm-row-main{ flex:1 1 auto; min-width:0; }
  .nm-row-title{ display:block; font-family:var(--font-title); font-weight:600; font-size:1.02rem; line-height:1.18; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nm-row-sub{ display:block; font-size:.8rem; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nm-row-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:11px; font-size:.76rem; color:var(--ink-soft); margin-top:4px; }
  .nm-row-chip{ display:inline-flex; align-items:center; gap:4px; }
  .nm-row-meta svg{ width:13px; height:13px; }
  .nm-row-price{ flex:0 0 auto; align-self:flex-start; margin-left:8px; font-family:var(--font-title); font-weight:700; font-size:1rem; color:var(--ink); white-space:nowrap; }
}


/* ===== Bandeau 'Voir sur la carte' (pages liste, desktop + mobile) - vraie carte du Bassin en fond ===== */
.nm-mapbanner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0 0 22px; padding:20px 26px; min-height:104px; border-radius:18px;
  text-decoration:none; color:var(--ink); overflow:hidden;
  background-color:#eaeee9; background-size:cover; background-position:center 45%;
  border:1px solid rgba(31,41,55,.10); box-shadow:0 8px 22px rgba(31,41,55,.08);
  transition:box-shadow .2s ease, transform .2s ease;
}
.nm-mapbanner:hover{ box-shadow:0 12px 30px rgba(31,41,55,.15); transform:translateY(-1px); }
.nm-mapbanner-label{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-hand); font-weight:700; font-size:1.55rem; letter-spacing:0; color:var(--ink); text-shadow:0 1px 2px rgba(255,255,255,.65); }
.nm-mapbanner-label svg{ width:24px; height:24px; color:var(--periwinkle-deep); flex:0 0 auto; }
.nm-mapbanner-chev{ color:var(--periwinkle-deep); flex:0 0 auto; }
@media (max-width:720px){
  .nm-mapbanner{ margin-bottom:14px; padding:15px 18px; min-height:66px; border-radius:16px; box-shadow:0 5px 16px rgba(31,41,55,.07); }
  .nm-mapbanner-label{ font-size:1.35rem; gap:9px; }
  .nm-mapbanner-label svg{ width:20px; height:20px; }
}


/* ===== Detail carte mobile facon fiche produit (screen 2) : titre+prix + bouton Voir la carte ===== */
.cd-titlerow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cd-price{ flex:0 0 auto; font-family:var(--font-title); font-weight:700; font-size:1.15rem; color:var(--ink); white-space:nowrap; }
@media (max-width:720px){
  .cd-addr, .cd-desc{ display:none; }
  /* Fiche compacte : tout le contenu du volet visible d'un coup, sans scroll (demande Théo) */
  .cd-hero{ height: 138px; }
  .cd-body{ padding: 13px 20px 16px; }
  .cd-title{ font-size: 1.75rem; margin-bottom: 6px; }
  .cd-nav{ margin-bottom: 12px; }
  .cd-nav-btn{ padding: 8px 4px; }
  .cd-cta{ margin-top: 10px; padding: 13px; }
}


/* ===== Pages liste (spots/events) mobile : hero compact -> la liste remonte tres haut ===== */
@media (max-width:720px){
  .page-hero{ padding-top:16px !important; padding-bottom:6px !important; }
  .page-hero .label{ font-size:1.05rem; margin-bottom:0; }
  .page-hero h1{ margin:0; line-height:1.04; }
  .page-hero p{ display:none !important; }
  .nm-list-top{ padding-top:6px !important; }
  .nm-list-top .filter-bar{ margin-bottom:14px !important; }
}

/* Pages liste desktop : hero compact -> liste remontee (demande Theo) */
@media (min-width:721px){
  .page-hero{ padding-top:114px !important; padding-bottom:22px !important; }
  .nm-list-top{ padding-top:14px !important; }
}


/* ===== Top-bar : uniquement sur la home, entre le hero et le 1er bloc ===== */
.top-bar.top-bar--inline{ position: static; margin: 0; }


/* ================= MENU MOBILE : panneau slide-in ================= */
body.menu-open{ overflow: hidden; }
.mobile-menu{ position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; }
.mobile-menu.open{ visibility: visible; pointer-events: auto; }
.mm-scrim{ position: absolute; inset: 0; background: rgba(31,36,46,.52); opacity: 0; transition: opacity .35s ease; }
.mobile-menu.open .mm-scrim{ opacity: 1; }
.mm-panel{ position: absolute; top: 0; left: 0; bottom: 0; width: min(84%, 350px); background: var(--cream); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; padding: 22px 26px calc(env(safe-area-inset-bottom, 0px) + 22px); transform: translateX(-102%); transition: transform .4s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 50px rgba(31,36,46,.28); }
.mobile-menu.open .mm-panel{ transform: translateX(0); }
.mm-head{ display: flex; align-items: flex-start; justify-content: space-between; }
.mm-logo img{ height: 56px; width: auto; display: block; }
.mm-close{ width: 42px; height: 42px; margin: -6px -8px 0 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); background: none; border: none; cursor: pointer; transition: background .18s; }
.mm-close:hover{ background: rgba(31,36,46,.06); }
.mm-tagline{ font-family: var(--font-hand); font-size: 1.55rem; line-height: 1.05; color: var(--periwinkle-deep); margin: 6px 0 0; max-width: 15ch; }
.mm-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 16px; position: relative; z-index: 1; }
.mm-cta{ display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 20px; border-radius: 10px; background: linear-gradient(135deg, #F4A261 0%, #C13584 60%, #833AB4 100%); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: 0 8px 20px rgba(31,41,55,.14); transition: transform .18s, box-shadow .18s, filter .18s; }
.mm-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(31,41,55,.18); filter: brightness(1.06); }
.mm-cta svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.mm-nav{ display: flex; flex-direction: column; gap: 2px; margin-top: 18px; position: relative; z-index: 1; }
.mm-nav a{ display: inline-flex; align-items: center; gap: 9px; position: relative; font-family: var(--font-title); font-size: 1.5rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 6px 0; width: fit-content; opacity: 0; transform: translateX(-14px); transition: color .18s; }
.mm-nav a.active{ color: var(--sunset-deep); font-weight: 700; }
.mm-nav a svg{ width: .82em; height: .82em; flex: 0 0 auto; }
.mm-nav a:not(.active)::after{ content: ''; position: absolute; left: 0; bottom: 2px; height: 2px; width: 100%; background: var(--sunset-deep); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.mm-nav a:not(.active):hover::after{ transform: scaleX(1); }
.mobile-menu.open .mm-nav a:not(.active):hover{ transform: translateX(5px); }
.mobile-menu.open .mm-nav a{ opacity: 1; transform: none; transition: opacity .32s ease, transform .32s ease, color .18s; }
.mobile-menu.open .mm-nav a:nth-child(1){ transition-delay: .14s; }
.mobile-menu.open .mm-nav a:nth-child(2){ transition-delay: .19s; }
.mobile-menu.open .mm-nav a:nth-child(3){ transition-delay: .24s; }
.mobile-menu.open .mm-nav a:nth-child(4){ transition-delay: .29s; }
.mobile-menu.open .mm-nav a:nth-child(5){ transition-delay: .34s; }
.mobile-menu.open .mm-nav a:nth-child(6){ transition-delay: .39s; }
.mm-foot{ margin-top: auto; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--ink-soft); }
.mm-foot .mm-loc{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; width: fit-content; }
.mm-foot .mm-loc svg{ width: 15px; height: 15px; }
.mm-foot .mm-handle{ color: var(--sunset-deep); text-decoration: none; font-weight: 600; width: fit-content; }
.mm-contact{ display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 20px; border-radius: 999px; background: var(--periwinkle-deep); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: 0 8px 20px rgba(62,92,118,.28); transition: transform .18s, box-shadow .18s, filter .18s; }
.mm-contact:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(62,92,118,.42); filter: brightness(1.08); }
.mm-contact svg{ width: 18px; height: 18px; flex: 0 0 auto; }
/* Mascotte ancrée à la zone des LIENS (jamais sous les boutons) : bas-droite de .mm-nav.
   Elle est à droite, où les liens du bas (Carte/Blog/Contact) sont courts et à gauche → aucun chevauchement de texte. */
.mm-mascot{ position: absolute; right: -8px; bottom: -4px; width: 104px; height: auto; z-index: 0; pointer-events: none; opacity: .96; filter: drop-shadow(0 8px 16px rgba(117,144,184,.3)); }

/* ================= Footer centre en mobile ================= */
@media (max-width: 720px){
  .site-footer .footer-grid{ text-align: center; }
  .site-footer .footer-brand{ display: flex; flex-direction: column; align-items: center; }
  .site-footer .footer-brand .logo-img{ margin: 0 auto; }
  .site-footer .footer-brand p{ max-width: 34ch; margin-left: auto; margin-right: auto; }
  .site-footer .footer-social{ justify-content: center; }
  .site-footer .footer-col ul{ padding-left: 0; list-style: none; }
  .site-footer .footer-bottom{ flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .site-footer .footer-credits{ text-align: center; }
}


/* ===== Contenu gauche repris (badge + stats a vignettes) dans la carte du hero d'origine ===== */
.hero-v3-text .hero-v3-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.72); border: 1px solid rgba(62,78,110,0.14); border-radius: 12px; padding: 5px 15px 5px 12px; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; color: var(--periwinkle-deep); margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(31,36,46,.05); }
.hero-v3-text .hero-v3-badge svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hero-v3-stats { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(62,78,110,0.15); flex-wrap: wrap; }
.hv3-stat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: .9rem; color: var(--ink); font-weight: 600; white-space: nowrap; text-decoration: none; padding: 9px 18px; border-radius: 12px; background: #fff; border: 1px solid rgba(62,78,110,0.18); box-shadow: 0 3px 10px rgba(31,36,46,.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.hv3-stat strong { color: var(--periwinkle-deep); font-weight: 800; font-size: 1.1rem; }
.hv3-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31,36,46,.14); border-color: var(--sunset); color: var(--periwinkle-deep); }
.hv3-stat strong { color: var(--periwinkle-deep); font-weight: 800; font-size: 1.18rem; margin-right: 3px; }
/* Bouton Voir la carte : carte du Bassin en fond + voile pour lisibilite */
.hero-carte-btn { position: relative; color: #fff; border: none; background-image: linear-gradient(180deg, rgba(31,36,46,.4), rgba(31,36,46,.56)), url("../img/carte-bassin.jpg"); background-size: cover, cover; background-position: center 42%, center 42%; text-shadow: 0 1px 3px rgba(0,0,0,.4); box-shadow: 0 10px 24px rgba(31,36,46,.22); }
.hero-carte-btn:hover { filter: brightness(1.07); color: #fff; }
/* Bloc hero agrandi + positionne a gauche (partenaires a droite) */
@media (min-width: 961px) {
  .hero-v3:has(.hv3-scatter) .hero-v3-inner { justify-items: start; width: 100%; max-width: none; padding-left: clamp(28px, 4vw, 64px); }
  .hero-v3:has(.hv3-scatter) .hero-v3-text { width: 500px; max-width: 500px; padding: 44px 40px 38px; }
  .hero-v3:has(.hv3-scatter) .hero-v3-text .hero-hand-title { margin-bottom: 22px; }
  .hero-v3:has(.hv3-scatter) .hero-v3-text .hero-hand-title .line-top { font-size: clamp(1.7rem, 2vw, 2.4rem); }
  .hero-v3:has(.hv3-scatter) .hero-v3-text .hero-hand-title .line-main { font-size: clamp(3.9rem, 4.8vw, 5.6rem); }
  .hero-v3:has(.hv3-scatter) .hero-v3-text .hero-hand-title .line-sub { font-size: clamp(2.5rem, 3.2vw, 3.5rem); }
  .hero-v3:has(.hv3-scatter) .hero-v3-desc { font-size: 1.15rem; max-width: 44ch; }
  .hero-v3 .hv3-scatter[data-count="1"] .hv3-scrap-1 { width: clamp(250px, 22vw, 320px); right: 3%; }
}
.hv3-stat strong { font-family: var(--font-sans); font-size: 1.65rem; font-weight: 800; color: var(--periwinkle-deep); letter-spacing: -.01em; }
.hv3-stat span { font-size: .72rem; color: var(--ink-soft); font-weight: 600; }
.hv3-thumbs { display: flex; align-items: center; padding-left: 8px; }
.hv3-thumb { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid #fff; margin-left: -9px; box-shadow: 0 2px 6px rgba(31,36,46,.14); }
.hv3-thumb:first-child { margin-left: 0; }

/* ===== Bande partenaires (sous le hero) ===== */
.partner-strip { background: var(--cream); padding: 6px 0 46px; }
.partner-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.partner-strip-label { font-family: var(--font-hand); font-size: 1.7rem; line-height: 1; color: var(--periwinkle-deep); }
.partner-strip-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: .9rem; font-weight: 600; color: var(--sunset-deep); text-decoration: none; white-space: nowrap; }
.partner-strip-link:hover { color: var(--periwinkle-deep); }
.partner-strip-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.partner-strip-row .spot-card { scroll-snap-align: start; height: 288px; margin: 0; }
@media (max-width: 820px) { .partner-strip-row { grid-auto-columns: 80%; } }

/* ============================================================
   HERO « SPLIT » (accueil) — contenu à gauche, photo du Bassin
   + cartes partenaires flottantes à droite. Header pleine largeur.
   ============================================================ */

/* Header transparent + PLEINE LARGEUR + nav collée à droite sur la photo : home, hero non scrollé (desktop) */
@media (min-width: 981px) {
  .home .site-header:not(.scrolled) {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
    padding-top: calc(var(--hfy) + clamp(6px, 0.8vw, 16px));
  }
  /* Nav sur la photo : capsule givrée pour une lisibilité franche (au lieu d'un simple voile) */
  .home .site-header:not(.scrolled) .main-nav {
    background: rgba(255,255,255,.74);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 16px;
    padding: 10px 20px;
    box-shadow: 0 8px 22px rgba(20,30,50,.14);
  }
  .home .site-header .container { max-width: none; padding-left: calc(var(--hfx) + clamp(16px, 1.6vw, 36px)); padding-right: calc(var(--hfx) + clamp(12px, 1.2vw, 24px)); }
  .home .nav-wrap { justify-content: flex-start; }
  .home .logo-img { flex: 1 1 0; }
  .home .nav-right { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 20px; }
  .home .site-header:not(.scrolled) .main-nav a { color: var(--ink); }
  .home .site-header:not(.scrolled) .main-nav a.active { color: var(--sunset-deep); }
}

/* Hero PLEIN ÉCRAN (100vh) avec cadre net + bordure floutée autour */
.home { --hfx: clamp(48px, 13vw, 340px); --hfy: clamp(28px, 3.6vw, 64px); }
/* Conteneur nav+CTA : transparent partout (aucun impact hors home), centré sur la photo en desktop home */
.nav-right { display: contents; }
/* Bouton Instagram : même arrondi (16px) que la capsule de nav à sa gauche */
.home .nav-cta-insta { border-radius: 16px; }
/* Mascotte Nomade en grand, en bas à gauche du cadre du hero */
.hero-split .hs-mascot { position: absolute; left: clamp(0px, 1vw, 24px); bottom: 0; height: clamp(180px, 28vh, 300px); width: auto; z-index: 4; pointer-events: none; }
@media (max-width: 980px) { .hero-split .hs-mascot { display: none; } }
.hero-split {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: var(--hfy, clamp(28px, 3.6vw, 64px)) var(--hfx, clamp(20px, 6vw, 160px));
  background: var(--cream);
  overflow: hidden;
}
/* Fond photo FLOUTÉ, visible dans la bordure autour du cadre */
.hero-split::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/hero-bassin-v2.jpg');
  background-image: image-set(
    url('../img/hero-bassin-v2.webp') type('image/webp'),
    url('../img/hero-bassin-v2.jpg') type('image/jpeg')
  );
  background-size: cover; background-position: center;
  filter: blur(22px); transform: scale(1.14);
}
/* Cadre net : photo nette + contenu, posé sur le fond flouté — occupe tout l'écran */
.hero-split .hs-frame {
  position: relative; z-index: 1;
  min-height: calc(100vh - 2 * var(--hfy, clamp(28px, 3.6vw, 64px)));
  border-radius: clamp(18px, 2vw, 30px);
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 30px 74px rgba(20,30,50,.3);
  border: 1px solid rgba(255,255,255,.55);
}
/* Zoom proportionnel desktop (functions.php, référence 1920) : html{zoom:Z} fait rendre les
   unités vh à Z% du viewport → le hero (height/min-height:100vh) ne remplissait pas l'écran.
   On divise 100vh par le zoom de CHAQUE palier pour qu'il occupe tout le viewport (le cadre suit
   via flex:1 1 auto). !important pour gagner sur les règles hero desktop plus bas dans le fichier. */
@media (min-width:1025px) and (max-width:1279px) { .hero-split { height: calc(100vh / 0.67) !important; min-height: calc(100vh / 0.67) !important; } }
@media (min-width:1280px) and (max-width:1439px) { .hero-split { height: calc(100vh / 0.70) !important; min-height: calc(100vh / 0.70) !important; } }
@media (min-width:1440px) and (max-width:1535px) { .hero-split { height: calc(100vh / 0.75) !important; min-height: calc(100vh / 0.75) !important; } }
@media (min-width:1536px) and (max-width:1599px) { .hero-split { height: calc(100vh / 0.80) !important; min-height: calc(100vh / 0.80) !important; } }
@media (min-width:1600px) and (max-width:1799px) { .hero-split { height: calc(100vh / 0.85) !important; min-height: calc(100vh / 0.85) !important; } }
@media (min-width:1800px) and (max-width:1919px) { .hero-split { height: calc(100vh / 0.92) !important; min-height: calc(100vh / 0.92) !important; } }
.hero-split .hs-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 50%; z-index: 2;
  background-image: url('../img/hero-bassin-v2.jpg');
  background-image: image-set(
    url('../img/hero-bassin-v2.webp') type('image/webp'),
    url('../img/hero-bassin-v2.jpg') type('image/jpeg')
  );
  background-size: cover; background-position: center 44%;
}
/* Coupure nette entre le crème et la photo (plus de fondu au niveau de la couture) */

.hero-split .hs-inner {
  position: relative; z-index: 1;
  max-width: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  min-height: inherit;
}
.hero-split .hs-content { width: 50%; max-width: none; margin: 0; padding: 0 clamp(24px, 3.5vw, 72px); text-align: center; }
.hero-split .hs-title { text-align: center; margin: 0 0 22px; }
.hero-split .hs-title .line-top  { font-size: clamp(1.7rem, 2.4vw, 2.6rem); }
.hero-split .hs-title .line-main { font-size: clamp(4.6rem, 6.6vw, 7.6rem); line-height: .84; }
.hero-split .hs-title .line-sub  { font-size: clamp(2.9rem, 4.2vw, 4.6rem); }
.hero-split .hs-desc {
  font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.55;
  color: var(--ink-soft); max-width: 40ch; margin: 0 auto 30px;
}
.hero-split .hs-actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 32px; }
/* Bouton « Voir la carte » = bandeau carte (nm-mapbanner), largeur cadrée dans la colonne */
.hero-split .hs-mapbtn { max-width: 420px; width: 100%; margin: 0 auto; }
.hero-split .hs-mapbtn .nm-mapbanner-label { font-size: 1.3rem; line-height: 1.08; }
/* Si le script de la carte du hero ne se charge pas (fichier absent, réseau
   coupé), on ne laisse pas un rectangle vide : le lien vers la carte entière
   occupe la place et reste cliquable. Le cas est rare, la page doit tenir
   quand même. */
.hero-split .hs-heromap-ko { background: var(--cream); }
.hero-split .hs-mapfull.is-seul {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; white-space: nowrap;
}

/* Bouton carte sous Instagram, en mobile et tablette (la carte interactive du
   hero ne s'affiche plus sous 1025px). Depuis le 8 août 2026 c'est le MÊME
   bandeau que sur les pages Spots et Sorties : le lien texte d'avant se voyait
   à peine, alors que c'est l'action principale du hero sur téléphone. Tout le
   dessin vient de .nm-mapbanner, il ne reste ici que le placement. */
.hs-mapmini { display: none; }
@media (max-width: 1024px) {
  .hero-split .hs-mapmini { order: 4; display: flex; width: 100%; max-width: 420px; margin: 6px auto 12px; }
  .hero-split .hs-mapmini:active { transform: scale(.99); }
}
.hero-split .hs-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600;
  color: var(--sunset-deep); text-decoration: none;
}
.hero-split .hs-link .hs-arrow { transition: transform .18s var(--ease); }
.hero-split .hs-link:hover .hs-arrow { transform: translateX(4px); }

.hero-split .hs-stats { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 420px; width: 100%; margin: 0 auto; }
.hero-split .hs-stats .hs-stat { flex: 1 1 0; justify-content: center; }
.hero-split .hs-stat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding: 12px 20px; border-radius: 13px;
  background: #fff; border: 2px solid #7590B8;
  box-shadow: 0 3px 10px rgba(31,36,46,.06);
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hero-split .hs-stat strong { color: var(--periwinkle-deep); font-weight: 800; font-size: 1.3rem; }
.hero-split .hs-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31,36,46,.12); border-color: var(--sunset); }

/* Cartes partenaires flottantes */
.hero-split .hs-cards { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-split .hs-cards > a { pointer-events: auto; }
/* Cartes partenaires flottantes = composant spot-card de prod, empilé sur la photo */
.hero-split .hs-scrap { position: absolute; min-height: 0; width: clamp(238px, 20vw, 286px); height: clamp(300px, 44vh, 356px); }
.hero-split .hs-scrap-1 { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg); z-index: 4; }
.hero-split .hs-scrap-2 { top: 33%; left: 66%; transform: translate(-50%, -50%) rotate(6deg); width: clamp(216px, 17vw, 256px); height: clamp(276px, 40vh, 322px); z-index: 3; }
.hero-split .hs-scrap .spot-name { font-size: 1.3rem; line-height: 1.12; }

/* Responsive : mobile ET tablette, jusqu'a 1024px. Le « min-height: 0 » est ce qui
   empeche le hero de prendre toute la hauteur de l'ecran ; sans lui la tablette gardait
   un hero de 1024px alors que le mobile en fait 460. */
@media (max-width: 1024px) {
  .hero-split { min-height: 0; padding: clamp(8px, 2vw, 14px); }
  .hero-split .hs-frame { min-height: 0; }
  .hero-split .hs-photo { position: relative; width: 100%; height: 320px; }
  .hero-split .hs-photo::before { display: none; }
  .hero-split .hs-inner { display: block; min-height: 0; }
  .hero-split .hs-content { width: 100%; max-width: 640px; margin: 0 auto; padding: 34px 20px 22px; text-align: center; }
  .hero-split .hs-title { text-align: center; }
  .hero-split .hs-title .line-top { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .hero-split .hs-title .line-main { font-size: clamp(3.4rem, 13vw, 5rem); }
  .hero-split .hs-title .line-sub { font-size: clamp(2.2rem, 8.5vw, 3.4rem); }
  .hero-split .hs-desc { margin-left: auto; margin-right: auto; }
  .hero-split .hs-actions { justify-content: center; }
  .hero-split .hs-stats { justify-content: center; }
  .hero-split .hs-scrap-2 { display: none; }
  .hero-split .hs-scrap-1 { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-2deg); width: min(268px, 78%); height: 300px; }
}
/* ===== TABLETTE (721–980px) : partie blanche (contenu) EN HAUT + carte interactive EN BAS ===== */
@media (min-width: 721px) and (max-width: 980px) {
  /* Le hero suit désormais la forme mobile : ni colonne étirée, ni carte en bas. On garde
     seulement le dégagement du header fixe, indispensable à cette largeur. */
  .hero-split {
    padding-top: clamp(100px, 12vh, 116px);              /* dégage le header FIXE (~92px) */
    padding-bottom: clamp(10px, 2vw, 16px);
  }
  .hero-split .hs-frame { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  /* Contenu (partie BLANCHE) en haut, hauteur naturelle */
  .hero-split .hs-inner { order: 0; flex: 0 0 auto; min-height: 0; display: block; }
  .hero-split .hs-content { width: 100%; max-width: 760px; margin: 0 auto; padding: 26px 24px 20px; text-align: center; }
  .hero-split .hs-title { text-align: center; }
  .hero-split .hs-mapbtn { display: none; }
  .hero-split .hs-title .line-top  { font-size: clamp(1.4rem, 3vw, 2rem); }
  .hero-split .hs-title .line-main { font-size: clamp(3.4rem, 9vw, 5.4rem); }
  .hero-split .hs-title .line-sub  { font-size: clamp(2.3rem, 6vw, 3.6rem); }
  .hero-split .hs-desc { margin-left: auto; margin-right: auto; }
  .hero-split .hs-actions { justify-content: center; }
  .hero-split .hs-stats { justify-content: center; }
  /* Carte interactive EN BAS, remplit l'espace restant */
  .hero-split .hs-photo { order: 1; position: relative; width: 100%; flex: 1 1 auto; min-height: 300px; height: auto; }
  .hero-split .hs-heromap { display: block; }
  .hero-split .hs-mapcard:not([hidden]) { display: block; }  /* la fiche popup au clic sur un pin s'affiche aussi en tablette */
}
/* Tablette : même forme qu'en mobile, à l'échelle. Le cadre et le texte respirent,
   la largeur disponible le permet. */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero-split .hs-content { max-width: 720px; padding: 40px 34px 32px !important; }
  .hero-split .hs-title .line-top  { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .hero-split .hs-title .line-main { font-size: clamp(3.8rem, 8vw, 5.4rem); }
  .hero-split .hs-title .line-sub  { font-size: clamp(2.6rem, 5.4vw, 3.6rem); }
  .hero-split .hs-desc { font-size: 1.12rem; max-width: 560px; }
  .hero-split .hs-stats { max-width: 480px; }
}
@media (max-width: 420px) {
  .hero-split .hs-photo { height: 260px; }
  .hero-split .hs-scrap-1 { width: min(256px, 84%); height: 250px; }
  .hero-split .hs-scrap-1 .spot-name { font-size: 1.2rem; }
}


/* ============================================================
   RE-THÈME HOME — BLANC PUR dominant, BLEU NOMADE (#7590B8) secondaire
   Crème -> blanc pur ; orange -> bleu nomade. Texte foncé conservé sur
   blanc (contraste natif). Tout scopé .home. Accent #7590B8, accent
   profond #7590B8, glow bleu rgba(117,144,184,*).
   ============================================================ */
/* DÉPLOYÉ SUR TOUT LE SITE (plus seulement .home) : blanc dominant + bleu nomade */
body {
  --cream: #ffffff;
  --sand-light: #ffffff;
  --white: #ffffff;
  --sunset: #7590B8;
  --sunset-deep: #7590B8;
}
/* Header : surface blanche quand solide (au lieu de l'off-white en dur) */
.site-header { background: rgba(255,255,255,0.94); }
.site-header.scrolled { background: rgba(255,255,255,0.97); }

/* Étoile de note (icône #F4A261 en dur) -> bleu */
.spot-rating .ni { color: #7590B8; }
@media (max-width: 720px) { .spot-rating .ni { color: #7590B8; } }

/* Halos « Partenaire » : ORANGE conservé (seul usage autorisé de l'orange = mise en avant des partenaires).
   Les styles orange de base (en dur) s'appliquent tels quels — aucun override. */

/* Top-bar (fond bleu nomade) : accents pêche #FFD9C2 -> clair */
.top-bar-item strong { color: #EAF2FB; }
.top-wave { color: #EAF2FB; }

/* Bande Instagram : halo orange EN DUR -> bleu clair */
.insta-strip::before { background-image: radial-gradient(circle at 80% 20%, rgba(169,194,226,0.25), transparent 40%); }

/* Correctifs post-contrôle (blanc-dominant) */
.evmag-section::before { background: radial-gradient(circle, rgba(117,144,184,0.12), transparent 70%); }
.insta-strip h2 .highlight { color: #EAF2FB; }
/* Marqueurs partenaires : ORANGE forcé en dur (les variables --sunset* sont bleues maintenant) */
.partner-chip { background: linear-gradient(135deg, #F4A261, #E08A4A); }
.evmag-tile-partner { background: linear-gradient(135deg, #F4A261 0%, #E08A4A 100%); }

/* ===== H2 en BADGE bleu (Poppins majuscule) sur tout le site — uniquement les H2, pas les sous-titres ===== */
.weekend-head h2,
.section-head h2,
.partner-head h2 {
  display: inline-block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.16;
  text-align: center;
  color: #ffffff;
  background: #7590B8;
  border-radius: 16px;
  padding: 11px 26px;
  box-shadow: 0 10px 24px rgba(62,92,118,.24);
}
.weekend-head h2 .scribble-circle { color: inherit; }
.weekend-head h2 .scribble-circle svg { display: none; }

/* Le renvoi permanent vers le programme du week-end, sur l'accueil. Une bande
   sobre : elle doit se voir sans venir concurrencer le bloc des sorties juste
   au-dessus, qui reste l'entrée principale. Ombre neutre, bordure sur les
   quatre côtés. */
/* En bas de page, juste avant le CTA Instagram : il lui faut de l'air au-dessus. */
.wk-guide-section { padding: 20px 0 52px; }
.wk-guide {
    display: flex; align-items: center; gap: 18px;
    padding: 20px 24px; border-radius: 18px;
    background: var(--white); border: 1px solid rgba(31, 36, 46, 0.1);
    box-shadow: 0 2px 10px rgba(31, 36, 46, 0.05);
    text-decoration: none; color: inherit;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.wk-guide:hover { border-color: var(--periwinkle-deep); transform: translateY(-2px); }
.wk-guide-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-guide-k {
    font-family: var(--font-sans); font-size: 12px; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; color: var(--periwinkle-deep);
}
.wk-guide-t { font-family: var(--font-title); font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
.wk-guide-s { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.wk-guide-fl {
    margin-left: auto; flex: none;
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: rgba(117, 144, 184, 0.12);
    color: var(--periwinkle-deep); font-size: 20px;
}
@media (max-width: 560px) {
    .wk-guide { padding: 18px; gap: 12px; }
    .wk-guide-t { font-size: 1.15rem; }
    .wk-guide-fl { width: 40px; height: 40px; }
}





/* ===== TYPO SITE ENTIER : 2 polices only — Poppins (défaut, tout le reste) + One Little Font (titres) ===== */
body {
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-hand: 'Poppins', system-ui, sans-serif;
  --font-title: 'One Little Font', 'Caveat', cursive;
}
/* H1 du hero -> One Little Font (titre entier + mot pinceau) */
.hero-split .hs-title,
.hero-split .hs-title * { font-family: 'One Little Font', 'Caveat', cursive; }
/* Titres de CARTES (spots + events) + gros titres de pages -> One Little Font */
.spot-name,
.weekend-hero h3,
.wm-text h4,
.evmag-hero-body h3,
.evmag-tile h4,
.evmag-tile-body h4,
.partner-body h3,
.ev2-bottom h3 { font-family: 'One Little Font', 'Caveat', cursive; }
/* Les H1 du site restent en Poppins (seul le H1 du hero HP est en One Little Font) */
.page-hero h1, .va-name { font-family: 'Poppins', system-ui, sans-serif !important; font-weight: 700; }


/* ===== Grille de 6 spots partenaires sur la photo du hero (moitié droite) ===== */
/* Petites cartes au FORMAT CARTE de prod (portrait 4/5), centrées sur la photo — disposition
   « collage » : rotations légères + décalages variés pour casser la régularité de la grille */
.hero-split .hs-grid {
  position: absolute; inset: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(3, clamp(132px, 11.6vw, 198px));
  justify-content: center; align-content: center;
  gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(16px, 1.8vw, 28px);
}
.hero-split .hs-grid .spot-card {
  aspect-ratio: 4 / 5; min-height: 0; height: auto; width: 100%; margin: 0; border-radius: 18px;
  transform: rotate(var(--hsr, 0deg)) translate(var(--hsx, 0px), var(--hsy, 0px));
}
.hero-split .hs-grid .spot-card:hover { transform: rotate(var(--hsr, 0deg)) translate(var(--hsx, 0px), calc(var(--hsy, 0px) - 6px)); }
.hero-split .hs-grid .spot-card:nth-child(1) { --hsr: -2.5deg; --hsy: -26px; --hsx: -6px; }
.hero-split .hs-grid .spot-card:nth-child(2) { --hsr: 1.8deg; --hsy: 34px; --hsx: 8px; }
.hero-split .hs-grid .spot-card:nth-child(3) { --hsr: 3deg; --hsy: -14px; --hsx: 12px; }
.hero-split .hs-grid .spot-card:nth-child(4) { --hsr: 2deg; --hsy: 10px; --hsx: -12px; }
.hero-split .hs-grid .spot-card:nth-child(5) { --hsr: -1.6deg; --hsy: 52px; --hsx: 4px; }
.hero-split .hs-grid .spot-card:nth-child(6) { --hsr: -3deg; --hsy: -8px; --hsx: 10px; }
.hero-split .hs-grid .spot-top { top: 10px; left: 10px; right: 10px; }
.hero-split .hs-grid .spot-chip { font-size: .6rem; padding: 4px 9px; }
.hero-split .hs-grid .spot-bottom { left: 12px; right: 12px; bottom: 12px; gap: 3px; }
.hero-split .hs-grid .spot-location { font-size: .58rem; letter-spacing: .08em; }
.hero-split .hs-grid .spot-rating { font-size: .68rem; }
.hero-split .hs-grid .spot-name { font-size: clamp(.92rem, 1vw, 1.1rem); line-height: 1.12; }
.hero-split .hs-grid .spot-tags-row { gap: 5px; margin-bottom: 0; }
.hero-split .hs-grid .spot-tags-row .partner-chip { font-size: .5rem; padding: 3px 7px; }
@media (max-width: 980px) {
  /* mobile : la photo du hero reste simple, la grille vit ailleurs (page spots) */
  .hero-split .hs-grid { display: none; }
}

/* ===== ESSAI : la CARTE du Bassin en direct dans la moitié droite du hero (desktop) ===== */
.hero-split .hs-heromap { position: absolute; inset: 0; z-index: 2; }
.hero-split .hs-heromap.leaflet-container { background: #EAF0F4; font-family: var(--font-sans); }
.hero-split .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 14px 34px rgba(31,41,55,.22); }
.hero-split .leaflet-popup-content { margin: 12px 14px; }
.hsmap-pop { display: flex; flex-direction: column; gap: 2px; text-decoration: none; font-family: var(--font-sans); min-width: 170px; }
.hsmap-pop strong { font-size: .95rem; color: var(--ink); line-height: 1.2; }
.hsmap-pop span { font-size: .74rem; color: var(--ink-soft); }
.hsmap-pop em { font-style: normal; font-size: .78rem; font-weight: 700; color: #7590B8; margin-top: 4px; }
@media (max-width: 720px) {
  /* mobile UNIQUEMENT : pas de carte dans le hero (bloc blanc sur photo) ; la carte vit sur /carte/.
     En tablette (721–980) la carte interactive s'affiche EN BAS du hero. */
  .hero-split .hs-heromap { display: none; }
}

/* Bouton « Voir la carte entière » posé en bas de la carte du hero (desktop) */
.hero-split .hs-mapfull {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 1100; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  padding: 14px 28px; border-radius: 16px;
  background: #7590B8; color: #fff; text-decoration: none;
  box-shadow: 0 14px 34px rgba(31,41,55,.32);
  transition: transform .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-split .hs-mapfull svg { width: 19px; height: 19px; }
.hero-split .hs-mapfull:hover { transform: translateX(-50%) translateY(-2px); background: #7590B8; color: #fff; box-shadow: 0 18px 40px rgba(31,41,55,.38); }
/* Le bandeau carte de la colonne gauche ne sert plus qu'au mobile */
@media (min-width: 981px) { .hero-split .hs-actions { display: none; } }
@media (max-width: 980px) { .hero-split .hs-mapfull { display: none; } }

/* Pins PARTENAIRES du hero : disque orange plein, bord blanc — ils ressortent FORT */
.hs-heromap .pin-xl .pin-disc {
  background: linear-gradient(135deg, #F4A261 0%, #E08A4A 100%);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(31, 41, 55,.35), 0 12px 26px rgba(31, 41, 55,.5), 0 3px 8px rgba(31,41,55,.2);
}
.hs-heromap .pin-xl .pin-emoji { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.hs-heromap .pin-xl .pin-tail { background: #E08A4A; border-right-color: #fff; border-bottom-color: #fff; }
.hs-heromap .pin-xl .pin-star { background: #fff; color: #E08A4A; }
/* Non-partenaires : en retrait */
.hs-heromap .pin:not(.pin-xl) { opacity: .82; }


/* Popup : largeur stabilisée (la police à chargement différé faussait la mesure de Leaflet) */
.hero-split .leaflet-popup-content { width: auto !important; min-width: 200px; }
.hero-split .hsmap-pop strong { font-size: .92rem; }

/* Aperçu au clic sur un pin = COPIE de la fiche de la page /carte/ (classes cd-*), posée sur la carte du hero */
.hero-split .hs-mapcard { position: absolute; left: 18px; bottom: 18px; width: 302px; z-index: 1200; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 54px rgba(31,41,55,.35); }
.hero-split .hs-mapcard .cd-hero { height: 130px; }
.hero-split .hs-mapcard .cd-body { padding: 14px 18px 16px; }
.hero-split .hs-mapcard .cd-title { font-family: 'One Little Font', 'Caveat', cursive; font-size: 1.65rem; margin-bottom: 6px; }
.hero-split .hs-mapcard .cd-partner .ni, .hero-split .hs-mapcard .cd-rating .ni { color: #F4A261; }
.hero-split .hs-mapcard-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(31,41,55,.25); }
.hero-split .hs-mapcard-close:hover { background: #fff; }
@media (max-width: 980px) { .hero-split .hs-mapcard { display: none; } }

/* Bouton carte : BLEU NOMADE */
.hero-split .hs-mapfull { background: #7590B8; }
.hero-split .hs-mapfull:hover { background: #7590B8; }

/* Bouton Instagram à l'ancien emplacement du bouton carte (colonne gauche) */
.hero-split .hs-insta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  padding: 15px 28px; border-radius: 16px;
  background: linear-gradient(135deg, #F4A261 0%, #C13584 60%, #833AB4 100%);
  color: #fff; text-decoration: none;
  box-shadow: 0 12px 28px rgba(31,41,55,.14);
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.hero-split .hs-insta svg { width: 19px; height: 19px; flex: 0 0 auto; }
.hero-split .hs-insta:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; box-shadow: 0 16px 34px rgba(31,41,55,.18); }
/* hs-actions revit en desktop (pour Instagram) ; seul le bandeau carte reste réservé au mobile */
@media (min-width: 981px) {
  .hero-split .hs-actions { display: flex; }
  .hero-split .hs-mapbtn { display: none; }
}

/* Fiche carte : ancrée AU-DESSUS du pin cliqué + animation d'ouverture */
@keyframes hsCardIn { from { opacity: 0; } to { opacity: 1; } }
.hero-split .hs-mapcard {
  left: auto; bottom: auto;
  transform: translateX(-50%);                 /* ancrage horizontal seul ; le top est calculé + borné en JS */
  animation: hsCardIn .26s var(--ease);
  max-height: calc(100% - 24px);               /* garde-fou : jamais plus haute que la carte */
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.hero-split .hs-mapcard.hs-mapcard-below { transform: translateX(-50%); }

/* Étiquette « Partenaire » permanente sous les gros pins : impossible à rater */
.hs-heromap .pin-plabel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 4px;
  background: linear-gradient(135deg, #F4A261, #E08A4A);
  color: #fff; font-family: var(--font-sans);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 8px; white-space: nowrap;
  border: 1.5px solid #fff;
  box-shadow: 0 4px 10px rgba(31, 41, 55,.45);
}

/* Bouton Instagram du hero : sans halo de lumière */
.hero-split .hs-insta { box-shadow: none; }
.hero-split .hs-insta:hover { box-shadow: none; }

/* Header home : logo plus gros + TOUT regroupé dans le bloc de gauche + insta icône seule */
@media (min-width: 981px) {
  .home .logo-img { flex: 0 0 auto; height: 64px; width: clamp(200px, 15vw, 270px); }
  .home .logo-img img { height: clamp(175px, 12.5vw, 210px); }
  .home .nav-wrap { justify-content: flex-start; gap: 16px; }
  .home .nav-right { display: flex; flex: 0 1 auto; justify-content: flex-start; align-items: center; gap: 12px; margin-left: 0; }
  .home .main-nav { gap: 18px; }
  .home .main-nav a { font-size: .9rem; }
  .home .site-header:not(.scrolled) .main-nav { padding: 9px 16px; }
  .home .nav-cta-insta { font-size: 0; gap: 0; width: 42px; height: 42px; padding: 0; justify-content: center; align-items: center; border-radius: 50%; }
  .home .nav-cta-insta svg { width: 19px; height: 19px; }
}

/* Aperçu (fiche) PLUS ÉVIDENT : plus grand, ombre plus marquée, titre plus gros */
.hero-split .hs-mapcard { width: 336px; box-shadow: 0 8px 22px rgba(31,41,55,.22), 0 30px 70px rgba(31,41,55,.42); }
.hero-split .hs-mapcard .cd-hero { height: 154px; }
.hero-split .hs-mapcard .cd-title { font-size: 1.9rem; }
.hero-split .hs-mapcard .cd-body { padding: 15px 20px 18px; }
/* L'étiquette sous les pins est retirée (markup) — pins comme avant */

/* Header home harmonisé : hauteurs alignées, espacements réguliers (toujours tout à gauche) */
@media (min-width: 981px) {
  .home .nav-wrap { gap: 24px; }
  .home .logo-img { height: 60px; width: clamp(190px, 14vw, 250px); }
  .home .logo-img img { height: clamp(168px, 11.5vw, 196px); }
  .home .nav-right { gap: 10px; }
  .home .site-header:not(.scrolled) .main-nav { padding: 0 20px; height: 44px; display: flex; align-items: center; }
  .home .main-nav { gap: 20px; }
  .home .main-nav a { font-size: .92rem; }
  .home .nav-cta-insta { width: 44px; height: 44px; }
}

/* Infos du jour intégrées au hero (ex barre bleue) : rangée discrète sous les stats */
.hero-split .hs-infos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 18px; margin: 26px auto 0; padding-top: 18px;
  max-width: 480px; border-top: 1px solid rgba(62,78,110,.14);
  font-family: var(--font-sans); font-size: .8rem; color: var(--ink-soft);
}
.hero-split .hs-info { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-split .hs-info strong { color: #7590B8; font-weight: 700; }
.hero-split .hs-info .ni, .hero-split .hs-info .hs-wave { width: 15px; height: 15px; color: #7590B8; flex: 0 0 auto; }
.hero-split .hs-info .hs-wave { width: 24px; height: 9px; }
.hero-split .hs-info-date { text-transform: capitalize; font-family: var(--font-hand); font-size: .95rem; }

/* HEADER NORMAL : barre blanche pleine largeur (comme en prod), avec nos éléments actuels */
@media (min-width: 981px) {
  .home .site-header:not(.scrolled) {
    background: rgba(255,255,255,0.96);
    padding-top: 18px;
    box-shadow: 0 1px 0 rgba(31,36,46,0.05);
  }
  .home .site-header .container { max-width: var(--container); padding-left: 24px; padding-right: 24px; }
  .home .nav-wrap { justify-content: space-between; gap: 24px; }
  .home .nav-right { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; gap: 14px; }
  .home .site-header:not(.scrolled) .main-nav {
    background: none; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0; height: auto; border-radius: 0;
  }
  .home .main-nav { gap: 26px; }
  .home .main-nav a { font-size: .93rem; }
  .home .site-header:not(.scrolled) .main-nav a { color: var(--ink-soft); }
  .home .site-header:not(.scrolled) .main-nav a.active { color: #2E5E8F; }
  /* Le hero plein écran démarre SOUS la barre blanche (header ~94px) */
  .hero-split { padding-top: calc(94px + var(--hfy)); }
  .hero-split .hs-frame { min-height: calc(100vh - 94px - 2 * var(--hfy)); }
}

/* Soleil (lever → coucher) : seul survivant des infos, en haut à gauche du cadre */
.hero-split .hs-sun {
  position: absolute; top: 20px; left: 26px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: .82rem; color: var(--ink-soft);
}
.hero-split .hs-sun strong { color: #7590B8; font-weight: 700; }
.hero-split .hs-sun .ni { width: 16px; height: 16px; color: #7590B8; }
@media (max-width: 980px) { .hero-split .hs-sun { top: 12px; left: 50%; transform: translateX(-50%); font-size: .8rem; } }

/* Pins PARTENAIRES au-dessus des autres : la base fige .pin-icon-xl à z-index 500 (!important),
   sous les pins Leaflet du bas de carte (~800). On force très haut, l'offset JS complète. */
/* (contournement local retire : la regle de base suffit desormais) */

/* Boutons GPS dans la fiche du hero : fond légèrement bleuté pour se détacher du blanc */
.hero-split .hs-mapcard .cd-nav { margin: 2px 0 12px; }
.hero-split .hs-mapcard .cd-nav-btn { background: #F1F5FA; }

/* HEADER = celui de PROD (structure/tailles/bouton insta), nouvelles polices via variables */
@media (min-width: 981px) {
  .home .nav-right { display: contents; }
  .home .logo-img { flex: initial; height: 56px; width: 220px; }
  .home .logo-img img { height: 168px; }
  .home .main-nav { gap: 28px; }
  .home .main-nav a { font-size: 0.93rem; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .home .nav-cta-insta { font-size: 0; gap: 0; padding: 8px 12px; width: auto; height: auto; border-radius: 999px; justify-content: center; }
}
@media (min-width: 1101px) {
  .home .nav-cta-insta { font-size: .9rem; gap: 9px; padding: 13px 26px; width: auto; height: auto; border-radius: 999px; justify-content: flex-start; }
  .home .nav-cta-insta svg { width: 22px; height: 22px; }
}

/* Soleil / lune : plus gros et plus évident — pastille blanche en haut à gauche */
.hero-split .hs-sun {
  top: 18px; left: 20px;
  gap: 8px;
  font-size: .98rem;
  background: #fff;
  border: 1px solid rgba(62,78,110,.16);
  border-radius: 13px;
  padding: 10px 16px;
  box-shadow: 0 6px 18px rgba(31,41,55,.1);
  color: var(--ink-soft);
}
.hero-split .hs-sun .ni { width: 19px; height: 19px; }
.hero-split .hs-sun strong { font-size: 1.02rem; }
.hero-split .hs-sun .hs-sun-sep { color: #7590B8; font-weight: 700; margin: 0 1px; }

/* Bouton contact « Ajouter / modifier un spot ou un événement » (style outline bleu) */
.hero-split .hs-contact {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 700;
  padding: 14px 24px; border-radius: 16px;
  background: #fff; color: #7590B8;
  border: 1.5px solid #7590B8;
  text-decoration: none;
  transition: transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.hero-split .hs-contact .ni { width: 17px; height: 17px; color: #7590B8; flex: 0 0 auto; }
.hero-split .hs-contact:hover { transform: translateY(-2px); background: #7590B8; color: #fff; }
.hero-split .hs-contact:hover .ni { color: #fff; }

/* Carte du hero : aucune barre d'attribution (la page /carte/ complète la conserve) */
.hs-heromap .leaflet-control-attribution { display: none !important; }

/* ===== HERO = EXACTEMENT tout l'écran, quelle que soit la taille du desktop =====
   height stricte (plus de min-height qui laisse déborder) + paliers de compactage
   sur les écrans peu hauts pour que le contenu tienne toujours. Mobile inchangé. */
@media (min-width: 981px) {
  .hero-split { height: 100vh; min-height: 0; }
  .hero-split .hs-frame { height: calc(100vh - 94px - 2 * var(--hfy)); min-height: 0; }
  .hero-split .hs-inner { min-height: 0; height: 100%; }
}
/* Desktop peu haut (laptops ~768-820px) : contenu compacté */
@media (min-width: 981px) and (max-height: 820px) {
  .home { --hfy: clamp(14px, 2vh, 26px); }
  .hero-split .hs-title { margin-bottom: 14px; }
  .hero-split .hs-title .line-top { font-size: clamp(1.3rem, 1.6vw, 1.8rem); }
  .hero-split .hs-title .line-main { font-size: clamp(3.6rem, 5vw, 5.2rem); }
  .hero-split .hs-title .line-sub { font-size: clamp(2.2rem, 3vw, 3rem); }
  .hero-split .hs-desc { font-size: 1.05rem; margin-bottom: 20px; }
  .hero-split .hs-actions { margin-bottom: 20px; }
  .hero-split .hs-insta { padding: 12px 22px; font-size: .92rem; }
  .hero-split .hs-mascot { height: clamp(140px, 24vh, 230px); }
}
/* Desktop très court (<700px) : palier supplémentaire */
@media (min-width: 981px) and (max-height: 700px) {
  .hero-split .hs-title .line-top { font-size: 1.2rem; }
  .hero-split .hs-title .line-main { font-size: 3.2rem; }
  .hero-split .hs-title .line-sub { font-size: 2rem; }
  .hero-split .hs-desc { font-size: .95rem; max-width: 38ch; margin-bottom: 14px; }
  .hero-split .hs-actions { margin-bottom: 14px; }
  .hero-split .hs-stat { padding: 9px 14px; font-size: .9rem; }
  .hero-split .hs-stat strong { font-size: 1.1rem; }
  .hero-split .hs-sun { padding: 7px 12px; font-size: .85rem; }
  .hero-split .hs-mascot { height: clamp(110px, 18vh, 160px); }
  .hero-split .hs-mapfull { padding: 11px 22px; font-size: .92rem; bottom: 14px; }
}

/* Fix Mac/Safari : plus de calc() pour la hauteur du cadre — layout FLEX garanti.
   Le hero fait 100vh, le cadre remplit d'office tout l'espace restant. */
@media (min-width: 981px) {
  .hero-split { height: 100vh; min-height: 100vh; display: flex; flex-direction: column; }
  .hero-split .hs-frame { flex: 1 1 auto; height: auto; min-height: 0; width: 100%; }
  /* La mascotte passe DERRIÈRE le contenu (plus de chevauchement sur les compteurs) */
  .hero-split .hs-mascot { z-index: 0; height: clamp(150px, 22vh, 280px); }
}

/* Flèche du bloc soleil/lune : SVG centré (le caractère → s'alignait mal) */
.hero-split .hs-sun .hs-sun-sep { display: inline-flex; align-items: center; }

/* Labels (fil d'ariane) des blocs, tout le site : au-dessus du badge H2 + police One Little Font */
.weekend-head .label,
.section-head .label,
.playlist-head .label,
.page-hero .label,
.partner-head .label,
.partner-label {
  display: block; width: fit-content;
  margin: 0 auto 14px;
  font-family: 'One Little Font', 'Caveat', cursive;
  font-size: 1.45rem; line-height: 1;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: #7590B8;
  transform: rotate(-2deg);
}

/* ===== Mise en avant des événements du WEEK-END sur les cartes (hero + page carte) ===== */
/* Bulle « c'est ce week-end ! » qui part du pin (One Little Font) */
.pin-bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 10px; z-index: 6; white-space: nowrap;
  background: #7590B8; color: #fff;
  font-family: 'One Little Font', 'Caveat', cursive; font-weight: 400;
  font-size: 15px; line-height: 1;
  padding: 6px 12px 7px; border-radius: 13px;
  border: 1.5px solid #fff;
  box-shadow: 0 7px 18px rgba(31,41,55,.34);
  pointer-events: none;
}
.pin-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  margin-top: -2px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #7590B8;
}
/* Combo partenaire + week-end : bulle orange (le nec plus ultra) */
.pin-combo .pin-bubble { background: #7590B8; }
.pin-combo .pin-bubble::after { border-top-color: #7590B8; }
/* Bulles au-dessus des pins voisins */
.hs-heromap .leaflet-marker-icon:hover, .leaflet-marker-icon:hover { z-index: 100001 !important; }
/* Événement du week-end : bord du disque renforcé */
.pin-weekend .pin-disc { border-width: 3px; }
/* COMBO partenaire + week-end : le pin le plus visible de la carte (double halo orange/bleu) */
.pin-combo .pin-disc {
  box-shadow: 0 0 0 4px rgba(31, 41, 55,.38), 0 0 0 8px rgba(62,92,118,.2), 0 12px 26px rgba(31, 41, 55,.5);
}
/* Bandeaux de mise en valeur dans les fiches (aperçu hero + fiche de la page carte) */
.cd-we-banner {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 700;
  color: #fff; background: #7590B8;
  border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}
.cd-we-banner .ni { width: 15px; height: 15px; flex: 0 0 auto; }
.cd-combo-banner { background: #7590B8; }

/* Repère « c'est ce week-end » sur les cartes de la page Événements : bannière pleine largeur
   dans la rangée de tags (One Little Font) — toujours visible, jamais en collision avec la date */
.event-card-v2 .ev2-tags-row { flex-wrap: wrap; row-gap: 7px; }
.ev2-weekend {
  flex: 0 0 100%; justify-content: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'One Little Font', 'Caveat', cursive; font-weight: 400; font-size: 1.2rem; line-height: 1;
  color: #fff; background: #7590B8;
  padding: 7px 13px; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(31,41,55,.32);
}
.ev2-weekend .ni { width: 16px; height: 16px; flex: 0 0 auto; }
/* Combo partenaire + week-end : bannière orange (le nec plus ultra) */
.ev2-weekend.is-combo { background: #7590B8; }

/* Repère « c'est ce week-end » dans le bloc « prochains événements » de la HP (mobile + desktop) */
.evmag-tile .evmag-tile-tags { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.evmag-card-bottom .evmag-weekend { flex: 0 0 auto; width: fit-content; align-self: flex-start; margin-bottom: 9px; }

/* ===== Boutons zoom des cartes : forme carrée arrondie séparée, plus gros et bien visibles ===== */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
  display: flex; flex-direction: column; gap: 9px;
  margin: 14px !important;
}
.leaflet-control-zoom a {
  width: 46px !important; height: 46px !important;
  line-height: 44px !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #7590B8 !important;
  font-size: 27px !important; font-weight: 700 !important;
  border: 1.5px solid rgba(62,92,118,.16) !important;
  box-shadow: 0 7px 18px rgba(31,41,55,.24) !important;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
/* TAILLE RÉELLE des boutons de zoom, sur portable comme sur grand écran.
   Le thème réduit tout le desktop par html{zoom} : à 1280px le facteur est 0,70,
   et un bouton déclaré à 32px n'en mesurait plus que 23 à l'écran. Sur un pavé
   tactile, viser 23px est pénible, et c'est justement là qu'on a le plus besoin
   du bouton puisque le zoom au pavé n'est pas naturel. On divise par le facteur
   pour retomber sur 44px physiques quelle que soit la largeur. Sans zoom du
   thème (mobile, tablette), var() retombe sur 1 et la valeur reste 44px. */
.leaflet-control-zoom a {
    width: calc(44px / var(--nmz, 1)) !important;
    height: calc(44px / var(--nmz, 1)) !important;
    line-height: calc(42px / var(--nmz, 1)) !important;
    font-size: calc(24px / var(--nmz, 1)) !important;
}
.carte-app .leaflet-control-zoom a {
    width: calc(44px / var(--nmz, 1)) !important;
    height: calc(44px / var(--nmz, 1)) !important;
    line-height: calc(42px / var(--nmz, 1)) !important;
    font-size: calc(22px / var(--nmz, 1)) !important;
}
.leaflet-control-zoom a:first-child { margin-bottom: 0; }
.leaflet-control-zoom a:hover {
  background: #7590B8 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 11px 26px rgba(31,41,55,.32) !important;
}
.leaflet-control-zoom a.leaflet-disabled {
  opacity: 1 !important;
  background: #eef1f5 !important;
  color: #aeb9c5 !important;
  border-color: rgba(62,92,118,.08) !important;
  box-shadow: 0 3px 10px rgba(31,41,55,.12) !important;
  cursor: default;
}
.leaflet-control-zoom a.leaflet-disabled:hover { transform: none; }

/* Repères sur les cartes mobiles (nm-row) : Partenaire (orange) + « c'est ce week-end » (One Little Font) */
.nm-row-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 4px; }
.nm-row-weekend, .nm-row-partner {
  display: inline-flex; align-items: center; gap: 5px;
  line-height: 1; color: #fff; border-radius: 8px; padding: 4px 9px;
}
.nm-row-weekend { font-family: 'One Little Font', 'Caveat', cursive; font-weight: 400; font-size: .98rem; background: #7590B8; }
.nm-row-weekend.is-combo { background: #7590B8; }
.nm-row-partner { font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; background: linear-gradient(135deg, #F4A261, #E08A4A); }
.nm-row-weekend .ni, .nm-row-partner .ni { width: 13px; height: 13px; flex: 0 0 auto; }

/* --- Correctifs mobile (source order final, gagne sur les règles précédentes) --- */
@media (max-width: 980px) {
  /* Soleil/lune centré en haut du hero (le left:20px de la pastille l'emportait) */
  .home .hero-split .hs-sun { left: 50%; right: auto; transform: translateX(-50%); }
}
@media (max-width: 768px) {
  /* Logo footer centré : flex PLEINE LARGEUR + justify-content center (width:100% évite le collapse à 0) */
  .site-footer .footer-brand { text-align: center; }
  .site-footer .footer-brand .logo-img { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 !important; }
  .site-footer .footer-brand .logo-img img { position: static !important; height: 72px !important; width: auto !important; }
}

/* Icônes des pastilles calées sur le CENTRE D'ENCRE du texte (l'encre monte plus haut que
   le centre de la boîte de ligne -> remonter l'icône de ~0.16em, proportionnel à la taille) */
.nm-row-weekend, .ev2-weekend, .cd-we-banner, .pin-bubble { line-height: 1; }
.nm-row-weekend .ni, .ev2-weekend .ni, .cd-we-banner .ni,
.nm-row-partner .ni, .partner-chip .ni, .evmag-tile-partner .ni, .cd-partner .ni,
.weekend-hero-flag svg, .weekend-hero-cat .ni, .wm-cat .ni {
  position: relative; top: -0.16em;
}

/* === AUCUN JEU DE LUMIÈRE : suppression des halos/ombres colorés sur badges, labels et pastilles === */
.weekend-head h2, .section-head h2, .partner-head h2 { box-shadow: none !important; }
.ev2-weekend, .nm-row-weekend, .nm-row-partner, .cd-we-banner, .pin-bubble,
.partner-chip, .evmag-tile-partner, .cd-partner { box-shadow: none !important; }
/* Labels (fil d'ariane) : JAMAIS encadrés — texte seul, pas de pilule/dégradé/ombre */
.partner-label {
  background: none !important; background-image: none !important;
  box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; color: #7590B8;
}

/* Hero mobile : texte un peu plus large (padding intérieur réduit) */
@media (max-width: 560px) {
  .hero-split .hs-content { padding-left: 12px; padding-right: 12px; }
}

/* Cartes partenaires : marquage orange NET (bordure pleine + puce), aucun halo/glow */
.event-card-v2.is-partner, .spot-card.is-partner, .weekend-hero.is-partner,
.weekend-mini.is-partner, .evmag-tile.is-partner, .evmag-card.is-partner {
  outline: 2px solid #F4A261 !important; outline-offset: -2px;
  box-shadow: 0 10px 30px rgba(31,41,55,.08) !important;
}
.event-card-v2.is-partner:hover, .spot-card.is-partner:hover, .weekend-hero.is-partner:hover,
.weekend-mini.is-partner:hover, .evmag-tile.is-partner:hover, .evmag-card.is-partner:hover {
  box-shadow: 0 16px 40px rgba(31,41,55,.14) !important;
}

/* === Alignement icône/texte cohérent PARTOUT (méta, catégories, chips en flex) ===
   .ni a vertical-align (OK en inline) mais ignoré en flex -> on resserre la ligne + on remonte l'icône */
.nm-row-chip, .ev2-meta > span, .ev2-cat, .evmag-card-meta > span, .evmag-tile-meta,
.evmag-cat, .va-meta > span, .cd-meta > span, .cd-rating, .cd-addr,
.spot-location, .spot-chip, .spot-rating, .wm-meta, .wm-cat, .wm-city, .wm-time,
.weekend-hero-meta > span, .weekend-hero-cat, .weekend-hero-city,
.partner-chip, .top-bar-item, .hs-stat, .hs-info, .nm-row-sub, .agenda-row-meta > span {
  line-height: 1;
}

/* ===== Cartes « Nos partenaires du moment » : badge + contour ORANGE (l'exception à la règle) ===== */
.partner-card { border-color: #F4A261; }
.partner-ribbon { background: linear-gradient(135deg, #F4A261, #E08A4A); color: #fff; }
.partner-ribbon .ni { color: #fff; }

/* Grille partenaires : 3 PAR RANGÉE en desktop ; carte solitaire centrée (page événements) */
@media (min-width: 981px) {
  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; max-width: 1080px; margin-inline: auto; }
  .partner-grid > .partner-card { max-width: none; width: auto; }
  .partner-grid:has(> .partner-card:only-child) { grid-template-columns: minmax(0, 360px); justify-content: center; }
}

/* ===== BLEU NOMADE (#7590B8, celui du footer) en accent, à la place du bleu foncé #7590B8 ===== */
.ev2-weekend, .nm-row-weekend, .cd-we-banner, .pin-bubble,
.ev2-weekend.is-combo, .nm-row-weekend.is-combo, .cd-combo-banner,
.pin-combo .pin-bubble { background: #7590B8; }
.pin-bubble::after, .pin-combo .pin-bubble::after { border-top-color: #7590B8; }

/* ===== BLOG : titres + sous-titres d'articles en One Little Font ===== */
.article-title, .article-subtitle,
.article-content h2, .article-content h3 { font-family: 'One Little Font', 'Caveat', cursive; }
.article-title { font-weight: 400; }
.article-content h2, .article-content h3 { font-weight: 400; }

/* ===== CONTACT : la case « Devenir partenaire » + son sous-bloc = ORANGE (exception partenaire, sans halo) ===== */
.contact-reason-card-sponsor { background: linear-gradient(135deg, rgba(244,162,97,.12), rgba(244,162,97,.03)); border-color: rgba(224,138,74,.5); }
.contact-reason-card-sponsor .contact-reason-emoji { color: #E08A4A; }
.contact-reason input:checked + .contact-reason-card-sponsor { background: linear-gradient(135deg, rgba(244,162,97,.20), rgba(244,162,97,.06)); border-color: #E08A4A; box-shadow: none; }
.contact-partner-sub { background: linear-gradient(135deg, rgba(244,162,97,.10), rgba(244,162,97,.02)); border-color: rgba(224,138,74,.5); }
.contact-partner-sub-label { color: #C56A2A; }
.contact-partner-opt-card:hover { border-color: #E08A4A; }
.contact-partner-opt input:checked + .contact-partner-opt-card { border-color: #E08A4A; box-shadow: none; }
.contact-partner-opt input:checked + .contact-partner-opt-card .contact-partner-opt-check { background: #E08A4A; border-color: #E08A4A; }

/* ===== Blog listing : titres des aperçus (à la une + cartes) en One Little Font ===== */
.blog-hero-title, .blog-card-title { font-family: 'One Little Font', 'Caveat', cursive; font-weight: 400; }

/* ===== Cartes partenaires : image AGRANDIE (même gabarit que les cartes spots) + contour orange ACCENTUÉ ===== */
@media (min-width: 981px) { .partner-media { height: 208px; } }
.partner-card { border-width: 3px; }
.event-card-v2.is-partner, .spot-card.is-partner, .weekend-hero.is-partner,
.weekend-mini.is-partner, .evmag-tile.is-partner, .evmag-card.is-partner { outline-width: 3px !important; }

/* ===== Bandeau « Voir sur la carte » : plus visible (bordure bleue nette + label renforcé, sans halo) ===== */
.nm-mapbanner { min-height: 98px; border: 2px solid #7590B8; border-radius: 18px; }
.nm-mapbanner-label { font-size: 1.15rem; font-weight: 800; }

/* ===== Carte : replier / déplier le menu (desktop uniquement) ===== */
.carte-panel-toggle { display: none; }
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape){
  /* Gros bouton « panneau » façon Arc/Notion, au coin haut-droit du panneau (top/left posés en JS). */
  .carte-panel-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 16px; left: 303px; z-index: 1150;
    width: 46px; height: 46px; padding: 0;
    background: #fff; color: #7590B8;
    border: 1px solid rgba(31,41,55,.12);
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(31,41,55,.20);
    cursor: pointer;
    transition: color .16s, background .16s, transform .16s, box-shadow .16s;
  }
  .carte-panel-toggle:hover { color: #3E5C76; background: #f4f8fc; transform: translateY(-1px); box-shadow: 0 9px 24px rgba(31,41,55,.26); }
  .carte-panel-toggle:active { transform: translateY(0); }
}

/* ===== Cartes partenaires = MÊME GABARIT que les cartes spots/events (aspect 4/5, même largeur) ===== */
@media (min-width: 981px) {
  .partner-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; max-width: none; margin-inline: 0; }
  .partner-grid:has(> .partner-card:only-child) { grid-template-columns: minmax(0, 300px); justify-content: center; }
  .partner-grid > .partner-card {
    width: auto; max-width: none; margin-inline: 0;
    display: flex; flex-direction: column; overflow: hidden;
    aspect-ratio: 4 / 5; min-height: 0;
  }
  .partner-media { height: auto !important; flex: 1 1 auto; min-height: 0; }
  .partner-body { flex: 0 0 auto; padding: 14px 18px 16px; }
  .partner-body p { -webkit-line-clamp: 2; }
}

/* Desktop : en vue fiche, le panneau se RÉDUIT à la hauteur de la fiche (au lieu de toute la colonne) */
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape){
  .carte-panel[data-view="detail"] { bottom: auto; height: auto; max-height: calc(100vh / var(--nmz, 1) - 152px); }
  .carte-panel[data-view="detail"] .carte-detail { flex: 0 1 auto; }
}

/* ===== MOBILE : le premier bloc (hero) tient TOUJOURS entièrement dans l'écran ===== */
@media (max-width: 720px) {
  .hero-split { min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh; padding: clamp(8px, 2vw, 12px); display: flex; flex-direction: column; }
  .hero-split .hs-frame { flex: 1 1 auto; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .hero-split .hs-photo { flex: 0 0 auto; height: clamp(120px, 22vh, 220px); }
  .hero-split .hs-inner { flex: 1 1 auto; min-height: 0; display: flex; }
  .hero-split .hs-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 14px 20px; }
  .hero-split .hs-title { margin: 0 0 10px; }
  .hero-split .hs-desc { font-size: 0.95rem; line-height: 1.4; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-split .hs-actions { margin-bottom: 12px; gap: 10px; }
  .hero-split .hs-insta { padding: 12px 20px; }
  .hero-split .hs-mapbtn { min-height: 64px; }
  .hero-split .hs-mapbtn .nm-mapbanner-label { font-size: 1.02rem; }
}
/* Écrans peu hauts : on compacte davantage pour garantir que tout rentre */
@media (max-width: 720px) and (max-height: 700px) {
  .hero-split .hs-photo { height: clamp(90px, 15vh, 150px); }
  .hero-split .hs-title .line-main { font-size: clamp(2.7rem, 11vw, 4rem); }
  .hero-split .hs-title .line-sub { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .hero-split .hs-desc { -webkit-line-clamp: 2; font-size: 0.88rem; margin-bottom: 10px; }
  .hero-split .hs-actions { margin-bottom: 10px; }
  .hero-split .hs-mapbtn { min-height: 54px; }
  .hero-split .hs-sun { top: 8px; }
}

/* ===== MOBILE ET TABLETTE : bloc BLANC court et centré, sur la photo NETTE =====
   Étendu de 720 à 1024px le 7 août 2026, à la demande de Théo. En tablette le hero se
   dépliait en colonne avec la carte interactive en bas : mesuré à 744px de large, le
   cadre faisait 1002px de haut, soit presque un écran et demi. La forme mobile, elle,
   tient dans l'écran. Au-delà de 1024px, le hero deux colonnes reprend la main. */
@media (max-width: 1024px) {
  /* Photo de fond nette (on retire le flou et le zoom) */
  .hero-split::before { filter: none; transform: none; }
  /* Plus d'image séparée en haut : la photo nette EST le fond du hero */
  .hero-split .hs-photo { display: none !important; }
  /* On centre le bloc blanc verticalement ; la photo nette remplit le fond au-dessus et en dessous */
  .hero-split { justify-content: center; }
  /* Cadre = bloc blanc semi-opaque à HAUTEUR DE CONTENU (plus court, ne remplit plus tout l'écran) */
  .hero-split .hs-frame {
    flex: 0 0 auto !important;
    background: rgba(255,255,255,0.72) !important;
    box-shadow: 0 18px 38px rgba(31,36,46,.16) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 22px !important;
  }
  /* Le contenu reprend une hauteur naturelle (fini le flex:1 qui étirait le cadre sur tout l'écran) */
  .hero-split .hs-inner { flex: 0 0 auto !important; display: block !important; }
  .hero-split .hs-content { flex: 0 0 auto !important; display: block !important; padding: 26px 22px 22px !important; }
}

/* ===== CTA Instagram global (au-dessus du footer, toutes les pages) ===== */
/* NB : classe .nm-igcta (et pas .insta-cta) pour éviter la collision avec la pastille .insta-cta existante (inline-flex) */
.nm-igcta { background: linear-gradient(135deg, #EEF3FA 0%, #E0E9F5 100%); padding: clamp(50px, 7vw, 84px) 0; }
.nm-igcta-inner { width: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; text-align: left; }
.nm-igcta-text { flex: 0 1 auto; max-width: 600px; }
.nm-igcta-handle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: .9rem; color: #7590B8; margin-bottom: 10px; }
.nm-igcta-handle svg { width: 18px; height: 18px; }
.nm-igcta-title { font-family: 'One Little Font', 'Caveat', cursive; font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.04; margin: 0 0 8px; color: var(--ink); }
.nm-igcta-sub { font-family: var(--font-sans); font-size: 1.04rem; line-height: 1.5; margin: 0; max-width: 52ch; color: var(--ink-soft); }
/* Bouton Instagram IDENTIQUE à celui du header (.nav-cta-insta) : même dégradé + même ombre */
.nm-igcta-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 16px; background: linear-gradient(135deg, #F4A261 0%, #C13584 60%, #833AB4 100%); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; text-decoration: none; box-shadow: 0 6px 18px rgba(31,41,55,.12); transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s; }
.nm-igcta-btn svg { width: 20px; height: 20px; }
.nm-igcta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,41,55,.18); filter: brightness(1.05); }
@media (max-width: 720px) {
  .nm-igcta { padding: 46px 0; }
  .nm-igcta-inner { flex-direction: column; text-align: center; }
  .nm-igcta-text { max-width: none; }
  .nm-igcta-handle { justify-content: center; }
  .nm-igcta-sub { margin-left: auto; margin-right: auto; }
  .nm-igcta-btn { width: 100%; max-width: 360px; justify-content: center; }
}

/* ===== Fiche ÉVÉNEMENT : même gabarit .va-* que les spots + badge date sur la photo ===== */
.event-fiche .va-hero-date {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; padding: 7px 12px;
  background: #fff; border-radius: 14px; line-height: 1;
  box-shadow: 0 6px 18px rgba(31,41,55,.22);
}
.event-fiche .va-hero-date strong { font-family: 'One Little Font','Caveat',cursive; font-size: 1.75rem; color: #7590B8; }
.event-fiche .va-hero-date span { font-family: var(--font-sans); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }

/* ===== MOBILE : badge soleil/lune compact en coin haut-gauche (ne recouvre plus le H1 centré).
   .home requis pour battre `.home .hero-split .hs-sun` (l.6670) qui le recentrait. ===== */
@media (max-width: 720px) {
  .home .hero-split .hs-sun { top: 12px; left: 12px; right: auto; transform: none; font-size: .8rem; padding: 7px 12px; gap: 6px; border-radius: 12px; }
  .home .hero-split .hs-sun .ni, .home .hero-split .hs-sun .hs-sun-sep svg { width: 15px; height: 15px; }
}

/* ===== FICHE ÉVÉNEMENT : accroche (description) longue → bornée + scroll interne =====
   Beaucoup d'events mettent tout le texte dans le champ « description » (accroche). Sans borne,
   le panneau — et la photo calée sur sa hauteur — devient démesuré. On limite la hauteur et on
   rend l'accroche scrollable UNIQUEMENT si elle dépasse (sinon aucun scroll). */
.event-fiche .va-lead {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(117,144,184,.45) transparent;
}
.event-fiche .va-lead::-webkit-scrollbar { width: 6px; }
.event-fiche .va-lead::-webkit-scrollbar-thumb { background: rgba(117,144,184,.45); border-radius: 999px; }
.event-fiche .va-lead::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 720px) { .event-fiche .va-lead { max-height: 220px; } }

/* ===== TABLETTE : la fiche du pin ne doit jamais déborder de la carte (courte) =====
   On la pose en panneau centré en haut de la carte, borné à la hauteur de la carte + scrollable,
   et un peu compacté pour qu'elle tienne le plus souvent sans scroll. */
@media (min-width: 721px) and (max-width: 980px) {
  .hero-split .hs-mapcard,
  .hero-split .hs-mapcard.hs-mapcard-below {
    left: 50% !important; right: auto !important; top: 14px !important; bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(88%, 360px) !important;
    max-height: calc(100% - 28px); overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
  }
  .hero-split .hs-mapcard .cd-hero { height: 104px; }
  .hero-split .hs-mapcard .cd-body { padding: 12px 16px 14px; }
}

/* ===== HERO MOBILE — PISTE 2 « carte épurée » : 1 bouton fort (Instagram),
   « Voir la carte » en lien discret, accroche courte, badge en pastille centrée ===== */
@media (max-width: 720px) {
  .hero-split .hs-desc { -webkit-line-clamp: 2; margin-bottom: 16px; }
  /* Instagram = LE bouton fort, pleine largeur */
  .hero-split .hs-actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero-split .hs-insta { width: 100%; justify-content: center; }
  /* « Voir la carte » : lien discret (fini le gros bandeau à fond carte + bordure) */
  .hero-split .hs-mapbtn {
    min-height: 0 !important; background: none !important; border: none !important;
    box-shadow: none !important; padding: 2px 8px !important; width: auto !important; margin: 2px auto 0 !important;
  }
  .hero-split .hs-mapbtn:hover { transform: none !important; box-shadow: none !important; }
  .hero-split .hs-mapbtn .nm-mapbanner-label {
    font-family: var(--font-sans) !important; font-weight: 600 !important;
    font-size: .9rem !important; color: #7590B8 !important; text-shadow: none !important;
  }
  .hero-split .hs-mapbtn .nm-mapbanner-label svg { width: 16px !important; height: 16px !important; color: #7590B8 !important; }
  .hero-split .hs-mapbtn .nm-mapbanner-chev { display: none !important; }
  /* badge soleil/lune : pastille centrée en haut de la carte (le titre démarre dessous) */
  .home .hero-split .hs-sun { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
}

/* ============================================================
   HERO MOBILE + TABLETTE « LE MIX » (validé par Théo 2026-07-14)
   Présentation kiosque : fond blanc, hero court à hauteur de
   contenu, compteurs en fiches penchées (chiffres manuscrits),
   bouton Instagram, puis rail horizontal de VRAIS contenus
   (events du week-end + spots partenaires) avec lien carte.
   Tout est scopé ≤980px : le DESKTOP (≥981) est INCHANGÉ.
   (Classes hp3-* héritées de la proposition n°3 d'origine.)
   ============================================================ */

/* Le rail n'existe qu'en mobile/tablette (jamais en desktop) */
.hp3-zone { display: none !important; } /* bloc « En ce moment sur le Bassin » retiré de la home mobile (demande Théo, temporaire) */

/* ---- MOBILE ET TABLETTE ≤1024 : fond blanc, hero à hauteur de contenu ----
   Étendu de 720 à 1024px le 7 août 2026 : Théo veut la même forme sur tablette que sur
   mobile. C'est CE bloc qui fait le rendu mobile (pas de photo de fond, pas de cadre,
   compteurs en fiches penchées) ; le bloc « TABLETTE 721-980 » qui suivait le recopiait
   avec d'autres valeurs et gardait la photo, il a été supprimé. */
@media (max-width: 1024px) {
  .hero-split::before { display: none; }
  .hero-split { background: #fff; }
  .hero-split .hs-frame {
    background: none !important; border: none !important;
    box-shadow: none !important; border-radius: 0 !important;
  }
  .hero-split .hs-inner { display: block !important; }
  .hero-split .hs-content {
    display: flex !important; flex-direction: column; align-items: center;
    padding: 16px 22px 4px !important;
  }
  .hero-split .hs-desc { -webkit-line-clamp: 2; margin-bottom: 12px; }
  /* Ordre : titre, accroche, fiches compteurs, Instagram (l'accès carte vit sous le rail) */
  .hero-split .hs-title   { order: 0; }
  .hero-split .hs-desc    { order: 1; }
  .hero-split .hs-stats   { order: 2; display: flex; gap: 14px; margin: 2px auto 14px; }
  .hero-split .hs-actions { order: 3; width: 100%; margin-bottom: 4px; }
  .hero-split .hs-mapbtn  { display: none !important; }
  /* Compteurs = fiches d'index penchées, chiffres réels en manuscrit */
  .hero-split .hs-stat {
    flex-direction: column; gap: 1px; padding: 10px 20px 11px;
    background: #fff; border: 1px solid rgba(62,92,118,.26); border-radius: 13px;
    box-shadow: 0 6px 16px rgba(31,41,55,.10);
    font-size: .8rem; color: var(--ink-soft);
  }
  .hero-split .hs-stat strong {
    font-family: 'One Little Font', 'Caveat', cursive; font-weight: 400;
    font-size: 2rem; line-height: 1; color: #7590B8;
  }
  .hero-split .hs-stat:first-child { transform: rotate(-1.6deg); }
  .hero-split .hs-stat:last-child  { transform: rotate(1.3deg); }
}

/* Le bloc « TABLETTE 721-980 » vivait ici. Supprimé le 7 août 2026 : il recopiait le
   bloc mobile ci-dessus avec d'autres valeurs, ce qui donnait deux rendus différents.
   La tablette suit maintenant exactement les règles mobiles, seules les tailles changent
   (voir le bloc 721-1024 plus haut dans le fichier). */

/* ---- RAIL « en ce moment sur le Bassin » (mobile + tablette) ---- */
@media (max-width: 980px) {
  /* La largeur min-content du rail (grid en colonnes) ne doit PAS se propager aux ancêtres
     flex (sinon frame/inner s'élargissent à la largeur du rail et le hero est clippé) */
  .hero-split .hs-frame { min-width: 0; width: 100%; }
  .hero-split .hs-inner { min-width: 0; width: 100%; }
  .hp3-zone { display: block; min-width: 0; max-width: 100%; overflow: hidden; padding: 4px 0 18px; }
  .hp3-head {
    font-family: 'One Little Font', 'Caveat', cursive; font-weight: 400;
    font-size: 1.6rem; line-height: 1; color: var(--ink);
    text-align: center; margin: 6px 22px 12px; transform: rotate(-1deg);
  }
  .hp3-rail {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: clamp(150px, 42vw, 200px);
    gap: 12px; overflow-x: auto; padding: 4px 22px 10px;
    min-width: 0; max-width: 100%;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp3-rail::-webkit-scrollbar { display: none; }
  .hp3-card {
    position: relative; display: block; scroll-snap-align: start;
    aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
    background-size: cover; background-position: center;
    background-color: #E8EDF4; text-decoration: none;
  }
  .hp3-card.is-partner { outline: 2px solid #F4A261; outline-offset: -2px; }
  .hp3-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,22,35,0) 38%, rgba(15,22,35,.78) 100%);
  }
  .hp3-chip {
    position: absolute; top: 9px; left: 9px; z-index: 1;
    font-family: var(--font-sans); font-size: .56rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
    color: #fff; background: #7590B8; border-radius: 8px; padding: 4px 8px;
  }
  .hp3-card.is-partner .hp3-chip { background: linear-gradient(135deg, #F4A261, #E08A4A); }
  .hp3-card-bottom { position: absolute; left: 11px; right: 11px; bottom: 10px; z-index: 1; }
  .hp3-card-bottom h3 {
    font-family: 'One Little Font', 'Caveat', cursive; font-weight: 400;
    font-size: 1.28rem; line-height: 1.02; color: #fff; margin: 0 0 3px;
  }
  .hp3-card-bottom span {
    display: block; font-family: var(--font-sans); font-size: .66rem; font-weight: 600;
    color: rgba(255,255,255,.88);
  }
  /* Sous le rail : l'accès carte (les compteurs sont déjà dans les fiches du haut) */
  .hp3-line {
    display: flex; align-items: center; justify-content: center;
    margin: 4px 22px 0; font-family: var(--font-sans); font-size: .88rem;
  }
  .hp3-line a { display: inline-flex; align-items: center; gap: 5px; padding: 10px 6px; color: #7590B8; font-weight: 700; text-decoration: none; }
  .hp3-line a svg { width: 15px; height: 15px; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .hp3-rail { grid-auto-columns: clamp(170px, 24vw, 212px); padding: 4px 26px 10px; }
}

/* ============================================================
   PWA / WEBAPP — bouton « Installer l'application » + page /installer/
   (préprod uniquement, cf includes/nomade-pwa.php)
   ============================================================ */

/* — Bouton d'install dans le HEADER (blue pill, avant l'insta) — */
.nm-install-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: linear-gradient(135deg, #7590B8 0%, #5E7BA6 100%) !important;
    color: #fff !important; text-decoration: none; white-space: nowrap;
    font-family: var(--font-sans); font-size: .88rem; font-weight: 600; letter-spacing: -.005em;
    box-shadow: none !important;
    transition: transform .2s var(--ease);
}
.nm-install-btn:hover { transform: translateY(-1px); color: #fff !important; }
.nm-install-btn:active { transform: translateY(0); }
.nm-install-btn svg { flex: 0 0 auto; }
/* Masqué une fois l'app installée (classe posée par l'event appinstalled dans le head) */
html.pwa-installed .nm-install-btn { display: none !important; }
/* Laptop étroit : icône seule (comme le CTA insta) pour préserver la nav */
@media (max-width: 1160px) {
    .nm-install-btn:not(.mm-cta):not(.nm-install-btn--texte) { padding: 9px 12px; gap: 0; font-size: 0; }
    .nm-install-btn:not(.mm-cta):not(.nm-install-btn--texte) svg { width: 18px; height: 18px; }
}
/* — Bouton d'install dans le BURGER (pleine largeur, en tête des actions) — */
.nm-install-btn--burger { font-size: .92rem !important; font-weight: 700; }

/* — Variante sobre des espaces membre et partenaire —
   On neutralise la pastille du header : ces pages ont leur propre langage, un
   contour fin et un angle de 10px. Le dégradé et le rayon de 999px n'y ont pas
   leur place. */
.nm-install-btn--texte {
    background: transparent !important;
    color: var(--ink-soft) !important;
    border-radius: 10px; padding: 10px 14px; gap: 8px;
    font-size: .85rem; font-weight: 700;
}
.nm-install-btn--texte:hover {
    color: var(--ink) !important; border-color: rgba(117,144,184,.6); transform: none;
}


/* — Page /installer/ — */
/* top padding généreux : le header du site est position:fixed en desktop → dégager le picto (en app, html.pwa-app le réduit plus bas) */
.install-page { max-width: 640px; margin: 0 auto; padding: 140px 20px 80px; }
.install-block[hidden] { display: none !important; }

.install-hero { text-align: center; margin-bottom: 30px; }
.install-mark { width: 86px; height: 86px; border-radius: 22px; display: block; margin: 0 auto 18px; box-shadow: 0 14px 34px rgba(117,144,184,.34); }
.install-kicker { display: inline-block; font-family: var(--font-hand); font-size: 1.5rem; color: var(--sunset-deep); transform: rotate(-2deg); margin-bottom: 2px; }
.install-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.08; color: var(--ink); margin: 0 0 12px; }
.install-title .brush-word { font-family: var(--font-hand); font-weight: 700; color: var(--periwinkle-deep); font-size: 1.18em; }
.install-sub { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; max-width: 32em; margin: 0 auto; }

.install-panel { background: #fff; border: 1px solid rgba(117,144,184,.18); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow); text-align: center; }
.install-block p { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; margin: 0 0 16px; }
.install-block p strong { color: var(--ink); }
.install-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(117,144,184,.12); color: var(--periwinkle-deep); font-weight: 700; font-size: .82rem; }
.install-badge svg { width: 16px; height: 16px; }
.install-badge--ok { background: rgba(62,92,74,.12); color: var(--pine); }

.install-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(135deg, #7590B8 0%, #5E7BA6 100%); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; transition: transform .18s var(--ease); }
.install-cta:hover { transform: translateY(-2px); }
.install-cta:active { transform: translateY(0); }
.install-hint { font-size: .86rem !important; color: var(--muted) !important; margin: 14px 0 0 !important; }

/* iOS : étapes illustrées */
.ios-steps { list-style: none; margin: 4px 0 20px; padding: 0; text-align: left; display: grid; gap: 14px; }
.ios-steps li { display: flex; align-items: center; gap: 14px; color: var(--ink); font-size: .98rem; line-height: 1.4; }
.ios-steps li em { font-style: normal; color: var(--muted); font-size: .9em; }
.ios-step-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(117,144,184,.12); color: var(--periwinkle-deep); }

/* iOS : mini-démo animée (barre de partage + doigt qui tape) */
.ios-demo { display: flex; justify-content: center; margin-top: 4px; }
.ios-phone { width: 172px; height: 116px; border-radius: 20px 20px 8px 8px; background: linear-gradient(180deg, #eef2f8, #fff); border: 2px solid rgba(117,144,184,.28); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.ios-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 46px; height: 5px; border-radius: 3px; background: rgba(117,144,184,.3); }
.ios-sharebar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid rgba(117,144,184,.2); display: flex; align-items: center; padding: 0 12px; }
.ios-share-icon { color: var(--periwinkle-deep); display: inline-flex; animation: iosPulse 2.6s var(--ease) infinite; }
.ios-cursor { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(117,144,184,.28); border: 2px solid var(--periwinkle-deep); left: 15px; bottom: 12px; animation: iosTap 2.6s var(--ease) infinite; }
@keyframes iosPulse { 0%, 42%, 100% { transform: scale(1); } 22% { transform: scale(1.2); } }
@keyframes iosTap { 0%, 100% { transform: translateY(-28px) scale(.9); opacity: 0; } 16% { transform: translateY(0) scale(1); opacity: 1; } 30% { transform: translateY(0) scale(.82); opacity: 1; } 46% { transform: translateY(-28px) scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ios-share-icon, .ios-cursor { animation: none; } .ios-cursor { opacity: 1; transform: translateY(0); } }

/* ==== Guide d'install iOS détaillé & animé, par navigateur (a2hs) ==== */
.a2hs { --a2-dur: 11s; }
.a2hs-lead { margin: 2px 0 14px !important; }
.a2hs-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 22px; gap: 5px; padding: 4px; border-radius: 14px; background: rgba(117,144,184,.10); }
.a2hs-tab { border: 0; cursor: pointer; padding: 9px 15px; border-radius: 10px; background: transparent; color: var(--ink-soft); font-family: var(--font-sans); font-weight: 600; font-size: .9rem; transition: color .15s var(--ease), background .15s var(--ease); }
.a2hs-tab:hover { color: var(--ink); }
.a2hs-tab.is-active { background: #fff; color: var(--periwinkle-deep); }
.a2hs-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; justify-items: center; }
@media (min-width: 640px) { .a2hs-grid { grid-template-columns: 1fr auto; gap: 26px; text-align: left; justify-items: stretch; } }

.a2hs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 340px; }
.a2hs-steps li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-size: .98rem; line-height: 1.4; text-align: left; }
.a2hs-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--periwinkle-deep); color: #fff; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.a2hs-txt em { font-style: normal; color: var(--muted); }
.a2hs-s1 { display: none; }
.a2hs[data-browser="safari"] .for-safari,
.a2hs[data-browser="chrome"] .for-chrome,
.a2hs[data-browser="firefox"] .for-firefox,
.a2hs[data-browser="edge"] .for-edge { display: inline; }
.a2hs-note { font-size: .86rem !important; color: var(--muted) !important; margin: 20px 0 0 !important; }

/* Téléphone maquette */
.a2hs-demo { display: flex; justify-content: center; }
.a2hs-phone { position: relative; width: 190px; height: 342px; border-radius: 30px; background: #eef1f6; border: 6px solid #dfe4ec; overflow: hidden; flex: 0 0 auto; }
.a2hs-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 52px; height: 15px; border-radius: 9px; background: #cfd6e1; z-index: 4; }
.a2hs-topbar { position: absolute; top: 0; left: 0; right: 0; height: 48px; padding: 24px 12px 0; display: flex; align-items: center; gap: 8px; background: #fff; border-bottom: 1px solid rgba(31,41,55,.06); }
.a2hs-url { flex: 1 1 auto; height: 20px; border-radius: 8px; background: rgba(117,144,184,.10); color: var(--muted); font-size: .58rem; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.a2hs-share, .a2hs-menu { color: #9aa6b8; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.a2hs-share svg { width: 16px; height: 16px; }
.a2hs-body { position: absolute; top: 48px; left: 0; right: 0; bottom: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.a2hs-body-mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #8BA0C8, #6f86b4); margin-bottom: 8px; }
.a2hs-body-t { font-family: 'One Little Font', 'Caveat', cursive; font-size: 1.24rem; color: var(--ink); line-height: 1; }
.a2hs-body-s { font-size: .6rem; color: var(--muted); margin-top: 3px; }
.a2hs-botbar { position: absolute; bottom: 0; left: 0; right: 0; height: 42px; display: flex; align-items: center; justify-content: space-around; background: #fff; border-top: 1px solid rgba(31,41,55,.06); color: #9aa6b8; }
.a2hs-bico { font-size: .95rem; }
.a2hs-menu { font-size: .8rem; letter-spacing: 1px; }
.a2hs-mg { display: none; }

/* affordances (iOS 26 : Safari entre par le menu ⋯ en bas ; Chrome par Partager dans la barre d'adresse) */
.a2hs-share--top { display: none; }
.a2hs-share--bot, .a2hs-more--bot { display: inline-flex; }
.a2hs[data-browser="chrome"] .a2hs-share--top { display: inline-flex; color: var(--periwinkle-deep); }
.a2hs[data-browser="safari"] .a2hs-more--bot { color: var(--periwinkle-deep); }
.a2hs-more { position: relative; }
.a2hs-more b { font-weight: 900; font-size: 1rem; letter-spacing: 1px; line-height: 1; }

/* doigt (tap) — pas de glow, juste un cercle qui presse */
.a2hs-fing { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(40,50,74,.18); border: 2px solid var(--periwinkle-deep); opacity: 0; pointer-events: none; z-index: 9; }
.a2hs-fing--row { top: 50%; left: auto; right: 10px; margin-top: -11px; animation: a2hsTapRow var(--a2-dur) var(--ease) infinite; }
.a2hs-fing--add { top: 50%; left: auto; right: -4px; margin-top: -11px; animation: a2hsTapAdd var(--a2-dur) var(--ease) infinite; }
.a2hs[data-browser="safari"] .a2hs-more--bot .a2hs-fing,
.a2hs[data-browser="chrome"] .a2hs-share--top .a2hs-fing { animation: a2hsTapBtn var(--a2-dur) var(--ease) infinite; }

/* feuille de partage iOS : s'ouvre sur contacts + apps, puis SCROLL (flèche) vers « Sur l'écran d'accueil » */
.a2hs-sheet { position: absolute; left: 0; right: 0; top: 12%; bottom: 0; z-index: 5; overflow: hidden; background: #eef0f4; border-radius: 18px 18px 0 0; border-top: 1px solid rgba(31,41,55,.06); transform: translateY(104%); animation: a2hsSheet var(--a2-dur) var(--ease) infinite; }
.a2hs-sheet-inner { padding: 8px 10px 14px; animation: a2hsScroll var(--a2-dur) var(--ease) infinite; }
.a2hs-handle { display: block; width: 34px; height: 4px; border-radius: 3px; background: #c7cfda; margin: 2px auto 8px; }
.a2hs-prev { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 6px 8px; margin-bottom: 8px; }
.a2hs-prev-ic { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #8BA0C8, #6f86b4); flex: 0 0 auto; }
.a2hs-prev-tx { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.a2hs-prev-tx b { font-size: .6rem; color: var(--ink); }
.a2hs-prev-tx i { font-style: normal; font-size: .52rem; color: var(--muted); white-space: nowrap; }
.a2hs-contacts { display: flex; gap: 7px; padding: 2px 0 8px; }
.a2hs-ct { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 42px; flex: 0 0 auto; }
.a2hs-ct i { width: 33px; height: 33px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .6rem; font-weight: 700; font-style: normal; }
.a2hs-ct b { font-size: .44rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.a2hs-appsrow { display: flex; gap: 8px; padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(31,41,55,.07); }
.a2hs-ap { width: 33px; height: 33px; border-radius: 9px; flex: 0 0 auto; }
.a2hs-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 10px; overflow: hidden; }
.a2hs-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; font-size: .62rem; color: var(--ink); border-bottom: 1px solid rgba(31,41,55,.05); }
.a2hs-list li:last-child { border-bottom: 0; }
.a2hs-lic { color: #9aa6b8; display: inline-flex; }
.a2hs-lic svg { width: 13px; height: 13px; }
.a2hs-a2h { position: relative; font-weight: 700; animation: a2hsRow var(--a2-dur) var(--ease) infinite; }
.a2hs-a2h .a2hs-lic { color: var(--periwinkle-deep); }
/* « Voir plus » (iOS 26 : les actions sont repliées, il faut dérouler) */
.a2hs-plus { position: relative; color: var(--periwinkle-deep); font-weight: 700; }
.a2hs-plus .a2hs-lic { color: var(--periwinkle-deep); }
.a2hs-fing--plus { top: 50%; left: auto; right: 10px; margin-top: -11px; animation: a2hsTapPlus var(--a2-dur) var(--ease) infinite; }
/* flèche « défile pour trouver » (comme la lib add-to-homescreen) */
.a2hs-arrow { position: absolute; left: 50%; bottom: 9px; transform: translate(-50%,0); z-index: 7; width: 24px; height: 24px; border-radius: 50%; background: var(--periwinkle-deep); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; animation: a2hsArrow var(--a2-dur) var(--ease) infinite; }
.a2hs-arrow svg { width: 15px; height: 15px; }

/* écran de confirmation iOS 26 : icône + nom + toggle « Ouvrir comme app web » + Ajouter */
.a2hs-confirm { position: absolute; left: 0; right: 0; top: 20%; bottom: 0; z-index: 8; background: #eef0f4; border-radius: 18px 18px 0 0; border-top: 1px solid rgba(31,41,55,.06); padding: 12px 12px 14px; transform: translateY(105%); animation: a2hsConfirm var(--a2-dur) var(--ease) infinite; }
.a2hs-cf-bar { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px; border-bottom: 1px solid rgba(31,41,55,.08); margin-bottom: 12px; }
.a2hs-cf-cancel { font-size: .58rem; color: #8aa0c8; }
.a2hs-cf-title { font-size: .6rem; font-weight: 700; color: var(--ink); }
.a2hs-cf-add { position: relative; font-size: .62rem; font-weight: 800; color: var(--periwinkle-deep); }
.a2hs-cf-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px; margin-bottom: 11px; }
.a2hs-cf-ic { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #8BA0C8, #6f86b4); flex: 0 0 auto; }
.a2hs-cf-tx { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
.a2hs-cf-tx b { font-size: .66rem; color: var(--ink); }
.a2hs-cf-tx i { font-style: normal; font-size: .54rem; color: var(--muted); white-space: nowrap; }
.a2hs-cf-toggle { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 12px; padding: 10px 12px; font-size: .6rem; color: var(--ink); font-weight: 600; }
.a2hs-cf-sw { position: relative; width: 34px; height: 20px; border-radius: 11px; background: #34c759; flex: 0 0 auto; }
.a2hs-cf-sw i { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

@keyframes a2hsSheet { 0%, 9% { transform: translateY(104%); } 17%, 58% { transform: translateY(0); } 63%, 100% { transform: translateY(104%); } }
@keyframes a2hsScroll { 0%, 33% { transform: translateY(0); } 45%, 58% { transform: translateY(-108px); } 62%, 100% { transform: translateY(0); } }
@keyframes a2hsTapBtn { 0%,2% { opacity: 0; transform: scale(1.25); } 5% { opacity: 1; transform: scale(1); } 9% { transform: scale(.8); } 12% { transform: scale(1); } 14%,100% { opacity: 0; } }
@keyframes a2hsTapPlus { 0%,20% { opacity: 0; transform: scale(1.25); } 24% { opacity: 1; transform: scale(1); } 28% { transform: scale(.8); } 31% { transform: scale(1); } 33%,100% { opacity: 0; } }
@keyframes a2hsRow { 0%,45% { background: #fff; } 51%,58% { background: rgba(117,144,184,.16); } 62%,100% { background: #fff; } }
@keyframes a2hsTapRow { 0%,47% { opacity: 0; transform: scale(1.25); } 52% { opacity: 1; transform: scale(1); } 56% { transform: scale(.8); } 59% { transform: scale(1); } 62%,100% { opacity: 0; } }
@keyframes a2hsConfirm { 0%, 60% { transform: translateY(105%); } 68%, 90% { transform: translateY(0); } 95%, 100% { transform: translateY(105%); } }
@keyframes a2hsTapAdd { 0%,72% { opacity: 0; transform: scale(1.25); } 77% { opacity: 1; transform: scale(1); } 81% { transform: scale(.8); } 84% { transform: scale(1); } 87%,100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .a2hs-sheet, .a2hs-sheet-inner { animation: none; }
  .a2hs-sheet { transform: translateY(104%); }
  .a2hs-confirm { transform: none; animation: none; }
  .a2hs-fing, .a2hs-arrow { display: none; }
  .a2hs-a2h { animation: none; }
}

/* Avantages de l'appli */
.install-perks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.install-perks li { display: flex; align-items: center; gap: 10px; text-align: left; color: var(--ink); font-size: .92rem; line-height: 1.3; font-weight: 500; }
.ip-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(117,144,184,.12); color: var(--periwinkle-deep); }
.ip-ic svg { width: 18px; height: 18px; }
@media (max-width: 480px) { .install-perks { grid-template-columns: 1fr; } .install-panel { padding: 24px 18px; } }

/* Desktop = handoff vers mobile : QR à scanner, message court, pas d'avantages (redondants) */
.install-panel[data-install-state="desktop"] ~ .install-perks { display: none; }
.install-desktop-lead { margin-bottom: 18px !important; }
.install-qr { display: inline-flex; padding: 16px; background: #fff; border: 1px solid rgba(117,144,184,.22); border-radius: 20px; margin: 4px 0 18px; }
.install-qr svg { width: 172px; height: 172px; display: block; }
.install-desktop .install-desktop-url { font-size: .92rem; color: var(--muted); margin: 0 !important; }
.install-desktop .install-desktop-url strong { color: var(--periwinkle-deep); }
.install-desktop .install-desktop-url em { font-style: normal; }

/* header sticky en mobile (≤720px) : plus de recouvrement → padding-top normal */
@media (max-width: 720px) { .install-page { padding-top: 46px; } }

/* — Barre de nav d'app (bas d'écran) : visible seulement en mode installé — */
.app-tabbar { display: none; }
html.pwa-app .app-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(117,144,184,.16); box-shadow: 0 -4px 20px rgba(62,78,110,.09);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Promotion sur sa propre couche de compositing : « colle » la barre au viewport et
       l'empêche de sursauter avec le rebond élastique iOS (rubber-band). */
    transform: translateZ(0); -webkit-transform: translateZ(0);
}
html.pwa-app .app-tab {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px 6px; text-decoration: none;
    color: var(--muted); font-family: var(--font-sans); font-size: .58rem; font-weight: 600; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
}
html.pwa-app .app-tab-ic { display: inline-flex; }
html.pwa-app .app-tab-ic svg { width: 22px; height: 22px; }
html.pwa-app .app-tab-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.pwa-app .app-tab.is-active { color: var(--periwinkle-deep); }
html.pwa-app .app-tab.is-active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--periwinkle-deep);
}
/* Accueil au centre : icône légèrement mise en avant (pas de FAB gadget) */
html.pwa-app .app-tab--home .app-tab-ic svg { width: 24px; height: 24px; }

/* ===== MODE APP : chrome allégé (header retiré) ===== */
html.pwa-app .site-header { display: none !important; }
html.pwa-app .burger { display: none !important; }

/* ===== MENU BURGER D'APP (tiroir gauche) — remplace la tabbar du bas (2026-07-18) ===== */
.app-burger, .app-drawer-wrap { display: none; }
html.pwa-app .app-burger { display: flex; }
html.pwa-app .app-drawer-wrap { display: block; }
/* pendant la recherche plein écran de la carte, le burger s'efface (comme l'ancienne barre) */
html.pwa-app body.carte-searching .app-burger { display: none; }

/* Bouton burger flottant, haut-gauche, verre dépoli (même langage que les contrôles carte) */
html.pwa-app .app-burger {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 14px;
    width: 46px; height: 46px; border-radius: 50%; z-index: 2400;
    align-items: center; justify-content: center;
    background: rgba(255, 253, 247, .94); color: var(--periwinkle-deep);
    border: 1px solid rgba(117, 144, 184, .28);
    box-shadow: 0 1px 2px rgba(117,144,184,.1), 0 6px 18px rgba(117,144,184,.22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent; cursor: pointer;
    view-transition-name: app-burger;
}
html.pwa-app .app-burger:active { transform: scale(.92); }

/* Enveloppe plein écran (voile + tiroir). Fermée : voile transparent + tiroir hors-champ. */
html.pwa-app .app-drawer-wrap { position: fixed; inset: 0; z-index: 3400; pointer-events: none; }
.app-drawer-scrim { position: absolute; inset: 0; background: rgba(20, 26, 36, .42); opacity: 0; transition: opacity .28s ease; }
.app-drawer {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(82%, 320px);
    display: flex; flex-direction: column;
    background: var(--cream); box-shadow: 8px 0 34px rgba(20, 26, 36, .2);
    transform: translateX(-101%); visibility: hidden;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s;
    padding: calc(env(safe-area-inset-top, 0px) + 26px) 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* spécificité : doit battre `html.pwa-app .app-drawer-wrap { pointer-events:none }` (0,2,1),
   sinon le voile reste non-cliquable et le tap passe à travers vers la carte. */
html.pwa-app .app-drawer-wrap.is-open { pointer-events: auto; }
.app-drawer-wrap.is-open .app-drawer-scrim { opacity: 1; }
/* visibility:hidden au repos → l'ombre portée ne bave pas sur le bord gauche des écrans d'app
   quand le tiroir est fermé (translateX(-101%) ne sort que ~3px de la largeur). */
.app-drawer-wrap.is-open .app-drawer { transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s; }

.ad-logo { display: block; padding: 0 22px 4px; }
.ad-logo img { height: 46px; width: auto; display: block; }

.ad-nav { margin-top: 20px; flex: 1 1 auto; display: flex; flex-direction: column; }
.ad-link { display: flex; align-items: center; gap: 14px; padding: 11px 22px; min-height: 48px;
    color: var(--ink-soft); font-family: 'One Little Font', 'Caveat', cursive; font-weight: 700; font-size: 1.5rem; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ad-link .ad-ic { flex: 0 0 auto; width: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--periwinkle-deep); }
.ad-link .ad-ic svg { width: 21px; height: 21px; }
.ad-link:active { background: rgba(117,144,184,.1); }
.ad-link.is-active { color: var(--periwinkle-deep); font-weight: 800; background: rgba(117,144,184,.1); }

.ad-foot { display: flex; align-items: center; gap: 10px; margin: 8px 22px 0; padding-top: 14px;
    border-top: 1px solid rgba(117,144,184,.16); font-size: .82rem; color: var(--ink-soft); }
.ad-foot .ad-bwf { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.ad-foot .ad-heart { color: #E0556B; }
.ad-foot a { color: var(--periwinkle-deep); font-weight: 700; text-decoration: none; }
.ad-cookies { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 8px 22px 0; padding: 4px 0; background: none; border: 0; font-family: inherit; font-size: .8rem; color: var(--ink-soft); text-decoration: underline; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ad-cookies svg { width: 14px; height: 14px; opacity: .75; }
.ad-cookies:active { color: var(--periwinkle-deep); }
/* Bouton Instagram dans le tiroir (agrandi) */
.ad-insta { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; margin: 10px 22px 12px; padding: 14px 26px; border-radius: 999px; background: #fff; border: 1px solid rgba(117,144,184,.26); color: var(--periwinkle-deep); font-weight: 700; font-size: 1.1rem; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.ad-insta svg { width: 23px; height: 23px; }
.ad-insta:active { transform: scale(.96); }
/* Accès au compte : même dessin que le lien Instagram, avec la photo à la place
   de l'icône quand il y en a une. Le tiroir garde sa forme, on n'ajoute qu'une
   entrée. */
.ad-compte { margin-bottom: 8px; }
.ad-compte-vue {
    width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: var(--periwinkle); color: #fff; font-weight: 800; font-size: .8rem;
}
.ad-compte-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sans cette ligne, le `display: block` ci-dessus l'emporte sur l'attribut
   `hidden` et une photo absente laisse un rond vide. */
.ad-compte-vue img[hidden] { display: none; }
/* Petit lien « Contactez-nous » (vers la page contact du site, pas de panneau) */
.ad-contactlink { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 0 22px 8px; font-size: .85rem; color: var(--ink-soft); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ad-contactlink svg { width: 15px; height: 15px; opacity: .75; }
.ad-contactlink:active { color: var(--periwinkle-deep); }

/* ===== Mode « embarqué » : page chargée dans un iframe de panneau d'app → chrome retiré ===== */
body.app-embed .site-header,
body.app-embed .top-bar,
body.app-embed .pwa-splash,
body.app-embed .nm-igcta,
body.app-embed .app-burger,
body.app-embed .app-drawer-wrap,
body.app-embed .app-close-carte,
body.app-embed .carte-locate,
body.app-embed .mobile-menu { display: none !important; }
/* Corps en colonne : le contenu se centre (main flex:1) et le petit footer reste collé en bas */
body.app-embed { background: var(--cream); padding-bottom: 0 !important; min-height: 100dvh; display: flex; flex-direction: column; }
body.app-embed main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
body.app-embed .page-hero { padding-top: 22px !important; padding-bottom: 10px !important; }
body.app-embed .install-page.notif-page { padding-top: 24px !important; padding-bottom: 12px !important; }
/* Petit footer (signature BassinWebFlow, texte seul) en bas du panneau */
body.app-embed .site-footer { display: block; background: var(--cream); border: 0; padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 14px); margin: 0; text-align: center; }
body.app-embed .site-footer .footer-grid,
body.app-embed .site-footer .footer-app-legal,
body.app-embed .site-footer .footer-credits,
body.app-embed .site-footer .footer-bottom > span:first-child { display: none !important; }
body.app-embed .site-footer .footer-bottom { display: block; margin: 0; }
body.app-embed .site-footer .footer-bottom span { font-size: .78rem; color: var(--ink-soft); }

/* ===== Panneau overlay app (Contact / Notifications) — plein écran, glisse du bas ===== */
.app-overlay { display: none; }
html.pwa-app .app-overlay {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 3600;
    background: var(--cream); transform: translateY(100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;
}
html.pwa-app .app-overlay.is-open { transform: translateY(0); visibility: visible; transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s; }
.app-overlay-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top,0px) + 10px) 14px 10px 20px; background: var(--cream); border-bottom: 1px solid rgba(117,144,184,.14); }
.app-overlay-title { font-family: 'One Little Font', 'Caveat', cursive; font-size: 1.75rem; line-height: 1; color: var(--periwinkle-deep); }
.app-overlay-close { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(117,144,184,.12); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app-overlay-close:active { transform: scale(.9); }
.app-overlay-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--cream); }
/* Overlay iframe : indicateur de chargement (évite le rectangle crème vide sans feedback) */
.app-overlay.is-loading .app-overlay-frame { opacity: 0; }
.app-overlay.is-loading::after { content: ''; position: absolute; left: 50%; top: 55%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(117,144,184,.28); border-top-color: var(--periwinkle-deep); animation: adSpin .7s linear infinite; z-index: 2; }
@keyframes adSpin { to { transform: rotate(360deg); } }

/* ===== Correctifs audit PWA (2026-07-18) ===== */
/* Fiches spot/événement/article en app : le burger recouvrait le bouton « retour » → on le masque
   (ces pages ont déjà le retour + le X vers la carte). */
html.pwa-app body.single-nomade_spot .app-burger,
html.pwa-app body.single-nomade_event .app-burger,
html.pwa-app body.single-nomade_article .app-burger { display: none !important; }
/* Tiroir ouvert : verrou de scroll du fond (anti scroll-chaining iOS sur les pages de contenu) */
body.ad-open { overflow: hidden; }

/* Carte en app : légende retirée (redondante avec les filtres Tout/Spots/Sorties), le coin haut-gauche est au burger */
html.pwa-app .carte-app .map-legend { display: none; }
/* En vue FICHE (détail) : on masque le burger + le bouton position (la fiche a sa propre barre
   « Liste / Carte ✕ » ; ils étaient mal placés par-dessus la fiche). */
html.pwa-app body.carte-detailview .app-burger,
html.pwa-app body.carte-detailview .carte-locate { display: none; }
/* Desktop app (rare) : le panneau latéral de la carte démarre SOUS le burger (sinon il chevauche
   son en-tête). body.carte-fullscreen → spécificité (0,3,2) pour battre la règle top: safe+14. */
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape){
    html.pwa-app body.carte-fullscreen .carte-panel { top: calc(env(safe-area-inset-top, 0px) + 72px); }
}

/* Carte en app : attribution Leaflet retirée du coin bas-droit (crédit reporté dans le tiroir) */
html.pwa-app .carte-app .leaflet-control-attribution { display: none !important; }

/* Croix « retour carte » — haut-droite sur les pages de contenu, jamais sur la carte elle-même */
.app-close-carte { display: none; }
html.pwa-app .app-close-carte {
    display: flex; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 14px;
    width: 46px; height: 46px; border-radius: 50%; z-index: 2400;
    align-items: center; justify-content: center;
    background: rgba(255, 253, 247, .94); color: var(--ink);
    border: 1px solid rgba(117, 144, 184, .28);
    box-shadow: 0 1px 2px rgba(117,144,184,.1), 0 6px 18px rgba(117,144,184,.22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent; text-decoration: none;
    view-transition-name: app-close;
}
html.pwa-app .app-close-carte:active { transform: scale(.92); }
html.pwa-app body.carte-fullscreen .app-close-carte { display: none; }

/* Crédit carte, discret, dans le pied du tiroir (remplace l'attribution retirée de la carte) */
.ad-mapcredit { margin: 8px 22px 0; font-size: .68rem; line-height: 1.3; color: var(--ink-soft); opacity: .7; }
.ad-mapcredit a { color: inherit; text-decoration: underline; }

/* La croix = app mobile UNIQUEMENT. Par défaut masquée partout (web/desktop) ; réaffichée
   plus bas seulement en html.pwa-app plein écran. (Avant : le display:none était enfermé
   dans le @media mobile → le bouton s'affichait par défaut sur le web desktop.) */
.carte-close { display: none; }

/* ===== Volet carte PLEIN ÉCRAN + croix (app mobile, 2026-07-18) ===== */
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
    /* Liste ouverte en app = plein écran, fond OPAQUE (pas de bleed carte). Le burger est masqué
       via body.carte-listfull (il vit hors du contexte d'empilement de .carte-app, donc un z-index
       ne suffit pas à le couvrir). */
    html.pwa-app .carte-fullscreen .carte-panel[data-open="true"][data-view="list"] {
        top: 0; height: 100dvh; max-height: none; border-radius: 0; z-index: 2500;
        background: var(--cream);
    }
    html.pwa-app body.carte-listfull .app-burger { display: none; }
    .carte-close { display: none; }
    html.pwa-app .carte-fullscreen .carte-panel[data-open="true"][data-view="list"] .carte-close {
        display: flex; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; width: 40px; height: 40px; z-index: 6;
        align-items: center; justify-content: center; border: 0; border-radius: 50%;
        background: rgba(117, 144, 184, .14); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    html.pwa-app .carte-fullscreen .carte-panel[data-open="true"][data-view="list"] .carte-close:active { transform: scale(.9); }
    /* en plein écran : poignée cachée (on ferme par la croix), haut aéré sous l'encoche */
    html.pwa-app .carte-fullscreen .carte-panel[data-open="true"][data-view="list"] .carte-grip { display: none; }
    html.pwa-app .carte-fullscreen .carte-panel[data-open="true"][data-view="list"] .carte-panel-top { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
    /* la barre de recherche s'arrête avant la croix (top-right) pour ne pas passer dessous */
    html.pwa-app .carte-fullscreen .carte-panel[data-open="true"][data-view="list"] .carte-search-row { padding-right: 46px; }
}

/* Bouton « ma position » (géoloc) — sous « Tout le Bassin », haut-droite */
.carte-locate {
    position: absolute; z-index: 20; top: 186px; right: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); color: var(--ink);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.7); box-shadow: 0 12px 28px -12px rgba(31,41,55,.4);
    cursor: pointer; transition: transform .2s var(--ease), color .2s ease; -webkit-tap-highlight-color: transparent;
}
.carte-locate:active { transform: scale(.92); }
.carte-locate.is-active { background: var(--periwinkle-deep); border-color: var(--periwinkle-deep); color: #fff; }
.carte-locate.is-loading { opacity: .6; }
.carte-locate.is-loading svg { animation: carteLocateSpin 1s linear infinite; }
.carte-locate.is-error { color: #d1495b; }
@keyframes carteLocateSpin { to { transform: rotate(360deg); } }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) { .carte-locate { top: 158px; right: 14px; } }
/* En app, le bouton « ma position » est COLLÉ à droite du burger (même style/taille) */
html.pwa-app .carte-fullscreen .carte-locate {
    top: calc(env(safe-area-inset-top, 0px) + 12px); left: 70px; right: auto;
    width: 46px; height: 46px; color: var(--periwinkle-deep);
    background: rgba(255, 253, 247, .94); border-color: rgba(117, 144, 184, .28);
    box-shadow: 0 1px 2px rgba(117,144,184,.1), 0 6px 18px rgba(117,144,184,.22);
}
html.pwa-app .carte-fullscreen .carte-locate.is-active { background: var(--periwinkle-deep); color: #fff; }

/* Point bleu « ma position » (façon Apple/Google Maps) */
.me-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: #3F7BFF; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(63,123,255,.5), 0 2px 6px rgba(31,41,55,.4); }

/* Rangée de filtres rapides (Partenaires / Ce week-end) */
/* Centree comme la legende et les categories : une rangee callee a gauche au milieu
   d'un bloc centre casse l'alignement du panneau. */
.carte-quick { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.carte-qf {
    /* 10px et non 999px : la pilule tout ronde est proscrite par la charte, et ces
       boutons doivent s'accorder avec ceux de la legende, qui sont a 10px. */
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px;
    border: 1px solid rgba(31,41,55,.12); background: #fff; color: var(--ink-soft);
    font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.carte-qf svg { width: 15px; height: 15px; }
.carte-qf b { color: var(--ink); font-variant-numeric: tabular-nums; }
.carte-qf.active { background: var(--sunset-deep); border-color: var(--sunset-deep); color: #fff; }
.carte-qf.active b { color: #fff; }
/* « Près de moi » = bleu (thème localisation) quand actif, + libellé de distance par item */
.carte-qf-near.active { background: var(--periwinkle-deep); border-color: var(--periwinkle-deep); color: #fff; }
.carte-qf-near.is-loading { opacity: .6; cursor: progress; }
.carte-qf-near.is-error { background: #d9534f; border-color: #d9534f; color: #fff; }
.cl-dist { font-size: .74rem; font-weight: 700; color: var(--periwinkle-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 720px) {
    .carte-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .carte-quick::-webkit-scrollbar { display: none; }
    .carte-qf { flex-shrink: 0; }
}
/* Voile dégradé sous l'encoche : garde l'heure/batterie (texte blanc du black-translucent)
   lisibles au-dessus d'un contenu clair. Invisible sur appareil sans encoche (hauteur 0). */
html.pwa-app body::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
    background: linear-gradient(to bottom, rgba(31,41,55,.30), rgba(31,41,55,0));
    z-index: 3000; pointer-events: none;
}
/* fond crème = transitions sans flash blanc entre les pages */
html.pwa-app, html.pwa-app body { background: var(--cream); }
/* plus de barre du bas : le footer d'app porte déjà le safe-area-inset-bottom → body à 0
   (sinon double safe-area = trop de vide sous la signature). La carte l'override de son côté. */
html.pwa-app body { padding-bottom: 0; }
/* header masqué → on récupère l'espace en haut (juste l'encoche iOS) */
html.pwa-app .hero,
html.pwa-app .hero-v2,
html.pwa-app .hero-v3,
html.pwa-app .page-hero,
html.pwa-app .blog-hero-section,
html.pwa-app .article-hero,
html.pwa-app .install-page {
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
}

/* Carte plein écran en app : éléments hauts sous l'encoche, panneau au-dessus de la barre */
html.pwa-app .carte-fullscreen .carte-fit { top: calc(env(safe-area-inset-top, 0px) + 14px); }
html.pwa-app .carte-fullscreen .carte-panel { top: calc(env(safe-area-inset-top, 0px) + 14px); }

/* BUG « barre du bas trop haute » — UNIQUEMENT sur la carte (page plein écran).
   Cause (iOS standalone) : une barre position:fixed sur un document non-scrollable s'ancre
   au « petit viewport » (exclut le home indicator) → remonte de ~34px. Non mesurable en JS
   (comportement d'ancrage du moteur), donc les fixes CSS/JS sur du position:fixed échouent.
   PLAN C — LAYOUT FLEX : sur la carte, la barre n'est PLUS position:fixed mais un vrai élément
   de FLUX, dernier enfant d'un conteneur flex vertical de hauteur 100dvh → elle est
   mécaniquement collée au bas du conteneur, plus aucun ancrage viewport iOS en jeu.
   La carte (.carte-app) reste en position:fixed plein écran (inchangée) DERRIÈRE la barre. */
/* Carte : la barre se rehaussait À L'OUVERTURE de la carte et redescendait en changeant de
   page (observation Théo — les autres pages sont parfaites). Cause : la carte est la SEULE
   page NON-DÉFILABLE de l'app (overflow:hidden) — sur iOS standalone (WebKit #237961), les
   fixed bottom d'une page non-défilable sont calés sur le viewport RÉDUIT (rehaussés de
   safe-area-top), alors que sur une page défilable ils collent au bas physique.
   FIX : rendre le document de la carte techniquement DÉFILABLE comme les autres pages.
   Invisible à l'œil : tout le contenu de la carte est en position fixed (plaqué à l'écran),
   scroller ne déplace rien ; les gestes sur la carte sont captés par Leaflet. */
html.pwa-app .carte-fullscreen {
    overflow: visible !important;
    min-height: calc(100lvh + env(safe-area-inset-top, 0px) + 2px);
    padding-bottom: 0 !important;
}
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
    /* La sheet descend jusqu'au bas PHYSIQUE (plus de bande de carte visible dessous) ; le
       contenu garde un padding safe-area pour ne pas passer sous le home indicator iOS. */
    html.pwa-app .carte-fullscreen .carte-panel { top: auto; bottom: 0; height: 70vh; max-height: 70vh; }
    html.pwa-app .carte-fullscreen .carte-list,
    html.pwa-app .carte-fullscreen .carte-detail-body { padding-bottom: env(safe-area-inset-bottom, 0px); }
    html.pwa-app .carte-panel[data-open="false"] { transform: translateY(calc(100% - var(--peek, 168px) - 12px - env(safe-area-inset-bottom, 0px))); }
    html.pwa-app .carte-panel[data-search="on"] { bottom: auto; height: 100%; }
    /* recherche plein écran type Waze : la barre du bas s'efface */
    html.pwa-app body.carte-searching .app-tabbar { display: none; }
    /* légende alignée avec le bouton « Tout le Bassin » (sous l'encoche), pas au milieu */
    html.pwa-app .carte-app .map-legend { top: calc(env(safe-area-inset-top, 0px) + 14px); }
}

/* Boutons fantôme + entête page notifications */
.install-cta--ghost { background: transparent; color: var(--ink-soft); box-shadow: none; border: 1.5px solid rgba(117,144,184,.32); }
.install-cta--ghost:hover { filter: none; transform: none; background: rgba(117,144,184,.08); }
.notif-hero-ic { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: rgba(117,144,184,.14); color: var(--periwinkle-deep); box-shadow: 0 14px 34px rgba(117,144,184,.24); }
.notif-hero-ic svg { width: 34px; height: 34px; }

/* ===== Réglages de notifs par type — lignes + interrupteurs iOS ===== */
.notif-switch-list { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.notif-switch-row { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid rgba(117,144,184,.14); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.notif-switch-row:last-child { border-bottom: 0; }
.notif-switch-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(117,144,184,.12); color: var(--periwinkle-deep); }
.notif-switch-ic svg { width: 20px; height: 20px; }
.notif-switch-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-switch-title { font-weight: 700; font-size: .98rem; color: var(--ink); line-height: 1.2; }
.notif-switch-sub { font-size: .8rem; color: var(--ink-soft); line-height: 1.25; }
.notif-switch-foot { margin: 16px 2px 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.4; text-align: center; }

/* Page Notifs en app : tout tient sans scroll (compaction ciblée .notif-page) */
html.pwa-app .notif-page { padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important; padding-bottom: 18px; }
html.pwa-app .notif-page .install-hero { margin-bottom: 22px; }
html.pwa-app .notif-page .notif-hero-ic { width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 18px; box-shadow: 0 10px 26px rgba(117,144,184,.22); }
html.pwa-app .notif-page .notif-hero-ic svg { width: 30px; height: 30px; }
html.pwa-app .notif-page .install-title { font-size: 1.9rem; margin-bottom: 6px; }
html.pwa-app .notif-page .install-sub { font-size: .95rem; line-height: 1.4; max-width: 30em; }
html.pwa-app .notif-page .install-panel { padding: 20px 18px; }
html.pwa-app .notif-page .notif-switch-row { padding: 15px 4px; }
html.pwa-app .notif-page .notif-switch-foot { margin: 14px 2px 0; font-size: .76rem; line-height: 1.4; }

/* Interrupteur façon iOS */
.ios-switch { position: relative; flex: 0 0 auto; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: rgba(120,120,128,.28); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .28s ease; }
.ios-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.04); transition: transform .28s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ios-switch[aria-checked="true"] { background: var(--periwinkle-deep); }
.ios-switch[aria-checked="true"]::after { transform: translateX(20px); }
.ios-switch:disabled { opacity: .55; cursor: default; }
.ios-switch:focus-visible { outline: 2px solid var(--periwinkle-deep); outline-offset: 3px; }

/* ===== TRANSITIONS FLUIDES (app) — API View Transitions (cross-document) ===== */
/* @view-transition{navigation:auto} est injecté en <head> uniquement en mode app. */
/* Transition légère « glisse + fondu » (transform/opacity uniquement = 60 fps). */
::view-transition-old(root) { animation: vtOut .18s ease both; }
::view-transition-new(root) { animation: vtIn .34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px) scale(.994); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* La barre du bas reste FIXE pendant la transition (comme une vraie tab bar native) */
html.pwa-app .app-tabbar { view-transition-name: app-tabbar; }
/* Fond cohérent : évite tout flash blanc entre deux documents */
html.pwa-app { background: var(--cream); }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; }
}

/* ===== Feedback tactile instantané (ressenti « app ») : état pressé, transform/opacity only ===== */
html.pwa-app .app-tab { transition: color .15s ease, transform .12s ease; }
html.pwa-app .app-tab:active { transform: scale(.9); }
.spot-card, .evmag-tile, .evmag-card, .event-card-v2, .hp3-card,
.ahv5-ev, .ahv5-small, .ahv5-big, .ahv5-hero, .ahv5-insta, .cd-nav-btn { transition: transform .13s ease; }
html.pwa-app .spot-card:active, html.pwa-app .evmag-tile:active, html.pwa-app .evmag-card:active,
html.pwa-app .event-card-v2:active, html.pwa-app .hp3-card:active, .ahv5-ev:active, .ahv5-small:active,
.ahv5-big:active, .ahv5-hero:active, .ahv5-insta:active, .cd-nav-btn:active { transform: scale(.978); }
.category-tab:active { transform: scale(.95); }

/* ===== SPLASH DE DÉMARRAGE (mascotte + barre) ===== */
.pwa-splash { display: none; }
html.pwa-app #pwaSplash {
    display: flex; position: fixed; inset: 0; z-index: 4000;
    align-items: center; justify-content: center; background: var(--cream);
    transition: opacity .5s ease, visibility .5s ease;
}
html.pwa-nav #pwaSplash { display: none; }
#pwaSplash.hide { opacity: 0; visibility: hidden; }
.pwa-splash-in { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 40px; }
.pwa-splash-mascot { width: 150px; height: auto; animation: pwaBob 1.5s ease-in-out infinite; filter: drop-shadow(0 14px 26px rgba(117,144,184,.34)); }
.pwa-splash-bar { width: 190px; max-width: 60vw; height: 6px; border-radius: 999px; background: rgba(117,144,184,.18); overflow: hidden; }
.pwa-splash-fill { display: block; width: 8%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7590B8, #5E7BA6); transition: width .4s ease; }
.pwa-splash-word { font-family: 'One Little Font', 'Caveat', cursive; font-size: 2.3rem; line-height: 1; color: var(--periwinkle-deep); }
/* Attribution « Fait par BassinWebFlow » — ancrée en bas de l'écran de démarrage */
.pwa-splash-by { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Poppins', system-ui, sans-serif; font-size: .82rem; color: var(--ink-soft); }
.pwa-splash-by-logo { width: 20px; height: 20px; border-radius: 6px; box-shadow: 0 3px 8px rgba(63,123,255,.28); }
.pwa-splash-by strong { font-weight: 600; color: var(--periwinkle-deep); }
@keyframes pwaBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .pwa-splash-mascot { animation: none; } }

/* ===== FIXES UX MODE APP (audit 2026-07-17) ===== */

/* 1) Clavier virtuel ouvert → la barre du bas se masque (sinon iOS la fait
   « flotter » au milieu de l'écran / remonter au-dessus du clavier). */
html.pwa-kb .app-tabbar { display: none !important; }

/* 2) La barre du bas se comporte comme une vraie tab bar native :
   pas de sélection de texte, pas de menu contextuel iOS au long-press. */
html.pwa-app .app-tabbar,
html.pwa-app .app-tabbar * {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* 3) Gestes « site web » neutralisés : pas de pull-to-refresh accidentel (Android),
   pas d'effet élastique qui fait bouger la barre (iOS 16+). */
html.pwa-app, html.pwa-app body { overscroll-behavior-y: none; }

/* 4) Bouton retour flottant (fiches spot/événement/article — plus de header en app) */
.app-back { display: none; }
html.pwa-app .app-back {
    display: flex; position: fixed; z-index: 1100;
    top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px;
    width: 42px; height: 42px; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); color: var(--ink);
    border-radius: 50%; border: 1px solid rgba(117,144,184,.2);
    box-shadow: 0 6px 18px rgba(31,41,55,.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
html.pwa-app .app-back:active { transform: scale(.94); }

/* 5) Fiches spot/événement : le contenu passait sous l'encoche (Dynamic Island) */
html.pwa-app .spot-fiche { padding-top: env(safe-area-inset-top, 0px); }

/* 6) Footer MASQUÉ en app (demande Théo) : on ne garde QUE la petite signature
   « Fait avec ♥ par BassinWebFlow », tout en bas. Sur la carte, le footer entier
   est déjà display:none (.carte-fullscreen .site-footer) → pas de signature là-bas. */
html.pwa-app .site-footer .footer-grid,
html.pwa-app .site-footer .footer-credits,
html.pwa-app .site-footer .footer-bottom > span:first-child { display: none; }
html.pwa-app .site-footer {
    background: transparent; color: var(--ink-soft);
    padding: 14px 0 calc(12px + env(safe-area-inset-bottom, 0px));
}
html.pwa-app .site-footer .footer-bottom {
    margin: 0; padding: 0; border: 0; gap: 0;
    justify-content: center; text-align: center; font-size: .76rem;
}
html.pwa-app .site-footer .footer-bottom > span:last-child { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
html.pwa-app .site-footer .footer-bottom a { color: var(--periwinkle-deep); font-weight: 600; border-bottom: 1px solid rgba(117,144,184,.3); }
html.pwa-app .site-footer .footer-bottom svg { width: 13px; height: 13px; color: var(--sunset); vertical-align: middle; }
/* Ligne légale compacte : masquée sur le web (footer complet déjà présent), visible en app seulement */
.footer-app-legal { display: none; }
html.pwa-app .site-footer .footer-app-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 7px; }
html.pwa-app .site-footer .footer-app-legal a,
html.pwa-app .site-footer .footer-app-legal button {
    font: inherit; font-size: .72rem; color: var(--ink-soft); opacity: .72;
    background: none; border: 0; padding: 6px 3px; cursor: pointer; text-decoration: none; border-bottom: 0;
}
html.pwa-app .site-footer .footer-app-legal a:active,
html.pwa-app .site-footer .footer-app-legal button:active { opacity: 1; }
html.pwa-app .site-footer .footer-app-legal > *:not(:last-child)::after { content: '·'; margin: 0 9px; opacity: .5; }
/* le gros CTA Instagram avant le footer : redondant sur chaque page en app */
html.pwa-app .nm-igcta { display: none; }
/* le panneau burger est inouvrable en app : on le retire du rendu et de l'a11y */
html.pwa-app .mobile-menu { display: none !important; }

/* 7) Bannière cookies : au-dessus de la barre du bas (elle la recouvrait,
   z-index 99999 dans includes/cookies.php) et sous le splash/modales. */
html.pwa-app .nomade-cookies {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index: 1900 !important;
}

/* ===== App map-first (2026-07-18) : l'app ouvre sur /carte/, l'ancienne home d'app
   (app-home-v5) n'est plus rendue ni gatée ici. Le web garde sa home normale. ===== */
.app-home-variant { display: none; }

/* ===== Bloc « Où sortir ce week-end » — version « Planning » (préprod) =====
   En préprod, page-accueil.php rend UNIQUEMENT le bloc Planning (.weekend-v4) à la place
   de l'original — plus aucune bascule CSS ici. Tous les styles du Planning sont en ligne
   dans partials/weekend-v4.php (donc frais avec le HTML, insensibles au cache CSS externe). */

/* 8) Anti-zoom iOS : un champ sous 16px déclenche un zoom automatique au focus
   (recherches Spots/Sorties à 14,4px, formulaire contact à 15,7px). Règle BWT. */
@media (max-width: 1024px) {
    .search-input,
    .contact-field input,
    .contact-field textarea,
    .contact-field select { font-size: 16px; }
}

/* 9) Recherche plein écran de la carte : le haut passait sous l'encoche en app */
html.pwa-app .carte-panel[data-search="on"] .carte-panel-top {
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
}

/* 10) Fiche détail de la carte : ma règle 70vh (panneau au-dessus de la barre)
    écrasait la « sheet compacte » d'origine → on la rétablit en mode fiche. */
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
    html.pwa-app .carte-fullscreen .carte-panel[data-view="detail"] { height: auto; max-height: 84vh; }
    html.pwa-app .carte-fullscreen .carte-panel[data-view="detail"] { max-height: 84svh; }
}

/* 11) Tablette/desktop installé (>720px) : contrôles de carte au-dessus de la barre */
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape){
    html.pwa-app .carte-fullscreen .carte-panel { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
    html.pwa-app .carte-app .leaflet-control-zoom { margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important; }
    html.pwa-app .carte-app .leaflet-control-attribution { margin-bottom: calc(env(safe-area-inset-bottom, 0px)); }
    html.pwa-app .carte-app .map-legend { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}

/* 12) Toucher « app » partout : pas de délai double-tap ni flash gris au tap */
html.pwa-app a,
html.pwa-app button,
html.pwa-app label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* 13) Tabbar : safe-area latérale (paysage / coins arrondis) */
html.pwa-app .app-tabbar {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* 14) Splash : aucun geste ne doit scroller la page derrière lui */
html.pwa-app #pwaSplash { touch-action: none; overscroll-behavior: contain; }

/* 15) Modale notifs ouverte : le fond ne scrolle plus derrière */
body.nnm-open { overflow: hidden; }

/* 16) Bouton « Cookies » du footer (rouvre la bannière de consentement) — style lien */
.footer-cookies-btn {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
}
.footer-cookies-btn:hover { color: var(--sunset); }

/* — Modale d'opt-in notifications (bottom-sheet) — */
.nnm { position: fixed; inset: 0; z-index: 2000; display: none; align-items: flex-end; justify-content: center; }
.nnm.show { display: flex; }
.nnm-scrim { position: absolute; inset: 0; background: rgba(31,41,55,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: nnmFade .25s ease; }
.nnm-card { position: relative; z-index: 1; width: 100%; max-width: 460px; background: #fff; border-radius: 26px 26px 0 0; padding: 26px 24px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; box-shadow: 0 -12px 40px rgba(31,41,55,.28); animation: nnmUp .32s var(--ease); }
.nnm-ic { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(117,144,184,.14); color: var(--periwinkle-deep); }
.nnm-ic svg { width: 30px; height: 30px; }
.nnm-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
.nnm-card p { color: var(--ink-soft); font-size: .98rem; line-height: 1.5; margin: 0 0 20px; }
.nnm-btn { display: block; width: 100%; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 1rem; padding: 15px; transition: transform .15s var(--ease), filter .15s; }
.nnm-btn-primary { background: linear-gradient(135deg, #7590B8, #5E7BA6); color: #fff; box-shadow: 0 8px 22px rgba(117,144,184,.42); }
.nnm-btn-primary:active { transform: scale(.98); }
.nnm-btn-ghost { background: transparent; color: var(--muted); margin-top: 6px; padding: 12px; }
@keyframes nnmUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes nnmFade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 560px) { .nnm { align-items: center; } .nnm-card { border-radius: 26px; margin: 0 16px; } }


/* Logo du header ×2 en desktop (demande Théo 2026-07-20) : le flex du header l'écrasait à
   ~75px. On l'empêche de rétrécir et on lui donne la largeur voulue — MAIS on NE touche PAS
   la hauteur du conteneur (il reste 56px → la barre de nav garde sa hauteur d'origine).
   L'image est en position:absolute, elle déborde juste verticalement sans grossir le header. */
@media (min-width: 981px) {
  .site-header .nav-wrap .logo-img { flex: 0 0 auto !important; width: 150px !important; }
}

/* ============================================================
   LANDINGS SEO /spots|evenements/{cat}/{ville}/  (page-landing.php)
   ============================================================ */
/* Le thème masque .page-hero p sur mobile ; ici c'est le texte éditorial UNIQUE de la page
   (Google indexe en mobile-first) → on le garde visible sur ces landings. */
.page-hero.slp-hero p { display: block !important; }

.lp-crumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; font-size: .86rem; color: var(--muted); }
.lp-crumb a { color: var(--muted); text-decoration: none; }
.lp-crumb a:hover { color: var(--periwinkle-deep); text-decoration: underline; }
.lp-crumb span[aria-hidden] { opacity: .5; }

.lp-hero-cta { margin: 22px 0 0; display: flex; justify-content: center; }
/* Bouton carte PLAT — aucun glow/halo coloré (les effets de lumière sont RÉSERVÉS aux
   cartes partenaires, cf [[feedback-design-ai-slop]]). */
.lp-mapbtn { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 13px 24px; border-radius: 16px; background: var(--periwinkle-deep); color: #fff; font-weight: 700; font-size: .98rem; text-decoration: none; transition: transform .15s var(--ease), background .15s var(--ease); }
.lp-mapbtn svg { width: 18px; height: 18px; }
.lp-mapbtn:hover { transform: translateY(-1px); background: var(--periwinkle); }
.lp-mapbtn:active { transform: scale(.98); }

.lp-empty { text-align: center; padding: 56px 20px; color: var(--ink); font-size: 1.5rem; line-height: 1.5; font-weight: 500; max-width: 640px; margin: 0 auto; }
.lp-empty-ic { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--sand-light); color: var(--periwinkle-deep); }
.lp-empty-ic svg { width: 30px; height: 30px; }
.lp-empty a { display: inline-block; margin-top: 18px; color: var(--periwinkle-deep); font-weight: 700; }
@media (max-width: 600px) { .lp-empty { font-size: 1.25rem; } }

/* Les blocs annexes d'une landing : les partenaires du bassin, et les adresses
   proches quand la commune est maigre. Un filet en pointilles les detache de la
   liste principale : ce ne sont pas des adresses de la commune, et l'oeil doit
   le comprendre avant de lire le titre. */
.lp-bloc { margin: 46px 0 0; padding-top: 34px; border-top: 1px dashed rgba(117,144,184,.4); }
.lp-bloc-t {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 0 0 6px; font-size: 1.24rem; font-weight: 700; color: var(--ink); text-align: center;
}
.lp-bloc-t .ni { width: 20px; height: 20px; flex: none; color: var(--periwinkle-deep); }
.lp-bloc-x {
    margin: 0 auto 22px; max-width: 620px; text-align: center;
    font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
}
@media (max-width: 720px) {
    .lp-bloc { margin-top: 34px; padding-top: 26px; }
    .lp-bloc-t { font-size: 1.1rem; }
    .lp-bloc-x { font-size: .88rem; text-align: left; }
}

.lp-links { margin: 46px 0 0; display: grid; gap: 30px; }
.lp-links-title { margin: 0 0 14px; font-size: 1.12rem; font-weight: 700; color: var(--ink); text-align: center; }
.lp-links-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lp-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 17px; border: 1px solid rgba(31,41,55,.1); border-radius: 14px; background: var(--sand-light); color: var(--ink); font-size: .93rem; text-decoration: none; transition: border-color .15s, transform .15s var(--ease); }
.lp-link b { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-link:hover { border-color: var(--periwinkle); transform: translateY(-1px); }
.lp-link:active { transform: scale(.98); }

/* ============================================================
   MODIFS 2026-07-21 — partage, pins spots carrés, dates sorties
   ============================================================ */

/* --- Pins SPOTS carrés (vs SORTIES rondes) : distinction immédiate --- */
.pin-spot .pin-disc { border-radius: 9px; }
.map-legend .ml-pin-spot { border-radius: 3px; }
.cf-dot-spot { border-radius: 2px; }

/* --- Bouton « Partager » sur les fiches (single spot / event) --- */
.va-btn-share { gap: 9px; background: #fff; color: var(--ink); border-color: rgba(31,41,55,.16); }
.va-btn-share:hover { border-color: rgba(31,41,55,.32); background: #fff; }
.va-btn-share svg { width: 20px; height: 20px; }
.va-btn-share.is-copied { color: var(--pine); border-color: var(--pine); }

/* --- Bouton « Partager » dans la fiche de la carte (hero, toujours visible) --- */
.cd-hero-right { display: inline-flex; align-items: center; gap: 8px; }
.cd-share {
    position: relative; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.94); color: var(--ink);
    border: none; cursor: pointer;
    box-shadow: 0 3px 8px rgba(31,41,55,.20);
    transition: background .18s var(--ease), transform .18s var(--ease);
}
.cd-share:hover { background: #fff; transform: translateY(-1px); }
.cd-share svg { width: 18px; height: 18px; }
.cd-share.is-copied { background: var(--pine); color: #fff; }
.cd-share.is-copied::after {
    content: 'Lien copié'; position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 9px; border-radius: 8px; white-space: nowrap; z-index: 5;
}

/* --- Date badge sur les cartes du listing des sorties (aligné sur la home) --- */
.event-card .event-card-date {
    flex: 0 0 auto; pointer-events: none;
    background: #fff; border-radius: 10px; padding: 7px 11px 5px;
    text-align: center; min-width: 44px; line-height: 1;
    font-family: var(--font-display);
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.event-card-date strong { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--sunset-deep); letter-spacing: -0.02em; }
.event-card-date span { display: block; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-soft); margin-top: 3px; }
.event-card-date.is-multiday strong { font-size: 1rem; white-space: nowrap; }

/* --- Date des sorties mise en avant (liste mobile + fiche carte) --- */
.nm-row-chip-date { color: var(--sunset-deep); font-weight: 700; }
.cd-meta .cd-meta-date { color: var(--sunset-deep); font-weight: 700; }

/* --- Partage dans la carte d'aperçu de la home : dégager le X de fermeture --- */
.hs-mapcard .cd-hero-right { margin-right: 32px; }

/* --- Carré du filtre « Spots » : blanc + contour bleu (comme les pins et la légende) --- */
.carte-filter .cf-dot-spot { background: #fff; border: 1.5px solid #7590B8; }
.carte-filter.active .cf-dot-spot { background: #fff; border-color: #fff; }

/* ======================================================================
   LIAISON ÉVÉNEMENT ↔ SPOT (fiches) — 2026-07-24
   ====================================================================== */
/* Fiche événement : lien vers la fiche du lieu (spot) */
.va-venue-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
    padding: 7px 13px; border-radius: 999px; text-decoration: none;
    background: rgba(117,144,184,.1); color: var(--periwinkle-deep);
    font-size: .84rem; font-weight: 700;
    border: 1px solid rgba(117,144,184,.3); transition: background .15s ease, transform .15s ease;
}
.va-venue-link:hover { background: rgba(117,144,184,.2); transform: translateX(2px); }
.va-venue-link svg { flex: none; width: 16px; height: 16px; }
.va-venue-link svg:last-child { width: 15px; height: 15px; opacity: .7; }

/* Fiche spot : prochains événements hébergés ici */
.va-events { margin-top: 30px; }
.va-events-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
    font-family: var(--font-display); font-size: 1.2rem; color: var(--ink);
}
.va-events-title svg { width: 20px; height: 20px; color: var(--periwinkle-deep); flex: none; }
.va-events-list { display: flex; flex-direction: column; gap: 10px; }
.va-event-card {
    display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px;
    text-decoration: none; color: inherit; background: #fff;
    border: 1px solid rgba(62,92,118,.14); box-shadow: 0 4px 14px -8px rgba(31,41,55,.25);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.va-event-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(31,41,55,.35); border-color: rgba(117,144,184,.45); }
.va-event-thumb {
    flex: none; width: 62px; height: 62px; border-radius: 12px;
    background-size: cover; background-position: center; background-color: var(--periwinkle);
    display: flex; align-items: center; justify-content: center;
}
.va-event-thumb-empty svg { width: 26px; height: 26px; color: #fff; }
.va-event-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.va-event-name { font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.3; }
.va-event-meta { display: flex; align-items: center; gap: 5px; font-size: .84rem; color: var(--periwinkle-deep); font-weight: 600; }
.va-event-meta svg { width: 14px; height: 14px; flex: none; }
.va-event-chev { flex: none; color: #9aa3af; }

/* Fiche détail de la CARTE : lien lieu (event→spot) + événements ici (spot→events) */
.cd-venue {
    display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px;
    padding: 7px 12px; border-radius: 999px; text-decoration: none;
    background: rgba(117,144,184,.12); color: var(--periwinkle-deep);
    font-size: .82rem; font-weight: 700; border: 1px solid rgba(117,144,184,.3);
    transition: background .15s ease, transform .15s ease;
}
.cd-venue:hover { background: rgba(117,144,184,.22); transform: translateX(2px); }
.cd-venue svg { flex: none; }
.cd-venue svg:first-child { width: 15px; height: 15px; }
.cd-venue svg:last-child { width: 14px; height: 14px; opacity: .65; }
.cd-events { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 7px; }
.cd-events-h { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: var(--periwinkle-deep); }
.cd-events-h svg { width: 15px; height: 15px; flex: none; }
.cd-event {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 11px; border-radius: 12px; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid rgba(62,92,118,.14);
    transition: border-color .15s ease, transform .15s ease;
}
.cd-event:hover { border-color: rgba(117,144,184,.5); transform: translateX(2px); }
.cd-event-n { font-weight: 700; font-size: .88rem; color: var(--ink); line-height: 1.25; }
.cd-event-d { flex: none; font-size: .78rem; font-weight: 600; color: var(--periwinkle-deep); white-space: nowrap; }

/* Badges « Villes » (regroupement par commune) — carte HP + /carte/ (2026-07-24, préprod) */
.lab-commune-icon { background: none; border: none; }
/* 2026-08-02, choix de Théo après essais : les compteurs passent aux ICÔNES
   (épingle = lieu, calendrier = sortie), la distinction carré/rond étant trop
   subtile. Badge remis au passage en conformité DA : coins à 10px et non plus
   une pilule 999px, ombre neutre discrète au lieu d'une ombre à .55 d'opacité,
   et plus de flou d'arrière-plan (coûteux en mobile pour rien). */
.lab-commune {
    display: inline-flex; align-items: center; gap: .6em; transform: translate(-50%, -50%);
    background: var(--white); border: 1px solid rgba(117, 144, 184, .3);
    border-radius: 10px; padding: .54em .85em; box-shadow: var(--shadow-sm);
    font-family: var(--font-sans); font-weight: 800; font-size: 13px; color: var(--ink);
    white-space: nowrap; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.lab-commune:hover { border-color: var(--periwinkle-deep); background: var(--sand-light); }
.lab-commune .lc-name { flex: none; }
/* L'icône dit le TYPE, le chiffre dit COMBIEN. */
.lab-commune .lc-ic { display: inline-flex; align-items: center; gap: .33em; font-size: .92em; font-weight: 800; color: var(--periwinkle-deep); }
.lab-commune .lc-ic svg { width: 1.17em; height: 1.17em; flex: none; }
.lab-commune .lc-sep { width: 1px; height: 1.08em; flex: none; background: rgba(117, 144, 184, .35); }
/* Un badge s'écrit TOUJOURS en entier : le nom de la ville, le nombre de spots et le
   nombre de sorties. Règle posée par Théo le 7 août 2026 : « un badge qui dégrade c'est
   nul, je veux que la taille s'adapte simplement, pas son contenu ». Les anciens replis
   (nom court, total seul, pastille) sont supprimés, ne pas les réintroduire : quand la
   place manque, c'est la font-size posée en ligne par le script qui descend. */
/* CARTE ÉTROITE : le badge passe sur DEUX LIGNES, le nom au-dessus, les compteurs en
   dessous. Rien n'est retiré, c'est la même information dans une autre forme. Sur un
   téléphone, l'étalement des onze communes plus la largeur d'un badge dépassent l'écran :
   en une ligne il fallait descendre la police à 9px pour que tout tienne. Empilé, le
   badge perd un tiers de sa largeur et la police remonte à une taille lisible. La place
   verticale, elle, ne manque pas. */
.lab-commune .lc-cpt { display: inline-flex; align-items: center; gap: .6em; }
.lab-commune.is-empile { flex-direction: column; align-items: center; gap: .18em; padding: .5em .7em; line-height: 1.25; }
/* AMAS DE PINS : deux établissements qui se recouvriraient sont regroupés en un petit
   badge compté, dépliable au clic. Réglé sur 56px de rayon, la demi-somme des largeurs
   des deux plus gros pins : en dessous, deux pins se chevauchent à l'écran.
   Servait uniquement à /carte/ jusqu'au 7 août 2026, la carte de l'accueil regroupe
   maintenant elle aussi : la règle est donc ici et plus dans le gabarit. */
.lab-mini-icon { background: none; border: none; }
/* Hôte de l'amas : sert d'ancrage à la bulle « c'est ce week-end », qui se positionne
   au-dessus du disque comme elle le fait sur un pin. Sans lui, la bulle se calerait sur
   le conteneur Leaflet et partirait ailleurs. */
.lab-mini-hote { position: relative; width: 34px; height: 34px; }
.lab-mini {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 50%; background: var(--periwinkle-deep); color: #fff; border: 2.5px solid #fff;
    box-shadow: 0 8px 18px -6px rgba(31, 41, 55, .55); font-weight: 800; font-size: 13.5px;
}
/* L'amas dit CE QU'IL CONTIENT, avec l'opposition que le thème utilise déjà sur les pins
   et dans la légende : un spot est CREUX (fond blanc, liseré bleu), une sortie est PLEINE
   (fond bleu, liseré blanc). Par défaut la règle ci-dessus donne la forme « sortie ».
   Correction demandée par Théo le 7 août 2026 : jusque-là un amas de spots portait la
   combinaison des sorties et mentait donc sur son contenu. */
.lab-mini-spot { background: #fff; color: var(--periwinkle-deep); border-color: var(--periwinkle-deep); }
/* MÉLANGE des deux : disque blanc à chiffre bleu, entouré d'un anneau dont la part bleue
   vaut la proportion de sorties. On lit d'un coup d'œil « surtout des spots » ou « surtout
   des sorties », sans inventer de couleur ni ajouter d'effet. */
.lab-mini-mixte {
    background: conic-gradient(var(--periwinkle-deep) 0 var(--part, 50%), #fff 0);
    /* Pas de bordure : elle laissait une bande blanche entre le bord et l'arc bleu, qui
       semblait alors flotter. Le liseré est posé À L'EXTÉRIEUR avec outline, qui ne prend
       pas de place, donc l'arc va jusqu'au bord du disque. */
    border: 0; padding: 5px; box-sizing: border-box; outline: 2.5px solid #fff;
}
.lab-mini-mixte > span {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    border-radius: 50%; background: #fff; color: var(--periwinkle-deep); font-size: 12px;
}
/* Un partenaire dans la ville : liseré orange (l'orange leur reste réservé). */
.lab-commune.has-partner { border-color: var(--sunset-deep); }
/* Mobile / PWA : badges plus compacts pour tenir sur une carte étroite */
@media (max-width: 720px) {
    /* L'amas fait 34px : sous le minimum tactile de 40px. On élargit la zone du doigt
       avec un pseudo-élément centré, jamais le dessin. */
    .lab-mini { position: relative; }
    .lab-mini::after {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
    /* Le DESSIN reste compact et doit pouvoir rétrécir : aucune hauteur minimale, sinon
       le badge resterait gros alors que le script lui demande de se faire petit.
       La cible tactile de 44px est assurée par un pseudo-élément centré : on élargit la
       zone du doigt, jamais le badge. */
    .lab-commune { box-sizing: border-box; padding: .42em .62em; gap: .42em; position: relative; }
    .lab-commune .lc-cpt { gap: .45em; }
    .lab-commune .lc-ic { gap: .28em; }
    .lab-commune::after {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
}


/* Pastille de notification « événement ici » sur un pin de SPOT (carte) — 2026-07-24 */
/* Même couleur + forme que les PINS ÉVÉNEMENT : periwinkle plein, rond, liseré blanc. */
.pin-evbadge {
    position: absolute; top: -3px; right: -3px; z-index: 6;
    min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #7590B8; color: #fff; border: 2px solid #fff; border-radius: 50%;
    font-family: var(--font-sans); font-size: 10.5px; font-weight: 800; line-height: 1;
    pointer-events: none;
}
.pin-xl .pin-evbadge { top: -2px; right: -2px; min-width: 20px; height: 20px; font-size: 11.5px; }
/* Pendant l'animation de zoom, on fige la pastille (perf, comme le reste du pin). */
.map-zooming .pin-evbadge { box-shadow: none; }

/* ==================================================================
   CHASSE AUX EFFETS DE LUMIÈRE — glows/halos/blooms SUPPRIMÉS partout
   SAUF sur les cartes/pins PARTENAIRES (seul effet lumineux conservé,
   demande Théo 2026-07-24). Bloc self-contained, identique prod+préprod.
   ================================================================== */
.hero-sun { display: none !important; }                       /* « soleil » flouté du hero */
.btn-shotgun-glow { display: none !important; }               /* bloom violet/rose du bouton Shotgun */
.contact-ig-glow { display: none !important; }                /* bloom flouté de la section Instagram */
.insta-strip::before { background-image: none !important; }   /* halo bleu de la bande Instagram */
/* Ombre COLORÉE de la mascotte du footer → ombre neutre discrète (plus de lueur bleue) */
.mm-mascot { filter: drop-shadow(0 6px 10px rgba(31, 41, 55, .16)) !important; }

/* Ombres MAGENTA Instagram (lueur rose sous les boutons IG) → ombre NEUTRE de profondeur.
   Le dégradé Instagram du bouton est conservé ; seule la lueur colorée disparaît. */
.nav-cta, .nav-cta:hover,
.nav-cta-insta, .nav-cta-insta:hover,
.mm-cta, .mm-cta:hover,
.nm-igcta-btn, .nm-igcta-btn:hover,
.contact-ig, .contact-ig-btn-primary, .contact-ig-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(31, 36, 46, .16) !important;
}


/* =====================================================
   ESSAI PRÉPROD — pop-up « nouvel article » (accueil)
   Rendu par includes/nomade-newpost.php, jamais sur nomademedia.fr.
   ===================================================== */
.np-pop {
    position: fixed; z-index: 1200;
    right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 24px);
    background: var(--white); border: 1px solid rgba(117, 144, 184, .22);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    display: flex;
    opacity: 0; transform: translateY(14px);
    transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.np-pop.is-in { opacity: 1; transform: none; }
.np-pop-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 40px 12px 12px;   /* place à droite pour la croix */
    flex: 1; min-width: 0; text-decoration: none; color: inherit;
}
.np-pop-img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; }
.np-pop-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np-pop-kicker { font-family: var(--font-hand); font-size: 1.05rem; line-height: 1; color: var(--periwinkle-deep); }
.np-pop-title {
    font-family: var(--font-title); font-size: .95rem; font-weight: 700; line-height: 1.25; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.np-pop-cta { font-size: .78rem; font-weight: 700; color: var(--periwinkle-deep); text-decoration: underline; text-underline-offset: 2px; }
.np-pop-close {
    position: absolute; top: 4px; right: 4px;
    width: 40px; height: 40px; border: 0; border-radius: 50%;   /* 40px : cible tactile */
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--muted); cursor: pointer;
}
.np-pop-close:hover { background: rgba(117, 144, 184, .10); }
@media (max-width: 720px) {
    .np-pop { left: 12px; right: 12px; bottom: 12px; width: auto; margin-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Photo insérée dans le corps d'un article (bouton « Photo » du CMS).
   .article-content img/figure ont déjà leur cadre plus haut ; ici la légende. */
.article-content figure img { margin: 0; }
.article-content figcaption {
    margin-top: 8px; font-size: .86rem; line-height: 1.5;
    color: var(--muted); font-style: italic; text-align: center;
}
.article-content figcaption:empty { display: none; }   /* légende laissée vide */

/* ============================================================
   PASS NOMADE : statistiques des espaces membre et partenaire
   (2026-08-06). Graphiques en CSS pur, aucune bibliotheque.
   ============================================================ */
.nst-tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.nst-tuile { background: var(--white); border: 1px solid rgba(117,144,184,.24); border-radius: 14px; padding: 16px; text-align: center; }
.nst-tuile strong { display: block; font-family: var(--font-title); font-size: 1.7rem; font-weight: 700; color: var(--periwinkle-deep); line-height: 1.1; }
.nst-tuile span { display: block; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-top: 4px; line-height: 1.35; }
.nst-evo { display: inline-block; margin-top: 7px; font-style: normal; font-family: var(--font-sans); font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 8px; }
.nst-evo.is-haut { background: rgba(62,92,74,.14); color: var(--pine); }
.nst-evo.is-bas { background: rgba(224,138,74,.16); color: var(--sunset-deep); }

.nst-carte { background: var(--white); border: 1px solid rgba(117,144,184,.24); border-radius: 14px; padding: 18px; margin-bottom: 12px; }
.nst-carte-t { font-family: var(--font-sans); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.nst-duo { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Barres verticales */
.nst-barres { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 130px; }
.nst-barre { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.nst-barre-v { font-family: var(--font-sans); font-size: .76rem; font-weight: 800; color: var(--ink); }
.nst-barre-fut { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.nst-barre-fut i { display: block; width: 100%; background: var(--periwinkle-deep); border-radius: 6px 6px 3px 3px; min-height: 4px; }
.nst-barre-l { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; color: var(--muted); }
.nst-barres-fin { height: 105px; gap: 5px; }
.nst-barres-fin .nst-barre-fut i { border-radius: 4px 4px 2px 2px; }

/* Barres horizontales (creneaux) */
.nst-tranches { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.nst-tranches li { display: grid; grid-template-columns: 82px 1fr 34px; align-items: center; gap: 10px; }
.nst-tr-l { font-family: var(--font-sans); font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.nst-tr-b { height: 10px; background: rgba(117,144,184,.18); border-radius: 5px; overflow: hidden; }
.nst-tr-b i { display: block; height: 100%; background: var(--periwinkle-deep); border-radius: 5px; min-width: 3px; }
.nst-tr-n { font-family: var(--font-sans); font-size: .82rem; font-weight: 800; color: var(--ink); text-align: right; }

/* ==========================================================================
   TABLEAU DE BORD : la grammaire commune aux deux espaces.

   Trois niveaux de lecture, et pas un de plus :
     1. la reponse principale, en tres gros, avec sa courbe ;
     2. trois indicateurs de suivi, alignes, chacun avec son contexte ;
     3. des panneaux de detail, tous au meme format.
   Les chiffres sont en chasse fixe (tabular-nums) pour rester alignes d'une
   ligne a l'autre, et la couleur ne sert qu'a signaler une hausse ou une baisse.
   ========================================================================== */

.nst-hero {
    display: grid; grid-template-columns: 1fr; gap: 18px;
    background: var(--white); border: 1px solid rgba(117,144,184,.26);
    border-radius: 16px; padding: 22px 22px 18px; margin-bottom: 12px;
}
.nst-hero-l { display: block; font-family: var(--font-sans); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nst-hero-n {
    display: block; font-family: var(--font-title); font-size: clamp(2.6rem, 7vw, 3.6rem);
    font-weight: 700; color: var(--ink); line-height: 1; margin: 6px 0 2px;
    font-variant-numeric: tabular-nums;
}
.nst-hero-u { display: block; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
/* Surtout pas de flex ici : la ligne contient une phrase, et chaque mot
   deviendrait un bloc separe avec un espace force entre eux. */
.nst-hero-evo { font-family: var(--font-sans); font-size: .84rem; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }
.nst-hero-evo .nst-evo { margin: 0 6px 0 0; vertical-align: middle; }
.nst-kpi-c .nst-evo { margin: 0 5px 0 0; vertical-align: middle; font-size: .7rem; padding: 2px 7px; }
.nst-hero-courbe { position: relative; }
.nst-hero-legende { display: block; text-align: right; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; color: var(--muted); margin-top: 6px; }

/* La courbe : etiree en largeur, hauteur fixe, trait d'epaisseur constante. */
.nst-courbe { position: relative; }
.nst-courbe svg { display: block; width: 100%; height: 96px; }
.nst-courbe-x { position: relative; height: 15px; margin-top: 2px; }
.nst-courbe-x span {
    position: absolute; transform: translateX(-50%); white-space: nowrap;
    font-family: var(--font-sans); font-size: .68rem; font-weight: 600; color: var(--muted);
}
.nst-courbe-x span:first-child { transform: none; }
.nst-courbe-x span:last-child { transform: translateX(-100%); }

/* Trois indicateurs de suivi, jamais plus : au-dela, plus personne ne lit. */
.nst-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.nst-kpi {
    background: var(--white); border: 1px solid rgba(117,144,184,.26);
    border-radius: 14px; padding: 16px 16px 14px; min-width: 0;
}
.nst-kpi-l { display: block; font-family: var(--font-sans); font-size: .74rem; font-weight: 700; color: var(--muted); }
.nst-kpi-n {
    display: block; font-family: var(--font-title); font-size: 1.9rem; font-weight: 700;
    color: var(--periwinkle-deep); line-height: 1.1; margin: 4px 0 3px;
    font-variant-numeric: tabular-nums;
}
.nst-kpi-c { display: block; font-family: var(--font-sans); font-size: .76rem; color: var(--muted); line-height: 1.4; }

/* Panneaux de detail : un seul format, pour que l'oeil n'ait rien a apprendre. */
.nst-panneau {
    background: var(--white); border: 1px solid rgba(117,144,184,.26);
    border-radius: 14px; padding: 18px; margin-bottom: 12px;
}
.nst-panneau-t { font-family: var(--font-sans); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.nst-panneau-cote { margin-top: 12px; }

/* Classement nominatif compact (les habitues). */
.nst-rangs-nom { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nst-rangs-nom li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px dashed rgba(117,144,184,.22); min-height: 42px; box-sizing: border-box;
}
.nst-rangs-nom li:last-child { border-bottom: 0; }
.nst-rn-nom { font-family: var(--font-sans); font-size: .88rem; font-weight: 700; color: var(--ink); }
.nst-rn-n { font-family: var(--font-title); font-size: 1rem; font-weight: 700; color: var(--periwinkle-deep); font-variant-numeric: tabular-nums; }

@media (min-width: 620px) {
    .nst-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 26px; }
}

/* Tendance courte : le chiffre de la semaine et son evolution, cote a cote. */
.nst-tendance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.nst-tend-chiffre strong { display: block; font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: var(--periwinkle-deep); line-height: 1.1; }
.nst-tend-chiffre span { display: block; font-family: var(--font-sans); font-size: .84rem; font-weight: 600; color: var(--muted); }
.nst-tend-evo { text-align: right; }
.nst-tend-evo span { display: block; font-family: var(--font-sans); font-size: .78rem; color: var(--muted); margin-top: 4px; }

/* Trente barres cote a cote : elles doivent etre fines, et sans valeur ecrite
   au-dessus, sinon les chiffres se chevauchent. */
.nst-barres-30 { gap: 3px; height: 110px; }
.nst-barres-30 .nst-barre-v { display: none; }
.nst-barres-30 .nst-barre-l { font-size: .62rem; white-space: nowrap; }

/* Classement horizontal (adresses les plus visitees) : le nom peut etre long,
   donc il occupe sa propre ligne sur petit ecran et une colonne au-dela. */
.nst-rangs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nst-rang { display: grid; grid-template-columns: 1fr 34px; grid-template-areas: "l n" "b b"; align-items: center; gap: 5px 10px; }
.nst-rang-l { grid-area: l; font-family: var(--font-sans); font-size: .86rem; font-weight: 700; color: var(--ink); }
.nst-rang-v { grid-area: n; font-family: var(--font-sans); font-size: .82rem; font-weight: 800; color: var(--muted); text-align: right; }
.nst-rang-piste { grid-area: b; height: 10px; background: rgba(117,144,184,.18); border-radius: 5px; overflow: hidden; }
.nst-rang-piste i { display: block; height: 100%; background: var(--periwinkle-deep); border-radius: 5px; min-width: 3px; }

/* Journal et divers */
.nst-journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nst-journal li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(117,144,184,.24); min-height: 44px; box-sizing: border-box; }
.nst-journal li:last-child { border-bottom: 0; }
.nst-j-nom { font-family: var(--font-sans); font-weight: 700; font-size: .9rem; color: var(--ink); }
.nst-j-rem { font-family: var(--font-sans); font-weight: 800; font-size: .76rem; color: #fff; background: var(--sunset-deep); border-radius: 7px; padding: 2px 8px; }
.nst-j-date { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.nst-phrase { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.nst-phrase strong { color: var(--ink); }
.nst-note { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; line-height: 1.5; }
.nst-note-alerte { color: var(--sunset-deep); font-weight: 600; }
.nst-vide { background: var(--white); border: 1px solid rgba(117,144,184,.24); border-radius: 14px; padding: 24px; text-align: center; }
.nst-vide p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 .5rem; }
.nst-vide p:last-child { margin-bottom: 0; }
.nst-vide strong { color: var(--ink); }

@media (min-width: 620px) {
    .nst-tuiles { grid-template-columns: repeat(4, 1fr); }
    .nst-duo { grid-template-columns: 1fr 1fr; }
}

/* Accès de démonstration (préprod) : encadré discret sous les formulaires. */
.cnx-demo { margin: 1.4rem 0 0; padding: 14px 16px; border: 1px dashed rgba(117,144,184,.45); border-radius: 12px; background: var(--sand-light); }
.cnx-demo-t { font-family: var(--font-sans); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.cnx-demo p { font-size: .84rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 .7rem; }
.cnx-demo code { background: var(--white); border: 1px solid rgba(117,144,184,.3); border-radius: 6px; padding: 2px 7px; font-size: .84rem; font-weight: 700; color: var(--ink); }
.cnx-demo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* Le rappel admin/admin se pose SOUS les boutons : la regle generique
   .cnx-demo p ne donne qu'une marge basse, il collerait aux boutons. */
.cnx-demo p.cnx-demo-p { margin: .7rem 0 0; font-size: .8rem; }
.cnx-demo-btn { flex: 1; min-width: 130px; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(117,144,184,.5); border-radius: 10px; background: var(--white); cursor: pointer; font-family: var(--font-sans); font-size: .85rem; font-weight: 700; color: var(--ink); }
.cnx-demo-btn:hover { background: var(--periwinkle-deep); border-color: var(--periwinkle-deep); color: #fff; }

/* Bouton Google officiel : on lui laisse la largeur de la carte. */

/* Rappel de la formule choisie sur la page de connexion. */
.cnx-formule { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--sand-light); border: 1px solid rgba(117,144,184,.3); border-radius: 12px; padding: 12px 14px; margin-bottom: 1.2rem; }
.cnx-formule-l { font-family: var(--font-sans); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); width: 100%; }
.cnx-formule-v { display: flex; align-items: baseline; gap: 8px; flex: 1; }
.cnx-formule-v strong { font-family: var(--font-title); font-size: 1.1rem; color: var(--ink); }
.cnx-formule-v em { font-style: normal; font-family: var(--font-sans); font-size: .88rem; font-weight: 700; color: var(--periwinkle-deep); }
.cnx-formule-b { min-height: 40px; padding: 8px 14px; border: 1px solid rgba(117,144,184,.45); border-radius: 9px; background: var(--white); cursor: pointer; font-family: var(--font-sans); font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.cnx-formule-b:hover { background: var(--periwinkle-deep); border-color: var(--periwinkle-deep); color: #fff; }

/* ==========================================================================
   TROIS NIVEAUX DE MISE EN AVANT
   Ajoutes le 2026-08-07.

   Le marquage partenaire est un CONTOUR ORANGE NET, sans halo : c'est la
   decision posee plus haut dans cette feuille, en !important, conforme a la
   regle du projet (aucun effet de lumiere). Les trois niveaux se distinguent
   donc par l'epaisseur et la teinte du trait, jamais par une ombre coloree.

     .is-pass            l'etablissement fait une remise aux membres et ne paie
                         rien : trait fin, bleu Nomade. Un merci, pas une pub.
     .is-partner         mise en avant payante : 3 px orange. Inchange.
     .is-partner.is-max  il paie ET il fait une remise : 4 px orange profond.
                         Il passe aussi en tete de liste, et son etiquette dit
                         les deux choses d'un coup.
   ========================================================================== */

.spot-card.is-pass, .event-card-v2.is-pass, .weekend-mini.is-pass,
.evmag-tile.is-pass, .evmag-card.is-pass {
    outline: 1.5px solid rgba(117, 144, 184, .6); outline-offset: -2px;
}
.spot-card.is-pass:hover, .event-card-v2.is-pass:hover, .weekend-mini.is-pass:hover,
.evmag-tile.is-pass:hover, .evmag-card.is-pass:hover {
    outline-color: var(--periwinkle-deep);
}

/* Le cumul : UN SEUL contour, en degrade continu du bleu vers l'orange
   (demande de Theo : « pas un contour orange et apres bleu »). C'est la seule
   exception admise a la regle « aucun effet de lumiere » du projet, et elle ne
   vaut que pour un etablissement qui paie sa mise en avant ET remise le Pass.

   Teintes en dur : --sunset et --sunset-deep sont remappees sur le bleu Nomade
   plus bas dans la feuille, la variable donnerait deux fois du bleu. */
.spot-card.is-max, .event-card-v2.is-max, .weekend-hero.is-max,
.weekend-mini.is-max, .evmag-tile.is-max, .evmag-card.is-max {
    outline: none !important;
    /* La lueur suit le meme axe que l'anneau : bleu en haut a gauche, orange en
       bas a droite. drop-shadow epouse la forme arrondie de la carte et n'est
       pas rogne par overflow:hidden, contrairement a un pseudo-element. */
    filter:
        drop-shadow(-5px -5px 11px rgba(117, 144, 184, .85))
        drop-shadow(5px 5px 11px rgba(244, 162, 97, .85));
    transition: transform .4s var(--ease), filter .3s var(--ease);
}
.spot-card.is-max:hover, .event-card-v2.is-max:hover, .weekend-hero.is-max:hover,
.weekend-mini.is-max:hover, .evmag-tile.is-max:hover, .evmag-card.is-max:hover {
    filter:
        drop-shadow(-8px -8px 18px rgba(117, 144, 184, 1))
        drop-shadow(8px 8px 18px rgba(244, 162, 97, 1));
}
/* L'anneau lui-meme, pose sur le scrim : c'est le seul enfant pleine carte dont
   le ::after soit libre. Le masque evide le centre et ne laisse que la bande. */
.is-max .spot-scrim::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--radius-lg);
    padding: 3px;
    background: linear-gradient(135deg,
        #7590B8 0%, #8B8DB0 30%, #C4949A 62%, #F4A261 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
/* La carte du carrousel partenaires. Elle a une vraie bordure et un fond blanc
   poses en CSS : on peint donc le degrade directement dans la bordure, en
   empilant deux fonds, le blanc arrete a la zone interieure et le degrade
   arrete au bord. Pas besoin de pseudo-element ici. */
.partner-card.is-max {
    border-color: transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #7590B8 0%, #8B8DB0 30%, #C4949A 62%, #F4A261 100%) border-box;
    filter:
        drop-shadow(-5px -5px 11px rgba(117, 144, 184, .8))
        drop-shadow(5px 5px 11px rgba(244, 162, 97, .8));
}
.partner-card.is-max:hover {
    filter:
        drop-shadow(-8px -8px 18px rgba(117, 144, 184, 1))
        drop-shadow(8px 8px 18px rgba(244, 162, 97, 1));
}
/* La seconde etiquette se pose sous la premiere, dans le bleu du Pass. Les deux
   passent en rectangle arrondi : la pilule a 50px etait un reste, et la regle
   du projet l'interdit. */
.partner-ribbon { border-radius: 9px; }
.partner-ribbon.is-pass {
    top: 50px; background: #7590B8; color: #fff; letter-spacing: .04em;
}

/* Le halo deborde sur les cartes voisines : on remonte celle-ci d'un cran. */
.spot-card.is-max, .event-card-v2.is-max, .evmag-tile.is-max { z-index: 2; }

/* L'etiquette du niveau pass : bleu Nomade, sobre, sans degrade ni ombre
   portee. Elle annonce un avantage au visiteur, pas une reclame. */
.partner-chip.is-pass {
    background: var(--periwinkle-deep); box-shadow: none;
    letter-spacing: .06em; text-transform: none; font-size: .68rem;
}
/* Le cumul garde le degrade de la carte partenaire et dit les deux choses. */
.partner-chip.is-max { letter-spacing: .04em; text-transform: none; }

/* Fiche spot : la pastille du Pass, en bleu Nomade. Quand les deux coexistent,
   la seconde se pose sous la premiere plutot que par-dessus. */
.va-partner.is-pass { background: #7590B8; color: #fff; }
.va-partner + .va-partner { top: 50px; }
/* Le cumul en mobile. La carte devient une ligne blanche et .spot-scrim, qui
   porte l'anneau en desktop, passe en display:none : on repeint donc le degrade
   dans la bordure de la carte elle-meme. Deux fonds empiles, le blanc arrete a
   la zone interieure et le degrade arrete au bord.
   !important obligatoire : l'image de fond est posee en style inline par le JS,
   et seul un !important d'auteur passe devant un style inline. */
@media (max-width: 720px) {
    .spot-card.is-max {
        border: 3px solid transparent;
        background:
            linear-gradient(#fff, #fff) padding-box,
            linear-gradient(135deg, #7590B8 0%, #8B8DB0 30%, #C4949A 62%, #F4A261 100%) border-box !important;
    }
    /* Le halo reste, en plus discret : sur un ecran etroit les cartes se
       touchent presque et une lueur trop large baverait sur la voisine. */
    .spot-card.is-max {
        filter:
            drop-shadow(-3px -3px 7px rgba(117, 144, 184, .8))
            drop-shadow(3px 3px 7px rgba(244, 162, 97, .8));
    }
    /* Deux etiquettes l'une sous l'autre plutot que cote a cote : la ligne est
       etroite, elles se chevaucheraient. */
    .spot-meta-row .partner-chip { margin-bottom: 3px; }
}
/* La ligne mobile porte les memes deux marqueurs que la carte : l'orange dit la
   mise en avant payante, le bleu dit la remise faite aux membres. La casse
   normale la distingue du « PARTENAIRE » en capitales. */
.nm-row-partner.is-pass {
    background: #7590B8; text-transform: none;
    font-weight: 700; letter-spacing: .01em;
}


/* ===== PARTENAIRES : APERCU ENCADRE (piste 3, choix de Théo le 7 aout 2026) =====
   Une seule ecriture pour toutes les mises en avant payantes du site : bordure chaude
   et ombre teintee. C'est la SEULE exception d'effet colore de la charte, justement
   reservee aux partenaires. L'orange est ecrit en dur : la variable
   --sunset a ete rebrandee en bleu sur tout le site, alors que les pins partenaires
   de la carte sont restes orange. On suit la carte, pas la variable. Avant, le cerclage etait sombre (gris d'encre), ce qui ne
   se distinguait pas d'une carte ordinaire survolee.
   Les polices suivent les variables du theme : --font-sans pour les libelles et les
   valeurs, --font-hand reste sur les titres, aucune police en dur. */

.spot-card.is-partner,
.event-card-v2.is-partner,
.evmag-card.is-partner,
.evmag-tile.is-partner,
.weekend-hero.is-partner,
.weekend-mini.is-partner,
.hp3-card.is-partner {
    outline: 2px solid #F4A261;
    outline-offset: -2px;
    box-shadow: 0 0 0 5px rgba(244, 162, 97, .16), 0 14px 32px -12px rgba(224, 138, 74, .48);
}
.spot-card.is-partner:hover,
.event-card-v2.is-partner:hover,
.evmag-card.is-partner:hover,
.weekend-hero.is-partner:hover,
.weekend-mini.is-partner:hover,
.hp3-card.is-partner:hover {
    box-shadow: 0 0 0 7px rgba(244, 162, 97, .22), 0 22px 48px -14px rgba(224, 138, 74, .58);
}

/* Les apercus des deux cartes (page /carte/ et hero de l'accueil). La classe est posee
   en JS sur le conteneur au moment ou la fiche s'ouvre. */
.carte-detail.is-partner .cd-body,
.hs-mapcard.is-partner {
    box-shadow: inset 0 0 0 2px #F4A261, 0 14px 34px -14px rgba(224, 138, 74, .5);
}
.carte-detail.is-partner .cd-body { border-radius: 0 0 14px 14px; }

/* L'etiquette sur la photo : rectangle arrondi et plein, plus la pilule translucide
   a 999px d'avant, interdite par la charte et illisible sur une photo claire. */
.cd-partner {
    background: #E08A4A !important;
    color: #fff !important;
    border-radius: 9px !important;
    font-family: var(--font-sans);
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 9px !important;
    backdrop-filter: none !important;
}
.cd-partner .ni { color: #fff; }

/* Meme correction pour les etiquettes des cartes du site. */
.partner-chip { border-radius: 9px !important; font-family: var(--font-sans); }
.partner-chip.is-pass { background: var(--periwinkle-deep); }

/* Le bloc « ce que vous gagnez », sous les informations de l'apercu. Separateur en
   pointilles, jamais un bord colore d'un seul cote. */
.cd-avantage {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line, #E7E3DC);
}
.cd-avantage-t {
    display: block;
    font-family: var(--font-sans);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #E08A4A;
    margin-bottom: 3px;
}
.cd-avantage-v {
    display: block;
    font-family: var(--font-sans);
    font-size: .92rem;
    font-weight: 800;
    color: var(--ink);
}
.cd-avantage-v em { font-style: normal; font-weight: 500; font-size: .76rem; color: var(--ink-soft); }


/* ===== APERCU : COLONNE AJUSTEE (desktop) ET CADRE RETIRE (mobile) =====
   Théo, 7 aout 2026. */

/* Desktop : le panneau se referme sur la hauteur de l'apercu. La regle d'origine posait
   bien max-height mais son bottom:auto se perdait dans la cascade, d'ou jusqu'a 390px de
   vide sous la fiche sur un ecran haut. On force les deux, le plafond reste pour les
   fiches longues qui restent defilables. */
@media (min-width: 1025px), (min-width: 721px) and (orientation: landscape){
    /* ATTENTION : vh IGNORE le zoom du theme. Le theme reduit tout le desktop par
       html{zoom:.67 a .92} ; 100vh vaut la hauteur VISUELLE de la fenetre, alors que
       la mise en page travaille dans un espace divise par ce facteur. Sur une fenetre
       de portable de 660px, l'espace de mise en page fait 943px mais
       calc(100vh - 152px) n'en calculait que 508 : l'apercu etait plafonne 38% trop
       bas et TOUS les apercus devaient etre defiles, alors que la place existait
       (constate le 8 aout 2026). On divise donc par le facteur, expose en --nmz.
       Sans zoom (mobile, tablette) var() retombe sur 1 et la formule est inchangee. */
    .carte-panel[data-view="detail"] {
        bottom: auto !important;
        height: auto !important;
        max-height: calc(100vh / var(--nmz, 1) - 152px) !important;
    }
    .carte-panel[data-view="detail"] .carte-detail { flex: 0 1 auto !important; }
}

/* Mobile : pas de cadre autour de l'apercu, l'etiquette « Partenaire » posee sur la
   photo suffit. Sur une feuille qui occupe tout l'ecran, le cadre enferme. */
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
    .carte-detail.is-partner .cd-body { box-shadow: none !important; }
}


/* ===== TELEPHONE : LA RECHERCHE ET LES FILTRES SUR LA CARTE =====
   Comme dans les applications de navigation : la recherche flotte en haut, les filtres
   defilent juste en dessous, et la feuille du bas ne contient QUE la liste. Chaque
   geste a son endroit, l'horizontale en haut, la verticale en bas, ils ne se marchent
   plus dessus. Théo, 8 aout 2026. */
.carte-haut { display: none; }

@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) and (orientation: portrait) {
    .carte-haut {
        display: flex; flex-direction: column; gap: 8px;
        position: absolute; z-index: 40;
        /* Sous le header fixe, dont la hauteur est mesuree en JS (--nm-header). */
        top: calc(var(--nm-header, 84px) + 10px); left: 12px; right: 12px;
        pointer-events: none;
    }
    /* Le conteneur laisse passer les clics vers la carte, mais TOUT ce qu'il porte les
       recoit. Sans la ligne qui suit, la bande de filtres heritait du
       `pointer-events: none` pose sur .carte-bas par la mise en page d'ordinateur :
       on pouvait TAPER un filtre (les boutons, eux, sont a « auto ») mais pas SAISIR
       la bande pour la faire glisser. C'est ce qui rendait le defilement impossible
       malgre un CSS de defilement correct. */
    .carte-haut > *,
    .carte-haut .carte-bas,
    .carte-haut .map-legend,
    .carte-haut .carte-subfilters,
    .carte-haut .map-legend * ,
    .carte-haut .carte-subfilters * { pointer-events: auto !important; }

    /* La recherche : une barre pleine largeur, posee sur la carte. */
    .carte-haut .carte-search-row { margin: 0; display: flex; gap: 8px; }
    .carte-haut .carte-search {
        flex: 1 1 auto; min-width: 0; height: 46px;
        background: #fff; border-radius: 13px;
        box-shadow: 0 6px 20px -8px rgba(31,41,55,.34);
        border: 1px solid rgba(31,41,55,.08);
    }
    .carte-haut .carte-search input { font-size: 16px; }   /* 16px : iOS ne zoome pas */

    /* Les filtres : une bande qui defile, rien d'autre autour d'elle.
       Le bloc arrive en position ABSOLUE, heritee de la mise en page d'ordinateur ou il
       flotte en bas de la carte. Dans le bandeau il doit rentrer dans le flux, sinon il
       en sort par le bas et le bandeau reste haut comme la seule recherche. */
    .carte-haut .carte-bas {
        position: static !important;
        left: auto; right: auto; bottom: auto; top: auto;
        width: 100%; max-width: 100%; min-width: 0;
        margin: 0; display: flex; flex-direction: column; gap: 6px;
        align-items: stretch;
    }
    .carte-haut .map-legend {
        display: flex; flex-wrap: nowrap; gap: 6px;
        width: 100%; max-width: 100%; min-width: 0;
        /* ALIGNEE A GAUCHE, JAMAIS CENTREE. Un conteneur qui defile et dont le contenu
           est centre deborde des DEUX cotes, et le debordement de gauche est
           inatteignable : `scrollLeft` vaut deja 0. C'est ce qui mettait « Tout » a
           x = -140 sur tablette, ni visible ni joignable (Théo, 8 aout 2026). */
        justify-content: flex-start;
        overflow-x: auto; scrollbar-width: none;
        touch-action: pan-x; overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding: 1px;
    }
    .carte-haut .map-legend::-webkit-scrollbar { display: none; }
    .carte-haut .ml-item {
        /* min-width remis a zero : la mise en page d'ordinateur impose des cases de
           172px pour que la barre se lise comme une barre. Quatre cases de 172px ne
           tiennent pas dans un bandeau de telephone. */
        flex: 0 0 auto; width: auto; min-width: 0; white-space: nowrap;
        min-height: 40px; padding: 0 13px;
        background: #fff; border: 1px solid rgba(31,41,55,.08);
        box-shadow: 0 4px 14px -6px rgba(31,41,55,.3);
    }
    .carte-haut .ml-item.is-active { background: var(--periwinkle-deep); color: #fff; }
    .carte-haut .ml-item.is-active .ml-pin { filter: brightness(1.6); }

    /* Les categories, quand un type est choisi : meme bande, juste en dessous. */
    .carte-haut .carte-subfilters {
        display: flex; flex-wrap: nowrap; gap: 6px; margin: 0;
        overflow-x: auto; scrollbar-width: none;
        touch-action: pan-x; overscroll-behavior-x: contain;
        padding: 1px;
    }
    .carte-haut .carte-subfilters::-webkit-scrollbar { display: none; }
    /* Un display: flex ecrase l'attribut hidden : les deux groupes de categories,
       masques par le script, occupaient 86px invisibles dans le bandeau. */
    .carte-haut .carte-subfilters[hidden] { display: none !important; }
    .carte-haut .carte-subfilter {
        flex: 0 0 auto; min-height: 38px; white-space: nowrap;
        background: #fff; color: var(--ink);
        border: 1px solid rgba(31,41,55,.08);
        box-shadow: 0 4px 14px -6px rgba(31,41,55,.3);
    }
    /* La categorie choisie etait BLANCHE SUR BLANC : mon fond blanc ecrasait le sien,
       mais pas sa couleur de texte, elle aussi blanche. Elle disparaissait purement. */
    .carte-haut .carte-subfilter.active {
        background: var(--periwinkle-deep); color: #fff;
        border-color: var(--periwinkle-deep);
    }

    /* « Pres de moi » et « Ce week-end » : une bande de plus, meme traitement que les
       autres. Ils etaient coinces sur la ligne du resume du tiroir, coupes au bord. */
    /* Dans la MEME bande que les types : le conteneur des rapides ne fait plus que
       transporter ses boutons, il ne defile plus lui-meme. */
    .carte-haut .map-legend .carte-quick {
        display: contents;
    }
    /* « Partenaires » existait DEUX FOIS dans la bande : une fois comme type, une fois
       comme filtre rapide. Le doublon etait deja masque ailleurs, ma regle de bandeau
       le faisait reapparaitre. C'est le doublon signale par Théo. */
    .carte-haut .carte-qf[data-quick="partner"] { display: none !important; }
    /* `:not(.active)` OBLIGATOIRE, sinon la pastille allumee devient INVISIBLE.
       Signale par Théo le 15 aout 2026 : « quand on a active Pres de moi, j'arrive
       plus a activer les filtres ».
       Mesure : cette regle et `.carte-qf.active` ont la MEME specificite (deux
       classes chacune). A egalite, la derniere ecrite gagne, et c'est celle-ci.
       Elle imposait donc son fond blanc a la pastille active, sans toucher a sa
       couleur de texte, restee blanche : blanc sur blanc, le libelle disparaissait.
       On appuyait sur « Pres de moi », la pastille se vidait, et on en concluait
       que le filtre ne marchait pas, alors qu'il marchait tres bien.
       Le fond neutre ne concerne donc plus que les pastilles eteintes. */
    .carte-haut .carte-qf:not(.active) {
        background: #fff; border: 1px solid rgba(31,41,55,.08);
    }
    .carte-haut .carte-qf {
        flex: 0 0 auto; white-space: nowrap; min-height: 38px;
        box-shadow: 0 4px 14px -6px rgba(31,41,55,.3);
    }

    /* La ligne du resume ne porte plus que le compte et le chevron : les deux boutons
       rapides l'encombraient et se faisaient couper. */
    .a-barre-haute .carte-panel-top .carte-quick,
    .a-barre-haute .carte-panel-top .carte-chips { display: none; }

    /* En recherche, le resume disparait aussi : il se retrouvait ecrase a droite du
       champ, sur deux ou trois lignes. */
    body.carte-searching .carte-kicker { display: none !important; }

    /* Les deux boutons de la carte descendent sous le bandeau. */
    /* En bas a droite, empiles au-dessus du tiroir, dans la zone du pouce. Colles
       sous le bandeau ils recouvraient les filtres. Ils suivent la hauteur du tiroir,
       donc ils remontent quand il s'ouvre. */
    .a-barre-haute .carte-fit,
    .a-barre-haute .carte-locate {
        transform: none;
        position: absolute; right: 12px; left: auto; z-index: 35;
        top: auto;
    }
    .a-barre-haute .carte-locate { bottom: calc(var(--peek, 52px) + 26px); }
    .a-barre-haute .carte-fit    { bottom: calc(var(--peek, 52px) + 78px); }
    /* Tiroir ouvert : ils se rangent au-dessus de lui plutot que de passer dessous. */
    /* Tiroir ouvert : les deux boutons s'effacent. On passe par l'etat porte par le
       conteneur, pose en JS : les boutons sont AVANT le panneau dans le HTML, aucun
       selecteur de frere ne pouvait les atteindre depuis lui. */
    .a-barre-haute[data-panneau="ouvert"] .carte-locate,
    .a-barre-haute[data-panneau="ouvert"] .carte-fit {
        opacity: 0; pointer-events: none; transition: opacity .18s ease;
    }

    /* La barre du bas ne s'escamote plus : un element qui disparait sans laisser de
       trace ne se retrouve pas. Elle se replie, c'est tout. */
    .a-barre-haute .carte-masquer { display: none !important; }

    /* RECHERCHE : le bandeau s'efface. Le panneau passe en plein ecran par-dessus la
       carte ; garder le bandeau flottant dessus donnait deux interfaces empilees, avec
       le champ, les filtres et la liste les uns sur les autres. */
    body.carte-searching .carte-haut { display: none !important; }

    /* L'onglet qui replie la COLONNE laterale n'a plus d'objet : il n'y a plus de
       colonne, mais une feuille du bas. Il restait visible entre deux filtres. */
    .a-barre-haute .carte-panel-toggle { display: none !important; }

    /* La feuille du bas, aussi sur tablette en portrait.
       La transformation du panneau en feuille vit dans un bloc @media 720px que je
       n'avais pas elargi : la tablette en portrait recevait le bandeau du haut ET la
       colonne laterale de l'ordinateur, deux mises en page a la fois. On la pose ici,
       sur la classe qui marque justement les ecrans a bandeau. */
    .a-barre-haute .carte-panel:not([data-search="on"]) {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; max-width: 100%;
        height: 74vh; max-height: 74vh;
        border-radius: 22px 22px 0 0; border-bottom: none;
    }
    /* En recherche, le panneau prend TOUT l'ecran. Ma regle ci-dessus, de meme
       specificite mais posee plus tard dans le fichier, le maintenait a 74vh : le tiers
       du bas laissait voir la carte, ce qui donnait le « trou » sous la liste.
       Le bas est ancre par `bottom`, jamais par une hauteur : le script cale le haut
       sur la zone visible et laisse le bas descendre tout seul jusqu'au bord de la
       page. Un bord calcule est un bord qui peut tomber a cote. */
    .a-barre-haute .carte-panel[data-search="on"] {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        width: auto; height: auto; max-height: none;
        border-radius: 0; border: none;
        display: flex; flex-direction: column; overflow: hidden;
    }
    /* La ligne du haut ne porte plus QUE la recherche. Le titre, les pastilles et le
       chevron y prenaient de la largeur, et « Annuler » finissait hors de l'ecran. */
    .a-barre-haute .carte-panel[data-search="on"] .carte-panel-top {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 12px; min-height: 0; flex: 0 0 auto; cursor: default;
    }
    .a-barre-haute .carte-panel[data-search="on"] .carte-panel-top::after { content: none !important; }
    /* `min-width: auto` est la valeur par defaut d'un element flexible : il refuse de
       descendre sous la largeur de son contenu. C'est ce qui poussait « Annuler »
       dehors au lieu de retrecir le champ. */
    .a-barre-haute .carte-panel[data-search="on"] .carte-search-row {
        flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; gap: 8px;
    }
    .a-barre-haute .carte-panel[data-search="on"] .carte-search { flex: 1 1 auto; min-width: 0; }
    .a-barre-haute .carte-panel[data-search="on"] .carte-search-cancel { flex: 0 0 auto; }
    /* La liste occupe tout ce qui reste sous le champ : sans cela elle s'arretait a la
       hauteur de son contenu et laissait le fond apparent en bas. */
    .a-barre-haute .carte-panel[data-search="on"] .carte-list { flex: 1 1 auto; min-height: 0; }

    /* Pendant la recherche, plus rien d'autre a l'ecran. Le bandeau flottant et les
       deux boutons de la carte restaient en place SOUS le panneau : invisibles tant
       qu'il les couvre exactement, visibles des que ce n'est plus le cas. Deux
       interfaces superposees ne peuvent que finir par se decaler. */
    body.carte-searching .carte-haut,
    body.carte-searching .carte-locate,
    body.carte-searching .carte-fit { display: none !important; }
    .a-barre-haute .carte-grip { display: block; }

    /* Le repli, par la HAUTEUR et non par une transformation.
       Le repli d'origine passe par translateY. Sur cette page il ne prend pas : meme
       force en inline avec !important, la transformation reste ignoree sur ce panneau,
       qui restait donc deplie a 74 % de l'ecran en se croyant replie (c'est le grand
       vide blanc signale par Théo). Comme le panneau est ancre en bas, reduire sa
       hauteur le replie tout aussi bien, et ne dependant de rien d'autre, ca marche. */
    .a-barre-haute .carte-panel[data-open="false"]:not([data-search="on"]) {
        height: calc(var(--peek, 52px) + 14px);
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }
    .a-barre-haute .carte-panel[data-open="false"] .carte-list,
    .a-barre-haute .carte-panel[data-open="false"] .carte-list-empty { display: none; }
    /* Le resume se lit d'un coup d'oeil et invite a tirer vers le haut. */
    .a-barre-haute .carte-panel[data-open="false"] .carte-panel-top {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    /* Le chevron : vers le haut quand c'est replie, vers le bas quand c'est ouvert.
       Le meme geste au meme endroit fait les deux. */
    .a-barre-haute .carte-panel .carte-panel-top::after {
        content: '';
        width: 9px; height: 9px; flex: 0 0 auto;
        border-right: 2px solid var(--ink-soft); border-top: 2px solid var(--ink-soft);
        margin-right: 4px;
        transition: transform .2s ease;
    }
    .a-barre-haute .carte-panel[data-open="false"] .carte-panel-top::after { transform: rotate(-45deg); }
    .a-barre-haute .carte-panel[data-open="true"]  .carte-panel-top::after { transform: rotate(135deg); }
    /* Ouvert, la ligne du haut reste une zone de fermeture : elle est cliquable, et son
       curseur le dit. */
    .a-barre-haute .carte-panel .carte-panel-top {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        cursor: pointer; min-height: 40px;
    }

    /* La feuille du bas ne contient plus que la liste : son haut se resume au titre. */
    .a-barre-haute .carte-panel-top { padding: 6px 16px 8px; }
    .a-barre-haute .carte-panel-top:empty { display: none; }
    /* Le resume du tiroir replie : une ligne lisible, avec le chiffre en avant. */
    .a-barre-haute .carte-kicker {
        display: block; font-family: var(--font-sans);
        font-size: .95rem; font-weight: 700; color: var(--ink);
        margin: 0; line-height: 1.2;
    }
}


/* =========================================================================
   CONTACT : piège à robots et modale de confirmation (9 août 2026)
   Le champ « website » doit rester invisible ET hors du parcours clavier,
   sans utiliser display:none, que certains automates savent détecter.
   ========================================================================= */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nmc-modale { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nmc-modale[hidden] { display: none; }
.nmc-modale-fond { position: absolute; inset: 0; background: rgba(31, 41, 55, .55); }
.nmc-modale-carte {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 26px 24px;
  background: var(--white);
  border: 1px solid rgba(31, 41, 55, .10);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(31, 36, 46, .18);
  text-align: center;
}
.nmc-modale-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 14px;
  border-radius: 14px;
  background: var(--sand-light);
  color: var(--pine);
}
.nmc-modale-ico svg { width: 26px; height: 26px; }
.nmc-modale-carte h3 { margin: 0 0 10px; font-size: 1.28rem; color: var(--ink); }
.nmc-modale-carte p { margin: 0 0 22px; color: var(--ink-soft); line-height: 1.55; }
.nmc-modale-carte a { color: var(--periwinkle-deep); text-decoration: underline; }
.nmc-modale-ok {
  display: block; width: 100%; min-height: 48px;
  border: 0; border-radius: var(--radius-sm);
  /* Bleu Nomade dense. Le #7590B8 de la marque ne tient pas le texte blanc
     (3,3 pour 1) ; celui-ci est le meme bleu en plus soutenu, a 5,2 pour 1. */
  background: #4E6DA6; color: var(--white);
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem;
  cursor: pointer;
  transition: transform .15s ease;
}
.nmc-modale-ok:active { transform: scale(.99); }

/* =====================================================================
   BOUTONS INSTAGRAM : UNE SEULE DA, PARTOUT, ET AU REPOS.
   Trois d'entre eux l'avaient perdue (en-tete, page contact) ou ne l'avaient
   jamais eue au repos (icone du burger, en-tete de la preprod, qui ne
   s'allumait qu'au survol : sur telephone, il n'y a pas de survol).
   Le degrade est celui deja utilise ailleurs sur le site, pas un nouveau.
   Ombres NEUTRES : la marque est dans le fond, une ombre teintee est une
   lueur coloree. Bloc pose en DERNIER pour que rien ne l'ecrase par ordre
   d'ecriture. Théo, 9 aout 2026.
   ===================================================================== */
:root { --insta: linear-gradient(135deg, #F4A261 0%, #C13584 60%, #833AB4 100%); }

/* En-tete de la production. La regle qui portait son degrade a ete retiree
   quand la preprod est passee a .nav-insta ; la prod, elle, utilise toujours
   .nav-cta-insta et retombait donc sur le bleu de .nav-cta. On passe par
   .nav-cta.nav-cta-insta pour gagner par la specificite, sans !important. */
.nav-cta.nav-cta-insta {
    background: var(--insta);
    color: #fff;
    box-shadow: 0 6px 18px rgba(31, 41, 55, .14);
}
.nav-cta.nav-cta-insta:hover {
    filter: brightness(1.06);
    box-shadow: 0 12px 26px rgba(31, 41, 55, .18);
}

/* En-tete de la preprod : la pastille ronde s'allume au repos, plus seulement
   au survol. */
.nav-insta {
    background: var(--insta);
    border-color: transparent;
    color: #fff;
}
.nav-insta:hover, .nav-insta:focus-visible {
    background: var(--insta);
    filter: brightness(1.08);
    border-color: transparent;
    color: #fff;
}

/* Icone Instagram du menu burger : meme traitement que la pastille de l'en-tete. */
.mm-insta {
    background: var(--insta);
    border-color: transparent;
    color: #fff;
}
.mm-insta:hover, .mm-insta:focus-visible {
    background: var(--insta);
    filter: brightness(1.08);
    border-color: transparent;
    color: #fff;
}

/* Page contact : le bouton etait bleu plat AVEC une ombre rose restee la du
   temps ou il etait aux couleurs d'Instagram. Le fond revient, l'ombre part. */
.contact-ig-btn-primary {
    background: var(--insta);
    color: #fff;
    box-shadow: 0 10px 26px rgba(31, 41, 55, .14);
}
.contact-ig-btn-primary:hover {
    box-shadow: 0 14px 32px rgba(31, 41, 55, .18);
}

/* Les quatre qui allaient deja bien passent a la variable : un seul endroit a
   changer le jour ou le degrade bouge. */
.hero-split .hs-insta,
.nm-igcta-btn,
.mm-cta:not(.nm-install-btn):not(.mm-cta-compte),
.va-btn-insta {
    background: var(--insta);
}

/* =====================================================================
   LA CARTE DANS L'APPLICATION INSTALLEE (PWA).
   Le bandeau du haut a ete pense pour le navigateur, ou le header du site
   donne le degagement et ou la legende sert de barre de filtres. En
   application, trois choses cassaient :

   1. LA PILULE BLANCHE GEANTE. « Tout le bassin » recevait un `top` de la
      feuille de l'app EN PLUS du `bottom` du bandeau. Ancre par le haut ET
      par le bas, un element absolu s'etire : avec son rayon de 999px, il
      couvrait la moitie de l'ecran. Un seul ancrage vertical, donc.
   2. LA RECHERCHE SOUS L'HORLOGE. Le bandeau se cale sous le header du site,
      qui n'existe pas en application : il remontait sous la barre d'etat.
      On repart de l'encoche.
   3. PLUS AUCUN FILTRE. L'app masquait la legende, jugee redondante avec les
      filtres du tiroir. Ces filtres SONT la legende depuis la refonte : les
      masquer les supprimait purement et simplement.

   Bloc pose en dernier, apres les regles de l'app, pour ne pas dependre de
   l'ordre d'ecriture. Théo, 9 aout 2026.
   ===================================================================== */
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {

  html.pwa-app .carte-haut {
      top: calc(env(safe-area-inset-top, 0px) + 10px);
  }

  /* Le bouton menu de l'application est en position fixe au-dessus de tout, a
     14px du bord et 46px de large. Il recouvrait le debut du champ de recherche,
     qui commence lui a 12px : « Rechercher un lieu... » passait dessous. Le champ
     est donc retreci A GAUCHE, de la largeur du bouton plus un jour : il se retrouve
     seul dans la marge liberee. Choix de Théo entre trois maquettes le 9 aout 2026 :
     reprendre la meme marge a droite aurait centre la barre, mais il ne serait reste
     que 171px de champ pour un libelle qui en demande 244, donc un texte coupe. Le
     libelle entier a ete juge plus important que la symetrie. La rangee de filtres,
     elle, tombe deja plus bas que le bouton : elle garde toute la largeur.
     En recherche plein ecran le bouton s'efface et le champ quitte le bandeau,
     ce decalage ne le suit donc pas. */
  html.pwa-app .carte-haut .carte-search-row { margin-left: 58px; }

  /* Un seul ancrage vertical : le bas. On annule le haut et la gauche que
     l'application pose sur ces deux boutons. */
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-fit,
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-locate {
      top: auto; left: auto; right: 12px;
  }
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-locate { bottom: calc(var(--peek, 52px) + 26px); }
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-fit    { bottom: calc(var(--peek, 52px) + 78px); }

  /* La legende redevient la barre de filtres, et elle reste visible. */
  html.pwa-app .carte-haut .map-legend { display: flex; }

  /* Le tiroir part du bas de l'ecran, pas du haut : l'app le calait sous
     l'encoche, ce qui n'a plus de sens pour une feuille montante.
     Il COLLE au bord du bas. En application il n'y a pas d'interface de navigateur
     a menager : reserver toute la hauteur de la barre d'accueil rendait la barre
     enorme (100px au lieu de 66) pour un benefice nul. On garde juste un filet de
     jour sous le texte. Décision de Théo, 9 aout 2026, apres un premier essai a
     pleine hauteur qu'il a trouve « BCP trop grand ». */
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-panel:not([data-search="on"]) {
      top: auto; bottom: 0;
  }
  /* LA BARRE EPOUSE SON CONTENU. Mesure a l'ecran : la barre faisait 73px pour un
     contenu qui s'arretait a 57, soit 16px de blanc en dessous. Le coupable etait le
     « + 14px » de la mise en page telephone, pense pour degager les interfaces du
     navigateur. En application il n'y en a pas, et ce degagement ne se lit plus que
     comme un vide. On repart de la hauteur du contenu, mesuree en direct par le
     script (--peek), plus 4px de securite pour ne rien rogner. */
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-panel[data-open="false"]:not([data-search="on"]) {
      height: calc(var(--peek, 52px) + 4px);
      padding-bottom: 0;
      /* 🔴 LE VRAI COUPABLE DU VIDE SOUS LA BARRE.
         En application, le repli ne se fait PAS par la hauteur mais par un
         glissement : `transform: translateY(100% - --peek - 12px - encoche)`, le
         panneau faisant 70vh et descendant pour ne laisser depasser que sa ligne.
         Ma hauteur reduite se combinait avec ce glissement calcule sur l'ancienne :
         le panneau remontait de quarante et quelques pixels et laissait un trou
         sous lui. Je cherchais le vide DANS la barre, il etait DESSOUS.
         Ici on positionne par la hauteur et `bottom: 0`, donc le glissement n'a
         plus lieu d'etre. */
      transform: none;
  }
  /* La liste ouverte, elle, garde le retrait complet : ses dernieres lignes ne
     doivent pas finir sous la barre d'accueil, on y fait defiler du contenu. */
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-panel[data-open="true"] .carte-list {
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* Liste ouverte en plein ecran dans l'app : c'est la CROIX qui ferme, en haut a
     droite. Mon chevron se posait exactement au meme endroit, les deux dessins se
     superposaient. Un seul geste, un seul dessin. */
  html.pwa-app .carte-fullscreen .carte-panel[data-open="true"][data-view="list"] .carte-panel-top::after {
      content: none;
  }
  /* En recherche, le champ passe sous l'encoche a son tour. */
  html.pwa-app .carte-fullscreen .a-barre-haute .carte-panel[data-search="on"] .carte-panel-top {
      padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  }
}

/* =====================================================================
   TIROIR OUVERT : LES FILTRES DU BANDEAU S'EFFACENT.
   Le tiroir monte jusqu'au bandeau, et la rangee de filtres se retrouvait
   sous la liste des resultats, les deux superposes. La recherche reste,
   elle : c'est le seul moyen de repartir d'ailleurs. Le script pose la
   meme consigne en direct, pour le cas ou le service worker sert encore
   l'ancienne feuille. Théo, 9 aout 2026.
   ===================================================================== */
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  .a-barre-haute[data-panneau="ouvert"] .carte-haut .carte-bas { display: none; }
}


/* ==========================================================================
   SOMMAIRE DE L'ARTICLE AUTOMATIQUE DU WEEK-END
   L'article est groupé par catégorie ; ce bloc en tête permet d'aller droit
   à ce qu'on cherche sans parcourir quarante sorties.
   Rayon franc de 10px (pas de pilule), bordure 1px tout autour (jamais d'un
   seul côté), aucune ombre teintée. Cible tactile de 44px de haut.
   ========================================================================== */
.article-content .we-sommaire {
    /* Aucune boîte : la palette crème est neutralisée en blanc sur tout le
       site, un cadre blanc sur fond blanc n'entourerait rien. Les boutons
       portent la bordure, ils suffisent à marquer le bloc. */
    margin-top: 1.6em;
}
.article-content .we-sommaire-titre {
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
}
.article-content .we-sommaire ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.article-content .we-sommaire li { margin: 0; }
.article-content .we-sommaire a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid rgba(31, 41, 55, .14);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.article-content .we-sommaire a:hover,
.article-content .we-sommaire a:focus-visible {
    border-color: var(--sunset-deep);
    color: var(--sunset-deep);
}
.article-content .we-sommaire-nb {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: .86rem;
}

/* L'en-tête du site est fixe : sans cette marge, le titre visé par le sommaire
   arrive sous la barre et on croit que le lien n'a rien fait. */
.article-content h2[id],
.article-content #we-sommaire { scroll-margin-top: 96px; }

.article-content .we-sommaire a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
@media (max-width: 767px) {
    /* Boutons centrés sur mobile et tablette. Les paragraphes, eux, restent
       alignés à gauche : c'est la lecture qui prime. */
    .article-content .we-sommaire ul { justify-content: center; }
    .article-content .we-sommaire-titre { text-align: center; }
}


/* Bouton « Recevoir une notification de test », sur la page Notifications de
   l'application. Secondaire : il ne doit pas concurrencer les réglages, qui
   sont la raison d'être de la page. */
.notif-test { margin-top: 12px; }
/* Le délai avant envoi : le temps de poser le téléphone et de lancer la caméra. */
.notif-delai {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .86rem;
    color: var(--muted);
}
.notif-delai-val {
    width: 76px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(31, 41, 55, .16);
    border-radius: 8px;
    background: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .95rem;
    text-align: center;
}
.notif-test-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    background: none;
    border: 1px solid rgba(31, 41, 55, .16);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.notif-test-btn:hover:not(:disabled),
.notif-test-btn:focus-visible { border-color: var(--sunset-deep); color: var(--sunset-deep); }
.notif-test-btn:disabled { opacity: .6; cursor: default; }
.notif-test-msg {
    margin: 10px 0 0;
    font-size: .84rem;
    color: var(--muted);
}

/* Mise en valeur dans l'avis de Nomade. Bleu de la famille périvenche du thème,
   assombri pour atteindre 5,6:1 sur blanc : les périvenches d'origine plafonnent
   à 3,4:1, insuffisant pour du texte courant. L'italique de la citation est
   conservé, seuls la graisse et la couleur changent. */
.va-nomade-text .va-avis-fort {
    color: #4A6A8F;
    font-weight: 700;
}

/* ==========================================================================
   ACCUEIL, HERO : LE BLANC ENGLOBE LA CARTE
   La carte était collée aux bords du cadre, qui paraissait coupé en deux. On la
   rentre de quelques pixels et on lui donne son arrondi : le blanc passe tout
   autour et elle se lit comme un élément posé dedans.
   Desktop seulement : sous 1025px elle passe en pleine largeur sous le texte.
   ========================================================================== */
@media (min-width: 1025px) {
    .hero-split { --hs-marge: clamp(10px, 1.15vw, 20px); }
    .hero-split .hs-photo {
        top: var(--hs-marge);
        right: var(--hs-marge);
        bottom: var(--hs-marge);
        /* 50% moins la marge : le bord gauche de la carte ne bouge pas, la
           colonne de texte garde exactement la place qu'elle avait. */
        width: calc(50% - var(--hs-marge));
        /* Plus serré que l'arrondi du cadre : deux arrondis identiques
           imbriqués donnent un anneau d'épaisseur inégale dans les coins. */
        border-radius: clamp(12px, 1.4vw, 22px);
        overflow: hidden;
    }
}

/* ==========================================================================
   BLOG : LE BANDEAU DU WEEK-END, TOUJOURS EN TETE
   Une page de service, mise à jour chaque semaine, distincte du « à la une »
   éditorial. Bordure 1px tout autour, arrondi de carte, aucune ombre teintée.
   ========================================================================== */
.blog-we-section { padding-bottom: 0; }
.blog-we {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(31, 41, 55, .12);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.blog-we:hover { border-color: var(--sunset-deep); transform: translateY(-2px); }
.blog-we-media {
    min-height: 230px;
    background-size: cover;
    background-position: center;
}
.blog-we-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 26px 30px;
}
.blog-we-label {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.blog-we-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.15;
    color: var(--ink);
}
.blog-we-sub {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
/* Le rythme de mise à jour : l'information qui donne envie de revenir. */
.blog-we-maj {
    align-self: flex-start;
    margin-top: 4px;
    padding: 7px 12px;
    border: 1px solid rgba(31, 41, 55, .14);
    border-radius: 8px;
    font-size: .82rem;
    color: var(--ink-soft);
}
@media (max-width: 720px) {
    .blog-we { grid-template-columns: 1fr; }
    .blog-we-media { min-height: 180px; }
    .blog-we-body { padding: 20px; text-align: center; align-items: center; }
    .blog-we-maj { align-self: center; }
}

/* La même mention, sur l'article lui-même. */
.article-content .we-rythme {
    display: inline-block;
    margin-top: 1.4em;
    padding: 8px 14px;
    border: 1px solid rgba(31, 41, 55, .14);
    border-radius: 8px;
    font-size: .88rem;
    color: var(--ink-soft);
}

/* ==========================================================================
   AVIS DES MEMBRES sur une fiche spot.
   Le bloc s'affiche pour tout le monde (il doit etre lisible et indexable),
   mais seul un compte connecte peut ouvrir la fenetre d'ecriture.
   La note va de 0 a 5 et ZERO EST UNE VRAIE NOTE : elle a sa propre pastille,
   a gauche des etoiles, pour ne pas se confondre avec « rien de choisi ».
   ========================================================================== */

.u-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.va-avis { padding: 72px 0 6px; }

/* ALIGNEMENT SUR LA FICHE. `.container` fait 1200 px, la grille de la fiche
   1120 : le bloc débordait de 16 px de chaque côté et cassait la colonne du
   regard. 1120 + les deux fois 24 px de marge intérieure du conteneur = 1168.
   En dessous de cette largeur la règle ne mord plus, et les deux se calent
   d'eux-mêmes sur la même gouttière. */
.va-avis > .container,
/* Le bandeau « C'est ton établissement ? » débordait pareil, et il suit
   directement les avis : aligner l'un sans l'autre se verrait davantage que
   ne rien faire. Il ne sert que sur cette page. */
.owner-cta > .container { max-width: 1168px; }

.av-tete {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.av-tete-txt { flex: 1 1 260px; min-width: 0; }

/* La moyenne, en grand. Posée entre le titre et le bouton sur ordinateur,
   sous le titre sur téléphone. */
.av-resume {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; background: var(--white);
    border: 1px solid rgba(31, 36, 46, 0.1); border-radius: 14px;
    box-shadow: var(--shadow-sm); flex: 0 0 auto;
}
.av-resume[hidden] { display: none; }
.av-resume-note {
    font-family: var(--font-display); font-size: 34px; font-weight: 700;
    line-height: 1; letter-spacing: -0.02em; color: var(--ink);
}
.av-resume-detail { display: flex; flex-direction: column; gap: 3px; }
.av-etoiles-resume .av-etoile { width: 15px; height: 15px; }
.av-resume-nb { font-size: 13px; color: var(--muted); }
.av-titre {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(24px, 4vw, 32px); letter-spacing: -0.01em; line-height: 1.2;
}
.av-sous { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.av-sous strong { color: var(--ink); font-weight: 600; }

/* Bouton principal : meme dessin que les `.btn-primary` du theme, pour qu'il ne
   detonne pas au milieu d'une fiche. Ombre neutre (encre), jamais teintee. */
.av-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 13px 24px; border: 0; border-radius: 50px;
    background: var(--ink); color: var(--cream);
    font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
    box-shadow: 0 10px 24px rgba(31, 36, 46, 0.18);
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.av-btn:hover { background: var(--periwinkle-deep); transform: translateY(-2px); }
.av-note-connexion { color: var(--ink-soft); font-size: 15px; margin: -8px 0 20px; }

/* Les deux notes en tête de fiche : celle des membres puis celle de Google.
   Empilées, pas côte à côte : mises sur une ligne on les lit comme un seul
   chiffre, alors qu'elles viennent de deux publics différents. */
.va-notes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.va-notes .va-rating { margin-bottom: 0; }
/* Le lien « N avis » ne faisait que 17 px de haut. Padding pour la cible,
   marge negative pour que la ligne de texte ne bouge pas d'un pixel. */
.va-rating-nomade .va-rating-sub a {
    display: inline-block; padding: 13px 4px; margin: -13px 0;
    color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.va-rating-nomade .va-rating-sub a:hover { color: var(--ink); }

/* =====================================================================
   LES DEUX NOTES SUR UNE VIGNETTE : LA NÔTRE DOMINE, CELLE DE GOOGLE SUIT.
   Demande de Théo le 15 août 2026 (« rends la pastille avis nomade toujours
   bien plus visible que la google »), plus un vrai défaut de lisibilité qu'il a
   repéré au passage.

   LE DÉFAUT : `.spot-rating` était pensée pour vivre SUR UNE PHOTO, en blanc sur
   noir translucide à 40 %. Plusieurs gabarits la posent en fait sur du blanc :
   40 % de noir sur blanc donne un gris pâle, et le texte blanc dessus devient
   illisible. Plutôt que de corriger écran par écran, on lui donne un habillage
   qui tient DANS LES DEUX CAS : fond blanc opaque, texte encre, filet léger.
   Sur une photo c'est une pastille blanche nette, sur du blanc c'est un chiffre
   foncé cerné d'un filet.

   LA HIÉRARCHIE : la note des membres est en bleu Nomade plein, texte blanc,
   gras, étoile blanche. À côté d'une pastille blanche discrète, on ne peut pas
   les confondre ni hésiter sur laquelle compte pour nous.
   ===================================================================== */
.nm-note-nomade {
    /* #546F99 et non `--periwinkle-deep` (#7590B8) : sur le bleu du thème, du
       blanc en 12 px ne donne que 3,26 de contraste, sous le seuil lisible de
       4,5. Ce bleu-là, deux tons plus bas, monte à 5,1 sans sortir de la
       palette : c'est le même bleu, assombri. */
    background: #546F99 !important;
    color: #fff !important;
    font-weight: 800 !important;
    padding: 4px 10px;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: 0 2px 7px rgba(31, 36, 46, 0.18);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nm-note-nomade .ni,
.nm-note-nomade svg { color: #fff !important; }
.nm-note-nomade .ni polygon,
.nm-note-nomade svg polygon { fill: #fff; }
.nm-note-nomade em { font-style: normal; font-weight: 700; opacity: 0.88; }

/* La note de Google : lisible partout, mais volontairement en retrait. */
.spot-rating:not(.nm-note-nomade) {
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    border: 1px solid rgba(31, 36, 46, 0.1);
    font-weight: 700;
}
.spot-rating:not(.nm-note-nomade) .ni { color: var(--muted); }
.spot-rating:not(.nm-note-nomade) .sr-google { color: var(--muted); }

/* Dans la liste de la carte, même hiérarchie : la nôtre pleine, l'autre nue. */
.cl-rating-nomade {
    background: #546F99; color: #fff; font-weight: 800;
    padding: 2px 8px; border-radius: 999px;
}
.cl-rating-nomade svg { color: #fff; }
.cd-rating-nomade b { color: var(--periwinkle-deep); }

.av-liste { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
/* Sur large, deux colonnes. Une seule donnait des cartes de 1120 px pour trois
   lignes de texte : des lignes trop longues à lire, et un bloc qui paraissait
   vide. Deux colonnes ramènent la ligne à une longueur confortable et
   remplissent la place. Les cartes d'une même rangée s'alignent en hauteur. */
@media (min-width: 900px) {
    /* `align-items: start` : sans lui, une carte courte s'étire à la hauteur de
       sa voisine qui porte une réponse, et se retrouve avec un tiers de vide en
       bas. Chaque carte garde sa hauteur. */
    .av-liste { grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}
.av-item {
    background: var(--white); border: 1px solid rgba(31, 36, 46, 0.08);
    border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
/* Le sien se distingue par une bordure plus marquee sur les quatre cotes,
   pas par un liseré colore d'un seul cote. */
.av-item.est-le-mien { border-color: rgba(31, 36, 46, 0.24); }
.av-item-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.av-vue {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: var(--periwinkle); color: #fff; font-weight: 600; font-size: 14px;
}
.av-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sans cette ligne, le `display: block` ci-dessus l'emporte sur l'attribut
   `hidden` et une photo absente laisse un carre vide. Deja vu sur /compte/. */
.av-vue img[hidden] { display: none; }

.av-qui { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.av-nom { font-weight: 600; font-size: 15px; }
.av-nom em { font-style: normal; font-weight: 500; color: var(--muted); }
.av-quand { color: var(--muted); font-size: 13px; }

.av-etoiles { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.av-etoile { width: 16px; height: 16px; fill: rgba(31, 36, 46, 0.16); }
.av-etoile.est-pleine { fill: var(--sunset); }

.av-texte { color: var(--ink-soft); font-size: 15.5px; white-space: pre-line; overflow-wrap: anywhere; }

/* La réponse de l'établissement. Décalée et posée sur un fond légèrement teinté,
   pour qu'on voie tout de suite que ce n'est plus le visiteur qui parle.
   Séparateur en pointillés, jamais un liseré coloré sur un seul côté. */
.av-rep {
    margin-top: 12px; padding: 12px 14px;
    background: rgba(117, 144, 184, 0.07);
    border: 1px solid rgba(117, 144, 184, 0.2); border-radius: 12px;
}
.av-rep-qui { font-size: 13px; font-weight: 600; color: var(--periwinkle-deep); margin-bottom: 4px; }
.av-rep-txt { font-size: 15px; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere; }
.av-vide { color: var(--muted); font-size: 15px; }
.av-vide[hidden] { display: none; }

/* ---- La fenetre d'ecriture ---- */
.av-modale {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.av-modale[hidden] { display: none; }
.av-voile { position: absolute; inset: 0; background: rgba(31, 36, 46, 0.55); }
.av-fenetre {
    position: relative; width: 100%; max-width: 560px;
    max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); overflow-y: auto;
    background: var(--white); border-radius: var(--radius);
    padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(31, 36, 46, 0.28);
}
/* Le corps est fige pendant l'ouverture : sinon, sur telephone, le doigt fait
   defiler la page derriere au lieu du texte. Le JS rend sa position au retour. */
body.av-fige { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.av-croix {
    position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
    display: grid; place-items: center; border: 0; border-radius: 12px;
    background: none; color: var(--ink-soft); cursor: pointer;
}
.av-croix svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.av-modale-t { font-size: 20px; font-weight: 600; line-height: 1.3; padding-right: 44px; }
.av-modale-x { color: var(--ink-soft); font-size: 14.5px; margin: 6px 0 18px; }
.av-champ-l { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }

.av-notes { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-radius: 12px; }
/* Rien n'est coché au départ : si on tente de publier sans note, on montre où
   ça manque, avec une bordure sur les quatre côtés et non un liseré. */
.av-notes.est-manquante { outline: 1px solid rgba(224, 138, 74, 0.55); outline-offset: 4px; }
.av-note { position: relative; cursor: pointer; }
.av-note input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.av-note-vue {
    display: grid; place-items: center; width: 46px; height: 46px;
    border: 1px solid transparent; border-radius: 12px;
    font-weight: 600; font-size: 15px; color: var(--muted);
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.av-note-vue svg { width: 26px; height: 26px; fill: rgba(31, 36, 46, 0.16); transition: fill 0.15s var(--ease); }
.av-note input:checked ~ .av-note-vue { border-color: rgba(31, 36, 46, 0.28); background: rgba(31, 36, 46, 0.04); }
.av-note.est-zero input:checked ~ .av-note-vue { color: var(--ink); }
.av-note input:focus-visible ~ .av-note-vue { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Remplissage cumulatif : choisir 3 allume les etoiles 1 a 3. La premiere
   etiquette est le zero, l'etoile numero N est donc a l'index N+1. */
.av-notes:has(.av-note:nth-child(2) input:checked) .av-note:nth-child(-n+2) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(2):hover) .av-note:nth-child(-n+2) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(3) input:checked) .av-note:nth-child(-n+3) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(3):hover) .av-note:nth-child(-n+3) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(4) input:checked) .av-note:nth-child(-n+4) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(4):hover) .av-note:nth-child(-n+4) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(5) input:checked) .av-note:nth-child(-n+5) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(5):hover) .av-note:nth-child(-n+5) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(6) input:checked) .av-note-vue svg,
.av-notes:has(.av-note:nth-child(6):hover) .av-note-vue svg { fill: var(--sunset); }

.av-texte-champ {
    width: 100%; min-height: 120px; padding: 12px 14px;
    border: 1px solid rgba(31, 36, 46, 0.16); border-radius: 12px;
    background: var(--cream); color: var(--ink); resize: vertical;
    font-family: inherit; line-height: 1.55;
    /* 16 px exactement : en dessous, iOS zoome tout seul a la mise au point. */
    font-size: 16px;
}
.av-texte-champ:focus { outline: 2px solid rgba(31, 36, 46, 0.4); outline-offset: 1px; }
.av-compte { text-align: right; color: var(--muted); font-size: 13px; margin-top: 6px; }
.av-erreur {
    margin-top: 12px; padding: 10px 12px; font-size: 14px;
    background: rgba(224, 138, 74, 0.12); color: #8A4A12;
    border: 1px solid rgba(224, 138, 74, 0.32); border-radius: 10px;
}
.av-erreur[hidden] { display: none; }

.av-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.av-actions-fin { display: flex; gap: 10px; margin-left: auto; }
.av-retirer {
    min-height: 44px; padding: 0 4px; border: 0; background: none;
    color: var(--ink-soft); font: inherit; font-size: 14px;
    text-decoration: underline; cursor: pointer;
}
.av-retirer[hidden] { display: none; }
.av-annuler, .av-envoyer {
    min-height: 44px; padding: 12px 22px; border-radius: 50px;
    font: inherit; font-weight: 500; cursor: pointer;
}
.av-annuler { border: 1px solid rgba(31, 36, 46, 0.14); background: #fff; color: var(--ink); }
.av-envoyer { border: 0; background: var(--ink); color: var(--cream); }
.av-envoyer:disabled, .av-retirer:disabled { opacity: 0.55; cursor: default; }

/* Sur telephone la fenetre devient un tiroir colle en bas : le pouce atteint
   les boutons, et le clavier ne pousse plus le contenu hors de l'ecran. */
@media (max-width: 640px) {
    .va-avis { padding-top: 52px; }
    /* Sur téléphone tout s'empile : titre, moyenne, bouton. La moyenne prend la
       largeur, sinon la carte flotte au milieu de rien. */
    .av-tete { align-items: stretch; }
    .av-tete-txt { flex: 1 1 100%; }
    .av-resume { flex: 1 1 100%; justify-content: flex-start; }
    .av-btn { width: 100%; }
    .av-modale { padding: 0; align-items: flex-end; }
    .av-fenetre {
        max-width: none; border-radius: 20px 20px 0 0;
        max-height: 88vh; max-height: 88svh;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    }
    .av-actions { flex-direction: column-reverse; align-items: stretch; }
    .av-actions-fin { margin-left: 0; }
    .av-annuler, .av-envoyer { flex: 1 1 0; }
    /* Les etoiles restent sur la ligne du nom : elles tiennent en 88 px, meme
       sur un ecran de 375. On autorise juste le repli si le prenom est long. */
    .av-item-tete { flex-wrap: wrap; }
    .av-item { padding: 16px; }
}

/* ==========================================================================
   PLANCHER DE LISIBILITE : plus aucun texte sous 12 px.
   Releve du 15 aout 2026, application installee sur six telephones : quatre
   etiquettes tombaient a 11,52 px, toutes en majuscules ou en gris clair,
   c'est-a-dire au plus mauvais endroit possible pour la lisibilite.
   Ce bloc est en FIN de fichier a dessein : les regles d'origine vivent plus
   bas que le debut de la feuille et l'emportaient a specificite egale. Premier
   essai pose vers la ligne 66, sans aucun effet mesurable.
   ========================================================================== */
.blog-we-label { font-size: 12px; }
.blog-card-cat { font-size: 12px; }
html.pwa-app .site-footer .footer-app-legal a,
html.pwa-app .site-footer .footer-app-legal button { font-size: 12px; }