:root{
  --brandCyan:#00A0E0;
  --brandNavy:#244570;
  --brandGold:#FACA0B;
  --brandSky:#80BFDA;

  --bg1:#EEF8FF;
  --bg2:#F3F7FF;

  --ink:#0f172a;
  --muted:#4B6076;

  --accent:var(--brandCyan);
  --accentDeep:var(--brandNavy);
  --star:var(--brandGold);

  --container:1120px;
  --pad:clamp(12px, 2vw, 18px);

  --r:22px;
  --shadow:0 26px 80px rgba(2,6,23,.14);
  --shadow2:0 14px 40px rgba(2,6,23,.10);

  --line:rgba(36,69,112,.14);

  --glassA:rgba(255,255,255,.76);
  --glassB:rgba(255,255,255,.46);

  /* Header heights (for fixed topbar) */
  --appbarH:100px;
}
@media (min-width:981px){
  :root{ --appbarH:120px; }
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  padding-top: var(--appbarH); /* IMPORTANT: header fixed */
  font-family: Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
  font-size:14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--container), calc(100% - 2*var(--pad))); margin:0 auto; }

.bgfx{
  position:fixed; inset:-40px;
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(0,160,224,.20), transparent 60%),
    radial-gradient(900px 540px at 88% 14%, rgba(36,69,112,.14), transparent 58%),
    radial-gradient(800px 500px at 45% 80%, rgba(250,202,11,.10), transparent 60%);
  pointer-events:none;
  z-index:-1;
}

.glass{
  background:linear-gradient(180deg,var(--glassA),var(--glassB));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Simple helpers (used by gallery view) */
.section{ padding: 22px 0 26px; }
.panel{ padding: 16px; }
.center{ display:flex; justify-content:center; margin-top:16px; }
.h1{ margin:0; font-weight:700; font-size: clamp(18px, 2.0vw, 28px); }
.muted{ color: rgba(15,23,42,.70); font-weight:700; }
.small{ font-size:12px; }

/* =========================================================
   VISIBILITÉ : mobile/pc sans casser le layout
========================================================= */
.only-pc{ display:none; }
.only-mobile{ display:block; }
@media (min-width: 981px){
  .only-pc{ display:block; }
  .only-mobile{ display:none; }
}

/* =========================
   HEADER (FIXED: always visible)
========================= */
.appbar{
  position:fixed; /* IMPORTANT: never disappears */
  top:0; left:0; right:0;
  z-index:500;
  background:linear-gradient(180deg, rgba(36,69,112,.98), rgba(20,40,70,.96));
  border-bottom:3px solid rgba(250,202,11,.85);
  box-shadow:0 10px 30px rgb(26, 26, 26);
  height:var(--appbarH);
}

.appbar-inner{
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr 56px;
  align-items:center;
  gap:10px;
  height:100%;
  padding:10px 0;
}

/* PC-only actions hidden by default (mobile) */
.appbar-pc-quote,
.appbar-pc-phone{
  display:none;
}

.appbar-btn{
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.appbar-burger{
  width:20px; height:12px; position:relative; display:block;
}
.appbar-burger::before{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:rgba(255,255,255,.92); border-radius:2px;
  box-shadow:0 5px 0 rgba(255,255,255,.92), 0 10px 0 rgba(255,255,255,.92);
  top:0;
}

.appbar-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  height:46px;
}

.appbar-logo{
  width:auto;
  max-width:none;
  height:34px;
  margin-top:15px;
  display:block;
  filter:drop-shadow(0 10px 16px rgba(2,6,23,.18));
}

/* Mobile : tes valeurs d’avant */
@media (max-width: 980px){
  .appbar-logo{
    width:60vw;
    max-width:320px;
    height:100px;
    margin-top:40px;
  }
}

/* NAV dropdown (mobile) */
.appnav{
  position:absolute;
  left:0; right:0;
  top: var(--appbarH);
  display:none;
  flex-direction:column;
  gap:10px;
  padding:12px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(36,69,112,.14);
  border-radius:0 0 22px 22px;
  box-shadow:0 22px 70px rgba(2,6,23,.16);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.appnav.is-open{ display:flex; }

.appnav-links{ display:flex; flex-direction:row; gap:10px; flex-wrap:wrap; justify-content:center; }
.appnav-link{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(36,69,112,.10);
  font-weight:700;
  color:rgba(36,69,112,.90);
}
.appnav-link.is-active{
  background:rgba(0,160,224,.12);
  border-color:rgba(0,160,224,.28);
  color:rgba(36,69,112,.92);
}

.appnav-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.appnav-cta{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(36,69,112,.12);
  background:rgba(255,255,255,.80);
  font-weight:700;
  text-align:center;
  color: rgba(36,69,112,.92);
}
.appnav-quote{
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));
  color:#fff;
  font-weight:700;
  text-align:center;
  box-shadow:0 18px 52px rgba(0,160,224,.22);
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  padding:10px 14px;
  border:1px solid rgba(36,69,112,.12);
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  border-color:rgba(0,160,224,.28);
  background:linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));
  color:#fff;
  box-shadow:0 18px 52px rgba(0,160,224,.24);
}
.btn-ghost{ background:rgba(255,255,255,.78); }

