/*
@author UBPartner
*/
/* ==========================================================
   BASE - variables, réglages globaux, éléments partagés
   Chargé sur toutes les pages, avant header.css / footer.css
   ========================================================== */

:root {
  --primary: #7347b3;
  --primaryLight: #9a6fd4;
  --blueMid: #5b69b6;
  --accent: #6ac3dc;
  --blue: #6ea2d9;
  --light: #f4f6fb;
  --ink: #241b3d;
  --inkSoft: #6b6483;
  /* couleurs relevées sur le logo */
  --logoNavy: #2b2a48;
  --logoCyan: #3fc8e0;
  --logoBlue: #4a90d9;
  --logoViolet: #7b3fd4;
  /* rythme vertical entre les sections */
  --section-space: 60px;
}
body {
  background: #f3f4fb;
  /* Inter : grotesque neutre, standard des interfaces financières */
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* garde-fou : les animations AOS horizontales (fade-left) décalent
     les éléments de 100px avant leur apparition et provoquent une barre
     de défilement horizontale. clip découpe sans créer de conteneur de
     scroll, donc position: sticky continue de fonctionner. */
  overflow-x: clip;
}

/* ==========================================================
   RYTHME VERTICAL - même espace entre toutes les sections
   .section     = espacement standard
   .section-sm  = espacement réduit (60 %)
   Ne pas utiliser sur le hero ni le footer : ils ont leurs
   propres contraintes (navbar fixe, fondu lumineux).
   ========================================================== */
.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.section-sm {
  padding-top: calc(var(--section-space) * 0.6);
  padding-bottom: calc(var(--section-space) * 0.6);
}
/* ==========================================================
   BOUTONS - style unique du site
   .btn                = plein violet (action principale)
   .btn + .btn-ghost   = contour, sur fond sombre ou coloré
   .btn + .btn-light   = fond blanc, sur fond sombre ou coloré
   .btn + .btn-sm      = version compacte (navbar, listes)
   L'icône <i> placée dans le bouton glisse en diagonale au survol.
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 40px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(115, 71, 179, 0.28);
  transition: background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn:hover {
  background: #8354c9;
  color: #fff;
  box-shadow: 0 16px 34px rgba(115, 71, 179, 0.36);
}

.btn i {
  font-size: 15px;
  transition: transform 0.25s ease;
}

.btn:hover i {
  transform: translate(3px, -3px);
}

/* ── Variante contour ── */
.btn.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: none;
}

.btn.btn-ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}

/* ── Variante blanche ── */
.btn.btn-light {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 12px 28px rgba(20, 15, 50, 0.18);
}

.btn.btn-light:hover {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 16px 34px rgba(20, 15, 50, 0.26);
}

/* ── Variante discrète, sur fond clair ── */
.btn.btn-outline {
  background: transparent;
  border-color: rgba(115, 71, 179, 0.35);
  color: var(--primary);
  box-shadow: none;
}

.btn.btn-outline:hover {
  background: rgba(115, 71, 179, 0.07);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: none;
}

