.logo {

  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  height: 35mm; 
  display: flex;
  align-items: center;
text-decoration: none;  
text-align: center;
  justify-content: center;
  background: linear-gradient(
    to bottom right,
    rgba(214, 109, 117, 0.18),
    rgba(255, 160, 220, 0.18)
  );
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


body{
  background-color: #fdf5e6;


}

.page-a4 {
    width: 210mm; /* Largeur d'une page A4 */
    height: 318mm; /* Hauteur d'une page A4 */
    margin: auto;
    position: relative;
    margin-top:  200px;
    padding: 20mm;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }


/* FILIGRANE TEXTE RÉPÉTÉ */
.page-a4::before {
  content: "KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM   KOURA GYM";
  
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

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

  font-size: 48px;
  font-weight: bold;
  letter-spacing: 12px;

  color: rgba(50, 50, 50, 0.16);

  transform: rotate(-30deg);
  text-align: center;
  white-space: pre-wrap;
  line-height: 120px;

  pointer-events: none;
  z-index: 0;
}

/* CONTENU AU-DESSUS */
.page-a4 > * {
  position: relative;
  z-index: 1;
}

/* Quand JS ajoute la classe */
.page-a4.no-watermark::before {
  content: none !important;
}
  
  
  .logo {
    font-family: "Bowlby One", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #111;
}
  .titre1 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 5px;
  }
  
  footer { 
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .content {
    margin-bottom: 0px;
    margin-top: 0px;
  }
  
  h1 {
  padding: 10px;
    font-family: 'Times New Roman', sans-serif;
    font-size: 16px;
    font-weight: bold;
  }
  
  
  .categorie-style p {
      font-size: 12px;
      font-family: 'Times New Roman', serif;
      font-weight: bold;
  }
  .categorie-style {
  width: 80px;
  }
  
  
  
  
  .point-style p { 
    font-weight: bold;
    font-family: 'Times New Roman', serif;
      font-size: 8px;	
  }
  
  .point-style { 
  width: 50px;	
  }
  
  .note-style {
    font-size: 12px;
margin: 7px;
  text-align: center;
  }
  
  
  p {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    line-height: 1.2;
    font-size: 14px;
    align-items: left;
    margin: 00; /* Suppression des marges entre les p*/ 
  }
  

  .bold-underline {
    font-weight: bold;
    border-bottom: 1px solid black; /* trait */
    padding-bottom: 0.5px;           /* distance entre texte et trait */
    display: inline-block;          /* nécessaire pour que padding fonctionne */
    font-size: 14px;
  }
  


.noms-input {
  width: 565px;
  font-weight: bold;
  font-size: 14px;
  font-family: 'Times New Roman', serif;
  border: none;
  color: #000;
  margin: 0;
  margin-left: 3px;

height: 20px;          /* PLUS GRAND que line-height */
  line-height: 19px;     /* hauteur du texte */
  padding: 1px 0;        /* ESSENTIEL pour les lettres descendantes */
}
  
  .centre-field {
    width: 439px; /* Largeur du champ de texte */
height: 20px;          /* PLUS GRAND que line-height */
  line-height: 19px;     /* hauteur du texte */
  padding: 0px 0;        /* ESSENTIEL pour les lettres descendantes */
    font-size: 14px;
    font-family: 'Times New Roman', serif;
    border: none;
    color: #000;
    margin: 1px;
    margin-left: 3px; /* Réduction de l'espacement entre l'énoncé et le champ de texte */
    margin-right: 20px; /* Réduction de l'espacement entre l'énoncé et le champ de texte */
  }
  
.etablissement-field {
  width: 443px;
  font-size: 14px;
  font-family: 'Times New Roman', serif;
  border: none;
  color: #000;
  margin: 0;
  margin-left: 3px;
  margin-right: 20px;

height: 20px;          /* PLUS GRAND que line-height */
  line-height: 19px;     /* hauteur du texte */
  padding: 1px 0;        /* ESSENTIEL pour les lettres descendantes */
}
  
  .genre-field {
    text-align: left;
    width: 55px; /* Largeur du champ de texte */
    height: 20px; /* Largeur du champ de texte */

    font-size: 13px;
    font-family: 'Times New Roman', serif;
    border: none;
    background: none;
    margin: 0px;
    padding:0px;
    color: #000;
    appearance: none;
  }
  
.serie-field {
  width: 20px;
  font-weight: bold;
  font-size: 14px;
  font-family: 'Times New Roman', serif;
  border: none;
  margin: 0;
  margin-left: 3px;

height: 20px;          /* PLUS GRAND que line-height */
  line-height: 19px;     /* hauteur du texte */
  padding: 1px 0;        /* ESSENTIEL pour les lettres descendantes */
}


.noms-input,.centre-field,
.etablissement-field,
.serie-field {
  position: relative;
  top: -1px; /* ajuste : -1px, -2px, -3px */
}

  
  .contenaire {
    margin: 0px;
    display: flex;
    width: 100%;
    height:auto;
  }
  
  .contenaire2 {
    margin: 0px;
    display: flex;
    width: 100%;
    height:auto;
  }
  
  .contenaire-elements, .contenaire-elements2, .contenaire-elements3, .contenaire-elements4, .contenaire-elements5, .contenaire-elements6
  , .contenaire-elements7, .contenaire-elements8, .contenaire-elements9, .contenaire-elements10, .contenaire-elements11
  , .contenaire-elements12, .contenaire-elements13, .contenaire-elements14  {
    margin: 10px;
    width: auto;
  justify-content: center;
    height:auto;
  }
  
  
  
  .categorie-select1, .categorie-select2, .categorie-select3, .categorie-select4, .categorie-select5, .categorie-select6, .categorie-select7, .categorie-select8, .categorie-select9, .categorie-select10, .categorie-select11, .categorie-select12, .categorie-select13, .categorie-select14 {
    margin: 5px;
    display: flex;
  justify-content: center;
  text-align: center;
    width: 300px;
    height:auto;
  }
  
  
  .categorie-select1 {
    margin: 0px;
    display: flex;
  justify-content: center;
  text-align: center;
    width: 300px;
    height:auto;
  }
  
  .box1 {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    line-height: 1.2;
    font-size: 14px;
    align-items: left;
    margin:1px;
  }
  .box2 {
    margin-left: auto;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    line-height: 1.2;
    font-size: 14px;
    align-items: left;
  }
  .box3 {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    line-height: 1.2;
    font-size: 14px;
    align-items: left;
    margin:1px;
  }
  .box4 {
    margin-left: auto;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    line-height: 1.2;
    font-size: 14px;
    align-items: left;
  }


  
  .boxe1 {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    line-height: 1.2;
    font-size: 12px;
    align-items: left;
    margin:0px;
    margin-right:100px;
  }
  
  .boxe2 {
  height:70px; 
    width: 100px ;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 50px;
    font-size: 12px;
    text-align:center;
    margin:0px;
    margin-top: 10px;
    margin-right:0px;
  }
  

  
  
  .row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px; /* Réduction de l'espacement entre les lignes */
  }
  
  .row3 {
    display: flex;
    justify-content: right;
    width: 100%;
    margin-bottom: 5px; /* Réduction de l'espacement entre les lignes */
  }
  
  .row p {
    display: flex;
    align-items: center;
    width: 48%; /* Chaque champ occupe environ la moitié de la largeur */
  }
  
  .row p:last-child {
    text-align: right;
  }
  
  .row p strong {
    flex: 1;
    text-align: right  ; /* Assurer que le texte est aligné à gauche */
    margin-right: 5px; /* Petit espace avant le champ de texte */
    margin: 5px; /* Petit espace avant le champ de texte */
  }
  
  .row p input {
    flex: 2; /* Le champ de texte prend plus de place */
  }
  
  
  /* Style pour "Session 2025" */
  .session {
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 14px;
    margin: 10px;
  }
  
  /* Style pour le tableau */
  .table {
    width: 100% ;
    border-collapse: collapse;
    border: 0.7px solid #a1a1a1;
    margin-top: 0px;
  }
  
  .table2 {
    width: 100% ;
    border-collapse: collapse;
    margin-top: 0px;
  }
  
  
  .table3 {
  height:70px; 
    width: 120px ;
    border: 3px solid #000;
    border-collapse: collapse;
      margin-left: auto;
    font-size: 20px;
    font-family: 'Times New Roman', serif;
  }

  .table3 th {
    text-align: end;
    padding :20px;

    }
  
  
  .table th, .table td {
    border: 0.7px solid #a1a1a1;
    padding: 0px;
    text-align: center;
  }

  .table th{
    border: 0.7px solid #a1a1a1;
    padding: 5px;
    text-align: center;
  }
  
  .table2 td {
    border: 0.7px solid #a1a1a1;
    padding: 1px;
    text-align: center;
  }

  .table2 td p {

    font-size: 10px;

  }
  

  .table2 th{
    border: 0.7px solid #a1a1a1;
    padding: 3px;
    text-align: center;
  }
  
  .table th {
    font-weight: bold;
    font-family: 'Times New Roman', serif;
    font-size: 11px; 
  }

  #NEGA,#NEGB, #NEGC, #NEGD, #NEGE {
    font-size: 13px; 

  }
  
  .table2 th {
    font-weight: bold;
    font-family: 'Times New Roman', serif;
    font-size: 11px; 
  }
  
  .table td input {
    width: 70%;
    padding: 1px;
    font-size: 12px;
  }
  

  
  .table2 td {
    height: 00px; /* Ajuste cette valeur pour diminuer la hauteur des cellules */
    line-height: 0px; /* Assure que le texte à l'intérieur des cellules reste centré verticalement */
  }
  
  .hidden-line {
    display: none;
  }
  
  /* Classe pour cacher les lignes */
  .hidden-line {
    display: none;
  }
  /* Aucune modification de style nécessaire pour les lignes visibles, donc aucune règle ici. */
  
  .hidden-row1, .hidden-row2, .hidden-row3, .hidden-row4, .hidden-row5, .hidden-row6, .hidden-row7 {
      display: none; /* Cache les lignes */
  }
  
  
  .custom-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .custom-button:hover {
    background-color: #0056b3;
  }
  
  
  #buttonContainer {
      display: flex;
      gap: 10px; /* Espacement entre les boutons */
  }

  .buttonPDF {
    display: flex;
    justify-content: center;
    align-items: center;
}

  @media print {
@page {

    margin: 0;

}
body {

    margin-top: -100px;

}
#generatePDF, #toggleButton , #newButton, #newButton2, #newButton3, #newButton4, #newButton5, #newButton6 {
    display: none;
}

  }

  /* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');




.select-btn, .select-btn2, .select-btn3, .select-btn4, .select-btn5, .select-btn6, .select-btn7, .select-btn8, .select-btn9, .select-btn10
, .select-btn11, .select-btn12, .select-btn13, .select-btn14{
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* optionnel, pour espacer les éléments */
  padding: auto;
  cursor: pointer;
  background-color: #ffffff;
  width: auto;
  color: #ffffff;
  height: 30px;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  white-space: normal; /* Permet les retours à la ligne */
  word-break: break-word;
  text-align: center;
}
.select-btn .btn-text, .select-btn2 .btn-text2, .select-btn3 .btn-text3, .select-btn4 .btn-text4, .select-btn5 .btn-text5, .select-btn6 .btn-text6
, .select-btn7 .btn-text7, .select-btn8 .btn-text8, .select-btn9 .btn-text9, .select-btn10 .btn-text10, .select-btn11 .btn-text11
, .select-btn12 .btn-text12, .select-btn13 .btn-text13, .select-btn14 .btn-text14{
  font-size: 12px;
  font-weight: bold;
  color: #333;
}
.btn-text, .btn-text2, .btn-text3, .btn-text4, .btn-text5, .btn-text6, .btn-text7, .btn-text8, .btn-text9, .btn-text10, .btn-text11
, .btn-text12, .btn-text13, .btn-text14{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  white-space: normal; /* Permet les retours à la ligne */
  word-break: break-word;
  text-align: center;
}
.select-btn.open .arrow-dwn, .select-btn2.open .arrow-dwn, .select-btn3.open .arrow-dwn, .select-btn4.open .arrow-dwn
, .select-btn5.open .arrow-dwn, .select-btn6.open .arrow-dwn, .select-btn7.open .arrow-dwn, .select-btn8.open .arrow-dwn
, .select-btn9.open .arrow-dwn, .select-btn10.open .arrow-dwn, .select-btn11.open .arrow-dwn, .select-btn12.open .arrow-dwn
, .select-btn13.open .arrow-dwn, .select-btn14.open .arrow-dwn {
  transform: rotate(-180deg);
}
.list-items, .list-items2, .list-items3, .list-items4, .list-items5, .list-items6, .list-items7, .list-items8, .list-items9, .list-items10
, .list-items11, .list-items12, .list-items13, .list-items14 {
  position: relative;
  margin-top: 15px;
  border-radius: 8px;
  padding: 16px;
  background-color: #ffffff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  display: none;
}
.select-btn.open ~ .list-items, .select-btn2.open ~ .list-items2, .select-btn3.open ~ .list-items3, .select-btn4.open ~ .list-items4
, .select-btn5.open ~ .list-items5, .select-btn6.open ~ .list-items6, .select-btn7.open ~ .list-items7, .select-btn8.open ~ .list-items8
, .select-btn9.open ~ .list-items9, .select-btn10.open ~ .list-items10, .select-btn11.open ~ .list-items11, .select-btn12.open ~ .list-items12
, .select-btn13.open ~ .list-items13, .select-btn14.open ~ .list-items14{
  display: block;
}
.list-items .item, .list-items2 .item2, .list-items3 .item3, .list-items4 .item4, .list-items5 .item5, .list-items6 .item6, .list-items7 .item7, .list-items8 .item8, .list-items9 .item9, .list-items10 .item10, .list-items11 .item11, .list-items12 .item12, .list-items13 .item13
, .list-items14 .item14{
  display: flex;
  align-items: center;
  list-style: none;
  height: auto;
  cursor: pointer;
  transition: 0.3s;
  padding: 0 15px;
  border-radius: 8px;
}
.list-items .item:hover, .list-items2 .item2:hover, .list-items3 .item3:hover, .list-items4 .item4:hover, .list-items5 .item5:hover
, .list-items6 .item6:hover, .list-items7 .item7:hover, .list-items8 .item8:hover, .list-items9 .item9:hover, .list-items10 .item10:hover
, .list-items11 .item11:hover, .list-items12 .item12:hover, .list-items13 .item13:hover, .list-items14 .item14:hover{
  background-color: #e7edfe;
}
.item .item-text, .item2 .item-text, .item3 .item-text, .item4 .item-text, .item5 .item-text, .item6 .item-text, .item7 .item-text
, .item8 .item-text, .item9 .item-text, .item10 .item-text, .item11 .item-text, .item12 .item-text, .item13 .item-text, .item14 .item-text{
  font-size: 13px;
  font-weight: 400;
  color: #333;
}
.item .checkbox, .item2 .checkbox, .item3 .checkbox, .item4 .checkbox, .item5 .checkbox, .item6 .checkbox, .item7 .checkbox
, .item8 .checkbox, .item9 .checkbox, .item10 .checkbox, .item11 .checkbox, .item12 .checkbox, .item13 .checkbox, .item14 .checkbox{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  border-radius: 4px;
  margin-right: 12px;
  border: 1.5px solid #c0c0c0;
  transition: all 0.3s ease-in-out;

}
.item.checked .check-icon, .item2.checked .check-icon, .item3.checked .check-icon, .item4.checked .check-icon, .item5.checked .check-icon
, .item6.checked .check-icon, .item7.checked .check-icon, .item8.checked .check-icon, .item9.checked .check-icon, .item10.checked .check-icon
, .item11.checked .check-icon, .item12.checked .check-icon, .item13.checked .check-icon, .item14.checked .check-icon{
  transform: scale(1);
}
ul.list-items, ul.list-items2, ul.list-items3, ul.list-items4, ul.list-items5, ul.list-items6, ul.list-items7, ul.list-items8, ul.list-items9
, ul.list-items10, ul.list-items11, ul.list-items12, ul.list-items13, ul.list-items14 {
  line-height: 28px;
  overflow: scroll;
  height: 150px;
    
}
.item.checked .checkbox, .item2.checked .checkbox, .item3.checked .checkbox, .item4.checked .checkbox, .item5.checked .checkbox
, .item6.checked .checkbox, .item7.checked .checkbox, .item8.checked .checkbox, .item9.checked .checkbox, .item10.checked .checkbox
, .item11.checked .checkbox, .item12.checked .checkbox, .item13.checked .checkbox, .item14.checked .checkbox{
  background-color: #3cd763;
  border-color: #3cd763;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

}

