/* =====================================================
   BRIOUDE INFORMATIQUE
   STYLE.CSS
   Version 2.0
   ===================================================== */

/**********************
    VARIABLES
**********************/

:root{

    --primary:#1EA9BF;
    --primary-dark:#14889a;

    --secondary:#5f5a54;

    --light:#f5f7fa;

    --white:#ffffff;

    --dark:#2d3436;

    --shadow:0 10px 30px rgba(0,0,0,.12);

    --radius:12px;

    --transition:.35s ease;

}

/**********************
    RESET
**********************/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
"Segoe UI",
Arial,
Helvetica,
sans-serif;

background:var(--light);

color:var(--secondary);

line-height:1.7;

overflow-x:hidden;

}

/**********************
TYPOGRAPHIE
**********************/

h1,h2,h3,h4{

font-weight:700;

color:var(--dark);

}

h1{

font-size:3.6rem;

}

h2{

font-size:2.4rem;

margin-bottom:25px;

}

h3{

font-size:1.4rem;

}

p{

font-size:18px;

margin-bottom:20px;

}

a{

text-decoration:none;

color:inherit;

}

/**********************
CONTAINER
**********************/

.container{

width:min(1200px,92%);

margin:auto;

}

/**********************
HEADER
**********************/

header{

position:fixed;

top:0;

left:0;

width:100%;

background:rgba(255,255,255,.96);

backdrop-filter:blur(12px);

box-shadow:0 2px 15px rgba(0,0,0,.08);

z-index:9999;

transition:var(--transition);

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:0;

min-height:150px;

}

/**********************
LOGO
**********************/

.logo{

display:flex;

align-items:center;

gap:18px;

position:relative;

left:-240px;

top:-38px;

}

.top-left{

display:flex;

align-items:center;

gap:24px;

}

.logo img{

height:150px;

transition:var(--transition);

}

.logo h2{

margin:0;

font-size:28px;

color:var(--primary);

}

/**********************
MENU
**********************/

nav ul{

display:flex;

list-style:none;

gap:30px;

align-items:center;

}

nav a{

font-weight:600;

transition:.25s;

position:relative;

}

nav a:hover{

color:var(--primary);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--primary);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

/**********************
LANGUES
**********************/

.languages{

display:flex;

gap:12px;

align-items:center;

font-weight:600;

}

.languages a{

padding:8px 14px;

border-radius:30px;

background:#eef7f8;

transition:.3s;

}

.languages a:hover{

background:var(--primary);

color:white;

}
/***************************************************
                    HERO
****************************************************/

.hero{

height:100vh;

min-height:750px;

background:
linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),
url("../images/facade.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:120px 20px 80px;

color:white;

position:relative;

overflow:hidden;

}

/***************************************************
CONTENU HERO
****************************************************/

.hero-content{

max-width:900px;

animation:fadeUp 1s ease;

}

.hero-content h1{

color:white;

font-size:68px;

letter-spacing:2px;

margin-bottom:15px;

text-shadow:0 4px 15px rgba(0,0,0,.45);

}

.hero-content h2{

color:white;

font-size:34px;

font-weight:300;

margin-bottom:30px;

}

.hero-content p{

font-size:22px;

max-width:760px;

margin:auto;

margin-bottom:45px;

color:#f4f4f4;

}

/***************************************************
BOUTONS
****************************************************/

.hero-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-top:25px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:18px 34px;

border-radius:50px;

font-weight:bold;

font-size:18px;

transition:all .35s;

box-shadow:var(--shadow);

cursor:pointer;

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

.btn-secondary{

background:white;

color:var(--dark);

}

.btn-secondary:hover{

background:#ececec;

transform:translateY(-4px);

}

.btn-outline{

border:2px solid white;

color:white;

background:transparent;

}

.btn-outline:hover{

background:white;

color:var(--dark);

transform:translateY(-4px);

}

/***************************************************
SCROLL INDICATOR
****************************************************/

.scroll-down{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

font-size:32px;

color:white;

animation:bounce 2s infinite;

opacity:.85;

}

/***************************************************
ANIMATIONS
****************************************************/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes bounce{

0%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,10px);

}

100%{

transform:translate(-50%,0);

}

}
/***************************************************
                    SECTIONS
****************************************************/

section{

padding:100px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

color:var(--dark);

margin-bottom:15px;

}

.section-title p{

font-size:20px;

color:#777;

max-width:700px;

margin:auto;

}

/***************************************************
                    SERVICES
****************************************************/

.services{

background:white;

}

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:40px;

}

/***************************************************
                    CARTE
****************************************************/

.service-card{

background:white;

padding:40px 30px;

border-radius:18px;

box-shadow:0 8px 30px rgba(0,0,0,.08);

transition:.35s;

text-align:center;

border-top:5px solid transparent;

}