/* ── Variante pour fond violet du footer ── */
.btn.btn-footer {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.btn.btn-footer:hover {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

/* ── Version compacte ── */
.btn.btn-sm {
  padding: 9px 20px;
  font-size: 14px;
  box-shadow: none;
}

.btn.btn-sm i {
  font-size: 14px;
}

/* ── Variante texte souligné (« lire plus », listes d'articles) ── */
.btn.btn-line {
  gap: 12px;
  padding: 0 2px 8px;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.btn.btn-line:hover {
  background: transparent;
  color: var(--primary);
  border-bottom-color: var(--primary);
  box-shadow: none;
}

.btn.btn-line i {
  font-size: 16px;
}

.btn.btn-line:hover i {
  transform: rotate(90deg);
}

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  overflow: hidden;
  z-index: 10000;
  pointer-events: none;
}
/* Le dégradé glisse par transform, propriété composée par le GPU. Animer
   background-position repeignait la barre à chaque image, en continu. */
#scroll-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%;
  background: linear-gradient(90deg, #7347b3, #6ac3dc, #7347b3, #6ac3dc, #7347b3);
  animation: shimmerBar 3s linear infinite;
}
@keyframes shimmerBar {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



/* ── Révélation mot à mot du titre (piloté par main.js, présent sur
   plusieurs pages : index, baccara, contact, team, actualités) ── */
#hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
#hero-title .word span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: wordReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wordReveal {
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 767.98px) {
  :root {
    --section-space: 36px;
  }
}

/* ==========================================================
   CHIFFRES CLÉS - cartes claires (utilisé par index.html et network.html)
   ========================================================== */
.stats-section {
  background: #f8f7fd;
  text-align: center;
}

.stats-eyebrow {
  display: block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
}

.stats-heading {
  max-width: 780px;
  margin: 0 auto 54px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: var(--ink);
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 240px;
  padding: 26px 24px;
  border: 1px solid rgba(36, 27, 61, 0.08);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  box-shadow: 0 8px 24px rgba(115, 71, 179, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(115, 71, 179, 0.25);
  box-shadow: 0 22px 45px rgba(115, 71, 179, 0.16);
}

.stat-value {
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(43, 29, 79, 0.325);
  font-size: 50px;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--ink);
}

.stat-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
}

.stat-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--inkSoft);
}

.stat-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(115, 71, 179, 0.09);
  color: var(--primary);
  font-size: 15px;
  text-decoration: none;
  transition: 0.25s ease;
}

.stat-arrow:hover {
  background: var(--primary);
  color: #fff;
}

@media (max-width: 991.98px) {
  .stats-heading {
    margin-bottom: 38px;
  }
  .stat-card {
    min-height: 0;
  }
  .stat-value {
    font-size: 44px;
  }
}


/* ==========================================================
   PAGE HERO - bandeau de titre des pages intérieures
   (network.html, contact.html…) : hauteur plafonnée à 500px,
   contenu centré, lumière basse identique au hero de l'accueil
   ========================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 500px;
  padding-top: 80px;
  background: linear-gradient(
    105deg,
    #436ba1 0%,
    #4c609e 30%,
    #574f9c 55%,
    #65409d 78%,
    #7038a1 100%
  );
  color: #fff;
}

/* ── Lumière basse et halo, identiques au hero de l'accueil ── */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  background:
    radial-gradient(
      72% 140px at 50% 102%,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0) 74%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.06) 30%,
      rgba(255, 255, 255, 0.18) 48%,
      rgba(255, 255, 255, 0.4) 65%,
      rgba(255, 255, 255, 0.68) 80%,
      rgba(255, 255, 255, 0.9) 91%,
      #ffffff 100%
    );
  pointer-events: none;
  z-index: 3;
}

/* la lumière continue sous l'arête basse, par-dessus la page */
.hero-afterglow {
  position: relative;
  /* derrière le contenu de la page, au-dessus du fond */
  z-index: -1;
  height: 160px;
  margin-bottom: -160px;
  pointer-events: none;
  background:
    radial-gradient(
      60% 160px at 50% 0%,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0) 72%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.8) 30%,
      rgba(255, 255, 255, 0.35) 62%,
      rgba(255, 255, 255, 0) 100%
    );
}

.page-hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 70% at 50% 45%,
    #000 10%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 60% 70% at 50% 45%,
    #000 10%,
    transparent 75%
  );
  pointer-events: none;
}


.page-hero-title {
  margin: 0 0 18px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  color: #fff;
}

