/* ============================================================
   IMASCIENCE — Landing Audit (version Industrie)
   Page à part (structure landing-page-audit-industrie.md) dans la
   charte des landings secteur : hero .page-hero + .indus-hero
   (components/secteur/industrie), CTA finale .cta-final__box et
   visionneuse .lightbox (components), vignettes .video-card__media
   (components). Cette feuille ne porte que les blocs propres à la
   landing audit : symptômes, offre, méthode, légitimité, résultats.
   Sobriété : pas d'icônes décoratives, pas d'effet, beaucoup d'air.
   ============================================================ */

/* ---------- Header translucide au-dessus du hero (comme les landings) ---------- */
.tpl-audit-industrie .site-header {
  background: color-mix(in srgb, var(--color-dark) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tpl-audit-industrie .page-hero {
  margin-top: -74px;
  padding-top: 74px;
}

/* ---------- Bloc 1 — Hero : un seul CTA ---------- */
.audit-hero__cta { margin-top: var(--space-6); }

/* ---------- Bloc 2 — Le constat : trois symptômes ----------
   Trois cartes blanches d'égale importance (gabarit .indus-refcard) :
   le titre est la phrase dans laquelle le lecteur doit se reconnaître,
   souligné d'un filet accent. */
.audit-symptoms {
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  margin-top: clamp(var(--space-8), 5vw, var(--space-12));
}
@media (min-width: 810px) {
  .audit-symptoms { grid-template-columns: repeat(3, 1fr); }
}
.audit-symptom {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  box-shadow: 0 14px 40px -30px color-mix(in srgb, var(--color-blue) 55%, transparent);
}
.audit-symptom__title {
  font-size: clamp(var(--text-xl), 1.6vw, var(--text-2xl));
  line-height: var(--leading-snug);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 3px solid var(--color-accent);
}
.audit-symptom__text {
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}

/* ---------- Bloc 3 — L'offre + encadré engagement ----------
   Bande claire bleutée de la charte ; l'encadré (« votre webmaster
   reste aux commandes ») est posé à part, filet accent à gauche,
   comme les encarts de posture des landings. */
.audit-offre { background: var(--color-section-alt); }
.audit-offre__grid {
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  align-items: start;
}
@media (min-width: 810px) {
  .audit-offre__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.audit-offre__text {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
  max-width: 62ch;
}
.audit-offre__text p + p { margin-top: var(--space-4); }
.audit-offre__box {
  background: var(--color-white);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  line-height: var(--leading-body);
  box-shadow: 0 14px 40px -30px color-mix(in srgb, var(--color-blue) 55%, transparent);
}
.audit-offre__box p + p { margin-top: var(--space-4); }

/* ---------- Bloc 4 — La méthode : étapes horizontales numérotées ---------- */
.audit-steps {
  list-style: none;
  margin: clamp(var(--space-8), 5vw, var(--space-12)) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-8));
}
@media (min-width: 810px) {
  .audit-steps { grid-template-columns: repeat(4, 1fr); }
}
.audit-step {
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}
.audit-step__num {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.audit-step__title {
  margin-top: var(--space-2);
  font-size: var(--text-xl);
}
.audit-step__text {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}
.audit-methode__note {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  max-width: 62ch;
  border-left: 3px solid var(--color-highlight);
  padding-left: var(--space-6);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- Bloc 5 — La légitimité : texte + visuels zoomables ----------
   Texte pleine largeur du container (retour du 27/7 : borné à 68ch, la
   colonne laissait un grand vide à droite au-dessus des trois visuels). */
.audit-why { background: var(--color-bg); }
.audit-why__text {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}
.audit-why__text p + p { margin-top: var(--space-4); }
.audit-visuals {
  list-style: none;
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}
@media (min-width: 810px) {
  .audit-visuals { grid-template-columns: repeat(3, 1fr); }
}
.audit-visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.audit-visual .video-card__play .icon {
  width: 18px;
  height: 18px;
  padding: 11px;
}

/* ---------- Bloc 6 — Les résultats attendus ----------
   Quatre petites cartes côte à côte (retour du 27/7, remplace la liste à
   tirets) : carte blanche sobre, tiret accent en tête — pas d'icône. */
.audit-results__grid {
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}
@media (min-width: 810px) {
  .audit-results__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .audit-results__grid { grid-template-columns: repeat(4, 1fr); }
}
.audit-result {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  box-shadow: 0 14px 40px -30px color-mix(in srgb, var(--color-blue) 55%, transparent);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}
.audit-result::before {
  content: "";
  display: block;
  width: var(--space-6);
  height: 3px;
  margin-bottom: var(--space-4);
  background: var(--color-accent);
}