/* ===========================================================================
   G&G Hosting Service — domaines
   ===========================================================================
   Liste, détail à onglets, serveurs de noms, zone DNS, redirections, WHOIS,
   code de transfert, options, gestion groupée, et la grille tarifaire
   publique.

   Dix gabarits, quatre surchargés seulement : les six autres n'avaient aucun
   défaut de structure et ne reçoivent que de la peinture.
   =========================================================================== */


/* ===========================================================================
   1. Onglets — voir gg-sombre.css
   ---------------------------------------------------------------------------
   Passés dans la couche partagée au lot 14 : `.nav-tabs` est employé par
   clientareaproductdetails.tpl (lot 5) autant que par les pages de
   domaines. Ses onglets étaient sans style depuis le lot 5.
   =========================================================================== */

/* ===========================================================================
   2. Formulaires des domaines
   ===========================================================================
   Serveurs de noms, zone DNS, redirections : des tableaux de champs, où
   l'en-tête de colonne tient lieu d'étiquette. C'est une association
   légitime quand le tableau a de vrais `<th>` — vérifié, c'est le cas.
   =========================================================================== */
.gg-dom .form-control,
.tab-content .form-control,
.tab-content select.form-control {
    background-color: var(--gg-ground);
    border: 1px solid var(--gg-line);
    color: var(--gg-text);                     /* 17,40 */
}
.tab-content .form-control:focus {
    background-color: var(--gg-ground);
    border-color: #FF6C3A;
    color: var(--gg-text);
    box-shadow: 0 0 0 3px rgba(255, 108, 58, .24);
}
.tab-content label {
    font-family: var(--f-head);
    font-weight: 600;
    font-size: .85rem;
    color: var(--gg-text);
}
/* Les champs WHOIS, dont chaque étiquette est désormais associée à son champ
   (voir clientareadomaincontactinfo.tpl). Un formulaire long : on resserre. */
.tab-content .form-group {
    margin-bottom: 14px;
}


/* ===========================================================================
   3. Grille tarifaire publique
   =========================================================================== */
.gg-dom-prix .featured-tld {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 9px;
    padding: 16px 12px;
    margin-bottom: 14px;
    text-align: center;
}
/* UNE PLAQUE BLANCHE SOUS LE LOGO, et c'est délibéré sur un thème sombre.

   Ces images sont les logos des registres — `/assets/img/tld_logos/com.png`,
   `net.png`… Ce sont des marques de tiers, dessinées pour un fond blanc et
   livrées en PNG opaque sur rien. Le « .net » de Verisign est du texte NOIR :
   posé sur notre #232120, il disparaît, et la mention « powered by VERISIGN »
   du « .com » aussi. Constaté sur la page de production : le .com restait
   lisible par son bleu, le .net était un rectangle vide.

   On ne peut ni les recolorer — ce sont des marques déposées — ni les
   remplacer. La seule issue correcte est de leur rendre le fond pour lequel
   elles ont été dessinées. La plaque est cantonnée à l'image, pas à la carte,
   pour qu'elle se lise comme ce qu'elle est : un cartouche de marque tierce,
   et non une fuite du thème clair.

   La couleur de texte n'est pas décorative : le gabarit écrit
   `alt="{$tldinfo.tld}"`, et un logo manquant — extension récente, fichier
   absent — affiche ce texte de remplacement. Sans cette ligne il hériterait
   du blanc de la page et serait invisible sur la plaque. */
.gg-dom-prix .featured-tld .img-container {
    background: #FFFFFF;
    color: #1A1A1A;              /* 17,40 — le texte de remplacement d'un logo absent */
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
}
.gg-dom-prix .featured-tld img {
    max-height: 34px;
    width: auto;
}
/* --- Le bandeau de prix d'une extension ---------------------------------
   Le parent pose `background:#f9f9f9; color:#555` par défaut, puis SEIZE
   couleurs de marque de registre, toutes avec du texte blanc.

   Quatorze de ces seize échouent. Mesuré sur chaque fond :

     blog   #a0d5cb  1,63     online #38ce6a  2,06     store  #0eadb3  2,75
     net    #efc00e  1,72     social #ff9a00  2,13     name   #44b03e  2,79
     live   #ff9e19  2,07     website#2db9ea  2,27     com    #3aa4da  2,80
     tech   #0db04b  2,87     shop   #ff5900  3,14     rocks  #fd563c  3,19
     host   #ed4d42  3,66     tv     #ea3438  4,16

   Seuls `club` #053796 (10,54) et `couk` #1d3774 (11,35) passent : ce sont
   les deux seuls fonds foncés.

   LES FONDS NE SONT PAS TOUCHÉS — ce sont des identités de marque, et les
   changer serait une faute d'un autre ordre. Seule la couleur du TEXTE est
   recalculée, exactement comme pour les pastilles d'état au lot 1.

   Une exception : `.tv` #ea3438 n'admet AUCUNE couleur conforme — blanc
   4,16, anthracite 4,18. Son fond descend donc de cinq points de clarté, à
   #E81D21, teinte et saturation inchangées : le rouge est le même à l'œil,
   et le blanc y passe à 4,54. Même traitement que `#d9534f` au lot 1. */
.gg-dom-prix .featured-tld .price {
    margin-top: 8px;
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
/* Le bandeau par défaut, sans classe d'extension. */
body .gg-dom-prix .featured-tld .price {
    background-color: var(--gg-surface-2);
    color: var(--gg-text);                     /* 13,58 */
}
/* Les quatorze fonds clairs passent en texte anthracite. */
body .featured-tld .price.blog,
body .featured-tld .price.com,
body .featured-tld .price.host,
body .featured-tld .price.live,
body .featured-tld .price.name,
body .featured-tld .price.net,
body .featured-tld .price.online,
body .featured-tld .price.rocks,
body .featured-tld .price.shop,
body .featured-tld .price.social,
body .featured-tld .price.store,
body .featured-tld .price.tech,
body .featured-tld .price.website {
    color: #1A1A1A;
}
body .featured-tld .price.tv {
    background-color: #E81D21;                 /* était #ea3438 */
    color: #FFFFFF;                            /* 4,54 */
}
/* club et couk gardent leur blanc : 10,54 et 11,35 sur fond marine. */

/* Le sélecteur de devise, maintenant accompagné d'un vrai bouton. */
.gg-dom-devise {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
}
.gg-dom-devise .form-control {
    background-color: var(--gg-surface);
    border: 1px solid var(--gg-line);
    color: var(--gg-text);
    width: auto;
}

/* --- Les filtres de catégorie -------------------------------------------
   Devenus des <button> (voir domain-pricing.tpl). Bootstrap met du blanc sur
   `.badge-secondary` #6C757D — 4,68, ce qui passe — et sur `.badge-success`
   #28A745 — 3,13, ce qui échoue. L'état « actif » prend donc l'orange de
   marque et son texte anthracite, à 6,18.

   La classe `badge-success` est CONSERVÉE comme marqueur d'état : c'est elle
   que le JavaScript ajoute et retire. On ne change que sa peinture. */
.tld-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}
body .tld-filters button {
    border: 1px solid var(--gg-line);
    background-color: var(--gg-surface-2);
    color: var(--gg-text);                     /* 13,58 */
    font-family: var(--f-head);
    font-size: .74rem;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 20px;
    cursor: pointer;
}
body .tld-filters button:hover {
    border-color: #FF6C3A;
}
body .tld-filters button:focus-visible {
    outline: 2px solid #FF6C3A;
    outline-offset: 2px;
}
body .tld-filters button.badge-success {
    background-color: #FF6C3A;
    border-color: #FF6C3A;
    color: #1A1A1A;                            /* 6,18 */
}

.gg-dom-prix td,
.gg-dom-prix th {
    font-variant-numeric: tabular-nums;
}


/* ===========================================================================
   4. Gestion groupée
   ===========================================================================
   bulkdomainmanagement.tpl n'est pas surchargé : sa structure est correcte.
   Il affiche des cases à cocher par domaine, dont la cible doit être
   confortable au doigt.
   =========================================================================== */
.bulk-actions-container,
#bulkActionForm .form-check {
    padding: 4px 0;
}


/* ===========================================================================
   5. Adaptations mobiles
   =========================================================================== */
@media (max-width: 575px) {
    /* Les onglets empilés en mobile sont dans gg-sombre.css, avec le reste
       de leur traitement — une règle scindée entre deux feuilles est pire
       que mal rangée. C'est l'erreur commise au lot 12. */
    body .tab-content {
        border-top: 1px solid var(--gg-line);
        border-radius: 9px;
        margin-top: 8px;
    }
    .gg-dom-devise {
        flex-wrap: wrap;
    }
}