.geo-snow-section { position: relative; overflow: hidden;}
      .geo-snow-canvas{
        position:absolute; inset:0;
        width:100%; height:100%;
        pointer-events:none;
        z-index: 2;
      }
      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      .text-gradient-primary {
    background: linear-gradient(to right, #fc5757 0%, #ff7771 30%, #ff948c 65%, #ffcac4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    /* Carte gauche : vibe technique + orbites */
    .marquee-card{
      box-shadow: 0 18px 50px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.04);
    }

    .grid-lines{
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity:.35;
      mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 65%);
      pointer-events:none;
    }

    .float-orb{
      position:absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(252,87,87,.28), rgba(252,87,87,0) 62%);
      filter: blur(.2px);
      pointer-events:none;
      animation: orbFloat 6s ease-in-out infinite;
    }

    .orb-1{ right:-70px; top:-70px; }
    .orb-2{ left:-60px; bottom:-80px; width:220px; height:220px; animation-duration: 7.5s; opacity:.7; }

    @keyframes orbFloat{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-10px,0); }
    }

    /* Carte droite : effet "shine" + anneau */
    .content-card{
      box-shadow: 0 22px 60px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }

    .content-card .shine{
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
      transform: rotate(12deg);
      pointer-events:none;
    }

    .content-card .ring{
      position:absolute;
      right:-120px; bottom:-120px;
      width: 260px; height: 260px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 18px rgba(255,255,255,.04);
      pointer-events:none;
      animation: ringPulse 4.8s ease-in-out infinite;
    }

    @keyframes ringPulse{
      0%,100%{ transform: scale(1); opacity: .9; }
      50%{ transform: scale(1.04); opacity: .6; }
    }



      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      /* Carte gauche : vibe technique + orbites */
    .marquee-card{
      box-shadow: 0 18px 50px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.04);
    }

    .grid-lines{
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity:.35;
      mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 65%);
      pointer-events:none;
    }

    .float-orb{
      position:absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(252,87,87,.28), rgba(252,87,87,0) 62%);
      filter: blur(.2px);
      pointer-events:none;
      animation: orbFloat 6s ease-in-out infinite;
    }

    .orb-1{ right:-70px; top:-70px; }
    .orb-2{ left:-60px; bottom:-80px; width:220px; height:220px; animation-duration: 7.5s; opacity:.7; }

    @keyframes orbFloat{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-10px,0); }
    }

    /* Carte droite : effet "shine" + anneau */
    .content-card{
      box-shadow: 0 22px 60px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }

    .content-card .shine{
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
      transform: rotate(12deg);
      pointer-events:none;
    }

    .content-card .ring{
      position:absolute;
      right:-120px; bottom:-120px;
      width: 260px; height: 260px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 18px rgba(255,255,255,.04);
      pointer-events:none;
      animation: ringPulse 4.8s ease-in-out infinite;
    }

    @keyframes ringPulse{
      0%,100%{ transform: scale(1); opacity: .9; }
      50%{ transform: scale(1.04); opacity: .6; }
    }



      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      
.btn-outline-primary{
        color:#FF444F !important;
        border-color:#FF444F;
    }
    .btn-outline-primary:hover{
        background-color:#FF444F;
        color:#FFF !important;
        border-color:#FF444F;
    }
    .bg-primary{
        background-color:#FF444F !important;
    }
    .text-gradient-primary {
    background: linear-gradient(to right, #fc5757 0%, #ff7771 30%, #ff948c 65%, #ffcac4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
      /* Carte gauche : vibe technique + orbites */
    .marquee-card{
      box-shadow: 0 18px 50px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.04);
    }

    .grid-lines{
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity:.35;
      mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 65%);
      pointer-events:none;
    }

    .float-orb{
      position:absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(252,87,87,.28), rgba(252,87,87,0) 62%);
      filter: blur(.2px);
      pointer-events:none;
      animation: orbFloat 6s ease-in-out infinite;
    }

    .orb-1{ right:-70px; top:-70px; }
    .orb-2{ left:-60px; bottom:-80px; width:220px; height:220px; animation-duration: 7.5s; opacity:.7; }

    @keyframes orbFloat{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-10px,0); }
    }

    /* Carte droite : effet "shine" + anneau */
    .content-card{
      box-shadow: 0 22px 60px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }

    .content-card .shine{
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
      transform: rotate(12deg);
      pointer-events:none;
    }

    .content-card .ring{
      position:absolute;
      right:-120px; bottom:-120px;
      width: 260px; height: 260px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 18px rgba(255,255,255,.04);
      pointer-events:none;
      animation: ringPulse 4.8s ease-in-out infinite;
    }

    @keyframes ringPulse{
      0%,100%{ transform: scale(1); opacity: .9; }
      50%{ transform: scale(1.04); opacity: .6; }
    }



      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      
