/* ════════════════════════════════════════════
   PAGES EXPERTISE : s'appuie sur design-system + sections + nav
   ════════════════════════════════════════════ */

/* ── Fil d'ariane ── */
.xp-crumb {
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--lin2); margin-bottom: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.xp-crumb a { color: var(--lin2); text-decoration: none; transition: color .3s; }
.xp-crumb a:hover { color: var(--bordeaux); }
.xp-crumb .sep { opacity: .4; }
.xp-crumb .here { color: var(--cream2); }

/* ── Hero expertise ── */
.xp-hero {
  position: relative; overflow: hidden;
  padding: 132px 80px 96px; border-bottom: 1px solid var(--border);
}
.xp-kicker {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--bordeaux); margin-bottom: 30px;
  display: flex; align-items: center; gap: 18px; font-weight: 400;
}
.xp-kicker::after { content: ''; width: 40px; height: 1px; background: var(--bordeaux); opacity: .4; }
.xp-h1 {
  font-family: 'Bodoni Moda', serif; font-weight: 300;
  font-size: clamp(40px,6.4vw,92px); line-height: 1.0; letter-spacing: -.02em;
  max-width: 16ch;
}
.xp-h1 em { font-style: italic; color: var(--bordeaux); }
.xp-lead {
  margin-top: 38px; max-width: 640px; font-size: 17px; line-height: 1.85;
  color: var(--cream2); font-weight: 300;
  border-left: 1px solid var(--bordeaux); padding-left: 24px;
}
.xp-hero-cta { margin-top: 48px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.xp-hero-cta .lbl { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--lin2); }
.xp-lead strong { color: var(--bordeaux); font-weight: 400; }

/* ── Intro de section (réutilise .s-num / .s-title de sections.css) ── */
.xp-sec-lead { font-size: 16px; line-height: 1.85; color: var(--cream2); max-width: 600px; margin-top: 26px; font-weight: 300; }

/* ── Scénario avant / après ── */
.xp-scenario { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--border); margin-top: 64px; }
.xp-col { padding: 48px 44px; background: var(--bg2); position: relative; }
.xp-col.after { background: var(--bg3); }
.xp-col-tag { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 26px; display: flex; align-items: center; gap: 14px; font-weight: 400; }
.xp-col-tag::after { content: ''; width: 22px; height: 1px; }
.xp-col.before .xp-col-tag { color: var(--lin2); }
.xp-col.before .xp-col-tag::after { background: var(--lin2); opacity: .4; }
.xp-col.after .xp-col-tag { color: var(--bordeaux); }
.xp-col.after .xp-col-tag::after { background: var(--bordeaux); opacity: .5; }
.xp-col ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.xp-col li { font-size: 14px; line-height: 1.6; color: var(--cream2); font-weight: 300; padding-left: 24px; position: relative; }
.xp-col.before li::before { content: '×'; position: absolute; left: 0; color: var(--lin2); font-family: 'Bodoni Moda', serif; }
.xp-col.after li::before { content: '✦'; position: absolute; left: 0; color: var(--bordeaux); font-size: 9px; top: 4px; }
.xp-col.after li { color: var(--cream); }

/* ── Sur-mesure : situations précises (citations client → réponse) ── */
.xp-quotes { margin-top: 56px; border: 1px solid var(--border); }
.xp-quote { display: grid; grid-template-columns: 1.05fr 1fr; border-bottom: 1px solid var(--border); transition: background .3s; }
.xp-quote:last-child { border-bottom: none; }
.xp-quote:hover { background: var(--bg3); }
.xp-quote-col { padding: 38px 40px; }
.xp-quote-said { border-right: 1px solid var(--border); }
.xp-q-lbl { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 18px; font-weight: 400; }
.xp-quote-said .xp-q-lbl { color: var(--lin2); }
.xp-quote-do .xp-q-lbl { color: var(--bordeaux); }
.xp-quote-said p { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 19px; line-height: 1.5; color: var(--cream); }
.xp-quote-do p { font-size: 14px; line-height: 1.78; color: var(--cream2); font-weight: 300; }
.xp-quote-do strong { color: var(--cream); font-weight: 500; }
.xp-quote.spec { background: rgba(160,48,48,.05); }
.xp-quote.spec .xp-quote-said { border-left: 2px solid var(--bordeaux); }
.xp-spec-note {
  margin-top: 44px; max-width: 880px;
  font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.3vw, 30px); line-height: 1.5; color: var(--cream);
}
.xp-spec-note strong { color: var(--bordeaux); font-weight: 300; }

/* ── FAQ (schema FAQPage) ── */
.xp-faq { margin-top: 8px; }
.xp-faq-item { padding: 30px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: .9fr 1.4fr; gap: 48px; align-items: start; }
.xp-faq-item:first-child { border-top: 1px solid var(--border); }
.xp-faq-q { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.3; color: var(--cream); }
.xp-faq-a { font-size: 14px; line-height: 1.85; color: var(--cream2); font-weight: 300; }
.xp-faq-a strong { color: var(--cream); font-weight: 500; }
@media (max-width: 860px) { .xp-faq-item { grid-template-columns: 1fr; gap: 14px; } }

