/* ==========================================================================
   Accueil — le hibou et ses onglets
   Les quatre savoir-faire sont posés en onglets en haut de page. Au survol
   (ou au focus, ou au toucher), un filet descend depuis l’onglet et déploie
   une fiche qui présente le service, et le hibou s’efface. À la première
   visite, le hibou « se met en marche » ; hors des heures d’ouverture, son
   bouton marche respire comme un voyant de veille.
   ========================================================================== */

.page-home {
  --tabs-h: 96px;
  --drop: clamp(44px, 8vh, 96px);
  overflow: hidden;
}

.obs {
  position: relative;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--chrome-h) + var(--tabs-h)) var(--gutter) 88px;
}

/* ---------- le hibou ---------- */

.obs__owl {
  --h: min(58dvh, 660px);
  height: var(--h);
  aspect-ratio: 1024 / 1536;
  view-transition-name: hibou;
  transition: opacity 700ms var(--ease);
  animation: hb-fade 900ms var(--ease) 60ms backwards;
}
.obs__owl svg { width: 100%; height: 100%; }

/* Le hibou s’efface derrière la fiche d’un onglet ouvert. */
.obs:has(.tab:is(.is-active, :focus-within)) .obs__owl { opacity: 0.14; }
@media (hover: hover) and (pointer: fine) {
  .obs:has(.tab:hover) .obs__owl { opacity: 0.14; }
}

/* ---------- mise en marche & veille (home.js) ---------- */

.hb-eteint { fill: color-mix(in oklab, var(--accent) 20%, var(--paper)); }
.hb-allume { fill: var(--accent); }
.hb-front,
.hb-reflet {
  fill: color-mix(in oklab, var(--accent) 40%, #fff4dc);
  opacity: 0;
  pointer-events: none;
}

/* Avant que le script ne prenne la main, le hibou reste éteint.
   Filet de sécurité : si le script ne s’exécute pas, il s’allume seul après quelques secondes. */
.hb-boot .hb-allume { animation: hb-fade 900ms ease 3.5s backwards; }

/* Veille : hors des heures d’ouverture, le bouton marche respire lentement. */
@keyframes hb-veille {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}
.hb-bouton.is-veille { animation: hb-veille 4800ms ease-in-out infinite; }

/* ---------- onglets ---------- */

.tabs {
  position: absolute;
  top: var(--chrome-h);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 var(--gutter);
  animation: hb-rise 1000ms var(--ease) 260ms backwards;
}

.tabs ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--rule);
  border-bottom: var(--rule);
}

/* --on : 0 au repos, 1 quand l’onglet est ouvert. Toutes les transitions en découlent. */
.tab { --on: 0; position: relative; }
.tab + .tab { border-left: var(--rule); }
.tab:is(.is-active, :focus-within) { --on: 1; }

@media (hover: hover) and (pointer: fine) {
  .tab:hover { --on: 1; }
  .tabs:hover .tab:focus-within:not(:hover) { --on: 0; }
}

.tab__link {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 18px 22px 20px;
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) calc(var(--on) * 5%), transparent);
  transition: background-color 400ms ease;
}
.tab__link:hover { color: var(--ink); }
.tab__link:focus-visible { outline-offset: -5px; }

/* Soulignement d’accent : le filet part de là. */
.tab__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(var(--on));
  transform-origin: left center;
  transition: transform 500ms var(--ease);
}
.tab[data-align="droite"] .tab__link::after { transform-origin: right center; }

.tab__num { color: var(--accent); }
.tab__nom {
  font-family: var(--fh);
  font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3125rem);
  line-height: 1.25;
}

/* ---------- filet + fiche ---------- */

.tab__drop {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-top: var(--drop);
  visibility: hidden;
  transition: visibility 0s linear 450ms;
}
.tab[data-align="droite"] .tab__drop { justify-content: flex-end; }

.tab:is(.is-active, :focus-within) .tab__drop { visibility: visible; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .tab:hover .tab__drop { visibility: visible; transition-delay: 0s; }
}

.tab__line {
  position: absolute;
  top: 0;
  left: 22px;
  width: 1px;
  height: var(--drop);
  background: var(--accent);
  transform: scaleY(var(--on));
  transform-origin: top center;
  transition: transform 600ms var(--ease) calc(var(--on) * 180ms);
}
.tab[data-align="droite"] .tab__line { left: auto; right: 22px; }
.tab__line::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: var(--on);
  transition: opacity 300ms ease calc(var(--on) * 640ms);
}

