/* Charte SellingAtHome — socle commun repris des documentations (sellingathome-documentation/assets/sah.css) :
   polices auto-hébergées, couleurs, typographie, boutons, étiquettes. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("../fonts/open-sans.woff2") format("woff2");}
@font-face{font-family:"Fabfelt Script";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/fabfelt-script.woff") format("woff");}

:root {
  --paper:#F7F5FA; --surface:#EEE9F4; --card:#FFFFFF; --hero:#2B2237; --heading:#2B2237; --text:#2B2237;
  --muted:#665C7A; --accent:#79C6C0; --accent-ink:#1B736C; --accent-wash:#E4F3F1;
  --pink:#F29AC2; --pink-ink:#B4356F; --pink-wash:#FCE9F1; --yellow:#FFF265; --yellow-wash:#FFFBD6; --yellow-ink:#6B6100;
  --rule:#DED6EA; --on-hero:#F1ECF8; --on-hero-mut:#A99DBE; --focus:#1B736C;
  --logo-ink:var(--heading); --logo-at:#6C5E7F;
  /* Propres au site vitrine */
  --plum:#504067; --hero-deep:#211A2B; --lavender:#D3C9E2;
  --f-body:"Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display:"Fabfelt Script", "Segoe Script", "Brush Script MT", cursive;
  --wrap:1320px; --gutter:28px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin:0; background:#fff; color:var(--text); font-family:var(--f-body); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; }
a { color:var(--accent-ink); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
h1,h2,h3,h4 { color:var(--heading); margin:0; text-wrap:balance; font-weight:700; }
h1, .h1 { font-size:clamp(2.1rem,4.4vw,3.1rem); line-height:1.12; letter-spacing:-0.022em; }
h2 { font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.2; letter-spacing:-0.012em; }
h3 { font-size:1.15rem; line-height:1.35; }
p { margin:0; }
ul, ol { margin:0; padding-left:1.3em; }
.script { font-family:var(--f-display); font-weight:400; font-size:1.3em; line-height:.9; letter-spacing:0; color:var(--accent-ink); }
.hl-pink { color:var(--pink); }

.skip { position:absolute; left:16px; top:-60px; z-index:100; background:var(--accent); color:#16101F; font-weight:700; padding:10px 16px; border-radius:100px; text-decoration:none; }
.skip:focus { top:12px; }

/* ---- Boutons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:700; font-size:.98rem; line-height:1.2; text-decoration:none; border:2px solid transparent; border-radius:100px; padding:11px 22px; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-accent { background:var(--accent); color:#16101F; }
.btn-accent:hover { background:#8FD6D0; }
.btn-pink { background:var(--pink); color:#2B2237; }
.btn-pink:hover { background:#F6B3D1; }
.btn-light { background:#fff; color:var(--heading); }
.btn-light:hover { background:var(--accent-wash); }
.btn-dark { background:var(--plum); color:#fff; }
.btn-dark:hover { background:var(--hero); }
.btn-soft { background:var(--plum); color:#fff; }
.btn-soft:hover { background:#5E4D78; }
.btn-outline { background:transparent; color:var(--accent-ink); border-color:var(--accent); }
.btn-outline:hover { background:var(--accent-wash); }
.btn-outline-pink { background:transparent; color:var(--pink-ink); border-color:var(--pink); }
.btn-outline-pink:hover { background:var(--pink-wash); }
.btns { display:flex; flex-wrap:wrap; gap:14px; }

/* ---- Étiquettes et titres de section ---- */
.eyebrow { display:inline-block; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-wash); border-radius:100px; padding:7px 16px; }
.tag { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-radius:100px; padding:5px 12px; color:var(--accent-ink); background:var(--accent-wash); text-decoration:none; line-height:1.4; }
a.tag:hover { background:var(--accent); color:#16101F; }
.tag.pink { color:var(--pink-ink); background:var(--pink-wash); }
.tag.yellow { color:var(--yellow-ink); background:var(--yellow-wash); }
.sec-head { display:flex; flex-direction:column; gap:8px; }
.sec-num { font-family:var(--f-display); font-size:2rem; color:var(--pink-ink); line-height:1; }
.muted { color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }