/* ============================================================================
   FICHIER : responsive-timeline-approche.css
   DESCRIPTION : Timeline mobile COMPLÈTE avec améliorations visuelles
   PROJET : DEADAL Technologies
   DATE : 15 février 2026
   VERSION : 5.0 - COMPLÈTE (inclut toutes les règles mobile)
   ============================================================================ */

/* ==========================================================================
   MOBILE (< 900px) - LAYOUT COMPLET + AMÉLIORATIONS VISUELLES
   ========================================================================== */

@media (max-width: 900px) {
  
  /* === AXE VERTICAL === */
  .axis::before {
    left: 14px !important; /* Positionné pour dots de 22px */
    transform: none !important;
    width: 2px !important; /* Plus épais et visible */
    background: linear-gradient(135deg, #9be9c1 0%, #c7d2fe 100%) !important;
    opacity: 0.8 !important;
  }
  
  /* === GRILLE MOBILE === */
  .axis-item {
    grid-template-columns: 50px 1fr !important; /* Colonne pour dot + colonne pour card */
    column-gap: 1rem !important;
  }
  
  /* === DOTS === */
  .axis-dot {
    grid-column: 1 !important; /* Première colonne */
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow: 0 0 0 5px var(--color-white) !important;
    margin-top: var(--spacing-4) !important; /* Aligné avec le padding-top de la card */
  }
  
  /* Couleurs verts (met01, met02) */
  #met01 .axis-dot,
  #met02 .axis-dot {
    border-color: #10b981 !important;
    background: #d1fae5 !important;
	position: absolute !important;    
	left: 14px !important;
    top: 14px !important;
  }
  
  /* Couleurs bleus (met03, met04) */
  #met03 .axis-dot,
  #met04 .axis-dot {
    border-color: #6366f1 !important;
    background: #e0e7ff !important;
	position: absolute !important;    
	left: 14px !important;
    top: 14px !important;
  }
  
  /* === CARDS === */
  .axis-item.left .axis-card,
  .axis-item.right .axis-card {
    grid-column: 2 !important; /* Deuxième colonne */
  }
  
  /* Masquer les connecteurs horizontaux */
  .axis-item.left .axis-card::after,
  .axis-item.right .axis-card::after {
    display: none !important;
  }
  
  /* === BRIDGE === */
  .axis-bridge {
    grid-template-columns: 50px 1fr !important;
    column-gap: 1rem !important;
  }
  
  .axis-bridge-dot {
    grid-column: 1 !important;
    justify-self: center !important;
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
    border-style: solid !important;
    background: #e0e7ff !important;
    box-shadow: 0 0 0 5px var(--color-white) !important;
	position: absolute !important;
	left: 14px !important;
	top: 14px !important;
  }
  
  .axis-bridge-box {
    grid-column: 2 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}