:root{
  --cyan:#00AEEF;
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#666666;
  --card:#004d66;
  --card-text:#e9f0f2;
  --card-muted:#a9b4bb;
  --line:#e0e0e0;
  --card-line:rgba(0,174,239,0.35);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  line-height:1.5;
  background:var(--bg);
}


a{color:var(--text);text-decoration:none}
a:hover{color:var(--cyan)}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(11,15,18,.92);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(0,174,239,0.3);
  color:#e9f0f2;
}

.header a{
  color:#e9f0f2;
}

.header a:hover{
  color:var(--cyan);
}

.nav{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 0
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800
}

.logo-badge{
  width:34px;
  height:34px;
  border:2px solid var(--cyan);
  border-radius:10px;
  display:grid;
  place-items:center
}

.navlinks{
  display:flex;
  gap:14px;
  flex:1;
  justify-content:center;
  flex-wrap:wrap
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  border:1px solid var(--line)
}

.btn.primary{
  background:var(--cyan);
  color:#fff;
  border-color:transparent
}

.btn.ghost{background:transparent}

.btn-lang{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;padding:7px 16px;font-weight:700;font-size:14px;
  background:var(--cyan);color:#fff;border:none;
  cursor:pointer;letter-spacing:.04em;transition:background .2s;
  white-space:nowrap
}
.btn-lang:hover{background:#0097d0}

/* 🔵 HERO GRADIENT CENTRÉ EN HAUT */
.hero{
  padding:0;
  border-bottom:1px solid var(--line);
  position:relative;
  height:65vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,18,0.85) 0%,
      rgba(11,15,18,0.90) 50%,
      rgba(11,15,18,0.95) 100%
    ),
    url('../img/hero_index.png') center center / cover no-repeat,
    #003340;
}
.hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(
      900px 420px at 50% 0%,
      rgba(0,174,239,0.12) 0%,
      rgba(0,174,239,0.06) 35%,
      rgba(0,174,239,0.03) 55%,
      transparent 75%
    );
  pointer-events:none;
}
.hero .container{
  position:relative;
  z-index:1;
}
.hero h1,
.hero .lead,
.hero a,
.hero .pill{
  color:#e9f0f2;
}
.hero .lead{
  color:#a9b4bb;
}

/* 🔵 HERO SPÉCIFIQUES PAR PAGE */
.hero.hero-services{
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,18,0.85) 0%,
      rgba(11,15,18,0.90) 50%,
      rgba(11,15,18,0.95) 100%
    ),
    url('../img/hero_services.png') center center / cover no-repeat,
    #003340;
}

.hero.hero-contact{
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,18,0.85) 0%,
      rgba(11,15,18,0.90) 50%,
      rgba(11,15,18,0.95) 100%
    ),
    url('../img/hero_contact.png') center center / cover no-repeat,
    #003340;
}

.hero.hero-regions{
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,18,0.85) 0%,
      rgba(11,15,18,0.90) 50%,
      rgba(11,15,18,0.95) 100%
    ),
    url('../img/hero_regions.png') center center / cover no-repeat,
    #003340;
}

.hero.hero-blog{
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,18,0.85) 0%,
      rgba(11,15,18,0.90) 50%,
      rgba(11,15,18,0.95) 100%
    ),
    url('../img/hero_blog.png') center center / cover no-repeat,
    #003340;
}

.hero.hero-faq{
  background:
    linear-gradient(
      to bottom,
      rgba(11,15,18,0.85) 0%,
      rgba(11,15,18,0.90) 50%,
      rgba(11,15,18,0.95) 100%
    ),
    url('../img/hero_faq.png') center center / cover no-repeat,
    #003340;
}

section:not(.hero){
  padding:32px 0;
}

/* Hero simple pour pages internes (sans image de fond) */
.hero.simple{
  height:auto;
  min-height:auto;
  padding:40px 0;
  background:#003340;
  border-bottom:1px solid rgba(0,174,239,0.3);
}

.hero.simple h1,
.hero.simple .lead,
.hero.simple a,
.hero.simple .pill{
  color:#e9f0f2;
}

.hero.simple .lead{
  color:#a9b4bb;
}

.hgrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:center
}

h1{
  font-size:42px;
  line-height:1.1;
  margin:0 0 10px
}

.lead{
  color:var(--muted);
  font-size:18px;
  margin:0 0 16px
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:22px 0
}

.card{
  background:linear-gradient(
    to bottom,
    #002a35 0%,
    #001f28 25%,
    #00141a 60%,
    #000a0d 100%
  );
  border:1px solid var(--card-line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  color:var(--card-text);
}

.card h3{
  margin:0 0 8px;
  color:var(--card-text);
}

.card .small{
  color:var(--card-muted);
}

.card a{
  color:var(--card-text);
}

.card a:hover{
  color:var(--cyan);
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  background:linear-gradient(
    to bottom,
    #002a35 0%,
    #001f28 25%,
    #00141a 60%,
    #000a0d 100%
  );
  border:1px solid var(--line);
  padding:2px 6px;
  border-radius:8px;
  color:var(--cyan)
}

/* 🔵 FOOTER GRADIENT DOUX CENTRÉ EN HAUT */
.footer{
  border-top:1px solid rgba(0,174,239,0.15);
  padding:26px 0;
  margin-top:32px;
  background:linear-gradient(
    to bottom,
    #002a35 0%,
    #001f28 25%,
    #00141a 60%,
    #000a0d 100%
  );
  color:#e9f0f2;
}

.footer a{
  color:#e9f0f2;
}

.footer a:hover{
  color:var(--cyan);
}

.footer .small{
  color:#a9b4bb;
}

.fgrid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
  gap:14px
}

.small{
  color:var(--muted);
  font-size:14px
}

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.pill{
  border:1px solid var(--card-line);
  border-radius:999px;
  padding:6px 10px;
  background:linear-gradient(
    to bottom,
    #002a35 0%,
    #001f28 25%,
    #00141a 60%,
    #000a0d 100%
  );
  color:var(--card-muted);
}

.table{
  width:100%;
  border-collapse:collapse
}

.table td,
.table th{
  border-bottom:1px solid var(--line);
  padding:10px 6px;
  text-align:left
}

.accordion details{
  background:linear-gradient(
    to bottom,
    #002a35 0%,
    #001f28 25%,
    #00141a 60%,
    #000a0d 100%
  ) !important;
  border:1px solid rgba(0,174,239,0.3) !important;
  border-radius:14px;
  padding:16px;
  margin:10px 0;
  color:#e9f0f2 !important;
}

.accordion summary{
  cursor:pointer;
  font-weight:700;
  color:#e9f0f2 !important;
  list-style:none;
}

.accordion summary::-webkit-details-marker{
  display:none;
}

.accordion summary::before{
  content:'▶';
  display:inline-block;
  margin-right:8px;
  transition:transform 0.2s;
  color:#00AEEF !important;
}

.accordion details[open] summary::before{
  transform:rotate(90deg);
}

.accordion details[open]{
  background:linear-gradient(
    to bottom,
    #002a35 0%,
    #001f28 25%,
    #00141a 60%,
    #000a0d 100%
  ) !important;
}

.accordion .small{
  color:#a9b4bb !important;
  margin-top:12px;
  padding-left:20px;
}

@media (max-width:900px){
  .hgrid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .navlinks{justify-content:flex-start}
}