/**
 * MAIN.CSS - Point d'entrée principal du système CSS modulaire
 * Agence Archimède - Architecture CSS Optimisée
 * 
 * Structure d'imports organisée par ordre de priorité :
 * 1. Core (variables, reset, typography)
 * 2. Layout (header, footer, navigation)
 * 3. Components (boutons, formulaires, services)
 * 4. Sections (hero, vision-mission, réalisations)
 * 5. Pages (styles spécifiques aux pages)
 * 6. Utilities (classes utilitaires)
 */

/* ===== CORE - Fondations ===== */
@import url('./core/variables.61348b28.css');
@import url('./core/reset.915fe2fd.css');
@import url('./core/typography.8851c47c.css');
@import url('./base.b7a9f4da.css');

/* ===== LAYOUT - Structure générale ===== */
@import url('./layout/header.a557b22d.css');

/* ===== COMPONENTS - Composants réutilisables ===== */
@import url('./components.b9647692.css');
@import url('./components/services.2c314f36.css');
@import url('./services.690895f2.css');


/* ===== SECTIONS - Sections spécifiques ===== */
@import url('./sections.49f4aa0a.css');
@import url('./sections/hero.ab0ee715.css');
@import url('./sections/section-2.9c627ef1.css');
@import url('./sections/section-3.cb2379ef.css'); /* Ajout pour importer les styles de la section Nos Offres */
@import url('./sections/section-4.7b49c567.css'); /* Ajout pour importer les styles de la section Notre processus */
@import url('./sections/section-5.eaf5d374.css'); /* Ajout pour importer les styles de la section Pourquoi choisir WebOryon */
@import url('./sections/vision-mission.d3d79e09.css');
@import url('./sections/realisations.3ade16d3.css');
@import url('./sections/section-8.d514f044.css'); /* FAQ - styles compacts */

/* ===== PAGES - Styles spécifiques aux pages ===== */
/* Les styles de pages seront ajoutés ici si nécessaire */

/* ===== UTILITIES - Classes utilitaires ===== */
@import url('./responsive.46873c78.css');
@import url('./animations.5c13e2ae.css');

/* ===== LEGACY - Fichiers temporaires (à supprimer après migration) ===== */
/* Ces imports seront supprimés une fois la migration terminée */
@import url('./offer-comparison.16909b9b.css');
@import url('./offer-details.b8f91a1a.css');
@import url('./offer-hero.3cc9f0ed.css');
@import url('./offer-pages.c535ebb9.css');

/**
 * Notes de migration :
 * - Les fichiers base.css, sections.css et services.css ont été décomposés
 * - Le contenu a été réorganisé selon l'architecture modulaire
 * - Les variables CSS sont centralisées dans core/variables.css
 * - Les styles de reset sont isolés dans core/reset.css
 * - Chaque section a son propre fichier pour une meilleure maintenabilité
 */

/* Fix global: forcer le centrage des sous-titres dans tous les contextes */
.section__header,
.section__header .section__title,
.section__header .section__subtitle {
  text-align: center !important;
}

.section__header .section__subtitle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px; /* optionnel: garde une largeur confortable */
}

/* === Brand Buttons Overrides (violet #7c6cd6) === */
:root {
    --brand-purple: #7c6cd6;
}

