/* /assets/css/style.css */

:root{
  --bg:#f3f6fb;
  --surface:#ffffff;
  --text:#0e1b2a;
  --muted:#5a6a7b;

  --blue:#1e4b78;
  --blue2:#2f6aa5;
  --danger:#b13434;

  --shadow-xs: 0 1px 2px rgba(14,27,42,.06);
  --shadow-sm: 0 8px 20px rgba(14,27,42,.10);
  --shadow-md: 0 14px 34px rgba(14,27,42,.14);
  --shadow-lg: 0 24px 60px rgba(14,27,42,.18);

  --ring: 0 0 0 4px rgba(47,106,165,.18);

  --radius:16px;
  --radius-lg:20px;
  --container:1060px;

  /* Hauteurs UI */
  --band-h: 74px;
  --footer-h: 64px; /* sera recalculé par JS */
  --header-h: 78px;
}

/* Force dezoom 90% */
html { zoom: .9; }

/* Fallback Firefox (zoom non supporté) */
@supports not (zoom: 1) {
  html, body { height: 100%; }
  body{
    transform: scale(.9);
    transform-origin: top center;
    width: 111.111%;
  }
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);

  /* header fixe => on réserve la hauteur */
  padding-top: var(--header-h);

  /* band fixe en bas => on réserve la place (en scroll normal) */
  padding-bottom: calc(var(--band-h) + 12px);
}

a{color:inherit;text-decoration:none}
p{line-height:1.55;color:var(--muted);margin:0}
h1,h2,h3{margin:0;line-height:1.15}
.container{width:min(var(--container),calc(100% - 32px));margin:0 auto}

/* Utils */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.flash{padding:12px 0;font-weight:800}
.flash .container{padding:10px 12px;border-radius:10px}
.flash-success .container{background:#e8fff0;border:1px solid #b7f1c7;color:#135a2a}
.flash-error .container{background:#ffecec;border:1px solid #ffc1c1;color:#6a1111}

/* Anchors (header fixe => scroll margin dynamique) */
.anchor{height:1px}
.anchor{scroll-margin-top: calc(var(--header-h) + 18px)}

/* =========================
   HEADER / TOPNAV (TOUJOURS VISIBLE)
   ========================= */

.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 9999;

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border-bottom:2px solid rgb(0, 0, 0);
  box-shadow: 0 10px 30px rgba(14,27,42,.10);

  padding-left: 10px;
  padding-right: 10px;
}
.site-header.is-scrolled{ box-shadow: 0 14px 40px rgba(14,27,42,.14); }

.header-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding: 12px 0;
}

.brand{
  justify-self:start;
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.3px;
}
.brand-mark{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg,#dbe9f8,#fff);
  display:grid;place-items:center;
  color:var(--blue);
  box-shadow: var(--shadow-xs);
  border: 1px solid rgba(30,75,120,.10);
}
.brand-text{font-size:18px}

.header-center{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.header-spacer{ justify-self:end; min-height:1px; }

/* CTA header */
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  line-height:1;
}

/* CTA style */
.nav-cta{
  padding: 10px 14px !important;
  font-weight: 800 !important;
  color:#fff !important;
  width:200px;

  background: linear-gradient(135deg,var(--blue2),var(--blue));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-xs);
  border-radius:10px;
}
.nav-cta:hover{filter:brightness(1.03)}
.header-cta.is-active{
  box-shadow: var(--shadow-xs), var(--ring);
  filter: brightness(1.03);
}

/* Logo header */
.header-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;



  transition: filter .15s ease, transform .12s ease;
}
.header-logo:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.header-logo:active{ transform: translateY(0px); }
.header-logo img{ display:block; height: 70px; width:auto; }
.header-logo .logo-flame{ display:none; }
.header-logo .logo-full{ display:block; }

/* Mobile */
@media (max-width: 720px){
  :root{ --header-h: 74px; }

  .brand{ display:none; }
  .header-spacer{ display:none; }

  .header-inner{
    grid-template-columns: 1fr;
    padding: 10px 0;
  }

  .header-center{
    width:100%;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    gap:10px;
    align-items:center;
  }

  .header-center .header-cta{
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    min-height: 52px;
    padding: 14px 12px !important;
    font-size: 13px;
    text-align:center;
  }

  .header-center .header-logo{
    justify-self:center;
    min-height: 52px;
    padding: 10px 14px;
  }

  .header-logo .logo-full{ display:none; }
  .header-logo .logo-flame{ display:block; }
  .header-logo img{ height: 46px; width:auto; }
}

