/*
 * Arc_Prod — Module Tutoriels (Apple iOS 18)
 * File: public_html/assets/xhelpers/css/modules/tutorials.css
 *
 * Scope  : body.arcprod-tenant .tutorials-page-content
 * Dark   : automatique via variables §A (redesign/12-dark-mode.css)
 * Règle  : 100% CSS variables — zéro couleur hardcodée — zéro [data-theme]
 *
 * NOTE : Les styles partagés (header, filter chips, cards layout, pagination)
 * sont dans redesign/03-content-modules-core.css qui charge après ce fichier.
 */

/* ══════════════════════════════════════════════════════════════════════
   §0 — Token aliases locaux
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .tutorials-page-content {
    --t-card-bg:     var(--bg-primary);
    --t-card-border: var(--border-color);
    --t-hover-bg:    color-mix(in srgb, var(--primary-color) 4%, transparent);
    --t-accent:      var(--tutorials-primary, var(--primary-color));
    --token-primary: var(--primary-color);
    font-size: 14px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════
   §A — Cards row spacing
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .tutorials-page-content #cards-row {
    margin-top: 1.5rem;
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    align-items: flex-start !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-card .card-body {
    padding: 0.9rem 1rem !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §B — Tutorial card (spécifique)
   ══════════════════════════════════════════════════════════════════════ */
/* Card links */
body.arcprod-tenant .tutorials-page-content .tutorial-card,
body.arcprod-tenant .tutorials-page-content a.tutorial-card {
    text-decoration: none;
    color: inherit;
}

body.arcprod-tenant .tutorials-page-content .tutorial-card .card-title a,
body.arcprod-tenant .tutorials-page-content .tutorial-card .card-title {
    text-decoration: none;
    /* Aligne sur base.css §AJ (2026-09-03). Ce selecteur pese plus que §AJ :
       le laisser sur --brand-text ramenait la marque sur les seuls tutoriels. */
    color: var(--text-primary) !important;
}

body.arcprod-tenant .tutorials-page-content a:not(.btn):not(.nav-link):not(.content-quick-edit) {
    color: var(--brand-text);
}

body.arcprod-tenant .tutorials-page-content a:not(.btn):not(.nav-link):not(.content-quick-edit):hover {
    color: var(--primary-color-hover, var(--primary-color));
}

/* Card footer push to bottom */
body.arcprod-tenant .tutorials-page-content .tutorial-card .card-footer,
body.arcprod-tenant .tutorials-page-content .tutorial-card .tutorial-card-author {
    margin-top: auto;
}

