/**
 * RESPONSIVE STYLES SPÉCIFIQUES POUR INDEX.PHP
 * Gère les styles inline et les éléments personnalisés
 */

/* ============================================
   RESPONSIVE - TABLET (768px et moins)
   ============================================ */
@media (max-width: 768px) {
    /* Education Cycles Grid */
    .education-cycles-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Training Courses Grid */
    .training-courses-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Cycle cards - Ajustements pour inline styles */
    .cycle-card > div:first-child {
        height: 220px !important;
    }
    
    .cycle-card > div:last-child {
        padding: 1.75rem !important;
    }
    
    .cycle-card h3 {
        font-size: 1.4rem !important;
    }
    
    /* Training cards - Ajustements pour inline styles */
    .training-card > div:first-child {
        height: 220px !important;
    }
    
    .training-card > div:last-child {
        padding: 1.75rem !important;
    }
    
    .training-card h3 {
        font-size: 1.3rem !important;
    }
    
    .training-card p {
        font-size: 1rem !important;
    }
}

/* ============================================
   RESPONSIVE - MOBILE (480px et moins)
   ============================================ */
@media (max-width: 480px) {
    /* Container padding pour très petits écrans */
    .container {
        padding: 0 1rem;
    }
    
    /* Education Cycles Grid */
    .education-cycles-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-top: 2rem !important;
    }
    
    /* Cycle cards */
    .cycle-card > div:first-child {
        height: 180px !important;
    }
    
    .cycle-card > div:last-child {
        padding: 1.5rem !important;
    }
    
    .cycle-card h3 {
        font-size: 1.2rem !important;
        gap: 0.5rem !important;
    }
    
    .cycle-card h3 i {
        font-size: 1.1rem !important;
    }
    
    .cycle-card p {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Cycle badges */
    .cycle-badge {
        padding: 0.4rem 1rem !important;
        font-size: 0.8rem !important;
    }
    
    .cycle-badge i {
        font-size: 0.9rem !important;
    }
    
    /* Cycle meta info */
    .cycle-card > div:last-child > div:last-child {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .cycle-card > div:last-child > div:last-child > div {
        font-size: 0.85rem !important;
    }
    
    /* Training Courses Grid */
    .training-courses-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-top: 2rem !important;
    }
    
    /* Training cards */
    .training-card > div:first-child {
        height: 180px !important;
    }
    
    .training-card > div:last-child {
        padding: 1.5rem !important;
    }
    
    .training-card h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .training-card p {
        font-size: 0.9rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Training meta */
    .training-card > div:last-child > div:nth-child(2) {
        gap: 1rem !important;
    }
    
    .training-card > div:last-child > div:nth-child(2) > div {
        font-size: 0.85rem !important;
    }
    
    /* Training price and button */
    .training-card > div:last-child > div:last-child {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .training-card > div:last-child > div:last-child > div:first-child {
        font-size: 1.3rem !important;
    }
    
    /* Button container at the bottom */
    .section-footer {
        text-align: center;
        margin-top: 2rem !important;
    }
    
    .section-footer .btn {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* CTA Buttons section */
    .hero-buttons a,
    .cta-buttons a {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Live sessions metadata */
    .course-meta > div {
        font-size: 0.8rem !important;
    }
    
    .course-meta i {
        font-size: 0.9rem !important;
    }
    
    /* Teacher info inline */
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 0.75rem"] {
        padding: 0.875rem !important;
    }
    
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 0.75rem"] img {
        width: 38px !important;
        height: 38px !important;
    }
    
    /* Course prices */
    .course-price {
        font-size: 1.15rem !important;
    }
    
    .price-amount {
        font-size: 1.15rem !important;
    }
    
    .price-currency {
        font-size: 0.85rem !important;
    }
    
    /* Rainbow border button */
    .rainbow-border {
        width: 100% !important;
    }
}

/* ============================================
   TRÈS PETITS ÉCRANS (360px et moins)
   ============================================ */
@media (max-width: 360px) {
    .cycle-card h3 {
        font-size: 1.1rem !important;
    }
    
    .cycle-card p {
        font-size: 0.85rem !important;
    }
    
    .training-card h3 {
        font-size: 1.05rem !important;
    }
    
    .training-card p {
        font-size: 0.85rem !important;
    }
    
    .section-badge {
        padding: 0.4rem 1rem !important;
        font-size: 0.7rem !important;
    }
    
    .section-title {
        font-size: 1.4rem !important;
    }
    
    .section-subtitle {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   ORIENTATION LANDSCAPE SUR MOBILE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: auto !important;
        padding: 3rem 0 !important;
    }
    
    .hero-content {
        padding: 3rem 1.5rem 2rem !important;
    }
    
    .hero-image {
        max-height: 200px !important;
    }
    
    .hero-image img {
        max-height: 200px !important;
    }
}