/* ===========================================================================
   G&G Hosting Service — pages publiques
   ===========================================================================
   Chargée par le hook sur contact et serverstatus, par-dessus gg-sombre.css.

   Les téléchargements ne sont PAS ici : ils réutilisent les composants de la
   base de connaissances — même recherche, mêmes cartes, même liste — et
   chargent donc kb.css. Une page se range avec les composants qu'elle
   emploie, pas avec son rôle dans le site.
   =========================================================================== */


/* ===========================================================================
   1. Formulaire — voir gg-sombre.css
   ---------------------------------------------------------------------------
   Passé dans la couche partagée : contact.tpl et clientareaaddfunds.tpl
   l'emploient tous deux, et ils ne chargent pas la même feuille.
   =========================================================================== */

/* ===========================================================================
   2. État du réseau — tableau des serveurs
   =========================================================================== */
.gg-etat__intro {
    color: var(--gg-muted);                   /* 8,08 */
    font-size: .88rem;
    margin: 0 0 14px;
    max-width: 70ch;
}
/* Les cellules de sonde sont remplies par le JavaScript de WHMCS, qui y
   injecte une icône verte ou rouge. On ne leur impose pas de couleur : on
   réserve seulement leur largeur, pour que le tableau ne saute pas quand les
   réponses arrivent une par une. */
.gg-etat td[id^="port"],
.gg-etat td[id^="load"],
.gg-etat td[id^="uptime"] {
    min-width: 72px;
    font-variant-numeric: tabular-nums;
}
.gg-etat .fa-spinner {
    color: var(--gg-faint);                   /* 5,76 */
}


/* ===========================================================================
   3. État du réseau — incidents
   =========================================================================== */
.gg-inc {
    display: block;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 9px;
    margin-bottom: 14px;
    overflow: hidden;
}
/* Un incident qui touche le client est la seule information de la page qui
   demande une action : il prend le liseré orange. */
.gg-inc--vous {
    border-color: #FF6C3A;
}

.gg-inc__t {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gg-line-soft);
}
.gg-inc__t h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.012em;
    color: var(--gg-text);                    /* 16,03 */
}
.gg-inc__s {
    font-size: .78rem;
    color: var(--gg-faint);                   /* 5,76 */
}

/* Pastilles de priorité. Le parent emploie badge-danger / warning / success /
   info, dont les trois dernières portent du blanc illisible — corrigé
   globalement, mais l'aplat plein reste criard sur fond sombre.

   Teintes composées sur la surface, contrastes CALCULÉS sur le fond
   RÉSULTANT et non sur la teinte pleine :

     critique  #FF8E8A sur #442A28  5,91
     haute     #F5A623 sur #453620  5,74
     moyenne   #7FB3F0 sur #30353D  5,62
     basse     #3FD39A sur #273A31  6,34

   Le sélecteur emploie `|lower` sur $issue.rawPriority, dont WHMCS renvoie
   Critical / High / Medium / Low. Une valeur inattendue ne correspond à
   aucune règle et retombe sur .gg-pill nu, qui reste lisible. */
.gg-inc__p {
    flex: none;
}
.gg-inc__p--critical { background: rgba(217, 83, 79, .18);  color: #FF8E8A; }
.gg-inc__p--high     { background: rgba(245, 166, 35, .16); color: var(--gg-warn-txt); }
.gg-inc__p--medium   { background: rgba(127, 179, 240, .14); color: var(--gg-info-txt); }
.gg-inc__p--low      { background: rgba(63, 211, 154, .14); color: var(--gg-ok-txt); }

.gg-inc__b {
    padding: 16px 18px;
}
.gg-inc__cible {
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--gg-text);
}
.gg-inc__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0 0 12px;
    padding: 0;
    font-size: .8rem;
    color: var(--gg-faint);                   /* 5,76 */
}
.gg-inc__meta i {
    margin-right: 5px;
}
.gg-inc__vous {
    margin: 0 0 12px;
    padding: 9px 12px;
    background: rgba(255, 108, 58, .12);
    border-left: 3px solid #FF6C3A;
    border-radius: 4px;
    font-size: .85rem;
    color: var(--gg-text);
}
/* La description est du HTML d'éditeur : traitement .gg-prose, mais sans la
   grande respiration d'un article — on est dans une carte. */
.gg-inc__b .gg-prose {
    font-size: .9rem;
}
.gg-inc__b .gg-prose > :first-child { margin-top: 0; }
.gg-inc__b .gg-prose > :last-child { margin-bottom: 0; }


/* ===========================================================================
   4. Adaptations mobiles
   =========================================================================== */
@media (max-width: 575px) {
    .gg-inc__t {
        padding: 12px 14px;
    }
    .gg-inc__b {
        padding: 14px;
    }
    .gg-form__duo {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ===========================================================================
   5. Pages rares — accès refusé, bannissement, redirection
   ===========================================================================
   Ajoutées au lot 16. Elles n'ont presque pas de composants propres : tout
   vient de la couche partagée. Seuls deux points demandent une règle.
   =========================================================================== */

/* La barre de progression de la page de redirection. Le parent lui donne
   `bg-color-blue`, une des couleurs d'accent de twenty-one. */
.gg-renvoi__barre {
    background-color: #FF6C3A;
}
.gg-renvoi {
    margin-top: 18px;
    font-size: .88rem;
}

/* La page de bannissement est vue par quelqu'un dont l'adresse IP est
   bloquée : elle doit rester lisible même si rien d'autre ne charge. Son
   alerte est déjà traitée dans la couche partagée ; on ne resserre que la
   liste des motifs. */
body .alert-danger ul {
    margin: 10px 0 0;
    padding-left: 20px;
}
body .alert-danger li {
    margin-bottom: 4px;
}