/* =========================================================================
   GuillaumEvent — DESIGN TOKENS (source unique de l'identité visuelle)
   Extrait du site existant. Toute nouvelle page importe CE fichier :
       <link rel="stylesheet" href="design-tokens.css" />
   → elle hérite des polices, couleurs, boutons, cartes, champs, etc.
   ========================================================================= */

/* Polices (chargées ici pour que chaque page en profite automatiquement) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Great+Vibes&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ---------------------------------------------------------------------
     1) COULEURS — palette brute (primitives)
     --------------------------------------------------------------------- */
  --ge-gold:        #9c7a26;   /* or profond, lisible sur crème */
  --ge-gold-soft:   #b89233;   /* or clair (survols, dégradés) */
  --ge-gold-deep:   #7c5e1d;   /* or sombre (bas des dégradés) */
  --ge-green:       #48592c;   /* vert bouteille (logo) */
  --ge-green-deep:  #2c3719;   /* vert très foncé */
  --ge-ink:         #2b3320;   /* texte principal (vert quasi noir) */
  --ge-ink-soft:    #5a5f44;   /* texte secondaire / atténué */
  --ge-cream:       #f1ead9;   /* fond principal (crème chaud) */
  --ge-cream-deep:  #e8dec5;   /* crème soutenu (bandeaux/sections) */
  --ge-cream-light: #f8f1e2;   /* crème clair (surfaces de cartes) */
  --ge-white:       #fffdf7;   /* blanc cassé (champs de saisie) */

  /* ---------------------------------------------------------------------
     2) RÔLES sémantiques (utilisés partout dans le code)
     --------------------------------------------------------------------- */
  --color-bg:        var(--ge-cream);        /* fond de page */
  --color-bg-alt:    var(--ge-cream-deep);   /* section alternée */
  --color-surface:   var(--ge-cream-light);  /* carte / panneau */
  --color-text:      var(--ge-ink);          /* texte principal */
  --color-text-dim:  var(--ge-ink-soft);     /* texte secondaire */
  --color-primary:   var(--ge-gold);         /* accent principal = or */
  --color-primary-2: var(--ge-gold-soft);
  --color-secondary: var(--ge-green);        /* accent secondaire = vert */
  --color-on-primary:#fbf6e8;                /* texte sur boutons dorés */

  --line:        rgba(72, 89, 44, 0.34);     /* liseré vert */
  --line-soft:   rgba(44, 55, 25, 0.15);     /* liseré discret */

  /* ---------------------------------------------------------------------
     3) TYPOGRAPHIE
     --------------------------------------------------------------------- */
  --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* titres */
  --font-script: 'Great Vibes', cursive;                                   /* accents manuscrits */
  --font-sans:   'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* corps / UI */

  --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;

  --fs-eyebrow: 0.72rem;                       /* sur-titre en capitales */
  --fs-small:   0.85rem;
  --fs-body:    1rem;
  --fs-lead:    clamp(1.05rem, 2vw, 1.2rem);   /* chapô */
  --fs-h3:      clamp(1.3rem, 3vw, 1.6rem);    /* titres de cartes */
  --fs-h2:      clamp(1.9rem, 4.6vw, 3.2rem);  /* titres de section */
  --fs-h1:      clamp(2.4rem, 6vw, 4rem);      /* grand titre */

  --lh-body: 1.7;   --lh-tight: 1.15;

  /* ---------------------------------------------------------------------
     4) ESPACEMENTS / LAYOUT
     --------------------------------------------------------------------- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;   --space-6: 4rem;
  --space-section: clamp(4.5rem, 10vw, 8.5rem);
  --container: 1180px;
  --container-narrow: 820px;
  --header-h: 76px;

  /* ---------------------------------------------------------------------
     5) ARRONDIS
     --------------------------------------------------------------------- */
  --radius-sm:   10px;   /* champs de saisie */
  --radius:      14px;   /* cartes / panneaux */
  --radius-lg:   20px;
  --radius-pill: 100px;  /* boutons */

  /* ---------------------------------------------------------------------
     6) OMBRES (teintées vert, cohérentes avec le site)
     --------------------------------------------------------------------- */
  --shadow-sm:         0 6px 16px -10px rgba(44, 55, 25, 0.35);
  --shadow-card:       0 12px 32px -20px rgba(44, 55, 25, 0.32);
  --shadow-card-hover: 0 24px 48px -26px rgba(44, 55, 25, 0.45);
  --shadow-gold:       0 10px 26px -12px rgba(124, 94, 29, 0.55);

  /* ---------------------------------------------------------------------
     7) TRANSITIONS
     --------------------------------------------------------------------- */
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 180ms var(--ease);
  --t-med:  320ms var(--ease);
  --t-slow: 520ms var(--ease);
}

