/* 02-header.css — Header ARKHEIN PAIDEIA + barre sticky + mobile drawer */

/* ===================== Sticky spacer / sentinel ===================== */
#bar-sentinel{ height:1px; }

#bar-spacer{
  height:0;
  transition:none;
}

/* ===================== Variables header ===================== */
body{
  --logo-y:-10px;
  --nav-hover-raise:-3px;
  --nav-underline-bottom:3px;
}

.site-header{
  position:relative;
  z-index:5000;
}

/* ===================== Bande blanche : logo PAIDEIA existant ===================== */
.head-top{
  background:#fff;
  position:relative;
  z-index:1;
}

.head-top-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 16px 14px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:80px;
}

.brand-word{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:var(--title-large);
  color:var(--violet);
  white-space:nowrap;
  text-align:center;
}

.brand-word--left{ justify-self:end; }
.brand-word--right{ justify-self:start; position:relative; }
.brand-word--right::before{ content:"PAIDEIA"; }

.brand-orb-placeholder{
  width:192px;
  height:192px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.head-orb{
  width:100%;
  height:100%;
  background-color:transparent;
  box-shadow:none;
  background-image:url("../img/logo-arkhein@1x.png");
  background-image:-webkit-image-set(
    url("../img/logo-arkhein@1x.png") 1x,
    url("../img/logo-arkhein@2x.png") 2x
  );
  background-image:image-set(
    url("../img/logo-arkhein@1x.png") 1x,
    url("../img/logo-arkhein@2x.png") 2x
  );
  background-repeat:no-repeat;
  background-size:contain;
  background-position:50% 50%;
  filter:drop-shadow(0 10px 26px rgba(14,16,48,.10));
  transform:translateY(-10px);
}

/* ===================== Barre violette sticky — style fourni ===================== */
.head-bar{
  position:relative;
  z-index:6000;
  overflow:visible;

  background:radial-gradient(140% 180% at 50% 30%,
    #C6CAF6 0%,
    #8E94D8 34%,
    #555AA3 66%,
    #2E2C62 100%);
  background-color:#2E2C62;

  box-shadow:
    0 12px 30px rgba(75,84,160,.18),
    0 4px 12px rgba(0,0,0,.12),
    0 0 0 1px rgba(230,231,255,.24);

  will-change:transform;
  transform:translateY(-10px) translateZ(0);
}

.head-bar::before{
  content:"";
  position:absolute;
  inset:8px 12px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:12px;
  pointer-events:none;
  opacity:calc(.78 * (1 - var(--shrink,0)));
  transition:opacity .35s cubic-bezier(.22,.61,.36,1);
}

.head-bar.fixed{
  position:fixed;
  top:10px;
  left:0;
  right:0;
  z-index:7000;
}

.head-bar-inner{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 20px;
  padding-top:calc(20px * (1 - var(--shrink,0) * .8));
  padding-bottom:calc(20px * (1 - var(--shrink,0) * .8));
  min-height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  overflow:visible;
  transition:padding .75s cubic-bezier(.22,.61,.36,1);
}

/* ===================== NAV desktop ===================== */
.main-nav{
  display:flex;
  flex-wrap:nowrap;
  gap:60px;
  justify-content:center;
  align-items:center;

  width:max-content;
  margin-inline:auto;

  font-family:Georgia,"Times New Roman",serif;
  font-size:1.22rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#111;
  white-space:nowrap;
}

.nav-link{
  position:relative;
  padding:12px 0;
  color:inherit;
  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:inherit;

  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.nav-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:var(--nav-underline-bottom);
  width:100%;
  height:1.5px;
  border-radius:999px;
  background:rgba(17,17,17,.82);
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    opacity .22s ease;
  pointer-events:none;
}

.nav-link:hover{
  transform:translateY(var(--nav-hover-raise));
}

.nav-link:hover::after,
.nav-link:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

/* =========================
   Language switch
   ========================= */
.lang-switch{
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  z-index:20;
}

.lang-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:64px;
  padding:8px 12px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(230,232,255,.28);
  color:inherit;
  cursor:pointer;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
}

.lang-flag,
.lang-opt-flag{
  font-size:22px !important;
  line-height:1 !important;
  display:inline-block !important;
}

.head-bar .lang-btn .lang-chevron,
.head-bar .lang-btn svg.lang-chevron{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  display:inline-block !important;
  visibility:visible !important;
  opacity:.85 !important;
  overflow:visible !important;
  flex:0 0 auto !important;

  fill:none !important;
  stroke:currentColor !important;

  transform:translateY(1px);
  transition:transform .18s ease, opacity .18s ease;
}

.lang-switch.is-open .lang-chevron{
  transform:translateY(1px) rotate(180deg);
  opacity:1 !important;
}

.lang-btn:hover{
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(230,232,255,.32);
}
.lang-btn:hover .lang-chevron{ opacity:1 !important; }

.lang-btn:focus-visible{
  outline:2px solid rgba(230,232,255,.85);
  outline-offset:3px;
}

.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  max-width:min(260px, 92vw);

  padding:12px;
  border-radius:16px;

  background:#F2F3FF;
  border:1px solid rgba(46,44,98,.18);
  box-shadow:
    0 18px 46px rgba(14,16,48,.18),
    0 0 0 1px rgba(230,232,255,.70);

  z-index:99999;
  display:grid;
  gap:0;
}

