/* ================================================
   CLASSIC MODE — styles universels
   Inclus sur toutes les pages du site
   ================================================ */

/* ------------------------------------------------
   TOGGLE MASQUÉ — mode clair figé
   Pour réactiver : commenter la règle ci-dessous
   ------------------------------------------------ */
.classic-toggle-btn {
    display: none !important;
}

/* ------------------------------------------------
   SWAP LOGO dark / light (toutes pages)
   ------------------------------------------------ */
.logo-dark { display: block; }
.logo-light { display: none; }
body.classic-mode .logo-dark { display: none; }
body.classic-mode .logo-light { display: block; }

/* Wrapper droite du header (index.html) */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ------------------------------------------------
   BOUTON TOGGLE (apparence en mode sombre)
   ------------------------------------------------ */
.classic-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.classic-toggle-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}
.classic-toggle-btn.active {
    background: rgba(44, 82, 130, 0.18);
    border-color: rgba(44, 82, 130, 0.6);
    color: #6a9fd8;
}

/* Bouton en mode classique */
body.classic-mode .classic-toggle-btn {
    background: rgba(44, 82, 130, 0.1);
    border: 1px solid #2c5282;
    color: #2c5282;
}
body.classic-mode .classic-toggle-btn:hover {
    background: rgba(44, 82, 130, 0.2);
    color: #1a2942;
}

/* Wrapper droite du header (melanome / basocellulaire / epidermoide) */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Wrapper top row (antiagregants uniquement) */
.page .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.page .top-row .back {
    margin-bottom: 0;
}

/* ------------------------------------------------
   SURCHARGE DES VARIABLES CSS
   S'applique à tous les éléments qui utilisent
   var(--bg-dark), var(--glass-bg), etc.
   ------------------------------------------------ */
body.classic-mode {
    --bg-dark:          #d3dce7;
    --glass-bg:         #e5eef7;
    --glass-border:     rgba(44, 82, 130, 0.2);
    --text-primary:     #1a2942;
    --text-secondary:   #4a5568;
    --accent-cyan:      #2c5282;
    --accent-pink:      #c0392b;
    --accent-orange:    #b7791f;
    --accent-green:     #276749;
    --accent-red:       #b91c1c;
    --primary-gradient: linear-gradient(135deg, #2c5282 0%, #1a3a6c 100%);
    background:         #d3dce7 !important;
    background-image:   none !important;
    color:              #1a2942;
}

/* ------------------------------------------------
   HEADER FIXE (melanome / basocellulaire / epidermoide)
   Hardcodé rgba(10,10,15,0.95) → surcharge !important
   ------------------------------------------------ */
body.classic-mode .header {
    background: #dce6f2 !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid #b8c8da !important;
}

/* ------------------------------------------------
   TITRE DE PAGE — supprimer le gradient clip
   ------------------------------------------------ */
body.classic-mode .page-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #1a3a6c !important;
    color: #1a3a6c;
}

/* ------------------------------------------------
   BOUTON RETOUR (back-btn)
   ------------------------------------------------ */
body.classic-mode .back-btn {
    border-color: rgba(44, 82, 130, 0.3);
    color: #4a5568;
}
body.classic-mode .back-btn:hover {
    border-color: #2c5282;
    color: #2c5282;
}

/* ------------------------------------------------
   BOUTON RÉINITIALISER
   ------------------------------------------------ */
body.classic-mode .reset-btn-header {
    border-color: rgba(44, 82, 130, 0.3);
    color: #4a5568;
    background: transparent;
}
body.classic-mode .reset-btn-header:hover {
    border-color: #2c5282;
    color: #2c5282;
}

/* ================================================
   ANTIAGREGANTS — couleurs toutes hardcodées en dur
   (pas de variables CSS dans cette page)
   ================================================ */

/* Corps de page */
body.classic-mode .page {
    color: #1a2942;
}

/* Lien "retour" */
body.classic-mode .back {
    color: #4a5568 !important;
}
body.classic-mode .back:hover {
    color: #2c5282 !important;
    text-decoration: none;
}

