/* =====================================================================
   HEADER — composant autonome (préfixe hd-), indépendant du reste de la page
   Contenu : indicateur de disponibilité · lien « Connexion » · sélecteur de langue FR / EN / DE / IT / ES / AR
   Propriétés logiques (margin-inline…) : le header se retourne tout seul en arabe (droite à gauche).
   Tout est confiné à .hd-header : aucune règle globale, aucune dépendance.
   Variables réglables sur .hd-header : couleurs, taille du texte, hauteur.
   ===================================================================== */
.hd-header{
  --hd-ink:#f4f4f6;              /* texte */
  --hd-ink-dim:rgba(244,244,246,.62);
  --hd-ok:#00e8b0;               /* disponible */
  --hd-ok-rgb:0,232,176;
  --hd-busy:#ff9f43;             /* indisponible */
  --hd-busy-rgb:255,159,67;
  --hd-blue:#0a84ff;             /* icône de connexion */
  --hd-line:rgba(190,192,204,.55);
  --hd-font:15px;
  --hd-h:58px;
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--hd-h);padding:0 4px;color:var(--hd-ink);
  font:400 var(--hd-font)/1.2 Outfit,-apple-system,"Geeza Pro","Noto Sans Arabic",BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hd-header *,.hd-header *::before,.hd-header *::after{box-sizing:border-box}
/* filet sous la barre : fin, gris clair, qui s'estompe aux extrémités */
.hd-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(190,192,204,.25),var(--hd-line) 12%,rgba(205,206,216,.7) 50%,var(--hd-line) 88%,rgba(190,192,204,.25))}

/* ---------- Disponibilité ---------- */
.hd-avail{display:inline-flex;align-items:center;gap:18px;min-width:0;white-space:nowrap}
.hd-avail__dot{--c:var(--hd-ok);--c-rgb:var(--hd-ok-rgb);position:relative;flex:none;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 62%);
  box-shadow:0 0 10px rgba(var(--c-rgb),.55)}
/* halo qui « respire » doucement : signal vivant, mais discret */
.hd-avail__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(var(--c-rgb),.45);
  animation:hdPulse 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes hdPulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.3);opacity:0}}
.hd-header[data-status="busy"] .hd-avail__dot{--c:var(--hd-busy);--c-rgb:var(--hd-busy-rgb)}
.hd-avail__text{overflow:hidden;text-overflow:ellipsis;letter-spacing:.005em}
.hd-avail__short{display:none}

/* ---------- Côté droit ---------- */
.hd-actions{display:inline-flex;align-items:center;flex:none}
.hd-login{display:inline-flex;align-items:center;gap:22px;padding:8px 10px;margin-inline-end:30px;border-radius:12px;
  color:var(--hd-ink);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,transform .12s ease-out}
