/* ═══════════════════════════════════════════════════════════════
   'Ana'Ana — Expertise pages — Layout éditorial
   Chaque service = une section autonome et distincte
   ═══════════════════════════════════════════════════════════════ */

/* ── INTRO HERO ENRICHIE ──────────────────────────────────────── */
.exp-hero {
  padding-top: calc(var(--nav-h) + 72px);
  padding-bottom: 0;
  background: var(--sable);
  position: relative;
  overflow: hidden;
}
.exp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  padding-bottom: 0;
}
.exp-hero__left { padding-bottom: 72px; }
.exp-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.exp-hero__breadcrumb a   { font-size: 11px; color: var(--anthracite-40); transition: color .2s; }
.exp-hero__breadcrumb a:hover { color: var(--bronze); }
.exp-hero__breadcrumb span { font-size: 11px; color: var(--anthracite-40); }
.exp-hero__breadcrumb strong { font-size: 11px; font-weight: 500; color: var(--bronze); }
.exp-hero__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 120px;
  line-height: 1;
  color: var(--terra);
  opacity: .08;
  position: absolute;
  top: var(--nav-h);
  right: 0;
  pointer-events: none;
  user-select: none;
}
.exp-hero__overline { margin-bottom: 18px; }
.exp-hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.06;
  color: var(--anthracite);
  margin-bottom: 24px;
}
.exp-hero__title em { color: var(--terra); } /* italique réservé aux citations/signatures — règle charte */
.exp-hero__sub {
  font-size: 15px;
  font-weight: 300;
  color: var(--anthracite-70);
  line-height: 1.78;
  max-width: 480px;
  margin-bottom: 36px;
}
.exp-hero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* Right: featured quote panel — même mise en page sur toutes les pages qui en ont une :
   pas de bloc plein, une forme organique réelle de la charte comme seul repère de couleur. */
.exp-hero__right {
  padding: 64px 56px;
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.exp-hero__right::before {
  content: '';
  position: absolute;
  left: 0; top: 56px; bottom: 56px;
  width: 3px;
  background: var(--bronze);
}
.exp-hero__quote-shape {
  position: absolute;
  bottom: -50px; right: -50px;
  width: 200px;
  height: auto;
  opacity: .35;
  transform: rotate(6deg);
  z-index: 0;
  pointer-events: none;
}
.exp-hero__quote, .exp-hero__quote-attr { position: relative; z-index: 1; }
.exp-hero__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.55;
  color: var(--anthracite);
  margin-bottom: 24px;
}
.exp-hero__quote em { color: var(--terra); font-style: normal; }
.exp-hero__quote-attr {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* ── NAV SERVICES (sticky anchor bar) ────────────────────────── */
.services-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: var(--blanc);
  border-bottom: 1px solid rgba(184,132,92,.15);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.services-nav::-webkit-scrollbar { display: none; }
.services-nav__inner {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  padding: 0 40px;
}
.services-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  font-size: 12px;
  font-weight: 400;
  color: var(--anthracite-70);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.services-nav__item:hover { color: var(--anthracite); border-bottom-color: rgba(184,132,92,.4); }
.services-nav__item.active { color: var(--terra); border-bottom-color: var(--terra); font-weight: 500; }
.services-nav__num {
  font-family: var(--font-serif);
  font-size: 10px;
  color: var(--bronze);
  opacity: .7;
}
.services-nav__sep { width: 1px; height: 20px; background: rgba(184,132,92,.2); flex-shrink: 0; }
.services-nav__cta {
  margin-left: auto;
  padding: 10px 20px;
  background: var(--terra);
  color: var(--blanc);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  flex-shrink: 0;
  transition: background .2s;
}
.services-nav__cta:hover { background: var(--terra-soft); }

/* ── SERVICE SECTIONS ─────────────────────────────────────────── */
/*
  Chaque service a :
  - sa propre zone de couleur de fond
  - un grand numéro typographique
  - une colonne de contenu large
  - une colonne de détails (livrables, méthode, durée)
  - un accent visuel unique (couleur de trait)
*/

.service-section {
  scroll-margin-top: calc(var(--nav-h) + 52px);
  position: relative;
  overflow: hidden;
}

/* Alternating backgrounds */
.service-section:nth-child(1) { background: var(--blanc); }
.service-section:nth-child(2) { background: var(--sable); }
.service-section:nth-child(3) { background: var(--blanc); }
.service-section:nth-child(4) { background: var(--sable); }

/* Accent color per service (left border + number) */
.service-section[data-accent="terra"]   { --s-accent: var(--terra); --s-accent-bg: var(--terra); }
.service-section[data-accent="bronze"]  { --s-accent: var(--bronze); --s-accent-bg: var(--bronze); }
.service-section[data-accent="sauge"]   { --s-accent: var(--sauge); --s-accent-bg: var(--sauge); }
.service-section[data-accent="dark"]    { --s-accent: var(--anthracite); --s-accent-bg: var(--anthracite); } /* accent anthracite : l'encadré de citation reprend la teinte de la section, comme pour les autres accents */
/* Exception ciblée : le bloc citation de Relations presse reprend l'anthracite de son accent.
   Texte du bloc déjà en blanc, donc lisibilité intacte — dérogation à la règle "jamais d'anthracite
   en fond", demandée explicitement pour cette section précise (pas les autres en accent "dark"). */
#relations-presse { --s-accent-bg: var(--anthracite); }

.service-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 480px;
}

