/* ============================================================
   styleSheet.css — Panorama of Emergency Medicine (PoEM)
   Site : https://panoramaoem.cloud
   Thème : Immersion / OJS 3.5.0.1
   Dernière mise à jour : 2026-06-26
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Droid+Serif:wght@400;700&display=swap');

/* Masquer le footer */
footer.footer[role="contentinfo"] {
    display: none !important;
}

/* Masquer la section current_issue */
section.current_issue {
    display: none !important;
}

/* ========================================
   Personnalisation Thème Immersion - OJS
   Masquage d'éléments sur la page d'accueil uniquement
   ======================================== */

/* Masquer le titre principal du header sur la home page - Thème Immersion OJS */
body.page_index.op_index h1.main-header_title {
    display: none !important;
}

/* Masquer la barre de navigation principale sur la home page - Thème Immersion OJS */
body.page_index.op_index nav.navbar.navbar-expand-sm.main-header_nav {
    display: none !important;
}

/* Masquer la section complète des numéros (issues) sur la home page - Thème Immersion OJS */
body.page_index.op_index section.issue {
    display: none !important;
}

/* Masquer le footer principal sur toutes les pages - Thème Immersion OJS */
footer.main-footer#immersion_content_footer {
    display: none !important;
}

/* Masquer le titre principal du header sur toutes les pages - Thème Immersion OJS */
h1.main-header_title {
    display: none !important;
}

/* Masquer le titre principal du header sur toutes les pages - Thème Immersion OJS */
h1.main-header__title {
    display: none !important;
}

/* ============================================
   Theme OJS Immersion - Customisation
   Background color pour .issue
   ============================================ */

/* Applique la couleur de fond #1e3a8a aux éléments .issue */
.issue {
    background-color: #1e3a8a;
}

/* ============================================
   Theme OJS Immersion - Customisation
   Background color pour #immersion_content_header
   ============================================ */

/* Applique la couleur de fond #1e3a8a à l'élément #immersion_content_header */
#immersion_content_header {
    background-color: #1e3a8a;
}


/* ============================================
   Theme OJS Immersion - Customisation
   Background color pour .category
   ============================================ */

/* Applique la couleur de fond blanche aux éléments .category */
.category {
    background-color: #ffffff;
}


/* Applique la couleur de fond blanche à section.col-md-8.article-page */
section.col-md-8.article-page {
    background-color: #ffffff;
    color: #000000;
}

/* Applique la couleur de fond #F9FAFC à section.col-md-8.article-page */
section.col-md-8.article-page {
    background-color: #F9FAFC;
}

/* Applique la couleur noire à tous les textes de tous les niveaux */
section.col-md-8.article-page {
    color: #000000;
}

/* Assure que les titres sont aussi en noir */
section.col-md-8.article-page h1,
section.col-md-8.article-page h2,
section.col-md-8.article-page h3,
section.col-md-8.article-page h4,
section.col-md-8.article-page h5,
section.col-md-8.article-page h6 {
    color: #000000;
}

/* ============================================
   Theme OJS Immersion - Customisation
   Background #F9FAFC pour la page de recherche
   ============================================ */

/* Applique un fond #F9FAFC à la section principale */
#immersion_content_main > section {
    background-color: #F9FAFC !important;
}

/* Applique un fond #F9FAFC à l'aside de recherche */
#immersion_content_main aside.col-md-4.search {
    background-color: #F9FAFC !important;
}

/* Applique un fond #F9FAFC au formulaire de recherche */
#immersion_content_main form.search__form {
    background-color: #F9FAFC !important;
}

/* Applique un fond #F9FAFC à la section des résultats */
#immersion_content_main section.col-md-8 {
    background-color: #F9FAFC !important;
}

/* Applique un fond #F9FAFC à la div row */
#immersion_content_main .row {
    background-color: #F9FAFC !important;
}

/* Applique un fond #F9FAFC aux résultats de recherche */
#immersion_content_main .search_results {
    background-color: #F9FAFC !important;
}


/* Menu de navigation utilisateur - Thème OJS Immersion */
#navigationUser.pkp_navigation_user {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Items de menu individuels */
#navigationUser.pkp_navigation_user .nav-item {
    list-style: none;
    margin: 0;
}

/* Liens du menu - État normal */
#navigationUser.pkp_navigation_user .main-header__admin-link {
    background-color: #1e3a8a;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border: 2px solid #1e3a8a;
    border-radius: 4px;
    font-size: 14px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Liens du menu - État hover */
