/*
@author UBPartner
*/
/* ==========================================================
   HOME - contenu de la page index.html uniquement
   ========================================================== */

.hero-modern {
  position: relative;
  overflow: hidden;
  padding: 150px 0 160px;
  /* dégradé bleu -> violet repris de img/bg_section.png */
  background: linear-gradient(
    105deg,
    #6195d8 0%,
    #657eca 30%,
    #665db3 55%,
    #65409d 78%,
    #7038a1 100%
  );
  color: #ffffff;
}


/* voile sombre côté gauche : le dégradé de l'image est clair, le texte blanc
   n'y passerait pas (3,4:1). Le voile ne touche pas la zone des orbites. */
.hero-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(28, 22, 66, 0.4) 0%,
    rgba(28, 22, 66, 0.16) 40%,
    rgba(28, 22, 66, 0) 65%
  );
  pointer-events: none;
}

/* --- Style actif : la lumière blanche monte du bas en dégradé --- */
.hero-modern::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background:
    radial-gradient(
      72% 190px 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: 190px;
  margin-bottom: -190px;
  pointer-events: none;
  background:
    radial-gradient(
      60% 190px 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%
    );
}

/* --- Variante : fondu clair vers le fond de page (l'ancien réglage) ---
.hero-modern::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 300px;
  background:
    radial-gradient(62% 150px at 50% 100%, rgba(255,255,255,0.55), rgba(255,255,255,0) 72%),
    linear-gradient(180deg,
      rgba(243,244,251,0) 0%, rgba(243,244,251,0.04) 30%, rgba(243,244,251,0.12) 45%,
      rgba(243,244,251,0.25) 58%, rgba(243,244,251,0.45) 70%, rgba(243,244,251,0.68) 82%,
      rgba(243,244,251,0.88) 91%, #f3f4fb 100%);
  pointer-events: none;
  z-index: 3;
}
*/

/* --- Variante : liseré lumineux sur l'arête basse ---
.hero-modern::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(63,200,224,0) 0%, rgba(63,200,224,0.9) 25%,
    rgba(123,63,212,0.9) 75%, rgba(123,63,212,0) 100%);
  pointer-events: none;
  z-index: 3;
}
*/
/* le texte reste au-dessus des orbites qui débordent sur la gauche */
.hero-modern .row > div:first-child {
  position: relative;
  z-index: 2;
}

/* ── Colonne texte ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 7px 16px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--logoCyan);
  box-shadow: 0 0 0 4px rgba(63, 200, 224, 0.2);
}

.hero-title {
  max-width: 560px;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: #fff;
}

.hero-title-accent {
  color: var(--logoCyan);
}

.hero-desc {
  max-width: 520px;
  margin-top: 22px;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}

/* preuves chiffrées */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-proof-item {
  display: flex;
  flex-direction: column;
}

.hero-proof-value {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.hero-proof-label {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ── Système d'orbites ── */
.hero-orbit {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 620 / 520;
  margin-left: auto;
}

.orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* les ellipses tournent en boucle autour du centre */
.orbit-ring {
  transform-box: view-box;
  transform-origin: 310px 260px;
}

.orbit-r1 {
  animation: orbitSpin 46s linear infinite;
}

.orbit-r2 {
  animation: orbitSpinRev 34s linear infinite;
}

.orbit-r3 {
  animation: orbitSpin 26s linear infinite;
}

.orbit-r4 {
  animation: orbitSpinRev 18s linear infinite;
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitSpinRev {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.orbit-core {
  transform-box: view-box;
  transform-origin: 310px 260px;
  animation: orbitPulse 6s ease-in-out infinite;
}

@keyframes orbitPulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.orbit-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: auto;
  filter: drop-shadow(0 8px 26px rgba(231, 228, 235, 0.55));
}

.orbit-pill {
  position: absolute;
  /* les coordonnées viennent de --x / --y, posées en style en ligne
     sur chaque pastille : le mobile peut ainsi les redéfinir sans
     avoir à surcharger un style en ligne à coups de !important */
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 9px 18px;
  border-radius: 40px;
  
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.25s ease, color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Position de chaque pastille sur le cercle. Elles vivaient en style
   en ligne, mais un style en ligne l’emporte sur toute feuille de
   style : le mobile ne pouvait donc pas les repositionner.
   Ordre du balisage : Collecte, Contrôles, ENS, EBA, QRT, SFCR,
   ACPR, COREP. */
.orbit-pill:nth-of-type(1) { --x: 37%; --y: 6%; }
.orbit-pill:nth-of-type(2) { --x: 74%; --y: 9%; }
.orbit-pill:nth-of-type(3) { --x: 10%; --y: 50%; }
.orbit-pill:nth-of-type(4) { --x: 84%; --y: 43%; }
.orbit-pill:nth-of-type(5) { --x: 36%; --y: 33%; }
.orbit-pill:nth-of-type(6) { --x: 70%; --y: 33%; }
.orbit-pill:nth-of-type(7) { --x: 75%; --y: 68%; }
.orbit-pill:nth-of-type(8) { --x: 48%; --y: 83%; }

.orbit-pill:hover {
  border-color: rgba(63, 200, 224, 0.8);
  color: #fff;
  box-shadow: 0 0 24px rgba(123, 63, 212, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .orbit-core,
  .orbit-ring {
    animation: none;
  }
}

@media (max-width: 1199.98px) {
  .hero-title {
    font-size: 44px;
  }
  .orbit-pill {
    font-size: 12px;
    padding: 7px 14px;
  }
  .orbit-logo {
    width: 66px;
  }
}

@media (max-width: 991.98px) {
  .hero-modern {
    padding: 120px 0 70px;
  }

  /* Ordre mobile : titre, visuel, accroche, boutons.
     display: contents fait disparaître les deux colonnes de la grille :
     leurs enfants deviennent frères et peuvent donc être réordonnés
     entre eux, ce que order seul ne permettrait pas. */
  /* le titre et les orbites partagent la même cellule de grille :
     le texte se superpose au visuel, comme sur la maquette */
  .hero-modern .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    gap: 0;
  }

  .hero-modern .row > [class*="col-"] {
    display: contents;
  }

  .hero-title {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: center;
    max-width: 100%;
    margin: 0;
    padding: 0 4px;
    font-size: 38px;
    line-height: 1.25;
    text-align: center;
    color: #ffffff
  }

  .hero-orbit {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 320px;
    margin: 0;
  }

  /* voile posé par-dessus les orbites : sans lui le titre passerait
     au milieu des anneaux et des pastilles, illisible */
  .hero-orbit::after {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(
      closest-side,
      rgba(214, 171, 255, 0.5),
      rgba(209, 180, 219, 0.35) 62%,
      rgba(204, 141, 234, 0) 100%
    );
  }

  /* Les deux grands anneaux sont plus larges que hauts : en tournant,
     ils balaient un cercle du rayon de leur grand axe et remontaient
     donc par-dessus le titre. On ne garde que les petits en mobile. */
  .orbit-r1,
  .orbit-r2 {
    display: none;
  }

  /* Les pastilles s’écartent du centre en mobile : le cercle est
     plus petit et le titre passe par-dessus, il faut dégager la
     bande centrale. */
  .orbit-pill {
    font-size: 11.5px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.6);
  }

  .orbit-pill:nth-of-type(1) { --x: 27%; --y: 6%; }
  .orbit-pill:nth-of-type(2) { --x: 84%; --y: 9%; }
  .orbit-pill:nth-of-type(3) { --x: 0%;  --y: 30%; }
  .orbit-pill:nth-of-type(4) { --x: 95%; --y: 43%; }
  .orbit-pill:nth-of-type(5) { --x: 20%; --y: 20%; }
  .orbit-pill:nth-of-type(6) { --x: 70%; --y: 23%; }
  .orbit-pill:nth-of-type(7) { --x: 65%; --y: 80%; }
  .orbit-pill:nth-of-type(8) { --x: 28%; --y: 90%; }

  /* accroche et boutons vivent maintenant dans .hero-pitch,
     qui porte l'ordre 3 : ils n'ont plus à être ordonnés eux-mêmes */
  .hero-desc {
    text-align: center;
  }


  .hero-actions {
    margin-top: 0;
    justify-content: center;
  }

  /* un seul appel à l'action sur mobile : le bouton principal */
  .hero-actions .btn-ghost {
    display: none;
  }

  .hero-proof {
    order: 5;
    justify-content: center;
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 31px;
    letter-spacing: -0.5px;
  }
  .hero-proof {
    gap: 22px;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .orbit-pill {
    font-size: 10.5px;
    padding: 6px 11px;
  }
  .orbit-logo {
    width: 52px;
  }
}

/* ==========================================================
   PARTENAIRES ET TÉMOIGNAGES
   ========================================================== */

/* ── Sur-titre ── violet et gras, pour qu'il se lise comme un titre de
   section et non comme une mention grise */
.partners-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
}

/* Sur la page générée, le texte est dans un <small> sous l'enveloppe du
   widget : Bootstrap le réduirait à 0.875em et le titre Elementor porte
   sa propre couleur. Les deux héritent. */
.partners-eyebrow small,
.partners-eyebrow .elementor-heading-title {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* ── Bloc combiné logos + témoignages ── */
.pt-section {
  background: #fff;
}

.pt-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5%;
  min-height: 420px;
}

/* Logo grid (fills full background) */
.pt-logos {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Logo grid rows */
.pt-logos-row {
  display: flex;
  overflow: hidden;
  border-top: 1px solid #ebebeb;
  height: 100px;
}

.pt-logos-row:last-child {
  border-bottom: 1px solid #ebebeb;
}

.pt-logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}

.pt-rev .pt-logos-track {
  animation-direction: reverse;
}

.pt-logos-track:hover {
  animation-play-state: paused;
}

.pt-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 88px;
  border-right: 1px solid #ebebeb;
  padding: 0 28px;
  flex-shrink: 0;
}

.pt-logo-cell img {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.pt-logo-cell img:hover {
  opacity: 1;
}

/* Testimonial card (overlaid) */
.pt-card {
  position: relative;
  z-index: 10;
  width: 370px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.14), 0 4px 20px rgba(115, 71, 179, 0.08);
  padding: 34px 36px 30px;
  z-index: 10;
  pointer-events: auto;
}

@media (max-width: 860px) {
  .pt-inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 24px;
    min-height: 500px;
  }
  .pt-card {
    width: calc(100% - 40px);
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  }
}

.pt-slide {
  display: none;
}

.pt-slide.active {
  display: block;
}

.pt-slide-company {
  font-size: 18px;
  font-weight: 700;
  color: #7347b3;
  margin-bottom: 4px;
}

.pt-slide-person {
  font-size: 12.5px;
  color: #999;
  margin-bottom: 20px;
}

.pt-slide-text {
  font-size: 14px;
  color: #444;
  line-height: 1.85;
  margin: 0;
}

/* Nav */
.pt-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #eef0f6;
}

