/* ============================================================
   DATAPULSE STUDIO — FEUILLE DE STYLE PREMIUM (PARTIE 1 / 3)
   ============================================================ */

:root {
    --fond-sombre: #0b0b0f;
    --carte-noir-mat: #121217;
    --or-metallique: #dfb76c; /* Teinte or/jaune exclusive premium homogène */
    --texte-blanc-casse: #f5f5f5;
    --texte-gris-zinc: #a0a0aa;
    --border-fine: rgba(39, 39, 42, 0.6);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    background-color: var(--fond-sombre);
    color: var(--texte-blanc-casse);
    font-family: 'Inter', sans-serif;
}

body {
    position: relative;
    overflow-x: hidden;
}

/* Halos lumineux flous et fixes en arrière-plan */
body::before, body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 183, 108, 0.03) 0%, rgba(223, 183, 108, 0) 70%);
    z-index: -2;
    pointer-events: none;
}
body::before { top: -10%; left: -10%; }
body::after { bottom: -10%; right: -10%; }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-padding {
    padding: 120px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: -0.02em;
}

.gold-gradient {
    background: linear-gradient(135deg, #fff 0%, var(--or-metallique) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Header & Menu effet Flou premium */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    background-color: rgba(18, 18, 23, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-fine);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo, .logo-footer {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--texte-blanc-casse);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.logo span, .logo-footer span { color: var(--or-metallique); }

.menu {
    display: flex;
    list-style: none;
    gap: 32px;
}
.menu a {
    text-decoration: none;
    color: var(--texte-gris-zinc);
    font-weight: 500;
    transition: color 0.3s ease;
}
.menu a:hover { color: var(--or-metallique); }

/* Accueil (Hero Section) */
.accueil {
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
}
.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.titre {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 24px;
    text-shadow: 0 0 30px rgba(223, 183, 108, 0.1);
}
.texte-accroche {
    font-size: 1.15rem;
    color: var(--texte-gris-zinc);
    margin-bottom: 40px;
    line-height: 1.6;
}
/* ============================================================
   DATAPULSE STUDIO — FEUILLE DE STYLE PREMIUM (PARTIE 2 / 3)
   ============================================================ */

/* Grille de Services & Ingénierie Événementielle */
.grille-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.carte-service {
    background-color: var(--carte-noir-mat);
    border: 1px solid var(--border-fine);
    padding: 40px 32px;
    border-radius: 16px;
    transition: border-color 0.3s ease;
}
.carte-service:hover { border-color: rgba(223, 183, 108, 0.4); }

.icone {
    width: 40px;
    height: 40px;
    stroke: var(--or-metallique);
    margin-bottom: 24px;
}
.carte-service h3 { font-size: 1.25rem; margin-bottom: 12px; }

/* Aération typographique et couleur dorée d'élite pour l'italique */
.carte-service p { 
    color: var(--texte-gris-zinc); 
    font-size: 0.95rem; 
    line-height: 1.75 !important; 
}
.carte-service p em, 
.carte-service p strong {
    color: var(--or-metallique) !important;
    font-style: italic !important;
    font-size: 1.02rem !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
    -webkit-text-fill-color: var(--or-metallique) !important;
}

/* Réalisations & Structure du Mockup */
.presentation-realisation {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 48px;
    align-items: center;
}
.texte-realisation p { color: var(--texte-gris-zinc); line-height: 1.6; font-size: 1.1rem; }
.mockup-screen {
    background-color: #050507;
    border: 1px solid var(--border-fine);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.mockup-header {
    background-color: #121217;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-fine);
}
.status-flux {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--texte-gris-zinc);
}
.voyant-vert {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}
.mockup-body {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 24px;
    padding: 24px;
    height: 280px;
}
.thermomètre-collecte {
    background-color: #121217;
    width: 16px;
    height: 100%;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-fine);
}
.jauge-collecte {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, #b59410, var(--or-metallique));
    transition: height 1s ease-in-out;
}
.stats-panel { display: flex; flex-direction: column; }
.panel-label { font-size: 0.8rem; text-transform: uppercase; color: var(--texte-gris-zinc); }
.compteur-dons { font-size: 2.2rem; font-weight: 800; color: var(--or-metallique); margin: 4px 0 16px 0; transition: opacity 0.2s; }
.liste-donateurs-recent { display: flex; flex-direction: column; gap: 8px; }
.donateur-row {
    display: flex;
    justify-content: space-between;
    background-color: var(--carte-mat);
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-fine);
    font-size: 0.9rem;
    animation: fadeIn 0.4s ease forwards;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* Section Philosophie & Recentrage */
.philosophie-texte, 
#philosophie .philosophie-texte {
    display: block !important;
    max-width: 850px !important;
    margin: 0 auto 48px auto !important;
    text-align: left !important;
}
.philosophie-texte p { color: var(--texte-gris-zinc); line-height: 1.85 !important; font-size: 1.1rem !important; margin-bottom: 24px !important; }

