/* ==========================================================================
   LOOK DES ÉVÉNEMENTS À LA UNE (ORDINATEUR + MOBILE)
   ========================================================================== */

/* --- 1. ÉVÉNEMENT DU 21 JUIN : GUINGUETTE ÉLECTRO (COLO DU CAGIRE) --- */

/* Bloc conteneur global de la liste */
#featured-events ul li:has(a[href*="47753"]) {
    background-color: #fffaf6 !important; 
    border: 2px dashed #ff7563 !important; /* Pointillés corail */
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(255, 117, 99, 0.1) !important;
    padding: 0 !important;
    margin-bottom: .4em !important;
}

/* Nettoyage du lien interne */
#featured-events ul li h2 a[href*="47753"] {
    background: transparent !important;
    border: none !important;
    display: block !important;
    padding: 15px 20px !important;
}

/* Désactivation des éléments graphiques d'origine de Démosphère */
#featured-events ul li h2 a[href*="47753"] .ft,
#featured-events ul li h2 a[href*="47753"] .fr,
#featured-events ul li h2 a[href*="47753"] .fb,
#featured-events ul li h2 a[href*="47753"] .fl,
#featured-events ul li h2 a[href*="47753"] .fcorner,
#featured-events ul li h2 a[href*="47753"] .ffeatured {
    display: none !important;
}

/* Styles typographiques */
#featured-events ul li h2 a[href*="47753"] .fdate { 
    color: #ff7563 !important; 
    font-weight: 600 !important; 
    text-transform: uppercase !important; 
}
#featured-events ul li h2 a[href*="47753"] .ftitle { 
    color: #4a4a4a !important; 
    font-family: sans-serif !important; 
    font-weight: 300 !important; 
}
#featured-events ul li h2 a[href*="47753"] strong { 
    color: #ff7563 !important; 
    font-weight: bold !important; 
    border-bottom: 2px solid #ff7563 !important; 
    text-transform: uppercase !important; 
}

/* Effets tactiles et survol */
#featured-events ul li:has(a[href*="47753"]):hover,
#featured-events ul li:has(a[href*="47753"]):active {
    background-color: #ff7563 !important;
    border-style: solid !important;
}
#featured-events ul li:has(a[href*="47753"]):hover .fdate, #featured-events ul li:has(a[href*="47753"]):hover .ftitle,
#featured-events ul li:has(a[href*="47753"]):active .fdate, #featured-events ul li:has(a[href*="47753"]):active .ftitle {
    color: #ffffff !important;
}
#featured-events ul li:has(a[href*="47753"]):hover strong, #featured-events ul li:has(a[href*="47753"]):active strong {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}


/* --- 2. ÉVÉNEMENT DU 27 JUIN : LA DERNIÈRE TOURNÉE (L'USINEUSE) --- */

/* Bloc conteneur global de la liste */
#featured-events ul li:has(a[href*="48423"]) {
    background-color: #6bb6eb !important; /* Fond bleu ciel */
    border: 2px solid #000000 !important; /* Contour noir Pop */
    border-radius: 8px !important;
    box-shadow: 4px 4px 0px #000000 !important; /* Ombre nette */
    padding: 0 !important;
    margin-bottom: .4em !important;
}

/* Nettoyage du lien interne */
#featured-events ul li h2 a[href*="48423"] {
    background: transparent !important;
    border: none !important;
    display: block !important;
    padding: 12px 20px !important;
}

/* Désactivation des éléments graphiques d'origine de Démosphère */
#featured-events ul li h2 a[href*="48423"] .ft,
#featured-events ul li h2 a[href*="48423"] .fr,
#featured-events ul li h2 a[href*="48423"] .fb,
#featured-events ul li h2 a[href*="48423"] .fl,
#featured-events ul li h2 a[href*="48423"] .fcorner,
#featured-events ul li h2 a[href*="48423"] .ffeatured {
    display: none !important;
}

