/* ==========================================================================
   CHARTE GRAPHIQUE INSPIRÉE DE IMAGE_ACCUEIL.JPG
   ========================================================================== */

/* IMPORTATION DE LA POLICE DE TITRE MODERNISÉE */
/* montserrat-700 - latin */
/* montserrat-regular - latin */
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ==========================================================================
   CORRECTION DE L'AFFICHAGE DE LA BANNIÈRE (PARALLAXE)
   ========================================================================== */
#gtco-header {
    background-color: transparent !important;
}

#gtco-header .overlay {
    background: rgba(11, 15, 25, 0.5) !important; /* Ajoute un voile sombre ajustable pour que le menu reste lisible */
}

/* 1. FOND GÉNÉRAL ET COULEUR DE TEXTE DE BASE */
body {
    background-color: #0b0f19 !important; /* Bleu nuit très sombre issu de l'image */
    color: #f4f6f9 !important; /* Blanc cassé pour une lecture confortable sur fond noir */
}

#page {
    background-color: #0b0f19 !important;
}

/* Modification des sections pour éviter les fonds blancs */
.gtco-section, #gtco-features {
    background-color: #0b0f19 !important;
    color: #f4f6f9 !important;
}

/* 2. RE-STYLISATION DES TITRES ET TYPOGRAPHIES (Sans dépassement de taille) */
h1, h2, h3, h4, h5, h6, .cursive-font {
    font-family: 'Montserrat', Arial, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    line-height: 1.3 !important;
}

/* Alignement sur le look oblique/italique dynamique de la bannière */
.gtco-heading h2, .fh5co-text h2, #gtco-features h2 {
    font-style: italic !important;
    color: #ffffff !important;
}

/* Remplacement de la couleur "jaune/orange" d'origine par le Bleu Cyan Électrique */
.primary-color, 
#gtco-features .feature-center .icon i,
footer h3 {
    color: #00d2ff !important;
}

/* Ajustement spécifique pour que les paragraphes restent lisibles sur le sombre */
.gtco-section p, #gtco-features p, p {
    color: #ccd6f6 !important; /* Gris-bleu clair très qualitatif */
}

/* 3. BARRE DE NAVIGATION IMMERSIVE */
.gtco-nav {
    background: rgba(11, 15, 25, 0.9) !important;
    backdrop-filter: blur(10px); /* Effet de flou moderne derrière le menu */
    border-bottom: 1px solid rgba(0, 210, 255, 0.15);
}

.gtco-nav ul li a {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

.gtco-nav ul li a:hover {
    color: #00d2ff !important; /* Survol cyan comme l'éclairage de l'image */
}

/* Bouton Devis (CTA) */
.gtco-nav ul li.btn-cta a span {
    background: #00d2ff !important;
    color: #0b0f19 !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 4px !important; /* Coins légèrement carrés et tranchants */
    transition: all 0.3s ease;
}

.gtco-nav ul li.btn-cta a span:hover {
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6) !important; /* Effet néon lumineux au survol */
    transform: translateY(-1px);
}

/* 4. BLOCS DE PRESTATIONS (fh5co-card-item) */
.fh5co-card-item {
    background: #111827 !important; /* Fond de carte légèrement plus clair que le body */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px !important;
    overflow: hidden;
    transition: all 0.3s ease !important;
}

.fh5co-card-item:hover {
    border-color: #00d2ff !important; /* La carte s'illumine en bleu au survol */
    box-shadow: 0 10px 25px rgba(0, 210, 255, 0.1) !important;
    transform: translateY(-5px);
}

.fh5co-text .price {
    color: #00d2ff !important;
    font-weight: 700;
}

/* 5. ÉLÉMENTS GRAPHIQUES "TECH" (Halos bleus en arrière-plan) */
.gtco-section {
    position: relative;
    overflow: hidden;
}

/* Ajout d'une touche de lumière diffuse subtile en arrière-plan (rappelant l'ambiance lumineuse de la bannière) */
.gtco-section::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,210,255,0.06) 0%, rgba(0,0,0,0) 70%);
    top: 20%;
    left: -10%;
    pointer-events: none;
}

/* 6. PIED DE PAGE (FOOTER) ET SECTIONS DE TRANSITION À OVERLAY */
/*.gtco-cover .overlay, footer .overlay {*/
/*    background: rgba(11, 15, 25, 0.85) !important; /* Assombrit les images de fond pour s'accorder au reste */
/*}*/

footer .gtco-quick-contact li, footer .copyright p, footer a {
    color: #ccd6f6 !important;
}

footer a:hover {
    color: #00d2ff !important;
}

/* ==========================================================
   AJUSTEMENTS RESPONSIVE POUR TABLETTES (PORTRAIT & PAYSAGE) 
   ========================================================== */
@media screen and (max-width: 1199px) {
    /* Force l'affichage du bouton de menu hamburger sur iPad horizontal et vertical */
    .gtco-nav-toggle {
        display: block !important;
        right: 15px !important;
        top: 18px !important;
    }
    
    #gtco-logo {
        text-align: left;
        padding-left: 10px;
    }
    
    /* Harmonisation de la flexbox pour éviter les bugs d'affichage des cartes */
    .gtco-section .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

/* Spécifique au mode Paysage de l'iPad (Entre 992px et 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .gtco-heading h2 {
        font-size: 30px !important;
    }
    
    /* Sur grand écran de tablette, on peut afficher 3 colonnes proprement */
    .gtco-section .row .col-lg-4.col-md-4.col-sm-6 {
        width: 33.333% !important;
    }
}

/* Spécifique au mode Portrait de l'iPad (Entre 768px et 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .gtco-heading h2 {
        font-size: 28px !important;
    }
    
    /* En vertical, on passe à 2 colonnes pour éviter que ce soit trop serré */
    .gtco-section .row .col-lg-4.col-md-4.col-sm-6 {
        width: 50% !important;
    }
}

/* Correctif pour les smartphones pliables et petits écrans tactiles */
@media screen and (max-width: 767px) {
    .gtco-nav-toggle {
        top: 15px !important;
        right: 15px !important;
    }
    
    .gtco-cover.gtco-cover-sm h2 {
        font-size: 32px !important;
    }
}