/*
 * Arc_Prod — core.css
 * Fichier: public_html/assets/xhelpers/css/modules/core.css
 * Rôle : styles partagés pour les 6 modules de contenu — en-têtes, filtres, cartes, pagination,
 *       en-têtes de page, typographie de contenu, badges de catégorie.
 * Portée: body.arcprod-tenant :is(.tutorials-, .faq-, .videos-, .resources-,
 *        .glossary-, .guides-page-content)
 * Ordre de chargement: chargé conditionnellement selon $currentAction (modules de contenu)
 */

/* alias de portée (raccourci) */
/* scope_6 = :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
                  .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content) */

/* ══════════════════════════════════════════════════════════════════════
   §1 — Conteneur
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content) .container {
    max-width: 1280px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §2 — En-tête de module (style Apple iOS 18 épuré)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-header-custom, .faq-header, .video-header-custom, .resource-header-custom,
        .glossary-header-custom, .guide-header-custom) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 0 1.5rem !important;
    margin: 0 0 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    overflow: visible !important;
    min-height: 0 !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-header-custom, .faq-header, .video-header-custom, .resource-header-custom,
        .glossary-header-custom, .guide-header-custom)::before,
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-header-custom, .faq-header, .video-header-custom, .resource-header-custom,
        .glossary-header-custom, .guide-header-custom)::after {
    content: none !important;
}

/* Conteneur de titre */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-title-container, .resource-title-container, .glossary-title-container,
        .guide-title-container, .video-title-container) {
    flex-shrink: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
}

/* Titre du module */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-title, .video-title, .resource-title, .glossary-title, .guide-title) {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    text-align: left !important;
    letter-spacing: -0.02em !important;
}

/* Icône du module */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-icon, .video-icon, .resource-icon, .glossary-icon, .guide-icon) {
    color: var(--text-secondary) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Sous-titre : masqué */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-subtitle, .video-subtitle, .resource-subtitle, .glossary-subtitle, .guide-subtitle) {
    display: none !important;
}

/* Ligne d'outils de l'en-tête */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .module-header-tools {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §3 — Champ de recherche (minimal inline Apple)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .search-box-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: unset !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .search-box-container .search-icon {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .search-box-container input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    color: var(--text-primary) !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .search-box-container input::placeholder {
    color: var(--text-tertiary) !important;
}

/* Champs de recherche pleine largeur (barre dédiée) */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-search, .search-input, .resource-search, .glossary-search, .guide-search) {
    min-height: 40px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-search, .search-input, .resource-search, .glossary-search, .guide-search):focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent) !important;
    outline: none !important;
    background: var(--bg-primary) !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.tutorial-search, .search-input, .resource-search, .glossary-search, .guide-search)::placeholder {
    color: var(--text-tertiary) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §4 — Nav-tabs / puces de filtre (style pilule)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .nav-tabs-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 1.25rem !important;
    padding: 0 !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .nav-tabs {
    border-bottom: none !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
}

/* État par défaut des puces de filtre */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.nav-tabs .nav-link, .category-tab) {
    min-height: 32px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--border-color) !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.28rem 0.75rem !important;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transform: none !important;
}

/* Survol des puces de filtre */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.nav-tabs .nav-link, .category-tab):hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Puce de filtre sélectionnée/active */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.nav-tabs .nav-link.selected, .nav-tabs .nav-link.all-categories.active,
        .nav-tabs .nav-link.all-levels.active,
        .category-tab.active, .category-tab.selected,
        .guide-path-chip.is-active) {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary, #ffffff) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transform: none !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(.nav-tabs .nav-link.selected i, .nav-tabs .nav-link.all-categories.active i,
        .nav-tabs .nav-link.all-levels.active i,
        .category-tab.active i, .category-tab.selected i) {
    color: var(--text-on-primary, #ffffff) !important;
}

/* Couleur active par catégorie via --cat-active-bg injecté en PHP */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .nav-tabs .nav-link.selected:not(.all-categories):not(.all-levels):not(.difficulty-tab) {
    background: var(--cat-active-bg, var(--primary-color)) !important;
    border-color: var(--cat-active-bg, var(--primary-color)) !important;
}

/* Onglets de niveau : masque la case/indicateur, conserve uniquement licône */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .nav-tabs .nav-link.difficulty-tab
    :is(.difficulty-checkbox, .checkbox-indicator) {
    display: none !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .nav-tabs .nav-link.difficulty-tab {
    gap: 0.4rem !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .nav-tabs .nav-link.difficulty-tab.selected {
    box-shadow: none !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §5 — Content cards (shared layout)
   ══════════════════════════════════════════════════════════════════════ */

/* Base des cartes */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-card,
    .guides-page-content .guide-card,
    .resources-page-content .resource-card,
    .videos-page-content .video-card) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast) !important;
}

/* Corps de carte */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-card .card-body,
    .guides-page-content .guide-card .card-body,
    .resources-page-content .resource-card .card-body,
    .videos-page-content .video-card-body) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* Pousse le pied/métadonnées vers le bas */
body.arcprod-tenant :is(.guides-page-content .guide-progress-section,
    .resources-page-content .resource-meta-section,
    .videos-page-content .video-card-meta) {
    margin-top: auto !important;
}

/* Survol de carte */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-card:hover,
    .guides-page-content .guide-card:hover,
    .resources-page-content .resource-card:hover,
    .videos-page-content .video-card:hover) {
    box-shadow: var(--shadow-md) !important;
    border-color: var(--border-color) !important;
    transform: none !important;
}

