/*
Theme Name: Astra Child - France IPTV Hub
Theme URI: https://franceiptvhub.com/
Description: Thème enfant d'Astra pour France IPTV Hub. Personnalisations design pilotées par le code (versionné git).
Author: France IPTV Hub
Template: astra
Version: 3.6.0
Text Domain: astra-child
*/

/* =====================================================================
   NOTE D'ARCHITECTURE
   Les couleurs de texte/fond des blocs viennent de la CSS générée par
   Spectra/UAG, réparée par le mu-plugin fih-uag-fix (bug « u002d » de la
   migration). Ce fichier ne rejoue donc PAS de couche de contraste
   automatique : il se limite à des correctifs ciblés et sûrs.
   ===================================================================== */

:root {
    --fih-navy:         #062343;
    --fih-navy-deep:    #041224;
    --fih-red:          #ef4444;
    --fih-red-dark:     #dc2626;
    --fih-blue:         #2563eb;
    --fih-sky:          #38bdf8;
    --fih-ink:          #0f172a;
    --fih-ink-soft:     #1e293b;
    --fih-on-dark:      #ffffff;
    --fih-on-dark-soft: #e2e8f0;
    --fih-muted-dark:   #cbd5e1;
    --fih-radius:       8px;
    --fih-shadow-cta:   0 4px 14px rgba(239, 68, 68, .4);
    --fih-shadow-card:  0 10px 25px rgba(0, 0, 0, .08);
}

/* =====================================================================
   1. EN-TÊTE
   ===================================================================== */
