/* =============================================================================
   la table la — thème de marque
   Rebrande Bootstrap 5.3 (chargé via CDN) sur la palette de la marque et pose
   des composants propres et cohérents (héros, bandeaux CTA, cartes, boutons).
   Chargé APRÈS Bootstrap pour pouvoir surcharger ses utilitaires.
   ========================================================================== */

:root {
  /* Palette de marque (cohérente avec les illustrations SVG, fond #EAF2F6) */
  --brand:        #2E86AB;
  --brand-dark:   #1F5E7A;
  --brand-darker: #164a61;
  --accent:       #F18F01;
  --accent-dark:  #d97e00;

  --ink:    #1f2d35;   /* texte principal */
  --muted:  #5b6b73;   /* texte secondaire */
  --surface:      #ffffff;
  --surface-alt:  #f2f7fa;  /* sections claires, tiède et discret */
  --surface-tint: #eaf2f6;  /* identique au fond des illustrations */

  --brand-grad: linear-gradient(135deg, var(--brand-darker) 0%, var(--brand-dark) 45%, var(--brand) 100%);
  --shadow-sm: 0 2px 10px rgba(22, 74, 97, .06);
  --shadow-md: 0 10px 30px rgba(22, 74, 97, .10);
  --shadow-lg: 0 18px 45px rgba(22, 74, 97, .16);

  /* Remappe les variables Bootstrap → marque (boutons, liens, .text-primary…) */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 46, 134, 171;
  --bs-link-color: var(--brand-dark);
  --bs-link-hover-color: var(--brand-darker);
  --bs-body-color: var(--ink);
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
}

/* ----------------------------------------------------------------- Typographie */
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background-color: var(--surface-alt);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -.01em;
}

.lead { color: var(--muted); font-weight: 400; }
section .lead { font-size: 1.125rem; }

/* ----------------------------------------------------------- Fonds de sections */
.bg-light { background-color: var(--surface-alt) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-tint  { background-color: var(--surface-tint) !important; }

/* ------------------------------------------------------------------- Boutons */
.btn { font-weight: 600; border-radius: .7rem; padding: .55rem 1.4rem; transition: all .18s ease; }
.btn-lg { padding: .8rem 1.9rem; }

.btn-primary {
  --bs-btn-bg: var(--brand);          --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-darker); --bs-btn-active-border-color: var(--brand-darker);
  box-shadow: 0 6px 16px rgba(46, 134, 171, .25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(46, 134, 171, .32); }

.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-dark);
}

/* Bouton accent orange — pour les CTA qui doivent ressortir sur fond bleu */
.btn-accent {
  --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-dark);
  color: #fff; background-color: var(--accent); border: 1px solid var(--accent);
  box-shadow: 0 8px 20px rgba(241, 143, 1, .30);
}
.btn-accent:hover { color: #fff; background-color: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); }

.text-primary { color: var(--brand) !important; }
.text-accent  { color: var(--accent) !important; }

/* --------------------------------------------------------------------- Héros */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--brand-grad);
  color: #fff;
  padding: 5rem 0;
  text-align: center;
}
/* Lueur douce en haut à droite pour donner de la profondeur */
.hero::after {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { font-weight: 700; }
.hero .lead { color: rgba(255, 255, 255, .9); }
.hero p { color: rgba(255, 255, 255, .85); }

/* Bandeau d'appel à l'action en bas de page */
.cta-band {
  background: var(--brand-grad);
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}
.cta-band .lead { color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------------------------- Cartes */
.card {
  border: 0;
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* Pastille d'icône pour les blocs « fonctionnalités » */
.feature-icon {
  width: 76px; height: 76px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--brand);
  font-size: 2rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------ Images & média */
.img-fluid.rounded, .rounded.shadow { border-radius: 1rem !important; }
.shadow { box-shadow: var(--shadow-md) !important; }

/* Liens dans le contenu */
main a:not(.btn):not(.nav-link):not(.navbar-brand) {
  color: var(--brand-dark);
  text-underline-offset: 2px;
}
main a:not(.btn):not(.nav-link):not(.navbar-brand):hover { color: var(--brand-darker); }