/*
 * FIXED HEADER + LOGO FOUNDATION
 * This file owns geometry contracts only. Visual refinement comes later.
 */

[data-site-header],
[data-site-logo] {
  box-sizing: border-box;
}

/* Stable diagnostic/state hooks written by JavaScript. */
[data-site-header][data-foundation-fixed="true"],
[data-site-logo][data-foundation-fixed="true"] {
  --home-component-fixed: 1;
}

/* V60 — petite étincelle dorée orbitale, synchronisée avec le néon du Hero. */
.site-header .center-logo-frame {
  position:relative;
  overflow:visible;
}
.site-header .center-logo-frame::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  opacity:0;
  background:#fff8c8;
  box-shadow:0 0 3px #fff,0 0 7px #ffd34e,0 0 12px rgba(255,179,0,.9);
  animation:header-logo-gold-spark 10.75s linear infinite;
}
@keyframes header-logo-gold-spark {
  0%       { opacity:1; transform:rotate(90deg) translateX(calc(var(--fixed-logo-size, 150px) * .50)) scale(1); }
  3.49%    { opacity:.9; transform:rotate(270deg) translateX(calc(var(--fixed-logo-size, 150px) * .50)) scale(.8); }
  6.98%    { opacity:1; transform:rotate(450deg) translateX(calc(var(--fixed-logo-size, 150px) * .50)) scale(1); }
  6.99%,100% { opacity:0; transform:rotate(450deg) translateX(calc(var(--fixed-logo-size, 150px) * .50)) scale(.4); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .center-logo-frame::after { animation:none; }
}

/* V79.1 — conditions météo à droite, intégrées dans la barre. */
:root { --header-height: 105px; }
.site-header .header-right {
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.5vw,22px);
}
.header-conditions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.3vw,20px);
  white-space:nowrap;
}
.header-metric{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.84);
}
.header-metric svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
  fill:none;
  stroke:#e5c46f;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(229,196,111,.25));
}
.header-metric--temperature:has(.header-temperature[hidden]){display:none}
.header-temperature {
  position:static !important;
  transform:none !important;
  flex: 0 0 auto;
  margin:0;
  color: rgba(255,255,255,.82);
  font-size:18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.header-time {
  position:static;
  flex:0 0 auto;
  margin-left:0;
  margin-right:0;
  color:rgba(255,255,255,.82);
  font-size:18px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* V76 — logo légèrement agrandi sur tous les formats. */
:root { --fixed-logo-size:148px; }
@media (max-width:980px) { :root { --fixed-logo-size:130px; } }
@media (max-width:760px) { :root { --fixed-logo-size:110px; } }
@media (max-width:430px) { :root { --fixed-logo-size:100px; } }
@media (max-width: 680px) {
  :root { --header-height: 108px; }
  .site-header .header-right {
    flex-direction:column;
    top:calc(var(--fixed-header-height) / 2) !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) !important;
    gap:4px;
  }
  .header-conditions{gap:14px}
  .header-metric{gap:4px}
  .header-metric svg{width:12px;height:12px;flex-basis:12px}
  .header-temperature {
    font-size:12px;
  }
  .header-time { font-size:12px; }
}

/* La température reste à gauche et l'heure à droite sur tous les écrans. */
.site-header .header-metric--temperature { order:1; }
.site-header .header-metric--time { order:2; }
@media (max-width: 370px) {
  .site-header .header-right { gap: 5px; }
  .header-conditions{gap:10px}
  .header-temperature,
  .header-time { font-size:11px; }
}

/* V79 — desktop: conditions first, social networks at the far right. */
@media (min-width:681px) {
  .site-header .header-conditions { order:1; }
  .site-header .social-links { order:2; }
}