/* Charte propre au site allemand : blanc froid, encre marine, un seul accent
   ambre, sérif en titrage, mise en page en bandes texte/photo. Rien de la
   charte turquoise et corail du site principal. */
:root{
  --bg:oklch(0.99 0.003 240);
  --ink:oklch(0.24 0.035 262);
  --ink-2:oklch(0.42 0.03 262);
  --muted:oklch(0.55 0.02 262);
  --line:oklch(0.90 0.008 250);
  --amber:oklch(0.78 0.15 78);
  --amber-ink:oklch(0.52 0.13 65);
  --amber-soft:oklch(0.96 0.04 85);
  --navy:oklch(0.24 0.035 262);
  --max:66rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 1.0625rem/1.7 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
a{color:var(--amber-ink);text-underline-offset:.2em}
img{max-width:100%;height:auto;display:block}

/* ---------- en-tête ---------- */
header.top{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 0;
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.brand b{font:700 1.125rem/1 Inter,sans-serif;letter-spacing:-.02em}
.brand b span{color:var(--amber-ink)}
.brand b i{font-style:normal;font-weight:400;color:var(--muted)}
.top nav a{font-size:.9375rem;color:var(--ink-2);text-decoration:none;margin-left:1.4rem}
.top nav a:hover{color:var(--amber-ink)}
.top nav .cta{color:var(--ink);font-weight:600;border-bottom:2px solid var(--amber)}
@media(max-width:40rem){.brand b i{display:none}.top nav a:not(.cta){display:none}.top nav a{margin-left:0}}

/* ---------- hero ---------- */
.hero{display:grid;gap:2.5rem;align-items:center;padding:3.5rem 0 2rem}
@media(min-width:56rem){.hero{grid-template-columns:1.05fr 1fr;gap:4rem;padding:4.5rem 0 3rem}}
h1{font:400 clamp(2.3rem, 1.4rem + 3.6vw, 3.9rem)/1.06 Fraunces,Georgia,serif;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 em{font-style:italic;color:var(--amber-ink)}
.lede{font-size:1.1875rem;color:var(--ink-2);margin:1.2rem 0 0;max-width:32rem;text-wrap:pretty}
.promise{margin:1.6rem 0 0;padding:1rem 1.2rem;background:var(--amber-soft);border-radius:4px;
  font-size:.9375rem;color:var(--ink-2)}
.promise strong{color:var(--ink)}
.hero figure{margin:0}
.hero img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:6px}
figcaption{font-size:.8125rem;color:var(--muted);margin:.5rem 0 0}

/* ---------- bandes texte / photo ---------- */
.band{display:grid;gap:2rem;align-items:start;padding:3.5rem 0;border-top:1px solid var(--line)}
@media(min-width:56rem){
  .band{grid-template-columns:1fr 1fr;gap:4rem;padding:4.5rem 0}
  .band.flip>figure{order:-1}
}
.band figure{margin:0;position:sticky;top:1.5rem}
.band img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:6px}
h2{font:400 clamp(1.7rem, 1.3rem + 1.2vw, 2.25rem)/1.15 Fraunces,Georgia,serif;
  letter-spacing:-.015em;margin:0 0 .9rem;text-wrap:balance}
h3{font:600 1.0625rem/1.35 Inter,sans-serif;margin:1.8rem 0 .4rem}
p{margin:0 0 1rem}
strong{font-weight:600;color:var(--ink)}
.full{padding:0 0 3.5rem}

/* ---------- tableaux ---------- */
.scroll{overflow-x:auto;margin:1.2rem 0 .4rem}
table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:28rem}
th{text-align:left;font-weight:600;color:var(--muted);padding:.5rem .65rem;
  border-bottom:2px solid var(--ink);white-space:nowrap;font-size:.875rem}
td{padding:.6rem .65rem;border-bottom:1px solid var(--line)}
td:first-child{font-weight:500;white-space:nowrap}
.tag{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.8125rem;font-weight:500}
.t-low{background:oklch(0.94 0.05 150);color:oklch(0.40 0.10 150)}
.t-mid{background:var(--amber-soft);color:var(--amber-ink)}
.t-high{background:oklch(0.95 0.04 25);color:oklch(0.48 0.16 25)}

