/* badis-fond.css : fond etoile des grands ecrans (>= 1330 px).
   Sorti de style.php le 9 novembre 2026 : ce CSS n'est charge, en cache, que
   sur les ecrans larges. Sur mobile et tablette, il ne bloque pas l'affichage. */
/* ==========================================================
   FOND ETOILE (novembre 2026)
   Motif BADIS (etoile dans le losange) en fond de page, dessine en
   CSS (SVG en data URI, aucune requete). Deux calques fixes places
   SOUS tout le contenu (z-index -1), visibles uniquement dans les
   marges laterales, au-dela du conteneur de 1280 px : un masque les
   efface derriere la colonne de contenu, d'ou aucun chevauchement.
   En dessous de 1330 px de large (petit portable, tablette, smartphone),
   la marge libre est trop etroite : le fond n'est pas affiche et ne
   coute rien. Scintillement (revu le 9 novembre 2026) : deux scintillements
   seulement apres l'affichage, puis le fond reste fixe. Une animation sans fin
   obligeait le navigateur a redessiner l'ecran en continu (60 images par seconde,
   flou du header compris), ce qui ralentissait les postes modestes. Coupe aussi
   si l'utilisateur limite les animations.
   ========================================================== */
:root {
    --badis-col-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='220' viewBox='0 0 40 220'%3E%3Cg transform='translate%2811 21%29 scale%280.180%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%233B82F6' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23F4F7FB' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
    --badis-col-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='220' viewBox='0 0 40 220'%3E%3Cg transform='translate%2815 135%29 scale%280.100%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%233B82F6' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23F4F7FB' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
    --badis-field-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg transform='translate%2828 36%29 scale%280.220%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%233B82F6' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23F4F7FB' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3Cg transform='translate%28150 148%29 scale%280.140%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%233B82F6' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23F4F7FB' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
    --badis-field-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg transform='translate%28176 58%29 scale%280.120%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%233B82F6' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23F4F7FB' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3Cg transform='translate%2854 206%29 scale%280.180%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%233B82F6' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23F4F7FB' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3Cg transform='translate%28238 252%29 scale%280.090%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%233B82F6' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23F4F7FB' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="light"] {
    --badis-col-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='220' viewBox='0 0 40 220'%3E%3Cg transform='translate%2811 21%29 scale%280.180%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%23384597' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23141A3A' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
    --badis-col-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='220' viewBox='0 0 40 220'%3E%3Cg transform='translate%2815 135%29 scale%280.100%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%23384597' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23141A3A' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
    --badis-field-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg transform='translate%2828 36%29 scale%280.220%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%23384597' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23141A3A' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3Cg transform='translate%28150 148%29 scale%280.140%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%23384597' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23141A3A' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
    --badis-field-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg transform='translate%28176 58%29 scale%280.120%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%23384597' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23141A3A' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3Cg transform='translate%2854 206%29 scale%280.180%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%23384597' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23141A3A' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3Cg transform='translate%28238 252%29 scale%280.090%29'%3E%3Cpolygon points='50,6 94,50 50,94 6,50' fill='none' stroke='%23384597' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath fill='%23141A3A' transform='translate%2831 31%29 scale%281.583%29' d='M12 0C12.8 7.2 16.8 11.2 24 12C16.8 12.8 12.8 16.8 12 24C11.2 16.8 7.2 12.8 0 12C7.2 11.2 11.2 7.2 12 0Z'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 1330px) {
    body::before, body::after {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        /* Visible dans les marges, efface derriere le contenu (1232 px de large, 20 px de respiration de chaque cote) */
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 640px), transparent calc(50% - 626px), transparent calc(50% + 626px), #000 calc(50% + 640px), #000 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 640px), transparent calc(50% - 626px), transparent calc(50% + 626px), #000 calc(50% + 640px), #000 100%);
    }
    /* Une colonne d'etoiles au milieu de chaque marge laterale (grande etoile, puis petite decalee) */
    body::before, body::after {
        --gutter-mid: calc((100vw - 1232px) / 4);
        background-repeat: repeat-y, repeat-y; background-size: 40px 220px, 40px 220px;
        background-position: calc(var(--gutter-mid) - 20px) 0, calc(100vw - var(--gutter-mid) - 20px) 110px;
    }
    body::before { background-image: var(--badis-col-a), var(--badis-col-a); opacity: .55; animation: badisTwinkle 3.2s ease-in-out 0.8s 2; }
    body::after  { background-image: var(--badis-col-b), var(--badis-col-b); opacity: .55; animation: badisTwinkle 4.4s ease-in-out 1.6s 2; }
}
/* Grands ecrans (marges de plus de 180 px) : la colonne laisse place a un semis sur toute la marge */
@media (min-width: 1600px) {
    body::before { background: var(--badis-field-a) center 0 / 240px 240px repeat; }
    body::after  { background: var(--badis-field-b) calc(50% + 70px) 40px / 300px 300px repeat; }
}
@keyframes badisTwinkle {
    0%, 100% { opacity: .55; }
    50%       { opacity: .95; }
}
html[data-theme="light"] body::before, html[data-theme="light"] body::after { opacity: .35; animation-name: badisTwinkleDay; }
@keyframes badisTwinkleDay {
    0%, 100% { opacity: .35; }
    50%       { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none !important; }
}