/* =========================================================
   RETG — Éditorial / "haute couture" publicitaire
   Ivoire · Encre · Terracotta — Fraunces + Inter
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
  line-height:1.6;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}

:root{
  --paper:    #F4EFE7;
  --paper-2:  #ECE5D8;
  --ink:      #1A1714;
  --ink-soft: #4A433C;
  --ink-mute: #8A8073;
  --line:     #D8CFBF;
  --terra:    #E0623F;
  --terra-d:  #C04A2C;
  --sage:     #6E7B5E;
  --cream:    #FBF8F2;

  --shell:    1240px;
  --pad:      32px;
}

::selection{background:var(--terra);color:var(--cream)}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
@media(max-width:640px){:root{--pad:20px}}

/* ============ TYPOGRAPHIE ============ */
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.02;letter-spacing:-.015em;color:var(--ink)}
.display{font-size:clamp(52px,9vw,124px);line-height:.96;letter-spacing:-.025em;font-weight:500}
h1{font-size:clamp(40px,6.5vw,84px)}
h2{font-size:clamp(32px,4.6vw,60px)}
h3{font-size:clamp(22px,2.4vw,30px);font-weight:600}
em{font-style:italic;font-variation-settings:"opsz" 144}
.serif{font-family:"Fraunces",Georgia,serif}

p{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:64ch}
.lead{font-size:clamp(19px,2.1vw,24px);line-height:1.5;color:var(--ink);max-width:34ch}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terra);margin-bottom:24px;
}
.kicker::before{content:"";width:28px;height:1.5px;background:var(--terra)}
.kicker--mute{color:var(--ink-mute)}
.kicker--mute::before{background:var(--ink-mute)}

/* ============ SECTIONS ============ */
.section{padding:120px 0}
.section--tight{padding:80px 0}
@media(max-width:760px){.section{padding:80px 0}}
.bg-ink{background:var(--ink);color:var(--cream)}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:var(--cream)}
.bg-ink p{color:rgba(251,248,242,.72)}
.bg-paper2{background:var(--paper-2)}
.bg-cream{background:var(--cream)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ============ MASTHEAD ============ */
.masthead{
  position:sticky;top:0;z-index:60;
  background:rgba(244,239,231,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.wordmark{font-family:"Fraunces",serif;font-size:27px;font-weight:600;letter-spacing:-.02em}
.wordmark__dot{color:var(--terra)}
.topnav{display:flex;gap:36px}
.topnav__link{font-size:15px;font-weight:500;color:var(--ink-soft);position:relative;padding:4px 0;transition:color .2s}
.topnav__link:hover{color:var(--ink)}
.topnav__link.is-active{color:var(--ink)}
.topnav__link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--terra)}
.masthead__actions{display:flex;align-items:center;gap:16px}
.cart-pill{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:border-color .2s,background .2s}
.cart-pill:hover{border-color:var(--ink);background:var(--cream)}
.cart-pill__count{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;background:var(--terra);color:var(--cream);font-family:"Inter";font-size:11px;font-weight:600;border-radius:10px;display:flex;align-items:center;justify-content:center}
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%}
.hamburger span{width:16px;height:1.6px;background:var(--ink);transition:.25s}
.hamburger.is-open span:first-child{transform:translateY(3.3px) rotate(45deg)}
.hamburger.is-open span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
@media(max-width:860px){
  .topnav{position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:0;background:var(--cream);border-bottom:1px solid var(--line);padding:8px var(--pad);max-height:0;overflow:hidden;transition:max-height .3s}
  .topnav.is-open{max-height:340px}
  .topnav__link{padding:16px 0;border-bottom:1px solid var(--line);font-size:18px}
  .topnav__link:last-child{border-bottom:0}
  .hamburger{display:flex}
}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;font-size:15px;font-weight:600;letter-spacing:.01em;border-radius:2px;transition:transform .2s,background .2s,color .2s,box-shadow .2s;border:1.5px solid transparent}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn--solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--solid:hover{background:var(--terra);border-color:var(--terra)}
.btn--terra{background:var(--terra);color:var(--cream);border-color:var(--terra)}
.btn--terra:hover{background:var(--terra-d);border-color:var(--terra-d)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:11px 20px;font-size:13px}
.btn--lg{padding:18px 38px;font-size:16px}
.btn--block{display:flex;justify-content:center;width:100%}
.btn--on-ink{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--on-ink:hover{background:var(--terra);border-color:var(--terra);color:var(--cream)}

/* ============ HERO ============ */
.hero{padding:90px 0 110px;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.45fr .9fr;gap:60px;align-items:end}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr;gap:40px;align-items:start}}
.hero__aside{border-left:1px solid var(--line);padding-left:32px}
.hero__aside p{font-size:16px;max-width:38ch}
.hero__num{font-family:"Fraunces",serif;font-size:15px;color:var(--ink-mute);font-style:italic}
.hero__index{display:flex;flex-direction:column;gap:18px;margin-top:36px}
.hero__index-item{display:flex;justify-content:space-between;gap:20px;font-size:14px;border-top:1px solid var(--line);padding-top:14px}
.hero__index-item b{font-weight:600}
.hero__index-item span{color:var(--ink-mute)}