/* Couleur + graisse du titre de carte — source de vérité structurelle (tous modules)
   2026-09-03 : la couleur passe de la MARQUE au TEXTE COURANT, comme base.css §AJ.
   Ce bloc devait suivre : sa liste `:is()` contient un argument termine par `a`
   (.resource-card .card-title a), donc elle pese (0,3,1) pour TOUS ses arguments
   et ce selecteur (0,4,2) battait tutorials.css (0,4,1) malgre l'ordre. */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-card .card-title,
    .guides-page-content .guide-card .card-title,
    .videos-page-content .video-card-title,
    .resources-page-content .resource-card .card-title a,
    .favorite-tutorials-page-content .tutorial-title,
    .favorite-guides-page-content .tutorial-title,
    .favorite-videos-page-content .video-title) {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Titre de carte limité à 2 lignes */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-card .card-title,
    .guides-page-content .guide-card .card-title,
    .videos-page-content .video-card-title,
    .resources-page-content .resource-card .card-title,
    .favorite-tutorials-page-content .tutorial-title,
    .favorite-guides-page-content .tutorial-title,
    .favorite-videos-page-content .video-title) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
}

/* Description de carte limitée à 2 lignes */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-card .card-summary,
    .guides-page-content .guide-card .card-summary,
    .videos-page-content .video-card-description,
    .resources-page-content .resource-card .card-summary,
    .favorite-tutorials-page-content .tutorial-description,
    .favorite-guides-page-content .tutorial-description,
    .favorite-videos-page-content .video-description) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0 !important;
}

/* Texte de question FAQ limité */
body.arcprod-tenant .faq-page-content .faq-question > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
}

/* Lien du titre de carte guide */
body.arcprod-tenant .guides-page-content .guide-card .card-title .guide-card-title-link {
    color: var(--brand-text) !important;
    text-decoration: none !important;
}

/* Carte : supprime la décoration ::before (bandeau visuel non souhaité). */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-card,
    .guides-page-content .guide-card,
    .resources-page-content .resource-card)::before {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §6 — Videos specific
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .videos-page-content .video-card-link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Hauteur homogène des miniatures */
body.arcprod-tenant :is(.videos-page-content, .favorite-videos-page-content) .video-thumbnail {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    padding-top: 0 !important;
    background: var(--bg-tertiary) !important;
    overflow: hidden !important;
}

body.arcprod-tenant :is(.videos-page-content, .favorite-videos-page-content) .video-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Ordre des badges de catégorie dans les cartes vidéos/favoris */
body.arcprod-tenant :is(.videos-page-content .video-categories-container,
    .favorite-videos-page-content .video-categories-wrapper,
    .favorite-tutorials-page-content .tutorial-categories-wrapper,
    .favorite-guides-page-content .tutorial-categories-wrapper) {
    order: -1 !important;
    margin-bottom: 0.4rem !important;
}

/* Utilitaires JS de filtre/pagination */
body.arcprod-tenant .videos-page-content .video-card.xh-filter-hidden,
body.arcprod-tenant .videos-page-content .video-card.xh-page-hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §7 — Category badges
   ══════════════════════════════════════════════════════════════════════ */

/* Tutoriels et guides : rangée de badges avec marge interne pour édition rapide */
body.arcprod-tenant :is(.tutorials-page-content .tutorial-categories,
    .guides-page-content .guide-categories) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    align-items: center !important;
    padding-right: 2rem !important;
    min-height: 28px !important;
}

body.arcprod-tenant :is(.tutorials-page-content .tutorial-categories .category-badge,
    .guides-page-content .guide-categories .category-badge) {
    margin: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}

/* Badge catégorie des tutoriels en pilule */
body.arcprod-tenant .tutorials-page-content .tutorial-categories .category-badge {
    border-radius: var(--radius-full) !important;
    padding: 0.18rem 0.5rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    filter: saturate(88%) brightness(0.96) !important;
}

/* Badges de débordement (+N) */
body.arcprod-tenant :is(.tutorials-page-content, .guides-page-content,
    .resources-page-content, .videos-page-content)
    .category-badge.category-badge-overflow,