/* === CTA Hover Animation (même effet que le bouton header) === */
a.btn,
.btn,
.btn--primary,
.btn--secondary,
.header__cta-button,
.hero__cta-button,
.concept__cta-button,
.cta .btn,
.form-submit,
.portfolio-coming-soon__cta {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

/* Shine sweep */
a.btn::before,
.btn::before,
.btn--primary::before,
.btn--secondary::before,
.header__cta-button::before,
.hero__cta-button::before,
.concept__cta-button::before,
.cta .btn::before,
.form-submit::before,
.portfolio-coming-soon__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

a.btn:hover::before,
.btn:hover::before,
.btn--primary:hover::before,
.btn--secondary:hover::before,
.header__cta-button:hover::before,
.hero__cta-button:hover::before,
.concept__cta-button:hover::before,
.cta .btn:hover::before,
.form-submit:hover::before,
.portfolio-coming-soon__cta:hover::before {
    left: 100%;
}

/* Overlay glow */
a.btn::after,
.btn::after,
.btn--primary::after,
.btn--secondary::after,
.header__cta-button::after,
.hero__cta-button::after,
.concept__cta-button::after,
.cta .btn::after,
.form-submit::after,
.portfolio-coming-soon__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

a.btn:hover::after,
.btn:hover::after,
.btn--primary:hover::after,
.btn--secondary:hover::after,
.header__cta-button:hover::after,
.hero__cta-button:hover::after,
.concept__cta-button:hover::after,
.cta .btn:hover::after,
.form-submit:hover::after,
.portfolio-coming-soon__cta:hover::after {
    opacity: 1;
}

/* Lift + shadow */
/* === Styles spécifiques pour mobile - Section Hero === */
.hero-subtitle-mobile,
.price-note-mobile {
    display: none;
}

@media (max-width: 480px) {
    /* MASQUER TOUT sauf le titre principal sur mobile */
    .hero-subtitle {
        display: none !important;
    }
    
    .hero-pricing {
        display: none !important;
    }
    
    .price-display {
        display: none !important;
    }
    
    .price-note {
        display: none !important;
    }
    
    .hero-benefits {
        display: none !important;
    }
    
    .hero-subtitle-mobile {
        display: none !important;
    }
    
    .price-note-mobile {
        display: none !important;
    }
    
    /* GARDER UNIQUEMENT le titre principal */
    .hero-title {
        display: block !important;
        font-size: 2rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Masquer le badge aussi */
    .hero-badge {
        display: none !important;
    }
}

a.btn:hover,
.btn:hover,
.btn--primary:hover,
.btn--secondary:hover,
.header__cta-button:hover,
.hero__cta-button:hover,
.concept__cta-button:hover,
.cta .btn:hover,
.form-submit:hover,
.portfolio-coming-soon__cta:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 6px 20px rgba(124,108,214,0.25), 0 2px 8px rgba(124, 58, 237, 0.2) !important;
}

/* Focus visible ring (cohérent avec la charte) */
a.btn:focus-visible,
.btn:focus-visible,
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.header__cta-button:focus-visible,
.hero__cta-button:focus-visible,
.concept__cta-button:focus-visible,
.cta .btn:focus-visible,
.form-submit:focus-visible,
.portfolio-coming-soon__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,108,214,0.25), 0 6px 20px rgba(124,108,214,0.25), 0 2px 8px rgba(124,58,237,0.2) !important;
}