.lang-menu[hidden]{ display:none; }

.lang-opt{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;

  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  text-align:left;

  color:rgba(46,44,98,.92);

  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.045em;
  line-height:1.38;
  text-transform:uppercase;
}

.lang-opt:hover{ background:rgba(46,44,98,.08); }
.lang-opt[aria-selected="true"]{ background:rgba(46,44,98,.12); }

.lang-opt:focus-visible{
  outline:2px solid rgba(46,44,98,.40);
  outline-offset:2px;
}

.lang-name{ letter-spacing:inherit; }

/* =========================
   Mobile header elements
   ========================= */
.mobile-nav-toggle,
.mobile-brand,
.mobile-nav-drawer,
.mobile-nav-overlay{
  display:none;
}

@keyframes paideia-mobile-card-in{
  0%{ opacity:0; transform:translateX(-20px) scale(.988); }
  78%{ opacity:1; transform:translateX(4px) scale(1.003); }
  100%{ opacity:1; transform:translateX(0) scale(1); }
}

.mobile-nav > *{
  opacity:0;
  transform:translateX(-20px) scale(.988);
  transform-origin:left center;
  will-change:transform, opacity;
}

.site-header.is-mobile-nav-open .mobile-nav > *{
  animation:paideia-mobile-card-in .80s cubic-bezier(.22,.78,.30,1) forwards;
}

/* =========================
   Responsive desktop intermédiaire
   ========================= */
@media (max-width:900px){
  .head-top-inner{ column-gap:24px; }
  .brand-word{ font-size:2.2rem; }
  .brand-orb-placeholder{ width:144px; height:144px; }
}

/* =========================
   Mobile / tablette <= 1300px
   ========================= */
