/* établissement site */

:root {
	--accent-ecole: var(--secondary); /* couleur accent par défaut pour fiche école, overrider au besoin */ 
	--gris: #ebebeb; /* gris plus foncé */
	--grispale: #f5f5f5; /* gris pâle pour menus et highlights contenu */
}

.fiche { display: grid; grid-template-columns: 28.125rem auto; grid-template-rows: auto auto auto auto auto 1fr; align-items: start; font-size: 1.25rem; }

/* zone titre et liens sociaux / Mozaik */
.fiche-titre { grid-column: 1; grid-row: 1; padding: 3rem 2.5rem; background: var(--accent-ecole); color: var(--blanc); }
.fiche-titre b { text-transform: uppercase; font-weight: 400; }
.fiche-titre h1 { font-size: 240%; line-height: 1; text-align: left; }
.fiche-titre-navs { margin: 3rem 0 0; }
.fiche-titre-navs a:not(.btn) { color: var(--blanc); font-size: 240%; }
.fiche-titre-navs a:not(.btn):hover { color: var(--noir); }
.fiche-titre-navs .btn { min-height: 0; font-size: 100%; padding: 1.25em 1.4em; background: var(--noir); }
.fiche-titre-navs .btn i, .fiche-menu a.btn i { font-size: 80% !important; }
.fiche-titre-navs .btn:hover { background: var(--blanc) !important; color: var(--accent-ecole); }

/* zone image d'entête */
.fiche-entete { grid-column: 2; grid-row: 1 / span 2; }
.fiche-entete figure { position: relative; overflow: hidden; height: 0; padding-bottom: 44.897959%; /* 1470x660 */ background: var(--grispale); }
.fiche-entete img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* zone menu */
.fiche-menu { grid-column: 1; grid-row: 2 / span 3; background: var(--grispale); position: relative; padding: 2.5rem 3.125rem; }
.fiche-menu ul { margin: 0 0 3.125rem; }
.fiche-menu ul li { padding: 0.25em 0; }
.fiche-menu ul a { display: flex; align-items: start; color: var(--noir); font-size: 125%; font-weight: 600; }
.fiche-menu ul a:hover { color: var(--accent-ecole); }
.fiche-menu ul i, #fiche-menu-toggle i { margin: 0.5em 0 0 0.75em; font-size: 75%; line-height: 1; color: var(--accent-ecole); transform: rotate(90deg); transition: transform 0.15s ease; }
.fiche-menu ul a[aria-expanded=true] i, #fiche-menu-toggle[aria-expanded=true] i { transform: rotate(270deg); }
.fiche-menu ul ul { margin: 0; }
.fiche-menu ul ul li { position: relative; padding-left: 1.5em; }
.fiche-menu ul ul li:before { content: "•"; position: absolute; top: 0.175em; left: 0.66em; color: var(--noir); font-weight: 700; }
.fiche-menu ul ul a { font-size: 100%; font-weight: 400; }
.fiche-menu ul ul .current_page_item a, .fiche-menu ul li.current_page_item { text-decoration: underline; color: var(--noir); }
.fiche-menu a.btn { position: absolute; display: block; left: 2.5rem; right: 2.5rem; bottom: -1.75em; min-height: 0; font-size: 100%; padding: 1.25em 0.7em; text-align: center; background: var(--noir); }
.fiche-menu a.btn:hover { background: var(--accent-ecole) !important; }
#fiche-menu-toggle { width: 100%; min-height: 0; padding: 0.75em; border: 2px solid var(--noir); background: transparent !important; color: var(--noir); font-size: 93.75%; }
#fiche-menu-toggle i { margin-top: 0; color: inherit; }

/* zone logo (accueil seulement) */
.fiche-logo { grid-column: 1; grid-row: 5; margin: 4rem 3.125rem -2rem; }
.fiche-logo div { aspect-ratio: 9 / 10; background: var(--blanc); }
.fiche-logo img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; }

/* zone contenu principal */
.fiche-contenu { grid-column: 2; grid-row: 3 / span 4; color: var(--noir); }
.fiche-contenu-inner { padding: 5.5rem 3.125rem; }
.fiche-contenu h2, .fiche-contenu h3, .fiche-contenu h4 { color: var(--accent-ecole); }

.vc_cta3.valign_milieu .vc_cta3-icons, .vc_cta3.valign_milieu .vc_cta3_content-container { vertical-align: middle; }

/* overrides couleurs pour contenu principal */
.sandbox .liens ul li a, .sandbox a:not(.btn), .sandbox .liens ul li a span { color: var(--accent-ecole) !important; }
.sandbox .liens ul li a:hover, .sandbox .liens ul li a:hover span, .sandbox a:not(.btn):hover, .sandbox .liens ul li a:before, .sandbox .liens ul li:not(:has(a))::before, .sandbox .liens ul li a:hover:before { color: var(--noir) !important; }
.btn.btn-style-defaut { background-color: var(--accent-ecole); }
.btn:hover, .btn:not(.toggle-fermer):hover { background-color: var(--noir) !important; }
.sandbox .flex-direction-nav a, .lightbox .lb-nav a.lb-prev, .lightbox .lb-nav a.lb-next { color: var(--blanc) !important; }
.sandbox .flex-direction-nav a:hover, .lightbox .lb-nav a.lb-prev:hover, .lightbox .lb-nav a.lb-next:hover { color: var(--accent) !important; }

.sandbox .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab.vc_active>a, .sandbox .vc_tta-color-grey.vc_tta-style-classic .vc_tta-tab>a:hover, 
.sandbox .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-title>a, 
.sandbox .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-title>a:hover, 
.sandbox .vc_general.vc_cta3.vc_cta3-style-classic, 
.sandbox .vc_tta-color-grey.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-body, 
.sandbox .vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels { border-color: var(--grispale); background: var(--grispale); color: var(--noir); }

.sandbox .wpb_single_image .vc_figure-caption { background-color: var(--grispale); }

.sandbox .vc_pagination-color-grey.vc_pagination-style-outline .vc_active .vc_pagination-trigger { background-color: var(--accent-ecole) !important; border-color: var(--accent-ecole) !important; }
.sandbox .vc_pagination-color-grey.vc_pagination-style-outline .vc_pagination-trigger { background-color: var(--gris) !important; border-color: var(--gris) !important; }

/* zone coordonnées */
.fiche-coords { grid-column: 1; grid-row: 6; padding: 6.25rem 3.125rem 3.125rem; text-align: center; color: var(--noir); }
.fiche-coords i.icon-etablissement { position: relative; margin: 0 0 2em; font-size: 225%; }
.fiche-coords i.icon-etablissement:before { position: relative; z-index: 2; }
.fiche-coords i.icon-etablissement:after { content: ""; position: absolute; z-index: 1; left: 50%; width: 2.22em; height: 3.33em; margin: -0.5em 0 0 -1.11em; background: url(/wp-content/themes/csssh/assets/bg_pushpin_etablissement.svg) no-repeat 50%; background-size: cover; }
.fiche-coords i.icon-telephone { font-size: 125%; }
.fiche-coords i.icon-horaire { font-size: 225%; }
.fiche-coords i.icon-horaire:before { margin-left: -0.1em; /* offset car l'icône a l'air décentré */ }
.fiche-coords p { margin: 0 0 1.5em; font-size: 100%; line-height: 1.25; }
.fiche-coords strong { font-weight: 600; text-transform: uppercase; }
.fiche-coords a, .fiche-coords i { color: var(--accent-ecole); }
.fiche-coords a:hover { color: var(--noir); }
.fiche-coords a i { color: inherit; }

/* liste des actualités */
.liste-nouvelles-item { font-size: 1.875rem; background: var(--blanc); color: inherit; }
.liste-nouvelles-item:hover { background: var(--gris); }
.liste-nouvelles-item time { font-size: max(81.25%, 0.9375rem); opacity: 0.5; }
.liste-nouvelles-item time em { font-style: normal !important; }
.liste-nouvelles-item h3, .liste-nouvelles-item p { font-size: 100%; line-height: 1.167; }
.liste-nouvelles-item h3 { text-transform: uppercase; }
.liste-nouvelles-item p:last-child { margin-bottom: 0; }
.liste-nouvelles-img { background: var(--grispale); }
.liste-nouvelles-img figure { aspect-ratio: 1;}
.liste-nouvelles-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.liste-nouvelles footer { text-align: center; }
.liste-nouvelles .btn { background: var(--accent-ecole); }
.liste-nouvelles .btn:hover { background: var(--noir) !important; }



/* media queries */
@media (min-width: 62rem) { /* 992px/16 - LG+ */	
	/* entête site principal : désactivation sticky pour les fiches écoles */
	.header-navbar { position: relative; }
	.fiche-menu-inner.collapse:not(.show) { display: block; }
	.fiche-menu-inner.collapsing { height: auto; overflow: visible; }		
}

@media (max-width: 87.49875rem) { /* 1399px/16 - XXL- */
	.fiche { grid-template-columns: 24.0625rem auto; font-size: 1.125rem; }
	.fiche-menu a.btn { left: 2rem; right: 2rem; }	
	.liste-nouvelles-item { font-size: 1.5rem; }
}

@media (max-width: 74.938rem) { /* 1199px/16 - XL- */
	.fiche { grid-template-columns: 18rem auto; font-size: 1rem; }
	.fiche-titre { padding: 2.5rem 1.5rem; }
	.fiche-titre h1 { font-size: 200%; }
	.fiche-menu { padding: 1.5rem 1.875rem; }
	.fiche-menu ul { margin: 0 0 1.5rem; }
	.fiche-titre-navs .btn, .fiche-menu a.btn { font-size: 93.75%; padding-top: 0.75em; padding-bottom: 0.75em; }
	.fiche-menu a.btn { left: 0.75rem; right: 0.75rem; bottom: -1.25em; }
	.fiche-logo { margin: 3.125rem 1.875rem -2.5rem; }
	.fiche-contenu-inner { padding: 1.875rem; }
	
	.liste-nouvelles-item { font-size: 1.25rem; }
}

@media (max-width: 61.938rem) { /* 991px/16 - LG- */
	.nav-overlay-etablissement body:after { visibility: visible; opacity: 0.5; }
	.fiche { display: block; font-size: inherit; }
	.fiche-titre { padding: 1.5rem 1.25rem 2.5rem; font-size: 0.9375rem; }
	.fiche-titre-navs { margin: 2rem 0 0; }
	.fiche-menu { position: sticky; z-index: 11; top: 0; padding: 1rem 1.25rem; }
	.fiche-menu-inner > ul { margin-top: 1rem; }
	.fiche-menu a.btn { position: static; display: inline-block; padding-left: 1.25em; padding-right: 1.25em; }	
	#fiche-menu-toggle, .fiche-menu a.btn { font-size: 81.25%; }
	.fiche-logo { margin: 1.25rem 1.25rem -0.5rem; }
	.fiche-logo div { max-width: 320px; margin: 0 auto; }
	.fiche-contenu-inner { padding: 1.25rem; }	
	.fiche-coords { padding: 3.125rem 1.25rem; }	
}

@media (max-width: 47.938rem) { /* 767px/16 - MD */

}

@media (max-width: 35.938rem) { /* 575px/16 - SM- */

}