/* =========================================================
   HERO (MOBILE) : TON STYLE D’ORIGINE
========================================================= */
.hero-mock{ padding:0; }
.hero-wrap{ display:grid; grid-template-columns:1fr; gap:0; }

.hero-phone{
  position:relative;
  overflow:hidden;
  border-radius:0;
  box-shadow:var(--shadow);
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - var(--appbarH));
}
@media (max-width:980px){
  .hero-phone{ min-height: calc(100svh - var(--appbarH)); }
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.26) 100%),
    url("/assets/img/header/header_plaquiste2.png") center/cover no-repeat;
  transform:scale(1.00);
  filter: saturate(0.20) brightness(1.08) contrast(1.06);
}
@media (max-width: 980px){
  .hero-bg{
    background-size:auto 100%;
    background-position:55% center;
    background-repeat:no-repeat;
    transform:none;
    filter: saturate(0.40) brightness(1.08) contrast(1.06);
  }
}

.hero-overlay{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;
  padding:16px 0 18px;
  width:min(var(--container), calc(100% - 2*var(--pad)));
  margin:0 auto;
  margin-top:40px;
}

.hero-titleblock{ text-align:center; padding-top:6px; width:100%; }

.hero-subtitle{
  margin-top:0;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(36,69,112,.92);
  font-size:18px;
  text-shadow:0 10px 26px rgba(0,0,0,.28);
}

.hero-services{
  margin-top:8px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(15,23,42,.86);
  font-size:12px;
  text-shadow:0 10px 26px rgba(0,0,0,.24);
  text-transform:uppercase;
}

/* Google pill */
.hero-google{
  margin:14px auto 0;
  width:min(680px, 92%);
  height:56px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  color:rgba(15,23,42,.88);
}
.hero-google .gmain{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.hero-google .gmark-img{ width:35px; height:35px; display:block; flex:0 0 auto; }
.hero-google .gstars{ color:var(--star); letter-spacing:3px; font-size:45px; line-height:1; margin-bottom:3px; }
.hero-google .gscore{ font-weight:700; font-size:25px; white-space:nowrap; }
.hero-google .garrow{
  width:38px; height:38px;
  border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));
  box-shadow:0 12px 30px rgba(0,160,224,.18);
  color:#fff;
  font-size:24px;
}

/* split */
.hero-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:stretch;
  margin-top:10px;
}
@media (max-width:980px){
  .hero-split{ grid-template-columns: 1fr; }
}

/* chips */
.hero-list{
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.hero-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 50px 10px 14px;
  color:rgba(15,23,42,.86);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:13px;
}
.hero-row + .hero-row{ border-top:1px solid rgba(36,69,112,.14); }
.hero-row-star{
  color:var(--star);
  font-size:30px;
  line-height:1;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.10));
}

/* devis container */
.hero-cta{
  background:rgba(255,255,255,.60);
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.18);
  padding:10px;
  display:grid;
  gap:12px;
}

