/**
 * Composant — Numéro de ligne en pastille (nouveau design validé le
 * 23/09/2026). Documentation : COMPOSANTS.md § « Numéro de ligne ».
 *
 * Markup produit par le moteur (verdon_pages_php_enrichir_html,
 * _moteur/contenu-md.php) à partir de « [**51** Nice ↔ Digne](https://…) » :
 *   <li class="pphp-ligne-item">
 *     <a class="pphp-ligne" href="…">
 *       <span class="pphp-ligne__numero">51</span>
 *       <span class="pphp-ligne__nom">Nice ↔ Digne</span>
 *     </a> : arrêts…
 *   </li>
 *
 * Langage visuel commun (DESIGNS.md) : étiquette teal plein, texte blanc
 * DM Sans 700, rayon 3px (même forme que les numéros du plan des transports
 * et que les boutons) ; le nom de la ligne garde le style des liens du texte
 * (teal mid souligné). Survol : teal clair + léger soulèvement.
 */

.pphp-ligne {
    text-decoration: none !important;
}

/* Sélecteurs « a.… span.… » : passent devant les règles des blocs qui
   colorent tous les <span> du texte (Bloc 3 ; Bloc 2 avec !important). */
a.pphp-ligne span.pphp-ligne__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6em; /* même largeur pour 2 et 3 chiffres : les noms s’alignent */
    height: 1.75em;
    margin-right: 0.5em;
    padding: 0 0.5em;
    border-radius: 3px;
    background: #1F5C56;
    color: #fff !important;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875em;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: 0.02em;
    vertical-align: 0.08em;
    box-shadow: 0 2px 6px rgba(31, 92, 86, 0.18);
    transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bloc 2 (image-texte, colonnes) : sa règle « .blocTxt.contenu span »
   (!important, plus précise) remettait le numéro en couleur de texte. */
.page-php a.pphp-ligne span.pphp-ligne__numero {
    color: #fff !important;
}

/* Numéro seul dans le lien (« [**66**](…) relie… ») : pas de marge */
a.pphp-ligne span.pphp-ligne__numero:last-child {
    margin-right: 0;
}

a.pphp-ligne span.pphp-ligne__nom {
    color: inherit !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a.pphp-ligne:hover span.pphp-ligne__numero,
a.pphp-ligne:focus-visible span.pphp-ligne__numero {
    background: #3A9C92;
    transform: translateY(-1px);
}

a.pphp-ligne:hover span.pphp-ligne__nom {
    text-decoration-thickness: 2px;
}

/* Élément de liste qui commence par une ligne : la pastille remplace la
   puce flèche (et la puce historique du thème parent). */
li.pphp-ligne-item {
    padding-left: 0 !important;
    margin-bottom: 0.75rem !important;
}

li.pphp-ligne-item::before {
    content: none !important;
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    a.pphp-ligne span.pphp-ligne__numero {
        transition: none;
    }

    a.pphp-ligne:hover span.pphp-ligne__numero {
        transform: none;
    }
}