/* ── Maillage interne "Voir aussi" ── */
.xp-related { margin-top: 64px; border-top: 1px solid var(--border); padding-top: 36px; }
.xp-related-label { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--lin2); margin-bottom: 22px; }
.xp-related-links { display: flex; flex-wrap: wrap; gap: 14px; }
.xp-related-links a { font-size: 12px; color: var(--cream2); text-decoration: none; border: 1px solid var(--border2); padding: 10px 18px; transition: color .3s, border-color .3s; cursor: none; }
.xp-related-links a:hover { color: var(--bordeaux); border-color: var(--bordeaux); }

/* ── CTA secondaire "ou écrivez-nous" ── */
.xp-cta-alt { display: inline-block; margin-top: 16px; font-size: 11px; letter-spacing: .1em; color: var(--cream2); text-decoration: underline; text-underline-offset: 3px; cursor: none; }
.xp-cta-alt:hover { color: var(--bordeaux); }
.xp-final .xp-cta-alt { color: rgba(237,229,214,.8); }
.xp-final .xp-cta-alt:hover { color: var(--cream); }
@media (max-width: 860px) {
  .xp-quote { grid-template-columns: 1fr; }
  .xp-quote-said { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Le classique (base discrète) ── */
.xp-basics { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); }
.xp-basic { padding: 26px 26px; background: var(--bg3); }
.xp-basic-h { display: flex; align-items: baseline; gap: 11px; font-size: 13.5px; color: var(--cream); font-weight: 500; margin-bottom: 8px; letter-spacing: .01em; }
.xp-basic-h::before { content: '✦'; color: var(--bordeaux); font-size: 8px; flex: none; }
.xp-basic p { font-size: 12.5px; color: var(--cream2); line-height: 1.6; font-weight: 300; padding-left: 19px; }
@media (max-width: 860px) { .xp-basics { grid-template-columns: 1fr; } }

/* ── CTA de fin ── */
.xp-final { background: var(--bordeaux); padding: 110px 80px; text-align: center; position: relative; overflow: hidden; }
.xp-final h2 { font-family: 'Bodoni Moda', serif; font-weight: 300; font-size: clamp(30px,4vw,56px); line-height: 1.15; color: var(--cream); max-width: 760px; margin: 0 auto; }
.xp-final h2 em { font-style: italic; color: rgba(237,229,214,.6); }
.xp-final p { font-size: 14px; line-height: 1.8; color: rgba(237,229,214,.75); margin: 22px auto 40px; max-width: 480px; }
.btn-light {
  display: inline-block; padding: 18px 52px; background: var(--cream); color: var(--bordeaux);
  font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; position: relative; overflow: hidden; transition: color .4s; cursor: none;
}
.btn-light::before { content: ''; position: absolute; inset: 0; background: var(--bg); transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.77,0,.18,1); z-index: 0; }
.btn-light:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-light:hover { color: var(--cream); }
.btn-light span { position: relative; z-index: 1; }

/* ── Sommaire /expertises ── */
.xp-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--border); margin-top: 64px; }
.xp-card { display: block; padding: 56px 48px; background: var(--bg2); text-decoration: none; color: inherit; position: relative; transition: background .35s, transform .35s; }
.xp-card:hover { background: var(--bg3); transform: translateY(-3px); }
.xp-card::after { content: '+'; position: absolute; top: 22px; right: 26px; font-size: 16px; color: var(--lin2); opacity: .4; transition: transform .4s, color .3s, opacity .3s; }
.xp-card:hover::after { transform: rotate(45deg); color: var(--bordeaux2); opacity: 1; }
.xp-card-stitch { position: absolute; inset: 10px; border: 1px dashed rgba(237,229,214,.12); pointer-events: none; transition: border-color .4s; }
.xp-card:hover .xp-card-stitch { border-color: rgba(160,48,48,.45); }
.xp-card-sector { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 22px; }
.xp-card h3 { font-family: 'Bodoni Moda', serif; font-weight: 300; font-style: italic; font-size: 32px; color: var(--cream); margin-bottom: 16px; line-height: 1.1; }
.xp-card p { font-size: 14px; line-height: 1.75; color: var(--cream2); font-weight: 300; max-width: 42ch; }
.xp-card-go { display: inline-block; margin-top: 28px; padding-bottom: 7px; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--bordeaux); border-bottom: 1px solid rgba(160,48,48,.35); transition: color .3s, border-color .3s, letter-spacing .35s; }
.xp-card:hover .xp-card-go { color: var(--bordeaux2); border-color: var(--bordeaux2); letter-spacing: .32em; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .xp-hero { padding: 112px 48px 72px; }
}
@media (max-width: 860px) {
  .xp-hero { padding: 96px 24px 64px; }
  .xp-scenario { grid-template-columns: 1fr; }
  .xp-index-grid { grid-template-columns: 1fr; }
  .xp-proof { flex-direction: column; align-items: flex-start; }
  .xp-final { padding: 80px 24px; }
}
@media (max-width: 560px) {
  .xp-hero-cta { gap: 18px; }
  .btn-hc, .btn-light { display: block; text-align: center; }
}