/*
  BéBa Vins — Tasting · Thème « Tapis de jeu » (V3 validée le 28/10/2026).
  Toutes les valeurs visuelles du site sont ici : couleurs, polices, tailles,
  espacements, rayons, ombres, durées, images de décor. app.css n'utilise que
  ces variables.
  Polices : EB Garamond 500 et Jost (variable), licence OFL (voir fonts/).
  Décors : img/decor/ (logo ivoire, poisson vert, motif du tapis).
*/

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marque */
  --brand-green: #5E8243;
  --brand-felt: #3F5E2E;          /* tapis : vert BéBa assombri, texte ivoire à 7:1 */
  --brand-felt-deep: #2F4A26;
  --brand-ivory: #FFFCF6;
  --brand-mist: #CFDCC4;          /* texte secondaire sur le tapis, 5:1 */
  --brand-claret: #7A2E3A;        /* Signature */

  /* Couleurs */
  --color-page: url("../img/decor/motif-feutre.webp") 0 0 / 96px 96px repeat, var(--brand-felt);
  --color-surface: #FFFFFF;       /* blanc pur : 8 photos ont un fond blanc opaque */
  --color-text: #1C2618;
  --color-text-muted: #56604F;
  --color-line: #DCE3D5;
  --color-line-strong: #2E4023;
  --color-accent: var(--brand-ivory);
  --color-accent-text: var(--brand-felt);
  --color-chip: transparent;
  --color-card-back: url("../img/decor/logo-ivoire.webp") center / 58% auto no-repeat, var(--brand-green);
  --color-card-back-text: transparent; /* le mot « BéBa » est porté par le logo */
  --color-signature: var(--brand-claret);
  --color-signature-text: #FFFFFF;
  --color-backdrop: rgba(20, 30, 16, 0.7);
  --color-on-page: var(--brand-ivory);
  --color-on-page-muted: var(--brand-mist);
  --color-on-page-line: rgba(255, 252, 246, 0.4);
  --color-on-page-line-strong: rgba(255, 252, 246, 0.6);
  --color-bar: var(--brand-felt-deep);
  --color-sheet: var(--color-page);

  /* Typographie */
  --font-body: "Jost", "Century Gothic", system-ui, sans-serif;
  --font-display: "EB Garamond", Garamond, Georgia, serif;
  --font-size-xs: 0.875rem;
  --font-size-s: 1rem;
  --font-size-m: 1.25rem;
  --font-size-l: 1.625rem;
  --font-size-xl: 2.375rem;
  --font-size-index: 1.375rem;
  --font-size-sheet-title: 2rem;
  --font-size-mini: 1.0625rem;
  --font-size-mini-price: 0.9375rem;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-display: 500;
  --line-height: 1.45;
  --line-height-tight: 1.15;
  --letter-spacing-label: 0.14em;

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 18px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --home-gap: 28px;

  /* Bordures, rayons, ombres
     --shadow-card dessine aussi le cadre de la carte : marge blanche puis filet vert. */
  --border-width: 1px;
  --border-width-strong: 2px;
  --radius-card: 16px;
  --radius-button: 999px;
  --radius-badge: 3px;
  --radius-sheet: 22px;
  --radius-mini-card: 12px;
  --shadow-card:
    inset 0 0 0 8px #FFFFFF,
    inset 0 0 0 9px var(--brand-green),
    0 24px 40px -20px rgba(0, 0, 0, 0.55);
  --shadow-mini-card:
    inset 0 0 0 6px #FFFFFF,
    inset 0 0 0 7px var(--brand-green),
    0 18px 30px -16px rgba(0, 0, 0, 0.6);
  --shadow-bar: 0 -1px 0 rgba(255, 252, 246, 0.15);
  --shadow-sheet: 0 -1px 0 rgba(255, 252, 246, 0.2);

  /* Carte : le poisson, « couleur » du jeu */
  --card-suit: url("../img/decor/poisson-vert.webp") center / contain no-repeat;
  --card-index-suit-width: 18px;
  --card-index-suit-height: 27px;
  --card-pip-width: 20px;
  --card-pip-height: 30px;
  --card-pip-offset: 14px;
  --card-pip-space: 52px;

  /* Accueil : deux cartes en éventail derrière le dos */
  --fan-left-face: url("../img/decor/poisson-vert.webp") 22px 20px / auto 34px no-repeat, #FFFFFF;
  --fan-right-face: url("../img/decor/poisson-vert.webp") right 22px bottom 20px / auto 34px no-repeat, #FFFFFF;
  --fan-left-transform: rotate(-11deg) translate(-38px, 10px);
  --fan-right-transform: rotate(10deg) translate(38px, 8px);

  /* My hand : petites cartes en éventail */
  --mini-card-min-height: 200px;
  --mini-card-padding-top: 48px;
  --mini-card-suit-top: 16px;
  --mini-card-suit-width: 16px;
  --mini-card-suit-height: 24px;
  --mini-card-gap: 12px;
  --mini-card-tilt-left: rotate(-5deg) translateY(8px);
  --mini-card-tilt-right: rotate(5deg) translateY(8px);

  /* Dimensions */
  --page-max-width: 960px;
  --card-min-width: 300px;          /* une carte par ligne sur téléphone, 2 ou 3 colonnes sur tablette */
  --card-photo-height: 270px;
  --card-back-design-width: 230px;
  --card-back-design-height: 345px;
  --tap-size: 48px;
  --home-min-height: 90vh;
  --card-perspective: 1400px;
  --sheet-max-height: 80vh;
  --bar-height: 84px;

  /* Mouvement */
  --flip-duration: 0.6s;
  --deal-duration: 0.4s;
  --deal-stagger: 50ms;
  --deal-offset: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}