/* ---------- listes et encadré ---------- */
ul{margin:.8rem 0 1rem;padding:0 0 0 1.15rem}
li{margin:0 0 .55rem;padding-left:.15rem}
li::marker{color:var(--amber-ink)}
.note{border-left:3px solid var(--amber);padding:.1rem 0 .1rem 1.1rem;margin:1.4rem 0;color:var(--ink-2)}
.note strong{color:var(--ink)}

/* ---------- guide ---------- */
.guide{background:var(--navy);color:oklch(0.96 0.01 262);border-radius:8px;
  padding:clamp(1.8rem,4vw,3rem);margin:1rem 0 0;display:grid;gap:2rem}
@media(min-width:56rem){.guide{grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center}}
.guide h2{color:#fff;margin-top:0}
.guide p{color:oklch(0.82 0.02 262)}
.guide ul{color:oklch(0.88 0.02 262)}
.guide li::marker{color:var(--amber)}
form{margin:0}
label{display:block;font-size:.9375rem;color:oklch(0.82 0.02 262);margin:0 0 .35rem}
input[type=email]{width:100%;padding:.85rem .95rem;background:oklch(0.30 0.035 262);color:#fff;
  border:1px solid oklch(0.40 0.03 262);border-radius:4px;font:inherit;font-size:1rem}
input[type=email]::placeholder{color:oklch(0.65 0.02 262)}
input[type=email]:focus-visible{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.consent{margin:.9rem 0 0;font-size:.8125rem;line-height:1.55;color:oklch(0.72 0.02 262)}
button{margin:1.2rem 0 0;width:100%;padding:.9rem 1rem;background:var(--amber);color:var(--navy);
  border:0;border-radius:4px;font:600 1rem Inter,sans-serif;cursor:pointer;transition:background .2s}
button:hover:not(:disabled){background:oklch(0.84 0.15 82)}
button:disabled{opacity:.55;cursor:default}
.msg{margin:.9rem 0 0;font-size:.9375rem;min-height:1.4rem}
.ok{color:var(--amber)}
.err{color:oklch(0.85 0.10 25)}

/* ---------- pied ---------- */
footer{margin:4rem 0 0;border-top:1px solid var(--line);padding:2rem 0 3rem;
  font-size:.875rem;color:var(--muted)}
footer h3{font-size:.9375rem;margin:1.6rem 0 .3rem;color:var(--ink)}
footer p{margin:0 0 .5rem}
footer .legal{margin-bottom:1.2rem;color:var(--ink)}
footer .legal a{margin-right:.2rem}
footer h3{scroll-margin-top:1rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- Ratgeber (accueil) ---------- */
.ratgeber{padding:3.5rem 0 3rem;border-top:1px solid var(--line)}
@media(min-width:56rem){.ratgeber{padding:4.5rem 0 3.5rem}}
.ratgeber>p{color:var(--ink-2);max-width:38rem}
.cards{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem}
@media(min-width:40rem){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:60rem){.cards{grid-template-columns:1fr 1fr 1fr}}
.cards li{margin:0;padding:0}
.cards a{display:block;height:100%;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:6px;
  text-decoration:none;color:var(--ink-2);transition:border-color .2s}
.cards a:hover{border-color:var(--amber)}
.cards b{display:block;font:400 1.25rem/1.25 Fraunces,Georgia,serif;color:var(--ink);margin:0 0 .4rem}
.cards span{display:block;font-size:.9375rem;line-height:1.55}

/* ---------- articles ---------- */
.crumbs{font-size:.875rem;color:var(--muted);margin:1.2rem 0 0}
.crumbs a{color:var(--muted)}
.post{max-width:46rem;padding:2rem 0 0}
.post h1{font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);line-height:1.1}
.post .lede{max-width:none;margin-top:1.1rem}
.post .meta{font-size:.875rem;color:var(--muted);margin:1rem 0 0}
.post figure{margin:2rem 0 1rem}
.post figure img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:6px}
.post h2{margin-top:2.8rem}
.post ol{margin:.8rem 0 1rem;padding:0 0 0 1.3rem}
.post .scroll table{min-width:34rem}
.post .wide table{min-width:54rem}
.faq,.more{margin-top:3.5rem;padding-top:.6rem;border-top:1px solid var(--line)}
.faq h3{font-size:1.0625rem;margin-top:1.6rem}
.more .cards{grid-template-columns:1fr}
@media(min-width:40rem){.more .cards{grid-template-columns:1fr 1fr}}