/* ══════════════════════════════════════════
   BASE — Reset · Variables · Typographie · Keyframes
   ══════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

button, a {
  touch-action: manipulation;
}

section, #cta {
  scroll-margin-top: 68px;
}

/* ── TOKENS Z-INDEX (hiérarchie documentée) ── */
:root {
  --z-mobile-menu:  490;
  --z-nav:          500;
  --z-back-top:    4999;
  --z-controls:    5000;   /* #lang-btn, #tw */
  --z-lightbox:    8000;
  --z-grain:       9997;
  --z-cursor:      9998;
  --z-progress:    9999;
  --z-loader:     99999;
  --z-skip:      100000;
}

/* ── TOKENS THÈME ── */
[data-theme="light"] {
  --bg:       #f7f0e3;
  --bg2:      #ede0c4;
  --bg3:      #e4d4ae;
  --white:    #fff;
  --ink:      #1a0c03;
  --ink2:     #2b1506;
  --muted:    #7a5230;
  --gold:     #9a7318;
  --gold2:    #c49228;
  --gold3:    #e8c46a;
  --sienna:   #7a2e08;
  --sienna2:  #5c1e04;
  --border:   rgba(154, 115, 24, 0.18);
  --border2:  rgba(154, 115, 24, 0.32);
  --card-bg:  #fff;
  --section-alt: #fff;
}

[data-theme="dark"] {
  --bg:       #0f0803;
  --bg2:      #1a0e05;
  --bg3:      #251205;
  --white:    #1a0e05;
  --ink:      #faf6ee;
  --ink2:     #f0e6d0;
  --muted:    #c49a60;
  --gold:     #c49228;
  --gold2:    #e8c46a;
  --gold3:    #f5d88a;
  --sienna:   #8b3a10;
  --sienna2:  #6a2808;
  --border:   rgba(196, 146, 40, 0.15);
  --border2:  rgba(196, 146, 40, 0.3);
  --card-bg:  #1a0e05;
  --section-alt: #1a0e05;
}

/* ── BODY ── */
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  transition: background .5s, color .5s;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── ACCESSIBILITÉ ── */
:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 3px;
}

/* Skip to content : masqué jusqu'au focus clavier */
.skip-to-content {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip);
  padding: 10px 18px;
  background: var(--gold);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transform: translateY(-200%);
  transition: transform .22s cubic-bezier(.25, .46, .45, .94);
}
.skip-to-content:focus {
  transform: translateY(0);
  outline: 2px solid var(--gold3);
  outline-offset: 2px;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .r { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── BATTERY SAVER sur tactile (pointer: coarse + hover: none) ──
   Ralentit ou désactive les animations permanentes sur mobile/tablette.
   Impact : ~0 perceptible, gain batterie réel. */
@media (hover: none) and (pointer: coarse) {
  #grain { animation: none; }
  .hero-ring-outer { animation-duration: 180s; }
  .hero-ring-inner { animation-duration: 120s; }
  .queso-ring      { animation-duration: 90s; }
  .queso-ring2     { animation-duration: 150s; }
  .mq-track        { animation-duration: 60s; }
  .hero-logo-disk  { animation: none; }
  .cont-circle     { animation: none; }
}

::selection        { background: var(--gold2); color: #fff; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--gold); }

/* ── TITRES COMMUNS ── */
.sec-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

h2.sec-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.02;
  font-weight: 300;
  color: var(--ink);
  transition: color .5s;
}
h2.sec-h em { font-style: italic; color: var(--sienna); }

.sec-body {
  font-size: 15px;
  line-height: 1.95;
  color: var(--muted);
  font-weight: 300;
}

/* ── RÉVÉLATION AU SCROLL ── */
.r {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s, transform .9s;
}
.r.on { opacity: 1; transform: none; }
.r.delay1 { transition-delay: .18s; }
.r.delay2 { transition-delay: .34s; }
.r.left  { transform: translateX(-36px); }
.r.right { transform: translateX(36px); }
.r.left.on, .r.right.on { transform: none; }

/* ── GRAIN ── */
#grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
  animation: grainAnim 1.2s steps(2) infinite;
}

/* ── FLOU DE SECTION (raccords) ── */
.sf-top { position: relative; }
.sf-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 70px;
  pointer-events: none;
  z-index: 3;
}

.sf-bot { position: relative; }
.sf-bot::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  pointer-events: none;
  z-index: 3;
}

[data-theme="light"] #historia.sf-top::before { background: linear-gradient(to bottom, #f7f0e3, transparent); }
[data-theme="dark"]  #historia.sf-top::before { background: linear-gradient(to bottom, #0f0803, transparent); }

[data-theme="light"] #valeurs.sf-top::before  { background: linear-gradient(to bottom, #ede0c4, transparent); }
[data-theme="dark"]  #valeurs.sf-top::before  { background: linear-gradient(to bottom, #0f0803, transparent); }

[data-theme="light"] #queso.sf-top::before    { background: linear-gradient(to bottom, #fff, transparent); }
[data-theme="dark"]  #queso.sf-top::before    { background: linear-gradient(to bottom, #1a0e05, transparent); }
[data-theme="light"] #queso.sf-bot::after     { background: linear-gradient(to bottom, transparent, #f7f0e3); }
[data-theme="dark"]  #queso.sf-bot::after     { background: linear-gradient(to bottom, transparent, #0f0803); }

[data-theme="light"] #vente.sf-top::before    { background: linear-gradient(to bottom, #f7f0e3, transparent); }
[data-theme="dark"]  #vente.sf-top::before    { background: linear-gradient(to bottom, #0f0803, transparent); }
[data-theme="light"] #vente.sf-bot::after     { background: linear-gradient(to bottom, transparent, #7a2e08); }
[data-theme="dark"]  #vente.sf-bot::after     { background: linear-gradient(to bottom, transparent, #3d1c08); }

[data-theme="light"] #contacto.sf-top::before { background: linear-gradient(to bottom, #7a2e08, transparent); }
[data-theme="dark"]  #contacto.sf-top::before { background: linear-gradient(to bottom, #3d1c08, transparent); }
[data-theme="light"] #contacto.sf-bot::after  { background: linear-gradient(to bottom, transparent, #2b1506); }
[data-theme="dark"]  #contacto.sf-bot::after  { background: linear-gradient(to bottom, transparent, #0a0502); }

/* ── KEYFRAMES ── */
@keyframes fadeUp     { to { opacity: 1; transform: none; } }
@keyframes slowSpin   { to { transform: rotate(360deg); } }
@keyframes floatBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes marquee    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes grainAnim  { 0% { background-position: 0 0; } 25% { background-position: 30% 20%; } 50% { background-position: 60% 50%; } 75% { background-position: 20% 80%; } 100% { background-position: 0 0; } }
@keyframes shimmerLine { 0% { left: -60%; } 100% { left: 160%; } }
@keyframes pulseSlow  { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.05); opacity: 1; } }