@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Orbitron:wght@600;800&family=Great+Vibes&display=swap');

:root {
    /* Couleurs de fond principales (Base IA) */
    /*--primary-color: #1a0933;       /* Violet très foncé (utilisé pour les textes sur fond clair) */
    /*--secondary-color: #0c041a;     /* Bleu nuit / Noir profond */
    --primary-color: #2e1159;       /* Violet Tech "lumineux" */
    --secondary-color: #0d041c;     /* Fond très sombre pour conserver le contraste */
    
    --bg-center: #1f0b3d;      /* Le cœur lumineux du dégradé (au centre) */
    --bg-mid-layer: #0d041c;   /* La couche intermédiaire de transition */
    --bg-edges: #05010a;       /* Les bordures extérieures sombres */

    --nav-overlay-color: 13, 4, 28; /* Équivalent RGB de #0d041c */

    /* Variables pour le Bouton Cuivre/Or Lumineux */
    --button-color: #e5a93b;        /* Or/Cuivre de base (teinte moyenne) */
    --button-hover-color: #f3c36c;  /* Or plus clair et éclatant pour le survol */
    /*--button-color: #d98832;        
    /*--button-hover-color: #f7b267; */
    
    /* Autres variables utiles de ton site */
    --menu-toggle-color: #ffffff;   /* Couleur des barres du menu burger */
    --header-text-color: #ffffff;   /* Couleur des liens du menu sur ordinateur */
    --dark-gold: #c77414;         /* Or pur pour les détails des circuits imprimés */
    --accent-gold: #e59942;         /* Doré ambré / Cuivré chaleureux */
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden; /* Sécurise tout le site contre les débordements */
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    color: var(--secondary-color);
    scroll-behavior: smooth;
}

a {
    color: var(--primary-color);
    /*text-decoration: none;*/
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-gold);
}

h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700; /* Très gras pour un maximum d'impact */
    letter-spacing: 1px;
    color: var(--header-text-color);
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
    position: relative;
}

h2, h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

h2 {
    font-size: 2rem;
    padding-bottom: 10px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: radial-gradient(circle at 50% 30%, #ffe066 0%, var(--button-color) 70%, #aa7c11 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 196, 81, 0.5);
    display: block;
}

ul li {
    text-align: left;
}

.icon-list {
    list-style-type: none; /* TRÈS IMPORTANT : Supprime la puce par défaut */
    padding-left: 0;      /* Réinitialise le décalage à gauche créé par la puce */
    margin-left: 0;       /* Assure un alignement parfait */
}

.icon-list li {
    /*display: flex; /* Active Flexbox */
    /*align-items: flex-start; /* Alignement en haut (pour que le texte long ne décale pas l'icône) */
    margin-bottom: 20px; /* Ajoute plus d'espace entre les points */
}

.icon-list li .fas {
    flex-shrink: 0;      /* Empêche l'icône de rétrécir */
    font-size: 1.2em;
    color: var(--accent-gold); 
    margin-right: 5px;  /* Espace entre l'icône et le texte */
    margin-top: 2px;     
}

header {
    display: grid;
    position: relative;
    width: 100%;
    background: radial-gradient(
        circle at 50% 50%, 
        var(--bg-center) 0%, 
        var(--bg-mid-layer) 60%, 
        var(--bg-edges) 100%
    );
    overflow: hidden;
    
    /* Grille Mobile : 3 lignes */
    grid-template-columns: minmax(80px, auto) 1fr minmax(80px, auto);
    grid-template-areas: 
        "area-logo  area-btn   area-burger" /* Ligne 1 : Logo, Bouton, Burger */
        "area-hero  area-hero  area-hero"   /* Ligne 2 : Titres */
        "area-robot area-robot area-robot"; /* Ligne 3 : Robot */
        
    padding: 15px;
    gap: 0px 10px;
    box-sizing: border-box;
}

footer {
    background: radial-gradient(
        circle at 50% 50%, 
        var(--bg-mid-layer) 0%, 
        var(--bg-mid-layer) 60%, 
        var(--bg-edges) 100%
    );
    color: var(--header-text-color);
    text-align: center;

    padding: 30px 0;
    position: relative;
}

header::before, footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Étape 1 : On définit la couleur de fond (notre Or) */
    background-color: var(--accent-gold);
    
    /* Étape 2 : On règle l'opacité pour que ce soit subtil (0.15 = 15% d'opacité) 
       Ajuste cette valeur si tu veux que le circuit se voie plus ou moins */
    opacity: 0.22; 
    
    /* Étape 3 : On applique l'image du circuit comme un masque. 
       Le CSS va "découper" la couleur Or selon les lignes de ton image */
    -webkit-mask-image: url('../images/circuit_imprime.webp'); /* ou .webp / .png selon ton fichier */
    mask-image: url('../images/circuit_imprime.webp');
    
    /* Étape 4 : On gère la répétition et la taille du motif */
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
    
    mask-size: 1000px; /* Taille du motif sur ordi, on l'ajustera ci-dessous */
    -webkit-mask-size: 1000px;
    
    /* Sécurité : On s'assure qu'il reste derrière le texte, le robot et le menu */
    z-index: 0; 
    pointer-events: none; /* Le circuit est invisible pour les clics de la souris */
}

