/* ============================================================
   ARMANIGHT by BATS — Landing
   Charte graphique : Anton (display), Allura (script),
   Cormorant Garamond (serif), Jost (body).
   ============================================================ */

:root {
  /* Cocktails */
  --tropic-bg:    #C95D1E;
  --tropic-echo:  #E27A30;
  --tropic-ink:   #FFFFFF;
  --tropic-cream: #FFE9C9;

  --cherry-bg:    #A8202F;
  --cherry-echo:  #C8344A;
  --cherry-ink:   #FFFFFF;
  --cherry-cream: #FFD9CE;

  --sour-bg:      #C99220;
  --sour-echo:    #E0AE34;
  --sour-ink:     #2A1A05;
  --sour-cream:   #FFF1B8;

  --lemon-bg:     #5B6A1A;
  --lemon-echo:   #8FA12C;
  --lemon-ink:    #F4F1C0;
  --lemon-cream:  #DDD898;

  --coffee-bg:    #5C3621;
  --coffee-echo:  #8A5A38;
  --coffee-ink:   #F4E1C7;
  --coffee-cream: #E8C9A0;

  /* Neutres */
  --ink:          #1A140F;
  --ink-deep:     #0D0703;
  --paper:        #F4ECDF;
  --paper-deep:   #E8DDC8;
  --muted:        #8C7E68;

  /* Typo */
  --display-font: "Anton", Impact, sans-serif;
  --script-font:  "Allura", cursive;
  --serif-font:   "Cormorant Garamond", "Times New Roman", serif;
  --body-font:    "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body-font);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: italic; font-family: var(--serif-font); font-weight: 400; }
strong { font-weight: 700; }

/* ============================================================
   Switcher de langue (FR / ES) — flottant top-right
   ============================================================ */

.lang-switch {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  font-family: var(--display-font);
  letter-spacing: .15em;
  font-size: .82rem;
}
.lang-switch__link {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 4px;
  transition: color .2s ease;
}
.lang-switch__link:hover { color: var(--ink); }
.lang-switch__link.is-active {
  color: var(--ink);
  font-weight: 400;
  position: relative;
}
.lang-switch__link.is-active::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  bottom: -2px;
  height: 2px;
  background: var(--cherry-bg);
}
.lang-switch__sep { color: var(--muted); }

@media (max-width: 540px) {
  .lang-switch { top: 12px; right: 12px; padding: 6px 12px; font-size: .76rem; }
}

/* ============================================================
   Composants génériques
   ============================================================ */

.overline {
  font-family: var(--display-font);
  letter-spacing: .22em;
  font-size: .8rem;
  text-transform: uppercase;
  line-height: 1.2;
}

.big-title,
.hero__title-display {
  font-family: var(--display-font);
  font-weight: 400;
  line-height: .85;
  letter-spacing: .005em;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1em 1.6em;
  font-family: var(--display-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .92rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px) rotate(-.5deg); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; color: currentColor; }
.btn--ghost:hover { background: currentColor; color: var(--paper); }
.btn--xl { padding: 1.3em 2.2em; font-size: 1.05rem; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  background: var(--cherry-bg);
  color: var(--paper);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 80px 6vw;
}

/* Bandes verticales colorées en arrière-plan */
.hero__stripes {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(10, 1fr);
  z-index: 0;
}
.hero__stripes span { background: var(--c); opacity: .9; filter: brightness(.95); }
.hero__stripes span:nth-child(2n) { opacity: .75; }

/* Gros wordmark ARM ANI GHT empilé en filigrane */
.hero__wordmark {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
  padding: 4vw 6vw;
  z-index: 1;
  pointer-events: none;
}
.hero__wordmark div {
  font-family: var(--display-font);
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: .82;
  color: rgba(255, 255, 255, .14);
  text-align: center;
}

.hero__content {
  position: relative;
  z-index: 2;
  margin: auto 0 0;
  max-width: 760px;
}
.hero__overline {
  font-family: var(--display-font);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: .9rem;
  margin-bottom: 24px;
  color: var(--cherry-cream);
}
.hero__title {
  display: flex; flex-direction: column;
  align-items: flex-start;
  margin-bottom: 28px;
}
.hero__title-script {
  font-family: var(--script-font);
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  line-height: 1;
  color: var(--paper);
  transform: rotate(-3deg);
  margin-left: -4px;
}
.hero__title-display {
  font-size: clamp(4.5rem, 14vw, 11rem);
  color: var(--paper);
  margin-top: -.05em;
}