body.arcprod-tenant .videos-page-content .video-category.category-badge-overflow {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    cursor: default !important;
    filter: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §8 — Admin/editor role badges (forum-compact style)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(.tutorials-page-content, .forum-home-content)
    :is(.admin-badge.forum-compact, .editor-badge.forum-compact),
body.arcprod-tenant .forum-thread-page-content :is(.admin-badge, .editor-badge) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    min-height: 24px !important;
    padding: 0.14rem 0.5rem !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body.arcprod-tenant :is(.tutorials-page-content .admin-badge.forum-compact,
    .forum-home-content .admin-badge.forum-compact,
    .forum-thread-page-content .admin-badge) {
    background: #e0e7ff !important;
    color: #3730a3 !important;
    border: 1px solid #c7d2fe !important;
}

body.arcprod-tenant :is(.tutorials-page-content .editor-badge.forum-compact,
    .forum-home-content .editor-badge.forum-compact,
    .forum-thread-page-content .editor-badge) {
    background: #ccfbf1 !important;
    color: #0f766e !important;
    border: 1px solid #99f6e4 !important;
}

/* Variantes sombres : indigo/teal ne sont exprimables par aucun token existant
   (couleurs de marque propres a ce badge, pas une surface/texte neutre) — bloc
   local autorise par la convention. Meme idiome que --success-light/--info-light
   de dark-mode.css (fond teinte translucide + texte de la meme teinte, clair).
   Contraste verifie : indigo 8,53:1, teal 11,5:1 sur la carte sombre #1c1c1e. */
html[data-theme="dark"] body.arcprod-tenant :is(.tutorials-page-content .admin-badge.forum-compact,
    .forum-home-content .admin-badge.forum-compact,
    .forum-thread-page-content .admin-badge) {
    background: rgba(129, 140, 248, 0.16) !important;
    color: #a5b4fc !important;
    border-color: rgba(129, 140, 248, 0.35) !important;
}

html[data-theme="dark"] body.arcprod-tenant :is(.tutorials-page-content .editor-badge.forum-compact,
    .forum-home-content .editor-badge.forum-compact,
    .forum-thread-page-content .editor-badge) {
    background: rgba(45, 212, 191, 0.16) !important;
    color: #5eead4 !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §9 — Quick edit button
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(
    .tutorials-page-content, .videos-page-content, .resources-page-content,
    .faq-page-content, .glossary-page-content,
    .tutorial-detail-container, .video-detail-page-content, .guide-detail-container
) .content-quick-edit {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 4px !important;
    color: var(--text-secondary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--transition-fast), color var(--transition-fast) !important;
    font-size: 1rem !important;
    text-decoration: none !important;
}

body.arcprod-tenant :is(
    .tutorials-page-content, .videos-page-content, .resources-page-content,
    .faq-page-content, .glossary-page-content,
    .tutorial-detail-container, .video-detail-page-content, .guide-detail-container
) .content-quick-edit:hover,
body.arcprod-tenant :is(
    .tutorials-page-content, .videos-page-content, .resources-page-content,
    .faq-page-content, .glossary-page-content,
    .tutorial-detail-container, .video-detail-page-content, .guide-detail-container
) .content-quick-edit:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    color: var(--brand-text) !important;
    outline: none !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §10 — Pagination DataTables (style Apple)
   ══════════════════════════════════════════════════════════════════════ */

/* Masque les contrôles natifs DataTables */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    :is(table.dataTable thead, .dataTables_length, .dataTables_filter) {
    display: none !important;
}

/* Conteneur de pagination */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.25rem !important;
}

/* Masque les boutons numérotés */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button:not(.previous):not(.next) {
    display: none !important;
}

/* Boutons Précédent/Suivant */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button.previous,
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button.next {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
    color: transparent !important;
    text-indent: -9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: background var(--transition-fast), border-color var(--transition-fast) !important;
    transform: none !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button.previous::after {
    content: "‹" !important;
    font-size: 1.4rem !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--text-secondary) !important;
    text-indent: 0 !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button.next::after {
    content: "›" !important;
    font-size: 1.4rem !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--text-secondary) !important;
    text-indent: 0 !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button.previous:hover,
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button.next:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Indicateur de page */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .page-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--primary-color) !important;
    color: var(--text-on-primary, #ffffff) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Texte d'information DataTables */
body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
    .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
    .dataTables_info {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: 0.5rem !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §11 — Detail pages (tutorial, video, guide)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(.tutorial-detail-container, .video-detail-container,
    .guide-detail-container) {
    max-width: 1100px !important;
}

body.arcprod-tenant :is(.tutorial-header, .guide-detail-container .guide-detail-header) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 1.5rem !important;
}

body.arcprod-tenant :is(.tutorial-content-wrapper,
    .guide-detail-container .guide-steps-nav,
    .guide-detail-container .guide-step-card) {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--bg-primary) !important;
}

body.arcprod-tenant :is(.tutorial-detail-container .share-btn,
    .video-detail-page-content .share-btn, .guide-detail-container .share-btn) {
    min-height: 34px !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    transition: color var(--transition-fast) !important;
}

body.arcprod-tenant :is(.tutorial-detail-container .share-btn:hover,
    .video-detail-page-content .share-btn:hover, .guide-detail-container .share-btn:hover) {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

body.arcprod-tenant :is(.tutorial-detail-container .back-button,
    .video-detail-page-content .btn-back, .guide-detail-container .back-button) {
    color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §12 — Responsive
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        :is(.tutorial-header-custom, .faq-header, .video-header-custom, .resource-header-custom,
            .glossary-header-custom, .guide-header-custom) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding: 0 0 1.25rem !important;
    }

    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        .module-header-tools {
        margin-left: 0 !important;
        width: 100% !important;
    }

    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        .search-box-container {
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        :is(.tutorial-title, .video-title, .resource-title, .glossary-title, .guide-title) {
        font-size: clamp(20px, 5.5vw, 26px) !important;
    }

    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        :is(.module-filters-container, .nav-tabs-container) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        :is(.module-filters-container, .nav-tabs-container)::-webkit-scrollbar {
        display: none !important;
    }

    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        .nav-tabs {
        flex-wrap: nowrap !important;
    }

    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content)
        #cards-row {
        --bs-gutter-x: 1rem !important;
        --bs-gutter-y: 1rem !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body.arcprod-tenant :is(.tutorials-page-content, .guides-page-content, .resources-page-content)
        #cards-row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.arcprod-tenant :is(.tutorials-page-content, .faq-page-content, .videos-page-content,
        .resources-page-content, .glossary-page-content, .guides-page-content, .calendar-page-content, .template-library-page-content, .survey-wizard-page-content, .practical-sheets-page-content) * {
        animation: none !important;
        transition: none !important;
    }
}

