/* =========================================================
   Salon du Chocolat Tarbes : styles de base (charte v1)
   Chargé après le reset de Hello Elementor.
   ========================================================= */

html { scroll-padding-top: calc(var(--header-height) + 16px); }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titres : faible spécificité pour laisser la main au kit Elementor */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  color: var(--color-text-strong);
  margin-block: 0 .5em;
  text-wrap: balance;
}
:where(h1) { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 800; }
:where(h2) { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; }
:where(h3) { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
:where(h4, h5, h6) { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
:where(p) { text-wrap: pretty; }
:where(strong, b) { font-weight: 700; }

/* Liens : lait 600 souligné caramel (remplace le rose #c36 du reset Hello) */
a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
a:hover, a:active { color: var(--color-text); }

img, svg, video { max-width: 100%; height: auto; }

::selection { background: var(--color-caramel-300); color: var(--color-cacao-900); }

/* Focus clavier : crème 3 px + caramel 700, jamais supprimé */
:is(a, button, input, select, textarea, summary, [tabindex], .elementor-button):focus-visible {
  outline: 2px solid transparent; /* conservé en mode contraste élevé */
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}
.sct-fond-fonce :is(a, button, input, select, textarea, summary, [tabindex], .elementor-button):focus-visible {
  box-shadow: 0 0 0 3px var(--color-cacao-900), 0 0 0 5px var(--color-creme-100);
}

/* Boutons natifs (formulaires, etc.) : primaire de la charte */
button, [type="button"], [type="submit"], [type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-cacao-800);
  color: var(--color-creme-50);
  font: 700 16px/1.2 var(--font-body);
  cursor: pointer;
  transition: background-color .15s ease;
}
button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover,
button:focus, [type="button"]:focus, [type="submit"]:focus, [type="reset"]:focus {
  background: var(--color-lait-600);
  color: var(--color-creme-50);
}
button:disabled, [type="submit"]:disabled {
  background: var(--color-creme-300);
  color: #8A6A55;
  cursor: not-allowed;
}

/* Champs de formulaire */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]),
select, textarea {
  width: 100%;
  min-height: var(--input-height);
  padding: 0 16px;
  border: 2px solid var(--color-border-field, #A67B52);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: 400 16px/1.5 var(--font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { padding: 14px 16px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-creme-200);
}
[aria-invalid="true"] { border-color: var(--color-error-600) !important; }
::placeholder { color: var(--color-text-muted); opacity: .8; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--color-cacao-800); }
label { font-weight: 700; font-size: 15px; }

/* Accessibilité */
.screen-reader-text, .sct-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus, .sct-skip-link:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  z-index: 100000;
  width: auto; height: auto;
  clip: auto;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-cacao-800);
  color: var(--color-creme-50);
  font-weight: 700;
  text-decoration: none;
}

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