/* ==============================================================================
   VITRINE AGRILAND INDUSTRIES CÔTE D'IVOIRE (A I C I)
   Design System Prestige & Terroir Agro-Industriel (Charte Marron Unifiée YIRIFLA)
   Palette Unifiée : Marron Terre YIRIFLA (#8D6A53), Marron Sombre (#6E4D38), Or (#D4AF37)
   ============================================================================== */

/* Polices Google Fonts préchargées via balises <link rel="preconnect"> dans le <head> HTML pour éliminer la waterfall de rendu bloquante */

:root {
  /* Nuance Marron Terre YIRIFLA de référence unifiée (#8D6A53) */
  --aici-primary: #8D6A53;         /* Marron Terre YIRIFLA de référence */
  --aici-primary-dark: #6E4D38;    /* Nuance marron plus soutenue harmonisée */
  --aici-primary-light: #8D6A53;   /* Marron Terre YIRIFLA */
  --aici-emerald: #8D6A53;         /* Remplacement par le marron YIRIFLA */
  
  --aici-cacao: #8D6A53;           /* Teinte exacte du bandeau & compteurs */
  --aici-cacao-dark: #6E4D38;      /* Nuance marron harmonisée */
  --aici-amber: #C57A44;           /* Ambre Cacao chaud */
  
  --aici-gold: #D4AF37;
  --aici-gold-light: #F3E5AB;
  --aici-gold-dark: #AA820A;
  --aici-accent: #8D6A53;
  --aici-bg-light: #18110D;        /* Fond Dark Luxury Cacao conforme au Hero */
  --aici-bg-card-light: #241711;   /* Fond Carte Cacao Sombre */
  --aici-text-main: #F5EFEB;       /* Texte clair lisible */
  --aici-text-muted: #B3A59B;
  --aici-border: rgba(212, 175, 55, 0.25);
  --aici-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --aici-shadow-hover: 0 20px 45px -10px rgba(0, 0, 0, 0.7);
}