/* CTA devis button */
.hero-cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:54px;
  border-radius:16px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(36,69,112,.14);
  color:rgba(36,69,112,.92);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 14px 38px rgba(2,6,23,.12);
  transition:transform .16s ease, filter .16s ease;
  font-size:13px;
}
.hero-cta-btn:hover{ transform:translateY(-1px); filter:brightness(1.02); }
.hero-cta-btn:active{ transform:translateY(0); }
.hero-cta-btn .arrow{ font-size:22px; transform:translateY(-1px); }

.hero-cta-btn--alt{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.55);
  color: rgba(15,23,42,.88);
}

/* SLIDE TO CALL */
.call-slide{
  width:100%;
  user-select:none;
  -webkit-user-select:none;
  touch-action: pan-y;
}
.call-track{
  position:relative;
  height:54px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(36,69,112,.14);
  box-shadow:0 10px 30px rgba(2,6,23,.10);
  overflow:hidden;
}
.call-hint{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 16px;
  color:rgba(36,69,112,.92);
  font-weight:700;
  text-align:center;
  pointer-events:none;
}
.call-text{ font-size:20px; }
.call-knob{
  position:absolute;
  top:0; left:0;
  width:62px; height:100%;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));
  box-shadow:0 12px 30px rgba(0,160,224,.22);
  display:grid;
  place-items:center;
  color:#fff;
  transform:translateX(var(--callX, 0px));
  transition:transform .12s ease;
  will-change: transform;
}
.call-arrow{ font-size:34px; line-height:1; animation:none !important; }

/* Mobile tuning */
@media (max-width: 980px){
  .hero-list,
  .hero-cta{
    width: min(90%, 520px);
    margin-left:auto;
    margin-right:auto;
  }
  .hero-google{
    width: min(100%, 520px);
    height:54px;
  }
  .hero-google .gmark-img{ width:26px; height:26px; }
  .hero-google .gstars{ font-size:30px; letter-spacing:2.5px; margin-bottom:5px; }
  .hero-google .gscore{ font-size:17px; }
  .hero-google .garrow{ width:36px; height:36px; font-size:23px; }

  .call-track{ height:50px; }
  .call-knob{ width:56px; }
  .call-arrow{ font-size:32px; }
}

/* =========================================================
   KICKER PANEL (Home + Gallery)
========================================================= */
.home-sec-head{ text-align:center; margin: 0 0 14px; }

.kicker-panel{
  display:inline-block;
  padding:12px 16px;
  border-radius:22px;
  box-shadow: var(--shadow2);
}

.home-sec-kicker{
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(36,69,112,.90);
  font-size: 12px;
  line-height:1.35;

  position:relative;
  display:inline-block;
  padding-bottom:10px;
  text-align:center;
}

.home-sec-kicker::after{
  content:"";
  display:block;
  width:96px; /* mobile */
  height:2px;
  margin:10px auto 0;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(0,160,224,.15),
    rgba(250,202,11,.95),
    rgba(0,160,224,.15)
  );
  box-shadow:0 10px 24px rgba(2,6,23,.10);
}
@media (min-width:981px){
  .home-sec-kicker::after{ width:110px; }
}

/* =========================================================
   PC HOME : hero + 2 cards
========================================================= */
@media (min-width: 981px){

  /* PC header actions (requires layout markup) */
  .appbar-inner{
    grid-template-columns: 1fr auto 1fr !important;
    padding: 10px 0;
  }

  .appbar-btn{ display:none !important; }
  .appnav{ display:none !important; }

  .appbar-brand{ height:auto; }
  .appbar-logo{
    height:auto !important;
    width:auto;
    max-height:130px;
    min-width:300px !important;
    margin:0 !important;
    filter: drop-shadow(0 14px 24px rgba(2,6,23,.22));
  }

  .appbar-pc-quote,
  .appbar-pc-phone{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:46px;
    padding:0 18px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.20);
    box-shadow: 0 18px 42px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.22);
    position:relative;
    top:-2px;
    border-radius:10px;
  }

  .appbar-pc-quote{
    justify-self:end;
    margin-right:50px;
    background:linear-gradient(135deg, rgba(0,160,224,.95), rgba(36,69,112,.95));
    color:#fff;
  }
  .appbar-pc-phone{
    justify-self:start;
    margin-left:50px;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    color:rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .appbar-pc-arrow{ margin-left:10px; font-size:20px; line-height:1; }

  .home-hero{
    position:relative;
    overflow:hidden;
    padding:26px 0 26px;
  }
  .home-hero-bg{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.26)),
      url("/assets/img/header/header_plaquiste2.png") right 50% / cover no-repeat;
    filter:saturate(.40) brightness(1.08) contrast(1.06);
    transform:scale(1.02);
  }
  .home-hero-inner{
    position:relative;
    z-index:1;
    display:grid;
    gap:16px;
    margin-top:30px;
    margin-bottom:20px;
  }

  .home-hero-top{
    padding:18px 18px 16px;
    text-align:center;
    box-shadow:var(--shadow);
  }

  .home-hero-toprow{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:center;
  }

  .home-rating{
    width:min(680px, 100%);
    height:58px;
    margin:0 auto;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(255,255,255,.70);
    border-radius:999px;
    box-shadow:0 18px 60px rgba(0,0,0,.18);
  }
  .home-rating-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:0;
  }
  .home-rating-logo{ width:34px; height:34px; display:block; flex:0 0 auto; margin-top:4px; }
  .home-rating-stars{ color:var(--star); letter-spacing:3px; font-size:44px; line-height:1; margin-bottom:2px; }
  .home-rating-score{ font-weight:700; font-size:24px; white-space:nowrap; }
  .home-rating-arrow{
    width:40px; height:40px;
    border-radius:999px;
    display:grid; place-items:center;
    background:linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));
    box-shadow:0 12px 30px rgba(0,160,224,.18);
    color:#fff;
    font-size:24px;
  }

  /* 2 cards : 40 / 55 + gap 10 */
  .home-hero-grid{
    display:grid;
    grid-template-columns: 40fr 55fr;
    gap:10px;
    align-items:stretch;
    justify-content:center;
  }

  .home-card{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:320px;
  }

  .home-card-title{
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(36,69,112,.94);
    font-size:12px;
    text-align:center;
    position:relative;
    padding-bottom:16px;
    margin-bottom:2px;
  }

  /* separator + diamond */
  .home-card-title::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
    width:72%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(250,202,11,.95),
      rgba(0,160,224,.35),
      transparent
    );
    box-shadow:0 10px 26px rgba(2,6,23,.10);
  }
  .home-card-title::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:6px;
    transform:translate(-50%, 50%) rotate(45deg);
    width:10px;
    height:10px;
    border-radius:3px;
    background:linear-gradient(135deg, rgba(250,202,11,.95), rgba(250,202,11,.55));
    border:1px solid rgba(36,69,112,.18);
    box-shadow:0 10px 24px rgba(250,202,11,.18);
  }

  .home-why{
    background:rgba(255,255,255,.62);
    border:1px solid rgba(36,69,112,.12);
    border-radius:18px;
    overflow:hidden;
  }
  .home-why-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:rgba(15,23,42,.86);
    font-size:12px;
  }
  .home-why-row + .home-why-row{ border-top:1px solid rgba(36,69,112,.14); }
  .home-why-ico{ color:var(--star); font-size:22px; line-height:1; filter: drop-shadow(0 8px 14px rgba(0,0,0,.10)); }

  .home-trust{ display:grid; gap:10px; }
  .home-trust-item{
    display:flex;
    gap:10px;
    align-items:center;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(36,69,112,.10);
  }
  .home-trust-ico{
    width:40px; height:40px;
    display:grid; place-items:center;
    border-radius:12px;
    background:rgba(0,160,224,.10);
    border:1px solid rgba(0,160,224,.20);
    font-size:18px;
    flex:0 0 auto;
  }
  .home-trust-big{ font-weight:700; color:rgba(15,23,42,.90); line-height:1.1; }
  .home-trust-small{ margin-top:2px; font-weight:700; color:rgba(15,23,42,.72); font-size:12px; }
}

/* =========================================================
   HOME SECTION + galleries
========================================================= */
.home-section{ padding: 18px 0 26px; }

