/* Styles extraits pour onumerique.html */


    /* Reset */
    * { box-sizing:border-box; margin:0; padding:0; }
    body {
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background:#f7f6f6;
      color:#7c2a9c;
      line-height:1.6;
      padding:80px 20px 50px;
      min-height:100vh;
      display:flex; flex-direction:column; align-items:center;
    }

    a.home-link {
      position:fixed; top:20px; left:20px;
      text-decoration:none; font-weight:600;
      color:#ac56e6; background:rgba(198, 51, 218, 0.1);
      padding:8px 12px; border-radius:6px;
      box-shadow:0 2px 8px rgba(168, 56, 212, 0.3);
      transition:background-color 0.3s ease;
      z-index:20;
    }
    a.home-link:hover { background:rgba(42,109,159,0.3); color:white; }

    h1 {
      color:#451d72; font-weight:700;
      margin-bottom:16px; text-align:center;
    }

    /* --- Ajout d'un style pour le texte d’introduction --- */
    .intro-text, .description-text {
      max-width:800px; font-size:1.15rem;
      color:#9e60f0; text-align:center;
      margin-bottom:28px; padding:0 10px;
    }

    /* --- Style pour la citation --- */
    .quote {
      font-style:italic; color:#3a1152;
      background:#c1a0db; padding:15px 20px;
      border-left:5px solid #41175e;
      max-width:700px; margin:20px auto;
      border-radius:6px;
    }

    /* Styles carrousel (inchangés) */
    .carousel-container {
      width:90%; max-width:900px; overflow:hidden;
      border-radius:16px; box-shadow:0 5px 22px rgba(116, 3, 221, 0.35);
      height:460px; background-color:#3c0357;
      position:relative; display:flex; flex-direction:column; justify-content:flex-end;
      margin-top:20px;
    }

    .carousel {
      display:flex; height:100%; transition:transform 0.5s ease-in-out;
    }

    .carousel-slide {
      flex:0 0 100%; height:100%;
      display:flex; justify-content:center; align-items:center;
    }

    .carousel-slide img {
      max-width:100%; max-height:100%;
      object-fit:cover;
      border-radius:14px; box-shadow:0 3px 14px rgba(139, 117, 236, 0.4);
      display:block;
    }

    .caption {
      position:absolute; bottom:0; width:100%;
      background:rgba(111, 17, 165, 0.75); color:#f0f6fc;
      font-weight:600; padding:12px 20px;
      font-size:1.1rem; border-radius:0 0 14px 14px;
      box-shadow:0 -2px 8px rgba(181, 22, 221, 0.6);
      display:flex; align-items:center; justify-content:center;
      text-align:center; height:48px;
    }

    .carousel-btn {
      position:absolute; top:50%; transform:translateY(-50%);
      background:rgba(56, 17, 78, 0.85); border:none;
      font-size:32px; padding:10px 18px; cursor:pointer;
      border-radius:50%; color:white;
      box-shadow:0 3px 12px rgba(0,0,0,0.2);
      transition:background 0.3s ease;
      z-index:10;
    }
    .carousel-btn:hover, .carousel-btn:focus {
      background:rgb(197, 149, 199); outline:none;
    }
    .carousel-btn.prev { left:20px; }
    .carousel-btn.next { right:20px; }

    .join-btn {
      margin-top:30px; padding:12px 24px;
      background-color:#a928f3; color:#f0f6fc;
      border:none; border-radius:6px; font-weight:600;
      cursor:pointer; box-shadow:0 4px 12px rgba(42,109,159,0.6);
      transition:background-color 0.3s ease;
    }
    .join-btn:hover, .join-btn:focus {
      background-color:#9b2ece; outline:none;
    }

    @media(max-width:600px) {
      .carousel-container { height:320px; }
      .caption { font-size:1rem; height:40px; padding:8px 15px; }
      .carousel-btn { font-size:24px; padding:8px 14px; }
      .join-btn { padding:10px 18px; font-size:1rem; }
    }