/* =========================================================
   Salon du Chocolat Tarbes : bibliothèque de composants (charte v1)
   Usage dans Elementor : onglet Avancé > Classes CSS.
   Préfixe : sct-
   ========================================================= */

:root { --color-border-field: #A67B52; } /* 3:1 minimum sur crème et blanc (RGAA 3.3) */

/* ---------- Conteneur ---------- */
.sct-conteneur { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); }

/* ---------- Typographie ---------- */
.sct-display, .sct-display .elementor-heading-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.01em;
}
.sct-accroche, .sct-accroche .elementor-heading-title { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.sct-surtitre, .sct-surtitre .elementor-heading-title {
  font-family: var(--font-info); font-weight: 600; text-transform: uppercase;
  font-size: var(--fs-overline); letter-spacing: var(--ls-overline); line-height: 1.2;
  color: var(--color-text-muted);
}
.sct-info, .sct-info .elementor-heading-title {
  font-family: var(--font-info); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-info); line-height: var(--lh-info); color: var(--color-text-strong);
}
.sct-texte-lg { font-size: var(--fs-body-lg); }
.sct-texte-petit { font-size: var(--fs-small); line-height: 1.5; }
.sct-legende { font-size: var(--fs-caption); font-weight: 500; line-height: 1.4; }

/* ---------- Boutons ----------
   Sur un widget Bouton Elementor : classe sur le widget.
   En HTML : <a class="sct-btn sct-btn--secondaire">. */
body :is(a.sct-btn, button.sct-btn, .sct-btn .elementor-button) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-height); padding: 0 26px;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  background: var(--color-cacao-800); color: var(--color-creme-50);
  font: 700 16px/1.2 var(--font-body); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
body :is(a.sct-btn, button.sct-btn, .sct-btn .elementor-button):hover { background: var(--color-lait-600); color: var(--color-creme-50); }

body :is(a.sct-btn--secondaire, button.sct-btn--secondaire, .sct-btn--secondaire .elementor-button) {
  background: transparent; color: var(--color-cacao-800); border-color: var(--color-cacao-800); padding: 0 24px;
}
body :is(a.sct-btn--secondaire, button.sct-btn--secondaire, .sct-btn--secondaire .elementor-button):hover { background: var(--color-creme-200); color: var(--color-cacao-800); }

/* Accent : uniquement sur fond foncé */
body :is(a.sct-btn--accent, button.sct-btn--accent, .sct-btn--accent .elementor-button) {
  min-height: 48px; padding: 0 22px;
  background: var(--color-caramel-500); color: var(--color-cacao-900);
}
body :is(a.sct-btn--accent, button.sct-btn--accent, .sct-btn--accent .elementor-button):hover { background: var(--color-caramel-300); color: var(--color-cacao-900); }

.sct-lien, .sct-lien a {
  color: var(--color-lait-600); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--color-caramel-500);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.sct-lien:hover, .sct-lien a:hover { color: var(--color-cacao-900); text-decoration-color: var(--color-cacao-900); text-decoration-thickness: 3px; }

/* ---------- Badges ---------- */
.sct-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--color-caramel-500); color: var(--color-cacao-900);
  font-family: var(--font-info); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
}
.sct-badge--contour { background: transparent; border: 2px solid var(--color-cacao-800); color: var(--color-cacao-800); }
.sct-badge--chip { height: auto; padding: 3px 10px; font-size: 14px; letter-spacing: .08em; background: var(--color-creme-200); color: var(--color-cacao-800); }
.sct-pastille {
  width: 112px; height: 112px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--color-caramel-500); color: var(--color-cacao-900); transform: rotate(-8deg); line-height: 1;
  font-family: var(--font-info); text-transform: uppercase;
}
.sct-pastille strong { font-weight: 700; font-size: 30px; }
.sct-pastille span { font-weight: 600; font-size: 16px; letter-spacing: .06em; }

/* ---------- Cartes ---------- */
.sct-carte { background: var(--color-creme-100); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.sct-carte--surface { background: var(--color-surface); }
.sct-carte--survol { transition: box-shadow .2s ease, transform .2s ease; }
.sct-carte--survol:hover { box-shadow: var(--shadow-md); }

/* Carte exposant (générée par le shortcode) */
.sct-exposant { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-creme-100); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease; }
.sct-exposant:hover, .sct-exposant:focus-within { box-shadow: var(--shadow-md); }
.sct-exposant__media { aspect-ratio: 4 / 3; background: var(--color-creme-200) url("../svg/pattern-clair.svg") repeat; }
.sct-exposant__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sct-exposant__corps { padding: 18px; display: flex; flex-direction: column; gap: var(--space-2); }
.sct-exposant__spec { align-self: flex-start; }
.sct-exposant__nom { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--color-text-strong); }
.sct-exposant__ville { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--color-text-muted); }

/* Carte info pratique */
.sct-info-pratique { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-creme-100); border-radius: var(--radius-lg); padding: var(--space-5); }
.sct-info-pratique__icone { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-creme-200); color: var(--color-cacao-800); }
.sct-info-pratique__titre { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 22px; }

/* Bloc horaires */
.sct-horaires { background: var(--color-creme-100); border-radius: var(--radius-lg); padding: var(--space-5); }
.sct-horaires__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-block: 14px; font-family: var(--font-info); font-weight: 700; text-transform: uppercase; }
.sct-horaires__ligne + .sct-horaires__ligne { border-top: 2px dashed var(--color-creme-300); }
.sct-horaires__ligne:first-child { padding-top: 0; }
.sct-horaires__ligne:last-child { padding-bottom: 0; }
.sct-horaires__jour { font-size: 24px; }
.sct-horaires__heures { font-size: var(--fs-info); color: var(--color-cacao-800); }

/* Bloc billetterie */
.sct-billetterie { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-cacao-800); color: var(--color-creme-100); }
.sct-billetterie__prix { display: flex; align-items: flex-end; gap: 14px; }
.sct-billetterie__montant { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: .9; }
.sct-billetterie__libelle { font-family: var(--font-info); font-weight: 700; font-size: 22px; line-height: 1.05; text-transform: uppercase; padding-bottom: 6px; }
.sct-billetterie p { margin: 0; font-size: 15px; color: var(--color-creme-300); }

/* Compte à rebours */
.sct-compte { display: flex; flex-direction: column; gap: 14px; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-cacao-900); color: var(--color-creme-100); }
.sct-compte__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sct-compte__unite { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: var(--radius-md); background: var(--color-cacao-800); }
.sct-compte__valeur { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.sct-compte__label { font-family: var(--font-info); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-creme-300); }

/* Bandeau solidaire */
.sct-solidaire { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: var(--space-6) 40px; background: var(--color-cacao-900); color: var(--color-creme-100); }
.sct-solidaire__texte { flex: 1; min-width: 260px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.15; }

/* Bloc partenaires */
.sct-partenaires { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.sct-partenaire { height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); }
.sct-partenaire img { max-height: 80px; width: auto; object-fit: contain; }

/* ---------- Fonds et sections ---------- */
.sct-fond-creme { background-color: var(--color-creme-100); }
.sct-fond-surface { background-color: var(--color-surface); }
.sct-fond-alt { background-color: var(--color-creme-200); }
.sct-fond-fonce { background-color: var(--color-cacao-900); color: var(--color-inverse-text); }
.sct-fond-cacao { background-color: var(--color-cacao-800); color: var(--color-inverse-text); }
:is(.sct-fond-fonce, .sct-fond-cacao) :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--color-inverse-text); }
:is(.sct-fond-fonce, .sct-fond-cacao) :is(p, li, .elementor-widget-text-editor) { color: var(--color-inverse-text); }
:is(.sct-fond-fonce, .sct-fond-cacao) .sct-surtitre, :is(.sct-fond-fonce, .sct-fond-cacao) .sct-surtitre .elementor-heading-title { color: var(--color-inverse-accent); }
:is(.sct-fond-fonce, .sct-fond-cacao) a:not(.sct-btn):not(.elementor-button) { color: var(--color-caramel-300); text-decoration-color: var(--color-caramel-300); }
:is(.sct-fond-fonce, .sct-fond-cacao) .sct-texte-secondaire { color: var(--color-inverse-muted); }

/* Patterns (tuile 120 px) */
.sct-motif-clair { background-color: var(--color-creme-100); background-image: url("../svg/pattern-clair.svg"); background-size: 120px 120px; background-repeat: repeat; }
.sct-motif-fonce { background-color: var(--color-cacao-900); background-image: url("../svg/pattern-fonce.svg"); background-size: 120px 120px; background-repeat: repeat; color: var(--color-inverse-text); }

/* Séparateur coulure : sur une section foncée, coule sur la suivante.
   Un seul par écran. Prévoir 64 px de marge haute dans la section suivante. */
.sct-coulure { position: relative; z-index: 2; overflow: visible !important; }
.sct-coulure::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px);
  height: 40px; pointer-events: none;
  background-color: var(--sct-coulure-couleur, var(--color-cacao-900));
  -webkit-mask: url("../svg/separateur-coulure-mobile.svg") no-repeat center / 100% 100%;
          mask: url("../svg/separateur-coulure-mobile.svg") no-repeat center / 100% 100%;
}
.sct-coulure.sct-fond-cacao { --sct-coulure-couleur: var(--color-cacao-800); }
@media (min-width: 768px) {
  .sct-coulure::after { height: 64px; -webkit-mask-image: url("../svg/separateur-coulure.svg"); mask-image: url("../svg/separateur-coulure.svg"); }
}

/* ---------- Images ---------- */
.sct-image-goutte img, img.sct-image-goutte { border-radius: var(--radius-drop); }
.sct-image-arrondie img, img.sct-image-arrondie { border-radius: var(--radius-lg); }

/* ---------- Ombres (toujours teintées cacao) ---------- */
.sct-ombre-sm { box-shadow: var(--shadow-sm); }
.sct-ombre-md { box-shadow: var(--shadow-md); }
.sct-ombre-lg { box-shadow: var(--shadow-lg); }

/* ---------- Icônes (masque SVG, couleur = currentColor) ---------- */
.sct-icone { display: inline-block; width: 24px; height: 24px; flex: none; background-color: currentColor; -webkit-mask: var(--sct-icone) no-repeat center / contain; mask: var(--sct-icone) no-repeat center / contain; }
.sct-icone--lg { width: 40px; height: 40px; }
.sct-icone--date { --sct-icone: url("../svg/icone-date.svg"); }
.sct-icone--horaires { --sct-icone: url("../svg/icone-horaires.svg"); }
.sct-icone--lieu { --sct-icone: url("../svg/icone-lieu.svg"); }
.sct-icone--tarif { --sct-icone: url("../svg/icone-tarif.svg"); }
.sct-icone--acces { --sct-icone: url("../svg/icone-acces.svg"); }
.sct-icone--parking { --sct-icone: url("../svg/icone-parking.svg"); }
.sct-icone--accessibilite { --sct-icone: url("../svg/icone-accessibilite.svg"); }
.sct-icone--solidarite { --sct-icone: url("../svg/icone-solidarite.svg"); }

/* ---------- Motifs décoratifs (aplat) ---------- */
.sct-motif { display: inline-block; width: 64px; height: 64px; background: no-repeat center / contain; }
.sct-motif--goutte { background-image: url("../svg/motif-goutte.svg"); }
.sct-motif--coulure { background-image: url("../svg/motif-coulure.svg"); }
.sct-motif--coeur { background-image: url("../svg/motif-coeur.svg"); }
.sct-motif--feve { background-image: url("../svg/motif-feve.svg"); }
.sct-motif--tablette { background-image: url("../svg/motif-tablette.svg"); }
.sct-motif--eclats { background-image: url("../svg/motif-eclats.svg"); }
.sct-motif--crete { background-image: url("../svg/motif-crete.svg"); }

/* Boutons : jamais sur deux lignes, jamais écrasés dans un conteneur flex (sct-btn-nowrap) */
body :is(a.sct-btn, button.sct-btn, .sct-btn .elementor-button) { white-space: nowrap; }
.elementor-widget-button.sct-btn { flex-shrink: 0; }

.sct-icone--cadeau { --sct-icone: url("../svg/icone-cadeau.svg"); }
.sct-icone--outils { --sct-icone: url("../svg/icone-outils.svg"); }

.sct-icone--presse { --sct-icone: url("../svg/icone-presse.svg"); }
.sct-icone--toque { --sct-icone: url("../svg/icone-toque.svg"); }
.sct-icone--email { --sct-icone: url("../svg/icone-email.svg"); }
.sct-icone--telephone { --sct-icone: url("../svg/icone-telephone.svg"); }

.sct-icone--loupe { --sct-icone: url("../svg/icone-loupe.svg"); }

.sct-icone--telecharger { --sct-icone: url("../svg/icone-telecharger.svg"); }