/* === SECTION FUTURISTE YOYOLO (Bleu foncé → Noir → Orange) === */
 .yoyolo-modules-section {
     position: relative;
     overflow: hidden;
     background:
         /* halo bleu foncé en haut gauche */
         radial-gradient(circle at top left, rgba(20, 40, 80, 0.5), transparent 60%),

         /* halo orange en bas droite */
         radial-gradient(circle at bottom right, rgba(247, 142, 61, 0.28), transparent 60%),

         /* GRAND dégradé bleu → noir → orange */
         linear-gradient(135deg,
             #0a1b2f 0%,
             /* BLEU FONCÉ */
             #07101c 25%,
             /* Bleu très sombre */
             #020507 45%,
             /* NOIR */
             #0a0705 60%,
             /* noir très sombre tirant vers l’orange */
             rgb(25, 13, 7) 75%,
             /* noir très sombre tirant vers l’orange */
             #2c1306ff 95%,
             /* brun sombre, étape de transition */
             #f79d58ff 100%
             /* ORANGE FINAL */
         ),

         #000000;
     color: #e5e7eb;
 }

 /* Effet halo bleu/orange */
 .yoyolo-modules-section::before,
 .yoyolo-modules-section::after {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     filter: blur(64px);
     pointer-events: none;
     z-index: 0;
 }

 .yoyolo-modules-section::before {
     top: -120px;
     left: -80px;
     background: radial-gradient(circle, rgba(20, 40, 80, 0.85), transparent 70%);
     opacity: 0.55;
 }

 .yoyolo-modules-section::after {
     bottom: -160px;
     right: -120px;
     background: radial-gradient(circle, rgba(247, 142, 61, 0.75), transparent 70%);
     opacity: 0.55;
 }

 .yoyolo-modules-section .container {
     position: relative;
     z-index: 1;
 }

 /* Titres */
 .yoyolo-title-kicker {
     font-size: 0.9rem;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: #f78e3d;
     /* bleu clair pour contraster */
     font-weight: 700;
 }

 .yoyolo-main-title {
     font-size: clamp(2.2rem, 3vw, 3rem);
     font-weight: 800;
     color: #f9fafb;
 }

 .yoyolo-subtitle a {
     color: #f78e3d;
 }

 .yoyolo-subtitle a:hover {
     color: #ffbe91;
 }

 /* Cartes */
 .yoyolo-module-card {
     position: relative;
     height: 100%;
     border-radius: 1.6rem;
     padding: 1.8rem 1.6rem 2.1rem;
     background:
         linear-gradient(135deg, rgba(5, 8, 12, 0.95), rgba(5, 8, 12, 0.88)),
         radial-gradient(circle at top left, rgba(40, 60, 120, 0.28), transparent 55%),
         radial-gradient(circle at bottom right, rgba(247, 142, 61, 0.22), transparent 55%);
     border: 1px solid rgba(148, 163, 184, 0.35);
     box-shadow:
         0 28px 80px rgba(0, 0, 0, 0.9),
         0 0 0 1px rgba(0, 0, 0, 0.9);
     transform: translateY(0) scale(1);
     transition: all 0.28s ease;
     overflow: hidden;
 }

 /* Glow animé bleu → orange */
 .yoyolo-module-card::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: inherit;
     background: conic-gradient(from 180deg,
             rgba(4, 41, 57, 0),
             rgba(3, 65, 92, 0.5),
             rgba(144, 114, 91, 0.75),
             rgba(56, 189, 248, 0.0));
     opacity: 0;
     transition: opacity 0.4s ease;
     pointer-events: none;
     z-index: 0;
 }

 .yoyolo-module-card:hover {
     transform: translateY(-10px) scale(1.02);

     /* Bordure orange en hover */
     border-color: #f78e3d;

     /* FOND noir → orange (gradient lisible mais élégant) */
     background:
         linear-gradient(135deg,
             rgba(14, 9, 61, 1) 0%,
             /* Noir profond */
             #1a0f07 40%,
             /* Noir chaud */
             #3d2315ff 65%,
             /* Brun foncé */
             #ea9758ff 100%
             /* Orange Yoyolo */
         );

     /* Glow doux autour de la carte */
     box-shadow:
         0 28px 70px rgba(247, 142, 61, 0.25),
         0 0 42px rgba(247, 142, 61, 0.32);
 }

 .yoyolo-module-card:hover::before {
     opacity: 1;
 }

 /* Images */
 .yoyolo-module-image-wrap {
     border-radius: 1.2rem;
     padding: 0.3rem;
     background: radial-gradient(circle at top left, rgba(40, 60, 120, 0.55), transparent 60%);
     margin-bottom: 1.2rem;
 }

 .yoyolo-module-image {
     border-radius: 1rem;
     max-height: 200px;
     object-fit: cover;
     width: 100%;
 }

 /* Pills */
 .yoyolo-module-pill {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.26rem 0.8rem;
     border-radius: 999px;
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: #e5e7eb;
     border: 1px solid #f78e3d;
     background: linear-gradient(135deg, #0c0f12, #f78e3d);
     margin-bottom: 0.8rem;
 }

 /* Texte */
 .yoyolo-module-title {
     font-size: 1.3rem;
     font-weight: 700;
     color: #f9fafb;
 }

 .yoyolo-module-sub {
     font-size: 0.95rem;
     color: #ffffff;
     margin-bottom: 1rem;
 }

 /* Liste */
 .yoyolo-module-list {
     list-style: none;
     padding-left: 0;
     margin: 0;
     color: #e5e7eb;
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
 }

 .yoyolo-module-list li {
     position: relative;
     padding-left: 1.4rem;
 }

 .yoyolo-module-list li::before {
     content: "✦";
     position: absolute;
     left: 0;
     top: 0.1rem;
     font-size: 0.75rem;
     color: #f78e3d;
     /* ORANGE YOYOLO */
 }

 /* Footer */
 .yoyolo-module-footer {
     margin-top: 1.2rem;
     font-size: 0.82rem;
     text-transform: uppercase;
     letter-spacing: 0.16em;
     color: #9ca3af;
 }


 /* Responsive */
 @media (max-width: 575.98px) {
     .yoyolo-main-title {
         font-size: 2rem;
     }

     .yoyolo-module-card {
         padding: 1.6rem 1.3rem 1.9rem;
     }
 }