/* Conteneur principal 100% largeur (avec max pour confort) */
  .page {
    width: 100%;
    max-width: 1400px; /* facultatif, retire si tu veux absolument 100% sans limite */
   margin-left: auto; margin-right: auto; margin-top: 2em;
  }

  /* Grille 2 colonnes */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  justify-content: center;  /* ← CENTRE LE GRID */
}

  /* Carte/colonne basique */
  .col {
    padding: 16px;
    min-height: 120px;
  }

  .col h2 {
    margin-bottom: 12px;
    font-size: 1.05rem;
  }
	  .colonne h2 {text-align: center;    font-family: 'Montserrat Ultra', sans-serif;     font-size: 5vw; color : red; margin-top: -20px;}

.youtube-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

  /* Fallback d'aspect ratio pour anciens navigateurs */
  .youtube-wrap.fallback {
    height: 0;
    padding-top: 56.25%; /* 16:9 */
  }


  /* Si tu veux plusieurs vidéos dans la même colonne, elles s'empilent proprement */
  .video-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /* Responsive : sur écrans étroits, passer en 1 colonne et agrandir les vidéos */
  @media (max-width: 900px) {
    .cols {
      grid-template-columns: 1fr;
    }
    /* rendre la vidéo plus lisible sur mobile : 90% de la largeur de la colonne */
    .youtube-wrap {
      width: 90%;
      min-width: 180px;
		margin-top: -10px;
    }
	  .colonne h2 {text-align: center;    font-family: 'Montserrat Ultra', sans-serif;     font-size: 5vw; color : red; margin-top: -20px;

	  }}