/* UnioHost : seulement ce que le thème Hostinkar ne fournit pas (logo texte, données réseau, code).
   Couleurs et rayons repris des variables du thème. */

.uh-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.uh-brand__mark {
  width: 38px; height: 38px; border-radius: 10px; background: var(--tg-theme-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.uh-brand__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--tg-heading-color); }
.uh-brand__name span { color: var(--tg-theme-primary); }
.uh-brand--dark .uh-brand__name { color: var(--tg-color-white-default); }

/* Badge « en direct » */
.uh-live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.uh-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #F5A524; }
.uh-live--live .dot { background: var(--tg-theme-primary); animation: uh-pulse 1.8s infinite; }
.uh-live--error .dot { background: var(--tg-theme-primary-3); }
@keyframes uh-pulse { 0% { box-shadow: 0 0 0 0 rgba(23, 189, 84, .55); } 70% { box-shadow: 0 0 0 8px rgba(23, 189, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 189, 84, 0); } }
@media (prefers-reduced-motion: reduce) { .uh-live--live .dot { animation: none; } }

/* Barre de part des chemins */
.uh-bar { height: 6px; border-radius: 99px; background: var(--tg-color-gray-10); margin-top: 18px; overflow: hidden; }
.uh-bar span { display: block; height: 100%; border-radius: 99px; background: var(--tg-theme-primary-2); }

/* Tableau (le thème n'en a pas) */
.uh-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.uh-table th { font-size: 13px; font-weight: 500; color: var(--tg-color-gray-4); padding: 0 8px 10px; border-bottom: 1px solid var(--tg-border-2); text-align: left; }
.uh-table td { padding: 12px 8px; border-bottom: 1px solid var(--tg-border-2); }
.uh-table tr:last-child td { border-bottom: 0; }
.uh-table .num { text-align: right; white-space: nowrap; }
.uh-table a { color: var(--tg-heading-color); font-weight: 500; }
.uh-table a:hover { color: var(--tg-theme-primary-2); }
.uh-scroll { overflow-x: auto; }

/* Chemins BGP */
.uh-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px dashed var(--tg-border-2); font-size: 14px; }
.uh-path:last-child { border-bottom: 0; }
.uh-path .hop { padding: 4px 10px; border-radius: 6px; background: var(--tg-color-white-default); border: 1px solid var(--tg-border-2); }
.uh-path .hop.me { background: var(--tg-theme-primary); border-color: var(--tg-theme-primary); color: #fff; font-weight: 600; }
.uh-path .sep { color: var(--tg-color-gray-4); }

/* Code */
.uh-code {
  background: var(--tg-heading-color); color: #E6F7EC; border-radius: 12px; padding: 18px 20px; margin: 0 0 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.7;
  overflow-x: auto; white-space: pre;
}

/* Illustrations dans les emplacements photo du thème */
.uh-media { background: var(--tg-color-white-default); border-radius: 12px; padding: 24px; }
.uh-media svg, .uh-media img { width: 100%; height: auto; display: block; }

.uh-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Numéro d'étape (le thème dessine les chiffres en SVG) */
.uh-step { font-size: 36px; font-weight: 300; line-height: 1; color: var(--tg-color-white-default); }

/* Liste déroulante du formulaire, alignée sur les champs du thème */
.contact__form-box .form-grp .uh-select {
  width: 100%; height: 56px; padding: 0 24px; border-radius: 8px; font-size: 16px;
  background: var(--tg-color-white-default); border: 1px solid var(--tg-border-2); color: var(--tg-heading-color);
}

/* Le thème met une majuscule à chaque mot (anglais) : pas en français. */
.tg-btn, .tgmenu__navbar-wrap > ul li a, .tgmobile__menu .navigation li > a { text-transform: none; }

/* Le cadre du bandeau des pages d'offre attend une capture d'écran : fond blanc pour nos illustrations SVG. */
.hosting__top-images > img { background: var(--tg-color-white-default); padding: 40px 40px 0; width: 100%; max-width: 560px; }
@media (max-width: 767.98px) { .hosting__top-images > img { padding: 24px 24px 0; } }

/* Tableaux larges : ils défilent sur mobile au lieu d'écraser leurs colonnes. */
.uh-table--wide { min-width: 560px; }
.uh-table td.uh-mono { font-size: 13px; }