:root{
    --red:#D4171E;
    --red-2:#A50E14;
    --navy:#1A1F3C;
    --navy-2:#0D1128;
    --navy-3:#111827;
    --bg:#ffffff;
    --bg-2:#f5f7fa;
    --line:#e5e8ef;
    --ink:#1A1F3C;
    --ink-2:#4a5168;
    --ink-3:#7a8093;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#fff;color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;letter-spacing:-0.01em;line-height:1.05;color:var(--ink)}
  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
  .page{width:1440px;margin:0 auto;background:#fff;overflow:hidden}

  /* ─── Buttons ─── */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:uppercase;font-family:'Inter';border:2px solid transparent;cursor:pointer;transition:all .15s ease;white-space:nowrap}
  .btn--primary{background:var(--red);color:#fff;border-color:var(--red)}
  .btn--primary:hover{background:var(--red-2);border-color:var(--red-2)}
  .btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
  .btn--outline-white:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .btn--white{background:#fff;color:var(--red);border-color:#fff}
  .btn--white:hover{background:#f5f7fa}
  .btn--sm{padding:10px 18px;font-size:13px}
  .btn .arr{font-size:16px;transition:transform .15s ease}
  .btn:hover .arr{transform:translateX(3px)}

  /* ─── Logo ─── */
  .logo{display:inline-flex;align-items:center;gap:10px;font-family:'Barlow Condensed';font-weight:800;font-size:30px;letter-spacing:-0.01em;color:var(--navy)}
  .logo--inv{color:#fff}
  .flame{flex-shrink:0}

  /* ─── 1. TOPBAR ─── */
  .topbar{background:var(--navy);color:#fff;font-size:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px}
  .topbar-left{display:flex;align-items:center;gap:18px}
  .topbar-left .sep{color:rgba(255,255,255,.25)}
  .topbar-left a:hover{color:#fff}
  .topbar-left .ph{color:#fff}
  .topbar-right{display:flex;gap:14px;align-items:center}
  .topbar-right a{color:rgba(255,255,255,.65);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
  .topbar-right a.active{color:#fff;border-bottom:1.5px solid var(--red);padding-bottom:1px}
  .topbar-right a:hover{color:#fff}

  /* ─── 2. HEADER ─── */
  header.main{background:#fff;border-bottom:3px solid var(--red);padding:18px 0;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.02)}
  header.main .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px}
  nav.primary{display:flex;gap:30px;align-items:center}
  nav.primary a{color:var(--navy);font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:5px;letter-spacing:.01em;position:relative;padding:6px 0}
  nav.primary a:hover{color:var(--red)}
  nav.primary a.active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:3px;background:var(--red)}
  nav.primary .caret{font-size:10px;opacity:.6}

  /* ─── 3. HERO ─── */
  .hero{background:linear-gradient(135deg,var(--navy-2) 0%,var(--navy) 100%);color:#fff;position:relative;overflow:hidden;padding:0}
  .hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red);z-index:3}
  .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 40%,rgba(212,23,30,.15),transparent 50%);pointer-events:none}
  .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding:100px 32px 110px;position:relative;z-index:2}
  .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:7px 14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:'Inter';margin-bottom:28px}
  .hero-badge .dot{width:6px;height:6px;border-radius:50%;background:#fff}
  .hero h1{font-size:58px;color:#fff;font-weight:700;line-height:1.04;letter-spacing:-0.02em}
  .hero h1 em{font-style:normal;color:var(--red);font-weight:700}
  .hero p.lead{margin-top:28px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);max-width:560px}
  .hero .cta-row{display:flex;gap:12px;margin-top:36px}
  .hero .badges{margin-top:48px;display:grid;grid-template-columns:repeat(2,auto);gap:12px 28px;justify-content:flex-start;color:#fff}
  .hero .badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.85);font-weight:500}
  .hero .badge .ck{width:18px;height:18px;border-radius:50%;background:var(--red);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
  .hero .badge .ck svg{width:11px;height:11px}
  .hero-visual{position:relative;height:560px;display:flex;align-items:center;justify-content:center}
  .hero-img{position:relative;width:100%;height:100%;background:linear-gradient(160deg,#2a3047 0%,#0d1128 100%);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
  .hero-img::before{content:"";position:absolute;inset:0;background:
    radial-gradient(circle at 30% 30%,rgba(212,23,30,.25),transparent 40%),
    repeating-linear-gradient(45deg,transparent 0 20px,rgba(255,255,255,.02) 20px 21px);
  }
  /* Stylized firefighter silhouette */
  .ff{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:340px;height:520px}
  .ff svg{width:100%;height:100%;display:block}
  .hero-tag{position:absolute;bottom:24px;left:24px;background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);padding:14px 18px;color:#fff;font-size:12px;display:flex;align-items:center;gap:14px}
  .hero-tag .num{font-family:'Barlow Condensed';font-size:34px;font-weight:800;color:var(--red);line-height:1}
  .hero-tag .lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .hero-tag .val{font-weight:600}

  /* ─── 4. BAND CHIFFRES ─── */
  .band-stats{background:var(--red);color:#fff;padding:0}
  .band-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 32px}
  .stat{padding:34px 24px;border-right:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:4px;text-align:left}
  .stat:last-child{border-right:0}
  .stat .num{font-family:'Barlow Condensed';font-size:48px;font-weight:800;line-height:1;letter-spacing:-0.01em}
  .stat .num small{font-size:24px;opacity:.85}
  .stat .lbl{font-size:13px;color:rgba(255,255,255,.85);letter-spacing:.04em;font-weight:500}

  /* ─── 5. GAMMES ─── */
  .gammes{padding:110px 0;background:#fff}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px;gap:40px}
  .section-head .kicker{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
  .section-head .kicker::before{content:"";width:24px;height:2px;background:var(--red)}
  .section-head h2{font-size:54px;color:var(--navy);max-width:600px}
  .section-head p{font-size:16px;color:var(--ink-2);max-width:420px;line-height:1.6}

  .gammes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .gamme{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);transition:all .2s ease;display:flex;flex-direction:column;cursor:pointer}
  .gamme:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(26,31,60,.08);border-top-color:var(--red-2)}
  .gamme-img{aspect-ratio:4/3;background:var(--bg-2);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .gamme-img-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .gamme-img-bg svg{width:55%;height:auto;opacity:.85}
  .gamme-norm{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-size:11px;padding:5px 10px;font-weight:600;letter-spacing:.04em;font-family:'Inter'}
  .gamme-body{padding:24px;display:flex;flex-direction:column;flex:1;gap:8px}
  .gamme h3{font-size:24px;color:var(--navy)}
  .gamme p{font-size:13px;color:var(--ink-2);line-height:1.55;flex:1}
  .gamme .link{margin-top:14px;color:var(--red);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
  .gamme .link .arr{transition:transform .15s ease}
  .gamme:hover .link .arr{transform:translateX(4px)}

  /* ─── 6. PERSONNALISATION ─── */
  .perso{background:var(--navy);color:#fff;padding:90px 0;position:relative;overflow:hidden}
  .perso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
  .perso .wrap{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:center}
  .perso .kicker{color:var(--red);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
  .perso .kicker::before{content:"";width:24px;height:2px;background:var(--red)}
  .perso h2{color:#fff;font-size:46px;line-height:1.05}
  .perso .lead{margin-top:18px;color:rgba(255,255,255,.7);font-size:15px;line-height:1.6;max-width:340px}
  .perso-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1)}
  .perso-cell{background:var(--navy);padding:32px 28px;display:flex;flex-direction:column;gap:14px}
  .perso-cell .icon{width:56px;height:56px;border:2px solid var(--red);display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:6px}
  .perso-cell h4{color:#fff;font-size:22px;font-family:'Barlow Condensed';font-weight:700}
  .perso-cell p{color:rgba(255,255,255,.65);font-size:13px;line-height:1.55}
  .perso-cell .more{margin-top:auto;color:var(--red);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

  /* ─── 7. RÉASSURANCE ─── */
  .reass{background:var(--bg-2);padding:110px 0}
  .reass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .reass-card{background:#fff;border-top:3px solid var(--red);padding:32px 28px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-top:3px solid var(--red);transition:transform .15s ease}
  .reass-card:hover{transform:translateY(-3px)}
  .reass-card .ck{width:36px;height:36px;background:rgba(212,23,30,.08);color:var(--red);display:flex;align-items:center;justify-content:center;border-radius:50%}
  .reass-card .ck svg{width:18px;height:18px}
  .reass-card h4{font-size:20px;font-family:'Barlow Condensed';color:var(--navy);font-weight:700}
  .reass-card p{font-size:14px;color:var(--ink-2);line-height:1.6}

  /* ─── 8. NORMES ─── */
  .normes{background:var(--navy);color:#fff;padding:80px 0;position:relative}
  .normes::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
  .normes .wrap{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
  .normes .kicker{color:var(--red);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
  .normes h2{color:#fff;font-size:38px}
  .normes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%}
  .norm-card{border:1.5px solid rgba(212,23,30,.5);padding:24px;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.15);transition:border-color .15s ease}
  .norm-card:hover{border-color:var(--red)}
  .norm-card .code{font-family:'Barlow Condensed';font-size:28px;font-weight:800;color:var(--red);line-height:1}
  .norm-card .name{font-size:14px;font-weight:600;color:#fff}
  .norm-card .desc{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5}

  /* ─── 9. TÉMOIGNAGES ─── */
  .testi{background:#fff;padding:110px 0}
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .testi-card{padding:32px 28px;border-left:4px solid var(--red);background:var(--bg-2);display:flex;flex-direction:column;gap:18px}
  .testi-card .stars{color:var(--red);letter-spacing:2px;font-size:14px}
  .testi-card blockquote{font-size:16px;line-height:1.6;color:var(--ink);font-weight:500;font-family:'Inter';font-style:normal}
  .testi-card .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
  .testi-card .ava{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:'Barlow Condensed';flex-shrink:0}
  .testi-card .who-meta{display:flex;flex-direction:column;line-height:1.3}
  .testi-card .who-name{font-size:14px;font-weight:600;color:var(--navy)}
  .testi-card .who-role{font-size:12px;color:var(--ink-3)}

  /* ─── 10. CTA FINAL ─── */
  .cta-final{background:var(--red);color:#fff;padding:90px 0;position:relative;overflow:hidden}
  .cta-final::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 40px,rgba(255,255,255,.04) 40px 41px);pointer-events:none}
  .cta-final .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
  .cta-final h2{color:#fff;font-size:52px;line-height:1.05}
  .cta-final p{margin-top:16px;color:rgba(255,255,255,.85);font-size:16px;line-height:1.6;max-width:560px}
  .cta-final .cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
  .cta-contact{background:rgba(0,0,0,.15);padding:32px;border:1px solid rgba(255,255,255,.15)}
  .cta-contact h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.1em;font-family:'Inter';font-weight:700;margin-bottom:18px}
  .cta-contact .row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
  .cta-contact .row:last-child{border-bottom:0}
  .cta-contact .row .ic{width:32px;height:32px;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .cta-contact .row .lbl{display:block;font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase}
  .cta-contact .row .val{display:block;font-weight:600;color:#fff}

  /* ─── 11. FOOTER ─── */
  footer{background:var(--navy-3);color:rgba(255,255,255,.6);padding:80px 0 0;font-size:13px}
  footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:50px}
  footer h5{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:'Inter';font-weight:700;margin-bottom:18px}
  footer ul{list-style:none}
  footer ul li{margin-bottom:9px}
  footer ul a{color:rgba(255,255,255,.6);transition:color .15s ease}
  footer ul a:hover{color:var(--red)}
  footer .footer-about{color:rgba(255,255,255,.6);line-height:1.7;font-size:13px}
  footer .footer-about .logo{margin-bottom:18px}
  footer .footer-contact{font-style:normal;margin-top:16px;line-height:1.7;color:rgba(255,255,255,.7)}
  footer .footer-contact strong{color:#fff;font-weight:600}
  .lang-switch{display:inline-flex;border:1px solid rgba(255,255,255,.18);margin-top:16px}
  .lang-switch a{padding:6px 12px;font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.12)}
  .lang-switch a:last-child{border-right:0}
  .lang-switch a.active{background:var(--red);color:#fff}
  .footer-bottom{margin-top:60px;border-top:1px solid rgba(255,255,255,.08);padding:22px 0;font-size:12px;color:rgba(255,255,255,.4)}
  .footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;grid-template-columns:none}
  .footer-bottom a:hover{color:#fff}
  .footer-legal{display:flex;gap:18px}

/* ─── Header : recherche produits + cluster droit (one-page) ─── */
.header-right{display:flex;align-items:center;gap:16px}
.hsearch{display:flex;align-items:center;border:1px solid var(--line);height:38px;background:#fff}
.hsearch input[type=search]{border:0;padding:0 12px;font:inherit;font-size:13px;width:170px;outline:none;color:var(--ink)}
.hsearch button{border:0;background:var(--navy);color:#fff;width:38px;height:38px;cursor:pointer;font-size:17px;line-height:1}
.hsearch button:hover{background:var(--red)}
.topbar-right a{cursor:pointer}
@media(max-width:1100px){.hsearch input[type=search]{width:120px}}

/* ─── Fix : scroll vertical + wrapper responsive (override) ─── */
html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
.page { width: 100%; max-width: 1440px; overflow: visible; }
@media (max-width: 1000px){
  .hero .wrap{grid-template-columns:1fr;gap:30px;padding:60px 24px}
  .band-stats .wrap{grid-template-columns:1fr 1fr}
  .gammes-grid{grid-template-columns:1fr 1fr}
}

/* ─── Section devis (formulaire one-page) ─── */
.devis-section{background:var(--bg-2);padding:90px 0}
.devis-section .kicker{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.devis-section .kicker::before{content:"";width:24px;height:2px;background:var(--red)}
.devis-section h2{font-size:42px;color:var(--navy);margin:0 0 6px}
.devis-intro{color:var(--ink-2);margin-bottom:30px;font-size:16px}
.devis-section form{max-width:760px}
.devis-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.devis-section label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:16px}
.devis-section input[type=text],.devis-section input[type=email],.devis-section input[type=tel],.devis-section textarea{width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.devis-section textarea{min-height:120px;resize:vertical}
.devis-section input[type=submit],.devis-section .wpcf7-submit{background:var(--red);color:#fff;border:0;padding:14px 28px;font-family:'Inter';font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.02em;cursor:pointer;margin-top:6px}
.devis-section input[type=submit]:hover{background:var(--red-2)}
.wpcf7-response-output{margin-top:16px!important}
@media(max-width:700px){.devis-form-grid{grid-template-columns:1fr}.devis-section h2{font-size:32px}}

/* ══════ Notre société ══════ */
.societe{padding:96px 0;background:#fff;border-top:1px solid var(--line)}
.societe-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:8px}
.societe-col h3{font-family:'Barlow Condensed','Inter',sans-serif;font-size:26px;font-weight:700;color:var(--navy);margin:0 0 12px}
.societe-col p{color:var(--ink-2);font-size:15px;line-height:1.75;margin:0}
.societe-engage{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.societe-engage span{font-size:14px;font-weight:600;color:var(--navy)}
@media(max-width:820px){.societe{padding:64px 0}.societe-grid{grid-template-columns:1fr;gap:32px}}

/* ══════ Pages légales (contenu éditable) ══════ */
.entry-content h2{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;font-size:26px;color:var(--navy);margin:34px 0 10px;line-height:1.15}
.entry-content h3{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;font-size:20px;color:var(--navy);margin:22px 0 8px}
.entry-content p{margin:0 0 14px}
.entry-content ul{margin:0 0 14px;padding-left:22px}
.entry-content li{margin:0 0 6px}
.entry-content a{color:var(--red);font-weight:600}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.entry-content th{background:#f3f4f8;color:var(--navy);font-weight:700}
.legal-updated{font-size:13px;color:var(--ink-3);margin:0 0 22px!important}
.legal-note{background:#fff8e1;border-left:3px solid #e0a800;padding:10px 14px;font-size:14px;border-radius:0 4px 4px 0}
mark.tovalidate{background:#fff2b2;color:#7a5c00;padding:1px 5px;border-radius:3px;font-style:italic;font-weight:600}

/* ══════ Bandeau cookies (CNIL) ══════ */
.mcc{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:16px;display:flex;justify-content:center;background:linear-gradient(transparent,rgba(13,17,40,.15))}
.mcc-box{background:#fff;max-width:940px;width:100%;border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:0 12px 40px rgba(13,17,40,.22);padding:20px 22px;border-radius:6px}
.mcc-txt{font-size:14px;color:var(--ink-2);margin:0 0 12px;line-height:1.6}
.mcc-txt a{color:var(--red);font-weight:600}
.mcc-prefs{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 14px}
.mcc-opt{font-size:14px;color:var(--navy);display:flex;align-items:center;gap:8px}
.mcc-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.mcc-btn{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;padding:10px 18px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;border-radius:3px}
.mcc-btn:hover{background:#f3f4f8}
.mcc-btn.mcc-accept{background:var(--red);border-color:var(--red);color:#fff}
.mcc-btn.mcc-accept:hover{background:var(--red-2)}
@media(max-width:560px){.mcc-btns{justify-content:stretch}.mcc-btn{flex:1 1 auto}}

/* Ancres one-page : décalage sous le header sticky (nav + arrivée depuis une autre page) */
section[id]{scroll-margin-top:96px}

/* ══════ Mobile & tablette ══════ */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:8px 10px;background:none;border:1px solid var(--line);border-radius:4px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  /* Topbar compacte */
  .topbar-left span:first-child,.topbar-left .sep{display:none}
  .topbar .wrap{gap:10px}
  /* Header : logo + burger, recherche en 2e ligne, nav en panneau */
  header.main{padding:10px 0}
  header.main .wrap{flex-wrap:wrap;gap:10px 14px}
  .burger{display:flex;margin-left:auto}
  nav.primary{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;border-bottom:3px solid var(--red);box-shadow:0 18px 34px rgba(13,17,40,.16);z-index:60}
  nav.primary.open{display:flex}
  nav.primary a{padding:14px 24px;border-top:1px solid var(--line);font-size:15px}
  nav.primary a.active::after{display:none}
  .header-right{width:100%;gap:10px}
  .hsearch{flex:1}
  .hsearch input[type=search]{width:100%}
  /* Hero */
  .hero .wrap{padding:44px 20px 52px;gap:26px}
  .hero h1{font-size:34px}
  .hero .lead{font-size:15px}
  .hero-visual{height:300px}
  .hero-visual svg{max-height:280px;width:auto}
  .hero-tag{right:8px;bottom:8px}
  /* Sections & titres */
  .section-head{flex-direction:column;gap:10px}
  .section-head h2,.gammes h2,.normes h2{font-size:32px}
  .cta-final h2{font-size:34px}
  .cta-final .wrap{grid-template-columns:1fr;gap:30px}
  .perso-grid,.reass-grid,.testi-grid{grid-template-columns:1fr}
  .normes-grid{grid-template-columns:1fr 1fr}
  footer .wrap{grid-template-columns:1fr 1fr;gap:30px}
  .footer-bottom .wrap{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:620px){
  .gammes-grid{grid-template-columns:1fr}
  .band-stats .wrap{grid-template-columns:1fr 1fr}
  .band-stats .num{font-size:26px}
  footer .wrap{grid-template-columns:1fr;gap:26px}
  .societe-engage{flex-direction:column;gap:8px}
  .shopl-hero h1{font-size:28px}
}

/* ══════ Espace PRO (bandeau isolé, réunion 07/2026) ══════ */
.btn--pro{background:#1d4ed8;color:#fff;border:1px solid #1d4ed8}
.btn--pro:hover{background:#1e40af;border-color:#1e40af;color:#fff}
.btn--outline-navy{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn--outline-navy:hover{border-color:#1d4ed8;color:#1d4ed8}
.topbar--pro{background:#1e3a8a}
.topbar--pro .topbar-right a{color:#bfdbfe;text-transform:none;letter-spacing:0;font-size:12px}
.topbar--pro .topbar-right a:hover{color:#fff}
header.main--pro{border-bottom-color:#1d4ed8}
.pro-badge{background:#1d4ed8;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;padding:2px 8px;border-radius:3px;margin-left:10px;letter-spacing:.06em;vertical-align:middle}
@media(max-width:900px){.header-right .btn--outline-navy{display:none}}

/* Hero sans visuel (vidéo à venir) : texte centré pleine largeur */
.hero--novisual .wrap{grid-template-columns:1fr;max-width:960px}
.hero-visual--video{height:420px}
/* Vitrine boutique : chips « par type de produit » */
.shopl-types{display:flex;flex-wrap:wrap;gap:10px}
.shopl-type{border:1px solid #cfd6e4;background:#fff;color:#1A1F3C;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600}
.shopl-type em{font-style:normal;color:#7a8093;font-weight:400}
.shopl-type:hover{border-color:#D4171E;color:#D4171E}

/* ══════ Hero VIDÉO plein fond (texte réduit par-dessus) ══════ */
.hero--video{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden}
.hero--video .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero--video .hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,17,40,.88) 0%,rgba(13,17,40,.55) 45%,rgba(13,17,40,.18) 100%)}
.hero--video .wrap{position:relative;z-index:2;grid-template-columns:1fr;max-width:1440px;padding:90px 32px}
.hero--video .hero-text{max-width:640px}
.hero--video .lead{max-width:520px;font-size:15.5px}
.hero--video .badges{display:none} /* texte limité : les 4 badges sortent du hero vidéo */
@media(max-width:900px){
  .hero--video{min-height:60vh}
  .hero--video .wrap{padding:56px 20px}
  .hero--video .hero-shade{background:linear-gradient(180deg,rgba(13,17,40,.85) 0%,rgba(13,17,40,.45) 100%)}
}

/* ══════ Hero vidéo — raffinement (aération, hiérarchie, sobriété) ══════ */
.hero--video{min-height:78vh}
.hero--video .wrap{padding:130px 32px 120px}
.hero--video .hero-badge{background:rgba(212,23,30,.16);border:1px solid rgba(255,77,85,.45);color:#ffc2c5;backdrop-filter:blur(6px);letter-spacing:.16em;font-size:11px;padding:8px 18px;border-radius:999px;margin-bottom:30px}
.hero--video .hero-badge .dot{background:#ff4d55}
.hero--video h1{font-size:clamp(30px,min(5.4vw,8.2vh),66px);line-height:1.05;letter-spacing:-.015em;margin:0 0 22px;text-shadow:0 2px 26px rgba(13,17,40,.5)}
.hero--video .lead{font-size:16px;line-height:1.75;color:rgba(255,255,255,.78);max-width:470px;margin:0 0 clamp(20px,4.5vh,40px)}
.hero--video .cta-row{gap:14px}
.hero--video .btn{padding:15px 30px;font-size:13.5px;letter-spacing:.04em;border-radius:3px}
.hero--video .btn--outline-white{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.hero--video .btn--outline-white:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.hero--video .hero-shade{background:linear-gradient(90deg,rgba(13,17,40,.92) 0%,rgba(13,17,40,.6) 40%,rgba(13,17,40,.26) 70%,rgba(13,17,40,.1) 100%)}
.hero--video .hero-text{animation:heroIn .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .hero--video{min-height:62vh}
  .hero--video .wrap{padding:84px 22px 72px}
  .hero--video h1{font-size:clamp(30px,8vw,40px)}
  .hero--video .lead{margin-bottom:30px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.hero--video .hero-text{animation:none}}

/* Hero vidéo : texte ancré à GAUCHE de l'écran (plus de bloc flottant au centre) */
.hero--video .wrap{max-width:none;width:100%;padding:0 6vw;margin:0}
.hero--video .hero-text{max-width:600px;margin:0}

/* ══════ Retours Franck (suite 2) ══════ */
/* Logo : ne doit jamais s'écraser (flex serré / mobile) */
.logo{flex-shrink:0}
.logo img{max-width:none;height:42px;width:auto}
footer .logo img{height:36px}
/* Boutons du header : même hauteur exacte (Espace Pro = Demander un devis) */
.header-right .btn--sm{padding:11px 16px;font-size:13px;line-height:1.2;border-width:1px;white-space:nowrap}
/* Cartes normes cliquables */
a.norm-card{display:block;color:inherit}
a.norm-card:hover{border-color:#D4171E;box-shadow:0 8px 20px rgba(13,17,40,.08)}
a.norm-card:hover .code{color:#D4171E}

/* ══════ Accueil en blocs Gutenberg (Phase 1 admin bloc par bloc) ══════ */
.home-blocks :is(p,h2,h3,h4){margin-top:0}
.home-blocks p{margin-bottom:0}
.home-blocks .section-head p:last-child{margin:0}
.home-blocks .link a,.home-blocks .more a{color:inherit;font:inherit;text-decoration:none}
.home-blocks .cta-row{margin-top:32px}
.home-blocks .cta-row p{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.home-blocks .societe-engage p{font-size:14px;font-weight:600;color:var(--navy);margin:0}
.home-blocks .gammes .section-head h2,.home-blocks .reass .section-head h2{margin-bottom:0}

/* Boutons header : hauteur STRICTEMENT identique (Espace Pro = Demander un devis) */
.header-right .btn--sm{display:inline-flex;align-items:center;height:42px;padding:0 16px;box-sizing:border-box;line-height:1}

/* ══════ PLEINE LARGEUR (retour client, réf. rosenbauer.com) ══════
   Le site occupe tout l'écran : les fonds des sections (hero, bandeaux, footer)
   vont bord à bord ; les contenus restent centrés via .wrap (1280px). */
.page{max-width:none;width:100%}

/* ══════ Retour client : espacements resserrés + header/vidéo mobile ══════ */
.home-blocks section,.gammes,.perso,.reass,.societe,.normes,.testi,.cta-final,.devis-section{padding-top:60px;padding-bottom:60px}
.section-head{margin-bottom:28px}
/* Libellés courts des boutons header sur mobile */
.btn-lbl-s{display:none}
@media(max-width:900px){
  .btn-lbl-l{display:none}.btn-lbl-s{display:inline}
  .header-right{gap:8px}
  .header-right .btn--sm{height:38px;padding:0 13px;font-size:12.5px}
  .home-blocks section,.gammes,.perso,.reass,.societe,.normes,.testi,.cta-final,.devis-section{padding-top:36px;padding-bottom:36px}
  .section-head{margin-bottom:18px}
}
/* Vidéo hero mobile : en flux 16:9, jamais tronquée */
@media(max-width:900px){
  .hero--video{min-height:0;display:block;background:#0D1128}
  .hero--video .hero-bg{position:static;width:100%;height:auto;aspect-ratio:16/9;display:block}
  .hero--video .hero-shade{display:none}
  .hero--video .wrap{display:block;padding:30px 20px 38px}
  .hero--video .hero-text{max-width:100%}
  .hero--video .cta-row{flex-wrap:wrap}
  .hero--video h1{font-size:clamp(28px,4.5vw,38px)}
  .hero--video .lead{margin-bottom:22px}
}

/* ══════ Full width contenus + header ×1,25 sur grands écrans (retour client) ══════ */
/* Conteneurs de contenu élargis (les fonds étaient déjà bord à bord) */
.wrap{max-width:1560px}
.bshop .wrap,.bsa-wrap,.shopl .wrap{max-width:1560px}
.bsa-grid{grid-template-columns:280px 1fr}
.bsa-products{grid-template-columns:repeat(4,1fr)}
.bshop-feat-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1200px){.bsa-products{grid-template-columns:repeat(3,1fr)}}
/* Bandeau du haut ≈125 % à partir de 1440px */
@media(min-width:1440px){
  .topbar{font-size:13.5px;padding:11px 0}
  .topbar-right a{font-size:12.5px}
  header.main{padding:24px 0}
  .logo img{height:53px!important}
  footer .logo img{height:44px!important}
  .pro-badge{font-size:14px;padding:3px 10px}
  nav.primary{gap:38px}
  nav.primary a{font-size:17px}
  nav.primary a.active::after{bottom:-28px}
  .hsearch input[type=search]{width:250px;font-size:15px;padding:12px 14px}
  .hsearch button{font-size:18px;padding:0 14px}
  .header-right{gap:20px}
  .header-right .btn--sm{height:52px;padding:0 24px;font-size:15px}
}

/* ══════ Très grands écrans (32", ≥1900px) : palier ×1,4 ══════ */
@media(min-width:1900px){
  html{font-size:17px}
  .wrap,.bshop .wrap,.bsa-wrap,.shopl .wrap{max-width:1800px}
  .topbar{font-size:14.5px;padding:12px 0}
  header.main{padding:28px 0}
  .logo img{height:60px!important}
  nav.primary{gap:46px}
  nav.primary a{font-size:19px}
  .hsearch input[type=search]{width:300px;font-size:16px}
  .header-right .btn--sm{height:58px;padding:0 28px;font-size:16px}
  .hero--video h1{font-size:clamp(56px,4.2vw,84px)}
  .hero--video .lead{font-size:18px;max-width:560px}
  .bsa-products{grid-template-columns:repeat(5,1fr)}
  .bshop-feat-grid{grid-template-columns:repeat(4,1fr)}
  .bsa-grid{grid-template-columns:320px 1fr}
  .section-head h2,.gammes h2,.normes h2{font-size:40px}
}

/* Menu centré dans le header (desktop) */
@media(min-width:901px){
  nav.primary{margin-left:auto;margin-right:auto}
  header.main .wrap{justify-content:flex-start}
  .header-right{margin-left:0}
}

/* Titres de sections FLUIDES : les 2 lignes voulues (« L'exigence d'un fabricant, /
   la proximité d'un partenaire. ») ne doivent jamais casser en 4 lignes */
.section-head h2{font-size:clamp(26px,3vw,42px);line-height:1.08}
@media(max-width:900px){.section-head h2,.gammes h2,.normes h2{font-size:clamp(22px,6vw,32px)}}

/* ---- Retours 07/2026 : en-têtes de sections centrés sur eux-mêmes ---- */
.section-head{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
.section-head .kicker{justify-content:center}
.section-head h2{max-width:820px}
.section-head p{max-width:640px}
.normes .kicker{justify-content:center}
.normes .section-head,.societe .section-head{align-items:center}

/* ══════ Laptops : fenêtre large mais PEU HAUTE — titre proportionné à la hauteur, CTA visibles sans scroll ══════ */
@media(min-width:901px) and (max-height:760px){
  .hero--video{min-height:0}
  .hero--video .wrap{padding-top:48px;padding-bottom:44px}
  .hero--video h1{font-size:clamp(32px,7vh,48px);margin-bottom:16px}
  .hero--video .lead{font-size:15px;margin-bottom:26px}
}

/* ══════ Header laptops (901–1380px) : libellés courts + recherche compacte — rien ne déborde ══════ */
@media(min-width:901px) and (max-width:1380px){
  .btn-lbl-l{display:none}
  .btn-lbl-s{display:inline}
  .header-right{gap:10px}
  .hsearch input[type=search]{width:130px}
  nav.primary{gap:24px}
}
@media(min-width:901px) and (max-width:1080px){
  .hsearch input[type=search]{width:60px;padding:0 8px}
  .hsearch button{width:32px;height:34px;font-size:15px}
  .hsearch{height:34px}
  nav.primary{gap:11px}
  nav.primary a{font-size:14px}
  .header-right{gap:8px}
  .header-right .btn--sm{padding:0 10px;font-size:12px}
  .logo img{height:36px!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   RETOURS CLIENT 04/08/2026 — recette multi-navigateurs / multi-écrans
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fiche produit : le bloc déclinaisons remontait à côté des flottants
      (galerie à gauche, résumé à droite) → collision + tableau rétréci quand
      la colonne droite grandit à la sélection des options. Un clear règle les deux. */
.martinas-variations{clear:both;width:100%;margin-top:8px}
.woocommerce div.product::after{content:"";display:table;clear:both}
.martinas-variations table{width:100%}

/* ── 2. Header : libellés du menu centrés (les intitulés sur 2 lignes
      « Nos gammes » / « Notre société » étaient alignés à gauche). */
nav.primary a{text-align:center;justify-content:center}

/* ── 3. Header : gouttières symétriques + logo aligné sur le texte de la topbar.
      Même conteneur, même padding pour la topbar et le header. */
.topbar .wrap,
header.main .wrap{
  max-width:1800px;
  margin-left:auto;margin-right:auto;
  padding-left:clamp(20px,2.2vw,42px);
  padding-right:clamp(20px,2.2vw,42px);
}

/* ── 4. Hero : vidéo entière (16:9), jamais recadrée, sur les écrans courts
      (laptops 14"). Le texte passe sous la vidéo, comme sur mobile. */
@media (min-width:901px){
  /* Le hero adopte EXACTEMENT le ratio de la video (16:9) : le cadre est donc
     rendu en entier (plus de recadrage), tout en gardant le texte par-dessus
     et visible sans defiler. */
  .hero--video{min-height:0;aspect-ratio:16/9;display:flex;align-items:center;background:#0D1128}
  .hero--video .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero--video .hero-shade{display:block}
  .hero--video .wrap{display:block;padding:0 clamp(20px,2.2vw,42px)}
  .hero--video .hero-text{max-width:min(46vw,700px)}
  .hero--video h1{font-size:clamp(30px,3.1vw,56px);margin:0 0 16px}
  .hero--video .lead{font-size:clamp(15px,1.05vw,17px);line-height:1.7;margin:0 0 28px;max-width:560px}
  .hero--video .cta-row{flex-wrap:wrap}
}

/* ── Header : ne déborde jamais — le champ de recherche se comprime en premier,
      ce qui garantit la marge à droite du bouton « Demander un devis ». */
header.main .wrap{flex-wrap:nowrap}
header.main .header-right{flex:0 1 auto;min-width:0}
header.main .hsearch{flex:0 1 auto;min-width:0}
header.main .hsearch input[type=search]{width:clamp(120px,11vw,230px);min-width:0}
header.main nav.primary{flex:0 1 auto;min-width:0}
header.main .logo{flex:0 0 auto}

/* ── Retour Franck 04/08 : « Personnalisez vos équipements » sortait de l'écran sur mobile.
      Le conteneur restait en 2 colonnes (1fr 2fr = 462px pour 375px dispo) : la colonne
      des cartes était poussée hors cadre puis coupée par l'overflow:hidden de la section. */
@media(max-width:900px){
  .perso .wrap{grid-template-columns:1fr;gap:26px;align-items:start}
  .perso h2{font-size:clamp(28px,7vw,38px)}
  .perso .lead{max-width:none}
  .perso-grid{grid-template-columns:1fr}
  .perso-cell{padding:24px 22px}
}
/* ---- Photos du shooting 07/2026 dans les cartes ---- */
.gamme-img{background:var(--bg-2)}
.gamme-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gamme:hover .gamme-img img{transform:scale(1.04)}
.gamme-norm{z-index:1}

/* ══ Retours 28/08 — LOT 1 seul : bandeau supérieur ══
   Pleine largeur sur tous les écrans, recherche + langues alignées à droite. */
.topbar .wrap{max-width:none;padding-left:20px;padding-right:20px;justify-content:flex-end}
.hsearch--top{height:30px;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.hsearch--top input[type=search]{width:200px;font-size:12px;background:transparent;color:#fff}
.hsearch--top input[type=search]::placeholder{color:rgba(255,255,255,.55)}
.hsearch--top button{width:30px;height:30px;font-size:14px;background:var(--red)}
@media(max-width:700px){
  .topbar .wrap{flex-wrap:nowrap;gap:8px}
  .hsearch--top{flex:1;min-width:0}
  .hsearch--top input[type=search]{width:100%;min-width:0}
}

/* ══ Retours 28/08 — LOT 2 : header/menu ══ */
/* Logo centré verticalement sur le texte MARTINAS (la flamme dépasse en haut) */
header.main .logo img{transform:translateY(3px)}
/* Plus de ligne rouge sous la rubrique active du menu */
nav.primary a.active::after{display:none}
nav.primary a.active{color:var(--navy)}
/* -1 pt sur les grands écrans (20 pouces et +) : 17→15.5 / 19→17.5 */
@media(min-width:1440px){nav.primary a{font-size:15.5px}}
@media(min-width:1900px){nav.primary a{font-size:17.5px}}
/* Smartphone : header compact — logo + burger, boutons courts bien dimensionnés */
@media(max-width:700px){
  header.main{padding:10px 0}
  header.main .wrap{gap:8px 10px}
  .header-right{display:flex;gap:8px}
  .header-right .btn{padding:9px 12px;font-size:12.5px;height:auto;line-height:1.2}
}

/* ══ Retours 28/08 — LOT 3 : accueil (gammes / services / société / normes) ══ */
/* Ancrage : les titres de section arrivent SOUS le header sticky, jamais coupés */
html{scroll-padding-top:88px;scroll-behavior:smooth}
section[id]{scroll-margin-top:88px}
/* Sous-menu « Gammes » (Par métier / Par type de produit) */
.has-sub{position:relative;display:inline-flex}
.has-sub .car{font-size:10px;opacity:.6}
.has-sub .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(26,31,60,.12);padding:6px 0;min-width:200px;display:none;z-index:60}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.has-sub .sub a{display:block;padding:9px 18px;font-size:13.5px;white-space:nowrap}
.has-sub .sub a:hover{background:#f6f7f9;color:var(--red)}
/* Gammes : pleine largeur (alignée sur le logo à gauche), espacement minimal */
.gammes .wrap{max-width:none;padding-left:20px;padding-right:20px}
.gammes-grid{gap:10px}
/* Vignettes PORTRAIT — une ligne entière visible sans scroller */
.gammes .gamme-img{aspect-ratio:3/4;max-height:34vh;border-bottom:0}
.gammes .gamme-img img{object-fit:cover}
.gamme-norm{display:none!important}                       /* badges normes retirés */
.gammes .gamme-body{padding:12px 14px}
.gammes .gamme-body p,.gammes .gamme .link{display:none}  /* titres seuls */
.gammes .gamme h3{font-size:20px;text-align:center}
/* Espace réduit entre les deux lignes de vignettes */
.gammes{padding-bottom:22px}
.solutions{padding-top:22px}
.gammes .section-head{margin-bottom:20px}
/* Services — volet Maintenance */
.maint{margin-top:46px}
.maint .kicker{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.maint h2{font-size:clamp(24px,2.6vw,36px);color:var(--navy);margin:0 0 22px}
.maint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.maint-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);padding:22px}
.maint-card h4{font-size:19px;color:var(--navy);margin:0 0 8px}
.maint-card p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0}
@media(max-width:900px){.maint-grid{grid-template-columns:1fr}}
/* Normes : une seule couleur bleue, texte et liserés BLANCS */
.normes{background:var(--navy)}
.normes .kicker,.normes h2,.normes p{color:#fff}
.normes .kicker::before{background:#fff}
a.norm-card,.norm-card{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff}
a.norm-card .code,.norm-card .code{color:#fff}
a.norm-card p,.norm-card p{color:rgba(255,255,255,.8)}
a.norm-card:hover{border-color:#fff;background:rgba(255,255,255,.06)}
a.norm-card:hover .code{color:#fff}
/* Mobile : 2 vignettes par ligne */
@media(max-width:900px){
  .gammes-grid{grid-template-columns:repeat(2,1fr)}
  .gammes .gamme-img{max-height:28vh}
  .gammes .gamme h3{font-size:16px}
}

/* ══ Header validé sur la démo (31/08) : pleine largeur, menu centré,
      « Espace pro » / « Devis » en liens soulignés — texte agrandi ══ */
header.main .wrap{max-width:none;padding-left:20px;padding-right:20px}
nav.primary{margin-left:auto;margin-right:auto}
nav.primary a{text-transform:none;font-size:15px}
.header-right{display:flex;align-items:center;gap:22px}
.header-right .navlink{color:var(--navy);font-weight:500;font-size:15px;letter-spacing:.01em;position:relative;padding:6px 0 8px;white-space:nowrap}
.header-right .navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}
.header-right .navlink:hover{color:var(--red)}
/* Grands écrans : un cran au-dessus, sans revenir aux tailles d'avant */
@media(min-width:1440px){nav.primary a,.header-right .navlink{font-size:16px}}
@media(min-width:1900px){nav.primary a,.header-right .navlink{font-size:17.5px}}
.has-sub .sub a{font-size:14.5px}
@media(max-width:900px){
  nav.primary{margin-left:0;margin-right:0}
  .header-right .navlink{font-size:14px;padding:4px 0 6px}
}

/* ══ Vignettes de gammes : la PHOTO occupe toute la carte (format photo 2:3),
      titre en surimpression, plus de cadre ni de bandeau blanc ══ */
.gammes .gamme{position:relative;background:none;border:0;border-top:0;overflow:hidden}
.gammes .gamme:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(26,31,60,.14)}
.gammes .gamme-img{aspect-ratio:2/3;max-height:46vh;margin:0;border:0;border-bottom:0}
.gammes .gamme-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gammes .gamme:hover .gamme-img img{transform:scale(1.04)}
/* Titre conservé SOUS la photo (demande client) */
.gammes .gamme{background:#fff}
.gammes .gamme-body{position:static;padding:14px 12px;background:#fff;gap:0;flex:0 0 auto}
.gammes .gamme h3{color:var(--navy);text-align:center;font-size:20px;margin:0;text-shadow:none}
.gammes .gamme:hover h3{color:var(--red)}
@media(max-width:900px){
  .gammes .gamme-img{max-height:34vh}
  .gammes .gamme h3{font-size:15px}
  .gammes .gamme-body{padding:10px 8px}
}

/* Hero : suppression des deux boutons « Demander un devis » / « Voir nos produits » (28/08) */
.hero--video .cta-row{display:none}

/* Volet Maintenance : même gabarit que « Prestations sur mesure » */
.perso .maint-wrap{margin-top:64px}
.maint,.maint-grid,.maint-card{all:unset}
@media(max-width:900px){.perso .maint-wrap{margin-top:38px}}

/* ══ Espace sous le trait rouge du header réduit (retour client) ══
   Le thème parent cumulait 30px de marge + 12px + 12px de padding + le fil
   d'Ariane : ~100px de vide avant le contenu. On resserre partout. */
.content-area{margin-top:10px!important}
.content-container{padding-top:4px!important}
.site-main{padding-top:4px!important}
.kadence-breadcrumbs{margin-bottom:6px!important;font-size:12.5px;line-height:1.35}
.single-product .content-container,
.single-product .site-main{padding-top:2px!important}
.single-product .content-area{margin-top:4px!important}
.single-product .entry-content-wrap{padding-top:0!important}
.single-product .entry.content-bg{padding-top:0!important}
@media(max-width:900px){
  .content-area{margin-top:4px!important}
  .kadence-breadcrumbs{margin-bottom:4px!important}
}

/* ══ Vidéo du site affichée EN ENTIER, jamais croppée (réf. Rosenbauer, mail Franck 01/09) :
   le bandeau épouse le 16:9 de la vidéo — pleine largeur, hauteur = largeur × 9/16,
   ni recadrage ni bandes noires. Le texte reste posé dessus. ══ */
@media(min-width:901px){
  .hero--video{height:auto!important;aspect-ratio:16/9;min-height:0!important;max-height:none!important}
  .hero--video .hero-bg{object-fit:cover;background:#0D1128}
}

/* Section gammes : photos en TAILLE RÉELLE = format d'origine du shooting (934×1400,
   soit 2:3) sans aucun recadrage — 09/2026. Le plafond max-height (46vh / 34vh) rendait
   le cadre plus court que la photo et object-fit:cover en coupait le haut et le bas.
   NB : l'<img> porte un style inline (absolute, height:100%, cover) dans le bloc :
   c'est le cadre .gamme-img qui doit avoir le bon ratio, pas l'image. */
.gammes .gamme-img{aspect-ratio:934/1400;max-height:none}
@media(max-width:900px){.gammes .gamme-img{max-height:none}}

/* ══ Vidéo du hero visible EN ENTIER À L'ÉCRAN (retour client 08/09) : le bandeau 16:9
   pleine largeur mesurait 810 à 1 080 px de haut selon l'écran, alors qu'il ne reste que
   ~750 px sous le header → le bas de la vidéo passait sous le pli (visible seulement en
   scrollant). Le bandeau est désormais plafonné à la hauteur d'écran restante sous le
   header (--hero-top mesuré par parts/hero.php, repli 157 px) ; quand ce plafond joue,
   la vidéo passe en object-fit:contain : entière, centrée, bandes marine sur les côtés
   au lieu d'être coupée en bas. Sur un écran au moins aussi haut que le 16:9, rien ne
   change (pleine largeur, pas de bandes). ══ */
@media(min-width:901px){
  /* width:100% explicite : sinon aspect-ratio transfère le plafond de hauteur sur la
     largeur et le bandeau rétrécit (1321 px sur un écran de 1440, blanc à droite). */
  .hero--video{width:100%}
  /* Mode « Vidéo entière » (Personnaliser) : plafond écran + bandes marine sur les côtés. */
  .hero--fit-contain{max-height:calc(100vh - var(--hero-top,157px))!important}
  .hero--fit-contain .hero-bg{object-fit:contain}
  /* Mode « Plein écran responsive » (défaut, retour client 08/09 « vidéo responsive ») :
     le bandeau = toute la largeur × toute la hauteur d'écran restante sous le header, la
     vidéo le remplit (object-fit:cover, recadrage haut/bas minimal, centré) — le bas du
     bandeau coïncide avec le bas de l'écran, quelle que soit la taille de la fenêtre. */
  .hero--fit-cover{aspect-ratio:auto!important;height:max(460px,calc(100vh - var(--hero-top,157px)))!important;max-height:none!important}
  .hero--fit-cover .hero-bg{object-fit:cover;object-position:center}
  /* Mode « 16:9 pleine largeur » : comportement d'origine (le bas peut passer sous le pli). */
  .hero--fit-ratio{max-height:none!important}
  .hero--fit-ratio .hero-bg{object-fit:cover}
}

/* ══ Hero vidéo : texte ancré EN BAS À GAUCHE (retour client 08/09) : l'accroche
      restait alignée à gauche mais centrée verticalement ; elle descend au pied du
      bandeau, avec une marge basse qui respire et suit la hauteur de l'écran. ══ */
.hero--video{align-items:flex-end}
/* Le padding remplace le centrage : haut réduit (garde-fou anti-débordement sur
   fenêtre basse), bas généreux = la marge esthétique demandée. */
.hero--video .wrap{padding:clamp(24px,5vh,72px) 6vw clamp(52px,8.5vh,104px)}
@media(max-width:900px){
  .hero--video .wrap{padding:clamp(20px,4vh,48px) 22px clamp(34px,6vh,60px)}
}

/* ══ Section Services : pictogrammes au trait à la place des emojis (retour client 08/09).
      Les emojis étaient convertis par WordPress en images couleur servies depuis s.w.org :
      rendu hétérogène, dépendance externe, et couleurs qui juraient avec le cadre rouge.
      Les SVG héritent de `color` via currentColor → une seule teinte pour toute la grille,
      et la même épaisseur de trait partout donne l'unité visuelle. ══ */
.perso-cell .icon svg{width:28px;height:28px;display:block}
@media(max-width:640px){ .perso-cell .icon svg{width:26px;height:26px} }

/* ══ Menu resserré (validé Franck 08/09/2026) : le bandeau de menu prenait 156 px de
      haut sur un écran de 1440 px, dont 70 px de simple vide (11+11 en haut, 24+24
      autour du logo) — soit 17 % de l'écran perdu avant la vidéo. On ne réduit que
      ces marges : le logo (53 px), le champ de recherche (30 px) et les polices du
      menu restent identiques au pixel.
      Le bandeau vidéo suit tout seul : sa hauteur est calculée en « hauteur d'écran
      moins hauteur du menu » via --hero-top, mesuré au chargement par le script de
      parts/hero.php. Vérifié de 1024 à 2560 px de large : le bas du bandeau coïncide
      toujours avec le bas de l'écran. Effet secondaire utile : le plancher de 460 px
      du bandeau ne se déclenche plus qu'en dessous de 569 px de hauteur de fenêtre,
      contre 617 px avant — un cas de scroll en moins. ══ */
@media(min-width:1440px){
  .topbar{padding:3px 0}
  header.main{padding:8px 0}
}
@media(min-width:1900px){
  .topbar{padding:4px 0}
  header.main{padding:9px 0}
}

/* ══════════════════════════════════════════════════════════════════════════════
   MENU FLOTTANT POSÉ SUR LA VIDÉO — validé Franck 08/09/2026, inspiré de s-gard.de

   Ce que ça change : la barre marine du haut est supprimée (sa recherche et ses
   langues ont rejoint le groupe de droite dans header.php), et l'en-tête flotte
   au-dessus du contenu au lieu de le pousser. Sur l'accueil la vidéo remonte donc
   au bord haut de l'écran et occupe TOUTE la hauteur : le menu ne lui prend plus
   rien (0 px, contre 109 px avant, 156 px avant-hier).

   Trois principes tenus ici :
   · état par défaut = OPAQUE. Sans JavaScript, ou sur toute page sans vidéo, la
     barre est blanche et lisible. La transparence n'est qu'un ajout sur l'accueil.
   · bords à 90° partout (demande Franck), aucun arrondi.
   · tout est aligné sur le même axe : logo, menu, recherche, langues et les deux
     liens de droite ont leur centre optique à la même hauteur.

   L'en-tête « Espace pro » (header.main--pro) n'est pas concerné : tout est
   accroché à .main--flottant.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── L'en-tête flotte ─────────────────────────────────────────────────────── */
header.main--flottant{
  position:fixed;top:20px;left:24px;right:24px;
  padding:9px 22px;border-bottom:0;border-radius:0;
  background:#fff;box-shadow:0 2px 16px rgba(13,17,40,.14);
  /* Aucun fondu : le fond mettait 0,25 s à changer alors que la couleur du texte
     basculait instantanément — on voyait donc du blanc sur du blanc pendant un
     quart de seconde. Tout bascule maintenant dans la même image (retour Franck).
     `none` explicite : une règle large du thème appliquait sinon `transition:all`,
     ce qui animait justement les couleurs qu'on veut voir changer d'un coup. */
  transition:none;
}
header.main--flottant .wrap{padding-left:0;padding-right:0;max-width:none}
header.main--flottant nav.primary a,header.main--flottant .header-right .navlink,
header.main--flottant .lang-btn,header.main--flottant .hsearch-loupe,
header.main--flottant .logo img{transition:none}

/* Sorti du flux, il ne pousse plus le contenu : sur toute page SANS vidéo il faut
   rendre la place, sinon le haut du contenu (titre de produit, fil d'Ariane…)
   passerait dessous. 20 px de marge + 71 px de barre + 20 px de respiration. */
body:not(.home):not(.espace-pro){padding-top:111px}
/* Et les ancres de l'accueil doivent s'arrêter sous la barre, pas derrière elle. */
section[id],[id="top"]{scroll-margin-top:105px}

/* ── Sur l'accueil, en haut de page : translucide et texte blanc ──────────── */
body.menu-sur-video header.main--flottant{
  background:rgba(26,31,60,.15);box-shadow:none;
}
/* Attention au sous-menu de « Gammes » : son panneau a un fond blanc. Le blanc ne
   doit donc s'appliquer qu'aux liens de PREMIER niveau (enfants directs), sinon
   « Par métier » et « Par type de produit » deviennent illisibles au survol. */
body.menu-sur-video header.main--flottant nav.primary > a,
body.menu-sur-video header.main--flottant nav.primary > .has-sub > a,
body.menu-sur-video header.main--flottant .header-right .navlink{color:#fff}
body.menu-sur-video header.main--flottant nav.primary > a:hover,
body.menu-sur-video header.main--flottant nav.primary > .has-sub > a:hover,
body.menu-sur-video header.main--flottant .header-right .navlink:hover{color:#fff;opacity:.72}
/* Le panneau déroulant garde son texte marine dans les deux états de la barre. */
header.main--flottant nav.primary .sub a{color:#1A1F3C}
header.main--flottant nav.primary .sub a:hover{color:#D4171E;opacity:1}
body.menu-sur-video header.main--flottant nav.primary .car{color:rgba(255,255,255,.7)}

/* ── Alignement : un seul axe pour tout le monde ──────────────────────────── */
/* Le liseré rouge sous « Espace pro » et « Devis » est retiré (demande Franck) ;
   la marge interne redevient donc symétrique, sinon le texte tombe 3 px trop bas. */
header.main--flottant .header-right .navlink::after{display:none}
header.main--flottant .header-right .navlink{padding:6px 0}
/* Le thème décalait le logo de 3 px vers le bas : on l'annule pour l'aligner. */
header.main--flottant .logo img{transform:none}

/* ── Recherche : une loupe qui ouvre et referme le champ ──────────────────── */
header.main--flottant .hsearch--top{
  width:36px;height:36px;overflow:hidden;border:0;border-radius:0;
  background:rgba(26,31,60,.08);display:flex;align-items:center;
  transition:width .22s ease,background-color .22s ease;
}
header.main--flottant .hsearch--top.est-ouvert{width:236px}
header.main--flottant .hsearch-loupe{
  width:36px;height:36px;flex:none;background:none;border:0;border-radius:0;
  color:#1A1F3C;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
}
header.main--flottant .hsearch-loupe svg{width:19px;height:19px;display:block}
header.main--flottant .hsearch--top input[type=search]{
  height:36px;padding:0 12px 0 2px;font-size:12.5px;border:0;border-radius:0;
  background:none;color:#1A1F3C;width:198px;
}
header.main--flottant .hsearch--top input::placeholder{color:rgba(26,31,60,.45)}
body.menu-sur-video header.main--flottant .hsearch--top{background:rgba(255,255,255,.16)}
body.menu-sur-video header.main--flottant .hsearch-loupe,
body.menu-sur-video header.main--flottant .hsearch--top input[type=search]{color:#fff}
body.menu-sur-video header.main--flottant .hsearch--top input::placeholder{color:rgba(255,255,255,.62)}

/* ── Langues : seule la langue active est visible ─────────────────────────── */
header.main--flottant .lang{position:relative}
header.main--flottant .lang-btn{
  display:flex;align-items:center;gap:5px;height:36px;padding:0 9px;
  background:rgba(26,31,60,.08);border:0;border-radius:0;cursor:pointer;
  font:600 12.5px/1 inherit;letter-spacing:.03em;color:#1A1F3C;
}
header.main--flottant .lang-btn .car{font-size:9px;opacity:.7;transition:transform .2s ease}
header.main--flottant .lang.est-ouvert .lang-btn .car{transform:rotate(180deg)}
body.menu-sur-video header.main--flottant .lang-btn{background:rgba(255,255,255,.16);color:#fff}
/* Le panneau s'ouvre SOUS le bouton : la barre ne bouge pas quand on l'ouvre. */
header.main--flottant .lang-panneau{
  position:absolute;top:calc(100% + 6px);right:0;min-width:100%;z-index:60;
  background:#fff;box-shadow:0 6px 22px rgba(13,17,40,.18);border-radius:0;
  display:none;flex-direction:column;overflow:hidden;
}
header.main--flottant .lang.est-ouvert .lang-panneau{display:flex}
header.main--flottant .lang-panneau a{
  display:block;padding:9px 16px;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:#1A1F3C;text-decoration:none;white-space:nowrap;
}
header.main--flottant .lang-panneau a:hover{background:#f2f4f8;color:#D4171E}
/* La langue en cours est déjà affichée sur le bouton : inutile de la reproposer. */
header.main--flottant .lang-panneau a.active{display:none}
/* Sans JavaScript le panneau reste accessible plutôt qu'invisible. */
header.main--flottant .lang:not(:has(.lang-btn)) .lang-panneau{display:flex;position:static;box-shadow:none;flex-direction:row}

/* ── Vignettes de gammes de la boutique : bords à 90° (demande Franck) ────── */
.bshop-cat{border-radius:0}

/* Le logo grandit sur les très grands écrans (42 → 53 → 60 px selon la largeur),
   donc la barre aussi : le dégagement des pages sans vidéo doit suivre, sinon il ne
   reste que 13 px entre la barre et le titre. */
@media(max-width:1439px){ body:not(.home):not(.espace-pro){padding-top:100px} }
@media(min-width:1900px){ body:not(.home):not(.espace-pro){padding-top:124px} }

/* ══════════════════════════════════════════════════════════════════════════════
   SECTIONS « GAMMES » ET « SOLUTIONS » : TENIR DANS L'ÉCRAN — retour Franck 09/09/2026

   Après un clic sur « Par métier » ou « Par type de produit », il fallait choisir entre
   un titre de section coupé par le menu et un bas de vignettes hors écran. Le calcul
   explique pourquoi : photo 2:3 non recadrée (508 px sur un écran de 1440 de large)
   + titre sous la photo (58) + bloc de titre de section (202) + menu flottant (91)
   + un peu d'air (24) = 883 px de hauteur d'écran nécessaires. Un portable en offre
   700 à 780.

   Le format d'origine des photos (934 × 1400) est intouchable — décision de 09/2026,
   aucun recadrage. Ce qui s'adapte ici, c'est donc la LARGEUR des cartes : plafonnée
   par la hauteur d'écran restante, la photo devient simplement plus petite, jamais
   coupée. La grille se recentre, et sur un écran d'au moins ~900 px de haut la formule
   ne mord pas : l'affichage reste exactement celui d'aujourd'hui.
   ══════════════════════════════════════════════════════════════════════════════ */
/* CORRECTION 2 du 09/09 (retour Franck : « presque trop » sur le 26 pouces, et trop de
   blanc à gauche, à droite, en haut et en bas sur le 14 pouces).
   Mon premier plafond était bien trop bas : à 1920×900 il laissait 392 px de blanc sur
   les côtés, et en rétrécissant les cartes il faisait passer les titres sur deux lignes.
   La bonne économie n'est pas dans la largeur mais dans la HAUTEUR perdue autour :
   60 px de marge haute de section, 60 px en bas, 14 px de part et d'autre du titre sous
   la photo. Chaque pixel récupéré là agrandit les vignettes d'autant.
   Résultat : à 1440×768 la grille reprend toute sa largeur, et à 1920×900 il ne reste
   qu'une quarantaine de pixels de blanc de chaque côté au lieu de 196. */
@media(min-width:901px) and (max-height:1000px){
  /* section.gammes et non .gammes : une règle plus spécifique du thème impose
     60 px, et à poids égal c'est elle qui gagnait — la marge restait à 60 px et
     tout le calcul de hauteur tombait à côté. */
  section.gammes{padding-top:16px;padding-bottom:32px}
  .gammes .kicker{margin-bottom:8px}
  .gammes .gamme-body{padding:8px 10px}
  /* Titres légèrement réduits (Franck : « si besoin revois un peu la taille des
     titres ») : 6 px sur le titre de section et 2 px sur celui des vignettes, soit
     14 px de hauteur rendus aux photos — 37 px de largeur de grille en plus. */
  .gammes h2{font-size:36px}
  .gammes .gamme h3{font-size:18px}
  /* « Une gamme adaptée / à chaque mission » est coupé en deux par un retour à la
     ligne dans le contenu : 39 px de haut en plus que « Nos solutions à vos
     besoins. » Sur écran contraint on le remet sur une ligne — ces 39 px vont aux
     photos, et les deux sections se comportent enfin pareil. */
  section.gammes h2 br{display:none}
  .gammes .gammes-grid{
    /* 277 px = menu flottant (98 sur grand écran, où le logo passe à 60 px) + air sous le menu (8) + bloc de titre resserré (82)
       + bandeau du titre sous la photo (38) + air sous la grille (24, ce que laisse
       l'ancrage). Photo = largeur × 1400/934 : plafonner l'une plafonne l'autre. */
    max-width:calc((100vh - 277px) * 2.6686 + 72px);
    margin-left:auto;
    margin-right:auto;
  }
}

/* ══════ « Notre société » — trois colonnes de texte (retour Franck 09/09/2026)
   Les trois engagements étaient une liste à cochets dans un panneau gris ; ils
   sont devenus un paragraphe rédigé, comme les deux autres colonnes. Plus de
   liste, plus d'aplat : trois colonnes de même largeur, donc le titre du milieu
   tombe sur l'axe de la page, et des hauteurs de texte comparables. */
.societe .societe-grid--3{grid-template-columns:repeat(3,1fr);gap:44px;margin-top:8px;
  align-items:start}
.societe-grid--3 .societe-col h3{font-size:22px;margin-bottom:9px;text-align:center}
.societe-grid--3 .societe-col p{font-size:15px}
/* Le repli mobile doit être écrit ici : la règle générale de la ligne 247 porte
   sur .societe-grid seul, moins spécifique, donc elle ne l'emporterait pas. */
@media(max-width:1024px){.societe .societe-grid--3{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:820px){.societe .societe-grid--3{grid-template-columns:1fr;gap:26px}}

/* ══════ Normes : quatre familles au lieu de quinze cartes (retour Franck 09/09/2026)
   La grille de cartes ne tenait plus : 19 normes en cartes de 28 px faisaient
   quatre rangées et 866 px de haut. Les normes sont désormais rangées par
   équipement — vêtement, tête, mains, pieds, l'ordre dans lequel on s'habille —
   en lignes d'une seule hauteur. Ajouter une norme ne change plus la mise en page.
   Mains et Pieds sont empilés dans la troisième colonne : sans cela leurs deux
   ou trois lignes laissaient un grand vide sous elles. */
.normes-fam{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;width:100%;text-align:left}
.normes-fam .nf-pile{display:flex;flex-direction:column;gap:30px}
.normes-fam .nf{border-top:2px solid var(--red);padding-top:14px}
.normes-fam .nf h4{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;
  font-size:15px;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.55);margin:0 0 10px}
.normes-fam .norm-lg{display:flex;align-items:baseline;gap:10px;padding:6px 8px 6px 0;
  border-bottom:1px solid rgba(255,255,255,.1);color:inherit;text-decoration:none;
  transition:background-color .15s ease,padding-left .15s ease}
.normes-fam .norm-lg:last-child{border-bottom:0}
.normes-fam .norm-lg .c{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;
  font-size:18px;line-height:1.2;white-space:nowrap;color:#fff}
.normes-fam .norm-lg .l{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.62)}
.normes-fam .norm-lg:hover{background:rgba(255,255,255,.07);padding-left:8px}
.normes-fam .norm-lg:hover .l{color:#fff}
.normes-fam .norm-lg:hover .c{color:var(--red)}
@media(max-width:980px){.normes-fam{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:640px){.normes-fam{grid-template-columns:1fr;gap:26px}
  .normes-fam .nf-pile{gap:26px}}

/* ══════════════════════════════════════════════════════════════════════════════
   ESPACE PRO — même habillage que le menu public (décision Franck 11/09/2026)
   ══════════════════════════════════════════════════════════════════════════════
   `header.main` est déclaré `position:sticky` plus haut, mais le collage ne prend
   pas sur ce site : un conteneur ancêtre le neutralise. C'est déjà la raison pour
   laquelle le menu public est en `fixed` — on reprend la même mécanique.

   Les deux barres pro (bandeau bleu + en-tête) forment un seul bloc flottant,
   détaché des bords comme la carte du site vitrine. La hauteur à réserver sous ce
   bloc est mesurée par menu.js et écrite dans --pro-head : les valeurs ci-dessous
   ne servent qu'avant l'exécution du script, pour éviter un sursaut à l'affichage. */
body.espace-pro .topbar--pro{
  position:fixed;top:20px;left:24px;right:24px;z-index:51;
  border-bottom:0;
}
body.espace-pro .topbar--pro .wrap{padding-left:22px;padding-right:22px;max-width:none}

body.espace-pro header.main--pro{
  position:fixed;left:24px;right:24px;z-index:50;
  top:calc(20px + var(--pro-topbar,29px));
  padding:9px 22px;border-bottom:0;border-radius:0;
  background:#fff;box-shadow:0 2px 16px rgba(13,17,40,.14);
  transition:none;
}
body.espace-pro header.main--pro .wrap{padding-left:0;padding-right:0;max-width:none}

body.espace-pro{padding-top:var(--pro-head,132px)}
/* Les ancres doivent s'arrêter sous le bloc, pas derrière lui. */
body.espace-pro section[id],body.espace-pro [id="top"]{
  scroll-margin-top:calc(var(--pro-head,132px) + 12px);
}