/* secteurs : ex-bloc <style> de secteurs-blueprint-light.php, source de vérité depuis le 09/09/2026 (plan poids-html-blueprint-light, lot 2). Tokens : var(--color-*) uniquement. */
/* ─── Base ─── */

.expertises-page {
  font-family: var(--font-body);
  color: var(--color-ink);
  overflow-x: hidden;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.expertises-page *,
.expertises-page *::before,
.expertises-page *::after {
  box-sizing: border-box;
}

/* Grain texture */
.expertises-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
  opacity: 0.03;
  pointer-events: none;
  z-index: 99;
  mix-blend-mode: overlay;
}

/* ─── Hero ─── */

/* C10 : repli sans image hero — fond bleu, le H1 blanc reste lisible. */
.exp-hero--no-image { background: var(--color-bleu); }

.exp-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  padding: 140px 0 0;
  overflow: hidden;
}
@media (max-width: 899px) {
  /* Hero portrait mobile (systeme unifie) : cadre au ratio natif -> zero recadrage. */
  .exp-hero.has-mobile-portrait { min-height: var(--hero-mobile-minh, 125vw); padding-top: 0; }
  /* line-clamp 3 (et non 2) : parité de rendu i18n — un titre traduit long
     (EN/ES) ne doit pas être tronqué après 2 lignes. Miroir du fix
     expertises-blueprint-light.php (audit i18n leaf expertise, tour 1). */
  .exp-hero.has-mobile-portrait .exp-hero-title { font-size: clamp(26px, 7vw, 34px); line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .exp-hero.has-mobile-portrait .hero-subtitle { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

.exp-hero-image-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Anti-flash gris du header au scroll-up : sur les pages expertise, on
   neutralise la transition CSS du background-color du header pour qu’il
   switche instantanément entre transparent (sur hero/section sombre) et
   blanc (sur section claire). Le padding et le box-shadow restent animés. */
.header-blueprint-light {
  transition-property: padding, box-shadow !important;
}

.exp-hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.10) 45%,
    rgba(0, 0, 0, 0.04) 100%
  );
  z-index: 1;
}

.exp-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 60px 80px;
  text-align: left;
}

/* Breadcrumb — pinned top of hero, below header */
.exp-breadcrumb {
  position: absolute;
  top: 100px;
  left: 60px;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-normal);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 0;
}

.exp-breadcrumb a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.3s ease;
}

.exp-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.exp-breadcrumb-sep {
  margin: 0 6px;
  opacity: 0.35;
  font-size: 10px;
}

/* Hero title — white on dark */
.exp-hero-title {
  font-family: var(--font-title);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: var(--font-light);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-white);
  margin: 0 0 24px;
  max-width: 1100px;
}

/* Hero CTA */
.exp-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: 50px;
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  text-decoration: none;
  transition: all 0.4s var(--ease-out-expo);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.exp-hero-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  background: var(--color-violet);
  color: var(--color-white);
}

.exp-hero-cta svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  transition: transform 0.4s var(--ease-out-expo);
}

.exp-hero-cta:hover svg {
  transform: translateX(4px);
}

/* Scroll indicator */
.exp-scroll-indicator {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  animation: expFloat 3s ease-in-out infinite;
}

@keyframes expFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

.exp-scroll-indicator svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ─── Hero subtitle (accroche) ─── */

.exp-hero-subtitle {
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  color: rgba(255, 255, 255, 0.75);
  max-width: 700px;
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ─── Section Intro (style agences) ─── */

.exp-intro {
  padding: var(--spacing-lg) 60px;
  background: var(--color-bg);
}

.exp-intro-container {
  max-width: var(--container-narrow);
  margin: 0 auto;
  text-align: center;
}

.exp-intro-title {
  font-family: var(--font-title);
  font-size: var(--text-3xl);
  font-weight: var(--font-light);
  line-height: var(--leading-snug);
  color: var(--color-violet);
  margin: 0 0 40px;
}

.exp-intro-text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  text-align: left;
  columns: 2;
  column-gap: 60px;
}

.exp-intro-text p {
  margin: 0 0 1em 0;
}

.exp-intro-text p:last-child {
  margin-bottom: 0;
}

/* Intro variante leaf : titre seul, impact visuel */
.exp-intro--leaf {
  padding: clamp(80px, 12vh, 160px) 60px;
  background: var(--color-white);
}

.exp-intro--leaf .exp-intro-rule {
  width: 60px;
  height: 3px;
  background: var(--color-orange);
  margin: 0 auto 40px;
}

.exp-intro--leaf .exp-intro-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: var(--font-light);
  line-height: 1.15;
  color: var(--color-bleu);
  margin: 0 auto 32px;
  max-width: 800px;
}

