@font-face {
			font-family: 'Old-GB-Text-MT';
			src: url('fonts/OLDENGL.TTF') format('truetype');
		}

		body {
            font-family: Arial, sans-serif;
			line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
        }
		
		.nom-site {
            font-family: 'Dancing Script', cursive;
            font-size: 32px;
			font-weight: bold;
            letter-spacing: 2.5px;
			white-space: nowrap;
        }
		
		.nom-site-petite-taille {
            font-family: 'Dancing Script', cursive;		/* Lobster sous PhotoFiltre */
            font-size: 1.15em;			
			font-weight: bold;
            letter-spacing: 1.15px;
			white-space: nowrap;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 0px 10px 0px 10px; /* marges interieures au header */
            text-align: center;
            margin: 0;			
            display: flex;
			flex-direction: column; /* Arrange les éléments en colonnes */
        }
		
		.header-line-up {
			display: flex;
			justify-content: space-between;		/* pousse les éléments aux 2 extrémités */
			align-items: center;
			margin-top: -15px;
		}

		.header-line-down {
			display: flex;
			justify-content: center;	/* centre les éléments */
			align-items: center;
			margin-top: -25px;
		}
		
		.header-line-citation {
			display: flex;
			justify-content: center;	/* centre les éléments */
			align-items: center;
			margin-top: -10px;
		}
		
		.citation {
			font-size:10pt;
			font-style: italic;
			font-family:"Cambria","serif";
			color:#3498db;				/* #749ccb ou #87a9d2 */	
			line-height: 1;
		}
		
		.panier_nb_elements {
			color: white;
		}
		
		.fete-10-ans {
            font-family: 'Dancing Script', cursive;
            font-size: 16px;
			color: white;
            letter-spacing: 3px;
			white-space: nowrap;
        }
		
		.wide-hr {
            max-width: 800px; /* Limiter la largeur maximale */
            width: 100%; /* Assurer qu'il prend toute la largeur de son conteneur */
            margin: 20px auto; /* marge et centrer horizontalement */
            border: 2px solid #888; /* épaisseur */	
        }
		
        nav.header, nav.footer, nav.theme, nav.formation {
            color: #fff;
            padding: 10px;
            text-align: center;
        }
		
		nav.header {
			background-color: #444;
		}
		
		nav.header, nav.theme {
			font-size: 18px;
		}	
		
		nav.footer, nav.formation {
			font-size: 12px;
		}		
		
		nav.header ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        nav.header li {
            margin: 0 10px;
        }

        nav.header a, nav.footer a, nav.theme a, nav.formation {
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s;
        }
		
		nav.header a {
			font-size: 18px;
			color: #fff;
		}
		
		nav.theme a {
			font-size: 18px;
			color: #3498db;;
		}
		
		nav.footer a, nav.formation a {
			font-size: 12px;
			color: #fff;
		}

        nav.header a:hover, nav.footer a:hover, nav.theme a:hover, nav.formation a:hover {
            color: #ffd700;
        }

        main {
            padding: 20px;
        }
		
		ul {
			padding: 0; /* Réinitialiser le padding */
			margin: 0; /* Réinitialiser la marge */
		}

		ul > li {
			margin-left: 15px; /* Ajuster l'indentation selon vos besoins */
		}

		section.principale {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #00668C; 
			color: #fff;
			text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
		
		section.secondaire {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
		
		section.commandes {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #EDE9DD;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }		
		
		section.invisible {
            max-width: 800px;
            margin: 20px auto;
            padding: 0px;
        }
		
		section.articles {
            max-width: 800px;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
		
		.block-article {
            box-sizing: border-box;
            width: 100%;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			position: relative; /* Position relative pour les boutons absolus collés en bas */
        }
		
        .block-article img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .block-article-content {
            width: 100%;
        }

        .block-article-title {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .block-article-text {
            font-size: 1em;
            color: #555;
        }
		
		.temoignage {
			margin-bottom: 10px;
			padding: 5px;
			background-color: #f2f2f2;
			border-radius: 5px;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
		}

		.temoignage .contenu {
			margin: 0px;
			padding: 0px;			
			font-size: 16px;
			line-height: 1.4;
			color: #333;
		}

		.temoignage .auteur {
			margin: 0px;
			padding: 0px;
			font-style: italic;
			color: #777;
		}

		.temoignage:hover {
			background-color: #fff;
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
			transition: background-color 0.3s, box-shadow 0.3s;
		}
		
		h1.nom-site {
            color: #fff;		
		}
		
        h1.normal, h2, h3 {
            color: #3498db;
			line-height: 1;
        }
		
		.vedette {
			color: #3498db;
			font-weight: bold;
		}
		
		.container_gauche_droite {		/* Utilisation : <div class="container_gauche_droite"><div>À gauche</div><div>À droite</div></div> */
			display: flex;
            justify-content: space-between;
			align-items: center;
		}
				
        .responsive-image {
            height: auto; /* Maintenir les proportions de l'image */
            display: block; /* Supprime l'espace sous l'image dû à l'affichage en ligne */
            border-radius: 8px;				
            margin: 0 auto; /* Centrer l'image horizontalement */
        }		
		
		.centrer-horizontalement {
            text-align: center;
        }
		
		.centrer-horizontalement-coller-au-bas {
			position: absolute;
            bottom: 5px; /* Distance du bas du bloc */
            left: 0;
            right: 0;
			text-align: center;
        }
		
		.niveaux {
			color: #00587a;
            text-decoration: none;
            font-weight: bold;
        }
		
		.no-commande {
			color: #000;
            font-weight: bold;
			font-size: 14px;
			margin-top: 10px;
			line-height: 1.2;
		}
		
		.prix {
			color: #000;
            text-decoration: none;
            font-weight: bold;
			font-size: 18px;
        }
		
        .promotion-container {
            display: flex;
            align-items: center; /* Aligner verticalement les éléments */
            justify-content: center; /* Aligner horizontalement les éléments */
        }		
		
		.promotion {
            position: relative;
			overflow: hidden; /* Masquer la partie dépassant du conteneur */
            margin-right: 10px; /* Espacement entre le texte barré et l'image */
        }

		.trait-diagonal {
            content: "";
            position: absolute;
            top: 50%;
            left: -50%; /* Déplacer de 50% vers la gauche pour centrer sur le texte */
            right: -50%; /* Déplacer de 50% vers la droite pour centrer sur le texte */
            height: 2px;
            background-color: #CD3B3E;	/* red */
            transform: rotate(-20deg); /* Incliner le trait de 45 degrés */
        }

        .prix-barre, .promo-image {
            display: inline-block;
            height: 100%; /* Hauteur égale pour le texte barré et l'image */
            vertical-align: middle; /* Ajuster la position verticale */
        }

        .cta-button {
            display: inline-block;
            padding: 5px 10px;
            background-color: #3498db;
            color: #fff;
			text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
		
        .cta-button:hover {
            background-color: #2980b9;
        }
		
		input[type="text"], input[type="password"] {
            height: 30px; /* Spécifie la hauter des boites de saisie des formulaires */
			margin-bottom: 10px; /* Espacement entre les boites */
        }
		
		.mess_bad_cnx {
			text-decoration: underline;
			color: #FF0000;
		}
		
		.ctb-button {
            display: inline-block;
            padding: 10px 25px;
			font-size: 16px;
            text-align: center;
            text-decoration: none;
            border-radius: 50px; /* Augmentez le rayon pour rendre les coins plus arrondis */
            transition: background-color 0.3s ease;
            outline: none;
        }
		
        .green-button {
            background-color: #6abf69; /* Vert doux */
            color: #fff;
        }

        .orange-button {
            background-color: #ffaf5a; /* Orange doux */
            color: #fff;
        }

        .grey-button {
            background-color: #b4b4b4; /* Gris doux */
            color: #fff;
        }
		
		.payment-info {
            display: none;
        }
		
		.uploads {
			display: inline-block; /* Ajuste la largeur au contenu */
			margin-bottom: 10px;
			padding: 5px;
			border: 2px solid black;
			background-color: #add8e6;
			border-radius: 5px;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
		}
		
		.text-button {
			background: none;
			border: none;
			color: black;
			cursor: pointer;
		}

		.text-button:hover {
			text-decoration: none;
		}
		
		.image-centree {
	        width: 100%; /* La largeur de l'image prendra 100% de la largeur de son conteneur */
            height: auto; /* La hauteur s'ajustera proportionnellement à la largeur pour maintenir les proportions originales */
			margin: 0 auto; /* Pour centrer horizontalement l'image */
            margin-top: 10px; /* Ajoute un décalage par rapport au haut */
            margin-bottom: 10px; /* Ajoute un décalage par rapport au bas */
            display: block; /* Assure que l'image est traitée comme un bloc pour utiliser les marges automatiques */
        }
		
		a {
            color: #00587a;
            text-decoration: none;
            font-weight: bold;
        }
		
		a.bleu-moyen {
			color: #3498db;
            text-decoration: none;
            font-weight: bold;
        }

        a:hover {
            text-decoration: underline;
        }
		
		.lien-sans-style {
		  color: inherit; /* Couleur de texte héritée */
		  text-decoration: inherit; /* Décoration de texte héritée */
		  font-weight: normal; /* Ne pas mettre en gras */
		}		
		
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
		
		.menu-formation-chapitre {
            display: block;
            background-color: #333;
            color: #fff;
            padding: 10px;
            cursor: pointer;
        }
		
		div.half-line {
			font-size: 5px;
			line-height: 0.5;
		}
		
		nav.form-chapitre {
            display: none;
            width: 100%;
            color: #fff;			
            background-color: #444;
            left: 0;			
        }

        nav.form-chapitre.active {
            display: block;
        }

        nav.form-chapitre.active ul {
            flex-direction: column;
			list-style: none;
			padding: 0;
			margin: 0;
			line-height: 1.2;
        }
		
		.form-chapitre.active ul ul, .form-chapitre.active ul ul ul, .form-chapitre.active ul ul ul ul {
			margin-left: 25px;		/* décalage identique pour chaque niveau de ul dans le menu chapitres */
		}
				
		.form-chapitre.active form input[type="submit"] {
			background: none;
			border: none;
			color: white;
			cursor: pointer;
			white-space: pre-wrap;
			text-align: left;
		}
		
		button.submit_nav_part {
			background-color: #f0f0f0;
			color: #333;
			border: 1px solid #ccc;
			padding: 6px 10px; /* Réduire le padding pour rendre le bouton un peu moins gros */
			border-radius: 5px;
			font-size: 13px;
			cursor: pointer;
			transition: background-color 0.3s, color 0.3s;
			box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5); /* Ajouter une ombre */
		}

		button.submit_nav_part:hover {
			background-color: #ddd;
			color: #555;
		}
		
		#btnScrollToTop {
			display: block;
			position: fixed;
			bottom: 20px;
			right: 20px;
			width: 40px;
			height: 40px;
			border: none;
			border-radius: 50%;
			background-color: #007bff; /* Couleur de fond du bouton */
			color: #fff; /* Couleur du texte */
			font-size: 24px; /* Taille de la police */
			cursor: pointer;
		}

		#btnScrollToTop:hover {
			background-color: #0056b3; /* Couleur de fond du bouton au survol */
		}

				
		h1.formation {
			font-size:15pt;
			font-weight: bold;
			font-family:"Cambria","serif";
			color:#000;
        }
		
		h2.formation {
			font-size:13pt;
			font-family:"Cambria","serif";
			color:#4F81BD;	/* #3498db ou #00587a ou #4F81BD*/
		}

		h3.formation {
			font-size:11pt;
			font-style: italic;
			font-family:"Cambria","serif";
			color:#3498db;				/* #749ccb ou #87a9d2 */	
		}
		
		p.MsoNormal, p.Textbody {
			font-size:12pt;
			font-family::"Calibri","sans-serif";			
			margin: 0;
		}
		
		p.MsoQuote {
			font-family: Georgia, serif;
			font-style: italic;
			font-size: 0.9em;
			line-height: 1.5;
			padding: 10px;
			border-left: 3px solid #007bff; /* Couleur de la barre verticale */
		}
		
		.custom-dot {		/* pour simuler des bullets points pour les listes */
			display: inline-block;
			width: 7px;
			height: 7px;
			background-color: black;
			border-radius: 50%;
		}
		
		.private_link {
			color:#3498db;
		}
		
		
		/* Styles spécifiques aux écrans inférieurs à 600 pixels de large */				
        @media only screen and (max-width: 600px) {
            nav.header {
                display: none;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: #444;
                text-align: center;
            }

            nav.header.active {
                display: block;
            }

            nav.header ul {
                flex-direction: column;
            }

            nav.header li {
                margin: 10px 0;
            }

            /* Styles du bouton de menu (affiché sur les petits écrans) */
            .menu-button {
                display: block;
                background-color: #333;
                color: #fff;
                text-align: center;
                padding: 10px;
                cursor: pointer;
            }

			.responsive-image {
				max-width: 80%; /* L'image ne dépasse pas 80% du bloc */
			}				
        }
		
		/* Styles spécifiques aux écrans entre 600 et 900 pixels de large */
        @media only screen and (min-width: 601px) and (max-width: 900px) {
            .menu-button {
                display: none; /* Masquer le bouton de menu sur les grands écrans */
            }
			
			.block-article {
                width: calc(50% - 20px);  /* pour faire 2 colonnes */
            }
			
			.responsive-image {
				max-width: 50%; /* L'image ne dépasse pas 50% du bloc */
			}
        }
		
		/* Styles spécifiques aux écrans de plus de 900 pixels de large */
        @media only screen and (min-width: 901px) {
            .menu-button {
                display: none; /* Masquer le bouton de menu sur les grands écrans */
            }
			
			.block-article {
				width: calc(33.33% - 20px); /* pour faire 3 colonnes */
            }
			
			.responsive-image {
				max-width: 40%; /* L'image ne dépasse pas 40% du bloc */
			}			
        }