/**
 * HEADER - SOURCE UNIQUE  (05/09/2026, v1.1.0 : + mega-menu Apprendre)
 *
 * Avant : la geometrie du header etait recopiee dans le <style> de chacune
 * des ~120 pages, avec des derives (boutons 44 px ici, 42 la, logo decale de
 * 7 ou 13 px, .suiro-header de 81 px dans un conteneur de 70 px), et
 * desktop-scale.css ne reduisait le header que sur les pages de grille.
 * Resultat : le header sautait a chaque changement de page.
 *
 * Maintenant : ce fichier fixe SEUL la geometrie du header, sur toutes les
 * pages, en bureau (>= 769 px). Les regles sont prefixees #header-container
 * et marquees !important pour gagner sur les <style> des pages sans avoir a
 * les reecrire.
 *
 * Paliers de hauteur = ceux de desktop-scale.css (940 / 790 / 700).
 *
 * --hdr-k : facteur de compensation. Les pages sans grille reduisent tout
 * leur <body> par un zoom (desktop-scale-pages.css) ; ce fichier multiplie
 * chaque longueur par k = 1/zoom pour que le header RENDE a la meme taille
 * que sur une page de grille (zoom 1, k = 1). desktop-scale-pages.css pose
 * --hdr-k, ici il vaut 1 par defaut.
 */
:root {
  --hdr-k: 1;
  --hdr-h: 70px;
  --hdr-px: 30px;
  --hdr-logo: 55px;
  --hdr-logo-max: 275px;
  --hdr-font: 16px;
  --hdr-btn-h: 44px;
  --hdr-btn-px: 20px;
  --hdr-gap: 12px;
  --header-height: calc(var(--hdr-h) * var(--hdr-k)) !important;
  --header-logo-height: calc(var(--hdr-logo) * var(--hdr-k)) !important;
  --header-logo-max-width: calc(var(--hdr-logo-max) * var(--hdr-k)) !important;
  --header-font: calc(var(--hdr-font) * var(--hdr-k)) !important;
}
@media (min-width: 769px) and (max-height: 940px) {
  :root { --hdr-h: 64px; --hdr-px: 26px; --hdr-logo: 50px; --hdr-logo-max: 250px; --hdr-btn-h: 42px; }
}
@media (min-width: 769px) and (max-height: 790px) {
  :root { --hdr-h: 60px; --hdr-px: 22px; --hdr-logo: 46px; --hdr-logo-max: 230px; --hdr-btn-h: 40px; --hdr-font: 15px; --hdr-btn-px: 18px; }
}
@media (min-width: 769px) and (max-height: 700px) {
  :root { --hdr-h: 56px; --hdr-px: 20px; --hdr-logo: 42px; --hdr-logo-max: 210px; --hdr-btn-h: 38px; --hdr-font: 14px; --hdr-btn-px: 16px; --hdr-gap: 10px; }
}

