/* =========================================================
   PAGE DE VENTE 01 — LES PARIS TE GARDERONT PAUVRE
   Rouge · noir · blanc · jaune · orange
   ========================================================= */

:root{
  --rouge:#d10f1c;
  --rouge-fonce:#8d0510;
  --noir:#101010;
  --noir-profond:#070707;
  --blanc:#ffffff;
  --creme:#fff6e8;
  --jaune:#ffd11a;
  --orange:#ff7a18;
  --vert:#17a44a;
  --gris:#d8d8d8;
  --pad:clamp(18px,5.5vw,34px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--noir);color:#efe9e4;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:clamp(17px,1rem + .25vw,19px);
  line-height:1.75;
  overflow-x:hidden;
}
html,body{max-width:100%;}
img{display:block;max-width:100%;height:auto;}

h1,h2,h3,.prix,.prix-gros,.cta,.surtitre{
  font-family:"Anton","Impact","Arial Narrow",sans-serif;
  font-weight:400;letter-spacing:.01em;text-transform:uppercase;
}
h1,h2,h3{line-height:1.05;margin:0 0 .5em;color:#fff;overflow-wrap:break-word;}
p{margin:0 0 1.1em;}
b{color:var(--jaune);font-weight:700;}

:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;}

.wrap{width:100%;max-width:1100px;margin-inline:auto;padding-inline:var(--pad);}
.etroit{max-width:760px;}
.centre{text-align:center;}

/* ---------- héros ---------- */
.heros{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,122,24,.35),transparent 62%),
    linear-gradient(180deg,var(--rouge),var(--rouge-fonce) 72%,var(--noir));
  padding-bottom:clamp(34px,7vw,64px);
  position:relative;overflow:hidden;
}
.heros-image img{
  width:100%;max-height:min(52vh,420px);object-fit:cover;object-position:center;
}
.heros-texte{padding-top:clamp(24px,5vw,40px);text-align:center;}
.surtitre{
  font-size:clamp(12px,3vw,14px);letter-spacing:.18em;color:var(--jaune);
  margin:0 0 14px;
}
.heros h1{
  font-size:clamp(34px,10vw,76px);
  text-shadow:0 8px 30px rgba(0,0,0,.55);
}
.heros h1 em{font-style:normal;color:var(--jaune);display:inline-block;}
.accroche{
  font-size:clamp(17px,4vw,24px);font-weight:600;color:#fff;
  max-width:36ch;margin-inline:auto;
}
.prix-ligne{
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;
  background:rgba(0,0,0,.4);border:2px solid rgba(255,209,26,.55);
  padding:14px 24px;border-radius:22px;margin:6px 0 22px;
}
.prix{font-size:clamp(28px,7vw,44px);color:var(--jaune);line-height:1;}
.prix-note{font-size:14.5px;color:#ffe9c9;font-weight:600;}

.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#1ec25a,var(--vert));
  color:#fff;text-decoration:none;
  font-size:clamp(17px,4.4vw,23px);
  padding:19px 34px;border-radius:999px;min-height:62px;
  box-shadow:0 16px 40px -14px rgba(23,164,74,.9),inset 0 -3px 0 rgba(0,0,0,.2);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
  animation:battement 2.6s ease-in-out infinite;
  max-width:100%;
}
.cta:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.06);}
.cta:active{transform:scale(.98);}
.cta-large{width:100%;max-width:520px;}
@keyframes battement{
  0%,100%{box-shadow:0 16px 40px -14px rgba(23,164,74,.9),0 0 0 0 rgba(30,194,90,.5);}
  55%{box-shadow:0 16px 40px -14px rgba(23,164,74,.9),0 0 0 16px rgba(30,194,90,0);}
}
.rassurance{font-size:14.5px;color:#ffdfae;margin:14px 0 0;}

/* ---------- blocs ---------- */
.bloc{padding:clamp(46px,9vw,86px) 0;position:relative;}
.bloc-clair{background:linear-gradient(180deg,#fff,var(--creme));color:#221a14;}
.bloc-clair h2,.bloc-clair h3{color:var(--rouge);}
.bloc-clair b{color:var(--rouge);}
.titre-2{font-size:clamp(25px,6.4vw,44px);text-align:center;margin-bottom:.8em;}
.titre-3{font-size:clamp(23px,5.4vw,34px);color:var(--jaune);}
.sous-2{text-align:center;font-size:clamp(17px,3.4vw,20px);margin-bottom:2em;}

.intro-forte{font-size:clamp(19px,4.4vw,26px);font-weight:600;color:#fff;line-height:1.5;}

.bulles{list-style:none;margin:0 0 1.6em;padding:0;display:grid;gap:12px;}
.bulles li{
  background:#1b1b1b;border:1px solid #2f2f2f;border-left:5px solid var(--orange);
  border-radius:20px;padding:15px 20px;font-style:italic;color:#ffe3c2;
}
.question{font-size:clamp(19px,4.2vw,25px);color:var(--jaune);font-weight:700;line-height:1.4;}

.carte-sombre{
  background:linear-gradient(150deg,#1d0a0b,#140909);
  border:1px solid #3a1416;border-radius:26px;
  padding:clamp(22px,4.6vw,34px);margin:0 0 1.6em;
  box-shadow:0 26px 50px -30px rgba(209,15,28,.9);
}
.sans-marge{margin-bottom:0;}

.verite{font-size:clamp(19px,4.2vw,25px);font-weight:700;color:#fff;line-height:1.4;}
.verite-jaune{color:var(--jaune);}

.hasard{list-style:none;margin:0 0 1.4em;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.hasard li{
  background:rgba(209,15,28,.16);border:1px solid rgba(255,122,24,.45);
  color:#ffd9b8;border-radius:999px;padding:10px 18px;font-weight:600;font-size:15.5px;
}

/* ---------- le livre ---------- */
.livre-grid{display:grid;gap:clamp(24px,5vw,44px);align-items:start;}
.livre-visuel{margin:0;}
.livre-visuel img{
  width:100%;border-radius:26px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.55);
}
.mini-titre{
  font-weight:800;font-size:clamp(18px,3.6vw,21px);color:var(--rouge);margin-bottom:.6em;
}
.liste-check{list-style:none;margin:0 0 1.6em;padding:0;display:grid;gap:11px;}
.liste-check li{
  position:relative;padding-left:38px;line-height:1.55;
}
.liste-check li::before{
  content:"✔";position:absolute;left:0;top:2px;
  width:26px;height:26px;border-radius:50%;
  background:var(--rouge);color:#fff;font-size:14px;
  display:grid;place-content:center;
  box-shadow:0 8px 16px -8px rgba(209,15,28,.9);
}
.encadre-jaune{
  background:linear-gradient(135deg,var(--jaune),#ffb628);
  color:#241700;border-radius:24px;padding:20px 24px;margin:0;
  font-weight:600;box-shadow:0 20px 40px -24px rgba(255,180,20,.9);
}
.encadre-jaune b{color:#7a0b12;}

/* ---------- bonus ---------- */
.bloc-bonus{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,209,26,.14),transparent 60%),
    linear-gradient(180deg,#0c0c0c,#161616);
  border-block:1px solid #2a2a2a;
}
.bonus-grid{display:grid;gap:16px;margin-bottom:28px;}
.bonus{
  background:linear-gradient(155deg,#1c1c1c,#121212);
  border:1px solid #333;border-top:4px solid var(--jaune);
  border-radius:24px;padding:24px;
  box-shadow:0 22px 44px -30px rgba(255,209,26,.6);
  transition:transform .3s ease,border-color .3s ease;
}
.bonus:hover{transform:translateY(-6px);border-color:var(--orange);}
.bonus-cadeau{
  display:inline-block;font-family:"Anton",sans-serif;font-size:12.5px;letter-spacing:.14em;
  color:#111;background:var(--jaune);padding:6px 13px;border-radius:999px;margin-bottom:12px;
}
.bonus h3{font-size:clamp(19px,3.8vw,22px);color:#fff;margin-bottom:.4em;}
.bonus p{margin:0;font-size:16px;color:#cfc8c2;}

.preuve{margin:0 0 28px;}
.preuve img{width:100%;border-radius:22px;border:1px solid #2f2f2f;}
.preuve figcaption{margin-top:12px;font-size:14.5px;color:#a9a29c;text-align:center;}
.final-bonus{font-size:clamp(18px,3.6vw,21px);text-align:center;max-width:62ch;margin-inline:auto;}

/* ---------- témoignage ---------- */
.bloc-temoignage{background:linear-gradient(180deg,#141414,#0d0d0d);border-block:1px solid #2a2a2a;}
.temoignage-grid{display:grid;gap:24px;align-items:start;}
.temoignage-capture img{
  width:100%;max-width:380px;margin-inline:auto;
  border-radius:22px;border:1px solid #333;
  box-shadow:0 26px 52px -30px rgba(23,164,74,.7);
}
.temoignage-capture,.temoignage-extrait figure{margin:0;}
.temoignage-capture figcaption,.temoignage-extrait figcaption{
  margin-top:12px;font-size:14px;color:#a9a29c;text-align:center;
}
.temoignage-extrait img{width:100%;border-radius:18px;border:1px solid #333;}
.temoignage-intro{color:#cfc8c2;}
.temoignage-fin{
  margin-top:18px;font-size:clamp(18px,3.6vw,22px);font-weight:600;color:#fff;line-height:1.45;
}

/* ---------- offre ---------- */
.bloc-offre{
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,122,24,.35),transparent 60%),
    linear-gradient(180deg,var(--rouge-fonce),var(--rouge));
}
.prix-bloc{
  background:rgba(0,0,0,.42);border:2px dashed var(--jaune);
  border-radius:28px;padding:26px 22px;margin-bottom:24px;
}
.prix-gros{
  display:block;font-size:clamp(42px,12vw,86px);color:var(--jaune);line-height:1;
  text-shadow:0 10px 30px rgba(0,0,0,.5);
}
.prix-bloc p{margin:12px 0 0;color:#ffe9c9;font-weight:600;}
.phrase-choc{font-size:clamp(19px,4.4vw,27px);font-weight:700;color:#fff;line-height:1.4;}

/* ---------- bascule ---------- */
.bascule{
  background:#161616;border:1px solid #2e2e2e;border-radius:26px;
  padding:26px;text-align:center;margin:0 0 1.8em;
}
.bascule p{margin:0;}
.avant{color:#ff9a9a;text-decoration:line-through;font-size:clamp(16px,3.4vw,19px);}
.fleche{font-size:30px;color:var(--orange);line-height:1.4;}
.apres{color:var(--jaune);font-weight:700;font-size:clamp(17px,3.8vw,22px);}

/* ---------- pied ---------- */
.pied-produit{
  background:var(--noir-profond);border-top:1px solid #262626;
  padding:34px 0 110px;text-align:center;font-size:15px;color:#9a938d;
}
.pied-marque{
  font-family:"Anton",sans-serif;font-size:22px;color:#fff;letter-spacing:.06em;margin:0 0 6px;
}
.pied-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px;}
.pied-nav a{
  color:#fff;text-decoration:none;font-weight:600;
  background:#1c1c1c;border:1px solid #2f2f2f;padding:10px 18px;border-radius:999px;
}
.pied-nav a:hover{background:#2a2a2a;}

/* ---------- CTA collant ---------- */
.cta-collant{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:none;align-items:center;gap:12px;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid #2c2c2c;
}
.cta-collant.visible{display:flex;}
.cta-collant-prix{
  font-family:"Anton",sans-serif;font-size:20px;color:var(--jaune);white-space:nowrap;
}
.cta-mini{
  flex:1;font-size:16px;padding:14px 16px;min-height:54px;animation:none;
}

/* ---------- apparitions ---------- */
.js-a [data-a]{opacity:0;transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;}
.js-a [data-a].vu{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .bonus-grid{grid-template-columns:repeat(2,1fr);}
  .bulles{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:900px){
  .temoignage-grid{grid-template-columns:.8fr 1.2fr;gap:40px;}
  .livre-grid{grid-template-columns:.9fr 1.1fr;align-items:center;}
  .heros-image img{max-height:460px;}
}
@media (max-width:380px){
  .cta{padding:17px 20px;font-size:16px;}
  .cta-collant-prix{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js-a [data-a]{opacity:1!important;transform:none!important;}
}