.home-gallery-actions{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

/* HOME grid (PC 3 / mobile 2) */
.home-gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
}
@media (max-width: 980px){
  .home-gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
}

.home-gitem{
  padding:10px;
  border-radius:22px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.home-gitem:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: var(--shadow);
}
.home-gitem img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
  display:block;
  border:1px solid rgba(36,69,112,.12);
}
@media (min-width: 981px){
  .home-gitem img{ height:240px; }
}

/* PAGE /nos-realisations : PC 4 / mobile 3 */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap:12px; }
}
@media (max-width: 420px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}

.gallery-item{
  padding:10px;
  border-radius:22px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.gallery-item:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: var(--shadow);
}
.gallery-item img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:16px;
  display:block;
  border:1px solid rgba(36,69,112,.12);
}
@media (max-width: 980px){
  .gallery-item img{ height:220px; }
}

/* =========================================================
   LIGHTBOX
========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
}
.lightbox[hidden]{ display:none !important; }

.lb-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.70);
}

.lb-inner{
  position:relative;
  width:min(980px, calc(100% - 24px));
  padding:12px;
  border-radius:22px;
  box-shadow: 0 40px 120px rgba(2,6,23,.45);
}

.lb-img{
  width:100%;
  height:min(78vh, 720px);
  object-fit:contain;
  display:block;
  border-radius:16px;
  background:rgba(255,255,255,.06);
}

.lb-close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.lb-nav.prev{ left:10px; }
.lb-nav.next{ right:10px; }

@media (prefers-reduced-motion: reduce){
  .btn, .hero-cta-btn, .home-gitem, .gallery-item{ transition:none !important; }
  .call-knob{ transition:none !important; }
}
@media (max-width: 560px){
  .lb-nav{ width:42px; height:42px; border-radius:14px; font-size:30px; }
  .lb-img{ height: min(72vh, 560px); }
}

/* Footer simple */
.site-footer{
  padding:14px 0;
  border-top:1px solid rgba(0, 0, 0, 0.12);
  background:rgba(255,255,255,.34);
}
.site-footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight:700;
  font-size:14px;
  color:rgba(15,23,42,.78);
  text-align:center;
}
.site-footer-link{
  font-weight:700;
  color:rgba(36,69,112,.92);
}
/* =========================================================
   TRUST BADGES + FINAL CTA (home)
========================================================= */
.trust-section{
  padding: 10px 0 26px;
}

.trust-panel{
  padding: 16px;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.trust-sub{
  margin: 4px 0 14px;
  text-align:center;
  color: rgba(15,23,42,.72);
  font-weight:700;
  line-height: 1.35;
}

.trust-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.trust-card{
  padding: 14px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  gap: 12px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.trust-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.01);
  box-shadow: var(--shadow);
}

.trust-ico{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color: rgba(36,69,112,.95);
  background: rgba(0,160,224,.10);
  border: 1px solid rgba(0,160,224,.22);
  box-shadow: 0 12px 28px rgba(0,160,224,.12);
  flex: 0 0 auto;
}
.trust-ico svg{
  width: 30px;
  height: 30px;
}

.trust-name{
  font-weight:700;
  color: rgba(15,23,42,.90);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  line-height: 1.1;
}
.trust-desc{
  margin-top: 4px;
  font-weight:700;
  color: rgba(15,23,42,.72);
  font-size: 12px;
  line-height: 1.25;
}

