/*
Theme Name: Makera Institute
Theme URI: https://makerainstitute.org
Author: Makera Institute
Author URI: https://makerainstitute.org
Description: Thème officiel de Makera Institute — site vitrine institutionnel.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: makera
*/

/* =========================================================================
   0. CORRECTION DU SCROLL HORIZONTAL & RESET DE BASE
   ========================================================================= */
html, body {
    width: 100%;
    max-width: 100%;
    /* 'clip' empêche le débordement sans casser le position: sticky du header */
    overflow-x: clip; 
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, iframe, video, svg {
    max-width: 100%;
}

/* =========================================================================
   1. FONT AWESOME — CHARGEMENT FORCÉ DES POLICES LOCALES
   ========================================================================= */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('assets/fontawesome/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fontawesome/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fontawesome/webfonts/fa-brands-400.woff2') format('woff2');
}

.fa, .fas, .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
.far, .fa-regular   { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
.fab, .fa-brands    { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* =========================================================================
   2. BASE WORDPRESS & TYPOGRAPHIE
   ========================================================================= */
.font-heading { font-family: 'Plus Jakarta Sans', sans-serif; }

.wp-content-wrapper { max-width: 72ch; margin-inline: auto; }
.wp-content-wrapper h2,
.wp-content-wrapper h3 { font-family: 'Playfair Display', serif; color: #146934; }
.wp-content-wrapper p { color: #475569; line-height: 1.75; margin-bottom: 1rem; }
.wp-content-wrapper a { color: #FF8200; text-decoration: underline; }
.wp-content-wrapper ul,
.wp-content-wrapper ol { padding-left: 1.5rem; color: #475569; margin-bottom: 1rem; }
.wp-content-wrapper blockquote { border-left: 4px solid #FF8200; padding-left: 1rem; color: #334155; font-style: italic; margin: 1.5rem 0; }
.wp-content-wrapper img { border-radius: 1rem; }

/* =========================================================================
   3. ACCESSIBILITÉ
   ========================================================================= */
.skip-link { 
    position: absolute; left: -9999px; top: 0; z-index: 100; 
    background: #FF8200; color: #fff; padding: .75rem 1rem; 
    border-radius: 0 0 .5rem 0; font-weight: 600; 
}
.skip-link:focus { left: 0; }

/* =========================================================================
   4. REVEAL ON SCROLL (Animations standard)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* =========================================================================
   5. HERO SLIDER (Page d'accueil)
   ========================================================================= */
.hero-slide { transition: opacity 1000ms ease-in-out; }
.hero-slide.active { opacity: 1; z-index: 10; }
.hero-slide.inactive { opacity: 0; z-index: 0; }
.slide-content { transition: all 700ms ease-out; }
.slide-content.fade-out { opacity: 0; transform: translateY(15px); }
.slide-content.fade-in { opacity: 1; transform: translateY(0); }

/* =========================================================================
   6. PARTENAIRES — CARROUSEL INFINI + GRILLE
   ========================================================================= */
.partners-slider { position: relative; overflow: hidden; }
.partners-slider::before,
.partners-slider::after { 
    content: ""; position: absolute; top: 0; width: 60px; height: 100%; z-index: 2; pointer-events: none; 
}
.partners-slider::before { left: 0; background: linear-gradient(to right, #f1f5f9, rgba(241, 245, 249, 0)); }
.partners-slider::after { right: 0; background: linear-gradient(to left, #f1f5f9, rgba(241, 245, 249, 0)); }

.partners-track { 
    display: flex; align-items: center; width: max-content; 
    animation: scrollPartners 80s linear infinite; will-change: transform; 
}
.partners-slider:hover .partners-track,
.partners-slider:focus-within .partners-track,
.partners-track.is-paused { animation-play-state: paused; }

@keyframes scrollPartners { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

.partner-logo-box { 
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; 
    width: 180px; height: 110px; flex-shrink: 0; margin-right: 2rem; 
    display: flex; align-items: center; justify-content: center; 
    padding: 0.5rem 0.75rem; transition: box-shadow 0.3s ease, transform 0.3s ease; 
}
.partner-logo-box:hover { 
    box-shadow: 0 4px 20px -5px rgba(20, 105, 52, 0.15); transform: translateY(-2px); 
}
.partner-logo-box img { max-height: 95px; max-width: 100%; object-fit: contain; }

.partner-logo { 
    display: flex; align-items: center; justify-content: center; 
    padding: 1rem; border-radius: 1rem; background: #ffffff; 
    border: 1px solid #e2e8f0; transition: all 0.3s ease; min-height: 100px; 
}
.partner-logo:hover { 
    background: #ffffff; box-shadow: 0 4px 20px -5px rgba(20, 105, 52, 0.15); 
    transform: translateY(-3px); border-color: #FF8200; 
}

/* =========================================================================
   7. EFFET ZOOM SUR LES IMAGES
   ========================================================================= */
.card-img-zoom img { transition: transform 0.5s ease; }
.card-img-zoom:hover img { transform: scale(1.05); }

/* =========================================================================
   8. PAGE "QUI SOMMES-NOUS" — Composants spécifiques
   ========================================================================= */
/* Animations d'apparition (data-reveal) */
[data-reveal] { 
    opacity: 0; transform: translateY(28px); 
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); 
    will-change: opacity, transform; 
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-card { 
    background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(229,231,235,0.8); 
}
.hero-gradient { background: #0f5128; }

.gold-gradient-text { 
    background: linear-gradient(135deg, #F39C12 0%, #D4AF37 100%); 
    -webkit-background-clip: text; background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.hover-lift { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
    .hover-lift:hover { 
        transform: translateY(-6px); box-shadow: 0 12px 18px -6px rgba(20,105,52,0.15); 
    }
}

/* Barre de progression de lecture (Côté droit) */
.reading-progress {
    position: fixed; top: 50%; right: 1.25rem; transform: translateY(-50%);
    width: 3px; height: 140px; background: rgba(148,163,184,0.18);
    border-radius: 99px; overflow: hidden; z-index: 40; display: none; pointer-events: none;
}
.reading-progress__bar {
    position: absolute; top: 0; left: 0; width: 100%; height: 0%;
    background: #146934; border-radius: 99px; transition: height 0.08s linear;
}
@media (min-width: 1024px) { .reading-progress { display: block; } }

/* Carte DG Sticky */
@media (min-width: 1024px) {
    .sticky-dg { transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease; }
    .sticky-dg.is-stuck {
        box-shadow: 0 12px 30px -12px rgba(20,105,52,0.20), 0 0 0 1px rgba(20,105,52,0.15);
        border-color: rgba(20,105,52,0.35);
        transform: translateY(-2px);
    }
    .sticky-dg.is-stuck::before {
        content: ""; position: absolute; top: -1px; left: 1rem; right: 1rem;
        height: 0; border-top: 2px dotted #146934;
    }
}

/* Parallax Hero */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .hero-parallax { transition: transform 0.1s linear; will-change: transform; }
}

/* =========================================================================
   9. PAGE "RESSOURCES" — Filtres
   ========================================================================= */
.filter-btn { background-color: #f1f5f9; color: #334155; transition: background-color 0.2s ease, color 0.2s ease; }
.filter-btn:hover { background-color: #e2e8f0; }
.filter-btn.active { background-color: #146934; color: #ffffff; }
.filter-btn.active:hover { background-color: #146934; }

.filter-btn--toolbox.active { background-color: #FF8200; }
.filter-btn--toolbox.active:hover { background-color: #FF8200; }

.filters-sticky { transition: box-shadow 0.25s ease; }
.filters-sticky.is-stuck { box-shadow: 0 4px 12px -4px rgba(20, 105, 52, 0.08); }

#actualites-grid { scroll-margin-top: 9rem; }
#toolbox-grid   { scroll-margin-top: 9rem; }
.tool-card { min-height: 100%; }

/* =========================================================================
   10. UTILITAIRES DIVERS
   ========================================================================= */
.cv-auto { content-visibility: auto; contain-intrinsic-size: 0 1400px; }

/* =========================================================================
   11. REDUCED MOTION (Accessibilité)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { 
        animation-duration: 0.01ms !important; 
        animation-iteration-count: 1 !important; 
        transition-duration: 0.01ms !important; 
    }
    .reveal, [data-reveal] { opacity: 1; transform: none; }
    .hero-slide { transition: none; }
    .partners-track { animation: none; }
}