#navigationUser.pkp_navigation_user .main-header__admin-link:hover {
    background-color: white;
    color: #1e3a8a;
    border: 2px solid #1e3a8a;
}

/* ============================================
   Theme OJS Immersion - Customisation
   Masquer l'élément a.is_img image dans le header immersion
   ============================================ */

/* Masque l'élément a.is_img */
a.is_img {
    display: none !important;
}

/* ============================================
   Theme OJS Immersion - Customisation
   Masquer la navigation principale (hamburger menu)
   ============================================ */

/* Masque la navigation principale complète */
nav.navbar.navbar-expand-sm.main-header__nav {
    display: none !important;
}

/* Alternative : Masquer uniquement le bouton hamburger */
.navbar-toggler.hamburger {
    display: none !important;
}

/* Masquer le menu principal */
#main-menu {
    display: none !important;
}

/* ============================================
   Theme OJS Immersion - Customisation
   Texte en noir pour header.issue__header
   ============================================ */

/* Applique la couleur noire au header et tous ses éléments */
header.issue__header {
    color: #000000 !important;
}

/* Applique la couleur noire au titre */
header.issue__header h1.issue__title,
header.issue__header .issue__localized_name {
    color: #000000 !important;
}

/* Applique la couleur noire aux métadonnées */
header.issue__header p.issue__meta {
    color: #000000 !important;
}

/* Applique la couleur noire à tous les éléments enfants */
header.issue__header * {
    color: #000000 !important;
}


/* ============================================
   PDF.js VIEWER FIX - Panorama OEM
   Force le PDF viewer en PLEIN ÉCRAN
   S'applique UNIQUEMENT sur les pages avec PDF viewer
   ============================================ */

/* PDF Container - PLEIN ÉCRAN TOTAL - Couvre tout l'écran */
#pdfCanvasContainer.galley_view {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
}

/* Iframe dans le PDF container - Occupe toute la hauteur/largeur */
#pdfCanvasContainer.galley_view iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: block;
    border: none;
}

/* ============================================
   RÈGLES APPLIQUÉES UNIQUEMENT SI PDF PRÉSENT
   Utilise :has() pour cibler les pages avec PDF
   ============================================ */

/* Force tous les éléments header/nav en arrière-plan SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) header,
body:has(#pdfCanvasContainer.galley_view) .pkp_structure_head,
body:has(#pdfCanvasContainer.galley_view) .pkp_head_wrapper,
body:has(#pdfCanvasContainer.galley_view) .site-header,
body:has(#pdfCanvasContainer.galley_view) nav,
body:has(#pdfCanvasContainer.galley_view) .navbar,
body:has(#pdfCanvasContainer.galley_view) .navigation,
body:has(#pdfCanvasContainer.galley_view) .main-menu,
body:has(#pdfCanvasContainer.galley_view) .top-bar,
body:has(#pdfCanvasContainer.galley_view) .menu-bar {
    position: relative !important;
    z-index: 1 !important;
}

/* Force les éléments fixed/sticky en arrière-plan SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) header[style*="position: fixed"],
body:has(#pdfCanvasContainer.galley_view) header[style*="position: sticky"],
body:has(#pdfCanvasContainer.galley_view) nav[style*="position: fixed"],
body:has(#pdfCanvasContainer.galley_view) nav[style*="position: sticky"],
body:has(#pdfCanvasContainer.galley_view) .fixed-header,
body:has(#pdfCanvasContainer.galley_view) .sticky-header {
    position: relative !important;
    z-index: 1 !important;
}

/* Breadcrumbs et navigation de page en arrière-plan SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) .breadcrumbs,
body:has(#pdfCanvasContainer.galley_view) .breadcrumb,
body:has(#pdfCanvasContainer.galley_view) .page-navigation,
body:has(#pdfCanvasContainer.galley_view) .pkp_navigation_primary {
    position: relative !important;
    z-index: 1 !important;
}

/* Sidebar et widgets en arrière-plan SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) aside,
body:has(#pdfCanvasContainer.galley_view) .sidebar,
body:has(#pdfCanvasContainer.galley_view) .widget,
body:has(#pdfCanvasContainer.galley_view) .pkp_structure_sidebar {
    position: relative !important;
    z-index: 1 !important;
}

/* Modals et overlays (sauf PDF) en arrière-plan SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) .modal:not(#pdfCanvasContainer),
body:has(#pdfCanvasContainer.galley_view) .overlay:not(#pdfCanvasContainer),
body:has(#pdfCanvasContainer.galley_view) .popup:not(#pdfCanvasContainer) {
    z-index: 2 !important;
}

/* Footer en arrière-plan SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) footer,
body:has(#pdfCanvasContainer.galley_view) .pkp_structure_footer,
body:has(#pdfCanvasContainer.galley_view) .site-footer {
    position: relative !important;
    z-index: 1 !important;
}

/* Empêcher le scroll du body quand PDF est en plein écran */
body:has(#pdfCanvasContainer.galley_view) {
    overflow: hidden !important;
    height: 100vh !important;
    position: relative !important;
}

