:root{
  --brand:#187abf; --brand-2:#42b6e6; --text:#1f2937; --muted:#64748b;
  --border:#e5e7eb; --surface:#ffffff; --surface-alt:#f5f7fa;
  --radius:14px; --shadow:0 10px 30px rgba(2, 12, 32, .08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--surface);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--brand);text-decoration:none} a:hover{opacity:.9}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:auto}
.flex{display:flex} .between{justify-content:space-between} .center{align-items:center}
.grid{display:grid;gap:24px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-5{grid-template-columns:repeat(5,1fr)}
.gap-lg{gap:40px} .mt-lg{margin-top:24px} .mt-xl{margin-top:48px}
.small{font-size:.9rem} .muted{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card-img{width:100%;border-radius:10px;margin-bottom:8px}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--border);color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));transition:.2s}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);z-index:50}
.header.shadow{box-shadow:0 8px 20px rgba(0,0,0,.06)}
.navrow{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.brand{display:flex;gap:14px;align-items:center;color:var(--text);font-weight:800}
.logo{height:72px;width:auto}
.brandname{font-size:1.35rem}
.nav{display:flex;gap:18px;align-items:center}
.nav.mobile{display:none;flex-direction:column;padding:14px}
.hamburger{display:none;background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px}

/* HERO BANNER */
.hero-banner{position:relative;height:70vh;min-height:520px;overflow:hidden}
.hero-banner .slides{position:absolute;inset:0}
.hero-banner img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.hero-banner img.active{opacity:1}
.hero-banner .overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
/* === HERO PANEL - Effet verre dépoli Stokes === */
.hero .panel {
  background: rgba(255, 255, 255, 0.65);          /* transparence douce */
  backdrop-filter: blur(10px);                    /* effet verre dépoli */
  -webkit-backdrop-filter: blur(10px);            /* compatibilité Safari */
  border: 1px solid rgba(24, 122, 191, 0.25);     /* contour bleu discret */
  border-radius: 16px;                            /* coins arrondis élégants */
  padding: 40px;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);        /* ombre légère */
  transition: background 0.3s ease, box-shadow 0.3s ease;

}

.hero-banner .dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hero-banner .dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--surface);background:rgba(255,255,255,.6);cursor:pointer}
.hero-banner .dots button.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none}

/* Sections */
.features{padding:40px 0}
.process{padding:40px 0;background:var(--surface-alt)}
.method .card h4{margin:10px 0 6px}