.trust-actions{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Final CTA block */
.final-cta{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  text-align:center;
}

.final-title{
  margin: 0;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(36,69,112,.94);
  font-size: 13px;
}
.final-sub{
  margin: 10px 0 14px;
  color: rgba(15,23,42,.72);
  font-weight:700;
  line-height: 1.35;
}
.final-actions{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .trust-grid{ grid-template-columns: 1fr; }
}
.home-sec-head{ width:100%; }
.home-sec-head .kicker-panel{ display:block; width:100%; max-width:none; }
.home-sec-kicker{ display:block; width:100%; text-align:center; }

/* MOBILE: pas de burger + logo parfaitement centré */
@media (max-width: 980px){
  .appbar-btn{ display:none !important; }
  .appnav{ display:none !important; }

  .appbar-inner{
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  .appbar-brand{
    justify-self: center;
  }
}
/* =========================================================
   CONTACT PAGE
========================================================= */
.contact-page{ padding-top: 18px; }
.contact-head{ text-align:center; margin: 0 0 14px; }

.contact-split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}

.contact-panel{
  box-shadow: var(--shadow);
}

.contact-panel-head{
  margin-bottom: 10px;
  text-align:left;
}

.contact-h2{
  margin: 0;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(36,69,112,.94);
  font-size: 13px;
}

.contact-hint{ margin-top:6px; }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 10px 0 12px;
}

.field{ display:block; }
.label{
  display:block;
  margin: 0 0 6px;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(15,23,42,.78);
  font-size: 12px;
}
.label b{ color: rgba(0,160,224,.95); }

.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(36,69,112,.16);
  background: rgba(255,255,255,.78);
  padding: 12px 12px;
  font-weight:700;
  color: rgba(15,23,42,.88);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.contact-form textarea{ resize: vertical; min-height: 140px; }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(0,160,224,.34);
  box-shadow: 0 18px 50px rgba(0,160,224,.14);
  filter: brightness(1.01);
}

.contact-actions{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-wide{ width:100%; }

.contact-legal{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(36,69,112,.14);
}

/* Alerts */
.alert{
  padding: 12px 12px;
  border-radius: 16px;
  font-weight:700;
  letter-spacing: .02em;
  margin-bottom: 12px;
  border: 1px solid rgba(36,69,112,.14);
}
.alert.is-success{
  background: rgba(0,160,224,.10);
  border-color: rgba(0,160,224,.24);
  color: rgba(36,69,112,.95);
}
.alert.is-error{
  background: rgba(250,202,11,.14);
  border-color: rgba(250,202,11,.45);
  color: rgba(36,69,112,.95);
}

/* Right column */
.contact-aside{
  display:grid;
  gap: 14px;
}

.contact-cards{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}

.contact-card{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.contact-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.01);
  box-shadow: var(--shadow);
}

.cc-ico{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(0,160,224,.10);
  border: 1px solid rgba(0,160,224,.22);
  font-size: 18px;
  flex: 0 0 auto;
}

.cc-title{
  font-weight:700;
  color: rgba(15,23,42,.90);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  line-height: 1.1;
}
.cc-sub{
  margin-top: 3px;
  font-weight:700;
  color: rgba(15,23,42,.72);
  font-size: 12px;
  line-height: 1.25;
  word-break: break-word;
}
.cc-arrow{
  margin-left:auto;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));
  box-shadow: 0 12px 30px rgba(0,160,224,.18);
  color:#fff;
  font-size: 24px;
}

/* Map */
.map-wrap{
  margin-top: 10px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(36,69,112,.14);
  background: rgba(255,255,255,.60);
}
.map-wrap iframe{
  display:block;
  width:100%;
  height: 320px;
  border:0;
}

.map-actions{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

/* Notice */
.notice{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(36,69,112,.12);
}
.notice-title{
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(36,69,112,.94);
  font-size: 12px;
}
.notice-text{
  margin-top: 6px;
  font-weight:700;
  color: rgba(15,23,42,.72);
  font-size: 12px;
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 980px){
  .contact-split{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .contact-actions{ grid-template-columns: 1fr; }
  .map-wrap iframe{ height: 280px; }
}
/* =========================================================
   CONTACT PAGE (override propre)
========================================================= */
.contact-page{ padding-top: 18px; }

/* Le header "CONTACT" doit prendre toute la largeur */
.contact-head{ margin: 0 0 14px; }
.contact-head .kicker-panel{
  display:block;
  width:100%;
  max-width:none;
  text-align:center;
}

/* Layout */
.contact-split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}

.contact-panel{ box-shadow: var(--shadow); }

.contact-panel-head{
  margin-bottom: 10px;
  text-align:left;
}

.contact-h2{
  margin: 0;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(36,69,112,.94);
  font-size: 13px;
}

.contact-hint{ margin-top:6px; }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 10px 0 12px;
}