/* Card action arrow */
body.arcprod-tenant .tutorials-page-content .tutorial-card-action {
    color: var(--brand-text);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

body.arcprod-tenant .tutorials-page-content .tutorial-card-action i {
    transition: transform var(--transition-fast);
}

body.arcprod-tenant .tutorials-page-content .tutorial-card:hover .tutorial-card-action i {
    transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════════════
   §C — Quick edit row (bouton édition sur les cartes)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .tutorials-page-content .content-quick-edit-row {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    z-index: 5;
    pointer-events: none;
}

body.arcprod-tenant .tutorials-page-content .content-quick-edit-row .content-quick-edit {
    pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   §D — Panneau filtres actifs (filter-indicator)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .tutorials-page-content .filter-indicator {
    display: none;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

body.arcprod-tenant .tutorials-page-content .filter-indicator.active {
    display: block;
}

body.arcprod-tenant .tutorials-page-content .filter-indicator.expanded .filter-details-content {
    display: block;
}

body.arcprod-tenant .tutorials-page-content .filter-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.arcprod-tenant .tutorials-page-content .filter-headline-left {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.875rem;
}

body.arcprod-tenant .tutorials-page-content .filter-results-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.8rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    color: var(--brand-text);
    font-weight: 700;
    font-size: 0.8rem;
    min-height: 28px;
}

body.arcprod-tenant .tutorials-page-content .filter-details-content {
    display: none;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color-light);
}

body.arcprod-tenant .tutorials-page-content .filter-logic-rule {
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
}

body.arcprod-tenant .tutorials-page-content .filter-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

body.arcprod-tenant .tutorials-page-content .filter-summary-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.65rem;
}

body.arcprod-tenant .tutorials-page-content .filter-summary-label {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.8rem;
    white-space: nowrap;
}

body.arcprod-tenant .tutorials-page-content .filter-summary-value {
    color: var(--text-secondary);
    font-size: 0.8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   §E — Niveaux de difficulté (color tokens)
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .tutorials-page-content .nav-tabs .nav-link.difficulty-tab.selected {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary, #ffffff) !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-categories .tutorial-category-badge {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-categories .tutorial-category-badge i {
    color: inherit !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-categories .tutorial-difficulty-badge {
    background: transparent !important;
    /* Etait color-mix(--primary-color 65%, #ffffff) : delaver la marque sur un fond
       blanc garantissait l'echec (2,01:1 mesure). Meme correctif que guides.css. */
    color: var(--brand-text) !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    padding-left: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   §F — Pagination container
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .tutorials-page-content #tutorial-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   §G — Detail page (tutorial-detail)
   ══════════════════════════════════════════════════════════════════════ */

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-title {
    color: var(--text-primary);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-meta {
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-meta .meta-item i {
    color: var(--text-secondary);
}

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-content-wrapper {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
    padding: 2rem;
    margin-bottom: 2rem;
    background: var(--bg-primary);
}

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-content-wrapper::before {
    display: none;
}

/* Tags catégories dans méta : pills neutres */
body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-meta .tutorial-category,
body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-meta .badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
}

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-content h2 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.4rem;
    font-size: 1.15rem;
    font-weight: 600;
}

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-content h3 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

body.arcprod-tenant [data-page="tutorial-detail"] .tutorial-content blockquote {
    background: color-mix(in srgb, var(--token-primary, var(--primary-color, #0b5ed7)) 10%, var(--bg-secondary, #f8f9fa));
    border-left: 3px solid var(--token-primary, var(--primary-color, #0b5ed7));
    color: var(--token-text-primary, var(--text-primary, #1d1d1f));
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.2rem;
}


/* --------------------------------------------------------------------------
   TUTORIALS LIST — adoucir légèrement les titres (Apple style plus doux)
---------------------------------------------------------------------------- */
body.arcprod-tenant .tutorials-page-content .tutorial-title {
    color: var(--token-text-primary, #1d1d1f) !important;
    color: color-mix(in srgb, var(--token-text-primary, #1d1d1f) 88%, var(--token-text-secondary, #6b7280)) !important;
    font-weight: 650 !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-card :is(.card-title, .card-title a) {
    font-weight: 600 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   §H — Responsive
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    body.arcprod-tenant .tutorials-page-content .filter-indicator {
        padding: 0.75rem;
    }

    body.arcprod-tenant .tutorials-page-content .filter-summary-item {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    body.arcprod-tenant .tutorials-page-content .filter-summary-value {
        max-width: 100%;
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    body.arcprod-tenant .tutorials-page-content .content-quick-edit-row {
        top: 0.65rem;
        right: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.arcprod-tenant .tutorials-page-content * {
        animation: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   §I — Cartes de hauteur egale (2026-09-03)
   ──────────────────────────────────────────────────────────────────────
   Mesure avant correction : 112 px pour la carte la plus courte, 174 px pour
   la plus haute, soit 62 px d'ecart — le SEUL module dans ce cas (fiches
   pratiques, guides, videos et FAQ sont tous a 0). Les rangees ne s'alignaient
   donc pas, et l'oeil lit ce decalage comme du desordre.

   La cause n'est pas une grille CSS mais la grille BOOTSTRAP : `.tutorial-item`
   est une colonne `col-lg-4`, et une colonne n'etire pas son contenu. La carte
   doit donc reclamer toute la hauteur de sa colonne, et le resume etre borne,
   sans quoi un texte long recreerait l'ecart.
   ══════════════════════════════════════════════════════════════════════ */
body.arcprod-tenant .tutorials-page-content .tutorial-item {
    display: flex !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-item > a {
    display: flex !important;
    width: 100% !important;
}

body.arcprod-tenant .tutorials-page-content .tutorial-item .tutorial-card {
    height: 100% !important;
    width: 100% !important;
}

/* Trois lignes au plus. `min-height` autant que `-webkit-line-clamp` : le clamp
   seul borne le HAUT mais laisse une carte au resume court plus basse que sa
   voisine — c'est justement l'ecart qu'on corrige. */
body.arcprod-tenant .tutorials-page-content .tutorial-card .card-summary {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    min-height: calc(3 * 1.5em) !important;
    margin-bottom: 0 !important;
}

/* Le titre aussi : un titre d'une ligne contre un titre de deux laissait 22 px
   d'ecart residuel apres l'egalisation ci-dessus (mesure du 2026-09-03). Deux
   lignes exactement — bornees en haut comme en bas. */
body.arcprod-tenant .tutorials-page-content .tutorial-card .card-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: calc(2 * 1.3em) !important;
}