.exp-intro--leaf .exp-intro-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* Intro variante cluster editoriale : 3 blocs structures, indices oranges */
.exp-intro--cluster.exp-intro--editorial {
  padding: clamp(96px, 14vh, 180px) 0;
  background: var(--color-white);
}

.exp-intro--cluster.exp-intro--editorial .exp-intro-container {
  max-width: 1280px;
  padding: 0 80px;
  text-align: left;
}

.exp-intro--cluster.exp-intro--editorial .exp-intro-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: var(--font-light);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-bleu);
  max-width: 920px;
  margin: 0 0 96px;
  position: relative;
}

.exp-intro--cluster.exp-intro--editorial .exp-intro-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--color-orange);
  margin: 0 0 36px;
}

/* Titre d'intro long (phrase complète dans titre_h2_exp) : le corps display
   prévu pour un titre court déborde ; on redescend en lead éditorial
   (classe posée côté PHP au-delà de 90 caractères). */
.exp-intro--leaf .exp-intro-title--long,
.exp-intro--cluster.exp-intro--editorial .exp-intro-title--long {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.exp-cluster-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-gray-200);
}

.exp-cluster-block {
  display: grid;
  grid-template-columns: 96px minmax(220px, 1.05fr) minmax(0, 1.55fr);
  gap: 56px;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-gray-200);
  align-items: start;
  transition: background 0.5s var(--ease-out-expo), padding 0.5s var(--ease-out-expo);
  position: relative;
}

.exp-cluster-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-orange);
  transition: width 0.6s var(--ease-out-expo);
}

.exp-cluster-block:hover::before {
  width: 96px;
}

.exp-cluster-block:hover {
  background: linear-gradient(90deg, rgba(242, 126, 51, 0.025) 0%, rgba(242, 126, 51, 0) 70%);
}

.exp-cluster-num {
  font-family: var(--font-title);
  font-size: 56px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-orange);
  font-feature-settings: "tnum" 1;
}

.exp-cluster-block-head {
  padding-top: 8px;
}

.exp-cluster-eyebrow {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0 0 18px;
}

.exp-cluster-block-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: var(--font-light);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-bleu);
  margin: 0;
}

.exp-cluster-block-body {
  padding-top: 12px;
  text-align: left;
}

.exp-cluster-block-body p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 0 1em;
}

.exp-cluster-block-body p:last-child {
  margin: 0;
}

/* ─── Listes ordonnées : étape numérotée + titre + description ─── */
.exp-cluster-block-body ol {
  list-style: none;
  counter-reset: cluster-step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.exp-cluster-block-body ol li {
  counter-increment: cluster-step;
  position: relative;
  padding-left: 64px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.exp-cluster-block-body ol li + li {
  padding-top: 28px;
  border-top: 1px solid var(--color-gray-200);
}

.exp-cluster-block-body ol li::before {
  content: counter(cluster-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-orange);
  font-feature-settings: "tnum" 1;
}

.exp-cluster-block-body ol li + li::before {
  top: 28px;
}

.exp-cluster-block-body ol li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-bleu);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.exp-cluster-block-body ol li br {
  display: none;
}

/* ─── Listes à puces : alignement gauche, puce orange ─── */
.exp-cluster-block-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exp-cluster-block-body ul li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.exp-cluster-block-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--color-orange);
}

/* ─── Section Header (reusable) ─── */

.exp-section-header {
  text-align: center;
  margin-bottom: 80px;
}

.exp-section-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--pole-color);
  margin-bottom: 16px;
}

.exp-section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-bleu);
  margin-bottom: 24px;
}

.exp-section-description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 700px;
  margin: 0 auto;
}

/* ─── Grille sous-pages (Cards 3D) ─── */

.exp-grid-section {
  padding: clamp(80px, 10vh, 140px) 0;
  background: var(--color-bg-alt);
}

.exp-grid-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 80px;
}

.exp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px;
}

/* Card 3D */
.exp-card {
  position: relative;
  background: var(--color-white);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.5s var(--ease-out-expo);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
}

.exp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--pole-color) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out-expo);
  z-index: 2;
}

.exp-card:hover::before {
  transform: scaleX(1);
}

.exp-card:hover {
  transform: translateY(-12px) rotateX(2deg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

/* Glow */
.exp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--pole-color-glow) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.exp-card:hover::after {
  opacity: 1;
}

/* Card image */
.exp-card-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.exp-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}

.exp-card:hover .exp-card-image img {
  transform: scale(1.08);
}

