/* avf10.css */

.rectanglem {
    width: 3cm;
    height: 2cm;
    background-color: #5496DE;
}

.tableor {
    width: 69%;
    border-collapse: collapse;
    border: 1px solid white;
}

.tablebl {
    width: 69%;
    border-collapse: collapse;
    border: 1px solid white;
}

.thbl {
    background-color: #5496DE; /* bleu */ 
	 /* #FFAB36; orange */
    color: black;
    padding: 8px; 
	text-align: left;
	font-size: 22px; /* ancien 20px */
}

.thor {
    background-color:  #FFAB36; /* orange */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 10px; 
	text-align: left;
	font-size: 20px;
}

.th5or {
    background-color:  #FFAB36; /* orange */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
}

.tdor {
    padding: 10px;
    border: 1px solid white;
}

.thro {
    background-color: #FFAB36; /* orange */ 
	 /* #5496DE; /* bleu */ 
    color: black;
    padding: 10px; 
	text-align: left;
	font-size: 20px;
}

.tdor14 {
    padding: 10px;
    border: 1px solid white;
	font-size: 14px;
}

.tdor16 {
    padding: 10px;
    border: 1px solid white;
	font-size: 16px;
}

/* devrait être tdorb18 */
.tdor18 {
    padding: 10px;
    border: 1px solid white;
	font-size: 18px;
	font-weight: bold
}

/* Style tablegr21 ===================================================================== */
.tablegr21 {  /* mettre en gris */
            width: 100%; /* Le tableau prend toute la largeur disponible */
            max-width: 21cm; /* Largeur maximale de 21 cm */
            /* width: 21cm;  Largeur du tableau */
            /* height: 2mm;  Hauteur du tableau */
            background-color: #D3D3D3; /* Couleur de fond gris */
            border: 1px solid #D3D3D3; /* Bordure gris */
            border-collapse: collapse; /* Fusionner les bordures */
}

.tablegr21 td {
            padding: 0; /* Pas d'espaces intérieurs pour respecter les dimensions exactes */
}
		
.th21gr {
    background-color:  #D3D3D3; /* gris */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
	font-family: Rubik, sans-serif; /* Police Rubik */
}
		
/* Style tableor21 ==================================================================== */
.tableor21 {
             width: 100%; /* Le tableau prend toute la largeur disponible */
           max-width: 21cm; /* Largeur maximale de 21 cm */
            /* width: 21cm;  Largeur du tableau */
            height: 2mm; /* Hauteur du tableau */
            background-color: #FFAB36; /* Couleur de fond orange */
            border: 1px solid #FFAB36; /* Bordure orange */
            border-collapse: collapse; /* Fusionner les bordures */
}

.tableor21 td {
            padding: 0; /* Pas d'espaces intérieurs pour respecter les dimensions exactes */
}
		
.th21or {
    background-color:  #FFAB36; /* orange */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
}
		
/* Style tablebla21 ================================================================= */
.tablebla21 {
            width: 100%; /* Le tableau prend toute la largeur disponible */
            max-width: 21cm; /* Largeur maximale de 21 cm */
            /* max-width: 21cm;  Largeur maximale de 21 cm */
            /* width: 21cm; Largeur du tableau */
            /*height: 6cm;  Hauteur du tableau */
            background-color: white; /* Couleur de fond orange */
            border: 1px solid white; /* Bordure orange */
            border-collapse: collapse; /* Fusionner les bordures */
}

.tablebla21 td {
            padding: 0; /* Pas d'espaces intérieurs pour respecter les dimensions exactes */
}
		
.tablebla21 img {
            width: 100%; /* L'image occupe toute la largeur du tableau */
            height: auto; /* 100% L'image occupe toute la hauteur du tableau */
            object-fit: cover; /* L'image couvre l'ensemble du tableau, en gardant ses proportions */
}

.th21bla {
    background-color:  white; /* orange */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
	font-family: Rubik, sans-serif; /* Police Rubik */
}
		
/* Style tableble21 ================================================================= */
.tableble21 {
            width: 100%; /* Le tableau prend toute la largeur disponible */
            max-width: 21cm; /* Largeur maximale de 21 cm */
            /* max-width: 21cm;  Largeur maximale de 21 cm */
            /* width: 21cm; Largeur du tableau */
            /*width: 21cm;  Largeur du tableau */
            /*height: 6cm;  Hauteur du tableau */
            background-color: #5496DE; /* Couleur de fond orange */
            border: 1px solid #5496DE; /* Bordure orange */
            border-collapse: collapse; /* Fusionner les bordures */
}

