/* ===========================================================================
   G&G Hosting Service — page d'accueil
   ===========================================================================
   Chargée par le hook sur $templatefile == 'homepage', par-dessus
   gg-sombre.css. Ne contient que les composants propres à l'accueil : les
   primitives (.gg-eyebrow, .gg-h1, .gg-h3, .gg-lede, .gg-pill) sont dans la
   couche partagée.

   DEUX CONTEXTES DIFFÉRENTS, à ne pas confondre :

     .gg-hero       rendu par includes/domain-search.tpl, donc HORS de
                    #main-body : pleine largeur, avec son propre .container.
     tout le reste  rendu par homepage.tpl, donc DANS
                    #main-body > .container > .primary-content, et
                    éventuellement dans une colonne col-lg-8 si WHMCS décide
                    d'afficher une barre latérale.

   D'où les grilles en `auto-fit` : la largeur disponible n'est pas connue à
   l'écriture, et ne doit pas l'être.
   =========================================================================== */


/* ===========================================================================
   1. Le hero
   =========================================================================== */

/* La classe .home-domain-search du parent porte `bg-white` dans son gabarit
   d'origine. Ce gabarit est surchargé et ne l'écrit plus — mais la règle de
   fond est neutralisée ici aussi, au cas où une montée de version la
   réintroduise. */
body .home-domain-search {
    background: none;
}

.gg-hero {
    position: relative;
    border-bottom: 1px solid var(--gg-line);
    background:
        radial-gradient(ellipse 70% 120% at 12% 0%, rgba(255, 108, 58, .10), transparent 62%),
        linear-gradient(180deg, var(--gg-surface), var(--gg-ground));
    padding: clamp(36px, 6vw, 76px) 0 clamp(32px, 5vw, 60px);
}

.gg-hero__in {
    display: grid;
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}

/* Deux colonnes seulement quand il y a vraiment la place. La carte de
   recherche a besoin d'environ 380 px pour que le champ et son bouton tiennent
   sur une ligne. */
@media (min-width: 992px) {
    .gg-hero__in {
        grid-template-columns: minmax(0, 1.25fr) minmax(360px, .85fr);
        align-items: center;
    }
}

/* Anton n'a pas de minuscules dessinées séparément et serre beaucoup : sans
   cette correction d'interlettrage les montées de jambages se touchent. La
   hauteur de ligne est mesurée au contact des lignes, pas estimée. */
.gg-display {
    font-family: var(--f-display);
    font-size: clamp(2.1rem, 5.4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .004em;
    color: var(--gg-text);
    text-wrap: balance;
    margin: 0;
}
.gg-display em {
    font-style: normal;
    color: #FF9470;
}

.gg-hero__pts {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.gg-hero__pts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--gg-text);
}
.gg-hero__pts i {
    font-size: .72rem;
    color: #FF9470;
}

.gg-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}


/* ===========================================================================
   2. La recherche de domaine
   ===========================================================================
   Le balisage interne est celui de WHMCS — .input-group, .form-control,
   .btn-primary, .input-group-append — et il n'est pas touché : c'est lui qui
   poste vers domainchecker.php. Seules les couleurs changent.
   =========================================================================== */