/* Liens généraux */
body.classic-mode a:not(.back-btn):not(.back):not(.dropdown-item):not(.header-link):not(.dropdown-trigger) {
    color: #2c5282;
}

/* Titres */
body.classic-mode h1 {
    color: #1a2942 !important;
}
body.classic-mode h2 {
    color: #2c5282 !important;
    border-bottom-color: rgba(44, 82, 130, 0.18) !important;
}
body.classic-mode h3 {
    color: #1a3a6c !important;
}

/* Sous-titre de page */
body.classic-mode .subtitle {
    color: #4a5568 !important;
}

/* Paragraphes et listes */
body.classic-mode p {
    color: #2d3748;
}
body.classic-mode ul li {
    color: #2d3748 !important;
}
body.classic-mode ul li::before {
    color: #2c5282 !important;
}

/* ---- Boîtes d'alertes ---- */
body.classic-mode .alert-gold {
    background: rgba(44, 82, 130, 0.06) !important;
    border-color: rgba(44, 82, 130, 0.25) !important;
    border-left-color: #2c5282 !important;
    color: #1a3a6c !important;
}
body.classic-mode .alert-gold strong {
    color: #2c5282 !important;
}

body.classic-mode .alert-danger {
    background: rgba(185, 28, 28, 0.05) !important;
    border-color: rgba(185, 28, 28, 0.2) !important;
    border-left-color: #b91c1c !important;
    color: #7b1d1d !important;
}
body.classic-mode .alert-danger strong {
    color: #b91c1c !important;
}

body.classic-mode .alert-info {
    background: rgba(44, 82, 130, 0.05) !important;
    border-color: rgba(44, 82, 130, 0.2) !important;
    border-left-color: #4a5568 !important;
    color: #2d3748 !important;
}

/* ---- Tables ---- */
body.classic-mode .table-wrap {
    border-color: rgba(44, 82, 130, 0.15) !important;
}
body.classic-mode thead th {
    background: rgba(44, 82, 130, 0.07) !important;
    color: #1a2942 !important;
    border-bottom-color: rgba(44, 82, 130, 0.15) !important;
}
body.classic-mode tbody tr {
    border-bottom-color: rgba(44, 82, 130, 0.08) !important;
}
body.classic-mode tbody tr:hover {
    background: rgba(44, 82, 130, 0.04) !important;
}
body.classic-mode td {
    color: #2d3748 !important;
}
body.classic-mode td:first-child {
    color: #1a2942 !important;
}
body.classic-mode .table-section-header td {
    background: rgba(44, 82, 130, 0.06) !important;
    color: #4a5568 !important;
}

/* ---- Indicateurs de décision ---- */
body.classic-mode .dec-go,
body.classic-mode .inr-ok {
    color: #276749 !important;
}
body.classic-mode .dec-warn,
body.classic-mode .inr-warn {
    color: #b7791f !important;
}
body.classic-mode .dec-stop,
body.classic-mode .inr-stop {
    color: #b91c1c !important;
}

/* ---- Cards BSDS/AOD ---- */
body.classic-mode .bsds-aod-box {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(44, 82, 130, 0.15) !important;
}
body.classic-mode .bsds-aod-title {
    color: #4a5568 !important;
}
body.classic-mode .bsds-aod-card-label,
body.classic-mode .bsds-aod-card-detail {
    color: #2d3748 !important;
}
body.classic-mode .bsds-go {
    background: rgba(39, 103, 73, 0.08) !important;
    border-color: rgba(39, 103, 73, 0.25) !important;
}
body.classic-mode .bsds-go .bsds-aod-card-action {
    color: #276749 !important;
}
body.classic-mode .bsds-warn {
    background: rgba(183, 121, 31, 0.07) !important;
    border-color: rgba(183, 121, 31, 0.25) !important;
}
body.classic-mode .bsds-warn .bsds-aod-card-action {
    color: #b7791f !important;
}
body.classic-mode .bsds-stop {
    background: rgba(185, 28, 28, 0.07) !important;
    border-color: rgba(185, 28, 28, 0.22) !important;
}
body.classic-mode .bsds-stop .bsds-aod-card-action {
    color: #b91c1c !important;
}