/* Bouton PDF*/

.buttonPDF{margin: 20px auto;  /* centre horizontalement */
  text-align: center;}

.btn {
  margin: 50px;
  padding: 15px 40px;
  border: none;
  outline: none;
  color: #FFF;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
}
.btn::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  left: 0;
  top: 0;
  border-radius: 10px;
}
.btn::before {
  content: "";
  background: linear-gradient(
    45deg,
    #FF0000, #FF7300, #FFFB00, #48FF00,
    #00FFD5, #002BFF, #FF00C8, #FF0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height:  calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 1;
}
@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}
.btn:hover::before {
  opacity: 1;
}
.btn:active:after {
  background: transparent;
}
.btn:active {
  color: #000;
  font-weight: bold;
}


/* Bouton add*/
.btnadd {
  margin: 8px;
  padding: auto;
  border: none;
  outline: none;
  color: #FFF;
  cursor: pointer;
  font-size: 9px;
  position: relative;
  z-index: 0;
  border-radius: 1px;
}
.btnadd::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  left: 0;
  top: 0;
  border-radius: 5px;
}
.btnadd::before {
  content: "";
  background: linear-gradient(
    45deg,
    #FF0000, #FF7300, #FFFB00, #48FF00,
    #00FFD5, #002BFF, #FF00C8, #FF0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height:  calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 2px;
  opacity: 0;
}
@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}
.btnadd:hover::before {
  opacity: 1;
}
.btnadd:active:after {
  background: transparent;
}
.btnadd:active {
  color: #000;
  font-weight: bold;
}
.btnadd.green::after {
  background-color: #3cd763; /* vert */
}
.btnadd.red::after {
  background-color: #ff3c3c; /* rouge */
}