.page-hero-sub {
  max-width: 620px;
  margin: 0 auto 30px;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

/* ── Bouton LinkedIn ── */

@media (max-width: 991.98px) {
  .page-hero {
    height: auto;
    min-height: 380px;
  }
  .page-hero-title {
    font-size: 34px;
  }

  /* La lumière basse est calibrée pour un hero de 500px ; sur un
     écran étroit elle mangeait une bien plus grande part de sa
     hauteur. On la raccourcit et on atténue la tache centrale,
     en gardant le fondu vers le blanc de la page. */
  .page-hero::after {
    height: 120px;
    background:
      radial-gradient(
        80% 100px at 50% 104%,
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0) 76%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.34) 62%,
        rgba(255, 255, 255, 0.66) 82%,
        #ffffff 100%
      );
  }

  .hero-afterglow {
    height: 100px;
    margin-bottom: -100px;
    background:
      radial-gradient(
        70% 100px at 50% 0%,
        rgba(255, 255, 255, 0.7),
        rgba(255, 255, 255, 0) 74%
      ),
      linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.6) 34%,
        rgba(255, 255, 255, 0.2) 66%,
        rgba(255, 255, 255, 0) 100%
      );
  }
}

@media (max-width: 575.98px) {
  .page-hero-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }
  .page-hero-sub{
    font-size: 13px !important;
  }
  .solution-card p{
    font-size: 13px !important;
  }

}

.page-hero-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
}

/* ==========================================================
   CARTES À PASTILLE - composant partagé (produits, à propos, équipe)
   Cartes de hauteur égale (la plus haute impose la hauteur)
   et pastilles d'icônes entièrement dessinées en CSS.
   ========================================================== */
.solution-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 26px;
  border: 1px solid rgba(115, 71, 179, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(36, 27, 61, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  border-color: rgba(114, 71, 179, 0.4);
  box-shadow: 0 24px 48px rgba(115, 71, 179, 0.2);
}

.solution-card h5 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.solution-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--inkSoft);
}

/* ── Pastille : anneau translucide + dégradé + lueur interne ── */
.solution-icon {
  position: relative;
  flex: none;
  width: 40px;
  aspect-ratio: 1;
  margin-bottom: 15px;
  border: solid 0.438rem rgba(115, 71, 179, 0.18);
  border-radius: 50%;
  background: linear-gradient(147deg, var(--primary) 10%, var(--logoCyan) 89%);
  background-clip: content-box;
  box-shadow: 0 0 0.7rem 0 rgba(71, 33, 241, 0.55) inset;
}

/* ==========================================================
   BLOCS VISUEL + TEXTE - composant partagé (reseau, à propos)
   ========================================================== */
.split-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.split-block--reverse .split-visual {
  order: 2;
}

.split-visual {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(36, 27, 61, 0.22);
}

.split-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  /* la hauteur ne dépasse jamais 500px */
  max-height: 450px;
  object-fit: cover;
}

.split-title {
  margin-bottom: 16px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.split-lead {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--inkSoft);
}

.split-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.split-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--inkSoft);
}

/* coche dessinée en CSS, sans police d'icônes */
.split-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------
   RESPONSIVE - sous 992px les deux colonnes s’empilent
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .split-block {
    grid-template-columns: 1fr;
    /* les marges des éléments assurent l’espacement : une fois
       .split-text aplati, un gap s’insérerait entre chacun d’eux */
    gap: 0;
  }

  /* Le titre doit passer avant le visuel. display: contents efface
     le conteneur .split-text sans toucher à son contenu : ses enfants
     deviennent des éléments de la grille et peuvent donc être ordonnés
     avec le visuel, ce que order seul ne permettrait pas.
     Le combinateur enfant épargne les blocs --framed, où .split-text
     vit dans .split-body et où le titre est déjà en tête. */
  .split-block > .split-text {
    display: contents;
  }

  /* tout le corps passe après le visuel, dans l’ordre du balisage */
  .split-block > .split-text > * {
    order: 3;
  }

  .split-block > .split-text > .split-title {
    order: 1;
  }

  .split-block > .split-visual {
    order: 2;
    margin-bottom: 28px;
  }

  /* titre et bouton centrés une fois les colonnes empilées */
  .split-title {
    text-align: center;
  }

  /* la hauteur ne peut plus suivre celle du texte à côté : on la fixe */
  .split-img {
    min-height: 0;
    height: 350px;
  }

  /* .btn est en inline-flex : width fit-content + marges auto le
     centrent sans toucher à l’alignement du texte qui l’entoure */
  .split-text .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}