@media (max-width: 390px){
  :root{ --header-h: 70px; }

  .header-center{ gap:8px; }

  .header-center .header-cta{
    min-height: 48px;
    padding: 12px 10px !important;
    font-size: 12px;
  }

  .header-center .header-logo{
    min-height: 48px;
    padding: 8px 12px;
  }

  .header-logo img{ height: 42px; }
}

/* =========================
   LANGUAGE SELECT
   ========================= */
.lang-select{ position:relative; display:inline-flex; align-items:center; }
.lang-select select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding: 10px 34px 10px 12px;
  border-radius:10px;
  border: 1px solid rgba(30,75,120,.12);
  background: #eef4fb;
  box-shadow: var(--shadow-xs);
  font-weight: 800;
  color:#123252;
  cursor:pointer;
  font: inherit;
  line-height: 1;
  font-size: 13px;
}
.lang-select:after{
  content:"▾";
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events:none;
  opacity:.75;
  font-weight: 800;
  color:#123252;
}

/* =========================
   HERO
   ========================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 30px;
  color:#fff;
  padding-bottom: calc(80px + 1px);

  background-image:
    linear-gradient(rgba(13,43,71,.30), rgba(13,43,71,.30)),
    url('/assets/img/hero_bg2.png');
  background-size: cover;
  background-position: center 10%;
  background-repeat: no-repeat;
  border-bottom:3px solid #535353;
  box-shadow: 0 2px 10px rgb(39, 39, 39);
}

.hero-inner{
  position:relative;
  text-align:center;
  width: min(860px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 24px) clamp(14px, 3vw, 20px);
  border-radius: 22px;
  background: rgba(10, 36, 60, .38);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 18px 55px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

.hero h1{
  font-size: clamp(18px, 3.2vw, 30px);
  line-height: 1.12;
  letter-spacing:.2px;
  text-transform:none;
  margin: 0;
}

/* Tel + horaires */
.hero-badges{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2vw, 12px);
  margin-top: clamp(12px, 2.5vw, 16px);
  justify-content:center;
  align-items:stretch;
}

/* Devis + urgence */
.hero-cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2vw, 12px);
  margin-top: clamp(10px, 2vw, 14px);
  justify-content:center;
  align-items:stretch;
}

/* Badges */
.badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height: clamp(44px, 6.5vw, 52px);
  padding: clamp(10px, 2.2vw, 12px) clamp(12px, 2.4vw, 16px);
  border-radius:10px;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;


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

  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.badge:hover{background:rgba(255,255,255,.14)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: 100%;
  margin-left:50%;
  min-height: clamp(44px, 6.5vw, 52px);
  padding: clamp(10px, 2.2vw, 12px) clamp(12px, 2.4vw, 18px);
  border-radius:10px;
  text-transform:uppercase;

  border:1px solid transparent;
  cursor:pointer;

  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease, background .15s ease;
  box-shadow: var(--shadow-sm);

  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-md);}
.btn:active{transform: translateY(0px); box-shadow: var(--shadow-sm);}
.btn:focus-visible{outline:none; box-shadow: var(--shadow-md), var(--ring);}

.btn-primary{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff}
.btn-primary:hover{filter:brightness(1.04)}
.btn-danger{background:linear-gradient(135deg,#d24a4a,var(--danger));color:#fff}
.btn-danger:hover{filter:brightness(1.03)}
.btn-soft{
  background:#eef4fb;
  border:1px solid rgba(30,75,120,.10);
  color:#123252;
}

@media (max-width: 360px){
  .badge, .btn{
    min-height: 42px;
    font-size: 11px;
    padding: 10px 10px;
  }
}

/* =========================
   SECTIONS
   ========================= */
.section{padding:26px 0 40px;margin-top:-50px;}
.section-head{display:grid;gap:8px;margin-bottom:16px}
.section-head h2{
  font-size: clamp(18px, 2vw, 22px);
  color:#122335;
}
.section-head--split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.section-actions{display:flex;gap:10px;flex-wrap:wrap}
.spacer-sm{padding: 0 0 12px;margin-top:1.0px;}

/* Grid */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){.grid{grid-template-columns:repeat(3,1fr);gap:18px}}

/* Cards glass */
.card{
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 25px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  transform: translateY(0) scale(1);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease;
}
.card:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 45px rgba(16,24,40,.14), 0 6px 16px rgba(16,24,40,.08);
}

