/* HelloServ « Signal » pour l'espace client (chantier 1573, 12/10/2026).
   Remplace theme.css + hs-theme.css dans layouts/header.php (l'admin garde les siens).
   Principe : les vues sont en utilitaires Tailwind ; la config Tailwind (header.php) lit ici des canaux RGB
   par thème (gris, blanc, rouge, verts, ambres ; bleus et violets passent au neutre, accent unique).
   Un seul rouge #e21239, survol #f0485f (décision #1740). Thème sur <html data-theme="dark|light">,
   classe .light gardée pour les scripts existants (carte Leaflet, admin). */
@font-face { font-family: 'Hubot Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url(/assets/fonts/signal/hubot-sans-normal.woff2) format('woff2'); }
@font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-stretch: 100% 125%; font-display: swap; src: url(/assets/fonts/signal/mona-sans-v2.woff2) format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400 800; font-stretch: 75% 112.5%; font-display: swap; src: url(/assets/fonts/signal/martian-mono-v2.woff2) format('woff2'); }

/* ---- Sombre équilibré (défaut) : menu dense < page ardoise < cartes en relief ---- */
:root, [data-theme=dark] {
  --s-menu: #15171c; --s-page: #1c1f25; --s-carte: #24282f; --s-carte-2: #2b3038; --s-survol: #30353e;
  --s-champ: #1c1f25; --s-ligne: #30353d; --s-ligne-2: #3f454f; --s-ligne-3: #59606c; --s-champ-bord: #727a87; /* bord des champs : 3:1 au moins (WCAG 1.4.11) */
  --s-encre: #eef0f3; --s-encre-2: #c5cad3; --s-muet: #a7aebb; --s-muet-2: #969daa;
  --s-rose: #e21239; --s-rose-2: #f0485f; --s-rose-txt: #ff6f82; --s-rose-voile: rgba(226, 18, 57, .12); --s-on-rose: #fff;
  --s-ok: #4cd387; --s-ok-voile: rgba(76, 211, 135, .12); --s-attention: #e0a43a; --s-attention-voile: rgba(224, 164, 58, .13);
  --s-ombre: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .28);
  --s-ombre-haute: 0 12px 32px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .05);
  /* canaux Tailwind (gray-50 à gray-950, sidebar, blanc par usage) */
  --g50: 246 247 249; --g100: 238 240 243; --g200: 223 226 231; --g300: 201 206 214; --g400: 167 174 187;
  --g500: 150 157 170; --g600: 63 69 79; --g700: 48 53 62; --g800: 36 40 47; --g900: 28 31 37; --g950: 21 23 28;
  --sb: 21 23 28; --sb-border: 44 48 56;
  --tx-white: 238 240 243; --bg-white: 255 255 255; --bd-white: 255 255 255;
  --c-rouge: 226 18 57; --c-rouge-2: 240 72 95; --c-rouge-txt: 255 111 130; --c-rouge-pale: 255 168 180;
  --c-vert-txt: 76 211 135; --c-vert-pale: 158 234 190; --c-vert: 34 177 104;
  --c-ambre-txt: 238 180 75; --c-ambre-pale: 245 211 140; --c-ambre: 214 150 40;
  --c-neutre-txt: 197 202 211; --c-neutre: 63 69 79; --c-neutre-fonce: 48 53 62;
  color-scheme: dark;
}

