/* ====== Reset CSS ====== */
* {box-sizing: border-box;font-family: Quicksand,Arial,sans-serif}
html,body {margin: 0;padding: 0;min-width: 320px;scroll-behavior: smooth;box-sizing: border-box;}
a {text-decoration: none;transition: all 0.3s ease-in-out}
button {outline: none;border:none;transition: all 0.3s ease-in-out}
p,h1,h2,h3,h4,h5,h6,ul,li {margin: 0;padding: 0}
ul li{list-style-type: none}
.arobase::before {content: "\000040"}
.display-off {display: none;}
.display-on {display:inline;}
.hidden {display: none;}
.visible {display: inline-block;}
.block {display: block;}
@media (min-width:1280px){
	p {font-size: 16px;line-height: 1.618}
	p small {font-size: 14px}
}
@media (max-width:1279px){
	p {font-size: 14px;line-height: 1.618}
	p small {font-size: 12px}
}
/* ====== Container ====== */
.container {width: 1200px; margin: 0 auto}
.container-fluid {width: 1800px; margin: 0 auto}
@media (max-width:1920px){.container-fluid{width: 1400px}.container{width: 1200px}}
@media (max-width:1680px){.container-fluid{width: 1400px}}
@media (max-width:1440px){.container-fluid{width: 90%;margin: 0 auto}}
@media (max-width:1366px){.container {width: 900px;margin: 0 auto}}
@media (max-width:1024px){.container {width: 90%}}

