@charset "UTF-8";
/* CSS Document */

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #f0f4f8;
      color: #222;
      line-height: 1.7;
    }
    header {
      background-color: #0f172a;
      color: white;
      text-align: center;
      padding: 25px 10px;
    }
    header h1 {
      margin: 0;
      font-size: 28px;
    }
header a, header a:hover {
    color: white;
    text-decoration: none
}
    header p {
      margin: 4px 0;
    }
    nav {
      background: #10b981;
      display: flex;
      justify-content: center;
      gap: 30px;
      padding: 15px;
      font-weight: bold;
    }
    nav a {
      color: white;
      text-decoration: none;
      transition: 0.3s;
    }
    nav a:hover {
      color: #facc15;
    }
    .tel-capsule a {
      background: #2563eb;
      color: white;
      padding: 12px 20px;
      border-radius: 40px;
      font-weight: bold;
        display: block;
        margin: 0 auto;
        max-width: max-content;
        text-decoration: none
    }
    .photo {
      width: 100%;
      height: 460px;
      background: url('toiture-essonne-reparation.webp') center/cover no-repeat;
      border-bottom: 4px solid #10b981;
    }
    .photo-a {
      width: 100%;
      height: 460px;
      background: url('isolation_combles.webp') center/cover no-repeat;
      border-bottom: 4px solid #10b981;
    }
    .photo-b {
      width: 100%;
      height: 460px;
      background: url('nettoyage_toiture_demoussage.webp') center/cover no-repeat;
      border-bottom: 4px solid #10b981;
    }
    .photo-c {
      width: 100%;
      height: 460px;
      background: url('decapage_mousse_toit.webp') center/cover no-repeat;
      border-bottom: 4px solid #10b981;
    }
    .content {
      max-width: 1000px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .content p {
      margin-bottom: 14px;
      text-align: justify;
    }
    footer {
      background-color: #0f172a;
      color: white;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }
  /* Styles pour la mise en page en grille */
  .grid-container {
    display: grid;
    gap: 20px; /* Espace entre les colonnes et les lignes */
    margin-top: 20px;
  }

  .row-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes de taille égale */
    gap: 20px;
  }

  .row-3-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes de taille égale */
    gap: 20px;
  }

  .grid-column {
    background-color: #f0f0f0; /* Pour visualiser les colonnes, peut être retiré */
    padding: 15px;
    border-radius: 8px;
    height: 100%; /* Assure que les colonnes ont la même hauteur dans leur ligne */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la hauteur/largeur */
  }

  .grid-column p {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 10px; /* Réduit l'espace entre les paragraphes dans une colonne */
  }
  /* Rendre le tout réactif pour les petits écrans */
  @media (max-width: 768px) {
    .row-2-cols, .row-3-cols {
      grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
    }
  }
    @media screen and (max-width: 768px) {
      nav {
        flex-direction: column;
        align-items: center;
      }
      .tel-capsule {
        top: auto;
        bottom: 15px;
      }
    }