/* ---- Clair : un vrai design (pas une inversion) : menu gris doux, page claire, cartes blanches ---- */
[data-theme=light] {
  --s-menu: #ebedf1; --s-page: #f4f5f8; --s-carte: #ffffff; --s-carte-2: #f4f5f8; --s-survol: #eef0f3;
  --s-champ: #ffffff; --s-ligne: #e3e6eb; --s-ligne-2: #d2d6dd; --s-ligne-3: #a9b0bb; --s-champ-bord: #7e8590;
  --s-encre: #14171c; --s-encre-2: #3a414c; --s-muet: #555d6a; --s-muet-2: #646c79;
  --s-rose: #e21239; --s-rose-2: #f0485f; --s-rose-txt: #d0102f; --s-rose-voile: rgba(226, 18, 57, .07); --s-on-rose: #fff;
  --s-ok: #13804b; --s-ok-voile: rgba(19, 128, 75, .09); --s-attention: #9a5b00; --s-attention-voile: rgba(214, 150, 40, .13);
  --s-ombre: 0 1px 2px rgba(16, 24, 40, .05);
  --s-ombre-haute: 0 16px 40px rgba(16, 24, 40, .14), 0 0 0 1px rgba(16, 24, 40, .06);
  --g50: 18 21 26; --g100: 26 30 37; --g200: 40 46 55; --g300: 58 65 76; --g400: 85 93 106;
  --g500: 100 108 121; --g600: 210 214 221; --g700: 227 230 235; --g800: 255 255 255; --g900: 244 245 248; --g950: 236 238 242;
  --sb: 235 237 241; --sb-border: 222 225 231;
  --tx-white: 20 23 28; --bg-white: 20 23 28; --bd-white: 20 23 28;
  --c-rouge: 226 18 57; --c-rouge-2: 240 72 95; --c-rouge-txt: 208 16 47; --c-rouge-pale: 168 13 40;
  --c-vert-txt: 14 102 59; --c-vert-pale: 14 102 59; --c-vert: 22 150 88; /* vert texte 5,8:1 sur les pastilles teintées (était 4,1:1) */
  --c-ambre-txt: 154 91 0; --c-ambre-pale: 125 74 0; --c-ambre: 196 128 20;
  --c-neutre-txt: 58 65 76; --c-neutre: 210 214 221; --c-neutre-fonce: 227 230 235;
  color-scheme: light;
}
/* Fond plein clair : « blanc » redevient blanc, et ce qui est écrit dessus repasse foncé (interrupteurs, boutons blancs). */
[data-theme=light] .bg-white { background-color: #fff; --g900: 20 23 28; --g800: 20 23 28; --tx-white: 20 23 28; }
/* Fonds de couleur pleins : le texte « blanc » est du vrai blanc dans les deux thèmes (en sombre, le blanc doux #eef0f3
   ne faisait que 4,2:1 sur le rouge, contre 4,8:1 pour #fff : numéros d'étape du tunnel, badges). */
:is(.bg-red-400, .bg-red-500, .bg-red-600, .bg-red-700, .bg-emerald-500, .bg-emerald-600, .bg-green-500,
  .bg-green-600, .bg-amber-600, .bg-orange-500, .bg-orange-600, .bg-black, .hover\:bg-red-500:hover, .hover\:bg-red-600:hover,
  .hover\:bg-red-700:hover, .hover\:bg-emerald-600:hover, .hs-btn-primaire, .s-btn) { --tx-white: 255 255 255; }
/* Boutons en dégradé rouge (pleins une fois le dégradé retiré) ; un encadré teinté (from-red-500/10) garde le texte foncé. */
:is(a, button)[class*="from-red-"] { --tx-white: 255 255 255; }

/* Compatibilité : variables --hs-* lues par basket.css, tunnel.css, auth.css, avis.css, onboarding-jeu.css. */
:root, [data-theme] {
  --hs-page: var(--s-page); --hs-nav: var(--s-menu); --hs-surface: var(--s-carte); --hs-surface-2: var(--s-carte-2);
  --hs-survol: var(--s-survol); --hs-bord: var(--s-ligne); --hs-bord-fort: var(--s-ligne-2);
  --hs-texte: var(--s-encre); --hs-texte-2: var(--s-encre-2); --hs-muet: var(--s-muet); --hs-muet-2: var(--s-muet-2);
  --hs-rouge: var(--s-rose); --hs-rouge-fort: var(--s-rose-2); --hs-rouge-texte: var(--s-rose-txt); --hs-rouge-doux: var(--s-rose-voile);
  --hs-nav-actif: var(--s-rose-voile); --hs-nav-texte: var(--s-encre-2); --hs-nav-icone: var(--s-muet);
  --hs-ombre: var(--s-ombre); --hs-rayon: 0px; --hs-rayon-sm: 0px; --hs-rayon-xs: 0px;
  --hs-marque-applepay: #000; --hs-marque-paypal: #0070ba; --hs-marque-paypal-fort: #005ea6; --hs-marque-carte: #374151;
  --f-display: 'Hubot Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---- Base ---- */
html { background: var(--s-page); scrollbar-color: var(--s-ligne-2) transparent; }
body { font-family: var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--s-rose); }
::selection { background: var(--s-rose); color: #fff; }
/* Titres en Mona Sans élargie : ils portent souvent un nom de service ou un numéro, et le zéro de Hubot Sans est barré. */
main h1, main h2, main h3, .s-titre { font-family: var(--f-text); font-stretch: 110%; letter-spacing: -.012em; text-wrap: balance; }
main h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--s-encre); }
main h2 { font-weight: 650; }
.font-mono, .hs-mono, code, kbd { font-family: var(--f-mono); font-stretch: 87.5%; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
main table, .hs-num, .s-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--s-rose); outline-offset: 2px; }
main input:focus-visible, main select:focus-visible, main textarea:focus-visible { outline: none; border-color: var(--s-ligne-3) !important; box-shadow: 0 0 0 1px var(--s-ligne-3) !important; }
[hidden] { display: none !important; }
/* Pas de dégradés ni de flou (anti-slop), accent unique */
:is(main, aside, header) :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b, .bg-gradient-to-l, .bg-gradient-to-t, .bg-gradient-to-bl) { background-image: none !important; }
:is(main, aside, header) [class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:is(main, aside) [class*="shadow-red-"], :is(main, aside) [class*="shadow-blue-"] { --tw-shadow-colored: 0 0 #0000 !important; }

/* ---- Cadre : menu dense, en-tête du contenu sur la page, cartes en relief ---- */
aside.bg-sidebar { background: var(--s-menu) !important; border-right: 1px solid var(--s-ligne) !important; }
aside.bg-sidebar .border-gray-800, aside.bg-sidebar .border-sidebar-border { border-color: var(--s-ligne) !important; }
header.bg-sidebar { background: var(--s-page) !important; border-bottom: 1px solid var(--s-ligne) !important; }
.s-logo { display: inline-flex; align-items: center; color: var(--s-encre); }
.s-logo .sg-logo-svg { display: block; height: 20px; width: auto; }
.s-logo .voyant { fill: var(--s-rose); animation: sg-voyant .9s steps(1) .5s 1 both; }
@keyframes sg-voyant { 0%, 30% { opacity: 1; } 31%, 70% { opacity: .25; } 71%, 100% { opacity: 1; } }
.s-logo-badge { margin-left: 10px; padding: 3px 6px; font: 500 10px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muet); box-shadow: inset 0 0 0 1px var(--s-ligne-2); }
/* Menu : logo en pleine largeur, sans badge (Mathis 12/10 05:43). Point rouge fixe dans le panel : le clignotement
   d'arrivée de la vitrine (opacité .25 pendant un instant) le laissait pâle, et à 20 px de haut il ne faisait que 4 px. */
aside.bg-sidebar .s-logo-menu { width: 100%; }
aside.bg-sidebar .s-logo-menu .sg-logo-svg { width: 100%; max-width: 188px; height: auto; }
.s-logo .voyant { animation: none !important; opacity: 1; }
/* Signaler un bug : bandeau en bas du menu, juste au-dessus du compte (ouvre la modale existante) */
.s-bug { flex-shrink: 0; padding: 12px; border-top: 1px solid var(--s-ligne); }
.s-bug-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; cursor: pointer; text-align: left;
  background: rgb(var(--tx-white) / .04); box-shadow: inset 0 0 0 1px var(--s-ligne); color: var(--s-encre-2); transition: background-color .15s ease, box-shadow .15s ease; }
