/* ===========================================================================
   G&G Hosting Service — couche sombre partagée
   ---------------------------------------------------------------------------
   Polices de la charte, jetons de couleur, fond de page et chrome du thème
   parent. Tout ce qui est commun aux pages traitées en sombre.

   Chargée par includes/hooks/gontcho_theme.php sur les gabarits listés dans
   gontcho_theme_pages_sombres(). Les composants propres à chaque zone vivent
   à côté : actus.css pour l'éditorial, espace-client.css pour l'espace client.

   Ce découpage existe pour une raison : ajouter une page au traitement sombre
   doit être une ligne dans un tableau du hook, pas une duplication de 170
   lignes de jetons.
   =========================================================================== */

/* --- Polices de la charte ------------------------------------------------
   Sous-ensembles latins générés depuis 01-charte/polices/ (voir
   maquette/construire.py). Chemins relatifs au fichier CSS : pas besoin de
   l'helper assetPath, et ça survit à un renommage du thème.
   font-display:swap et non block — sur une connexion mobile congestionnée,
   mieux vaut un texte lisible tout de suite dans la police système que trois
   secondes de page blanche. */
@font-face {
    font-family: 'Anton';
    src: url('../fonts/Anton.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- Jetons ---------------------------------------------------------------
   Reprennent exactement ceux de la maquette. Les gris sont biaisés chauds
   pour appartenir au même monde que l'orange ; un gris neutre à côté d'un
   orange saturé lit comme une erreur.
   Les variantes *-txt des couleurs fonctionnelles sont les seules utilisables
   EN TEXTE : la charte prévient que le vert et le bleu « passent tout juste
   sur l'anthracite ». */
:root {
    --gg-ground: #1A1A1A;
    --gg-surface: #232120;
    --gg-surface-2: #2E2E2E;
    --gg-surface-3: #383433;
    --gg-line: #3A3431;
    --gg-line-soft: #2C2927;
    --gg-text: #FFFFFF;
    --gg-muted: #B8B8B8;
    --gg-faint: #A09A95;      /* 4,88 sur la surface la plus claire */
    --gg-ok-txt: #3FD39A;     /* 9,11 sur #1A1A1A */
    --gg-info-txt: #7FB3F0;   /* 7,96 */
    --gg-warn-txt: #F5A623;   /* 8,59 */

    --f-display: 'Anton', 'Archivo', Impact, sans-serif;
    --f-head: 'Archivo', 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --f-body: 'Inter', 'Open Sans', 'Segoe UI', system-ui, sans-serif;
}

/* --- Fond de page ---------------------------------------------------------
   `body.primary-bg-color` est la classe que pose header.tpl ; la cibler évite
   un !important. */
body,
body.primary-bg-color {
    background: var(--gg-ground);
    color: var(--gg-text);
    font-family: var(--f-body);
}

/* Chrome du thème parent : barre de navigation et pied de page */
body .navbar,
body #header,
body .header-lined,
body footer,
body #footer {
    background-color: var(--gg-ground) !important;
    border-color: var(--gg-line) !important;
    color: var(--gg-muted);
}

/* --- INVERSION DES LIENS -------------------------------------------------
   Point le plus important de ce fichier, et le plus facile à manquer.

   custom.css colore les liens pour le thème CLAIR : `--primary-700` #AF3905,
   qui donne 6,16 sur blanc. Sur ces pages sombres le même orange tombe à
   **2,83** — illisible. Il faut l'orange clair #FF9470, qui donne 8,06 sur
   #1A1A1A. C'est la contrainte de la charte prise par l'autre bout.

   Les spécificités sont calibrées pour gagner sur custom.css :
     custom.css  a:not(.btn)                            → (0,1,1)
     ici         body a:not(.btn)...                     → (0,1,2)
     custom.css  .pagination > li > a.page-link          → (0,2,2)
     ici         body .pagination > li > a.page-link     → (0,2,3)
   Vérifié au banc d'essai : sans ces règles, quatre éléments échouent. */
body a:not(.btn):not(.gg-btn):not(.page-link):not(.navbar-brand) {
    color: #FF9470;
}
body a:not(.btn):not(.gg-btn):not(.page-link):not(.navbar-brand):hover,
body a:not(.btn):not(.gg-btn):not(.page-link):not(.navbar-brand):focus {
    color: #FF6C3A;
}

/* Les boutons sont exclus de la règle ci-dessus, mais le bouton en CONTOUR
   tire sa couleur de texte de custom.css — `--primary-700` #AF3905, calibré
   pour le blanc. Sur fond sombre : 2,83. Même inversion que pour les liens.
   Le bouton PLEIN n'est pas concerné : il porte du texte anthracite sur un
   aplat orange, ce qui tient sur les deux fonds. */
body .btn-outline-primary,
body .btn-outline-primary:link,
body .btn-outline-primary.disabled,
body .btn-outline-primary:disabled,
body .btn-link {
    color: #FF9470;          /* 8,06 */
    border-color: #E04E18;
}
body .btn-outline-primary:hover,
body .btn-outline-primary:focus,
body .btn-link:hover,
body .btn-link:focus {
    background-color: #FF6C3A;
    border-color: #FF6C3A;
    color: #1A1A1A;          /* 6,18 */
}

body .pagination > li > a.page-link,
body .pagination > .page-item > .page-link {
    color: #FF9470;
}
body .pagination > li > a.page-link:hover,
body .pagination > .page-item > .page-link:hover {
    color: #FF6C3A;
}
/* La page courante garde l'aplat orange et son texte anthracite (6,18). */
body .pagination > .page-item.active > .page-link {
    color: #1A1A1A;
}
body .pagination > .page-item.disabled > .page-link {
    color: var(--gg-faint);
}

/* twenty-one colore les liens de son en-tête en #444 — 1,79 sur fond sombre.
   La règle du parent est `header.header .navbar a`, de spécificité (0,2,2) :
   un `body .nav-link` (0,1,1) perd silencieusement. Il faut descendre au même
   niveau de précision. Trouvé par le banc d'essai, pas à la lecture. */
body header.header .navbar a,
body header.header .navbar .navbar-brand,
body header.header .navbar .nav-link,
body .topbar a {
    color: var(--gg-muted);
}
body header.header .navbar a:hover,
body header.header .navbar a:focus,
body header.header .navbar .navbar-brand:hover,
body header.header .navbar .nav-link:hover,
body .topbar a:hover {
    color: #FF9470;
}

body footer,
body #footer,
body footer a,
body #footer a {
    color: var(--gg-muted);
}

/* Les cartes du thème parent sont blanches : on les neutralise, le contenu
   éditorial porte sa propre surface. */
body .card,
body .panel,
body .main-content > .card {
    background-color: transparent;
    border-color: var(--gg-line);
    box-shadow: none;
}
/* Les pages éditoriales veulent du contenu à fleur de colonne ; les pages de
   l'espace client, non — leur formulaire de réponse a besoin de son padding.
   La règle est donc portée par actus.css, pas ici. */

/* Fil d'Ariane */
body .breadcrumb {
    background: transparent;
    padding-left: 0;
}
body .breadcrumb,
body .breadcrumb a,
body .breadcrumb .active {
    color: var(--gg-faint);
}
body .breadcrumb a:hover {
    color: #FF9470;
}

/* --- Surfaces de la pagination ---
   Les couleurs de texte sont plus haut ; ici seulement les fonds. --- */
/* Pagination — le parent la colore déjà en orange via custom.css, on n'ajuste
   que les surfaces sombres. */
body .pagination {
    margin: 32px 0 0;
}
body .page-link {
    background-color: var(--gg-surface);
    border-color: var(--gg-line);
}
body .page-link:hover {
    background-color: var(--gg-surface-3);
}
body .page-item.disabled .page-link {
    background-color: var(--gg-ground);
    border-color: var(--gg-line-soft);
    color: var(--gg-faint);
}

/* --- Boutons de marque, PARTAGÉS ----------------------------------------
   Déplacés ici depuis actus.css : ils étaient éditoriaux par accident, et le
   bouton WhatsApp de la page d'assistance se retrouvait sans aucun style —
   il héritait alors de la couleur de lien de custom.css, calibrée pour fond
   clair, soit 2,60 sur fond sombre. Trouvé au banc d'essai.
   Règle de la charte : l'orange porte du texte anthracite, et le survol
   ÉCLAIRCIT. */
