.layout-horizontal .header-top {
    background-color: #fff;
    padding: 0.7rem;
}
.layout-horizontal .header-top .logo img {
    height: 48px;
}

/* Footer connecté : raccord header (barre #435ebe + filet cyan) */
.shop-footer {
    background: #435ebe;
    border-top: 0;
    box-shadow: inset 0 3px 0 0 #41bbde;
    padding: 1.05rem 0;
    margin-top: 2rem !important;
}
.shop-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
}
.shop-footer__copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.875rem;
}
.shop-footer__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}
.shop-footer__links .lang-switcher > summary {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.875rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.shop-footer__links .lang-switcher > summary:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}
.shop-footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0;
}
.shop-footer__nav a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.shop-footer__nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}
.shop-footer__nav a:not(:last-child)::after {
    content: "·";
    display: inline-block;
    margin-left: 0.55rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .shop-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Pictos header : carrés arrondis (raccord pastilles menu), style soft unifié */
.header-icons .avatar.avatar-lg,
.header-icons .avatar.avatar-lg .avatar-content {
    width: 2.6rem;
    height: 2.6rem;
}
.header-icons .avatar.avatar-lg .avatar-content {
    font-size: 1rem;
}
.header-icons .avatar {
    border-radius: 0.45rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #f1f5f9 !important;
    overflow: visible;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.header-icons .avatar .avatar-content {
    border-radius: 0.45rem !important;
    overflow: visible;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    line-height: 1;
}
.header-icons .avatar i {
    color: #435ebe !important;
    line-height: 1;
    display: block;
    width: 1em;
    text-align: center;
}
.header-icons .dropdown {
    display: inline-flex;
    align-items: center;
}
/* Le gabarit pose .dropdown .avatar{margin-right:.6rem} : l'ecart apres la cloche etait
   donc plus large qu'entre les autres pictos, qui n'ont pas de conteneur .dropdown. */
.header-icons .dropdown > .avatar {
    margin-right: 0;
}
.header-icons a.avatar:hover,
.header-icons .dropdown > a.avatar:hover {
    background: #e8edfb !important;
    border-color: #c7d2fe !important;
}
.header-icons .avatar .avatar-content > sup {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem !important;
    line-height: 1.15rem;
    font-size: 0.65rem !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    border-width: 0 !important;
    background-color: #ef4444 !important;
    color: #fff !important;
    right: -6px !important;
    top: -5px !important;
}

/* Dropdown « Mon compte » : raccord pastilles / nav
   Pas d'overflow:hidden : le sélecteur de langue s'ouvre en absolute et serait rogné. */
.header-account-menu {
    min-width: 13.5rem;
    padding: 0.35rem 0 0.4rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
    overflow: visible !important;
}
.header-account-menu__head {
    background: #435ebe;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1rem;
    margin: -0.35rem 0 0.35rem;
    border-radius: 0.5rem 0.5rem 0 0;
}
.header-account-menu .dropdown-item {
    color: #334155;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.45rem 1rem;
    border-radius: 0.35rem;
    margin: 0 0.35rem;
    width: auto;
}
.header-account-menu .dropdown-item:hover,
.header-account-menu .dropdown-item:focus {
    background: #f1f5f9;
    color: #0f172a;
}
.header-account-menu .dropdown-divider {
    margin: 0.35rem 0.75rem;
    border-top-color: #e2e8f0;
}
.header-account-menu .lang-switcher > summary {
    color: #64748b;
    font-size: 0.875rem;
}
.header-account-menu .lang-switcher > summary:hover {
    color: #435ebe;
}
.header-account-menu .lang-switcher__menu {
    z-index: 1080;
}

/* Dropdown alertes « Ventes à traiter » */
.header-alerts-menu {
    min-width: 20rem;
    max-width: min(26rem, calc(100vw - 2rem));
    max-height: min(70vh, 28rem);
    padding: 0 0 0.4rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
    overflow-x: hidden;
    overflow-y: auto;
}
.header-alerts-menu__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #dc2626;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1rem;
}
.header-alerts-menu .dropdown-item {
    color: #334155;
    font-weight: 500;
    font-size: 0.84rem;
    line-height: 1.35;
    white-space: normal;
    padding: 0.55rem 0.85rem;
    border-radius: 0.35rem;
    margin: 0.1rem 0.35rem;
    width: auto;
}
.header-alerts-menu .dropdown-item:hover,
.header-alerts-menu .dropdown-item:focus {
    background: #fef2f2;
    color: #0f172a;
}
.header-alerts-menu__id {
    color: #94a3b8;
    font-weight: 400;
}

/* Nav desktop : polish soft + filet marque cyan */
@media screen and (min-width: 1200px) {
    .layout-horizontal .main-navbar {
        padding: 0.55rem 0;
        /* Filet #41bbde sous la barre #435ebe */
        box-shadow: inset 0 -3px 0 0 #41bbde;
    }
    .layout-horizontal .main-navbar > .container > ul {
        gap: 0.25rem;
        align-items: center;
    }
    /* Séparateurs plus discrets (remplace les border-end Bootstrap) */
    .layout-horizontal .main-navbar > .container > ul > .menu-item.border-end {
        width: 1px;
        height: 1.15rem;
        margin: 0 0.35rem;
        padding: 0 !important;
        border: 0 !important;
        background: rgba(255, 255, 255, 0.22);
        align-self: center;
        list-style: none;
        flex: 0 0 auto;
    }
    .layout-horizontal .main-navbar > .container > ul > .menu-item > .menu-link {
        padding: 0.45rem 0.8rem !important;
        border-radius: 0.4rem;
        transition: background 0.15s ease;
    }
    .layout-horizontal .main-navbar > .container > ul > .menu-item > .menu-link:hover {
        background: rgba(255, 255, 255, 0.14);
    }
    .layout-horizontal .main-navbar > .container > ul > .menu-item.active > .menu-link {
        background: rgba(255, 255, 255, 0.2);
        font-weight: 600;
    }
    /* Le padding uniforme ci-dessus écrase le padding-right que le thème réserve au chevron, lequel
       est en position absolue à droite : sans cette réserve, la flèche se pose sur le libellé. */
    .layout-horizontal .main-navbar > .container > ul > .menu-item.has-sub > .menu-link {
        padding-right: 1.75rem !important;
    }
    .layout-horizontal .main-navbar > .container > ul > .menu-item.has-sub > .menu-link:after {
        right: 0.5rem;
        opacity: 0.9;
    }
}

/* Pictos de l'en-tete. Sous 1200px, un script les deplace dans le menu replie — sans
   jamais les dupliquer : le bandeau du haut ne peut porter le logo, cinq pictos et le burger. */
.header-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media screen and (max-width: 1199px) {
    /* Le gabarit pose overflow:hidden sur .main-navbar, ce qui rognerait les panneaux deroulants
       des pictos une fois deplaces dedans. */
    .layout-horizontal .main-navbar {
        overflow: visible;
    }
    /* :not(:empty) : pas de separateur orphelin si les pictos n'ont pas ete deplaces. */
    .layout-horizontal .main-navbar .header-icons-slot:not(:empty) {
        margin-bottom: 0.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .layout-horizontal .main-navbar .header-icons {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    /* 48px x 5 pictos ne tiennent pas sur une ligne de telephone. */
    .layout-horizontal .main-navbar .header-icons .avatar.avatar-lg,
    .layout-horizontal .main-navbar .header-icons .avatar.avatar-lg .avatar-content {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 0.95rem;
    }
    /* Ces panneaux sont des <ul> : dans le menu, ils heritent du display:flex des listes de la
       barre, plus specifique que le display:none de Bootstrap, et restaient donc ouverts. */
    .layout-horizontal .main-navbar .header-icons .dropdown-menu {
        display: none;
    }
    /* Largeur bornee a l'ecran : a leur largeur naturelle, ces panneaux en debordaient. */
    .layout-horizontal .main-navbar .header-icons .dropdown-menu.show {
        display: block;
        width: max-content;
        max-width: calc(100vw - 2rem);
        max-height: 60vh;
        overflow-y: auto;
    }
    /* Les pictos restent ronds : sans cela le conteneur du panneau s'etire et deforme
       l'avatar qui lui sert de bouton. */
    .layout-horizontal .main-navbar .header-icons .dropdown {
        flex: 0 0 auto;
    }
    /* Bootstrap met les lignes en nowrap : « Vente sur X du 01/01/2026 (M123) » depassait
       la largeur du panneau et se retrouvait coupee. Sur telephone, on passe a la ligne. */
    .layout-horizontal .main-navbar .header-icons .dropdown-menu .dropdown-item {
        white-space: normal;
    }
    /* Sous-menu des langues remis dans le flux : pose en absolu, il etait rogne par le panneau
       qui defile, qui n'en montrait qu'une langue et demie. */
    .layout-horizontal .main-navbar .header-icons .lang-switcher__menu {
        position: static;
        margin: 0;
        border: 0;
        box-shadow: none;
    }
    /* Accordeon mobile : sous-menu blanc sur fond parent #f5f7fc */
    .layout-horizontal .main-navbar .submenu {
        background-color: #fff !important;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        margin: 0.15rem 0 0.5rem;
        padding: 0.35rem 0.35rem !important;
        width: 100% !important;
        box-shadow: none;
    }
    .layout-horizontal .main-navbar .submenu.submenu--mgl,
    .layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group {
        width: 100% !important;
    }
    .layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group .submenu-item a.submenu-link:hover {
        background: #f1f5f9 !important;
    }
}

/* Tableaux DataTables sur telephone. Ces regles annulent des alignements du style fourni par
   DataTables (charge avant cette feuille, a specificite egale). */
@media screen and (max-width: 767px) {
    /* « Afficher N entrees » et « Rechercher » arrivent centre et aligne a droite : cale a
       gauche, comme le reste de la page. */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_filter label {
        text-align: left;
    }
    /* Avec scrollX, la cellule du message « aucune donnee disponible » est aussi large que le
       tableau : centre, le message tombait pour moitie hors de l'ecran. */
    table.dataTable td.dataTables_empty {
        text-align: left;
    }
}

/* Confort tactile, sous 992px seulement : le doigt n'a pas la precision du curseur, et Safari
   iOS a une reaction propre aux petits champs. Rien de tout cela ne concerne le bureau. */

/* Sous 16px, Safari iOS agrandit la page au focus d'un champ et ne la ramene pas ensuite. Les
   utilitaires « sm » de Bootstrap sont a 14px : seule leur police change ici. */
@media screen and (max-width: 991px) {
    .form-control-sm,
    .form-select-sm,
    .select2-container .select2-search__field {
        font-size: 16px;
    }
}

/* Cibles de moins de 44px de cote : la zone sensible est elargie par un pseudo-element, donc
   sans deplacer le picto ni la mise en page. A reserver aux pictos isoles — entre deux voisins,
   des zones qui se chevauchent rendent le clic imprevisible. */
@media screen and (max-width: 991px) {
    .burger-btn,
    .geo-top-banner__close,
    .btn-sort-col,
    .box_site .btn,
    .lang-switcher > summary {
        position: relative;
    }
    .burger-btn::after,
    .geo-top-banner__close::after,
    .btn-sort-col::after,
    .box_site .btn::after,
    .lang-switcher > summary::after {
        content: "";
        position: absolute;
        /* Mesures d'origine : de 20x27 pour le burger a 34x31 pour les boutons des cartes de site. */
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
    }
    /* Pagination : ses boutons se touchent, un tampon mordrait sur le voisin. Taille reelle, donc. */
    .page-item .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Fenetre « Informations & metriques » d'un site. */

/* Bloc TrustFlow / CitationFlow. L'ordre du DOM va colonne par colonne pour que le telephone
   empile les deux blocs entiers ; le placement explicite ci-dessous realigne chaque element
   avec son homologue sur grand ecran, leurs hauteurs differant. */
/* Seuil a 992px et non 768 : sur une tablette, la disposition de bureau de cette fenetre
   reclamait 887px pour 747 disponibles. */
@media screen and (min-width: 992px) {
    .psd-metrics-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Derniere ligne en 1fr : le fond gris descend jusqu'en bas dans la colonne qui a le
           moins de lignes, comme le faisaient les cellules du tableau d'origine. */
        grid-template-rows: auto auto 1fr;
    }
    .psd-metrics-grid > :nth-child(1) { grid-area: 1 / 1; }
    .psd-metrics-grid > :nth-child(2) { grid-area: 2 / 1; }
    .psd-metrics-grid > :nth-child(3) { grid-area: 3 / 1; }
    .psd-metrics-grid > :nth-child(4) { grid-area: 1 / 2; }
    .psd-metrics-grid > :nth-child(5) { grid-area: 2 / 2; }
    .psd-metrics-grid > :nth-child(6) { grid-area: 3 / 2; }
}

@media screen and (max-width: 991px) {
    /* Le cercle du logo occupe une colonne fixe de 150px, soit plus du tiers d'un ecran de
       telephone, pour un element decoratif : le nom du site et son lien sont juste a cote. */
    .psd-logo-col {
        display: none;
    }
    /* Sans min-width: 0, un element flex garde la largeur minimale de son contenu : les tableaux
       de metriques elargissaient la fenetre bien au-dela de l'ecran. Chaque maillon compte. */
    .psd-form,
    .psd-content,
    .psd-main {
        min-width: 0;
    }
    /* Le formulaire est l'enfant direct de .modal-dialog, lui-meme en flex : sans largeur
       imposee il se cale sur son contenu au lieu de la largeur de la fenetre. */
    .psd-form {
        width: 100%;
    }
}

/* Titre de cette fenetre : pose en absolu a left: 50%, il ne disposait que de la moitie droite
   de sa bande et passait sur deux lignes. !important : les utilitaires de position de Bootstrap
   le sont aussi. */
@media screen and (max-width: 767px) {
    #popup_site_details .modal-header h4 {
        left: 0 !important;
        right: 0;
        transform: translateY(-50%) !important;
        padding: 0 52px 0 14px;
        text-align: center;
    }
}

/* Fiche de vente : tableau libelle / valeur dont les deux colonnes sont bloquees par leur
   contenu — libelles insecables d'un cote, URL et code sans point de coupure de l'autre — et
   qui faisait defiler la page entiere. !important : text-nowrap est un utilitaire Bootstrap. */
@media screen and (max-width: 767px) {
    .sell-summary th {
        white-space: normal !important;
    }
    .sell-summary td {
        overflow-wrap: anywhere;
    }
}

/* Cellule du code a copier. max-width: 0 empeche une cellule d'imposer la largeur de son
   contenu dans un tableau a largeur automatique : sans elle, l'URL etirait le tableau de 300px,
   bureau compris. La regle etait en style en ligne, donc hors de portee d'une feuille. */
.sell-summary td.sell-html-code {
    max-width: 0;
}
/* Le code se replie et se lit en entier sur grand ecran ; le defilement est reserve au
   telephone, ou le repli donnait six lignes en escalier. */
.sell-summary td.sell-html-code pre {
    white-space: pre-wrap;
}
@media screen and (max-width: 767px) {
    .sell-summary td.sell-html-code pre {
        white-space: pre;
        overflow-x: auto;
    }
}

/* Badges et filtres rapides du catalogue : des cadres en ligne, qui se cassent en escalier sur
   telephone puisque chacun prend la largeur de son contenu. */
@media screen and (max-width: 767px) {
    .filter-box {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    /* !important : les marges utilitaires de Bootstrap (mx-2) le sont aussi. */
    .filter-box label {
        display: block;
        margin: 0.25rem 0 !important;
    }
}

/* Messagerie : liste des conversations a gauche, fil a droite. Ces dimensions etaient en style
   en ligne, donc impossibles a adapter au telephone. */
.messagerie-row {
    height: 500px;
}
.messagerie-list {
    width: 310px;
    max-height: 500px;
    overflow-y: auto;
}
.messagerie-thread {
    height: 100%;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    /* Empiles : sinon la liste gardait ses 310px et il ne restait qu'une bande de 80px pour
       le fil, dont le contenu debordait par-dessus le pied de page. */
    .messagerie-row {
        height: auto;
    }
    .messagerie-list {
        width: 100%;
        max-height: 45vh;
        /* Empiles, la separation va dessous et non a droite. !important : les utilitaires de
           bordure de Bootstrap (.border-end) le sont aussi. */
        border-right: 0 !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
    .messagerie-thread {
        height: auto;
        overflow: visible;
    }
}

/* Fleches du carrousel ramenees sous lui jusqu'a 1023px : leur decalage depassait la marge
   disponible et faisait defiler la page. !important, les valeurs d'origine etant en ligne. */
@media screen and (max-width: 1023px) {
    #carouselSpecialSites,
    #carouselLastSites {
        padding-bottom: 3rem;
    }
    #carouselSpecialSites .carousel-control-prev,
    #carouselSpecialSites .carousel-control-next,
    #carouselLastSites .carousel-control-prev,
    #carouselLastSites .carousel-control-next {
        top: auto !important;
        bottom: 0.5rem !important;
        width: 44px !important;
        height: 35px !important;
        opacity: 1;
    }
    #carouselSpecialSites .carousel-control-prev,
    #carouselLastSites .carousel-control-prev {
        left: calc(50% - 50px) !important;
        right: auto !important;
    }
    #carouselSpecialSites .carousel-control-next,
    #carouselLastSites .carousel-control-next {
        left: auto !important;
        right: calc(50% - 50px) !important;
    }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {color: #435ebe !important;}
/* En-tete moins haut : Bootstrap le rembourre autant que le corps et le titre flotte. Pas de
   !important, pour laisser les en-tetes qui neutralisent deja leur padding par utilitaire. */
.card-header {padding-top: 1rem; padding-bottom: 1rem;}
/* Le titre garde sinon sa demi-marge basse de titre courant, qui s'ajoute au padding : le texte
   se retrouve pousse vers le haut de la bande. */
.card-header .card-title {margin-bottom: 0;}
/* Titre de page a 1,5 rem partout dans l'espace client. Bootstrap monte le h1 jusqu'a 2,5 rem au
   dela de 1200 px, ce qui ecrase les cartes en dessous. Le site vitrine et la page d'accueil
   publique gardent leur echelle : leurs feuilles se chargent apres celle-ci. */
.h1, h1 {font-size: 1.5rem;}
.hover:hover {color:#41bbde;}

.text-mgl-dark{color: #435ebe !important;}
.text-mgl-light{color: #41bbde !important;}
.bg-mgl-dark{background-color: #435ebe !important;}
.bg-mgl-light{background-color: #41bbde !important;}
.border-mgl-dark {border-color: #435ebe !important;}
.border-mgl-light {border-color: #41bbde !important;}


.bg-semrush{background-color: #ff622d;}
.bg-seobserver{background-color: #e6800b;}
.bg-ahrefs{background-color: #2e3c56;}
.bg-majestic{background-color: #2d526d;}
.bg-sistrix{background-color: #1269d3;}
.bg-moz{background-color: #89d6f3;}
.bg-haloscan{background-color: #1e1e2d;}

.pull-right {
    float: right;
}
.page-item:first-child, .page-item:last-child {margin:0}


.table thead th {
    position: sticky;
}
.table thead th .btn-dark{
    color: white;
    background-color: #00000033;
    border: #00000033!important;
    border-radius: 0 0 0 5px;
}

.table .categories_container {
    max-height: 100px;
    overflow: overlay;
    font-size: 0.9em;
}

.links-list {
    background: #fff;
    box-shadow: 0 0 20px #666;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    left: -122px;
    top: -60px;
    z-index: 110;
}
.links-list:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 10px;
    margin-top: -10px;
}
.links-list a { display:block; }

.hidden {
    display: none !important;
}

.btn-sort-col {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 4px;
}

.select2-container--default .select2-selection--multiple {
    border-color: #dce7f1 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #41bbde33;
    border: 1px solid #41bbde;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
    color: #41bbde;
    font-weight: normal;
    font-size: 12px;
}
.select2-container--default .select2-search--inline .select2-search__field {
    font-size: 14px;
    margin:0;
}

.select2-container--default .select2-selection--single {
    border-radius: 0.2rem;
    font-size: .875rem;
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border: 1px solid #dce7f1;
    color: #607080;
    font-weight: 400;
    line-height: 1.5;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #adb5bd;
    top: -2px !important;
    position: relative;
    left: -7px;
}



a.badge.bg-secondary:hover{color:#fff;}

.modal .modal-header .close{
    padding: 4px 10px;
}
.modal .modal-header .close:hover {
    background: #ffffff66;
}

/* Libelle et indicateur ne font qu'un bouton qui remplit la cellule : la cible se limitait
   sinon a un pave de vingt pixels dans le coin, le libelle voisin restant inerte. */
.th_sort {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* Le libelle et le chevron sont deux boutons de meme effet. Le libelle ne s'etire pas : le picto
   d'aide de la colonne « Classe » se glisse juste apres lui, et le chevron part a droite. */
.th_sort__btn,
.th_sort__arrow {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    /* Les boutons se fondent dans l'en-tete : ils en heritent couleur, graisse et taille. */
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.th_sort__btn:focus-visible {
    outline: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .45);
}
.th_sort__label {
    display: inline-block;
    /* Un en-tete tient sur une ligne. Laisse libre, il se replie des que le tableau manque de
       place, et une rangee d'en-tetes a deux lignes est plus lourde que le gain de largeur. Les
       libelles sont donc choisis courts, cf. metric.rd_short. */
    white-space: nowrap;
}
/* Colonnes de metriques. Plancher de largeur : la valeur en dessous n'est qu'une jauge de 42 px,
   c'est l'en-tete qui dimensionne la colonne. */
.th_metric { min-width: 100px; }
/* Filet sous le libelle de la colonne qui ordonne la liste. En ombre portee et non en bordure :
   une bordure ajouterait 2 px de hauteur a la cellule, qui se retrouveraient en decalage face
   aux quatre en-tetes non triables (Thematiques, Langue, Admin, Actions). */
.th_sort--active .th_sort__label {
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85);
}
/* Chevron pale tant que la colonne n'ordonne pas la liste. Les huit colonnes triables portaient
   auparavant le meme chevron plein vers le bas, aucune ne se distinguait. */
.th_sort__arrow {
    margin-left: auto;
    font-size: 0.8em;
    opacity: 0.5;
    transition: opacity .15s ease;
}
.th_sort:hover .th_sort__arrow,
.th_sort--active .th_sort__arrow {
    opacity: 1;
}
/* Picto d'aide de la colonne « Classe », rendu hors du bouton. */
.th_sort__help {
    flex: 0 0 auto;
    color: #fff;
    opacity: 0.85;
}
.th_sort__help:hover { color: #fff; opacity: 1; }

/* Meme habillage pour la paire « metriques » / « panier » partout ou elle apparait : trois
   emplacements l'habillaient differemment, et l'un des deux s'etirait a la largeur de sa cellule. */
.site_actions {
    /* Le tableau est en table-sm : la colonne reprend un peu d'air a son compte, la rangee de
       boutons etant plus haute que le texte des autres cellules. */
    padding: 0.5rem 0.75rem !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.site_actions__group {
    display: inline-flex;
    gap: 0.375rem;
}
.site_action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                transform .15s ease, box-shadow .15s ease;
}
.site_action:hover { transform: translateY(-1px); }
.site_action:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(67, 94, 190, .25);
}
/* Consultation des metriques : bouton en teinte douce plutot qu'en cyan plein. L'ajout au
   panier est l'action attendue de la ligne, deux boutons pleins se disputaient le regard. */
.site_action--info {
    background: #e8f7fb;
    border-color: #cbe9f2;
    color: #1a97b8;
}
.site_action--info:hover {
    background: #d5f0f8;
    border-color: #9fd8e8;
    color: #147a94;
}
/* Action principale de la ligne : ajout au panier dans le catalogue, modification de la fiche
   dans « Mes sites », consultation de la commande dans « Mes commandes ». Meme habillage, le
   client passant d'une liste a l'autre. */
.site_action--cart,
.site_action--edit,
.site_action--view {
    background: #435ebe;
    border-color: #435ebe;
    color: #fff;
}
.site_action--cart:hover,
.site_action--edit:hover,
.site_action--view:hover {
    background: #37509f;
    border-color: #37509f;
    color: #fff;
    box-shadow: 0 3px 8px rgba(67, 94, 190, .3);
}
/* Teinte douce et non rouge plein : un bouton plein sur chaque ligne peignait la colonne. */
.site_action--stop {
    background: #fdecee;
    border-color: #f7ccd2;
    color: #c02a3a;
}
.site_action--stop:hover {
    background: #f9d7dc;
    border-color: #efa8b2;
    color: #99202d;
}
/* Rouge du PDF en teinte douce, palette distincte de l'arret : ici c'est un format, pas un risque. */
.site_action--pdf {
    background: #fdeeec;
    border-color: #f8d2cc;
    color: #c0392b;
}
.site_action--pdf:hover {
    background: #f9dcd7;
    border-color: #f0b0a5;
    color: #96291d;
}
/* Trois effets distincts a verifier un par un, d'ou la liste ; tiret plutot que puce native. */
.stop_special_list {
    padding-left: 1.1rem;
    list-style: none;
    color: #4b5563;
}
.stop_special_list li {
    position: relative;
    margin-bottom: 0.4rem;
}
.stop_special_list li:last-child { margin-bottom: 0; }
.stop_special_list li::before {
    content: "–";
    position: absolute;
    left: -1.1rem;
    color: #9ca3af;
}

/* Points de la modale des classes de lien. Le texte d'origine empilait trois paragraphes gris de
   meme graisse ; un picto par idee donne au regard un point d'accroche par point. */
.info_lead {
    margin-bottom: 1.25rem;
    color: #435ebe;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
.info_point {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-top: 1px solid #f1f3f8;
}
.info_point__ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #eef1f6;
    color: #435ebe;
}
.info_point__text {
    margin: 0;
    color: #5a6270;
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* Cartes de la modale des badges de prix. La bordure gauche et le picto reprennent la couleur du
   flag (--flag-color, posee sur la carte depuis price_flag.bg_color) pour que le lecteur relie la
   carte au badge qu'il vient de voir dans le catalogue. */
.flag_card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0.875rem;
    border: 1px solid #e9ecef;
    border-left: 3px solid var(--flag-color, #435ebe);
    border-radius: 0.5rem;
    background: #fff;
}
.flag_card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.flag_card__ico {
    color: var(--flag-color, #435ebe);
    font-size: 1.125rem;
    line-height: 1;
}
.flag_card__text {
    margin-bottom: 0.75rem;
    color: #5a6270;
    font-size: 0.875rem;
    line-height: 1.5;
}
/* La conclusion etait un pave en gras, et trois paves cote a cote se disputaient l'attention.
   Elle passe en pied de carte, detachee par un filet. `margin-top: auto` aligne ces pieds entre
   eux quand les textes n'ont pas la meme hauteur, la carte etant en colonne flex. */
.flag_card__note {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f3f8;
    color: #435ebe;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
}

.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Le `table-sm` du theme pose 1 rem de marge : cette regle ramene les listings au compact.
   Toute marge visant un tableau precis s'ecrit APRES celle-ci, a specificite egale. */
.table-md.dataTable-table tr td, .table-md.dataTable-table tr th, .table-sm.dataTable-table tr td, .table-sm.dataTable-table tr th, .table.table-md tr td, .table.table-md tr th, .table.table-sm tr td, .table.table-sm tr th {
    padding: 0.5rem 0.25rem;
}

/* Indicateur de tri ramene dans le flux, apres le libelle, comme au catalogue (voir .th_sort) :
   pose en absolu, il recouvrait les libelles cales a droite. Apres la densite ci-dessus. */
table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
    padding-right: 0.25rem;
}
/* La fleche haute disparait ; la basse devient l'indicateur unique. */
table.dataTable > thead .sorting::before,
table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_desc::before,
table.dataTable > thead .sorting_asc_disabled::before,
table.dataTable > thead .sorting_desc_disabled::before {
    display: none;
}
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::after {
    position: static;
    display: inline-block;
    margin-left: 0.4rem;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 0.8em;
    /* Le chevron ne doit pas rendre la cellule plus haute que celle des colonnes non triables. */
    line-height: 1;
    opacity: 0.5;
    transition: opacity .15s ease;
}
table.dataTable > thead .sorting::after { content: "\f0dc"; }
table.dataTable > thead .sorting_asc::after { content: "\f0de"; opacity: 1; }
table.dataTable > thead .sorting_desc::after { content: "\f0dd"; opacity: 1; }
table.dataTable > thead .sorting:hover::after { opacity: 1; }

.table {
    --bs-table-striped-bg: rgba(0,0,0,0.03);
}

.table.cart .url {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 240px;
}

.alert .alert-heading {
    color: white !important;
}
.modal .white {color: white !important}

/** tooltipster **/
.tooltipster-mgl .tooltipster-box{
    border: 2px solid #41bbde;
    background: #70cfea;
    color: #fff;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: #41bbde;
}

.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
    border-left-color: #41bbde;
}

.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
    border-right-color: #41bbde;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
    border-top-color: #41bbde;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
    border-bottom-color: #41bbde;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
    border-left-color: #41bbde;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
    border-right-color: #41bbde;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
    border-top-color: #41bbde;
}

/** Thin Scrollbar **/
/* width ne regle que la barre verticale : sans height, l'horizontale garde l'epaisseur du systeme. */
.thin_scroll_bar::-webkit-scrollbar {width: 2px; height: 2px;}
.thin_scroll_bar::-webkit-scrollbar-track {background: #f1f1f1cc;}
.thin_scroll_bar::-webkit-scrollbar-thumb {background: #888888cc;}
.thin_scroll_bar::-webkit-scrollbar-thumb:hover {background: #41bbdecc;}

.toggle_favorite_site {
    cursor: pointer;
}

.disclaimer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(67, 94, 190, .1);
    color: #435ebe;
    font-size: .7rem;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.disclaimer-close:hover {
    background-color: rgba(67, 94, 190, .22);
}

/** Majestic **/
.ttf_label
{
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-weight:700;
    border-radius:4px;
    padding:0 5px;
    display:inline-block
}

.ttf_label.arts
{
    background:#ff6700!important;
    color:#fff
}
.ttf_label.news
{
    background:#76D54B!important;
    color:#333 !important;
}
.ttf_label.society
{
    background:#7A69CD!important;
    color:#fff !important;
}
.ttf_label.computers
{
    background:#f33!important;
    color:#fff !important;
}
.ttf_label.business
{
    background:#C5C88E!important;
    color:#333 !important;
}
.ttf_label.regional
{
    background:#F582B9!important;
    color:#fff !important;
}
.ttf_label.recreation
{
    background:#89C7CB!important;
    color:#333 !important;
}
.ttf_label.sports
{
    background:#55355D!important;
    color:#fff !important;
}
.ttf_label.kids
{
    background:#fc0!important;
    color:#333 !important;
}
.ttf_label.reference
{
    background:#C84770!important;
    color:#fff !important;
}
.ttf_label.games
{
    background:#557832!important;
    color:#fff !important;
}
.ttf_label.home
{
    background:#d95!important;
    color:#fff !important;
}
.ttf_label.shopping
{
    background:#600!important;
    color:#fff !important;
}
.ttf_label.health
{
    background:#009!important;
    color:#fff !important;
}
.ttf_label.science
{
    background:#6BD39A!important;
    color:#333 !important;
}
.ttf_label.world
{
    background:#577!important;
    color:#fff !important;
}
.ttf_label.adult
{
    background:#333!important;
    color:#fff !important;
}

.ttf_label.recreation
{
    background:#89C7CB!important;
    color:#fff !important;
}


table td.site_name {
    min-width: 240px;
}
table a.site_name_value {
    text-overflow: ellipsis;
    max-width: 206px;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
}

.loading_overlay {
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000aa;
    z-index: 1000000;
    font-size: 50px;
    color: #41bbde;
    text-align: center;
}
.loading_overlay .loading_overlay_content {
    position: absolute;
    width: 100%;
    top:50%;
}

.layout-horizontal .main-navbar .submenu {
    width:300px;
}
.layout-horizontal .main-navbar .submenu .submenu-group {
    width:300px;
}

/* Sous-menus nav (Catalogue / Annonceurs / Éditeurs) : groupes + pastilles
   Spécificité volontairement haute : app.css force display:block sur .submenu-item a */
.layout-horizontal .main-navbar .submenu.submenu--mgl,
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group {
    width: 290px;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group {
    padding: 0.35rem 0 0.45rem;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-label {
    list-style: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0.55rem 0.9rem 0.25rem;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-divider {
    list-style: none;
    height: 1px;
    margin: 0.4rem 0.85rem;
    padding: 0;
    background: #e9ecef;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-item {
    padding: 0 0.45rem;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group .submenu-item a.submenu-link {
    display: flex !important;
    align-items: center;
    gap: 0;
    margin: 0.1rem 0;
    padding: 0.42rem 0.55rem !important;
    border-radius: 0.45rem;
    color: #334155 !important;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group .submenu-item a.submenu-link:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group .submenu-item a.submenu-link--info {
    cursor: default;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-group .submenu-item a.submenu-link--info:hover {
    background: transparent !important;
    color: #334155 !important;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-link-label {
    flex: 1 1 auto;
    min-width: 0;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-link .badge {
    margin-left: 0.5rem;
    flex-shrink: 0;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    margin-right: 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.82rem;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap img {
    height: 14px;
    width: 14px;
    object-fit: contain;
}
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--all { background: #e2e8f0; color: #64748b; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--promo { background: #e8edfb; color: #435ebe; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--best { background: #ccfbf1; color: #0d9488; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--fast { background: #fef3c7; color: #d97706; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--express { background: #dcf3e4; color: #3f9d5c; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--fav { background: #fef3c7; color: #eab308; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--press { background: #e0f5fb; color: #41bbde; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--google { background: #f1f5f9; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--geo { background: #ede9fe; color: #7d5fff; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--wallet { background: #ccfbf1; color: #0d9488; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--recharge { background: #e8edfb; color: #435ebe; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--cart { background: #e0f5fb; color: #41bbde; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--pack { background: #ede9fe; color: #7d5fff; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--orders { background: #e2e8f0; color: #64748b; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--bank { background: #ccfbf1; color: #0d9488; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--bank-manage { background: #e8edfb; color: #435ebe; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--sites { background: #e0f5fb; color: #41bbde; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--sells { background: #fef3c7; color: #d97706; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--specials { background: #e8edfb; color: #435ebe; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--dashboard { background: #e2e8f0; color: #64748b; }
.layout-horizontal .main-navbar .submenu.submenu--mgl .submenu-ico-wrap--wordpress { background: #ede9fe; color: #7d5fff; }

.conversation-item:hover {
    background: #41bbde33 !important;
    transition: background 0.15s, opacity 0.15s;
    cursor: pointer;
}

.conv-active {
    background: #41bbde33 !important;
    transition: background 0.15s, opacity 0.15s;
}

#conversation-list .conversation-row {
    max-width: 100%;
}

#conversation-list .conversation-item {
    min-width: 0;
    max-width: 100%;
}

#conversation-list .conversation-site-name {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.dot-unread {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #dd3254;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 4px;
}

.form-control:focus,
.btn-link:focus {
    box-shadow: none !important;
}

#conversation-list .no-result-placeholder {
    background: #fff;
}

/* Cette boite blanche est posee en fixe, sa hauteur se voit donc : sans height: auto elle suit
   le height: 100% de Bootstrap et son blanc descend jusqu'en bas de l'ecran. Les plafonds en
   style en ligne qui compensaient rognaient le pied et son bouton d'envoi sur telephone. */
#popup_messages {
    display: none;
    position: fixed;
    z-index: 10050;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 !important;
    background-clip: border-box !important;
    width: 500px;
    background: rgba(255,255,255,1);
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
}
@media (max-width:600px) {
    #popup_messages { width:96vw; left:2vw; transform:none; }
}

#popup_messages .modal-content,
#popup_messages .modal-header {
    border-radius: 0 !important;
    background-clip: border-box !important;
}

.dropdown-menu {
    z-index: 2000;
}

.box_site{
    border-radius : 3px;
    border-top:16px solid #40bcde;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.box_site .ttf_label {
    max-width: 100%;
}
.box_site .box_site_badge{
    font-size: 12px;
    background-color: #445ec7;
    padding: 1px;
    width: 100%;
    line-height: 16px;
    border-radius:3px;
    color: #fff;
    text-align: center;
    margin: 4px 0;
}
.box_site_badge_value {
    background-color: #fff;
    color : #445ec7;
    text-align: center;
    float: right;
    width:60%;
    border-radius: 2px;
}
.fs-7 {
    font-size: 14px;
}
.fs-8 {
    font-size: 12px;
}
.fs-9 {
    font-size: 11px;
}

/* ============================================================
   Bannière partenaire Horusium (dashboard client)
   ============================================================ */
a.horusium-banner,
.horusium-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 28px;
    margin: 0 0 24px 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #031532 0%, #0d3b6e 100%);
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(3, 21, 50, 0.18);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
    position: relative;
}
.horusium-banner::after {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(0,179,215,0.35) 0%, rgba(0,179,215,0) 70%);
    pointer-events: none;
}
.horusium-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(3, 21, 50, 0.28);
}
.horusium-banner__left {
    display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
    position: relative; z-index: 1;
}
.horusium-banner__logo { height: 32px; width: auto; }
.horusium-banner__tag {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: #00b3d7;
}
.horusium-banner__center { flex: 1; min-width: 0; position: relative; z-index: 1; }
.horusium-banner .horusium-banner__center h3 {
    margin: 0 0 4px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
}
.horusium-banner .horusium-banner__center p {
    margin: 0; font-size: 14px; color: rgba(255,255,255,0.85);
}
.horusium-banner__line { line-height: 1.5; }
.horusium-banner__line + .horusium-banner__line { margin-top: 2px; }
.horusium-banner__center strong { color: #00b3d7; font-weight: 700; }
.horusium-banner__line--promo {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.horusium-banner__line--promo .promo-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #00b3d7;
    color: #031532;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}
.horusium-banner__center .promo-code {
    display: inline-block;
    background: rgba(0, 179, 215, 0.18);
    border: 1px dashed #00b3d7;
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 4px;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.horusium-banner__right { position: relative; z-index: 1; }
.horusium-banner__cta {
    display: inline-block;
    padding: 10px 18px;
    background: #00b3d7;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: background .15s ease;
}
.horusium-banner:hover .horusium-banner__cta { background: #009bb8; }

@media (max-width: 768px) {
    .horusium-banner { flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; }
    .horusium-banner__right { width: 100%; }
    .horusium-banner__cta { display: block; text-align: center; }
}
/* ============================================================
   Fin bannière Horusium
   ============================================================ */

/* Recharge porte-monnaie : cartes CB / virement. Classe JS .is-selected
   plutot que :has(), pour rester lisible sur les navigateurs sans :has. */
.wallet-method-card {
    display: block;
    height: 100%;
    margin: 0;
    padding: 1rem;
    border: 1px solid #dce3ee;
    border-radius: 0.5rem;
    cursor: pointer;
    background: #fff;
}
.wallet-method-card.is-selected {
    border-color: #435ebe;
    background: #ebf3ff;
}
.wallet-method-card .form-check-input {
    margin-top: 0.35rem;
}
.wallet-bank-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Les etapes de la demande partagent un cadre, l'ecran se lisant comme une suite. Seul le depot
   du fichier porte un lisere : c'est le seul champ sans lequel la demande ne part pas. */
.bank_panel {
    padding: 1.25rem;
    border: 1px solid #dce3ee;
    border-radius: 0.75rem;
    background: #fff;
}
.bank_panel + .bank_panel {
    margin-top: 1.25rem;
}
.bank_panel--action {
    border-color: #435ebe;
}
.bank_panel__intro {
    margin: 0.35rem 0 0.9rem;
    color: #64748b;
}
.bank_panel__box {
    height: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #f6f9ff;
}
/* Une adresse est un bloc, pas une suite de paragraphes : ses lignes se serrent. */
.bank_panel__box p {
    margin-bottom: 0.35rem;
}
.bank_panel__box p:last-child {
    margin-bottom: 0;
}

/* Meme retour visuel que les cartes de paiement du panier : la carte retenue commande les frais
   affiches dessous. !important, le gabarit posant deja border et bg-light. */
.withdrawal-method {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.withdrawal-method:hover {
    border-color: #b9c6e6 !important;
}
.withdrawal-method.is-selected {
    border-color: #435ebe !important;
    box-shadow: 0 0 0 1px #435ebe;
    transform: translateY(-2px);
}
.withdrawal-method.is-selected .card-header {
    background: #ebf3ff !important;
}

/* Fiche site editeur (/site/{id}) : sections du formulaire, tuiles d'interrupteurs et lignes de
   thematiques sensibles. Les tuiles reprennent le gabarit de .wallet-method-card du panier. */
.site_section + .site_section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eef1f6;
}
.site_section__title {
    margin-bottom: 1rem;
    color: #435ebe;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Les chapeaux de section sont de simples <p class="text-muted"> : la classe dediee qui vivait
   ici donnait a la seule section « Redaction » une couleur et un interligne a elle. */
/* Favicon en tete de nom de site, dans les listes. Le cercle blanc borde evite qu'un logo
   transparent ou sombre se perde sur la ligne du tableau. */
.site_favicon {
    margin-right: 0.4rem;
    border: 1px solid #445ec7;
    border-radius: 100%;
    background-color: #fff;
    vertical-align: text-bottom;
}
.site_favicon--h1 {
    margin-right: 0.5rem;
}
/* Drapeau dans la liste des langues du site. Hauteur imposee : les SVG du jeu n'ont pas tous le
   meme rapport, sans quoi la ligne saute d'un pays a l'autre. */
.site_lang_flag {
    width: 20px;
    height: 14px;
    margin-right: 0.45rem;
    border: 1px solid #dee2e6;
    object-fit: cover;
    vertical-align: -2px;
}
/* Lien de visite : cale sous le nom du site et non sous le favicon, d'ou un retrait egal a la
   largeur de celui-ci plus sa gouttiere. Le negatif reprend le blanc que la hauteur du favicon
   ajoute au bas de la ligne du titre. */
.site_visit {
    margin-top: -0.35rem;
    padding-left: 2.5rem;
}
.site_visit i {
    font-size: 10px;
}

/* Metriques du site : quatre tuiles, les deux indices Majestic en anneau, les compteurs en liste
   et les libelles qualitatifs a part. */
.site_metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1199px) {
    .site_metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .site_metrics { grid-template-columns: 1fr; }
}
.site_metric {
    padding: 1rem;
    border: 1px solid #dce3ee;
    border-radius: 0.75rem;
    background: #fff;
}
.site_metric__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.site_metric__ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: #e0f5fb;
    color: #41bbde;
}
.site_metric__title {
    color: #435ebe;
    font-size: 0.9rem;
    font-weight: 700;
}
.site_metric__text {
    font-weight: 600;
    color: #435ebe;
}
/* Le libelle de thematique peut faire deux mots composes : il tient sur une ligne en plus petit.
   La pastille du catalogue est a hauteur de texte, sans marge verticale : elle prend ici un peu de
   corps pour s'aligner sur celle de la classe de lien juste au-dessus. */
.site_metric__ttf {
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
}
/* Le haut est plus rembourre que le bas a dessein : avec le line-height a 1 du badge, un libelle
   tout en capitales parait remonte, et les deux dixiemes d'ecart le recentrent. */
.site_metric__badge {
    padding: 0.4rem 0.55rem 0.3rem;
    font-size: 0.72rem;
}

/* Anneau de notation. Le rayon 15,9155 donne une circonference de 100 : la note se pose telle
   quelle dans stroke-dasharray, sans regle de trois. La rotation part l'arc du haut. */
.site_gauge_wrap {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto;
}
.site_gauge {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.site_gauge__track {
    fill: none;
    stroke: #eef1f6;
    stroke-width: 3.2;
}
.site_gauge__bar {
    fill: none;
    stroke: #41bbde;
    stroke-width: 3.2;
    stroke-linecap: round;
}
.site_gauge__value {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #435ebe;
    font-size: 2.2rem;
    font-weight: 700;
}

/* Variante compacte pour les cellules du catalogue : meme anneau que la fiche site, seules la
   boite et la graisse du chiffre changent. Le trace est epaissi a proportion, un stroke-width de
   3,2 devenant un cheveu a 42 px. Le chiffre garde sa couleur pour rester lisible en petit. */
.site_gauge_wrap--sm {
    width: 42px;
    height: 42px;
}
.site_gauge_wrap--sm .site_gauge__track,
.site_gauge_wrap--sm .site_gauge__bar {
    stroke-width: 4.5;
}
.site_gauge_wrap--sm .site_gauge__value {
    font-size: 0.8125rem;
    font-weight: 600;
}

.site_stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f8;
}
.site_stat:last-child {
    border-bottom: 0;
}
.site_stat__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.85rem;
}
.site_stat__label > .fa-sitemap,
.site_stat__label > .fa-users,
.site_stat__label > .fa-key {
    color: #41bbde;
}
.site_stat__value {
    color: #435ebe;
    font-weight: 700;
}
.site_option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #dce3ee;
    border-radius: 0.5rem;
    background: #fff;
}
.site_option:hover {
    border-color: #435ebe;
    background: #f6f9ff;
}
.site_option__label {
    margin: 0;
    cursor: pointer;
}
/* Interrupteur un peu plus grand : c'est la cible de clic de la tuile. Le retrait de .form-check
   se neutralise, sinon la marge negative de l'input le sort de la tuile. */
.site_option .form-check {
    padding-left: 0;
    flex: 0 0 auto;
}
.site_option .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
    margin: 0;
}
/* Thematiques : grille et non colonnes CSS. column-count remplit colonne par colonne, l'ordre
   alphabetique se lirait alors de haut en bas ; la grille le garde de gauche a droite. */
.site_categories_box {
    padding: 1rem;
    border: 1px solid #dce3ee;
    border-radius: 0.5rem;
    background: #fbfcfe;
}
.site_categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5rem;
    row-gap: 0.4rem;
}
@media (max-width: 991px) {
    .site_categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .site_categories { grid-template-columns: 1fr; }
}
.site_categories .form-check-label {
    cursor: pointer;
}

/* Les trois colonnes d'une thematique — nom, choix, surcout — tiennent dans cette largeur ; au-dela
   elles s'eloignent sans rien gagner en lisibilite. */
.site_topics {
    max-width: 640px;
}
.site_topic {
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid #f1f3f8;
}
.site_topic:last-of-type {
    border-bottom: 0;
}
.site_topic:hover {
    background: #f9fafd;
}
.site_topic__price {
    max-width: 150px;
}

/* Remuneration : le prix juste occupe toute la largeur, ses arguments a gauche et le chiffre a
   droite. Le prix fixe reste atteignable sous un interrupteur, sans encart qui le mette au meme
   rang : c'est le mode qui vend le moins et qui se preleve le plus. */
.site_fair__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
/* Le badge Bootstrap a un line-height a 1 : le creux des jambages reste vide sous le libelle et le
   texte parait remonte, l'etoile accentuant l'effet. inline-flex pour aligner le picto sur le
   texte, et un rembourrage haut un peu plus fort pour recentrer optiquement. */
.site_fair__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem 0.35rem;
}
/* Titre du bloc, au gabarit des titres de section du formulaire : la pastille du catalogue reste
   reservee au catalogue, elle ne titre pas un ecran. */
.site_fair__title {
    color: #435ebe;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.site_fair__pitch {
    margin-bottom: 1rem;
    color: #1e293b;
    font-size: 1.05rem;
}
/* Aplat vert tres clair : les arguments se lisent comme un bloc, distinct du chapeau. Le vert
   reprend celui des coches, sans bordure ni ombre. */
.site_fair__args {
    margin: 0;
    padding: 1rem 1.15rem;
    border-radius: 0.75rem;
    background: #f2faf5;
    list-style: none;
}
.site_fair__args li {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.site_fair__args li:last-child {
    margin-bottom: 0;
}
.site_fair__args i {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    color: #3f9c5c;
}
.site_fair__panel {
    padding: 1.25rem;
    border: 1px solid #dce3ee;
    border-radius: 0.75rem;
    background: #f6f9ff;
}
/* Pastille de position face au marche. Les deux etats sont dans la page, un seul est visible. */
.site_compet {
    margin-top: 0.85rem;
}
.site_compet__item {
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.site_compet__item--yes { background: #e6f6ec; color: #3f9c5c; }
.site_compet__item--no  { background: #fdeced; color: #dc3545; }
/* L'aplat vert seul se confondait avec une pastille d'information : un filet vert et un libelle
   appuye disent que la chose se clique. */
.site_fair__back {
    border: 1px solid #b6e0c4;
    font-weight: 600;
}
.site_fair__back:hover {
    border-color: #3f9c5c;
}
/* Remuneration suggeree, sous la phrase de la pastille rouge : c'est le geste a faire, il se lit
   d'un ton plus calme que le constat. */
.site_compet__hint {
    margin-top: 0.35rem;
    font-weight: 500;
}
.site_details {
    margin-top: 1.1rem;
}
.site_details__title {
    margin-bottom: 0.35rem;
    color: #64748b;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.site_details th {
    color: #64748b;
    font-weight: 500;
    font-size: 0.85rem;
}
.site_details td {
    color: #435ebe;
}
.site_fixed {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef1f6;
}
.site_fixed .form-check-label {
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
}
.site_fixed__box {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #dce3ee;
    border-radius: 0.5rem;
    background: #fbfcfe;
}
.site_fixed__title {
    margin-bottom: 0.75rem;
    color: #435ebe;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Croix rouges au lieu des puces, en pendant des coches vertes du prix juste : les deux listes
   se lisent l'une contre l'autre. */
.site_fixed__notes {
    margin: 0;
    padding: 0;
    color: #64748b;
    list-style: none;
}
.site_fixed__notes li {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.site_fixed__notes li:last-child {
    margin-bottom: 0;
}
.site_fixed__notes i {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    color: #dc3545;
}
/* Consequences du passage en prix fixe, une par ligne sur un rouge tres clair : la modale est la
   pour freiner, elle emprunte le rouge de la pastille de prix non competitif. */
.site_confirm_list {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.site_confirm_list li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.5rem;
    background: #fdeced;
}
.site_confirm_list li:last-child {
    margin-bottom: 0;
}
.site_confirm_list i {
    flex: 0 0 auto;
    color: #dc3545;
}
.site_confirm_note {
    padding: 0.7rem 0.9rem;
    border-radius: 0.5rem;
    background: #f1f4f9;
    color: #64748b;
    font-size: 0.85rem;
}

/* Bouton au violet des articles GEO, celui du badge de Site::get_geo_badge(). Meme gabarit que
   btn-info (fond + bordure de la meme couleur, texte blanc). En classe partagee : /sites et le
   dashboard editeur portent le meme bouton, et le survol ne s'ecrit pas en attribut. */
.btn-geo { background-color: #7d5fff; border-color: #7d5fff; color: #fff; }
.btn-geo:hover, .btn-geo:focus, .btn-geo:active { background-color: #9179ff; border-color: #9179ff; color: #fff; }

/* Explication « Article LLMs / GEO », partagee par la fiche site et l'activation groupee.
   Quatre paragraphes de meme poids, dont deux engagements et un montant, se lisaient comme une
   notice : la promesse passe en tete, les engagements en liste, le montant dans son encart. */
/* Filet degrade en tete de fenetre. `modal-dialog-scrollable` rogne deja les angles, la regle
   couvre le cas ou la classe sauterait. */
.modal-content > .dash-promo__strip {
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.geo-pop__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.geo-pop__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #ede9fe;
    color: #7d5fff;
    font-size: 22px;
}
.geo-pop__lead {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.6;
}
/* Le lien d'exemple reste dans la phrase mais se donne des airs de bouton : c'est la seule
   sortie de la fenetre, et il se perdait en fin de paragraphe. */
.geo-pop__example {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.15rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid #d8cffe;
    border-radius: 999px;
    background: #f6f3ff;
    color: #6d4aff;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.geo-pop__example:hover {
    border-color: #b9a7fd;
    background: #ede9fe;
    color: #5b36f5;
}
.geo-pop__example i { font-size: 0.85em; }
.geo-pop__list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.geo-pop__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}
.geo-pop__list li + li { margin-top: 0.7rem; }
.geo-pop__list li span { min-width: 0; }
.geo-pop__check {
    margin-top: 0.25rem;
    flex-shrink: 0;
    color: #7d5fff;
}
/* La remuneration, seul argument chiffre de la fenetre. Le montant est grossi sur le <b> que
   portent deja les traductions, plutot que recopie a cote du paragraphe. */
.geo-pop__reward {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid #ded3ff;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f7f4ff, #eef4ff);
}
.geo-pop__reward-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #7d5fff;
    font-size: 17px;
}
.geo-pop__reward p { margin: 0; min-width: 0; }
/* Pas de nowrap : la phrase en gras fait une trentaine de caracteres et se retrouvait rejetee
   d'un bloc a la ligne, coupant le paragraphe en deux au milieu d'une phrase. */
.geo-pop__reward b {
    color: #5b36f5;
    font-size: 1.1em;
}
/* Consequences de l'activation groupee. Gris et non le bleu vif d'une alerte Bootstrap : cet
   encart dit ce que fait le bouton, il n'a pas a lui disputer le regard. */
.geo-pop__notice {
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid #e2e6ef;
    border-left: 3px solid #7d5fff;
    border-radius: 0.5rem;
    background: #f8f9fc;
    color: #5b6478;
    font-size: 0.9rem;
}
.geo-pop__notice b { color: #2f3d5e; font-size: 1.05em; }
.geo-pop__notice .fa-layer-group { color: #7d5fff; }

/* Bandeau d'incitation GEO : le bouton vivait colle au titre, sans rien dire qu'il ecrit sur tout
   le portefeuille. Picto, etiquette et titre reprennent les classes `dash-promo__*`. */
.sites-geo { border-left: 4px solid #7d5fff; }
/* Meme bandeau pour le plugin, au bleu de son encart du tableau de bord : le filet de gauche est
   ce qui distingue les deux quand ils s'empilent. */
.sites-plugin { border-left: 4px solid #435ebe; }
/* Colonne « Options » du listing editeur : prise du plugin et robot du GEO cote a cote, chacun
   avec son infobulle. L'espacement est pose ici et non par un blanc du HTML, qui disparait au
   moindre reformatage du gabarit. */
.site_flags i + i { margin-left: .5rem; }
/* Un cran au-dessus du texte de la cellule : ces deux glyphes sont detailles — une prise, un
   robot — et doivent se reconnaitre l'un de l'autre sans etre survoles. */
.site_flags i { font-size: 1.05rem; }
/* Le violet du GEO, un peu plus sombre que le #7d5fff de la famille, qui manque de contraste sur
   blanc a la taille d'un picto. Option fermee, le meme robot en gris clair — un rouge dirait une
   panne la ou il n'y a qu'une case a cocher. */
.site_geo_ico { color: #6d4bf6; }
.site_geo_ico--off { color: #ced4da; }
/* Trois etats de la prise. Gris et non rouge pour le plugin absent, cas le plus banal du parc ;
   l'ambre reste au seul cas trompeur, plugin installe mais court-circuite. */
.site_flag--on   { color: #3f9c5c; }
.site_flag--warn { color: #f0932b; }
.site_flag--off  { color: #ced4da; }
/* Le texte cede la place aux boutons jusqu'a 260 px, puis passe a la ligne : sans plancher, le
   groupe d'actions se ferait comprimer avant lui et les deux libelles se couperaient. */
.sites-geo__text { min-width: 260px; }

/* Deux moities dans une carte, leur separation passant a l'horizontale quand elles s'empilent.
   Les classes `dash-promo__*` servent aussi au bandeau GEO : les modifier touche les deux. */
.dash-promo__strip {
    height: 16px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: linear-gradient(90deg, #7d5fff, #435ebe);
}
.dash-promo__half + .dash-promo__half { border-top: 1px solid #e9ecef; }
@media (min-width: 992px) {
    .dash-promo__half + .dash-promo__half { border-top: 0; border-left: 1px solid #e9ecef; }
}
.dash-promo__head { gap: 14px; }
.dash-promo__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 22px;
}
.dash-promo__icon--geo { background: #ede9fe; color: #7d5fff; }
.dash-promo__icon--wp  { background: #e7effd; color: #435ebe; }
/* min-width sur l'element flex : sans lui, un titre insecable impose sa largeur a la colonne. */
.dash-promo__heading { min-width: 0; }
.dash-promo__tag {
    display: inline-block;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.dash-promo__tag--geo { background: #ede9fe; color: #7d5fff; }
.dash-promo__tag--wp  { background: #e6f6ec; color: #3f9c5c; }
.dash-promo__title {
    margin: 4px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.dash-promo__list { list-style: none; margin: 0 0 1rem; padding: 0; }
.dash-promo__list li { display: flex; gap: 8px; margin-bottom: 6px; }
.dash-promo__list li span { min-width: 0; overflow-wrap: anywhere; }
.dash-promo__check { margin-top: 5px; flex-shrink: 0; font-size: 12px; }
.dash-promo__check--geo { color: #7d5fff; }
.dash-promo__check--wp  { color: #3f9c5c; }
.dash-promo__note { margin-bottom: 1rem; }
/* margin-top auto : les boutons des deux moities s'alignent en bas, quel que soit le texte. */
.dash-promo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* ==========================================================================
   Parrainage (account_affiliation.php) — bandeau de presentation du programme
   ========================================================================== */

.aff-hero .card-body { padding-top: 1.5rem; }
.aff-hero__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}
/* min-width sur l'element flex : sans lui, un titre insecable impose sa largeur a la colonne. */
.aff-hero__pitch { flex: 1 1 320px; min-width: 0; }
.aff-hero__tag { background: #e8edfb; color: #435ebe; }
.aff-hero__title {
    margin: 0.6rem 0 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
}
/* Le taux : seul chiffre de la promesse, il se lit avant la phrase qui le porte. */
.aff-hero__title strong {
    color: #435ebe;
    font-size: 1.35em;
    font-weight: 800;
}
.aff-hero__lead {
    margin: 0;
    max-width: 62ch;
    color: #64748b;
}
/* Grille et non flex : les deux tuiles restent cote a cote a une largeur plancher. */
.aff-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 1fr));
    gap: 0.75rem;
}
.aff-hero__stat {
    padding: 0.85rem 1.1rem;
    border: 1px solid #dce3ee;
    border-radius: 0.75rem;
    background: #f6f9ff;
    text-align: center;
}
.aff-hero__stat-value {
    color: #2f3d5e;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.aff-hero__stat-label {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.8rem;
}

/* Numerotation par compteur CSS : une etape inseree se renumerote d'elle-meme. */
.aff-steps {
    counter-reset: aff-step;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 767px) {
    .aff-steps { grid-template-columns: 1fr; gap: 1rem; }
}
.aff-steps__item {
    counter-increment: aff-step;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.aff-steps__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #e8edfb;
    color: #435ebe;
    font-size: 20px;
}
/* Le numero se pose sur la tuile du picto : les deux disent la meme etape. */
.aff-steps__icon::after {
    content: counter(aff-step);
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #435ebe;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.aff-steps__body { min-width: 0; }
.aff-steps__title {
    color: #2f3d5e;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.aff-steps__text {
    margin: 0.15rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

/* Le lien, geste attendu de la carte : encadre et detache des etapes. */
.aff-link {
    margin-top: 1.75rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid #435ebe;
    border-radius: 0.75rem;
    background: #fbfcff;
}
.aff-link__label {
    display: block;
    margin-bottom: 0.4rem;
    color: #455fbf;
    font-size: 0.8rem;
    font-weight: 600;
}
/* Champ en lecture seule mais bien actif : fond blanc, non le gris des champs desactives. */
.aff-link input[readonly] {
    background: #fff;
    color: #2f3d5e;
}
.aff-link .btn { white-space: nowrap; }
/* Au telephone, le bouton passe sous le champ, qui sinon ne montre que le debut du lien. */
@media (max-width: 575px) {
    .aff-link .input-group > input {
        border-top-right-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
    }
    .aff-link .input-group > .btn {
        flex: 1 0 100%;
        margin-top: 0.5rem;
        border-radius: 0.25rem !important;
    }
}

/* <details> natif : ouvrir un pave de conditions n'a pas besoin de JavaScript. */
.aff-terms { margin-top: 1.25rem; }
.aff-terms__summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #455fbf;
    font-size: 0.85rem;
    font-weight: 600;
    list-style: none;
}
/* Chevron maison : le triangle par defaut differe d'un navigateur a l'autre. */
.aff-terms__summary::-webkit-details-marker { display: none; }
.aff-terms__summary::before {
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 0.7em;
    transition: transform 0.15s ease;
}
.aff-terms[open] .aff-terms__summary::before { transform: rotate(90deg); }
.aff-terms__body {
    margin: 0.6rem 0 0;
    padding: 0.9rem 1.1rem;
    border-radius: 0.5rem;
    background: #f6f9ff;
    color: #64748b;
    font-size: 0.875rem;
}
.aff-terms__body p:last-child { margin-bottom: 0; }
/* Le renvoi aux CGUS se detache du paragraphe : c'est le document de reference. */
.aff-terms__cgus {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid #dce3ee;
}

/* Filtres pratiques du dashboard annonceur : un cran sous le 0.85em des badges, pour que
   « Publication express » tienne dans la pastille sans paraître plus gros que les autres.
   gap : le G Google est une img sans espace HTML, les autres pictos un <i> — le gap les aligne. */
/* ==========================================================================
   Filtres du catalogue (shop.php)
   ========================================================================== */

/* Pastille de filtre, en remplacement du couple « case a cocher + badge » qui doublait les
   elements a l'ecran. Grise au repos, elle prend la couleur passee en --pill-color une fois active. */
/* Rangee des pastilles. Gouttiere plus serree que le gap-2 de Bootstrap (8 px) : les dix
   pastilles doivent tenir sur une seule ligne, la largeur fixe des pictos (fa-fw) ayant deja
   consomme la marge disponible. */
.filters-pills { gap: 6px; }

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    /* Padding horizontal reduit pour la meme raison que la gouttiere ci-dessus. */
    padding: 0.34rem 0.62rem;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    background: #fff;
    color: #5b6472;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    /* La pastille est un label dans le catalogue et un lien vers /shop dans le tableau de bord :
       le soulignement que Bootstrap 5 pose sur tout lien n'a pas lieu d'etre ici. */
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.filter-pill:hover {
    border-color: var(--pill-color, #98a2b3);
    color: var(--pill-color, #344054);
}
/* Deux selecteurs pour un seul rendu : la pastille est une case a cocher au catalogue, et
   ailleurs un lien qui pose le filtre dans l'URL. */
.btn-check:checked + .filter-pill,
.filter-pill--active {
    background: var(--pill-color, #435ebe);
    border-color: var(--pill-color, #435ebe);
    color: #fff;
}
.filter-pill--active:hover { color: #fff; }
/* Les pictos portent leur couleur en style inline dans le gabarit (et le G de Google est
   une image) : sur pastille active, le fond prend cette meme couleur, il faut donc les
   forcer en blanc pour qu'ils ne disparaissent pas dedans. */
.btn-check:checked + .filter-pill i,
.filter-pill--active i { color: #fff !important; }
.btn-check:checked + .filter-pill img,
.filter-pill--active img { filter: brightness(0) invert(1); }
.btn-check:focus-visible + .filter-pill {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(67, 94, 190, .25);
}
/* Le logo Google est une image, les autres pictos des glyphes en fa-fw : meme largeur pour que
   les pastilles reservent le meme espace, les glyphes n'ayant pas la meme largeur naturelle. */
/* Boite du picto un cran sous le 1,25 em de fa-fw : la rangee doit tenir sur une ligne. Les deux
   glyphes les plus larges (robot, balance) depassent alors de 0,125 em, soit moins de 2 px repris
   sur la gouttiere — invisible, et la rangee reste reguliere. */
.filter-pill .fa-fw,
.filter-pill img {
    width: 1.125em;
}
.filter-pill img {
    height: 13px;
    object-fit: contain;
}
/* Volume ramene par la pastille : celle qui ne ramene rien se voit avant d'etre cliquee. */
.filter-pill__count {
    padding: 0 0.4em;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    font-size: 0.85em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.filter-pill--active .filter-pill__count {
    background: rgba(255, 255, 255, .25);
}
/* Champ de recherche de DataTables accueilli dans la barre de filtres : il arrive cale a droite
   et avec la marge d'un bloc autonome, qui n'ont plus lieu d'etre en bout de rangee. */
.dt_search_slot .dataTables_filter {
    text-align: left;
}
.dt_search_slot .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    color: #6b7280;
    font-size: 0.85rem;
}
/* Plancher de largeur pour un nom de domaine, et hauteur calee sur celle d'une pastille.
   Les !important sont necessaires : le theme habille ce champ d'utilitaires Bootstrap. */
.dt_search_slot .dataTables_filter input {
    min-width: 220px;
    margin-left: 0;
    padding-top: 0.34rem !important;
    padding-bottom: 0.34rem !important;
    min-height: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}
@media screen and (max-width: 575px) {
    /* La rangee etant deja repliee, le champ prend toute la largeur restante. */
    .dt_search_slot { width: 100%; }
    .dt_search_slot .dataTables_filter input { min-width: 0; flex: 1 1 auto; }
}

/* Filtre sans resultat : la pastille reste en place, eteinte — la retirer decalerait les autres. */
.filter-pill--empty {
    opacity: 0.45;
    cursor: default;
}
.filter-pill--empty:hover {
    border-color: #dfe3ea;
    color: inherit;
}

/* Chip d'un filtre actif : rien n'annoncait l'etat de la recherche, les filtres pointus vivant
   dans l'en-tete du tableau. La croix est un lien vers la meme URL moins ce parametre, sans JS. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.26rem 0.4rem 0.26rem 0.7rem;
    border: 1px solid #cfd6e4;
    border-radius: 999px;
    background: #f4f6fb;
    color: #3b4559;
    font-size: 0.76rem;
    line-height: 1.35;
    text-decoration: none;
}
.filter-chip:hover { background: #e9edf7; color: #3b4559; }
.filter-chip__label { font-weight: 600; }
.filter-chip__value { color: #5b6472; }
.filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d5dcec;
    color: #46516b;
    font-size: 9px;
}
.filter-chip:hover .filter-chip__remove { background: #b9c3da; }

/* Compteur du bouton « Filtres ». Pastille ronde plaquee sur le bouton : le nombre de
   filtres pointus actifs doit se voir alors meme que le panneau est ferme. */
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #435ebe;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

/* Panneau des filtres pointus. Largeur confortable pour deux colonnes de min/max, et
   select2 y est reparente (voir shop.js) sans quoi ses listes s'ouvriraient sous le
   panneau. */
.filters-panel { width: 420px; max-width: 92vw; }
/* La feuille Bootstrap ne rend pas .offcanvas.show visible : elle se contente d'annuler la
   translation, la visibilite etant posee par le plugin JavaScript — absent du bundle 5.0.0 de la
   boutique. Sans cette regle, le panneau glisse en place mais reste invisible. */
.filters-panel.show { visibility: visible; }
.filters-panel .form-label {
    margin-bottom: 0.2rem;
    color: #455fbf;
    font-size: 0.8rem;
    font-weight: 600;
}
.filters-panel__group + .filters-panel__group { margin-top: 1.1rem; }
.filters-panel .select2-container { width: 100% !important; }

/* Barre de filtres. Le bloc precedent poussait le premier resultat a ~300px du haut ;
   la barre, les pastilles et les chips tiennent dans le tiers. */
.filters-bar { border-bottom: 1px solid #eef0f6; }
.filters-bar__label {
    color: #455fbf;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* Le titre cede la place plutot que de passer a la ligne : a la largeur exacte du point de
   rupture lg, les deux textes de la ligne tiennent de justesse, et un retour a la ligne
   ramenerait le decalage de rangee qu'on corrige ici. */
.filters-bar__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le nowrap la garde d'un bloc : coupee en deux, elle ferait grandir la ligne. Poids normal et
   gris, pour qu'elle ne concurrence pas le libelle de la colonne. */
.filters-precise {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    color: #5b6472;
    font-weight: 400;
    white-space: nowrap;
}
.filters-precise .form-check-input { flex: 0 0 auto; }
.filters-precise label { cursor: pointer; }

/* Croix de vidage du champ « Nom du site ». Superposee au champ, et non placee a cote : en
   colonne voisine elle aurait pris de la largeur sur la barre. Le padding droit du champ lui
   reserve sa place, pour qu'un nom de domaine long ne passe pas dessous. */
.filters-search { position: relative; }
.filters-search__input { padding-right: 2rem; }
.filters-search__clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 0.1rem;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #98a2b3;
    font-size: 0.75rem;
    line-height: 1;
}
.filters-search__clear.is-visible { display: inline-flex; align-items: center; justify-content: center; }
.filters-search__clear:hover { background: #eef0f6; color: #5b6472; }