.service-card:hover{

transform:translateY(-10px);

border-top:5px solid var(--primary);

box-shadow:0 15px 40px rgba(0,0,0,.15);

}

/***************************************************
                    ICONE
****************************************************/

.service-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

background:rgba(30,169,191,.12);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

color:var(--primary);

transition:.3s;

}

.service-card:hover .service-icon{

background:var(--primary);

color:white;

transform:rotate(8deg) scale(1.08);

}

/***************************************************
                    TITRE
****************************************************/

.service-card h3{

margin-bottom:15px;

font-size:24px;

color:var(--dark);

}

/***************************************************
                    TEXTE
****************************************************/

.service-card p{

font-size:17px;

color:#666;

margin:0;

}

/***************************************************
                    CHIFFRES
****************************************************/

.stats{

padding:90px 0;

background:linear-gradient(135deg,var(--primary),#27c6df);

color:white;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:40px;

text-align:center;

}

.stat{

padding:20px;

}

.stat-number{

font-size:60px;

font-weight:bold;

margin-bottom:10px;

}

.stat-text{

font-size:20px;

}

/***************************************************
                ANIMATION
****************************************************/

.service-card{

opacity:0;

transform:translateY(40px);

}

.service-card.visible{

opacity:1;

transform:translateY(0);

transition:.6s ease;

}
/***************************************************
                NOTRE MAGASIN
****************************************************/

.about{

background:#ffffff;

}

.about-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(450px,1fr));

gap:60px;

align-items:center;

}

.about img{

width:100%;

border-radius:18px;

box-shadow:var(--shadow);

transition:.4s;

}

.about img:hover{

transform:scale(1.02);

}

.about-text h2{

margin-bottom:20px;

}

.about-text p{

font-size:18px;

color:#666;

margin-bottom:20px;

}

.about-text ul{

list-style:none;

margin-top:25px;

}

.about-text li{

padding:12px 0;

font-size:18px;

}

.about-text li i{

color:var(--primary);

margin-right:10px;

}

/***************************************************
                PHOTOS
****************************************************/

.photos{

background:var(--light);

}

.photo-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

margin-top:50px;

}

.photo{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.photo:hover{

transform:translateY(-8px);

}

.photo img{

width:100%;

height:280px;

object-fit:cover;

display:block;

}

.photo-caption{

padding:25px;

text-align:center;

font-size:18px;

font-weight:600;

}

/***************************************************
                MARQUES
****************************************************/

.brands{

background:white;

}

.brands-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

gap:35px;

align-items:center;

text-align:center;

margin-top:50px;

}

.brand{

padding:25px;

border-radius:15px;

background:#fafafa;

font-weight:bold;

font-size:20px;

transition:.3s;

border:1px solid #ececec;

}

.brand:hover{

background:var(--primary);

color:white;

transform:translateY(-6px);

}

/***************************************************
                AVIS GOOGLE
****************************************************/

.reviews{

background:linear-gradient(135deg,#f7fbfc,#eef8fa);

}

.review-box{

max-width:900px;

margin:auto;

background:white;

padding:50px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

}

.stars{

font-size:34px;

color:#FFD54F;

margin-bottom:20px;

}

.review-note{

font-size:48px;

font-weight:bold;

color:var(--primary);

margin-bottom:10px;

}

.review-text{

font-size:20px;

color:#666;

margin-bottom:35px;

}

.review-button{

display:inline-block;

padding:16px 34px;

background:var(--primary);

color:white;

border-radius:40px;

font-weight:bold;

transition:.3s;

}

.review-button:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

/***************************************************
                CONTACT RAPIDE
****************************************************/

.quick-contact{

background:var(--primary);

color:white;

padding:80px 0;

text-align:center;

}

.quick-contact h2{

color:white;

margin-bottom:25px;

}

.quick-contact p{

font-size:20px;

margin-bottom:35px;

}

.quick-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.quick-buttons .btn{

min-width:220px;

}
/***************************************************
                FORMULAIRE CONTACT
****************************************************/

.contact{

background:#ffffff;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

.contact-card{

background:#f8f9fb;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.contact-card h3{

margin-bottom:25px;

color:var(--primary);

}

.contact-card p{

margin-bottom:18px;

}

.contact-card iframe{

width:100%;

height:350px;

border:none;

border-radius:15px;

margin-top:20px;

}

.contact-form{

background:white;

padding:40px;

border-radius:18px;

box-shadow:var(--shadow);

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:16px;

margin-bottom:20px;

border:1px solid #d8d8d8;

border-radius:12px;

font-size:16px;

transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 10px rgba(30,169,191,.15);

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

.contact-form button{

width:100%;

padding:18px;

background:var(--primary);

color:white;

font-size:18px;

font-weight:bold;

border:none;

border-radius:50px;

cursor:pointer;

transition:.3s;

}

.contact-form button:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}

/***************************************************
                FOOTER
****************************************************/

footer{

background:#1e2a32;

color:#d7dde0;

padding:60px 0 25px;

margin-top:80px;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.footer-title{

font-size:22px;

margin-bottom:20px;

color:white;

}

.footer-links{

list-style:none;

}

.footer-links li{

margin-bottom:12px;

}

.footer-links a{

transition:.3s;

}

.footer-links a:hover{

color:var(--primary);

}

.footer-bottom{

margin-top:45px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.15);

text-align:center;

font-size:15px;

}

/***************************************************
            BOUTON RETOUR HAUT
****************************************************/

#topButton{

position:fixed;

bottom:25px;

right:25px;

width:55px;

height:55px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

cursor:pointer;

box-shadow:var(--shadow);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

#topButton.show{

opacity:1;

visibility:visible;

}

#topButton:hover{

background:var(--primary-dark);

transform:translateY(-5px);

}