@media (min-width: 769px) {
  #header-container {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: var(--header-height) !important; min-height: 0 !important;
    z-index: 2000 !important; background: #fff; overflow: visible;
  }
  #header-container .suiro-header {
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: 100% !important; height: var(--header-height) !important; min-height: 0 !important;
    padding: 0 calc(var(--hdr-px) * var(--hdr-k)) !important; margin: 0 !important;
    background: #fff !important; border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important;
    opacity: 1 !important; transition: none !important; overflow: visible !important;
  }
  #header-container .suiro-nav-left,
  #header-container .suiro-nav-right {
    display: flex !important; align-items: center !important; height: 100% !important;
    gap: calc(16px * var(--hdr-k)) !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important;
  }
  #header-container .suiro-nav-menu {
    display: flex !important; align-items: center !important;
    gap: calc(var(--hdr-gap) * var(--hdr-k)) !important; visibility: visible !important; opacity: 1 !important;
  }
  #header-container .suiro-nav-btn,
  #header-container .suiro-auth-btn {
    box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    height: calc(var(--hdr-btn-h) * var(--hdr-k)) !important; min-height: 0 !important; min-width: 0 !important;
    padding: 0 calc(var(--hdr-btn-px) * var(--hdr-k)) !important; margin: 0 !important;
    font-size: calc(var(--hdr-font) * var(--hdr-k)) !important; line-height: 1 !important; font-weight: 600 !important;
    font-family: inherit !important; color: #374151 !important; background: transparent !important;
    border: 2px solid #d1d5db !important; border-radius: 6px !important;
    white-space: nowrap !important; cursor: pointer !important; text-decoration: none !important;
    visibility: visible !important; opacity: 1 !important; outline: 0 !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
  }
  #header-container .suiro-nav-btn:hover,
  #header-container .suiro-auth-btn:hover { background: #f3f4f6 !important; border-color: #9ca3af !important; color: #1f2937 !important; }
  #header-container .suiro-nav-btn.active { background: #007aff !important; border-color: transparent !important; color: #fff !important; }

  /* Logo : centre geometrique du header, sans marge magique. */
  #header-container .suiro-logo {
    position: absolute !important; left: 50% !important; top: 0 !important; bottom: 0 !important;
    transform: translateX(-50%) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; height: auto !important;
    background: transparent !important; border-radius: 8px; cursor: pointer; z-index: 2001 !important;
    transition: transform .3s ease !important; will-change: transform;
  }
  #header-container .suiro-logo:hover { transform: translateX(-50%) scale(1.02) !important; background: transparent !important; }
  #header-container .suiro-logo .suiro-logo-container {
    position: static !important; transform: none !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; align-items: center !important; line-height: 0 !important; background: transparent !important;
  }
  #header-container .suiro-logo-svg,
  #header-container .suiro-logo-image {
    display: block !important;
    height: calc(var(--hdr-logo) * var(--hdr-k)) !important;
    max-width: calc(var(--hdr-logo-max) * var(--hdr-k)) !important;
    width: auto !important; object-fit: contain;
  }
  /* Squelette bi-marque : les deux logos sont dans la page, on montre celui du domaine. */
  html.brand-tsuidoku #header-container .suiro-logo-brand-suirodoku,
  html.brand-suirodoku #header-container .suiro-logo-brand-tsuidoku,
  html:not(.brand-tsuidoku):not(.brand-suirodoku) #header-container .suiro-logo-brand-tsuidoku { display: none !important; }

  #header-container .suiro-auth-buttons {
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    height: 100% !important; min-height: 0 !important; min-width: calc(150px * var(--hdr-k)) !important;
    gap: calc(var(--hdr-gap) * var(--hdr-k)) !important;
  }
  #header-container .suiro-user-menu { position: relative !important; display: inline-flex !important; align-items: center !important; height: 100% !important; }
  #header-container .suiro-user-name {
    display: flex !important; align-items: center !important; gap: calc(8px * var(--hdr-k)) !important;
    height: calc(var(--hdr-btn-h) * var(--hdr-k)) !important; padding: 0 calc(8px * var(--hdr-k)) !important; margin: 0 !important;
    font-size: calc(var(--hdr-font) * var(--hdr-k)) !important; font-weight: 600 !important; color: #374151 !important;
    background: transparent !important; border: none !important; cursor: pointer; white-space: nowrap;
  }
  #header-container .suiro-user-name::after { content: '\25BC'; font-size: calc(10px * var(--hdr-k)); transition: transform .3s ease; }
  #header-container .suiro-user-menu:hover .suiro-user-name::after { transform: rotate(180deg); }
  #header-container .suiro-dropdown-menu {
    position: absolute !important; top: 100% !important; right: 0 !important; margin-top: calc(-6px * var(--hdr-k));
    min-width: calc(200px * var(--hdr-k)); padding: 0; z-index: 2100;
    background: rgba(255, 255, 255, .98) !important; border: 1px solid rgba(229, 229, 234, .6) !important; border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12) !important;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  #header-container .suiro-user-menu:hover .suiro-dropdown-menu,
  #header-container .suiro-user-menu:focus-within .suiro-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  #header-container .suiro-dropdown-menu a {
    display: block !important; padding: calc(13px * var(--hdr-k)) calc(20px * var(--hdr-k)) !important;
    font-size: calc(var(--hdr-font) * var(--hdr-k)) !important; font-weight: 500 !important; color: #1c1c1e !important;
    text-decoration: none !important; border-bottom: 1px solid rgba(229, 229, 234, .5); white-space: nowrap;
  }
  #header-container .suiro-dropdown-menu a:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
  #header-container .suiro-dropdown-menu a:last-child { border-bottom: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
  #header-container .suiro-dropdown-menu a:hover,
  #header-container .suiro-dropdown-menu a:focus { background: rgba(0, 122, 255, .1) !important; color: #007aff !important; }
}

/* ---- MEGA-MENU « Apprendre » (bureau) ---- */
@media (min-width: 769px) {
  #header-container .suiro-learn{position:relative;display:inline-flex;align-items:center;height:100%}
  #header-container .suiro-learn-btn .chev{font-size:9px;margin-left:8px;opacity:.7;transition:transform .2s}
  #header-container .suiro-learn.open .suiro-learn-btn{background:#f3f4f6!important;border-color:#9ca3af!important}
  #header-container .suiro-learn.open .suiro-learn-btn .chev{transform:rotate(180deg)}
  #header-container .suiro-mega{position:fixed;left:0;right:0;top:var(--header-height,70px);background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 20px 50px rgba(15,23,42,.14);padding:26px 0 22px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1999;font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:#1c1c1e;text-align:left;cursor:default}
  #header-container .suiro-learn.open .suiro-mega{opacity:1;visibility:visible;transform:translateY(0)}
  #header-container .suiro-mega-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr 1fr 1.15fr;gap:34px;padding:0 26px}
  #header-container .suiro-mega h4{margin:0 0 10px;font-size:11px;letter-spacing:2px;font-weight:700;color:#8b93a1;text-transform:uppercase;display:flex;align-items:center;gap:8px}
  #header-container .suiro-mega h4 i{width:20px;height:20px;border-radius:6px;display:inline-block}
  #header-container .suiro-mega a{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:0 -10px;border-radius:8px;color:#1f2937;text-decoration:none;font-size:14.5px;font-weight:500;line-height:1.3}
  #header-container .suiro-mega a:hover{background:rgba(0,122,255,.08);color:#007aff}
  #header-container .suiro-mega a em{font-style:normal;font-size:12px;color:#8b93a1;font-weight:500;margin-left:auto;white-space:nowrap;padding-left:10px}
  #header-container .suiro-mega-foot{max-width:1180px;margin:16px auto 0;padding:12px 26px 0;border-top:1px solid #eef0f4;display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:#6b7280}
  #header-container .suiro-mega-foot b{color:#1f2937}
  #header-container .suiro-mega-foot .go{color:#007aff;font-weight:700;text-decoration:none;padding:0}
  #header-container .suiro-mega-foot .go:hover{background:transparent;text-decoration:underline}
}
/* mobile : le panneau reste ferme, le bouton mene au hub */
@media (max-width: 768px) {
  #header-container .suiro-mega { display: none !important; }
}