.dark {
  --aici-bg-light: #160F0B;
  --aici-bg-card-light: #241912;
  --aici-text-main: #F5EFEB;
  --aici-text-muted: #B3A59B;
  --aici-border: rgba(212, 175, 55, 0.25);
  --aici-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  --aici-shadow-hover: 0 20px 45px -10px rgba(0, 0, 0, 0.7);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--aici-text-main);
  background-color: var(--aici-bg-light);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.font-serif-luxury {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

/* Header & Navigation Fixe Flottante */
.aici-navbar {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(141, 106, 83, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .aici-navbar {
  background-color: rgba(36, 23, 17, 0.95);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.aici-navbar.scrolled {
  box-shadow: 0 10px 30px rgba(36, 23, 17, 0.1);
}

/* Nav Link Hover Effect */
.aici-nav-link {
  position: relative;
  font-weight: 500;
  color: var(--aici-text-main);
  transition: color 0.2s ease;
}

.aici-nav-link:hover {
  color: #8D6A53;
}

.aici-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #8D6A53, #D4AF37);
  transition: width 0.3s ease;
}

.aici-nav-link:hover::after {
  width: 100%;
}

/* Dropdown Menu Moderne */
.aici-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover .aici-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==============================================================================
   HERO VIDÉO RESPONSIVE MULTI-FORMATS PRESTIGE
   (Très Petits, Petits, Mobiles, Tablettes, Laptops, Desktops, Ultra-Wide 21:9 & 32:9)
   ============================================================================== */
.aici-hero {
  position: relative;
  background-color: #0b0907;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: 0;
  /* Format 1 : Très petits écrans (< 380px, ex: 320px) */
  min-height: 56vh;
  min-height: 56dvh;
  padding-top: 1.5rem;
}

@media (min-width: 380px) and (max-width: 479px) {
  .aici-hero {
    min-height: 65vh;
    min-height: 65dvh;
    padding-top: 2.5rem;
  }
}

/* Format 2 : Petits écrans & Mobiles (>= 480px) */
@media (min-width: 480px) {
  .aici-hero {
    min-height: 72vh;
    min-height: 72dvh;
    padding-top: 3.5rem;
  }
}

/* Format 3 : Tablettes Portrait & Paysage (>= 640px) */
@media (min-width: 640px) {
  .aici-hero {
    min-height: 75vh;
    min-height: 75dvh;
  }
}

/* Format 4 : Tablettes Grandes & Petits Laptops (>= 768px) */
@media (min-width: 768px) {
  .aici-hero {
    min-height: 78vh;
    min-height: 78dvh;
  }
}

/* Format 5 : Laptops Standards (>= 1024px) */
@media (min-width: 1024px) {
  .aici-hero {
    min-height: calc(100vh - 8.5rem);
    min-height: calc(100dvh - 8.5rem);
    max-height: 850px;
    padding-top: 4.5rem;
  }
}

/* Format 6 : Desktops Full HD (>= 1440px) */
@media (min-width: 1440px) {
  .aici-hero {
    min-height: calc(100vh - 9rem);
    min-height: calc(100dvh - 9rem);
    max-height: 920px;
  }
}

/* Format 7 : Ultra-Wide (>= 2000px, 2560px, 3440px, et Ratios Panoramiques) */
@media (min-width: 2000px), (min-aspect-ratio: 18/9) {
  .aici-hero {
    min-height: 75vh;
    max-height: 1000px;
  }
}

/* Super Ultra-Wide (32:9, 3840x1080, 5120x1440) */
@media (min-aspect-ratio: 24/9) {
  .aici-hero {
    min-height: 70vh;
    max-height: 960px;
  }
}

/* ------------------------------------------------------------------------------
   Balise Vidéo Responsive & Calibrage Optique Multi-Viewports
   ------------------------------------------------------------------------------ */
.aici-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transform: translateZ(0);
  will-change: transform;
  /* Très petits écrans (< 360px) : centré haut sur le visage et le flacon */
  object-position: 50% 18%;
}

@media (min-width: 360px) and (max-width: 479px) {
  .aici-hero-video {
    object-position: 50% 20%;
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .aici-hero-video {
    object-position: 50% 22%;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .aici-hero-video {
    object-position: 50% 24%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aici-hero-video {
    object-position: 50% 26%;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .aici-hero-video {
    object-position: 50% 32%;
  }
}

@media (min-width: 1440px) and (max-width: 1999px) {
  .aici-hero-video {
    object-position: 50% 36%;
  }
}

/* Ultra-Wide (21:9) */
@media (min-width: 2000px), (min-aspect-ratio: 18/9) {
  .aici-hero-video {
    object-position: 50% 34%;
  }
}

/* Super Ultra-Wide (32:9) */
@media (min-aspect-ratio: 24/9) {
  .aici-hero-video {
    object-position: 50% 38%;
  }
}

/* Voile Dégradé Cinématique Protecteur (Garantit contraste et netteté vidéo) */
.aici-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0.20) 60%,
    rgba(0, 0, 0, 0.82) 100%
  );
}

.aici-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Zone d'action et titre du bas du hero multi-écrans */
.aici-hero-bottom-bar {
  width: 100%;
  position: relative;
  z-index: 20;
  /* Dégagement de sécurité à droite pour préserver l'accès au dock WhatsApp/Socials */
  padding-right: 3.5rem;
}

@media (min-width: 640px) {
  .aici-hero-bottom-bar {
    padding-right: 4.75rem;
  }
}

@media (min-width: 1440px) {
  .aici-hero-bottom-bar {
    padding-right: 5.5rem;
  }
}

.aici-hero-title {
  font-family: var(--font-luxury, "Cinzel", "Playfair Display", Georgia, serif);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #D4AF37;
  background: linear-gradient(110deg, #8a6a1f 0%, #D4AF37 25%, #F9E9B3 50%, #D4AF37 75%, #8a6a1f 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aici-gold-flow 7s ease-in-out infinite;
  font-size: 0.9rem;
}

@media (min-width: 380px) {
  .aici-hero-title {
    font-size: 1.05rem;
  }
}

@media (min-width: 640px) {
  .aici-hero-title {
    font-size: 1.25rem;
  }
}

/* Une seule ligne horizontale a partir de tablette : taille fluide anti-debordement */
@media (min-width: 768px) {
  .aici-hero-title {
    white-space: nowrap;
    font-size: clamp(0.8rem, 1.05vw, 1.35rem);
  }
}

/* Flux d'or : balayage continu du degrade doré */
@keyframes aici-gold-flow {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aici-hero-title {
    animation: none;
  }
}

html.aici-anim-off .aici-hero-title {
  animation: none;
  white-space: normal;
}

/* Boutons d'action hero */
.aici-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
}

@media (min-width: 420px) {
  .aici-hero-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .aici-hero-actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .aici-hero-actions {
    margin-right: 4.5rem;
  }
}

/* ==============================================================================
   DOCK FLOTTANT CONTACTS & RÉSEAUX OFFICIELS YIRIFLA (100% VISIBLE TOUS ÉCRANS)
   Affichage complet des 5 icônes sur mobiles, tablettes et desktop avec anti-coupure
   ============================================================================== */
.aici-floating-dock {
  position: fixed !important;
  z-index: 50 !important;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 12px)) !important;
  right: max(0.65rem, env(safe-area-inset-right, 10px)) !important;
}

.aici-floating-dock .aici-secondary-socials {
  display: flex !important;
}

/* Optimisation ultra-compacte anti-débordement sur petits écrans et mobiles (<640px) */
@media (max-width: 639.98px) {
  .aici-floating-dock {
    gap: 0.35rem !important;
    bottom: max(0.65rem, env(safe-area-inset-bottom, 10px)) !important;
    right: max(0.5rem, env(safe-area-inset-right, 8px)) !important;
  }
  .aici-floating-dock .aici-secondary-socials {
    gap: 0.35rem !important;
  }
  .aici-floating-dock a {
    padding: 0.2rem 0.25rem !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22) !important;
  }
  .aici-floating-dock a > div.w-8.h-8 {
    width: 1.9rem !important;
    height: 1.9rem !important;
    font-size: 0.75rem !important;
  }
  .aici-floating-dock a > div.w-9.h-9,
  .aici-floating-dock a > div.sm\:w-8 {
    width: 2.15rem !important;
    height: 2.15rem !important;
    font-size: 0.95rem !important;
  }
}

