/* ═══════════════════════════════════════════════════════════════
   VILLE-HERO.CSS — Sud Web Project
   Le hero des pages ville. GABARIT — il sert les 20 pages.

   Le concept : « l'arrivée ». Sur l'accueil, c'est le titre qui
   est immense ; ici, c'est LE NOM DU LIEU. Il traverse le bas de
   l'écran en contour seulement — le même geste que la signature
   du footer, ce qui fait système.

   Les coordonnées GPS réelles, tracées sur un filet, sont le
   détail qui prouve que chaque page a été pensée. Ce sont vos
   propres données Schema.org.

   Pour une autre ville : on change l'image, le nom et les
   coordonnées. Rien d'autre.

   À CHARGER après ville.css et space.css, avant type.css.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1 · LA SCÈNE
   Empilement : 0 image · 1 voile · 2 nom géant · 3 contenu
   ─────────────────────────────────────────────────────────────── */
.ville-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding-top: clamp(7rem, 15vh, 11rem);
    padding-bottom: clamp(9rem, 22vh, 15rem);
    padding-inline: var(--gutter, 2.5rem);
    overflow: hidden;
    isolation: isolate;
}

/* L'IMAGE occupe tout, sans flou ni transparence */
.ville-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 55%;
    opacity: 1 !important;
    filter: none !important;
    z-index: 0;
    pointer-events: none;
}

/* LE VOILE DE LECTURE
   Dense en bas et à gauche — c'est là que tout se pose. Ouvert au
   centre droit pour laisser l'enfilade respirer. */
.ville-hero-img-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            rgba(5, 8, 15, .88) 0%,
            rgba(5, 8, 15, .72) 26%,
            rgba(5, 8, 15, .34) 55%,
            rgba(5, 8, 15, .12) 80%,
            rgba(5, 8, 15, .3) 100%),
        linear-gradient(to bottom,
            rgba(5, 8, 15, .72) 0%,
            rgba(5, 8, 15, .18) 22%,
            rgba(5, 8, 15, .35) 48%,
            rgba(5, 8, 15, .88) 78%,
            rgba(5, 8, 15, .97) 100%) !important;
}

.ville-hero-bg {
    z-index: 1 !important;
    background: radial-gradient(ellipse 70% 60% at 72% 40%, rgba(59, 130, 246, .08), transparent 70%) !important;
}

/* ───────────────────────────────────────────────────────────────
   2 · LE NOM DU LIEU
   En contour, immense, débordant légèrement — une plaque de
   destination. Bas de casse : c'est une couverture d'ouvrage, pas
   une enseigne.
   ─────────────────────────────────────────────────────────────── */
.ville-mark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1rem, 3vh, 2.5rem);
    z-index: 2;
    padding-inline: var(--gutter, 2.5rem);
    max-width: var(--max);
    margin-inline: auto;
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(3.5rem, 15.5vw, 15rem);
    line-height: .78;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    text-align: left;
}

/* La ville active : une nuance plus présente sur l'accent */
.ville-mark em {
    font-style: italic;
    -webkit-text-stroke-color: rgba(147, 196, 253, .28);
}

/* Trois positions possibles selon le cadrage de la photo.
   À choisir ville par ville : un nom posé sur le sujet de
   l'image serait illisible. */
.ville-hero--mark-right .ville-mark {
    text-align: right;
}

.ville-hero--mark-center .ville-mark {
    text-align: center;
}

/* ───────────────────────────────────────────────────────────────
   3 · LE CONTENU
   ─────────────────────────────────────────────────────────────── */
.ville-hero .container {
    position: relative;
    z-index: 3;
    max-width: var(--max);
    margin-inline: auto;
    width: 100%;
    display: block !important;
    text-align: left;
}

/* L'intitulé de situation */
.ville-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: clamp(1rem, 2vh, 1.7rem) !important;
    font-family: var(--ff-body);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #C3CDDB;
    text-shadow: 0 1px 12px rgba(5, 8, 15, .95);
}

.ville-hero-badge .badge-dot {
    width: 5px;
    height: 6px;
    border-radius: 0;
    background: var(--blue-l);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: none;
}

.ville-hero-title {
    text-align: left !important;
    font-size: min(clamp(2.1rem, 3.9vw, 4rem), 7.6vh) !important;
    line-height: 1.06 !important;
    margin-bottom: clamp(1rem, 2.2vh, 1.8rem) !important;
    max-width: 15ch;
    text-shadow: 0 2px 28px rgba(5, 8, 15, .85);
}

.ville-hero-sub {
    text-align: left !important;
    margin: 0 0 clamp(1.5rem, 3.2vh, 2.6rem) !important;
    max-width: 52ch;
    font-size: min(1.02rem, 2vh) !important;
    line-height: 1.75 !important;
    color: #E4EAF2 !important;
    text-shadow: 0 1px 14px rgba(5, 8, 15, .95);
}

.ville-hero-sub strong {
    color: #fff;
}

.ville-hero-text {
    text-align: left !important;
    margin-left: 0 !important;
}

.ville-hero-actions {
    justify-content: flex-start !important;
    margin-bottom: clamp(1.75rem, 3.5vh, 3rem) !important;
}

/* ───────────────────────────────────────────────────────────────
   4 · LES COORDONNÉES
   Le détail qui prouve que la page a été pensée. Ce sont vos
   propres données Schema.org, tracées sur un filet vertical.
   ─────────────────────────────────────────────────────────────── */
.ville-coord {
    position: absolute;
    right: var(--gutter, 2.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    pointer-events: none;
}

.ville-coord-line {
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, transparent, rgba(147, 196, 253, .45));
    transition: height 1.2s var(--ease);
}

.ville-hero.is-set .ville-coord-line {
    height: 68px;
}

.ville-coord-val {
    font-family: var(--ff-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    color: #93C4FD;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-shadow: 0 1px 10px rgba(5, 8, 15, .95);
}

/* ───────────────────────────────────────────────────────────────
   5 · LES MÉTRIQUES
   ─────────────────────────────────────────────────────────────── */
.ville-hero-metrics {
    justify-content: flex-start !important;
    gap: clamp(1.5rem, 3.5vw, 3.25rem) !important;
    padding-top: clamp(1.2rem, 2.6vh, 2.1rem) !important;
    border-top: 1px solid rgba(147, 196, 253, .2) !important;
    max-width: 780px;
}

.ville-hero-metrics .metric {
    align-items: flex-start !important;
}

.ville-hero-metrics .metric-n {
    font-size: min(1.5rem, 3vh) !important;
    text-shadow: 0 1px 12px rgba(5, 8, 15, .9);
}

.ville-hero-metrics .metric-l {
    text-align: left !important;
    font-size: .62rem !important;
    letter-spacing: .12em;
    text-shadow: 0 1px 10px rgba(5, 8, 15, .95);
}

.ville-hero-metrics .metric-sep {
    height: 30px !important;
}

/* Le repère de défilement n'a plus sa place : le nom géant occupe
   déjà le bas de l'écran */
.ville-scroll-hint {
    display: none;
}

/* ───────────────────────────────────────────────────────────────
   6 · LE FIL D'ARIANE
   ─────────────────────────────────────────────────────────────── */
.ville-breadcrumb {
    background: rgba(5, 8, 15, .92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border);
    font-size: .72rem;
    letter-spacing: .04em;
}

.ville-breadcrumb span:last-child {
    font-weight: 500;
}

/* ───────────────────────────────────────────────────────────────
   7 · ÉCRANS BAS
   ─────────────────────────────────────────────────────────────── */
@media (max-height: 820px) and (min-width: 1025px) {
    .ville-hero {
        padding-bottom: clamp(7rem, 18vh, 11rem);
    }

    .ville-hero-sub {
        max-width: 44ch;
    }

    .ville-mark {
        font-size: clamp(3rem, 12vw, 10rem);
    }
}

/* ───────────────────────────────────────────────────────────────
   8 · TABLETTE
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
    .ville-hero-img {
        object-position: 52% 52%;
    }

    .ville-hero-title {
        max-width: 19ch;
    }

    .ville-coord {
        right: 1.5rem;
    }

    .ville-mark {
        font-size: clamp(3rem, 14vw, 8rem);
    }
}

/* ───────────────────────────────────────────────────────────────
   9 · MOBILE
   Le nom géant reste — c'est la signature du gabarit — mais il
   passe sous le contenu et se réduit fortement.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ville-hero {
        min-height: 100svh !important;
        padding: 6.5rem 1.5rem 5.5rem !important;
    }

    .ville-hero-img {
        object-position: 50% 42%;
    }

    .ville-hero-img-overlay {
        background: linear-gradient(to bottom,
                rgba(5, 8, 15, .6) 0%,
                rgba(5, 8, 15, .22) 15%,
                rgba(5, 8, 15, .42) 30%,
                rgba(5, 8, 15, .86) 46%,
                rgba(5, 8, 15, .95) 60%,
                rgba(5, 8, 15, .98) 100%) !important;
    }

    .ville-mark {
        font-size: clamp(2.2rem, 15vw, 3.6rem);
        bottom: 1.1rem;
        padding-inline: 1.5rem;
        -webkit-text-stroke-width: .75px;
    }

    .ville-hero-badge {
        font-size: .6rem;
        letter-spacing: .14em;
        margin-bottom: .85rem !important;
    }

    .ville-hero-title {
        font-size: min(clamp(1.7rem, 6.8vw, 2.35rem), 5.2vh) !important;
        line-height: 1.12 !important;
        max-width: none;
        margin-bottom: 1rem !important;
    }

    .ville-hero-sub {
        font-size: .9rem !important;
        line-height: 1.62 !important;
        margin-bottom: 1.4rem !important;
    }

    /* Boutons côte à côte : empilés en pleine largeur ils
       mangeaient 130 px pour rien */
    .ville-hero-actions {
        flex-direction: row !important;
        gap: .7rem !important;
        margin-bottom: 1.4rem !important;
    }

    .ville-hero-actions .btn-hero {
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        justify-content: center;
        padding: .95rem 1rem;
        font-size: .88rem;
    }

    .ville-hero-actions .btn-ghost-hero {
        flex: 0 0 auto;
        width: auto !important;
        max-width: none !important;
        padding: .95rem 1rem;
        font-size: .84rem;
        white-space: nowrap;
    }

    .ville-hero-metrics {
        gap: 0 !important;
        justify-content: space-between !important;
        padding-top: 1.1rem !important;
        flex-wrap: nowrap;
    }

    .ville-hero-metrics .metric {
        flex: 1;
    }

    .ville-hero-metrics .metric-n {
        font-size: 1.1rem !important;
    }

    .ville-hero-metrics .metric-l {
        font-size: .53rem !important;
        letter-spacing: .05em;
    }

    .ville-hero-metrics .metric-sep {
        height: 22px !important;
    }

    .ville-coord {
        display: none;
    }

    .ville-breadcrumb {
        font-size: .68rem;
    }
}

@media (max-width: 400px) {
    .ville-hero-title {
        font-size: 1.55rem !important;
    }

    .ville-hero-actions .btn-hero,
    .ville-hero-actions .btn-ghost-hero {
        padding: .85rem .8rem;
        font-size: .82rem;
    }
}