/*
 * Les deux numéros du groupe : une pastille par public, de couleur fixe
 * (électrique pour les pros, violet pour les particuliers), devant chaque
 * numéro, partout sur le site.
 */
.tel-pastille {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0.3em 0.65em;
    border-radius: 999px;
    font-family: var(--police-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.tel-pastille--pros { background: var(--electrique); }
.tel-pastille--particuliers { background: var(--violet); }

.tel-ligne {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    white-space: nowrap;
}

.bouton-tel {
    gap: 0.7em;
}

.tels-liens {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
}

/* En-tête : les deux lignes empilées, en petit. */
.tels-entete {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0.25rem;
    font-size: var(--t-xs);
}

/* Pastilles et numéros alignés en deux colonnes communes. */
.tels-entete .tel-ligne {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
}

.tels-entete .tel-ligne {
    color: var(--texte-doux);
    text-decoration: none;
    transition: color 0.3s var(--ease-sortie);
}

.tels-entete .tel-ligne:hover {
    color: var(--texte);
}

.tels-entete .tel-pastille {
    justify-content: center;
    font-size: 0.6rem;
}

/* Pied de page : les deux numéros en grand, l'un sous l'autre. */
.pied__tels {
    display: grid;
    gap: 0.4rem;
}

.pied__tels .tel-pastille {
    min-inline-size: 7.2rem;
    justify-content: center;
    font-size: 0.75rem;
}

/* Listes d'encart et page contact : une ligne par numéro, sans puce. */
.contact__tels {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bloc d'adresse de l'accueil : un numéro par ligne, pros puis particuliers. */
.territoire__tels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}