:root{
  --ivoire:#FDF9F5; --sable:#F4E7DA; --peche:#F0D6BF; --rose:#BC9088; --vin:#7A3F3A; --encre:#1F1918;
  --titre:'Lato',system-ui,sans-serif; --texte:'Lora',Georgia,serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{overflow-x:clip;background:var(--ivoire);color:var(--encre);font:400 1.0625rem/1.75 var(--texte);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--vin);outline-offset:3px}
.wrap{width:min(1080px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--titre);line-height:1.15}
h2{font-size:clamp(1.5rem,3.6vw,2.2rem);font-weight:900;letter-spacing:.08em;text-transform:uppercase;max-width:20ch}
section{padding:clamp(3.5rem,8vw,6rem) 0}
/* Apparition douce au défilement */
.js .revele{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.js .revele.vu{opacity:1;transform:none}
.lead{max-width:60ch}

/* Boutons */
.btn{display:inline-flex;flex-direction:column;gap:.1rem;padding:.9rem 1.5rem;border-radius:2px;font-family:var(--titre);font-weight:700;text-decoration:none;text-align:center;border:2px solid var(--encre);transition:background .2s,color .2s}
.btn small{font-weight:400;font-size:.78rem;opacity:.85}
.btn-primaire{background:var(--vin);border-color:var(--vin);color:#fff}
.btn-primaire:hover{background:var(--encre);border-color:var(--encre)}
.btn-second{background:transparent}
.btn-second:hover{background:var(--encre);color:#fff}
.achats{display:flex;flex-wrap:wrap;gap:.8rem}

/* En-tête */
header{padding:1.1rem 0;border-bottom:1px solid var(--peche)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1rem;flex-wrap:wrap}
.menu{display:flex;gap:clamp(1rem,3vw,1.8rem)}
.marque{font-family:var(--titre);font-weight:700;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
header a.lien{font-family:var(--titre);font-size:.9rem;font-weight:700;text-decoration:none;border-bottom:2px solid var(--rose)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--sable),var(--ivoire));padding-top:clamp(2.5rem,6vw,4.5rem)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{font-weight:900;font-size:clamp(2.4rem,7.2vw,5rem);letter-spacing:.07em;text-transform:uppercase;line-height:1.02;opacity:0;animation:entree .9s .1s forwards}
.hero .question{font-family:var(--titre);letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.85rem,1.8vw,1.05rem);margin:1.4rem 0 1.2rem;max-width:34ch}
.hero .promesse{max-width:52ch;margin-bottom:1.8rem}.hero .promesse strong{font-family:var(--titre);font-weight:900;display:block;font-size:1.25rem;margin-bottom:.6rem}.hero .promesse p+p{margin-top:.8rem}
.hero .auteur{margin-top:1.4rem;font-family:var(--titre);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--vin);font-weight:700}
.couv{justify-self:center;width:min(100%,380px);height:auto;box-shadow:0 30px 60px -25px rgba(122,63,58,.45)}
@keyframes entree{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Constat */
.constat{background:var(--encre);color:var(--ivoire)}
.constat .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.constat h2{color:var(--peche)}
.chiffres{display:grid;gap:1.6rem}
.chiffres b{display:block;font:900 clamp(2.6rem,6vw,3.8rem)/1 var(--titre);color:var(--peche)}
.chiffres span{display:block;max-width:34ch;opacity:.9}
.chiffres em{display:block;margin-top:.3rem;font-size:.85rem;opacity:.6}

/* Citation */
.citation{text-align:center}
.citation blockquote{font:italic 400 clamp(1.3rem,3vw,1.9rem)/1.5 var(--texte);max-width:30ch;margin:0 auto;color:var(--vin)}
.citation cite{display:block;margin-top:1.1rem;font:700 .8rem var(--titre);letter-spacing:.18em;text-transform:uppercase;font-style:normal}

/* Chapitres */
.contenu{background:var(--sable)}
.contenu .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem)}
.contenu ol{list-style:none;padding:0;counter-reset:ch}
.contenu li{counter-increment:ch;display:grid;grid-template-columns:2.6rem 1fr;padding:.85rem 0;border-bottom:1px solid var(--rose)}
.contenu li::before{content:counter(ch,upper-roman);font:700 .85rem var(--titre);color:var(--vin);padding-top:.2rem;letter-spacing:.05em}
.contenu li:last-child::before{content:"✦"}
.contenu li span{font-family:var(--titre);font-weight:700}
.contenu li small{display:block;font-size:.92rem;opacity:.8;line-height:1.5;font-family:var(--texte)}

/* Pour qui */
.pourqui .liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2.2rem}
.pourqui h3{font-size:1.05rem;font-weight:900;margin-bottom:.4rem;border-top:3px solid var(--rose);padding-top:.8rem}
.pourqui p{font-size:.98rem;line-height:1.65}

/* Témoignages */
.avis{padding-bottom:4rem}
.diapo{margin-top:2rem}
.slides{display:grid}
.slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;background:var(--peche);visibility:hidden;opacity:0;transition:opacity .6s,visibility .6s}
.slide.actif{visibility:visible;opacity:1}
.slide .photo{position:relative;min-height:340px;background:var(--sable)}
.slide .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .texte{padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.slide .accroche{font:italic 500 clamp(1.4rem,3vw,2rem)/1.3 var(--texte);color:var(--vin)}
.slide q{font-style:italic;font-size:1.08rem;line-height:1.65;quotes:none}
.slide h3{font-size:1rem;font-weight:900}
.slide h3 small{display:block;font-weight:400;font-size:.85rem}
.progres{height:4px;background:var(--peche)}
.progres i{display:block;height:100%;width:0;background:var(--vin)}
.commandes{display:flex;align-items:center;gap:.6rem;margin-top:1rem}
.commandes button{font:700 .9rem var(--titre);padding:.55rem 1rem;border:2px solid var(--vin);background:transparent;color:var(--vin);cursor:pointer;border-radius:2px}
.commandes button:hover{background:var(--vin);color:#fff}
.commandes #pause{min-width:6.5rem}
.compteur{margin-left:auto;font:700 .85rem var(--titre);letter-spacing:.1em}

/* Achat */
.achat{background:var(--vin);color:var(--ivoire)}
.achat .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.achat .couv{width:230px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.achat h2{max-width:16ch}
.prix{font:900 clamp(2.4rem,6vw,3.4rem)/1 var(--titre);margin:1.2rem 0 .3rem}
.prix small{font:400 1rem var(--texte);opacity:.8}
.achat .note{margin-bottom:1.4rem;opacity:.9;max-width:50ch}
.achat .btn-primaire{background:var(--ivoire);color:var(--vin);border-color:var(--ivoire)}
.achat .btn-primaire:hover{background:var(--peche);border-color:var(--peche)}
.achat .btn-second{border-color:var(--ivoire);color:var(--ivoire)}
.achat .btn-second:hover{background:var(--ivoire);color:var(--vin)}

/* FAQ */
.faq .wrap{max-width:760px}
details{border-bottom:1px solid var(--peche);padding:1.1rem 0}
summary{cursor:pointer;font:700 1.02rem var(--titre);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";color:var(--vin);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:.7rem;max-width:62ch}

footer{background:var(--encre);color:var(--ivoire);padding:2.4rem 0 5.5rem;font-size:.9rem;text-align:center}
footer .marque{display:block;margin-bottom:.8rem;color:var(--peche)}
footer p+p{margin-top:.4rem;opacity:.75}
footer .mail{color:var(--peche);text-underline-offset:4px}

/* Barre d'achat mobile */
.barre{display:none}

@media (max-width:820px){
  .hero .wrap,.constat .wrap,.contenu .wrap,.achat .wrap{grid-template-columns:1fr}
  .hero .couv{order:-1;width:min(62%,260px);margin-bottom:.5rem}
  .achat .couv{width:170px}
  .pourqui .liste{grid-template-columns:1fr;gap:1.4rem}
  .slide{grid-template-columns:minmax(0,1fr)}.slide .photo{min-height:0;aspect-ratio:4/3}
  .hero .btn,.achat .btn{width:100%}
  .marque{letter-spacing:.12em;font-size:.72rem}header a.lien{font-size:.82rem}
  .barre{display:flex;position:fixed;inset:auto 0 0;z-index:10;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:var(--ivoire);border-top:1px solid var(--rose);transform:translateY(110%);transition:transform .3s}
  .barre.visible{transform:none}
  .barre a{flex:1;padding:.7rem .4rem;font:700 .85rem var(--titre);text-align:center;text-decoration:none;border:2px solid var(--vin);border-radius:2px}
  .barre a{color:var(--vin)}
  .barre a.principal{background:var(--vin);color:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero h1{opacity:1}.js .revele{opacity:1;transform:none}}

.art{max-width:720px;margin-inline:auto;width:calc(100% - 2.5rem);padding:3rem 0 4rem}
.art h1{font-size:clamp(1.9rem,5vw,2.8rem);font-weight:900;letter-spacing:.03em;line-height:1.15;margin-bottom:1.2rem}
.art h2{font-size:1.3rem;letter-spacing:.03em;text-transform:none;max-width:none;margin:2.2rem 0 .6rem}
.art p{margin-bottom:1rem}.art .intro{font-size:1.15rem}
.fil{font:700 .8rem var(--titre);letter-spacing:.1em;margin-bottom:1.5rem}.fil a,.liens a{color:var(--vin)}
.cta{display:grid;grid-template-columns:110px minmax(0,1fr);gap:1.4rem;align-items:center;background:var(--peche);padding:1.5rem;margin:2.5rem 0}
.cta img{width:110px;height:auto}.cta h2{margin:0 0 .5rem;font-size:1.2rem}.cta p{margin-bottom:1rem}
.liens{padding-left:1.2rem;margin:1rem 0}.liens li{margin:.5rem 0}
.liste-art a{display:block;padding:1.1rem 0;border-bottom:1px solid var(--peche);text-decoration:none}
.liste-art b{font-family:var(--titre);display:block;font-size:1.15rem}
@media (max-width:560px){.cta{grid-template-columns:1fr}.cta img{width:90px}}

.par{font:700 .85rem var(--titre);margin:-.4rem 0 1.6rem;letter-spacing:.04em}.par a{color:var(--vin)}
.art blockquote{border-left:3px solid var(--rose);padding-left:1.1rem;font-style:italic;margin:1.2rem 0}