/* Curateur privé Genève — feuille de style dédiée */

@font-face {
  font-family: "Aleo";
  src: url("fonts/aleo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aleo";
  src: url("fonts/aleo-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #0f254e;
  --navy-2: #1b3768;
  --ink: #1f2a3a;
  --muted: #5b6575;
  --line: #e3ded3;
  --gold: #c8a363;
  --gold-dark: #a8843f;
  --bg: #f7f5f0;
  --white: #ffffff;
  --serif: "Aleo", Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
  --gutter: 12vw;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
p { margin: 0 0 2.2vh; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.cp-eyebrow { text-align: left; }
h1, h2, h3 { margin: 0; }

/* En-tête */
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.4vh var(--gutter);
  background: var(--navy);
}
.cp-brand {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.cp-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5vh 2.5vw; }
.cp-header__cta {
  font-size: clamp(0.9rem, 0.95vw, 1rem);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
}
.cp-header__cta:hover { color: var(--gold); }
.cp-lang {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding-left: 2vw;
  border-left: 1px solid rgba(255, 255, 255, .3);
  font-size: clamp(0.8rem, 0.85vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cp-lang a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.cp-lang a:hover { color: var(--gold); }
.cp-lang a[aria-current="page"] { color: var(--white); }

/* Éléments communs */
.cp-eyebrow {
  margin: 0 0 2.5vh;
  font-size: clamp(0.75rem, 0.8vw, 0.9rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5vw;
  height: 1px;
  margin-right: 1vw;
  vertical-align: middle;
  background: var(--gold);
}
.cp-title {
  margin-bottom: 3.5vh;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 4.4rem);
  line-height: 1.1;
  color: var(--navy);
}
.cp-h2 {
  margin-bottom: 3vh;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 3rem);
  line-height: 1.15;
  color: var(--navy);
}
.cp-lead {
  font-size: clamp(1.1rem, 1.4vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink);
}
.cp-btn {
  display: inline-block;
  margin-top: 2vh;
  padding: 1.8vh 2.2vw;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 2px;
  transition: background .2s, color .2s;
}
.cp-btn:hover { background: var(--navy-2); }
.cp-btn--light { color: var(--navy); background: var(--white); border-color: var(--white); }
.cp-btn--light:hover { color: var(--navy); background: var(--bg); }
.cp-btn--ghost { color: var(--white); background: transparent; border-color: var(--white); }
.cp-btn--ghost:hover { color: var(--navy); background: var(--white); }

/* Emplacements photo (à remplacer par les images) */
.cp-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 1.2vw, rgba(15, 37, 78, .05) 1.2vw 2.4vw),
    #ebe6db;
  border: 1px dashed #c9c1b1;
}
.cp-photo::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(0.8rem, 0.9vw, 0.95rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-photo picture { display: block; height: 100%; }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cp-photo:has(img) { border: 0; background: none; }
.cp-photo:has(img)::after { content: none; }

/* Intro */
.cp-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 82vh;
}
.cp-intro__text {
  padding: 10vh 4vw 10vh var(--gutter);
  max-width: 58vw;
}
.cp-intro__text > p:not(.cp-eyebrow):not(.cp-lead) { color: var(--muted); max-width: 52ch; }
.cp-lead { max-width: 40ch; }
.cp-hero-visual { margin: 0; padding: 6vh var(--gutter) 6vh 0; }
.cp-hero-visual img { display: block; width: min(34vw, 68vh); height: auto; }

/* Service */
.cp-service {
  padding: 12vh var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cp-service__head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6vw;
  align-items: center;
  margin-bottom: 8vh;
}
.cp-h2--service { font-size: clamp(1.4rem, 2vw, 2.1rem); }
.cp-service__text p { color: var(--muted); max-width: 52ch; }
.cp-photo--service {
  aspect-ratio: 4 / 3;
  border-radius: 1.2vw;
  box-shadow: 0 2vh 5vh rgba(15, 37, 78, .18), 0 0.5vh 1.2vh rgba(15, 37, 78, .08);
}
.cp-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.cp-point {
  padding: 4vh 2vw 0 0;
  border-top: 2px solid var(--gold);
  margin-top: -1px;
  margin-right: 2vw;
}
.cp-point:last-child { margin-right: 0; }
.cp-point__title {
  margin-bottom: 1.5vh;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  color: var(--navy);
}
.cp-point p { margin: 0; font-size: clamp(0.95rem, 1vw, 1.05rem); color: var(--muted); }

/* Approche */
.cp-approach {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 6vw;
  align-items: start;
  padding: 12vh var(--gutter);
}
.cp-steps { margin: 2vh 0 0; padding: 0; list-style: none; counter-reset: step; }
.cp-step {
  position: relative;
  padding: 0 0 4vh 5vw;
  counter-increment: step;
}
.cp-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.3vw, 1.35rem);
  color: var(--gold-dark);
}
.cp-step__title {
  margin-bottom: 1vh;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  color: var(--navy);
}
.cp-step p { margin: 0; color: var(--muted); max-width: 52ch; }
.cp-distinct {
  position: sticky;
  top: 4vh;
  padding: 4vh 3vw;
  background: var(--white);
  border-left: 3px solid var(--gold);
}
.cp-distinct__title {
  margin-bottom: 3vh;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  color: var(--navy);
}
.cp-distinct__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3vh; }
.cp-distinct__list h4 {
  margin: 0 0 1vh;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  font-weight: 700;
  color: var(--navy);
}
.cp-distinct__list p { margin: 0; color: var(--muted); }

/* Contact */
.cp-contact {
  padding: 12vh var(--gutter);
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.cp-contact .cp-h2 { color: var(--white); }
.cp-contact p { max-width: 56ch; margin: 0 auto 2vh; color: rgba(255, 255, 255, .85); }
.cp-contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2vw; }

/* Questions fréquentes */
.cp-faq { padding: 12vh var(--gutter); }
.cp-faq__list { max-width: 64vw; border-top: 1px solid var(--line); }
.cp-faq__item { border-bottom: 1px solid var(--line); }
.cp-faq__item summary {
  position: relative;
  padding: 3vh 4vw 3vh 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.35vw, 1.4rem);
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.cp-faq__item summary::-webkit-details-marker { display: none; }
.cp-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: clamp(1.3rem, 1.6vw, 1.7rem);
  color: var(--gold-dark);
}
.cp-faq__item[open] summary::after { content: "−"; }
.cp-faq__item summary:hover { color: var(--navy-2); }
.cp-faq__item p { margin: 0 0 3vh; max-width: 70ch; color: var(--muted); }

/* Mobile */
@media (max-width: 768px) {
  :root { --gutter: 6vw; }
  .cp-eyebrow::before { width: 8vw; margin-right: 3vw; }
  .cp-intro { grid-template-columns: 1fr; min-height: 0; }
  .cp-intro__text { padding: 7vh var(--gutter) 5vh; max-width: none; }
  .cp-header { padding: 2.2vh 3vw 2.2vh 5vw; gap: 3vw; }
  .cp-brand { font-size: 4.3vw; }
  .cp-nav { flex-wrap: nowrap; align-items: center; gap: 4vw; }
  .cp-header__cta { font-size: 3.6vw; white-space: nowrap; }
  .cp-lang { margin-left: 5vw; gap: 2.5vw; padding-left: 0; border-left: 0; font-size: 3.3vw; }
  .cp-hero-visual { padding: 0 2vw 4vh; justify-self: center; }
  .cp-hero-visual img { width: 96vw; }
  .cp-photo--service { border-radius: 3vw; }
  .cp-btn { display: block; padding: 2vh 6vw; text-align: center; }
  .cp-service, .cp-approach, .cp-contact { padding: 8vh var(--gutter); }
  .cp-service__head { grid-template-columns: 1fr; gap: 4vh; margin-bottom: 5vh; }
  .cp-points { grid-template-columns: 1fr; border-top: 0; }
  .cp-point { margin: 0 0 4vh; padding: 3vh 0 0; }
  .cp-approach { grid-template-columns: 1fr; gap: 3vh; }
  .cp-step { padding-left: 12vw; }
  .cp-contact__actions { flex-direction: column; gap: 1.5vh; }
  .cp-distinct { position: static; padding: 4vh 6vw; }
  .cp-faq { padding: 8vh var(--gutter); }
  .cp-faq__list { max-width: none; }
  .cp-faq__item summary { padding-right: 10vw; }
}