/* Liste des 4 Badges de Valeurs et Effet Dynamique au Survol */
.liste-badges { display: flex; justify-content: center; gap: 16px; }
.badge {
    background-color: rgba(18, 18, 23, 0.6) !important;
    border: 1px solid rgba(223, 183, 108, 0.3) !important;
    color: var(--or-metallique) !important;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

/* Forçage de l'animation interactive au survol (Hover) */
.badge:hover {
    transform: translateY(-4px) !important;
    background-color: var(--or-metallique) !important;
    color: #0b0b0f !important;
    box-shadow: 0 4px 15px rgba(223, 183, 108, 0.4) !important;
}
/* ============================================================
   DATAPULSE STUDIO — FEUILLE DE STYLE PREMIUM (PARTIE 3 / 3)
   ============================================================ */

/* --- STRUCTURE DU FORMULAIRE --- */
.carte-formulaire {
    background-color: var(--carte-noir-mat);
    border: 1px solid var(--border-fine);
    padding: 48px;
    border-radius: 24px;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
    min-height: 400px;
}

.form-step {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.form-step:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.step-number {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--or-metallique);
    background: rgba(223, 183, 108, 0.05);
    border: 1px solid rgba(223, 183, 108, 0.2);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.step-header h3 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.form-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 24px; 
}

.form-group { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.form-group label { 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    color: var(--texte-gris-zinc); 
    letter-spacing: 0.05em;
}

.form-group input, .form-group select, .form-group textarea {
    background-color: #0b0b0f;
    border: 1px solid var(--border-fine);
    padding: 14px 16px;
    color: white;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.98rem;
    transition: border-color 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { 
    outline: none; 
    border-color: var(--or-metallique); 
}

.required {
    color: var(--or-metallique);
    font-weight: bold;
    margin-left: 2px;
}

/* --- GRILLE DES CARTES DE SOLUTIONS --- */
.solutions-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.solution-card-label {
    cursor: pointer;
    display: block;
}
.solution-card-label input[type="checkbox"] {
    display: none !important;
}

.solution-card-custom {
    background-color: #0b0b0f !important;
    border: 1px solid var(--border-fine);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.solution-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.solution-card-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--texte-blanc-casse);
}

.solution-card-desc {
    font-size: 0.9rem;
    color: var(--texte-gris-zinc);
    line-height: 1.5;
}

.solution-card-label input:checked + .solution-card-custom {
    border-color: var(--or-metallique) !important;
    background-color: rgba(223, 183, 108, 0.02) !important;
    box-shadow: inset 0 0 12px rgba(223, 183, 108, 0.04);
}

/* Info-bulles (Tooltips UI) */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-icon {
    width: 20px;
    height: 20px;
    background: rgba(160, 160, 170, 0.12);
    color: var(--or-metallique);
    border: 1px solid rgba(223, 183, 108, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    font-family: serif;
    cursor: help;
}

.tooltip-text {
    visibility: hidden;
    width: 240px;
    background-color: #16161c;
    color: var(--texte-blanc-casse);
    text-align: left;
    border: 1px solid var(--border-fine);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.82rem;
    line-height: 1.4;
    position: absolute;
    z-index: 10;
    bottom: 130%;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(5px);
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* --- TELEVERSEMENT (UPLOAD DROPZONE) --- */
.upload-zone-label {
    cursor: pointer;
    display: block;
}

.upload-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--texte-gris-zinc);
    margin-bottom: 8px;
    display: block;
}

.upload-dropzone {
    background-color: #0b0b0f;
    border: 1px dashed var(--border-fine);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color 0.3s, background-color 0.3s;
}
.upload-dropzone:hover {
    border-color: var(--or-metallique);
    background-color: rgba(223, 183, 108, 0.01);
}

.upload-icon {
    width: 32px;
    height: 32px;
    stroke: var(--texte-gris-zinc);
    display: block;
}

#upload-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--texte-blanc-casse);
}

.upload-limit {
    font-size: 0.78rem;
    color: var(--texte-gris-zinc);
}

/* --- DESIGN DE L'ÉCRAN DE CONFIRMATION PREMIUM --- */
.success-screen-premium {
    display: none;
    text-align: center;
    padding: 40px 20px;
    animation: fadeInSuccess 0.5s ease-out forwards;
}

@keyframes fadeInSuccess {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.success-badge {
    width: 64px;
    height: 64px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.success-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f5f5f5;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.success-text {
    font-size: 1.05rem;
    color: var(--texte-gris-zinc);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 32px auto;
}

.btn-retour {
    background: transparent;
    border: 1px solid var(--border-fine);
    color: var(--texte-blanc-casse);
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-retour:hover {
    border-color: var(--or-metallique);
    color: var(--or-metallique);
    box-shadow: 0 4px 15px rgba(223, 183, 108, 0.1);
}

/* Footer */
.footer { border-top: 1px solid var(--border-fine); background-color: #060608; padding: 40px 0; }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.footer-bottom-info { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.liste-liens-rapides { list-style: none; display: flex; gap: 16px; }
.liste-liens-rapides a { text-decoration: none; color: var(--texte-gris-zinc); font-size: 0.9rem; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .grille-services, 
    .presentation-realisation, 
    .philosophie-texte, 
    .form-grid, 
    .solutions-selector-grid,
    .grille-tarifs {
        grid-template-columns: 1fr !important;
    }
    .carte-service:nth-child(4) { grid-column: auto; }
    .menu { display: none; }
    .footer-content { flex-direction: column; gap: 24px; text-align: center; }
    .footer-bottom-info { align-items: center; }
    .carte-formulaire { padding: 28px 20px; }
}

/* ============================================================
   EFFETS DYNAMIQUES HAUTE FIDÉLITÉ — SECTION TARIFS
============================================================ */
.carte-tarif-premium {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Soulèvement géométrique fluide au survol */
.carte-tarif-premium:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(223, 183, 108, 0.05) !important;
    border-color: rgba(223, 183, 108, 0.3) !important;
}

/* Lueur d'accentuation spécifique pour l'offre Pro */
.carte-tarif-premium-active:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(223, 183, 108, 0.15) !important;
}
/* ============================================================
   RESTAURATION BOUTON HERO CTA & AÉRATION DES TEXTES
============================================================ */
/* 1. Restauration exclusive du gros bouton d'accueil (Hero Section uniquement) */
.hero-content .cta,
.accueil .cta {
    display: inline-block !important;
    background-color: #dfb76c !important; /* Teinte or premium */
    color: #0b0b0f !important;            /* Texte noir mat */
    padding: 16px 36px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    box-shadow: 0 4px 20px rgba(223, 183, 108, 0.2) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    margin-top: 20px !important;
}

.hero-content .cta:hover,
.accueil .cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(223, 183, 108, 0.4) !important;
}

/* Style de sécurité pour le bouton Soumission de la barre de navigation */
.menu .btn-soumission-nav {
    background-color: #dfb76c !important;
    color: #0b0b0f !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    display: inline-flex !important;
    align-items: center;
    transition: all 0.3s ease !important;
}

.menu .btn-soumission-nav:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(223, 183, 108, 0.3) !important;
}


/* 2. Forçage de l'or/jaune sur les textes en italique de la section Ingénierie */
.carte-service p em, 
.carte-service p strong,
#services p em {
    color: #dfb76c !important;
    font-style: italic !important;
    font-size: 1.05rem !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

/* 3. Style exclusif et interactif pour les 4 badges de la Philosophie */
.liste-badges .badge, 
#philosophie .badge {
    background-color: #121217 !important;
    border: 1px solid rgba(223, 183, 108, 0.3) !important;
    color: #dfb76c !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Effet dynamique (Hover) sur les 4 badges */
.liste-badges .badge:hover, 
#philosophie .badge:hover {
    transform: translateY(-4px) !important;
    background-color: #dfb76c !important;
    color: #0b0b0f !important;
    box-shadow: 0 4px 15px rgba(223, 183, 108, 0.4) !important;
}

/* ============================================================
   FORÇAGE TYPOGRAPHIQUE UNIVERSIEL — ACCUEIL (HERO)
============================================================ */
/* 1. Force le déploiement majestueux du grand titre principal */
.accueil h1, 
.hero-content h1, 
.titre {
    font-size: 4.2rem !important;       /* Taille XXL pour occuper le volume */
    line-height: 1.3 !important;        /* Espace parfait pour laisser respirer le titre */
    letter-spacing: -0.03em !important; /* Rendu premium ultra-SaaS */
    margin-bottom: 34px !important;     /* Crée une distance royale avec le texte du bas */
    display: block !important;
}

/* 2. Force l'aération monumentale du paragraphe d'accroche */
.accueil p, 
.hero-content p, 
.texte-accroche {
    font-size: 1.3rem !important;       /* Agrandit la police pour briser l'effet miniature */
    line-height: 1.95 !important;       /* Immense bol d'air visuel pour éliminer le tassement */
    max-width: 950px !important;        /* Élargit le bloc horizontalement pour combler le vide */
    margin: 0 auto 52px auto !important;/* Centre et repousse le bouton vers le bas */
    color: #a0a0aa !important;          /* Gris zinc texturé anti-fatigue */
    letter-spacing: -0.01em !important;
    display: block !important;
}

/* ============================================================
   MÉTAMORPHOSE GÉOMÉTRIQUE — INGENIERIE ÉVÉNEMENTIELLE
============================================================ */
/* 1. Extraction et coloration dorée absolue de l'accroche en italique */
.carte-service em,
.carte-service strong,
#services .carte-service p em,
.carte-service p > em {
    color: #dfb76c !important;             /* Teinte or premium signature */
    -webkit-text-fill-color: #dfb76c !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: 1.08rem !important;
    display: block !important;             /* Force l'accroche à s'isoler royalement */
    margin-top: 4px !important;
    margin-bottom: 18px !important;        /* Crée une distance aérée avec la suite du texte */
    letter-spacing: 0.01em !important;
}

/* 2. Respiration monumentale des blocs de paragraphes descriptifs */
.carte-service p,
#services .carte-service p,
.carte-service div {
    font-size: 0.98rem !important;
    line-height: 1.95 !important;          /* Immense bol d'air vertical entre les lignes */
    color: #a0a0aa !important;             /* Gris zinc mat premium reposant */
    letter-spacing: -0.01em !important;
}

/* 3. Aération et équilibre des boîtes de services */
.carte-service {
    padding: 48px 36px !important;         /* Donne de l'espace à l'intérieur des cartes */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background-color: #121217 !important;  /* Noir mat de luxe uniforme */
    transition: all 0.3s ease !important;
}

.carte-service:hover {
    border-color: rgba(223, 183, 108, 0.4) !important; /* Lueur or discrète au survol */
}

/* ============================================================
   CIBLAGE TEXTUEL ULTRA-LARGE — NOTRE PHILOSOPHIE
============================================================ */
/* ============================================================
   AJUSTEMENT PRESTIGE — ALIGNEMENT & BADGES DE PHILOSOPHIE
============================================================ */
/* 1. Force le recentrage harmonieux des paragraphes sous le titre */
.philosophie-texte, 
#philosophie .philosophie-texte {
    text-align: center !important;     /* Modifie l'alignement à gauche pour le placer au centre */
    max-width: 850px !important;       /* Donne une largeur confortable de lecture */
    margin: 0 auto 48px auto !important;/* Centre le bloc sur la page */
}