.gg-dsearch {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 10px;
    padding: clamp(20px, 2.4vw, 28px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}
.gg-dsearch__note {
    font-size: .82rem;
    color: var(--gg-muted);
    margin: 6px 0 16px;
}

.gg-dsearch .input-group {
    flex-wrap: nowrap;
}
.gg-dsearch .form-control,
.gg-dsearch textarea {
    background-color: var(--gg-ground);
    border: 1px solid var(--gg-line);
    color: var(--gg-text);
    height: auto;
    padding: 11px 14px;
    font-size: .95rem;
}
.gg-dsearch .form-control::placeholder,
.gg-dsearch textarea::placeholder {
    /* #8A8A8A sur #1A1A1A : 4,52. Le gris du parent tombait sous le seuil. */
    color: #8A8A8A;
    opacity: 1;
}
.gg-dsearch .form-control:focus,
.gg-dsearch textarea:focus {
    background-color: var(--gg-ground);
    border-color: #FF6C3A;
    color: var(--gg-text);
    box-shadow: 0 0 0 3px rgba(255, 108, 58, .26);
}

/* Les boutons gardent les classes Bootstrap du parent. .btn-primary est déjà
   remappé sur la rampe orange par custom.css ; seul le bouton de transfert,
   en .btn-success, a besoin d'être calmé pour ne pas rivaliser avec lui. */
.gg-dsearch .btn {
    white-space: nowrap;
    padding-left: 18px;
    padding-right: 18px;
}
.gg-dsearch .btn-success {
    background-color: transparent;
    border-color: var(--gg-line);
    color: var(--gg-text);
}
.gg-dsearch .btn-success:hover,
.gg-dsearch .btn-success:focus {
    background-color: var(--gg-surface-2);
    border-color: var(--gg-surface-3);
    color: var(--gg-text);
}

/* Tarifs des extensions mises en avant. Les montants viennent de WHMCS
   ($featuredTlds), jamais du gabarit. */
.gg-dsearch .tld-logos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--gg-line-soft);
    font-size: .82rem;
    color: var(--gg-muted);
}
.gg-dsearch .tld-logos li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-variant-numeric: tabular-nums;
}
.gg-dsearch .tld-logos img {
    max-height: 15px;
    width: auto;
}

.gg-dsearch .btn-link {
    color: #FF9470;
    padding-left: 0;
    padding-right: 0;
}


/* ===========================================================================
   3. En-tête de section
   =========================================================================== */
.gg-sec {
    padding: clamp(36px, 5vw, 64px) 0 0;
}
.gg-sechead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 24px;
    margin-bottom: 26px;
}
.gg-sechead__t {
    flex: 1 1 320px;
    min-width: 0;
}
.gg-sechead .gg-h1 {
    margin-top: 8px;
}


/* ===========================================================================
   4. Les formules
   ===========================================================================
   Aucun chiffre n'est écrit ici ni dans le gabarit : nom, accroche et tarifs
   viennent de WHMCS via le hook. Les quotas par formule ne sont volontairement
   PAS affichés sur l'accueil — ils vivent sur le comparatif, où ils sont
   maintenus une seule fois. Dupliquer une spécification a déjà produit des
   quotas d'e-mail faux et contractuellement engageants.
   =========================================================================== */
.gg-plans {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: stretch;
}

.gg-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 10px;
    padding: 22px 20px 20px;
}

/* La formule mise en avant. Le liseré suffit : un fond différent ferait un
   deuxième plan de lecture et affaiblirait les trois autres cartes. */
.gg-plan--star {
    border-color: #FF6C3A;
    box-shadow: 0 0 0 1px #FF6C3A inset, 0 14px 36px rgba(0, 0, 0, .3);
}
.gg-plan__flag {
    position: absolute;
    top: -11px;
    left: 20px;
    background: #FF6C3A;
    /* #1A1A1A sur #FF6C3A : 8,02. Du blanc n'aurait donné que 2,61. */
    color: #1A1A1A;
}

.gg-plan__name {
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: -.015em;
    color: var(--gg-text);
    margin: 0;
}
.gg-plan__for {
    font-size: .85rem;
    color: var(--gg-muted);
    margin: 6px 0 0;
    min-height: 2.6em;
}

.gg-plan__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gg-line-soft);
}
.gg-plan__price .v {
    font-family: var(--f-display);
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: .004em;
    color: var(--gg-text);
    font-variant-numeric: tabular-nums;
}
.gg-plan__price .u {
    font-family: var(--f-head);
    font-size: .8rem;
    font-weight: 700;
    color: var(--gg-muted);
}

.gg-plan__alt {
    font-size: .78rem;
    color: var(--gg-faint);
    /* La marge basse est portée ICI, pas par le bouton : voir plus bas. */
    margin: 8px 0 18px;
    font-variant-numeric: tabular-nums;
}
.gg-plan__eco {
    display: block;
    margin-top: 5px;
    color: var(--gg-ok-txt);
    font-weight: 600;
}

