/* ============ Encart « Trafic » et page /trafic (Franck, 13/10/2026) ============
   App\Service\Trafic\Ecran, templates/trafic/*. Thème sombre du hub (jetons de app.css).

   MOBILE D'ABORD : une colonne, tuiles en 2 colonnes, cibles de 44 px (liens de période, volets,
   interventions), aucun défilement horizontal — les libellés longs (chemins, user agents, rDNS,
   noms de boutique) passent à la ligne au lieu d'élargir la page.
   Mises en page réglées sur la largeur de L'ENCART (requêtes @container), pas de l'écran : il peut
   être réduit à un tiers en mode Disposer. La page /trafic, elle, vit en modale ou en page pleine :
   même principe, sur son propre conteneur. */

.tf-encart, .tf-page { container: encart / inline-size; }
.tf-encart { min-width: 0; }

/* --- En-tête : titre, fraîcheur des données, « maintenant : N » --- */
.tf-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.tf-tete h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
/* Les titres du hub sont des boîtes flex (app.css : h2 { display: flex }) : sans retour à la ligne
   permis, le mot « Trafic » se cassait lettre par lettre à côté d'un long nom de boutique (capture
   375 px). Le nom passe à la ligne, le titre reste entier. */
.tf-encart h2, .tf-page h2 { flex-wrap: wrap; overflow-wrap: normal; row-gap: 2px; }
.tf-encart h2 .wk, .tf-page h2 .wk { flex: 1 1 10em; min-width: 0; overflow-wrap: anywhere; }
.tf-fraicheur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.tf-maintenant { text-transform: none; letter-spacing: .02em; }

/* --- Périodes : de vrais liens, 44 px au doigt --- */
.tf-periodes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.tf-periodes .spacer { flex: 1 1 auto; }
.tf-periode {
    display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); color: var(--muted);
    font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.tf-periode:hover { border-color: var(--accent); color: var(--fg); }
.tf-periode.actif { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tf-periode:focus-visible, .tf-detail-lien:focus-visible, .tf-volet summary:focus-visible, .tf-interventions a:focus-visible, .tf-sommaire a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.tf-detail-lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; }
@media (min-width: 900px) {
    .tf-periode, .tf-detail-lien { min-height: 32px; }
}

/* --- États vides nommés --- */
.tf-note {
    margin: 0 0 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
    border-radius: 0 6px 6px 0; border-left: 2px solid var(--warn); background: var(--bg-2);
}
.tf-note-attente { border-left-color: var(--accent); }
.tf-vide { padding: 22px 12px; }
.tf-vide p { margin: 0; overflow-wrap: anywhere; }

