/* Boussole émotionnelle — feuille de style des articles du guide */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#F8F4EC;
  --card:#FFFDF8;
  --ink:#2D2833;
  --muted:#6E6779;
  --faint:#736C82;
  --hairline:rgba(45,40,51,.08);
  --hairline-strong:rgba(45,40,51,.14);
  --sage:#3F8271;
  --sage-deep:#33685B;
  --sage-soft:rgba(63,130,113,.10);
  --lavande:#7B6FB4;
  --peche:#E9B68E;
  --shadow-soft:0 30px 70px -30px rgba(74,58,42,.22), 0 8px 22px -12px rgba(74,58,42,.10);
  --shadow-tiny:0 2px 10px -4px rgba(74,58,42,.14);
  --ease:cubic-bezier(.32,.72,0,1);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
}
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(40rem 26rem at 12% -8%, rgba(123,111,180,.10), transparent 62%),
    radial-gradient(44rem 28rem at 96% 4%, rgba(233,182,142,.13), transparent 60%);
}
a{ color:var(--sage-deep); text-underline-offset:3px; }
a:hover{ color:var(--ink); }
:focus-visible{ outline:2.5px solid var(--sage); outline-offset:3px; border-radius:.4rem; }
img{ max-width:100%; height:auto; }

h1, h2, h3{ font-family:var(--serif); font-weight:520; letter-spacing:-.015em; line-height:1.18; text-wrap:balance; }
h1{ font-size:clamp(2.1rem, 5vw, 3.1rem); font-weight:620; }
h2{ font-size:clamp(1.45rem, 3vw, 1.9rem); margin:2.6rem 0 .9rem; }
h3{ font-size:1.18rem; margin:1.8rem 0 .6rem; }
p{ text-wrap:pretty; }
p + p{ margin-top:1rem; }

/* ————— Ossature ————— */
.top{
  position:relative; z-index:2;
  max-width:52rem; margin:0 auto; padding:1.6rem 1.25rem 0;
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
}
.top a.marque{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:.95rem; color:var(--ink); text-decoration:none;
}
.top .logo{
  width:2rem; height:2rem; border-radius:999px; overflow:hidden;
  border:1px solid var(--hairline); flex:none;
}
.top .logo img{ display:block; width:100%; height:100%; object-fit:cover; }
.top nav{ margin-left:auto; font-size:.86rem; }

main{ position:relative; z-index:1; max-width:44rem; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
.chapeau{ font-size:1.12rem; color:var(--muted); margin-top:1.1rem; }
.meta{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,253,248,.7);
  border:1px solid var(--hairline); border-radius:999px;
  padding:.4rem 1rem; display:inline-block; margin-bottom:1.3rem;
}
article > h2:first-of-type{ margin-top:2.2rem; }
article ul, article ol{ padding-left:1.3rem; margin-top:.8rem; display:flex; flex-direction:column; gap:.5rem; }
article li{ padding-left:.2rem; }
blockquote{
  margin:1.4rem 0; padding:1.1rem 1.3rem;
  background:var(--card); border:1px solid var(--hairline);
  border-left:3px solid var(--sage); border-radius:0 1rem 1rem 0;
  font-size:.96rem; color:#4A4453;
}

/* ————— Encarts ————— */
.encart{
  margin:1.8rem 0; padding:1.4rem 1.5rem;
  border-radius:1.4rem; font-size:.95rem;
}
.encart strong{ display:block; margin-bottom:.3rem; }
.encart.doux{ background:var(--sage-soft); border:1px solid rgba(63,130,113,.16); color:#2F5A4F; }
.encart.attention{ background:rgba(233,182,142,.14); border:1px solid rgba(202,141,90,.22); color:#6E5236; }

/* ————— Appel vers le test ————— */
.cta{
  margin:2.6rem 0 1rem; padding:2rem 1.8rem;
  background:var(--card); border:1px solid var(--hairline);
  border-radius:1.8rem; box-shadow:var(--shadow-soft); text-align:center;
}
.cta h2{ margin:0 0 .5rem; font-size:1.5rem; }
.cta p{ color:var(--muted); font-size:.95rem; max-width:28rem; margin:0 auto; }
.bouton{
  display:inline-flex; align-items:center; gap:.8rem;
  margin-top:1.3rem; padding:.75rem .8rem .75rem 1.6rem;
  border-radius:999px; text-decoration:none;
  font-weight:700; font-size:1rem;
  background:linear-gradient(160deg, #47907D, var(--sage-deep)); color:#FDFBF6;
  box-shadow:0 18px 38px -16px rgba(51,104,91,.55), inset 0 1px 1px rgba(255,255,255,.28);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.bouton:hover{ color:#FDFBF6; box-shadow:0 22px 44px -16px rgba(51,104,91,.65), inset 0 1px 1px rgba(255,255,255,.28); }
.bouton:active{ transform:scale(.97); }
.bouton span{
  width:2.1rem; height:2.1rem; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center;
  transition:transform .6s var(--ease);
}
.bouton:hover span{ transform:translate(3px,-1px) scale(1.06); }

/* ————— Liens entre articles ————— */
.autres{ margin-top:3rem; }
.autres h2{ font-size:1.3rem; }
.grille{ display:grid; grid-template-columns:1fr; gap:.8rem; margin-top:1.1rem; }
@media (min-width:640px){ .grille{ grid-template-columns:repeat(2,1fr); } }
.grille a{
  display:flex; align-items:center; gap:.8rem;
  padding:.9rem 1.1rem; border-radius:1.1rem;
  background:var(--card); border:1px solid var(--hairline);
  text-decoration:none; color:var(--ink); font-weight:600; font-size:.93rem;
  box-shadow:var(--shadow-tiny);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.grille a:hover{ border-color:rgba(63,130,113,.35); transform:translateY(-1px); }
.grille .puce{ font-size:1.2rem; flex:none; }

footer{
  position:relative; z-index:1;
  border-top:1px solid var(--hairline); background:rgba(255,253,248,.5);
  text-align:center; padding:2.2rem 1.25rem 2.8rem;
  color:var(--faint); font-size:.8rem;
}
footer a{ color:var(--faint); }
footer p + p{ margin-top:.4rem; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}