/* ===========================================================================
   G&G Hosting Service — composants de l'espace client
   ---------------------------------------------------------------------------
   Chargée APRÈS gg-sombre.css, qui porte les polices, les jetons, le fond de
   page et le chrome du thème parent.

   Portée : clientareahome.tpl et clientareainvoices.tpl.

   Contrainte à connaître avant de toucher au tableau des factures : il est
   rendu par DataTables, et le tri comme le filtre reposent sur des INDICES de
   colonnes codés dans clientareainvoices.tpl (`filterColumn="5"`,
   `table.order([4,'desc'],[2,'asc'])`). On peut restyler, jamais réordonner
   ni retirer une colonne.
   =========================================================================== */

/* ===========================================================================
   1. Tuiles du tableau de bord
   ---------------------------------------------------------------------------
   Le gabarit parent les code en dur (quatre `.tile` dans `.tiles`), donc on
   peut les reprendre. Les panneaux en dessous, eux, viennent de l'arbre
   $panels et sont extensibles par hook : on ne les code jamais en dur.
   =========================================================================== */
.tiles .tile {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 8px;
    color: var(--gg-text);
    text-decoration: none;
    display: block;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s;
}
.tiles .row.no-gutters > [class*="col-"] {
    padding: 0 6px 12px;
}
.tiles .tile:hover,
.tiles .tile:focus {
    border-color: #FF6C3A;
    color: var(--gg-text);
}
.tiles .tile i {
    color: var(--gg-faint);
    font-size: 1rem;
    margin-bottom: 10px;
    display: block;
}
.tiles .tile .stat {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--gg-text);
}
.tiles .tile .title {
    font-size: .78rem;
    color: var(--gg-muted);
    margin-top: 4px;
}
/* Le parent pose une bande de couleur par tuile (bleu, vert, rouge, or). Elles
   ne veulent rien dire ici — quatre couleurs pour quatre compteurs, ce n'est
   pas de la sémantique, c'est de la décoration. Neutralisées. */
.tiles .tile .highlight {
    display: none;
}

/* La tuile « à régler » porte un MONTANT, pas un compteur : c'est la seule qui
   demande une action, elle prend donc l'orange. Les autres restent neutres. */
.tiles .tile--du .stat {
    color: #FF6C3A;
    font-size: 1.45rem;
}

/* ===========================================================================
   2. Panneaux du tableau de bord
   ---------------------------------------------------------------------------
   Rendus depuis $panels. On ne touche qu'aux surfaces : ajouter ou retirer un
   panneau se fait par le hook ClientAreaHomepagePanels, jamais ici.
   =========================================================================== */
.client-home-cards .card {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 8px;
    margin-bottom: 16px;
}
.client-home-cards .card-header {
    background: transparent;
    border-bottom: 1px solid var(--gg-line);
    padding: 14px 20px;
}
.client-home-cards .card-title {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: .94rem;
    letter-spacing: -.01em;
    color: var(--gg-text);
}
.client-home-cards .card-body {
    padding: 16px 20px;
    color: var(--gg-muted);
}
/* Un card-footer vide laisse une bande morte : le parent en émet un
   systématiquement, même sans contenu. */
.client-home-cards .card-footer {
    background: transparent;
    border-top: 0;
    padding: 0;
}
.client-home-cards .card-footer:not(:empty) {
    border-top: 1px solid var(--gg-line);
    padding: 12px 20px;
}

/* Le parent colore le liseré des cartes via .card-accent-* */
.client-home-cards .card[class*="card-accent-"] {
    border-top: 2px solid var(--gg-surface-3);
}

.client-home-cards .list-group-item {
    background: transparent;
    border-color: var(--gg-line-soft);
    color: var(--gg-muted);
    padding: 11px 20px;
}
.client-home-cards .list-group-item-action:hover,
.client-home-cards .list-group-item-action:focus {
    background: rgba(255, 255, 255, .035);
    color: var(--gg-text);
}
.client-home-cards .list-group-item .badge {
    background: var(--gg-surface-3);
    color: var(--gg-text);
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   3. Tableaux de données — contrôles DataTables
   ---------------------------------------------------------------------------
   L'habillage GÉNÉRIQUE des tableaux (.table, .table-container) est passé
   dans gg-sombre.css : l'état du réseau en affiche un, et il ne charge pas
   cette feuille. Seuls les contrôles de DataTables restent ici — ils
   n'existent que dans l'espace client.
   =========================================================================== */

/* DataTables : ses propres contrôles, en version sombre. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--gg-ground);
    border: 1px solid var(--gg-line);
    border-radius: 4px;
    color: var(--gg-text);
    padding: 5px 10px;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    color: var(--gg-muted);
    font-size: .82rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--gg-muted) !important;
    border-color: var(--gg-line) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #FF6C3A !important;
    border-color: #FF6C3A !important;
    color: #1A1A1A !important;   /* 6,18 */
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--gg-surface-3) !important;
    color: var(--gg-text) !important;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
}

