/*
 * Charte graphique Jurassic Fruit appliquée à Bootstrap 5.
 * Source : dépôt design-branding (DESIGN-SYSTEM.md, mini guide septembre 2026).
 * Palette de marque : day #FCF9F5, bone #DBD7C8, stone #ADA793, ash #716E62, peat #34322D,
 * dusk #1A1A1A, night #000000. Accent d'action « sun » #FFC761 → #F7A816 (seule couleur saturée).
 * Fonctionnel : leaf (succès, vert), sale (erreur, rouge). Typographie : Inter 400 / 500 / 600 uniquement
 * (Scale, la fonte display, est sous licence Adobe et ne peut pas être auto-hébergée).
 */

/* --- Fonte ------------------------------------------------------------------- */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url("../fonts/inter-latin-400.f837d382a885.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url("../fonts/inter-latin-500.42b95430773b.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src: url("../fonts/inter-latin-600.75fb76ec3559.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url("../fonts/inter-latin-ext-400.9159859e7aa8.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url("../fonts/inter-latin-ext-500.656e8d21838c.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; src: url("../fonts/inter-latin-ext-600.8f9364515dfc.woff2") format("woff2"); }

/* --- Tokens ------------------------------------------------------------------- */
:root {
  --jf-day: #FCF9F5; --jf-sand-100: #F9F5F0; --jf-sand-200: #E5E3DF; --jf-sand-300: #E1D8CC;
  --jf-bone: #DBD7C8; --jf-stone: #ADA793; --jf-ash: #716E62; --jf-peat: #34322D; --jf-dusk: #1A1A1A; --jf-night: #000000;
  --jf-white: #FFFFFF; --jf-control-border: #DDDDDD; --jf-hover: #F0F0F0;
  --jf-sun-100: #FFF2DB; --jf-sun-300: #FFC761; --jf-sun-400: #FFBB42; --jf-sun-500: #F7A816; --jf-on-sun: #2C2C2C;
  --jf-leaf-100: #EAF6DB; --jf-leaf-600: #397E1B; --jf-leaf-700: #3F6B12;
  --jf-sale-100: #FDECEC; --jf-sale-600: #D60000;
  --jf-radius-xs: 4px; --jf-radius-sm: 8px; --jf-radius-md: 12px; --jf-radius-lg: 20px; --jf-radius-pill: 999px;
  --jf-shadow: 0 2px 8px rgba(219, 215, 200, .55);   /* ombre teintée sable, jamais noire */

  /* Variables Bootstrap redirigées vers la charte */
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-bg: var(--jf-day);
  --bs-body-color: var(--jf-peat);
  --bs-secondary-color: var(--jf-ash);
  --bs-tertiary-bg: var(--jf-day);
  --bs-secondary-bg: var(--jf-sand-100);
  --bs-border-color: var(--jf-sand-200);
  --bs-heading-color: var(--jf-night);
  --bs-link-color: var(--jf-dusk); --bs-link-hover-color: var(--jf-night);
  --bs-link-color-rgb: 26, 26, 26; --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-primary: var(--jf-dusk); --bs-primary-rgb: 26, 26, 26;
  --bs-success: var(--jf-leaf-600); --bs-success-rgb: 57, 126, 27;
  --bs-danger: var(--jf-sale-600); --bs-danger-rgb: 214, 0, 0;
  --bs-warning: var(--jf-sun-500); --bs-warning-rgb: 247, 168, 22;
  --bs-info: var(--jf-stone); --bs-info-rgb: 173, 167, 147;
  --bs-border-radius: var(--jf-radius-sm); --bs-border-radius-sm: var(--jf-radius-xs); --bs-border-radius-lg: var(--jf-radius-md);
  --bs-focus-ring-color: rgba(255, 187, 66, .45);
}

body { font-size: 14px; -webkit-font-smoothing: antialiased; }
b, strong, th, .fw-bold, .fw-semibold, h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { letter-spacing: -0.02em; }
a { text-underline-offset: 2px; }
.text-secondary { color: var(--jf-ash) !important; }
.bg-body-tertiary { background-color: var(--jf-day) !important; }

/* --- Surfaces -------------------------------------------------------------------- */
.card { background: var(--jf-white); border: 1px solid var(--jf-sand-200); border-radius: var(--jf-radius-md); }
.card-header { background: var(--jf-sand-100); border-bottom-color: var(--jf-sand-200); color: var(--jf-peat); }
.shadow-sm { box-shadow: var(--jf-shadow) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--jf-peat); --bs-table-border-color: var(--jf-sand-200);
         --bs-table-hover-bg: var(--jf-hover); --bs-table-striped-bg: var(--jf-sand-100); }
.table-light { --bs-table-bg: var(--jf-sand-100); --bs-table-color: var(--jf-ash); }
.table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 500 !important; color: var(--jf-ash); }
.list-group { --bs-list-group-bg: var(--jf-white); --bs-list-group-border-color: var(--jf-sand-200); --bs-list-group-color: var(--jf-peat); }
.modal-content { border: 1px solid var(--jf-sand-200); border-radius: var(--jf-radius-lg); background: var(--jf-white); }
.modal-header, .modal-footer { border-color: var(--jf-sand-200); }
.dropdown-menu { --bs-dropdown-bg: var(--jf-white); --bs-dropdown-border-color: var(--jf-sand-200); --bs-dropdown-border-radius: var(--jf-radius-sm);
                 --bs-dropdown-link-color: var(--jf-peat); --bs-dropdown-link-hover-bg: var(--jf-hover); --bs-dropdown-link-active-bg: var(--jf-sun-100);
                 --bs-dropdown-link-active-color: var(--jf-dusk); box-shadow: var(--jf-shadow); }

/* --- Navigation -------------------------------------------------------------------- */
.navbar { background: var(--jf-day) !important; border-bottom: 1px solid var(--jf-sand-300) !important; }
.navbar .nav-link { color: var(--jf-peat); font-weight: 500; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--jf-night); }
.navbar-brand img { width: auto; display: block; }
.brand-suffix { font-weight: 600; color: var(--jf-night); letter-spacing: -0.02em; font-size: 1.05rem; }