.card-img{
  height: 150px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-img{transform: scale(1.03)}

.card-body{padding:16px 16px 18px}
.card-title{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.card-title h3{font-size:15px;letter-spacing:.15px;text-transform:none;color:#14283d}
.icon{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background:#f1f6fd;border:1px solid rgba(30,75,120,.10);
  box-shadow: var(--shadow-xs);
}
.card-link{
  display:inline-block;
  margin-top:10px;
  font-weight:700;
  color:var(--blue);
}
.card-link:hover{text-decoration:underline}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease}
.reveal.is-in{opacity:1; transform: translateY(0)}

/* Images */
.card-img-plumbing{background-image:url('/assets/img/cards/card_img_plombing2.png');background-position:center 70%;border-bottom:5px solid rgb(98, 104, 109)}
.card-img-repair{background-image:url('/assets/img/cards/card_img_repair2.png');background-position:center 60%;border-bottom:5px solid rgb(98, 104, 109)}
.card-img-renovation{background-image:url('/assets/img/cards/card_img_renovation2.png');background-position:center 80%;border-bottom:5px solid rgb(98, 104, 109)}
.card-img-heating{background-image:url('/assets/img/cards/card_img_heating2.png');background-position:center 55%;border-bottom:5px solid rgb(98, 104, 109)}
.card-img-ac{background-image:url('/assets/img/cards/card_img_ac2.png');background-position:center 35%;border-bottom:5px solid rgb(98, 104, 109)}
.card-img-sweep{background-image:url('/assets/img/cards/card_img_sweep2.png');background-position:center 35%;border-bottom:5px solid rgb(98, 104, 109)}

/* TRUST GRID */
.trust-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
  width:100%;
}
@media (min-width:720px){
  .trust-grid{grid-template-columns: repeat(4, 1fr);}
}
.trust-grid--spaced{ margin-bottom:50px; }

.trust-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
}
.trust-ico{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:#f1f6fd;
  border:1px solid rgba(30,75,120,.10);
  box-shadow: var(--shadow-xs);
  flex:0 0 auto;
}
.trust-title{font-weight:700;color:#14283d}
.trust-sub{font-size:13px;color:var(--muted);margin-top:2px}

/* Pane */
.pane{ width:100%; }
.pane[hidden]{ display:none !important; }

/* Contact split */
.contact-split{
  display:grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width:900px){
  .contact-split{grid-template-columns: 1.15fr .85fr; align-items:start;}
}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.contact-reassure{margin-top:6px;color:var(--muted);font-size:12px}

/* Contact form */
.contact-form{
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid rgba(14,27,42,.08);
  box-shadow: var(--shadow-md);
  padding:16px;
  display:grid;
  gap:12px;
}
label{display:grid;gap:6px;font-weight:700;color:#17324c}
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(14,27,42,.12);
  background:#fbfdff;
  font:inherit;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(47,106,165,.65);
  box-shadow: var(--ring);
}

/* Contact right : empile contact-box + map */
.contact-right{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Contact box */
.contact-box{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  padding: 16px;
}
.contact-box-title{font-weight:700;color:#14283d;margin-bottom:8px;font-size:16px}
.contact-box-line{
  display:flex;gap:10px;align-items:center;
  padding:10px 10px;border-radius:10px;
  background: rgba(241,246,253,.9);
  border: 1px solid rgba(30,75,120,.10);
  margin-top:10px;color:#17324c;font-weight:800;
}

/* =========================
   BAND (fixe)
   ========================= */
.band{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;                 /* collé bas écran */
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top:1px solid #000;
  box-shadow: 0 -14px 34px rgba(14,27,42,.12);
  transition: bottom .18s ease;
}
.band-inner{ padding: 16px 0; text-align:center; }

/* ✅ quand on est sur le footer => on relève la band */
.band.is-lifted{
  bottom: var(--footer-h);
}

/* =========================
   FOOTER (style Dudognon / 2 lignes)
   ========================= */
.site-footer{
  padding:14px 0;
  border-top:1px solid rgba(0, 0, 0, 0.12);
  background:rgba(255,255,255,.34);
}

/* footer contenu “sympa” (comme Dudognon) */
.site-footer-inner{

  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
  color:rgba(15,23,42,.78);
  text-align:center;
  text-transform:none;
  letter-spacing:normal;
  font-size:15px;
}

/* si tu as un séparateur dans le HTML, il ne sert plus en colonne */
.site-footer-inner .sep{ display:none; }

.site-footer-link{
  color:rgba(36,69,112,.92);
  text-decoration:none;
  text-transform:none;
  letter-spacing:normal;
}
.site-footer-link:hover{ text-decoration:underline; }

/* Fix spacing bas (plus de <br>) */
#services{
  padding-bottom: calc(var(--band-h) + 50px);
}

/* MAP CARD (google maps) */
.map-card{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
  overflow:hidden;
}
.map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(14,27,42,.08);
  background: rgba(241,246,253,.9);
}
.map-title{ font-weight:700; color:#14283d; }
.map-open{
  font-weight:700;
  color: var(--blue);
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid rgba(47,106,165,.18);
  background: rgba(255,255,255,.7);
}
.map-open:hover{ filter: brightness(1.03); }

.map-frame{
  position:relative;
  width:100%;
  height: 220px;
  background:#eef4fb;
}
.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.map-foot{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  color:#17324c;
  font-weight:800;
  border-top:1px solid rgba(14,27,42,.08);
  background:#fff;
}
.map-pin{opacity:.9}

/* Contact form disabled */
.contact-form--disabled{
  position: relative;
  overflow:hidden;
}
.contact-form--disabled .contact-form-fields{
  opacity:.35;
  filter: grayscale(1);
  pointer-events:none;
}
.contact-disabled{
  padding: 6px 2px 14px;
  display:grid;
  gap:10px;
}
.contact-disabled-title{
  font-weight: 900;
  color:#14283d;
  font-size: 16px;
}
.contact-disabled-text{
  margin:0;
  color: var(--muted);
}
.contact-form--disabled .contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.contact-form--disabled .contact-actions .btn{
  width:auto;
  min-width: 180px;
}
@media (max-width: 520px){
  .contact-form--disabled .contact-actions .btn{
    width:100%;
    min-width: 0;
  }
}
/* =========================================================
   HEADER PRO (carré) — layout.php topbar
   (à coller en fin de fichier)
   ========================================================= */

.topbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 9999;
  background:#f1f3f5;
  border-bottom:3px solid #535353;
  box-shadow: 0 2px 10px rgb(39, 39, 39);
}

/* si ton CSS garde --header-h, on l'utilise. sinon fallback */
.topbar{ height: var(--header-h, 78px); }
body{ padding-top: var(--header-h, 78px); }

.topbar.is-scrolled{
  box-shadow: 0 10px 30px rgba(14,27,42,.10);
}

.topbar-inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Logo */
.topbar-logo{
  display:flex;
  align-items:center;
  padding: 8px 0;
}
.topbar-logo img{ display:block; height: 56px; width:auto; }
.topbar-logo .topbar-logo-mark{ display:none; }

/* Nav desktop */
.topbar-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:10px;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(14,27,42,.18);
  background:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25px;
  font-size:12px;
  border-radius:10px; !important; /* ✅ carré */
  width:200px;
}
.nav-link:hover{ background:#f2f4f7; }
.nav-link.is-active{ box-shadow: 0 0 0 3px rgba(47,106,165,.18); }

.nav-ico{ font-size:16px; line-height:1; }

/* Actions droite */
.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.action-phone{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(14,27,42,.18);
  background:#fff;
  font-weight:700;
  font-size:13px;
  border-radius:10px !important; /* ✅ carré */
}
.action-phone:hover{ background:#f2f4f7; }

.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.25);
  background:#b13434;
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25px;
  font-size:12px;
  border-radius:10px !important; /* ✅ carré */
}
.action-btn:hover{ filter:brightness(1.03); }