/* ===========================================================================
   4 et 5. Bandeau de chiffres et en-tête de page — voir gg-sombre.css
   ---------------------------------------------------------------------------
   Passés dans la couche partagée au lot 12 : sept gabarits emploient
   .gg-ec-head, et deux .gg-resume. Trouvé par theme/rangement.py.
   =========================================================================== */

/* ===========================================================================
   6. Alertes — voir gg-sombre.css
   ---------------------------------------------------------------------------
   Passées dans la couche partagée : contact.tpl et serverstatus.tpl en
   affichent, et le fond clair de Bootstrap y laissait les liens à 1,75.
   =========================================================================== */

/* ===========================================================================
   7. Formulaires
   =========================================================================== */
body .form-control,
body .custom-select {
    background-color: var(--gg-ground);
    border-color: var(--gg-line);
    color: var(--gg-text);
}
body .form-control:focus,
body .custom-select:focus {
    background-color: var(--gg-ground);
    border-color: #FF6C3A;
    color: var(--gg-text);
    box-shadow: 0 0 0 3px rgba(255, 108, 58, .22);
}
body .form-control::placeholder {
    color: var(--gg-faint);
}
body label {
    color: var(--gg-muted);
    font-size: .82rem;
}

/* ===========================================================================
   8. Adaptations mobiles
   =========================================================================== */
@media (max-width: 767px) {
    .gg-resume {
        grid-template-columns: minmax(0, 1fr);
    }
    .table-container {
        padding: 4px 12px 12px;
    }
}

@media (max-width: 575px) {
    .tiles .tile {
        padding: 14px;
    }
    .tiles .tile .stat {
        font-size: 1.4rem;
    }
    .gg-ec-head {
        padding: 16px 0 14px;
    }
}

/* ===========================================================================
   9. SUPPORT — liste des tickets et fil de discussion
   ---------------------------------------------------------------------------
   Portée : supportticketslist.tpl et viewticket.tpl.

   Contraintes relevées dans les gabarits d'origine, à ne pas casser :
     - supportticketslist.tpl est rendu par DataTables, avec `filterColumn="2"`
       et des indices de colonnes 0 à 3. Quatre colonnes, ni plus ni moins.
     - Le JavaScript de WHMCS dépend de `.markdown-editor`, `.custom-file-input`,
       `.file-upload`, `#fileUploadsContainer`, `#btnTicketAttachmentsAdd`,
       `.rating` et `.star`. Vérifié par comptage dans le JS du thème : ces
       sélecteurs y apparaissent respectivement 13, 3, 3, 3, 3, 12 et 126 fois.
       Les classes sont donc conservées telles quelles ; seul leur habillage
       change.
     - `#ticketReplyContainer` est la cible de `smoothScroll()` appelé par le
       bouton « Répondre », et `#ticketReply` est rappelé par le bouton
       d'annulation du formulaire. Les deux identifiants restent.
   =========================================================================== */

/* --- Canaux d'assistance --------------------------------------------------
   Aucun délai de réponse n'est affiché : ce serait un engagement public, et
   les valeurs de la maquette (12 min sur WhatsApp, 2 h sur ticket) n'ont
   jamais été validées. À ajouter le jour où elles le sont. */
