/* ═══════════════════════════════════════════════════════════════
   ZONE.CSS — Sud Web Project — v2
   Zone d'intervention et services complémentaires.

   POURQUOI v2
   La v1 disposait les villes sur un plan cartographique. C'était
   joli et thématiquement juste, mais rien n'indiquait qu'on
   pouvait cliquer : un nom posé dans le vide ne ressemble pas à un
   lien. L'affordance passe avant le concept.

   Le parti : un SOMMAIRE. Des noms en très grande typographie, sur
   deux colonnes, chacun avec sa flèche visible en permanence et un
   filet qui se trace sous le nom au survol. On comprend
   immédiatement qu'on navigue.

   Distinct de l'index métiers : là-bas des lignes avec visuels,
   ici des noms qui occupent l'espace.

   À CHARGER après about.css, avant type.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1 · LE SOMMAIRE DES VILLES
   ═══════════════════════════════════════════════════════════════ */
.zone-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 5rem !important;
    border-top: 1px solid var(--border);
}

/* ── Une entrée ── */
.zone-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0 1.25rem;
    padding: 2.1rem 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: left !important;
}

.zone-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--border) !important;
}

.zone-card .zone-icon {
    display: none !important;
}

.zone-card::before {
    content: counter(zone-i, decimal-leading-zero);
    counter-increment: zone-i;
    /* Neutralisation : index.css en faisait une barre d'accent
       absolue, repeinte en bleu par depth.css sur .zone-var */
    position: static !important;
    inset: auto !important;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none;
    grid-column: 1;
    grid-row: 1;
    font-family: var(--ff-body);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: #4E5A6C;
    padding-top: .85rem;
    font-variant-numeric: tabular-nums;
    transition: color .4s ease;
}

.zone-grid {
    counter-reset: zone-i;
}

.zone-card:hover::before {
    color: var(--blue-l);
}

/* Le nom — c'est lui qui porte tout */
.zone-card h3 {
    position: relative;
    grid-column: 2;
    display: inline-flex;
    align-items: baseline;
    gap: .7rem;
    font-family: var(--ff-display) !important;
    font-weight: 400 !important;
    font-size: clamp(1.4rem, 2.1vw, 1.95rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.012em;
    color: #D7DFEA !important;
    margin: 0 0 .5rem !important;
    transition: color .4s ease;
}

.zone-card:hover h3 {
    color: #fff !important;
}

/* Le filet sous le nom : la marque du lien */
.zone-card h3::before {
    content: '';
    position: absolute;
    left: 0;
    right: 1.6rem;
    bottom: -.18em;
    height: 1px;
    background: var(--blue-l);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease);
}

.zone-card:hover h3::before {
    transform: scaleX(1);
}

/* La flèche, visible en permanence — c'est elle qui dit « on clique » */
.zone-card h3::after {
    content: '→';
    font-family: var(--ff-body);
    font-size: .55em;
    color: #5C697D;
    transition: transform .45s var(--ease), color .4s ease;
}

.zone-card:hover h3::after {
    color: var(--blue-l);
    transform: translateX(6px);
}

.zone-card p {
    grid-column: 2;
    font-family: var(--ff-body);
    font-size: .85rem !important;
    line-height: 1.7 !important;
    color: #7C8A9E !important;
    margin: 0 !important;
    max-width: 40ch;
    transition: color .4s ease;
}

.zone-card:hover p {
    color: #A9B6C8 !important;
}

/* Le libellé « Page dédiée » devient superflu : la flèche le dit.
   On le conserve dans le DOM, masqué visuellement. */
.zone-tag {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0 !important;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── L'entrée de clôture : tout le Var, pleine largeur ── */
.zone-var {
    grid-column: 1 / -1;
    border-bottom: none !important;
    padding-top: 2.6rem !important;
    padding-bottom: .5rem !important;
}

.zone-var h3 {
    font-size: clamp(1.55rem, 2.5vw, 2.3rem) !important;
    color: #A9B6C8 !important;
}

.zone-var:hover h3 {
    color: var(--blue-l) !important;
}

.zone-var::before {
    background: none !important;
    color: #3D4757;
}

/* ── Le pied SEO ── */
.zone-seo {
    max-width: 68ch;
    margin: 5.5rem auto 0;
    text-align: center;
}

.zone-seo p {
    font-family: var(--ff-body);
    font-size: .82rem !important;
    line-height: 1.9 !important;
    color: #6E7C90 !important;
    margin-bottom: 1.1rem;
}

.zone-seo p:first-child {
    font-size: .74rem !important;
    letter-spacing: .06em;
    color: #4E5A6C !important;
    margin-bottom: 1.5rem;
}

.zone-seo a {
    color: #94A3B8;
    text-decoration: none;
    border-bottom: 1px solid rgba(147, 196, 253, .18);
    transition: color .3s var(--ease), border-color .3s var(--ease);
}

.zone-seo a:hover {
    color: var(--blue-l);
    border-bottom-color: var(--blue-l);
}

.zone-seo .btn-outline-sm {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(147, 196, 253, .3) !important;
    border-radius: 0 !important;
    padding: 0 0 3px !important;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #B7C6DA !important;
}

.zone-seo .btn-outline-sm:hover {
    color: #fff !important;
    border-bottom-color: var(--blue-l) !important;
}

/* Repli des éléments de la version cartographique */
.zone-map,
.zone-north {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   2 · LES SERVICES COMPLÉMENTAIRES
   Deux lignes, pas deux cartes.
   ═══════════════════════════════════════════════════════════════ */
.services-compl-grid {
    display: block !important;
    gap: 0 !important;
    margin-top: 4rem !important;
    border-top: 1px solid var(--border);
}

.svc-card {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0 4rem;
    padding: 3.2rem 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.svc-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.svc-card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, var(--blue-l), rgba(147, 196, 253, .1));
    transition: width .8s var(--ease);
}

.svc-card:hover::after {
    width: 100%;
}

.svc-card .svc-card-icon {
    display: none !important;
}

.svc-card h3 {
    display: inline-flex;
    align-items: baseline;
    gap: .7rem;
    font-family: var(--ff-display) !important;
    font-weight: 400 !important;
    font-size: clamp(1.6rem, 2.6vw, 2.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.014em;
    color: #E9EEF6 !important;
    margin: 0 !important;
    transition: color .4s ease, transform .55s var(--ease);
}

.svc-card h3::after {
    content: '→';
    font-family: var(--ff-body);
    font-size: .45em;
    color: #5C697D;
    transition: transform .45s var(--ease), color .4s ease;
}

.svc-card:hover h3 {
    color: #fff !important;
    transform: translateX(10px);
}

.svc-card:hover h3::after {
    color: var(--blue-l);
    transform: translateX(6px);
}

.svc-card p {
    font-family: var(--ff-body);
    font-size: .9rem !important;
    line-height: 1.85 !important;
    color: #8B98AB !important;
    margin: 0 0 1.1rem !important;
    max-width: 46ch;
}

.svc-card-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--ff-body);
    font-size: .76rem !important;
    font-weight: 600;
    letter-spacing: .04em;
    color: #6E7C90 !important;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color .35s var(--ease), border-color .35s var(--ease);
}

.svc-card:hover .svc-card-link {
    color: var(--blue-l) !important;
    border-bottom-color: rgba(147, 196, 253, .5);
}

/* ═══════════════════════════════════════════════════════════════
   3 · RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .zone-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .zone-var {
        grid-column: 1;
        padding-top: 2.2rem !important;
    }

    .zone-card {
        padding: 1.7rem 0 !important;
    }

    .zone-card h3 {
        font-size: 1.3rem !important;
    }

    .zone-var h3 {
        font-size: 1.45rem !important;
    }

    .zone-card p {
        max-width: 52ch;
    }

    .svc-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 2.4rem 0 !important;
    }

    .svc-card:hover h3 {
        transform: none;
    }
}

@media (max-width: 768px) {
    .zone-card {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 0 .85rem;
        padding: 1.45rem 0 !important;
    }

    .zone-card::before {
        font-size: .6rem;
        padding-top: .5rem;
    }

    .zone-card h3 {
        font-size: 1.15rem !important;
        margin-bottom: .4rem !important;
    }

    .zone-var h3 {
        font-size: 1.28rem !important;
    }

    .zone-card p {
        font-size: .8rem !important;
        line-height: 1.68 !important;
    }

    .zone-seo {
        margin-top: 3.5rem;
    }

    .zone-seo p {
        font-size: .78rem !important;
    }

    .svc-card h3 {
        font-size: 1.45rem !important;
    }

    .svc-card p {
        font-size: .86rem !important;
    }
}