/* ==========================================================================
   B-ITECH — utilitaires maison
   Fusion des <style> des 15 maquettes Stitch + correctifs du design system.
   (le theme() de Tailwind est resolu en dur : ce fichier est charge APRES
    style.css et ne doit pas dependre du compilateur)
   ========================================================================== */

/* --- Fonts Material Symbols (fallback si la feuille Google est bloquee) --- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Motif hexagonal (signature du logo) --- */
.hexagon,
.hexagon-clip {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* --- Verre depoli --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.bg-glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Ombres ambiantes (teintees marque, cf. DESIGN.md) --- */
.ambient-shadow {
    box-shadow: 0 10px 40px -10px rgba(0, 38, 83, 0.15);
}
.ambient-shadow-hover:hover {
    box-shadow: 0 20px 40px -10px rgba(0, 38, 83, 0.25);
    transform: translateY(-4px);
}

/* --- Animations a l'apparition dans le viewport ---
   Les maquettes Stitch utilisaient 3 noms differents selon l'ecran
   (.reveal-up / .fade-in-up + .active / .fade-in-up + .appear).
   On supporte les trois, pilotes par assets/js/main.js.               */
.fade-in-up,
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
                transform .8s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.fade-in-up.active,
.fade-in-up.appear,
.reveal-up.active,
.reveal-up.appear {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* --- Cartes projet (page Realisations) --- */
.project-card:hover .project-overlay { opacity: 1; }

/* --- Boutons de filtre (page Realisations) --- */
.filter-btn.active {
    background-color: #e6b412;   /* sahel-gold */
    color: #002653;              /* primary    */
    border-color: #e6b412;
}

/* --- Divers --- */
.smooth-scroll { scroll-behavior: smooth; }

/* ancres : ne pas passer sous le header fixe (h-20 = 80px) */
section[id], [id] { scroll-margin-top: 96px; }

/* menu mobile ouvert */
#mobileMenu.is-open { display: block; }

/* etat "remontee" du header */
#siteHeader.is-scrolled { box-shadow: 0 8px 24px -4px rgba(26, 60, 110, .12); }

/* focus visible (accessibilite) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #e6b412;
    outline-offset: 2px;
    border-radius: 4px;
}

/* respect de "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up, .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}