/* ═══════════════════════════════════════════════════════════════════════
   ICÔNE DE PAGE « VERRE LIQUIDE » (11/11/2026) — gabarit : inc/page_icon.php
   Pavé de verre + icône translucide aux couleurs du thème (Azur, España,
   Menthe, clair/sombre) : tout est lu dans les jetons --t3-* du thème V3.
   Retour aux anciennes images : PAGE_ICON_STYLE = 'png' dans inc/page_icon.php.
   ═══════════════════════════════════════════════════════════════════════ */
.pi {
    --pi-accent: var(--t3-accent, #2563eb);
    --pi-haut: color-mix(in srgb, var(--t3-accent-hi, #3b82f6) 72%, #fff);
    --pi-bas: var(--t3-accent-lo, #1d4ed8);
    --pi-lustre: rgba(255, 255, 255, 0.55);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    vertical-align: middle;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    padding: 9px;
    margin: 4px 0 4px 15px;
    border-radius: 13px;
    background:
        linear-gradient(150deg, var(--pi-lustre), transparent 55%),
        color-mix(in srgb, var(--pi-accent) 8%, transparent);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px color-mix(in srgb, var(--pi-accent) 15%, transparent),
        inset 0 -2px 4px color-mix(in srgb, var(--pi-accent) 8%, transparent),
        0 6px 16px color-mix(in srgb, var(--pi-accent) 14%, transparent);
}
body.v2-dark .pi {
    --pi-haut: var(--t3-accent-hi, #93c5fd);
    --pi-bas: color-mix(in srgb, var(--t3-accent, #60a5fa) 80%, #000);
    --pi-lustre: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.25);
}

.pi svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--pi-bas) 38%, transparent));
}
.pi .pi-haut { stop-color: var(--pi-haut); stop-opacity: 0.85; }
.pi .pi-bas  { stop-color: var(--pi-bas);  stop-opacity: 0.94; }

/* Le reflet glisse quand la souris passe sur l'en-tête */
.pi .pi-reflet { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pi:hover .pi-reflet,
.block-title:hover .pi .pi-reflet,
.inv-tete:hover .pi .pi-reflet,
.settings-sidebar-header:hover .pi .pi-reflet { transform: translate(5px, 3px); }

/* Petit format (en-têtes de page style mm : Factures…) */
.pi.pi-sm { width: 38px; height: 38px; padding: 8px; margin: 0; border-radius: 12px; }

/* Paramètres : l'icône est au-dessus du titre de la colonne */
.settings-sidebar-header .pi { margin: 0 0 8px; }

@media (max-width: 768px) {
    .pi:not(.pi-sm) { width: 38px; height: 38px; padding: 8px; margin-left: 10px; border-radius: 12px; }
}
@media (max-width: 480px) {
    .pi:not(.pi-sm) { width: 34px; height: 34px; padding: 7px; margin-left: 5px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .pi .pi-reflet { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EN-TÊTE DES PAGES-LISTES ENCORE EN BLOC (11/11/2026, version « charte »)
   Gabarit : pageEntete() dans inc/page_icon.php, posé dans le .block-title.
   Il donne au .block-title l'allure de l'en-tête de Stocks / Factures
   (charte : css/page-liste.css) — pavé d'icône simple, titre en Manrope,
   halos fixes, boutons regroupés en capsule (le premier = principal),
   un bouton seul = pilule. Les en-têtes des pages ne sont pas réécrits :
   tout passe par « .block-title:has(> .pe) ».
   Version précédente (verre teinté + aurore + biseau + Saira) :
   ~/sauvegardes_sib/2026-11-11_charte/page-icon.css
   Quand une page passe en feuille (.pl-feuille), elle n'utilise plus pageEntete().
   ═══════════════════════════════════════════════════════════════════════ */
.block-title:has(> .pe) {
    --pe-acc: var(--t3-accent, #2563eb);
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 18px 12px 22px;
    min-height: 66px;
    border-bottom: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.08));
    background:
        radial-gradient(45% 140% at 0% 0%, var(--t3-orb-1, rgba(37, 99, 235, 0.14)), transparent 72%),
        radial-gradient(35% 120% at 100% 0%, var(--t3-orb-2, rgba(236, 72, 153, 0.08)), transparent 72%),
        transparent;
    box-shadow: none;
}
.block-title > .pe { display: none; }

/* Pavé d'icône — le même que .mm-tete-ico (Stocks, Factures, fenêtres) */
.block-title:has(> .pe) > .pe-repere {
    order: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 20px;
    color: var(--pe-acc);
    background: color-mix(in srgb, var(--pe-acc) 13%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.v2-dark .block-title:has(> .pe) > .pe-repere { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* Titre : Manrope, comme le h1 de Stocks */
.block-title:has(> .pe) > h1,
.block-title:has(> .pe) > h2,
.block-title:has(> .pe) > h3 {
    order: 2;
    flex: 1 1 240px;
    min-width: 0;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--t3-text, #131a2e);
}
.block-title:has(> .pe) > h1 strong,
.block-title:has(> .pe) > h2 strong,
.block-title:has(> .pe) > h3 strong { font-weight: 700; } /* couleur : celle du thème (theme-v3.css), le mot-clé reste mis en avant */

/* Boutons à droite ; un bouton seul = pilule pleine, sans cadre autour */
.block-title:has(> .pe) > .block-options {
    order: 3;
    float: none !important;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 0 auto;
}
/* Plusieurs boutons : capsule groupée (comme la capsule d'actions de Stocks) */
.block-title:has(> .pe) > .block-options:has(.btn ~ .btn) {
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.08));
    background: var(--t3-glass-lo, rgba(255, 255, 255, 0.35));
}
.block-title:has(> .pe) > .block-options > .btn-group {
    display: flex;
    align-items: center;
    gap: 2px;
    float: none;
}
.block-title:has(> .pe) > .block-options .btn {
    float: none;
    margin: 0 !important;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--t3-text-2, #4c5670) !important;
    box-shadow: none !important;
    text-shadow: none;
}
.block-title:has(> .pe) > .block-options .btn .ti { color: var(--pe-acc); }
.block-title:has(> .pe) > .block-options .btn:hover,
.block-title:has(> .pe) > .block-options .btn:focus-visible {
    background: var(--t3-solid, #fff) !important;
    color: var(--t3-text, #131a2e) !important;
    box-shadow: 0 1px 2px rgba(19, 26, 46, 0.08), 0 3px 10px rgba(19, 26, 46, 0.06) !important;
}
/* Le bouton principal (le premier) : plein, comme « Créer une facture » */
.block-title:has(> .pe) > .block-options > .btn:first-child,
.block-title:has(> .pe) > .block-options > .btn-group > .btn:first-child {
    padding: 7px 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--t3-brand, #2563eb), var(--t3-accent-lo, #1d4ed8)) !important;
    color: var(--t3-brand-on, #fff) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px color-mix(in srgb, var(--t3-brand, #2563eb) 30%, transparent) !important;
}
.block-title:has(> .pe) > .block-options > .btn:first-child .ti,
.block-title:has(> .pe) > .block-options > .btn-group > .btn:first-child .ti { color: inherit; }
.block-title:has(> .pe) > .block-options > .btn:first-child:hover,
.block-title:has(> .pe) > .block-options > .btn-group > .btn:first-child:hover { filter: brightness(1.06); }

@media (max-width: 767px) {
    .block-title:has(> .pe) { padding: 10px 12px 10px 16px; }
    .block-title:has(> .pe) > .block-options { margin-left: 0; }
}