/* ============================================================
   RAVATE THEME — Design System (V2-1256)
   Source Figma : c99BUxjFu1ogpBp0cmvfLY — livré par intégrateur NL
   Tokens + typo : globaux (:root / .typo-*)
   Boutons : scopés sous .ravate-ds pour ne pas écraser Bootstrap (.btn)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@800&family=Roboto:wght@400;700&display=swap');

/* ════════════════════════════════════════════
   01 — COULEURS PRIMITIVES
   ════════════════════════════════════════════ */
:root {
  /* Primary */
  --primary-50:  #fff9eb;
  --primary-100: #fcd37a;
  --primary-500: #faba2f;
  --primary-600: #f0a606;
  --primary-700: #be8405;
  --primary-800: #8d6103;

  /* Secondary */
  --secondary-50:  #f6fcfe;
  --secondary-100: #caecf9;
  --secondary-200: #8cd7f3;
  --secondary-500: #4fc1ec;
  --secondary-600: #21b1e7;
  --secondary-700: #1591c0;
  --secondary-800: #106e92;
  --secondary-900: #0b4c64;

  /* Neutral */
  --neutral-050: #f9f9f9;
  --neutral-100: #f5f5f5;
  --neutral-200: #d9d9d9;
  --neutral-500: #737373;
  --neutral-700: #434343;

  /* Orange */
  --orange-50:  #fff7ed;
  --orange-100: #ffedd4;
  --orange-200: #ffd6a8;
  --orange-300: #ffb86a;
  --orange-400: #ff8904;
  --orange-500: #ff6900;
  --orange-600: #f54900;
  --orange-700: #ca3500;
  --orange-800: #9f2d00;
  --orange-900: #7e2a0c;
  --orange-950: #441306;

  /* Blue */
  --blue-50:  #eff7ff;
  --blue-100: #dbedfe;
  --blue-200: #bedeff;
  --blue-300: #8ec6ff;
  --blue-400: #51a8ff;
  --blue-500: #2b95ff;
  --blue-600: #0370de;
  --blue-700: #0c4a88;
  --blue-800: #043360;
  --blue-900: #312c85;

  /* Green */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #b9f8cf;
  --green-300: #7bf1a8;
  --green-400: #05df72;
  --green-500: #00c950;
  --green-600: #00a63e;
  --green-700: #008236;
  --green-800: #016630;
  --green-900: #0d542b;

  /* Red */
  --red-50:  #fef2f2;
  --red-100: #ffe2e2;
  --red-200: #ffc9c9;
  --red-300: #ffa2a2;
  --red-400: #ff6467;
  --red-500: #d24104;
  --red-600: #e7000b;
  --red-700: #c10007;
  --red-800: #9f0712;
  --red-900: #82181a;

  /* Base */
  --white: #ffffff;
  --black: #000000;

  /* ════════════════════════════════════════════
     02 — COULEURS SÉMANTIQUES
     ════════════════════════════════════════════ */

  /* Background */
  --bg-abyss:              var(--black);
  --bg-deep:               var(--neutral-700);
  --bg-dimmed:             var(--neutral-100);
  --bg-disabled:           var(--neutral-200);
  --bg-ghost:              var(--neutral-050);
  --bg-info-subtle:        var(--blue-100);
  --bg-minimal:            var(--neutral-200);
  --bg-negative-subtle:    var(--red-100);
  --bg-positive-subtle:    var(--green-100);
  --bg-primary-accent:     var(--primary-500);
  --bg-primary-medium:     var(--primary-600);
  --bg-primary-strong:     var(--primary-700);
  --bg-primary-subtle:     var(--primary-50);
  --bg-secondary-accent:   var(--secondary-500);
  --bg-secondary-hover:    var(--secondary-800);
  --bg-secondary-medium:   var(--secondary-700);
  --bg-secondary-strong:   var(--secondary-900);
  --bg-secondary-subtle:   var(--secondary-50);
  --bg-warning-subtle:     var(--orange-100);
  --bg-white:              var(--white);

  /* Foreground */
  --fg-disabled:                   var(--neutral-500);
  --fg-info-accent:                var(--blue-600);
  --fg-negative-accent:            var(--red-500);
  --fg-neutral-accent:             var(--black);
  --fg-neutral-dimmed:             var(--neutral-200);
  --fg-neutral-medium:             var(--neutral-500);
  --fg-neutral-reverse-accent:     var(--white);
  --fg-neutral-reverse-subtle:     rgba(255, 255, 255, 0.7);
  --fg-neutral-strong:             var(--neutral-700);
  --fg-positive-accent:            var(--green-600);
  --fg-primary-active:             var(--primary-500);
  --fg-primary-medium:             var(--primary-600);
  --fg-primary-strong:             var(--primary-700);
  --fg-secondary-accent:           var(--secondary-500);
  --fg-secondary-medium:           var(--secondary-600);
  --fg-secondary-strong:           var(--secondary-800);
  --fg-warning-accent:             var(--orange-500);

  /* Border */
  --border-disabled:               var(--neutral-200);
  --border-focus:                  var(--secondary-600);
  --border-negative-accent:        var(--red-500);
  --border-neutral-accent:         var(--neutral-200);
  --border-neutral-reverse-subtle: rgba(255, 255, 255, 0.3);
  --border-neutral-strong:         var(--neutral-500);
  --border-neutral-subtle:         var(--neutral-100);
  --border-positive-accent:        var(--green-600);
  --border-info-accent:            var(--blue-600);
  --border-primary-active:         var(--primary-500);
  --border-primary-medium:         var(--primary-600);
  --border-secondary-active:       var(--secondary-500);
  --border-secondary-medium:       var(--secondary-600);
  --border-secondary-subtle:       var(--secondary-200);
  --border-warning-accent:         var(--orange-500);
  --border-white:                  var(--white);

  /* Autres */
  --bg-overlay: rgba(0, 0, 0, 0.4);

  /* ════════════════════════════════════════════
     04 — ESPACEMENTS
     ════════════════════════════════════════════ */
  --space-xxxs: 2px;
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-s:    12px;
  --space-sm:   16px;
  --space-m:    24px;
  --space-l:    32px;
  --space-xl:   40px;
  --space-2xl:  80px;
  --space-3xl:  120px;
  --space-4xl:  160px;

  /* ════════════════════════════════════════════
     05 — RADIUS
     ════════════════════════════════════════════ */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-xxl:  24px;
  --radius-full: 999px;

  /* ════════════════════════════════════════════
     06 — OMBRES
     ════════════════════════════════════════════ */
  --shadow-50: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
}

/* ════════════════════════════════════════════
   03 — TYPOGRAPHIE
   ════════════════════════════════════════════ */

.typo-xs {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size:   11px;
  line-height: 1.3;
}

.typo-s {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size:   12px;
  line-height: 1.3;
}

.typo-sm {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size:   13px;
  line-height: 1.3;
}

.typo-base {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size:   15px;
  line-height: 1.3;
}

.typo-m {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size:   16px;
  line-height: 1.3;
}

.typo-l {
  font-family:  'Figtree', sans-serif;
  font-weight:  800;
  font-size:    18px;
  line-height:  1.1;
}

.typo-xl {
  font-family:  'Figtree', sans-serif;
  font-weight:  800;
  font-size:    20px;
  line-height:  1.1;
}

.typo-2xl {
  font-family:  'Figtree', sans-serif;
  font-weight:  800;
  font-size:    24px;
  line-height:  1.1;
}

.typo-3xl {
  font-family:     'Figtree', sans-serif;
  font-weight:     800;
  font-size:       32px;
  line-height:     1.1;
  letter-spacing:  -0.5px;
}

.typo-4xl {
  font-family:  'Figtree', sans-serif;
  font-weight:  800;
  font-size:    48px;
  line-height:  1.1;
}

/* ════════════════════════════════════════════
   07 — BOUTONS (scopés — ne pas casser Bootstrap)
   Usage : <div class="ravate-ds"><a class="btn btn--primary btn--m">…</a></div>
   ════════════════════════════════════════════ */

.ravate-ds .btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-xs);
  border-radius:    var(--radius-full);
  border:           2px solid transparent;
  cursor:           pointer;
  font-family:      'Roboto', sans-serif;
  font-weight:      700;
  line-height:      normal;
  white-space:      nowrap;
  text-decoration:  none;
  transition:       background-color 120ms ease,
                    border-color 120ms ease,
                    color 120ms ease;
  background-color: var(--btn-bg,     transparent);
  color:            var(--btn-color,  inherit);
  border-color:     var(--btn-border, transparent);
}

.ravate-ds .btn svg,
.ravate-ds .btn .btn__icon {
  width:       var(--btn-icon-size, 24px);
  height:      var(--btn-icon-size, 24px);
  flex-shrink: 0;
  fill:        currentColor;
}

.ravate-ds .btn:focus-visible {
  outline:      none;
  border-color: var(--border-focus);
}

.ravate-ds .btn:disabled,
.ravate-ds .btn[aria-disabled="true"] {
  --btn-bg:     var(--bg-disabled);
  --btn-color:  var(--fg-disabled);
  --btn-border: transparent;
  cursor:        not-allowed;
  pointer-events: none;
}

.ravate-ds .btn--s {
  padding:         var(--space-xs) var(--space-sm);
  font-size:       15px;
  --btn-icon-size: 16px;
  gap:             var(--space-xs);
}

.ravate-ds .btn--m {
  padding:         var(--space-sm) var(--space-m);
  font-size:       16px;
  --btn-icon-size: 24px;
  gap:             var(--space-xs);
}

.ravate-ds .btn--l {
  padding:         var(--space-m) var(--space-xl);
  font-size:       18px;
  --btn-icon-size: 24px;
  gap:             var(--space-s);
}

.ravate-ds .btn--primary {
  --btn-bg:     var(--bg-primary-accent);
  --btn-color:  var(--fg-neutral-accent);
  --btn-border: transparent;
}
.ravate-ds .btn--primary:hover  { --btn-bg: var(--bg-primary-medium); }
.ravate-ds .btn--primary:active { --btn-bg: var(--bg-primary-strong); }

.ravate-ds .btn--secondary {
  --btn-bg:     transparent;
  --btn-color:  var(--fg-neutral-strong);
  --btn-border: var(--border-neutral-strong);
}
.ravate-ds .btn--secondary:hover  { --btn-bg: var(--bg-dimmed); }
.ravate-ds .btn--secondary:active { --btn-bg: var(--neutral-200); }

.ravate-ds .btn--tertiary {
  --btn-bg:     transparent;
  --btn-color:  var(--fg-neutral-strong);
  --btn-border: transparent;
}
.ravate-ds .btn--tertiary:hover  { --btn-bg: var(--bg-dimmed); }
.ravate-ds .btn--tertiary:active { --btn-bg: var(--neutral-200); }

.ravate-ds .btn--brand {
  --btn-bg:     var(--bg-secondary-medium);
  --btn-color:  var(--fg-neutral-reverse-accent);
  --btn-border: transparent;
}
.ravate-ds .btn--brand:hover  { --btn-bg: var(--bg-secondary-hover); }
.ravate-ds .btn--brand:active { --btn-bg: var(--bg-secondary-strong); }

.ravate-ds .btn--text {
  --btn-bg:     transparent;
  --btn-color:  var(--fg-neutral-accent);
  --btn-border: transparent;
  padding:      var(--space-xs);
}
.ravate-ds .btn--text:hover  { text-decoration: underline; }
.ravate-ds .btn--text:active { opacity: 0.8; }

/* Variante outline secondaire (maquette Carte Plus CTA) */
.ravate-ds .btn--outline-secondary {
  --btn-bg:     var(--bg-white);
  --btn-color:  var(--fg-secondary-strong);
  --btn-border: var(--border-secondary-subtle);
  border-width: 1px;
  padding:      var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s);
  font-size:    13px;
  gap:          var(--space-xxs);
}
.ravate-ds .btn--outline-secondary:hover {
  --btn-border: var(--border-secondary-medium);
}