/* ============================================================================
   caliceto-app.css
   ----------------------------------------------------------------------------
   Integration Blazor — chrome applicatif absent du livrable design :
   lien d'evitement, coque a pied collant, navigation mobile, bascule de theme.
   Charge APRES caliceto-tokens.css et caliceto.css.
   ========================================================================== */

/* ── Lien d'evitement ─────────────────────────────────────────────────────── */
.cal-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--cal-accent);
  color: var(--cal-accent-ink);
  font-family: var(--cal-font-mono);
  font-size: var(--cal-size-sm);
  border-radius: var(--cal-radius);
  text-decoration: none;
}
.cal-skip:focus { left: 8px; top: 8px; }

/* ── Coque — pied de page colle en bas ────────────────────────────────────── */
.cal-shell { display: flex; flex-direction: column; min-height: 100vh; }
.cal-main { flex: 1 0 auto; }

/* ── Logo inline (suit le theme via --cal-brand-*) ────────────────────────── */
.cal-logo { display: block; width: auto; }

/* ── Hero — ligne eyebrow + statut, carte fiche technique ─────────────────── */
.cal-hero__top {
  display: flex;
  gap: var(--cal-s-4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--cal-s-6);
}
.cal-hero__info-title {
  margin: 0;
  font-size: 11px;
  letter-spacing: var(--cal-track-eyebrow);
  text-transform: uppercase;
  color: var(--cal-ink-soft);
}

/* ── Navigation — etat actif (NavLink ajoute .active) ─────────────────────── */
.cal-nav__link.active { color: var(--cal-ink); }
.cal-nav__link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cal-accent);
}
.cal-nav__actions { display: flex; align-items: center; gap: var(--cal-s-3); }
.cal-nav__menu { display: contents; }

/* Sous-menu — revele au survol / focus, sans JavaScript */
.cal-nav__item { position: relative; }
.cal-nav__item > .cal-nav__dropdown { display: none; }
.cal-nav__item:hover > .cal-nav__dropdown,
.cal-nav__item:focus-within > .cal-nav__dropdown { display: grid; }
.cal-nav__caret { margin-left: 4px; font-size: 9px; opacity: .6; }
.cal-nav__dd-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  color: var(--cal-ink);
  font-size: var(--cal-size-sm);
  text-decoration: none;
  border-radius: var(--cal-radius-sm);
  transition: background var(--cal-dur-1) var(--cal-ease);
}
.cal-nav__dd-link:hover { background: var(--cal-bg-deep); }

/* Selecteur de langue — paire FR / EN (lien + langue courante) */
.cal-nav__lang a,
.cal-nav__lang [aria-current="true"] {
  padding: 4px 6px;
  border-radius: var(--cal-radius-sm);
  text-decoration: none;
}
.cal-nav__lang a { color: var(--cal-ink-muted); }
.cal-nav__lang a:hover { color: var(--cal-ink); }
.cal-nav__lang [aria-current="true"] { color: var(--cal-ink); opacity: 1; }
.cal-nav__lang-sep { opacity: .35; }

/* Bascule de theme — icone selon [data-theme] */
.cal-theme-sun  { display: none; }
.cal-theme-moon { display: block; }
[data-theme="dark"] .cal-theme-sun  { display: block; }
[data-theme="dark"] .cal-theme-moon { display: none; }

/* ── Navigation mobile — menu via case a cocher (pas de JavaScript) ───────── */
.cal-nav__toggle { position: absolute; opacity: 0; pointer-events: none; }
.cal-nav__burger { display: none; }

@media (max-width: 759px) {
  .cal-nav__burger {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: var(--cal-rule);
    border-radius: var(--cal-radius);
    background: transparent;
    color: var(--cal-ink-muted);
    cursor: pointer;
  }
  .cal-nav__menu { display: block; }
  .cal-nav__toggle:checked ~ .cal-nav__menu .cal-nav__links { display: flex; }
  .cal-nav__links {
    position: absolute;
    left: 0; right: 0; top: var(--cal-header-h);
    flex-direction: column;
    align-items: stretch;
    gap: var(--cal-s-1);
    margin: 0;
    padding: var(--cal-s-4);
    background: var(--cal-surface);
    border-bottom: var(--cal-rule);
    box-shadow: var(--cal-shadow-md);
  }
  .cal-nav__link { padding: 8px 0; }
  .cal-nav__item > .cal-nav__dropdown {
    display: grid;
    position: static;
    min-width: 0;
    margin-top: 2px;
    padding: 0 0 0 var(--cal-s-4);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

/* ── Titre de page en h1 dans un en-tete de section ───────────────────────── */
.cal-section__head h1 {
  font-family: var(--cal-font-serif);
  font-size: clamp(var(--cal-size-xl), 3vw + 0.5rem, var(--cal-size-3xl));
  font-weight: var(--cal-w-medium);
  line-height: var(--cal-lh-snug);
  letter-spacing: var(--cal-track-tight);
  margin: 0;
  text-wrap: balance;
}

/* ── Formulaire — piege a robots + messages de validation ─────────────────── */
.cal-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.validation-message {
  display: block;
  margin-top: 6px;
  font-family: var(--cal-font-mono);
  font-size: var(--cal-size-xs);
  color: var(--cal-danger);
}

/* ── Alerte — variante erreur ─────────────────────────────────────────────── */
.cal-alert--err {
  background: color-mix(in oklab, var(--cal-danger) 9%, var(--cal-surface));
  border-color: color-mix(in oklab, var(--cal-danger) 30%, transparent);
  border-left-color: var(--cal-danger);
}
.cal-alert--err .cal-alert__mark { color: var(--cal-danger); }

/* ── Etude de cas — navigation inter-projets en pied de page ──────────────── */
.cal-case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cal-s-3);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--cal-s-8);
  padding-top: var(--cal-s-5);
  border-top: var(--cal-rule);
}

/* ── Bande CTA contact — fin de page (composant ContactCta) ───────────────── */
.cal-cta-band {
  border-top: var(--cal-rule-soft);
  background: var(--cal-surface);
  padding-block: var(--cal-s-8);
}
.cal-cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cal-s-5);
}
.cal-cta-band__title {
  font-family: var(--cal-font-serif);
  font-size: clamp(1.5rem, 2vw + .5rem, var(--cal-size-2xl));
  margin: var(--cal-s-2) 0 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* ── Email direct — page Contact et footer ────────────────────────────────── */
.cal-contact-direct {
  margin: 0 0 var(--cal-s-6);
  color: var(--cal-ink-muted);
  font-size: var(--cal-size-sm);
}
.cal-contact-direct a,
.cal-footer__email a {
  color: var(--cal-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--cal-accent) 40%, transparent);
}
.cal-contact-direct a:hover,
.cal-footer__email a:hover { color: var(--cal-ink); }
.cal-footer__email {
  margin: var(--cal-s-4) 0 0;
  font-family: var(--cal-font-mono);
  font-size: var(--cal-size-sm);
}

/* ── Cibles tactiles agrandies sur mobile (langue / theme) ────────────────── */
@media (max-width: 759px) {
  .cal-nav__lang a,
  .cal-nav__lang [aria-current="true"] { padding: 8px 10px; }
  .cal-nav__theme { width: 40px; height: 40px; }
}