.field{ display:block; }
.label{
  display:block;
  margin: 0 0 6px;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(15,23,42,.78);
  font-size: 12px;
}
.label b{ color: rgba(0,160,224,.95); }

.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(36,69,112,.16);
  background: rgba(255,255,255,.78);
  padding: 12px 12px;
  font-weight:700;
  color: rgba(15,23,42,.88);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.contact-form textarea{ resize: vertical; min-height: 140px; }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(0,160,224,.34);
  box-shadow: 0 18px 50px rgba(0,160,224,.14);
  filter: brightness(1.01);
}

.contact-actions{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-wide{ width:100%; }

/* Alerts */
.alert{
  padding: 12px 12px;
  border-radius: 16px;
  font-weight:700;
  letter-spacing: .02em;
  margin-bottom: 12px;
  border: 1px solid rgba(36,69,112,.14);
}
.alert.is-success{
  background: rgba(0,160,224,.10);
  border-color: rgba(0,160,224,.24);
  color: rgba(36,69,112,.95);
}
.alert.is-error{
  background: rgba(250,202,11,.14);
  border-color: rgba(250,202,11,.45);
  color: rgba(36,69,112,.95);
}

/* Right column */
.contact-aside{
  display:grid;
  gap: 14px;
}

.contact-cards{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}

.contact-card{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.contact-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.01);
  box-shadow: var(--shadow);
}

.cc-ico{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(0,160,224,.10);
  border: 1px solid rgba(0,160,224,.22);
  font-size: 18px;
  flex: 0 0 auto;
}

.cc-title{
  font-weight:700;
  color: rgba(15,23,42,.90);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  line-height: 1.1;
}
.cc-sub{
  margin-top: 3px;
  font-weight:700;
  color: rgba(15,23,42,.72);
  font-size: 12px;
  line-height: 1.25;
  word-break: break-word;
}
.cc-arrow{
  margin-left:auto;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(36,69,112,.98), rgba(0,160,224,.98));
  box-shadow: 0 12px 30px rgba(0,160,224,.18);
  color:#fff;
  font-size: 24px;
}

/* Map */
.map-wrap{
  margin-top: 10px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(36,69,112,.14);
  background: rgba(255,255,255,.60);
}
.map-wrap iframe{
  display:block;
  width:100%;
  height: 320px;
  border:0;
}

/* Responsive */
@media (max-width: 980px){
  .contact-split{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .contact-actions{ grid-template-columns: 1fr; }
  .map-wrap iframe{ height: 280px; }
}
.home-trust-ico{
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(120, 190, 255, .10);
  border: 1px solid rgba(120, 190, 255, .25);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  color: #1f3b66; /* si tu veux garder ton currentColor sombre */
}

.home-trust-ico .ico{
  width: 30px;
  height: 30px;
  display: block;
}

.admin-fab{
  position:fixed;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--glassA),var(--glassB));
  border:1px solid var(--line);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 900;
  font-size:18px;
  color: rgba(36,69,112,.95);
}
.admin-fab:hover{ transform: translateY(-1px); }

.real-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}
@media (min-width:981px){
  .real-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.real-card{ overflow:hidden; border-radius:22px; }
.real-cover{ position:relative; padding:10px; }
.real-cover img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:16px;
  display:block;
  border:1px solid rgba(36,69,112,.12);
}
@media (min-width:981px){
  .real-cover img{ height:240px; }
}
.real-placeholder{
  height:220px;
  border-radius:16px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(36,69,112,.12);
}
.real-badge{
  position:absolute;
  right:18px;
  top:18px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  background:rgba(36,69,112,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(2,6,23,.16);
  font-size:12px;
}
.real-meta{ padding: 0 12px 12px; }
.real-title{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: rgba(36,69,112,.94);
  font-size:12px;
}
.real-desc{
  margin-top:6px;
  font-weight:700;
  color: rgba(15,23,42,.72);
  font-size:12px;
  line-height:1.35;
}

.home-reals{
  display:grid;
  grid-template-columns: 1fr; /* mobile = 1 par ligne */
  gap:14px;
  margin-top:14px;
}

@media (min-width:981px){
  .home-reals--pc{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* PC = 2 par ligne */
  }
}

.real-card{
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:22px;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.real-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.01);
  box-shadow: var(--shadow);
}

