/* ============================================================
   IMASCIENCE — Pages d'expertise (services)
   Maquette Cléa /illustration-scientifique
   (le hero réutilise .page-hero de galerie.css)
   ============================================================ */

.eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.eyebrow--pink { color: var(--color-highlight); }

.page-hero--expertise .page-hero__content--center { gap: var(--space-4); }
.page-hero--expertise .cta-duo { margin-top: var(--space-4); }
/* note du CTA lisible sur le hero sombre (comme .hero et .cta-final sur la home) */
.page-hero .cta-note { color: color-mix(in srgb, var(--color-white) 75%, transparent); }

/* ---------- Sections image + texte ---------- */
.split__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 900px) {
  .split__grid { grid-template-columns: 1fr 1fr; }
  /* image à gauche : on inverse l'ordre visuel */
  .split--reverse .split__media { order: -1; }
}
.split__text h2 {
  font-size: clamp(var(--text-4xl), 3.5vw, var(--text-6xl));
  line-height: var(--leading-tight);
  margin: var(--space-3) 0 var(--space-6);
}
.split__text p { color: var(--color-ink-soft); line-height: var(--leading-body); }
.split__text p + p { margin-top: var(--space-4); }

.split__media { margin: 0; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--color-section-alt);
}
.split__media figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-align: center;
}
.split__foot {
  margin-top: clamp(var(--space-8), 5vw, var(--space-12));
  text-align: center;
  font-size: var(--text-xl);
  color: var(--color-ink);
}

/* Phrases mises en avant (barre orange à gauche / flèche) */
.callout {
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}
.callout--arrow {
  border-left: none;
  padding-left: 0;
  display: flex;
  gap: var(--space-3);
  font-weight: var(--weight-semibold);
}
.callout--arrow::before {
  content: "→";
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

/* ---------- Encart « qu'est-ce qu'un illustrateur » ---------- */
.what__box {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-8), 6vw, var(--space-16));
}
/* Logo IMASCIENCE en filigrane très pâle, calé dans le coin haut-droit
   (décor de fond : ne chevauche pas le texte — maquette Cléa) */
.what__deco {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.what__box > *:not(.what__deco) { position: relative; z-index: 1; }
.what__box h2 {
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  margin-bottom: var(--space-6);
}
.what__body { color: var(--color-ink-soft); line-height: var(--leading-body); }
.what__body p + p { margin-top: var(--space-4); }

/* ---------- Approche en deux colonnes (page animation 3D) ---------- */
.approach-prose {
  position: relative;
  overflow: hidden;
}
/* Filigrane logo pâle, coin bas-droit, comme sur la maquette */
.approach-prose__deco {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 300px;
  opacity: 0.14;
  pointer-events: none;
}
.approach-prose h2 {
  font-size: clamp(var(--text-4xl), 3.5vw, var(--text-6xl));
  line-height: var(--leading-tight);
  margin: var(--space-3) 0 var(--space-8);
  max-width: 26ch;
}
.approach-prose__cols {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
}
@media (min-width: 900px) {
  .approach-prose__cols { grid-template-columns: 1fr 1fr; }
}
.approach-prose__cols p { color: var(--color-ink-soft); line-height: var(--leading-body); }
.approach-prose__cols p + p { margin-top: var(--space-4); }

/* ---------- Listes à flèches ---------- */
.arrow-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}
.arrow-list li {
  position: relative;
  padding-left: var(--space-8);
  color: var(--color-ink-soft);
  line-height: var(--leading-snug);
}
.arrow-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

/* ---------- Bande orange ---------- */
.band {
  background: var(--color-accent);
  color: var(--color-white);
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
  text-align: center;
}
.band p {
  max-width: 64ch;
  margin-inline: auto;
  font-size: var(--text-xl);
  line-height: var(--leading-body);
}

/* ---------- Making-of (bande sombre) ---------- */
.making {
  background: var(--color-dark);
  color: var(--color-white);
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}
.making__title {
  color: var(--color-white);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  line-height: var(--leading-tight);
  max-width: 32ch;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}
.making__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 900px) {
  .making__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
}
/* Numérotation « 1) … » comme la maquette */
.making__steps {
  list-style: none;
  counter-reset: making;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: color-mix(in srgb, var(--color-white) 88%, transparent);
  line-height: var(--leading-snug);
}
.making__steps li::before {
  counter-increment: making;
  content: counter(making) ") ";
}
.making .split__media figcaption { color: color-mix(in srgb, var(--color-white) 75%, transparent); }

/* ---------- Publics cibles ---------- */
.publics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-12);
}
.publics__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-medium);
}
.icon-badge--sm {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  box-shadow: none;
}
.icon-badge--sm .icon { width: 18px; height: 18px; }

/* ---------- Citation fondateur ---------- */
.founder {
  background: var(--color-purple);
  color: var(--color-white);
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}
.founder__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 810px) {
  .founder__grid { grid-template-columns: 340px 1fr; }
}
.founder__photo {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-lg);
}
.founder__quote {
  margin: 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-accent);
}
.founder__quote > p {
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-white) 92%, transparent);
}
.founder__quote > p::before { content: "“"; }
.founder__quote > p::after { content: "”"; }
.founder__quote footer {
  margin-top: var(--space-6);
  display: grid;
  gap: 2px;
}
.founder__name { font-weight: var(--weight-bold); }
.founder__role {
  font-style: italic;
  color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

/* ---------- Sélection d'illustrations ---------- */
.selection__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .selection__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .selection__grid { grid-template-columns: repeat(3, 1fr); }
}
.selection__card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--color-dark);
}
.selection__card img {
  width: 100%;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-base) var(--ease-out);
}
.selection__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--color-dark) 82%, transparent));
}
.selection__card:hover img { transform: scale(1.04); }
.selection__legende {
  position: absolute;
  z-index: 1;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* ---------- Autres services ---------- */
.services__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 810px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}
.service-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: transparent;
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
/* Toute la carte est cliquable : le lien s'étire en overlay (pas de lien imbriqué) */
.service-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.service-item:hover {
  background: color-mix(in srgb, var(--color-highlight) 7%, var(--color-white));
  transform: translateY(-2px);
}
.service-item:hover .cta-tertiary,
.service-item:focus-within .cta-tertiary { color: var(--color-accent); }
.service-item:hover .cta-tertiary .icon { transform: translateX(3px); }
.service-item .cta-tertiary .icon { transition: transform var(--duration-fast) var(--ease-out); }
.service-item h3 { font-size: var(--text-xl); }
.service-item p { color: var(--color-ink-soft); flex: 1; line-height: var(--leading-body); }

/* Duo de CTA seul à mi-page (quand la section « références » est absente) :
   la section apporte déjà son padding, on annule la marge du foot */
.section__foot--solo { margin-top: 0; }