.tableble21 td {
            padding: 0; /* Pas d'espaces intérieurs pour respecter les dimensions exactes */
}
		
.tableble21 img {
            width: 100%; /* L'image occupe toute la largeur du tableau */
            height: 100%; /* L'image occupe toute la hauteur du tableau */
            object-fit: cover; /* L'image couvre l'ensemble du tableau, en gardant ses proportions */
}

.th21ble {
    background-color:  #5496DE; /* bleu */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
	font-family: Rubik, sans-serif; /* Police Rubik */
}

/* Style tablegr30 =================================================================== */
.tablegr30 {
            width: 100%; /* Le tableau prend toute la largeur disponible */
            max-width: 30cm; /* Largeur maximale de 21 cm */
            /* width: 21cm;  Largeur du tableau */
            /* height: 2mm;  Hauteur du tableau */
            background-color: #D3D3D3; /* Couleur de fond orange */
            border: 1px solid #D3D3D3; /* Bordure orange */
            border-collapse: collapse; /* Fusionner les bordures */
}

.tablegr30 td {
            padding: 0; /* Pas d'espaces intérieurs pour respecter les dimensions exactes */
}
		
.th30gr {
    background-color:  #D3D3D3; /* gris - old orange */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
    font-weight: normal;
	font-family: Rubik, sans-serif; /* Police Rubik */
}
		
/* Style tableor30 ==================================================================== */
.tableor30 {
            width: 100%; /* Le tableau prend toute la largeur disponible */
           max-width: 30cm; /* Largeur maximale de 21 cm */
            /* width: 21cm;  Largeur du tableau */
            height: 2mm; /* Hauteur du tableau */
            background-color: #FFAB36; /* Couleur de fond orange */
            border: 1px solid #FFAB36; /* Bordure orange */
            border-collapse: collapse; /* Fusionner les bordures */
}

.tableor30 td {
            padding: 0; /* Pas d'espaces intérieurs pour respecter les dimensions exactes */
}
		
.th30or {
    background-color:  #FFAB36; /* orange */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
	font-family: Rubik, sans-serif; /* Police Rubik */
}
		
/* Style tablebla30 ================================================================= */
.tablebla30 {
            width: 100%; /* Le tableau prend toute la largeur disponible */
            max-width: 30cm; /* Largeur maximale de 30 cm */
            /* width: 21cm; Largeur du tableau */
            /*height: 6cm;  Hauteur du tableau */
            background-color: white; /* Couleur de fond orange */
            border: 1px solid white; /* Bordure orange */
            border-collapse: collapse; /* Fusionner les bordures */
}

.tablebla30 td {
            padding: 0; /* Pas d'espaces intérieurs pour respecter les dimensions exactes */
}
		
.tablebla30 img {
            width: 100%; /* L'image occupe toute la largeur du tableau */
            height: auto ; /* 100% L'image occupe toute la hauteur du tableau */
            object-fit: cover; /* L'image couvre l'ensemble du tableau, en gardant ses proportions */
}

.th30bla {
    background-color:  white; /* orange */
	 /*  #5496DE; /* bleu */
    color: black;
    padding: 5px; 
	text-align: left;
	font-size: 24px;
	font-family: Rubik, sans-serif; /* Police Rubik */
}
		