.pt-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(115, 71, 179, 0.09);
  color: var(--primary);
  font-size: 15px;
  text-decoration: none;
  transition: 0.25s ease;
}

.pt-nav-btn:hover {
  background: #7347b3;
  color: #fff;
  font-weight: bold;
}

.pt-nav-count {
  font-size: 13px;
  font-weight: 600;
  color: #888;
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================
   EXPERTISES - cartes de domaines
   ========================================================== */
.feature-item {
  text-align: center;
}

/* Les trois cartes descendent jusqu'au même bas, quelle que soit la longueur
   du texte.

   La colonne avait déjà la hauteur de la plus haute : c'est la rangée
   Bootstrap qui la lui donne, et le générateur la rend en conteneur. La carte,
   elle, s'arrêtait à son contenu et laissait un vide sous les plus courtes.

   Deux déclarations suffisent donc, et rien de plus : rendre la colonne flex,
   puis laisser la carte prendre la place restante. En 0-1-0, au-dessus du flux
   de bloc que compat.css rend aux conteneurs générés en 0-0-0.

   Sous 768 px la rangée Bootstrap empile les colonnes : chaque carte est alors
   seule sur sa ligne, la règle ne s'y applique plus d'elle-même, et une hauteur
   imposée n'y ferait qu'ajouter du vide. */
.feature-col {
  display: flex;
}

.feature-col > .feature-item {
  flex: 1 1 auto;
}

.feature-icon {
  font-size: 42px;
  color: var(--primary);
  margin-bottom: 6px;
}

.feature-item h5 {
  font-weight: 700;
}

.feature-item p {
  color: #666;
}
/* ==========================================================
   TÉMOIGNAGE - encart pleine largeur
   ========================================================== */
.testimonial-box {
  border-radius: 18px;
  overflow: hidden;
}

.testimonial-img {
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 14px;
}

.testimonial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-content {
  padding: 35px;
  text-align: center;
}

.tag {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.quote-icon {
  font-size: 32px;
  color: var(--accent);
  margin: 10px 0;
}

.testimonial-text {
  color: #666;
  font-style: italic;
  max-width: 420px;
  margin: auto;
}

.review-person {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================
   PUBLICATIONS - deux colonnes : en-tête fixe, cartes défilantes

   La section suit le rythme et le .container du reste de la page. Seule la
   piste de cartes sort du cadre, vers la droite.

   Tout ce bloc est rendu par le widget « C3S - Derniers articles », en-tête
   et commandes comprises : les flèches, la piste et les pastilles se
   commandent l'une l'autre, et le script a besoin de les trouver ensemble.
   ========================================================== */
.stories-layout {
  position: relative;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: center;
  gap: 50px;
}

/* Bandeau teinté derrière toute la ligne.

   C'est un calque décoratif : il ne déplace ni le titre ni l'accroche, qui
   restent à l'aplomb des autres sections. Les valeurs n'ont rien de figé.
   50% se rapporte à la largeur du .container, donc (50% - 50vw) est
   exactement la distance qui sépare son bord gauche de celui de l'écran : le
   bandeau part de ce bord et couvre les 100vw suivants, quelle que soit la
   résolution. Le retrait de 60px en bas laisse les cartes dépasser sous lui. */
.stories-layout::before {
  content: "";
  position: absolute;
  top: -60px;
  bottom: 60px;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #eceef5;
  pointer-events: none;
}

/* le contenu repasse au-dessus du bandeau */
.stories-layout > * {
  position: relative;
  z-index: 1;
}

.stories-intro .section-heading {
  margin-bottom: 18px;
}

/* ── Commandes ── */
.stories-controls {
  display: flex;
  gap: 12px;
  margin: 34px 0 0;
}

.stories-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(115, 71, 179, 0.3);
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    opacity 0.25s ease;
}

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

.stories-arrow:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* en bout de course, la flèche reste visible mais inerte */
.stories-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.stories-arrow[disabled]:hover {
  border-color: rgba(115, 71, 179, 0.3);
  background: #fff;
  color: var(--primary);
}

/* ── La piste ── */
/* Les cartes doivent être coupées à gauche, pour ne pas passer sous
   l'en-tête, mais se prolonger à droite jusqu'au bord de l'écran. Un
   overflow: hidden couperait des deux côtés ; un inset dont la valeur droite
   est négative n'agit que sur la gauche, quelle que soit la largeur de
   l'écran. Le débordement ne fait pas défiler la page : le corps porte
   overflow-x: clip, dans style.css. */
.stories-viewport {
  clip-path: inset(-24px -100vw -24px 0);
}

.stories-track {
  display: flex;
  gap: 22px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── La carte ── */
.story-card {
  position: relative;
  flex: 0 0 330px;
  display: flex;
  align-items: flex-end;
  height: 440px;
  overflow: hidden;
  border-radius: 4px;
  text-decoration: none;
  /* l'agrandissement de la carte de tête part de son bord gauche, celui
     contre lequel la piste vient se caler */
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* La carte où l'on est, mise en avant. Le script pose la classe à chaque
   déplacement de la piste.

   Le débordement reste dans la vue : la piste est découpée avec 24 px de
   marge en haut et en bas, et les 5 % ne coûtent que 11 px de chaque côté. */
.story-card.is-active {
  z-index: 1;
  transform: scale(1.05);
}

.story-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* voile sombre : sans lui, la lisibilité du texte blanc dépendrait de la zone
   de photo affichée, ce qui n'est jamais fiable */
.story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28, 20, 56, 0.55) 0%,
    rgba(28, 20, 56, 0.2) 35%,
    rgba(28, 20, 56, 0.82) 100%
  );
  transition: background 0.35s ease;
}

.story-card:hover .story-img {
  transform: scale(1.06);
}

/* Au survol, un voile blanc à 20 % vient par-dessus le dégradé sombre, qui
   reste en place : le texte garde sa lisibilité et ses couleurs. La première
   couche est un dégradé à deux arrêts identiques, seule façon d'empiler un
   aplat au-dessus d'un fond. */
.story-card:hover::after {
  background: linear-gradient(
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.2)
    ),
    linear-gradient(
      180deg,
      rgba(28, 20, 56, 0.55) 0%,
      rgba(28, 20, 56, 0.2) 35%,
      rgba(28, 20, 56, 0.82) 100%
    );
}

