/*
 ═══════════════════════════════════════════════════════
  HOMEPAGE — front-page.css
  Inclus via front-page.php ou enqueue conditionnel
 ═══════════════════════════════════════════════════════
*/

/* ── HERO ── */
.hero {
  min-height: 100vh;
  background: var(--brun3);
  display: grid;
  grid-template-columns: 1fr 460px;
  position: relative;
  overflow: hidden;
}

/* Grain de fond */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.048'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.arch-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.arch-lines svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__deco-c {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.07);
  pointer-events: none;
  z-index: 1;
}
.hero__deco-c--lg { width: 600px; height: 600px; top: 50%; right: 80px; transform: translateY(-50%); }
.hero__deco-c--sm { width: 300px; height: 300px; top: 20%; right: 200px; }

.hero__left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 80px 100px 72px;
}

.hero__tag {
  margin-bottom: 52px;
}

.hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 6.2vw, 84px);
  line-height: 1.06;
  color: var(--creme);
  font-weight: 400;
  letter-spacing: -.025em;
}
.hero__h1 em {
  font-style: italic;
  color: rgba(247,241,228,.26);
  display: block;
}

.hero__name {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--or);
  font-family: var(--font-body);
  font-weight: 400;
  margin-top: 38px;
  margin-bottom: 18px;
}

.m-or-line {
  margin-bottom: 34px;
}

.hero__tagline {
  font-size: 15px;
  color: var(--txt-secondary);
  max-width: 400px;
  line-height: 1.92;
  font-weight: 300;
  margin-bottom: 56px;
}

.hero__baseline {
  position: absolute;
  bottom: 48px;
  left: 72px;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--txt-subtle);
  letter-spacing: .3px;
}

/* Photo droite */
.hero__right {
  position: relative;
  z-index: 2;
  background: rgba(20,10,5,.6);
  overflow: hidden;
}
.hero__letter {
  position: absolute;
  bottom: -60px;
  right: -20px;
  font-family: var(--font-display);
  font-size: 420px;
  font-weight: 400;
  font-style: italic;
  color: rgba(247,241,228,.02);
  line-height: 1;
  pointer-events: none;
}
.hero__photo-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(.9) contrast(1.02);
}
.hero__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(18,10,6,.52) 0%,
    rgba(18,10,6,.12) 50%,
    rgba(18,10,6,.0) 100%
  );
  pointer-events: none;
}

/* Séparateur vertical hero */
.hero__sep {
  position: absolute;
  left: calc(100% - 460px);
  top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,162,39,.14) 30%, rgba(201,162,39,.14) 70%, transparent);
  z-index: 3;
}

/* ── CHIFFRES ── */
.chiffres {
  background: var(--vert);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.chiffres::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.06);
  pointer-events: none;
}
.chiffres::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.05);
  pointer-events: none;
}
.chiffres__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.chiffre-bloc {
  padding: 0 48px;
  border-right: 1px solid rgba(247,241,228,.07);
}
.chiffre-bloc:first-child { padding-left: 0; }
.chiffre-bloc:last-child  { border-right: none; }

.chiffre-val {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 62px);
  font-weight: 400;
  font-style: italic;
  color: var(--creme);
  line-height: 1;
  margin-bottom: 10px;
}
.chiffre-val sup {
  font-size: .42em;
  vertical-align: super;
  color: var(--or);
  font-style: normal;
}
.chiffre-label {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(247,241,228,.72);
  line-height: 1.8;
}

/* ── POSITIONNEMENT ── */
.positionnement {
  background: var(--creme);
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}
.positionnement::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(28,15,10,.04) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(28,15,10,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.pos-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 72px;
  position: relative;
  z-index: 1;
}
.pos-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 100px;
}
.pos-intro__left .m-tag { margin-bottom: 22px; }
.pos-intro__left h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--brun);
  letter-spacing: -.02em;
}
.pos-intro__left h2 em {
  font-style: italic;
  color: rgba(28,15,10,.3);
}
.pos-intro__right p {
  font-size: 15px;
  color: var(--txt-dark-secondary);
  line-height: 1.95;
  max-width: 420px;
}
.pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(28,15,10,.09);
}
.pos-card {
  padding: 56px 44px 56px 0;
  border-right: 1px solid rgba(28,15,10,.09);
  transition: background .35s, padding-left .3s;
  position: relative;
}
.pos-card:nth-child(2) { padding-left: 44px; }
.pos-card:nth-child(3) { padding-left: 44px; border-right: none; }
.pos-card:hover { background: rgba(28,15,10,.025); padding-left: 8px; }
.pos-card:nth-child(2):hover,
.pos-card:nth-child(3):hover { padding-left: 52px; }

