/* VARIABLES DE COULEUR */
:root {
    --color-background-soft: #F4F0E6;       /* Fond très clair et doux */
    --color-text-dark: #042A2B;             /* Texte profond / Fond CTA */
    --color-subtle-accent: #9999C3;         /* Violet Subtil (Ancienne couleur, conservée en variable mais non utilisée dans les accents primaires) */
    --color-punchy-cta: #FF3B00;            /* Orange Punchy (pour accents principaux, bordure sélecteur) */
    --color-white: #ffffff;                 /* Blanc pur (Fond Hero/Formulaire/Texte CTA) */
    --color-border-default: #E0E0E0;        /* Bordure par défaut */
    --color-hover-bg: #ECE8DE;              /* Fond au survol des options */
    /* Nouveaux Ajouts pour CTAs (Basés sur les couleurs existantes) */
    --color-primary-accent: var(--color-text-dark); /* CTA Principal */
    --color-secondary-accent: var(--color-punchy-cta); /* CTA Secondaire (SUIVANT - CHANGÉ : utilise l'orange) */
    --color-tertiary-bg: #ccc; /* CTA Tertiaire (Précédent) */
    /* Nouvelle variable pour les textes subtils dans les témoignages/FAQ */
    --color-text-subtle: #4A4A4A; 
}

/* RESET UNIVERSEL ET STYLES DE BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--color-text-dark);
    background-color: var(--color-background-soft);
    line-height: 1.6;
}

/* UTILITAIRE ESSENTIEL POUR LE FORMULAIRE MULTI-ÉTAPES */
.hidden {
    display: none !important;
}

/* CONTENEUR PRINCIPAL */
.container {
    max-width: 90%; 
    margin: 0 auto;
    padding: 0 15px; 
}

section {
    padding: 60px 0;
    text-align: center;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--color-text-dark);
}

/* Séparateur horizontal ajouté */
hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin: 0;
}

/* SECTION HÉRO */
.hero-section {
    background-color: var(--color-white);
    padding: 40px 0 60px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.hero-section .logo {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 2px;
    color: var(--color-text-dark);
}

.hero-headline {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--color-text-dark);
}

.hero-tagline {
    font-size: 1rem;
    margin-bottom: 40px;
    opacity: 0.85;
    color: var(--color-text-dark);
}


/* ==================================== */
/* SECTION KPI / PREUVE SOCIALE CHIFFRÉE */
/* ==================================== */
.kpi-section {
    background-color: var(--color-background-soft);
    padding: 30px 0; /* Un padding plus petit car c'est une section d'interruption rapide */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.kpi-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 25px;
}

.kpi-grid {
    display: grid;
    /* Par défaut, 2 colonnes sur mobile */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 800px; /* Limite la largeur de la grille même sur desktop */
    margin: 0 auto;
}

.kpi-card {
    background-color: var(--color-white);
    padding: 20px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.2s;
    border: 1px solid var(--color-border-default);
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kpi-icon {
    font-size: 1.5rem;
    color: var(--color-punchy-cta);
    margin-bottom: 5px;
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 900; /* Extra gras pour les chiffres */
    line-height: 1.1;
    color: var(--color-text-dark);
}
.rating-value {
    color: var(--color-punchy-cta); /* Fait ressortir le score */
}

.kpi-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-subtle);
    margin-top: 5px;
    line-height: 1.2;
}

.cta-wrapper {
    margin-bottom: 3rem; 
}