/* --- Contrôles --------------------------------------------------------------------- */
.form-control, .form-select { border-color: var(--jf-control-border); border-radius: var(--jf-radius-xs); color: var(--jf-peat); background-color: var(--jf-white); }
.form-control:focus, .form-select:focus { border-color: var(--jf-sun-400); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-control::placeholder { color: var(--jf-stone); }
.form-check-input:checked { background-color: var(--jf-dusk); border-color: var(--jf-dusk); }
.form-check-input:focus { border-color: var(--jf-sun-400); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-label { font-weight: 500; color: var(--jf-peat); }
.form-text { color: var(--jf-ash); }

.btn { border-radius: var(--jf-radius-pill); font-weight: 600; font-size: 14px; letter-spacing: 0; }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--jf-day), 0 0 0 4px var(--jf-sun-400); }
.btn-primary { --bs-btn-bg: var(--jf-dusk); --bs-btn-border-color: var(--jf-dusk); --bs-btn-color: var(--jf-day);
               --bs-btn-hover-bg: var(--jf-night); --bs-btn-hover-border-color: var(--jf-night); --bs-btn-hover-color: var(--jf-day);
               --bs-btn-active-bg: var(--jf-night); --bs-btn-active-border-color: var(--jf-night); --bs-btn-disabled-bg: var(--jf-stone); --bs-btn-disabled-border-color: var(--jf-stone); }
.btn-outline-primary { --bs-btn-color: var(--jf-dusk); --bs-btn-border-color: var(--jf-dusk); --bs-btn-hover-bg: var(--jf-dusk); --bs-btn-hover-color: var(--jf-day); --bs-btn-active-bg: var(--jf-dusk); }
.btn-outline-secondary { --bs-btn-color: var(--jf-peat); --bs-btn-border-color: var(--jf-control-border); --bs-btn-hover-bg: var(--jf-hover); --bs-btn-hover-color: var(--jf-night); --bs-btn-hover-border-color: var(--jf-stone); --bs-btn-active-bg: var(--jf-sand-200); --bs-btn-active-color: var(--jf-night); }
.btn-outline-danger { --bs-btn-color: var(--jf-sale-600); --bs-btn-border-color: var(--jf-control-border); --bs-btn-hover-bg: var(--jf-sale-100); --bs-btn-hover-color: var(--jf-sale-600); --bs-btn-hover-border-color: var(--jf-sale-600); }
.btn-outline-success { --bs-btn-color: var(--jf-leaf-600); --bs-btn-border-color: var(--jf-control-border); --bs-btn-hover-bg: var(--jf-leaf-100); --bs-btn-hover-color: var(--jf-leaf-700); }
.btn-danger { --bs-btn-bg: var(--jf-dusk); --bs-btn-border-color: var(--jf-dusk); --bs-btn-color: var(--jf-day); --bs-btn-hover-bg: var(--jf-sale-600); --bs-btn-hover-border-color: var(--jf-sale-600); --bs-btn-active-bg: var(--jf-sale-600); }
/* Accent « sun » : réservé à l'action principale (démarrer le chrono), comme le bouton d'achat de la boutique. */
.btn-sun { background: linear-gradient(90deg, var(--jf-sun-300) 0%, var(--jf-sun-500) 138.78%); color: var(--jf-on-sun); border: 1px solid transparent; }
.btn-sun:hover { background: linear-gradient(180deg, var(--jf-sun-500) 0%, var(--jf-sun-300) 138.78%); color: var(--jf-on-sun); }
.btn-group-sm > .btn, .btn-sm { border-radius: var(--jf-radius-pill); }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* --- Badges et alertes ---------------------------------------------------------------- */
.badge { border-radius: var(--jf-radius-pill); font-weight: 500; letter-spacing: .02em; }
.text-bg-primary { background-color: var(--jf-dusk) !important; color: var(--jf-day) !important; }
.text-bg-secondary { background-color: var(--jf-bone) !important; color: var(--jf-peat) !important; }
.text-bg-success { background-color: var(--jf-leaf-600) !important; color: var(--jf-day) !important; }
.text-bg-info { background-color: var(--jf-sun-100) !important; color: var(--jf-on-sun) !important; }
.text-bg-warning { background-color: var(--jf-sun-300) !important; color: var(--jf-on-sun) !important; }
.text-bg-danger { background-color: var(--jf-sale-600) !important; color: var(--jf-day) !important; }
.text-bg-light { background-color: var(--jf-sand-100) !important; color: var(--jf-peat) !important; border-color: var(--jf-sand-200) !important; }
.alert { border-radius: var(--jf-radius-md); border: 1px solid transparent; }
.alert-success { --bs-alert-bg: var(--jf-leaf-100); --bs-alert-color: var(--jf-leaf-700); --bs-alert-border-color: #D6EBBD; }
.alert-warning { --bs-alert-bg: var(--jf-sun-100); --bs-alert-color: #6B4A05; --bs-alert-border-color: #F2DFB3; }
.alert-danger  { --bs-alert-bg: var(--jf-sale-100); --bs-alert-color: var(--jf-sale-600); --bs-alert-border-color: #F5C6C6; }
.alert-info, .alert-secondary { --bs-alert-bg: var(--jf-sand-100); --bs-alert-color: var(--jf-peat); --bs-alert-border-color: var(--jf-sand-200); }
.text-primary { color: var(--jf-dusk) !important; }
.text-danger { color: var(--jf-sale-600) !important; }

/* --- Chrono -------------------------------------------------------------------------- */
.timer-display { font-weight: 600; color: var(--jf-night); }

/* --- Page de connexion : surface sombre, logo clair (règle d'association de la charte) --- */
body.jf-dark { background: var(--jf-dusk); color: var(--jf-day); }
body.jf-dark .card { background: var(--jf-day); border-color: var(--jf-peat); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }