:root{
	
 --orange:#ff7a00;
 --violet:#9b5cff;
 --blue:#4da3ff;
 --dark:#0b0b0b;
	
}

/* =========================
         RESET
========================= */

html,body{

margin:0;
padding:0;
overflow-x:hidden;

font-family:

"Segoe UI",
Roboto,
Arial,
sans-serif;

}

header{
	
position:relative;
	
}


/* =========================
         LOADER
========================= */

html.is-loading body{
overflow:hidden;
}

html.is-loading #app{
	
opacity:0;
pointer-events:none;
	
}

#app{
	
opacity:1;
transition:opacity .3s;
	
position:relative;
z-index:0;
	
}

#loader{
	
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#f5f6f8;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
	
}

.loader-wrap{
	
display:flex;
flex-direction:column;
align-items:center;
	
}

.loader-logo{
	
width:140px;
margin-bottom:20px;
	
}

.loader-spinner{
	
width:32px;
height:32px;
border-radius:50%;
border:4px solid rgba(0,0,0,0.1);
border-top-color:var(--orange);
animation:spin 1s linear infinite;
}

@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
	
}


/* =========================
        SOCIAL ICONS
========================= */

.header-socials{

  position:absolute;
  right:60px;
  margin-top:150px;

  display:flex;
  flex-direction:column;
  gap:22px;

  transform:translateY(-50%);
  z-index:5;

}

.home .header-socials{
	
top:110%;
	
}

body:not(.home) .header-socials{
	
  top:0;
  margin-top:28vh;
  padding-top:0;
	
}

.header-socials a{
	
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:none;
  backdrop-filter:blur(6px);
  transition:all 0.3s ease;
  opacity:.5;

}


/* Hover = style bouton boutique */

.header-socials a:hover{
	
  background:linear-gradient(135deg,var(--orange),var(--violet),var(--blue));
  box-shadow:0 0 20px rgba(155,92,255,0.7);
  transform:translateY(0) translateX(-6px) scale(1.08);
  opacity:1;
	
}


.header-socials a:hover .social-icon{
	
  fill:white;
  transform:scale(1.05);
	
}

/* Repos = gradient comme le H1 */

.social-icon{
	
  fill:url(#socialGradient);
  width:20px;
  height:20px;
  transition:all 0.3s ease;
  display:block;
	
}

.social-icon path{
	
  transition:fill .3s ease;
  fill:inherit;
	
}


@keyframes floatSocial{
	
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0px); }
	
}


/* =========================
           MENU NAV
========================= */

/* MENU (menu + boutique en colonne) */

.site-header .nav{

position:absolute;

top:120px;
left:50%;
transform:translateX(-50%);

width:100%;

display:flex;
flex-direction:column;
align-items:center;

gap:6px;

z-index:50;

}

/* Le menu (ligne) */

.site-header .nav-menu{
	
  display:flex;
  gap:26px;
  justify-content:center;
	
}

/* Le bouton Boutique sous le menu */

.site-header .nav-right{
	
  position:static;
	
}

.nav a{

color:#fff;

text-decoration:none;

font-weight:600;

letter-spacing:.3px;

font-size:16px;

padding:10px 6px;

transition:.2s;

}

.nav a:hover{
color:var(--orange);
}

.nav .boutique-btn:hover{
color:white;
}

.nav a.active{
color:var(--violet);
}

.nav a.active::after{

content:"";

display:block;

height:3px;

background:linear-gradient(90deg,var(--orange),var(--violet));

margin-top:6px;

border-radius:2px;

}

/* BOUTON BOUTIQUE */


.boutique-btn{

border:1px solid rgba(255,255,255,0.85);
color:#fff;

padding:8px 16px;

border-radius:12px;

text-decoration:none;

font-weight:700;

transition:.2s;
	
display:inline-flex;
align-items:center;
	
}

.boutique-btn:hover{

background:linear-gradient(90deg,var(--orange),var(--violet));

border-color:transparent;

color:white;

}


/* =========================
      HEADER ACCUEIL
========================= */

.site-header{

  width:100%;
  z-index:10;
	
  top:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;

  color:white;

}


.site-header.is-home{

  position:absolute; 

  top:0;

  left:0;

  padding-bottom:60px;

}

/* HEADER PAGES INTERNES STABLE */

.site-header.is-page{
	
  position:absolute;
  top:0;
  left:0;
  width:100%;
	
}

.site-header.is-page + .hero-full{
	
  min-height:55vh;
	
}

.site-header.is-page .header-socials{
	
  top:0;
  margin-top:40vh;
	
}


/* =========================
         HERO
========================= */


.hero-full{

  min-height:60vh;

  display:flex;

  align-items:flex-start;

  justify-content:center;

  text-align:center;

  color:white;

  background:

  linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.75)),

  url("../img/fibre.jpg");

  background-size:cover;

  background-position:center;
	
  position:relative;

}

.hero-full::after{
	
content:"";
position:absolute;
inset:0;

background:
linear-gradient(
120deg,
transparent 40%,
rgba(77,163,255,0.15) 50%,
transparent 60%
	
);

animation:dataFlow 8s linear infinite;

pointer-events:none;
}


body:not(.home) .hero-full{

  min-height:65vh;
  align-items:flex-start;

}

.home .hero-full{

  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

}


.hero-overlay{
	
  position:absolute;
  inset:0;
  z-index:1;
	
}


.hero-text{
	
  max-width:900px;
  margin:auto;
  position:relative;
  z-index:2;
	
}

.home .hero-text{
	
padding-top:200px;
	
}

body:not(.home) .hero-text{
	
padding-top:180px;
	
}

.hero-text h1{

  font-size:64px;

  margin-bottom:15px;

  background:linear-gradient(90deg,var(--orange),var(--violet),var(--blue));

  -webkit-background-clip:text;
 
  -webkit-text-fill-color:transparent;

}


.hero-text h2{

  font-size:26px;

  margin-bottom:15px;

}

.hero-text p{

  font-size:18px;

  margin-bottom:25px;


}


body:not(.home) .hero-text{
	
padding-bottom:50px;
	
}


/* Boutons dans hero-full (état final après upload PHP) */
.hero-buttons{

  display:flex;
  gap:20px;

  justify-content:center;
  flex-wrap:wrap;

  z-index:3;
  pointer-events:auto;
  margin-top:30px;
  padding-bottom:35px;

}

/* Boutons dans main (état temporaire si PHP pas encore uploadé) */
main .hero-buttons{

  position:relative;
  bottom:70px;
  left:50%;
  transform:translateX(-50%);

}


.hero-buttons a{
	
will-change:transform;
	
}

.hero-page {

position:absolute;

top:240px;

left:50%;

transform:translateX(-50%);

text-align:center;

color:white;

width:100%;

}


.hero-page h1{
	
  font-size:42px;
  margin-bottom:10px;

}

.hero-page p{
	
  font-size:20px;
  opacity:.9;
	
}


/* LOGO */

.hero-top{
	
margin-top:10px;
margin-bottom:0;
	
}

.hero-logo{
	
height:90px;
	
}

/* ANIMATIONS HERO */

@keyframes dataFlow{
	
0%{transform:translateX(-100%);}
100%{transform:translateX(100%);}
	
}

/* =========================
         BOUTONS
========================= */

.btn-main{
	
  background:linear-gradient(90deg,var(--orange),var(--violet));
  padding:14px 30px;
  border-radius:12px;
  text-decoration:none;
  color:white;
	
  font-weight:bold;
  transition:all 0.3s ease;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  position:relative;
  z-index:4;
	
}

.btn-main:hover{
	
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,0.25);
	
}


.btn-outline{
	
  border:2px solid white;
  padding:12px 30px;
  border-radius:12px;
  text-decoration:none;
	
  color:white;
  font-weight:bold;
  transition:all 0.25s ease;
  z-index:4;
  position:relative;
	
}

.btn-outline:hover{
	
  background:linear-gradient(90deg,var(--orange),var(--violet));
  border-color:transparent;
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,0.25);
	
}


/* =========================
        SERVICES
========================= */

.services-home{

text-align:center;

margin-top:80px;

max-width: 1100px;
margin: 0 auto 3rem;
padding: 0 1.5rem;

}

.services-grid{

max-width:900px;

margin:auto;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}


.service-card{

background:white;
padding:25px;
border-radius:10px;

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

transition:all .35s cubic-bezier(.22,.61,.36,1);

}


.service-card:hover{

transform:translateY(-6px) scale(1.02);

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

}


.service-card:nth-child(4){
	
grid-column:2;
	
}


/* =========================
      REFERENCE SLIDER
========================= */

/* REFERENCES */

.references{

text-align:center;

margin-top:120px;

padding-top:40px;

padding-bottom:100px;

}

.references h2{

font-size:28px;

margin-bottom:50px;

font-weight:600;

}

.logo-track{

display:flex;

gap:70px;

animation:scrollLogos 60s linear infinite;

}

.logo-slider{

overflow:hidden;

max-width:1100px;

margin:auto;

}


.logo-track{

display:flex;

gap:70px;

align-items:center;

width:fit-content;

animation:scrollLogos 50s linear infinite;

will-change:transform;

}


.logo-track img{

height:48px;

object-fit:contain;

opacity:.65;

filter:grayscale(100%) brightness(1.05);

transition:all .35s ease;

background:none;

border:none;

}

.logo-track img:hover{

opacity:1;

filter:none;

transform:scale(1.12);

}


.logo-slider:hover .logo-track{

animation-play-state:paused;

}


@keyframes scrollLogos{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}


/* =========================
     MOYENS DE PAIEMENT
========================= */

.paiement{

text-align:center;
margin-top:60px;
padding-bottom:80px;

}

.paiement h2{

font-size:28px;
margin-bottom:40px;
font-weight:600;

}

.paiement-logos{

display:flex;
justify-content:center;
align-items:center;
gap:40px;
flex-wrap:wrap;

}

.paiement-logos img{

height:50px;
object-fit:contain;
opacity:.75;
transition:all .3s ease;

}

.paiement-logos img:hover{

opacity:1;
transform:scale(1.08);

}


/* =========================
         FOOTER PROPRE
========================= */

