/* 02-header.css — Header ARKHEIN + barre menu sticky */

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

#bar-spacer{
  height:0;
  transition:none; /* pas de rollback */
}

/* ===================== Variables (defaults) ===================== */
/* Tu peux tout piloter avec ces variables : */
body{
  /* Déplace TOUT le groupe (textes + rond) */
  --headtop-x: 0px;
  --headtop-y: 0px;

  /* Déplace UNIQUEMENT le rond (le conteneur circulaire) */
  --orb-x: 0px;
  --orb-y: 0px;

  /* Déplace le LOGO dans le rond (programme) */
  --orb-bg-x: 50%;
  --orb-bg-y: 50%;

  /* Déplace le LOGO ARKHEIN (pages sans data-program) */
  --arkhein-bg-x: 50%;
  --arkhein-bg-y: 50%;

  /* Déplace UNIQUEMENT le language switcher */
  --lang-x: 370px;   /* + = vers la droite, - = vers la gauche */
  --lang-y: 0px;   /* + = vers le bas, - = vers le haut */
}

/* ===================== Réglages par page ===================== */
/* Accueil + pages sans data-program (logo ARKHEIN) */
body:not([data-program]){
  --headtop-x: 55px;
  --headtop-y: -7px;
  --orb-x: 0px;
  --orb-y: 0px;

  /* ARKHEIN centré */
  --arkhein-bg-x: 50%;
  --arkhein-bg-y: 50%;
}

/* Programmes */
body[data-program="didaskalia"]{
  --headtop-x: 56px;
  --headtop-y: -6px;
  --orb-x: 0px;
  --orb-y: 0px;

  /* Logo programme centré */
  --orb-bg-x: 50%;
  --orb-bg-y: 50%;
}

body[data-program="paideia"]{
  --headtop-x: 0px;
  --headtop-y: -6px;
  --orb-x: 0px;
  --orb-y: 0px;

  /* Logo programme centré */
  --orb-bg-x: 50%;
  --orb-bg-y: 50%;
}

body[data-program="katalima"]{
  --headtop-x: 0px;
  --headtop-y: -6px;
  --orb-x: 0px;
  --orb-y: 0px;

  /* Logo programme centré */
  --orb-bg-x: 50%;
  --orb-bg-y: 50%;
}

body[data-program="anaggello"]{
  --headtop-x: 31px;
  --headtop-y: -6px;
  --orb-x: 0px;
  --orb-y: 0px;

  /* Logo programme centré */
  --orb-bg-x: 50%;
  --orb-bg-y: 50%;
}

/* ===================== Bande blanche ARKHEIN / PROGRAMME ===================== */

.head-top{ background:#fff; }

/* GRID => le rond reste mathématiquement centré */
.head-top-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 16px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:80px;

  /* Déplacement global (textes + rond) */
  transform:translate(var(--headtop-x), var(--headtop-y));
}

.brand-word{
  font-family:'Bodoni Moda',serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:var(--title-large);
  color:var(--violet);
  white-space:nowrap;
  text-align:center;
}

/* Les mots "s'accrochent" au rond */
.brand-word--left{  justify-self:end; }
.brand-word--right{ justify-self:start; position:relative; }

/* Texte par défaut à droite */
.brand-word--right::before{
  content:"FOUNDATION";
  font:inherit;
  color:inherit;
}

/* Remplacements programme */
body[data-program="didaskalia"] .brand-word--right::before{ content:"DIDASKALIA"; }
body[data-program="paideia"]    .brand-word--right::before{ content:"PAIDEIA"; }
body[data-program="katalima"]   .brand-word--right::before{ content:"KATALIMA"; }
body[data-program="anaggello"]  .brand-word--right::before{ content:"ANAGGELLO"; }

/* Le ROND = ce bloc */
.brand-orb-placeholder{
  width:192px;
  height:192px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* Déplacement local du rond */
  transform:translate(var(--orb-x), var(--orb-y));
}

/* Orb par défaut : logo ARKHEIN (1x/2x auto) */
.head-orb{
  width:100%;
  height:100%;

  /* fallback */
  background-image:url("../img/logo-arkhein@1x.png");
  /* Safari/WebKit */
  background-image:-webkit-image-set(
    url("../img/logo-arkhein@1x.png") 1x,
    url("../img/logo-arkhein@2x.png") 2x
  );
  /* Standard */
  background-image:image-set(
    url("../img/logo-arkhein@1x.png") 1x,
    url("../img/logo-arkhein@2x.png") 2x
  );

  background-repeat:no-repeat;

  /* Avec tes PNG carrés rognés, cover remplit proprement */
  background-size:cover;
  background-position:var(--arkhein-bg-x) var(--arkhein-bg-y);
}

/* Programme : cercle blanc + logo */
body[data-program] .head-orb{
  border-radius:50%;
  background-color:#fff;
  background-repeat:no-repeat;

  /* on garde ton rendu "logo dans cercle" */
  background-size:88% auto;
  background-position:var(--orb-bg-x) var(--orb-bg-y);

  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 16px 30px rgba(158,168,255,.75);
}

/* Logos spécifiques */
body[data-program="didaskalia"] .head-orb{
  background-image:url("../img/didaskalia-logo.png");
  background-size:110% auto;
}
body[data-program="paideia"] .head-orb{
  background-image:url("../img/paideia-logo.png");
  background-size:80% auto;
}
body[data-program="katalima"] .head-orb{
  background-image:url("../img/katalima-logo.png");
  background-size:94% auto;
}
body[data-program="anaggello"] .head-orb{
  background-image:url("../img/anaggello-logo.png");
}

/* ===================== Barre violette sticky ===================== */

.head-bar{
  position:relative;
  background:radial-gradient(160% 200% at 50% 40%,
    #BFC3F3 0%, #8E94D8 38%, #595EA8 68%, #2E2C62 100%);
  background-color:#2E2C62;
  border-radius:0;
  box-shadow:
    0 0 0 1px rgba(230,231,255,.36),
    0 16px 40px rgba(198,201,255,.55),
    0 4px 10px rgba(0,0,0,.14),
    0 0 0 3px rgba(198,201,255,1),
    0 26px 60px rgba(158,168,255,.78),
    0 10px 22px rgba(0,0,0,.24)!important;

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

.head-bar::before{
  content:"";
  position:absolute;
  inset:8px 12px;
  border:1px solid rgba(230,231,255,.9);
  border-radius:12px;
  pointer-events:none;
  opacity:calc(.95 * (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:1000;
}

/* IMPORTANT: on garde FLEX centré pour ne PAS bouger les titres */
.head-bar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  padding-top:calc(20px * (1 - var(--shrink,0) * 0.8));
  padding-bottom:calc(20px * (1 - var(--shrink,0) * 0.8));
  min-height:60px;

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

  position:relative; /* ancre le lang switcher en absolute */
  transition:padding .75s cubic-bezier(.22,.61,.36,1);
}

.main-nav{
  display:flex;
  flex-wrap:nowrap;
  gap:60px;
  justify-content:center;
  align-items:center;
  font-family:'Bodoni Moda',serif;
  font-size:1.2rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#111;
  white-space:nowrap;
}

.main-nav a{
  position:relative;
  padding:12px 0;
  color:inherit;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.1;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#f9e7ff,#c5d1ff);
  transition:width .28s cubic-bezier(.22,.61,.36,1);
}

.main-nav a:hover{ transform:translateY(-3px); }
.main-nav a:hover::after{ width:100%; }

/* =========================
   Language switch (UI only)
   ========================= */

/* => Sorti du flux: n'affecte PLUS la nav */
.lang-switch{
  position:absolute;
  right:32px;            /* base = padding du container */
  top:50%;
  transform:translateY(-50%) translate(var(--lang-x), var(--lang-y));
  display:inline-flex;
  align-items:center;
  z-index:5;
}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  line-height:1;
}

/* Taille drapeaux (force) */
.lang-flag,
.lang-opt-flag{
  font-size:22px !important;
  line-height:1 !important;
  display:inline-block !important;
}

/* Chevron (force ULTRA spécifique) */
.head-bar .main-nav .lang-btn .lang-chevron,
.head-bar .main-nav .lang-btn svg.lang-chevron,
.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;
}

/* Hover du bouton (différent des liens) */
.lang-btn:hover{
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(230,232,255,.28);
}
.lang-btn:hover .lang-chevron{ opacity:1 !important; }

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

/* Menu déroulant */
.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:200px;
  padding:8px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 14px 34px rgba(14,16,48,.18),
    0 0 0 1px rgba(46,44,98,.18);
  z-index:9999;
}

.lang-opt{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  text-align:left;
  color:#0E1030;
}

.lang-opt:hover{
  background:rgba(46,44,98,.10);
}

.lang-opt[aria-selected="true"]{
  background:rgba(46,44,98,.14);
  font-weight:700;
}

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

.lang-name{
  letter-spacing:.06em;
}

/* ===================== Responsive ===================== */

@media (max-width:900px){
  .head-top-inner{
    padding:20px 16px;
    column-gap:24px;
  }

  .brand-word{ font-size:2.2rem; }

  .brand-orb-placeholder{
    width:144px;
    height:144px;
  }

  .head-bar-inner{ padding-inline:20px; }

  .main-nav{
    flex-wrap:wrap;
    gap:18px;
    font-size:1rem;
    letter-spacing:.06em;
  }

  /* Sur petit écran, on évite qu'il chevauche la nav */
  .lang-switch{
    position:static;
    transform:translate(var(--lang-x), var(--lang-y));
    margin-top:10px;
  }
}

@media (max-width:640px){
  .head-top-inner{
    grid-template-columns:1fr;
    row-gap:8px;
    column-gap:0;
    padding:16px;
    transform:none; /* évite les surprises sur mobile */
  }

  .brand-word{ font-size:1.8rem; }

  .brand-word--left,
  .brand-word--right{ justify-self:center; }

  .brand-orb-placeholder{
    width:110px;
    height:110px;
    transform:none;
  }

  .main-nav{
    gap:12px;
    font-size:.85rem;
  }
}

@media (prefers-reduced-motion:reduce){
  #bar-spacer,
  .head-bar-inner,
  .head-bar::before{
    transition:none!important;
  }
}