/* Pixidia Header V2 - porte depuis la maquette Header V2 adaptatif.
 *
 * PAS de @layer, et c'est MESURE, pas suppose : une regle NON layeree bat TOUJOURS une
 * regle layeree, quelle que soit la specificite. Or le site est plein de regles non
 * layerees (BuddyX, kit Elementor, CSS itineraire) : mettre le header dans une couche
 * revenait a garantir qu'il perde partout, y compris sur sa propre police.
 * L'isolation tient au SCOPING : chaque selecteur vit sous .hx ou .hx-portal, donc rien
 * ne peut fuir vers le site.
 *
 * Deux racines, et deux seulement : .hx (le bandeau) et .hx-portal (les panneaux).
 * GENERE par tools/port_css.py - ne pas editer a la main. */

/* Urbanist — convention reprise de pixidia-itinerary-single/assets/css/src/00-tokens.css :
   une seule fonte variable 400-800, latin-ext charge uniquement si la page en a besoin.
   Embarquee dans le plugin pour que le header ne dependent d'aucun autre plugin. */
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400 800;font-display:swap;
 src:url('../fonts/urbanist/urbanist-latin-ext.woff2') format('woff2');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400 800;font-display:swap;
 src:url('../fonts/urbanist/urbanist-latin.woff2') format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

  /* Reprend ce que la maquette posait sur `body` et qui est legitime POUR LE HEADER SEUL.
     `margin:0` et `background` sont volontairement absents : ils appartenaient a la page de demo
     et repeindraient le site entier. */
  .hx,.hx-portal{color:var(--hx-ink);font-family:'Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;text-wrap:pretty}
  :root{--hx-ink:#0A3D3A;--hx-ink-2:#3d5453;--hx-muted:#5d7070;--hx-acc:#1E9B52;--hx-acc-l:#3DBE73;--hx-teal:#20c9b8;--hx-gold:#ad8800;--hx-sm:cubic-bezier(.4,0,.2,1);--hx-bo:cubic-bezier(.34,1.56,.64,1);--hx-glass:rgba(255,255,255,.62);--hx-line:rgba(10,61,58,.08)}
  .hx *,.hx-portal *,*::before,*::after{box-sizing:border-box}
  .hx button,.hx-portal button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
  .hx input,.hx-portal input{font:inherit;color:inherit}
  .hx a,.hx-portal a{color:var(--hx-acc);text-decoration:none}
  .hx a:hover,.hx-portal a:hover{color:#178440}
  .hx :focus-visible,.hx-portal :focus-visible{outline:2px solid var(--hx-acc);outline-offset:2px;border-radius:8px}
  .hx-skip{position:fixed;top:8px;left:-999px;z-index:9999;padding:10px 16px;border-radius:9999px;background:#fff;box-shadow:0 10px 30px -6px rgba(15,163,107,.3);font-weight:700;font-size:13px}
  .hx-skip:focus{left:8px}
  @media (prefers-reduced-motion:reduce){
    .hx *,.hx-portal *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  }
  /* 🔴 LES METRIQUES SONT DECLAREES SUR LES DEUX RACINES, ET C'EST UNE CORRECTION DE FOND.
     Elles ne vivaient que sur `.hx`. Or le portail est enfant direct de <body> : il n'herite
     RIEN du bandeau. Tout `var(--hx-ctl)` ecrit sous `.hx-portal` etait donc une variable non
     resolue — donc une declaration INVALIDE, donc `height:auto`. Mesure du 2026-09-01 : le
     bouton « Nouvel itineraire » de la feuille mobile sortait ecrase a la hauteur de son icone.
     Un `var()` non resolu ne leve aucune erreur et ne laisse aucune trace : seule la mesure
     de la hauteur calculee le dit. */
  .hx,.hx-portal{--hx-row:56px;--hx-pad-y:14px;--hx-pad-x:26px;--hx-ctl:38px}
  .hx{position:relative;z-index:200}
  .hx-tier{position:relative}
  .hx-exp{padding:var(--hx-pad-y) var(--hx-pad-x);transition:padding .28s var(--hx-sm),background .28s var(--hx-sm),box-shadow .28s var(--hx-sm),border-color .28s var(--hx-sm)}
  .hx-shell{max-width:1440px;margin:0 auto}
  .hx-row{display:flex;align-items:center;gap:20px;height:var(--hx-row);transition:height .28s var(--hx-sm)}
  .hx-grow{flex:1;min-width:0}
  .hx-cluster{display:flex;align-items:center;gap:8px}
  .hx-logo{display:flex;align-items:center;height:var(--hx-ctl);padding:0 4px;flex-shrink:0;border-radius:12px;transition:transform .3s var(--hx-bo)}
  .hx-logo img{height:24px;width:auto;display:block}
  .hx-logo:hover{transform:scale(1.03)}
  .hx-nav{position:relative;display:flex;align-items:center;gap:2px;height:var(--hx-ctl);flex-shrink:0}
  .hx-nav>button{position:relative;z-index:1;height:var(--hx-ctl);display:flex;align-items:center;gap:7px;padding:0 15px;border-radius:9999px;font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--hx-ink-2);transition:color .2s var(--hx-sm)}
  .hx-nav>button:hover,.hx-nav>button[data-active="1"]{color:var(--hx-ink)}
  .hx-nav>button[data-active="1"]{font-weight:700}
  .hx-nav>button[data-active="1"] svg{color:var(--hx-acc)}
  /* 🔴 `justify-content` EST ICI POUR UNE RAISON PRECISE — NE PAS LE RETIRER.
     `place-items:center` ne centre horizontalement QU'EN GRID. Or les classes de visibilite
     (`.hx-only-sm{display:flex}`) ont la MEME specificite (0,1,0) et viennent PLUS LOIN dans la
     feuille : sous 780 px elles faisaient basculer le bouton en flex, ou `place-items` ne
     fournit plus que `align-items`. `justify-content` retombait a `flex-start` et le SVG de
     18 px se collait a gauche d'un bouton de 38 px — 10 px de decalage, signale par Leo le
     2026-09-01. La preuve croisee etait dans la meme capture : la loupe, elle, etait centree,
     parce que `.hx-collapse-ico` bascule en `grid` et non en `flex`.
     `justify-content` est inerte en grid (une seule piste) et decisif en flex : le bouton est
     centre quelle que soit la regle de display qui l'emporte. */
  .hx-ico{width:var(--hx-ctl);height:var(--hx-ctl);border-radius:50%;display:grid;place-items:center;justify-content:center;align-items:center;color:var(--hx-ink-2);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 6px rgba(15,163,107,.06);position:relative;flex-shrink:0;transition:transform .3s var(--hx-bo),background .2s,box-shadow .3s,color .2s}
  .hx-ico:hover{background:#fff;color:var(--hx-ink);transform:translateY(-2px);box-shadow:0 10px 20px -6px rgba(15,163,107,.26)}
  .hx-ico:active{transform:scale(.96)}
  .hx-ico[data-on="1"]{background:#fff;color:var(--hx-ink);box-shadow:0 10px 20px -6px rgba(15,163,107,.24),0 0 0 1px rgba(30,155,82,.3)}
  .hx-dot:not(.pxdn-count){position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:#ff3b5c;border:2px solid #fff;box-shadow:0 0 0 1px rgba(255,59,92,.25)}
  .hx-search{position:relative;display:flex;align-items:center;gap:9px;height:var(--hx-ctl);padding:0 5px 0 5px;flex:1;min-width:180px;max-width:320px;border-radius:9999px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(15,163,107,.05),inset 0 1px 0 rgba(255,255,255,.6);color:var(--hx-muted);font-size:13.5px;font-weight:500;letter-spacing:-.005em;text-align:left;overflow:hidden;transition:background .25s var(--hx-sm),box-shadow .3s var(--hx-sm),color .2s,transform .3s var(--hx-bo)}
  .hx-search::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.45) 0%,transparent 62%);opacity:.55;pointer-events:none;transition:opacity .3s}
  .hx-search-i{position:relative;width:28px;height:28px;border-radius:9999px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(135deg,#1E9B52 22%,#3DBE73 100%);box-shadow:0 2px 7px rgba(15,163,107,.34),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .35s var(--hx-bo),box-shadow .3s}
  .hx-search:hover .hx-search-i{transform:scale(1.07) rotate(-6deg);box-shadow:0 4px 12px rgba(15,163,107,.42),inset 0 1px 0 rgba(255,255,255,.4)}
  .hx-search:hover::before{opacity:.9}
  .hx-search:focus-visible{outline:2px solid var(--hx-acc);outline-offset:2px}
  .hx-search--lead{flex:3 1 340px;max-width:440px;min-width:240px;margin-left:4px}
  .hx-search-s{display:none}
  .hx-search span:not(.hx-kbd){position:relative;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hx-search:hover{background:rgba(255,255,255,.94);color:var(--hx-ink);transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(15,163,107,.34),0 0 0 1px rgba(30,155,82,.16),inset 0 1px 0 rgba(255,255,255,.7)}
  .hx-search:active{transform:scale(.99)}
  .hx-kbd{position:relative;display:flex;align-items:center;gap:3px;padding:0 7px;height:24px;border-radius:8px;background:rgba(255,255,255,.72);border:1px solid rgba(10,61,58,.09);box-shadow:0 1px 0 rgba(10,61,58,.06);font-size:10.5px;font-weight:700;color:var(--hx-muted);letter-spacing:.02em;flex-shrink:0;transition:color .2s,background .2s}
  .hx-kbd em{font-style:normal}
  .hx-search:hover .hx-kbd{color:var(--hx-ink-2);background:rgba(10,61,58,.055)}
  .hx-cta{display:inline-flex;align-items:center;gap:8px;height:var(--hx-ctl);padding:0 16px;border-radius:9999px;background:linear-gradient(135deg,#1E9B52 0%,#3DBE73 100%);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;flex-shrink:0;box-shadow:0 8px 18px -6px rgba(30,155,82,.5),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .3s var(--hx-bo),box-shadow .3s,filter .2s}
  .hx-cta:hover,a.hx-cta:hover{color:#fff;background:linear-gradient(135deg,#17853F 0%,#2FB268 100%);transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(23,133,63,.48),inset 0 1px 0 rgba(255,255,255,.3)}
  .hx-cta:active{transform:scale(.97)}
  .hx-cta--round{width:var(--hx-ctl);padding:0;justify-content:center}
  .hx-av{width:var(--hx-ctl);height:var(--hx-ctl);border-radius:50%;flex-shrink:0;position:relative;box-shadow:0 0 0 1px rgba(15,163,107,.28),0 3px 10px rgba(15,163,107,.14);transition:transform .3s var(--hx-bo),box-shadow .3s}
  .hx-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;display:block}
  .hx-av:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 2px var(--hx-acc),0 10px 20px -6px rgba(15,163,107,.34)}
  .hx-av[data-on="1"]{box-shadow:0 0 0 2px var(--hx-acc),0 10px 20px -6px rgba(15,163,107,.3)}
  .hx-anchor{position:relative;display:flex;align-items:center}
  .hx-pixi{position:relative;width:var(--hx-ctl);height:var(--hx-ctl);flex-shrink:0}
  .hx-pixi>i{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 0deg,#1E9B52,#20c9b8,#3DBE73,#1E9B52);filter:blur(6px);opacity:.45;animation:hx-spin 7s linear infinite}
  .hx-pixi>button{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#0a4a47;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(15,163,107,.28);transition:transform .3s var(--hx-bo)}
  .hx-pixi>button:hover{transform:scale(1.07)}
  .hx-pixi>button:active{transform:scale(.96)}
  .hx-pixi img{display:block;pointer-events:none}
  @keyframes hx-spin{
    to{transform:rotate(360deg)}
  }
  .hx-pop{position:absolute;top:calc(100% + 12px);right:0;z-index:400;background:rgba(255,255,255,.96);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(10,61,58,.1);border-radius:18px;box-shadow:0 16px 48px rgba(1,40,39,.18),0 0 0 1px rgba(1,40,39,.05),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden;animation:hx-drop .26s var(--hx-sm)}
  @keyframes hx-drop{
    from{opacity:0;transform:translateY(-10px) scale(.98)}
  }
  .hx-pop-h{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
  .hx-pop-h b{font-size:14px;font-weight:800;letter-spacing:-.01em;flex:1}
  .hx-lbl{font-size:11.2px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#7a8a8a;padding:10px 14px 4px}
  .hx-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:12px;text-align:left;color:var(--hx-ink);transition:background .18s}
  .hx-item:hover{background:rgba(30,155,82,.07)}
  .hx-item-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:rgba(10,61,58,.06);color:var(--hx-ink-2)}
  .hx-item b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.005em}
  .hx-item small{display:block;font-size:11.5px;font-weight:500;color:var(--hx-muted);margin-top:2px;line-height:1.4}
  .hx-flag{width:22px;height:16px;border-radius:3px;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px rgba(10,61,58,.1),0 1px 3px rgba(15,163,107,.14)}
  .hx-item-n{font-size:11px;font-weight:800;padding:2px 8px;border-radius:9999px;background:rgba(10,61,58,.07);color:var(--hx-muted)}
  .hx-sep{height:1px;background:#eef2f2;margin:6px 12px}
  .hx-foot{padding:9px 12px;border-top:1px solid #eef2f2;background:#fafbfb}
  .hx-scrim{position:fixed;inset:0;z-index:9000;background:rgba(10,61,58,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:hx-fade .2s ease}
  @keyframes hx-fade{
    from{opacity:0}
  }
  .hx-cmd{position:fixed;top:11vh;left:50%;width:min(680px,92vw);z-index:9001;background:rgba(255,255,255,.97);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(10,61,58,.1);border-radius:20px;box-shadow:0 32px 80px rgba(1,40,39,.28),0 0 0 1px rgba(1,40,39,.05),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden;transform:translateX(-50%);animation:hx-cmd-in .3s var(--hx-sm)}
  @keyframes hx-cmd-in{
    from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.97)}
  }
  .hx-cmd-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #eef2f2}
  .hx-cmd-in input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--hx-ink)}
  .hx-cmd-in input::placeholder{color:#8a9c9c;font-weight:500}
  .hx-cmd-list{max-height:min(52vh,460px);overflow:auto;padding:8px;scrollbar-width:thin}
  .hx-cmd-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;text-align:left;color:var(--hx-ink);transition:background .15s,transform .15s}
  .hx-cmd-row[data-sel="1"]{background:rgba(30,155,82,.09);box-shadow:inset 0 0 0 1px rgba(30,155,82,.18)}
  .hx-cmd-row b{display:block;font-size:14px;font-weight:600;letter-spacing:-.005em}
  .hx-cmd-row small{display:block;font-size:11.5px;font-weight:500;color:var(--hx-muted);margin-top:2px}
  .hx-cmd-row .hx-kbd{opacity:0;transition:opacity .15s}
  .hx-cmd-row[data-sel="1"] .hx-kbd{opacity:1}
  .hx-cmd-tag{font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:5px;background:rgba(10,61,58,.06);color:var(--hx-muted);letter-spacing:.05em;text-transform:uppercase;flex-shrink:0}
  .hx-cmd-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:rgba(10,61,58,.055);color:var(--hx-ink-2)}
  .hx-cmd-row[data-ai="1"]{background:linear-gradient(135deg,rgba(30,155,82,.1),rgba(32,201,184,.09));box-shadow:inset 0 0 0 1px rgba(30,155,82,.2)}
  .hx-cmd-row[data-ai="1"][data-sel="1"]{background:linear-gradient(135deg,rgba(30,155,82,.18),rgba(32,201,184,.15));box-shadow:inset 0 0 0 1px rgba(30,155,82,.34)}
  .hx-cmd-ai{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#0a4a47;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(15,163,107,.28)}
  .hx-cmd-empty{padding:34px 20px;text-align:center}
  .hx-cmd-foot{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid #eef2f2;background:#fafbfb;font-size:11.5px;font-weight:600;color:var(--hx-muted)}
  .hx-cmd-foot i{font-style:normal;display:flex;align-items:center;gap:5px}
  .hx-nav--out{margin-left:8px}
  .hx-nav--out>button{padding:0 14px;font-size:13.5px;font-weight:600}
  .hx-nav--out>button[data-on="1"]{color:var(--hx-ink);font-weight:700}
  .hx-cv{display:grid;place-items:center;color:var(--hx-muted);transition:transform .3s var(--hx-sm),color .2s}
  .hx-nav--out>button:hover .hx-cv{color:var(--hx-ink-2)}
  .hx-cv[data-on="1"]{transform:rotate(180deg);color:var(--hx-acc)}
  .hx-mega{position:absolute;top:calc(100% + 14px);left:0;z-index:400;width:min(660px,calc(100vw - 40px));background:rgba(255,255,255,.96);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(10,61,58,.1);border-radius:18px;box-shadow:0 16px 48px rgba(1,40,39,.18),0 0 0 1px rgba(1,40,39,.05),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden;animation:hx-drop .26s var(--hx-sm);text-align:left}
  .hx-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px 14px 14px}
  .hx-mega-item{align-items:flex-start;padding:9px 10px}
  .hx-mega-item .hx-item-i{margin-top:1px}
  .hx-mega-item small{white-space:normal}
  .hx-mega-item:hover .hx-item-i{background:rgba(30,155,82,.12);color:var(--hx-acc)}
  .hx-mega-foot{display:flex;align-items:center;gap:16px;padding:13px 16px;border-top:1px solid #eef2f2;background:linear-gradient(135deg,rgba(30,155,82,.07),rgba(32,201,184,.05))}
  .hx-mega-foot span{flex:1;min-width:0}
  .hx-mega-foot b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--hx-ink)}
  .hx-mega-foot small{display:block;font-size:11.8px;font-weight:500;color:var(--hx-muted);margin-top:2px}
  .hx-link{display:inline-flex;align-items:center;height:var(--hx-ctl);padding:0 12px;border-radius:9999px;font-size:13.5px;font-weight:700;letter-spacing:-.005em;color:var(--hx-ink);white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s}
  .hx-link:hover{background:rgba(255,255,255,.7);color:var(--hx-ink)}
  .hx-sheet{position:absolute;left:14px;right:14px;top:calc(100% - 4px);z-index:300;max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain;background:rgba(255,255,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(10,61,58,.1);border-radius:20px;box-shadow:0 24px 60px rgba(1,40,39,.24);padding:10px;animation:hx-drop .28s var(--hx-sm)}
  .hx-sheet-nav{display:flex;flex-direction:column;gap:2px}
  .hx-sheet-foot{position:sticky;bottom:-10px;margin:0 -10px -10px;background:rgba(255,255,255,.97);border-top:1px solid #eef2f2}
  .hx-only-sm{display:none}
  .hx-collapse-ico{display:none}

  /* ═══════ LES CINQ PALIERS — refonte responsive du 2026-09-01 ═══════
   * La maquette a ete dessinee sur UN ecran, en page vierge. Son portage avait garde ses treize
   * seuils (1240/1180/1100/1040/1000/940/900/860/780/768/600/560/480), dont plusieurs
   * s annulaient entre eux et trois etaient morts. On garde CINQ paliers, un role chacun ; tout
   * ce qui peut varier continument le fait par clamp(), pas par un palier de plus.
   *
   *   xl  > 1440   la recherche centrale respire (680 px)
   *   lg  <= 1240  .hx-only-xl sort
   *   md  <= 960   la nav visiteur cede la place au burger — LE MEME SEUIL POUR LES DEUX
   *   sm  <= 780   la recherche centrale sort, les actions passent dans la feuille,
   *                Pixi s ouvre en feuille par le bas (cote pixidia-pixi)
   *   xs  <= 600   gouttieres fixes, palette en feuille haute, mega-menu sur une colonne
   *
   * 🔴 md ETAIT LE TROU. `.hx-nav--out{display:none}` tombait a 940 px et le burger n arrivait
   * qu a 780 : entre les deux, un visiteur n avait PLUS de navigation et PAS ENCORE de menu.
   * Trois regles `.hx[data-out="1"]` etaient censees le combler — mais `data-out` n est pose
   * NULLE PART, ni par le PHP ni par le JS (verifie par grep sur tout le plugin). Elles n ont
   * donc jamais rien fait. Un seuil unique supprime le trou, et les regles avec.
   * ═════════════════════════════════════════════════════════════════════════ */

  @media (max-width:1240px){
    .hx-only-xl{display:none!important}
  }

  /* La recherche perd son raccourci clavier, puis son libelle long, dans cet ordre : un
     raccourci clavier ne sert a rien sur une machine dont l ecran est deja etroit. */
  @media (max-width:1040px){
    .hx-search .hx-kbd,.hx-search-l{display:none}
    .hx-search-s{display:block}
  }

  @media (max-width:1100px){
    .hx-only-md{display:none!important}
  }

  /* --- md : la nav visiteur devient le burger, d un seul coup --- */
  @media (max-width:960px){
    .hx-nav--out{display:none}
    .hx-only-sm{display:flex}
  }

  /* --- sm : la recherche centrale sort, les actions secondaires passent dans la feuille --- */
  @media (max-width:780px){
    .hx-search{display:none}
    .hx-collapse-ico{display:grid}
    .hx-only-lg{display:none!important}
  }

  /* 🔴 CES REGLES SONT SCOPEES `.hx `, ET C EST TOUT LE SUJET DU DEFAUT n°3.
     Non scopees, elles frappaient AUSSI le CTA pleine largeur de la feuille mobile, qui vit
     dans `.hx-portal` : le libelle « Nouvel itineraire » disparaissait et il ne restait qu un
     `+` dans une barre verte. La compaction en bouton rond est un geste du BANDEAU, la ou la
     place manque ; elle n a aucun sens dans un menu ou le bouton fait toute la largeur. */
  @media (max-width:860px){
    .hx .hx-cta span{display:none}
    .hx .hx-cta{width:var(--hx-ctl);padding:0 !important;justify-content:center}
  }
  @media (max-width:860px){
    .hx .hx-cta--out{width:auto;padding:0 15px !important}
    .hx .hx-cta--out span{display:inline}
  }
  @media (max-width:560px){
    .hx .hx-cta--out{padding:0 13px !important;font-size:12.5px}
  }

  @media (hover:none){
    .hx-ico:hover,.hx-cta:hover,.hx-av:hover,.hx-search:hover,.hx-pixi>button:hover,.hx-logo:hover{transform:none}
  }

  /* ---- gabarits par surface ---- */
  .hx[data-surface="home"],.hx[data-surface="app"]{position:sticky;top:0;--hx-row:48px;--hx-pad-y:14px;--hx-pad-x:32px;--hx-ctl:40px}
  .hx[data-surface="home"][data-condensed="1"],.hx[data-surface="app"][data-condensed="1"]{--hx-row:44px;--hx-pad-y:8px;--hx-ctl:36px}
  .hx[data-surface="home"][data-condensed="1"] .hx-exp,.hx[data-surface="app"][data-condensed="1"] .hx-exp{background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.7),0 8px 24px -14px rgba(15,163,107,.34)}
  @media (max-width:780px){
    .hx[data-surface="home"],.hx[data-surface="app"]{--hx-row:48px;--hx-pad-y:8px;--hx-pad-x:14px;--hx-ctl:40px}
    .hx[data-surface="home"][data-condensed="1"],.hx[data-surface="app"][data-condensed="1"]{--hx-row:44px;--hx-pad-y:6px;--hx-ctl:40px}
  }
  .hx[data-surface="itinerary"]{position:relative;--hx-row:60px;--hx-pad-y:0px;--hx-pad-x:20px;--hx-ctl:40px}
  .hx[data-surface="itinerary"] .hx-exp{background:rgba(255,255,255,.68);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 -1px 0 var(--hx-line)}
  .hx[data-surface="itinerary"] .hx-row{gap:14px}
  @media (max-width:1200px){
    .hx[data-surface="itinerary"]{--hx-row:56px;--hx-ctl:38px}
  }
  @media (max-width:768px){
    .hx[data-surface="itinerary"]{--hx-row:52px;--hx-ctl:40px;--hx-pad-x:14px}
  }
  @media (max-width:480px){
    .hx[data-surface="itinerary"]{--hx-row:52px;--hx-ctl:40px;--hx-pad-x:12px}
    /* ⚠️ INERTE, ET IL FAUT LE SAVOIR : `env(safe-area-inset-top)` rend 0 tant que la page ne
       pose pas `viewport-fit=cover` dans son meta viewport. AUCUNE des pages qui servent ce
       header ne le fait (buddyx-child/functions.php:3748, template-magazine-article-v2-generic
       :196, pixidia-discover/templates/discover.php:57 sont tous en `width=device-width,
       initial-scale=1`). On la garde — elle ne coute rien et deviendra vraie le jour ou le meta
       changera — mais on ne compte pas dessus pour proteger quoi que ce soit. */
    .hx[data-surface="itinerary"] .hx-exp{padding-top:env(safe-area-inset-top)}
  }
  .hx[data-surface="magazine"]{position:sticky;top:0;--hx-row:60px;--hx-pad-y:0px;--hx-pad-x:24px;--hx-ctl:40px}
  .hx[data-surface="magazine"] .hx-exp{background:rgba(255,255,255,.84);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:inset 0 -1px 0 var(--hx-line)}
  @media (max-width:768px){
    .hx[data-surface="magazine"]{--hx-row:52px;--hx-ctl:40px;--hx-pad-x:14px}
  }
  @media (max-width:1100px){
    .hx[data-surface="home"],.hx[data-surface="app"]{--hx-pad-x:20px}
    .hx[data-surface="magazine"]{--hx-pad-x:16px}
    .hx[data-surface="magazine"] .hx-row{gap:12px}
  }

  /* ================== SUPPLEMENT — ce que la maquette ne pouvait pas prevoir ==================
   * La maquette vit dans une page vierge : ses panneaux sont en position:absolute a l'interieur
   * du bandeau. Dans une vraie page, le bandeau porte un backdrop-filter et un position:sticky,
   * qui creent un contexte d'empilement ET un bloc conteneur : un panneau reste alors prisonnier.
   * On les sort donc dans .hx-portal, et on les repositionne en fixed (le JS calcule top/left).
   * ========================================================================================== */

  .hx-portal{position:relative;z-index:10000}

  /* 🔴 LA REGLE SANS LAQUELLE LE HEADER EST CASSE.
     .hx-cluster et .hx-search declarent display:flex ; a specificite egale, une classe d'auteur
     bat le [hidden]{display:none} de la feuille du navigateur. Les DEUX sous-arbres (visiteur et
     connecte) s'afficheraient donc ensemble. Le !important est ici assume et strictement scope. */
  .hx [hidden],.hx-portal [hidden],.hx-portal[hidden]{display:none!important}

  .hx-portal .hx-pop,.hx-portal .hx-mega{position:fixed;top:auto;right:auto;left:auto;z-index:10010}
  .hx-portal .hx-cmd{z-index:10020}
  .hx-portal .hx-scrim{z-index:10005}
  .hx-portal .hx-sheet{position:fixed;left:14px;right:14px;top:72px;z-index:10010;max-height:calc(100vh - 96px)}

  /* Le lien d'evitement : hors ecran, ramene au premier focus clavier. */
  .hx-skip:focus{left:8px}

  /* Verrou de defilement quand une surface modale est ouverte. */
  html.hx-locked{overflow:hidden}

  /* En-tete du menu de compte. */
  .hx-pop-head{display:flex;align-items:center;gap:12px;padding:14px 16px 12px}
  .hx-pop-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(15,163,107,.25),0 4px 12px rgba(15,163,107,.18)}
  .hx-pop-head b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
  .hx-pop-head small{display:block;font-size:11.5px;color:var(--hx-muted);margin-top:1px}

  /* Etat vide (notifications, traduction refusee). */
  .hx-empty{margin:0;padding:14px 16px;font-size:13px;font-weight:500;color:var(--hx-muted)}

  /* Action destructrice du menu de compte. */
  .hx-item--danger{color:#d32f2f}
  .hx-item--danger .hx-item-i{background:rgba(211,47,47,.09);color:#d32f2f}

  /* Le bouton Pixi reste visible sous 780 px : « Pixi omnipresent » est un cap produit.
     Le panneau, lui, est ancre hors du header et s'ouvre en feuille sur mobile. */
  @media (max-width:780px){.hx-pixi{display:inline-flex}}

  /* ============================ BLOC ANTI-CONFLIT ============================
   * Exige par le catalogue de conflits du repo (G3, G5, P21, P24, P25).
   *
   * Sur une page /itineraires/, pixidia-itinerary-single dequeue Elementor et BuddyX : le header
   * y vit tranquille. Mais la variante « itineraire » couvre AUSSI les CPT enfants (logement,
   * transport, restauration, exp-act, location-vehicule), et CES pages-la ne dequeuent RIEN (P24).
   * S'y appliquent alors, sur tout <button> et tout <a> :
   *   - `.elementor-kit-1489 button`            -> ombre noire (G3)
   *   - `.single-{cpt} .pxd-page button`(0,2,1) -> padding:0 / margin:0, ecrase les boutons (P25)
   *   - `:focus-visible{outline:2px solid ...}` -> contour bleu global
   *   - BuddyX `a:hover/:focus/:active`         -> couleur imposee sur chaque lien (G5, P23)
   *
   * On neutralise donc les proprietes CONTESTEES, etat par etat, et uniquement sous nos racines.
   * Liste fermee : outline, border, box-shadow des liens, background/color des etats, padding.
   * ========================================================================== */

  .hx button:hover,.hx button:focus,.hx button:focus-visible,.hx button:active,
  .hx-portal button:hover,.hx-portal button:focus,.hx-portal button:focus-visible,.hx-portal button:active,
  .hx a:hover,.hx a:focus,.hx a:focus-visible,.hx a:active,
  .hx-portal a:hover,.hx-portal a:focus,.hx-portal a:focus-visible,.hx-portal a:active{
    border-color:inherit;outline:none}

  /* On retablit NOTRE anneau de focus, apres l'avoir neutralise. */
  .hx :focus-visible,.hx-portal :focus-visible{outline:2px solid var(--hx-acc);outline-offset:2px}

  /* Les liens du header ne prennent jamais la couleur de lien du theme (BuddyX #ef5455, P23). */
  .hx a,.hx a:hover,.hx a:focus,.hx a:active,
  .hx-portal a,.hx-portal a:hover,.hx-portal a:focus,.hx-portal a:active{color:inherit}
  .hx .hx-link,.hx .hx-link:hover,.hx-portal .hx-link,.hx-portal .hx-link:hover{color:var(--hx-ink-2)}
  .hx .hx-cta,.hx .hx-cta:hover,.hx .hx-cta:focus{color:#fff}

  /* P25 : le reset `.single-{cpt} .pxd-page button{padding:0}` est (0,2,1) et bat une classe
     simple. Nos boutons portent leur dimension par --hx-ctl, on la reaffirme au-dessus. */
  .hx .hx-ico,.hx .hx-av{width:var(--hx-ctl);height:var(--hx-ctl);padding:0}
  .hx .hx-cta{padding:0 15px}
  .hx-portal .hx-item{padding:9px 10px}
  .hx-portal .hx-cmd-row{padding:9px 12px}

  /* G3 : ombre noire du kit Elementor sur tout bouton nu. Nos boutons portent la leur ou aucune. */
  .hx button,.hx-portal button{box-shadow:none}
  .hx .hx-ico{box-shadow:0 2px 6px rgba(15,163,107,.06)}

  /* 🔴 Le logo, borne DEUX FOIS.
     Observe en production : le bandeau explosait, le logo s'affichant a sa taille native.
     Cause : la source etait un SVG de 1276x781 SANS viewBox, servi par une URL d'upload ; tant
     que la feuille du header n'etait pas appliquee, rien ne bornait l'image. On borne donc a la
     fois la boite (le <a>) et l'image, et on pose width/height au ratio exact dans le HTML. */
  .hx .hx-logo{max-width:120px;overflow:hidden}
  .hx .hx-logo img{height:28px;width:auto;max-width:100%;max-height:28px;object-fit:contain;display:block}
  @media (max-width:780px){.hx .hx-logo img{height:24px;max-height:24px}}

  /* 🔴 Le bandeau doit survivre au CONTENEUR qui l'accueille.
     Mesure : sur une page /itineraires/, `.pxd-page` est une grille a 3 colonnes
     (`grid-template-columns: var(--pxd-sidebar-width) 1fr var(--pxd-right-width)`) et le header
     y est un enfant direct. Sans instruction, il occupait la PREMIERE CELLULE : 64 px de large.
     L'ancien header s'en affranchissait par `grid-column:1/-1` (10-layout-grid.css:21) ; on
     reprend le meme geste. Ces proprietes sont inertes quand le parent n'est pas une grille,
     donc elles ne coutent rien sur les autres surfaces.
     `flex:0 0 100%` couvre le cas symetrique d'un parent en flex. */
  .hx{grid-column:1/-1;grid-row:1;flex:0 0 100%;width:100%;box-sizing:border-box}

  /* CSS-1 du plan : on REPUBLIE la hauteur dans les jetons que le reste du site consomme.
     La grille de l'itineraire dimensionne sa premiere rangee avec --pxd-header-height, et le
     template d'article magazine utilise --mag2-header-height. Les laisser diverger de la hauteur
     reelle du bandeau ferait sauter la mise en page. */
  .hx[data-surface="itinerary"]{--pxd-header-height:60px}
  @media (max-width:1200px){.hx[data-surface="itinerary"]{--pxd-header-height:56px}}
  @media (max-width:768px){.hx[data-surface="itinerary"]{--pxd-header-height:52px}}
  /* NOTE : ces valeurs ne sont plus qu un REPLI. Depuis le 2026-09-01, `header.js` MESURE la
     hauteur reelle du bandeau et republie `--hx-h`, `--pxd-header-height` et
     `--mag2-header-height` sur `:root` — ce qui les rend justes AUSSI en mode condense, ce
     qu un palier ne pouvait pas faire. Le palier ne couvre plus que la fraction de seconde
     avant le premier calcul. */

  /* 🔴 P25 mesure en production le 2026-08-18, sur /exp-act/kujundziluk/ :
     `.single-exp-act .pxd-page button` pese (0,2,1) — deux classes plus un TAG — et battait
     `.hx-pixi > button` (0,1,1). Resultat : le bouton Pixi perdait son fond sur les CPT enfants
     alors qu'il etait correct sur /itineraires/, ou ce reset n'existe pas.
     Le catalogue prescrit `!important` (le reset du theme n'en a pas), ce qui suffit et evite
     d'empiler des ancetres. On le limite aux proprietes REELLEMENT contestees. */
  .hx .hx-pixi > button{background:linear-gradient(135deg,#0A4A47,#0A3D3A)!important;padding:0!important;border:0!important}
  .hx .hx-av{padding:0!important;border:0!important}
  .hx .hx-av img{width:100%!important;height:100%!important}
  .hx .hx-search{padding:0 5px!important}
  .hx .hx-cta{padding:0 15px!important}

  /* ================== RETOURS DE LEO — 2026-08-31 ==================
   * 7/8. CONTRASTE ET FOND FIXE.
   * La maquette pose un fond semi-transparent qui laisse passer la page. Sur un fond blanc le
   * bandeau devient invisible ; sur la page d'accueil (fond vert sombre) il vire au vert et les
   * elements deviennent illisibles. Le bandeau prend donc un fond OPAQUE, identique partout,
   * quelle que soit la page dessous — plus une bordure basse et une ombre qui le detachent. */
  .hx .hx-tier{
    background:#fff!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    border-bottom:1px solid rgba(10,61,58,.10)!important;
    box-shadow:0 1px 3px rgba(10,61,58,.06),0 6px 20px -12px rgba(10,61,58,.18)!important}
  .hx[data-surface="home"] .hx-tier,.hx[data-surface="app"] .hx-tier,
  .hx[data-surface="magazine"] .hx-tier,.hx[data-surface="itinerary"] .hx-tier{background:#fff!important}

  /* Contraste des controles : au repos ils se detachent du blanc. */
  .hx .hx-ico{background:rgba(10,61,58,.045);border:1px solid rgba(10,61,58,.09)}
  .hx .hx-ico:hover{background:rgba(10,61,58,.085)}
  .hx .hx-search{background:rgba(10,61,58,.045);border:1px solid rgba(10,61,58,.12)}
  .hx .hx-search:hover{background:rgba(10,61,58,.07);border-color:rgba(10,61,58,.20)}
  .hx .hx-search-l,.hx .hx-search-s{color:#415654}
  .hx .hx-kbd{background:#fff;border:1px solid rgba(10,61,58,.14);color:#415654}

  /* 9. La barre de recherche : bords franchement arrondis, comme la maquette. */
  .hx .hx-search{border-radius:9999px}

  /* 5. Le contour de la photo de profil au repos (absent de mon rendu initial). */
  .hx .hx-av{border-radius:50%;padding:0;background:#fff;
    box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(30,155,82,.45),0 2px 8px rgba(10,61,58,.18)}
  .hx .hx-av:hover{box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(30,155,82,.85),0 4px 12px rgba(10,61,58,.22)}
  .hx .hx-av img{border-radius:50%;object-fit:cover}

  /* 2. L'encadre parasite du champ de recherche : Chrome dessine un focus-ring sur
     input[type=search], et le conteneur ajoutait le sien. Un seul anneau, sur le conteneur. */
  .hx-portal .hx-cmd-in input{outline:none!important;box-shadow:none!important;border:0!important;
    background:transparent!important;-webkit-appearance:none;appearance:none}
  .hx-portal .hx-cmd-in input::-webkit-search-decoration,
  .hx-portal .hx-cmd-in input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
  .hx-portal .hx-cmd-in:focus-within{box-shadow:inset 0 0 0 2px rgba(30,155,82,.35);border-radius:16px}

  /* 2. Les icones des resultats : le conteneur existait mais restait vide. */
  .hx-portal .hx-cmd-i{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;
    border-radius:10px;background:rgba(10,61,58,.06);color:var(--hx-ink)}
  .hx-portal .hx-cmd-row[data-sel="1"] .hx-cmd-i{background:rgba(30,155,82,.14);color:var(--hx-acc)}
  .hx-portal .hx-cmd-tag{flex-shrink:0;padding:3px 8px;border-radius:7px;font-size:10px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;background:rgba(10,61,58,.07);color:#415654}

  /* ============ RETOURS DE LEO — 2026-08-31 (2e passe) ============
   * 5. G3 MESURE sur https://pixidia.com/safari-pilanesberg-depuis-johannesburg/ :
   *    `.elementor-kit-1489 button` (0,2,1) impose a TOUT bouton de la page
   *      background-color: var(--e-global-color-primary)   -> fond vert Elementor
   *      box-shadow: 0 0 10px rgba(0,0,0,.5)               -> ombre noire
   *      border-radius: 12px                               -> nos ronds deviennent carres
   *      border-style: solid + font-family/-weight Elementor
   *    et bat nos regles (0,2,0). Sur /itineraires/ le probleme n'existe pas : ce plugin-la
   *    dequeue Elementor. Partout ailleurs, non (P24). On neutralise donc les cinq proprietes
   *    contestees, puis on RESTAURE les notres. Liste fermee, scope aux deux racines. */
  /* EH-3b — L'ANCRE PIXI EST EXCLUE DE CETTE NEUTRALISATION, ET C'EST UNE CORRECTION DE PORTEE.
   * Pxdh_Renderer::anchor() declare que #pxd-pixi-anchor est VIDE et que « c'est l'assistant qui
   * le remplit, le header ne connait pas son contenu ». Or ce selecteur, lui, y neutralisait
   * quand meme les cinq proprietes — avec !important. Mesure du 2026-08-31 : le bouton d'envoi
   * du panneau Pixi sortait en background-color rgba(0,0,0,0) sur color #FFF, soit BLANC SUR
   * BLANC, invisible ; et la liste de restauration ci-dessous ne connait que les classes .hx*.
   * Le header ne peut pas a la fois ignorer ce contenu et le repeindre. On l'exclut donc, plutot
   * que d'obliger l'assistant a surencherir en !important dans sa propre feuille.
   *
   * 🔴 ET L'EXCLUSION PASSE PAR `:where()`, CE QUI N'EST PAS UN DETAIL DE STYLE.
   * Ecrite `:not(#pxd-pixi-anchor *)`, elle prend la specificite de son argument LE PLUS
   * SPECIFIQUE — un ID. Le selecteur passait donc de (0,1,1) a (1,1,1) et ecrasait, en plus
   * d'Elementor, TOUTES les restaurations ci-dessous, qui valent (0,2,0) a (0,3,0).
   * Mesure du 2026-09-01 : la ligne Pixi de la palette sortait en `border-radius:0` et
   * `box-shadow:none` — ni coins arrondis ni lisere, alors que son degrade, lui, passait.
   * `:where()` a une specificite de ZERO : l'exclusion fonctionne a l'identique et le selecteur
   * retrouve ses (0,1,1) d'origine. 🚫 Ne jamais remettre un ID nu dans ce `:not()`. */
  .hx button,.hx a,.hx-portal button:not(:where(#pxd-pixi-anchor *)),.hx-portal a:not(:where(#pxd-pixi-anchor *)){
    background-color:transparent!important;
    box-shadow:none!important;
    border-style:none!important;
    border-radius:0!important;
    font-family:'Urbanist',system-ui,-apple-system,'Segoe UI',sans-serif!important;
    font-weight:600!important}

  /* ... puis on remet NOS valeurs, une par une. */
  .hx .hx-ico{border-radius:50%!important;background-color:rgba(10,61,58,.05)!important;
    border:1px solid rgba(10,61,58,.10)!important;box-shadow:0 1px 2px rgba(10,61,58,.05)!important}
  .hx .hx-ico:hover{background-color:rgba(10,61,58,.09)!important}
  .hx .hx-av{border-radius:50%!important;background-color:#fff!important;
    box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(30,155,82,.45),0 2px 8px rgba(10,61,58,.18)!important}
  .hx .hx-av:hover{box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(30,155,82,.85),0 4px 12px rgba(10,61,58,.22)!important}
  .hx .hx-search{border-radius:9999px!important;background-color:rgba(10,61,58,.05)!important;
    border:1px solid rgba(10,61,58,.12)!important}
  .hx .hx-search:hover{background-color:rgba(10,61,58,.08)!important;border-color:rgba(10,61,58,.20)!important}
  /* 🔴 `.hx-portal` EST DANS CE SELECTEUR DEPUIS LE 2026-09-01, ET C EST LA 4e CAUSE DU
     DEFAUT n°3. Le reset ci-dessus frappe `.hx-portal a:not(:where(#pxd-pixi-anchor *))` — donc
     AUSSI le CTA de la feuille mobile — mais toutes les restaurations etaient scopees `.hx `.
     Le bouton « Nouvel itineraire » du menu sortait donc rectangulaire (border-radius:0), sans
     ombre (box-shadow:none) et en 600 au lieu de 700. Le reset et ses restaurations sont un
     COUPLE : tout ce que le premier neutralise sous une racine, les secondes doivent le rendre
     sous la MEME racine. */
  .hx .hx-cta,.hx-portal .hx-cta{border-radius:9999px!important;font-weight:700!important;color:#fff!important;
    background-image:linear-gradient(135deg,#1E9B52,#3DBE73)!important;
    box-shadow:0 8px 18px -6px rgba(30,155,82,.5)!important}
  .hx .hx-cta:hover,.hx-portal .hx-cta:hover{color:#fff!important;
    background-image:linear-gradient(135deg,#17853F,#2FB268)!important;
    box-shadow:0 14px 26px -8px rgba(23,133,63,.48)!important}
  .hx .hx-kbd,.hx-portal .hx-kbd{border-radius:7px!important;background-color:#fff!important;
    border:1px solid rgba(10,61,58,.14)!important;font-weight:700!important}
  .hx .hx-pixi > button{border-radius:50%!important;
    background-image:linear-gradient(135deg,#0A4A47,#0A3D3A)!important}
  .hx-portal .hx-item,.hx-portal .hx-cmd-row{border-radius:12px!important}
  .hx-portal .hx-cmd-i{border-radius:10px!important;background-color:rgba(10,61,58,.06)!important}
  .hx-portal .hx-cmd-close{border-radius:9px!important}

  /* 1. L'avatar de Pixi n'etait pas centre dans sa pastille. */
  .hx .hx-pixi > button{display:grid!important;place-items:center;overflow:hidden;padding:0!important}
  .hx .hx-pixi > button img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

  /* 2. Les quatre controles de droite etaient trop serres ; la recherche trop a gauche. */
  .hx .hx-cluster{gap:14px}
  @media (max-width:1100px){.hx .hx-cluster{gap:10px}}
  .hx .hx-search--lead{margin-left:clamp(16px,7vw,120px)}

  /* 6. Pas d'anneau vert quand on tape : le champ se signale par le curseur, pas par un cadre. */
  .hx-portal .hx-cmd-in:focus-within{box-shadow:none;border-radius:0}

  /* ============ RETOURS DE LEO — 2026-08-31 (3e passe) ============
   * 3. LE LOGO ETAIT ROGNE. Cause : la maquette pose `border-radius:12px` sur le lien du logo
   *    (.hx-logo) et j'y avais ajoute `overflow:hidden` pour le borner. Les deux ensemble
   *    coupent les coins de l'image. Le bornage doit venir de la TAILLE, pas d'un rognage. */
  .hx .hx-logo{overflow:visible!important;border-radius:0!important;max-width:none!important;
    padding:0!important;background:none!important}
  .hx .hx-logo img{max-width:none!important}

  /* 2. ORGANISATION DU BANDEAU — trois zones, pas une file d'attente.
   *    La rangee devient une grille `auto | 1fr | auto` : le logo tient sa colonne, la recherche
   *    est VRAIMENT centree dans l'espace restant (et non poussee par le contenu qui la precede),
   *    les actions sont ancrees a droite. La largeur de la recherche ne depend donc plus de la
   *    longueur du logo ni du nombre de boutons — elle reste stable d'une page a l'autre. */
  .hx .hx-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:clamp(12px,2vw,28px)}
  .hx .hx-grow{display:none!important}
  .hx .hx-search--lead{margin:0 auto!important;width:min(560px,100%)!important;max-width:560px!important;
    flex:none!important;justify-self:center}
  .hx .hx-nav--out{justify-self:center}
  .hx .hx-cluster{justify-self:end}

  /* Les actions : deux familles separees par un filet discret — les outils (recherche, cloche,
     Pixi) puis l'identite et l'action principale (CTA, avatar). L'oeil trouve plus vite. */
  .hx .hx-cluster{gap:10px}
  .hx .hx-cluster > .hx-cta{margin-left:6px;position:relative}
  .hx .hx-cluster > .hx-cta::before{content:"";position:absolute;left:-9px;top:50%;
    transform:translateY(-50%);width:1px;height:22px;background:rgba(10,61,58,.14)}
  @media (max-width:900px){.hx .hx-cluster > .hx-cta::before{display:none}}

  /* Sous 780 px la grille se resserre : le burger et le logo a gauche, les actions a droite. */
  @media (max-width:780px){
    .hx .hx-row{grid-template-columns:auto 1fr auto;gap:8px}
    .hx .hx-search--lead{display:none!important}
  }

  /* 1. LE BOUTON DE FERMETURE. Un mot en gras dans un cadre attirait l'oeil autant que le champ.
   *    Il devient une croix discrete, ronde, qui ne s'allume qu'au survol. Le raccourci clavier
   *    reste indique dans le pied de la palette — c'est la sa place. */
  .hx-portal .hx-cmd-close{width:32px;height:32px;padding:0!important;display:grid;place-items:center;
    border-radius:50%!important;background:transparent!important;border:0!important;
    color:#7d8f8e;font-size:0;line-height:0;transition:background .15s,color .15s}
  .hx-portal .hx-cmd-close:hover{background:rgba(10,61,58,.07)!important;color:var(--hx-ink)}
  .hx-portal .hx-cmd-close svg{display:block}

  /* 🔴 G3, troisieme vecteur : les IMAGES.
   * Mesure sur /safari-pilanesberg-depuis-johannesburg/ : `.elementor-kit-1489 img` (0,1,1) pose
   * `border-radius:12px` sur TOUTE image de la page. Ma regle `.hx .hx-logo img` (0,2,1) gagnait
   * bien en specificite, mais elle ne DECLARAIT pas border-radius : rien ne l'annulait, donc le
   * logo restait rogne. Le bloc anti-conflit couvrait `button` et `a` — pas `img`.
   * On remet donc les images a plat, puis on rend leur rondeur aux deux qui doivent l'avoir. */
  .hx img,.hx-portal img{border-radius:0!important;box-shadow:none!important;border:0!important}
  .hx .hx-av img,.hx-portal .hx-pop-head img{border-radius:50%!important}
  .hx .hx-pixi > button img,.hx-portal .hx-cmd-ai img{border-radius:50%!important}

  /* 1. L'ETAT DE SURVOL de la palette.
   * La maquette ne se sert pas de `:hover` : elle pose `data-sel="1"` sur la ligne survolee, pour
   * que la souris et le clavier designent le MEME element (sinon deux lignes paraissent actives).
   * Mon reset anti-Elementor (`background-color:transparent!important` sur tout <a> du portail)
   * ecrasait ce fond : on le restaure explicitement, meme arme. */
  .hx-portal .hx-cmd-row[data-sel="1"]{
    background-color:rgba(30,155,82,.09)!important;
    box-shadow:inset 0 0 0 1px rgba(30,155,82,.18)!important}
  .hx-portal .hx-cmd-row[data-ai="1"]{
    background-image:linear-gradient(135deg,rgba(30,155,82,.1),rgba(32,201,184,.09))!important;
    box-shadow:inset 0 0 0 1px rgba(30,155,82,.2)!important}
  .hx-portal .hx-cmd-row[data-ai="1"][data-sel="1"]{
    background-image:linear-gradient(135deg,rgba(30,155,82,.18),rgba(32,201,184,.15))!important;
    box-shadow:inset 0 0 0 1px rgba(30,155,82,.34)!important}
  .hx-portal .hx-item:hover{background-color:rgba(30,155,82,.07)!important}
  .hx-portal .hx-cmd-row{cursor:pointer}

  /* MARGES LATERALES. La maquette fixe --hx-pad-x en pixels (20 a 32 selon la surface), ce qui
   * suffit sur l'ecran ou elle a ete dessinee mais colle aux bords des 1440 px et au-dela.
   * On passe a une marge FLUIDE : elle respire quand l'ecran s'elargit, et se resserre sur
   * mobile ou chaque pixel compte. Meme valeur pour les trois surfaces : le bandeau est le meme
   * objet d'une page a l'autre, ses marges n'ont pas de raison de changer. */
  .hx .hx-shell{padding-left:clamp(16px,3.5vw,56px)!important;padding-right:clamp(16px,3.5vw,56px)!important}
  .hx[data-surface]{--hx-pad-x:0}
  @media (max-width:600px){
    .hx .hx-shell{padding-left:14px!important;padding-right:14px!important}}

  /* La maquette plafonne le bandeau a 1440 px. Sur un ecran plus large il se centre, et la marge
   * grimpe a ~300 px : le header parait etroit, et surtout il se decale du contenu des pages
   * d'itineraire, qui va lui jusqu'aux bords. On desserre a 1720 px — assez pour que les elements
   * ne s'etirent pas a l'infini, assez large pour rester en phase avec la page. */
  .hx .hx-shell{max-width:1720px!important}

  /* L'AVATAR DE PIXI SUR FOND CLAIR.
   * Mesure : la couleur moyenne de l'illustration est rgb(71,94,76) — un vert sombre. Sur le fond
   * d'origine (degrade #0A4A47 -> #0A3D3A) le contraste tombait a 1,43 : Pixi se fondait dedans.
   * Un vert pale de la palette le remonte a 6,3, tout en restant dans l'identite (un blanc pur
   * aurait disparu dans le bandeau, lui aussi blanc). Le liseré delimite la pastille. */
  /* EH-3b (T4) — les deux box-shadow de cette vague sont RETIRES : le lisere d1 px etait
     integralement ecrase par celui de 2 px pose plus bas (vague « affordance »), a specificite
     egale et plus loin dans la feuille. Il n a jamais rien peint. Seul le degrade survit ici ;
     l ombre est definie une seule fois, dans la vague affordance. */
  .hx .hx-pixi > button{
    background-image:linear-gradient(160deg,#F2FBF6,#E1F4EA)!important}
  .hx .hx-pixi > button:hover{
    background-image:linear-gradient(160deg,#EAF8F1,#D5EFE1)!important}

  /* Meme traitement dans la palette, pour que Pixi soit le meme objet partout. */
  .hx-portal .hx-cmd-ai{
    background-image:linear-gradient(160deg,#F2FBF6,#E1F4EA)!important;
    box-shadow:inset 0 0 0 1px rgba(30,155,82,.28)!important;
    overflow:hidden}
  .hx-portal .hx-cmd-ai img{width:100%;height:100%;object-fit:cover;object-position:center}

  /* 1. LE BOUTON PIXI DOIT SE LIRE COMME UN BOUTON.
   * Un liseré d'1 px se confondait avec une simple vignette. On passe a 2 px, plus soutenu,
   * et le survol epaissit encore : l'affordance se voit sans avoir a essayer. */
  .hx .hx-pixi > button{
    box-shadow:inset 0 0 0 2px rgba(30,155,82,.55),0 2px 8px rgba(10,61,58,.12)!important;
    cursor:pointer}
  .hx .hx-pixi > button:hover{
    box-shadow:inset 0 0 0 2.5px rgba(30,155,82,.9),0 4px 14px rgba(30,155,82,.25)!important}
  .hx .hx-pixi > button:active{transform:scale(.95)}
  .hx .hx-pixi > button:focus-visible{
    box-shadow:inset 0 0 0 2.5px rgba(30,155,82,.9),0 0 0 3px rgba(30,155,82,.25)!important}

  /* 2. L'ETAT DE CHARGEMENT DE L'AVATAR.
   * Le HTML ne porte AUCUNE donnee personnelle : l'emplacement de l'avatar part donc sur un pixel
   * transparent, et le JS n'y met la vraie image qu'apres la reponse de /state. D'ou un carre
   * blanc d'une demi-seconde. On ne supprime pas l'attente — elle est voulue — on la MEUBLE :
   * une silhouette sur fond clair pendant le chargement, puis l'image apparait en fondu. */
  .hx .hx-av{
    background-color:#EAF0EF;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
    background-size:20px 20px;background-position:center;background-repeat:no-repeat}
  .hx .hx-av img{opacity:0;transition:opacity .28s ease}
  .hx .hx-av img[data-loaded="1"]{opacity:1}
  @media (prefers-reduced-motion:reduce){.hx .hx-av img{transition:none}}

  /* Le fond de la silhouette restait blanc : une regle anterieure posait `background:#fff` en
     raccourci, ce qui reinitialise la couleur. On la fixe explicitement, meme arme. */
  .hx .hx-av{background-color:#E9F0EF!important}


  /* ══════════════════════════════════════════════════════════════════════════════════════════
     REFONTE RESPONSIVE — 2026-09-01
     ══════════════════════════════════════════════════════════════════════════════════════════
     Ce bloc vient EN DERNIER, apres les cinq vagues de retours esthetiques. C est deliberé :
     a specificite egale il gagne, et c est lui qui doit decider de la GEOMETRIE (ce qui est
     visible, ou, et a quelle taille). Les vagues precedentes gardent la main sur la COULEUR.

     Ce qui est corrige ici, et qui avait ete signale ou mesure :
       1. le bouton Pixi du bandeau ouvrait une fenetre qui sortait de l ecran (cote pixidia-pixi) ;
       2. le hamburger n etait pas centre dans son bouton (corrige plus haut, cf. `.hx-ico`) ;
       3. le CTA de la feuille mobile etait plat, carre et sans libelle ;
       4. entre 781 et 960 px un visiteur n avait aucune navigation ;
       5. les panneaux flottants pouvaient depasser sur un ecran de 320 px ;
       6. la feuille mobile etait ancree a une hauteur de header ecrite en dur ;
       7. la palette laissait deux lignes visibles avec un clavier virtuel ouvert ;
       8. `100vh` ment de ~60 px sur iOS ;
       9. le fond continuait de defiler sous les surfaces modales.
     ══════════════════════════════════════════════════════════════════════════════════════════ */

  /* ---- 1. La rangee : trois zones NOMMEES, plus une file d attente -------------------------
     La grille existait deja (`auto minmax(0,1fr) auto`), mais le placement dependait de QUELS
     enfants etaient visibles : sept enfants, dont certains en `display:none` (qui ne comptent
     pas comme items de grille) et d autres en `hidden`. En connecte sur mobile il n en restait
     que deux, et le logo atterrissait dans la colonne `1fr`. Ca tenait, mais par coincidence.
     On affecte donc chaque zone a SA colonne : le resultat ne depend plus de la combinaison
     visiteur/connecte ni du palier. `.hx-left` (burger + logo) est un ajout du markup. */
  .hx .hx-left{display:flex;align-items:center;gap:clamp(6px,1.4vw,14px);min-width:0;grid-column:1}
  .hx .hx-search--lead,.hx .hx-nav--out{grid-column:2}
  .hx .hx-cluster{grid-column:3}

  /* ---- 2. Zone tactile etendue --------------------------------------------------------------
     Le visuel reste a --hx-ctl (40 px sur mobile) ; la ZONE CLIQUABLE monte a 48 px par un
     pseudo-element transparent. On gagne le confort tactile sans grossir le bandeau d un pixel.
     Restreint a `pointer:coarse` : sur une souris, agrandir les cibles rapprocherait les zones
     au point de les faire se chevaucher dans un cluster a 10 px de gouttiere. */
  @media (pointer:coarse){
    .hx .hx-ico,.hx .hx-av,.hx .hx-pixi>button,.hx .hx-cta,.hx .hx-logo{position:relative}
    .hx .hx-ico::after,.hx .hx-av::after,.hx .hx-pixi>button::after{
      content:"";position:absolute;inset:-4px;border-radius:inherit}
    .hx-portal .hx-item{min-height:44px}
  }

  /* ---- 3. Le CTA pleine largeur des panneaux ------------------------------------------------
     Remplace `style="width:100%;justify-content:center"` ecrit en dur dans portal.php. Un style
     en ligne ne peut etre repris par AUCUNE media query : c est ce qui rendait ce bouton
     inatteignable par la couche responsive. */
  .hx-portal .hx-cta--block{width:100%;justify-content:center;height:46px;padding:0 18px;
    font-size:14.5px;letter-spacing:-.01em}
  .hx-portal .hx-cta--block svg{width:17px;height:17px}
  .hx-portal .hx-cta--block span{display:inline!important}

  /* ---- 4. Aucun panneau ne depasse de l ecran ------------------------------------------------
     Les largeurs sont ecrites en ligne dans portal.php (300 px pour le compte, 356 px pour les
     notifications, 244 px pour la langue) et `place()` ne borne que la POSITION. Sur un ecran
     de 320 px, le panneau des notifications depassait donc de 36 px quoi que fasse le JS. */
  .hx-portal .hx-pop{max-width:calc(100vw - 20px)}
  .hx-portal .hx-mega{width:min(660px,calc(100vw - 24px));max-width:calc(100vw - 24px)}

  /* Le mega-menu passe a une colonne quand deux ne tiennent plus. `auto-fit` + `min(100%,240px)`
     evite le debordement sous 300 px de viewport. */
  .hx-portal .hx-mega-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

  /* ---- 5. La feuille mobile suit la hauteur REELLE du bandeau --------------------------------
     Elle etait ancree a `top:72px`. Or le bandeau mesure 64 px (home/app mobile), 52 px
     (magazine < 768), 52 px (itineraire < 768) et jusqu a 77 px sur desktop — sans compter le
     mode condense, qui bouge au scroll. `--hx-h` est MESUREE par header.js (ResizeObserver) et
     republiee sur `:root` ; la valeur ecrite ici n est qu un repli pour la premiere frame.
     `dvh` remplace `vh` : sur iOS, `100vh` compte la barre d URL comme si elle etait toujours
     retractee, soit ~60 px de trop — la feuille debordait sous le pli. */
  .hx-portal .hx-sheet{top:calc(var(--hx-h,64px) + 8px);
    max-height:calc(100vh - var(--hx-h,64px) - 24px);
    max-height:calc(100dvh - var(--hx-h,64px) - 24px)}
  @media (max-width:600px){
    .hx-portal .hx-sheet{left:10px;right:10px;border-radius:18px}
  }
  /* Le pied colle de la feuille visiteur : il portait un `bottom:-10px` cale sur le padding du
     conteneur. Avec le padding bas ajoute ci-dessous il decollait d autant. */
  .hx-portal .hx-sheet-foot{padding:10px 8px 8px;display:flex;flex-direction:column;
    align-items:center;gap:7px;text-align:center}
  .hx-portal .hx-sheet-foot small{font-size:11.5px;font-weight:600;color:var(--hx-muted)}

  /* ---- 6. La palette : une feuille haute sur petit ecran -------------------------------------
     `top:11vh` + liste a `52vh` laissait DEUX lignes visibles des qu un clavier virtuel
     s ouvrait. Sous 600 px elle prend donc toute la largeur et part du haut : le champ reste
     colle au bord superieur, la ou le clavier ne monte jamais. */
  .hx-portal .hx-cmd{max-height:calc(100dvh - 24px)}
  .hx-portal .hx-cmd-list{max-height:min(52dvh,460px)}
  @media (max-width:600px){
    .hx-portal .hx-cmd{top:0;left:0;right:0;width:100%;max-width:none;transform:none;
      border-radius:0 0 20px 20px;border-top:0;max-height:100dvh;
      animation:hx-cmd-in-sm .26s var(--hx-sm)}
    .hx-portal .hx-cmd-in{padding:14px 14px}
    .hx-portal .hx-cmd-in input{font-size:16px}   /* < 16px : iOS zoome sur le champ au focus */
    .hx-portal .hx-cmd-list{max-height:calc(100dvh - 132px)}
    /* Le pied de la palette rappelle des raccourcis CLAVIER : sur un ecran tactile il occupe
       une ligne pour rien, et cette ligne manque a la liste de resultats. */
    .hx-portal .hx-cmd-foot{display:none}
  }
  @keyframes hx-cmd-in-sm{from{opacity:0;transform:translateY(-12px)}}

  /* ---- 7. Le verrou de defilement ------------------------------------------------------------
     `overflow:hidden` sur <html> ne verrouille PAS iOS Safari : le fond continuait de defiler
     sous la palette et sous la feuille. Le seul mecanisme qui tienne est `position:fixed` sur
     <body>, avec memorisation puis restauration du scroll — c est header.js qui pose le decalage
     en ligne, ici on ne declare que ce qui ne depend pas de la valeur. */
  html.hx-locked{overflow:hidden}
  html.hx-locked body{position:fixed;width:100%;overflow:hidden}

  /* ---- 8. Grands ecrans ----------------------------------------------------------------------
     Au-dela de 1440 px la recherche restait a 560 px alors que la rangee, elle, continuait de
     s elargir jusqu a 1720 : le bandeau se creusait au centre. Elle suit desormais, sans jamais
     depasser une longueur de ligne confortable. */
  @media (min-width:1441px){
    .hx .hx-search--lead{width:min(680px,100%)!important;max-width:680px!important}
  }

  /* ---- 9. Tres petits ecrans (320-360 px) ---------------------------------------------------
     A 320 px, six controles de 40 px plus le logo ne tiennent pas. On resserre la gouttiere et
     l ecart du cluster AVANT que quoi que ce soit ne deborde — mesure : a 320 px on tient a
     burger 40 + logo 78 + 3x40 + gaps 8x4 = 302 px pour 292 px utiles sans ce resserrement. */
  @media (max-width:400px){
    .hx .hx-shell{padding-left:10px!important;padding-right:10px!important}
    .hx .hx-cluster{gap:6px}
    .hx .hx-row{gap:8px}
    .hx .hx-logo img{height:22px;max-height:22px}
  }

  /* ---- 10. Impression -----------------------------------------------------------------------
     Un bandeau colle, ses ombres et ses panneaux n ont aucun sens sur une feuille de papier —
     et l article magazine, lui, s imprime. */
  @media print{
    .hx,.hx-portal{display:none!important}
  }

/* Component-owned menu colours, including keyboard and pointer states. */
.hx-portal a.hx-item,.hx-portal a.hx-item:is(:hover,:focus,:focus-visible,:active){color:var(--hx-ink)}
.hx-portal a.hx-item--danger,.hx-portal a.hx-item--danger:is(:hover,:focus,:focus-visible,:active){color:#d32f2f}

/* Guest V2 fidelity: Header (1).zip, 2026-10-05. Keep authenticated layout intact. */
.hx[data-out="1"]:is([data-surface="home"],[data-surface="app"]){--hx-row:48px;--hx-pad-y:14px;--hx-pad-x:32px;--hx-ctl:40px}
.hx[data-out="1"][data-pxdh-floating="1"]{position:fixed;top:0;left:0;right:0;width:100%;z-index:9001}
.hx[data-out="1"] .hx-shell{max-width:1440px!important}
/* Home/app use outer padding; compact surfaces keep the shared shell gutters. */
.hx[data-out="1"]:is([data-surface="home"],[data-surface="app"]) .hx-shell{padding-left:0!important;padding-right:0!important}
.hx[data-out="1"]:is([data-surface="home"],[data-surface="app"]) .hx-exp{border-bottom:0!important;background:rgba(245,247,247,.96)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.hx[data-out="1"]:is([data-surface="home"],[data-surface="app"])[data-condensed="1"]{--hx-row:44px;--hx-pad-y:8px;--hx-ctl:36px}
.hx[data-out="1"]:is([data-surface="home"],[data-surface="app"])[data-condensed="1"] .hx-exp{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(18px) saturate(160%)!important;-webkit-backdrop-filter:blur(18px) saturate(160%)!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.7),0 8px 24px -14px rgba(15,163,107,.34)!important}
.hx[data-out="1"] .hx-row{gap:20px}
.hx[data-out="1"] .hx-nav--out{justify-self:start;margin-left:8px}
.hx .hx-nav--out>a,.hx .hx-nav--out>button{position:relative;z-index:1;display:flex;align-items:center;gap:7px;height:var(--hx-ctl);padding:0 14px!important;border-radius:9999px!important;font-size:13.5px!important;font-weight:600!important;line-height:1.2;letter-spacing:-.005em;color:var(--hx-ink-2)!important;white-space:nowrap}
.hx .hx-nav--out>a:hover,.hx .hx-nav--out>button:hover{color:var(--hx-ink)!important}
.hx .hx-nav--out>.hx-ind{position:absolute;top:0;left:0;height:var(--hx-ctl);pointer-events:none;z-index:0;border:1px solid rgba(255,255,255,.9);transition:left .42s var(--hx-bo),width .42s var(--hx-bo),opacity .25s;opacity:0;border-radius:9999px!important;background:rgba(255,255,255,.92)!important;box-shadow:0 6px 16px -6px rgba(15,163,107,.28),0 1px 3px rgba(15,163,107,.08)!important}
.hx .hx-nav--out>button[aria-expanded="true"]{color:var(--hx-ink)!important;font-weight:700!important}
.hx .hx-nav--out>button[aria-expanded="true"] .hx-cv{transform:rotate(180deg)}
.hx[data-out="1"] .hx-cluster{gap:8px}
.hx[data-out="1"] .hx-link{font-size:13px!important;font-weight:700!important;color:var(--hx-ink)!important}
.hx-portal .hx-mega-grid{grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px 14px 14px}
.hx-portal .hx-mega-grid .hx-lbl{padding:0 6px 6px}
.hx-portal .hx-mega-grid .hx-item{align-items:flex-start;padding:9px 10px}
.hx-portal .hx-mega-grid .hx-item-i{margin-top:1px}
.hx-portal .hx-mega-grid .hx-item small{white-space:normal}
.hx-portal .hx-mega-grid .hx-item:hover .hx-item-i{background:rgba(30,155,82,.12);color:var(--hx-acc)}
.hx-portal #hx-lang .hx-item[data-on="1"]{background:rgba(30,155,82,.08)!important;font-weight:700!important}
.hx-portal #hx-lang .hx-item[data-on="1"] .hx-item-n{background:#1E9B52!important;color:#fff!important}
.hx-portal #hx-lang [data-pxdh-lang-check]{color:var(--hx-acc)}
.hx-portal #hx-lang .hx-item:disabled{opacity:.6;cursor:not-allowed}
@media (max-width:780px){
 .hx[data-out="1"]:is([data-surface="home"],[data-surface="app"]){--hx-row:44px;--hx-pad-y:8px;--hx-pad-x:14px;--hx-ctl:38px}
 .hx[data-out="1"]:is([data-surface="home"],[data-surface="app"])[data-condensed="1"]{--hx-row:40px;--hx-pad-y:6px;--hx-ctl:34px}
}
@media (max-width:600px){.hx-portal .hx-mega-grid{grid-template-columns:1fr}.hx-portal .hx-mega-foot{flex-wrap:wrap}.hx-portal .hx-mega-foot>.hx-cta{margin-left:0}}

/* Mobile notifications move into the account menu; the desktop menu stays unchanged. */
.hx-portal #hx-profile .hx-account-mobile{display:none!important}
@media(max-width:780px){.hx-portal #hx-profile .hx-account-mobile{display:flex!important}}

/* Language choice remains available after refusal; Google has its own consent. */
.hx-portal #hx-lang{width:320px;max-width:calc(100vw - 28px);padding:12px;max-height:min(620px,calc(100dvh - 132px));overflow:auto;scrollbar-width:thin;scrollbar-color:#b8c5c5 transparent}
.hx-portal #hx-lang [hidden]{display:none!important}
.hx-portal #hx-lang .hx-lang-heading{display:flex;align-items:center;gap:9px;padding:4px 6px 12px;color:var(--hx-ink);font-size:15px}
.hx-portal #hx-lang .hx-lang-name{flex:1;font-size:14px;font-weight:650}
.hx-portal #hx-lang .hx-item{min-height:39px;padding:9px 10px;margin-top:2px}
.hx-portal #hx-lang .hx-lang-notice{position:relative;padding:12px 12px 12px 42px;margin-bottom:10px;border:1px solid rgba(30,155,82,.14);border-radius:16px;background:linear-gradient(135deg,rgba(30,155,82,.08),rgba(32,201,184,.05));color:var(--hx-ink);box-shadow:0 4px 10px rgba(15,163,107,.05)}
.hx-portal #hx-lang .hx-lang-notice-icon{position:absolute;left:13px;top:14px;color:var(--hx-acc)}
.hx-portal #hx-lang .hx-lang-notice p{margin:0;font-size:12px;font-weight:550;line-height:1.45;color:var(--hx-ink)}
.hx-portal #hx-lang .hx-lang-target{display:block;margin:12px 0 6px;font-size:17px;font-weight:750}
.hx-portal #hx-lang .hx-lang-details{font-size:12px;line-height:1.5}
.hx-portal #hx-lang .hx-lang-privacy{display:inline-block;margin-top:8px;font-size:12px;font-weight:650;color:var(--hx-ink);text-decoration:underline}
.hx-portal #hx-lang .hx-lang-confirm-actions{display:grid;gap:6px;margin-top:12px}
.hx-portal #hx-lang .hx-lang-confirm-actions button{min-height:40px;padding:9px 10px;border-radius:9999px!important;font:650 12px/1.35 Urbanist,sans-serif;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s}
.hx-portal #hx-lang .hx-lang-accept{border:0!important;background:linear-gradient(135deg,#0A3D3A,#1E9B52)!important;color:#fff;box-shadow:0 4px 10px rgba(15,163,107,.16)!important}
.hx-portal #hx-lang .hx-lang-cancel{border:1px solid rgba(10,61,58,.16)!important;background:rgba(255,255,255,.7)!important;color:var(--hx-ink)}
.hx-portal #hx-lang .hx-lang-confirm-actions button:hover{transform:translateY(-1px);background:#178440!important;color:#fff;box-shadow:0 6px 14px rgba(15,163,107,.2)!important}
.hx-portal #hx-lang .hx-lang-confirm-actions button:active{transform:scale(.97)}
/* Traduction active : bandeau d'état doux, « Désactiver » en petit bouton (plus de lien souligné). */
.hx-portal #hx-lang .hx-lang-active:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0;padding:9px 9px 9px 12px;border:1px solid rgba(30,155,82,.16);border-radius:14px;background:linear-gradient(135deg,rgba(30,155,82,.08),rgba(32,201,184,.05))}
.hx-portal #hx-lang .hx-lang-active>span{display:inline-flex;align-items:center;gap:9px;min-width:0;font:650 12.5px/1.35 Urbanist,sans-serif;color:var(--hx-ink)}
.hx-portal #hx-lang .hx-lang-active>span::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#1E9B52;box-shadow:0 0 0 4px rgba(30,155,82,.16)}
.hx-portal #hx-lang .hx-lang-active button{flex-shrink:0;min-height:32px;padding:6px 12px;border:1px solid rgba(10,61,58,.14)!important;border-radius:9999px!important;background:#fff!important;font:700 12px/1 Urbanist,sans-serif;color:var(--hx-ink);cursor:pointer;box-shadow:0 2px 6px rgba(10,61,58,.06);transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.hx-portal #hx-lang .hx-lang-active button:hover{border-color:rgba(30,155,82,.35)!important;background:#f1faf5!important;box-shadow:0 4px 10px rgba(15,163,107,.14);transform:translateY(-1px)}
.hx-portal #hx-lang .hx-lang-active button:active{transform:scale(.96)}
/* Choix de cookies : ligne de pied de panneau, séparée par un filet, icône + flèche qui glisse au survol. */
.hx-portal #hx-lang .hx-lang-settings{display:flex;align-items:center;gap:9px;width:calc(100% + 12px);margin:12px -6px 0;padding:11px 10px;border:0!important;border-top:1px solid rgba(10,61,58,.08)!important;border-radius:0 0 12px 12px!important;background:none!important;font:650 12.5px/1.3 Urbanist,sans-serif;color:var(--hx-muted);text-align:left;cursor:pointer;transition:background .18s,color .18s}
.hx-portal #hx-lang .hx-lang-settings::before,.hx-portal #hx-lang .hx-lang-settings::after{content:"";flex-shrink:0;background:currentColor;-webkit-mask:var(--hx-mask) center/contain no-repeat;mask:var(--hx-mask) center/contain no-repeat}
.hx-portal #hx-lang .hx-lang-settings::before{width:16px;height:16px;--hx-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E");color:#1E9B52}
.hx-portal #hx-lang .hx-lang-settings::after{width:14px;height:14px;margin-left:auto;--hx-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");transition:transform .2s}
.hx-portal #hx-lang .hx-lang-settings:hover{background:rgba(10,61,58,.04)!important;color:var(--hx-ink)}
.hx-portal #hx-lang .hx-lang-settings:hover::after{transform:translateX(3px)}
.hx-portal #hx-lang .hx-lang-settings:active{background:rgba(10,61,58,.07)!important}
.hx-portal #hx-lang .hx-lang-error{font-size:12px;line-height:1.45;color:var(--hx-ink);padding:10px;background:rgba(236,171,0,.12);border-radius:12px}
.hx-portal #hx-lang[data-pending] .hx-lang-list{display:none}
.hx-portal #hx-lang button:focus-visible,.hx-portal #hx-lang a:focus-visible{outline:2px solid #1E9B52;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hx-portal #hx-lang button{transition:none!important;transform:none!important}}

/* First-use permission speaks the requested language, without a general cookie wall. */
.hx-portal #hx-lang[data-pending] .hx-lang-settings{display:none!important}
.hx-portal #hx-lang .hx-lang-notice{padding:14px;margin-bottom:0}
.hx-portal #hx-lang .hx-lang-notice-icon{display:none}
.hx-portal #hx-lang .hx-lang-target{margin:0 0 8px;font-size:12px;letter-spacing:.02em;color:var(--hx-muted)}
.hx-portal #hx-lang .hx-lang-notice .hx-lang-details{font-size:13px;line-height:1.5}
.hx-portal #hx-lang .hx-lang-notice .hx-lang-note{margin-top:8px;font-size:11px;color:var(--hx-muted)}
.hx-portal #hx-lang .hx-lang-confirm-actions{grid-template-columns:1fr 1fr}