/* ============================================
   VARIABLES.CSS — couleurs, typographie, espacements
   ============================================ */

/* --- Polices (hébergées localement) --- */

@font-face {
  font-family: 'Baskervville';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/baskervville-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Avenir Next Condensed Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/avenir-next-condensed-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Avenir Next Condensed Web';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/avenir-next-condensed-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Avenir Next Condensed Web';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/avenir-next-condensed-500.woff2') format('woff2');
}

:root {
  /* Couleurs de la marque */
  --color-green-dark: #324d3d;
  --color-green-pale: #d9e5d7;
  --color-green-soft: #c5d6c2;
  --color-ivory: #faf7f0;
  --color-black: #121d17;
  --color-gold: #e3bc10;
  --color-brick: #8b3a2e;

  /* Couleurs par rôle */
  --color-primary: var(--color-green-dark);
  --color-secondary: var(--color-green-soft);
  --color-accent: var(--color-gold);
  --color-bg: var(--color-green-pale);
  --color-bg-alt: var(--color-ivory);
  --color-text: var(--color-black);
  --color-text-light: var(--color-ivory);
  --color-border: #eeeeee;
  --color-error: var(--color-brick);
  --color-overlay: rgba(50, 77, 61, 0.75);
  --color-backdrop: rgba(18, 29, 23, 0.6);
  --color-formats-panel: rgba(250, 247, 240, 0.93);
  --color-tape: #d9d9d9;

  /* Typographie */
  --font-heading: 'Baskervville', 'Baskerville', Georgia, serif;
  --font-body: 'Avenir Next Condensed Web', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
  --font-button: var(--font-body);

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;

  /* Tailles par rôle (desktop, réduites plus bas) */
  --font-size-h1: 3.75rem;
  --font-size-h2: var(--font-size-2xl);
  --font-size-h3: var(--font-size-xl);
  --font-size-cta-title: var(--font-size-3xl);
  --font-size-display: 6rem;
  --font-size-body: var(--font-size-lg);
  --font-size-small: var(--font-size-base);
  --font-size-legal: var(--font-size-sm);
  --font-size-button: var(--font-size-md);
  --font-size-nav: var(--font-size-xl);

  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  --letter-spacing-body: -0.01em;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-display: -0.04em;
  --letter-spacing-kicker: 0.22em;

  /* Espacements */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Bordures & Rayons — coins à peine adoucis, plus nets */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-full: 9999px;
  --border-color: var(--color-border);

  /* Ombres (teinte brique de la maquette) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 4px 3px rgba(139, 58, 46, 0.39);

  /* Tailles fixes */
  --size-line: 2px;
  --size-touch: 3rem;
  --size-icon-sm: 1.75rem;
  --size-icon-lg: 7rem;
  --size-logo-header: 26rem;
  --size-logo-footer: 21rem;

  /* Dimensions de la page d'accueil (tirées de la maquette 1440 px) */
  --width-hero-media: 33.4375rem;
  --position-home-hero-image: center 46%;
  --size-ornament: 19rem;
  --offset-ornament: -4.5rem;
  --size-ornament-mobile: 9rem;
  --offset-ornament-mobile: -2rem;
  --width-pain-card: 21.75rem;
  --height-pain-card: 20.25rem;
  --width-approach-bg: 42.5%;
  --width-approach-portrait: 25.875rem;
  --offset-approach-portrait: 12.875rem;
  --width-service-card: 31.5rem;
  --size-sparkle: 10rem;
  --offset-sparkle-top: -5.75rem;
  --offset-sparkle-left: -3.5rem;
  --size-sparkle-mobile: 6rem;
  --offset-sparkle-mobile: -1.25rem;
  --width-about-media: 28.5rem;
  --width-about-text: 37.5rem;
  --width-faq-list: 44.6875rem;

  /* Dimensions des pages intérieures */
  --width-dialog: 32rem;
  /* Page À propos */
  --font-size-about-statement: 2.375rem;
  --position-about-hero-image: center 22%;
  --position-about-training: center 38%;
  --position-about-dessert: center;
  --position-about-portrait: center 16%;
  --position-about-pillars-photo: center 34%;
  --width-about-photo: 24rem;
  --width-about-pillars-panel: 72rem;
  --width-about-inspiration: 18rem;
  --width-page-subtitle: 38rem;
  /* Page Contact — mêmes cadrages photo que Services, À propos et Processus */
  --position-contact-hero-image: center 16%;
  --position-contact-plate: center 58%;
  --position-contact-next-photo: center 46%;
  /* Page Processus — mêmes cadrages photo que Services et À propos */
  --position-process-hero-image: 24% 46%;
  --position-process-portrait: center 22%;
  --position-process-plate: center 58%;
  --position-process-dessert: center;
  --position-process-training: center 46%;
  --position-process-between: center 42%;
  --position-process-doubts-photo: center 76%;
  /* Hero Services — photo à gauche, titre et bouton à droite */
  --width-services-hero-media: 32.5rem;
  --font-size-services-hero: 2.75rem;
  --measure-services-hero-title: 13.2em;
  --measure-services-hero-subtitle: 16.4em;
  --position-services-hero-image: 34% 46%;
  /* Section « individuelle ou en couple » */
  --position-formats-photo: center 39.57%;
  --width-formats-panel: 60rem;
  --radius-formats-panel: var(--radius-sm);
  --width-formats-tape-strip: 11.2rem;
  --height-formats-tape-strip: 3.5rem;
  --rotate-formats-tape: -6.88deg;
  --width-plan-card: 23rem;
  --width-prices: 28rem;
  --width-offer-photo: 22rem;
  --position-offer-photo: center 72%;
  --offset-plan-featured: -1rem;

  /* Largeurs max */
  --max-width-content: 720px;
  --max-width-header: 52rem;
  --max-width-text: 40rem;
  --max-width-site: 1240px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* Tablette → ≤ 1024px */
@media (max-width: 1024px) {
  :root {
    --font-size-h1: var(--font-size-4xl);
    --font-size-display: 4.5rem;
    --font-size-nav: var(--font-size-lg);
    --size-icon-lg: 5.5rem;
    --font-size-about-statement: 2rem;
  }
}

/* Mobile → ≤ 768px */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.625rem;
    --font-size-h3: var(--font-size-lg);
    --font-size-cta-title: var(--font-size-xl);
    --font-size-display: var(--font-size-3xl);
    --font-size-services-hero: var(--font-size-xl);
    --font-size-body: var(--font-size-md);
    --space-4xl: var(--space-3xl);
    --font-size-about-statement: var(--font-size-xl);
    --size-logo-header: 12rem;
    --size-logo-footer: 9rem;
    --size-icon-lg: 2.75rem;
    --size-ornament-mobile: 6rem;
    --offset-ornament-mobile: calc(var(--space-md) * -1);
    --size-sparkle-mobile: 3.25rem;
    --offset-sparkle-mobile: var(--space-sm);
    --width-formats-tape-strip-mobile: 7.2rem;
    --height-formats-tape-strip-mobile: 1.8rem;
  }
}

/* Mobile petit → ≤ 480px */
@media (max-width: 480px) {
  :root {
    --font-size-h1: var(--font-size-2xl);
    --space-4xl: 3.5rem;
  }
}