/* ====== Left-Sidebar ====== */
#left-sidebar {}
.hamburger {width: 40px;height: 45px;margin-top:33px;margin-left:33px;position: absolute;transform: rotate(0deg);transition: .5s ease-in-out;cursor: pointer}
.hamburger span {display: block;position: absolute;height: 3.2px;width: 40px;background: #eee;border-radius: 5px;left: 0;  transform: rotate(0deg);transition: .25s ease-in-out}
.hamburger:hover span {background: #fff}
.hamburger span:nth-child(1) {top: 3px;width: 50%}
.hamburger span:nth-child(2) {top: 12px}
.hamburger span:nth-child(3) {top: 12px;opacity: 0}
.hamburger span:nth-child(4) {top: 22px;width: 75%}
.hamburger.open span:nth-child(1) {top: 12px;width: 0%;left: 50%}
.hamburger.open span:nth-child(2) {transform: rotate(45deg);background: #fff}
.hamburger.open span:nth-child(3) {transform: rotate(-45deg);background: #fff;opacity: 1}
.hamburger.open span:nth-child(4) {top: 12px;width: 0%;left: 50%}
@media (max-width:1680px){
	.hamburger {margin-left:20px}
}
@media (max-width:1366px){
	.hamburger {right:5%;top: -10px;z-index:1}
}
/* ====== Right-Sidebar ====== */
.overlay {position: fixed;width: calc(100% - 320px);height: 100%;z-index: 999;display: none}
.overlay.open {display: block}
#right-sidebar {width: 320px;height: 100%;background: rgba(22,22,22,.9);position: fixed;right: -320px;top: 0;transition: .25s ease-in-out;z-index: 666;opacity: 0;overflow-y: scroll; scrollbar-color: #68575d; scrollbar-width: thin;}
#right-sidebar.open {width: 320px;right: 0;opacity: 1;height: 100%}
#right-sidebar .content {margin: 35px 0 0 0}
#right-sidebar .content a img {height: 70px:;width: 70px;margin-left: 35px;margin-top: -20px;background:#fff}
#right-sidebar .content ul.right-menu {margin-top: 35px}
#right-sidebar .content ul.right-menu li a, 
#right-sidebar .content ul.right-menu li strong {display: block;font-size: 16px; font-weight: 600; letter-spacing: 0px;text-transform: uppercase;color: #f1f1f1;transition: .2s ease-in-out;padding: 15px 0 15px 35px;border-left: 0px solid transparent}
#right-sidebar .content ul.right-menu li a.active {color: #fff;background: #111}
#right-sidebar .content ul.right-menu li ul li {margin: 0}
#right-sidebar .content ul.right-menu li ul li a {font-size: 16px;color: #cecec0;text-transform: none;font-weight: 300;padding: 10px 0px 10px 45px}
#right-sidebar .content ul.right-menu li a:hover {background: #111}
#right-sidebar .content ul.right-menu li a.mn-accueil.active,
#right-sidebar .content ul.right-menu li a.mn-actus.active {border-left: 5px solid #eddfcf;color:#eddfcf}
#right-sidebar .content ul.right-menu li a.mn-accueil:hover,
#right-sidebar .content ul.right-menu li a.mn-actus:hover {border-left: 5px solid #eddfcf}
#right-sidebar .content ul.right-menu li a.mn-informations.active {border-left: 5px solid rgba(197,139,197,.75);color:rgba(197,139,197,1)}
#right-sidebar .content ul.right-menu li a.mn-informations:hover {border-left: 5px solid rgba(197,139,197,.75);color:rgba(197,139,197,1)}
#right-sidebar .content ul.right-menu li a.mn-pastorale.active {border-left: 5px solid rgba(126,179,209,.75);color:rgba(126,179,209,1)}
#right-sidebar .content ul.right-menu li a.mn-pastorale:hover {border-left: 5px solid rgba(126,179,209,.75);color:rgba(126,179,209,1)}
#right-sidebar .content ul.right-menu li a.mn-petites-annonces.active {border-left: 5px solid rgba(252,199,68,.75);color:rgba(252,199,68,1)}
#right-sidebar .content ul.right-menu li a.mn-petites-annonces:hover {border-left: 5px solid rgba(252,199,68,.75);color:rgba(252,199,68,1)}
#right-sidebar .content ul.right-menu li a.mn-evenements.active {border-left: 5px solid rgba(162,197,106,.75);color:rgba(162,197,106,1)}
#right-sidebar .content ul.right-menu li a.mn-evenements:hover {border-left: 5px solid rgba(162,197,106,.75);color:rgba(162,197,106,1)}
#right-sidebar .content ul.right-menu li a.mn-liens-utiles.active {border-left: 5px solid rgba(195,210,236,.75);color:rgba(195,210,236,1)}
#right-sidebar .content ul.right-menu li a.mn-liens-utiles:hover {border-left: 5px solid rgba(195,210,236,.75);color:rgba(195,210,236,1)}
#right-sidebar .content ul.right-menu li a.mn-menu-cantine-m.active {border-left: 5px solid rgba(00,137,77,.75);color:rgba(00,137,77,1)}
#right-sidebar .content ul.right-menu li a.mn-menu-cantine-m:hover {border-left: 5px solid rgba(00,137,77,.75);color:rgba(00,137,77,1)}
#right-sidebar .content ul.right-menu li a.mn-menu-cantine-pc.active {border-left: 5px solid rgba(00,137,77,.75);color:rgba(00,137,77,1)}
#right-sidebar .content ul.right-menu li a.mn-menu-cantine-pc:hover {border-left: 5px solid rgba(00,137,77,.75);color:rgba(00,137,77,1)}
#right-sidebar .content ul.right-menu li a.mn-college.active {border-left: 5px solid rgba(235,90,56,.75);color:rgba(235,90,56,1)}
#right-sidebar .content ul.right-menu li a.mn-college:hover {border-left: 5px solid rgba(235,90,56,.75);color:rgba(235,90,56,1)}
#right-sidebar .content ul.right-menu li a.mn-maternelle.active {border-left: 5px solid rgba(75,105,177,.75);color:rgba(75,105,177,1)}
#right-sidebar .content ul.right-menu li a.mn-maternelle:hover {border-left: 5px solid rgba(75,105,177,.75);color:rgba(75,105,177,1)}
#right-sidebar .content ul.right-menu li a.mn-elementaire.active {border-left: 5px solid rgba(234,151,48,.75);color:rgba(234,151,48,1)}
#right-sidebar .content ul.right-menu li a.mn-elementaire:hover {border-left: 5px solid rgba(234,151,48,.75);color:rgba(234,151,48,1)}
#right-sidebar .content .copyright {position: fixed;bottom: 40px;width: 320px;margin-left: 35px}
#right-sidebar .content .copyright a {font-size: 13px;color: #f1f1f1;font-weight: 300}
#right-sidebar .content .copyright a:hover {opacity: .9}
#right-sidebar .content .copyright a strong{color:#eddfcf}
@media (max-width:1024px){
	#right-sidebar.open {width: 280px}
	#right-sidebar.open a img {height: 35px:;width: 35px;margin-left: 20px}
	#right-sidebar .content ul.right-menu {margin-top: 10px}
	#right-sidebar .content ul.right-menu li a, 
	#right-sidebar .content ul.right-menu li strong {padding: 15px 0 15px 20px}
}

/* === Footer === */
footer .copyright {text-align: center;font-size: .8rem;backdrop-filter: blur(5px);background: rgba(0, 0, 0, .5);color: rgba(255,255,255,.75);padding: 10px 5%;letter-spacing: 0px;line-height: 1.8;letter-spacing: .5px;width: 1200px}
footer .copyright a {color: rgba(255,255,255,.5);text-underline-offset: 2px;text-decoration: underline}
footer .copyright a:hover {color: rgba(255,255,255,.35);}
footer .copyright span {color: rgba(255,255,255,.5)}
@media (max-width:1366px){footer .copyright {width: 900px;margin: 0 auto}}
@media (max-width:1024px){footer .copyright {width: 100%}}

/* ============================= */
/* ====== PAGE PRINCIPALE ====== */
/* ============================= */
body#accueil {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
main#accueil {height: 100%;width: 100%}
/* === Header === */
header .left {width: 40%;display: inline-block;padding: 5px;vertical-align: top;}
header .left .logo {display: inline-block;background:#fff;vertical-align: middle}
header .left .logo img {width: 50px}
header .left .texte {display: inline-block;vertical-align: middle}
header .left h1 {font-size: 28px;color: #fff;text-shadow: 1px 1px 1px rgba(0,0,0,0.1);font-weight: 700;display: inline-block;margin-left: 8px}
header .left h2 {font-size: 13px;font-weight: 400;color:#fff;opacity: .8;margin-left: 8px}
header .right {width: 60%;display: inline-block;text-align: right;margin-top: 0px}
header .right a.lien-pronote {margin-bottom: 0px;background:linear-gradient(0deg,rgba(255,255,255,0.35),rgba(255,255,255,.25));background-color: rgba(255,255,255,.05);filter: saturate(1.2);backdrop-filter: blur(3px);transition: all 0.25s ease-in-out;display: inline-block;vertical-align: middle;color:#fff;padding:5px 30px;margin-left: 5px}
header .right a.lien-pronote.facebook {padding:5px 10px}
header .right a.lien-pronote img {margin-top: 5px}
header .right a.lien-pronote i {display: inline-block;vertical-align: top;margin-top: 5px}
header .right a.lien-pronote:hover {background-color:rgba(255,255,255,0.35);color:#fff}
/* === nav windows main page === */
nav {display: block}
nav ul {margin: 150px 0 420px 0}
nav ul li {position: relative;display: inline-block;height: 200px;vertical-align: top;transition: all 0.25s ease-in-out}
nav ul li a {width: 100%;height: 100%;display: block;text-align: center;font-family: 'Quicksand', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0px; color:#fff; text-transform: uppercase; overflow: hidden; text-shadow: 1px 1px 1px rgba(0,0,0,0.25);}
nav ul li a img {width: 100px;height: 100px;margin-top: 35px}
nav ul li .badge {position: absolute;top: 35px;right: 60px;padding: 5px 11px 6px 12px;border-radius: 50%;background: #DB4437;color: white;font-weight: 700}
nav ul li.simple {width: 200px}
nav ul li.double {width: 400px}
nav ul li.triple {width: 600px}
nav ul li:nth-child(1) {background-color: transparent}
nav ul li:nth-child(2) {background-color: rgba(197,139,197,.9);opacity: 1;cursor: pointer;backdrop-filter: blur(3px)}
nav ul li:nth-child(2):hover {opacity: .9}
nav ul li:nth-child(3) {background: #fff;text-align:center}
nav ul li:nth-child(3) img {width: 600px;height: 200px;margin-top: 0px;}
nav ul li:nth-child(4) {background-color: rgba(126,179,209,.9);opacity: 1;cursor: pointer;backdrop-filter: blur(3px)}
nav ul li:nth-child(4):hover {opacity: .9}
nav ul li:nth-child(5) {background-color: rgba(252,199,68,.9);opacity: 1;cursor: pointer;backdrop-filter: blur(3px)}
nav ul li:nth-child(5):hover {opacity: .9}
nav ul li:nth-child(6) {background-color: rgba(143,173,94,.9);opacity: 1;cursor: pointer;backdrop-filter: blur(3px)}
nav ul li:nth-child(6):hover {opacity: .9}
nav ul li:nth-child(7) {background-color: rgba(75,105,177,.9);cursor: pointer;backdrop-filter: blur(3px);opacity: 1}
nav ul li:nth-child(7):hover {opacity: .9}
nav ul li:nth-child(8) {background-color: rgba(234,151,48,.9);cursor: pointer;backdrop-filter: blur(3px);opacity: 1}
nav ul li:nth-child(8):hover {opacity: .9}
nav ul li:nth-child(9) {background-color: rgba(235,90,56,.9);cursor: pointer;backdrop-filter: blur(3px);opacity: 1}
nav ul li:nth-child(9):hover {opacity: .9}
nav ul li:nth-child(10) {background-color: rgba(195,210,236,.9);cursor: pointer;backdrop-filter: blur(3px);opacity: 1}
nav ul li:nth-child(10):hover {opacity: .9}
nav ul li:nth-child(11) {background-color: transparent}
nav ul li:nth-child(12) {cursor: pointer}
nav ul li:nth-child(12) a img {width: 75px;height: 75px}
nav ul li:nth-child(12) a small {text-transform: none;position: absolute;bottom: 0;left:0;background-color: #000;padding: 3px 10px;width: 100%;color: #f1f1f1;opacity: .75;text-shadow: none}
nav ul li:nth-child(12) a span {opacity: .75;font-weight: 400}
nav ul li:nth-child(13),nav ul li:nth-child(14) {background-color: rgba(00,137,77,.8);cursor: pointer;backdrop-filter: blur(3px);opacity: 1}
nav ul li:nth-child(14) {border-left: 1px solid rgba(0, 0, 0, .2);}
nav ul li:nth-child(13):hover,nav ul li:nth-child(14):hover {opacity: .9}
nav ul li:nth-child(13) a img,nav ul li:nth-child(14) a img {width: 50px;height: 50px}
nav ul li:nth-child(13) a small,nav ul li:nth-child(14) a small {opacity: .75;text-transform: none}
.actu {filter: saturate(.75);transition: all 0.25s ease-in-out}
.actu:hover {filter: saturate(1)}
/* === Media Queries === */
@media (max-width:1920px){
	nav ul {margin: 100px 0 420px 0}
}
@media (max-width:1366px){	
	header .left {width: 100%;margin: 0px 0 20px 0}
	header .right.aff {width: 100%;text-align: left;display: inline;}
	header .right {display: none}
	nav ul {margin: 30px 0 160px 0}
	nav ul li.simple {width: 225px}
	nav ul li.double {width: 450px}
	nav ul li.triple {width: 450px}
	nav ul li:nth-child(1),
	nav ul li:nth-child(11) {display: none}
	nav ul li:nth-child(3) img {width: 420px;height: 136px;margin: 40px 0 0 15px}
	nav ul li:nth-child(5),
	nav ul li:nth-child(6) {width: 450px}
	nav ul li .badge {right: 185px}
	nav ul li:nth-child(7),
	nav ul li:nth-child(8),
	nav ul li:nth-child(9) {width: 300px}
}
@media (max-width:1024px){
	header .left h1 {font-size: 20px}
	header .left h2 {font-size: 10px;letter-spacing: -.5px}
	header .right {text-align: center}
	nav ul {margin: 30px 0 100px 0}
	nav ul li.simple {width: 50%}
	nav ul li.double {width: 50%}
	nav ul li:nth-child(3) {display: none}
	nav ul li .badge {right: calc(50% - 40px)}
	nav ul li:nth-child(12) a span {display: none}
	header .right a.lien-pronote {margin-left: 0;text-align: center;padding:8px 30px 5px 30px}
	header .right a.lien-pronote:nth-child(1) {margin-bottom: 5px;color:#fff;width: 100%}
	header .right a.lien-pronote:nth-child(2),
	header .right a.lien-pronote:nth-child(3) {width: calc(50% - 2.5px)}
	header .right a.lien-pronote:nth-child(2) {margin-right: 5px}
	header .right a.lien-pronote img.prim {width: 130px;height: 50px;margin: 0 auto}
	header .right a.lien-pronote img {margin-top: 2px}
}

/* =============================== */
/* ====== PAGES SECONDAIRES ====== */
/* =============================== */

/* ====== Menu Tabs  ====== */
.tabs {float: none;list-style: none;position: relative;  text-align: left;margin-top: 80px}
.tabs li {float: left;display: block;margin-top: 2px;margin-right: 5px}
.tabs li a {color: #000;}
.tabs input[type="radio"] {position: absolute;top: 0;left: -9999px}
.tabs label,
.tabs .label {display: block;padding: 8px 22px;border-radius: 6px 6px 0 0;font-size: 18px;background: rgba(255,255,255,.5);cursor: pointer;position: relative;  top: 14px;transition: all 0.2s ease-in-out}
.tabs label:hover,
.tabs .label:hover {background: rgba(255,255,255,.75)}
.tabs [id^="tab"]:checked + label {background: rgba(255,255,255,.85);padding-top: 10px;margin-top: -2px;border-radius: 7px 7px 0 0}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {display: block}

/* ====== Content Tabs  ====== */
.tabs .tab-content {z-index: 2;display: none;overflow: hidden;width: 100%;font-size: 17px;line-height: 25px;padding: 50px 40px;position: absolute;top: 55px;left: 0;background: rgba(255,255,255,.85);border-radius: 0 7px 0 0;}
.tabs .tab-content h3 {text-transform: uppercase;margin-bottom: 20px}
.tabs .tab-content h4 {color: #fff;padding: 10px 20px;text-transform: uppercase}
.tabs .tab-content .content {background: #fff;padding: 40px 40px}
/* === 1 column === */
.tabs .tab-content .single {background: #fff;padding: 40px 40px}
.tabs .tab-content .single p {margin-bottom: 20px}
.tabs .tab-content .single ul li {display: block;width: 100%}
/* === 2 column === */
/* left */
.tabs .tab-content .left {width: calc(50% - 10px);display: inline-block;vertical-align: top;margin-bottom: 20px}
/* right */
.tabs .tab-content .right {width: calc(50% - 10px);display: inline-block;margin: 0 0 20px 20px}
/* programme */
.tabs .tab-content ul.programme {margin-top: 20px;display: block;width: 100%}
.tabs .tab-content .content ul.programme li {border-top: 1px solid rgba(153,153,153,.3);display: block;;padding: 10px 0;flex: initial;float: none}
.tabs .tab-content .content strong {margin-bottom: 5px;display: block}
.tabs .tab-content .content strong small {font-weight: 300}
/* liens utiles - GRID */
.tabs .tab-content .grid {}
.tabs .tab-content .grid .item {background: #fff;display: block;border-radius: 5px;overflow:hidden;padding: 8px 15px 5px 5px;margin-bottom: 20px}
.tabs .tab-content .grid .item img {display: inline-block;width: 70px;height: 70px;vertical-align: middle;margin-right: 5px}
.tabs .tab-content .grid .item .text {display: inline-block;vertical-align: middle;}
.tabs .tab-content .grid .item .text p {font-weight: 700}
/* Maternelle - Elementaire - College */
.tabs .tab-content .btn {font-weight: 500;padding: 10px 15px;display: inline-block;transition: all 0.3s ease-in-out}
.tabs .tab-content .btn svg {display: inline-block;vertical-align: top}
.tabs .tab-content .btn a {color:#fff;vertical-align: top}
.tabs .tab-content img.image {max-width: 100%}
.tabs .tab-content ul.items {display: flex;width: 100%}
.tabs .tab-content ul.items li {flex: 1;padding: 0px;text-align: center;margin: 0}
.tabs .tab-content ul.items li:nth-child(1) .item {padding: 10px 8px 17px 0px}
.tabs .tab-content ul.items li:nth-child(2) .item {padding: 10px 8px 17px 8px}
.tabs .tab-content ul.items li:nth-child(3) .item {padding: 10px 0px 17px 8px}
.tabs .tab-content ul.items li:nth-child(1) .item .nb,
.tabs .tab-content ul.items li:nth-child(3) .item .nb {padding: 50px 10px 40px 10px}
.tabs .tab-content ul.items li:nth-child(2) .item .nb {padding: 50px 0px 40px 0px}
.tabs .tab-content ul.items li .item .nb span {font-size: 80px;font-weight: 900;color: #fff;text-shadow: 2px 2px 2px rgba(0, 0, 0, .1)}
.tabs .tab-content ul.items li .item .nb p {font-size: 15px;font-weight: 700;text-transform: uppercase;color: #fff;text-shadow: 2px 2px 2px rgba(0, 0, 0, .1)}
/* Actualités */
.tabs .tab-content .filtre {margin-bottom: 20px}
.tabs .tab-content .filtre a {display: inline-block;color: #eee;background: #68575d;border: 1px solid #68575d;border-radius: 2px;padding: 5px 15px;margin-right: 5px;margin-bottom: 5px}
.tabs .tab-content .filtre a:hover {color: #fff;background: #554C4F}
.tabs .tab-content .filtre a.active {color: #68575d;background: #CBC8C9}
.tabs .tab-content .liste_actu {position: relative}
.tabs .tab-content .liste_actu .content_liste_actu {display: block;margin-bottom: 20px}
.tabs .tab-content .liste_actu .content_liste_actu .left_actu{display: inline-block;width: 25%;height: 250px;vertical-align: middle}
.tabs .tab-content .liste_actu .content_liste_actu .right_actu{padding: 25px 40px 30px 35px;display: inline-block;width: 75%;background: #fff;height: 250px;vertical-align: middle}
.tabs .tab-content .cat_liste_actu {color: #fff;position: a}
.tabs .tab-content .liste_actu .titre_liste_actu {font-weight: 700;display: inline-block;border-bottom: 1px solid transparent;transition: all 0.2s ease-in-out}
.tabs .tab-content .liste_actu .titre_liste_actu:hover {border-bottom: 1px solid #666}
.tabs .tab-content .liste_actu .texte_liste_actu {margin-top: 10px}
.tabs .tab-content .liste_actu .lien_liste_actu {position: absolute;right: 35px;bottom: 30px;display: inline-block}
.show_more {background-color: #f8f8f8; background-image: -webkit-linear-gradient(top,#fcfcfc 0,#f8f8f8 100%); background-image: linear-gradient(top,#fcfcfc 0,#f8f8f8 100%); border: 1px solid; border-color: #d3d3d3; color: #333; font-size: 12px; outline: 0; }
.show_more {cursor: pointer; display: block; padding: 10px 0; text-align: center; font-weight:bold; }
.loding {background-color: #e9e9e9; border: 1px solid; border-color: #c6c6c6; color: #333; font-size: 12px; display: block; text-align: center; padding: 10px 0; outline: 0; font-weight:bold; }
.loding_txt {border: 0; display: inline-block; height: 16px; padding-left: 20px; }
.post_cat_tou {background-color:#2E272A !important;padding:2px 5px;font-size: 12px !important}
.post_cat_mat {background-color:#4B69B1 !important;padding:2px 5px;font-size: 12px !important}
.post_cat_pri {background-color:#EA9730 !important;padding:2px 5px;font-size: 12px !important}
.post_cat_col {background-color:#EB5A38 !important;padding:2px 5px;font-size: 12px !important}
.post_cat_ape {background-color:#00894D !important;padding:2px 5px;font-size: 12px !important}
.post_cat_spo {background-color:#00894D !important;padding:2px 5px;font-size: 12px !important}
@media (max-width:1920px){.tabs {margin-top: 30px}}
@media (min-width:1280px){
	.tabs .tab-content .single ul li {font-size: 16px;line-height: 1.618}
}
@media (max-width:1279px){
	.tabs .tab-content .single ul li {font-size: 14px;line-height: 1.618}
}
@media (max-width:1366px){
	.tabs {margin-top: 0px}
	.tabs .tab-content .content {padding: 20px}
	.tabs .tab-content .left {width: 100%;display: block;margin-bottom: 20px}
	.tabs .tab-content .right {width: 100%;display: block;margin: 0 0 20px 0}
	.tabs .tab-content .left.one .content {height: auto}	
	.tabs .tab-content .left.one .content {height: auto}	
	.tabs .tab-content .right .content {height: auto}
	body#informations .tabs .tab-content .single img.img1 {width: 100%;margin-bottom: 15px}
	body#informations .tabs .tab-content .single ul {width: 100%;margin-left: 0}
}
@media (max-width:1024px){	
	.tabs .tab-content {padding: 20px 20px}
	.tabs .tab-content .single {padding: 20px}
	.tabs.multi {margin-top: 0px}
	.tabs.multi li {width: calc(50% - 2.5px);margin-bottom: 5px;margin-right: 0}
	.tabs.multi li:nth-child(1),
	.tabs.multi li:nth-child(3) {margin-right: 5px}
	body#informations .tabs.multi .tab-content {top: 124px;border-radius: 0}
	.tabs.multi .tab-content {top: 70px;border-radius: 0}
	.tabs.multi label,
	.tabs .label {border-radius: 0;padding: 12px 10px}
	.tabs.multi [id^="tab"]:checked + label {border-radius: 0;padding: 12px 10px;margin-top: 0}
	body#informations .tabs .tab-content .single img.img2 {width: 100%}
	.tabs .tab-content .liste_actu .content_liste_actu .left_actu{width: 100%;height: 250px}
	.tabs .tab-content .liste_actu .content_liste_actu .right_actu{padding: 20px;width: 100%;height:auto}
	.tabs .tab-content .liste_actu .texte_liste_actu {margin-bottom: 50px}
	.tabs .tab-content .content ul.programme li {width: 100%}
}
@media (max-width:680px){
	.tabs.multi li {width: 100%}
	body#informations .tabs .tab-content {margin-top: 108px}
	.tabs.multi .tab-content {top: 124px;border-radius: 0}
	.tabs .tab-content ul.items {display: flex;width: 100%;flex-wrap: wrap;margin-bottom: 10px}
	.tabs .tab-content ul.items li {flex: none;width: 100%;padding: 0px;text-align: center;margin: 0}
	.tabs .tab-content ul.items li:nth-child(1) .item,
	.tabs .tab-content ul.items li:nth-child(2) .item,
	.tabs .tab-content ul.items li:nth-child(3) .item {padding: 5px 0}
	.tabs .tab-content ul.items li:nth-child(1) .item .nb,
	.tabs .tab-content ul.items li:nth-child(3) .item .nb, 
	.tabs .tab-content ul.items li:nth-child(2) .item .nb {padding: 40px 10px 20px 10px}
}
.clearfix {
  overflow: auto;
  clear: both;
}
/* ====== informations ====== */
body#informations .tabs .tab-content .single img.img1 {display: inline-block;width: 400px;vertical-align: top}
body#informations .tabs .tab-content .single img.img2 {display: inline-block;width: calc(50% - 2.5px);vertical-align: top}
body#informations .tabs .tab-content .single img.img3 {width: 100%}
body#informations .tabs .tab-content .single ul {display: inline-block;width: 610px;margin-left: 20px}
body#informations {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#informations .tabs .tab-content .left.one .content {height: 742px}
body#informations .tabs .tab-content .right.four .content {height: 360px}
body#informations .tabs .tab-content h3 {color:#ab7dab}
body#informations .tabs .tab-content h4 {background: #ab7dab;text-shadow: 1px 1px 1px rgba(0,0,0,.25)}
body#informations .tabs .tab-content .single ul li a {color:#ab7dab;text-decoration: underline}
body#informations .tabs .tab-content .content strong {color: #ab7dab}
body#informations .tabs .tab-content .btn {background: #ab7dab}
body#informations .tabs .tab-content .btn:hover {background: rgba(171,125,171,.85)}
body#informations .tabs .tab-content .btn a {text-shadow: 1px 1px 1px rgba(0,0,0,.25)}
body#informations .single strong {color:#ab7dab}
@media (max-width:1366px){
	body#informations .tabs .tab-content .left.one .content {height: auto}
	body#informations .tabs .tab-content .right .content {height: auto}
}

/* ====== Petites Annonces ====== */
body#petitesannonc {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#petitesannonc .tabs .tab-content h3 {color:#d5ae4c}
.content_liste_annonce {border-radius: 5px;margin-top: 40px;padding: 20px}
.content_liste_annonce .titre_liste_actu {text-transform: uppercase;font-weight: 700}
@media (min-width:1280px){
	.content_liste_annonce .texte_liste_actu {font-size: 16px;line-height: 1.618;padding: 0 10px 20px 10px}
}
@media (max-width:1279px){
	.content_liste_annonce .texte_liste_actu {font-size: 14px;line-height: 1.618;padding: 0 5px 20px 5px}
}
/* ====== pastorale ====== */
body#pastorale {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#pastorale .tabs .tab-content h3 {color:rgba(126,179,209,1)}
body#pastorale strong.color {color:rgba(126,179,209,1)}

/* ====== projet ====== */
body#projet {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#projet .tabs .tab-content h3 {color:#8fad5e}
body#projet embed {height: 800px}
@media (max-width:1366px){
	body#projet embed {height: 600px}
}
@media (max-width:1024px){
	body#projet embed {height: 400px}
}

/* ====== maternelle ====== */
body#maternelle {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#maternelle .tabs .tab-content h3 {color:rgba(75,105,177,.95)}
body#maternelle .tabs .tab-content h4 {background: rgba(75,105,177,.95);text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);}
body#maternelle .tabs .tab-content .single ul li a {color:#bb679d;text-decoration: underline}
body#maternelle .tabs .tab-content .content strong {color: rgba(75,105,177,.95)}
body#maternelle .tabs .tab-content .btn {background: rgba(75,105,177,.95);}
body#maternelle .tabs .tab-content .btn:hover {background: rgba(75,105,177,.75)}
body#maternelle .tabs .tab-content .btn a {text-shadow: 1px 1px 1px rgba(0, 0, 0, .3)}
body#maternelle .tabs .tab-content ul.items li .item .nb {background: rgba(75,105,177,.95)}
body#maternelle .tabs .tab-content .left.one .content {height: 252px}
body#maternelle .tabs .tab-content .liste_actu .date_liste_actu {color:rgba(75,105,177,.95)}
body#maternelle .tabs .tab-content .liste_actu .lien_liste_actu {color:rgba(75,105,177,.95);border-bottom: 1px solid transparent;transition: all 0.2s ease-in-out}
body#maternelle .tabs .tab-content .liste_actu .lien_liste_actu:hover {border-bottom: 1px solid rgba(75,105,177,.95);}
body#maternelle .tabs .tab-content .liste_actu .lien_liste_actu a {color:rgba(75,105,177,.95)}
@media (max-width:1366px){
	body#maternelle .tabs .tab-content .left.one .content {height: auto}
}
/* ====== elementaire ====== */
body#elementaire {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#elementaire .tabs .tab-content h3 {color:rgba(234,151,48,1)}
body#elementaire .tabs .tab-content h4 {background: rgba(234,151,48,1);text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);}
body#elementaire .tabs .tab-content .single ul li a {color:rgba(234,151,48,1);text-decoration: underline}
body#elementaire .tabs .tab-content .content strong {color: rgba(234,151,48,1)}
body#elementaire .tabs .tab-content .btn {background: rgba(234,151,48,1);}
body#elementaire .tabs .tab-content .btn:hover {background: rgba(234,151,48,.85)}
body#elementaire .tabs .tab-content .btn a {text-shadow: 1px 1px 1px rgba(0, 0, 0, .3)}
body#elementaire .tabs .tab-content ul.items li .item .nb {background: rgba(234,151,48,1)}
body#elementaire .tabs .tab-content .left.one .content {height: auto}
body#elementaire .tabs .tab-content .right .content {height: 1165px}
body#elementaire .tabs .tab-content .liste_actu .date_liste_actu {color:rgba(234,151,48,1)}
body#elementaire .tabs .tab-content .liste_actu .lien_liste_actu {color:rgba(234,151,48,1);border-bottom: 1px solid transparent;transition: all 0.2s ease-in-out}
body#elementaire .tabs .tab-content .liste_actu .lien_liste_actu:hover {border-bottom: 1px solid rgba(234,151,48,1)}
body#elementaire .tabs .tab-content .liste_actu .lien_liste_actu a {color:rgba(234,151,48,1)}
@media (max-width:1366px){
	body#elementaire .tabs .tab-content .right .content {height: auto}
}

/* ====== college ====== */
body#college {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#college .tabs .tab-content h3 {color:rgba(235,90,56,1)}
body#college .tabs .tab-content h4 {background: rgba(235,90,56,1);text-shadow: 1px 1px 1px rgba(0, 0, 0, .1)}
body#college .tabs .tab-content .single ul li a {color:rgba(235,90,56,1);text-decoration: underline}
body#college .tabs .tab-content .content strong {color: rgba(235,90,56,1)}
body#college .tabs .tab-content .btn {background: rgba(235,90,56,1);}
body#college .tabs .tab-content .btn:hover {background: rgba(235,90,56,.85)}
body#college .tabs .tab-content .btn a {text-shadow: 1px 1px 1px rgba(0, 0, 0, .3)}
body#college .tabs .tab-content ul.items li .item .nb {background: rgba(235,90,56,1)}
body#college .tabs .tab-content .left.one .content {height: auto}
body#college .tabs .tab-content .right .content {height: 1265px}
body#college .tabs .tab-content .liste_actu .date_liste_actu {color:rgba(235,90,56,1)}
body#college .tabs .tab-content .liste_actu .lien_liste_actu {color:rgba(235,90,56,1);border-bottom: 1px solid transparent;transition: all 0.2s ease-in-out}
body#college .tabs .tab-content .liste_actu .lien_liste_actu:hover {border-bottom: 1px solid rgba(235,90,56,1)}
body#college .tabs .tab-content .liste_actu .lien_liste_actu a {color:rgba(235,90,56,1)}
@media (max-width:1366px){
	body#college .tabs .tab-content .right .content {height: auto}
}

/* ====== liensutiles ====== */
body#liensutiles {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#liensutiles .tabs .tab-content h3 {color:#8492aa}
body#liensutiles .tabs .tab-content .grid .item .text a {color:#8492aa}
body#liensutiles .tabs .tab-content .grid .item .text a:hover {text-decoration: underline}

/* ====== actualites ====== */
body#actualites {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#actualites .tabs .tab-content h3 {color:#151515}
body#actualites .tabs .tab-content .liste_actu .date_liste_actu {color:#151515}
body#actualites .tabs .tab-content .liste_actu .lien_liste_actu {color:#151515;border-bottom: 1px solid transparent;transition: all 0.2s ease-in-out}
body#actualites .tabs .tab-content .liste_actu .lien_liste_actu:hover {border-bottom: 1px solid #151515}
body#actualites .tabs .tab-content .liste_actu .lien_liste_actu a {color:#151515}
/* === article === */
body#actualites p.article {margin: 20px 0;display: block}
.lightgallery.simple {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(1, auto);grid-gap: 20px;margin:40px 0}
.lightgallery .galerie-item {height: 100%;padding: 0;transition: all 0.3s}
.lightgallery .galerie-item.display {display: none}
.lightgallery .galerie-item img {width: 100%;border-radius: 5px;transition: all 0.3s}
.lightgallery .galerie-item h5 {background: #fff;padding: 15px 20px;margin-top: -4px;border-radius: 0 0 15px 15px;font-weight: 600;transition: all 0.3s}
.lightgallery .galerie-item h5 small {color:#d3af86;text-transform: uppercase;transition: all 0.3s}
.lightgallery .galerie-item:hover {cursor: pointer}
.lightgallery .galerie-item:hover img {opacity: .75}
.lightgallery .galerie-item:hover h5 {background: rgba(211,175,134,.75);color:#fff}
.lightgallery .galerie-item:hover h5 small {color:#322A2A}

/* ====== cantine ====== */
body#cantine {background: url('../img/saint-joseph-college-2024.webp') no-repeat center;background-size: cover;background-attachment:fixed}
body#cantine .tabs .tab-content h4 {background: rgba(00,137,77,.8);text-shadow: 1px 1px 1px rgba(0, 0, 0, .1)}
body#cantine embed {height: 800px}
@media (max-width:1366px){
	body#cantine embed {height: 600px}
}
@media (max-width:1024px){
	body#cantine embed {height: 400px}
}

/* ====== MENTIONS LEGALES ====== */
.mentions-legales {background: #151515;display: flex;flex-direction: column;height: 100%;align-self: center;align-items: center;justify-content: top}
.mentions-legales .container {margin: 50px 0}
.mentions-legales a.retour {font-size: 1.2rem;color: #68575d;border: 1px solid #68575d;opacity: .9;padding: 18px 40px 20px 40px;float:right}
.mentions-legales h1 {color: #68575d;margin-bottom: 40px}
.mentions-legales p {color: #A8A5A6}
.mentions-legales p strong {color: #fff}
.mentions-legales a {color:#68575d}
.mentions-legales a:hover {opacity: 1;color: #A8A5A6}

/* ====== 404 ====== */
.erreur404 {background: #151515;display: flex;flex-direction: column;height: 100vh;align-self: center;align-items: center;justify-content: center;text-align: center}
.erreur404 h1 {font-size: 5rem;color: #68575d}
.erreur404 h2 {font-size: 2rem;color:#A8A5A6;margin-bottom: 150px}
.erreur404 a {font-size: 1.2rem;color: #68575d;border: 1px solid #68575d;opacity: .9;padding: 18px 40px 20px 40px}
.erreur404 a:hover {opacity: 1;color: #A8A5A6}