@supports (display: grid) {
  .site-grid { 
    grid-gap: 0 0;  /* Set the gap between rows to 0, and the columns to 0em */
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
    grid-template-areas: ". banner banner banner banner ."
                         ". top-a top-a top-a top-a ."
                         ". top-b top-b top-b top-b ."
                         ". side-l side-l side-l side-l ."
                         ". comp comp comp comp ."
                         ". side-r side-r side-r side-r ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b .";
    display: grid;
}
.site-grid {
gap: 0px !important;
}
 @media (min-width: 810px) {  /*  On screens more than 810px */
        .site-grid {
            grid-template-areas:
              ". banner banner banner banner ."
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-a bot-a ."
              ". bot-b bot-b bot-b bot-b ."
        }
    }
}
/*  ----------------------------------------- BODY ---------------------------------- */
body {
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px; 
	line-height: 18px;
	color:  #FFFFCC; /* jaune clair */
	background-color: #993300; /* brun-orange */
	font-size: 100%;
}
.container-header, .header { max-width: 960px; margin: 0 auto 0 auto; }
.grid-child { margin: 0 0 -8px -8px; padding: 0px; }
.navbar-brand { margin: -5px 0 -5px 0; padding: 0 px; }
img { margin: 0px; padding : 0px; }
.site-grid { max-width: 960px; margin: 0 auto 0 auto;  }
p { margin: 0 0 9px 0;  text-align: justify;  }
a { color: #FFCC00; text-decoration: none; }
a:hover,
a:focus {
	color: #FFFFFF; 
	text-decoration: underline;
}
.item-content a:hover,
.item-content a:focus {
	color: #FFFFFF;  /* blanc */
	text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
	margin: 9px 0;
	font-family: inherit;
	font-weight: bold;
	line-height: 130%;
	color: inherit;
}
h2 {  font-size: 150%; line-height: 120%; }

/* ************************* sidebar-left ************************ */
.container-sidebar-left {
	max-width: 220px;
	margin-left: 0px;
	margin-right: 0px;
	background-color: #000000;
	background-image: url(../images/fondogon_300x188.jpg); 
}
.sidebar-left {
	height: auto;
	background-color: #000000;
	background-image: url(../images/fondogon_300x188.jpg); 
	border: none;
}
.card-body { padding: 0 0 0 0; }
.nav > li > a:hover,
.nav > li > a:focus {
	text-decoration: none;
	background-color: #05030E; /* presque noir */
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2); /* noir opacity:0.2, donc gris clair */
	background-color: #0088cc; /* nuance de bleu */
}
.nav-pills > li  { 
	display: block;
	font-size: 13px;
	width: 200px; 
	text-decoration: none; 
	text-indent: 20px;
	font-weight: bold; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
}
.nav-pills > li > a { 
	display: block;
	font-size: 13px;
	padding: 5px 1px 5px 9px;
	margin: 0px 0px 0px 12px;
}
.nav-pills > li > a:link,
.nav-pills > li > a:visited {
	color: #ffff99; /* jaune tres clair */
	background-image: url(../images/menu_vide.gif);
	background-repeat: no-repeat;
	background-position: left;
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus { 
	background-image: url(../images/menu_boule.gif);
	background-repeat: no-repeat; 
	background-position: left; 
}
.nav-plan {
	min-width: 100%;  /* le plan du site remplira toujours toute la largeur du conteneur, quelle que soit la taille de l'écran. */
}
.card-header { 
	margin: 15px auto 15px auto;	
	font-size: 130%; 
}
.ph-top { display: none; }
@media (max-width: 810px) {  /*  On screens less than 810px */
        .copyright {display: none; }
}
/* ************************ main ********************* */
.container-component {  /* alias main */
	margin: 0px;
	padding: 0 20px 0 20px;
	background-image: url(../images/fondogon_820x188.jpg); 
	background-repeat: repeat-y; 
	background-position: right ;
}
.subheading-category, h1 { /* titre de la categorie */
	background: url(../images/puce.gif) no-repeat left top; 
	font-size: 170%; 
	font-weight: bold;
	line-height: 170%; 
	text-align: left;
	color: #FFCC00; 
	width: 100%;
	padding: 0px 0px 5px 5px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 15px 0px 15px 0px;
	 text-indent: 60px; 
}
.page-header h2 { /* titre de l'article */
	background: url(../images/titre.gif) no-repeat left bottom;
	font-size: 140%;
	line-height: 140%;
	font-weight: bold;
	text-align: left;
	color: #FFCC00; 
	width: 100%;
	padding: 0px 0px 25px 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin:15px 0px 15px 0px;	
}
.readmore a:link,.readmore a:visited {
	color: brown;  /* #993300; */
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: url(../images/read_400x20.jpg);
	background-repeat: no-repeat;
	white-space: normal;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 6px; 
	padding-top: 3px;
	float: right;
	line-height: 12px; 
	text-decoration: none;
	height: auto;  
	text-indent: 3px;  
}
.readmore a:hover { color: black; }
.btn-secondary { border-color: rgba(0,0,255,0.1); }
h3.ph-subheader, h3.pd-ctitle  {	background-color: #000000; }
h3 { font-size : 140%; }
h2 { font-size : 120%; }
.fc_left, .fc_image_desc { color: black; }  /* Flexi-Contact */
/* ***************************  phoca  **************************** */
#limit { padding: 5px 48px 5px 16px; }
.pd-float { font-size: 15px; }
.pd-float a:visited {  color: #FFCC00; }
.pd-cdesc  a:hover,
.pd-subcategory  a:hover,
.pd-float a:hover {  
	color: #FFFFFF; 
	text-decoration: underline;
}
/* ***************************  bottom-a  **************************** */
.container-bottom-a {
          margin: -8px 0 0 0;
          background-image: url(../images/noir_100x64.gif); 
          background-repeat: none; 
          background-position: center;
}
.bottom-a  {
	color:  #FFFFCC; /* jaune clair */
	background-color: black; 
	border: none; 
}
.card-body { border: none; }
.pied-de-page { margin: 15px 0 15px 25px; }
.liens-bas { margin: 0;	}
.liens-bas a { color: #FFCC00;  text-decoration: none; }
.liens-bas a:hover, 
.liens-bas a:focus, 
.com-finder__results a:hover, 
.com-finder__results a:focus { color: #FFFFFF;  text-decoration: underline; }
/* PAGINATION  from https://www.lesarbresdesign.info/technical/pagination pour éviter l' HTML Unordered List de Joomla4*/
.pagination {display:flex;list-style:none;padding-left:0}
.page-link {color: #FFCC00; background-color:transparent;border:1px solid #dee2e6;
	font-size:1.0rem;display:block;position:relative;padding:0.35rem 0.70rem;margin:5px}
.page-link:hover {border-color:#dee2e6}
.page-link:focus,.page-link:hover {background-color:#e8e8e8}
.page-item:not(:first-child) .page-link {margin-left:-1px}
.page-item.active .page-link {background-color:#2a69b7;border-color:#2a69b7;color:#fff}
.page-item.disabled .page-link {background-color:transparent;border-color:#dee2e6;color:lightgray;pointer-events:none}
.page-item:first-child .page-link {border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}
.page-item:last-child .page-link {border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}
.icon-angle-left:before {content:"<"}
.icon-angle-right:before {content:">"}
.icon-angle-double-left:before {content:"<<"}
.icon-angle-double-right:before {content:">>"} 

.mod-finder__search {display:none}
.ovh100M {display:none}