@charset "utf-8";

/*	=============================================================================
	ROOT
	========================================================================== */

	:root {
		--primary-color:        #075c9c !important;
		--fs-color-primary:     #075c9c !important;
		--fs-color-secondary:   #b8a16c !important;
		--fs-color-third:       #ff8800 !important;
		--fs-color-fourth:      #5b4f26 !important;
		--fs-color-fifth:       #808000 !important;

		--white-color:          #ffffff;
		--light-grey-color:     #cccccc;
		--dark-grey-color:      #4a4a4a;
		--black-color:          #000000;

		--fs-color-success:                 var(--fs-color-third)  !important;
		--fs-color-alert:                   var(--fs-color-fourth) !important;
		--fs-experimental-link-color:       var(--fs-color-fourth) !important;
		--fs-experimental-link-color-hover: var(--fs-color-third)  !important;
		--fs-color-base:                    var(--dark-grey-color) !important;
		--tooltip-color:                    var(--white-color)     !important;
		--tooltip-bg-color:                 var(--fs-color-fourth) !important;

		/*
		OTHER FLATSOME THEME CSS VARS

		--divider-top-width
		--divider-width
		--flatsome--header--sticky-height
		--flatsome-scroll-padding-top--drawer-width
		--stack-gap
		--stagger-delay
		--stagger-duration
		--stagger-easing
		--stagger-from-clip-path
		--stagger-from-opacity
		--stagger-from-scale
		--stagger-from-translate-x
		--stagger-from-translate-y
		--stagger-init-delay
		--stagger-to-clip-path
		--stagger-to-opacity
		--stagger-to-scale
		--stagger-to-translate-x
		--stagger-to-translate-y
		--wp-admin--admin-bar--height
		*/

		/* event status */
		--status-canceled-color: var(--white-color);
		--status-canceled-fill: var(--fs-color-primary);
		--status-moved-online-color: var(--white-color);
		--status-moved-online-fill: var(--fs-color-primary);
		--status-postponed-color: var(--white-color);
		--status-postponed-fill: var(--fs-color-primary);
		--status-rescheduled-color: var(--white-color);
		--status-rescheduled-fill: var(--fs-color-primary);
		--status-scheduled-color: var(--white-color);
		--status-scheduled-fill: var(--fs-color-primary);
	}



	/* --- COLORS CLASSES --- */

		.primary-color      { color: var(--fs-color-primary)   !important; }
		.secondary-color    { color: var(--secondary-color) !important; }
		.third-color        { color: var(--third-color)     !important; }
		.fourth-color       { color: var(--fourth-color)    !important; }
		.fifth-color        { color: var(--fifth-color)     !important; }
		.black-color        { color: var(--black-color)     !important; }
		.white-color        { color: var(--white-color)     !important; }

		.primary-fill       { background-color: var(--fs-color-primary)    !important; }
		.secondary-fill     { background-color: var(--secondary-color)  !important; }
		.third-fill         { background-color: var(--third-color)      !important; }
		.fourth-fill        { background-color: var(--fourth-color)     !important; }
		.fifth-fill         { background-color: var(--fifth-color)      !important; }
		.black-fill         { background-color: var(--black-color)      !important; }
		.white-fill         { background-color: var(--white-color)      !important; }


/*	=============================================================================
	SELECTION
	========================================================================== */

	::-moz-selection {
		background-color: var(--fs-color-primary);
		color: var(--white-color);
	}

	::selection {
		background-color: var(--fs-color-primary);
		color: var(--white-color);
	}

	.no-select {
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}


/*	=============================================================================
	SPECIAL
	========================================================================== */

	.display-media-query {
		color: var(--white-color);
		background-color: var(--fs-color-primary);
		padding: 20px;
		display: none;
	}

	p:blank {
		display: none; /* Cache les paragraphes qui n'ont que des espaces */
	}

	#wpadminbar {
		background-color: var(--fs-color-fifth) ;
	}