.philosophie-texte p, 
#philosophie .philosophie-texte p {
    text-align: center !important;     /* Assure le centrage de chaque ligne de texte */
    line-height: 1.9 !important;       /* Respiration verticale haut de gamme */
}

/* 2. Style et animation interactive sur vos 4 valeurs existantes */
.liste-badges .badge,
#philosophie .badge {
    background-color: #121217 !important; /* Fond noir mat texturé de luxe */
    border: 1px solid rgba(223, 183, 108, 0.25) !important; /* Liseré or ultra-fin */
    color: #dfb76c !important;            /* Écriture dorée premium signature */
    padding: 12px 28px !important;        /* Donne du relief et de la largeur */
    border-radius: 6px !important;        /* Angles adoucis discrets */
    font-size: 0.95rem !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Mouvement fluide */
}

/* Effet dynamique (Hover) : le badge s'illumine et s'élève au passage de la souris */
.liste-badges .badge:hover,
#philosophie .badge:hover {
    transform: translateY(-5px) !important; /* Soulèvement sous le curseur */
    background-color: #dfb76c !important;   /* Le fond passe à l'or brillant */
    color: #0b0b0f !important;              /* Le texte passe en noir mat */
    border-color: #dfb76c !important;
    box-shadow: 0 8px 20px rgba(223, 183, 108, 0.3) !important; /* Halo lumineux */
}