.radar-wrap{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

#radarOptim{
  width: 100%;
  height: 360px;
  display: block;
  background: transparent;
}

.radar-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.btn-radar{
  border: 1px solid rgba(252,87,87,.35);
  background: transparent;
  color: rgba(252,87,87,.95);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn-radar:hover{ transform: translateY(-1px); }
.btn-radar.is-active{
  background: rgba(252,87,87,.12);
}


      .evo-curve{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 520 / 220;
  margin: 0 auto;
}

.evo-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Grille ultra légère */
.grid path{
  stroke: rgba(252,87,87,.08);
  stroke-width: 1;
  fill: none;
}

/* Courbe: effet "dessin" */
.curve{
  fill: none;
  stroke: rgba(252,87,87,.95);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* animation draw */
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawLine 1.6s ease-out forwards;
}

/* Halo (très subtil) */
.curve-glow{
  fill: none;
  stroke: rgba(252,87,87,.22);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(1px);

  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawLine 1.6s ease-out forwards;
}

/* Points */
.pt{
  fill: #fc5757;
  opacity: 0;
  transform-origin: center;
  animation: pop 0.35s ease-out forwards;
  animation-delay: 1.0s;
}
.pt2{ animation-delay: 1.2s; }
.pt3{ animation-delay: 1.35s; }

/* Petit pulse sur les leviers */
.pt, .end{
  animation-name: pop, pulse;
  animation-duration: .35s, 1.6s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
}
.pt{ animation-delay: 1.0s, 1.6s; }
.pt2{ animation-delay: 1.2s, 1.8s; }
.pt3{ animation-delay: 1.35s, 2.0s; }

/* Point final */
.end{
  fill: #fc5757;
  opacity: 0;
  transform-origin: center;
  animation: pop 0.35s ease-out forwards, pulse-end 2.6s ease-in-out infinite;
  animation-delay: 1.55s, 2.4s;
}

/* Animations */
@keyframes drawLine{
  to { stroke-dashoffset: 0; }
}
@keyframes pop{
  0%{ opacity:0; transform: scale(.7); }
  100%{ opacity:1; transform: scale(1); }
}
@keyframes pulse{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes pulse-end{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .curve, .curve-glow, .pt, .end{ animation: none !important; opacity: 1; }
  .curve, .curve-glow{ stroke-dashoffset: 0; }
}


    /* Carte gauche : vibe technique + orbites */
    .marquee-card{
      box-shadow: 0 18px 50px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.04);
    }

    .grid-lines{
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity:.35;
      mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 65%);
      pointer-events:none;
    }

    .float-orb{
      position:absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(252,87,87,.28), rgba(252,87,87,0) 62%);
      filter: blur(.2px);
      pointer-events:none;
      animation: orbFloat 6s ease-in-out infinite;
    }

    .orb-1{ right:-70px; top:-70px; }
    .orb-2{ left:-60px; bottom:-80px; width:220px; height:220px; animation-duration: 7.5s; opacity:.7; }

    @keyframes orbFloat{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-10px,0); }
    }

    /* Carte droite : effet "shine" + anneau */
    .content-card{
      box-shadow: 0 22px 60px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }

    .content-card .shine{
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
      transform: rotate(12deg);
      pointer-events:none;
    }

    .content-card .ring{
      position:absolute;
      right:-120px; bottom:-120px;
      width: 260px; height: 260px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 18px rgba(255,255,255,.04);
      pointer-events:none;
      animation: ringPulse 4.8s ease-in-out infinite;
    }

    @keyframes ringPulse{
      0%,100%{ transform: scale(1); opacity: .9; }
      50%{ transform: scale(1.04); opacity: .6; }
    }



      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
