/* Sur le terrain — module d'accueil, flash info et pages de cas.
   Léger, sans dépendance, compatible Gutenberg, thèmes blocs et Elementor.
   Chaque site règle ses couleurs en redéfinissant les variables --slt-* (sur :root ou sur la section). */

.slt-section,
.slt-cas,
.slt-flash {
  --_encre: var(--slt-encre, #16181B);
  --_gris: var(--slt-gris, #5F6063);
  --_fond: var(--slt-fond, #F3F2EE);
  --_carte: var(--slt-carte, #FFFFFF);
  --_filet: var(--slt-filet, #E4E2DB);
  --_accent: var(--slt-accent, #16181B);
  --_accent-texte: var(--slt-accent-texte, #FFFFFF);
  --_signal: var(--slt-signal, #2C8BEA);
  --_rayon: var(--slt-rayon, 18px);
  --_mono: var(--slt-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  --_courbe: cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}
.slt-section *, .slt-cas *, .slt-flash * { box-sizing: inherit; }

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

/* ---------- Section d'accueil ---------- */
.slt-section {
  background: var(--_fond);
  color: var(--_encre);
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--slt-gouttiere, clamp(1rem, 0.5rem + 3vw, 3.5rem));
}
.slt-section__inner { max-width: var(--slt-largeur, 1200px); margin: 0 auto; }
.slt-section__entete {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.slt-surtitre {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  font: 600 0.75rem/1.2 var(--_mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--_gris);
}
.slt-surtitre::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_signal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--_signal) 18%, transparent);
}
.slt-section__titre {
  margin: 0.6rem 0 0; max-width: 24ch;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600;
  color: var(--_encre);
}
.slt-section__intro { margin: 0.8rem 0 0; max-width: 52ch; color: var(--_gris); font-size: 1rem; line-height: 1.55; }
.slt-section__tous {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--_filet); border-radius: 999px; background: var(--_carte);
  color: var(--_encre); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
}
.slt-section__tous:hover { border-color: var(--_encre); }

.slt-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.slt-carte {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--_carte); border: 1px solid var(--_filet); border-radius: var(--_rayon); overflow: hidden;
  transition: transform 0.24s var(--_courbe), box-shadow 0.24s var(--_courbe);
}
.slt-carte:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(22, 24, 27, 0.03), 0 24px 60px -36px rgba(22, 24, 27, 0.35); }
.slt-carte:focus-within { outline: 2px solid var(--_signal); outline-offset: 3px; }
.slt-carte__media { aspect-ratio: 4 / 3; background: var(--_fond); overflow: hidden; margin: 0; }
.slt-carte__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slt-carte__corps { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; padding: 1.2rem 1.25rem 1.35rem; }
.slt-carte__etiquettes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.slt-puce {
  display: inline-block; padding: 0.3rem 0.65rem; border-radius: 999px;
  background: var(--_fond); color: var(--_encre); font-size: 0.75rem; font-weight: 600; line-height: 1.2;
}
.slt-puce--format { background: transparent; border: 1px solid var(--_filet); color: var(--_gris); }
.slt-puce--nouveau { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-texte); }
.slt-carte__lieu { display: flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--_gris); font-size: 0.875rem; }
.slt-carte__lieu svg { flex: none; width: 14px; height: 14px; }
.slt-carte__phrase { margin: 0; color: var(--_encre); font-size: 1.0625rem; line-height: 1.42; font-weight: 500; }
.slt-carte__lien {
  margin-top: auto; padding-top: 0.25rem; color: var(--_encre); font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem;
}
.slt-carte__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.slt-carte__lien:focus-visible { outline: none; }
.slt-carte__fleche { transition: transform 0.24s var(--_courbe); }
.slt-carte:hover .slt-carte__fleche { transform: translateX(3px); }

/* ---------- Flash info ---------- */
.slt-flash {
  position: fixed; z-index: 60;
  left: var(--slt-flash-gauche, 16px);
  bottom: calc(var(--slt-flash-bas, 16px) + env(safe-area-inset-bottom, 0px));
  width: min(470px, calc(100vw - 2 * var(--slt-flash-gauche, 16px)));
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.4rem 0.55rem 0.95rem;
  background: var(--slt-flash-fond, rgba(22, 24, 27, 0.95)); color: var(--slt-flash-texte, #FFFFFF);
  border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  font-size: 0.875rem; line-height: 1.35;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.32s var(--_courbe), transform 0.32s var(--_courbe);
}
.slt-flash[hidden] { display: none; }
.slt-flash.est-visible { opacity: 1; transform: none; }
.slt-flash__texte { flex: 1; min-width: 0; margin: 0; }
.slt-flash__etiquette {
  display: block; margin-bottom: 0.1rem;
  font: 600 0.6875rem/1.3 var(--_mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72;
}
.slt-flash__court { display: none; }
.slt-flash__lien { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.slt-flash__lien:hover { text-decoration-thickness: 2px; }
.slt-flash__fermer {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; opacity: 0.8;
}
.slt-flash__fermer:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.slt-flash__fermer:focus-visible, .slt-flash__lien:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.slt-flash__fermer svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .slt-flash { padding: 0.45rem 0.25rem 0.45rem 0.8rem; font-size: 0.8125rem; border-radius: 12px; }
  .slt-flash__etiquette { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05em; font-size: 0.65rem; }
  .slt-flash__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .slt-flash__court { display: inline; }
  .slt-flash__lien { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Le flash ne cache jamais le contenu : la page réserve sa hauteur en bas tant qu'il est affiché. */
body.slt-flash-actif { padding-bottom: var(--slt-flash-reserve, 96px); }

/* ---------- Page d'un cas ---------- */
.slt-cas { max-width: var(--slt-mesure, 44rem); margin-inline: auto; color: var(--_encre); font-size: 1.0625rem; line-height: 1.65; }
.slt-cas__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--_gris); }
.slt-badge {
  display: inline-block; padding: 0.32rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--_filet); background: var(--_carte); color: var(--_encre);
  font: 600 0.6875rem/1.2 var(--_mono); letter-spacing: 0.12em; text-transform: uppercase;
}
/* L'accent « nouveau » ne s'affiche que pendant les 3 mois qui suivent l'intervention (classe ajoutée par l'extension). */
body.slt-recente .slt-badge--nouveau { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-texte); }
.slt-cas__chapo { margin: 0 0 2rem; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--_encre); }
.slt-cas h2 { margin: 2.6rem 0 0.9rem; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; }
.slt-cas p { margin: 0 0 1rem; }
.slt-figure { margin: 1.75rem 0; }
.slt-figure img { display: block; width: auto; max-width: 100%; max-height: 560px; height: auto; border-radius: calc(var(--_rayon) - 4px); }
.slt-figure--principale img { max-height: 620px; }
.slt-figure figcaption { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.5; color: var(--_gris); }