@media (max-width:1300px){
  html.mobile-nav-open,
  body.mobile-nav-open{
    overflow:hidden;
  }

  body{ --logo-y:0px; }

  .head-top{ display:none; }

  .head-bar{
    transform:none;
    box-shadow:
      0 12px 34px rgba(46,44,98,.22),
      0 0 0 1px rgba(230,231,255,.18);
  }

  .head-bar::before{ display:none; }

  .head-bar.fixed{
    top:0;
    left:0;
    right:0;
  }

  .head-bar-inner{
    max-width:none;
    display:grid;
    grid-template-columns:64px 1fr 64px;
    align-items:center;
    gap:12px;
    min-height:92px;
    padding:calc(10px + env(safe-area-inset-top)) 16px 12px;
    justify-content:unset;
  }

  .main-nav{ display:none; }

  .mobile-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 0 0 1px rgba(230,232,255,.28);
    cursor:pointer;
    justify-self:start;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-nav-toggle:hover{
    background:rgba(255,255,255,.18);
    box-shadow:inset 0 0 0 1px rgba(230,232,255,.32);
  }

  .mobile-nav-toggle:focus-visible{
    outline:2px solid rgba(230,232,255,.90);
    outline-offset:2px;
  }

  .mobile-nav-toggle__box{
    position:relative;
    width:24px;
    height:18px;
    display:block;
  }

  .mobile-nav-toggle__line{
    position:absolute;
    left:0;
    right:0;
    height:2.5px;
    border-radius:999px;
    background:#F7F7FF;
    transition:
      transform .28s cubic-bezier(.22,.61,.36,1),
      opacity .22s ease,
      top .28s cubic-bezier(.22,.61,.36,1);
  }

  .mobile-nav-toggle__line:nth-child(1){ top:0; }
  .mobile-nav-toggle__line:nth-child(2){ top:7.5px; }
  .mobile-nav-toggle__line:nth-child(3){ top:15px; }

  .site-header.is-mobile-nav-open .mobile-nav-toggle__line:nth-child(1){
    top:7.5px;
    transform:rotate(45deg);
  }

  .site-header.is-mobile-nav-open .mobile-nav-toggle__line:nth-child(2){ opacity:0; }

  .site-header.is-mobile-nav-open .mobile-nav-toggle__line:nth-child(3){
    top:7.5px;
    transform:rotate(-45deg);
  }

  .mobile-brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    justify-self:center;
  }

  .mobile-brand img{
    display:block;
    width:auto;
    height:78px;
    max-width:min(220px, 54vw);
    object-fit:contain;
    filter:drop-shadow(0 8px 18px rgba(14,16,48,.18));
  }

  .lang-switch{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    width:64px;
    justify-self:end;
    margin-left:0;
    z-index:7100;
  }

  .lang-btn{
    width:64px;
    min-width:64px;
    justify-content:center;
    gap:6px;
    padding:9px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 0 0 1px rgba(230,232,255,.28);
  }

  .lang-flag,
  .lang-opt-flag{ font-size:20px !important; }

  .head-bar .lang-btn .lang-chevron,
  .head-bar .lang-btn svg.lang-chevron{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
  }

  .lang-menu{
    top:calc(100% + 10px);
    right:0;
    min-width:186px;
    max-width:min(78vw, 220px);
    padding:10px;
    border-radius:18px;
  }

  .mobile-nav-drawer{
    display:block;
    position:fixed;
    inset:0 auto 0 0;
    width:min(88vw, 360px);
    z-index:6800;

    background:rgba(255,255,255,.01);
    border:0;
    box-shadow:none;

    transform:translateX(-104%);
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }

  .site-header.is-mobile-nav-open .mobile-nav-drawer{
    transform:translateX(0);
    pointer-events:auto;
  }

  .mobile-nav-drawer__inner{
    height:auto;
    min-height:100%;
    overflow:visible;
    padding:
      calc(118px + env(safe-area-inset-top))
      18px
      calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }

  .mobile-nav-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:6700;
    border:0;
    padding:0;
    margin:0;
    background:rgba(255,255,255,.015);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .site-header.is-mobile-nav-open .mobile-nav-overlay{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-nav{
    display:flex;
    flex-direction:column;
    gap:14px;
    pointer-events:auto;
  }

  .mobile-nav__link{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    padding:17px 18px;
    border-radius:18px;
    border:1px solid rgba(230,231,255,.36);
    background:radial-gradient(160% 200% at 50% 40%,
      #BFC3F3 0%, #8E94D8 38%, #595EA8 68%, #2E2C62 100%);
    box-shadow:
      0 8px 18px rgba(14,16,48,.10),
      inset 0 1px 0 rgba(255,255,255,.12);

    color:#111;
    text-decoration:none;
    text-align:left;

    font-family:Georgia,"Times New Roman",serif;
    font-size:1.12rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  .mobile-nav__link:hover{ transform:translateY(-2px); }
  .mobile-nav__link:active{ transform:translateY(1px); }
}

@media (max-width:420px){
  .head-bar-inner{
    grid-template-columns:56px 1fr 56px;
    gap:8px;
    min-height:86px;
    padding-inline:12px;
  }

  .mobile-nav-toggle,
  .lang-switch,
  .lang-btn{
    width:56px;
    min-width:56px;
    height:56px;
  }

  .mobile-brand img{
    height:68px;
    max-width:min(190px, 50vw);
  }
}

@media (prefers-reduced-motion:reduce){
  #bar-spacer,
  .head-bar-inner,
  .head-bar::before,
  .mobile-nav-drawer,
  .mobile-nav-overlay,
  .mobile-nav > *,
  .mobile-nav-toggle__line{
    transition:none!important;
    animation:none!important;
  }

  .site-header.is-mobile-nav-open .mobile-nav > *{
    opacity:1;
    transform:none;
  }
}