:root {
    /* NOUVELLE PALETTE HARMONISÉE LOGO */
    --bg-color: #1A1A1A;       /* Gris très profond, plus doux que le noir */
    --bg-secondary: #252525;   /* Gris moyen pour les sections alternées */
    --text-main: #E0E0E0;      /* Gris clair pour le texte courant */
    --text-muted: #A0A0A0;     /* Gris moyen pour les textes secondaires */
    
    /* Couleurs du Logo */
    --gold-primary: #D4AF37;   /* Or métallique classique */
    --gold-light: #F4CF57;     /* Or clair pour les survols/effets */
    --gold-dark: #AA8C2C;      /* Or foncé pour les ombres */
    
    --logo-grey: #333333;      /* Gris anthracite du texte du logo */
    --white: #FFFFFF;
    
    /* Typographie (Inchangée, très bien adaptée) */
    --font-title: 'Space Grotesk', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}
/* Ajustement pour tous les titres utilisant Syne */
h1, h2, h3, h4, h5, h6, .step-title, .service-title, .section-title {
  
    line-height: 1.2; /* Augmentez cette valeur si nécessaire, ex: 1.3 ou 1.4 */
    margin-bottom: 1rem;
    /* Optionnel : ajouter un padding-bottom si le problème persiste sur des conteneurs spécifiques */
    padding-bottom: 0.2em;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--white);
}




a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}







/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    z-index: 2;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    /* Gradient doré pour le texte */
    background: linear-gradient(45deg, var(--white), var(--gold-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Ajustement spécifique pour le Hero H1 si nécessaire */
.hero h1 {
    line-height: 1.1; /* Un peu plus serré pour le titre principal, mais suffisant */
    margin-bottom: 1.5rem;
    font-size: 3.3rem; /* Réduit de 3.5rem (ou autre) à 3rem */
}
.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 500px;
}
/* Style unifié pour les titres de page (comme "Assistants IA") */
.page-header h1 {
    font-family: 'Space Grotesk', sans-serif; /* La nouvelle police */
    font-weight: 700; /* Gras */
    font-size: 3rem; /* Taille importante */
    color: #F5E6CA; /* La couleur crème/jaune pâle */
    text-align: center; /* Centré comme sur l'exemple */
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Ajustement du sous-titre pour qu'il soit bien centré et lisible */
.page-header p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #cccccc; /* Gris clair */
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.btn {
    padding: 12px 30px;
    border-radius: 2px;
    font-weight: 500;
    font-family: var(--font-code);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--gold-primary);
    color: var(--bg-color);
    border: 1px solid var(--gold-primary);
}

.btn-primary:hover {
    background: transparent;
    color: var(--gold-primary);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--text-muted);
}

.btn-secondary:hover {
    border-color: var(--white);
}

/* Terminal Window (IA Simulation) - Adapté en Or */
.terminal-window {
    background: #1E1E1E;
    border-radius: 4px; /* Coins moins ronds pour le premium */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(212, 175, 55, 0.2);
    font-family: var(--font-code);
    overflow: hidden;
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: transform 0.5s ease;
}

.terminal-window:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    border-color: var(--gold-primary);
}

.terminal-header {
    background: #2D2D2D;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.red { background: #FF5F56; }
.yellow { background: #FFBD2E; }
.green { background: #27C93F; }

.terminal-title {
    margin-left: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.terminal-body {
    padding: 20px;
    min-height: 250px;
    color: #A9B7C6;
    font-size: 0.9rem;
}

.code-line {
    display: block;
    margin-bottom: 5px;
}

/* Couleurs syntaxiques adaptées en Or/Gris */
.keyword { color: var(--gold-primary); }
.string { color: #98C379; } /* On garde un vert doux pour les strings pour le contraste code */
.function { color: #61AFEF; } /* Bleu doux pour les fonctions */
.cursor {
    display: inline-block;
    width: 8px;
    height: 18px;
    background: var(--gold-primary);
    animation: blink 1s infinite;
    vertical-align: middle;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Background Orbs - Adaptés en Or */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); /* Flou plus doux */
    z-index: 1;
    opacity: 0.25; /* Plus subtil */
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--gold-primary);
    top: -100px;
    right: -100px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: #444; /* Gris au lieu de violet pour rester neutre */
    bottom: 10%;
    left: -50px;
}

/* Sections */
.section-dark {
    /*padding: 100px 0;*/
    background: var(--bg-color);
}

.section-light {
    padding: 100px 0;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.section-title-dark {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: rgba(255,255,255,0.03);
    padding: 30px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--gold-primary);
}

.icon-box {
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

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

/* Split Layout */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.check-list li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    color: var(--text-main);
}

.check-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--gold-primary);
    font-family: var(--font-code);
    font-weight: bold;
}

.abstract-shape {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-color));
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.abstract-shape::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: var(--gold-primary);
    filter: blur(80px);
    transform: translate(-50%, -50%);
    opacity: 0.3;
}

/* --- Styles pour la Carte de Résultat (Option 2) --- */

