/**
 * LeechWriter — Styles frontend pour les tableaux et autres éléments du contenu généré.
 *
 * Ce CSS est chargé UNIQUEMENT sur le frontend (jamais en admin) et UNIQUEMENT sur
 * les pages où un tableau LeechWriter est détecté (cf. wp_enqueue_style conditionnel).
 *
 * Conventions :
 *   - Tous les sélecteurs sont scopés par .lw-table-wrap pour ne pas affecter les
 *     autres tables du site (sidebar widgets, plugins tiers, etc.)
 *   - Les couleurs sont pilotées par des variables CSS personnalisables via Options
 *     LeechWriter → Apparence → Tableaux. Les valeurs par défaut sont neutres pour
 *     s'intégrer à n'importe quel thème.
 *   - Pas de !important sauf cas critique (max-width sur mobile)
 *
 * v7.17.9 (06/05/2026) — Création
 * v7.17.12 (06/05/2026) — Variables CSS pour personnalisation (header/body/zebra/hover)
 * v7.17.23 (07/05/2026) — Suppression des dégradés "Lea Verou" qui produisaient
 *                          des artefacts visuels (déchirures sombres) sur les
 *                          thèmes à fond non-blanc. Wrapper transparent + box-shadow
 *                          inset mobile = compatible avec TOUT type de thème.
 */

/* ── Variables CSS : valeurs par défaut (peuvent être surchargées via <style> inline) ── */
.lw-table-wrap {
    --lw-table-header-bg:     #f8f9fa;
    --lw-table-header-color:  #2C3E50;
    --lw-table-body-bg:       #ffffff;
    --lw-table-body-color:    #2C3E50;
    --lw-table-zebra-bg:      #fafbfc;
    --lw-table-border-color:  #e9ecef;
    --lw-table-header-border: #dee2e6;
    --lw-table-hover-bg:      #f0f7ff;
}

/* ── Wrapper responsive (le <div> qui contient la <table>) ─────────────────── */
.lw-table-wrap {
    /* Le scroll horizontal est posé inline (style="overflow-x:auto") par le filtre PHP,
       mais on le re-déclare ici comme garde-fou si l'inline est strippé par un plugin. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Momentum scroll iOS */
    margin: 1.5em 0;
    border-radius: 6px;

    /* v7.17.23 (07/05/2026) — Suppression des dégradés "ombres scroll Lea Verou"
       (https://lea.verou.me/2012/04/background-attachment-local/).
       Cette technique supposait un fond blanc du wrapper et créait des artefacts
       visuels (déchirures sombres aux 4 coins) sur les thèmes à fond non-blanc
       (sombre, dégradé, image). Bug détecté en prod sur thèmes "dark mode".

       Solution sur-mesure : wrapper TRANSPARENT par défaut → compatible avec
       TOUT type de thème (clair, sombre, dégradé, image de fond). L'indicateur
       de scroll mobile est rétabli via box-shadow inset dans le @media plus bas
       (technique indépendante de la couleur de fond du wrapper). */
}

/* ── Indicateur scroll mobile : box-shadow inset (compatible tout fond) ────── */
@media (max-width: 768px) {
    .lw-table-wrap {
        /* Ombre intérieure aux extrémités gauche/droite, ne dépend pas du fond.
           Visuellement subtile mais signale à l'utilisateur mobile qu'il peut
           scroller le tableau horizontalement quand il déborde de l'écran. */
        box-shadow: inset 8px 0 8px -8px rgba(0, 0, 0, 0.25),
                    inset -8px 0 8px -8px rgba(0, 0, 0, 0.25);
    }
}

/* ── Tableau lui-même ───────────────────────────────────────────────────────── */
.lw-table-wrap > table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    background: var(--lw-table-body-bg);
}

/* ── Cellules : header (th) ─────────────────────────────────────────────────── */
.lw-table-wrap > table th {
    background: var(--lw-table-header-bg);
    color: var(--lw-table-header-color);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--lw-table-header-border);
    white-space: nowrap;
}

/* ── Cellules : body (td) ───────────────────────────────────────────────────── */
.lw-table-wrap > table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--lw-table-border-color);
    color: var(--lw-table-body-color);
    vertical-align: top;
}

/* ── Lignes alternées (zebra striping) ──────────────────────────────────────── */
.lw-table-wrap > table tr:nth-child(even) td {
    background: var(--lw-table-zebra-bg);
}

/* ── Hover sur les lignes (desktop seulement) ───────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .lw-table-wrap > table tr:hover td {
        background: var(--lw-table-hover-bg);
        transition: background 0.12s ease;
    }
}

/* ── Dernière ligne sans bordure inférieure ─────────────────────────────────── */
.lw-table-wrap > table tr:last-child td {
    border-bottom: none;
}

/* ── Adaptation mobile ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .lw-table-wrap > table {
        font-size: 13px;
    }
    .lw-table-wrap > table th,
    .lw-table-wrap > table td {
        padding: 8px 10px;
    }
    .lw-table-wrap > table th {
        white-space: normal;
    }
}

/* ── Mode sombre OS ──────────────────────────────────────────────────────────
   v7.17.23 — Bloc nettoyé : le wrapper étant désormais transparent par défaut
   (cf. .lw-table-wrap ci-dessus), aucune règle spécifique n'est nécessaire pour
   prefers-color-scheme: dark. La transparence rend l'élément automatiquement
   compatible avec tout mode (clair/sombre). Le commentaire reste comme repère
   historique pour ne pas réintroduire un fond couleur par erreur. */

/* ── Print : version optimisée impression ──────────────────────────────────── */
@media print {
    .lw-table-wrap {
        overflow-x: visible;
        background: none;
    }
    .lw-table-wrap > table {
        page-break-inside: avoid;
        font-size: 11pt;
    }
    .lw-table-wrap > table th {
        background: #eee !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}