.site-footer{

  background:#0b0b0b;

  background:linear-gradient(
  180deg,
  #0b0b0b 0%,
  #060606 100%);

  color:white;

  margin-top:0;

}

footer{
	
margin-top:0;
	
}

.footer-gradient{

height:4px;

background:linear-gradient(
90deg,
var(--orange),
var(--violet),
var(--blue)
);

box-shadow:0 0 20px rgba(155,92,255,.25);

}


.footer-logo{

width:70px;

margin-bottom:15px;

}


.footer-container{

max-width:1100px;

margin:auto;

padding:50px 20px;

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:40px;
	
transition:.25s ease;

}


.footer-container a{

display:block;

color:white;

text-decoration:none;

margin-bottom:8px;

opacity:.8;

}


.footer-container a:hover{

color:var(--orange);
	
transform:translateX(3px);

}



.footer-bottom{

text-align:center;

padding:20px;

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

opacity:.7;

}

.footer-menu a.active{
	
color:var(--orange);
	
}


.footer-menu a{

display:block;
color:white;
text-decoration:none;

margin-bottom:8px;

opacity:.8;

transition:all .25s ease;

}


.footer-menu a:hover{

color:var(--orange);

transform:translateX(4px);

}

.footer-group{

margin-top:20px;

display:flex;
flex-direction:column;
gap:6px;

}

.footer-group-label{

font-size:13px;
opacity:.6;

}

.footer-group-logo{

height:60px;
opacity:.8;

transition:all .25s ease;

}

.footer-group-logo:hover{

opacity:1;
transform:scale(1.05);

}


/* =========================
         PAGE CONTACT
========================= */

.contact-grid-top{
	
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-bottom:40px;
margin-top:80px;
	
}

.contact-grid-bottom{
	
display:flex;
justify-content:center;
gap:30px;
	
}

.contact-card{
	
background:#ffffff;
padding:30px;
border-radius:14px;
text-align:center;

box-shadow:
0 10px 30px rgba(0,0,0,0.05);

transition:all .3s ease;
	
transform-style:preserve-3d;

}

.contact-card:hover{

box-shadow:
0 20px 40px rgba(0,0,0,0.1),
0 0 0 1px rgba(155,92,255,0.15);
	
transform:
translateY(-6px)
rotateX(2deg)
rotateY(-2deg);

}

.contact-card:hover .contact-icon{

transform:scale(1.08);

box-shadow:
0 8px 25px rgba(155,92,255,0.35);

}

.contact-form-wrap{
	
max-width:900px;
margin:auto;
	
}

/* BOUTONS CONTACT */

.contact-btn{

display:block;
margin-top:10px;
padding:12px 18px;

background:linear-gradient(90deg,#ff7a00,#9b5cff,#4da3ff);

background-size:200% 200%;

color:white;
text-decoration:none;
border-radius:10px;

font-weight:600;

transition:all .35s ease;

box-shadow:
0 10px 25px rgba(155,92,255,0.25);

}

.contact-btn:hover{

transform:translateY(-3px);

background-position:100% 0;

box-shadow:
0 15px 35px rgba(155,92,255,0.35);

}

/* CONTACT SECTION */


.contact-section{
	
margin-top:60px;
	
background:
radial-gradient(circle at 20% 20%, rgba(155,92,255,0.08), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(77,163,255,0.08), transparent 40%),
#ffffff;
padding:80px 20px;
	
}

/* CONTACT ICON */


.contact-icon{

width:50px;
height:50px;

display:flex;
align-items:center;
justify-content:center;

margin:auto;
margin-bottom:15px;

border-radius:50%;

background:linear-gradient(
90deg,
#ff7a00,
#9b5cff,
#4da3ff
);

color:white;
font-size:20px;

box-shadow:
0 5px 15px rgba(155,92,255,0.25);

}

/* CONTACT FORM */


.contact-form{

width:100%;
max-width:600px;
margin:auto;

background:rgba(255,255,255,0.92);

backdrop-filter:blur(12px);

padding:45px;

border-radius:18px;

box-shadow:
0 25px 60px rgba(0,0,0,0.5),
0 0 40px rgba(155,92,255,0.25);

text-align:center;
	
animation:formFade .6s ease;

}


.contact-form-section{

display:flex;
align-items:center;
justify-content:center;

background:
linear-gradient(rgba(10,10,20,.45),rgba(10,10,20,.65)),
url("../img/fibre-contact.jpeg");

background-size:cover;
background-position:center;

padding:120px 20px;
	
margin-bottom:0;
margin-top:0;
padding-bottom:60px;
	
position:relative;
	
z-index: 1;

}

.contact-form-section + .site-footer{
	
margin-top:0;
margin-bottom:-1px;
	
}

.contact-form-section + .contact-map{
	
margin-top:0;
margin-bottom:-1px;
	
}

.contact-form input,
.contact-form textarea{

width:100%;

padding:14px 16px;

background:rgba(255,255,255,0.08);

border:1px solid rgba(255,255,255,0.2);

border-radius:8px;

color:#111;

transition:all .25s;

}


.contact-form input:focus,
.contact-form textarea:focus{

border-color:#9b5cff;

box-shadow:
0 0 12px rgba(155,92,255,0.4);

outline:none;

}

.contact-form-container{
	
position:relative;
	
}


/* FORMULAIRE TEXTE AU DESSUS */


.contact-title{

text-align:center;
font-size:36px;
color:white;

margin-bottom:12px;

text-shadow:
0 5px 25px rgba(0,0,0,0.6);

}

.contact-subtitle{

text-align:center;

max-width:600px;
margin:auto;

color:#d6d9ff;

font-size:18px;
line-height:1.6;

margin-bottom:35px;
margin-top:10px;
opacity:0.9;

}

.contact-form h2{

margin-bottom:25px;

font-size:26px;

}

/* CAPTCHA */


.captcha{
	
display:flex;
justify-content:center;
margin:22px 0 18px 0;
padding:14px;
	
border-radius:14px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(8px);
	
}

.frc-captcha{
	
transform:scale(0.85);
transform-origin:center;
	
}

.honeypot{
	
display:none;
	
}

/* CONTACT FORM BOUTONS */


.contact-form button{

margin-top:15px;

padding:14px 28px;

border:none;

border-radius:10px;

background:linear-gradient(90deg,#ff7a00,#9b5cff,#4da3ff);

color:white;

font-weight:600;

font-size:15px;

cursor:pointer;

transition:all .3s ease;

}

.contact-form button:hover{

transform:translateY(-3px);

box-shadow:
0 15px 35px rgba(155,92,255,0.35);

}

.contact-form button:active{

transform:scale(.97);

}

.contact-form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

margin-bottom:20px;

}

.contact-submit{

display:block;

margin:20px auto 0 auto;

padding:15px 35px;

border:none;

border-radius:10px;

background:linear-gradient(90deg,#ff7a00,#9b5cff,#4da3ff);

color:white;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.contact-submit:hover{

transform:translateY(-3px);

box-shadow:0 15px 40px rgba(155,92,255,0.4);

}


/* CONTACT FORM SUCCESS OR ERROR */


.contact-success{

background:#e8f8f0;

color:#1c7a50;

padding:18px;

border-radius:10px;

margin-bottom:25px;

text-align:center;

font-weight:500;

box-shadow:
0 5px 20px rgba(0,0,0,0.05);

}

.contact-error{

background:#fdecec;

color:#b42318;

padding:18px;

border-radius:10px;

margin-bottom:25px;

text-align:center;

}


/* CONTACT BG */


.contact-bg{

background-size:cover;
background-position:center;

padding:120px 20px;

position:relative;

}

.contact-bg::after{

content:"";

position:absolute;
inset:0;

background:
radial-gradient(circle at 30% 20%, rgba(255,122,0,0.25), transparent 40%),
radial-gradient(circle at 70% 60%, rgba(155,92,255,0.25), transparent 45%),
radial-gradient(circle at 50% 80%, rgba(77,163,255,0.20), transparent 50%);

pointer-events:none;

animation:fiberGlow 8s ease-in-out infinite alternate;

}

.contact-bg::before{

content:"";

position:absolute;
inset:0;

background:rgba(20,20,40,0.35);

}

/* CONTACT MAP */


.contact-map{

width:100%;
height:380px;

margin:70px 0;
margin-bottom:0;

position:relative;

}

.contact-map iframe{

width:100%;
height:100%;

border:0;

border-radius:16px;

box-shadow:
0 25px 60px rgba(0,0,0,0.15);

filter:saturate(1.1);
display:block;

}

.contact-form-section::after{
	
content:"";
position:absolute;
top:50%;
left:50%;
width:700px;
height:700px;

background:radial-gradient(
circle,
rgba(155,92,255,0.25),
rgba(77,163,255,0.2),
transparent 70%
);

transform:translate(-50%,-50%);
filter:blur(40px);

animation:haloPulse 6s ease-in-out infinite;
pointer-events:none;
	
}

.contact-map::before{

content:"";
position:absolute;
inset:-2px;

border-radius:18px;

background:linear-gradient(
90deg,
rgba(255,122,0,0.4),
rgba(155,92,255,0.4),
rgba(77,163,255,0.4)
);

filter:blur(12px);
opacity:.35;

z-index:0;
pointer-events:none;

}

.contact-map:hover iframe{

transform:scale(1.01);

box-shadow:
0 35px 70px rgba(0,0,0,0.25),
0 0 35px rgba(155,92,255,0.25);

transition:all .35s ease;

}

.map-caption{

text-align:center;

font-size:22px;
font-weight:500;

padding:25px 0;

background:linear-gradient(90deg,var(--orange),var(--violet),var(--blue));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

/* CONTACT ANIMATIONS */

@keyframes fiberGlow{

0%{
opacity:.4;
transform:scale(1);
}

100%{
opacity:.7;
transform:scale(1.05);
	
}

}

@keyframes formFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
	
}

}

@keyframes glowEarth{

0%{
opacity:.4;
transform:translate(-50%,-50%) scale(1);
}

50%{
opacity:.8;
transform:translate(-50%,-50%) scale(1.1);
}

100%{
opacity:.4;
transform:translate(-50%,-50%) scale(1);
}

}

@keyframes haloRotate{
	
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
	
}

@keyframes haloPulse{
	
0%{opacity:.4; transform:translate(-50%,-50%) scale(1);}
50%{opacity:.8; transform:translate(-50%,-50%) scale(1.05);}
100%{opacity:.4; transform:translate(-50%,-50%) scale(1);}
	
}


/* =========================

       PAGE SERVICES
93
========================= */


/* =============================================
   SERVICES HUB GRID — 3 COLONNES (home + services)
   ============================================= */

.services-hub-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Centrer le(s) dernier(s) carte(s) orpheline(s) si jamais */
.services-hub-grid > .service-hub-card:last-child:nth-child(3n - 1) {
  grid-column-end: -2;
}
.services-hub-grid > .service-hub-card:last-child:nth-child(3n + 1) {
  grid-column: 2;
}

@media (max-width: 900px) {
  .services-hub-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Centrer orphelin en 2 colonnes */
  .services-hub-grid > .service-hub-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 550px) {
  .services-hub-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================
   SERVICES HUB
========================= */

.services-hub{
	
max-width:1100px;
margin:auto;
padding:80px 30px;
	
}

.services-hub-intro{
	
text-align:center;
margin-bottom:60px;
	
}

.services-hub-intro p{
	
font-size:16px;
color:#666;
max-width:700px;
margin:0 auto 10px;
line-height:1.7;
	
}

.services-hub-note{
	
font-size:13px;
color:#aaa;
font-style:italic;
	
}

.services-hub-grid{
	
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-bottom:70px;
	
}

.service-hub-card{
	
display:flex;
flex-direction:column;
background:white;
border-radius:14px;
padding:26px 20px;
box-shadow:0 4px 20px rgba(0,0,0,.07);
border:1px solid rgba(0,0,0,.06);
transition:all .3s cubic-bezier(.22,.61,.36,1);
	
}

.service-hub-card:hover{
	
transform:translateY(-5px);
box-shadow:0 16px 40px rgba(155,92,255,.15);
border-color:rgba(155,92,255,.25);
	
}

.shc-icon{
	
font-size:28px;
width:54px;
height:54px;
background:linear-gradient(135deg,rgba(255,122,0,.1),rgba(155,92,255,.1));
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
flex-shrink:0;
	
}

.service-hub-card h3{
	
font-size:15px;
font-weight:700;
color:var(--dark);
margin-bottom:12px;
	
}

.shc-list{
	
list-style:none;
padding:0;
margin:0 0 16px 0;
flex-grow:1;
	
}

.shc-list li{
	
font-size:12px;
color:#666;
line-height:1.5;
padding:4px 0 4px 14px;
position:relative;
border-bottom:1px solid rgba(0,0,0,.04);
	
}

.shc-list li:last-child{
	
border-bottom:none;
	
}

.shc-list li::before{
	
content:"›";
position:absolute;
left:0;
color:var(--orange);
font-weight:700;
	
}

.shc-link{
	
font-size:13px;
font-weight:600;
color:var(--orange);
text-decoration:none;
transition:color .2s;
margin-top:auto;
	
}

.service-hub-card:hover .shc-link{
	
color:var(--violet);
	
}

.services-hub-cta{
	
text-align:center;
background:linear-gradient(135deg,rgba(255,122,0,.06),rgba(155,92,255,.06));
border-radius:16px;
padding:50px 30px;
border:1px solid rgba(155,92,255,.12);
	
}

.services-hub-cta h2{
	
font-size:26px;
font-weight:700;
margin-bottom:12px;
	
}

.services-hub-cta p{
	
font-size:16px;
color:#666;
margin-bottom:28px;
	
}

.service-cta-email {
	
  font-size: 0.82rem;
  word-break: break-all;
}


/* =========================
   BITDEFENDER PARTNER
========================= */

.bitdefender-partner-block {

  margin-top: 50px;
  padding: 36px;
  background: linear-gradient(135deg, rgba(255,122,0,.04), rgba(155,92,255,.06));
  border: 1px solid rgba(155,92,255,.15);
  border-radius: 16px;

}

.bitdefender-partner-header {

  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 36px;

}

.bitdefender-logo {

  height: 80px;
  object-fit: contain;
  flex-shrink: 0;

}

.bitdefender-partner-header p {

  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin: 8px 0 0;

}

.bd-badge {

  display: inline-block;
  background: linear-gradient(90deg, #cd7f32, #e8a85f);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: uppercase;

}

.bd-section-title {

  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--dark);

}

.bd-products-grid {

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;

}

.bd-product-card {

  background: white;
  border-radius: 12px;
  padding: 22px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: all .3s ease;

}

.bd-product-card:hover {

  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(155,92,255,.12);
  border-color: rgba(155,92,255,.2);

}

.bd-product-icon {

  font-size: 28px;
  margin-bottom: 10px;

}

.bd-product-card h4 {

  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;

}

.bd-product-card p {

  font-size: 0.88rem;
  color: #666;
  line-height: 1.65;
  margin: 0;

}

/* BITDEFENDER TOUR EVENT */

.bd-event-block {

  margin-top: 40px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,122,0,.2);

}

.bd-event-badge {

  background: linear-gradient(90deg, var(--orange), var(--violet));
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 24px;
  text-transform: uppercase;

}

.bd-event-content {

  display: flex;
  gap: 30px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(255,122,0,.03), rgba(155,92,255,.04));

}

.bd-event-text {

  flex: 1;

}

.bd-event-text h3 {

  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--dark);

}

.bd-event-text p {

  font-size: 0.93rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 12px;

}

.bd-audit-btn {

  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;

}

.bd-event-visual {

  width: 320px;
  flex-shrink: 0;

}

.bd-event-placeholder {

  width: 100%;
  border-radius: 12px;
  overflow: hidden;

}

.bd-event-placeholder img {

  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transition: transform .3s ease;

}

.bd-event-placeholder img:hover {

  transform: scale(1.02);

}


/* Responsive Bitdefender */

@media (max-width: 700px) {

  .bitdefender-partner-header { flex-direction: column; gap: 16px; }
  .bitdefender-logo { height: 60px; }
  .bd-products-grid { grid-template-columns: 1fr; }
  .bd-event-content { flex-direction: column; }
  .bd-event-visual { width: 100%; }
  .bitdefender-partner-block { padding: 22px 16px; }

}

/* =========================
   ASSISTANCE UPGRADES
========================= */

.assist-upgrades-grid {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 40px;

}

.assist-upgrade-card {

  background: linear-gradient(135deg, rgba(255,122,0,.03), rgba(155,92,255,.05));
  border: 1px solid rgba(155,92,255,.12);
  border-radius: 14px;
  padding: 26px 22px;

}

.assist-upgrade-icon {

  font-size: 30px;
  margin-bottom: 12px;

}

.assist-upgrade-card h3 {

  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--dark);

}