/* =========================================================================
   RESET LÉGER
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* =========================================================================
   CLASSES DE BASE RÉUTILISABLES (mêmes que le site)
   ========================================================================= */

/* Conteneur */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
.container--narrow { max-width: var(--container-narrow); }

/* Sur-titre + titres */
.eyebrow {
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  letter-spacing: 0.32em; text-transform: uppercase;
  font-size: var(--fs-eyebrow); color: var(--color-primary); margin-bottom: 1rem;
}
.h1, .h2, .title {
  font-family: var(--font-serif); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); color: var(--color-text); letter-spacing: 0.01em;
}
.h1 { font-size: var(--fs-h1); }
.h2, .title { font-size: var(--fs-h2); }
.h3 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h3); color: var(--color-text); }
.lead { font-size: var(--fs-lead); color: var(--color-text-dim); max-width: 56ch; }

/* Lien doré souligné */
.link-gold { color: var(--color-primary-2); border-bottom: 1px solid var(--line); transition: color var(--t-fast), border-color var(--t-fast); }
.link-gold:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* -------------------------------------------------------------------------
   BOUTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  letter-spacing: 0.06em; font-size: 0.9rem;
  padding: 0.95rem 1.9rem; border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med),
              color var(--t-med), border-color var(--t-med), filter var(--t-med);
}
.btn--small { padding: 0.6rem 1.25rem; font-size: 0.8rem; }
.btn--block { width: 100%; }

.btn--gold {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ge-gold-soft), var(--ge-gold) 55%, var(--ge-gold-deep));
  color: var(--color-on-primary);
  animation: goldPulse 3s ease-in-out infinite;
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 10px 24px -12px rgba(124, 94, 29, 0.5); }
  50%      { box-shadow: 0 12px 30px -10px rgba(156, 122, 38, 0.85), 0 0 18px -2px rgba(201, 168, 75, 0.5); }
}
.btn--gold::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 252, 240, 0.7), transparent);
  transform: skewX(-20deg); animation: btnSheen 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes btnSheen { 0% { left: -130%; } 38%, 100% { left: 175%; } }
.btn--gold:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.07) saturate(1.06); }
.btn--gold:hover::after { animation-duration: 1.1s; }

.btn--ghost {
  position: relative; overflow: hidden;
  border-color: var(--line); color: var(--color-text); background: rgba(255, 253, 246, 0.25);
}
.btn--ghost:hover {
  border-color: var(--color-primary); color: var(--ge-gold-deep); transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--color-primary), 0 12px 26px -16px rgba(156, 122, 38, 0.6);
}

/* -------------------------------------------------------------------------
   CARTE / PANNEAU
   ------------------------------------------------------------------------- */
.card {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--ge-cream-deep), var(--ge-cream-light));
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.card--hover:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--shadow-card-hover); }

/* Pastille / badge doré */
.badge {
  display: inline-block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-primary); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
}

/* -------------------------------------------------------------------------
   CHAMPS DE FORMULAIRE
   ------------------------------------------------------------------------- */
.field { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.field > label { font-size: 0.82rem; letter-spacing: 0.08em; color: var(--color-text); }
.input, .field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 0.95rem; font-weight: var(--fw-light);
  color: var(--color-text); background: rgba(255, 253, 247, 0.75);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; color-scheme: light;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(156, 122, 38, 0.18); background: var(--ge-white);
}
.field textarea { resize: vertical; min-height: 120px; }
::placeholder { color: rgba(90, 95, 68, 0.55); }

/* -------------------------------------------------------------------------
   UTILITAIRES
   ------------------------------------------------------------------------- */
.section { padding-block: var(--space-section); position: relative; }
.stack > * + * { margin-top: var(--space-2); }
.divider { height: 1px; background: var(--line-soft); border: 0; }

/* Accessibilité : respect du « mouvement réduit » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }