/* ============================================================
   CDTP — global.css
   Reset et effets globaux : selection, grain, fond brique.
   Chargé sur toutes les pages, après tokens.css.
   Dépendances : tokens.css (variables).
   ============================================================ */


/* ── Contexte d'empilement du contenu ───────────────────────── */
/*    body::before (backdrop brique) = z-index 0.
      body::after (grain) = z-index 1.
      Le contenu principal doit être au-dessus → z-index 2. */
body > * {
    position: relative;
    z-index: 2;
}

/* ── Sélection de texte ──────────────────────────────────────── */
::selection {
    background: var(--blood-500);
    color: var(--paper-100);
}

::-moz-selection {
    background: var(--blood-500);
    color: var(--paper-100);
}


/* ── Backdrop brique fixe (ambiance "mixte") ─────────────────── */
/*    Reproduit PageBackdrop ambiance="mixte" de la maquette.
      position: fixed + z-index 0 = derrière tout le contenu.
      --brick-url est injectée par wp_add_inline_style() dans functions.php. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 8, 7, 0.92) 0%,
            rgba(10, 8, 7, 0.62) 30%,
            rgba(10, 8, 7, 0.82) 80%,
            rgba(10, 8, 7, 0.98) 100%
        ),
        var(--brick-url, var(--ink-1000)) center top / cover no-repeat,
        var(--ink-1000);
    pointer-events: none;
}

/* ── Grain global sur body ───────────────────────────────────── */
/*    z-index 1 = par-dessus le backdrop brique, sous le contenu. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background-image: var(--grain-svg);
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    opacity: 0.32;
    pointer-events: none;
}


/* ── Classes utilitaires fond ───────────────────────────────── */
/*    Grenier = fond sombre + grain léger. */
.cdtp-bg-grenier {
    background: var(--bg-base);
    position: relative;
}

.cdtp-bg-grenier::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain-svg);
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    opacity: 0.25;
    pointer-events: none;
}

/*    Spot = fond sombre + halo lumineux. */
.cdtp-bg-spot {
    background:
        radial-gradient(ellipse 60% 50% at 30% 20%, rgba(246, 241, 234, 0.10) 0%, transparent 70%),
        var(--bg-base);
}

/* ── Classe utilitaire fond brique ──────────────────────────── */
/*    Usage : <section class="cdtp-bg-brick" style="--brick-url: url(...)">
   Le chemin de brick-wall.jpg est injecté en inline style PHP via
   get_stylesheet_directory_uri() dans page-home.php.
   Voir tokens.css pour .cdtp-bg-grenier et .cdtp-bg-spot. */
.cdtp-bg-brick {
    background:
        linear-gradient(180deg, rgba(10, 8, 7, 0.55), rgba(10, 8, 7, 0.82)),
        var(--brick-bg, var(--ink-1000));
    background-size: cover;
    background-position: center;
    position: relative;
}

.cdtp-bg-brick::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain-svg);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: 0.28;
    pointer-events: none;
}