/* ==========================================================================
   Thème Techno-Cloud — Techno-Cloud Solutions · Xpert Télécom · Solutions Techno-Rédac
   Habillage du thème Twenty-One (maquettes Higgsfield : docs/design/).
   ========================================================================== */
:root {
  --tc-navy: #0f1f3d; --tc-navy-2: #16294f; --tc-blue: #2d5fb4; --tc-blue-2: #3b73d1;
  --tc-cyan: #29a8e0; --tc-cyan-d: #1c87b8; --tc-magenta: #d6195c;
  --tc-ink: #1d2433; --tc-mute: #6b7586; --tc-line: #e5e9f0; --tc-bg: #f5f7fb; --tc-soft: #eef5fd;
  --tc-radius: 16px; --tc-shadow: 0 10px 30px rgba(15,31,61,.07);
}
html { overflow-x: hidden; }
body.tc-body { overflow-x: clip; }
body.tc-body { font-family: 'Inter', 'Open Sans', system-ui, sans-serif; color: var(--tc-ink); background: var(--tc-bg) !important; -webkit-font-smoothing: antialiased; }
.tc-body h1, .tc-body h2, .tc-body h3, .tc-body h4, .tc-body h5 { font-family: 'Inter', sans-serif; color: var(--tc-ink); font-weight: 700; letter-spacing: -.01em; }
.tc-body a { color: var(--tc-blue); }

