/* Styles harmonisés pour les blocs spéciaux */

.astuce {
    border: 2px solid #4b6eaf;
    padding: 1em;
    margin: 1em 0;
    border-radius: 0.5em;
    background: #f0f7ff;
}
.astuce::before {
    content: "🔥 ";  /* l'emoji + un espace */
    font-weight: bold;
}

.soluce {
    border: 2px solid #28a745;
    padding: 1em;
    margin: 1em 0;
    border-radius: 0.5em;
    background: #f0fff4;
}
.soluce::before {
    content: "🛠️ "; /* emoji outil */
    font-weight: bold;
}

.attention {
    border: 2px solid #dc3545;
    padding: 1em;
    margin: 1em 0;
    border-radius: 0.5em;
    background: #fff0f0;
}
.attention::before {
    content: "⚠️ ";
    font-weight: bold;
}

/* Style harmonisé pour les spoilers */
.spoiler-details {
    border: 2px solid #6c757d;
    padding: 1em;
    margin: 1em 0;
    border-radius: 0.5em;
    background: #f8f9fa;
}

.spoiler-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #495057;
    padding: 8px 12px;
    margin: -1em;
    border-radius: 0.3em;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    list-style: none;
    transition: all 0.2s ease;
}

.spoiler-details summary::-webkit-details-marker {
    display: none;
}

.spoiler-details summary:hover {
    background: #e9ecef;
    color: #0d6efd;
}

.spoiler-details[open] summary {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1em;
    padding-bottom: 12px;
    background: #e9ecef;
    border-radius: 0.3em 0.3em 0 0;
}

/* Style pour l'icône du spoiler */
.spoiler-details summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s ease;
    font-size: 0.8em;
    color: #6c757d;
}

.spoiler-details[open] summary::before {
    transform: rotate(90deg);
    color: #0d6efd;
}

/* Contenu du spoiler */
.spoiler-content {
    padding: 0.5em 0;
}

/* Styles communs pour tous les blocs */
.astuce, .soluce, .attention, .spoiler-details {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}

.astuce:hover, .soluce:hover, .attention:hover, .spoiler-details:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* ============= LES LIENS ========================= */
/* Style pour les liens dans les paragraphes ET les listes - SANS SOULIGNEMENT */
/* Style pour les liens dans les paragraphes ET les listes - SANS SOULIGNEMENT */
/* EXCEPTION pour .sidebar-nav et ses enfants */
p a:not(.sidebar-nav a):not(.sidebar-nav p a):not(.sidebar-nav li a), 
li a:not(.sidebar-nav a):not(.sidebar-nav p a):not(.sidebar-nav li a) {
    color: #2e8b57;
    text-decoration: none !important;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    outline: 1px solid #2e8b57;
    background-color: #f0fff4;
    display: inline;
    margin: 0 1px;
    line-height: 1.6;
}

/* Tous les états hover sauf sidebar-nav */
p a:not(.sidebar-nav a):not(.sidebar-nav p a):not(.sidebar-nav li a):hover, 
li a:not(.sidebar-nav a):not(.sidebar-nav p a):not(.sidebar-nav li a):hover {
    background-color: #e8f5e8; /* Vert un peu plus soutenu */
    outline: 1px solid #236b47; /* Bordure légèrement plus foncée */
    text-decoration: none !important;
    transform: translateY(-1px); /* Léger soulèvement subtil */
    box-shadow: 0 2px 8px rgba(46, 139, 87, 0.2); /* Ombre plus douce */
}

/* Tous les états active sauf sidebar-nav */
p a:not(.sidebar-nav a):not(.sidebar-nav p a):not(.sidebar-nav li a):active, 
li a:not(.sidebar-nav a):not(.sidebar-nav p a):not(.sidebar-nav li a):active {
    transform: translateY(1px);
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(46, 139, 87, 0.3);
}

/* Focus sauf sidebar-nav */
p a:not(.sidebar-nav a):not(.sidebar-nav p a):not(.sidebar-nav li a):focus {
    outline: 2px solid #2e8b57;
    outline-offset: 1px;
    background-color: #e8f5e8;
}