/* ============================================================
   COMPONENTS — UI elements shared across modules
   ============================================================
   This file contains ALL generic components:
   buttons, badges, modals, toasts, eyebrows, forms.

   Rule: a module NEVER redefines a component here.
   To customize in a precise context, use a
   modifier class (.btn-large) or a contextual override
   (.module-name .btn { ... }).
   ============================================================ */

/* ============================================================
   EYEBROW — Uppercase editorial label with icon
   Usage : <span class="eyebrow"><span class="eyebrow-icon">...</span>Texte</span>
   ============================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 24px;
}
.eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 162, 74, 0.12);
  color: var(--c-gold);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.eyebrow-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
.eyebrow:hover .eyebrow-icon {
  transform: rotate(-6deg) scale(1.06);
}

/* ============================================================
   BUTTONS — Variants: primary, ghost, outline (+ sizes)
   ============================================================
   Consistent hover behaviour across the whole site:
     - All buttons darken on hover (deep blue dominant) so they
       stand out on any background, light OR dark.
     - All buttons have a standard :disabled state (45% opacity,
       no hover effect, no transform).
     - Focus-visible: gold outline for keyboard accessibility.

   Variants:
     .btn-primary  → solid cyan, hover deep blue   (default CTA)
     .btn-outline  → transparent + deep border, hover filled deep
     .btn-ghost    → for dark backgrounds, hover inverted to white
   Sizes:
     .btn-lg  / .btn-sm
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
.btn svg {
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}

/* === Primary === cyan filled, hover → blue (works on light AND dark backgrounds) */
.btn-primary {
  background: var(--c-cyan);
  color: var(--c-deep);
  border-color: var(--c-cyan);
}
.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible:not(:disabled) {
  background: var(--c-blue);
  color: white;
  border-color: var(--c-blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(35, 111, 168, 0.4);
}
.btn-primary:hover:not(:disabled) svg {
  transform: translateX(4px);
}

/* === Outline === transparent + deep border, hover → filled deep */
.btn-outline {
  background: transparent;
  color: var(--c-deep);
  border-color: var(--c-deep);
}
.btn-outline:hover:not(:disabled),
.btn-outline:focus-visible:not(:disabled) {
  background: var(--c-deep);
  color: var(--c-cyan);
  border-color: var(--c-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10, 31, 56, 0.25);
}
.btn-outline:hover:not(:disabled) svg {
  transform: translateX(4px);
}

/* === Ghost === for dark backgrounds, hover → inverted to white */
.btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover:not(:disabled),
.btn-ghost:focus-visible:not(:disabled) {
  background: white;
  color: var(--c-deep);
  border-color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}
.btn-ghost:hover:not(:disabled) svg {
  transform: translateX(4px);
}

/* === Disabled — applied to ALL variants === */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled:hover,
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  /* No state change on disabled hover */
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled svg,
.btn[disabled] svg,
.btn[aria-disabled="true"] svg {
  transform: none !important;
}

/* === Sizes === */
.btn-lg { padding: 18px 36px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ============================================================
   BADGES — Small status labels (payment, article…)
   ============================================================ */

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 0;
}
.badge--ok        { background: #DCFCE7; color: #15803d; }
.badge--pending   { background: #FEF3C7; color: #92400e; }
.badge--late      { background: #FEE2E2; color: #991B1B; }
.badge--draft     { background: #E5E7EB; color: #374151; }
.badge--published { background: #DBEAFE; color: #1E40AF; }

/* ============================================================
   MODAL — Backdrop blur overlay, centered modal, animations
   Variants: .cac-modal-lg (700px), .cac-modal-xl (920px)
   Slots: .cac-modal-head, .cac-modal-body, .cac-modal-footer
   ============================================================ */

.cac-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 56, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s;
}
.cac-modal-overlay.open { opacity: 1; }

.cac-modal {
  background: var(--c-paper);
  border-radius: 0;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.3s var(--ease);
}
.cac-modal-overlay.open .cac-modal { transform: translateY(0); }

.cac-modal-lg { max-width: 700px; }
.cac-modal-xl { max-width: 920px; width: 92vw; }

.cac-modal-head {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cac-modal-head h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  margin: 0;
}

.cac-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--c-mute);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cac-modal-close:hover { background: var(--c-cream); }

.cac-modal-body {
  padding: 20px 28px 28px;
  overflow-y: auto;
}
.cac-modal-body-flush {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cac-modal-footer {
  padding: 16px 28px;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--c-cream);
}

/* ============================================================
   TOAST — Ephemeral notification bottom-right
   JS usage: CAC.showToast(message, type) where type = 'success'|'info'|'danger'
   ============================================================ */

.cac-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--c-deep);
  color: white;
  padding: 14px 20px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
  z-index: 400;
  max-width: 360px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s var(--ease);
}
.cac-toast.open {
  transform: translateY(0);
  opacity: 1;
}
.cac-toast-success { background: #0F6E56; }
.cac-toast-info    { background: var(--c-blue); }
.cac-toast-danger  { background: #A32D2D; }

@media (max-width: 600px) {
  .cac-toast {
    left: 16px;
    right: 16px;
    max-width: none;
    bottom: 16px;
  }
}