/* ==============================================================================
   HERO BANNIÈRES PRESTIGE : TEXTES ET REFLETS DORÉS CHATOYANTS (STITCH LUXURY)
   ============================================================================== */
@keyframes heroBadgeFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

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

@keyframes iconPulseBadge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.22);
    color: #F3E5AB;
  }
}

@keyframes goldShimmerSweep {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.anim-hero-badge {
  animation: heroBadgeFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.anim-hero-badge i {
  display: inline-block;
  animation: iconPulseBadge 2.8s ease-in-out infinite;
}

.anim-hero-title {
  animation: heroTitleFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
  will-change: transform, opacity;
}

.anim-hero-shimmer {
  background: linear-gradient(90deg, #F3E5AB 0%, #ffffff 35%, #D4AF37 65%, #F3E5AB 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: goldShimmerSweep 5s linear infinite;
  display: inline-block;
}

.anim-hero-desc {
  animation: heroTextFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
  will-change: transform, opacity;
}

/* Ruban Statistique Signature */
.aici-stats-ribbon {
  background: linear-gradient(90deg, #6E4D38 0%, #8D6A53 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.aici-stat-item {
  position: relative;
}

.aici-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}

@media (max-width: 768px) {
  .aici-stat-item::after {
    display: none;
  }
}

/* Cartes de Pôles Métiers & Solutions */
.aici-card-pole {
  background-color: rgba(36, 23, 17, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.aici-card-pole::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8D6A53, #D4AF37);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.aici-card-pole:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.7);
  border-color: rgba(212, 175, 55, 0.5);
}

.aici-card-pole:hover::before {
  opacity: 1;
}

.aici-card-pole h3 {
  color: #FFFFFF;
  transition: color 0.25s ease;
}

.aici-card-pole:hover h3 {
  color: #F3E5AB;
}

/* Harmonisation Inconditionnelle Charte Dark Luxury Cacao & Or pour TOUS les 7 Pôles AICI */
.aici-card-pole .w-14.h-14 {
  background: linear-gradient(135deg, rgba(45, 30, 22, 0.95), rgba(28, 19, 14, 0.95)) !important;
  color: #D4AF37 !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.aici-card-pole .w-14.h-14 i {
  color: #D4AF37 !important;
}

.aici-card-pole .w-16.h-16 {
  background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%) !important;
  color: #18110D !important;
  border: 1px solid rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.25) !important;
}

.aici-card-pole .w-16.h-16 i {
  color: #18110D !important;
}

.aici-card-pole span[class*="rounded-full"] {
  background-color: rgba(42, 29, 23, 0.9) !important;
  color: #D4AF37 !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

.aici-card-pole span[class*="tracking-wider"] {
  color: #D4AF37 !important;
}

/* Harmonisation Inconditionnelle Liens & Boutons "En savoir plus" */
.aici-card-pole a,
a.pole-more-link,
a[class*="text-emerald"],
a[class*="text-green"],
a:has(i.fa-arrow-right) {
  color: #D4AF37 !important;
  font-weight: 700;
  transition: all 0.2s ease;
}

.aici-card-pole a:hover,
a.pole-more-link:hover,
a[class*="text-emerald"]:hover,
a[class*="text-green"]:hover,
a:has(i.fa-arrow-right):hover {
  color: #F3E5AB !important;
  transform: translateX(3px);
}

.aici-card-pole a i,
a.pole-more-link i,
a:has(i.fa-arrow-right) i {
  color: #D4AF37 !important;
  transition: transform 0.2s ease;
}

.aici-card-pole a:hover i,
a.pole-more-link:hover i,
a:has(i.fa-arrow-right):hover i {
  color: #F3E5AB !important;
  transform: translateX(3px);
}

/* Badge de statut / Tag */
.aici-badge-gold {
  background: rgba(212, 175, 55, 0.12);
  color: #B45309;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.dark .aici-badge-gold {
  background: rgba(212, 175, 55, 0.18);
  color: #F3E5AB;
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.aici-badge-bio {
  background: rgba(141, 106, 83, 0.12);
  color: #8D6A53;
  border: 1px solid rgba(141, 106, 83, 0.3);
}

.dark .aici-badge-bio {
  background: rgba(141, 106, 83, 0.2);
  color: #D4AF37;
  border: 1px solid rgba(141, 106, 83, 0.4);
}

/* Citation du Fondateur (Marron Terre YIRIFLA Unifié #8D6A53) */
.aici-quote-card {
  background: linear-gradient(135deg, #8D6A53 0%, #6E4D38 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 1.5rem;
  box-shadow: 0 20px 45px -10px rgba(141, 106, 83, 0.35);
  position: relative;
  overflow: hidden;
}

.aici-quote-card::after {
  content: '“';
  font-family: 'Playfair Display', serif;
  position: absolute;
  right: 2rem;
  bottom: -2rem;
  font-size: 14rem;
  color: rgba(212, 175, 55, 0.05);
  line-height: 1;
  pointer-events: none;
}

/* Boutons Signature (Charte Marron Terre & Bois YIRIFLA #8D6A53) */
.btn-aici-gold,
.btn-aici-emerald,
.btn-aici-cacao {
  background: linear-gradient(135deg, #8D6A53 0%, #6E4D38 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 0.75rem;
  padding: 0.85rem 1.75rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(141, 106, 83, 0.28) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.btn-aici-gold:hover,
.btn-aici-emerald:hover,
.btn-aici-cacao:hover {
  background: linear-gradient(135deg, #7A5741 0%, #5B3C29 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(141, 106, 83, 0.42) !important;
  color: #FFFFFF !important;
}

.btn-aici-gold i,
.btn-aici-emerald i,
.btn-aici-cacao i {
  color: #F3E5AB !important;
}

.btn-aici-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #FFFFFF !important;
  font-weight: 600;
  border-radius: 0.75rem;
  padding: 0.85rem 1.75rem;
  transition: all 0.3s ease;
  background: rgba(141, 106, 83, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn-aici-outline:hover {
  border-color: #8D6A53 !important;
  color: #FFFFFF !important;
  background: #8D6A53 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(141, 106, 83, 0.35);
}

/* Footer de Prestige (Charte Terre Cacao YIRIFLA #8D6A53) */
.aici-footer,
.vitrine-footer {
  background: #8D6A53 !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.aici-footer a,
.vitrine-footer a {
  color: rgba(255, 255, 255, 0.95);
  transition: all 0.2s ease;
}

.aici-footer a:hover,
.vitrine-footer a:hover {
  color: #F3E5AB !important;
}

/* Tableaux et simulateur */
.aici-calc-box {
  background: var(--aici-bg-card-light);
  border: 1px solid var(--aici-border);
  border-radius: 1.25rem;
  box-shadow: var(--aici-shadow);
}

/* ==============================================================================
   STITCH AI DESIGN SYSTEM INTEGRATIONS
   ============================================================================== */
.brass-grid-line {
  background-image: linear-gradient(to right, rgba(212, 175, 55, 0.08) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(212, 175, 55, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
}

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

/* Dossier flottant en verre translucide (ne recouvre pas la vidéo) */
.stitch-floating-dossier {
  background: rgba(28, 20, 16, 0.65);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(141, 106, 83, 0.35);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

.stitch-badge-glow {
  background: rgba(45, 30, 22, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

/* ==============================================================================
   OPEN-DESIGN & TERRACOTTA LUXURY ENHANCEMENTS
   Inspiré des design systems d'OpenDesign (Terracotta, Bento & Glassmorphism)
   ============================================================================== */
.bento-stat-card {
  background: rgba(36, 23, 17, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 1.25rem;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.dark .bento-stat-card {
  background: rgba(36, 23, 17, 0.88);
  border-color: rgba(212, 175, 55, 0.25);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5);
}

.bento-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(141, 106, 83, 0.18);
  border-color: rgba(212, 175, 55, 0.4);
}

.dark .bento-stat-card:hover {
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.7);
  border-color: rgba(212, 175, 55, 0.5);
}

.bento-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 70%);
  pointer-events: none;
}

.pole-filter-btn {
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
  border: 1px solid rgba(141, 106, 83, 0.35);
  background: #241711;
  color: #E5E7EB;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pole-filter-btn:hover {
  background: #2A1D17;
  color: #D4AF37;
  border-color: #D4AF37;
  transform: translateY(-1px);
}

.pole-filter-btn.active {
  background: #D4AF37;
  color: #18110D;
  border-color: #D4AF37;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
}

.pole-filter-btn.active i {
  color: #18110D;
}

.pulse-dot-green,
.pulse-dot-brown {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8D6A53;
  box-shadow: 0 0 0 0 rgba(141, 106, 83, 0.7);
  animation: pulseBrown 2s infinite cubic-bezier(0.66, 0, 0, 1);
  display: inline-block;
}

@keyframes pulseBrown {
  to {
    box-shadow: 0 0 0 10px rgba(141, 106, 83, 0);
  }
}

.pulse-dot-gold {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D4AF37;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  animation: pulseGold 2s infinite cubic-bezier(0.66, 0, 0, 1);
  display: inline-block;
}

@keyframes pulseGold {
  to {
    box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
  }
}

.terracotta-badge {
  background: rgba(141, 106, 83, 0.12);
  color: #8D6A53;
  border: 1px solid rgba(141, 106, 83, 0.25);
}

.dark .terracotta-badge {
  background: rgba(141, 106, 83, 0.2);
  color: #F3E5AB;
  border-color: rgba(141, 106, 83, 0.4);
}

/* Transitions de Filtrage OpenDesign */
.pole-card-item {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  transform: scale(1);
}

.pole-card-item.pole-card-hidden {
  opacity: 0;
  transform: scale(0.95);
  display: none !important;
}

/* Marquee / Ticker Agro-Industriel OpenDesign */
.aici-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  background: #1C130E;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.aici-marquee-track {
  display: inline-flex;
  gap: 3rem;
  animation: aiciMarquee 40s linear infinite;
  padding: 0.65rem 0;
}

.aici-marquee-container:hover .aici-marquee-track {
  animation-play-state: paused;
}

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

/* Bouton Direct WhatsApp Agro-Bio */
.btn-aici-whatsapp {
  background: linear-gradient(135deg, #8D6A53 0%, #6E4D38 100%);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 0.75rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(141, 106, 83, 0.25);
}

.btn-aici-whatsapp:hover {
  background: linear-gradient(135deg, #8D6A53 0%, #6E4D38 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(141, 106, 83, 0.35);
}

/* Badges Shimmer Prestige */
.aici-shimmer {
  position: relative;
  overflow: hidden;
}

.aici-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: rotate(30deg);
  animation: aiciShimmer 6s infinite;
}

@keyframes aiciShimmer {
  0% { transform: translate(-100%, -100%) rotate(30deg); }
  30%, 100% { transform: translate(100%, 100%) rotate(30deg); }
}

/* Raccourcis Map Azaguié */
.map-shortcut-btn {
  padding: 0.5rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: #241711;
  color: #E5E7EB;
  border: 1px solid rgba(141, 106, 83, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.map-shortcut-btn:hover {
  background: #8D6A53;
  color: #FFFFFF;
  border-color: #D4AF37;
  transform: translateY(-1px);
}

/* Scroll Reveal OpenDesign — IntersectionObserver natif, zéro dépendance.
   Respecte prefers-reduced-motion (accessibilité WCAG). */
.od-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;
}

.od-reveal.od-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.od-reveal-delay-1 { transition-delay: 0.08s; }
.od-reveal-delay-2 { transition-delay: 0.16s; }
.od-reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .od-reveal,
  .od-reveal.od-reveal-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==============================================================================
   SYNCHRONISATION VIDÉO TIMELINE ("AU FUR ET À MESURE QUE LA VIDÉO AVANCE")
   ============================================================================== */
.video-sync-step {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  filter: blur(5px);
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.video-sync-step.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.video-sync-highlight {
  animation: videoStepHighlight 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes videoStepHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  }
  50% {
    box-shadow: 0 0 25px 4px rgba(212, 175, 55, 0.45);
  }
  100% {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-sync-step {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }
}


/* ==============================================================================
   AICI MOTION SYSTEM — Révélations au scroll, 100% natives, zéro dépendance
   Patron : IntersectionObserver + CSS transforms/compositing.
   Les éléments sont "settled" après animation pour rendre les hovers instantanés.
   ============================================================================== */
.aici-motion {
  --aici-motion-distance: 34px;
  --aici-motion-delay: 0ms;
  --aici-motion-duration: 780ms;
  --aici-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  opacity: 0;
  transform: perspective(900px) translate3d(0, var(--aici-motion-distance), 0) scale(0.985);
  filter: blur(7px);
  transition:
    opacity var(--aici-motion-duration) var(--aici-motion-ease) var(--aici-motion-delay),
    transform var(--aici-motion-duration) var(--aici-motion-ease) var(--aici-motion-delay),
    filter var(--aici-motion-duration) var(--aici-motion-ease) var(--aici-motion-delay);
  will-change: opacity, transform, filter;
}

.aici-motion.aici-motion-scale {
  --aici-motion-distance: 24px;
  transform: perspective(900px) translate3d(0, var(--aici-motion-distance), 0) scale(0.93);
}

.aici-motion.aici-motion-left {
  --aici-motion-distance: 24px;
  transform: perspective(900px) translate3d(-44px, var(--aici-motion-distance), 0) rotateY(-4deg);
}

.aici-motion.aici-motion-right {
  --aici-motion-distance: 24px;
  transform: perspective(900px) translate3d(44px, var(--aici-motion-distance), 0) rotateY(4deg);
}

.aici-motion.aici-motion-in {
  opacity: 1;
  transform: perspective(900px) translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Après le reveal : on retire les classes motion pour garder hover natif rapide */
.aici-motion-settled {
  opacity: 1;
  transform: none;
  filter: none;
}

.aici-heading {
  position: relative;
}

.aici-heading::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: min(120px, 28vw);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(141, 106, 83, 0) 0%, #D4AF37 50%, rgba(141, 106, 83, 0) 100%);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.45);
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition:
    opacity 0.7s ease var(--aici-motion-delay),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--aici-motion-delay) + 180ms);
  pointer-events: none;
}

.aici-heading.aici-motion-in::after,
.aici-heading.aici-motion-settled::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.aici-counter-live {
  text-shadow: 0 8px 22px rgba(212, 175, 55, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .aici-motion,
  .aici-motion.aici-motion-scale,
  .aici-motion.aici-motion-left,
  .aici-motion.aici-motion-right,
  .aici-motion.aici-motion-in,
  .aici-motion-settled {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .aici-heading::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
    transition: none !important;
  }
}

/* ==============================================================================
   TYPOGRAPHIE 3D RELIEF CHISELÉ - AGRILAND INDUSTRIES CÔTE D'IVOIRE
   ============================================================================== */
.aici-text-3d-blue {
  color: #38BDF8;
  font-weight: 900;
  letter-spacing: 0.05em;
  display: inline-block;
  text-shadow: 
    0 -1px 0 rgba(255, 255, 255, 0.8),
    0 1px 0 #0284c7,
    0 2px 0 #0369a1,
    0 3px 0 #0c4a6e,
    0 4px 3px rgba(0, 0, 0, 0.85);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.aici-text-3d-gold {
  color: #FFD700;
  font-weight: 900;
  letter-spacing: 0.05em;
  display: inline-block;
  text-shadow: 
    0 -1px 0 rgba(255, 255, 255, 0.9),
    0 1px 0 #ca8a04,
    0 2px 0 #92400e,
    0 3px 0 #451a03,
    0 4px 3px rgba(0, 0, 0, 0.85);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.aici-text-3d-green {
  color: #25D366;
  font-weight: 900;
  letter-spacing: 0.05em;
  display: inline-block;
  text-shadow: 
    0 -1px 0 rgba(255, 255, 255, 0.85),
    0 1px 0 #1da851,
    0 2px 0 #128c7e,
    0 3px 0 #075e54,
    0 4px 3px rgba(0, 0, 0, 0.85);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* ==============================================================================
   CARTES DES 4 PÔLES D'EXCELLENCE AICI (COULEUR FOOTER UNIFIÉE #8D6A53)
   ============================================================================== */
.vitrine-section-poles_excellence .aici-pole-card {
  background-color: #8D6A53 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #FFFFFF !important;
}

.vitrine-section-poles_excellence .aici-pole-card h3 {
  color: #FFFFFF !important;
  transition: color 0.2s ease;
}

.vitrine-section-poles_excellence .aici-pole-card:hover h3 {
  color: #F3E5AB !important;
}

.vitrine-section-poles_excellence .aici-pole-card p {
  color: rgba(255, 255, 255, 0.90) !important;
}

.vitrine-section-poles_excellence .aici-pole-card span.aici-pole-eyebrow {
  color: #F3E5AB !important;
}

.vitrine-section-poles_excellence .aici-pole-card a.aici-pole-link {
  color: #F3E5AB !important;
}

.vitrine-section-poles_excellence .aici-pole-card a.aici-pole-link:hover {
  color: #FFFFFF !important;
}

.vitrine-section-poles_excellence .aici-pole-card .aici-pole-icon {
  background: linear-gradient(135deg, #6A4B35 0%, #4A3222 100%) !important;
  color: #F3E5AB !important;
  border: 1px solid rgba(243, 229, 171, 0.4) !important;
}