.exp-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--pole-color-light), var(--color-bg-alt));
  display: flex;
  align-items: center;
  justify-content: center;
}

.exp-card-image-placeholder svg {
  width: 48px;
  height: 48px;
  stroke: var(--pole-color);
  fill: none;
  stroke-width: 1.5;
  opacity: 0.4;
}

/* Card body */
.exp-card-body {
  position: relative;
  z-index: 2;
  padding: 36px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.exp-card-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-bleu);
  margin-bottom: 12px;
  transition: color 0.4s ease;
}

.exp-card:hover .exp-card-title {
  color: var(--pole-color);
}

.exp-card-excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: 20px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exp-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.exp-card-count {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--pole-color);
}

.exp-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--pole-color);
  transition: gap 0.4s var(--ease-out-expo);
}

.exp-card:hover .exp-card-arrow {
  gap: 12px;
}

.exp-card-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* ─── Contenu editorial ─── */

.exp-editorial {
  padding: clamp(80px, 10vh, 140px) 0;
  background: var(--color-white);
}

.exp-editorial-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 80px;
}

/* Bloc éditorial : MISE EN PAGE MAGAZINE (float).
   Le sticky (tour 2) échouait : le <main class="expertises-page"> porteur a
   `overflow: hidden auto`, ce qui liait le sticky à ce conteneur (qui ne
   scrolle pas) -> la photo défilait et sortait du viewport sur les blocs à
   texte long. La grille (tours 1-2) créait en outre une « colonne image »
   quasi vide sous la photo dès que le texte dépassait la hauteur composée
   (mesuré finance bloc 0 : texte 3162 px, image 432 px -> grand vide à côté
   de la photo). Direction robuste : la photo flotte (gauche sur bloc impair,
   droite sur bloc pair), le texte l'enveloppe puis coule pleine largeur
   dessous. Plus aucune colonne, quel que soit le volume de texte (court,
   moyen, 3000 px). Chaque bloc est une colonne de lecture centrée
   (max-width 820 px -> mesure lisible y compris sous la photo) en
   `flow-root` : les floats y sont contenus, aucun chevauchement entre blocs
   (clear implicite), la hauteur du bloc englobe toujours sa photo. */
.exp-editorial-block {
  position: relative;
  display: flow-root;
  max-width: 820px;
  margin: 0 auto 120px;
}

.exp-editorial-block:last-child {
  margin-bottom: 0;
}

/* Photo flottante : largeur ~44 % de la colonne, hauteur composée plafonnée
   (ratio agréable, jamais de lamelle), radius + ombre noire = photo bien
   cadrée. Gouttière horizontale (margin-right impair / -left pair) + respir
   bas (margin-bottom) avant que le texte ne reprenne pleine largeur. */
.exp-editorial-image {
  float: left;
  width: 44%;
  height: clamp(340px, 42vh, 460px);
  margin: 0 clamp(32px, 4vw, 48px) 40px 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
  background: var(--color-gray-light, #F2F2F2);
}

.exp-editorial-block:nth-child(even) .exp-editorial-image {
  float: right;
  margin: 0 0 40px clamp(32px, 4vw, 48px);
}

.exp-editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texte : flux normal (PAS de BFC -> son contenu inline enveloppe la photo
   flottante, puis coule pleine largeur dessous). Fini la carte blanche et
   l'overlap : la photo est l'ancre visuelle (radius + ombre noire), le texte
   coule sur le fond blanc de la section. `position: relative` conserve
   l'ancre du watermark `.exp-editorial-num`. */
.exp-editorial-text {
  position: relative;
}

/* Interstitiel sans image (détecté via :has, sans toucher au PHP) : chapitre
   typographique centré sur une mesure de lecture confortable, jamais une
   colonne vide. */
.exp-editorial-block:not(:has(.exp-editorial-image)) .exp-editorial-text {
  max-width: 760px;
  margin-inline: auto;
}

/* Numero watermark */
.exp-editorial-num {
  position: absolute;
  top: -24px;
  left: clamp(28px, 3vw, 44px);
  font-family: var(--font-title);
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-bleu);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

/* Sous-titre orange */
.exp-editorial-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 20px;
}

.exp-editorial-text h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-bleu);
  margin-bottom: 16px;
}

.exp-editorial-text p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: 1.2em;
}

.exp-editorial-text p:last-child {
  margin-bottom: 0;
}

/* ─── Galerie masonry ─── */

.exp-gallery {
  padding: clamp(80px, 10vh, 140px) 0;
  background: var(--color-bg-alt);
}

.exp-gallery-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 80px;
}

.exp-masonry {
  columns: 3;
  column-gap: 24px;
}

