/* ==========================================================================
   Largess Mag — surcharges de marque appliquées au template Altroz News.
   Chargé après style.css/responsive.css. Ne modifie pas la structure du
   template, uniquement l'identité visuelle (couleurs, typographie).
   ========================================================================== */

:root {
    --lm-blue: #0B3C7C;
    --lm-blue-dark: #082c5c;
    --lm-blue-light: #1E63B8;
    --lm-yellow: #FFC300;
    --lm-yellow-dark: #e6b000;
}

body, p,
h1, h2, h3, h4, h5, h6,
.utf_post_title, .utf_block_title, .utf_post_cat, .btn {
    font-family: 'Sora', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Interlignage des titres : le thème d'origine varie sans cohérence
   selon la taille (ratio allant de 1.23 à 1.5 suivant les composants),
   ce qui crée un rythme visuel irrégulier entre titre et texte courant.
   Un ratio unique, plus serré, uniformise l'ensemble des titres du site. */
h1, h2, h3, h4, h5, h6, .utf_post_title,
.utf_post_title.title-extra-large,
.utf_post_title.title-large,
.utf_post_title.title-medium,
.utf_post_title.title-small {
    line-height: 1.25;
}

/* Badges de catégorie : or sur fond bleu, signature visuelle Largess Mag */
a.utf_post_cat,
.utf_post_cat a,
.utf_post_block_style .utf_post_cat,
.utf_post_block_style.post-float .utf_post_cat,
.thumb-float-style .utf_post_cat {
    background-color: var(--lm-yellow) !important;
    color: var(--lm-blue-dark) !important;
    border-color: var(--lm-yellow) !important;
}

/* Étoiles de notation (avis) en or */
.review-stars i {
    color: var(--lm-yellow-dark) !important;
}

/* Barre d'actions admin (topbar) : lien "Espace administration" + bouton "Déconnexion" */
.top-nav li.lm-topbar-action-item {
    margin-left: 8px;
}
.top-nav li.lm-topbar-action-item:first-child {
    margin-left: 2px;
}

.lm-topbar-admin-link,
.lm-topbar-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 100%;
    padding: 6px 14px;
    border-radius: 20px;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lm-topbar-admin-link {
    background: linear-gradient(135deg, var(--lm-yellow) 0%, var(--lm-yellow-dark) 100%);
    color: var(--lm-blue-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.lm-topbar-admin-link:hover {
    color: var(--lm-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.lm-topbar-admin-link i {
    font-size: 12px;
}

.lm-topbar-logout-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.lm-topbar-logout-btn:hover {
    background: rgba(220, 53, 69, 0.12);
    border-color: #dc3545;
    color: #ff8a93;
}
.lm-topbar-logout-btn i {
    font-size: 12px;
}

/* ==========================================================================
   Modale de connexion administrateur
   ========================================================================== */
.lm-login-modal .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(8, 27, 56, 0.35);
}

.lm-login-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
    width: 32px;
    height: 32px;
    line-height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    opacity: 1;
    text-shadow: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.lm-login-close:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    transform: rotate(90deg);
}

.lm-login-header {
    background: linear-gradient(135deg, var(--lm-blue) 0%, var(--lm-blue-dark) 100%);
    padding: 38px 32px 28px;
    text-align: center;
    position: relative;
}
.lm-login-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--lm-yellow);
}
.lm-login-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lm-yellow);
    color: var(--lm-blue-dark);
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
.lm-login-header .modal-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 6px;
}
.lm-login-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    margin-bottom: 0;
}

.lm-login-body {
    padding: 28px 32px 8px;
}
.lm-login-body label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lm-login-input-group .input-group-text {
    background: #f4f6f9;
    border: 1px solid #e2e6ec;
    border-right: 0;
    color: var(--lm-blue);
}
.lm-login-input-group .form-control {
    border: 1px solid #e2e6ec;
    border-left: 0;
    padding: 10px 14px;
    height: auto;
    box-shadow: none;
}
.lm-login-input-group:focus-within .input-group-text,
.lm-login-input-group:focus-within .form-control {
    border-color: var(--lm-blue-light);
}
.lm-login-input-group .form-control:focus {
    box-shadow: none;
}
.lm-login-input-group .form-control#loginPassword {
    border-right: 0;
}
.lm-toggle-password {
    background: #f4f6f9;
    border: 1px solid #e2e6ec;
    border-left: 0;
    color: #888;
    cursor: pointer;
    transition: color 0.15s ease;
}
.lm-toggle-password:hover,
.lm-toggle-password:focus {
    color: var(--lm-blue);
    outline: none;
}
.lm-login-input-group:focus-within .lm-toggle-password {
    border-color: var(--lm-blue-light);
}