/* L'astuce ultime : on dit au navigateur de ne pas traiter la balise <nav> 
   comme un bloc rigide, pour que ses enfants (burger et menu) s'intègrent à la grille */
header nav {
    display: contents;
}

.nav-bg-overlay {
    grid-column: 1 / -1; /* S'étire sur toute la largeur de la grille */
    grid-row: 1;         /* Épouse la hauteur exacte de la première ligne */
    
    /* Les marges négatives qui forcent le calque à coller aux bords de l'écran */
    margin-top: -15px;
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 15px; 
    
    /* Ta courbe d'opacité : 90% en haut, 50% au milieu, 0% (transparent) en bas */
    background: linear-gradient(
        to bottom, 
        rgba(var(--nav-overlay-color), 0.9) 0%, 
        rgba(var(--nav-overlay-color), 0.6) 90%, 
        rgba(var(--nav-overlay-color), 0) 100%
    );
    
    z-index: 2; /* Se place derrière le texte et le bouton, mais devant le circuit */
    pointer-events: none; /* Reste invisible pour les clics de souris */
}

/* Assignation des zones (valable pour mobile et ordinateur) */
.logo         { grid-area: area-logo; }
.menu-toggle  { grid-area: area-burger; }
.menu         { grid-area: area-menu; }
.btn          { grid-area: area-btn; }
.hero-content { grid-area: area-hero; }
.hero-image   { grid-area: area-robot; }

.logo img, .logo {
    /* Ajuste cette valeur (ex: 45px, 50px ou 60px) jusqu'à ce que la taille te convienne */
    height: 80px; 
    width: auto; /* Conserve les proportions du logo sans le déformer */
    display: flex;
    align-items: center;
    z-index: 3; 
}

.hero-content {
    justify-self: center; /* Centre le bloc dans la grille */
    text-align: center;   /* Centre le texte à l'intérieur */
    color: var(--header-text-color); /* Force le texte en blanc si besoin */
}

.hero-image {
    justify-self: center; /* Centre le robot sur l'écran du smartphone */
    z-index: 3; 
    height: 150px; 
    width: auto;
    position: relative;

    /* Optionnel : On peut aussi ajouter un mini flou global ultra-subtil (0.3px) 
       pour adoucir l'effet "pixel trop net" si besoin */

    filter: blur(0.4px)
            drop-shadow(0 0 4px rgba(0, 212, 255, 0.6)) 
            drop-shadow(0 0 8px rgba(147, 51, 234, 0.5));
}

.menu-toggle {
    display: flex; /* Affiché sur mobile */
    flex-direction: column;
    justify-content: space-around;
    justify-self: end;
    align-self: center;
    width: 30px;
    height: 21px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 15px;
    z-index: 20; /* S'assure que le burger reste cliquable au-dessus du reste */
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--menu-toggle-color);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animations du toggle (open) */
.menu-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    background-color: rgba(26, 9, 51, 0.95); /* Teinte violette foncée cohérente avec ton IA */
    position: fixed;
    top: 60px; /* Aligné juste sous ta ligne de header mobile */
    height: calc(100vh - 60px); /* Prend toute la hauteur restante de l'écran */
    right: 0;
    width: 200px;
    text-align: right;
    padding: 30px 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease, visibility 0s 0.3s;
    opacity: 0;
    visibility: hidden;
    z-index: 15;
}

.menu.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.menu a, footer a {
    color: var(--header-text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Optionnel : un petit effet au survol sur ordinateur */
.menu a:hover, footer a:hover {
    color: var(--accent-gold); 
}

.menu li {
    margin: 15px 0;
}

.btn {
    margin: 0;
    font-size: 0.85rem; 
    padding: 8px 16px; 
    align-self: center;
    justify-self: center; 
    
    background: radial-gradient(circle at 50% 30%, #ffe066 0%, var(--button-color) 70%, #aa7c11 100%);
    color: var(--primary-color); 
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.4), /* Ligne de lumière en haut */
        inset 0 -2px 3px rgba(0, 0, 0, 0.3),       /* Ombre de profondeur en bas */
        0 4px 10px rgba(0, 0, 0, 0.2);             /* Ombre portée sous le bouton */
    transition: all 0.3s ease;

    z-index: 3; 
    display: inline-block;
}

.btn:hover {
    /* Au survol, le point chaud central s'agrandit et s'illumine (le blanc/doré passe à 20%) */
    background: radial-gradient(circle at 50% 30%, #ffffff 0%, #ffe066 20%, var(--button-hover-color) 80%);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3),
        0 6px 15px rgba(212, 175, 55, 0.3); /* Légère lueur dorée */
}

.btn-secondary {
    display: inline-block;
    color: var(--primary-color);
    padding: 12px 30px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    background: transparent;
    border: 2px solid var(--accent-gold); /* Bordure dorée */
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--accent-gold);
    color: var(--menu-toggle-color); /* Le bouton se remplit de doré au survol */
    box-shadow: 0 4px 12px rgba(229, 153, 66, 0.7);
}

section {
    padding: 50px 50px;
    text-align: center;
}

.services-section, .tarifs-section, .informations-section {
    position: relative; /* Indispensable pour caler les morceaux de circuits */
    background-color: #fcfbfe; /* Le fond blanc cassé/très légèrement violet de ta maquette */
    padding: 60px 20px;
    overflow: hidden; /* Évite que les circuits décoratifs dépassent du site */
    display: block;
}

.services-section::before,
.services-section::after,
.tarifs-section::before,
.tarifs-section::after,
.informations-section::before,
.informations-section::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: var(--accent-gold);
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;

    -webkit-mask-image: url('../images/circuit_imprime.webp');
    mask-image: url('../images/circuit_imprime.webp');
    -webkit-mask-size: 1000px;
    mask-size: 1000px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.services-section::before,
.tarifs-section::before,
.informations-section::before {
    top: 0;
    right: 0;
    -webkit-mask-position: top right;
    mask-position: top right;
}

.services-section::after,
.tarifs-section::after,
.informations-section::after {
    bottom: 0;
    left: 0;
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
}

.services-grid, .valeurs-grid, .realisations-grid, .tarifs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 20px;
}

.services-grid, .realisations-grid, .tarifs-grid, .informations-grid, .faqs-grid, .confidentialite-section, .mentions-section, .cgu-section, .cgv-section {
    max-width: 1200px;
    margin: 0 auto;
}

.faqs-grid, .informations-grid {
    display: grid;
    gap: 20px;
    margin-top: 50px;
}

.service, .valeur, .realisation, .tarif, .information, .faq {
    background-color: #ffffff; /* Fond blanc pur pour détacher la carte du fond gris */
    border: 1px solid #e2def0; /* Fine bordure très claire */
    border-radius: 8px; /* Coins légèrement arrondis */
    padding: 30px;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(26, 9, 51, 0.03); /* Ombre ultra subtile violette */
}

.information {
    display: flex;
    flex-direction: column;
}

.information h2 {
    order: 1; /* Le titre en premier */
    margin-bottom: 20px;
}

.text-information {
    order: 2; /* Le texte passe en deuxième */
    text-align: left;
}

.image-information {
    order: 3; /* L'image descend tout en bas */
    max-width: 350px;
    display: block;
}

.image-information img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq {
    padding: 10px;
}

.service-intro {
    display: flex;
    flex-direction: row; /* Image à gauche, texte à droite */
    align-items: center; /* 💡 C'est la ligne magique qui centre verticalement le texte avec l'image */
    gap: 25px; /* Espace fixe et propre entre l'image et le texte */
}

.service-image {
    width: clamp(100px, 12vw, 200px);
    height: clamp(100px, 12vw, 200px);
    border-radius: 12px; /* 💡 Coins arrondis comme sur la maquette */
    margin-right: 20px; /* Espace entre l'image et le texte à droite */
    margin-bottom: 15px; /* Espace sous l'image pour le texte qui passe en dessous */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.apropos-section {
    padding: 40px 20px;
    background-color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
}

.apropos-content-wrapper {
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.photo-apropos {    
    float: left;
    width: clamp(120px, 20vw, 200px);
    height: auto;
    max-width: 100%;
    border-radius: 20px; 
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); 

    margin-right: 30px; /* Espace entre la photo et le texte à droite */
    margin-bottom: 15px; /* Espace sous la photo pour le texte qui passe en dessous */
    margin-top: 5px;
}

.apropos-text p {
    font-size: 1.05rem;
    line-height: 1.4;
    margin-bottom: 15px;
}

.signature {
    display: block;
    font-family: 'Great Vibes', cursive, sans-serif; /* Pense à importer une police cursive si tu veux ce style précis */
    font-size: 2rem;
    color: var(--primary-color);
    text-align: left; 
}

.valeurs {
    background-color: #ebe4f5;
    border-radius: 16px;
    padding: 30px 30px 30px 30px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.valeur {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 20px;
    gap: 20px;
    border-radius: 12px;
    border: 1px solid rgba(112, 0, 255, 0.1); /* Fine bordure violette */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

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

.icon-wrapper {
    flex-shrink: 0; /* Empêche l'icône de se déformer ou de rétrécir */
    width: 50px;    /* Taille parfaite pour l'affichage à l'écran */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(248, 185, 68, 0.7)) 
            drop-shadow(0 0 10px rgba(147, 51, 234, 0.3));
    object-fit: contain; /* Conserve les proportions de tes icônes */
}

.valeur p {
    margin: 0px;
}

.image-realisation {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;
}

.image-realisation img {
    max-width: 350px; /* L'image s'adapte à la largeur de son conteneur */
    width: 100%;
    height: auto; /* Maintient le ratio d'aspect */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Légère ombre sur l'image */
}

.explication-tarifs {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

.contact-layout {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espace de 40px entre le formulaire et le bloc de droite */
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding: 0 20px;
}

.contact-infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.formulaire-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px; /* Augmentation de la largeur */
    margin: 0 auto;
}

.formulaire-contact input, .formulaire-contact textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.formulaire-contact input:focus, .formulaire-contact textarea:focus {
    border-color: var(--accent-gold); /* Couleur au focus */
    outline: none;
}

.leurre {
    position: absolute;
    left: -9999px; /* Déplace l'élément hors de l'écran */
    visibility: hidden; /* Cache complètement l'élément */
    opacity: 0; /* Assure qu'il est invisible */
    height: 0; /* Réduit la hauteur pour qu'il ne prenne pas de place */
    width: 0; /* Réduit la largeur */
    pointer-events: none; /* Empêche les interactions de la souris */
}

.zoomable-image {
    cursor: zoom-in;
    transition: transform 0.3s ease; /* Transition pour l'agrandissement */
}

/* Ajoute un léger effet de focus au clavier pour l'accessibilité */
.zoomable-image:focus-visible {
    outline: 3px solid #7000ff;
    border-radius: 4px;
}

.image-overlay {
    position: fixed; /* Fixé par rapport à la fenêtre */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fond semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Assure qu'il est au-dessus de tout */
    cursor: zoom-out; /* Indique qu'un clic réduira l'image */
    opacity: 0; /* Caché par défaut */
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.image-overlay.active {
    opacity: 1; /* Visible */
    transition-delay: 0s; /* Afficher sans délai */
    pointer-events: auto;
}

.image-overlay img {
    max-width: 90%; /* Taille maximale de l'image dans l'overlay */
    max-height: 90%; /* Ne pas déborder de l'écran */
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    transform: scale(0.9); /* Commence petit */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-overlay.active img {
    transform: scale(1); /* S'agrandit à la taille normale dans l'overlay */
}

details summary {
    list-style: none;
}

/* Masque la flèche spécifique aux anciennes versions de Safari */
details summary::-webkit-details-marker {
    display: none;
}

details summary {
    display: flex;
    justify-content: space-between; /* Aligne le texte à gauche et le "+" tout à droite */
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 2px 0; /* Ajoute un peu de confort pour le clic mobile */
    user-select: none; /* Évite de sélectionner le texte par erreur en cliquant vite */
}

details summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--accent-gold); /* Ton doré cyberpunk */
    transition: transform 0.3s ease, color 0.3s ease;
    margin-left: 15px; /* Évite que le "+" colle au texte sur petit mobile */
    flex-shrink: 0;   /* Empêche le "+" de s'écraser si le texte prend de la place */
}

details[open] summary::after {
    content: "−"; /* Remplace le "+" par un vrai signe moins */
    color: #7000ff; /* Devient violet quand c'est ouvert */
    transform: rotate(180deg); /* Légère rotation pour rendre l'effet dynamique */
}

details p {
    margin-top: 10px;
    padding-left: 5px;
    border-left: 2px solid rgba(112, 0, 255, 0.3); /* Ligne de rappel violette */
}

.text-information {
    text-align: left; /* Alignement du texte à gauche pour la lisibilité */
}

.image-information {
    max-width: 100%; /* L'image ne déborde pas */
    text-align: center; /* Centre l'image quand elle est en dessous */
    margin-bottom: 20px; /* Espace sous l'image quand elle est au-dessus du texte */
    margin-left: auto; /* Centre l'image quand elle est seule sur sa ligne */
    margin-right: auto;
    display: block;
    max-width: 350px;
}

.image-information img {
    max-width: 100%; /* L'image s'adapte à la largeur de son conteneur */
    height: auto; /* Maintient le ratio d'aspect */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Légère ombre sur l'image */
}

.robot-contact-img {
    filter: drop-shadow(5px 5px 10px rgba(26, 9, 51, 0.6));
}

.robot-contact-img:hover {
    transform: translateY(-5px); /* Le robot se soulève légèrement */
    filter: drop-shadow(0 0 25px rgba(229, 153, 66, 0.6)); /* Le halo doré s'illumine */
}

/*
    -------------------------------------------
          Styles pour l'animation au Scroll
    -------------------------------------------
*/

/* 1. État Initial : Caché et Décalé */
.scroll-reveal {
    opacity: 0;
    /* Décalage léger vers le bas. Vous pouvez choisir 'translateX(-30px)'
       pour un effet de balayage latéral si vous préférez. */
    transform: translateY(100px); 
    
    /* Définir une transition pour que l'apparition soit douce */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. État Final (Visible) : La classe que le JS va ajouter */
.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0); /* Retour à la position normale */
}

/*
    -------------------------------------------
        Media Queries pour les écrans moyens
    -------------------------------------------
*/
@media (min-width: 1000px) {
    
    header {
        /* On redéfinit la grille pour l'ordinateur */
        grid-template-columns: max-content 1fr max-content;
        grid-template-areas: 
            "area-logo  area-menu  area-btn"   /* Le bouton bouge à droite, le menu s'intercale */
            "area-hero  area-hero  area-hero"  
            "area-robot area-robot area-robot";
        /* On réduit les paddings latéraux de la grille */
        padding: 20px 20px;
        /* On resserre l'espace entre les éléments de la grille (logo, menu, bouton) */
        gap: 0 15px; 
    }

    header::before, footer::before {
        mask-size: 1500px;
        -webkit-mask-size: 1500px;
    }

    .nav-bg-overlay {
        /* On adapte les marges négatives au padding plus large de l'ordinateur */
        margin-top: -20px;
        margin-left: -40px;
        margin-right: -40px;
        padding-top: 20px;
    }

    .logo {
        /* On s'assure que le logo ne prend pas trop de place */
        width: 130px; 
    }

    .menu-toggle {
        display: none !important; 
    }

    .menu {
        position: static;        /* Il reprend sa place naturelle dans le flux du header */
        display: flex;
        flex-direction: row;     /* Alignement horizontal des liens */
        align-self: center;
        background-color: transparent; /* Plus besoin de fond noir opaque */
        height: auto;
        width: auto;
        padding: 0;
        
        /* On annule toutes les propriétés de masquage du mobile */
        transform: translateX(0) !important; 
        opacity: 1 !important;
        visibility: visible !important;

        justify-self: end; /* Pousse le menu vers la droite de sa colonne (1fr) */
        gap: 0 5px; /* Espace entre les éléments du menu */
        margin: 0;
        margin-right: 10px;

        list-style: none;
    }

    .menu a {
        /* On réduit légèrement la taille de la police pour le menu */
        font-size: 0.9rem;
    }

    .menu li {
        margin: 0 15px; /* Espace horizontal entre chaque onglet */
    }

    .btn {
        /* On réduit la taille du bouton et de son texte */
        padding: 10px 20px;
        font-size: 0.8rem;
        /* On s'assure que le bouton reste complet et visible */
        width: auto;
        justify-self: end;
    }

    .services-section::before,
    .services-section::after,
    .tarifs-section::before,
    .tarifs-section::after,
    .informations-section::before,
    .informations-section::after {
        width: 400px; /* On affiche une zone plus grande sur grand écran */
        height: 400px;
        -webkit-mask-size: 1600px; /* On ajuste le zoom du circuit */
        mask-size: 1600px;
    }

    .icon-wrapper {
        width: 70px;
        height: 70px;
    }

    .information {
        display: block; 
    }

    .image-information {
        float: right; /* Fait flotter l'image à droite */
        margin-left: 30px; /* Espacement entre l'image et le texte à sa gauche */
        margin-bottom: 15px; /* Petit espacement en dessous de l'image */
        margin-right: 0;
        /*display: initial; /* ou inline-block, pour revenir au comportement normal du flottant */
    }

    .contact-layout {
        flex-direction: row; /* Aligne le formulaire et les infos côte à côte */
        align-items: flex-start; /* Aligne le haut des deux blocs */
        gap: 60px; /* Plus d'espace entre les deux colonnes */
    }

    .formulaire-contact {
        flex: 1.2; 
        margin: 0; /* On annule le margin: 0 auto du mobile */
    }

    .contact-infos {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Aligne le robot et le texte à gauche */
        text-align: left; /* Texte aligné à gauche pour faire pro */
        align-items: flex-end;
    }
}

/*
    -------------------------------------------
        Media Queries pour les grands écrans
    -------------------------------------------
*/
@media (min-width: 1300px) {

    header {
        padding: 20px 40px;
        gap: 0px 20px;
    }

    /* On redonne sa taille normale au bouton sur grand écran */
    .btn {
        font-size: 1rem;
        padding: 12px 30px;
    }

    .menu {
        gap: 15px; /* Espace entre les éléments du menu */
        margin: 0;
        margin-right: 20px;
    }

    .menu a {
        font-size: 1rem;
    }
}