.hero__tagline {
  font-family: var(--serif-font);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  max-width: 580px;
  color: var(--cherry-cream);
  margin-bottom: 36px;
}
.hero__tagline strong { color: var(--paper); }

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Bandeau scroll en bas — marquee continu plein largeur */
.hero__scroll {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 3;
  font-family: var(--display-font);
  font-size: 1.1rem;
  letter-spacing: .15em;
  color: var(--ink);
  background: var(--paper);
  padding: 14px 0;
  border-top: 2px solid var(--ink);
  overflow: hidden;
  white-space: nowrap;
}
.hero__scroll-track {
  display: inline-flex;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.hero__scroll-track span {
  flex: 0 0 auto;
  min-width: 100vw;
  padding-right: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Cocktails intro
   ============================================================ */

.cocktails-intro {
  background: var(--ink-deep);
  color: var(--paper);
  padding: 140px 6vw 100px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cocktails-intro__inner { max-width: 900px; margin: 0 auto; }
.cocktails-intro .overline { color: var(--tropic-echo); margin-bottom: 18px; }
.cocktails-intro .big-title {
  font-size: clamp(3.5rem, 9vw, 8rem);
  color: var(--paper);
}
.cocktails-intro .big-title em {
  display: block;
  font-family: var(--script-font);
  font-style: normal;
  font-size: clamp(2.2rem, 5vw, 5rem);
  color: var(--tropic-echo);
  margin-top: .1em;
  transform: rotate(-2deg);
  text-transform: none;
}
.cocktails-intro__sub {
  font-family: var(--serif-font);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  margin-top: 32px;
  color: var(--paper-deep);
}

/* ============================================================
   Cocktail section (5 panneaux)
   ============================================================ */

.cocktail {
  position: relative;
  padding: 120px 6vw;
  overflow: hidden;
  color: var(--cream, var(--paper));
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.cocktail[data-cocktail="sour"]   { background: var(--sour-bg);   color: var(--sour-ink);   --echo: var(--sour-echo);   --cream: var(--sour-cream); }
.cocktail[data-cocktail="lemon"]  { background: var(--lemon-bg);  color: var(--lemon-ink);  --echo: var(--lemon-echo);  --cream: var(--lemon-cream); }
.cocktail[data-cocktail="cherry"] { background: var(--cherry-bg); color: var(--cherry-ink); --echo: var(--cherry-echo); --cream: var(--cherry-cream); }
.cocktail[data-cocktail="tropic"] { background: var(--tropic-bg); color: var(--tropic-ink); --echo: var(--tropic-echo); --cream: var(--tropic-cream); }
.cocktail[data-cocktail="coffee"] { background: var(--coffee-bg); color: var(--coffee-ink); --echo: var(--coffee-echo); --cream: var(--coffee-cream); }

/* Bandes verticales */
.cocktail__stripes {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  z-index: 0;
  pointer-events: none;
}
.cocktail__stripes span:nth-child(odd) { background: var(--echo); opacity: .55; }

.cocktail__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr minmax(280px, 480px);
  gap: 56px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

.cocktail--alt .cocktail__inner {
  grid-template-columns: minmax(280px, 480px) 1fr minmax(220px, 320px);
}
.cocktail--alt .cocktail__label { order: 3; }
.cocktail--alt .cocktail__content { order: 2; }
.cocktail--alt .cocktail__photo { order: 1; }

.cocktail__label img {
  width: 100%;
  border-radius: 6px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 255, 255, .15);
  transform: rotate(-2deg);
  transition: transform .4s ease;
}
.cocktail--alt .cocktail__label img { transform: rotate(2deg); }
.cocktail__label img:hover { transform: rotate(0) scale(1.02); }

.cocktail__photo img {
  width: 100%;
  border-radius: 6px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .1);
  transform: rotate(1.5deg);
  transition: transform .4s ease;
}
.cocktail--alt .cocktail__photo img { transform: rotate(-1.5deg); }
.cocktail__photo img:hover { transform: rotate(0) scale(1.02); }

.cocktail__content { padding: 0 8px; }

.cocktail__index {
  font-family: var(--display-font);
  letter-spacing: .22em;
  font-size: .85rem;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--cream);
}

.cocktail__name {
  display: flex; flex-direction: column;
  margin-bottom: 24px;
}
.cocktail__name .display {
  font-family: var(--display-font);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .85;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.cocktail__name .script {
  font-family: var(--script-font);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .95;
  margin-top: -.05em;
  margin-left: .2em;
  color: var(--cream);
  transform: rotate(-3deg);
  align-self: flex-start;
}

.cocktail__pitch {
  font-family: var(--serif-font);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  margin-bottom: 32px;
  max-width: 520px;
}

.cocktail__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.cocktail__cols .overline { margin-bottom: 14px; opacity: .85; }

.recipe { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; }
.recipe li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--body-font);
}
.recipe li span {
  font-family: var(--display-font);
  letter-spacing: .05em;
  font-size: 1.05rem;
}
.recipe li em { font-family: var(--serif-font); font-style: italic; }