.site-header .custom-logo,
.site-header .ast-header-responsive-logo-width,
.ast-site-identity .custom-logo {
    max-width: 175px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Menu desktop : légèrement compacté pour tenir sur une ligne.
   Pas de `nowrap` (créerait un débordement horizontal sur petit écran). */
@media (min-width: 922px) {
    .ast-desktop .main-header-menu > .menu-item > .menu-link {
        font-size: .95rem;
        padding-left: .7em;
        padding-right: .7em;
    }
}
.ast-desktop .main-header-menu .menu-item > a {
    transition: color .2s ease-in-out;
}

/* Menu mobile : panneau clair -> liens sombres (sinon blanc sur blanc). */
.ast-mobile-popup-drawer .main-header-menu .menu-item > a,
.ast-mobile-popup-drawer .main-navigation .menu-item > a,
#ast-mobile-header .menu-item > a,
#ast-hf-menu-1-mobile .menu-item > a,
#ast-hf-menu-1-mobile .menu-link,
.main-header-menu.submenu-with-border .sub-menu .menu-item > a {
    color: var(--fih-ink) !important;
    font-weight: 600;
}
.ast-mobile-popup-drawer .menu-item > a:hover,
.ast-mobile-popup-drawer .current-menu-item > a {
    color: var(--fih-blue) !important;
}

/* =====================================================================
   2. LONGUEUR DU FRANÇAIS — sécurité anti-débordement uniquement.
   Aucune redéfinition de taille : la CSS UAG gère déjà le responsive.
   ===================================================================== */
.wp-block-uagb-container,
.uagb-container-inner-blocks-wrap,
.wp-block-uagb-advanced-heading {
    min-width: 0;
}
.uagb-heading-text,
.wp-block-heading,
.entry-content :is(h1, h2, h3),
.wp-block-button__link,
.ast-custom-button,
.uagb-buttons-repeater {
    overflow-wrap: break-word;
}
.wp-block-button__link,
.ast-custom-button,
.uagb-buttons-repeater {
    white-space: normal;
}

@media (max-width: 600px) {
    .wp-block-uagb-buttons { flex-wrap: wrap; }
    .wp-block-uagb-buttons .wp-block-uagb-buttons-child { width: 100%; }
    .wp-block-uagb-buttons .wp-block-button__link { display: block; text-align: center; }
}

/* =====================================================================
   3. CARTES (survol)
   ===================================================================== */
.wp-block-uagb-container[style*="#fbfbfb"],
.wp-block-uagb-container[style*="#f8fafc"] {
    transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-uagb-container[style*="#fbfbfb"]:hover,
.wp-block-uagb-container[style*="#f8fafc"]:hover {
    box-shadow: var(--fih-shadow-card);
}
.wp-block-uagb-buttons .wp-block-button__link,
.wp-block-button .wp-block-button__link {
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}

/* =====================================================================
   4. UTILITAIRES MANUELLES (à poser via « CSS class(es) » d'un bloc)
   ===================================================================== */
.fih-dark :is(h1, h2, h3, h4, h5, h6),
.fih-dark .uagb-heading-text { color: var(--fih-on-dark); }
.fih-dark :is(p, li),
.fih-dark .uagb-desc-text,
.fih-dark .uagb-icon-list__label { color: var(--fih-on-dark-soft); }

/* =====================================================================
   5. BOUTON WHATSAPP (CTA de commande)
   ===================================================================== */
.fih-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #0b7a43; /* le vert de marque #25D366 + blanc = 1,98:1 */
    color: #fff !important;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    padding: 14px 28px;
    border-radius: var(--fih-radius);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(11, 122, 67, .4);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.fih-wa-btn:hover,
.fih-wa-btn:focus-visible {
    background-color: #095f34;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(11, 122, 67, .45);
    color: #fff !important;
}
.fih-wa-btn svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }

/* =====================================================================
   6. CORPS DE TEXTE & PIED DE PAGE
   ===================================================================== */
.entry-content p,
.entry-content li { line-height: 1.8; }

.site-footer { background-color: var(--fih-navy-deep); color: var(--fih-muted-dark); }
.site-footer a { color: #94a3b8; transition: color .2s ease; }
.site-footer a:hover { color: var(--fih-on-dark); }
/* Les widgets de pied de page vivent dans `.site-above-footer-wrap`, pas dans
   `.site-footer` : la regle precedente ne les atteignait pas. Astra colore les
   titres en --ast-global-color-2 (#2f373d) sur le fond #000511 de cette barre,
   soit 1,68:1. C'est le `!important` du CSS additionnel du Customizer qui
   masquait le probleme ; celui-ci etant vide, la regle doit tenir seule. */
.site-footer .widget-title,
.site-above-footer-wrap .widget-title,
.footer-widget-area[data-section] .widget-title,
.footer-widget-area[data-section] .widget-area .widget-title {
    color: var(--fih-on-dark);
    font-weight: 700;
}

/* =====================================================================
   7. EN-TÊTE PLEIN (l'en-tête transparent est désactivé côté PHP)
   ATTENTION : les deux en-têtes n'utilisent PAS la même rangée.
   - en desktop, le logo / le menu / le bouton sont dans .ast-above-header-bar
   - en mobile, Astra rend #ast-mobile-header avec .ast-primary-header-bar
   Une règle qui ne cible que la première laisse la barre mobile en clair.
   Astra met un fond blanc à la rangée du dessus via
   `.ast-above-header.ast-above-header-bar` (spécificité 0,2,0) : il faut
   donc au moins autant de spécificité ici. Le logo contient du blanc,
   un en-tête blanc le rendrait illisible.
   ===================================================================== */
.ast-above-header.ast-above-header-bar,
.ast-header-break-point .ast-above-header-bar,
.ast-above-header-wrap .ast-above-header-bar,
#ast-mobile-header .ast-above-header-bar,
/* La barre reellement rendue dans l'en-tete mobile. Sans elle, l'en-tete
   restait clair sur telephone alors qu'il est marine sur ordinateur. */
#ast-mobile-header .ast-primary-header-bar,
#ast-mobile-header .ast-main-header-wrap {
    background-color: #01030f;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Contenu de la barre mobile : le logo contient du blanc, l'icone du menu
   doit ressortir sur le marine. */
#ast-mobile-header .ast-primary-header-bar .ast-mobile-menu-trigger-minimal,
#ast-mobile-header .ast-primary-header-bar .menu-toggle,
#ast-mobile-header .ast-primary-header-bar .ast-button-wrap .menu-toggle {
    color: var(--fih-on-dark);
}

/* Liens du menu : clairs sur l'en-tête sombre. */
.ast-desktop .ast-above-header-bar .main-header-menu > .menu-item > .menu-link,
.ast-above-header-bar .ast-builder-menu .menu-item > .menu-link {
    color: var(--fih-on-dark);
}

/* Sous-menu déroulant « Abonnements » : panneau clair -> liens sombres. */
.ast-desktop .ast-above-header-bar .main-header-menu .sub-menu .menu-item > .menu-link {
    color: var(--fih-ink);
}

/* Icône hamburger mobile. */
.ast-above-header-bar .ast-mobile-menu-trigger-minimal,
.ast-above-header-bar .ast-button-wrap .menu-toggle {
    color: var(--fih-on-dark);
}

/* =====================================================================
   8. DÉBORDEMENT HORIZONTAL
   Les blocs `alignfull` d'Astra font 100vw ; quand une barre de défilement
   verticale est présente, 100vw dépasse la largeur utile et crée une barre
   horizontale parasite. `overflow-x: clip` corrige sans créer de conteneur
   de défilement (contrairement à `hidden`, qui casse `position: sticky`).
   ===================================================================== */
html { overflow-x: clip; }

/* Le héros de l'accueil avait 120px de marge haute pour passer sous
   l'en-tête transparent. Celui-ci est désormais dans le flux : on réduit. */
.uagb-block-73219e87 { padding-top: 55px !important; }
@media (max-width: 921px) {
    .uagb-block-73219e87 { padding-top: 35px !important; }
}

/* =====================================================================
   9. CONTENEUR HOMOGÈNE (demande : max-width 1200px, centré)
   Les articles n'ont plus de barre latérale : le contenu occupe le
   conteneur, centré, avec des marges latérales confortables.
   ===================================================================== */
.site-content .ast-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
    max-width: 100%;
}
/* Article : longueur de ligne lisible sur grand écran. */
.single-post .entry-content > *:not(.alignfull):not(.alignwide):not(.fih-related) {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.single-post .entry-content img { height: auto; }

/* Astra met `display:flex` sur `.site-content .ast-container` : tout enfant
   direct ajoute a cote de #primary deviendrait une seconde colonne et
   reduirait le contenu de moitie. Filet de securite. */
.site-content .ast-container { flex-direction: column; }
.site-content .ast-container > #primary { width: 100%; }

/* =====================================================================
   10. GRILLE D'ARTICLES (bloc Spectra « Post Grid », uniquement `.is-grid`)
   Cause du grand vide sous les titres : le bloc applique
   `.uagb-post__title { padding-bottom: 50px }`, plus une ligne d'auteur
   vide et des cartes en hauteur égale. On neutralise et on soigne la carte.
   Spécificité alignée sur celle de la CSS générée par Spectra (0,3,0).
   IMPORTANT : le carrousel de l'accueil porte la MEME classe
   `.uagb-post-grid` ; ces règles sont donc restreintes à `.is-grid`,
   sinon elles cassent les calculs de hauteur de Slick.
   ===================================================================== */
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__inner-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__inner-wrap:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
}

/* Visuel : hauteur constante, logo entier, fond neutre. */
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__image {
    margin: 0 !important;
    padding: 0 !important;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__image a { display: block; }
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__image img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
    padding: 16px 20px;
    box-sizing: border-box;
}

/* Titre : c'est ici que se jouait le vide (padding-bottom: 50px). */
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__text.uagb-post__title,
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__title {
    margin: 16px 18px 0 !important;
    padding-bottom: 0 !important;
    font-size: .95rem !important;
    line-height: 1.45em !important;
    font-weight: 600;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.45em * 3);
}
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__text.uagb-post__title a {
    font-size: .95rem !important;
    line-height: 1.45em !important;
    color: var(--fih-ink);
    text-decoration: none;
}
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__inner-wrap:hover .uagb-post__title a {
    color: var(--fih-blue);
}

/* Ligne d'auteur vide : supprimée. */
.uagb-post-grid.is-grid.uagb-post__items .uagb-post-grid-byline { display: none !important; }

/* Bouton : en bas de carte, sans écart démesuré. */
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__cta {
    margin: auto 18px 0 !important;
    padding: 14px 0 0 !important;
}
.uagb-post-grid.is-grid.uagb-post__items .uagb-post__cta .uagb-text-link {
    display: block;
    text-align: center;
    padding: 11px 18px;
    font-size: .85rem;
    font-weight: 700;
}

.uagb-post-grid.is-grid.uagb-post__items article { margin-bottom: 0 !important; }

@media (max-width: 600px) {
    .uagb-post-grid.is-grid.uagb-post__items .uagb-post__image img { height: 120px; }
    .uagb-post-grid.is-grid.uagb-post__items .uagb-post__title { min-height: 0; -webkit-line-clamp: 4; }
}

/* =====================================================================
   10b. CARROUSEL D'APPLICATIONS (accueil)
   Meme bloc Spectra, mais en mode carrousel et SANS titre affiche :
   la carte se resume a un logo + un bouton. On la garde compacte,
   sans hauteur forcee (Slick calcule lui-meme la hauteur des slides).
   ===================================================================== */
.uagb-post-grid.is-carousel .uagb-post__inner-wrap {
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.uagb-post-grid.is-carousel .uagb-post__inner-wrap:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18) !important;
}
.uagb-post-grid.is-carousel .uagb-post__image {
    margin: 0 !important;
    padding: 0 !important;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}
.uagb-post-grid.is-carousel .uagb-post__image img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: contain;
    padding: 14px 18px;
    box-sizing: border-box;
}
/* Ligne d'auteur vide : elle creusait un blanc sous le logo. */
.uagb-post-grid.is-carousel .uagb-post-grid-byline { display: none !important; }
/* Le bloc bouton fait office de pied de carte : il porte lui-meme
   l'espacement et vient buter contre le bord bas. Aucun blanc residuel. */
.uagb-post-grid.is-carousel .uagb-post__cta {
    margin: 0 !important;
    padding: 12px 16px !important;
    position: static !important;
}
.uagb-post-grid.is-carousel .uagb-post__cta .uagb-text-link {
    display: block;
    text-align: center;
    padding: 9px 16px;
    font-size: .82rem;
    font-weight: 700;
}

/* La carte epouse son contenu : ni hauteur imposee par Slick, ni blanc
   residuel sous le bouton (l'option « hauteur egale » a ete desactivee
   sur ce carrousel, ces regles empechent tout retour du probleme). */
.uagb-post-grid.is-carousel .slick-slide,
.uagb-post-grid.is-carousel .slick-slide > div,
.uagb-post-grid.is-carousel article {
    height: auto !important;
}
.uagb-post-grid.is-carousel .uagb-post__inner-wrap {
    height: auto !important;
    min-height: 0 !important;
}
.uagb-post-grid.is-carousel .uagb-post__text:last-child { margin-bottom: 0 !important; }

/* =====================================================================
   11. FIL D'ARIANE — bandeau bleu marine pleine largeur, texte blanc
   Le bandeau est un bloc autonome place entre l'en-tete et le contenu
   (hook `astra_content_before`), donc pleine largeur par nature : ni
   `100vw`, ni `clip-path`, ni marge negative — aucun risque de
   debordement horizontal.
   ===================================================================== */
.fih-breadcrumb-bar {
    background: #062343;
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.fih-breadcrumb-bar__inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    min-height: 52px;
}
.fih-breadcrumb {
    margin: 0;
    padding: 12px 0;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.fih-breadcrumb a,
.fih-breadcrumb span,
.fih-breadcrumb [aria-current] {
    color: #ffffff !important;
}
.fih-breadcrumb a {
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.fih-breadcrumb a:hover {
    text-decoration: underline;
    opacity: 1;
}
.fih-breadcrumb .sep {
    margin: 0 .6em;
    color: rgba(255, 255, 255, .6) !important;
}
.fih-breadcrumb [aria-current] {
    font-weight: 600;
}

/* Suppression du conteneur vide b9251b20 et optimisation des marges */
.uagb-block-b9251b20 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.uagb-block-4070a75f {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

@media (max-width: 768px) {
    .fih-breadcrumb {
        font-size: 0.95rem;
        padding: 10px 0;
    }
    .uagb-block-4070a75f {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }
}

/* Le contenu enchaine directement sous le bandeau : aucun blanc entre le
   bandeau et le premier bloc. Le coupable principal etait l'en-tete
   d'article VIDE (`.entry-header.ast-no-title`), qui conservait sa marge
   `.page .entry-header { margin-bottom: 1.5em }`. */
.fih-has-breadcrumb .site-content > .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.fih-has-breadcrumb #primary,
.fih-has-breadcrumb #main,
.fih-has-breadcrumb .ast-article-single,
.fih-has-breadcrumb .ast-article-post,
.fih-has-breadcrumb .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* En-tete d'article sans contenu : retire du flux. */
.fih-has-breadcrumb .entry-header.ast-no-title,
.fih-has-breadcrumb .entry-header.ast-header-without-markup:empty {
    display: none !important;
}
.fih-has-breadcrumb .entry-content > *:first-child { margin-top: 0 !important; }

/* Filet commun (grille ET carrousel) : Spectra peut positionner le bouton
   « Lire la suite » hors du flux quand l'option « boutons alignés à hauteur
   égale » est active. On garantit qu'il reste dans le flux. */
.uagb-post-grid.uagb-post__items .uagb-post__cta,
.uagb-post-grid.uagb-post__items .uagb-post__cta .uagb-text-link {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Suppression des marges top/bottom sur le bloc SEO France */
.wp-block-uagb-container.uagb-block-geo_seo_france_block {
}

/* =====================================================================
   HEADER & MENU NAVIGATION (DESKTOP & LAPTOP) — SANS SCROLL
   ===================================================================== */

@media (min-width: 922px) {
    #masthead,
    #ast-desktop-header,
    .ast-above-header-wrap,
    .ast-above-header-bar,
    .site-header-above-section-right,
    .ast-builder-menu-1,
    .ast-main-header-bar-alignment,
    .main-header-bar-navigation,
    .site-navigation,
    #masthead .main-header-menu {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }

    .ast-desktop .main-header-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ast-desktop .main-header-menu > .menu-item {
        display: inline-flex !important;
        align-items: center !important;
    }

    .ast-desktop .main-header-menu > .menu-item > .menu-link {
        font-size: 0.95rem !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        color: #ffffff !important;
        transition: color 0.2s ease !important;
    }
}

/* Survol des liens du menu header (Bleu Cyan #38bdf8) */
.ast-desktop .main-header-menu .menu-item:hover > a,
.ast-desktop .main-header-menu .menu-item > a:hover,
.ast-desktop .main-header-menu .menu-item:hover > .menu-link,
.ast-desktop .main-header-menu .menu-item > .menu-link:hover,
.ast-desktop .ast-above-header-bar .main-header-menu > .menu-item:hover > .menu-link,
.ast-desktop .ast-above-header-bar .main-header-menu > .menu-item > .menu-link:hover,
.ast-desktop .ast-above-header-bar .ast-builder-menu .menu-item:hover > .menu-link,
.ast-desktop .ast-above-header-bar .ast-builder-menu .menu-item > .menu-link:hover,
.ast-desktop .main-header-menu .current-menu-item > .menu-link,
.ast-desktop .main-header-menu .current-menu-ancestor > .menu-link,
.ast-desktop .main-header-menu .current_page_item > .menu-link,
#masthead .main-header-menu .menu-item:hover > a,
#masthead .main-header-menu .menu-item > a:hover,
#masthead .main-header-menu .menu-item:hover > .menu-link,
#masthead .main-header-menu .menu-item > .menu-link:hover {
    color: #38bdf8 !important;
}

.ast-desktop .main-header-menu .menu-item:hover > .menu-link .ast-icon svg,
.ast-desktop .main-header-menu .menu-item > .menu-link:hover .ast-icon svg,
.ast-desktop .main-header-menu .current-menu-item > .menu-link .ast-icon svg {
    fill: #38bdf8 !important;
    color: #38bdf8 !important;
}

/* ==========================================================================
   CARROUSEL (

/* Slick List & Track : Préserver le comportement slider natif */

/* Carte Tutoriel / Application */

/* Image de l'application */

/* Bouton Lire la suite */

/* Flèches de navigation */

/* ==========================================================================
   ZERO-CLS (CUMULATIVE LAYOUT SHIFT) STABILITY RULES — GOOGLE & AGENTIC WEB
   ========================================================================== */

/* 1. Header & Navigation Zero-Shift Pre-sizing */
.site-header,
#masthead,
.ast-main-header-wrap,
.main-header-bar {
    min-height: 70px !important;
    contain: layout style !important;
}

.custom-logo-link img,
.site-logo-img img,
.ast-site-identity img {
    aspect-ratio: 363 / 100 !important;
    max-height: 65px !important;
    width: auto !important;
    height: auto !important;
}

/* 4. Pricing Cards Container Height Stability */
.uagb-block-ec2370fd.default.uagb-is-root-container {
    contain: layout style !important;
}

/* =====================================================================
   12. ACCESSIBILITE : CONTRASTES ET LIENS
   Corrections issues de l'audit PageSpeed/Lighthouse du 2026-08-28.
   Les ratios sont calcules selon WCAG 2.1 (seuil AA : 4,5:1 pour le
   texte normal, 3:1 pour distinguer un lien de son texte environnant).
   ===================================================================== */

/* Le vert de marque WhatsApp #25D366 avec du texte blanc ne donne que
   1,98:1. Le vert fonce ci-dessous monte a 5,41:1 tout en restant lisible
   comme un bouton WhatsApp. */
.fih-wa-btn { background-color: #0b7a43; }
.fih-wa-btn:hover,
.fih-wa-btn:focus-visible {
    background-color: #095f34;
    box-shadow: 0 6px 20px rgba(11, 122, 67, .45);
}

/* Ancien prix barre des cartes tarifaires : #94a3b8 sur #f8fafc = 2,45:1.
   La couleur est posee en style inline dans le contenu, d'ou le !important. */
.entry-content s[style*="94a3b8"] { color: #64748b !important; }

/* Un lien qui ne se distingue que par sa couleur doit avoir 3:1 avec le
   texte qui l'entoure. Ici on tombe a 1,08:1 (bleu) et 1,00:1 (liens sans
   couleur propre). Le soulignement leve la contrainte de couleur. */
.entry-content p a:not(.wp-block-button__link):not(.uagb-button__link):not(.fih-wa-btn),
.entry-content li a:not(.wp-block-button__link):not(.uagb-button__link):not(.fih-wa-btn),
#comments p a,
.comment-respond p a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* Bouton CTA de l'en-tete : declaration unique (elle remplace les deux blocs
   qui se recouvraient plus haut dans ce fichier). Blanc sur #ef4444 ne donne
   que 3,76:1 ; le texte fait 18px/700 alors que le seuil « grand texte » de
   WCAG commence a 18,66px gras, c'est donc 4,5:1 qui s'applique. #dc2626
   monte a 4,83:1. Pas de translation au survol : le bouton sautait. */
.ast-header-button-1 .ast-custom-button {
    background-color: #dc2626;
    color: #ffffff;
    font-weight: 700;
    border-radius: var(--fih-radius);
    padding: 10px 22px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, .35);
    transform: none;
    transition: background-color .2s ease;
}
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-1 .ast-custom-button-link:focus-visible .ast-custom-button {
    background-color: #b91c1c;
    transform: none;
    box-shadow: 0 4px 14px rgba(185, 28, 28, .4);
}

/* Fleche d'ouverture des sous-menus : 20,3px de large, sous les 24px minimum
   recommandes pour une cible pointable. */
.ast-header-navigation-arrow,
.main-header-menu .dropdown-menu-toggle {
    min-width: 24px;
    min-height: 24px;
}

/* =====================================================================
   13. CONTRASTE AUTOMATIQUE DES CONTENEURS SOMBRES
   Migre depuis le « CSS additionnel » du Customizer (post 7), maintenant
   vide. Ces regles sont la seule chose que post 7 apportait et que ce
   fichier ne couvrait pas : la classe .fih-dark de la section 4 doit etre
   posee a la main sur un bloc, alors qu'ici le ciblage est automatique par
   couleur de fond. Sans elles, le texte des heros passe en sombre sur
   sombre (accueil 247, a-propos 248, tutoriels 1423, contact 2805).
   ===================================================================== */
.uagb-block-a3af2f00 :is(h1, h2, h3),
.uagb-block-a3af2f00 .uagb-heading-text,
.uagb-block-bbd6eb6a h1,
.uagb-block-bbd6eb6a .uagb-heading-text,
.wp-block-uagb-container[style*="#062343"] :is(h1, h2),
.wp-block-uagb-container[style*="#062343"] .uagb-heading-text,
.wp-block-uagb-container[style*="#000511"] :is(h1, h2),
.wp-block-uagb-container[style*="#000511"] .uagb-heading-text {
    color: var(--fih-on-dark) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.uagb-block-a3af2f00 :is(p, .uagb-desc-text),
.uagb-block-bbd6eb6a :is(p, .uagb-desc-text),
.wp-block-uagb-container[style*="#062343"] :is(p, .uagb-desc-text),
.wp-block-uagb-container[style*="#000511"] :is(p, .uagb-desc-text) {
    color: var(--fih-on-dark-soft) !important;
}

/* Ligne de dates en tete des tutoriels (mu-plugin fih-internal-links).
   Discrete : c'est une information de contexte, pas le debut du contenu. */
.fih-dates {
    margin: 0 0 1.6em;
    font-size: .85rem;
    color: #64748b; /* 4,55:1 sur fond blanc */
}
.fih-dates time { white-space: nowrap; }

/* =====================================================================
   14. SURVOL DU MENU : PAS DE PAVE ROUGE
   Astra remplit le fond de l'element survole avec --ast-global-color-0
   (#d71313) via `.ast-builder-menu-1 .main-header-menu > .menu-item:hover
   > .menu-link`, soit une specificite de (0,5,0).
   Le site signale deja le survol par la couleur du texte (#38bdf8, section 7) :
   un aplat rouge en plus est incoherent et ecrase la lisibilite sur l'en-tete
   marine. On neutralise le fond sans toucher a la couleur du texte.
   Prefixe par .ast-desktop et .ast-header-break-point pour depasser (0,5,0)
   sans recourir a !important.
   ===================================================================== */
.ast-desktop .ast-builder-menu-1 .menu-link:hover,
.ast-desktop .ast-builder-menu-1 .menu-link:focus-visible,
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
.ast-desktop .ast-builder-menu-1 .main-header-menu .menu-item:hover > .menu-link,
.ast-desktop .ast-builder-menu-1 .main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-header-break-point .ast-builder-menu-1 .menu-link:hover,
.ast-header-break-point .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link,
/* Fleche d'ouverture des sous-menus : meme aplat rouge chez Astra. */
.ast-desktop .ast-builder-menu-1 .ast-menu-toggle:hover,
.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .ast-menu-toggle,
.ast-header-break-point .ast-builder-menu-1 .inline-on-mobile .ast-menu-toggle:hover,
.ast-header-break-point .ast-builder-menu-1 .inline-on-mobile .main-header-menu > .menu-item:hover > .ast-menu-toggle {
    background: transparent;
}

/* =====================================================================
   15. PAGES D'OFFRE : MISE EN FORME DE LA PROSE
   Concerne /essai-gratuit/ et les quatre /abonnement-iptv-N-mois/.
   Ne cible que `.wp-block-heading` et `.wp-block-paragraph`, donc la prose
   ajoutee sous la carte tarifaire. Les blocs Spectra du haut de page
   utilisent `.uagb-heading-text` et ne sont pas touches.
   ===================================================================== */
.fih-page-essai-gratuit .entry-content,
[class*="fih-page-abonnement-iptv-"] .entry-content {
    --fih-mesure: 68ch;
}

/* Longueur de ligne. Le conteneur fait 1200px : une ligne atteignait
   ~150 caracteres, ou l'oeil perd la ligne suivante au retour chariot. */
.fih-page-essai-gratuit .entry-content .wp-block-paragraph,
[class*="fih-page-abonnement-iptv-"] .entry-content .wp-block-paragraph,
.fih-page-essai-gratuit .entry-content .wp-block-group li,
[class*="fih-page-abonnement-iptv-"] .entry-content .wp-block-group li {
    max-width: var(--fih-mesure);
    line-height: 1.75;
    color: var(--fih-ink-soft);
}

/* Titres de section. Astra les met a 48px et 32px, une echelle pensee pour
   des titres de page, pas pour rythmer un texte suivi. */
.fih-page-essai-gratuit .entry-content h2.wp-block-heading,
[class*="fih-page-abonnement-iptv-"] .entry-content h2.wp-block-heading {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
    line-height: 1.25;
    margin: 2.6em 0 .9em;
    padding-bottom: .45em;
    border-bottom: 1px solid #e2e8f0;
    max-width: var(--fih-mesure);
}

.fih-page-essai-gratuit .entry-content h3.wp-block-heading,
[class*="fih-page-abonnement-iptv-"] .entry-content h3.wp-block-heading {
    font-size: clamp(1.05rem, .95rem + .45vw, 1.2rem);
    line-height: 1.35;
    margin: 1.9em 0 .5em;
    padding-left: .7em;
    border-left: 3px solid var(--fih-blue);
    max-width: var(--fih-mesure);
}

/* Chapeau : le paragraphe qui suit immediatement le titre de section porte
   l'essentiel de l'offre, on lui donne un peu plus de presence. */
.fih-page-essai-gratuit .entry-content h2.wp-block-heading + .wp-block-paragraph,
[class*="fih-page-abonnement-iptv-"] .entry-content h2.wp-block-heading + .wp-block-paragraph {
    font-size: 1.06rem;
    color: var(--fih-ink);
}

/* Liste « Contenu inclus » : puces discretes, alignees sur le texte. */
.fih-page-essai-gratuit .entry-content .wp-block-group ul,
[class*="fih-page-abonnement-iptv-"] .entry-content .wp-block-group ul {
    max-width: var(--fih-mesure);
    padding-left: 1.15em;
}
.fih-page-essai-gratuit .entry-content .wp-block-group li::marker,
[class*="fih-page-abonnement-iptv-"] .entry-content .wp-block-group li::marker {
    color: var(--fih-blue);
}

/* Le groupe « en detail » n'a pas besoin du retrait haut de 2,5rem pose en
   ligne par l'editeur : le rythme des titres suffit. */
.fih-page-essai-gratuit .entry-content > .wp-block-group.alignwide,
[class*="fih-page-abonnement-iptv-"] .entry-content > .wp-block-group.alignwide {
    padding-top: 0;
}

/* Numero de telephone ([fih_tel]). Il apparait sur fond blanc (page contact)
   comme sur un aplat rouge (bloc d'aide de la page essai) : la couleur de lien
   d'Astra (#424242) donnait 1,91:1 sur le rouge. En heritant de la couleur du
   texte voisin, le numero suit toujours son contexte. Le soulignement conserve
   l'indice visuel du lien, que la couleur seule n'assure plus. */
a.fih-tel {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   OFFER PAGES (1, 3, 6, 12 MOIS) - INVERSION DE L'ORDRE SUR MOBILE
   Afficher "Vos Coordonnées & Paiement Sécurisé" en 1er sur mobile/tablette
   ========================================================================== */
@media (max-width: 921px) {
    .uagb-block-4070a75f > .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;
    }
    .uagb-block-4070a75f .uagb-block-3858614e {
        order: -1 !important;
        margin-bottom: 25px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .uagb-block-4070a75f .uagb-block-0256d0d2 {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   PAGE TUTORIELS (/tutoriels/) & ARTICLES - DESIGN RESPONSIVE PARFAIT
   Hero pleine largeur (alignfull) / Contenu & Grille 4 colonnes centrés à 1200px
   ========================================================================== */

/* 1. Page Hub /tutoriels/ */
.fih-page-tutoriels .site-content,
.fih-page-tutoriels .site-content > .ast-container,
.fih-page-tutoriels #primary,
.fih-page-tutoriels #main,
.fih-page-tutoriels .ast-article-single,
.fih-page-tutoriels .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Hero Banner Bleu : Pleine Largeur Écran à Écran (100%) */
.fih-page-tutoriels .uagb-block-a3af2f00 {
    background-color: #062343 !important;
    margin: 0 0 35px 0 !important;
    padding: 45px 20px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.fih-page-tutoriels .uagb-block-a3af2f00 > .uagb-container-inner-blocks-wrap {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fih-page-tutoriels .uagb-block-a3af2f00 .uagb-heading-text {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
}

.fih-page-tutoriels .uagb-block-a3af2f00 .uagb-desc-text {
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    max-width: 850px !important;
    color: #cbd5e1 !important;
}

/* Texte introductif sous le Hero : Centré à 1200px */
.fih-page-tutoriels .uagb-block-6f3c62e3 {
    max-width: 1200px !important;
    margin: 0 auto 30px auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fih-page-tutoriels .uagb-block-6f3c62e3 > .uagb-container-inner-blocks-wrap {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Grille de tutoriels sur Desktop (Centrée à 1200px avec 4 colonnes parfaites) */
@media (min-width: 922px) {
    .fih-page-tutoriels .uagb-block-f979a131.is-grid,
    .fih-page-tutoriels .uagb-post-grid {
        max-width: 1200px !important;
        margin: 0 auto 60px auto !important;
        padding: 0 20px !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131 .uag-post-grid-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131 .uagb-post__inner-wrap {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 20px 16px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07) !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
}

/* Grille de tutoriels sur Tablette (768px - 921px : 2 colonnes) */
@media (min-width: 768px) and (max-width: 921px) {
    .fih-page-tutoriels .uagb-block-6f3c62e3 {
        padding: 0 20px !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131.is-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin: 0 auto 40px auto !important;
        padding: 0 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131 .uag-post-grid-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131 .uagb-post__inner-wrap {
        padding: 18px 15px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07) !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Grille de tutoriels sur Mobile (≤ 767px : 1 colonne pleine largeur) */
@media (max-width: 767px) {
    .fih-page-tutoriels .uagb-block-a3af2f00 {
        padding: 25px 15px !important;
        margin-bottom: 20px !important;
    }

    .fih-page-tutoriels .uagb-block-a3af2f00 .uagb-heading-text {
        font-size: 1.6rem !important;
    }

    .fih-page-tutoriels .uagb-block-a3af2f00 .uagb-desc-text {
        font-size: 0.92rem !important;
    }

    .fih-page-tutoriels .uagb-block-6f3c62e3 {
        padding: 0 15px !important;
        margin-bottom: 20px !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131.is-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 15px !important;
        margin: 0 0 35px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131 .uag-post-grid-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .fih-page-tutoriels .uagb-block-f979a131 .uagb-post__inner-wrap {
        padding: 18px 15px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07) !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* 2. Pages Tutoriels Individuels (Single Post) */
@media (min-width: 922px) {
    .single-post .site-content > .ast-container,
    .single-post #primary,
    .single-post #main {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
}

@media (max-width: 921px) {
    .single-post .site-content > .ast-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-top: 15px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .single-post #primary,
    .single-post #main,
    .single-post .entry-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .single-post .entry-content > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .single-post .entry-content h1 {
        font-size: 1.7rem !important;
        line-height: 1.25 !important;
        margin: 10px 0 15px 0 !important;
    }

    .single-post .entry-content h2 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin: 22px 0 10px 0 !important;
    }

    .single-post .entry-content p,
    .single-post .entry-content li {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
        margin-bottom: 12px !important;
    }

    .single-post .entry-content img {
        border-radius: 10px !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 12px auto !important;
        display: block !important;
    }
}

/* ==========================================================================
   HOMEPAGE - SECTION APPAREILS / SERVEURS (6 ARTICLES RESPONSIVE)
   Grille 2 colonnes x 3 rangées sur Mobile / Grille 6 colonnes ou 3x2 sur Desktop
   ========================================================================== */

/* Mobile (≤ 767px) : 2 colonnes nettes, 6 cartes parfaitement visibles */
@media (max-width: 767px) {
    

    

    

    

    

    
}

/* Tablette (768px - 921px) : 3 colonnes x 2 rangées */
@media (min-width: 768px) and (max-width: 921px) {
    

    
}

/* Desktop (≥ 922px) : 6 colonnes alignées proprement */
@media (min-width: 922px) {
    

    

    

    

    
}


/* ==========================================================================
   CARROUSEL DES APPAREILS & SERVEURS (HOMEPAGE) - IMAGES GRAND FORMAT VISIBLES
   4 colonnes sur Desktop, 2 colonnes sur Mobile / Tablette (Images réelles larges)
   ========================================================================== */
.uagb-block-6a7c0cc4 {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 10px 45px 30px 45px !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
}

.uagb-block-6a7c0cc4 .slick-list {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.uagb-block-6a7c0cc4 .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

.uagb-block-6a7c0cc4 .slick-slide {
    padding: 0 10px !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.uagb-block-6a7c0cc4 .uagb-post__inner-wrap {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 16px 14px 18px 14px !important;
    min-height: 230px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Images en GRAND FORMAT LARGE & RÉEL (Bien visibles, nettes et imposantes) */
.uagb-block-6a7c0cc4 .uagb-post__image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 120px !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

.uagb-block-6a7c0cc4 .uagb-post__image a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

.uagb-block-6a7c0cc4 .uagb-post__image img {
    max-height: 105px !important;
    max-width: 95% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.05)) !important;
}

/* Bouton rouge 'Lire la suite' */
.uagb-block-6a7c0cc4 .uagb-post__cta {
    width: 100% !important;
    margin-top: auto !important;
    padding: 0 !important;
}

.uagb-block-6a7c0cc4 .uagb-post__cta .wp-block-button__link {
    background: #d61313 !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 9px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(214, 19, 19, 0.35) !important;
    transition: all 0.2s ease !important;
}

.uagb-block-6a7c0cc4 .uagb-post__cta .wp-block-button__link:hover {
    background: #b91010 !important;
    transform: translateY(-2px) !important;
}

/* Flèches de navigation Slick (< et >) */
.uagb-block-6a7c0cc4 .slick-arrow {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.2s ease !important;
}

.uagb-block-6a7c0cc4 .slick-arrow:hover {
    background: #d61313 !important;
    border-color: #d61313 !important;
}

.uagb-block-6a7c0cc4 .slick-prev { left: 4px !important; }
.uagb-block-6a7c0cc4 .slick-next { right: 4px !important; }

.uagb-block-6a7c0cc4 .slick-arrow svg {
    fill: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
}

@media (max-width: 767px) {
    .uagb-block-6a7c0cc4 {
        padding: 10px 28px 25px 28px !important;
    }
    .uagb-block-6a7c0cc4 .slick-slide {
        padding: 0 6px !important;
    }
    .uagb-block-6a7c0cc4 .uagb-post__inner-wrap {
        min-height: 195px !important;
        padding: 12px 8px 14px 8px !important;
    }
    .uagb-block-6a7c0cc4 .uagb-post__image {
        height: 95px !important;
        margin-bottom: 8px !important;
        padding: 4px !important;
    }
    .uagb-block-6a7c0cc4 .uagb-post__image img {
        max-height: 85px !important;
        max-width: 95% !important;
    }
    .uagb-block-6a7c0cc4 .uagb-post__cta .wp-block-button__link {
        padding: 7px 10px !important;
        font-size: 0.80rem !important;
    }
    .uagb-block-6a7c0cc4 .slick-arrow {
        width: 28px !important;
        height: 28px !important;
    }
    .uagb-block-6a7c0cc4 .slick-prev { left: -2px !important; }
    .uagb-block-6a7c0cc4 .slick-next { right: -2px !important; }
}

/* Bloc de liens des pages legales / contact / a-propos (fih-internal-links).
   Volontairement sobre : sur une page de CGV, l'encadre promotionnel des
   articles serait deplace. */
.fih-liens-page {
    margin: 2.5em 0 0;
    padding: 1.2em 1.4em;
    border-left: 3px solid var(--fih-blue);
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
}
.fih-liens-page__intro {
    margin: 0 0 .6em;
    font-weight: 600;
    color: var(--fih-ink);
}
.fih-liens-page ul { margin: 0; padding-left: 1.1em; }
.fih-liens-page li { margin: .3em 0; }
.fih-liens-page a { color: var(--fih-blue); text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   16. BOUTON WHATSAPP FLOTTANT (mu-plugin fih-whatsapp-float)
   En bas a DROITE : Astra place son « retour en haut » en bas a gauche
   (ast-scroll-to-top-left), les deux ne se recouvrent pas.
   ===================================================================== */
.fih-wa-float {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 900;                 /* au-dessus du contenu, sous une modale */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* 56px de haut : au-dela des 44px minimum d'une cible tactile. */
    min-height: 56px;
    padding: 0 20px;
    border-radius: 28px;
    background-color: #0b7a43;    /* 5,41:1 avec du blanc, contrairement au vert de marque */
    color: #fff !important;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    transition: background-color .2s ease, transform .2s ease;
}
.fih-wa-float:hover,
.fih-wa-float:focus-visible {
    background-color: #095f34;
    color: #fff !important;
    transform: translateY(-2px);
}
.fih-wa-float__icone { flex: 0 0 auto; }

/* Sous 600px, le libelle est masque pour ne pas manger l'ecran. Il reste
   annonce par aria-label sur le lien : le bouton garde un nom accessible. */
@media (max-width: 599px) {
    .fih-wa-float {
        gap: 0;
        padding: 0;
        width: 56px;
        justify-content: center;
    }
    .fih-wa-float__libelle { display: none; }
}

/* Pas d'animation pour qui a demande a en etre dispense. */
@media (prefers-reduced-motion: reduce) {
    .fih-wa-float { transition: none; }
    .fih-wa-float:hover,
    .fih-wa-float:focus-visible { transform: none; }
}

@media print { .fih-wa-float { display: none; } }