/* Tabs */
.tabs{margin-top:24px}
.tab-list{display:flex;gap:10px;flex-wrap:wrap}
.tab{background:#fff;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:999px;cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none}
.tab-panel{display:none;margin-top:18px}
.tab-panel.active{display:block}
/* Images des services : plus compactes */
.tab-panel .banner{
  width: 100%;
  max-height: 220px;      /* ↓ hauteur maîtrisée (avant: pleine largeur très haute) */
  object-fit: cover;      /* recadrage propre */
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

@media (max-width: 900px){
  .tab-panel .banner{
    max-height: 180px;    /* encore plus compact sur mobile */
  }
}

/* Mise en page texte + listes plus respirantes */
.tab-panel h2{ margin: 6px 0 8px; }
.tab-panel p{ margin: 0 0 10px; }
.service-points{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.service-points li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.service-points li::before{
  content: "";
  width: 8px; height: 8px; margin-top: .45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}


/* Devis page */
.devis-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.devis-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 30px rgba(2,12,32,.08);padding:20px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#1f2937}
.help{font-size:.9rem;color:#64748b}
.notice{display:none;margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--border)}
.notice.ok{display:block;background:#ecfeff}
.notice.err{display:block;background:#fff1f2}
.map{width:100%;height:220px;border-radius:12px;object-fit:cover;border:1px solid var(--border)}

/* Responsive */
@media (max-width: 1000px){ .cols-5{grid-template-columns:1fr 1fr} }
@media (max-width: 900px){
  .cols-3{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .nav{display:none}
  .hamburger{display:block}
  .nav.mobile.show{display:flex}
  .hero-banner{height:56vh;min-height:420px}
  .devis-wrap{grid-template-columns:1fr}
}
/* ===== Méthode (cartes propres, sans puces) ===== */
.method-block { padding: 40px 0; background: var(--surface-alt, #f5f7fa); }
.section-title { margin: 0 0 18px; font-size: 1.6rem; font-weight: 800; }

.method-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(5, minmax(0,1fr));
}

.step-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px; box-shadow: var(--shadow, 0 10px 30px rgba(2,12,32,.08));
  overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.step-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(2,12,32,.12); }

.step-media { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.step-body { padding: 14px 16px 18px; display: grid; gap: 8px; }
.step-title { margin: 0; font-size: 1rem; font-weight: 800; }
.step-desc { margin: 0; color: var(--muted, #64748b); font-size: .95rem; line-height: 1.55; }

/* Responsive */
@media (max-width: 1200px) { .method-steps { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 720px)  { .method-steps { grid-template-columns: 1fr; } }

/* --- Footer discret Stokes --- */
:root{
  /* ajuste si besoin en fonction de ta palette */
  --brand:#187abf;
  --brand-2:#42b6e6;
  --footer-bg:#f6f9fe;      /* bleu très clair, discret */
  --footer-text:#0f172a;    /* texte principal */
  --footer-muted:#5b6b82;   /* texte secondaire */
  --footer-border:#e4eef9;  /* ligne de séparation */
}

body{display:flex;flex-direction:column;min-height:100vh;}
main{flex:1;}

.site-footer{
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
  padding: 28px 0 18px;     /* compact, pas envahissant */
}

.footer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  align-items:start;
}

.footer-title{
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--footer-text);
  position: relative;
}
.footer-title::after{
  content:"";
  display:block;
  width: 28px;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 2px;
}

.footer-text{margin:0 0 10px;color:var(--footer-muted);}

.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.footer-list a{
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color .15s ease,border-color .15s ease;
}
.footer-list a:hover{
  color:#0d5c94;                     /* bleu un peu plus sombre au hover */
  border-color: #b8d9f7;
}

.footer-copy{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--footer-border);
  text-align:center;
  font-size: .9rem;
  color: var(--footer-muted);
}

/* Mobile */
@media (max-width: 640px){
  .site-footer{padding:22px 0 14px;}
}

/* === STOKES TCE - bouton orange === */
.nav-tce-btn {
  display: inline-block;
  background: linear-gradient(135deg, #F7951E, #FFB347); /* dégradé orange chaud */
  color: #fff !important;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(247, 149, 30, 0.25);
  transition: all 0.25s ease;
  border: none;
}

.nav-tce-btn:hover {
  background: linear-gradient(135deg, #FFA534, #FFD37B);
  box-shadow: 0 4px 10px rgba(247, 149, 30, 0.35);
  transform: translateY(-1px);
}

/* Pour garder un bon alignement du menu */
.nav a.nav-tce-btn {
  margin-left: 8px;
}
/* ===== HERO-BANNER : couches, clics et bulle en verre dépoli ===== */
.hero-banner { position: relative; }

/* Les images de fond restent derrière */
.hero-banner .slides { position: absolute; inset: 0; z-index: 0; }
.hero-banner .slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* (optionnel) dégradé global très léger par dessus les images */
.hero-banner::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.25));
  pointer-events: none; /* ne bloque PAS les clics */
}

/* L’overlay aligne le contenu au centre mais ne capte pas les clics */
.hero-banner .overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; /* centre verticalement */
  pointer-events:none;              /* important : laisse les clics passer */
}

/* La bulle elle-même capte les clics et passe au-dessus */
.hero-banner .overlay .panel{
  pointer-events:auto;              /* rend les liens cliquables */
  position: relative; z-index:3;

  /* Effet “verre dépoli” + contour bleu très discret */
  background: rgba(255, 255, 255, 0.50);   /* ↓ plus transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(24,122,191,0.25); /* rappel logo */
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);

  max-width: 820px;  /* ajuste si tu veux plus large/étroit */
  padding: 28px 24px;
}

/* Texte dans la bulle */
.hero-banner .overlay .panel h1{
  margin: 0 0 10px;
  color: #0f3057;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.hero-banner .overlay .panel p{
  margin: 0 0 14px;
  color: #1a3a5a;
  line-height: 1.6;
}

/* Les boutons dans la bulle restent bien au-dessus */
.hero-banner .overlay .panel .btn,
.hero-banner .overlay .panel a{
  position: relative; z-index: 4;
}
/* Bouton compact dans les cartes d'accueil */
.card-actions {
  margin-top: 12px;
  display: flex;
}

.btn.btn-sm {
  padding: 8px 14px;
  font-size: 0.95rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand, #187abf), var(--brand-2, #42b6e6));
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(24,122,191,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24,122,191,.26);
}

.btn.btn-sm:active { transform: translateY(0); }

/* Si tes cartes ont déjà des paddings, on aligne bien le bouton */
.card .card-actions { padding-bottom: 6px; }
.page-header-tce {
  background: linear-gradient(135deg, #f7f9fc, #e8f1f8);
  border-bottom: 1px solid #d0e3f1;
  padding: 60px 20px;
  text-align: center;
}
.page-header-tce h1 {
  color: #0f3057;
  font-size: 2rem;
  margin-bottom: 10px;
}
.page-header-tce p {
  color: #1a3a5a;
  font-size: 1.1rem;
}
#mainLogo {
  transition: opacity 0.3s ease;
}
/* Style du logo par défaut */
.header .logo {
  height: 75px; /* ou la taille actuelle que tu veux garder */
  transition: all 0.3s ease;
}

/* Style uniquement pour la page Stokes TCE */
body.stokes-tce .header .logo {
  height: 75px; /* ajuste la valeur à ta convenance */
}