/* =============================================================================
   kw-ds-finitions.css — téléphone et thèmes clair / sombre (lot FINITIONS, 15/10/2026).
   Dirigeant : « pour les pages qui ont des onglets, les onglets s'alignent verticalement […] même si on scroll
   horizontal ça déplace […] et que tous les modes sombre et clair soient bien faits ».
   Mesuré à 390 et 360 px, clair et sombre, 23 pages publiques et 18 de l'espace client :
   · onglets empilés (Hébergement, E-mail) : kw-ds-vitrines.css les replie sous 600 px, chacun sur une ligne ;
   · les 10 pages produits glissent sur le côté : la rangée d'atouts du héros déborde d'1 px de chaque côté ;
   · onglets d'« Ajouter un service » coupés (« Hébergement Lin… ») dans une piste qui défile ;
   · filtres des factures sur deux lignes inégales (3 + 1) ;
   · textes sous 4,5:1 et bouton « Payer la facture » invisible en sombre.
   Dernière feuille de la page : apparence seulement, aucun texte, lien ni formulaire changé.
   ============================================================================= */

/* ── 1. Plus rien ne fait glisser la page sur le côté ──
   Sur ce site c'est <body> qui défile : avec overflow-x: hidden, un seul pixel qui dépasse suffit pour que la
   page bouge au doigt. clip coupe ce qui dépasse sans créer de zone de défilement (les éléments collants
   restent collants). */
body.kw-ds #main-body, body.kw-client #main-body, .kw-ds .kw2-hero { overflow-x: clip; }

/* ── 2. Onglets des pages produits (Hébergement, E-mail, VPS) ──
   Une seule rangée, colonnes égales, plus jamais empilés. À partir de trois onglets, l'icône passe au-dessus du
   libellé, qui peut tenir sur deux lignes. */