/* Burger */
.topbar-burger{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(14,27,42,.18);
  background:#fff;
  padding:10px;
  cursor:pointer;
  border-radius:0 !important; /* ✅ carré */
}
.topbar-burger span{
  display:block;
  height:2px;
  background:#0b1220;
  margin:6px 0;
}

/* Panneau mobile */
.topbar-panel{
  display:none;
  background:#fff;
  border-bottom:2px solid #000;
  box-shadow: 0 14px 40px rgba(14,27,42,.12);
}
body.nav-open .topbar-panel{ display:block; }

.topbar-panel-inner{
  padding:14px 0 16px;
  display:grid;
  gap:10px;
}

.panel-link{
  display:block;
  padding:12px 12px;
  border:1px solid rgba(14,27,42,.18);
  background:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25px;
  font-size:12px;
  border-radius:10px !important; /* ✅ carré */
}
.panel-link:hover{ background:#f2f4f7; }

.panel-btn{
  display:inline-flex;
  justify-content:center;
  padding:12px 14px;
  background:#b13434;
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25px;
  border:1px solid rgba(0,0,0,.25);
  border-radius:10px !important; /* ✅ carré */
}

/* Responsive */
@media (max-width: 980px){
  .topbar-logo img{ height: 50px;width:150px; }
  .topbar-logo .topbar-logo-full{ display:none; }
  .topbar-logo .topbar-logo-mark{ display:block; }

  .topbar-nav{ display:none; }
  .action-btn{ display:none; }
  .action-phone .action-txt{ display:none; } /* compact */
  .topbar-burger{ display:inline-block; }
}
/* =========================================================
   PATCH MOBILE HEADER + BAND NON-STICKY
   (à coller TOUT EN BAS du style.css)
   ========================================================= */

/* 1) STOP réserve bas écran: la band n'est plus fixed */
body{
  padding-bottom: 12px !important; /* au lieu du calc(--band-h...) */
}

/* 2) La band ne reste plus collée en bas */
.band{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  transition: none !important;
}
.band.is-lifted{ bottom: auto !important; } /* neutralise le JS existant */
#services{ padding-bottom: 50px !important; } /* plus besoin de calc band */

/* 3) Header: structure burger + logo + phone icon */
.topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

/* logo complet toujours visible même en mobile */
.topbar-logo .topbar-logo-full{ display:block !important; }
.topbar-logo img{ height:200px; width:350px; display:block; }

/* icône tel (droite) */
.action-phone-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(14,27,42,.18);
  background:#fff;
  border-radius:0 !important;
  font-size:18px;
}
.action-phone-icon:hover{ background:#f2f4f7; }

/* burger visible en mobile */
.topbar-burger{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(14,27,42,.18);
  background:#fff;
  padding:10px;
  cursor:pointer;
  border-radius:0 !important;
}
.topbar-burger span{
  display:block;
  height:2px;
  background:#0b1220;
  margin:6px 0;
}

/* Desktop: burger caché, tel icône optionnel (on peut le garder) */
@media (min-width: 981px){
  .topbar-burger{ display:none !important; }
}

/* Mobile: nav desktop cachée, bouton urgent caché, burger affiché */
@media (max-width: 980px){
  :root{ --header-h: 74px; }

  .topbar-nav{ display:none !important; }
  .action-btn{ display:none !important; } /* tu gardes l'urgence via panneau burger */
  .topbar-burger{ display:inline-block !important; }

  /* le logo complet doit tenir : on le réduit un peu */
  .topbar-logo img{ height:46px; }
}
/* =========================================================
   FIX LOGO TOPBAR (PC + MOBILE) — À LA FIN DU FICHIER
   ========================================================= */

/* Cible uniquement le logo du header */
.topbar-logo { display:flex; align-items:center; }

/* --- PC / Desktop --- */
@media (min-width: 981px){
  .topbar-logo img{
    height: 100px !important;          /* ajuste ici (ex: 60-80) */
    width: auto !important;           /* ✅ pas d'étirement */
    max-width: 360px !important;      /* sécurité */
    transform: translateY(10px) !important;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
  }
}

/* --- Mobile --- */
@media (max-width: 980px){
  .topbar-logo img{ 
    height: 100px !important;
    width: auto !important;           /* ✅ garde le ratio */
    transform: translateY(12px) !important;
    margin-left:20px;
  }
}

/* =========================
   Bridge chips — ULTRA PREMIUM
   ========================= */
.hero{ position:relative; }

/* Container bridge */
.hero-bridge{
  position:absolute;
  left:0; right:0;
  bottom:0;
  transform: translateY(130%);
  z-index: 6;
  pointer-events: none;
}

/* Halo premium derrière */
.hero-bridge::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(940px, calc(100% - 22px));
  height: 98px;
  border-radius: 28px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
    rgba(0,0,0,.20);
  filter: blur(18px);
  opacity: .55;
  z-index: 0;
}

