:root{
  --bg:#0a0f1c;
  --bg-elevated:#111a2e;
  --bg-card:#15203a;
  --bg-card-2:#1b2746;
  --fg:#fbf6f1;
  --muted:#8a98b5;
  --orange:#ff8a1f;
  --orange-glow:#ff6a00;
  --focus:rgba(255,138,31,.55);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --shadow-card:0 20px 50px -20px rgba(0,0,0,.55);
  --shadow-elegant:0 30px 80px -30px rgba(255,138,31,.35),0 20px 50px -20px rgba(0,0,0,.7);
  --shadow-header:0 10px 30px rgba(0,0,0,.35);
  --gradient-orange:linear-gradient(135deg,#ff8a1f 0%,#f44607 100%);
  --gradient-bg:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,138,31,0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(80,120,255,0.08), transparent 60%),
    #0a0f1c;
  --radius:14px;
  --radius-lg:20px;
}

/* ==========================
   BANNIÈRE PROMO HÉRO
========================== */

.promo-hero {
  position: relative;
  padding: 3rem 1.25rem 3.5rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(255,138,31,.22), transparent 60%),
    linear-gradient(180deg, #0d1426 0%, #0a0f1c 100%);
  border-bottom: 1px solid rgba(255,138,31,.25);
}

/* Halo lumineux animé en fond */
.promo-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,138,31,.20), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(255,106,0,.18), transparent 45%);
  filter: blur(40px);
  animation: promoFloat 9s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Léger motif "shine" qui traverse */
.promo-hero::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  transform: skewX(-15deg);
  animation: promoShine 6s ease-in-out infinite;
  pointer-events: none;
}

.promo-hero-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  animation: promoBounce .8s ease;
}

/* Badge */
.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--gradient-orange);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(255,106,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.promo-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: promoPulse 1.6s ease-out infinite;
}

/* Titre */
.promo-hero h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.highlight {
  background: var(--gradient-orange);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promo-sub {
  max-width: 560px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  margin: -.4rem 0 .2rem;
}

/* Grille des prix */
.promo-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 640px;
}

.promo-price {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,138,31,.25);
  padding: 1.25rem 1rem 1rem;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: var(--shadow-card);
}
.promo-price:hover {
  transform: translateY(-4px);
  border-color: rgba(255,138,31,.55);
  box-shadow: var(--shadow-elegant);
}

.price-tag {
  position: absolute;
  top: -10px;
  background: var(--gradient-orange);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(255,106,0,.4);
}

.price-label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--fg);
  opacity: .9;
  margin-top: .25rem;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .25rem;
}

.price-value {
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  background: var(--gradient-orange);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-info {
  font-size: .85rem;
  font-weight: 700;
  color: var(--fg);
  text-align: left;
  line-height: 1.1;
}
.price-info small {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* Liste prestations */
.pcard-feats {
  width: 100%;
  max-width: 680px;
  text-align: left;
  margin: .5rem 0 0;
  padding: 1.4rem 1.4rem 1.4rem 1.4rem;
  list-style: none;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem 1.4rem;
}
.pcard-feats li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.45;
  font-size: .94rem;
  color: var(--fg);
}
.pcard-feats li::before {
  content: "✓";
  position: absolute;
  left: 0; top: -1px;
  width: 1.35rem; height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-orange);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(255,106,0,.4);
}

/* Actions */
.promo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}

.promo-cta {
  padding: 1rem 1.6rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(255,106,0,.45) !important;
  transition: transform .2s ease, box-shadow .25s ease;
}
.promo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(255,106,0,.6) !important;
}
.promo-cta i { margin-right: .4rem; }

.promo-phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--fg);
  padding: .85rem 1.1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-strong);
  transition: border-color .2s ease, background .2s ease;
}
.promo-phone:hover {
  border-color: rgba(255,138,31,.55);
  background: rgba(255,138,31,.08);
}

/* Mobile */
@media (max-width: 768px) {
  .promo-hero { padding: 2rem 1rem 2.5rem; }
  .promo-hero h2 { font-size: 1.85rem; line-height: 1.2; }
  .pcard-feats {
    grid-template-columns: 1fr;
    padding: 1.1rem;
    border-radius: 16px;
  }
  .pcard-feats li { font-size: .92rem; }
  .promo-cta { width: 100%; max-width: 360px; }
  .promo-phone { width: 100%; max-width: 360px; justify-content: center; }
}

/* Animations */
@keyframes promoBounce {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes promoFloat {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.05); }
}
@keyframes promoShine {
  0%   { left: -30%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}
@keyframes promoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: "Poppins", sans-serif;
  color:var(--fg);
  background:var(--gradient-bg);
  background-attachment:fixed;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  color-scheme:dark;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,138,31,.25)}

/* Better anchor positioning with sticky header */
:target{scroll-margin-top:96px}

.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,3.2vw,1.5rem)}

/*icone pint GPS*/
.custom-icon {
    text-align: center;
    font-size: 10px;
}




/* Focus */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

/* ==========================
   BARRE PROMO DÉFILANTE
========================== */

.promo-banner {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  padding: 10px 0;
}

.promo-track {
  display: inline-block;
  white-space: nowrap;
  animation: scrollPromo 30s linear infinite;
}

.promo-track span {
  color: #f44607;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@keyframes scrollPromo {
  from {
    transform: translateX(100%);
  }

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


/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.4rem;
  border-radius:12px;
  font-weight:700;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn-orange{
  background:var(--gradient-orange);
  color:#fff;
  box-shadow:0 10px 30px -10px rgba(255,106,0,.55);
}
.btn-orange:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(255,106,0,.7)}
.btn-outline{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--fg);
}
.btn-outline:hover{background:rgba(255,255,255,.06);border-color:var(--orange);color:var(--orange)}
.btn-lg{padding:.95rem 1.9rem;font-size:1rem}

/* Skip link (a11y) */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  padding:.7rem 1rem;
  background:rgba(17,26,46,.95);
  border:1px solid var(--border-strong);
  color:var(--fg);
  border-radius:12px;
  z-index:999;
}
.skip-link:focus{left:1rem;top:1rem}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,15,28,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem 0;
  position:relative;
}
.logo{display:flex;align-items:center}
.logo-img{height:54px;width:auto}
.logo-img-lg{height:110px}

.header-actions{display:flex;align-items:center;gap:.75rem}
.header-cta{display:none}

/* Nav (desktop) */
.nav{
  display:flex;
  gap:1.6rem;
  font-weight:700;
  font-size:.92rem;
  color:var(--muted);
  align-items:center;
}
.nav a{
  position:relative;
  padding:.4rem .1rem;
  transition:color .2s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.1rem;
  height:2px;
  border-radius:2px;
  background:var(--gradient-orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
  opacity:.9;
}
.nav a:hover{color:var(--fg)}
.nav a:hover::after{transform:scaleX(1)}

.nav-desktop{display:none}
@media (min-width:900px){
  .nav-desktop{display:flex}
  .header-cta{display:inline-flex}
}

/* Mobile menu via <details> */
.nav-mobile{display:block}
@media (min-width:900px){.nav-mobile{display:none}}

.nav-mobile summary{
  list-style:none;
  cursor:pointer;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.nav-mobile summary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,138,31,.35)}
.nav-mobile summary:active{transform:translateY(1px)}
.nav-mobile summary::-webkit-details-marker{display:none}
.burger{
  width:18px;height:12px;position:relative;
}
.burger::before,.burger::after,.burger span{
  content:"";
  position:absolute;left:0;right:0;
  height:2px;border-radius:2px;
  background:rgba(241,245,251,.9);
  transition:transform .2s ease,top .2s ease,opacity .2s ease;
}
.burger::before{top:0}
.burger span{top:5px}
.burger::after{top:10px}

.nav-mobile[open] summary{
  border-color:rgba(255,138,31,.45);
  box-shadow:0 14px 30px -18px rgba(255,138,31,.55);
}
.nav-mobile[open] .burger::before{top:5px;transform:rotate(45deg)}
.nav-mobile[open] .burger span{opacity:0}
.nav-mobile[open] .burger::after{top:5px;transform:rotate(-45deg)}

.nav-mobile-panel{
  position:absolute;
  top:calc(100% + .75rem);
  left:0;
  right:0;
  background:rgba(17,26,46,.95);
  border:1px solid var(--border-strong);
  border-radius:16px;
  box-shadow:var(--shadow-header);
  padding:1rem;
}
.nav-mobile-links{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom:.85rem;
  color:var(--fg);
}
.nav-mobile-links a{
  padding:.8rem .9rem;
  border-radius:12px;
  border:1px solid transparent;
}
.nav-mobile-links a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  color:var(--orange);
}
.nav-mobile-cta{width:100%}

/* Hero */
.hero{
  display:grid;
  gap:3rem;
  padding:4rem 0 5rem;
  align-items:center;
}
@media (min-width:1024px){.hero{grid-template-columns:1.1fr 1fr}}

.hero h1{
  font-size:clamp(2.1rem,5vw,3.75rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-0.02em;
  background:linear-gradient(180deg,#ffffff 0%,#b9c4dc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero h1 span{
  background:var(--gradient-orange);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.divider{
  height:4px;width:96px;border-radius:2px;
  background:var(--gradient-orange);margin:1.25rem 0;
  box-shadow:0 0 20px rgba(255,138,31,.5);
}
.hero .lead{
  margin-top:1.25rem;
  font-size:1.05rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
}
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem}

.features{
  margin-top:3rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:640px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  transition:transform .25s ease,border-color .25s ease;
}
.feature:hover{transform:translateY(-3px);border-color:rgba(255,138,31,.35)}
.feature svg{width:32px;height:32px;color:var(--orange)}
.feature h3{
  margin-top:.85rem;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--fg);
}
.feature p{margin-top:.35rem;font-size:.82rem;color:var(--muted)}

.hero-img-wrap{position:relative;display:flex;justify-content:center}
.hero-glow{
  position:absolute;inset:10% 5% 10% 5%;
  background:radial-gradient(closest-side,rgba(255,138,31,.35),transparent 70%);
  filter:blur(40px);
  z-index:0;
}
.hero-img-wrap img{
  position:relative;
  z-index:1;
  border-radius:22px;
  box-shadow:var(--shadow-elegant);
  object-fit:cover;
  max-height:620px;
  border:1px solid var(--border-strong);
}
.badge{
  position:absolute;
  bottom:-1rem;right:-.5rem;
  width:140px;height:140px;
  border-radius:50%;
  background:var(--gradient-orange);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-weight:900;
  font-size:11px;
  line-height:1.25;
  padding:1rem;
  box-shadow:0 14px 36px rgba(255,106,0,.5);
  z-index:2;
  transform:rotate(-6deg);
}

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

@media (max-width: 768px) {

  section,
  .container,
  .contact-container,
  .contact-form,
  .quote-form,
  .contact-card,
  .hero-content {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

}
@media (max-width: 768px) {

  .contact-container,
  .quote-form,
  form {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
  }

}

@media (min-width:768px){.badge{width:170px;height:170px;right:-1.5rem;font-size:12px}}

/* Sections */
.section-head{text-align:center;margin-bottom:3rem}
.section-head h2{
  font-size:clamp(1.85rem,4vw,2.5rem);
  font-weight:900;
  letter-spacing:-0.01em;
  background:linear-gradient(180deg,#ffffff,#b9c4dc);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.section-head p{color:var(--muted);margin-top:.5rem}
.section-head .divider{margin:1.25rem auto 0}

/* Pricing */
.pricing{padding:5.75rem 0;position:relative}

.pcards{
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pcards{grid-template-columns:repeat(4,1fr)}}

.pcard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:1.75rem 1.5rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.pcard::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(600px 200px at 50% -20%,rgba(255,138,31,.18),transparent 70%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.pcard:hover{transform:translateY(-6px);border-color:rgba(255,138,31,.4);box-shadow:var(--shadow-elegant)}
.pcard:hover::before{opacity:1}

.pcard-featured{
  border-color:rgba(255,138,31,.55);
  background:
    linear-gradient(180deg,rgba(255,138,31,.08),rgba(255,138,31,0) 40%),
    linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  box-shadow:var(--shadow-elegant);
}
.pcard-featured::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--gradient-orange);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.pcard-badge{
  position:absolute;top:14px;right:14px;
  background:var(--gradient-orange);
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.35rem .65rem;
  border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(255,106,0,.6);
  z-index:2;
}

.pcard-head{position:relative;z-index:1}
.pcard-tag{
  display:inline-block;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange);
  background:rgba(255,138,31,.1);
  border:1px solid rgba(255,138,31,.25);
  padding:.25rem .6rem;
  border-radius:999px;
  margin-bottom:.85rem;
}
.pcard-head h3{
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:-0.01em;
  color:var(--fg);
}
.pcard-sub{margin-top:.35rem;color:var(--muted);font-size:.85rem}

.pcard-prices{
  position:relative;z-index:1;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding:1rem;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:14px;
}
.pp{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.pp-label{font-size:.8rem;color:var(--muted);font-weight:700}
.pp-value{font-size:1.25rem;font-weight:900;color:var(--fg);letter-spacing:-0.01em}
.pp-pack .pp-label{color:var(--orange)}
.pp-pack .pp-value{
  font-size:1.4rem;
  background:var(--gradient-orange);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.pcard-feats{
  position:relative;z-index:1;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  font-size:.88rem;
  color:var(--muted);
}
.pcard-feats li{display:flex;align-items:center;gap:.55rem}
.pcard-feats li::before{
  content:"";
  width:16px;height:16px;flex-shrink:0;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,138,31,.9),rgba(255,138,31,.25));
  box-shadow:inset 0 0 0 1px rgba(255,138,31,.35);
}
.pcard-cta{position:relative;z-index:1;margin-top:auto;width:100%}
.note{text-align:center;margin-top:1.5rem;font-size:.82rem;color:var(--muted)}

/* Small “other panels” block */
.other-panels{
  max-width:920px;
  margin:0 auto;
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:var(--shadow-card);
  text-align:center;
}
.other-panels h3{
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-0.01em;
}
.other-panels p{margin-top:.65rem;color:var(--muted)}
.other-panels .cta-row{justify-content:center}

/* Panneaux (catalogue + devis) */
.quote-layout{
  display:grid;
  gap:1.5rem;
  align-items:start;
}
@media (min-width:980px){
  .quote-layout{grid-template-columns:1.45fr .85fr}
}
.panel-h3{
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-0.01em;
}
.panel-sub{margin-top:.5rem;color:var(--muted)}
.panel-grid{
  margin-top:1.15rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media (min-width:640px){.panel-grid{grid-template-columns:repeat(2,1fr)}}
.panel-card{
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.1rem 1.1rem .95rem;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:1rem;
  box-shadow:var(--shadow-card);
  position:relative;
}
.panel-card.is-selected{
  border-color:rgba(255,138,31,.5);
  box-shadow:var(--shadow-elegant);
}
.panel-ic{
  width:52px;height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,138,31,.18),rgba(255,138,31,.04));
  border:1px solid rgba(255,138,31,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--orange);
}
.panel-ic svg{width:26px;height:26px}
.panel-body h4{
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:-0.01em;
}
.panel-body p{margin-top:.35rem;color:var(--muted);font-size:.88rem}
.panel-qty{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.6rem;
  margin-top:.35rem;
}
.qty-btn{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.03);
  color:var(--fg);
  font-weight:900;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.qty-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,138,31,.35);color:var(--orange)}
.qty-btn:active{transform:translateY(1px)}
.qty-value{
  min-width:34px;
  text-align:center;
  font-weight:900;
  letter-spacing:-0.01em;
}

.quote-card{
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.35rem;
  box-shadow:var(--shadow-card);
  position:sticky;
  top:96px;
}
.quote-card h3{
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-0.01em;
}
.quote-row{margin-top:1rem}
.quote-row label{display:block;font-weight:850;margin-bottom:.5rem;color:rgba(241,245,251,.92)}
.quote-row input{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-strong);
  color:var(--fg);
  padding:.85rem 1rem;
  border-radius:14px;
  font-weight:800;
  font-size:1rem;
}
.quote-row input:focus{border-color:rgba(255,138,31,.6);box-shadow:0 0 0 4px rgba(255,138,31,.16)}
.quote-summary{
  margin-top:1.15rem;
  padding:1rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.qs-row{display:flex;justify-content:space-between;gap:1rem;color:rgba(241,245,251,.9);padding:.3rem 0}
.qs-row strong{font-weight:900}
.qs-hint{margin-top:.75rem;color:var(--muted);font-size:.85rem}
.qs-total{
  margin-top:1rem;
  padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.qs-total strong{
  font-size:1.35rem;
  background:var(--gradient-orange);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.quote-actions{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}
.quote-actions .btn{width:100%}

/* Devis (page devis.html) */
.devis-form-card{
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.35rem;
  box-shadow:var(--shadow-card);
}
@media (min-width:768px){.devis-form-card{padding:1.75rem}}
.devis-form-card h3{
  font-size:1.15rem;
  font-weight:900;
  letter-spacing:-0.01em;
}
.form-hint{margin-top:.45rem;color:var(--muted);font-size:.9rem}
.form-grid{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:680px){.form-grid{grid-template-columns:1fr 1fr}}
.form-field{margin-top:1rem}
.form-field label{
  display:block;
  font-weight:850;
  font-size:.92rem;
  letter-spacing:.01em;
  margin-bottom:.5rem;
  color:rgba(241,245,251,.92);
}
.form-field input,.form-field select{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-strong);
  color:var(--fg);
  padding:.9rem 1rem;
  border-radius:14px;
  font-weight:750;
  font-size:1rem;
}
.form-field select{
  /* Évite le rendu "blanc" natif sur certains navigateurs */
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:rgba(17,26,46,.92);
  border-color:rgba(255,255,255,.18);
  padding-right:2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,138,31,.95) 50%),
    linear-gradient(135deg, rgba(255,138,31,.95) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.form-field select option{
  background:#111a2e;
  color:var(--fg);
}
.form-field input::placeholder{color:rgba(138,152,181,.9)}
.form-field input:focus,.form-field select:focus{
  border-color:rgba(255,138,31,.6);
  box-shadow:0 0 0 4px rgba(255,138,31,.16);
  outline:none;
}
.segmented{
  margin-top:1rem;
  display:flex;
  gap:.5rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  padding:.4rem;
  border-radius:16px;
}
.seg-btn{
  flex:1;
  border:1px solid transparent;
  background:transparent;
  color:rgba(241,245,251,.86);
  padding:.75rem .9rem;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.seg-btn:hover{background:rgba(255,255,255,.05)}
.seg-btn.is-active{
  background:rgba(255,138,31,.14);
  border-color:rgba(255,138,31,.4);
  color:var(--orange);
}
.radio-row{display:grid;gap:.75rem}
@media (min-width:768px){.radio-row{grid-template-columns:1fr 1fr}}
.radio-card{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding:1rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.radio-card:hover{border-color:rgba(255,138,31,.35)}
.radio-card input{margin-top:.2rem}
.rc-title{font-weight:900;letter-spacing:-0.01em}
.rc-sub{margin-top:.25rem;color:var(--muted);font-size:.88rem}
.form-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}

/* Benefits */
.benefits{
  background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg) 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:5rem 0;
}
.benefits h2{
  text-align:center;
  font-size:clamp(1.2rem,2.5vw,1.6rem);
  font-weight:900;
  letter-spacing:.02em;
}
.benefits .divider{margin:1.25rem auto 3rem}
.b-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media (min-width:768px){.b-grid{grid-template-columns:repeat(4,1fr)}}
.benefit{
  text-align:center;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.6rem 1rem;
  transition:transform .25s ease,border-color .25s ease;
}
.benefit:hover{transform:translateY(-3px);border-color:rgba(255,138,31,.35)}
.benefit .ic{
  width:56px;height:56px;margin:0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,138,31,.18),rgba(255,138,31,.04));
  border:1px solid rgba(255,138,31,.25);
  display:flex;align-items:center;justify-content:center;
}
.benefit .ic svg{width:26px;height:26px;color:var(--orange)}
.benefit h3{margin-top:1rem;font-size:.85rem;font-weight:900;letter-spacing:.02em}
.benefit p{margin-top:.5rem;font-size:.82rem;color:var(--muted)}

/* Contact */
.contact{padding:5rem 0}
.contact-card{
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
  padding:2.25rem;
  display:grid;
  gap:2rem;
  align-items:center;
}
@media (min-width:768px){.contact-card{grid-template-columns:1fr 1fr;padding:3rem}}
.contact-card .logo{justify-content:center}
.contact-info{color:var(--fg);display:flex;flex-direction:column;gap:1.1rem}
.contact-info a,.contact-info .row{display:flex;align-items:flex-start;gap:.85rem;transition:color .2s ease}
.contact-info a:hover{color:var(--orange)}
.contact-info svg{width:22px;height:22px;color:var(--orange);flex-shrink:0;margin-top:2px}
.contact-info .addr .name{font-weight:800}
.contact-info .addr .lines{font-size:.9rem;color:var(--muted)}

