/* ============================================================
   AGENCY INTRO — Section présentation agence
   Inspiré de Supabase Database/Auth sections
   ============================================================ */

/* --- Section ---------------------------------------------- */
.ai {
  background: var(--color-bg);
  padding:    var(--space-20) 0;
  overflow:   hidden;
  transition: background var(--transition-slow);
}

/* --- Container -------------------------------------------- */
.ai__container {
  width:         100%;
  max-width:     var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 768px)  { .ai__container { padding-inline: var(--space-10); } }
@media (min-width: 1280px) { .ai__container { padding-inline: var(--space-16); } }

/* --- Grid 2 colonnes -------------------------------------- */
.ai__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-12);
  align-items:           center;
}

@media (min-width: 768px)  {
  .ai__grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

@media (min-width: 1024px) {
  .ai__grid { grid-template-columns: 5fr 6fr; gap: var(--space-16); }
}

/* ============================================================
   COL GAUCHE — TEXTE
   ============================================================ */

/* --- En-tête -------------------------------------------- */
.ai__header {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-bottom: var(--space-6);
}

.ai__icon {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         32px;
  height:        32px;
  border-radius: var(--radius-sm);
  background:    var(--color-accent-subtle);
  color:         var(--color-accent);
  flex-shrink:   0;
}

.ai__label {
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--color-accent);
}

/* --- Titre ---------------------------------------------- */
.ai__title {
  font-size:      var(--text-4xl);
  font-weight:    var(--font-weight-bold);
  line-height:    1.1;
  letter-spacing: -0.025em;
  color:          var(--color-text);
  margin-bottom:  var(--space-5);
  transition:     color var(--transition-slow);
}

@media (min-width: 1024px) {
  .ai__title { font-size: var(--text-5xl); }
}

/* --- Sous-titre ----------------------------------------- */
.ai__subtitle {
  font-size:     var(--text-lg);
  line-height:   var(--line-height-base);
  color:         var(--color-text-secondary);
  margin-bottom: var(--space-4);
  max-width:     520px;
}

/* --- Description --------------------------------------- */
.ai__description {
  font-size:     var(--text-base);
  line-height:   var(--line-height-relaxed);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width:     520px;
}

/* --- Liste des points ---------------------------------- */
.ai__features {
  list-style:    none;
  margin:        0 0 var(--space-10);
  padding:       0;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
}

.ai__feature {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: 1.5;
}

.ai__feature-dot {
  display:       block;
  width:         6px;
  height:        6px;
  border-radius: var(--radius-full);
  background:    var(--color-accent);
  flex-shrink:   0;
  margin-top:    6px;
}

/* --- CTAs ---------------------------------------------- */
.ai__actions {
  display:   flex;
  gap:       var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .ai__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   COL DROITE — VISUEL
   ============================================================ */

.ai__visual {
  position: relative;
}

/* --- Carte principale ----------------------------------- */
.ai__card {
  background:    var(--color-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  transition:
    transform    var(--transition-base),
    box-shadow   var(--transition-base),
    border-color var(--transition-base);
}

.ai__card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--shadow-lg), 0 0 0 1px var(--color-accent-subtle);
  border-color: var(--color-accent-subtle);
}

/* --- Header de la carte (macOS style) ------------------- */
.ai__card-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ai__card-dot {
  display:       block;
  width:         10px;
  height:        10px;
  border-radius: var(--radius-full);
}

.ai__card-dot--green  { background: #3ecf8e; }
.ai__card-dot--yellow { background: #f0c040; }
.ai__card-dot--red    { background: #ef4444; }

.ai__card-title {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  margin-left: var(--space-2);
  font-family: var(--font-mono);
}

/* --- Corps de la carte ---------------------------------- */
.ai__card-body {
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap:     var(--space-8);
}

/* ============================================================
   VISUEL MAP — Dakar ↔ France
   ============================================================ */

.ai__map {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
}

/* Nœuds localisation */
.ai__map-node {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  flex-shrink:    0;
}

.ai__map-pin {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-full);
  background:      var(--color-accent-subtle);
  color:           var(--color-accent);
  border:          1px solid var(--color-accent);
  box-shadow:      0 0 16px var(--color-accent-glow);
}

.ai__map-city {
  font-size:   var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color:       var(--color-text);
  margin:      0;
}

.ai__map-country {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
  margin:    0;
}

/* Ligne de connexion */
.ai__map-connection {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  position:       relative;
}

.ai__map-line {
  width:         100%;
  height:        2px;
  background:    linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent-subtle) 50%,
    var(--color-accent) 100%
  );
  border-radius: var(--radius-full);
  position:      relative;
  overflow:      hidden;
}