/* Left: main content */
.service-main {
  padding: 80px 64px 80px 0;
  position: relative;
}
.service-main::after {
  content: '';
  position: absolute;
  top: 60px; bottom: 60px;
  right: 0;
  width: 1px;
  background: rgba(184,132,92,.15);
}

/* Big number */
.service-num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 96px;
  line-height: 1;
  color: var(--s-accent);
  opacity: .12;
  position: absolute;
  top: 52px; right: 24px;
  pointer-events: none;
  user-select: none;
  transition: opacity .3s;
}
.service-section:hover .service-num { opacity: .2; }

.service-main__overline {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--s-accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-main__overline::before {
  content: '';
  display: block;
  width: 24px; height: 1.5px;
  background: var(--s-accent);
  flex-shrink: 0;
}

.service-main__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  color: var(--anthracite);
  margin-bottom: 24px;
}
.service-main__title em { color: var(--s-accent); } /* italique réservé aux citations/signatures — règle charte */

.service-main__body {
  font-size: 15px;
  font-weight: 300;
  color: var(--anthracite-70);
  line-height: 1.82;
  margin-bottom: 32px;
  max-width: 480px;
}

.service-main__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.service-tag {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(184,132,92,.3);
  color: var(--s-accent);
  border-color: var(--s-accent);
  border-radius: 1px;
  opacity: .75;
  transition: opacity .2s, background .2s, color .2s;
}
.service-tag:hover { opacity: 1; background: var(--s-accent); color: var(--blanc); }

.service-main__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--s-accent);
  padding: 13px 26px;
  border-radius: 2px;
  transition: opacity .2s, transform .22s;
}
.service-main__cta:hover { opacity: .88; transform: translateY(-1px); }

/* Right: details panel */
.service-details {
  padding: 80px 0 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
}

.service-detail-block {}
.service-detail-block__title {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--anthracite-40);
  margin-bottom: 14px;
}
.service-deliverables {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-deliverable {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--anthracite-70);
  line-height: 1.55;
}
.service-deliverable::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--s-accent);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Meta info row */
.service-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(184,132,92,.12);
}
.service-meta-row:first-child { border-top: 1px solid rgba(184,132,92,.12); }
.service-meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--anthracite-40);
  min-width: 80px;
}
.service-meta-value {
  font-size: 13px;
  font-weight: 300;
  color: var(--anthracite);
}

/* Featured highlight box — couleur du bloc alignée sur l'accent du produit */
.service-highlight {
  background: var(--s-accent-bg, var(--terra)); /* repli Terracotta hors contexte data-accent (approche.html, a-propos.html) */
  padding: 28px 30px;
  position: relative;
}
.service-highlight::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  /* blanc semi-transparent (pas --s-accent) : le fond change selon le produit,
     un blanc neutre reste lisible sur les 3 teintes possibles */
  background: rgba(255,255,255,.55);
}
.service-highlight__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  margin-bottom: 10px;
}
.service-highlight__sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75); /* fixe, pour la même raison que ci-dessus */
}

/* ── SECTION SÉPARATRICE ─────────────────────────────────────── */
.services-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,132,92,.25), transparent);
  margin: 0 40px;
}

/* ── BLOC APPROCHE (en bas des pages internes) ───────────────── */
.exp-approach {
  background: var(--sable);
  padding: 88px 0;
}
.exp-approach__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.exp-approach__steps { display: flex; flex-direction: column; }
.exp-approach__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.12;
  color: var(--anthracite);
  margin-bottom: 8px;
}
.exp-approach__title em { color: var(--terra); } /* italique réservé aux citations/signatures — règle charte */
.exp-approach__sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--anthracite-70);
  line-height: 1.78;
  margin-bottom: 36px;
}

/* Liste de définitions (ex : « Cinq exigences ») — reprend les tons du composant .step */
.exigences-list { list-style: none; padding: 0; margin: 0; }
.exigences-list li {
  font-size: 14px;
  font-weight: 300;
  color: var(--anthracite-70);
  line-height: 1.7;
  padding: 14px 0;
  border-bottom: 1px solid rgba(44,44,44,0.1);
}
.exigences-list li:first-child { padding-top: 0; }
.exigences-list li strong { color: var(--anthracite); font-weight: 500; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .exp-hero__inner { grid-template-columns: 1fr; }
  .exp-hero__right { display: none; }
  .service-section__inner { grid-template-columns: 1fr; }
  .service-main { padding: 56px 0; }
  .service-main::after { display: none; }
  .service-details { padding: 0 0 56px; }
  .exp-approach__inner { grid-template-columns: 1fr; gap: 48px; }
  .services-nav__inner { padding: 0 20px; }
}
@media (max-width: 768px) {
  .service-main { padding: 48px 0; }
  .service-num { font-size: 64px; }
  .exp-hero__title { font-size: 36px; }
}