.pos-n {
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 400;
  font-style: italic;
  color: rgba(28,15,10,.05);
  line-height: 1;
  margin-bottom: 18px;
}
.pos-bar {
  width: 28px;
  height: 2px;
  background: var(--or);
  margin-bottom: 22px;
  transition: width .4s ease;
}
.pos-card:hover .pos-bar { width: 52px; }
.pos-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 14px;
  line-height: 1.2;
  color: var(--brun);
}
.pos-card p {
  font-size: 14px;
  color: var(--txt-dark-secondary);
  line-height: 1.9;
}

/* ── APPROCHE ── */
.approche {
  background: var(--brun2);
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}
.approche::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-55deg, transparent, transparent 80px, rgba(201,162,39,.018) 80px, rgba(201,162,39,.018) 81px);
  pointer-events: none;
}
.approche__wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 72px;
  position: relative;
  z-index: 1;
}
.approche__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 96px;
}
.approche__header .m-tag { margin-bottom: 22px; }
.approche__header h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--creme);
  letter-spacing: -.02em;
}
.approche__header h2 em {
  font-style: italic;
  color: rgba(247,241,228,.28);
}
.approche__header p {
  font-size: 15px;
  color: var(--txt-secondary);
  line-height: 1.95;
  max-width: 420px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(247,241,228,.07);
}
.step {
  padding: 52px 48px 52px 0;
  border-right: 1px solid rgba(247,241,228,.07);
  position: relative;
}
.step:nth-child(2) { padding-left: 48px; }
.step:nth-child(3) { padding-left: 48px; border-right: none; }

.step__num {
  font-size: 9.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--or);
  display: block;
  margin-bottom: 20px;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--creme);
  margin-bottom: 14px;
  line-height: 1.2;
}
.step p {
  font-size: 14px;
  color: var(--txt-secondary);
  line-height: 1.9;
}

/* ── EXPERTISE ── */
.expertise {
  background: var(--brun3);
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}
.expertise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(48deg, transparent, transparent 120px, rgba(201,162,39,.012) 120px, rgba(201,162,39,.012) 121px);
  pointer-events: none;
}
.exp__wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 72px;
  position: relative;
  z-index: 1;
}
.exp__header {
  margin-bottom: 80px;
}
.exp__header .m-tag { margin-bottom: 22px; }
.exp__header h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  color: var(--creme);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.exp__header h2 em {
  font-style: italic;
  color: rgba(247,241,228,.28);
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(247,241,228,.06);
}
.exp-item {
  padding: 44px 36px 44px 0;
  border-right: 1px solid rgba(247,241,228,.06);
  border-bottom: 1px solid rgba(247,241,228,.06);
  position: relative;
  overflow: hidden;
  transition: background .3s;
}
.exp-item:nth-child(3n) { border-right: none; }
.exp-item:nth-child(4),
.exp-item:nth-child(5),
.exp-item:nth-child(6) { border-bottom: none; }
.exp-item:not(:nth-child(3n+1)) { padding-left: 36px; }
.exp-item:hover { background: rgba(247,241,228,.03); }

.exp-item__n {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  font-style: italic;
  color: rgba(247,241,228,.04);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}
.exp-item h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--creme);
  margin-bottom: 8px;
  line-height: 1.2;
}
.exp-item__sub {
  font-size: 12px;
  color: rgba(247,241,228,.68);
  letter-spacing: .5px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.exp-item__hint {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(201,162,39,.7);
  display: block;
  transition: color .2s;
}
.exp-item:hover .exp-item__hint { color: var(--or); }

/* Detail au survol */
.exp-item__detail {
  position: absolute;
  inset: 0;
  background: rgba(18,10,6,.97);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.exp-item:hover .exp-item__detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.exp-item__detail h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--or);
  margin-bottom: 18px;
  letter-spacing: .3px;
}
.exp-item__detail ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-item__detail li {
  font-size: 13px;
  color: var(--txt-secondary);
  line-height: 1.65;
  padding-left: 14px;
  position: relative;
}
.exp-item__detail li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--or);
}

