/* ============================================================ */
/* CSS spécifique à svt_ressources.php                        */
/* ============================================================ */

/* ============ RESET & BASE ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background:#dbe1e8; color:#1e293b; font-size:14px; }
a { color:#2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }

/* ============ MESSAGES ============ */
.msg-ok {
    background:#d1fae5; border-left:4px solid #10b981; color:#065f46;
    padding:10px 16px; margin:12px 24px; border-radius:4px;
}
.msg-erreur {
    background:#fee2e2; border-left:4px solid #ef4444; color:#991b1b;
    padding:10px 16px; margin:12px 24px; border-radius:4px;
}
/* Placeholder "—" pour une valeur non renseignée (durée, difficulté, thème) */
.valeur-vide { color:#cbd5e1; }
/* Toast dynamique (masquage, etc.) */
#toast-notif {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#1e293b; color:#fff; padding:11px 20px; border-radius:8px;
    font-size:13px; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,0.25);
    opacity:0; pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
    z-index:9999; white-space:nowrap; max-width:90vw; text-align:center;
}
#toast-notif.visible {
    opacity:1; transform:translateX(-50%) translateY(0);
}

/* ============ BARRE DE RECHERCHE ============ */
#search-form {
    position:sticky; top:0; z-index:90;
}
#search-bar {
    background:#fff; border-bottom:1px solid #e2e8f0;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
#search-row1, #search-row2 {
    padding:12px 24px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
#search-row2 {
    background:#f8fafc; border-top:1px solid #f1f5f9;
    padding-top:10px; padding-bottom:10px;
    display:none; /* masquée par défaut, ouverte automatiquement par JS */
}
#search-row2.visible { display:flex; }
#search-bar input[type="text"] {
    border:1px solid #cbd5e1; border-radius:8px; padding:8px 14px;
    font-size:14px; width:240px; outline:none;
    transition: border-color 0.2s;
}
#search-bar input[type="text"]:focus { border-color:#3b82f6; }
#search-bar select {
    border:1px solid #cbd5e1; border-radius:8px; padding:8px 10px;
    font-size:13px; background:#fff; cursor:pointer; outline:none;
}
#search-bar select:focus { border-color:#3b82f6; }
.btn-more {
    background:#f1f5f9; color:#475569; border:1px solid #cbd5e1;
    width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:20px;
    font-weight:600; line-height:1; display:inline-flex;
    align-items:center; justify-content:center; flex-shrink:0;
}
.btn-more:hover { background:#e2e8f0; }
.btn-search {
    background:#3b82f6; color:#fff; border:none; padding:9px 18px;
    border-radius:8px; cursor:pointer; font-size:14px; font-weight:600;
}
.btn-search:hover { background:#2563eb; }
/* Bouton de secours (sans JS) — masqué, la recherche se soumet normalement via onchange */
.btn-search-fallback { display:none; }
.btn-plus, .btn-reset {
    padding:8px 14px; border-radius:8px; cursor:pointer;
    line-height:1; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background 0.15s; flex-shrink:0;
    font-size:13px; font-weight:600;
    border:1px solid;
    box-sizing:border-box;
}
.btn-plus { background:#16a34a; color:#fff; border-color:#16a34a; }
.btn-plus:hover { background:#15803d; }
.btn-reset { background:#ef4444; color:#fff; border-color:#ef4444; }
.btn-reset:hover { background:#dc2626; }
.btn-reset .reset-txt { display:none; }
.sep { color:#cbd5e1; font-size:20px; }
/* Groupe résultats + boutons de vue — poussé à droite */
.search-right {
    margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.vue-btn {
    padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px;
    border:1px solid #cbd5e1; background:#f1f5f9; color:#475569;
    font-weight:600; transition: all 0.2s; text-decoration:none !important;
}
.vue-btn.actif { background:#3b82f6; color:#fff; border-color:#3b82f6; }
.count-badge {
    background:#e0e7ff; color:#3730a3; padding:4px 10px; border-radius:20px;
    font-weight:700; font-size:13px;
}

/* ============ CONTENU PRINCIPAL ============ */
#main { padding:20px 24px; }

/* ============ TUILES ============ */
#grille {
    display:-ms-grid; display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:18px;
}
.tuile {
    background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.12);
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
    border:1px solid #d5dbe3; transition: box-shadow 0.2s, transform 0.2s;
    overflow:hidden;
    animation: fadeIn 0.25s ease both;
}
/* Tuile libre illimitée — fond vert pastel (feu vert = voie libre) */
.tuile.illimitee {
    background:#bbf7d0;
    border-color:#10b981;
    border-width:2px;
}
.tuile.illimitee:hover { box-shadow:0 6px 20px rgba(16,185,129,0.35); }
/* Tuile New — fond jaune pastel adouci */
.tuile.badge-new {
    background:#fef9c3;
    border-color:#facc15;
    border-width:2px;
}
.tuile.badge-new:hover { box-shadow:0 6px 20px rgba(250,204,21,0.35); }
/* Tuile Hot — fond rouge pastel */
.tuile.badge-hot {
    background:#fecaca;
    border-color:#ef4444;
    border-width:2px;
}
.tuile.badge-hot:hover { box-shadow:0 6px 20px rgba(239,68,68,0.35); }

/* Ruban diagonal "Accès libre" — vert (feu vert = voie libre) */
.tuile-clip .ruban-libre {
    position:absolute;
    top:10px; left:-24px;
    width:90px;
    background:#10b981;
    color:#fff;
    font-size:9.5px;
    font-weight:800;
    text-align:center;
    letter-spacing:0.5px;
    text-transform:uppercase;
    padding:4px 0;
    transform:rotate(-45deg);
    transform-origin:center;
    box-shadow:0 2px 6px rgba(16,185,129,0.45);
    pointer-events:none;
    z-index:4;
    line-height:1.2;
}
/* Rubans New (jaune) et Hot (rouge) */
.tuile-clip .ruban-new,
.tuile-clip .ruban-hot {
    position:absolute;
    top:10px; left:-24px;
    width:90px;
    font-size:9.5px;
    font-weight:800;
    text-align:center;
    letter-spacing:0.5px;
    text-transform:uppercase;
    padding:4px 0;
    transform:rotate(-45deg);
    transform-origin:center;
    pointer-events:none;
    z-index:4;
    line-height:1.2;
    color:#fff;
}
.tuile-clip .ruban-new {
    background:#eab308;
    box-shadow:0 2px 6px rgba(234,179,8,0.4);
}
.tuile-clip .ruban-hot {
    background:#ef4444;
    box-shadow:0 2px 6px rgba(239,68,68,0.45);
}
.tuile.verrouille-visiteur {
    opacity:0.45; filter:grayscale(60%); cursor:pointer;
    position:relative;
}
.tuile.verrouille-visiteur::after {
    content:'🔒';
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:28px; pointer-events:none; z-index:3;
}
.tuile-wrapper {
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:visible;
    border-radius:10px;
}
.tuile-clip {
    position:relative;
    overflow:hidden;
    border-radius:10px;
    flex:1;
    display:flex;
    flex-direction:column;
}
.tuile-wrapper .tuile {
    flex:1;
}
.tuile:hover { box-shadow:0 6px 20px rgba(0,0,0,0.12); transform:translateY(-2px); }
.tuile.lu { opacity:0.75; }
.tuile-header {
    padding:14px 16px 10px; border-bottom:1px solid #f1f5f9;
    display:flex; align-items:center; gap:10px;
}
.tuile-icone {
    width:57px; height:57px; border-radius:8px; display:flex;
    align-items:center; justify-content:center;
    font-size:20px; flex-shrink:0; color:#fff;
    align-self:center;
}
.tuile-icone-img {
    background:none !important; overflow:hidden; padding:0;
    width:57px; height:57px;
}
.tuile-icone-img img {
    width:100%; height:100%; object-fit:cover; border-radius:8px; display:block;
}
.tuile-titre-bloc { flex:1; min-width:0; }
.tuile-titre { font-size:15px; font-weight:700; color:#1e293b; line-height:1.3; margin-bottom:5px; }
.tuile-puces { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; gap:4px; margin-top:4px; }
.tuile-type {
    display:inline-block; font-size:11px; font-weight:700; padding:3px 9px;
    border-radius:20px; color:#fff;
}
.tuile-body { padding:12px 16px; flex:1; }
.tuile-desc { font-size:13px; color:#475569; line-height:1.5; margin-bottom:10px; }
.tuile-desc[data-tooltip] { cursor:help; }
.tuile-tags { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.tag {
    font-size:11px; padding:3px 9px; border-radius:20px;
    font-weight:600; color:#fff;
}
.tuile-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:#64748b; margin-bottom:6px; }
.tuile-meta span { display:flex; align-items:center; gap:3px; }
.stars { color:#f59e0b; font-size:13px; }
.tuile-footer {
    padding:10px 16px; background:#f8fafc; border-top:1px solid #f1f5f9;
    display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow:visible;
    position:relative;
}
/* Bouton ··· */
.btn-icon.more { background:#e2e8f0; color:#475569; font-size:18px; font-weight:700; letter-spacing:1px; }
.btn-icon.more:hover { background:#cbd5e1; color:#1e293b; }
/* Dropdown du ··· */
.tuile-dropdown {
    display:none; position:absolute; bottom:calc(100% + 4px); right:8px;
    background:#fff; border:1px solid #e2e8f0; border-radius:10px;
    box-shadow:0 4px 20px rgba(0,0,0,0.13);
    min-width:190px; z-index:500; overflow:hidden;
}
.tuile-dropdown.ouvert { display:block; }
/* Quand le dropdown est ouvert, lever les restrictions overflow sur les parents */
.tuile-clip:has(.tuile-dropdown.ouvert) { overflow:visible; }
.tuile:has(.tuile-dropdown.ouvert) { overflow:visible; z-index:50; }
.tdrop-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 14px; font-size:13px; font-weight:500; color:#1e293b;
    cursor:pointer; border:none; background:none; width:100%; text-align:left;
    text-decoration:none; transition:background 0.12s;
}
.tdrop-item:hover { background:#f8fafc; text-decoration:none; }
.tdrop-item .tdrop-ico { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.tdrop-item.actif { color:#7c3aed; font-weight:700; }
.tdrop-item.danger { color:#dc2626; }
.tdrop-item.danger:hover { background:#fef2f2; }
.tdrop-item.admin-item { color:#1d4ed8; }
.tdrop-item.admin-item:hover { background:#eff6ff; }
.tdrop-sep { height:1px; background:#f1f5f9; margin:3px 0; }
.btn-icon {
    background:#e2e8f0; border:none; cursor:pointer;
    font-size:16px; line-height:1;
    width:32px; height:32px; padding:0;
    border-radius:6px; transition:background 0.15s;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.btn-icon:hover { background:#cbd5e1; }
.btn-icon.favori       { background:rgba(251,146,60,1); color:#000; }
.btn-icon.favori:hover { background:rgba(194,97,27,1);  color:#fff; }
.favori-off, .favori-on { display:inline-flex; align-items:center; justify-content:center; }
/* Icônes SVG inline ($svg_coeur_*, $svg_oeil_* etc. — définies dans svt_init.php) */
.icone-inline { vertical-align: middle; display: block; }
.icone-bloc { display: block; }
.btn-icon.lu       { background:rgba(74,222,128,1); color:#000; outline:none; }
.btn-icon.lu:hover { background:rgba(34,197,94,1);  color:#fff; }
/* Rond CSS pur — taille fixe garantie par le btn-icon parent */
.btn-icon.lu { font-size:0; }
.btn-icon.lu::before {
    content:'';
    display:block;
    width:9px; height:9px;
    border-radius:50%;
    background:transparent;
    border:2px solid #166534;          /* lu = contour vert foncé sur fond vert clair */
}
.btn-icon.lu:hover::before {
    border-color:#fff;                 /* survol = contour blanc */
}
.btn-icon.lu.non-lu::before {
    background:#166534;                /* non lu = rond vert foncé plein */
    border:2px solid #166534;
}
.btn-icon.lu.non-lu:hover::before {
    background:#fff;                   /* survol = rond blanc plein */
    border-color:#fff;
}
.btn-icon.partager { background:rgba(245,158,11,1); color:#000; }
.btn-icon.partager:hover { background:rgba(180,108,0,1); color:#fff; }
.btn-icon.signaler { background:rgba(239,68,68,0.15); color:#dc2626; }
.btn-icon.signaler:hover { background:rgba(239,68,68,0.35); color:#991b1b; }
.btn-icon.corrige { background:rgba(167,107,255,0.9); color:#fff; text-decoration:none; }
.btn-icon.corrige:hover { background:rgba(147,87,235,1); color:#fff; text-decoration:none; }
.btn-icon.export-xml { background:#0369a1; color:#fff; text-decoration:none; }
.btn-icon.export-xml:hover { background:#0284c7; color:#fff; text-decoration:none; }
/* Tuile Fait — grisée comme les cartes parcours */
.tuile.fait {
    opacity: 0.55;
    filter: grayscale(30%);
}
.tuile.fait:hover { opacity: 1; filter: grayscale(0%); }
/* Ruban diagonal "Fait" — gris — z-index:5 pour passer au-dessus de New/Hot */
.tuile-clip .ruban-fait {
    position:absolute;
    top:10px; left:-24px;
    width:90px;
    background:#64748b;
    color:#fff;
    font-size:9.5px;
    font-weight:800;
    text-align:center;
    letter-spacing:0.5px;
    text-transform:uppercase;
    padding:4px 0;
    transform:rotate(-45deg);
    transform-origin:center;
    box-shadow:0 2px 6px rgba(100,116,139,0.45);
    pointer-events:none;
    z-index:5;
    line-height:1.2;
}
/* Tuile EXT — fond cyan pastel */
.tuile.badge-ext {
    background:#cffafe;
    border-color:#06b6d4;
    border-width:2px;
}
.tuile.badge-ext:hover { box-shadow:0 6px 20px rgba(6,182,212,0.3); }
/* Ruban diagonal "EXT" — cyan */
.tuile-clip .ruban-ext {
    position:absolute;
    top:10px; left:-24px;
    width:90px;
    background:#0891b2;
    color:#fff;
    font-size:9.5px;
    font-weight:800;
    text-align:center;
    letter-spacing:0.5px;
    text-transform:uppercase;
    padding:4px 0;
    transform:rotate(-45deg);
    transform-origin:center;
    box-shadow:0 2px 6px rgba(8,145,178,0.45);
    pointer-events:none;
    z-index:4;
    line-height:1.2;
}
.btn-icon.fait       { background:rgba(100,116,139,0.3); color:#1e293b; }
.btn-icon.fait:hover { background:rgba(100,116,139,0.6); color:#fff; }
.btn-icon.fait.fait-on { background:rgba(71,85,105,0.85); color:#fff; }
.btn-icon.masque:hover { background:rgba(109,40,217,0.75); color:#fff; }
.btn-icon.masque.masque-on { background:rgba(109,40,217,0.9); color:#fff; }
.btn-icon.telechargement { background:rgba(109,40,217,0.9); color:#fff; text-decoration:none; }
.btn-icon.telechargement:hover { background:rgba(88,28,180,1); color:#fff; text-decoration:none; }
.btn-icon.pdf-dl { background:rgba(196,147,255,0.9); color:#fff; text-decoration:none; }
.btn-icon.pdf-dl:hover { background:rgba(167,107,235,1); color:#fff; text-decoration:none; }
.btn-icon.modifiable { background:rgba(55,10,120,0.9); color:#fff; text-decoration:none; }
.btn-icon.modifiable:hover { background:rgba(40,5,90,1); color:#fff; text-decoration:none; }
.btn-icon.verrouille { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; opacity:0.7; }
.btn-icon.verrouille:hover { background:#e2e8f0; }
.btn-lien {
    font-size:17px; padding:5px 7px; border-radius:6px; font-weight:600;
    border:none; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center;
    line-height:1;
}
.btn-lien.primaire { background:#3b82f6; color:#fff; }
.btn-lien.primaire:hover { background:#2563eb; text-decoration:none; }
.btn-lien.secondaire { background:#e0f2fe; color:#0369a1; }
.btn-lien.secondaire:hover { background:#bae6fd; text-decoration:none; }
.btn-lien.danger { background:rgba(239,68,68,1); color:#000; width:32px; height:32px; padding:0; font-size:16px; flex-shrink:0; }
.btn-lien.danger:hover { background:rgba(185,28,28,1); color:#fff; text-decoration:none; }
.btn-lien.edit { background:rgba(59,130,246,1); color:#000; width:32px; height:32px; padding:0; font-size:16px; flex-shrink:0; }
.btn-lien.edit:hover { background:rgba(29,78,216,1); color:#fff; text-decoration:none; }
.spacer { flex:1; }

.lu-badge {
    font-size:10px; padding:2px 7px; border-radius:20px; font-weight:700;
    background:#d1fae5; color:#065f46;
}
.nonlu-badge {
    font-size:10px; padding:2px 7px; border-radius:20px; font-weight:700;
    background:#fee2e2; color:#991b1b;
}

/* ============ TABLEAU RESPONSIVE ============
   3 breakpoints : >900px (8 col) | 420–900px (6 col) | <420px (3 col)
   ============================================================ */

/* ---- Wrapper ---- */
#tableau-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- Table de base ---- */
#tableau-wrapper table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    min-width: 841px;
}

/* ---- En-têtes ---- */
#tableau-wrapper thead th {
    background: #1e293b;
    color: #fff;
    padding: 10px 8px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 2px solid #334155;
}
#tableau-wrapper thead th.sortable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
#tableau-wrapper thead th.sortable:hover { background: #334155; }
#tableau-wrapper thead th.sort-asc::after  { content:' ▲'; font-size:10px; opacity:0.8; }
#tableau-wrapper thead th.sort-desc::after { content:' ▼'; font-size:10px; opacity:0.8; }

/* Largeurs des colonnes (grand écran, table-layout:fixed)
   68 + 280 + 80 + 95 + 52 + 62 + 52 + 152 = 841px → scroll si < 841px */
.th-img     { width: 68px; }
.th-titre   { width: 280px; }
.th-type    { width: 80px; }
.th-niveau  { width: 95px; }
.th-theme   { width: 52px; }
.th-duree   { width: 62px; text-align: center !important; }
.th-diff    { width: 52px; text-align: center !important; }
.th-actions { width: 152px; }

/* ---- Lignes ---- */
#tableau-wrapper tbody tr { border-bottom: 1px solid #f1f5f9; cursor: pointer; }
#tableau-wrapper tbody tr:hover { background: #f8fafc; }
#tableau-wrapper tbody tr.fait { opacity: 0.55; filter: grayscale(30%); }
#tableau-wrapper tbody tr.fait:hover { opacity: 1; filter: grayscale(0%); }
#tableau-wrapper tbody td { padding: 8px 8px; font-size: 13px; vertical-align: middle; }

/* ---- Col 1 : image ---- */
.td-img { padding: 4px 6px; width: 52px; text-align: center; vertical-align: middle; position: relative; overflow: visible; }
.td-img-inner {
    width: 60px; height: 60px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; flex-shrink: 0; overflow: visible; margin: 0 auto;
    position: relative;
}
.td-img-inner img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }

/* ---- Col 2 : titre ---- */
.td-col-titre { overflow: hidden; padding: 6px 8px; vertical-align: middle; }
.td-titre { font-weight: 600; color: #1e293b; font-size: 13px; white-space: normal; word-break: break-word; }
.td-desc  { color: #475569; font-size: 12px; margin-top: 2px; white-space: normal; word-break: break-word; }
/* Grand écran : description complète, retour à la ligne naturel */
.td-desc-full  { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Résolution intermédiaire : description courte (80 car. PHP), 1 ligne */
.td-desc-court { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Labels mobiles — masqués par défaut */
.td-chips-mobile { display: none; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ---- Col 3 : type ---- */
.td-type { padding: 4px 6px; vertical-align: middle; white-space: nowrap; }
/* Grand écran : version longue visible, version courte masquée */
.chip-long       { display: inline-block; }
.chip.chip-court { display: none; }

/* ---- Col 4 : niveau ---- */
.td-niveau { padding: 4px 6px; vertical-align: middle; white-space: nowrap; }
.tag-long      { display: inline-block; }
.tag.tag-court { display: none; }

/* ---- Col 5 : thème ---- */
.td-theme { padding: 4px 6px; vertical-align: middle; white-space: nowrap; }

/* ---- Col 6 : durée ---- */
.td-duree { padding: 4px 6px; vertical-align: middle; font-size: 12px; color: #475569; text-align: center; white-space: nowrap; }
.td-duree-val { white-space: nowrap; }

/* ---- Col 7 : difficulté ---- */
.td-diff { padding: 4px 6px; vertical-align: middle; text-align: center; white-space: nowrap; }
.td-diff-val { font-size: 12px; white-space: nowrap; }

/* ---- Partagé : chip, pill, stars ---- */
.chip {
    display: inline-block; padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap;
}
.pill-theme {
    display: inline-block; padding: 2px 7px; border-radius: 20px;
    font-size: 11px; font-weight: 800; color: #fff;
    background: #78716c; white-space: nowrap; letter-spacing: 0.3px;
}
/* ---- Col 8 : actions (inchangée) ---- */
.td-actions { white-space: nowrap; vertical-align: middle; padding: 4px 4px; position: relative; }
.td-actions a, .td-actions button { vertical-align: middle; }
/* Dropdown dans le tableau — s'ouvre vers le bas */
.tuile-more-mobile { display:inline-flex; position:relative; vertical-align:middle; }
.td-actions .tuile-dropdown { bottom: auto; top: calc(100% + 4px); right: 0; }

/* ============ VIDE ============ */
.vide {
    text-align:center; padding:60px; color:#94a3b8;
    font-size:16px; width:100%;
}
.vide span { font-size:48px; display:block; margin-bottom:12px; }

/* ============ MODAL FORMULAIRE ============ */
/* Formulaire modal : CSS dans svt_ressources_form.php */
.form-table input[type="text"],
.form-table input[type="number"],
.form-table select,
.form-table textarea {
    width:100%; border:1px solid #cbd5e1; padding:8px 10px;
    font-size:13px; font-family:inherit; color:#1e293b; background:#fff; outline:none;
    -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
.form-table textarea { resize:vertical; min-height:65px; }
.form-table input:focus, .form-table select:focus, .form-table textarea:focus { border-color:#3b82f6; }
.form-hint { font-size:11px; color:#94a3b8; margin-top:3px; }
.form-actions { text-align:right; padding-top:14px; border-top:1px solid #f1f5f9; margin-top:10px; }
.btn-form {
    padding:10px 24px; font-size:14px; font-weight:600; border:none; cursor:pointer; margin-left:8px;
    -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
}
.btn-form.valider { background:#10b981; color:#fff; }
.btn-form.valider:hover { background:#059669; }
.btn-form.annuler { background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; }
.btn-form.annuler:hover { background:#e2e8f0; }

/* ============ MODAL PARTAGE ============ */
#modal-share {
    display:none; position:fixed; top:50%; left:50%;
    transform:translate(-50%,-50%); background:#fff;
    border-radius:12px; padding:24px; width:420px; max-width:94%;
    box-shadow:0 10px 40px rgba(0,0,0,0.2); z-index:9999;
}
#modal-share h3 { font-size:16px; margin-bottom:14px; }
#share-url { width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px 12px; font-size:13px; }
.btn-copy { margin-top:10px; background:#3b82f6; color:#fff; border:none; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:13px; }
#modal-share-close { float:right; background:none; border:none; font-size:20px; cursor:pointer; color:#64748b; }
/* Overlay semi-transparent commun aux modales (partage / signalement) */
.modal-overlay {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.4); z-index:9998;
}
/* Modale Partager — variante "vue ressources" (ids suffixés -r) */
#share-titre-r { font-size:13px; color:#64748b; margin-bottom:10px; }
#modal-share p { font-size:12px; color:#94a3b8; margin-bottom:6px; }
#share-url-r {
    width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:8px 12px;
    font-size:13px; box-sizing:border-box;
}
#copy-msg-r { color:#10b981; font-size:12px; margin-top:8px; display:none; }
.modal-share-qr-wrap { display:flex; flex-direction:column; align-items:center; padding:14px 0 4px; }
#qr-canvas-r { border-radius:8px; }
.modal-share-qr-hint { font-size:11px; color:#94a3b8; margin-top:6px; }

/* ============ MODALE SIGNALER UN PROBLÈME ============ */
#modal-signal {
    display:none; position:fixed; top:50%; left:50%;
    transform:translate(-50%,-50%); background:#fff;
    border-radius:12px; padding:24px; width:420px; max-width:94%;
    box-shadow:0 10px 40px rgba(0,0,0,0.2); z-index:9999;
}
#modal-signal-close { float:right; background:none; border:none; font-size:20px; cursor:pointer; color:#64748b; }
#modal-signal h3 { font-size:16px; margin-bottom:14px; }
#signal-titre { font-size:13px; color:#64748b; margin-bottom:10px; }
.modal-desc-petit { font-size:12px; color:#94a3b8; margin-bottom:10px; }
.modal-signal-options { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.modal-signal-option {
    display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;
    padding:6px 8px; border-radius:6px; border:1px solid #e2e8f0;
}
.modal-signal-option input[type="radio"] { accent-color:#ef4444; }
#signal-commentaire-r {
    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-btn-envoyer {
    margin-top:10px; background:#ef4444; color:#fff; border:none; padding:8px 16px;
    border-radius:8px; cursor:pointer; font-size:13px; font-weight:600;
}
#signal-msg-r { font-size:12px; margin-top:8px; display:none; }

/* ============ RESPONSIVE ============ */
/* ============ TABLETTE (jusqu'à 900px) ============ */
@media (max-width: 900px) {
    #grille { grid-template-columns:repeat(2, 1fr); }

    /* Barre de recherche : icônes seules pour gagner de la place */
    .vue-txt { display:none; }
    .sep { display:none; }
    .count-badge { display:none; }
    .vue-btn { padding:6px 10px; }
    .vue-btn, .btn-plus, .btn-reset {
        width:34px; height:34px; padding:0;
        display:inline-flex; align-items:center; justify-content:center;
        box-sizing:border-box;
    }
    #search-row1 { flex-wrap:nowrap; gap:6px; }
    #search-bar input[type="text"] { min-width:0; flex:1; max-width:180px; }
    #search-row1 select { min-width:0; flex:0 1 auto; max-width:140px; }
    #search-row2 { flex-wrap:nowrap; gap:6px; }
    /* Bandeau accès : icône seule sur tablette/mobile */
    .ba-txt { display:none; }
    .ba-btn-txt { display:none; }
    #bandeau-acces .ba-btn-principal  { padding:9px 12px; }
    #bandeau-acces .ba-btn-secondaire { padding:9px 12px; }
    #search-row2 select { flex:1; min-width:0; }
}

/* ============ TRÈS PETIT MOBILE (≤420px) — barre de recherche ============ */
/* Géré dans le bloc ≤380px ci-dessous */
@media (max-width: 600px) {
    /* Barre de recherche mobile — 2 lignes */
    #search-row1 { flex-wrap:wrap; padding:8px 12px; gap:6px; align-items:center; }
    #search-bar input[type="text"] {
        width:100%; min-width:0; flex:0 0 100%; box-sizing:border-box;
        max-width:none; order:1;
    }
    #search-niveau-scolaire { order:2; flex:1; min-width:0; max-width:none; }
    #search-f-theme { order:2; flex:1; min-width:0; max-width:none; }
    #search-row1 .btn-plus { order:3; }
    #search-row1 .btn-reset { order:3; }
    #search-row1 .search-right { order:3; margin-left:0 !important; }
    #search-row2 { flex-direction:column; align-items:stretch; padding:8px 12px; gap:7px; }
    #search-bar select { box-sizing:border-box; }

    /* Tuiles : 2 colonnes serrées */
    #grille { gap:10px; grid-template-columns:repeat(2, 1fr); }

    .tuile-header { padding:10px 10px 8px; gap:7px; }
    .tuile-icone { width:38px; height:38px; font-size:16px; }
    .tuile-titre { font-size:13px; }
    .tuile-body { padding:8px 10px; }
    .tuile-desc { font-size:12px; margin-bottom:7px; }
    .tuile-tags { gap:3px; margin-bottom:7px; }
    .tag { font-size:10px; padding:2px 6px; }
    .tag-theme { max-width:140px; }
    .tuile-meta { gap:6px; font-size:11px; }
    .tuile-footer { padding:8px 10px; gap:4px; flex-wrap:nowrap; }
    .btn-icon { font-size:14px; width:32px; height:32px; padding:0; }
    .btn-lien { font-size:11px; padding:4px 7px; }
    .btn-lien.edit,
    .btn-lien.danger { font-size:14px; padding:0; width:32px; height:32px; }

    /* Formulaire modal : CSS dans svt_ressources_form.php */
}

/* ============ TRÈS PETIT MOBILE (jusqu'à 360px) ============ */
@media (max-width: 360px) {
    #grille { grid-template-columns:1fr; }
}

/* ============ MOBILE ÉTROIT (≤ 420px) — footer tuiles en dropdown ============ */
/* Par défaut (>420px) : bouton ··· caché */
.tuile-btn-mobile { display:none !important; }

@media (max-width: 420px) {
    /* Icône plus petite pour laisser de l'air au titre/pills */
    .tuile-header    { gap:10px; padding:10px 10px 8px; }
    .tuile-icone     { width:34px; height:34px; font-size:14px; }
    .tuile-icone-img { width:34px; height:34px; }
    .tuile-titre     { font-size:12px; }
    .tuile-puces     { gap:3px; }
    /* Footer : masquer boutons secondaires, afficher ··· */
    .tuile-btn-large  { display:none !important; }
    .tuile-btn-mobile { display:inline-flex !important; }
    /* Dropdown mobile tuiles : s'ouvre vers le haut */
    .tuile-more-mobile .tuile-dropdown { bottom:calc(100% + 4px); right:0; top:auto; }
    /* Dropdown mobile tableau : s'ouvre vers le bas */
    .td-actions .tuile-more-mobile .tuile-dropdown { top:calc(100% + 4px); bottom:auto; right:0; }
}

/* ============ MODAL DÉTAIL : PETIT ÉCRAN (≤ 600px) ============ */
@media (max-width: 600px) {
    #detail-header {
        padding:8px 178px 8px 12px; /* 178px = espace pour les 4 boutons absolu */
        flex-wrap:wrap;
        align-items:flex-start;
        gap:6px;
    }
    #detail-image,
    #detail-image-icone {
        width:52px !important;
        height:52px !important;
        font-size:24px !important;
        align-self:flex-start;
        margin-top:2px;
    }
    #detail-header-text {
        flex:1;
        min-width:0;
    }
    /* Puces : une seule ligne, étiquettes abrégées côté JS */
    #detail-puces {
        flex-wrap:nowrap !important;
        overflow:hidden;
        gap:4px;
        margin-bottom:4px;
    }
    #detail-puces .tag-theme {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        flex-shrink:1;
        min-width:0;
    }
    #detail-puces .tuile-type,
    #detail-puces .tag:not(.tag-theme) { flex-shrink:0; }
    #detail-titre  { font-size:14px; margin-bottom:2px; }
    #detail-meta   { font-size:12px; gap:8px; margin-bottom:0; }
}

/* ============ TABLEAU — BREAKPOINT INTERMÉDIAIRE : 420px – 900px ============
   6 colonnes : image / titre+desc80 / type court / niveau court / thème / actions
   Masqué : durée, difficulté
   ============================================================ */
@media (max-width: 900px) {
    /* Layout fixe avec min-width pour déclencher le scroll plutôt que déborder */
    #tableau-wrapper table { table-layout: fixed; min-width: 480px; }

    /* Col titre : largeur fixe pour ne pas tout écraser */
    .th-titre { width: 200px; min-width: 160px; }

    /* Colonnes courtes resserrées */
    .th-type   { width: 70px;  min-width: 60px; }
    .th-niveau { width: 75px;  min-width: 65px; }
    .th-theme  { width: 52px;  min-width: 44px; }
    .th-actions { width: 148px; min-width: 128px; }

    /* Masquer durée et difficulté */
    .th-duree, .td-duree,
    .th-diff,  .td-diff   { display: none; }

    /* Type : version courte */
    .chip-long       { display: none; }
    .chip.chip-court { display: inline-block; }

    /* Niveau : version courte */
    .tag-long      { display: none; }
    .tag.tag-court { display: inline-block; }

    /* Description : tronquée 1 ligne (80 car. PHP + ellipsis CSS) */
    .td-desc-full  { display: none; }
    .td-desc-court { display: block; }

    /* Ajustement tailles */
    #tableau-wrapper thead th { padding: 7px 5px; font-size: 12px; }
    #tableau-wrapper tbody td { padding: 6px 5px; }
    .td-img-inner { width: 45px; height: 45px; font-size: 20px; }
    .th-img { width: 46px; }
}

/* ============ TABLEAU — BREAKPOINT ÉTROIT : < 420px ============
   3 colonnes : image / titre+labels compacts / actions
   ============================================================ */
@media (max-width: 420px) {
    /* Layout fixe + min-width pour scroll plutôt que débordement */
    #tableau-wrapper table { table-layout: fixed; min-width: 0; }

    /* Largeurs fixes des 3 colonnes visibles : image + titre + actions */
    .th-img     { width: 46px; min-width: 46px; }
    .th-titre   { width: 148px; min-width: 120px; }
    .th-actions { width: 130px; min-width: 110px; }

    /* Masquer type, niveau, thème */
    .th-type,   .td-type,
    .th-niveau, .td-niveau,
    .th-theme,  .td-theme  { display: none; }

    /* Description remplacée par les labels compacts */
    .td-desc-full,
    .td-desc-court { display: none; }

    /* Labels compacts dans la col titre */
    .td-chips-mobile { display: flex; }

    /* Image agrandie */
    .td-img-inner { width: 45px; height: 45px; font-size: 20px; }

    /* Paddings serrés */
    .td-actions { padding: 2px 2px; }
    #tableau-wrapper thead th { padding: 5px 3px; font-size: 10px; }
    #tableau-wrapper tbody td { padding: 4px 3px; }
    #tableau-wrapper .btn-icon { width: 26px; height: 26px; font-size: 12px; }
}

/* ≤420px : barre de recherche 2 lignes + bandeau accès texte court */
@media (max-width:420px) {
    /* Bandeau accès : texte court et centré sur écran étroit */
    .ba-titre-long  { display:none; }
    .ba-titre-court { display:inline !important; }
    .ba-disponibles { display:none; }
    #bandeau-acces.visiteur,
    #bandeau-acces.premium,
    #bandeau-acces.premiumplus {
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:8px;
        padding:10px 16px;
    }
    #bandeau-acces.visiteur .ba-droite,
    #bandeau-acces.premium .ba-droite,
    #bandeau-acces.premiumplus .ba-droite { justify-content:center; }
    /* ── Barre de recherche : 2 lignes ── */
    #search-row1 { flex-wrap:wrap !important; padding:6px 8px; gap:4px; align-items:center; justify-content:center; }
    /* Même sélecteur que le ≤600px pour gagner en spécificité */
    #search-bar input[type="text"] {
        width:100% !important;
        -webkit-box-flex:0; -ms-flex:0 0 100%; flex:0 0 100% !important;
        min-width:0; box-sizing:border-box;
        -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1;
    }
    /* Ligne 2 : niveau + thème + boutons centrés */
    #search-niveau-scolaire       { -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0; }
    #search-f-theme               { -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; -webkit-box-flex:1; -ms-flex:1 1 100%; flex:1 1 100%; min-width:0; }
    #search-row1 .btn-plus         { -webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; flex-shrink:0; }
    #search-row1 .btn-reset       { -webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; flex-shrink:0; }
    #search-row1 .search-right    { -webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; flex-shrink:0; margin-left:0 !important; }
    #search-row1 .count-badge     { display:none; }
}


/* ============ MODAL DÉTAIL : TRÈS PETIT ÉCRAN (≤ 420px) — Z Fold 5 externe ============ */
@media (max-width: 420px) {
    /* Boutons réduits, resserrés à droite */
    #detail-close-btn  { width:28px; height:28px; font-size:14px; top:8px; right:8px; }
    #detail-hide-btn   { width:28px; height:28px; font-size:12px; top:8px; right:40px; }
    #detail-fs-btn     { width:28px; height:28px; font-size:12px; top:8px; right:72px; }
    #detail-panel-btn  { width:28px; height:28px; font-size:12px; top:8px; right:104px; }
    /* Header : margin-top poussé sous les boutons par JS,
       padding-right annulé (les boutons sont DANS le margin-top, pas à côté du texte) */
    #detail-header {
        padding: 10px 12px 10px 12px !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    #detail-image,
    #detail-image-icone {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }
    #detail-header-text { flex: 1 !important; min-width: 0 !important; }
    #detail-titre { font-size: 13px !important; }
    #detail-meta  { font-size: 11px !important; gap: 6px !important; }
    #detail-puces { flex-wrap: nowrap !important; overflow: hidden !important; }
    /* Thème : bascule vers la version pill ("T1A") — la version complète
       finit systématiquement écrasée à 1-2 caractères sur ce palier, la
       pill reste lisible quelle que soit la place restante. Voir échanges
       du 05/09/2026. */
    #detail-puces .tag-theme-long  { display: none !important; }
    #detail-puces .tag-theme-court { display: inline-block !important; flex-shrink: 0; }
    /* Bandeau actions : permettre au dropdown "..." de dépasser vers le haut */
    #detail-actions-center { overflow: visible !important; }
}

/* ============ MODAL DÉTAIL RESSOURCE ============ */
#detail-overlay {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:#000; opacity:0.6; filter:alpha(opacity=60); z-index:1800;
}
#detail-container {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    z-index:1801;
}
#detail-modal {
    background:#fff;
    position:fixed; top:0; left:0; right:0; bottom:0;
    margin:0; border-radius:0; overflow:hidden;
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-orient:vertical; -webkit-box-direction:normal;
    -ms-flex-direction:column; flex-direction:column;
}
/* Boutons Précédent / Suivant */
/* Boutons Précédent / Suivant — intégrés dans #detail-actions */
.detail-nav-btn {
    background:rgba(6,182,212,0.85); border:none;
    width:34px; height:34px; border-radius:8px;
    cursor:pointer; font-size:17px; font-weight:700; color:#fff;
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
    -webkit-transition:background 0.15s; transition:background 0.15s;
    -webkit-box-flex:0; -ms-flex:none; flex:none; flex-shrink:0;
}
.detail-nav-btn:hover { background:rgba(8,145,178,1); color:#fff; }
.detail-nav-btn:disabled { opacity:0.25; cursor:not-allowed; }
/* Compteur de position parcours — inline dans #detail-actions */
#detail-nav-pos {
    font-size:12px; font-weight:700; color:#64748b;
    padding:0 2px; white-space:nowrap; flex-shrink:0; display:none;
}
/* ===== TIRETTE detail-header ===== */
#detail-tirette {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 0;           /* invisible par défaut : la poignée dépasse en bas */
    overflow: visible;
    pointer-events: none;
    flex-shrink: 0;
}
#detail-tirette-btn {
    pointer-events: all;
    background: #db9b38;
    border: none;
    border-radius: 0 0 10px 10px;
    padding: 2px 20px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    opacity: 0;                          /* cachée quand header visible */
    transform: translateY(0);
    transition: opacity 0.25s, transform 0.25s;
    white-space: nowrap;
}
#detail-tirette-btn:hover {
    background: #c8891f;
}
#detail-tirette-btn span {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1.8;
}
/* Quand le header est masqué, la tirette devient visible */
#detail-modal.header-haut #detail-tirette-btn {
    opacity: 1;
    transform: translateY(4px);
}
#detail-header {
    padding:10px 178px 10px 20px; border-bottom:1px solid #e2e8f0;
    flex-shrink:0; display:flex; align-items:center; gap:16px;
    transition: margin-top 0.35s cubic-bezier(0.4,0,0.2,1);
}
#detail-modal.header-haut #detail-header {
    margin-top: -200%;   /* repousser hors écran — JS ajuste la valeur exacte */
}
#detail-image {
    width:72px; height:72px; border-radius:8px; flex-shrink:0;
    overflow:hidden; display:none; align-self:flex-start;
    background:#f1f5f9;
}
#detail-image img {
    width:100%; height:100%; object-fit:cover; display:block;
}
#detail-image-icone {
    width:72px; height:72px; border-radius:8px; flex-shrink:0;
    display:none; align-self:flex-start; align-items:center; justify-content:center;
    font-size:32px; color:#fff;
}
#detail-header-text { flex:1; min-width:0; }
#detail-puces { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
#detail-titre {
    font-size:18px; font-weight:700; color:#1e293b; margin:0 0 4px 0;
}
#detail-meta { font-size:13px; color:#64748b; display:flex; gap:14px; flex-wrap:wrap; margin-bottom:0; }
/* #detail-desc supprimé du header — contenu déplacé dans le panneau latéral */
#detail-close-btn {
    position:absolute; top:10px; right:12px; background:rgba(239,68,68,0.15); border:none;
    color:#b91c1c; font-size:20px; cursor:pointer; line-height:1; z-index:10;
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition: background 0.15s, color 0.15s;
}
#detail-close-btn:hover { background:rgba(239,68,68,0.35); color:#7f1d1d; }
#detail-hide-btn {
    position:absolute; top:10px; right:52px; background:rgba(59,130,246,0.15); border:none;
    color:#1d4ed8; font-size:14px; cursor:pointer; line-height:1; z-index:10;
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition: background 0.15s, color 0.15s;
}
#detail-hide-btn:hover { background:rgba(59,130,246,0.32); color:#1e3a8a; }
#detail-fs-btn {
    position:absolute; top:10px; right:92px; background:rgba(16,185,129,0.15); border:none;
    color:#065f46; font-size:15px; cursor:pointer; line-height:1; z-index:10;
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition: background 0.15s, color 0.15s;
}
#detail-fs-btn:hover { background:rgba(16,185,129,0.32); color:#022c22; }
#detail-panel-btn {
    position:absolute; top:10px; right:132px; background:rgba(99,102,241,0.15); border:none;
    color:#4338ca; font-size:15px; cursor:pointer; line-height:1; z-index:10;
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition: background 0.15s, color 0.15s;
}
#detail-panel-btn:hover  { background:rgba(99,102,241,0.3); color:#312e81; }
#detail-panel-btn.ouvert { background:rgba(99,102,241,0.9); color:#fff; }

#detail-media {
    background:#000; overflow:hidden;
    display:none;
    -webkit-box-flex:1; -ms-flex:1; flex:1;
    min-height:0;
}
    color:#94a3b8; text-align:center; padding:40px; font-size:14px;
}
#detail-media .swf-fallback a { color:#3b82f6; }

/* Fond transparent en plein écran natif */
#detail-media:-webkit-full-screen { background:transparent !important; }
#detail-media:-moz-full-screen    { background:transparent !important; }
#detail-media:-ms-fullscreen      { background:transparent !important; }
#detail-media:fullscreen          { background:transparent !important; }

/* Le fond noir vient du ::backdrop du navigateur — on le supprime */
#detail-media::backdrop           { background:transparent !important; }
#detail-media::-webkit-backdrop   { background:transparent !important; }

/* Plein écran sur le container : masquer tout sauf #detail-media */
#detail-container.swf-fullscreen #detail-header,
#detail-container.swf-fullscreen #detail-actions,
#detail-container.swf-fullscreen #detail-header-bottom {
    display:none !important;
}
#detail-container.swf-fullscreen {
    display:flex; flex-direction:column;
    background:#fff;
}
#detail-container.swf-fullscreen #detail-media {
    flex:1; width:100%; height:100%;
}
#detail-container.swf-fullscreen::backdrop { background:#fff !important; }
#detail-container.swf-fullscreen::-webkit-backdrop { background:#fff !important; }
#detail-container.swf-fullscreen:-webkit-full-screen { background:#fff !important; }
#detail-container.swf-fullscreen:fullscreen { background:#fff !important; }


/* ============ PANNEAU LATÉRAL DESCRIPTION + SUGGESTIONS ============ */
#detail-panel {
    position:absolute; top:0; right:0; bottom:0;
    width:320px;
    background:#fff;
    border-left:1px solid #e2e8f0;
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index:15;
    overflow:hidden;
}
#detail-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px 10px 16px;
    border-bottom:1px solid #e2e8f0;
    background:#f8fafc;
    flex-shrink:0;
}
#detail-panel-title {
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.5px; color:#64748b;
}
#detail-panel-close {
    width:28px; height:28px; border:none; border-radius:6px;
    background:rgba(239,68,68,0.12); color:#b91c1c;
    font-size:18px; cursor:pointer; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s;
}
#detail-panel-close:hover { background:rgba(239,68,68,0.28); }
#detail-panel.ouvert {
    transform:translateX(0);
}
/* Sur PC : le panneau rétrécit le media (pas d'overlay) */
#detail-modal.panel-ouvert #detail-media {
    margin-right:320px;
    transition:margin-right 0.28s cubic-bezier(0.4,0,0.2,1);
}
#detail-panel-inner {
    overflow-y:auto;
    flex:1;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:20px;
}
.panel-section-title {
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.5px; color:#94a3b8;
    margin-bottom:10px;
}
#detail-panel-desc {
    font-size:13px; color:#475569; line-height:1.7;
}
#detail-panel-sugg {
    display:flex; flex-direction:column; gap:8px;
}
/* Mini-tuile suggestion */
.sugg-tuile {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:8px;
    background:#f8fafc; border:1px solid #e2e8f0;
    cursor:pointer; transition:background 0.15s, box-shadow 0.15s;
    text-decoration:none;
}
.sugg-tuile:hover { background:#f1f5f9; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.sugg-ico {
    width:36px; height:36px; border-radius:6px;
    flex-shrink:0; display:flex; align-items:center;
    justify-content:center; font-size:16px; color:#fff;
    overflow:hidden;
}
.sugg-ico img { width:100%; height:100%; object-fit:cover; display:block; }
.sugg-info { flex:1; min-width:0; }
.sugg-titre {
    font-size:12px; font-weight:600; color:#1e293b;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sugg-meta { font-size:11px; color:#94a3b8; margin-top:2px; }
.sugg-badge-manuel {
    font-size:9px; font-weight:700; padding:1px 5px; border-radius:10px;
    background:#e0e7ff; color:#4338ca; margin-left:4px;
}
/* ===== QR Code dans le panneau latéral ===== */
#detail-panel-qr-bloc {
    border-top:1px solid #f1f5f9;
    padding-top:4px;
    margin-top:4px;
}
#qr-canvas {
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    border:1px solid #f1f5f9;
}
/* Overlay mobile (drawer) */
#detail-panel-overlay {
    display:none;
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.4);
    z-index:14;
    transition:opacity 0.28s;
}
/* Mobile : drawer plein-largeur par-dessus le contenu */
@media (max-width:700px) {
    #detail-panel {
        width:85%;
        max-width:360px;
        box-shadow:-4px 0 24px rgba(0,0,0,0.18);
    }
    #detail-modal.panel-ouvert #detail-panel-overlay {
        display:block;
    }
    #detail-modal.panel-ouvert #detail-media {
        margin-right:0; /* pas de rétrécissement sur mobile */
    }
}

#detail-actions {
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-orient:horizontal; -webkit-box-direction:normal;
    -ms-flex-direction:row; flex-direction:row;
    gap:0; flex-wrap:nowrap; align-items:center; justify-content:space-between;
    padding:10px 12px; background:#fff; border-top:2px solid #f1f5f9;
    position:absolute; bottom:0; left:0; right:0; z-index:20;
    box-shadow:0 -2px 12px rgba(0,0,0,0.10); overflow:visible;
}
/* Dropdown "..." dans le bandeau modal — s'ouvre vers le haut */
#detail-actions .tuile-dropdown,
#detail-actions .dact-dropdown {
    bottom:calc(100% + 4px); top:auto; right:0; left:auto;
    z-index:100; min-width:200px;
}
/* Style complet du dropdown modal "..." */
.dact-dropdown {
    display:none; position:absolute; bottom:calc(100% + 4px); right:0; left:auto; top:auto;
    background:#fff; border:1px solid #e2e8f0; border-radius:10px;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    min-width:200px; z-index:100; overflow:hidden;
}
.dact-dropdown.ouvert { display:block; }
/* Wrapper relatif pour le bouton "..." dans le bandeau modal */
.dact-more-wrapper { position:relative; flex-shrink:0; }
/* Conteneur centré pour tous les boutons entre ← et → */
#detail-actions-center {
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
    gap:6px; -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto;
    min-width:0; flex-wrap:nowrap; overflow:hidden; padding:0 6px;
}
.dact-sep { width:1px; height:24px; background:#e2e8f0; flex-shrink:0; }
/* Les boutons du bandeau modal réutilisent .btn-icon */
.tuile { cursor:pointer; }

/* ============ MODAL LECTEUR VIDÉO ============ */


/* ============ MODE PARCOURS PÉDAGOGIQUE ============ */
#bandeau-parcours {
    background:linear-gradient(135deg,#0f172a,#1e3a5f);
    color:#fff; padding:10px 20px;
    display:-webkit-box; display:-ms-flexbox; display:flex;
    -webkit-box-align:center; -ms-flex-align:center; align-items:center;
    -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
    border-bottom:2px solid #3b82f6;
}
#bandeau-parcours .parcours-info { display:flex; align-items:center; gap:10px; font-size:13px; }
#bandeau-parcours .parcours-info strong { font-size:14px; }
#btn-organiser {
    background:linear-gradient(135deg,#3b82f6,#1d4ed8);
    color:#fff; border:none; padding:8px 16px; border-radius:8px;
    font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
    transition:opacity 0.2s;
}
#btn-organiser:hover { opacity:0.85; }
#btn-organiser.actif { background:linear-gradient(135deg,#10b981,#065f46); }

/* Panneau drag & drop */
#panel-parcours {
    display:none;
    background:#fff; border:2px solid #3b82f6; border-radius:12px;
    margin:16px 20px; padding:16px;
    box-shadow:0 4px 16px rgba(59,130,246,0.15);
}
#panel-parcours h3 { font-size:15px; margin-bottom:4px; color:#1e3a5f; }
#panel-parcours .parcours-hint { font-size:12px; color:#64748b; margin-bottom:14px; }
#liste-parcours { list-style:none; display:flex; flex-direction:column; gap:6px; }
.parcours-item {
    display:flex; align-items:center; gap:10px;
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px;
    padding:8px 12px; cursor:grab; user-select:none;
    transition:box-shadow 0.15s, background 0.15s;
}
.parcours-item:active { cursor:grabbing; }
.parcours-item.drag-over { background:#dbeafe; border-color:#3b82f6; box-shadow:0 0 0 2px #93c5fd; }
.parcours-item.dragging  { opacity:0.4; }
.parcours-num {
    min-width:26px; height:26px; border-radius:50%;
    background:#3b82f6; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; flex-shrink:0;
}
.parcours-handle { font-size:18px; color:#94a3b8; flex-shrink:0; line-height:1; }
.parcours-label { flex:1; font-size:13px; font-weight:600; color:#1e293b; }
.parcours-type  { font-size:11px; color:#fff; padding:2px 8px; border-radius:20px; flex-shrink:0; }
#btn-sauver-parcours {
    margin-top:14px; background:linear-gradient(135deg,#10b981,#065f46);
    color:#fff; border:none; padding:10px 22px; border-radius:8px;
    font-size:14px; font-weight:700; cursor:pointer;
}
#btn-sauver-parcours:hover { opacity:0.88; }
#parcours-save-msg { font-size:12px; margin-top:8px; display:none; color:#10b981; font-weight:600; }

/* Badge numéro sur les tuiles en mode parcours — positionné sur .tuile-wrapper */
.tuile-wrapper .parcours-badge {
    position:absolute; top:-11px; left:-11px;
    width:28px; height:28px; border-radius:50%;
    background:#3b82f6; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; z-index:10;
    box-shadow:0 2px 8px rgba(59,130,246,0.55);
    pointer-events:none;
}
.tag-theme { background:#78716c; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; }
/* Par défaut (>420px) : version complète visible, version pill cachée —
   basculées uniquement sur le palier "Z Fold 5 externe" ci-dessous */
.tag-theme-court { display:none; }
/* Couleurs par thème — arc-en-ciel T1→T3 */
/* Thème 1 : rouges/oranges */
.tag-theme.th-1  { background:#ef4444; }
.tag-theme.th-1a { background:#f97316; }
.tag-theme.th-1b { background:#ea580c; }
/* Thème 2 : jaunes/verts */
.tag-theme.th-2  { background:#eab308; }
.tag-theme.th-2a { background:#84cc16; }
.tag-theme.th-2b { background:#65a30d; }
/* Thème 3 : bleus */
.tag-theme.th-3  { background:#3b82f6; }
.tag-theme.th-3a { background:#0ea5e9; }
.tag-theme.th-3b { background:#2563eb; }
.tag-theme.th-3c { background:#4f46e5; }
/* Thème 4 : violet */
.tag-theme.th-4  { background:#8b5cf6; }
/* Thème 5+ et BCPST : marron par défaut */
/* ============ TOOLTIP DESCRIPTION ============ */
#desc-tooltip {
    display:none; position:fixed; z-index:9999;
    max-width:320px; padding:8px 12px;
    background:#fffde7; color:#1e293b; border:1px solid #e0d48a;
    border-radius:6px; font-size:12px; line-height:1.5;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    white-space:pre-wrap; word-wrap:break-word;
    pointer-events:none;
}

/* ============ BADGES PREMIUM ============ */
.badge-premium {
    display:inline-block; font-size:10px; font-weight:700; padding:2px 7px;
    border-radius:20px; background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff; white-space:nowrap; vertical-align:middle;
}
.badge-premium-plus {
    display:inline-block; font-size:10px; font-weight:700; padding:2px 7px;
    border-radius:20px; background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    color:#fff; white-space:nowrap; vertical-align:middle;
}
.badge-ultra {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(74,35,90,0.12);
    color: #4a235a;
    border: 1px solid rgba(74,35,90,0.25);
}
/* Ressource réservée aux élèves rattachés à M. Pourcher (reserve_mes_eleves) —
   badge orthogonal à acces_requis, même famille visuelle que .badge-ultra */
.badge-mes-eleves {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(13,148,136,0.12);
    color: #0d9488;
    border: 1px solid rgba(13,148,136,0.25);
}
/* ============ ANIMATIONS ============ */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
/* ===== Bandeau accès limité ===== */
#bandeau-acces {
    position:fixed; bottom:0; left:0; right:0; z-index:2000;
    color:#fff; padding:14px 24px;
    display:flex;
    align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:nowrap;
    box-shadow:0 -4px 20px rgba(0,0,0,0.3);
    transition: margin-bottom 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s;
}
#bandeau-acces.masque {
    box-shadow: none;
}
/* Tirette basse bandeau accès - pastille centrée AU-DESSUS du bandeau */
#tirette-ba {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2001;
    height: 0;
    overflow: visible;
    pointer-events: none;
}
#tirette-ba-btn {
    pointer-events: all;
    border-radius: 12px 12px 0 0;
    padding: 5px 20px 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 -3px 8px rgba(0,0,0,0.2);
    transition: padding 0.2s;
    white-space: nowrap;
    background: linear-gradient(135deg,#1e293b,#0f172a);
}
#tirette-ba-btn:hover { padding-top: 9px; }
#tirette-ba-icone { font-size: 11px; color: #fff; line-height: 1; }
#tirette-ba-label {
    font-size: 11px; font-weight: 700; color: #fff;
    opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap;
    transition: opacity 0.2s, max-width 0.2s;
}
#tirette-ba-btn:hover #tirette-ba-label { opacity: 0.9; max-width: 100px; }
#bandeau-acces.visiteur  { background:linear-gradient(135deg,#1e293b,#0f172a); }
#bandeau-acces.premium   { background:linear-gradient(135deg,#4c1d95,#6d28d9); }
#bandeau-acces.premiumplus { background:linear-gradient(135deg,#3b0764,#6d28d9); }
#bandeau-acces .ba-gauche { display:flex;align-items:center;gap:12px; min-width:0; flex:1; }
#bandeau-acces .ba-droite { display:flex;gap:10px;flex-shrink:0; align-items:center; }
#bandeau-acces .ba-titre  { font-weight:700;font-size:14px; }
#bandeau-acces .ba-sous   { font-size:12px;opacity:0.75; }
.ba-icone { font-size:24px; }
/* Titre court réservé au tout petit écran (voir media query ci-dessous qui le réaffiche) */
.ba-titre-court { display:none; }
.ba-alerte-compteur { display:none; color:#fbbf24; font-weight:700; margin-left:6px; }
.ba-btn-principal svg, .ba-btn-secondaire svg { flex-shrink:0; }
#bandeau-acces .ba-btn-principal {
    display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
    align-items:center; gap:6px;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff; padding:9px 18px; border-radius:8px;
    font-weight:700; font-size:13px; text-decoration:none;
    white-space:nowrap; transition:opacity 0.15s;
}
#bandeau-acces .ba-btn-principal:hover { opacity:0.88; text-decoration:none; }
#bandeau-acces .ba-btn-secondaire {
    display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
    align-items:center; gap:6px;
    background:#10b981;
    color:#fff; padding:9px 18px; border-radius:8px;
    font-weight:600; font-size:13px; text-decoration:none;
    border:1px solid #059669;
    white-space:nowrap; transition:background 0.15s;
}
#bandeau-acces .ba-btn-secondaire:hover { background:#059669; text-decoration:none; }
#bandeau-acces .ba-btn-fermer {
    background:none;border:none;color:rgba(255,255,255,0.5);
    font-size:20px;cursor:pointer;padding:0 4px;line-height:1;
}
#compteur-vues {
    display:inline-block;background:rgba(255,255,255,0.15);
    border-radius:20px;padding:1px 10px;
    font-weight:700;font-size:13px;margin:0 2px;transition:background 0.3s;
}

/* ============ BULLE LU / FAVORI ============ */
/* Positionnée en haut à droite de .tuile-clip */
.tuile-bulle {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.2s;
}
/* Cercle rouge plein — non lu, pas favori */
.bulle-nonlu {
    border-radius: 50%;
    background: #e53535;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(229,53,53,0.5);
}
/* Cœur rouge — favori (lu ou non lu), liseré blanc épousant la forme */
.bulle-favori {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    color: #e53535;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 2.5px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px rgba(229,53,53,0.3));
}
/* Variante tableau : sur .td-img-inner (position relative déjà là) */
.td-img-inner { position: relative; }
.bulle-tableau {
    top: 3px;
    right: 3px;
    width: 11px;
    height: 11px;
}
.bulle-tableau.bulle-nonlu { border-width: 1px; }
.bulle-tableau.bulle-favori { width: 18px; height: 18px; }

/* ---- Rubans tableau — étiquette horizontale collée en haut à gauche de l'image ---- */
.td-ruban {
    position: absolute;
    top: 4px;
    left: 0;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    padding: 2px 5px 2px 3px;
    border-radius: 0 3px 3px 0;
    pointer-events: none;
    z-index: 5;
    line-height: 1.3;
    white-space: nowrap;
}
.td-ruban-libre { background: #10b981; box-shadow: 0 1px 3px rgba(16,185,129,0.5); }
.td-ruban-fait  { background: #64748b; box-shadow: 0 1px 3px rgba(100,116,139,0.5); }
.td-ruban-new   { background: #eab308; box-shadow: 0 1px 3px rgba(234,179,8,0.5); }
.td-ruban-hot   { background: #ef4444; box-shadow: 0 1px 3px rgba(239,68,68,0.5); }
.td-ruban-ext   { background: #0891b2; box-shadow: 0 1px 3px rgba(8,145,178,0.5); }
/* Boutons admin directs (modifier / supprimer) — même style que .btn-lien.edit/.danger */
.btn-icon.btn-edit {
    background: rgba(59,130,246,1);
    color: #000;
    font-size: 14px;
    text-decoration: none;
}
.btn-icon.btn-edit:hover { background: rgba(29,78,216,1); color: #fff; text-decoration: none; }
.btn-icon.btn-del {
    background: rgba(239,68,68,1);
    color: #000;
    text-decoration: none;
    font-size: 13px;
}
.btn-icon.btn-del:hover { background: rgba(185,28,28,1); color: #fff; text-decoration: none; }
/* ============================================================
   PAGINATION — svt_ressources.php
   ============================================================ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 24px 0;
    padding: 12px 0;
}
.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #1e293b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.pagination .page-btn:hover {
    background: #e2e8f0;
}
.pagination .page-btn.actif {
    background: #db9b38; /* meme accent que les boutons de vue actifs (vue-btn.actif) */
    color: #fff;
}
.pagination .page-ellipsis {
    padding: 0 4px;
    color: #94a3b8;
}
.pagination .page-prec,
.pagination .page-suiv {
    font-weight: 500;
    padding: 0 14px;
}

@media (max-width: 480px) {
    .pagination .page-btn { min-width: 32px; height: 32px; font-size: 13px; padding: 0 6px; }
    .pagination .page-prec span,
    .pagination .page-suiv span { display: none; }
}