.hd-login__icon{width:28px;height:28px;flex:none;color:var(--hd-blue);filter:drop-shadow(0 0 6px rgba(10,132,255,.45));transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.hd-login__icon .hd-arrow{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.hd-login:hover{background:rgba(255,255,255,.05)}
.hd-login:hover .hd-arrow{transform:translateX(1.5px)}          /* la flèche pointe vers l'action */
.hd-login:active{transform:scale(.97)}
.hd-sep{width:1px;height:30px;flex:none;background:rgba(170,170,180,.7)}

/* sélecteur de langue */
.hd-lang{position:relative;margin-inline-start:30px}
/* même pastille que sur les autres pages : globe + code + chevron */
.hd-lang__btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  font:600 12px/1 Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;letter-spacing:.06em;color:var(--hd-ink);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,transform .1s ease-out}
.hd-lang__btn:hover{background:rgba(255,255,255,.1)}
.hd-lang__btn:active{transform:scale(.97)}
.hd-globe,.hd-chev{flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.hd-globe{width:16px;height:16px;stroke-width:1.8}
.hd-code{font-weight:600}
.hd-chev{width:13px;height:13px;stroke-width:1.8;opacity:.7;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hd-lang.is-open .hd-chev{transform:rotate(180deg)}
/* textes qui changent de langue : fondu bref */
.hd-avail__long,.hd-avail__short,.hd-login__label{transition:opacity .14s ease,filter .14s ease}
.is-swapping{opacity:0;filter:blur(2px)}

/* menu : verre dépoli, ancré sous le bouton (s'ouvre depuis le coin du bouton) */
.hd-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:50;min-width:214px;max-height:min(70vh,360px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;list-style:none;border-radius:16px;
  background:rgba(22,22,30,.72);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.55);
  transform-origin:calc(100% - 24px) 0;opacity:0;transform:scale(.94) translateY(-4px);visibility:hidden;
  transition:opacity .18s ease,transform .32s cubic-bezier(.2,.9,.25,1),visibility 0s linear .32s}
.hd-lang.is-open .hd-menu{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .32s cubic-bezier(.2,.9,.25,1),visibility 0s}
.hd-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer;outline:none;
  color:var(--hd-ink);transition:background-color .15s ease}
.hd-opt__name{flex:1}
.hd-opt__code{font-size:.82em;color:var(--hd-ink-dim);letter-spacing:.04em}
.hd-opt__check{width:16px;height:16px;fill:none;stroke:var(--hd-blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hd-opt[aria-selected="true"] .hd-opt__check{opacity:1}
.hd-opt:hover,.hd-opt.is-active{background:rgba(255,255,255,.08)}

/* focus clavier */
.hd-login:focus-visible,.hd-lang__btn:focus-visible{outline:2px solid var(--hd-blue);outline-offset:2px}
.hd-lang__btn[data-pointer]:focus-visible{outline:none}   /* anneau de focus réservé au clavier */
.hd-opt.is-active:focus-visible,.hd-menu:focus-visible{outline:none}

/* ---------- Petits écrans ---------- */
@media (max-width:640px){
  .hd-header{--hd-font:14px;gap:10px}
  .hd-avail{gap:10px}
  .hd-avail__long{display:none}.hd-avail__short{display:inline}
  .hd-login{gap:10px;margin-inline-end:12px;padding:8px}
  .hd-login__icon{width:24px;height:24px}
  .hd-lang{margin-inline-start:12px}
  .hd-lang__btn{gap:7px}
  .hd-sep{height:24px}
}
@media (max-width:380px){ .hd-login__label{display:none} }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .hd-avail__dot::after{animation:none;opacity:0}
  .hd-menu,.hd-lang.is-open .hd-menu{transition:opacity .15s ease,visibility 0s;transform:none}
  .hd-chev,.hd-login__icon .hd-arrow{transition:none}
}
@media (prefers-reduced-transparency:reduce){ .hd-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(24,24,30)} }
@media (prefers-contrast:more){ .hd-header{--hd-ink-dim:#fff;--hd-line:#fff} .hd-menu{box-shadow:inset 0 0 0 2px #fff} }

/* ---------- Droite à gauche (arabe) ---------- */
.hd-header:dir(rtl) .hd-menu{transform-origin:24px 0}
.hd-header:dir(rtl) .hd-login__icon{transform:scaleX(-1)}            /* la flèche entre toujours « dans » la porte */
.hd-header:dir(rtl) .hd-login:hover .hd-arrow{transform:translateX(1.5px)}
.hd-header:dir(rtl) .hd-avail__text{letter-spacing:0}
.hd-opt__name bdi{unicode-bidi:isolate}   /* l'arabe garde son sens de lecture, aligné comme les autres lignes */

/* =====================================================================
   MODE CLAIR (html[data-theme="light"], activé par la lampe du hero) — même mise en page
   ===================================================================== */
:root[data-theme="light"] .hd-header{--hd-ink:#1b1f2e;--hd-ink-dim:rgba(27,31,46,.6);--hd-line:rgba(27,31,46,.18);--hd-ok:#00b386;--hd-ok-rgb:0,179,134}
:root[data-theme="light"] .hd-header::after{background:linear-gradient(90deg,rgba(27,31,46,.05),var(--hd-line) 12%,rgba(27,31,46,.24) 50%,var(--hd-line) 88%,rgba(27,31,46,.05))}
:root[data-theme="light"] .hd-login__icon{filter:none}
:root[data-theme="light"] .hd-sep{background:rgba(27,31,46,.22)}
:root[data-theme="light"] .hd-login:hover,:root[data-theme="light"] .hd-lang__btn:hover{background:rgba(27,31,46,.05)}
:root[data-theme="light"] .hd-lang__btn{background:rgba(20,26,46,.04);box-shadow:inset 0 0 0 1px rgba(20,26,46,.14)}
:root[data-theme="light"] .hd-menu{background:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1px rgba(27,31,46,.08),0 18px 40px rgba(27,31,46,.16)}
:root[data-theme="light"] .hd-opt:hover,:root[data-theme="light"] .hd-opt.is-active{background:rgba(27,31,46,.06)}
@media (prefers-reduced-transparency:reduce){ :root[data-theme="light"] .hd-menu{background:#fff} }

/* téléphone compact */
@media (max-width:540px){
  .hd-header{--hd-h:44px;--hd-font:13px}
  .hd-avail__dot{width:12px;height:12px}
  .hd-login__icon{width:20px;height:20px}
  .hd-lang__btn{height:32px;padding:0 10px;gap:6px}
  .hd-sep{height:20px}
}