/* Cacher tous les autres éléments de la page sauf le PDF */
body:has(#pdfCanvasContainer.galley_view) > *:not(#pdfCanvasContainer):not(script):not(style) {
    display: none !important;
}

/* Container galley_view aussi au premier plan */
.galley_view {
    position: relative !important;
    z-index: 999998 !important;
}

/* Empêcher les barres de notification de couvrir le PDF SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) .notification-bar,
body:has(#pdfCanvasContainer.galley_view) .alert-bar,
body:has(#pdfCanvasContainer.galley_view) .announcement-bar,
body:has(#pdfCanvasContainer.galley_view) .cookie-notice {
    z-index: 1 !important;
}

/* Empêcher les widgets de chat de couvrir le PDF SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) .chat-widget,
body:has(#pdfCanvasContainer.galley_view) .live-chat,
body:has(#pdfCanvasContainer.galley_view) .support-widget {
    z-index: 1 !important;
}

/* Responsive - Mobile - Plein écran aussi */
@media (max-width: 768px) {
    #pdfCanvasContainer.galley_view {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    
    #pdfCanvasContainer.galley_view iframe {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Cacher complètement le header sur mobile quand PDF actif */
    body:has(#pdfCanvasContainer.galley_view) header,
    body:has(#pdfCanvasContainer.galley_view) nav,
    body:has(#pdfCanvasContainer.galley_view) .mobile-menu,
    body:has(#pdfCanvasContainer.galley_view) .hamburger-menu {
        display: none !important;
    }
}

/* Styles d'impression - Afficher uniquement le PDF */
@media print {
    /* Cacher tout sauf le PDF lors de l'impression */
    body:has(#pdfCanvasContainer.galley_view) * {
        visibility: hidden;
    }
    
    body:has(#pdfCanvasContainer.galley_view) #pdfCanvasContainer.galley_view,
    body:has(#pdfCanvasContainer.galley_view) #pdfCanvasContainer.galley_view * {
        visibility: visible;
    }
    
    #pdfCanvasContainer.galley_view {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

/* Fallback nucléaire - Force TOUT derrière le PDF SEULEMENT si PDF présent */
body:has(#pdfCanvasContainer.galley_view) > *:not(#pdfCanvasContainer):not(script):not(style) {
    z-index: 1 !important;
}

/* Indicateurs de focus pour accessibilité */
#pdfCanvasContainer.galley_view:focus,
#pdfCanvasContainer.galley_view iframe:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Optimisation performance - Accélération GPU */
#pdfCanvasContainer.galley_view,
#pdfCanvasContainer.galley_view iframe {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* ============================================
   Theme OJS Immersion - Customisation
   UNIQUEMENT pages search et catalog/category
   Utilise :has() pour cibler ces pages spécifiquement
   ============================================ */

/* 1. CORRIGER LE DÉBORDEMENT - UNIQUEMENT sur pages avec recherche ou catégorie */
main.container#immersion_content_main:has(aside.search) > section > .row > .col-md-8.offset-md-4,
main#immersion_content_main:has(aside.search) > section > .row > .col-md-8.offset-md-4,
main.container#immersion_content_main:has(.category) > section > .row > .col-md-8.offset-md-4,
main#immersion_content_main:has(.category) > section > .row > .col-md-8.offset-md-4 {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

main.container#immersion_content_main:has(aside.search) > section,
main#immersion_content_main:has(aside.search) > section,
main.container#immersion_content_main:has(.category) > section,
main#immersion_content_main:has(.category) > section {
    overflow: hidden !important;
    width: 100% !important;
}

main.container#immersion_content_main:has(aside.search) > section > .row,
main#immersion_content_main:has(aside.search) > section > .row,
main.container#immersion_content_main:has(.category) > section > .row,
main#immersion_content_main:has(.category) > section > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. RÈGLES POUR PAGES SEARCH */

/* Correction débordement sur page search - Section parente */
body.page_search main#immersion_content_main > section {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Correction débordement sur page search - Row */
body.page_search main#immersion_content_main > section > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Correction débordement sur page search - col-md-12 */
body.page_search main#immersion_content_main > section > .row > .col-12,
body.page_search .col-md-12 {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Masquer tous les <p> SAUF p.article__meta sur pages search */
body.page_search .col-md-12 p:not(.article__meta) {
    display: none !important;
}

/* S'assurer que p.article__meta reste visible sur pages search */
body.page_search .col-md-12 p.article__meta {
    display: block !important;
    visibility: visible !important;
}

/* Masquer les spans et divs génériques sur pages search */
body.page_search .col-md-12 > span,
body.page_search .col-md-12 > div:not(.obj_article_summary):not(.article):not([class*="article"]) {
    display: none !important;
}

/* S'assurer que h4.article_title reste visible sur pages search */
body.page_search .col-md-12 h4.article_title,
body.page_search .col-md-12 h4 {
    display: block !important;
    visibility: visible !important;
}

/* Masquer texte générique sur pages search */
body.page_search .col-md-12 .pkp_screen_reader,
body.page_search .col-md-12 .sr-only {
    display: none !important;
}

/* 3. RÈGLES POUR PAGES CATEGORY */

/* Masquer tous les <p> SAUF p.article__meta dans col-md-8 offset-md-4 sur pages category */
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 p:not(.article__meta) {
    display: none !important;
}

/* S'assurer que p.article__meta reste visible sur pages category */
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 p.article__meta {
    display: block !important;
    visibility: visible !important;
}

/* Masquer les spans et divs qui contiennent du texte libre */
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 > span,
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 > div:not(.obj_article_summary):not(.article):not([class*="article"]) {
    display: none !important;
}

/* S'assurer que h4.article_title reste visible sur pages category */
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 h4.article_title,
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 h4 {
    display: block !important;
    visibility: visible !important;
}

/* Masquer le texte générique */
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 .pkp_screen_reader,
main#immersion_content_main:has(.category) .col-md-8.offset-md-4 .sr-only {
    display: none !important;
}

/* RÈGLES POUR col-12 sur pages category */
main#immersion_content_main:has(.category) .col-12 p:not(.article__meta) {
    display: none !important;
}

main#immersion_content_main:has(.category) .col-12 p.article__meta {
    display: block !important;
    visibility: visible !important;
}

main#immersion_content_main:has(.category) .col-12 > span,
main#immersion_content_main:has(.category) .col-12 > div:not(.obj_article_summary):not(.article):not([class*="article"]) {
    display: none !important;
}

main#immersion_content_main:has(.category) .col-12 h4.article_title,
main#immersion_content_main:has(.category) .col-12 h4 {
    display: block !important;
    visibility: visible !important;
}

main#immersion_content_main:has(.category) .col-12 .pkp_screen_reader,
main#immersion_content_main:has(.category) .col-12 .sr-only {
    display: none !important;
}

/* 4. RÈGLES POUR PAGES ISSUE */

main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 p:not(.article__meta),
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 p:not(.article__meta) {
    display: none !important;
}

main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 p.article__meta,
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 p.article__meta {
    display: block !important;
    visibility: visible !important;
}

main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 > span,
main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 > div:not(.obj_article_summary):not(.article):not([class*="article"]),
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 > span,
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 > div:not(.obj_article_summary):not(.article):not([class*="article"]) {
    display: none !important;
}

main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 h4.article_title,
main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 h4,
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 h4.article_title,
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 h4 {
    display: block !important;
    visibility: visible !important;
}

main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 .pkp_screen_reader,
main#immersion_content_main:has(.issue) .col-md-8.offset-md-4 .sr-only,
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 .pkp_screen_reader,
main#immersion_content_main:has(section.issue) .col-md-8.offset-md-4 .sr-only {
    display: none !important;
}

/* RÈGLES POUR col-12 sur pages issue */
main#immersion_content_main:has(.issue) .col-12 p:not(.article__meta),
main#immersion_content_main:has(section.issue) .col-12 p:not(.article__meta) {
    display: none !important;
}