.gg-canaux {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.gg-canal {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gg-canal__t {
    font-family: var(--f-head);
    font-size: .94rem;
    font-weight: 700;
    color: var(--gg-text);
}
.gg-canal__d {
    font-size: .8rem;
    color: var(--gg-muted);
    flex: 1;
    margin: 0;
}
.gg-canal .btn,
.gg-canal .gg-btn {
    align-self: flex-start;
}

/* --- Liste des tickets ----------------------------------------------------
   Le numéro de ticket est en chiffres tabulaires : une colonne de #814299 et
   #814300 doit s'aligner. Le sujet non lu passe en gras et en blanc — c'est
   la seule information de la ligne qui demande une action. */
.ticket-number {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    color: var(--gg-faint);
    margin-right: 10px;
}
.ticket-subject {
    color: var(--gg-muted);
}
.ticket-subject.unread {
    color: var(--gg-text);
    font-weight: 600;
}
/* Le parent pose une bordure gauche sur le lien du sujet. */
body .table-list td a.border-left {
    border-left: 2px solid var(--gg-line) !important;
    padding-left: 12px;
    text-decoration: none;
}
body .table-list td a.border-left:hover .ticket-subject {
    color: #FF9470;
}

/* --- Fil de discussion ----------------------------------------------------
   Les réponses de l'équipe portent la classe `staff`, posée par le gabarit
   d'origine depuis `$reply.admin`. On s'en sert pour les distinguer d'un
   liseré orange plutôt que d'un fond coloré : sur fond sombre, un aplat
   teinté sur toute la hauteur d'un long message fatigue la lecture. */
.view-ticket {
    background: transparent;
    border: 0;
}
.ticket-reply {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.ticket-reply.staff {
    border-color: rgba(255, 108, 58, .35);
    box-shadow: inset 3px 0 0 #FF6C3A;
}
.ticket-reply .posted-by {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 18px;
    border-bottom: 1px solid var(--gg-line);
    font-size: .8rem;
    color: var(--gg-faint);
}
.ticket-reply .posted-by-name {
    font-family: var(--f-head);
    font-weight: 600;
    color: var(--gg-text);
}
.ticket-reply .posted-on {
    font-variant-numeric: tabular-nums;
}
/* La pastille de type de demandeur — client, contact, opérateur. */
.requestor-badge {
    font-family: var(--f-head);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--gg-surface-3);
    color: var(--gg-text);
    margin-left: auto;
}
.ticket-reply.staff .requestor-badge {
    background: #FF6C3A;
    color: #1A1A1A;   /* 6,18 */
}
.ticket-reply .message {
    color: #E8E6E4;
    font-size: .92rem;
    line-height: 1.68;
}
.ticket-reply .message > :first-child { margin-top: 0; }
.ticket-reply .message > :last-child { margin-bottom: 0; }
.ticket-reply .message hr {
    border: 0;
    border-top: 1px solid var(--gg-line);
    margin: 16px 0 10px;
}
.ticket-reply .message a { color: #FF9470; }
.ticket-reply .message strong { color: #fff; }
.ticket-reply .message pre {
    background: var(--gg-surface-2);
    border: 1px solid var(--gg-line);
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;   /* jamais de défilement latéral de la page */
}
.ticket-reply .message code {
    background: var(--gg-surface-2);
    border: 1px solid var(--gg-line);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: .88em;
    color: #fff;
}
.ticket-reply .message table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
}

/* --- Pièces jointes ------------------------------------------------------- */
.ticket-reply .attachments {
    border-top: 1px solid var(--gg-line);
    background: rgba(255, 255, 255, .02);
    font-size: .82rem;
    color: var(--gg-muted);
}
.attachment-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.attachment-list a,
.attachment-list > li > span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--gg-line);
    border-radius: 6px;
    background: var(--gg-ground);
    text-decoration: none;
    color: var(--gg-muted);
    font-size: .8rem;
}
.attachment-list a:hover {
    border-color: #FF6C3A;
    color: #FF9470;
}
.attachment-list figure {
    margin: 0;
}

/* --- Notation d'une réponse ----------------------------------------------
   `.rating` et `.star` sont pilotés par le JavaScript de WHMCS : on ne touche
   qu'aux couleurs. L'état actif prend l'orange de marque. */
.ticket-reply .rating,
.ticket-reply .rating-done {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gg-line);
}
.ticket-reply .star {
    color: var(--gg-surface-3);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
}
.ticket-reply .star::before {
    content: "\2605";
}
.ticket-reply .star.active,
.ticket-reply .rating:hover .star {
    color: #FF6C3A;
}
.ticket-reply .rated {
    margin-left: 10px;
    font-size: .78rem;
    color: var(--gg-faint);
}

