/* Ressources locales et habillage de la plateforme : les pages publiques
   (.identite-publique) et, avec .theme-sombre, toutes les pages connectées. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/brand/SpaceGrotesk-Variable-341a648a.woff2") format("woff2");
}

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/brand/Satoshi-Variable-0513381f.woff2") format("woff2");
}

.identite-jfb {
  background: var(--interface-fond);
  color: var(--interface-encre);
  font-family: "Satoshi", "Open Sans", system-ui, sans-serif;
  line-height: 1.6;
  --interface-fond: var(--color-brand-paper);
  --interface-encre: var(--color-brand-ink);
  --interface-surface: var(--color-brand-paper);
  --interface-secondaire: var(--color-brand-charcoal);
  --interface-bordure: color-mix(in srgb, var(--color-brand-ink) 22%, var(--color-brand-paper));
  --interface-reflet: color-mix(in srgb, var(--color-brand-ink) 4%, var(--color-brand-paper));
}

.theme-sombre {
  --interface-fond: var(--color-brand-ink);
  --interface-encre: var(--color-brand-paper);
  --interface-surface: var(--color-brand-charcoal);
  --interface-secondaire: color-mix(in srgb, var(--color-brand-paper) 80%, var(--color-brand-ink));
  --interface-bordure: color-mix(in srgb, var(--color-brand-paper) 30%, var(--color-brand-ink));
  --interface-reflet: color-mix(in srgb, var(--color-brand-paper) 10%, var(--color-brand-ink));
}

.identite-jfb .interface-logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  min-width: 44px;
}

.identite-jfb .interface-monogramme {
  width: 36px;
  height: 34px;
}

.identite-jfb .interface-mot-symbole {
  width: 160px;
  height: auto;
}

@media (max-width: 40rem) {
  .identite-jfb .interface-mot-symbole {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
  }
}

.identite-jfb :is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.identite-jfb h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.identite-jfb :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--interface-encre);
  outline-offset: 4px;
}

.identite-jfb .interface-accueil-public:focus-visible {
  outline-color: var(--color-brand-paper);
}

.identite-publique :is(input[type="submit"], button[type="submit"]) {
  min-height: 44px;
  border: 1px solid var(--color-brand-ink);
  border-radius: 4px;
  background: var(--color-brand-ink);
  color: var(--color-brand-paper);
}

.identite-publique :is(input[type="submit"], button[type="submit"]):hover {
  background: var(--color-brand-charcoal);
}

.identite-publique a.text-teal-800 {
  color: var(--color-brand-ink);
}

.identite-jfb > a[href="#contenu"]:focus {
  border-color: var(--color-brand-ink);
  background: var(--color-brand-paper);
  color: var(--color-brand-ink);
}

.identite-jfb .interface-depliant {
  border: 1px solid var(--interface-bordure);
  border-radius: 8px;
  background: var(--interface-surface);
}

.identite-jfb .interface-depliant summary {
  border-radius: 8px;
  color: var(--interface-encre);
  padding-block: 1.125rem;
}

.identite-jfb .interface-depliant summary::marker {
  color: var(--interface-encre);
}

.identite-jfb .interface-depliant summary:hover {
  background: var(--interface-reflet);
}

.identite-jfb .interface-bouton-principal {
  min-height: 44px;
  max-width: 100%;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--color-brand-ink);
  border-radius: 4px;
  font-weight: 700;
  line-height: 1.4;
}

.identite-jfb .interface-bouton-principal {
  background: var(--color-brand-ink);
  color: var(--color-brand-paper);
}

.identite-jfb .interface-bouton-principal:hover {
  background: var(--color-brand-charcoal);
}

.theme-sombre .interface-bouton-principal {
  border-color: var(--color-brand-paper);
  background: var(--color-brand-paper);
  color: var(--color-brand-ink);
}

.theme-sombre .interface-bouton-principal:hover {
  background: color-mix(in srgb, var(--color-brand-paper) 88%, var(--color-brand-ink));
}

/* En mode autonome, préserver les encoches et la barre d'accueil mobile. */
@media (max-width: 40rem) {
  header > div {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .identite-publique main#contenu {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}