/* --- RESET & VARIABLES --- */
:root {
    /* Couleurs Pastels demandées + Dégradé */
    --olive-light:  #F2F0D8;
    --rust-light:   #FBE9DF;
    --rust-pastel:  #F5C5A8;
    
    /* Dégradé Global utilisé pour Hero et Footer */
    --bg-gradient: 
        radial-gradient(circle at 0% 0%, #FBE9DF 0%, #F5C5A8 60%), 
        radial-gradient(circle at 100% 100%, rgba(147, 197, 253, 0.5) 0%, rgba(255, 255, 255, 0) 60%),
        #FFFFFF;
    
    --primary-black: #0F1115;
    --text-dark: #1F2937;
    --text-grey: #6B7280;
    --border-color: #E5E7EB;
    
    --card-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --radius-btn: 50px;
    --radius-card: 24px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: #ffffff; /* Le corps est blanc neutre */
    min-height: 100vh;
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- NAVBAR ANIMÉE (Floating to Sticky) - Version Stabilisée --- */
.navbar {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%; /* Largeur par défaut sur petits écrans */
    max-width: 1240px; /* Largeur MAX bloquée pour la cohérence */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 12px 0; /* Padding vertical seulement */
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    top: 0;
    width: 100%;
    max-width: 100%; /* S'étend sur tout l'écran au scroll */
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    padding: 10px 0;
}

/* Conteneur interne de la navbar */
.nav-content {
    display: flex;
    justify-content: space-between; /* Espace le Logo à gauche et les Boutons à droite */
    align-items: center;
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 24px; /* Marge de sécurité sur les côtés */
    box-sizing: border-box;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #D06223;
    flex-shrink: 0; 
    min-width: 140px; 
}

.nav-links { 
    display: flex; 
    gap: 35px; /* ESPACE FIXE ENTRE CHAQUE LIEN */
    align-items: center;
    margin: 0 auto; /* Centre les liens au milieu de la navbar */
}

.nav-links a { 
    font-weight: 500; 
    font-size: 0.95rem; 
    color: var(--text-dark); 
    transition: color 0.2s ease;
    white-space: nowrap; 
}

.nav-links a:hover { color: #D06223; }

/* Boutons à droite */
.nav-buttons { 
    display: flex; 
    gap: 16px; 
    align-items: center; 
    justify-content: flex-end; 
    min-width: 200px; 
}

/* RESPONSIVE : On cache les liens sur mobile */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-buttons .btn-login { display: none; }
    .nav-buttons { min-width: auto; }
}

/* --- HERO SECTION (Mise à jour avec Fondu Blanc) --- */
.hero {
    /* 1. Le fond couleur Pêche/Orange */
    background: radial-gradient(circle at 50% 50%, #F5C5A8 0%, rgba(255, 255, 255, 0) 100%), #FFF7ED;
    
    /* 2. Espacement : On augmente le bas pour laisser la place au fondu */
    padding: 180px 0 250px; 
    
    text-align: center;
    
    /* 3. Position relative : Indispensable pour que le ::after se cale dessus */
    position: relative; 
}

/* Le masque qui fait disparaître le gradient vers le blanc en bas */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Hauteur de la transition douce */
    
    /* Du transparent vers le blanc pur */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    
    pointer-events: none; /* Permet de cliquer au travers */
}

.hero h1 {
    font-family: var(--font-heading);
    /* Taille fluide pour mobile et desktop */
    font-size: clamp(2.5rem, 8vw, 4.5rem); 
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 30px; 
    letter-spacing: -1px;
    color: var(--primary-black);
    padding: 0 10px;
}

.hero-badge {
    display: inline-block;
    background: #FFF;
    border: 1px solid #E5E7EB;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 32px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.subtitle {
    font-size: 1.25rem;
    color: var(--text-grey);
    max-width: 650px;
    margin: 0 auto 48px;
    position: relative; 
    z-index: 2; 
    padding: 0 15px;
}

.hero-cta { 
    max-width: 500px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 5; /* Important : pour que le bouton reste cliquable au dessus du fondu */
}

.email-form {
    display: flex; background: #fff; padding: 6px;
    border-radius: var(--radius-btn); border: 1px solid #E5E7EB;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-bottom: 12px;
}
.email-form input {
    border: none; outline: none; padding: 0 20px;
    flex-grow: 1; font-family: var(--font-body); font-size: 1rem; border-radius: var(--radius-btn);
}
.sub-cta { font-size: 0.8rem; color: #9CA3AF; }

/* --- SIMULATEUR DE PERTE --- */
.simulator-section {
    position: relative;
    margin-top: -60px; /* Fait remonter la carte sur le Header pour l'effet flottant */
    z-index: 10;
    padding-bottom: 40px;
}

.simulator-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    max-width: 900px;
    margin: 0 auto;
}

.sim-header {
    text-align: center;
    margin-bottom: 40px;
}

.sim-header h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-black);
    margin-bottom: 8px;
}

