/* ============================================
   HUB International — FPQ #5
   Variables CSS & Reset
   ============================================ */

:root {
  /* ── Couleurs tirées du logo HUB haute définition ── */
  --hub-blue:       #00A0E1;   /* bleu vif cercle gauche */
  --hub-blue-dk:    #064EA0;   /* bleu foncé cercle bas */
  --hub-navy:       #263746;   /* couleur exacte fond logo HUB #263746 */
  --hub-navy-2:     #1e2d3a;   /* navy intermédiaire (légèrement plus foncé) */
  --hub-navy-3:     #263746;   /* identique au fond logo — cohérence parfaite */

  /* ── Gradient officiel du logo ── */
  --hub-gradient:   linear-gradient(160deg, #00A0E1 0%, #064EA0 100%);
  --hub-gradient-h: linear-gradient(90deg, #00A0E1 0%, #064EA0 100%);

  /* ── Couleurs d'accent ── */
  --hub-accent:     #00C4F0;   /* bleu clair hover */
  --hub-gold:       #F0A500;   /* accent doré CTA premium */
  --hub-green:      #1A7A4A;
  --hub-red-alert:  #C62828;

  /* ── Neutres ── */
  --white:          #FFFFFF;
  --light:          #F3F7FB;
  --light-2:        #E8EEF5;
  --silver:         #7A8FA0;
  --text:           #1E2D3D;
  --text-muted:     #5A6E7F;

  /* ── Typographie ── */
  --font-display:   'Fraunces', serif;
  --font-body:      'DM Sans', sans-serif;

  /* ── Espacements ── */
  --radius-sm:      8px;
  --radius:         14px;
  --radius-lg:      20px;
  --radius-xl:      28px;

  /* ── Ombres ── */
  --shadow-sm:      0 2px 12px rgba(38, 55, 70, 0.08);
  --shadow:         0 6px 28px rgba(38, 55, 70, 0.14);
  --shadow-lg:      0 16px 56px rgba(38, 55, 70, 0.18);
  --shadow-blue:    0 8px 32px rgba(0, 160, 225, 0.30);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font-body); }
input, select, textarea { font-family: var(--font-body); }