/* ─────────────────────────────────────────────────────────────────────────────
   KreaBoard — Bibliothèque des templates publics
   Socle commun de présentation des templates

   Responsabilité :
   - normalisation minimale du document ;
   - structure commune des templates ;
   - médias fluides ;
   - conteneur et section génériques ;
   - boutons partagés ;
   - classes typographiques sémantiques.

   Ce fichier ne contient :
   - aucun moteur du Public Core ;
   - aucun style propre à une page ;
   - aucun style Home, Article, Header, Footer ou Marketplace ;
   - aucun calcul responsive métier ;
   - aucune redéfinition des réglages typographiques du Core.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   1. Normalisation du modèle de boîte
   ───────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Document de template
   ───────────────────────────────────────────────────────────────────────────── */

html {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: var(--kb-text-color, var(--kb-text, #24324a));
  background: var(--kb-background-color, #ffffff);
  font-family: var(
    --kb-public-body-font-family,
    var(--kb-font-main, Inter, Arial, Helvetica, sans-serif)
  );
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main,
section,
article,
header,
footer,
nav,
aside {
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Éléments natifs
   ───────────────────────────────────────────────────────────────────────────── */

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Accessibilité clavier
   ───────────────────────────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kb-focus-color, var(--kb-cyan, #20bde8));
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Racine commune des templates
   ───────────────────────────────────────────────────────────────────────────── */

.kb-template-root {
  min-width: 0;
  width: 100%;
  color: inherit;
  background: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Conteneur transversal
   Le Layout Manager fournit les variables actives.
   Les valeurs finales ci-dessous sont uniquement des fallbacks techniques.
   ───────────────────────────────────────────────────────────────────────────── */

.kb-container {
  width: min(
    calc(
      100% - (
        2 * var(--kb-public-layout-page-padding, 24px)
      )
    ),
    var(
      --kb-public-layout-container-max-width,
      var(--kb-container, 1180px)
    )
  );
  min-width: 0;
  margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Section générique
   ───────────────────────────────────────────────────────────────────────────── */

.kb-section {
  min-width: 0;
  padding-block: var(--kb-public-layout-section-gap, 80px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Boutons communs
   Les couleurs publiées peuvent remplacer les fallbacks.
   ───────────────────────────────────────────────────────────────────────────── */

.kb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: var(--kb-button-height, 52px);
  padding-inline: var(--kb-button-padding-x, 26px);
  border: 1px solid transparent;
  border-radius: var(--kb-button-radius, var(--kb-radius, 12px));
  font-family: var(
    --kb-public-body-font-family,
    var(--kb-font-main, Inter, Arial, Helvetica, sans-serif)
  );
  font-size: var(--kb-button-font-size, 15px);
  font-weight: var(--kb-button-font-weight, 800);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.kb-button:hover {
  transform: translateY(-1px);
}

.kb-button:active {
  transform: translateY(0);
}

.kb-button--primary {
  color: var(--kb-button-primary-text, #ffffff);
  background: var(
    --kb-button-primary-gradient,
    linear-gradient(
      135deg,
      var(--kb-blue-500, #2f6df6),
      var(--kb-blue-700, #1745bf)
    )
  );
  box-shadow: var(
    --kb-button-primary-shadow,
    0 14px 30px rgba(23, 69, 191, 0.24)
  );
}

.kb-button--secondary {
  color: var(--kb-button-secondary-text, var(--kb-blue-900, #132d63));
  border-color: var(--kb-button-secondary-border, rgba(19, 45, 99, 0.18));
  background: var(--kb-button-secondary-background, #ffffff);
}

.kb-button--outline-light {
  color: var(--kb-button-outline-light-text, #ffffff);
  border-color: var(
    --kb-button-outline-light-border,
    rgba(255, 255, 255, 0.48)
  );
  background: transparent;
}

.kb-button--outline-dark {
  color: var(--kb-button-outline-dark-text, var(--kb-blue-900, #132d63));
  border-color: var(
    --kb-button-outline-dark-border,
    rgba(19, 45, 99, 0.25)
  );
  background: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Classes typographiques sémantiques
   Les dimensions et calibrages proviennent du Core Typography.
   ───────────────────────────────────────────────────────────────────────────── */

.kb-eyebrow {
  margin: 0;
  color: var(--kb-eyebrow-color, var(--kb-blue-600, #245de0));
  font-family: var(
    --kb-public-body-font-family,
    var(--kb-font-main, Inter, Arial, Helvetica, sans-serif)
  );
  font-size: var(--kb-eyebrow-size, 13px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: var(--kb-eyebrow-spacing, 0.12em);
  text-transform: uppercase;
}

.kb-title {
  margin: 0;
  color: var(--kb-title-color, var(--kb-blue-950, #091d45));
  font-family: var(
    --kb-public-title-font-family,
    var(--kb-font-title, Inter, Arial, Helvetica, sans-serif)
  );
  font-weight: var(--kb-title-weight-calibrated, var(--kb-title-weight, 800));
  letter-spacing: var(
    --kb-title-letter-spacing-calibrated,
    var(--kb-title-letter-spacing, -0.04em)
  );
}

.kb-text {
  margin: 0;
  color: var(--kb-text-color, var(--kb-text, #24324a));
  font-family: var(
    --kb-public-body-font-family,
    var(--kb-font-main, Inter, Arial, Helvetica, sans-serif)
  );
  font-size: var(--kb-paragraph-size, 18px);
  line-height: calc(
    1.65 * var(--kb-text-line-height-scale-calibrated, 1)
  );
  letter-spacing: var(--kb-text-letter-spacing-calibrated, 0em);
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Utilitaire accessible
   ───────────────────────────────────────────────────────────────────────────── */

.kb-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}