/* =====================================================================
   Emprise Média — éléments communs à toutes les pages
   (en-tête, pied de page, bandeau des clients, boutons)
   Tous les noms commencent par gh- / ft- / mq- / eb- pour ne jamais
   entrer en conflit avec les styles propres à chaque page.
   ===================================================================== */
:root{
  --nav:#062b5c; --blue:#0873c9; --cyan:#16c7c9; --ink:#092847;
  --muted:#5d7287; --line:#dce6ee; --soft:#f4f8fb; --white:#fff;
  --font-t:"Plus Jakarta Sans","Inter",system-ui,Arial,sans-serif;
  --font-b:"Inter",system-ui,-apple-system,Arial,sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Boutons ---------- */
.eb-btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:15px 26px;
  font:700 15px/1 var(--font-b);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.eb-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.eb-btn:hover svg{transform:translateX(3px)}
.eb-btn.p{background:var(--blue);color:#fff;box-shadow:0 10px 28px rgba(8,115,201,.35)}
.eb-btn.p:hover{background:#0a82e0;transform:translateY(-2px);box-shadow:0 14px 34px rgba(8,115,201,.45)}
.eb-btn.w{background:#fff;color:var(--nav)}
.eb-btn.w:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.25)}
.eb-btn.g{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.eb-btn.g:hover{background:rgba(255,255,255,.12)}
.eb-btn.o{background:transparent;color:var(--nav);box-shadow:inset 0 0 0 1.5px var(--line)}
.eb-btn.o:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.eb-btn:focus-visible,.gh a:focus-visible,.ft a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ---------- En-tête ---------- */
.gh{position:sticky;top:0;z-index:45;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s}
.gh.scrolled{box-shadow:0 8px 30px rgba(6,43,92,.10);border-bottom-color:var(--line)}
.gh-in{width:min(1280px,calc(100% - 48px));margin:auto;height:84px;display:flex;align-items:center;gap:28px}
.gh-logo{display:block;flex:none}
.gh-logo img{height:58px;width:auto;display:block}
.gh-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.gh-nav a{position:relative;white-space:nowrap;padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font:600 15px/1 var(--font-b);transition:background .2s,color .2s}
.gh-nav a:hover{background:var(--soft);color:var(--blue)}
.gh-nav a[aria-current="page"]{color:var(--blue)}
.gh-nav a[aria-current="page"]::after{content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;border-radius:2px;background:var(--cyan)}
.gh-cta{flex:none;padding:13px 22px;font-size:14.5px}
.gh-burger{display:none;margin-left:auto;width:46px;height:46px;border:0;border-radius:12px;background:var(--soft);cursor:pointer;position:relative}
.gh-burger span,.gh-burger span::before,.gh-burger span::after{display:block;position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--nav);content:"";transition:transform .25s,opacity .2s}
.gh-burger span{top:22px}.gh-burger span::before{top:-7px;left:0;right:0}.gh-burger span::after{top:7px;left:0;right:0}
.gh-burger[aria-expanded="true"] span{background:transparent}
.gh-burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.gh-burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  .gh-in{height:70px;gap:12px}.gh-logo img{height:48px}
  .gh-burger{display:block}.gh-cta{display:none}
  .gh-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:12px 20px 20px;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(6,43,92,.12);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.22s}
  .gh-nav.open{transform:none;opacity:1;visibility:visible}
  .gh-nav a{padding:15px 14px;font-size:16px;border-radius:12px}
  .gh-nav a[aria-current="page"]::after{display:none}
  .gh-nav a[aria-current="page"]{background:var(--soft)}
  .gh-nav .gh-cta-m{display:block;margin-top:10px;text-align:center;background:var(--blue);color:#fff;font-weight:700}
}
@media(min-width:1081px){.gh-nav .gh-cta-m{display:none}}

/* ---------- Bandeau « Ils nous font confiance » ---------- */
.mq{background:#fff;padding:64px 0 56px;border-top:1px solid var(--line);overflow:hidden}
.mq-h{text-align:center;margin-bottom:32px;padding:0 20px}
.mq-h small{display:block;font:800 11.5px/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:#0ca7aa;margin-bottom:12px}
.mq-h h2{font:800 clamp(24px,3vw,34px)/1.15 var(--font-t);color:var(--ink);margin:0}
.mq-track{display:flex;width:max-content;animation:mq-roule 55s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;gap:18px;padding-right:18px}
.mq-card{flex:none;width:204px;height:114px;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:#fff;overflow:hidden;transition:transform .25s,box-shadow .25s}
.mq-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(6,43,92,.12)}
.mq-card img{max-width:80%;max-height:70%;width:auto;height:auto;object-fit:contain;display:block}
.mq-fade{position:relative}
.mq-fade::before,.mq-fade::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.mq-fade::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.mq-fade::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
@keyframes mq-roule{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:14px}.mq-set[aria-hidden]{display:none}}
@media(max-width:600px){.mq{padding:48px 0 44px}.mq-card{width:158px;height:92px}.mq-fade::before,.mq-fade::after{width:36px}}

/* ---------- Pied de page ---------- */
.ft{background:var(--nav);color:#c9d6e6;padding:72px 0 0;font:400 15px/1.6 var(--font-b)}
.ft-in{width:min(1280px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:48px}
.ft-brand img{height:62px;width:auto;display:block;background:#fff;border-radius:12px;padding:8px 12px;margin-bottom:20px}
.ft-brand p{margin:0 0 8px;max-width:340px;color:#aebfd4}
.ft h3{margin:4px 0 18px;font:800 11.5px/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:#7fd8d8}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft a{color:#e8f0f8;text-decoration:none;transition:color .2s}
.ft a:hover{color:#7fd8d8}
.ft-ct{display:grid;gap:14px}
.ft-ct div{display:flex;gap:12px;align-items:flex-start}
.ft-ct svg{flex:none;width:19px;height:19px;margin-top:3px;stroke:#7fd8d8;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ft-bas{margin-top:56px;border-top:1px solid rgba(255,255,255,.12);padding:22px 0;text-align:center;font-size:13px;color:#8ea3bb}
@media(max-width:900px){.ft-in{grid-template-columns:1fr;gap:36px}.ft{padding-top:56px}}

/* Fenêtres latérales de la page Commander (détail d'un panneau, ma sélection) :
   elles passent au-dessus de l'en-tête, défilent seules et bloquent le défilement de la page derrière. */
html.lock{overflow:hidden}
.drawer{height:100vh;height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:96px!important}

@media(min-width:1081px) and (max-width:1250px){.gh-nav a{padding:10px 10px;font-size:14px}.gh-cta{padding:12px 16px;font-size:13.5px}.gh-in{gap:16px}}