/* ============================================================
   DESIGN PREMIUM & INTERACTIVITÉ DU MENU BURGER MOBILE
============================================================ */
/* 1. Apparence par défaut du bouton sur grand écran (Invisible sur ordinateur) */
.burger-menu-btn {
    display: none; /* Masqué par défaut sur les ordinateurs */
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    padding: 0;
    z-index: 1100;
}

/* Structure géométrique fine des 3 barres horizontales dorées */
.barre-burger {
    width: 100%;
    height: 2px;
    background-color: var(--or-metallique); /* Teinte or exclusive signature */
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Adaptation Responsive stricte pour les smartphones et tablettes */
@media (max-width: 768px) {
    /* Fait apparaître le bouton burger sur les petits écrans */
    .burger-menu-btn {
        display: flex !important;
    }

    /* Transforme la liste des liens en un volet masqué en arrière-plan */
    .navbar .menu {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Propulse le menu hors de l'écran à droite par défaut */
        width: 80% !important;   /* Occupe une largeur élégante sur smartphone */
        height: 100vh !important;
        background-color: rgba(18, 18, 23, 0.98) !important; /* Fond noir mat effet flou */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        padding: 120px 40px !important;
        gap: 36px !important;
        border-left: 1px solid var(--border-fine) !important;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Glissement organique */
        z-index: 1050 !important;
    }

    /* Classe dynamique activée en JavaScript pour faire glisser le menu vers la gauche */
    .navbar .menu.active {
        right: 0 !important; /* Le menu apparaît instantanément avec élégance */
    }

    /* Configuration des liens internes mobiles */
    .navbar .menu a {
        font-size: 1.3rem !important; /* Agrandit les textes pour une sélection tactile facile */
        font-weight: 600 !important;
        display: block !important;
        width: 100% !important;
    }

    /* 3. Animation en direct des 3 barres dorées au clic (Effet de rotation en Croix) */
    .burger-menu-btn.active .barre-burger:nth-child(1) {
        transform: translateY(10px) rotate(45deg) !important;
    }
    .burger-menu-btn.active .barre-burger:nth-child(2) {
        opacity: 0 !important; /* La barre du milieu s'efface */
    }
    .burger-menu-btn.active .barre-burger:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg) !important;
    }
}