/* Styles typographiques */
#featured-events ul li h2 a[href*="48423"] .fdate { 
    color: #000000 !important; 
    font-weight: bold !important; 
}
#featured-events ul li h2 a[href*="48423"] .ftitle { 
    color: #ffffff !important; 
    text-shadow: 1px 1px 0px #000000 !important; 
    font-family: 'Impact', sans-serif !important; 
}
#featured-events ul li h2 a[href*="48423"] strong { 
    color: #ff60b5 !important; 
    background-color: #000000 !important; 
    padding: 2px 6px !important; 
    text-transform: uppercase !important; 
}

/* Effets tactiles et survol */
#featured-events ul li:has(a[href*="48423"]):hover,
#featured-events ul li:has(a[href*="48423"]):active {
    background-color: #ffe63b !important; /* Bascule sur le jaune */
    box-shadow: 6px 6px 0px #000000 !important;
}
#featured-events ul li:has(a[href*="48423"]):hover .ftitle, #featured-events ul li:has(a[href*="48423"]):active .ftitle {
    color: #000000 !important;
    text-shadow: none !important;
}

/* ==========================================================================
   ÉVÉNEMENT DU 27 MAI : LIBAN / PALESTINE (ID: 48440)
   ========================================================================== */

/* 1. Bloc conteneur de la liste */
#featured-events ul li:has(a[href*="48440"]) {
    background-color: #ffffff !important;
    /* Bordure gauche multicolore (Noir, Blanc/Gris, Rouge, Vert) style drapeau */
    border: 1px solid #e0e0e0 !important;
    border-left: 8px solid !important;
    border-image: linear-gradient(to bottom, #111111 25%, #cccccc 25%, #cccccc 50%, #e60000 50%, #e60000 75%, #007a3d 75%) 1 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    margin-bottom: .5em !important;
}

/* 2. Nettoyage et espacement du lien interne */
#featured-events ul li h2 a[href*="48440"] {
    background: transparent !important;
    border: none !important;
    display: block !important;
    padding: 15px 20px !important;
}

/* 3. Masquage des éléments et coins natifs de Démosphère */
#featured-events ul li h2 a[href*="48440"] .ft,
#featured-events ul li h2 a[href*="48440"] .fr,
#featured-events ul li h2 a[href*="48440"] .fb,
#featured-events ul li h2 a[href*="48440"] .fl,
#featured-events ul li h2 a[href*="48440"] .fcorner,
#featured-events ul li h2 a[href*="48440"] .ffeatured {
    display: none !important;
}

/* 4. Style de la date (Rouge) */
#featured-events ul li h2 a[href*="48440"] .fdate {
    color: #e60000 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 0.95em !important;
}

/* 5. Style du titre général */
#featured-events ul li h2 a[href*="48440"] .ftitle {
    color: #222222 !important;
    font-family: sans-serif !important;
}

/* 6. Style des mots-clés importants (Vert) */
#featured-events ul li h2 a[href*="48440"] strong {
    color: #007a3d !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #007a3d !important;
    padding-bottom: 1px !important;
}

/* 7. Comportement au survol (Léger effet de surbrillance) */
#featured-events ul li:has(a[href*="48440"]):hover {
    background-color: #f9f9f9 !important;
}

/* ==========================================================================
   REFONTE COMPLÈTE DU BLOC ANNONCE (PC + MOBILE)
   ========================================================================= */

/* 1. Le conteneur global de l'annonce */
#announcement {
    background-color: #fcfaf7 !important; /* Fond crème doux pour quitter le gris triste */
    color: #222222 !important;
    border: 2px solid #111111 !important; /* Bordure noire fine et nette style fanzine */
    border-radius: 12px !important;
    padding: 18px 15px !important;
    box-shadow: 4px 4px 0px #111111 !important; /* Ombre solide pour rappeler l'événement du 27 juin */
    isolation: isolate;
    position: relative;
    margin: .5em 0 1.2em 0 !important;
}

/* Titre principal à l'intérieur */
#announcement h2 {
    font-family: sans-serif !important;
    font-size: 1.2em !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
    margin-bottom: 6px !important;
}

/* Texte secondaire descriptif */
#announcement p {
    font-size: 0.95em !important;
    color: #555555 !important;
    margin-bottom: 12px !important;
}