/***************************************************
                RESPONSIVE
****************************************************/

@media(max-width:992px){

.hero h1{

font-size:52px;

}

.hero h2{

font-size:28px;

}

.contact-grid{

grid-template-columns:1fr;

}

.about-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.logo img{

height:60px;

}

nav{

display:none;

}

.hero{

padding-top:140px;

}

.hero h1{

font-size:38px;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

.section-title h2{

font-size:32px;

}

.stat-number{

font-size:44px;

}

}

@media(max-width:480px){

.hero{

min-height:650px;

}

.hero h1{

font-size:30px;

}

.hero h2{

font-size:20px;

}

.hero p{

font-size:17px;

}

.contact-card,

.contact-form{

padding:25px;

}

}
/***************************************************
                MENU MOBILE
****************************************************/

.menu-toggle{

display:none;

font-size:32px;

cursor:pointer;

color:var(--primary);

}

@media(max-width:768px){

.menu-toggle{

display:block;

}

nav{

position:absolute;

top:100%;

left:0;

width:100%;

background:white;

box-shadow:0 10px 20px rgba(0,0,0,.10);

display:none;

}

nav.active{

display:block;

}

nav ul{

flex-direction:column;

padding:20px;

gap:20px;

}

}

/***************************************************
            ANIMATION AU DÉFILEMENT
****************************************************/

.reveal{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/***************************************************
            BANDEAU INFORMATION
****************************************************/

.info-banner{

background:linear-gradient(90deg,var(--primary),#27c6df);

color:white;

padding:18px;

text-align:center;

font-size:18px;

font-weight:600;

}

.info-banner strong{

font-size:20px;

}

/***************************************************
            SÉPARATEUR
****************************************************/

.separator{

width:100px;

height:5px;

background:var(--primary);

margin:20px auto 40px;

border-radius:10px;

}

/***************************************************
            SÉLECTION TEXTE
****************************************************/

::selection{

background:var(--primary);

color:white;

}

/***************************************************
            BARRE DE DÉFILEMENT
****************************************************/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}

/***************************************************
            PETITES ANIMATIONS
****************************************************/

.fade-in{

animation:fadeIn 1s ease;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

.zoom{

animation:zoom 1s ease;

}

@keyframes zoom{

from{

transform:scale(.95);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}
/* =====================================================
   CORRECTION TELECHARGEMENTS - v0.9.4
   La section doit rester visible meme si l'animation JS
   n'est pas executee ou si un cache conserve une ancienne
   version du script.
   ===================================================== */
#telechargements {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

#telechargements .container,
#telechargements .section-title,
#telechargements .services-grid,
#telechargements .service-card {
    visibility: visible !important;
}

#telechargements .service-card {
    opacity: 1 !important;
    transform: none !important;
}

#telechargements .service-card h3,
#telechargements .service-card p,
#telechargements .service-card .service-icon,
#telechargements .service-card .btn {
    visibility: visible !important;
    opacity: 1 !important;
}

/* =====================================================
   CORRECTION AFFICHAGE CARTES - v0.9.5
   Les cartes ne doivent jamais rester invisibles si
   l'animation IntersectionObserver n'est pas déclenchée.
   ===================================================== */
.service-card,
.service-card.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

#telechargements .service-card,
#services .service-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}


/* =====================================================
   LOGOS DES MARQUES ET DES OUTILS DE TELECHARGEMENT
   v0.9.7
===================================================== */
.logo-brands .brand{
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
}
.logo-brands .brand img{
    width:120px;
    height:65px;
    object-fit:contain;
    display:block;
}
.logo-brands .brand span{
    font-size:16px;
    font-weight:600;
}
.download-logo{
    width:150px;
    height:90px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.download-logo img{
    width:145px;
    height:80px;
    object-fit:contain;
}