.story-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}

.story-body {
  position: relative;
  z-index: 1;
  padding: 26px 24px 28px;
}

.story-date {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/* Titre et accroche coupent à 3 lignes mais en réservent 3 : sans cette
   hauteur minimale, un texte court raccourcit le bloc et, les cartes étant
   alignées par le bas, son contenu démarre plus haut que celui des voisines.
   En em pour suivre la police mobile. */
.story-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em; /* 3 x 1.3 */
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #fff;
}

.story-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.8em; /* 3 x 1.6 */
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* span et non lien : la carte entière en est déjà un, et imbriquer deux <a>
   produit un HTML invalide */
.story-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 0.25s ease;
}

.story-more i {
  font-size: 13px;
  transition: transform 0.25s ease;
}

.story-card:hover .story-more {
  border-bottom-color: #fff;
}

.story-card:hover .story-more i {
  transform: translate(3px, -3px);
}

/* ── Pastilles ── */
/* Toutes de même taille, seule la couleur distingue la position courante :
   un repère qui change de forme attire l'œil plus que les cartes elles-mêmes. */
.stories-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

.stories-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(36, 27, 61, 0.18);
  cursor: pointer;
  transition: background 0.25s ease;
}

.stories-dot:hover {
  background: rgba(115, 71, 179, 0.45);
}