main#immersion_content_main:has(.issue) .col-12 p.article__meta,
main#immersion_content_main:has(section.issue) .col-12 p.article__meta {
    display: block !important;
    visibility: visible !important;
}

main#immersion_content_main:has(.issue) .col-12 > span,
main#immersion_content_main:has(.issue) .col-12 > div:not(.obj_article_summary):not(.article):not([class*="article"]),
main#immersion_content_main:has(section.issue) .col-12 > span,
main#immersion_content_main:has(section.issue) .col-12 > div:not(.obj_article_summary):not(.article):not([class*="article"]) {
    display: none !important;
}

main#immersion_content_main:has(.issue) .col-12 h4.article_title,
main#immersion_content_main:has(.issue) .col-12 h4,
main#immersion_content_main:has(section.issue) .col-12 h4.article_title,
main#immersion_content_main:has(section.issue) .col-12 h4 {
    display: block !important;
    visibility: visible !important;
}

main#immersion_content_main:has(.issue) .col-12 .pkp_screen_reader,
main#immersion_content_main:has(.issue) .col-12 .sr-only,
main#immersion_content_main:has(section.issue) .col-12 .pkp_screen_reader,
main#immersion_content_main:has(section.issue) .col-12 .sr-only {
    display: none !important;
}

/* ============================================
   Login Modal - Design personnalisé
   ============================================ */

/* Voile sombre */
#loginModal.modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* La boîte visible : fond blanc + cadre propre */
#loginModal .modal-content {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Conteneurs intermédiaires transparents */
#loginModal .modal-dialog,
#loginModal .modal-body,
#loginModal .form-login,
#loginModal fieldset,
#loginModal .form-group {
    background: transparent !important;
}

/* Libellés, textes et liens */
#loginModal label,
#loginModal .custom-control-label,
#loginModal p,
#loginModal a {
    color: #1e3a8a !important;
}

/* Champs de saisie */
#loginModal input.form-control,
#loginModal input[type="text"],
#loginModal input[type="password"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #9ca3af !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
}

/* Champ actif (focus) */
#loginModal input.form-control:focus,
#loginModal input[type="text"]:focus,
#loginModal input[type="password"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* Bouton Login : bleu plein */
#loginModal .btn-primary {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 28px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease !important;
}
#loginModal .btn-primary:hover {
    background-color: #3b82f6 !important;
}

/* Bouton Register : contour bleu */
#loginModal .btn-secondary {
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 2px solid #1e3a8a !important;
    padding: 8px 26px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
#loginModal .btn-secondary:hover {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}

/* Croix de fermeture visible */
#loginModal .close {
    color: #1e3a8a !important;
    opacity: 1 !important;
}

/* Hide "Most read articles by the same author(s)" section */
section#articlesBySameAuthorList,
#articlesBySameAuthorList,
.row #articlesBySameAuthorList,
#articlesBySameAuthorList h2,
#articlesBySameAuthorList ul {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   Liens en noir dans <main id="immersion_content_main">
   SAUF les boutons (éléments avec "btn" dans la classe)
   ============================================ */

main#immersion_content_main a:not([class*="btn"]),
main#immersion_content_main a:not([class*="btn"]):link,
main#immersion_content_main a:not([class*="btn"]):visited,
main#immersion_content_main a:not([class*="btn"]):hover,
main#immersion_content_main a:not([class*="btn"]):active,
main#immersion_content_main a:not([class*="btn"]):focus {
    color: #000000 !important;
}

/* ============================================
   Champs de formulaire dans <main id="immersion_content_main">
   Fond blanc et texte noir
   ============================================ */

#immersion_content_main input[type="text"],
#immersion_content_main input[type="search"],
#immersion_content_main input[type="email"],
#immersion_content_main input[type="password"],
#immersion_content_main input[type="number"],
#immersion_content_main input[type="tel"],
#immersion_content_main input[type="url"],
#immersion_content_main input[type="date"],
#immersion_content_main input[type="time"],
#immersion_content_main textarea,
#immersion_content_main select {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#immersion_content_main input[type="text"]:focus,
#immersion_content_main input[type="search"]:focus,
#immersion_content_main input[type="email"]:focus,
#immersion_content_main input[type="password"]:focus,
#immersion_content_main input[type="number"]:focus,
#immersion_content_main input[type="tel"]:focus,
#immersion_content_main input[type="url"]:focus,
#immersion_content_main input[type="date"]:focus,
#immersion_content_main input[type="time"]:focus,
#immersion_content_main textarea:focus,
#immersion_content_main select:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Placeholder en gris pour meilleure lisibilité */
#immersion_content_main input::placeholder,
#immersion_content_main textarea::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