/* ==========================================================
   EN-TÊTE DE SECTION - motif unique : sur-titre, titre, accroche
   .section-head            = version centrée (grilles de cartes)
   .section-head--start     = version alignée à gauche (blocs image + texte)
   ========================================================== */
.section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head--start {
  max-width: none;
  margin: 0 0 24px;
  text-align: left;
}

.section-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
}

.section-heading {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.section-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--inkSoft);
}

/* fonds alternés pour rythmer la page */
.section--tinted {
  background: #f8f7fd;
}

.section--white {
  background: #fff;
}

/* fond rayé lavande : deux trames aux angles très légèrement
   différents, ce décalage fait varier l'épaisseur des rayures sur
   la largeur. Le masque les efface vers le haut de la section. */
.section--striped {
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.section--striped::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      179.4deg,
      rgba(232, 224, 250, 0.5) 0 3px,
      transparent 3px 15px
    ),
    repeating-linear-gradient(
      180.7deg,
      rgba(232, 224, 250, 0.3) 0 1px,
      transparent 1px 9px
    );
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.75));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.75));
}

.section--striped > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   CARTE SANS PASTILLE - titre, filet dégradé, texte
   ========================================================== */
.info-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  border: 1px solid rgba(115, 71, 179, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(36, 27, 61, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.info-card:hover {
  transform: translateY(-6px);
  border-color: rgba(115, 71, 179, 0.28);
  box-shadow: 0 22px 44px rgba(115, 71, 179, 0.14);
}

/* hauteur de deux lignes réservée : le filet se place toujours
   à la même distance du haut de la carte, que le titre tienne
   sur une ou deux lignes */
.info-card h5 {
  position: relative;
  /* 2 lignes de texte + le padding, car box-sizing: border-box
     fait entrer le padding dans la hauteur */
  min-height: calc(2.6em + 20px);
  margin: 0 0 22px;
  padding-bottom: 20px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--ink);
}

/* filet dégradé sous le titre */
.info-card h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--logoCyan) 100%
  );
  opacity: 0.55;
}

.info-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--inkSoft);
}

/* ==========================================================
   BLOC IMAGE + TEXTE, VERSION ENCADRÉE
   Carte blanche englobante et panneau sombre côté visuel.
   ========================================================== */
.split-block--framed {
  padding: 44px;
  border-radius: 20px;
  background: #fff;
}

.split-block--framed .split-visual {
  padding: 6px;
  border-radius: 18px;
  background: linear-gradient(
    150deg,
    #91b6f6 0%,
    #5f4ea0 55%,
    #9b64e9 100%
  );
  box-shadow: 0 22px 50px rgba(36, 27, 61, 0.24);
}

.split-block--framed .split-img {
  border-radius: 12px;
  min-height: 300px;
}

@media (max-width: 991.98px) {
  .split-block--framed {
    padding: 26px;
  }
}

@media (max-width: 575.98px) {
  .split-block--framed {
    padding: 18px;
  }
}

/* titre sur la première ligne, visuel et texte sur la seconde */
.split-block--framed {
  display: block;
}

.split-head {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

.split-head .split-title {
  margin-bottom: 0;
}

.split-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 44px;
}

@media (max-width: 991.98px) {
  .split-body {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .split-head {
    margin-bottom: 24px;
  }
}


/* ==========================================================
   CARTE INVERSÉE - fond violet, texte clair
   Pour une section que l'on veut détacher franchement.
   ========================================================== */
.dark-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 30px;
  border-radius: 18px;
  background: white;
  color: #211d1d;
  box-shadow: 0 22px 50px rgba(115, 71, 179, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(115, 71, 179, 0.38);
}

/* même réservation de deux lignes pour aligner les soulignements */
.dark-card h5 {
  position: relative;
  min-height: calc(2.7em + 18px);
  margin: 0 0 20px;
  padding-bottom: 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #000000;
}

.dark-card h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--logoCyan);
}

.dark-card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.82);
}

.dark-card p:last-child {
  margin-bottom: 0;
}

/* en-tête sur une ligne : texte à gauche, bouton à droite */
.section-head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  max-width: none;
  margin: 0 0 44px;
  text-align: left;
}

.section-head--row .section-lead {
  max-width: 560px;
}

.section-head--row .btn {
  flex: none;
}

@media (max-width: 767.98px) {
  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
  }
}


.bg-img{
  background-image: url("../img/bg2.webp");
  background-size:cover;
  background-repeat: no-repeat;
  box-shadow: 10px 10px 20px white;
}
/* section pleine largeur sur le dégradé de la marque */
.section--gradient {
  background: linear-gradient(
    105deg,
    #436ba1 0%,
    #4c609e 30%,
    #574f9c 55%,
    #65409d 78%,
    #7038a1 100%
  );
  color: #fff;
}

.section--gradient .section-eyebrow {
  color: var(--logoCyan);
}

.section--gradient .section-heading {
  color: #fff;
}

.section--gradient .section-lead {
  color: rgba(255, 255, 255, 0.85);
}

.bg-white{
  background-color: #fff;
}
/* ==========================================================
   ANCRES - décalage sous les barres fixes
   La navbar est en position: fixed (40px de bandeau + ~53px de
   hauteur). Sans ce décalage, un lien d'ancre amène la section
   sous la barre et son titre reste caché.
   ========================================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

section[id],
div[id].hero-afterglow + section[id],
[id].page-section {
  scroll-margin-top: 120px;
}

/* ==========================================================
   CHIFFRES - alignement en colonnes
   Inter propose des chiffres tabulaires : tous de même largeur.
   Indispensable partout où des nombres se superposent (compteurs,
   dates, statistiques), sinon les colonnes dansent d'une ligne
   à l'autre pendant l'animation des compteurs.
   ========================================================== */
.stat-value,
.counter,
.hero-proof-value,
.bn-date,
.article-date,
.event-facts,
.post-date {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================
   FORMULAIRES - champs communs à tout le site
   (page contact, modale de démonstration, inscription
   aux événements)
   ========================================================== */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  letter-spacing: 0.3px;
}

.form-group label span {
  color: #7347b3;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  background: #f5f7fb;
  border: 1px solid #e8ecf4;
  border-radius: 6px;
  font-size: 14px;
  color: #222;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #b0b8c8;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #7347b3;
  background: #fff;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: #f5f7fb;
  padding-right: 36px;
  cursor: pointer;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   MOBILE - respiration latérale
   Bootstrap ne réserve que 12px de chaque côté sur .container.
   On passe à 15px sur toutes les sections, y compris celles
   qui ne s'appuient pas sur .container.
   ========================================================== */
@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  .listing,
  .section > .container,
  .page-hero .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* la grille Bootstrap annule ce padding par ses marges négatives */
  .container > .row,
  .section > .container > .row {
    margin-left: 0;
    margin-right: 0;
  }

  .container > .row > [class*="col-"],
  .section > .container > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================
   MOBILE - alignement
   Seuls les en-têtes de section sont centrés. Les textes
   courants (cartes, blocs image + texte) restent alignés à
   gauche : centrer des paragraphes de longueurs inégales rend
   la lecture pénible sur une colonne étroite.
   ========================================================== */
@media (max-width: 767.98px) {
  /* en-têtes de section */
  .section-head--start,
  .section-head--row {
    text-align: center;
    align-items: center;
  }

  .section-lead{
    font-size: 13px !important;
  }

  .section-head--row .section-lead,
  .section-head--start .section-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .split-text p, .split-text li{
    font-size: 13px !important;
  }

  /* titre des blocs image + texte : centré, le corps reste à gauche */
  .split-head {
    text-align: center;
  }

  .contact-form .btn {
    align-self: flex-start;
  }

  .filter-list {
    justify-content: center;
  }

  .listing-filters-title {
    text-align: center;
  }
}

/* ==========================================================
   VALIDATION DES FORMULAIRES - messages d'erreur
   Les messages sont créés par js/form-validation.js et insérés
   juste après le champ fautif.
   ========================================================== */
.field-error {
  min-height: 0;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #c2334d;
}

/* le message vide ne doit pas laisser d'espace derrière lui */
.field-error:empty {
  display: none;
}

.is-invalid {
  border-color: #c2334d !important;
}

.is-invalid:focus {
  border-color: #c2334d !important;
  box-shadow: 0 0 0 3px rgba(194, 51, 77, 0.14) !important;
}

.form-success {
  margin: 18px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #1f8a63;
  text-align: center;
}

/* les deux formulaires de newsletter sont en ligne : sans
   flex-wrap, le message d'erreur n'aurait nulle part où aller */
.newsletter-form,
.newsletter-box {
  flex-wrap: wrap;
}

/* sur fond sombre, le rouge et le vert d'origine passent mal */
.newsletter-band .field-error,
.newsletter-box .field-error {
  color: #ffd2d8;
}

.newsletter-band .form-success,
.newsletter-box .form-success {
  color: #b9f5dd;
}

/* Le message est inséré dans le DOM juste après le champ : dans une
   ligne flex il s'intercalait donc entre le champ et le bouton et,
   occupant toute la largeur, renvoyait le bouton à la ligne suivante
   tandis que le champ s'étirait seul sur la première. L'ordre visuel
   remet le bouton contre le champ et relègue le message en dessous. */
.newsletter-form .newsletter-input,
.newsletter-box input {
  order: 1;
}

.newsletter-form .btn,
.newsletter-box .btn {
  order: 2;
}

/* Dans ces deux formulaires en ligne, le message doit occuper
   toute la largeur au lieu de se glisser entre le champ et le
   bouton. flex-basis est réservé à ce cas : dans un conteneur en
   colonne - .form-group, .demo-field - il fixerait la hauteur du
   message à 100 % de la sienne, et le champ serait comprimé pour
   lui laisser la place. */
.newsletter-form .field-error,
.newsletter-box .field-error,
.newsletter-form .form-success,
.newsletter-box .form-success {
  flex-basis: 100%;
  order: 3;
}

/* ==========================================================
   VOIR PLUS - bouton de chargement sous une grille
   Le chargement des éléments suivants reste à brancher.
   ========================================================== */
.listing-more {
  /* dans .listing, qui est une grille à deux colonnes, le bloc
     tomberait sinon dans la colonne des filtres */
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* la flèche pointe vers le bas : le décalage en diagonale des
   autres boutons n'aurait pas de sens ici */
.listing-more .btn:hover i {
  transform: translateY(3px);
}

/* ==========================================================
   SECTION À HALOS - deux lueurs violettes diffuses
   Un violet un peu plus dense vers le haut à gauche, un violet
   clair vers le bas à droite : deux nuances plutôt qu'une seule,
   sans quoi les taches se confondraient en un aplat uniforme.
   Les centres sont ramenés vers l'intérieur pour que les lueurs
   se dissipent avant les bords, au lieu d'être coupées net par
   l'overflow. Elles restent pâles : du texte foncé se lit
   par-dessus.
   ========================================================== */
.section--halo {
  position: relative;
  overflow: hidden;
}

.section--halo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      34% 38% at 22% 28%,
      rgba(168, 128, 232, 0.32),
      transparent 70%
    ),
    radial-gradient(
      32% 36% at 78% 74%,
      rgba(196, 166, 244, 0.32),
      transparent 70%
    );
}

/* le contenu repasse au-dessus des halos */
.section--halo > .container {
  position: relative;
  z-index: 1;
}

.section-tag{
  text-transform: uppercase !important;
}
/* ==========================================================
   MENTIONS LÉGALES - bloc de texte unique
   width + max-width plutôt qu'un media query : au-delà de
   1000px le bloc s'y tient et se centre, en dessous il occupe
   toute la largeur disponible.
   ========================================================== */
.legal-text {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.9;
  color: var(--inkSoft);
}

.legal-text strong {
  color: var(--ink);
}

.legal-text a {
  color: var(--primary);
}