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


 A:hover {
	COLOR: #000}
	
h1{
	color: #000;
	font-size: 32px; font-weight:normal;
	text-align: center;
}	


h2{
	color: #000;
	font-size: 28px; font-weight:normal;
	text-align: left;
}			

/* Version PC uniquement */
@media screen and (min-width: 769px) {
  a {
    margin-right: 15px; /* espace entre les liens */
  }
  a:last-child {
    margin-right: 0; /* pas d’espace après le dernier */
  }
}



	

/* Styles normaux pour l’écran */
#zone-a-imprimer {
  border: 2px dashed black;
  line-height: 1.5em;
  padding: 0px;
  background: #f9f9f9;
 
}

p {
      font-size: 1.1em;
	  line-height: 1.6;
      margin: 0.5em 0;
    }

button { font-size:24px; margin:10px;  max-width:90%;
	
	text-align: center;
}	

/* Styles spécifiques à l’impression */
@media print {
  body * {
    visibility: hidden;   /* Cache tout */
  }
  #zone-a-imprimer, #zone-a-imprimer * {
    visibility: visible;  /* Montre uniquement la zone */
  }
  #zone-a-imprimer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
	border: 0px; font-size:1.25em;
	line-height: 1.4em;
	
  }
  
  /* Empêcher qu’un paragraphe soit coupé */
  p { page-break-inside: avoid; }

  /* Classes pour gérer les sauts */
  .saut-page { page-break-before: always; }
  .apres-saut { page-break-after: always; }
}

@media (max-width: 768px) {
  .liens a {
    display: block;           /* chaque lien occupe toute la ligne */
    padding: 12px;            /* zone cliquable large et confortable */
    margin: 8px 0;            /* espace entre les liens */
    text-decoration: none;    /* plus besoin de souligné : la forme suffit */
    text-align: center;       /* centrer le texte dans le bloc */
    border: 1px solid #ccc;   /* encadré comme un bouton */
    border-radius: 8px;       /* coins arrondis */
    background: #f8f8f8;      /* léger fond pour ressembler à un bouton */
  }

  .liens a:active, 
  .liens a:hover {
    background: #e0e0e0;      /* retour visuel au clic */
  }
}






@media (max-width: 768px) {
  #liens a {
    display: block;           /* chaque lien occupe toute la ligne */
    padding: 12px;            /* zone cliquable large et confortable */
    margin: 8px 0;            /* espace entre les liens */
    text-decoration: none;    /* plus besoin de souligné : la forme suffit */
    text-align: center;       /* centrer le texte dans le bloc */
    border: 1px solid #ccc;   /* encadré comme un bouton */
    border-radius: 8px;       /* coins arrondis */
    background: #f8f8f8;      /* léger fond pour ressembler à un bouton */
  }

  #liens a:active, #liens a:hover {
    background: #e0e0e0;      /* retour visuel au clic */
  }
  



  /* Boutons */
  button,
  input[type="button"] {
    display: block;
    width: 100%;             /* occupe toute la largeur pour être facile à taper */
    padding: 14px;
    margin: 10px 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border: none;
    border-radius: 8px;
    background: #4CAF50;     /* vert moderne */
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  button:hover,
  input[type="submit"]:hover {
    background: #45a049;     /* léger foncé au survol */
  }

  button:active,
  input[type="submit"]:active {
    background: #3e8e41;     /* encore plus foncé au clic */
  }

  /* Champs de texte */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    display: block;
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
  }

  input:focus,
  textarea:focus {
    outline: none;
    border-color: #4CAF50;   /* couleur qui rappelle les boutons */
    box-shadow: 0 0 5px rgba(76,175,80,0.5);
  }



  
}