.sim-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

/* Inputs & Sliders */
.input-group {
    margin-bottom: 30px;
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    font-family: var(--font-heading);
}

.input-val {
    background: var(--rust-light); 
    color: #D06223; 
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Custom Range Slider Styling */
.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #E5E7EB;
    outline: none;
    transition: background .2s;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #D06223; /* Votre orange */
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(208, 98, 35, 0.4);
    border: 2px solid #fff;
    transition: transform 0.1s;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-grey);
}

/* Résultats */
.sim-results {
    background: #FAFAFA;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #F3F4F6;
}

.res-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-grey);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.res-amount {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--primary-black);
    line-height: 1;
    margin-bottom: 10px;
}

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

.res-sub span {
    font-weight: 700;
    color: #EF4444;
}

.sim-cta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E5E7EB;
    font-size: 0.9rem;
    color: #D06223;
    font-weight: 600;
}

/* Mobile Responsive spécifique Simulateur */
@media (max-width: 768px) {
    .sim-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .simulator-card {
        padding: 24px;
    }
    .res-amount {
        font-size: 2.5rem;
    }
}

/* --- SECTIONS --- */
.stats-section { background: #fff; padding: 60px 0; border-bottom: 1px solid var(--border-color); position: relative; z-index: 2; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stat-item { background: #F5C5A8; padding: 30px; border-radius: 16px; text-align: left; }
.stat-item h3 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; margin-bottom: 5px; }

.solutions-section { padding: 100px 0; background: #fff; }
.section-header { margin-bottom: 60px; }
.section-header h2 { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 4.5rem); margin-bottom: 10px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }

.card {
    background: #fff; border-radius: var(--radius-card); padding: 32px;
    box-shadow: var(--card-shadow); transition: transform 0.3s ease; border: 1px solid transparent;
}
.card:hover { transform: translateY(-5px); border-color: #E5E7EB; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.card-header h3 { font-size: 2.35rem; font-weight: 700; }
.user-badge { display: flex; align-items: center; gap: 15px; background: #F9FAFB; padding: 12px; border-radius: 12px; margin-bottom: 24px; }
.icon-avatar { width: 40px; height: 40px; background: #E5E7EB; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #D06223; }
.icon-avatar.blue { background: #E5E7EB; color: #D06223; }
.icon-avatar.purple { background: #E1E7EB; color: #D06223; }
.user-info h4 { font-size: 1.2rem; margin-bottom: 0; }
.user-info span { font-size: 0.8rem; color: var(--text-grey); }
.feature-box { background: #F9FAFB; border-radius: 12px; padding: 20px; display: flex; gap: 15px; margin-bottom: 24px; }
.phantom-icon { width: 40px; height: 40px; background: #E5E7EB; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #D06223; }
.phantom-icon.blue { color: #D06223; }
.phantom-icon.purple { color: #D06223; }
.feature-text strong { display: block; font-size: 1.2rem; margin-bottom: 2px; }
.feature-text p { font-size: 0.8rem; color: var(--text-grey); margin: 0; }
.full-width { width: 100%; text-align: center; }

.pricing-section { background: #fff; padding: 100px 0; border-top: 1px solid #F3F4F6; }
.pricing-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.pricing-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 20px; padding: 40px; display: flex; flex-direction: column; }
.pricing-card.featured { background: #FAFAFA; border-color: #E5E6E8; box-shadow: 0 20px 40px rgba(251, 191, 36, 0.1); }
.p-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #9CA3AF; margin-bottom: 10px; letter-spacing: 1px; }
.p-tag.blue { color: #2563EB; }
.price { font-size: 2.5rem; font-weight: 800; font-family: var(--font-heading); margin: 15px 0 5px; }
.price span { font-size: 1rem; color: var(--text-grey); font-weight: 400; }
.setup { font-size: 0.9rem; color: var(--text-grey); margin-bottom: 30px; font-style: italic; }
.features { margin-bottom: 40px; flex-grow: 1; }
.features li { margin-bottom: 12px; font-size: 0.95rem; display: flex; gap: 10px; }
.features li i { color: #10B981; }

/* --- FOOTER (Style Big Typography) --- */
footer {
    padding: 120px 0 60px; /* Espace suffisant pour le fondu */
    background: var(--bg-gradient); /* On garde votre fond dégradé */
    position: relative;
    overflow: hidden; /* Pour couper proprement le texte s'il dépasse */
}

/* Le masque de fondu (votre code existant) */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Le Titre Géant "Restanco" */
.footer-brand {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
    text-align: center; /* Centré comme sur le modèle */
}

.footer-brand h2 {
    font-family: var(--font-heading);
    /* Taille responsive énorme : minimum 3rem, idéal 12vw, max 10rem */
    font-size: clamp(3rem, 12vw, 10rem); 
    font-weight: 500; /* Plus fin comme sur l'image PhantomBuster */
    color: var(--primary-black);
    line-height: 1;
    letter-spacing: -2px;
}

/* La Grille des Liens (4 colonnes) */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.footer-bottom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Alignement avec la grille du haut */
    gap: 40px;
    position: relative;
    z-index: 2;
    margin-bottom: 40px;
}

.footer-col h4 {
    font-family: var(--font-body); /* Titres en police simple */
    font-size: 1rem;
    font-weight: 700;
    color: #9CA3AF; /* Gris clair pour les titres de colonnes */
    margin-bottom: 24px;
}

.footer-col ul li {
    margin-bottom: 14px;
}

.footer-col ul li a {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-black);
    transition: color 0.2s ease;
}

.footer-col ul li a:hover {
    color: #D06223; /* Votre Orange au survol */
}

/* Les Icônes Réseaux Sociaux (Ronds) */
.socials-col {
    grid-column: span 2; /* Prend plus de place si nécessaire */
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--primary-black); /* Bordure noire fine */
    border-radius: 50%; /* Rond parfait */
    color: var(--primary-black);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--primary-black);
    color: #fff;
    transform: translateY(-3px);
}

.footer-copyright {
    text-align: center;
    color: var(--text-grey);
    font-size: 0.9rem;
    padding-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.05);
    position: relative;
    z-index: 2;
}

/* MOBILE RESPONSIVE FOOTER */
@media (max-width: 900px) {
    .footer-grid, .footer-bottom-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    }
}

@media (max-width: 600px) {
    .footer-grid, .footer-bottom-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
        text-align: left;
    }
    
    .footer-brand h2 {
        font-size: 4rem; /* Ajustement du titre géant */
    }
}

/* --- BUTTONS --- */
.btn { padding: 10px 24px; border-radius: var(--radius-btn); font-weight: 600; font-size: 0.95rem; transition: transform 0.2s ease; cursor: pointer; border: none; }
.btn:hover { transform: translateY(-2px); }
.btn-black { background-color: #D06223; color: #fff; padding: 10px 24px; border-radius: var(--radius-btn); font-weight: 600; font-size: 0.95rem; transition: transform 0.2s ease; cursor: pointer; border: none; }
.btn-login { background: transparent; color: var(--text-dark); }
.btn-outline { background: transparent; border: 1px solid #D1D5DB; color: var(--text-dark); }
.btn-small { background-color: #D06223; color: #fff; padding: 10px 24px; border-radius: var(--radius-btn); font-weight: 600; font-size: 0.95rem; transition: transform 0.2s ease; cursor: pointer; border: none; }

/* --- EFFECTS --- */
/* Texte animé (Typewriter) en Orange Rouille (#D06223) */
.text-gradient {
    background: #D06223; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Optionnel : Si tu veux que le curseur clignotant soit aussi de la même couleur */
.cursor {
    display: inline-block;
    width: 3px;
    background-color: #D06223; /* Changé de noir à orange */
    animation: blink 1s infinite;
    margin-left: 5px;
    vertical-align: middle;
}

/* MOBILE NAV & HERO */
@media (max-width: 768px) {
    .navbar { top: 15px; padding: 12px 16px; width: 92%; }
    .navbar.scrolled { width: 100%; top: 0; padding: 12px 16px; }
    .hero { padding-top: 120px; }
    .hero h1 { font-size: 2.8rem; }
    .nav-links, .nav-buttons .btn-login { display: none; }
    .stats-grid { grid-template-columns: 1fr; }
}

/* --- FEATURES STACK (Style Narratif & Centré) --- */

.features-stack {
    display: flex;
    flex-direction: column;
    gap: 120px; /* Espace augmenté pour aérer les blocs */
    padding: 60px 0;
}

.feature-row {
    display: flex;
    align-items: center;
    /* On ajoute un gap important pour que le texte ne colle pas à l'image */
    gap: 100px; 
    /* Max-width sur le container interne pour éviter l'étirement excessif */
    max-width: 1100px;
    margin: 0 auto;
}

/* Pour inverser l'ordre (Image à gauche, Texte à droite) */
.feature-row.reverse {
    flex-direction: row-reverse;
}

/* --- PARTIE TEXTE RECENTRÉE --- */
.feature-text-block {
    flex: 1;
    /* On centre verticalement le contenu texte dans son espace */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* On évite que le texte aille trop sur les bords */
    padding: 0 10px; 
}

.feature-tag {
    font-size: 1rem;
    font-weight: 700;
    color: #D06223;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: block;
}

.feature-text-block h3 {
    font-size: 3.5rem; /* Titre très impactant */
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--primary-black);
    font-family: var(--font-heading);
    letter-spacing: -1px;
}

/* L'accroche marketing (Gras et sombre) */
.feature-hook {
    font-size: 1.25rem;
    color: var(--text-dark);
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Le paragraphe détaillé avec les fonctionnalités */
.feature-paragraph {
    font-size: 1.20rem;
    color: var(--text-grey);
    line-height: 1.7; /* Bonne hauteur de ligne pour la lecture */
    margin-bottom: 32px;
}

.feature-paragraph strong {
    color: var(--primary-black);
    font-weight: 600;
}

/* Bouton aligné et propre */
.btn-arrow {
    align-self: flex-start; /* S'assure que le bouton reste à gauche du bloc texte */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    border: 1px solid #E5E7EB;
    border-radius: 50px;
    font-weight: 600;
    color: var(--primary-black);
    background: transparent;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-arrow:hover {
    border-color: var(--primary-black);
    background: var(--primary-black);
    color: #fff; /* Inversion de couleur au survol pour plus d'impact */
    padding-right: 35px;
}

/* --- PARTIE VISUELLE (Le conteneur coloré) --- */
.feature-visual {
    flex: 1.2; /* Un peu plus large que le texte */
}

.visual-container {
    width: 100%;
    aspect-ratio: 16/12; /* Format rectangulaire large */
    border-radius: 32px; /* Coins très arrondis */
    position: relative;
    overflow: hidden; /* Pour couper ce qui dépasse */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
}

/* Les Gradients de fond (Inspirés de PhantomBuster) */
.gradient-1 { background: linear-gradient(135deg, #FBFFE0 0%, #E2E8A0 100%); } 
.gradient-2 { background: linear-gradient(135deg, #EFF6FF 0%, #BFDBFE 100%); } 
.gradient-3 { background: linear-gradient(135deg, #FFF7ED 0%, #FFD8A8 100%); } 
.gradient-4 { background: linear-gradient(135deg, #FFF1F2 0%, #FDA4AF 100%); } 

/* Cartes Flottantes (Simulation de l'interface) */
.float-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
}

/* Carte Principale (Centrale) */
.main-card {
    width: 140px;
    height: 140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-black);
}

.icon-lg { font-size: 2.5rem; color: #D06223; }

/* Petites cartes satellites */
.sub-card-1 {
    width: 60px;
    height: 60px;
    top: 25%;
    left: 20%;
    font-size: 1.2rem;
    color: #9CA3AF;
    animation: float 4s ease-in-out infinite;
}

.sub-card-2 {
    width: 60px;
    height: 60px;
    bottom: 25%;
    right: 20%;
    font-size: 1.2rem;
    color: #9CA3AF;
    animation: float 5s ease-in-out infinite reverse;
}

/* Petite animation de flottement */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.line-1 {
    top: 35%; left: 30%; width: 20%; height: 15%;
    border-bottom: none; border-right: none;
}

/* RESPONSIVE FEATURES */
@media (max-width: 900px) {
    .feature-row, .feature-row.reverse {
        flex-direction: column-reverse; /* Image en haut, Texte en bas pour mobile */
        gap: 40px;
        text-align: center;
    }

    .feature-text-block h3 { font-size: 2.2rem; }
    
    .visual-container {
        width: 100%;
        max-width: 450px;
        aspect-ratio: 4/3; /* Plus carré sur mobile */
        margin: 0 auto;
    }
    
    .btn-arrow { align-self: center; }
}

/* --- PAGE TARIFS : DÉTAILS À LA CARTE --- */
.detailed-pricing-section {
    padding: 100px 0;
}

.details-grid {
    display: grid;
    /* Colonnes flexibles : min 480px de large sinon ça passe à la ligne */
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

/* Style des Cartes (Tableaux) */
.detail-card {
    background: #fff;
    border-radius: 24px;
    padding: 0; /* Pas de padding global pour que l'entête touche les bords */
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
    border: 1px solid #E5E7EB;
    overflow: hidden; /* Masque les coins carrés des enfants */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);
}

/* Entête de chaque carte (L'Usine, Le Métreur...) */
.detail-header {
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.detail-header h3 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--primary-black);
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Couleurs de fond des entêtes (correspondant aux piliers) */
.bg-olive { background: #FBFFE0; } /* Usine */
.bg-blue  { background: #EFF6FF; } /* Métreur */
.bg-rust  { background: #FFF7ED; } /* Irrigation */
.bg-red   { background: #FFF1F2; } /* Compas */

/* Corps du tableau */
.table-wrapper {
    padding: 10px 32px 32px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

/* En-têtes du tableau (Service, Setup, Mensuel) */
.price-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: 16px 0;
    border-bottom: 1px solid #F3F4F6;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Lignes du tableau */
.price-table td {
    padding: 16px 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: 0.95rem;
    color: var(--text-dark);
    vertical-align: middle;
}

/* Enlever la bordure de la dernière ligne */
.price-table tr:last-child td {
    border-bottom: none;
}

/* Colonnes spécifiques */
.col-service { 
    width: 50%; 
    font-weight: 500; 
}

.col-setup { 
    width: 25%; 
    text-align: right; 
    color: #6B7280; /* Gris plus clair */
    font-size: 0.9rem; 
}

.col-sub { 
    width: 25%; 
    text-align: right; 
    font-weight: 700; 
    color: var(--primary-black); 
    font-family: var(--font-heading);
}

/* Adaptation Mobile pour les tableaux */
@media (max-width: 768px) {
    .details-grid { 
        grid-template-columns: 1fr; /* Une seule colonne */
    }
    
    .detail-header { padding: 20px; }
    
    .table-wrapper { padding: 0 20px 20px; }
    
    /* Sur mobile, on peut cacher la colonne Setup pour gagner de la place */
    .col-setup { display: none; }
    
    .price-table th:nth-child(2) { display: none; }
}

/* --- FOOTER SPÉCIFIQUE USINE --- */
/* (Note: si vous voulez que ce style s'applique uniquement sur la page usine, 
   assurez-vous que le footer a une classe spécifique ou laissez tel quel si global) */

/* --- DROPDOWN MENU (Style PhantomBuster) --- */

/* 1. Le conteneur du lien (Li) */
.dropdown-item {
    position: relative; /* Indispensable pour positionner le menu en dessous */
    padding-bottom: 20px; /* Astuce : Crée un pont invisible pour que la souris ne "perde" pas le menu en descendant */
    margin-bottom: -20px; /* On compense le padding pour ne pas décaler la navbar */
}

/* Le lien principal "Nos Solutions" */
.dropdown-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Rotation de la petite flèche au survol */
.dropdown-item:hover .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* 2. Le Menu (Caché par défaut) */
.dropdown-menu {
    position: absolute;
    top: 100%; /* Juste en dessous du lien */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Centré + Légèrement plus bas */
    
    width: 600px; /* Largeur confortable pour 2 colonnes */
    background: #ffffff;
    border-radius: 16px;
    
    /* Ombre portée douce et premium */
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    
    padding: 24px;
    
    /* État caché initial */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Empêche de cliquer quand invisible */
    
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Animation fluide */
    z-index: 1100;
}

/* 3. L'apparition (Au survol du Li) */
.dropdown-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0); /* Remonte légèrement */
}

/* 4. La Grille intérieure */
.dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 12px;
}

/* 5. Les Cartes (Items) */
.dropdown-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.dropdown-card:hover {
    background: #F9FAFB; /* Gris très clair au survol */
}

/* Icônes colorées */
.dd-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Texte */
.dd-text {
    display: flex;
    flex-direction: column;
}

.dd-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-black);
    font-size: 1rem;
    line-height: 1.2;
}

.dd-desc {
    font-size: 0.8rem;
    color: var(--text-grey);
    margin-top: 2px;
}

/* Adaptation Mobile : On cache le dropdown complexe sur mobile */
@media (max-width: 900px) {
    .dropdown-menu {
        display: none; /* Trop complexe pour mobile, on garde le lien simple */
    }
    .dropdown-trigger .fa-chevron-down {
        display: none;
    }
}

/* --- PAGE USINE SPECIFICS (Largeur & Padding) --- */
/* Appliquer une classe spécifique sur le body ou container de usine.html si nécessaire, 
   sinon cela s'applique globalement si placé ici. 
   Je l'ai mis dans une media query pour ne pas casser les autres pages si elles n'ont pas la classe. */

/* --- PAGE ARTICLE DE BLOG (Standardisée) --- */

/* 1. On ne touche PAS au body (il reste blanc comme les autres pages) */

/* 2. Le Hero Article : On utilise le MÊME dégradé que l'accueil */
.hero-article {
    background: var(--bg-gradient); /* Le fameux dégradé Pêche/Bleu/Blanc */
    padding: 160px 0 200px;
    text-align: center;
    position: relative;
}

/* 3. Le Masque de Fondu : Il va vers le BLANC (comme l'accueil) */
.hero-article::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    /* Transition du transparent vers le Blanc pur du site */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    pointer-events: none;
}

/* Typographie spécifique au Hero */
.hero-article h1 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.1;
    color: #23262A;
    margin-bottom: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.article-meta {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 30px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 4. Le Conteneur de texte : Plus de "carte", juste du contenu propre sur fond blanc */
.article-wrapper {
    background: transparent; /* Fond transparent (donc blanc via le body) */
    max-width: 800px; /* Largeur lecture confortable */
    margin: 0 auto 100px;
    padding: 0 24px; /* Marges simples */
    box-shadow: none; /* On enlève l'ombre */
    border-radius: 0;
    position: relative;
    z-index: 10;
}

/* Le reste du style (Titres h2, listes, callouts...) reste identique car il est très propre */
.article-content h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--primary-black);
    margin-top: 60px;
    margin-bottom: 24px;
}

/* --- FORCER LA COULEUR DE TOUS LES TITRES H1 SUR TOUTES LES PAGES --- */
h1, 
.hero h1, 
.hero-article h1, 
.hero-usine h1, 
.hero-irrigation h1, 
.hero-metreur h1, 
.hero-compas h1 {
    color: #23262A !important; /* Orange Restanco */
}

/* --- STYLE SÉLECTEUR SETUP (Page Tarifs) --- */
.setup-container {
    margin-top: auto; /* Pousse le bloc vers le bas pour aligner les boutons */
    width: 100%;
    padding-top: 20px;
}

.setup-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6B7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.setup-select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    background-color: #F9FAFB;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--primary-black);
    cursor: pointer;
    margin-bottom: 15px;
    outline: none;
    transition: all 0.2s ease;
    appearance: none; /* Pour customiser la flèche si besoin */
    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%3E%3Cpath%20fill%3D%22%23D06223%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
}

.setup-select:hover, .setup-select:focus {
    border-color: #D06223;
    background-color: #FFF7ED;
}

/* --- STYLE DU QUIZ WIDGET (Interactif) --- */
#quiz-widget {
    background: #FEFDFC;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid #FFFFFF;
}

.quiz-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: 20px;
    text-align: center;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-option {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    padding: 15px;
    border-radius: 12px;
    text-align: left;
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.btn-option:hover {
    border-color: #D06223;
    background: #FFF7ED;
    color: #D06223;
    font-weight: 600;
    transform: translateX(5px);
}

/* Animation d'apparition */
.quiz-step {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- RESPONSIVE MOBILE FINAL (Corrections globales) --- */
@media (max-width: 600px) {
    /* Widget Quiz Mobile */
    #quiz-widget {
        width: 100% !important;
        box-shadow: none; 
        border: 1px solid #F3F4F6;
        padding: 20px 10px;
    }
    
    /* Marges générales */
    .container { padding-left: 15px; padding-right: 15px; }
    
    /* Prix sur mobile */
    .pricing-wrapper { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

/* --- ÉLÉMENTS MOBILES (CACHÉS PAR DÉFAUT SUR ORDI) --- */
.mobile-menu-btn { display: none; } /* On cache le burger sur PC */
.mobile-nav-overlay { display: none; } /* On cache le menu mobile sur PC */

/* --- RÈGLES SPÉCIFIQUES MOBILE (Moins de 900px) --- */
@media (max-width: 900px) {
    
    /* 1. ON CACHE LA VERSION ORDI */
    .desktop-only { display: none !important; }
    
    /* 2. ON AFFICHE LE BURGER */
    .mobile-menu-btn {
        display: block;
        background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-dark);
    }

    /* 3. STYLE DU MENU OVERLAY (Panneau Latéral) */
    .mobile-nav-overlay {
        display: flex; flex-direction: column;
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: #fff; z-index: 9999;
        transform: translateX(100%); transition: transform 0.3s ease;
    }
    .mobile-nav-overlay.active { transform: translateX(0); }
    
    .mobile-nav-header {
        padding: 20px 24px; border-bottom: 1px solid #F3F4F6;
        display: flex; justify-content: space-between; align-items: center;
    }
    .close-btn { background: none; border: none; font-size: 1.5rem; }
    
    .mobile-nav-links { padding: 30px 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
    .mobile-nav-links a { font-size: 1.2rem; font-weight: 600; color: var(--primary-black); }
    .mobile-divider { font-size: 0.8rem; color: #9CA3AF; text-transform: uppercase; margin-top: 10px; font-weight: 700; }
    .sub-link { font-size: 1rem !important; font-weight: 500 !important; border-left: 2px solid #F3F4F6; padding-left: 15px; }
    .mobile-cta { text-align: center; margin-top: 20px; color: #fff !important; }

    /* 4. ON RÉDUIT LES TEXTES GÉANTS (Pour l'ergonomie) */
    .hero h1 { font-size: 2.5rem !important; line-height: 1.2; padding: 0 10px; }
    .hero .subtitle { font-size: 1rem; padding: 0 15px; }
    .section-header h2 { font-size: 2rem !important; }
    
    /* 5. ON EMPILENT LES COLONNES */
    .nav-content { padding: 0 20px; }
}