.stories-dot.is-active {
  background: var(--primary);
}

.stories-dot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Sans script, pas de pastilles : la rangée resterait un vide de 10 px
   au-dessous des cartes. */
.stories-dots:empty {
  display: none;
}

/* Le glissement de la piste et l'agrandissement de l'image au survol sont
   des mouvements : ils cessent pour qui en demande moins. La piste continue
   de se déplacer, mais d'un coup, sans transition. */
@media (prefers-reduced-motion: reduce) {
  .stories-track,
  .story-img,
  .story-card,
  .story-more i {
    transition: none;
  }

  .story-card:hover .story-img {
    transform: none;
  }

  /* la carte de tête se distingue encore, mais sans grandir */
  .story-card.is-active {
    transform: none;
  }
}

/* ── L'en-tête repasse au-dessus des cartes ── */
@media (max-width: 991.98px) {
  /* Les flèches passent sous les cartes, juste avant les pastilles. Elles
     vivent dans la colonne de gauche : display: contents efface ce conteneur,
     ses enfants deviennent des éléments de la grille et peuvent être
     réordonnés avec la piste, ce que order seul ne permettrait pas. */
  .stories-layout {
    grid-template-columns: minmax(0, 1fr);
    /* l'espacement revient aux marges : un gap s'appliquerait entre chaque
       ligne de l'en-tête une fois celui-ci aplati */
    gap: 0;
  }

  /* le bandeau couvre toujours la ligne, mais s'arrête plus haut : en colonne
     unique les cartes sont bien plus bas */
  .stories-layout::before {
    top: -40px;
    bottom: 130px;
  }

  .stories-intro {
    display: contents;
  }

  /* .stories-intro n'ayant plus de boîte, la règle de z-index posée sur les
     enfants directs de la grille ne l'atteint plus : son contenu passait sous
     le bandeau teinté, qui est positionné et couvre donc tout ce qui ne l'est
     pas. On la reporte ici. */
  .stories-intro > * {
    position: relative;
    z-index: 1;
  }

  /* en-tête centré en haut de la section */
  .stories-intro .section-eyebrow,
  .stories-intro .section-heading,
  .stories-intro .section-lead {
    text-align: center;
  }

  .stories-intro .section-lead {
    margin-inline: auto;
  }

  .stories-viewport {
    order: 1;
    margin-top: 30px;
  }

  .stories-controls {
    order: 2;
    justify-content: center;
    margin: 26px 0 0;
  }
}