/* --- Formulaire de réponse ----------------------------------------------- */
#ticketReplyContainer {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 8px;
    margin-top: 24px;
}
#ticketReplyContainer .card-title {
    font-family: var(--f-head);
    font-size: .94rem;
    font-weight: 700;
    color: var(--gg-text);
    margin-bottom: 16px;
}
body textarea.form-control,
body textarea.markdown-editor {
    background-color: var(--gg-ground);
    border-color: var(--gg-line);
    color: var(--gg-text);
    min-height: 180px;
}
/* Le sélecteur de fichier de Bootstrap 4 : son étiquette est un pseudo-élément
   dont le fond est posé par le thème, d'où la surcharge en deux temps. */
body .custom-file-label,
body .custom-file-label::after {
    background-color: var(--gg-surface-2);
    border-color: var(--gg-line);
    color: var(--gg-muted);
}
body .custom-file-input:focus ~ .custom-file-label {
    border-color: #FF6C3A;
    box-shadow: 0 0 0 3px rgba(255, 108, 58, .22);
}

/* --- Actions sur le ticket ------------------------------------------------ */
.view-ticket .card-title {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    color: var(--gg-text);
}
.ticket-actions {
    display: inline-flex;
    gap: 8px;
}

@media (max-width: 767px) {
    .gg-canaux {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .ticket-reply .posted-by {
        padding: 10px 14px;
    }
    .requestor-badge {
        margin-left: 0;
    }
    .ticket-number {
        display: block;
        margin-bottom: 2px;
    }
}

/* Le parent pose `.view-ticket .posted-by { background-color: #f6f6f6 }` —
   une bande claire en tête de chaque réponse, sur laquelle le texte sombre du
   thème tombe à 2,57 et le nom en blanc à 1,08. Spécificité (0,2,0), donc un
   `.ticket-reply .posted-by` (0,2,0) déclaré plus tard suffit à la battre. */
.ticket-reply .posted-by,
.view-ticket .posted-by {
    background-color: rgba(255, 255, 255, .03);
    color: var(--gg-faint);
}

#ticketReplyContainer .card-body {
    padding: 20px;
}

/* ===========================================================================
   10. DÉTAIL D'UN SERVICE — clientareaproductdetails.tpl
   ---------------------------------------------------------------------------
   Le gabarit est dérivé du parent, pas réécrit : il porte une douzaine de
   branches d'intégration ($tplOverviewTabOutput, $moduleclientarea,
   $dynamicUpgradeUrl, $packagesupgrade, $modulecustombuttonresult, les
   informations SSL, les options configurables, les champs personnalisés…) que
   réécrire de mémoire aurait amputées. Seul l'onglet des jauges a été retiré.

   ⚠️ $moduleclientarea est du HTML émis par le MODULE SERVEUR, pas par le
   thème. C'est lui qui produit les boutons d'accès au panneau d'hébergement,
   et son balisage nous échappe. Les règles génériques ci-dessous l'habillent
   au mieux — boutons, tableaux, listes — mais un module qui poserait ses
   propres couleurs en ligne passerait outre. À regarder sur l'installation.
   =========================================================================== */

/* --- Surfaces blanches du parent -----------------------------------------
   Quatre fonds blancs à neutraliser, dont un en `!important` :
     .responsive-tabs-sm                        { background: #fff }
     .responsive-tabs-sm .nav-item a.active     { background-color: #fff !important }
     .responsive-tabs-sm-connector .channel     { background: #fff }
     div.product-details-tab-container          { background-color: #fff }
   Le gabarit pose aussi `class="tab-content bg-white …"` en dur, et
   l'utilitaire .bg-white de Bootstrap est lui-même en `!important`. */
body .tab-content.bg-white,
body div.product-details-tab-container,
body .responsive-tabs-sm,
body .responsive-tabs-sm .nav-item a.active,
body .responsive-tabs-sm-connector .channel {
    background-color: var(--gg-surface) !important;
    border-color: var(--gg-line) !important;
}
body .responsive-tabs-sm .nav-item a:hover {
    background-color: var(--gg-surface-3);
}

/* --- Bandeau d'état du service --------------------------------------------
   Le parent pose la couleur d'état sur la CARTE : `<div class="product-status
   product-status-active">`. Les deux classes sont sur le même élément et de
   même spécificité (0,1,0), si bien que la dernière déclarée gagne — ma règle
   effaçait donc la couleur d'état sans le dire. D'où le `!important` ici, et
   la couleur redescendue sur le bandeau juste au-dessus. Trouvé au banc. */
.product-status {
    background: var(--gg-surface) !important;
    border: 1px solid var(--gg-line);
    border-radius: 8px;
    overflow: hidden;
}
/* `div.product-details div.product-icon { background-color: #efefef }` —
   spécificité (0,2,2), un simple `.product-icon` perd. */
body div.product-details div.product-icon,
.product-icon {
    background-color: transparent;
    padding: 22px 16px 16px;
}
.product-icon .fa-stack {
    color: var(--gg-surface-3);
    margin-bottom: 10px;
}
.product-icon .fa-inverse {
    color: var(--gg-text);
}
.product-icon h3 {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -.02em;
    color: var(--gg-text);
    margin: 0;
}
.product-icon h4 {
    font-size: .84rem;
    color: var(--gg-muted);
    margin: 4px 0 0;
}
.product-status-text {
    font-family: var(--f-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
}

/* 6 bandeaux d'etat — GENERE par « rampe.py --statuts --bandeaux ».
   Ne pas editer a la main : relancer apres une montee de version. */

/* La couleur d'etat du parent est posee sur la CARTE entiere ; le theme
   veut une carte neutre et un bandeau colore. Le fond est donc redescendu
   sur .product-status-text, avec sa couleur de texte calculee. */

.product-status-active .product-status-text {
    background-color: #46A546;
    color: #1A1A1A;                         /* 5.58 */
}

.product-status-cancelled .product-status-text {
    background-color: #666666;
    color: #FFFFFF;                         /* 5.74 */
}

.product-status-fraud .product-status-text {
    background-color: #000000;
    color: #FFFFFF;                         /* 21.00 */
}

.product-status-pending .product-status-text {
    background-color: #F89406;
    color: #1A1A1A;                         /* 7.65 */
}

.product-status-suspended .product-status-text {
    background-color: #0768B8;
    color: #FFFFFF;                         /* 5.70 */
}

.product-status-terminated .product-status-text {
    background-color: #666666;
    color: #FFFFFF;                         /* 5.74 */
}

/* --- Actions sur le service ----------------------------------------------- */
.product-actions-wrapper {
    margin-top: 12px;
}
.product-actions-wrapper [class*="col-"] {
    margin-bottom: 8px;
}
/* Le parent utilise .btn-success pour la montée en gamme : l'orange de marque
   dit « action » aussi bien, et le vert ne veut rien dire ici. */
body .product-actions-wrapper .btn-success {
    background-color: #FF6C3A;
    border-color: #FF6C3A;
    color: #1A1A1A;   /* 6,18 */
}
body .product-actions-wrapper .btn-success:hover {
    background-color: #FF9470;
    border-color: #FF9470;
    color: #1A1A1A;   /* 8,06 */
}

/* --- Onglets internes ----------------------------------------------------- */
body .responsive-tabs-sm .nav-link {
    color: var(--gg-muted);
    border-color: var(--gg-line);
}
body .responsive-tabs-sm .nav-link.active {
    color: var(--gg-text);
    border-bottom-color: #FF6C3A;
}

/* --- Détails et informations SSL ------------------------------------------
   Le gabarit aligne des paires intitulé / valeur en colonnes Bootstrap.
   Les valeurs sont souvent des dates ou des adresses IP : chiffres tabulaires
   pour qu'une colonne de dates s'aligne. */
.product-details .row strong {
    color: var(--gg-muted);
    font-weight: 500;
}
#domain .row,
#additionalinfo .row,
#ssl-info .row {
    padding: 7px 0;
    border-bottom: 1px solid var(--gg-line-soft);
}
#domain .row:last-child,
#additionalinfo .row:last-child,
#ssl-info .row:last-child {
    border-bottom: 0;
}
#ssl-expirydate,
#ssl-startdate,
#statusDisplayLabel {
    font-variant-numeric: tabular-nums;
}

/* --- Sortie du module serveur --------------------------------------------
   Habillage générique : on ne connaît pas son balisage. */
#manage .btn-default,
#manage .btn {
    margin: 0 6px 6px 0;
}
#manage table {
    width: 100%;
    display: block;
    overflow-x: auto;
}