/*	=============================================================================
	BODY
	========================================================================== */

	/*
	html, body {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	*/

	body, input, textarea, select {
		font-family: 'HMPNW', sans-serif;
		font-weight: 400;
	}


/*	=============================================================================
	TITLE : H1 to H6
	========================================================================== */

	h1,
	h1.entry-title,
	h1.section-title.section-title-normal,
	h2,
	h1.entry-title,
	h2.section-title.section-title-normal,
	h3,
	h3.entry-title,
	h3.section-title.section-title-normal {
		text-transform: uppercase;
		font-weight: 600 !important;
	}

	h1,
	h1.entry-title,
	h1.section-title.section-title-normal {
		color: var(--fs-color-primary);
		text-transform: uppercase;
		font-weight: 600 !important;
	}

	h2,
	h2.entry-title,
	h2.section-title.section-title-normal {
		color: var(--fs-color-secondary);
		text-transform: uppercase;
		font-weight: 600 !important;
	}

	h3,
	h3.entry-title,
	h3.section-title.section-title-normal {
		color: var(--fs-color-fourth);
		text-transform: uppercase;
		font-weight: 600 !important;
	}

	h4,
	h4.entry-title,
	h4.section-title.section-title-normal {
		color: var(--fs-color-fourth);
		text-transform: none;
		font-weight: 500 !important;
	}

	h5,
	h5.entry-title,
	h5.section-title.section-title-normal {
		text-transform: none;
		font-weight: 600 !important;
		color: var(--fs-color-third) !important;
	}

	.dark h1,
	.dark h1.section-title.section-title-normal,
	.dark h2,
	.dark h2.section-title.section-title-normal,
	.dark h3,
	.dark h3.section-title.section-title-normal,
	.dark h4,
	.dark h4.section-title.section-title-normal,
	.dark h5,
	.dark h5.section-title.section-title-normal {
		color: var(--white-color);
	}


/*	=============================================================================
	TYPO
	========================================================================== */

	b, strong {
		font-weight: 600 !important;
	}


/*	=============================================================================
	BUTTON
	========================================================================== */

	.button.secondary.is-smaller {
		background-image: url('/wp-content/uploads/2026/02/courbe-de-niveau-003.svg');
		background-size: auto;
		background-position: 32% 39%;
	}


/*	=============================================================================
	TOOLTIPS + SCROLL-TO-BULLETS
	========================================================================== */

	.scroll-to-bullets a {
		background-color: var(--fs-color-secondary);
	}

	.scroll-to-bullets a.active {
		border-color: var(--fs-color-secondary);
	}

	.scroll-to-bullets a.active,
	.scroll-to-bullets a:hover {
		background-color: var(--fs-color-fourth);
		opacity: 1;
	}


/*	=============================================================================
	LINK : A "_blank" WITH ICON
	========================================================================== */

	div.text a {
		text-decoration: underline !important;
		color: var(--fs-color-primary) !important;
		font-weight: 600;
	}

	a[target="_blank"]:not(.button):not(.wp-block-button__link):not(.link-umap):not(:has(img)) {
		color: var(--fs-color-primary);
		font-weight: 600;
	}

	a[target="_blank"]:not(.button):not(.wp-block-button__link):not(.link-umap):not(:has(img))::after {
		color: var(--fs-color-primary);
		content: "\2197";
		margin-left: 5px;
		display: inline-block;
		font-size: 0.8em;
		vertical-align: super;
		text-decoration: none;
	}

	a[target="_blank"]:not(.button):not(.wp-block-button__link):not(.link-umap):not(:has(img)):hover {
		color: var(--fs-color-fourth);
	}

	a.underline {
		text-decoration: underline !important;
		color: var(--fs-color-primary) !important;
	}


/*	=============================================================================
	IMG
	========================================================================== */

	.img-inner img {
		border-radius: 15px;
		border: 4px solid color: var(--fs-color-secondary);
	}

	.box-image {
		border-radius: 15px;
	}

	img.img-email {
		height: 1.40em;
		width: auto;
		padding-bottom: 5px;
		padding-left: 4px;
	}