@media (max-width: 575.98px) {
  .story-card {
    flex: 0 0 270px;
    height: 400px;
  }

  .stories-track {
    gap: 16px;
  }

  .story-title {
    font-size: 18px;
  }
}


/* ==========================================================
   ACTUALITÉS - VARIANTE liste sombre (à comparer avec les
   cartes ci-dessus ; supprimer l'un des deux blocs après choix)
   ========================================================== */
.news-section {
  position: relative;
  overflow: hidden;
  /* même dégradé que le footer */
  background: linear-gradient(
    105deg,
    #436ba1 0%,
    #4c609e 30%,
    #574f9c 55%,
    #65409d 78%,
    #7038a1 100%
  );
  color: #fff;
}

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

.news-heading {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #fff;
}

/* ── Liste : une entrée par ligne ── */
.news-list {
  max-width: 700px;
  margin: 0 auto;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.news-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.news-item:hover {
  border-bottom-color: var(--logoCyan);
}

.news-thumb {
  flex: none;
  width: 200px;
  height: 128px;
  border-radius: 10px;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.news-item:hover .news-thumb {
  transform: scale(1.03);
  box-shadow: 0 16px 34px rgba(10, 6, 30, 0.45);
}

.news-body {
  min-width: 0;
}

.news-kicker {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.news-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  transition: color 0.25s ease;
}

.news-item:hover .news-title {
  color: var(--logoCyan);
}

@media (max-width: 575.98px) {
  .news-item {
    gap: 16px;
    padding: 18px 0;
  }
  .news-thumb {
    width: 108px;
    height: 78px;
  }
  .news-title {
    font-size: 15.5px;
  }
}

/* ==========================================================
   ÉVÉNEMENTS - liste
   ========================================================== */
.events-list {
  border-top: 1.5px solid #e0e0e0;
}

.event-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1.5px solid #e0e0e0;
  gap: 24px;
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-date {
  font-size: 0.78rem;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.event-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

@media (max-width: 576px) {
  .event-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* le lien passe sous le titre : on le renvoie à droite plutôt
     que de le laisser sous le début du texte */
  .event-item .btn-line {
    align-self: flex-end;
  }
}

/* ==========================================================
   FAQ - titre à gauche, questions à droite
   ========================================================== */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 60px;
}

.faq-intro {
  position: sticky;
  top: 120px;
}

.faq-intro .section-heading {
  margin-bottom: 16px;
}

.faq-intro .section-lead {
  margin-bottom: 26px;
}

/* ── Accordéon ──
   Pas de carte : un simple filet sous chaque ligne, et une pastille ronde
   qui se remplit à l'ouverture. La question compte alors sur sa seule
   typographie, et la liste cesse d'être une pile d'encadrés. */
.accordion-item {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid rgba(36, 27, 61, 0.12);
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transition: border-color 0.25s ease;
}

/* Bootstrap arrondit le premier et le dernier élément par des règles plus
   spécifiques que la nôtre : il faut les viser nommément pour aplatir
   vraiment la liste. */
.accordion-item:first-of-type,
.accordion-item:last-of-type,
.accordion-item:first-of-type .accordion-button,
.accordion-item:last-of-type .accordion-button.collapsed {
  border-radius: 0;
}

/* le filet passe au violet sur la question ouverte */
.accordion-item:has(.accordion-button:not(.collapsed)) {
  border-bottom-color: var(--primary);
  box-shadow: none;
}

.accordion-button {
  gap: 24px;
  padding: 24px 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: none;
  transition: color 0.25s ease;
}

.accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--primary);
  box-shadow: none;
}

.accordion-button:hover {
  color: var(--primary);
}

.accordion-button:focus {
  box-shadow: none;
}