/* ---- Accordion (drug-group) ---- */
body.classic-mode .drug-group {
    border-color: rgba(44, 82, 130, 0.18) !important;
}
body.classic-mode .drug-group summary {
    background: rgba(44, 82, 130, 0.03) !important;
}
body.classic-mode .drug-group summary:hover {
    background: rgba(44, 82, 130, 0.07) !important;
}
body.classic-mode .drug-group[open] > summary {
    background: #f0f4fa !important;
    border-bottom-color: rgba(44, 82, 130, 0.15) !important;
}
body.classic-mode .drug-name {
    color: #1a2942 !important;
}
body.classic-mode .drug-sub {
    color: #4a5568 !important;
}
body.classic-mode .drug-group[open] > summary .drug-name {
    color: #1a2942 !important;
}
body.classic-mode .drug-group[open] > summary .drug-sub {
    color: #4a5568 !important;
}
body.classic-mode .summary-chevron {
    color: #2c5282 !important;
}
body.classic-mode .drug-group[open] > summary .summary-chevron {
    color: #2c5282 !important;
}

/* ---- Références ---- */
body.classic-mode .references {
    border-top-color: rgba(44, 82, 130, 0.15) !important;
}
body.classic-mode .references h2 {
    color: #4a5568 !important;
    border-bottom-color: rgba(44, 82, 130, 0.12) !important;
}

/* ================================================
   SECTION HEADERS (melanome / basocellulaire / epidermoide)
   Certains ont des backgrounds hardcodés
   ================================================ */
body.classic-mode .section-header {
    border-color: rgba(44, 82, 130, 0.18);
}

/* ================================================
   INDEX.HTML — page d'accueil
   Tout en hardcodé, palette neon → sobre
   ================================================ */

/* Couleurs d'accentuation (variables CSS propres à index) */
body.classic-mode {
    --c-atlas:  #0078a0;
    --c-onco:   #b83228;
    --c-antiag: #246b4f;
    --c-ccam:   #5a3e9e;
    --c-cas:    #3a46a8;
}

/* Supprimer l'aurora et le dot grid */
body.classic-mode::before,
body.classic-mode::after {
    display: none !important;
}

/* Header */
body.classic-mode header {
    border-bottom-color: rgba(44, 82, 130, 0.18);
}

/* Tagline */
body.classic-mode .tagline {
    color: #6a7a90 !important;
}

