:root {
            --dark-color: #1a0f00;
            --light-color: #fffbf5;
            --main-background: #fff7eb;
            --primary-background: #995c00;
            --primary-background-mid: #754600;
            --primary-background-dark: #523100;
            --primary-textColor: #ffffff;
            --secondary-background: #008000;
            --secondary-background-mid: #005c00;
            --secondary-background-dark: #003900;
            --secondary-textColor: #ffffff;
            --secondary-color:  #fffbf5;
            --accent-background: #85ff66;
/*          --accent-background: #e6af19;*/
            --accent-textColor: #000000;
            --primary-gradient: linear-gradient(180deg, #995c00, #523100);
            --secondary-gradient: linear-gradient(180deg, #008000, #003900);
/*          --secondary-gradient: linear-gradient(180deg, #003d99, #002152);*/
            --link-color: #008000;
            --link-color-rgb: 0, 128, 0;
            --link-decoration: underline;
            --link-hover-color: #e6af19;
            --link-hover-color-rgb: 230, 175, 25;
            --link-visited-color: #6b8e23;
            --link-visited-color-rgb: 107, 142, 35;
        }
         body {
            background: var(--main-background); 		/* background of your website */
            color: var(--main-color); 		/* color of your website */
        }

        a {
            color: var(--secondary-background); /* color of your links */
        }
		
         p, div, ul, li {
			hyphens: auto;
			text-align: justify;
}

.btn-primary {
  --btn-color: #fff;
  --btn-bg: #995c00;
  --btn-border-color: #523100;
  --btn-hover-color: #fff;
  --btn-hover-bg: #008000;
  --btn-hover-border-color: #003900;
  --btn-focus-shadow-rgb: 39, 39, 111;
  --btn-active-color: #fff;
  --btn-active-bg: #008000;
  --btn-active-border-color: #003900;
  --btn-active-shadow: inset 0 3px 5px #00000020;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #995c00;
  --btn-disabled-border-color: #523100;
}

.pagination {
  --pagination-active-bg: var(--link-color);
  --pagination-active-border-color: var(--link-color);
}

        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
            background: url("../images/wood-pattern2.png"), var(--primary-gradient);  /* Set to none if you want to disable the gradient */			
        }

        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--secondary-background); /* background of your primary buttons */
            border-color: var(--secondary-background-dark); /* border color of your primary buttons */
            color: var(--primary-textColor); /* text color of your primary buttons */
        }
        .btn.btn-primary:hover {
            background-color: var(--link-hover-color); /* background of your primary buttons */
            border-color: var(--primary-background);			
        }

        .galopins.btn.btn-primary {background-color: var(--primary-background);border: 2px solid var(--primary-background-dark);}
        .galopins.btn.btn-primary p {margin:0;line-height:1.1em;font-size: 1.2rem;}		
        .galopins.btn.btn-primary:hover {background-color: var(--primary-background);border: 2px solid var(--primary-background-dark);}		
        .galopins.btn.btn-primary:hover p {background-color: var(--link-color); text-decoration: underline;}
		
        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-textColor); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 5px 5px 0 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 2px solid var(--primary-background-dark); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
            background: url("../images/buried.png");
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 1px solid var(--primary-background-dark); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-textColor); /* text color of your card body links */
        }
		.card-body li a:hover {background-color: var(--link-color);}

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */			
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            background: url("../images/wood-pattern2.png"), var(--secondary-gradient);  /* Set to none if you want to disable the gradient */					
            color: var(--secondary-color); /* text color of your footer */
        }
		
        .header .grid-child  {padding: 2px 0 0 0;}
        .footer .grid-child {padding: 0 0 2px 0;}
        .fa-solid, .fa-regular, .fa-brands, .fas, .far, .fab, .fa-sharp-solid, .fa-classic, .fa {color: #ffbb00;font-size: .8rem;}		

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
/*			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }
		.form-check-input:checked {background-color: var(--link-color); border-color: var(--link-color);}

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px); font-family: HatthaBold, Verdana, Geneva, Arial, Helvetica, Sans-Serif; color: var(--primary-background);
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px); font-family: HatthaBold, Verdana, Geneva, Arial, Helvetica, Sans-Serif; color: var(--primary-background);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 24px); font-family: HatthaBold, Verdana, Geneva, Arial, Helvetica, Sans-Serif; color: var(--primary-background);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(12px, 5vw, 22px); font-family: HatthaBold, Verdana, Geneva, Arial, Helvetica, Sans-Serif; color: var(--primary-background-mid);
		}

		/*  */
		h5, .h5 {
			font-size: clamp(10px, 5vw, 20px); font-family: HatthaBold, Verdana, Geneva, Arial, Helvetica, Sans-Serif; color: var(--primary-background-mid);
		}

		/*  */
		h6, .h6 {
			font-size: clamp(8px, 5vw, 18px); font-family: HatthaBold, Verdana, Geneva, Arial, Helvetica, Sans-Serif; color: var(--primary-background-mid);
		}

@supports (display: grid) {
@media (min-width: 992px) {
.site-grid {
grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,14.875rem) minmax(0,24.875rem) minmax(0,24.875rem) minmax(0,14.875rem) [main-end] minmax(0,1fr) [full-end]
}
}
}

@font-face {
	font-family: 'SamarkanNormal';
	src: url('fonts/samarkan_normal-webfont.eot');
	src: local('?'), url('fonts/samarkan_normal-webfont.woff') format('woff'), url('fonts/samarkan_normal-webfont.ttf') format('truetype');
}
@font-face {
	font-family: 'HatthaBold';
	src: url('fonts/hattha_bold-webfont.eot');
	src: local('?'), url('fonts/hattha_bold-webfont.woff') format('woff'), url('fonts/hattha_bold-webfont.ttf') format('truetype');
}