/* ============================================
   FORMULAIRES — Login / Register / Search
   Carte blanche, champs fond blanc/texte noir, boutons bleus
   Ajouté le 2026-06-26
   ============================================ */

/* --- Fond général des pages concernées --- */
body.page_login.op_index #immersion_content_main,
body.page_user.op_register #immersion_content_main,
body.page_search #immersion_content_main {
    background: #F9FAFC;
}

/* --- Carte blanche pour Login et Register --- */
body.page_login.op_index .main__content .row > div,
body.page_user.op_register .main__content .row > div {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.10);
    padding: 36px 40px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* --- Titre de page --- */
body.page_login.op_index .main__title,
body.page_user.op_register .main__title {
    font-family: 'Droid Serif', Georgia, serif !important;
    color: #1e3a8a !important;
    font-size: 1.6rem !important;
    margin-bottom: 24px !important;
}

/* --- Champs texte / email / password / select --- */
body.page_login.op_index #immersion_content_main .form-control,
body.page_user.op_register #immersion_content_main .form-control,
body.page_search #immersion_content_main .form-control,
body.page_search #immersion_content_main input[type="search"],
body.page_search #immersion_content_main input[type="text"],
body.page_search #immersion_content_main select {
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.page_login.op_index #immersion_content_main .form-control:focus,
body.page_user.op_register #immersion_content_main .form-control:focus,
body.page_search #immersion_content_main .form-control:focus,
body.page_search #immersion_content_main input[type="search"]:focus,
body.page_search #immersion_content_main input[type="text"]:focus,
body.page_search #immersion_content_main select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    outline: none !important;
}

/* --- Labels --- */
body.page_login.op_index #immersion_content_main label,
body.page_user.op_register #immersion_content_main label,
body.page_search #immersion_content_main label {
    color: #1e3a8a !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* --- Bouton principal (Login / Register / Search) --- */
body.page_login.op_index #immersion_content_main .btn-primary,
body.page_user.op_register #immersion_content_main .btn-primary,
body.page_search #immersion_content_main .btn-primary {
    background: #1e3a8a !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 28px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: background 0.3s ease, transform 0.2s ease !important;
}

body.page_login.op_index #immersion_content_main .btn-primary:hover,
body.page_user.op_register #immersion_content_main .btn-primary:hover,
body.page_search #immersion_content_main .btn-primary:hover {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    transform: translateY(-2px) !important;
}

/* --- Bouton secondaire Register (dans login) --- */
body.page_login.op_index #immersion_content_main .btn-secondary,
body.page_user.op_register #immersion_content_main .btn-secondary {
    background: transparent !important;
    border: 2px solid #1e3a8a !important;
    color: #1e3a8a !important;
    border-radius: 8px !important;
    padding: 10px 28px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
}

body.page_login.op_index #immersion_content_main .btn-secondary:hover,
body.page_user.op_register #immersion_content_main .btn-secondary:hover {
    background: #1e3a8a !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* --- Lien "Login" sur la page Register --- */
body.page_user.op_register #immersion_content_main a.login {
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

/* --- Lien "Forgot your password?" --- */
body.page_login.op_index #immersion_content_main a[href*="lostPassword"] {
    color: #3b82f6 !important;
    font-size: 0.88rem !important;
}

/* --- Légendes fieldset (Profile, Login, Consent...) --- */
body.page_user.op_register #immersion_content_main fieldset legend {
    color: #1e3a8a !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 6px !important;
    margin-bottom: 16px !important;
}

/* --- Case à cocher (Remember / Consent) --- */
body.page_login.op_index #immersion_content_main .custom-control-label,
body.page_user.op_register #immersion_content_main .custom-control-label {
    color: #374151 !important;
    font-size: 0.9rem !important;
}

/* --- Colonne aside du Search (formulaire à gauche) --- */
body.page_search #immersion_content_main aside.search {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.10);
    padding: 28px 24px;
}

/* ============================================
   PAGE DE LOGIN « SITE » (/index/login) — Redesign façon page d'accueil
   ============================================ */

