/* =============================================================
   Dilecta — Design Tokens
   Extraits du site editions-dilecta.com (juin 2026)
   Stack source : PrestaShop 1.7 · thème Warehouse · Bootstrap 4 · Roboto
   Identité : monochrome, typographie unique, angles vifs, « white cube ».
   ============================================================= */

:root {
  /* ---------- Couleurs : marque (monochrome) ---------- */
  --dlk-white:        #FFFFFF;  /* fond global + fond des boutons */
  --dlk-black:        #000000;  /* prix, bordures de boutons, logo-sceau */
  --dlk-ink:          #242424;  /* titres produits, texte fort */
  --dlk-text:         #212529;  /* texte courant (= Bootstrap $gray-900) */
  --dlk-title:        #333333;  /* titres de page (H1) */

  /* ---------- Couleurs : gris ---------- */
  --dlk-muted:        #777777;  /* liens au repos */
  --dlk-muted-soft:   #8F8F8F;  /* fil d'Ariane */
  --dlk-muted-light:  #C9C9C9;  /* liens discrets */
  --dlk-line:         #E6E6E6;  /* filets / hairlines */
  --dlk-surface:      #FFFFFF;
  --dlk-surface-2:    #F7F7F7;  /* aplats subtils */

  /* ---------- Footer ---------- */
  --dlk-footer-bg:    #000000;
  --dlk-footer-text:  #FFFFFF;

  /* ---------- Accent ---------- */
  /* Seule couleur non-Bootstrap du thème (--warning surchargé). */
  /* À utiliser avec parcimonie — la marque reste fondamentalement monochrome. */
  --dlk-accent:       #FF9A52;
  --dlk-accent-tint:  #FFF3E9;
  --dlk-accent-ink:   #B3580F;

  /* ---------- Typographie ---------- */
  --dlk-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --dlk-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --dlk-fs-small:     12px;   /* fil d'Ariane, petits liens */
  --dlk-fs-body:      14px;   /* corps, prix */
  --dlk-fs-h3:        18px;   /* titres produits, h2/h3 */
  --dlk-fs-h2:        22px;   /* titre de page */
  --dlk-fs-display:   35px;   /* titre de section (« À NE PAS MANQUER ») */

  --dlk-lh-body:      1.6;    /* 22.4px @ 14px */
  --dlk-lh-tight:     1.2;    /* titres */

  --dlk-w-regular:    400;
  --dlk-w-bold:       700;

  --dlk-ls-tight:     normal;
  --dlk-ls-caps:      0.04em; /* nav / labels en capitales */

  /* ---------- Mise en page ---------- */
  --dlk-radius:       0;      /* angles vifs — jamais d'arrondi */
  --dlk-gutter:       15px;   /* gouttière Bootstrap 4 */
  --dlk-border:       1px solid var(--dlk-line);
  --dlk-border-strong:1px solid var(--dlk-black); /* bouton, séparateurs forts */

  /* Échelle d'espacement (pas de 0.25rem, base Bootstrap 4) */
  --dlk-space-1:      4px;
  --dlk-space-2:      8px;
  --dlk-space-3:      16px;
  --dlk-space-4:      24px;
  --dlk-space-5:      48px;

  /* Breakpoints Bootstrap 4 */
  --dlk-bp-sm:        576px;
  --dlk-bp-md:        768px;
  --dlk-bp-lg:        992px;
  --dlk-bp-xl:        1200px;
}

/* -------------------------------------------------------------
   Composant signature — le bouton Dilecta
   Rectangulaire, contour noir 1px sur fond blanc, zéro arrondi.
   ------------------------------------------------------------- */
.dlk-btn {
  display: inline-block;
  background: var(--dlk-white);
  color: var(--dlk-black);
  border: var(--dlk-border-strong);
  border-radius: var(--dlk-radius);
  padding: 12px 21px;
  font: var(--dlk-w-regular) var(--dlk-fs-body)/1.2 var(--dlk-font);
  text-transform: uppercase;
  letter-spacing: var(--dlk-ls-caps);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dlk-btn:hover {
  background: var(--dlk-black);
  color: var(--dlk-white);
}