/* En-têtes module (FAQ/Tutoriels/Vidéos/Ressources) : affichage inline, sans carte */
body.arcprod-tenant :is(
    .faq-page-content .tutorial-header-custom,
    .tutorials-page-content .tutorial-header-custom,
    .videos-page-content .video-header-custom,
    .resources-page-content .resource-header-custom
) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.75rem 1rem !important;
    margin: 0 0 0.85rem !important;
    padding: 0.25rem 0 0.35rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.arcprod-tenant :is(
    .faq-page-content .tutorial-header-custom,
    .tutorials-page-content .tutorial-header-custom,
    .videos-page-content .video-header-custom,
    .resources-page-content .resource-header-custom
) :is(.tutorial-subtitle, .video-subtitle, .resource-subtitle) {
    margin: 0 !important;
    /* #64748b vs carte sombre #1c1c1e : 3,58:1, sous le seuil AA. --text-secondary
       donne 5,95:1. */
    color: var(--text-secondary) !important;
}

body.arcprod-tenant :is(
    .faq-page-content .tutorial-header-custom,
    .tutorials-page-content .tutorial-header-custom,
    .videos-page-content .video-header-custom,
    .resources-page-content .resource-header-custom
) .module-header-tools {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.65rem !important;
}

body.arcprod-tenant :is(
    .faq-page-content .tutorial-header-custom,
    .tutorials-page-content .tutorial-header-custom,
    .videos-page-content .video-header-custom,
    .resources-page-content .resource-header-custom
) .search-box-container {
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.arcprod-tenant :is(
    .faq-page-content .tutorial-header-custom,
    .tutorials-page-content .tutorial-header-custom,
    .videos-page-content .video-header-custom,
    .resources-page-content .resource-header-custom
) .module-header-primary-action {
    min-height: 42px !important;
    white-space: nowrap !important;
}

/* Filtres de catégorie directement sur la page (sans conteneur) */
body.arcprod-tenant :is(
    .faq-page-content .nav-tabs-container,
    .tutorials-page-content .nav-tabs-container,
    .videos-page-content .nav-tabs-container,
    .resources-page-content .nav-tabs-container,
    .guides-page-content .nav-tabs-container
) {
    margin: 0.9rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Supprime la ligne séparatrice bleue décorative sous les blocs en-tête/filtres */
body.arcprod-tenant :is(
    .faq-page-content .nav-tabs-container,
    .tutorials-page-content .nav-tabs-container,
    .videos-page-content .nav-tabs-container,
    .resources-page-content .nav-tabs-container,
    .glossary-page-content .nav-tabs-container,
    .guides-page-content .nav-tabs-container
)::before {
    display: none !important;
    content: none !important;
}

body.arcprod-tenant :is(
    .faq-page-content .nav-tabs-container,
    .tutorials-page-content .nav-tabs-container,
    .videos-page-content .nav-tabs-container,
    .resources-page-content .nav-tabs-container,
    .glossary-page-content .nav-tabs-container,
    .guides-page-content .nav-tabs-container
) .nav-tabs {
    border: 0 !important;
}

/* Libellés des groupes de filtres */
body.arcprod-tenant .module-filters-group-label {
    margin: 0.05rem 0 0.35rem !important;
    color: #9aa6b2 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

body.arcprod-tenant .module-filters-group-label.levels-label {
    margin-top: 0.55rem !important;
}

/* Hauteur de cartes uniforme + clamps partagés entre modules */
body.arcprod-tenant :is(
    .tutorials-page-content #cards-row,
    .guides-page-content #cards-row,
    .resources-page-content #cards-row
) {
    margin-top: 0 !important;
    align-items: stretch !important;
}

body.arcprod-tenant :is(
    .tutorials-page-content #cards-row > .tutorial-item,
    .guides-page-content #cards-row > .guide-item,
    .resources-page-content #cards-row > .resource-item
) {
    display: flex !important;
}

body.arcprod-tenant :is(
    .tutorials-page-content #cards-row > .tutorial-item > a,
    .guides-page-content #cards-row > .guide-item > a
) {
    display: block !important;
    width: 100% !important;
}

/* min-height et height: 100% supprimés — hauteur naturelle par contenu */

body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-card .card-title,
    .guides-page-content .guide-card .card-title,
    .resources-page-content .resource-card .card-title,
    .videos-page-content .video-card-title
) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-card .card-summary,
    .guides-page-content .guide-card .card-summary,
    .resources-page-content .resource-card .card-summary,
    .videos-page-content .video-card-description
) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Cartes ressources : grille stable avec largeur de carte fixe et alignement à gauche. */
body.arcprod-tenant .resources-page-content #cards-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    --bs-gutter-x: 1rem !important;
    --bs-gutter-y: 1rem !important;
}

body.arcprod-tenant .resources-page-content #cards-row > .resource-item {
    width: auto !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    body.arcprod-tenant .resources-page-content #cards-row > .resource-item {
        flex: 0 0 min(380px, 100%) !important;
        max-width: min(380px, 100%) !important;
    }
}

@media (min-width: 1200px) {
    body.arcprod-tenant .resources-page-content #cards-row > .resource-item {
        flex-basis: min(380px, 100%) !important;
    }
}

body.arcprod-tenant .resources-page-content .resource-card .card-body {
    display: flex !important;
    flex-direction: column !important;
}

body.arcprod-tenant .resources-page-content .resource-meta-section {
    margin-top: auto !important;
}

body.arcprod-tenant .resources-page-content .resource-card .card-title a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.arcprod-tenant .resources-page-content .resource-card .card-summary {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.arcprod-tenant .resources-page-content .resource-card-action .resource-open-btn {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}

body.arcprod-tenant .resources-page-content .resource-card-action .resource-open-btn:hover,
body.arcprod-tenant .resources-page-content .resource-card-action .resource-open-btn:focus-visible {
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.arcprod-tenant .resources-page-content .resource-card-action .resource-open-btn .resource-open-label {
    display: none !important;
}

body.arcprod-tenant .resources-page-content .resource-card-action .resource-open-btn i {
    margin: 0 !important;
    font-size: 1.38rem !important;
}

body.arcprod-tenant .resources-page-content .resource-card-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
}

body.arcprod-tenant .resources-page-content #cards-row > .resource-item {
    max-width: 380px !important;
    flex: 0 0 min(380px, 100%) !important;
}

@media (max-width: 991.98px) {
    body.arcprod-tenant :is(
        .faq-page-content .tutorial-header-custom,
        .tutorials-page-content .tutorial-header-custom,
        .videos-page-content .video-header-custom,
        .resources-page-content .resource-header-custom
    ) {
        align-items: flex-start !important;
    }

    body.arcprod-tenant :is(
        .faq-page-content .tutorial-header-custom,
        .tutorials-page-content .tutorial-header-custom,
        .videos-page-content .video-header-custom,
        .resources-page-content .resource-header-custom
    ) .module-header-tools {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    body.arcprod-tenant :is(
        .faq-page-content .tutorial-header-custom,
        .tutorials-page-content .tutorial-header-custom,
        .videos-page-content .video-header-custom,
        .resources-page-content .resource-header-custom
    ) .search-box-container {
        width: 100% !important;
        max-width: 300px !important;
    }

    body.arcprod-tenant .resources-page-content #cards-row > .resource-item {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* Stabilise les cartes : pas de chevauchement, pied épinglé en bas, blocs média cohérents. */
/* min-height vidéo supprimé — hauteur naturelle */

body.arcprod-tenant .videos-page-content .video-card-body {
    padding-top: 0.78rem !important;
    gap: 0 !important;
}

body.arcprod-tenant .videos-page-content .video-categories-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.32rem !important;
    margin-bottom: 0.52rem !important;
}

body.arcprod-tenant .videos-page-content .video-card-title {
    margin: 0 0 0.5rem 0 !important;
}

body.arcprod-tenant .videos-page-content .video-card-description {
    margin: 0 0 0.62rem 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 0 !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-card .tutorial-card-author {
    margin-top: auto !important;
    padding-top: 0.4rem !important;
    margin-bottom: 0 !important;
}

/* === LOUPE EXTENSIBLE === */
body.arcprod-tenant .module-header-tools .search-box-container {
    max-width: none !important; margin: 0 !important;
    display: flex !important; align-items: center !important;
    position: relative; overflow: visible;
}
body.arcprod-tenant .module-header-tools .search-box-container .search-icon {
    cursor: pointer; flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--text-secondary);
    transition: background 0.15s ease; z-index: 1;
}
body.arcprod-tenant .module-header-tools .search-box-container .search-icon:hover {
    background: var(--module-search-icon-hover-bg);
}
body.arcprod-tenant .module-header-tools .search-box-container input {
    width: 0 !important; padding: 0 !important;
    border: none !important; opacity: 0 !important;
    pointer-events: none !important; outline: none;
    transition: width 0.2s ease, opacity 0.15s ease, padding 0.15s ease;
}
body.arcprod-tenant .module-header-tools .search-box-container.search-open input {
    width: 200px !important; padding: 0.4rem 0.75rem !important;
    border: 1px solid #d1d1d6 !important; border-radius: 8px !important;
    opacity: 1 !important; pointer-events: auto !important;
    background: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE HEADERS — (fusionné depuis page-headers.css 2026-03-18)
   Typographie unifiée des titres de pages
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-title,
    .faq-page-content .faq-header h1,
    .videos-page-content .video-title,
    .resources-page-content .resource-title,
    .glossary-page-content .glossary-title
) {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--token-text-primary, #1d1d1f) !important;
    letter-spacing: 0 !important;
}
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-title > i:first-child,
    .faq-page-content .faq-header h1 > i:first-child,
    .videos-page-content .video-title > i:first-child,
    .resources-page-content .resource-title > i:first-child,
    .glossary-page-content .glossary-title > i:first-child
) {
    display: none !important;
}
body.arcprod-tenant :is(
    .tutorial-title,
    .video-title,
    .resource-title,
    .glossary-title,
    .stats-title,
    .thread-title,
    .global-search-title,
    .page-title,
    .xh-announcements-title
) {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--token-text-primary, #1d1d1f) !important;
    letter-spacing: 0 !important;
}
body.arcprod-tenant :is(
    .tutorial-title,
    .video-title,
    .resource-title,
    .glossary-title,
    .stats-title,
    .thread-title,
    .global-search-title,
    .page-title,
    .xh-announcements-title
) > i:first-child {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CONTENT TYPOGRAPHY — (fusionné depuis content-typography.css 2026-03-18)
   Apple Content Pass — cohérence typographique inter-modules
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-card .card-title,
    .tutorials-page-content .tutorial-card .card-title a
) {
    font-weight: 600 !important;
}
body.arcprod-tenant .tutorials-page-content .tutorial-card .card-title a:hover {
    text-decoration: none !important;
}
body.arcprod-tenant .videos-page-content .video-card-title,
body.arcprod-tenant .videos-page-content .video-card-title a {
    font-weight: 600 !important;
}
body.arcprod-tenant .videos-page-content .video-card:hover .video-card-title a {
    text-decoration: none !important;
}
body.arcprod-tenant .faq-page-content .faq-question > span {
    font-weight: 400 !important;
    font-size: 0.95rem !important;
}
body.arcprod-tenant .glossary-page-content .glossary-question .glossary-term-text {
    font-weight: 400 !important;
    font-size: 1rem !important;
}
body.arcprod-tenant .resources-page-content .resource-card .card-title,
body.arcprod-tenant .resources-page-content .resource-card .card-title a {
    font-weight: 600 !important;
    text-decoration: none !important;
}
body.arcprod-tenant .resources-page-content .resource-card .card-title a:hover {
    text-decoration: none !important;
}
body.arcprod-tenant .guides-page-content .guide-card .card-title,
body.arcprod-tenant .guides-page-content .guide-card .guide-card-title-link {
    font-weight: 600 !important;
    text-decoration: none !important;
}
body.arcprod-tenant .guides-page-content .guide-card .guide-card-title-link:hover {
    text-decoration: none !important;
}
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-card .card-summary,
    .videos-page-content .video-card-description,
    .resources-page-content .resource-description,
    .resources-page-content .resource-excerpt
) {
    /* #6b7280 vs carte sombre #1c1c1e : 3,52:1, sous le seuil AA. --text-secondary
       donne 5,95:1. */
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
}
body.arcprod-tenant :is(
    .tutorial-title,
    .video-title,
    .faq-title,
    .resource-title,
    .glossary-title,
    .guide-title
) {
    color: #1d1d1f !important;
    font-weight: 700 !important;
}
body.arcprod-tenant .module-filters-group-label,
body.arcprod-tenant :is(
    .tutorials-page-content,
    .videos-page-content,
    .faq-page-content,
    .resources-page-content,
    .glossary-page-content,
    .guides-page-content
) :is(.filter-group-label, .section-label, [class*="filter-label"]) {
    /* #86868b vs carte sombre #1c1c1e : 4,7:1, tout juste au-dessus du seuil AA.
       --text-secondary donne 5,95:1, marge plus confortable pour un petit texte. */
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CATEGORY BADGES — (fusionné depuis category-badges.css 2026-03-18)
   Pills de catégorie neutres Apple flat style
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-categories .category-badge,
    .guides-page-content .guide-categories .category-badge,
    .resources-page-content .resource-categories .category-badge,
    .videos-page-content .video-categories-container .video-category,
    .faq-page-content .faq-badges-wrapper .category-badge,
    .glossary-page-content .glossary-badges-wrapper .category-badge
) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.34rem !important;
    padding: 0.22rem 0.58rem !important;
    border-radius: 999px !important;
    background: var(--bg-tertiary, #f5f5f7) !important;
    color: var(--token-text-secondary, #444) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
}
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-categories .category-badge,
    .guides-page-content .guide-categories .category-badge,
    .resources-page-content .resource-categories .category-badge,
    .videos-page-content .video-categories-container .video-category,
    .faq-page-content .faq-badges-wrapper .category-badge,
    .glossary-page-content .glossary-badges-wrapper .category-badge
)::before {
    display: none !important;
    content: none !important;
}
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-categories .category-badge,
    .guides-page-content .guide-categories .category-badge,
    .resources-page-content .resource-categories .category-badge,
    .videos-page-content .video-categories-container .video-category,
    .faq-page-content .faq-badges-wrapper .category-badge,
    .glossary-page-content .glossary-badges-wrapper .category-badge
) i,
body.arcprod-tenant :is(
    .tutorials-page-content .tutorial-categories .category-badge,
    .guides-page-content .guide-categories .category-badge,
    .resources-page-content .resource-categories .category-badge,
    .videos-page-content .video-categories-container .video-category,
    .faq-page-content .faq-badges-wrapper .category-badge,
    .glossary-page-content .glossary-badges-wrapper .category-badge
) .badge-icon {
    display: inline-flex !important;
    /* Part de --brand-text et non de la marque brute : melangee telle quelle,
       une marque foncee donnait 1,98:1 en mode sombre (mesure du 2026-08-01). */
    color: var(--category-badge-icon-color) !important;
    opacity: 0.96 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}
body.arcprod-tenant :is(
    .tutorials-page-content,
    .guides-page-content,
    .resources-page-content,
    .videos-page-content
) .category-badge.category-badge-overflow {
    background: var(--bg-tertiary, #eceef2) !important;
    color: var(--token-text-secondary, #666) !important;
}
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-item.active .faq-badges-wrapper .category-badge,
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-badges-wrapper .category-badge:not(:has(.badge-text)) {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 24px !important;
    padding: 0.18rem 0.52rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--bg-tertiary, #f5f5f7) !important;
    color: var(--token-text-secondary, #444) !important;
    filter: none !important;
}
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-item.active .faq-badges-wrapper .category-badge i,
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-item.active .faq-badges-wrapper .category-badge .badge-icon {
    /* Part de --brand-text et non de la marque brute : melangee telle quelle,
       une marque foncee donnait 1,98:1 en mode sombre (mesure du 2026-08-01). */
    color: color-mix(in srgb, var(--brand-text) 66%, #475569 34%) !important;
    opacity: 0.98 !important;
}
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-badges-wrapper .category-badge {
    background: var(--bg-tertiary, #ebebeb) !important;
    border: 0 !important;
    color: var(--token-text-secondary, #555) !important;
    opacity: 1 !important;
    filter: none !important;
}
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-badges-wrapper .category-badge i,
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-badges-wrapper .category-badge .badge-icon {
    color: var(--token-text-secondary, #555) !important;
    opacity: 1 !important;
}
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-item.active .faq-badges-wrapper .category-badge {
    background: var(--bg-tertiary, #ebebeb) !important;
    color: var(--token-text-secondary, #555) !important;
    border-color: transparent !important;
}
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-item.active .faq-badges-wrapper .category-badge i,
html:not([data-theme="dark"]) body.arcprod-tenant .faq-page-content .faq-item.active .faq-badges-wrapper .category-badge .badge-icon {
    color: var(--token-text-secondary, #555) !important;
}

/* ============================================================
   §CB — Barre commune bas de contenu détail
   Utilisée dans toutes les vues détail avec partage (tutorial, guide, vidéo).
   Structure : .content-bottom-bar > .content-feedback + .share-buttons
   ============================================================ */
body.arcprod-tenant .content-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
}

body.arcprod-tenant .content-bottom-bar .content-feedback .feedback-widget {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

body.arcprod-tenant .content-bottom-bar .content-feedback .feedback-widget .feedback-btn {
    min-height: 34px !important;
}

body.arcprod-tenant .content-bottom-bar .share-buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Breadcrumb — liens couleur tenant */
body.arcprod-tenant .breadcrumb-item a {
    color: var(--brand-text);
    text-decoration: none;
}

body.arcprod-tenant .breadcrumb-item a:hover {
    color: var(--brand-text);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   §N — Etat vide des pages publiques
   Place ici et non dans un module : les six modules publics (FAQ, tutoriels,
   videos, guides, base de connaissances, assistant questionnaire) partagent
   le meme composant. Distinct de #no-results, qui reste pilote par le
   filtrage client (recherche, categories) et garde son propre message.
   Uniquement des tokens : le composant doit suivre les deux themes et la
   couleur de marque du tenant sans retouche.
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .public-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    max-width: 32rem;
    margin: 3rem auto;
    padding: 2.5rem 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
}

body.arcprod-tenant .public-empty-state__icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--brand-text);
    margin-bottom: 0.25rem;
}

body.arcprod-tenant .public-empty-state__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

body.arcprod-tenant .public-empty-state__text {
    margin: 0;
    max-width: 26rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

body.arcprod-tenant .public-empty-state__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-md, 10px);
    background: var(--primary-color);
    /* Couleur de marque arbitraire : --text-on-primary est calcule par tenant
       (BrandContrastService), un blanc fige serait illisible sur un vert clair. */
    color: var(--text-on-primary, #ffffff);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

body.arcprod-tenant .public-empty-state__cta:hover {
    opacity: 0.88;
    color: var(--text-on-primary, #ffffff);
    text-decoration: none;
}

@media (max-width: 575.98px) {
    body.arcprod-tenant .public-empty-state {
        margin: 1.75rem 0.75rem;
        padding: 2rem 1.25rem;
    }
}

/* Page publique sans contenu affichable : on masque tout l'appareillage de
   liste. Meme convention que `.admin-form-only`, deja utilisee par les vues pour
   masquer la liste quand l'editeur inline est ouvert — mais generique, donc
   valable pour tous les modules sans dupliquer un <style> par vue.
   Sans ce masquage : quinze filtres de categories et de niveaux sans rien a
   filtrer, le message « Aucun resultat » de DataTables empile sous l'etat vide,
   et une barre de pagination avec deux fleches inertes. */
body.arcprod-tenant .has-public-empty-state :is(
    .nav-tabs-container,
    .filter-indicator,
    #no-results,
    #noResults,
    .no-results,
    /* .empty-state : message propre a la vue videos (« Aucune video
       disponible »), redondant avec l'etat vide serveur et affiche au-dessus. */
    .empty-state,
    /* .guide-path-toolbar : barre de pastilles de parcours propre aux guides
       (« Tous les parcours 0 », « A commencer 0 »…), sans objet quand la liste
       est vide. Chaque module nomme son appareillage differemment : ajouter le
       selecteur ici plutot qu'un <style> par vue. */
    .guide-path-toolbar,
    .pagination-container,
    .dataTables_wrapper
) {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TEINTES DE CATEGORIE — badges des cartes de contenu (2026-09-03)
   ──────────────────────────────────────────────────────────────────────
   L'indice `data-teinte` est calcule par CategoryPalette (position dans la
   liste triee des categories du module), jamais par un hash : l'unicite est
   donc garantie tant qu'un module ne depasse pas 12 categories.

   DEUX jeux, parce qu'un ton lisible sur un badge clair est illisible sur un
   badge sombre. Le badge porte la teinte a 9 % en fond et la teinte pleine en
   texte. Les VINGT-QUATRE ratios du texte sur ce fond, mesures le 2026-09-03
   (seuil 4,5:1, petit texte) :

     teinte   0     1     2     3     4     5     6     7     8     9    10    11
     clair  5,48  6,15  5,19  4,83  6,17  4,72  4,55  5,83  6,20  5,58  5,48  8,92
     sombre 7,18  7,69  7,81  9,19  9,65  9,60  8,39  7,88 10,47  7,56  8,04  9,27

   Le fond teinte COUTE du contraste : a 13 % l'ambre tombait a 4,46 et l'olive
   a 4,44. Descendre a 9 % n'a pas suffi, ces deux teintes ont ete assombries
   (#b45309 -> #92400e, #4d7c0f -> #3f6212). Une teinte modifiee se re-mesure.

   DETTE CONNUE : la meme palette existe en double dans le bloc <style> de
   `views/tenant/home.php` pour les tuiles « A la une ». Les valeurs y sont
   celles d'un fond PLEIN, donc legerement differentes — les deux listes ne
   doivent pas etre copiees l'une sur l'autre sans re-mesurer.

   Un badge SANS `data-teinte`, ou avec -1, garde l'apparence d'origine : ces
   regles n'ajoutent rien, elles ne retirent rien.
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .category-badge[data-teinte="0"]  { --cat-teinte: #4f46e5; }
body.arcprod-tenant .category-badge[data-teinte="1"]  { --cat-teinte: #6d28d9; }
body.arcprod-tenant .category-badge[data-teinte="2"]  { --cat-teinte: #be185d; }
body.arcprod-tenant .category-badge[data-teinte="3"]  { --cat-teinte: #047857; }
body.arcprod-tenant .category-badge[data-teinte="4"]  { --cat-teinte: #92400e; }
body.arcprod-tenant .category-badge[data-teinte="5"]  { --cat-teinte: #0e7490; }
body.arcprod-tenant .category-badge[data-teinte="6"]  { --cat-teinte: #c2410c; }
body.arcprod-tenant .category-badge[data-teinte="7"]  { --cat-teinte: #1d4ed8; }
body.arcprod-tenant .category-badge[data-teinte="8"]  { --cat-teinte: #3f6212; }
body.arcprod-tenant .category-badge[data-teinte="9"]  { --cat-teinte: #b91c1c; }
body.arcprod-tenant .category-badge[data-teinte="10"] { --cat-teinte: #a21caf; }
body.arcprod-tenant .category-badge[data-teinte="11"] { --cat-teinte: #334155; }

html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="0"]  { --cat-teinte: #a5b4fc; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="1"]  { --cat-teinte: #c4b5fd; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="2"]  { --cat-teinte: #f9a8d4; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="3"]  { --cat-teinte: #6ee7b7; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="4"]  { --cat-teinte: #fcd34d; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="5"]  { --cat-teinte: #67e8f9; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="6"]  { --cat-teinte: #fdba74; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="7"]  { --cat-teinte: #93c5fd; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="8"]  { --cat-teinte: #bef264; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="9"]  { --cat-teinte: #fca5a5; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="10"] { --cat-teinte: #f0abfc; }
html[data-theme="dark"] body.arcprod-tenant .category-badge[data-teinte="11"] { --cat-teinte: #cbd5e1; }

/* DEUX raisons a l'ecriture de ce selecteur, toutes deux mesurees le 2026-09-03 :

   1. `!important` est obligatoire — dark-mode.css force la couleur de tout
      `span` de page tenant (l. 1121), et le badge redeviendrait gris en sombre.

   2. `[data-teinte]` est REPETE pour monter la specificite a (0,5,1). Avec un
      seul attribut la regle pese (0,4,1), a EGALITE avec deux regles `!important`
      deja en place — celle de core.css sur `.tutorial-categories .category-badge`
      et celle de tutorials.css sur `.tutorial-category-badge`. A specificite
      egale c'est l'ordre de chargement qui tranche, et tutorials.css est charge
      apres : le badge restait gris malgre le `!important`. Ce n'est pas une
      coquetterie, c'est la seule facon de gagner sans toucher aux deux autres. */
body.arcprod-tenant .category-badge[data-teinte][data-teinte]:not([data-teinte="-1"]) {
    color: var(--cat-teinte) !important;
    background: color-mix(in srgb, var(--cat-teinte) 9%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--cat-teinte) 24%, transparent) !important;
}

/* ============================================================
   BLOC « SUR LE MEME SUJET » — partiel _same_topic.php
   ------------------------------------------------------------
   Style GLOBAL et non scope : le partiel est inclus par les vues
   de detail de plusieurs modules (faq, tutoriels, guides, videos).
   Un style scope a l'un d'eux ne produirait rien dans les autres
   — c'est le piege `.share-btn`, deja documente dans le projet.

   Aucune couleur en dur : les tokens suivent deja le mode sombre,
   ce qui evite une regle supplementaire dans dark-mode.css.
   ============================================================ */
.xh-same-topic {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.xh-same-topic__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.xh-same-topic__list {
    display: grid;
    gap: 0.75rem;
}

.xh-same-topic__item {
    position: relative;
    display: grid;
    gap: 0.25rem;
    padding: 0.875rem 2.25rem 0.875rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.xh-same-topic__item:hover,
.xh-same-topic__item:focus-visible {
    border-color: var(--xh-primary, #004D95);
    transform: translateY(-1px);
}

.xh-same-topic__type {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.xh-same-topic__label {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
}

.xh-same-topic__summary {
    /* Borne de lecture : le resume vient d'un champ libre et peut etre long. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.xh-same-topic__arrow {
    position: absolute;
    top: 0.95rem;
    right: 0.9rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .xh-same-topic__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}