.com-content-article, .item-content {padding : .5rem; color: #141414; background-color: #f7efe4 !important; border-radius:20px;}

.card-header {font-size: 1rem}
.card {font-size: .95rem}
.card.float-end.article-index {display: none;}
.bloc-liens .card-body, .bloc-liens.card {border: 0px; border-radius: 20px; background-color: #f7efe4; color: #141414; padding : 5px;}

/* Dessin et ombrage du nom des enfants + photos */
.photogal {float: right; margin: 0 0 10px 20px; width: 150px;}
.nomgal{font-family:SamarkanNormal,Verdana,Helvetica,sans-serif; font-size: clamp(28px, 5vw, 4rem); margin-bottom: 2rem; margin-left: 8vw; text-shadow:1px 1px 2px #000000; text-align: center;}

/*suffixe de classe de module: Dernière mise à jour */
.db8sitelastmodified {margin: -10px 0px 0px 0px; text-align: right; font-size: 0.8rem;}

/*Couleur du placeholder et cadre de la boite de recherche */
#mod-finder-searchword132::placeholder {color: #999;background-color: #fffbf5;}
.mod-finder__search.input-group  {border:solid 1px var(--primary-background); max-width: clamp(12rem, 20vw, 15rem);border-radius: 0 7px 7px 0;}

/* diviseur flexible */
.divider {display: flex; align-items: center; margin: 20px 10px 0 10px;}
.divider::before, .divider::after {content: ''; flex-grow: 1; height: 1px; background-color: #7b5a01;}	
.divider::before {margin-right: 2rem;}
.divider::after {margin-left: 2rem;}

/* Effets transparence et cadre vert sur image cliquable */
.greenframe img {border:solid 1px transparent;opacity:0.7;filter:alpha(opacity=70);}
.greenframe:hover img {border:solid 1px #008000;opacity:1;filter:alpha(opacity=100);}

/* Titre de galerie */
.titregalerie{margin-bottom: -0.75em; text-align: center; text-indent: 0px; font-family: HatthaBold,Verdana,Helvetica,sans-serif; font-size: clamp(10px, 4vw, 1.15rem);color: #523100;}
.soustitregalerie{margin-bottom: -1em; text-align: center; text-indent: 0px; font-weight: bold; font-size: .85rem;}

.pressebook{padding: 10px; margin: 10px auto; background-color: #faf5f0;}

.color-6 {color: #995c00; border-top: 2px solid #523100; border-bottom: 2px solid #523100;}

.color-6p {display: block; padding: 5px 10px; margin-bottom: 10px; color: #43545e; background: #fbf3e7; border-radius: 10px; box-shadow: 1px 1px 1px #444;}

@media(width < 768px){.color-6p-mobile{float: none !important; width: 100% !important; margin: 2rem auto !important;}}
@media(width < 768px){.photo-bloc-mobile{float: none !important; display: block; margin: 1rem auto !important;}}

.color-6p-cadre{background: #fbf3e7; border-radius: 10px; font-family: HatthaBold, Verdana, Geneva, Arial, Helvetica, Sans-Serif; color: #995c00; font-size: clamp(26px, 5vw, 2.5rem); padding: 0px; border: .4rem; border-style: ridge; border-color: #995c00 #754600 #754600 #995c00; text-shadow: 1px 1px 1px #666;}

@media(width < 992px){.color-6p-cadre{justify-content: center !important; border-radius: 10px; border: .2rem; border-style: solid; border-color: #995c00; text-shadow: 0px 0px 0px;}}

@media(width < 768px){.screen-column-768{margin: auto !important; width: 100% !important; flex-flow: column !important; text-align: center;}}

.courtechelle {width: 49%; margin: 10px auto; padding: 10px; background-color: #e9e1d6; border-radius:10px;}
.courtechelle-cp {width: 49%; margin: 10px auto; padding: 10px; color: #3c1e00;  background-color: #f1e8d9; border-radius:10px;}
.courtechelle-ex {width: 49%; margin: 10px auto; padding: 10px; color: #666; background-color: #f2eadf; border-radius:10px;}
.courtechelle-cp-icon {color: #995c00; font-size: 1.5rem;}
@media(width < 768px){.courtechelle {width: 100%;} .courtechelle-cp {width: 100%;} .courtechelle-ex{width: 100%;}}

.galopins.metismenu.mod-menu .parent,.galopins.metismenu.mod-menu .level-1,.galopins.metismenu.mod-menu .level-2 {padding: 0 .5rem; font-size: 1rem;}
.galopins.metismenu.mod-menu .level-2 {font-size: .9rem; background-color: var(--primary-background);}
.galopins.metismenu.mod-menu .level-1  > a:hover , .galopins.metismenu.mod-menu .level-2  > a:hover, .galopins.metismenu.mod-menu .metismenu-item.active > a {background-color: var(--link-color);}
.galopins-menu.metismenu.mod-menu .level-1{display: inline-block;}

.banner-background {background: url("../images/asfalt-dark.png"), radial-gradient(ellipse, #fa8e22 60%, #995c00 100%);}

.back-to-top-link {color: #fff; background-color: #008000; border: 1px solid #fff;}
.back-to-top-link:hover, .back-to-top-link:focus {color: #995c00; background-color: #e6af19; border-color: #995c00;}