/* Bernardot IT Solutions — jetons et composants de la charte graphique (v1.0, octobre 2026)
   À importer tel quel dans le site : <link rel="stylesheet" href="tokens.css"> */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

:root {
  /* Couleurs de marque */
  --bis-bleu:        #0B3D91;  /* bleu principal — confiance, professionnalisme : titres, boutons, liens */
  --bis-cyan:        #00B0FF;  /* bleu secondaire — technologie, modernité : dégradés, décors, jamais en texte sur blanc */
  --bis-nuit:        #061A40;  /* bleu foncé — stabilité, fiabilité : fonds sombres, pied de page, grands titres */
  --bis-or:          #FFC400;  /* or / accent — performance, premium : un appel à l'action, un détail d'icône */

  /* Neutres */
  --bis-bleu-clair:  #EBF4FF;  /* arrière-plans de sections, bouton discret */
  --bis-gris-clair:  #F5F7FA;  /* fond de page, sections alternées */
  --bis-gris-moyen:  #CBD5E1;  /* bordures, filets, états désactivés (pas de texte) */
  --bis-encre:       #1F2937;  /* texte principal */
  --bis-ardoise:     #4B5B76;  /* texte secondaire lisible (6,9:1 sur blanc) */
  --bis-blanc:       #FFFFFF;

  /* Déclinaisons d'interface */
  --bis-bleu-lien:   #0B5ED7;  /* liens dans le texte et dans les cartes (5,8:1 sur blanc) */
  --bis-bleu-survol: #082F70;
  --bis-or-survol:   #F2A413;
  --bis-trait:       #DCE3EC;

  /* Dégradés */
  --bis-degrade-bleu: linear-gradient(100deg, #0B3D91 0%, #0B5ED7 55%, #00B0FF 115%);
  --bis-degrade-or:   linear-gradient(180deg, #FFD65C 0%, #FFC400 45%, #F2A413 100%);
  --bis-degrade-nuit: linear-gradient(135deg, #0E2F73 0%, #061A40 100%);
  --bis-halo:         radial-gradient(60% 80% at 85% 10%, rgba(0, 176, 255, .16), transparent 70%), linear-gradient(180deg, #FFFFFF, #EBF4FF);

  /* Typographie : Montserrat partout */
  --bis-police: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --bis-t-legende: .875rem;   /* 14 — Regular 400 */
  --bis-t-texte:   1rem;      /* 16 — Medium 500, interligne 1,65 */
  --bis-t-h3:      1.25rem;   /* 20 — SemiBold 600 */
  --bis-t-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2rem);      /* 24 → 32 — Bold 700 */
  --bis-t-h1:      clamp(2rem, 1.3rem + 3vw, 3rem);          /* 32 → 48 — Bold 700 */
  --bis-surtitre-espacement: .14em;                          /* capitales espacées */

  /* Formes */
  --bis-rayon-carte:  14px;
  --bis-rayon-champ:  10px;
  --bis-rayon-pilule: 999px;
  --bis-ombre-carte:  0 12px 32px -18px rgba(6, 26, 64, .35);
  --bis-ombre-bouton: 0 8px 18px -10px rgba(11, 61, 145, .55);
  --bis-espace: 8px;          /* grille de 8 */

  /* Icônes (sprite.svg) : le trait suit `color`, l'accent suit cette variable */
  --bis-icone-accent: #FFC400;
}

/* ---------- Bases ---------- */
body { font-family: var(--bis-police); font-weight: 500; font-size: var(--bis-t-texte); line-height: 1.65; color: var(--bis-encre); background: var(--bis-blanc); }
h1, h2 { font-weight: 700; line-height: 1.15; color: var(--bis-nuit); text-wrap: balance; }
h1 { font-size: var(--bis-t-h1); } h2 { font-size: var(--bis-t-h2); }
h3 { font-size: var(--bis-t-h3); font-weight: 600; line-height: 1.3; color: var(--bis-nuit); }
.bis-surtitre { font-size: .8125rem; font-weight: 600; letter-spacing: var(--bis-surtitre-espacement); text-transform: uppercase; color: var(--bis-bleu); }
a { color: var(--bis-bleu-lien); }

/* ---------- Boutons ---------- */
.bis-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--bis-rayon-pilule); font: 600 .9375rem/1 var(--bis-police); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s, filter .15s; }
.bis-btn:hover { transform: translateY(-1px); }
.bis-btn:focus-visible { outline: 3px solid var(--bis-cyan); outline-offset: 3px; }
.bis-btn svg { width: 1.1em; height: 1.1em; flex: none; }
.bis-btn--principal { background: var(--bis-degrade-bleu); color: #fff; box-shadow: var(--bis-ombre-bouton); }
.bis-btn--principal:hover { filter: brightness(1.08); }
.bis-btn--contour { background: #fff; border-color: var(--bis-bleu); color: var(--bis-bleu); }
.bis-btn--contour:hover { background: var(--bis-bleu-clair); }
.bis-btn--or { background: var(--bis-degrade-or); color: var(--bis-nuit); box-shadow: 0 8px 18px -10px rgba(242, 164, 19, .8); }
.bis-btn--or:hover { filter: brightness(1.05); }
.bis-btn--discret { background: var(--bis-bleu-clair); color: var(--bis-bleu); }
.bis-btn--discret:hover { background: #DCEBFF; }
.bis-btn--nuit { background: var(--bis-nuit); color: #fff; }
.bis-btn--nuit:hover { background: #0A2A66; }
.bis-btn--petit { min-height: 40px; padding: 0 20px; font-size: .875rem; }

/* ---------- Cartes ---------- */
.bis-carte { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: #fff; border: 1px solid var(--bis-trait); border-radius: var(--bis-rayon-carte); box-shadow: var(--bis-ombre-carte); }
.bis-carte__icone { width: 44px; height: 44px; flex: none; color: var(--bis-bleu); }
.bis-carte__titre { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: var(--bis-nuit); }
.bis-carte__texte { margin: 0 0 10px; font-size: var(--bis-t-legende); font-weight: 400; line-height: 1.5; color: var(--bis-ardoise); }
.bis-lien { display: inline-flex; align-items: center; gap: .45em; font-size: var(--bis-t-legende); font-weight: 600; color: var(--bis-bleu-lien); text-decoration: none; }
.bis-lien:hover { text-decoration: underline; }
.bis-lien svg { width: 1.05em; height: 1.05em; }

/* ---------- Pastille de pilier (icône dans un cercle) ---------- */
.bis-pastille { display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px solid var(--bis-gris-moyen); border-radius: 50%; background: #fff; color: var(--bis-bleu); }
.bis-pastille svg, .bis-pastille img { width: 32px; height: 32px; }