#iframeBubble {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none;
}

#iframeBubble.visible {
  pointer-events: auto;
}

.bubble-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#iframeBubble.visible .bubble-backdrop {
  opacity: 1;
}

.bubble {
  position: relative;
  width: min(95vw, 800px);
  height: min(85vh, 700px);
  background: rgba(255,255,255,0.75);
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: all 0.3s ease;
}


#iframeBubble.visible .bubble {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.bubble iframe {
  width: min(95vw, 800px);
  height: min(85vh, 700px);
  border: none;
}

.bubble-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  font-size: 22px;
  cursor: pointer;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Footer */
.footer {
  text-align: center;
  padding: 20px;
  font-size: 13px;
}



.tips {
  width: 210mm;
  margin: 200px auto;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
  display: block; /* IMPORTANT */
}



.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

.feature {
  display: flex;
  flex-direction: column; /* image au-dessus du texte */
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #ffe0e0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  margin-bottom: 20px;
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px; /* espace entre image et texte */
}

.feature-content h3 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.feature-content p {
  font-size: 16px;
  color: #555;
}

/* Desktop : garder l'image au-dessus mais 2 colonnes pour features */
@media (min-width: 768px) {

  
  .feature {
      flex-direction: column; /* toujours colonne pour image au-dessus du texte */
      text-align: center;
      align-items: center;
  }
  
}