/* ============================================================
   FPS Maroc - Override CSS
   Correctifs responsifs et ajustements généraux
   ============================================================ */

/* -----------------------------------------------------------
   TABLEAU DE COMPARAISON PRIX (ready_to_grab)
   Le layout flex 3 colonnes doit s'adapter tablette/mobile
   ----------------------------------------------------------- */

/* Tablette paysage (768px - 991px) : 2 colonnes */
@media (max-width: 991px) {
    .ready-to-grab .tab-content .price_group {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }
    .ready-to-grab .tab-content .price_group .price_sect {
        width: calc(48% - 20px);
        margin: 10px;
    }
    .ready-to-grab .tab-content .price_group .price_sect:last-child {
        width: calc(60% - 20px);
        margin: 10px auto;
    }
}

/* Mobile (< 768px) : 1 colonne pleine largeur */
@media (max-width: 767px) {
    .ready-to-grab .tab-content .price_group {
        flex-direction: column;
        align-items: center;
    }
    .ready-to-grab .tab-content .price_group .price_sect,
    .ready-to-grab .tab-content .price_group .price_sect:last-child {
        width: 100%;
        max-width: 400px;
        margin: 10px auto;
    }
    .ready-to-grab .row-grab h2 {
        font-size: 22px;
        line-height: 32px;
    }
    .ready-to-grab .row-grab p {
        font-size: 15px;
    }
}

/* -----------------------------------------------------------
   BANNIÈRES — texte français légèrement plus long
   ----------------------------------------------------------- */

/* Tablette */
@media (max-width: 991px) {
    .hx-banner-content h1,
    .hx-banner-business-content h1,
    .business-content h1 {
        font-size: 28px;
        line-height: 38px;
    }
    .hx-banner-content h5,
    .hx-banner-business-content span,
    .business-content h5 {
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hx-banner-content h1,
    .hx-banner-business-content h1,
    .business-content h1 {
        font-size: 22px;
        line-height: 32px;
    }
    .hx-banner-content h5,
    .hx-banner-business-content span,
    .business-content h5 {
        font-size: 13px;
    }
    /* Bouton bannière pleine largeur */
    .hx-getstart-btn,
    .getstart-business-btn,
    .business-btn {
        width: 100%;
        max-width: 300px;
        display: block;
        margin: 0 auto;
    }
    /* Compteur promo : espacement */
    .offers-banner .list-inline-item {
        margin: 5px 8px;
    }
}

/* -----------------------------------------------------------
   FEATURES — 2 colonnes desktop → 1 colonne mobile
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .custom-block-3 .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .b-left-box {
        margin-bottom: 20px;
    }
}

/* -----------------------------------------------------------
   PAGES LÉGALES — lisibilité mobile
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .inner-term-domain-page .inner_term_container {
        padding: 20px 15px;
    }
    .inner-term-domain-page h3 {
        font-size: 20px;
        margin-top: 25px;
    }
    .inner-term-domain-page p,
    .inner-term-domain-page li {
        font-size: 14px;
        line-height: 24px;
    }
    .term_lis li {
        margin-bottom: 10px;
    }
    .term_lis li span {
        display: flex;
        align-items: flex-start;
    }
    .chcek_ic {
        flex-shrink: 0;
        margin-top: 2px;
    }
}

/* -----------------------------------------------------------
   DOMAIN CHECKER — bouton "Non disponible" non tronqué
   ----------------------------------------------------------- */
#DomainSearchResults .btn.unavailable,
#DomainSearchResults .spotlight-tld .btn.unavailable {
    min-width: 120px;
    width: auto;
    white-space: nowrap;
}

/* Mobile : le bouton peut prendre plus de place */
@media (max-width: 767px) {
    #DomainSearchResults .btn.unavailable {
        min-width: 100px;
        font-size: 11px;
        padding: 6px 8px;
    }
    #DomainSearchResults .btn-add-to-cart.product-domain {
        min-width: 80px;
        width: auto;
    }
}

/* -----------------------------------------------------------
   TABLEAU COMPARATIF PRIX — scroll horizontal sur mobile
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .tabs-sec .compare-table-section .tab-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tabs-sec .compare-table-section table {
        min-width: 500px;
    }
    .compare-table-section .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .compare-table-section .nav-link {
        white-space: nowrap;
    }
}

/* -----------------------------------------------------------
   FREE TRIAL — centrage mobile
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .free-trial-col-right h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .free-trial-col-right span {
        font-size: 13px;
    }
}

/* -----------------------------------------------------------
   BUILD SITES — stacking sur mobile
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .build-sites .row.build-sites-row .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    .build-sites .build-sites-right {
        text-align: center;
    }
    .upgrade-btn-box {
        text-align: center;
    }
}

/* -----------------------------------------------------------
   FORMULAIRE DE DOMAINE — mobile
   ----------------------------------------------------------- */
@media (max-width: 575px) {
    .home-domain-search .input-group {
        flex-direction: column;
    }
    .home-domain-search .form-control {
        border-radius: 4px !important;
        margin-bottom: 8px;
    }
    .home-domain-search .input-group-append {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    .home-domain-search .input-group-append .btn {
        flex: 1;
    }
}

/* -----------------------------------------------------------
   POURQUOI CHOISIR — media items mobile
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .why-hostx-right h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }
    .why-hostx .media {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .why-hostx .media img.mr-4 {
        margin-bottom: 10px;
        margin-right: 0 !important;
    }
}

/* -----------------------------------------------------------
   GENERAL — espacements et lisibilité mobile
   ----------------------------------------------------------- */
@media (max-width: 767px) {
    .p-vertical {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    /* Boutons CTA pleine largeur sur très petit écran */
    .button01, .button02, .button03, .button04 {
        max-width: 280px;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 22px !important; line-height: 32px !important; }
    h2 { font-size: 20px !important; line-height: 30px !important; }
    h3 { font-size: 18px !important; }
    .ready-to-grab .tab-content .price_group .price_sect {
        max-width: 100%;
    }
}