@media (max-width: 600px) {
  body.kw-ds .kw2-tab-nav, body.kw-ds .kw2-tab-nav.kw-tabs-overflow {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
    width: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: none;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  body.kw-ds .kw2-tab-nav .kw2-tab-btn {
    min-width: 0; min-height: 52px; padding: 8px 10px 8px 8px; gap: 8px;
    white-space: normal; text-align: start; line-height: 1.2; font-size: 14.5px; overflow-wrap: break-word;
  }
  body.kw-ds .kw2-tab-nav .kw2-tab-btn i { width: 32px; height: 32px; font-size: 15px; }
  body.kw-ds .kw2-tab-nav .kw2-tab-btn .kw2-drapeau { width: 32px; height: 22px; margin-block: 0; }
  /* trois onglets et plus : icône au-dessus */
  body.kw-ds .kw2-tab-nav:has(> .kw2-tab-btn:nth-child(3)) .kw2-tab-btn {
    flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 6px 9px; font-size: 13.5px;
  }
  /* cinq et plus : deux colonnes */
  body.kw-ds .kw2-tab-nav:has(> .kw2-tab-btn:nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 3. Familles d'« Ajouter un service » (8) : toutes visibles, en tuiles ──
   Avant : piste qui défile et coupe « Hébergement Lin… ». En étiquettes, la carte (257 px utiles) n'en tient qu'une
   par ligne : on revenait aux onglets empilés. Tuiles : icône au-dessus du nom, compteur en coin, grille qui
   s'adapte (3 colonnes sur téléphone, davantage sur tablette) ; la famille choisie est en encre, comme les onglets
   des pages produits. Les cartes du module perdent un peu de marge intérieure sur téléphone. */
@media (max-width: 600px) {
  html body .kw-as-block { padding: 18px 16px; }
  html body .kw-fam-tabs, html body .kw-fam-tabs.kw-tabs-overflow, html body .kw-fam-tabs.kw-tabs-overflow.at-start, html body .kw-fam-tabs.kw-tabs-overflow.at-end {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; width: 100%; max-width: none;
    padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  html body .kw-fam-tabs .kw-fam-tab {
    position: relative; min-width: 0; min-height: 64px; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    padding: 10px 4px 8px; border: 1px solid var(--filet-fort, #cdd3e1); border-radius: 12px; background: var(--surface, #fff);
    color: var(--texte, #2a3350); box-shadow: none; white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.2;
    overflow-wrap: break-word; hyphens: auto;
  }
  html body .kw-fam-tabs .kw-fam-tab i { font-size: 16px; opacity: 1; color: var(--orange-fonce, #c2730f); }
  html body .kw-fam-tabs .kw-fam-tab.active { background: var(--encre, #0f1733); border-color: var(--encre, #0f1733); color: var(--surface, #fff); box-shadow: none; }
  html body .kw-fam-tabs .kw-fam-tab.active i { color: var(--orange, #ed9322); }
  html body .kw-fam-tabs .kw-fam-tab .kw-fam-count { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; margin: 0; padding: 0 5px;
    border-radius: 999px; font-size: 11px; line-height: 17px; text-align: center; }
  html body .kw-fam-tabs .kw-fam-tab.active .kw-fam-count { background: rgba(255, 255, 255, .18); color: inherit; }
  html.dark-mode body .kw-fam-tabs .kw-fam-tab.active .kw-fam-count, html body.dark-mode .kw-fam-tabs .kw-fam-tab.active .kw-fam-count { background: rgba(15, 23, 51, .14); }
}

/* ── 4. Filtres des factures : deux par ligne, même largeur ── */
@media (max-width: 600px) {
  body.kw-client .kw-inv-filters, body.kw-client .kw-inv-page .kw-inv-filters {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important;
    overflow: visible !important; padding: 0 !important;
  }
  body.kw-client .kw-inv-filters .list-group-item.kw-inv-filter-pill { justify-content: center; text-align: center; width: auto; }
}

/* ── 5. Contrastes ── */
/* Bouton « Payer la facture » du bandeau de la fiche d'un service : texte forcé foncé (text-dark) sur un fond
   devenu foncé en mode sombre (1,5:1). C'est l'action à faire : orange du logo, texte encre, dans les deux thèmes. */
#alertUnpaidInvoice .btn-light, #alertOverdueInvoice .btn-light { background: #ed9322; border-color: #ed9322; color: #0f1733 !important; }
#alertUnpaidInvoice .btn-light:hover, #alertOverdueInvoice .btn-light:hover { background: #f5a63a; border-color: #f5a63a; color: #0f1733 !important; }

/* Fil d'Ariane du panier : page en cours en gris lisible (3,95:1 avant). */
body.kw-ds .breadcrumb-item.active { color: var(--gris, #5b6480); }

/* Éditeur de message (contact, ticket) : compteur et « enregistré » lisibles ; barres sombres en mode sombre. */
.md-editor .md-footer, .md-editor .md-footer .small-font, .md-editor .markdown-save { color: #5b6480; }
.dark-mode .md-editor .md-header, .dark-mode .md-editor .md-footer { background: #121a30; border-color: #232c48; color: #9aa4bf; }
.dark-mode .md-editor .md-footer .small-font, .dark-mode .md-editor .markdown-save { color: #9aa4bf; }
.dark-mode .md-editor .md-header .btn { background: transparent; border-color: #33405f; color: #d2d8e8; }
.dark-mode .md-editor .md-header .btn:hover, .dark-mode .md-editor .md-header .btn.active { background: #1b2547; color: #f1f3f9; }

/* Interrupteur « ON » (page Sécurité) : blanc sur vert pâle (2,5:1) → vert foncé. */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: #1f7a4d; color: #fff; }

/* « Ajouter un service », thème clair : gris #94A3B8 et orange en texte sous 3:1. */
:root:not(.dark-mode) body:not(.dark-mode) .kw-as-page { --kw-muted: #5b6480; }
:root:not(.dark-mode) body:not(.dark-mode) .kw-as-page :is(.kw-as-hero .eyebrow, .kw-card-price b, .kw-offer-price b, .kw-summary-total strong) { color: #9a5a0a; }
/* (titre « Ajoutez un service à votre domaine » : voir la règle des titres, section 6 — en noir dans l'espace client) */

/* Facture (bloc Wave et totaux) : gris #94A3B8 sur blanc (2,5:1). */
.kw-pay-invoice, .kw-pay-secure { color: #5b6480 !important; }
table tr.text-success > td { color: #1f7a4d !important; }
/* Le thème parent (theme.min.css) impose « .md-editor > .btn-toolbar { background-color: #fff !important } » : barre blanche en sombre. */
html.dark-mode .md-editor > .btn-toolbar, body.dark-mode .md-editor > .btn-toolbar { background-color: #121a30 !important; border-bottom-color: #232c48 !important; }
/* Facture (toujours en clair) : « Aucune transaction trouvée » à 4,48:1. */
:root:not(.dark-mode) table td.text-muted { color: #5b6480 !important; }

/* ── 6. Règle des titres (lot TITRES, 15/10/2026) ──
   Dirigeant : « tu mets tout en noir, des fois l'orange dans certains titres ». Mesuré : 9 pages produits avec un
   mot-clé orange, les autres grands titres tout noirs, un seul titre orange dans l'espace client. Règle choisie :
   · site public : le GRAND titre (h1) de chaque page a son mot-clé en orange (balise <em> dans le libellé) ;
     les titres de section restent noirs ;
   · espace client : tous les titres en noir. */
body.kw-ds:not(.kw-client) h1 em { font-style: normal; color: var(--orange-texte, #9a5a0a); }
body.kw-client h1 em { font-style: normal; color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
body.kw-client .kw-as-hero .eyebrow { color: var(--gris, #5b6480) !important; }

/* ── 7. Téléphone : logos de paiement sur une ligne, statistiques des factures en grille (lot LIGNES, 15/10/2026) ──
   Dirigeant : « les logos des paiements ne se tiennent pas toujours sur la même ligne, pareil pour les statistiques
   des factures ». Mesuré à 360 et 390 px : « Payez avec » des pages produits sur 2 lignes (logos de 36 px, PayPal
   seul en dessous) ; statistiques 2 + 1 + 1 + 1 + 1 (les montants ne tenaient pas dans une demi-largeur). */
@media (max-width: 600px) {
  .kw-ds .kw2-payer { justify-content: center; }
  .kw-ds .kw2-payer .k-pays { flex-wrap: nowrap; gap: 6px; justify-content: center; }
  .kw-ds .kw2-payer .k-pay { --h: 26px; padding: 4px 6px; }
  .kw-ds .kw2-payer .k-pay:first-child { padding: 2px 6px; }

  body.kw-client .kw-inv-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.kw-client .kw-inv-stat-card { flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 12px 14px; }
  body.kw-client .kw-inv-stat-card:nth-child(2n) { border-inline-end: 0; }
  body.kw-client .kw-inv-stat-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
  body.kw-client .kw-inv-stat-info { min-width: 0; }
  body.kw-client .kw-inv-stat-val { font-size: 17px; }
  body.kw-client .kw-inv-stat-lbl { font-size: 13px; }
}

/* ── 8. « Commander pour un de mes domaines », étape 2, sur téléphone (lot OFFRES, 15/10/2026) ──
   Dirigeant (capture) : la durée de facturation s'étalait sur trois lignes irrégulières, « Facturation » mêlé aux
   choix ; les familles (Linux, Windows, Multi-domaines, WordPress) en pastilles de largeurs inégales.
   Durées : petit titre au-dessus, grille de 3 colonnes égales, remise sous la durée. Familles : 2 colonnes égales. */
@media (max-width: 600px) {
  body.kw-client .kwoe-js .kwoe-periodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  body.kw-client .kwoe-periodes-lbl { grid-column: 1 / -1; padding: 2px 4px 2px; font-size: 12.5px; }
  body.kw-client .kwoe-periode-btn { flex-direction: column; justify-content: center; gap: 3px; min-width: 0; height: auto; min-height: 44px;
    padding: 7px 4px; text-align: center; font-size: 14px; line-height: 1.2; white-space: nowrap; }
  body.kw-client .kwoe-periode-btn em { font-size: 11px; padding: 1px 5px; white-space: nowrap; }
  body.kw-client .kwoe-js .kwoe-sous { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.kw-client .kwoe-sous-btn { justify-content: center; min-width: 0; height: auto; min-height: 44px; padding: 8px 10px; }
}
/* Les pages de l'espace client n'ont pas de #main-body : la protection de la section 1 ne les couvrait pas
   (la barre kwoe-barre dépassait de 2 px, la page glissait au doigt). clip ne crée pas de zone de défilement :
   la barre latérale reste collante, le panneau « Commander » (fixe) n'est pas coupé. */
body.kw-client #kwAppLayout { overflow-x: clip; }

/* ── 9. Zone DNS (kw_dns_sn.php) sur téléphone (lot DNSMOBILE, 15/10/2026) ──
   Dirigeant (captures) : la page débordait sur le côté. Mesuré : tableau de 760 px minimum (valeurs coupées),
   rangée des types qui défile, terminaison « .domaine » du champ Nom qui dépasse, cartes collées au bord
   (custom.css impose « section { padding: 2rem 0 !important } » sous 768 px).
   Sur téléphone, chaque enregistrement devient une carte en flux : type et nom, puis la valeur en entier (ligne
   entière), puis priorité (MX), TTL et actions à droite. */
@media (max-width: 767px) {
  body.kw-client .kwdns section.kwdns-ajout, body.kw-client .kwdns section.kwdns-ns { padding: 18px 16px !important; }
  body.kw-client .kwdns section.kwdns-liste-carte { padding: 0 !important; }
  body.kw-client .kwdns .kwdns-liste-tete { padding: 16px 16px 12px; }
}
@media (max-width: 600px) {
  /* types : 5 colonnes égales, le nombre sous le type */
  body.kw-client .kwdns .kwdns-onglets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; overflow: visible; gap: 2px; }
  body.kw-client .kwdns .kwdns-onglet { flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 6px 2px; font-size: 13px; line-height: 1.2; }
  body.kw-client .kwdns .kwdns-onglet::before { display: none; }
  /* champ Nom : la terminaison se réduit au lieu de dépasser */
  body.kw-client .kwdns .kwdns-suffixe-grp input[type="text"] { flex: 1 1 90px; }
  body.kw-client .kwdns .kwdns-suffixe { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 2.6; }
  /* tableau → cartes */
  body.kw-client .kwdns .kwdns-cadre { overflow: visible; }
  body.kw-client .kwdns .kwdns-tableau, body.kw-client .kwdns .kwdns-tableau tbody { display: block; min-width: 0; width: 100%; }
  body.kw-client .kwdns .kwdns-tableau thead { display: none; }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px;
    border-bottom: 1px solid var(--filet); }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne > td { display: block; padding: 0 !important; border: 0; min-width: 0; text-align: start; }
  body.kw-client .kwdns .kwdns-tableau td.kwdns-col-type { flex: none; width: auto !important; }
  body.kw-client .kwdns .kwdns-tableau td.kwdns-nom { flex: 1 1 0; overflow-wrap: anywhere; font-weight: 600; }
  body.kw-client .kwdns .kwdns-tableau td.kwdns-val { flex: 1 0 100%; }
  body.kw-client .kwdns .kwdns-tableau td.kwdns-val .kwdns-val-txt { display: block; max-width: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; word-break: break-all; font-size: 13.5px; }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne > td:nth-child(4) { flex: none; font-size: 12.5px; color: var(--gris); }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne:not([data-kwsn-ligne="MX"]) > td:nth-child(4) { display: none; }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne > td:nth-child(4)::before { content: "Priorité "; }
  html[lang="en"] body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne > td:nth-child(4)::before { content: "Priority "; }
  html[lang="ar"] body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne > td:nth-child(4)::before { content: "الأولوية "; }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne > td:nth-child(5) { flex: 1 1 auto; font-size: 12.5px; color: var(--gris); white-space: nowrap; }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-ligne > td:nth-child(5)::before { content: "TTL "; }
  body.kw-client .kwdns .kwdns-tableau td.kwdns-col-act { flex: none; margin-inline-start: auto; display: flex !important; gap: 6px; width: auto !important; white-space: nowrap; }
  body.kw-client .kwdns .kwdns-tableau td.kwdns-col-act form { margin: 0; }
  /* Boutons Modifier / Supprimer : l'ancienne feuille masquait leur texte sur téléphone et celle de l'espace client
     leur icône — ils étaient vides. Le texte revient. */
  body.kw-client .kwdns .kwdns-tableau .kwdns-act { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; font-size: 13.5px; }
  body.kw-client .kwdns .kwdns-tableau .kwdns-act span { display: inline !important; position: static; width: auto; height: auto; clip: auto; margin: 0; }
  /* ligne de modification : toute la largeur */
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-edition { display: block; }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-edition[hidden] { display: none; }
  body.kw-client .kwdns .kwdns-tableau tr.kwdns-edition > td { display: block; padding: 12px 16px !important; }
}

/* ── 10. Espace client : l'orange, couleur principale ; menu de l'avatar ; défauts des listes (lot ORANGE, 15/10/2026) ──
   Dirigeant (captures) : « la couleur orange n'est pas représentative alors que c'est la couleur principale ». Le bleu
   marquait tous les éléments actifs (94 emplois : menu, onglets, filtres, pagination, liens de retour, survols).
   Ils passent à l'orange du logo : fond orange doux, texte orange foncé, bordures et barres orange. */
html body.kw-client, html.dark-mode body.kw-client { --bleu: var(--orange-texte); --bleu-doux: var(--orange-doux); }
body.kw-client .kc-menu li.actif > a { box-shadow: inset 3px 0 0 var(--orange); }
body.kw-client.kw-rtl .kc-menu li.actif > a { box-shadow: inset -3px 0 0 var(--orange); }
body.kw-client .kc-menu li.actif > a .kc-ic { color: var(--orange-fonce); }
body.kw-client :is(.kc-filtre.actif, .kw-inv-filters .list-group-item.kw-inv-filter-pill.active, .kw-products-page .kw-filter-btn.active,
  .kw-products-page .kw-fam-tile.kw-fam-active, .dataTables_paginate .page-item.active .page-link) { border-color: var(--orange) !important; }
body.kw-client .kw-dd-page .kw-dd-nav-item.active { border-bottom-color: var(--orange); }
body.kw-client .kw-user-avatar { background: var(--orange); color: var(--sur-orange, #0f1733); }
/* écran tactile : l'état « survol » restait collé après un appui (nom de domaine souligné) */
@media (hover: none) {
  body.kw-client a.kc-dom:hover, body.kw-client .kw-products-page .kw-product-name:hover { color: inherit; text-decoration: none; }
}

/* Menu de l'avatar : avatar et nom en tête, une icône en tuile par entrée (icônes posées par kw-ds-client-icones.js). */
body.kw-client .kw-profile-dropdown-header { display: flex; align-items: center; gap: 12px; }
body.kw-client .kw-pf-avatar { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--orange); color: var(--sur-orange, #0f1733); font: 700 17px var(--corps); }
body.kw-client .kw-pf-id { min-width: 0; }
body.kw-client .kw-profile-item { justify-content: flex-start; gap: 12px; min-height: 46px; padding: 4px 10px; }
body.kw-client .kw-pf-ico { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--fond); color: var(--gris); }
body.kw-client .kw-pf-ico .kw-ico { width: 17px; height: 17px; margin: 0; }
body.kw-client .kw-profile-item:hover .kw-pf-ico { background: var(--orange-doux); color: var(--orange-fonce); }
body.kw-client .kw-profile-item-logout .kw-pf-ico { background: var(--rl-rouge-doux, #fdeceb); color: inherit; }

/* Liste des domaines */
body.kw-client .kc-dom-ligne .kc-col-etat { justify-self: start; }
@media (max-width: 600px) {
  body.kw-client .kc-ligne-actions .kc-btn:has(.kw-prix) { flex-direction: column; gap: 0; line-height: 1.15; padding-block: 5px; }
  body.kw-client .kc-ligne-actions .kc-btn:has(.kw-prix) .kw-ico-btn { display: none; }
  body.kw-client .kc-ligne-actions .kc-btn .kw-prix { font-size: 12.5px; font-weight: 600; }
}
/* Cartes de service */
body.kw-client .kw-fam-back a { gap: 4px; }
@media (max-width: 600px) {
  body.kw-client .kw-product-dates { flex-direction: column; align-items: flex-start; gap: 2px; }
  body.kw-client .kw-products-page .kw-date-sep { display: none; }
}
body.kw-client .kw-profile-item > span.kw-pf-ico { flex: none; }
body.kw-client .kc-etat { width: fit-content; max-width: max-content; flex: 0 0 auto; justify-self: start; }

/* ── 11. Mode sombre de « Commander pour un de mes domaines », total de la messagerie, pagination (lot SOMBRE, 15/10/2026) ──
   Dirigeant (captures en mode sombre). Mesuré : sur kw_order_existing, noms et prix des offres, « Annuel », « 3 au
   choix », « Pour le domaine », titres des familles et barre du bas écrits en #0F172A sur fond sombre (1,1:1) ;
   badge de remise vert foncé (3,3:1). Les autres pages de l'espace client étaient lisibles. */
html.dark-mode body.kw-client .kwoe { --kw-dark: var(--encre); --kw-primary-text: var(--orange-texte); }
html.dark-mode body.kw-client .kwoe .kwoe-sous-btn.on { background: var(--encre); border-color: var(--encre); color: var(--surface); }
html.dark-mode body.kw-client .kwoe .kwoe-sous-btn.on span { color: inherit; opacity: .7; }
html.dark-mode body.kw-client .kwoe .kwoe-periode-btn em { color: #6fd39c; background: rgba(111, 211, 156, .14); }
/* Messagerie : « À payer aujourd'hui » — un texte (« indiqué sur la facture ») n'est plus écrit en très grand */
body.kw-client .kwmsg-total { flex-wrap: wrap; }
body.kw-client .kwmsg-total strong { font-size: 18px; line-height: 1.25; text-align: end; }
@media (max-width: 600px) {
  body.kw-client .kwmsg-total { flex-direction: column; align-items: flex-start; gap: 4px; }
  body.kw-client .kwmsg-total strong { text-align: start; }
  /* Factures : pagination sur une ligne, flèches au lieu de « Précédent » / « Suivant » */
  body.kw-client .kw-inv-page .dataTables_paginate { float: none; width: 100%; text-align: center; padding: 12px 8px; }
  body.kw-client .kw-inv-page .dataTables_paginate .pagination { flex-wrap: nowrap; justify-content: center; gap: 4px; }
  body.kw-client .kw-inv-page .dataTables_paginate .page-link { min-width: 38px; height: 40px; padding: 0 8px; }
  body.kw-client .kw-inv-page .dataTables_paginate .page-item.previous .page-link,
  body.kw-client .kw-inv-page .dataTables_paginate .page-item.next .page-link { font-size: 0; }
  body.kw-client .kw-inv-page .dataTables_paginate .page-item.previous .page-link::before { content: "‹"; font-size: 22px; line-height: 1; }
  body.kw-client .kw-inv-page .dataTables_paginate .page-item.next .page-link::before { content: "›"; font-size: 22px; line-height: 1; }
  body.kw-client.kw-rtl .kw-inv-page .dataTables_paginate .page-item.previous .page-link::before { content: "›"; }
  body.kw-client.kw-rtl .kw-inv-page .dataTables_paginate .page-item.next .page-link::before { content: "‹"; }
}

/* ── 12. Cartes calées à gauche (lot SOMBRE, 15/10/2026) ──
   Dirigeant : « certaines cartes sont trop à gauche et laissent beaucoup d'espace à droite ». Mesuré : offres de
   « Commander pour un de mes domaines » (2 cartes, 538 px vides à droite) et « Ajouter un service » (2 cartes).
   Les colonnes vides disparaissent (auto-fit au lieu d'auto-fill) et les cartes se centrent ; à 3 cartes et plus,
   la grille reste pleine. */
body.kw-client .kwoe .kwoe-offres { grid-template-columns: repeat(auto-fit, minmax(230px, 340px)); justify-content: center; }
body.kw-client .kw-as-page .kw-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 260px)); justify-content: center; }
body.kw-client .kwoe .kwoe-sous { justify-content: center; }