.cocktail__steps {
  font-family: var(--body-font);
  font-size: .98rem;
  line-height: 1.6;
}
.cocktail__note {
  font-family: var(--serif-font);
  font-style: italic;
  font-size: .9rem;
  margin-top: 12px;
  opacity: .75;
}

@media (max-width: 1080px) {
  .cocktail__inner,
  .cocktail--alt .cocktail__inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .cocktail__photo,
  .cocktail--alt .cocktail__photo { grid-column: 1 / -1; order: 3; max-width: 600px; margin: 0 auto; }
  .cocktail__label,
  .cocktail--alt .cocktail__label { order: 1; max-width: 280px; }
  .cocktail__content,
  .cocktail--alt .cocktail__content { order: 2; }
}
@media (max-width: 720px) {
  .cocktail { padding: 80px 5vw; }
  .cocktail__inner,
  .cocktail--alt .cocktail__inner { grid-template-columns: 1fr; }
  .cocktail__cols { grid-template-columns: 1fr; gap: 24px; }
  .cocktail__label img,
  .cocktail__label .css-label { max-width: 240px; margin: 0 auto; }
}

/* ============================================================
   Étiquette CSS (pour Armagnac Sour qui n'a pas de PNG)
   ============================================================ */

.css-label {
  position: relative;
  aspect-ratio: 5 / 8;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .35),
    0 0 0 1px rgba(255, 255, 255, .15);
  transform: rotate(-2deg);
  transition: transform .4s ease;
}
.cocktail--alt .css-label { transform: rotate(2deg); }
.css-label:hover { transform: rotate(0) scale(1.02); }

.css-label[data-cocktail="sour"] { background: var(--sour-bg); color: var(--sour-cream); }