.gg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--f-head);
    font-weight: 600;
    font-size: .84rem;
    padding: 9px 16px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
}
.gg-btn--pri { background: #FF6C3A; color: #1A1A1A; }          /* 6,18 */
.gg-btn--pri:hover { background: #FF9470; color: #1A1A1A; }    /* 8,06 */
.gg-btn--gho { border-color: var(--gg-line); color: var(--gg-text); }
.gg-btn--gho:hover { border-color: #FF6C3A; color: #FF9470; }
.gg-btn--wa { background: #1EBE5D; color: #1A1A1A; }           /* 7,11 */
.gg-btn--wa:hover { background: #25D366; color: #1A1A1A; }     /* 8,78 */

/* Lien d'action, sans cadre : pour les « voir tout → » en tête de section.
   #FF9470 sur le fond de page, pas #FF6C3A — à cette taille de texte le seuil
   est 4,5, et le 500 de la rampe ne le passe pas. */
.gg-btn--txt {
    padding: 4px 0;
    color: #FF9470;                                            /* 8,06 */
    background: none;
}
.gg-btn--txt:hover { color: #FFD0A7; text-decoration: underline; }

/* Les boutons du hero, qui doivent peser plus que ceux d'un tableau. */
.gg-btn--lg {
    font-size: .92rem;
    padding: 13px 24px;
}

/* ===========================================================================
   BARRE LATÉRALE DE WHMCS
   ---------------------------------------------------------------------------
   Trouvée en production, pas au banc d'essai : mes bancs reproduisaient le
   balisage que J'ÉCRIS, et la barre latérale est émise par le parent. Elle est
   donc restée blanche, et l'inversion des liens y posait de l'orange clair sur
   blanc — 2,16 de contraste, sur neuf entrées de menu.

   La leçon est la bonne façon de lire cette correction : un banc d'essai ne
   vaut que pour ce qu'il reproduit. Le reste demande un déploiement.

   Chaîne réelle, relevée sur la page :
     div.sidebar > div.card.card-sidebar > div.collapsable-card-body
       > div.list-group.list-group-flush
         > a.list-group-item.list-group-item-action
           > div.sidebar-menu-item-wrapper > div.sidebar-menu-item-label
   =========================================================================== */
body .sidebar .card,
body .sidebar .card-sidebar,
body .sidebar .collapsable-card-body,
body .sidebar .card-header {
    background-color: var(--gg-surface);
    border-color: var(--gg-line);
}
body .sidebar .card-header {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gg-faint);
}

/* `.list-group-item` de Bootstrap porte `background-color: #fff`. */
body .sidebar .list-group-item {
    background-color: transparent;
    border-color: var(--gg-line-soft);
    color: var(--gg-muted);
}
body .sidebar .list-group-item-action:hover,
body .sidebar .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, .04);
}
body .sidebar .sidebar-menu-item-label {
    color: var(--gg-muted);
}
body .sidebar .list-group-item-action:hover .sidebar-menu-item-label,
body .sidebar .list-group-item-action:focus .sidebar-menu-item-label {
    color: #FF9470;
}
body .sidebar .sidebar-menu-item-icon {
    color: var(--gg-faint);
}

/* L'entrée courante : le parent lui donne un fond gris #666. L'orange de
   marque dit « vous êtes ici » plus clairement, et porte du texte anthracite
   (6,18) au lieu d'un orange clair sur gris (2,66). */
body .sidebar .list-group-item.active {
    background-color: #FF6C3A;
    border-color: #FF6C3A;
}
body .sidebar .list-group-item.active .sidebar-menu-item-label,
body .sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: #1A1A1A;
}

/* Le sélecteur de mois en version mobile */
body .sidebar select.form-control {
    background-color: var(--gg-ground);
    border-color: var(--gg-line);
    color: var(--gg-text);
}

/* --- Fil d'Ariane : c'est l'ANCÊTRE qui porte le fond clair --------------
   `body .breadcrumb { background: transparent }` fonctionnait déjà — le
   #E9ECEF venait de `.master-breadcrumb`, que je n'avais pas visé. Les items
   s'affichaient donc sur un bandeau clair, à 1,82. */
body .master-breadcrumb {
    background-color: transparent;
    border-color: var(--gg-line-soft);
}

/* --- Pastilles Bootstrap -------------------------------------------------
   Bootstrap met du blanc sur toutes ses pastilles. Contrastes calculés :
     badge-info     #17A2B8  blanc 3,04  anthracite 5,72
     badge-success  #28A745  blanc 3,13  anthracite 5,56
     badge-warning  #FFC107  blanc 1,63  anthracite 10,68
     badge-light    #F8F9FA  blanc 1,05  anthracite 16,51
   Les trois premières échouent en blanc. Les autres (secondary, danger, dark)
   passent et ne sont pas touchées. */
body .badge-info,
body .badge-success,
body .badge-warning,
body .badge-light {
    color: #1A1A1A;
}

/* ===========================================================================
   Primitives partagées : surtitre, titres, chapô, pastilles
   ===========================================================================
   Elles vivaient dans actus.css, chargé uniquement sur les pages du fil. La
   page d'accueil s'en sert aussi, et le même oubli a déjà coûté un bouton
   WhatsApp sans style sur la page du support : une primitive utilisée par deux
   pages appartient à la couche partagée, pas à la feuille d'une page.

   Règle de rangement : si deux gabarits peuvent l'écrire, c'est ici. Si c'est
   un composant propre à une page, c'est dans la feuille de cette page.
   =========================================================================== */
.gg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--f-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FF6C3A;
    margin-bottom: 8px;
}
.gg-rackicon {
    width: 11px;
    height: 11px;
    flex: none;
    fill: currentColor;
}
.gg-h1 {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--gg-text);
    text-wrap: balance;
    margin: 0;
}
.gg-h3 {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.012em;
    color: var(--gg-text);
    margin: 0;
}
.gg-lede {
    color: var(--gg-muted);
    font-size: clamp(.92rem, 1.5vw, 1.03rem);
    max-width: 62ch;
    margin: 8px 0 0;
}

/* Pastilles.
   Les couleurs de texte sont calculées sur le fond RÉSULTANT, c'est-à-dire la
   teinte à 16 % composée sur --gg-surface — pas sur la teinte pleine. */
.gg-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.gg-pill--warn { background: rgba(245, 166, 35, .16); color: var(--gg-warn-txt); }
.gg-pill--org  { background: rgba(255, 108, 58, .16); color: #FF9470; }