/* ============================================================
   FORÇAGE DE LA COULEUR OR SUR LES PRIX DES FORFAITS
============================================================ */
.grille-tarifs .prix,
.tarifs-grid .prix,
#tarifs .prix,
div[class*="prix"] {
    color: #dfb76c !important;             /* Teinte or premium signature */
    -webkit-text-fill-color: #dfb76c !important; /* Force l'application sur tous les navigateurs */
    font-weight: 800 !important;
    font-size: 1.6rem !important;          /* Donne une belle prestance aux montants */
    display: block !important;
    margin: 12px 0 !important;
}

/* ============================================================
   FORÇAGE TYPOGRAPHIQUE UNIVERSIEL SUR LA ZONE DÉMO (FINAL)
============================================================ */
/* 1. Force le déploiement monumental sur le titre qui contient "Démo" */
h2.section-title, 
.section-title {
    font-size: 3.8rem !important;       /* Présence théâtrale massive du titre */
    letter-spacing: -0.02em !important; /* Rendu dense ultra-SaaS haut de gamme */
    margin-bottom: 36px !important;     /* Écarte proprement le texte du dessous */
    text-align: center !important;
}

/* 2. Repère le paragraphe d'introduction situé juste sous le titre principal et l'aère */
.section-title + p,
.section-title + div p,
.container > p:first-of-type {
    font-size: 1.25rem !important;      /* Agrandit la police pour asseoir le message */
    line-height: 1.95 !important;       /* Crée l'aération verticale royale entre les lignes */
    max-width: 900px !important;        /* Empêche le texte de s'étaler dans le vide */
    margin: 0 auto 48px auto !important;/* Centre et repousse les boîtes technologiques */
    color: #a0a0aa !important;          /* Teinte gris zinc exclusive signature */
    text-align: center !important;
}