.s-bug-btn:hover { background: rgb(var(--tx-white) / .07); box-shadow: inset 0 0 0 1px var(--s-ligne-3); }
.s-bug-btn > i { flex: none; font-size: 13px; color: var(--s-muet); }
.s-bug-btn span { display: flex; flex-direction: column; min-width: 0; }
.s-bug-btn strong { font-size: 13px; font-weight: 600; color: var(--s-encre); }
.s-bug-btn small { font-size: 11.5px; line-height: 1.35; color: var(--s-muet); }
/* Modale « Signaler un bug » : type choisi souligné à l'encre comme les choix du tunnel (pas de fond rouge) */
#pf-form input[name=type]:checked + span { background: var(--s-carte) !important; border-color: var(--s-encre) !important; box-shadow: inset 0 0 0 1px var(--s-encre) !important; color: var(--s-encre) !important; }
#pf-form input[name=type] + span { border-radius: 0 !important; }
aside.bg-sidebar nav { padding-top: 14px; }
aside.bg-sidebar .sidebar-link { position: relative; border-left: 0 !important; border-radius: 0 !important; color: var(--s-encre-2) !important; font-size: .875rem; font-weight: 500; padding-left: 14px !important; }
aside.bg-sidebar .sidebar-link.pl-10 { padding-left: 46px !important; font-size: .8125rem; }
aside.bg-sidebar .sidebar-link:not(.active):hover { background: rgb(var(--tx-white) / .06) !important; color: var(--s-encre) !important; }
aside.bg-sidebar .sidebar-link .sidebar-icon, aside.bg-sidebar .sidebar-link > i:first-child { color: var(--s-muet) !important; }
aside.bg-sidebar .sidebar-link.active { background: rgb(var(--tx-white) / .075) !important; color: var(--s-encre) !important; font-weight: 600; }
aside.bg-sidebar .sidebar-link.active::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px; background: var(--s-rose); }
aside.bg-sidebar .sidebar-link.active .sidebar-icon, aside.bg-sidebar .sidebar-link.active > i:first-child { color: var(--s-encre) !important; }
aside.bg-sidebar .sidebar-link .sidebar-icon.s-nav-accent { color: var(--s-rose) !important; } /* Anti-DDoS mis un peu en valeur (chantier 1637) */
aside.bg-sidebar .sidebar-link .bg-red-500 { border-radius: 0 !important; min-width: 20px; width: auto !important; padding: 0 5px; font: 600 11px/20px var(--f-mono); font-stretch: 87.5%; }
#sidebar-user-menu-dropdown, [id$="-dropdown"] { background: var(--s-carte) !important; border-color: var(--s-ligne-2) !important; box-shadow: var(--s-ombre-haute) !important; }

