/* =====================================================
   HARMONISATION actu.eghazette.net avec eghazette.net
   Charte graphique Eghazette
   ===================================================== */

/* Import des polices Google Fonts - Dosis et Roboto Flex */
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700;800&family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&display=swap');

/* =====================================================
   VARIABLES COULEURS - Charte graphique Eghazette
   ===================================================== */
:root {
    --egh-primary-dark: #1a1f36;
    --egh-secondary-dark: #252b45;
    --egh-navbar-bg: #324896;
    --egh-navbar-btn-active: #4058a8;
    --egh-accent-green: #B3DE1D;
    --egh-accent-blue: #4c6faf;
    --egh-text-white: #ffffff;
    --egh-text-gray: #a0a8c0;
    --egh-border-color: #3a4260;

    /* Override Ghost accent color */
    --ghost-accent-color: #4c6faf;

    /* Override theme fonts */
    --font-sans: "Roboto Flex", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: "Dosis", sans-serif;
}

/* =====================================================
   APPLICATION GLOBALE DES POLICES
   ===================================================== */
body,
.gh-site {
    font-family: "Roboto Flex", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Grands titres - Dosis */
h1,
h2,
.gh-card-title,
.gh-article-title,
.gh-subscribe-title,
.gh-about-title,
.gh-pagehead-title {
    font-family: "Dosis", sans-serif;
    font-weight: 700;
}

/* Sous-titres et inter-titres - Roboto Flex */
h3,
h4,
h5,
h6 {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 600;
}

/* Texte courant - Roboto Flex */
p,
span,
li,
.gh-card-excerpt,
.gh-article-excerpt,
.gh-content p {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 400;
}

/* Boutons */
button,
.gh-btn,
.gh-head-btn {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 500;
}

/* Navigation */
.gh-head-menu,
.gh-head-actions {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 500;
}

/* =====================================================
   HEADER / NAVBAR - Style identique a eghazette.net
   Hauteur totale: 56px (identique au site principal)
   ===================================================== */
.gh-head {
    background-color: var(--egh-navbar-bg);
    padding: 0;
    height: 56px;
}

.gh-head-inner {
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    height: 56px;
    display: flex;
    align-items: center;
}

/* Logo texte Eghazette - Style identique au site principal */
.gh-head-logo {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    display: flex;
    align-items: center;
    line-height: 56px;
    overflow: hidden;
}

/* Cacher l'image du logo si elle existe */
.gh-head-logo img {
    display: none;
}

/* Style du logo texte Eghazette en vert - identique à eghazette.net */
.gh-head-logo::before {
    content: "Eghazette";
    color: var(--egh-accent-green) !important;
    font-family: "Roboto Flex", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    text-indent: 0;
    float: left;
    margin-left: 8px;
}

.gh-head-logo::after {
    content: none;
}

.gh-head-logo:hover {
    opacity: 0.9;
}

/* Liens de navigation - centrés */
.gh-head-menu {
    gap: 4px;
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Forcer l'affichage des liens de navigation (pas dans un dropdown) */
.gh-head-menu .nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.gh-head-menu .nav li {
    display: block;
}

/* Cacher le bouton "more" (trois points) */
.gh-head-menu .nav-more-toggle {
    display: none !important;
}

/* Forcer l'affichage des éléments du dropdown directement dans la nav */
.gh-head-menu .gh-dropdown {
    display: contents !important;
    position: static !important;
    background: none !important;
    box-shadow: none !important;
}

.gh-head-menu .gh-dropdown li {
    display: block !important;
}

.gh-head-menu a,
.gh-head-link {
    color: var(--egh-text-white) !important;
    padding: 6px 14px;
    border-radius: 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Icône panier pour le lien Annuaire */
.gh-head-menu a[href*="eghazette.net"]::before,
.gh-head-menu .nav-annuaire a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icône dollar pour le lien Promotions */
.gh-head-menu a[href*="promotions"]::before,
.gh-head-menu a[href*="promotion"]::before,
.gh-head-menu .nav-promotions a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M14.5 9a2.5 2.5 0 0 0-2.5-2h-1a2.5 2.5 0 0 0 0 5h2a2.5 2.5 0 0 1 0 5h-1a2.5 2.5 0 0 1-2.5-2'/%3E%3Cpath d='M12 3v3m0 12v3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.gh-head-menu a:hover,
.gh-head-link:hover {
    background-color: var(--egh-navbar-btn-active);
    color: var(--egh-text-white);
    opacity: 1;
}

/* Lien actif dans la navigation */
.gh-head-menu a[aria-current="page"],
.gh-head-menu .nav-current a {
    background-color: var(--egh-navbar-btn-active);
    color: var(--egh-text-white);
}

/* Bouton Sign in */
.gh-head-link {
    color: var(--egh-text-white);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 6px 16px;
    margin-right: 8px;
}

.gh-head-link:hover {
    border-color: var(--egh-text-white);
    background-color: transparent;
}

/* Bouton Subscribe - Style comme "Se connecter" sur eghazette.net */
.gh-head-btn.gh-btn.gh-primary-btn {
    background-color: transparent;
    color: var(--egh-text-white);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.gh-head-btn.gh-btn.gh-primary-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--egh-text-white);
    opacity: 1;
}

/* Icone dans le bouton subscribe */
.gh-head-btn.gh-btn.gh-primary-btn svg {
    display: none;
}

/* Icone de recherche */
.gh-search.gh-icon-btn {
    color: var(--egh-text-white);
    padding: 6px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    margin-left: 8px;
    margin-right: 4px;
}

.gh-search.gh-icon-btn:hover {
    background-color: var(--egh-navbar-btn-active);
}

.gh-search.gh-icon-btn svg {
    color: var(--egh-text-white);
    stroke: var(--egh-text-white);
}

.gh-search.gh-icon-btn:hover svg {
    color: var(--egh-text-white);
    stroke: var(--egh-text-white);
}

/* Zone des actions (droite de la navbar) */
.gh-head-actions {
    gap: 8px;
}

/* =====================================================
   BODY - Fond principal
   Force le mode clair. !important necessaire car les
   HTML cards (cartes Leaflet etc.) injectent du CSS
   global qui ecrase les styles du theme.
   ===================================================== */
body {
    background-color: #f5f5f5 !important;
    color: #1a1f36 !important;
}

.gh-main {
    background-color: #ffffff !important;
    color: #1a1f36 !important;
}

/* =====================================================
   CONTENU ARTICLE - Contraste et largeur
   ===================================================== */

/* Texte courant lisible */
.gh-content p,
.gh-content li,
.gh-content td,
.gh-content th,
.gh-content blockquote {
    color: #2a2a2a !important;
}

.gh-content .kg-card figcaption {
    color: #666 !important;
}

/* Largeur du contenu elargie */
.gh-canvas {
    --content-width: 920px;
    --container-width: 1200px;
}

/* Override global : forcer le mode clair sur tous les textes */
h1, h2, h3, h4, h5, h6 {
    color: #1a1f36 !important;
}

.gh-card-excerpt,
.gh-about-description,
.gh-navigation-title {
    color: #444 !important;
}

/* Les HTML cards (cartes, embeds) ne doivent pas affecter le body */
.gh-content .kg-card {
    isolation: isolate;
}

/* =====================================================
   ARTICLES ET CARTES
   ===================================================== */
.gh-card-title {
    font-family: "Dosis", sans-serif;
    font-weight: 700;
    color: var(--egh-primary-dark);
}

.gh-card-link:hover .gh-card-title {
    color: var(--egh-accent-blue);
}

.gh-card-date {
    color: var(--egh-accent-blue);
}

.gh-card-meta {
    font-family: "Roboto Flex", sans-serif;
}

/* =====================================================
   TITRES DE SECTION
   ===================================================== */
.gh-section-title {
    font-family: "Dosis", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--egh-primary-dark);
}

.gh-section-title::after {
    background-color: var(--egh-accent-blue);
}

/* =====================================================
   SIDEBAR - ABOUT SECTION
   ===================================================== */
.gh-about-title {
    font-family: "Dosis", sans-serif;
    font-weight: 700;
    color: var(--egh-primary-dark);
}

/* =====================================================
   ZONE SUBSCRIBE (bas de page)
   ===================================================== */
.gh-subscribe {
    background-color: var(--egh-accent-blue);
}

.gh-subscribe-title {
    font-family: "Dosis", sans-serif;
    font-weight: 700;
    color: var(--egh-text-white);
}

.gh-subscribe-description {
    font-family: "Roboto Flex", sans-serif;
    color: var(--egh-text-white);
}

.gh-subscribe-input {
    border-radius: 8px;
}

.gh-subscribe-input-btn {
    color: var(--egh-accent-blue);
    font-family: "Roboto Flex", sans-serif;
    font-weight: 600;
}

.gh-subscribe-btn {
    background-color: var(--egh-text-white);
    color: var(--egh-accent-blue);
    border-radius: 20px;
}

/* =====================================================
   FOOTER
   ===================================================== */
.gh-foot {
    background-color: var(--egh-primary-dark);
    color: var(--egh-text-gray);
}

.gh-foot a {
    color: var(--egh-text-gray);
}

.gh-foot a:hover {
    color: var(--egh-accent-green);
}

.gh-copyright {
    color: var(--egh-text-gray);
}

.gh-powered-by a {
    color: var(--egh-text-gray);
}

.gh-foot-menu a {
    color: var(--egh-text-gray);
}

.gh-foot-menu a:hover {
    color: var(--egh-accent-green);
}

/* =====================================================
   ARTICLES INDIVIDUELS
   ===================================================== */
.gh-article-title {
    font-family: "Dosis", sans-serif;
    font-weight: 700;
    color: var(--egh-primary-dark);
}

.gh-article-excerpt {
    font-family: "Roboto Flex", sans-serif;
    color: var(--egh-primary-dark);
}

.gh-article-meta {
    font-family: "Roboto Flex", sans-serif;
    color: #666;
}

.gh-article-meta a {
    color: var(--egh-accent-blue);
}

/* Contenu de l'article */
.gh-content {
    font-family: "Roboto Flex", sans-serif;
    color: #2a2a2a;
}

.gh-content h2 {
    font-family: "Dosis", sans-serif;
    font-weight: 700;
    color: var(--egh-primary-dark);
}

.gh-content h3,
.gh-content h4 {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 600;
    color: var(--egh-primary-dark);
}

/* =====================================================
   TOPICS / TAGS
   ===================================================== */
.gh-topic-name {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 600;
    color: var(--egh-primary-dark);
}

.gh-topic-count {
    border-color: var(--egh-accent-blue);
    color: var(--egh-accent-blue);
}

/* =====================================================
   BOUTONS GENERAUX
   ===================================================== */
.gh-loadmore {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 600;
    border-color: var(--egh-accent-blue);
    color: var(--egh-accent-blue);
}

.gh-loadmore:hover {
    background-color: var(--egh-accent-blue);
    color: var(--egh-text-white);
}

/* =====================================================
   FORMULAIRES D'INSCRIPTION SIDEBAR
   ===================================================== */
.gh-signup .gh-subscribe-input {
    border-color: var(--egh-accent-blue);
}

.gh-signup-btn {
    background-color: var(--egh-accent-blue);
    color: var(--egh-text-white);
    border-radius: 20px;
}

.gh-signup-btn:hover {
    background-color: #5a7fc0;
}

/* =====================================================
   TAG LABEL (pages tag)
   ===================================================== */
.gh-tag-label {
    color: var(--egh-accent-blue);
    font-family: "Roboto Flex", sans-serif;
}

/* =====================================================
   NAVIGATION ARTICLES (precedent/suivant)
   ===================================================== */
.gh-navigation-label {
    font-family: "Roboto Flex", sans-serif;
    color: var(--egh-accent-blue);
}

.gh-navigation-title {
    font-family: "Roboto Flex", sans-serif;
}

/* =====================================================
   FEATURED CARDS (sidebar)
   ===================================================== */
.gh-featured .gh-card-title {
    font-family: "Dosis", sans-serif;
    font-weight: 600;
}

.gh-featured .gh-card-excerpt {
    font-family: "Roboto Flex", sans-serif;
}

/* =====================================================
   LIENS
   ===================================================== */
a {
    color: var(--egh-accent-blue);
}

a:hover {
    color: var(--egh-accent-green);
}

/* =====================================================
   MOBILE MENU (burger)
   ===================================================== */
.gh-burger {
    background-color: transparent;
}

/* Cacher le burger si le menu de navigation est vide */
.gh-head-menu:not(:has(.nav li)) ~ .gh-head-actions,
.gh-head:has(.gh-head-menu:not(:has(.nav li))) .gh-burger {
    display: none !important;
}

.gh-burger::before,
.gh-burger::after {
    background-color: var(--egh-text-white);
}

/* Menu mobile ouvert */
.gh-head-open .gh-head-inner {
    background-color: var(--egh-navbar-bg);
}

.gh-head-open .gh-head-menu {
    background-color: var(--egh-navbar-bg);
}

.gh-head-open .gh-head-menu a {
    color: var(--egh-text-white);
    border-radius: 8px;
    margin: 4px 0;
}

.gh-head-open .gh-head-menu a:hover {
    background-color: var(--egh-navbar-btn-active);
}

.gh-head-open .gh-head-actions {
    background-color: var(--egh-navbar-bg);
    padding-bottom: 20px;
}