/**
 * paragraph-banner.css
 * Styles du paragraphe Banner (bundle : banner).
 */

/* ── Image de fond : couvre tout le conteneur ──────────────────────────── */
.para-banner__bg,
.para-banner__bg article,
.para-banner__bg .field,
.para-banner__bg .field__item {
  display: contents; /* laisse l'<img> se positionner dans le flux absolu */
}

.para-banner__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── Overlay : couleur pilotée par field_bg_color (modifier sur .para-banner) ─
 *
 *  Valeurs machine → token d'overlay :
 *   uno      → overlay-uno-higher   rgba(2,   60,  72,  0.875)  teal sombre fort (c1-500)
 *   uno-low  → overlay-uno          rgba(2,   60,  72,  0.40)   teal sombre léger (c1-500)
 *   duo      → overlay-duo-higher   rgba(183, 199, 203, 0.875)  teal clair fort (c1-50)
 *   duo-low  → overlay-duo          rgba(183, 199, 203, 0.40)   teal clair léger (c1-50)
 *   trio     → overlay-trio-higher  rgba(239, 124, 69,  0.875)  orange fort (c3-500)
 * ──────────────────────────────────────────────────────────────────────────── */

.para-banner--uno .para-banner__overlay {
  background-color: var(--tw-color-surface-effect-overlay-uno-higher, rgba(2, 60, 72, 0.875));
}

.para-banner--uno-low .para-banner__overlay {
  background-color: var(--tw-color-surface-effect-overlay-uno, rgba(2, 60, 72, 0.40));
}

.para-banner--duo .para-banner__overlay {
  background-color: var(--tw-color-surface-effect-overlay-duo-higher, rgba(183, 199, 203, 0.875));
}

.para-banner--duo-low .para-banner__overlay {
  background-color: var(--tw-color-surface-effect-overlay-duo, rgba(183, 199, 203, 0.40));
}

.para-banner--trio .para-banner__overlay {
  background-color: var(--tw-color-surface-effect-overlay-trio-higher, rgba(239, 124, 69, 0.875));
}

/* ── Couleur du texte selon la variante ────────────────────────────────────
 *  uno / uno-low  → overlay sombre → texte blanc
 *  duo / duo-low / trio → overlay clair/coloré → texte noir              */

.para-banner--uno .para-banner__content,
.para-banner--uno-low .para-banner__content {
  color: var(--tw-color-content-main-alt-inverse, #ffffff);
}

.para-banner--duo .para-banner__content,
.para-banner--duo-low .para-banner__content,
.para-banner--trio .para-banner__content {
  color: var(--tw-color-content-main-alt, #000000);
}

/* Wysiwyg — force la couleur sur les éléments internes (en cas de surcharge) */
.para-banner--uno .para-banner__content .wysiwyg,
.para-banner--uno .para-banner__content .wysiwyg p,
.para-banner--uno .para-banner__content .wysiwyg li,
.para-banner--uno .para-banner__content .wysiwyg a,
.para-banner--uno-low .para-banner__content .wysiwyg,
.para-banner--uno-low .para-banner__content .wysiwyg p,
.para-banner--uno-low .para-banner__content .wysiwyg li,
.para-banner--uno-low .para-banner__content .wysiwyg a {
  color: var(--tw-color-content-main-alt-inverse, #ffffff);
}

.para-banner--duo .para-banner__content .wysiwyg,
.para-banner--duo .para-banner__content .wysiwyg p,
.para-banner--duo .para-banner__content .wysiwyg li,
.para-banner--duo .para-banner__content .wysiwyg a,
.para-banner--duo-low .para-banner__content .wysiwyg,
.para-banner--duo-low .para-banner__content .wysiwyg p,
.para-banner--duo-low .para-banner__content .wysiwyg li,
.para-banner--duo-low .para-banner__content .wysiwyg a,
.para-banner--trio .para-banner__content .wysiwyg,
.para-banner--trio .para-banner__content .wysiwyg p,
.para-banner--trio .para-banner__content .wysiwyg li,
.para-banner--trio .para-banner__content .wysiwyg a {
  color: var(--tw-color-content-main-alt, #000000);
}

/* ── Lien CTA rendu via content.field_cta (fallback sans SDC button) ───── *
 * Actif uniquement si le champ est rendu directement sans surcharge twig.  */
.para-banner__ctas .field__item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  padding: var(--spacing-spa-sd, 16px) var(--spacing-spa-lg, 24px);
  font-family: var(--font-ff-click);
  font-weight: 600;
  font-size: var(--text-fs-sd, 16px);
  letter-spacing: var(--tracking-ls-md, 0.5px);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Variante Trio (orange) */
.para-banner--trio .para-banner__ctas .field__item a {
  background-color: var(--tw-color-c3-500, #ef7c45);
  color: var(--tw-color-c1-800, #011e24);
}
.para-banner--trio .para-banner__ctas .field__item a:hover {
  background-color: var(--tw-color-c3-300, #f4a880);
  box-shadow: var(--shadow-main);
}

/* Variante Duo (bleu clair) */
.para-banner--duo .para-banner__ctas .field__item a {
  background-color: var(--tw-color-c2-500, #80c3e2);
  color: var(--tw-color-c1-800, #011e24);
}
.para-banner--duo .para-banner__ctas .field__item a:hover {
  background-color: var(--tw-color-c2-300, #b3d9ee);
  box-shadow: var(--shadow-main);
}

/* Variante Uno (teal) */
.para-banner--uno .para-banner__ctas .field__item a {
  background-color: var(--tw-color-c1-500, #023c48);
  color: #ffffff;
}
.para-banner--uno .para-banner__ctas .field__item a:hover {
  background-color: var(--tw-color-c1-800, #011e24);
  box-shadow: var(--shadow-main);
}