a.btn:hover,
.btn:hover,
.btn--primary:hover,
.btn--secondary:hover,
.header__cta-button:hover,
.hero__cta-button:hover,
.concept__cta-button:hover,
.cta .btn:hover,
.form-submit:hover,
.portfolio-coming-soon__cta:hover {
    background: var(--brand-purple) !important;
    background-image: none !important;
    border-color: var(--brand-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(124,108,214,0.35) !important;
}

a.btn:focus, a.btn:active,
.btn:focus, .btn:active,
.btn--primary:focus, .btn--primary:active,
.btn--secondary:focus, .btn--secondary:active,
.header__cta-button:focus, .header__cta-button:active,
.hero__cta-button:focus, .hero__cta-button:active,
.concept__cta-button:focus, .concept__cta-button:active,
.cta .btn:focus, .cta .btn:active,
.form-submit:focus, .form-submit:active,
.portfolio-coming-soon__cta:focus, .portfolio-coming-soon__cta:active {
    background: var(--brand-purple) !important;
    background-image: none !important;
    border-color: var(--brand-purple) !important;
    color: #ffffff !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,108,214,0.25) !important;
}

/* === STYLES TYPOGRAPHIQUES HARMONISÉS AVEC OFFRE-ESSENTIEL (MOBILE UNIQUEMENT) === */
@media (max-width: 768px) {
    /* Police principale Inter */
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        line-height: 1.6 !important;
        color: #333 !important;
    }
    
    /* Titres de sections */
    .section__title {
        font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
        font-weight: 800 !important;
        margin-bottom: 15px !important;
        color: #333 !important;
        line-height: 1.2 !important;
    }
    /* Page d’accueil: titres de section un cran plus petits (hors titre hero) */
    body[data-page="accueil"] .section__title {
        font-size: clamp(1.5rem, 5.2vw, 1.9rem) !important;
        margin-bottom: 12px !important;
        letter-spacing: -0.01em;
    }
    
    /* Sous-titres de sections */
    .section__subtitle {
        font-size: 1.1rem !important;
        color: #666 !important;
        margin-bottom: 50px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    
    /* Titres de cartes de services */
    .service-card__title {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        color: #2d3748 !important;
        line-height: 1.3 !important;
    }
    
    /* Prix des services */
    .price-amount {
        font-size: 3.2rem !important;
        font-weight: 800 !important;
        color: #7c6cd6 !important;
        line-height: 1 !important;
    }
    
    .price-period {
        font-size: 1.2rem !important;
        color: #666 !important;
        font-weight: 500 !important;
        margin-left: 8px !important;
    }
    
    /* Textes des fonctionnalités */
    .feature-item span {
        font-size: 1rem !important;
        color: #4a5568 !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }
    
    /* Boutons CTA */
    .service-card__cta {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        padding: 18px 32px !important;
        border-radius: 12px !important;
    }
    
    /* Titres de processus */
    .timeline__content h3 {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        color: #2d3748 !important;
        line-height: 1.3 !important;
    }
    
    /* Descriptions de processus */
    .timeline__content p {
        font-size: 1rem !important;
        line-height: 1.8 !important;
        color: #4a5568 !important;
        font-weight: 400 !important;
        margin-bottom: 15px !important;
    }
    
    /* Listes de processus */
    .timeline__list li {
        font-size: 1rem !important;
        color: #4a5568 !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        margin-bottom: 8px !important;
    }
    
    /* Titres d'expertise */
    .expertise__col h3 {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        color: #2d3748 !important;
        line-height: 1.3 !important;
    }
    
    /* Listes d'expertise */
    .expertise__list li {
        font-size: 1rem !important;
        color: #4a5568 !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
    
    /* Textes en gras */
    strong {
        color: #2d3748 !important;
        font-weight: 700 !important;
    }
    
    /* Ajustements pour très petits écrans */
    @media (max-width: 480px) {
        .section__title {
            font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
            margin-bottom: 12px !important;
        }
        
        .section__subtitle {
            font-size: 1rem !important;
            margin-bottom: 30px !important;
        }
        
        .service-card__title {
            font-size: 1.3rem !important;
            margin-bottom: 12px !important;
        }
        
        .price-amount {
            font-size: 2.2rem !important;
        }
        
        .price-period {
            font-size: 1rem !important;
        }
        
        .feature-item span {
            font-size: 0.95rem !important;
        }
        
        .service-card__cta {
            font-size: 1rem !important;
            padding: 16px 25px !important;
        }
        
        .timeline__content h3 {
            font-size: 1.3rem !important;
            margin-bottom: 12px !important;
        }
        
        .timeline__content p {
            font-size: 0.95rem !important;
        }
        
        .timeline__list li {
            font-size: 0.95rem !important;
        }
        
        .expertise__col h3 {
            font-size: 1.3rem !important;
            margin-bottom: 12px !important;
        }
        
        .expertise__list li {
            font-size: 0.95rem !important;
        }
    }
}

/* Mobile: réduction des tailles Vision/Mission et Garanties (page d'accueil uniquement) */
@media (max-width: 768px) {
  /* H2: Notre vision & notre mission */
  body[data-page="accueil"] .vision-mission-section h2 {
    font-size: 2.5rem !important;
    line-height: 1.2;
    font-weight: 700 !important;
  }

  /* H3: Notre Vision / Notre Mission */
  body[data-page="accueil"] .vision-mission-section .vision-box h3,
  body[data-page="accueil"] .vision-mission-section .mission-box h3 {
    font-size: clamp(1rem, 4.5vw, 1.2rem);
    line-height: 1.25;
    font-weight: 700 !important;
  }

  /* H2: Nos garanties & engagements (override inline) */
  body[data-page="accueil"] #guarantees h2 {
    font-size: 2.5rem !important;
    line-height: 1.2;
    font-weight: 700 !important;
  }

  /* Concept: cadres légèrement plus gris que "Pourquoi choisir" */
  body[data-page="accueil"] .concept__advantage {
    background: #f9fafb !important;
    border: 1px solid rgba(100, 116, 139, 0.15) !important; /* gris doux */
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  }
}

@media (max-width: 480px) {
  /* H2: Notre vision & notre mission */
  body[data-page="accueil"] .vision-mission-section h2 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    font-weight: 700 !important;
  }

  /* H3: Notre Vision / Notre Mission */
  body[data-page="accueil"] .vision-mission-section .vision-box h3,
  body[data-page="accueil"] .vision-mission-section .mission-box h3 {
    font-size: 1.05rem;
    font-weight: 700 !important;
  }

  /* H2: Nos garanties & engagements (override inline) */
  body[data-page="accueil"] #guarantees h2 {
    font-size: clamp(1.25rem, 7vw, 2rem) !important;
    font-weight: 700 !important;
  }

  /* Concept: aligner la taille avec "Pourquoi choisir" + cadre gris légèrement plus marqué */
  body[data-page="accueil"] .concept__advantages-list {
    gap: 8px !important;
    max-width: 280px !important;
  }
  body[data-page="accueil"] .concept__advantage {
    max-width: 280px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    border: 1px solid rgba(100, 116, 139, 0.18) !important; /* un peu plus grisé que "Pourquoi choisir" */
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  body[data-page="accueil"] .concept__advantage .icon,
  body[data-page="accueil"] .concept__advantage .concept__icon {
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px !important;
  }
  body[data-page="accueil"] .concept__advantage-title {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
  }
  body[data-page="accueil"] .concept__advantage-text {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
}

/* main.css — Bloc mobile pour réduire significativement la taille des cartes "Nos Offres" */
@media (max-width: 768px) {
    /* Réduction des cartes "Nos Offres" sur tablette */
    .service-card {
        padding: 18px 14px !important;
        margin-bottom: 16px !important;
    }

    .service-card__title {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
    }

    .price-amount {
        font-size: 2.2rem !important;
    }

    .price-period {
        font-size: 1rem !important;
    }

    .service-card__features {
        margin-bottom: 12px !important;
    }

    .feature-item {
        margin-bottom: 6px !important;
    }

    .feature-item span {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }

    .service-card__cta {
        font-size: 1rem !important;
        padding: 14px 20px !important;
    }
}

@media (max-width: 480px) {
    /* RÈGLE GLOBALE: Uniformisation de TOUS les H2 sur mobile */
    html h2, body h2, h2 {
        font-size: 1.8rem !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    
    /* Réduction DRASTIQUE des cartes "Nos Offres" sur mobile */
    .service-card {
        padding: 6px 8px !important;
        margin-bottom: 8px !important;
        max-width: 100% !important;
        min-height: auto !important;
    }

    .service-card__title {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }

    .price-amount {
        font-size: 1.5rem !important;
        margin-bottom: 2px !important;
    }

    .price-period {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }

    .service-card__features {
        margin-bottom: 6px !important;
    }

    .feature-item {
        margin-bottom: 2px !important;
    }

    .feature-item span {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    .service-card__cta {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
        margin-top: 6px !important;
    }
}