/* ---- Cartes et blocs ---- */
main .bg-gray-800 { border-color: var(--s-ligne); box-shadow: var(--s-ombre); }
main .border-gray-700, main .border-gray-700\/50, main .border-gray-800 { border-color: var(--s-ligne) !important; }
main .border-gray-600 { border-color: var(--s-ligne-2) !important; }
main .divide-gray-700 > :not([hidden]) ~ :not([hidden]), main .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--s-ligne) !important; }
main .shadow-lg, main .shadow-xl, main .shadow-2xl { box-shadow: var(--s-ombre-haute) !important; }
main .shadow, main .shadow-md, main .shadow-sm { box-shadow: var(--s-ombre) !important; }

/* ---- Champs ---- */
main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), main select, main textarea {
  background-color: var(--s-champ); border-color: var(--s-ligne-2); color: var(--s-encre); border-radius: 0;
}
main :is(input, select, textarea):is([class*="bg-gray-"], [class*="bg-white"]) { background-color: var(--s-champ); border-color: var(--s-ligne-2); }
main input::placeholder, main textarea::placeholder { color: var(--s-muet-2) !important; opacity: 1; }
/* Bord des champs à 3:1 au moins contre leur fond (WCAG 1.4.11) : passe devant les border-gray-* des vues. */
main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), select, textarea) { border-color: var(--s-champ-bord) !important; }
main :is(input, select, textarea):focus-visible { border-color: var(--s-encre-2) !important; }
/* Tunnel : carte choisie (durée, système) soulignée à l'encre, le rouge réduit au point du bouton radio (style maison :
   ni fond ni contour rouges) ; rond des choix non cochés au bord des champs (3:1). Encadré « À payer aujourd'hui » neutre. */
main :is(.billing-radio, .tunnel-choice) { border-radius: 0 !important; }
main :is(.billing-radio.active, .tunnel-choice.is-selected), main :is(.billing-radio.active, .tunnel-choice.is-selected):hover {
  background: var(--s-carte) !important; border-color: var(--s-encre) !important; box-shadow: inset 0 0 0 1px var(--s-encre) !important; }