/* 3. Repère le paragraphe de conclusion tout en bas et l'aère luxueusement sans le masquer */
.presentation-realisation + p,
.mockup-screen + p,
.container > p:last-of-type {
    margin-top: 54px !important;        /* Repousse proprement le texte sous les boîtes */
    line-height: 2.0 !important;        /* Respiration maximale de lecture */
    color: #888893 !important;          /* Teinte atténuée premium */
    font-size: 1.1rem !important;
    text-align: center !important;
    max-width: 950px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   FORÇAGE TYPOGRAPHIQUE PAR ID — SECTION DÉMO (FINAL)
============================================================ */
/* ============================================================
   FORÇAGE TYPOGRAPHIQUE NUMÉRIQUE — SECTION DÉMO & CONCEPTS
============================================================ */
/* 1. Déploiement théâtral et massif du grand titre principal */
body section:nth-of-type(3) .section-title,
body section:nth-of-type(4) .section-title,
.realisations .section-title,
h2.section-title {
    font-size: 3.8rem !important;       /* Donne une présence monumentale au titre */
    letter-spacing: -0.02em !important; /* Rendu typographique dense haut de gamme */
    margin-bottom: 24px !important;     /* Distance parfaite avec le paragraphe du dessous */
    text-align: center !important;
    display: block !important;
}

/* 2. Respiration monumentale et taille de prestige pour la description supérieure */
body section:nth-of-type(3) p:first-of-type,
body section:nth-of-type(4) p:first-of-type,
.realisations p:first-of-type {
    font-size: 1.25rem !important;      /* Agrandit la police pour asseoir le message */
    line-height: 1.95 !important;       /* Offre un immense espace d'air visuel entre les lignes */
    max-width: 900px !important;        /* Empêche le texte de s'étaler trop horizontalement */
    margin: 0 auto 48px auto !important;/* Centre parfaitement horizontalement sur la page */
    color: #a0a0aa !important;          /* Gris zinc mat premium signature */
    text-align: center !important;
    display: block !important;
}

/* 3. Aération et finition du paragraphe inférieur (Conclusion) sans jamais le masquer */
body section:nth-of-type(3) p:last-of-type,
body section:nth-of-type(4) p:last-of-type,
.realisations p:last-of-type {
    margin-top: 54px !important;        /* Repousse proprement le texte sous les boîtes noires */
    line-height: 2.0 !important;        /* Respiration maximale de lecture */
    color: #888893 !important;          /* Teinte ardoise atténuée très distinguée */
    font-size: 1.1rem !important;
    max-width: 950px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
}