/* ============================================================
   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, FAQ .faq
   (components). Mise en page = maquette Cléa du 27/8 : symptômes en
   cartes, bande de logos, diagnostic en trois colonnes à filet, experte
   sur fond sombre, méthode en deux colonnes, mesure texte + capture,
   résultats en quatre colonnes texte. Sobriété : pas d'icônes
   décoratives, visuels seulement sur symptômes et livrables, 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;
}

/* ---------- CTA répété (hero, diagnostic, méthode, encart final) ----------
   Bouton orange avec icône calendrier + mention « Visio de 30 min offerte »
   en dessous. Sur fond sombre (hero, encart final) la mention passe en
   blanc atténué. */
.audit-cta {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.audit-hero__cta { margin-top: var(--space-6); }
.audit-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.audit-cta__btn .icon { width: 1.1em; height: 1.1em; }
.audit-cta__sub {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.audit-cta__sub strong { color: var(--color-ink); font-weight: 600; }
.audit-hero .audit-cta__sub,
.cta-final__box .audit-cta__sub { color: color-mix(in srgb, var(--color-white) 75%, transparent); }
.audit-hero .audit-cta__sub strong,
.cta-final__box .audit-cta__sub strong { color: var(--color-white); }
.cta-final__box .audit-cta { margin-top: var(--space-6); }

/* ---------- Bloc 2 — Le constat : trois symptômes ----------
   Trois cartes blanches d'égale importance : 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);
}
.audit-card__media { display: block; margin-bottom: var(--space-4); }
.audit-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
/* Phrase de pont sous les trois questions : centrée, plus courte */
.audit-constat__note {
  margin: clamp(var(--space-8), 4vw, var(--space-12)) auto 0;
  max-width: 72ch;
  text-align: center;
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- Bande de logos : défilé continu (mécanique de la home) ----------
   Fond bleuté, logos blancs de la home inversés en gris ; piste doublée,
   « -50 % » = une période exacte grâce aux marges (pas de gap). */
.audit-logos {
  background: var(--color-section-alt);
  padding-block: clamp(var(--space-6), 3vw, var(--space-8));
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.audit-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: audit-marquee 30s linear infinite;
  will-change: translate;
}
.audit-logos img {
  margin-inline-end: clamp(var(--space-16), 8vw, 9rem);
  height: auto;
  width: auto;
  max-height: 48px;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.6;
  filter: invert(1) grayscale(1);
}
@keyframes audit-marquee { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .audit-logos__track { animation: none; } }

/* ---------- Bloc 3 — Le diagnostic : intro centrée, trois livrables ----------
   Colonnes à filet orange en tête, eyebrow « 01 - L'AUDIT » en gris,
   titre en rose ; engagement centré ; CTA. */
.audit-offre .section__head { max-width: none; }
.audit-offre__text {
  margin: var(--space-6) auto 0;
  max-width: 100ch;
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}
.audit-offre__text p + p { margin-top: var(--space-4); }
.audit-offre__text strong { color: var(--color-highlight); font-weight: 600; }
.audit-livrables {
  list-style: none;
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 0;
  padding: 0;
}
@media (min-width: 810px) {
  .audit-livrables { grid-template-columns: repeat(3, 1fr); }
}
.audit-livrable {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-6);
}
/* Avec visuel (demande du 27/8) : l'image remplace le filet en tête */
.audit-livrable:has(.audit-livrable__media) { border-top: 0; padding-top: 0; }
.audit-livrable__media { display: block; margin-bottom: var(--space-4); }
.audit-livrable__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.audit-livrable__num {
  display: block;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.audit-livrable__num em { font-style: normal; color: var(--color-accent); }
.audit-livrable__title {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  color: var(--color-highlight);
}
.audit-livrable__text {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}
.audit-livrable__text p + p { margin-top: var(--space-3); }
.audit-offre__box {
  margin: clamp(var(--space-8), 4vw, var(--space-12)) auto 0;
  max-width: 78ch;
  text-align: center;
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- Bloc 4 — Qui vous accompagne : fond sombre ----------
   Carte translucide (portrait rond cerclé rose, nom, rôle, présentation,
   mots-clés en italique rose séparés par des points) ; Imascience suit en
   texte centré, second pilier. */
.audit-why {
  background: var(--color-dark-soft);
  color: var(--color-white);
}
.audit-why h2, .audit-why .section__head h2 { color: var(--color-white); }
.audit-expert__card {
  display: flex;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  align-items: flex-start;
  max-width: 1000px;
  margin: clamp(var(--space-8), 4vw, var(--space-12)) auto 0;
  background: color-mix(in srgb, var(--color-white) 6%, transparent);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-12));
}
@media (max-width: 559px) {
  .audit-expert__card { flex-direction: column; }
}
.audit-expert__photo {
  flex: 0 0 auto;
  width: clamp(120px, 14vw, 190px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--color-dark-soft), 0 0 0 6px var(--color-highlight);
}
.audit-expert__name {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-white);
}
.audit-expert__role {
  margin: 0 0 var(--space-6);
  color: var(--color-accent);
  font-style: italic;
}
.audit-expert__body { min-width: 0; flex: 1 1 auto; }
.audit-expert__text {
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  line-height: var(--leading-body);
}
.audit-expert__text p + p { margin-top: var(--space-4); }
.audit-expert__tags {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 0;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-highlight);
}
.audit-expert__tags li + li::before {
  content: "·";
  margin-inline: var(--space-3);
  color: color-mix(in srgb, var(--color-white) 50%, transparent);
}
.audit-why__text {
  margin: clamp(var(--space-8), 4vw, var(--space-12)) auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: var(--text-lg);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  line-height: var(--leading-body);
}
.audit-why__text p + p { margin-top: var(--space-4); }

/* ---------- Bloc 5 — La méthode : deux colonnes ----------
   Titre + mention à gauche (collés en haut), cinq étapes à droite en
   liste verticale, filet orange à gauche de chaque étape, titre rose. */
.audit-methode__grid {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: start;
}
@media (min-width: 960px) {
  .audit-methode__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .audit-methode__head { position: sticky; top: 100px; }
}
.audit-methode__head { margin-bottom: 0; }
.audit-methode__note {
  margin-top: var(--space-4);
  max-width: 52ch;
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}
.audit-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
}
.audit-step {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
}
.audit-step__title {
  font-size: var(--text-xl);
  color: var(--color-highlight);
}
.audit-step__num { font-weight: inherit; }
.audit-step__text {
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}

/* ---------- Bloc 6 — La preuve par les chiffres ----------
   Bande bleutée ; texte à gauche, capture de l'outil à droite (ombrée,
   dépasse un peu du conteneur sur grand écran) ; mention partenaire
   centrée sous les deux. */
.audit-metrics { background: var(--color-section-alt); }
.audit-metrics__grid {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: center;
}
@media (min-width: 960px) {
  .audit-metrics__grid--with-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.audit-metrics__grid .section__head { margin-bottom: var(--space-6); }
.audit-metrics__text {
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
  max-width: 58ch;
}
.audit-metrics__text p + p { margin-top: var(--space-4); }
.audit-metrics__text p:first-child { color: var(--color-ink); font-style: italic; font-weight: 600; }
.audit-metrics__shot { margin: 0; }
.audit-metrics__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--color-blue) 60%, transparent);
}
.audit-metrics__partner {
  margin: clamp(var(--space-8), 4vw, var(--space-12)) auto 0;
  max-width: 78ch;
  text-align: center;
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}
.audit-metrics__partner a { color: var(--color-blue); text-decoration: underline; }

/* ---------- Bloc 7 — Les résultats : quatre colonnes texte ---------- */
.audit-results__grid {
  list-style: none;
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 0;
  padding: 0;
}
@media (min-width: 640px) {
  .audit-results__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .audit-results__grid { grid-template-columns: repeat(4, 1fr); }
}
.audit-result {
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}
.audit-result__num {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-highlight);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  position: relative;
}
.audit-result__num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--space-8);
  height: 2px;
  background: var(--color-accent);
}