/* ----------- VERSION MOBILE ----------- */
@media (max-width: 768px) {

  /* Passe toute la grille en une seule colonne */
  .containerGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* espace entre chaque élément */
  }

  /* L’image au centre devient pleine largeur */
  .cerclePhoto {
    order: 1;
    width: 60vw;           /* taille responsive (60% de la largeur écran) */
    max-width: 280px;      /* limite sur très grands téléphones */
    aspect-ratio: 1 / 1;   /* cercle parfait */
    border-radius: 50%;
    overflow: hidden;
    justify-self: center;
    align-self: center;
  }

  .cerclePhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    object-position: 0 0;
  }

  /* Paragraphes empilés et espacés */
  .text-left, .text-right, .row2 {
    order: 2;
    width: 100%;
    padding: 15px 5%;
    text-align: justify;
  }

  /* Ajoute de l’espace entre eux */
  .text-left + .text-right,
  .text-right + .row2 {
    margin-top: 10px;
  }

  /* Le titre avant tout */
  .margin > h2 {
    order: 0;
    text-align: center;
    margin-bottom: 15px;
  }
}


@media (max-width: 768px) {
  h1 {
    font-size: 25px;   /* ✅ Taille plus petite sur mobile */
    letter-spacing: 2px;
  }
   .grey {
    padding: 15px;
  }
}