/* ===========================
   HELPORDI — style.css 
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap');

:root {
    --blue:        #0056b3;
    --blue-light:  #eef4ff;
    --blue-dark:   #003d82;
    --red:          #e63946;
    --red-hover:   #c1121f;
    --text:        #1a1a2e;
    --muted:       #6b7280;
    --border:      #e5e7eb;
    --white:       #ffffff;
    --bg:          #f8fafc;
    --radius:      12px;
    --shadow:      0 4px 24px rgba(0,86,179,0.08);
    --font-main:   'Outfit', sans-serif;
    --font-nav:    'Poppins', sans-serif;
    --green: #28a745; /* Vert "Succès" standard */
}

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-main);
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- BANDEAU HEADER (STIKY & SOMBRE) ---- */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between; /* Logo+Texte à gauche, Menu à droite */
    align-items: center;           /* Alignement vertical parfait */
    padding: 10px 40px;
    
    /* Couleur sombre demandée */
    background: rgba(0, 26, 46, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-height: 120px; /* Hauteur pour accueillir le logo agrandi */
}

/* ---- LOGO ET TEXTE (ZONE GAUCHE) ---- */
.site-header {
    display: flex;
    align-items: center; /* Aligne le logo et le texte sur la même ligne */
    gap: 20px;           /* Espace entre le logo et le texte */
}

.site-header img {
    height: 90px;        /* Logo agrandi de 50% (était à 60px) */
    width: auto;
    background: white;   /* Garde son cadre blanc */
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.nav-subtitle {
    color: #ffffff;      /* Texte blanc demandé */
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap; /* Tient sur une seule ligne */
    text-shadow: none;   /* Suppression des ombres */
}

/* Empêche le header fixe de masquer le haut des sections lors du clic dans le menu */
#services, #tarifs, #impot, #contact {
    scroll-margin-top: 100px; /* Ajuste cette valeur selon la hauteur de ta top-bar */
}

/* ---- NAVIGATION (CENTRÉE) ---- */
.site-nav {
    display: flex;
    align-items: center;
    margin-left: auto;   /* Pousse le menu vers la droite */
    margin-right: auto;  /* Puis le centre par rapport à l'espace restant */
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;           /* Un peu plus d'espace entre les liens pour la clarté */
    margin: 0;
    padding: 0;
}

/* ---- NAVIGATION (ZONE DROITE) ---- */
/*.site-nav {
    display: flex;
    align-items: center;
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}*/

.site-nav a {
    display: block;
    padding: 10px 15px;
    font-family: var(--font-nav);
    font-weight: 400;    /* Menu normal (fin) par défaut */
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;      /* BLANC PUR 100% pour tous les champs */
    text-decoration: none;
    text-shadow: none;
    border-bottom: 1px solid transparent; /* Trait invisible mais présent pour éviter les sauts de ligne */
    transition: all 0.2s ease;
}

/* État SELECTIONNÉ ou SURVOL : On ne change QUE le gras et le trait */
.site-nav a:hover, 
.site-nav a.active {
    color: #ffffff;      /* Reste en blanc pur */
    font-weight: 800;    /* Passe en GRAS */
    border-bottom-color: #ffffff; /* Le trait devient BLANC PUR */
    border-bottom-width: 2px; 
}

/* ---- HERO SECTION : SÉPARATION NETTE ---- */
.hero {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 120px); /* remplit tout l'espace sous la top-bar */
    width: 100%;
    overflow: hidden;
    margin-top: 120px; /* compense la hauteur de la top-bar fixe */
}

.hero-content {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: flex-start; 
    padding: 80px 50px 0 50px;  
    background: #eef4ff;
    color: #1a1a2e;
}

.hero-content h2 {
    font-size: 2.4em;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #1a1a2e;
    text-shadow: none;
}

.hero-overlay {
    flex: 0 0 65%;
    position: relative;
    background: url('../images/bg/P1075318.jpg') center center / cover no-repeat;
}

.sap-highlight {
    color: var(--green);
    font-weight: 700; /* On le met en gras pour qu'il ressorte */
    display: inline-block;
    margin-top: 5px;
}

.article-content h2 { color: var(--blue-dark); margin: 40px 0 20px; font-size: 1.6em; }
.article-content h3 { color: var(--blue); margin: 30px 0 15px; font-size: 1.3em; }
.article-content p { margin-bottom: 20px; }
.article-content ul { margin-bottom: 20px; padding-left: 20px; }
.article-content ul li { margin-bottom: 10px; }
.article-content strong { color: var(--text); font-weight: 700; }

.btn-cta {
    display: inline-block;
    background: var(--red);
    color: var(--white);
    font-weight: 700;
    font-size: 1.15em;
    padding: 16px 36px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.45);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-cta:hover {
    background: var(--red-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(230, 57, 70, 0.55);
    color: white;
}

/* ---- LA SUITE RESTE IDENTIQUE A TON FICHIER ---- */
.main-content { max-width: 1000px; margin: 0 auto; padding: 60px 40px; }
.section { margin-bottom: 60px; }
.section-title { font-size: 1.65em; font-weight: 800; color: var(--blue); margin-bottom: 8px; }
.section-divider { width: 48px; height: 4px; background: var(--red); border-radius: 2px; margin-bottom: 32px; }

/* ---- SECTION SERVICES (OPTIMISÉE) ---- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Garde tes 3 colonnes */
    gap: 24px;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 24px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments (icône + titre) */
    text-align: center;
}

.service-card:hover { 
    transform: translateY(-6px); 
    box-shadow: 0 12px 40px rgba(0,86,179,0.15);
    border-color: var(--blue);
}

.service-icon { 
    font-size: 2.8em; 
    margin-bottom: 15px; 
}

.service-card h3 { 
    font-size: 1.15em; 
    font-weight: 800; 
    margin-bottom: 15px; 
    color: var(--blue-dark); 
    text-transform: uppercase;
    line-height: 1.2;
}

/* Style des listes à puces */
.service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Aligne le texte des puces à gauche pour la lecture */
    width: 100%;
}

.service-card ul li {
    font-size: 0.92em;
    color: var(--muted);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    line-height: 1.4;
}

/* La puce bleue personnalisée */
.service-card ul li::before {
    content: "•";
    color: var(--blue);
    position: absolute;
    left: 0;
    font-weight: bold;
}


.contact-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow);
    text-align: center;
}

.contact-margin { margin-bottom: 70px; }

#show-tel {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--blue);
    background: var(--blue-light);
    border: 2px dashed var(--blue);
    padding: 16px 32px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--font-main);
}

#show-tel.revealed { background: transparent; border: none; font-size: 1.8em; color: var(--blue-dark); cursor: default; }

.impot-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow);
}

.impot-logo { height: 80px; margin-bottom: 16px; }
.tarifs-content { margin-top: 30px; }
.tarif-prix { font-size: 1.3em; font-weight: 500; margin-bottom: 10px; }
.tarif-reduction { font-size: 1.2em; font-style: italic; }
.impot-link { display: inline-block; margin-top: 12px; font-weight: 600; }

.conseils-page { max-width: 860px; margin: 0 auto; padding: 60px 40px; }
.conseil-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--blue);
    opacity: 0;
    transform: translateY(16px);
    transition: all 0.4s ease;
}

.conseil-card.visible { opacity: 1; transform: translateY(0); }

/* ---- HERO CTA (Gros bouton Rouge - Taille Affinée) ---- */
/* ---- AJUSTEMENT POSITION BOUTON UNIQUEMENT ---- */
.hero-cta-container {
    margin-top: 35px;
    display: flex;
    justify-content: flex-end; /* On le garde aligné à droite du bloc... */
}

.btn-cta {
    margin-right: 15%; /* ...mais on le repousse de 15% vers la GAUCHE */
    
    /* Tes réglages de taille affinée que nous avons validés */
    border: none;
    cursor: pointer;
    background: var(--red);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 14px 30px;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.35);
    transition: all 0.3s ease;
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(230, 57, 70, 0.45);
    background: var(--red-hover);
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 36px 40px;
    margin-top: 80px;
    font-size: 0.88em;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 800px) {
    .services-grid { grid-template-columns: 1fr; }
}
/* ===================================================
   OPTIMISATION MOBILE HELPORDI (ÉCRANS < 768px)
   =================================================== */

@media (max-width: 768px) {
    /* 1. Réduction du bandeau fixe */
    .top-bar {
        min-height: 80px;
        padding: 10px 15px;
        flex-direction: column; /* Empile Logo et Menu */
        justify-content: center;
        gap: 5px;
    }

    .site-header img {
        height: 50px; /* Logo plus discret sur mobile */
    }

    /* 2. Réorganisation du Hero (Image en haut, texte en bas) */
    .hero {
        flex-direction: column; /* Passage en mode vertical */
        height: auto;
        margin-top: 110px; /* Ajustement car top-bar réduite */
    }

    .hero-overlay {
        flex: 0 0 250px; /* L'image prend 250px de haut en haut de l'écran */
        order: 1; /* Force l'image en premier */
        width: 100%;
    }

    .hero-content {
        flex: 0 0 auto;
        order: 2; /* Texte en second */
        padding: 40px 20px;
        text-align: center;
        background: #eef4ff; /* Garde ton fond clair Helpordi */
    }

    .hero-content h2 {
        font-size: 1.8em; /* Réduction du titre pour éviter les coupures */
    }

    .hero-cta-container {
        justify-content: center;
        margin-right: 0;
    }

    /* 3. Boutons larges pour le pouce */
    .btn-cta {
        width: 100%;
        margin-right: 0 !important;
        text-align: center;
    }

    /* 4. Grilles en 1 seule colonne */
    .services-grid, 
    .tarifs-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
        padding: 0 10px;
    }

    .main-content {
        padding: 40px 20px;
    }

    /* 5. Menu de navigation plus compact */
    .site-nav ul {
        gap: 10px;
    }

    .site-nav a {
        font-size: 11px; /* Texte plus petit pour que tout tienne sur une ligne */
        padding: 5px;
    }

    /* 6. Formulaire de contact */
    .contact-section form div {
        grid-template-columns: 1fr !important; /* Nom et Email l'un sur l'autre */
    }
}