/* Le bouton est collé en bas, pour que les cartes d'une même rangée alignent
   leurs boutons quelle que soit la longueur des accroches — et que la ligne
   d'économie, qui n'apparaît pas sur toutes les formules, ne décale rien.
   La grille est en `align-items: stretch`, les cartes d'une rangée ont donc
   la même hauteur et `margin-top: auto` suffit.

   PIÈGE DÉJÀ TOMBÉ DEDANS : une règle
       .gg-plan__alt + .gg-btn { margin-top: 18px }
   écrasait ce `auto` — plus spécifique et déclarée après — et les boutons se
   désalignaient de 26 px dès qu'une formule n'avait pas d'économie à afficher.
   L'écart avant le bouton est donc porté par la marge BASSE de l'élément qui
   précède, jamais par la marge haute du bouton. */
.gg-plan .gg-btn {
    margin-top: auto;
}

/* Ce qui est commun aux quatre formules. Contrairement aux quotas, ces
   éléments ne varient pas d'une formule à l'autre : les afficher ici ne crée
   aucune source de vérité concurrente. */
.gg-plans__inclus {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 0;
    padding: 16px 18px;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line-soft);
    border-radius: 8px;
    font-size: .85rem;
    color: var(--gg-muted);
}
.gg-plans__inclus i {
    color: #FF9470;
    font-size: .76rem;
    margin-top: .35em;
    flex: none;
}
.gg-plans__inclus strong {
    color: var(--gg-text);
}


/* ===========================================================================
   5. Les trois arguments
   =========================================================================== */
.gg-stats {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.gg-stat {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line-soft);
    border-left: 3px solid #FF6C3A;
    border-radius: 8px;
    padding: 18px 20px;
}
.gg-stat__v {
    display: block;
    font-family: var(--f-head);
    font-weight: 800;
    font-size: 1.32rem;
    letter-spacing: -.02em;
    color: var(--gg-text);
}
.gg-stat__k {
    display: block;
    margin-top: 5px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--gg-muted);
}


/* ===========================================================================
   6. Aperçu du fil
   =========================================================================== */
.gg-teaser {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.gg-tcard {
    display: flex;
    flex-direction: column;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    transition: border-color .14s ease, transform .14s ease;
}
.gg-tcard:hover,
.gg-tcard:focus {
    border-color: var(--gg-surface-3);
    text-decoration: none;
    transform: translateY(-2px);
}
.gg-tcard:focus-visible {
    outline: 2px solid #FF6C3A;
    outline-offset: 2px;
}

.gg-tcard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--f-head);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gg-faint);
}
.gg-tcard h3 {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--gg-text);
    margin: 10px 0 0;
    text-wrap: pretty;
}
.gg-tcard p {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--gg-muted);
    margin: 8px 0 0;
}


/* ===========================================================================
   7. Les raccourcis du parent
   ===========================================================================
   homepage.tpl conserve la rangée d'icônes « Comment pouvons-nous vous
   aider ? » du thème parent : elle est utile et déjà connue des habitués.
   Ses accents de couleur (teal, pomegranate, sun-flower…) sont ceux de
   twenty-one et jurent sur fond sombre.
   =========================================================================== */
.gg-aide {
    padding-top: clamp(36px, 5vw, 64px);
}
body .gg-aide .action-icon-btns a {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    color: var(--gg-text);
}
body .gg-aide .action-icon-btns a:hover,
body .gg-aide .action-icon-btns a:focus {
    border-color: #FF6C3A;
    color: var(--gg-text);
    text-decoration: none;
}
body .gg-aide .action-icon-btns .ico-container i {
    color: #FF9470;
}

/* Les classes d'accent du parent posent un fond coloré clair derrière
   l'icône. On les ramène toutes à la même surface sombre. */
body .gg-aide [class*="card-accent-"] {
    background: var(--gg-surface);
}


/* ===========================================================================
   8. Repli : les cartes de groupes du parent
   ===========================================================================
   Affichées uniquement si aucune formule n'a de tarif annuel dans WHMCS. Le
   gabarit préfère toujours ne rien affirmer plutôt qu'afficher un prix inventé.
   =========================================================================== */
body .card-columns.home .card {
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
}
body .card-columns.home .card-title {
    color: var(--gg-text);
}

/* Le bloc inclus/exclus du parent met tout en 0 de padding latéral sur
   .card-body via actus.css ; cette feuille-ci ne charge pas actus.css, donc
   rien à annuler. */