/* Ajustement pour les tablettes et desktop */
@media (min-width: 600px) {
    .kpi-grid {
        /* Passe à 4 colonnes sur desktop */
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .kpi-value {
        font-size: 2rem;
    }
    .kpi-label {
        font-size: 0.9rem;
    }
}




/* AVANTAGES CLÉS (Ancien bloc) - Conservé si besoin */
.key-benefits-grid {
    display: flex;
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 40px;
    padding: 15px;
    background-color: var(--color-background-soft);
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.benefit-item {
    display: flex; 
    align-items: center;
    text-align: left; 
    padding: 5px 0;
}
.benefit-icon {
    font-size: 1.8rem;
    margin-right: 15px; 
    color: var(--color-punchy-cta); 
    flex-shrink: 0; 
}
.benefit-item p {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-dark);
}

/* --- ACCORDÉON PAIN POINTS & SOLUTIONS --- */
.accordion-key-benefits {
    margin-top: 40px; 
    display: flex;
    flex-direction: column; 
    gap: 0; 
    margin-bottom: 40px;
    padding: 15px;
    background-color: var(--color-background-soft); 
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); 
    overflow: hidden; 
    background-color: transparent; 
}
.accordion-item:last-child {
    border-bottom: none;
}

/* Texte du header de l'accordéon en Orange Punchy au survol/actif */
.pain-point-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0; 
    cursor: pointer; 
    font-size: 0.95rem; 
    font-weight: 500; 
    line-height: 1.3;
    color: var(--color-text-dark); 
    transition: color 0.2s;
}
.pain-point-header:hover, 
.accordion-item.active .pain-point-header {
    color: var(--color-punchy-cta); 
}

.accordion-icon {
    font-size: 1.8rem;
    margin-right: 15px; 
    color: var(--color-punchy-cta); 
    flex-shrink: 0; 
}

/* Icône flèche en Dark pour un meilleur contraste */
.arrow-icon {
    font-size: 1.2em;
    color: var(--color-text-dark); 
    transition: transform 0.3s;
    margin-left: 10px;
}
.accordion-item.active .arrow-icon {
    transform: rotate(180deg);
}

.solution-content {
    padding: 0 0 0 0; 
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-in-out; 
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-subtle); /* Utilisation de la variable subtile */
}
.solution-content p {
    margin: 0;
    padding-bottom: 10px; 
    padding-left: 33px; 
    font-weight: 400;
}
.accordion-item.active .solution-content {
    max-height: 500px;
}

/* ==================================== */
/* 4. STYLES FORMULAIRE MULTI-ÉTAPES */
/* ==================================== */

.qualification-form-card {
    background-color: var(--color-white);
    padding: 25px; 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    text-align: left;
    margin: 50px auto; 
    max-width: 600px; 
}

/* Style de l'étape du formulaire */
.form-step {
    border: none;
    padding: 0;
    margin: 0;
}
/* IMPORTANT: Clearfix pour gérer les float des boutons Précédent/Suivant */
.form-step::after {
    content: "";
    display: table;
    clear: both;
}

#form-title {
    font-size: 1.8rem;
    color: var(--color-text-dark);
    margin-bottom: 25px;
    text-align: center;
}

/* Titre de l'étape (1/3, 2/3...) */
.step-title {
    font-size: 1.1rem;
    color: var(--color-punchy-cta); 
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-background-soft);
    padding-bottom: 10px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.text-input,
select.text-input,
textarea.text-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 10px; 
    font-size: 1rem;
    color: var(--color-text-dark);
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-white);
}
.text-input:focus {
    outline: none;
    border-color: var(--color-punchy-cta); 
    box-shadow: 0 0 5px rgba(255, 59, 0, 0.5); 
}

/* Style d'erreur pour la validation JS */
.text-input.is-invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

/* Style spécifique pour le Select */
select.text-input {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%22%3E%3Cpath%20fill%3D%22%23042A2B%22%20d%3D%22M287%20169.9c-4.1%204.1-10.7%204.1-14.8%200L146.2%2053.8%2020.2%20169.9c-4.1%204.1-10.7%204.1-14.8%200s-4.1-10.7%200-14.8L138.8%2031.1c4.1-4.1%2010.7-4.1%2014.8%200l133.4%20123.9c4.1%204.1%204.1%2010.7%200%2014.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px auto;
}
textarea.text-input {
    resize: vertical;
}

/* Options radio cliquables (Q1 & Délais) */
.radio-options-vertical {
    display: flex;
    flex-direction: column; 
    gap: 10px;
}
.radio-options-horizontal-wrap {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    gap: 8px; 
}
.radio-options-vertical input[type="radio"],
.radio-options-horizontal-wrap input[type="radio"] {
    display: none;
}
.radio-label-button {
    display: block;
    padding: 12px;
    background-color: var(--color-background-soft); 
    border: 1px solid var(--color-border-default); 
    border-radius: 10px; 
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.4;
    box-shadow: none; 
    color: var(--color-text-dark);
    text-align: left;
}
.radio-options-horizontal-wrap .delay-button {
    flex-grow: 1; 
    flex-basis: calc(33.333% - 8px); 
    text-align: center;
    padding: 10px 5px;
    font-size: 0.9em;
    min-width: 100px;
}
.radio-label-button:hover {
    background-color: var(--color-hover-bg); 
    border-color: var(--color-punchy-cta); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
input[type="radio"]:checked + .radio-label-button {
    background-color: var(--color-white); 
    border: 1px solid var(--color-punchy-cta); 
    color: var(--color-text-dark); 
    font-weight: 600;
    box-shadow: 0 0 5px rgba(255, 59, 0, 0.1); 
}


/* ------------------------------------ */
/* 5. STYLES CTA BOUTONS */
/* ------------------------------------ */
.cta-button {
    display: block;
    width: 100%; 
    padding: 15px 25px;
    margin: 25px auto 10px;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 50px; 
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-decoration: none !important; 
    color: var(--color-white); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    text-align: center;
}

/* CTA Principal (Bouton Final & Hero) */
.primary-cta {
    background-color: var(--color-punchy-cta); 
}
.primary-cta:hover {
    background-color: #1a4243; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

/* CTA Secondaire (Bouton "Suivant") - Maintenant en Orange Punchy */
.secondary-cta {
    background-color: var(--color-secondary-accent); /* Utilise l'orange */
    margin-top: 15px; 
}
.secondary-cta:hover {
    background-color: #d13000; /* Ombre de l'orange */
}

/* CTA Tertiaire (Bouton "Précédent") */
.tertiary-cta {
    background-color: var(--color-tertiary-bg); 
    color: var(--color-text-dark);
    width: 48%; 
    float: left;
    margin-top: 15px;
    box-shadow: none; 
}
.tertiary-cta:hover {
    background-color: #b3b3b3;
}
/* Aligne le bouton Suivant à droite du bouton Précédent */
.tertiary-cta + .secondary-cta {
    float: right;
    width: 48%;
    margin-left: 4%; 
    margin-top: 15px;
}
/* Le bouton final (CTA Submit) n'a pas de frère tertiaire */
.primary-cta {
    clear: both;
}


/* Texte sous le formulaire */
.form-small-text {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    margin-top: 15px; 
    clear: both; 
}

/* ==================================== */
/* 6. SECTION VALEURS / CARTES AVANTAGES */
/* ==================================== */

.value-section {
    background-color: var(--color-background-soft);
    padding: 40px 0; 
}

.card-grid {
    display: flex;
    flex-direction: column; /* Force la colonne sur mobile (comportement par défaut) */
    gap: 20px;
}

.card {
    background-color: var(--color-white);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.card-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    color: var(--color-punchy-cta); 
}

.card-title {
    color: var(--color-text-dark);
    margin-bottom: 5px;
}

.card-text {
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

/* ==================================== */
/* 7. SECTION PREUVE SOCIALE (TÉMOIGNAGES) - Réintégré */
/* ==================================== */

.testimonial-section {
    background-color: var(--color-white);
    padding: 60px 0;
}

.testimonial-grid {
    display: grid;
    gap: 30px;
    /* Par défaut, 1 colonne sur mobile */
    grid-template-columns: 1fr;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-card {
    background-color: var(--color-background-soft);
    padding: 25px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.testimonial-quote {
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.5;
    color: var(--color-text-subtle); 
}

.testimonial-author {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text-dark);
    margin-bottom: 3px;
}

.testimonial-project {
    display: block;
    font-size: 0.85rem;
    color: var(--color-punchy-cta); 
    font-weight: 500;
}

/* ==================================== */
/* 8. SECTION FAQ (FOIRE AUX QUESTIONS) - Réintégré */
/* ==================================== */

.faq-section {
    background-color: var(--color-background-soft);
    padding: 60px 0;
}

.faq-accordion-container {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-default);
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.faq-question {
    display: block;
    padding: 18px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-dark);
    line-height: 1.4;
    position: relative;
    list-style: none;
}
/* Pour assurer que l'icône de résumé n'apparaît pas du tout */
.faq-question::-webkit-details-marker {
    display: none;
}
.faq-question::marker {
    display: none;
}

/* Ajoute une flèche personnalisée pour <summary> */
.faq-question::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.2s;
    color: var(--color-punchy-cta);
    font-weight: 400; 
}

/* Change l'icône quand l'accordéon est ouvert */
.faq-item[open] .faq-question::after {
    content: '-';
}

.faq-answer-content {
    padding: 0 20px 20px 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-subtle);
    border-top: 1px solid var(--color-border-default);
}
.faq-answer-content p {
    margin: 0; 
}


/* FOOTER - Réintégré */
.footer-section {
    background-color: var(--color-text-dark);
    color: var(--color-background-soft);
    padding: 20px 0; 
    font-size: 0.9rem;
    text-align: center;
}

.footer-section p {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--color-white); 
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}
.footer-links a:hover {
    color: var(--color-white);
}


/* ==================================== */
/* 9. MEDIA QUERIES */
/* ==================================== */

@media (min-width: 768px) {
    .container {
        max-width: 700px; /* Taille par défaut pour la plupart des éléments */
    }
    
    .hero-headline {
        font-size: 3rem;
    }

ta-button primary-cta
    
    /* CTA sur desktop est en ligne */
    .cta-button {
        width: auto;
        display: inline-block;
    }
    .cta-wrapper {
        margin-bottom: 40px;
    }
    
    /* Les options Délai tiennent sur une ligne sur desktop */
    .radio-options-horizontal-wrap {
        flex-wrap: nowrap;
        gap: 15px;
    }
    .radio-options-horizontal-wrap .delay-button {
        flex-basis: calc(33.333% - 15px);
        min-width: 150px;
    }

    /* Les cartes d'avantages s'alignent en ligne sur desktop */
    .card-grid {
        flex-direction: row; 
        justify-content: space-between;
        gap: 30px;
    }

    /* Grille Témoignages : 3 colonnes sur desktop */
    .testimonial-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px; /* Plus large pour les témoignages */
    }
    
    /* Mise à jour des boutons du formulaire pour le desktop */
    .tertiary-cta,
    .tertiary-cta + .secondary-cta {
        width: 48%;
    }
    
    /* Le formulaire devient plus large sur les grands écrans */
    .qualification-form-card {
        max-width: 700px;
    }
}

@media (max-width: 767px) {
    .qualification-form-card {
        padding: 20px; 
        margin: 30px 15px; 
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 
    }

    #form-title {
        font-size: 1.5rem; 
        margin-bottom: 20px;
    }

    .form-label {
        font-size: 0.9rem; 
        margin-bottom: 6px;
    }

    .text-input,
    select.text-input,
    textarea.text-input {
        padding: 10px 12px; 
        font-size: 0.9rem; 
    }
    
    .primary-cta {
        padding: 12px; 
        font-size: 1rem; 
    }
    
    /* Boutons Précédent / Suivant en pleine largeur sur mobile */
    .tertiary-cta,
    .tertiary-cta + .secondary-cta {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-bottom: 10px;
    }

    .form-small-text {
        font-size: 0.8rem; 
        margin-top: 10px;
    }
    
    .radio-options-horizontal-wrap {
        flex-direction: column; 
        gap: 10px;
    }
    .radio-label-button {
        padding: 8px 10px; 
    }

    /* FAQ sur mobile */
    .faq-question {
        font-size: 0.9rem;
    }
    .faq-answer-content {
        font-size: 0.85rem;
    }
}