@import "styles/header-pZuYtpo.css";
@import "styles/home-9ZCZVWl.css";
@import './styles/problem.css';
@import "styles/solutions--7SmzlS.css";
@import "styles/about-1JODqqw.css";
@import "styles/presentation-LbZ-L1i.css";
@import "styles/features-N9so1nC.css";
@import "styles/methodology-Plv28-Z.css";
@import "styles/blog-preview-Qoo8Nyb.css";
@import "styles/cta-final-XiJDzFw.css";
@import "styles/footer-JpF-ce4.css";
@import "styles/legal-pages-FiGu9Xj.css";
/* invoice-form.css est chargé séparément dans les templates de facture */

/* 1. Rendre le scroll fluide pour les ancres */
html {
    scroll-behavior: smooth;
}

/* Respect des préférences d'accessibilité pour les animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 2. Animer subtilement les liens dans les paragraphes */
.presentation-narrative p a,
.step-description p a { /* Ciblez les liens pertinents */
    color: var(--color-accent);
    text-decoration: none;
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px; /* Souligné invisible au départ */
    transition: background-size 0.3s ease;
}

.presentation-narrative p a:hover,
.step-description p a:hover {
    background-size: 100% 1px; /* Le souligné apparaît au survol */
}

/* 1. Définition du système de design (Variables Globales)
   ---------------------------------------------------- */
:root {
    /* Charte Graphique */
    --color-primary: #003366;      /* Bleu foncé institutionnel */
    --color-accent: #ff8800;       /* Orange pour les accents et CTA */
    --color-surface: #ffffff;      /* Fond des éléments surélevés (cartes, etc.) */
    --color-background: #f8f9fa;   /* Fond de section clair et neutre */
    --color-text-primary: #343a40; /* Texte principal sur fond clair */
    --color-text-inverse: #ffffff; /* Texte sur fond sombre */

    /* Aliases & déclinaisons RGB pour harmonisation inter-feuilles */
    --color-secondary: var(--color-accent);               /* Alias pour compatibilité */
    --color-text: var(--color-text-primary);              /* Alias pour compatibilité */
    --color-primary-rgb: 0, 51, 102;                      /* = #003366 */
    --color-accent-rgb: 255, 136, 0;                      /* = #ff8800 */
    --color-secondary-rgb: 255, 136, 0;                   /* Alias RGB */

    /* Typographie */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Open Sans', sans-serif; /* Recommandé pour les paragraphes */

    /* Ombres Portées */
    --shadow-color-rgb: 0, 51, 102; /* Version RGB de --color-primary pour rgba() */
    --shadow-medium: 0 10px 30px rgba(var(--shadow-color-rgb), 0.1);
    --shadow-large: 0 15px 40px rgba(var(--shadow-color-rgb), 0.15);

    /* Système d'espacement harmonieux */
    --spacing-xs: 16px;           /* Petit espacement interne */
    --spacing-sm: 24px;           /* Espacement moyen */
    --spacing-md: 32px;           /* Espacement standard */
    --spacing-lg: 48px;           /* Grand espacement */
    --spacing-xl: 80px;           /* Très grand espacement (hero) */

    /* Espacements spécifiques aux sections */
    --section-padding: 40px;      /* Padding principal des sections */
    --section-padding-small: 32px; /* Padding réduit pour certaines sections */
}

/* 2. Styles de Base et Reset
   ---------------------------------------------------- */
body {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* 4. Classes Utilitaires Globales
   ---------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Ajout d'un padding pour les petits écrans */
}

/* 5. Styles spécifiques pour les pages admin
   ---------------------------------------------------- */
/* Forcer le header à être visible sur les pages admin */
.admin-page .navbar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid transparent;
    padding: 15px 0 !important;
}

.admin-page .navbar .logo-js {
    color: var(--color-primary) !important;
}

.admin-page .navbar .logo-creations,
.admin-page .navbar .logo-digitales {
    color: var(--color-primary) !important;
}

.admin-page .navbar .nav-link {
    color: var(--color-primary) !important;
}

.admin-page .navbar .nav-link:hover {
    color: var(--color-accent) !important;
}

/* Compenser la hauteur du header fixe sur les pages admin */
.admin-page main {
    padding-top: 90px;
}

/* Boutons plus légers pour les pages admin */
.admin-page .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 400;
}

.admin-page .btn-primary {
    font-size: 0.9rem;
    font-weight: 400;
}

.admin-page .btn-secondary {
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 400;
}

/* Optimisation container mobile */
@media (max-width: 768px) {
    .container {
        padding: 0 20px; /* Plus de padding en mobile */
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px; /* Padding optimisé pour très petits écrans */
    }
}

/* BOUTONS */
.btn {
    padding: 14px 28px;
    font-family: var(--font-primary);
    font-size: 0.98rem;
    font-weight: 500;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-primary {
    background-color: #ff9a2b; /* orange adouci */
    color: var(--color-text-inverse);
    border: 2px solid #ff9a2b;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.18);
    border-radius: 4px; /* angles moins arrondis */
    font-weight: 500; /* texte moins gras */
    font-size: large;
}

.btn-primary:hover {
    background-color: transparent; /* hover transparent */
    color: var(--color-accent); /* texte orange */
    border-color: var(--color-accent);
    box-shadow: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.highlight-accent {
    color: var(--color-accent);
    font-weight: 600; /* Un léger gras pour renforcer la mise en évidence */
}

/* ===== SURTITRES / OVERLINES COHÉRENTS ===== */
.section-overline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
    color: var(--color-accent);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.7em;
    text-align: center;
}

.section-overline::before,
.section-overline::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-accent);
    margin: 0 20px;
}

.section-overline::before {
    margin-left: 0;
}

.section-overline::after {
    margin-right: 0;
}

#solutions,
#garanties,
#presentation,
#methodologie,
#actualites,
#contact {
    scroll-margin-top: 75px; /* Réduit pour un meilleur affichage */
}

/* Ajustement responsive du scroll-margin */
@media (max-width: 768px) {
    #solutions,
    #garanties,
    #presentation,
    #methodologie,
    #actualites,
    #contact {
        scroll-margin-top: 65px; /* Réduction pour mobile */
    }
}

@media (max-width: 576px) {
    #solutions,
    #garanties,
    #presentation,
    #methodologie,
    #actualites,
    #contact {
        scroll-margin-top: 55px; /* Encore plus réduit pour petit mobile */
    }
}

@media (max-width: 576px) {
    .btn {
        width: 100%;
        padding: 14px 24px;
    }
}

/* Adaptation responsive des espacements */
@media (max-width: 768px) {
    :root {
        --spacing-xs: 12px;
        --spacing-sm: 20px;
        --spacing-md: 28px;
        --spacing-lg: 36px;
        --spacing-xl: 50px;

        /* Espacements de sections optimisés mobile */
        --section-padding: 28px;
        --section-padding-small: 24px;
    }
}

/* Optimisation supplémentaire pour très petits écrans */
@media (max-width: 480px) {
    :root {
        --section-padding: 24px;
        --section-padding-small: 20px;
    }
}/* ===== HARMONISATION DES TITRES DE SECTIONS (CORRIGÉ) ===== */
/* Le style du titre "Présentation" devient le nouveau standard */
.section-title,
.problem-title,
.solutions-title,
.presentation-title,
.profile-section-title,
.profile-title {
    font-family: var(--font-primary);
    font-weight: 300; /* Police fine et élégante */
    font-size: 2.25rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md); /* Réduction de l'espacement sous les titres */
    line-height: 1.3;
}

@media (max-width: 768px) {
    .section-title,
    .problem-title,
    .solutions-title,
    .presentation-title,
    .profile-section-title,
    .profile-title {
        font-size: 1.75rem !important;
        letter-spacing: 2px;
        margin-bottom: var(--spacing-sm); /* Espacement réduit en mobile */
    }
}

@media (max-width: 480px) {
    .section-title,
    .problem-title,
    .solutions-title,
    .presentation-title,
    .profile-section-title,
    .profile-title {
        font-size: 1.5rem !important;
        letter-spacing: 1.5px;
        margin-bottom: var(--spacing-xs); /* Espacement encore plus réduit */
    }
}