/* ══════════════════════════════════════════════════════════
   WONDERGUIDE — Header, d'après header.svg (1312 × 56)

   logo texte    hauteur 31 · à gauche
   menu carré    56 × 56 · filet #13171E · deux barres 24 × 2
                 espacées de 10, beige #D7CAAF
   « Commencer » même hauteur que le menu, collé à lui

   Pas de fond : le header est posé sur la page. Il bascule
   en navy quand ce qui passe sous lui est clair.
   Angles nets partout.
   ══════════════════════════════════════════════════════════ */

.wgh{
    --encre: #D7CAAF;          /* beige par défaut, sur fond sombre */
    --encre-inv: #04080F;
    --filet: #13171E;
    --H: 56px;

    position:fixed;top:0;left:0;right:0;z-index:9000;
    padding:24px 0;
    pointer-events:none;       /* les zones vides laissent passer les clics */
    font-family:'Schibsted Grotesk','Space Grotesk',system-ui,sans-serif;
    transition:padding .35s cubic-bezier(.16,1,.3,1);
}
.wgh *,.wgh *::before,.wgh *::after{box-sizing:border-box;min-width:0;border-radius:0 !important;}
.wgh a{text-decoration:none !important;}
.wgh button{font-family:inherit;cursor:pointer;}

.wgh.is-compact{padding:14px 0;}

/* ── La barre ───────────────────────────────────────── */
.wgh__barre{
    pointer-events:auto;
    width:min(1312px, calc(100% - 48px));
    height:var(--H);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* ── Logo : texte, puis mini au défilement ──────────── */
.wgh__logo{
    position:relative;display:block;
    height:31px;width:126px;      /* 587.06 × 144.58 ramené à 31 de haut */
    color:var(--encre);
    transition:color .3s, width .45s cubic-bezier(.16,1,.3,1);
}
.wgh__logo svg{
    position:absolute;left:0;top:50%;
    display:block;height:auto;
    transition:opacity .35s, transform .45s cubic-bezier(.16,1,.3,1);
}
.wgh__logo-texte{width:126px;transform:translateY(-50%);}
.wgh__logo-mini{
    width:62px;                  /* 196.11 × 76.74 ramené à 24 de haut */
    opacity:0;transform:translateY(-50%) scale(.8);transform-origin:left center;
}
.wgh.is-compact .wgh__logo{width:62px;}
.wgh.is-compact .wgh__logo-texte{opacity:0;transform:translateY(-50%) scale(.85);}
.wgh.is-compact .wgh__logo-mini {opacity:1;transform:translateY(-50%) scale(1);}

.wgh__logo:hover .wgh__logo-texte,
.wgh__logo:hover .wgh__logo-mini{filter:brightness(1.12);}

/* ── Côté droit ─────────────────────────────────────── */
.wgh__droite{display:flex;align-items:stretch;height:var(--H);}

/* « Commencer » : même hauteur que le menu */
.wgh__cta{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:0;
    height:var(--H);padding:0 26px;
    background:#D7CAAF;
    font-size:15px !important;font-weight:600 !important;letter-spacing:.01em;white-space:nowrap;
    color:#04080F !important;-webkit-text-fill-color:#04080F !important;
    transition:background .3s, gap .35s cubic-bezier(.16,1,.3,1);
}
.wgh__cta::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    transform:translateX(-120%);
    transition:transform .8s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
}
.wgh__cta:hover::before{transform:translateX(120%);}
.wgh__cta:hover{background:#E4DAC4;gap:10px;}
.wgh__cta-txt{position:relative;z-index:1;}
.wgh__cta-fleche{
    position:relative;z-index:1;
    width:0;height:16px;opacity:0;transform:translateX(-8px);
    transition:width .35s cubic-bezier(.16,1,.3,1), opacity .25s, transform .35s cubic-bezier(.16,1,.3,1);
}
.wgh__cta:hover .wgh__cta-fleche{width:16px;opacity:1;transform:translateX(0);}

/* Menu carré : 55 + filet d'un pixel */
.wgh__menu{
    position:relative;
    width:var(--H) !important;height:var(--H) !important;
    padding:0 !important;margin:0 !important;
    background:transparent !important;
    border:1px solid var(--filet) !important;
    border-left:none !important;
    box-shadow:none !important;
    display:flex !important;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;                          /* 32 − 22 − 2 */
    transition:background .25s, border-color .3s;
}
.wgh__menu:hover{background:rgba(215,202,175,.1) !important;}
.wgh__menu span{
    display:block;width:24px;height:2px;
    background:var(--encre);
    transition:transform .3s cubic-bezier(.16,1,.3,1), width .3s cubic-bezier(.16,1,.3,1), background .3s;
}
/* Au survol, les barres se décalent */
.wgh:not(.is-ouvert) .wgh__menu:hover span:nth-child(1){transform:translateX(-4px);}
.wgh:not(.is-ouvert) .wgh__menu:hover span:nth-child(2){transform:translateX(4px);}
/* Ouvert, elles se croisent */
.wgh.is-ouvert .wgh__menu span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.wgh.is-ouvert .wgh__menu span:nth-child(2){transform:translateY(-5px) rotate(-45deg);}
.wgh.is-ouvert .wgh__menu{border-color:rgba(215,202,175,.3) !important;z-index:9003;}
.wgh.is-ouvert .wgh__menu span{background:#D7CAAF;}
.wgh.is-ouvert .wgh__logo{color:#D7CAAF;z-index:9003;}

/* ── Arrivée ────────────────────────────────────────── */
.wgh__logo,.wgh__droite{opacity:0;transform:translateY(-10px);}
.wgh.is-pret .wgh__logo,
.wgh.is-pret .wgh__droite{
    opacity:1;transform:translateY(0);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1),
               color .3s, width .45s cubic-bezier(.16,1,.3,1);
}
.wgh.is-pret .wgh__droite{transition-delay:.1s;}

/* ══════════════════════════════════════════════════════════
   MENU DÉPLOYÉ — plein écran, nuit
   ══════════════════════════════════════════════════════════ */
.wgh__panneau{
    pointer-events:auto;
    position:fixed;inset:0;z-index:9002;
    background:#04080F;
    overflow-y:auto;
    padding:128px 0 48px;
    opacity:0;visibility:hidden;
    transition:opacity .35s, visibility .35s;
}
.wgh.is-ouvert .wgh__panneau{opacity:1;visibility:visible;}

.wgh__panneau-nav{
    width:min(1312px, calc(100% - 48px));margin:0 auto;
    display:grid;grid-template-columns:1.4fr 1fr;gap:0 80px;
}
.wgh__panneau-liens{grid-row:1 / span 4;display:flex;flex-direction:column;}
.wgh__panneau-lien{
    display:flex;align-items:baseline;gap:22px;
    padding:18px 0;border-bottom:1px solid rgba(215,202,175,.14);
    font-size:clamp(30px,4.2vw,56px) !important;font-weight:600 !important;
    letter-spacing:-.035em;line-height:1.05;
    color:#FAF9F7 !important;-webkit-text-fill-color:#FAF9F7 !important;
    transition:color .2s, padding-left .3s cubic-bezier(.16,1,.3,1);
}
.wgh__panneau-lien:hover{
    color:#D7CAAF !important;-webkit-text-fill-color:#D7CAAF !important;padding-left:14px;
}
.wgh__panneau-num{
    font-size:14px !important;font-weight:600;letter-spacing:.08em;
    color:rgba(215,202,175,.5) !important;-webkit-text-fill-color:rgba(215,202,175,.5) !important;
    font-variant-numeric:tabular-nums;
}

.wgh__panneau-demo,
.wgh__panneau-compte,
.wgh__panneau-tel,
.wgh__panneau-langue{grid-column:2;}

.wgh__panneau-demo{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px 22px;margin-top:18px;
    border:1px solid rgba(215,202,175,.35);
    font-size:16px !important;font-weight:600 !important;
    color:#D7CAAF !important;-webkit-text-fill-color:#D7CAAF !important;
    transition:background .2s;
}
.wgh__panneau-demo:hover{background:rgba(215,202,175,.1);}

.wgh__panneau-compte{display:flex;flex-direction:column;gap:2px;margin-top:12px;}
.wgh__panneau-cta{
    display:block;text-align:center;padding:20px 22px;
    background:#D7CAAF;
    color:#04080F !important;-webkit-text-fill-color:#04080F !important;
    font-size:16px !important;font-weight:700 !important;
    transition:background .2s;
}
.wgh__panneau-cta:hover{background:#E4DAC4;}
.wgh__panneau-sec{
    display:block;text-align:center;padding:16px 22px;
    font-size:15px !important;font-weight:600 !important;
    color:rgba(250,249,247,0.74) !important;-webkit-text-fill-color:rgba(250,249,247,0.74) !important;
}
.wgh__panneau-sec:hover{color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;}

.wgh__panneau-tel{
    display:flex;flex-direction:column;gap:5px;
    margin-top:30px;padding-top:26px;
    border-top:1px solid rgba(215,202,175,.14);
}
.wgh__panneau-tel-lab{
    font-size:14px !important;
    color:rgba(250,249,247,0.68) !important;-webkit-text-fill-color:rgba(250,249,247,0.68) !important;
}
.wgh__panneau-tel-num{
    font-size:24px !important;font-weight:700 !important;letter-spacing:-.01em;
    color:#D7CAAF !important;-webkit-text-fill-color:#D7CAAF !important;
}
.wgh__panneau-langue{margin-top:22px;}
.wgh__panneau-langue .country-selector{position:static !important;margin:0 !important;}
.wgh__panneau-langue .wgcurrent,
.wgh__panneau-langue .country-selector a{
    background:transparent !important;border:none !important;
    color:rgba(250,249,247,0.7) !important;font-size:15px !important;
}

/* Entrées en cascade */
.wgh__panneau-lien,.wgh__panneau-demo,.wgh__panneau-compte,.wgh__panneau-tel{
    opacity:0;transform:translateY(18px);
    transition:opacity .45s, transform .6s cubic-bezier(.16,1,.3,1), color .2s, padding-left .3s cubic-bezier(.16,1,.3,1), background .2s;
}
.wgh.is-ouvert .wgh__panneau-lien,
.wgh.is-ouvert .wgh__panneau-demo,
.wgh.is-ouvert .wgh__panneau-compte,
.wgh.is-ouvert .wgh__panneau-tel{opacity:1;transform:translateY(0);}
.wgh.is-ouvert .wgh__panneau-lien:nth-child(1){transition-delay:.08s;}
.wgh.is-ouvert .wgh__panneau-lien:nth-child(2){transition-delay:.13s;}
.wgh.is-ouvert .wgh__panneau-lien:nth-child(3){transition-delay:.18s;}
.wgh.is-ouvert .wgh__panneau-lien:nth-child(4){transition-delay:.23s;}
.wgh.is-ouvert .wgh__panneau-demo  {transition-delay:.28s;}
.wgh.is-ouvert .wgh__panneau-compte{transition-delay:.33s;}
.wgh.is-ouvert .wgh__panneau-tel   {transition-delay:.38s;}

.wgh__voile{display:none;}

/* ══════════════════════════════════════════════════════════
   ADAPTATIONS
   ══════════════════════════════════════════════════════════ */
@media(max-width:900px){
    .wgh__panneau-nav{grid-template-columns:1fr;gap:0;}
    .wgh__panneau-liens{grid-row:auto;margin-bottom:24px;}
    .wgh__panneau-demo,.wgh__panneau-compte,.wgh__panneau-tel,.wgh__panneau-langue{grid-column:1;}
    .wgh__panneau{padding-top:108px;}
}
@media(max-width:600px){
    .wgh{padding:14px 0;--H:50px;}
    .wgh.is-compact{padding:10px 0;}
    .wgh__barre{width:calc(100% - 28px);gap:12px;}
    .wgh__logo{height:26px;width:106px;}
    .wgh__logo-texte{width:106px;}
    .wgh__logo-mini{width:54px;}
    .wgh.is-compact .wgh__logo{width:54px;}
    .wgh__cta{padding:0 16px;font-size:14px !important;}
    .wgh__menu span{width:20px;}
}

@media (prefers-reduced-motion: reduce){
    .wgh *,.wgh *::before,.wgh *::after{transition-duration:.01ms !important;}
    .wgh__logo,.wgh__droite{opacity:1;transform:none;}
}

/* Pas dans les guides, qui ont leur propre barre */
body.wg-guide-page .wgh,
body.wg-reco-page .wgh{display:none !important;}

/* Libérer le shortcode des conteneurs Elementor */
.elementor-widget-shortcode:has(.wgh),
.elementor-widget-container:has(.wgh),
.e-con-inner:has(.wgh),
.e-con:has(.wgh){
    width:100% !important;max-width:none !important;
    padding:0 !important;margin:0 !important;min-height:0 !important;
}

/* Menu ouvert : la croix passe devant le panneau.
   Le conteneur de droite porte un transform, donc son propre plan
   d'empilement : c'est lui qu'il faut hisser, pas le bouton seul. */
.wgh.is-ouvert .wgh__droite{position:relative;z-index:9003;}
.wgh.is-ouvert .wgh__logo{position:relative;z-index:9003;}
/* « Commencer » est déjà dans le panneau : on ne garde que la croix */
.wgh__cta{transition:background .3s, gap .35s cubic-bezier(.16,1,.3,1), opacity .25s, visibility .25s;}
.wgh.is-ouvert .wgh__cta{opacity:0;visibility:hidden;}
.wgh.is-ouvert .wgh__menu{border-left:1px solid rgba(215,202,175,.3) !important;}

/* Cinq entrées, dont des libellés longs pour l'hôte connecté */
.wgh__panneau-lien{font-size:clamp(26px,3.6vw,50px) !important;}
.wgh__panneau-qui{
    display:block;padding:4px 0 10px;
    font-size:14px !important;
    color:rgba(250,249,247,0.68) !important;-webkit-text-fill-color:rgba(250,249,247,0.68) !important;
}
.wgh.is-ouvert .wgh__panneau-lien:nth-child(5){transition-delay:.28s;}
.wgh.is-ouvert .wgh__panneau-demo  {transition-delay:.33s;}
.wgh.is-ouvert .wgh__panneau-compte{transition-delay:.38s;}
.wgh.is-ouvert .wgh__panneau-tel   {transition-delay:.43s;}


/* Le logo garde son beige quoi que fasse le thème */
.wgh .wgh__logo,
.wgh .wgh__logo:hover,
.wgh .wgh__logo:focus{color:#D7CAAF !important;}
.wgh .wgh__logo svg path,
.wgh .wgh__logo svg polygon,
.wgh .wgh__logo svg rect{fill:#D7CAAF !important;}
.wgh .wgh__menu span{background:#D7CAAF !important;}