/* =========================================================================
   V2 CHROME - header cockpit + menu plein ecran + mega menus + footer,
   portes A L'IDENTIQUE depuis la home /v2/index.html (2026-08-20).
   Charge apres v2-skin.css. Variables :root = tokens dark de la home.
   ========================================================================= */
:root{
  /* Gold (identique clair/sombre) */
  --gold:#ebbb81; --gold2:#f2c088; --gold3:#c99a5b; --gold-shadow:#8a6531;
  --on-gold:#07070b;
  /* Backgrounds */
  --bg:#07070b;
  --surface-1:#0f0d0a;
  --surface-2:#0e0c0a;
  --surface-warm:#12100c;
  --surface-deep:#050507;
  --surface-scroll:#0a0a0c;
  /* Surfaces "cinema" : cartes photos / preview - restent sombres dans les 2 themes
     (design premium type Framer/Vercel, contraste visuel preserve) */
  --cinema-1:#0f0e0b;
  --cinema-2:#0a0806;
  --cinema-warm:#1a1408;
  --cinema-text:#f2f1ed;
  --cinema-muted:rgba(242,241,237,.68);
  --cinema-border:rgba(255,255,255,.08);
  /* Text */
  --txt:#f2f1ed;
  --muted:rgba(242,241,237,.68);
  --fade:rgba(242,241,237,.5);
  --txt-outline:rgba(242,241,237,.42);
  /* Lines / borders */
  --line:#26262b;
  --card-b:rgba(255,255,255,.07);
  /* Overlays (glass / hover backgrounds) */
  --overlay-1:rgba(255,255,255,.04);
  --overlay-1s:rgba(255,255,255,.012);
  --overlay-2:rgba(255,255,255,.06);
  --overlay-3:rgba(255,255,255,.09);
  --overlay-4:rgba(255,255,255,.14);
  --overlay-inverse-1:rgba(0,0,0,.35);
  --overlay-inverse-2:rgba(0,0,0,.05);
  /* Shadows */
  --sh-soft:rgba(0,0,0,.4);
  --sh-med:rgba(0,0,0,.5);
  --sh-heavy:rgba(0,0,0,.55);
  --sh-max:rgba(0,0,0,.85);
  --sh-btn:rgba(0,0,0,.45);
  --sh-btn-warm:rgba(235,187,129,.42);
  --sh-veil-1:rgba(0,0,0,.35);
  --sh-veil-2:rgba(0,0,0,.05);
  /* Voiles sombres pour cartes/photos avec fond or */
  --veil-strong:rgba(7,7,11,.92);
  --veil-med:rgba(10,8,6,.75);
  /* Divers */
  --slant:-17deg;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

.gold{background:linear-gradient(120deg,var(--gold) 30%,var(--gold2) 50%,var(--gold3) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

#hd{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1220px,calc(100% - 96px));z-index:9000;background:linear-gradient(100deg,rgba(235,187,129,.9),rgba(212,167,106,.55) 35%,rgba(212,167,106,.55) 65%,rgba(235,187,129,.85));transition:transform .45s cubic-bezier(.19,1,.22,1);clip-path:polygon(0 0,100% 0,calc(100% - 44px) 100%,44px 100%)}

#hd::before{content:"";position:absolute;inset:0;z-index:0;background:var(--veil-strong);backdrop-filter:blur(14px);clip-path:polygon(2.5px 0,calc(100% - 2.5px) 0,calc(100% - 46.5px) calc(100% - 2px),46.5px calc(100% - 2px));transition:background .3s ease}

#hd.hid{transform:translate(-50%,-110%)}

#hd.scrolled::before{background:var(--veil-strong)}

.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;margin-top:56px;font-size:12.5px;color:var(--fade)}





.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

.nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 60px}

.logo{font-weight:800;font-size:18px;text-decoration:none;letter-spacing:-.01em;font-stretch:118%;text-transform:uppercase}

.logo i{font-style:italic;background:linear-gradient(120deg,var(--gold),var(--gold2),var(--gold3));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.12em}

.nav-mid{display:flex;gap:26px}

.nav-mid a{font-size:12.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--fade);text-decoration:none;transition:color .3s}

.nav-mid a:hover{color:var(--gold)}
@media(max-width:1080px){
.nav-mid{display:none}
}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px;letter-spacing:.6px;text-decoration:none;padding:13px 34px;text-transform:uppercase;font-stretch:108%;transform:skewX(var(--slant));transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .3s ease}

.btn>*{transform:skewX(calc(-1 * var(--slant)));display:inline-block}

.btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:-5px 6px 0 var(--gold-shadow),-4px 14px 24px -6px var(--sh-med)}

.btn-gold:hover{background:var(--gold2);box-shadow:-8px 9px 0 var(--gold-shadow),-8px 20px 30px -6px rgba(235,187,129,.42)}

.btn-gold:active{box-shadow:-2px 2px 0 var(--gold-shadow),-2px 4px 9px var(--sh-soft)}


.btn-ghost{background:var(--overlay-3);color:var(--txt);box-shadow:-5px 6px 0 var(--overlay-4),-4px 14px 24px -6px var(--sh-btn)}

.btn-ghost:hover{background:rgba(235,187,129,.2);box-shadow:-8px 9px 0 rgba(235,187,129,.3),-8px 20px 30px -6px var(--sh-btn)}

.btn-ghost:active{box-shadow:-2px 2px 0 var(--overlay-4),-2px 4px 9px var(--sh-soft)}

.nav .btn-gold{padding:9px 22px;font-size:12px;letter-spacing:1px;box-shadow:-3px 3px 0 var(--gold-shadow),-2px 8px 14px -6px var(--sh-med)}

.nav .btn-gold:hover{box-shadow:-5px 5px 0 var(--gold-shadow),-4px 11px 18px -6px rgba(235,187,129,.4)}

.nav .btn-gold:active{box-shadow:-1px 1px 0 var(--gold-shadow)}


.btn .barr{display:inline-block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}

.btn:hover .barr{transform:skewX(calc(-1 * var(--slant))) rotate(-45deg) scale(1.2)}

.hero .wrap{position:relative;z-index:2}

.hero .meta .wrap{display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--fade);flex-wrap:wrap}

#constat .wrap{position:relative;z-index:1}


/* ---------- NAV ACTIVE + LOADER SLAM ---------- */
.nav-mid a.on{color:var(--gold)}

.final .wrap{position:relative;z-index:1;text-align:center}

.bigmark{font-size:clamp(28px,6vw,88px);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;text-align:center;user-select:none;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(235,187,129,.25);
  background:linear-gradient(120deg,var(--gold),var(--gold2),var(--gold3));background-repeat:no-repeat;background-size:var(--fill,0%) 100%;
  -webkit-background-clip:text;background-clip:text}

.foot-grid{display:grid;grid-template-columns:1.5fr 1fr .9fr 1.2fr;gap:48px;padding:56px 0 8px;border-top:1px solid var(--line);margin-top:44px;text-align:left}

.foot-logo{display:flex;align-items:center;gap:11px;font-weight:800;font-stretch:120%;text-transform:uppercase;font-size:19px;letter-spacing:-.01em;margin-bottom:14px}

.foot-logo img{width:40px;height:40px;flex:none}

.foot-loc{font-style:normal}

.foot-social{list-style:none;display:flex;gap:10px;margin:20px 0 0;padding:0}

.foot-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);color:var(--muted);transition:color .2s ease,border-color .2s ease,transform .2s ease}

.foot-social a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)}

.foot-social svg{width:18px;height:18px}

.foot-brand p{font-size:14px;color:var(--muted);max-width:36ch;line-height:1.55}

.foot-loc{margin-top:18px;font-size:13px;color:var(--fade)}

.foot-loc b{color:var(--txt);font-weight:600}

.foot-col h4{font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);font-stretch:110%;margin-bottom:16px}

.foot-col a{display:block;font-size:14px;color:var(--muted);text-decoration:none;padding:4px 0;transition:color .2s ease}

.foot-col a:hover{color:var(--gold)}
@media(max-width:900px){
.foot-grid{grid-template-columns:1fr 1fr;gap:36px 28px}
}
@media(max-width:520px){
.foot-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
.wrap{padding:0 20px}
.nav{padding:0 20px}
.btn{font-size:11.5px;padding:11px 16px;letter-spacing:.4px}
}

body.est-modal-ouverte{overflow:hidden}


/* Viewer use cases plein ecran : immersion totale, chrome masque, slide sans scroll */
body.est-modal-ouverte #hd,body.est-modal-ouverte .prefs,body.est-modal-ouverte .float-cta{opacity:0!important;pointer-events:none!important}

@media(max-width:640px){
  .nav{padding:0 30px}
  .nav .logo{font-size:13px}
  .nav .btn-gold{font-size:11px;padding:9px 13px;gap:5px;letter-spacing:.3px}
  .bigmark{font-size:clamp(20px,5.4vw,88px)}
}

/* ===== MENU MOBILE PLEIN ECRAN 2026-08-14 ===== */
.nav-actions{display:flex;align-items:center;gap:12px}

.menu-trigger{display:none;align-items:center;gap:9px;background:var(--surface-1);color:var(--txt);border:1px solid var(--line);padding:11px 15px;font-weight:800;font-size:12px;font-stretch:112%;letter-spacing:2px;text-transform:uppercase;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:border-color .25s ease,transform .25s ease}

.menu-trigger:hover{border-color:var(--gold);transform:translateY(-1px)}

.menu-trigger .mt-glyph{display:inline-flex;flex-direction:column;gap:4px}

.menu-trigger .mt-glyph i{display:block;width:17px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold2));transform:skewX(-20deg)}

.menu-trigger .mt-glyph i:nth-child(2){width:11px;margin-left:6px}

.menu-trigger .mt-lbl{line-height:1}
@media(max-width:1080px){
.menu-trigger{display:inline-flex}
}
@media(max-width:640px){
.nav-actions .btn-gold{display:none}
}


.menu-ov{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s}

.menu-ov.on{opacity:1;visibility:visible;pointer-events:auto}

.menu-ov::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 78% at 100% 0,rgba(235,187,129,.16),transparent 55%);pointer-events:none;z-index:0}

.menu-ov::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(122deg,transparent 0 62px,rgba(235,187,129,.045) 62px 63px);pointer-events:none;z-index:0}

.menu-ov-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);position:relative;z-index:2}

.menu-ov-head .mo-label{font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--fade)}

.menu-close{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-1);border:1px solid var(--line);color:var(--gold);cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:border-color .25s ease,transform .35s ease}

.menu-close:hover{border-color:var(--gold);transform:rotate(90deg)}

.menu-close svg{width:20px;height:20px}

.menu-nav{flex:1;display:flex;flex-direction:column;justify-content:center;padding:8px 22px;position:relative;z-index:2}

.menu-link{display:flex;align-items:center;gap:16px;padding:17px 4px;text-decoration:none;border-bottom:1px solid rgba(235,187,129,.14);opacity:0;transform:translateY(26px)}

.menu-ov.on .menu-link{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.19,1,.22,1)}

.menu-ov.on .menu-link:nth-child(1){transition-delay:.06s}

.menu-ov.on .menu-link:nth-child(2){transition-delay:.12s}

.menu-ov.on .menu-link:nth-child(3){transition-delay:.18s}

.menu-ov.on .menu-link:nth-child(4){transition-delay:.24s}

.menu-ov.on .menu-link:nth-child(5){transition-delay:.30s}

.menu-ov.on .menu-link:nth-child(6){transition-delay:.36s}

.menu-link .ml-num{font-weight:700;font-size:12px;color:var(--gold);letter-spacing:1px;min-width:24px}

.menu-link .ml-txt{flex:1;font-weight:800;font-size:clamp(26px,8.4vw,42px);font-stretch:116%;text-transform:uppercase;letter-spacing:-.01em;line-height:1;color:var(--txt);transition:color .3s ease}

.menu-link .ml-ar{color:var(--gold);font-size:20px;transform:translateX(-8px);opacity:0;transition:transform .3s ease,opacity .3s ease}

.menu-link:hover .ml-txt,.menu-link:focus-visible .ml-txt{color:var(--gold)}

.menu-link:hover .ml-ar,.menu-link:focus-visible .ml-ar{transform:none;opacity:1}

.menu-foot{padding:20px 22px 30px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}

.menu-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:var(--on-gold);font-weight:700;font-size:13px;letter-spacing:.6px;text-transform:uppercase;padding:15px 22px;text-decoration:none;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}

.menu-cta .barr{color:var(--on-gold)}

.menu-social{display:flex;gap:12px}

.menu-social a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--muted);transition:border-color .25s ease,color .25s ease}

.menu-social a:hover{border-color:var(--gold);color:var(--gold)}

.menu-social svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){
.menu-ov,.menu-ov.on .menu-link{transition:opacity .2s ease!important}
.menu-ov.on .menu-link{transform:none}
}

.svc-cta .barr{color:var(--on-gold)}


/* ===== MEGA MENU SERVICES 2026-08-18 ===== */
.mega{position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-8px);width:min(1080px,calc(100% - 96px));z-index:8900;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}

.mega.est-ouvert{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.mega[hidden]{display:none}

.mega-inner{position:relative;background:linear-gradient(120deg,var(--gold3),var(--gold) 50%,var(--gold3));border:0;box-shadow:0 44px 100px -34px rgba(0,0,0,.75);padding:1.6px;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}

.mega-fill{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--surface-1),var(--surface-2));padding:26px 26px 28px;clip-path:polygon(20.4px 0,100% 0,100% calc(100% - 20.4px),calc(100% - 20.4px) 100%,0 100%,0 20.4px)}

.mega-fill::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 0% 0%,rgba(235,187,129,.09),transparent 60%)}

.mega-cap{position:relative;z-index:1;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:2px 2px 18px;display:flex;align-items:center;gap:12px}

.mega-cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(235,187,129,.4),rgba(235,187,129,0))}

.mega-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}

.mega-item{position:relative;display:flex;align-items:flex-start;gap:13px;padding:15px 16px;text-decoration:none;color:var(--txt);border:1px solid transparent;cursor:pointer;transition:background .22s ease,border-color .22s ease}

.mega-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--gold),var(--gold3));opacity:0;transition:opacity .22s ease}

.mega-item:hover,.mega-item:focus-visible{background:rgba(235,187,129,.07);border-color:rgba(235,187,129,.22);outline:none}

.mega-item:hover::before,.mega-item:focus-visible::before{opacity:1}

.mega-ic{flex:0 0 38px;width:38px;height:38px;margin-top:2px;background:linear-gradient(150deg,var(--gold),var(--gold3));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;opacity:.92;transition:opacity .2s ease}

.mega-item:hover .mega-ic,.mega-item:focus-visible .mega-ic{opacity:1}

.mega-num{font-size:10px;font-weight:800;color:var(--gold);letter-spacing:1.5px;opacity:.85}

.mega-tt{display:flex;flex-direction:column;gap:3px;flex:1}

.mega-titre{font-weight:800;font-stretch:110%;font-size:14px;text-transform:uppercase;letter-spacing:.01em;line-height:1.15;transition:color .2s ease}

.mega-item:hover .mega-titre,.mega-item:focus-visible .mega-titre{color:var(--gold2)}

.mega-desc{font-size:12px;color:var(--muted);line-height:1.35}

.mega-ar{color:var(--gold);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease;font-size:15px}

.mega-item:hover .mega-ar,.mega-item:focus-visible .mega-ar{opacity:1;transform:none}
@media(max-width:1080px){
.mega{display:none!important}
}

.menu-has-sub .ml-chevron{color:var(--gold);font-size:22px;line-height:1;transition:transform .25s ease}

.menu-has-sub[aria-expanded="true"] .ml-chevron{transform:rotate(45deg)}

.menu-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px;padding-left:8px}

.menu-sub[hidden]{display:none}

.menu-sub-item{display:flex;align-items:center;gap:12px;background:none;border:none;border-left:1px solid rgba(235,187,129,.25);text-align:left;color:var(--muted);font-family:inherit;font-size:15px;font-weight:600;padding:9px 0 9px 16px;cursor:pointer;transition:color .2s ease,border-color .2s ease}

.menu-sub-item:hover,.menu-sub-item:active{color:var(--gold);border-color:var(--gold)}

.menu-sub-num{font-size:10px;font-weight:800;color:var(--gold);letter-spacing:1px;min-width:18px}

.menu-ov .menu-nav{overflow-y:auto}


/* badge partenaire Infomaniak */


