/*
 * Sites vitrines (plugin Showcase) : mise en page neutre autour des composants WebUi (webstore_v3.css).
 * Un theme de site ne redefinit que les variables, sous body.showcase[data-theme="<theme>"] (voir FlowCorpShowcase).
 * Aucune classe ici n'est utilisee par les vues : seulement par la mise en page `Showcase.showcase` et par des selecteurs
 * de structure sur le contenu (sections, titres).
 */
body.showcase {
  --font-title: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --color-background: #fafaf8;
  --color-surface: #ffffff;
  --color-foreground: #18181b;
  --color-textdark: #18181b;
  --color-text: #18181b;
  --color-ink: #18181b;
  --color-ink-soft: #52525b;
  --color-muted-foreground: #52525b;
  --color-foreground-muted: #52525b;
  --color-muted: #f4f4f2;
  --color-border: #d4d4d0;
  --color-forest: #18181b;
  --color-stamp: #18181b;
  --color-highlight: var(--color-stamp);
  --shadow-press-sm: none;
  --shadow-press: none;
  --shadow-press-lg: none;
  --shadow-card: none;
  --shadow-card-hover: none;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-text);
  line-height: 1.6;
}

.showcase-wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .showcase-wrap { padding: 0 2rem; }
}

/* En-tete : marque, navigation du site, langues */
.showcase-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .showcase-header { position: static; }
}

.showcase-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  min-height: 4rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.showcase-brand {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
}

.showcase-header__nav {
  flex: 1 1 auto;
  min-width: 0;
}

.showcase-header__nav a {
  font-family: var(--font-ui);
  font-size: .9rem;
  text-decoration: none;
}

.showcase-langs {
  display: flex;
  gap: .5rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: .08em;
}

.showcase-langs a {
  color: var(--color-muted-foreground);
  text-decoration: none;
}

.showcase-langs a[aria-current="true"] {
  color: var(--color-foreground);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .3em;
}

/* Contenu : une section par bloc du site, separees par un filet */
.showcase-main > section {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 5rem;
}

.showcase-main > section:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .showcase-main > section { padding: 5rem 0; }
}

.showcase-main h1 {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

.showcase-main h2 {
  font-family: var(--font-title);
  letter-spacing: -0.01em;
}

.showcase-main h3 {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.showcase-main p {
  margin: 0;
}

.showcase-main .section-subtitle {
  max-width: 46rem;
}

/* Grilles de cartes : une colonne sur telephone (les composants en prevoient deux) */
@media (max-width: 639px) {
  .showcase-main .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Champs : le gabarit WebUi entoure le champ d'un cadre ; le style global des champs de la boutique en ajoute un second */
body.showcase label > input {
  border: 0;
  padding: .35rem 0;
  background: transparent;
  box-shadow: none;
}

body.showcase label:has(> input),
body.showcase textarea {
  border-width: 1px;
}

body.showcase label:has(> input:focus),
body.showcase textarea:focus {
  outline: 2px solid var(--color-stamp);
  outline-offset: 1px;
  box-shadow: none;
}

/* Pied de page */
.showcase-footer {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0 3rem;
  font-family: var(--font-ui);
  font-size: .9rem;
  color: var(--color-muted-foreground);
}

.showcase-footer a {
  color: inherit;
}

/* Logo de l'en-tete (Site::$logo) */
.showcase-brand img {
  display: block;
  height: 2.25rem;
  width: auto;
}

/* Images du contenu */
.showcase-main img {
  max-width: 100%;
  height: auto;
}