.real-cover{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(36,69,112,.12);
}
.real-cover img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
@media (max-width:980px){
  .real-cover img{ height:220px; }
}

.real-badge{
  position:absolute;
  right:10px;
  top:10px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(36,69,112,.14);
  font-weight:700;
  font-size:12px;
  color: rgba(36,69,112,.92);
}

.real-meta{
  text-align:left;
  padding:0 4px 2px;
}
.real-title{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:12px;
  color: rgba(36,69,112,.94);
}
.real-sub{
  margin-top:6px;
  font-weight:700;
  color: rgba(15,23,42,.72);
  font-size:12px;
}
/* ✅ Cadre premium pour les CTA en bas de la réalisation */
.cta-panel{
  margin-top:14px;
  padding:14px;
}

.cta-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 720px){
  .cta-panel{ padding:12px; }
  .cta-actions{
    justify-content:stretch;
  }
  .cta-actions .btn{
    width:100%;
    justify-content:center;
  }
}
.site-footer{
  position:relative; /* ✅ base pour le cadenas en absolute */
}

/* Le contenu du footer reste centré */
.site-footer-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
}

/* ✅ Cadenas : à fond à droite (viewport), sans impacter la hauteur */
.site-footer-lock{
  position:absolute;
  right:12px;                 /* colle à droite */
  top:50%;
  transform: translateY(-50%);
  text-decoration:none;

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

  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(36,69,112,.14);
  background: rgba(255,255,255,.65);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

.site-footer-lock:hover{
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.14);
}

.site-footer-lock:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(0,160,224,.18), 0 14px 30px rgba(2,6,23,.14);
}

/* Mobile: on garde ABSOLUTE (donc ça ne pousse jamais le footer) */
@media (max-width: 520px){
  .site-footer-lock{
    right:10px;
    width:32px;
    height:32px;
    border-radius:11px;
  }
  .site-footer-sep{ display:none; }
}
/* badge "35 km" */
.map-radius-badge{
  position:absolute;
  bottom:14px;
  padding:15px 10px;
  border-radius:10px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:12px;
  background:rgba(255,255,255,.88);
  border:1px solid black;
  color:rgba(36,69,112,.92);
  box-shadow: 0 12px 30px rgba(2,6,23,.10);
}
/* =========================================================
   CONTACT: colonne droite qui s'étire (PC)
========================================================= */
@media (min-width: 981px){
  .contact-split{
    align-items: stretch; /* ✅ les 2 colonnes même hauteur */
  }

  .contact-aside{
    height: 100%;
    display: flex;        /* ✅ empile les cards + map */
    flex-direction: column;
    gap: 14px;
  }

  .panel-map{
    flex: 1 1 auto;       /* ✅ la map prend tout le reste */
    display: flex;
    flex-direction: column;
  }

  .panel-map .map-wrap{
    flex: 1 1 auto;       /* ✅ l'iframe s'étire */
  }

  .panel-map .map-wrap iframe{
    height: 100% !important; /* ✅ prend toute la hauteur dispo */
    min-height: 420px;       /* ✅ sécurité */
  }
}
/* ===== Sticky footer (page courte) ===== */
html, body { height: 100%; }

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

/* le contenu pousse le footer en bas */
.site-main{
  flex: 1 0 auto;
}

/* footer: min/max 40px, reste en bas */
.site-footer{
  flex: 0 0 auto;
  min-height: 60px;
  max-height: 60px;

  /* centre verticalement le contenu */
  display: flex;
  align-items: center;

  /* garde ton style existant */
  padding: 0; /* important sinon tu dépasses 40px */
}

/* si tu veux garder un peu d'air sans dépasser 40px */
.site-footer-inner{
  width: 100%;
  padding: 0 0; /* ou 0 12px si tu veux, mais attention à la hauteur */
}

/* cadenas: ne doit pas agrandir le footer */
.site-footer-lock{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}