/* ============================================================
   CONAGRIGET — STYLE PRINCIPAL
   Version: 2.0.0 — Charte agricole
   ============================================================

   Architecture CSS selon méthodologie ITCSS + BEM

   Ordre d'importation (du plus générique au plus spécifique) :
   1. BASE      → Reset, variables, typographie
   2. LAYOUT    → Grille, header, footer, sections
   3. COMPONENTS → Boutons, cartes, carrousel, etc.
   4. PAGES     → Styles spécifiques à chaque page
   5. UTILITIES  → Animations, helpers, responsive

   ============================================================ */

/* ============================================================
   1. BASE
   ============================================================ */
@import 'base/reset.css';
@import 'base/variables.css';
@import 'base/typography.css';

/* ============================================================
   2. LAYOUT
   ============================================================ */
@import 'layout/grid.css';
@import 'layout/header.css';
@import 'layout/footer.css';
@import 'layout/sections.css';

/* ============================================================
   3. COMPONENTS
   ============================================================ */
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/mobile-menu.css';
@import 'components/back-to-top.css';
@import 'components/hero-slideshow.css';
@import 'components/teams.css';
@import 'components/forms.css';

/* ============================================================
   4. PAGES
   ============================================================ */
@import 'pages/home.css';
@import 'pages/about.css';
@import 'pages/produits.css';
@import 'pages/commande.css';
@import 'pages/contact.css';
@import 'pages/mentions-legales.css';
@import 'pages/processus.css';
@import 'pages/services.css';
@import 'pages/galerie.css';

/* ============================================================
   5. UTILITIES
   ============================================================ */
@import 'utilities/animations.css';
@import 'utilities/helpers.css';
@import 'utilities/responsive.css';


/* ============================================================
   LOGO ANIMÉ GÉANT — CHARTE AGRICOLE
   ============================================================ */

.logo-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1A2E1C 0%, #0D1F0F 60%, #061208 100%);
    z-index: 99999;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1;
    overflow: hidden;
}

.logo-container.loaded {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
}

/* === ANIMATION DE FOND === */
.logo-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 195, 74, 0.08) 0%, transparent 40%);
    animation: bgPulse 4s ease-in-out infinite;
}

@keyframes bgPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
}

/* === CONTENEUR CENTRAL === */
.logo-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-align: center;
}

/* === LOGO IMAGE === */
.logo-img {
    width: min(40vw, 260px);
    height: auto;
    max-height: 30vh;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 50px rgba(139, 195, 74, 0.5)) drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
    opacity: 0;
    animation: logoEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

@keyframes logoEntrance {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(40px);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* === NOM "CONAGRIGET" SOUS LE LOGO === */
.logo-name-container {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: 15px;
    opacity: 0;
    animation: nameEntrance 0.8s ease-out 1.2s forwards;
}

@keyframes nameEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-name-scroll {
    display: block;
}

.logo-name-main {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 800;
    color: #8BC34A;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(139, 195, 74, 0.5), 0 0 60px rgba(139, 195, 74, 0.2);
    animation: nameShimmer 3s ease-in-out infinite, nameFloat 4s ease-in-out infinite;
    white-space: nowrap;
    line-height: 1.2;
}

@keyframes nameShimmer {
    0%, 100% {
        color: #8BC34A;
        text-shadow: 0 0 20px rgba(139, 195, 74, 0.4);
    }
    50% {
        color: #C5E1A5;
        text-shadow: 0 0 40px rgba(197, 225, 165, 0.6);
    }
}

@keyframes nameFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* === EFFET DE BRILLANCE === */
.logo-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255, 255, 255, 0.2) 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.2) 60%,
        transparent 80%
    );
    transform: skewX(-25deg);
    animation: shineEffect 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
    z-index: 3;
    pointer-events: none;
}

@keyframes shineEffect {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* === PARTICULES === */
.logo-particles {
    position: absolute;
    inset: -200px;
    pointer-events: none;
    z-index: 1;
}

.particle-burst {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    animation: particleBurst 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow: 0 0 15px rgba(139, 195, 74, 0.5);
}

@keyframes particleBurst {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }
    30% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx2), var(--ty2)) scale(0);
    }
}

/* === ARC COMPLET ENTOURANT LE LOGO === */
.logo-arc {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
}

.logo-arc-outer {
    width: min(55vw, 380px);
    height: min(55vw, 380px);
    transform: translate(-50%, -50%);
    border: 3px solid transparent;
    border-top-color: #8BC34A;
    border-right-color: #8BC34A;
    border-bottom-color: #8BC34A;
    border-left-color: #8BC34A;
    animation: arcRotate 8s linear infinite;
    opacity: 0.9;
    box-shadow: 0 0 40px rgba(139, 195, 74, 0.4), inset 0 0 40px rgba(139, 195, 74, 0.15);
}

.logo-arc-inner {
    width: min(45vw, 300px);
    height: min(45vw, 300px);
    transform: translate(-50%, -50%);
    border: 2px solid transparent;
    border-top-color: #C5E1A5;
    border-right-color: #C5E1A5;
    border-bottom-color: #C5E1A5;
    border-left-color: #C5E1A5;
    animation: arcRotateReverse 6s linear infinite;
    opacity: 0.6;
}

@keyframes arcRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes arcRotateReverse {
    0% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

/* === POINTS LUMINEUX SUR L'ARC === */
.arc-glow-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #AED581;
    box-shadow: 0 0 15px #AED581, 0 0 30px rgba(174, 213, 129, 0.5);
    transform: rotate(var(--angle)) translateX(-190px) rotate(calc(var(--angle) * -1));
    animation: dotPulse 2s ease-in-out infinite;
    opacity: 0.8;
    z-index: 5;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 0.4;
        transform: rotate(var(--angle)) translateX(-190px) rotate(calc(var(--angle) * -1)) scale(1);
    }
    50% {
        opacity: 1;
        transform: rotate(var(--angle)) translateX(-190px) rotate(calc(var(--angle) * -1)) scale(1.5);
    }
}

/* === LOADER === */
.logo-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.2;
}

.loader-ring {
    width: 280px;
    height: 280px;
    border: 2px solid rgba(139, 195, 74, 0.08);
    border-radius: 50%;
    animation: loaderSpin 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes loaderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .logo-img {
        width: min(50vw, 220px);
        max-height: 25vh;
    }
    
    .logo-arc-outer {
        width: min(65vw, 320px);
        height: min(65vw, 320px);
        border-width: 3px;
    }
    
    .logo-arc-inner {
        width: min(55vw, 250px);
        height: min(55vw, 250px);
        border-width: 2px;
    }
    
    .arc-glow-dot {
        width: 8px;
        height: 8px;
        transform: rotate(var(--angle)) translateX(-160px) rotate(calc(var(--angle) * -1));
    }
    
    .logo-name-main {
        font-size: clamp(24px, 4vw, 40px);
        letter-spacing: 6px;
    }
}

@media (max-width: 767px) {
    .logo-img {
        width: min(60vw, 180px);
        max-height: 22vh;
    }
    
    .logo-arc-outer {
        width: min(75vw, 260px);
        height: min(75vw, 260px);
        border-width: 2px;
    }
    
    .logo-arc-inner {
        width: min(65vw, 200px);
        height: min(65vw, 200px);
        border-width: 2px;
    }
    
    .arc-glow-dot {
        width: 7px;
        height: 7px;
        transform: rotate(var(--angle)) translateX(-130px) rotate(calc(var(--angle) * -1));
    }
    
    .logo-name-main {
        font-size: clamp(20px, 4vw, 32px);
        letter-spacing: 4px;
    }
    
    .loader-ring {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 480px) {
    .logo-img {
        width: min(70vw, 150px);
        max-height: 20vh;
    }
    
    .logo-arc-outer {
        width: min(85vw, 220px);
        height: min(85vw, 220px);
        border-width: 2px;
    }
    
    .logo-arc-inner {
        width: min(75vw, 170px);
        height: min(75vw, 170px);
        border-width: 1.5px;
    }
    
    .arc-glow-dot {
        width: 6px;
        height: 6px;
        transform: rotate(var(--angle)) translateX(-110px) rotate(calc(var(--angle) * -1));
    }
    
    .logo-name-main {
        font-size: clamp(16px, 3vw, 24px);
        letter-spacing: 3px;
        white-space: normal;
    }
    
    .loader-ring {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 320px) {
    .logo-img {
        width: 75vw;
        max-height: 18vh;
    }
    
    .logo-arc-outer {
        width: 90vw;
        height: 90vw;
    }
    
    .logo-arc-inner {
        width: 80vw;
        height: 80vw;
    }
    
    .arc-glow-dot {
        width: 5px;
        height: 5px;
        transform: rotate(var(--angle)) translateX(-100px) rotate(calc(var(--angle) * -1));
    }
    
    .logo-name-main {
        font-size: 14px;
        letter-spacing: 2px;
        white-space: normal;
    }
}