/* ============================================================
   DiagCouple — SEO landing pages
   Design system: "Le Miroir" — deux teintes qui convergent
   Ink:    #2B2438  (aubergine profond)
   Paper:  #FBF7F1  (papier chaud)
   Amber:  #B9812E  (chaleur, désir, croissance)
   Teal:   #3D6B70  (calme, recul, miroir)
   Line:   #E4DCCF
   ============================================================ */

:root{
  --ink:#2B2438;
  --ink-soft:#4A4258;
  --paper:#FBF7F1;
  --paper-dim:#F3ECE1;
  --amber:#B9812E;
  --amber-deep:#8F631F;
  --teal:#3D6B70;
  --teal-deep:#274A4E;
  --line:#E4DCCF;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--teal-deep);}
a:focus-visible, button:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}

.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

/* ---------- Skip link ---------- */
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:100;}
.skip-link:focus{left:12px; top:12px;}

/* ---------- Header ---------- */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.site-bar{
  max-width:760px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{
  font-family:var(--serif); font-weight:600; font-size:1.15rem; letter-spacing:-0.01em;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px;
}
.logo .mark{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--amber) 0 50%, var(--teal) 50% 100%);
  display:inline-block; flex:none;
}
.site-bar .cta-mini{
  font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em;
  background:var(--ink); color:var(--paper); padding:9px 16px; border-radius:100px;
  text-decoration:none; white-space:nowrap;
}
.site-bar .cta-mini:hover{background:var(--teal-deep);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.03em;
  color:var(--ink-soft); padding:18px 0 0; text-transform:none;
}
.breadcrumb a{color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--ink-soft);}
.breadcrumb a:hover{color:var(--teal-deep);}

/* ---------- Hero ---------- */
.hero{padding:28px 0 8px;}
.eyebrow{
  font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--amber-deep); margin:0 0 14px;
}
h1{
  font-family:var(--serif); font-weight:600; font-size:2.15rem; line-height:1.15;
  margin:0 0 18px; letter-spacing:-0.01em; color:var(--ink);
}
.hero .lede{font-size:1.12rem; color:var(--ink-soft); margin:0 0 22px; max-width:62ch;}

/* signature: the mirror line */
.mirror-line{
  height:5px; width:100%; max-width:220px; border-radius:3px; margin:22px 0 30px;
  background:linear-gradient(90deg, var(--amber) 0%, var(--amber) 46%, var(--teal) 54%, var(--teal) 100%);
}

/* ---------- CTA blocks ---------- */
.cta-block{
  background:var(--ink); color:var(--paper);
  border-radius:18px; padding:28px 26px; margin:38px 0;
}
.cta-block h2, .cta-block h3{color:var(--paper); font-family:var(--serif); margin-top:0;}
.cta-block p{color:#DCD5E4; margin-bottom:20px;}
.btn{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:0.98rem;
  padding:13px 26px; border-radius:100px; text-decoration:none; text-align:center;
  background:linear-gradient(100deg, var(--amber) 0%, var(--amber-deep) 100%); color:#241a0c;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-outline{
  background:transparent; border:1.5px solid #6a6178; color:var(--paper);
}
.cta-block .price-note{font-family:var(--mono); font-size:0.78rem; color:#B7AFC7; margin-top:14px;}

/* ---------- Content sections ---------- */
main{padding-bottom:20px;}
section.block{margin:40px 0;}
h2{
  font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--ink);
  margin:0 0 16px; letter-spacing:-0.005em;
}
h3{font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--ink); margin:22px 0 10px;}
p{margin:0 0 16px;}
ul.signs, ul.steps{margin:0 0 16px; padding:0; list-style:none;}
ul.signs li, ul.steps li{
  position:relative; padding:4px 0 4px 30px; margin-bottom:10px; color:var(--ink-soft);
}
ul.signs li::before{
  content:"—"; position:absolute; left:0; top:4px; color:var(--teal); font-family:var(--mono);
}
ul.steps{counter-reset:step;}
ul.steps li{counter-increment:step;}
ul.steps li::before{
  content:counter(step); position:absolute; left:0; top:2px; font-family:var(--mono); font-size:0.85rem;
  color:var(--amber-deep); border:1px solid var(--amber); width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; top:2px;
}

blockquote.quote{
  border-left:3px solid var(--teal); margin:24px 0; padding:4px 0 4px 20px;
  font-family:var(--serif); font-size:1.1rem; font-style:italic; color:var(--ink);
}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line); padding:18px 0;}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-item summary{
  font-family:var(--serif); font-weight:600; font-size:1.05rem; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--mono); color:var(--amber-deep); flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:12px; color:var(--ink-soft);}

/* ---------- Related ---------- */
.related{background:var(--paper-dim); border-radius:16px; padding:22px 24px; margin:40px 0;}
.related h2{font-size:1.1rem;}
.related ul{margin:0; padding:0; list-style:none; display:grid; gap:10px;}
.related a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:0.96rem;
  display:block; padding:8px 0; border-bottom:1px dashed var(--line);
}
.related a:hover{color:var(--teal-deep);}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); margin-top:50px; padding:30px 0 50px; color:var(--ink-soft);}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;}
footer.site nav{display:flex; flex-wrap:wrap; gap:10px 18px;}
footer.site a{color:var(--ink-soft); text-decoration:none; font-size:0.88rem;}
footer.site a:hover{color:var(--teal-deep);}
footer.site .fine{font-family:var(--mono); font-size:0.75rem; width:100%; margin-top:10px; color:#9a92a8;}

@media (max-width:600px){
  h1{font-size:1.7rem;}
  .site-bar .cta-mini{padding:8px 12px; font-size:0.7rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
}