/*
Theme Name:   Blocksy Anabel Child
Theme URI:    https://anabel.be
Description:  Thème enfant de Blocksy pour anabel.be/bel
Author:       Didier
Author URI:   https://anabel.be
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-anabel-child
*/

/* ============================================================
   DESIGN SYSTEM — VARIABLES
   ============================================================ */
:root {
  /* Couleurs */
  --color-bg:         #f5f0e8;   /* beige/crème */
  --color-surface:    #ffffff;
  --color-navy:       #1a2e4a;   /* bleu marine profond */
  --color-gold:       #c9a84c;   /* accent or */
  --color-gold-light: #e8d5a3;
  --color-text:       #2c2c2c;
  --color-text-muted: #6b6b6b;
  --color-border:     #ddd5c0;

  /* Typographie */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', sans-serif;

  /* Espacements */
  --radius:   6px;
  --shadow:   0 2px 8px rgba(26, 46, 74, 0.08);
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background-color: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-navy);
}

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-gold);
}

/* ============================================================
   TITRES DE PAGE
   ============================================================ */
.entry-title,
.page-title {
  font-family: var(--font-display);
  color: var(--color-navy);
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 0.4em;
  margin-bottom: 1.2em;
}

/* ============================================================
   TABLEAUX
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

thead {
  background-color: var(--color-navy);
  color: #ffffff;
}

thead th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.03em;
}

tbody tr {
  border-bottom: 1px solid var(--color-border);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:nth-child(even) {
  background-color: #faf7f2;
}

tbody tr:hover {
  background-color: var(--color-gold-light);
  transition: background-color 0.15s ease;
}

tbody td {
  padding: 8px 14px;
  vertical-align: top;
}

/* ============================================================
   BLOCS HTML PERSONNALISÉS
   (classe wrapper à ajouter autour de tes blocs Custom HTML)
   ============================================================ */
.anabel-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow);
}

.anabel-block h2,
.anabel-block h3 {
  font-family: var(--font-display);
  color: var(--color-navy);
}

/* ============================================================
   BOUTONS
   ============================================================ */
.wp-block-button__link,
button,
.button {
  background-color: var(--color-navy);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  padding: 0.6em 1.4em;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
button:hover,
.button:hover {
  background-color: var(--color-gold);
  color: var(--color-navy);
}