/* ==========================================================================
   Pages de référencement local — prestation (1g) et commune (1h)
   ========================================================================== */

.page-seo {
    display: grid;
    gap: var(--sp-24);
    margin-top: var(--sp-15);
}

.page-seo__accroche {
    margin: var(--sp-11) 0 0;
    font-size: 17px;
    color: var(--c-body);
    line-height: 1.5;
}

.page-seo__texte {
    margin: var(--sp-13) 0 0;
    color: var(--c-body);
    line-height: 1.6;
    /* Mesure bornée : au-delà d'environ 70 caractères, l'œil perd la ligne
       en revenant à la marge gauche. */
    max-inline-size: 68ch;
}

.page-seo__bloc {
    margin-top: var(--sp-26);
}

/* ---- Cartes ------------------------------------------------------------- */
.card {
    margin-top: var(--sp-20);
    padding: var(--sp-18);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-12);
}

.card__titre {
    margin: 0;
    font-size: 17px;
}

.card--liste .liste-tirets {
    margin-top: var(--sp-13);
}

/* ---- Tarif -------------------------------------------------------------- */
.tarif__montant {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: var(--sp-9) 0 0;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--c-blue);
}

/* Placeholder de prix : signalé sans ambiguïté plutôt que maquillé. Un
   montant inventé ferait plus de dégâts qu'un trou visible. */
.tarif__a-confirmer {
    padding: 3px var(--sp-9);
    background: var(--c-orange-bg);
    border-radius: var(--r-pill);
    color: #a2530f;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
}

.tarif__mention {
    margin: var(--sp-8) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

/* ---- Preuve ------------------------------------------------------------- */
.preuve {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-13);
}

/* ---- Bandeau distance / délai ------------------------------------------- */
.bandeau-delai {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    margin: var(--sp-13) 0 0;
    padding: var(--sp-9) var(--sp-13);
    background: var(--c-green-bg);
    border: 1.5px solid var(--c-green);
    border-radius: var(--r-9);
    color: #1c5c3e;
    font-size: var(--fs-meta);
    font-weight: 600;
}

.bandeau-delai svg {
    flex: none;
}

/* ---- Quartiers ---------------------------------------------------------- */
.quartiers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: var(--sp-13) 0 0;
    padding: 0;
    list-style: none;
}

.quartiers li {
    padding: var(--sp-6) var(--sp-11);
    background: var(--c-blue-bg);
    border-radius: var(--r-pill);
    color: var(--c-blue);
    font-size: var(--fs-meta);
    font-weight: 600;
}

/* ---- Liens connexes (maillage interne) ---------------------------------- */
.liens-connexes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
    margin: var(--sp-13) 0 0;
    padding: 0;
    list-style: none;
}

.liens-connexes a {
    display: flex;
    align-items: center;
    gap: var(--sp-13);
    min-height: var(--tap-min);
    padding: var(--sp-13);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-10);
    color: var(--c-heading);
    text-decoration: none;
}

.liens-connexes a:hover {
    border-color: var(--c-blue);
}

.liens-connexes svg:first-child {
    flex: none;
    color: var(--c-blue);
}

.liens-connexes span {
    flex: 1;
    min-inline-size: 0;
}

.liens-connexes strong {
    display: block;
    font-size: var(--fs-card-title);
}

.liens-connexes em {
    display: block;
    margin-top: 2px;
    color: var(--c-meta);
    font-size: var(--fs-meta);
    font-style: normal;
    line-height: 1.4;
}

.liens-connexes svg:last-child {
    flex: none;
    color: var(--c-chevron);
}

/* ---- Grille des communes (page pilier) ---------------------------------- */
.communes-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-9);
    margin: 0;
    padding: 0;
    list-style: none;
}

.commune-carte {
    display: flex;
    align-items: center;
    gap: var(--sp-11);
    min-height: var(--tap-min);
    padding: var(--sp-15);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-11);
    color: var(--c-heading);
    text-decoration: none;
}

.commune-carte:hover {
    border-color: var(--c-blue);
}

.commune-carte__nom {
    flex: 1;
    font-family: var(--font-heading);
    font-size: var(--fs-card-title);
    font-weight: 700;
}

.commune-carte__cp {
    margin-left: var(--sp-6);
    color: var(--c-label);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 400;
}

.commune-carte__distance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--c-meta);
    font-size: var(--fs-label);
    white-space: nowrap;
}

.commune-carte > svg:last-child {
    flex: none;
    color: var(--c-chevron);
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 900px) {
    /* Contenu à gauche, carte d'appel à droite — disposition imposée par le
       handoff pour les deux gabarits. */
    .page-seo {
        grid-template-columns: 1.5fr 1fr;
        gap: var(--sp-34);
        align-items: start;
    }

    /* La carte d'appel suit le défilement : sur une page longue, le numéro
       reste atteignable sans remonter. */
    .page-seo__aside {
        position: sticky;
        top: calc(var(--header-h) + var(--sp-15));
        display: flex;
        flex-direction: column;
        gap: var(--sp-13);
    }

    .communes-grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .communes-grille {
        grid-template-columns: repeat(3, 1fr);
    }
}