main .billing-radio-dot { border-color: var(--s-champ-bord) !important; }
main .billing-radio.active .billing-radio-dot { border-color: var(--s-rose) !important; }
main .billing-radio.active .billing-radio-dot::after { background: var(--s-rose) !important; }
main [class*="from-red-500/10"] { background: var(--s-carte-2) !important; border-color: var(--s-ligne-2) !important; }
/* Tunnel : étiquettes de remise (-10 %, -20 %), 5,6:1 au moins dans les deux thèmes (étaient à 4,1:1 en clair) */
.billing-discount-tag, .billing-discount-tag--best { color: rgb(var(--c-vert-txt)) !important; background: var(--s-ok-voile) !important; border-color: rgb(var(--c-vert-txt) / .35) !important; border-radius: 0 !important; }
main input[type=checkbox], main input[type=radio] { accent-color: var(--s-rose); }

/* ---- Boutons : rouge plein en texte blanc, secondaires à bord fin ---- */
main :is(a, button)[class*="bg-red-5"], main :is(a, button)[class*="bg-red-6"] { font-stretch: 108%; letter-spacing: .01em; }
main :is(a, button):is(.bg-red-500, .bg-red-600) { background-color: var(--s-rose) !important; color: #fff !important; }
main :is(a, button):is(.bg-red-500, .bg-red-600):hover { background-color: var(--s-rose-2) !important; }
/* Boutons en dégradé rouge (tunnel de commande) : le dégradé saute, le fond devient le rouge plein */
main :is(a, button)[class*="from-red-"] { background-color: var(--s-rose) !important; color: #fff !important; box-shadow: none !important; }
main :is(a, button)[class*="from-red-"]:hover { background-color: var(--s-rose-2) !important; }
main :is(a, button):is(.bg-gray-700, .bg-gray-600):not(.text-white) { background: var(--s-carte) !important; color: var(--s-encre-2) !important; box-shadow: inset 0 0 0 1px var(--s-ligne-2); }
main :is(a, button):is(.bg-gray-700, .bg-gray-600):not(.text-white):hover { background: var(--s-survol) !important; color: var(--s-encre) !important; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 16px; border: 0; cursor: pointer; background: var(--s-rose); color: #fff !important;
  font: 700 14px/1 var(--f-text); font-stretch: 112%; letter-spacing: .01em; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.s-btn:hover { background: var(--s-rose-2); }
.s-btn:active { transform: translateY(1px); }
.s-btn svg, .s-btn i { font-size: 12px; transition: transform .25s var(--ease); }
.s-btn:hover .fa-arrow-right { transform: translateX(3px); }
.s-btn.fantome { background: transparent; color: var(--s-encre) !important; box-shadow: inset 0 0 0 1px var(--s-ligne-3); }
.s-btn.fantome:hover { box-shadow: inset 0 0 0 1px var(--s-encre-2); background: rgb(var(--tx-white) / .04); }
.s-btn.petit { height: 34px; padding: 0 12px; font-size: 13px; }
.s-btn.large { width: 100%; height: 46px; }
@media (pointer: coarse) { .s-btn.petit { height: 42px; } }
.s-lien { color: var(--s-encre); font-weight: 600; text-decoration: underline; text-decoration-color: var(--s-rose); text-underline-offset: 3px; }
.s-lien:hover { text-decoration-thickness: 2px; }

/* ---- Étiquettes d'état : carré plein (motif du logo), pas de pastille arrondie ---- */
.s-etat { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .02em; color: var(--s-encre-2); white-space: nowrap; }
.s-etat::before { content: ""; width: 7px; height: 7px; background: var(--s-muet-2); }
.s-etat.ok::before { background: var(--s-ok); }
.s-etat.attention::before { background: var(--s-attention); }
.s-etat.alerte::before { background: var(--s-rose); }
.s-sur { font: 500 11px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muet); }
.sg-picto { flex: none; display: block; width: 24px; height: 24px; color: var(--s-encre-2); --sg-picto-accent: var(--s-rose); }

/* ---- Bascule de thème : icône de l'en-tête et choix dans le menu du compte ---- */
[data-theme=light] .light-icon, [data-theme=dark] .dark-icon { display: inline-block !important; }
[data-theme=light] .dark-icon, [data-theme=dark] .light-icon { display: none !important; }
.s-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; font-size: 13px; color: var(--s-muet); }
.s-seg { display: inline-flex; box-shadow: inset 0 0 0 1px var(--s-ligne-2); }
.s-seg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--s-muet); }
.s-seg button i { font-size: 11px; }
.s-seg button:hover { color: var(--s-encre); }
[data-theme=light] .s-seg [data-theme-choix=light], [data-theme=dark] .s-seg [data-theme-choix=dark] { background: rgb(var(--tx-white) / .08); color: var(--s-encre); box-shadow: inset 0 -2px 0 var(--s-rose); }
/* Bouton « Afficher les services annulés » : secondaire à bord fin, comme les autres actions secondaires */
main #toggleCancelled { background: transparent !important; color: var(--s-encre-2) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--s-ligne-2); }
main #toggleCancelled:hover { color: var(--s-encre) !important; box-shadow: inset 0 0 0 1px var(--s-ligne-3); }