.assist-upgrade-card .service-features {

  margin-bottom: 0;

}

/* PC SUR MESURE */

.assist-custom-pc {

  margin-top: 30px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(77,163,255,.2);

}

.assist-custom-badge {

  background: linear-gradient(90deg, var(--blue), var(--violet));
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 24px;
  text-transform: uppercase;

}

.assist-custom-content {

  padding: 28px 30px;
  background: linear-gradient(135deg, rgba(77,163,255,.03), rgba(155,92,255,.04));

}

.assist-custom-text h3 {

  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--dark);

}

.assist-custom-text p {

  font-size: 0.93rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 16px;

}

.assist-custom-text .service-features {

  margin-bottom: 0;

}

/* DÉPANNAGES COURANTS */

.assist-common-title {

  font-size: 1.15rem;
  font-weight: 700;
  margin: 40px 0 20px;
  color: var(--dark);

}

/* Responsive Assistance */

@media (max-width: 700px) {

  .assist-upgrades-grid { grid-template-columns: 1fr; }
  .assist-custom-content { padding: 20px 16px; }

}

/* =============================================
   DIGITAL - PLATFORM BADGES
   ============================================= */

.digital-platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 1.2rem;
}

.digital-platform-badge {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 20px;
  background: rgba(255,122,0,.12);
  color: var(--orange);
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid rgba(255,122,0,.3);
  letter-spacing: .02em;
}




/* =========================

   PAGE EN CONSTRUCTION

========================= */

.wip-section{

min-height:50vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:60px 20px;

}

.wip-content{

max-width:480px;
margin:auto;

}

.wip-icon{

font-size:56px;
margin-bottom:16px;
display:block;
animation:wip-spin 5s linear infinite;

}

@keyframes wip-spin{
to{transform:rotate(360deg);}
}

.wip-badge{

display:inline-block;
background:rgba(255,122,0,.1);
border:1px solid rgba(255,122,0,.3);
color:var(--orange);
font-size:11px;
font-weight:700;
letter-spacing:3px;
padding:5px 16px;
border-radius:20px;
margin-bottom:20px;
text-transform:uppercase;

}

.wip-content p{

font-size:16px;
color:#777;
line-height:1.7;
margin-bottom:28px;

}

@media(max-width:700px){

.wip-icon{font-size:42px;}

}

/* =============================================

			PAGE HOME

============================================= */

/* =============================================
   HOME — ALERTE WINDOWS 10
   ============================================= */

.home-win-alert {
  background: linear-gradient(135deg, rgba(255,122,0,.12), rgba(155,92,255,.08));
  border: 1px solid rgba(255,122,0,.35);
  border-radius: 14px;
  margin: 2.5rem auto;
  max-width: 1100px;
  padding: 1.6rem 2rem;
}

.home-win-alert-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.home-win-alert-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.home-win-alert-text {
  flex: 1;
  min-width: 220px;
}

.home-win-alert-text h3 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  color: var(--orange);
}

.home-win-alert-text p {
  margin: 0;
  font-size: .92rem;
  opacity: .88;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .home-win-alert { margin: 1.5rem 1rem; padding: 1.2rem 1rem; }
  .home-win-alert-inner { gap: 1rem; }
  .home-win-alert-inner .btn-main { width: 100%; text-align: center; }
}

/* =============================================
   HOME — CHIFFRES CLÉS
   ============================================= */

.home-stats {
  max-width: 1100px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.home-stat-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 1.8rem 1rem;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease;
}

.home-stat-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255,122,0,.35);
}

.home-stat-number {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  margin-bottom: .5rem;
}

.home-stat-number span {
  font-size: 2rem;
}

.home-stat-label {
  font-size: .85rem;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 900px) {
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .home-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .home-stat-number { font-size: 2.2rem; }
}

/* =============================================
   HOME — SERVICES (subtitle + CTA)
   ============================================= */

.services-home-sub {
  text-align: center;
  opacity: .65;
  font-size: .95rem;
  margin: -.5rem 0 2rem;
}

.home-services-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* =============================================
   HOME — ENGAGEMENTS
   ============================================= */

.home-engagements {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  text-align: center;
}

.home-engagements h2 {
  margin-bottom: .5rem;
}

.home-engagements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.home-engagement-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease;
}

.home-engagement-card:hover {
  transform: translateY(-5px);
  border-color: rgba(155,92,255,.35);
}

.home-engagement-icon {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.home-engagement-card h3 {
  font-size: 1.05rem;
  margin-bottom: .75rem;
  color: var(--violet);
}

.home-engagement-card p {
  font-size: .88rem;
  line-height: 1.65;
  opacity: .78;
}

@media (max-width: 750px) {
  .home-engagements-grid { grid-template-columns: 1fr; }
}

/* =============================================
   HOME — TOUS PUBLICS
   ============================================= */

.home-publics {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  text-align: center;
}

.home-publics h2 { margin-bottom: .5rem; }

.home-publics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.home-public-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  min-width: 130px;
  transition: transform .2s ease, border-color .2s ease;
  cursor: default;
}

.home-public-card:hover {
  transform: translateY(-3px);
  border-color: rgba(77,163,255,.4);
}

.home-public-icon {
  font-size: 1.8rem;
}

.home-public-card span {
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  opacity: .85;
}

.home-publics-note {
  margin-top: 2rem;
  font-size: .88rem;
  opacity: .55;
  font-style: italic;
}

/* =============================================
   HOME — SERVICES GRID 3 COLONNES (9 cartes = 3x3)
   ============================================= */

.home .services-hub-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .home .services-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .home .services-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   HOME — ESPACEMENT CTA / ENGAGEMENTS
   ============================================= */

.home-services-cta {
  margin-bottom: 3rem;
}

/* =============================================
   PAIEMENT — LOGOS PLUS PETITS
   ============================================= */

.paiement-logos img {
  max-height: 30px;
  width: auto;
  opacity: .75;
  transition: opacity .2s ease;
}

.paiement-logos img:hover {
  opacity: 1;
}

/* =============================================
   SERVICE HUB CARD — TAILLE RÉDUITE
   ============================================= */

.service-hub-card {
  padding: 1.2rem 1.2rem 1.4rem !important;
}

.shc-icon {
  font-size: 1.5rem !important;
  margin-bottom: .5rem !important;
}

.service-hub-card h3 {
  font-size: .95rem !important;
  margin-bottom: .4rem !important;
}

.service-hub-card p,
.shc-list li {
  font-size: .82rem !important;
  line-height: 1.5 !important;
}

/* =============================================
   BOUTON "VOIR NOS SERVICES" — VISIBLE EN PERMANENCE
   ============================================= */

.home-services-cta .btn-outline {
  border: 2px solid var(--orange) !important;
  color: var(--orange) !important;
  background: transparent !important;
  font-weight: 600;
}

.home-services-cta .btn-outline:hover {
  background: var(--orange) !important;
  color: #fff !important;
}



/* =============================================
   HOME — PARTENAIRES & MARQUES
   ============================================= */

.home-partners {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  text-align: center;
}

.home-partners h2 { margin-bottom: .5rem; }

.home-partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2rem;
}

.home-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.2rem;
  border-radius: 30px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .9rem;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.home-partner-badge:hover {
  background: rgba(255,122,0,.1);
  border-color: rgba(255,122,0,.4);
  transform: translateY(-2px);
}

/* =============================================
   HOME — NEWSLETTER
   ============================================= */

.home-newsletter {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}

