/* Site vitrine HofLink : règles propres au site. La charte (couleurs, polices, boutons, cartes) vient de hoflink.css. */

/* ---------- Mise en page : menu à gauche (volet sur téléphone, barre fixe sur ordinateur) ---------- */
.s-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--hl-surface);border-bottom:1px solid var(--hl-line)}
.s-top .s-logo{margin-right:auto}
.s-burger{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--hl-line);border-radius:var(--hl-radius);font-weight:600}
.s-burger svg{width:22px;height:22px}
.s-logo{display:flex;align-items:center;gap:10px;font:700 21px var(--hl-title);color:var(--hl-brand);text-decoration:none}
.s-logo img{width:36px;height:36px}
.s-logo small{display:block;font:500 12px var(--hl-font);color:var(--hl-muted)}

.s-side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;background:var(--hl-surface);border-right:1px solid var(--hl-line);padding:20px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;transform:translateX(-105%);transition:transform .25s ease;visibility:hidden}
.s-side.open{transform:none;visibility:visible;box-shadow:0 0 40px rgba(0,0,0,.25)}
.s-shade{position:fixed;inset:0;z-index:30;background:rgba(20,30,24,.45);display:none}
.s-shade.open{display:block}
.s-close{align-self:flex-end;padding:6px 10px;font-weight:600;color:var(--hl-muted)}
.s-side .s-logo{padding:0 8px 18px}

.s-nav{display:flex;flex-direction:column;gap:2px}
.s-nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--hl-radius);color:var(--hl-ink);text-decoration:none;font-size:17px;font-weight:500}
.s-nav a svg{width:22px;height:22px;flex:none;color:var(--hl-brand)}
.s-nav a:hover{background:var(--hl-bg)}
.s-nav a[aria-current=page]{background:var(--hl-brand-soft);color:var(--hl-brand);font-weight:700}

.s-lang{display:flex;gap:6px;margin:18px 8px 6px}
.s-lang a{flex:1;text-align:center;padding:8px 0;border:1.5px solid var(--hl-line);border-radius:99px;font-weight:600;color:var(--hl-ink);text-decoration:none;font-size:15px}
.s-lang a[aria-current=true]{background:var(--hl-ink);color:var(--hl-bg);border-color:var(--hl-ink)}
.s-lang-top{display:flex;gap:4px}
.s-lang-top a{padding:6px 8px;border-radius:8px;font-weight:700;font-size:14px;color:var(--hl-muted);text-decoration:none}
.s-lang-top a[aria-current=true]{background:var(--hl-brand-soft);color:var(--hl-brand)}
.s-login{margin:auto 8px 0;padding-top:18px}
.s-login .btn{background:var(--hl-accent);color:#1f2a22;margin-top:0;width:100%;min-width:0}
.s-login p{font-size:14px;color:var(--hl-muted);margin:8px 2px 0}

.s-main{max-width:880px;margin:0 auto;padding:26px 18px 40px}
@media (min-width:900px){
  .s-top,.s-burger,.s-close,.s-shade{display:none!important}
  .s-side{transform:none;visibility:visible;width:260px;transition:none}
  .s-main{margin-left:260px;margin-right:0;padding:44px 52px 56px;max-width:none}
  .s-main>*{max-width:900px}
}
@media (prefers-reduced-motion:reduce){.s-side{transition:none}}

/* ---------- Contenu ---------- */
.s-hero h1{font-size:34px;line-height:1.15;margin-bottom:12px}
@media (min-width:900px){.s-hero h1{font-size:44px}}
.s-words{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.s-words li{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;background:var(--hl-brand-soft);color:var(--hl-brand);font-weight:700;font-size:16px}
.s-words li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hl-accent)}
.s-lead{font-size:19px;line-height:1.5;margin-bottom:6px}
.s-hero .btn{margin-right:10px}
.s-pic{display:block;width:100%;height:auto;border-radius:22px;margin:22px 0 6px}
.s-sec{margin-top:40px}
.s-sec>h2{font-size:25px;font-weight:700;margin:0 0 6px}
.s-sec>p.mut{font-size:17px}

