/* ============================================================
   svt_detail.css — Styles pour la page détail autonome
   Utilise des variables CSS pour les valeurs dynamiques PHP :
   --detail-page-height (définie dans le PHP inline)
   --actions-bottom (définie dans le PHP inline)
   ============================================================ */

/* ============ LAYOUT PAGE DÉTAIL ============ */

#detail-page {
    display: flex;
    flex-direction: column;
    height: var(--detail-page-height, calc(100vh - 52px));
    overflow: hidden;
    background: #fafaf8; /* fond neutre — identique aux modes fc/qcm — évite la zone blanche quand le header remonte */
}

/* 4 boutons en haut à droite — positionnement uniquement */
/* Le style des boutons (#detail-panel-btn, #detail-fs-btn, #detail-hide-btn, #detail-close-btn)
   est géré par css/svt_ressources.css */
#detail-btn-bar {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 50;
}
/* En mode page autonome, les boutons sont en position absolue dans le header
   au lieu de position fixe dans le modal */
#detail-panel-btn,
#detail-fs-btn,
#detail-hide-btn,
#detail-close-btn {
    position: static !important;
}

/* Header de la ressource */
#detail-header {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 24px 14px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
/* Quand le header est masqué : height et padding à 0, border supprimée */
#detail-header.header-masque {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    overflow: hidden !important;
}
/* Le btn-bar passe en fixed pour rester accessible quand le header est masqué */
#detail-header.header-masque #detail-btn-bar {
    position: fixed;
    top: 10px;
    right: 12px;
}
/* Quand les boutons sont dans le media (plein écran) */
#detail-btn-bar.fs-mode {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 9999;
}
/* Boutons switch HTML / PDF — sous les 4 boutons du header */
#detail-switch-bar {
    position: absolute; top: 50px; right: 12px;
    display: flex; gap: 6px; z-index: 50;
}
.dact-mode-btn {
    width: 34px; height: 34px; border-radius: 8px; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    background: rgba(219,155,56,0.15); color: #92400e;
}
.dact-mode-btn.actif { background: #db9b38; color: #fff; }
#detail-image {
    display: block !important;
    flex-shrink: 0;
}
#detail-image img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; }
#detail-image-icone {
    display: flex !important;
    width: 64px; height: 64px; border-radius: 12px;
    align-items: center; justify-content: center;
    font-size: 28px; color: #fff; flex-shrink: 0;
}
#detail-header-text { flex: 1; min-width: 0; display: block !important; }
#detail-titre { font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1.35; margin-bottom: 6px; display: block !important; }
#detail-puces { display: flex !important; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#detail-meta { font-size: 12px; color: #64748b; display: block !important; }

/* Zone media (vidéo, PDF, flashcards, QCM) */
#detail-media {
    flex: 1;
    display: none;
    background: #000 !important;
    position: relative !important;
    min-height: 0;
    overflow: hidden;
}
#detail-media.active {
    display: block !important;
}
#detail-media iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* SWF : l'objet Flash/Ruffle doit aussi remplir le conteneur */
#detail-media object {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}
/* Plein écran : le media prend tout l'écran */
#detail-media:fullscreen,
#detail-media:-webkit-full-screen,
#detail-media:-moz-full-screen {
    background: #000;
    width: 100vw;
    height: 100vh;
}
#detail-media:fullscreen iframe,
#detail-media:-webkit-full-screen iframe,
#detail-media:-moz-full-screen iframe {
    position: static;
    width: 100%;
    height: 100%;
}
/* PDF : masquer la barre d'outils pdf2flip en rognant le bas */
#detail-media.pdf-mode {
    overflow: hidden;
}
#detail-media.pdf-mode iframe {
    /* Position et dimensions — s'applique aussi à l'iframe créée dynamiquement par JS
       (qui ne pose plus de style inline height, pour que ce CSS reste maître). */
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    /* +52px : la toolbar pdf2flip (fixée en bas de l'iframe) sort sous le bord
       inférieur de #detail-media (overflow:hidden) → invisible pour l'utilisateur. */
    height: calc(100% + 52px);
}
/* En plein écran, restaurer la barre pdf2flip */
#detail-media.pdf-mode:fullscreen iframe,
#detail-media.pdf-mode:-webkit-full-screen iframe,
#detail-media.pdf-mode:-moz-full-screen iframe {
    position: static;
    width: 100%;
    height: 100%;
}
/* FC-mode et QCM-mode : styles définis dans svt_ressources.css */