.tab__info {
  flex: none;
  width: min(410px, 42vw);
  display: grid;
  gap: 14px;
  padding: 22px 22px 0;
}
.tab[data-align="droite"] .tab__info { text-align: right; }

.tab__info > * {
  opacity: var(--on);
  translate: 0 calc((1 - var(--on)) * 10px);
  transition: opacity 500ms var(--ease), translate 700ms var(--ease);
  transition-delay: calc(var(--on) * (540ms + var(--i, 0) * 70ms));
}
.tab__info > :nth-child(2) { --i: 1; }
.tab__info > :nth-child(3) { --i: 2; }
.tab__info > :nth-child(4) { --i: 3; }

.tab__titre {
  font-family: var(--fh);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1.15;
  letter-spacing: var(--ls-titre);
  text-wrap: balance;
}
.tab__desc { color: var(--muted); line-height: 1.8; }

.tab__precis { border-top: var(--rule); }
.tab__precis div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: var(--rule);
}
.tab[data-align="droite"] .tab__precis div { grid-template-columns: minmax(0, 1fr) 7.5rem; }
.tab[data-align="droite"] .tab__precis dt { order: 2; }
.tab__precis dt { color: var(--faint); }
.tab__precis dd { font-size: 0.875rem; line-height: 1.55; color: var(--ink); }

.tab__cta { justify-self: start; color: var(--accent); }
.tab[data-align="droite"] .tab__cta { justify-self: end; }

/* ---------- repères du bas ---------- */

.obs__foot {
  position: fixed;
  inset: auto 0 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding: 0 var(--gutter) clamp(20px, 3.4vh, 36px);
  color: var(--faint);
  pointer-events: none;
  animation: hb-fade 1200ms var(--ease) 900ms both;
}
.obs__foot > * { pointer-events: auto; }

.obs__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.obs__links a { color: var(--accent-2); }
.obs__links a:hover { color: var(--accent); }

.obs__hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: opacity 900ms var(--ease);
}
.obs__hint::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.obs.is-discovered ~ .obs__foot .obs__hint { opacity: 0; }
.obs__hint .touch { display: none; }

.obs__coords { justify-self: end; text-align: right; }

.home-id { display: grid; gap: 2px; }
.home-id__name { font-family: var(--fh); font-size: 1.25rem; line-height: 1.2; color: var(--ink); letter-spacing: 0.01em; }
.home-id .meta { color: var(--faint); }

@media (hover: none) {
  .obs__hint .pointer { display: none; }
  .obs__hint .touch { display: inline; }
}

/* ---------- mobile : onglets serrés, fiche pleine largeur ---------- */

@media (max-width: 760px) {
  .page-home { --tabs-h: 84px; --drop: 26px; }

  .home-id .meta { display: none; }

  .tabs { padding: 0 12px; }
  .tab { position: static; }
  .tab__link { padding: 12px 8px 14px; gap: 4px; }
  .tab__nom { font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0; }

  .tab__drop,
  .tab[data-align="droite"] .tab__drop { justify-content: flex-start; }
  .tab__line,
  .tab[data-align="droite"] .tab__line { left: calc((var(--col) + 0.5) * 25%); right: auto; }

  .tab__info,
  .tab[data-align="droite"] .tab__info { width: 100%; gap: 10px; padding: 16px 8px 0; text-align: left; }
  .tab[data-align="droite"] .tab__precis div { grid-template-columns: 7rem minmax(0, 1fr); }
  .tab[data-align="droite"] .tab__precis dt { order: 0; }
  .tab[data-align="droite"] .tab__cta { justify-self: start; }
  .tab__titre { font-size: 1.375rem; }
  .tab__desc { font-size: 0.875rem; line-height: 1.7; }
  .tab__precis div { grid-template-columns: 7rem minmax(0, 1fr); padding: 7px 0; }

  .obs { place-items: end center; padding-bottom: 120px; }
  .obs__owl { --h: min(40dvh, 110vw); }

  .obs__foot { grid-template-columns: 1fr auto; }
  .obs__hint { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .obs__coords { display: none; }
}