/* Foxalia Radio CMS — socle CSS commun du site public.
   Volontairement minimal : reset, variables d'identité (--fx-*), conteneur, éléments communs.
   Chaque modèle apporte sa propre identité graphique dans son style.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video, audio { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }

.fx-body {
  background: var(--fx-color-background);
  color: var(--fx-color-text);
  font-family: var(--fx-font-body);
  font-size: var(--fx-font-size-base);
  font-weight: var(--fx-body-weight);
  line-height: var(--fx-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.fx-body) :where(h1, h2, h3, h4) {
  font-family: var(--fx-font-heading);
  font-weight: var(--fx-heading-weight);
  line-height: var(--fx-heading-line-height);
  text-wrap: balance;
}

.fx-container { width: min(100% - 40px, var(--fx-site-width)); margin-inline: auto; }
.fx-container-narrow { width: min(100% - 40px, var(--fx-content-width)); margin-inline: auto; }
.fx-icon { flex: none; }

.fx-button {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.5em; border: 0; border-radius: var(--fx-button-radius);
  background: var(--fx-color-primary); color: var(--fx-color-on-primary);
  font-weight: 600; font-size: .95em; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.fx-button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.fx-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: #000; color: #fff; border-radius: 6px; }
.fx-skip:focus { top: 12px; }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 2px solid var(--fx-color-accent); outline-offset: 3px; }

/* Messages de formulaires publics (rendus par les modèles via $h->flash()) */
.fx-flash { padding: 12px 16px; border-radius: 10px; font-size: .92em; margin-bottom: 16px; }
.fx-flash-ok { background: #e7f6ec; color: #135c2f; }
.fx-flash-error { background: #fdecec; color: #8a1c1c; }

/* Section en erreur (prévisualisation uniquement) */
.fx-s-error { margin: 16px; padding: 18px 20px; border: 1px dashed #d33; border-radius: 10px; background: #fff5f5; color: #8a1c1c; font: 14px/1.5 system-ui, sans-serif; display: grid; gap: 4px; }

/* Bandeau de prévisualisation */
.fx-is-preview::after {
  content: "Aperçu — non publié"; position: fixed; right: 12px; top: 12px; z-index: 9999;
  padding: 6px 10px; border-radius: 999px; background: rgba(15,16,20,.82); color: #fff;
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: .04em; pointer-events: none;
}

/* Page 404 */
.fx-404 { padding: clamp(80px, 14vw, 180px) 0; }
.fx-404 .fx-container { max-width: 720px; }
.fx-404-code { font-family: var(--fx-font-accent); color: var(--fx-color-accent); letter-spacing: .2em; font-size: .85em; margin-bottom: 18px; }
.fx-404 h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 16px; }
.fx-404 p { color: var(--fx-color-muted); margin-bottom: 32px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Région d'en-tête : un modèle qui porte [data-fx-sticky] rend toute la région fixe au défilement. */
.fx-region-header { position: relative; z-index: 60; }
.fx-region-header:has([data-fx-sticky]) { position: sticky; top: 0; }

/* Aucun modèle ne doit provoquer de défilement horizontal de la page (clip préserve position: sticky). */
.fx-body { overflow-x: clip; }