/*	=============================================================================
	LIST
	========================================================================== */

	ul {
		margin-top: 0;
		list-style: disc;
		list-style-position: inside;
	}

	ul li {
	}

	li {
		margin-bottom: 0.4em;
	}

	li::marker {
		color: var(--fs-color-secondary);
	}

	.col-inner ul li {
		margin-left: 0em;
	}


/*	=============================================================================
	PADDING & MARGIN ZERO
	========================================================================== */

	.no-padding {
		padding: 0 !important;
	}

	.no-padding-top-bottom {
		padding-top:    0 !important;
		padding-bottom: 0 !important;
	}

	.no-margin {
		margin: 0 !important;
	}

	.no-margin-top-bottom {
		margin-top:    0 !important;
		margin-bottom: 0 !important;
	}

	.no-padding-no-margin {
		padding: 0 !important;
		margin:  0 !important;
	}


/*	=============================================================================
	SLIDER
	========================================================================== */

	.slider-nav-circle .flickity-prev-next-button:hover svg {
		fill: #fff !important;
		background-color: var(--fs-color-secondary);
		border-color: var(--fs-color-secondary);
	}


/*	=============================================================================
	SECTION
	========================================================================== */

	.section {
		padding-top: 100px !important;
		padding-bottom: 80px !important;
	}

	.section-encart {
		padding-top: 20px !important;
		padding-bottom: 40px !important;
	}

	.section.section-footer {
		padding-top: 40px !important;
		padding-bottom: 0 !important;
	}


	.section.no-padding,
	.section.section-no-padding {
		padding: 0 !important;
	}

	.section.no-padding-top,
	.section.section-no-padding-top {
		padding-top: 0 !important;
	}

	.section.no-padding-bottom,
	.section.section-no-padding-bottom {
		padding-bottom: 0 !important;
	}

	.section.no-padding-top-bottom
	.section.section-no-padding-top-bottom {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.section.no-margin,
	.section.section-no-margin {
		margin: 0 !important;
	}

	.section.no-margin-top,
	.section.section-no-margin-top {
		margin-top: 0 !important;
	}

	.section.no-margin-bottom,
	.section.section-no-margin-bottom {
		margin-bottom: 0 !important;
	}

	.section.no-margin-top-bottom,
	.section.section-no-margin-top-bottom {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.section-title-container {
		margin-bottom: 0;
	}


/*	=============================================================================
	SECTION SLIDER SLACK
	========================================================================== */

	.section-slider-slack {
		background-color: var(--fs-color-secondary);
		padding: 0 !important;
	}

	/*
	.slider-slack .row-collapse > .col {
		padding: 0 !important;
	}

	.slider-slack .row > .col > .col-inner {
		padding: 0 !important;
		margin: 0 !important;
	}
	*/

	.slider-slack .stack.stack-row .row {
		display: flex;
	}

	/*
		DISABLED
		On force le mode flex
		Alignement horizontal
		Toutes les colonnes prennent la même hauteur
		Ajustez selon l'espace voulu entre les images
	*/
	/*
	.slider-slack .stack.stack-row {
		display: flex !important;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		overflow: hidden;
	}
	*/
	/*
		DISABLED
		Style de base des lignes (.row)
		Chaque div prend 1 part égale de l'espace
		Animation fluide
		On enlève les marges par défaut de la grille
		On laisse le flex gérer la largeur
	 */
	 /*
	.slider-slack .stack.stack-row .row {
		flex: 1;
		transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		width: auto !important;
	}
	*/
	/*
		DISABLED
		Quand on survole le parent (.stack), on réduit légèrement l'opacité de tout le monde
		flex: 0.6 => Les autres rétrécissent
	*/
	/*
	.slider-slack .stack.stack-row:hover .row {
		flex: 0.6;
		opacity: 0.8;
	}
	*/
	/*
		DISABLED
		Sauf la ligne précisément survolée qui s'agrandit
		Elle prend 2.5 fois plus de place
	*/
	/*
	.slider-slack .stack.stack-row .row:hover {
		flex: 2.5;
		opacity: 1;
		z-index: 10;
	}
	*/

	.slider-slack .stack.stack-row .row:nth-child(2) {
		display: flex;
	}

	.slider-slack .stack.stack-row .row:nth-child(3) {
		display: flex;
	}

	.slider-slack .banner {
		/* padding-top: 500px !important; */
		background-color: var(--fs-color-secondary);
	}



/*	=============================================================================
	COL
	========================================================================== */

	/*
	div.col.post-item {
		padding-top: 0;
		padding-bottom: 0;
	}

	div.col.col-without-padding-bottom {
		padding-bottom: 0;
	}

	.blog .col.post-item {

	}
	*/



/*	=============================================================================
	ENCART
	========================================================================== */

	.encart {
	}

	.encart .encart-container {
		margin: 0;
		padding: 0;
		/* border-radius: 20px 20px; */
		/* border: 1px solid black; */
	}

	.encart .encart-title {
		margin: 0;
		margin-bottom: -15px;
		padding: 0;
	}

	.encart .encart-title h3 {
		margin-top: 0;
		margin-bottom: 0;
		padding: 0 15px;
		color: var(--fs-color-secondary) !important;
		background-color: var(--white-color);

		border-top:    5px solid var(--white-color);
		border-bottom: 5px solid var(--white-color);
		border-left:  15px solid var(--white-color);
		border-right: 15px solid var(--white-color);

		border-radius: 15px 15px 0 0;

		display: inline;
	}

	.encart .encart-content {
		background-color: var(--white-color);
		border: 15px solid var(--white-color);
		border-top-width:   30px;
		border-left-width:  30px;
		border-right-width: 30px;
		border-radius: 0 30px 30px 30px;
	}


	.encart .encart-image .img,
	.encart .encart-image .img-inner{
		border-radius: 0 15px 15px 15px;
	}

	.encart .button {
		margin-bottom: -15px;
		color: var(--fs-color-secondary);
	}

	.dark .encart .button.is-link:hover {
		color: var(--black-color) !important;
	}

	.encart .button.is-link {
		/*
		background-color: var(--fs-color-secondary) !important;
		border-radius: 0 0 20px 20px;
		*/
	}



/*	=============================================================================
	ENCART SLIDER
	========================================================================== */

	.encart-tunnels-romains-slider {
		background-color: var(--white-color);
		border-radius: 30px;

		border-color: var(--white-color);
		border-style: solid;
		border-width:  0px 20px 20px 20px;
	}

	div.encart-tunnels-romains-slider div.slider-wrapper div.slider div.flickity-viewport div.flickity-slider div.banner {
		background-color: var(--white-color) !important;
	}

	.encart-tunnels-romains-slider > h3 {
		color: var(--fs-color-secondary);
		margin: 0 0 2px 5px !important;
		padding: 5px 0 0 0 !important;
	}

	.encart-tunnels-romains-slider img {
		border-radius: 15px;
	}



/*	=============================================================================
	MENU SUMMARY
	========================================================================== */

	.menu-summary .col-inner {
		background-color: var(--fs-color-secondary) !important;

		background-image: url('/wp-content/uploads/2026/02/courbe-de-niveau-003.svg');
		background-size: cover;
		background-position: 80% 50%;

		text-align: left !important;
		padding: 20px 10px !important;

		/* TODO overlay : rgba(255, 255, 255, 0.45) */
	}

	.menu-summary h3,
	.menu-summary h4 {
		text-align: center !important;
		text-transform: uppercase;
		font-weight: 600 !important;
		color: var(--fs-color-fourth);
	}

	.ux-menu-link-level1 {
		padding-left: 1.0em;
	}

	.ux-menu-link-level2 {
		padding-left: 2.0em;
	}

	.ux-menu-link-level1 .ux-menu-link__link,
	.ux-menu-link-level2 .ux-menu-link__link {
		color: var(--white-color);
		min-height: 1.5em;
		padding-bottom: .3em;
		padding-top: .3em;
	}

	.ux-menu-link-level1 .ux-menu-link__link {
		font-weight: 500;
		text-transform: uppercase;
	}

	.ux-menu-link-level2 .ux-menu-link__link {
		font-weight: 500;
		text-transform: uppercase;
	}



/*	=============================================================================
	TAG-LABEL (posts ?)
	========================================================================== */

	.tag-label {
		background-color: var(--fs-color-primary);
	}



/*	=============================================================================
	CARTE umap
	========================================================================== */

   p.carte-umap {
		background-color: var(--fs-color-secondary);
		margin-bottom: 0;
		color: var(--white-color);
		font-size: 0.75em;
   }

   .parcours {
   }


   .parcours span {
		border-bottom-width: 2px;
		border-bottom-style: solid;
   }

   .parcours.parcours-bleu span {
		border-bottom-color: var(--fs-color-primary);
   }

   .parcours.parcours-orange span {
		border-bottom-color: var(--fs-color-third);
   }

   .parcours.parcours-vert span {
		border-bottom-color: var(--fs-color-fifth);
   }



/*	=============================================================================
	FORM
	========================================================================== */

	input[type="submit"], input[type="submit"].button {
		color: var(--white-color);
		background-color: var(--fs-color-secondary);
		border-radius:99px;
		font-size: .75em;
	}



/*	=============================================================================
	FOOTER
	========================================================================== */

   #footer .absolute-footer {
		color: var(--white-color);
		background-color: #003f6f;
   }

   #footer a[target="_blank"] {
		color: var(--white-color) !important;
   }



