/* ==================================================================
   Layout public : header, footer, hero, sections d'accueil.
   Version phase B (socle). Enrichi en phase C.
   ================================================================== */

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--brand-ink); color: #fff;
  padding: 0.6rem 1rem; border-radius: var(--r-md);
  z-index: var(--z-toast);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* --- Header --- */
/* L'en-tete est opaque des le chargement : avec un fond translucide, les
   liens en clair sur un hero sombre devenaient illisibles tant qu'on
   n'avait pas scrolle. Pas de backdrop-filter non plus — repeindre un
   flou a chaque frame rendait le defilement saccade.

   Trois paliers :
     > 1024px   navigation horizontale complete
     768-1024   navigation horizontale condensee (les tablettes ont la place)
     < 768px    panneau lateral au glisser
*/
.site-header {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-base) var(--ease-out);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  height: 76px;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  color: var(--text); letter-spacing: -0.02em;
  min-width: 0;
}
.brand__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-ember), var(--brand-magenta));
  color: #fff; font-weight: 800;
  flex: none;
}
.brand__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand strong { font-weight: 600; }
.brand span { color: var(--accent); }

.primary-nav { display: flex; align-items: center; gap: var(--sp-2); }
.primary-nav__links { display: contents; }
.primary-nav__head, .primary-nav__foot { display: none; }

.primary-nav a {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.primary-nav a:hover { color: var(--text); background: var(--surface-2); }

.primary-nav a[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 600;
}
.primary-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--accent);
}

.nav-toggle { display: none; }
.nav-toggle__bars { display: grid; gap: 5px; width: 20px; }
.nav-toggle__bars span {
  display: block; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim { display: none; }

/* ===== Tablette (768 - 1024) : menu horizontal condense ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-header__inner { gap: var(--sp-4); height: 68px; }
  .brand { font-size: var(--fs-base); gap: var(--sp-2); }
  .brand__mark { width: 34px; height: 34px; border-radius: 10px; font-size: var(--fs-sm); }
  .primary-nav { gap: 2px; }
  .primary-nav a { padding: var(--sp-2); font-size: var(--fs-xs); }
  .primary-nav a[aria-current="page"]::after { left: var(--sp-2); right: var(--sp-2); }
}

/* ===== Mobile (moins de 768px) : panneau lateral ===== */
@media (max-width: 767px) {
  .site-header__inner { gap: var(--sp-3); height: 64px; }
  .brand { font-size: var(--fs-base); }
  .brand__mark { width: 36px; height: 36px; border-radius: 10px; }

  .nav-toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text); cursor: pointer; flex: none;
  }

  .primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 0;
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base) step-end;
    /* Le panneau vit dans le contexte d empilement de .site-header : inutile
       de viser plus haut que lui, c est le scrim qui doit passer dessous. */
    z-index: 1;
  }
  .primary-nav[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s;
  }

  .primary-nav__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
    border-bottom: 1px solid var(--border);
  }
  .primary-nav__close {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); cursor: pointer;
  }
  .primary-nav__close:hover { background: var(--surface-2); }

  .primary-nav__links {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-4);
  }

  .primary-nav a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-base); font-weight: 500;
    border: 1px solid transparent;
    white-space: normal;
  }
  .primary-nav a::after {
    content: ""; position: static;
    width: 7px; height: 7px; margin-left: var(--sp-3);
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.35; border-radius: 0; background: none; flex: none;
    height: 7px;
  }
  .primary-nav a[aria-current="page"] {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  /* La regle de soulignement du bureau a une specificite superieure et
     survivrait a la media query : on la neutralise explicitement ici. */
  .primary-nav a[aria-current="page"]::after {
    position: static;
    width: 7px; height: 7px;
    left: auto; right: auto; bottom: auto;
    margin-left: var(--sp-3);
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    border-radius: 0; background: none;
    transform: rotate(-45deg);
    opacity: 0.8;
  }

  .primary-nav[data-open="true"] .primary-nav__links a {
    animation: navItemIn var(--dur-base) var(--ease-out) backwards;
    animation-delay: calc(60ms + var(--i, 0) * 40ms);
  }

  .primary-nav__foot {
    display: block; margin-top: auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
  }
  .primary-nav__foot .btn { width: 100%; justify-content: center; padding-block: 0.85rem; }
  .primary-nav__foot p {
    margin-top: var(--sp-3); text-align: center;
    font-size: var(--fs-xs); color: var(--text-subtle);
  }

  .nav-scrim {
    display: block; position: fixed; inset: 0;
    /* Sous le header, sinon le voile recouvre le panneau et intercepte
       les clics : le menu semblait ne pas repondre. */
    z-index: calc(var(--z-header) - 1);
    background: color-mix(in srgb, var(--brand-ink) 55%, transparent);
    opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  }
  .nav-scrim[hidden] { display: none; }
  .nav-scrim.is-visible { opacity: 1; }
}

/* Sous 380px, la marque se reduit au monogramme dans la barre. */
@media (max-width: 380px) {
  .site-header__inner > .brand .brand__text { display: none; }
}

@keyframes navItemIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-nav[data-open="true"] .primary-nav__links a { animation: none; }
}

/* --- Footer --- */
.site-footer {
  margin-top: var(--sp-16);
  padding-block: var(--sp-10) var(--sp-6);
  background: var(--brand-ink);
  color: var(--brand-cream);
}
.site-footer a { color: color-mix(in srgb, var(--brand-cream) 75%, transparent); }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-6);
}
.site-footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--brand-cream) 55%, transparent);
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Hero (socle) --- */
.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 55% at 15% 20%, color-mix(in srgb, var(--brand-plum) 55%, transparent), transparent),
    radial-gradient(50% 60% at 85% 15%, color-mix(in srgb, var(--brand-magenta) 45%, transparent), transparent),
    radial-gradient(70% 70% at 60% 100%, color-mix(in srgb, var(--brand-ember) 40%, transparent), transparent),
    var(--brand-ink);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06; mix-blend-mode: overlay;
}
.hero__content { color: var(--brand-cream); padding-block: var(--sp-12); }
.hero h1 { max-width: 16ch; margin-block: var(--sp-4) var(--sp-5); }
.hero p { max-width: 52ch; font-size: var(--fs-md); color: color-mix(in srgb, var(--brand-cream) 82%, transparent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

/* --- Reveal au scroll ------------------------------------------------
   Regle d'or : le contenu est VISIBLE par defaut. Il n'est masque que si
   le script d'amorcage a pose html.js-anim, c'est-a-dire uniquement quand
   le moteur d'animation est reellement en place. Une panne de CDN, une
   erreur JS ou un navigateur sans JS laissent donc la page parfaitement
   lisible au lieu d'afficher des sections vides.
   -------------------------------------------------------------------- */
.reveal { opacity: 1; }

html.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
html.js-anim .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Toasts --- */
.toast-stack {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  display: grid; gap: var(--sp-3);
  z-index: var(--z-toast);
  width: min(360px, calc(100vw - 2.5rem));
}
.toast {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast--success { border-left: 3px solid var(--success); }
.toast--error   { border-left: 3px solid var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }

/* --- Status page --- */
.status-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.status-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.status-row__detail { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot--ok { background: var(--success); }
.dot--ko { background: var(--danger); }