/* ============================================
   classe-prepa.fr : Design tokens
   Aesthetic: Premium académique, bordeaux + crème
   Type: Cormorant Garamond (display serif), DM Sans (body),
         JetBrains Mono (eyebrows / labels)
   NB : les fonts sont chargées via wp_enqueue (functions.php),
   pas d'@import bloquant ici.
   ============================================ */

:root {
  /* Palette */
  --ink:        #1B0F0C;        /* warm near-black */
  --ink-2:      #4A3A33;        /* muted body */
  --ink-3:      #8B7A71;        /* tertiary */
  --line:       #E8DCC9;        /* hairline on cream */
  --line-2:     #D9C7AC;        /* stronger divider */

  --cream:      #F6EFE3;        /* primary background */
  --cream-2:    #EFE5D2;        /* deeper cream */
  --paper:      #FBF7EE;        /* paper white */
  --white:      #FFFFFF;

  --bordeaux:        #7A1C2F;   /* primary brand */
  --bordeaux-deep:   #5C1422;
  --bordeaux-soft:   #A85364;
  --bordeaux-wash:   #F0E1E4;

  --gold:       #B8954F;        /* secondary accent */
  --gold-soft:  #E8D9B6;

  /* Type */
  --serif:  "Cormorant Garamond", "Times New Roman", serif;
  --sans:   "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, monospace;

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 1px 0 rgba(27, 15, 12, 0.04), 0 12px 32px -16px rgba(27, 15, 12, 0.18);
  --shadow-pop:  0 1px 0 rgba(27, 15, 12, 0.05), 0 20px 50px -22px rgba(122, 28, 47, 0.35);
}

/* Base resets inside artboards */
.cp-page {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.cp-page * { box-sizing: border-box; }
.cp-page h1, .cp-page h2, .cp-page h3, .cp-page h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  line-height: 1.06;
  text-wrap: balance;
}
.cp-page h1 { font-size: 72px; line-height: 1.03; }
.cp-page h2 { font-size: 50px; line-height: 1.08; }
.cp-page h3 { font-size: 30px; }
.cp-page h4 { font-size: 22px; }
.cp-page p { margin: 0; text-wrap: pretty; }
.cp-page a { color: inherit; text-decoration: none; }

/* Eyebrow */
.cp-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--bordeaux);
}

/* Section wrapper */
.cp-section {
  padding: 120px 80px;
}
.cp-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Buttons */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cp-btn--primary {
  background: var(--bordeaux);
  color: var(--paper);
}
.cp-btn--primary:hover { background: var(--bordeaux-deep); color: var(--paper); }
.cp-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.cp-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.cp-btn--link {
  background: transparent;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  font-weight: 500;
}
.cp-btn--link:hover { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }

/* Hairline */
.cp-hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* Image placeholder */
.cp-img {
  position: relative;
  background: var(--cream-2);
  overflow: hidden;
  border-radius: var(--r-md);
}
.cp-img--photo {
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(27,15,12,.04) 12px 13px),
    linear-gradient(180deg, var(--cream-2) 0%, var(--line) 100%);
}
.cp-img__label {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(251, 247, 238, 0.78);
  padding: 4px 8px;
  border-radius: var(--r-xs);
}

/* Italic display */
.cp-italic { font-style: italic; color: var(--bordeaux); font-weight: 400; }

/* Tag pill */
.cp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}