.lm-login-remember {
    margin-top: 4px;
}
.lm-login-remember .form-check-label {
    font-size: 13px;
    color: #666;
}

.lm-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fdecec;
    border-left: 3px solid #e14b4b;
    color: #b32020;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 20px;
}
.lm-login-alert i {
    margin-top: 2px;
}

.lm-login-footer {
    border-top: 0;
    padding: 12px 32px 28px;
}
.lm-btn-cancel {
    background: transparent;
    color: #888;
    font-weight: 600;
    padding: 10px 18px;
}
.lm-btn-cancel:hover {
    color: #333;
}
.lm-btn-submit {
    background: linear-gradient(135deg, var(--lm-blue-light) 0%, var(--lm-blue) 100%);
    color: #ffffff;
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(11, 60, 124, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lm-btn-submit:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11, 60, 124, 0.4);
}
.lm-btn-submit i {
    margin-left: 4px;
    font-size: 12px;
}

/* Alertes SweetAlert2 (authentification) */
.lm-swal-popup {
    border-radius: 14px !important;
    font-family: 'Sora', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.lm-swal-popup .swal2-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}
.lm-swal-popup .swal2-html-container {
    font-size: 14px;
    color: #555;
}
.lm-swal-popup .swal2-confirm {
    border-radius: 6px !important;
    padding: 10px 26px !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 18px rgba(11, 60, 124, 0.3) !important;
}