.foot-badge{display:block;margin-top:16px;width:120px;height:auto;border-radius:3px}

#approche .app-copy .btn{align-self:flex-start;margin-top:4px}
/* ===== Icones secteurs : mega Projets + filtres bibliotheque ===== */
.mega-item .m-ic{width:30px;height:30px;flex:none;stroke:var(--gold);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}

/* --- Regles element footer de la home, re-scopees #foot ---
   Fond pose explicitement : sur la home il herite du body sombre ; ici le body
   peut passer en clair (theme), le footer reste sombre comme sur la home. --- */
#foot{background:#07070b;border-top:1px solid var(--line);padding:46px 0 40px;overflow:hidden}
#foot a{color:var(--muted)}

/* --- Carre reglages bas-gauche (porte de la home ; angles francs) --- */
.prefs{position:fixed;left:22px;bottom:22px;z-index:9998}
.prefs-toggle{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--surface-1);border:1px solid var(--line);color:var(--gold);cursor:pointer;box-shadow:0 10px 30px var(--sh-med);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.prefs-toggle:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 14px 40px var(--sh-btn-warm)}
.prefs-toggle svg{width:22px;height:22px}
.prefs.open .prefs-toggle{border-color:var(--gold)}
.prefs-panel{position:absolute;left:0;bottom:62px;width:252px;background:var(--surface-1);border:1px solid var(--line);padding:16px 18px;box-shadow:0 18px 50px var(--sh-heavy)}
.prefs-panel[hidden]{display:none}
.prefs-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.prefs-row+.prefs-row{border-top:1px solid var(--line)}
.prefs-lbl{font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);font-stretch:110%}
.prefs-seg{display:flex;border:1px solid var(--line)}
.prefs-seg button,.prefs-seg a{font:inherit;font-size:12px;line-height:1;padding:8px 12px;background:transparent;border:none;color:var(--muted);cursor:pointer;letter-spacing:.04em;text-decoration:none;transition:background .2s ease,color .2s ease}
.prefs-seg button+button,.prefs-seg a+a{border-left:1px solid var(--line)}
.prefs-seg button.on,.prefs-seg a.on{background:linear-gradient(120deg,var(--gold),var(--gold3));color:var(--on-gold);font-weight:700}
@media(max-width:640px){.prefs{left:14px;bottom:14px} .prefs-toggle{width:46px;height:46px}}

/* --- Barre de progression de scroll (identique home : filet or fixe en bas) --- */
.progress{position:fixed;bottom:0;left:0;right:0;height:2.5px;z-index:9996}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold3),var(--gold),var(--gold2));transform-origin:left;transform:scaleX(0)}

/* --- Cadre biseaute .a-frame (SVG pose par window.__poserFrame, comme la home) :
       le filet suit exactement la decoupe du clip-path --- */
.a-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;display:block}
.a-frame polygon{fill:none;stroke:rgba(235,187,129,.3);stroke-width:1}

/* --- Adaptations pages interieures (blog/articles/legales) --- */
/* Le header cockpit FLOTTE sur le fond du hero (comme sur la home) :
   pas de bande au-dessus, les heros remontent sous le header et
   compensent avec leur padding interne. */
.ws-main{padding-top:0}
.ws-blog-hero--centered{padding-top:200px !important}
.ws-blog-hero{padding-top:180px}
.ws-single-art__hero{padding-top:180px !important}
@media(max-width:640px){
  .ws-blog-hero--centered{padding-top:140px !important}
  .ws-blog-hero{padding-top:130px}
  .ws-single-art__hero{padding-top:130px !important}
}
/* correctifs mobile du 14/08 portes (largeur cockpit + biseau reduit) */
@media(max-width:640px){
  #hd{width:min(1220px,calc(100% - 24px));clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,26px 100%)}
  #hd::before{clip-path:polygon(2.5px 0,calc(100% - 2.5px) 0,calc(100% - 28.5px) calc(100% - 2px),28.5px calc(100% - 2px))}
}
/* le switcher de langue existant, place dans le menu plein ecran */
.menu-foot .ws-lang-switch{margin-right:auto}
/* la barre de progression de lecture passe sous le header fixe */
.ws-read-progress{z-index:8000}