/* ---- Onglets de la fiche service : soulignés comme sur la vitrine, sur une ligne (défilement sur mobile) ---- */
.fiche-onglets { gap: 0 !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--s-ligne); }
.fiche-onglets::-webkit-scrollbar { display: none; }
.fiche-onglets .tab-button { padding: 12px 14px !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--s-muet) !important; box-shadow: none !important; }
.fiche-onglets .tab-button:hover { color: var(--s-encre) !important; }
.fiche-onglets .tab-button[aria-selected=true] { color: var(--s-encre) !important; box-shadow: inset 0 -2px 0 var(--s-rose) !important; }
.fiche-onglets .tab-button i { font-size: 12px; }

/* ---- Recherche rapide (Ctrl K) : bouton de l'en-tête et fenêtre (assets/js/signal-palette.js) ---- */
.s-recherche-btn { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px 0 11px; margin-right: 6px; border: 0; cursor: pointer;
  background: rgb(var(--tx-white) / .04); color: var(--s-muet); box-shadow: inset 0 0 0 1px var(--s-ligne); font-size: 13px; transition: color .15s ease, box-shadow .15s ease; }
.s-recherche-btn:hover { color: var(--s-encre); box-shadow: inset 0 0 0 1px var(--s-ligne-3); }
.s-recherche-btn i { font-size: 12px; }
.s-recherche-txt { min-width: 120px; text-align: left; }
.s-recherche-kbd, .s-palette kbd { padding: 3px 5px; font: 500 10.5px/1 var(--f-mono); font-stretch: 87.5%; color: var(--s-muet); box-shadow: inset 0 0 0 1px var(--s-ligne-2); }
.s-recherche-btn, .s-recherche-kbd, header.bg-sidebar :is(a, button) { flex: none; white-space: nowrap; }
header.bg-sidebar nav { min-width: 0; }
header.bg-sidebar nav > span { min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1400px) { .s-recherche-txt { display: none; } }
@media (max-width: 900px) { .s-recherche-kbd { display: none; } .s-recherche-btn { padding: 0 10px; box-shadow: none; background: none; } }
.s-palette { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0; border: 0; overflow: hidden;
  background: var(--s-carte); color: var(--s-encre); box-shadow: var(--s-ombre-haute); }
.s-palette[open] { display: flex; flex-direction: column; }
.s-palette::backdrop { background: rgba(8, 9, 12, .55); }
.s-palette-tete { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--s-ligne); color: var(--s-muet); }
.s-palette-champ { flex: 1; min-width: 0; height: 54px; border: 0; outline: none; background: none; color: var(--s-encre); font: 400 16px/1 var(--f-text); }
.s-palette-champ::placeholder { color: var(--s-muet-2); }
.s-palette-champ::-webkit-search-cancel-button { display: none; }
.s-palette-liste { margin: 0; padding: 6px 0 10px; list-style: none; overflow-y: auto; }
.s-palette-groupe { padding: 12px 18px 6px; font: 500 10.5px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muet); }
.s-palette-item { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 18px; cursor: pointer; font-size: 14px; }
.s-palette-item small { flex: none; font-size: 12px; color: var(--s-muet); }
.s-palette-item[aria-selected=true] { background: rgb(var(--tx-white) / .07); }
.s-palette-item[aria-selected=true]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--s-rose); }
.s-palette-vide { padding: 22px 18px; font-size: 14px; color: var(--s-muet); }