/* --- Tuiles : 2 colonnes, 3 dès 560 px d'encart, 6 dès 900 px --- */
.tf-tuiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 12px; }
@container encart (min-width: 560px) { .tf-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container encart (min-width: 900px) { .tf-tuiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tf-tuiles.tf-tuiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tf-tuile {
    position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 10px 9px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2);
}
.tf-lib { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tf-lib small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--dim); }
.tf-val { font-family: var(--font-num); font-size: 21px; line-height: 1.15; color: var(--fg); overflow-wrap: anywhere; }
.tf-sous { font-size: 11.5px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.tf-sous b { color: var(--fg); font-weight: 600; }
.tf-ecart { align-self: flex-start; margin-top: 3px; padding: 1px 6px; border-radius: 4px; font-family: var(--font-num); font-size: 11px; background: var(--card); color: var(--muted); }
.tf-ecart.bien.hausse, .tf-ecart.bien.baisse { color: var(--success); }
.tf-ecart.mal { color: var(--danger); }
.tf-robots-barre { display: flex; height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: var(--card); }
.tf-robots-barre i { display: block; height: 100%; }
.g-legitimes, .tf-robots-barre .g-legitimes { --tf-g: var(--success); }
.g-douteux, .tf-robots-barre .g-douteux { --tf-g: var(--warn); }
.g-illegitimes, .tf-robots-barre .g-illegitimes { --tf-g: var(--danger); }
.tf-robots-barre i { background: var(--tf-g, var(--muted)); }

.tf-repartition { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: -4px 0 10px; }
.tf-h3 { margin: 14px 0 6px; font-size: 13px; }

/* --- Courbe (même gabarit que la courbe de disponibilité, plus un axe à droite) --- */
.tf-courbe { display: flex; gap: 6px; }
.tf-courbe-y { position: relative; flex: none; width: 34px; height: 170px; font-family: var(--font-num); font-size: 10px; color: var(--muted); }
.tf-courbe-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.tf-courbe-y2 { width: 30px; color: var(--dim); }
.tf-courbe-y2 span { right: auto; left: 0; }
.tf-courbe-zone { position: relative; flex: 1; min-width: 0; }
.tf-courbe-zone svg { display: block; width: 100%; height: 170px; overflow: visible; }
.tf-courbe-zone .grille { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.tf-courbe-zone .grille.base { stroke: var(--border-lit); stroke-dasharray: none; }
.tf-courbe-zone .panne { fill: rgba(251, 95, 122, .2); }
.tf-courbe-zone .robot { fill: rgba(127, 139, 166, .28); }
.tf-courbe-zone path.sessions { fill: rgba(53, 208, 242, .12); stroke: none; }
.tf-courbe-zone path.visiteurs { stroke: var(--accent); stroke-width: 1.8; }
.tf-courbe-zone .interv-bande { fill: rgba(124, 108, 246, .2); }
.tf-courbe-zone .interv-trait { stroke: var(--accent-2); stroke-width: 1.5; }
.tf-courbe-zone .tf-interv:hover .interv-bande { fill: rgba(124, 108, 246, .38); }
.tf-courbe-zone .deploy { stroke: var(--success); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tf-courbe-x { position: relative; height: 20px; font-size: 10px; color: var(--muted); }
.tf-courbe-x span { position: absolute; top: 5px; transform: translateX(-50%); white-space: nowrap; }
.tf-legende i.visiteurs { background: var(--accent); }
.tf-legende i.sessions { height: 10px; background: rgba(53, 208, 242, .25); }
.tf-legende i.robot { height: 10px; width: 6px; background: rgba(127, 139, 166, .5); }
.tf-legende i.interv { height: 10px; background: rgba(124, 108, 246, .45); border-left: 2px solid var(--accent-2); }
.tf-legende i.deploy { background: var(--success); }
.tf-legende i.panne { height: 10px; background: rgba(251, 95, 122, .4); }
@container encart (max-width: 520px) {
    .tf-courbe-x span:nth-child(even) { display: none; }
    .tf-courbe-y2 { display: none; }
}

/* --- Dernières interventions : un lien par ligne, 44 px --- */
.tf-interventions a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 44px; color: var(--fg); }
.tf-interventions li { border-left-color: var(--accent-2); }
.tf-interv-quand { font-family: var(--font-num); font-size: 11.5px; color: var(--muted); }
.tf-interv-duree { font-family: var(--font-num); font-size: 12px; }
.tf-interv-lib { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-interv-ticket { flex: 1 0 100%; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 900px) and (pointer: fine) { .tf-interventions a { min-height: 0; } }

/* --- Volets --- */
.tf-volets { margin-top: 12px; border-top: 1px solid var(--border); }
.tf-volet { border-bottom: 1px solid var(--border); }
.tf-volet summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fg); }
.tf-volet[open] { padding-bottom: 10px; }
.tf-volet h4, .tf-venti h4 { margin: 10px 0 4px; font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* --- Barres horizontales (ventilations, entonnoir, histogramme) --- */
.tf-barres, .tf-entonnoir { list-style: none; margin: 0; padding: 0; }
.tf-barres li, .tf-entonnoir li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; padding: 4px 0; font-size: 12.5px; }
.tf-barre-lib { min-width: 0; overflow-wrap: anywhere; }
.tf-barre-val { font-family: var(--font-num); font-size: 12px; white-space: nowrap; }
.tf-barre-val small { color: var(--muted); margin-left: 4px; }
.tf-barre { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--card); overflow: hidden; }
.tf-barre i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.tf-barres li.autres .tf-barre i { background: var(--dim); }
.tf-entonnoir .tf-barre i { background: var(--accent-2); }
.tf-histo .h0 .tf-barre i { background: var(--success); }
.tf-histo .h1 .tf-barre i { background: var(--accent); }
.tf-histo .h2 .tf-barre i { background: var(--warn); }
.tf-histo .h3 .tf-barre i { background: var(--danger); }
.tf-colonnes { display: grid; gap: 4px 24px; grid-template-columns: minmax(0, 1fr); }
@container encart (min-width: 700px) { .tf-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tf-parcours-top { margin: 4px 0 8px; padding-left: 20px; font-size: 12.5px; }
.tf-parcours-top li { padding: 3px 0; overflow-wrap: anywhere; }
.tf-parcours-top b { font-family: var(--font-num); font-size: 12px; margin-left: 4px; }

/* --- Chargement : note bon / à améliorer / mauvais (seuils Core Web Vitals) --- */
.tf-perf { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container encart (min-width: 700px) { .tf-perf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-perf li { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--bg-2); border-left: 3px solid var(--muted); font-size: 11.5px; color: var(--muted); }
.tf-perf li b { font-size: 15px; color: var(--fg); }
.tf-perf-bon { border-left-color: var(--success) !important; }
.tf-perf-moyen { border-left-color: var(--warn) !important; }
.tf-perf-mauvais { border-left-color: var(--danger) !important; }
span.tf-perf-bon b { color: var(--success); }
span.tf-perf-moyen b { color: var(--warn); }
span.tf-perf-mauvais b { color: var(--danger); }

.tf-pages { list-style: none; margin: 0; padding: 0; }
.tf-pages li { display: flex; flex-direction: column; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.tf-page-chemin { font-family: var(--font-num); font-size: 11.5px; overflow-wrap: anywhere; word-break: break-word; }
.tf-pages li.autres .tf-page-chemin, .tf-carte.autres .tf-page-chemin { font-family: var(--font); color: var(--muted); }

/* --- Robots --- */
.tf-groupes { display: grid; gap: 6px 16px; grid-template-columns: minmax(0, 1fr); }
@container encart (min-width: 620px) { .tf-groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-groupe { padding: 2px 0 2px 10px; border-left: 3px solid var(--tf-g, var(--muted)); }
.tf-groupe-legitimes { --tf-g: var(--success); }
.tf-groupe-douteux { --tf-g: var(--warn); }
.tf-groupe-illegitimes { --tf-g: var(--danger); }
.tf-groupe h4, .tf-groupe .tf-h3 { margin: 6px 0 2px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fg); }
.tf-groupe p { margin: 0 0 4px; }
.tf-classes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.tf-familles { list-style: none; margin: 0; padding: 0; }
.tf-familles li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 4px 0 4px 8px; border-left: 2px solid var(--tf-g, var(--border-lit)); font-size: 12.5px; }
.tf-familles li span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tf-familles li b { font-family: var(--font-num); font-size: 12px; }
.tf-journal, .tf-vpn-ligne { margin: 8px 0 0; overflow-wrap: anywhere; }
.tf-journal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) and (pointer: fine) { .tf-journal a { min-height: 0; } }

/* --- Page /trafic --- */
.tf-page { min-width: 0; }
.tf-page-tete h1 { margin: 0 0 4px; font-size: 20px; overflow-wrap: anywhere; }
.tf-sommaire { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 12px; }
.tf-sommaire a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--card); color: var(--fg); font-size: 12.5px; text-decoration: none;
}
.tf-sommaire a:hover { border-color: var(--accent); }
@media (min-width: 900px) and (pointer: fine) { .tf-sommaire a { min-height: 32px; } }
.tf-section { padding: 14px 0 6px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.tf-section > h2 { margin: 0 0 10px; font-size: 16px; overflow-wrap: anywhere; }
.tf-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tf-carte { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.tf-carte.tf-ip { border-left: 3px solid var(--tf-g, var(--border-lit)); }
.tf-carte-chiffres { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); }
.tf-carte-chiffres b { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.tf-ip-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tf-ip-adresse { font-family: var(--font-num); font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
.tf-ip-req { margin-left: auto; font-size: 12px; color: var(--muted); }
.tf-ip-req b { color: var(--fg); }
.tf-ip-ua { overflow-wrap: anywhere; word-break: break-word; }
.tf-ip-chemins { display: flex; flex-wrap: wrap; gap: 4px; }
.tf-ip-chemins code { padding: 1px 5px; border-radius: 4px; background: var(--card); font-size: 11px; overflow-wrap: anywhere; word-break: break-all; }

/* --- Sankey : masqué au téléphone (la liste des parcours dit la même chose) --- */
.tf-sankey { margin: 10px 0 4px; }
.tf-sankey-svg { display: block; width: 100%; height: auto; }
.tf-sankey .col { fill: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.tf-sankey .lien { stroke: var(--accent); stroke-opacity: .28; }
.tf-sankey .lien:hover { stroke-opacity: .55; }
.tf-sankey .lien.vers-sortie { stroke: var(--danger); stroke-opacity: .16; }
.tf-sankey .noeud rect { fill: var(--accent); }
.tf-sankey .noeud text { fill: var(--fg); font-size: 13px; paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.tf-sankey .noeud text .n { fill: var(--muted); font-family: var(--font-num); font-size: 11px; }
.tf-sankey .e-home rect { fill: #35d0f2; }
.tf-sankey .e-category rect { fill: #7c6cf6; }
.tf-sankey .e-product rect { fill: #34d399; }
.tf-sankey .e-search rect { fill: #fbbf24; }
.tf-sankey .e-cart rect { fill: #fb923c; }
.tf-sankey .e-checkout rect, .tf-sankey .e-order rect { fill: #f472b6; }
.tf-sankey .e-cms rect, .tf-sankey .e-other rect, .tf-sankey .autres rect { fill: #566179; }
.tf-sankey .sortie rect { fill: var(--danger); }
.tf-sankey .lien.e-category { stroke: #7c6cf6; }
.tf-sankey .lien.e-product { stroke: #34d399; }
.tf-sankey .lien.e-search { stroke: #fbbf24; }
.tf-sankey .lien.e-cart { stroke: #fb923c; }
.tf-sankey .lien.e-checkout { stroke: #f472b6; }
@container encart (max-width: 640px) { .tf-sankey { display: none; } }