/* ── CONTACT CTA ── */
.contact-cta {
  background: var(--brun);
  padding: 160px 0;
  position: relative;
  overflow: hidden;
}
.contact-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-52deg, transparent, transparent 80px, rgba(201,162,39,.018) 80px, rgba(201,162,39,.018) 81px);
  pointer-events: none;
}
.contact-cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.contact-cta__left .m-tag { margin-bottom: 32px; }
.contact-cta__left h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 62px);
  font-weight: 400;
  line-height: 1.06;
  color: var(--creme);
  margin-bottom: 28px;
  letter-spacing: -.025em;
}
.contact-cta__left h2 em {
  font-style: italic;
  color: rgba(247,241,228,.26);
}
.contact-cta__left p {
  font-size: 15px;
  color: var(--txt-secondary);
  line-height: 1.9;
  max-width: 380px;
  margin-bottom: 40px;
}

/* Détails contact */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-detail {
  padding: 26px 0;
  border-bottom: 1px solid rgba(247,241,228,.07);
}
.contact-detail:first-child { border-top: 1px solid rgba(247,241,228,.07); }
.contact-detail dt {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px;
}
.contact-detail dd {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: var(--creme);
}
.contact-detail dd a {
  color: var(--creme);
  text-decoration: none;
  transition: color .2s;
}
.contact-detail dd a:hover { color: var(--or); }
.contact-detail__note {
  font-style: normal !important;
  font-size: 13px !important;
  color: var(--txt-muted) !important;
  letter-spacing: .3px !important;
}

/* ── RESPONSIVE HOMEPAGE ── */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero__right { display: none; }
  .hero__sep  { display: none; }
  .hero__left { padding: 140px 48px 100px; }
  .hero__baseline { left: 48px; }

  .chiffres__inner { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .chiffre-bloc:nth-child(2) { border-right: none; }
  .chiffre-bloc:nth-child(3) { border-right: 1px solid rgba(247,241,228,.07); border-top: 1px solid rgba(247,241,228,.07); }
  .chiffre-bloc:nth-child(4) { border-right: none; border-top: 1px solid rgba(247,241,228,.07); }

  .pos-intro { grid-template-columns: 1fr; gap: 40px; }
  .pos-grid  { grid-template-columns: 1fr; }
  .pos-card,
  .pos-card:nth-child(2),
  .pos-card:nth-child(3) { padding: 40px 0; border-right: none; border-bottom: 1px solid rgba(28,15,10,.09); }

  .approche__header { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; }
  .step,
  .step:nth-child(2),
  .step:nth-child(3) { padding: 40px 0; border-right: none; border-bottom: 1px solid rgba(247,241,228,.07); }

  .exp-grid { grid-template-columns: 1fr 1fr; }
  .exp-item:nth-child(2n) { border-right: none; }
  .exp-item:nth-child(3),
  .exp-item:nth-child(4) { border-bottom: 1px solid rgba(247,241,228,.06); }
  .exp-item:nth-child(5),
  .exp-item:nth-child(6) { border-bottom: none; }

  .contact-cta__inner { grid-template-columns: 1fr; gap: 64px; }
}

@media (max-width: 768px) {
  .hero__left { padding: 130px 28px 80px; }
  .hero__baseline { left: 28px; bottom: 32px; }

  .chiffres__inner { grid-template-columns: 1fr; padding: 0 28px; }
  .chiffre-bloc { border-right: none !important; border-bottom: 1px solid rgba(247,241,228,.07); padding: 28px 0 !important; }

  .pos-wrap,
  .approche__wrap,
  .exp__wrap,
  .contact-cta__inner { padding-left: 28px; padding-right: 28px; }

  .exp-grid { grid-template-columns: 1fr; }
  .exp-item { border-right: none !important; border-bottom: 1px solid rgba(247,241,228,.06) !important; padding: 36px 0; }
  .exp-item:not(:nth-child(3n+1)) { padding-left: 0; }
}