.slt-decisions, .slt-lecons, .slt-constats, .slt-consignes { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.slt-decisions, .slt-lecons, .slt-constats { display: grid; gap: 0.75rem; }
.slt-decisions li, .slt-lecons li, .slt-constats li {
  padding: 1rem 1.15rem; border: 1px solid var(--_filet); border-radius: calc(var(--_rayon) - 6px); background: var(--_carte);
}
.slt-constats { counter-reset: slt-c; }
.slt-constats li { counter-increment: slt-c; position: relative; padding-left: 3.2rem; }
.slt-constats li::before {
  content: counter(slt-c); position: absolute; left: 1rem; top: 1rem;
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--_accent); color: var(--_accent-texte); font: 600 0.8125rem/1 var(--_mono);
}
.slt-lecons li { border-left: 3px solid var(--_signal); }
.slt-consignes li { position: relative; padding: 0.35rem 0 0.35rem 1.9rem; }
.slt-consignes li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.75rem; width: 0.85rem; height: 0.45rem;
  border-left: 2px solid var(--_signal); border-bottom: 2px solid var(--_signal); transform: rotate(-45deg);
}

.slt-cta {
  margin: 2.75rem 0 1.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--_rayon); background: var(--_accent); color: var(--_accent-texte);
}
.slt-cta p { margin: 0 0 0.85rem; }
.slt-cta__titre { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.slt-cta__prix { font-weight: 600; }
.slt-cta__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 1rem !important; }
.slt-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem;
  border-radius: 999px; border: 1px solid currentColor; color: inherit; font-weight: 600; text-decoration: none;
}
.slt-btn--primaire { background: var(--_accent-texte); border-color: var(--_accent-texte); color: var(--_accent); }
.slt-btn:hover { opacity: 0.9; }
.slt-btn:focus-visible { outline: 2px solid var(--_accent-texte); outline-offset: 3px; }
.slt-cta__reassurance { margin: 0 !important; font-size: 0.8125rem; opacity: 0.78; }
.slt-cas__source { font-size: 0.8125rem; color: var(--_gris); border-top: 1px solid var(--_filet); padding-top: 1rem; }

/* L'image mise en avant sert aux cartes et au schéma : la page la montre déjà dans le récit. */
body.slt-masquer-une .wp-post-image,
body.slt-masquer-une .wp-block-post-featured-image,
body.slt-masquer-une .elementor-widget-theme-post-featured-image { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .slt-carte, .slt-carte__fleche, .slt-flash { transition: none; }
  .slt-carte:hover { transform: none; }
}
@media print { .slt-flash { display: none !important; } }