.home-newsletter-inner {
  background: linear-gradient(135deg, rgba(155,92,255,.12), rgba(77,163,255,.08));
  border: 1px solid rgba(155,92,255,.25);
  border-radius: 18px;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.home-newsletter-text h2 {
  margin: 0 0 .4rem;
  font-size: 1.4rem;
  text-align: left;
}

.home-newsletter-text p {
  margin: 0;
  font-size: .9rem;
  opacity: .72;
  max-width: 380px;
}

.home-newsletter-form {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.home-newsletter-input {
  padding: .75rem 1.2rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.07);
  color: #1a1a1a;
  font-size: .92rem;
  min-width: 240px;
  outline: none;
  transition: border-color .2s ease;
}

.home-newsletter-input::placeholder { 
	
opacity: .45; 
color: #888;

}

.home-newsletter-input:focus {
	
  border-color: var(--violet);
	
}

.home-newsletter-input:-webkit-autofill {
	
  -webkit-text-fill-color: #1a1a1a !important;
	
}

.home-newsletter-form .btn {
	
  border: none !important;
  box-shadow: none !important;
  border-radius: 50px;
	
}

.home-newsletter-captcha {
	
  transform: scale(0.78);
  transform-origin: left top;
  margin-bottom: -0.5rem;
	
}

.newsletter-msg {
	
  font-size: .85rem;
  padding: .4rem .8rem;
  border-radius: 6px;
  margin-bottom: .5rem;
  width: 100%;
}

.newsletter-ok   { background: rgba(0,200,100,.12); color: #00c864; }
.newsletter-info { background: rgba(77,163,255,.12); color: #4da3ff; }
.newsletter-err  { background: rgba(255,60,60,.12);  color: #ff3c3c; }




@media (max-width: 750px) {
	
  .home-newsletter-inner { padding: 1.8rem 1.5rem; flex-direction: column; align-items: flex-start; }
  .home-newsletter-text h2 { font-size: 1.2rem; }
  .home-newsletter-form { width: 100%; }
  .home-newsletter-input { min-width: 0; flex: 1; }
	
}

.home-newsletter-form .btn-primary {
	
  background: linear-gradient(135deg, var(--orange), var(--violet));
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  padding: .75rem 1.75rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
	
}

.home-newsletter-form .btn-primary:hover {
	
  opacity: .88;
	
}


/* =========================
   SERVICE DETAIL (sous-pages)
========================= */

.service-detail{

max-width:1100px;
margin:auto;
padding:50px 30px 80px;

}

.service-breadcrumb{

display:flex;
align-items:center;
gap:8px;
margin-bottom:40px;
font-size:13px;
color:#aaa;

}

.service-breadcrumb a{

color:var(--orange);
text-decoration:none;

}

.service-breadcrumb a:hover{text-decoration:underline;}

.service-breadcrumb span:last-child{color:#555;}

.service-detail-grid{

display:grid;
grid-template-columns:1fr 300px;
gap:50px;
align-items:start;

}

.service-detail-main h2{

font-size:24px;
font-weight:700;
margin-bottom:18px;
background:linear-gradient(135deg,var(--dark),var(--violet));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.service-detail-main p{

font-size:15px;
color:#555;
line-height:1.85;
margin-bottom:20px;

}

.service-features{

list-style:none;
padding:0;
margin:0 0 30px 0;

}

.service-features li{

font-size:15px;
color:#444;
padding:11px 0 11px 26px;
position:relative;
border-bottom:1px solid rgba(0,0,0,.06);
line-height:1.5;

}

.service-features li:last-child{border-bottom:none;}

.service-features li::before{

content:"›";
position:absolute;
left:0;
color:var(--orange);
font-weight:700;
font-size:18px;

}

.service-features li strong{

color:var(--dark);

}

.service-cta-card{

background:linear-gradient(135deg,rgba(255,122,0,.05),rgba(155,92,255,.08));
border:1px solid rgba(155,92,255,.15);
border-radius:16px;
padding:28px 22px;
text-align:center;
position:sticky;
top:20px;
margin-bottom:20px;

}

.service-cta-card h3{

font-size:17px;
font-weight:700;
margin-bottom:10px;

}

.service-cta-card p{

font-size:13px;
color:#666;
margin-bottom:20px;
line-height:1.6;

}

.service-cta-phones{

display:flex;
flex-direction:column;
gap:8px;
margin-top:16px;
padding-top:16px;
border-top:1px solid rgba(0,0,0,.07);

}

.service-cta-phones a{

font-size:14px;
color:#555;
text-decoration:none;
transition:color .2s;

}

.service-cta-phones a:hover{color:var(--orange);}

.service-back{

text-align:center;

}

.service-back a{

font-size:13px;
color:#aaa;
text-decoration:none;
transition:color .2s;

}

.service-back a:hover{color:var(--violet);}

@media(max-width:900px){

.service-detail-grid{

grid-template-columns:1fr;

}

.service-cta-card{position:static;}

}

@media(max-width:700px){

.service-detail{padding:30px 15px 60px;}

.service-detail-main h2{font-size:20px;}

.service-features li{font-size:14px;}

}



/* =========================


     PARTIE RESPONSIVE


========================= */

*{
	
box-sizing:border-box;
	
}

/* =========================

   RESPONSIVE HEADER

========================= */

/* =========================
        TABLETTE
========================= */

/* =========================
        MOBILE
========================= */

/* RES HEADER NAV */


@media(max-width:700px){

.nav-menu{

display:flex;
flex-wrap:wrap;

justify-content:center;

gap:4px 10px;

max-width:320px;
margin:auto;

}

.nav-menu a{

font-size:13px;
padding:6px 6px;

white-space:nowrap;

}

}

/* RES HEADER SOCIALS */


@media(max-width:700px){

.header-socials{
	
position:absolute;
bottom:0;
top:auto;
padding-top:50px;
right:0;
left:0;

flex-direction:row;
justify-content:center;
gap:14px;
	
}
	
.home .header-socials{
	
padding-bottom:120px;
	
}
	
.site-header.is-page .header-socials {
	
  top: 55%;
	
}

}

/* RES HERO */

@media(max-width:700px){

.site-header.is-page + .hero-full{
	
min-height:85vh;
	
}
	
.site-header.is-home + .hero-full{
	
min-height:110vh;
display:flex;
flex-direction:column;
justify-content:center;
	
}
	
.hero-full::after{
	
animation:dataFlow 12s linear infinite;
opacity:.6;
	
}
	
.hero-full{
	
align-items:center;
	
}

	
}

/* RES HERO TEXT*/

@media(max-width:700px){
	
.hero-text{
	
padding-left:20px;
padding-right:20px;
	
max-width:90%;
margin:auto;

}
	
body:not(.home) .hero-text{
	
padding-top:400px;
	
}

.home .hero-text{
	
padding-top:370px;
padding-bottom:40px;
	
}

.hero-text h1{

font-size:30px;
line-height:1.2;

}

.hero-text h2{

font-size:18px;

}

.hero-text p{

font-size:15px;

}
	
}

/* RES HEADER BTN */

@media(max-width:700px){

.btn-main,
.btn-outline{

font-size:14px;
padding:10px 18px;

border-radius:10px;

}

.hero-buttons{

gap:12px;
margin-top:20px;
padding-bottom:40px;

}

}


/* =========================

   RESPONSIVE FOOTER

========================= */

/* =========================
        TABLETTE
========================= */

/* =========================
        MOBILE
========================= */

@media(max-width:700px){

.footer-container{
	
flex-direction:column;
text-align:center;
gap:25px;
	
padding-left:20px;
padding-right:20px;
	
}
	
.footer-left p{

font-size:12px;
line-height:1.5;

}

.footer-center a,
.footer-right a{

font-size:12px;

}

.footer-left,
.footer-center,
.footer-right{
width:100%;
	
flex-wrap:wrap;
	
}

.footer-logo{
	
margin:auto;
	
}

}

/* =========================

   RESPONSIVE HOME

========================= */

/* =========================
        TABLETTE
========================= */

/* =========================
        MOBILE
========================= */

/* RES HOME SERVICES */

@media(max-width:700px){

.services-home{

margin-top:40px;
padding:0 15px;

}

.services-home h2{

font-size:22px;

}

.services-grid{

grid-template-columns:1fr 1fr;
gap:14px;
max-width:100%;
padding:0 10px;

}

.service-card{

padding:16px 12px;

}

.service-card h3{

font-size:14px;
margin-bottom:6px;

}

.service-card p{

font-size:12px;

}

.service-card:nth-child(4){

grid-column:auto;

}

}

/* RES HOME REFERENCES */

@media(max-width:700px){

.references{

margin-top:50px;
padding-top:20px;
padding-bottom:40px;

}

.references h2{

font-size:20px;
margin-bottom:25px;

}

.logo-track img{

height:34px;

}

.logo-track{

gap:35px;

}

}

/* RES HOME PAIEMENT */

@media(max-width:700px){

.paiement{

margin-top:30px;
padding:0 15px 50px;

}

.paiement h2{

font-size:20px;
margin-bottom:25px;

}

.paiement-logos{

gap:18px;

}

}


/* =========================

   RESPONSIVE SERVICES HUB

========================= */

@media(max-width:1024px){
	
.services-hub-grid{
grid-template-columns:repeat(2,1fr);
	
}
}

@media(max-width:700px){
	
.services-hub{
padding:40px 15px;
	
}
	
.services-hub-grid{
	
grid-template-columns:1fr 1fr;
gap:12px;
	
}
.service-hub-card{
	
padding:16px 12px;
	
}
	
.shc-icon{
	
width:44px;
height:44px;
font-size:22px;
margin-bottom:10px;
	
}
	
.service-hub-card h3{
	
font-size:13px;
	
}
	
.shc-list{
	
display:none;
	
}
	
.services-hub-cta{
	
padding:30px 15px;
	
}
	
.services-hub-cta h2{
	
font-size:20px;
	
}
}

/* =========================

   RESPONSIVE PAGE CONTACT

========================= */

/* =========================
        TABLETTE
========================= */

@media (max-width:1024px){

.contact-grid-top{
	
grid-template-columns:repeat(2,1fr);
	
}

.contact-grid-bottom{
	
justify-content:center;
	
}
	
/* RES CONTACT FORM */


.contact-form{

padding:30px;

}

.contact-form-section{

padding:90px 20px;

}

.contact-bg{

padding:90px 20px;

}

}


/* =========================
        MOBILE
========================= */

@media(max-width:700px){

.contact-grid-top{
	
grid-template-columns:1fr;
	
}

.contact-grid-bottom{
	
flex-direction:column;
align-items:center;
	
}
}

/* RES CONTACT CARD */

@media(max-width:700px){
.contact-card{
	
width:100%;
max-width:350px;
padding:25px;
margin:auto;
	
}
}
	
/* RES CONTACT FORM */

@media(max-width:700px){	
.contact-form{

padding:25px;
max-width:90%;
width:100%;
margin:auto;
	
}

.contact-form-section{

padding:70px 15px;

}
	
.contact-form button{

width:100%;

}
	
.contact-form input,
.contact-form textarea{

width:100%;
box-sizing:border-box;

}

.contact-bg{

padding:70px 15px;

}

.contact-icon{

width:45px;
height:45px;
font-size:18px;

}

.contact-btn{

font-size:13px;
padding:8px 12px;

}
	
.contact-submit{
	
font-size:14px;
padding:10px 18px;
	
}
}

/* RES CONTACT CAPTCHA */
	
@media(max-width:700px){
.frc-captcha{
	
transform:scale(0.85);
transform-origin:center;
max-width:260px;
margin:auto;
	
}
}
	
/* RES CONTACT TEXTE AU DE-DESSUS FORM */

@media(max-width:700px){
.contact-caption{
	
font-size:16px;
line-height:1.5;
padding:0 15px;
	
}
	
.contact-title{
	
font-size:26px;
	
}

.contact-subtitle{
	
font-size:15px;
	
}	
	
}