.s-grid{display:grid;gap:14px;margin-top:16px}
@media (min-width:640px){.s-grid{grid-template-columns:1fr 1fr}}
.s-grid .card{margin-top:0;display:flex;gap:14px;align-items:flex-start}
.s-grid .card h3{margin:2px 0 4px;font-size:18px}
.s-grid .card p{margin:0;color:var(--hl-muted);font-size:16px}
.s-ic{width:46px;height:46px;flex:none;border-radius:14px;background:var(--hl-brand-soft);color:var(--hl-brand);display:grid;place-items:center}
.s-ic svg{width:24px;height:24px}

.s-steps{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
@media (min-width:760px){.s-steps{grid-template-columns:repeat(3,1fr)}}
.s-steps li{background:var(--hl-surface);border:1px solid var(--hl-line);border-radius:14px;padding:16px}
.s-steps b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--hl-accent);color:#1f2a22;font:700 19px var(--hl-title);margin-bottom:8px}
.s-steps h3{margin:0 0 4px;font-size:18px}
.s-steps p{margin:0;color:var(--hl-muted);font-size:16px}

.s-quote{margin:26px 0 0;padding:18px 20px;border-left:5px solid var(--hl-accent);background:var(--hl-accent-soft);border-radius:0 14px 14px 0;font:500 20px/1.4 var(--hl-title)}

.s-plans{display:grid;gap:14px;margin-top:16px}
@media (min-width:760px){.s-plans{grid-template-columns:repeat(3,1fr)}}
.s-plan{background:var(--hl-surface);border:1.5px solid var(--hl-line);border-radius:16px;padding:18px;display:flex;flex-direction:column}
.s-plan.top{border-color:var(--hl-brand);box-shadow:0 0 0 3px var(--hl-brand-soft)}
.s-plan h3{margin:0;font-size:21px}
.s-price{font:700 30px var(--hl-title);margin:8px 0 0}
.s-price small{font:500 15px var(--hl-font);color:var(--hl-muted)}
.s-plan .mut{margin:2px 0 10px}
.s-plan ul{margin:6px 0 0;padding:0;list-style:none}
.s-plan li{padding:6px 0 6px 26px;position:relative;font-size:16px}
.s-plan li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:7px;border-left:3px solid var(--hl-brand);border-bottom:3px solid var(--hl-brand);transform:rotate(-45deg)}

.s-offer{margin-top:18px;background:var(--hl-brand);color:var(--hl-on-brand);border-radius:18px;padding:22px}
.s-offer h2{color:inherit;margin:0 0 8px;font-size:24px}
.s-offer p{margin:0 0 8px}
.s-offer .btn{background:var(--hl-accent);color:#1f2a22}
.s-left{display:inline-block;margin-top:4px;padding:5px 12px;border-radius:99px;background:var(--hl-accent);color:#1f2a22;font-weight:700}

.s-faq details{background:var(--hl-surface);border:1px solid var(--hl-line);border-radius:12px;padding:14px 16px;margin-top:10px}
.s-faq summary{cursor:pointer;font-weight:600;font-size:17px}
.s-faq details p{margin:10px 0 0;color:var(--hl-muted)}

.s-foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--hl-line);color:var(--hl-muted);font-size:14px}
.s-foot a{color:var(--hl-muted)}
.s-foot p{margin:0 0 6px}

/* Page de choix de la langue (racine du site) */
.s-choose{max-width:440px;margin:0 auto;padding:12vh 20px 40px;text-align:center}
.s-choose h1{font-size:34px;color:var(--hl-brand);margin:12px 0 14px}
.s-choose .mut{margin:0 0 2px}
.s-choose-l{margin-top:18px}
.s-choose-l .btn{display:block;width:100%;margin:10px 0 0}

/* Téléphones étroits : barre du haut compacte, aucun débordement à droite */
@media (max-width:899px){
  .s-top .s-logo small{display:none}
  .s-top .s-logo{font-size:19px}
  .s-top .s-logo img{width:32px;height:32px}
}
@media (max-width:420px){
  .s-burger span{display:none}
  .s-lang-top a{padding:6px 6px}
  .s-hero h1{font-size:30px}
}
.s-main{min-width:0;overflow-wrap:break-word}
.s-pic+h2{margin-top:18px}
.s-badge{align-self:flex-start;margin-bottom:8px}
.s-sub{margin-top:4px}
.s-note{margin-top:14px}
.s-mail{margin-top:20px}
.s-mail p{font:700 22px var(--hl-title);margin:0;overflow-wrap:anywhere}