.result-card {
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 25px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    animation: slideUp 0.8s ease-out;
}

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

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.card-header h4 {
    font-family: var(--font-code);
    font-size: 0.9rem;
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-badge {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold-primary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.metric-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.icon-shield, .icon-leaf, .icon-coins {
    color: var(--gold-primary);
    display: flex;
    align-items: center;
}

.metric-value {
    font-family: var(--font-code);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--white);
}

.metric-value.gold {
    color: var(--gold-primary);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Animation des barres de progression */
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-primary));
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    
    /* État initial : largeur 0 */
    width: 0; 
    
    /* L'animation utilise la variable --target-width définie dans le style inline du HTML */
    animation: fillBar 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Délais en cascade pour un effet élégant */
.bar-1 { animation-delay: 0.5s; }
.bar-2 { animation-delay: 0.8s; }
.bar-3 { animation-delay: 1.1s; } /* La barre des économies arrive en dernier */

@keyframes fillBar {
    to {
        width: var(--target-width);
    }
}

/* Délais spécifiques pour chaque barre pour un effet cascade */
.metric-row:nth-child(2) + .progress-bar-bg .progress-bar-fill { animation-delay: 0.6s; }
.metric-row:nth-child(4) + .progress-bar-bg .progress-bar-fill { animation-delay: 0.8s; }
/* Note: Le sélecteur CSS ci-dessus est simplifié. Pour plus de précision, on peut cibler par ordre dans le HTML ou utiliser des classes spécifiques. 
   Pour faire simple ici, l'animation globale suffit, ou on ajoute des classes .bar-1, .bar-2 dans le HTML. 
   Je vais ajouter une méthode plus robuste ci-dessous dans les instructions si nécessaire, mais le CSS pur avec nth-child peut être capricieux avec la structure flex.
   Alternative simple : on laisse la largeur définie inline dans le HTML (comme fait ci-dessus) et on anime tout en même temps ou avec un délai global.
*/

/* Correction pour l'animation individuelle des barres */
.progress-bar-fill {
    width: 0; /* Départ à 0 */
    animation: fillBar 1.2s ease-out forwards;
}

/* On cible les barres spécifiquement via le HTML en ajoutant des classes ou on utilise le style inline pour la largeur finale */
/* Pour simplifier et garantir le fonctionnement, voici une approche directe : */

.bar-1 { animation-delay: 0.5s; }
.bar-2 { animation-delay: 0.8s; }
.bar-3 { animation-delay: 1.1s; }

@keyframes fillBar {
    to { width: var(--target-width); }
}

.card-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: right;
}


/* --- Style Formulaire Newsletter Footer --- */
.footer-newsletter {
    text-align: center;
    max-width: 500px;
    margin: 2rem auto 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-newsletter h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.footer-newsletter > p {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Wrapper principal pour cacher/montrer le contenu */
.ph-form-wrapper {
    position: relative;
}

/* Groupe Input + Bouton alignés horizontalement */
.ph-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

/* Champ Email */
.ph-email-input {
    flex: 1;
    background: #1e1e24;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    border-radius: 6px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s;
}

.ph-email-input:focus {
    border-color: #00CEC9;
}

.ph-email-input::placeholder {
    color: #666;
}

/* Bouton Submit */
.ph-submit-btn {
    background: #00CEC9;
    color: #0f0f13;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ph-submit-btn:hover {
    background: #fff;
    color: #00CEC9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 206, 201, 0.3);
}

/* Texte RGPD simplifié */
.ph-rgpd p {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.4;
    margin-top: 1rem;
}

/* Message de succès */
.ph-success-message {
    text-align: center;
    padding: 1rem;
    background: rgba(0, 206, 201, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(0, 206, 201, 0.3);
}

.success-text {
    color: #00CEC9;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ph-back-btn {
    background: transparent;
    border: 1px solid #666;
    color: #ccc;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.ph-back-btn:hover {
    border-color: #fff;
    color: #fff;
}

/* Ajustement du widget Altcha (Captcha) pour qu'il ne dépasse pas */
.ph-captcha-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    min-height: 60px; /* Réserve l'espace */
}

/* Responsive Mobile : Empiler input et bouton */
@media (max-width: 600px) {
    .ph-input-group {
        flex-direction: column;
    }
    .ph-submit-btn {
        width: 100%;
    }
}

/*------------------------------------------------------------*/

/* Footer */
footer {
    padding: 80px 0 30px;
    background: #0f0f0f;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}

.footer-left h3 {
    font-family: var(--font-title);
    color: var(--gold-primary);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.footer-left p {
    color: var(--text-muted);
    margin-bottom: 5px;
}

.small-text {
    font-size: 0.8rem;
    opacity: 0.6;
}

.footer-right {
    text-align: right;
}

.social-links {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.social-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.social-links a:hover {
    color: var(--gold-primary);
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-container, .split-layout {
        grid-template-columns: 1fr;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero h1 {
        font-size: 2.2rem; /* Encore plus petit sur mobile pour garder 2-3 lignes max */
    }
    
    .terminal-window {
        transform: none;
    }
}