:root {
  --fond: #05050a;
  --fond-secondaire: #0a0a13;
  --carte: rgba(255, 255, 255, 0.045);
  --bordure: rgba(255, 255, 255, 0.1);
  --texte: #f7f5ff;
  --texte-doux: #b9b6c8;
  --violet: #8b5cf6;
  --violet-clair: #c084fc;
  --rose: #d946ef;

  --conteneur-etroit: 900px;
  --conteneur: 1240px;
  --conteneur-large: 1480px;

  /* Rayons */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;
  --radius-pill: 999px;
}

/* =========================================================
   COMPOSANTS GÉNÉRIQUES
========================================================= */

.glass-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 20px 60px rgba(0,0,0,.35);
}

.transition-premium{
  transition:
      transform .35s ease,
      border-color .35s ease,
      box-shadow .35s ease,
      background .35s ease,
      opacity .35s ease;
}

.hover-lift:hover{
  transform:translateY(-6px);
}

.hover-border:hover{
  border-color:rgba(192,132,252,.45);
}

.glow-violet{
  box-shadow:
      0 0 60px rgba(139,92,246,.15),
      inset 0 1px 0 rgba(255,255,255,.05);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--texte);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(
      circle at 8% 12%,
      rgba(99, 102, 241, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 55%,
      rgba(168, 85, 247, 0.11),
      transparent 28%
    ),
    var(--fond);
}
body.modal-active {
  overflow: hidden;
}
a {
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
.conteneur,
.conteneur-etroit,
.conteneur-large {
  width: calc(100% - 48px);
  margin: 0 auto;
}

.conteneur {
  max-width: var(--conteneur);
}

.conteneur-etroit {
  max-width: var(--conteneur-etroit);
}

.conteneur-large {
  max-width: var(--conteneur-large);
}
.section {
  padding: clamp(104px, 9vw, 152px) 0;
  scroll-margin-top: 96px;
}
.section-entete {
  max-width: 760px;
  margin-bottom: 72px;
}

.section-entete.centre {
  margin-inline: auto;
  text-align: center;
}

.section-entete h2 {
  margin: 18px 0 22px;
  font-size: clamp(2.2rem, 4vw, 3.45rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.section-entete p {
  max-width: 680px;
  color: var(--texte-doux);
  font-size: 1.06rem;
  line-height: 1.9;
}

.section-entete.centre p {
  margin-inline: auto;
}
.sur-titre {
  color: var(--violet-clair);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
}

#particules {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.spotlight {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 520px;
  height: 520px;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.15),
    rgba(168, 85, 247, 0.06) 35%,
    transparent 70%
  );
  filter: blur(45px);
}
header,
main,
footer {
  position: relative;
  z-index: 2;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.14), transparent 42%),
    #050507;
  transition: opacity 0.65s ease, visibility 0.65s ease;
}
.loader.cache {
  opacity: 0;
  visibility: hidden;
}
.loader-contenu {
  width: min(340px, 78vw);
  text-align: center;
}
.logo-loader {
  justify-content: space-between;
  margin-bottom: 26px;
}
.loader-barre {
  height: 4px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.loader-progression {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--rose));
  animation: chargement 1.2s ease forwards;
}
@keyframes chargement {
  to {
    width: 100%;
  }
}

.curseur,
.curseur-point {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
}
.curseur {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(192, 132, 252, 0.9);
  background: rgba(168, 85, 247, 0.06);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55);
  transition: width 0.2s, height 0.2s, background 0.2s;
}
.curseur-point {
  width: 6px;
  height: 6px;
  background: white;
  box-shadow: 0 0 9px white;
}
.curseur.survol {
  width: 58px;
  height: 58px;
  background: rgba(168, 85, 247, 0.18);
}

.entete {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(5, 5, 10, 0.72);
  backdrop-filter: blur(18px);
}
.navigation {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: white;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.logo-symbole {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--violet);
  border-radius: 10px;
  color: var(--violet-clair);
  transform: rotate(45deg);
  box-shadow: inset 0 0 15px rgba(139, 92, 246, 0.22),
    0 0 18px rgba(139, 92, 246, 0.15);
}
.logo-symbole::first-letter {
  transform: rotate(-45deg);
}
.liens-navigation {
  display: flex;
  align-items: center;
  gap: 34px;
}
.liens-navigation a {
  position: relative;
  color: #d5d2df;
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.25s ease;
}
.liens-navigation a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--rose));
  transition: width 0.25s ease;
}
.liens-navigation a:hover {
  color: white;
}
.liens-navigation a:hover::after {
  width: 100%;
}
.nav-cta {
  padding: 11px 18px;
  border: 1px solid rgba(192, 132, 252, 0.55);
  border-radius: 10px;
}
.menu-mobile {
  display: none;
  width: 42px;
  height: 42px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-mobile span {
  display: block;
  width: 100%;
  height: 3px;
  margin: 5px 0;
  border-radius: 20px;
  background: white;
  transition: transform 0.3s, opacity 0.3s;
}

.hero {
  position: relative;
  min-height: calc(100vh - 76px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: 76px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background: radial-gradient(
      circle at 76% 42%,
      rgba(139, 92, 246, 0.15),
      transparent 28%
    ),
    radial-gradient(circle at 20% 40%, rgba(79, 70, 229, 0.12), transparent 31%);
}

.hero-grille {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.2;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 75%,
    transparent
  );
}

.hero-lueur {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.7;
}

.hero-lueur-gauche {
  top: 18%;
  left: -190px;
  width: 430px;
  height: 430px;
  background: rgba(79, 70, 229, 0.22);
}

.hero-lueur-droite {
  right: -210px;
  bottom: 4%;
  width: 520px;
  height: 520px;
  background: rgba(168, 85, 247, 0.2);
}

.hero-container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(460px, 0.9fr);
  align-items: center;

  gap: clamp(90px, 8vw, 140px);

  padding-top: clamp(120px, 10vw, 170px);
  padding-bottom: clamp(140px, 10vw, 180px);
}

.hero-content {
  position: relative;
  z-index: 3;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  margin-bottom: 27px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-badge-point {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 0 5px rgba(167, 139, 250, 0.11), 0 0 16px #a78bfa;
  animation: pulsation-badge 2.2s ease-in-out infinite;
}

@keyframes pulsation-badge {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.hero h1 {
  max-width: 820px;
  margin-bottom: 26px;
  font-size: clamp(3rem, 5.45vw, 5.45rem);
  line-height: 0.99;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.hero-texte-gradient {
  display: inline;
  color: transparent;
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    #c4b5fd 28%,
    #a855f7 62%,
    #f0abfc 100%
  );
  background-size: 180% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradient-hero 7s linear infinite;
}

@keyframes gradient-hero {
  to {
    background-position: 180% center;
  }
}

.hero-description {
  max-width: 590px;

  color: var(--texte-doux);

  font-size: 1.12rem;

  line-height: 1.85;

  margin-top: 38px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 16px;

  margin-top: 46px;
}

.btn {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  border-radius: 13px;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 800;
  transition: transform 0.28s ease, box-shadow 0.28s ease,
    border-color 0.28s ease, background 0.28s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, #6d28d9, #9333ea 52%, #c026d3);
  box-shadow: 0 16px 38px rgba(124, 58, 237, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -35%;
  width: 28%;
  height: 260%;
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(24deg);
  transition: left 0.55s ease;
}

.btn-primary:hover::before {
  left: 118%;
}

.btn-primary:hover {
  box-shadow: 0 22px 48px rgba(124, 58, 237, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.btn-primary span {
  position: relative;
  z-index: 1;
}

.btn-fleche {
  font-size: 1.08rem;
  transition: transform 0.28s ease;
}

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

.btn-secondary {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

.btn-secondary:hover {
  border-color: rgba(192, 132, 252, 0.58);
  background: rgba(255, 255, 255, 0.07);
}

.hero-reassurance {
  display: flex;
  flex-wrap: wrap;

  gap: 14px 26px;

  margin-top: 42px;
}

.hero-reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bcb8c9;
  font-size: 0.79rem;
}

.reassurance-icone {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 50%;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.1);
  font-size: 0.65rem;
  font-weight: 900;
}

.hero-card {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 34px 20px;
  perspective: 1200px;
}

.dashboard-card {
  position: relative;
  width: min(100%, 490px);
  overflow: hidden;
  padding: 0 26px 25px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 25px;
  background:
    radial-gradient(circle at top right,
        rgba(168, 85, 247, .12),
        transparent 28%),

    radial-gradient(circle at bottom left,
        rgba(99, 102, 241, .10),
        transparent 34%),

    linear-gradient(
        180deg,
        rgba(27,24,42,.96) 0%,
        rgba(18,16,30,.94) 100%
    );

box-shadow:
    0 55px 120px rgba(0,0,0,.58),
    0 0 110px rgba(139,92,246,.18),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(22px);
  transform: rotateY(-4deg) rotateX(2deg);
  transition: transform 0.45s ease, border-color 0.35s ease;
}

.hero-card:hover .dashboard-card {
  border-color: rgba(192, 132, 252, 0.36);
  transform: rotateY(0deg) rotateX(0deg) translateY(-5px);
}

.dashboard-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.07),
    transparent 24%,
    transparent 72%,
    rgba(168, 85, 247, 0.07)
  );
}

.dashboard-reflet {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.16);
  filter: blur(70px);
}

.dashboard-barre {
  position: relative;
  z-index: 2;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -26px 24px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.018);
}

.dashboard-points {
  display: flex;
  gap: 7px;
}

.dashboard-points span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-points span:nth-child(2) {
  background: rgba(167, 139, 250, 0.5);
}

.dashboard-points span:nth-child(3) {
  background: rgba(217, 70, 239, 0.45);
}

.dashboard-statut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a9a5b3;
  font-size: 0.7rem;
  font-weight: 700;
}

.dashboard-statut > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.75);
}

.dashboard-entete {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 24px;
}

.dashboard-label {
  display: block;
  margin-bottom: 7px;
  color: #c4b5fd;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.dashboard-entete h2 {
  max-width: 300px;
  font-size: 1.55rem;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.dashboard-logo {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  border: 1px solid rgba(192, 132, 252, 0.48);
  border-radius: 13px;
  color: #e9d5ff;
  background: linear-gradient(
    135deg,
    rgba(109, 40, 217, 0.7),
    rgba(168, 85, 247, 0.26)
  );
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.24);
  font-weight: 900;
}

.dashboard-resultats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 17px;
}

.dashboard-resultat {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.dashboard-resultat > span {
  display: block;
  margin-bottom: 7px;
  color: #8e899a;
  font-size: 0.68rem;
}

.dashboard-resultat strong {
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
}

.dashboard-resultat small {
  color: #aaa6b6;
  font-size: 0.65rem;
}

.workflow {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-top: 18px;
}

.workflow-ligne {
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.028);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.workflow-ligne:hover {
  z-index: 3;
  transform: translateX(6px);
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(139, 92, 246, 0.08);
}

.workflow-ligne.active {
  border-color: rgba(167, 139, 250, 0.26);
  background: linear-gradient(
    90deg,
    rgba(109, 40, 217, 0.13),
    rgba(255, 255, 255, 0.025)
  );
}

.workflow-icone {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 11px;
  color: #ddd6fe;
  background: linear-gradient(
    135deg,
    rgba(109, 40, 217, 0.48),
    rgba(168, 85, 247, 0.15)
  );
  font-size: 0.68rem;
  font-weight: 900;
}

.workflow-texte {
  min-width: 0;
}

.workflow-texte > span {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  color: #f5f3ff;
  font-size: 0.79rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-texte small {
  display: block;
  overflow: hidden;
  color: #8f8a9b;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-etat {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 7px;
  color: #b9b5c3;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.58rem;
  font-weight: 800;
}

.workflow-connecteur {
  position: relative;
  width: 2px;
  height: 13px;
  margin-left: 31px;
  background: linear-gradient(
    rgba(139, 92, 246, 0.65),
    rgba(139, 92, 246, 0.12)
  );
}

.workflow-connecteur span {
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
      radial-gradient(circle,
          #ffffff 0%,
          #d8b4fe 35%,
          #a855f7 100%);

  box-shadow:
      0 0 10px rgba(255,255,255,.45),
      0 0 24px rgba(168,85,247,.65),
      0 0 44px rgba(168,85,247,.35);

  transform: translateX(-50%);

  animation: flux-workflow 2.2s linear infinite;
}

@keyframes flux-workflow {

  0%{
      bottom:100%;
      opacity:0;
      transform:translateX(-50%) scale(.55);
  }

  18%{
      opacity:1;
  }

  50%{
      transform:translateX(-50%) scale(1);
  }

  82%{
      opacity:1;
  }

  100%{
      bottom:0;
      opacity:0;
      transform:translateX(-50%) scale(.55);
  }

}

.dashboard-bas {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.dashboard-profils {
  display: flex;
  flex: 0 0 auto;
}

.dashboard-profils span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 2px solid #0b0b12;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, #4c1d95, #a855f7);
  font-size: 0.55rem;
  font-weight: 900;
}

.dashboard-profils span:first-child {
  margin-left: 0;
}

.dashboard-profils span:nth-child(2) {
  background: linear-gradient(135deg, #4338ca, #7c3aed);
}

.dashboard-profils span:nth-child(3) {
  color: #c4b5fd;
  background: #16131f;
}

.dashboard-bas p {
  color: #8e8998;
  font-size: 0.65rem;
  line-height: 1.5;
}

.hero-carte-flottante {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  background: rgba(12, 11, 20, 0.8);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  animation: flottement-carte 5s ease-in-out infinite;
}

.hero-carte-haut {
  top: 8px;
  right: -22px;
}

.hero-carte-bas {
  left: -25px;
  bottom: 18px;
  animation-delay: -2.5s;
}

@keyframes flottement-carte {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.carte-flottante-icone {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ede9fe;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.25);
}

.hero-carte-flottante div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-carte-flottante small {
  color: #8f8a9b;
  font-size: 0.62rem;
}

.hero-carte-flottante strong {
  color: #f5f3ff;
  font-size: 0.73rem;
}

.carte-flottante-point {
  width: 10px;
  height: 10px;
  margin: 0 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.72);
}

.hero-indicateur {
  position: absolute;
  bottom: 23px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #75717f;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.hero-indicateur div {
  width: 1px;
  height: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.hero-indicateur div::after {
  content: "";
  display: block;
  width: 100%;
  height: 45%;
  background: linear-gradient(transparent, #a78bfa);
  animation: defilement-indicateur 1.8s ease-in-out infinite;
}

@keyframes defilement-indicateur {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(230%);
  }
}

/* =========================================================
   HERO — COMPOSITION PLUS DENSE
========================================================= */

.hero-container {
  grid-template-columns: minmax(0, 1.02fr) minmax(500px, 0.98fr);
  gap: clamp(45px, 5vw, 80px);
  padding-top: clamp(80px, 7vw, 115px);
  padding-bottom: clamp(90px, 7vw, 125px);
}

.hero-content {
  max-width: 760px;
}

.hero-badge {
  margin-bottom: 22px;
}

.hero h1 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(3.2rem, 5.1vw, 5.2rem);
  line-height: 0.96;
}

.hero-description {
  max-width: 610px;
  margin-top: 24px;
  font-size: 1.06rem;
  line-height: 1.72;
}

.hero-buttons {
  margin-top: 30px;
}

.hero-reassurance {
  margin-top: 28px;
}

.hero-card {
  transform: translateX(15px);
}

@media (max-width: 1100px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .hero-content {
    max-width: 820px;
  }

  .hero-card {
    transform: none;
  }
}

/* =========================================================
   VOS ENJEUX — DIRECTION ARTISTIQUE PREMIUM
========================================================= */

.problemes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(105px, 8vw, 145px);
  padding-bottom: clamp(115px, 9vw, 165px);
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 20, 0.25) 0%,
      rgba(10, 8, 26, 0.86) 42%,
      rgba(5, 5, 10, 0.96) 100%
    );
}

.problemes::before {
  content: "";
  position: absolute;
  z-index: -4;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 84px 84px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 18%,
    black 82%,
    transparent
  );
}

.problemes::after {
  content: "";
  position: absolute;
  z-index: -3;
  top: -1px;
  left: 50%;
  width: min(92%, 1500px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 92, 246, 0.34),
    rgba(217, 70, 239, 0.48),
    rgba(139, 92, 246, 0.34),
    transparent
  );
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.22);
}

.problemes-contenu {
  position: relative;
  z-index: 3;
}

.problemes-entete {
  max-width: 880px;
  margin-bottom: clamp(55px, 5vw, 80px);
}

.problemes-entete .sur-titre {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.problemes-entete .sur-titre::before,
.problemes-entete .sur-titre::after {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(192, 132, 252, 0.75)
  );
}

.problemes-entete .sur-titre::after {
  transform: scaleX(-1);
}

.problemes-entete h2 {
  max-width: 940px;
  margin: 18px auto 18px;
  font-size: clamp(2.45rem, 4.2vw, 4.15rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.problemes-entete p {
  max-width: 710px;
  margin-inline: auto;
  font-size: 1.03rem;
  line-height: 1.75;
}

/* Halos de profondeur */

.problemes-lueur {
  position: absolute;
  z-index: -3;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
}

.problemes-lueur-gauche {
  top: 23%;
  left: -240px;
  width: 620px;
  height: 620px;
  background: rgba(91, 33, 182, 0.22);
}

.problemes-lueur-droite {
  right: -280px;
  bottom: 4%;
  width: 690px;
  height: 690px;
  background: rgba(168, 85, 247, 0.16);
}

/* Rubans lumineux décoratifs */

.problemes-ruban {
  position: absolute;
  z-index: -2;
  width: 720px;
  height: 220px;
  pointer-events: none;
  opacity: 0.65;
  filter: blur(0.2px);
}

.problemes-ruban::before,
.problemes-ruban::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 58, 237, 0.25),
    rgba(192, 132, 252, 0.95),
    rgba(217, 70, 239, 0.45),
    transparent
  );
  box-shadow:
    0 0 9px rgba(168, 85, 247, 0.75),
    0 0 32px rgba(139, 92, 246, 0.32);
  transform: rotate(-12deg) skewX(-20deg);
}

.problemes-ruban::after {
  top: 57%;
  opacity: 0.42;
  filter: blur(5px);
  transform: rotate(-8deg) skewX(-15deg);
}

.problemes-ruban-gauche {
  left: -270px;
  top: 54%;
  transform: rotate(-7deg);
}

.problemes-ruban-droite {
  right: -300px;
  bottom: 3%;
  transform: rotate(172deg);
}

/* Grille large — une seule vraie grille */

.grille-problemes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 1.6vw, 26px);
}

/* Cartes */

.probleme {
  --carte-accent: 168, 85, 247;

  position: relative;
  min-width: 0;
  min-height: 490px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(25px, 2vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(var(--carte-accent), 0.13),
      transparent 34%
    ),
    linear-gradient(
      155deg,
      rgba(30, 27, 48, 0.9),
      rgba(15, 14, 29, 0.92) 65%,
      rgba(10, 9, 21, 0.96)
    );
  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: translateZ(0);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.probleme-productivite {
  --carte-accent: 139, 92, 246;
}

.probleme-relation {
  --carte-accent: 192, 132, 252;
}

.probleme-organisation {
  --carte-accent: 217, 70, 239;
}

.probleme::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--carte-accent), 0.18),
      transparent 40%
    );
  transition: opacity 0.45s ease;
}

.probleme::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: rotate(24deg);
  transition:
    left 0.8s ease,
    opacity 0.35s ease;
}

.probleme:hover {
  transform: translateY(-12px);
  border-color: rgba(var(--carte-accent), 0.52);
  box-shadow:
    0 44px 110px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(var(--carte-accent), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.probleme:hover::before {
  opacity: 1;
}

.probleme:hover::after {
  left: 135%;
  opacity: 1;
}

.probleme-ligne-haut {
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--carte-accent), 0.92),
    transparent
  );
  box-shadow:
    0 0 8px rgba(var(--carte-accent), 0.9),
    0 0 24px rgba(var(--carte-accent), 0.42);
}

.probleme-entete {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.probleme-icone {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--carte-accent), 0.45);
  border-radius: 16px;
  color: #e9d5ff;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.15),
      transparent 35%
    ),
    rgba(var(--carte-accent), 0.14);
  box-shadow:
    0 0 24px rgba(var(--carte-accent), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.probleme:hover .probleme-icone {
  transform: translateY(-3px) rotate(-3deg);
  box-shadow:
    0 0 34px rgba(var(--carte-accent), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.probleme-icone svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.probleme-categorie {
  color: #f4efff;
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: -0.015em;
}

.probleme h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 16px;
  color: #fbfaff;
  font-size: clamp(1.18rem, 1.45vw, 1.42rem);
  line-height: 1.28;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.probleme > p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #aaa6b8;
  font-size: 0.9rem;
  line-height: 1.72;
}

.probleme-impact {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 27px;
}

.probleme-impact::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 21px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.035),
    transparent
  );
}

.probleme-impact strong {
  display: block;
  margin-bottom: 13px;
  color: #f0ecfa;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.probleme-impact ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.probleme-impact li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c7c3d2;
  font-size: 0.82rem;
  line-height: 1.35;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.probleme-impact li::before {
  content: "✓";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--carte-accent), 0.4);
  border-radius: 50%;
  color: #e9d5ff;
  background: rgba(var(--carte-accent), 0.12);
  box-shadow: 0 0 12px rgba(var(--carte-accent), 0.1);
  font-size: 0.58rem;
  font-weight: 900;
}

.probleme:hover .probleme-impact li {
  color: #ece9f4;
}

.probleme:hover .probleme-impact li:nth-child(1) {
  transform: translateX(2px);
}

.probleme:hover .probleme-impact li:nth-child(2) {
  transform: translateX(4px);
}

.probleme:hover .probleme-impact li:nth-child(3) {
  transform: translateX(6px);
}

/* Responsive */

@media (max-width: 1180px) {
  .grille-problemes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .probleme {
    min-height: 440px;
  }
}

@media (max-width: 720px) {
  .problemes {
    padding-top: 92px;
    padding-bottom: 100px;
  }

  .problemes-entete {
    margin-bottom: 46px;
  }

  .problemes-entete h2 {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .grille-problemes {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .probleme {
    min-height: auto;
    padding: 26px 23px;
  }

  .probleme-entete {
    margin-bottom: 23px;
  }

  .probleme-impact {
    margin-top: 30px;
  }

  .problemes-ruban {
    opacity: 0.34;
  }
}

@media (prefers-reduced-motion: reduce) {
  .probleme,
  .probleme::before,
  .probleme::after,
  .probleme-icone,
  .probleme-impact li {
    transition: none;
  }
}

.services-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.carte-service {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  padding: 32px;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.04),
          rgba(255,255,255,.015)
      ),
      var(--carte);
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
      transform .35s ease,
      border-color .35s ease,
      box-shadow .35s ease,
      background .35s ease;
}
.carte-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(168, 85, 247, 0.2),
    transparent 42%
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.carte-service:hover::before {
  opacity: 1;
}
.carte-service:hover {
  transform: translateY(-8px);
  border-color: rgba(192,132,252,.45);
  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.06),
          rgba(255,255,255,.02)
      ),
      var(--carte);

  box-shadow:
      0 30px 70px rgba(0,0,0,.38),
      0 0 55px rgba(139,92,246,.12),
      inset 0 1px 0 rgba(255,255,255,.05);
}
.icone-service {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  font-weight: 900;
}
.carte-service h3,
.carte-service p,
.carte-lien {
  position: relative;
  z-index: 1;
}
.carte-service h3 {
  margin-bottom: 16px;
  font-size: 1.42rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.carte-service p {
  color: var(--texte-doux);
  line-height: 1.82;
  opacity: .92;
}

.carte-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  color: var(--violet-clair);
  font-weight: 800;
  font-size: .9rem;
  transition: gap .25s ease;
}

.carte-service:hover .carte-lien{
    gap:14px;
}

.processus {
  overflow: hidden;
}
.grille-processus {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding-top: 48px;
}
.ligne-processus {
  position: absolute;
  top: 68px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(139, 92, 246, 0.25),
    #a855f7,
    rgba(217, 70, 239, 0.35)
  );
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
}
.etape-processus {
  position: relative;
  padding: 34px 25px 28px;
  text-align: center;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
}
.numero-etape {
  position: absolute;
  top: -47px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--violet-clair);
  font-weight: 900;
}
.point-etape {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translateX(-50%);
  border: 3px solid white;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.95);
}
.icone-etape {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
  font-weight: 900;
}
.etape-processus h3 {
  margin-bottom: 12px;
  font-size: 1.14rem;
}
.etape-processus p {
  color: var(--texte-doux);
  line-height: 1.7;
  font-size: 0.94rem;
}

.projets {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.projets::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: radial-gradient(
      circle at 15% 22%,
      rgba(79, 70, 229, 0.12),
      transparent 29%
    ),
    radial-gradient(
      circle at 86% 67%,
      rgba(168, 85, 247, 0.12),
      transparent 28%
    );
}

.projets-lueur {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
}

.projets-lueur-gauche {
  top: 23%;
  left: -250px;
  width: 480px;
  height: 480px;
  background: rgba(79, 70, 229, 0.13);
}

.projets-lueur-droite {
  right: -220px;
  bottom: 8%;
  width: 500px;
  height: 500px;
  background: rgba(168, 85, 247, 0.13);
}

.texte-gradient-section {
  color: transparent;
  background: linear-gradient(
    100deg,
    #ffffff,
    #c4b5fd 38%,
    #c084fc 72%,
    #f0abfc
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.grille-projets-premium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.projet-premium {
  --x: 50%;
  --y: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 26px;
  background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      transparent 55%
    ),
    rgba(10, 10, 17, 0.82);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transform-style: preserve-3d;
  transition: transform 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.projet-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;

  background:
      radial-gradient(
          420px circle at var(--x) var(--y),
          rgba(255,255,255,.14),
          rgba(255,255,255,.05) 22%,
          transparent 60%
      );

  transition:
      opacity .35s ease,
      background-position .2s linear;
}

.projet-premium:hover {
  border-color: rgba(167, 139, 250, 0.38);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.42),
    0 0 55px rgba(139, 92, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.projet-premium:hover::after {
  opacity: 1;
}

.projet-large {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  min-height: 610px;
}

.projet-compact {
  min-height: 700px;
  display: flex;
  flex-direction: column;
}

.projet-premium-visuel {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

.projet-large .projet-premium-visuel {
  min-height: 610px;
}

.projet-visuel-site {
  display: grid;
  place-items: center;
  padding: 64px 45px;
  background: radial-gradient(
      circle at 48% 45%,
      rgba(168, 85, 247, 0.24),
      transparent 34%
    ),
    linear-gradient(145deg, #17132b, #0c0a16 65%);
}

.projet-visuel-site::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.mockup-navigateur {
  position: relative;
  z-index: 2;
  width: min(100%, 710px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: #f5f1e8;
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.55),
    0 0 55px rgba(139, 92, 246, 0.17);
  transform: perspective(1200px) rotateY(5deg) rotateX(2deg);
  transition: transform 0.5s ease;
}

.projet-premium:hover .mockup-navigateur {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-4px);
}

.mockup-barre {
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
  background: #ebe6dc;
}

.mockup-points {
  display: flex;
  gap: 5px;
}

.mockup-points span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5bfb6;
}

.mockup-points span:first-child {
  background: #d89588;
}

.mockup-points span:nth-child(2) {
  background: #d8bb78;
}

.mockup-points span:nth-child(3) {
  background: #88b98b;
}

.mockup-adresse {
  min-width: 190px;
  padding: 5px 22px;
  border-radius: 6px;
  color: #817a70;
  background: rgba(255, 255, 255, 0.58);
  text-align: center;
  font-size: 0.48rem;
}

.mockup-securise {
  justify-self: end;
  color: #81a783;
  font-size: 0.55rem;
}

.site-demo {
  color: #302a24;
  background: #f5f1e8;
}

.site-demo-nav {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.site-demo-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Georgia, serif;
  font-size: 0.65rem;
  font-weight: 700;
}

.site-demo-logo span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #8c755e;
  border-radius: 50%;
  font-size: 0.45rem;
}

.site-demo-liens {
  display: flex;
  align-items: center;
  gap: 17px;
  color: #756d64;
  font-size: 0.43rem;
}

.site-demo-bouton {
  padding: 7px 10px;
  color: white;
  background: #4d463e;
}

.site-demo-hero {
  display: grid;
  grid-template-columns: 1fr 0.88fr;
  gap: 25px;
  padding: 30px 28px 25px;
}

.site-demo-contenu {
  align-self: center;
}

.site-demo-badge {
  display: inline-block;
  margin-bottom: 12px;
  color: #957d63;
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-demo-contenu h3 {
  margin-bottom: 12px;
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.03;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.site-demo-contenu h3 strong {
  display: block;
  color: #9b7651;
  font-style: italic;
  font-weight: 400;
}

.site-demo-contenu p {
  max-width: 270px;
  color: #776f67;
  font-size: 0.52rem;
  line-height: 1.65;
}

.site-demo-actions {
  display: flex;
  gap: 8px;
  margin-top: 17px;
}

.site-demo-actions span {
  padding: 8px 12px;
  border: 1px solid #928476;
  font-size: 0.45rem;
}

.site-demo-actions span:first-child {
  color: white;
  background: #4d463e;
}

.site-demo-image {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  background: linear-gradient(
      145deg,
      rgba(76, 62, 48, 0.16),
      rgba(113, 91, 69, 0.4)
    ),
    #bfa98f;
}

.architecture-forme {
  position: absolute;
  background: #e5ddd1;
  box-shadow: 0 10px 25px rgba(40, 32, 26, 0.13);
}

.forme-une {
  right: 15%;
  bottom: 0;
  width: 64%;
  height: 72%;
  clip-path: polygon(17% 18%, 100% 0, 100% 100%, 0 100%, 0 45%);
}

.forme-deux {
  right: 33%;
  bottom: 15%;
  width: 27%;
  height: 37%;
  background: #765f4b;
}

.forme-trois {
  right: 8%;
  bottom: 0;
  width: 12%;
  height: 54%;
  background: rgba(68, 55, 44, 0.8);
}

.site-demo-note {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  color: #4b4036;
  background: rgba(245, 241, 232, 0.82);
  backdrop-filter: blur(8px);
}

.site-demo-note span {
  font-size: 0.38rem;
}

.site-demo-note strong {
  font-family: Georgia, serif;
  font-size: 0.55rem;
}

.site-demo-statistiques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(70, 60, 50, 0.12);
}

.site-demo-statistiques div {
  padding: 13px 18px;
  border-right: 1px solid rgba(70, 60, 50, 0.12);
}

.site-demo-statistiques div:last-child {
  border-right: 0;
}

.site-demo-statistiques strong,
.site-demo-statistiques span {
  display: block;
}

.site-demo-statistiques strong {
  margin-bottom: 2px;
  font-family: Georgia, serif;
  font-size: 0.75rem;
}

.site-demo-statistiques span {
  color: #81786f;
  font-size: 0.38rem;
}

.mockup-mobile {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 28px;
  width: 132px;
  min-height: 270px;
  overflow: hidden;
  padding: 7px;
  border: 2px solid #28242e;
  border-radius: 25px;
  background: #09080c;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.6);
  transform: rotate(4deg);
  transition: transform 0.45s ease;
}

.projet-premium:hover .mockup-mobile {
  transform: rotate(1deg) translateY(-7px);
}

.mobile-encoche {
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 3;
  width: 43px;
  height: 11px;
  border-radius: 0 0 8px 8px;
  background: #09080c;
  transform: translateX(-50%);
}

.mobile-contenu {
  min-height: 256px;
  overflow: hidden;
  padding: 19px 11px 11px;
  border-radius: 19px;
  color: #302a24;
  background: #f5f1e8;
}

.mobile-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.mobile-navigation span {
  font-family: Georgia, serif;
  font-size: 0.52rem;
  font-weight: 700;
}

.mobile-navigation i,
.mobile-navigation i::before,
.mobile-navigation i::after {
  display: block;
  width: 12px;
  height: 1px;
  background: #49413a;
}

.mobile-navigation i {
  position: relative;
}

.mobile-navigation i::before,
.mobile-navigation i::after {
  content: "";
  position: absolute;
  left: 0;
}

.mobile-navigation i::before {
  top: -4px;
}

.mobile-navigation i::after {
  top: 4px;
}

.mobile-badge {
  color: #98795e;
  font-size: 0.36rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mobile-contenu h4 {
  margin: 7px 0 13px;
  font-family: Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.05;
  font-weight: 400;
}

.mobile-contenu h4 strong {
  display: block;
  color: #9b7651;
  font-style: italic;
  font-weight: 400;
}

.mobile-image {
  position: relative;
  height: 82px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  overflow: hidden;
  color: white;
  background: linear-gradient(transparent, rgba(35, 28, 23, 0.6)),
    linear-gradient(135deg, #d2c2ae, #78624e);
  font-family: Georgia, serif;
  font-size: 0.42rem;
}

.mobile-bouton {
  margin-top: 10px;
  padding: 7px;
  color: white;
  background: #4d463e;
  text-align: center;
  font-size: 0.4rem;
}

.projet-badge-flottant {
  position: absolute;
  z-index: 4;
  top: 27px;
  left: 25px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(12, 10, 20, 0.72);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  font-size: 0.62rem;
  font-weight: 700;
}

.projet-badge-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.75);
}

.projet-premium-infos {
  position: relative;
  z-index: 2;
  padding: 34px;
}

.projet-large .projet-premium-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.projet-premium-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.projet-categorie {
  display: block;
  margin-bottom: 9px;
  color: #c084fc;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.projet-premium-infos h3 {
  font-size: 1.65rem;
  letter-spacing: -0.035em;
}

.projet-numero {
  color: rgba(255, 255, 255, 0.13);
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
}

.projet-premium-infos > p {
  margin-top: 20px;
  color: var(--texte-doux);
  line-height: 1.8;
}

.projet-resultats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 29px;
}

.projet-resultats div {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.projet-resultats strong,
.projet-resultats span {
  display: block;
}

.projet-resultats strong {
  margin-bottom: 5px;
  color: #ede9fe;
  font-size: 1.05rem;
}

.projet-resultats span {
  color: #8f8a9b;
  font-size: 0.61rem;
  line-height: 1.35;
}

.projet-technologies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
}

.projet-technologies span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  color: #d8d4df;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.68rem;
}

/* Interface IA */

.projet-visuel-ia {
  display: grid;
  place-items: center;
  padding: 36px;
  background: radial-gradient(
      circle at 50% 25%,
      rgba(20, 184, 166, 0.15),
      transparent 32%
    ),
    linear-gradient(145deg, #081616, #0c0b17 75%);
}

.interface-ia {
  position: relative;
  z-index: 2;
  width: min(100%, 440px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 19px;
  background: rgba(7, 13, 14, 0.92);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.45);
}

.interface-ia-entete {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.interface-ia-identite {
  display: flex;
  align-items: center;
  gap: 11px;
}

.interface-ia-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: white;
  background: linear-gradient(135deg, #0f766e, #7c3aed);
  font-size: 0.7rem;
  font-weight: 900;
}

.interface-ia-identite strong,
.interface-ia-identite span {
  display: block;
}

.interface-ia-identite strong {
  margin-bottom: 4px;
  font-size: 0.72rem;
}

.interface-ia-identite span {
  color: #8c9d9b;
  font-size: 0.56rem;
}

.interface-ia-identite i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.65);
}

.interface-ia-entete button {
  border: 0;
  color: #8f9998;
  background: transparent;
  cursor: pointer;
}

.interface-ia-messages {
  min-height: 278px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 19px 15px;
}

.message-ia {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 12px;
  color: #c6d0ce;
  font-size: 0.62rem;
  line-height: 1.55;
}

.message-client {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  color: white;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
}

.message-assistant {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 0;
}

.message-avatar {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #0f766e, #7c3aed);
  font-size: 0.45rem;
  font-weight: 900;
}

.message-assistant > div:last-child {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 4px 12px 12px;
  background: rgba(255, 255, 255, 0.035);
}

.suggestions-ia {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 33px;
}

.suggestions-ia span {
  padding: 7px 9px;
  border: 1px solid rgba(45, 212, 191, 0.24);
  border-radius: 999px;
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.06);
  font-size: 0.52rem;
}

.interface-ia-saisie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 15px 15px;
  padding: 8px 8px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  color: #687573;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.56rem;
}

.interface-ia-saisie button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #0f766e, #7c3aed);
}

.notification-ia {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 21px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 11px;
  background: rgba(8, 15, 14, 0.88);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
}

.notification-ia-icone {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #bbf7d0;
  background: rgba(74, 222, 128, 0.12);
  font-size: 0.6rem;
}

.notification-ia span,
.notification-ia strong {
  display: block;
}

.notification-ia span {
  margin-bottom: 3px;
  color: #81a38f;
  font-size: 0.48rem;
}

.notification-ia strong {
  color: #d9f9e4;
  font-size: 0.58rem;
}

/* Interface automatisation */

.projet-visuel-automation {
  display: grid;
  place-items: center;
  padding: 36px;
  background: radial-gradient(
      circle at 55% 20%,
      rgba(249, 115, 22, 0.13),
      transparent 30%
    ),
    linear-gradient(145deg, #170b08, #100a17 74%);
}

.automation-interface {
  width: min(100%, 440px);
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 19px;
  background: rgba(13, 8, 11, 0.9);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.45);
}

.automation-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.automation-entete span,
.automation-entete strong {
  display: block;
}

.automation-entete span {
  margin-bottom: 4px;
  color: #a38e88;
  font-size: 0.5rem;
}

.automation-entete strong {
  font-size: 0.7rem;
}

.automation-switch {
  width: 31px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px;
  border-radius: 999px;
  background: #7c3aed;
}

.automation-switch span {
  width: 13px;
  height: 13px;
  margin: 0;
  border-radius: 50%;
  background: white;
}

.automation-flux {
  display: flex;
  flex-direction: column;
  padding: 17px 0;
}

.automation-noeud {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.027);
}

.automation-noeud-icone {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 900;
}

.automation-noeud-icone.email {
  background: linear-gradient(135deg, #1d4ed8, #6366f1);
}

.automation-noeud-icone.ai {
  background: linear-gradient(135deg, #6d28d9, #c026d3);
}

.automation-noeud-icone.crm {
  background: linear-gradient(135deg, #c2410c, #f97316);
}

.automation-noeud-icone.calendrier {
  background: linear-gradient(135deg, #047857, #14b8a6);
}

.automation-noeud span,
.automation-noeud strong {
  display: block;
}

.automation-noeud span {
  margin-bottom: 3px;
  color: #8f8587;
  font-size: 0.45rem;
}

.automation-noeud strong {
  font-size: 0.62rem;
}

.automation-noeud > i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #86efac;
  background: rgba(74, 222, 128, 0.1);
  font-size: 0.45rem;
  font-style: normal;
}

.automation-lien {
  position: relative;
  width: 2px;
  height: 11px;
  margin-left: 27px;
  background: rgba(168, 85, 247, 0.3);
}

.automation-lien span {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 8px #c084fc;
  transform: translateX(-50%);
  animation: flux-automation 1.7s linear infinite;
}

@keyframes flux-automation {
  from {
    top: -2px;
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  to {
    top: 100%;
    opacity: 0;
  }
}

.automation-resultat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.automation-resultat span,
.automation-resultat strong {
  display: block;
}

.automation-resultat span {
  margin-bottom: 4px;
  color: #8f8587;
  font-size: 0.48rem;
}

.automation-resultat strong {
  font-size: 1.3rem;
}

.automation-graphique {
  height: 48px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.automation-graphique span {
  width: 100%;
  min-width: 5px;
  margin: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, #6d28d9, #d946ef);
  box-shadow: 0 0 9px rgba(168, 85, 247, 0.14);
}

.projets-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 34px;
  padding: 23px 26px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.025);
}

.projets-cta p {
  max-width: 600px;
  color: var(--texte-doux);
  line-height: 1.7;
}

.projets-cta .btn {
  flex: 0 0 auto;
}

/* Section avantages */

.avantages {
  position: relative;
  overflow: hidden;
}

.grille-avantages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.avantage {
  position: relative;
  overflow: hidden;
  min-height: 205px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 19px;
  background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      transparent 65%
    ),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 45px rgba(0, 0, 0, 0.14);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.avantage::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(139, 92, 246, 0.16);
  filter: blur(55px);
  transition: opacity 0.35s ease;
}

.avantage:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.48);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28), 0 0 35px rgba(139, 92, 246, 0.07);
}

.avantage:hover::before {
  opacity: 1;
}

.avantage .numero {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  color: white;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.24);
  font-size: 0.82rem;
  font-weight: 900;
}

.avantage h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.avantage p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  color: var(--texte-doux);
  line-height: 1.75;
}

.grille-avantages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.avantage {
  padding: 30px;
  border: 1px solid var(--bordure);
  border-radius: 19px;
  background: var(--carte);
  transition: transform 0.3s, border-color 0.3s;
}
.avantage:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.65);
}
.numero {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  font-weight: 900;
}
.avantage h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
}
.avantage p {
  color: var(--texte-doux);
  line-height: 1.75;
}

/* FAQ PREMIUM */

.faq {
  position: relative;
  overflow: hidden;
}

.faq::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: 50%;
  right: -280px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.16),
    transparent 68%
  );
  pointer-events: none;
}

.faq-conteneur {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.faq-conteneur .section-entete {
  position: sticky;
  top: 120px;
}

.faq-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.015)
  );
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease,
    box-shadow 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.26), 0 0 30px rgba(168, 85, 247, 0.07);
}

.faq-item.ouverte {
  border-color: rgba(168, 85, 247, 0.52);
  background: linear-gradient(
    145deg,
    rgba(168, 85, 247, 0.1),
    rgba(255, 255, 255, 0.025)
  );
}

.faq-item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 26px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.faq-item button > span:first-child {
  flex: 1;
}

.faq-plus {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 85, 247, 0.38);
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.1);
  color: var(--violet-clair);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
}

.faq-item:hover .faq-plus {
  background: rgba(168, 85, 247, 0.2);
  color: #ffffff;
}

.faq-item.ouverte .faq-plus {
  transform: rotate(45deg);
  background: var(--violet-clair);
  color: #ffffff;
}

.faq-reponse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}

.faq-item.ouverte .faq-reponse {
  max-height: 320px;
  opacity: 1;
}

.faq-reponse p {
  margin: 0;
  padding: 0 26px 26px;
  color: var(--texte-doux);
  font-size: 0.95rem;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .faq-conteneur {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .faq-conteneur .section-entete {
    position: static;
  }
}

@media (max-width: 600px) {
  .faq-item button {
    padding: 21px 18px;
    gap: 15px;
    font-size: 0.94rem;
  }

  .faq-plus {
    width: 34px;
    height: 34px;
  }

  .faq-reponse p {
    padding: 0 18px 22px;
    font-size: 0.9rem;
  }
}

.contact-contenu {
  padding: 84px 35px;
  text-align: center;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 28px;
  background: radial-gradient(
      circle at top,
      rgba(168, 85, 247, 0.2),
      transparent 54%
    ),
    rgba(255, 255, 255, 0.025);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}
.contact-contenu h2 {
  margin: 18px auto;
  max-width: 800px;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.08;
}
.contact-contenu p {
  max-width: 650px;
  margin: 0 auto 30px;
  color: var(--texte-doux);
  font-size: 1.06rem;
  line-height: 1.75;
}
.contact-note {
  display: block;
  margin-top: 15px;
  color: #8f8a9c;
  font-size: 0.82rem;
}

footer {
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.footer-contenu > p {
  color: var(--texte-doux);
}
.footer-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.footer-liens a {
  color: #d2cedc;
  text-decoration: none;
}
.footer-liens a:hover {
  color: white;
}
.copyright {
  color: #777280 !important;
  font-size: 0.82rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.modal.ouverte {
  opacity: 1;
  visibility: visible;
}
.modal-fond {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}
.modal-contenu {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  padding: 42px;
  border: 1px solid rgba(168, 85, 247, 0.48);
  border-radius: 24px;
  background: radial-gradient(
      circle at top,
      rgba(168, 85, 247, 0.18),
      transparent 52%
    ),
    #0b0b12;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
  transform: translateY(22px) scale(0.96);
  transition: transform 0.3s;
}
.modal.ouverte .modal-contenu {
  transform: translateY(0) scale(1);
}
.modal-fermer {
  position: absolute;
  top: 15px;
  right: 18px;
  border: 0;
  background: transparent;
  color: #bbb6c6;
  font-size: 2rem;
  cursor: pointer;
}
.modal-icone {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  font-weight: 900;
}
.modal-titre {
  margin-bottom: 15px;
  font-size: 2rem;
}
.modal-description {
  margin-bottom: 28px;
  color: var(--texte-doux);
  line-height: 1.75;
}
.modal-bouton {
  display: inline-flex;
  padding: 13px 21px;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  text-decoration: none;
  font-weight: 800;
}

.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1050px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content > p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons,
  .hero-features {
    justify-content: center;
  }
  .services-cartes,
  .grille-projets {
    grid-template-columns: repeat(2, 1fr);
  }
  .grille-processus {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 64px;
  }
  .ligne-processus {
    display: none;
  }
  .numero-etape {
    top: 14px;
    left: 18px;
    transform: none;
  }
  .point-etape {
    display: none;
  }
  .etape-processus {
    padding-top: 58px;
  }
  .faq-conteneur {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .faq-conteneur .section-entete {
    position: static;
  }
}

@media (max-width: 1050px) {
  .projet-large {
    grid-template-columns: 1fr;
  }

  .projet-large .projet-premium-visuel {
    min-height: 570px;
  }

  .grille-projets-premium {
    grid-template-columns: 1fr;
  }

  .projet-compact {
    min-height: auto;
  }

  .projet-premium-visuel {
    min-height: 480px;
  }
}

@media (max-width: 760px) {
  .conteneur {
    width: min(100% - 32px, var(--conteneur));
  }
  .section {
    padding: 82px 0;
  }
  .navigation {
    min-height: 68px;
  }
  .logo-marque {
    font-size: 1.02rem;
  }
  .logo-symbole {
    width: 30px;
    height: 30px;
  }
  .menu-mobile {
    display: block;
    position: relative;
    z-index: 4;
  }
  .liens-navigation {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    padding: 26px 24px 30px;
    flex-direction: column;
    gap: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    background: rgba(7, 7, 13, 0.98);
    border-bottom: 1px solid var(--bordure);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  }
  .liens-navigation.ouverte {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .menu-mobile.ouverte span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-mobile.ouverte span:nth-child(2) {
    opacity: 0;
  }
  .menu-mobile.ouverte span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .hero {
    min-height: auto;
  }
  .hero-container {
    padding: 70px 0;
    gap: 52px;
  }
  .hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }
  .hero-buttons {
    flex-direction: column;
  }
  .hero-buttons .btn {
    width: 100%;
  }
  .hero-features {
    flex-direction: column;
  }
  .hero-features span {
    width: 100%;
  }
  .dashboard-card {
    padding: 25px 18px;
  }
  .grille-problemes,
  .services-cartes,
  .grille-processus,
  .grille-projets,
  .grille-avantages {
    grid-template-columns: 1fr;
  }
  .section-entete {
    margin-bottom: 42px;
  }
  .faq-reponse p {
    padding-right: 0;
  }
  .contact-contenu {
    padding: 65px 22px;
  }
  .curseur,
  .curseur-point,
  .spotlight {
    display: none;
  }
  .projet-large .projet-premium-visuel,
  .projet-premium-visuel {
    min-height: 420px;
    .grille-avantages {
      grid-template-columns: 1fr;
    }

    .avantage {
      min-height: auto;
      padding: 25px 22px;
    }
  }

  .projet-visuel-site,
  .projet-visuel-ia,
  .projet-visuel-automation {
    padding: 22px 15px;
  }

  .mockup-navigateur {
    width: 100%;
    transform: none;
  }

  .mockup-adresse,
  .mockup-securise,
  .site-demo-liens {
    display: none;
  }

  .mockup-barre {
    grid-template-columns: 1fr;
  }

  .site-demo-nav {
    padding: 0 14px;
  }

  .site-demo-hero {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }

  .site-demo-image {
    min-height: 125px;
  }

  .site-demo-statistiques {
    display: none;
  }

  .mockup-mobile {
    right: 8px;
    bottom: 17px;
    width: 104px;
    min-height: 220px;
  }

  .mobile-contenu {
    min-height: 206px;
  }

  .mobile-image {
    height: 54px;
  }

  .projet-badge-flottant {
    top: 13px;
    left: 12px;
    padding: 7px 9px;
  }

  .projet-premium-infos {
    padding: 25px 20px;
  }

  .projet-premium-infos h3 {
    font-size: 1.4rem;
  }

  .projet-numero {
    font-size: 1.8rem;
  }

  .projet-resultats {
    grid-template-columns: 1fr;
  }

  .interface-ia,
  .automation-interface {
    width: 100%;
  }

  .notification-ia {
    right: 8px;
    bottom: 11px;
  }

  .projets-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .projets-cta .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1050px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 45px;
    padding-top: 90px;
    text-align: center;
  }

  .hero h1,
  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons,
  .hero-reassurance {
    justify-content: center;
  }

  .hero-card {
    width: min(100%, 600px);
    margin: 0 auto;
  }

  .dashboard-card {
    transform: none;
  }

  .hero-carte-haut {
    right: -5px;
  }

  .hero-carte-bas {
    left: -5px;
  }
}

@media (max-width: 760px) {
  .hero-container {
    padding: 72px 0 95px;
    gap: 38px;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.65rem);
    line-height: 1.02;
  }

  .hero-description {
    font-size: 0.98rem;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-reassurance {
    align-items: flex-start;
    flex-direction: column;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .hero-card {
    padding: 10px 0;
  }

  .dashboard-card {
    padding: 0 16px 18px;
    border-radius: 20px;
  }

  .dashboard-barre {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .dashboard-entete h2 {
    font-size: 1.3rem;
  }

  .dashboard-resultats {
    grid-template-columns: 1fr;
  }

  .workflow-ligne {
    grid-template-columns: 35px minmax(0, 1fr);
  }

  .workflow-etat {
    display: none;
  }

  .workflow-connecteur {
    margin-left: 29px;
  }

  .hero-carte-flottante {
    display: none;
  }

  .hero-indicateur {
    display: none;
  }

  .hero-grille {
    background-size: 50px 50px;
  }
}

/* =========================================================
   CHIVARYN ADVISOR — ENTRÉE SIGNATURE
========================================================= */

.advisor-introduction,
.advisor-choix,
.advisor-interface,
.offres-comparateur {
  position: relative;
  z-index: 2;
}

/* Introduction */

.advisor-introduction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;
  gap: clamp(45px, 7vw, 100px);
  margin-bottom: 58px;
}

.advisor-introduction-contenu {
  max-width: 790px;
}

.advisor-sur-titre {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  color: #a78bfa;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.22em;
}

.advisor-sur-titre::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.95)
  );
}

.advisor-introduction h2 {
  max-width: 820px;
  margin-bottom: 23px;
  font-size: clamp(2.65rem, 5vw, 4.7rem);
  line-height: 0.99;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.advisor-introduction-contenu > p {
  max-width: 710px;
  color: #aaa6b8;
  font-size: 1.02rem;
  line-height: 1.8;
}

/* Système Advisor */

.advisor-statut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.advisor-statut-orbite {
  position: relative;
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(139, 92, 246, 0.16),
      transparent 63%
    );
  box-shadow:
    0 0 70px rgba(139, 92, 246, 0.12),
    inset 0 0 35px rgba(139, 92, 246, 0.05);
}

.advisor-statut-orbite::before,
.advisor-statut-orbite::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.advisor-statut-orbite::before {
  inset: 17px;
  border: 1px solid rgba(96, 165, 250, 0.19);
  animation: advisor-orbite 14s linear infinite;
}

.advisor-statut-orbite::after {
  inset: 40px;
  border: 1px solid rgba(192, 132, 252, 0.15);
  animation: advisor-orbite 10s linear infinite reverse;
}

.advisor-statut-point {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow:
    0 0 12px #c084fc,
    0 0 28px rgba(192, 132, 252, 0.85);
  transform: translateX(-50%);
  animation: advisor-point 3s ease-in-out infinite;
}

.advisor-statut-coeur {
  position: relative;
  z-index: 4;
  width: 112px;
  height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(192, 132, 252, 0.2),
      transparent 43%
    ),
    rgba(15, 12, 29, 0.92);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.35),
    0 0 35px rgba(139, 92, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: rotate(45deg);
}

.advisor-statut-coeur > * {
  transform: rotate(-45deg);
}

.advisor-statut-coeur small {
  color: #8f8a9a;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.advisor-statut-coeur strong {
  margin: 4px 0 2px;
  color: transparent;
  background: linear-gradient(135deg, #ffffff, #c084fc, #38bdf8);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 2rem;
  line-height: 1;
}

.advisor-statut-coeur span {
  color: #ddd6fe;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.advisor-statut-texte {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.advisor-statut-indicateur {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.85);
}

.advisor-statut-texte small,
.advisor-statut-texte strong {
  display: block;
}

.advisor-statut-texte small {
  margin-bottom: 3px;
  color: #777282;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.advisor-statut-texte strong {
  color: #e8e5ef;
  font-size: 0.73rem;
}

/* Bloc de choix */

.advisor-choix {
  overflow: hidden;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(109, 40, 217, 0.13),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(14, 165, 233, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(22, 18, 39, 0.92),
      rgba(8, 8, 15, 0.97)
    );
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.advisor-choix::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.advisor-choix-entete {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.advisor-etape {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #a8a3b5;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.advisor-etape strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 92, 246, 0.38);
  border-radius: 9px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.1);
}

.advisor-choix-entete h3 {
  margin-bottom: 15px;
  color: #ffffff;
  font-size: clamp(1.85rem, 3.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.advisor-choix-entete p {
  color: #9995a7;
  line-height: 1.7;
}

/* Cartes */

.advisor-choix-grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.advisor-carte {
  --advisor-accent: 139, 92, 246;

  position: relative;
  min-width: 0;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 31px;
  border: 1px solid rgba(var(--advisor-accent), 0.22);
  border-radius: 24px;
  color: inherit;
  background:
    radial-gradient(
      circle at 85% 4%,
      rgba(var(--advisor-accent), 0.13),
      transparent 38%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.014)
    );
  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.advisor-carte-guide {
  --advisor-accent: 168, 85, 247;

  border-color: rgba(168, 85, 247, 0.42);
  background:
    radial-gradient(
      circle at 82% 5%,
      rgba(168, 85, 247, 0.23),
      transparent 38%
    ),
    radial-gradient(
      circle at 5% 100%,
      rgba(79, 70, 229, 0.13),
      transparent 45%
    ),
    linear-gradient(
      150deg,
      rgba(38, 23, 67, 0.93),
      rgba(13, 11, 25, 0.97)
    );
  box-shadow:
    0 30px 80px rgba(57, 32, 135, 0.25),
    0 0 45px rgba(139, 92, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.advisor-carte-comparateur {
  --advisor-accent: 96, 165, 250;
}

.advisor-carte::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -65%;
  width: 34%;
  height: 260%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: rotate(22deg);
  transition:
    left 0.8s ease,
    opacity 0.25s ease;
}

.advisor-carte:hover {
  transform: translateY(-9px);
  border-color: rgba(var(--advisor-accent), 0.68);
  box-shadow:
    0 40px 95px rgba(0, 0, 0, 0.42),
    0 0 48px rgba(var(--advisor-accent), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.advisor-carte:hover::before {
  left: 132%;
  opacity: 1;
}

.advisor-carte-lueur {
  position: absolute;
  top: -130px;
  right: -130px;
  width: 320px;
  height: 320px;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(var(--advisor-accent), 0.14);
  filter: blur(70px);
  transition: transform 0.5s ease;
}

.advisor-carte:hover .advisor-carte-lueur {
  transform: scale(1.25);
}

.advisor-carte-recommande {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  padding: 7px 10px;
  border: 1px solid rgba(192, 132, 252, 0.35);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(76, 29, 149, 0.42);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  backdrop-filter: blur(12px);
}

.advisor-carte-icone {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 29px;
  border: 1px solid rgba(var(--advisor-accent), 0.42);
  border-radius: 17px;
  color: #e9e5ff;
  background: rgba(var(--advisor-accent), 0.13);
  box-shadow:
    0 14px 32px rgba(var(--advisor-accent), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.advisor-carte-icone svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.advisor-carte-contenu {
  position: relative;
  z-index: 2;
  display: block;
}

.advisor-carte-contenu small {
  display: block;
  margin-bottom: 10px;
  color: rgb(var(--advisor-accent));
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.advisor-carte-contenu strong {
  display: block;
  max-width: 460px;
  margin-bottom: 15px;
  color: #ffffff;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.advisor-carte-contenu > span {
  display: block;
  max-width: 520px;
  color: #aaa6b8;
  font-size: 0.92rem;
  line-height: 1.7;
}

.advisor-carte-avantages {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 27px 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.advisor-carte-avantages > span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cbc7d4;
  font-size: 0.82rem;
}

.advisor-carte-avantages i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  flex: 0 0 19px;
  border: 1px solid rgba(var(--advisor-accent), 0.32);
  border-radius: 50%;
  color: #a7f3d0;
  background: rgba(var(--advisor-accent), 0.08);
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 900;
}

.advisor-carte-action {
  position: relative;
  z-index: 2;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  padding: 0 18px;
  border: 1px solid rgba(var(--advisor-accent), 0.28);
  border-radius: 14px;
  color: #ffffff;
  background: rgba(var(--advisor-accent), 0.1);
  font-size: 0.86rem;
  font-weight: 850;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.advisor-carte-guide .advisor-carte-action {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    135deg,
    #6d28d9,
    #9333ea 55%,
    #2563eb
  );
  box-shadow:
    0 15px 35px rgba(91, 33, 182, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.advisor-carte:hover .advisor-carte-action {
  border-color: rgba(var(--advisor-accent), 0.62);
  background-color: rgba(var(--advisor-accent), 0.17);
}

.advisor-carte-action i {
  font-style: normal;
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}

.advisor-carte:hover .advisor-carte-action i {
  transform: translateX(5px);
}

/* Interfaces cachées */

.advisor-interface[hidden],
.offres-comparateur[hidden] {
  display: none !important;
}

.advisor-interface,
.offres-comparateur {
  margin-top: 42px;
}

.advisor-interface-coquille,
.offres-comparateur {
  padding: clamp(25px, 4vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 75% 0%,
      rgba(139, 92, 246, 0.12),
      transparent 32%
    ),
    rgba(10, 9, 18, 0.92);
  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.advisor-interface-entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 35px;
  margin-bottom: 35px;
}

.advisor-retour {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  color: #d4d0dc;
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.advisor-retour:hover {
  color: #ffffff;
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(139, 92, 246, 0.09);
}

.advisor-progression-infos {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 9px;
  color: #8f8a9b;
  font-size: 0.68rem;
}

.advisor-progression-infos strong {
  color: #c4b5fd;
}

.advisor-progression-barre {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

.advisor-progression-barre span {
  display: block;
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #c026d3, #38bdf8);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.6);
  transition: width 0.5s ease;
}

.advisor-ecran {
  min-height: 420px;
}

.offres-comparateur-entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  margin-bottom: 35px;
}

.offres-comparateur-entete h3 {
  margin: 10px 0 11px;
  color: #ffffff;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  letter-spacing: -0.04em;
}

.offres-comparateur-entete p {
  max-width: 720px;
  color: #9f9baa;
  line-height: 1.7;
}

/* Animations */

@keyframes advisor-orbite {
  to {
    transform: rotate(360deg);
  }
}

@keyframes advisor-point {
  0%,
  100% {
    opacity: 0.65;
    transform: translateX(-50%) scale(0.8);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.15);
  }
}

/* Responsive */

@media (max-width: 980px) {
  .advisor-introduction {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .advisor-introduction-contenu {
    margin-inline: auto;
  }

  .advisor-introduction-contenu > p {
    margin-inline: auto;
  }

  .advisor-statut {
    display: none;
  }

  .advisor-choix-grille {
    grid-template-columns: 1fr;
  }

  .advisor-carte {
    min-height: auto;
  }
}

@media (max-width: 700px) {
  .advisor-introduction {
    margin-bottom: 38px;
  }

  .advisor-introduction h2 {
    font-size: clamp(2.15rem, 11vw, 3.1rem);
  }

  .advisor-choix {
    padding: 24px 17px;
    border-radius: 23px;
  }

  .advisor-choix-entete {
    margin-bottom: 28px;
  }

  .advisor-carte {
    padding: 25px 21px;
    border-radius: 20px;
  }

  .advisor-carte-recommande {
    top: 17px;
    right: 17px;
  }

  .advisor-carte-icone {
    width: 52px;
    height: 52px;
  }

  .advisor-interface-entete,
  .offres-comparateur-entete {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .advisor-retour {
    width: fit-content;
  }

  .advisor-interface-coquille,
  .offres-comparateur {
    padding: 23px 17px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advisor-statut-orbite::before,
  .advisor-statut-orbite::after,
  .advisor-statut-point {
    animation: none;
  }

  .advisor-carte {
    transition: border-color 0.3s ease;
  }

  .advisor-carte:hover {
    transform: none;
  }
}

/* =========================================================
   OFFRES & PACKS — PHASE 1
   ========================================================= */
.offres {
  position: relative;
  overflow: hidden;
}
.offres-entete {
  max-width: 820px;
  margin-inline: auto;
}
.offres-parcours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 42px 0 28px;
  color: var(--couleur-texte-secondaire, #a8afbd);
  font-size: 0.92rem;
}
.offres-parcours span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.offres-parcours strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(128, 116, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  background: rgba(128, 116, 255, 0.1);
}
.offres-parcours i {
  opacity: 0.4;
}
.offres-selecteur {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  scrollbar-width: none;
}
.offres-selecteur::-webkit-scrollbar {
  display: none;
}
.offre-tab {
  flex: 1;
  min-width: max-content;
  border: 0;
  border-radius: 12px;
  padding: 14px 17px;
  color: #aeb4c1;
  background: transparent;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: 0.25s ease;
}
.offre-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.offre-tab.actif {
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(113, 91, 255, 0.28),
    rgba(60, 184, 255, 0.14)
  );
  box-shadow: inset 0 0 0 1px rgba(146, 130, 255, 0.32);
}
.offres-contexte {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: end;
  margin: 40px 0 24px;
}
.offres-contexte-label {
  display: block;
  margin-bottom: 9px;
  color: #9084ff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.offres-contexte h3 {
  font-size: clamp(1.55rem, 2.5vw, 2.4rem);
  line-height: 1.12;
}
.offres-contexte p {
  color: #a8afbd;
  line-height: 1.75;
}
.offres-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.offre-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.018)
  );
  transition: 0.3s ease;
  overflow: hidden;
}
.offre-carte:hover {
  transform: translateY(-7px);
  border-color: rgba(133, 119, 255, 0.4);
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.28);
}
.offre-carte.populaire {
  border-color: rgba(var(--level-business-rgb), 0.55);
  background: linear-gradient(
    180deg,
    rgba(118, 94, 255, 0.12),
    rgba(255, 255, 255, 0.025)
  );
}
.offre-carte.signature {
  background: radial-gradient(
      circle at top right,
      rgba(79, 190, 255, 0.13),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    );
}
.offre-ruban {
  position: absolute;
  top: 17px;
  right: -36px;
  transform: rotate(38deg);
  width: 145px;
  text-align: center;
  padding: 6px;
  background: #7866ff;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.offre-niveau {
  color: #8f84ff;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.offre-carte h4 {
  margin: 11px 0 7px;
  font-size: 1.45rem;
}
.offre-promesse {
  min-height: 67px;
  color: #a8afbd;
  line-height: 1.55;
  font-size: 0.92rem;
}
.offre-prix {
  margin: 22px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.offre-prix small {
  display: block;
  color: #8f96a5;
  font-size: 0.73rem;
}
.offre-prix strong {
  display: block;
  margin-top: 5px;
  font-size: 1.72rem;
  color: #fff;
}
.offre-delai {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #bbc1cc;
  font-size: 0.73rem;
}
.offre-carte ul {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.offre-carte li {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  width: 100%;
}

.offre-carte li > span:last-child {
  min-width: 0;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: normal;
}
.offre-carte li:not(.offre-plus) {
  color: #d9d6e3;
  font-size: .82rem;
}
.offre-carte li.offre-plus {
  margin-top: 3px;
  color: #b9b4c2;
  font-weight: 750;
}

.offre-carte li.offre-plus::before {
  content: none;
}

.offre-plus-icone {
  width: 19px;
  height: 19px;
  display: grid;
  flex: 0 0 19px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  color: #d4ceff;
  background: rgba(113, 92, 255, .1);
  font-size: .7rem;
  font-weight: 900;
}
.offre-carte li::before {
  content: "✓";
  color: #8dffbe;
  font-weight: 900;
}
.offre-actions{
  display:grid;
  gap:12px;
  margin-top:auto;
}

.offre-details,
.offre-demo,
.offre-configurer{

  display:flex;
  align-items:center;
  justify-content:space-between;

  width:100%;

  min-height:48px;

  padding:11px 14px;

  border-radius:12px;

  text-decoration:none;

  font:inherit;

  transition:.25s;

  cursor:pointer;
}

.offre-details{

  border:1px solid rgba(255,255,255,.08);

  background:rgba(255,255,255,.03);

  color:#ffffff;
}

.offre-demo{

  border:1px solid rgba(122,106,255,.35);

  background:rgba(122,106,255,.08);

  color:#ffffff;
}

.offre-configurer{

  border:none;

  background:linear-gradient(135deg,#6c63ff,#3f8cff);

  color:white;
}

.offre-details:hover{

  transform:translateY(-2px);

  border-color:rgba(255,255,255,.18);

  background:rgba(255,255,255,.06);
}

.offre-demo:hover{

  transform:translateY(-2px);

  border-color:#7b6dff;

  background:rgba(123,109,255,.15);
}

.offre-configurer:hover{

  transform:translateY(-2px);

  box-shadow:0 10px 30px rgba(95,110,255,.35);
}

.offre-demo[aria-disabled="true"]{

  opacity:.55;

  cursor:not-allowed;
}
.offres-note {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
  color: #9da4b2;
  font-size: 0.83rem;
  line-height: 1.55;
}
.offres-note strong {
  color: #e8eaf0;
}
.packs-avantage {
  margin-top: 86px;
}
.packs-avantage-entete {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 28px;
}
.packs-avantage-entete h3 {
  margin-top: 8px;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}
.packs-avantage-entete p {
  color: #a8afbd;
  line-height: 1.65;
}
.packs-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pack-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 455px;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.pack-populaire {
  border-color: rgba(125, 107, 255, 0.6);
  box-shadow: 0 22px 60px rgba(64, 44, 160, 0.18);
}
.pack-signature {
  background: radial-gradient(
      circle at 85% 10%,
      rgba(73, 190, 255, 0.17),
      transparent 30%
    ),
    rgba(255, 255, 255, 0.03);
}

.pack-ruban {
    position: absolute;
    top: 17px;
    right: -36px;
    z-index: 10;

    width: 145px;
    padding: 6px 4px;

    color: #ffffff;
    background: linear-gradient(
        135deg,
        #8b74ff,
        #6d5dfc
    );

    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;

    transform: rotate(38deg);

    box-shadow:
        0 8px 22px rgba(109, 93, 252, 0.3);
}

.pack-badge {
  color: #9185ff;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}
.pack-carte h4 {
  margin: 10px 0 8px;
  font-size: 1.55rem;
}
.pack-carte > p {
  min-height: 68px;
  color: #a8afbd;
  line-height: 1.55;
  font-size: 0.9rem;
}
.pack-prix {
  margin: 18px 0;
}
.pack-prix small {
  display: block;
  color: #858d9c;
}
.pack-prix strong {
  display: block;
  margin-top: 4px;
  font-size: 1.7rem;
}
.pack-carte ul {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: #d7dbe3;
  font-size: 0.86rem;
}
.pack-carte li:last-child {
  color: #8dffbe;
  font-weight: 750;
}
.pack-carte li::before {
  content: "✓";
  margin-right: 8px;
  color: #8dffbe;
}
.btn-configurer {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.configurateur-cta h3 {
  margin: 8px 0;
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
}
.configurateur-cta p {
  max-width: 720px;
  color: #a8afbd;
  line-height: 1.65;
}
@media (max-width: 1100px) {
  .offres-grille,
  .packs-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .offres-contexte,
  .packs-avantage-entete {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 700px) {
  .offres-parcours i {
    display: none;
  }
  .offres-parcours {
    justify-content: flex-start;
  }
  .offres-grille,
  .packs-grille {
    grid-template-columns: 1fr;
  }
  .offre-carte {
    min-height: auto;
  }
  .configurateur-cta {
    grid-template-columns: 1fr;
    padding: 25px;
  }
  .configurateur-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .offres-selecteur {
    margin-inline: -4px;
  }
  .offres-contexte {
    margin-top: 28px;
  }
}

/* =========================================================
   PHASE 3 — HERO PREMIUM, ACCESSIBILITÉ & PERFORMANCE
   ========================================================= */
.skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 20000;
  padding: 12px 16px;
  border-radius: 10px;
  color: #090910;
  background: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}
:focus-visible {
  outline: 2px solid var(--violet-clair);
  outline-offset: 4px;
}
.hero-content,
.hero-card {
  will-change: transform;
}
.hero-titre {
  max-width: 780px;
  text-wrap: balance;
}
.hero-ligne {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translateY(34px);
  filter: blur(8px);
  animation: heroLigneEntree 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-ligne:nth-child(2) {
  animation-delay: 0.12s;
}
@keyframes heroLigneEntree {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.hero-card {
  isolation: isolate;
  transform-style: preserve-3d;
}
.dashboard-card {
  position: relative;
  z-index: 3;
  transform: translateZ(0);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.dashboard-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 22%,
    rgba(255, 255, 255, 0.08) 38%,
    transparent 52%
  );
  transform: translateX(-130%);
  animation: dashboardScan 6s ease-in-out infinite;
}
@keyframes dashboardScan {
  0%,
  62% {
    transform: translateX(-130%);
  }
  82%,
  100% {
    transform: translateX(130%);
  }
}
.hero-orbite {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(192, 132, 252, 0.15);
  border-radius: 50%;
  pointer-events: none;
  animation: orbiteRotation 18s linear infinite;
}
.hero-orbite::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violet-clair);
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.9);
}
.hero-orbite-une {
  width: 520px;
  height: 520px;
  right: -92px;
  top: -80px;
}
.hero-orbite-une::before {
  left: 74px;
  top: 46px;
}
.hero-orbite-deux {
  width: 410px;
  height: 410px;
  right: -35px;
  top: -25px;
  animation-direction: reverse;
  animation-duration: 24s;
}
.hero-orbite-deux::before {
  right: 35px;
  bottom: 90px;
  background: #60a5fa;
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.85);
}
@keyframes orbiteRotation {
  to {
    transform: rotate(360deg);
  }
}
.dashboard-live {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.dashboard-live-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.dashboard-live-item:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 132, 252, 0.28);
}
.dashboard-live-icone {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.15);
}
.dashboard-live-item div {
  display: flex;
  flex-direction: column;
}
.dashboard-live-item small {
  color: var(--texte-doux);
  font-size: 0.67rem;
}
.dashboard-live-item strong {
  font-size: 1.12rem;
}
.dashboard-live-item strong::after {
  content: "";
}
.dashboard-live-item em {
  color: #86efac;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}
.workflow-ligne {
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease,
    background 0.4s ease;
}
.workflow-ligne.phase-active {
  opacity: 1;
  transform: translateX(4px);
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.08);
}
.workflow-ligne.phase-active .workflow-icone {
  box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.08),
    0 0 22px rgba(139, 92, 246, 0.25);
}
.workflow-connecteur span {
  transform-origin: top;
  transform: scaleY(0);
}
.workflow-connecteur.connecteur-actif span {
  animation: connecteurFlux 0.55s ease forwards;
}
@keyframes connecteurFlux {
  to {
    transform: scaleY(1);
  }
}
.entete.scrolled {
  background: rgba(5, 5, 10, 0.88);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.22);
}
.liens-navigation a.nav-actif:not(.nav-cta) {
  color: #fff;
}
.liens-navigation a.nav-actif:not(.nav-cta)::after {
  width: 100%;
}
@media (max-width: 980px) {
  .hero-orbite {
    display: none;
  }
  .dashboard-live {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .hero-ligne {
    display: inline;
  }
  .hero-ligne + .hero-ligne::before {
    content: " ";
  }
  .dashboard-live {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-ligne,
  .hero-orbite,
  .dashboard-card::after {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .hero-content,
  .hero-card {
    will-change: auto;
  }
  .workflow-connecteur span {
    transform: scaleY(1);
  }
}

/* =========================================
   CORRECTION SECTION CONTACT
========================================= */

.contact {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

.contact .conteneur {
  position: relative;
  z-index: 2;
}

.contact .section-entete {
  max-width: 850px;
  margin: 0 auto 60px;
  text-align: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 28px;
  align-items: stretch;
}

.contact-formulaire {
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
}

#contact-form {
  width: 100%;
}

.contact-ligne {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}

.champ label {
  color: #f5f3ff;
  font-size: 0.9rem;
  font-weight: 700;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  outline: none;
  background: rgba(7, 7, 13, 0.78);
  color: #ffffff;
  font: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    background 0.25s ease, transform 0.25s ease;
}

.champ input,
.champ select {
  min-height: 56px;
  padding: 0 17px;
}

.champ textarea {
  min-height: 170px;
  padding: 16px 17px;
  resize: vertical;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: rgba(190, 91, 255, 0.85);
  background: rgba(13, 10, 22, 0.94);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12),
    0 14px 35px rgba(114, 44, 188, 0.14);
  transform: translateY(-1px);
}

.champ select option {
  background: #0c0b12;
  color: #ffffff;
}

.contact-formulaire button[type="submit"] {
  width: 100%;
  min-height: 58px;
  margin-top: 6px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 15px 35px rgba(126, 34, 206, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.contact-formulaire button[type="submit"]:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 22px 45px rgba(126, 34, 206, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.contact-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.contact-informations {
  height: 100%;
}

.contact-card {
  position: relative;
  height: 100%;
  min-height: 100%;
  padding: 38px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: radial-gradient(
      circle at top right,
      rgba(168, 85, 247, 0.18),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.contact-logo {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow: 0 16px 35px rgba(126, 34, 206, 0.32);
}

.contact-card h3 {
  margin-bottom: 15px;
  color: #ffffff;
  font-size: 1.55rem;
}

.contact-card p {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.75;
}

@media (max-width: 1000px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: auto;
  }
}

@media (max-width: 650px) {
  .contact {
    padding: 90px 0;
  }

  .contact-formulaire,
  .contact-card {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .contact-ligne {
    grid-template-columns: 1fr;
    gap: 17px;
    margin-bottom: 17px;
  }

  .contact .section-entete {
    margin-bottom: 38px;
  }
}

/* =========================================
   EFFETS PREMIUM CARTES PACKS
========================================= */

.pricing-card,
.pack-card,
.offre-card,
.tarif-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.18s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card::before,
.pack-card::before,
.offre-card::before,
.tarif-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(174, 82, 255, 0.22),
    transparent 42%
  );
  transition: opacity 0.3s ease;
}

.pricing-card::after,
.pack-card::after,
.offre-card::after,
.tarif-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 55%;
  height: 220%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(24deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.7s ease, opacity 0.3s ease;
}

.pricing-card:hover,
.pack-card:hover,
.offre-card:hover,
.tarif-card:hover {
  border-color: rgba(170, 92, 255, 0.65);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45), 0 0 40px rgba(126, 34, 206, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.pricing-card:hover::before,
.pack-card:hover::before,
.offre-card:hover::before,
.tarif-card:hover::before {
  opacity: 1;
}

.pricing-card:hover::after,
.pack-card:hover::after,
.offre-card:hover::after,
.tarif-card:hover::after {
  left: 125%;
  opacity: 1;
}

.pricing-card > *,
.pack-card > *,
.offre-card > *,
.tarif-card > * {
  position: relative;
  z-index: 1;
  transform: translateZ(22px);
}

.pricing-card .btn,
.pack-card .btn,
.offre-card .btn,
.tarif-card .btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.pricing-card:hover .btn,
.pack-card:hover .btn,
.offre-card:hover .btn,
.tarif-card:hover .btn {
  transform: translateY(-2px) translateZ(32px);
  box-shadow: 0 16px 32px rgba(126, 34, 206, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pack-card,
  .offre-card,
  .tarif-card {
    transform: none !important;
  }
}

.contact-formulaire button[type="submit"] {
  margin-bottom: 24px;
}

/* =========================================
   BOUTON EXPLORER LA DÉMO
========================================= */

.offre-demo-disponible {
  position: relative;
  min-height: 78px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, 0.55);
  border-radius: 15px;
  color: #ffffff;
  background: radial-gradient(
      circle at 85% 20%,
      rgba(216, 70, 239, 0.2),
      transparent 38%
    ),
    linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(20, 17, 31, 0.94));
  box-shadow: 0 16px 35px rgba(76, 29, 149, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.offre-demo-disponible::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -55%;
  width: 34%;
  height: 260%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(24deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.75s ease, opacity 0.25s ease;
}

.offre-demo-disponible:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 180, 254, 0.95);
  box-shadow: 0 24px 50px rgba(76, 29, 149, 0.3),
    0 0 30px rgba(168, 85, 247, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.offre-demo-disponible:hover::before {
  left: 125%;
  opacity: 1;
}

.offre-demo-icone {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #ffffff;
  background: linear-gradient(135deg, #7c3aed, #d946ef);
  box-shadow: 0 10px 25px rgba(126, 34, 206, 0.35);
  font-size: 0.88rem;
  transition: transform 0.3s ease;
}

.offre-demo-disponible:hover .offre-demo-icone {
  transform: scale(1.08);
}

.offre-demo-texte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}

.offre-demo-texte small {
  color: #c4b5fd;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.offre-demo-texte strong {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.2;
}

.offre-demo-fleche {
  display: grid;
  place-items: center;
  color: #e9d5ff;
  font-size: 1.15rem;
  transition: transform 0.3s ease;
}

.offre-demo-disponible:hover .offre-demo-fleche {
  transform: translate(3px, -3px);
}

.offre-demo-disponible {
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 12px;
  padding: 13px 14px;
}

.offre-demo-texte strong {
  font-size: 0.92rem;
  line-height: 1.08;
}

.offre-demo-texte small {
  font-size: 0.58rem;
  line-height: 1.15;
}

.offre-demo-fleche {
  font-size: 1rem;
}

/* =========================================
   MODÈLE ÉCONOMIQUE DES PACKS
========================================= */

.pack-paiement,
.pack-recurrence {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 12px 0 22px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

.pack-populaire .pack-recurrence {
  border-color: rgba(192, 132, 252, 0.24);
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.09);
}

.pack-signature .pack-recurrence {
  border-color: rgba(96, 165, 250, 0.18);
  color: #dbeafe;
  background: rgba(59, 130, 246, 0.07);
}

.pack-economie {
  color: #86efac !important;
  font-weight: 800;
}

.pack-carte ul {
  margin-top: 0;
}

@media (max-width: 600px) {
  .pack-paiement,
  .pack-recurrence {
    width: 100%;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
  }
}

/* =========================================
   PACKS AVANTAGE — INTERACTIONS PREMIUM
========================================= */

.pack-carte {
  --pack-x: 50%;
  --pack-y: 50%;

  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease,
    background 0.3s ease;
}

.pack-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--pack-x) var(--pack-y),
    rgba(168, 85, 247, 0.2),
    transparent 43%
  );
  transition: opacity 0.3s ease;
}

.pack-carte::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -70%;
  z-index: 0;
  width: 42%;
  height: 270%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(24deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.13),
    transparent
  );
  transition: left 0.75s ease, opacity 0.25s ease;
}

.pack-carte > *:not(.pack-ruban) {
    position: relative;
    z-index: 1;
}

.pack-carte:hover {
  border-color: rgba(168, 85, 247, 0.62);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.42), 0 0 35px rgba(126, 34, 206, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pack-carte:hover::before {
  opacity: 1;
}

.pack-carte:hover::after {
  left: 130%;
  opacity: 1;
}

.pack-populaire {
  background: radial-gradient(
      circle at 70% 12%,
      rgba(139, 92, 246, 0.16),
      transparent 35%
    ),
    rgba(255, 255, 255, 0.03);
}

.pack-populaire:hover {
  border-color: rgba(192, 132, 252, 0.9);
  box-shadow: 0 36px 85px rgba(51, 31, 128, 0.35),
    0 0 42px rgba(139, 92, 246, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pack-signature:hover {
  border-color: rgba(96, 165, 250, 0.65);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.42), 0 0 40px rgba(59, 130, 246, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-configurer {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  transition: transform 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}

.btn-configurer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.1) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.6s ease, opacity 0.25s ease;
}

.btn-configurer:hover {
  transform: translateY(-3px);
  border-color: rgba(192, 132, 252, 0.55);
  background: rgba(139, 92, 246, 0.12);
  box-shadow: 0 14px 30px rgba(76, 29, 149, 0.17);
}

.btn-configurer:hover::before {
  opacity: 1;
  transform: translateX(120%);
}

.pack-carte:hover .pack-prix strong {
  text-shadow: 0 0 25px rgba(192, 132, 252, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .pack-carte {
    transform: none !important;
    transition: border-color 0.3s ease;
  }

  .pack-carte::after,
  .btn-configurer::before {
    display: none;
  }
}

/* Position définitive du ruban Growth */
.pack-carte .pack-ruban {
    position: absolute;
    top: 17px;
    right: -36px;
    z-index: 20;

    width: 145px;
    padding: 6px 4px;

    color: #ffffff;
    background: #7866ff;

    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;

    transform: rotate(38deg);
    transform-origin: center;
}

/* =========================================
   CARTES D’OFFRES — INTERACTIONS PREMIUM
========================================= */

.offre-carte {
    --offre-x: 50%;
    --offre-y: 50%;

    isolation: isolate;
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform 0.2s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.offre-carte::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            420px circle at var(--offre-x) var(--offre-y),
            rgba(168, 85, 247, 0.18),
            transparent 44%
        );
    transition: opacity 0.3s ease;
}

.offre-carte > *:not(.offre-ruban) {
    position: relative;
    z-index: 1;
}

.offre-carte:hover::before {
    opacity: 1;
}

.offre-carte:hover {
    border-color: rgba(168, 85, 247, 0.58);
    box-shadow:
        0 32px 75px rgba(0, 0, 0, 0.4),
        0 0 34px rgba(126, 34, 206, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.offre-carte.populaire:hover {
    border-color: rgba(var(--level-business-bright-rgb), 0.88);
    box-shadow:
        0 36px 82px rgba(53, 33, 132, 0.32),
        0 0 40px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.offre-carte.signature:hover {
    border-color: rgba(var(--level-signature-rgb), 0.62);
    box-shadow:
        0 34px 78px rgba(0, 0, 0, 0.4),
        0 0 38px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Position sécurisée du ruban Business */
.offre-carte .offre-ruban {
    position: absolute;
    top: 17px;
    right: -36px;
    z-index: 20;

    width: 145px;
    padding: 6px 4px;

    color: #ffffff;
    background: #7866ff;

    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;

    transform: rotate(38deg);
    transform-origin: center;
}

/* =========================================================
   PACKS AVANTAGE — IDENTITÉS VISUELLES
   ========================================================= */

   .pack-sous-titre {
    display: block;
    min-height: 22px;
    margin: -3px 0 12px;
    color: rgba(226, 222, 239, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
  }
  
  /* Éléments placés au-dessus des effets lumineux */
  .pack-carte > * {
    position: relative;
    z-index: 2;
  }
  
  /* ---------------------------------------------------------
     LAUNCH — sobre et minimal
     --------------------------------------------------------- */
  
  .pack-launch {
    border-color: rgba(255, 255, 255, 0.08);
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.025),
        rgba(255, 255, 255, 0.008)
      ),
      #09090e;
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
  
  .pack-launch::after {
    display: none;
  }
  
  .pack-launch:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
      0 24px 55px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  
  /* ---------------------------------------------------------
     GROWTH — offre principale
     --------------------------------------------------------- */
  
  .pack-populaire {
    border-color: rgba(139, 92, 246, 0.72);
    background:
      radial-gradient(
        circle at 82% 4%,
        rgba(168, 85, 247, 0.23),
        transparent 35%
      ),
      radial-gradient(
        circle at 20% 100%,
        rgba(79, 70, 229, 0.13),
        transparent 42%
      ),
      linear-gradient(
        155deg,
        rgba(32, 22, 58, 0.92),
        rgba(14, 12, 25, 0.97)
      );
    box-shadow:
      0 28px 75px rgba(49, 30, 125, 0.28),
      0 0 34px rgba(139, 92, 246, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
    animation: respiration-growth 4.5s ease-in-out infinite;
  }
  
  @keyframes respiration-growth {
    0%,
    100% {
      box-shadow:
        0 28px 75px rgba(49, 30, 125, 0.25),
        0 0 28px rgba(139, 92, 246, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
  
    50% {
      box-shadow:
        0 32px 85px rgba(65, 39, 165, 0.36),
        0 0 45px rgba(139, 92, 246, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
    }
  }
  
  /* ---------------------------------------------------------
     SCALE — puissance et automatisation
     --------------------------------------------------------- */
  
  .pack-scale {
    border-color: rgba(129, 140, 248, 0.26);
    background:
      radial-gradient(
        circle at 80% 18%,
        rgba(99, 102, 241, 0.13),
        transparent 34%
      ),
      linear-gradient(
        150deg,
        rgba(17, 18, 30, 0.98),
        rgba(9, 9, 15, 0.98)
      );
    box-shadow:
      0 24px 65px rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(129, 140, 248, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
  }
  
  .pack-scale::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -35%;
    z-index: 1;
    width: 22%;
    height: 165%;
    pointer-events: none;
    opacity: 0.22;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(129, 140, 248, 0.34),
      transparent
    );
    filter: blur(8px);
    transform: rotate(12deg);
    animation: reflet-scale 7s ease-in-out infinite;
  }
  
  @keyframes reflet-scale {
    0%,
    20% {
      left: -35%;
      opacity: 0;
    }
  
    42% {
      opacity: 0.24;
    }
  
    70%,
    100% {
      left: 125%;
      opacity: 0;
    }
  }
  
  .pack-scale:hover {
    border-color: rgba(129, 140, 248, 0.58);
    box-shadow:
      0 34px 80px rgba(0, 0, 0, 0.43),
      0 0 36px rgba(99, 102, 241, 0.12),
      inset 0 0 0 1px rgba(129, 140, 248, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  
  /* ---------------------------------------------------------
     ELITE AI — offre haut de gamme
     --------------------------------------------------------- */
  
  .pack-signature {
    border-color: rgba(56, 189, 248, 0.28);
    background:
      radial-gradient(
        circle at 86% 8%,
        rgba(34, 211, 238, 0.18),
        transparent 31%
      ),
      radial-gradient(
        circle at 12% 92%,
        rgba(139, 92, 246, 0.2),
        transparent 42%
      ),
      linear-gradient(
        145deg,
        rgba(17, 39, 58, 0.97),
        rgba(13, 19, 37, 0.98) 48%,
        rgba(11, 9, 24, 0.99)
      );
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.4),
      0 0 38px rgba(34, 211, 238, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .pack-signature::after {
    content: "";
    position: absolute;
    top: -55%;
    left: -55%;
    z-index: 1;
    width: 34%;
    height: 215%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.24),
      rgba(103, 232, 249, 0.13),
      transparent
    );
    filter: blur(5px);
    transform: rotate(18deg);
    animation: reflet-elite 8.5s ease-in-out infinite;
  }
  
  @keyframes reflet-elite {
    0%,
    25% {
      left: -55%;
      opacity: 0;
    }
  
    42% {
      opacity: 0.32;
    }
  
    68%,
    100% {
      left: 135%;
      opacity: 0;
    }
  }
  
  .pack-signature:hover {
    border-color: rgba(103, 232, 249, 0.58);
    box-shadow:
      0 38px 95px rgba(0, 0, 0, 0.48),
      0 0 48px rgba(34, 211, 238, 0.16),
      0 0 70px rgba(139, 92, 246, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.13);
  }
  
  /* Accessibilité : désactivation des animations si nécessaire */
  @media (prefers-reduced-motion: reduce) {
    .pack-populaire,
    .pack-scale::after,
    .pack-signature::after {
      animation: none;
    }
  }

  /* =========================================================
   PACKS AVANTAGE — MONTÉE EN GAMME RENFORCÉE
   ========================================================= */

/* Base */
.pack-carte {
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.pack-carte h4 {
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease,
    transform 0.3s ease;
}

.pack-carte:hover h4 {
  transform: translateX(2px);
}

/* ---------------------------------------------------------
   LAUNCH
   --------------------------------------------------------- */

.pack-launch {
  min-height: 540px;
  transform: translateY(8px);
  opacity: 0.96;
}

.pack-launch .pack-badge {
  color: rgba(196, 181, 253, 0.78);
}

.pack-launch h4 {
  color: #f3f1f8;
}

.pack-launch .pack-prix strong {
  color: #f5f3fa;
}

.pack-launch .btn-configurer {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.025);
}

.pack-launch .btn-configurer:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* ---------------------------------------------------------
   GROWTH
   --------------------------------------------------------- */

.pack-populaire {
  min-height: 558px;
  transform: translateY(0);
}

.pack-populaire .pack-badge {
  color: #c4b5fd;
  text-shadow: 0 0 14px rgba(167, 139, 250, 0.45);
}

.pack-populaire h4 {
  color: #ffffff;
  text-shadow: 0 0 25px rgba(167, 139, 250, 0.22);
}

.pack-populaire .pack-prix strong {
  color: #ffffff;
  text-shadow: 0 0 22px rgba(139, 92, 246, 0.25);
}

.pack-populaire .btn-configurer {
  border-color: rgba(167, 139, 250, 0.32);
  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.22),
      rgba(147, 51, 234, 0.12)
    );
}

.pack-populaire .btn-configurer:hover {
  border-color: rgba(192, 132, 252, 0.7);
  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.38),
      rgba(147, 51, 234, 0.25)
    );
  box-shadow: 0 14px 35px rgba(91, 52, 190, 0.24);
}

/* ---------------------------------------------------------
   SCALE
   --------------------------------------------------------- */

.pack-scale {
  min-height: 548px;
  transform: translateY(3px);
}

.pack-scale::before {
  opacity: 0.55;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 77%,
      rgba(129, 140, 248, 0.17) 78%,
      transparent 79%
    ),
    radial-gradient(
      420px circle at var(--pack-x) var(--pack-y),
      rgba(99, 102, 241, 0.14),
      transparent 42%
    );
}

.pack-scale {
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(129, 140, 248, 0.12),
    inset 0 0 28px rgba(99, 102, 241, 0.035);
}

.pack-scale h4 {
  color: #eef2ff;
  text-shadow: 0 0 22px rgba(129, 140, 248, 0.22);
}

.pack-scale .pack-prix strong {
  color: #eef2ff;
}

.pack-scale .pack-badge {
  color: #a5b4fc;
}

.pack-scale .btn-configurer {
  border-color: rgba(129, 140, 248, 0.25);
  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, 0.16),
      rgba(37, 99, 235, 0.1)
    );
}

.pack-scale .btn-configurer:hover {
  border-color: rgba(129, 140, 248, 0.65);
  background:
    linear-gradient(
      135deg,
      rgba(79, 70, 229, 0.3),
      rgba(37, 99, 235, 0.2)
    );
  box-shadow: 0 14px 35px rgba(67, 56, 202, 0.22);
}

/* ---------------------------------------------------------
   ELITE AI
   --------------------------------------------------------- */

.pack-signature {
  min-height: 568px;
  transform: translateY(-5px);
}

.pack-signature::before {
  opacity: 0.8;
  background:
    linear-gradient(
      rgba(103, 232, 249, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(103, 232, 249, 0.045) 1px,
      transparent 1px
    ),
    radial-gradient(
      480px circle at var(--pack-x) var(--pack-y),
      rgba(34, 211, 238, 0.18),
      transparent 44%
    );
  background-size:
    28px 28px,
    28px 28px,
    auto;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8),
    transparent 72%
  );
}

.pack-signature .pack-badge {
  color: #c4b5fd;
  text-shadow:
    0 0 15px rgba(167, 139, 250, 0.42),
    0 0 28px rgba(34, 211, 238, 0.18);
}

.pack-signature h4 {
  color: #ffffff;
  font-size: 1.82rem;
  text-shadow:
    0 0 20px rgba(103, 232, 249, 0.2),
    0 0 35px rgba(139, 92, 246, 0.16);
}

.pack-signature .pack-prix strong {
  color: #ffffff;
  font-size: 2.05rem;
  text-shadow: 0 0 28px rgba(34, 211, 238, 0.2);
}

.pack-signature .pack-recurrence {
  border-color: rgba(56, 189, 248, 0.28);
  background:
    linear-gradient(
      135deg,
      rgba(14, 116, 144, 0.14),
      rgba(79, 70, 229, 0.14)
    );
}

.pack-signature .btn-configurer {
  border-color: rgba(103, 232, 249, 0.26);
  background:
    linear-gradient(
      135deg,
      rgba(14, 165, 233, 0.18),
      rgba(124, 58, 237, 0.2)
    );
}

.pack-signature .btn-configurer:hover {
  border-color: rgba(103, 232, 249, 0.72);
  background:
    linear-gradient(
      135deg,
      rgba(14, 165, 233, 0.34),
      rgba(124, 58, 237, 0.34)
    );
  box-shadow:
    0 16px 40px rgba(14, 165, 233, 0.2),
    0 0 28px rgba(139, 92, 246, 0.16);
}

/* ---------------------------------------------------------
   LABELS PREMIUM
   --------------------------------------------------------- */

   .pack-label-premium {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
  
    width: auto;
    max-width: 118px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: 6px 10px;
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-radius: 999px;
  
    color: #a5b4fc;
    background: rgba(30, 27, 75, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1;
    white-space: nowrap;
  
    backdrop-filter: blur(14px);
  }

  .pack-label-elite {
    max-width: 112px;
    color: #a5f3fc;
    border-color: rgba(103, 232, 249, 0.38);
    background: rgba(8, 47, 73, 0.68);
    box-shadow:
      0 0 18px rgba(34, 211, 238, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .pack-scale .pack-badge,
.pack-signature .pack-badge {
  max-width: 58%;
}

.pack-scale h4,
.pack-signature h4 {
  margin-top: 10px;
}

/* ---------------------------------------------------------
   HOVERS
   --------------------------------------------------------- */

.pack-launch:hover {
  transform: translateY(3px);
}

.pack-populaire:hover {
  transform: translateY(-6px);
}

.pack-scale:hover {
  transform: translateY(-4px);
}

.pack-signature:hover {
  transform: translateY(-11px);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {
  .pack-launch,
  .pack-populaire,
  .pack-scale,
  .pack-signature {
    min-height: 540px;
    transform: none;
  }
}

@media (max-width: 700px) {
  .pack-launch,
  .pack-populaire,
  .pack-scale,
  .pack-signature {
    min-height: auto;
  }

  .pack-label-premium {
    top: 17px;
    right: 15px;
    max-width: 108px;
    padding: 5px 8px;
    font-size: 0.48rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-launch,
  .pack-populaire,
  .pack-scale,
  .pack-signature {
    transform: none;
  }
}

/* =========================================================
   BOUTON — VOIR TOUT CE QUI EST INCLUS
   ========================================================= */

   .offre-details {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 0;
    padding: 0 15px;
  
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 11px;
  
    color: #d8d4e5;
    background: rgba(139, 92, 246, 0.055);
  
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    text-align: left;
  
    cursor: pointer;
  
    transition:
      color 0.25s ease,
      border-color 0.25s ease,
      background 0.25s ease,
      transform 0.25s ease;
  }
  
  .offre-details span:last-child {
    color: #a78bfa;
    font-size: 1rem;
    line-height: 1;
  
    transition: transform 0.25s ease;
  }
  
  .offre-details:hover {
    color: #ffffff;
    border-color: rgba(167, 139, 250, 0.52);
    background: rgba(139, 92, 246, 0.12);
    transform: translateY(-2px);
  }
  
  .offre-details:hover span:last-child {
    transform: rotate(90deg);
  }
  
  .offre-carte.populaire .offre-details {
    border-color: rgba(var(--level-business-rgb), 0.32);
    background: rgba(var(--level-business-rgb), 0.1);
  }
  
  .offre-carte.signature .offre-details {
    border-color: rgba(var(--level-signature-rgb), 0.3);
    background: rgba(var(--level-signature-rgb), 0.075);
  }
  
  /* =========================================================
     MODAL — DÉTAIL D’UNE OFFRE
     ========================================================= */
  
  .modal-offre {
    position: fixed;
    inset: 0;
    z-index: 12000;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    padding: 30px;
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }
  
  .modal-offre.ouverte {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .modal-offre-fond {
    position: absolute;
    inset: 0;
  
    background:
      radial-gradient(
        circle at 50% 40%,
        rgba(124, 58, 237, 0.16),
        transparent 42%
      ),
      rgba(2, 2, 7, 0.82);
  
    backdrop-filter: blur(18px);
  }
  
  .modal-offre-contenu {
    position: relative;
    z-index: 1;
  
    width: min(820px, 100%);
    height: min(900px, calc(100vh - 60px));
max-height: calc(100vh - 60px);

display: flex;
flex-direction: column;

overflow: hidden;
padding: 0;
  
    border: 1px solid rgba(167, 139, 250, 0.26);
    border-radius: 25px;
  
    background:
      radial-gradient(
        circle at 90% 0%,
        rgba(139, 92, 246, 0.15),
        transparent 32%
      ),
      linear-gradient(
        145deg,
        rgba(20, 17, 37, 0.98),
        rgba(8, 8, 16, 0.99)
      );
  
    box-shadow:
      0 45px 120px rgba(0, 0, 0, 0.62),
      0 0 65px rgba(109, 40, 217, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  
    transform: translateY(25px) scale(0.97);
  
    transition: transform 0.35s ease;
  }
  
  .modal-offre.ouverte .modal-offre-contenu {
    transform: translateY(0) scale(1);
  }
  
  .modal-offre-contenu::-webkit-scrollbar {
    width: 8px;
  }
  
  .modal-offre-contenu::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .modal-offre-contenu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(167, 139, 250, 0.32);
  }
  
  .modal-offre-fermer {
    position: absolute;
    top: 18px;
    right: 18px;
  
    width: 40px;
    height: 40px;
  
    display: grid;
    place-items: center;
  
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
  
    color: #ffffff;
    background: rgba(255, 255, 255, 0.045);
  
    font-size: 1.45rem;
    line-height: 1;
  
    cursor: pointer;
  
    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      background 0.25s ease;
  }
  
  .modal-offre-fermer:hover {
    border-color: rgba(192, 132, 252, 0.55);
    background: rgba(139, 92, 246, 0.12);
    transform: rotate(90deg);
  }
  
  .modal-offre-entete {
    max-width: 650px;
    padding-right: 45px;
  }
  
  .modal-offre-label {
    display: inline-block;
    margin-bottom: 13px;
  
    color: #c4b5fd;
  
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.2em;
  }
  
  .modal-offre-entete h2 {
    margin-bottom: 12px;
  
    color: #ffffff;
  
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
  }
  
  .modal-offre-entete p {
    color: #aaa6b8;
  
    font-size: 0.97rem;
    line-height: 1.7;
  }
  
  .modal-offre-resume {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  
    margin: 30px 0;
  }
  
  .modal-offre-resume > div {
    padding: 20px;
  
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 15px;
  
    background: rgba(255, 255, 255, 0.035);
  }
  
  .modal-offre-resume small {
    display: block;
    margin-bottom: 6px;
  
    color: #8f8a9e;
  
    font-size: 0.69rem;
    font-weight: 700;
  }
  
  .modal-offre-resume strong {
    color: #ffffff;
  
    font-size: 1.18rem;
  }
  
  .modal-offre-section {
    margin-top: 20px;
    padding: 25px;
  
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 18px;
  
    background: rgba(255, 255, 255, 0.025);
  }
  
  .modal-offre-section-titre {
    display: flex;
    align-items: center;
    gap: 14px;
  
    margin-bottom: 21px;
  }
  
  .modal-offre-section-titre > span {
    width: 37px;
    height: 37px;
  
    display: grid;
    place-items: center;
    flex: 0 0 37px;
  
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 10px;
  
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.09);
  
    font-size: 0.72rem;
    font-weight: 900;
  }
  
  .modal-offre-section-titre small {
    color: #858091;
  
    font-size: 0.59rem;
    font-weight: 900;
    letter-spacing: 0.16em;
  }
  
  .modal-offre-section-titre h3 {
    margin-top: 3px;
  
    color: #ffffff;
  
    font-size: 1rem;
  }
  
  .modal-offre-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 22px;
  
    padding: 0;
    margin: 0;
  
    list-style: none;
  }
  
  .modal-offre-liste li {
    position: relative;
  
    padding-left: 22px;
  
    color: #d0ccd9;
  
    font-size: 0.82rem;
    line-height: 1.5;
  }
  
  .modal-offre-liste li::before {
    content: "✓";
  
    position: absolute;
    top: 0;
    left: 0;
  
    color: #73f6ad;
  
    font-weight: 900;
  }
  
  .modal-offre-liste-options li::before {
    content: "+";
  
    color: #c4b5fd;
  }
  
  .modal-offre-information {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  
    border-color: rgba(96, 165, 250, 0.15);
    background: rgba(59, 130, 246, 0.045);
  }
  
  .modal-offre-information-icone {
    width: 34px;
    height: 34px;
  
    display: grid;
    place-items: center;
    flex: 0 0 34px;
  
    border-radius: 50%;
  
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.12);
  
    font-weight: 900;
  }
  
  .modal-offre-information strong {
    display: block;
    margin-bottom: 5px;
  
    color: #ffffff;
  
    font-size: 0.83rem;
  }
  
  .modal-offre-information p {
    color: #9692a2;
  
    font-size: 0.76rem;
    line-height: 1.55;
  }
  
  .modal-offre-actions {
    display: flex;
    justify-content: flex-end;
  
    margin-top: 25px;
  }
  
  .modal-offre-configurer {
    min-height: 52px;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  
    padding: 0 23px;
  
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;
  
    color: #ffffff;
    background: linear-gradient(
      135deg,
      #6d28d9,
      #7c3aed 48%,
      #2563eb
    );
  
    box-shadow:
      0 15px 35px rgba(109, 40, 217, 0.27),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  
    font: inherit;
    font-size: 0.84rem;
    font-weight: 900;
  
    cursor: pointer;
  
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  
  .modal-offre-configurer:hover {
    transform: translateY(-3px);
  
    box-shadow:
      0 20px 45px rgba(109, 40, 217, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  
  /* =========================================================
     RESPONSIVE — MODAL OFFRE
     ========================================================= */
  
  @media (max-width: 700px) {
    .modal-offre {
      padding: 12px;
    }
  
    .modal-offre-contenu {
      max-height: calc(100vh - 24px);
      padding: 28px 20px 22px;
      border-radius: 19px;
    }
  
    .modal-offre-entete {
      padding-right: 35px;
    }
  
    .modal-offre-resume {
      grid-template-columns: 1fr;
    }
  
    .modal-offre-liste {
      grid-template-columns: 1fr;
    }
  
    .modal-offre-section {
      padding: 20px 17px;
    }
  
    .modal-offre-configurer {
      width: 100%;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .modal-offre-contenu,
    .modal-offre-fermer,
    .offre-details {
      transition: none;
    }
  }

  /* =========================================================
   MODAL OFFRE — PRESTATIONS REGROUPÉES
   ========================================================= */

#modal-offre-inclus {
  display: block;
}

.modal-offre-groupe {
  display: block;
  padding: 0;
  margin: 0;
}

.modal-offre-groupe + .modal-offre-groupe {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.modal-offre-groupe::before {
  display: none;
}

.modal-offre-groupe-entete {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.modal-offre-groupe-entete span {
  min-width: 31px;
  height: 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 8px;

  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.08);

  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.modal-offre-groupe-entete strong {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 850;
}

.modal-offre-groupe-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 24px;

  padding: 0;
  margin: 0;

  list-style: none;
}

.modal-offre-groupe-liste li {
  position: relative;

  padding-left: 21px;

  color: #cbc7d5;

  font-size: 0.79rem;
  line-height: 1.48;
}

.modal-offre-groupe-liste li::before {
  content: "✓";

  position: absolute;
  top: 0;
  left: 0;

  color: #73f6ad;

  font-weight: 900;
}

@media (max-width: 700px) {
  .modal-offre-groupe-liste {
    grid-template-columns: 1fr;
  }

  .modal-offre-groupe + .modal-offre-groupe {
    margin-top: 18px;
    padding-top: 18px;
  }
}

/* =========================================================
   MODAL OFFRE — SCROLL INTERNE ET PIED FIXE
   ========================================================= */

   .modal-offre-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  
    padding: 40px 40px 24px;
  
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 139, 250, 0.38) transparent;
  }
  
  .modal-offre-scroll::-webkit-scrollbar {
    width: 8px;
  }
  
  .modal-offre-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .modal-offre-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(167, 139, 250, 0.38);
  }
  
  .modal-offre-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 139, 250, 0.58);
  }
  
  .modal-offre-section-titre-sans-numero {
    display: block;
  }
  
  .modal-offre-section-titre-sans-numero > div {
    padding-left: 0;
  }
  
  .modal-offre-actions {
    position: relative;
    z-index: 4;
  
    flex: 0 0 auto;
    justify-content: flex-end;
  
    margin: 0;
    padding: 18px 40px 24px;
  
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  
    background:
      linear-gradient(
        180deg,
        rgba(10, 9, 20, 0.94),
        rgba(7, 7, 14, 0.99)
      );
  
    box-shadow:
      0 -18px 38px rgba(3, 3, 10, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.025);
  
    backdrop-filter: blur(18px);
  }
  
  .modal-offre-fermer {
    z-index: 8;
  }
  
  @media (max-width: 700px) {
    .modal-offre-contenu {
      height: calc(100vh - 24px);
      max-height: calc(100vh - 24px);
      padding: 0;
    }
  
    .modal-offre-scroll {
      padding: 28px 20px 20px;
    }
  
    .modal-offre-actions {
      padding: 14px 20px 18px;
    }
  }

  .dashboard-systeme{

    padding:18px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    background:rgba(255,255,255,.03);

}

.dashboard-systeme-entete{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.dashboard-systeme-entete strong{

    font-size:.95rem;

    color:#fff;

    font-weight:600;

}

.dashboard-systeme-statut{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.78rem;

    color:#7ef9b3;

    font-weight:600;

}

.dashboard-systeme-statut span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:0 0 12px rgba(74,222,128,.7);

}

.dashboard-systeme p{

    margin:0;

    color:rgba(255,255,255,.72);

    line-height:1.6;

    font-size:.88rem;

}

.dashboard-section-entete {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  margin-top:22px;
  margin-bottom:11px;
  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.07);
}

.dashboard-section-entete > span:first-child {
  color:rgba(255,255,255,.72);

  font-size:.68rem;
  font-weight:700;

  letter-spacing:.14em;
  text-transform:uppercase;
}

.dashboard-section-entete > small {
  color:rgba(255,255,255,.38);

  font-size:.68rem;
  font-weight:500;
}

.dashboard-section-live {
  display:inline-flex;
  align-items:center;
  gap:7px;

  color:rgba(255,255,255,.48);

  font-size:.68rem;
  font-weight:600;
}

.dashboard-section-live > span {
  width:6px;
  height:6px;

  border-radius:50%;

  background:#4ade80;

  box-shadow:
      0 0 8px rgba(74,222,128,.75),
      0 0 16px rgba(74,222,128,.35);

  animation:dashboard-live-pulse 1.8s ease-in-out infinite;
}

@keyframes dashboard-live-pulse {
  0%,
  100% {
      opacity:.55;
      transform:scale(.85);
  }

  50% {
      opacity:1;
      transform:scale(1.15);
  }
}

.dashboard-activite {
  display:flex;
  flex-direction:column;

  margin-top:14px;

  border-top:1px solid rgba(255,255,255,.045);
}

.dashboard-activite-ligne {
  display:grid;
  grid-template-columns:7px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;

  padding:11px 0;

  border-bottom:1px solid rgba(255,255,255,.04);
}

.dashboard-activite-ligne:last-child {
  padding-bottom:0;
  border-bottom:0;
}

.dashboard-activite-point {
  width:6px;
  height:6px;

  border-radius:50%;

  background:#a855f7;

  box-shadow:
      0 0 8px rgba(168,85,247,.65),
      0 0 16px rgba(168,85,247,.3);
}

.dashboard-activite-ligne div {
  display:flex;
  flex-direction:column;
  gap:2px;

  min-width:0;
}

.dashboard-activite-ligne strong {
  color:rgba(255,255,255,.88);

  font-size:.76rem;
  font-weight:600;
}

.dashboard-activite-ligne small {
  overflow:hidden;

  color:rgba(255,255,255,.42);

  font-size:.66rem;
  font-weight:400;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.dashboard-activite-ligne time {
  color:rgba(255,255,255,.36);

  font-size:.62rem;
  font-weight:500;

  white-space:nowrap;
}

/* =========================================================
   CHIVARYN AI — HERO 2.0 / VERSION PREMIUM FINALE
========================================================= */

.hero {
  --hero-violet: 139, 92, 246;
  --hero-violet-clair: 192, 132, 252;
  --hero-rose: 217, 70, 239;

  position: relative;
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(
      circle at 18% 45%,
      rgba(79, 70, 229, 0.15),
      transparent 31%
    ),
    radial-gradient(
      circle at 76% 44%,
      rgba(109, 40, 217, 0.18),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #080816 0%,
      #0b0a1b 46%,
      #070710 100%
    );
}

/* Fond général */

.hero::before {
  content: "";
  position: absolute;
  z-index: -6;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 74% 43%,
      rgba(168, 85, 247, 0.12),
      transparent 26%
    ),
    radial-gradient(
      circle at 12% 77%,
      rgba(99, 102, 241, 0.1),
      transparent 27%
    );
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(124, 58, 237, 0.09),
      transparent
    );
  mask-image: linear-gradient(to top, black, transparent);
}

.hero-grille {
  position: absolute;
  z-index: -5;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );
  background-size: 78px 78px;
  mask-image:
    radial-gradient(
      ellipse at center,
      black 20%,
      transparent 76%
    );
}

/* Halos */

.hero-lueur {
  position: absolute;
  z-index: -4;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(105px);
}

.hero-lueur-gauche {
  top: 26%;
  left: -250px;
  width: 570px;
  height: 570px;
  opacity: 0.55;
  background: rgba(79, 70, 229, 0.27);
}

.hero-lueur-droite {
  right: -190px;
  bottom: -100px;
  width: 680px;
  height: 680px;
  opacity: 0.66;
  background: rgba(168, 85, 247, 0.22);
}

/* Ruban lumineux inférieur */

.hero-ruban {
  position: absolute;
  z-index: -2;
  pointer-events: none;
}

.hero-ruban-bas {
  right: -140px;
  bottom: 3%;
  width: 920px;
  height: 270px;
  opacity: 0.78;
  transform: rotate(-9deg);
}

.hero-ruban-bas::before,
.hero-ruban-bas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 2px;
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(109, 40, 217, 0.2) 15%,
      rgba(168, 85, 247, 0.82) 50%,
      rgba(217, 70, 239, 0.38) 73%,
      transparent 100%
    );
  box-shadow:
    0 0 8px rgba(192, 132, 252, 0.9),
    0 0 28px rgba(139, 92, 246, 0.44),
    0 0 80px rgba(139, 92, 246, 0.2);
  transform: skewX(-22deg);
}

.hero-ruban-bas::after {
  top: 66%;
  height: 7px;
  opacity: 0.35;
  filter: blur(10px);
  transform: skewX(-16deg);
}

/* =========================================================
   COMPOSITION GÉNÉRALE
========================================================= */

.hero-container {
  position: relative;
  z-index: 3;
  width: calc(100% - 64px);
  max-width: 1500px;
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns:
    minmax(470px, 0.88fr)
    minmax(600px, 1.12fr);
  align-items: center;
  gap: clamp(30px, 3vw, 58px);
  margin: 0 auto;
  padding:
    clamp(66px, 6vw, 94px)
    0
    clamp(68px, 6vw, 96px);
}

/* =========================================================
   COLONNE GAUCHE
========================================================= */

.hero-content {
  position: relative;
  z-index: 8;
  width: 100%;
  max-width: 650px;
  text-align: left;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 14px;
  margin: 0 0 25px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 999px;
  color: #e4dcf9;
  background:
    linear-gradient(
      120deg,
      rgba(139, 92, 246, 0.12),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 26px rgba(139, 92, 246, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.hero-badge-point {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow:
    0 0 0 5px rgba(192, 132, 252, 0.1),
    0 0 15px rgba(192, 132, 252, 0.95);
  animation: hero-badge-pulse 2.3s ease-in-out infinite;
}

@keyframes hero-badge-pulse {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.hero h1 {
  max-width: 650px;
  margin: 0;
  color: #fbfaff;
  font-size: clamp(3.3rem, 4.55vw, 5.15rem);
  font-weight: 850;
  line-height: 0.94;
  letter-spacing: -0.068em;
  text-wrap: initial;
}

.hero-texte-gradient {
  display: inline;
  color: transparent;
  background:
    linear-gradient(
      108deg,
      #7c3aed 0%,
      #a855f7 43%,
      #d946ef 100%
    );
  background-size: 180% auto;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 22px rgba(168, 85, 247, 0.13));
  animation: hero-gradient-move 7s linear infinite;
}

@keyframes hero-gradient-move {
  to {
    background-position: 180% center;
  }
}

.hero-description {
  max-width: 570px;
  margin: 25px 0 0;
  color: #b8b4c5;
  font-size: clamp(0.98rem, 1vw, 1.08rem);
  line-height: 1.72;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 31px;
}

.hero-buttons .btn {
  min-height: 56px;
  padding-inline: 25px;
  border-radius: 12px;
}

.hero-buttons .btn-primary {
  box-shadow:
    0 18px 44px rgba(124, 58, 237, 0.34),
    0 0 25px rgba(168, 85, 247, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hero-buttons .btn-secondary {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
}

.hero-reassurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 13px 23px;
  margin-top: 27px;
}

.hero-reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9b5c4;
  font-size: 0.76rem;
  white-space: nowrap;
}

.reassurance-icone {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, 0.42);
  border-radius: 50%;
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 13px rgba(139, 92, 246, 0.09);
  font-size: 0.63rem;
  font-weight: 900;
}

/* =========================================================
   ZONE VISUELLE DU DASHBOARD
========================================================= */

.hero-visual {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1700px;
  transform-style: preserve-3d;
}

/* Halo central derrière le dashboard */

.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -4;
  top: 48%;
  left: 51%;
  width: 630px;
  height: 630px;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(168, 85, 247, 0.19) 0%,
      rgba(124, 58, 237, 0.09) 37%,
      transparent 70%
    );
  filter: blur(12px);
  transform: translate(-50%, -50%);
}

/* Lueur au sol */

.hero-visual::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  bottom: 27px;
  width: 560px;
  height: 90px;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(168, 85, 247, 0.41),
      rgba(124, 58, 237, 0.1) 48%,
      transparent 72%
    );
  filter: blur(20px);
  transform: translateX(-50%);
}

/* Orbites */

.hero-orbite {
  position: absolute;
  z-index: -3;
  top: 50%;
  left: 49%;
  pointer-events: none;
  border: 1px solid rgba(168, 85, 247, 0.21);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.hero-orbite-une {
  width: 640px;
  height: 640px;
  animation: hero-orbite-rotation 35s linear infinite;
}

.hero-orbite-deux {
  width: 510px;
  height: 510px;
  border-color: rgba(192, 132, 252, 0.14);
  animation: hero-orbite-rotation-inverse 27s linear infinite;
}

.hero-orbite-une::before,
.hero-orbite-une::after,
.hero-orbite-deux::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #c084fc;
  box-shadow:
    0 0 7px #c084fc,
    0 0 22px rgba(192, 132, 252, 0.7);
}

.hero-orbite-une::before {
  top: 14%;
  right: 12%;
  width: 7px;
  height: 7px;
}

.hero-orbite-une::after {
  bottom: 9%;
  left: 22%;
  width: 5px;
  height: 5px;
}

.hero-orbite-deux::before {
  top: 52%;
  left: -3px;
  width: 6px;
  height: 6px;
}

@keyframes hero-orbite-rotation {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes hero-orbite-rotation-inverse {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.hero-orbite-point {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: #c084fc;
  box-shadow:
    0 0 9px rgba(192, 132, 252, 1),
    0 0 25px rgba(168, 85, 247, 0.7);
}

.hero-orbite-point-un {
  top: 21%;
  right: 12%;
  width: 7px;
  height: 7px;
  animation: hero-point-flotte 4.6s ease-in-out infinite;
}

.hero-orbite-point-deux {
  left: 8%;
  bottom: 20%;
  width: 5px;
  height: 5px;
  animation:
    hero-point-flotte 5.4s ease-in-out infinite reverse;
}

@keyframes hero-point-flotte {
  0%,
  100% {
    transform: translateY(-5px);
    opacity: 0.65;
  }

  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

/* =========================================================
   DASHBOARD PRINCIPAL
========================================================= */

.hero-visual .dashboard-card {
  position: relative;
  z-index: 5;
  width: min(100%, 510px);
  min-height: auto;
  overflow: visible;
  padding: 0 27px 25px;
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: 25px;
  background:
    radial-gradient(
      circle at 88% 5%,
      rgba(168, 85, 247, 0.17),
      transparent 25%
    ),
    radial-gradient(
      circle at 9% 85%,
      rgba(79, 70, 229, 0.13),
      transparent 29%
    ),
    linear-gradient(
      155deg,
      rgba(31, 27, 48, 0.97),
      rgba(15, 13, 28, 0.98) 65%,
      rgba(10, 9, 20, 0.99)
    );
  box-shadow:
    0 65px 130px rgba(0, 0, 0, 0.62),
    0 0 100px rgba(139, 92, 246, 0.19),
    17px 0 48px rgba(168, 85, 247, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform:
    translate3d(-28px, 0, 0)
    rotateY(-8deg)
    rotateX(2.5deg)
    rotateZ(1.5deg);
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  animation: hero-dashboard-flotte 6.5s ease-in-out infinite;
}

@keyframes hero-dashboard-flotte {
  0%,
  100% {
    transform:
      translate3d(-28px, -4px, 0)
      rotateY(-8deg)
      rotateX(2.5deg)
      rotateZ(1.5deg);
  }

  50% {
    transform:
      translate3d(-28px, 7px, 0)
      rotateY(-7deg)
      rotateX(2deg)
      rotateZ(1.2deg);
  }
}

.hero-visual:hover .dashboard-card {
  border-color: rgba(192, 132, 252, 0.52);
  box-shadow:
    0 75px 145px rgba(0, 0, 0, 0.7),
    0 0 125px rgba(139, 92, 246, 0.26),
    20px 0 58px rgba(168, 85, 247, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.hero-visual .dashboard-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  width: 55%;
  height: 2px;
  pointer-events: none;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(192, 132, 252, 0.92)
    );
  box-shadow:
    0 0 8px rgba(192, 132, 252, 0.95),
    0 0 28px rgba(168, 85, 247, 0.65);
}

.hero-visual .dashboard-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 8%;
  right: -1px;
  width: 2px;
  height: 74%;
  pointer-events: none;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(192, 132, 252, 0.85),
      rgba(139, 92, 246, 0.2),
      transparent
    );
  box-shadow:
    0 0 9px rgba(192, 132, 252, 0.8),
    0 0 28px rgba(168, 85, 247, 0.45);
}

.dashboard-reflet {
  position: absolute;
  z-index: 1;
  top: -170px;
  right: -100px;
  width: 350px;
  height: 350px;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.18);
  filter: blur(75px);
}

/* Barre supérieure */

.hero-visual .dashboard-barre {
  position: relative;
  z-index: 5;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -27px 23px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025),
      rgba(139, 92, 246, 0.045)
    );
  border-radius: 25px 25px 0 0;
}

.dashboard-points {
  display: flex;
  gap: 7px;
}

.dashboard-points span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.dashboard-points span:nth-child(2) {
  background: rgba(167, 139, 250, 0.65);
}

.dashboard-points span:nth-child(3) {
  background: rgba(217, 70, 239, 0.58);
}

.dashboard-statut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aca8b7;
  font-size: 0.66rem;
  font-weight: 700;
}

.dashboard-statut > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 11px rgba(74, 222, 128, 0.9);
}

/* En-tête dashboard */

.hero-visual .dashboard-entete {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 23px;
}

.dashboard-label {
  display: block;
  margin-bottom: 7px;
  color: #c4b5fd;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.hero-visual .dashboard-entete h2 {
  max-width: 315px;
  margin: 0;
  color: #faf8ff;
  font-size: 1.6rem;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.dashboard-logo {
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, 0.5);
  border-radius: 13px;
  color: white;
  background:
    linear-gradient(
      135deg,
      #6d28d9,
      #9333ea
    );
  box-shadow:
    0 0 28px rgba(139, 92, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 900;
}

/* Titres de zones */

.hero-visual .dashboard-section-entete {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 13px;
  color: #c8c3d1;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-visual .dashboard-section-entete small {
  color: #777282;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Résultats */

.hero-visual .dashboard-resultats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 13px;
}

.hero-visual .dashboard-resultat {
  position: relative;
  min-height: 103px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.015)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.hero-visual .dashboard-resultat-large {
  grid-column: 1 / -1;
  min-height: 88px;
}

.hero-visual .dashboard-resultat > span {
  display: block;
  margin-bottom: 5px;
  color: #9691a1;
  font-size: 0.65rem;
}

.hero-visual .dashboard-resultat strong {
  display: block;
  margin-bottom: 4px;
  color: #f5f3ff;
  font-size: 1rem;
}

.hero-visual .dashboard-resultat small {
  color: #aaa5b5;
  font-size: 0.61rem;
}

.dashboard-mini-courbe {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 10px;
  height: 22px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.dashboard-mini-courbe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 49%;
  height: 1px;
  opacity: 0.8;
  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #c084fc,
      #a855f7
    );
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
  clip-path:
    polygon(
      0 75%,
      15% 52%,
      28% 66%,
      40% 29%,
      55% 46%,
      71% 17%,
      84% 44%,
      100% 0,
      100% 9%,
      84% 53%,
      71% 26%,
      55% 55%,
      40% 38%,
      28% 75%,
      15% 61%,
      0 84%
    );
}

.dashboard-mini-courbe i {
  display: none;
}

.dashboard-progression {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 13px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.dashboard-progression span {
  display: block;
  width: 88%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #a855f7,
      #d946ef
    );
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
  animation: hero-progression 2.1s ease both;
}

@keyframes hero-progression {
  from {
    width: 0;
  }

  to {
    width: 88%;
  }
}

/* Indicateurs horizontaux */

.hero-visual .dashboard-live {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 21px;
}

.hero-visual .dashboard-live-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.hero-visual .dashboard-live-icone {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.17);
  font-size: 0.82rem;
}

.hero-visual .dashboard-live-item div {
  min-width: 0;
}

.hero-visual .dashboard-live-item small {
  display: block;
  overflow: hidden;
  color: #918c9b;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-visual .dashboard-live-item strong {
  display: block;
  color: #f5f3ff;
  font-size: 0.94rem;
}

.hero-visual .dashboard-live-item em {
  color: #4ade80;
  font-size: 0.61rem;
  font-style: normal;
  font-weight: 800;
}

/* Pipeline */

.dashboard-pipeline-entete {
  padding-top: 2px;
}

.dashboard-section-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aaa5b4;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.dashboard-section-live > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 11px rgba(74, 222, 128, 0.86);
}

.hero-visual .workflow {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.hero-visual .workflow-ligne {
  min-height: 57px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.015)
    );
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.hero-visual .workflow-ligne:hover {
  z-index: 2;
  transform: translateX(5px);
  border-color: rgba(192, 132, 252, 0.33);
  background: rgba(139, 92, 246, 0.075);
}

.hero-visual .workflow-ligne.active {
  border-color: rgba(167, 139, 250, 0.3);
  background:
    linear-gradient(
      90deg,
      rgba(109, 40, 217, 0.14),
      rgba(255, 255, 255, 0.018)
    );
}

.hero-visual .workflow-icone {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 10px;
  color: #ede9fe;
  background:
    linear-gradient(
      135deg,
      rgba(109, 40, 217, 0.72),
      rgba(168, 85, 247, 0.2)
    );
  font-size: 0.62rem;
  font-weight: 900;
}

.hero-visual .workflow-texte {
  min-width: 0;
}

.hero-visual .workflow-texte > span {
  display: block;
  overflow: hidden;
  margin-bottom: 3px;
  color: #f5f3ff;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-visual .workflow-texte small {
  display: block;
  overflow: hidden;
  color: #85808f;
  font-size: 0.57rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-visual .workflow-etat {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 7px;
  color: #a9a4b1;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.54rem;
  font-weight: 700;
}

.hero-visual .workflow-connecteur {
  position: relative;
  z-index: 1;
  width: 35px;
  height: 7px;
  margin-left: 0;
}

.hero-visual .workflow-connecteur span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  width: 1px;
  background:
    linear-gradient(
      #7c3aed,
      rgba(192, 132, 252, 0.45)
    );
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

/* =========================================================
   CARTES FLOTTANTES
========================================================= */

.hero-carte-flottante {
  position: absolute;
  z-index: 10;
  min-width: 177px;
  min-height: 61px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(22, 19, 35, 0.94),
      rgba(10, 9, 19, 0.92)
    );
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.44),
    0 0 32px rgba(139, 92, 246, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
  transform: translateZ(80px);
}

.carte-flottante-icone {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, 0.34);
  border-radius: 10px;
  color: #f5f3ff;
  background:
    linear-gradient(
      135deg,
      #6d28d9,
      #9333ea
    );
  box-shadow:
    0 0 22px rgba(139, 92, 246, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  font-size: 0.66rem;
  font-weight: 900;
}

.hero-carte-flottante > div {
  min-width: 0;
}

.hero-carte-flottante strong,
.hero-carte-flottante small {
  display: block;
  white-space: nowrap;
}

.hero-carte-flottante strong {
  color: #f8f6ff;
  font-size: 0.68rem;
  line-height: 1.2;
}

.hero-carte-flottante small {
  margin-bottom: 3px;
  color: #817c8c;
  font-size: 0.55rem;
}

.hero-carte-ia {
  top: 15%;
  right: 0;
  animation: hero-carte-flotte-une 5.2s ease-in-out infinite;
}

.hero-carte-crm {
  top: 35%;
  right: -3%;
  animation: hero-carte-flotte-deux 6.1s ease-in-out infinite;
}

.hero-carte-rdv {
  top: 53%;
  right: -1%;
  animation: hero-carte-flotte-une 5.7s ease-in-out infinite reverse;
}

.hero-carte-api {
  right: 3%;
  bottom: 19%;
  animation: hero-carte-flotte-deux 6.5s ease-in-out infinite reverse;
}

@keyframes hero-carte-flotte-une {
  0%,
  100% {
    transform: translate3d(0, -5px, 80px);
  }

  50% {
    transform: translate3d(6px, 7px, 80px);
  }
}

@keyframes hero-carte-flotte-deux {
  0%,
  100% {
    transform: translate3d(3px, 5px, 80px);
  }

  50% {
    transform: translate3d(-5px, -7px, 80px);
  }
}

/* =========================================================
   RESPONSIVE — HERO 2.0
========================================================= */

@media (max-width: 1320px) {
  .hero-container {
    width: calc(100% - 48px);
    grid-template-columns:
      minmax(420px, 0.9fr)
      minmax(535px, 1.1fr);
    gap: 22px;
  }

  .hero h1 {
    font-size: clamp(3.05rem, 4.5vw, 4.65rem);
  }

  .hero-visual {
    min-height: 690px;
    transform: scale(0.94);
    transform-origin: center;
  }

  .hero-carte-flottante {
    min-width: 160px;
  }
}

@media (max-width: 1120px) {
  .hero {
    min-height: auto;
  }

  .hero-container {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 54px;
    padding-top: 88px;
    padding-bottom: 90px;
  }

  .hero-content {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
  }

  .hero h1 {
    max-width: 760px;
    margin-inline: auto;
    font-size: clamp(3.4rem, 7vw, 5rem);
  }

  .hero-description {
    margin-inline: auto;
  }

  .hero-buttons,
  .hero-reassurance {
    justify-content: center;
  }

  .hero-visual {
    width: min(100%, 820px);
    min-height: 720px;
    margin-inline: auto;
    transform: none;
  }

  .hero-visual .dashboard-card {
    transform:
      translate3d(-24px, 0, 0)
      rotateY(-6deg)
      rotateX(2deg)
      rotateZ(1.2deg);
  }

  @keyframes hero-dashboard-flotte {
    0%,
    100% {
      transform:
        translate3d(-24px, -4px, 0)
        rotateY(-6deg)
        rotateX(2deg)
        rotateZ(1.2deg);
    }

    50% {
      transform:
        translate3d(-24px, 7px, 0)
        rotateY(-5deg)
        rotateX(1.5deg)
        rotateZ(1deg);
    }
  }

  .hero-carte-ia {
    right: 4%;
  }

  .hero-carte-crm {
    right: 0;
  }

  .hero-carte-rdv {
    right: 2%;
  }

  .hero-carte-api {
    right: 6%;
  }
}

@media (max-width: 760px) {
  .hero-container {
    width: calc(100% - 32px);
    gap: 42px;
    padding-top: 70px;
    padding-bottom: 72px;
  }

  .hero-content {
    text-align: left;
  }

  .hero-badge {
    margin-bottom: 21px;
    font-size: 0.66rem;
  }

  .hero h1 {
    margin-inline: 0;
    font-size: clamp(2.55rem, 12.3vw, 3.7rem);
    line-height: 0.98;
    letter-spacing: -0.062em;
  }

  .hero-description {
    margin: 23px 0 0;
    font-size: 0.95rem;
    line-height: 1.68;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    margin-top: 28px;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-reassurance {
    justify-content: flex-start;
    gap: 12px;
  }

  .hero-reassurance-item {
    width: 100%;
  }

  .hero-visual {
    width: 100%;
    min-height: 580px;
    transform: scale(0.78);
    transform-origin: top center;
    margin-bottom: -115px;
  }

  .hero-visual .dashboard-card {
    width: 500px;
    flex: 0 0 500px;
  }

  .hero-carte-ia {
    right: -18%;
  }

  .hero-carte-crm {
    right: -21%;
  }

  .hero-carte-rdv {
    right: -19%;
  }

  .hero-carte-api {
    right: -14%;
  }

  .hero-ruban-bas {
    right: -420px;
  }
}

@media (max-width: 480px) {
  .hero-container {
    width: calc(100% - 26px);
    padding-top: 56px;
  }

  .hero-badge {
    max-width: 100%;
    white-space: nowrap;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.2rem);
  }

  .hero-visual {
    min-height: 520px;
    transform: scale(0.65);
    margin-bottom: -165px;
  }

  .hero-carte-flottante {
    display: none;
  }

  .hero-orbite-une {
    width: 590px;
    height: 590px;
  }

  .hero-orbite-deux {
    width: 460px;
    height: 460px;
  }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
  .hero-badge-point,
  .hero-texte-gradient,
  .hero-orbite,
  .hero-orbite-point,
  .hero-visual .dashboard-card,
  .hero-carte-flottante,
  .dashboard-progression span {
    animation: none !important;
  }
}

/* =========================================================
   CHIVARYN AI — SPRINT 3 / ÉCOSYSTÈME DE SOLUTIONS 3D
========================================================= */

.services {
  --services-violet: 139, 92, 246;
  --services-violet-clair: 192, 132, 252;
  --services-rose: 217, 70, 239;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    clamp(110px, 9vw, 155px)
    0
    clamp(115px, 9vw, 165px);
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(109, 40, 217, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 60%,
      rgba(79, 70, 229, 0.1),
      transparent 27%
    ),
    radial-gradient(
      circle at 95% 56%,
      rgba(168, 85, 247, 0.1),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #080816 0%,
      #090817 48%,
      #06060d 100%
    );
}

/* Grille de fond */

.services::before {
  content: "";
  position: absolute;
  z-index: -6;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 84px 84px;
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 13%,
      black 88%,
      transparent
    );
}

/* Séparateur supérieur */

.services::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 50%;
  width: min(92%, 1550px);
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(139, 92, 246, 0.24),
      rgba(192, 132, 252, 0.5),
      rgba(139, 92, 246, 0.24),
      transparent
    );
  box-shadow:
    0 0 24px rgba(139, 92, 246, 0.2);
  transform: translateX(-50%);
}

/* =========================================================
   EFFETS DE FOND
========================================================= */

.services-lueur {
  position: absolute;
  z-index: -5;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(110px);
}

.services-lueur-gauche {
  top: 30%;
  left: -280px;
  width: 640px;
  height: 640px;
  background: rgba(79, 70, 229, 0.18);
}

.services-lueur-droite {
  right: -300px;
  bottom: 4%;
  width: 690px;
  height: 690px;
  background: rgba(168, 85, 247, 0.16);
}

.services-orbite {
  position: absolute;
  z-index: -4;
  top: 57%;
  left: 50%;
  pointer-events: none;
  border: 1px solid rgba(168, 85, 247, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.services-orbite-une {
  width: 1100px;
  height: 680px;
  animation: services-orbite-tourne 46s linear infinite;
}

.services-orbite-deux {
  width: 820px;
  height: 510px;
  border-color: rgba(192, 132, 252, 0.09);
  animation: services-orbite-tourne-inverse 37s linear infinite;
}

.services-orbite-une::before,
.services-orbite-une::after,
.services-orbite-deux::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #c084fc;
  box-shadow:
    0 0 8px rgba(192, 132, 252, 1),
    0 0 25px rgba(168, 85, 247, 0.7);
}

.services-orbite-une::before {
  top: 15%;
  right: 13%;
  width: 6px;
  height: 6px;
}

.services-orbite-une::after {
  left: 9%;
  bottom: 23%;
  width: 4px;
  height: 4px;
}

.services-orbite-deux::before {
  top: 52%;
  left: -3px;
  width: 5px;
  height: 5px;
}

@keyframes services-orbite-tourne {
  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes services-orbite-tourne-inverse {
  to {
    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }
}

/* =========================================================
   EN-TÊTE
========================================================= */

.services-contenu {
  position: relative;
  z-index: 3;
}

.services-entete {
  position: relative;
  z-index: 8;
  max-width: 940px;
  margin-bottom: clamp(65px, 6vw, 92px);
}

.services-entete .sur-titre {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.services-entete .sur-titre::before,
.services-entete .sur-titre::after {
  content: "";
  width: 34px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(192, 132, 252, 0.76)
    );
}

.services-entete .sur-titre::after {
  transform: scaleX(-1);
}

.services-entete h2 {
  max-width: 940px;
  margin:
    19px
    auto
    20px;
  font-size: clamp(2.65rem, 4.6vw, 4.65rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.services-entete p {
  max-width: 700px;
  margin-inline: auto;
  color: #b7b3c3;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* =========================================================
   ARCHITECTURE GÉNÉRALE
========================================================= */

.services-architecture {
  position: relative;
  width: 100%;
  max-width: 1420px;
  min-height: 930px;
  margin: 0 auto;
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* Halo central */

.services-architecture::before {
  content: "";
  position: absolute;
  z-index: -5;
  top: 46%;
  left: 50%;
  width: 670px;
  height: 670px;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(168, 85, 247, 0.2),
      rgba(109, 40, 217, 0.08) 38%,
      transparent 70%
    );
  filter: blur(18px);
  transform: translate(-50%, -50%);
}

/* Anneau central */

.services-architecture::after {
  content: "";
  position: absolute;
  z-index: -3;
  top: 46%;
  left: 50%;
  width: 520px;
  height: 520px;
  pointer-events: none;
  border: 1px solid rgba(168, 85, 247, 0.14);
  border-radius: 50%;
  box-shadow:
    inset 0 0 90px rgba(139, 92, 246, 0.04),
    0 0 80px rgba(139, 92, 246, 0.04);
  transform: translate(-50%, -50%);
}

/* =========================================================
   MODULES
========================================================= */

.solution-module,
.solution-dashboard {
  --module-accent: 168, 85, 247;

  position: absolute;
  z-index: 8;
  overflow: visible;
  outline: none;
  border: 1px solid rgba(var(--module-accent), 0.32);
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(var(--module-accent), 0.12),
      transparent 30%
    ),
    linear-gradient(
      150deg,
      rgba(29, 25, 46, 0.94),
      rgba(14, 13, 27, 0.97) 68%,
      rgba(8, 8, 17, 0.99)
    );
  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.42),
    0 0 55px rgba(var(--module-accent), 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.solution-module {
  width: min(29%, 390px);
  min-height: 262px;
  padding: 28px 29px 31px;
  border-radius: 25px 25px 34px 34px;
}

.solution-module::before,
.solution-dashboard::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 16%;
  right: 16%;
  height: 2px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--module-accent), 0.92),
      transparent
    );
  box-shadow:
    0 0 8px rgba(var(--module-accent), 0.95),
    0 0 28px rgba(var(--module-accent), 0.5);
}

.solution-module::after,
.solution-dashboard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(
      circle at var(--solution-x, 50%) var(--solution-y, 50%),
      rgba(var(--module-accent), 0.16),
      transparent 42%
    );
  transition: opacity 0.35s ease;
}

.solution-module:hover,
.solution-module:focus-visible,
.solution-dashboard:hover,
.solution-dashboard:focus-visible {
  z-index: 15;
  border-color: rgba(var(--module-accent), 0.62);
  box-shadow:
    0 46px 110px rgba(0, 0, 0, 0.58),
    0 0 80px rgba(var(--module-accent), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.solution-module:hover::after,
.solution-module:focus-visible::after,
.solution-dashboard:hover::after,
.solution-dashboard:focus-visible::after {
  opacity: 1;
}

/* Positions */

.solution-site {
  --module-accent: 124, 58, 237;

  top: 4%;
  left: 1.5%;
  transform:
    perspective(1000px)
    rotateY(3deg)
    translateZ(0);
}

.solution-site:hover,
.solution-site:focus-visible {
  transform:
    perspective(1000px)
    rotateY(1deg)
    translateY(-11px)
    translateZ(32px);
}

.solution-ia {
  --module-accent: 192, 132, 252;

  top: 4%;
  right: 1.5%;
  transform:
    perspective(1000px)
    rotateY(-3deg)
    translateZ(0);
}

.solution-ia:hover,
.solution-ia:focus-visible {
  transform:
    perspective(1000px)
    rotateY(-1deg)
    translateY(-11px)
    translateZ(32px);
}

.solution-automatisation {
  --module-accent: 139, 92, 246;

  top: 42%;
  left: 0;
  transform:
    perspective(1000px)
    rotateY(4deg)
    translateZ(0);
}

.solution-automatisation:hover,
.solution-automatisation:focus-visible {
  transform:
    perspective(1000px)
    rotateY(1deg)
    translateY(-11px)
    translateZ(32px);
}

.solution-crm {
  --module-accent: 217, 70, 239;

  top: 42%;
  right: 0;
  transform:
    perspective(1000px)
    rotateY(-4deg)
    translateZ(0);
}

.solution-crm:hover,
.solution-crm:focus-visible {
  transform:
    perspective(1000px)
    rotateY(-1deg)
    translateY(-11px)
    translateZ(32px);
}

/* Socles 3D */

.solution-module-socle,
.solution-dashboard-socle {
  position: absolute;
  z-index: -2;
  left: -2px;
  right: -2px;
  bottom: -20px;
  height: 46px;
  pointer-events: none;
  border: 1px solid rgba(var(--module-accent), 0.46);
  border-radius: 0 0 35px 35px;
  background:
    linear-gradient(
      180deg,
      rgba(var(--module-accent), 0.26),
      rgba(var(--module-accent), 0.06)
    );
  box-shadow:
    0 5px 0 rgba(var(--module-accent), 0.08),
    0 0 17px rgba(var(--module-accent), 0.5),
    0 0 45px rgba(var(--module-accent), 0.18);
  transform:
    perspective(400px)
    rotateX(-38deg);
  transform-origin: top;
}

.solution-module-socle::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--module-accent), 0.95),
      transparent
    );
  box-shadow:
    0 0 10px rgba(var(--module-accent), 0.9),
    0 0 25px rgba(var(--module-accent), 0.5);
}

/* En-tête module */

.solution-module-entete {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.solution-module-icone {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--module-accent), 0.5);
  border-radius: 15px;
  color: #f5efff;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.18),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(var(--module-accent), 0.86),
      rgba(var(--module-accent), 0.3)
    );
  box-shadow:
    0 0 27px rgba(var(--module-accent), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.solution-module:hover .solution-module-icone,
.solution-module:focus-visible .solution-module-icone,
.solution-dashboard:hover .solution-module-icone,
.solution-dashboard:focus-visible .solution-module-icone {
  transform:
    translateY(-4px)
    rotate(-4deg);
  box-shadow:
    0 0 38px rgba(var(--module-accent), 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.solution-module-icone svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solution-module-entete h3 {
  margin: 0 0 5px;
  color: #faf8ff;
  font-size: 1.14rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.solution-module-entete div > span {
  display: block;
  color: #c084fc;
  font-size: 0.78rem;
  font-weight: 650;
}

/* Listes */

.solution-module ul,
.solution-dashboard ul {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution-module li,
.solution-dashboard li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #c2becd;
  font-size: 0.82rem;
  line-height: 1.4;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.solution-module li::before,
.solution-dashboard li::before {
  content: "✓";
  flex: 0 0 auto;
  color: #d946ef;
  font-size: 0.74rem;
  font-weight: 900;
  text-shadow:
    0 0 9px rgba(217, 70, 239, 0.65);
}

.solution-module:hover li,
.solution-module:focus-visible li,
.solution-dashboard:hover li,
.solution-dashboard:focus-visible li {
  color: #eeeaf4;
}

.solution-module:hover li:nth-child(1),
.solution-dashboard:hover li:nth-child(1) {
  transform: translateX(2px);
}

.solution-module:hover li:nth-child(2),
.solution-dashboard:hover li:nth-child(2) {
  transform: translateX(4px);
}

.solution-module:hover li:nth-child(3),
.solution-dashboard:hover li:nth-child(3) {
  transform: translateX(6px);
}

.solution-module:hover li:nth-child(4),
.solution-dashboard:hover li:nth-child(4) {
  transform: translateX(8px);
}

.solution-module:hover li:nth-child(5),
.solution-dashboard:hover li:nth-child(5) {
  transform: translateX(10px);
}

/* =========================================================
   CONNEXIONS LUMINEUSES
========================================================= */

.services-connexion {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  height: 3px;
  overflow: visible;
  background:
    linear-gradient(
      90deg,
      rgba(124, 58, 237, 0.2),
      rgba(192, 132, 252, 0.95),
      rgba(168, 85, 247, 0.25)
    );
  box-shadow:
    0 0 8px rgba(192, 132, 252, 0.85),
    0 0 22px rgba(139, 92, 246, 0.38);
  transform-origin: center;
}

.services-connexion::before {
  content: "";
  position: absolute;
  inset: -7px 0;
  opacity: 0.25;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(168, 85, 247, 0.8),
      transparent
    );
  filter: blur(8px);
}

.services-connexion span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f0abfc;
  box-shadow:
    0 0 7px #f0abfc,
    0 0 18px #c084fc,
    0 0 38px rgba(168, 85, 247, 0.8);
  transform: translateY(-50%);
  animation:
    services-impulsion 3.2s linear infinite;
}

.services-connexion-site {
  top: 27%;
  left: 27%;
  width: 25%;
  transform: rotate(14deg);
}

.services-connexion-ia {
  top: 27%;
  right: 27%;
  width: 25%;
  transform: rotate(-14deg);
}

.services-connexion-automatisation {
  top: 55%;
  left: 27%;
  width: 26%;
  transform: rotate(-14deg);
}

.services-connexion-crm {
  top: 55%;
  right: 27%;
  width: 26%;
  transform: rotate(14deg);
}

.services-connexion-dashboard {
  top: 62%;
  left: 50%;
  width: 160px;
  transform:
    translateX(-50%)
    rotate(90deg);
}

.services-connexion-ia span,
.services-connexion-crm span {
  animation-direction: reverse;
}

.services-connexion-automatisation span {
  animation-delay: -0.9s;
}

.services-connexion-crm span {
  animation-delay: -1.7s;
}

.services-connexion-dashboard span {
  animation-delay: -2.3s;
}

@keyframes services-impulsion {
  0% {
    left: 0;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 9px);
    opacity: 0;
  }
}

/* =========================================================
   CŒUR IA 3D
========================================================= */

.services-coeur {
  position: absolute;
  z-index: 12;
  top: 23%;
  left: 50%;
  width: 300px;
  height: 400px;
  pointer-events: none;
  perspective: 1100px;
  transform:
    translateX(-50%)
    translateZ(80px);
  transform-style: preserve-3d;
}

.services-coeur-halo {
  position: absolute;
  z-index: -5;
  top: 48%;
  left: 50%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(192, 132, 252, 0.29),
      rgba(124, 58, 237, 0.13) 36%,
      transparent 70%
    );
  filter: blur(18px);
  transform: translate(-50%, -50%);
  animation:
    services-coeur-respire 3.5s ease-in-out infinite;
}

@keyframes services-coeur-respire {
  0%,
  100% {
    opacity: 0.65;
    transform:
      translate(-50%, -50%)
      scale(0.95);
  }

  50% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.07);
  }
}

.services-coeur-socle {
  position: absolute;
  left: 50%;
  border: 1px solid rgba(192, 132, 252, 0.5);
  border-radius: 26px;
  background:
    linear-gradient(
      145deg,
      rgba(124, 58, 237, 0.34),
      rgba(20, 17, 39, 0.92)
    );
  box-shadow:
    0 0 16px rgba(192, 132, 252, 0.55),
    0 0 55px rgba(139, 92, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform:
    translateX(-50%)
    rotateX(58deg)
    rotateZ(45deg);
}

.services-coeur-socle-bas {
  bottom: 17px;
  width: 215px;
  height: 215px;
}

.services-coeur-socle-haut {
  bottom: 55px;
  width: 175px;
  height: 175px;
  border-color: rgba(217, 70, 239, 0.62);
  box-shadow:
    0 0 14px rgba(217, 70, 239, 0.65),
    0 0 48px rgba(168, 85, 247, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Cube */

.services-coeur-cube {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 50%;
  width: 180px;
  height: 220px;
  transform:
    translateX(-50%)
    rotateX(-3deg)
    rotateY(-4deg);
  transform-style: preserve-3d;
  animation:
    services-cube-flotte 5.5s ease-in-out infinite;
}

@keyframes services-cube-flotte {
  0%,
  100% {
    transform:
      translateX(-50%)
      translateY(-5px)
      rotateX(-3deg)
      rotateY(-4deg);
  }

  50% {
    transform:
      translateX(-50%)
      translateY(8px)
      rotateX(-1deg)
      rotateY(5deg);
  }
}

.services-coeur-face {
  position: absolute;
  border: 1px solid rgba(217, 180, 254, 0.68);
  background:
    linear-gradient(
      150deg,
      rgba(139, 92, 246, 0.25),
      rgba(24, 18, 48, 0.72)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 45px rgba(139, 92, 246, 0.14),
    0 0 17px rgba(192, 132, 252, 0.56),
    0 0 45px rgba(139, 92, 246, 0.24);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.services-coeur-face-avant {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  text-align: center;
}

.services-coeur-face-avant::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(240, 171, 252, 0.85),
      transparent
    );
  box-shadow:
    0 0 14px rgba(217, 70, 239, 0.55);
}

.services-coeur-face-avant strong {
  color: transparent;
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #d8b4fe 45%,
      #a855f7
    );
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.07em;
  filter:
    drop-shadow(
      0 0 18px rgba(192, 132, 252, 0.46)
    );
}

.services-coeur-face-avant span {
  max-width: 120px;
  margin-top: 12px;
  color: #ede9fe;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.25;
}

.services-coeur-face-avant small {
  margin-top: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: 999px;
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.14);
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.services-coeur-face-droite {
  top: 13px;
  right: -30px;
  width: 31px;
  height: 194px;
  transform:
    skewY(43deg);
  transform-origin: left;
}

.services-coeur-face-haut {
  top: -29px;
  left: 15px;
  width: 150px;
  height: 31px;
  transform:
    skewX(-43deg);
  transform-origin: bottom;
}

/* =========================================================
   TABLEAU DE BORD
========================================================= */

.solution-dashboard {
  --module-accent: 192, 132, 252;

  z-index: 14;
  left: 50%;
  bottom: 4%;
  width: min(44%, 620px);
  min-height: 250px;
  padding: 28px;
  border-radius: 25px 25px 32px 32px;
  transform:
    translateX(-50%)
    perspective(1000px)
    rotateX(1.5deg)
    translateZ(22px);
}

.solution-dashboard:hover,
.solution-dashboard:focus-visible {
  transform:
    translateX(-50%)
    perspective(1000px)
    rotateX(0deg)
    translateY(-10px)
    translateZ(45px);
}

.solution-dashboard-socle {
  bottom: -22px;
}

.solution-dashboard-contenu {
  position: relative;
  z-index: 3;
}

.solution-dashboard-grille {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(210px, 0.8fr);
  align-items: center;
  gap: 25px;
}

.solution-dashboard-courbe {
  position: relative;
  min-height: 145px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(168, 85, 247, 0.16),
      transparent 34%
    ),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.solution-dashboard-courbe-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}

.solution-dashboard-courbe-entete span,
.solution-dashboard-courbe-entete small {
  color: #898493;
  font-size: 0.58rem;
}

.solution-dashboard-courbe > strong {
  position: relative;
  z-index: 2;
  display: block;
  color: #faf8ff;
  font-size: 1.35rem;
}

.solution-dashboard-courbe svg {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  width: calc(100% - 28px);
  height: 84px;
  overflow: visible;
}

.solution-dashboard-zone {
  fill: url("#servicesGraphGradient");
  opacity: 0.75;
}

.solution-dashboard-ligne {
  fill: none;
  stroke: #c084fc;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(
      0 0 6px rgba(192, 132, 252, 0.65)
    );
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

.services.visible .solution-dashboard-ligne {
  animation:
    services-trace-courbe 2.2s 0.5s ease forwards;
}

@keyframes services-trace-courbe {
  to {
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   BARRE D’AVANTAGES
========================================================= */

.services-avantages {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1250px;
  margin:
    clamp(60px, 6vw, 88px)
    auto
    0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.015)
    );
  box-shadow:
    0 30px 75px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.services-avantages::before {
  content: "";
  position: absolute;
  top: 0;
  left: 13%;
  right: 13%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(192, 132, 252, 0.68),
      transparent
    );
  box-shadow:
    0 0 18px rgba(168, 85, 247, 0.35);
}

.services-avantage {
  position: relative;
  min-height: 105px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px 25px;
}

.services-avantage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24%;
  right: 0;
  width: 1px;
  height: 52%;
  background:
    linear-gradient(
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
}

.services-avantage-icone {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  color: #d8b4fe;
  filter:
    drop-shadow(
      0 0 10px rgba(168, 85, 247, 0.35)
    );
}

.services-avantage-icone svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services-avantage strong,
.services-avantage small {
  display: block;
}

.services-avantage strong {
  margin-bottom: 5px;
  color: #f8f6ff;
  font-size: 0.87rem;
}

.services-avantage small {
  color: #918c9d;
  font-size: 0.7rem;
}

/* =========================================================
   PHASE 4.2 — APPARITION ORCHESTRÉE DE L’ÉCOSYSTÈME
========================================================= */

/*
  État avant l’entrée dans l’écran.

  Les propriétés individuelles translate et scale sont
  utilisées pour ne pas entrer en conflit avec les
  transformations 3D propres à chaque carte.
*/

.services .services-coeur,
.services .solution-module,
.services .solution-dashboard,
.services .services-avantages {
  opacity: 0;
  visibility: hidden;
  filter: blur(7px);
  translate: 0 22px;
  scale: 0.975;
}

/*
  Les connexions commencent très discrètement.
*/

.services .services-connexion {
  opacity: 0;
  filter:
    brightness(0.65)
    saturate(0.8);
}

/*
  Dès que la section devient visible, tous les éléments
  atteignent leur état final.

  Les animations ci-dessous prennent temporairement le
  contrôle, puis libèrent complètement les propriétés.
*/

.services.visible .services-coeur,
.services.visible .solution-module,
.services.visible .solution-dashboard,
.services.visible .services-avantages {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  translate: 0 0;
  scale: 1;
}

/* ---------------------------------------------------------
   1. CŒUR IA — MISE SOUS TENSION
--------------------------------------------------------- */

.services.visible .services-coeur {
  animation:
    phase4-coeur-apparition
    0.72s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.04s
    backwards;
}

@keyframes phase4-coeur-apparition {
  from {
    opacity: 0;
    filter: blur(10px) brightness(1.35);
    translate: 0 16px;
    scale: 0.92;
  }

  58% {
    opacity: 1;
    filter: blur(1px) brightness(1.12);
    scale: 1.018;
  }

  to {
    opacity: 1;
    filter: blur(0) brightness(1);
    translate: 0 0;
    scale: 1;
  }
}

/* ---------------------------------------------------------
   2. CONNEXIONS — PROPAGATION DE L’ÉNERGIE
--------------------------------------------------------- */

.services.visible .services-connexion {
  animation:
    phase4-connexion-apparition
    0.62s
    ease-out
    backwards;
}

.services.visible .services-connexion-site {
  animation-delay: 0.18s;
}

.services.visible .services-connexion-ia {
  animation-delay: 0.25s;
}

.services.visible .services-connexion-automatisation {
  animation-delay: 0.32s;
}

.services.visible .services-connexion-crm {
  animation-delay: 0.39s;
}

.services.visible .services-connexion-dashboard {
  animation-delay: 0.46s;
}

@keyframes phase4-connexion-apparition {
  from {
    opacity: 0;
    filter:
      brightness(0.5)
      saturate(0.7)
      drop-shadow(0 0 0 transparent);
  }

  55% {
    opacity: 1;
    filter:
      brightness(1.55)
      saturate(1.3)
      drop-shadow(
        0 0 10px rgba(192, 132, 252, 0.75)
      );
  }

  to {
    opacity: 0.42;
    filter:
      brightness(0.78)
      saturate(0.9);
  }
}

/*
  L’impulsion présente dans chaque connexion apparaît
  légèrement après sa ligne.
*/

.services.visible .services-connexion > span {
  animation:
    phase4-impulsion-apparition
    0.5s
    ease-out
    backwards;
}

.services.visible .services-connexion-site > span {
  animation-delay: 0.25s;
}

.services.visible .services-connexion-ia > span {
  animation-delay: 0.32s;
}

.services.visible
.services-connexion-automatisation > span {
  animation-delay: 0.39s;
}

.services.visible .services-connexion-crm > span {
  animation-delay: 0.46s;
}

.services.visible
.services-connexion-dashboard > span {
  animation-delay: 0.53s;
}

@keyframes phase4-impulsion-apparition {
  from {
    opacity: 0;
    filter: brightness(0.7);
  }

  65% {
    opacity: 1;
    filter:
      brightness(1.7)
      drop-shadow(
        0 0 11px rgba(216, 180, 254, 0.9)
      );
  }

  to {
    opacity: 0.58;
    filter: none;
  }
}

/* ---------------------------------------------------------
   3. CARTES — APPARITION EN CASCADE
--------------------------------------------------------- */

.services.visible .solution-module,
.services.visible .solution-dashboard {
  animation:
    phase4-carte-apparition
    0.68s
    cubic-bezier(0.22, 1, 0.36, 1)
    backwards;
}

.services.visible .solution-site {
  animation-delay: 0.24s;
}

.services.visible .solution-ia {
  animation-delay: 0.32s;
}

.services.visible .solution-automatisation {
  animation-delay: 0.4s;
}

.services.visible .solution-crm {
  animation-delay: 0.48s;
}

.services.visible .solution-dashboard {
  animation-delay: 0.58s;
}

@keyframes phase4-carte-apparition {
  from {
    opacity: 0;
    visibility: visible;
    filter: blur(8px);
    translate: 0 24px;
    scale: 0.965;
  }

  72% {
    opacity: 1;
    filter: blur(0);
    translate: 0 -2px;
    scale: 1.004;
  }

  to {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
  }
}

/* ---------------------------------------------------------
   4. BARRE D’AVANTAGES — FERMETURE DE LA SÉQUENCE
--------------------------------------------------------- */

.services.visible .services-avantages {
  animation:
    phase4-avantages-apparition
    0.64s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.72s
    backwards;
}

@keyframes phase4-avantages-apparition {
  from {
    opacity: 0;
    visibility: visible;
    filter: blur(6px);
    translate: 0 18px;
    scale: 0.985;
  }

  to {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
  }
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1020px) {
  .services .services-coeur,
  .services .solution-module,
  .services .solution-dashboard,
  .services .services-avantages {
    translate: 0 18px;
  }

  .services.visible .solution-site {
    animation-delay: 0.18s;
  }

  .services.visible .solution-ia {
    animation-delay: 0.25s;
  }

  .services.visible .solution-automatisation {
    animation-delay: 0.32s;
  }

  .services.visible .solution-crm {
    animation-delay: 0.39s;
  }

  .services.visible .solution-dashboard {
    animation-delay: 0.46s;
  }

  .services.visible .services-avantages {
    animation-delay: 0.56s;
  }
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .services .services-coeur,
  .services .solution-module,
  .services .solution-dashboard,
  .services .services-avantages,
  .services .services-connexion,
  .services .services-connexion > span {
    opacity: 1;
    visibility: visible;
    filter: none;
    translate: none;
    scale: none;
    animation: none !important;
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1240px) {
  .services-architecture {
    min-height: 900px;
  }

  .solution-module {
    width: min(30%, 350px);
    padding: 25px;
  }

  .solution-module-entete {
    gap: 13px;
  }

  .solution-module-icone {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .solution-module-entete h3 {
    font-size: 1.02rem;
  }

  .solution-module li,
  .solution-dashboard li {
    font-size: 0.77rem;
  }

  .services-coeur {
    transform:
      translateX(-50%)
      scale(0.9);
    transform-origin: top center;
  }

  .solution-dashboard {
    width: min(48%, 580px);
  }

  .services-avantage {
    padding-inline: 18px;
  }
}

@media (max-width: 1020px) {
  .services-architecture {
    min-height: auto;
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 35px 24px;
  }

  .solution-module,
  .solution-dashboard,
  .services-coeur {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-height: auto;
    transform: none;
  }

  .solution-module:hover,
  .solution-module:focus-visible,
  .solution-dashboard:hover,
  .solution-dashboard:focus-visible {
    transform:
      translateY(-8px);
  }

  .services-coeur {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 300px;
    height: 390px;
    margin:
      0
      auto
      -30px;
    transform: scale(0.92);
  }

  .solution-site {
    grid-column: 1;
    grid-row: 2;
  }

  .solution-ia {
    grid-column: 2;
    grid-row: 2;
  }

  .solution-automatisation {
    grid-column: 1;
    grid-row: 3;
  }

  .solution-crm {
    grid-column: 2;
    grid-row: 3;
  }

  .solution-dashboard {
    grid-column: 1 / -1;
    grid-row: 4;
    width: min(100%, 700px);
    margin-inline: auto;
  }

  .services-connexion {
    display: none;
  }

  .services-architecture::after {
    width: 430px;
    height: 430px;
    top: 185px;
  }

  .services-avantages {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-avantage:nth-child(2)::after {
    display: none;
  }

  .services-avantage:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  }
}

@media (max-width: 680px) {
  .services {
    padding-top: 95px;
    padding-bottom: 105px;
  }

  .services-entete {
    margin-bottom: 50px;
  }

  .services-entete h2 {
    font-size: clamp(2.25rem, 10.5vw, 3.2rem);
  }

  .services-entete p {
    font-size: 0.94rem;
  }

  .services-architecture {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .services-coeur {
    grid-column: 1;
    grid-row: 1;
    transform: scale(0.8);
    margin-bottom: -75px;
  }

  .solution-site,
  .solution-ia,
  .solution-automatisation,
  .solution-crm,
  .solution-dashboard {
    grid-column: 1;
    grid-row: auto;
  }

  .solution-module {
    width: 100%;
    padding: 25px 22px 28px;
  }

  .solution-dashboard {
    width: 100%;
    padding: 25px 22px 28px;
  }

  .solution-dashboard-grille {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .solution-dashboard-courbe {
    min-height: 160px;
  }

  .services-architecture::before {
    width: 420px;
    height: 420px;
    top: 210px;
  }

  .services-architecture::after {
    width: 340px;
    height: 340px;
    top: 200px;
  }

  .services-avantages {
    grid-template-columns: 1fr;
  }

  .services-avantage {
    min-height: 90px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  }

  .services-avantage:last-child {
    border-bottom: 0;
  }

  .services-avantage::after {
    display: none;
  }

  .services-avantage:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  }
}

@media (max-width: 430px) {
  .services-coeur {
    transform: scale(0.72);
    margin-bottom: -105px;
  }

  .solution-module-entete {
    align-items: flex-start;
  }

  .solution-module-icone {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
  }

  .solution-module-entete h3 {
    font-size: 1rem;
  }

  .solution-module li,
  .solution-dashboard li {
    font-size: 0.78rem;
  }
}

/* =========================================================
   ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .services-orbite,
  .services-connexion span,
  .services-coeur-halo,
  .services-coeur-cube,
  .solution-dashboard-ligne {
    animation: none !important;
  }

  .services .solution-module,
  .services .solution-dashboard,
  .services .services-coeur,
  .services .services-avantages {
    opacity: 1;
    transition: none;
  }

  .solution-dashboard-ligne {
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   SPRINT 3 — INTERACTIONS FINALES OPTIMISÉES
========================================================= */

/*
  Les animations d’apparition ont déjà été jouées.
  Aucun délai ne doit rester sur les interactions.
*/

.services.visible .solution-module,
.services.visible .solution-dashboard {
  transition-delay: 0s !important;
}

/*
  Couche graphique stable.
  On évite les recompositions inutiles au premier hover.
*/

.solution-module,
.solution-dashboard {
  isolation: isolate;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform-style: flat;

  will-change: transform;
}

/*
  Le blur dynamique est la principale source
  de micro-blocages sur ces grandes cartes.

  Le fond est déjà suffisamment opaque pour conserver
  l’apparence glassmorphism sans ce calcul coûteux.
*/

.solution-module,
.solution-dashboard {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/*
  Transition premium :
  activation immédiate, mouvement progressif.
*/

.services.visible .solution-module,
.services.visible .solution-dashboard {
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    box-shadow 0.3s ease !important;
}

/*
  Le z-index reste fixe.
  Le changement de couche au moment du hover pouvait
  provoquer une recomposition graphique visible.
*/

.solution-module,
.solution-dashboard,
.solution-module:hover,
.solution-module:focus-visible,
.solution-dashboard:hover,
.solution-dashboard:focus-visible {
  z-index: 10;
}

/*
  Reflet interne léger.
  Il apparaît au survol mais ne force pas la carte entière
  à être recalculée.
*/

.solution-module::after,
.solution-dashboard::after {
  opacity: 0;
  transition: opacity 0.25s ease !important;
  will-change: opacity;
}

.solution-module:hover::after,
.solution-module:focus-visible::after,
.solution-dashboard:hover::after,
.solution-dashboard:focus-visible::after {
  opacity: 1;
}

/*
  Positions normales.
*/

.services.visible .solution-site {
  transform:
    perspective(1000px)
    rotateY(3deg)
    translateZ(0);
}

.services.visible .solution-ia {
  transform:
    perspective(1000px)
    rotateY(-3deg)
    translateZ(0);
}

.services.visible .solution-automatisation {
  transform:
    perspective(1000px)
    rotateY(3deg)
    translateZ(0);
}

.services.visible .solution-crm {
  transform:
    perspective(1000px)
    rotateY(-4deg)
    translateZ(0);
}

/*
  Survol stable.

  La carte monte très légèrement, mais suffisamment peu
  pour que sa zone de survol reste sous le pointeur.
*/

.services.visible .solution-site:hover,
.services.visible .solution-site:focus-visible {
  transform:
    perspective(1000px)
    rotateY(1deg)
    translate3d(0, -5px, 18px)
    scale(1.012);
}

.services.visible .solution-ia:hover,
.services.visible .solution-ia:focus-visible {
  transform:
    perspective(1000px)
    rotateY(-1deg)
    translate3d(0, -5px, 18px)
    scale(1.012);
}

.services.visible .solution-automatisation:hover,
.services.visible .solution-automatisation:focus-visible {
  transform:
    perspective(1000px)
    rotateY(1deg)
    translate3d(0, -5px, 18px)
    scale(1.012);
}

.services.visible .solution-crm:hover,
.services.visible .solution-crm:focus-visible {
  transform:
    perspective(1000px)
    rotateY(-1deg)
    translate3d(0, -5px, 18px)
    scale(1.012);
}

.services.visible .solution-dashboard:hover,
.services.visible .solution-dashboard:focus-visible {
  transform:
    translateX(-50%)
    perspective(1000px)
    rotateX(0deg)
    translate3d(0, -5px, 20px)
    scale(1.008);
}

/*
  Les icônes et les listes gardent leur mouvement premium.
*/

.solution-module-icone {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease !important;
}

.solution-module li,
.solution-dashboard li {
  transition:
    color 0.24s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/*
  Le grand halo central reste fixe.
  Modifier son gradient à chaque mouvement était coûteux.
*/

.services-architecture::before {
  transition: none !important;
}

/* =========================================================
   PHASE 4.1 — CONNEXIONS VIVANTES DE L’ÉCOSYSTÈME
========================================================= */

/*
  État de base des connexions.

  On anime uniquement l’opacité, le filtre et les ombres.
  Les positions et rotations existantes ne sont jamais
  remplacées, afin de préserver l’architecture actuelle.
*/

.services-connexion {
  opacity: 0.42;

  filter:
    brightness(0.78)
    saturate(0.9);

  transition:
    opacity 0.34s ease,
    filter 0.34s ease,
    box-shadow 0.34s ease;

  will-change: opacity, filter;
}

/*
  L’énergie qui circule à l’intérieur des lignes reste
  discrète lorsque rien n’est sélectionné.
*/

.services-connexion > span {
  opacity: 0.58;

  transition:
    opacity 0.3s ease,
    filter 0.3s ease;

  will-change: opacity, filter;
}

/*
  Une connexion active devient plus nette et lumineuse.

  Aucun transform n’est appliqué ici : cela évite de casser
  les rotations et positions propres à chaque ligne.
*/

.services-connexion.est-active {
  z-index: 4;
  opacity: 1;

  filter:
  brightness(1.38)
  saturate(1.22)
  drop-shadow(0 0 4px rgba(216, 180, 254, 0.82))
  drop-shadow(0 0 11px rgba(168, 85, 247, 0.58))
  drop-shadow(0 0 22px rgba(124, 58, 237, 0.3));
}

/*
  L’impulsion lumineuse devient plus visible lorsque
  la connexion est active.
*/

.services-connexion.est-active > span {
  opacity: 1;

  filter:
    brightness(1.55)
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 13px rgba(192, 132, 252, 0.95));
}

/*
  Carte actuellement reliée au cube.

  Ces propriétés complètent le hover existant sans modifier
  son mouvement ni réintroduire de latence.
*/

.solution-module.est-reliee,
.solution-dashboard.est-reliee {
  border-color:
    rgba(var(--module-accent), 0.68) !important;

  box-shadow:
    0 32px 82px rgba(0, 0, 0, 0.46),
    0 0 32px rgba(var(--module-accent), 0.17),
    0 0 68px rgba(var(--module-accent), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/*
  La ligne lumineuse placée en haut de la carte devient
  plus intense quand la carte communique avec le cube.
*/

.solution-module.est-reliee::before,
.solution-dashboard.est-reliee::before {
  opacity: 1;
}

/*
  Réaction du halo central.

  On anime seulement son opacité et son échelle :
  aucun gradient n’est recalculé en permanence.
*/

.services-coeur-halo {
  transition:
    opacity 0.38s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.38s ease;
}

.services-coeur.est-active .services-coeur-halo {
  opacity: 1;

  filter:
    blur(18px)
    brightness(1.22);

  transform:
    translate(-50%, -50%)
    scale(1.11);
}

/*
  Les socles du cœur gagnent légèrement en intensité.
*/

.services-coeur-socle {
  transition:
    border-color 0.36s ease,
    box-shadow 0.4s ease;
}

.services-coeur.est-active .services-coeur-socle {
  border-color:
    rgba(232, 210, 255, 0.76);

  box-shadow:
    0 0 18px rgba(216, 180, 254, 0.75),
    0 0 58px rgba(168, 85, 247, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/*
  Le cube réagit avec une légère augmentation de contraste.
  Son animation de flottement actuelle reste intacte.
*/

.services-coeur-face {
  transition:
    border-color 0.36s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.services-coeur.est-active .services-coeur-face {
  border-color:
    rgba(239, 218, 255, 0.92);

  background:
    linear-gradient(
      150deg,
      rgba(168, 85, 247, 0.34),
      rgba(28, 20, 56, 0.82)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 48px rgba(139, 92, 246, 0.2),
    0 0 20px rgba(216, 180, 254, 0.75),
    0 0 55px rgba(139, 92, 246, 0.36);
}

/*
  Le sigle IA devient momentanément plus lumineux.
*/

.services-coeur-face-avant strong {
  transition:
    filter 0.38s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.services-coeur.est-active
.services-coeur-face-avant strong {
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 24px rgba(192, 132, 252, 0.72));

  transform: scale(1.035);
}

/*
  Les cartes non concernées restent visibles.

  On n’utilise pas d’opacité réduite afin d’éviter
  l’impression que la section s’éteint au survol.
*/

.services-architecture.a-une-connexion
.solution-module:not(.est-reliee),
.services-architecture.a-une-connexion
.solution-dashboard:not(.est-reliee) {
  filter: brightness(0.94);
}

/*
  Retour progressif à l’état normal.
*/

.solution-module,
.solution-dashboard {
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    box-shadow 0.3s ease,
    filter 0.28s ease !important;
}

/*
  Sur tablette et mobile, les connexions décoratives
  sont masquées dans la composition actuelle.
  Aucun comportement supplémentaire n’est nécessaire.
*/

@media (max-width: 1020px) {
  .services-architecture.a-une-connexion
  .solution-module:not(.est-reliee),
  .services-architecture.a-une-connexion
  .solution-dashboard:not(.est-reliee) {
    filter: none;
  }
}

/*
  Accessibilité : aucune animation forcée lorsque
  l’utilisateur préfère réduire les mouvements.
*/

@media (prefers-reduced-motion: reduce) {
  .services-connexion,
  .services-connexion > span,
  .services-coeur-halo,
  .services-coeur-socle,
  .services-coeur-face,
  .services-coeur-face-avant strong {
    transition: none !important;
  }
}

/* =========================================================
   PHASE 4.3 — DASHBOARD VIVANT
========================================================= */

/*
  Le moteur de la Phase 4.3 prend le contrôle du graphique.

  L’ancienne animation automatique de 2,2 secondes est
  désactivée afin d’éviter qu’elle se joue en même temps.
*/

.services .solution-dashboard-ligne {
  animation: none !important;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;

  transition:
    stroke-dashoffset 0.92s
    cubic-bezier(0.22, 1, 0.36, 1);

  will-change: stroke-dashoffset;
}

/*
  La surface située sous la courbe reste invisible avant
  l’activation du dashboard.
*/

.services .solution-dashboard-zone {
  opacity: 0;

  transition:
    opacity 0.62s ease,
    filter 0.62s ease;

  filter: brightness(0.85);
}

/*
  Les bénéfices sont préparés pour une activation en cascade.
  On utilise opacity et transform uniquement : le coût
  graphique reste très faible.
*/

.services .solution-dashboard li {
  opacity: 0;
  transform: translateX(-8px);

  transition:
    opacity 0.38s ease,
    transform 0.46s
    cubic-bezier(0.22, 1, 0.36, 1),
    color 0.28s ease !important;

  will-change: opacity, transform;
}

/*
  Le chiffre principal reste présent dans le document,
  mais légèrement atténué avant le comptage.
*/

.services .solution-dashboard-courbe > strong {
  opacity: 0.25;
  transform: translateY(5px) scale(0.96);

  transition:
    opacity 0.3s ease,
    transform 0.42s
    cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.3s ease;

  transform-origin: left center;
  will-change: opacity, transform;
}

/* ---------------------------------------------------------
   DASHBOARD ACTIVÉ
--------------------------------------------------------- */

.services
.solution-dashboard.dashboard-anime
.solution-dashboard-ligne {
  stroke-dashoffset: 0;

  filter:
    drop-shadow(
      0 0 4px rgba(216, 180, 254, 0.72)
    )
    drop-shadow(
      0 0 10px rgba(168, 85, 247, 0.38)
    );
}

.services
.solution-dashboard.dashboard-anime
.solution-dashboard-zone {
  opacity: 0.75;
  filter: brightness(1);
}

/*
  Chaque élément de la liste reçoit cette classe séparément
  depuis JavaScript.
*/

.services
.solution-dashboard
li.dashboard-element-actif {
  opacity: 1;
  transform: translateX(0);
}

/*
  Le chiffre devient totalement visible dès le début
  du comptage.
*/

.services
.solution-dashboard.dashboard-anime
.solution-dashboard-courbe > strong {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*
  Petite impulsion finale quand le compteur atteint 127 %.
*/

.services
.solution-dashboard-courbe > strong.dashboard-compteur-termine {
  animation:
    dashboard-compteur-pop
    0.42s
    cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dashboard-compteur-pop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  48% {
    transform: scale(1.055);
    filter:
      brightness(1.3)
      drop-shadow(
        0 0 10px rgba(192, 132, 252, 0.58)
      );
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/*
  Léger éclat de validation autour du graphique.
*/

.services
.solution-dashboard.dashboard-anime
.solution-dashboard-courbe {
  animation:
    dashboard-courbe-validation
    0.7s
    ease-out
    0.72s
    both;
}

@keyframes dashboard-courbe-validation {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.075);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  55% {
    border-color: rgba(192, 132, 252, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 0 24px rgba(139, 92, 246, 0.1);
  }
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .services .solution-dashboard-ligne {
    stroke-dashoffset: 0;
    transition: none !important;
    filter: none;
  }

  .services .solution-dashboard-zone {
    opacity: 0.75;
    filter: none;
    transition: none !important;
  }

  .services .solution-dashboard li {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .services .solution-dashboard-courbe > strong {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
    transition: none !important;
  }

  .services
  .solution-dashboard.dashboard-anime
  .solution-dashboard-courbe {
    animation: none !important;
  }
}

/* =========================================================
   PHASE 4.5 — IMPULSION DU CŒUR ET SIGNATURES VISUELLES
========================================================= */

/* ---------------------------------------------------------
   IMPULSION AVANT L’ACTIVATION
--------------------------------------------------------- */

.services-coeur.prepare-impulsion
.services-coeur-halo {
  opacity: 1;

  filter:
    blur(18px)
    brightness(1.42);

  transform:
    translate(-50%, -50%)
    scale(1.16);
}

.services-coeur.prepare-impulsion
.services-coeur-face {
  border-color:
    rgba(245, 232, 255, 0.96);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 48px rgba(139, 92, 246, 0.26),
    0 0 18px rgba(255, 255, 255, 0.38),
    0 0 42px rgba(192, 132, 252, 0.62),
    0 0 78px rgba(124, 58, 237, 0.3);
}

.services-coeur.prepare-impulsion
.services-coeur-face-avant strong {
  filter:
    brightness(1.25)
    drop-shadow(
      0 0 9px rgba(255, 255, 255, 0.62)
    )
    drop-shadow(
      0 0 25px rgba(192, 132, 252, 0.85)
    );

  transform: scale(1.055);
}

/* ---------------------------------------------------------
   ÉNERGIE PLUS ORGANIQUE DANS LA CONNEXION ACTIVE
--------------------------------------------------------- */

.services-connexion.est-active > span {
  animation-duration: 1.42s;

  box-shadow:
    0 0 7px #ffffff,
    0 0 17px #f0abfc,
    0 0 34px rgba(192, 132, 252, 0.9),
    0 0 58px rgba(124, 58, 237, 0.42);
}

.services-connexion.est-active::before {
  opacity: 0.48;

  animation:
    services-connexion-respiration
    1.45s
    ease-in-out
    infinite;
}

@keyframes services-connexion-respiration {
  0%,
  100% {
    opacity: 0.22;
    filter: blur(8px);
  }

  50% {
    opacity: 0.52;
    filter:
      blur(10px)
      brightness(1.2);
  }
}

/* ---------------------------------------------------------
   SIGNATURE — SITE WEB
--------------------------------------------------------- */

.services-architecture.signature-site
.solution-site.signature-active::after {
  opacity: 1;

  background:
    linear-gradient(
      115deg,
      transparent 18%,
      rgba(255, 255, 255, 0.09) 43%,
      rgba(192, 132, 252, 0.14) 52%,
      transparent 76%
    );

  animation:
    signature-site-reflet
    0.82s
    ease-out;
}

@keyframes signature-site-reflet {
  from {
    transform: translateX(-28%);
  }

  to {
    transform: translateX(28%);
  }
}

/* ---------------------------------------------------------
   SIGNATURE — INTELLIGENCE ARTIFICIELLE
--------------------------------------------------------- */

.services-architecture.signature-ia
.solution-ia.signature-active
.solution-module-icone {
  animation:
    signature-ia-halo
    0.9s
    ease-in-out;
}

@keyframes signature-ia-halo {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter:
      brightness(1.35)
      drop-shadow(
        0 0 15px rgba(216, 180, 254, 0.7)
      );
  }
}

/* ---------------------------------------------------------
   SIGNATURE — AUTOMATISATION
--------------------------------------------------------- */

.services-architecture.signature-automatisation
.solution-automatisation.signature-active
.solution-module-icone {
  animation:
    signature-automatisation-impulsion
    0.62s
    cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes signature-automatisation-impulsion {
  0% {
    transform:
      translateY(0)
      rotate(0)
      scale(1);
  }

  48% {
    transform:
      translateY(-4px)
      rotate(-5deg)
      scale(1.09);
  }

  100% {
    transform:
      translateY(-4px)
      rotate(-4deg)
      scale(1);
  }
}

/* ---------------------------------------------------------
   SIGNATURE — CRM
--------------------------------------------------------- */

.services-architecture.signature-crm
.solution-crm.signature-active li {
  animation:
    signature-crm-ligne
    0.46s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.services-architecture.signature-crm
.solution-crm.signature-active li:nth-child(2) {
  animation-delay: 0.04s;
}

.services-architecture.signature-crm
.solution-crm.signature-active li:nth-child(3) {
  animation-delay: 0.08s;
}

.services-architecture.signature-crm
.solution-crm.signature-active li:nth-child(4) {
  animation-delay: 0.12s;
}

.services-architecture.signature-crm
.solution-crm.signature-active li:nth-child(5) {
  animation-delay: 0.16s;
}

@keyframes signature-crm-ligne {
  0% {
    opacity: 0.62;
    transform: translateX(0);
  }

  55% {
    opacity: 1;
    transform: translateX(7px);
  }

  100% {
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   SIGNATURE — TABLEAU DE BORD
--------------------------------------------------------- */

.services-architecture.signature-dashboard
.solution-dashboard.signature-active
.solution-dashboard-courbe {
  animation:
    signature-dashboard-validation
    0.78s
    ease-out;
}

.services-architecture.signature-dashboard
.solution-dashboard.signature-active
.solution-dashboard-ligne {
  filter:
    drop-shadow(
      0 0 5px rgba(255, 255, 255, 0.5)
    )
    drop-shadow(
      0 0 13px rgba(192, 132, 252, 0.7)
    );
}

.services-architecture.signature-dashboard
.solution-dashboard.signature-active
.solution-dashboard-courbe > strong {
  animation:
    signature-dashboard-chiffre
    0.58s
    cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes signature-dashboard-validation {
  0%,
  100% {
    border-color:
      rgba(255, 255, 255, 0.075);
  }

  50% {
    border-color:
      rgba(192, 132, 252, 0.38);

    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, 0.06),
      0 0 28px
      rgba(139, 92, 246, 0.15);
  }
}

@keyframes signature-dashboard-chiffre {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.055);

    filter:
      brightness(1.28)
      drop-shadow(
        0 0 9px rgba(192, 132, 252, 0.58)
      );
  }
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .services-coeur.prepare-impulsion
  .services-coeur-halo,
  .services-coeur.prepare-impulsion
  .services-coeur-face,
  .services-coeur.prepare-impulsion
  .services-coeur-face-avant strong,
  .services-connexion.est-active::before,
  .services-architecture
  .signature-active,
  .services-architecture
  .signature-active *,
  .services-architecture
  .signature-active::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SPRINT 3.6.1 — PULSE ENGINE FINAL
========================================================= */

/* ---------------------------------------------------------
   ÉTAPE 1 — COMPRESSION DE L’ÉNERGIE
--------------------------------------------------------- */

.services-coeur.coeur-compresse
.services-coeur-halo {
  opacity: 0.88;

  filter:
    blur(14px)
    brightness(1.2);

  transform:
    translate(-50%, -50%)
    scale(0.88);

  transition:
    opacity 90ms ease-out,
    filter 90ms ease-out,
    transform 90ms cubic-bezier(
      0.55,
      0,
      1,
      0.45
    );
}

.services-coeur.coeur-compresse
.services-coeur-face {
  transform: scale(0.975);

  border-color:
    rgba(216, 180, 254, 0.82);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 32px rgba(139, 92, 246, 0.28),
    0 0 14px rgba(192, 132, 252, 0.34),
    0 0 36px rgba(124, 58, 237, 0.24);

  transition:
    transform 90ms cubic-bezier(
      0.55,
      0,
      1,
      0.45
    ),
    border-color 90ms ease-out,
    box-shadow 90ms ease-out;
}

.services-coeur.coeur-compresse
.services-coeur-face-avant strong {
  transform: scale(0.94);

  filter:
    brightness(1.05)
    drop-shadow(
      0 0 8px rgba(192, 132, 252, 0.48)
    );

  transition:
    transform 90ms ease-out,
    filter 90ms ease-out;
}

/* ---------------------------------------------------------
   ÉTAPE 2 — LIBÉRATION DE L’IMPULSION
--------------------------------------------------------- */

.services-coeur.coeur-emet
.services-coeur-halo {
  animation:
    coeur-emission-halo
    320ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    both;
}

.services-coeur.coeur-emet
.services-coeur-face {
  animation:
    coeur-emission-face
    320ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    both;
}

.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  animation:
    coeur-emission-symbole
    300ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    both;
}

@keyframes coeur-emission-halo {
  0% {
    opacity: 0.9;

    filter:
      blur(14px)
      brightness(1.2);

    transform:
      translate(-50%, -50%)
      scale(0.88);
  }

  32% {
    opacity: 1;

    filter:
      blur(20px)
      brightness(1.75);

    transform:
      translate(-50%, -50%)
      scale(1.28);
  }

  100% {
    opacity: 0.82;

    filter:
      blur(18px)
      brightness(1.18);

    transform:
      translate(-50%, -50%)
      scale(1.04);
  }
}

@keyframes coeur-emission-face {
  0% {
    transform: scale(0.975);
  }

  32% {
    transform: scale(1.035);

    border-color:
      rgba(255, 255, 255, 0.98);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 0 52px rgba(139, 92, 246, 0.32),
      0 0 18px rgba(255, 255, 255, 0.46),
      0 0 48px rgba(192, 132, 252, 0.72),
      0 0 90px rgba(124, 58, 237, 0.38);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes coeur-emission-symbole {
  0% {
    transform: scale(0.94);
  }

  38% {
    transform: scale(1.075);

    filter:
      brightness(1.5)
      drop-shadow(
        0 0 8px rgba(255, 255, 255, 0.78)
      )
      drop-shadow(
        0 0 25px rgba(192, 132, 252, 0.95)
      );
  }

  100% {
    transform: scale(1);

    filter:
      brightness(1.12)
      drop-shadow(
        0 0 14px rgba(192, 132, 252, 0.5)
      );
  }
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .services-coeur.coeur-compresse
  .services-coeur-halo,
  .services-coeur.coeur-compresse
  .services-coeur-face,
  .services-coeur.coeur-compresse
  .services-coeur-face-avant strong,
  .services-coeur.coeur-emet
  .services-coeur-halo,
  .services-coeur.coeur-emet
  .services-coeur-face,
  .services-coeur.coeur-emet
  .services-coeur-face-avant strong {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SPRINT 3.6.1 — BATTEMENT DU CŒUR V2
   Double impulsion lumineuse, sans saut du cube
========================================================= */

/* Le cube ne se contracte plus brutalement */
.services-coeur.coeur-compresse
.services-coeur-face {
  transform: scale(0.995);
  transition:
    transform 100ms ease-out,
    border-color 100ms ease-out,
    box-shadow 100ms ease-out;
}

.services-coeur.coeur-compresse
.services-coeur-face-avant strong {
  transform: scale(0.99);
}

/* Le halo prépare doucement l’impulsion */
.services-coeur.coeur-compresse
.services-coeur-halo {
  opacity: 0.78;

  filter:
    blur(18px)
    brightness(1.12);

  transform:
    translate(-50%, -50%)
    scale(0.98);

  transition:
    opacity 100ms ease-out,
    filter 100ms ease-out,
    transform 100ms ease-out;
}

/* Double battement lumineux */
.services-coeur.coeur-emet
.services-coeur-halo {
  animation:
    coeur-double-battement-halo
    440ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.services-coeur.coeur-emet
.services-coeur-face {
  animation:
    coeur-double-battement-face
    440ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  animation:
    coeur-double-battement-symbole
    440ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes coeur-double-battement-halo {
  0% {
    opacity: 0.76;

    filter:
      blur(18px)
      brightness(1.08);

    transform:
      translate(-50%, -50%)
      scale(0.98);
  }

  /* Premier battement */
  20% {
    opacity: 0.94;

    filter:
      blur(19px)
      brightness(1.32);

    transform:
      translate(-50%, -50%)
      scale(1.06);
  }

  /* Micro-relâchement */
  38% {
    opacity: 0.82;

    filter:
      blur(18px)
      brightness(1.14);

    transform:
      translate(-50%, -50%)
      scale(1.01);
  }

  /* Deuxième battement, plus puissant */
  62% {
    opacity: 1;

    filter:
      blur(21px)
      brightness(1.62);

    transform:
      translate(-50%, -50%)
      scale(1.14);
  }

  100% {
    opacity: 0.84;

    filter:
      blur(18px)
      brightness(1.18);

    transform:
      translate(-50%, -50%)
      scale(1.04);
  }
}

@keyframes coeur-double-battement-face {
  0% {
    transform: scale(0.995);
  }

  20% {
    transform: scale(1.008);
  }

  38% {
    transform: scale(1);
  }

  62% {
    transform: scale(1.018);

    border-color:
      rgba(255, 255, 255, 0.96);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 0 48px rgba(139, 92, 246, 0.28),
      0 0 16px rgba(255, 255, 255, 0.34),
      0 0 44px rgba(192, 132, 252, 0.66),
      0 0 78px rgba(124, 58, 237, 0.32);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes coeur-double-battement-symbole {
  0% {
    transform: scale(0.99);
    filter: brightness(1.05);
  }

  20% {
    transform: scale(1.015);

    filter:
      brightness(1.2)
      drop-shadow(
        0 0 10px rgba(192, 132, 252, 0.55)
      );
  }

  38% {
    transform: scale(1);
    filter: brightness(1.08);
  }

  62% {
    transform: scale(1.035);

    filter:
      brightness(1.42)
      drop-shadow(
        0 0 8px rgba(255, 255, 255, 0.65)
      )
      drop-shadow(
        0 0 22px rgba(192, 132, 252, 0.88)
      );
  }

  100% {
    transform: scale(1);

    filter:
      brightness(1.12)
      drop-shadow(
        0 0 12px rgba(192, 132, 252, 0.48)
      );
  }
}

/* =========================================================
   SPRINT 3.6.1 — ÉMISSION STABLE
   Le cœur reste fixe, seule la lumière réagit
========================================================= */

.services-coeur.coeur-compresse
.services-coeur-halo,
.services-coeur.coeur-compresse
.services-coeur-face,
.services-coeur.coeur-compresse
.services-coeur-face-avant strong {
  animation: none !important;
  transform: none !important;
}

/* Le cube reste parfaitement stable */
.services-coeur.coeur-emet
.services-coeur-face {
  animation: none !important;
  transform: none !important;
}

/* Seul le symbole interne s’illumine légèrement */
.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  animation:
    coeur-flash-stable
    260ms
    ease-out
    both;
}

/* Le halo diffuse l’énergie sans effet de pulsation */
.services-coeur.coeur-emet
.services-coeur-halo {
  animation:
    coeur-halo-stable
    260ms
    ease-out
    both;
}

@keyframes coeur-flash-stable {
  0% {
    filter:
      brightness(1.05)
      drop-shadow(
        0 0 10px rgba(192, 132, 252, 0.42)
      );
  }

  35% {
    filter:
      brightness(1.42)
      drop-shadow(
        0 0 8px rgba(255, 255, 255, 0.62)
      )
      drop-shadow(
        0 0 22px rgba(192, 132, 252, 0.82)
      );
  }

  100% {
    filter:
      brightness(1.12)
      drop-shadow(
        0 0 12px rgba(192, 132, 252, 0.48)
      );
  }
}

@keyframes coeur-halo-stable {
  0% {
    opacity: 0.78;
    filter:
      blur(18px)
      brightness(1.08);

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  40% {
    opacity: 1;
    filter:
      blur(20px)
      brightness(1.42);

    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

  100% {
    opacity: 0.84;
    filter:
      blur(18px)
      brightness(1.16);

    transform:
      translate(-50%, -50%)
      scale(1.02);
  }
}

/* =========================================================
   SPRINT 3.6.2 — RÉACTEUR LUMINEUX ET PARTICULES
========================================================= */

/* ---------------------------------------------------------
   CUBE TOTALEMENT STABLE
--------------------------------------------------------- */

.services-coeur.prepare-impulsion
.services-coeur-face,
.services-coeur.coeur-compresse
.services-coeur-face,
.services-coeur.coeur-emet
.services-coeur-face {
  transform: none !important;
  animation: none !important;
}

/*
  Le symbole ne change plus de taille.
  Seule sa lumière varie.
*/

.services-coeur.prepare-impulsion
.services-coeur-face-avant strong,
.services-coeur.coeur-compresse
.services-coeur-face-avant strong,
.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  transform: none !important;
}

/* ---------------------------------------------------------
   MONTÉE EN ÉNERGIE
--------------------------------------------------------- */

.services-coeur.prepare-impulsion
.services-coeur-halo {
  animation: none !important;

  opacity: 0.9;

  filter:
    blur(19px)
    brightness(1.22);

  transform:
    translate(-50%, -50%)
    scale(1.025);

  transition:
    opacity 90ms ease-out,
    filter 90ms ease-out,
    transform 90ms ease-out;
}

/* ---------------------------------------------------------
   ÉMISSION LUMINEUSE
--------------------------------------------------------- */

.services-coeur.coeur-emet
.services-coeur-halo {
  animation:
    reacteur-halo-emission
    320ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both !important;
}

.services-coeur.coeur-emet
.services-coeur-face-avant {
  animation:
    reacteur-face-emission
    320ms
    ease-out
    both !important;
}

.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  animation:
    reacteur-symbole-emission
    320ms
    ease-out
    both !important;
}

@keyframes reacteur-halo-emission {
  0% {
    opacity: 0.86;

    filter:
      blur(18px)
      brightness(1.12);

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  28% {
    opacity: 1;

    filter:
      blur(21px)
      brightness(1.72);

    transform:
      translate(-50%, -50%)
      scale(1.09);
  }

  100% {
    opacity: 0.84;

    filter:
      blur(18px)
      brightness(1.14);

    transform:
      translate(-50%, -50%)
      scale(1.02);
  }
}

@keyframes reacteur-face-emission {
  0% {
    border-color:
      rgba(192, 132, 252, 0.62);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 38px rgba(139, 92, 246, 0.2),
      0 0 24px rgba(139, 92, 246, 0.32);
  }

  32% {
    border-color:
      rgba(255, 255, 255, 0.96);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 0 54px rgba(139, 92, 246, 0.34),
      0 0 15px rgba(255, 255, 255, 0.44),
      0 0 42px rgba(192, 132, 252, 0.68),
      0 0 82px rgba(124, 58, 237, 0.34);
  }

  100% {
    border-color:
      rgba(192, 132, 252, 0.7);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 42px rgba(139, 92, 246, 0.24),
      0 0 30px rgba(139, 92, 246, 0.36);
  }
}

@keyframes reacteur-symbole-emission {
  0% {
    filter:
      brightness(1.05)
      drop-shadow(
        0 0 10px rgba(192, 132, 252, 0.4)
      );
  }

  30% {
    filter:
      brightness(1.55)
      drop-shadow(
        0 0 7px rgba(255, 255, 255, 0.78)
      )
      drop-shadow(
        0 0 24px rgba(192, 132, 252, 0.94)
      );
  }

  100% {
    filter:
      brightness(1.14)
      drop-shadow(
        0 0 13px rgba(192, 132, 252, 0.5)
      );
  }
}

/* ---------------------------------------------------------
   PARTICULES ÉNERGÉTIQUES
--------------------------------------------------------- */

.services-coeur-particule {
  position: absolute;

  z-index: 30;

  top: 48%;
  left: 50%;

  width:
    var(
      --particule-taille,
      3px
    );

  height:
    var(
      --particule-taille,
      3px
    );

  pointer-events: none;

  border-radius: 999px;

  opacity: 0;

  background:
    radial-gradient(
      circle,
      #ffffff 0%,
      #f5d0fe 28%,
      #c084fc 58%,
      rgba(139, 92, 246, 0) 100%
    );

  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.95),
    0 0 11px rgba(240, 171, 252, 0.88),
    0 0 21px rgba(139, 92, 246, 0.62);

  transform:
    translate(-50%, -50%)
    translate3d(0, 0, 0)
    scale(0.45);

  animation:
    reacteur-particule-propage
    var(
      --particule-duree,
      520ms
    )
    cubic-bezier(0.18, 0.72, 0.22, 1)
    var(
      --particule-retard,
      0ms
    )
    both;
}

.services-coeur-particule:nth-of-type(2n) {
  filter: blur(0.35px);
}

.services-coeur-particule:nth-of-type(3n) {
  opacity: 0.78;
}

@keyframes reacteur-particule-propage {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      translate3d(0, 0, 0)
      scale(0.35);
  }

  12% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      translate3d(
        calc(
          var(--particule-x) * 0.08
        ),
        calc(
          var(--particule-y) * 0.08
        ),
        0
      )
      scale(1.05);
  }

  62% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      translate3d(
        var(--particule-x),
        var(--particule-y),
        0
      )
      scale(0.28);
  }
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .services-coeur-particule {
    display: none !important;
  }

  .services-coeur.prepare-impulsion
  .services-coeur-halo,
  .services-coeur.coeur-emet
  .services-coeur-halo,
  .services-coeur.coeur-emet
  .services-coeur-face-avant,
  .services-coeur.coeur-emet
  .services-coeur-face-avant strong {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SPRINT 3.6.2 — CŒUR PARFAITEMENT IMMOBILE
========================================================= */

/*
  Le cœur conserve exactement sa position et son angle
  d’origine. Aucune activation ne doit modifier sa géométrie.
*/

.services-coeur-cube {
  animation: none !important;

  transform:
    translateX(-50%)
    rotateX(-3deg)
    rotateY(-4deg) !important;
}

/*
  Les faces et les socles restent parfaitement fixes.
  On conserve leurs transformations 3D d’origine.
*/

.services-coeur-face,
.services-coeur-socle {
  animation: none !important;
}

/*
  Le symbole IA ne grandit plus lors de l’état actif.
*/

.services-coeur.est-active
.services-coeur-face-avant strong,
.services-coeur.prepare-impulsion
.services-coeur-face-avant strong,
.services-coeur.coeur-compresse
.services-coeur-face-avant strong,
.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  transform: none !important;
}

/*
  On empêche toute transition accidentelle sur la position.
  Seules la lumière, la bordure et les ombres peuvent changer.
*/

.services-coeur-face {
  transition:
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    background 0.32s ease,
    filter 0.32s ease !important;
}

.services-coeur-socle {
  transition:
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    filter 0.32s ease !important;
}

.services-coeur-face-avant strong {
  transition:
    filter 0.3s ease !important;
}

/*
  Le halo peut respirer lumineusement,
  mais sa taille reste fixe.
*/

.services-coeur-halo {
  animation: none !important;

  transform:
    translate(-50%, -50%)
    scale(1) !important;

  transition:
    opacity 0.3s ease,
    filter 0.3s ease !important;
}

.services-coeur.est-active
.services-coeur-halo,
.services-coeur.prepare-impulsion
.services-coeur-halo,
.services-coeur.coeur-emet
.services-coeur-halo {
  transform:
    translate(-50%, -50%)
    scale(1) !important;
}

/*
  Neutralisation complète des anciennes animations
  de battement encore présentes dans le fichier.
*/

.services-coeur.coeur-compresse
.services-coeur-face,
.services-coeur.coeur-emet
.services-coeur-face,
.services-coeur.prepare-impulsion
.services-coeur-face {
  animation: none !important;
}

.services-coeur.coeur-compresse
.services-coeur-face-avant strong,
.services-coeur.coeur-emet
.services-coeur-face-avant strong,
.services-coeur.prepare-impulsion
.services-coeur-face-avant strong {
  animation: none !important;
}

/* =========================================================
   CORRECTION FINALE — CŒUR 100 % FIXE
========================================================= */

/* Le groupe complet du cube ne bouge jamais */

.services-coeur-cube,
.services-coeur.est-active .services-coeur-cube,
.services-coeur.prepare-impulsion .services-coeur-cube,
.services-coeur.coeur-compresse .services-coeur-cube,
.services-coeur.coeur-emet .services-coeur-cube {
  animation: none !important;

  transform:
    translateX(-50%)
    rotateX(-3deg)
    rotateY(-4deg) !important;

  transition: none !important;
}

/* La face avant reste fixe */

.services-coeur-face-avant,
.services-coeur.est-active .services-coeur-face-avant,
.services-coeur.prepare-impulsion .services-coeur-face-avant,
.services-coeur.coeur-compresse .services-coeur-face-avant,
.services-coeur.coeur-emet .services-coeur-face-avant {
  transform: none !important;
  animation: none !important;
}

/* La face droite conserve TOUJOURS sa géométrie 3D */

.services-coeur-face-droite,
.services-coeur.est-active .services-coeur-face-droite,
.services-coeur.prepare-impulsion .services-coeur-face-droite,
.services-coeur.coeur-compresse .services-coeur-face-droite,
.services-coeur.coeur-emet .services-coeur-face-droite {
  transform: skewY(43deg) !important;
  animation: none !important;
  transition: none !important;
}

/* La face supérieure conserve TOUJOURS sa géométrie 3D */

.services-coeur-face-haut,
.services-coeur.est-active .services-coeur-face-haut,
.services-coeur.prepare-impulsion .services-coeur-face-haut,
.services-coeur.coeur-compresse .services-coeur-face-haut,
.services-coeur.coeur-emet .services-coeur-face-haut {
  transform: skewX(-43deg) !important;
  animation: none !important;
  transition: none !important;
}

/* Les deux socles restent totalement immobiles */

.services-coeur-socle-bas,
.services-coeur.est-active .services-coeur-socle-bas,
.services-coeur.prepare-impulsion .services-coeur-socle-bas,
.services-coeur.coeur-compresse .services-coeur-socle-bas,
.services-coeur.coeur-emet .services-coeur-socle-bas {
  transform:
    translateX(-50%)
    rotateX(58deg)
    rotateZ(45deg) !important;

  animation: none !important;
  transition: none !important;
}

.services-coeur-socle-haut,
.services-coeur.est-active .services-coeur-socle-haut,
.services-coeur.prepare-impulsion .services-coeur-socle-haut,
.services-coeur.coeur-compresse .services-coeur-socle-haut,
.services-coeur.coeur-emet .services-coeur-socle-haut {
  transform:
    translateX(-50%)
    rotateX(58deg)
    rotateZ(45deg) !important;

  animation: none !important;
  transition: none !important;
}

/* Le texte IA ne change jamais de taille */

.services-coeur-face-avant strong,
.services-coeur.est-active
.services-coeur-face-avant strong,
.services-coeur.prepare-impulsion
.services-coeur-face-avant strong,
.services-coeur.coeur-compresse
.services-coeur-face-avant strong,
.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  transform: none !important;
  animation: none !important;

  transition:
    filter 180ms ease-out !important;
}

/* Le halo change uniquement de lumière, jamais de taille */

.services-coeur-halo,
.services-coeur.est-active .services-coeur-halo,
.services-coeur.prepare-impulsion .services-coeur-halo,
.services-coeur.coeur-compresse .services-coeur-halo,
.services-coeur.coeur-emet .services-coeur-halo {
  transform:
    translate(-50%, -50%)
    scale(1) !important;

  transition:
    opacity 180ms ease-out,
    filter 180ms ease-out !important;
}

/* État lumineux : aucune modification géométrique */

.services-coeur.coeur-emet
.services-coeur-face {
  animation: none !important;
}

.services-coeur.coeur-emet
.services-coeur-face-avant {
  border-color:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 54px rgba(139, 92, 246, 0.32),
    0 0 15px rgba(255, 255, 255, 0.4),
    0 0 44px rgba(192, 132, 252, 0.66),
    0 0 80px rgba(124, 58, 237, 0.32);
}

.services-coeur.coeur-emet
.services-coeur-face-avant strong {
  filter:
    brightness(1.5)
    drop-shadow(
      0 0 7px rgba(255, 255, 255, 0.72)
    )
    drop-shadow(
      0 0 23px rgba(192, 132, 252, 0.9)
    );
}

.services-coeur.coeur-emet
.services-coeur-halo {
  opacity: 1;

  filter:
    blur(20px)
    brightness(1.48);
}

/* =========================================================
   SPRINT 4.1 — MONTÉE EN GAMME DES OFFRES
========================================================= */

/* ---------------------------------------------------------
   TRANSITIONS DE CATÉGORIE
--------------------------------------------------------- */

.offres-contexte {
  transition:
    opacity 230ms ease,
    transform 230ms ease,
    filter 230ms ease;
}

.offres-contexte-sortie {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-8px);
}

.offres-contexte-entree {
  animation:
    offres-contexte-apparition
    620ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

@keyframes offres-contexte-apparition {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.offres-grille {
  transition:
    opacity 230ms ease,
    filter 230ms ease,
    transform 230ms ease;
}

.offres-grille-sortie {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(12px);
}

.offres-grille-entree
.offre-carte {
  animation:
    offre-carte-apparition
    700ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;

  animation-delay:
    calc(
      var(--offre-index) * 75ms
    );
}

@keyframes offre-carte-apparition {
  from {
    opacity: 0;
    filter: blur(6px);
    transform:
      translateY(30px)
      scale(0.975);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform:
      translateY(
        var(--offre-montee, 0px)
      )
      scale(1);
  }
}

/* ---------------------------------------------------------
   PROGRESSION VISUELLE
--------------------------------------------------------- */

.offre-carte {
  --offre-montee: 0px;
  --offre-accent: var(--level-business-rgb);
  --offre-accent-secondaire: var(--level-business-bright-rgb);

  isolation: isolate;

  transform:
    translateY(
      var(--offre-montee)
    );

  transition:
    transform 420ms
      cubic-bezier(0.16, 1, 0.3, 1),
    border-color 350ms ease,
    box-shadow 350ms ease,
    background 350ms ease,
    filter 350ms ease;
}

.offre-carte:hover {
  transform:
    translateY(
      calc(
        var(--offre-montee) - 9px
      )
    );
}

/* Niveau 1 : Foundation */

.offre-foundation {
  --offre-montee: 0px;
  --offre-accent: var(--level-essential-rgb);
  --offre-accent-secondaire: var(--level-essential-bright-rgb);

  border-color:
    rgba(var(--level-essential-rgb), 0.18);

  background:
    radial-gradient(
      circle at 80% 5%,
      rgba(var(--level-essential-rgb), 0.055),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.012)
    );
}

/* Niveau 2 : Growth */

.offre-growth {
  --offre-montee: -8px;
  --offre-accent: var(--level-business-rgb);
  --offre-accent-secondaire: var(--level-business-bright-rgb);

  border-color:
    rgba(var(--level-business-rgb), 0.54);

  background:
    radial-gradient(
      circle at 72% 4%,
      rgba(var(--level-business-rgb), 0.18),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(118, 94, 255, 0.12),
      rgba(255, 255, 255, 0.02)
    );

  box-shadow:
    0 22px 55px rgba(76, 29, 149, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Niveau 3 : Performance */

.offre-performance {
  --offre-montee: -16px;
  --offre-accent: var(--level-premium-rgb);
  --offre-accent-secondaire: var(--level-premium-bright-rgb);

  border-color:
    rgba(var(--level-premium-rgb), 0.3);

  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(var(--level-premium-rgb), 0.14),
      transparent 34%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(139, 92, 246, 0.1),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(50, 20, 58, 0.42),
      rgba(255, 255, 255, 0.018)
    );

  box-shadow:
    0 26px 62px rgba(88, 28, 135, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Niveau 4 : Signature AI */

.offre-signature-ai {
  --offre-montee: -24px;
  --offre-accent: var(--level-signature-rgb);
  --offre-accent-secondaire: var(--level-signature-bright-rgb);

  border-color:
    rgba(var(--level-signature-rgb), 0.55);

  background:
    linear-gradient(
      rgba(var(--level-signature-rgb), 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(var(--level-signature-rgb), 0.035) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 80% 8%,
      rgba(var(--level-signature-rgb), 0.2),
      transparent 32%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(139, 92, 246, 0.14),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(13, 31, 54, 0.84),
      rgba(8, 10, 24, 0.92)
    );

  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto,
    auto;

  box-shadow:
    0 28px 70px rgba(30, 64, 175, 0.18),
    0 0 34px rgba(59, 130, 246, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------
   IDENTITÉ DE CHAQUE NIVEAU
--------------------------------------------------------- */

.offre-adn {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 18px;

  color:
    rgb(
      var(--offre-accent-secondaire)
    );
}

.offre-adn-icone {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  flex: 0 0 36px;

  border:
    1px solid
    rgba(
      var(--offre-accent),
      0.38
    );

  border-radius: 11px;

  background:
    rgba(
      var(--offre-accent),
      0.08
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.07),
    0 0 18px
      rgba(
        var(--offre-accent),
        0.08
      );

  font-size: 1.05rem;
}

.offre-adn div {
  display: grid;
  gap: 3px;
}

.offre-adn small {
  color:
    rgba(
      var(--offre-accent-secondaire),
      0.92
    );

  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.offre-adn strong {
  color: rgba(255, 255, 255, 0.72);

  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
   COULEURS PROPRES À CHAQUE NIVEAU
--------------------------------------------------------- */

.offre-carte .offre-niveau {
  color:
    rgb(
      var(--offre-accent-secondaire)
    );
}

.offre-carte li::before {
  color:
    rgb(
      var(--offre-accent-secondaire)
    );
}

.offre-carte .offre-details {
  border-color:
    rgba(
      var(--offre-accent),
      0.24
    );

  background:
    rgba(
      var(--offre-accent),
      0.055
    );
}

.offre-carte .offre-configurer {
  border:
    1px solid
    rgba(
      var(--offre-accent-secondaire),
      0.28
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        var(--offre-accent),
        0.82
      ),
      rgba(
        var(--offre-accent-secondaire),
        0.58
      )
    );

  box-shadow:
    0 12px 30px
      rgba(
        var(--offre-accent),
        0.16
      );
}

/* Foundation : bouton plus sobre */

.offre-foundation
.offre-configurer {
  background:
    linear-gradient(
      135deg,
      rgba(16, 60, 53, 0.88),
      rgba(20, 83, 74, 0.75)
    );
}

/* Signature : bouton plus puissant */

.offre-signature-ai
.offre-configurer {
  background:
    linear-gradient(
      135deg,
      #1d4ed8,
      #7c3aed 56%,
      #0891b2
    );

  background-size: 180% auto;

  box-shadow:
    0 15px 36px
      rgba(37, 99, 235, 0.28),
    0 0 25px
      rgba(96, 165, 250, 0.12);
}

/* ---------------------------------------------------------
   REFLET PROGRESSIF
--------------------------------------------------------- */

.offre-carte::after {
  content: "";

  position: absolute;
  inset: -40%;

  z-index: 0;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      112deg,
      transparent 38%,
      rgba(255, 255, 255, 0.07) 48%,
      rgba(
        var(--offre-accent-secondaire),
        0.1
      )
      52%,
      transparent 62%
    );

  transform:
    translateX(-38%)
    rotate(4deg);

  transition:
    opacity 280ms ease;
}

.offre-carte:hover::after {
  opacity: 1;

  animation:
    offre-reflet-premium
    900ms
    ease-out
    both;
}

.offre-foundation::after {
  display: none;
}

@keyframes offre-reflet-premium {
  from {
    transform:
      translateX(-38%)
      rotate(4deg);
  }

  to {
    transform:
      translateX(38%)
      rotate(4deg);
  }
}

/* ---------------------------------------------------------
   APPARITION DES AVANTAGES
--------------------------------------------------------- */

.offres-grille-entree
.offre-carte li {
  animation:
    offre-avantage-apparition
    420ms
    ease-out
    both;

  animation-delay:
    calc(
      260ms +
      var(--offre-item-index) * 55ms +
      var(--offre-index) * 35ms
    );
}

@keyframes offre-avantage-apparition {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------------------------------------------------------
   SIGNATURE AI — PARTICULES VISUELLES DISCRÈTES
--------------------------------------------------------- */

.offre-signature-ai::before {
  opacity: 0.72;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 255, 255, 0.85) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 68% 34%,
      rgba(96, 165, 250, 0.8) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 88% 57%,
      rgba(192, 132, 252, 0.65) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 74% 76%,
      rgba(34, 211, 238, 0.7) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      420px circle at
      var(--offre-x)
      var(--offre-y),
      rgba(96, 165, 250, 0.17),
      transparent 44%
    );
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 980px) {
  .offre-carte,
  .offre-foundation,
  .offre-growth,
  .offre-performance,
  .offre-signature-ai {
    --offre-montee: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offres-grille-entree
  .offre-carte,
  .offres-grille-entree
  .offre-carte li,
  .offre-carte:hover::after,
  .offres-contexte-entree {
    animation: none !important;
  }

  .offres-grille,
  .offres-contexte,
  .offre-carte {
    transition: none !important;
  }
}

/* =========================================================
   SPRINT 4.2 — PRODUCT EXPERIENCE
========================================================= */

.modal-offre {
  --product-accent: 139, 92, 246;
  --product-secondary: 192, 132, 252;
}

/* Identités */

.modal-offre.product-foundation {
  --product-accent: 52, 211, 153;
  --product-secondary: 110, 231, 183;
}

.modal-offre.product-growth {
  --product-accent: 139, 92, 246;
  --product-secondary: 192, 132, 252;
}

.modal-offre.product-performance {
  --product-accent: 217, 70, 239;
  --product-secondary: 240, 171, 252;
}

.modal-offre.product-signature {
  --product-accent: 59, 130, 246;
  --product-secondary: 34, 211, 238;
}

/* Conteneur global */

.modal-offre-contenu {
  width: min(1380px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);

  border-color:
    rgba(
      var(--product-accent),
      0.35
    );

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 78% 5%,
      rgba(
        var(--product-accent),
        0.17
      ),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(14, 13, 27, 0.99),
      rgba(5, 6, 13, 0.995)
    );

  transform:
    translate(
      var(--product-origin-x, 0),
      var(--product-origin-y, 25px)
    )
    scale(
      var(--product-origin-scale, 0.96)
    );

  opacity: 0;

  transition:
    transform 620ms
      cubic-bezier(0.16, 1, 0.3, 1),
    opacity 380ms ease,
    border-color 380ms ease;
}

.modal-offre.ouverte
.modal-offre-contenu {
  transform:
    translate(0, 0)
    scale(1);

  opacity: 1;
}

.product-experience {
  min-height: 0;
  height: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    310px;
}

/* Partie principale */

.product-experience-principal {
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  border-right:
    1px solid rgba(255, 255, 255, 0.075);
}

.product-experience-hero {
  position: relative;

  flex: 0 0 auto;

  padding:
    36px
    42px
    29px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.075);

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(
        var(--product-accent),
        0.13
      ),
      transparent 32%
    );
}

.product-experience-identite {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 24px;
}

.product-experience-symbole {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(
      var(--product-secondary),
      0.42
    );

  border-radius: 13px;

  color:
    rgb(
      var(--product-secondary)
    );

  background:
    rgba(
      var(--product-accent),
      0.09
    );

  box-shadow:
    0 0 24px
      rgba(
        var(--product-accent),
        0.12
      );

  font-size: 1.2rem;
}

.product-experience-identite > div:last-child {
  display: grid;
  gap: 5px;
}

.product-experience-adn {
  color:
    rgb(
      var(--product-secondary)
    );

  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.product-experience-titre {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.product-experience-titre h2 {
  margin-bottom: 10px;

  font-size:
    clamp(2.4rem, 4vw, 4.1rem);

  line-height: 0.95;
  letter-spacing: -0.055em;
}

.product-experience-titre p {
  max-width: 650px;

  color: #aaa7b7;

  font-size: 0.94rem;
  line-height: 1.7;
}

/* Core Level */

.product-experience-core {
  position: relative;

  width: 116px;
  height: 116px;

  display: grid;
  place-content: center;
  text-align: center;

  flex: 0 0 116px;

  border:
    1px solid
    rgba(
      var(--product-secondary),
      0.38
    );

  border-radius: 28px;

  background:
    radial-gradient(
      circle,
      rgba(
        var(--product-accent),
        0.18
      ),
      rgba(
        var(--product-accent),
        0.035
      )
      62%,
      transparent 63%
    );

  box-shadow:
    0 0 36px
      rgba(
        var(--product-accent),
        0.13
      ),
    inset 0 0 26px
      rgba(
        var(--product-accent),
        0.09
      );
}

.product-experience-core::before {
  content: "";

  position: absolute;
  inset: 9px;

  border:
    1px solid
    rgba(
      var(--product-secondary),
      0.2
    );

  border-radius: 21px;

  transform: rotate(45deg);
}

.product-experience-core small,
.product-experience-core strong,
.product-experience-core span {
  position: relative;
  z-index: 1;
}

.product-experience-core small {
  color: #8e8999;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
}

.product-experience-core strong {
  margin: 3px 0;

  color:
    rgb(
      var(--product-secondary)
    );

  font-size: 2.15rem;
  line-height: 1;
}

.product-experience-core span {
  color: #ffffff;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

/* Tags */

.product-experience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 22px;
}

.product-experience-tags span {
  padding: 7px 11px;

  border:
    1px solid
    rgba(
      var(--product-accent),
      0.2
    );

  border-radius: 999px;

  color: #cac6d4;

  background:
    rgba(
      var(--product-accent),
      0.055
    );

  font-size: 0.69rem;
  font-weight: 700;
}

/* Corps */

.product-experience-corps {
  min-height: 0;

  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);

  flex: 1 1 auto;
}

.product-experience-navigation {
  display: flex;
  flex-direction: column;
  gap: 7px;

  padding: 28px 19px;

  border-right:
    1px solid rgba(255, 255, 255, 0.07);

  background: rgba(255, 255, 255, 0.014);
}

.product-experience-navigation a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 11px 12px;

  border:
    1px solid transparent;

  border-radius: 11px;

  color: #9d99a8;

  text-decoration: none;

  font-size: 0.72rem;
  font-weight: 700;

  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.product-experience-navigation a:hover {
  color: #ffffff;

  border-color:
    rgba(
      var(--product-accent),
      0.2
    );

  background:
    rgba(
      var(--product-accent),
      0.07
    );
}

.product-experience-navigation span {
  color:
    rgb(
      var(--product-secondary)
    );

  font-size: 0.57rem;
}

.product-experience-contenu {
  min-height: 0;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 28px 32px 36px;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(
      var(--product-accent),
      0.38
    )
    transparent;
}

.product-experience-contenu::-webkit-scrollbar {
  width: 7px;
}

.product-experience-contenu::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(
      var(--product-accent),
      0.38
    );
}

/* Sections */

.product-experience-section {
  padding: 25px;

  border:
    1px solid rgba(255, 255, 255, 0.075);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.012)
    );
}

.product-experience-section +
.product-experience-section {
  margin-top: 18px;
}

.product-experience-section-entete {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 21px;
}

.product-experience-section-entete > span {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  flex: 0 0 35px;

  border:
    1px solid
    rgba(
      var(--product-secondary),
      0.28
    );

  border-radius: 10px;

  color:
    rgb(
      var(--product-secondary)
    );

  background:
    rgba(
      var(--product-accent),
      0.08
    );

  font-size: 0.65rem;
  font-weight: 900;
}

.product-experience-section-entete small,
.product-experience-information small {
  color:
    rgb(
      var(--product-secondary)
    );

  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.product-experience-section-entete h3,
.product-experience-information h3 {
  margin-top: 4px;

  color: #ffffff;

  font-size: 1rem;
}

.product-experience-description {
  color: #aaa6b5;

  font-size: 0.84rem;
  line-height: 1.75;
}

/* Indicateurs */

.product-experience-indicateurs {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-top: 20px;
}

.product-experience-indicateurs > div {
  padding: 14px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.022);
}

.product-experience-indicateurs small {
  display: block;
  margin-bottom: 6px;

  color: #817d8c;
  font-size: 0.6rem;
}

.product-experience-indicateurs strong {
  color:
    rgb(
      var(--product-secondary)
    );

  font-size: 0.78rem;
}

/* Groupes de prestations */

.product-experience
#modal-offre-inclus {
  display: block;
}

.product-experience
.modal-offre-groupe {
  padding: 17px;

  border:
    1px solid rgba(255, 255, 255, 0.065);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.018);
}

.product-experience
.modal-offre-groupe +
.modal-offre-groupe {
  margin-top: 12px;
  padding-top: 17px;

  border-top:
    1px solid rgba(255, 255, 255, 0.065);
}

.product-experience
.modal-offre-groupe-liste {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

/* Options */

.product-experience
.modal-offre-liste-options {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.product-experience
.modal-offre-liste-options li {
  min-height: 48px;

  display: flex;
  align-items: center;

  padding:
    12px
    38px
    12px
    15px;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.02);
}

.product-experience
.modal-offre-liste-options li::before {
  content: "+";

  top: 50%;
  right: 14px;
  left: auto;

  transform: translateY(-50%);

  color:
    rgb(
      var(--product-secondary)
    );
}

/* Engagement */

.product-experience-information {
  display: flex;
  align-items: flex-start;
  gap: 16px;

  border-color:
    rgba(
      var(--product-accent),
      0.16
    );

  background:
    rgba(
      var(--product-accent),
      0.04
    );
}

.product-experience-information-icone {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  flex: 0 0 39px;

  border-radius: 11px;

  color:
    rgb(
      var(--product-secondary)
    );

  background:
    rgba(
      var(--product-accent),
      0.09
    );
}

.product-experience-information p {
  margin-top: 8px;

  color: #9691a1;

  font-size: 0.77rem;
  line-height: 1.6;
}

/* Colonne fixe */

.product-experience-resume {
  min-height: 0;

  display: flex;
  flex-direction: column;

  padding: 76px 25px 25px;

  background:
    linear-gradient(
      180deg,
      rgba(
        var(--product-accent),
        0.055
      ),
      rgba(255, 255, 255, 0.012)
    );
}

.product-experience-resume-label {
  display: block;
  margin-bottom: 28px;

  color:
    rgb(
      var(--product-secondary)
    );

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.product-experience-resume-haut > small {
  display: block;

  color: #888493;

  font-size: 0.68rem;
}

.product-experience-resume-haut > strong {
  display: block;

  margin: 7px 0 25px;

  color: #ffffff;

  font-size:
    clamp(2rem, 3vw, 3rem);

  line-height: 1;
  letter-spacing: -0.04em;
}

.product-experience-resume-ligne {
  display: grid;
  gap: 5px;

  padding: 15px 0;

  border-top:
    1px solid rgba(255, 255, 255, 0.075);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.075);
}

.product-experience-resume-ligne span {
  color: #85818f;
  font-size: 0.65rem;
}

.product-experience-resume-ligne b {
  color: #ffffff;
  font-size: 0.8rem;
}

/* Garanties */

.product-experience-garanties {
  display: grid;
  gap: 12px;

  margin-top: 25px;
}

.product-experience-garanties span {
  display: flex;
  align-items: center;
  gap: 9px;

  color: #bdb9c6;

  font-size: 0.72rem;
}

.product-experience-garanties i {
  width: 19px;
  height: 19px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color:
    rgb(
      var(--product-secondary)
    );

  background:
    rgba(
      var(--product-accent),
      0.09
    );

  font-size: 0.56rem;
  font-style: normal;
}

/* Core segments */

.product-experience-core-barre {
  margin-top: 28px;
  padding-top: 22px;

  border-top:
    1px solid rgba(255, 255, 255, 0.075);
}

.product-experience-core-barre > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 15px;

  margin-bottom: 11px;
}

.product-experience-core-barre small {
  color: #777381;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

.product-experience-core-barre strong {
  color:
    rgb(
      var(--product-secondary)
    );

  font-size: 0.67rem;
}

.product-experience-core-segments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.product-experience-core-segments span {
  height: 5px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);
}

.product-experience-core-segments span.actif {
  background:
    linear-gradient(
      90deg,
      rgba(
        var(--product-accent),
        0.8
      ),
      rgb(
        var(--product-secondary)
      )
    );

  box-shadow:
    0 0 12px
      rgba(
        var(--product-accent),
        0.4
      );
}

/* CTA */

.product-experience-resume-actions {
  margin-top: auto;
  padding-top: 25px;
}

.product-experience
.modal-offre-configurer {
  width: 100%;

  background:
    linear-gradient(
      135deg,
      rgba(
        var(--product-accent),
        0.95
      ),
      rgba(
        var(--product-secondary),
        0.7
      )
    );

  box-shadow:
    0 16px 36px
      rgba(
        var(--product-accent),
        0.24
      );
}

.product-experience-resume-actions p {
  margin-top: 13px;

  color: #777381;

  text-align: center;

  font-size: 0.62rem;
  line-height: 1.5;
}

.product-experience-resume-actions a {
  color:
    rgb(
      var(--product-secondary)
    );
}

/* Apparition progressive */

.modal-offre.ouverte
.product-experience-hero,
.modal-offre.ouverte
.product-experience-navigation,
.modal-offre.ouverte
.product-experience-section,
.modal-offre.ouverte
.product-experience-resume {
  animation:
    product-element-apparition
    620ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

.modal-offre.ouverte
.product-experience-navigation {
  animation-delay: 90ms;
}

.modal-offre.ouverte
.product-experience-section:nth-child(1) {
  animation-delay: 130ms;
}

.modal-offre.ouverte
.product-experience-section:nth-child(2) {
  animation-delay: 180ms;
}

.modal-offre.ouverte
.product-experience-section:nth-child(3) {
  animation-delay: 230ms;
}

.modal-offre.ouverte
.product-experience-section:nth-child(4) {
  animation-delay: 280ms;
}

.modal-offre.ouverte
.product-experience-resume {
  animation-delay: 110ms;
}

@keyframes product-element-apparition {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */

@media (max-width: 1050px) {
  .product-experience {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .product-experience-principal {
    overflow: visible;

    border-right: 0;
  }

  .product-experience-resume {
    padding: 26px;

    border-top:
      1px solid rgba(255, 255, 255, 0.075);
  }

  .product-experience-resume-actions {
    margin-top: 25px;
  }
}

@media (max-width: 720px) {
  .modal-offre {
    padding: 10px;
  }

  .modal-offre-contenu {
    width: 100%;
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);

    border-radius: 18px;
  }

  .product-experience-hero {
    padding: 27px 20px 23px;
  }

  .product-experience-titre {
    display: block;
  }

  .product-experience-core {
    width: 92px;
    height: 92px;

    margin-top: 22px;
  }

  .product-experience-corps {
    display: block;
  }

  .product-experience-navigation {
    position: sticky;
    top: 0;
    z-index: 4;

    flex-direction: row;
    overflow-x: auto;

    padding: 12px;

    border-right: 0;
    border-bottom:
      1px solid rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(18px);
  }

  .product-experience-navigation a {
    flex: 0 0 auto;
  }

  .product-experience-contenu {
    overflow: visible;
    padding: 20px;
  }

  .product-experience-indicateurs,
  .product-experience
  .modal-offre-groupe-liste,
  .product-experience
  .modal-offre-liste-options {
    grid-template-columns: 1fr;
  }

  .modal-offre-fermer {
    top: 14px;
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-offre-contenu,
  .modal-offre.ouverte
  .product-experience-hero,
  .modal-offre.ouverte
  .product-experience-navigation,
  .modal-offre.ouverte
  .product-experience-section,
  .modal-offre.ouverte
  .product-experience-resume {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   SPRINT 5.1 — PREMIUM DESIGN SYSTEM
========================================================= */

:root {
  /* Surfaces */
  --ds-bg-0: #050509;
  --ds-bg-1: #08080f;
  --ds-bg-2: #0c0c15;

  --ds-surface-1: rgba(255, 255, 255, 0.028);
  --ds-surface-2: rgba(255, 255, 255, 0.042);
  --ds-surface-3: rgba(255, 255, 255, 0.058);

  /* Bordures */
  --ds-border-subtle: rgba(255, 255, 255, 0.065);
  --ds-border: rgba(255, 255, 255, 0.095);
  --ds-border-strong: rgba(255, 255, 255, 0.14);

  /* Textes */
  --ds-text-primary: #f8f7fc;
  --ds-text-secondary: #b8b4c4;
  --ds-text-muted: #85818f;
  --ds-text-faint: #696574;

  /* Accents */
  --ds-violet: 139, 92, 246;
  --ds-purple: 192, 132, 252;
  --ds-pink: 217, 70, 239;
  --ds-blue: 59, 130, 246;
  --ds-cyan: 34, 211, 238;
  --ds-green: 52, 211, 153;

  /* Espacements */
  --ds-space-1: 8px;
  --ds-space-2: 16px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-space-5: 48px;
  --ds-space-6: 64px;
  --ds-space-7: 96px;

  /* Rayons */
  --ds-radius-sm: 12px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 22px;
  --ds-radius-xl: 28px;
  --ds-radius-pill: 999px;

  /* Ombres */
  --ds-shadow-sm:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  --ds-shadow-md:
    0 22px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);

  --ds-shadow-lg:
    0 36px 100px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  /* Animations */
  --ds-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-transition-fast: 180ms ease;
  --ds-transition: 280ms var(--ds-ease-premium);
  --ds-transition-slow: 520ms var(--ds-ease-premium);

  /* Contrôles */
  --ds-control-height: 52px;
}

/* =========================================================
   FOND GLOBAL
========================================================= */

body {
  color: var(--ds-text-primary);

  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(99, 102, 241, 0.105),
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 55%,
      rgba(168, 85, 247, 0.075),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      var(--ds-bg-0),
      #050508 52%,
      #06060b
    );
}

/* =========================================================
   RYTHME DES SECTIONS
========================================================= */

.section {
  padding: clamp(96px, 8vw, 136px) 0;
}

.section-entete {
  max-width: 760px;
  margin-bottom: var(--ds-space-6);
}

.section-entete h2 {
  margin: 16px 0 20px;

  color: var(--ds-text-primary);

  font-size: clamp(
    2.25rem,
    3.75vw,
    3.35rem
  );

  line-height: 1.02;
  letter-spacing: -0.048em;
}

.section-entete p {
  color: var(--ds-text-secondary);

  font-size: 1rem;
  line-height: 1.78;
}

.sur-titre {
  color: rgba(
    var(--ds-purple),
    0.92
  );

  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.2em;
}

/* =========================================================
   CARTES GÉNÉRIQUES
========================================================= */

.glass-card {
  border:
    1px solid
    var(--ds-border);

  border-radius:
    var(--ds-radius-lg);

  background:
    linear-gradient(
      145deg,
      var(--ds-surface-2),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    var(--ds-shadow-md);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.transition-premium {
  transition:
    transform var(--ds-transition),
    border-color var(--ds-transition),
    background var(--ds-transition),
    box-shadow var(--ds-transition),
    opacity var(--ds-transition);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-border:hover {
  border-color:
    rgba(
      var(--ds-purple),
      0.32
    );
}

.glow-violet {
  box-shadow:
    0 18px 54px
      rgba(0, 0, 0, 0.33),
    0 0 42px
      rgba(
        var(--ds-violet),
        0.08
      ),
    inset 0 1px 0
      rgba(255, 255, 255, 0.04);
}

/* =========================================================
   BOUTONS ET CTA
========================================================= */

.btn,
.offre-cta,
.offre-details,
.pack-cta,
.modal-offre-configurer,
.configurateur-bouton,
.configurateur-suivant,
.configurateur-precedent {
  min-height:
    var(--ds-control-height);

  border-radius: 13px;

  font-weight: 800;
  letter-spacing: -0.01em;

  transition:
    transform
      var(--ds-transition-fast),
    border-color
      var(--ds-transition-fast),
    background
      var(--ds-transition-fast),
    box-shadow
      var(--ds-transition-fast),
    opacity
      var(--ds-transition-fast);
}

.btn:hover,
.offre-cta:hover,
.offre-details:hover,
.pack-cta:hover,
.modal-offre-configurer:hover,
.configurateur-bouton:hover,
.configurateur-suivant:hover,
.configurateur-precedent:hover {
  transform: translateY(-2px);
}

.btn:active,
.offre-cta:active,
.offre-details:active,
.pack-cta:active,
.modal-offre-configurer:active,
.configurateur-bouton:active,
.configurateur-suivant:active,
.configurateur-precedent:active {
  transform: translateY(0);
}

/* Accessibilité clavier */

.btn:focus-visible,
.offre-cta:focus-visible,
.offre-details:focus-visible,
.pack-cta:focus-visible,
.modal-offre-configurer:focus-visible,
.configurateur-bouton:focus-visible,
.configurateur-suivant:focus-visible,
.configurateur-precedent:focus-visible,
.modal-offre-fermer:focus-visible,
.offre-tab:focus-visible {
  outline:
    2px solid
    rgba(
      var(--ds-purple),
      0.9
    );

  outline-offset: 3px;
}

/* =========================================================
   NAVIGATION
========================================================= */

.entete {
  border-bottom:
    1px solid
    var(--ds-border-subtle);

  background:
    rgba(5, 5, 9, 0.72);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.liens-navigation a {
  color: #cbc7d4;
}

.nav-cta {
  min-height: 42px;

  display: inline-flex;
  align-items: center;

  border-color:
    rgba(
      var(--ds-purple),
      0.34
    );

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.025);
}

/* =========================================================
   HALO GLOBAL
========================================================= */

.spotlight {
  width: 480px;
  height: 480px;

  opacity: 0.72;

  background:
    radial-gradient(
      circle,
      rgba(
        var(--ds-violet),
        0.105
      ),
      rgba(
        var(--ds-violet),
        0.035
      ) 38%,
      transparent 72%
    );

  filter: blur(54px);
}

/* =========================================================
   FORMULAIRES
========================================================= */

input,
textarea,
select {
  border-color:
    var(--ds-border);

  border-radius:
    var(--ds-radius-sm);

  color:
    var(--ds-text-primary);

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    border-color
      var(--ds-transition-fast),
    background
      var(--ds-transition-fast),
    box-shadow
      var(--ds-transition-fast);
}

input:hover,
textarea:hover,
select:hover {
  border-color:
    var(--ds-border-strong);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;

  border-color:
    rgba(
      var(--ds-purple),
      0.56
    );

  background:
    rgba(255, 255, 255, 0.038);

  box-shadow:
    0 0 0 4px
      rgba(
        var(--ds-violet),
        0.09
      );
}

/* =========================================================
   SCROLLBARS
========================================================= */

* {
  scrollbar-width: thin;

  scrollbar-color:
    rgba(
      var(--ds-purple),
      0.28
    )
    transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border-radius:
    var(--ds-radius-pill);

  background:
    rgba(
      var(--ds-purple),
      0.26
    );
}

*::-webkit-scrollbar-thumb:hover {
  background:
    rgba(
      var(--ds-purple),
      0.42
    );
}

/* =========================================================
   RESPONSIVE GLOBAL
========================================================= */

@media (max-width: 760px) {
  .section {
    padding: 88px 0;
  }

  .section-entete {
    margin-bottom: 48px;
  }

  .section-entete h2 {
    font-size: clamp(
      2rem,
      10vw,
      2.75rem
    );
  }
}

/* =========================================================
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }
}

/* =========================================================
   SPRINT 5.2A — OFFRES / PRODUCT CARDS V2
========================================================= */

.offres {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.offres .conteneur {
  max-width: 1380px;
}

.offres-entete {
  max-width: 850px;
  margin-bottom: 44px;
}

.offres-parcours {
  max-width: 900px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 34px;
  padding: 12px 20px;
  border: 1px solid var(--ds-border-subtle, rgba(255,255,255,.07));
  border-radius: 999px;
  background: rgba(255,255,255,.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
}

.offres-parcours span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-text-secondary, #b8b4c4);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

.offres-parcours strong {
  color: #d8c9ff;
  font-size: .66rem;
  letter-spacing: .08em;
}

.offres-parcours i {
  color: rgba(196,181,253,.4);
  font-style: normal;
}

.offres-selecteur {
  width: fit-content;
  max-width: 100%;
  display: flex;
  gap: 6px;
  margin: 0 auto 38px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--ds-border-subtle, rgba(255,255,255,.07));
  border-radius: 16px;
  background: rgba(7,7,13,.72);
  box-shadow:
    0 20px 55px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
  scrollbar-width: none;
}

.offres-selecteur::-webkit-scrollbar {
  display: none;
}

.offre-tab {
  min-height: 43px;
  flex: 0 0 auto;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #9995a6;
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.offre-tab:hover {
  color: #eeeaf7;
  background: rgba(255,255,255,.035);
}

.offre-tab.actif {
  color: white;
  border-color: rgba(167,139,250,.28);
  background:
    linear-gradient(135deg, rgba(124,58,237,.3), rgba(168,85,247,.12)),
    rgba(255,255,255,.04);
  box-shadow:
    0 8px 25px rgba(76,29,149,.2),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.offres-contexte {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(350px, .65fr);
  align-items: end;
  gap: 55px;
  margin-bottom: 34px;
  padding: 0 4px;
}

.offres-contexte-label {
  display: inline-block;
  margin-bottom: 10px;
  color: #c4b5fd;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .18em;
}

.offres-contexte h3 {
  max-width: 710px;
  color: #faf9ff;
  font-size: clamp(1.65rem, 2.5vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.offres-contexte > p {
  max-width: 520px;
  justify-self: end;
  color: #aaa6b5;
  font-size: .93rem;
  line-height: 1.75;
}

.offres-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 15px;
}

.offre-carte {
  --offre-montee: 0px;
  --offre-accent: var(--level-business-rgb);
  --offre-accent-secondaire: var(--level-business-bright-rgb);

  position: relative;
  min-width: 0;
  min-height: 690px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(var(--offre-accent), .2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 0%, rgba(var(--offre-accent), .11), transparent 31%),
    linear-gradient(165deg, rgba(26,24,38,.91), rgba(10,10,18,.97) 72%);
  box-shadow:
    0 24px 65px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.055);
  isolation: isolate;
  transform: translateY(var(--offre-montee));
  transition:
    transform .42s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.offre-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%),
    radial-gradient(420px circle at var(--offre-x, 50%) var(--offre-y, 20%), rgba(var(--offre-accent), .13), transparent 42%);
}

.offre-carte::after {
  content: "";
  position: absolute;
  top: 0;
  left: 19%;
  right: 19%;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(var(--offre-accent-secondaire), .9), transparent);
  box-shadow: 0 0 22px rgba(var(--offre-accent), .42);
}

.offre-carte:hover {
  transform: translateY(calc(var(--offre-montee) - 8px));
  border-color: rgba(var(--offre-accent), .48);
  box-shadow:
    0 35px 85px rgba(0,0,0,.42),
    0 0 55px rgba(var(--offre-accent), .095),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.offre-foundation {
  --offre-accent: var(--level-essential-rgb);
  --offre-accent-secondaire: var(--level-essential-bright-rgb);
}

.offre-growth {
  --offre-montee: -6px;
  --offre-accent: var(--level-business-rgb);
  --offre-accent-secondaire: var(--level-business-bright-rgb);
}

.offre-performance {
  --offre-montee: -12px;
  --offre-accent: var(--level-premium-rgb);
  --offre-accent-secondaire: var(--level-premium-bright-rgb);
}

.offre-signature-ai {
  --offre-montee: -18px;
  --offre-accent: var(--level-signature-rgb);
  --offre-accent-secondaire: var(--level-signature-bright-rgb);
}

.offre-carte-haut {
  min-height: 47px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.offre-adn {
  display: flex;
  align-items: center;
  gap: 11px;
}

.offre-adn-icone {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--offre-accent), .35);
  border-radius: 12px;
  color: rgb(var(--offre-accent-secondaire));
  background: rgba(var(--offre-accent), .09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  font-size: 1rem;
}

.offre-adn div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.offre-adn small {
  color: #f1eef8;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.offre-adn strong {
  color: rgba(var(--offre-accent-secondaire), .94);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.offre-niveau {
  color: rgba(255,255,255,.16);
  font-size: 1.55rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.05em;
}

.offre-ruban {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  padding: 6px 14px;
  border-radius: 0 0 10px 10px;
  color: white;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  box-shadow: 0 8px 25px rgba(124,58,237,.28);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .13em;
  transform: translateX(-50%);
}

.offre-introduction {
  min-height: 86px;
}

.offre-repere {
  display: block;
  margin-bottom: 8px;
  color: #85808f;
  font-size: .68rem;
  font-weight: 700;
}

.offre-carte h4 {
  margin: 0;
  color: #fbfaff;
  font-size: clamp(1.5rem, 1.8vw, 1.95rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.offre-tarification {
  min-height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 16px;
}

.offre-prix small {
  display: block;
  margin-bottom: 5px;
  color: #777280;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .05em;
}

.offre-prix strong {
  display: block;
  color: #fff;
  font-size: clamp(1.55rem, 1.8vw, 2rem);
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
}

.offre-delai {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

.offre-delai-icone {
  color: rgb(var(--offre-accent-secondaire));
  font-size: .88rem;
}

.offre-delai small {
  display: block;
  margin-bottom: 2px;
  color: #777280;
  font-size: .54rem;
  font-weight: 750;
  letter-spacing: .04em;
}

.offre-delai strong {
  display: block;
  color: #d6d2de;
  font-size: .67rem;
  font-weight: 750;
  white-space: nowrap;
}

.offre-separateur {
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.03), transparent);
}

.offre-inclus {
  flex: 1;
}

.offre-inclus-label {
  display: block;
  margin-bottom: 14px;
  color: #e8e4ef;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.offre-carte ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offre-carte li {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
}

.offre-carte li > span:last-child {
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.offre-check {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--offre-accent), .32);
  border-radius: 50%;
  color: rgb(var(--offre-accent-secondaire));
  background: rgba(var(--offre-accent), .08);
  font-size: .55rem;
  font-weight: 900;
}

.offre-details {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.075);
  color: #b9b4c2;
  background: transparent;
  font: inherit;
  font-size: .71rem;
  font-weight: 750;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}

.offre-details:hover {
  color: white;
  border-color: rgba(var(--offre-accent), .32);
}

.offre-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.offre-details,
.offre-demo,
.offre-configurer {
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.offre-demo {
  border: 1px solid rgba(255,255,255,.085);
  color: #aaa6b3;
  background: rgba(255,255,255,.022);
}

.offre-demo[aria-disabled="true"] {
  opacity: .62;
  cursor: default;
}

.offre-demo-disponible {
  justify-content: flex-start;
  color: #ddd8e6;
}

.offre-demo-icone {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--offre-accent), .3);
  border-radius: 8px;
  color: rgb(var(--offre-accent-secondaire));
  background: rgba(var(--offre-accent), .08);
  font-size: .58rem;
}

.offre-demo-texte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.offre-demo-texte small {
  color: #77727f;
  font-size: .51rem;
  letter-spacing: .08em;
}

.offre-demo-texte strong {
  overflow: hidden;
  color: inherit;
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offre-demo-fleche {
  margin-left: auto;
}

.offre-configurer {
  border: 1px solid rgba(var(--offre-accent), .38);
  color: white;
  background:
    linear-gradient(135deg, rgba(var(--offre-accent), .44), rgba(var(--offre-accent-secondaire), .2)),
    rgba(255,255,255,.035);
  box-shadow:
    0 13px 30px rgba(var(--offre-accent), .12),
    inset 0 1px 0 rgba(255,255,255,.1);
  cursor: pointer;
}

.offre-configurer:hover,
.offre-demo-disponible:hover {
  transform: translateY(-2px);
}

.offre-configurer:hover {
  border-color: rgba(var(--offre-accent-secondaire), .62);
  box-shadow:
    0 17px 38px rgba(var(--offre-accent), .2),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.offres-note {
  max-width: 930px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 42px auto 0;
  padding: 17px 20px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}

.offres-note > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(167,139,250,.24);
  border-radius: 50%;
  color: #c4b5fd;
  background: rgba(139,92,246,.08);
  font-size: .72rem;
}

.offres-note p {
  margin: 0;
  color: #8f8a98;
  font-size: .75rem;
  line-height: 1.65;
}

.offres-note strong {
  color: #c9c5d0;
}

@media (max-width: 1180px) {
  .offres-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .offre-carte,
  .offre-foundation,
  .offre-growth,
  .offre-performance,
  .offre-signature-ai {
    --offre-montee: 0px;
    min-height: 650px;
  }
}

@media (max-width: 820px) {
  .offres-parcours {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: 16px;
  }

  .offres-contexte {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }

  .offres-contexte > p {
    justify-self: start;
  }
}

@media (max-width: 650px) {
  .offres-grille {
    grid-template-columns: 1fr;
  }

  .offre-carte {
    min-height: auto;
    padding: 23px 21px;
  }

  .offre-introduction {
    min-height: auto;
  }

  .offre-tarification {
    min-height: auto;
  }

  .offre-tab {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offre-carte,
  .offre-tab,
  .offre-demo,
  .offre-configurer {
    transition: none !important;
  }
}

/* =========================================================
   OFFRES — CARTES DE DÉCISION COMPACTES
   ========================================================= */

   .offres-grille .offre-carte {
    min-height: 0;
    padding: 20px;
  }
  
  .offres-grille .offre-carte-haut {
    min-height: 0;
    margin-bottom: 18px;
  }
  
  .offres-grille .offre-adn {
    gap: 8px;
  }
  
  .offres-grille .offre-adn-icone {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  
  .offres-grille .offre-adn small {
    font-size: .53rem;
  }
  
  .offres-grille .offre-adn strong {
    font-size: .68rem;
  }
  
  .offres-grille .offre-niveau {
    font-size: .75rem;
  }
  
  .offres-grille .offre-introduction {
    min-height: 0;
    margin-bottom: 14px;
  }
  
  .offres-grille .offre-repere {
    margin-bottom: 7px;
    font-size: .62rem;
  }
  
  .offres-grille .offre-carte h4 {
    margin: 0;
    font-size: clamp(1.35rem, 1.55vw, 1.7rem);
    line-height: 1.05;
  }
  
  .offres-grille .offre-prix-compact {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
  }
  
  .offres-grille .offre-prix-compact strong {
    display: block;
    color: #fff;
    font-size: clamp(1.45rem, 1.7vw, 1.85rem);
    line-height: 1;
    letter-spacing: -.045em;
  }
  
  .offres-grille .offre-points-cles {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
  }
  
  .offres-grille .offre-points-cles li {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    width: 100%;
  }
  
  .offres-grille .offre-points-cles li > span:last-child {
    min-width: 0;
    line-height: 1.38;
    word-break: normal;
    overflow-wrap: normal;
  }
  
  .offres-grille .offre-points-cles li:not(.offre-plus) {
    color: #d9d6e3;
    font-size: .78rem;
  }
  
  .offres-grille .offre-points-cles .offre-plus {
    margin-top: 2px;
    color: #a9a3b4;
    font-size: .73rem;
  }
  
  .offres-grille .offre-actions {
    display: grid;
    gap: 7px;
    margin-top: auto;
  }
  
  .offres-grille .offre-details,
  .offres-grille .offre-demo,
  .offres-grille .offre-configurer {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 11px;
  }
  
  .offres-grille .offre-action-contenu,
  .offres-grille .offre-demo-texte {
    display: grid;
    gap: 2px;
    text-align: left;
  }
  
  .offres-grille .offre-action-contenu small,
  .offres-grille .offre-demo-texte small {
    font-size: .48rem;
    line-height: 1;
    letter-spacing: .09em;
  }
  
  .offres-grille .offre-action-contenu strong,
  .offres-grille .offre-demo-texte strong {
    font-size: .68rem;
    line-height: 1.15;
  }
  
  @media (max-width: 1100px) {
    .offres-grille .offre-carte {
      padding: 20px;
    }
  }

  .offres-grille .offre-points-cles li {
    grid-template-columns: 15px minmax(0, 1fr);
    gap: 7px;
  }
  
  .offres-grille .offre-check,
  .offres-grille .offre-plus-icone {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    font-size: .5rem;
  }
  
  .offres-grille .offre-points-cles li:not(.offre-plus) {
    font-size: .74rem;
    line-height: 1.3;
  }

  .offres-grille .offre-action-contenu small,
.offres-grille .offre-demo-texte small {
  display: none;
}

.offres-grille .offre-action-contenu strong,
.offres-grille .offre-demo-texte strong {
  font-size: .7rem;
  line-height: 1.2;
}

.offres-grille .offre-carte:last-child .offre-prix-compact strong {
  font-size: 1.55rem;
}

/* Correction définitive de la largeur des fonctionnalités */

.offres-grille .offre-points-cles li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.offres-grille .offre-points-cles li .offre-check,
.offres-grille .offre-points-cles li .offre-plus-icone {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}

.offres-grille .offre-points-cles li > span:last-child {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.35;
}

.offres-grille .offre-prix-compact {
  margin-top: 10px;
}

.offres-grille .offre-demo[aria-disabled="true"] {
  opacity: 1;
  color: #aaa4b7;
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
  cursor: not-allowed;
}

.offres-grille .offre-demo[aria-disabled="true"]:hover {
  transform: none;
}

.offres-grille {
  margin-bottom: 40px;
}

/* =========================================================
   CHIVARYN ADVISOR — TRANSITIONS DE PARCOURS
========================================================= */

#advisor-choix,
#advisor-interface,
#offres-comparateur,
.packs-avantage,
.configurateur-cta {
  scroll-margin-top: 110px;
}

#advisor-interface:not([hidden]),
#offres-comparateur:not([hidden]) {
  animation: advisor-apparition 0.65s
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes advisor-apparition {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #advisor-interface:not([hidden]),
  #offres-comparateur:not([hidden]) {
    animation: none;
  }
}

/* =========================================================
   CHIVARYN ADVISOR — QUESTIONNAIRE
========================================================= */

.advisor-question {
  animation: advisor-question-entree 0.55s
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.advisor-question-entete {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.advisor-question-categorie {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #aaa5b7;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.advisor-question-categorie strong {
  min-width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0 8px;
  border: 1px solid rgba(139, 92, 246, 0.38);
  border-radius: 9px;
  color: #d8b4fe;
  background: rgba(139, 92, 246, 0.1);
}

.advisor-question-entete h3,
.advisor-analyse-contenu h3,
.advisor-analyse-terminee h3 {
  margin-bottom: 15px;
  color: #ffffff;
  font-size: clamp(1.8rem, 4vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.advisor-question-entete p,
.advisor-analyse-contenu > p,
.advisor-analyse-terminee > p {
  max-width: 670px;
  margin-inline: auto;
  color: #9f9aaa;
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Réponses */

.advisor-reponses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  max-width: 930px;
  margin-inline: auto;
}

.advisor-reponse {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 17px;
  padding: 19px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 17px;
  color: inherit;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(139, 92, 246, 0.06),
      transparent 42%
    ),
    rgba(255, 255, 255, 0.025);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.advisor-reponse::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    120deg,
    rgba(124, 58, 237, 0.12),
    transparent 55%
  );
  transition: opacity 0.3s ease;
}

.advisor-reponse:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.33);
  background-color: rgba(139, 92, 246, 0.045);
}

.advisor-reponse:hover::before,
.advisor-reponse.selectionnee::before {
  opacity: 1;
}

.advisor-reponse.selectionnee {
  border-color: rgba(168, 85, 247, 0.7);
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(168, 85, 247, 0.19),
      transparent 45%
    ),
    rgba(92, 43, 155, 0.1);
  box-shadow:
    0 15px 38px rgba(76, 29, 149, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.advisor-reponse-icone {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 14px;
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.08);
  font-size: 1.15rem;
  font-weight: 900;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.advisor-reponse.selectionnee .advisor-reponse-icone {
  transform: scale(1.05);
  border-color: rgba(192, 132, 252, 0.55);
  background: rgba(139, 92, 246, 0.2);
}

.advisor-reponse-contenu {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: block;
}

.advisor-reponse-contenu strong {
  display: block;
  margin-bottom: 6px;
  color: #f8f7fb;
  font-size: 0.93rem;
  line-height: 1.25;
}

.advisor-reponse-contenu > span {
  display: block;
  color: #9792a2;
  font-size: 0.78rem;
  line-height: 1.55;
}

.advisor-reponse-controle {
  position: relative;
  z-index: 2;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.advisor-reponse-controle i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
  transform: scale(0);
}

.advisor-reponse.selectionnee .advisor-reponse-controle {
  border-color: #c084fc;
  background: rgba(168, 85, 247, 0.15);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}

.advisor-reponse.selectionnee .advisor-reponse-controle i {
  background: #c084fc;
  transform: scale(1);
}

/* Navigation */

.advisor-navigation {
  max-width: 930px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 39px auto 0;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.advisor-navigation-secondaire,
.advisor-navigation-principale {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 20px;
  border-radius: 13px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.advisor-navigation-secondaire {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c9c5d0;
  background: rgba(255, 255, 255, 0.025);
}

.advisor-navigation-secondaire:hover:not(:disabled) {
  transform: translateX(-3px);
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(139, 92, 246, 0.08);
}

.advisor-navigation-principale {
  justify-self: end;
  border: 1px solid rgba(216, 180, 254, 0.25);
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #6d28d9,
    #9333ea 58%,
    #2563eb
  );
  box-shadow:
    0 14px 35px rgba(91, 33, 182, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.advisor-navigation-principale:hover:not(:disabled) {
  transform: translateY(-3px);
}

.advisor-navigation-principale:disabled,
.advisor-navigation-secondaire:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.advisor-navigation-position {
  color: #787383;
  font-size: 0.7rem;
  font-weight: 800;
}

.advisor-navigation-position span {
  margin: 0 4px;
  color: #4e4a57;
}

/* Analyse */

.advisor-analyse {
  min-height: 430px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 90px);
  max-width: 930px;
  margin-inline: auto;
  animation: advisor-question-entree 0.6s
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.advisor-analyse-visuel {
  position: relative;
  width: 270px;
  height: 270px;
  display: grid;
  place-items: center;
}

.advisor-analyse-orbite {
  position: absolute;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 50%;
}

.advisor-analyse-orbite-1 {
  inset: 0;
  animation: advisor-analyse-rotation 13s linear infinite;
}

.advisor-analyse-orbite-2 {
  inset: 28px;
  border-color: rgba(56, 189, 248, 0.18);
  animation: advisor-analyse-rotation 9s linear infinite reverse;
}

.advisor-analyse-orbite-3 {
  inset: 57px;
  border-style: dashed;
  animation: advisor-analyse-rotation 6s linear infinite;
}

.advisor-analyse-coeur {
  position: relative;
  z-index: 3;
  width: 116px;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(192, 132, 252, 0.4);
  border-radius: 31px;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(192, 132, 252, 0.25),
      transparent 45%
    ),
    #110d20;
  box-shadow:
    0 0 55px rgba(139, 92, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: advisor-analyse-pulse 2.2s ease-in-out infinite;
  transform: rotate(45deg);
}

.advisor-analyse-coeur > * {
  transform: rotate(-45deg);
}

.advisor-analyse-coeur small {
  color: #8d8799;
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.advisor-analyse-coeur strong {
  margin: 4px 0;
  color: transparent;
  background: linear-gradient(135deg, #ffffff, #c084fc, #38bdf8);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 2rem;
}

.advisor-analyse-coeur span {
  color: #ddd6fe;
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.advisor-analyse-contenu {
  max-width: 570px;
}

.advisor-analyse-contenu > p {
  margin-inline: 0;
}

.advisor-analyse-etapes {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 30px;
}

.advisor-analyse-etapes span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6f6a78;
  font-size: 0.79rem;
  transition: color 0.4s ease;
}

.advisor-analyse-etapes i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #494551;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.advisor-analyse-etapes span.actif {
  color: #ded9e8;
}

.advisor-analyse-etapes span.actif i {
  background: #a855f7;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.75);
  animation: advisor-etape-pulse 1.2s ease-in-out infinite;
}

.advisor-analyse-etapes span.terminee {
  color: #86efac;
}

.advisor-analyse-etapes span.terminee i {
  background: #4ade80;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.55);
  animation: none;
}

/* Analyse terminée */

.advisor-analyse-terminee {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  animation: advisor-question-entree 0.6s
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.advisor-analyse-validation {
  width: 75px;
  height: 75px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 24px;
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
  box-shadow:
    0 0 38px rgba(34, 197, 94, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-size: 1.7rem;
}

.advisor-analyse-terminee .advisor-navigation-principale {
  justify-self: auto;
  margin-top: 29px;
}

/* Animations */

@keyframes advisor-question-entree {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes advisor-analyse-rotation {
  to {
    transform: rotate(360deg);
  }
}

@keyframes advisor-analyse-pulse {
  0%,
  100% {
    box-shadow:
      0 0 42px rgba(139, 92, 246, 0.19),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  50% {
    box-shadow:
      0 0 70px rgba(139, 92, 246, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

@keyframes advisor-etape-pulse {
  50% {
    transform: scale(1.35);
  }
}

/* Responsive */

@media (max-width: 800px) {
  .advisor-reponses {
    grid-template-columns: 1fr;
  }

  .advisor-analyse {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .advisor-analyse-contenu > p {
    margin-inline: auto;
  }

  .advisor-analyse-etapes {
    max-width: 360px;
    margin-inline: auto;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .advisor-reponse {
    grid-template-columns: 45px minmax(0, 1fr) 21px;
    gap: 13px;
    min-height: 105px;
    padding: 16px 15px;
  }

  .advisor-reponse-icone {
    width: 45px;
    height: 45px;
    border-radius: 12px;
  }

  .advisor-navigation {
    grid-template-columns: 1fr 1fr;
  }

  .advisor-navigation-position {
    display: none;
  }

  .advisor-navigation-principale,
  .advisor-navigation-secondaire {
    width: 100%;
  }

  .advisor-analyse-visuel {
    width: 220px;
    height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advisor-question,
  .advisor-analyse,
  .advisor-analyse-terminee,
  .advisor-analyse-orbite,
  .advisor-analyse-coeur,
  .advisor-analyse-etapes span.actif i {
    animation: none;
  }
}

/* =========================================================
   CHIVARYN ADVISOR — RECOMMANDATION FINALE
========================================================= */

.advisor-resultat {
  --advisor-resultat-accent: 139, 92, 246;

  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.advisor-resultat.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Entête */

.advisor-resultat-entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: clamp(35px, 7vw, 85px);
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.advisor-resultat-identite {
  max-width: 720px;
}

.advisor-resultat-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  color: rgb(var(--advisor-resultat-accent));
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.advisor-resultat-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--advisor-resultat-accent));
  box-shadow:
    0 0 14px rgba(var(--advisor-resultat-accent), 0.75);
}

.advisor-resultat-identite h3 {
  max-width: 700px;
  margin-bottom: 17px;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.advisor-resultat-identite h3 span {
  color: transparent;
  background: linear-gradient(
    135deg,
    #c4b5fd,
    rgb(var(--advisor-resultat-accent)),
    #38bdf8
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.advisor-resultat-identite p {
  max-width: 680px;
  color: #9f9aaa;
  font-size: 0.94rem;
  line-height: 1.75;
}

/* Score circulaire */

.advisor-resultat-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.advisor-score-cercle {
  --advisor-score: 90;

  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(
      circle closest-side,
      #0e0c18 82%,
      transparent 83% 99%
    ),
    conic-gradient(
      rgb(var(--advisor-resultat-accent))
        calc(var(--advisor-score) * 1%),
      rgba(255, 255, 255, 0.075) 0
    );
  box-shadow:
    0 0 45px rgba(var(--advisor-resultat-accent), 0.12),
    inset 0 0 30px rgba(var(--advisor-resultat-accent), 0.06);
}

.advisor-score-cercle::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
}

.advisor-score-cercle > div {
  position: relative;
  z-index: 2;
  text-align: center;
}

.advisor-score-cercle strong {
  display: block;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.advisor-score-cercle span {
  display: block;
  margin-top: 7px;
  color: #827d8c;
  font-size: 0.49rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.advisor-resultat-score > small {
  color: #6f6a78;
  font-size: 0.59rem;
  text-align: center;
}

/* Contenu principal */

.advisor-resultat-principal {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 22px;
  margin-top: 27px;
}

.advisor-resultat-solution,
.advisor-resultat-resume {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 23px;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(var(--advisor-resultat-accent), 0.13),
      transparent 38%
    ),
    rgba(255, 255, 255, 0.022);
  box-shadow:
    0 25px 65px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.advisor-resultat-solution {
  padding: clamp(25px, 4vw, 38px);
}

.advisor-resultat-solution::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -120px;
  width: 330px;
  height: 330px;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(var(--advisor-resultat-accent), 0.14);
  filter: blur(75px);
}

.advisor-resultat-solution-haut {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 17px;
}

.advisor-resultat-icone {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  flex: 0 0 60px;
  border: 1px solid
    rgba(var(--advisor-resultat-accent), 0.4);
  border-radius: 17px;
  background:
    rgba(var(--advisor-resultat-accent), 0.13);
  box-shadow:
    0 15px 35px
      rgba(var(--advisor-resultat-accent), 0.12);
  font-size: 1.35rem;
}

.advisor-resultat-solution-haut small {
  display: block;
  margin-bottom: 6px;
  color: rgb(var(--advisor-resultat-accent));
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.advisor-resultat-solution-haut h4 {
  color: #ffffff;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.advisor-resultat-accroche {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 25px 0;
  color: #d7d3df;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.65;
}

.advisor-resultat-niveau {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 25px;
  padding: 17px 19px;
  border: 1px solid
    rgba(var(--advisor-resultat-accent), 0.22);
  border-radius: 15px;
  background:
    rgba(var(--advisor-resultat-accent), 0.075);
}

.advisor-resultat-niveau small {
  display: block;
  margin-bottom: 4px;
  color: #817c8b;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.advisor-resultat-niveau strong {
  color: #ffffff;
  font-size: 1.05rem;
}

.advisor-resultat-niveau > span {
  padding: 7px 10px;
  border: 1px solid
    rgba(var(--advisor-resultat-accent), 0.3);
  border-radius: 999px;
  color: rgb(var(--advisor-resultat-accent));
  background:
    rgba(var(--advisor-resultat-accent), 0.09);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-align: center;
}

.advisor-resultat-description {
  position: relative;
  z-index: 2;
  color: #9994a4;
  font-size: 0.87rem;
  line-height: 1.75;
}

.advisor-resultat-benefices {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 18px;
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.advisor-resultat-benefices span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c8c4d0;
  font-size: 0.78rem;
}

.advisor-resultat-benefices i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  flex: 0 0 19px;
  border: 1px solid
    rgba(var(--advisor-resultat-accent), 0.32);
  border-radius: 50%;
  color: #86efac;
  background:
    rgba(var(--advisor-resultat-accent), 0.08);
  font-size: 0.53rem;
  font-style: normal;
}

/* Résumé */

.advisor-resultat-resume {
  padding: 27px 24px;
}

.advisor-resultat-resume-titre {
  display: block;
  margin-bottom: 21px;
  color: #898491;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.advisor-resultat-resume-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.advisor-resultat-resume-ligne > span {
  color: #777280;
  font-size: 0.7rem;
}

.advisor-resultat-resume-ligne > strong {
  color: #e7e3ec;
  font-size: 0.72rem;
  text-align: right;
}

.advisor-resultat-intensite {
  display: flex;
  gap: 4px;
}

.advisor-resultat-intensite i {
  width: 18px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.advisor-resultat-intensite i.actif {
  background: rgb(var(--advisor-resultat-accent));
  box-shadow:
    0 0 9px
      rgba(var(--advisor-resultat-accent), 0.45);
}

.advisor-resultat-resume-bloc {
  margin-top: 21px;
  padding: 18px;
  border: 1px solid
    rgba(var(--advisor-resultat-accent), 0.18);
  border-radius: 14px;
  background:
    rgba(var(--advisor-resultat-accent), 0.06);
}

.advisor-resultat-resume-bloc small,
.advisor-resultat-resume-bloc strong,
.advisor-resultat-resume-bloc span {
  display: block;
}

.advisor-resultat-resume-bloc small {
  margin-bottom: 7px;
  color: #777280;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.advisor-resultat-resume-bloc strong {
  margin-bottom: 4px;
  color: #f2eff6;
  font-size: 0.83rem;
}

.advisor-resultat-resume-bloc span {
  color: #8f8998;
  font-size: 0.68rem;
}

.advisor-resultat-confiance {
  margin-top: 17px;
}

.advisor-resultat-confiance > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #ccc7d4;
  font-size: 0.68rem;
  font-weight: 750;
}

.advisor-resultat-confiance > span i {
  color: rgb(var(--advisor-resultat-accent));
  font-style: normal;
}

.advisor-resultat-confiance p {
  color: #736e7b;
  font-size: 0.65rem;
  line-height: 1.6;
}

/* Actions */

.advisor-resultat-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.advisor-resultat-bouton {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 19px;
  border-radius: 13px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.advisor-resultat-bouton-principal {
  border: 1px solid
    rgba(var(--advisor-resultat-accent), 0.45);
  color: #ffffff;
  background: linear-gradient(
    135deg,
    rgba(var(--advisor-resultat-accent), 0.95),
    #7c3aed,
    #2563eb
  );
  box-shadow:
    0 15px 35px
      rgba(var(--advisor-resultat-accent), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.advisor-resultat-bouton-principal:hover {
  transform: translateY(-3px);
}

.advisor-resultat-bouton-principal span {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.advisor-resultat-bouton-principal:hover span {
  transform: translateX(4px);
}

.advisor-resultat-bouton-secondaire {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d3ceda;
  background: rgba(255, 255, 255, 0.025);
}

.advisor-resultat-bouton-secondaire:hover {
  border-color:
    rgba(var(--advisor-resultat-accent), 0.36);
  background:
    rgba(var(--advisor-resultat-accent), 0.07);
}

.advisor-resultat-recommencer {
  margin-left: auto;
  padding: 9px 0;
  border: 0;
  color: #77717f;
  background: transparent;
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
  transition: color 0.25s ease;
}

.advisor-resultat-recommencer:hover {
  color: #c8c3cf;
}

.advisor-resultat-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.advisor-resultat-note > span {
  color: #817b8a;
  font-size: 0.75rem;
}

.advisor-resultat-note p {
  max-width: 730px;
  color: #686370;
  font-size: 0.63rem;
  line-height: 1.55;
}

/* Mise en avant dans le comparateur */

.offre-recommandee-par-advisor {
  position: relative;
  z-index: 4;
  border-color: rgba(192, 132, 252, 0.85) !important;
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, 0.16),
    0 30px 75px rgba(76, 29, 149, 0.35),
    0 0 55px rgba(168, 85, 247, 0.2) !important;
  animation: advisor-offre-recommandee 1.25s
    ease-in-out 2;
}

@keyframes advisor-offre-recommandee {
  50% {
    transform: translateY(-7px);
    filter: brightness(1.13);
  }
}

/* Responsive */

@media (max-width: 900px) {
  .advisor-resultat-entete {
    grid-template-columns: 1fr;
  }

  .advisor-resultat-score {
    align-items: flex-start;
  }

  .advisor-resultat-principal {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .advisor-resultat-score {
    align-items: center;
  }

  .advisor-resultat-identite {
    text-align: center;
  }

  .advisor-resultat-label {
    justify-content: center;
  }

  .advisor-resultat-identite h3 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .advisor-resultat-benefices {
    grid-template-columns: 1fr;
  }

  .advisor-resultat-niveau {
    align-items: flex-start;
    flex-direction: column;
  }

  .advisor-resultat-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .advisor-resultat-bouton {
    width: 100%;
  }

  .advisor-resultat-recommencer {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advisor-resultat,
  .offre-recommandee-par-advisor {
    animation: none;
    transition: none;
  }
}

/* =========================================================
   ADVISOR — TRANSITION VERS L’OFFRE RECOMMANDÉE
========================================================= */

.offre-recommandee-par-advisor {
  position: relative;
  z-index: 8;
  border-color: rgba(192, 132, 252, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, 0.2),
    0 32px 85px rgba(76, 29, 149, 0.42),
    0 0 65px rgba(168, 85, 247, 0.28) !important;
  animation: advisor-ciblage-offre 0.75s ease both;
}

.offre-recommandee-par-advisor::after {
  content: "RECOMMANDATION ADVISOR";
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 20;
  padding: 7px 11px;
  border: 1px solid rgba(216, 180, 254, 0.4);
  border-radius: 999px;
  color: #f3e8ff;
  background: rgba(88, 28, 135, 0.9);
  box-shadow: 0 10px 30px rgba(76, 29, 149, 0.38);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(15px);
}

@keyframes advisor-ciblage-offre {
  from {
    opacity: 0.7;
    transform: translateY(18px) scale(0.97);
    filter: brightness(0.85);
  }

  to {
    opacity: 1;
    transform: translateY(-7px) scale(1);
    filter: brightness(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .offre-recommandee-par-advisor {
    animation: none;
  }
}

/* =========================================================
   CHIVARYN ADVISOR — FINITIONS RESPONSIVE & ACCESSIBILITÉ
========================================================= */

/* Focus clavier visible */

.advisor-carte:focus-visible,
.advisor-reponse:focus-visible,
.advisor-retour:focus-visible,
.advisor-navigation-secondaire:focus-visible,
.advisor-navigation-principale:focus-visible,
.advisor-resultat-bouton:focus-visible,
.advisor-resultat-recommencer:focus-visible,
.offre-tab:focus-visible {
  outline: 2px solid rgba(216, 180, 254, 0.95);
  outline-offset: 4px;
  box-shadow:
    0 0 0 5px rgba(139, 92, 246, 0.18),
    0 0 28px rgba(139, 92, 246, 0.22);
}

/* Évite que les longs textes débordent */

.advisor-carte,
.advisor-reponse,
.advisor-resultat-solution,
.advisor-resultat-resume,
.advisor-question,
.advisor-resultat {
  min-width: 0;
}

.advisor-carte strong,
.advisor-reponse strong,
.advisor-resultat h3,
.advisor-resultat h4,
.advisor-resultat p,
.advisor-resultat span {
  overflow-wrap: anywhere;
}

/* Loader du bouton final */

.advisor-resultat-bouton.chargement {
  pointer-events: none;
  opacity: 0.82;
  cursor: wait;
}

.advisor-bouton-loader {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: advisor-loader-rotation 0.75s linear infinite;
}

@keyframes advisor-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}

/* Tablettes */

@media (max-width: 900px) {
  .advisor-interface-coquille {
    padding-inline: clamp(18px, 4vw, 30px);
  }

  .advisor-question-entete {
    margin-bottom: 30px;
  }

  .advisor-reponses {
    max-width: 720px;
  }

  .advisor-resultat-entete {
    gap: 30px;
  }

  .advisor-resultat-score {
    justify-self: center;
  }

  .advisor-resultat-actions {
    flex-wrap: wrap;
  }

  .advisor-resultat-recommencer {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
}

/* Mobiles */

@media (max-width: 600px) {
  #advisor-interface,
  #offres-comparateur,
  #advisor-choix {
    scroll-margin-top: 82px;
  }

  .advisor-introduction {
    gap: 25px;
    margin-bottom: 31px;
  }

  .advisor-introduction-contenu > p {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .advisor-choix-entete h3 {
    font-size: clamp(1.65rem, 8vw, 2.25rem);
  }

  .advisor-choix-entete p {
    font-size: 0.85rem;
  }

  .advisor-carte {
    padding: 22px 18px;
  }

  .advisor-carte-recommande {
    position: static;
    width: fit-content;
    margin: 0 0 20px auto;
  }

  .advisor-carte-icone {
    margin-bottom: 22px;
  }

  .advisor-carte-contenu strong {
    font-size: 1.25rem;
  }

  .advisor-carte-avantages {
    margin-block: 22px;
  }

  .advisor-interface-coquille {
    padding: 20px 14px;
  }

  .advisor-interface-entete {
    margin-bottom: 28px;
  }

  .advisor-progression-infos {
    gap: 10px;
    font-size: 0.61rem;
  }

  .advisor-question-entete {
    margin-bottom: 25px;
  }

  .advisor-question-entete h3 {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
  }

  .advisor-question-entete p {
    font-size: 0.82rem;
    line-height: 1.65;
  }

  .advisor-question-categorie {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }

  .advisor-reponse {
    grid-template-columns: 42px minmax(0, 1fr) 19px;
    gap: 11px;
    padding: 15px 13px;
    border-radius: 15px;
  }

  .advisor-reponse-icone {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .advisor-reponse-contenu strong {
    font-size: 0.85rem;
  }

  .advisor-reponse-contenu > span {
    font-size: 0.7rem;
  }

  .advisor-navigation {
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
  }

  .advisor-navigation-secondaire,
  .advisor-navigation-principale {
    min-height: 47px;
    padding-inline: 12px;
    font-size: 0.69rem;
  }

  .advisor-analyse {
    min-height: 400px;
    gap: 25px;
  }

  .advisor-analyse-visuel {
    width: 190px;
    height: 190px;
  }

  .advisor-analyse-coeur {
    width: 98px;
    height: 98px;
    border-radius: 27px;
  }

  .advisor-analyse-coeur strong {
    font-size: 1.7rem;
  }

  .advisor-analyse-contenu h3,
  .advisor-analyse-terminee h3 {
    font-size: clamp(1.7rem, 9vw, 2.35rem);
  }

  .advisor-resultat-entete {
    padding-bottom: 28px;
  }

  .advisor-score-cercle {
    width: 130px;
    height: 130px;
  }

  .advisor-score-cercle strong {
    font-size: 1.7rem;
  }

  .advisor-resultat-solution,
  .advisor-resultat-resume {
    border-radius: 18px;
  }

  .advisor-resultat-solution {
    padding: 22px 17px;
  }

  .advisor-resultat-solution-haut {
    align-items: flex-start;
  }

  .advisor-resultat-icone {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .advisor-resultat-accroche {
    font-size: 0.9rem;
  }

  .advisor-resultat-description {
    font-size: 0.8rem;
  }

  .advisor-resultat-resume {
    padding: 22px 18px;
  }

  .advisor-resultat-resume-ligne {
    align-items: flex-start;
  }

  .advisor-resultat-actions {
    gap: 10px;
  }

  .advisor-resultat-bouton {
    min-height: 49px;
    padding-inline: 14px;
    font-size: 0.7rem;
  }

  .advisor-resultat-note {
    padding-inline: 2px;
  }
}

/* Très petits écrans */

@media (max-width: 390px) {
  .advisor-choix {
    padding-inline: 13px;
  }

  .advisor-carte {
    padding-inline: 15px;
  }

  .advisor-reponse {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    gap: 9px;
    padding-inline: 11px;
  }

  .advisor-reponse-icone {
    width: 38px;
    height: 38px;
  }

  .advisor-navigation {
    grid-template-columns: 1fr;
  }

  .advisor-navigation-secondaire,
  .advisor-navigation-principale {
    justify-self: stretch;
  }

  .advisor-navigation-principale {
    grid-row: 1;
  }

  .advisor-resultat-niveau > span {
    max-width: 100%;
    white-space: normal;
  }
}

/* Appareils tactiles */

@media (hover: none) {
  .advisor-carte:hover,
  .advisor-reponse:hover,
  .advisor-resultat-bouton:hover {
    transform: none;
  }

  .advisor-carte:active,
  .advisor-reponse:active,
  .advisor-resultat-bouton:active {
    transform: scale(0.985);
  }
}

/* Réduction des animations */

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

  .advisor-bouton-loader {
    animation-duration: 1.5s;
  }

  .advisor-carte,
  .advisor-reponse,
  .advisor-resultat-bouton {
    transition-duration: 0.01ms;
  }
}

/* =========================================================
   CHIVARYN ADVISOR — DERNIÈRES FINITIONS MOBILE
========================================================= */

@media (max-width: 600px) {
  .advisor-resultat {
    padding-bottom: 28px;
  }

  .advisor-resultat-actions {
    margin-bottom: 8px;
  }

  .advisor-resultat-note {
    margin-bottom: 12px;
  }

  .modal-offre-contenu {
    padding-bottom: max(
      24px,
      env(safe-area-inset-bottom)
    );
  }

  .product-experience-navigation {
    position: sticky;
    top: 0;
    z-index: 15;
    overflow-x: auto;
    display: flex;
    gap: 8px;
    padding-block: 10px;
    background: rgba(10, 8, 18, 0.92);
    backdrop-filter: blur(16px);
    scrollbar-width: none;
  }

  .product-experience-navigation::-webkit-scrollbar {
    display: none;
  }

  .product-experience-navigation a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* =========================================================
   PACKS AVANTAGE — INTRODUCTION SIGNATURE
========================================================= */

.packs-avantage {
  position: relative;
  margin-top: clamp(75px, 10vw, 145px);
  padding-top: clamp(55px, 7vw, 90px);
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.packs-avantage::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  width: min(900px, 85vw);
  height: 320px;
  pointer-events: none;
  opacity: 0.8;
  background: radial-gradient(
    ellipse,
    rgba(124, 58, 237, 0.13),
    transparent 68%
  );
  filter: blur(18px);
  transform: translateX(-50%);
}

/* Introduction */

.packs-avantage-introduction {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  align-items: end;
  gap: clamp(45px, 7vw, 90px);
  margin-bottom: 38px;
}

.packs-avantage-identite {
  max-width: 790px;
}

.packs-avantage-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #c084fc;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.packs-avantage-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow:
    0 0 13px rgba(168, 85, 247, 0.9),
    0 0 27px rgba(168, 85, 247, 0.4);
}

.packs-avantage-identite h3 {
  max-width: 800px;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: clamp(2.35rem, 4.7vw, 4.35rem);
  line-height: 1.01;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.packs-avantage-identite h3 span {
  display: block;
  color: transparent;
  background: linear-gradient(
    135deg,
    #ddd6fe,
    #a855f7 48%,
    #38bdf8
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.packs-avantage-identite > p {
  max-width: 690px;
  color: #9f9aaa;
  font-size: 0.96rem;
  line-height: 1.78;
}

/* Synthèse à droite */

.packs-avantage-synthese {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(139, 92, 246, 0.12),
      transparent 45%
    ),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.packs-avantage-indicateur {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-height: 88px;
  padding: 17px 20px;
}

.packs-avantage-indicateur > strong {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 85, 247, 0.27);
  border-radius: 13px;
  color: #e9d5ff;
  background: rgba(139, 92, 246, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 1.05rem;
}

.packs-avantage-indicateur > span {
  color: #a6a1af;
  font-size: 0.72rem;
  line-height: 1.45;
}

.packs-avantage-indicateur small {
  display: block;
  margin-bottom: 4px;
  color: #ece8f2;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.packs-avantage-separateur {
  height: 1px;
  margin-inline: 20px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.085),
    transparent
  );
}

/* Parcours */

.packs-avantage-parcours {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
  padding: 15px 19px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
}

.packs-avantage-parcours > span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #918c9a;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
}

.packs-avantage-parcours strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border: 1px solid rgba(139, 92, 246, 0.27);
  border-radius: 8px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.08);
  font-size: 0.58rem;
}

.packs-avantage-parcours > i {
  color: #514c5a;
  font-size: 0.72rem;
  font-style: normal;
}

/* Apparition */

.packs-avantage-introduction,
.packs-avantage-parcours {
  animation: packs-introduction-entree 0.75s
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.packs-avantage-parcours {
  animation-delay: 0.08s;
}

@keyframes packs-introduction-entree {
  from {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Tablette */

@media (max-width: 950px) {
  .packs-avantage-introduction {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .packs-avantage-synthese {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .packs-avantage-separateur {
    width: 1px;
    height: auto;
    margin-block: 17px;
    margin-inline: 0;
    background: linear-gradient(
      transparent,
      rgba(255, 255, 255, 0.085),
      transparent
    );
  }

  .packs-avantage-indicateur {
    grid-template-columns: 42px minmax(0, 1fr);
    padding-inline: 15px;
  }

  .packs-avantage-parcours {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .packs-avantage-parcours > i {
    display: none;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .packs-avantage {
    margin-top: 80px;
    padding-top: 55px;
  }

  .packs-avantage-introduction {
    gap: 30px;
    margin-bottom: 28px;
  }

  .packs-avantage-identite {
    text-align: center;
  }

  .packs-avantage-label {
    justify-content: center;
  }

  .packs-avantage-identite h3 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .packs-avantage-identite > p {
    font-size: 0.85rem;
    line-height: 1.7;
  }

  .packs-avantage-synthese {
    display: block;
  }

  .packs-avantage-separateur {
    width: auto;
    height: 1px;
    margin: 0 17px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.085),
      transparent
    );
  }

  .packs-avantage-indicateur {
    min-height: 80px;
  }

  .packs-avantage-parcours {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 13px;
  }

  .packs-avantage-parcours > span {
    min-height: 45px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
  }
}

@media (prefers-reduced-motion: reduce) {
  .packs-avantage-introduction,
  .packs-avantage-parcours {
    animation: none;
  }
}

/* =========================================================
   PACKS AVANTAGE — AJUSTEMENT D’ESPACEMENT
========================================================= */

.packs-avantage-parcours {
  margin-bottom: 46px;
}

@media (max-width: 650px) {
  .packs-avantage-parcours {
    margin-bottom: 32px;
  }
}

/* =========================================================
   PACKS AVANTAGE — CARTES SIGNATURE
========================================================= */

.packs-grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

/* Base */

.pack-carte {
  --pack-accent: var(--level-business-rgb);

  position: relative;
  min-width: 0;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 25px 22px 22px;
  border: 1px solid rgba(var(--pack-accent), 0.22);
  border-radius: 23px;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(var(--pack-accent), 0.15),
      transparent 38%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.014)
    );
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.pack-launch {
  --pack-accent: var(--level-essential-rgb);
}

.pack-growth {
  --pack-accent: var(--level-business-rgb);
}

.pack-scale {
  --pack-accent: var(--level-premium-rgb);
}

.pack-signature {
  --pack-accent: var(--level-signature-rgb);

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(var(--level-signature-rgb), 0.21),
      transparent 38%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(var(--level-signature-bright-rgb), 0.08),
      transparent 42%
    ),
    linear-gradient(
      150deg,
      rgba(34, 25, 10, 0.94),
      rgba(9, 9, 18, 0.98)
    );
}

.pack-populaire {
  border-color: rgba(var(--pack-accent), 0.52);
  box-shadow:
    0 32px 85px rgba(76, 29, 149, 0.29),
    0 0 45px rgba(var(--pack-accent), 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pack-carte:hover {
  z-index: 4;
  transform: translateY(-10px);
  border-color: rgba(var(--pack-accent), 0.7);
  box-shadow:
    0 42px 95px rgba(0, 0, 0, 0.42),
    0 0 55px rgba(var(--pack-accent), 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* Lueur */

.pack-lueur {
  position: absolute;
  top: -150px;
  right: -150px;
  width: 320px;
  height: 320px;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(var(--pack-accent), 0.14);
  filter: blur(75px);
  transition: transform 0.5s ease;
}

.pack-carte:hover .pack-lueur {
  transform: scale(1.3);
}

/* Ruban */

.pack-ruban {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 4;
  padding: 8px 11px;
  border-radius: 0 0 10px 10px;
  color: #f3e8ff;
  background: linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  );
  box-shadow: 0 12px 28px rgba(88, 28, 135, 0.36);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.pack-ruban-signature {
  color: #e0f2fe;
  background: linear-gradient(
    135deg,
    #0369a1,
    #2563eb,
    #7c3aed
  );
}

/* Entête */

.pack-carte-entete {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 28px;
}

.pack-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--pack-accent));
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.pack-badge i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--pack-accent), 0.32);
  border-radius: 8px;
  background: rgba(var(--pack-accent), 0.09);
  font-size: 0.54rem;
  font-style: normal;
}

.pack-icone {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--pack-accent), 0.34);
  border-radius: 12px;
  color: #ffffff;
  background: rgba(var(--pack-accent), 0.11);
  box-shadow:
    0 12px 28px rgba(var(--pack-accent), 0.1);
  font-size: 1rem;
}

/* Identité */

.pack-identite {
  position: relative;
  z-index: 2;
}

.pack-identite small {
  display: block;
  margin-bottom: 8px;
  color: #74707d;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.pack-identite h4 {
  margin-bottom: 13px;
  color: #ffffff;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.pack-identite p {
  min-height: 77px;
  color: #9b96a5;
  font-size: 0.79rem;
  line-height: 1.65;
}

/* Prix */

.pack-prix {
  position: relative;
  z-index: 2;
  margin: 25px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pack-prix small,
.pack-prix strong,
.pack-prix span {
  display: block;
}

.pack-prix small {
  margin-bottom: 7px;
  color: #74707e;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.pack-prix strong {
  color: #ffffff;
  font-size: clamp(1.75rem, 2.4vw, 2.45rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.pack-prix span {
  margin-top: 8px;
  color: rgb(var(--pack-accent));
  font-size: 0.61rem;
  font-weight: 750;
}

/* Inclus */

.pack-inclusions {
  position: relative;
  z-index: 2;
}

.pack-inclusions-titre {
  display: block;
  margin-bottom: 14px;
  color: #74707e;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.pack-inclusions ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pack-inclusions li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #cbc7d3;
  font-size: 0.72rem;
  line-height: 1.4;
}

.pack-inclusions li i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  border: 1px solid rgba(var(--pack-accent), 0.32);
  border-radius: 50%;
  color: #86efac;
  background: rgba(var(--pack-accent), 0.08);
  font-size: 0.51rem;
  font-style: normal;
}

/* Économie */

.pack-economie {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 17px;
  padding: 13px 14px;
  border: 1px solid rgba(var(--pack-accent), 0.19);
  border-radius: 12px;
  background: rgba(var(--pack-accent), 0.06);
}

.pack-economie span {
  color: #777280;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.pack-economie strong {
  color: rgb(var(--pack-accent));
  font-size: 0.72rem;
  text-align: right;
}

.pack-economie-signature strong {
  color: #e0f2fe;
}

/* Bouton */

.pack-carte .btn-configurer {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 0 16px;
  border: 1px solid rgba(var(--pack-accent), 0.35);
  border-radius: 13px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      rgba(var(--pack-accent), 0.22),
      rgba(var(--pack-accent), 0.08)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 0.73rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.pack-populaire .btn-configurer,
.pack-signature .btn-configurer {
  background: linear-gradient(135deg, rgba(var(--pack-accent), .74), var(--level-business-deep));
  box-shadow:
    0 15px 35px rgba(var(--pack-accent), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pack-signature .btn-configurer { background: linear-gradient(135deg,var(--level-signature-deep),#5f4315); }

.pack-carte .btn-configurer:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--pack-accent), 0.7);
}

.pack-carte .btn-configurer i {
  font-style: normal;
  font-size: 0.95rem;
  transition: transform 0.3s ease;
}

.pack-carte .btn-configurer:hover i {
  transform: translateX(4px);
}

/* Responsive */

@media (max-width: 1100px) {
  .packs-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pack-carte {
    min-height: 590px;
  }
}

@media (max-width: 650px) {
  .packs-grille {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .pack-carte {
    min-height: auto;
    padding: 22px 18px 18px;
  }

  .pack-identite p {
    min-height: 0;
  }

  .pack-ruban {
    right: 17px;
  }

  .pack-economie {
    margin-top: 24px;
  }
}

@media (hover: none) {
  .pack-carte:hover,
  .pack-carte .btn-configurer:hover {
    transform: none;
  }

  .pack-carte:active {
    transform: scale(0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-carte,
  .pack-carte .btn-configurer,
  .pack-lueur {
    transition: none;
  }
}


/* =========================================================
   CONFIGURATEUR CTA — PRODUCT EXPERIENCE
========================================================= */

.configurateur-cta {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(310px, 0.65fr);
  align-items: center;
  gap: clamp(45px, 7vw, 95px);
  overflow: hidden;
  margin-top: clamp(70px, 9vw, 125px);
  padding: clamp(38px, 5vw, 68px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 31px;
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(124, 58, 237, 0.18),
      transparent 35%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(14, 165, 233, 0.12),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(20, 15, 36, 0.97),
      rgba(8, 8, 15, 0.99)
    );
  box-shadow:
    0 45px 110px rgba(0, 0, 0, 0.4),
    0 0 70px rgba(91, 33, 182, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

/* Fond */

.configurateur-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background:
    linear-gradient(
      105deg,
      transparent 0 48%,
      rgba(255, 255, 255, 0.035) 49%,
      transparent 50%
    );
}

.configurateur-cta-grille {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
  mask-image: radial-gradient(
    circle at center,
    black,
    transparent 82%
  );
}

.configurateur-cta-lueur {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(95px);
}

.configurateur-cta-lueur-gauche {
  top: -190px;
  left: -180px;
  width: 430px;
  height: 430px;
  background: rgba(126, 34, 206, 0.2);
}

.configurateur-cta-lueur-droite {
  right: -150px;
  bottom: -200px;
  width: 410px;
  height: 410px;
  background: rgba(14, 165, 233, 0.14);
}

/* Contenu */

.configurateur-cta-contenu {
  position: relative;
  z-index: 3;
  max-width: 790px;
}

.configurateur-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #c084fc;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.configurateur-cta-label > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow:
    0 0 13px rgba(168, 85, 247, 0.95),
    0 0 28px rgba(168, 85, 247, 0.45);
}

.configurateur-cta-contenu h3 {
  max-width: 760px;
  margin-bottom: 21px;
  color: #ffffff;
  font-size: clamp(2.4rem, 5vw, 4.65rem);
  line-height: 0.99;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.configurateur-cta-contenu h3 span {
  display: block;
  color: transparent;
  background: linear-gradient(
    135deg,
    #e9d5ff,
    #a855f7 47%,
    #38bdf8
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.configurateur-cta-contenu > p {
  max-width: 680px;
  color: #a09baa;
  font-size: 0.96rem;
  line-height: 1.8;
}

/* Étapes */

.configurateur-cta-etapes {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin-top: 35px;
  padding-top: 27px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.configurateur-cta-etapes > span {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #aaa5b2;
  font-size: 0.67rem;
  line-height: 1.4;
}

.configurateur-cta-etapes > span > strong {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 9px;
  color: #d8b4fe;
  background: rgba(139, 92, 246, 0.09);
  font-size: 0.58rem;
}

.configurateur-cta-etapes > span > span {
  min-width: 0;
}

.configurateur-cta-etapes small {
  display: block;
  margin-bottom: 3px;
  color: #706b79;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.configurateur-cta-etapes > i {
  color: #4f4a57;
  font-size: 0.72rem;
  font-style: normal;
}

/* Colonne action */

.configurateur-cta-action {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 27px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 23px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(139, 92, 246, 0.13),
      transparent 47%
    ),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.configurateur-cta-systeme {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
}

/* Visuel central */

.configurateur-cta-orbite {
  position: relative;
  width: 175px;
  height: 175px;
  display: grid;
  place-items: center;
  margin-bottom: 21px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(139, 92, 246, 0.13),
      transparent 66%
    );
  box-shadow:
    0 0 55px rgba(139, 92, 246, 0.1),
    inset 0 0 25px rgba(139, 92, 246, 0.05);
}

.configurateur-cta-orbite::before,
.configurateur-cta-orbite-interne {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.configurateur-cta-orbite::before {
  inset: 17px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  animation: configurateur-orbite 13s linear infinite;
}

.configurateur-cta-orbite-interne {
  inset: 39px;
  border: 1px dashed rgba(192, 132, 252, 0.19);
  animation: configurateur-orbite 9s linear infinite reverse;
}

.configurateur-cta-coeur {
  position: relative;
  z-index: 3;
  width: 93px;
  height: 93px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(192, 132, 252, 0.38);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(192, 132, 252, 0.23),
      transparent 45%
    ),
    #110d20;
  box-shadow:
    0 0 42px rgba(139, 92, 246, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
}

.configurateur-cta-coeur > * {
  transform: rotate(-45deg);
}

.configurateur-cta-coeur small {
  color: #817b8c;
  font-size: 0.4rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.configurateur-cta-coeur strong {
  margin: 4px 0;
  color: transparent;
  background: linear-gradient(
    135deg,
    #ffffff,
    #c084fc,
    #38bdf8
  );
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 1.65rem;
  line-height: 1;
}

.configurateur-cta-coeur span {
  color: #ddd6fe;
  font-size: 0.41rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.configurateur-cta-disponibilite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.configurateur-cta-disponibilite > span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 13px rgba(74, 222, 128, 0.8);
}

.configurateur-cta-disponibilite small,
.configurateur-cta-disponibilite strong {
  display: block;
}

.configurateur-cta-disponibilite small {
  margin-bottom: 3px;
  color: #74707c;
  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.configurateur-cta-disponibilite strong {
  color: #e6e2ec;
  font-size: 0.67rem;
}

/* Bouton */

.configurateur-cta-bouton {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  padding: 0 19px;
  border: 1px solid rgba(216, 180, 254, 0.3);
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #6d28d9,
    #9333ea 55%,
    #2563eb
  );
  box-shadow:
    0 18px 42px rgba(91, 33, 182, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.17);
  text-decoration: none;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.configurateur-cta-bouton:hover {
  transform: translateY(-4px);
  box-shadow:
    0 25px 55px rgba(91, 33, 182, 0.41),
    0 0 35px rgba(168, 85, 247, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.19);
  filter: brightness(1.07);
}

.configurateur-cta-bouton > span {
  min-width: 0;
}

.configurateur-cta-bouton small,
.configurateur-cta-bouton span {
  display: block;
}

.configurateur-cta-bouton small {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.49rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.configurateur-cta-bouton > span {
  font-size: 0.85rem;
  font-weight: 850;
}

.configurateur-cta-bouton > i {
  font-size: 1.12rem;
  font-style: normal;
  transition: transform 0.3s ease;
}

.configurateur-cta-bouton:hover > i {
  transform: translate(4px, -4px);
}

/* Garanties */

.configurateur-cta-garanties {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 17px;
}

.configurateur-cta-garanties > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #918b99;
  font-size: 0.63rem;
}

.configurateur-cta-garanties i {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 17px;
  border: 1px solid rgba(74, 222, 128, 0.27);
  border-radius: 50%;
  color: #86efac;
  background: rgba(34, 197, 94, 0.07);
  font-size: 0.48rem;
  font-style: normal;
}

/* Animations */

@keyframes configurateur-orbite {
  to {
    transform: rotate(360deg);
  }
}

/* Tablette */

@media (max-width: 950px) {
  .configurateur-cta {
    grid-template-columns: 1fr;
  }

  .configurateur-cta-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 25px;
  }

  .configurateur-cta-systeme {
    margin-bottom: 0;
  }

  .configurateur-cta-garanties {
    grid-column: 2;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .configurateur-cta {
    gap: 32px;
    margin-top: 80px;
    padding: 29px 17px;
    border-radius: 23px;
  }

  .configurateur-cta-contenu {
    text-align: center;
  }

  .configurateur-cta-label {
    justify-content: center;
  }

  .configurateur-cta-contenu h3 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .configurateur-cta-contenu > p {
    font-size: 0.85rem;
    line-height: 1.7;
  }

  .configurateur-cta-etapes {
    grid-template-columns: 1fr;
    gap: 9px;
    text-align: left;
  }

  .configurateur-cta-etapes > i {
    display: none;
  }

  .configurateur-cta-etapes > span {
    min-height: 51px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.018);
  }

  .configurateur-cta-action {
    display: block;
    padding: 23px 17px;
  }

  .configurateur-cta-systeme {
    margin-bottom: 23px;
  }

  .configurateur-cta-orbite {
    width: 155px;
    height: 155px;
  }

  .configurateur-cta-garanties {
    margin-top: 17px;
  }
}

/* Accessibilité */

.configurateur-cta-bouton:focus-visible {
  outline: 2px solid #e9d5ff;
  outline-offset: 5px;
  box-shadow:
    0 0 0 6px rgba(139, 92, 246, 0.2),
    0 22px 50px rgba(91, 33, 182, 0.36);
}

@media (hover: none) {
  .configurateur-cta-bouton:hover {
    transform: none;
  }

  .configurateur-cta-bouton:active {
    transform: scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .configurateur-cta-orbite::before,
  .configurateur-cta-orbite-interne {
    animation: none;
  }

  .configurateur-cta-bouton {
    transition: none;
  }
}

/* =========================================================
   CONFIGURATEUR CTA — AJUSTEMENT FINAL
========================================================= */

.configurateur-cta {
  min-height: 520px;
}

.configurateur-cta-action {
  padding-block: 32px;
}

.configurateur-cta-systeme {
  margin-bottom: 29px;
}

@media (max-width: 950px) {
  .configurateur-cta {
    min-height: auto;
  }
}

@media (max-width: 650px) {
  .configurateur-cta-action {
    padding-block: 25px;
  }
}

/* =========================================================
   PACKS — DESIGN FINAL COMPACT
========================================================= */

.packs-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

/* =========================================================
   CARTE
========================================================= */

.packs-grille .pack-carte,
.packs-grille .pack-launch,
.packs-grille .pack-growth,
.packs-grille .pack-populaire,
.packs-grille .pack-scale,
.packs-grille .pack-signature {
  --pack-step: 0px;

  position: relative;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 20px 19px !important;
  border-radius: 22px;
  transform: none;
  align-self: stretch;
}

/* Empêche les anciens styles de créer du vide */

.packs-grille .pack-carte > * {
  flex-shrink: 0;
}

.packs-grille .pack-carte:hover {
  transform: translateY(-8px);
}

/* =========================================================
   ZONE VISUELLE
========================================================= */

.pack-visuel {
  position: relative;
  z-index: 1;
  width: calc(100% + 40px);
  height: 190px;
  min-height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0 -20px 18px;
  border-bottom: 1px solid rgba(var(--pack-accent), 0.16);
  background:
    radial-gradient(
      circle at 50% 47%,
      rgba(var(--pack-accent), 0.19),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(var(--pack-accent), 0.075),
      rgba(var(--pack-accent), 0.015) 70%,
      transparent
    );
}

.pack-visuel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 27px 27px;
  mask-image: radial-gradient(
    circle at center,
    black,
    transparent 78%
  );
}

.pack-visuel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 120px;
  height: 17px;
  border-radius: 50%;
  background: rgba(var(--pack-accent), 0.28);
  filter: blur(17px);
  transform: translateX(-50%);
}

/* =========================================================
   ENTÊTE SUPERPOSÉ AU VISUEL
========================================================= */

.pack-carte-entete {
  position: absolute;
  top: 17px;
  left: 17px;
  right: 17px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
}

.pack-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--pack-accent));
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.pack-badge i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--pack-accent), 0.42);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(var(--pack-accent), 0.12);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  font-size: 0.57rem;
  font-style: normal;
}

.pack-icone {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--pack-accent), 0.42);
  border-radius: 10px;
  color: #ffffff;
  background: rgba(7, 8, 15, 0.52);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}

/* =========================================================
   RUBANS
========================================================= */

.pack-ruban {
  position: absolute;
  top: 17px !important;
  right: -42px !important;
  z-index: 30;
  width: 165px;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #7c3aed,
    #8b5cf6,
    #6366f1
  );
  box-shadow:
    0 10px 25px rgba(76, 29, 149, 0.35);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  transform: rotate(42deg);
}

.pack-ruban-signature {
  right: -44px !important;
  background: linear-gradient(
    135deg,
    #0284c7,
    #2563eb,
    #7c3aed
  );
}

/* =========================================================
   PLANÈTES
========================================================= */

.pack-planete {
  position: relative;
  width: 125px;
  height: 125px;
  display: grid;
  place-items: center;
  margin-top: 20px;
  animation: pack-flottement 5s ease-in-out infinite;
}

.pack-planete-surface {
  position: relative;
  z-index: 4;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(var(--pack-accent), 0.85);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255, 255, 255, 0.8),
      transparent 7%
    ),
    radial-gradient(
      circle at 38% 34%,
      rgba(var(--pack-accent), 0.98),
      rgba(var(--pack-accent), 0.45) 40%,
      rgba(4, 10, 15, 0.98) 79%
    );
  box-shadow:
    inset -18px -18px 28px rgba(0, 0, 0, 0.6),
    inset 10px 10px 18px rgba(255, 255, 255, 0.08),
    0 0 24px rgba(var(--pack-accent), 0.5),
    0 0 55px rgba(var(--pack-accent), 0.2);
}

.pack-planete-growth .pack-planete-surface {
  width: 90px;
  height: 90px;
}

.pack-planete-anneau {
  position: absolute;
  z-index: 5;
  width: 135px;
  height: 42px;
  border: 2px solid rgba(var(--pack-accent), 0.76);
  border-radius: 50%;
  box-shadow:
    0 0 12px rgba(var(--pack-accent), 0.47),
    inset 0 0 11px rgba(var(--pack-accent), 0.22);
  transform: rotate(-14deg);
  animation: pack-anneau-rotation 9s linear infinite;
}

.pack-planete-anneau-2 {
  width: 118px;
  height: 34px;
  border-width: 1px;
  opacity: 0.55;
  animation-duration: 13s;
  animation-direction: reverse;
}

.pack-planete-point {
  position: absolute;
  z-index: 8;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--pack-accent));
  box-shadow:
    0 0 9px rgb(var(--pack-accent)),
    0 0 18px rgba(var(--pack-accent), 0.8);
}

.pack-planete-point-1 {
  top: 18px;
  right: 5px;
}

.pack-planete-point-2 {
  bottom: 18px;
  left: 5px;
}

.pack-planete-point-3 {
  top: 60px;
  left: -1px;
  width: 3px;
  height: 3px;
}

/* =========================================================
   CUBE SCALE
========================================================= */

.pack-cube {
  position: relative;
  z-index: 5;
  width: 105px;
  height: 94px;
  margin-top: 25px;
  animation: pack-flottement 4.5s ease-in-out infinite;
}

.pack-cube-face {
  position: absolute;
  border: 1px solid rgba(var(--pack-accent), 0.76);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      rgba(var(--pack-accent), 0.52),
      rgba(20, 7, 18, 0.95)
    );
  box-shadow:
    inset 0 0 20px rgba(var(--pack-accent), 0.22),
    0 0 22px rgba(var(--pack-accent), 0.3);
}

.pack-cube-face-haut {
  top: 0;
  left: 19px;
  width: 69px;
  height: 67px;
  clip-path: polygon(
    50% 0,
    100% 28%,
    50% 58%,
    0 28%
  );
}

.pack-cube-face-gauche {
  top: 19px;
  left: 19px;
  width: 68px;
  height: 72px;
  clip-path: polygon(
    0 0,
    50% 28%,
    50% 100%,
    0 72%
  );
}

.pack-cube-face-droite {
  top: 19px;
  left: 53px;
  width: 68px;
  height: 72px;
  clip-path: polygon(
    0 28%,
    50% 0,
    50% 72%,
    0 100%
  );
}

.pack-cube-coeur {
  position: absolute;
  z-index: 9;
  top: 43px;
  left: 43px;
  width: 32px;
  height: 15px;
  border-radius: 50%;
  background: rgba(var(--pack-accent), 0.9);
  box-shadow:
    0 0 13px rgb(var(--pack-accent)),
    0 0 34px rgba(var(--pack-accent), 0.85);
}

.pack-cube-orbite {
  position: absolute;
  width: 165px;
  height: 48px;
  border: 1px solid rgba(var(--pack-accent), 0.45);
  border-radius: 50%;
  animation: pack-anneau-rotation 10s linear infinite;
}

.pack-cube-orbite-2 {
  width: 135px;
  height: 38px;
  opacity: 0.45;
  animation-duration: 14s;
  animation-direction: reverse;
}

/* =========================================================
   CRISTAL ELITE AI
========================================================= */

.pack-cristal {
  position: relative;
  z-index: 5;
  width: 105px;
  height: 112px;
  margin-top: 23px;
  animation: pack-flottement 4s ease-in-out infinite;
}

.pack-cristal-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--pack-accent), 0.85);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.48),
      rgba(var(--pack-accent), 0.7) 32%,
      rgba(4, 27, 56, 0.84) 72%
    );
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.12),
    0 0 25px rgba(var(--pack-accent), 0.46);
  clip-path: polygon(
    50% 0,
    100% 38%,
    78% 100%,
    22% 100%,
    0 38%
  );
}

.pack-cristal-face-1 {
  transform: scale(0.94);
}

.pack-cristal-face-2 {
  opacity: 0.5;
  transform: rotate(60deg) scale(0.72);
}

.pack-cristal-face-3 {
  opacity: 0.35;
  transform: rotate(-60deg) scale(0.72);
}

.pack-cristal-coeur {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #e5faff;
  box-shadow:
    0 0 14px #ffffff,
    0 0 32px rgb(var(--pack-accent)),
    0 0 65px rgba(var(--pack-accent), 0.78);
  transform: translate(-50%, -50%) rotate(45deg);
}

.pack-cristal-orbite {
  position: absolute;
  width: 170px;
  height: 49px;
  border: 1px solid rgba(var(--pack-accent), 0.52);
  border-radius: 50%;
  animation: pack-anneau-rotation 9s linear infinite;
}

.pack-cristal-orbite-2 {
  width: 138px;
  height: 39px;
  opacity: 0.43;
  animation-duration: 14s;
  animation-direction: reverse;
}

.pack-cristal-particule {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--pack-accent));
  box-shadow:
    0 0 9px rgb(var(--pack-accent)),
    0 0 18px rgba(var(--pack-accent), 0.8);
  animation: pack-particule 3s ease-in-out infinite;
}

.pack-cristal-particule-1 {
  top: 35px;
  left: 30px;
}

.pack-cristal-particule-2 {
  right: 24px;
  bottom: 45px;
  animation-delay: 1s;
}

.pack-cristal-particule-3 {
  top: 80px;
  right: 38px;
  width: 3px;
  height: 3px;
  animation-delay: 1.8s;
}

/* =========================================================
   CONTENU COMPACT
========================================================= */

.pack-identite {
  position: relative;
  z-index: 3;
}

.pack-identite small {
  margin-bottom: 7px;
}

.pack-identite h4 {
  margin-bottom: 11px;
  font-size: clamp(1.65rem, 2.2vw, 2.15rem);
}

.pack-identite p {
  min-height: 68px;
  font-size: 0.76rem;
  line-height: 1.6;
}

.pack-prix {
  margin: 17px 0;
  padding: 16px 0;
}

.pack-prix small {
  margin-bottom: 6px;
}

.pack-prix strong {
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
}

.pack-prix span {
  margin-top: 7px;
}

.pack-inclusions-titre {
  margin-bottom: 11px;
}

.pack-inclusions ul {
  gap: 8px;
}

.pack-inclusions li {
  font-size: 0.7rem;
}

.pack-economie {
  min-height: 52px;
  margin-top: auto;
  margin-bottom: 13px;
  padding: 11px 13px;
}

.pack-carte .btn-configurer {
  min-height: 48px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pack-flottement {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes pack-anneau-rotation {
  from {
    transform: rotate(-14deg);
  }

  to {
    transform: rotate(346deg);
  }
}

@keyframes pack-particule {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0) scale(0.75);
  }

  50% {
    opacity: 1;
    transform: translateY(-7px) scale(1.15);
  }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {
  .packs-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .packs-grille .pack-carte {
    min-height: 680px !important;
  }
}

@media (max-width: 650px) {
  .packs-grille {
    grid-template-columns: 1fr;
  }

  .packs-grille .pack-carte {
    min-height: auto !important;
    padding-inline: 17px !important;
  }

  .pack-visuel {
    width: calc(100% + 34px);
    height: 185px;
    min-height: 185px;
    margin-inline: -17px;
  }

  .pack-identite p {
    min-height: auto;
  }

  .pack-ruban {
    top: 17px !important;
    right: -44px !important;
  }

  .pack-economie {
    margin-top: 22px;
  }
}

@media (hover: none) {
  .packs-grille .pack-carte:hover {
    transform: none;
  }

  .packs-grille .pack-carte:active {
    transform: scale(0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-planete,
  .pack-cube,
  .pack-cristal,
  .pack-planete-anneau,
  .pack-cube-orbite,
  .pack-cristal-orbite,
  .pack-cristal-particule {
    animation: none;
  }
}

/* =========================================================
   PACKS — CORRECTION FINALE FIDÈLE À LA MAQUETTE
   Ce bloc est volontairement placé en dernier afin de
   neutraliser toutes les anciennes règles encore présentes.
========================================================= */

.packs-grille {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.packs-grille .pack-carte {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

/* La zone supérieure devient un vrai bandeau visuel compact. */
.packs-grille .pack-visuel {
  position: relative !important;
  z-index: 1 !important;
  width: calc(100% + 28px) !important;
  height: 176px !important;
  min-height: 176px !important;
  margin: 0 -14px 14px !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(var(--pack-accent), 0.24) !important;
}

/* Badge et icône directement dans le bandeau supérieur. */
.packs-grille .pack-carte-entete {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

.packs-grille .pack-badge {
  font-size: 0.48rem !important;
  letter-spacing: 0.075em !important;
  white-space: nowrap !important;
}

.packs-grille .pack-badge i {
  width: 26px !important;
  height: 26px !important;
  font-size: 0.5rem !important;
  border-radius: 7px !important;
}

.packs-grille .pack-icone {
  width: 32px !important;
  height: 32px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
}

/* Objets holographiques plus petits et parfaitement centrés. */
.packs-grille .pack-planete {
  width: 112px !important;
  height: 112px !important;
  margin-top: 23px !important;
}

.packs-grille .pack-planete-surface {
  width: 72px !important;
  height: 72px !important;
}

.packs-grille .pack-planete-growth .pack-planete-surface {
  width: 78px !important;
  height: 78px !important;
}

.packs-grille .pack-planete-anneau {
  width: 118px !important;
  height: 36px !important;
}

.packs-grille .pack-planete-anneau-2 {
  width: 103px !important;
  height: 30px !important;
}

.packs-grille .pack-cube {
  width: 91px !important;
  height: 82px !important;
  margin-top: 30px !important;
  transform-origin: center;
}

.packs-grille .pack-cube-orbite {
  width: 142px !important;
  height: 42px !important;
}

.packs-grille .pack-cube-orbite-2 {
  width: 116px !important;
  height: 33px !important;
}

.packs-grille .pack-cristal {
  width: 91px !important;
  height: 98px !important;
  margin-top: 27px !important;
}

.packs-grille .pack-cristal-orbite {
  width: 145px !important;
  height: 42px !important;
}

.packs-grille .pack-cristal-orbite-2 {
  width: 118px !important;
  height: 34px !important;
}

/* Rubans courts et placés uniquement dans l'angle. */
.packs-grille .pack-ruban {
  top: 13px !important;
  right: -37px !important;
  z-index: 40 !important;
  width: 142px !important;
  padding: 6px 0 !important;
  font-size: 0.44rem !important;
  line-height: 1 !important;
  letter-spacing: 0.075em !important;
  transform: rotate(42deg) !important;
}

.packs-grille .pack-ruban-signature {
  right: -39px !important;
}

/* Contenu immédiatement sous le visuel, sans chevauchement. */
.packs-grille .pack-identite,
.packs-grille .pack-prix,
.packs-grille .pack-inclusions,
.packs-grille .pack-economie,
.packs-grille .btn-configurer {
  position: relative !important;
  z-index: 3 !important;
}

.packs-grille .pack-identite small {
  display: block !important;
  margin: 0 0 5px !important;
  font-size: 0.44rem !important;
  letter-spacing: 0.1em !important;
}

.packs-grille .pack-identite h4 {
  margin: 0 0 7px !important;
  font-size: clamp(1.35rem, 1.65vw, 1.72rem) !important;
  line-height: 1 !important;
}

.packs-grille .pack-identite p {
  min-height: 58px !important;
  margin: 0 !important;
  font-size: 0.66rem !important;
  line-height: 1.52 !important;
}

.packs-grille .pack-prix {
  margin: 12px 0 !important;
  padding: 11px 0 !important;
}

.packs-grille .pack-prix small {
  margin-bottom: 4px !important;
  font-size: 0.43rem !important;
}

.packs-grille .pack-prix strong {
  font-size: clamp(1.42rem, 1.8vw, 1.9rem) !important;
  line-height: 1 !important;
}

.packs-grille .pack-prix span {
  margin-top: 5px !important;
  font-size: 0.52rem !important;
}

.packs-grille .pack-inclusions-titre {
  margin-bottom: 8px !important;
  font-size: 0.43rem !important;
}

.packs-grille .pack-inclusions ul {
  gap: 6px !important;
}

.packs-grille .pack-inclusions li {
  gap: 7px !important;
  font-size: 0.61rem !important;
  line-height: 1.32 !important;
}

.packs-grille .pack-inclusions li i {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px !important;
  font-size: 0.42rem !important;
}

.packs-grille .pack-economie {
  min-height: 44px !important;
  margin: 14px 0 10px !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
}

.packs-grille .pack-economie span {
  font-size: 0.4rem !important;
}

.packs-grille .pack-economie strong {
  font-size: 0.61rem !important;
}

.packs-grille .pack-carte .btn-configurer {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 0.61rem !important;
}

/* Égalise naturellement les cartes sans recréer un grand vide. */
.packs-grille .pack-economie {
  margin-top: auto !important;
}

@media (max-width: 1150px) {
  .packs-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .packs-grille .pack-carte {
    min-height: 0 !important;
  }
}

@media (max-width: 650px) {
  .packs-grille {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .packs-grille .pack-carte {
    min-height: 0 !important;
    padding: 0 16px 16px !important;
  }

  .packs-grille .pack-visuel {
    width: calc(100% + 32px) !important;
    height: 185px !important;
    min-height: 185px !important;
    margin: 0 -16px 16px !important;
  }

  .packs-grille .pack-identite p {
    min-height: 0 !important;
  }
}

/* =========================================================
   PACKS — COUPE DE LA ZONE SUPÉRIEURE INUTILE
========================================================= */

.packs-grille .pack-visuel {
  height: 118px !important;
  min-height: 118px !important;
  margin-bottom: 12px !important;
  place-items: center !important;
}

.packs-grille .pack-planete,
.packs-grille .pack-cube,
.packs-grille .pack-cristal {
  margin-top: 16px !important;
}

.packs-grille .pack-planete {
  width: 92px !important;
  height: 92px !important;
}

.packs-grille .pack-planete-surface {
  width: 60px !important;
  height: 60px !important;
}

.packs-grille .pack-planete-growth .pack-planete-surface {
  width: 66px !important;
  height: 66px !important;
}

.packs-grille .pack-planete-anneau {
  width: 98px !important;
  height: 30px !important;
}

.packs-grille .pack-planete-anneau-2 {
  width: 85px !important;
  height: 25px !important;
}

.packs-grille .pack-cube {
  width: 74px !important;
  height: 68px !important;
}

.packs-grille .pack-cube-orbite,
.packs-grille .pack-cristal-orbite {
  width: 116px !important;
  height: 34px !important;
}

.packs-grille .pack-cube-orbite-2,
.packs-grille .pack-cristal-orbite-2 {
  width: 94px !important;
  height: 27px !important;
}

.packs-grille .pack-cristal {
  width: 74px !important;
  height: 80px !important;
}

@media (max-width: 650px) {
  .packs-grille .pack-visuel {
    height: 126px !important;
    min-height: 126px !important;
  }
}


/* =========================================================
   CHIVARYN — PACKS FINAL RECONSTRUITS (isolés des anciens styles)
========================================================= */
.cx-packs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;margin-top:28px}
.cx-pack{--a:34,197,94;position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(var(--a),.42);border-radius:18px;background:linear-gradient(180deg,rgba(var(--a),.09),rgba(7,8,15,.98) 34%,rgba(7,8,15,.99));box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.cx-pack-growth{--a:139,92,246}.cx-pack-scale{--a:236,72,153}.cx-pack-elite{--a:14,165,233}
.cx-pack:hover{transform:translateY(-7px);border-color:rgba(var(--a),.72);box-shadow:0 34px 80px rgba(0,0,0,.46),0 0 45px rgba(var(--a),.12),inset 0 1px 0 rgba(255,255,255,.07)}
.cx-pack-visual{position:relative;height:238px;flex:0 0 238px;overflow:hidden;border-bottom:1px solid rgba(var(--a),.26);background:radial-gradient(circle at 50% 48%,rgba(var(--a),.18),transparent 42%),linear-gradient(180deg,rgba(var(--a),.075),rgba(5,8,15,.02));}
.cx-pack-visual:before{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(circle at center,#000,transparent 82%)}
.cx-pack-top{position:absolute;z-index:8;top:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cx-stage{display:inline-flex;align-items:center;gap:8px;color:rgb(var(--a));font-size:.57rem;font-weight:900;letter-spacing:.08em;white-space:nowrap}.cx-stage i{width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(var(--a),.64);border-radius:7px;color:#fff;background:rgba(var(--a),.13);font-style:normal;font-size:.61rem}.cx-icon{width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(var(--a),.6);border-radius:8px;color:#fff;background:rgba(5,8,15,.62);font-size:.8rem}
.cx-art{position:absolute;inset:42px 0 0;display:grid;place-items:center}.cx-art:after{content:"";position:absolute;left:50%;bottom:16px;width:120px;height:18px;border-radius:50%;transform:translateX(-50%);background:rgba(var(--a),.26);filter:blur(16px)}
.cx-orb{position:relative;width:160px;height:160px;display:grid;place-items:center;animation:cxFloat 4.8s ease-in-out infinite}.cx-orb-core{position:relative;z-index:3;width:94px;height:94px;border-radius:50%;border:1px solid rgba(var(--a),.85);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85),transparent 7%),radial-gradient(circle at 38% 34%,rgba(var(--a),.98),rgba(var(--a),.5) 40%,rgba(3,8,14,.98) 78%);box-shadow:inset -20px -20px 30px rgba(0,0,0,.65),inset 10px 10px 20px rgba(255,255,255,.08),0 0 25px rgba(var(--a),.7),0 0 60px rgba(var(--a),.28)}
.cx-orb-growth .cx-orb-core{width:106px;height:106px}.cx-ring{position:absolute;z-index:4;width:158px;height:50px;border:2px solid rgba(var(--a),.82);border-radius:50%;box-shadow:0 0 12px rgba(var(--a),.55),inset 0 0 10px rgba(var(--a),.2);transform:rotate(-14deg)}.cx-ring-b{width:138px;height:42px;border-width:1px;opacity:.55;transform:rotate(66deg)}.cx-orb>i{position:absolute;z-index:6;width:6px;height:6px;border-radius:50%;background:rgb(var(--a));box-shadow:0 0 12px rgb(var(--a))}.cx-orb>i:nth-of-type(1){top:23px;right:8px}.cx-orb>i:nth-of-type(2){bottom:18px;left:5px}.cx-orb>i:nth-of-type(3){top:78px;left:0;width:3px;height:3px}
.cx-cube{position:relative;z-index:4;width:128px;height:118px;animation:cxFloat 4.6s ease-in-out infinite}.cx-cube span{position:absolute;border:1px solid rgba(var(--a),.8);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(var(--a),.62),rgba(20,7,18,.96));box-shadow:inset 0 0 20px rgba(var(--a),.2),0 0 24px rgba(var(--a),.35)}.cx-cube span:nth-child(1){top:0;left:22px;width:84px;height:80px;clip-path:polygon(50% 0,100% 28%,50% 58%,0 28%)}.cx-cube span:nth-child(2){top:23px;left:22px;width:83px;height:88px;clip-path:polygon(0 0,50% 28%,50% 100%,0 72%)}.cx-cube span:nth-child(3){top:23px;left:64px;width:83px;height:88px;clip-path:polygon(0 28%,50% 0,50% 72%,0 100%)}.cx-cube i{position:absolute;z-index:8;top:54px;left:54px;width:40px;height:18px;border-radius:50%;background:rgba(var(--a),.95);box-shadow:0 0 15px rgb(var(--a)),0 0 38px rgba(var(--a),.85)}
.cx-gem{position:relative;z-index:4;width:120px;height:135px;animation:cxFloat 4.2s ease-in-out infinite}.cx-gem span{position:absolute;inset:0;border:1px solid rgba(var(--a),.88);background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(var(--a),.72) 32%,rgba(4,27,56,.88) 72%);box-shadow:inset 0 0 24px rgba(255,255,255,.12),0 0 27px rgba(var(--a),.5);clip-path:polygon(50% 0,100% 38%,78% 100%,22% 100%,0 38%)}.cx-gem span:nth-child(2){opacity:.48;transform:rotate(60deg) scale(.72)}.cx-gem span:nth-child(3){opacity:.34;transform:rotate(-60deg) scale(.72)}.cx-gem i{position:absolute;z-index:8;top:50%;left:50%;width:28px;height:28px;border-radius:7px;background:#e8fbff;box-shadow:0 0 14px #fff,0 0 34px rgb(var(--a)),0 0 70px rgba(var(--a),.8);transform:translate(-50%,-50%) rotate(45deg)}
.cx-orbit{position:absolute;width:180px;height:54px;border:1px solid rgba(var(--a),.55);border-radius:50%;transform:rotate(-12deg)}.cx-orbit-b{width:145px;height:43px;opacity:.48;transform:rotate(68deg)}
.cx-ribbon{position:absolute;z-index:20;top:18px;right:-43px;width:166px;padding:7px 0;color:#fff;background:linear-gradient(135deg,#7c3aed,#8b5cf6,#6366f1);box-shadow:0 10px 24px rgba(76,29,149,.35);font-size:.51rem;font-weight:900;letter-spacing:.09em;text-align:center;transform:rotate(42deg)}.cx-pack-elite .cx-ribbon{background:linear-gradient(135deg,#0284c7,#2563eb,#7c3aed)}
.cx-pack-body{display:flex;flex:1;flex-direction:column;padding:18px 18px 16px}.cx-identity small,.cx-price small,.cx-includes>small{display:block;color:rgb(var(--a));font-size:.52rem;font-weight:900;letter-spacing:.09em}.cx-identity h4{margin:7px 0 10px;color:#fff;font-size:1.72rem;line-height:1;letter-spacing:-.045em}.cx-identity p{min-height:66px;color:#aaa6b5;font-size:.72rem;line-height:1.58}.cx-price{margin:16px 0;padding:15px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}.cx-price small{margin-bottom:7px;color:#898493}.cx-price strong{display:block;color:rgb(var(--a));font-size:1.9rem;line-height:1;letter-spacing:-.04em}.cx-price span{display:block;margin-top:7px;color:#aaa6b5;font-size:.65rem}.cx-includes>small{margin-bottom:10px}.cx-includes ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.cx-includes li{display:flex;align-items:center;gap:8px;color:#d7d3df;font-size:.68rem;line-height:1.3}.cx-includes li i{width:17px;height:17px;display:grid;place-items:center;flex:0 0 17px;border:1px solid rgba(var(--a),.58);border-radius:50%;color:rgb(var(--a));background:rgba(var(--a),.12);font-size:.47rem;font-style:normal;font-weight:900}
.cx-saving{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;margin-bottom:12px;padding:11px 12px;border:1px solid rgba(var(--a),.34);border-radius:9px;background:rgba(var(--a),.055)}.cx-saving span{color:#817c8b;font-size:.47rem;font-weight:900;letter-spacing:.1em}.cx-saving strong{color:rgb(var(--a));font-size:.72rem}.cx-pack-button{min-height:46px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border:1px solid rgba(var(--a),.68);border-radius:9px;color:#fff;background:linear-gradient(135deg,rgba(var(--a),.54),rgba(var(--a),.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);font:inherit;font-size:.69rem;font-weight:850;cursor:pointer}.cx-pack-button i{font-size:1.05rem;font-style:normal}.cx-pack-growth .cx-pack-button,.cx-pack-elite .cx-pack-button{background:linear-gradient(135deg,rgba(var(--a),.88),#7c3aed)}
@keyframes cxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:1150px){.cx-packs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-pack-visual{height:230px;flex-basis:230px}}
@media(max-width:650px){.cx-packs-grid{grid-template-columns:1fr}.cx-pack-visual{height:220px;flex-basis:220px}.cx-identity p{min-height:auto}}
@media(prefers-reduced-motion:reduce){.cx-orb,.cx-cube,.cx-gem{animation:none}}

/* =========================================================
   OFFRES — CATALOGUE HOLOGRAPHIQUE FINAL
   Une seule couche isolée pour éviter les conflits historiques.
========================================================= */

.offres-grille .offre-carte {
  --holo-depth: 1;
  overflow: hidden;
  padding-top: 18px;
  transform-style: preserve-3d;
}

.offres-grille .offre-carte-haut {
  position: relative;
  z-index: 12;
  margin-bottom: 8px;
}

.offre-hologramme {
  position: relative;
  z-index: 2;
  height: 224px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0 -20px 15px;
  border-top: 1px solid rgba(var(--offre-accent-secondaire), .07);
  border-bottom: 1px solid rgba(var(--offre-accent), .25);
  background:
    radial-gradient(circle at 50% 68%, rgba(var(--offre-accent-secondaire), .26), transparent 35%),
    radial-gradient(circle at 50% 35%, rgba(var(--offre-accent), .14), transparent 52%),
    linear-gradient(180deg, rgba(var(--offre-accent), .08), rgba(3, 5, 12, .5));
  isolation: isolate;
  perspective: 850px;
}

.offre-hologramme::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .36;
  background-image:
    linear-gradient(rgba(var(--offre-accent), .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--offre-accent), .07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 84%, transparent);
}

.offre-hologramme::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .13;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.08) 4px);
  mix-blend-mode: screen;
}

.offre-holo-brume {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 76%;
  height: 86px;
  border-radius: 50%;
  background: rgba(var(--offre-accent), .28);
  filter: blur(35px);
  transform: translateX(-50%);
  animation: offre-holo-respire 4.6s ease-in-out infinite;
}

.offre-holo-scan {
  position: absolute;
  z-index: 19;
  left: 0;
  right: 0;
  top: -12%;
  height: 2px;
  opacity: .7;
  background: linear-gradient(90deg, transparent, rgb(var(--offre-accent-secondaire)), transparent);
  box-shadow: 0 0 14px rgba(var(--offre-accent-secondaire), .75);
  animation: offre-holo-scan 4.8s linear infinite;
}

.offre-holo-grille {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 210px;
  height: 72px;
  border: 1px solid rgba(var(--offre-accent), .42);
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 11px, rgba(var(--offre-accent), .13) 12px 13px),
    linear-gradient(90deg, transparent 49.5%, rgba(var(--offre-accent-secondaire), .22) 50%, transparent 50.5%);
  box-shadow:
    0 0 28px rgba(var(--offre-accent), .26),
    inset 0 0 24px rgba(var(--offre-accent), .15);
  transform: translateX(-50%) perspective(180px) rotateX(67deg);
  animation: offre-holo-sol 3.6s ease-in-out infinite;
}

.offre-holo-orbite {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  width: 185px;
  height: 64px;
  border: 1px solid rgba(var(--offre-accent-secondaire), .47);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(var(--offre-accent), .12);
  transform: translate(-50%, -50%) rotate(-13deg);
  animation: offre-holo-orbite 11s linear infinite;
}

.offre-holo-orbite-2 {
  width: 145px;
  height: 48px;
  opacity: .48;
  transform: translate(-50%, -50%) rotate(32deg);
  animation-duration: 16s;
  animation-direction: reverse;
}

.offre-holo-scene {
  position: relative;
  z-index: 5;
  width: 210px;
  height: 148px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  transform-style: preserve-3d;
  animation: offre-holo-scene 6s ease-in-out infinite;
}

.offre-holo-objet {
  position: relative;
  z-index: 6;
  width: 132px;
  height: 116px;
  transform-style: preserve-3d;
  animation: offre-holo-flotte 4.2s ease-in-out infinite;
}

.offre-holo-face,
.offre-holo-widget,
.offre-holo-noeud,
.offre-holo-coeur,
.offre-holo-barre,
.offre-holo-panneau {
  position: absolute;
  display: block;
}

.offre-holo-barre {
  z-index: 12;
  left: 17px;
  right: 17px;
  top: 16px;
  height: 7px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 4px 50%, rgb(var(--offre-accent-secondaire)) 0 2px, transparent 3px),
    radial-gradient(circle at 12px 50%, rgba(var(--offre-accent-secondaire),.7) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 20px, rgba(var(--offre-accent), .4) 20px);
  opacity: .85;
}

.offre-holo-coeur {
  z-index: 15;
  left: 50%;
  top: 52%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 7px;
  color: #fff;
  background: rgba(var(--offre-accent-secondaire), .92);
  box-shadow:
    0 0 10px rgba(255,255,255,.75),
    0 0 28px rgba(var(--offre-accent-secondaire), .9),
    0 0 58px rgba(var(--offre-accent), .65);
  font-size: .47rem;
  font-weight: 950;
  transform: translate(-50%, -50%) rotate(45deg);
}

.offre-holo-coeur::first-letter { transform: rotate(-45deg); }

.offre-holo-panneau {
  z-index: 4;
  top: 39px;
  width: 44px;
  height: 62px;
  border: 1px solid rgba(var(--offre-accent-secondaire), .4);
  border-radius: 7px;
  background:
    linear-gradient(rgba(var(--offre-accent), .23), rgba(3, 5, 12, .75)),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(var(--offre-accent-secondaire), .12) 10px);
  box-shadow: 0 0 18px rgba(var(--offre-accent), .18);
  opacity: 0;
}

.offre-holo-panneau-gauche { left: 3px; transform: rotateY(35deg) translateZ(-4px); }
.offre-holo-panneau-droite { right: 3px; transform: rotateY(-35deg) translateZ(-4px); }

.offre-holo-widget {
  z-index: 10;
  width: 35px;
  height: 28px;
  border: 1px solid rgba(var(--offre-accent-secondaire), .54);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(var(--offre-accent), .35), rgba(3, 5, 12, .75));
  box-shadow: 0 0 13px rgba(var(--offre-accent), .24);
  opacity: 0;
}
.offre-holo-widget::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 9px;
  background: linear-gradient(135deg, transparent 0 18%, rgb(var(--offre-accent-secondaire)) 19% 25%, transparent 26% 42%, rgb(var(--offre-accent-secondaire)) 43% 50%, transparent 51% 67%, rgb(var(--offre-accent-secondaire)) 68% 74%, transparent 75%);
  filter: drop-shadow(0 0 4px rgba(var(--offre-accent-secondaire),.65));
}
.offre-holo-widget-1 { left: -18px; top: 28px; }
.offre-holo-widget-2 { right: -20px; top: 20px; }
.offre-holo-widget-3 { right: -11px; bottom: 8px; }

.offre-holo-noeud {
  z-index: 16;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgb(var(--offre-accent-secondaire));
  box-shadow: 0 0 12px rgba(var(--offre-accent-secondaire), .95);
  opacity: 0;
  animation: offre-holo-noeud 2.1s ease-in-out infinite;
}
.offre-holo-noeud-1 { left: -8px; top: 26px; }
.offre-holo-noeud-2 { right: -9px; top: 50px; animation-delay: .45s; }
.offre-holo-noeud-3 { left: 25px; bottom: -1px; animation-delay: .9s; }

.offre-holo-label {
  position: absolute;
  z-index: 25;
  left: 13px;
  bottom: 9px;
  color: rgb(var(--offre-accent-secondaire));
  text-shadow: 0 0 10px rgba(var(--offre-accent-secondaire), .45);
  font-size: .44rem;
  font-weight: 950;
  letter-spacing: .18em;
}

/* Création de site : navigateur, contenu et responsive. */
.offre-hologramme-site .offre-holo-face-1,
.offre-hologramme-ecommerce .offre-holo-face-1,
.offre-hologramme-seo .offre-holo-face-1 {
  inset: 10px 5px 7px;
  border: 1px solid rgba(var(--offre-accent-secondaire), .76);
  border-radius: 11px;
  background:
    linear-gradient(150deg, rgba(var(--offre-accent), .32), rgba(3, 6, 14, .88)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(var(--offre-accent-secondaire), .08) 14px);
  box-shadow:
    0 0 30px rgba(var(--offre-accent), .31),
    inset 0 0 22px rgba(var(--offre-accent), .18);
  transform: translateZ(18px) rotateY(-4deg);
}

.offre-hologramme-site .offre-holo-face-2 {
  left: 20px; right: 20px; top: 36px; height: 36px;
  border: 1px solid rgba(var(--offre-accent), .55);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(var(--offre-accent-secondaire), .5), transparent 42%),
    linear-gradient(45deg, transparent 52%, rgba(var(--offre-accent), .45) 53% 65%, transparent 66%);
}
.offre-hologramme-site .offre-holo-face-3 {
  left: 20px; right: 20px; bottom: 15px; height: 20px;
  border-radius: 4px;
  background: repeating-linear-gradient(0deg, rgba(var(--offre-accent-secondaire), .28) 0 2px, transparent 2px 6px);
}

/* E-commerce : une boutique plus riche à chaque niveau. */
.offre-hologramme-ecommerce .offre-holo-face-2 {
  left: 18px; right: 18px; top: 35px; bottom: 19px;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(var(--offre-accent-secondaire), .3) 0 29%, transparent 30% 35%, rgba(var(--offre-accent), .24) 36% 64%, transparent 65% 70%, rgba(var(--offre-accent-secondaire), .24) 71%),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(var(--offre-accent), .16) 16px);
}
.offre-hologramme-ecommerce .offre-holo-face-3 {
  right: 13px; bottom: 13px; width: 34px; height: 23px;
  border: 1px solid rgba(var(--offre-accent-secondaire), .62);
  border-radius: 5px;
  background: rgba(3, 6, 14, .68);
  box-shadow: 0 0 14px rgba(var(--offre-accent), .26);
}
.offre-hologramme-ecommerce .offre-holo-face-3::before {
  content: "◱";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgb(var(--offre-accent-secondaire));
  font-size: .8rem;
}

/* Refonte : écrans avant / après. */
.offre-hologramme-refonte .offre-holo-face-1,
.offre-hologramme-refonte .offre-holo-face-2 {
  top: 13px;
  bottom: 10px;
  width: 65px;
  border: 1px solid rgba(var(--offre-accent), .55);
  border-radius: 9px;
  background:
    repeating-linear-gradient(0deg, rgba(var(--offre-accent), .14) 0 9px, transparent 9px 15px),
    rgba(3, 6, 14, .82);
}
.offre-hologramme-refonte .offre-holo-face-1 { left: 3px; opacity: .5; transform: rotateY(17deg) rotate(-4deg); }
.offre-hologramme-refonte .offre-holo-face-2 { right: 3px; border-color: rgba(var(--offre-accent-secondaire), .82); box-shadow: 0 0 24px rgba(var(--offre-accent), .32); transform: rotateY(-17deg) rotate(4deg); }
.offre-hologramme-refonte .offre-holo-face-3 {
  left: 50%; top: 54%; width: 34px; height: 3px;
  background: rgb(var(--offre-accent-secondaire));
  box-shadow: 0 0 12px rgba(var(--offre-accent-secondaire), .85);
  transform: translate(-50%, -50%);
}
.offre-hologramme-refonte .offre-holo-face-3::after { content: "→"; position: absolute; right: -7px; top: -8px; color: rgb(var(--offre-accent-secondaire)); }

/* IA : noyau neuronal vivant. */
.offre-hologramme-ia .offre-holo-face-1 {
  inset: 7px;
  border: 1px solid rgba(var(--offre-accent-secondaire), .65);
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(circle at 27% 34%, rgb(var(--offre-accent-secondaire)) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 29%, rgb(var(--offre-accent-secondaire)) 0 2px, transparent 3px),
    radial-gradient(circle at 43% 67%, rgb(var(--offre-accent-secondaire)) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 65%, rgb(var(--offre-accent-secondaire)) 0 2px, transparent 3px),
    rgba(var(--offre-accent), .18);
  box-shadow: 0 0 35px rgba(var(--offre-accent), .42), inset 0 0 28px rgba(var(--offre-accent), .24);
}
.offre-hologramme-ia .offre-holo-face-2 { inset: 20px 6px; border-top: 1px solid rgba(var(--offre-accent-secondaire), .55); border-bottom: 1px solid rgba(var(--offre-accent-secondaire), .42); border-radius: 50%; transform: rotate(34deg); }
.offre-hologramme-ia .offre-holo-face-3 { inset: 8px 30px; border-left: 1px solid rgba(var(--offre-accent-secondaire), .5); border-right: 1px solid rgba(var(--offre-accent-secondaire), .4); border-radius: 50%; transform: rotate(-22deg); }

/* SEO : interface et courbe d'acquisition. */
.offre-hologramme-seo .offre-holo-face-2 {
  left: 18px; right: 18px; top: 35px; height: 12px;
  border: 1px solid rgba(var(--offre-accent-secondaire), .55);
  border-radius: 999px;
}
.offre-hologramme-seo .offre-holo-face-3 {
  left: 22px; right: 20px; bottom: 18px; height: 40px;
  background:
    linear-gradient(145deg, transparent 0 15%, rgb(var(--offre-accent-secondaire)) 16% 19%, transparent 20% 35%, rgb(var(--offre-accent-secondaire)) 36% 39%, transparent 40% 56%, rgb(var(--offre-accent-secondaire)) 57% 60%, transparent 61% 75%, rgb(var(--offre-accent-secondaire)) 76% 80%, transparent 81%);
  filter: drop-shadow(0 0 6px rgba(var(--offre-accent-secondaire), .75));
}

/* La montée en gamme se voit sans lire le texte. */
.offre-hologramme-niveau-1 { --holo-depth: .82; }
.offre-hologramme-niveau-1 .offre-holo-orbite-2,
.offre-hologramme-niveau-1 .offre-holo-coeur { opacity: .45; }

.offre-hologramme-niveau-2 .offre-holo-widget-1,
.offre-hologramme-niveau-2 .offre-holo-noeud-1 { opacity: 1; }

.offre-hologramme-niveau-3 .offre-holo-widget-1,
.offre-hologramme-niveau-3 .offre-holo-widget-2,
.offre-hologramme-niveau-3 .offre-holo-noeud-1,
.offre-hologramme-niveau-3 .offre-holo-noeud-2,
.offre-hologramme-niveau-3 .offre-holo-panneau-gauche { opacity: 1; }

.offre-hologramme-niveau-4 {
  background:
    radial-gradient(circle at 50% 55%, rgba(var(--offre-accent-secondaire), .35), transparent 32%),
    radial-gradient(circle at 80% 18%, rgba(34, 211, 238, .16), transparent 28%),
    linear-gradient(180deg, rgba(var(--offre-accent), .12), rgba(3, 5, 12, .54));
}
.offre-hologramme-niveau-4 .offre-holo-widget,
.offre-hologramme-niveau-4 .offre-holo-noeud,
.offre-hologramme-niveau-4 .offre-holo-panneau { opacity: 1; }
.offre-hologramme-niveau-4 .offre-holo-objet { transform: scale(1.07); filter: saturate(1.18) brightness(1.1); }
.offre-hologramme-niveau-4 .offre-holo-coeur {
  width: 33px;
  height: 33px;
  color: rgb(var(--offre-accent));
  background: #effcff;
  box-shadow: 0 0 14px #fff, 0 0 38px rgb(var(--offre-accent-secondaire)), 0 0 72px rgba(var(--offre-accent), .9);
}

/* Prix : « À partir de » précède toujours le montant. */
.offres-grille .offre-prix-compact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 13px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.offres-grille .offre-prix-compact > span {
  flex: 0 0 auto;
  color: rgb(var(--offre-accent-secondaire));
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.offres-grille .offre-prix-compact > strong {
  color: #fff;
  font-size: clamp(1.65rem, 2.15vw, 2.2rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.offres-grille .offre-introduction { margin-bottom: 9px; }
.offres-grille .offre-points-cles { margin-bottom: 13px; }

.offres-grille .offre-carte:hover .offre-holo-scene { animation-duration: 3.7s; }
.offres-grille .offre-carte:hover .offre-holo-scan { animation-duration: 2.6s; }
.offres-grille .offre-carte:hover .offre-holo-brume { filter: blur(28px); opacity: .95; }

@keyframes offre-holo-flotte {
  0%, 100% { transform: translate3d(0, 0, 18px) rotateY(-2deg); }
  50% { transform: translate3d(0, -7px, 25px) rotateY(2deg); }
}
@keyframes offre-holo-scene {
  0%, 100% { transform: rotateX(0deg) rotateY(-2deg); }
  50% { transform: rotateX(1.2deg) rotateY(2deg); }
}
@keyframes offre-holo-orbite {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes offre-holo-respire {
  0%, 100% { opacity: .55; scale: .92; }
  50% { opacity: .95; scale: 1.06; }
}
@keyframes offre-holo-sol {
  0%, 100% { opacity: .58; scale: .94; }
  50% { opacity: 1; scale: 1.02; }
}
@keyframes offre-holo-scan {
  0% { top: -8%; opacity: 0; }
  12% { opacity: .75; }
  85% { opacity: .55; }
  100% { top: 108%; opacity: 0; }
}
@keyframes offre-holo-noeud {
  0%, 100% { scale: .72; opacity: .45; }
  50% { scale: 1.18; opacity: 1; }
}

@media (max-width: 1180px) {
  .offre-hologramme { height: 205px; }
  .offre-holo-scene { scale: .92; }
}

@media (max-width: 650px) {
  .offre-hologramme {
    height: 200px;
    margin-inline: -21px;
  }
  .offres-grille .offre-prix-compact {
    flex-wrap: wrap;
    row-gap: 5px;
  }
}

@media (hover: none) {
  .offres-grille .offre-carte:hover .offre-holo-scene,
  .offres-grille .offre-carte:hover .offre-holo-scan { animation-duration: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  .offre-holo-scene,
  .offre-holo-objet,
  .offre-holo-orbite,
  .offre-holo-brume,
  .offre-holo-grille,
  .offre-holo-scan,
  .offre-holo-noeud { animation: none !important; }
}

/* =========================================================
   CHIVARYN — OFFRES PODIUM LUXE (VERSION FINALE)
   Couche finale isolée : hiérarchie, respiration et mouvement.
========================================================= */

#offres-comparateur {
  --podium-gap: clamp(14px, 1.25vw, 22px);
  position: relative;
  isolation: isolate;
  overflow: visible;
}

#offres-comparateur::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20% -5% 2%;
  pointer-events: none;
  opacity: .75;
  background:
    radial-gradient(circle at 15% 68%, rgba(20, 241, 178, .07), transparent 26%),
    radial-gradient(circle at 42% 54%, rgba(130, 72, 255, .08), transparent 29%),
    radial-gradient(circle at 70% 38%, rgba(255, 48, 158, .075), transparent 30%),
    radial-gradient(circle at 93% 18%, rgba(255, 191, 72, .085), transparent 26%);
  filter: blur(28px);
}

.offres-grille {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: var(--podium-gap) !important;
  padding: clamp(38px, 4.6vw, 76px) 0 18px !important;
  overflow: visible !important;
}

.offres-grille::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(4,6,14,.9));
  box-shadow: 0 22px 55px rgba(0,0,0,.42);
}

.offres-grille .offre-carte {
  --podium-rise: 0px;
  --lux-x: 50%;
  --lux-y: 25%;
  position: relative;
  align-self: end;
  min-width: 0;
  min-height: 690px;
  padding: 22px 20px 18px !important;
  border-radius: 20px !important;
  transform: translate3d(0, calc(var(--podium-rise) * -1), 0);
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    border-color .4s ease,
    box-shadow .45s ease,
    filter .45s ease !important;
  will-change: transform;
}

.offres-grille .offre-carte:nth-child(1) {
  --podium-rise: 0px;
  min-height: 660px;
}

.offres-grille .offre-carte:nth-child(2) {
  --podium-rise: 38px;
  min-height: 700px;
}

.offres-grille .offre-carte:nth-child(3) {
  --podium-rise: 78px;
  min-height: 744px;
}

.offres-grille .offre-carte:nth-child(4) {
  --podium-rise: 122px;
  min-height: 790px;
}

.offres-grille .offre-carte::before {
  background:
    radial-gradient(circle at var(--lux-x) var(--lux-y), rgba(var(--offre-accent-secondaire), .16), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 32%, transparent 70%, rgba(var(--offre-accent),.055)) !important;
  opacity: .9 !important;
}

.offres-grille .offre-carte::after {
  content: "" !important;
  position: absolute !important;
  z-index: 30 !important;
  inset: -45% -80% !important;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.18) 49%, transparent 56%);
  transform: translateX(-35%) rotate(8deg) !important;
  transition: opacity .3s ease !important;
}

.offres-grille .offre-carte:hover {
  transform: translate3d(0, calc((var(--podium-rise) + 10px) * -1), 0) !important;
  filter: saturate(1.08) brightness(1.04);
}

.offres-grille .offre-carte:hover::after {
  opacity: .55;
  animation: chivaryn-lux-sweep 1.15s ease both;
}

.offres-grille .offre-carte:nth-child(1)::before,
.offres-grille .offre-carte:nth-child(2)::before {
  opacity: .66 !important;
}

/* PERFORMANCE — quasi haut de gamme */
.offres-grille .offre-carte:nth-child(3) {
  border-color: rgba(var(--level-premium-rgb), .62) !important;
  background:
    radial-gradient(circle at 70% 8%, rgba(var(--level-premium-rgb), .14), transparent 32%),
    linear-gradient(180deg, rgba(42, 12, 37, .94), rgba(8, 7, 17, .985) 46%) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(var(--level-premium-rgb), .08),
    0 0 48px rgba(var(--level-premium-rgb), .13),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
}

.offres-grille .offre-carte:nth-child(3)::after {
  background: linear-gradient(105deg, transparent 40%, rgba(255, 188, 230, .23) 49%, transparent 57%);
}

/* SIGNATURE AI — traitement joaillerie / produit d'exception */
.offres-grille .offre-carte:nth-child(4) {
  --offre-accent: var(--level-signature-rgb);
  --offre-accent-secondaire: var(--level-signature-bright-rgb);
  border-color: rgba(var(--level-signature-rgb), .82) !important;
  background:
    radial-gradient(circle at 78% 9%, rgba(255, 210, 121, .18), transparent 29%),
    radial-gradient(circle at 28% 36%, rgba(49, 111, 255, .10), transparent 31%),
    linear-gradient(160deg, rgba(24, 20, 16, .98), rgba(5, 8, 18, .99) 53%, rgba(20, 14, 7, .985)) !important;
  box-shadow:
    0 42px 110px rgba(0,0,0,.58),
    0 0 0 1px rgba(255, 220, 153, .16),
    0 0 32px rgba(255, 177, 47, .18),
    0 0 88px rgba(255, 177, 47, .11),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 46px rgba(255, 178, 45, .045) !important;
}

.offres-grille .offre-carte:nth-child(4)::before {
  opacity: 1 !important;
  background:
    radial-gradient(circle at var(--lux-x) var(--lux-y), rgba(255, 225, 158, .22), transparent 25%),
    radial-gradient(circle at 82% 14%, rgba(255, 186, 49, .13), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 31%, transparent 68%, rgba(255,184,55,.09)) !important;
}

.offres-grille .offre-carte:nth-child(4)::after {
  background: linear-gradient(105deg, transparent 40%, rgba(255, 239, 196, .38) 49%, transparent 56%);
}

.offres-grille .offre-carte:nth-child(4):hover {
  box-shadow:
    0 48px 130px rgba(0,0,0,.64),
    0 0 0 1px rgba(255, 229, 169, .25),
    0 0 45px rgba(255, 185, 54, .27),
    0 0 110px rgba(255, 185, 54, .14),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Marches lumineuses */
.offres-grille .offre-carte > .offre-actions::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: -21px;
  right: -21px;
  bottom: -19px;
  height: 18px;
  border: 1px solid rgba(var(--offre-accent), .32);
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, rgba(var(--offre-accent), .15), rgba(4,6,12,.96));
  box-shadow: 0 8px 24px rgba(var(--offre-accent), .12);
}

.offres-grille .offre-carte:nth-child(4) > .offre-actions::after {
  border-color: rgba(var(--level-signature-rgb), .58);
  background: linear-gradient(180deg, rgba(var(--level-signature-rgb), .23), rgba(10,8,5,.98));
  box-shadow: 0 9px 35px rgba(var(--level-signature-rgb), .19);
}

/* En-tête : plus d'air et hiérarchie nette */
.offres-grille .offre-carte-haut {
  min-height: 54px;
  margin: 0 0 14px !important;
  align-items: flex-start !important;
}

.offres-grille .offre-adn {
  gap: 11px !important;
}

.offres-grille .offre-adn-icone {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
}

.offres-grille .offre-adn small {
  margin-bottom: 5px !important;
  font-size: .56rem !important;
  letter-spacing: .09em !important;
}

.offres-grille .offre-adn strong {
  font-size: .93rem !important;
  letter-spacing: .045em !important;
}

.offres-grille .offre-niveau {
  padding-top: 2px;
  font-size: .72rem !important;
}

/* Visuels : volumes croissants et luxe renforcé */
.offres-grille .offre-hologramme {
  height: 228px !important;
  margin: 0 -20px 20px !important;
}

.offres-grille .offre-carte:nth-child(2) .offre-hologramme { height: 242px !important; }
.offres-grille .offre-carte:nth-child(3) .offre-hologramme { height: 258px !important; }
.offres-grille .offre-carte:nth-child(4) .offre-hologramme { height: 280px !important; }

.offres-grille .offre-carte:nth-child(3) .offre-holo-scene { scale: 1.08; }
.offres-grille .offre-carte:nth-child(4) .offre-holo-scene { scale: 1.18; }

.offres-grille .offre-carte:nth-child(4) .offre-hologramme {
  border-color: rgba(255, 197, 84, .42) !important;
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 183, 52, .30), transparent 34%),
    radial-gradient(circle at 50% 34%, rgba(255, 222, 153, .14), transparent 47%),
    linear-gradient(180deg, rgba(255, 185, 55, .075), rgba(3,5,12,.58)) !important;
}

.offres-grille .offre-carte:nth-child(4) .offre-hologramme::before {
  background-image:
    radial-gradient(circle, rgba(255,225,163,.6) 0 1px, transparent 1.6px),
    linear-gradient(rgba(255,190,69,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,190,69,.06) 1px, transparent 1px) !important;
  background-size: 37px 37px, 25px 25px, 25px 25px !important;
  animation: chivaryn-stars 12s linear infinite;
}

.offres-grille .offre-carte:nth-child(4) .offre-holo-coeur {
  color: #fff7de !important;
  background: radial-gradient(circle at 35% 28%, #fff6d8, #ffbd45 45%, #9a5b00 100%) !important;
  box-shadow:
    0 0 13px #fff,
    0 0 36px rgba(255, 207, 107, .95),
    0 0 78px rgba(255, 170, 31, .72) !important;
}

/* Zone de contenu : fin des éléments collés */
.offres-grille .offre-introduction {
  min-height: 68px;
  margin: 0 0 14px !important;
}

.offres-grille .offre-repere {
  display: block;
  margin-bottom: 7px !important;
  color: rgba(255,255,255,.54) !important;
  font-size: .69rem !important;
}

.offres-grille .offre-carte h4 {
  margin: 0 !important;
  font-size: clamp(1.52rem, 1.8vw, 2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}

/* Prix : alignement premium et taille cohérente */
.offres-grille .offre-prix-compact {
  display: block !important;
  min-height: 86px;
  margin: 0 0 17px !important;
  padding: 0 0 17px !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.offres-grille .offre-prix-compact span {
  display: block !important;
  margin: 0 0 7px !important;
  color: rgb(var(--offre-accent-secondaire)) !important;
  font-size: .76rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
}

.offres-grille .offre-prix-compact strong,
.offres-grille .offre-carte:last-child .offre-prix-compact strong {
  display: block !important;
  margin: 0 !important;
  color: #f7f8ff !important;
  font-size: clamp(2.22rem, 2.55vw, 3.08rem) !important;
  font-weight: 870 !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(var(--offre-accent), .12);
}

.offres-grille .offre-carte:nth-child(3) .offre-prix-compact strong {
  font-size: clamp(2.34rem, 2.65vw, 3.18rem) !important;
}

.offres-grille .offre-carte:nth-child(4) .offre-prix-compact strong {
  color: #fff7df !important;
  font-size: clamp(2.48rem, 2.82vw, 3.38rem) !important;
  text-shadow: 0 0 28px rgba(255, 193, 70, .2);
}

.offres-grille .offre-points-cles {
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
  min-height: 142px;
  margin: 0 0 19px !important;
}

.offres-grille .offre-points-cles li {
  gap: 10px !important;
  font-size: .76rem !important;
  line-height: 1.35 !important;
}

.offres-grille .offre-check,
.offres-grille .offre-plus-icone {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
}

.offres-grille .offre-actions {
  position: relative;
  z-index: 8;
  display: grid !important;
  gap: 9px !important;
  margin-top: auto !important;
}

.offres-grille .offre-details,
.offres-grille .offre-demo,
.offres-grille .offre-configurer {
  min-height: 45px !important;
  border-radius: 10px !important;
}

.offres-grille .offre-configurer {
  min-height: 50px !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 12px 28px rgba(var(--offre-accent), .17) !important;
}

.offres-grille .offre-carte:nth-child(4) .offre-configurer {
  color: #fff8e7 !important;
  border-color: rgba(255, 210, 115, .8) !important;
  background: linear-gradient(135deg, rgba(125, 74, 9, .92), rgba(255, 179, 43, .62), rgba(96, 52, 2, .92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 0 22px rgba(255, 180, 48, .24),
    0 14px 34px rgba(129, 73, 5, .34) !important;
}

.offres-grille .offre-ruban {
  z-index: 45 !important;
  top: 20px !important;
  right: -44px !important;
  padding-block: 8px !important;
  box-shadow: 0 14px 32px rgba(92, 43, 210, .38) !important;
}

@keyframes chivaryn-lux-sweep {
  from { transform: translateX(-42%) rotate(8deg); }
  to { transform: translateX(42%) rotate(8deg); }
}

@keyframes chivaryn-stars {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 42px -34px, 0 25px, 25px 0; }
}

/* Tablette : on conserve la progression sans sacrifier la lisibilité */
@media (max-width: 1180px) {
  .offres-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    padding-top: 30px !important;
  }

  .offres-grille .offre-carte,
  .offres-grille .offre-carte:nth-child(n) {
    min-height: 700px;
    transform: none !important;
  }

  .offres-grille .offre-carte:nth-child(3),
  .offres-grille .offre-carte:nth-child(4) {
    margin-top: 26px;
  }
}

@media (max-width: 700px) {
  .offres-grille {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-top: 20px !important;
  }

  .offres-grille .offre-carte,
  .offres-grille .offre-carte:nth-child(n) {
    min-height: auto;
    margin-top: 0;
    transform: none !important;
  }

  .offres-grille .offre-hologramme,
  .offres-grille .offre-carte:nth-child(n) .offre-hologramme {
    height: 222px !important;
  }

  .offres-grille .offre-prix-compact strong,
  .offres-grille .offre-carte:nth-child(n) .offre-prix-compact strong {
    font-size: clamp(2.28rem, 11vw, 3rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offres-grille .offre-carte,
  .offres-grille .offre-carte::after,
  .offres-grille .offre-carte:nth-child(4) .offre-hologramme::before {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   OFFRES — AJUSTEMENT FINAL COMPACT + PRIX
   Objectif : garder le podium tout en affichant les actions
   et la navigation de catégories sans scroll inutile.
========================================================= */
@media (min-width: 1181px) {
  .offres-grille {
    gap: clamp(12px, 1.15vw, 18px) !important;
    padding-top: 104px !important;
    padding-bottom: 24px !important;
  }

  .offres-grille .offre-carte {
    padding: 17px 17px 15px !important;
  }

  .offres-grille .offre-carte:nth-child(1) {
    --podium-rise: 0px;
    min-height: 575px !important;
  }

  .offres-grille .offre-carte:nth-child(2) {
    --podium-rise: 28px;
    min-height: 607px !important;
  }

  .offres-grille .offre-carte:nth-child(3) {
    --podium-rise: 58px;
    min-height: 641px !important;
  }

  .offres-grille .offre-carte:nth-child(4) {
    --podium-rise: 90px;
    min-height: 677px !important;
  }

  .offres-grille .offre-carte-haut {
    min-height: 44px !important;
    margin-bottom: 8px !important;
  }

  .offres-grille .offre-adn {
    gap: 8px !important;
  }

  .offres-grille .offre-adn-icone {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .offres-grille .offre-adn small {
    margin-bottom: 3px !important;
    font-size: .51rem !important;
  }

  .offres-grille .offre-adn strong {
    font-size: .84rem !important;
  }

  .offres-grille .offre-niveau {
    font-size: .66rem !important;
  }

  .offres-grille .offre-hologramme {
    height: 178px !important;
    margin: 0 -17px 11px !important;
  }

  .offres-grille .offre-carte:nth-child(2) .offre-hologramme {
    height: 188px !important;
  }

  .offres-grille .offre-carte:nth-child(3) .offre-hologramme {
    height: 198px !important;
  }

  .offres-grille .offre-carte:nth-child(4) .offre-hologramme {
    height: 210px !important;
  }

  .offres-grille .offre-carte:nth-child(3) .offre-holo-scene {
    scale: 1.03 !important;
  }

  .offres-grille .offre-carte:nth-child(4) .offre-holo-scene {
    scale: 1.09 !important;
  }

  .offres-grille .offre-introduction {
    min-height: 51px !important;
    margin-bottom: 8px !important;
  }

  .offres-grille .offre-repere {
    margin-bottom: 4px !important;
    font-size: .62rem !important;
  }

  .offres-grille .offre-carte h4 {
    font-size: clamp(1.3rem, 1.45vw, 1.65rem) !important;
  }

  .offres-grille .offre-prix-compact {
    min-height: 66px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
  }

  .offres-grille .offre-prix-compact span {
    margin-bottom: 5px !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
  }

  .offres-grille .offre-prix-compact strong,
  .offres-grille .offre-carte:nth-child(n) .offre-prix-compact strong {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: clamp(1.95rem, 2.15vw, 2.55rem) !important;
    font-weight: 720 !important;
    line-height: .96 !important;
    letter-spacing: -.038em !important;
  }

  .offres-grille .offre-carte:nth-child(3) .offre-prix-compact strong {
    font-size: clamp(2.02rem, 2.22vw, 2.65rem) !important;
  }

  .offres-grille .offre-carte:nth-child(4) .offre-prix-compact strong {
    font-size: clamp(2.12rem, 2.34vw, 2.78rem) !important;
  }

  .offres-grille .offre-points-cles {
    gap: 6px !important;
    min-height: 108px !important;
    margin-bottom: 11px !important;
  }

  .offres-grille .offre-points-cles li {
    gap: 8px !important;
    font-size: .69rem !important;
    line-height: 1.25 !important;
  }

  .offres-grille .offre-check,
  .offres-grille .offre-plus-icone {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }

  .offres-grille .offre-actions {
    gap: 6px !important;
  }

  .offres-grille .offre-details,
  .offres-grille .offre-demo,
  .offres-grille .offre-configurer {
    min-height: 38px !important;
    border-radius: 9px !important;
    font-size: .7rem !important;
  }

  .offres-grille .offre-configurer {
    min-height: 42px !important;
  }

  .offres-grille .offre-carte > .offre-actions::after {
    left: -18px !important;
    right: -18px !important;
    bottom: -16px !important;
    height: 14px !important;
  }
}

/* Écrans d'ordinateur peu hauts : compression supplémentaire,
   sans supprimer la hiérarchie du podium. */
@media (min-width: 1181px) and (max-height: 850px) {
  .offres-grille {
    padding-top: 88px !important;
  }

  .offres-grille .offre-carte:nth-child(1) { min-height: 540px !important; }
  .offres-grille .offre-carte:nth-child(2) { min-height: 568px !important; }
  .offres-grille .offre-carte:nth-child(3) { min-height: 598px !important; }
  .offres-grille .offre-carte:nth-child(4) { min-height: 630px !important; }

  .offres-grille .offre-hologramme { height: 158px !important; }
  .offres-grille .offre-carte:nth-child(2) .offre-hologramme { height: 166px !important; }
  .offres-grille .offre-carte:nth-child(3) .offre-hologramme { height: 174px !important; }
  .offres-grille .offre-carte:nth-child(4) .offre-hologramme { height: 184px !important; }

  .offres-grille .offre-introduction {
    min-height: 45px !important;
  }

  .offres-grille .offre-points-cles {
    min-height: 96px !important;
  }
}

/* =========================================================
   OFFRES — NAVIGATION RAPPROCHÉE DES CARTES
   La catégorie reste directement au-dessus du podium et
   demeure accessible pendant la comparaison sur ordinateur.
========================================================= */
@media (min-width: 901px) {
  #offres-comparateur .offres-contexte {
    /* Les informations de catégorie sont déjà portées par
       l'introduction du comparateur et par les cartes. */
    display: none !important;
  }

  #offres-comparateur .offres-parcours {
    margin-bottom: 14px !important;
  }

  #offres-comparateur .offres-selecteur {
    position: sticky;
    top: 72px;
    z-index: 120;
    width: min(100%, 1040px);
    margin: 0 auto 0 !important;
    padding: 6px !important;
    border-color: rgba(177, 141, 255, .14) !important;
    background:
      linear-gradient(180deg, rgba(15, 12, 26, .94), rgba(6, 6, 12, .91)),
      rgba(7, 7, 13, .92) !important;
    box-shadow:
      0 16px 45px rgba(0, 0, 0, .34),
      0 0 0 1px rgba(255, 255, 255, .025),
      inset 0 1px 0 rgba(255, 255, 255, .055) !important;
    backdrop-filter: blur(22px) saturate(1.15);
  }

  #offres-comparateur .offres-selecteur::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 14px 8% -24px;
    pointer-events: none;
    opacity: .36;
    background: radial-gradient(ellipse, rgba(126, 73, 255, .22), transparent 68%);
    filter: blur(20px);
  }

  #offres-comparateur .offres-grille {
    /* Le sommet de la carte Signature arrive presque au contact
       de la barre, tandis que l'escalier reste parfaitement lisible. */
    padding-top: 100px !important;
  }
}

@media (min-width: 1181px) and (max-height: 850px) {
  #offres-comparateur .offres-parcours {
    margin-bottom: 10px !important;
  }

  #offres-comparateur .offres-selecteur {
    top: 66px;
  }

  #offres-comparateur .offres-grille {
    padding-top: 86px !important;
  }
}

@media (max-width: 900px) {
  #offres-comparateur .offres-contexte {
    margin-top: 22px !important;
    margin-bottom: 20px !important;
  }

  #offres-comparateur .offres-selecteur {
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   OFFRES — ALIGNEMENT FINAL BARRE + PODIUM ADOUCI
   - La barre occupe toute la largeur utile, sans vide à droite.
   - Elle reste immédiatement au-dessus des cartes.
   - La montée en gamme est visible mais moins abrupte.
========================================================= */
@media (min-width: 1181px) {
  #offres-comparateur .offres-selecteur {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin: 0 0 0 !important;
    padding: 6px !important;
    overflow: visible !important;
  }

  #offres-comparateur .offre-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #offres-comparateur .offres-selecteur::after {
    inset: 14px 3% -20px !important;
  }

  #offres-comparateur .offres-grille {
    padding-top: 52px !important;
  }

  #offres-comparateur .offres-grille .offre-carte:nth-child(1) {
    --podium-rise: 0px !important;
  }

  #offres-comparateur .offres-grille .offre-carte:nth-child(2) {
    --podium-rise: 12px !important;
  }

  #offres-comparateur .offres-grille .offre-carte:nth-child(3) {
    --podium-rise: 25px !important;
  }

  #offres-comparateur .offres-grille .offre-carte:nth-child(4) {
    --podium-rise: 40px !important;
  }
}

@media (min-width: 1181px) and (max-height: 850px) {
  #offres-comparateur .offres-grille {
    padding-top: 48px !important;
  }

  #offres-comparateur .offres-grille .offre-carte:nth-child(2) {
    --podium-rise: 10px !important;
  }

  #offres-comparateur .offres-grille .offre-carte:nth-child(3) {
    --podium-rise: 21px !important;
  }

  #offres-comparateur .offres-grille .offre-carte:nth-child(4) {
    --podium-rise: 34px !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #offres-comparateur .offres-selecteur {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
  }
}

/* =========================================================
   CHIVARYN — PACKS VIVANTS / MICRO-INTERACTIONS FINALES
   Effets lents et premium, isolés sur les classes .cx-*.
========================================================= */
.cx-pack{
  --cx-x:50%;
  --cx-y:28%;
  isolation:isolate;
}
.cx-pack::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(360px circle at var(--cx-x) var(--cx-y),rgba(var(--a),.16),transparent 58%);
  transition:opacity .3s ease;
}
.cx-pack::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-80%;
  left:-48%;
  width:24%;
  height:260%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),rgba(var(--a),.12),transparent);
  filter:blur(2px);
  transform:rotate(22deg);
}
.cx-pack:hover::before{opacity:1}
.cx-pack:hover::after{animation:cxPackSweep 1.15s cubic-bezier(.2,.75,.2,1) both}
.cx-pack>*{position:relative;z-index:2}

.cx-pack-visual::after{
  content:"";
  position:absolute;
  inset:-20% 0 auto;
  height:42%;
  pointer-events:none;
  opacity:.16;
  background:linear-gradient(180deg,transparent,rgba(var(--a),.22),transparent);
  filter:blur(10px);
  animation:cxVisualScan 6.8s ease-in-out infinite;
}
.cx-pack-growth .cx-pack-visual::after{animation-duration:5.8s;opacity:.22}
.cx-pack-scale .cx-pack-visual::after{animation-duration:5.1s;opacity:.25}
.cx-pack-elite .cx-pack-visual::after{animation-duration:4.6s;opacity:.3}

.cx-art::before{
  content:"";
  position:absolute;
  inset:8% 10%;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(circle at 14% 32%,rgb(var(--a)) 0 2px,transparent 3px),
    radial-gradient(circle at 83% 23%,rgba(255,255,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 76% 74%,rgb(var(--a)) 0 2px,transparent 3px),
    radial-gradient(circle at 27% 78%,rgba(255,255,255,.55) 0 1px,transparent 2px);
  filter:drop-shadow(0 0 7px rgba(var(--a),.9));
  animation:cxParticles 7s ease-in-out infinite;
}
.cx-pack-growth .cx-art::before{animation-duration:5.8s}
.cx-pack-scale .cx-art::before{animation-duration:5.1s}
.cx-pack-elite .cx-art::before{animation-duration:4.4s;opacity:.72}

.cx-ring-a{animation:cxRingA 11s linear infinite}
.cx-ring-b{animation:cxRingB 8s linear infinite reverse}
.cx-orbit-a{animation:cxOrbitA 12s linear infinite}
.cx-orbit-b{animation:cxOrbitB 8.5s linear infinite reverse}

.cx-pack-launch .cx-orb-core{animation:cxCoreLaunch 4.8s ease-in-out infinite}
.cx-pack-growth .cx-orb-core{animation:cxCoreGrowth 3.8s ease-in-out infinite}
.cx-pack-scale .cx-cube{animation:cxScaleFloat 4.2s ease-in-out infinite}
.cx-pack-scale .cx-cube i{animation:cxScalePulse 2.5s ease-in-out infinite}
.cx-pack-elite .cx-gem{animation:cxEliteFloat 3.8s ease-in-out infinite}
.cx-pack-elite .cx-gem span:nth-child(2){animation:cxGemLayerA 9s linear infinite}
.cx-pack-elite .cx-gem span:nth-child(3){animation:cxGemLayerB 7s linear infinite reverse}
.cx-pack-elite .cx-gem i{animation:cxEliteCore 2.4s ease-in-out infinite}

.cx-pack-growth{animation:cxCardBreathGrowth 5.5s ease-in-out infinite}
.cx-pack-scale{animation:cxCardBreathScale 6.2s ease-in-out infinite}
.cx-pack-elite{animation:cxCardBreathElite 4.8s ease-in-out infinite}
.cx-pack:hover{animation-play-state:paused}

.cx-pack-button{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.cx-pack-button::before{
  content:"";
  position:absolute;
  top:-80%;
  left:-45%;
  width:26%;
  height:260%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(22deg);
  transition:left .65s ease;
}
.cx-pack-button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 28px rgba(var(--a),.22),inset 0 1px 0 rgba(255,255,255,.18)}
.cx-pack-button:hover::before{left:125%}
.cx-pack-button:hover i{transform:translateX(4px)}
.cx-pack-button i{transition:transform .25s ease}

@keyframes cxPackSweep{0%{left:-48%;opacity:0}18%{opacity:.85}100%{left:128%;opacity:0}}
@keyframes cxVisualScan{0%,18%{transform:translateY(-80%);opacity:0}42%{opacity:.3}72%,100%{transform:translateY(360%);opacity:0}}
@keyframes cxParticles{0%,100%{transform:translate3d(0,5px,0);opacity:.35}50%{transform:translate3d(4px,-8px,0);opacity:.78}}
@keyframes cxRingA{to{rotate:360deg}}
@keyframes cxRingB{to{rotate:-360deg}}
@keyframes cxOrbitA{to{rotate:360deg}}
@keyframes cxOrbitB{to{rotate:-360deg}}
@keyframes cxCoreLaunch{0%,100%{filter:brightness(.94);scale:.985}50%{filter:brightness(1.08);scale:1.015}}
@keyframes cxCoreGrowth{0%,100%{filter:brightness(.96);scale:.98}50%{filter:brightness(1.18);scale:1.035}}
@keyframes cxScaleFloat{0%,100%{transform:translateY(1px);rotate:-1deg}50%{transform:translateY(-8px);rotate:3deg}}
@keyframes cxScalePulse{0%,100%{scale:.88;opacity:.72}50%{scale:1.12;opacity:1}}
@keyframes cxEliteFloat{0%,100%{transform:translateY(2px);scale:.985}50%{transform:translateY(-9px);scale:1.025}}
@keyframes cxGemLayerA{to{rotate:360deg}}
@keyframes cxGemLayerB{to{rotate:-360deg}}
@keyframes cxEliteCore{0%,100%{scale:.9;filter:brightness(.95)}50%{scale:1.16;filter:brightness(1.35)}}
@keyframes cxCardBreathGrowth{0%,100%{box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 22px rgba(var(--a),.06),inset 0 1px 0 rgba(255,255,255,.045)}50%{box-shadow:0 28px 68px rgba(0,0,0,.4),0 0 38px rgba(var(--a),.12),inset 0 1px 0 rgba(255,255,255,.06)}}
@keyframes cxCardBreathScale{0%,100%{box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 25px rgba(var(--a),.07),inset 0 1px 0 rgba(255,255,255,.045)}50%{box-shadow:0 30px 72px rgba(0,0,0,.42),0 0 42px rgba(var(--a),.14),inset 0 1px 0 rgba(255,255,255,.065)}}
@keyframes cxCardBreathElite{0%,100%{box-shadow:0 25px 65px rgba(0,0,0,.38),0 0 30px rgba(var(--a),.09),inset 0 1px 0 rgba(255,255,255,.05)}50%{box-shadow:0 34px 82px rgba(0,0,0,.48),0 0 52px rgba(var(--a),.18),0 0 78px rgba(124,58,237,.07),inset 0 1px 0 rgba(255,255,255,.08)}}

@media (prefers-reduced-motion:reduce){
  .cx-pack,.cx-pack-visual::after,.cx-art::before,.cx-ring,.cx-orbit,.cx-orb-core,.cx-cube,.cx-cube i,.cx-gem,.cx-gem span,.cx-gem i{animation:none!important}
  .cx-pack::after,.cx-pack-button::before{display:none}
}


/* =========================================================
   CHIVARYN ADVISOR — ROBOT IA VIVANT & ALIGNEMENTS FINAUX
   ========================================================= */

/* Packs : structure interne parfaitement alignée */
.cx-packs-grid{
  align-items:stretch;
}
.cx-pack{
  height:100%;
}
.cx-pack-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
.cx-pack-body .cx-pack-button{
  margin-top:auto;
}
.cx-pack-body > .cx-pack-price,
.cx-pack-body > .cx-pack-features,
.cx-pack-body > .cx-pack-saving{
  width:100%;
}

/* Composition globale de l’Advisor */
.advisor-introduction{
  align-items:center;
}
.advisor-statut{
  justify-self:center;
  width:100%;
}
.advisor-statut-orbite{
  width:230px;
  height:230px;
}
.advisor-statut-texte{
  min-width:205px;
  justify-content:center;
}

/* Robot IA partagé entre l’introduction et l’analyse */
.advisor-robot{
  --robot-accent:192,132,252;
  position:relative;
  z-index:5;
  width:126px;
  height:116px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 15px 13px;
  border:1px solid rgba(var(--robot-accent),.52);
  border-radius:34px 34px 30px 30px;
  background:
    radial-gradient(circle at 50% 4%,rgba(255,255,255,.2),transparent 25%),
    radial-gradient(circle at 50% 48%,rgba(var(--robot-accent),.22),transparent 52%),
    linear-gradient(155deg,rgba(31,23,56,.97),rgba(10,9,22,.99));
  box-shadow:
    0 22px 58px rgba(0,0,0,.42),
    0 0 36px rgba(var(--robot-accent),.22),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -12px 30px rgba(55,26,110,.16);
  transform-style:preserve-3d;
  animation:advisorRobotFloat 4.2s ease-in-out infinite;
}
.advisor-robot::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-12px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(var(--robot-accent),.55),transparent 68%);
  filter:blur(7px);
  opacity:.7;
  transform:translateZ(-1px);
}
.advisor-robot::after{
  content:"";
  position:absolute;
  inset:1px;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.1) 37%,transparent 55%);
  transform:translateX(-125%);
  animation:advisorRobotShine 5.8s ease-in-out infinite;
}
.advisor-robot-visage{
  position:absolute;
  top:23px;
  left:16px;
  right:16px;
  height:55px;
  overflow:hidden;
  border:1px solid rgba(96,165,250,.28);
  border-radius:19px;
  background:
    linear-gradient(rgba(96,165,250,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(192,132,252,.035) 1px,transparent 1px),
    rgba(4,7,18,.88);
  background-size:12px 12px;
  box-shadow:
    inset 0 0 28px rgba(56,189,248,.08),
    0 0 20px rgba(56,189,248,.08);
}
.advisor-robot-oeil{
  position:absolute;
  top:18px;
  width:18px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#c084fc,#38bdf8);
  box-shadow:0 0 9px #c084fc,0 0 17px rgba(56,189,248,.7);
  animation:advisorRobotBlink 4.6s infinite;
}
.advisor-robot-oeil-gauche{left:18px}
.advisor-robot-oeil-droite{right:18px}
.advisor-robot-bouche{
  position:absolute;
  left:50%;
  bottom:10px;
  width:22px;
  height:5px;
  border-bottom:2px solid #a5f3fc;
  border-radius:0 0 999px 999px;
  opacity:.78;
  transform:translateX(-50%);
}
.advisor-robot-antenne{
  position:absolute;
  top:-23px;
  left:50%;
  width:2px;
  height:24px;
  background:linear-gradient(transparent,#c084fc);
  transform:translateX(-50%);
}
.advisor-robot-antenne i{
  position:absolute;
  top:-3px;
  left:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f0abfc;
  box-shadow:0 0 10px #f0abfc,0 0 24px rgba(192,132,252,.95);
  transform:translateX(-50%);
  animation:advisorAntennaPulse 1.8s ease-in-out infinite;
}
.advisor-robot-oreille{
  position:absolute;
  top:41px;
  width:12px;
  height:30px;
  border:1px solid rgba(var(--robot-accent),.48);
  background:rgba(18,14,35,.96);
  box-shadow:0 0 13px rgba(var(--robot-accent),.15);
}
.advisor-robot-oreille-gauche{left:-9px;border-radius:9px 2px 2px 9px}
.advisor-robot-oreille-droite{right:-9px;border-radius:2px 9px 9px 2px}
.advisor-robot small{
  position:relative;
  z-index:2;
  color:#928ca0;
  font-size:.43rem;
  font-weight:900;
  letter-spacing:.16em;
}
.advisor-robot strong{
  position:relative;
  z-index:2;
  margin-top:1px;
  color:transparent;
  background:linear-gradient(135deg,#fff,#d8b4fe 48%,#38bdf8);
  background-clip:text;
  -webkit-background-clip:text;
  font-size:1.1rem;
  line-height:1;
  filter:drop-shadow(0 0 9px rgba(192,132,252,.4));
}

/* Analyse : centrage, profondeur et activité visuelle */
.advisor-analyse{
  width:min(100%,1000px);
  min-height:440px;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  justify-content:center;
  align-items:center;
  gap:clamp(48px,7vw,92px);
}
.advisor-analyse-visuel{
  width:300px;
  height:300px;
  margin-inline:auto;
  isolation:isolate;
}
.advisor-analyse-visuel::before{
  content:"";
  position:absolute;
  inset:28px;
  z-index:-2;
  border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.2),rgba(56,189,248,.06) 43%,transparent 72%);
  filter:blur(10px);
  animation:advisorAnalyseHalo 2.8s ease-in-out infinite;
}
.advisor-analyse-visuel::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:24px;
  width:180px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(168,85,247,.44),transparent 68%);
  filter:blur(8px);
  transform:translateX(-50%);
}
.advisor-analyse-orbite{
  box-shadow:inset 0 0 28px rgba(139,92,246,.025);
}
.advisor-analyse-orbite::before{
  content:"";
  position:absolute;
  top:-4px;
  left:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d8b4fe;
  box-shadow:0 0 10px #d8b4fe,0 0 23px rgba(168,85,247,.9);
  transform:translateX(-50%);
}
.advisor-analyse-orbite-2::before{background:#38bdf8;box-shadow:0 0 10px #38bdf8,0 0 23px rgba(56,189,248,.8)}
.advisor-analyse-orbite-3::before{width:6px;height:6px;background:#f472b6}
.advisor-robot-analyse{
  --robot-accent:168,85,247;
  width:138px;
  height:126px;
  animation:advisorRobotAnalyse 3.2s ease-in-out infinite;
}
.advisor-analyse-scan{
  position:absolute;
  z-index:7;
  left:47px;
  right:47px;
  top:60px;
  height:2px;
  opacity:0;
  background:linear-gradient(90deg,transparent,#67e8f9,transparent);
  box-shadow:0 0 10px #67e8f9,0 0 24px rgba(56,189,248,.75);
  animation:advisorScan 2.6s ease-in-out infinite;
}
.advisor-analyse-flux{
  position:absolute;
  z-index:1;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c084fc;
  box-shadow:0 0 8px #c084fc,0 0 18px rgba(168,85,247,.7);
  animation:advisorFlux 3s ease-in-out infinite;
}
.advisor-analyse-flux-1{top:22%;left:16%}
.advisor-analyse-flux-2{top:69%;right:13%;animation-delay:-1s;background:#38bdf8}
.advisor-analyse-flux-3{bottom:12%;left:38%;animation-delay:-2s;background:#f472b6}
.advisor-analyse-contenu{
  max-width:590px;
  align-self:center;
}
.advisor-analyse-contenu h3{
  max-width:560px;
  text-wrap:balance;
}
.advisor-analyse-etapes{
  position:relative;
  max-width:460px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.advisor-analyse-etapes::before{
  content:"";
  position:absolute;
  top:30px;
  bottom:30px;
  left:24px;
  width:1px;
  background:linear-gradient(#4ade80,#a855f7,rgba(255,255,255,.08));
  opacity:.35;
}
.advisor-analyse-etapes span{
  position:relative;
  z-index:2;
  min-height:28px;
}
.advisor-analyse-etapes i{
  border:2px solid #0e0c18;
}

@keyframes advisorRobotFloat{
  0%,100%{transform:translateY(2px) rotate(-1deg)}
  50%{transform:translateY(-7px) rotate(1deg)}
}
@keyframes advisorRobotAnalyse{
  0%,100%{transform:translateY(2px) scale(.99)}
  50%{transform:translateY(-8px) scale(1.025)}
}
@keyframes advisorRobotShine{
  0%,62%{transform:translateX(-125%);opacity:0}
  73%{opacity:.75}
  90%,100%{transform:translateX(125%);opacity:0}
}
@keyframes advisorRobotBlink{
  0%,43%,47%,100%{transform:scaleY(1)}
  45%{transform:scaleY(.12)}
}
@keyframes advisorAntennaPulse{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(.82)}
  50%{opacity:1;transform:translateX(-50%) scale(1.18)}
}
@keyframes advisorAnalyseHalo{
  0%,100%{opacity:.62;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.08)}
}
@keyframes advisorScan{
  0%,12%{top:68px;opacity:0}
  28%{opacity:1}
  72%{opacity:.8}
  88%,100%{top:222px;opacity:0}
}
@keyframes advisorFlux{
  0%,100%{opacity:.28;transform:translate3d(0,6px,0) scale(.75)}
  50%{opacity:1;transform:translate3d(9px,-8px,0) scale(1.2)}
}

@media (max-width:980px){
  .advisor-statut{display:flex}
  .advisor-analyse{grid-template-columns:1fr;gap:26px;text-align:center}
  .advisor-analyse-contenu{margin-inline:auto}
  .advisor-analyse-contenu h3,.advisor-analyse-contenu>p{margin-inline:auto}
  .advisor-analyse-etapes{margin-inline:auto;text-align:left}
}
@media (max-width:700px){
  .advisor-statut{display:none}
  .advisor-analyse-visuel{width:230px;height:230px}
  .advisor-robot-analyse{width:118px;height:108px}
  .advisor-analyse-scan{left:38px;right:38px}
  @keyframes advisorScan{0%,12%{top:48px;opacity:0}28%{opacity:1}72%{opacity:.8}88%,100%{top:176px;opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .advisor-robot,.advisor-robot::after,.advisor-robot-oeil,.advisor-robot-antenne i,
  .advisor-analyse-visuel::before,.advisor-analyse-scan,.advisor-analyse-flux{animation:none!important}
}

/* =========================================================
   OFFRES — GEL FINAL / FINITIONS ADVISOR
   ========================================================= */

/* L’analyse est visible immédiatement : aucun écran vide au lancement. */
.advisor-ecran .advisor-analyse{
  opacity:1;
  visibility:visible;
  filter:none;
  transform:none;
}

.advisor-analyse-visuel,
.advisor-analyse-contenu{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .34s ease,transform .5s cubic-bezier(.22,1,.36,1);
}

.advisor-analyse.est-active .advisor-analyse-visuel,
.advisor-analyse.est-active .advisor-analyse-contenu{
  opacity:1;
  transform:translateY(0);
}

.advisor-analyse-statut{
  width:fit-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:22px 0 14px;
  padding:9px 13px;
  border:1px solid rgba(192,132,252,.18);
  border-radius:999px;
  color:#c9c4d3;
  background:linear-gradient(135deg,rgba(139,92,246,.09),rgba(56,189,248,.035));
  font-size:.69rem;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 24px rgba(139,92,246,.06);
}

.advisor-analyse-statut i{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 8px #4ade80,0 0 18px rgba(74,222,128,.5);
  animation:advisorFinalStatus 1.5s ease-in-out infinite;
}

.advisor-analyse-etapes span.actif{
  color:#f4f0fb;
  transform:translateX(3px);
}

.advisor-analyse-etapes span.terminee{
  color:#a9f4c7;
}

/* Recommandation : hiérarchie plus nette sans alourdir l’écran. */
.advisor-resultat-score{
  padding:14px 10px;
  border:1px solid rgba(var(--advisor-resultat-accent),.12);
  border-radius:20px;
  background:rgba(var(--advisor-resultat-accent),.035);
}

.advisor-score-cercle{
  width:164px;
  height:164px;
  box-shadow:
    0 0 55px rgba(var(--advisor-resultat-accent),.18),
    inset 0 0 34px rgba(var(--advisor-resultat-accent),.08);
  animation:advisorFinalScore 3.6s ease-in-out infinite;
}

.advisor-score-cercle strong{
  font-size:2.25rem;
}

.advisor-resultat-bouton-principal{
  min-height:58px;
  padding-inline:25px;
  font-size:.82rem;
  box-shadow:
    0 18px 42px rgba(var(--advisor-resultat-accent),.28),
    0 0 28px rgba(var(--advisor-resultat-accent),.1),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.advisor-resultat-bouton-principal:hover{
  transform:translateY(-3px) scale(1.012);
}

.advisor-resultat-actions{
  align-items:stretch;
}

@keyframes advisorFinalStatus{
  0%,100%{opacity:.55;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.16)}
}

@keyframes advisorFinalScore{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-3px);filter:brightness(1.08)}
}

@media (max-width:980px){
  .advisor-analyse-statut{margin-inline:auto}
}

@media (max-width:700px){
  .advisor-resultat-actions{flex-direction:column}
  .advisor-resultat-bouton-principal,
  .advisor-resultat-bouton-secondaire{width:100%}
  .advisor-score-cercle{width:150px;height:150px}
}

@media (prefers-reduced-motion:reduce){
  .advisor-analyse-visuel,
  .advisor-analyse-contenu,
  .advisor-analyse-statut i,
  .advisor-score-cercle{animation:none!important;transition:none!important;opacity:1;transform:none}
}

/* =========================================================
   FREEZE FINAL — RUBANS PARFAITEMENT ANCRÉS EN HAUT À DROITE
   ========================================================= */

/* Le ruban des offres ne doit plus hériter du centrage historique. */
.offres-grille .offre-carte {
  isolation: isolate;
}

.offres-grille .offre-ruban {
  position: absolute !important;
  top: 13px !important;
  right: -38px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 60 !important;
  width: 144px !important;
  box-sizing: border-box !important;
  padding: 7px 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: rotate(42deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

/* Même ancrage précis pour les rubans des packs. */
.packs-grille .pack-carte {
  isolation: isolate;
}

.packs-grille .pack-ruban,
.packs-grille .pack-ruban-signature {
  position: absolute !important;
  top: 13px !important;
  right: -38px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 60 !important;
  width: 144px !important;
  box-sizing: border-box !important;
  padding: 7px 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: rotate(42deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

/* Sur mobile, on conserve le ruban lisible dans le coin sans débordement excessif. */
@media (max-width: 760px) {
  .offres-grille .offre-ruban,
  .packs-grille .pack-ruban,
  .packs-grille .pack-ruban-signature {
    top: 12px !important;
    right: -39px !important;
    width: 140px !important;
    padding: 6px 0 !important;
    font-size: .43rem !important;
  }
}

/* =========================================================
   FREEZE ULTIME — RUBANS ENTIÈREMENT LISIBLES DANS L'ANGLE
   ========================================================= */

/* Offres du comparateur : le texte reste intégralement visible,
   tout en gardant le ruban collé à l'angle supérieur droit. */
.offres-grille .offre-ruban {
  top: 22px !important;
  right: -42px !important;
  width: 166px !important;
  min-width: 166px !important;
  padding: 8px 0 !important;
  font-size: .50rem !important;
  line-height: 1.05 !important;
  letter-spacing: .075em !important;
  transform: rotate(42deg) !important;
}

/* Packs nouvelle génération (classes cx-*) : même ancrage précis. */
.cx-pack {
  isolation: isolate;
}

.cx-pack .cx-ribbon {
  top: 23px !important;
  right: -39px !important;
  width: 168px !important;
  min-width: 168px !important;
  padding: 8px 0 !important;
  font-size: .50rem !important;
  line-height: 1.05 !important;
  letter-spacing: .075em !important;
  white-space: nowrap !important;
  transform: rotate(42deg) !important;
  transform-origin: center !important;
}

/* Anciennes cartes pack conservées pour compatibilité. */
.packs-grille .pack-ruban,
.packs-grille .pack-ruban-signature {
  top: 22px !important;
  right: -42px !important;
  width: 166px !important;
  min-width: 166px !important;
  padding: 8px 0 !important;
  font-size: .50rem !important;
  line-height: 1.05 !important;
  letter-spacing: .075em !important;
}

@media (max-width: 760px) {
  .offres-grille .offre-ruban,
  .cx-pack .cx-ribbon,
  .packs-grille .pack-ruban,
  .packs-grille .pack-ruban-signature {
    top: 20px !important;
    right: -42px !important;
    width: 160px !important;
    min-width: 160px !important;
    padding: 7px 0 !important;
    font-size: .45rem !important;
  }
}

/* =========================================================
   GEL FINAL — RUBANS DES PACKS CX ANCRÉS DANS L'ANGLE
   Correction ciblée : ne modifie pas les cartes d'offres.
   ========================================================= */
.cx-pack > .cx-ribbon {
  position: absolute !important;
  top: 22px !important;
  right: -44px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  width: 176px !important;
  min-width: 176px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  color: #fff !important;
  font-size: .50rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: .07em !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: rotate(42deg) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .cx-pack > .cx-ribbon {
    top: 20px !important;
    right: -45px !important;
    width: 170px !important;
    min-width: 170px !important;
    padding: 7px 0 !important;
    font-size: .45rem !important;
  }
}

/* =========================================================
   CHIVARYN — GEL OFFRES / FINITIONS MODALE PRODUIT
   Continuité chromatique + alignement vertical uniforme des packs.
========================================================= */

/* La fiche Signature reprend l'identité or de la carte Signature. */
.modal-offre.product-signature {
  --product-accent: 245, 181, 55;
  --product-secondary: 255, 221, 132;
}

.modal-offre.product-signature .modal-offre-contenu {
  border-color: rgba(var(--product-accent), 0.5);
  background:
    radial-gradient(circle at 78% 5%, rgba(var(--product-accent), 0.2), transparent 32%),
    radial-gradient(circle at 18% 12%, rgba(255, 238, 180, 0.065), transparent 28%),
    linear-gradient(145deg, rgba(22, 17, 8, 0.99), rgba(7, 8, 15, 0.99) 48%, rgba(9, 10, 18, 0.99));
  box-shadow:
    0 40px 130px rgba(0, 0, 0, 0.72),
    0 0 85px rgba(var(--product-accent), 0.13),
    inset 0 1px 0 rgba(255, 244, 207, 0.09);
}

.modal-offre.product-signature .product-experience-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--product-accent), 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent 56%);
}

.modal-offre.product-signature .product-experience-resume {
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--product-accent), 0.11), transparent 34%),
    linear-gradient(180deg, rgba(var(--product-accent), 0.07), rgba(255, 255, 255, 0.01));
}

.modal-offre.product-signature .product-experience-resume-haut > strong {
  color: transparent;
  background: linear-gradient(105deg, #fff9e8 0%, rgb(var(--product-secondary)) 52%, #f5b737 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 28px rgba(var(--product-accent), 0.16);
}

.modal-offre.product-signature .product-experience-core,
.modal-offre.product-signature .product-experience-symbole {
  box-shadow:
    0 0 34px rgba(var(--product-accent), 0.18),
    inset 0 1px 0 rgba(255, 248, 218, 0.12);
}

.modal-offre.product-signature .modal-offre-configurer {
  color: #171006;
  background: linear-gradient(135deg, #f3b832, #ffd97c 58%, #c88716);
  box-shadow:
    0 18px 42px rgba(var(--product-accent), 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* Plus d'air entre la dernière garantie et le bloc Core de la fiche détaillée. */
.product-experience-garanties + .product-experience-core-barre {
  margin-top: 42px;
  padding-top: 24px;
}

/* Les quatre packs gardent exactement la même respiration entre
   « Ce qui est inclus » et le bloc Économie / Conception. */
.cx-pack .cx-includes {
  min-height: 114px;
}

.cx-pack .cx-saving {
  margin-top: 24px;
  margin-bottom: 12px;
}

@media (max-height: 760px) {
  .product-experience-garanties + .product-experience-core-barre {
    margin-top: 32px;
  }
}

@media (max-width: 760px) {
  .cx-pack .cx-includes {
    min-height: auto;
  }

  .cx-pack .cx-saving {
    margin-top: 22px;
  }
}



/* =========================================================
   LE PROTOCOLE CHIVARYN — SECTION SIGNATURE
========================================================= */
.protocole-chivaryn{position:relative;isolation:isolate;overflow:hidden;padding:clamp(110px,9vw,170px) 0;background:linear-gradient(180deg,#05050a 0%,#070511 45%,#05050a 100%)}
.protocole-fond-grille{position:absolute;inset:0;z-index:-4;opacity:.26;background-image:linear-gradient(rgba(139,92,246,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.055) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(to bottom,transparent,black 9%,black 91%,transparent)}
.protocole-chivaryn:before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 50% 22%,rgba(109,40,217,.22),transparent 26%),radial-gradient(circle at 22% 62%,rgba(76,29,149,.15),transparent 25%),radial-gradient(circle at 80% 76%,rgba(245,158,11,.10),transparent 24%)}
.protocole-lueur{position:absolute;z-index:-2;width:620px;height:620px;border-radius:50%;filter:blur(120px);pointer-events:none}.protocole-lueur-a{left:-340px;top:29%;background:rgba(109,40,217,.16)}.protocole-lueur-b{right:-330px;bottom:12%;background:rgba(245,158,11,.11)}
.protocole-conteneur{position:relative;z-index:2}.protocole-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);align-items:end;gap:clamp(50px,8vw,120px);margin-bottom:75px}.protocole-intro-principal{max-width:720px}.protocole-intro h2{margin:17px 0 22px;font-size:clamp(3rem,6vw,5.9rem);line-height:.92;letter-spacing:-.065em}.protocole-intro h2 span{display:block;color:transparent;background:linear-gradient(100deg,#fff 0%,#c4b5fd 30%,#8b5cf6 65%,#e879f9 100%);background-clip:text;-webkit-background-clip:text}.protocole-intro-principal>p{max-width:620px;color:#c2bdcf;font-size:1.08rem;line-height:1.78}.protocole-badge{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:9px 14px;border:1px solid rgba(168,85,247,.35);border-radius:999px;color:#d8b4fe;background:rgba(139,92,246,.08);font-size:.68rem;font-weight:900;letter-spacing:.12em}.protocole-badge i{width:7px;height:7px;border-radius:50%;background:#a855f7;box-shadow:0 0 15px #a855f7}.protocole-intro-principal>small{display:block;margin:10px 0 0 10px;color:#817b8d;font-size:.68rem}
.protocole-manifeste{position:relative;padding:28px;border:1px solid rgba(139,92,246,.25);border-radius:22px;background:linear-gradient(145deg,rgba(20,17,35,.94),rgba(7,7,14,.96));box-shadow:0 28px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)}.protocole-manifeste-icone{position:absolute;top:25px;left:25px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(168,85,247,.45);border-radius:13px;color:#c084fc;background:rgba(139,92,246,.12);font-size:1.2rem}.protocole-manifeste p{padding-left:58px;color:#c5c0cf;line-height:1.75;font-size:.9rem}.protocole-manifeste p strong{color:#c084fc;font-weight:700}.protocole-piliers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:25px;padding-top:20px;border-top:1px solid rgba(255,255,255,.075)}.protocole-piliers span{text-align:center}.protocole-piliers i{width:36px;height:36px;display:grid;place-items:center;margin:0 auto 7px;color:#c084fc;font-size:1.15rem;font-weight:900;font-style:normal}.protocole-piliers small{color:#8e899a;font-size:.5rem;font-weight:800;letter-spacing:.06em}
.protocole-systeme{position:relative;min-height:1640px;max-width:1260px;margin:0 auto}.protocole-liaisons{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}.protocole-liaisons path{fill:none;stroke:url(#protocoleLigne);stroke-width:1.25;opacity:.28;filter:drop-shadow(0 0 9px rgba(168,85,247,.4))}.protocole-liaisons .protocole-flux{stroke-width:2;stroke-dasharray:5 26;opacity:.9;animation:protocoleFlux 4.4s linear infinite}.protocole-liaisons .protocole-flux-retard{animation-delay:-2.2s}@keyframes protocoleFlux{to{stroke-dashoffset:-155}}
.protocole-core{position:absolute;z-index:4;top:8px;left:50%;width:min(540px,48vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(99,102,241,.22),rgba(30,13,66,.12) 46%,transparent 70%);filter:drop-shadow(0 0 45px rgba(124,58,237,.28))}.protocole-core-titre{position:absolute;top:-17px;left:50%;min-width:260px;padding:8px 16px;border:1px solid rgba(139,92,246,.3);border-radius:11px;background:rgba(6,6,13,.86);text-align:center;transform:translateX(-50%);backdrop-filter:blur(12px)}.protocole-core-titre strong,.protocole-core-titre span{display:block}.protocole-core-titre strong{font-size:.84rem;letter-spacing:.04em}.protocole-core-titre span{margin-top:3px;color:#8e899a;font-size:.56rem}.protocole-core-orbite{position:absolute;border:1px solid rgba(139,92,246,.33);border-radius:50%;box-shadow:inset 0 0 35px rgba(139,92,246,.08)}.protocole-core-orbite-1{inset:8%;animation:protocolSpin 22s linear infinite}.protocole-core-orbite-2{inset:18%;border-color:rgba(96,165,250,.32);animation:protocolSpin 14s linear infinite reverse}.protocole-core-orbite-3{inset:31%;border-color:rgba(192,132,252,.43);animation:protocolPulse 3.2s ease-in-out infinite}.protocole-core-reseau{position:absolute;inset:24%;border-radius:50%;background:repeating-conic-gradient(from 20deg,rgba(167,139,250,.4) 0 1deg,transparent 1deg 13deg),radial-gradient(circle,rgba(124,58,237,.42),transparent 67%);filter:blur(.2px);animation:protocolSpin 34s linear infinite}.protocole-core-logo{position:relative;z-index:4;width:112px;height:112px;display:grid;place-items:center;border:2px solid #a78bfa;clip-path:polygon(50% 0,92% 24%,92% 74%,50% 100%,8% 74%,8% 24%);background:linear-gradient(145deg,#1f1247,#080611);box-shadow:0 0 35px rgba(168,85,247,.65),inset 0 0 28px rgba(139,92,246,.45)}.protocole-core-logo span{font-size:3rem;font-weight:950;color:#e9d5ff;text-shadow:0 0 22px #a855f7}.protocole-core-point{position:absolute;width:10px;height:10px;border-radius:50%;background:#e9d5ff;box-shadow:0 0 10px white,0 0 25px #a855f7}.protocole-core-point.p1{top:12%;left:49%}.protocole-core-point.p2{right:8%;top:46%;background:#f6c453;box-shadow:0 0 12px #f6c453}.protocole-core-point.p3{bottom:10%;left:46%}.protocole-core-point.p4{left:8%;top:51%;background:#f6c453;box-shadow:0 0 12px #f6c453}@keyframes protocolSpin{to{transform:rotate(360deg)}}@keyframes protocolPulse{50%{transform:scale(1.06);box-shadow:0 0 55px rgba(168,85,247,.3)}}
.protocole-etape{position:absolute;z-index:3;width:43%;min-height:360px;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:22px;align-items:start}.protocole-etape:nth-of-type(even){grid-template-columns:150px minmax(0,1fr)}.protocole-etape:nth-of-type(even) .protocole-etape-texte{order:2}.protocole-etape:nth-of-type(even) .protocole-station{order:1}.protocole-etape-1{left:0;top:350px}.protocole-etape-2{right:0;top:350px}.protocole-etape-3{left:0;top:760px}.protocole-etape-4{right:0;top:760px}.protocole-etape-5{left:0;top:1160px}.protocole-etape-6{right:0;top:1160px}.protocole-etape-texte>span{display:block;color:#a855f7;font-size:2rem;font-weight:900;line-height:1}.protocole-etape-texte h3{margin:8px 0 8px;font-size:1.22rem;letter-spacing:.025em}.protocole-etape-texte small{display:inline-flex;padding:6px 11px;border:1px solid rgba(168,85,247,.28);border-radius:999px;color:#d8b4fe;background:rgba(139,92,246,.06);font-size:.55rem;letter-spacing:.08em}.protocole-etape-texte p{margin-top:15px;color:#aaa5b5;font-size:.82rem;line-height:1.75}.protocole-station{position:relative;width:138px;height:138px;display:grid;place-items:center;border:1px solid rgba(167,139,250,.55);border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.24),rgba(8,6,20,.92) 56%);box-shadow:0 0 28px rgba(124,58,237,.3),inset 0 0 26px rgba(139,92,246,.18);transition:transform .45s ease,box-shadow .45s ease}.protocole-station:before,.protocole-station:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(139,92,246,.2)}.protocole-station:before{inset:10px}.protocole-station:after{inset:-11px;border-style:dashed;animation:protocolSpin 16s linear infinite}.protocole-station .station-icone{font-size:2.3rem;color:#c084fc;text-shadow:0 0 20px #a855f7}.protocole-station>i{position:absolute;right:-4px;bottom:20px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 20px #a855f7}.protocole-etape.est-active .protocole-station,.protocole-etape:hover .protocole-station{transform:scale(1.06);box-shadow:0 0 55px rgba(124,58,237,.52),inset 0 0 35px rgba(139,92,246,.25)}.protocole-etape.est-active .protocole-etape-texte h3{color:#fff;text-shadow:0 0 20px rgba(192,132,252,.35)}
.protocole-scene{position:absolute;top:180px;width:290px;min-height:150px;border:1px solid rgba(139,92,246,.22);border-radius:14px;background:linear-gradient(145deg,rgba(17,13,33,.9),rgba(6,6,13,.92));box-shadow:0 24px 65px rgba(0,0,0,.3),0 0 35px rgba(124,58,237,.09);overflow:hidden}.protocole-etape:nth-of-type(odd) .protocole-scene{right:0}.protocole-etape:nth-of-type(even) .protocole-scene{left:0}.scene-decouverte{display:flex;flex-direction:column;gap:7px;padding:17px}.scene-decouverte span{position:relative;z-index:2;padding:6px 9px;border:1px solid rgba(139,92,246,.2);border-radius:7px;color:#bdb7ca;background:rgba(139,92,246,.05);font-size:.54rem}.scene-decouverte b{position:absolute;right:30px;bottom:9px;width:2px;height:105px;background:linear-gradient(transparent,#8b5cf6,#fff);box-shadow:0 0 18px #8b5cf6;transform:rotate(-24deg)}.scene-architecture{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:15px}.scene-architecture span{display:grid;place-items:center;min-height:48px;border:1px solid rgba(139,92,246,.26);border-radius:9px;color:#d8b4fe;background:rgba(139,92,246,.08);font-size:.52rem}.scene-architecture b{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 20px #a855f7}.scene-creation{padding:15px}.scene-browser{position:relative;width:77%;height:120px;border:1px solid rgba(167,139,250,.35);border-radius:9px;background:#100a25;box-shadow:0 0 22px rgba(139,92,246,.22)}.scene-browser em{display:inline-block;width:5px;height:5px;margin:7px 0 0 5px;border-radius:50%;background:#8b5cf6}.scene-browser strong{position:absolute;left:10px;right:10px;top:28px;height:45px;border-radius:6px;background:linear-gradient(135deg,rgba(139,92,246,.48),rgba(56,189,248,.12))}.scene-browser b{position:absolute;left:10px;right:10px;bottom:10px;height:25px;background:repeating-linear-gradient(90deg,rgba(192,132,252,.4) 0 11%,transparent 11% 15%)}.scene-phone{position:absolute;right:23px;bottom:13px;width:55px;height:96px;border:1px solid #a78bfa;border-radius:10px;background:linear-gradient(#201044,#080611);box-shadow:0 0 22px rgba(139,92,246,.28)}.scene-optimisation{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:14px}.scene-optimisation div span,.scene-optimisation div strong{display:block}.scene-optimisation div span{color:#797384;font-size:.42rem}.scene-optimisation div strong{margin-top:4px;color:#f5f3ff;font-size:1rem}.scene-optimisation svg{grid-column:1/-1;width:100%;height:75px;margin-top:8px}.scene-optimisation polyline{fill:none;stroke:#c084fc;stroke-width:2;filter:drop-shadow(0 0 5px #a855f7)}.scene-deploiement{border:0;background:transparent;box-shadow:none;overflow:visible}.launch-gate{position:absolute;right:7px;top:0;width:150px;height:145px;display:grid;place-items:center;border:1px solid rgba(167,139,250,.5);border-radius:8px;background:radial-gradient(circle at bottom,rgba(139,92,246,.46),transparent 60%),#0a0715;box-shadow:0 0 35px rgba(139,92,246,.28)}.launch-gate span{font-size:2.6rem;filter:drop-shadow(0 0 16px #a855f7)}.scene-deploiement ul{position:absolute;left:0;top:20px;width:140px;padding:13px;border:1px solid rgba(139,92,246,.2);border-radius:9px;background:#090711;list-style:none}.scene-deploiement li{padding:6px 0;color:#aaa5b5;font-size:.47rem}.scene-deploiement li:before{content:"✓";margin-right:7px;color:#86efac}.station-gold{border-color:rgba(245,196,83,.62);background:radial-gradient(circle,rgba(245,158,11,.16),rgba(8,6,14,.94) 58%);box-shadow:0 0 30px rgba(245,158,11,.2)}.station-gold .station-icone{color:#ffd66b;text-shadow:0 0 20px rgba(245,158,11,.8)}.scene-evolution{min-height:170px;border-color:rgba(245,158,11,.22);background:radial-gradient(circle at center,rgba(245,158,11,.12),rgba(7,6,12,.95))}.scene-evolution span{position:absolute;padding:6px 9px;border:1px solid rgba(245,158,11,.28);border-radius:999px;color:#facc15;background:rgba(245,158,11,.05);font-size:.46rem}.scene-evolution span:nth-child(1){top:12px;left:82px}.scene-evolution span:nth-child(2){top:52px;left:4px}.scene-evolution span:nth-child(3){bottom:12px;left:35px}.scene-evolution span:nth-child(4){top:54px;right:2px}.scene-evolution span:nth-child(5){bottom:16px;right:20px}.scene-evolution b{position:absolute;left:50%;top:50%;font-size:3rem;color:#ffd66b;transform:translate(-50%,-50%);text-shadow:0 0 25px rgba(245,158,11,.7)}
.protocole-projet-actif{position:absolute;z-index:5;left:50%;top:820px;width:230px;padding:22px 18px;border:1px solid rgba(245,158,11,.24);border-radius:50%;text-align:center;background:radial-gradient(circle,rgba(245,158,11,.13),rgba(8,6,15,.94) 67%);box-shadow:0 0 55px rgba(124,58,237,.18),0 0 35px rgba(245,158,11,.1);transform:translateX(-50%)}.protocole-projet-actif small,.protocole-projet-actif strong,.protocole-projet-actif span{display:block}.protocole-projet-actif small{font-size:.68rem}.protocole-projet-actif strong{margin:5px 0;color:#f8d66d;font-size:1rem}.protocole-projet-actif span{color:#8d8798;font-size:.6rem}
.protocole-conclusion{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:25px;margin-top:38px;padding:28px 32px;border:1px solid rgba(139,92,246,.25);border-radius:20px;background:linear-gradient(145deg,rgba(16,12,31,.95),rgba(7,7,14,.96));box-shadow:0 25px 75px rgba(0,0,0,.33),inset 0 1px 0 rgba(255,255,255,.05)}.protocole-conclusion-logo{width:66px;height:66px;display:grid;place-items:center;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);color:#e9d5ff;background:linear-gradient(145deg,#5b21b6,#111);font-size:1.6rem;font-weight:900;box-shadow:0 0 30px #7c3aed}.protocole-conclusion p{color:#bcb7c8;line-height:1.55}.protocole-conclusion p strong{font-size:1.22rem;color:#f7f5ff}.protocole-conclusion p strong span{color:#a855f7}.protocole-cta{min-height:55px;display:inline-flex;align-items:center;gap:34px;padding:0 24px;border:1px solid rgba(168,85,247,.58);border-radius:11px;color:#fff;background:linear-gradient(135deg,rgba(76,29,149,.55),rgba(124,58,237,.18));text-decoration:none;font-weight:800;box-shadow:0 0 30px rgba(124,58,237,.12);transition:.3s}.protocole-cta:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(124,58,237,.28)}.protocole-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.018)}.protocole-metrics div{padding:20px 24px;border-right:1px solid rgba(255,255,255,.07)}.protocole-metrics div:last-child{border-right:0}.protocole-metrics strong,.protocole-metrics span{display:block}.protocole-metrics strong{color:#a855f7;font-size:1.25rem}.protocole-metrics span{margin-top:4px;color:#807a8b;font-size:.56rem;letter-spacing:.08em}
@media(max-width:1050px){.protocole-intro{grid-template-columns:1fr}.protocole-manifeste{max-width:620px}.protocole-systeme{min-height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding-top:380px}.protocole-core{top:20px;width:min(420px,76vw)}.protocole-liaisons,.protocole-projet-actif{display:none}.protocole-etape,.protocole-etape-1,.protocole-etape-2,.protocole-etape-3,.protocole-etape-4,.protocole-etape-5,.protocole-etape-6{position:relative;top:auto;left:auto;right:auto;width:auto;min-height:480px;display:grid;grid-template-columns:1fr!important;padding:25px;border:1px solid rgba(139,92,246,.18);border-radius:20px;background:rgba(9,7,18,.74)}.protocole-etape:nth-of-type(even) .protocole-etape-texte,.protocole-etape:nth-of-type(even) .protocole-station{order:initial}.protocole-station{width:110px;height:110px}.protocole-scene,.protocole-etape:nth-of-type(odd) .protocole-scene,.protocole-etape:nth-of-type(even) .protocole-scene{position:relative;top:auto;left:auto;right:auto;width:100%;margin-top:15px}.protocole-conclusion{grid-template-columns:auto 1fr}.protocole-cta{grid-column:1/-1;justify-content:center}.protocole-metrics{grid-template-columns:repeat(2,1fr)}.protocole-metrics div:nth-child(2){border-right:0}.protocole-metrics div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.07)}}
@media(max-width:650px){.protocole-chivaryn{padding:90px 0}.protocole-intro h2{font-size:clamp(2.7rem,15vw,4.2rem)}.protocole-manifeste{padding:22px}.protocole-manifeste-icone{position:static;margin-bottom:14px}.protocole-manifeste p{padding-left:0}.protocole-piliers{grid-template-columns:repeat(2,1fr);row-gap:15px}.protocole-systeme{grid-template-columns:1fr;padding-top:315px}.protocole-core{width:300px}.protocole-core-logo{width:88px;height:88px}.protocole-core-titre{min-width:230px}.protocole-etape{min-height:auto}.protocole-conclusion{grid-template-columns:1fr;text-align:center;padding:24px 20px}.protocole-conclusion-logo{margin:auto}.protocole-metrics{grid-template-columns:1fr}.protocole-metrics div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.protocole-metrics div:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){.protocole-core-orbite,.protocole-station:after,.protocole-liaisons .protocole-flux{animation:none!important}}