/* ---------- Boutons ---------- */
.tc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 40px; padding: 10px 20px; font-weight: 700; font-size: 14.5px; border: 2px solid transparent; text-decoration: none !important; transition: all .15s; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.tc-btn-primary { background: var(--tc-cyan); color: #fff !important; box-shadow: 0 8px 20px rgba(41,168,224,.30); }
.tc-btn-primary:hover { background: var(--tc-cyan-d); }
.tc-btn-outline { border-color: var(--tc-navy); color: var(--tc-navy) !important; background: #fff; }
.tc-btn-outline:hover { background: var(--tc-navy); color: #fff !important; }
.tc-btn-white { background: #fff; color: var(--tc-blue) !important; }
.tc-btn-navy { background: var(--tc-navy); color: #fff !important; }
.tc-btn-glass { background: rgba(255,255,255,.12); color: #fff !important; border-color: rgba(255,255,255,.25); }
.tc-btn-ghost { background: transparent; color: var(--tc-mute) !important; padding: 8px 12px; }
.tc-btn-sm { padding: 6px 14px; font-size: 13px; }
.tc-btn-block { display: flex; width: 100%; margin-top: 10px; }
.tc-link-btn { background: none; border: 0; color: inherit; padding: 0; cursor: pointer; text-decoration: underline; }
.tc-body .btn { border-radius: 10px; font-weight: 600; }
.tc-body .btn-primary, .tc-body .btn-info { background: var(--tc-blue); border-color: var(--tc-blue); }
.tc-body .btn-primary:hover, .tc-body .btn-info:hover { background: var(--tc-navy-2); border-color: var(--tc-navy-2); }
.tc-body .btn-success { background: #16a35c; border-color: #16a35c; }
.tc-body .btn-default, .tc-body .btn-outline-primary { border-radius: 10px; }

/* ---------- En-tête public ---------- */
.tc-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--tc-line); }
.tc-header-in { display: flex; align-items: center; gap: 28px; height: 96px; }
.tc-logo img { width: 250px; max-width: 100%; height: auto; }
.tc-nav { flex: 1; }
.tc-nav .tc-nav-list { flex-direction: row; gap: 4px; justify-content: center; }
.tc-nav .tc-nav-list > li > a { display: block; white-space: nowrap; padding: 10px 14px; font-weight: 600; font-size: 15px; color: var(--tc-ink); border-radius: 10px; text-decoration: none; }
.tc-nav .tc-nav-list > li > a:hover { background: var(--tc-soft); color: var(--tc-blue); }
.tc-body .dropdown-menu { border: 1px solid var(--tc-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(15,31,61,.14); padding: 8px; min-width: 240px; }
.tc-body .dropdown-menu .dropdown-item { border-radius: 8px; padding: 8px 12px; font-weight: 500; color: var(--tc-ink); }
.tc-body .dropdown-menu .dropdown-item:hover { background: var(--tc-soft); color: var(--tc-blue); }
.tc-body .dropdown-menu .dropdown-item i { color: var(--tc-cyan); margin-right: 6px; }
.tc-head-actions { display: flex; align-items: center; gap: 12px; }
.tc-icon-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--tc-bg); color: var(--tc-ink) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; text-decoration: none !important; }
.tc-icon-btn:hover { background: var(--tc-soft); color: var(--tc-blue) !important; }
.tc-dot { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--tc-magenta); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.tc-burger { border: 0; background: var(--tc-bg); width: 42px; height: 42px; border-radius: 12px; font-size: 18px; color: var(--tc-ink); }

/* ---------- Héros de l'accueil ---------- */
.tc-hero { background: radial-gradient(900px 500px at 80% 40%, rgba(41,168,224,.28), transparent 60%), linear-gradient(135deg, #0b1630 0%, #0f1f3d 55%, #17306a 100%); color: #fff; position: relative; overflow: hidden; }
.tc-hero:before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.tc-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 84px 15px 92px; position: relative; }
.tc-hero h1 { color: #fff; font-size: 54px; font-weight: 800; line-height: 1.06; margin: 0 0 18px; }
.tc-hero h1 span { color: var(--tc-cyan); }
.tc-hero p { font-size: 19px; color: #c9d6ee; max-width: 560px; margin: 0 0 28px; }
.tc-domain { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 16px; padding: 8px 8px 8px 18px; max-width: 620px; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.tc-domain > i { color: var(--tc-mute); font-size: 18px; }
.tc-domain input[type=text] { flex: 1; border: 0; outline: 0; font-size: 16px; padding: 12px 6px; color: var(--tc-ink); min-width: 0; }
.tc-domain .tc-btn { border-radius: 12px; }
.tc-domain .tc-btn-glass { background: var(--tc-bg); color: var(--tc-ink) !important; border-color: var(--tc-line); }
.tc-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; font-size: 14px; color: #c9d6ee; font-weight: 500; }
.tc-trust i { color: var(--tc-cyan); margin-right: 6px; }
.tc-hero-art { position: relative; height: 340px; }
.tc-orb { position: absolute; inset: 20px 30px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(41,168,224,.45), rgba(45,95,180,.15) 55%, transparent 70%); filter: blur(4px); }
.tc-hero-cloud { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 190px; color: #7fd0f3; text-shadow: 0 0 40px rgba(41,168,224,.8); }
.tc-chip { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(127,208,243,.5); background: rgba(15,31,61,.6); color: #7fd0f3; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 0 24px rgba(41,168,224,.35); }
.tc-chip.c1 { left: 6%; top: 18%; } .tc-chip.c2 { left: 10%; bottom: 14%; } .tc-chip.c3 { right: 6%; top: 14%; } .tc-chip.c4 { right: 10%; bottom: 18%; }

/* ---------- Sections de l'accueil (pleine largeur) ---------- */
.tc-page-homepage #main-body { padding-top: 0; }
.tc-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 72px calc(50vw - 50%); }
.tc-band-light { background: linear-gradient(180deg, #f2f6fd, #f8fafd); }
.tc-sec-head { text-align: center; margin-bottom: 36px; }
.tc-sec-head h2 { font-size: 34px; font-weight: 800; margin: 0 0 8px; }
.tc-sec-head p { color: var(--tc-mute); font-size: 16px; margin: 0; }
.tc-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tc-brand { position: relative; overflow: hidden; border-radius: 22px; padding: 36px 36px 32px; color: #fff !important; text-decoration: none !important; box-shadow: var(--tc-shadow); transition: transform .2s; min-height: 360px; display: flex; flex-direction: column; }
.tc-brand:hover { transform: translateY(-4px); }
.tc-brand-cloud { background: linear-gradient(135deg, #1d4ea8 0%, #2d5fb4 45%, #3b73d1 100%); }
.tc-brand-xpert { background: linear-gradient(135deg, #1aa0dc 0%, #29a8e0 50%, #4cc0ef 100%); }
.tc-brand-logo { height: 62px; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; flex: none; }
.tc-brand-logo-box { background: #fff; border-radius: 14px; padding: 10px 14px; align-self: flex-start; }
.tc-brand-logo-box .tc-brand-logo { height: 46px; }
.tc-brand-lead, .tc-brand-price { font-size: 17px; margin: 18px 0 14px; color: rgba(255,255,255,.92); }
.tc-brand-price strong { font-size: 26px; color: #fff; }
.tc-brand ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; font-weight: 600; }
.tc-brand ul i { color: #bfe9fb; margin-right: 8px; }
.tc-brand .tc-btn { align-self: flex-start; margin-top: auto; }
.tc-brand-deco { position: absolute; right: -10px; bottom: -20px; font-size: 200px; opacity: .12; }
.tc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tc-tile { background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 26px; text-decoration: none !important; color: var(--tc-ink) !important; box-shadow: 0 4px 14px rgba(15,31,61,.04); transition: all .2s; display: flex; flex-direction: column; }
.tc-tile:hover { border-color: #b9daf3; box-shadow: var(--tc-shadow); transform: translateY(-3px); }
.tc-tile-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--tc-soft); color: var(--tc-blue); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
.tc-tile strong { font-size: 18px; }
.tc-tile p { color: var(--tc-mute); font-size: 14px; margin: 6px 0 14px; flex: 1; }
.tc-tile-go { color: var(--tc-blue); font-weight: 700; font-size: 14px; }
.tc-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.tc-why span { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: var(--tc-shadow); align-items: center; justify-content: center; font-size: 26px; color: var(--tc-blue); margin-bottom: 14px; }
.tc-why strong { display: block; font-size: 17px; }
.tc-why p { color: var(--tc-mute); font-size: 14px; margin: 4px 0 0; }
.tc-help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tc-help a { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 20px 22px; text-decoration: none !important; color: var(--tc-ink) !important; transition: all .2s; }
.tc-help a:hover { box-shadow: var(--tc-shadow); border-color: #b9daf3; }
.tc-help a > i:first-child { font-size: 26px; color: var(--tc-cyan); }
.tc-help div { flex: 1; } .tc-help strong { display: block; } .tc-help span { font-size: 13px; color: var(--tc-mute); }
.tc-help a > i:last-child { color: var(--tc-mute); }

/* ---------- Pied de page public ---------- */
.tc-footer { background: var(--tc-navy); color: #b8c4dc; padding: 64px 0 26px; margin-top: 0; }
.tc-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
.tc-foot-logo { width: 300px; max-width: 100%; height: auto; margin-bottom: 14px; }
.tc-foot-brand p { color: #b8c4dc; }
.tc-foot-powered { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; }
.tc-foot-powered img { height: 38px; width: auto; }
.tc-footer h6 { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.tc-footer a { display: block; color: #b8c4dc !important; text-decoration: none; padding: 4px 0; font-size: 14px; }
.tc-footer a:hover { color: #fff !important; }
.tc-foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 20px; font-size: 13px; }
.tc-foot-legal { display: flex; gap: 16px; } .tc-foot-legal a { display: inline; padding: 0; }

/* ---------- Espace client : menu latéral + barre du haut ---------- */
.tc-app { display: block; min-height: 100vh; }
/* tout ce qui suit le menu latéral est décalé (robuste même si une page ferme une balise de trop) */
.tc-app > :not(.tc-side), .tc-logged .tc-foot-app { margin-left: 264px; }
.tc-side { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; background: linear-gradient(180deg, #0f1f3d 0%, #0c1932 100%); color: #c9d6ee; display: flex; flex-direction: column; z-index: 1040; padding: 22px 16px; overflow-y: auto; }
.tc-side-logo img { width: 100%; max-width: 232px; height: auto; margin: 4px 0 26px; }
.tc-side-nav { display: flex; flex-direction: column; gap: 4px; }
.tc-side-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: #c9d6ee !important; font-weight: 600; font-size: 15px; text-decoration: none !important; transition: all .15s; }
.tc-side-nav a i { font-size: 17px; color: #8fb3e6; }
.tc-side-nav a:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.tc-side-nav a.active { background: linear-gradient(90deg, #2d5fb4, #3b73d1); color: #fff !important; box-shadow: 0 8px 22px rgba(45,95,180,.45); }
.tc-side-nav a.active i { color: #fff; }
.tc-side-sep { height: 1px; background: rgba(255,255,255,.08); margin: 12px 6px; }
.tc-side-foot { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.tc-side-foot img { display: block; width: 170px; height: auto; margin-top: 8px; }
.tc-main { min-width: 0; }
.tc-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 18px; padding: 16px 32px; background: rgba(245,247,251,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--tc-line); }
.tc-hello { display: flex; flex-direction: column; min-width: 0; }
.tc-hello strong { font-size: 21px; font-weight: 800; color: var(--tc-ink); }
.tc-hello span { font-size: 13px; color: var(--tc-mute); }
.tc-search { flex: 1; max-width: 460px; margin-left: auto; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--tc-line); border-radius: 12px; padding: 0 14px; }
.tc-search input { flex: 1; border: 0; outline: 0; height: 42px; background: transparent; font-size: 14px; }
.tc-search i { color: var(--tc-mute); }
.tc-top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tc-search + .tc-top-actions { margin-left: 0; }
.tc-account { flex-direction: row; }
.tc-account > li > a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--tc-line); font-weight: 600; color: var(--tc-ink) !important; text-decoration: none; }
.tc-logged .master-breadcrumb, .tc-logged #main-body, .tc-foot-app { padding-left: 16px; padding-right: 16px; }
.tc-logged #main-body > .container, .tc-logged .master-breadcrumb > .container, .tc-logged .tc-main > .alert .container { max-width: 1760px; width: 100%; padding-left: 28px; padding-right: 28px; }
.tc-foot-app { margin-top: auto; padding-top: 26px; padding-bottom: 26px; text-align: center; color: var(--tc-mute); font-size: 13px; }
.tc-brands-mini { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 8px; }
.tc-brands-mini img { width: 270px; max-width: 100%; height: auto; }
.tc-brands-mini span { width: 1px; height: 26px; background: var(--tc-line); }
.tc-foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.tc-foot-links a { color: var(--tc-mute) !important; }
.tc-side-backdrop { display: none; }

/* ---------- Composants WHMCS communs ---------- */
.tc-body .master-breadcrumb { background: transparent; border: 0; padding-top: 18px; }
.tc-body .master-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 13px; }
.tc-body #main-body { background: transparent; padding-top: 22px; padding-bottom: 50px; }
.tc-body .card, .tc-body .sidebar .card, .tc-body .panel { border: 1px solid var(--tc-line); border-radius: var(--tc-radius); box-shadow: 0 4px 16px rgba(15,31,61,.04); overflow: hidden; }
.tc-body .card-header { background: #fff; border-bottom: 1px solid var(--tc-line); font-weight: 700; }
.tc-body .card-title { font-weight: 700; font-size: 16px; }
.tc-body .sidebar .card-header { background: #fff; }
.tc-body .list-group-item { border-color: var(--tc-line); }
.tc-body .list-group-item.active, .tc-body .list-group-item-action.active { background: var(--tc-soft); color: var(--tc-blue); border-color: var(--tc-line); font-weight: 700; }
.tc-body .form-control, .tc-body .custom-select { border-radius: 10px; border-color: #dbe1ea; min-height: 42px; }
.tc-body .form-control:focus { border-color: var(--tc-cyan); box-shadow: 0 0 0 3px rgba(41,168,224,.15); }
.tc-body .table { background: #fff; }
.tc-body .table thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tc-mute); background: #fafbfd; }
.tc-body .alert { border-radius: 12px; border: 0; }
.tc-body .header-lined h1, .tc-body .primary-content > h1 { font-size: 28px; font-weight: 800; }
.tc-body .label, .tc-body .badge { border-radius: 20px; font-weight: 600; }
.tc-body .status-active, .tc-body .label-success { background: #e3f6ea; color: #157a43; }

/* ---------- Tableau de bord ---------- */
.tc-page-clientareahome #main-body .col-lg-4.col-xl-3 { display: none; }
.tc-page-clientareahome #main-body .primary-content { flex: 0 0 100%; max-width: 100%; }
.tc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.tc-kpi { position: relative; display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: 20px; text-decoration: none !important; color: var(--tc-ink) !important; box-shadow: 0 4px 16px rgba(15,31,61,.04); transition: all .2s; }
.tc-kpi:hover { box-shadow: var(--tc-shadow); transform: translateY(-2px); }
.tc-kpi-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tc-soft); color: var(--tc-blue); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.tc-kpi-ico.tc-violet { background: #efedfd; color: #5b4bd6; } .tc-kpi-ico.tc-cyan { background: #e4f5fc; color: var(--tc-cyan-d); }
.tc-kpi div { flex: 1; min-width: 0; }
@media (max-width: 1499px) { .tc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tc-kpi small { display: block; font-size: 13.5px; font-weight: 700; color: var(--tc-ink); }
.tc-kpi strong { display: block; font-size: 28px; font-weight: 800; line-height: 1.2; }
.tc-kpi em { font-style: normal; font-size: 12px; color: var(--tc-mute); }
.tc-kpi-go { color: var(--tc-blue); }
.tc-kpi-due strong { color: var(--tc-ink); }
/* minmax(0, …) + min-width: 0 : un long mot (montant, nom de domaine) ne peut plus élargir la grille au-delà de l'écran */
.tc-dash { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tc-dash-main, .tc-dash-side, .tc-kpi { min-width: 0; }
.tc-card { background: #fff; border: 1px solid var(--tc-line); border-radius: var(--tc-radius); box-shadow: 0 4px 16px rgba(15,31,61,.04); margin-bottom: 20px; overflow: hidden; min-width: 0; }
.tc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; }
.tc-card-h h3 { font-size: 17px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.tc-card-h h3 > i { width: 36px; height: 36px; border-radius: 50%; background: var(--tc-soft); color: var(--tc-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.tc-card-link { font-size: 13px; font-weight: 700; color: var(--tc-blue) !important; white-space: nowrap; }
.tc-card-b { padding: 4px 22px 18px; }
.tc-card-f { padding: 10px 22px 16px; border-top: 1px solid var(--tc-line); font-size: 13px; }
.tc-card-f:empty { display: none; }
.tc-list { border-top: 1px solid var(--tc-line); }
.tc-list-i { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--tc-line); color: var(--tc-ink) !important; text-decoration: none !important; font-size: 14px; }
.tc-list-i:last-child { border-bottom: 0; }
.tc-list a.tc-list-i:hover { background: #f8fafd; }
.tc-list-i > span:first-of-type { flex: 1; min-width: 0; }
.tc-list-i .tc-go { color: var(--tc-mute); }
.tc-badge { display: inline-block; background: var(--tc-soft); color: var(--tc-blue); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.tc-muted { color: var(--tc-mute); font-size: 14px; }
.tc-help-card .tc-card-b .tc-btn { border-radius: 12px; }
.tc-brand-strip { background: #f6f8fc; margin: 6px 16px 16px; border-radius: 12px; padding: 14px; text-align: center; }
.tc-brand-strip img { height: 30px; width: auto; vertical-align: middle; }
.tc-brand-strip span { display: inline-block; width: 1px; height: 24px; background: var(--tc-line); margin: 0 14px; vertical-align: middle; }
.tc-brand-strip p { font-size: 12px; color: var(--tc-mute); margin: 10px 0 0; }
.tc-addon { margin-bottom: 20px; }

/* ---------- Réactif ---------- */
@media (max-width: 1199px) {
  .tc-nav { position: fixed; top: 78px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--tc-line); padding: 12px 15px; display: none; }
  .tc-nav-open .tc-nav { display: block; }
  .tc-nav .tc-nav-list { flex-direction: column; align-items: stretch; }
  .tc-hero-in { grid-template-columns: 1fr; padding: 60px 15px; }
  .tc-hero-art { display: none; }
  .tc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-dash { grid-template-columns: minmax(0, 1fr); }
  .tc-foot-grid { grid-template-columns: 1fr 1fr; }
  /* barre du haut : la recherche cède sa place aux boutons (à 1024 px, « Commander » sortait de l'écran) */
  .tc-topbar .tc-search { display: none !important; }
}
@media (max-width: 991px) {
  .tc-side { transform: translateX(-100%); transition: transform .2s; }
  .tc-side-open .tc-side { transform: none; }
  .tc-side-open .tc-side-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,31,61,.45); z-index: 1035; }
  .tc-app > :not(.tc-side), .tc-logged .tc-foot-app { margin-left: 0; }
  .tc-topbar { padding: 12px 16px; gap: 10px; }
  /* salutation sur une ligne (points de suspension) : sinon elle s'écrase à 0 px, passe à la ligne mot par mot et la barre collante grimpe à 174 px */
  .tc-hello { flex: 1 1 auto; }
  .tc-hello strong, .tc-hello span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tc-top-actions { flex: none; }
  .tc-dash, .tc-brands { grid-template-columns: minmax(0, 1fr); }
  /* en-tête des panneaux : le lien (« Gérer », « Afficher tout »…) passe sous le titre au lieu de sortir de l'écran */
  .tc-card-h { flex-wrap: wrap; }
  .tc-card-link { margin-left: auto; }
  .tc-why { grid-template-columns: repeat(2, 1fr); }
  .tc-help { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .tc-hero h1 { font-size: 36px; }
  .tc-tiles, .tc-kpis, .tc-foot-grid { grid-template-columns: minmax(0, 1fr); }
  /* tuiles du tableau de bord : montant plus petit ; « Payer » passe sous le montant, aligné sur le texte */
  .tc-kpi { padding: 16px 18px; gap: 14px; }
  .tc-kpi strong { font-size: 24px; overflow-wrap: break-word; }
  .tc-kpi-due { flex-wrap: wrap; row-gap: 10px; }
  .tc-kpi-due div { flex: 1 1 calc(100% - 66px); }
  .tc-kpi-due .tc-btn { margin-left: 66px; }
  /* panneaux WHMCS : nom du produit sur plusieurs lignes ; « Enregistrer un nom de domaine » : champ pleine largeur, boutons dessous */
  .tc-list-i .div-service-name .font-weight-bold { white-space: normal; }
  .tc-card-b .input-group > .form-control { flex: 1 1 100%; width: 100%; border-radius: 10px; margin-bottom: 8px; }
  .tc-card-b .input-group > .input-group-append { flex: 1 1 100%; margin-left: 0; gap: 8px; }
  .tc-card-b .input-group > .input-group-append > .btn { flex: 1 1 0; min-width: 0; margin-left: 0; border-radius: 10px; }
  .tc-domain { flex-wrap: wrap; } .tc-domain input[type=text] { flex-basis: 70%; }
  .tc-header-in { height: 78px; } .tc-logo img { width: 190px; height: auto; }
  .tc-hello strong { font-size: 17px; }
  .tc-hello { display: none; }   /* trop étroit : le nom figure déjà dans le menu du compte */
  .tc-top-actions { gap: 6px; }
}

/* champs sans classe des modules (page de service) : jamais plus larges que leur colonne */
.primary-content input, .primary-content select, .primary-content textarea { max-width: 100%; }

/* espace client : la colonne latérale de WHMCS (Vue d'ensemble, Actions…) garde une largeur fixe pour laisser la place au contenu */
@media (min-width: 992px) {
  .tc-logged #main-body .row > .col-lg-4.col-xl-3 { flex: 0 0 250px; max-width: 250px; }
  .tc-logged #main-body .row > .col-lg-8.col-xl-9.primary-content { flex: 1 1 0; max-width: calc(100% - 250px); min-width: 0; }
  /* tableau de bord : la colonne latérale y est masquée, le contenu reprend toute la largeur (sinon 250 px restent vides à droite) */
  .tc-logged.tc-page-clientareahome #main-body .row > .col-lg-8.col-xl-9.primary-content { flex: 0 0 100%; max-width: 100%; }
}

/* pied de page : nom, adresse, téléphone (référencement local) */
.tc-foot-nap { font-style: normal; font-size: 13px; line-height: 1.6; opacity: .8; margin: 8px 0 14px; }
.tc-foot-nap a { color: inherit; text-decoration: underline; }