@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

/*
  Système visuel feetch, tiré des valises : vert forêt mat, ivoire, poignées sable, ambre chaud.
  Typographie : Poppins seule, 4 tailles, titres en 600 serrés, mot-clé en italique 400 dégradé, texte en 400.
  Arrondis : pastille pour les boutons, 32px les cartes (24px à l'intérieur), 40px les grands médias.
*/
:root {
  --ivory: #f4efe4;
  --ivory-hi: #fbf8f1;
  --sand: #e6dac3;
  --sand-deep: #cdbb98;
  --forest: #1d3b30;
  --forest-hi: #2d5a47;
  --forest-deep: #10241c;
  --night: #0b1a14;
  --amber: #e7a74a;
  --amber-hi: #f5d08c;
  --amber-deep: #c77a2c;
  --ink: #13211b;
  --ink-soft: #4d5c54;

  --g-amber: linear-gradient(120deg, #f7d894 0%, #eab052 45%, #d0822f 100%);
  --g-text-light: linear-gradient(100deg, #2d5a47 0%, #1d3b30 45%, #c77a2c 100%);
  --g-text-dark: linear-gradient(100deg, #fbf3df 0%, #f5d08c 50%, #e7a74a 100%);
  --g-ivory:
    radial-gradient(90% 70% at 12% 0%, #fffcf5 0%, transparent 60%),
    radial-gradient(80% 70% at 100% 100%, #eadcc2 0%, transparent 60%),
    var(--ivory);
  --g-forest:
    radial-gradient(70% 60% at 15% 10%, #2f5f4a 0%, transparent 60%),
    radial-gradient(60% 70% at 95% 95%, #08150f 0%, transparent 60%),
    radial-gradient(40% 40% at 88% 12%, rgba(231, 167, 74, 0.22) 0%, transparent 70%),
    var(--forest);
  --g-night:
    radial-gradient(60% 50% at 50% 0%, rgba(45, 90, 71, 0.55) 0%, transparent 70%),
    radial-gradient(50% 50% at 90% 100%, rgba(231, 167, 74, 0.14) 0%, transparent 70%),
    var(--night);
  --g-amber-block:
    radial-gradient(70% 70% at 10% 0%, #f9dd9f 0%, transparent 60%),
    radial-gradient(70% 70% at 100% 100%, #d0822f 0%, transparent 65%),
    var(--amber);

  --fs-hero: clamp(3rem, 7vw, 7.4rem);
  --fs-title: clamp(2.5rem, 5.2vw, 5.2rem);
  --fs-sub: clamp(1.3rem, 1.9vw, 1.75rem);
  --fs-body: 1.0625rem;
  --fs-small: .82rem;

  --r-pill: 999px;
  --r-card: 32px;
  --r-media: 40px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --pad-x: clamp(16px, 5vw, 80px);
  --max: 1360px;
  --head-top: clamp(110px, 18vh, 160px);

  /* compatibilité avec les anciens noms */
  --bg: var(--ivory);
  --bg-2: var(--sand);
  --surface: var(--ivory-hi);
  --ink-dim: #6d7a72;
}