/* ==========================================================================
   Only Digital — depannage.css (06/11/2026)
   Le dépannage : la table des villes, les étapes, les pastilles. Chargée seulement par modele/depannage.html, après
   style.css et pages.css, dont elle reprend les jetons (couleurs, rayons, ombres, les deux thèmes) ; les autres pages du
   site ne la chargent pas et restent octet pour octet ce qu'elles étaient.
   ========================================================================== */

/* la ligne de marque à trois niveaux : le logo reste dans son lien */
.fil a { display: inline-flex; align-items: center; gap: 8px; }

/* le premier écran sans image : la phrase, puis trois pastilles */
.hero-service .accroche-depannage { margin-top: 1rem; max-width: 42em; font-size: clamp(1.05rem, .98rem + .4vw, 1.2rem); line-height: 1.55; color: var(--ink-2); }
.hero-service h1.h1-large { max-width: 24ch; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.pastilles > li { font-size: .84rem; font-weight: 600; padding: .4rem .85rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-soft-2); }

/* les étapes : un titre, puis sa phrase */
.service-corps .bloc > ol.etapes > li > strong { display: block; line-height: 1.35; }
.service-corps .bloc > ol.etapes > li > span { display: block; margin-top: .15rem; color: var(--ink-2); line-height: 1.5; }

/* le bloc à lire d'abord, sur la page des virus */
.bloc-urgence { padding: 18px 20px 20px; border-radius: 16px; border: 1px solid var(--line-2); border-left: 4px solid var(--b-bg, var(--brand)); background: var(--surface); box-shadow: var(--shadow-1); }
.service-corps .bloc-urgence > h2 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.3rem); margin-bottom: .5rem; }
.service-corps .bloc-urgence > h2::before { display: none; }

/* les liens vers les autres pages du dépannage */
.liens-depannage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.liens-depannage > li > a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: .92rem; font-weight: 600; text-decoration: none !important; color: var(--ink) !important; transition: border-color .2s, background .2s; }
.liens-depannage > li > a:hover { border-color: var(--brand); background: var(--brand-soft); }

.note-independance { margin-top: 1rem; font-size: .88rem; color: var(--ink-3); }

/* la table des villes : un cadre comme les lignes de prix */
.villes-cadre { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.villes { width: 100%; border-collapse: collapse; text-align: left; }
.villes th, .villes td { padding: 13px 18px; vertical-align: middle; line-height: 1.4; }
.villes thead th { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); background: var(--surface-2); }
.villes tbody tr + tr > * { border-top: 1px solid var(--line); }
.villes tbody th { font-weight: 600; color: var(--ink); }
.villes tbody tr:target { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--b-bg, var(--brand)); }
.villes td { color: var(--ink-2); }
.villes .lieu { white-space: nowrap; }
.villes .lieu.oui::before { content: ""; display: inline-block; width: 6px; height: 11px; margin: 0 .55em .12em .15em; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); }
.villes .deplacement { font-weight: 600; color: var(--ink); }
.villes .deplacement.gratuit { color: var(--brand-ink); }
.villes .note-ville { display: block; margin-top: .2rem; font-size: .86rem; font-weight: 400; color: var(--ink-3); }

/* au téléphone : la ville et ses deux façons sur une ligne, le déplacement sur la suivante ; les titres de colonnes passent dans chaque cellule */
@media (max-width: 640px) {
  .villes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .villes, .villes tbody { display: block; }
  .villes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 3px 10px; padding: 11px 14px; }
  .villes tbody tr + tr { border-top: 1px solid var(--line); }
  .villes tbody tr + tr > * { border-top: 0; }
  .villes th, .villes td { display: block; padding: 0; }
  .villes tbody th { font-size: .98rem; }
  .villes .lieu { font-size: 0; }
  .villes .lieu.oui::before { margin: 0 .35rem .1rem .1rem; }
  .villes .lieu::after { content: attr(data-court); font-size: .8rem; color: var(--ink-3); }
  .villes .deplacement { grid-column: 1 / -1; font-size: .9rem; }
  .villes .deplacement::before { content: attr(data-libelle); font-weight: 400; color: var(--ink-3); }
}