/* Barre du bas sur mobile : même logique que le menu (actif = encre + trait rouge) */
nav.lg\:hidden.fixed.bottom-0 { background: var(--s-menu) !important; border-color: var(--s-ligne) !important; }
.mobile-nav-item.active, .mobile-nav-item.text-red-400 { color: var(--s-encre) !important; }
.mobile-nav-dot { border-radius: 0 !important; width: 18px !important; height: 2px !important; background: var(--s-rose) !important; }

/* ---- Composants repris de hs-theme.css (tableaux denses, cartes, champs, marque Anti-DDoS Plus), rayons à 0 ---- */
.hs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; color: var(--hs-texte); }
.hs-table th { background: var(--hs-surface-2); color: var(--hs-muet); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hs-bord-fort); white-space: nowrap; }
.hs-table td { padding: 10px 12px; border-bottom: 1px solid var(--hs-bord); vertical-align: middle; }
.hs-table tbody tr:last-child td { border-bottom: 0; }
.hs-table tbody tr:hover td { background: var(--hs-survol); }
.hs-table th:first-child, .hs-table td:first-child { padding-left: 16px; }
.hs-table th:last-child, .hs-table td:last-child { padding-right: 16px; }
.hs-table th button { all: unset; cursor: pointer; }
.hs-table th button:focus-visible { outline: 2px solid var(--hs-rouge-texte); }
.hs-table th[aria-sort] button::after { content: ""; display: inline-block; margin-left: 4px; border: 4px solid transparent; vertical-align: 1px; }
.hs-table th[aria-sort="ascending"] button::after { border-bottom-color: currentColor; transform: translateY(-2px); }
.hs-table th[aria-sort="descending"] button::after { border-top-color: currentColor; transform: translateY(2px); }
.hs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; color: var(--hs-texte-2); }
.hs-muet { color: var(--hs-muet); }
.hs-carte { background: var(--hs-surface); border: 1px solid var(--hs-bord); border-radius: var(--hs-rayon); box-shadow: var(--hs-ombre); }
.hs-champ { background: var(--hs-surface); border: 1px solid var(--hs-bord-fort); border-radius: var(--hs-rayon-sm); color: var(--hs-texte); font-size: .875rem; height: 34px; padding: 0 10px; }
.hs-champ::placeholder { color: var(--hs-muet-2); }
.hs-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--hs-rayon-sm); font-size: .875rem; font-weight: 500; border: 1px solid var(--hs-bord-fort); background: var(--hs-surface); color: var(--hs-texte-2); cursor: pointer; white-space: nowrap; }
.hs-btn:hover { background: var(--hs-survol); color: var(--hs-texte); }
.hs-btn:disabled { opacity: .5; cursor: not-allowed; }
.hs-btn-primaire { background: var(--hs-rouge); border-color: var(--hs-rouge); color: #fff; }
.hs-btn-primaire:hover { background: var(--hs-rouge-fort); border-color: var(--hs-rouge-fort); color: #fff; }
.hs-etat { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--hs-texte-2); white-space: nowrap; }
.hs-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hs-muet-2); }
.hs-etat-actif::before { background: #22c55e; }
.hs-etat-attente::before { background: #eab308; }
.hs-etat-arret::before { background: #ef4444; }
.hs-etiquette { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--hs-rayon-xs); background: var(--hs-surface-2); border: 1px solid var(--hs-bord); color: var(--hs-texte-2); font-size: .75rem; white-space: nowrap; }
.hs-etiquette button { all: unset; cursor: pointer; color: var(--hs-muet); padding: 0 1px; }
.hs-etiquette button:hover { color: var(--hs-texte); }
.hs-vide { padding: 40px 16px; text-align: center; color: var(--hs-muet); font-size: .875rem; }
[hidden] { display: none !important; }
.hs-table td.hs-num, .hs-table .hs-num { white-space: nowrap; }
.hs-table td .text-xs { line-height: 1.35; }
.mgr-tab-btn { border-radius: 0 !important; background: transparent !important; }
.mgr-tab-btn.active { color: var(--hs-texte) !important; box-shadow: inset 0 -2px 0 var(--hs-rouge); }
/* Marque Anti-DDoS Plus (chantier 920, #801) : B bouclier en titre, C éclat ailleurs, + plein sous 20 px. helpers/MarqueAntiddos.php */
.adp{display:inline-flex;align-items:center;gap:.16em;white-space:nowrap;line-height:1;vertical-align:baseline}
.adp svg{width:1em;height:1em;flex:none;overflow:visible}
.adp--b{gap:.22em}
.adp--b svg{color:var(--hs-rouge-texte);width:1.08em;height:1.08em}
.adp--c svg{width:.9em;height:.9em;transform:translateY(-.22em)}
.adp--c .adp-g0{stop-color:var(--hs-rouge)}
.adp--c .adp-g1{stop-color:var(--hs-rouge-texte)}
.adp--c .adp-e{fill:var(--hs-rouge-texte)}
.adp--sm.adp--c svg{width:1.3em;height:1.3em;transform:translateY(-.14em)}
.adp--sm.adp--c .adp-p{stroke:var(--hs-rouge-texte)}
.adp--sm.adp--b svg{width:1.2em;height:1.2em}
.adp--sm.adp--b svg .adp-p{stroke-width:3.2}
.adp--sm .adp-e{display:none}
/* Tunnel, étape options (chantier 931) : descriptions et prix lisibles en clair, encart Anti-DDoS (L4 inclus, apport de Plus) */
html.light main #tunnel-addons .text-gray-400, html.light main #tunnel-addons .adp-tunnel { color: var(--hs-texte-2) !important; }
html.light main #tunnel-addons .text-gray-300 { color: var(--hs-texte) !important; }
main #tunnel-addons .adp-tunnel { background-color: var(--hs-surface-2); }
/* Menu contextuel (chantier 1599, modèle de la console FlexiShield) : deux panneaux côte à côte, le rail glisse vers celui
   du contexte ; le panneau sorti est masqué une fois le glissement fini (ni focus ni lecteur d'écran). */
.s-nav-rail.a-contexte { display: flex; align-items: flex-start; width: 200%; transition: transform .22s ease; }
.s-nav-rail.a-contexte > .s-nav-panneau { width: 50%; flex-shrink: 0; min-width: 0; }
.s-nav-rail.en-contexte { transform: translateX(-50%); }
.s-nav-rail.sans-transition { transition: none; }
.s-nav-rail.a-contexte:not(.en-contexte) > .s-nav-panneau + .s-nav-panneau, .s-nav-rail.en-contexte > .s-nav-panneau:first-child { visibility: hidden; transition: visibility 0s .22s; }
@media (prefers-reduced-motion: reduce) { .s-nav-rail.a-contexte { transition: none; } }
.s-nav-retour { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--s-muet); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.s-nav-retour:hover { color: var(--s-encre); background: rgb(var(--tx-white) / .06); }
.s-nav-retour i { width: 20px; text-align: center; font-size: 12px; }
.s-nav-contexte { margin: 4px 0 10px; padding: 8px 14px 12px; border-bottom: 1px solid var(--s-ligne); }
.s-nav-contexte-titre { color: var(--s-encre); font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-nav-contexte-sous { margin-top: 2px; color: var(--s-muet); font: 500 12px/1.4 var(--f-mono); font-stretch: 87.5%; }
.s-nav-liste { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--s-ligne); }
.s-nav-liste-titre { display: flex; justify-content: space-between; padding: 0 14px 6px; color: var(--s-muet); font: 500 11px/1.4 var(--f-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; }
.s-nav-liste-item { display: flex; align-items: center; gap: 10px; padding: 6px 14px; color: var(--s-encre-2); font-size: .8125rem; text-decoration: none; }
.s-nav-liste-item:hover { color: var(--s-encre); background: rgb(var(--tx-white) / .06); }
.s-nav-liste-item.actif { color: var(--s-encre); background: rgb(var(--tx-white) / .075); font-weight: 600; }
.s-nav-point { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--s-attention); }
.s-nav-point-ok { background: var(--s-ok); }