/* Indicateur + / − dessiné en CSS, sans police d'icônes : les deux barres
   sont deux dégradés d'un pixel et demi, et c'est la hauteur de la verticale
   qui tombe à zéro à l'ouverture. Avec un glyphe il aurait fallu permuter
   deux caractères, ce qui saute au lieu de glisser. */
.accordion-button::after {
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background-color: rgba(115, 71, 179, 0.1);
  background-image: linear-gradient(var(--primary), var(--primary)),
    linear-gradient(var(--primary), var(--primary));
  background-size: 11px 1.5px, 1.5px 11px;
  background-position: center, center;
  background-repeat: no-repeat;
  transform: none;
  transition: background-size 0.3s ease, background-color 0.25s ease,
    background-image 0.25s ease;
}

.accordion-button:not(.collapsed)::after {
  background-color: var(--primary);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 11px 1.5px, 1.5px 0;
}

.accordion-body {
  padding: 0 60px 26px 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--inkSoft);
}

@media (max-width: 991.98px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .faq-intro {
    position: static;
  }
}


/* ==========================================================
   ANIMATIONS DU CONTENU HOME
   ========================================================== */

/* ── Hero desc fade-in ── */
.hero-desc {
  animation: fadeSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.hero-actions {
  animation: fadeSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}
.hero-proof {
  animation: fadeSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}
.hero-orbit {
  animation: fadeSlideUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Feature item hover ── */
.feature-item {
  padding: 28px 20px;
  border-radius: 18px;
  transition: background 0.3s ease, box-shadow 0.35s ease, transform 0.35s ease;
  cursor: default;
}
.feature-item:hover {
  background: #fff;
  box-shadow: 0 28px 60px rgba(115, 71, 179, 0.12);
  transform: translateY(-6px);
}
.feature-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-item:hover .feature-icon {
  transform: scale(1.25) rotate(-8deg);
}

/* ── Relief 3D au survol ── */
.feature-item {
  will-change: transform;
}


/* ==========================================================
   ASSISTANT - bulle flottante + panneau de discussion
   ========================================================== */
.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 12px;
  border: 1px solid rgba(115, 71, 179, 0.16);
  border-radius: 40px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(36, 27, 61, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(115, 71, 179, 0.28);
}

.chat-launcher-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(147deg, var(--primary) 13%, var(--logoCyan) 160%);
  color: #fff;
  font-size: 15px;
}

/* ── Panneau ── */
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 1041;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-width: calc(100vw - 32px);
  border: 1px solid rgba(115, 71, 179, 0.14);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(36, 27, 61, 0.26);
  animation: chatIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat-panel[hidden] {
  display: none;
}

@keyframes chatIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(105deg, #574f9c 0%, #7038a1 100%);
  color: #fff;
}

.chat-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 15px;
}

.chat-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.chat-status {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.chat-close {
  margin-left: auto;
  padding: 4px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.chat-close:hover {
  color: #fff;
}

/* ── Corps : message d'attente ── */
.chat-body {
  padding: 38px 26px 34px;
  text-align: center;
}

.chat-body-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(115, 71, 179, 0.1);
  color: var(--primary);
  font-size: 22px;
}

.chat-body-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.chat-body-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--inkSoft);
}

.chat-body-text a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chat-body-text a:hover {
  color: var(--blueMid);
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel {
    animation: none;
  }
}

@media (max-width: 575.98px) {
  /* en mobile la bulle se réduit à sa pastille : le libellé
     prendrait trop de place au-dessus du contenu */
  .chat-launcher {
    right: 16px;
    bottom: 16px;
    gap: 0;
    padding: 6px;
    border-radius: 50%;
  }

  .chat-launcher-label {
    display: none;
  }
  .chat-panel {
    right: 16px;
    bottom: 78px;
  }
  p{
    font-size:  13px !important;
  }
}
@media (max-width: 991.98px) {
  /* Mobile : le hero se lit en deux blocs superposés.
     Bloc haut  - titre puis orbites, sur un dégradé descendant
                  voilé de blanc à 40 % en son sommet.
     Bloc bas   - accroche et bouton sur un aplat violet plein
                  (.hero-pitch, sorti en pleine largeur).        */
  .hero-modern {
    padding: 116px 0 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 38%
      ),
      linear-gradient(180deg, #6195d8 0%, #6a7ecb 55%, #665db3 100%);
  }

  .hero-modern::after {
    display: none;
  }

  .hero-afterglow {
    display: none;
  }

  /* bloc bas : pleine largeur malgré le padding du conteneur */
  .hero-pitch {
    grid-area: 2 / 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: -1px;
    padding: 40px 22px 46px;
    background: #5b3aa0;
    text-align: center;
  }

  .hero-pitch .hero-desc {
    max-width: 480px;
    margin: 0 auto 30px;
    font-size: 16px;
    /* interlignes aérés : le texte blanc sur aplat violet a besoin
       de plus de respiration que sur fond clair */
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.95);
  }

  .hero-pitch .hero-actions {
    margin-top: 0;
  }
}

