/* ============================================================
   MADAME Theme Child — Foundation CSS
   Charte : Blanc · Noir · Vert profond foncé
   Phase 1A — fondations uniquement (typo, variables, reset).
   Les sections viendront en Phase 1B.
   ============================================================ */

:root {
  /* Surfaces blanches */
  --white:        #FFFFFF;
  --paper:        #FAFAF8;
  --bone:         #F2F0EB;
  --line:         #E5E3DD;

  /* Surfaces noires */
  --black:        #0A0A0A;
  --ink:          #161616;
  --line-dark:    #1F1F1F;

  /* Texte */
  --graphite:     #3A3A3A;
  --stone:        #6B6B6B;
  --mist:         #9A9A9A;

  /* Accent VERT PROFOND — signature, jamais en surface dominante */
  --forest:       #1B3328;
  --forest-deep:  #0F1E16;
  --forest-soft:  #2D4A3C;

  /* Typographies */
  --serif:         'Playfair Display', 'Times New Roman', serif;
  --serif-italic:  'Cormorant Garamond', Georgia, serif;
  --sans:          'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espacements */
  --gutter:        clamp(20px, 4vw, 80px);
  --section-gap:   clamp(80px, 10vw, 160px);
  --grid-gap:      clamp(16px, 2vw, 32px);

  /* Easings premium */
  --ease:         cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.83, 0, 0.17, 1);

  /* Transitions */
  --tr-fast:   200ms var(--ease);
  --tr-base:   400ms var(--ease);
  --tr-slow:   800ms var(--ease-out);

  /* Layout */
  --max-width:    1700px;
  --content-max:  1280px;
  --reading-max:  720px;

  /* Header */
  --header-h:     72px;
}

/* ============================================================
   Reset minimal (compat thème parent Shoptimizer)
   ============================================================ */
.madame-theme * { box-sizing: border-box; }

body.madame-active {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--white);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.madame-active a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr-fast);
}

body.madame-active img,
body.madame-active picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Typographie éditoriale
   ============================================================ */
.madame-h1, body.madame-active h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.madame-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.madame-h1 em,
.madame-h2 em,
.madame-emphasis {
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--forest);
}

.madame-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}

.madame-lead {
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--graphite);
}

/* Lettrines éditoriales */
.madame-dropcap::first-letter {
  font-family: var(--serif);
  font-size: 4em;
  font-weight: 600;
  color: var(--forest);
  float: left;
  line-height: 0.85;
  margin: 0.15em 0.12em 0 -0.05em;
}

/* ============================================================
   Utilitaires
   ============================================================ */
.madame-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.madame-section {
  padding: var(--section-gap) var(--gutter);
}

.madame-section--paper { background: var(--paper); }
.madame-section--bone  { background: var(--bone); }
.madame-section--black {
  background: var(--black);
  color: var(--white);
  position: relative;
}
.madame-section--black::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(45, 74, 60, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Filets décoratifs vert profond */
.madame-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--forest);
  margin: 1.5rem 0;
}

/* CTA — bouton noir, hover vert profond */
.madame-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--tr-base), transform var(--tr-fast);
}
.madame-cta:hover {
  background: var(--forest);
}
.madame-cta--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.madame-cta--ghost:hover {
  background: var(--ink);
  color: var(--white);
}

/* Labels avec dot vert */
.mad-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}
.mad-label-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--forest);
  display: inline-block;
}

/* ============================================================
   Performance hints
   ============================================================ */
img,
.madame-lazy {
  content-visibility: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Accessibilité focus
   ============================================================ */
body.madame-active *:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}