/* Zone */
.zone{padding:5rem 0;background: linear-gradient(90deg,rgba(91, 45, 2, 0.12),rgba(138, 39, 4, 0.05)); ;}
.address-card{
  max-width:920px;
  margin:0 auto 1.5rem;
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);

  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:1.6rem;
}
@media (min-width:768px){.address-card{padding:2rem}}
.address-title h3{
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:-0.01em;
}
.address-title p{margin-top:.5rem;color:var(--muted)}
.address-field{margin-top:1.15rem}
.address-field label{
  display:block;
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.01em;
  margin-bottom:.5rem;
  color:rgba(241,245,251,.92);
}
.autocomplete{position:relative}
.autocomplete input{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-strong);
  color:var(--fg);
  padding:.95rem 1rem;
  border-radius:14px;
  font-weight:700;
  font-size:1rem;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.autocomplete input::placeholder{color:rgba(138,152,181,.9)}
.autocomplete input:hover{background:rgba(255,255,255,.04)}
.autocomplete input:focus{border-color:rgba(255,138,31,.6);box-shadow:0 0 0 4px rgba(255,138,31,.16)}
.autocomplete-list{
  position:absolute;
  top:calc(100% + .45rem);
  left:0;right:0;
  z-index:30;
  list-style:none;
  background:rgba(17,26,46,.98);
  border:1px solid var(--border-strong);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  overflow:hidden;
  max-height:280px;
  overflow:auto;
}
.autocomplete-item{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  color:var(--fg);
  padding:.8rem .95rem;
  cursor:pointer;
  font-weight:750;
  font-size:.95rem;
}
.autocomplete-item:hover{
  background:rgba(255,255,255,.06);
  color:var(--orange);
}
.address-meta{
  margin-top:.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  align-items:center;
}
.distance-output{
  font-weight:900;
  letter-spacing:-0.01em;
  color:rgba(241,245,251,.95);
}
.fee-output{
  font-weight:850;
  color:rgba(241,245,251,.9);
}
.address-status{color:var(--muted);font-weight:650}
.zone .map{
  height:460px;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.zone-note{
  text-align:center;
  margin-top:1.25rem;
  color:var(--orange);
  font-weight:700;
  letter-spacing:.02em;
}
.leaflet-container{background:#0b0f17}

/* Footer */
.site-footer{
  background:linear-gradient(90deg,rgba(255,138,31,.12),rgba(255,90,31,.05));
  border-top:1px solid var(--border);
  padding:1.25rem 0;
  color:var(--fg);
  font-weight:900;
  font-size:.88rem;
  letter-spacing:.03em;
}
.site-footer .row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-align:center;
}
@media (min-width:768px){.site-footer .row{flex-direction:row;justify-content:space-between}}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}

/* ===== Panneaux grid (10 cards) ===== */
.pcards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.25rem;
}

/* ===== FAQ ===== */
.faq{padding:clamp(3rem,6vw,5rem) 0}
.faq-list{
  max-width:880px;
  margin:2rem auto 0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.faq-item{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
  box-shadow:var(--shadow-card);
  transition:border-color .2s ease, transform .2s ease;
}
.faq-item[open]{
  border-color:var(--orange);
  transform:translateY(-1px);
}
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  font-size:1.02rem;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  color:var(--fg);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-size:1.4rem;
  color:var(--orange);
  font-weight:400;
  transition:transform .2s ease;
  line-height:1;
}
.faq-item[open] summary::after{content:"–"}
.faq-item p{
  margin-top:.75rem;
  color:var(--muted);
  line-height:1.65;
}

/* ===== Panel card image (index cards) ===== */
.pcard-img{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  height:140px;
  border-radius:14px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,.015) 70%);
  border:1px solid var(--border);
  padding:.85rem;
  margin-bottom:.25rem;
}
.pcard-img img{
  max-height:100%;
  max-width:100%;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  transition:transform .35s ease;
}
.pcard:hover .pcard-img img{transform:scale(1.06) rotate(-1.5deg)}

/* ===== Devis page extras ===== */
.devis-hero{padding:3.5rem 0 1.5rem;text-align:center}
.devis-hero h1{
  font-size:clamp(1.9rem,4vw,2.7rem);
  font-weight:900;
  letter-spacing:-0.02em;
  background:linear-gradient(180deg,#fff 0%,#b9c4dc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.devis-hero p{color:var(--muted);margin-top:.6rem;max-width:640px;margin-left:auto;margin-right:auto}
.devis-section{padding:1rem 0 4rem}

.step{
  margin-top:1.5rem;
  padding:1.4rem;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  box-shadow:var(--shadow-card);
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--gradient-orange);color:#fff;font-weight:900;font-size:.85rem;
  margin-right:.6rem;
}
.step h2{
  display:flex;align-items:center;
  font-size:1.15rem;font-weight:900;letter-spacing:-0.01em;
}
.hidden{display:none !important}

.toggle-card{
  display:flex;align-items:center;gap:.85rem;
  padding:1rem 1.1rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  cursor:pointer;user-select:none;
  margin-top:1rem;
  transition:border-color .2s ease,background .2s ease;
}
.toggle-card:hover{border-color:rgba(255,138,31,.35)}
.toggle-card input{accent-color:var(--orange);width:18px;height:18px}
.toggle-card .tc-title{font-weight:900;letter-spacing:-0.01em}
.toggle-card .tc-sub{color:var(--muted);font-size:.88rem;margin-top:.15rem}

/* Panels grid devis */
.panels-pick{
  margin-top:1.15rem;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.panel-pick{
  position:relative;
  display:flex;flex-direction:column;gap:.65rem;
  padding:1rem;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.panel-pick.is-on{
  border-color:rgba(255,138,31,.55);
  box-shadow:0 12px 30px -16px rgba(255,106,0,.55);
}
.pp-img{
  height:100px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,.01) 70%);
  border:1px solid var(--border);
  padding:.5rem;
}
.pp-img img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.pp-name{font-weight:900;font-size:.95rem;letter-spacing:-0.01em}
.pp-code{
  font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);background:rgba(255,138,31,.1);
  border:1px solid rgba(255,138,31,.25);
  padding:.2rem .5rem;border-radius:999px;align-self:flex-start;
}
.pp-controls{
  margin-top:auto;display:grid;gap:.6rem;
  grid-template-columns:1fr;
  align-items:stretch;
}
.pp-controls label{
  font-size:.75rem;color:var(--muted);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
  display:block;margin-bottom:.25rem;
}
.pp-controls select,.pp-controls .qty-wrap{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-strong);
  color:var(--fg);
  padding:.55rem .7rem;border-radius:10px;
  font-weight:800;font-size:.9rem;
}
.pp-controls select{
  appearance:none;-webkit-appearance:none;
  background-color:rgba(17,26,46,.92);padding-right:1.8rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,138,31,.95) 50%),
    linear-gradient(135deg, rgba(255,138,31,.95) 50%, transparent 50%);
  background-position:calc(100% - 14px) 1.1em,calc(100% - 9px) 1.1em;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.qty-wrap{display:flex;align-items:center;justify-content:space-between;padding:.2rem .35rem}
