/* Tokens — Solenne, direction "Papier" (source : Claude Design). Ne pas modifier sans validation. */
/* Valeurs marquées PROPOSITION : absentes du rendu Design, à valider. */

:root {
  /* Couleurs */
  --papier: #F3F2F2;      /* fond */
  --encre: #201F1D;       /* texte principal, titres */
  --encre-doux: #3B3935;  /* texte courant */
  --gris: #6B665E;        /* micro-texte, légendes */
  --or: #B68235;          /* filets/contours uniquement (contraste 3:1, jamais en texte) */
  --or-profond: #7A5518;  /* texte doré, liens, libellé bouton (contraste ~6:1) */
  --filet: #D9D5CE;       /* séparateurs 1 px */
  --placeholder: #C9C6C1; /* emplacements photo */
  --placeholder-texte: #5B5750;

  /* Typographie */
  --font-titre: 'Cormorant Garamond', Georgia, serif; /* 400 (500 pour le logo) */
  --font-texte: 'Lora', Georgia, serif;               /* 400 + italique 400 */

  --h1-mobile: 56px;      /* interligne .98, letter-spacing -.01em */
  --h1-desktop: 88px;     /* PROPOSITION */
  --h2-mobile: 40px;      /* PROPOSITION, interligne 1.05 */
  --h2-desktop: 56px;     /* PROPOSITION */
  --texte: 16px;          /* interligne 1.55 */
  --texte-petit: 13px;
  --micro: 12px;          /* italique */
  --label: 11px;          /* majuscules, letter-spacing .18em */

  /* Espacements */
  --marge: 24px;          /* marges latérales mobile */
  --bloc: 20px;           /* écart entre blocs */
  --section-s: 36px;
  --section-l: 56px;      /* mobile */
  --section-l-desktop: 96px; /* PROPOSITION */
  --conteneur: 1120px;    /* PROPOSITION */

  /* Formes */
  --filet-epaisseur: 1px;
  --rayon: 4px;

  /* Mouvement (PROPOSITION : sobre, cohérent avec le ton doux) */
  --ease-1: cubic-bezier(0.215, 0.61, 0.355, 1);   /* power2.out */
  --ease-2: cubic-bezier(0.165, 0.84, 0.44, 1);    /* power3.out */
  --reveal-distance: 24px;
  --reveal-duree: 0.8s;
}

/* Bouton : contour 1 px or, fond transparent, rayon 4, jamais plein */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border: var(--filet-epaisseur) solid var(--or);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--or-profond);
  font-family: var(--font-texte);
  font-size: 15px;
  text-decoration: none;
  transition: background-color .3s var(--ease-1);
}
.btn:hover { background-color: rgba(182, 130, 53, .10); } /* teinte or 10 % */

a { color: var(--or-profond); }
a:hover { color: var(--encre); }