/* Le séparateur pointillé interne */
#announcement .subsection {
    border: 0 !important;
    height: 2px !important;
    margin: 12px 0 !important;
    background: repeating-linear-gradient(90deg, #111111 0 6px, transparent 6px 12px) !important;
    opacity: 0.25 !important;
}

/* 2. Les boutons "Stickers" (Comminges / Hautes-Pyrénées) */
#announcement p a,
#announcement a {
    text-decoration: none !important;
    display: inline-block !important;
    margin: .4rem .3rem !important;
    padding: .6rem 1.2rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    font-size: 0.9em !important;
    
    /* Couleurs contrastées */
    color: #ffffff !important;
    background-color: #111111 !important; /* Boutons noirs profonds pour un gros contraste */
    border: 2px solid #111111 !important;
    border-radius: 6px 10px 6px 10px !important; /* Coupe asymétrique légère */
    
    transform: skew(-3deg) !important;
    box-shadow: 3px 3px 0px #ff7563 !important; /* Ombre couleur corail guinguette pour lier les blocs */
    transition: all .15s ease-in-out !important;
}

/* Sécurité pour le texte fort à l'intérieur sur mobile */
#announcement a strong {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* 3. Comportement au survol et au clic tactile mobile */
#announcement p a:hover, #announcement a:hover,
#announcement p a:active, #announcement a:active {
    background-color: #ff7563 !important; /* Le bouton passe au corail lumineux */
    border-color: #111111 !important;
    color: #ffffff !important;
    transform: scale(1.03) skew(-3deg) !important;
    box-shadow: 1px 1px 0px #111111 !important;
}

/* Ajustement spécifique pour les petits écrans mobiles */
@media (max-width: 560px) {
    #announcement p a, #announcement a { 
        display: block !important;
        width: 100% !important; 
        box-sizing: border-box !important;
        text-align: center !important;
        margin: .5rem 0 !important;
    }
}
/* ==========================================================================
   OPTIMISATION DU BLOC ANNONCE EXCLUSIVEMENT POUR MOBILE (CORRIGÉ)
   ========================================================================== */

@media (max-width: 560px) {
    /* 1. On resserre l'espace global de la boîte */
    #announcement {
        padding: 12px 10px !important;
        margin: .4em 0 .8em 0 !important;
        text-align: center !important;
    }

    /* 2. On rend le titre plus discret et compact */
    #announcement h2 {
        font-size: 1.05em !important;
        margin-bottom: 2px !important;
    }

    /* 3. On réduit le texte descriptif secondaire */
    #announcement p {
        font-size: 0.85em !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    /* 4. Force l'alignement horizontal des boutons */
    #announcement p:last-of-type {
        display: flex !important;
         Revolution des boutons : on les passe sur une seule ligne (cote a cote) 
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* Masque le texte brut '|||' qui casse la ligne sur mobile */
        color: transparent !important; 
        font-size: 0px !important; 
    }

    /* 5. Ajustement des boutons individuels pour le côte-à-côte */
    #announcement p a, 
    #announcement a {
        display: inline-block !important;
        flex: 1 !important; /* Donne la même largeur aux deux boutons */
        max-width: 46% !important;
        margin: 0 2% !important; /* Espacement horizontal fixe */
        padding: .5rem .2rem !important; /* Plus compact en hauteur */
        font-size: 0.72em !important; /* Évite les retours à la ligne du texte interne */
        letter-spacing: -0.3px !important;
        box-sizing: border-box !important;
        transform: skew(-2deg) !important;
    }

    /* On s'assure que le texte interne des boutons reste bien visible (non transparent) */
    #announcement a strong {
        color: #ffffff !important;
        font-size: 11px !important; /* Force la taille du texte du bouton */
    }
}

/* ==========================================================================
   POLICE ALTERNATIVE PINCEAU/MANUSCRIT (SANS IMPORT DE FICHIER)
   ========================================================================== */