/* Point animé qui se déplace sur la ligne */
.ai__map-pulse {
  position:   absolute;
  top:        50%;
  left:       0;
  transform:  translateY(-50%);
  width:      8px;
  height:     8px;
  border-radius: var(--radius-full);
  background: #ffffff;
  box-shadow: 0 0 8px var(--color-accent);
  animation:  mapPulse 2s ease-in-out infinite;
}

@keyframes mapPulse {
  0%   { left: 0;    opacity: 1; }
  50%  { left: calc(100% - 8px); opacity: 1; }
  51%  { opacity: 0; left: calc(100% - 8px); }
  52%  { opacity: 0; left: 0; }
  53%  { opacity: 1; left: 0; }
  100% { left: 0;    opacity: 1; }
}

.ai__map-badge {
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-accent);
  background:     var(--color-accent-subtle);
  border:         1px solid var(--color-accent);
  border-radius:  var(--radius-full);
  padding:        2px var(--space-3);
  white-space:    nowrap;
}

/* ============================================================
   STATS
   ============================================================ */
.ai__stats {
  display:     flex;
  align-items: center;
  justify-content: space-around;
  padding:     var(--space-5) var(--space-4);
  background:  var(--color-bg);
  border:      1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  gap:         var(--space-4);
}

.ai__stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-1);
}

.ai__stat-value {
  font-size:   var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color:       var(--color-text);
  letter-spacing: -0.03em;
}

.ai__stat-plus {
  font-size:   var(--text-base);
  color:       var(--color-accent);
}

.ai__stat-label {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
}

.ai__stat-divider {
  width:         1px;
  height:        36px;
  background:    var(--color-border-subtle);
  flex-shrink:   0;
}

/* ============================================================
   STACK TAGS
   ============================================================ */
.ai__stack {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.ai__stack-tag {
  font-size:     var(--text-xs);
  font-weight:   var(--font-weight-medium);
  color:         var(--color-text-secondary);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding:       3px var(--space-3);
  white-space:   nowrap;
  transition:    border-color var(--transition-fast), color var(--transition-fast);
}

.ai__stack-tag--accent {
  color:        var(--color-accent);
  border-color: var(--color-accent-subtle);
  background:   var(--color-accent-subtle);
}

.ai__stack-tag:hover {
  border-color: var(--color-accent);
  color:        var(--color-accent);
}

/* ============================================================
   VISUEL STACK (visual_type=stack)
   ============================================================ */
.ai__card-body--code {
  padding: 0;
}

.ai__code {
  margin:      0;
  padding:     var(--space-6);
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
  line-height: 1.7;
  color:       var(--color-text-secondary);
  overflow-x:  auto;
}

.ai__code-key { color: var(--color-accent); }
.ai__code-str { color: #3ecf8e; }

/* ============================================================
   ANIMATIONS D'ENTRÉE (IntersectionObserver)
   ============================================================ */
.ai__content > *,
.ai__visual {
  opacity:   0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ai__content > *:nth-child(1) { transition-delay: 0.00s; }
.ai__content > *:nth-child(2) { transition-delay: 0.06s; }
.ai__content > *:nth-child(3) { transition-delay: 0.12s; }
.ai__content > *:nth-child(4) { transition-delay: 0.18s; }
.ai__content > *:nth-child(5) { transition-delay: 0.24s; }
.ai__content > *:nth-child(6) { transition-delay: 0.30s; }

.ai__visual {
  transition-delay: 0.15s;
  transition-duration: 0.6s;
}

.ai--visible .ai__content > *,
.ai--visible .ai__visual {
  opacity:   1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ai__content > *,
  .ai__visual {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }

  .ai__map-pulse {
    animation: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .ai { padding: var(--space-16) 0; }

  .ai__title    { font-size: var(--text-3xl); }
  .ai__subtitle { font-size: var(--text-base); }

  .ai__stats {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
  }
  .ai__stat-divider { width: 40px; height: 1px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ai__title { font-size: var(--text-4xl); }
}