/* Toasts LMNotify (succès/erreur/avertissement/info) */
.lm-swal-toast {
    border-radius: 10px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
    font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    border-left: 4px solid transparent;
}
.lm-swal-toast .swal2-title {
    font-size: 14px;
    font-weight: 600;
}
.lm-swal-toast-success { border-left-color: #198754; }
.lm-swal-toast-error { border-left-color: #dc3545; }
.lm-swal-toast-warning { border-left-color: #fd7e14; }
.lm-swal-toast-info { border-left-color: #0d6efd; }

/* ==========================================================================
   Emplacements publicitaires (Google AdSense & régies futures)
   ========================================================================== */

/* Réserve un espace minimal pendant le chargement différé (évite un saut
   de mise en page — Cumulative Layout Shift). */
.lm-ad-lazy {
    display: block;
    min-height: 90px;
    text-align: center;
    overflow: hidden;
}
.lm-ad-lazy .adsbygoogle {
    min-height: 90px;
}

/* Ancre publicitaire flottante (mobile/tablette uniquement) */
.lm-ad-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    text-align: center;
    padding: 4px;
}
@media (min-width: 992px) {
    .lm-ad-sticky { display: none; }
}

/* Avatar par initiales : aucune photo n'est jamais demandée aux
   commentateurs, donc pas de photo générique affichée non plus. */
.lm-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
}
.comments-list .comment-avatar {
    width: 84px;
    height: 84px;
    margin-right: 30px;
    font-size: 26px;
}
@media (max-width: 767.98px) {
    .comments-list .comment-avatar {
        width: 60px;
        height: 60px;
        margin-right: 15px;
        font-size: 20px;
    }
}
@media (max-width: 479px) {
    /* theme/css/responsive.css ne masque que <img class="comment-avatar">
       sur très petit écran ; on reproduit la même règle pour le span
       d'initiales qui l'a remplacé. */
    .comments-list .comment-avatar {
        display: none;
    }
}

/* Dégradé de secours pour les articles sans image de couverture : évite un
   <img> cassé sans imposer une photo générique hors-sujet. */
.lm-cover-fallback {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0B3C7C 0%, #082a58 100%);
}
.lm-cover-fallback i {
    color: rgba(255, 195, 0, 0.85);
    font-size: 28px;
}

/* Flèches du carrousel "Catégories en vedette" : au-dessus des cartes (pas
   de titre de section ici), et nettement plus grandes que le style par
   défaut du thème (26px), trop discret. */
.utf_highlight_slide {
    padding-top: 55px;
    position: relative;
}
.owl-carousel.owl-theme.utf_highlight_slide .owl-nav {
    position: absolute;
    top: 0;
    right: 0;
}
.owl-carousel.owl-theme.utf_highlight_slide .owl-nav > div {
    width: 42px;
    height: 42px;
    line-height: 40px;
    font-size: 22px;
    border: 2px solid #0B3C7C;
    color: #0B3C7C;
}
.owl-carousel.owl-theme.utf_highlight_slide .owl-nav > div:hover {
    background: #0B3C7C;
    border-color: #0B3C7C;
    color: #fff;
}
@media (max-width: 767.98px) {
    .owl-carousel.owl-theme.utf_highlight_slide .owl-nav {
        position: static;
        text-align: center;
        margin-top: 16px;
    }
}

/* Espace excessif entre la section précédente et "Catégories en vedette" :
   la colonne de contenu (tabs + blocs) et la colonne sidebar n'ont pas la
   même hauteur ; on resserre l'espacement du bloc suivant plutôt que de
   dépendre d'un alignement de hauteur entre les deux colonnes. */
.utf_block_wrapper_2 {
    margin-top: -25px;
}
@media (max-width: 991.98px) {
    .utf_block_wrapper_2 {
        margin-top: 0;
    }
}

/* Notation par étoiles en fin d'article. */
.lm-rating-area {
    position: relative;
    background: linear-gradient(180deg, #fbfbfd 0%, #f4f5f8 100%);
    border: 1px solid #ebebee;
    border-top: 3px solid #0B3C7C;
    border-radius: 10px;
    padding: 34px 25px 28px;
    margin: 30px 0;
    text-align: center;
    box-shadow: 0 6px 20px rgba(11, 60, 124, 0.06);
}
.lm-rating-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0B3C7C;
    color: #FFC300;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(11, 60, 124, 0.3);
}
.lm-rating-prompt {
    margin: 8px 0 16px;
    font-weight: 700;
    font-size: 16px;
    color: #1c1c1c;
}
.lm-rating-stars {
    font-size: 34px;
    letter-spacing: 8px;
    cursor: pointer;
    line-height: 1;
}
.lm-rating-stars i {
    color: #dcdcdc;
    transition: color 150ms ease, transform 150ms ease;
    display: inline-block;
}
.lm-rating-stars:not(.is-locked) i:hover {
    transform: scale(1.15);
}
.lm-rating-stars i.fa-star,
.lm-rating-stars i.fa-star-half-o {
    color: #FFC300;
}
.lm-rating-stars.is-locked {
    cursor: default;
}
.lm-rating-summary {
    margin: 14px 0 0;
    color: #666;
    font-size: 14px;
}
.lm-rating-summary strong {
    color: #0B3C7C;
    font-size: 16px;
}
.lm-rating-sep {
    color: #ccc;
}
.lm-rating-thanks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    font-size: 13px;
    font-weight: 600;
}

/* Carte "Avis récents" en flex plutôt qu'en float : avec un titre long qui
   s'étale sur 3-4 lignes dans la sidebar étroite, la vignette flottante
   (float:left, ~80px de haut) était plus courte que le titre, et les
   étoiles qui suivaient débordaient sur la vignette de l'article suivant. */
.lm-review-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.lm-review-thumb {
    flex: 0 0 70px;
    width: 70px;
}
.lm-review-thumb img,
.lm-review-thumb .lm-cover-fallback {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    min-height: 0;
}
.lm-review-thumb .lm-cover-fallback i {
    font-size: 18px;
}
.lm-review-content {
    flex: 1;
    min-width: 0;
}
.lm-review-content .utf_post_title {
    margin-top: 0;
    margin-bottom: 8px;
}
.review-post-list .review-stars {
    margin-top: 0;
}

/* Même bug que la carte "Avis récents" (cf. .lm-review-item), mais dans le
   composant <x-cards.block float-style /> partagé par plusieurs listes du
   site (accueil, sidebar "Articles populaires"...) : la vignette flottante
   est plus courte que les titres longs sur 2-3 lignes, et le reste du
   contenu (auteur, date) déborde sur l'élément de liste suivant. On
   remplace le float par du flex, qui ne peut pas déborder de la sorte. */
.utf_post_block_style.post-float {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.utf_post_block_style.post-float .utf_post_thumb {
    float: none;
    flex: 0 0 70px;
    width: 70px;
    margin-right: 0;
}
.utf_post_block_style.post-float .utf_post_thumb img {
    width: 70px;
    height: 70px;
    max-width: 70px;
    min-height: 0;
    object-fit: cover;
}
.utf_post_block_style.post-float .utf_post_thumb .lm-cover-fallback {
    width: 70px;
    height: 70px;
    min-height: 0;
}
.utf_post_block_style.post-float .utf_post_thumb .lm-cover-fallback i {
    font-size: 16px;
}
.utf_post_block_style.post-float .utf_post_content {
    flex: 1;
    min-width: 0;
}
/* Auteur + date sur la même ligne : la colonne est trop étroite pour la
   taille de police par défaut (13px), ce qui faisait passer la date à la
   ligne suivante. */
.utf_post_block_style.post-float .utf_post_meta {
    white-space: nowrap;
    overflow: hidden;
}
.utf_post_block_style.post-float .utf_post_meta span {
    font-size: 12px;
    margin-right: 6px;
    padding-right: 6px;
}

/* La section "catégorie la plus vue" était trop collée à la section
   suivante : elle n'avait aucune marge basse propre. */
.utf_featured_tab {
    margin-bottom: 30px;
}

/* ==========================================================================
   Sidebar : chaque widget devient une carte visuellement délimitée, plutôt
   que du texte flottant séparé par une simple marge. */
.lm-widget-card {
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(11, 60, 124, 0.05);
}
.sidebar .lm-widget-card {
    margin-bottom: 28px;
}
.lm-widget-card .utf_block_title {
    margin-bottom: 20px;
}
.lm-widget-card--flush {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
.lm-widget-card--last {
    margin-bottom: 0 !important;
}

/* Étiquette discrète au-dessus des emplacements publicitaires : transparence
   vis-à-vis du lecteur, sans alourdir visuellement le bloc. */
.lm-widget-ad-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a3a3a3;
    margin-bottom: 12px;
}

/* Réseaux sociaux : boutons ronds aux couleurs de la marque plutôt que de
   simples icônes nues, plus engageants et cohérents avec le reste du site. */
.lm-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lm-social-icons li {
    margin: 0;
}
.lm-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f4f5f8;
    color: #0B3C7C;
    font-size: 17px;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.lm-social-icons a:hover {
    background: #0B3C7C;
    color: #fff;
    transform: translateY(-3px);
}

/* Écran de chargement : le préchargeur d'origine (texte "LARGESS" lettre
   par lettre + rideaux qui se rétractent) était en display:none dans le
   thème et ne s'affichait donc jamais réellement. Remplacé par une
   animation simple centrée sur le logo, pendant le chargement de la page
   (le JS existant bascule .loaded puis retire #preloader du DOM). */
.ctn-preloader.lm-preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity 0.25s ease;
}
.lm-preloader-logo {
    width: 140px;
    max-width: 55vw;
    animation: lm-preloader-pulse 0.9s ease-in-out infinite;
}
.ctn-preloader.lm-preloader.loaded {
    opacity: 0;
    pointer-events: none;
}
@keyframes lm-preloader-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.92); opacity: 0.65; }
}

/* Voile d'assombrissement au survol des vignettes d'article (effet
   purement visuel) : sans pointer-events:none, cette couche absolue passe
   au-dessus du lien <a> et intercepte le clic — l'image affichait un lien
   dans le code mais n'était concrètement jamais cliquable. */
.utf_post_block_style:hover .utf_post_thumb:before {
    pointer-events: none;
}

/* Slider vedette (accueil) : passé du texte superposé sur l'image (dégradé
   sombre + titre en blanc, illisible sur les visuels de test qui ont déjà
   leur propre texte incrusté) à une carte classique image/contenu séparés
   — cf. .lm-recommendations plus bas, même logique. Neutralise le fond et
   le dégradé that le thème appliquait à l'ancienne structure overlay. */
#utf_featured_slider .item {
    min-height: 0;
    background-image: none;
}
#utf_featured_slider .item:before {
    content: none;
}

/* Bloc "À lire aussi" en fin d'article : grille de recommandations
   (remplace la navigation article précédent/suivant, jugée trop
   rudimentaire pour un média financier) — image seule (pas de texte en
   surimpression, pour éviter le doublon avec le titre incrusté dans les
   visuels de test), cadrage identique pour un rendu homogène, légère
   élévation au survol de la carte. */
.lm-recommendations .utf_post_block_style {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lm-recommendations .utf_post_block_style:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(11, 60, 124, 0.16);
}
.lm-recommendations .utf_post_thumb img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
/* Titre et extrait de longueur variable selon l'article : sans hauteur
   réservée, chaque carte respire différemment (texte parfois collé au
   bord bas, parfois beaucoup d'espace) selon la longueur du titre. On
   fixe un nombre de lignes identique partout pour un cadre uniforme. */
.lm-recommendations .utf_post_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
}
.lm-recommendations .utf_post_content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 4.8em;
    margin-bottom: 0;
}