/* Hack The SEO — design system des pages de vente (repris de la page « SEO audit » de hacktheseo.com, 07/10/2026).
   Polices hébergées chez nous (fonts.css) : aucune requête vers Google. */
@import url(/assets/fonts/fonts.css);
.hts{ --fd:'DM Serif Text',Georgia,serif; --fu:'DM Sans',-apple-system,"Segoe UI",sans-serif; --fm:'DM Mono',ui-monospace,monospace;
  --ink:#1B1C1D; --cream:#F5F3EA; --light:#FBFAF6; --orange:#FF9966; --yellow:#FFC127; --pink:#EDA6E6; --green:#2E7D4F;
  --gray:#5A5B5C; --line:#E1DFD6; --dk:#1B1E21;
  color:var(--ink); font-family:var(--fu); line-height:1.6; background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.hts *, .hts *::before, .hts *::after{ box-sizing:border-box; }
body{ margin:0; background:#fff; }
.hts h1,.hts h2,.hts h3,.hts p,.hts ul,.hts li{ margin:0; padding:0; }
.hts ul{ list-style:none; }
.hts a{ color:inherit; text-decoration:none; }
.hts ::selection{ background:var(--yellow); color:var(--ink); }
.hts a:focus-visible,.hts summary:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px; }

/* En-tête et pied (pas de gabarit WordPress ici) */
.hts .top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px max(5%,20px); border-bottom:2px solid var(--ink); background:#fff; position:sticky; top:0; z-index:10; }
.hts .logo{ font-family:var(--fm); font-weight:500; letter-spacing:.12em; font-size:13px; }
.hts .logo b{ display:inline-block; width:10px; height:10px; background:var(--orange); border:1.5px solid var(--ink); border-radius:2px; margin-right:8px; vertical-align:-1px; }
.hts .nav{ display:flex; align-items:center; gap:22px; font-size:14px; font-weight:500; }
.hts .nav a.lien{ border-bottom:2px solid transparent; }
.hts .nav a.lien:hover{ border-bottom-color:var(--orange); }
.hts .pied{ background:var(--ink); color:#C7C6C0; padding:46px max(5%,20px) 40px; font-size:13.5px; line-height:1.65; }
.hts .pied a{ color:#fff; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px; }
.hts .pied .in{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:36px; }
.hts .pied p{ color:#C7C6C0; margin-bottom:8px; }
.hts .pied .logo{ color:#fff; display:block; margin-bottom:12px; }

/* Mise en page */
.hts .section{ padding:110px max(5%,24px); border-bottom:2px solid var(--ink); }
.hts .contenu{ max-width:1180px; margin:0 auto; }
.hts .creme{ background:var(--cream); }
.hts .clair{ background:var(--light); }
.hts .centre{ text-align:center; max-width:820px; margin:0 auto 60px; }
.hts .centre .lead{ margin-left:auto; margin-right:auto; }

/* Typographie */
.hts .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fm); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#C2552A; margin-bottom:18px; }
.hts .eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange); display:inline-block; }
.hts .accent{ font-style:italic; background:linear-gradient(transparent 55%,var(--yellow) 55%,var(--yellow) 92%,transparent 92%); padding:0 2px; }
.hts .h1{ font-family:var(--fd); font-weight:400; font-size:clamp(38px,5vw,60px); line-height:1.05; letter-spacing:-.015em; margin:0 0 22px; }
.hts .h2{ font-family:var(--fd); font-weight:400; font-size:clamp(28px,3.6vw,44px); line-height:1.14; margin:0 0 22px; }
.hts .lead{ font-size:18px; line-height:1.65; color:#2b2c2d; max-width:600px; margin:0 0 28px; }
.hts .petit{ font-size:13.5px; color:var(--gray); }
.hts .source{ font-family:var(--fm); font-size:11.5px; letter-spacing:.03em; color:var(--gray); margin-top:14px; }
.hts .lien-souligne{ font-weight:700; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px; }

/* En bref */
.hts .tldr{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:2px solid var(--ink); border-left-width:6px; border-left-color:var(--orange); border-radius:12px; padding:14px 18px; margin:0 0 24px; box-shadow:3px 3px 0 0 var(--dk); max-width:600px; }
.hts .tldr b{ font-family:var(--fm); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#B5451B; flex-shrink:0; padding-top:2px; }
.hts .tldr span{ font-size:14.5px; line-height:1.55; color:#2b2c2d; }

/* Boutons */
.hts .btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; border:2px solid var(--ink); border-radius:6px; padding:16px 26px; line-height:1.2; transition:transform .12s, box-shadow .12s; }
.hts .btn svg{ transition:transform .25s ease; }
.hts .btn:hover svg{ transform:translateX(4px); }
.hts .btn-orange{ background:var(--orange); color:var(--ink); box-shadow:4px 4px 0 0 #000; }
.hts .btn-orange:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 0 #000; }
.hts .btn-noir{ background:var(--ink); color:#fff; box-shadow:4px 4px 0 0 var(--dk); }
.hts .btn-noir:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--dk); }
.hts .btn-blanc{ background:#fff; color:var(--ink); box-shadow:4px 4px 0 0 #000; }
.hts .btn-blanc:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 0 #000; }
.hts .btn-mini{ padding:10px 16px; font-size:14px; box-shadow:3px 3px 0 0 #000; }
.hts .boutons{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* Confiance et puces */
.hts .confiance{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin-top:26px; font-size:13px; }
.hts .confiance span{ display:inline-flex; gap:6px; align-items:center; }
.hts .micro{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
.hts .micro span{ font-family:var(--fm); font-size:11.5px; font-weight:500; background:#fff; border:2px solid var(--ink); border-radius:100px; padding:7px 13px; box-shadow:2px 2px 0 0 var(--ink); }
.hts .frais{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:var(--fm); font-size:11.5px; letter-spacing:.05em; color:var(--gray); text-transform:uppercase; }
.hts .frais i{ width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; }

/* Hero */
.hts .hero{ background:var(--cream); padding:84px max(5%,24px) 100px; position:relative; overflow:hidden; border-bottom:2px solid var(--ink); }
.hts .hero-points{ position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:radial-gradient(var(--ink) 1px,transparent 1px); background-size:32px 32px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent); }
.hts .hero-grille{ display:grid; grid-template-columns:1.02fr 1fr; gap:56px; align-items:center; position:relative; max-width:1240px; margin:0 auto; }

/* Fenêtre d'application */
.hts .fenetre{ background:#0F1011; border:2px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:9px 9px 0 0 var(--dk); position:relative; transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s cubic-bezier(.2,.8,.3,1); }
.hts .fenetre:hover{ transform:translate(-3px,-3px); box-shadow:12px 12px 0 0 var(--ink); }
.hts .barre{ display:flex; align-items:center; gap:7px; padding:12px 16px; }
.hts .barre .d{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.hts .barre .lbl{ font-family:var(--fm); font-size:13px; color:#C7C6C0; margin-left:8px; letter-spacing:.02em; }
.hts .fenetre-img{ padding:22px; background:var(--cream); }
.hts .fenetre-img svg{ display:block; width:100%; height:auto; }
.hts .legende{ background:var(--light); color:#666; font-style:italic; font-size:13.5px; line-height:1.5; padding:15px 20px; border-top:2px solid var(--ink); }
.hts .puce-verte{ position:absolute; top:8px; right:12px; display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff; border:1.5px solid rgba(255,255,255,.28); border-radius:100px; padding:5px 12px; font-family:var(--fm); font-size:11px; letter-spacing:.03em; }
.hts .puce-verte i{ width:8px; height:8px; border-radius:50%; background:#8CE7AC; display:inline-block; animation:hts-pouls 2.2s ease-in-out infinite; }
@keyframes hts-pouls{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* Problème / promesse */
.hts .pp{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; }
.hts .carte{ background:#fff; border:2px solid var(--ink); border-radius:18px; box-shadow:4px 4px 0 0 var(--dk); padding:30px; display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s; }
.hts .carte:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 0 var(--ink); }
.hts .carte-orange{ background:var(--orange); }
.hts .badge{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border:1.5px solid var(--ink); border-radius:100px; background:var(--yellow); align-self:flex-start; margin-bottom:16px; }
.hts .badge-blanc{ background:#fff; }
.hts .liste{ display:grid; gap:14px; }
.hts .li{ position:relative; padding-left:28px; font-size:15.5px; line-height:1.55; }
.hts .li::before{ content:""; position:absolute; left:4px; top:8px; width:9px; height:9px; background:var(--orange); border:1.5px solid var(--ink); border-radius:2px; }
.hts .li.non::before{ background:#fff; }
.hts .li.non{ color:#555; }
.hts .fleche{ display:flex; align-items:center; justify-content:center; }
.hts .fleche span{ width:52px; height:52px; border-radius:50%; background:var(--orange); border:2px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; box-shadow:4px 4px 0 0 #000; }

/* Étapes */
.hts .etapes{ display:flex; flex-direction:column; counter-reset:e; margin-top:8px; }
.hts .etape{ display:flex; gap:18px; padding:22px 0; border-bottom:1.5px dashed var(--ink); counter-increment:e; }
.hts .etape:last-child{ border-bottom:none; }
.hts .etape-n{ flex-shrink:0; width:42px; height:42px; border-radius:11px; background:var(--ink); color:#fff; font-family:var(--fd); font-size:19px; display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 0 0 var(--orange); }
.hts .etape-n::before{ content:counter(e); }
.hts .etape h3{ font-weight:700; font-size:18px; margin:6px 0 6px; }
.hts .etape p{ font-size:15px; line-height:1.6; color:#444; }

/* Grilles de cartes */
.hts .grille3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hts .grille2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.hts .cap{ background:#fff; border:2px solid var(--ink); border-radius:14px; padding:22px; box-shadow:4px 4px 0 0 var(--dk); transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s; }
.hts .cap:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 0 var(--ink); }
.hts .cap-ic{ width:40px; height:40px; border-radius:11px; border:2px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; }
.hts .cap h3{ font-weight:700; font-size:16px; margin:0 0 6px; }
.hts .cap p{ font-size:14.5px; line-height:1.55; color:#555; }
.hts a.cap{ display:block; }
.hts a.cap .suite{ display:inline-block; margin-top:10px; font-weight:700; font-size:14px; border-bottom:2px solid var(--orange); }

/* Bandeau sombre */
.hts .bandeau{ display:flex; align-items:center; gap:16px; padding:22px 28px; background:var(--ink); border-radius:16px; box-shadow:6px 6px 0 0 var(--yellow); max-width:900px; margin:46px auto 0; }
.hts .bandeau-ic{ flex-shrink:0; width:42px; height:42px; border-radius:50%; background:var(--yellow); display:inline-flex; align-items:center; justify-content:center; }
.hts .bandeau b{ display:block; font-family:var(--fm); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--yellow); margin-bottom:5px; }
.hts .bandeau span{ font-size:15.5px; line-height:1.5; color:#fff; }

/* Formules */
.hts .prix{ font-family:var(--fd); font-size:44px; line-height:1; margin:6px 0 4px; }
.hts .prix small{ font-family:var(--fu); font-size:15px; font-weight:500; }
.hts .formule h3{ font-family:var(--fd); font-weight:400; font-size:26px; margin:0 0 4px; }
.hts .formule .liste{ margin:18px 0 24px; }
.hts .formule .btn{ align-self:flex-start; margin-top:auto; }

/* Chiffres (preuve) */
.hts .chiffre{ background:#fff; border:2px solid var(--ink); border-radius:18px; box-shadow:4px 4px 0 0 var(--dk); padding:26px; }
.hts .chiffre-v{ font-family:var(--fd); font-size:54px; line-height:1; }
.hts .chiffre-l{ font-size:15px; line-height:1.5; margin-top:10px; }
.hts .chiffre .source{ border-top:1.5px dashed var(--ink); padding-top:12px; }

/* Tableau */
.hts .tableau-cadre{ border:2px solid var(--ink); border-radius:16px; overflow:hidden; box-shadow:5px 5px 0 0 var(--dk); background:#fff; }
.hts table.tab{ width:100%; border-collapse:collapse; }
.hts .tab th{ padding:14px 14px; text-align:left; font-family:var(--fm); font-size:12px; font-weight:500; text-transform:uppercase; color:#666; background:var(--cream); border-bottom:2px solid var(--ink); }
.hts .tab td{ padding:14px; font-size:15px; border-bottom:1px solid var(--line); }
.hts .tab tr:last-child td{ border-bottom:none; }
.hts .tab td.n{ font-variant-numeric:tabular-nums; font-weight:700; }

/* FAQ */
.hts .faq-cadre{ max-width:900px; margin:0 auto; }
.hts details.faq{ background:#fff; border:2px solid var(--ink); border-radius:12px; margin-bottom:16px; box-shadow:3px 3px 0 0 var(--dk); }
.hts details.faq[open]{ background:var(--cream); }
.hts details.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:16.5px; font-weight:700; border-radius:10px; }
.hts details.faq summary::-webkit-details-marker{ display:none; }
.hts .faq-plus{ flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--cream); border:1.5px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; transition:transform .2s, background .2s; }
.hts details.faq[open] .faq-plus{ transform:rotate(45deg); background:var(--orange); }
.hts .faq-r{ padding:0 22px 20px; font-size:15px; line-height:1.7; color:#2b2c2d; }

/* Appel final */
.hts .final{ background:var(--orange); padding:120px max(5%,24px); text-align:center; position:relative; overflow:hidden; border-bottom:2px solid var(--ink); }
.hts .final-points{ position:absolute; inset:0; opacity:.2; pointer-events:none; background-image:radial-gradient(var(--ink) 1.2px,transparent 1.2px); background-size:28px 28px; }
.hts .final-in{ max-width:860px; margin:0 auto; position:relative; }
.hts .final .eyebrow{ color:var(--ink); }
.hts .final .eyebrow::before{ background:var(--ink); }
.hts .final h2{ font-family:var(--fd); font-weight:400; font-size:clamp(32px,4.4vw,52px); line-height:1.1; margin:8px auto 18px; max-width:720px; }
.hts .final h2 em{ font-style:italic; color:#fff; }
.hts .final p{ font-size:18px; line-height:1.6; margin:0 auto 30px; max-width:620px; }
.hts .final .note{ margin-top:22px; font-family:var(--fm); font-size:12.5px; opacity:.8; }

/* Apparition douce */
@media (prefers-reduced-motion:no-preference){ .hts .rv{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; } .hts .rv.in{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hts *, .hts *::before, .hts *::after{ transition:none !important; animation:none !important; } }

/* Petits écrans */
@media (max-width:1024px){
  .hts .hero-grille{ grid-template-columns:1fr; gap:42px; }
  .hts .pp{ grid-template-columns:1fr; max-width:620px; margin:0 auto; }
  .hts .fleche span{ transform:rotate(90deg); }
  .hts .grille3{ grid-template-columns:1fr; }
  .hts .pied .in{ grid-template-columns:1fr; }
  .hts .section{ padding:80px max(5%,18px); }
}
@media (max-width:768px){
  .hts .grille2{ grid-template-columns:1fr; }
  .hts .hero{ padding:48px max(5%,16px) 64px; }
  .hts .section{ padding:60px max(5%,16px); }
  .hts .final{ padding:84px max(5%,16px); }
  .hts .nav a.lien{ display:none; }
  .hts .bandeau{ flex-direction:column; align-items:flex-start; }
  .hts .puce-verte{ display:none; }
}