/* ---- CARDS ---- */
body.classic-mode .card {
    background: rgba(220, 230, 242, 0.65);
    border-color: rgba(44, 82, 130, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 2px 8px rgba(0, 0, 0, 0.06);
}
body.classic-mode .card:hover {
    transform: translateY(-2px) scale(1.004);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
                0 6px 20px rgba(0, 0, 0, 0.10);
}

/* Glow blob — éteindre en mode classique */
body.classic-mode .card::after {
    opacity: 0 !important;
}
body.classic-mode .card:hover::after {
    opacity: 0 !important;
}

/* Titres de cards */
body.classic-mode h2.card-title {
    color: #1a2942 !important;
    -webkit-text-fill-color: #1a2942 !important;
}

/* Descriptions */
body.classic-mode p.card-desc {
    color: #4a5568 !important;
}

/* ---- CARD ATLAS en mode classique ---- */
body.classic-mode .card-atlas {
    background: linear-gradient(to right,
        rgba(211, 220, 231, 0.98) 0%,
        rgba(211, 220, 231, 0.88) 40%,
        rgba(220, 230, 242, 0.45) 65%,
        rgba(220, 230, 242, 0.08) 85%);
}

/* Face image — plus lumineuse sur fond clair */
body.classic-mode .atlas-face {
    filter: brightness(1.05) saturate(0.55) contrast(1.0);
}

/* Liens oncologie */
body.classic-mode .onco-link {
    color: #2d3a50 !important;
}
body.classic-mode .onco-link:hover {
    color: #1a2942 !important;
    background: rgba(44, 82, 130, 0.07) !important;
    border-color: rgba(44, 82, 130, 0.18) !important;
}
body.classic-mode .onco-arrow {
    color: #a0b0c4 !important;
}
body.classic-mode .onco-link:hover .onco-arrow {
    color: #2c5282 !important;
}

/* Badge WIP */
body.classic-mode .badge-wip {
    color: #5a3e9e !important;
    background: rgba(90, 62, 158, 0.08) !important;
    border-color: rgba(90, 62, 158, 0.2) !important;
}

/* Bannière WIP */
body.classic-mode .wip-banner {
    background: rgba(192, 57, 43, 0.05) !important;
    border-color: rgba(192, 57, 43, 0.2) !important;
    color: rgba(192, 57, 43, 0.65) !important;
}

/* ================================================
   MELANOME / EPIDERMOIDE / BASOCELLULAIRE / MERKEL
   Éléments interactifs internes (items, boutons de stade)
   ================================================ */

/* Sections principales → héritent de --glass-bg déjà surchargé */
body.classic-mode .form-section,
body.classic-mode .bilan-section,
body.classic-mode .stage-section,
body.classic-mode .criteria-section,
body.classic-mode .initial-choice,
body.classic-mode .result-panel,
body.classic-mode .treatment-pathway {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

/* Radio / checkbox items */
body.classic-mode .radio-item {
    background: rgba(44, 82, 130, 0.04) !important;
    border-color: transparent !important;
}
body.classic-mode .radio-item:hover {
    background: rgba(44, 82, 130, 0.09) !important;
    border-color: rgba(44, 82, 130, 0.22) !important;
}
body.classic-mode .radio-item.selected {
    background: rgba(44, 82, 130, 0.12) !important;
    border-color: #2c5282 !important;
}

body.classic-mode .checkbox-item {
    background: rgba(44, 82, 130, 0.04) !important;
    border-color: transparent !important;
}
body.classic-mode .checkbox-item:hover {
    background: rgba(44, 82, 130, 0.09) !important;
    border-color: rgba(44, 82, 130, 0.22) !important;
}
body.classic-mode .checkbox-item.selected {
    background: rgba(44, 82, 130, 0.12) !important;
    border-color: #2c5282 !important;
}

/* Critères (épidermoïde) */
body.classic-mode .criteria-item {
    background: rgba(44, 82, 130, 0.04) !important;
    border-color: transparent !important;
}
body.classic-mode .criteria-item:hover {
    background: rgba(44, 82, 130, 0.09) !important;
    border-color: rgba(44, 82, 130, 0.22) !important;
}
body.classic-mode .criteria-item.selected {
    background: rgba(44, 82, 130, 0.12) !important;
    border-color: #2c5282 !important;
}

/* Groupes de critères (basocellulaire) */
body.classic-mode .criteria-group {
    background: rgba(44, 82, 130, 0.06) !important;
    border-color: rgba(44, 82, 130, 0.18) !important;
}

/* Boutons de stade / choix (merkel / epidermoide) */
body.classic-mode .stage-btn {
    background: rgba(44, 82, 130, 0.06) !important;
    border-color: rgba(44, 82, 130, 0.2) !important;
    color: #1a2942 !important;
}
body.classic-mode .stage-btn:hover {
    background: rgba(44, 82, 130, 0.12) !important;
    border-color: #2c5282 !important;
}
body.classic-mode .stage-btn.selected {
    background: rgba(44, 82, 130, 0.18) !important;
    border-color: #2c5282 !important;
    box-shadow: none !important;
}
body.classic-mode .stage-btn .stage-desc {
    color: #4a5568 !important;
}

body.classic-mode .choice-btn {
    background: rgba(44, 82, 130, 0.06) !important;
    border-color: rgba(44, 82, 130, 0.2) !important;
    color: #1a2942 !important;
}
body.classic-mode .choice-btn:hover {
    background: rgba(44, 82, 130, 0.12) !important;
    border-color: #2c5282 !important;
}
body.classic-mode .choice-btn.selected {
    background: rgba(44, 82, 130, 0.18) !important;
    border-color: #2c5282 !important;
    box-shadow: none !important;
}

/* Colonnes résultat (merkel stade IV) */
body.classic-mode .column-box {
    background: rgba(44, 82, 130, 0.06) !important;
    border-color: rgba(44, 82, 130, 0.18) !important;
}

/* Pathway / traitement (mélanome) */
body.classic-mode .pathway-step {
    background: rgba(44, 82, 130, 0.06) !important;
}
body.classic-mode .treatment-box {
    background: rgba(44, 82, 130, 0.04) !important;
}

/* Radio/checkbox customs — état normal */
body.classic-mode .radio-custom,
body.classic-mode .checkbox-custom {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(44, 82, 130, 0.3) !important;
}

/* État sélectionné — must override the !important above */
body.classic-mode .checkbox-item.selected .checkbox-custom {
    background: #2c5282 !important;
    border-color: #2c5282 !important;
}
body.classic-mode .radio-item.selected .radio-custom {
    border-color: #2c5282 !important;
}
body.classic-mode .criteria-item.selected .checkbox-custom {
    background: #2c5282 !important;
    border-color: #2c5282 !important;
}

/* Input texte (breslow) */
body.classic-mode .input-wrapper input {
    background: #f0f4fa !important;
    border-color: rgba(44, 82, 130, 0.3) !important;
    color: #1a2942 !important;
}
body.classic-mode .input-wrapper input::placeholder {
    color: #a0aec0 !important;
}
body.classic-mode .input-unit {
    color: #2c5282 !important;
}

/* Sources / référence */
body.classic-mode .sources {
    background: rgba(44, 82, 130, 0.04) !important;
}
body.classic-mode .reference-box {
    background: rgba(44, 82, 130, 0.05) !important;
    border-color: rgba(44, 82, 130, 0.18) !important;
}

/* Stage banner (mélanome) */
body.classic-mode .stage-banner {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}
body.classic-mode .stage-value {
    background: var(--primary-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Alertes inline */
body.classic-mode .alert-box.success {
    background: rgba(39, 103, 73, 0.08) !important;
    border-color: #276749 !important;
    color: #276749 !important;
}
body.classic-mode .alert-box.warning {
    background: rgba(183, 121, 31, 0.08) !important;
    border-color: #b7791f !important;
    color: #b7791f !important;
}
body.classic-mode .alert-box.info {
    background: rgba(44, 82, 130, 0.07) !important;
    border-color: #2c5282 !important;
    color: #2c5282 !important;
}
body.classic-mode .alert-box.danger {
    background: rgba(185, 28, 28, 0.07) !important;
    border-color: #b91c1c !important;
    color: #b91c1c !important;
}

/* Texte secondaire en mode classique */
body.classic-mode .section-subtitle,
body.classic-mode .stage-label,
body.classic-mode .severity-label,
body.classic-mode .survival-label,
body.classic-mode .stage-desc {
    color: #4a5568 !important;
}
body.classic-mode .radio-content,
body.classic-mode .item-label,
body.classic-mode .criteria-label,
body.classic-mode .result-content,
body.classic-mode .bilan-content {
    color: #2d3748 !important;
}
body.classic-mode .rec-card-content {
    color: #2d3748 !important;
}
body.classic-mode .sources p,
body.classic-mode .sources-survival {
    color: #6a7a90 !important;
}

/* ---- Références (page-refs) ---- */
body.classic-mode .page-refs {
    border-top-color: rgba(44, 82, 130, 0.15) !important;
}
body.classic-mode .page-refs h2 {
    color: #9aa8bb !important;
}
body.classic-mode .page-refs li {
    color: #7a8a9e !important;
}