.qty-wrap button{
  width:30px;height:30px;border-radius:8px;
  border:1px solid var(--border-strong);background:rgba(255,255,255,.04);
  color:var(--fg);font-weight:900;cursor:pointer;
}
.qty-wrap button:hover{border-color:rgba(255,138,31,.35);color:var(--orange)}
.qty-wrap span{font-weight:900}

.summary-box{
  margin-top:1.25rem;padding:1rem 1.2rem;
  border-radius:16px;border:1px solid var(--border);
  background:rgba(255,138,31,.06);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;
}
.summary-box strong{
  font-size:1.1rem;
  background:var(--gradient-orange);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.status-msg{
  margin-top:1rem;padding:.85rem 1rem;border-radius:12px;
  font-weight:800;
}
.status-ok{background:rgba(40,180,99,.12);color:#7be3a8;border:1px solid rgba(40,180,99,.35)}
.status-err{background:rgba(231,76,60,.12);color:#ff8b8b;border:1px solid rgba(231,76,60,.35)}

/* === Departments badges === */
.dept-badges{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin:0 0 1.6rem;
}
.dept-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1rem;border-radius:999px;
  background:rgba(255,138,31,.12);
  border:1px solid rgba(255,138,31,.45);
  color:#ffb877;font-weight:800;font-size:.95rem;letter-spacing:.02em;
}

/* === Pricing pro (degressive) === */
.pricing-pro{
  margin-top:3rem;padding:2rem;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,138,31,.08),rgba(10,15,28,.6));
  border:1px solid rgba(255,138,31,.35);
}
.pp-head{text-align:center;margin-bottom:1.5rem}
.pp-head h3{margin:0 0 .5rem;color:#ff8a1f;letter-spacing:.04em}
.pp-head p{color:#cfd6e4;margin:0}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.pp-block{
  background:rgba(10,15,28,.55);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:1.25rem 1.4rem;
}
.pp-block h4{margin:0 0 .9rem;color:#fff;font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em}
.pp-list{list-style:none;margin:0;padding:0}
.pp-list li{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 0;border-bottom:1px dashed rgba(255,255,255,.08);
  color:#cfd6e4;
}
.pp-list li:last-child{border-bottom:none}
.pp-list strong{color:#ff8a1f;font-weight:800;white-space:nowrap}
.pp-note{margin-top:1rem;color:#9aa3b2;font-size:.85rem;text-align:center}

/* === Autocomplete (devis address) === */
.devis-form-card .autocomplete{position:relative}
.devis-form-card .autocomplete-list{
  position:absolute;top:100%;left:0;right:0;z-index:20;
  margin:.25rem 0 0;padding:.25rem;list-style:none;
  background:#0f1626;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;max-height:240px;overflow:auto;display:none;
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}
.devis-form-card .autocomplete-item{
  display:block;width:100%;text-align:left;padding:.55rem .75rem;
  background:transparent;border:none;color:#e7ecf3;cursor:pointer;border-radius:6px;
}
.devis-form-card .autocomplete-item:hover{background:rgba(255,138,31,.15);color:#fff}

/* === WhatsApp === */
.wa-link{color:#25d366 !important}
.wa-link svg{width:20px;height:20px}
.wa-fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:50;
  display:inline-flex;align-items:center;gap:.5rem;
  background:#25d366;color:#fff;text-decoration:none;
  padding:.85rem 1.1rem;border-radius:999px;font-weight:700;
  box-shadow:0 10px 28px rgba(37,211,102,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.55)}
.wa-fab svg{width:24px;height:24px;color:#fff}
@media (max-width:640px){
  .wa-fab span{display:none}
  .wa-fab{padding:.9rem;border-radius:50%}
}

/* === Custom panels (devis) === */
.custom-panel-row{
  display:grid;grid-template-columns:1fr 80px 1fr 36px;gap:.5rem;
  margin-top:.5rem;align-items:center;
}
.custom-panel-row input,.custom-panel-row select{
  background:#0f1626;border:1px solid rgba(255,255,255,.12);
  color:#e7ecf3;padding:.55rem .65rem;border-radius:8px;font:inherit;
}
.custom-panel-row .cp-remove{
  background:rgba(255,138,31,.15);border:1px solid #ff8a1f;color:#ff8a1f;
  border-radius:8px;cursor:pointer;height:38px;font-size:1.2rem;line-height:1;
}
.custom-panel-row .cp-remove:hover{background:#ff8a1f;color:#fff}
@media (max-width:600px){
  .custom-panel-row{grid-template-columns:1fr 1fr 36px;}
  .custom-panel-row input[type="text"]{grid-column:1 / -1}
}

/* ==========================
   HERO TITLE - ANIMATED (override)
========================== */
.hero h1.hero-title{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  background:none !important;
  color:inherit !important;
  -webkit-text-fill-color:initial !important;
}
.hero .divider{margin-left:auto;margin-right:auto}
.hero .lead{text-align:center}
.hero .cta-row{justify-content:center}

.hero h1.hero-title .hero-title-main{
  display:inline-block;
  background:linear-gradient(180deg,#ffffff 0%,#b9c4dc 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  opacity:0;
  transform:translateY(24px);
  animation:heroFadeUp 1s ease-out .15s forwards;
}
.hero h1.hero-title .hero-title-main::after{
  content:"";
  display:block;
  height:3px;width:0;
  margin:.7rem auto 0;
  background:var(--gradient-orange);
  border-radius:2px;
  box-shadow:0 0 18px rgba(255,138,31,.6);
  animation:heroLineGrow 1s ease-out 1.1s forwards;
}

.hero h1.hero-title .hero-title-sub{
  display:inline-block;
  font-size:.78em;
  font-weight:800;
  letter-spacing:.02em;
  background:var(--gradient-orange) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  opacity:0;
  transform:translateY(24px) scale(.95);
  animation:heroFadeUp 1s ease-out 1.3s forwards, heroSubPulse 2.8s ease-in-out 2.6s infinite;
}

.hero h1.hero-title .hero-title-highlight{
  display:inline-flex !important;
  align-items:center;
  gap:.6rem;
  margin-top:.6rem;
  padding:.85rem 1.6rem;
  font-size:.5em;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:linear-gradient(135deg,rgba(255,138,31,.22),rgba(244,70,7,.22)) !important;
  border:2px solid rgba(255,138,31,.65);
  border-radius:999px;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important;color:#fff !important;
  box-shadow:0 0 0 0 rgba(255,138,31,.55), 0 10px 30px -10px rgba(255,138,31,.45);
  opacity:0;
  transform:scale(.6) rotate(-3deg);
  animation:heroHighlightIn .9s cubic-bezier(.34,1.56,.64,1) 2s forwards, heroHighlightPulse 2.2s ease-in-out 3s infinite;
}
.hero h1.hero-title .hero-title-highlight .plus-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;border-radius:50%;
  background:var(--gradient-orange) !important;
  -webkit-text-fill-color:#fff !important;color:#fff !important;
  font-weight:900;font-size:1.1em;
  box-shadow:0 0 14px rgba(255,138,31,.8);
  animation:heroPlusSpin 15s linear 3.2s infinite;
}

@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroLineGrow{
  from{width:0}
  to{width:140px}
}
@keyframes heroSubPulse{
  0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent);transform:translateY(0) scale(1)}
  50%{filter:brightness(1.2) drop-shadow(0 0 14px rgba(255,138,31,.6));transform:translateY(0) scale(1.03)}
}
@keyframes heroHighlightIn{
  0%{opacity:0;transform:scale(.6) rotate(-3deg)}
  60%{opacity:1;transform:scale(1.08) rotate(1deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes heroHighlightPulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,138,31,.55), 0 10px 30px -10px rgba(255,138,31,.45);
    border-color:rgba(255,138,31,.65);
  }
  50%{
    box-shadow:0 0 0 18px rgba(255,138,31,0), 0 14px 40px -8px rgba(255,138,31,.7);
    border-color:rgba(255,138,31,1);
  }
}
@keyframes heroPlusSpin{
  to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion: reduce){
  .hero h1.hero-title .hero-title-main,
  .hero h1.hero-title .hero-title-sub,
  .hero h1.hero-title .hero-title-highlight,
  .hero h1.hero-title .hero-title-main::after,
  .hero h1.hero-title .hero-title-highlight .plus-icon{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
  .hero h1.hero-title .hero-title-main::after{width:140px}
}

/* ===== Scroll-reveal animations (sections, titles, cards) ===== */
@keyframes lpRevealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lpRevealZoom {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lpTitlePulse {
  0%,100% { text-shadow: 0 0 0 rgba(255,138,31,0); }
  50%     { text-shadow: 0 0 22px rgba(255,138,31,.55); }
}
@keyframes lpDividerGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes lpFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes lpBadgePop {
  0%   { opacity: 0; transform: scale(.6) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Initial hidden state for reveal targets */
.lp-reveal { opacity: 0; will-change: transform, opacity; }
.lp-reveal.is-visible { animation: lpRevealUp .9s cubic-bezier(.22,.9,.3,1) both; }
.lp-reveal-zoom.is-visible { animation: lpRevealZoom .8s cubic-bezier(.22,.9,.3,1) both; }

/* Section titles: animated gradient sweep + pulse on reveal */
.section-head h2.lp-reveal.is-visible,
.benefits > .container > h2.lp-reveal.is-visible {
  animation:
    lpRevealUp .9s cubic-bezier(.22,.9,.3,1) both,
    lpTitlePulse 3.4s ease-in-out 1s infinite;
}
.section-head h2 span,
.benefits > .container > h2 span {
  display: inline-block;
  background: linear-gradient(90deg,#ff8a1f,#ffb347,#ff6a00,#ff8a1f);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lpGradMove 5s linear infinite;
}
@keyframes lpGradMove { to { background-position: 300% 0; } }

/* Divider grows in */
.section-head .divider.lp-reveal.is-visible,
.benefits > .container > .divider.lp-reveal.is-visible {
  transform-origin: left center;
  animation: lpDividerGrow .9s cubic-bezier(.22,.9,.3,1) .15s both;
}

/* Staggered cards (pcards, benefits, features) */
.pcard.lp-reveal.is-visible,
.benefit.lp-reveal.is-visible,
.feature.lp-reveal.is-visible,
.dept-badge.lp-reveal.is-visible,
.pp-block.lp-reveal.is-visible,
.faq-item.lp-reveal.is-visible {
  animation: lpRevealUp .8s cubic-bezier(.22,.9,.3,1) both;
}
.pcard.lp-reveal:nth-child(2).is-visible,
.benefit.lp-reveal:nth-child(2).is-visible,
.feature.lp-reveal:nth-child(2).is-visible { animation-delay: .12s; }
.pcard.lp-reveal:nth-child(3).is-visible,
.benefit.lp-reveal:nth-child(3).is-visible,
.feature.lp-reveal:nth-child(3).is-visible { animation-delay: .24s; }
.pcard.lp-reveal:nth-child(4).is-visible,
.benefit.lp-reveal:nth-child(4).is-visible,
.feature.lp-reveal:nth-child(4).is-visible { animation-delay: .36s; }
.pcard.lp-reveal:nth-child(5).is-visible { animation-delay: .48s; }
.pcard.lp-reveal:nth-child(6).is-visible { animation-delay: .60s; }

/* Hover lift on cards */
.pcard, .benefit, .feature, .pp-block, .dept-badge, .faq-item {
  transition: transform .35s cubic-bezier(.22,.9,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.pcard:hover, .benefit:hover, .feature:hover, .pp-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(255,138,31,.45), 0 8px 22px -12px rgba(0,0,0,.45);
}
.dept-badge:hover { transform: translateY(-3px) scale(1.05); }

/* Featured pcard gently floats once visible */
.pcard-featured.is-visible { animation: lpRevealUp .8s cubic-bezier(.22,.9,.3,1) both, lpFloat 4.5s ease-in-out 1s infinite; }
.pcard-badge { animation: lpBadgePop .8s cubic-bezier(.34,1.56,.64,1) .4s both; }

/* Pricing pro block: zoom reveal */
.pricing-pro.lp-reveal.is-visible { animation: lpRevealZoom .9s cubic-bezier(.22,.9,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .lp-reveal, .lp-reveal-zoom { opacity: 1 !important; animation: none !important; }
  .section-head h2 span, .benefits > .container > h2 span { animation: none !important; }
}

/* ==========================
   FAQ — catégories & photos
========================== */
.faq-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  margin: 0 0 1.5rem;
}
.faq-tab{
  background: var(--bg-card);
  color: var(--fg);
  border:1px solid var(--border-strong);
  padding:.55rem 1.05rem;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.faq-tab:hover{ transform: translateY(-1px); border-color: var(--orange); }
.faq-tab.is-active{
  background: var(--gradient-orange);
  color:#fff;
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(255,138,31,.6);
}
.faq-cat-pill{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--orange);
  background: rgba(255,138,31,.12);
  border:1px solid rgba(255,138,31,.35);
  padding:.15rem .55rem;
  border-radius:999px;
  margin-right:.6rem;
  vertical-align: middle;
}
.faq-answer{ padding-top:.25rem; }
.faq-answer p{ margin:0 0 .6rem; }
.faq-photo{
  margin-top:.75rem;
  width:100%;
  max-width:420px;
  height:auto;
  border-radius: var(--radius);
  border:1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
}

/* ==========================
   Carte "Devis personnalisé"
========================== */
.pcard.pcard-cta{
  display:flex;
  align-items:stretch;
  justify-content:center;
  background: linear-gradient(160deg, rgba(255,138,31,.10), rgba(255,138,31,.02) 60%), var(--bg-card);
  border:1px dashed rgba(255,138,31,.45);
}
.pcard-cta-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.6rem;
  padding:.25rem;
  width:100%;
}
.pcard-cta-icon{
  width:46px; height:46px;
  border-radius:12px;
  display:grid; place-items:center;
  background: var(--gradient-orange);
  color:#fff;
  box-shadow: 0 10px 26px -12px rgba(255,138,31,.6);
}
.pcard-cta-icon svg{ width:24px; height:24px; }
.pcard.pcard-cta h3{ margin:0; }
.pcard.pcard-cta .pcard-cta{ margin-top:auto; }

/* ============================
   OFFRES (Pro & Particuliers)
   ============================ */
.offres {
  padding: 64px 0 32px;
  background:  rgba(255,255,255,0.03)
}
.offres-group { margin-top: 40px; }
.offres-group-title {
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: #e1a587;
}
.offres-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .5px;
  color: #ffffff;
}
.offres-badge.pro { background: linear-gradient(135deg, #1a1a1a, #3a3a3a); }
.offres-badge.particulier { background: linear-gradient(135deg, #ff6b1a, #ff8a3d); }

.offres-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.offre-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,138,31,.10), rgba(255,138,31,.02) 60%), var(--bg-card);
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  animation: offreFadeUp .55s ease forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.offre-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,107,26,.08), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.offre-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(255,107,26,.18);
  border-color: #ffb98a;
}
.offre-card:hover::before { opacity: 1; }

.offre-card-featured {
  border-color: #ff8a3d;
  box-shadow: 0 8px 24px rgba(255,107,26,.18);
}
.offre-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ff6b1a;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
}

.offre-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff1e6, #ffe0c7);
  color: #ff6b1a;
  transition: transform .35s ease;
}
.offre-icon svg { width: 24px; height: 24px; }
.offre-card:hover .offre-icon { transform: scale(1.08) rotate(-4deg); }

.offre-card h4 {
  margin: 4px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #f5ccb7;
}
.offre-card p {
  margin: 0;
  color: #625e5e;
  font-size: .95rem;
  line-height: 1.5;
  flex: 1;
}
.offre-cta {
  align-self: flex-start;
  margin-top: 8px;
}

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

@media (prefers-reduced-motion: reduce) {
  .offre-card { animation: none; opacity: 1; transform: none; }
  .offre-card:hover { transform: none; }
}

/* ==========================================================
   CONTACT SECTION — Premium redesign (fusionné depuis styles_contact.css)
   ========================================================== */

.contact-section{
  position:relative;
  overflow:hidden;
  padding:clamp(4rem,9vw,8rem) clamp(1rem,3vw,2rem);
  background:
    radial-gradient(900px 500px at 12% 15%, rgba(255,138,31,.14), transparent 60%),
    radial-gradient(800px 500px at 88% 85%, rgba(255,106,0,.10), transparent 60%),
    linear-gradient(180deg,#0a0f1c 0%,#0e1424 100%);
  isolation:isolate;
}

/* Orbes animées en fond */
.contact-section::before,
.contact-section::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  z-index:0;
  pointer-events:none;
}
.contact-section::before{
  width:520px;height:520px;
  top:-180px;right:-140px;
  background:rgba(255,138,31,.18);
  animation:contactOrb 11s ease-in-out infinite;
}
.contact-section::after{
  width:440px;height:440px;
  bottom:-180px;left:-120px;
  background:rgba(255,106,0,.14);
  animation:contactOrb 13s ease-in-out infinite reverse;
}
@keyframes contactOrb{
  0%,100%{transform:translate(0,0) scale(1)}
  50%   {transform:translate(20px,30px) scale(1.12)}
}

/* Grille discrète animée */
.contact-section .contact-head,
.contact-section .contact-card{position:relative;z-index:2}

/* Header */
.contact-section .contact-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 3.25rem;
}
.contact-section .contact-head h2{
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.08;
  background:linear-gradient(180deg,#ffffff 0%,#b9c4dc 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:contactFadeUp .9s cubic-bezier(.22,.9,.3,1) both;
}
.contact-section .contact-head h2::after{
  content:"";
  display:block;
  width:0;height:4px;
  margin:1.1rem auto 0;
  border-radius:999px;
  background:var(--gradient-orange);
  box-shadow:0 0 24px rgba(255,138,31,.55);
  animation:contactLine 1s cubic-bezier(.22,.9,.3,1) .4s forwards;
}
.contact-section .contact-head p{
  margin-top:1rem;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.75;
  animation:contactFadeUp .9s cubic-bezier(.22,.9,.3,1) .15s both;
}

/* Card glassmorphism + bordure animée */
.contact-section .contact-card{
  position:relative;
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:clamp(1.75rem,4vw,3rem);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(21,32,58,.85),rgba(17,26,46,.75));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.7),
    0 0 60px -20px rgba(255,138,31,.15);
  animation:contactCardIn 1s cubic-bezier(.22,.9,.3,1) .25s both;
  overflow:hidden;
  transition:transform .5s ease, box-shadow .5s ease;
}
.contact-section .contact-card::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg,
    rgba(255,138,31,.6),
    rgba(255,138,31,0) 30%,
    rgba(255,138,31,0) 70%,
    rgba(255,106,0,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
  opacity:.7;
  animation:contactBorder 7s linear infinite;
}
@keyframes contactBorder{
  0%  {filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}
.contact-section .contact-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.8),
    0 0 80px -16px rgba(255,138,31,.28);
}

/* Form */
.contact-section .contact-form{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
  position:relative;
  z-index:1;
}
.contact-section .contact-form .full{grid-column:1 / -1}
.contact-section .contact-form > div,
.contact-section .contact-form > .full{
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(14px);
  animation:contactFadeUp .7s cubic-bezier(.22,.9,.3,1) forwards;
}
.contact-section .contact-form > div:nth-child(1){animation-delay:.35s}
.contact-section .contact-form > div:nth-child(2){animation-delay:.45s}
.contact-section .contact-form > div:nth-child(3){animation-delay:.55s}
.contact-section .contact-form > div:nth-child(4){animation-delay:.65s}
.contact-section .contact-form > .full   {animation-delay:.75s}
.contact-section .contact-form .contact-submit{animation-delay:.85s}

.contact-section .contact-form label{
  margin-bottom:.55rem;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

.contact-section .contact-form input,
.contact-section .contact-form textarea{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:1rem 1.15rem;
  outline:none;
  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .35s ease,
    transform .3s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.contact-section .contact-form textarea{
  min-height:180px;
  resize:vertical;
  line-height:1.6;
}
.contact-section .contact-form input::placeholder,
.contact-section .contact-form textarea::placeholder{
  color:rgba(255,255,255,.32);
}
.contact-section .contact-form input:hover,
.contact-section .contact-form textarea:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,138,31,.28);
}
.contact-section .contact-form input:focus,
.contact-section .contact-form textarea:focus{
  border-color:rgba(255,138,31,.65);
  background:rgba(255,255,255,.07);
  box-shadow:
    0 0 0 4px rgba(255,138,31,.14),
    0 10px 30px -12px rgba(255,138,31,.35);
  transform:translateY(-2px);
}

/* Bouton premium avec effet sweep */
.contact-section .contact-submit{
  grid-column:1 / -1;
  position:relative;
  margin-top:.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  border:none;
  cursor:pointer;
  color:#fff;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.02em;
  padding:1.15rem 2rem;
  border-radius:16px;
  background:linear-gradient(135deg,#ff8a1f 0%,#f44607 100%);
  box-shadow:
    0 14px 34px -12px rgba(255,106,0,.55),
    inset 0 1px 0 rgba(255,255,255,.25);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.9,.3,1),
             box-shadow .35s ease;
  opacity:0;
  transform:translateY(14px);
  animation:contactFadeUp .7s cubic-bezier(.22,.9,.3,1) .85s forwards;
}
.contact-section .contact-submit::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.32) 50%,
    transparent 70%);
  transform:translateX(-100%);
  transition:transform .8s ease;
}
.contact-section .contact-submit:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:
    0 22px 46px -14px rgba(255,106,0,.7),
    0 0 30px rgba(255,138,31,.25);
}
.contact-section .contact-submit:hover::before{transform:translateX(100%)}
.contact-section .contact-submit:active{transform:translateY(-1px) scale(.99)}
.contact-section .contact-submit svg{
  width:22px;height:22px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.contact-section .contact-submit:hover svg{
  transform:translateX(6px) rotate(-12deg);
}

.contact-section .contact-note{
  margin-top:1.25rem;
  text-align:center;
  color:rgba(255,255,255,.55);
  font-size:.92rem;
}

/* Animations */
@keyframes contactFadeUp{
  from{opacity:0;transform:translateY(28px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes contactCardIn{
  from{opacity:0;transform:translateY(40px) scale(.98)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
@keyframes contactLine{
  from{width:0}
  to  {width:120px}
}

/* Responsive */
@media (max-width:720px){
  .contact-section{padding:5rem 1rem}
  .contact-section .contact-card{
    padding:1.75rem 1.25rem;
    border-radius:22px;
  }
  .contact-section .contact-form{
    grid-template-columns:1fr;
    gap:1.1rem;
  }
  .contact-section .contact-submit{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .contact-section::before,
  .contact-section::after,
  .contact-section .contact-card::before{animation:none !important}
  .contact-section .contact-head h2,
  .contact-section .contact-head p,
  .contact-section .contact-card,
  .contact-section .contact-form > div,
  .contact-section .contact-form > .full,
  .contact-section .contact-submit{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .contact-section .contact-head h2::after{width:120px;animation:none}
}

/* ===========================
   Contact – layout 2 colonnes (info + formulaire)
   =========================== */
.contact-section .contact-grid{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  align-items:stretch;
}
@media (min-width: 960px){
  .contact-section .contact-grid{
    grid-template-columns:minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap:2.25rem;
  }
  .contact-section .contact-card{ max-width:none; margin:0; }
}

/* Carte info à gauche – même style verre que le formulaire */
.contact-section .contact-info-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding:clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(21,32,58,.85),rgba(17,26,46,.75));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  opacity:0;
  transform:translateY(24px);
  animation:contactFadeUp .8s cubic-bezier(.22,.8,.32,1) forwards;
  animation-delay:.2s;
}
.contact-section .contact-info-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,107,53,.55), rgba(255,255,255,.06) 40%, rgba(255,107,53,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  opacity:.8;
}
.contact-section .contact-info-card:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}
.contact-section .contact-info-card .logo{
  display:flex; justify-content:center;
  padding-bottom:1.25rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.contact-section .contact-info-card .logo-img{ max-height:90px; width:auto; }
.contact-section .contact-info-card .contact-info{
  color:var(--fg);
  display:flex; flex-direction:column; gap:1.1rem;
}
.contact-section .contact-info-card .contact-info a,
.contact-section .contact-info-card .contact-info .row{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:.65rem .85rem;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  transition:all .25s ease;
  text-decoration:none; color:inherit;
}
.contact-section .contact-info-card .contact-info a:hover{
  background:rgba(255,107,53,.08);
  border-color:rgba(255,107,53,.3);
  transform:translateX(4px);
}
.contact-section .contact-info-card .contact-info svg{
  width:22px; height:22px; color:var(--orange); flex-shrink:0; margin-top:2px;
}
.contact-section .contact-info-card .contact-info .addr .name{ font-weight:800; }
.contact-section .contact-info-card .contact-info .addr .lines{ font-size:.9rem; color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  .contact-section .contact-info-card{ animation:none; opacity:1; transform:none; }
  .contact-section .contact-info-card:hover{ transform:none; }
  .contact-section .contact-info-card .contact-info a:hover{ transform:none; }
}

/* pour téléphone*/

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.icon-orange {
  color: rgb(250, 132, 5);
}
/* Astérisque champ obligatoire */
.contact-form .req{
  color:#ff4d4d;
  margin-left:4px;
  font-weight:700;
}

/* footer*/
.site-footer {
    background: #1f1f1f;
    color: #fff;
    text-align: center;
    padding: 25px 15px;
    font-size: 0.95rem;
}

.footer-slogan {
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.footer-brand {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.brand-orange {
    color: orangered;
    font-weight: 700;
}

.footer-separator {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin: 15px auto;
    max-width: 500px;
}

.footer-links {
    margin-bottom: 15px;
}

.footer-links a {
    color: #ddd;
    text-decoration: none;
    margin: 0 5px;
}

.footer-links a:hover {
    color: orangered;
}

.footer-copyright {
    color: #aaa;
    font-size: 0.85rem;
}

  /* === Bannière cookies LocPano === */
  #locpano-cookie-banner{
    position:fixed;
    left:50%;
    bottom:1.25rem;
    transform:translateX(-50%);
    width:min(640px, calc(100% - 2rem));
    background:#15203a;
    color:#fbf6f1;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    box-shadow:0 20px 60px -10px rgba(0,0,0,.55);
    padding:1.25rem 1.4rem;
    z-index:9999;
    font-family:'Manrope',system-ui,sans-serif;
    line-height:1.5;
    display:none;
    animation:lpCookieIn .35s ease;
  }
  #locpano-cookie-banner.is-visible{display:block;}
  @keyframes lpCookieIn{
    from{opacity:0;transform:translate(-50%,20px);}
    to  {opacity:1;transform:translate(-50%,0);}
  }
  #locpano-cookie-banner h3{
    margin:0 0 .35rem;
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:-.01em;
  }
  #locpano-cookie-banner p{
    margin:0 0 1rem;
    font-size:.92rem;
    color:#cfd6e6;
  }
  #locpano-cookie-banner a{
    color:#ff8a1f;
    text-decoration:underline;
  }
  .lp-cookie-actions{
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
  }
  .lp-cookie-btn{
    flex:1 1 140px;
    padding:.7rem 1rem;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    background:transparent;
    color:#fbf6f1;
    font-weight:700;
    font-size:.92rem;
    cursor:pointer;
    transition:all .2s ease;
    font-family:inherit;
  }
  .lp-cookie-btn:hover{background:rgba(255,255,255,.06);}
  .lp-cookie-btn.lp-accept{
    background:linear-gradient(135deg,#ff8a1f 0%,#f44607 100%);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 20px rgba(255,106,0,.35);
  }
  .lp-cookie-btn.lp-accept:hover{filter:brightness(1.08);}
  @media (max-width:480px){
    #locpano-cookie-banner{bottom:0;left:0;right:0;transform:none;width:100%;border-radius:16px 16px 0 0;}
  }