/*	=============================================================================
	PLUGIN : WPCF7
	========================================================================== */

	/*
	.wpcf7-form p:has(.wpcf7-submit) {
		display: block !important;
	}
	*/


	.wpcf7-form .wpcf7-text,
	.wpcf7-form .wpcf7-textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid var(--light-grey-color);
		border-radius: 4px;
		transition: border-color 0.3s;
		font-weight: 500;
	}

	/* Changement de couleur au focus */
	.wpcf7-form .wpcf7-text:focus {
		border-color: var(--fs-color-secondary);
		outline: none;
	}

	/* Style du bouton d'envoi */
	.wpcf7-submit {
		background-color: var(--fs-color-secondary);
		color: var(--white-color);
		padding: 12px 25px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-weight: 500;
	}

	/* Message de succès personnalisé */
	.wpcf7-response-output {
		border-radius: 5px;
		margin-top: 20px;
		padding: 15px !important;
	}

	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.unaccepted .wpcf7-response-output,
	.wpcf7 form.payment-required .wpcf7-response-output {
		border-color: var(--fs-color-third);
	}

	.wpcf7 form.submitting.wpcf7-response-output {
		border-color: var(--fs-color-fifth);
	}

	.wpcf7 form.sent.wpcf7-response-output {
		border-color: var(--fs-color-fifth);
	}



/*	=============================================================================
	MEDIA QUERIES - XXL to MOBILE STRATEGY
	============================================================================= */

	/* --- TABLET (max-width: 849px) --- */

	@media only screen and (max-width: 849px) {

		.display-media-query {
			background-color: var(--fs-color-secondary);
		}

		.slider-slack .stack.stack-row .row:nth-child(2) {
			display: flex;
		}

		.slider-slack .stack.stack-row .row:nth-child(3) {
			display: none;
		}

	}

	/* --- MOBILE (max-width: 549px) --- */

	@media only screen and (max-width: 549px) {

		.display-media-query {
			background-color: var(--fs-color-third);
		}

		.slider-slack .stack.stack-row .row:nth-child(2) {
			display: none;
		}

		.slider-slack .stack.stack-row .row:nth-child(3) {
			display: none;
		}

	}