/* Style The Dropdown Button ============================================================= */
.dropbtn {
  /* background-color: #4CAF50; Vert 
  background-color:  #0a2a92; Bleu Foncé */
  background-color:  #5496de;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #5496de; /*  #FFAB36;*/
  min-width: 160px;
  /* box-shadow: 0px 8px 16px 0px rgba(10,42,146,0.2);  #0a2a92 */
  box-shadow: 0px 8px 16px 0px #0a2a92;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  /* color: black; */
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #FFAB36; }
/* Rouge corail : R 255 , V 102 , B 102 ou #FF6666 
   Bleu de France : R 84 , V 150 , B 222 ou #5496DE 
   Jaune aurore : R 255 , V 171 , B 54 ou #FFAB36 */

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #FFAB36; /* Jaune aurore; */
  /* background-color: #0a2a92; Bleu #3e8e41; Vert */
}
/* Menus d'inscription */
        .container {
            display: flex;
            flex-wrap: wrap; /* Permettre le retour à la ligne pour les rectangles */
            gap: 20px; /* Espacement entre les rectangles */
        }
        .rectangle {
            width: 130px; /* Ajustez la largeur selon vos besoins */
            height: 70px; /* Ajustez la hauteur selon vos besoins */
            background-color: #ffab36;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black; /* Bordure du rectangle */
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Optionnel: pour un léger effet d'ombre */
            margin-bottom: 20px; /* Espacement en bas pour chaque rectangle */
        }
        .rectangle a {
            color: white; /* Couleur du texte du lien */
            font-size: 20px; /* Taille du texte */
            text-decoration: none; /* Supprimer la décoration par défaut des liens */
            text-align: center; /* Centrer le texte */
        }
        .rectangle a:hover {
            text-decoration: underline; /* Ajouter une décoration au survol du lien */
        }

        /* Table avec bordure externe orange et sans bordure interne
           2 lignes 1 colonne */
        .table-bordered {
            max-width: 22cm;
			width : 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 20px 0;
            border: 2px solid orange; /* Bordure externe */
        }
 /*       .table-bordered th, .table-bordered td {
            padding: 10px;
            text-align: left;
            border: none; /* Pas de bordure interne */
        } */
        .table-bordered th, .table-bordered td {
            padding: 10px;
            text-align: left;
            border: none; /* Pas de bordure interne */
        }
        .table-bordered th {
            background-color: #f2f2f2;
            color: red; /* Couleur du texte en rouge */
            font-size: 24px; /* Taille de la police de 5 */
        }
        .table-bordered td {
            color: black; /* Couleur du texte en noir */
            font-size: 16px; /* Taille de la police de 3 14px */
        }
		
        /* Table sans bordure visible */
        .table-no-border {
            width: 50%;
            margin: 20px auto;
            border-collapse: collapse;
        }
        .table-no-border th, .table-no-border td {
            padding: 10px;
            text-align: center;
            border: none; /* Pas de bordure */
        }
        .table-no-border th {
            background-color: #f2f2f2;
        }
 

body {
	  font-family: Rubik, Arial, Helvetica, sans-serif;
	  font-size : 16px;
}

.p1 {
  font-family: Rubik, Arial, Helvetica, sans-serif;
}
.p2 {
  font-family: "Lucida Console", "Courier New", monospace;
}
.p3 {
  font-family: "Times New Roman", Times, serif;
}
.bgg {
background-color: #696969;
}
.te-b {
   color: #5496DE;
}
.te-o {
   color: #FFAB36;
}
.te-r {
   color: #FF6666;
}
.te-b-g {
   color: #5496DE;
   font-weight: bold;
}
.te-o-g {
   color: #FFAB36;
   font-weight: bold;
}
.te-r-g {
   color: #FF6666;
   font-weight: bold;
}
/* Rouge corail : R 255 , V 102 , B 102 ou #FF6666 
   Bleu de France : R 84 , V 150 , B 222 ou #5496DE 
   Jaune aurore : R 255 , V 171 , B 54 ou #FFAB36 */
/* CSS de base pour une image responsive */
/* .image-container {
    width: 100%;
    max-width: 800px; /* La largeur maximale de l'image, ajustable * /
    margin: 0 auto;   /* Centrer l'image horizontalement * /
}

img {
    width: 100%;  /* L'image prend toute la largeur de son conteneur * /
    height: auto; /* La hauteur s'ajuste automatiquement pour garder les proportions * /
    display: block; /* Évite les espaces en bas de l'image * /
}
*/

/* Boutons ====================================== */

       .btn {
            display: inline-block;
            text-align: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            border-radius: 12px;
            transition: background-color 0.3s ease;
            line-height: 0.8cm; /* Hauteur fixe de 1cm */
            box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur et la hauteur */
			font-weight : bold;
        }

        .btn-custom {
            background-color: #5496DE;
            width: 3cm; /* Largeur de 5cm */
        }

.btn-custom10 {
            background-color: #5496DE;
            width: 10cm; /* Largeur de 5cm */
        }

        .btn-custom:hover {
            background-color: #E59800; /* Couleur légèrement plus foncée pour le survol */
        }

        .btn-blue {
            background-color: blue;
            color: white;
            width: 10cm;
            height: 1cm;
            line-height: 1cm;
        }

        .btn-blue:hover {
            background-color: darkblue;
        }