body.pkp_page_login {
    background-color: #f8fafc !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
}

body.pkp_page_login .pkp_site_name .is_img img,
body.pkp_page_login .pkp_brand_footer,
body.pkp_page_login .pkp_structure_footer a[href*="aboutThisPublishingSystem"],
body.pkp_page_login .pkp_site_nav_toggle,
body.pkp_page_login .cmp_breadcrumbs {
    display: none !important;
}

body.pkp_page_login .pkp_structure_head {
    background:
        linear-gradient(rgba(30, 58, 138, 0.80), rgba(30, 58, 138, 0.80)),
        url('https://panoramaoem.cloud/public/site/images/scholartrack/rescue-of-old-man-2025-02-16-09-43-35-utc-2.jpg') center center / cover no-repeat !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

body.pkp_page_login .pkp_head_wrapper {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 28px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

body.pkp_page_login .pkp_site_name a.is_img {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    text-decoration: none !important;
}
body.pkp_page_login .pkp_site_name a.is_img::after {
    content: "Panorama of Emergency Medicine";
    font-family: 'Droid Serif', Georgia, serif !important;
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

body.pkp_page_login .pkp_navigation_user {
    display: flex !important;
    gap: 12px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.pkp_page_login .pkp_navigation_user li { list-style: none !important; }
body.pkp_page_login .pkp_navigation_user a {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 5px !important;
    transition: all 0.2s ease !important;
}
body.pkp_page_login .pkp_navigation_user a:hover {
    background: #ffffff !important;
    color: #1e3a8a !important;
}

body.pkp_page_login .pkp_structure_main {
    display: flex !important;
    justify-content: center !important;
    padding: 55px 20px !important;
}
body.pkp_page_login .page_login {
    background: #ffffff !important;
    max-width: 480px !important;
    width: 100% !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(30, 58, 138, 0.15) !important;
    border: 1px solid #e2e8f0 !important;
}

body.pkp_page_login .page_login h1 {
    font-family: 'Droid Serif', Georgia, serif !important;
    color: #1e3a8a !important;
    font-size: 2rem !important;
    margin: 0 0 8px 0 !important;
}
body.pkp_page_login .page_login > p {
    color: #6b7280 !important;
    font-size: 0.9rem !important;
    margin-bottom: 22px !important;
}

body.pkp_page_login .page_login label .label {
    color: #1e3a8a !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
}

body.pkp_page_login .page_login input[type="text"],
body.pkp_page_login .page_login input[type="password"] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #9ca3af !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    font-size: 1rem !important;
}
body.pkp_page_login .page_login input[type="text"]:focus,
body.pkp_page_login .page_login input[type="password"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

body.pkp_page_login .page_login .username,
body.pkp_page_login .page_login .password,
body.pkp_page_login .page_login .remember {
    margin-bottom: 18px !important;
}

body.pkp_page_login .page_login .password a {
    color: #3b82f6 !important;
    font-size: 0.85rem !important;
    display: inline-block !important;
    margin-top: 8px !important;
    text-decoration: none !important;
}
body.pkp_page_login .page_login .password a:hover {
    text-decoration: underline !important;
}

body.pkp_page_login .page_login .remember .label {
    color: #1e3a8a !important;
    font-weight: 500 !important;
    margin-left: 6px !important;
}

body.pkp_page_login .page_login .buttons {
    margin-top: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.pkp_page_login .page_login button.submit {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 11px 30px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}
body.pkp_page_login .page_login button.submit:hover {
    background-color: #3b82f6 !important;
}

body.pkp_page_login .page_login a.register {
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #1e3a8a !important;
    border: 2px solid #1e3a8a !important;
    padding: 9px 28px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
body.pkp_page_login .page_login a.register:hover {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
}

body.pkp_page_login .pkp_structure_footer_wrapper {
    background-color: #1e3a8a !important;
    padding: 18px 20px !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    body.pkp_page_login .pkp_head_wrapper {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 22px 16px !important;
    }
    body.pkp_page_login .pkp_site_name a.is_img::after {
        font-size: 1.5rem !important;
    }
    body.pkp_page_login .page_login {
        padding: 28px 22px !important;
    }
    body.pkp_page_login .page_login .buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.pkp_page_login .page_login button.submit,
    body.pkp_page_login .page_login a.register {
        text-align: center !important;
        width: 100% !important;
    }
}

/* ============================================
   Fin de la customisation
   ============================================ */