/* ============ MARQUEE ============ */
.ticker{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0;overflow:hidden;background:var(--ink);color:var(--cream)}
.ticker__row{display:flex;gap:48px;width:max-content;white-space:nowrap;animation:tick 36s linear infinite}
.ticker__row span{font-family:"Fraunces",serif;font-size:26px;font-style:italic;display:inline-flex;align-items:center;gap:48px}
.ticker__row span::after{content:"✶";color:var(--terra);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============ EDITORIAL GRID ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split--top{align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:40px}}

.dropcap::first-letter{font-family:"Fraunces",serif;font-size:4.4em;line-height:.8;float:left;padding:8px 12px 0 0;color:var(--terra);font-weight:500}

/* ============ EXPERTISE LIST ============ */
.expo{border-top:1px solid var(--line)}
.expo__row{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:baseline;padding:38px 0;border-bottom:1px solid var(--line);transition:padding-left .3s,background .3s}
.expo__row:hover{padding-left:16px}
.expo__no{font-family:"Fraunces",serif;font-style:italic;color:var(--terra);font-size:20px}
.expo__name{font-family:"Fraunces",serif;font-size:clamp(26px,3.4vw,40px);font-weight:500}
.expo__desc{color:var(--ink-soft);max-width:48ch;margin-top:10px;font-size:16px}
.expo__tag{font-size:13px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
@media(max-width:680px){.expo__row{grid-template-columns:1fr;gap:8px}.expo__tag{order:-1}}

/* ============ CARDS / PACKS ============ */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:980px){.packs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.packs{grid-template-columns:1fr}}
.pack{
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
  padding:34px;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;
}
.pack:hover{transform:translateY(-5px);box-shadow:0 20px 40px -22px rgba(26,23,20,.4);border-color:var(--ink)}
.pack--best{background:var(--ink);border-color:var(--ink)}
.pack--best .pack__name,.pack--best .pack__price{color:var(--cream)}
.pack--best .pack__desc,.pack--best .pack__dur{color:rgba(251,248,242,.66)}
.pack--best .pack__kicker{color:var(--terra)}
.pack__badge{position:absolute;top:-11px;left:34px;background:var(--terra);color:var(--cream);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:2px}
.pack__kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-bottom:14px}
.pack__name{font-family:"Fraunces",serif;font-size:28px;font-weight:500;margin-bottom:8px}
.pack__desc{font-size:15px;color:var(--ink-soft);margin-bottom:24px;flex-grow:0}
.pack__price-row{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.pack--best .pack__price-row{border-color:rgba(251,248,242,.2)}
.pack__price{font-family:"Fraunces",serif;font-size:34px;font-weight:500}
.pack__dur{font-size:13px;color:var(--ink-mute)}
.pack__actions{display:flex;gap:10px;margin-top:22px}

/* ============ PRODUCT DETAIL ============ */
.prod{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
@media(max-width:900px){.prod{grid-template-columns:1fr;gap:36px}}
.prod__visual{aspect-ratio:4/5;border-radius:6px;display:flex;align-items:flex-end;padding:40px;position:relative;overflow:hidden}
.prod__visual--terracotta{background:linear-gradient(150deg,var(--terra),var(--terra-d))}
.prod__visual--ink{background:linear-gradient(150deg,#2A251F,var(--ink))}
.prod__visual--sage{background:linear-gradient(150deg,#7E8B6E,var(--sage))}
.prod__visual-mark{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(60px,12vw,140px);color:rgba(251,248,242,.92);line-height:.8}
.prod__panel{position:sticky;top:100px}
.incl{list-style:none;display:flex;flex-direction:column;gap:14px;margin:28px 0}
.incl li{display:flex;gap:14px;font-size:16px;color:var(--ink-soft);padding-bottom:14px;border-bottom:1px solid var(--line)}
.incl li::before{content:"—";color:var(--terra);font-weight:600}
.price-block{display:flex;align-items:baseline;gap:14px;margin:8px 0 24px}
.price-block b{font-family:"Fraunces",serif;font-size:48px;font-weight:500}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden}
.qty button{width:42px;height:46px;font-size:18px;font-weight:600}
.qty button:hover{background:var(--paper-2)}
.qty input{width:48px;height:46px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);background:transparent;font-weight:600}

/* ============ CART ============ */
.cart-line{display:grid;grid-template-columns:1fr auto auto auto;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.cart-line__name{font-family:"Fraunces",serif;font-size:22px;font-weight:500}
.cart-line__kicker{font-size:13px;color:var(--terra);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.cart-line__price{font-family:"Fraunces",serif;font-size:20px;white-space:nowrap}
.cart-line__rm{font-size:13px;color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px}
.cart-line__rm:hover{color:var(--terra)}
@media(max-width:640px){.cart-line{grid-template-columns:1fr auto;gap:12px}}
.summary{background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:34px;position:sticky;top:100px}
.summary__row{display:flex;justify-content:space-between;padding:12px 0;font-size:15px;color:var(--ink-soft)}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:18px;margin-top:8px;border-top:1.5px solid var(--ink)}
.summary__total b{font-family:"Fraunces",serif;font-size:32px}

/* ============ FORM ============ */
.form{display:flex;flex-direction:column;gap:22px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:640px){.form__row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field textarea,.field select{
  background:var(--cream);border:1px solid var(--line);border-radius:2px;
  padding:14px 16px;font-size:16px;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--terra);box-shadow:0 0 0 3px rgba(224,98,63,.13)}
.field textarea{resize:vertical;min-height:130px}
.field--check{flex-direction:row;align-items:flex-start;gap:12px}
.field--check input{width:18px;height:18px;margin-top:3px;accent-color:var(--terra)}
.field--check label{text-transform:none;letter-spacing:0;font-weight:400;font-size:14px;color:var(--ink-soft)}

.alert{padding:16px 20px;border-radius:2px;font-size:15px;border-left:3px solid var(--sage);background:var(--cream);margin-bottom:24px}
.alert--ko{border-left-color:var(--terra)}

/* ============ STAT / QUOTE ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media(max-width:700px){.stats{grid-template-columns:1fr;gap:28px}}
.stat b{font-family:"Fraunces",serif;font-size:clamp(48px,7vw,80px);font-weight:500;display:block;line-height:1}
.stat span{font-size:14px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1em}
.bg-ink .stat span{color:rgba(251,248,242,.55)}
.bg-ink .stat b{color:var(--terra)}

.pullquote{font-family:"Fraunces",serif;font-size:clamp(28px,4vw,46px);font-weight:500;line-height:1.2;font-style:italic;max-width:18ch}

/* ============ LEGAL ============ */
.legal{max-width:760px;margin:0 auto}
.legal__meta{font-size:13px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1em;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:40px}
.legal h2{font-family:"Fraunces",serif;font-size:28px;font-weight:500;margin:42px 0 14px}
.legal h3{font-size:19px;margin:28px 0 10px;font-weight:600}
.legal p,.legal li{font-size:16px;line-height:1.75;color:var(--ink-soft);margin-bottom:12px}
.legal ul{padding-left:22px;list-style:disc;margin-bottom:14px}
.legal strong{color:var(--ink)}
.legal a{color:var(--terra);text-decoration:underline;text-underline-offset:3px}

/* ============ COOKIE BAR ============ */
.cookie-bar{position:fixed;bottom:20px;left:20px;right:20px;max-width:560px;margin:0 auto;background:var(--ink);color:var(--cream);border-radius:4px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:90;transform:translateY(140%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cookie-bar.is-on{transform:translateY(0)}
.cookie-bar p{color:rgba(251,248,242,.78);font-size:14px;margin:0}
.cookie-bar a{color:var(--terra);text-decoration:underline}
@media(max-width:540px){.cookie-bar{flex-direction:column;align-items:flex-start}}

/* ============ COLOPHON / FOOTER ============ */
.colophon{background:var(--ink);color:var(--cream);padding:96px 0 36px}
.colophon__top{display:grid;grid-template-columns:1fr 1.1fr;gap:60px}
@media(max-width:860px){.colophon__top{grid-template-columns:1fr;gap:48px}}
.colophon__eyebrow{color:var(--terra)!important;font-size:13px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px}
.colophon__head{font-family:"Fraunces",serif;font-size:clamp(40px,6vw,72px);font-weight:500;line-height:.98;color:var(--cream);margin-bottom:32px}
.colophon__head em{color:var(--terra)}
.colophon__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:560px){.colophon__cols{grid-template-columns:1fr 1fr}}
.colophon__col h5{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:rgba(251,248,242,.5);margin-bottom:16px;font-weight:600}
.colophon__col a,.colophon__col p{display:block;color:rgba(251,248,242,.78);font-size:14px;margin-bottom:9px;line-height:1.7}
.colophon__col a:hover{color:var(--terra)}
.colophon__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;padding-top:26px;border-top:1px solid rgba(251,248,242,.16);font-size:13px;color:rgba(251,248,242,.5)}

/* ============ UTILS ============ */
.center{text-align:center}
.mt-12{margin-top:12px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}.mt-64{margin-top:64px}
.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px}.mb-64{margin-bottom:64px}
.maxw{max-width:46ch}
.flex{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}