.css-label__stripes {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.css-label[data-cocktail="sour"] .css-label__stripes span:nth-child(odd) { background: var(--sour-echo); }

.css-label__wordmark {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr 1fr 1fr;
  align-items: center; justify-items: center;
  padding: 8% 0;
}
.css-label__wordmark div {
  font-family: var(--display-font);
  font-size: 4.4rem;
  line-height: .82;
  color: var(--sour-cream);
  letter-spacing: .01em;
}

.css-label__glass {
  position: absolute;
  inset: 8% 14% 8% 14%;
  display: flex; align-items: center; justify-content: center;
}
.css-label__glass svg { width: 100%; height: 100%; }

.css-label__script {
  position: absolute;
  right: 14%;
  top: 42%;
  font-family: var(--script-font);
  font-size: 1.8rem;
  line-height: 1.05;
  color: var(--sour-cream);
  transform: rotate(-6deg);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.css-label__script em { font-family: var(--script-font); font-style: normal; font-size: 1.5em; }

.css-label__by {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: rotate(90deg) translateX(50%);
  transform-origin: right center;
  font-family: var(--display-font);
  letter-spacing: .25em;
  font-size: 1rem;
  color: var(--sour-cream);
  writing-mode: horizontal-tb;
}

@media (max-width: 720px) {
  .css-label__wordmark div { font-size: 3rem; }
  .css-label__script { font-size: 1.3rem; }
  .css-label__by { font-size: .8rem; }
}

/* ============================================================
   Manifeste (déplacé en fin, version colorée)
   ============================================================ */

.manifeste {
  position: relative;
  padding: 140px 6vw 80px;
  background: var(--ink-deep);
  color: var(--paper);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.manifeste__top {
  max-width: 1100px;
  margin: 0 auto 80px;
  text-align: center;
}
.manifeste .overline {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 28px;
}
.manifeste__title {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 36px;
}
.manifeste__title .display {
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--paper);
}
.manifeste__title .script {
  font-family: var(--script-font);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1;
  margin: -.1em 0;
  transform: rotate(-3deg);
}
.manifeste__title .script:nth-of-type(1) { color: var(--cherry-echo); }
.manifeste__title .script:nth-of-type(2) { color: var(--tropic-echo); }

.manifeste__lead {
  font-family: var(--serif-font);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto;
  color: var(--paper-deep);
}
.manifeste__lead strong { color: var(--paper); font-weight: 600; }

/* Tuiles colorées */
.manifeste__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
}
.manifeste__pillars li {
  position: relative;
  padding: 32px 28px 36px;
  border-radius: 14px;
  overflow: hidden;
  min-height: 280px;
  display: flex; flex-direction: column;
  color: var(--paper);
  transition: transform .35s ease;
}
.manifeste__pillars li:hover { transform: translateY(-6px) rotate(-.5deg); }
.manifeste__pillars li[data-color="tropic"] { background: var(--tropic-bg); --p-echo: var(--tropic-echo); --p-cream: var(--tropic-cream); }
.manifeste__pillars li[data-color="cherry"] { background: var(--cherry-bg); --p-echo: var(--cherry-echo); --p-cream: var(--cherry-cream); }
.manifeste__pillars li[data-color="lemon"]  { background: var(--lemon-bg);  --p-echo: var(--lemon-echo);  --p-cream: var(--lemon-cream); }
.manifeste__pillars li[data-color="sour"]   { background: var(--sour-bg);   --p-echo: var(--sour-echo);   --p-cream: var(--sour-cream); color: var(--sour-ink); }

.pillar__stripes {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  z-index: 0;
}
.pillar__stripes span:nth-child(odd) { background: var(--p-echo); opacity: .55; }

.manifeste__pillars li > * { position: relative; z-index: 1; }

.pillar__num {
  font-family: var(--display-font);
  font-size: 3rem;
  line-height: 1;
  margin-bottom: auto;
  color: var(--p-cream);
}
.manifeste__pillars h3 {
  font-family: var(--display-font);
  font-size: 2.2rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: 60px;
  margin-bottom: 12px;
}
.manifeste__pillars p {
  font-family: var(--body-font);
  font-size: .98rem;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .manifeste__pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .manifeste__pillars { grid-template-columns: 1fr; }
  .manifeste__pillars li { min-height: 200px; }
}

/* ============================================================
   CTA BATS
   ============================================================ */

.bats {
  position: relative;
  background: var(--ink-deep);
  color: var(--paper);
  padding: 160px 6vw 140px;
  overflow: hidden;
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bats__stripes {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  z-index: 0;
}
.bats__stripes span:nth-child(1) { background: var(--tropic-bg); }
.bats__stripes span:nth-child(2) { background: var(--cherry-bg); }
.bats__stripes span:nth-child(3) { background: var(--lemon-bg); }
.bats__stripes span:nth-child(4) { background: var(--sour-bg); }
.bats__stripes span:nth-child(5) { background: var(--coffee-bg); }
.bats__stripes span { opacity: .35; }

.bats__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.bats .overline {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--tropic-echo);
  font-size: 1rem;
  line-height: 1.3;
}
.bats__title {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 36px;
}
.bats__title .display {
  font-family: var(--display-font);
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .85;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.bats__title .script {
  font-family: var(--script-font);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  color: var(--tropic-echo);
  margin: -.05em 0;
  transform: rotate(-3deg);
}
.bats__body {
  font-family: var(--serif-font);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  margin-bottom: 40px;
  color: var(--paper-deep);
}
.bats .btn--solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.bats .btn--solid:hover { background: var(--tropic-echo); border-color: var(--tropic-echo); color: var(--ink); }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 50px 6vw;
}
.footer__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: center;
}
.footer__brand { display: flex; align-items: baseline; gap: 8px; }
.footer__mark { font-family: var(--display-font); font-size: 1.3rem; letter-spacing: .04em; }
.footer__sub { font-family: var(--script-font); font-size: 1.3rem; color: var(--tropic-echo); }
.footer__legal {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--paper-deep);
  text-align: center;
}
.footer__links { display: flex; gap: 18px; }
.footer__links a {
  font-family: var(--display-font);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer__links a:hover { color: var(--tropic-echo); }

@media (max-width: 780px) {
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__brand, .footer__links { justify-content: center; }
}