.exp-masonry-item {
  break-inside: avoid;
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.exp-masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--ease-out-expo);
}

.exp-masonry-item:hover img {
  transform: scale(1.05);
}

/* ─── Expertises similaires ─── */

.exp-related {
  padding: clamp(80px, 10vh, 140px) 0;
  background: var(--color-gray-light, #F2F2F2);
}

.exp-related-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 80px;
}

.exp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}

.exp-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 32px;
  background: var(--color-white);
  border-radius: 16px;
  border-left: 4px solid var(--pole-color);
  transition: all 0.4s var(--ease-out-expo);
}

.exp-related-card:hover {
  transform: translateX(8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  background: var(--color-white);
}

.exp-related-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-bleu);
  margin-bottom: 8px;
  line-height: var(--leading-snug);
}

.exp-related-card p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── Responsive ─── */

@media (max-width: 1200px) {
  .exp-hero-content,
  .exp-grid-container,
  .exp-editorial-container,
  .exp-gallery-container,
  .exp-related-container {
    padding: 0 60px;
  }

  /* La colonne de lecture (820 px), la photo flottante et la gouttière sont
     toutes en clamp : elles s'adaptent à ≤1200 sans rien resynchroniser.
     Seul le rabat du watermark est retouché. */
  .exp-editorial-num {
    font-size: 88px;
    left: 28px;
    top: -20px;
  }
}

@media (max-width: 1024px) {
  .exp-masonry {
    columns: 2;
  }
}

@media (max-width: 768px) {
  .exp-hero {
    min-height: 100vh;
    padding-top: 100px;
  }

  .exp-hero-content {
    padding: 0 20px 60px;
  }

  .exp-breadcrumb {
    top: 80px;
    left: 20px;
    font-size: 10px;
  }

  .exp-intro {
    padding: var(--spacing-lg) 20px;
  }

  .exp-intro-text {
    columns: 1;
  }

  .exp-intro--cluster.exp-intro--editorial {
    padding: 72px 0;
  }

  .exp-intro--cluster.exp-intro--editorial .exp-intro-container {
    padding: 0 24px;
  }

  .exp-intro--cluster.exp-intro--editorial .exp-intro-title {
    margin-bottom: 56px;
  }

  .exp-intro--cluster.exp-intro--editorial .exp-intro-title::before {
    margin-bottom: 24px;
  }

  .exp-cluster-block {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 36px 0;
  }

  .exp-cluster-block:hover::before {
    width: 56px;
  }

  .exp-cluster-num {
    font-size: 36px;
    margin-bottom: 4px;
  }

  .exp-cluster-block-head {
    padding-top: 0;
  }

  .exp-cluster-eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .exp-cluster-block-body {
    padding-top: 4px;
  }

  .exp-cluster-block-body ol {
    gap: 22px;
  }

  .exp-cluster-block-body ol li {
    padding-left: 52px;
  }

  .exp-cluster-block-body ol li + li {
    padding-top: 22px;
  }

  .exp-cluster-block-body ol li::before {
    font-size: 22px;
  }

  .exp-cluster-block-body ol li + li::before {
    top: 22px;
  }

  .exp-cluster-block-body ol li strong {
    font-size: 17px;
  }

  .exp-hero-content,
  .exp-grid-container,
  .exp-editorial-container,
  .exp-gallery-container,
  .exp-related-container {
    padding: 0 20px;
  }

  .exp-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .exp-editorial-block {
    margin-bottom: 80px;
  }

  /* Mobile : PAS de float. Photo pleine largeur en haut (full-bleed aux
     bords du container), texte dessous. Fini la carte blanche -> fini le
     chevauchement -32 px (il n'avait de sens qu'avec la carte : sans fond,
     le texte serait posé sur la photo, illisible). */
  .exp-editorial-image {
    float: none;
    width: auto;
    height: clamp(220px, 36vh, 300px);
    margin: 0 -20px 28px;
    border-radius: 0;
  }

  .exp-editorial-block:nth-child(even) .exp-editorial-image {
    float: none;
    margin: 0 -20px 28px;
  }

  .exp-editorial-text {
    margin: 0;
  }

  /* Interstitiel sans image : pleine largeur, pas de marge négative. */
  .exp-editorial-block:not(:has(.exp-editorial-image)) .exp-editorial-text {
    max-width: 100%;
  }

  .exp-editorial-num {
    font-size: 64px;
    left: 20px;
    top: -16px;
  }

  .exp-masonry {
    columns: 1;
  }

  .exp-related-grid {
    grid-template-columns: 1fr;
  }

  .exp-scroll-indicator {
    display: none;
  }
}