body.mobile h2#siteName a {
    /* 1. Couleur rouge vif du logo */
    color: #cc0000 !important; 
    
    /* 2. Liste de secours : polices manuscrites/irrégulières natives sur iOS/Android */
    font-family: 'Chiller', 'Marker Felt', 'Comic Sans MS', 'Barkon', Chalkboard, sans-serif !important;
    
    /* 3. Ajustement de la taille pour donner de l'impact au lettrage */
    font-size: 1.45em !important; 
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    
    padding-top: 2px !important;
    padding-left: 4px !important;
    display: inline-block !important;
    
    /* 4. Ombrage léger pour casser le côté trop "lisse" des polices standards */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   PAGE DESIGN PRIVILÉGIÉ : GUINGUETTE ÉLECTRO (ID: 47753 UNIQUEMENT)
   ========================================================================== */

/* On utilise le sélecteur :has pour vérifier que la page contient bien le lien de l'événement 47753 */
body:has(a[href*="47753"]) div#eventMain.has-fp-title {
    background-color: #fffbf9 !important; 
    border: 1px solid #ffe6e2 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(255, 117, 99, 0.05) !important;
}

/* 2. Bloc Date principal */
body:has(a[href*="47753"]) #dateWrap h2#date {
    background: linear-gradient(135deg, #ff7563, #ff9485) !important; 
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 15px !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(255, 117, 99, 0.2) !important;
}
body:has(a[href*="47753"]) #dateWrap h2#date span {
    color: #ffffff !important;
}

/* 3. Intégration du bloc Lieu & Carte */
body:has(a[href*="47753"]) .place.hasMapImage {
    background-color: #ffffff !important;
    border: 1px dashed #ff9485 !important; 
    border-radius: 8px !important;
    padding: 12px !important;
}
body:has(a[href*="47753"]) .place.hasMapImage h3 a.placeLabel {
    color: #ff7563 !important;
    font-weight: bold !important;
}
body:has(a[href*="47753"]) .place.hasMapImage .mapimage img {
    border-radius: 6px !important;
    border: 1px solid #ffe6e2 !important;
}

/* 4. Retouches des contenus et titres de la description HTML */
body:has(a[href*="47753"]) #htmlView h3.openingBlock a {
    color: #ff7563 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}

body:has(a[href*="47753"]) #htmlView h2 {
    color: #ff7563 !important;
    font-size: 1.3em !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #ffe6e2 !important;
    padding-bottom: 4px !important;
    margin-top: 1.5em !important;
}

body:has(a[href*="47753"]) #htmlView h4 {
    color: #e65c49 !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    margin-top: 1em !important;
}

/* 5. Aération et structure de la liste des DJs (Line-up) */
body:has(a[href*="47753"]) #htmlView ul {
    list-style-type: none !important;
    padding-left: 0 !important;
}

body:has(a[href*="47753"]) #htmlView ul li {
    background-color: #ffffff !important;
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    border-left: 4px solid #ff9485 !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

/* Liens d'écoute des DJs (Soundcloud, Youtube...) style petit bouton */
body:has(a[href*="47753"]) #htmlView ul li a {
    color: #ffffff !important;
    background-color: #ff7563 !important;
    padding: 2px 8px !important;
    font-size: 0.82em !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-left: 4px !important;
}
body:has(a[href*="47753"]) #htmlView ul li a:hover {
    background-color: #222222 !important; 
}

/* 6. Lignes séparatrices pointillées fluides */
body:has(a[href*="47753"]) #htmlView hr.subsection {
    border: 0 !important;
    height: 2px !important;
    background: repeating-linear-gradient(90deg, #ff9485 0 6px, transparent 6px 12px) !important;
    opacity: 0.4 !important;
    margin: 20px 0 !important;
}

/* 7. Image de l'affiche de droite mieux intégrée */
body:has(a[href*="47753"]) #htmlView img.zoomableImage {
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    border: 1px solid #ffe6e2 !important;
}

/* Masquage discret de la ligne technique "titre accueil" visible en haut du contenu */
body:has(a[href*="47753"]) p#eventFrontpageTitle {
    display: none !important;
}