.bg-green {
    background-color: #cfe8d4 !important;
}
.bg-white {
    background-color: white !important;
}

@font-face {
    font-family: 'wood';
    src: url(police/JFWilwod.ttf) format(truetype);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Perfect';
    src: url(police/KGPerfectPenmanship.otf) format(opentype);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'black-forest';
    src: url(police/BLACK\ FOREST.ttf) format(opentype);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nature';
    src: url(police/NaturalForestDemoRegular.ttf) format(opentype);
    font-weight: normal;
    font-style: normal;
}

header {
    text-align: center;
    padding: 60px 15px; /* plus d'espace en haut et en bas */
}

header h1 {
    font-family: 'wood', sans-serif;
    font-size: 2.8rem; /* taille lisible mais pas écrasée */
    font-weight: 800;
    margin-bottom: 20px; /* espace entre titre et texte */
    color: #2F5D3B;

}

header p {
    font-family: 'Perfect', sans-serif;
    font-size: 1.1rem; /* légèrement plus grand pour mobile */
    line-height: 1.6;
    max-width: 350px; /* limite la largeur pour respirer */
    margin: 0 auto;
}
header img {
    margin-top: 30px;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: none;
    border-radius: 20px;

}

/* Titres sections */
h2 {
    font-family: 'nature', sans-serif;
    font-size: 1.8rem; /* taille mobile */
    text-align: center;
    margin-bottom: 20px;
}

h3 {
    font-family: 'black-forest', sans-serif;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 12px;
}

/* Paragraphes */
p {
    font-family: 'Perfect', sans-serif;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 16px;
}

/* Iframe carte / formulaire responsive */
iframe {
    width: 100%;
    max-width: 100%;
    height: 60vh; /* prend 60% de la hauteur de l'écran */
    min-height: 400px; /* au cas où l'écran est petit */
    border: none;
    border-radius: 20px;
}
#avis iframe {
    width: 100%;
    height: 1000px; /* hauteur suffisante pour que tout le formulaire soit visible */
    min-height: 600px; /* garantie pour petits écrans */
    max-width: 100%;
    border: none;
    border-radius: 20px;
}

/* Sections */
section {
    padding: 20px 10px;
}
.pole {
    background-color: #cfe8d4ab;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(47, 93, 59, 0.7);
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px; /* espace entre les cartes */
    width: 100%; /* prend toute la largeur sur mobile */
}

.pole:hover {
    transform: scale(1.03); /* zoom léger sur mobile ça peut suffire */
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2F5D3B; /* vert forêt */
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Liste horizontale centrée */
.top-nav ul {
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 12px 0;
    list-style: none;
}

/* Liens du menu */
.top-nav a {
    color: #f8f8f0; /* blanc cassé */
    font-family: 'Perfect', sans-serif;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Effet au survol */
.top-nav a:hover {
    color: #cfe8d4; /* vert clair */
}

/* Pour éviter que le header soit caché derrière le menu */
body {
    padding-top: 60px; /* ajuster selon la hauteur du menu */
}
.pr {
    background-color: #cfe8d4ab;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(47, 93, 59, 0.7);
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px; /* espace entre les cartes */
    width: 100%; /* prend toute la largeur sur mobile */
}
.programme-table {
  width: 100%;
  border-collapse: collapse; /* essentiel */
  margin-top: 10px;
  background-color: white; /* tableau blanc pour bien voir les bordures */
}

.programme-table th,
.programme-table td {
  border: 2px solid #2c5f2d; /* épaisseur visible */
  padding: 0.6rem 1rem;
  text-align: left;
  vertical-align: top;
  background-color: white; /* chaque cellule blanche pour que la bordure ressorte */
}

.programme-table th {
  background-color: #e0f2e0;
  font-weight: bold;
}

.programme-table tr:nth-child(even) td {
  background-color: #f9f9f9; /* alterné pour lisibilité */
}

.programme-table td {
  white-space: pre-line; /* retours à la ligne dans les cellules */
}
/* Conteneur du tableau */
.table-responsive {
  max-width: 100%;
  overflow-x: hidden; /* pas de scroll horizontal */
}

/* Tableau compact */
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;   /* texte plus petit pour tenir sur mobile */
  table-layout: fixed;   /* force les colonnes à se partager l'espace */
}

/* Colonnes avec largeur automatique mais limitée */
.table-responsive th,
.table-responsive td {
  border: 1px solid #2c5f2d;
  padding: 3px 5px;      /* très peu de padding pour compacter */
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;  /* coupe le texte trop long */
}

/* En-têtes plus petits */
.table-responsive th {
  background-color: #e0f2e0;
  font-weight: bold;
  font-size: 0.8rem;
}

/* Lignes alternées */
.table-responsive tr:nth-child(even) td {
  background-color: #f9f9f9;
}

/* Retour à la ligne automatique dans les cellules */
.table-responsive td {
  white-space: normal;
}
/* Ajustements pour très petits écrans */
@media (max-width: 360px) {
    header h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    header p, p {
        font-size: 0.9rem;
    }
}
@media (max-width: 480px) {
    .programme-table {
        width: 100%;
        border-collapse: collapse; /* essentiel */
        margin-top: 10px;
        background-color: white; /* tableau blanc pour bien voir les bordures */
    }

    .programme-table th,
    .programme-table td {
        border: 2px solid #2c5f2d; /* épaisseur visible */
        padding: 0.6rem 1rem;
        text-align: left;
        vertical-align: top;
        background-color: white; /* chaque cellule blanche pour que la bordure ressorte */
    }

    .programme-table th {
        background-color: #e0f2e0;
        font-weight: bold;
    }

    .programme-table tr:nth-child(even) td {
        background-color: #f9f9f9; /* alterné pour lisibilité */
    }

    .programme-table td {
        white-space: pre-line; /* retours à la ligne dans les cellules */
    }
/* Conteneur du tableau */
    .table-responsive {
        max-width: 100%;
        overflow-x: hidden; /* pas de scroll horizontal */
    }

/* Tableau compact */
    .table-responsive table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.75rem;   /* texte plus petit pour tenir sur mobile */
        table-layout: fixed;   /* force les colonnes à se partager l'espace */
    }

/* Colonnes avec largeur automatique mais limitée */
    .table-responsive th,
    .table-responsive td {
        border: 1px solid #2c5f2d;
        padding: 3px 5px;      /* très peu de padding pour compacter */
        text-align: left;
        vertical-align: top;
        word-wrap: break-word;  /* coupe le texte trop long */
    }

/* En-têtes plus petits */
    .table-responsive th {
        background-color: #e0f2e0;
        font-weight: bold;
        font-size: 0.8rem;
    }

/* Lignes alternées */
    .table-responsive tr:nth-child(even) td {
        background-color: #f9f9f9;
    }

/* Retour à la ligne automatique dans les cellules */
    .table-responsive td {
        white-space: normal;
    }
}