/* La bascule se fait à 992px et non à 768px : entre les deux, la
   colonne col-md-6 mesure environ 336px, dont 250 pour l’image
   fixe. Il ne restait qu’une cinquantaine de pixels au texte, qui
   se brisait mot par mot. */
@media (max-width: 991.98px) {
  /* même présentation que les cartes de la page Actualités :
     image en haut, corps encadré, titre puis accroche tronqués */


  .blog-content .btn-line {
    align-self: flex-start;
    padding-bottom: 6px;
    font-size: 14px;
  }
}

@media (max-width: 767.98px) {
  /* le bouton « Voir tout » disparaît : sur mobile l'en-tête passe
     en colonne et il se retrouvait isolé sous l'accroche */
  .section-head--row .btn-outline {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* la colonne de gauche passe au-dessus des questions :
     son bloc de titre se centre comme les autres en-têtes */
  .faq-intro {
    text-align: center;
  }

  .faq-intro .section-lead {
    margin-left: auto;
    margin-right: auto;
  }

  /* La question, elle, reste alignée à gauche : elle occupe souvent deux
     lignes, que le centrage rendrait pénibles à lire. */
  .accordion-button {
    gap: 16px;
    padding: 20px 0;
    font-size: 16px;
    text-align: left;
  }

  /* la réserve de droite, qui tenait la réponse à distance de l'indicateur,
     n'a plus lieu d'être sur une colonne étroite */
  .accordion-body {
    padding-right: 0;
    font-size: 14.5px;
  }
}

/* ==========================================================
   NEWSLETTER - bandeau photo en fin de section Événements
   Le titre garde la classe .section-heading : il suit ainsi la
   taille commune à tous les titres de section, seule sa couleur
   change puisqu'il est posé sur un fond sombre.
   ========================================================== */
.without-event {
  margin-top: 46px;
}

.newsletter-band {
  position: relative;
  overflow: hidden;
  padding: 54px 48px;
  border-radius: 22px;
  background: url("../img/bg2.webp") center / cover no-repeat;
  text-align: center;
}

.newsletter-band .section-heading {
  color: #241b3d;
}

.newsletter-band .section-lead {
  max-width: 560px;
  margin: 0 auto 30px;
  color: #6b6483
}

.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 540px;
  margin: 0 auto;
}

.newsletter-input {
  /* min-width: 0 sinon la largeur intrinsèque du champ empêche
     le flex de le comprimer sur un écran étroit */
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(140, 140, 140, 0.641);
  border-radius: 40px;
  background: transparent;
  color: #242222;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.newsletter-input::placeholder {
  color: rgba(32, 32, 32, 0.65);
}

.newsletter-input:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

/* bouton inversé : blanc sur le bandeau, comme dans le hero */
.newsletter-btn {
  flex: none;
  border-color: #fff;
  background: #fff;
  color: var(--primary);
}

.newsletter-btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.86);
  color: var(--primary);
}


.newsletter-note {
  flex-basis: 100%;
  order: 4;
  margin: 18px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 767.98px) {
  .newsletter-band {
    padding: 40px 22px;
  }

  /* champ et bouton l'un sous l'autre : côte à côte, le champ
     descendrait sous la largeur utile d'une adresse e-mail */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-btn {
    justify-content: center;
  }
}


.field-error, .form-success {
  color: #111 !important;
}

footer .field-error, footer .form-success{
  color: #fff !important;
}