.hero-bridge-inner{
  position:relative;
  z-index: 1;
  width: min(860px, calc(100% - 32px));
  margin: 0 auto;

  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:12px;
  flex-wrap:nowrap;
  padding:10px;

  pointer-events: auto;
}

/* Chip premium */
.bridge-chip{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 12px 14px;
  min-height: 60px;

  border-radius: 14px;
  text-align:center;
  text-transform: uppercase;

  font-weight: 900;
  letter-spacing: .45px;
  font-size: 13px;

  color:#122335;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid black;

  /* profondeur */
  box-shadow:
    0 18px 50px rgba(14,27,42,.22),
    0 6px 14px rgba(14,27,42,.10),
    inset 0 1px 0 rgba(255,255,255,.85);

  /* layout 3 colonnes */
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;

  /* animations */
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* liseré signature (haut) */
.bridge-chip::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:0;
  height:3px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(90deg, rgba(47,106,165,.0), rgba(47,106,165,.65), rgba(47,106,165,.0));
  opacity: .85;
}

/* mini glow autour au hover (pro) */
.bridge-chip::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 16px;
  background: radial-gradient(closest-side, rgba(47,106,165,.28), rgba(47,106,165,0) 70%);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease;
}

.bridge-ico{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:grid;
  place-items:center;

  background: linear-gradient(180deg, #f2f7ff, #eaf2ff);
  border:1px solid rgba(30,75,120,.12);
  box-shadow:
    0 8px 18px rgba(14,27,42,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  line-height:1;
}

/* Hover premium */
.bridge-chip:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 70px rgba(14,27,42,.26),
    0 10px 20px rgba(14,27,42,.12),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.bridge-chip:hover::after{ opacity: 1; }

/* Tap feedback (mobile) */
.bridge-chip:active{
  transform: translateY(0px) scale(.99);
}

/* Animation JS : état initial */
.bridge-chip{
  opacity: 0;
  transform: translateY(10px);
}
.bridge-chip.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ✅ Place sous le hero pour ne pas chevaucher les cards */
#services{
  padding-top: 110px;
}

/* ✅ Mobile : 3 sur une ligne + position */
@media (max-width: 720px){
  .hero-bridge{
    transform: translateY(97px); /* ton choix actuel: stable */
  }

  .hero-bridge::before{
    height: 86px;
    opacity: .48;
  }

  .hero-bridge-inner{
    width: calc(100% - 14px);
    gap:8px;
    padding: 6px;
  }

  .bridge-chip{
    min-height: 50px;
    padding: 10px 10px;
    font-size: 11px;
    letter-spacing: .28px;
    border-radius: 12px;
  }

  .bridge-chip::before{ left:8px; right:8px; }

  .bridge-ico{
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }
}

/* Ultra petit */
@media (max-width: 390px){
  .hero-bridge{ transform: translateY(92px); }

  .bridge-chip{
    font-size: 10px;
    padding: 9px 8px;
    min-height: 48px;
  }

  .bridge-ico{
    width: 22px;
    height: 22px;
  }
}

/* --- Ajuste l'espace chips <-> services (clean) --- */

/* 1) Les chips un peu moins bas */
.hero-bridge{
  transform: translateY(130%); /* au lieu de 130% */
}

/* 2) Moins de vide au-dessus des services */
#services{
  padding-top: 90px; /* au lieu de 104/110 */
}

/* Mobile : encore plus serré */
@media (max-width: 720px){
  .hero-bridge{ transform: translateY(97px); } /* au lieu de 97px */
  #services{ padding-top: 82px; }
}