/* =========================
       COURSES
    ========================= */

    .courses-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 40px;
      margin-bottom: 60px;
    }

    .courses-header h2 {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(55px, 8vw, 120px);
      letter-spacing: -6px;
      line-height: .85;
	  color: var(--upred)
    }

    .courses-header p {
      max-width: 350px;
      color: #666;
      line-height: 1.5;
    }

    .courses-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .course {
      position: relative;
      min-height: 300px;
      overflow: hidden;
      color: white;
      cursor: pointer;
	  
	  border-radius: 30px / 20px;
    }

    .course img {
      position: absolute;
      inset: 0;
      height: 100%;
      object-fit: cover;
      transition: transform .8s cubic-bezier(.2,.7,.2,1);	  
    }

    .course::after {
      content: "";
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          180deg,
          transparent 25%,
          rgba(0,0,0,.8)
        );
    }

    .course:hover img {
      transform: scale(1.06);
	  object-fit: cover;
    }

    .course-content {
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 0;
      right: 0;

      padding: 35px;
    }
	
	course-label{

		display: flex;
		align-items: right;
		
		bottom: 0;
		left: 0;
	}
	
	.course-label img {
		position: static;      /* remet l’image dans le flux normal */
		width: auto;           /* annule le width:100% global */
		height: 25px;          /* ou la taille que tu veux */
		object-fit: contain;   /* évite les déformations */
		display: inline-block; /* optionnel, mais propre */
	}

    .course-type {
      display: inline-block;
      padding: 7px 12px;

      background: var(--upyellow);
      color: var(--upred);

      border-radius: 100px;

      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .course h3 {
      margin-top: 20px;

      font-family: "Space Grotesk", sans-serif;
      font-size: 58px;
      letter-spacing: -3px;
    }

    .course-meta {
        margin-top: 15px;

      display: flex;
      gap: 25px;

      color: #ddd;
      font-size: 14px;
    }
	
	.course-name-price {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2px;
      <!-- background: #bbb; -->
      border: 1px solid var(--upred);
	  color: var(--upred)
    }
	
	.course-name-price-card {
		padding: 1px;
		min-height: 10px;

		display: flex;
		flex-direction: column;
		  
		font-family: "Space Grotesk", sans-serif;
		color: white;
    }
	
	.course-name-price-card .name {
		
		font-size: 58px;
		text-align: left;
    }
	
	.course-name-price-card .price {
		
		font-size: 35px;
		text-align: right;	
		float: right;		
    }
	
	.course-price-button {
      display: block;
      margin-top: 25px;

      padding: 15px;
      text-align: center;

      border: 1px solid var(--upred);
      border-radius: 100px;

      font-weight: 700;
      font-size: 13px;
	  
	  background: var(--upyellow);
	  color: var(--upred);
    }
	
	.course-price-button:hover {
		border: 1px solid var(--upyellow);
		background: var(--upred);
		color: var(--upyellow);
	}
	
	
	.course-remise {
      
      width: 100%;
      padding: 24px 40px;

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

      color: var(--upred);
     
    }
	
	.course-remise .logo {
		font-family: "Space Grotesk", sans-serif;
		font-size: 35px;
		font-weight: 700;
		letter-spacing: -1px;
		padding : 20px 30px;
	}
	
	.course-remise .promo {
		font-family: "Space Grotesk", sans-serif;
		font-size: 25px;
		letter-spacing: -1px;
	}
	
	.course-logo {
	  width: auto;
	  height: 100px;
	  object-fit: contain;
	}