@media (max-width: 575px) {
    .product-icon {
        padding: 16px 12px 12px;
    }
    .product-icon h3 {
        font-size: 1.1rem;
    }
}


/* ===========================================================================
   11. LISTE DES SERVICES — clientareaproducts.tpl
   ===========================================================================
   Le tableau lui-même est déjà habillé par la section 4 : seules les deux
   lignes de la cellule « Service » demandent une hiérarchie propre, le nom
   devant primer sur le domaine.
   =========================================================================== */
.gg-svc__nom {
    font-weight: 600;
    color: var(--gg-text);
}
.gg-svc__nom:hover,
.gg-svc__nom:focus {
    color: #FF9470;
    text-decoration: underline;
}
.gg-svc__dom {
    font-size: .82rem;
    /* #A09A95 sur la surface des tableaux : 5,76. */
    color: var(--gg-faint);
}
a.gg-svc__dom:hover,
a.gg-svc__dom:focus {
    color: #FF9470;
}


/* ===========================================================================
   12. PANNEAU « SERVICES ACTIFS » DU TABLEAU DE BORD
   ===========================================================================
   Rendu par includes/active-products-services-item.tpl, que le thème NE
   SURCHARGE PAS — voir le README. Ce partiel est émis par le PHP de WHMCS et
   porte 108 lignes de machinerie de boutons (btn-custom-action, data-serviceid,
   data-identifier, menus déroulants). Le reprendre pour en changer les
   couleurs gèlerait tout cela à chaque montée de version. On l'habille donc
   de l'extérieur.

   Les pastilles d'état ici ne sont PAS la famille .status-* du reste du site :
   le parent écrit `.label.label-{modifier}`, avec cinq modificateurs Bootstrap
   et `color: #fff` imposé par `.div-service-status .label`.
   =========================================================================== */
body .div-service-item {
    background-color: var(--gg-surface);
    border-color: var(--gg-line);
}
body .div-service-item:hover {
    border-color: var(--gg-surface-3);
}
body .div-service-name .font-weight-bold {
    color: var(--gg-text);
}
body .div-service-name .text-domain {
    color: var(--gg-faint);
}

/* --- Pastilles d'état du panneau ---------------------------------------
   Les valeurs et le choix des couleurs sont expliqués une seule fois, dans
   gg-sombre.css, où la famille `.label-*` est traitée depuis le lot 19.

   CE BLOC-CI DOIT RESTER, et sa raison est une affaire de SPÉCIFICITÉ, pas
   de zone. Je l'ai retiré une première fois en le prenant pour un doublon de
   la règle partagée ; le banc a immédiatement rendu les trois pastilles
   blanches, à 2,48 / 2,09 / 1,95 :

       theme.min.css   .div-service-status .label { color:#fff }   (0,2,0)
       gg-sombre.css   body .label-success                         (0,1,1)

   Le parent gagne dans ce contexte précis, il faut donc viser au moins aussi
   précis. Et la règle est bien chez elle dans une feuille de zone :
   `.div-service-status` n'apparaît que dans UN gabarit du parent,
   active-products-services-item.tpl. */
body .div-service-status .label-success,
body .div-service-status .label-info,
body .div-service-status .label-warning {
    color: #1A1A1A;
}
body .div-service-status .label-danger {
    background-color: #CE4946;
    color: #FFFFFF;          /* 4,50 */
}

/* La pastille « placeholder » ne sert qu'à réserver la largeur du plus long
   libellé, pour que les cartes s'alignent. Elle ne doit rien peindre. */
body .div-service-status .label-placeholder {
    background-color: transparent;
    color: transparent;
}

/* --- Boutons du panneau -------------------------------------------------
   `.btn-default` est le gris clair de Bootstrap 4 : illisible sur fond
   sombre. Les crochets du JavaScript (btn-custom-action, data-serviceid,
   dropdown-toggle) ne sont pas touchés, seule la peinture change. */
/* `.btn-default` est traité globalement dans gg-sombre.css : il apparaît
   dans sept gabarits, une règle par page serait sept sources de vérité. */
body .div-service-buttons .dropdown-menu {
    background-color: var(--gg-surface-2);
    border-color: var(--gg-line);
}
body .div-service-buttons .dropdown-item {
    color: var(--gg-text);
}
body .div-service-buttons .dropdown-item:hover,
body .div-service-buttons .dropdown-item:focus {
    background-color: var(--gg-surface-3);
    color: var(--gg-text);
}
/* Un bouton désactivé doit rester LISIBLE : il annonce une action
   indisponible, pas un texte décoratif.

   Premier choix écarté PAR LE CALCUL : #8A8A8A, repris de la couleur de
   substitut de la page d'accueil, où le fond est #1A1A1A et le ratio 4,52.
   Ici le fond est #2E2E2E, et le même gris ne donne plus que **3,93**. Un
   ratio ne se transporte pas d'un fond à l'autre.

   #B8B8B8 donne 6,85 sur #2E2E2E et 6,20 sur #383433 au survol — confortable
   dans les deux états, et nettement en retrait du blanc des boutons actifs,
   ce qui est précisément le signal recherché. */
body .div-service-buttons .dropdown-item.disabled,
body .div-service-buttons .btn.disabled {
    color: var(--gg-muted);
    opacity: 1;
}


/* ===========================================================================
   13. PARCOURS DE SUPPORT — ouverture d'une demande et évaluation
   ===========================================================================
   Gabarits concernés : supportticketsubmit-stepone / -steptwo / -confirm /
   -customfields / -kbsuggestions, et ticketfeedback.

   Deux seulement sont surchargés — stepone et ticketfeedback — et pour des
   raisons de STRUCTURE. Les autres ne reçoivent que de la peinture, d'ici.
   =========================================================================== */

/* --- L'éditeur Markdown ---------------------------------------------------
   LE DÉFAUT LE PLUS GRAVE DU THÈME À CE JOUR, et il était livré depuis le
   lot 4.

   `.md-editor` n'existe dans aucun gabarit : c'est le JavaScript de WHMCS qui
   enveloppe le <textarea class="markdown-editor"> au chargement de la page.
   Le parent impose alors :

       .md-editor > textarea.markdown-editor { background-color:#fff !important }

   Ma règle du lot 4 posait un fond sombre SANS `!important` : elle perdait.
   Le fond redevenait blanc — et ma couleur de texte, elle, restait blanche.
   **Blanc sur blanc, ratio 1,00.** Le champ de réponse à un ticket était
   purement illisible.

   Pourquoi aucun banc ne l'a vu : ils reproduisaient le <textarea> NU, tel
   qu'il est dans le gabarit. L'enveloppe est construite à l'exécution. Le banc
   la reproduit désormais à la main.

   `!important` est ici la seule réponse possible : on ne bat pas un
   `!important` par la spécificité. */
body .md-editor,
body .md-editor.active {
    border-color: var(--gg-line);
}
body .md-editor > .btn-toolbar {
    background-color: var(--gg-surface-2) !important;
    border-color: var(--gg-line);
}
body .md-editor > textarea.markdown-editor,
body .md-editor > .md-preview {
    background-color: var(--gg-ground) !important;
    border-top-color: var(--gg-line) !important;
    border-bottom-color: var(--gg-line) !important;
    color: var(--gg-text);                          /* 17,40 */
}
body .markdown-editor-status {
    color: var(--gg-faint);                         /* 5,86 sur #1A1A1A */
}

/* --- Suggestions de la base de connaissances ------------------------------
   Injectées en AJAX dans #autoAnswerSuggestions pendant la saisie. Le
   balisage vient de supportticketsubmit-kbsuggestions.tpl, non surchargé. */
body .kbarticles .list-group-item,
body .list-group-item.kb-article-item {
    background-color: var(--gg-surface);
    border-color: var(--gg-line);
}
body .kb-article-item a {
    color: #FF9470;                                 /* 7,42 sur #232120 */
}
body .kb-article-item small {
    display: block;
    margin-top: 3px;
    color: var(--gg-muted);                         /* 8,08 */
}

/* --- Tableau rayé (récapitulatif de ticketfeedback) ----------------------- */
body .table-striped tbody tr:nth-of-type(odd),
body .table-striped tbody tr:nth-of-type(odd) > td {
    background-color: rgba(255, 255, 255, .035);
}

/* --- Choix du département (étape 1) --------------------------------------
   Le parent rend les départements en liens nus avec une icône d'enveloppe.
   Le gabarit surchargé en fait des cartes cliquables : c'est le premier
   écran du parcours d'assistance, et une liste de liens bleus n'oriente
   personne. */
.gg-dept {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 8px;
}
.gg-dept__c {
    display: block;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 9px;
    padding: 18px 20px;
    text-decoration: none;
    transition: border-color .14s ease, transform .14s ease;
}
.gg-dept__c:hover,
.gg-dept__c:focus {
    border-color: #FF6C3A;
    text-decoration: none;
    transform: translateY(-2px);
}
.gg-dept__c:focus-visible {
    outline: 2px solid #FF6C3A;
    outline-offset: 2px;
}
.gg-dept__n {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gg-text);                          /* 16,03 */
}
.gg-dept__n i {
    color: #FF9470;
    font-size: .86rem;
}
/* `display:block` n'est pas cosmétique : c'est un <span>, et un élément
   inline ignore la marge verticale. Le gabarit ne peut pas utiliser <p> —
   la carte entière est un <a>, et un <p> dans un <a> est invalide. */
.gg-dept__d {
    display: block;
    margin: 7px 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--gg-muted);                         /* 8,08 */
}

/* --- Échelle d'évaluation (ticketfeedback) --------------------------------
   Le parent rend un tableau de DOUZE colonnes contenant dix boutons radio
   SANS AUCUN <label> : à la synthèse vocale, dix « bouton radio » sans valeur
   annoncée, et sur un téléphone douze colonnes illisibles.

   Le gabarit surchargé remplace le tableau par un groupe de cases étiquetées.
   Chaque radio porte son chiffre en <label>, donc une cible tactile de 44 px
   et un nom accessible. L'orange plein marque la sélection. */
.gg-note {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 4px;
}
.gg-note__o {
    position: relative;
}
/* Le radio reste dans le flux pour le clavier et la synthèse vocale : on le
   rend transparent, on ne le retire PAS avec display:none. */
.gg-note__o input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.gg-note__o label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    background: var(--gg-surface-2);
    border: 1px solid var(--gg-line);
    border-radius: 6px;
    font-family: var(--f-head);
    font-weight: 700;
    font-size: .92rem;
    color: var(--gg-text);                          /* 13,58 sur #2E2E2E */
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.gg-note__o input:hover + label {
    border-color: #FF6C3A;
}
.gg-note__o input:checked + label {
    background: #FF6C3A;
    border-color: #FF6C3A;
    color: #1A1A1A;                                 /* 6,18 */
}
/* Le focus doit rester visible alors que le radio lui-même est transparent :
   sans cette règle, la navigation au clavier devient invisible. */
.gg-note__o input:focus-visible + label {
    outline: 2px solid #FFD0A7;
    outline-offset: 2px;
}
.gg-note__b {
    display: flex;
    justify-content: space-between;
    max-width: 560px;
    font-size: .78rem;
    color: var(--gg-faint);                         /* 5,76 */
}
.gg-note__staff {
    padding: 20px 0;
    border-top: 1px solid var(--gg-line-soft);
}
.gg-note__staff:first-of-type {
    border-top: 0;
}

/* Le récapitulatif d'évaluation porte QUATRE chiffres, là où la page des
   factures en porte trois. `.gg-resume` est figé à trois colonnes : avec
   quatre enfants, le dernier se retrouverait seul sur une ligne.
   En `auto-fit`, la grille s'adapte au nombre réel sans second réglage. */
.gg-resume--4 {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Le <fieldset> qui groupe l'échelle. Les navigateurs lui posent une marge et
   une bordure par défaut, et au <legend> une taille héritée : on remet à plat
   pour que la légende se comporte comme un intertitre ordinaire. */
.gg-note__staff fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.gg-note__staff legend {
    float: none;
    width: auto;
    margin-bottom: 4px;
    padding: 0;
    font-size: 1rem;
    line-height: 1.4;
}
.gg-note__staff legend strong {
    color: #FF9470;
}

/* Le parent pose `background:#efefef` sur chaque bloc d'agent — une plaque
   gris clair. Le gabarit surchargé CONSERVE la classe (elle peut servir à du
   JavaScript ou à un style d'administration), on la repeint donc ici.

   Trouvée par le banc, et seulement parce que le balisage reproduit garde les
   classes du parent au lieu de n'employer que les miennes. Trois contrastes y
   tombaient à 1,15 · 1,88 · 2,42. */
body .ticketfeedbackstaffcont {
    background-color: transparent;
}