/* Bandeau d'actions — fixé en bas */
#detail-actions {
    position: fixed !important;
    bottom: var(--actions-bottom, 0px);
    left: 0;
    right: 0;
    z-index: 201;
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff !important;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow: visible !important;
}
#detail-actions-center {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    justify-content: center;
    overflow: visible !important;
}
/* Compteur parcours — forcer l'affichage */
#detail-nav-pos {
    display: inline-block !important;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}
/* Boutons navigation parcours — style page autonome */
.detail-nav-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    text-decoration: none;
}
.detail-nav-btn:hover:not([disabled]) { background: #e2e8f0 !important; text-decoration: none; }
.detail-nav-btn[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
.detail-nav-btn svg { stroke: #1e293b !important; }
.dact-sep {
    width: 1px;
    height: 22px;
    background: #e2e8f0;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Panneau latéral description + suggestions */
#detail-panel {
    position: fixed;
    top: 0; right: -380px;
    width: 360px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 200;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
#detail-panel.ouvert { right: 0; }
#detail-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700; font-size: 14px; color: #1e293b;
}
#detail-panel-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #94a3b8; }
#detail-panel-inner { flex: 1; overflow-y: auto; padding: 16px 18px; }
.panel-section-title { font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 10px; margin-top: 18px; }
.panel-section-title:first-child { margin-top: 0; }
/* Variante avec une action à droite (ex: bouton "Lire" sur la description) */
.panel-section-title.avec-action {
    display: flex; align-items: center; justify-content: space-between;
}
#detail-panel-desc { font-size: 13px; color: #475569; line-height: 1.6; }
/* Texte grisé (placeholder / message d'absence de contenu) */
.texte-vide { color: #94a3b8; }
.msg-vide-panel { font-size: 12px; color: #94a3b8; text-align: center; padding: 12px 0; }
.sugg-icone-img { overflow: hidden; }
.sugg-icone-img img { width: 100%; height: 100%; object-fit: cover; }
.panel-qr-wrap { display: flex; flex-direction: column; align-items: center; padding: 12px 0; }
#qr-canvas { border-radius: 8px; }
.panel-qr-hint { font-size: 11px; color: #94a3b8; margin-top: 8px; text-align: center; }

/* Bouton "Lire" — synthèse vocale de la description (état actif géré en JS
   dans edusvt_tts.js, qui surcharge border-color/color/background inline) */
.edusvt-tts-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: none;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.edusvt-tts-btn:hover {
    border-color: #db9b38;
    color: #92400e;
    background: rgba(219,155,56,0.06);
}
#detail-panel-overlay {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 199;
}
#detail-panel.ouvert ~ #detail-panel-overlay { display: block; }

/* Dropdown téléchargements — "téléporté" dans <body> en JS à l'ouverture
   (voir dactDlToggle dans svt_detail.php), position:left/right/bottom
   calculée dynamiquement là-bas, seul le style statique vit ici. */
.dact-dl-drop {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    min-width: 210px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 9999;
    padding: 4px 0;
}

/* ---- Boutons du bandeau d'actions ---- */
.btn-lien.taille-icone { width: 34px; height: 34px; padding: 0; font-size: 16px; flex-shrink: 0; }
.btn-icon.taille-15 { font-size: 15px; }
.btn-icon.timer { position: relative; font-size: 15px; min-width: 44px; gap: 3px; }
.dact-timer-label { font-size: 9px; font-weight: 800; color: #db9b38; line-height: 1; }
.btn-icon.avec-badge { position: relative; }
.dact-badge-count {
    position: absolute; top: -4px; right: -4px;
    color: #fff; border-radius: 50%; width: 14px; height: 14px;
    font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.dact-badge-count.exercices { background: #2563eb; }
.dact-badge-count.annexes   { background: #ea580c; }
.dact-dl-wrapper { position: relative; display: inline-block; }

/* ---- Items des dropdowns téléchargements / export QCM ----
   Remplace ~60 blocs inline quasi-identiques accumulés au fil des
   évolutions (abonnements -> rôles -> boutique Lemon Squeezy). ---- */
.dact-dl-item {
    display: flex; align-items: center; gap: 8px; padding: 9px 14px;
    font-size: 13px; color: #1e293b; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.dact-dl-item:hover { text-decoration: none; }
/* Survol — remplace l'ancien hack onmouseover/onmouseout en JS */
#dact-dl-drop a.dact-dl-item:hover { background: #f8fafc; }
.dact-dl-item.verrouille { color: #94a3b8; font-weight: 400; }
.dact-dl-item.desactive  { color: #94a3b8; font-weight: 400; cursor: default; }
.dact-dl-item.acheter    { background: #fff7ed; }
#dact-dl-drop a.dact-dl-item.acheter:hover { background: #fef3c7; }
.dact-dl-item.bundle {
    gap: 6px; padding: 6px 14px 9px; font-size: 11px; color: #7c3aed;
    font-weight: 400; white-space: normal; line-height: 1.3;
}
.dact-dl-icone { width: 20px; text-align: center; }

.dact-dl-badge { margin-left: auto; font-size: 10px; }
.dact-dl-badge.niveau-eleve  { color: #9b59b6; font-weight: 700; }
.dact-dl-badge.niveau-prof   { color: #7c3aed; font-weight: 700; }
.dact-dl-badge.achete        { color: #16a34a; font-weight: 700; }
.dact-dl-badge.quota         { color: #64748b; }
.dact-dl-badge.quota-atteint { color: #f59e0b; font-weight: 700; }
.dact-dl-badge.sur-demande   { color: #3b82f6; font-weight: 700; }
.dact-dl-badge.prix          { color: #d97706; font-weight: 700; }

/* Dropdown export QCM (admin) */
.dact-export-drop {
    display: none; position: absolute; bottom: calc(100% + 6px); right: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12); min-width: 180px; z-index: 999; padding: 0;
}
.dact-dl-item.export-xml          { color: #0369a1; }
.dact-dl-item.export-word         { color: #15803d; }
.dact-dl-item.export-word-corrige { color: #16a34a; }

/* Bandeau visiteur — fixé en bas de l'écran, hors du layout flex */
#detail-visiteur-bar {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 24px;
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    color: #fff !important;
    font-size: 12px;
}
#detail-visiteur-bar a {
    color: #fbbf24 !important;
    text-decoration: none;
    font-weight: 600;
}
/* Spacer flexible pour pousser le CTA à droite */
.vbar-spacer { flex: 1; }
/* Message d'urgence quota ("— Plus que X !") — masqué en très petit écran, voir media query ci-dessous */
.vbar-urgence { color: #fbbf24; font-weight: 700; }
/* CTA inscription : version courte masquée par défaut, affichée en très petit écran (voir media query ≤420px) */
.vbar-cta-short { display: none; }
/* Variante verte pour les ressources gratuites */
#detail-visiteur-bar.bar-free {
    background: linear-gradient(135deg, #065f46, #047857) !important;
}
#detail-visiteur-bar.bar-free a {
    color: #bbf7d0 !important;
}
/* Variante violette pour un compte Élève */
#detail-visiteur-bar.bar-eleve {
    background: linear-gradient(135deg, #4c1d95, #6d28d9) !important;
}
#detail-visiteur-bar.bar-eleve a {
    color: #ddd6fe !important;
}
/* Variante violette foncée pour un compte Enseignant */
#detail-visiteur-bar.bar-prof {
    background: linear-gradient(135deg, #3b0764, #6d28d9) !important;
}
#detail-visiteur-bar.bar-prof a {
    color: #ddd6fe !important;
}

/* Suggestion card */
.sugg-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
.sugg-card:hover { background: #f8fafc; text-decoration: none; }
.sugg-icone {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #fff; flex-shrink: 0;
}
.sugg-titre { font-size: 13px; font-weight: 600; color: #1e293b; }
.sugg-meta { font-size: 11px; color: #94a3b8; }

/* Quota corrigés PDF journalier */
.msg-quota-corrige {
    background: #fff7ed; border: 1px solid #fed7aa; color: #92400e;
    border-radius: 8px; padding: 10px 14px; font-size: 13px;
    margin: 8px 0; line-height: 1.5;
}
.msg-quota-corrige a { color: #c2410c; font-weight: 600; }
.btn-icon.quota-epuise { opacity: 0.6; cursor: not-allowed; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    #detail-header { padding: 12px 14px 10px; gap: 12px; }
    #detail-titre { font-size: 15px; }
    #detail-btn-bar { top: 6px; right: 8px; gap: 4px; }
    #detail-panel { width: 100%; right: -100%; }
    #detail-actions { padding: 6px 10px; gap: 4px; }
}

/* ---- Très petit écran (ZFold5 externe, écrans ≤ 420px) ---- */
@media (max-width: 420px) {

    /* 1. Boutons — plus petits et repositionnés pour ne pas mordre sur les puces */
    #detail-btn-bar {
        top: 8px;
        right: 8px;
        gap: 3px;
    }
    #detail-panel-btn,
    #detail-fs-btn,
    #detail-hide-btn,
    #detail-close-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        padding: 0 !important;
    }

    /* Décaler le texte du header vers la gauche pour dégager la zone des boutons */
    #detail-header-text {
        padding-right: 124px;
    }

    /* Puces type/niveau/thème — réduites pour tenir en largeur */
    #detail-puces .tuile-type,
    #detail-puces .tag,
    #detail-puces .tag-theme {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* Bandeau actions — scroll latéral pour voir tous les boutons */
    #detail-actions {
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none;        /* Firefox — scrollbar invisible */
        -ms-overflow-style: none;     /* IE/Edge */
    }
    #detail-actions::-webkit-scrollbar { display: none; } /* Chrome/Safari */

    /* Empêcher les boutons de rétrécir — ils gardent leur taille naturelle */
    #detail-actions > * { flex-shrink: 0; }

    /* Le centre ne doit plus être centré ni s'étirer : les boutons partent
       du bord gauche pour que le scroll commence bien au premier bouton */
    #detail-actions-center {
        justify-content: flex-start !important;
        flex: none !important;
    }

    /* 2. Bandeau visiteur — compact */
    #detail-visiteur-bar {
        padding: 5px 10px;
        gap: 6px;
        font-size: 11px;
    }

    /* Masquer le message d'urgence "— Plus que X !" */
    #detail-visiteur-bar .vbar-urgence {
        display: none !important;
    }

    /* Masquer le libellé long du CTA, afficher le court */
    .vbar-cta-long  { display: none !important; }
    .vbar-cta-short { display: inline !important; }

    /* Empêcher le lien CTA de passer à la ligne */
    #detail-visiteur-bar a { white-space: nowrap; }
}

/* ============================================================
   MIGRATION depuis svt_ressources.css
   Tous ces styles n'appartiennent qu'à svt_detail.php
   ============================================================ */

/* ---- Modes media FC et QCM ---- */
#detail-media.qcm-mode {
    background: #fafaf8 !important;
    overflow-y: auto;
    display: block !important;
    color: #1e293b;
    padding-bottom: 70px;
}
.qcm-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 28px 48px;
    background: #ffffff;
    min-height: 100%;
    box-sizing: border-box;
}
#detail-media.swf-mode {
    background: transparent;
    position: relative;
    padding-bottom: 56px;
}
#detail-media.microscope-mode { background: #f8fafc; }
#detail-media.sketchfab-mode  { background: #1a1a2e; }
#detail-media.quiziniere-mode { background: #fff; }

#detail-media.fc-mode {
    background: #fafaf8 !important;
    overflow-y: auto !important;
    overflow: auto !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 32px 20px;
    min-height: 0;
}
@media (max-width: 600px) {
    #detail-media.fc-mode {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 20px 12px;
    }
}

/* Conteneur carte + boutons latéraux "à revoir / maîtrisé" */
#fc-scene-wrap {
    position: relative;
    width: 100%;
    max-width: 600px;
}

/* Boutons ronds "à revoir / maîtrisé" — flanquent la carte façon carrousel
   au lieu de s'empiler dessous, pour ne jamais augmenter la hauteur du
   contenu (voir fcAjusterHauteurScene() dans svt_detail.php). */
.fc-side-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    z-index: 5;
    transition: transform 0.15s ease;
}
.fc-side-btn:hover  { transform: translateY(-50%) scale(1.08); }
.fc-side-btn:active { transform: translateY(-50%) scale(0.95); }
.fc-side-btn--revoir   { left: -16px;  background: rgba(239,68,68,0.92); }
.fc-side-btn--maitrise { right: -16px; background: rgba(16,185,129,0.92); }

@media (max-width: 600px) {
    /* padding horizontal de #detail-media.fc-mode réduit à 12px en mobile :
       on rétrécit légèrement la largeur de la carte pour garder de la place
       aux boutons débordants sans qu'ils sortent de l'écran. */
    #fc-scene-wrap {
        max-width: calc(100% - 56px);
        margin: 0 auto;
    }
    .fc-side-btn { width: 38px; height: 38px; font-size: 15px; }
    .fc-side-btn--revoir   { left: -12px; }
    .fc-side-btn--maitrise { right: -12px; }
}

/* Bouton partager flashcard */
.fc-share-btn {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    background: rgba(245,158,11,1); color: #000;
    border: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px;
    font-size: 15px; font-weight: 700;
    transition: background 0.15s;
    vertical-align: middle;
    flex-shrink: 0;
}
.fc-share-btn:hover { background: rgba(180,108,0,1); color: #fff; }


/* ---- QCM — styles globaux ---- */
.qcm-progress     { height:6px;background:rgba(219,155,56,0.18);border-radius:3px;margin-bottom:18px;overflow:hidden; }
.qcm-progress-bar { height:100%;background:#db9b38;border-radius:3px;transition:width 0.4s; }
.qcm-question-txt { font-size:17px;font-weight:700;color:#1e293b;margin-bottom:14px;line-height:1.4; }

.qcm-indice-card {
    background:#fefce8;border:1.5px solid #fde68a;border-radius:12px;
    padding:12px 16px;margin-bottom:14px;cursor:pointer;
    transition:all 0.25s ease;overflow:hidden;
}
.qcm-indice-card:hover    { border-color:#f59e0b;background:#fef9c3; }
.qcm-indice-header        { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#92400e; }
.qcm-indice-chevron       { margin-left:auto;font-size:11px;transition:transform 0.25s;display:inline-block; }
.qcm-indice-body          { max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.25s;font-size:13px;color:#78350f; }
.qcm-indice-card.open .qcm-indice-body    { max-height:200px;padding-top:10px; }
.qcm-indice-card.open .qcm-indice-chevron { transform:rotate(180deg); }

.qcm-reponse {
    display:block;padding:12px 16px;
    background:rgba(219,155,56,0.07);border:1.5px solid rgba(219,155,56,0.25);border-radius:12px;
    margin-bottom:8px;cursor:pointer;
    transition:all 0.25s ease;overflow:hidden;
}
.qcm-reponse-header { display:flex;align-items:center;gap:10px;font-size:14px;color:#1e293b; }
.qcm-reponse-bullet {
    width:18px;height:18px;flex-shrink:0;
    border:2px solid rgba(219,155,56,0.5);border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    transition:all 0.2s;background:#fff;
    font-size:10px;color:transparent;
}
.qcm-reponse:hover                        { background:rgba(219,155,56,0.15);border-color:#db9b38; }
.qcm-reponse.selected .qcm-reponse-bullet { border-color:#16a34a;background:#16a34a;color:#fff; }
.qcm-reponse.selected                     { background:#dcfce7;border-color:#16a34a; }
.qcm-reponse-feedback { max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.25s;font-size:12px; }

.qcm-reponse.correct                        { background:#dcfce7;border-color:#16a34a;cursor:default; }
.qcm-reponse.correct .qcm-reponse-bullet    { border-color:#16a34a;background:#16a34a;color:#fff; }
.qcm-reponse.correct .qcm-reponse-feedback  { max-height:200px;padding-top:8px;color:#15803d; }
.qcm-reponse.wrong                          { background:#fee2e2;border-color:#ef4444;cursor:default; }
.qcm-reponse.wrong .qcm-reponse-bullet      { border-color:#ef4444;background:#ef4444;color:#fff; }
.qcm-reponse.wrong .qcm-reponse-feedback    { max-height:200px;padding-top:8px;color:#b91c1c; }
.qcm-reponse.missed                         { background:#fef9c3;border-color:#f59e0b;cursor:default; }
.qcm-reponse.missed .qcm-reponse-bullet     { border-color:#f59e0b;background:#f59e0b;color:#fff; }
.qcm-reponse.missed .qcm-reponse-feedback   { max-height:200px;padding-top:8px;color:#92400e; }

.qcm-explication-box  { background:#f0f9ff;border:1.5px solid #bae6fd;border-radius:12px;padding:12px 16px;font-size:13px;color:#0369a1;margin-top:12px;display:none; }
.qcm-feedback-box     { border-radius:12px;padding:10px 16px;font-size:14px;font-weight:600;margin-top:12px;display:none;text-align:center; }
.qcm-feedback-box.correct { background:#dcfce7;color:#15803d;border:1.5px solid #4ade80; }
.qcm-feedback-box.wrong   { background:#fee2e2;color:#b91c1c;border:1.5px solid #fca5a5; }

.qcm-btn-valider          { margin-top:16px;padding:11px 24px;background:#16a34a;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:100%;transition:background 0.2s; }
.qcm-btn-valider:hover    { background:#15803d; }
.qcm-btn-valider:disabled { background:#94a3b8;cursor:not-allowed; }
.qcm-btn-suivant          { margin-top:8px;padding:11px 24px;background:#db9b38;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:100%;display:none;transition:background 0.2s; }
.qcm-btn-suivant:hover    { background:#c4872a; }

.qcm-score-box   { text-align:center;padding:20px 0 10px; }
.qcm-score-num   { font-size:52px;font-weight:900;color:#16a34a; }
.qcm-score-label { font-size:16px;color:#475569;margin-top:4px; }

.qcm-btn-refaire { margin-top:14px;padding:10px 24px;background:#7c3aed;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;display:inline-block;margin-right:8px; }
.qcm-btn-export  { margin-top:14px;padding:10px 24px;background:#0369a1;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;display:inline-block;text-decoration:none; }
.qcm-ratees-list { text-align:left;margin-top:14px;font-size:13px;color:#64748b; }

.qcm-felicitations             { background:linear-gradient(135deg,#064e3b,#065f46);border-radius:12px;padding:16px 20px;margin:14px 0;color:#fff;text-align:center; }
.qcm-felicitations .qcm-feli-titre { font-size:22px;font-weight:900;margin-bottom:4px; }
.qcm-felicitations .qcm-feli-sous  { font-size:13px;opacity:0.85; }

.qcm-vote-section { margin-top:20px;padding-top:16px;border-top:1px solid #e2e8f0; }
.qcm-vote-titre   { font-size:14px;font-weight:600;color:#475569;margin-bottom:14px;text-align:center; }
.qcm-vote-track   { height:8px;border-radius:4px;margin:0 6px;background:linear-gradient(to right,#16a34a,#84cc16,#eab308,#f97316,#ef4444); }
.qcm-vote-zones   { display:flex;justify-content:space-between;margin-top:0;position:relative; }
.qcm-vote-zone    { flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:10px 4px 4px;border-radius:8px;transition:background 0.15s; }
.qcm-vote-zone:hover  { background:rgba(0,0,0,0.04); }
.qcm-vote-zone.actif  { background:rgba(0,0,0,0.06); }
.qcm-vote-dot         { width:20px;height:20px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.2);margin-top:-14px;transition:transform 0.2s; }
.qcm-vote-zone.actif .qcm-vote-dot { transform:scale(1.3);box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.qcm-vote-zone:hover .qcm-vote-dot { transform:scale(1.15); }
.qcm-vote-label { font-size:12px;font-weight:600;margin-top:6px; }
.qcm-vote-stats { font-size:11px;color:#94a3b8;margin-top:10px;text-align:center; }

.qcm-btn-reset       { margin-top:10px;padding:7px 16px;background:rgba(239,68,68,0.15);color:#fca5a5;border:1px solid rgba(239,68,68,0.3);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer; }
.qcm-btn-reset:hover { background:rgba(239,68,68,0.3); }

/* ============ FLASHCARDS — bloc HTML (#fc-contenu) ============ */
#fc-contenu { display: none; width: 100%; max-width: 600px; }
#fc-onglets {
    display: flex; justify-content: center; gap: 4px; margin-bottom: 14px;
    background: rgba(219,155,56,0.10); border-radius: 10px; padding: 3px;
    border: 1px solid rgba(219,155,56,0.18);
}
.fc-tab {
    flex: 1; padding: 8px 12px; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.fc-tab.verrouille { cursor: not-allowed; opacity: 0.45; }
#fc-progression { font-size: 13px; color: #64748b; text-align: center; margin-bottom: 6px; }
.fc-barre-fond { width: 100%; max-width: 600px; height: 6px; background: rgba(219,155,56,0.18); border-radius: 3px; margin-bottom: 12px; }
#fc-barre { height: 100%; background: #db9b38; border-radius: 3px; transition: width 0.4s; width: 0%; }

#fc-scene { width: 100%; max-width: 600px; height: 240px; perspective: 1200px; cursor: pointer; }
#fc-carte { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.5s; }
#fc-face-avant, #fc-face-arriere {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: #fff; border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px; gap: 12px;
}
#fc-face-avant   { box-shadow: 0 4px 24px rgba(219,155,56,0.15), 0 1px 6px rgba(0,0,0,0.08); border-left: 4px solid #db9b38; }
#fc-face-arriere { box-shadow: 0 4px 24px rgba(16,185,129,0.15), 0 1px 6px rgba(0,0,0,0.08); border-left: 4px solid #10b981; transform: rotateY(180deg); }
#fc-label-avant, #fc-label-arriere { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#fc-label-avant   { color: #db9b38; }
#fc-label-arriere { color: #10b981; }
#fc-img-avant, #fc-img-arriere { display: none; max-height: 110px; max-width: 100%; border-radius: 8px; object-fit: contain; }
#fc-texte-avant, #fc-texte-arriere { font-size: 18px; font-weight: 600; color: #1e293b; text-align: center; line-height: 1.5; }
.fc-hint-retourner { font-size: 12px; color: #94a3b8; margin-top: 8px; }

#fc-actions { display: none; }

/* ---- Récitation ---- */
#fc-recitation { display: none; width: 100%; max-width: 600px; flex-direction: column; box-sizing: border-box; }
#fc-rec-terme {
    background: #fff; border-radius: 18px; box-shadow: 0 4px 24px rgba(219,155,56,0.15);
    border-left: 4px solid #db9b38; padding: 16px 20px; margin-bottom: 10px; flex-shrink: 0;
}
.fc-rec-consigne { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #db9b38; margin-bottom: 6px; }
#fc-rec-terme-txt { font-size: 20px; font-weight: 700; color: #1e293b; text-align: center; }
#fc-rec-textarea {
    flex: 1; min-height: 80px; width: 100%; border: 1.5px solid #e2e8f0; border-radius: 12px;
    padding: 12px; font-size: 13px; resize: none; box-sizing: border-box; font-family: inherit;
    line-height: 1.7; margin-bottom: 6px;
}
.fc-rec-footer { flex-shrink: 0; }
.fc-rec-compteur-wrap { text-align: right; font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
#fc-rec-btn-valider-wrap { text-align: center; }
#fc-rec-btn-valider {
    background: #4f46e5; color: #fff; border: none; border-radius: 10px;
    padding: 10px 28px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%;
}
#fc-rec-feedback { display: none; }

/* ---- Navigation cartes ---- */
#fc-nav { display: flex; gap: 12px; margin-top: 8px; align-items: center; justify-content: center; }
#fc-btn-prec, #fc-btn-suiv {
    background: #db9b38; border: none; color: #fff; height: 34px; padding: 0 16px;
    border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#fc-compteur { color: #64748b; font-size: 13px; display: flex; align-items: center; gap: 4px; }

/* ---- Félicitations (lot terminé) ---- */
#fc-felicitations {
    display: none; width: 100%; max-width: 600px; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center;
}
.fc-feli-emoji { font-size: 64px; }
.fc-feli-titre-principal { font-size: 22px; font-weight: 800; color: #1e293b; }
#fc-felicitations-txt { font-size: 14px; color: #64748b; }
.fc-feli-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.fc-feli-btn { padding: 12px 24px; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.fc-feli-btn.reinit { background: #ef4444; color: #fff; }
.fc-feli-btn.fermer { background: #e2e8f0; color: #1e293b; }

/* ============ MODALES PARTAGE / SIGNALER — compléments spécifiques
   à svt_detail.php (le reste des règles vit dans svt_ressources.css,
   chargé sur cette page aussi : #modal-share, .modal-overlay,
   #modal-signal, .modal-signal-option, etc.) ============ */
#share-titre { font-size: 13px; color: #64748b; margin-bottom: 10px; }
#copy-msg { color: #10b981; font-size: 12px; margin-top: 8px; display: none; }
#qr-canvas-share { border-radius: 8px; }
#signal-commentaire {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px;
    font-size: 13px; resize: vertical; min-height: 60px; box-sizing: border-box; font-family: inherit;
}
#signal-msg { font-size: 12px; margin-top: 8px; display: none; }

/* ============ MODALES LISTES (exercices / annexes) + PAYHIP ============ */
.liste-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 900; }
.liste-modal { display: none; position: fixed; inset: 0; z-index: 901; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.liste-modal-panel {
    background: #fff; border-radius: 14px; width: 100%; max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18); overflow: hidden;
}
.liste-modal-panel.payhip { max-width: 620px; height: 85vh; display: flex; flex-direction: column; }
.liste-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; }
.liste-modal-header.payhip { padding: 14px 20px; flex-shrink: 0; }
.liste-modal-titre { font-size: 15px; font-weight: 800; color: #1e293b; }
.liste-modal-soustitre { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.liste-modal-close { background: none; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; }
.liste-modal-close.payhip { font-size: 22px; line-height: 1; }
.liste-modal-body { padding: 12px; max-height: 400px; overflow-y: auto; }

.liste-modal-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-radius: 10px; cursor: pointer; transition: background .1s; margin-bottom: 4px;
    text-decoration: none; color: inherit;
}
.liste-modal-item:hover { text-decoration: none; }
#exo-list-modal .liste-modal-item:hover { background: #f8fafc; }
#ann-list-modal .liste-modal-item:hover { background: #fff7ed; }
.liste-modal-item-icone {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.liste-modal-item-icone.annexe { background: #fed7aa; }
.liste-modal-item-corps { flex: 1; min-width: 0; }
.liste-modal-item-titre { font-size: 13px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-modal-item-type-label { font-weight: 600; }
.liste-modal-item-ext { color: #ea580c; font-weight: 600; }

#payhip-embed-zone { flex: 1; overflow: hidden; }

/* Icônes SVG inline (favori / masqué) — cœur et œil */
.icone-inline { vertical-align: middle; display: block; }

/* Page d'état vide (ressource introuvable / accès refusé) */
.page-vide { text-align: center; padding: 80px 20px; color: #94a3b8; }
.page-vide-icone { font-size: 64px; margin-bottom: 16px; }
.page-vide-titre { font-size: 18px; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
.page-vide-texte { font-size: 14px; margin-bottom: 24px; }
.page-vide-lien { color: #2563eb; }
.page-vide-lien.souligne { font-weight: 600; text-decoration: underline; }
.page-vide-lien.petit { font-size: 13px; }