/* ============================================================
   IMASCIENCE — Landing Industrie (grands comptes, partenariat CEO2CEO)
   Charte des pages secteurs (maquettes Cléa) : hero .page-hero
   (galerie.css), vignettes vidéo .video-card__media (galerie.css),
   « pourquoi » .why (secteur.css), CII .cir (secteur.css),
   CTA .cta-final__box (home.css). Sobriété : pas d'effet, beaucoup
   d'air — les cinq verbes-index restent l'outil de navigation.
   ============================================================ */

/* ---------- Header translucide au-dessus du hero (comme la home) ---------- */
.tpl-industrie .site-header {
  background: color-mix(in srgb, var(--color-dark) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* la photo du hero file sous le header translucide (mécanique de home.css) */
.tpl-industrie .page-hero {
  margin-top: -74px;
  padding-top: 74px;
}

/* ---------- Hero : promesse + posture ---------- */
.indus-hero .page-hero__content--center { gap: var(--space-4); }
.indus-hero .cta-duo { margin-top: var(--space-4); }
/* Sur-titre : plus grand que l'eyebrow standard (14px), et une ombre très
   floue dessous pour rester lisible sur le ciel clair de la vidéo de fond */
.indus-hero .eyebrow {
  font-size: clamp(var(--text-base), 1.3vw, var(--text-lg));
  letter-spacing: 0.1em;
  text-shadow: 0 4px 24px rgb(0 0 0 / 0.85), 0 2px 12px rgb(0 0 0 / 0.55);
  color: var(--color-white);
}
/* Comme le titre : les *mots* étoilés passent en magenta italique */
.indus-hero .eyebrow em {
  font-style: italic;
  color: var(--color-highlight);
}
.indus-hero__lede { font-size: clamp(var(--text-lg), 1.8vw, var(--text-xl)); }
.indus-hero__posture {
  margin-top: var(--space-6);
  max-width: 62ch;
  text-align: left;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  color: color-mix(in srgb, var(--color-white) 82%, transparent);
  line-height: var(--leading-body);
}

/* ---------- Constat : l'écart de perception ----------
   Bande claire bleutée de la charte : rupture nette avec le hero sombre,
   la phrase pivot de la page posée seule, phrase clé en encre pleine */
.indus-constat {
  background: var(--color-section-alt);
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}
.indus-constat__text {
  font-size: clamp(var(--text-lg), 1.8vw, var(--text-2xl));
  line-height: 1.55;
  font-weight: var(--weight-medium);
  color: var(--color-ink-soft);
  text-wrap: pretty;
  border-left: 3px solid var(--color-highlight);
  padding-left: var(--space-6);
}
.indus-constat__text strong {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

/* ---------- Cinq blocs problème (verbes-index) ---------- */
.indus-pgrid {
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  margin-top: clamp(var(--space-8), 5vw, var(--space-12));
}
/* Un visuel pleine hauteur porte le verbe-index : une image par carte, dont
   le bandeau de lisibilité du verbe est déjà intégré à l'image (position
   verticale fixe). L'image est donc ancrée en haut (background-position top)
   pour que ce bandeau tombe toujours au même endroit, quelle que soit la
   hauteur de la carte. Aucun voile CSS : l'image se suffit.
   En mobile (colonne unique, bandeau trop bas pour montrer l'image) : on
   revient aux aplats couleur d'origine — une couleur de la charte par carte,
   léger dégradé vers l'aubergine (--verb-bg). */
.indus-pcard {
  --verb-img: url(../img/industrie/verbe-vendre.webp);
  --verb-bg: var(--color-orange);
  display: grid;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -30px color-mix(in srgb, var(--color-blue) 60%, transparent);
}
@media (min-width: 810px) {
  .indus-pcard { grid-template-columns: 250px minmax(0, 1fr); }
}
.indus-pcard:nth-of-type(2) { --verb-img: url(../img/industrie/verbe-former.webp); --verb-bg: var(--color-blue); }
.indus-pcard:nth-of-type(3) { --verb-img: url(../img/industrie/verbe-financer.webp); --verb-bg: var(--color-violet); }
.indus-pcard:nth-of-type(4) { --verb-img: url(../img/industrie/verbe-montrer.webp); --verb-bg: var(--color-magenta); }
.indus-pcard:nth-of-type(5) { --verb-img: url(../img/industrie/verbe-convaincre.webp); --verb-bg: var(--color-pink); }
/* Landing Pharma/Médical (même gabarit de carte) : visuels de verbe dédiés —
   photogrammes de la vidéo du hero, bichromie dans les cinq couleurs de la
   charte, bandeau à la même position que les visuels Industrie */
.tpl-pharma-medical .indus-pcard { --verb-img: url(../img/pharma-medical/verbe-expliquer.webp); }
.tpl-pharma-medical .indus-pcard:nth-of-type(2) { --verb-img: url(../img/pharma-medical/verbe-convaincre.webp); }
.tpl-pharma-medical .indus-pcard:nth-of-type(3) { --verb-img: url(../img/pharma-medical/verbe-former.webp); }
.tpl-pharma-medical .indus-pcard:nth-of-type(4) { --verb-img: url(../img/pharma-medical/verbe-financer.webp); }
.tpl-pharma-medical .indus-pcard:nth-of-type(5) { --verb-img: url(../img/pharma-medical/verbe-rassurer.webp); }
.indus-pcard__verb {
  display: flex;
  align-items: flex-start;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  /* Mobile : aplat couleur d'origine (l'image en colonne unique ne se voit pas) */
  background: linear-gradient(160deg,
    var(--verb-bg),
    color-mix(in srgb, var(--verb-bg) 72%, var(--color-dark)));
  color: var(--color-white);
  font-size: clamp(var(--text-2xl), 2vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}
/* Desktop (deux colonnes) : l'image du verbe remplace l'aplat */
@media (min-width: 810px) {
  .indus-pcard__verb { background: var(--verb-img) top center / cover no-repeat; }
}
.indus-pcard__body { padding: clamp(var(--space-6), 3.5vw, var(--space-12)); }
.indus-pcard__title {
  font-size: clamp(var(--text-xl), 1.9vw, var(--text-2xl));
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}
.indus-pcard__text {
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}
.indus-pcard__text p + p { margin-top: var(--space-4); }
.indus-pcard__refs {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed color-mix(in srgb, var(--color-ink) 22%, transparent);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}
.indus-pcard__refs strong { color: var(--color-ink); }

/* Vignettes du bloc — vidéo (lecture en overlay) ou illustration (zoom en
   visionneuse) : on ne quitte pas la page */
.indus-examples {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.indus-example {
  width: clamp(150px, 24vw, 224px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Mobile (colonne unique) : vignettes pleine largeur, empilées */
@media (max-width: 809px) {
  .indus-example { width: 100%; }
}
/* bouton lecture réduit à l'échelle de la vignette */
.indus-example .video-card__play .icon {
  width: 18px;
  height: 18px;
  padding: 11px;
}
button.indus-example__zoom { cursor: zoom-in; }
.indus-example__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}

/* ---------- Relance CTA entre les 5 problèmes et la fidélisation ---------- */
.indus-cta-relance { padding-block: clamp(var(--space-12), 5vw, var(--space-24)); }

/* ---------- Fidélisation : la preuve par la durée ---------- */
.indus-fidel { background: var(--color-bg); }
.indus-fidel__duo {
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-8));
  margin-top: clamp(var(--space-8), 5vw, var(--space-12));
}
@media (min-width: 810px) {
  .indus-fidel__duo { grid-template-columns: 1fr 1fr; }
}
.indus-refcard {
  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);
}
/* En-tête de carte : nom + badge à gauche, logo du client à droite */
.indus-refcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.indus-refcard__logo {
  max-height: 48px;
  max-width: 140px;
  object-fit: contain;
  flex: none;
  /* logos de la home = PNG blancs (défilé sur fond sombre) : inversés en gris foncé */
  filter: invert(1) grayscale(1);
  opacity: 0.6;
}
.indus-refcard__who {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}
.indus-refcard__badge {
  display: block;
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.indus-refcard__text {
  color: var(--color-ink-soft);
  line-height: var(--leading-body);
}
.indus-refcard__text p + p { margin-top: var(--space-4); }
.indus-takeaway {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  max-width: 62ch;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

/* ---------- Mur de logos : cases de taille égale ----------
   Harmonise la surface optique : chaque logo occupe la même boîte
   (largeur + hauteur bornées), centré et contenu. Un logo large et
   court (Nof Metal Coatings) et un logo compact (Orinox) pèsent alors
   visuellement pareil, au lieu d'être calés sur une hauteur commune
   qui écrase les logos larges. */
.indus-logos .logos-row--wall {
  justify-content: flex-start;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
}
.indus-logos .logos-row--wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 14vw, 170px);
  height: 70px;
}
.indus-logos .logos-row--wall img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Mur de logos : placeholders texte avant upload ---------- */
.indus-logowall {
  list-style: none;
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}
.indus-logowall__ph {
  border: 1px dashed color-mix(in srgb, var(--color-ink) 28%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}

/* ---------- Note sous le bouton du CTA final (encadré violet) ---------- */
.cta-final__box .cta-note {
  display: block;
  margin-top: var(--space-4);
  color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

/* ---------- Arguments (« Pourquoi Imascience ») : 3 colonnes ----------
   Le .why__grid générique (secteur.css) est en 2 colonnes bornées à 1040px ;
   sur les landings on étale les 3 arguments côte à côte, icône au-dessus. */
@media (min-width: 810px) {
  .indus-why .why__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }
  .indus-why .why__item { flex-direction: column; }
}