.radar-wrap{
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      position: relative;
    }

    #radarOptim{
      width: 100%;
      height: 360px;
      display: block;
      background: transparent;
    }

    .radar-actions{
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 10px;
    }

    .btn-radar{
      border: 1px solid rgba(252,87,87,.35);
      background: transparent;
      color: rgba(252,87,87,.95);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
      cursor: pointer;
      transition: transform .15s ease, background .15s ease;
    }
    .btn-radar:hover{ transform: translateY(-1px); }
    .btn-radar.is-active{
      background: rgba(252,87,87,.12);
    }


      .evo-curve{
      width: 100%;
      max-width: 520px;
      aspect-ratio: 520 / 220;
      margin: 0 auto;
    }

    .evo-svg{
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    /* Grille ultra légère */
    .grid path{
      stroke: rgba(252,87,87,.08);
      stroke-width: 1;
      fill: none;
    }

/* Courbe: effet "dessin" */
.curve{
  fill: none;
  stroke: rgba(252,87,87,.95);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* animation draw */
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawLine 1.6s ease-out forwards;
}

/* Halo (très subtil) */
.curve-glow{
  fill: none;
  stroke: rgba(252,87,87,.22);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(1px);

  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawLine 1.6s ease-out forwards;
}

/* Points */
.pt{
  fill: #fc5757;
  opacity: 0;
  transform-origin: center;
  animation: pop 0.35s ease-out forwards;
  animation-delay: 1.0s;
}
.pt2{ animation-delay: 1.2s; }
.pt3{ animation-delay: 1.35s; }

/* Petit pulse sur les leviers */
.pt, .end{
  animation-name: pop, pulse;
  animation-duration: .35s, 1.6s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
}
.pt{ animation-delay: 1.0s, 1.6s; }
.pt2{ animation-delay: 1.2s, 1.8s; }
.pt3{ animation-delay: 1.35s, 2.0s; }

/* Point final */
.end{
  fill: #fc5757;
  opacity: 0;
  transform-origin: center;
  animation: pop 0.35s ease-out forwards, pulse-end 2.6s ease-in-out infinite;
  animation-delay: 1.55s, 2.4s;
}

/* Animations */
@keyframes drawLine{
  to { stroke-dashoffset: 0; }
}
@keyframes pop{
  0%{ opacity:0; transform: scale(.7); }
  100%{ opacity:1; transform: scale(1); }
}
@keyframes pulse{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes pulse-end{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .curve, .curve-glow, .pt, .end{ animation: none !important; opacity: 1; }
  .curve, .curve-glow{ stroke-dashoffset: 0; }
}


    /* Carte gauche : vibe technique + orbites */
    .marquee-card{
      box-shadow: 0 18px 50px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.04);
    }

    .grid-lines{
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity:.35;
      mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 65%);
      pointer-events:none;
    }

    .float-orb{
      position:absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(252,87,87,.28), rgba(252,87,87,0) 62%);
      filter: blur(.2px);
      pointer-events:none;
      animation: orbFloat 6s ease-in-out infinite;
    }

    .orb-1{ right:-70px; top:-70px; }
    .orb-2{ left:-60px; bottom:-80px; width:220px; height:220px; animation-duration: 7.5s; opacity:.7; }

    @keyframes orbFloat{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-10px,0); }
    }

    /* Carte droite : effet "shine" + anneau */
    .content-card{
      box-shadow: 0 22px 60px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }

    .content-card .shine{
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
      transform: rotate(12deg);
      pointer-events:none;
    }

    .content-card .ring{
      position:absolute;
      right:-120px; bottom:-120px;
      width: 260px; height: 260px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 18px rgba(255,255,255,.04);
      pointer-events:none;
      animation: ringPulse 4.8s ease-in-out infinite;
    }

    @keyframes ringPulse{
      0%,100%{ transform: scale(1); opacity: .9; }
      50%{ transform: scale(1.04); opacity: .6; }
    }



      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
.flow-map{
      position: relative;
      width: 100%;
      max-width: 560px;
      aspect-ratio: 1 / 1;
      border-radius: 0;
      background: transparent;
    }

    #flowMapCanvas{
      width: 100%;
      height: 100%;
      display: block;
      background: transparent;
    }

      .chart-wrapper {
        max-width: 420px;
        margin: 0 auto;
      }

      @media (max-width: 768px) {
        .chart-wrapper {
          max-width: 300px;
        }
      }



    /* Carte gauche : vibe technique + orbites */
    .marquee-card{
      box-shadow: 0 18px 50px rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.04);
    }

    .grid-lines{
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity:.35;
      mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 65%);
      pointer-events:none;
    }

    .float-orb{
      position:absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(252,87,87,.28), rgba(252,87,87,0) 62%);
      filter: blur(.2px);
      pointer-events:none;
      animation: orbFloat 6s ease-in-out infinite;
    }

    .orb-1{ right:-70px; top:-70px; }
    .orb-2{ left:-60px; bottom:-80px; width:220px; height:220px; animation-duration: 7.5s; opacity:.7; }

    @keyframes orbFloat{
      0%,100%{ transform: translate3d(0,0,0); }
      50%{ transform: translate3d(0,-10px,0); }
    }

    /* Carte droite : effet "shine" + anneau */
    .content-card{
      box-shadow: 0 22px 60px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }

    .content-card .shine{
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
      transform: rotate(12deg);
      pointer-events:none;
    }

    .content-card .ring{
      position:absolute;
      right:-120px; bottom:-120px;
      width: 260px; height: 260px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 18px rgba(255,255,255,.04);
      pointer-events:none;
      animation: ringPulse 4.8s ease-in-out infinite;
    }

    @keyframes ringPulse{
      0%,100%{ transform: scale(1); opacity: .9; }
      50%{ transform: scale(1.04); opacity: .6; }
    }



      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      [data-bs-theme="dark"] .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      [data-bs-theme="dark"] .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      [data-bs-theme="dark"] .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }